/* ══════════════════════════════════════════════════════════════════════════
   FANGS & FERNS — "THE LIVING ISLAND"  ·  redesign mockup, 2026-08-01
   Core: colour system, the persistent world, chrome, type, controls.
   Palette: the storm-teal ramp Ishaq picked (deep navy-teal, deep teal,
   slate teal, soft aqua, pale grey) with fern green kept as the ONE organic
   accent — the mark, the fronds, the herbivores. Lightning white is the only
   thing allowed to be brighter than the aqua.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── environment (dominant) ── */
  --ink-900:#050d12;
  --ink-800:#07131a;
  --ink-700:#0a1a22;
  --ink-600:#0e2129;
  --panel:  rgba(9,26,33,.72);
  --panel-2:rgba(11,31,39,.86);

  /* ── ink ── */
  --bone:#dfe9ea;
  --sand:#b8c4c8;
  --ink-2:#9fb1b4;
  --ink-3:#66797e;
  --ink-4:#3e5157;

  /* ── accents ── */
  --pear:#9bc8c3;          /* primary luminous */
  --pear-deep:#5b8c8a;
  --pear-glow:rgba(155,200,195,.28);
  --amber:#c8cfd2;         /* pale — quiet numerals, apex, lightning-side */
  --fern:#b6cf7a;          /* the ONE green: mark, fronds, herbivores */
  --fern-deep:#8fae54;
  --rust:#33484f;          /* rare — outage blocks only */

  --hair:rgba(215,232,234,.10);
  --hair-2:rgba(215,232,234,.055);
  --hair-3:rgba(215,232,234,.18);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gut:clamp(22px,4.2vw,76px);
  --maxw:1420px;
  --nav-h:78px;
  --rb-h:46px;

  /* live-driven by the atmosphere engine */
  --sky-a:#0c1710; --sky-b:#0a1009; --sun-c:#c8cfd2; --sun-x:70%; --sun-y:22%;
  --sun-o:.5; --haze:.34; --wind:0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink-900);color:var(--bone);
  font-family:var(--sans);font-weight:300;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--pear);color:#06171c}
input[type=range]{accent-color:var(--pear)}

/* thin brand scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink-900)}
::-webkit-scrollbar-thumb{background:#17303a;border:3px solid var(--ink-900);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#23414c}

/* ══════════════════════════════════════════════════════════════════════════
   THE WORLD
   ══════════════════════════════════════════════════════════════════════════ */
#world{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}

.w-sky{position:absolute;inset:0;
  background:linear-gradient(178deg,var(--sky-a) 0%,var(--sky-b) 62%,var(--ink-900) 100%);
  transition:background 1.1s linear}

/* a break in the cloud, not a disc — keep it soft or it reads as a smudge */
.w-sun{position:absolute;inset:0;opacity:var(--sun-o);transition:opacity 1.1s linear;
  background:
    radial-gradient(15% 11% at var(--sun-x) var(--sun-y), var(--sun-c), transparent 74%),
    radial-gradient(64% 44% at var(--sun-x) var(--sun-y), rgba(200,207,210,.11), transparent 76%);
  filter:blur(16px)}

.w-rays{position:absolute;inset:-14% -22%;opacity:calc(.5 + var(--sun-o)*.45);
  mix-blend-mode:screen;transition:opacity 1.1s linear;
  transform-origin:70% 0}
.w-rays i{position:absolute;top:-10%;left:50%;width:14vw;height:150%;
  background:linear-gradient(180deg,rgba(155,200,195,.13),rgba(155,200,195,0) 72%);
  filter:blur(26px);transform-origin:top center;animation:raySway 19s var(--ease-io) infinite alternate}
.w-rays i:nth-child(1){left:38%;width:9vw;animation-duration:23s}
.w-rays i:nth-child(2){left:52%;width:17vw;animation-duration:17s;animation-delay:-6s;opacity:.8}
.w-rays i:nth-child(3){left:66%;width:7vw;animation-duration:26s;animation-delay:-11s;opacity:.7}
.w-rays i:nth-child(4){left:78%;width:12vw;animation-duration:21s;animation-delay:-3s;opacity:.55;
  background:linear-gradient(180deg,rgba(200,207,210,.11),rgba(200,207,210,0) 70%)}
