/* Hallmark · genre: editorial · macrostructure: Photographic · theme: Newsprint · enrichment: none · nav: N6 · footer: Ft4
 * H6 hero knobs: image=full-bleed, caption=lower-left, text=below
 * N6 knobs: issue-line=below wordmark, wordmark=2xl, rule=double
 * F3 knobs: columns=2 (name/price) + footnote row, rules=every row, numbers=tabular
 * S4 knobs: small-caps inline head, no spatial break
 * C3 knobs: underline=solid, hover=thicken, arrow=→
 * Ft4 knobs: family=serif, layout=paragraphs, includes=hours + address
 * tone: soft (inferred) · audience: local weekday lunch guests (inferred) · use case: know the lunch, the price, the hours (inferred)
 * anchor hue: 31 — the café's own sign red, sampled from logo.jpg
 * motion: none. Editorial is motion-default-off; Photographic lets the photographs do the work.
 * slop test: 58/58 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;                 /* clip, never hidden — keeps sticky/fixed alive */
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  hyphens: auto;                    /* Finnish compounds break kindly */
}

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--space-md); top: -4rem;
  z-index: var(--z-sticky);
  background: var(--color-paper);
  color: var(--color-accent-deep);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-accent);
  white-space: nowrap;          /* affordance stays one line at 320px */
}
.skip:focus { top: var(--space-md); }

:focus-visible {                    /* never transitioned — the ring is instant */
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 3px;
}

.rule-double {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  height: var(--space-2xs);
  margin: var(--space-md) 0 0;
}

/* ─── N6 · Newspaper masthead ─────────────────────────────────────────── */

.mast {
  padding: var(--space-lg) max(var(--page-gutter), env(safe-area-inset-left)) 0;
  text-align: center;
}

.mast__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.125rem, 6vw, 3.5rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  hyphens: manual;
  min-width: 0;
}

.mast__line {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
}

.mast__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs) var(--space-lg);
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}

.mast__link {
  display: inline-block;
  padding-block: var(--space-2xs);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-sm);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  white-space: nowrap;              /* affordances are single-line objects */
  background-image: linear-gradient(var(--color-rule), var(--color-rule));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% var(--rule-hair);
  transition: color var(--dur-micro) var(--ease-out);
}

/* ─── H6 · Photographic folds ─────────────────────────────────────────── */

.fold-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
}

.fold-photo--hero {
  aspect-ratio: auto;
  block-size: min(78dvh, 44rem);
  min-block-size: 20rem;
}

.fold-photo--tall { aspect-ratio: 4 / 3; }

.fold-photo picture { display: block; block-size: 100%; }

.fold-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Two-stop scrim so the caption stays legible over any frame of the photo */
.fold-photo::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 45%;
  background: linear-gradient(to top, var(--color-scrim), var(--color-scrim-0));
  pointer-events: none;
}

.fold-photo__caption {
  position: absolute;
  z-index: var(--z-base);
  inset-block-end: var(--space-lg);
  inset-inline-start: max(var(--page-gutter), env(safe-area-inset-left));
  margin: 0;
  max-inline-size: 26ch;
  color: var(--color-on-photo);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.25;
  hyphens: manual;
}

/* ─── Text folds ──────────────────────────────────────────────────────── */

.fold-text {
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left));
}

.fold-text--lede    { padding-block: var(--space-3xl) var(--space-2xl); }
.fold-text--menu    { padding-block: var(--space-3xl); }
.fold-text--takeaway{ padding-block: var(--space-2xl) var(--space-3xl); }

.lede {
  margin: 0 0 var(--space-xl);
  max-inline-size: 22ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  hyphens: manual;
  min-width: 0;
}

.body {
  margin: 0;
  max-inline-size: 58ch;
  font-size: var(--text-md);
  line-height: 1.6;
}

.body--tight { margin-block-start: var(--space-lg); font-size: var(--text-base); color: var(--color-muted); }
.body--lg    { max-inline-size: 60ch; }

.head-inline {
  font-family: var(--font-display);
  font-variant-caps: all-small-caps;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ─── S-head + F3 · price sheet ───────────────────────────────────────── */

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  hyphens: manual;
  min-width: 0;
}

