/* Saphi refinement layer for the eleven bespoke dark pages.
   Those pages were built with a brass and teal palette that appears nowhere
   else in the brand, flat hairline boxes, and a single fade on scroll. This
   file keeps their structure and gives them the Saphi identity: one lime
   accent on forest ink, nested enclosures instead of flat rules, and motion
   that carries weight. Loaded after each page's own style block so it wins on
   equal specificity. */

/* The gold page carries its own gold on blue black palette, which is right for
   its subject. It opts out of the recolouring with data-sg-own-palette on the
   html element and keeps everything else in this file. */
:root:not([data-sg-own-palette]){
  /* one bright accent, as everywhere else in the brand */
  --brass:#f2ffbd;
  --brass-soft:#f8ffdd;
  --brass-deep:#cfe293;
  /* the second colour becomes structural sage rather than a rival accent */
  --teal:#a9c8b0;
  --green:#b3ff9d;
  /* ink shifted off the brand forest green rather than a neutral near black */
  --ink:#0a1109;
  --ink2:#0e1710;
  --ink3:#111f14;
  --bone:#eef3e6;
  --graphite:#7d8a7c;
  --txt-d:#eef3e6;
  --txt-dsoft:#9caa9b;
  --line-d:rgba(242,255,189,.13);
  --line-soft:rgba(242,255,189,.07);
  --sg-lime-glow:rgba(242,255,189,.10);
  /* Apple's sheet curve. Every transition on this page uses it or its sibling. */
  --sg-ease:cubic-bezier(.32,.72,0,1);
  --sg-ease-out:cubic-bezier(.16,1,.3,1);
  --sg-gap:clamp(96px,11vw,168px);
}

/* An opted out page keeps its colours and still gets every rule below, so it
   declares its accent as --sg-accent in its own :root and this file carries it
   under the name the rest of the rules use. */
:root[data-sg-own-palette]{
  --brass:var(--sg-accent);
  --brass-soft:var(--sg-accent-soft);
  --brass-deep:var(--sg-accent-deep);
}

body{background:var(--ink);color:var(--txt-d);
  font-optical-sizing:auto;text-rendering:optimizeLegibility}

/* A single fixed grain plate. Fixed and pointer inert so it never repaints
   with the scroll. */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.030;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;mix-blend-mode:overlay}

/* ---------- 1. Typography: tracking and leading move with size ---------- */

.sg-h1{letter-spacing:-.028em;line-height:.98;font-weight:300;text-wrap:balance}
.sg-h2{letter-spacing:-.021em;line-height:1.05;text-wrap:balance}
.sg-lead{letter-spacing:-.011em;line-height:1.44;text-wrap:pretty}
.sg-body{letter-spacing:0;line-height:1.72;text-wrap:pretty}
.tagline,.fcaption{letter-spacing:-.014em;text-wrap:balance}
/* small text wants the opposite treatment */
.sg-scrollcue{letter-spacing:.2em;font-size:11px}

/* Bold runs inside body copy take the accent as colour. Filling each one would
   put six highlighter blocks on a screen and the mark would stop meaning
   anything. */
.lay .ld b,.chain b,.sg-body b,.sg-spine b,.fcaption b,.tagline b{
  color:var(--brass-soft);font-weight:600;background:none}

/* The filled lime mark is the one piece of Saphi anyone recognises, so it lands
   once on a page: on the phrase in the headline that carries the argument. */
