@charset "UTF-8";
/* ==========================================================================
   DRK — one-page liquid glass
   Tokens carried over from the DRK design system (interactive-deck/globals.css)
   ========================================================================== */

:root{
  --void:#000000;
  --base:#050705;
  --panel:#090b08;

  --hairline:rgba(255,255,255,.14);
  --hairline-soft:rgba(255,255,255,.07);

  --ink:#f4f6f3;
  --ink-soft:#dfe3dd;
  --muted:#a5aca3;
  --muted-lift:#dae0d7;   /* body copy, lifted well off grey but short of white */
  --faint:#858c82;
  --dim:#4a5048;

  --signal:#00e060;
  --signal-bright:#00fc6b;

  --r-surface:20px;
  --bezel:clamp(7px, .72vw, 12px);

  --ease:cubic-bezier(.16,1,.3,1);

  --pad-x:clamp(1.75rem, 4.2vw, 4.75rem);
  --pad-y:clamp(1.5rem, 3vw, 2.75rem);

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}

html,body{height:100%;}

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}

/* --------------------------------------------------------------------------
   STAGE — one full-screen composition. The page never scrolls.
   -------------------------------------------------------------------------- */

.stage{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(.9rem, 3.2vh, 3.25rem) clamp(.9rem, 2.6vw, 3.25rem);
  background:
    radial-gradient(120% 90% at 72% 34%, #06110c 0%, #020402 46%, #000 78%),
    var(--void);
}

/* faint atmosphere behind the panel — the room the glass floats in */
.ambient{
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(46% 40% at 68% 40%, rgba(0,224,96,.055), transparent 68%),
    radial-gradient(38% 34% at 30% 72%, rgba(0,90,120,.035), transparent 70%);
  filter:blur(18px);
  animation:drift 34s var(--ease) infinite alternate;
}
@keyframes drift{
  0%  {transform:translate3d(0,0,0) scale(1);   opacity:.85;}
  100%{transform:translate3d(-1.6%,1.1%,0) scale(1.06); opacity:1;}
}

/* --------------------------------------------------------------------------
   PANEL — the floating sheet of smoked glass
   -------------------------------------------------------------------------- */

/* --- the bezel: a machined ring of glass around the screen ---------------- */

.bezel{
  position:relative;
  width:min(1500px, 100%);
  max-width:100%;
  aspect-ratio:1500/712;
  max-height:100%;
  min-width:0;
  padding:var(--bezel);
  border-radius:calc(var(--r-surface) + var(--bezel));
  /* the material: dark, with the light catching the top and bottom curves */
  background:
    linear-gradient(158deg,
      #1b201c 0%, #0c100d 14%, #050705 42%,
      #040604 58%, #0b0f0c 84%, #1e241f 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.13),
    0 0 0 2px rgba(0,0,0,.55),
    0 44px 120px -34px rgba(0,0,0,1),
    0 0 170px -58px rgba(0,224,96,.26),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.15);
  transform:translate3d(0,0,0);
}

/* the gloss on the top and bottom curves of the ring */
.bezel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 5.5%),
    linear-gradient(0deg,   rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 4.5%);
}

/* the specular that runs around the ring — this is what reads as glass */
.bezel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:var(--bezel);
  background:linear-gradient(122deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.34) 6%,
    rgba(255,255,255,.05) 15%,
    transparent 31%,
    rgba(0,224,96,.30) 50%,
    transparent 69%,
    rgba(255,255,255,.10) 84%,
    rgba(255,255,255,.30) 93%,
    rgba(255,255,255,.78) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:.7;
  pointer-events:none;
}

.panel{
  position:relative;
  width:100%;
  height:100%;
  border-radius:var(--r-surface);
  overflow:hidden;
  isolation:isolate;
  background:var(--base);
  /* the inner lip, where the screen sits below the glass */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.13),
    inset 0 1px 2px rgba(0,0,0,.9),
    inset 0 0 22px rgba(0,0,0,.65);
  transform:translate3d(0,0,0);
}

#liquid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}

