/* SFERICS — editorial reskin.
   Design tokens lifted from the Son Daven reference CSS:
     sand   #a89474   (base accent / warm neutral)
     espresso #2c2824 (base dark)
     display tracking -0.064em, label tracking +0.08em
   KTF Metro is proprietary, so Space Grotesk stands in as the geometric grotesk. */

:root{
  --sand:#a89474;
  --sand-50:rgba(168,148,116,.5);
  --sand-10:rgba(168,148,116,.1);
  --espresso:#2c2824;
  --espresso-50:rgba(44,40,36,.5);
  --espresso-10:rgba(44,40,36,.1);
  --paper:#f2ede5;
  --paper-dim:#e2dacd;
  --white-60:rgba(255,255,255,.6);
  --white-20:rgba(255,255,255,.2);

  --bg:var(--espresso);
  --txt:var(--paper);
  --dim:rgba(242,237,229,.72);
  --dimmer:rgba(242,237,229,.48);
  --line:rgba(242,237,229,.14);

  /* Surfaces. Dark theme lifts with translucent paper; light theme must tint
     DOWN with espresso or the panels vanish into the page. Every panel refs
     these so the two themes can't drift apart again. */
  --surface-1:rgba(242,237,229,.02);   /* cards: band, gallery */
  --surface-2:rgba(242,237,229,.03);   /* terminal shell, input, watch */
  --surface-3:rgba(242,237,229,.04);   /* terminal title bar */
  --nav-bg:rgba(44,40,36,.86);
  --dot-grid:rgba(242,237,229,.13);
  --shimmer-lo:rgba(242,237,229,.04);
  --shimmer-hi:rgba(242,237,229,.11);
  --shimmer-flat:rgba(242,237,229,.06);
  --hover-tint:rgba(168,148,116,.05);

  /* --sand stays the brand solid (button fills, borders, decor).
     --accent is the TEXT-safe accent: on espresso it's sand at 4.98:1, but
     sand on a light page is only 2.75:1, so light theme darkens it. */
  --accent:var(--sand);

  --up:#8fae72;
  --down:#c8705a;
  --warn:#d3a24a;

  --font:'Space Grotesk',-apple-system,'Helvetica Neue',Arial,sans-serif;

  --ls-display:-.064em;   /* reference h1..h6 letter-spacing */
  --ls-label:.08em;       /* reference p1..p6 letter-spacing */

  --pad:clamp(1.5rem,5vw,7rem);

  /* ponytail: one fluid type scale, every heading refs these.
     Slopes + caps tuned down so nothing blows up past ~1440px. */
  --fs-hero:clamp(2.6rem,8vw,6.5rem);   /* was 12.5vw/11rem */
  --fs-display:clamp(1.8rem,4vw,3.4rem);/* was 5.5vw/4.4rem */
  --fs-num:clamp(2.1rem,4.5vw,3.6rem);  /* step numbers, was 7vw/5.5rem */
  --fs-h2:clamp(1.5rem,2.6vw,2.1rem);   /* was 3vw/2.2rem */
  --fs-h3:clamp(1.25rem,2vw,1.7rem);    /* was 2.4-2.6vw/1.9rem */
  --fs-quote:clamp(1.35rem,2.6vw,2.15rem);/* pull quote, was 3.1vw/2.5rem */
  --fs-lede:clamp(1rem,1.3vw,1.18rem);
}

/* ponytail: light theme override */
:root[data-theme="light"] {
  --bg:#f9f7f4;
  --txt:#2c2824;
  --dim:rgba(44,40,36,.72);
  --dimmer:rgba(44,40,36,.48);
  --line:rgba(44,40,36,.14);

  /* Tint down, not up — translucent paper on a light page is invisible.
     Alphas run ~2x the dark theme's: espresso-on-cream needs more opacity
     than paper-on-espresso to reach the same visual separation. */
  --surface-1:rgba(44,40,36,.045);
  --surface-2:rgba(44,40,36,.07);
  --surface-3:rgba(44,40,36,.10);
  --nav-bg:rgba(249,247,244,.88);
  /* Panel borders need to be assertive on a light page or cards float. */
  --line:rgba(44,40,36,.20);
  --dot-grid:rgba(44,40,36,.13);
  --shimmer-lo:rgba(44,40,36,.05);
  --shimmer-hi:rgba(44,40,36,.12);
  --shimmer-flat:rgba(44,40,36,.07);
  --hover-tint:rgba(168,148,116,.14);

  /* sand-on-paper is 2.75:1 (fails AA). This is 5.04:1. */
  --accent:#7a6845;
}

