/* Apple Pie From Scratch — shared by the homepage (/) and the explorer (/notes/)
   One idea carries the design: the page darkens as you descend.
   Rounds 0–8 sit on paper (the kitchen), 9–13 on dusk (the living world),
   14–17 on night (physics). Everything else stays quiet. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500&display=swap');

:root {
  --paper: #f5f2ea;
  --paper-2: #ebe6d9;
  --ink: #23271f;
  --ink-2: #5a5f53;
  --rule: #cfc8b6;
  --apple: #a8302a;
  --leaf: #4b6a3a;
  --dusk: #d9d4d0;
  --dusk-ink: #262227;
  --night: #1b1c2e;
  --night-ink: #e6e3f1;
  --night-rule: #3a3c5c;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --measure: 66ch;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
html, body { height: 100%; }
/* Type: sans for everything you read and scan; the serif only for titles and for A's voice. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
.card a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover, .card a:hover { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--apple); outline-offset: 2px; }
em { font-style: italic; }
code { font-size: .92em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Depth tones. The body carries a data-depth attribute set by the app. */
body[data-depth="dusk"] { background: var(--dusk); color: var(--dusk-ink); --ink: var(--dusk-ink); }
body[data-depth="night"] { background: var(--night); color: var(--night-ink); --ink: var(--night-ink); --rule: var(--night-rule); --ink-2: #b7b4c8; --paper-2: #262841; }
body { transition: background-color .5s ease, color .5s ease; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* Layout: a strand down the left, the card on the right. */
.app { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 100%; }
.strand {
  border-right: 1px solid var(--rule);
  padding: 1.25rem 0 3rem 1.25rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  font-size: 13.5px; line-height: 1.4;
}
.strand h1 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.15; margin: 0 1rem .15rem 0; letter-spacing: -.01em; font-variation-settings: 'opsz' 60; }
.strand .sub { color: var(--ink-2); margin: 0 1rem 1rem 0; }
.strand nav { display: block; }
.strand .views { margin: 0 1rem .9rem 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .15rem .7rem; }
.strand .views a { color: var(--ink-2); }
.strand .views a[aria-current="page"] { color: inherit; font-weight: 500; }
.trunk { list-style: none; margin: 0; padding: 0; position: relative; }
.trunk::before { content: ''; position: absolute; left: .55rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--rule); }
.trunk li { position: relative; padding: .1rem 0 .1rem 1.6rem; }
.trunk li::before { content: ''; position: absolute; left: .32rem; top: .48rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink-2); }
body[data-depth="dusk"] .trunk li::before { background: var(--dusk); }
body[data-depth="night"] .trunk li::before { background: var(--night); }
.trunk li.current::before { background: var(--apple); border-color: var(--apple); }
.trunk li.current > a { font-weight: 500; }
.trunk li.nest { padding-left: 2.4rem; }
.trunk li.nest::before { left: 1.1rem; width: .35rem; height: .35rem; top: .55rem; }
.trunk li.nest::after { content: ''; position: absolute; left: .55rem; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.trunk .n { display: inline-block; min-width: 1.6rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.trunk .branches-here { margin: .2rem 1rem .3rem 1.6rem; padding-left: .6rem; border-left: 2px solid var(--leaf); font-size: 12.5px; }
.trunk .branches-here::before { display: none; }
.trunk .branches-here a { display: inline-block; margin-right: .5rem; color: var(--leaf); }
body[data-depth="night"] .trunk .branches-here a { color: #9fc48a; }

/* The card */
.card { padding: 2rem 2.5rem 6rem; max-width: 56rem; }
.crumbs { font-size: 12.5px; color: var(--ink-2); margin: 0 0 1rem; }
.card .crumbs a { text-decoration: none; }
.crumbs a + a::before { content: ' / '; color: var(--rule); }
.eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--leaf); margin: 0 0 .3rem; }
body[data-depth="night"] .eyebrow { color: #9fc48a; }
.card h2 { font-family: var(--serif); font-weight: 500; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .35rem; font-variation-settings: 'opsz' 72; }
.card h2 .n { color: var(--ink-2); font-weight: 400; margin-right: .45rem; font-variant-numeric: tabular-nums; }
.card h2 .slug { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; vertical-align: middle; margin-left: .35rem; }
.card .kind { font-size: 13.5px; color: var(--ink-2); margin: 0 0 1.25rem; max-width: 46rem; }
.lead { font-size: 15.5px; line-height: 1.55; margin: 0 0 1.5rem; max-width: 46rem; }

/* Fields: a label column and a content column, so a round reads as a record. */
.field, .hangs {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1.25rem;
  padding: .7rem 0; border-top: 1px solid var(--rule); margin: 0;
}
.field > :not(.lab), .hangs > :not(.lab) { grid-column: 2; }
.lab, .field > .lab, .hangs .lab {
  font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); padding-top: .2rem; line-height: 1.35;
}
.lab .hint { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-2); font-size: 12px; margin-top: .15rem; }
.field p { margin: 0 0 .4rem; max-width: 42rem; }
.field p:last-child { margin-bottom: 0; }
.field ul { margin: 0; padding-left: 1.1rem; max-width: 42rem; }
.field ul li { margin: .1rem 0; }

