/*
  ─────────────────────────────────────────────────────────────────────
  ANDEAN VIEWPOINTS — STYLE SHEET

  THE ONE IDEA DRIVING THE DESIGN
  A vertical masthead spine. The Coppermont wordmark and the issue
  manifest run sideways down the left edge of the viewport as a
  structural axis — the spine of a bound report, the stamp on a ship's
  manifest, the marginalia of a geological survey. Everything else
  hangs off that vertical rule. The headline breaks past the grid.
  Numerals catalogue every element. The page reads top-to-bottom like a
  document that was set, not designed.

  TYPEFACE RATIONALE
  A Palatino-class serif (Iowan Old Style → Palatino Linotype → Book
  Antiqua → Georgia) carries all running text and the headline. It is
  narrower than Georgia, more upright than Garamond, and carries the
  institutional register of a central-bank bulletin without lapsing into
  literary warmth. A system sans (Helvetica Neue → Arial) is used only
  for metadata: folio numbers, section tags, form labels, country
  stamps, standing heads — everything glanced at, never read at length.
  system-ui is rejected as the body face; a newsletter that sells
  reading cannot be set in the UI font. The split between serif-at-length
  and sans-for-metadata is the typographic engine.

  THE SCALE
  Base 17px at 1.6 line-height. Headlines use clamp() to scale from
  the viewport — the hero H1 spans from 2.8rem to 7.5rem, committing
  to enormous. Section heads hold at clamp(1.5rem, 4vw, 2.25rem).
  Metadata is fixed at 0.6875rem–0.8125rem, all-caps, tracked.
  Body measure is capped at 68ch. The manifest numerals are set at
  the metadata size but in the serif, so they read as document
  furniture, not UI chrome.

  THE ONE DECISION I'D DEFEND HARDEST
  The vertical spine displaces the logo from the page top to the page
  edge, rotated 90°. A conventional masthead puts the brand at the
  top-centre or top-left, horizontal, prominent. Here the brand is
  structural — it is the margin, not the header. The risk is that a
  reader doesn't see it. The defence: the page sells primary-source
  reporting, and a reader who scrolls past a rotated wordmark to reach
  the copy is a reader who came for the copy. The spine makes the
  page feel bound and catalogued — a document, not a landing page.
  ─────────────────────────────────────────────────────────────────────
*/

/* ─── TOKENS ─────────────────────────────────────────────────────── */

:root {
  --paper:       #f2efe8;
  --paper-deep:  #e8e3d6;
  --paper-darker: #ddd6c4;
  --ink:         #1a1814;
  --ink-soft:    #3a3630;
  --ink-muted:   #6a6459;
  --rule:        #1a1814;
  --rule-soft:   #c4bdab;
  --accent:      #7a2a1e;
  --accent-deep: #5a1f16;

  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
           Palatino, "Palatino RFC", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  --base: clamp(0.9375rem, 0.9vw + 0.75rem, 1.0625rem);
  --measure: 68ch;
  --measure-wide: 82ch;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --spine-w: clamp(2.75rem, 5vw, 4.5rem);
  --spine-gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* ─── RESET ──────────────────────────────────────────────────────── */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--base);
  line-height: 1.6;
  font-feature-settings: "onum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Leave room for the vertical spine */
  padding-left: calc(var(--spine-w) + var(--spine-gap));

  /* min-height so the spine always spans the full viewport height */
  min-height: 100vh;
}

@media (max-width: 48rem) {
  :root {
    --spine-w: 2.5rem;
    --spine-gap: 1rem;
  }
  body { padding-left: calc(var(--spine-w) + var(--spine-gap)); }
}

/* ─── ACCESSIBILITY ──────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.625rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.skip:focus {
  left: 0;
  top: 0;
}

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

/* ─── VERTICAL SPINE ─────────────────────────────────────────────── */

.spine {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--spine-w);
  height: 100vh;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 0 1.5rem;
  background: var(--ink);
  border-right: 1px solid var(--ink);
}

.spine-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
}

/* Logo: rotated and sized to sit in the spine */
.spine-logo {
  width: auto;
  height: clamp(1.75rem, 3.5vh, 2.5rem);
  filter: invert(1) brightness(1.4);
  display: block;
}

.spine-link {
  display: block;
  line-height: 0;
  border-bottom: none;
}

