@font-face{
  font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/inter-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/inter-variable.woff2') format('woff2');
}

*,*::before,*::after{box-sizing:border-box;}
html{background:#fff;}
body{
  margin:0;background:#fff;color:#1a1a1a;
  font-family:'JetBrains Mono',monospace;
  font-weight:300;
  font-size:1.05rem;line-height:1.75;
}

/* Replicate the main-page grid's horizontal extent.
   The grid's gap is min(vw/67.525, (vh-hd_h)/43) where hd_h ≈ 140px.
   article max-width = grid-clip-width + 2×1.5rem inner padding so the
   text content aligns with the grid clip's left/right edges. */
:root{
  --agap: min(calc(100vw / 67.525), calc((100vh - 140px) / 43));
  --aclip: calc(var(--agap) * 62.765);
}

.article{
  max-width:calc(var(--aclip) + 3rem);
  margin:0 auto;
  padding:1rem 1.5rem 6rem;
  position:relative;
}

.back-link{
  position:absolute;top:1rem;left:1.5rem;
  font-size:.85rem;font-weight:500;color:#888;text-decoration:none;
}
.back-link:hover{color:#1a1a1a;}

h1{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.01em;
  margin:0;color:#111;text-align:center;padding-top:2rem;
}
.lede{
  font-size:.78rem;color:#888;font-weight:400;
  margin:.35rem auto 2.5rem;line-height:1.6;text-align:center;
}

.toc{
  display:flex;flex-wrap:wrap;gap:.4rem .7rem;
  padding:1rem 1.25rem;margin:0 0 2.75rem;
  background:#fff;border:1px solid #e8e8e8;border-radius:8px;
  font-size:.85rem;
}
.toc a{font-weight:500;color:#444;text-decoration:none;border-bottom:1px solid transparent;}
.toc a:hover{color:#1a1a1a;border-bottom-color:#1a1a1a;}
.toc-sep{color:#ccc;}

section{margin-bottom:2.25rem;scroll-margin-top:1.5rem;}
section:last-child{margin-bottom:0;}

p{margin:0 0 1.1rem;font-weight:300;}
p:last-child{margin-bottom:0;}

.lead-label{font-weight:700;color:#111;}

a.xref{font-weight:500;color:#1a1a1a;text-decoration:none;}
a.xref:hover{text-decoration:underline;text-decoration-color:#bbb;}

a{color:#1a1a1a;}

strong{font-weight:700;color:#111;}

.questions-list{
  margin:1rem 0 1.1rem;padding-left:1.5rem;
  display:flex;flex-direction:column;gap:.55rem;
  font-weight:300;
}
.questions-list li{color:#444;font-size:.97rem;line-height:1.65;}

.poem-figure,.pipeline-figure{
  margin:1.5rem auto;
}
.poem-figure img,.pipeline-figure img{
  width:100%;display:block;border-radius:4px;
}
.poem-figure figcaption,.pipeline-figure figcaption{
  margin-top:.6rem;
  font-size:.82rem;font-weight:300;color:#555;line-height:1.5;
}

.credits-note{
  margin-top:1.5rem;padding:1rem 1.25rem;
  background:#fff;border:1px solid #e8e8e8;border-radius:8px;
  font-size:.94rem;font-weight:300;color:#444;
}

/* ── Prompt viewer (prompts.html) ──
   Scoped to pre#pass1/#pass2 specifically, not a bare `pre` selector — the
   flowchart's mermaid diagram also lives in a <pre class="mermaid">
   (mermaid keeps the tag as its container), and a bare `pre{}` rule here
   was painting that dark code-block background behind the diagram too. */
.prompt-note{font-size:.85rem;font-weight:300;color:#888;margin:0 0 .8rem;}
#pass1, #pass2{
  white-space:pre-wrap;word-break:break-word;
  background:#1a1a1a;color:#e8e6e0;
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;line-height:1.6;
  padding:1.25rem 1.4rem;border-radius:8px;
  max-height:32rem;overflow-y:auto;
  margin:0 0 1rem;
}

/* ── Coloured term spans ── */
/* Uses span.term-X (specificity 0,1,1) so it beats .device-list-row span (also 0,1,1)
   via source order — term rules are declared later in this file. */
span.term-kami        { font-weight:700; text-decoration:underline; color:#2E9E6B; }
span.term-shimo       { font-weight:700; text-decoration:underline; color:#E5503A; }
span.term-imagined    { font-weight:700; text-decoration:underline; color:#6F63C9; }
span.term-kakekotoba  { font-weight:700; text-decoration:underline; color:#D46CA0; }
span.term-makurakotoba{ font-weight:700; text-decoration:underline; color:#4A96CC; }
span.term-kigo        { font-weight:700; text-decoration:underline; color:#7AAD1E; }

.lede a{color:#888;font-weight:400;text-decoration:underline;text-decoration-color:#ccc;}
.lede a:hover{color:#1a1a1a;text-decoration-color:#1a1a1a;}

.sources-list{
  margin:.5rem 0 0;padding-left:1.2rem;
  display:flex;flex-direction:column;gap:.3rem;
  font-weight:300;
}
.sources-list li{color:#444;}
.sources-list a{color:#1a1a1a;font-weight:500;}

@media (max-width:640px){
  .article{padding:2rem 1.25rem 4rem;}
}