/* Hallmark · macrostructure: Letter · tone: editorial, intimate, documentary · anchor hue: warm 29°
 * theme: custom (locked to Grech dossier brand) · paper oklch(95.3% 0.018 85) · accent oklch(56% 0.21 29)
 * display: Cormorant Garamond · body: Inter
 * axes: light paper / classical-serif display / warm accent
 * nav: N6 Newspaper masthead · footer: Ft5 Statement · enrichment: real assets (1936 photograph + 5 brush plates)
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */

@import url("fonts.css");
@import url("tokens.css");

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

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

html {
  background: var(--color-paper);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.68;
  color: var(--color-ink-soft);
  background: var(--color-paper);
  background-image:
    radial-gradient(oklch(45% 0.04 75 / 0.035) 1px, transparent 1px),
    radial-gradient(oklch(45% 0.04 75 / 0.028) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  font-variant-numeric: lining-nums;
}

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

a { color: var(--color-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

.muted { color: var(--color-ink-mute); }

/* ============ N6 · masthead ============ */

.mast {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-lg) var(--page-gutter) 0;
  text-align: center;
}

.mast__line {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  margin: 0;
}

.mast__name {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  margin: var(--space-2xs) 0 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

.mast__name .of { color: var(--color-accent); }

.mast__rule {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  height: 4px;
  margin: var(--space-md) 0 0;
}

/* ============ letter ============ */

.letter { padding-block: var(--space-2xl) var(--space-xl); }

.letter__salutation {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
}

.letter p {
  max-width: var(--measure);
  margin: 0 0 var(--space-md);
}

.letter p.lead {
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-ink);
}

.letter strong { color: var(--color-ink); font-weight: 400; box-shadow: inset 0 -0.42em var(--color-accent-quiet); }

.sep {
  text-align: center;
  letter-spacing: 0.8em;
  color: var(--color-ink-mute);
  margin: var(--space-xl) 0;
  font-size: var(--text-sm);
}

/* ============ the photograph ============ */

.plate { margin: var(--space-xl) 0; }

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

.plate--portrait img {
  max-width: 20rem;
  margin-inline: auto;
}

.plate figcaption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  margin-top: var(--space-xs);
  text-align: center;
  max-width: 34ch;
  margin-inline: auto;
  line-height: 1.5;
}

.plate--wide img { border: 0; mix-blend-mode: multiply; }

/* ============ the record ============ */

.record {
  border-top: var(--rule-bold) solid var(--color-ink);
  padding-top: var(--space-md);
  margin: var(--space-xl) 0;
}

.record h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
  font-weight: 400;
}

.record dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.record dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.record dd {
  margin: var(--space-3xs) 0 var(--space-sm);
  color: var(--color-ink);
  font-size: var(--text-base);
}

.record dd .qty { color: var(--color-accent); }

@media (min-width: 40rem) {
  .record dl { grid-template-columns: 14rem minmax(0, 1fr); }
  .record dt { padding-bottom: var(--space-sm); }
  .record dd {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    margin: 0;
    border-top: var(--rule-hair) solid var(--color-rule);
  }
}

/* ============ deadline ============ */

.deadline {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.deadline__date {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-accent);
  margin: 0 0 var(--space-xs);
  overflow-wrap: anywhere;
  min-width: 0;
}

.deadline p { max-width: var(--measure); margin: 0; }

/* ============ sign-off + list ============ */

.signoff { margin-top: var(--space-xl); }

.signoff__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: var(--space-md) 0 var(--space-2xs);
}

.signoff__where {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  margin: 0;
}

.ps {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.ps h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-ink);
  margin: 0 0 var(--space-xs);
}

.ps p { max-width: var(--measure); margin: 0 0 var(--space-md); }

.subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: stretch;
  max-width: 30rem;
}

.subscribe input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-bottom: var(--rule-bold) solid var(--color-ink);
  padding: var(--space-2xs) 0;
  border-radius: 0;
}

