/* ============================================================
   SERVED SOCIAL — DESIGN SYSTEM  ("The Pass")
   ------------------------------------------------------------
   The logo is a butler carrying something made properly to your
   table. So the interface is a service pass: a dark room, a warm
   linen counter where the work is set down, and one claret accent
   taken straight out of the mark on the tray.

   No art deco. No sunburst. No rubber hose. Craft comes from
   typographic discipline and a machine-voice mono, not ornament.

   Components only. The tokens this sheet consumes live in
   served-tokens.css, which must be loaded first.
   ============================================================ */

/* Tokens live in served-tokens.css and MUST be loaded before this sheet. */

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* the room: one soft light source, top-centre. No texture, no sunburst. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(80% 55% at 50% -12%, rgba(247,244,239,.055), transparent 62%),
    radial-gradient(50% 40% at 88% 8%, rgba(181,45,59,.07), transparent 70%);
}
img,video{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0; padding:0}
:focus-visible{outline:2px solid var(--claret-lift); outline-offset:3px; border-radius:var(--r-xs)}
::selection{background:var(--claret); color:#fff}

.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:1}
.wrap--narrow{max-width:860px}
section{position:relative; z-index:1}

.skip{
  position:absolute; left:var(--s4); top:-72px; z-index:200;
  background:var(--claret); color:#fff; padding:var(--s3) var(--s5);
  border-radius:var(--r-m); font-weight:600; text-decoration:none;
  transition:top var(--dur) var(--ease-out);
}
.skip:focus{top:var(--s4)}

/* ============================================================
   TYPE
   ============================================================ */
.display-xl,.display-l,h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em}
h1{font-size:var(--t-display-xl); line-height:.94; letter-spacing:-.035em; text-transform:uppercase}
h2{font-size:var(--t-h2); line-height:1.02; letter-spacing:-.025em; text-transform:uppercase}
h3{font-size:var(--t-h3); line-height:1.2; letter-spacing:-.01em; font-family:var(--font-body); font-weight:600}
.lead{font-size:var(--t-lead); line-height:1.55; color:var(--text-muted); max-width:56ch}
.small{font-size:var(--t-small); line-height:1.55; color:var(--text-muted)}
.muted{color:var(--text-muted)}

/* the machine voice. This is where "a tool that makes things" lives. */
.label{
  font-family:var(--font-mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  color:var(--text-muted); font-variant-numeric:tabular-nums;
}
.label--claret{color:var(--claret-lift)}
.label--ink{color:var(--ink-500)}
.label--ok{color:var(--ok-lift)}

/* ============================================================
   SECTION FURNITURE
   ============================================================ */
.sec{padding-block:clamp(72px,10vw,140px)}
.sec--tight{padding-block:clamp(48px,6vw,80px)}
.sec__head{max-width:62ch; margin-bottom:var(--s8)}
.sec__head h2{margin-bottom:var(--s4)}
.eyebrow{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5)}
.eyebrow svg{flex:none; overflow:visible}
.rule{stroke:var(--claret-lift); stroke-width:1.5; fill:none}

/* the counter — the linen band the work is set down on */
.band-linen{background:var(--linen-100); color:var(--ink-900)}
.band-linen .lead,.band-linen .small,.band-linen .muted{color:var(--ink-700)}
.band-linen h2,.band-linen h3{color:var(--ink-900)}
.band-linen .label{color:var(--ink-500)}
.band-linen .rule{stroke:var(--claret)}
.band-linen .eyebrow .label{color:var(--claret)}
.band-linen a{color:var(--claret)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--font-body); font-size:var(--t-small); font-weight:600;
  letter-spacing:-.005em; text-decoration:none; cursor:pointer;
  min-height:44px; padding:0 var(--s5); border-radius:var(--r-m);
  border:1px solid transparent; background:none; color:inherit;
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
             transform 120ms var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--claret); color:#fff; box-shadow:var(--lift-1)}
