/* =========================================================
   Garam Chai by Shipra — site theme
   The box posters (docs/brand/GC1.png, GC2.png) as a web page,
   sharing one palette and one display face with The Chai Universe
   app (Garam-Chai/garamchai-ios, ChaiCore/DesignSystem.swift):
   a paisley-tiled frame, a parchment panel held by a saffron
   keyline, Shrikhand saffron lettering on the frame, crimson on
   parchment, eight-petal flower badges and ochre dotted rules.
   No build step: tokens are custom properties on :root and this
   file is served as-is. DESIGN.md documents every role below.
   ========================================================= */

:root {
  /* ---- Palette: ChaiPalette, hex for hex ---- */
  --indigo: #1e2557;
  --indigo-deep: #141a40;
  --plum: #4a1a49;
  --cream: #f8eac8;
  --parchment: #f1dcab;
  --saffron: #f5b531;
  --marigold: #f08a24;
  --magenta: #d0287a;
  --crimson: #b8143f;
  --maroon: #7a1236;
  --teal: #1e8c7a;
  --leaf: #5fa35b;
  --ochre: #c79a3f;
  --ink: #3b2314;            /* body text and every illustration outline; dark brown, never black */
  --chai: #b9651f;
  --white: #fff;             /* the outline ring on crimson lettering only */

  /* ---- Tints, mixed from the tokens (ChaiColor.inkSoft / creamSoft and friends) ---- */
  --ink-soft: color-mix(in srgb, var(--ink) 72%, transparent);
  --cream-soft: color-mix(in srgb, var(--cream) 78%, transparent);
  --cream-35: color-mix(in srgb, var(--cream) 35%, transparent);
  --cream-50: color-mix(in srgb, var(--cream) 50%, transparent);
  --cream-12: color-mix(in srgb, var(--cream) 12%, transparent);
  --ink-60: color-mix(in srgb, var(--ink) 60%, transparent);
  --maroon-12: color-mix(in srgb, var(--maroon) 12%, transparent);
  --maroon-55: color-mix(in srgb, var(--maroon) 55%, transparent);
  --maroon-80: color-mix(in srgb, var(--maroon) 80%, transparent);
  --indigo-deep-70: color-mix(in srgb, var(--indigo-deep) 70%, transparent);
  --parchment-55: color-mix(in srgb, var(--parchment) 55%, transparent);

  /* ---- Frame ---- */
  --frame: var(--plum);
  --frame-pad: clamp(14px, 4vw, 44px);
  --frame-tile: 120px;
  --measure: 1080px;
  --measure-narrow: 560px;

  /* ---- Spacing ---- */
  --sp-hair: 4px;
  --sp-xs: 6px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-row: 16px;
  --sp-lg: 20px;
  --sp-stack: 28px;
  --panel-y: clamp(24px, 4.5vw, 52px);
  --panel-x: clamp(16px, 5vw, 64px);
  --gutter: clamp(20px, 5vw, 56px);

  /* ---- Radii ---- */
  --r-focus: 6px;
  --r-skip: 8px;
  --r-note: 14px;
  --r-panel: 22px;
  --r-frame: 28px;
  --r-frame-narrow: 20px;
  --r-capsule: 999px;

  /* ---- Type ---- */
  --font-title: "Shrikhand", Georgia, serif;
  --font-head: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Nunito", "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- Rules ---- */
  --dots: radial-gradient(circle, var(--ochre) 1.2px, transparent 1.6px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* The app's ground: indigo at the top, indigo-deep through the middle, plum at the foot. */
  background: var(--indigo-deep);
  background-image: linear-gradient(180deg, var(--indigo) 0, var(--indigo-deep) 45%, var(--plum) 100%);
  min-height: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  overflow-x: hidden;
  accent-color: var(--saffron);
}
img, svg { max-width: 100%; }
a { color: var(--maroon); text-underline-offset: .15em; }
::selection { background: var(--saffron); color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: var(--r-focus); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--sp-row); top: -60px; z-index: 10;
  background: var(--cream); color: var(--maroon); padding: var(--sp-sm) 14px; border-radius: var(--r-skip);
}
.skip:focus { top: var(--sp-md); }

