/* ==========================================================================
   LUME — base.  Reset, type scale, landmarks, focus, motion gate.
   No hex literals below this line. Tokens only.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* Explicit. The viewer paints its own ground behind a transparent body. */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  border-radius: var(--radius);
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---- TK-002  Type scale -------------------------------------------------- */
/* --font-display is only ever applied at >= 1.25rem. Enforced by only ever
   attaching it to these classes, all of which are above that floor. */

.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--w-regular);
  font-variation-settings: 'opsz' 120, 'SOFT' 0, 'WONK' 1;
}

.t-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  font-weight: var(--w-regular);
  font-variation-settings: 'opsz' 48, 'WONK' 1;
}

.t-sub {
  font-family: var(--font-display);
  font-size: var(--t-sub);
  line-height: 1.25;
  font-weight: var(--w-regular);
  font-variation-settings: 'opsz' 24;
}

.t-body  { font-size: var(--t-body); }
.t-small { font-size: var(--t-small); line-height: 1.45; }

.t-label {
  font-size: var(--t-label);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  font-weight: var(--w-bold);
}

.muted { color: var(--ink-muted); }
.measure { max-width: var(--measure); }

/* Positive tracking never lands on lowercase body copy — only on .t-label,
   which is uppercase by definition. */

/* ---- Focus --------------------------------------------------------------- */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-4);
}
.skip:focus { left: var(--s-3); top: var(--s-3); }

/* ---- Links --------------------------------------------------------------- */
/* TK-007 micro-interaction 1 of 3: the underline grows. */
a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
}

@media (prefers-reduced-motion: no-preference) {
  a { transition: background-size var(--d-state) var(--ease-inout); }
}

@media (hover: hover) and (pointer: fine) {
  a:hover { background-size: 100% 1px; }
}

a:focus-visible { background-size: 100% 1px; }

a.plain { background-image: none; }

/* ---- Rules --------------------------------------------------------------- */
hr, .rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

/* ---- Utility ------------------------------------------------------------- */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.spread { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.gutter { padding-inline: var(--gutter); }

/* Deliberate rhythm. There is no global section-margin utility — identical
   spacing between every section is the template tell. Sections opt in. */
.section-gap { margin-top: var(--section); }
.tight-gap   { margin-top: var(--s-6); }
.close-gap   { margin-top: var(--s-4); }

/* ---- Images -------------------------------------------------------------- */
/* Every slot reserves its box before paint. Zero CLS on the menu list. */
.plate {
  display: block;
  width: 100%;
  background: var(--wash);
  overflow: hidden;
}
.plate[data-ratio="3/2"]  { aspect-ratio: 3 / 2; }
.plate[data-ratio="2/3"]  { aspect-ratio: 2 / 3; }
.plate[data-ratio="16/9"] { aspect-ratio: 16 / 9; }
.plate > svg { width: 100%; height: 100%; object-fit: cover; }

/* TK-007 micro-interaction 2 of 3. */
@media (prefers-reduced-motion: no-preference) {
  .plate > svg { transition: transform 800ms var(--ease-out); }
  .plate:active > svg { transform: scale(1.04); }
}
@media (hover: hover) and (pointer: fine) {
  .plate:hover > svg { transform: scale(1.04); }
}

/* ---- Print --------------------------------------------------------------- */
@media print {
  .no-print { display: none !important; }
}