/* Hallmark · macrostructure: Split Studio · tone: austere · anchor hue: bronze 55°
 * nav: N6 newspaper masthead · footer: Ft1 mast-headed · enrichment: none (typography + authored SVG)
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */

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

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

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

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, .masthead__name, .foot__name {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }

/* Browsers give <figure> a 40px inline margin. It silently crushes grid content. */
figure { margin: 0; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

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

.muted { color: var(--color-ink-2); }
.small { font-size: var(--text-sm); }

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

.measure { max-width: var(--measure); }

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

.masthead {
  padding-top: var(--space-lg);
  text-align: center;
}

.masthead__name {
  margin: 0;
}

.masthead__name a {
  display: inline-block;
  text-decoration: none;
  padding-block: var(--space-xs);
  /* The logo's own rules are the width of the wordmark, not the page, which is
   * what keeps them reading as a mark rather than as another page divider. */
  border-top: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
}

.masthead__name a:hover { color: inherit; }

.masthead__name-a,
.masthead__name-b {
  display: block;
  text-transform: uppercase;
}

.masthead__name-a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3.6vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: 0.055em;
  /* Letterspacing adds a trailing gap; pull it back so the word stays centred. */
  margin-right: -0.055em;
}

.masthead__name-b {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.6rem, 1.35vw, 0.75rem);
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  color: var(--color-accent);
  margin-top: 0.35em;
}

.masthead__line {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin-top: var(--space-2xs);
}

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

.masthead__nav a {
  white-space: nowrap;
  font-size: var(--text-sm);
  text-decoration: none;
  padding-block: var(--space-2xs);
  border-bottom: 2px solid transparent;
}

.masthead__nav a:hover { border-bottom-color: var(--color-rule-strong); }

.masthead__nav a[aria-current="page"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
}

.masthead__rule {
  border: 0;
  border-top: 2px solid var(--color-ink-deep);
  border-bottom: 2px solid var(--color-gold);
  height: 5px;
  margin: var(--space-md) 0 0;
}

/* ── Page rhythm ─────────────────────────────────────────────────────── */

main { flex: 1 0 auto; }

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

.lede__title {
  font-size: var(--text-display);
  max-width: 22ch;
}

.lede--tight .lede__title { font-size: var(--text-display-s); max-width: 26ch; }

.lede__body {
  margin-top: var(--space-lg);
  max-width: 54ch;
  font-size: var(--text-lg);
  color: var(--color-ink-2);
}

.band { padding-block: var(--space-xl); }
.band--tight { padding-block: var(--space-lg); }
.band--deep { padding-block: var(--space-2xl); }

.band + .band { border-top: var(--rule-hair) solid var(--color-rule); }

.band__head {
  font-size: var(--text-2xl);
  max-width: 30ch;
}

.band__intro {
  margin-top: var(--space-md);
  max-width: 58ch;
  color: var(--color-ink-2);
}

/* ── Split Studio · the diptych ──────────────────────────────────────── */

.split {
  display: grid;
  gap: var(--space-lg) var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: var(--space-xl);
}

.split + .split { border-top: var(--rule-hair) solid var(--color-rule); }

.split__text { max-width: 46ch; }

.split__title { font-size: var(--text-2xl); }

.split__body { margin-top: var(--space-md); color: var(--color-ink-2); }

.split__body + .split__body { margin-top: var(--space-sm); }

.split__figure { margin: 0; }

.split__figure img {
  width: 100%;
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}

.split__caption {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  max-width: 44ch;
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* The pairing alternates direction down the page. */
  .split--flip .split__text { order: 2; }
  .split--flip .split__figure { order: 1; }
}

/* ── Outlined chip button (Split Studio's button voice) ──────────────── */

.chip {
  display: inline-block;
  margin-top: var(--space-lg);
  padding: 0.65rem 1.25rem;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-ink-deep);
  background: var(--color-gold);
  /* Deep-gold edge: gold on near-white paper is only 1.7:1 on its own, so the
   * border is what makes the control's boundary legible (and meets 3:1). */
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.chip:hover { background: var(--color-gold-deep); }

.chip:active { background: var(--color-accent); color: var(--color-paper); }

.chip--plain {
  /* The base chip is filled gold; the secondary action must clear that fill. */
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule-strong);
}

.chip--plain:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.textlink {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent-soft);
}

.textlink:hover { text-decoration-color: currentColor; }

/* ── Plain prose list, used for checklists and inclusions ────────────── */

.plainlist {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  max-width: 56ch;
}

.plainlist li {
  padding: var(--space-sm) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
}

.plainlist li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }

/* ── Numbered sequence. Numbered because it genuinely is one. ────────── */

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: grid;
  gap: var(--space-lg);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.steps h2 { font-size: var(--text-xl); }
.steps p { margin-top: var(--space-2xs); color: var(--color-ink-2); max-width: 52ch; }

/* ── Two honest notes. Deliberately not cards. ───────────────────────── */

.notes {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

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

.note {
  border-left: 2px solid var(--color-rule-strong);
  padding-left: var(--space-md);
}

.note h3 { font-size: var(--text-xl); max-width: 24ch; }
.note p { margin-top: var(--space-sm); color: var(--color-ink-2); }

/* ── Granite swatches ────────────────────────────────────────────────── */

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
}

.swatch figure { margin: 0; }

.swatch img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--rule-hair) solid var(--color-rule-strong);
}

.swatch figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
}

.swatch .note-stock {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

/* ── Emblems ─────────────────────────────────────────────────────────── */

.emblems {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-lg) var(--space-md);
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
}

