/* Hallmark · shape: Narrative Workflow, read as a chapter index · genre: playful · theme: Werkstatt (by request, shared with the tools) · draw: b6306a
 * nav: slab · hero: Stage, headline left, the twenty-topic map right · first section: Bento (one unit at a time) · footer: letter close · signature: the map of twenty tiles in four chapter columns, each tile a jump to its card
 * axes: mid/geometric-sans/cool · posture: full-palette · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the Steps and Band the draw left out are replaced by one unit shown at a time · swaps: the draw's Bento kept; the nav is a slab with only text links; the map is the signature instead of a screen capture */
@import url("./tokens.css");
@import url("./base.css");
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-lg); }
.slab { background: var(--color-ink); color: var(--color-paper); }
.slab .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-sm); }
.slab a { color: var(--color-paper); text-decoration: none; font: 600 var(--text-sm)/1 var(--font-body); padding: var(--space-xs) 0; }
.slab a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.slab a:focus-visible { outline: 3px solid var(--color-accent-3); outline-offset: 2px; }
.slab .mark { font: 700 var(--text-xl)/1 var(--font-display); }
.slab nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.slab nav a[aria-current=page] { text-decoration: underline; text-underline-offset: 0.2em; }
h1 { font-size: clamp(var(--text-3xl), 5.2vw, 4.2rem); line-height: 1; max-width: 12ch; }
h1.plain { max-width: 20ch; font-size: clamp(var(--text-2xl), 4vw, 3rem); margin-top: var(--space-xl); }
h2 { font-size: var(--text-2xl); max-width: none; } h3 { font-size: var(--text-lg); }
.lead { font-size: var(--text-xl); line-height: 1.35; max-width: 30ch; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-ink); border-radius: 0; background: transparent; color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); } .btn:active { transform: translateY(1px); }
.btn:focus-visible, .tile:focus-visible, .tab:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--color-ink); color: var(--color-paper); } .btn--primary:hover { background: var(--color-ink-2); }
.btn--big { min-height: 56px; padding-inline: var(--space-lg); font-size: var(--text-md); }

/* hero */
.hero { padding-block: var(--space-2xl) var(--space-xl); border-bottom: var(--rule-bar) solid var(--color-ink); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.hero-text { display: grid; gap: var(--space-md); justify-items: start; }
.hero-text p { margin: 0; }
.map { margin: 0; border: var(--rule-box) solid var(--color-ink); background: var(--color-paper-3); }
.mapgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mapcol { display: grid; grid-auto-rows: min-content; border-left: var(--rule-bar) solid var(--color-ink); }
.mapcol:first-child { border-left: 0; }
.maphead { margin: 0; padding: var(--space-xs) var(--space-sm); font: 700 var(--text-md)/1 var(--font-display); background: var(--color-paper-2); border-bottom: var(--rule-bar) solid var(--color-ink); }
.tile { text-decoration: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); align-items: center; min-height: 64px; padding: var(--space-xs) var(--space-sm); border: 0; border-bottom: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); color: var(--color-ink); font: 600 var(--text-sm)/1.15 var(--font-body); text-align: left; cursor: pointer; overflow-wrap: anywhere; transition: background-color var(--dur-micro) var(--ease-out); }
.mapcol .tile:last-child { border-bottom: 0; }
.tile .no { font: 700 var(--text-xs)/1 var(--font-body); font-variant-numeric: tabular-nums; opacity: .75; }
.tile.k-video { background: var(--color-accent); color: var(--color-accent-ink); } .tile.k-video:hover { background: var(--color-accent-2-deep); }
.tile.k-game, .tile.k-sim, .tile.k-lab { background: var(--color-accent-3); } .tile.k-game:hover, .tile.k-sim:hover, .tile.k-lab:hover { background: var(--color-paper-3); }
.tile.k-todo { background: var(--color-paper); } .tile.k-todo:hover { background: var(--color-paper-2); }
.mapkey { display: flex; flex-wrap: wrap; gap: var(--space-md); padding: var(--space-xs) var(--space-sm); border-top: var(--rule-bar) solid var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.mapkey i { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--color-ink); margin-right: var(--space-xs); vertical-align: -2px; }
.mapkey i.k-video { background: var(--color-accent); } .mapkey i.k-game { background: var(--color-accent-3); } .mapkey i.k-todo { background: var(--color-paper); }

