/* ============================================================================
   EdEdge Workspace · direction: The well-kept board (dense-tiles)
   Black ground, off-white ink, one crimson. Two faces: League Spartan, Figtree.
   The product's own cream appears only inside interface fragments and pictures.
   Rules kept here: no monospace, no rules or outlined boxes, no shadows, no
   gradients, no index numbers, no underline labels, no uppercase furniture.
   ========================================================================= */

:root{
  /* palette (the drawn sheet: black and crimson) */
  --bg:#0a0a0a;
  --surface:#151515;
  --surface-2:#222222;
  --surface-3:#2f2f2f;
  --ink:#efefef;
  --muted:#9a9a9a;
  --accent:#b11226;
  --on-accent:#ffffff;
  --paper:#efefef;
  --paper-ink:#0a0a0a;
  --paper-2:#dedede;
  /* the product's own material, used only inside interface fragments */
  --ui-paper:#f6f1e6;
  --ui-ink:#1f1d18;
  --ui-soft:#6d6656;
  --ui-red:#a8331e;
  --ui-green:#246846;

  /* one grid, one pair of tight margins, one radius */
  --gap:8px;
  --pad:clamp(8px,1vw,12px);
  --r:10px;

  /* five type steps plus the name band */
  --step-small:clamp(.9375rem,.9rem + .15vw,1rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-name:clamp(44px,12vw,176px);

  /* motion tokens */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms;
  --t-hover:180ms;
  --t-ui:240ms;
  --t-reveal:800ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--step-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--on-accent)}

.h2{
  font-family:"League Spartan",system-ui,sans-serif;
  font-weight:700;
  font-size:var(--step-head);
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--ink);
  text-wrap:balance;
}
.lede{font-size:var(--step-lead);line-height:1.3;color:var(--ink);max-width:38ch}
.claim{
  font-family:"League Spartan",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(24px,2.4vw,36px);
  line-height:.95;
  letter-spacing:-.035em;
  color:var(--ink);
}
.support{font-size:var(--step-body);color:var(--ink);max-width:44ch}
.bn{font-family:"Hind Siliguri",system-ui,sans-serif;line-height:1.65;letter-spacing:0;font-size:1.02em}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── buttons: one shape, flat, fully round, one fill ────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;
  border-radius:999px;
  font-family:"Figtree",system-ui,sans-serif;font-weight:600;font-size:16px;
  background:var(--accent);color:var(--on-accent);
  transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn--quiet{background:transparent;color:var(--ink);padding:0 2px;min-height:44px}