/* very fine optical grain — kills gradient banding, adds photographic weight */
.grain{
  position:absolute;inset:-50%;
  z-index:1;
  pointer-events:none;
  opacity:.15;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grainshift 7s steps(6) infinite;
}
@keyframes grainshift{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,-1%)}
  80%{transform:translate(2%,1%)}
}

/* reading scrim — guarantees type contrast without flattening the glass */
.scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.72) 22%, rgba(0,0,0,.26) 44%, rgba(0,0,0,0) 62%),
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 34%),
    linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,0) 26%),
    linear-gradient(to left, rgba(0,0,0,.95) 0%, rgba(0,0,0,.86) 8%, rgba(0,0,0,.62) 16%, rgba(0,0,0,.24) 26%, rgba(0,0,0,0) 38%);
}

/* the luminous glass rim */
.edge{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:var(--r-surface);
  padding:1px;
  background:linear-gradient(150deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.05) 24%,
    rgba(0,224,96,.20) 47%,
    rgba(255,255,255,.04) 68%,
    rgba(255,255,255,.22) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:.9;
}

/* --------------------------------------------------------------------------
   LAYOUT INSIDE THE GLASS
   -------------------------------------------------------------------------- */

.inner{
  position:relative;
  z-index:4;
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:var(--pad-y) var(--pad-x);
}

.foot{
  position:relative;
  padding-top:clamp(.85rem,2vh,1.25rem);
}
.foot::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(to right,
    rgba(255,255,255,.16), rgba(255,255,255,.07) 55%, transparent);
}

.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.wordmark{
  font-family:"Inter Tight",sans-serif;
  font-weight:700;
  font-size:clamp(1.65rem, 2.35vw, 2.45rem);
  letter-spacing:.085em;
  line-height:1;
  color:#fff;
  display:inline-flex;
  align-items:flex-end;
  gap:.24em;
}

.dot{
  width:.19em;height:.19em;
  border-radius:50%;
  background:var(--signal);
  display:inline-block;
  margin-bottom:.1em;
  box-shadow:0 0 10px rgba(0,224,96,.85), 0 0 26px rgba(0,224,96,.35);
  animation:pulse 4.5s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{opacity:.82; box-shadow:0 0 8px rgba(0,224,96,.6), 0 0 20px rgba(0,224,96,.22);}
  50%    {opacity:1;   box-shadow:0 0 14px rgba(0,224,96,.95),0 0 38px rgba(0,224,96,.42);}
}

.meta{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:clamp(.575rem,.68vw,.7rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
  white-space:nowrap;
}

/* ---- content grid: strong left / right split ---- */

.content{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(2rem,6vw,7rem);
  padding:clamp(1rem,3.5vh,3rem) 0;
}

.lede-col{max-width:100%;}

.eyebrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5em .65em;
  max-width:100%;
  line-height:1.7;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:clamp(.545rem,.61vw,.645rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-lift);
  margin-bottom:clamp(1.35rem,3vh,2.2rem);
}
.tick{
  width:18px;height:1px;
  background:var(--signal);
  display:block;
  box-shadow:0 0 8px rgba(0,224,96,.9);
  animation:tickglow 4.5s var(--ease) infinite;
}
/* the separator between positioning segments */
.sep{
  width:3px;height:3px;
  border-radius:50%;
  background:var(--dim);
  display:block;
  flex:none;
}

@keyframes tickglow{
  0%,100%{opacity:.55; width:14px;}
  50%    {opacity:1;   width:22px;}
}

.headline{
  margin:0;
  max-width:16ch;
  font-family:"Inter Tight",sans-serif;
  font-weight:600;
  font-size:clamp(2.9rem, 5.6vw, 5.6rem);
  line-height:.94;
  letter-spacing:-.038em;
  color:#fff;
  display:flex;
  align-items:flex-end;
  gap:.06em;
  text-shadow:0 2px 40px rgba(0,0,0,.9);
}
.dot-lg{
  width:.115em;height:.115em;
  margin-bottom:.13em;
}

