/* site.css — Cellar Board, shared by the board and every server-rendered page.
   One set of tokens (the two drifting sets are merged here), the type steps,
   controls, the page scenes (hero, stair, band, close) and the motion helpers.
   Brand assets kept on purpose: the gold, the Bebas Neue wordmark, the bulb glow. */

:root {
  color-scheme: dark;
  --bg: #15110d;            /* the ground */
  --surface: #1f1a15;       /* one tone step up: bands, panels */
  --field: #2a231c;         /* form fields, quiet buttons */
  --ink: #e8e6e2;           /* running text, a neutral off-white */
  --muted: #b0a699;         /* secondary text, 7.8:1 on the ground */
  --accent: #f2b33d;        /* the bulb: open shows, the one action */
  --accent-ink: #1a1408;    /* text on gold */
  --accent-soft: rgba(242, 179, 61, 0.16);
  --glow: rgba(242, 179, 61, 0.5);
  --brick: #c65d3b;         /* the slash in the wordmark, nothing else */
  --danger: #e8806e;
  --ok: #8fcf95;
  --unlit: #4a4036;         /* a dark bulb */

  --font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-text: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);   /* 14–15 */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);     /* 17–19 */
  --step-lead: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);       /* 20–28 */
  --step-head: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);            /* 32–56, Bebas */
  --step-display: clamp(5rem, 17vw, 15rem);                    /* each page may override */

  --margin: clamp(1rem, 2.2vw, 2.5rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.5rem);
  --section: clamp(4rem, 9vw, 9rem);
  --radius: 999px;          /* controls are pills; surfaces and pictures are square */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5;
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em;
  line-height: 0.9; text-wrap: balance; hyphens: none; }
.display { font-size: var(--step-display); line-height: 0.85; letter-spacing: 0.01em; margin-left: -0.03em; }
h2, .head { font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: 1.3; max-width: 36ch; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
.gold { color: var(--accent); }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
.nums { font-variant-numeric: tabular-nums; }
strong, b { font-weight: 600; }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem;
  padding: 0 1.5rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius);
  font-weight: 600; text-decoration: none; white-space: nowrap; line-height: 1;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button.quiet { background: var(--field); color: var(--ink); }