/* The wordmark running vertically */
.spine-wordmark {
  flex: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  display: flex;
  align-items: center;
  opacity: 0.85;
}

@media (max-height: 30rem) {
  .spine-wordmark { display: none; }
}

/* ─── MAIN CONTENT ───────────────────────────────────────────────── */

main {
  max-width: 90rem;
  margin: 0;
  padding-right: var(--gutter);
}

/* ─── HERO ───────────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(2rem, 6vh, 4rem);
  padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
  border-bottom: 2px solid var(--rule);
}

.hero-folio {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 0.625rem;
  margin-bottom: clamp(1.25rem, 4vh, 2.25rem);
}

.folio-no {
  color: var(--accent);
  font-weight: 700;
}
.folio-sep { color: var(--rule-soft); }
.folio-org { font-weight: 600; color: var(--ink-soft); }
.folio-spacer { flex: 1; }
.folio-firm { font-style: italic; text-transform: none; letter-spacing: 0.02em; }

/* The enormous headline */
.hero-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 9.5vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  max-width: 20ch;
}

.hero-h1-strike {
  display: inline-block;
  position: relative;
}
.hero-h1-strike::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 52%;
  height: 0.08em;
  background: var(--accent);
}

/* Hero split: copy left, form right */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 42rem) {
  .hero-split { grid-template-columns: 1fr; }
}

.hero-copy {
  max-width: 52ch;
}

.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.hero-cadence {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  padding-top: 0.625rem;
  border-top: 1px solid var(--rule-soft);
}

/* ─── FORMS ──────────────────────────────────────────────────────── */

.sub-form {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.sub-form--repeat {
  max-width: 40rem;
}

.form-legend {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--accent);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

.field {
  margin-bottom: 1.125rem;
}

.field label,
.field--select label {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 0.375rem;
  font-weight: 600;
}

.opt {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 0.6875rem;
}

.field input[type="email"],
.field select {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.field select {
  font-family: var(--sans);
  font-size: 0.875rem;
  background-image: none;
}

.field input[type="email"]:focus,
.field select:focus {
  outline: 3px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

/* Honeypot: hidden via stylesheet, not inline */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.btn-sub {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.875rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
  margin-top: 0.5rem;
  transition: background 0.12s, color 0.12s;
}

.btn-sub:hover { background: var(--accent); border-color: var(--accent); }
.btn-sub:active { background: var(--accent-deep); border-color: var(--accent-deep); }

.privacy {
  font-family: var(--sans);
  font-size: 0.6875rem;
  color: var(--ink-muted);
  margin-top: 0.875rem;
  text-align: center;
  line-height: 1.5;
}

/* ─── SECTIONS ───────────────────────────────────────────────────── */

.section {
  padding-top: clamp(2rem, 6vh, 3.5rem);
  padding-bottom: clamp(2rem, 6vh, 3.5rem);
  border-bottom: 1px solid var(--rule-soft);
}

.sec-head {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.sec-num {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  border-top: 2px solid var(--accent);
  padding-top: 0.375rem;
}

.sec-meta {
  border-top: 2px solid var(--rule);
  padding-top: 0.375rem;
}

.sec-kind {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}

.sec-h {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 3.5vw, 2.125rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  max-width: 50ch;
}

/* ─── MANIFEST LIST (What you'll get) ────────────────────────────── */

.manifest {
  list-style: none;
  counter-reset: manifest;
}

.manifest-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 2.5vh, 1.5rem) 0;
  border-bottom: 1px solid var(--rule-soft);
}

.manifest-item:first-child {
  border-top: 1px solid var(--rule);
}

.manifest-no {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--accent);
  line-height: 1.4;
}

.manifest-title {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 0.375rem;
}

.manifest-text {
  max-width: var(--measure);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ─── SAMPLE ISSUE ───────────────────────────────────────────────── */

.section--sample {
  background: var(--paper-deep);
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
  margin-left: calc(-1 * (var(--spine-w) + var(--spine-gap)));
  padding-left: calc(var(--spine-w) + var(--spine-gap));
}

.issue {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.25rem, 3vw, 2rem) 0;
}

.issue-masthead {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}

.issue-vol { font-weight: 700; color: var(--ink-soft); }
.issue-date { font-style: italic; text-transform: none; letter-spacing: 0.02em; }
.issue-pages { margin-left: auto; }

.issue-rule {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 1.25rem 0;
}
.issue-rule--double {
  border-top: 3px double var(--rule);
}

.issue-stand {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.625rem;
}

.issue-country {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--paper);
  background: var(--accent);
  padding: 0.1875rem 0.5rem;
  margin-bottom: 0.75rem;
}