/* ---------- Top nav ---------- */
.topnav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  flex-wrap: wrap;
  max-width: var(--measure); margin: 0 auto; padding: 14px var(--sp-row);
}
.topnav .brand {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-family: var(--font-title); font-weight: 400;
  color: var(--cream); text-decoration: none; font-size: 1.1rem;
}
.topnav .brand svg { width: 30px; height: 30px; }
.topnav ul { display: flex; gap: var(--sp-xs); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.topnav ul a {
  display: inline-block; padding: var(--sp-xs) var(--sp-md); border-radius: var(--r-capsule);
  font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem;
  color: var(--cream); text-decoration: none; border: 1.5px solid var(--cream-35);
  transition: background-color 150ms ease, border-color 150ms ease;
}
@media (hover: hover) { .topnav ul a:hover { background: var(--cream-12); border-color: var(--saffron); } }

/* ---------- Poster frame ----------
   A poster is: [poster-head] [panel-wrap: corners + panel] [poster-foot].
   The head and foot sit on the frame; the panel is the parchment. */
.poster {
  --crown-h: 0px;
  position: relative;
  container-type: inline-size;
  max-width: var(--measure);
  margin: 0 auto var(--sp-stack);
  padding: var(--frame-pad);
  border-radius: var(--r-frame);
  background-color: var(--frame);
  background-image: url("/assets/img/border-tile.svg");
  background-size: var(--frame-tile) var(--frame-tile);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--indigo-deep) 60%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--indigo-deep) 35%, transparent);
}
.poster.indigo { --frame: var(--indigo); }
.poster.teal { --frame: var(--teal); }
@media (max-width: 1120px) { .poster { margin-left: var(--sp-md); margin-right: var(--sp-md); } }
@media (max-width: 480px) {
  .poster { margin-left: var(--sp-sm); margin-right: var(--sp-sm); border-radius: var(--r-frame-narrow); --frame-tile: 84px; }
}

.panel-wrap { position: relative; }

/* Corner paisleys sit on the frame at the panel's corners, overlapping the panel edge slightly.
   Default colours magenta / marigold / saffron; .v2 teal / saffron / magenta; .v3 marigold / magenta / saffron. */
.corner {
  position: absolute; width: clamp(34px, 7vw, 70px); height: auto; aspect-ratio: 64 / 100;
  z-index: 2; pointer-events: none;
  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--indigo-deep) 50%, transparent));
}
.corner.v2 { --p1: var(--teal); --p2: var(--saffron); --p3: var(--magenta); }
.corner.v3 { --p1: var(--marigold); --p2: var(--magenta); --p3: var(--saffron); }
.corner.tl { top: calc(4px - var(--frame-pad) - var(--crown-h)); left: calc(6px - var(--frame-pad)); transform: rotate(-20deg); }
.corner.tr { top: calc(4px - var(--frame-pad) - var(--crown-h)); right: calc(6px - var(--frame-pad)); transform: scaleX(-1) rotate(-20deg); }
.corner.bl { bottom: calc(4px - var(--frame-pad)); left: calc(6px - var(--frame-pad)); transform: rotate(200deg) scaleX(-1); }
.corner.br { bottom: calc(4px - var(--frame-pad)); right: calc(6px - var(--frame-pad)); transform: rotate(160deg); }

.panel {
  position: relative; z-index: 0;
  background: var(--cream);
  background-image: radial-gradient(ellipse at 50% 100%, var(--parchment) 0%, transparent 70%);
  border-radius: var(--r-panel);
  padding: var(--panel-y) var(--panel-x);
  box-shadow: 0 0 0 3px var(--saffron), 0 0 0 6px var(--indigo-deep-70), inset 0 0 30px color-mix(in srgb, var(--maroon) 8%, transparent);
}

/* The scalloped crown (GC2, the app's ArchPanelShape): an inline SVG arch that rises from the
   panel's top edge into the frame. Its strokes repeat the panel keyline; the panel's top corners
   go square so the rings join. */
