/* Ink & Paper — components (design bible §5, §6, §7). Last Stand: paper-cold, odds only, no ornament. */
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--paper-shadow);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* The book: one page visible; pages turn horizontally. */
.book {
  position: relative;
  width: min(100%, var(--page-w));
  margin: 0 auto;
  min-height: 100dvh;
  overflow: hidden;
}
@media (min-width: 700px) {
  .book { width: var(--page-w-wide); margin: 24px auto; min-height: calc(100dvh - 48px); }
}

/* §5.1 The Page */
.page {
  position: relative;
  min-height: 100dvh;
  padding: var(--pad);
  background: var(--paper);
  border: 0.5px solid var(--rule);
  overflow: hidden;
}
@media (min-width: 700px) { .page { min-height: calc(100dvh - 48px); padding: 24px; } }
.page--cold { background: var(--paper-cold); }
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/paper-grain.png");
  background-size: 256px 256px;
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.page > * { position: relative; }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap);
  padding-bottom: 6px;
  margin-bottom: 12px;
  border-bottom: 0.5px solid var(--rule);
}
.label {
  font-size: var(--sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faded);
}
.page--record .label { color: var(--court); }
.dateline { font-size: var(--sm); color: var(--ink-faded); font-variant-numeric: lining-nums; }

.title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--xxl);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 24px 0 12px;
}
.body { max-width: 70ch; margin: 0 0 12px; }
.body p { margin: 0 0 12px; }
.body em { font-style: italic; }
.section-label { margin: 20px 0 8px; }
hr.rule { border: 0; border-top: 0.5px solid var(--rule); margin: 16px 0; }

/* §5.2 The Odds Figure */
.odds { margin: 8px 0 4px; }
.odds__figure {
  display: block;
  color: var(--odds);
  font-size: var(--lg);
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
}
.odds--hero .odds__figure { font-size: var(--xl); }
.odds__label { display: block; font-size: var(--sm); color: var(--ink-faded); margin-top: 2px; }
.odds__source { display: block; font-size: var(--xs); color: var(--ink-faded); font-family: var(--f-text-alt); }
.odds__stroke { display: block; width: 4.5em; height: 6px; margin-top: 2px; }
.odds__stroke path { fill: none; stroke: var(--odds); stroke-width: 1; }

/* §5.3 The Decision */
.decision {
  display: grid;
  /* Two columns on a phone at the default size; one column when the reader's type is large (bible 8). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--gap);
  margin: 16px 0;
}
.option {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 0.5px solid var(--ink-faded);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.option:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.option[disabled] { cursor: default; }
.option__title { font-size: var(--md); line-height: 1.25; margin: 0 0 8px; }
.option__line { font-size: var(--xs); color: var(--ink-faded); margin: 8px 0 0; line-height: 1.5; }
.option .odds__figure { font-size: var(--lg); }
.circle {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  pointer-events: none;
  transform: rotate(2deg);
  overflow: visible;
}
.circle ellipse {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw var(--t-circle) linear forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* §5.4 The Ledger Table */
.ledger { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-variant-numeric: lining-nums tabular-nums; }
.ledger th {
  text-align: left;
  font-weight: 400;
  font-size: var(--sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faded);
  border-bottom: 0.5px solid var(--rule);
  padding: 4px 6px 4px 0;
}
.page--record .ledger th { color: var(--court); }
.ledger td { padding: 5px 6px 5px 0; border-bottom: 0.5px solid var(--rule-light); vertical-align: top; font-size: var(--sm); }
.ledger td.num, .ledger th.num { text-align: right; }
.ledger td.figure { color: var(--odds); }
.ledger td.filled { font-family: var(--f-type); font-size: var(--sm); }
.ledger tr:last-child td { border-bottom: 0; }

/* §5.5 The Marginal Note — at most one per page */
.note {
  display: inline-block;
  font-family: var(--f-type);
  font-size: var(--xs);
  color: var(--ink-faded);
  transform: rotate(-1.5deg);
  margin-top: 24px;
}

/* §5.15 There are no buttons: tappable words, underlined with a hand stroke */
.foot { display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline; margin-top: 24px; }
.word {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--ink-faded);
  font: inherit;
  font-size: var(--sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.word--ink { color: var(--ink); }
.word:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.confirm { font-size: var(--sm); color: var(--ink-faded); }

.reckoning { font-family: var(--f-type); font-size: var(--xs); color: var(--ink-faded); }

/* The winter's line per death, the accounting's line */
.line { margin: 0 0 8px; }
.line--court { font-family: var(--f-text); }

/* §6 Motion: page turn 320ms ease-in-out, horizontal, with a paper-shadow edge */
.page--in { position: absolute; inset: 0; transform: translateX(100%); transition: transform var(--t-turn) ease-in-out; box-shadow: -6px 0 0 0 var(--paper-shadow); }
.page--in.page--settled { transform: translateX(0); }
.page--out { transition: transform var(--t-turn) ease-in-out; transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) {
  .page--in { transform: none; opacity: 0; transition: opacity 120ms ease-in-out; box-shadow: none; }
  .page--in.page--settled { opacity: 1; }
  .page--out { transform: none; opacity: 0; transition: opacity 120ms ease-in-out; }
  .circle ellipse { animation: none; stroke-dashoffset: 0; }
}