/* layout — container, 12-column grid, chapter rhythm, mats, shell (nav, folio, colophon, flash, grain).
   docs/DESIGN.md §4. Breakpoints: ≥64em 12 cols · 40–63.98em 6 cols · <40em 4 cols. */

/* ---- Container & grid ------------------------------------------------------------------------ */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--margin); }
.container--narrow { max-width:calc(var(--container) * .62); }
.grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap); row-gap:var(--gap); align-items:start; }
.grid > * { grid-column:2 / -1; min-width:0; }       /* content starts at column 2 by default */
.grid--flush > * { grid-column:1 / -1; }
.grid--tight { row-gap:0; }
.grid--center { align-items:center; }
.grid--end { align-items:end; }

/* Column ledger (desktop). Column 1 is the margin column. */
@media (min-width: 64em) {
  .c-1-13, .c-full { grid-column:1 / 13; }
  .c-margin { grid-column:1 / 2; }
  /* Full-width ledger: pages without the margin column (home) start content at column 1. */
  .c-1-5  { grid-column:1 / 5; }   .c-1-6  { grid-column:1 / 6; }   .c-1-7  { grid-column:1 / 7; }
  .c-1-8  { grid-column:1 / 8; }   .c-1-9  { grid-column:1 / 9; }   .c-1-10 { grid-column:1 / 10; }
  .c-1-12 { grid-column:1 / 12; }
  .c-2-5  { grid-column:2 / 5; }   .c-2-6  { grid-column:2 / 6; }   .c-2-7  { grid-column:2 / 7; }
  .c-2-8  { grid-column:2 / 8; }   .c-2-9  { grid-column:2 / 9; }   .c-2-10 { grid-column:2 / 10; }
  .c-2-13 { grid-column:2 / 13; }  .c-3-11 { grid-column:3 / 11; }  .c-3-9  { grid-column:3 / 9; }
  .c-4-10 { grid-column:4 / 10; }  .c-5-13 { grid-column:5 / 13; }  .c-6-9  { grid-column:6 / 9; }
  .c-6-13 { grid-column:6 / 13; }  .c-7-12 { grid-column:7 / 12; }  .c-7-13 { grid-column:7 / 13; }
  .c-8-12 { grid-column:8 / 12; }  .c-8-13 { grid-column:8 / 13; }  .c-9-13 { grid-column:9 / 13; }
  .c-10-13 { grid-column:10 / 13; }
  .push-1 { margin-block-start:var(--block); }
  .push-2 { margin-block-start:calc(var(--block) * 2); }   /* "pushed 8rem" */
  .push-3 { margin-block-start:calc(var(--block) * 3); }
}
@media (min-width: 40em) and (max-width: 63.98em) {
  .grid { grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .grid > * { grid-column:1 / -1; }
  .c-margin { grid-column:1 / -1; }
  .md-l { grid-column:1 / 4; }  .md-r { grid-column:4 / -1; }
  .md-2-6 { grid-column:2 / 6; } .md-1-5 { grid-column:1 / 5; } .md-3-7 { grid-column:3 / 7; }
}
@media (max-width: 39.98em) {
  .grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .grid > * { grid-column:1 / -1; }
  .sm-l { grid-column:1 / 3; }  .sm-r { grid-column:3 / -1; }
}

/* ---- Rhythm ----------------------------------------------------------------------------------- */
.site-main { position:relative; padding-top:var(--nav-h); }
.site-main--flush { padding-top:0; }      /* pages with a cover: content_for(:main_class, "site-main--flush") */
.chapter, .section { position:relative; padding-block:var(--chapter-gap); }
.chapter--top { padding-block-start:calc(var(--block) * 1.5); }
.chapter--flush { padding-block:0; }
.chapter--half { padding-block:calc(var(--chapter-gap) / 2); }
.block { margin-block-start:var(--block); }
.block--2 { margin-block-start:calc(var(--block) * 2); }
.sentinel { height:60vh; pointer-events:none; }            /* content-free ground transition zone */
.sentinel--short { height:30vh; }
.cover { min-height:100dvh; }
.panel { min-height:100svh; }
.sticky { position:sticky; top:var(--nav-h); }
.sticky--top { position:sticky; top:0; }
.sticky--panel { position:sticky; top:0; height:100svh; }
.bottom-safe { bottom:max(1.5rem, env(safe-area-inset-bottom)); }
.page-head { padding-block:calc(var(--block) * 1.5) var(--block); }
.page-head__title { max-width:14ch; }
.page-head .t-lead { margin-block-start:var(--gap); }

/* Chapter header: numeral in the margin column, eyebrow + title in content columns. */
.chapter-head { display:grid; grid-template-columns:subgrid; grid-column:1 / -1; row-gap:var(--gap); align-items:end; }
.chapter-head__n { grid-column:1 / 2; align-self:start; font-size:var(--t-numeral); font-weight:400; line-height:.9; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--fg-4); }
.chapter-head__body { grid-column:2 / 9; }
.chapter-head__eyebrow { margin-block-end:1.25rem; }
@media (max-width: 63.98em) {
  .chapter-head__n { grid-column:1 / -1; font-size:var(--t-h2); }
  .chapter-head__body { grid-column:1 / -1; }
}