@keyframes raySway{from{transform:rotate(-7deg) scaleY(1)}to{transform:rotate(5deg) scaleY(1.08)}}

.w-fog{position:absolute;inset:0;opacity:var(--haze);transition:opacity 1.4s linear}
.w-fog i{position:absolute;left:-60%;width:220%;height:34vh;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(140,180,178,.14),transparent 70%);
  filter:blur(34px);animation:fogDrift 74s linear infinite}
.w-fog i:nth-child(1){bottom:6vh;animation-duration:88s}
.w-fog i:nth-child(2){bottom:22vh;height:26vh;opacity:.7;animation-duration:112s;animation-delay:-40s}
.w-fog i:nth-child(3){bottom:-4vh;height:44vh;opacity:.85;animation-duration:140s;animation-delay:-70s}
@keyframes fogDrift{from{transform:translate3d(-6%,0,0)}to{transform:translate3d(6%,0,0)}}

.w-motes{position:absolute;inset:0;width:100%;height:100%}

/* ── THE LIVING SURVEY: the background is Gateway being charted ───────────
   Not a leaf parallax and not a stock horizon. Contour lines of the island
   that breathe on a tidal clock, a drifting survey grid, and the island's own
   traffic crossing it with trails. Drawn once per frame on one canvas. */
.w-chart{position:absolute;inset:0;width:100%;height:100%;opacity:.92;
  /* the growth stays at the edges: the reading column is masked clear */
  -webkit-mask-image:radial-gradient(78% 74% at 40% 52%,transparent 4%,rgba(0,0,0,.22) 44%,rgba(0,0,0,.72) 66%,#000 84%);
  mask-image:radial-gradient(78% 74% at 40% 52%,transparent 4%,rgba(0,0,0,.22) 44%,rgba(0,0,0,.72) 66%,#000 84%)}

.w-grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.w-vig{position:absolute;inset:0;
  background:radial-gradient(126% 100% at 50% 42%,transparent 52%,rgba(3,10,14,.5) 100%)}

/* rain / storm */
body[data-wx="rain"]  .w-rays{opacity:.16}
body[data-wx="storm"] .w-rays{opacity:.06}
body[data-wx="storm"] .w-vig{background:radial-gradient(110% 90% at 50% 40%,transparent 32%,rgba(3,9,12,.78) 100%)}
#flash{position:fixed;inset:0;z-index:2;pointer-events:none;background:#dff0ee;opacity:0}
body[data-mo="off"] .w-rays i,
body[data-mo="off"] .w-fog i{animation:none!important}

/* ══════════════════════════════════════════════════════════════════════════
   TYPE
   ══════════════════════════════════════════════════════════════════════════ */
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow b{color:var(--pear);font-weight:500}
.eyebrow .dot{color:var(--ink-4);padding:0 .5em}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(42px,5.3vw,94px);line-height:1}
h2{font-size:clamp(31px,3.7vw,62px);line-height:1.05}
h3{font-size:clamp(19px,1.5vw,25px);line-height:1.18;font-weight:500;letter-spacing:-.005em}
em.pear{font-style:italic;color:var(--pear);font-weight:300}
strong.bone{font-weight:700;color:var(--bone)}
p{margin:0}
.lede{color:var(--ink-2);font-size:clamp(14.5px,1.08vw,17px);line-height:1.72;max-width:56ch}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em}
.rule{height:1px;background:linear-gradient(90deg,var(--hair-3),transparent);border:0;margin:0}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS — custom silhouette: a clipped "leaf tip" on two opposite corners
   ══════════════════════════════════════════════════════════════════════════ */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;letter-spacing:.04em;padding:14px 26px;
  color:var(--bone);background:rgba(215,232,234,.035);
  border:1px solid var(--hair-3);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  transition:.28s var(--ease);white-space:nowrap;overflow:hidden}
.btn:hover{background:rgba(215,232,234,.075);border-color:rgba(215,232,234,.34);transform:translateY(-1px)}
.btn svg{width:14px;height:14px;flex:0 0 auto;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-solid{background:var(--pear);color:#06171c;border-color:var(--pear);font-weight:600}
.btn-solid:hover{background:#b3dcd6;border-color:#b3dcd6;
  box-shadow:0 14px 40px -16px var(--pear-glow),0 0 0 1px rgba(155,200,195,.25)}
.btn-ghost{background:transparent;border-color:var(--hair)}
.btn-sm{padding:10px 18px;font-size:12px}
.btn::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16),transparent 70%);
  transform:translateX(-120%);transition:none}
