/* River City Baking Co.: one frame that holds still.
   Laid from Reed's working model (November 12, 4:41 PM), which Kelly said yes to at 4:45 PM.
   November 13, evening: the buyer's pages take the invitation's depth, at Kelly's yes of 8:38 PM.
   The frame is the paper card, lying on the indigo ground, with a brass line inside its edge; the name
   sits on its raised sign; the photograph's window is set below the paper; the main button is the
   indigo plate. Every value is the invitation's own (workshop/reading/assets/2026-11-13-river-city-
   baking-invitation/index.html), sized for a phone.
   Every colour and face is a token here at the top. The house lists share this sheet and keep their
   plain look: everything new is under .framed (the order page) and .ground (the thank-you). */

@font-face {
  font-family: "Bitter";
  src: url("/fonts/bitter-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* The plate face: numbers, small capitals and buttons. Barlow Semi Condensed 600, free to use (OFL),
   the invitation's own; made smaller by scripts/make-plate-font.py. */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("/fonts/barlow-sc-600.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour: NOT CHOSEN. Reed's daylight, one ink, one red that only ever means pecans. */
  --white: #ffffff;   /* the ground */
  /* November 14: Astra's shared values (label refined pair v2, brand-values.json), at Kelly's word of
     11:17 AM: the refined indigo, quieter brass, the crafted lights. One look, everywhere. */
  --ink: #34355a;     /* the ink: the refined indigo */
  --soft: #67657a;    /* the same ink, thinner */
  --rule: #d5cfc1;    /* ruled lines: Astra's panel edge */
  --quiet: #f2f0f5;   /* the empty frame, pressed buttons: Astra's pale panel */
  --toffee: #806039;  /* toffee lettering, for small headings where a piece asks for it */
  --shade: 36, 37, 64;  /* the shadow's colour, the indigo deepened; used as rgba(var(--shade), a) */
  --dial: #c2372e;    /* the red dot: pecans, and nothing else */

  /* type: Kelly's lettering, Bitter at 500 (chosen). Numbers and buttons in a dial face (NOT chosen). */
  --text: "Bitter", Georgia, serif;
  --plate: "DIN Alternate", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;

  --pad: 20px;
  --slide: .42s cubic-bezier(.22, .7, .12, 1);

  /* the invitation's object (November 13): a paper card on an indigo ground, brass inside its edge */
  --ground: radial-gradient(120% 90% at 26% 12%, #434366 0%, #35365a 100%);
  --ground-ink: #35365a;     /* the ground's darkest, behind everything */
  --card: linear-gradient(165deg, #fffefb 0%, #fbf8f0 100%);   /* the invitation's warm paper */
  --brass: #b4a68a;          /* the quieter brass: main rules */
  --brass-line: #c4b9a3;     /* that brass on paper, 78%: the fine line inside the card's edge */
  --brass-rule: #d1c7b5;     /* that brass on paper, 62%: ruled lines between rows */
  --brass-plate: #bdb198;    /* that brass on paper, 88%: the line set inside the indigo plate */
  --plate-ink: linear-gradient(180deg, #434366 0%, #35365a 100%);  /* the raised indigo plate */
  --plate-ink-edge: #303150;                                        /* its edge, a shade under the plate */
  --plate-paper: linear-gradient(180deg, #f2f0f5 0%, #e8e5ee 100%); /* the paper plate: Astra's pale panel */
  --paper-edge: #e4dfd6;     /* Astra's paper edge */
  --pressed: #e8e5ee;        /* a button that is off: pressed flat */
  --card-shadow: 0 1px 2px rgba(var(--shade), .45), 0 8px 18px rgba(var(--shade), .32), 0 24px 48px rgba(var(--shade), .30);
  --inset: 10px;             /* how far the card sits in from the screen's edge */

  /* the same tokens under the older names the house lists use */
  --paper: var(--white);
  --line: var(--rule);
  --soft-ink: var(--soft);
  --accent: var(--ink);
  --on-accent: var(--white);
  --pecan: var(--dial);
  --radius: 3px;
  --space: 1.25rem;
  --wide: 34rem;
}

/* the buyer's pages: the invitation's plate face and a little more room inside the brass line */
.framed, .ground {
  --plate: "Barlow Semi Condensed", "DIN Alternate", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
  --pad: 22px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 500 17px/1.45 var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.num { font-family: var(--plate); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.framed .num, .ground .num { font-weight: 600; }
.soft { color: var(--soft); }
.small { font-size: 14px; line-height: 1.4; }

/* ---------- the ground: deep indigo with its soft light, behind everything ---------- */

body.framed, body.ground { background: var(--ground-ink); }
body.framed::before, body.ground::before {
  content: ""; position: fixed; inset: 0; z-index: -1; background: var(--ground); pointer-events: none;
}
@media (min-width: 520px) { body.framed, body.ground { --inset: 28px; } }

/* ---------- the frame holds still; what is inside moves sideways ---------- */

body.framed {
  height: 100dvh; overflow: hidden;
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  padding: max(var(--inset), env(safe-area-inset-top)) max(var(--inset), env(safe-area-inset-right))
    max(var(--inset), env(safe-area-inset-bottom)) max(var(--inset), env(safe-area-inset-left));
}
/* the card: the invitation's paper, lying on the ground with a soft shadow under it */
.frame {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100%;
  max-height: 900px;
  overflow: hidden;
  overflow: clip;   /* nothing, not even a focused field, may scroll the frame */
  background: var(--card);
  border-radius: 3px;
  box-shadow: var(--card-shadow);
}
/* the fine brass line set just inside the card's edge; it holds still while the steps move */
.frame::after, .thanks::after {
  content: ""; position: absolute; inset: 6px; z-index: 3;
  border: 1px solid var(--brass-line); border-radius: 1px; pointer-events: none;
}
.track { display: flex; height: 100%; will-change: transform; }
.track.moves { transition: transform var(--slide); }
.panel { flex: 0 0 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; padding: var(--pad); }
/* a step or shelf off the screen, once the move has finished: gone for every reader */
.away { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .track.moves, .shelftrack { transition: none !important; }
}

/* ---------- the landing ---------- */

.name { text-align: center; line-height: 1.05; padding: 0 0 14px; }
.name span { display: block; }
.name .n1 { font-size: 31px; letter-spacing: -.005em; }
.name .n2 { font-size: 18px; margin-top: 4px; }
/* the name on its raised sign: a faint panel with a soft shadow under it, understood more than drawn */
.framed .name, .ground .name {
  width: fit-content; margin: 4px auto 16px; padding: 9px 40px 12px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 75%);
  box-shadow: 0 11px 14px -11px rgba(var(--shade), .6), 7px 0 11px -11px rgba(var(--shade), .32),
    -7px 0 11px -12px rgba(var(--shade), .18), inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* the photograph's window, set slightly below the paper */
.window { flex: 1 1 auto; min-height: 150px; position: relative; background: var(--quiet); overflow: hidden; }
.window img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.window .empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--soft); font-size: 15px; }
.framed .window { border-radius: 1px; box-shadow: 0 0 0 1px var(--brass-rule); }
.framed .window::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 2px 9px rgba(var(--shade), .26), inset 0 0 2px rgba(var(--shade), .18);
}
.record { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0 12px; border-bottom: 1px solid var(--brass); min-height: 44px; }
.record p { color: var(--soft); font-size: 14px; line-height: 1.4; }
.say { padding: 14px 0 4px; font-size: 19px; line-height: 1.35; }
.left { padding: 2px 0 16px; color: var(--soft); font-size: 14px; }
.left .num { color: var(--ink); font-size: 22px; margin-right: 3px; }

/* the doors: the main one is the indigo plate, the others paper plates with an ink edge */
/* Order is the invitation's address plate, made live: the widest thing at the foot of the card */
.doors { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; padding-bottom: 2px; }
.doors .door-main { grid-column: span 2; font-size: 17px; }
.door {
  position: relative; font: 600 16px/1.15 var(--plate); letter-spacing: .05em; padding: 18px 6px; text-align: center;
  border: 1px solid var(--ink); border-radius: 3px; background: var(--plate-paper); color: var(--ink); cursor: pointer;
  box-shadow: 0 3px 7px rgba(var(--shade), .16), 0 1px 1px rgba(var(--shade), .20), inset 0 1px 0 #fff;
}

/* the indigo plate: a little raised, with a brass line set inside it, like the invitation's address bar */
.door-main, .next, .button-link {
  position: relative; background: var(--plate-ink); color: var(--white); border-color: var(--plate-ink-edge);
  box-shadow: 0 6px 12px rgba(var(--shade), .30), 0 2px 3px rgba(var(--shade), .30), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.door-main::after, .next::after, .button-link::after {
  content: ""; position: absolute; inset: 4px; border: 1px solid var(--brass-plate); border-radius: 1px; pointer-events: none;
}
.door:active:not(:disabled), .next:active:not(:disabled), .button-link:active, .qty button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(var(--shade), .30), inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* off: pressed flat into the paper, no brass */
.door:disabled, .next:disabled {
  background: var(--pressed); color: var(--soft); border-color: var(--brass-rule); cursor: default;
  box-shadow: inset 0 1px 2px rgba(var(--shade), .14);
}
.door:disabled::after, .next:disabled::after { border-color: transparent; }

/* ---------- the steps, reached sideways ---------- */

.bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; min-height: 44px; }
.back {
  font: 600 13px/1 var(--plate); letter-spacing: .1em; text-transform: uppercase;
  min-height: 44px; padding: 12px 16px 12px 0; background: none; border: 0; cursor: pointer; color: var(--ink);
}
/* the step count: letterspaced capitals in the plate face */
.bar .num { font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.title { font-size: 29px; line-height: 1.1; padding: 4px 0 6px; }
.title:focus { outline: none; }
.lede { padding-bottom: 6px; }

.shelves { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--brass); margin-top: 8px; }
.shelves button {
  font: 600 13px/1 var(--plate); letter-spacing: .1em; text-transform: uppercase;
  min-height: 46px; padding: 16px 0 15px; text-align: left; color: var(--soft); background: none; border: 0; cursor: pointer;
}
.shelves button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.shelfwin { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.shelftrack { display: flex; height: 100%; transition: transform .36s cubic-bezier(.22, .7, .12, 1); }
.shelf { flex: 0 0 100%; min-width: 0; overflow-y: auto; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.framed .row { border-bottom-color: var(--brass-rule); }
.what { min-width: 0; }
.sub { display: block; font-size: 14px; color: var(--soft); line-height: 1.35; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dial); margin-left: 8px; vertical-align: 1px; }
/* the plus and minus keys: small paper plates with a brass edge, a little raised */
.qty { display: flex; align-items: center; flex: 0 0 auto; padding: 2px 0 4px; }
.qty button {
  width: 44px; height: 44px; border: 1px solid var(--brass-line); border-radius: 3px;
  font: 600 25px/1 var(--plate); color: var(--ink); background: var(--plate-paper); cursor: pointer;
  box-shadow: 0 2px 4px rgba(var(--shade), .14), 0 1px 1px rgba(var(--shade), .16), inset 0 1px 0 #fff;
}
.qty button:active { background: var(--pressed); }
.qty output { width: 42px; text-align: center; font-size: 25px; line-height: 1; }
.note { padding: 12px 0 4px; }

.foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--brass); }
.sum { min-width: 0; }
.total { display: block; font-size: 31px; line-height: 1; }
.next { flex: 0 0 auto; font: 600 16px/1 var(--plate); letter-spacing: .05em; padding: 17px 18px; border: 0; border-radius: 3px; cursor: pointer; }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 2px 12px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; border: 1px solid var(--brass-rule); border-radius: 3px; padding: 10px 12px; text-align: left;
  font-size: 15px; line-height: 1.25; background: var(--plate-paper); cursor: pointer;
  box-shadow: 0 2px 4px rgba(var(--shade), .12), 0 1px 1px rgba(var(--shade), .12), inset 0 1px 0 #fff;
}
.chip b { display: block; font: 600 16px/1.2 var(--plate); letter-spacing: .03em; }
.chip span { display: block; font-size: 13px; opacity: .78; }
.chip[aria-pressed="true"] {
  background: var(--plate-ink); border-color: var(--plate-ink-edge); color: var(--white);
  box-shadow: 0 4px 8px rgba(var(--shade), .28), 0 1px 2px rgba(var(--shade), .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.chip:disabled { color: var(--soft); background: var(--pressed); box-shadow: inset 0 1px 2px rgba(var(--shade), .10); cursor: default; }
.scroller { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.pick { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border: 0; border-bottom: 1px solid var(--brass-rule); text-align: left; background: none; cursor: pointer; }
.pick::after { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--ink); border-radius: 50%; }
.pick[aria-pressed="true"]::after { background: var(--ink); box-shadow: inset 0 0 0 3px #fffdf8; }
/* section labels: letterspaced capitals in the plate face */
.label { display: block; font: 600 12.5px/1.2 var(--plate); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin: 18px 0 8px; }
.label.sentence { font: 500 14px/1.4 var(--text); letter-spacing: 0; text-transform: none; margin: 16px 0 6px; }
.entry {
  width: 100%; padding: 13px 12px; border: 1px solid var(--brass-line); border-radius: 3px; background: #fffefb; font-size: 17px;
  box-shadow: inset 0 1px 3px rgba(var(--shade), .12);
}
.entry:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), inset 0 1px 3px rgba(var(--shade), .12); }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: 16px; line-height: 1.4; }
.check input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--ink); }
.hint { min-height: 1.4em; font-size: 14px; color: var(--soft); }
.hint.warn { color: var(--dial); }

