/* CST SITE — shared design system, extracted VERBATIM from the Bill-approved
   r3-8-the-monolith.html (09-10). Every phase-2 page links this file.
   Page-specific CSS goes in that page's own <style>, never here, so pages
   cannot drift from the approved look. Tokens: --bone --brass --fog --ink,
   serif=Libre Caslon Text, --grot=Archivo, --mono=IBM Plex Mono, --ease. */

/* ================= FONTS (local, self-contained) ================= */
@font-face{font-family:'Libre Caslon Text';src:url('/assets/fonts/LibreCaslonText-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Libre Caslon Text';src:url('/assets/fonts/LibreCaslonText-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Libre Caslon Text';src:url('/assets/fonts/LibreCaslonText-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/Archivo-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/Archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/Archivo-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-display:swap}

/* ================= TOKENS ================= */
:root{
  --bone:#F5F2EE;            /* sampled from the badge film ground */
  --bone-dim:#E6E1D8;
  --navy-deep:#0B1520;
  --navy:#101C29;
  --navy-mid:#16273A;
  --teal:#2E8C8C;
  --fog:#B8C4CC;
  --brass:#C08A3E;
  --brass-hi:#D9A85E;
  --ink:#EDE8DD;                       /* text on dark */
  --muted:rgba(237,232,221,.62);
  --faint:rgba(237,232,221,.34);
  --ink-l:#14202C;                     /* text on light */
  --muted-l:rgba(20,32,44,.60);
  --faint-l:rgba(20,32,44,.34);
  --hair:rgba(255,255,255,.10);
  --ease:cubic-bezier(.22,.61,.21,1);
  --serif:'Libre Caslon Text',Georgia,serif;
  --grot:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  background:var(--navy-deep);
  color:var(--ink);
  font-family:var(--grot);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(192,138,62,.35);color:var(--bone)}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ================= AMBIENT / TEXTURE LAYERS ================= */
#swell{position:fixed;inset:0;z-index:3;pointer-events:none}
.grain{
  position:fixed;inset:-40px;z-index:8;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 58%,rgba(4,9,15,.38) 100%);
  opacity:.8;
}

/* content sits above the swell canvas */
.z{position:relative;z-index:4}

/* ================= REVEAL SYSTEM ================= */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ================= HERO — THE MARK ================= */
.hero{
  min-height:100vh;position:relative;
  background:
    radial-gradient(90% 70% at 50% 38%,#F7F4EF 0%,var(--bone) 55%,#ECE7DF 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,3.4vh,38px);
  padding:6vh 24px 10vh;
}
.mark{
  position:relative;
  width:min(60vh,520px,84vw);
  aspect-ratio:1/1;
  border-radius:50%;          /* second, independent guard against a square edge */
  isolation:isolate;
}
/* THE MASK. The badge film is a 1088x1088 near-white plate; its sun bloom would
   otherwise expose the square frame edge against the page ground. Clip the film
   to the roundel's OWN ring — measured off the master: ring centre (49.9%,49.4%),
   ring radius grows 43.0% -> 45.2% of frame across the 5.55s reveal. The static
   value below is the safe maximum (never cuts the ring); markClip hugs it tighter
   while the reveal plays. Outside the circle nothing is painted, whatever the
   clip's ground or bloom does. */
.mark video,.mark img.poster{
  width:100%;height:100%;object-fit:cover;
  -webkit-clip-path:circle(45.9% at 49.9% 49.4%);
          clip-path:circle(45.9% at 49.9% 49.4%);
  animation:markIn 5.55s var(--ease) both, markClip 5.55s linear both;
}
@keyframes markIn{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes markClip{
  0%  {-webkit-clip-path:circle(44.0% at 49.9% 49.4%);clip-path:circle(44.0% at 49.9% 49.4%)}
  30% {-webkit-clip-path:circle(45.0% at 49.9% 49.4%);clip-path:circle(45.0% at 49.9% 49.4%)}
  60% {-webkit-clip-path:circle(45.9% at 49.9% 49.4%);clip-path:circle(45.9% at 49.9% 49.4%)}
  100%{-webkit-clip-path:circle(45.9% at 49.9% 49.4%);clip-path:circle(45.9% at 49.9% 49.4%)}
}
.kicker{
  font-family:var(--mono);font-weight:500;text-transform:uppercase;
  font-size:clamp(10px,1vw,12.5px);color:var(--muted-l);
  letter-spacing:.55em;text-indent:.55em;opacity:0;text-align:center;
  transition:letter-spacing 1.6s var(--ease),opacity 1.4s var(--ease);
  transition-delay:.9s;
}
.kicker.in{letter-spacing:.3em;text-indent:.3em;opacity:1}
.kicker .dot{color:var(--brass)}
.hero .est{
  font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.3vw,17px);
  color:var(--faint-l);
}
.cue{
  position:absolute;bottom:4.5vh;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;color:var(--faint-l);letter-spacing:.3em;text-indent:.3em;
  display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;
  transition:color .5s var(--ease);z-index:5;
}
.cue:hover{color:var(--brass)}
.cue .line{width:1px;height:34px;background:currentColor;opacity:.6;transform-origin:top;animation:cueDrop 2.6s var(--ease) infinite}
@keyframes cueDrop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}80%{transform:scaleY(1);opacity:.6}100%{transform:scaleY(1);opacity:0}}

/* ================= DUSK CROSSING (no hard panel line) ================= */
.dusk{
  height:46vh;
  background:linear-gradient(to bottom,
    var(--bone) 0%,#DAD6CD 18%,#AAB3B6 40%,#5E7183 62%,#223446 82%,var(--navy-deep) 100%);
}

/* ================= MONUMENT TYPE ================= */
.monument{
  background:transparent;
  padding:22vh 6vw 20vh;
  text-align:center;
}
.monument h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,9.2vw,148px);
  line-height:1.04;letter-spacing:-.01em;color:var(--ink);
  max-width:12em;margin:0 auto;
}
/* foil-press entrance: each word presses into the page */
.monument h1 .w{
  display:inline-block;opacity:0;transform:scale(1.14);transform-origin:50% 80%;
  text-shadow:0 18px 46px rgba(0,0,0,.55);
  transition:opacity .9s var(--ease),transform 1.25s var(--ease),text-shadow 1.4s var(--ease);
  transition-delay:calc(var(--i)*140ms);
}
.monument h1.in .w{opacity:1;transform:scale(1);text-shadow:0 4px 18px rgba(0,0,0,.25)}
.accent{
  background:linear-gradient(100deg,var(--brass) 20%,#EFD9AC 38%,var(--brass-hi) 52%,var(--brass) 78%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s linear infinite;
  filter:drop-shadow(0 0 22px rgba(217,168,94,.24));
}
@keyframes sheen{0%{background-position:130% 0}100%{background-position:-130% 0}}
.monument .sub{
  margin-top:7vh;font-family:var(--grot);font-weight:300;
  font-size:clamp(17px,1.9vw,26px);color:var(--muted);letter-spacing:.02em;
}
.monument .seat{
  margin-top:4.5vh;font-family:var(--mono);font-size:clamp(10px,.95vw,12px);
  letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--faint);
}

/* ================= FULL-BLEED MOMENTS ================= */
.moment{position:relative;height:104vh;overflow:hidden}
.moment video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transition:transform 2.8s var(--ease);
}
.moment.in video{transform:scale(1)}