.poster.crowned { --crown-h: 13cqw; }
.poster.crowned .panel-wrap { margin-top: var(--crown-h); }
.panel.crowned { border-top-left-radius: 0; border-top-right-radius: 0; }
.crown {
  position: absolute; left: 0; top: calc(-1 * var(--crown-h)); z-index: -1;
  width: 100%; height: auto; aspect-ratio: 1000 / 160;
  overflow: visible; pointer-events: none;
}
.crown .ring { fill: none; stroke: var(--indigo-deep-70); stroke-width: 12; vector-effect: non-scaling-stroke; }
.crown .keyline { fill: none; stroke: var(--saffron); stroke-width: 6; vector-effect: non-scaling-stroke; }
.crown .paper { fill: var(--cream); }

/* ---------- Poster head: lettering on the frame (GC1, chaiDisplayOnIndigo) ---------- */
.poster-head {
  text-align: center; color: var(--cream);
  padding: clamp(2px, 1vw, 10px) clamp(8px, 3vw, 24px) clamp(14px, 3vw, 26px);
  background: linear-gradient(90deg, transparent, var(--frame) 12%, var(--frame) 88%, transparent);
}
.poster-head .title {
  color: var(--saffron);
  text-shadow:
    2px 0 0 var(--indigo-deep), -2px 0 0 var(--indigo-deep), 0 2px 0 var(--indigo-deep), 0 -2px 0 var(--indigo-deep),
    1.5px 1.5px 0 var(--indigo-deep), -1.5px 1.5px 0 var(--indigo-deep), 1.5px -1.5px 0 var(--indigo-deep), -1.5px -1.5px 0 var(--indigo-deep),
    0 5px 0 var(--indigo-deep);
}
.poster-head .title small {
  display: block; margin-top: var(--sp-sm);
  font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: .2em;
  font-size: clamp(.85rem, 2vw, 1.05rem); line-height: 1.3;
  color: var(--cream-soft); text-shadow: none;
}
.poster-head .subtitle { color: var(--cream); }
.poster-head .subtitle::before { background: linear-gradient(90deg, transparent, var(--magenta) 30%, var(--magenta)); }
.poster-head .subtitle::after { background: linear-gradient(270deg, transparent, var(--magenta) 30%, var(--magenta)); }

/* ---------- Poster foot: the signature band on the frame (GC1 row, GC2 stack) ---------- */
.poster-foot {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(12px, 3vw, 26px);
  padding: clamp(14px, 3vw, 24px) clamp(8px, 3vw, 24px) 0;
  color: var(--cream); text-align: center;
  background: linear-gradient(90deg, transparent, var(--frame) 12%, var(--frame) 88%, transparent);
}
.poster-foot .sig { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.15rem, 3vw, 1.6rem); line-height: 1.2; }
.poster-foot .cup { width: 56px; height: 56px; flex: none; }
.poster-foot .divider { width: 2px; height: 34px; background: var(--cream-50); }
.poster-foot .ig {
  color: var(--cream); font-weight: 700; font-size: clamp(1.05rem, 3vw, 1.35rem);
  text-decoration: none; border-bottom: 2px solid var(--saffron); transition: color 150ms ease;
}
@media (hover: hover) { .poster-foot .ig:hover { color: var(--saffron); } }
.poster-foot.stacked { flex-direction: column; gap: var(--sp-hair); }
.poster-foot.stacked .p1 { font-family: var(--font-title); font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.2; color: var(--saffron); }
.poster-foot.stacked .p2 {
  display: flex; align-items: center; gap: var(--sp-sm);
  font-family: var(--font-head); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; font-size: .85rem; color: var(--cream-soft);
}
.poster-foot.stacked .p2::before, .poster-foot.stacked .p2::after { content: "• • •"; color: var(--saffron); letter-spacing: .15em; }
.poster-foot.stacked .ig { font-size: .98rem; border-bottom-width: 0; }
@media (max-width: 520px) { .poster-foot .divider { display: none; } .poster-foot { flex-direction: column; gap: var(--sp-xs); } }

