/* AVX-01 drafts D + E — BRIGHT BASE ("paper").
   Shared skeleton only: reset, type scale, the glass-on-bright recipe, the
   spacing floor, buttons, reveal. Palette tokens are set per draft in d.css
   and e.css, so D reads as ticket stock and E as chart paper.

   HARD RULE OBSERVED: the ground is a flat colour. There is no ambient layer,
   no aurora, no mesh, no glow, no orb, no pattern, at any opacity. Where glass
   refracts, it refracts REAL CONTENT that is physically behind it — the
   departure board in D, the checklist and logbook in E. */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-400_900.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}

:root{
  --display:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* three line-heights, nothing between them (relayfi rule 1) */
  --lh-d:.86; --lh-h:1.25; --lh-b:1.5;

  /* spacing floor — text never sits on a hairline */
  --padb:clamp(20px,2.4vw,30px);
  --padi:clamp(18px,2vw,28px);
  --gut:clamp(1.6rem,3vw,3.4rem);
  --labelw:6.5rem;

  /* two custom curves, no more (relayfi rule 10) */
  --e:cubic-bezier(.22,1,.36,1);
  --e2:cubic-bezier(.16,1,.3,1);
  /* two duration bands with a dead zone between (relayfi rule 11) */
  --t-fast:.18s; --t-mid:.3s; --t-slow:.9s;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;background:var(--paper);color:var(--ink);
  font:400 clamp(15px,1.05vw,17px)/var(--lh-b) var(--display);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.mono{font-family:var(--mono);font-weight:400}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--acc);color:#fff;
  padding:14px 22px;font:500 .7rem/1 var(--mono);letter-spacing:.16em}
.skip:focus{left:12px;top:12px}
/* the visually-hidden pattern (clip-path inset(50%) is the a11y idiom, not an
   animation — see design-corpus/TECHNIQUES.md) */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── GLASS ON A BRIGHT GROUND ──────────────────────────────────────────────
   Harder than glass on black: white-on-white has no rim, so definition comes
   from a warm hairline that is DARKER than the fill, a genuine cast shadow,
   and shading that pools along the underside. The fill stays translucent so
   the content physically behind it still reads through the blur. */
.glass{
  position:relative;isolation:isolate;
  background:linear-gradient(157deg,
     rgba(255,255,255,.86) 0%,
     rgba(255,255,255,.62) 44%,
     rgba(255,255,255,.50) 78%,
     rgba(255,255,255,.60) 100%);
  backdrop-filter:blur(20px) saturate(148%);
  -webkit-backdrop-filter:blur(20px) saturate(148%);
  border:1px solid var(--glass-line);
  border-radius:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),      /* lit top rim */
    inset 1px 0 0 rgba(255,255,255,.72),      /* lit left edge */
    inset -1px 0 0 rgba(255,255,255,.34),     /* dimmer right edge */
    inset 0 -1px 0 var(--glass-under),        /* shaded underside */
    inset 0 -30px 40px -34px var(--glass-pool),
    0 1px 1px var(--glass-cast1),
    0 22px 48px -28px var(--glass-cast2);     /* the pane sits ABOVE the paper */
}
.glass::before{                                /* specular sweep */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,
     rgba(255,255,255,.62) 0%,
     rgba(255,255,255,.18) 16%,
     rgba(255,255,255,0)   34%,
     rgba(255,255,255,0)   72%,
     rgba(255,255,255,.24) 100%);
}
.glass::after{                                 /* the caught rim */
  content:"";position:absolute;left:8%;right:8%;top:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,1) 42%,rgba(255,255,255,.6),transparent);
}
.glass > *{position:relative;z-index:2}

/* surfaces get a hard edge; objects get a radius (relayfi rule 6) */
.slab{border-radius:0}
.slab::after{left:0;right:0}

/* ── type ─────────────────────────────────────────────────────────────────
   The claim is Archivo 900 uppercase; the turn is IBM Plex Mono 400 at the
   SAME size and leading. Two real faces, one size — no synthetic italic. */
.d1{font-family:var(--display);font-weight:900;line-height:var(--lh-d);letter-spacing:-.038em;
  text-transform:uppercase;font-size:clamp(2.5rem,6.2vw,5.8rem)}
.d2{font-family:var(--display);font-weight:900;line-height:var(--lh-d);letter-spacing:-.03em;
  text-transform:uppercase;font-size:clamp(1.85rem,3.5vw,3.15rem)}
.d3{font-family:var(--display);font-weight:700;line-height:var(--lh-h);letter-spacing:-.015em;
  font-size:clamp(1.1rem,1.65vw,1.45rem)}
.turn{font-family:var(--mono);font-weight:400;text-transform:none;letter-spacing:-.03em;
  color:var(--acc-d);font-size:.92em}

.lbl{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.19em;
  line-height:var(--lh-h);text-transform:uppercase;color:var(--ink3)}
.lbl-acc{color:var(--acc)}
.body{color:var(--ink2);line-height:var(--lh-b);max-width:62ch}

/* ── objects ──────────────────────────────────────────────────────────────*/
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;border-radius:9999px;
  padding:1.05rem 2.1rem;border:1px solid var(--rule);
  font:500 .72rem/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px var(--glass-cast1);
  transition:opacity var(--t-mid) var(--e),background var(--t-mid) var(--e),color var(--t-mid) var(--e);
}
/* hover is opacity + an ink wash. Nothing lifts, nothing scales (relayfi 13) */
.btn:hover{opacity:.86;background:var(--wash)}
.btn-acc{background:var(--acc);color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 12px 26px -14px var(--acc-cast)}
.btn-acc:hover{opacity:.86;background:var(--acc-d)}

.dot{width:6px;height:6px;border-radius:9999px;background:var(--acc);flex:none}

/* ── the two-layer roll, lifted from the cloudnexis registry rows ──────────
   Layer a rolls out under a clip, layer b rolls in. Built by JS from
   data-alt so there is one implementation. Draft D uses it; E does not. */
.rollx{display:grid;min-width:0}
.rollx .swap{grid-area:1/1;display:block;
  transition:clip-path .55s var(--e),transform .55s var(--e),color .45s var(--e)}
.rollx .swap.a{clip-path:inset(0)}
.rollx .swap.b{clip-path:inset(100% 0 0 0);transform:translateY(.42em);color:var(--acc)}
.rollx:hover .swap.a,.rollrow:hover .rollx .swap.a{clip-path:inset(0 0 100% 0);transform:translateY(-.42em)}
.rollx:hover .swap.b,.rollrow:hover .rollx .swap.b{clip-path:inset(0);transform:none}

/* ── reveal: rise, do not fade (TECHNIQUES.md) — driven by js/rev.js ──────*/
[data-rev]{opacity:0;transform:translateY(16px);transition:opacity .8s var(--e2),transform .8s var(--e2)}
[data-rev].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rev]{opacity:1;transform:none}}