/* SaturnAI wrap — job ticket. Desk language shared with /design/home/.

   Human project page (saturnai.dev) + the host explainers
   (saturndesign.org, saturnshop.org, saturntrading.org, saturnswarm.com/os/).

   Direction: press job ticket × carbonless paper × two doors.
   Heavy ink rules, condensed display for anything spoken, Courier for anything
   a machine reads, ONE green stamp reserved for state. No gradient washes or
   blobs, no glow,
   no imagery, no badge chrome. State is stamped — never called live until it is. */

@view-transition { navigation: auto; }

:root{
  --paper:#e8e7dd; --paper-2:#dbd9cb; --ink:#141312; --ink-soft:#57544c;
  --stamp:#2e5b3b;
}
@supports (color: oklch(0.93 0.015 95)){
  :root{
    --paper:oklch(0.92 0.012 110); --paper-2:oklch(0.87 0.015 110);
    --ink:oklch(0.18 0.006 70); --ink-soft:oklch(0.44 0.012 90);
    --stamp:oklch(0.40 0.07 155);
  }
}

*{box-sizing:border-box;margin:0}
html{scrollbar-color:var(--ink-soft) var(--paper)}
body{background:var(--paper);color:var(--ink);
  font:17px/1.55 Arial,"Helvetica Neue",sans-serif;min-height:100vh}
/* halftone print screen — a screen, not a gradient wash */
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background-image:
    radial-gradient(rgba(20,19,18,.09) 1px,transparent 1.3px),
    radial-gradient(rgba(20,19,18,.05) 1.5px,transparent 2px);
  background-size:4px 4px,11px 11px;background-position:0 0,3px 5px}

.cond{font-family:"Arial Narrow",Impact,Haettenschweiler,"Franklin Gothic Medium",system-ui,sans-serif;
  font-stretch:condensed;text-transform:uppercase;letter-spacing:.01em}
.mono{font-family:"Courier New",ui-monospace,monospace}

/* optical type: balance the display lines, kill orphans in running copy */
.claim,.sect-head,.dtitle,.foot-word,.mast-meta{text-wrap:balance}
p,.job,.pwhy,.fine,.lede{text-wrap:pretty}

a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--stamp)}
:focus-visible{outline:3px solid var(--stamp);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px}
.skip:focus{left:8px;background:var(--paper);padding:8px 12px;border:2px solid var(--ink);z-index:2}

.mast{padding:40px 24px 8px;border-bottom:4px solid var(--ink)}
.word{font-size:clamp(52px,11vw,132px);line-height:.82;font-weight:900;
  letter-spacing:-.01em;text-shadow:3px 3px 0 var(--paper),6px 6px 0 var(--ink);
  text-box-trim:trim-both;text-box-edge:cap alphabetic}
.word a{color:inherit;text-decoration:none}
.mast-meta{font-size:clamp(12px,1.4vw,16px);color:var(--ink-soft);
  letter-spacing:.14em;padding:16px 0 8px}

main{max-width:820px;margin:0 auto;padding:48px 24px 80px}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding:8px 0 40px}
.hostchip{display:inline-block;font-size:12px;letter-spacing:.16em;color:var(--stamp);
  border:2px solid var(--stamp);padding:4px 12px;margin-bottom:24px}
.claim{font-size:clamp(38px,6.4vw,68px);line-height:.92;font-weight:900;margin:0 0 24px;
  text-box-trim:trim-both;text-box-edge:cap alphabetic}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.5;max-width:44ch;margin-bottom:32px}

