/* Searey Book of Knowledge — page styles.
   Tokens, .btn, .input and .table come from the Broadsheet design system in
   styles.css; everything here is this page's own layout, lifted verbatim out
   of the design prototype's inline styles. Utilities are declared last so a
   margin utility beats the component class it sits next to. */

/* ---------------------------------------------------------------- base */

body { margin: 0; background: var(--color-bg); }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.page {
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 17px/1.65 var(--font-body);
  min-height: 100vh;
  padding: var(--space-6) var(--space-6) var(--space-8);
}

/* ----------------------------------------------------------- masthead */

.masthead { max-width: 1320px; margin: 0 auto var(--space-8); }
.masthead-row {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: var(--space-4);
}
/* sits under the SEAREY title, so it reads "SEAREY — Book of Knowledge" */
.masthead-kicker {
  font: 600 12px/1 var(--font-heading);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--color-accent-700);
  margin-top: var(--space-3);
}
.masthead-title {
  font: 600 clamp(56px, 9vw, 132px)/0.88 var(--font-heading);
  letter-spacing: -0.02em;
  margin: 0;
}
.masthead-standfirst {
  font: 400 italic 19px/1.4 var(--font-body);
  max-width: 30ch;
  margin: 0 0 var(--space-2);
  color: var(--color-neutral-800);
}
/* front-page furniture: the thick-thin rule pair around the dateline */
.rule-heavy { height: 6px; background: var(--color-text); margin-top: var(--space-4); }
.rule-hair { height: 1px; background: var(--color-text); }
.dateline {
  display: flex; flex-wrap: wrap;
  gap: var(--space-4); justify-content: space-between;
  font: 600 12px/1 var(--font-heading);
  letter-spacing: .16em; text-transform: uppercase;
  padding: var(--space-2) 0;
}

/* ------------------------------------------------------------- layout */