.lede{
  margin:clamp(1.25rem,2.8vh,1.9rem) 0 0;
  font-size:clamp(.85rem,.92vw,.95rem);
  line-height:1.66;
  font-weight:300;
  letter-spacing:.004em;
  color:var(--muted-lift);
  max-width:50ch;
}

.cta{
  position:relative;
  margin-top:clamp(1.9rem,4vh,3rem);
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:2.75rem;
  min-width:min(15.5rem, 100%);
  padding:.95rem 1.35rem .95rem 1.5rem;
  border-radius:12px;
  font-family:"Inter Tight",sans-serif;
  font-weight:600;
  font-size:.925rem;
  letter-spacing:-.005em;
  color:#fff;
  cursor:pointer;
  /* the same material as the bezel, cut down to button size */
  background:
    linear-gradient(158deg,
      rgba(255,255,255,.115) 0%,
      rgba(255,255,255,.045) 26%,
      rgba(255,255,255,.018) 58%,
      rgba(255,255,255,.055) 100%),
    linear-gradient(180deg, rgba(0,224,96,.085), rgba(0,224,96,.02));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px) saturate(1.45);
  -webkit-backdrop-filter:blur(16px) saturate(1.45);
  transition:
    border-color .5s var(--ease),
    box-shadow .5s var(--ease),
    background .5s var(--ease),
    transform .5s var(--ease);
  animation:ctaglow 5.5s var(--ease) infinite;
}
/* the specular ring — the button's own bezel */
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(122deg,
    rgba(255,255,255,.85) 0%,
    rgba(255,255,255,.16) 14%,
    transparent 32%,
    rgba(0,224,96,.46) 52%,
    transparent 70%,
    rgba(255,255,255,.14) 86%,
    rgba(255,255,255,.66) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:.72;
  pointer-events:none;
  transition:opacity .5s var(--ease);
}
@keyframes ctaglow{
  0%,100%{box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(255,255,255,.07),
    0 10px 26px -14px rgba(0,0,0,.95),
    0 0 20px -9px rgba(0,224,96,.32);}
  50%    {box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 10px 26px -14px rgba(0,0,0,.95),
    0 0 36px -7px rgba(0,224,96,.55);}
}
.cta svg{
  width:24px;height:12px;
  fill:none;
  stroke:var(--signal);
  stroke-width:1.35;
  stroke-linecap:square;
  transition:transform .55s var(--ease), stroke .4s var(--ease);
  filter:drop-shadow(0 0 6px rgba(0,224,96,.55));
}
.cta:hover{
  border-color:rgba(255,255,255,.18);
  background:
    linear-gradient(158deg,
      rgba(255,255,255,.17) 0%,
      rgba(255,255,255,.07) 26%,
      rgba(255,255,255,.03) 58%,
      rgba(255,255,255,.085) 100%),
    linear-gradient(180deg, rgba(0,224,96,.15), rgba(0,224,96,.045));
  transform:translateY(-1px);
  animation:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 14px 32px -16px rgba(0,0,0,.95),
    0 0 42px -6px rgba(0,224,96,.58);
}
.cta:hover::before{opacity:1;}
.cta:hover svg{transform:translateX(5px); stroke:var(--signal-bright);}
.cta:focus-visible{outline:1px solid var(--signal); outline-offset:3px;}

/* ---- right side: navigation / categories ---- */

.nav-col{
  position:relative;
  justify-self:end;
  text-align:right;
}
.nav-col::before{
  content:"";
  position:absolute;
  inset:-30% -60% -30% -78%;
  background:linear-gradient(to left,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.78) 30%,
    rgba(0,0,0,.42) 60%,
    transparent 100%);
  pointer-events:none;
}
/* a single hairline gives the rail its structure — the only rule on the page */
.nav-col::after{
  content:"";
  position:absolute;
  top:-4%; bottom:-4%; left:-2.25rem;
  width:1px;
  background:linear-gradient(to bottom,
    transparent, rgba(255,255,255,.10) 22%, rgba(255,255,255,.10) 78%, transparent);
  pointer-events:none;
}