.acts{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.act{display:inline-flex;align-items:center;min-height:56px;padding:8px 32px;
  border:2.5px solid var(--ink);background:var(--paper);color:var(--ink);
  text-decoration:none;font-size:16px;letter-spacing:.06em}
.act.primary{background:var(--ink);color:var(--paper);box-shadow:6px 6px 0 var(--stamp)}
.act:hover{transform:translate(2px,2px);color:var(--ink)}
.act.primary:hover{color:var(--paper);box-shadow:3px 3px 0 var(--stamp)}
.fine{margin-top:24px;font-size:15px;color:var(--ink-soft);max-width:52ch}

/* ── section heads ────────────────────────────────────── */
.sect-head{font-size:clamp(17px,2.2vw,22px);letter-spacing:.14em;font-weight:900;
  padding-bottom:10px;border-bottom:3px solid var(--ink);margin-bottom:12px}
.sect-lede{font-size:18px;max-width:52ch;margin-bottom:32px}
.sub-head{font-size:13px;letter-spacing:.16em;color:var(--stamp);margin:32px 0 8px}
.sheet{margin:56px 0 0}

/* ── the docket (what the brain does) ──────────────────── */
.docket{list-style:none;padding:0;margin:0}
.docket li{display:grid;grid-template-columns:5ch 1fr;gap:0 20px;
  padding:24px 0;border-top:2px solid var(--ink)}
.docket li:last-child{border-bottom:2px solid var(--ink)}
.dnum{font-size:clamp(20px,2.4vw,26px);font-weight:900;color:var(--stamp);line-height:1}
.dtitle{font-size:clamp(18px,2.2vw,21px);letter-spacing:.04em;margin-bottom:6px}
.dbody p{max-width:56ch}
.dbody em{font-style:italic;font-weight:700}

/* ── the hand-off ─────────────────────────────────────── */
.handoff{margin:56px 0 0}
.term{border:2.5px solid var(--ink);margin:0 0 8px;background:var(--ink)}
.term-bar{display:flex;align-items:center;justify-content:space-between;
  background:var(--paper-2);border-bottom:2.5px solid var(--ink);padding:4px 4px 4px 16px}
.term-title{font-size:12px;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase}
.copy{cursor:pointer;min-height:44px;min-width:88px;padding:8px 24px;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  font:inherit;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.copy:hover{background:var(--ink);color:var(--paper)}
.copy.did{background:var(--stamp);color:#fff;border-color:var(--stamp)}
.term pre{color:var(--paper);padding:24px;font-size:15px;line-height:1.7;
  overflow-x:auto;margin:0}

.paths{list-style:none;padding:0;margin:12px 0 0}
.paths li{display:grid;grid-template-columns:14ch 1fr;gap:2px 16px;
  padding:16px 0;border-top:2px solid var(--ink);align-items:baseline}
.paths li:last-child{border-bottom:2px solid var(--ink)}
.pname{font-size:13px;letter-spacing:.12em;color:var(--stamp)}
.purl{font-size:14px;word-break:break-word}
.pwhy{grid-column:2;font-size:15px;color:var(--ink-soft)}

/* ── the parts table ──────────────────────────────────── */
.sheet table{width:100%;border-collapse:collapse}
.sheet caption{text-align:left;font-size:12px;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:12px}
.sheet th,.sheet td{vertical-align:top;text-align:left;padding:16px 12px 16px 0;border-top:2px solid var(--ink)}
.sheet thead th{font-size:12px;letter-spacing:.14em;border-top:0;padding-top:0;padding-bottom:8px}
.sheet tbody tr:last-child td,.sheet tbody tr:last-child th{border-bottom:2px solid var(--ink)}
.sheet .num{width:4ch;color:var(--stamp);font-size:16px}
.sheet .part{font-size:18px;letter-spacing:.04em;margin-bottom:4px}
.sheet .job{font-size:16px;max-width:46ch;margin:0}
.mark{display:inline-block;font-size:12px;letter-spacing:.12em;padding:4px 12px;border:2px solid var(--ink)}
.mark-open{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mark-wait{border-color:var(--stamp);color:var(--stamp)}

/* ── next click ───────────────────────────────────────── */
.next{margin:56px 0 0;padding:32px 0 0;border-top:4px solid var(--ink)}
.next .acts{margin-top:0}

/* ── footer ───────────────────────────────────────────── */
.foot{margin-top:80px;background:var(--ink);color:var(--paper);padding:40px 24px;
  background-image:radial-gradient(rgba(232,231,221,.07) 1.5px,transparent 2px);
  background-size:9px 9px}
.foot a{color:var(--paper)}
.foot a:hover{color:var(--paper-2)}
.foot-word{font-size:clamp(34px,7vw,64px);font-weight:900;line-height:.85;
  max-width:820px;margin:0 auto 12px}
.foot-links{max-width:820px;margin:0 auto;font-size:15px;color:var(--paper-2)}
.keys{letter-spacing:.08em}

/* ── host explainers (sibling pages) — same desk, extra objects ── */
body.explain .doors{display:flex;flex-wrap:wrap;gap:16px;border:0;margin:24px 0 0}
body.explain .claim{font-size:clamp(30px,5vw,52px)}

/* keep names the explainer pages link to */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2.5px solid var(--ink);margin:40px 0}
.door{padding:28px 24px;text-decoration:none;display:block;min-height:140px}
.door:first-child{border-right:2.5px solid var(--ink);background:var(--ink);color:var(--paper)}
.door:first-child a,.door:first-child .door-k{color:var(--paper)}
.door-k{display:block;font-size:12px;letter-spacing:.16em;color:var(--stamp);margin-bottom:8px}
.door:first-child .door-k{color:var(--paper-2)}
.door h2{font-size:clamp(22px,3vw,28px);margin-bottom:8px}
.door p{font-size:15px;line-height:1.45;color:inherit}
.door:hover{outline:3px solid var(--stamp);outline-offset:-3px}
.note{margin:40px 0;padding:20px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.note h2{font-size:13px;letter-spacing:.16em;color:var(--stamp);margin-bottom:8px}
.note p{max-width:42ch}
.others{list-style:none;margin:32px 0 0;padding:0}
.others li{padding:14px 0;border-top:1px solid var(--ink-soft)}
.others strong{display:block;letter-spacing:.06em}

/* ── motion: one ticker press, one settle. reduced-motion wins. ── */
@media (prefers-reduced-motion:no-preference){
  .ticker-track{animation:press 30s linear infinite}
  @keyframes press{to{transform:translateX(-50%)}}
  .sheet{animation:sheet-settle linear both;animation-timeline:view();
    animation-range:entry 0% entry 40%}
  @keyframes sheet-settle{from{transform:translateY(10px)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .act:hover{transform:none}
  .ticker-track{animation:none}
}

@media (max-width:720px){
  .doors{grid-template-columns:1fr}
  .door:first-child{border-right:0;border-bottom:2.5px solid var(--paper-2)}
  .docket li{grid-template-columns:3.5ch 1fr;gap:0 14px}
  .paths li{grid-template-columns:1fr;gap:4px}
  .pwhy{grid-column:1}
  .sheet th,.sheet td{padding:16px 8px 16px 0}
}

/* ── ticker (host explainers + this page) ─────────────── */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;
  border-bottom:2px solid var(--ink);padding:8px 0}
.ticker-track{display:flex;white-space:nowrap;font-size:16px;letter-spacing:.12em}
.ticker-track span{padding-right:8px}