.btn--primary:hover{background:#C3323F; box-shadow:var(--lift-2)}
.btn--primary:active{background:var(--claret-deep)}
.btn--ghost{border-color:var(--hairline-strong); color:var(--text)}
.btn--ghost:hover{border-color:var(--linen-400); background:rgba(247,244,239,.05)}
.band-linen .btn--ghost{border-color:var(--linen-400); color:var(--ink-900)}
.band-linen .btn--ghost:hover{border-color:var(--ink-500); background:var(--linen-200)}
.btn--onlinen{background:var(--ink-900); color:var(--linen-100)}
.btn--onlinen:hover{background:#25262E}
.btn--quiet{color:var(--text-muted)}
.btn--quiet:hover{color:var(--text); background:rgba(247,244,239,.05)}
.btn--lg{min-height:52px; padding:0 var(--s6); font-size:1rem}
.btn--sm{min-height:38px; padding:0 var(--s4); font-size:.8rem}
.btn--full{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed}
.btn__arrow{transition:transform var(--dur) var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* ============================================================
   NAV  (marketing shell)
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(15,16,20,.78); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.nav__in{display:flex; align-items:center; gap:var(--s5); min-height:76px}
/* the lockup is short and wide with a tall butler — below ~34px the wordmark
   stops being readable, so this is the floor, not a preference */
.nav__logo{display:flex; align-items:center; flex:none}
.nav__logo img{height:34px; width:auto}
.nav__links{display:flex; gap:var(--s6); margin-left:auto; align-items:center}
/* min-height, not padding: the link is a tap target and has to clear 44px
   even though its text is 14px */
.nav__links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-small); font-weight:500; color:var(--text-muted);
  text-decoration:none; position:relative;
  transition:color var(--dur) var(--ease-out);
}
/* sits just under the text, not at the foot of the 44px target box */
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:9px; height:1px;
  background:var(--claret-lift); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease-out);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{margin-left:var(--s5); flex:none}
.nav__burger{
  display:none; margin-left:auto; width:44px; height:44px; flex:none;
  align-items:center; justify-content:center; border-radius:var(--r-m);
  border:1px solid var(--hairline-strong); color:var(--text);
}
.nav__burger:hover{border-color:var(--linen-400)}
.nav__burger span{display:block; width:18px; height:1.5px; background:currentColor; position:relative}
.nav__burger span::before,.nav__burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:currentColor;
  transition:transform var(--dur) var(--ease-out), opacity 120ms linear;
}
.nav__burger span::before{top:-6px}
.nav__burger span::after{top:6px}
.nav__burger[aria-expanded="true"] span{background:transparent}
.nav__burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.nav__panel{display:none}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:inline-flex}
  .nav__panel{
    display:block; overflow:hidden; max-height:0;
    border-top:1px solid transparent;
    transition:max-height 320ms var(--ease-out), border-color var(--dur) linear;
  }
  .nav__panel[data-open="true"]{max-height:min(70vh,520px); border-top-color:var(--hairline)}
  .nav__panel ul{list-style:none; padding:var(--s3) 0 var(--s5); display:flex; flex-direction:column}
  .nav__panel a{
    display:flex; align-items:center; min-height:52px; text-decoration:none;
    color:var(--text); font-size:1rem; font-weight:500;
    border-bottom:1px solid var(--hairline);
  }
  .nav__panel .btn{margin-top:var(--s4)}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:clamp(40px,6vw,80px); padding-bottom:clamp(56px,8vw,110px)}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,80px); align-items:center}
@media (max-width:980px){ .hero__grid{grid-template-columns:1fr} }
.hero h1{margin-bottom:var(--s5); max-width:14ch}
.hero h1 .accent{color:var(--claret-lift)}
.hero__lead{font-size:clamp(1.1rem,1.5vw,1.3rem); line-height:1.5; color:var(--text-muted); max-width:50ch; margin-bottom:var(--s7)}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s7)}
.hero__spec{border-top:1px solid var(--hairline); padding-top:var(--s4)}
.hero__spec ul{list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5)}
.hero__spec li{display:flex; align-items:center; gap:var(--s2)}
.hero__spec li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--claret-lift); flex:none}

/* a two-column ledger row where the left cell is a fixed mono key */
.keyed li{align-items:baseline}
.keyed .k{flex:none; width:68px}

/* ============================================================
   PLATES (content cards on linen)
   ============================================================ */
