/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5   (E4: first pass shipped gates 35/38/40/55 open — fixed)
 * genre: editorial · macrostructure: Catalogue · theme: Riso · enrichment: none (client photography only)
 * nav: N6 Newspaper masthead (knobs: issue-line=below wordmark, wordmark=display, rule=double)
 * footer: Ft4 Dense colophon (knobs: family=monospace, layout=log-style, includes=hours+date)
 * features: F3 Tabular spec sheet (knobs: columns=2, rules=every row, numbers=tabular)
 * heads: S2 Hanging · CTA: C3 Typographic link (underline=solid, hover=colour-shift, arrow=→)
 * tone: editorial · anchor hue: 27 (warm red) · language: fi
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */

@import url("tokens.css");

/* ── Reset + root ─────────────────────────────────────────────── */

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

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

body {
  overflow-x: clip;
  margin: 0;
  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;
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums;
  padding-inline: max(0px, env(safe-area-inset-left));
}

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;              /* headers are roman — always */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;         /* Finnish compounds are long */
  min-width: 0;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

::selection { background: var(--color-accent-wash); color: var(--color-ink); }

/* ── Shared utilities ─────────────────────────────────────────── */

.page {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Small caps-y label register lives on the display face — the outlier
   is reserved for printed data (hours) and the colophon. Two slots only. */
.label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-variation-settings: "wdth" 100, "wght" 500, "opsz" 12;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.prose {
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--color-ink-2);
}

.prose + .prose { margin-top: var(--space-md); }

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: var(--space-xs);
  z-index: var(--z-sticky);
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-thick) solid var(--color-accent);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.skip:focus { inset-inline-start: var(--space-md); }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  /* never transitioned — the ring is instant */
}

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

.mast {
  padding-block: var(--space-lg) 0;
  text-align: center;
}

.mast__issue {
  display: block;
  margin-bottom: var(--space-sm);
}

.mast__name {
  font-size: var(--text-display);
  font-variation-settings: "wdth" 80, "wght" 800, "opsz" 96;
  letter-spacing: -0.025em;
  line-height: 1.02;          /* all-caps floor — cap-tops collide below 1.0 */
  text-transform: uppercase;
}

.mast__nav { margin-top: var(--space-md); }

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

.mast__link {
  white-space: nowrap;              /* clickable text never wraps */
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "wght" 600, "opsz" 14;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding-block: var(--space-2xs);
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}

/* one hover signal: the rule under the word turns riso red */
@media (hover: hover) and (pointer: fine) {
  .mast__link:hover { text-decoration-color: var(--color-accent); }
}
.mast__link:active { color: var(--color-accent-ink); }

.mast__rule {
  border: 0;
  border-top: var(--rule-thick) solid var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-ink);
  height: calc(var(--rule-thick) + var(--rule-hair) * 2);
  margin: var(--space-md) 0 0;
}

/* ── Intro · the inventory header ─────────────────────────────── */

.intro {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-lg) var(--space-xl);
  align-items: start;
}

@media (min-width: 60rem) {
  .intro {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: var(--space-2xl);
    padding-block: var(--space-xl) var(--space-2xl);
  }
}

.intro__statement {
  font-size: var(--text-3xl);
  font-variation-settings: "wdth" 92, "wght" 800, "opsz" 40;
  max-width: 18ch;
}

.intro__statement mark {
  background: none;
  color: var(--color-accent-ink);
}

.intro__body { margin-top: var(--space-lg); }

/* Live open/closed — real data from the shop's posted hours */
.status {
  border-top: var(--rule-thick) solid var(--color-ink);
  padding-top: var(--space-sm);
}

.status__state {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 85, "wght" 800;
  font-size: var(--text-xl);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.status[data-open="true"] .status__state { color: var(--color-accent-ink); }
.status[data-open="false"] .status__state { color: var(--color-ink-2); }

.status__detail {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

/* ── S2 · Hanging section heads ───────────────────────────────── */

.head {
  padding-block: var(--space-xl) var(--space-lg);
  max-width: var(--measure);
}

.head--tight { padding-block: var(--space-xl) var(--space-md); }

.head__title {
  font-size: var(--text-2xl);
  font-variation-settings: "wdth" 88, "wght" 800, "opsz" 40;
}

.head__note {
  margin-top: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-base);
}

/* ── Catalogue grid · the shelf index ─────────────────────────── */

.shelves {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--rule-hair) solid var(--color-rule);
}

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