/* ---- Mats & plates ----------------------------------------------------------------------------
   Every photo or video sits in a mat. aspect-ratio lives on the mat so nothing shifts on load. */
.mat {
  --mat-bg:var(--bg-2);
  position:relative; background:var(--mat-bg); padding:clamp(.75rem, 2vw, 2rem);
  aspect-ratio:var(--ratio, 3 / 2); overflow:clip; container-type:inline-size;
}
.mat--4x5 { --ratio:4 / 5; } .mat--3x4 { --ratio:3 / 4; } .mat--3x2 { --ratio:3 / 2; } .mat--16x9 { --ratio:16 / 9; } .mat--1x1 { --ratio:1; } .mat--auto { aspect-ratio:auto; }
.mat--dark { --mat-bg:var(--dark-2); }
.mat--flush { padding:0; }
.plate { position:absolute; inset:clamp(.75rem, 2vw, 2rem); overflow:clip; background:var(--dark); isolation:isolate; }
.mat--flush > .plate { inset:0; }
.plate > img, .plate > video, .plate__media, .plate__poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--focus-x, 50%) var(--focus-y, 50%); }
.plate__poster { z-index:1; }
.plate__media  { z-index:2; }
.plate.is-fallback .plate__media { visibility:hidden; }
.plate__scrim { position:absolute; inset:0; z-index:3; background:linear-gradient(to top, var(--scrim-strong), transparent 45%); pointer-events:none; }
.plate__scrim--full { background:var(--scrim); }
.plate__caption {
  display:flex; align-items:baseline; gap:1.5rem; justify-content:space-between;
  margin-block-start:.75rem; font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3);
}
.plate__caption .btn { font-size:inherit; letter-spacing:inherit; color:inherit; }
.bleed-r { margin-inline-end:calc(var(--margin) * -1); }
.bleed-l { margin-inline-start:calc(var(--margin) * -1); }
.bleed-x { margin-inline:calc(var(--margin) * -1); }
.full-bleed { width:100vw; margin-inline:calc(50% - 50vw); }

/* ---- Header ----------------------------------------------------------------------------------- */
.site-header {
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav); height:var(--bar-h);
  color:var(--fg); background:transparent;
  transition:background-color var(--d-fade) var(--ease-out), box-shadow var(--d-fade) var(--ease-out);
}
.site-header.is-scrolled, .site-header.is-solid { background:var(--bg); box-shadow:0 1px 0 0 var(--line); }
/* Lamp return: the bar is text only (no slab over the paper circle); its text is covered by the paper
   while the ground is night and fades to ink once the ground flips (the layer then drops beneath it). */