.plates{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.plates--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .plates,.plates--2{grid-template-columns:1fr} }
.plate{
  background:var(--linen-000); border:1px solid var(--linen-300); border-radius:var(--r-l);
  padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); color:var(--ink-900);
  box-shadow:0 1px 1px rgba(18,18,22,.04), 0 8px 20px -8px rgba(18,18,22,.10);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.plate:hover{transform:translateY(-3px); box-shadow:0 2px 3px rgba(18,18,22,.06), 0 20px 40px -14px rgba(18,18,22,.20)}
.plate__num{font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.14em; color:var(--claret)}
.plate p{color:var(--ink-700); font-size:.95rem}
.plate__chip{
  margin-top:auto; align-self:flex-start; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-700);
  background:var(--linen-200); border:1px solid var(--linen-300);
  border-radius:var(--r-xs); padding:var(--s2) var(--s3);
}
.plate--wide{grid-column:1/-1; flex-direction:row; align-items:center; gap:var(--s6); flex-wrap:wrap}
.plate--wide .plate__body{flex:1 1 340px}

/* ============================================================
   LEDGER (does / does not)
   ============================================================ */
.ledger{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--hairline); border-radius:var(--r-l); overflow:hidden; background:var(--slate-850)}
@media (max-width:760px){ .ledger{grid-template-columns:1fr} }
.ledger__col{padding:var(--s6)}
.ledger__col+.ledger__col{border-left:1px solid var(--hairline)}
@media (max-width:760px){ .ledger__col+.ledger__col{border-left:0; border-top:1px solid var(--hairline)} }
.ledger__col h3{margin-bottom:var(--s5); font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; font-weight:600}
.ledger__col--do h3{color:var(--ok-lift)}
.ledger__col--dont h3{color:var(--claret-lift)}
.ledger ul{list-style:none; display:flex; flex-direction:column}
.ledger li{display:flex; gap:var(--s3); padding-block:var(--s3); font-size:.95rem; line-height:1.5}
.ledger li+li{border-top:1px solid rgba(247,244,239,.06)}
.ledger li svg{flex:none; margin-top:4px}
.ledger em{font-style:normal; color:var(--text)}

/* ============================================================
   SHELF (draggable output rail)
   ============================================================ */
.shelf__viewport{overflow:hidden; cursor:grab; margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter)}
.shelf__viewport:active{cursor:grabbing}
.shelf__track{display:flex; gap:var(--s5); width:max-content; will-change:transform}
.spec{width:clamp(230px,26vw,310px); flex:none}
.spec__frame{
  border-radius:var(--r-m); overflow:hidden; background:var(--slate-700);
  box-shadow:var(--lift-2); border:1px solid var(--hairline); position:relative;
}
.spec__frame img{width:100%; height:auto; pointer-events:none; -webkit-user-drag:none}
.spec__meta{margin-top:var(--s4); display:flex; flex-direction:column; gap:var(--s2)}
.spec__meta .name{font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:-.01em; font-size:1.05rem}
.spec__meta .dna{font-size:.82rem; color:var(--text-muted); line-height:1.45}
.band-linen .spec__meta .dna{color:var(--ink-700)}
.caveat{margin-top:var(--s6); padding:var(--s4) var(--s5); border:1px dashed var(--hairline-strong); border-radius:var(--r-m); display:flex; gap:var(--s3); align-items:flex-start}
.band-linen .caveat{border-color:var(--linen-400)}
.caveat svg{flex:none; margin-top:2px}

/* ============================================================
   THE PILE (matter.js hero)
   ============================================================ */
.pile{position:relative; border-radius:var(--r-xl); background:linear-gradient(180deg,var(--slate-850),var(--slate-900)); border:1px solid var(--hairline); box-shadow:var(--lift-3),var(--edge); overflow:hidden}
.pile__bar{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s4) var(--s5); border-bottom:1px solid var(--hairline)}
.pile canvas{display:block; width:100%; height:auto; touch-action:pan-y}
.pile__foot{padding:var(--s3) var(--s5) var(--s4); display:flex; justify-content:space-between; gap:var(--s4); border-top:1px solid var(--hairline)}
.dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ok-lift); margin-right:var(--s2); vertical-align:middle}