/* Light-theme panel definition: translucent tints read softer on cream than
   on espresso, so the large framed panels get a firmer stroke + a real
   title-bar divider to stop them floating into the page gradient. */
[data-theme="light"] .terminal,
[data-theme="light"] .watch{
  border-color:rgba(44,40,36,.28);
  box-shadow:0 12px 32px -20px rgba(44,40,36,.65),0 2px 6px -4px rgba(44,40,36,.3);
}
/* Hard divider under the title bar so it reads as a real header, matching
   the crispness of the input strip's top border. */
[data-theme="light"] .term-bar{border-bottom:1px solid rgba(44,40,36,.28)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt);
  font-family:var(--font);
  font-size:16px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ============================================================
   ANIMATED BACKGROUND STACK
   layer 0  .aurora   drifting gradient mesh (CSS)
   layer 1  #field    flow-field particles + pulses (canvas)
   layer 2  .grain    film grain texture (SVG turbulence)
   ============================================================ */

.aurora{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;filter:blur(70px) saturate(115%);
}
.aurora .blob{
  position:absolute;display:block;border-radius:50%;
  mix-blend-mode:screen;opacity:.5;
  will-change:transform;
}
.aurora .b1{
  width:52vw;height:52vw;left:-12vw;top:-14vw;
  background:radial-gradient(circle at 35% 35%,rgba(168,148,116,.72),transparent 66%);
  animation:drift1 26s ease-in-out infinite;
}
.aurora .b2{
  width:44vw;height:44vw;right:-10vw;top:24vh;
  background:radial-gradient(circle at 60% 40%,rgba(200,112,90,.42),transparent 68%);
  animation:drift2 34s ease-in-out infinite;
}
.aurora .b3{
  width:60vw;height:60vw;left:22vw;bottom:-26vw;
  background:radial-gradient(circle at 50% 50%,rgba(143,174,114,.3),transparent 70%);
  animation:drift3 44s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(14vw,9vh,0) scale(1.16)}
  66%{transform:translate3d(5vw,20vh,0) scale(.9)}
}
@keyframes drift2{
  0%,100%{transform:translate3d(0,0,0) scale(1.05)}
  40%{transform:translate3d(-17vw,-11vh,0) scale(.86)}
  70%{transform:translate3d(-7vw,13vh,0) scale(1.2)}
}
@keyframes drift3{
  0%,100%{transform:translate3d(0,0,0) scale(.95)}
  50%{transform:translate3d(-13vw,-16vh,0) scale(1.14)}
}

#field{position:fixed;inset:0;z-index:1;opacity:.5;pointer-events:none}

.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.055;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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}
}

.nav{z-index:100}
.hero,.prologue,.concept,.scanner-wrap,.how,.stack,.foot{position:relative;z-index:3}

/* ---------- per-section background variation ---------- */
.bg-contour::before,.bg-dots::before,.bg-vignette::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
}
/* dot grid — Dribbble/Awwwards staple */
.bg-dots::before{
  background-image:radial-gradient(var(--dot-grid) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 75% 62% at 50% 42%,#000 42%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 75% 62% at 50% 42%,#000 42%,transparent 100%);
}
/* contour / topographic stripes */
.bg-contour::before{
  background:repeating-linear-gradient(
    -14deg,
    transparent 0 38px,
    rgba(168,148,116,.075) 38px 39px
  );
  mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent);
}
/* warm vignette pool */
.bg-vignette::before{
  background:radial-gradient(ellipse 62% 82% at 78% 12%,rgba(168,148,116,.15),transparent 64%);
}