.button.danger { background: var(--danger); color: var(--accent-ink); }
.button.small { min-height: 2.25rem; padding: 0 1rem; font-size: var(--step-small); }
.button.wide { width: 100%; }
.button[disabled] { opacity: 0.5; cursor: default; }
.link, .linkbtn { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em;
  text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.linkbtn { font: inherit; color: var(--muted); }
.link-plain { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #f6c25b; }
  .button.quiet:hover { background: #362d24; }
  .button.danger:hover { background: #ef9583; }
  .link:hover, .linkbtn:hover { text-decoration-color: currentColor; color: var(--ink); }
}
.field { width: 100%; min-height: 3rem; padding: 0.6rem 1.1rem; background: var(--field); border: 0;
  border-radius: var(--radius); color: var(--ink); font-size: max(1rem, var(--step-body)); }
.field::placeholder { color: var(--muted); }
.field[readonly] { color: var(--muted); }
.field.short { width: auto; }
label { display: block; font-size: var(--step-small); color: var(--muted); margin: 1rem 0 0.4rem; }
label .muted { color: var(--muted); }
label.check { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink); font-size: var(--step-body); margin: 0.7rem 0; }
label.check.off { color: var(--muted); }
input[type=checkbox] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; margin: 0.2rem 0 0; flex: 0 0 auto; }
.inline { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
form { margin: 0; }
.flash { padding: 0.85rem 1.1rem; background: var(--surface); margin: 0 0 1rem; max-width: none; }
.flash.err { color: var(--danger); }
.flash.ok { color: var(--ok); }
.tag { display: inline-block; font-size: var(--step-small); line-height: 1.5; background: var(--accent-soft);
  color: var(--accent); border-radius: var(--radius); padding: 0 0.7em; margin-left: 0.5em; vertical-align: middle; white-space: nowrap; }
.tag.ok { background: rgba(143, 207, 149, 0.16); color: var(--ok); }
.tag.danger { background: rgba(232, 128, 110, 0.16); color: var(--danger); }
.tag.muted { background: var(--field); color: var(--muted); }
.panel { background: var(--surface); padding: 1.5rem; }
.credits { font-size: var(--step-small); }

/* ---------- small navigation in the corners ---------- */
.corner { display: flex; gap: 1.25rem; justify-content: flex-end; align-items: center; flex-wrap: wrap;
  font-size: var(--step-body); }
.corner a { color: var(--muted); text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.corner form { display: inline; }
@media (hover: hover) and (pointer: fine) { .corner a:hover { color: var(--ink); text-decoration-color: currentColor; } }

/* The signed-in pages: who you are on the left, the same links on the right. */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.25rem; font-size: var(--step-body); }
.who { display: flex; align-items: center; min-width: 0; color: var(--muted); }
.who-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.navlinks { display: flex; align-items: center; gap: 1.25rem; flex: 0 0 auto; }
.navlinks a { white-space: nowrap; color: var(--muted); text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.navlinks form { display: inline; }
@media (hover: hover) and (pointer: fine) { .navlinks a:hover { color: var(--ink); text-decoration-color: currentColor; } }
@media (max-width: 800px) { .topbar .who { display: none; } }   /* the email returns in the page body; the links stay */
@media (max-width: 560px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .navlinks { justify-content: space-between; gap: 0.5rem; }
  .navlinks a, .navlinks .linkbtn { font-size: var(--step-small); }
}
.back { display: inline-block; margin-top: 0.75rem; color: var(--muted); font-size: var(--step-small); text-decoration: none; }

/* ---------- page scenes ---------- */
/* The first screen of a public page: the name stacked on two lines in two inks,
   the supporting sentence bottom-left, the one action bottom-right. */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  grid-template-rows: auto 1fr auto; min-height: 100svh; padding-bottom: 1.5rem; }
.hero .top { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding-top: 1.25rem; font-size: var(--step-small); color: var(--muted); }
.hero .top p { max-width: none; }
.hero .name { grid-column: 1 / -1; grid-row: 2; align-self: start; margin-top: 4vh; }
.hero .lede { grid-column: 1 / 7; grid-row: 3; align-self: end; max-width: 38ch; }
.hero .act { grid-column: 8 / -1; grid-row: 3; align-self: end; }
.hero .act label { margin-top: 0.6rem; }
.hero .act .button { width: 100%; margin-top: 1.25rem; }
.hero .act .links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--muted); max-width: none; }
@media (max-width: 800px) {
  /* On a phone the name leads the screen; the two small notes move under the action. */
  .hero { grid-template-rows: auto auto 1fr auto; }
  .hero .name { grid-row: 1; margin-top: 6vh; }
  .hero .lede { grid-column: 1 / -1; grid-row: 2; align-self: start; margin-top: 1.5rem; }
  .hero .act { grid-column: 1 / -1; grid-row: 3; margin-top: 1.5rem; align-self: start; }
  .hero .top { grid-row: 4; flex-direction: column; gap: 0.25rem; padding-top: 2rem; }
}

/* A statement that descends like stairs, with two photographs in the right quarter. */
.stair { background: var(--surface); padding: var(--section) var(--margin); display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.statement { grid-column: 1 / 8; font-size: min(36px, max(22px, 4.1vw)); font-weight: 500; line-height: 1.05;
  max-width: none; text-wrap: initial; }
.statement span { display: block; }
.statement span:nth-child(2) { padding-left: 6vw; }
.statement span:nth-child(3) { padding-left: 12vw; }
.statement span:nth-child(4) { padding-left: 18vw; }
.pair { grid-column: 8 / -1; display: grid; gap: 1rem; }
.pair img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.stair .note { grid-column: 1 / 7; margin-top: 3rem; }
@media (max-width: 800px) {
  .statement, .pair, .stair .note { grid-column: 1 / -1; }
  .pair { grid-template-columns: 1fr 1fr; margin-top: 2.5rem; gap: 0.75rem; }
  .stair .note { margin-top: 2rem; }
}

/* Two photographs edge to edge. */
.band { display: grid; grid-template-columns: 1fr 1fr; }
.band img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.band.single { grid-template-columns: 1fr; }
.band.single img { aspect-ratio: 21 / 9; }
.band .caption { grid-column: 1 / -1; padding: 1rem var(--margin) 0; font-size: var(--step-small); color: var(--muted); max-width: none; }
@media (max-width: 600px) { .band { grid-template-columns: 1fr; } .band.single img { aspect-ratio: 4 / 3; } }

/* Photographs on a dark page: one treatment for all of them, the files untouched. */
.stair img, .band img { filter: brightness(0.9) contrast(1.05); object-position: center; }

/* The close: the gold field, the facts above, the name running the full width below. */
.close { background: var(--accent); color: var(--accent-ink); padding-top: var(--section); display: grid;
  grid-template-rows: auto 1fr auto; overflow: hidden; }
.close-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; }
.close-grid > * { grid-column: span 6; }
.close a { color: inherit; }
.close .credits { grid-column: 1 / -1; max-width: 90ch; }
.wordmark { font-family: var(--font-display); font-size: calc((100vw - 2 * var(--margin)) / 5.15);
  line-height: 0.8; white-space: nowrap; padding: 0 var(--margin); margin-top: clamp(2rem, 8vw, 6rem); align-self: end; letter-spacing: 0.02em; }