/* --- MOMENT I: the rotating clip pool. Two stacked layers, one decoder.
   The outgoing layer is PAUSED the instant the incoming starts, holds its last
   frame while it fades out, then has its src removed so the decoder is freed.
   Two videos are on screen for 0.62s; only one is ever decoding. --- */
.moment .pl{opacity:0;transition:opacity .62s var(--ease),transform 2.8s var(--ease)}
.moment .pl.on{opacity:1}
.moment .shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--navy-deep) 0%,rgba(11,21,32,0) 16%,rgba(11,21,32,0) 58%,rgba(11,21,32,.55) 82%,rgba(11,21,32,.95) 100%),
    linear-gradient(75deg,rgba(11,21,32,.72) 0%,rgba(11,21,32,.28) 34%,rgba(11,21,32,0) 55%),
    radial-gradient(46% 52% at 16% 86%,rgba(8,16,25,.68) 0%,rgba(8,16,25,0) 100%);
}
.cap{
  position:absolute;left:6vw;bottom:9vh;max-width:min(760px,60vw);z-index:4;
}
.cap .idx{
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;color:var(--brass-hi);margin-bottom:18px;
}
.cap h2{
  font-family:var(--serif);font-weight:400;color:var(--bone);
  font-size:clamp(34px,4.6vw,66px);line-height:1.06;margin-bottom:22px;
  text-shadow:0 2px 26px rgba(6,12,19,.75);
}
.cap p{
  font-size:clamp(15px,1.35vw,19px);color:rgba(237,232,221,.86);line-height:1.65;max-width:34em;
  text-shadow:0 1px 14px rgba(6,12,19,.8);
}
.cap p + p{margin-top:10px}