.subscribe input[type="email"]::placeholder { color: var(--color-ink-mute); }

.subscribe button {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-paper);
  background: var(--color-ink);
  border: var(--rule-bold) solid var(--color-ink);
  padding: var(--space-2xs) var(--space-md);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.subscribe button:hover,
.subscribe button.is-hover { background: var(--color-accent); border-color: var(--color-accent); }
.subscribe button:active,
.subscribe button.is-active { transform: translateY(1px); }
.subscribe button:disabled { opacity: 0.45; cursor: not-allowed; }

.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#company { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.subscribe[data-state="loading"] button { opacity: 0.55; cursor: progress; }
.subscribe[data-state="success"] button { background: var(--color-ink); border-color: var(--color-ink); cursor: default; }
.subscribe[data-state="success"] .subscribe__note { color: var(--color-ink); }
.subscribe[data-state="error"] input[type="email"] { border-bottom-color: var(--color-accent); }
.subscribe[data-state="error"] .subscribe__note { color: var(--color-accent); }

.subscribe__note {
  font-size: var(--text-xs);
  color: var(--color-ink-mute);
  margin: var(--space-2xs) 0 0;
  flex: 1 0 100%;
}

/* ============ Ft5 · statement footer ============ */

.foot {
  margin-top: var(--space-3xl);
  background: var(--color-paper-2);
  padding: var(--space-2xl) 0 var(--space-lg);
}

.foot__line {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5.5vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  max-width: 22ch;
  margin: 0 0 var(--space-xl);
  overflow-wrap: anywhere;
  min-width: 0;
}

.foot__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs);
  color: var(--color-ink-mute);
}

.foot__meta .wordmark {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-ink);
  letter-spacing: 0.04em;
}

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

/* ============ site nav (added with /registry) ============ */

.sitenav {
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
}

.sitenav__inner {
  max-width: 62rem;
  margin-inline: auto;
  padding: var(--space-xs) var(--page-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: baseline;
  justify-content: space-between;
}

.sitenav__brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.sitenav__brand .of { color: var(--color-accent); }

.sitenav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}

.sitenav a:not(.sitenav__brand) {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  text-decoration: none;
  white-space: nowrap;
}
.sitenav a[aria-current="page"] { color: var(--color-ink); box-shadow: inset 0 -2px var(--color-accent); }
.sitenav a:not(.sitenav__brand):hover { color: var(--color-accent); }

/* ============ Index-First · the register ============ */

.reg { max-width: 62rem; margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-xl); }

.reg__head { max-width: var(--measure); margin-bottom: var(--space-2xl); }

.reg__title {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  line-height: 1.02;
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
  overflow-wrap: anywhere;
  min-width: 0;
}

.reg__standfirst { font-size: var(--text-lg); line-height: 1.55; color: var(--color-ink); margin: 0 0 var(--space-sm); }
.reg p { max-width: var(--measure); }

.reg__group { margin-block: var(--space-2xl); }

.reg__group > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0 0 var(--space-2xs);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-bold) solid var(--color-ink);
}

.reg__group > p { margin: 0 0 var(--space-lg); color: var(--color-ink-mute); font-size: var(--text-sm); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  padding: var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.entry__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

.entry__name a { text-decoration-color: var(--color-rule); }

.entry__what { margin: 0; }

.entry__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-ink-mute);
}

.entry__facts b {
  display: block;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-ink-mute);
  opacity: 0.75;
}

.entry__facts span { color: var(--color-ink); font-size: var(--text-sm); }
.entry__facts .measured span { color: var(--color-accent); }

.entry__trap {
  margin: var(--space-2xs) 0 0;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-paper-2);
  border-left: var(--rule-bold) solid var(--color-accent);
  font-size: var(--text-sm);
  max-width: var(--measure);
}

.reg__missing {
  margin-block: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--color-paper-2);
}
.reg__missing h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: 0 0 var(--space-xs);
}