/* Layout: framed cream and indigo sheets laid on an Ajrakh-printed ground, like block-printed cloth panels. Deliberately single-look (the brand's colors), so no dark variant. */
:root {
  --indigo: #16223d;
  --indigo-2: #1f2e50;
  --madder: #8a1f1b;
  --madder-lt: #d0584a;
  --cream: #f3e9d6;
  --cream-2: #eadcc2;
  --ink: #221c18;
  --muted: #5e5349;
  --gold: #b0843f;
  --on-dark: #efe4cf;
  --on-dark-muted: #c8bca6;
  --ok: #2f6b4a;
  --err: #9b1c17;
  --display: "Oranienbaum", "Bodoni 72", "Didot", Georgia, serif;
  --body: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  --ajrakh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' fill='%23731a18'/%3E%3Cpath d='M28 2 54 28 28 54 2 28Z' fill='%23172440'/%3E%3Ccircle cx='28' cy='28' r='11' fill='%23731a18'/%3E%3Cg fill='%23e9dcc3'%3E%3Ccircle cx='28' cy='19' r='2.4'/%3E%3Ccircle cx='28' cy='37' r='2.4'/%3E%3Ccircle cx='19' cy='28' r='2.4'/%3E%3Ccircle cx='37' cy='28' r='2.4'/%3E%3Ccircle cx='28' cy='28' r='3.2'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='56' cy='0' r='3'/%3E%3Ccircle cx='0' cy='56' r='3'/%3E%3Ccircle cx='56' cy='56' r='3'/%3E%3C/g%3E%3Cg fill='%23b0843f'%3E%3Ccircle cx='21.6' cy='21.6' r='1.4'/%3E%3Ccircle cx='34.4' cy='21.6' r='1.4'/%3E%3Ccircle cx='21.6' cy='34.4' r='1.4'/%3E%3Ccircle cx='34.4' cy='34.4' r='1.4'/%3E%3C/g%3E%3Cpath d='M28 8 48 28 28 48 8 28Z' fill='none' stroke='%23e9dcc3' stroke-width='.8' stroke-dasharray='1.5 2.5'/%3E%3C/svg%3E");
  --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='22' viewBox='0 0 28 22'%3E%3Crect width='28' height='22' fill='%23731a18'/%3E%3Cpath d='M14 2 23 11 14 20 5 11Z' fill='%23172440'/%3E%3Ccircle cx='14' cy='11' r='2.6' fill='%23e9dcc3'/%3E%3Ccircle cx='0' cy='11' r='1.6' fill='%23b0843f'/%3E%3Ccircle cx='28' cy='11' r='1.6' fill='%23b0843f'/%3E%3C/svg%3E");
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  background: var(--indigo) url(../img/ajrakh-tile.jpg) repeat;
  background-size: 308px auto;
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  padding-inline: 16px;
  padding-block: 16px 96px;
}
@media (min-width: 760px) { body { padding-inline: 28px; padding-block: 28px; } }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0; letter-spacing: .02em; }
p { margin: 0; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.caps { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; }
.page { max-width: 1120px; margin-inline: auto; display: grid; gap: 10px; }
.band { height: 30px; background: url(../img/ajrakh-band.jpg) repeat-x center / auto 30px; border-block: 2px solid var(--gold); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
@media (min-width: 760px) { .page { gap: 14px; } .band { height: 38px; background-size: auto 38px; } }
.sheet { background: var(--cream); border: 1px solid var(--gold); box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--gold); margin: 5px; }
.sheet.dark { background: var(--indigo); color: var(--on-dark); box-shadow: 0 0 0 4px var(--indigo), 0 0 0 5px var(--gold); }
.inner { padding: 28px 20px; }
@media (min-width: 760px) { .inner { padding: 44px 48px; } }
.ornament { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--madder); }
.ornament::before, .ornament::after { content: ""; height: 1px; width: 56px; background: currentColor; opacity: .6; }
.ornament svg { width: 16px; height: 16px; }
.dark .ornament { color: var(--gold); }
.eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: 15px; color: var(--madder); }
.dark .eyebrow { color: var(--gold); }
.sec-head { text-align: center; display: grid; gap: 10px; justify-items: center; margin-bottom: 28px; }
.sec-head h2 { font-size: clamp(28px, 5vw, 40px); text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; }
.sec-head p { max-width: 58ch; color: var(--muted); }
.dark .sec-head p { color: var(--on-dark-muted); }
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 22px; border: 1px solid var(--madder); background: var(--madder); color: #fbf3e6; font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 16px; text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 3px var(--madder), inset 0 0 0 4px rgba(251,243,230,.55); transition: background .15s; }
.btn:hover { background: #7a1916; }
.btn.navy { background: var(--indigo); border-color: var(--indigo); box-shadow: inset 0 0 0 3px var(--indigo), inset 0 0 0 4px rgba(239,228,207,.45); }
.btn.navy:hover { background: var(--indigo-2); }
.btn.ghost { background: transparent; color: var(--madder); box-shadow: none; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; }

/* Header */
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 18px 20px 14px; }
.masthead nav { display: none; gap: 20px; white-space: nowrap; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 15px; }
.masthead nav a { text-decoration: none; padding-block: 6px; }
.masthead nav a:hover { color: var(--madder); }
.masthead nav.right { justify-content: flex-end; align-items: center; }
.brand { text-align: center; text-decoration: none; display: grid; justify-items: center; gap: 2px; grid-column: 2; }
.brand .name { font-family: var(--display); font-size: clamp(34px, 8vw, 58px); line-height: 1; color: var(--indigo); letter-spacing: .03em; text-transform: uppercase; }
.brand .place { font-family: var(--display); text-transform: uppercase; letter-spacing: .2em; font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.brand .place i { width: 6px; height: 6px; background: var(--madder); transform: rotate(45deg); display: inline-block; }
.masthead .mob-cta { grid-column: 3; justify-self: end; }
.masthead .mob-cta .btn { min-height: 40px; padding: 6px 12px; font-size: 13px; }
@media (max-width: 519px) { .masthead { grid-template-columns: 1fr auto; } .brand { grid-column: 1; justify-items: start; text-align: left; } .masthead .mob-cta { grid-column: 2; } }
@media (min-width: 980px) { .masthead nav { display: flex; } .masthead .mob-cta { display: none; } .masthead nav.right .btn { min-height: 42px; padding: 6px 16px; font-size: 14px; } }

/* Hero */
.hero { position: relative; overflow: hidden; display: grid; gap: 28px; padding: 32px 20px 28px; border-top: 1px solid var(--gold); }
.hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 150px; background: url(../img/ajrakh-medallion.jpg) right center / auto 100% no-repeat; opacity: .28; pointer-events: none; }
@media (min-width: 860px) { .hero::before { width: 190px; opacity: 1; box-shadow: 1px 0 0 var(--gold); } .hero { padding-left: 230px !important; } }
.hero > * { position: relative; }
.hero h1 { font-size: clamp(36px, 7vw, 60px); line-height: 1.04; text-transform: uppercase; letter-spacing: .04em; color: var(--on-dark); }
.hero h1 em { font-style: normal; color: var(--madder-lt); }
.hero .copy { display: grid; gap: 20px; align-content: center; min-width: 0; }
.hero .lede { font-size: 20px; color: var(--on-dark-muted); max-width: 40ch; }
.hero .lede strong { color: var(--on-dark); font-weight: 500; }
.hero .facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 16px; color: var(--on-dark-muted); }
.hero .facts span { display: inline-flex; align-items: center; gap: 8px; }
.hero .facts span::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.plate { position: relative; justify-self: center; width: min(100%, 520px); }
.plate img { display: block; width: 100%; aspect-ratio: 480/348; object-fit: cover; border-radius: 999px 999px 18px 18px / 60% 60% 18px 18px; border: 2px solid var(--gold); box-shadow: 0 0 0 6px var(--indigo), 0 0 0 7px rgba(176,132,63,.6); max-width: 100%; }
.plate .price-tag { position: absolute; left: -6px; bottom: 16px; background: var(--cream); color: var(--ink); padding: 8px 14px; border: 1px solid var(--gold); box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px var(--gold); display: grid; line-height: 1.15; }
.plate .price-tag b { font-family: var(--display); font-size: 28px; font-weight: 400; color: var(--madder); }
.plate .price-tag small { font-size: 14px; color: var(--muted); }
@media (min-width: 860px) { .hero { grid-template-columns: 1fr 1.05fr; padding: 56px 48px; align-items: center; } }