/* ink-fill entrance — "What we've carried." floods from the waterline up */
.h-fill{
  -webkit-text-stroke:1px rgba(184,196,204,.42);
  background:linear-gradient(to top,var(--bone) 50%,rgba(245,242,238,0) 50.5%);
  background-size:100% 220%;background-position:50% 0%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position 1.9s var(--ease) .15s;
}
.in .h-fill{background-position:50% 100%}

/* bearing-settle entrance — "Where we land." swings onto its heading */
.h-bearing{
  opacity:0;transform:rotate(-2.6deg) translateX(-34px);transform-origin:0 90%;
  transition:opacity 1s var(--ease),transform 1.5s var(--ease);
}
.in .h-bearing{opacity:1;transform:none}
.cap .rule{
  height:1px;background:linear-gradient(90deg,var(--brass),rgba(192,138,62,0));
  width:0;transition:width 1.6s var(--ease) .7s;margin-bottom:20px;
}
.in .rule{width:120px}

/* the capability lead — breadth first, the flex at the end */
.cap p.lead{
  font-family:var(--serif);
  font-size:clamp(19px,1.85vw,27px);
  color:var(--bone);line-height:1.42;letter-spacing:.005em;
}
.cap p.lead + p{margin-top:16px}
.cap p.lead{max-width:none;text-wrap:balance}

/* ================= CODA — THE RAPIDS ================= */
.coda{height:88vh}
.coda .shade{
  background:
    linear-gradient(to bottom,var(--navy-deep) 0%,rgba(11,21,32,.06) 16%,rgba(11,21,32,0) 44%,rgba(11,21,32,.30) 72%,rgba(11,21,32,.86) 92%,var(--navy-deep) 100%),
    linear-gradient(to bottom,rgba(6,12,19,0) 74%,rgba(6,12,19,.42) 100%);
}
.coda video{filter:saturate(1.04) contrast(1.03)}
.coda .stamp{
  position:absolute;left:0;right:0;bottom:11vh;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:0 7vw;
}
.coda .stamp .bar{
  height:1px;width:0;max-width:100%;
  background:linear-gradient(90deg,rgba(192,138,62,0),var(--brass-hi) 50%,rgba(192,138,62,0));
  transition:width 1.6s var(--ease);
}
.coda.in .stamp .bar{width:min(420px,72vw)}
.coda .stamp .cline{
  font-family:var(--mono);font-weight:500;text-transform:uppercase;
  font-size:clamp(9.5px,1vw,12.5px);letter-spacing:.34em;text-indent:.34em;
  color:rgba(245,242,238,.9);text-align:center;line-height:2;
  text-shadow:0 2px 18px rgba(6,12,19,.9);
  max-width:100%;
}
.coda .stamp .cline .c{
  display:inline-block;white-space:pre;
  opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--ease),transform .7s var(--ease);
  transition-delay:calc(700ms + var(--i)*26ms);
}
.coda.in .stamp .cline .c{opacity:1;transform:none}
.coda .stamp .cline .c.dot{color:var(--brass-hi)}
.coda .stamp .cline .wd{display:inline-block;white-space:nowrap}

/* ================= SPEC INTERLUDE ================= */
.specs{
  padding:24vh 6vw;text-align:center;
}
.specs .mline{
  font-family:var(--mono);font-weight:400;text-transform:uppercase;
  font-size:clamp(11px,1.15vw,14px);letter-spacing:.3em;text-indent:.3em;
  color:rgba(237,232,221,.8);display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px 0;
}
.specs .mline span{white-space:nowrap}
.specs .mline .dot{color:var(--brass);padding:0 1.2em}
.specs .over{
  font-family:var(--serif);font-style:italic;color:rgba(237,232,221,.5);
  font-size:clamp(15px,1.5vw,20px);margin-bottom:5.5vh;
}