/* units */
.units { padding-block: var(--space-2xl); }
.units h2 { margin-bottom: var(--space-md); }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--rule-box) solid var(--color-ink); border-bottom: 0; }
.tab { display: grid; gap: var(--space-3xs); text-align: left; padding: var(--space-sm) var(--space-md); border: 0; border-left: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); color: var(--color-ink); font: 400 var(--text-sm)/1.2 var(--font-body); cursor: pointer; min-height: 64px; transition: background-color var(--dur-micro) var(--ease-out); }
.tab:first-child { border-left: 0; } .tab b { font: 700 var(--text-lg)/1 var(--font-display); }
.tab:hover { background: var(--color-paper-2); } .tab[aria-selected=true] { background: var(--color-accent-3); }
.panel { border: var(--rule-box) solid var(--color-ink); background: var(--color-paper-2); padding: var(--space-md); }
.js .panel[hidden] { display: none; }
html:not(.js) .tabs { display: none; } html:not(.js) .panel { margin-bottom: var(--space-lg); }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
.card { grid-column: span 2; display: grid; grid-template-rows: auto 1fr; border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); min-width: 0; }
.card:nth-child(1), .card:nth-child(2) { grid-column: span 3; }
.card.pick { outline: 4px solid var(--color-accent-2-deep); outline-offset: 3px; }
.shot { border-bottom: var(--rule-bar) solid var(--color-ink); background: var(--color-paper); aspect-ratio: 16 / 9; overflow: hidden; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.soon { display: grid; place-items: center; height: 100%; font: 700 var(--text-2xl)/1 var(--font-display); color: var(--color-muted); border: var(--rule-bar) dashed var(--color-muted); margin: var(--space-sm); height: calc(100% - var(--space-md)); }
.body { display: grid; gap: var(--space-xs); padding: var(--space-md); align-content: start; }
.body h3:focus-visible { outline: 3px solid var(--color-focus); }
.body p { margin: 0; } .kind { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.k-todo .body p:not(.kind) { color: var(--color-muted); }

/* exam */
.exam { padding-block: var(--space-2xl); background: var(--color-accent-3); border-block: var(--rule-bar) solid var(--color-ink); }
.exam-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.exam p { margin-top: var(--space-xs); max-width: 46ch; }
.lab { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2xs); }
input[type=search] { width: 100%; min-height: 56px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-ink); border-radius: 0; background: var(--color-paper-3); color: var(--color-ink); font: 600 var(--text-lg)/1 var(--font-body); }
.hits { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); }
details { border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); }
summary { cursor: pointer; padding: var(--space-xs) var(--space-sm); font-weight: 600; } summary small { color: var(--color-muted); margin-left: var(--space-xs); font-weight: 600; }
details p { padding: var(--space-2xs) var(--space-sm) var(--space-sm); margin: 0; max-width: 70ch; }

/* behind */
.behind { padding-block: var(--space-2xl); }
.facts { width: 100%; border-collapse: collapse; margin-top: var(--space-md); border: var(--rule-box) solid var(--color-ink); background: var(--color-paper-3); }
.facts th, .facts td { text-align: left; vertical-align: top; padding: var(--space-xs) var(--space-md); border-bottom: var(--rule-bar) solid var(--color-ink); }
.facts th { width: 22%; font: 700 var(--text-md)/1.3 var(--font-display); } .facts tr:last-child > * { border-bottom: 0; }
.fine { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 70ch; }

/* footer */
.close { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-xl); }
.close .wrap { display: grid; gap: var(--space-xs); } .close p { margin: 0; max-width: 60ch; }
.close a { color: var(--color-paper); text-underline-offset: 0.2em; } .close a:focus-visible { outline: 3px solid var(--color-accent-3); outline-offset: 2px; }

/* chapters page */
.chapter { margin-top: var(--space-xl); }
.chhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md); padding-bottom: var(--space-xs); border-bottom: var(--rule-box) solid var(--color-ink); }
.chhead p { margin: 0; } .unitno { font: 600 var(--text-sm)/1 var(--font-body); background: var(--color-accent-3); padding: var(--space-2xs) var(--space-xs); border: var(--rule-bar) solid var(--color-ink); }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 110px minmax(0, 220px); gap: var(--space-md); align-items: start; padding: var(--space-sm) 0; border-bottom: var(--rule-bar) solid var(--color-rule); }
.toc .no { font: 700 var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.toc h3, .toc p { margin: 0; } .toc .kind { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.toc .go { display: grid; gap: var(--space-2xs); font-weight: 600; font-size: var(--text-sm); } .toc .go a { color: var(--color-ink); } .toc .go a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.qa { display: grid; gap: var(--space-xs); } .qa-note { font-size: var(--text-sm); color: var(--color-muted); }
dialog { width: min(920px, calc(100% - var(--space-lg))); max-height: 88vh; overflow: auto; border: var(--rule-box) solid var(--color-ink); background: var(--color-paper-3); color: var(--color-ink); padding: var(--space-md) var(--space-lg); }
dialog::backdrop { background: var(--color-scrim); }
dialog h2 { font-size: var(--text-xl); margin-bottom: var(--space-sm); max-width: none; }
dialog > form { position: sticky; top: calc(var(--space-md) * -1); z-index: var(--z-raised); display: flex; justify-content: flex-end; margin: calc(var(--space-md) * -1) calc(var(--space-lg) * -1) var(--space-xs); padding: var(--space-xs) var(--space-lg); background: var(--color-paper-3); border-bottom: var(--rule-bar) solid var(--color-ink); }
.xbtn { background: var(--color-paper); }
main#top { scroll-margin-top: 0; } html { scroll-padding-top: var(--space-md); }
@media (max-width: 900px) {
  .hero-grid, .exam-grid { grid-template-columns: 1fr; gap: var(--space-xl); } .hero { padding-block: var(--space-xl); }
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tab:nth-child(3) { border-left: 0; } .tab:nth-child(n+3) { border-top: var(--rule-bar) solid var(--color-ink); }
  .bento { grid-template-columns: minmax(0, 1fr); } .card, .card:nth-child(1), .card:nth-child(2) { grid-column: auto; }
  .toc li { grid-template-columns: 40px minmax(0, 1fr); } .toc .kind, .toc .go { grid-column: 2; }
  .facts th { width: 34%; }
}
@media (max-width: 560px) { .wrap { padding-inline: var(--space-md); } .mapgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mapcol:nth-child(3) { border-left: 0; } .mapcol:nth-child(n+3) { border-top: var(--rule-bar) solid var(--color-ink); } }
@media (prefers-reduced-motion: reduce) { .btn, .tile, .tab { transition: none; } html { scroll-behavior: auto; } }