/* ---------- scroll reveal + stagger rise ---------- */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
}
[data-reveal].in{opacity:1;transform:none}

[data-rise]{
  opacity:0;transform:translateY(.5em);
  animation:rise 1s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes rise{to{opacity:1;transform:none}}

/* staggered children inside revealed sections */
[data-reveal] .step,[data-reveal] .gcard{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
[data-reveal].in .step,[data-reveal].in .gcard{opacity:1;transform:none}
[data-reveal].in .step:nth-child(1),[data-reveal].in .gcard:nth-child(1){transition-delay:.06s}
[data-reveal].in .step:nth-child(2),[data-reveal].in .gcard:nth-child(2){transition-delay:.16s}
[data-reveal].in .step:nth-child(3),[data-reveal].in .gcard:nth-child(3){transition-delay:.26s}
[data-reveal].in .gcard:nth-child(4){transition-delay:.36s}

/* ---------- shared type ---------- */
.display{
  font-weight:400;
  letter-spacing:var(--ls-display);
  line-height:.86;
  text-transform:uppercase;
}
.display.sm{
  font-size:var(--fs-display);
  line-height:.92;
}
.sec-label{
  font-size:.7rem;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--accent);
  font-weight:500;
}
.sec-head{margin-bottom:clamp(2.5rem,6vw,5rem)}
.sec-head .sec-label{margin-bottom:1.2rem}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem var(--pad);
  background:var(--nav-bg);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--txt)}
.brand-glyph{
  width:26px;height:26px;flex:none;color:var(--accent);
  animation:breathe 3.6s ease-in-out infinite;
}
.brand-glyph.small{width:22px;height:22px}
.brand:hover .brand-glyph{color:var(--paper)}
.brand-glyph{transition:color .3s}
/* legacy dot mark kept for any residual markup */
.brand-mark{
  width:8px;height:8px;border-radius:50%;background:var(--sand);
  animation:breathe 3.2s ease-in-out infinite;
}
.brand-mark.small{width:7px;height:7px;flex:none}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}
.brand-name{
  font-size:.86rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
}
.nav-links{display:flex;gap:2.4rem}
.nav-links a{
  color:var(--dim);text-decoration:none;font-size:.76rem;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  transition:color .25s;position:relative;
}
.nav-links a:hover{color:var(--accent)}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-4px;width:100%;height:1px;
  background:var(--sand);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-status{
  display:flex;align-items:center;gap:.5rem;
  font-size:.68rem;color:var(--dimmer);
  letter-spacing:var(--ls-label);text-transform:uppercase;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--warn);transition:background .3s}
.dot.live{background:var(--up)}
.dot.err{background:var(--down)}

/* ---------- hero (fullscreen, cinematic) ---------- */
.hero{
  min-height:100vh;min-height:100svh;
  padding:clamp(7rem,15vh,11rem) var(--pad) clamp(2.5rem,5vh,4rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:clamp(2rem,5vh,3.5rem);
}
.eyebrow{
  font-size:.72rem;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--accent);
  margin-bottom:clamp(1.6rem,4vw,2.6rem);font-weight:500;
}
h1.display{font-size:var(--fs-hero);margin-bottom:0}
.d-line{display:block}
h1.display em{font-style:normal;color:var(--accent);position:relative}
h1.display em::after{
  content:'';position:absolute;left:0;right:0;top:52%;
  height:.055em;background:var(--down);
}
.hero-foot{
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:end;
  border-top:1px solid var(--line);
  padding-top:clamp(1.6rem,4vh,2.6rem);
}
.lede{
  color:var(--dim);font-size:var(--fs-lede);
  line-height:1.62;max-width:44ch;
}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.btn{
  padding:1rem 2rem;border-radius:100px;text-decoration:none;
  font-size:.72rem;letter-spacing:var(--ls-label);
  text-transform:uppercase;font-weight:500;
  transition:all .25s;border:1px solid transparent;white-space:nowrap;
}
.btn-primary{background:var(--sand);color:var(--espresso)}
.btn-primary:hover{background:var(--paper)}
.btn-ghost{color:var(--txt);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--sand);color:var(--accent)}