/* ============================================================
   FORMAT FLIP
   ============================================================ */
.fmt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center}
@media (max-width:900px){ .fmt{grid-template-columns:1fr} }
.seg{display:inline-flex; padding:4px; gap:4px; background:var(--linen-200); border:1px solid var(--linen-300); border-radius:var(--r-m); margin-top:var(--s5)}
.seg button{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; font-weight:600;
  min-height:44px; padding:0 var(--s5); border:0; border-radius:var(--r-s);
  background:transparent; color:var(--ink-700); cursor:pointer;
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.seg button[aria-pressed="true"]{background:var(--ink-900); color:var(--linen-100)}
.seg button:hover:not([aria-pressed="true"]){background:var(--linen-300)}
/* tallest state is 9:16 at 444px — reserve for it so the Flip never nudges
   the section height and shifts the copy beside it */
.fmt__stage{display:flex; align-items:center; justify-content:center; min-height:472px}
.fmt__card{
  background:var(--ink-900); border-radius:var(--r-m); overflow:hidden;
  box-shadow:0 2px 4px rgba(18,18,22,.14), 0 30px 60px -20px rgba(18,18,22,.40);
  display:flex; flex-direction:column; justify-content:space-between; padding:var(--s5);
  width:340px; height:340px; color:var(--linen-100);
}
.fmt__card[data-ratio="4x5"]{width:300px; height:375px}
.fmt__card[data-ratio="9x16"]{width:250px; height:444px}
.fmt__card .hl{font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:-.025em; font-size:2rem; line-height:.95}
.fmt__card .hl em{font-style:normal; color:var(--claret-lift)}
.fmt__sizes{display:flex; gap:var(--s5); margin-top:var(--s6); flex-wrap:wrap}
.fmt__sizes div{border-left:2px solid var(--claret); padding-left:var(--s3)}

/* ============================================================
   CHIPS + THE INDUSTRY GATE
   ============================================================ */
.chips{display:flex; flex-wrap:wrap; gap:var(--s3)}
.chip{
  font-size:.9rem; font-weight:500; min-height:44px; display:inline-flex; align-items:center;
  padding:0 var(--s5); border-radius:var(--r-pill); cursor:pointer;
  background:var(--slate-800); border:1px solid var(--hairline); color:var(--text);
  transition:border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform 120ms var(--ease-out);
}
.chip:hover{border-color:var(--linen-400); transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--claret); border-color:var(--claret); color:#fff}
.gate{
  margin-top:var(--s8); border-top:1px solid var(--hairline); padding-top:var(--s7);
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s5); align-items:center;
}
@media (max-width:760px){ .gate{grid-template-columns:1fr; text-align:left} }
.gate__key{
  width:44px; height:44px; border-radius:var(--r-m); flex:none;
  display:grid; place-items:center; background:var(--claret-wash);
  border:1px solid rgba(228,87,106,.35);
}
.gate h3{margin-bottom:var(--s2)}

/* ============================================================
   FORMS
   ============================================================ */
.form{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5)}
.form--single{grid-template-columns:1fr}
@media (max-width:760px){ .form{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:var(--s2); min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:.875rem; font-weight:600; color:var(--text)}
.band-linen .field label,.on-linen .field label{color:var(--ink-900)}
.field .req{color:var(--claret-lift); margin-left:2px}
.band-linen .field .req,.on-linen .field .req{color:var(--claret)}
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--text);
  min-height:48px; padding:var(--s3) var(--s4); border-radius:var(--r-m);
  border:1px solid var(--hairline-strong); background:rgba(247,244,239,.04);
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  width:100%;
}
.field textarea{min-height:110px; line-height:1.55; resize:vertical}
.band-linen .field input,.band-linen .field select,.band-linen .field textarea,
.on-linen .field input,.on-linen .field select,.on-linen .field textarea{
  color:var(--ink-900); border-color:var(--linen-400); background:var(--linen-000);
}
.field select{
  appearance:none; padding-right:40px; background-repeat:no-repeat; background-position:right 16px center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' stroke='%239AA0AC' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
}
.band-linen .field select,.on-linen .field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' stroke='%236B7079' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--linen-400)}
.band-linen .field input:hover,.on-linen .field input:hover{border-color:var(--ink-500)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--claret); box-shadow:0 0 0 3px var(--claret-wash);
}
.field .help{font-size:.8rem; color:var(--text-muted)}
.band-linen .field .help,.on-linen .field .help{color:var(--ink-500)}
.field .err{font-size:.8rem; color:var(--claret-lift); font-weight:500; display:none; align-items:center; gap:6px}
.band-linen .field .err,.on-linen .field .err{color:var(--claret)}
.field[data-invalid="true"] input,.field[data-invalid="true"] select{border-color:var(--claret); box-shadow:0 0 0 3px var(--claret-wash)}
.field[data-invalid="true"] .err{display:flex}
.field[data-invalid="true"] .help{display:none}
/* the box itself is 20px, but the whole label is the target — so the row,
   not the input, is what has to clear 44px */