.close .legal { font-size: var(--step-small); padding: 0.75rem var(--margin) 1rem; max-width: none; }
@media (max-width: 700px) { .close-grid > * { grid-column: 1 / -1; } }

/* A signed-in page: heading in the left third, the content in the right two-thirds, every row the same split. */
.rowsplit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-top: clamp(2rem, 4vw, 3.5rem); }
.rowsplit > h1, .rowsplit > h2 { grid-column: 1 / 5; }
.rowsplit > .body { grid-column: 5 / 11; max-width: 34rem; }
.rowsplit > .body > p { max-width: none; }
.rowsplit.full > .body { grid-column: 5 / -1; max-width: none; }
.rowsplit h1 { font-size: var(--step-head); }
.rowsplit h2 { font-size: var(--step-lead); font-family: var(--font-text); font-weight: 500; letter-spacing: 0; line-height: 1.3; }
/* The page's name leads, at sign scale, across the full width; its content starts the rows beneath. */
.rowsplit.first > h1 { grid-column: 1 / -1; font-size: clamp(3rem, 9vw, 8rem); line-height: 0.85; margin: 0 0 1.5rem -0.03em; }
@media (max-width: 800px) {
  .rowsplit > h1, .rowsplit > h2, .rowsplit > .body, .rowsplit.full > .body { grid-column: 1 / -1; }
  .rowsplit > .body { margin-top: 1rem; }
}

/* Real tables keep their lines. */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: var(--step-small); }
th, td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--field); vertical-align: top; }
th { color: var(--muted); font-weight: 500; }
.tree ul { margin: 0.25rem 0 0.25rem 1rem; padding-left: 0.75rem; border-left: 4px solid var(--field); }
.tree li { padding: 0.15rem 0; }

/* ---------- motion helpers (content stays visible without JavaScript) ---------- */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .statement span { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms); }
  .js .statement.is-in span { opacity: 1; transform: none; }
  .js .pair img, .js .band img { transform: scale(1.06); transition: transform 1400ms var(--ease-soft); }
  .js .pair.is-in img, .js .band.is-in img { transform: none; }
  /* A signed-in page's rows arrive part by part: heading, then each thing in the body. */
  .js .rowsplit[data-reveal] { opacity: 1; transform: none; }
  .js .rowsplit > h1, .js .rowsplit > h2, .js .rowsplit > .body > *, .js .rowsplit > .body > form > * { opacity: 0; transform: translateY(14px);
    transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); }
  .js .rowsplit.is-in > h1, .js .rowsplit.is-in > h2, .js .rowsplit.is-in > .body > *, .js .rowsplit.is-in > .body > form > * { opacity: 1; transform: none; }
  .js .rowsplit.is-in > .body > *:nth-child(2), .js .rowsplit.is-in > .body > form > *:nth-child(2) { transition-delay: 70ms; }
  .js .rowsplit.is-in > .body > *:nth-child(3), .js .rowsplit.is-in > .body > form > *:nth-child(3) { transition-delay: 140ms; }
  .js .rowsplit.is-in > .body > *:nth-child(4), .js .rowsplit.is-in > .body > form > *:nth-child(4) { transition-delay: 210ms; }
  .js .rowsplit.is-in > .body > *:nth-child(n+5), .js .rowsplit.is-in > .body > form > *:nth-child(n+5) { transition-delay: 280ms; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes line-up { to { transform: none; } }