/*
 *  KIMI VIEWPOINTS
 *
 *  THE ONE IDEA
 *  The front page of a newspaper of record, printed on copper-tinted stock
 *  taken from the logo's own triangles. The nameplate is the largest type on
 *  the page — the publication outranks the story; the week's headline is only
 *  the lead deck. All running text is justified and hyphenated in ruled
 *  columns. Hierarchy is rule, case, and size — never panels, fills, or chrome.
 *
 *  TYPEFACE RATIONALE
 *  Times New Roman, deliberately, and nothing else. Georgia and Palatino were
 *  already spoken for in this gallery; Times is the actual face of record —
 *  gazettes, central-bank bulletins, and serious front pages are set in Times
 *  faces. Unstyled Times reads as a default; Times set with newspaper
 *  discipline (tracked caps, hairlines, a double rule, justified measure)
 *  reads as a newspaper. One family, four voices: roman, italic, tracked
 *  caps, and rule. No sans, no mono, no system-ui.
 *
 *  THE SCALE
 *  Nameplate clamp(2.2rem, 8vw, 5.2rem), bold, tracked — the biggest type on
 *  the page. Lead headline clamp(1.9rem, 4.2vw, 3rem), roman, hanging second
 *  line. Standing heads, datelines, and folio 0.7–0.8rem tracked caps. Body
 *  1rem / 1.55, justified, hyphens:auto. Rules: 3px+1px double under the
 *  nameplate (and inverted at the colophon), 1px hairlines between sections,
 *  dotted leaders in the contents list.
 *
 *  THE DECISION I'D DEFEND HARDEST
 *  Setting the entire page in Times New Roman. The objection — "it looks like
 *  an unstyled document" — is true only of unstyled Times. The discipline of
 *  this page (nameplate, double rule, justification, tracked caps, leaders)
 *  is exactly what makes the face read as a newspaper of record instead of a
 *  fallback. Any other web-safe serif would be prettier and less honest:
 *  this letter sells primary-source reporting, and it wears the typeface
 *  that has set the record for a century.
 *
 *  CONTRAST — verified WCAG AA (normal text requires 4.5:1)
 *  ink    #1c120d on paper #f4e5d8 .... 14.9 : 1
 *  muted  #5d4335 on paper ............  7.4 : 1
 *  faint  #6f5244 on paper ............  5.8 : 1
 *  copper #7f4329 on paper ............  6.2 : 1
 *  paper on brown #342421 (button) .... 12.0 : 1
 */

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

:root {
  /* stock — tinted from the logo's light triangle (#d59b80) */
  --paper:    #f4e5d8;
  --paper-hi: #fbf3ea;

  /* ink */
  --ink:   #1c120d;
  --muted: #5d4335;
  --faint: #6f5244;

  /* the logo's rust and deep-brown triangles, deepened for text use */
  --copper:      #7f4329;
  --copper-deep: #63341f;
  --brown:       #342421;

  --rule: #c8ad93;

  --serif: 'Times New Roman', 'Times', 'Liberation Serif', 'Nimbus Roman', 'Nimbus Roman No9 L', serif;

  --wrap: 64rem;
}

/* ─── RESET & BASE ───────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--copper);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--copper-deep);
}

::selection {
  background: var(--brown);
  color: var(--paper);
}

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

input:focus-visible {
  outline-offset: -2px;
}

/* ─── UTILITIES ──────────────────────────────────────────────────── */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.skip {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  text-decoration: none;
}

.skip:focus {
  top: 0.5rem;
}

/* honeypot — hidden via stylesheet only; no inline styles */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── NAMEPLATE ──────────────────────────────────────────────────── */

.nameplate {
  padding-top: 0.9rem;
}

.np-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
}

.np-logo img {
  height: 22px;
  width: auto;
}

