/* ==========================================================================
   EDITORIAL MODERNISM — one page. Loaded on a/editorial-modernism.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A magazine: spreads with running heads and folios, a twelve-column grid,
   bound captions and monochrome plates. Identity Resolution (2026-09-29):
   the spread is composed as one image, so the reading apparatus is gone
   (no column rules, drop caps, pull quotes or baseline-grid toggle). Text
   sits as a subordinate block; the opening plate bleeds off the page edge;
   "Show the fold" (.em-fold on body) draws each spread's gutter.

   One vertical unit: --em-bl (28px) still sets line boxes and spacing.
   Rules are drawn as inset box-shadows, not borders.

   The shell (rail, top bar, standing panel) is never restyled: every rule
   here is scoped to .em-hero or .em-rec. Literata (roman + italic) and
   Oswald are real files; the shell sets font-synthesis:none, so Oswald is
   never set in italic.
   ========================================================================== */
@font-face {
  font-family: "Literata X";
  src: url("fonts/literata.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata X";
  src: url("fonts/literata-italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Oswald X";
  src: url("fonts/oswald.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
}

.em-page {
  --em-paper: #FDFDFB; --em-ink: #141412; --em-grey: #4A4A45; --em-rule: #C9C9C2;
  --em-bl: 28px;
  --em-serif: "Literata X", "Iowan Old Style", Palatino, Georgia, serif;
  --em-cond: "Oswald X", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  background: var(--paper); /* shell mat; the page ground lives on main */
}
.em-page main { background: var(--em-paper); color: var(--em-ink); }

.em-hero, .em-rec { font: 400 17px/var(--em-bl) var(--em-serif); color: var(--em-ink); }
.em-hero a, .em-rec a { color: var(--em-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.em-hero a:hover, .em-rec a:hover { background: var(--em-ink); color: var(--em-paper); }
.em-hero :focus-visible, .em-rec :focus-visible { outline: 2px solid var(--em-ink); outline-offset: 3px; }
.em-hero p, .em-rec p { margin: 0; }

/* ---- the spread ---- */
.em-spread {
  position: relative; max-width: 1280px; margin: 0 auto;
  padding: var(--em-bl) clamp(0px, 2vw, 32px) calc(var(--em-bl) * 2);
  box-shadow: inset 0 -1px 0 var(--em-ink);
}
/* "Show the fold": the gutter of the double-page spread, drawn down the middle. */
.em-page.em-fold .em-spread::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
  border-left: 1px dashed var(--em-grey); pointer-events: none;
}
.em-run {
  display: flex; justify-content: space-between; gap: 16px;
  margin-bottom: var(--em-bl);
  font: 500 11px/var(--em-bl) var(--em-cond); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 -1px 0 var(--em-ink);
}
.em-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--em-bl); }
.em-c3 { grid-column: span 3; } .em-c4 { grid-column: span 4; } .em-c5 { grid-column: span 5; }
.em-c6 { grid-column: span 6; } .em-c7 { grid-column: span 7; } .em-c8 { grid-column: span 8; }
.em-c9 { grid-column: span 9; }
.em-hero__txt { grid-column: 1 / span 7; container-type: inline-size; } .em-hero__fig { grid-column: 8 / -1; }
/* Full bleed: the opening plate runs off the page edge, without a border (Agha, Brodovitch). */
.em-hero { overflow-x: clip; }
.em-hero__fig .em-photo { margin-right: calc(-1 * clamp(0px, 2vw, 32px)); }
.em-sub { margin-top: calc(var(--em-bl) * 2); }

/* ---- the opening spread ---- */
.em-title {
  margin: 0;
  font: 700 clamp(48px, 11vw, 160px)/.9 var(--em-cond);
  font-size: clamp(48px, 20cqi, 160px); /* sized to its column, not the window: the rail takes width */
  line-height: round(nearest, .9em, var(--em-bl));
  text-transform: uppercase; letter-spacing: -.01em;
}
.em-deck { margin-top: var(--em-bl) !important; font: italic 300 clamp(20px, 2.2cqi + 8px, 25px)/var(--em-bl) var(--em-serif); max-width: 34ch; }
.em-tog { margin-top: var(--em-bl) !important; }
.em-toggle {
  height: calc(var(--em-bl) * 2); padding: 0 16px;
  border: 0; box-shadow: inset 0 0 0 1px var(--em-ink); border-radius: 0;
  background: var(--em-paper); color: var(--em-ink);
  font: 500 12px/1 var(--em-cond); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.em-toggle[aria-pressed="true"] { background: var(--em-ink); color: var(--em-paper); }

/* ---- plates: CSS-drawn monochrome "photographs", with grain ---- */
.em-fig { margin: 0; }
.em-photo {
  position: relative; overflow: hidden; background: #222; filter: grayscale(1) contrast(1.15);
  height: calc(var(--em-bl) * var(--em-rows, 12) - var(--em-bl) / 2);
}
.em-photo::after {
  content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.em-ph1 { background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.75) 38% 44%, transparent 44% 52%, rgba(255,255,255,.45) 52% 55%, transparent 55%), linear-gradient(180deg, #3a3a36, #0c0c0b 70%), #141412; }
.em-ph2 { background: radial-gradient(circle at 70% 35%, #f4f4f0 0 9%, #8e8e88 10% 11%, transparent 12%), repeating-linear-gradient(90deg, #2a2a27 0 38px, #3a3a36 38px 42px), #141412; }
.em-ph3 { background: linear-gradient(#e9e9e4 0 55%, #4A4A45 55% 56%, #1f1f1d 56%), #141412; }
.em-ph3::before { content: ""; position: absolute; left: 20%; bottom: 44%; width: 22%; height: 40%; background: #141412; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.em-fig figcaption {
  margin-top: calc(var(--em-bl) / 2);
  font: 400 13px/var(--em-bl) var(--em-cond); letter-spacing: .04em; color: var(--em-grey);
  box-shadow: inset 0 1px 0 var(--em-ink);
}
.em-fig figcaption b { color: var(--em-ink); font-weight: 600; text-transform: uppercase; }

/* ---- headings ---- */
.em-rec h2 {
  margin: 0 0 var(--em-bl);
  font: 700 clamp(34px, 4.4vw, 56px)/calc(var(--em-bl) * 2) var(--em-cond); text-transform: uppercase;
}
.em-rec h2.em-h2s { font-size: clamp(26px, 3vw, 36px); line-height: calc(var(--em-bl) * 1.5); margin-bottom: calc(var(--em-bl) / 2); }
.em-kick { display: block; font: 500 12px/var(--em-bl) var(--em-cond); letter-spacing: .2em; color: var(--em-grey); }
.em-note { color: var(--em-grey); font-style: italic; }

/* ---- text: a subordinate block in the spread, not columns of running text ---- */
.em-cols { max-width: 36em; }
.em-cols > p + p { margin-top: calc(var(--em-bl) / 2); }
.em-rules { columns: 15em 2; column-gap: 24px; } /* a catalogue of rules, no column rule between */
.em-firm { font-style: italic; }

/* ---- facts ---- */
.em-meta { margin: 0; box-shadow: inset 0 1px 0 var(--em-ink); }
.em-meta div { display: grid; grid-template-columns: 130px 1fr; box-shadow: inset 0 -1px 0 var(--em-rule); }
.em-meta dt { font: 500 12px/var(--em-bl) var(--em-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--em-grey); }
.em-meta dd { margin: 0; }

/* ---- inventory table ---- */
.em-scroll { overflow-x: auto; }
.em-ct { width: 100%; border-collapse: collapse; font-size: 15px; }
.em-ct th, .em-ct td { text-align: left; vertical-align: top; padding: 0 8px; line-height: var(--em-bl); box-shadow: inset 0 -1px 0 var(--em-rule); }
.em-ct th { width: 30%; font-weight: 400; }
.em-ct thead th { font: 500 11px/var(--em-bl) var(--em-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--em-grey); box-shadow: inset 0 -1px 0 var(--em-ink); }
.em-ct th a { display: inline-block; padding: calc(var(--em-bl) / 2) 0; font: 600 13px/var(--em-bl) var(--em-cond); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.em-ct th small { display: block; margin-top: calc(var(--em-bl) * -0.5); padding-bottom: calc(var(--em-bl) / 2); font-style: italic; color: var(--em-grey); font-size: 13px; line-height: var(--em-bl); }
.em-ct td { padding-block: calc(var(--em-bl) / 2); }
.em-ct td.em-none { color: var(--em-grey); font-style: italic; }
.em-res th, .em-res td { padding-block: 0; }
.em-res th { width: auto; }
.em-tags a { display: inline-block; margin-right: 16px; line-height: calc(var(--em-bl) * 2); font: 500 13px/calc(var(--em-bl) * 2) var(--em-cond); letter-spacing: .08em; text-transform: uppercase; }
.em-swatch { display: flex; flex-wrap: wrap; padding-left: 1px; }
.em-swatch span { flex: 1 0 76px; height: calc(var(--em-bl) * 2); display: flex; align-items: flex-end; padding: 2px 4px; font: 10px/1 ui-monospace, Menlo, monospace; box-shadow: inset 0 0 0 1px var(--em-ink); margin-left: -1px; }
.em-asbuilt { font-style: italic; color: var(--em-grey); }

/* ---- rules ---- */
.em-area { break-inside: avoid-column; }
.em-area h3 { margin: 0; font: 600 15px/var(--em-bl) var(--em-cond); letter-spacing: .1em; text-transform: uppercase; }
.em-rule { break-inside: avoid; padding-bottom: var(--em-bl); box-shadow: inset 0 1px 0 var(--em-ink); }
.em-k { display: block; font: 500 11px/var(--em-bl) var(--em-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--em-grey); }
.em-ev { font: 500 11px/1 var(--em-cond); letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--em-ink); padding: 2px 5px; white-space: nowrap; }

/* ---- see also ---- */
.em-nb { padding-bottom: var(--em-bl); box-shadow: inset 0 1px 0 var(--em-ink); }
.em-nb__n { display: block; font: 600 20px/calc(var(--em-bl) * 2) var(--em-cond); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.em-rec a.em-nb__n { text-decoration: underline; text-decoration-thickness: 1px; }

/* ---- use it ---- */
.em-acts a { display: block; padding: var(--em-bl) 0; box-shadow: inset 0 1px 0 var(--em-ink); text-decoration: none; }
.em-acts a b { display: block; font: 700 26px/calc(var(--em-bl) * 1.5) var(--em-cond); text-transform: uppercase; }
.em-acts a:hover b { text-decoration: underline; }
.em-mach-h { margin: var(--em-bl) 0 0; font: 500 12px/var(--em-bl) var(--em-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--em-grey); }
.em-mach a, .em-foot a { display: inline-block; margin-right: 24px; line-height: calc(var(--em-bl) * 2); font-size: 14px; }
.em-foot { margin-top: calc(var(--em-bl) * 2) !important; }

/* ---- the grid collapses; the baseline does not ---- */
@media (max-width: 900px) {
  .em-g > * { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) {
  .em-meta div { grid-template-columns: 1fr; }
  .em-run span + span { white-space: nowrap; }
  .em-ct th { width: 38%; }
}