.check{display:flex; gap:var(--s3); align-items:center; grid-column:1/-1; cursor:pointer; min-height:44px; padding-block:var(--s2)}
.check input{width:20px; height:20px; min-height:0; flex:none; accent-color:var(--claret)}
.check span{font-size:.875rem; color:var(--text-muted); line-height:1.5}
.band-linen .check span,.on-linen .check span{color:var(--ink-700)}
.form__foot{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center}
.form__note{font-size:.8rem; color:var(--text-muted); max-width:44ch}
.band-linen .form__note,.on-linen .form__note{color:var(--ink-500)}

/* ============================================================
   NOTICES
   ============================================================ */
.notice{
  display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s4) var(--s5);
  border-radius:var(--r-m); border:1px solid var(--hairline-strong);
  background:rgba(247,244,239,.04); font-size:.9rem; line-height:1.55;
}
.notice svg{flex:none; margin-top:3px}
.notice--ok{background:rgba(46,125,91,.10); border-color:rgba(91,200,148,.35); color:var(--ok-lift)}
.notice--warn{background:rgba(180,116,14,.10); border-color:rgba(224,163,64,.35); color:var(--warn-lift)}
.notice--stop{background:rgba(180,50,42,.10); border-color:rgba(240,139,128,.35); color:var(--stop-lift)}
.band-linen .notice,.on-linen .notice{background:var(--linen-200); border-color:var(--linen-300); color:var(--ink-700)}
.band-linen .notice--ok,.on-linen .notice--ok{background:rgba(46,125,91,.10); border-color:rgba(46,125,91,.35); color:#1F5B42}
.band-linen .notice--stop,.on-linen .notice--stop{background:rgba(180,50,42,.08); border-color:rgba(180,50,42,.30); color:#8E2119}

/* ============================================================
   AUTH — one plate, set down in the middle of the room
   ============================================================ */
.auth{
  min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s6); padding:var(--s7) var(--gutter);
}
.auth__lockup{display:flex; flex-direction:column; align-items:center; gap:var(--s3); text-decoration:none}
.auth__lockup img{height:44px; width:auto}
.auth__card{
  width:100%; max-width:460px; background:var(--linen-100); color:var(--ink-900);
  border:1px solid var(--linen-300); border-radius:var(--r-xl); padding:clamp(28px,5vw,40px);
  box-shadow:var(--lift-3);
}
.auth__card--wide{max-width:560px}
.auth__card h1{
  font-size:clamp(1.7rem,3.4vw,2.25rem); line-height:1.02; color:var(--ink-900);
  margin-bottom:var(--s3);
}
.auth__card .lead{color:var(--ink-700); font-size:.95rem; margin-bottom:var(--s6)}
.auth__card .form{gap:var(--s4)}
.auth__foot{
  margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--linen-300);
  display:flex; flex-direction:column; gap:var(--s3); font-size:.875rem; color:var(--ink-700);
}
.auth__foot a{color:var(--claret); font-weight:500}
.auth__back{
  display:inline-flex; align-items:center; gap:var(--s2); min-height:44px;
  font-size:.85rem; color:var(--text-muted); text-decoration:none;
}
.auth__back:hover{color:var(--text)}
/* flashes sit above the form and are the first thing read */
.flash{
  display:flex; gap:var(--s3); align-items:flex-start; margin-bottom:var(--s5);
  padding:var(--s3) var(--s4); border-radius:var(--r-m); font-size:.875rem; line-height:1.5;
  background:rgba(180,50,42,.08); border:1px solid rgba(180,50,42,.30); color:#8E2119;
}
.flash svg{flex:none; margin-top:3px}