/* ================= LANDFALL ================= */
.landfall{
  padding:20vh 6vw 16vh;text-align:center;position:relative;
  background:linear-gradient(to bottom,transparent,rgba(22,39,58,.55) 55%,transparent);
}
.landfall h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,7vw,110px);line-height:1.08;
  color:rgba(237,232,221,.07);
  text-shadow:0 0 0 rgba(217,168,94,0);
  transition:color 2s var(--ease),text-shadow 2s var(--ease);
}
.landfall h2.in{
  color:var(--ink);
  text-shadow:0 0 80px rgba(217,168,94,.20),0 0 26px rgba(217,168,94,.08);
}
.landfall .tel{
  display:inline-block;margin-top:5vh;
  font-family:var(--mono);font-size:clamp(17px,2.2vw,30px);letter-spacing:.14em;
  color:var(--brass-hi);border-bottom:1px solid rgba(217,168,94,.35);
  padding-bottom:8px;
  transition:color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease),text-shadow .5s var(--ease);
}
.landfall .tel:hover{
  color:var(--bone);border-color:var(--bone);transform:translateY(-3px);
  text-shadow:0 0 30px rgba(217,168,94,.5);
}
.landfall .note{
  margin-top:3.2vh;font-size:clamp(13px,1.2vw,16px);color:var(--faint);
}

/* ================= FOOTER STRIP ================= */
footer{
  border-top:1px solid var(--hair);
  padding:44px 6vw 54px;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:linear-gradient(to bottom,rgba(11,21,32,0),rgba(6,12,19,.9));
}
footer .seal{
  width:58px;height:58px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(217,168,94,.4),0 6px 22px rgba(0,0,0,.5);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
footer .seal:hover{transform:rotate(8deg) scale(1.06);box-shadow:0 0 0 1px var(--brass-hi),0 8px 30px rgba(0,0,0,.6)}
footer .who{display:flex;align-items:center;gap:20px}
footer .name{font-family:var(--serif);font-size:19px;color:var(--ink)}
footer .place{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--faint);margin-top:6px}
footer .right{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
footer .fl{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--muted);
  transition:color .45s var(--ease);position:relative;
}
footer .fl::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--brass-hi);transition:width .5s var(--ease)}
footer .fl:hover{color:var(--brass-hi)}
footer .fl:hover::after{width:100%}
footer .est{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--faint)}
footer .credit{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-indent:.16em;
  text-transform:uppercase;color:rgba(237,232,221,.28);
}

/* ================= MOBILE — ITS OWN DESIGN ================= */
@media (max-width:700px){
  .hero{padding:8vh 20px 12vh;gap:26px}
  .mark{width:76vw}
  .kicker{font-size:9px;line-height:2.1;max-width:86vw}
  .dusk{height:30vh}
  .monument{padding:15vh 7vw 9vh;text-align:left}
  .monument h1{font-size:15vw;line-height:1.1;max-width:none}
  .monument .sub{margin-top:5vh;font-size:16px}
  .monument .seat{letter-spacing:.2em;text-indent:.2em;font-size:9px;line-height:2.2}
  .moment{height:78vh}
  .cap{left:7vw;right:7vw;bottom:7vh}
  .cap h2{font-size:11vw}
  .cap p{font-size:14px}
  .coda{height:64vh}
  .coda .stamp{bottom:9vh}
  .coda .stamp .cline{font-size:8.5px;letter-spacing:.24em;text-indent:.24em}
  .cap p.lead{font-size:19px}
  .specs{padding:16vh 8vw}
  .specs .mline{flex-direction:column;gap:16px;letter-spacing:.26em}
  .specs .mline .dot{display:none}
  .landfall{padding:15vh 7vw 12vh}
  .landfall h2{font-size:13vw}
  footer{flex-direction:column;align-items:flex-start;gap:26px;padding:38px 7vw 46px}
  footer .right{gap:20px}
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.kicker,.monument h1 .w,.h-bearing{opacity:1!important;transform:none!important}
  .h-fill{background-position:50% 100%}
  .in .rule,.cap .rule{width:120px}
  .landfall h2{color:var(--ink);text-shadow:none}
  .coda .stamp .bar{width:min(420px,72vw)}
  .coda .stamp .cline .c{opacity:1!important;transform:none!important}
  .moment video{transform:none}
  .moment .pl{opacity:0}
  .moment .pl.on{opacity:1}
  .cue{display:none}
}