.shelf {
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

@media (min-width: 40rem) {
  .shelf { border-inline-end: var(--rule-hair) solid var(--color-rule); }
  .shelf:nth-child(2n) { border-inline-end: 0; padding-inline-start: var(--space-lg); }
}
@media (min-width: 60rem) {
  .shelf:nth-child(2n) { border-inline-end: var(--rule-hair) solid var(--color-rule); padding-inline-start: 0; }
  .shelf:nth-child(3n) { border-inline-end: 0; }
  .shelf:not(:nth-child(3n + 1)) { padding-inline-start: var(--space-lg); }
}

.shelf__name {
  font-size: var(--text-md);
  font-variation-settings: "wdth" 90, "wght" 700, "opsz" 20;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.shelf__note {
  margin-top: var(--space-2xs);
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: 1.45;
}

/* ── Photo band ───────────────────────────────────────────────── */

.plates {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}

@media (min-width: 60rem) {
  .plates {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-lg);
    align-items: end;
  }
}

.plate { margin: 0; }

.plate img {
  width: 100%;
  height: auto;
  border: var(--rule-hair) solid var(--color-rule);
}

.plate figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-muted);
}

/* ── Buying block · grid-break stamp ──────────────────────────── */

.buy {
  position: relative;
  padding-block: var(--space-lg) var(--space-3xl);
  border-top: var(--rule-thick) solid var(--color-ink);
}

.buy__stamp {
  width: clamp(5rem, 11vw, 8.5rem);
  height: auto;
  transform: rotate(-7deg);
  margin-bottom: var(--space-lg);
  /* logo.png ships an opaque white ground — multiply drops it onto the paper
     the way a riso spot colour would, instead of pasting a white rectangle */
  mix-blend-mode: multiply;
}

@media (min-width: 75rem) {
  /* the one deliberate grid-break: the stamp escapes into the right margin */
  .buy__stamp {
    position: absolute;
    inset-block-start: var(--space-2xl);
    inset-inline-end: 0;
    margin-bottom: 0;
  }
  .buy__inner { max-width: min(var(--measure), calc(100% - 12rem)); }
}

/* C3 · Typographic link */
.link {
  display: inline-block;
  margin-top: var(--space-lg);
  white-space: nowrap;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 90, "wght" 700;
  font-size: var(--text-md);
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  padding-block: var(--space-2xs);
  transition: color var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--color-ink); }
}
.link:active { color: var(--color-ink); }

@media (pointer: coarse) {
  .link, .mast__link, .visit a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── F3 · Tabular spec sheet — hours + contact ────────────────── */

.visit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  padding-block: var(--space-lg) var(--space-3xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

@media (min-width: 60rem) {
  .visit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3xl);
  }
}

.spec {
  margin: 0;
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.spec__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}

.spec__row:first-of-type { border-top: var(--rule-hair) solid var(--color-rule-2); }

.spec__key {
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spec__val {
  margin: 0;
  color: var(--color-ink);
  text-align: end;
}

/* the address is content, not an affordance-label — it may break across lines */
.spec__val--wrap a {
  white-space: normal;
  line-height: 1.5;
  display: block;   /* block, not inline-block, so the row's baseline is the
                       FIRST line — the key aligns with the street, not the city */
}

.spec__row[data-today="true"] .spec__key,
.spec__row[data-today="true"] .spec__val { color: var(--color-accent-ink); }

.spec__row[data-today="true"] .spec__key::after {
  content: " · tänään";
  letter-spacing: 0.02em;
  text-transform: none;
}

.visit a {
  color: var(--color-ink);
  text-decoration-color: var(--color-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .visit a:hover { text-decoration-color: var(--color-accent); }
}

/* Honest placeholder — a labelled hole, not an invented value */
.tbc {
  display: inline-block;
  border: var(--rule-hair) dashed var(--color-rule);
  padding: 0 var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.colophon {
  border-top: var(--rule-thick) solid var(--color-ink);
  padding-block: var(--space-lg) var(--space-2xl);
  padding-bottom: max(var(--space-2xl), env(safe-area-inset-bottom));
}

.colophon p {
  max-width: 74ch;
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  line-height: 1.9;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.colophon b {
  font-weight: 700;
  color: var(--color-ink);
}