/* ---------- concept (two-column) ---------- */
.concept{padding:clamp(4rem,10vw,8rem) var(--pad);border-bottom:1px solid var(--line)}
.concept-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:start;
}
.concept-l .sec-label{margin-bottom:1.4rem;display:block}
.concept-r p{color:var(--dim);font-size:var(--fs-lede);line-height:1.6;max-width:46ch}
.concept-r p+p{margin-top:1.4rem}

/* ---------- prologue pull quote ---------- */
.prologue{
  padding:clamp(4rem,10vw,8rem) var(--pad);
  border-bottom:1px solid var(--line);
}
.prologue .sec-label{margin-bottom:clamp(2rem,5vw,3rem)}
.pull{
  font-size:var(--fs-quote);
  line-height:1.24;letter-spacing:-.03em;
  max-width:22ch;max-width:min(90%,26ch);
  text-transform:uppercase;font-weight:400;
  color:var(--txt);
}

/* ---------- receiver / terminal ---------- */
.scanner-wrap{padding:clamp(4rem,10vw,8rem) var(--pad)}
.terminal{
  width:100%;max-width:1000px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:6px;overflow:hidden;
  backdrop-filter:blur(2px);
}
.term-bar{
  display:flex;align-items:center;gap:1rem;
  padding:.85rem 1.2rem;
  background:var(--surface-3);
  border-bottom:1px solid var(--line);
  position:relative; /* ponytail: for theme toggle positioning */
}
.term-dots{display:flex;gap:.4rem}
.term-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.term-title{
  font-size:.68rem;color:var(--dim);flex:1;
  letter-spacing:var(--ls-label);text-transform:uppercase;
}
.term-clock{font-size:.68rem;color:var(--dimmer);letter-spacing:.06em}
.term-body{
  padding:1.5rem 1.4rem;
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:.8rem;line-height:1.85;
  height:360px;overflow-y:auto;
}
.term-body::-webkit-scrollbar{width:5px}
.term-body::-webkit-scrollbar-thumb{background:var(--sand-50);border-radius:99px}
.line{margin-bottom:.1rem;white-space:pre-wrap;word-break:break-word;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.line.dim{color:var(--dimmer)}
.line.cmd{color:var(--accent)}
.line.err{color:var(--down)}
.line.up{color:var(--up)}
.line.down{color:var(--down)}
.line.head{color:var(--txt);font-weight:500;margin-top:.8rem}
.kbd{
  background:var(--sand-10);border:1px solid var(--line);
  border-radius:3px;padding:.1rem .45rem;
  color:var(--accent);font-size:.76rem;
}
.term-input{
  display:flex;align-items:center;gap:.8rem;
  padding:1rem 1.4rem;border-top:1px solid var(--line);
  background:var(--surface-2);
}
.prompt{color:var(--accent);font-family:ui-monospace,monospace;font-size:.85rem}
.term-input input{
  flex:1;min-width:0;background:none;border:none;outline:none;color:var(--txt);
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  /* 16px on mobile prevents iOS Safari auto-zoom on focus */
  font-size:max(16px,.85rem);
}
.term-input input::placeholder{color:var(--dimmer)}
.term-input button{
  background:var(--sand);border:none;color:var(--espresso);
  font-family:var(--font);font-size:.68rem;font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  padding:.7rem 1.6rem;border-radius:100px;cursor:pointer;transition:background .25s;
}
.term-input button:hover{background:var(--paper)}

/* inline SVG icons in controls: align glyph with its label */
.ico{display:inline-block;vertical-align:-.14em;flex:none}
.ico-txt{margin-left:.4em}
.theme-toggle .ico{vertical-align:middle}

/* share button + theme toggle */
.share-btn{
  display:inline-flex;align-items:center;
  background:var(--sand-10);border:1px solid var(--line);color:var(--accent);
  font-size:.65rem;padding:.25rem .6rem;border-radius:3px;cursor:pointer;
  margin-left:.6rem;transition:background .2s;font-family:var(--font);
}
.share-btn:hover{background:var(--sand-50)}

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sand-10);border:1px solid var(--line);color:var(--accent);
  font-size:.7rem;padding:.4rem .55rem;border-radius:3px;cursor:pointer;
  transition:background .2s;font-family:var(--font);font-weight:500;
  letter-spacing:.04em;
}
.theme-toggle:hover{background:var(--sand-50)}