/* Order */
.order { display: grid; gap: 28px; }
@media (min-width: 860px) { .order { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } }
.order h2 { font-size: clamp(30px, 5vw, 42px); text-transform: uppercase; letter-spacing: .05em; line-height: 1.05; color: var(--indigo); }
.order .intro { display: grid; gap: 14px; }
.order .price { display: flex; align-items: baseline; gap: 12px; font-family: var(--display); }
.order .price b { font-size: 48px; font-weight: 400; color: var(--madder); line-height: 1; }
.order .price span { font-size: 16px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.order .note { font-size: 16px; color: var(--muted); border-left: 2px solid var(--gold); padding-left: 14px; }
.contents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--gold); }
.contents li { padding: 12px 4px; border-bottom: 1px dotted rgba(176,132,63,.7); display: grid; gap: 0; min-width: 0; }
.contents li:nth-child(odd) { padding-right: 14px; }
.contents li:nth-child(even) { padding-left: 14px; border-left: 1px dotted rgba(176,132,63,.7); }
.contents b { font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--indigo); line-height: 1.1; }
.contents span { font-size: 16px; color: var(--muted); }

/* Reserve */
.reserve-grid { display: grid; gap: 24px; }
@media (max-width: 759px) { .window { order: 2; } }
@media (min-width: 760px) { .window dl { grid-template-columns: repeat(3, 1fr); } .window dl hr { display: none; } .window dl > div + div { border-left: 1px solid rgba(176,132,63,.5); padding-left: 16px; } }
.dates-wrap { min-width: 0; }
.week-label { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: var(--muted); }
.dates { display: grid; grid-auto-flow: column; grid-auto-columns: 142px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 14px; margin-inline: -4px; }
@media (min-width: 640px) { .dates { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); grid-auto-columns: auto; overflow: visible; } }
.date { scroll-snap-align: start; position: relative; display: grid; justify-items: center; gap: 2px; padding: 16px 8px 14px; text-align: center; background: var(--cream); border: 1px solid var(--gold); cursor: pointer; transition: transform .15s, box-shadow .15s; box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--gold); margin: 6px; min-width: 0; }
.date:hover:not([aria-disabled="true"]) { transform: translateY(-2px); }
.date .dow { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 16px; color: var(--muted); }
.date .num { font-family: var(--display); font-size: 46px; line-height: 1; color: var(--indigo); font-variant-numeric: lining-nums tabular-nums; }
.date .mon { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--muted); }
.date .tag { position: absolute; top: -2px; left: 50%; transform: translate(-50%, -50%); background: var(--gold); color: var(--ink); font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; padding: 1px 8px; white-space: nowrap; }
.date .avail { margin-top: 8px; font-size: 15px; line-height: 1.25; min-height: 38px; display: grid; align-content: center; }
.date .pill { margin-top: 6px; font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; padding: 6px 12px; background: var(--indigo); color: var(--on-dark); width: 100%; }
.date[data-state="low"] .avail { color: var(--madder); font-weight: 600; }
.date[data-state="sold"] .num, .date[data-state="closed"] .num, .date[data-state="off"] .num { color: #8f8474; }
.date[data-state="sold"] .pill { background: transparent; color: var(--madder); border: 1px solid var(--madder); }
.date[data-state="closed"], .date[data-state="off"] { cursor: default; background: var(--cream-2); }
.date[data-state="closed"] .pill, .date[data-state="off"] .pill { background: transparent; color: var(--muted); border: 1px dashed var(--muted); }
.date[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px var(--madder); }
.swipe-hint { font-size: 15px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
@media (min-width: 640px) { .swipe-hint .sw { display: none; } }
.window { padding: 26px 22px; display: grid; gap: 18px; text-align: center; position: relative; }
.window dl { margin: 0; display: grid; gap: 16px; }
.window dt { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--gold); }
.window dd { margin: 2px 0 0; font-family: var(--display); font-size: 24px; line-height: 1.2; color: var(--on-dark); }
.window dd small { display: block; font-family: var(--body); font-size: 15px; color: var(--on-dark-muted); margin-top: 4px; }
.window hr { border: 0; height: 1px; background: rgba(176,132,63,.5); margin: 0; }

/* How it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: s; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 0; } .steps li + li { border-left: 1px dashed rgba(176,132,63,.55); } }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; counter-increment: s; min-width: 0; }
@media (min-width: 1000px) { .steps li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 0 20px; } }
.medal { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--madder); box-shadow: 0 0 0 3px var(--indigo), 0 0 0 5px var(--madder), 0 0 0 6px var(--gold); }
.medal svg { width: 30px; height: 30px; }
.steps h3 { font-size: 21px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-dark); }
.steps h3::before { content: counter(s) ". "; color: var(--gold); }
.steps p { font-size: 17px; color: var(--on-dark-muted); margin-top: 4px; }

/* Story */
.story { display: grid; }
.story figure { margin: 0; }
.story figure img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 40%; }
.story .words { display: grid; gap: 16px; align-content: center; text-align: left; justify-items: start; }
.story .words .ornament { justify-content: flex-start; }
.story h2 { font-size: clamp(30px, 5vw, 42px); text-transform: uppercase; letter-spacing: .05em; line-height: 1.08; color: var(--indigo); }
.story .words p { max-width: 62ch; }
.story .pull { margin: 4px 0; padding: 14px 0; border-block: 1px solid var(--gold); font-family: var(--display); font-size: clamp(28px, 4.5vw, 36px); line-height: 1.12; text-transform: uppercase; letter-spacing: .05em; color: var(--madder); width: min(100%, 22ch); text-align: center; justify-self: center; }
.story .sign { font-style: italic; color: var(--muted); }
@media (min-width: 860px) { .story figure img { aspect-ratio: 2 / 1; object-position: 50% 30%; } .story .words { max-width: 700px; margin-inline: auto; width: 100%; } }