.btn:hover::after{transform:translateX(120%);transition:transform .75s var(--ease)}

/* small chips / tags */
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;font-family:var(--mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--hair);background:rgba(7,19,26,.5);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.chip b{color:var(--pear);font-weight:500}
.chip.amber b{color:var(--amber)}

/* ══════════════════════════════════════════════════════════════════════════
   NAV — dissolves into the world until you scroll
   ══════════════════════════════════════════════════════════════════════════ */
#nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:60;
  display:flex;align-items:center;gap:clamp(14px,3vw,52px);
  padding:0 var(--gut);transition:.4s var(--ease)}
#nav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(180deg,rgba(5,13,18,.92),rgba(5,13,18,.55) 70%,transparent);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--hair-2)}
body.scrolled #nav::before{opacity:1}
body.scrolled #nav{height:64px}

.nv-brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.nv-mark{width:34px;height:34px;display:block;transition:transform .5s var(--ease)}
.nv-mark svg{width:100%;height:100%}
.nv-brand:hover .nv-mark{transform:rotate(-8deg) scale(1.06)}
.nv-word{font-family:var(--serif);font-size:17px;font-weight:500;letter-spacing:.005em;white-space:nowrap}
.nv-word i{font-style:italic;color:var(--pear);font-weight:400}

.nv-links{display:flex;align-items:center;gap:clamp(10px,1.5vw,26px);flex:1 1 auto}
.nv-links a{position:relative;font-size:12.5px;font-weight:400;letter-spacing:.06em;color:var(--ink-2);
  padding:9px 2px;transition:color .28s}
.nv-links a .u{position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--pear);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .38s var(--ease)}
.nv-links a:hover{color:var(--bone)}
.nv-links a:hover .u{transform:scaleX(1)}
.nv-links a.on{color:var(--bone)}
.nv-links a.on .u{transform:scaleX(1);background:var(--pear)}

.nv-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* ── top-right cluster: who is on, the Discord, the overlay ───────────── */
.nv-kit{display:flex;align-items:center;gap:8px}
/* The identity chip carries WHO you are and WHAT you have, in one block.
   Points were a second chip beside it and the row read as a toolbar; two lines
   inside one border is one object instead of two. The unit is the fang, not
   the letters p-t-s. */