.term-note{
  max-width:1000px;margin:1.4rem 0 0;
  font-size:.72rem;color:var(--dimmer);line-height:1.7;
  letter-spacing:.02em;max-width:min(1000px,64ch);
}

/* ---------- method (big-number editorial list) ---------- */
.how{padding:clamp(4rem,10vw,8rem) var(--pad);border-top:1px solid var(--line)}
.steps{display:grid;gap:0}
.step{
  display:grid;grid-template-columns:minmax(6rem,14vw) 1fr;
  gap:clamp(1.5rem,5vw,4rem);align-items:baseline;
  padding:clamp(2rem,5vw,3.4rem) 0;
  border-top:1px solid var(--line);
  transition:background .4s ease;
}
.step:last-child{border-bottom:1px solid var(--line)}
.step:hover{background:var(--hover-tint)}
.step-n{
  font-size:var(--fs-num);font-weight:400;
  letter-spacing:var(--ls-display);line-height:.8;color:var(--accent);
  transition:color .4s ease;
}
.step:hover .step-n{color:var(--paper)}
.step-body{max-width:60ch}
.step h3{
  font-size:var(--fs-h2);font-weight:400;
  letter-spacing:var(--ls-display);text-transform:uppercase;
  line-height:.95;margin-bottom:1rem;
}
.step p{color:var(--dim);font-size:.98rem;line-height:1.65}

/* ---------- stack (horizontal-scroll gallery) ---------- */
.stack{padding:clamp(4rem,10vw,8rem) 0;border-top:1px solid var(--line)}
.stack .sec-head{padding:0 var(--pad)}
.gallery{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:min(78vw,420px);
  gap:clamp(1rem,2.5vw,2rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--pad) 1.5rem;
  scrollbar-width:thin;scrollbar-color:var(--sand-50) transparent;
  overscroll-behavior-x:contain;
}
.gallery::-webkit-scrollbar{height:5px}
.gallery::-webkit-scrollbar-thumb{background:var(--sand-50);border-radius:99px}
.gcard{
  scroll-snap-align:start;
  border:1px solid var(--line);border-radius:6px;
  padding:clamp(1.8rem,3vw,2.6rem);
  min-height:clamp(15rem,26vw,20rem);
  display:flex;flex-direction:column;
  background:var(--surface-1);
  transition:border-color .4s ease,background .4s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.gcard:hover{border-color:var(--sand-50);background:var(--hover-tint);transform:translateY(-4px)}
.gnum{font-size:.7rem;color:var(--dimmer);letter-spacing:var(--ls-label);margin-bottom:auto}
.gcard h4{
  font-size:var(--fs-h3);font-weight:400;
  letter-spacing:var(--ls-display);text-transform:uppercase;
  color:var(--txt);margin:2.5rem 0 1rem;line-height:.98;
}
.gcard p{color:var(--dim);font-size:.92rem;line-height:1.65}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--line);
  padding:clamp(2.5rem,6vw,4rem) var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;flex-wrap:wrap;
}
.foot-brand{display:flex;align-items:center;gap:.6rem}
.foot p{
  font-size:.7rem;color:var(--dimmer);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  line-height:1.9;text-align:right;
}