/* the rail sizes to its widest row, so every row shares one geometry:
   the indices stack in a straight column, the labels stay flush right */
.nav-col ul{
  position:relative;
  display:grid;
  width:max-content;
  max-width:100%;
  margin-left:auto;
  gap:clamp(.15rem,.9vh,.55rem);
}

.nav-col a{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:.95rem;
  padding:clamp(.55rem,1.3vh,.85rem) 0 clamp(.55rem,1.3vh,.85rem) 1.5rem;
}
.nav-col a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(to right,
    transparent, rgba(255,255,255,.05) 18%, rgba(255,255,255,.20) 100%);
  transition:background .5s var(--ease);
}
.nav-col li:last-child a::after{display:none;}

.idx{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-weight:500;
  font-size:clamp(.7rem,.82vw,.79rem);
  letter-spacing:.14em;
  color:var(--ink-soft);
  text-shadow:0 1px 3px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,.95);
  transition:color .45s var(--ease), text-shadow .45s var(--ease);
}

.lab{
  text-shadow:0 1px 3px rgba(0,0,0,1), 0 2px 22px rgba(0,0,0,.95);
  font-family:"Inter Tight",sans-serif;
  font-weight:500;
  font-size:clamp(.94rem,1.16vw,1.15rem);
  letter-spacing:.008em;
  white-space:nowrap;
  text-align:right;
  color:var(--ink);
  transition:color .45s var(--ease), transform .55s var(--ease);
  transform-origin:right center;
}

/* the note is the reward for hovering — never present at rest */
.note{
  grid-column:1 / -1;
  display:block;
  max-height:0;
  overflow:hidden;
  opacity:0;
  font-size:.72rem;
  font-weight:300;
  letter-spacing:.01em;
  line-height:1.5;
  color:var(--muted);
  text-shadow:0 1px 12px rgba(0,0,0,.95);
  transition:max-height .55s var(--ease), opacity .45s var(--ease), margin .55s var(--ease);
}

.nav-col a:hover,
.nav-col a:focus-visible{outline:none;}
.nav-col a:hover::after,
.nav-col a:focus-visible::after{
  background:linear-gradient(to right,
    transparent, rgba(0,224,96,.14) 18%, rgba(0,224,96,.55) 100%);
}
.nav-col a:hover .lab,
.nav-col a:focus-visible .lab{
  color:#fff;
  transform:translateX(-2px);
}
.nav-col a:hover .idx,
.nav-col a:focus-visible .idx{
  color:var(--signal);
  text-shadow:0 0 12px rgba(0,224,96,.7);
}
.nav-col a:hover .note,
.nav-col a:focus-visible .note{
  max-height:4rem;
  opacity:1;
  margin-top:.4rem;
}

/* ---- footer strip ---- */