.nv-people{display:flex;align-items:center;gap:11px;padding:6px 14px 6px 7px;height:38px;
  border:1px solid var(--hair);transition:.3s var(--ease);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.np-t{display:flex;flex-direction:column;gap:2px;line-height:1}
.np-p{display:flex;align-items:center;gap:5px;line-height:1}
.np-p svg.fg{width:7px;height:10px;color:var(--fern);opacity:.9}
.np-p b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--bone);letter-spacing:.02em}
.nv-people:hover .np-p b{color:#fff}
.nv-people:hover{border-color:rgba(155,200,195,.34);background:rgba(155,200,195,.06)}
.np-stack{display:flex;align-items:center}
.pf{position:relative;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  margin-left:-8px;border:1.5px solid #0a1a22;flex:0 0 auto;
  background:linear-gradient(150deg,hsl(var(--h,160) 26% 42%),hsl(var(--h,160) 30% 22%));
  animation:pfIn .5s var(--ease) both;animation-delay:calc(var(--i,0)*.06s);
  transition:transform .3s var(--ease)}
.pf:first-child{margin-left:0}
.pf b{font-family:var(--mono);font-size:8.5px;font-weight:500;color:#e6f2f0;letter-spacing:.02em}
.pf.img{background:#0a1a22;overflow:hidden}
.pf.img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.85) contrast(1.03)}
.nv-people:hover .pf{transform:translateY(-2px)}
.nv-people:hover .pf:nth-child(2){transform:translateY(-2px) translateX(2px)}
.nv-people:hover .pf:nth-child(3){transform:translateY(-2px) translateX(4px)}
.nv-people:hover .pf:nth-child(4){transform:translateY(-2px) translateX(6px)}
.nv-people:hover .pf:nth-child(5){transform:translateY(-2px) translateX(8px)}
.pf.more{background:rgba(155,200,195,.16);font-family:var(--mono);font-size:8.5px;color:var(--pear)}
.pf.ghost{background:rgba(215,232,234,.07);border-color:rgba(10,26,34,.9)}
.pf:first-child::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid var(--pear);opacity:.55;animation:ping 2.8s var(--ease-io) infinite}
.pf.ghost:first-child::after{display:none}
@keyframes pfIn{from{opacity:0;transform:translateY(6px) scale(.7)}to{opacity:1;transform:none}}
.np-n{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.nv-people:hover .np-n{color:var(--pear)}

.nv-ic{position:relative;width:38px;height:38px;display:grid;place-items:center;color:var(--ink-2);
  border:1px solid var(--hair);background:rgba(5,13,18,.45);transition:.28s var(--ease);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.nv-ic svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.nv-ic:hover{color:var(--bone);border-color:rgba(155,200,195,.4);background:rgba(155,200,195,.09)}
.nv-tip{position:absolute;top:calc(100% + 9px);right:0;white-space:nowrap;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(6,17,23,.92);border:1px solid var(--hair);
  padding:6px 10px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:.25s var(--ease)}
.nv-ic:hover .nv-tip{opacity:1;transform:none}
/* the Discord mark gives a little hop */
.nv-dc:hover svg{animation:dcHop .55s var(--ease) 1}
@keyframes dcHop{0%{transform:translateY(0)}35%{transform:translateY(-3px) rotate(-6deg)}
  65%{transform:translateY(1px) rotate(3deg)}100%{transform:none}}
.nv-dc:hover{color:#c9d6f5;border-color:rgba(150,170,230,.4);background:rgba(120,140,220,.12)}
/* the overlay icon downloads itself */
.nv-ov .ov-dl{opacity:0;transition:opacity .2s}
.nv-ov .ov-win{transition:.3s var(--ease)}
.nv-ov:hover .ov-dl{opacity:1;animation:ovDrop 1.1s var(--ease-io) infinite}
.nv-ov:hover .ov-win{opacity:.35}
@keyframes ovDrop{0%{transform:translateY(-2px);opacity:.2}40%{opacity:1}
  100%{transform:translateY(3px);opacity:0}}
@media (max-width:900px){ .nv-people{display:none} }
.nv-io{width:38px;height:38px;display:grid;place-items:center;color:var(--ink-2);
  border:1px solid var(--hair-3);background:rgba(5,13,18,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.25s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.nv-io svg{width:16px;height:16px}
.nv-io:hover{color:var(--pear);border-color:rgba(155,200,195,.4);background:rgba(155,200,195,.06)}

/* ══════════════════════════════════════════════════════════════════════════
   SPINE — chapter marks down the left edge
   ══════════════════════════════════════════════════════════════════════════ */
#spine{position:fixed;left:0;top:0;bottom:0;width:var(--gut);z-index:55;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none}
.sp-line{position:absolute;top:22vh;bottom:22vh;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,var(--hair),transparent)}
.sp-items{display:flex;flex-direction:column;gap:16px;pointer-events:auto}
/* the chapter rail is a row of teeth: no numerals anywhere */
.sp-items a{position:relative;display:grid;place-items:center;width:26px;height:22px;
  color:var(--ink-4);transition:.3s var(--ease)}
.sp-fang{display:block;width:11px;height:17px;line-height:0;transform-origin:50% 100%;
  transition:transform .35s var(--ease),color .3s}
.sp-fang svg{width:100%;height:100%;display:block}
.sp-items a:hover{color:var(--ink-2)}
.sp-items a:hover .sp-fang{transform:scale(1.25) rotate(-6deg)}
.sp-items a.on{color:var(--fern)}
.sp-items a.on .sp-fang{transform:scale(1.45);filter:drop-shadow(0 0 6px rgba(182,207,122,.45))}
.sp-items a::before{content:"";position:absolute;left:-2px;width:0;height:1px;background:var(--fern);transition:width .3s}
.sp-items a.on::before{width:8px}
.sp-tip{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%) translateX(-6px);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;opacity:0;transition:.3s var(--ease);pointer-events:none}
.sp-items a:hover .sp-tip{opacity:1;transform:translateY(-50%) translateX(0)}

/* ══════════════════════════════════════════════════════════════════════════
   STAGE
   ══════════════════════════════════════════════════════════════════════════ */
#stage{position:relative;z-index:10;min-height:100vh;padding-bottom:calc(var(--rb-h) + 10px);outline:0}
/* one scrim between the world and the words. Sits behind every page element
   (including the hero plate), so the atmosphere never eats the copy. */
#stage::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,13,18,.34),rgba(5,13,18,.6))}
.page{animation:pageIn .85s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section.blk{position:relative;padding:clamp(56px,8vw,132px) 0}

/* scroll reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}.rv.d6{transition-delay:.48s}
.rv-x{opacity:0;transform:translateX(-26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-x.in{opacity:1;transform:none}
/* letter-by-letter headline lift */
.split span{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.split.in span{opacity:1;transform:none}

/* section header block */
.sec-head{max-width:720px;margin-bottom:clamp(28px,3.4vw,56px)}
.sec-head .eyebrow{display:block;margin-bottom:18px}
.sec-head p{margin-top:18px}
.sec-num{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--amber);letter-spacing:.04em}

/* ══════════════════════════════════════════════════════════════════════════
   RIBBON
   ══════════════════════════════════════════════════════════════════════════ */
#ribbon{position:fixed;left:0;right:0;bottom:0;height:var(--rb-h);z-index:58;
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gut);
  background:linear-gradient(180deg,rgba(5,13,18,.4),rgba(5,13,18,.9));
  -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  border-top:1px solid var(--hair-2);font-size:11px;transition:transform .5s var(--ease)}
#ribbon.hide{transform:translateY(calc(100% - 15px))}
.rb-left,.rb-mid,.rb-right{display:flex;align-items:center;gap:10px}
.rb-mid{gap:9px}
.rb-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-4)}
.rb-v{font-family:var(--mono);font-size:11px;color:var(--sand);letter-spacing:.04em}
.rb-v.mono{color:var(--ink-2)}
.rb-sep{width:1px;height:13px;background:var(--hair)}
.rb-pulse{position:relative;width:7px;height:7px}
.rb-pulse i{position:absolute;inset:0;border-radius:50%;background:var(--pear);box-shadow:0 0 9px var(--pear)}
.rb-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--pear);
  opacity:.6;animation:ping 2.4s var(--ease-io) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.9);opacity:0}}
