/* Hallmark · genre: editorial (brutal register) · macrostructure: Manifesto · theme: custom (brass & leather, dark) · enrichment: one B&W photo bleed · nav: N7 brutal slab · footer: Ft4 dense typographic · tone: declarative, confident · anchor hue: 80 brass
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 */
html, body { overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-body); }
a { color: var(--color-ink); text-underline-offset: 0.2em; transition: color var(--dur-micro) var(--ease-out); }
@media (hover: hover) { a:hover { color: var(--color-accent); } }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; font-style: normal; text-transform: uppercase; color: var(--color-ink); line-height: var(--lh-tight); letter-spacing: 0.005em; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
.demo-banner { background: var(--color-accent); color: var(--color-accent-ink); border-bottom: 0; }

/* N7 brutal slab */
.slab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); padding: var(--space-sm) var(--page-gutter); border-bottom: 3px solid var(--color-ink); }
.slab__mark { font-family: var(--font-display); font-weight: 900; font-size: var(--text-md); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.slab nav { order: 3; flex-basis: 100%; }
.slab__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--space-lg); }
.slab__nav a { display: inline-block; padding-block: var(--space-xs); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.slab__nav a[aria-current="page"] { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.slab__cta, .block-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-xs) var(--space-lg);
  background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.slab__cta { margin-inline-start: auto; }
@media (hover: hover) { .slab__cta:hover, .block-cta:hover { background: var(--color-ink); color: var(--color-accent-ink); } }
.slab__cta:active, .block-cta:active { transform: translateY(1px); }

/* Manifesto */
.manifesto { padding: var(--space-3xl) var(--page-gutter) var(--space-2xl); }
.manifesto h1 { font-size: var(--text-display); transform: rotate(-2deg); transform-origin: left bottom; max-width: 12ch; }
.claims { list-style: none; margin: 0; padding: 0 var(--page-gutter) var(--space-3xl); display: grid; gap: var(--space-xl); max-width: 64rem; }
.claims li { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.12; color: var(--color-ink); border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
.claims li span { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: var(--lh-body); color: var(--color-muted); margin-top: var(--space-xs); max-width: var(--measure); }

.bleed { margin: 0; }
.bleed img { width: 100%; height: min(70dvh, 48rem); object-fit: cover; filter: grayscale(1) contrast(1.05); background: var(--color-paper-2); }

.band { background: var(--color-paper-2); padding: var(--space-2xl) var(--page-gutter); display: grid; gap: var(--space-lg); }
.band h2 { font-size: var(--text-xl); }

.price-list { width: 100%; max-width: 48rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-list th, .price-list td { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); text-align: start; vertical-align: baseline; }
.price-list th { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); text-transform: uppercase; color: var(--color-ink); letter-spacing: 0.02em; }
.price-list td.minutes { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; padding-inline: var(--space-md); }
.price-list td.price { font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); color: var(--color-accent); text-align: end; white-space: nowrap; }
.note { font-size: var(--text-sm); color: var(--color-muted); }

.page-head { padding: var(--space-2xl) var(--page-gutter) var(--space-lg); display: grid; gap: var(--space-md); }
.page-head h1 { font-size: var(--text-xl); }
.page-head p { max-width: var(--measure); font-size: var(--text-md); color: var(--color-ink); line-height: 1.45; }
.section { padding: var(--space-xl) var(--page-gutter) var(--space-2xl); display: grid; gap: var(--space-lg); }
.duo { display: grid; gap: var(--space-md); padding-inline: var(--page-gutter); }
.duo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-paper-2); }
.prose { display: grid; gap: var(--space-md); max-width: var(--measure); }

.final { padding: var(--space-3xl) var(--page-gutter); display: grid; gap: var(--space-lg); justify-items: start; }
.final h2 { font-size: var(--text-xl); max-width: 14ch; }
.block-cta { min-height: 64px; padding-inline: var(--space-xl); font-size: var(--text-md); }

.info { margin: 0; display: grid; gap: var(--space-md); }
.info dt { font-size: var(--text-sm); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.info dd { margin: 0; color: var(--color-ink); font-size: var(--text-md); }
.map-consent { background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.map-consent button { min-height: 44px; padding: var(--space-xs) var(--space-lg); border: 2px solid var(--color-ink); background: transparent; color: var(--color-ink); cursor: pointer; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

.legal { padding: var(--space-2xl) var(--page-gutter); display: grid; gap: var(--space-lg); max-width: calc(var(--measure) + 2 * var(--page-gutter)); }
.legal h1 { font-size: var(--text-xl); }
.legal h2 { font-size: var(--text-md); }
.legal section { display: grid; gap: var(--space-xs); }

/* Ft4 dense typographic */
.colophon { border-top: 3px solid var(--color-ink); padding: var(--space-xl) var(--page-gutter) var(--space-2xl); }
.colophon p { max-width: 70ch; font-size: var(--text-sm); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.8; }
.colophon a { color: var(--color-ink); }

@media (min-width: 52rem) {
  .slab nav { order: 0; flex-basis: auto; margin-inline-start: auto; }
  .slab__cta { margin-inline-start: 0; }
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
}