.sg-mark{background:var(--brass);color:#16210f;
  padding:.02em .26em .08em;margin:0 -.06em;border-radius:4px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
[data-sg-own-palette] .sg-mark{color:#1a1206}

/* ---------- 2. One title system ----------
   Two levels only. Every section eyebrow, hero included, is the same capsule
   with a dot. Every numbered item label is plain small caps, "01 / Name".
   Nothing else. */

.sg-kicker,.sg-hero-eyebrow{position:relative;color:var(--brass);
  border:1px solid rgba(242,255,189,.22);border-radius:999px;
  padding:7px 14px 7px 12px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;opacity:1;
  background:rgba(242,255,189,.045);
  display:inline-flex;align-items:center;gap:11px;line-height:1}
.sg-kicker::before,.sg-hero-eyebrow::before{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--brass);flex:0 0 4px;opacity:.9}
/* air between the capsule and the heading it introduces */
.sg-kicker{margin-bottom:28px}
.sg-hero-eyebrow{margin-bottom:6px}
.sg-hero-eyebrow a{border-bottom:0;color:inherit}
/* the pages that recoloured their kicker per section keep the distinction in
   the dot rather than the text, so the accent stays singular */
.sg-flow .sg-kicker,.sg-bio .sg-kicker,.sg-close .sg-kicker{color:var(--brass)}
.sg-flow .sg-kicker::before,.sg-bio .sg-kicker::before,.sg-close .sg-kicker::before{
  background:var(--teal)}
/* item level: plain small caps, same voice in both homes */
.lay .ln,.frame .fn{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--brass);opacity:.88;font-weight:600}

/* ---------- 3. Room to breathe ---------- */

.sg-section{padding:var(--sg-gap) 0}
.sg-wrap{max-width:1180px}

/* ---------- 4. Hero: a framed panel, finer texture ---------- */

/* 100vh jumps on iOS as the toolbar collapses; dvh does not */
.sg-hero{min-height:100dvh}
/* The recoloured gradient hero belongs only to the pages without their own
   photography. A page that opted out keeps its full-bleed photograph and the
   scrim it was built with. */
:root:not([data-sg-own-palette]) .sg-hero{
  background:
    radial-gradient(110% 70% at 18% 4%,rgba(242,255,189,.075),rgba(10,17,9,0) 52%),
    radial-gradient(120% 90% at 92% 100%,rgba(169,200,176,.085),rgba(10,17,9,0) 55%),
    linear-gradient(180deg,#0c150c 0%,#0a1109 62%,#091008 100%)}
/* the scanline was heavy and read as a screen effect. A finer, fainter grid
   reads as paper stock instead. Never over a photograph. */
:root:not([data-sg-own-palette]) .sg-hero::after{opacity:.34;
  background:
    repeating-linear-gradient(0deg,rgba(238,243,230,.028) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(90deg,rgba(238,243,230,.018) 0 1px,transparent 1px 88px)}
[data-sg-own-palette] .sg-hero::after{background:none}
/* the white frame the home page uses, stated quietly */
.sg-hero::before{content:"";position:absolute;inset:11px;z-index:1;pointer-events:none;
  border:1px solid rgba(238,243,230,.09);border-radius:20px}
.sg-hero .sg-wrap{padding-bottom:clamp(72px,9vh,104px)}
.sg-hero h1{max-width:21ch}
.sg-spine{gap:12px 0;align-items:baseline}
.sg-spine .dot{opacity:.32;padding:0 15px}

/* the cue earns a hairline that travels, so the page says scroll without a word */
.sg-scrollcue{display:flex;align-items:center;gap:14px;opacity:.5}
.sg-scrollcue::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,var(--brass),transparent);
  transform-origin:left;animation:sgCue 2.6s var(--sg-ease-out) infinite}
@keyframes sgCue{0%{transform:scaleX(.2);opacity:.35}55%{transform:scaleX(1);opacity:.9}100%{transform:scaleX(.2);opacity:.35}}

/* ---------- 5. Nested enclosures instead of flat hairline boxes ---------- */

/* The layer grid drew its rules with a 1px gap over a grey background. Each
   cell becomes its own machined plate inside a tray. */
.lay{gap:7px;background:transparent;border:0;padding:7px;
  border-radius:26px;box-shadow:inset 0 0 0 1px var(--line-soft);
  background-image:linear-gradient(180deg,rgba(242,255,189,.022),rgba(242,255,189,0))}
.lay .cell{background:linear-gradient(180deg,#0e1710,#0b1309);
  border-radius:19px;padding:34px 32px;position:relative;
  box-shadow:inset 0 1px 0 rgba(238,243,230,.055),inset 0 0 0 1px rgba(238,243,230,.038);
  transition:transform .5s var(--sg-ease),box-shadow .5s var(--sg-ease)}
.lay .cell:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(242,255,189,.13),inset 0 0 0 1px rgba(242,255,189,.14),
             0 18px 40px -22px rgba(0,0,0,.9)}
.lay .ln{color:var(--brass);letter-spacing:.17em;font-size:10.5px;opacity:.92}
.lay .lt{color:var(--bone);letter-spacing:-.014em;margin:15px 0 12px}

/* the five bioacoustic frames get the same treatment */
.frame{border:0;border-radius:18px;padding:24px 18px;
  background:linear-gradient(180deg,#0e1710,#0b1309);
  box-shadow:inset 0 1px 0 rgba(238,243,230,.055),inset 0 0 0 1px rgba(238,243,230,.038);
  transition:transform .5s var(--sg-ease),box-shadow .5s var(--sg-ease)}
.frame:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(242,255,189,.13),inset 0 0 0 1px rgba(242,255,189,.14),
             0 18px 40px -22px rgba(0,0,0,.9)}
.frame .fn{letter-spacing:.17em}

/* chips read as keys on a plate */
.fchip{border:0;border-radius:999px;padding:8px 15px;font-size:12.5px;
  background:rgba(238,243,230,.035);
  box-shadow:inset 0 0 0 1px rgba(238,243,230,.075);
  transition:box-shadow .35s var(--sg-ease),color .35s var(--sg-ease)}
.fchip:hover{color:var(--bone);box-shadow:inset 0 0 0 1px rgba(242,255,189,.3)}
.fchip.brass{color:#16210f;background:var(--brass);box-shadow:none;font-weight:500}
.fchip.brass:hover{color:#16210f;box-shadow:0 0 0 4px rgba(242,255,189,.14)}

/* the flow stages keep their rules, softened to a gradient so they fade at the
   edges rather than stopping dead */
.fstage{border-top:0;position:relative;padding:28px 0;
  transition:background .45s var(--sg-ease)}
.fstage::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--line-d) 0%,var(--line-soft) 62%,transparent 100%)}
.flow .fstage:last-child{border-bottom:0}
.flow .fstage:last-child::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--line-d) 0%,var(--line-soft) 62%,transparent 100%)}
.fstage:hover{background:linear-gradient(90deg,rgba(242,255,189,.028),transparent 70%)}
.fstage .fid{color:var(--brass)}
.fstage .fname{color:var(--bone);letter-spacing:-.01em}
.fedge::before{color:var(--teal)}