.rb-bars{display:flex;align-items:flex-end;gap:2px;height:14px;margin-left:4px}
.rb-bars i{width:2px;background:var(--pear-deep);opacity:.75;transition:height .6s var(--ease)}
.rb-mute{width:22px;height:22px;color:var(--ink-4);font-size:14px;line-height:1}
.rb-mute:hover{color:var(--pear)}
/* where the numbers came from, said out loud */
.rb-src{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--hair);color:var(--ink-4);cursor:help}
.rb-src.on{color:var(--pear);border-color:rgba(155,200,195,.36)}
.rb-src.part{color:var(--fern);border-color:rgba(182,207,122,.3)}
.rb-src.off{color:#7d5a52;border-color:rgba(125,90,82,.35)}
.rb-v.soon{color:var(--fern)}
.rb-snd{width:26px;height:22px;display:grid;place-items:center;color:var(--ink-4);transition:.2s}
.rb-snd svg{width:15px;height:15px}
.rb-snd .w1,.rb-snd .w2{opacity:0;transition:opacity .25s}
.rb-snd:hover{color:var(--ink-2)}
.rb-snd.on{color:var(--pear)}
.rb-snd.on .w1{opacity:1}
.rb-snd.on .w2{opacity:.75;animation:sndW 2.2s var(--ease-io) infinite}
@keyframes sndW{0%,100%{opacity:.2}50%{opacity:.85}}
@media (max-width:1080px){ .rb-mid{display:none} }

/* ══════════════════════════════════════════════════════════════════════════
   ATMOSPHERE DRAWER
   ══════════════════════════════════════════════════════════════════════════ */
#atmos{position:fixed;right:var(--gut);top:calc(var(--nav-h) + 6px);width:322px;z-index:70;
  background:var(--panel-2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--hair);padding:16px 18px 14px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
#atmos.closed{opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none}
.at-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.at-head button{font-size:17px;color:var(--ink-3);line-height:1}
.at-head button:hover{color:var(--pear)}
.at-row{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:12px;color:var(--ink-2);
  border-top:1px solid var(--hair-2)}
.at-row>span{flex:0 0 96px}
.at-row input[type=range]{flex:1;height:2px;background:var(--hair);-webkit-appearance:none;appearance:none;outline:0}
.at-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--pear);box-shadow:0 0 10px var(--pear-glow);cursor:pointer}
.at-row b{font-family:var(--mono);font-size:11px;color:var(--pear);flex:0 0 44px;text-align:right;font-weight:400}
.seg-g{display:flex;flex:1;border:1px solid var(--hair)}
.seg-g button{flex:1;padding:6px 0;font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);
  border-right:1px solid var(--hair-2);transition:.22s}
