/* ============================================================
   NAUTILUS — v4 inner-page system (Jul 21, 2026)
   Design language: index-v4.html (light/morning, Fraunces + Archivo,
   paper/sand/brass/ink). Mechanisms: PSGC site as design guide —
   hero-deck scrim + parallax, wipe-develop photos, stacking cards.
   Tokens + nav/footer/btn/label/quote/cta lifted verbatim from
   index-v4.html so the homepage and inner pages read as one site.
   Load order: this file → nautilus-v4.js (end of body) → page script.
   ============================================================ */

:root{
  --ink:#0b111d;
  --ink-2:#101a2b;
  --sand:#ece5d8;
  --sand-dim:#c9c1b1;
  --brass:#c39a5e;
  --brass-soft:#a98850;
  --paper:#f6f1e7;
  --paper-2:#ece5d8;
  --ink-dim:rgba(11,17,29,.62);
  --hairline:rgba(236,229,216,.14);
  --hairline-dark:rgba(11,17,29,.14);
  --wash-blue:#c3dcea; /* Jul 27: btn hover, sampled from homepage water gradient */
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--brass);color:var(--ink)}
.serif{font-family:'Fraunces',serif;font-weight:300}
img{max-width:100%}

/* ---------- nav (verbatim from index-v4; no loader on inner pages) ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px clamp(24px,5vw,64px);
  transition:background .5s,backdrop-filter .5s,padding .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  background:rgba(246,241,231,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:16px clamp(24px,5vw,64px);
  border-bottom-color:var(--hairline-dark);
}
.nav-logo{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:19px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;line-height:1.2;
}
.nav-logo em{font-style:normal;color:var(--brass-soft)}
.nav-logo .sub{display:block;font-family:'Archivo',sans-serif;font-size:8px;letter-spacing:.46em;color:var(--ink-dim)}
.nav-links{display:flex;gap:clamp(20px,2.6vw,40px);align-items:center;list-style:none}
.nav-links a{
  color:var(--ink-dim);text-decoration:none;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  transition:color .3s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:var(--brass);transition:width .4s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{
  border:1px solid var(--hairline-dark);padding:11px 24px;border-radius:100px;
  color:var(--ink)!important;transition:background .4s,border-color .4s,color .4s!important;
}
.nav-cta:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)!important}
.nav-cta::after{display:none}
@media(max-width:1080px){.nav-links li:not(.keep){display:none}}

/* ---------- grain (v4 language) ---------- */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;z-index:90;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,-2%)}20%{transform:translate(2%,3%)}
  30%{transform:translate(-2%,1%)}40%{transform:translate(3%,-1%)}50%{transform:translate(-1%,2%)}
  60%{transform:translate(2%,-3%)}70%{transform:translate(-3%,3%)}80%{transform:translate(1%,-2%)}90%{transform:translate(-2%,-3%)}
}

/* ---------- shared section chrome (verbatim) ---------- */
section{position:relative;padding:clamp(90px,14vh,160px) clamp(24px,5vw,64px)}
.label{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-soft);
  display:flex;align-items:center;gap:14px;margin-bottom:34px;
}
.label::before{content:'';width:36px;height:1px;background:var(--brass-soft)}
.wrap{max-width:1280px;margin:0 auto}
h2{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-.015em;
}
h2 em{font-style:italic;color:var(--brass-soft)}

/* ---------- buttons (verbatim) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--ink);background:var(--brass);text-decoration:none;
  padding:16px 30px;border-radius:100px;
  transition:background .4s,color .4s,border-color .4s,transform .4s var(--ease);
}
/* Jul 27 (Jack): dark-black pills → brass; hover → wash light blue. Ghost/sand variants untouched. */
.btn:hover{background:var(--wash-blue);color:var(--ink);transform:translateY(-2px)}
.btn svg{transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hairline-dark)}
.btn.ghost:hover{background:transparent;border-color:var(--brass-soft);color:var(--brass-soft)}
.band-ink .btn{background:var(--sand);color:var(--ink)}
.band-ink .btn:hover{background:var(--brass)}
.band-ink .btn.ghost{background:transparent;color:var(--sand);border-color:var(--hairline)}
.band-ink .btn.ghost:hover{border-color:var(--brass);color:var(--brass)}
/* CTA band = tan (Jul 27): brass button on paper-2 surface */
.cta .btn{background:var(--brass);color:var(--ink)}
.cta .btn:hover{background:var(--wash-blue);color:var(--ink)}
.cta .btn.ghost{background:transparent;color:var(--ink);border-color:var(--hairline-dark)}
.cta .btn.ghost:hover{border-color:var(--brass-soft);color:var(--brass-soft)}