/* ---------- 6. Calls to action as pills, with the icon in its own well ---------- */

.sg-cta-ghost{border-bottom:0;border-radius:999px;padding:12px 8px 12px 20px;gap:14px;
  color:var(--brass);background:rgba(242,255,189,.05);
  box-shadow:inset 0 0 0 1px rgba(242,255,189,.24);
  transition:box-shadow .4s var(--sg-ease),background .4s var(--sg-ease),transform .4s var(--sg-ease)}
.sg-cta-ghost::after{content:"\2197";display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;font-size:13px;line-height:1;
  background:rgba(242,255,189,.12);color:var(--brass);
  transition:transform .4s var(--sg-ease),background .4s var(--sg-ease)}
.sg-cta-ghost:hover{gap:14px;background:rgba(242,255,189,.09);
  box-shadow:inset 0 0 0 1px rgba(242,255,189,.45)}
.sg-cta-ghost:hover::after{transform:translate(3px,-3px);background:rgba(242,255,189,.22)}
.sg-cta-ghost:active{transform:scale(.985)}

.sg-lead-btn{border-radius:999px;padding:15px 22px 15px 28px;color:#16210f;
  background:var(--brass);font-weight:500;display:inline-flex;align-items:center;gap:12px;
  transition:box-shadow .4s var(--sg-ease),transform .4s var(--sg-ease)}
.sg-lead-btn::after{content:"\2192";display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;flex:0 0 26px;font-size:13px;line-height:1;
  background:rgba(22,33,15,.11);transition:transform .4s var(--sg-ease)}
.sg-lead-btn:hover{opacity:1;box-shadow:0 0 0 5px rgba(242,255,189,.15)}
.sg-lead-btn:hover::after{transform:translateX(3px)}
.sg-lead-btn:active{transform:scale(.985)}
.sg-lead-btn:disabled::after{display:none}