/* ---------- Type roles ---------- */
.title {
  font-family: var(--font-title); font-weight: 400;
  color: var(--crimson);
  font-size: clamp(1.9rem, 6vw, 3.6rem);
  line-height: 1.1; margin: 0; text-align: center;
  text-wrap: balance;
  text-shadow:
    2px 0 0 var(--white), -2px 0 0 var(--white), 0 2px 0 var(--white), 0 -2px 0 var(--white),
    1.5px 1.5px 0 var(--white), -1.5px 1.5px 0 var(--white), 1.5px -1.5px 0 var(--white), -1.5px -1.5px 0 var(--white),
    0 4px 0 var(--maroon-55);
}
.subtitle {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-md);
  margin: 10px auto 0; max-width: 640px;
  font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.3rem); color: var(--maroon); text-align: center;
}
.subtitle::before, .subtitle::after {
  content: ""; flex: 1 1 40px; max-width: 120px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--crimson) 30%, var(--crimson));
}
.subtitle::after { background: linear-gradient(270deg, transparent, var(--crimson) 30%, var(--crimson)); }
.section-head {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--indigo); line-height: 1.1;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin: 0;
}
.tagline { color: var(--crimson); font-style: italic; font-weight: 700; margin: 2px 0 var(--sp-hair); }
.lede { font-size: clamp(1.05rem, 2.4vw, 1.25rem); margin: 0; }
.caption { font-size: .85rem; color: var(--ink-soft); text-align: center; margin: 14px 0 0; }
.caption a { color: var(--maroon); }

/* ---------- Buttons (ChaiPrimaryButtonStyle / ChaiSecondaryButtonStyle, printed) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
  min-height: 50px; padding: 12px 22px; border-radius: var(--r-capsule); text-decoration: none;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 1.02rem;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--saffron); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-60), 0 3px 0 var(--indigo-deep); }
.btn.secondary { background: transparent; color: var(--maroon); border: 1.5px solid var(--maroon-80); }
@media (hover: hover) {
  .btn.primary:hover { background: color-mix(in srgb, var(--saffron) 80%, var(--marigold)); }
  .btn.secondary:hover { background: var(--maroon-12); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin-top: 18px; }
.cta-stack { display: grid; gap: var(--sp-md); }
.cta-stack .btn { width: 100%; }

/* ---------- Flower badge and numbered steps (FlowerBadge, ChaiColor.badge(at:)) ---------- */
.badge { position: relative; width: clamp(56px, 10vw, 78px); aspect-ratio: 1; display: grid; place-items: center; flex: none; }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.badge span { position: relative; font-family: var(--font-head); font-weight: 700; color: var(--on-badge, var(--cream)); font-size: clamp(1.4rem, 3.6vw, 1.9rem); line-height: 1; }
.badge.sm { width: 48px; }
.badge.sm span { font-size: 1.3rem; }
/* The badge cycle: magenta, teal, saffron, marigold, by position in the list; ink on the light fills. */
.fact-list > :nth-child(4n+1) .badge, .step-list > :nth-child(4n+1) .badge { --badge: var(--magenta); --on-badge: var(--cream); }
.fact-list > :nth-child(4n+2) .badge, .step-list > :nth-child(4n+2) .badge { --badge: var(--teal); --on-badge: var(--cream); }
.fact-list > :nth-child(4n+3) .badge, .step-list > :nth-child(4n+3) .badge { --badge: var(--saffron); --on-badge: var(--ink); }
.fact-list > :nth-child(4n+4) .badge, .step-list > :nth-child(4n+4) .badge { --badge: var(--marigold); --on-badge: var(--ink); }

.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-md); }
.step-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-md); align-items: center; font-size: 1rem; line-height: 1.4; }
.step-list strong { display: block; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--maroon); font-size: 1.08rem; }
.step-list.cols { grid-template-columns: repeat(3, 1fr); gap: var(--sp-row) var(--gutter); }
@media (max-width: 760px) { .step-list.cols { grid-template-columns: 1fr; } }

/* ---------- Note: a parchment slip pinned on the panel (the app's flat notice panel) ---------- */
.note {
  background: var(--parchment-55); border: 1.5px dashed var(--ochre); border-radius: var(--r-note);
  padding: 14px var(--sp-row); font-size: .98rem;
}