.foot{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:clamp(.6rem,.7vw,.72rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  text-shadow:0 1px 3px rgba(0,0,0,1), 0 2px 18px rgba(0,0,0,.95);
}
.foot .sig{color:var(--muted-lift);}


/* --------------------------------------------------------------------------
   RESPONSIVE — the single-panel concept is preserved, never a stacked site
   -------------------------------------------------------------------------- */

@media (max-width:1080px){
  .content{gap:clamp(1.5rem,4vw,3rem);}
  .lede{max-width:38ch;}
  .eyebrow{font-size:.55rem;letter-spacing:.17em;}
}

@media (max-width:860px), (max-aspect-ratio:1/1){
  /* the panel still fills the first screen, but it is now a document that
     scrolls rather than a sealed pane that clips whatever will not fit */
  html,body{height:auto;min-height:100%;}
  body{overflow:visible;overflow-x:hidden;}

  .stage{
    position:relative;
    display:block;
    inset:auto;
    min-height:100vh;
    min-height:100svh;
  }
  .ambient{position:fixed;}

  .bezel{
    aspect-ratio:auto;
    width:100%;
    height:auto;
    max-height:none;
    min-height:calc(100vh  - 2 * clamp(.9rem, 3.2vh, 3.25rem));
    min-height:calc(100svh - 2 * clamp(.9rem, 3.2vh, 3.25rem));
    border-radius:calc(20px + var(--bezel));
  }
  /* auto heights alone would leave the panel short of the bezel's min-height,
     so the chain stretches by flex instead of by percentage */
  .bezel{display:flex;}
  .panel{
    flex:1 1 auto;
    min-width:0;
    height:auto;
    display:flex;
    flex-direction:column;
    border-radius:20px;
  }
  .inner{flex:1 1 auto;height:auto;}
  /* a tall panel makes the oversized grain sheet expensive to animate */
  .grain{inset:-20%;}
  .content{
    grid-template-columns:1fr;
    align-content:center;
    align-items:start;
    gap:clamp(2rem,5vh,3.5rem);
    padding:clamp(1.5rem,4vh,3rem) 0;
  }
  .lede-col{max-width:100%;}
  .lede{max-width:100%;}
  .eyebrow{
    font-size:clamp(.68rem,3.1vw,.8rem);
    letter-spacing:.13em;
    line-height:1.6;
  }
  .headline{font-size:clamp(2.6rem,13vw,4rem);}
  .wordmark{font-size:clamp(1.85rem,6.4vw,2.3rem);letter-spacing:.08em;}
  .cta{width:100%;min-width:0;}
  .nav-col{justify-self:stretch;text-align:left;}
  .nav-col::before,
  .nav-col::after{display:none;}
  .nav-col ul{width:auto;margin-left:0;}
  .nav-col a{
    grid-template-columns:auto 1fr;
    justify-content:start;
    gap:1rem;
    padding-left:0;
  }
  .nav-col li:last-child a::after{display:block;}
  .lab{white-space:normal;text-align:left;padding-right:1.75rem;}
  .note{padding-right:1.75rem;}
  /* the rail is tapped, not hovered - so it says so. The mark is drawn from
     two bars rather than set as a glyph: the vertical one collapses on open,
     turning the plus into a minus with nothing to mis-encode. */
  .nav-col a::before{
    content:"";
    position:absolute;
    right:0;
    top:clamp(.55rem,1.3vh,.85rem);
    width:12px;
    height:1.3em;
    background:
      linear-gradient(var(--faint),var(--faint)) center/12px 1px no-repeat,
      linear-gradient(var(--faint),var(--faint)) center/1px 12px no-repeat;
    transition:background-size .45s var(--ease), background-image .45s var(--ease);
  }
  .nav-col a.is-open::before{
    background:
      linear-gradient(var(--signal),var(--signal)) center/12px 1px no-repeat,
      linear-gradient(var(--signal),var(--signal)) center/1px 0 no-repeat;
  }
  .nav-col a.is-open .lab{color:#fff;}
  .nav-col a.is-open .idx{color:var(--signal);text-shadow:0 0 12px rgba(0,224,96,.7);}
  .nav-col a.is-open::after{
    background:linear-gradient(to right,
      rgba(0,224,96,.55), rgba(0,224,96,.14) 82%, transparent);
  }
  .nav-col a.is-open .note{max-height:7rem;opacity:1;margin-top:.45rem;}
  .scrim{
    background:
      linear-gradient(to top, rgba(0,0,0,.92) 6%, rgba(0,0,0,.66) 40%, rgba(0,0,0,.16) 76%, rgba(0,0,0,0) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 22%);
  }
  .meta{display:none;}
}

/* on a touch device the note answers to the tap only — a sticky :hover
   left over from the last tap must not open or hold one */
@media (hover:none){
  .nav-col a:hover .note{max-height:0;opacity:0;margin-top:0;}
  .nav-col a.is-open .note{max-height:7rem;opacity:1;margin-top:.45rem;}
}

@media (max-height:520px) and (min-width:861px){
  .note{display:none;}
  .content{padding:.75rem 0;}
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   ENTRANCE — the glass settles into the room once, then never again
   -------------------------------------------------------------------------- */

.bezel{
  opacity:0;
  transform:translate3d(0,10px,0) scale(.988);
  transition:opacity 1.15s var(--ease), transform 1.5s var(--ease);
}
body.ready .bezel{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

.inner > *,
.lede-col > *,
.nav-col li{
  opacity:0;
  transform:translate3d(0,8px,0);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
}
body.ready .inner > *,
body.ready .lede-col > *,
body.ready .nav-col li{
  opacity:1;
  transform:none;
}

body.ready .bar        {transition-delay:.34s;}
body.ready .eyebrow    {transition-delay:.42s;}
body.ready .headline   {transition-delay:.50s;}
body.ready .lede       {transition-delay:.60s;}
body.ready .cta        {transition-delay:.70s;}
body.ready .nav-col li:nth-child(1){transition-delay:.62s;}
body.ready .nav-col li:nth-child(2){transition-delay:.70s;}
body.ready .nav-col li:nth-child(3){transition-delay:.78s;}
body.ready .nav-col li:nth-child(4){transition-delay:.86s;}
body.ready .foot       {transition-delay:.94s;}

@media (prefers-reduced-motion:reduce){
  .bezel,
  .inner > *,
  .lede-col > *,
  .nav-col li{opacity:1 !important;transform:none !important;}
}


/* --------------------------------------------------------------------------
   CONTACT — opens inside the glass. The page never leaves the panel.
   -------------------------------------------------------------------------- */

.contact{
  position:absolute;
  inset:0;
  z-index:6;
  display:grid;
  place-items:center;
  padding:var(--pad-y) var(--pad-x);
}
.contact[hidden]{display:none;}

/* the swipe affordance — only drawn on the stacked, touch layout */
.contact-grip{display:none;}

.contact-veil{
  position:absolute;
  inset:0;
  background:rgba(2,4,3,.80);
  backdrop-filter:blur(22px) saturate(.85);
  -webkit-backdrop-filter:blur(22px) saturate(.85);
  opacity:0;
  transition:opacity .55s var(--ease);
}
.contact.open .contact-veil{opacity:1;}

.contact-body{
  position:relative;
  z-index:1;
  width:min(34rem, 100%);
  max-height:100%;
  overflow:auto;
  opacity:0;
  transform:translate3d(0,12px,0);
  transition:opacity .5s var(--ease) .08s, transform .7s var(--ease) .08s;
}
/* while a finger is on it, the sheet tracks 1:1 with no easing in the way */
.contact.dragging .contact-body,
.contact.dragging .contact-veil{transition:none;}
.contact.open .contact-body{opacity:1;transform:none;}

.contact-close{
  opacity:0;
  transition:opacity .5s var(--ease) .08s,
             border-color .4s var(--ease),
             background .4s var(--ease);
}
.contact.open .contact-close{opacity:1;}

.contact-close{
  position:absolute;
  z-index:2;
  top:var(--pad-y); right:var(--pad-x);
  width:2.25rem;height:2.25rem;
  display:grid;place-items:center;
  background:none;
  border:1px solid var(--hairline);
  border-radius:6px;
  cursor:pointer;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.contact-close svg{
  width:11px;height:11px;
  fill:none;stroke:var(--muted);stroke-width:1.4;
  transition:stroke .4s var(--ease);
}
.contact-close:hover{border-color:rgba(0,224,96,.42);background:rgba(0,224,96,.05);}
.contact-close:hover svg{stroke:#fff;}
.contact-close:focus-visible{outline:1px solid var(--signal);outline-offset:3px;}

.contact-title{
  margin:0 0 clamp(1.5rem,3.5vh,2.4rem);
  font-family:"Inter Tight",sans-serif;
  font-weight:600;
  font-size:clamp(2.1rem,3.8vw,3.1rem);
  line-height:1;
  letter-spacing:-.032em;
  color:#fff;
  display:flex;
  align-items:flex-end;
  gap:.06em;
}
.dot-md{width:.13em;height:.13em;margin-bottom:.12em;}

.handles{display:grid;gap:.75rem;}

.handles li{
  position:relative;
  display:flex;
  align-items:stretch;
  border:1px solid var(--hairline);
  border-radius:9px;
  background:linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.008));
  transition:border-color .45s var(--ease), background .45s var(--ease);
}
.handles li:hover{
  border-color:rgba(0,224,96,.38);
  background:linear-gradient(180deg, rgba(0,224,96,.075), rgba(0,224,96,.02));
}

.handles a{
  flex:1;
  min-width:0;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:.9rem;
  padding:1rem 1.1rem 1rem 1.25rem;
}
.handles a:focus-visible{outline:1px solid var(--signal);outline-offset:-1px;border-radius:9px;}

.ch{
  grid-column:1;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
  display:block;
  margin-bottom:.3rem;
}
.hd{
  grid-column:1;
  font-family:"Inter Tight",sans-serif;
  font-weight:500;
  font-size:clamp(1rem,1.5vw,1.2rem);
  letter-spacing:-.005em;
  color:#fff;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.go{
  grid-column:2;grid-row:1 / span 2;
  width:22px;height:11px;
  fill:none;stroke:var(--signal);stroke-width:1.35;stroke-linecap:square;
  transition:transform .55s var(--ease);
  filter:drop-shadow(0 0 6px rgba(0,224,96,.5));
}
.handles li:hover .go{transform:translateX(4px);}

.copy{
  flex:none;
  padding:0 1.05rem;
  border:0;
  border-left:1px solid var(--hairline);
  background:none;
  cursor:pointer;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  transition:color .4s var(--ease), background .4s var(--ease);
}
.copy:hover{color:#fff;background:rgba(255,255,255,.04);}
.copy:focus-visible{outline:1px solid var(--signal);outline-offset:-2px;}
.copy.done{color:var(--signal);text-shadow:0 0 12px rgba(0,224,96,.7);}

.contact-fine{
  margin:clamp(1.4rem,3vh,2rem) 0 0;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:clamp(.575rem,.66vw,.69rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

html.locked,
body.locked{overflow:hidden;overscroll-behavior:none;}

@media (max-width:860px), (max-aspect-ratio:1/1){
  /* .panel is a transformed ancestor, so position:fixed would be trapped by
     it — the dialog is pinned to the first screen and the page is locked
     behind it instead */
  .contact{
    height:100vh;
    height:100svh;
    bottom:auto;
    /* centring in a full screen dropped the title into the middle of the
       panel — on a phone it starts under the close button instead */
    align-items:start;
    padding:calc(var(--pad-y) + 3.5rem) var(--pad-x) var(--pad-y);
  }
  /* the dialog fits the screen by giving back padding and card height,
     not by shrinking the type below reading size */
  /* at phone size the rail sits directly behind the dialog and read through
     the 80% veil — on one screen it has to be opaque */
  .contact-veil{background:rgba(2,4,3,.955);}
  .contact-grip{
    display:block;
    position:absolute;
    z-index:2;
    top:calc(var(--pad-y) + .55rem);
    left:50%;
    margin-left:-1.4rem;
    width:2.8rem;
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,.26);
  }
  /* the sheet scrolls itself when it must; the page behind stays put */
  .contact-body{touch-action:pan-y;}
  .contact-body{
    width:100%;
    max-height:100%;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .contact-title{
    font-size:clamp(1.95rem,8.6vw,2.7rem);
    margin-bottom:clamp(1.1rem,3vh,1.8rem);
  }
  .contact .eyebrow{margin-bottom:clamp(.9rem,2.4vh,1.5rem);}
  .handles{gap:.6rem;}
  .handles a{padding:.85rem .9rem .85rem 1.05rem;}
  .hd{font-size:1.05rem;}
  /* the stacked copy button doubled every card's height — keep it inline */
  .copy{
    border-left:1px solid var(--hairline);
    padding:0 .9rem;
    text-align:center;
  }
  .contact-fine{
    margin-top:clamp(1rem,2.6vh,1.5rem);
    font-size:.63rem;
    letter-spacing:.15em;
  }
}