/* fields: no 2px corners next to 999px pills */
.sg-lead-input,.sg-lead-select{border:0;border-radius:999px;padding:15px 20px;
  background:rgba(238,243,230,.03);
  box-shadow:inset 0 0 0 1px rgba(238,243,230,.1);
  transition:box-shadow .35s var(--sg-ease)}
.sg-lead-input:focus,.sg-lead-select:focus{box-shadow:inset 0 0 0 1px rgba(242,255,189,.5)}
.sg-lead-select option{background:#0e1710}
.sg-lead-done{border-left:0;border-radius:20px;padding:30px 34px;
  background:linear-gradient(180deg,#111f14,#0d1810);
  box-shadow:inset 0 1px 0 rgba(242,255,189,.12),inset 0 0 0 1px rgba(242,255,189,.16)}
.sg-lead-done-t{letter-spacing:-.02em}

/* ---------- 7. Motion ---------- */

/* The reveal was a plain fade and rise. Weight comes from a shorter distance,
   a blur that resolves, and a curve that decelerates hard at the end. */
.reveal{opacity:0;transform:translate3d(0,20px,0);filter:blur(7px);
  transition:opacity .82s var(--sg-ease),transform .82s var(--sg-ease),filter .82s var(--sg-ease);
  transition-delay:calc(var(--sg-i,0) * 65ms)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
/* the hand written delay classes stay valid and compose with the automatic index */
.reveal.d1{transition-delay:calc(80ms + var(--sg-i,0) * 65ms)}
.reveal.d2{transition-delay:calc(160ms + var(--sg-i,0) * 65ms)}
.reveal.d3{transition-delay:calc(240ms + var(--sg-i,0) * 65ms)}
.reveal.d4{transition-delay:calc(320ms + var(--sg-i,0) * 65ms)}

/* Scroll depth as a hairline on the top edge, drawn by the compositor with no
   script and no scroll listener. Browsers without scroll timelines show nothing. */
@supports (animation-timeline:scroll()){
  body::before{content:"";position:fixed;top:0;left:0;right:0;height:1.5px;z-index:61;
    transform-origin:0 50%;pointer-events:none;
    background:linear-gradient(90deg,rgba(242,255,189,.35),var(--brass));
    animation:sgProgress linear;animation-timeline:scroll(root block)}
  @keyframes sgProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

.sg-logo img{transition:opacity .35s var(--sg-ease)}
a{transition:color .3s var(--sg-ease)}

/* ---------- 8. Small screens ---------- */

@media (max-width:860px){
  .sg-section{padding:clamp(64px,15vw,88px) 0}
  .lay{border-radius:22px;padding:6px;gap:6px}
  .lay .cell{border-radius:16px;padding:26px 22px}
  .sg-hero::before{inset:8px;border-radius:16px}
  .frame{border-radius:15px}
  /* hover lift has no meaning on a touch screen and steals a frame */
  .lay .cell:hover,.frame:hover{transform:none}
}
@media (max-width:600px){
  .sg-lead-btn{flex:1 1 100%;justify-content:center}
}

/* ---------- 9. When the reader has asked for less ---------- */

@media (prefers-reduced-motion:reduce){
  .reveal{transform:none;filter:none;transition:opacity .3s ease;transition-delay:0s}
  .reveal.d1,.reveal.d2,.reveal.d3,.reveal.d4{transition-delay:0s}
  .sg-scrollcue::after{animation:none;transform:scaleX(1)}
  .lay .cell,.frame,.fchip,.sg-cta-ghost,.sg-lead-btn,.fstage{transition:none}
  .lay .cell:hover,.frame:hover,.sg-cta-ghost:active,.sg-lead-btn:active{transform:none}
  @supports (animation-timeline:scroll()){body::before{display:none}}
}
@media (prefers-reduced-transparency:reduce){
  body::after{display:none}
  .sg-kicker{background:#16210f}
  .fchip{background:#101a12}
}
@media (prefers-contrast:more){
  :root{--txt-dsoft:#cbd6c6;--line-d:rgba(242,255,189,.4);--graphite:#a9b6a7}
  .lay .cell,.frame{box-shadow:inset 0 0 0 1px rgba(238,243,230,.34)}
  .sg-kicker{border-color:var(--brass)}
  body::after{display:none}
}