.np-folio,
.np-line {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.np-hair {
  border: 0;
  border-top: 1px solid var(--ink);
  margin: 0.6rem 0 0;
}

.np-title {
  margin: 0.14em 0 0.1em;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(2.2rem, 8vw, 5.2rem);
  line-height: 0.95;
  text-wrap: balance;
}

.np-row--base {
  padding-bottom: 0.55rem;
}

/* thick-over-thin double rule — the page's heaviest mark */
.np-double {
  border: 0;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 3px;
  margin: 0;
}

/* ─── HERO — THE LEAD ────────────────────────────────────────────── */

.lead {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding-block: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.kicker {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}

.lead-h1 {
  margin: 0 0 1.1rem;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.lead-h1-ind {
  padding-left: 1.4em;
}

.deck {
  margin: 0;
  max-width: 52ch;
  font-size: 1.0625rem;
  text-align: justify;
  hyphens: auto;
}

/* ─── SUBSCRIPTION NOTICE (form) ─────────────────────────────────── */

.notice {
  align-self: start;
  background: var(--paper-hi);
  border: 1px solid var(--ink);
  padding: 1.25rem 1.35rem 1.35rem;
}

.notice--wide {
  max-width: 28rem;
  margin-inline: auto;
}

.notice-flag {
  margin: -1.25rem -1.35rem 1.1rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}

.field {
  margin-bottom: 0.9rem;
}

.field label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input {
  width: 100%;
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.field input::placeholder {
  color: var(--faint);
  opacity: 1;
}

.notice-btn {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  background: var(--brown);
  color: var(--paper);
  border: 1px solid var(--brown);
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.notice-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.notice-priv {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}

/* ─── SECTIONS & STANDING HEADS ──────────────────────────────────── */

.sheet {
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

/* standing head: tracked caps centered between hairlines */
.flag {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}

.flag::before,
.flag::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--rule);
  transform: translateY(-0.2em);
}

/* ─── WHAT YOU'LL GET — contents list with dotted leaders ────────── */

.toc {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  font-size: 1.1rem;
}

.toc li:last-child {
  border-bottom: 1px solid var(--rule);
}

.toc-t {
  flex: 0 1 auto;
  min-width: 0;
}

.toc-leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 0.9em;
  border-bottom: 1px dotted var(--faint);
}

.toc-n {
  flex: 0 0 auto;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--copper);
}

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

.story-h {
  margin: 0 0 1.1rem;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.15;
  font-weight: 700;
  text-wrap: balance;
}

.story-cols {
  columns: 2 30ch;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--rule);
  text-align: justify;
  hyphens: auto;
  widows: 2;
  orphans: 2;
}

.story-cols p {
  margin: 0 0 0.9rem;
}

.dateline {
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
}

.briefs {
  margin-top: 2.25rem;
  padding-top: 1rem;
  border-top: 3px solid var(--ink);
}

.briefs-flag {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}

.briefs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.briefs-list li {
  margin: 0;
  padding-inline: 1.25rem;
  font-size: 0.95rem;
  text-align: justify;
  hyphens: auto;
}

.briefs-list li:first-child {
  padding-left: 0;
}

.briefs-list li:last-child {
  padding-right: 0;
}

.briefs-list li + li {
  border-left: 1px solid var(--rule);
}

/* ─── COUNTRY COVERAGE — four ruled columns ──────────────────────── */

.bureaus {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.bureau {
  padding-inline: 1.25rem;
}

.bureau:first-child {
  padding-left: 0;
}

.bureau:last-child {
  padding-right: 0;
}

.bureau + .bureau {
  border-left: 1px solid var(--rule);
}

.bureau-h {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.bureau p {
  margin: 0;
  font-size: 0.95rem;
  text-align: justify;
  hyphens: auto;
}

/* ─── WHO IT'S FOR — hanging-dash list ───────────────────────────── */

.audience {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2 34ch;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--rule);
}

.audience li {
  break-inside: avoid;
  margin: 0 0 1rem;
  padding-left: 1.4em;
  text-indent: -1.4em;
  text-align: justify;
  hyphens: auto;
}

.audience li::before {
  content: "\2014\0020";
}

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

.faq {
  margin: 0;
  columns: 2 34ch;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--rule);
}

.faq-pair {
  break-inside: avoid;
  margin: 0 0 1.5rem;
}

.faq dt {
  font-weight: 700;
}

.faq dd {
  margin: 0.3rem 0 0;
  text-align: justify;
  hyphens: auto;
}

/* ─── SUBSCRIBE BAND ─────────────────────────────────────────────── */

.band {
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

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

.colophon {
  padding-block: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

/* thin-over-thick: the nameplate rule, inverted, closing the page */
.colophon-rule {
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  height: 3px;
  margin: 0 0 2rem;
}

.colophon-logo img {
  height: 18px;
  width: auto;
  margin: 0 auto 1rem;
  opacity: 0.85;
}

.colophon p {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.colophon .fine {
  margin-top: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .bureaus {
    grid-template-columns: 1fr 1fr;
  }

  .bureau:nth-child(2) {
    padding-right: 0;
  }

  .bureau:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .bureau:nth-child(3),
  .bureau:nth-child(4) {
    border-top: 1px solid var(--rule);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
  }
}

@media (max-width: 760px) {
  .lead {
    grid-template-columns: 1fr;
  }

  .notice {
    max-width: 28rem;
  }

  .briefs-list {
    grid-template-columns: 1fr;
  }

  .briefs-list li,
  .briefs-list li:first-child,
  .briefs-list li:last-child {
    padding-inline: 0;
  }

  .briefs-list li + li {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 0.9rem;
    margin-top: 0.9rem;
  }
}

@media (max-width: 560px) {
  .bureaus {
    grid-template-columns: 1fr;
  }

  .bureau,
  .bureau:first-child,
  .bureau:nth-child(3) {
    padding-inline: 0;
  }

  .bureau + .bureau {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
  }

  .bureau:nth-child(3) {
    margin-top: 1.25rem;
  }

  .toc li {
    font-size: 1rem;
  }

  .np-line {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }
}

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