/* Hallmark · shape: Index-First · genre: editorial · theme: Grid (by request) · job: none, a registry page with no action (user's words) · draw: manual
 * hero: Poster, overprint sheet (the head crosses an ultramarine field from column 8 to the bleed) · nav: edge-aligned, the wordmark on paper, anchors on the field · footer: colophon block · imagery: none, by request · signature: the overprint head, its letters turning paper where they cross the field
 * axes: light/grotesk-sans/cool · posture: full-palette (field ultramarine, mark red, ink) · contrast: pass · fold: pass · copy: en-GB · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, the copy could sit on another studio's page; tied each line to London, AI-first and the named roles */
/* Hallmark · dismissed 77 · a registry page with one project, a short record by request, every section holds its own facts */
@import url("./tokens.css");
@import url("./base.css");

:root { --text-poster: clamp(3.5rem, 10.2vw, 10rem); --field-col: 7; }
::selection { background: var(--color-mark); color: var(--color-mark-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.32em; transition: color var(--dur-short) var(--ease-out); }
a:hover { color: var(--color-mark); }
a:active { color: var(--color-ink-2); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Wordmark: two lines at one size beside a red square two lines tall */
.wordmark { display: inline-grid; grid-template-columns: auto auto; column-gap: var(--space-sm); align-items: center; margin: 0; font: 700 var(--text-md)/0.92 var(--font-display); letter-spacing: -0.01em; color: var(--color-ink); text-decoration: none; }
.wordmark::before { content: ""; grid-row: span 2; width: 1.84em; height: 1.84em; background: var(--color-mark); }
.wordmark b { font-weight: 700; }
.wordmark span { font-weight: 400; }
.wordmark:hover { color: var(--color-ink); }

/* The top sheet: nav and hero share one field that starts on column line 8 and bleeds right */
.top { position: relative; isolation: isolate; --field-x: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + var(--field-col) * (min(100%, var(--container)) - 2 * var(--gutter) + var(--gap-columns)) / 12); }
.top::before { content: ""; position: absolute; inset: 0 0 0 var(--field-x); z-index: -1; background: var(--color-field); }

.nav__inner { display: flex; align-items: center; justify-content: space-between; min-height: 80px; }
.nav__links { display: flex; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.nav__links a { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--color-field-ink); text-decoration: none; white-space: nowrap; padding-block: var(--space-sm); }
.nav__links a:hover { text-decoration: underline; color: var(--color-field-ink); }
.nav__links a:focus-visible { outline-color: var(--color-field-ink); }

.hero { min-height: calc(100dvh - 80px); display: grid; padding-block: var(--space-3xl) var(--space-2xl); box-sizing: border-box; }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); grid-template-rows: 1fr auto; row-gap: var(--space-3xl); }
.hero__head { grid-column: 1 / -1; align-self: center; position: relative; max-width: none; font-size: var(--text-poster); line-height: 0.9; letter-spacing: -0.045em; color: var(--color-ink); text-wrap: initial; }
.hero__head::after { content: attr(data-print); position: absolute; inset: 0; color: var(--color-field-ink); clip-path: inset(0 0 0 calc(var(--field-col) * (100% + var(--gap-columns)) / 12)); pointer-events: none; }
.hero__lead { grid-column: 1 / span 5; align-self: end; margin: 0; color: var(--color-ink-2); max-width: 36ch; }

/* How we work: head on columns 1 to 4, rows on 5 to 12 */
.how { padding-block: var(--section-gap) var(--section-gap-s); }
.how__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.how h2 { grid-column: 1 / span 4; max-width: 9ch; line-height: 1; }
.rows { grid-column: 5 / -1; margin: 0; }
.rows__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows__row:first-child { padding-top: 0; }
.rows dt { font: 700 var(--text-2xl)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.rows dd { margin: 0; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 40ch; text-wrap: pretty; }

/* Projects: the index as a specimen, the name at display size */
.projects { padding-block: var(--section-gap-s) var(--section-gap-l); }
.projects h2 { line-height: 1; margin-bottom: var(--space-2xl); }
.specimen { margin: 0; padding: 0; list-style: none; }
.specimen__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: end; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); }
.specimen__name { grid-column: 1 / span 6; max-width: none; font-size: var(--text-poster); line-height: 0.9; letter-spacing: -0.045em; }
.specimen__name a { text-decoration: none; }
.specimen__name a:hover { color: var(--color-mark); }
.specimen__facts { grid-column: 7 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gap-columns); margin: 0; }
.specimen__facts dt { font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }
.specimen__facts dd { margin: 0; min-width: 0; }

/* Company record on the second field */
.field { background: var(--color-field); color: var(--color-field-ink); --color-focus: var(--color-field-ink); }
.company { padding-block: var(--section-gap-s); }
.company__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.company h2 { grid-column: 1 / span 5; color: var(--color-field-ink); max-width: 11ch; line-height: 1; }
.record { grid-column: 7 / -1; margin: 0; }
.record__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid color-mix(in oklch, var(--color-field-ink) 35%, transparent); }
.record__row:first-child { padding-top: 0; }
.record dt { font-weight: 500; font-size: var(--text-sm); }
.record dd { margin: 0; font: 700 var(--text-xl)/1.2 var(--font-display); letter-spacing: -0.015em; min-width: 0; }

.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.field .fill { border-color: color-mix(in oklch, var(--color-field-ink) 70%, transparent); color: var(--color-field-ink); }

/* Footer: colophon block */
.footer { padding-block: var(--space-3xl) var(--space-2xl); }
.footer__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: start; }
.wordmark--foot { grid-column: 1 / span 4; justify-self: start; font-size: var(--text-xl); }
.footer__legal { grid-column: 7 / -1; display: grid; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.footer__legal p { margin: 0; max-width: 64ch; text-wrap: pretty; }

@media (max-width: 60rem) {
  .top::before { display: none; }
  .nav__inner { min-height: 64px; }
  .nav__links { gap: var(--space-md); }
  .nav__links a { color: var(--color-ink-2); }
  .nav__links a:hover { color: var(--color-mark); }
  .nav__links a:focus-visible { outline-color: var(--color-focus); }
  .hero { min-height: 0; padding-block: var(--space-2xl) var(--space-xl); }
  .hero__grid { row-gap: var(--space-lg); grid-template-rows: auto; }
  .hero__head::after { display: none; }
  .hero__lead { grid-column: 1 / -1; }
  .how__grid, .company__grid, .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .how h2, .rows, .company h2, .record, .wordmark--foot, .footer__legal { grid-column: 1 / -1; }
  .rows__row, .record__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .specimen__name, .specimen__facts { grid-column: 1 / -1; }
  .specimen__facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}
@media (max-width: 40rem) {
  .nav__links li:first-child { display: none; }
}