/* The What-If Machine — set in The Press Run, the qnep.it design language.
   Tokens lifted verbatim from the front page. Warm ink on newsprint, two
   families, hairlines only, one easing curve, nothing bounces. */

:root{
  /* ── Paper & ink ─────────────────────────────────────────────── */
  --paper:#E9E3D5;          /* newsprint field                     */
  --paper-cell:#EEE9DC;     /* column / card fill                  */
  --paper-cell-lit:#F6F2E7; /* card on hover                       */
  --ink:#1E1A15;            /* warm near-black — never #000        */
  --ink-mid:#5B5245;        /* body copy                           */
  --ink-soft:#8E8574;       /* slugs, labels, counters             */
  --rule:#D8CEB9;           /* hairline                            */
  --rule-soft:#C6BCA6;      /* underlines                          */
  --red:#A8321F;            /* the one accent                      */
  --gold:#8A6A3E;           /* a stated constraint                 */
  /* ── Motion ──────────────────────────────────────────────────── */
  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:.45s; --t-mid:.6s; --t-slow:1.1s;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Bodoni Moda",Georgia,serif; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(100% 60% at 78% -6%,rgba(120,150,170,.16),transparent 60%),
    radial-gradient(80% 70% at 0% 32%,rgba(214,176,110,.18),transparent 62%),
    radial-gradient(120% 80% at 50% 108%,rgba(168,50,31,.05),transparent 60%);
  background-attachment:fixed;
}
body::after{ /* film grain — one inline filter, no image request */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9;
  opacity:.3; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.shell{max-width:1080px; margin:0 auto; padding:clamp(1.5rem,4vw,3rem) clamp(1.15rem,4vw,3rem) 3rem}
.mono{font-family:"Courier Prime",ui-monospace,Menlo,monospace}
a{color:var(--ink)}
a:hover{color:var(--red)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Dateline ─────────────────────────────────────────────────── */
.dateline{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:"Courier Prime",monospace; font-size:.56rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem;
}
.dateline a{color:var(--ink-soft); text-decoration:none}
.dateline a:hover{color:var(--red)}

/* ── Title ────────────────────────────────────────────────────── */
h1{
  margin:0; font-weight:400; font-variation-settings:'opsz' 96;
  font-size:clamp(2.6rem,8vw,5.2rem); line-height:.95; letter-spacing:-.035em;
}
.standfirst{
  margin:1rem 0 0; font-family:"Courier Prime",monospace; font-size:.8rem; line-height:1.95;
  color:var(--ink-mid); max-width:52ch;
}

/* ── Body: slug rail + column ─────────────────────────────────── */
.body{display:flex; gap:1.75rem; align-items:stretch; margin-top:1.5rem}
.slug{
  flex:0 0 1.6rem; display:flex; align-items:flex-end; justify-content:center;
  writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;
  font-family:"Courier Prime",monospace; font-size:.56rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-soft); padding:.25rem 0;
}
.col{flex:1 1 auto; min-width:0}

/* ── The prompt ───────────────────────────────────────────────── */
.desk{
  background:var(--paper-cell); padding:1.75rem 1.6rem 1.5rem;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.prompt{
  margin:0; font-size:clamp(1.55rem,4.6vw,2.5rem); line-height:1.22; letter-spacing:-.02em;
  transition:opacity var(--t-mid) var(--ease), filter var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease);
}
.prompt.setting{opacity:0; filter:blur(9px); transform:translateY(10px); transition:none}
/* A term you can look up. A button in a link's clothing — the system has no
   buttons, so it must not look like one. */
.term{
  appearance:none; background:none; border:0; padding:0; margin:0;
  font:inherit; letter-spacing:inherit; color:inherit; cursor:pointer;
  border-bottom:1px solid var(--rule-soft);
  transition:color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.term:hover, .term:focus-visible{color:var(--red); border-color:var(--red); outline:none}
.term[aria-expanded="true"]{color:var(--red); border-color:var(--red)}

/* ── Actions ──────────────────────────────────────────────────── */
.row{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:1.1rem}
.go{
  appearance:none; background:none; padding:0 0 1px; cursor:pointer;
  display:inline-block; font-family:"Courier Prime",monospace; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mid); text-decoration:none;
  border:0; border-bottom:1px solid var(--rule-soft);
  transition:color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.go:hover, .go:focus-visible{color:var(--red); border-color:var(--red); outline:none}
.counter{
  margin-left:auto; font-family:"Courier Prime",monospace; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}

/* ── The morgue file (factbox) ────────────────────────────────── */
.morgue{
  margin-top:1.25rem; background:var(--paper-cell); padding:1.35rem 1.4rem;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.morgue[hidden]{display:none}
.morgue__slug{
  font-family:"Courier Prime",monospace; font-size:.56rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--red); margin-bottom:.7rem;
}
.morgue__term{font-size:1.5rem; font-weight:400; line-height:1.18; letter-spacing:-.02em}
.morgue__note{
  margin:.5rem 0 0; font-size:1.06rem; font-style:italic; line-height:1.55;
  color:var(--ink-mid); max-width:60ch;
}
.morgue__links{display:flex; flex-wrap:wrap; gap:1rem 1.5rem; margin-top:.9rem}

/* ── Small print ──────────────────────────────────────────────── */
.fineprint{
  margin:1.5rem 0 0; font-family:"Courier Prime",monospace; font-size:.72rem;
  line-height:1.9; color:var(--ink-soft); max-width:60ch;
}
.fineprint a{color:var(--ink-mid)}

footer{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:2.5rem;
  font-family:"Courier Prime",monospace; font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-soft);
}
footer .dot{width:5px; height:5px; border-radius:50%; background:var(--red); animation:softPulse 4.5s ease-in-out infinite}
footer .spacer{flex:1}
footer .byline{flex:0 0 100%; margin-top:.1rem; color:var(--ink-soft); opacity:.75}
footer a{color:var(--ink-mid); text-decoration:none; border-bottom:1px solid var(--rule-soft)}

/* The every-tenth-run nudge. Sits below the desk, never in front of a prompt,
   and never stops you running the machine again. */
.nudge{
  margin:1.5rem 0 0; font-family:"Courier Prime",monospace; font-size:.78rem;
  line-height:1.8; color:var(--ink-mid); max-width:60ch;
  border-left:3px solid var(--gold); padding:.1rem 0 .1rem .85rem;
}
.nudge[hidden]{display:none}
.nudge a{color:var(--red)}

@keyframes softPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

@media(max-width:640px){
  .slug{display:none}
  .body{gap:0}
  .counter{margin-left:0; flex:0 0 100%}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .prompt.setting{opacity:1; filter:none; transform:none}
}