@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/newsreader-500.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/newsreader-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/outfit-400.woff2") format("woff2");
}

:root {
  --sc-canvas: #e2e0d8;
  --sc-surface: #d6d3c9;
  --sc-ink: #171c16;
  --sc-ink-soft: #585e54;
  --sc-accent: #c24a32;
  --sc-accent-ink: #f4efe6;
  --sc-font-display: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --sc-font-text: "Outfit", "Avenir Next", system-ui, sans-serif;
  --sc-shadow-color: 90 12% 16%;
  --sc-edge: inset 0 1px 0 color-mix(in oklab, #fff 62%, transparent);
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.12);
  --folio-h: 2.85rem;
}

.sc-grain { opacity: 0.032; mix-blend-mode: multiply; }

.skip {
  position: absolute;
  left: var(--sc-4);
  top: var(--sc-4);
  z-index: 100;
  padding: var(--sc-2) var(--sc-3);
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---- folio: magazine running head, not a CTA bar ---- */
.folio {
  position: fixed;
  z-index: var(--sc-z-chrome);
  top: 0;
  left: 0;
  right: 0;
  height: var(--folio-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sc-gutter);
  pointer-events: none;
  color: var(--sc-ink);
}
.folio a {
  pointer-events: auto;
  text-decoration: none;
  color: inherit;
}
.folio__pub {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg);
  font-weight: 500;
  letter-spacing: var(--sc-track-snug);
  line-height: 1;
}
.folio__pub:hover { color: var(--sc-accent); }
.folio__now {
  display: block;
  margin: 0;
  font-size: var(--sc-t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.folio__index {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.folio.is-dusk { color: #e6e3db; }
.folio.is-dusk .folio__now { color: #a8ada4; }

.chapter,
.title,
.colophon {
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
.chapter--dusk {
  --sc-canvas: #171c16;
  --sc-surface: #22281f;
  --sc-ink: #e6e3db;
  --sc-ink-soft: #a8ada4;
  --sc-accent: #e08b78;
  --sc-accent-ink: #171c16;
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 18%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 28%, transparent);
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 14%, transparent);
  color: var(--sc-ink);
  background: var(--sc-canvas);
}
.chapter--peak {
  --sc-canvas: #e8e4da;
  --sc-surface: #ddd6c8;
  color: var(--sc-ink);
  background: var(--sc-canvas);
}
.chapter--ops {
  --sc-canvas: #dcddd4;
  --sc-surface: #d0d1c8;
  color: var(--sc-ink);
  background: var(--sc-canvas);
}
.chapter--kitchen {
  --sc-canvas: #d5d3cb;
  --sc-surface: #c9c7bf;
  --sc-ink-soft: #3f453c;
  color: var(--sc-ink);
  background: var(--sc-canvas);
}

/* title page: type on paper, no media, lead, one viewport */
.title {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--folio-h) + var(--sc-6)) var(--sc-gutter) var(--sc-7);
}
.title__inner { max-width: 28em; }
.title h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.85rem);
  margin: 0;
}
.title__a,
.title__b { display: block; white-space: nowrap; }
.title__b {
  font-style: italic;
  font-weight: 500;
}
.title .sc-lede {
  margin-top: var(--sc-5);
  color: var(--sc-ink-soft);
  max-width: 36ch;
}
.title__kicker {
  font-size: var(--sc-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-accent);
  margin: 0 0 var(--sc-5);
}