/* ---------- reveal engine (v4 .rv IO) ---------- */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}

/* ---------- wipe develop (PSGC mechanism, Safari-safe: observe the
   wrapper .rv.wipe-box, clip the inner .wipe) ---------- */
.rv.wipe-box{opacity:1;transform:none}
.wipe-box{overflow:hidden}
.wipe-box .wipe{height:100%;clip-path:inset(0 100% 0 0);transform:scale(1.12);transition:clip-path 1.15s var(--ease),transform 1.45s var(--ease)}
.wipe-box.wipe-r .wipe{clip-path:inset(0 0 0 100%)}
.wipe-box.in .wipe{clip-path:inset(0 0 0 0);transform:none}
.wipe-box.rv-d1 .wipe{transition-delay:.08s}.wipe-box.rv-d2 .wipe{transition-delay:.16s}

/* ---------- page hero: paper band (kicker → line-reveal h1 → lede) ---------- */
.page-hero{
  padding:clamp(140px,22vh,200px) clamp(24px,5vw,64px) clamp(48px,7vh,72px);
}
.ph-kicker{
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass);
  margin-bottom:26px;display:flex;align-items:center;gap:16px;
  opacity:0;animation:phFade 1s .05s var(--ease) forwards;
}
.ph-kicker::before{content:'';width:48px;height:1px;background:var(--brass);display:inline-block}
.page-hero h1{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(44px,7vw,104px);
  line-height:1.02;letter-spacing:-0.015em;color:var(--ink);max-width:14em;
}
.page-hero h1 .line{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}
.page-hero h1 .line>span{display:inline-block;transform:translateY(110%);animation:phLine 1.3s var(--ease) forwards}
.page-hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.page-hero h1 em{font-style:italic;color:var(--brass);font-weight:300;padding-right:.08em}
.lede{
  color:var(--ink-dim);font-size:clamp(15.5px,1.6vw,18px);line-height:1.65;
  max-width:34em;margin-top:24px;
  opacity:0;animation:phFade 1s .45s var(--ease) forwards;
}
.lede+.lede{margin-top:14px;animation-delay:.6s}
.lede strong{color:var(--ink);font-weight:600}
@keyframes phLine{to{transform:translateY(0)}}
@keyframes phFade{to{opacity:1}}

/* ---------- hero split (Jul 27): serif statement left, photo right ----------
   Replaces the full-bleed .hero-photo band on approach-v4 only; parallax JS
   (#heroMedia + parentElement) works unchanged inside .hs-media. */
.hero-split{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(40px,6vw,96px);align-items:center;
  max-width:1280px;margin:0 auto;
  padding:clamp(8px,2vh,24px) clamp(24px,5vw,64px) clamp(72px,10vh,120px);
}
.hero-split .hs-copy::before{
  content:'';display:block;width:48px;height:1px;background:var(--brass);margin-bottom:28px;
}
.hero-split .hs-copy p{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(21px,2.2vw,28px);line-height:1.5;
  color:var(--ink-dim);letter-spacing:-0.005em;max-width:20em;
}
.hero-split .hs-copy p strong{font-weight:400;font-style:italic;color:var(--brass)}
.hero-split .hs-media{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:16/10}
.hero-split .hs-media .media{position:absolute;inset:-10% 0;will-change:transform}
.hero-split .hs-media .media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){
  .hero-split{grid-template-columns:1fr;gap:36px}
  .hero-split .hs-media{aspect-ratio:4/3}
}

/* full-bleed photo band under the paper band — PSGC hero-deck treatment
   (scrim recolored ink/brass, media parallax via js translate3d) */
.hero-photo{
  position:relative;height:clamp(380px,56vh,600px);overflow:hidden;
}
.hero-photo.short{height:clamp(340px,46vh,480px)}
.hero-photo .media{position:absolute;inset:-8% 0;will-change:transform}
.hero-photo .media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(97deg,rgba(11,17,29,.32) 0%,rgba(11,17,29,.14) 38%,rgba(11,17,29,.04) 62%,rgba(195,154,94,.06) 100%),
    linear-gradient(to bottom,rgba(246,241,231,.28) 0%,rgba(11,17,29,0) 30%,rgba(11,17,29,.18) 100%);
}