.layout {
  max-width: 1320px; margin: 0 auto;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.book { min-width: 0; }

/* ---------------------------------------------------------------- rail */

.rail {
  position: sticky; top: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.rail-search { display: flex; flex-direction: column; gap: var(--space-2); }
.rail-label {
  font: 600 11px/1 var(--font-heading);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.rail-label-nav { padding-bottom: var(--space-1); }
.rail-input { width: 100%; box-sizing: border-box; }
.rail-status {
  font: 400 italic 14px/1.3 var(--font-body);
  color: var(--color-neutral-700);
  min-height: 18px;
}
.rail-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.navlink {
  font: 400 16px/1.35 var(--font-body);
  color: var(--color-text);
  padding: 3px 0;
}
/* set by the scroll spy in site.js */
.navlink.is-current { color: var(--color-accent-700); font-weight: 600; }

/* ------------------------------------------------------------ chapters */

.chapter { padding: var(--space-8) 0; border-top: 1px solid var(--color-divider); }
.chapter-lead { padding: 0 0 var(--space-8); border-top: 0; }
.chapter-final { padding: var(--space-8) 0 var(--space-6); border-top: 6px solid var(--color-text); }
.chapter-kicker {
  font: 600 12px/1 var(--font-heading);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.chapter-kicker-alt { color: var(--color-accent-2-700); }
.chapter-title {
  font: 600 clamp(30px, 3.4vw, 46px)/1.02 var(--font-heading);
  margin: var(--space-2) 0 var(--space-4);
}
.chapter-title-tight { margin-bottom: var(--space-2); }
.chapter-standfirst {
  font: 400 italic 19px/1.4 var(--font-body);
  margin: 0 0 var(--space-6);
  color: var(--color-neutral-800);
}

/* ------------------------------------------------------- opening spread */

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.lede {
  font: 400 22px/1.5 var(--font-body);
  margin: 0 0 var(--space-4);
  max-width: 46ch;
}
/* Four figures: 4-up while they have the room, 2×2 once they don't. An
   auto-fit track ran them 3 + 1 through the middle widths, orphaning the
   last figure on a line of its own. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
@media (max-width: 1200px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stat-figure { font: 600 40px/1 var(--font-heading); color: var(--color-accent-700); }
.stat-label { font: 400 14px/1.3 var(--font-body); color: var(--color-neutral-700); }

.figure-stack { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.figure-caption {
  font: 400 italic 15px/1.4 var(--font-body);
  color: var(--color-neutral-700);
}

/* The hero photograph, shown straight. The design system prints photographs
   under a newsprint halftone dot screen (.halftone / .cmyk in styles.css, a
   3px grid of 22%-black dots multiplied over the image) and the prototype's
   hero carried it; at this size it read as a visible dot pattern rather than
   print texture, so it is deliberately not applied here. To put it back, add
   the ::after from .halftone in styles.css.
   object-position keeps the crop the prototype was framed to. */
.hero {
  position: relative; overflow: hidden;
  background: var(--color-bg);
  width: 100%; height: 320px;
}
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 37% 50%; }

/* -------------------------------------------------------------- content */

.h3 { font: 600 22px/1.2 var(--font-heading); margin: 0 0 var(--space-2); }
.h4 { font: 600 20px/1.2 var(--font-heading); margin: 0 0 var(--space-2); }
.pull { font: 400 italic 19px/1.5 var(--font-body); }
.note-muted { color: var(--color-neutral-700); font-style: italic; }
.accent-2 { color: var(--color-accent-2-700); }

/* the inline uppercase label that opens a critical note */
.flag {
  font: 600 12px/1 var(--font-heading);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent-2-700);
  margin-right: var(--space-2);
}
/* emphasizeCritical, the prototype's default-on reading option */
[data-critical] {
  background: var(--color-accent-2-100);
  padding: var(--space-3) var(--space-4);
}

/* Subsections read straight down the page, one after another, at the same
   measure as the surrounding prose. They were an auto-fit grid in the design
   mock, which orphaned the last item onto a row of its own whenever the count
   did not divide by the column count (4 items over 3 columns), and squeezed
   each one into a ~300px column. */
.cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.cols > * { max-width: 68ch; }

.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.list-ol { margin: 0; padding-left: var(--space-6); display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
/* em-dash bullets, hung in the margin */
.list-dash > li { position: relative; padding-left: var(--space-4); }
.list-dash > li::before {
  content: "\2014"; position: absolute; left: 0;
  color: var(--color-accent-600);
}
.list-dash-alt > li::before { color: var(--color-accent-2-600); }

/* tables keep their own scroll rather than widening the page */
.table-scroll { overflow-x: auto; }
.table-scroll .table { min-width: 520px; }

.colophon {
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--color-divider);
  display: flex; flex-wrap: wrap;
  gap: var(--space-4); justify-content: space-between;
  font: 400 14px/1.4 var(--font-body);
  color: var(--color-neutral-700);
}

/* ------------------------------------------------------------ utilities */

.measure { max-width: 68ch; }
.measure-62 { max-width: 62ch; }
.mb-0 { margin: 0; }
.mb-2 { margin: 0 0 var(--space-2); }
.mb-3 { margin: 0 0 var(--space-3); }
.mb-4 { margin: 0 0 var(--space-4); }
.mb-6 { margin: 0 0 var(--space-6); }
.mt-4 { margin: var(--space-4) 0 0; }
.mt-6 { margin: var(--space-6) 0 0; }
.my-6-3 { margin: var(--space-6) 0 var(--space-3); }
.my-6-4 { margin: var(--space-6) 0 var(--space-4); }

/* ----------------------------------------------------------- responsive */
/* The prototype is a desktop broadsheet; below the two-column threshold the
   rail stops floating and becomes a contents block above the book. */

@media (max-width: 900px) {
  .page { padding: var(--space-4) var(--space-4) var(--space-6); }
  .layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .rail { position: static; }
  .rail-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-1) var(--space-4);
  }
  .rail-nav > .rail-label { grid-column: 1 / -1; }
  .intro-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .masthead { margin-bottom: var(--space-6); }
  .dateline { gap: var(--space-2) var(--space-4); }
}

@media (max-width: 560px) {
  .hero { height: 240px; }
  .dateline { font-size: 11px; }
}

@media print {
  .rail { display: none; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .page { padding: 0; }
}