/* chapter spreads */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sc-7);
  align-items: center;
  padding: calc(var(--folio-h) + var(--sc-5)) var(--sc-gutter) var(--sc-7);
  min-height: 100vh;
  min-height: 100svh;
}
.spread--swap { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.spread__type { max-width: 36rem; }
.spread__type h2 { margin: 0 0 var(--sc-5); max-width: 16ch; }
.spread__type .sc-lede { margin-bottom: var(--sc-4); }
.spread__type .sc-body + .sc-body { margin-top: var(--sc-4); }
.spread__media { justify-self: center; width: min(100%, 24rem); }
.spread--peak {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.leak {
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 0;
}
.leak .spread { padding-block: var(--sc-7); }

.dwell {
  margin: var(--sc-4) 0 0;
  font-size: var(--sc-t-sm);
  color: var(--sc-accent);
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 280ms var(--sc-ease-out), transform 280ms var(--sc-ease-out);
}
.dwell.is-in { opacity: 1; transform: none; }

/* ========== THE TILL (signature) ========== */
.till {
  --till-fill: 0;
  width: min(100%, 22rem);
  margin: 0;
}
.till--live {
  --till-fill: var(--sc-p, 0);
  width: min(100%, 26rem);
}
.till__scale { position: relative; }
.till__tape {
  position: relative;
  width: 54%;
  margin: 0 auto 0.35rem;
  min-height: 4.6rem;
  background: #f4efe4;
  color: #1a1c16;
  border: 1px solid color-mix(in oklab, #1a1c16 22%, transparent);
  box-shadow: var(--sc-e1);
  padding: 0.45rem 0.55rem 0.7rem;
  font-family: var(--sc-font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}
.chapter--dusk .till__tape {
  background: #efe8d8;
  color: #1a1c16;
}
.till__print {
  display: block;
  opacity: 0;
}
.till__print--1 { opacity: clamp(0, calc(var(--till-fill) * 10 - 0.4), 1); }
.till__print--2 { opacity: clamp(0, calc(var(--till-fill) * 8 - 2.2), 1); }
.till__print--3 { opacity: clamp(0, calc(var(--till-fill) * 7 - 3.4), 1); font-weight: 600; }
.till--leak .till__print { opacity: 0; }
.till__serration {
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 8px;
  background:
    repeating-linear-gradient(90deg,
      #f4efe4 0 8px,
      transparent 8px 12px);
  clip-path: polygon(
    0 0, 100% 0,
    100% 100%, 92% 40%, 84% 100%, 76% 40%, 68% 100%,
    60% 40%, 52% 100%, 44% 40%, 36% 100%, 28% 40%,
    20% 100%, 12% 40%, 4% 100%, 0 40%
  );
}
.till__case {
  position: relative;
  background: color-mix(in oklab, var(--sc-surface) 70%, var(--sc-ink) 12%);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 55%, transparent);
  border-radius: 2px 2px 5px 5px;
  box-shadow: var(--sc-e2), var(--sc-edge);
  padding: 0.7rem 0.7rem 0.85rem;
}
.till__slot {
  height: 0.35rem;
  width: 58%;
  margin: 0 auto 0.65rem;
  background: color-mix(in oklab, var(--sc-ink) 72%, transparent);
  border-radius: 1px;
}
.till__brand {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: color-mix(in oklab, var(--sc-ink) 55%, transparent);
  margin: 0 0 0.55rem;
}
.till__drawer {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.45rem;
  min-height: 10.2rem;
  padding: 0.45rem;
  background: color-mix(in oklab, var(--sc-canvas) 55%, var(--sc-ink) 18%);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 40%, transparent);
  box-shadow: inset 0 8px 16px hsl(var(--sc-shadow-color) / 0.18);
  overflow: hidden;
}
.till__well {
  position: relative;
  border: 1px dashed color-mix(in oklab, var(--sc-ink) 28%, transparent);
  overflow: hidden;
}
.till__slip {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1.15rem;
  background: #f3ecdc;
  border: 1px solid color-mix(in oklab, #1a1c16 28%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklab, #1a1c16 12%, transparent);
  opacity: clamp(0, calc(var(--till-fill) * 8 - var(--n)), 1);
  transform: translateY(calc((1 - clamp(0, var(--till-fill) * 8 - var(--n), 1)) * 14px));
}
.till__slip::after {
  content: "";
  position: absolute;
  left: 8%; right: 28%;
  top: 46%;
  height: 1px;
  background: color-mix(in oklab, #1a1c16 28%, transparent);
}
.till__slip:nth-child(1) { --n: 0; bottom: 0.35rem; transform: translateY(calc((1 - clamp(0, var(--till-fill) * 8 - var(--n), 1)) * 14px)) rotate(-2deg); }
.till__slip:nth-child(2) { --n: 1; bottom: 1.2rem; left: 14%; right: 8%; }
.till__slip:nth-child(3) { --n: 2; bottom: 2.05rem; }
.till__slip:nth-child(4) { --n: 3; bottom: 2.9rem; left: 8%; right: 14%; transform: translateY(calc((1 - clamp(0, var(--till-fill) * 8 - var(--n), 1)) * 14px)) rotate(3deg); }
.till__slip:nth-child(5) { --n: 4; bottom: 3.75rem; }
.till__slip:nth-child(6) { --n: 5; bottom: 4.6rem; left: 16%; right: 10%; }

.till__coin {
  position: absolute;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #e8d9a8, #c4a45a 55%, #8a7030);
  border: 1px solid color-mix(in oklab, #1a1c16 35%, transparent);
  opacity: clamp(0, calc(var(--till-fill) * 7 - var(--n) - 0.4), 1);
  transform: translateY(calc((1 - clamp(0, var(--till-fill) * 7 - var(--n), 1)) * 18px));
}
.till__coin:nth-child(1) { --n: 0; bottom: 0.4rem; left: 18%; }
.till__coin:nth-child(2) { --n: 1; bottom: 0.55rem; left: 48%; }
.till__coin:nth-child(3) { --n: 2; bottom: 1.45rem; left: 32%; }
.till__coin:nth-child(4) { --n: 3; bottom: 2.2rem; left: 52%; }

/* leak: slips leave the drawer */
.chapter--dusk .till__case {
  background: #2a3126;
  border-color: color-mix(in oklab, var(--sc-ink) 42%, transparent);
}
.till--leak { --till-fill: 0; width: min(100%, 24rem); }
.till--leak .till__slip,
.till--leak .till__coin {
  opacity: calc(0.95 - var(--sc-p, 0) * 0.35);
}
.till--leak .till__slip:nth-child(1) { transform: translate3d(calc(var(--sc-p) * -28px), calc(var(--sc-p) * 42px), 0) rotate(calc(var(--sc-p) * -18deg)); }
.till--leak .till__slip:nth-child(2) { transform: translate3d(calc(var(--sc-p) * 36px), calc(var(--sc-p) * 54px), 0) rotate(calc(var(--sc-p) * 14deg)); }
.till--leak .till__slip:nth-child(3) { transform: translate3d(calc(var(--sc-p) * 18px), calc(var(--sc-p) * 70px), 0) rotate(calc(var(--sc-p) * 22deg)); }
.till--leak .till__slip:nth-child(4) { transform: translate3d(calc(var(--sc-p) * -22px), calc(var(--sc-p) * 60px), 0) rotate(calc(var(--sc-p) * -12deg)); }
.till--leak .till__slip:nth-child(5),
.till--leak .till__slip:nth-child(6) { opacity: 0.15; transform: none; }
.till--leak .till__coin:nth-child(1) { transform: translate3d(calc(var(--sc-p) * 40px), calc(var(--sc-p) * 48px), 0); }
.till--leak .till__coin:nth-child(2) { transform: translate3d(calc(var(--sc-p) * -24px), calc(var(--sc-p) * 62px), 0); }
.till--leak .till__coin:nth-child(3),
.till--leak .till__coin:nth-child(4) { opacity: 0.2; transform: none; }

.till__balance {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.till__needle {
  width: 3.2rem;
  height: 2px;
  background: var(--sc-accent);
  position: relative;
  transform: rotate(calc(-26deg + var(--till-fill, 0) * 52deg));
  transform-origin: 50% 50%;
}
.till__needle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--sc-ink);
  border-radius: 50%;
  translate: -50% -50%;
}
.till--leak .till__needle { transform: rotate(-26deg); }
.till__cap {
  margin: var(--sc-3) 0 0;
  font-size: var(--sc-t-xs);
  letter-spacing: 0.04em;
  color: var(--sc-ink-soft);
  max-width: 32ch;
}

/* ---- ops rail ---- */
.ops-stage {
  padding-top: var(--folio-h);
}
.rail {
  display: flex;
  align-items: stretch;
  gap: var(--sc-6);
  padding-inline: var(--sc-gutter);
  height: 100%;
}
.rail__lead,
.rail__end,
.plate {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rail__lead {
  width: clamp(18rem, 34vw, 28rem);
  padding-right: var(--sc-4);
}
.rail__lead h2 { margin: 0 0 var(--sc-4); max-width: 10ch; }
.rail__end {
  width: clamp(16rem, 26vw, 22rem);
}
.plate {
  width: clamp(18rem, 28vw, 24rem);
  min-height: 22rem;
  padding: var(--sc-6);
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline-strong);
  box-shadow: var(--sc-e1), var(--sc-edge);
  --i: 0;
}
.plate:nth-child(2) { --i: 1; }
.plate:nth-child(3) { --i: 2; }
.plate:nth-child(4) { --i: 3; }
@media (prefers-reduced-motion: no-preference) {
  .plate {
    opacity: max(0.55, calc(var(--sc-p) * 1.55 - var(--i) * 0.22));
    transform: translate3d(calc((1 - var(--sc-p)) * 1.6rem), 0, 0);
  }
}
.plate__schema {
  font-size: var(--sc-t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-6);
}
.plate h3 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  font-weight: 500;
  letter-spacing: var(--sc-track-snug);
  margin: 0 0 var(--sc-4);
  text-wrap: balance;
}
.plate p {
  margin: 0;
  color: var(--sc-ink-soft);
  max-width: 28ch;
}
.plate__mark {
  width: 2.2rem;
  height: 2px;
  background: var(--sc-accent);
  margin-bottom: var(--sc-5);
}

/* ---- kitchen / AI ---- */
.kitchen-spread { align-items: stretch; }
.kitchen {
  position: relative;
  height: min(72vh, 32rem);
  width: min(100%, 26rem);
}
.kitchen__layer { position: absolute; inset: 8% 6%; }
.kit {
  position: absolute;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 45%, transparent);
  background: color-mix(in oklab, var(--sc-surface) 80%, var(--sc-canvas));
  box-shadow: var(--sc-e1);
}
.kit--pad {
  inset: 12% 8% 28% 18%;
  border-radius: 2px;
}
.kit--pad::after {
  content: "";
  position: absolute;
  inset: 12% 12% auto;
  height: 55%;
  background:
    repeating-linear-gradient(
      to bottom,
      color-mix(in oklab, var(--sc-ink) 16%, transparent) 0 1px,
      transparent 1px 1.15rem
    );
}
.kit--phone {
  width: 3.2rem;
  height: 5.6rem;
  border-radius: 0.55rem;
  right: 8%;
  top: 18%;
}
.kit--phone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.35rem;
  width: 1.1rem;
  height: 0.22rem;
  background: color-mix(in oklab, var(--sc-ink) 35%, transparent);
  border-radius: 99px;
  translate: -50% 0;
}
.kit--book {
  width: 7.5rem;
  height: 5.2rem;
  left: 6%;
  bottom: 8%;
  border-radius: 1px 4px 4px 1px;
  background: color-mix(in oklab, var(--sc-accent) 12%, var(--sc-surface));
}
.kit--ticket {
  width: 4.4rem;
  height: 7.2rem;
  right: 22%;
  bottom: 4%;
  background: #f2ebdc;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 85% 100%, 70% 92%, 55% 100%, 40% 92%, 25% 100%, 10% 92%, 0 100%);
}
.kitchen__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: var(--sc-t-xs);
  letter-spacing: 0.04em;
  color: var(--sc-ink-soft);
}