.processes { list-style: none; margin: 0; padding: 0 !important; }
.processes li { display: block; padding: .3rem 0; }
.processes li.stepped { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: .25rem; padding: .3rem 0; margin: 0 !important; }
.processes li + li { border-top: 1px dashed var(--rule); }
.processes li > .step { grid-column: 1; color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: .1rem; }
.processes li > :not(.step) { grid-column: 2; }
.processes .v { font-weight: 600; }
.card .processes a.v, .card td:first-child a, .card .hangs a { text-decoration: none; }
.card .processes a.v:hover, .card td:first-child a:hover, .card .hangs a:hover { text-decoration: underline; }
.processes .v.reused { font-weight: 400; color: var(--ink-2); }
.processes .note { display: block; }
.processes .io { display: block; font-size: 13px; color: var(--ink-2); margin-top: .05rem; }
.processes .io strong { font-weight: 500; color: var(--ink); }
.reused-line { color: var(--ink-2); }

/* A's voice: the one place the serif carries body text. */
.interruption { margin: 1.25rem 0 0; padding: .8rem 1rem .9rem; border-left: 3px solid var(--apple); background: var(--paper-2); max-width: 46rem; }
body[data-depth="dusk"] .interruption { background: rgba(255,255,255,.35); }
.interruption .who { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--apple); }
body[data-depth="night"] .interruption .who { color: #f0a09a; }
.interruption p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.35; margin: .2rem 0 .5rem; font-style: italic; font-variation-settings: 'opsz' 36; }
.interruption a.next { font-size: 13.5px; font-weight: 500; }

.context p { margin: 0 0 .5rem; }
.home .context p, .expansion-context p { max-width: 42rem; }
.small { font-size: 12.5px; color: var(--ink-2); }
.hangs ul { list-style: none; margin: 0; padding: 0; }
.hangs li { margin: .1rem 0; }
.hangs .cost { font-size: 12.5px; color: var(--ink-2); margin-left: .5rem; }

/* Tables (index, registers) */
table { border-collapse: collapse; font-size: 13.5px; line-height: 1.4; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: .4rem .75rem .4rem 0; border-top: 1px solid var(--rule); }
th { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border-top: 0; border-bottom: 1px solid var(--ink-2); }
td:first-child { font-weight: 500; }
.tablewrap { overflow-x: auto; }
.status-open { color: var(--apple); }
body[data-depth="night"] .status-open { color: #f0a09a; }

/* Assembly page */
.contract { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0 0 1rem; }
.contract > div { border-top: 2px solid var(--ink); padding-top: .4rem; }
.contract ul { margin: .25rem 0 0; padding-left: 1rem; }
.appearances li { margin: .15rem 0; }
.chip { display: inline-block; font-size: 11.5px; line-height: 1.5; padding: 0 .45rem; border: 1px solid var(--rule); border-radius: 1rem; color: var(--ink-2); margin-left: .35rem; vertical-align: 1px; }
.card a.chip { text-decoration: none; }

/* Rules page */
.prose { max-width: 44rem; }
.prose h3 { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin: 1.5rem 0 .4rem; padding-top: .7rem; border-top: 1px solid var(--rule); }
.prose p { margin: 0 0 .5rem; }
.prose ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.prose li { margin: .2rem 0; }

/* Home */
.home { max-width: 46rem; }
.home .big { font-family: var(--serif); font-size: 2rem; line-height: 1.12; letter-spacing: -.015em; font-weight: 400; margin: .25rem 0 1.25rem; font-variation-settings: 'opsz' 96; }
.home .big em { font-style: italic; }
.home .starts { margin-top: 1.5rem; }
.home .starts a { display: block; padding: .55rem 0; border-top: 1px solid var(--rule); text-decoration: none; font-weight: 500; }
.home .starts a:last-child { border-bottom: 1px solid var(--rule); }
.home .starts .small { display: block; font-weight: 400; }

/* Homepage: the same header, as a bar across the top, over an open page for the game. */
.site-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.site-header h1 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.15; margin: 0; letter-spacing: -.01em; font-variation-settings: 'opsz' 60; }
.site-header .sub { color: var(--ink-2); margin: 0; }
.site-header nav { margin-left: auto; }
.site-header nav a { color: var(--ink-2); }
.site-header nav a:hover { color: inherit; }
.game { padding: 2rem 1.25rem 6rem; max-width: 46rem; }

/* Search */
.search { margin: 0 1rem 1rem 0; }
.search input { width: 100%; font: inherit; padding: .35rem .5rem; border: 1px solid var(--rule); background: transparent; color: inherit; border-radius: 4px; }
.results { list-style: none; margin: .25rem 0 0; padding: 0; }
.results li { padding: .15rem 0; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .strand { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: 1rem 1rem 1rem; }
  .trunk { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
  .trunk::before { display: none; }
  .trunk li { padding-left: 0; }
  .trunk li::before, .trunk li.nest::after { display: none; }
  .trunk li.current a { text-decoration: underline; text-underline-offset: 4px; }
  .trunk .branches-here { width: 100%; margin-left: 0; }
  .card { padding: 1.25rem 1rem 4rem; }
  .card h2 { font-size: 1.45rem; }
  .field, .hangs { grid-template-columns: 1fr; row-gap: .25rem; }
  .field > :not(.lab), .hangs > :not(.lab) { grid-column: 1; }
  .contract { grid-template-columns: 1fr; }
}