/* The one branded mark on the page — the sign red, 3ch wide */
.section-title::before {
  content: "";
  display: block;
  inline-size: 3ch;
  block-size: var(--rule-thick);
  margin-block-end: var(--space-sm);
  background: var(--color-accent);
}

.section-sub {
  margin: var(--space-2xs) 0 var(--space-xl);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
}

.menu {
  display: block;
  inline-size: 100%;
  max-inline-size: 44rem;
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.menu tbody { display: block; }

.menu tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.menu tr:first-child { border-block-start: var(--rule-hair) solid var(--color-rule); }

.menu th {
  margin: 0;
  text-align: start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.3;
}

.menu__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  text-align: end;
  white-space: nowrap;
}

.menu__note {
  grid-column: 1 / -1;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.menu__row--soft th,
.menu__row--soft .menu__price {
  font-weight: 400;
  color: var(--color-muted);
}

/* ─── Weekly menu — five hairline-topped columns, broadsheet listing ──── */

.fold-text--week { padding-block: var(--space-2xl) var(--space-3xl); }

.week {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xl);
}

.day {
  min-width: 0;
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.day__name {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.2;
}

.day__date { color: var(--color-muted); font-weight: 400; }

.day__dishes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}

.day__dishes li { line-height: 1.4; overflow-wrap: anywhere; }

.diet {
  color: var(--color-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.legend {
  margin-block-start: var(--space-xl);
  color: var(--color-muted);
  font-size: var(--text-sm);
  max-inline-size: 60ch;
}

.body--welcome { margin-block-start: var(--space-lg); color: var(--color-muted); }

/* ─── C3 · Typographic link ───────────────────────────────────────────── */

.link {
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% var(--rule-hair);
  padding-block-end: var(--space-3xs);
  transition: color var(--dur-micro) var(--ease-out);
}

.mast__link:active,
.link:active { color: var(--color-accent-deep); }

.link--quiet {
  color: var(--color-ink);
  background-image: linear-gradient(var(--color-rule), var(--color-rule));
}

/* ─── Ft4 · Dense colophon ────────────────────────────────────────────── */

.colophon {
  padding: var(--space-2xl) max(var(--page-gutter), env(safe-area-inset-left))
           max(var(--space-3xl), env(safe-area-inset-bottom));
}

.colophon .rule-double { margin: 0 0 var(--space-xl); }

.colophon__grid { display: grid; gap: var(--space-xl); }

.sign img {
  inline-size: 100%;
  max-inline-size: 10rem;
  height: auto;
  border: var(--rule-hair) solid var(--color-rule);
}

.colophon__body {
  max-inline-size: 56ch;
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.5;
}

.colophon__block { margin: 0 0 var(--space-md); }

.colophon__meta {
  margin: var(--space-lg) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Honest holes: real content the café has not supplied yet */
.pending {
  background: var(--color-paper-3);
  border-block-end: var(--rule-hair) dashed var(--color-neutral);
  color: var(--color-muted);
  font-style: italic;
  white-space: nowrap;   /* never breaks as "lisä-tään" */
  hyphens: manual;
}

/* ─── Responsive ──────────────────────────────────────────────────────── */

@media (min-width: 48rem) {
  .colophon__grid {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

@media (min-width: 40rem) {
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .week { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
}

@media (min-width: 80rem) {
  .week { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .fold-photo       { aspect-ratio: 16 / 7; }
  .fold-photo--tall { aspect-ratio: 2 / 1; }
  .fold-photo--hero { aspect-ratio: auto; }

  /* Asymmetry: the lede sits flush left, the supporting line steps in */
  .fold-text--lede .body { margin-inline-start: 30%; }
  .fold-text--takeaway .body { margin-inline-start: 12%; }
}

@media (hover: hover) and (pointer: fine) {
  .mast__link:hover,
  .link--quiet:hover { color: var(--color-accent); }          /* colour shift only */
  .link:hover       { background-size: 100% var(--rule-thick); }  /* thicken only */
}

@media (pointer: coarse) {
  .mast__link { min-block-size: 44px; display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}