/* ---------- Hero ---------- */
.hero-grid {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(16px, 4vw, 40px); align-items: center;
}
.hero-copy .tagline { font-size: clamp(1.15rem, 3vw, 1.45rem); margin: 0 0 var(--sp-md); }
.hero-art { display: grid; place-items: center; }
.hero-art .halo {
  width: min(340px, 100%); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, var(--cream) 0 48%, transparent 49%),
              conic-gradient(from 0deg, var(--magenta) 0 8%, var(--saffron) 0 16%, var(--teal) 0 25%,
                             var(--magenta) 0 33%, var(--saffron) 0 41%, var(--teal) 0 50%,
                             var(--magenta) 0 58%, var(--saffron) 0 66%, var(--teal) 0 75%,
                             var(--magenta) 0 83%, var(--saffron) 0 91%, var(--teal) 0 100%);
  -webkit-mask: radial-gradient(circle, #000 0 66%, transparent 67%);
          mask: radial-gradient(circle, #000 0 66%, transparent 67%);
}
.hero-art .halo svg { width: 68%; height: auto; filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--indigo-deep) 30%, transparent)); }
.hero-steps {
  margin-top: clamp(24px, 4vw, 36px); padding-top: clamp(18px, 3vw, 26px);
  background: var(--dots) left top / 7px 3px repeat-x;
}
.hero-steps .section-head { text-align: center; margin-bottom: var(--sp-row); font-size: clamp(1.1rem, 2.4vw, 1.3rem); color: var(--maroon); }
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .cta-row { justify-content: center; }
  .hero-art { order: -1; }
  .hero-art .halo { width: min(220px, 70%); }
}

/* ---------- Spices (poster 1) ---------- */
.spice-grid {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); row-gap: var(--sp-lg);
  grid-template-rows: repeat(5, auto); grid-auto-flow: column;
  list-style: none; padding: 0; margin: 0;
}
.spice-grid li { min-width: 0; }
.spice-grid p { margin: 0; }
@media (max-width: 640px) { .spice-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; row-gap: var(--sp-row); } }

.disclaimer {
  margin: clamp(24px, 4vw, 34px) auto 0; max-width: 760px; text-align: center;
  font-size: .9rem; color: var(--ink-soft);
  padding: var(--sp-md) 0; border-top: 1.5px solid var(--crimson); border-bottom: 1.5px solid var(--crimson);
}
.disclaimer p { margin: 0; }
.disclaimer p + p { margin-top: var(--sp-hair); }

.photo-slot {
  margin: clamp(22px, 4vw, 34px) calc(-1 * var(--panel-x)) calc(-1 * var(--panel-y));
  border-radius: 0 0 var(--r-panel) var(--r-panel); overflow: hidden; line-height: 0;
}
.photo-slot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Fun facts (poster 2) ---------- */
.facts-head { text-align: center; margin-top: calc(5cqw - var(--crown-h)); }
.facts-head .fan { display: block; width: 110px; height: 58px; margin: 0 auto var(--sp-hair); }
.facts-title { margin: 0; font-family: var(--font-title); font-weight: 400; line-height: 1; text-align: center; color: var(--crimson); }
.facts-title span { display: block; text-shadow: 2px 0 0 var(--white), -2px 0 0 var(--white), 0 2px 0 var(--white), 0 -2px 0 var(--white), 0 4px 0 var(--maroon-55); }
.facts-title .l1 { font-size: clamp(1.8rem, 6vw, 3.2rem); }
.facts-title .l2 { font-size: clamp(2.5rem, 9vw, 4.8rem); }
.kicker {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 10px 0 0; font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--maroon); font-size: clamp(1rem, 2.6vw, 1.3rem);
}
.kicker::before, .kicker::after { content: "• • • • ✦"; color: var(--crimson); font-size: .7em; letter-spacing: .1em; }
.kicker::after { content: "✦ • • • •"; }
@media (max-width: 480px) { .facts-head .fan { width: 84px; height: 44px; } }

.fact-list { list-style: none; margin: clamp(18px, 3vw, 28px) auto 0; padding: 0; max-width: 860px; }
.fact {
  display: grid; grid-template-columns: auto 1fr 132px; gap: clamp(12px, 3vw, 26px); align-items: center;
  padding: var(--sp-row) 0;
  background: var(--dots) left bottom / 7px 3px repeat-x;
}
.fact:last-child { background: none; }
.fact h3 {
  margin: 0 0 var(--sp-hair); font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  color: var(--crimson); font-size: clamp(1.15rem, 2.6vw, 1.5rem); letter-spacing: .02em; line-height: 1.15;
}
.fact p { margin: 0; }
.fact .art { width: 132px; height: 99px; }
@media (max-width: 560px) {
  .fact { grid-template-columns: auto 1fr; align-items: start; }
  .fact .art { grid-column: 2; width: 96px; height: 72px; justify-self: start; margin-top: -6px; }
}