html.is-lamp .site-header, html.is-lamp .folio { background:transparent; box-shadow:none; transition:none; }
html.is-lamp .site-header :is(.wordmark, .site-nav__link, .site-header__signout, .site-header__index), html.is-lamp .folio { transition:color 600ms var(--ease-out); }
.site-header__inner { height:100%; display:flex; align-items:center; gap:var(--gap); }
/* The logo: dark letters on light grounds, light letters over the home banner until the header gains its surface. */
.wordmark { display:inline-flex; align-items:center; flex:none; line-height:0; }
.wordmark__img { display:block; height:40px; width:auto; }
.wordmark__img--bone { display:none; }
.site-header.is-over-media:not(.is-scrolled) .wordmark__img--ink { display:none; }
.site-header.is-over-media:not(.is-scrolled) .wordmark__img--bone { display:block; }
@media (max-width: 63.98em) { .wordmark__img { height:32px; } }
.colophon__logo { display:block; height:44px; width:auto; margin-block-end:1.25rem; }
.site-nav { margin-inline-start:auto; display:flex; align-items:center; gap:clamp(1rem, 2vw, 2rem); }
.site-nav__list { display:contents; }
.site-nav__link, .site-header__link, .site-header__signout {
  font-size:.9375rem; font-weight:500; color:var(--fg); line-height:1; padding:.5rem 0;
  background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-size:0 1px; background-position:right calc(100% - .25rem);
  transition:background-size var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.site-nav__link:hover, .site-header__link:hover, .site-header__signout:hover,
.site-nav__link[aria-current="page"] { background-size:100% 1px; background-position:left calc(100% - .25rem); }
.site-nav__link[aria-current="page"] { color:var(--fg); }
.site-header__count { display:inline-flex; align-items:baseline; gap:.5rem; font-variant-numeric:tabular-nums; }
.site-header__count::before { content:""; display:inline-block; width:6px; height:6px; background:var(--accent-bright); align-self:center; }
.site-header__count.is-pulsing::before { animation:count-pulse 700ms var(--ease-out) 2; }
@keyframes count-pulse { 50% { transform:scale(1.8); opacity:.4; } }
.site-header__index { display:none; font-size:var(--t-button); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg); padding:.75rem 0; margin-inline-start:auto; }
.site-header__aside { display:flex; align-items:center; gap:clamp(1rem, 2vw, 2rem); }
@media (max-width: 63.98em) {
  .site-header { background:var(--bg); box-shadow:0 1px 0 0 var(--line); }
  .site-nav { display:none; }
  .site-header__index { display:inline-block; }
  .site-header__aside { margin-inline-start:auto; gap:1.25rem; }
}
/* A page that wants the bar opaque from the top (night pages, forms) adds .site-header--solid via content_for :header_class. */

/* ---- Index sheet (mobile nav) -----------------------------------------------------------------
   Namespaced as .index-sheet: the layout writes body.<controller>.<action>, so a bare `.index` would
   also match the body classes of every index action (home, journal, the members' appendix) and pin those pages. Never a bare `.index` here. */