.emblem { text-align: center; }
.emblem img { margin-inline: auto; width: 100%; max-width: 7.5rem; }
.emblem figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  line-height: 1.4;
  text-wrap: balance;
}

/* ── Shape diagrams ──────────────────────────────────────────────────── */

.shapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
}

.shape svg { width: 100%; height: auto; }
.shape h3 { font-size: var(--text-lg); margin-top: var(--space-sm); }
.shape p { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); }

/* ── Quote strip ─────────────────────────────────────────────────────── */

.quotestrip {
  background: var(--color-ink-deep);
  color: var(--color-on-dark);
  padding-block: var(--space-2xl);
}

.quotestrip h2 { font-size: var(--text-2xl); max-width: 26ch; color: var(--color-on-dark); }
.quotestrip p { margin-top: var(--space-md); max-width: 52ch; color: var(--color-on-dark-2); }
.quotestrip .email { margin-top: var(--space-md); font-size: var(--text-sm); }
.quotestrip .textlink { color: var(--color-gold); text-decoration-color: var(--color-gold-deep); }
.quotestrip a:hover { color: var(--color-gold); }

/* ── Ft1 · Mast-headed footer ────────────────────────────────────────── */

.foot {
  background: var(--color-ink-deep);
  color: var(--color-on-dark);
  border-top: var(--rule-hair) solid var(--color-gold-deep);
  padding-block: var(--space-xl);
  flex-shrink: 0;
}

.foot__inner {
  display: grid;
  gap: var(--space-md);
}

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

.foot__name { font-size: var(--text-xl); }

.foot__tagline {
  margin-top: var(--space-xs);
  max-width: 46ch;
  color: var(--color-on-dark-2);
  font-size: var(--text-sm);
}

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

.foot__links a { white-space: nowrap; font-size: var(--text-sm); text-decoration: none; color: var(--color-on-dark); }
.foot__links a:hover { color: var(--color-gold); text-decoration: underline; }

.foot__meta {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-on-dark-2);
}

.foot__meta a { color: var(--color-gold); }
.foot__meta a:hover { color: var(--color-gold-deep); }

.foot :focus-visible { outline-color: var(--color-gold); }
.quotestrip :focus-visible { outline-color: var(--color-gold); }

/* ── Motion discipline ───────────────────────────────────────────────── */

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

/* Shape diagrams. Paint lives here, not in presentation attributes, so the
 * tokens resolve reliably and the diagrams follow the theme. */
.shape__stone { fill: none; stroke: var(--color-ink-2); stroke-width: 1.5; stroke-linejoin: round; }
.shape__face  { fill: var(--color-paper-3); }
.shape__base  { fill: var(--color-paper-2); }
.shape__ground { stroke: var(--color-rule-strong); stroke-width: 1.5; }

/* Spacing utility, so pages carry no inline styles. */
.pad-top { margin-top: var(--space-xl); }

.lede__aside {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: 50ch;
}

/* Phone in the masthead. At-need families call rather than write. */
.masthead__call {
  margin-top: var(--space-xs);
  font-size: var(--text-lg);
  font-family: var(--font-display);
}

.masthead__call a {
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-soft);
}

.masthead__call a:hover { border-bottom-color: var(--color-accent); }

/* Paired call-to-action buttons. Wraps to a stack before either can go two-line. */
.lede__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-lg);
}

.lede__actions .chip { margin-top: 0; }

/* The plain chip needs a light outline once it sits on the dark closing band. */
.chip--on-dark {
  background: transparent;
  color: var(--color-on-dark);
  border-color: var(--color-on-dark-2);
}

.chip--on-dark:hover {
  background: var(--color-on-dark);
  border-color: var(--color-on-dark);
  color: var(--color-ink-deep);
}

/* ── Quote form ──────────────────────────────────────────────────────── */

.qform { margin-top: var(--space-lg); max-width: 46rem; }

.qform__intro { color: var(--color-ink-2); max-width: 54ch; }

.qform__grid { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }

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

.qfield { margin: 0 0 var(--space-md); }
.qform__grid .qfield { margin-bottom: 0; }

.qfield label,
.qfield legend {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-2xs);
}

.qfield input[type="text"],
.qfield input[type="tel"],
.qfield input[type="email"],
.qfield textarea {
  width: 100%;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.qfield textarea { resize: vertical; min-height: 6rem; }

.qfield input:hover,
.qfield textarea:hover { border-color: var(--color-ink-3); }

.qfield input:focus-visible,
.qfield textarea:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.qfield__hint {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.qfield--choice {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-md);
}

.qradio {
  display: block;
  font-weight: 380;
  font-size: var(--text-base);
  margin-bottom: var(--space-2xs);
  cursor: pointer;
}

.qradio input { margin-right: var(--space-xs); accent-color: var(--color-accent); }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.qform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qform__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.qform__actions .chip { margin-top: 0; }

.qform__status { font-size: var(--text-sm); color: var(--color-ink-2); }
.qform__status.is-error { color: var(--color-accent-deep); font-weight: 500; }

.qform__privacy {
  margin-top: var(--space-lg);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  max-width: 58ch;
}

.qform__done {
  padding: var(--space-lg);
  border-left: 2px solid var(--color-accent);
  background: var(--color-paper-2);
  max-width: 52ch;
}

.qform button[disabled] { opacity: 0.6; cursor: default; }

/* Six nav links sit ahead of the content on every page. Keyboard and screen
   reader users get one link to jump them. */
.skiplink {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: 10;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule-strong);
  transform: translateY(-200%);
}
.skiplink:focus { transform: none; }
main:focus { outline: none; }