/* Doorman — bone, eucalyptus, deep pine.

   Aero was never dark. Vista's glass was frosted white over a colourful
   desktop, so going light is the authentic move rather than a retreat from it.

   Three rules this file is built on, and each one is a consequence of the
   ground being light rather than a preference:

   - Glass needs colour behind it. Frosted white over a white page has no tonal
     difference to reveal: it costs GPU and shows nothing. So one coloured wash
     sits underneath everything, and the panes frost against that.
   - Depth comes from occlusion, not emission. On dark, glow did the work. On
     light nothing glows, so elevation is layered shadow tinted with the
     surface's own hue, never black, paired with a small scale change.
   - Grain is structural here. Large soft gradients band visibly in 8-bit on a
     light ground, and a low-opacity turbulence overlay is the fix.

   The accent still belongs to what was SHOWN to the user, never to what was
   rejected. That inversion survived the change of hue because it was never
   about the hue. */

/* Registered so the browser can interpolate them. Without this a custom
   property is an opaque string and the colours snap between sections instead
   of blending. */
@property --wash-a{syntax:"<color>";inherits:true;initial-value:#B9D6C4}
@property --wash-b{syntax:"<color>";inherits:true;initial-value:#8FB6A0}
@property --wash-c{syntax:"<color>";inherits:true;initial-value:#EFE7D6}

:root{
  --ground:#F7F4EF;        /* warm bone; never pure white */
  --paper:#FFFFFF;
  --ink:#14231C;           /* deep pine: 14.8:1 on bone */
  --muted:#42544A;         /* 7.6:1 on bone, so body copy is safe */
  --dim:#5C6E64;           /* 5.2:1; labels, still a readable line */
  --accent:#2F6B4F;
  --accent-deep:#1E4A36;
  --accent-soft:#DCE9DF;
  --hairline:rgba(20,35,28,.11);
  --hairline-strong:rgba(20,35,28,.18);

  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.24,1);
  --mono:ui-monospace,'SF Mono','JetBrains Mono','IBM Plex Mono',Menlo,monospace;

  /* Elevation. Six stacked layers, every one tinted toward the pine rather
     than black, because a real shadow is never grey. */
  --lift-1:
    0 1px 1px rgba(20,35,28,.04),
    0 2px 2px rgba(20,35,28,.04),
    0 4px 4px rgba(20,35,28,.03);
  --lift-2:
    0 1px 1px rgba(20,35,28,.045),
    0 2px 2px rgba(20,35,28,.045),
    0 4px 4px rgba(20,35,28,.04),
    0 8px 8px rgba(20,35,28,.035),
    0 16px 16px rgba(20,35,28,.03);
  --lift-3:
    0 1px 1px rgba(20,35,28,.05),
    0 2px 2px rgba(20,35,28,.05),
    0 4px 4px rgba(20,35,28,.045),
    0 8px 8px rgba(20,35,28,.04),
    0 16px 16px rgba(20,35,28,.035),
    0 32px 32px rgba(20,35,28,.03);

  /* Aero's glass was three layers, not one: a colour tint, a blur of what was
     behind, and a fixed specular reflection painted on top. The third is what
     modern glassmorphism forgets, and it is the whole reason Aero read as a
     material rather than as a blurred rectangle. It is rebuilt below as
     .glass-lit.

     0.72 is a floor, not a taste: any pane carrying reading-length text needs
     that much opacity for contrast to hold whatever ends up behind it. Blur
     redistributes luminance, it does not guarantee a minimum. */
  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.78);
  --glass-edge:rgba(255,255,255,.92);
  /* Saturation is the single biggest difference between light glass that looks
     expensive and light glass that looks cloudy. */
  --glass-filter:blur(16px) saturate(180%);
}

/* The specular streak. One fixed highlight running off the top-left corner,
   the way light catches a real pane. Never animated: animating a blur radius
   recompositves every frame and collapses on anything but a flagship. */
.glass-lit{position:relative;isolation:isolate}
.glass-lit::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  border-radius:inherit;
  background:linear-gradient(
    134deg,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.28) 14%,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,0) 100%);
  -webkit-mask-image:linear-gradient(#000,#000);
}

/* Both of these turn the glass off, and both are the user asking for it.
   Apple shipped Liquid Glass tuned for beauty over legibility and had to add
   an escape hatch within months; this is that hatch, up front. */
@media (prefers-reduced-transparency: reduce){
  .glass-lit::after{display:none}
  .nav,.rec,.reply-card,.knock,.card,.window-card,.stage-caption,.scene-caption{
    background:var(--paper) !important;backdrop-filter:none !important;
  }
}
@supports not (backdrop-filter: blur(1px)){
  .nav,.rec,.reply-card,.knock,.card,.window-card,.stage-caption,.scene-caption{
    background:var(--paper);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:'Satoshi',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-family:'Clash Display','Satoshi',system-ui,sans-serif;font-weight:600;margin:0}
em{font-style:normal;color:var(--accent)}
a{color:inherit;text-decoration:none}
::selection{background:rgba(47,107,79,.18);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* A single small-caps mono voice for machine facts: timestamps, reasons,
   figure labels. Two typefaces is a pairing; the third voice is what stops
   this reading as the default Fontshare combination everyone ships. */
.mono,.knock-k,.rec-act,.log-label,.window-timer,.price-k,.eyebrow,.card-n{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------------------
   Small screens do less decorative work.

   Not a device check. `navigator.platform` would miss iPads, high-DPI Windows
   laptops, cheap Android handsets and every Mac Apple has not shipped yet, and
   it would need editing forever. A narrow viewport is a decent proxy for a
   device with less thermal and memory headroom, and it is a capability the
   browser will still answer honestly in five years.

   What goes: the full-screen lamp blur, and the grain's blend mode. Both are
   polish. The lamp's gradients stay, so the atmosphere survives - it is the
   continuous blur over roughly 128vw by 128vh that does not. The grain keeps
   its opacity and loses only the compositing pass that multiply forces.

   This follows the rule the codebase already applies to a failed CDN:
   decoration may degrade, usability never does.
   --------------------------------------------------------------------------- */
@media (max-width: 960px){
  .lamp{filter:none}
  .grain{mix-blend-mode:normal;opacity:.10}
}