dialog.index-sheet { position:fixed; inset:0; width:100vw; height:100dvh; background:var(--bg-2); color:var(--fg); padding:0; }
dialog.index-sheet[open] { display:grid; grid-template-rows:var(--bar-h) 1fr auto; }
html.has-sheet { overflow:hidden; }                    /* nothing scrolls behind an open sheet or drawer */
.index__bar { display:flex; align-items:center; justify-content:space-between; padding-inline:var(--margin); }
.index__close { font-size:var(--t-button); font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:.75rem 0; }
.index__list { padding:var(--block) var(--margin); overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:.35em; }
.index__link { font-size:var(--t-display-l); font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--fg); display:inline-flex; align-items:baseline; gap:.5em; padding:.1em 0; }
.index__link[aria-current="page"] { color:var(--fg-3); }
.index__link small { font-size:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); font-weight:600; }
.index__foot { padding:var(--gap) var(--margin) max(var(--gap), env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:var(--gap); font-size:var(--t-small); color:var(--fg-3); }
dialog.index-sheet::backdrop { background:transparent; }

/* ---- Running folio ---------------------------------------------------------------------------- */
.folio {
  position:fixed; z-index:var(--z-folio); pointer-events:none;
  font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:opacity var(--d-fade) var(--ease-out);
}
.folio__text { display:inline-block; }
.folio__tick { display:inline-block; width:3rem; height:1px; background:currentColor; vertical-align:middle; margin-inline-start:1rem; transform-origin:left center; transform:scaleX(var(--folio-p, 0)); }
.folio.is-idle { opacity:0; }                          /* no chapter under the viewport middle (colophon, page head) */
@media (min-width: 64em) {
  /* Anchored to the bottom of the gutter (DESIGN.md §4 allows bottom-anchored elements) and centred
     between the viewport edge and the margin column, so the chapter numerals in column 1 never share
     its x-band. Rotated about the bottom-left corner: the strip runs upward from the bottom edge. */
  .folio { left:calc(var(--margin) / 2 + .6em); top:auto; bottom:max(2rem, env(safe-area-inset-bottom)); line-height:1.2; transform:rotate(-90deg); transform-origin:left bottom; }
  .folio__tick { width:4rem; }
}
@media (max-width: 63.98em) {
  .folio { top:var(--bar-h); left:0; right:0; height:2rem; display:flex; align-items:center; padding-inline:var(--margin); background:var(--bg); box-shadow:0 1px 0 0 var(--line); }
}

/* ---- Grain ------------------------------------------------------------------------------------ */
#grain {
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; contain:strict;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 .33 .33 .33 0 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
@media (max-width: 47.98em) { #grain { display:none; } }
.no-grain #grain, [data-grain="off"] #grain { display:none; }

/* ---- Colophon (footer) ------------------------------------------------------------------------ */
.colophon { position:relative; color:var(--fg-2); background:var(--bg-2); border-block-start:1px solid var(--line); padding-block:var(--chapter-gap) calc(var(--block) * 1.5); margin-block-start:auto; }
.colophon__grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap); row-gap:calc(var(--block) * .75); }
.colophon__title { grid-column:2 / 13; font-size:var(--t-display-xl); line-height:.92; letter-spacing:-.02em; color:var(--fg); max-width:10ch; margin-block-end:calc(var(--block) * .5); }
.colophon__rule { grid-column:2 / 13; margin:0; }
.colophon__index { grid-column:2 / 7; display:flex; flex-wrap:wrap; column-gap:2.5rem; row-gap:0; align-content:start; }
.colophon__index a { display:inline-flex; align-items:center; min-height:44px; font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg); }
.colophon__subscribe { grid-column:7 / 12; }
.colophon__subscribe .field__label { color:var(--fg-3); }
.colophon__note { font-size:var(--t-small); color:var(--fg-3); margin-block-start:.75rem; max-width:40ch; }
.colophon__warning { grid-column:2 / 10; font-size:var(--t-small); color:var(--fg-3); max-width:70ch; }
.colophon__foot { grid-column:2 / 13; display:grid; grid-template-columns:1fr auto; gap:1rem 2.5rem; align-items:center; font-size:var(--t-small); color:var(--fg-3); padding-block-start:calc(var(--block) * .5); border-top:1px solid var(--line); }
.colophon__legal { display:flex; flex-wrap:wrap; gap:0 1.5rem; align-items:center; }
.colophon__legal a { display:inline-flex; align-items:center; min-height:44px; color:var(--fg-3); }
.colophon__legal a:hover { color:var(--fg); }
@media (max-width: 63.98em) {
  .colophon__grid { grid-template-columns:1fr; row-gap:var(--block); }
  .colophon__title, .colophon__rule, .colophon__index, .colophon__subscribe, .colophon__foot, .colophon__warning { grid-column:1 / -1; }
  .colophon__foot { grid-template-columns:1fr; }
}

/* ---- Flash notes ------------------------------------------------------------------------------ */
.flash-stack { position:fixed; left:var(--margin); right:var(--margin); bottom:max(1.5rem, env(safe-area-inset-bottom)); z-index:var(--z-flash); display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; pointer-events:none; }
.flash {
  pointer-events:auto; display:flex; gap:1.5rem; align-items:baseline; max-width:min(100%, 40rem);
  background:var(--bg-2); color:var(--fg); border-top:1px solid var(--fg); padding:1rem 1.25rem;
  font-size:var(--t-body); line-height:1.4;
  animation:flash-in var(--d-fade) var(--ease-out) both;
}
.flash::before { content:"—"; color:var(--fg-3); }
.flash--alert { --focus:var(--err); }
.flash--alert::before { color:var(--err); }
.flash__text { flex:1; }
.flash__close { font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); padding:.25rem 0; margin-inline-start:auto; }
.flash.is-leaving { opacity:0; transform:translateY(8px); transition:opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
@keyframes flash-in { from { opacity:0; transform:translateY(12px); } }