/* ---------- Prose panels (privacy) ---------- */
.prose h2 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--maroon); font-size: clamp(1.15rem, 2.6vw, 1.4rem); line-height: 1.15; margin: clamp(22px, 4vw, 30px) 0 var(--sp-xs); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 var(--sp-md); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--sp-hair); }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; background: var(--parchment-55); padding: .05em .35em; border-radius: 4px; }
.prose .updated { font-size: .9rem; color: var(--ink-soft); margin-top: var(--sp-lg); padding-top: var(--sp-md); background: var(--dots) left top / 7px 3px repeat-x; }

/* ---------- Site footer: one quiet line under the last poster ---------- */
.site-footer { max-width: var(--measure); margin: 0 auto; padding: 0 0 var(--sp-stack); }
.footer-meta { text-align: center; color: var(--cream-soft); font-size: .85rem; margin: 0; }
.footer-meta a { color: var(--cream); }

/* ---------- Narrow pages (scan, 404, privacy): one 560px poster ---------- */
.page-narrow .poster, .page-narrow .site-footer { max-width: var(--measure-narrow); }
.page-narrow .poster-head .title { font-size: clamp(1.7rem, 7vw, 2.3rem); }
.page-narrow .poster-foot { flex-direction: column; gap: var(--sp-xs); }
.page-narrow .poster-foot .divider { display: none; }
.page-narrow .topnav { max-width: var(--measure-narrow); }
.page-center { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--sp-row); }
.page-center .poster, .page-center .site-footer { width: 100%; }
.page-center .poster { width: auto; align-self: stretch; }
@media (min-width: 584px) { .page-center .poster { width: var(--measure-narrow); align-self: center; } }

/* =========================================================
   Polish pass (2026-11-07): photographs, warmth, entrance, press
   ========================================================= */

/* A low saffron glow at the top of the ground, so the hero sits in lamplight
   instead of on a flat field; mixed from the token, no new colour. */
html {
  background-image:
    radial-gradient(ellipse 70% 40% at 50% 0, color-mix(in srgb, var(--saffron) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--indigo) 0, var(--indigo-deep) 45%, var(--plum) 100%);
}

/* The hero's name is the poster's loudest lettering. */
.hero .poster-head .title { font-size: clamp(2.6rem, 8vw, 4.8rem); line-height: 1; }
.hero .poster-head .title small { margin-top: var(--sp-md); }
.hero .section-head { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.hero .lede { max-width: 34em; }
.hero-steps .step-list li { font-size: 1.02rem; }

/* The halo: the conic ring moves to a layer of its own so it can turn while the cup stays upright. */
.hero-art .halo { position: relative; background: none; -webkit-mask: none; mask: none; }
.hero-art .halo::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--cream) 0 48%, transparent 49%),
              conic-gradient(from 0deg, var(--magenta) 0 8%, var(--saffron) 0 16%, var(--teal) 0 25%,
                             var(--magenta) 0 33%, var(--saffron) 0 41%, var(--teal) 0 50%,
                             var(--magenta) 0 58%, var(--saffron) 0 66%, var(--teal) 0 75%,
                             var(--magenta) 0 83%, var(--saffron) 0 91%, var(--teal) 0 100%);
  -webkit-mask: radial-gradient(circle, #000 0 66%, transparent 67%);
          mask: radial-gradient(circle, #000 0 66%, transparent 67%);
  transition: transform 900ms var(--ease-out);
}
.hero-art .halo svg { position: relative; }
@media (hover: hover) { .hero-art:hover .halo::before { transform: rotate(30deg); } }

/* The two images: a diptych bled to the panel's foot, split by the saffron keyline. */
.photo-slot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--saffron);
  box-shadow: 0 -3px 0 var(--saffron);
}
.photo-slot img { aspect-ratio: 4 / 3; height: 100%; }
.photo-slot img:last-child { object-position: 40% 50%; }
@media (max-width: 640px) { .photo-slot { grid-template-columns: 1fr; } .photo-slot img { aspect-ratio: 16 / 10; } }