.btn--quiet:hover{color:var(--accent)}
.btn--line{background:transparent;color:var(--ink);min-height:44px;padding:0 16px;border-radius:999px;background-color:var(--surface-3)}
.btn--line:hover{background-color:var(--surface-2)}
.btn--onAccent{background:var(--on-accent);color:var(--accent)}
.btn--onAccent:hover{background:#ffffff}
.btn--small{min-height:44px;padding:0 18px;font-size:15px}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#c2162c}
  .btn--onAccent:hover{background:#ffffff}
}
.link{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.2em;text-decoration-color:var(--muted)}
.link:hover{text-decoration-color:var(--ink)}

/* ── top bar: plain furniture, no chrome ────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(var(--pad) * 1.6) var(--pad);
}
.mark{display:flex;align-items:center;gap:10px;min-height:44px}
.mark__ew{width:44px;height:30px}
.mark__name{font-family:"League Spartan",system-ui,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.03em}

/* ── the board ──────────────────────────────────────────────────────────── */
.board{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
  padding:0 var(--pad) var(--pad);
  min-height:calc(100svh - 72px);
  grid-template-rows:auto auto minmax(0,1fr);
}
.board__name{
  grid-column:1/-1;
  position:relative;overflow:hidden;
  height:calc(var(--step-name) * 1.12);
  background:var(--surface);
  border-radius:var(--r);
}
.board__name span{
  position:absolute;left:50%;top:0;
  transform:translateX(-50%);
  display:block;white-space:nowrap;
  font-family:"League Spartan",system-ui,sans-serif;font-weight:700;
  font-size:var(--step-name);line-height:1.12;letter-spacing:-.045em;
  color:var(--ink);
}
.board__index{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.tile{background:var(--surface);border-radius:var(--r);overflow:hidden;min-width:0}
.tile--link{
  display:flex;align-items:flex-start;min-height:64px;padding:14px 16px;
  font-size:16px;font-weight:600;color:var(--ink);
  transition:background-color var(--t-hover) ease,color var(--t-hover) ease;
}
.tile--link::after{content:"";margin-left:auto;align-self:center;width:8px;height:8px;border-radius:999px;background:var(--surface-3);transition:background-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){
  .tile--link:hover{background:var(--surface-2)}
  .tile--link:hover::after{background:var(--accent)}
}
.board__cols{grid-column:1/-1;display:grid;grid-template-columns:2fr 8fr 2fr;gap:var(--gap);min-height:0}
.rail{display:grid;gap:var(--gap);min-height:0}
.rail--left{grid-template-rows:3fr 2fr}
.rail--right{grid-template-rows:repeat(5,minmax(0,1fr))}
.core{display:grid;grid-template-rows:2fr 1fr;gap:var(--gap);min-height:0}
.tile--pic,.tile--hero{position:relative;min-height:0;background:var(--surface-2)}
.tile--pic{background:var(--ui-paper)}
.tile--pic img{width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.tile--hero img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.tile--hero{background:var(--surface-2)}
.clip{width:100%;height:100%;aspect-ratio:1920/834;overflow:hidden;background:var(--surface-2)}
.clip video{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.mosaic__pic--full{background:var(--surface);display:flex;align-items:center;justify-content:center}
.mosaic__pic.mosaic__pic--full img{object-fit:contain;object-position:50% 50%;width:100%;height:auto;max-height:100%}
.tile--statement{display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:18px 22px 20px}
.tile--facts{padding:14px 16px;overflow:visible}
.tile--facts li{font-size:var(--step-small);line-height:1.35;padding-block:5px;color:var(--ink);display:flex;gap:8px}
.tile--facts li::before{content:"";width:6px;height:6px;margin-top:.5em;flex:none;border-radius:999px;background:var(--accent)}
.tile--fact{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 16px}
.tile--fact strong{font-family:"League Spartan",system-ui,sans-serif;font-weight:700;font-size:clamp(17px,1.5vw,22px);line-height:1;letter-spacing:-.03em}
.tile--fact span{font-size:15px;line-height:1.3;color:var(--muted)}
.tile--go{background:var(--accent);color:var(--on-accent);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:12px 16px}
.tile--go span{font-size:15px;line-height:1.3}
.tile--go .btn{min-height:44px;align-self:flex-start}

/* ── take a payment ─────────────────────────────────────────────────────── */
.live{padding:clamp(64px,12vh,132px) var(--pad)}
.live__inner{max-width:760px;margin-inline:auto}
.live .live__head{max-width:760px;margin:0 auto 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.panel{
  display:grid;grid-template-columns:62fr 38fr;
  background:var(--surface);border-radius:var(--r);overflow:hidden;
  max-width:760px;margin-inline:auto;
}
.controls{display:flex;flex-direction:column;padding:6px;gap:2px}
.ctl{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;
  min-height:44px;padding:6px 12px;border-radius:8px;background:var(--surface-2);
}
.ctl label,.ctl__label,.ctl > span:first-child{font-size:14px;color:var(--ink)}
.ctl__val{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.ctl--value b{font-size:14px;color:var(--ink);font-weight:600}
.ctl--value span{color:var(--muted)}
.ctl--switch{cursor:pointer}
.ctl--switch input{position:absolute;opacity:0;width:44px;height:26px;right:10px;margin:0;cursor:pointer}
.switch{width:44px;height:26px;border-radius:999px;background:var(--surface-3);position:relative;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:999px;background:var(--ink);transition:transform var(--t-hover) var(--ease-out)}
.ctl--switch input:checked ~ .switch{background:var(--accent)}
.ctl--switch input:checked ~ .switch::after{transform:translateX(18px)}
.ctl--switch input:focus-visible ~ .switch{outline:2px solid var(--ink);outline-offset:2px}
.seg{display:flex;gap:2px;background:var(--surface-3);border-radius:999px;padding:2px}
.seg__o{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 10px;border-radius:999px;font-size:13px;cursor:pointer;color:var(--ink)}
.seg__o input{position:absolute;opacity:0;pointer-events:none}
.seg__o:has(input:checked){background:var(--ink);color:var(--bg)}
.ctl input[type="range"]{grid-column:1/-1;width:100%;margin:2px 0 0;accent-color:var(--accent);height:22px}
.ctl--action{background:transparent;padding-inline:0}
.ctl--action .btn{width:100%}

/* the statement fragment: the product's own surface and conventions */
[data-ui]{font-family:"Figtree",system-ui,sans-serif;color:var(--ui-ink);background:var(--ui-paper);border-radius:8px}
[data-ui].statement{display:flex;flex-direction:column;padding:18px 18px 14px;gap:10px;border-radius:0}
[data-ui] .statement__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;font-weight:600}
[data-ui] .statement__due{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
[data-ui] .statement__who{font-size:13px;color:var(--ui-soft)}
[data-ui] .statement__rows{display:flex;flex-direction:column;gap:1px}
[data-ui] .statement__rows li{
  display:grid;grid-template-columns:1fr auto 84px;gap:10px;align-items:baseline;
  padding:5px 6px;border-radius:4px;font-size:13px;background:transparent;
  transition:background-color var(--t-ui) ease,color var(--t-ui) ease;
}
[data-ui] .statement__rows li span:nth-child(2){color:var(--ui-soft);font-size:12px;text-align:right}
[data-ui] .statement__rows li em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
[data-ui] .statement__rows li[data-paid]{background:#e4ecdf;color:var(--ui-green)}
[data-ui] .statement__rows li[data-paid] em{color:var(--ui-green)}
[data-ui] .statement__rows li.statement__done{color:var(--ui-green)}
[data-ui] .statement__rows li[data-latefee][hidden]{display:none}
[data-ui] .statement__foot{
  display:flex;justify-content:space-between;gap:12px;font-size:13px;
  padding-top:8px;border-top:1px solid #ded6c4;
}
[data-ui] .statement__foot b{font-variant-numeric:tabular-nums}
[data-ui] .statement__ledger{
  display:flex;justify-content:space-between;gap:12px;font-size:13px;
  background:#ebe4d4;border-radius:6px;padding:8px 10px;
}
[data-ui] .statement__ledger b{font-weight:600}
[data-ui] .statement__rev{margin:0;font-size:13px;color:var(--ui-red);background:#f6e6e1;border-radius:6px;padding:8px 10px}
.live__foot{max-width:760px;margin:16px auto 0;font-size:15px;color:var(--muted)}

/* ── one payment, four fields ───────────────────────────────────────────── */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.field{
  position:relative;display:flex;flex-direction:column;
  min-height:84svh;padding:28px 22px 32px;
}
.field--1{background:#101010}
.field--2{background:var(--surface-2)}
.field--3{background:#3a3a3a}
.field--4{background:#050505}
.strip__h{margin-bottom:auto}
.strip{overflow:clip}
.clause{margin-top:auto;font-size:clamp(22px,2vw,32px);line-height:1.08;font-weight:600;color:var(--ink);max-width:14ch}
[data-ui].card{
  position:absolute;top:38%;left:50%;transform:translateX(-50%);
  width:260px;padding:14px;display:flex;flex-direction:column;gap:4px;
  border-radius:8px;transition:transform var(--t-ui) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.field:hover [data-ui].card{transform:translateX(-50%) translateY(-6px)}}
/* the card is activated by SCROLL, not hover: the card keeps its -50% centring in
   `transform`, and the motion rides on the separate `translate` property, so a touch
   screen (which can never hover) still gets the sequence. */
.js .field [data-ui].card{opacity:.45;translate:0 22px;
  transition:opacity 600ms var(--ease-out),translate 800ms var(--ease-out)}
.js .field.is-current [data-ui].card{opacity:1;translate:0 0}
@media (hover:hover) and (pointer:fine){.field:hover [data-ui].card{translate:0 -6px}}
[data-ui] .card__k{font-size:12px;color:var(--ui-soft);max-width:100%;overflow-wrap:anywhere}
[data-ui] .card__t{font-size:15px;font-weight:600;max-width:100%;overflow-wrap:anywhere}
[data-ui] .card__m{font-family:"League Spartan",system-ui,sans-serif;font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;max-width:100%;overflow-wrap:anywhere}
[data-ui] .card__r{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding-top:8px;border-top:1px solid #ded6c4}
[data-ui] .card__r b{font-weight:600;color:var(--ui-green)}

/* ── the numbers ────────────────────────────────────────────────────────── */
.mosaic{padding:clamp(64px,10vh,120px) var(--pad)}
.mosaic__h{max-width:22ch;margin-bottom:24px}
.mosaic__grid{
  display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;
  gap:0;border-radius:var(--r);overflow:hidden;
  height:min(66vw,720px);
}
.mosaic__pic{grid-row:1/span 2;background:var(--surface-2);min-height:0}
.mosaic__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.fig{display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:28px}
.fig--a{background:var(--paper);color:var(--paper-ink)}
.fig--b{background:var(--surface-2);color:var(--ink)}
.fig__n{
  font-family:"League Spartan",system-ui,sans-serif;font-weight:700;
  font-size:clamp(56px,5.6vw,96px);line-height:.85;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.fig__c{font-size:17px;line-height:1.35;max-width:22ch}

/* ── the gate ───────────────────────────────────────────────────────────── */
.gate{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:4fr 8fr;gap:var(--gap);
  min-height:100svh;padding:0 var(--pad);background:#050505;
  align-items:start;
}
.gate__copy{padding-top:clamp(64px,12vh,120px);padding-bottom:64px;display:flex;flex-direction:column;gap:20px}
.gate__stat{font-size:clamp(20px,1.9vw,28px);line-height:1.1;font-weight:600;letter-spacing:-.015em;color:var(--ink);max-width:20ch}
.trio{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.trio li{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline}
.trio b{font-family:"League Spartan",system-ui,sans-serif;font-weight:700;font-size:26px;line-height:1;letter-spacing:-.03em}
.trio span{font-size:15px;line-height:1.35;color:var(--muted)}
.gate__card{display:flex;justify-content:center;height:100%;min-height:0}
[data-ui].admit{
  width:min(56vw,720px);aspect-ratio:5/7;
  transform:rotate(-1.5deg) translateY(14vh);
  padding:34px 34px 30px;display:flex;flex-direction:column;gap:12px;
  border-radius:2px;flex:none;
}
[data-ui] .admit__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}
[data-ui] .admit__k{color:var(--ui-soft)}
[data-ui] .admit__pass{color:var(--ui-green);font-weight:600}
[data-ui] .admit__exam{font-family:"League Spartan",system-ui,sans-serif;font-weight:700;font-size:clamp(22px,2vw,30px);line-height:1;letter-spacing:-.03em}
[data-ui] .admit__batch{font-size:14px;line-height:1.4;color:var(--ui-soft)}
[data-ui] .admit__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 0;border-top:1px solid #ded6c4;border-bottom:1px solid #ded6c4}
[data-ui] .admit__grid span{display:block;font-size:12px;color:var(--ui-soft)}
[data-ui] .admit__grid b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
[data-ui] .admit__qr{width:132px;height:132px;margin-top:4px;background:#fff;padding:6px}
[data-ui] .admit__foot{font-size:12px;line-height:1.4;color:var(--ui-soft);max-width:30ch}

/* ── the marquee: the one loud move ─────────────────────────────────────── */
.marquee{overflow:hidden;background:var(--bg);padding-block:clamp(24px,4vh,48px)}
.marquee__track{
  display:flex;align-items:center;gap:.35em;width:max-content;
  animation:slide 34s linear infinite;
  will-change:transform;
}
.marquee__track span{
  font-family:"League Spartan",system-ui,sans-serif;font-weight:700;
  font-size:clamp(40px,9vw,140px);line-height:.9;letter-spacing:-.04em;
  color:var(--ink);white-space:nowrap;
}
.marquee__track i{width:.22em;height:.22em;border-radius:999px;background:var(--accent);flex:none;font-size:clamp(40px,9vw,140px)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ── questions: a band per question, all answers open ───────────────────── */
.questions{background:var(--paper);color:var(--paper-ink)}
.band{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap);padding:clamp(28px,4vh,56px) var(--pad);align-items:start}
.band--head{background:var(--accent);color:var(--on-accent);min-height:40svh;display:flex;align-items:flex-end;padding-block:clamp(32px,5vh,56px)}
.q__h{font-family:"League Spartan",system-ui,sans-serif;font-weight:700;font-size:clamp(44px,7vw,110px);line-height:.86;letter-spacing:-.045em}
.band--a{background:var(--paper)}
.band--b{background:var(--paper-2)}
.q__q{font-family:"League Spartan",system-ui,sans-serif;font-weight:700;font-size:clamp(22px,2.2vw,32px);line-height:1.02;letter-spacing:-.03em;max-width:20ch}
.q__a{font-size:var(--step-body);line-height:1.5;max-width:46ch}

/* ── close ──────────────────────────────────────────────────────────────── */
.close{
  display:grid;grid-template-columns:2fr 8fr 2fr;gap:var(--gap);
  padding:var(--pad) 0;overflow:hidden;
}
.close__flank{border-radius:0;background:var(--surface-2);overflow:hidden;min-height:430px}
.close__flank--pic{background:var(--ui-paper)}
.close__flank--pic img{width:100%;height:100%;object-fit:contain;padding:28px}
.close__flank--field{background:var(--surface);display:flex;align-items:flex-end;padding:20px}
.close__flank--field p{font-family:"League Spartan",system-ui,sans-serif;font-weight:700;font-size:22px;line-height:1;letter-spacing:-.03em;color:var(--muted)}
.close__tile{
  background:var(--accent);color:var(--on-accent);
  border-radius:var(--r);padding:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:430px;
}
.close__h{font-family:"League Spartan",system-ui,sans-serif;font-weight:700;font-size:clamp(28px,3.2vw,44px);line-height:.92;letter-spacing:-.04em}
.close__p{font-size:var(--step-body);line-height:1.45;max-width:48ch}
.close__note{font-size:15px;opacity:.9}
.bn--note{font-size:1em;opacity:.9}

/* ── footer: the mark, built large ──────────────────────────────────────── */
.foot{background:var(--paper);color:var(--paper-ink);padding:clamp(40px,7vh,88px) var(--pad) 28px}
/* the mark: the same EW monogram as the masthead, at footer scale, aspect preserved */
.foot__mark{height:auto}
.foot__ew{width:clamp(130px,18vh,210px);height:auto;display:block;color:var(--paper-ink)}
.foot__mark{display:flex;align-items:flex-end;gap:4px;height:clamp(120px,26vh,260px)}
.foot__block{display:block;background:var(--paper-ink);border-radius:2px}
.foot__block svg{display:block;width:100%;height:100%}
.foot__block path{fill:var(--paper)}
.foot__block--e{width:clamp(90px,20vh,220px);height:100%}
.foot__block--w{width:clamp(140px,31vh,330px);height:84%}
.foot__block--e svg,.foot__block--w svg{width:100%;height:100%}
.foot__name{font-family:"League Spartan",system-ui,sans-serif;font-weight:700;font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;margin-top:16px}
.foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(28px,4vh,48px)}
.foot__cols h2{font-size:15px;font-weight:600;margin-bottom:6px}
.foot__cols li a{display:inline-flex;align-items:center;min-height:36px;font-size:15px;color:#3a3a3a}
.foot__cols li a:hover{color:var(--paper-ink)}
.foot__contact{display:flex;flex-wrap:wrap;gap:10px 40px;margin-top:24px;font-size:15px}
.foot__contact div{display:flex;gap:10px}
.foot__contact dt{color:#5c5c5c}
.foot__contact dd{margin:0;font-weight:600}
.foot__end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:32px;font-size:15px}

/* ── focus, skip ────────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.questions :focus-visible,.foot :focus-visible{outline-color:var(--paper-ink)}
.close :focus-visible{outline-color:var(--on-accent)}
.skip{position:absolute;left:8px;top:-80px;z-index:50;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:0 0 var(--r) var(--r);font-size:16px}
.skip:focus{top:0}

/* ── motion: entrances, choreographed per section ───────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .js [data-rise]{
    opacity:0;transform:translateY(18px);
    animation:rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay:calc(var(--i,0) * 90ms + 120ms);
  }
  .js .board__name span{
    animation:namein 1100ms var(--ease-out) both;
    transform-origin:50% 50%;
  }
  .js .board__name{animation:bandin 900ms var(--ease-soft) both}
  .js [data-reveal]{opacity:0;transform:translateY(24px);
    transition:opacity var(--t-reveal) var(--ease-out),transform 900ms var(--ease-out)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js .tile--hero img{transform:scale(1.06);transition:transform 1400ms var(--ease-soft)}
  .js .tile--hero.is-in img{transform:none}
  .js .mosaic__pic img{transition:transform 1600ms var(--ease-soft)}
  .js .mosaic__pic.is-in img{transform:none}
  .js .mosaic__pic img{transform:scale(1.05)}
}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes bandin{from{opacity:0}to{opacity:1}}
@keyframes namein{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .js [data-rise],.js [data-reveal]{opacity:1;transform:none}
  .js .board__name span,.js .board__name{animation:none}
}

/* ── responsive: the phone is its own board ─────────────────────────────── */
@media (max-width:1024px){
  .panel{grid-template-columns:1fr;max-width:560px}
  .live__inner{max-width:none}
  .mosaic__grid{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto}
  .mosaic__pic{grid-row:auto;aspect-ratio:4/3}
  .fig--a,.fig--b{min-height:180px}
  .gate{grid-template-columns:1fr;min-height:0;padding-top:0}
  .gate__card{min-height:520px}
  [data-ui].admit{width:min(86vw,560px);transform:rotate(-1.2deg) translateY(6vh)}
  .close{grid-template-columns:1fr;padding-inline:var(--pad)}
  .close__flank{min-height:200px}
  .close__flank--field{min-height:120px}
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--gap)}
}
@media (max-width:780px){
  .board{grid-template-rows:auto auto auto auto;min-height:0;padding-bottom:calc(var(--gap) * 2)}
  .board__index{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tile--link{min-height:48px;padding:10px 10px;font-size:14px;justify-content:center;text-align:center}
  .tile--link::after{display:none}
  .board__cols{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .core{grid-column:1/-1;grid-row:1;grid-template-rows:auto auto}
  .core .tile--hero{aspect-ratio:4/3}
  .rail--left{grid-column:1/-1;grid-row:2;grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .rail--left .tile--pic{aspect-ratio:3/4}
  .rail--right{grid-column:1/-1;grid-row:3;grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .tile--statement{padding:16px}
  .live{padding-block:56px}
  .strip{grid-template-columns:1fr}
  .field{min-height:64svh;padding:24px 20px}
  .clause{font-size:24px}
  .band{grid-template-columns:1fr;gap:10px;padding:28px 20px}
  .band--head{min-height:30svh}
  .close__tile{min-height:0}
  .close__flank--pic{min-height:180px}
  .mark__name{font-size:17px}
  .mosaic{padding-block:56px}
  .gate__copy{padding-top:56px}
}
@media (max-width:420px){
  .tile--link{font-size:13px;padding:10px 6px}
  .foot__mark{height:120px}
}