/* ---- colophon ---- */
.colophon {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--folio-h) + var(--sc-7)) var(--sc-gutter) var(--sc-6);
}
.colophon__plate { max-width: 34rem; }
.colophon__mark {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  font-weight: 500;
  margin: 0 0 var(--sc-3);
}
.colophon__tag {
  margin: 0 0 var(--sc-6);
  color: var(--sc-ink-soft);
}
.colophon__ask {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg);
  line-height: 1.35;
  max-width: 28ch;
  margin: 0 0 var(--sc-5);
  text-wrap: pretty;
}
.colophon__cta {
  color: var(--sc-accent);
  font-weight: 500;
  text-underline-offset: 0.22em;
}
.colophon__cta:hover { color: var(--sc-ink); }
.colophon__cta:active { transform: scale(0.97); }
.colophon__note {
  margin: var(--sc-4) 0 0;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
  max-width: 48ch;
}
.colophon__quiet {
  margin: var(--sc-5) 0 0;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}
.colophon__quiet a { color: inherit; }
.colophon__quiet a:hover { color: var(--sc-accent); }
.foot {
  margin-top: var(--sc-8);
  padding-top: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
  display: flex;
  justify-content: space-between;
  gap: var(--sc-4);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

@media (max-width: 860px) {
  .folio {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--folio-h) + env(safe-area-inset-top));
  }
  .title {
    align-items: flex-end;
    padding-top: calc(var(--folio-h) + env(safe-area-inset-top) + var(--sc-5));
  }
  .title__a,
  .title__b { white-space: normal; }
  .title h1 { font-size: var(--sc-t-2xl); }
  .spread {
    grid-template-columns: 1fr;
    gap: var(--sc-5);
    align-content: center;
    padding-block: calc(var(--folio-h) + env(safe-area-inset-top) + var(--sc-4)) var(--sc-5);
  }
  .spread--swap { grid-template-columns: 1fr; }
  .spread--swap .spread__media { order: 2; }
  .spread--peak h2 { font-size: var(--sc-t-2xl); }
  .till { width: min(100%, 18.5rem); }
  .kitchen { height: 16rem; }
  .plate { min-height: 18rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dwell { transform: none; }
  .till__slip,
  .till__coin,
  .till__needle { transition: none; }
}