/* Hallmark · genre: editorial · macrostructure: Stat-Led · theme: Almanac
 * enrichment: none (typography-led; three photographic plates as texture only)
 * nav: N9 edge-aligned minimal · footer: Ft4 dense colophon
 * hero: H4 · features: F3 tabular spec sheet · CTA: C3 typographic link · heads: S4 inline
 * tone: utilitarian · anchor hue: 38 (rautaoksidi / minium)
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 * slop test: 58/58 — fixed pre-ship: 26 (:active), 35 (underline offset),
 *   36 (flex centring), 38 (mono outlier 10 slots -> 2), 40 (contrast 3.33/3.58 -> pass)
 */

@import url("tokens.css");

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

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

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;
  text-rendering: optimizeLegibility;
  padding-inline: max(0px, env(safe-area-inset-left));
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 3px;
  /* Rings appear instantly — never transitioned. */
}

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

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

.tnum { font-variant-numeric: tabular-nums; }

/* ================================================================
   N9 · Edge-aligned minimal nav
   The space between wordmark and phone is the design. No link row.
   ================================================================ */
.nav-edge {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark b { font-weight: 600; }

.nav-edge__tel {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  padding-block-end: var(--space-3xs);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.nav-edge__tel:hover { border-bottom-color: var(--color-accent); }
.nav-edge__tel:active { color: var(--color-accent-2); border-bottom-color: var(--color-accent-2); }

/* ================================================================
   H4 · Stat-Led hero
   ================================================================ */
.hero {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-2xl) var(--space-3xl);
  max-width: 54rem;
}

.hero__figure {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-figure);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--color-accent);
  margin: 0;
}

.hero__title {
  font-size: clamp(1.875rem, 4.2vw + 0.5rem, 2.875rem);
  max-width: 20ch;
}

.hero__lede {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-muted);
  max-width: var(--measure);
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  margin-block-start: var(--space-xs);
}

/* ================================================================
   C3 · Typographic link
   ================================================================ */
.link {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-2xs);
  border-bottom: var(--rule-thick) solid var(--color-accent);
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.link:hover { color: var(--color-accent); }
.link:active { color: var(--color-accent-2); border-bottom-color: var(--color-accent-2); }
.link .arrow { font-variant-numeric: normal; }

.link--quiet {
  border-bottom-color: var(--color-rule-2);
  color: var(--color-muted);
  font-weight: 400;
}
.link--quiet:hover { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.link--quiet:active { color: var(--color-accent-2); border-bottom-color: var(--color-accent-2); }

/* ================================================================
   Sections — deliberately uneven vertical rhythm
   ================================================================ */
.band { border-top: var(--rule-hair) solid var(--color-rule); }
.band--work    { padding-block: var(--space-3xl) var(--space-2xl); }
.band--spec    { padding-block: var(--space-2xl) var(--space-3xl); }
.band--plates  { padding-block: var(--space-xl); }
.band--company { padding-block: var(--space-3xl) var(--space-2xl); }
.band--contact { padding-block: var(--space-2xl) var(--space-4xl); }

.band__title {
  font-size: var(--text-xl);
  margin-block-end: var(--space-lg);
  max-width: 24ch;
}

.prose {
  max-width: var(--measure);
  display: grid;
  gap: var(--space-md);
  font-size: var(--text-md);
  line-height: 1.62;
}
.prose p { color: var(--color-ink); }

/* S4 · Inline section head — emerges inside the body flow */
.head-inline {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--color-accent);
}

/* Asymmetric split: prose left, aside right. 1.45 / 1 — not equal columns. */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 1.45fr 1fr; gap: var(--space-3xl); }
}

.aside__title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--color-neutral);
  margin-block-end: var(--space-sm);
}

.tasklist { display: grid; gap: var(--space-sm); }
.tasklist li {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-muted);
  padding-inline-start: var(--space-md);
  border-inline-start: var(--rule-thick) solid var(--color-rule);
}

/* ================================================================
   Unconfirmed content marker
   Honest-copy rule: never invent a spec. Mark the hole instead.
   ================================================================ */