/* ============================================================
   PANEL — the app's working surface
   ============================================================ */
.panel{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-l);
  box-shadow:var(--lift-1),var(--edge);
}
.panel__head{
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  padding:var(--s5) var(--s6); border-bottom:1px solid var(--hairline);
}
.panel__head h3{margin-right:auto}
.panel__body{padding:var(--s6)}

/* ============================================================
   EMPTY STATE — never a shrug. Always names the next action.
   ============================================================ */
.empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4);
  padding:clamp(28px,5vw,56px);
  border:1px dashed var(--hairline-strong); border-radius:var(--r-l);
  background:linear-gradient(180deg,rgba(247,244,239,.02),transparent);
}
.empty__mark{
  width:52px; height:52px; border-radius:var(--r-m); display:grid; place-items:center;
  background:var(--claret-wash); border:1px solid rgba(228,87,106,.30);
}
.empty h3{font-size:1.15rem}
.empty p{color:var(--text-muted); font-size:.95rem; max-width:52ch}
.empty__actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s2)}

/* ============================================================
   RESULTS — the pack, laid out on the counter
   ============================================================ */
.results{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--s5)}
.result{
  display:flex; flex-direction:column; gap:var(--s3); text-align:left;
  padding:0; border:0; background:none; cursor:zoom-in;
}
.result__frame{
  position:relative; border-radius:var(--r-m); overflow:hidden;
  background:var(--slate-700); border:1px solid var(--hairline); box-shadow:var(--lift-1);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.result:hover .result__frame{transform:translateY(-3px); box-shadow:var(--lift-2); border-color:var(--hairline-strong)}
.result__frame img{width:100%; height:auto}
.result__meta{display:flex; align-items:baseline; gap:var(--s3); justify-content:space-between}
.result__when{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase}
.result__cap{font-size:.85rem; color:var(--text-muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* lightbox — Flip moves the card here, it does not cross-fade */
.lightbox{
  position:fixed; inset:0; z-index:120; display:none;
  align-items:center; justify-content:center; padding:var(--gutter);
  background:rgba(9,10,13,.86); backdrop-filter:blur(6px);
}
.lightbox[data-open="true"]{display:flex}
.lightbox__stage{max-width:min(900px,100%); max-height:100%; overflow:auto; display:flex; flex-direction:column; gap:var(--s4)}
.lightbox__close{
  position:absolute; top:var(--s5); right:var(--s5); width:44px; height:44px;
  display:grid; place-items:center; border-radius:var(--r-m);
  border:1px solid var(--hairline-strong); color:var(--text); background:rgba(15,16,20,.7);
}
.lightbox__close:hover{border-color:var(--linen-400)}

/* ============================================================
   PROGRESS — a job that is actually running
   ============================================================ */
.progress{height:4px; border-radius:var(--r-pill); background:rgba(247,244,239,.08); overflow:hidden}
.progress__bar{height:100%; width:0%; background:var(--claret-lift); border-radius:inherit; transition:width 400ms var(--ease-out)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--hairline); padding-block:var(--s7)}
.foot__in{display:flex; flex-wrap:wrap; gap:var(--s5); align-items:center; justify-content:space-between}
.foot img{height:28px; width:auto; opacity:.9}
.foot nav{display:flex; gap:var(--s5); flex-wrap:wrap}
.foot a{font-size:.8rem; color:var(--text-muted); text-decoration:none}
.foot a:hover{color:var(--text); text-decoration:underline}

/* ============================================================
   MOTION SAFETY
   Content is NEVER trapped invisible: .reveal only hides once JS
   has confirmed it can animate (html.js-motion), and a safety
   timer in served-motion.js clears the flag regardless.
   ============================================================ */
.reveal{opacity:1}
html.js-motion .reveal{opacity:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  html.js-motion .reveal,.reveal{opacity:1 !important; transform:none !important}
}