/* ---------- magnetic buttons + shimmer (React Bits style, vanilla) ---------- */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn[data-magnet]{transition:transform .18s cubic-bezier(.16,1,.3,1),background .25s,color .25s,border-color .25s}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn:hover::after{transform:translateX(120%);transition:transform .75s cubic-bezier(.16,1,.3,1)}

/* ============================================================
   TABS — hash-routed panels, one visible at a time (no long scroll)
   ============================================================ */
.stage{min-height:calc(100vh - 140px)}
.tab{display:none;animation:tabin .4s cubic-bezier(.16,1,.3,1)}
.tab.active{display:block}
@keyframes tabin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pane{padding:clamp(3rem,8vw,6rem) var(--pad) clamp(4rem,10vw,7rem)}
.pane-lede{color:var(--dim);font-size:var(--fs-lede);line-height:1.6;max-width:52ch;margin:-1rem 0 clamp(2rem,5vw,3.5rem)}
.nav-links a.active{color:var(--accent)}
.nav-links a.active::after{transform:scaleX(1)}
/* home hero no longer forces 100vh inside a tab */
#tab-home .hero{min-height:calc(100vh - 140px)}

/* ---------- receiver + watchlist two-column ---------- */
.receiver-grid{
  display:grid;grid-template-columns:minmax(0,1000px) 300px;
  gap:clamp(1.2rem,3vw,2rem);align-items:start;
}
.watch{
  border:1px solid var(--line);border-radius:6px;
  background:var(--surface-2);
  padding:1.1rem 1.2rem;min-height:120px;
}
.watch-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.watch-actions{display:flex;gap:.8rem;align-items:center}
.watch-clear{
  background:none;border:none;color:var(--dimmer);cursor:pointer;
  font-family:var(--font);font-size:.64rem;letter-spacing:var(--ls-label);
  text-transform:uppercase;transition:color .2s;
}
.watch-clear:hover{color:var(--down)}
#watchShare:hover{color:var(--up)}

/* ---------- loading skeleton ----------
   Shown while a scan is in flight, then replaced by the real output. Rows
   mimic the shape of a ticker readout (label + value) so the layout doesn't
   jump when data lands. Shimmer is a moving gradient; it respects
   prefers-reduced-motion by falling back to a static dim block. */