/* FAQ */
.faq { display: grid; gap: 0; max-width: 780px; margin-inline: auto; border-top: 1px solid var(--gold); }
.faq details { border-bottom: 1px solid var(--gold); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 4px; font-family: var(--display); font-size: 22px; color: var(--indigo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; color: var(--madder); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq .ans { padding: 0 4px 18px; color: var(--muted); display: grid; gap: 10px; }
.faq .ans b { color: var(--ink); font-weight: 600; }

/* Contact */
.contact-grid { display: grid; gap: 14px; max-width: 900px; margin-inline: auto; }
@media (min-width: 760px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.cmethod { border: 1px solid rgba(176,132,63,.6); padding: 20px; display: grid; gap: 6px; text-align: center; justify-items: center; min-width: 0; }
.cmethod .caps { font-size: 14px; color: var(--gold); }
.cmethod .val { font-family: var(--display); font-size: 24px; color: var(--on-dark); user-select: all; overflow-wrap: anywhere; }
.cmethod small { color: var(--on-dark-muted); font-size: 15px; }
.copy-btn { margin-top: 6px; background: transparent; border: 1px solid rgba(176,132,63,.7); color: var(--on-dark); font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; padding: 6px 12px; cursor: pointer; min-height: 36px; }
.copy-btn:hover { background: rgba(176,132,63,.15); }
.foot { text-align: center; color: var(--on-dark-muted); font-size: 15px; margin-top: 26px; }

/* Mobile bottom CTA */
.dock { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--cream); border-top: 1px solid var(--gold); box-shadow: 0 -6px 20px rgba(0,0,0,.25); z-index: 20; display: flex; gap: 12px; align-items: center; transition: transform .2s; }
.dock .btn { flex: 1; }
.dock small { font-size: 14px; color: var(--muted); line-height: 1.2; max-width: 11ch; }
.dock.hide { transform: translateY(110%); }
@media (min-width: 980px) { .dock { display: none; } body { padding-block-end: 28px; } }

/* Sheet dialog */
.scrim { position: fixed; inset: 0; background: rgba(12,16,28,.62); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 700px) { .scrim { align-items: center; padding: 24px; } }
.panel { background: var(--cream); width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; position: relative; padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.panel::before { content: ""; position: sticky; display: block; top: -22px; margin: -22px -20px 16px; height: 14px; background: url(../img/ajrakh-band.jpg) repeat-x center / auto 14px; z-index: 2; }
@media (min-width: 700px) { .panel { padding: 26px 30px 30px; border: 1px solid var(--gold); box-shadow: 0 0 0 5px var(--cream), 0 0 0 6px var(--gold); } .panel::before { top: -26px; margin: -26px -30px 18px; } }
.panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.panel-head h2 { font-size: 28px; line-height: 1.1; color: var(--indigo); text-transform: uppercase; letter-spacing: .04em; }
.panel-head p { color: var(--muted); font-size: 16px; margin-top: 4px; }
.x { flex: none; width: 44px; height: 44px; border: 1px solid var(--gold); background: transparent; cursor: pointer; font-size: 24px; line-height: 1; color: var(--indigo); }
.notice { background: var(--cream-2); border-left: 3px solid var(--madder); padding: 12px 14px; font-size: 16px; margin: 18px 0; }
.notice b { color: var(--madder); font-weight: 600; }
form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field > .lbl { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 14px; color: var(--indigo); }
.field .opt { text-transform: none; letter-spacing: 0; font-family: var(--body); color: var(--muted); font-size: 14px; }
.field input[type=text], .field input[type=tel], .field input[type=email], .field textarea { width: 100%; border: 1px solid #b9a88b; background: #fbf6ec; padding: 12px 12px; font-size: 18px; border-radius: 0; min-height: 48px; }
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.field .hint { font-size: 15px; color: var(--muted); }
.field .errmsg { font-size: 15px; color: var(--err); }
.field.bad input, .field.bad textarea { border-color: var(--err); }
.row2 { display: grid; gap: 16px; }
@media (min-width: 520px) { .row2 { grid-template-columns: 1fr 1fr; } }
.qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #b9a88b; background: #fbf6ec; padding: 8px 8px 8px 14px; }
.qty .ctrl { display: flex; align-items: center; gap: 4px; }
.qty button { width: 44px; height: 44px; border: 1px solid var(--gold); background: var(--cream); font-size: 22px; cursor: pointer; color: var(--indigo); }
.qty button[disabled] { opacity: .35; cursor: not-allowed; }
.qty output { width: 40px; text-align: center; font-family: var(--display); font-size: 30px; color: var(--indigo); font-variant-numeric: tabular-nums; }
.qty .sum { font-size: 16px; color: var(--muted); line-height: 1.25; }
.qty .sum b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--madder); }
.choice { display: grid; gap: 8px; }
.choice label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #b9a88b; background: #fbf6ec; padding: 12px 14px; cursor: pointer; font-size: 17px; }
.choice label:has(input:checked) { border-color: var(--madder); box-shadow: inset 0 0 0 1px var(--madder); }
.choice input { accent-color: var(--madder); width: 18px; height: 18px; margin-top: 4px; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fine { font-size: 15px; color: var(--muted); }
.done { display: grid; gap: 18px; }
.done .seal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); color: var(--cream); box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px var(--gold); }
.done .seal svg { width: 28px; height: 28px; }
.summary { border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); padding: 10px 0; display: grid; gap: 4px; }
.summary div { display: flex; justify-content: space-between; gap: 16px; font-size: 17px; }
.summary dt, .summary span:first-child { color: var(--muted); }
.summary span:last-child { text-align: right; overflow-wrap: anywhere; }
.next { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: n; }
.next li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: 17px; counter-increment: n; }
.next li::before { content: counter(n); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--madder); color: var(--madder); display: grid; place-items: center; font-family: var(--display); font-size: 16px; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--ink); color: var(--cream); padding: 10px 16px; font-size: 15px; z-index: 60; border: 1px solid var(--gold); }

/* Live-site additions */
.status-note { text-align: center; color: var(--muted); font-size: 16px; padding: 24px 8px; }
.status-note .btn { margin-top: 12px; }
.skeleton .date { opacity: .5; pointer-events: none; }
.date[disabled] { cursor: default; }
.contact-grid .cmethod a.val { text-decoration: none; }
.foot a { color: var(--on-dark-muted); }
.prose { display: grid; gap: 14px; }
.story .prose p { max-width: 62ch; }
.note.prose p + p { margin-top: 0; }
.sec-head .prose p, .sec-head > div > p { max-width: 58ch; color: var(--muted); }
.panel .notice p { margin: 0; }
.done-title { font-size: 30px; color: var(--indigo); text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; margin-top: 6px; }
.hero .copy { grid-template-columns: minmax(0, 1fr); } .hero .copy .btn { white-space: normal; text-align: center; }
.window-note { text-align: center; color: var(--muted); font-size: 16px; margin-top: 6px; font-style: italic; }