.todo {
  font-style: normal;
  color: var(--color-todo);
  background: var(--color-todo-bg);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
  font-size: 0.92em;
}
.todo::after {
  content: "vahvistettava";
  font-size: 0.68em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-inline-start: 0.5em;
  opacity: 0.75;
}

/* ================================================================
   F3 · Tabular spec sheet
   ================================================================ */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: start;
}

.spec caption {
  text-align: start;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--color-neutral);
  padding-block-end: var(--space-sm);
}

.spec th,
.spec td {
  padding-block: var(--space-sm);
  padding-inline-end: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  vertical-align: baseline;
  text-align: start;
}

.spec th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-muted);
  width: 34%;
}

.spec td { font-size: var(--text-md); color: var(--color-ink); }
.spec td.num { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.spec .note { display: block; font-size: var(--text-sm); color: var(--color-neutral); margin-block-start: var(--space-3xs); }
.spec tr:last-child th,
.spec tr:last-child td { border-block-end: 0; }

/* Mobile: the table becomes stacked key-over-value rows. */
@media (max-width: 40rem) {
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec tr {
    padding-block: var(--space-md);
    border-block-end: var(--rule-hair) solid var(--color-rule);
  }
  .spec th, .spec td { border: 0; padding-block: 0; padding-inline-end: 0; }
  .spec th { margin-block-end: var(--space-3xs); }
  .spec tr:last-child { border-block-end: 0; }
}

/* ================================================================
   Photographic plates — texture, not argument.
   minmax(0, 1fr) so image tracks can never push the layout wide.
   ================================================================ */
.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-sm);
}
.plate { margin: 0; }
.plate img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--rule-hair) solid var(--color-rule);
  filter: saturate(0.82) contrast(1.02);
}
.plate figcaption {
  font-size: var(--text-xs);
  color: var(--color-neutral);
  letter-spacing: 0.03em;
  margin-block-start: var(--space-xs);
}

/* One plate is wider than the others — breaks the equal-tile rhythm. */
@media (min-width: 60rem) {
  .plates { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* ================================================================
   Contact
   ================================================================ */
.contact {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 48rem) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

.contact__lede {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw + 0.4rem, 2.25rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  max-width: 18ch;
  margin: 0;
}

.contact__rows { display: grid; gap: var(--space-lg); }
.contact__row { display: grid; gap: var(--space-3xs); }
.contact__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--color-neutral);
}
.contact__value { font-size: var(--text-md); }
.contact__value a {
  color: var(--color-ink);
  text-decoration-color: var(--color-rule-2);
  text-underline-offset: 2px;
  /* The email is long; let it break rather than overflow at 320 px.
     Only the phone number stays unbreakable. */
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.contact__value a[href^="tel:"] { white-space: nowrap; overflow-wrap: normal; }
.contact__value a:hover { text-decoration-color: var(--color-accent); }
.contact__value a:active { color: var(--color-accent-2); text-decoration-color: var(--color-accent-2); }
.contact__value address { font-style: normal; }

/* ================================================================
   Ft4 · Dense typographic colophon
   Carries the registry line and the photo credits (CC BY requires them).
   ================================================================ */
.foot-dense {
  border-top: var(--rule-thick) solid var(--color-rule-2);
  padding-block: var(--space-lg) var(--space-2xl);
  padding-bottom: max(var(--space-2xl), env(safe-area-inset-bottom));
}
.foot-dense p {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  line-height: 1.75;
  color: var(--color-neutral);
  max-width: 74ch;
}
.foot-dense p + p { margin-block-start: var(--space-sm); }
.foot-dense a { color: var(--color-muted); text-underline-offset: 2px; }
.foot-dense a:hover { color: var(--color-accent); }
.foot-dense a:active { color: var(--color-accent-2); }

/* ================================================================
   Motion — one orchestrated entrance, staggered by DOM index.
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(9px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

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

@media (pointer: coarse) {
  .link,
  .nav-edge__tel,
  .wordmark,
  .contact__value a,
  .foot-dense a { min-height: 44px; display: inline-flex; align-items: center; }
  /* An address that has broken across lines must not be forced to one row. */
  .contact__value a { flex-wrap: wrap; }
}