.seg-g button:last-child{border-right:0}
.seg-g button:hover{color:var(--bone)}
.seg-g button.on{background:rgba(155,200,195,.12);color:var(--pear)}
.at-note{margin-top:12px;font-size:10.5px;color:var(--ink-4);line-height:1.5}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE WIPE  ·  BOOT
   ══════════════════════════════════════════════════════════════════════════ */
/* ── the page turn: the fang OPENS ────────────────────────────────────────
   One shape, the brand's fang. It grows over the page until the screen is
   dark, then the same fang becomes the HOLE the next chapter arrives through
   and opens outward until nothing of it is left.
   A wide symmetrical wedge - which is what the first cut of this was - reads
   as a shield. The narrow curve is the whole point. */
#wipe{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;
  opacity:0;visibility:hidden}
#wipe .wp-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#wipe .wp-grow,#wipe .wp-hole,#wipe .wp-rim{transform-box:fill-box;transform-origin:center;
  transform:scale(.03)}
#wipe .wp-grow{filter:drop-shadow(0 0 44px rgba(2,10,12,.9))}
#wipe .wp-dark{fill:#04090c;opacity:0}
#wipe .wp-rim{stroke:rgba(226,242,239,.85);stroke-width:3;opacity:0;
  filter:drop-shadow(0 0 10px rgba(182,207,122,.7))}

#wipe.go{opacity:1;visibility:visible}
#wipe.go .wp-grow{animation:wpGrow 1.02s both}
#wipe.go .wp-dark{animation:wpDark 1.02s linear both}
#wipe.go .wp-hole{animation:wpHole 1.02s both}
#wipe.go .wp-rim{animation:wpRim 1.02s both}

/* the fang swallows the page */
@keyframes wpGrow{
  0%{transform:scale(.03) rotate(-9deg);opacity:1;animation-timing-function:cubic-bezier(.62,.02,.62,1)}
  36%{transform:scale(15) rotate(0deg);opacity:1}
  37%,100%{transform:scale(15) rotate(0deg);opacity:0}}
/* the dark takes over exactly as the fang finishes covering */
@keyframes wpDark{0%,34%{opacity:0}36%,100%{opacity:1}}
/* and the same fang opens back out of it */
@keyframes wpHole{
  0%,48%{transform:scale(.03) rotate(6deg);animation-timing-function:cubic-bezier(.26,.66,.2,1)}
  100%{transform:scale(17) rotate(0deg)}}
@keyframes wpRim{
  0%,48%{transform:scale(.03) rotate(6deg);opacity:0;animation-timing-function:cubic-bezier(.26,.66,.2,1)}
  54%{opacity:1}
  92%{opacity:0}
  100%{transform:scale(17) rotate(0deg);opacity:0}}

/* held still, for a photograph of the turn */
#wipe.shut{opacity:1;visibility:visible}
#wipe.shut .wp-grow{transform:scale(2.6)}
#wipe.ajar{opacity:1;visibility:visible}
#wipe.ajar .wp-grow{opacity:0}
#wipe.ajar .wp-dark{opacity:1}
#wipe.ajar .wp-hole{transform:scale(3.4)}
#wipe.ajar .wp-rim{transform:scale(3.4);opacity:1}
#boot{position:fixed;inset:0;z-index:120;display:grid;place-items:center;align-content:center;gap:22px;
  background:var(--ink-900);transition:opacity .7s var(--ease),visibility .7s}