.skeleton{display:flex;flex-direction:column;gap:.5rem;padding:.2rem 0 .4rem}
.skeleton-row{
  height:.72rem;border-radius:3px;
  background:linear-gradient(90deg,
    var(--shimmer-lo) 25%,
    var(--shimmer-hi) 37%,
    var(--shimmer-lo) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
}
.skeleton-row.w-head{width:52%;height:.85rem;margin-bottom:.2rem}
.skeleton-row.w-lg{width:70%}
.skeleton-row.w-md{width:56%}
.skeleton-row.w-sm{width:38%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion: reduce){
  .skeleton-row{animation:none;background:var(--shimmer-flat)}
}
.watch-empty{color:var(--dimmer);font-size:.78rem;line-height:1.7}
.watch-empty .kbd{font-size:.72rem}
.watch-item{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;border-top:1px solid var(--line);
  padding:.7rem .1rem;font-family:var(--font);transition:background .2s;
}
.watch-item:first-of-type{border-top:none}
.watch-item:hover{background:var(--hover-tint)}
.watch-sym{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.watch-sym b{font-size:.9rem;font-weight:600;color:var(--txt);letter-spacing:.02em}
.watch-price{font-family:ui-monospace,monospace;font-size:.78rem;color:var(--dim)}
.watch-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:.25rem}
.watch-delta{font-family:ui-monospace,monospace;font-size:.72rem}
.watch-delta.up{color:var(--up)}
.watch-delta.down{color:var(--down)}
.watch-delta.flat{color:var(--dimmer)}
.watch-since{font-size:.62rem;color:var(--dimmer);letter-spacing:.03em;text-transform:uppercase}
.watch-remove{
  float:right;background:none;border:none;color:var(--dimmer);
  cursor:pointer;font-size:.8rem;line-height:1;padding:0 0 0 .5rem;transition:color .2s;
}
.watch-remove:hover{color:var(--down)}

/* watch/unwatch inline button printed after a scan */
.watch-btn{
  display:inline-flex;align-items:center;
  background:var(--sand-10);border:1px solid var(--line);color:var(--accent);
  font-size:.65rem;padding:.25rem .6rem;border-radius:3px;cursor:pointer;
  margin-left:.4rem;transition:background .2s;font-family:var(--font);
}
.watch-btn:hover{background:var(--sand-50)}
.watch-btn.on{background:var(--sand-50);color:var(--paper)}

/* ---------- bands grid ---------- */
.band-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(.8rem,2vw,1.2rem);
}
.band-card{
  display:block;text-decoration:none;
  text-align:left;cursor:pointer;font-family:var(--font);
  border:1px solid var(--line);border-radius:6px;
  background:var(--surface-1);
  padding:1.4rem 1.4rem 1.2rem;
  transition:border-color .3s,background .3s,transform .3s cubic-bezier(.16,1,.3,1);
}
.band-card:hover{border-color:var(--sand-50);background:var(--hover-tint);transform:translateY(-3px)}
.band-key{font-size:.66rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.band-label{font-size:1.15rem;font-weight:500;color:var(--txt);letter-spacing:-.01em;margin-bottom:.7rem}
.band-syms{display:flex;flex-wrap:wrap;gap:.35rem}
.band-syms span{
  font-family:ui-monospace,monospace;font-size:.66rem;color:var(--dim);
  background:var(--sand-10);border:1px solid var(--line);border-radius:3px;padding:.1rem .4rem;
}

/* ---------- SSR band page (/band/:key) — crawler + direct-landing view ---------- */
.band-ssr{max-width:60ch;margin:0 auto}
.band-ssr h1{margin-bottom:1.4rem}
.band-ssr .band-syms.ssr{list-style:none;padding:0;margin:.6rem 0 2rem;gap:.5rem}
.band-ssr .band-syms.ssr li{
  font-family:ui-monospace,monospace;font-size:.8rem;color:var(--dim);
  background:var(--sand-10);border:1px solid var(--line);border-radius:3px;padding:.25rem .6rem;
}
.band-ssr .btn-primary{display:inline-block;margin:1rem 0 2rem}
.band-ssr h2.sec-label{margin-bottom:.4rem}

/* ---------- sparkline (ASCII block chart line) ---------- */
.line.spark{font-family:ui-monospace,monospace;color:var(--accent);letter-spacing:.05em}

/* ---------- method: honest disclosure ---------- */
.disclosure{
  margin-top:clamp(3rem,7vw,5rem);border-top:1px solid var(--line);
  padding-top:clamp(2rem,5vw,3rem);max-width:64ch;
}
.disclosure .sec-label{margin-bottom:1.2rem}
.disc-title{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.15;margin-bottom:1.3rem;color:var(--txt)}
.disclosure p{color:var(--dim);font-size:.98rem;line-height:1.7;margin-bottom:1.1rem}
.disclosure code{
  font-family:ui-monospace,monospace;font-size:.82rem;color:var(--accent);
  background:var(--sand-10);border:1px solid var(--line);border-radius:3px;padding:.08rem .4rem;
}
.disc-foot{color:var(--dimmer)!important;font-size:.9rem!important;border-left:2px solid var(--sand-50);padding-left:1rem}
.tag{
  display:inline-block;font-family:ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.05em;border-radius:3px;padding:.1rem .45rem;margin:0 .1rem;
  border:1px solid var(--line);
}
.tag.noise{color:var(--dimmer)}
.tag.faint{color:var(--warn)}
.tag.coherent{color:var(--accent)}
.tag.strong{color:var(--up)}

/* ---------- ethos ---------- */
.ethos-lede{max-width:56ch;margin-bottom:clamp(2.5rem,6vw,4rem)}
.ethos-lede p{color:var(--dim);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.62}
.ethos-lede p+p{margin-top:1.4rem}
.ethos-lede a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--sand-50)}
.ethos-lede a:hover{color:var(--paper)}
#tab-ethos .gallery{grid-auto-flow:column;grid-auto-columns:min(78vw,360px);overflow-x:auto;
  scroll-snap-type:x mandatory;padding:0 0 1.5rem;scrollbar-width:thin;scrollbar-color:var(--sand-50) transparent}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .receiver-grid{grid-template-columns:1fr}
  .watch{order:-1}
}
@media(max-width:900px){
  .nav-links{gap:1.1rem}
  .nav-links a{font-size:.66rem}
  .hero-foot{grid-template-columns:1fr;align-items:start}
  .hero-cta{justify-content:flex-start}
  .concept-grid{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:.6rem}
  .step-n{font-size:clamp(2.2rem,11vw,3.2rem)}
  .foot{flex-direction:column;align-items:flex-start}
  .foot p{text-align:left}
  .term-body{height:300px;font-size:.74rem}
}
@media(max-width:560px){
  .nav{padding:.5rem var(--pad)}
  .nav-links{gap:.7rem}
  .brand-name{display:none}
  /* Taller hit areas: nav links are ~16px tall by default, well under the
     44px touch minimum. Pad vertically instead of growing the font. */
  .nav-links a{padding:.95rem 0}
  .nav-links a::after{bottom:.7rem}
  .term-input{padding:.75rem 1rem;gap:.5rem}
  .term-body{padding-left:1rem;padding-right:1rem}
}