.issue-country--sm {
  font-size: 0.6875rem;
  padding: 0.125rem 0.4375rem;
  margin-bottom: 0;
}

.issue-h3 {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.875rem;
  max-width: 52ch;
}

.issue-body {
  max-width: var(--measure);
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
  text-align: justify;
  hyphens: auto;
}

/* Roundup: two-column grid on wide viewports */
.roundup {
  display: grid;
  gap: 0;
}

.roundup-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.25rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}

.roundup-row:last-child { border-bottom: none; }

.roundup-row dd {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (max-width: 36rem) {
  .roundup-row { grid-template-columns: 1fr; gap: 0.375rem; }
}

/* ─── COUNTRY COVERAGE ───────────────────────────────────────────── */

.countries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 2px solid var(--rule);
}

.country {
  padding: clamp(1.25rem, 3vw, 1.875rem) clamp(1rem, 3vw, 1.875rem) clamp(1.25rem, 3vw, 1.875rem) 0;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}

.country:nth-child(odd) {
  border-right: 1px solid var(--rule-soft);
  padding-right: clamp(1rem, 3vw, 1.875rem);
}

.country:nth-child(even) {
  padding-left: clamp(1rem, 3vw, 1.875rem);
}

@media (max-width: 40rem) {
  .countries { grid-template-columns: 1fr; }
  .country:nth-child(odd) { border-right: none; padding-right: 0; }
  .country:nth-child(even) { padding-left: 0; }
}

.country-name {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  margin-bottom: 0.5rem;
}

.country-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 0.625rem;
}

.country-iso {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}

/* ─── AUDIENCE ──────────────────────────────────────────────────── */

.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  border-top: 2px solid var(--rule);
  padding-top: clamp(1.25rem, 3vw, 1.875rem);
}

@media (max-width: 40rem) {
  .audience { grid-template-columns: 1fr; gap: 2rem; }
}

.audience-tag {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-soft);
}

.audience-list {
  list-style: none;
}

.audience-list li {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 42ch;
  font-size: 0.9375rem;
  position: relative;
  padding-left: 1.5rem;
}

.audience-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ─── FAQ ───────────────────────────────────────────────────────── */

.faq {
  border-top: 2px solid var(--rule);
}

.faq-pair {
  padding: clamp(1rem, 2.5vh, 1.375rem) 0;
  border-bottom: 1px solid var(--rule-soft);
}

.faq-q {
  font-family: var(--serif);
  font-size: clamp(0.9375rem, 2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 0.5rem;
  font-style: italic;
}

.faq-mark {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-right: 0.375rem;
}

.faq-a {
  max-width: var(--measure);
  color: var(--ink-soft);
  line-height: 1.6;
  padding-left: 1.875rem;
  font-size: 0.9375rem;
}

/* ─── REPEATED FORM SECTION ──────────────────────────────────────── */

.section--repeat {
  text-align: left;
}

/* ─── FOOTER / COLOPHON ──────────────────────────────────────────── */

.colophon {
  padding-top: clamp(2.5rem, 6vh, 4rem);
  padding-bottom: clamp(2rem, 5vh, 3rem);
  border-top: 4px double var(--rule);
  padding-right: var(--gutter);
}

.colo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

@media (max-width: 40rem) {
  .colo-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.colo-block:last-child { text-align: left; }

.colo-logo {
  width: auto;
  height: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 0.75rem;
  display: block;
}

.colo-head {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.colo-line {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 0.25rem;
}

.colo-line a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
}
.colo-line a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.colo-fine {
  font-family: var(--sans);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  border-top: 1px solid var(--rule-soft);
  padding-top: 1rem;
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ─── PRINT ──────────────────────────────────────────────────────── */

@media print {
  .spine { display: none; }
  body { padding-left: 0; }
  .hero-h1 { font-size: 2.5rem; }
  .section--sample { margin-left: 0; padding-left: 0; margin-right: 0; padding-right: 0; }
}