.ledger { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ledger td { padding: 13px 8px 13px 0; border-bottom: 1px solid var(--brass-rule); font-size: 16px; vertical-align: baseline; }
.ledger td.num { font-size: 18px; white-space: nowrap; text-align: right; padding-right: 0; }
.plain { padding: 12px 0; border-bottom: 1px solid var(--brass-rule); }
.plain:last-child { border-bottom: 0; }

/* ---------- the thank-you: the same card, on the same ground, a page that may scroll ---------- */

body.ground {
  min-height: 100dvh;
  padding: max(var(--inset), env(safe-area-inset-top)) max(var(--inset), env(safe-area-inset-right))
    max(var(--inset), env(safe-area-inset-bottom)) max(var(--inset), env(safe-area-inset-left));
}
.thanks {
  position: relative; max-width: 430px; margin: 0 auto; padding: 26px var(--pad) 48px;
  background: var(--card); border-radius: 3px; box-shadow: var(--card-shadow);
}
.thanks .name { margin-bottom: 24px; }
.practice-note { display: inline-block; border: 1px dashed var(--soft); padding: 4px 10px; border-radius: 3px; color: var(--soft); font-size: 14px; margin-bottom: 16px; }
/* the thank-you's sections, kept like the menu: capitals over a brass rule */
.thanks h2 {
  font: 600 13px/1 var(--plate); letter-spacing: .1em; text-transform: uppercase;
  margin: 30px 0 0; padding-bottom: 9px; border-bottom: 1px solid var(--brass);
}
.thanks .ledger { margin-top: 0; }
.thanks .total-line { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; }
.thanks .total-line .num { font-size: 22px; }
.button-link { display: inline-block; margin-top: 16px; font: 600 16px/1 var(--plate); letter-spacing: .05em; padding: 17px 18px; border-radius: 3px; text-decoration: none; }

/* ---------- plain parts shared with the house lists ---------- */

.said { min-height: 1.5em; margin: 0.75rem 0 0; }
.field { display: block; margin: 0 0 var(--space); }
.field span { display: block; margin-bottom: 0.35rem; }
.field input { width: 100%; font: inherit; padding: 0.75rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
.pay { width: 100%; padding: 1rem; font: 700 16px/1 var(--plate); letter-spacing: .04em; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); cursor: pointer; }
.pay:disabled { opacity: 0.45; cursor: default; }
.house h2 { font-size: 1.4rem; margin: 1.5rem 0 0.5rem; }
.house h3 { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; }
.house .note { color: var(--soft); padding: 0 0 0.75rem; }

/* ---------- the season: the string of lights ----------
   Astra's strand (public/lights.svg, the label refined pair, v3 since 12:01 PM: a thicker cord), the same drawing on
   every piece. Never stretched: on a phone one strand across the top of the landing; wide, the same
   strand repeated along the top, more cord, the same bulbs. Decorative: no words for readers. */
.lights { position: fixed; top: 0; left: 0; width: 100%; z-index: 4; pointer-events: none; }
.lights-phone { display: block; height: auto; transition: opacity .3s ease; }
.lights-wide { display: none; height: 70px; background: url("/lights.svg") repeat-x 50% 4px / 612px 70px; }
.framed:has(#home[aria-hidden="true"]) .lights-phone { opacity: 0; }
@media (min-width: 520px) {
  body.framed { padding-top: max(76px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .lights-wide { display: block; }
  .lights-phone { display: none; }
}
/* they glow, gently: a slow breath, never a blink */
.lights { animation: lights-breathe 7s ease-in-out infinite alternate; }
@keyframes lights-breathe { from { filter: brightness(.9); } to { filter: brightness(1.06); } }
@media (prefers-reduced-motion: reduce) { .lights { animation: none; } }

/* ---------- Square's payment boxes on the Pay step (piece 3) ----------
   Layout only. The boxes themselves are Square's; their look is the look's to dress. */

.paying { padding: 14px 0 0; }
/* The card first, then the wallets as quieter equals, one width and one corner for all. Inside each
   box only what its maker allows is ours to set (see pay.js). */
.paying .pay-label { margin: 0 0 8px; font: 600 13px/1 var(--plate); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.paying .card-box { min-height: 90px; }
.paying .wallets { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--brass-rule); }
.paying .wallet:not(:empty), .paying .apple-pay { margin-bottom: 10px; }
.paying .wallet > * { width: 100%; }
.apple-pay { display: block; width: 100%; height: 48px; border: 0; border-radius: 3px; cursor: pointer;
  -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; -apple-pay-button-style: white-outline; }
.apple-pay[hidden] { display: none; }

/* The thank-you's two calendar buttons (November 14): the file (a phone opens it in its calendar) and
   Google Calendar, as a paper plate beside the indigo one. */
.calendar-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.calendar-buttons .button-link { margin-top: 0; }
.button-link.paper { background: var(--plate-paper); color: var(--ink); border: 1px solid var(--ink);
  box-shadow: 0 3px 7px rgba(var(--shade), .16), 0 1px 1px rgba(var(--shade), .20), inset 0 1px 0 #fff; }
.button-link.paper::after { display: none; }