/* Narrow phones (320-400px): the nav's brand + 5 links + status label sum
   past the viewport and drag the fixed decorative layers wide with them,
   producing horizontal scroll. Drop the status word and let links shrink. */
@media(max-width:400px){
  .nav{gap:.5rem}
  .nav-links{gap:.55rem;flex:1;justify-content:space-between;min-width:0}
  .nav-links a{font-size:.62rem;letter-spacing:.08em}
  .nav-status{flex:none}
  /* Visually hide the status word but keep it for screen readers; the
     coloured dot still carries the state visually. */
  .nav-status #netlabel{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .term-input button{padding:.7rem 1.1rem}
}

/* ============================================================
   KEYBOARD FOCUS
   Hover was fully styled (underline sweep, magnet, card lift) but focus was
   not — a Tab user had no idea where they were. :focus-visible only, so
   mouse clicks don't paint rings. Ring uses --sand (decor, not text) and
   sits on an offset so it reads against both themes.
   ============================================================ */
:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--sand);
  outline-offset:3px;
  border-radius:3px;
}
/* Pill controls: match the shape so the ring hugs the button. */
.btn:focus-visible,
.term-input button:focus-visible{outline-offset:3px;border-radius:100px}
/* Cards own their radius; keep the ring tight to the 6px corner. */
.band-card:focus-visible,
.gcard:focus-visible{outline-offset:2px;border-radius:6px}
/* The text input sits inside a bordered shell — ring the shell, not the
   bare input, so the whole field reads as focused. */
.term-input:focus-within{
  outline:2px solid var(--sand);
  outline-offset:-1px;
}
.term-input input:focus-visible{outline:none}
/* Watch rows are full-width buttons; inset keeps the ring off the border. */
.watch-item:focus-visible,
.watch-clear:focus-visible,
.watch-remove:focus-visible,
.watch-btn:focus-visible,
.share-btn:focus-visible,
.theme-toggle:focus-visible{outline-offset:1px}
/* Nav links already animate an underline on hover; on focus, show it
   immediately so focus and hover agree visually. */
.nav-links a:focus-visible::after{transform:scaleX(1)}

/* Belt-and-braces: never let the decorative fixed layers create scroll. */
html{overflow-x:hidden}
.aurora,.grain,#field{max-width:100vw}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .aurora,.grain,#field{display:none}
  [data-reveal],[data-rise]{opacity:1!important;transform:none!important}
  [data-reveal] .step,[data-reveal] .gcard{opacity:1!important;transform:none!important}
}