#boot.gone{opacity:0;visibility:hidden}
.bt-mark{width:84px;height:84px}
.bt-mark svg{width:100%;height:100%}
.bt-bar{width:170px;height:1px;background:var(--hair);overflow:hidden}
.bt-bar i{display:block;height:100%;width:0;background:var(--pear);animation:btf 1.15s var(--ease) forwards}
@keyframes btf{to{width:100%}}
.bt-t{font-family:var(--serif);font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-3)}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  #spine{display:none}
  .nv-links{display:none}
}
@media (max-width:760px){
  :root{--nav-h:66px}
  .nv-cta{display:none}
  #atmos{right:12px;left:12px;width:auto}
  .rb-right{display:none}
}
/* Reduced motion kills the big page moves only. The ambient growth stays: it
   is the point of the site, and the Motion control turns it off outright. */
@media (prefers-reduced-motion:reduce){
  .rv,.rv-x,.split span{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
/* The page turn is NOT in that list on purpose. It is short, it only ever runs
   because someone pressed a tab, and it is the one moment the brand actually
   moves — killing it on a reduced-motion box left tab switches looking broken.
   Motion: Off in the atmosphere drawer is the real opt-out. */
body[data-mo="off"] #wipe.go .wp-grow,
body[data-mo="off"] #wipe.go .wp-rim{animation:none;opacity:0}
body[data-mo="off"] #wipe.go .wp-dark{animation:fangFlat .32s linear both}
body[data-mo="off"] #wipe.go .wp-hole{animation:none;transform:scale(.03)}
@keyframes fangFlat{0%{opacity:0}30%,60%{opacity:1}100%{opacity:0}}

/* deterministic capture mode: ?shot — no boot curtain, everything already in */
body.shot #boot{display:none}
body.shot .rv,body.shot .rv-x,body.shot .split span{opacity:1!important;transform:none!important;transition:none!important}

/* the whole top-right cluster reads as one row: same height, same cut corner,
   same border weight. It was three different shapes at three heights. */
#nav .nv-right{display:flex;align-items:center;gap:8px}
.nv-io{clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  border-color:var(--hair)}
.nv-io:hover{border-color:rgba(155,200,195,.34);background:rgba(155,200,195,.06);color:var(--bone)}
.nv-ic:hover{border-color:rgba(155,200,195,.34);background:rgba(155,200,195,.06);color:var(--bone)}
.nv-snd.on{border-color:rgba(182,207,122,.42)}

/* ══════════════════════════════════════════════════════════════════════════
   DETAILED FERN SCENE — rendered fronds inside #world, mid-ground between
   the sun and the growth canvas. The svg beside the image carries only the
   #fsLeaf/#fsFern symbol defs for the hero. Opacity rides one tunable knob.
   ══════════════════════════════════════════════════════════════════════════ */
:root{--fern-art-o:.8}
.w-fern{position:absolute;inset:0;overflow:hidden}
.w-fern .fern-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;opacity:var(--fern-art-o);
  transform:scale(1.03);
  /* seat the leaf greens into the storm-teal world without killing them */
  filter:hue-rotate(-6deg) saturate(.96);
  animation:fsBreath 14s ease-in-out infinite alternate}
.w-fern .fern-art{position:absolute;width:0;height:0;overflow:hidden}
@keyframes fsBreath{
  0%  {transform:scale(1.03) translate3d(0,0,0);      filter:hue-rotate(-6deg) saturate(.96) brightness(1)}
  50% {transform:scale(1.045) translate3d(-5px,-7px,0);filter:hue-rotate(-6deg) saturate(1.02) brightness(1.05)}
  100%{transform:scale(1.035) translate3d(3px,-3px,0); filter:hue-rotate(-6deg) saturate(.98) brightness(1.02)}
}
/* ambient motion stays on by convention; the explicit switches stop it */
body.shot .w-fern .fern-img{animation:none}
:root[data-motion="off"] .w-fern .fern-img,
body[data-motion="off"] .w-fern .fern-img,
body[data-mo="off"] .w-fern .fern-img{animation:none}
@media (max-width:760px){
  :root{--fern-art-o:.55}
  /* portrait cover-crop would keep the empty centre; bias to the frond mass */
  .w-fern .fern-img{object-position:74% 50%}
}