/* ---------- story rows (PSGC about.html mechanism, v4 dress) ---------- */
.story-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,7vw,110px);
  align-items:center;max-width:1280px;margin:0 auto;
}
.story-row+.story-row{margin-top:clamp(90px,12vw,150px)}
.story-row.flip .copy{order:2}
.story-row.flip .media{order:1}
.ghost-num{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(64px,8vw,120px);line-height:1;
  color:var(--brass-soft);opacity:.28;margin-bottom:10px;
}
.story-row h2{font-size:clamp(28px,3.4vw,46px)}
.story-row .copy p{color:var(--ink-dim);font-size:16px;margin-top:20px;max-width:34em}
.story-row .copy p strong{color:var(--ink);font-weight:600}
.story-row .media{aspect-ratio:4/5;overflow:hidden;border-radius:6px}
.story-row .media .wipe img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){
  .story-row{grid-template-columns:1fr}
  .story-row.flip .copy{order:1}
  .story-row.flip .media{order:2}
  .story-row .media{aspect-ratio:16/11}
}

/* ---------- tan band (Jul 27): light variant of band-ink, matches tan CTA ---------- */
.band-tan{
  background:var(--paper-2);
  border-top:1px solid var(--hairline-dark);border-bottom:1px solid var(--hairline-dark);
}

/* ---------- dark ink band (PSGC dark story band pattern, v4 palette) ---------- */
.band-ink{
  background:
    radial-gradient(70% 90% at 50% 120%,rgba(195,154,94,.13),transparent 70%),
    var(--ink);
  color:var(--sand);
}
.band-ink .label{color:var(--brass)}
.band-ink .label::before{background:var(--brass)}
.band-ink h2{color:var(--sand)}
.band-ink h2 em{color:var(--brass)}
.band-ink .copy p,.band-ink p{color:var(--sand-dim)}
.band-ink .copy p strong{color:var(--sand);font-weight:600}
.band-ink .statement{color:var(--sand);font-weight:500}

/* ---------- stacking cards (PSGC .scard sticky stack, v4 dress:
   paper cards, hairline-dark borders, brass ghost numerals) ---------- */
.stack-zone{background:var(--paper-2);border-top:1px solid var(--hairline-dark);border-bottom:1px solid var(--hairline-dark)}
.stack{padding-top:clamp(10px,2vw,24px)}
.scard{
  position:sticky;top:96px;margin:0 auto clamp(56px,8vh,96px);max-width:1200px;
  background:var(--paper);border:1px solid var(--hairline-dark);
  box-shadow:0 24px 70px rgba(11,17,29,.1);
  display:grid;grid-template-columns:1fr 1fr;min-height:min(560px,74vh);
  overflow:hidden;border-radius:6px;
  will-change:transform;transform-origin:top center;backface-visibility:hidden;
}
.scard::after{content:'';position:absolute;inset:0;background:var(--ink);opacity:var(--dim,0);pointer-events:none;z-index:3}
.scard:last-child{margin-bottom:0}
.scard .txt{padding:clamp(34px,4.5vw,70px);display:flex;flex-direction:column;justify-content:center}
.scard .rnum{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:clamp(52px,6vw,84px);color:var(--brass-soft);opacity:.28;line-height:1;
}
.scard h2{font-size:clamp(26px,2.8vw,38px);margin-top:12px}
.scard .tagline{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:clamp(17px,1.8vw,21px);color:var(--brass-soft);margin-top:10px;
}
.scard .txt p{font-size:15.5px;color:var(--ink-dim);margin-top:16px;max-width:30em}
.scard .txt ul{
  list-style:none;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;
  gap:8px 24px;max-width:30em;
}
.scard .txt li{
  font-size:13px;letter-spacing:.08em;color:var(--ink-dim);
  padding-left:18px;position:relative;
}
.scard .txt li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--brass-soft)}
.scard .pic{position:relative;min-height:320px}
.scard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:860px){
  .scard{position:static;grid-template-columns:1fr;min-height:0;transform:none!important}
  .scard::after{display:none}
  .scard .pic{min-height:0;aspect-ratio:16/10;order:-1}
  .scard .pic img{position:static}
}