/* Buttons are printed: they rise a touch on hover and press down onto their offset. */
.btn { transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 150ms ease; }
@media (hover: hover) {
  .btn.primary:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--ink-60), 0 4px 0 var(--indigo-deep); }
  .btn.secondary:hover { transform: translateY(-1px); }
}
.btn.primary:active { transform: translateY(2px) scale(.99); box-shadow: inset 0 0 0 1.5px var(--ink-60), 0 1px 0 var(--indigo-deep); }
.btn.secondary:active { transform: translateY(1px) scale(.99); }

/* The hero enters once on load: the lettering settles, the panel follows, the halo turns into place. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes gc-rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes gc-turn { from { opacity: 0; transform: rotate(-120deg) scale(.86); } }
  @keyframes gc-pop  { from { opacity: 0; transform: scale(.7); } }
  .hero .poster-head > * { animation: gc-rise 700ms var(--ease-out) both; }
  .hero .poster-head .subtitle { animation-delay: 120ms; }
  .hero .hero-copy > * { animation: gc-rise 700ms var(--ease-out) both; animation-delay: 180ms; }
  .hero .hero-copy > :nth-child(2) { animation-delay: 240ms; }
  .hero .hero-copy > :nth-child(3) { animation-delay: 300ms; }
  .hero .hero-copy > :nth-child(4) { animation-delay: 360ms; }
  .hero-art .halo::before { animation: gc-turn 1300ms var(--ease-out) both; animation-delay: 150ms; }
  .hero-art .halo svg { animation: gc-pop 800ms var(--ease-out) both; animation-delay: 450ms; }
  .hero-steps .badge { animation: gc-pop 600ms var(--ease-out) both; }
  .hero-steps li:nth-child(1) .badge { animation-delay: 600ms; }
  .hero-steps li:nth-child(2) .badge { animation-delay: 700ms; }
  .hero-steps li:nth-child(3) .badge { animation-delay: 800ms; }
}

/* Steps align on their heads, not their centres, so the three columns read as one row. */
.hero-steps .step-list li { align-items: start; }
.hero-steps .step-list .badge { margin-top: 2px; }
.footer-meta a { display: inline-block; padding: 10px 4px; }

/* Tap targets: every link outside running text is at least 44px tall. */
.topnav .brand { min-height: 44px; }
.topnav ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
.poster-foot .ig { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0;
  background: linear-gradient(var(--saffron), var(--saffron)) left calc(50% + .8em) / 100% 2px no-repeat; }
