/* Local Stone Witness visual study. Loaded by the homepage only. */
body.home-page {
  --ink: #090909;
  --surface: #171213;
  --surface-2: #211719;
  --line: rgba(248, 232, 229, .17);
  --line-strong: rgba(248, 232, 229, .3);
  --text: #f4efeb;
  --muted: #b6a9a8;
  --accent: #e06058;
  --accent-soft: rgba(224, 96, 88, .14);
  background: #090809;
}

body.home-page::before {
  z-index: 0;
  opacity: 1;
  background-image:
    radial-gradient(ellipse at 14% 26%, rgba(134, 10, 22, .24), transparent 45%),
    radial-gradient(ellipse at 88% 70%, rgba(110, 8, 18, .17), transparent 48%),
    linear-gradient(180deg, rgba(6, 5, 6, .17), rgba(8, 5, 6, .57) 62%, rgba(9, 8, 9, .87)),
    url("/assets/interactive/background-red-black.webp");
  background-position: center, center, center, center top;
  background-size: cover, cover, cover, cover;
  mask-image: none;
}

.home-page .page-shell { z-index: 1; padding-bottom: 86px; }
.home-page .masthead { border-bottom-color: rgba(224, 96, 88, .3); }
.home-page .hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100vw;
  min-height: clamp(680px, 80vh, 860px);
  margin-left: calc(50% - 50vw);
  padding: clamp(16rem, 28vw, 22rem) max(24px, calc((100vw - 1180px) / 2)) 5rem;
  overflow: hidden;
}
.home-page .hero-backdrop {
  position: absolute;
  z-index: 0;
  inset: -16px 0 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(8, 5, 6, .13) 0%, rgba(8, 5, 6, .3) 37%, rgba(9, 8, 9, .75) 70%, #090809 100%),
    url("/assets/interactive/observer-protocol-hero.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%, 100% auto;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse 48% 38% at 50% 17%, black 3%, rgba(0, 0, 0, .7) 38%, transparent 100%);
  opacity: calc(.58 * var(--hero-opacity, 1));
  filter: blur(calc(3px + var(--hero-blur, 0px)));
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.015);
}
.home-page .hero-copy { position: relative; z-index: 1; max-width: 860px; }
.home-page .hero h1 { font-size: clamp(4.1rem, 9vw, 8rem); }
.home-page .hero h1 span { color: var(--accent); }
.home-page .hero .lede { max-width: 62ch; }
.home-page .buy-button {
  background: var(--accent);
  color: #170a0a;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.home-page .buy-button:not(:disabled):hover {
  background: #ee7a71;
  box-shadow: 0 5px 0 rgba(74, 17, 20, .5);
  transform: translateY(-2px);
}
.home-page .buy-button:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
.home-page .button-secondary { transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.home-page .button-secondary:hover { transform: translateY(-2px); }
.home-page .button-secondary:active { transform: translateY(1px); }
.home-page .experience-card,
.home-page .dossier-card { border-top: 1px solid transparent; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.home-page .experience-card:hover,
.home-page .dossier-card:hover { border-top-color: var(--accent); background: #241819; }
.home-page .dossier-card:hover { transform: translateY(-2px); }
.home-page .status-card { background: linear-gradient(135deg, rgba(141, 27, 34, .22), transparent 57%), var(--surface); }

.social-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.social-dock {
  position: fixed;
  z-index: 30;
  right: 20px;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(237, 193, 190, .34);
  border-radius: 18px;
  background: rgba(20, 11, 13, .9);
  box-shadow: 0 15px 50px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px);
}
.social-dock a {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 12px;
  color: #f5e9e5;
  text-decoration: none;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.social-dock a:hover,
.social-dock a:focus-visible { color: #fff; background: #8e222b; transform: translateY(-4px); }
.social-dock svg { display: block; width: 25px; height: 25px; }
.dock-tip {
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  padding: .35rem .55rem;
  border: 1px solid rgba(237, 193, 190, .34);
  border-radius: 5px;
  background: #1b1012;
  color: #fff;
  font: 700 .65rem/1.2 ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .2s ease, transform .2s ease;
}
.social-dock a:hover .dock-tip,
.social-dock a:focus-visible .dock-tip { opacity: 1; transform: translate(-50%, 0); }
.home-page .footer-social {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.home-page .footer-social a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
  padding: .45rem .7rem;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.home-page .footer-social a:hover,
.home-page .footer-social a:focus-visible { border-color: var(--accent); background: var(--surface-2); }
.home-page .footer-social svg { display: block; width: 20px; height: 20px; color: var(--accent); }

.home-page .media-gallery {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  background: transparent;
}
.home-page .media-card {
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  min-width: 0;
  border: 1px solid var(--line);
  background: rgba(19, 13, 14, .9);
  transition: border-color .25s ease, transform .25s ease;
}
.home-page .media-card--wide { grid-column: span 4; }
.home-page .media-card:first-child { grid-column: 1 / -1; }
.home-page .media-card:hover { border-color: rgba(224, 96, 88, .7); transform: translateY(-3px); }
.home-page .media-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #080809;
  color: var(--text);
  text-align: left;
  cursor: zoom-in;
}
.home-page .media-open picture {
  width: 100%;
  aspect-ratio: 2048 / 1280;
  background: #080809;
}
.home-page .media-open img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .35s ease, filter .35s ease;
}
.home-page .media-open:hover img,
.home-page .media-open:focus-visible img { transform: scale(1.018); filter: brightness(1.06); }
.home-page .media-open__hint {
  position: absolute;
  right: .65rem;
  bottom: .65rem;
  padding: .32rem .48rem;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(9, 8, 9, .82);
  color: #f3e8e4;
  font: 700 .58rem/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: .1em;
}
.home-page .media-card figcaption {
  flex: 1;
  border-top: 1px solid rgba(224, 96, 88, .24);
}
.home-page .media-card h3 { margin-top: .6rem; }
.home-page .media-card p { max-width: 48ch; }

.media-lightbox {
  position: fixed;
  width: min(94vw, 1450px);
  max-width: none;
  max-height: 94vh;
  padding: clamp(.7rem, 1.5vw, 1.25rem);
  overflow: auto;
  border: 1px solid rgba(224, 96, 88, .55);
  background: #100c0d;
  color: #f4efeb;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
}
.media-lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.media-lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
  color: #c7a9a6;
  font: 700 .65rem/1.3 ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
}
.media-lightbox__close {
  min-height: 38px;
  padding: .35rem .7rem;
  border: 1px solid rgba(248, 232, 229, .35);
  background: #241719;
  color: #f4efeb;
  font: 700 .75rem/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.media-lightbox__close:hover { border-color: #e06058; }
.media-lightbox img {
  display: block;
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  background: #080809;
}
.media-lightbox p { margin: .65rem 0 0; color: #c7a9a6; font-size: .85rem; }

.home-page .reveal { animation: none; }
.has-js .home-page .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .48s ease, transform .48s ease;
}
.has-js .home-page .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .home-page .hero { min-height: 680px; padding-top: 17rem; }
  .home-page .hero-backdrop { background-size: 100% 100%, 100% auto; }
  .home-page .media-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .media-card,
  .home-page .media-card--wide { grid-column: span 1; }
  .home-page .media-card:first-child,
  .home-page .media-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .home-page .hero { min-height: 710px; padding: 12rem 14px 3rem; }
  .home-page .hero-backdrop {
    background-size: 100% 100%, 100% auto;
    background-position: center top;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .85), rgba(0, 0, 0, .5) 24%, transparent 47%);
  }
  .home-page .hero h1 { font-size: clamp(3.8rem, 16vw, 5.5rem); }
  .social-dock { position: absolute; top: 128px; right: 14px; bottom: auto; }
  .home-page .footer-social { gap: .4rem; }
  .home-page .media-gallery { grid-template-columns: 1fr; }
  .home-page .media-card,
  .home-page .media-card--wide { grid-column: auto; }
  .media-lightbox { width: 96vw; max-height: 96vh; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hero-backdrop { filter: blur(3px) !important; transform: none !important; }
  .has-js .home-page .reveal { opacity: 1; transform: none; }
  .home-page .media-card:hover,
  .home-page .media-open:hover img,
  .home-page .media-open:focus-visible img,
  .social-dock a:hover,
  .social-dock a:focus-visible { transform: none; }
}