/* ---------- quote bands (verbatim v4 + watercolor wash) ---------- */
.quote>*{max-width:980px;margin-left:auto;margin-right:auto;text-align:center}
.quote blockquote{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:clamp(24px,3.1vw,40px);line-height:1.3;letter-spacing:-.01em;
}
.quote blockquote::before{content:'\201C';color:var(--brass-soft)}
.quote blockquote::after{content:'\201D';color:var(--brass-soft)}
.quote blockquote em{color:var(--brass-soft)}
.quote cite{
  display:block;margin-top:34px;font-style:normal;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);
}
.quote cite b{color:var(--brass-soft);font-weight:500}
.wash{
  background:
    radial-gradient(70% 95% at 16% 22%, rgba(207,222,230,.55), transparent 68%),
    radial-gradient(60% 80% at 84% 78%, rgba(227,236,240,.85), transparent 72%),
    radial-gradient(45% 60% at 55% 45%, rgba(240,244,244,.6), transparent 75%),
    linear-gradient(180deg, #F2F1EA 0%, #E7EEF1 100%);
}

/* ---------- manifesto word ink-in (v4 cross-page signature; about NOT/NOT/IS) ---------- */
.manifesto p,.ink-lines .line{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(26px,3.6vw,48px);line-height:1.28;letter-spacing:-.01em;
  max-width:1080px;
}
.ink-lines .line{font-size:clamp(28px,3.6vw,46px);line-height:1.3;max-width:26em}
.ink-lines .line+.line{margin-top:20px}
.ink-lines{padding-block:clamp(64px,9vh,110px)}
/* Jul 27: unlit floor raised .18→.40 — readable on arrival, ink-in becomes a darkening */
.manifesto .w,.ink-lines .w{color:rgba(11,17,29,.4);transition:color .6s ease}
.manifesto .w.lit,.ink-lines .w.lit{color:var(--ink)}
.manifesto .w.accent.lit,.ink-lines .w.accent.lit{color:var(--brass-soft);font-style:italic}

/* ---------- CTA (tan band, Jul 27 — was ink) ---------- */
.cta{
  text-align:center;color:var(--ink);
  background:
    radial-gradient(70% 90% at 50% 120%,rgba(195,154,94,.14),transparent 70%),
    var(--paper-2);
  border-top:1px solid var(--hairline-dark);
}
.cta .label{color:var(--brass-soft)}
.cta .label::before{background:var(--brass-soft)}
.cta h2{color:var(--ink);max-width:820px;margin:0 auto 22px}
.cta h2 em{color:var(--brass)}
.cta p{color:var(--ink-dim);max-width:520px;margin:0 auto 14px}
.cta p.quiet{color:var(--ink);margin-bottom:44px}
.cta-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.cta .cta-label{justify-content:center}

/* ---------- footer (verbatim) ---------- */
footer{
  background:var(--ink);color:var(--sand);
  border-top:1px solid var(--hairline);
  padding:56px clamp(24px,5vw,64px) 40px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
footer .nav-logo{font-size:15px;color:var(--sand)}
footer p{font-size:12px;color:rgba(236,229,216,.4);letter-spacing:.06em}
footer ul{display:flex;gap:28px;list-style:none;flex-wrap:wrap}
footer ul a{color:var(--sand-dim);text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
footer ul a:hover{color:var(--brass)}

/* ---------- static mode (?static — headless screenshots) ----------
   T6 lesson: wipes + line reveals get explicit static selectors. */
html.static .grain{animation:none}
html.static .rv{opacity:1!important;transform:none!important;transition:none}
html.static .page-hero h1 .line>span{animation:none;transform:none}
html.static .ph-kicker,html.static .lede{animation:none;opacity:1}
html.static .wipe-box .wipe{clip-path:inset(0 0 0 0)!important;transform:none!important;transition:none}
html.static .scard{position:static;transform:none!important}
html.static .scard::after{display:none}
html.static .manifesto .w,html.static .ink-lines .w{color:var(--ink)}
html.static .manifesto .w.accent,html.static .ink-lines .w.accent{color:var(--brass-soft)}
html.static .hero-photo .media{transform:none!important}

/* ---------- prefers-reduced-motion kill-switch ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv,.ph-kicker,.lede{opacity:1!important;transform:none!important}
  .page-hero h1 .line>span{animation:none;transform:none}
  .wipe-box .wipe{clip-path:inset(0 0 0 0)!important;transform:none!important}
  .scard{position:static;transform:none!important}
  .scard::after{display:none}
  .manifesto .w,.ink-lines .w{color:var(--ink)}
  .grain{animation:none}
}