.poster-foot.stacked .ig { background: none; }
.footer-meta a { padding: 12px 6px; }
/* The handle's own underline is saffron, so its focus ring goes cream to stay visible. */
.poster-foot .ig:focus-visible, .site-footer a:focus-visible, .topnav a:focus-visible { outline-color: var(--cream); }
/* On phones the top corner paisleys reach into the panel; the spice list starts clear of them. */
@media (max-width: 640px) { #spices .panel { padding-top: calc(var(--panel-y) + 18px); } #spices .panel, #facts .panel { padding-left: 22px; padding-right: 22px; } }

/* =========================================================
   The live cup (hero): the sprite's #cup drawn inline so its parts move.
   Every fill is a palette token; every outline is ink.
   ========================================================= */
.hero-art .halo .cup-live { width: 76%; height: auto; overflow: visible; position: relative; }
.cup-live path, .cup-live ellipse, .cup-live circle, .cup-live rect { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.cup-live .steam path { fill: none; stroke: var(--saffron); stroke-width: 5; stroke-linecap: round; }
.cup-live .saucer { fill: var(--saffron); }
.cup-live .handle-ink { fill: none; stroke: var(--ink); stroke-width: 14; stroke-linecap: round; }
.cup-live .handle { fill: none; stroke: var(--magenta); stroke-width: 8; stroke-linecap: round; }
.cup-live .body { fill: var(--magenta); }
.cup-live .band { fill: var(--saffron); stroke: none; }
.cup-live .band-dash { stroke-width: 1.2; stroke-dasharray: 3 4; fill: none; }
.cup-live .m1 { fill: var(--marigold); }
.cup-live .m2 { fill: var(--saffron); stroke-width: 1.5; }
.cup-live .leaf { fill: var(--leaf); stroke-width: 1.5; }
.cup-live .rim { fill: var(--maroon); }
.cup-live .tea { fill: var(--chai); stroke-width: 1.5; }
.cup-live .swirl path { fill: none; stroke: color-mix(in srgb, var(--cream) 70%, var(--chai)); stroke-width: 22; stroke-linecap: round; opacity: .75; }
.cup-live .ripple { fill: none; stroke: var(--cream); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cup-live .spice > g { opacity: 0; transform-box: fill-box; transform-origin: center; }
.cup-live .star path { fill: color-mix(in srgb, var(--maroon) 60%, var(--chai)); stroke-width: 1.5; }
.cup-live .star .star2 { fill: var(--chai); }
.cup-live .star-eye { fill: var(--saffron); stroke-width: 1; }
.cup-live .pod path { fill: var(--leaf); stroke-width: 1.5; }
.cup-live .pod .pod-seam { fill: none; stroke-width: 1; }
.cup-live .stick rect { fill: var(--chai); stroke-width: 1.5; }
.cup-live .stick .stick-curl { fill: none; stroke-width: 1; }
.cup-live .swirl, .cup-live .tea { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  /* On load: steam draws itself up out of the cup and rests, drawn. */
  @keyframes gc-steam-in {
    0%   { stroke-dashoffset: 90; opacity: 0; transform: translateY(10px); }
    60%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; transform: none; }
  }
  .cup-live .steam path { stroke-dasharray: 90; animation: gc-steam-in 1600ms var(--ease-out) both; }
  .cup-live .steam .s1 { animation-delay: 2300ms; }
  .cup-live .steam .s2 { animation-delay: 2450ms; }
  .cup-live .steam .s3 { animation-delay: 2600ms; }

  /* Spices drop in one after another, each with a ripple where it lands. */
  @keyframes gc-drop {
    0%   { opacity: 0; transform: translateY(-120px) rotate(-40deg); }
    12%  { opacity: 1; }
    78%  { opacity: 1; transform: translateY(0) rotate(20deg); }
    100% { opacity: 0; transform: translateY(5px) rotate(28deg) scale(.55); }
  }
  @keyframes gc-ripple {
    0%   { opacity: .95; transform: scale(.2); }
    100% { opacity: 0; transform: scale(1.5); }
  }
  .cup-live .spice > g { animation: gc-drop 1000ms cubic-bezier(.55, 0, 1, .45) both; }
  .cup-live .star > g  { animation-delay: 900ms; }
  .cup-live .pod > g   { animation-delay: 1300ms; }
  .cup-live .stick > g { animation-delay: 1700ms; }
  .cup-live .ripple { animation: gc-ripple 800ms var(--ease-out) both; }
  .cup-live .r1 { animation-delay: 1680ms; }
  .cup-live .r2 { animation-delay: 2080ms; }
  .cup-live .r3 { animation-delay: 2480ms; }

  /* Hovering the cup: the steam drifts and the foam turns, for as long as the pointer stays. */
  @keyframes gc-drift {
    0%, 100% { transform: translateY(0) scaleX(1); opacity: 1; }
    50%      { transform: translateY(-6px) scaleX(1.06); opacity: .65; }
  }
  @keyframes gc-swirl { to { transform: rotate(360deg); } }
  @keyframes gc-slosh { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.82); } }
  @media (hover: hover) {
    .hero-art:hover .cup-live .steam path { animation: gc-drift 3s ease-in-out infinite; stroke-dashoffset: 0; opacity: 1; transform-box: fill-box; transform-origin: bottom; }
    .hero-art:hover .cup-live .steam .s2 { animation-delay: -1s; }
    .hero-art:hover .cup-live .steam .s3 { animation-delay: -2s; }
    .hero-art:hover .cup-live .swirl { animation: gc-swirl 3.5s linear infinite; }
    .hero-art:hover .cup-live .tea { animation: gc-slosh 2.8s ease-in-out infinite; }
  }
}