/* dylan.wextsolutions.com
   One timeline you travel down. Cinematic on the surface, dense only when opened. */

/* ONE THEME, DARK. There is no light mode and no prefers-color-scheme switch.

   Two reasons it went. Three regions (the hero, the year bands, the withdrawals band)
   were built as white type on a dark ground back when photographs sat behind them, and
   they hardcoded pure #fff while the dark palette's ink is the warm #f0ece7, so the site
   mixed two different whites. Worse, `h1` set #fff globally for the hero's benefit, and
   `.phead` never overrode it, so the headlines on /timeline, /record and /404 rendered
   white on paper at 1.03 contrast. They were invisible in light mode.

   Dark only removes the inversion entirely: every ground is the page, every piece of type
   is --ink, --soft or --muted, and separation comes from elevation and hairlines. Do not
   reintroduce a hardcoded #fff or rgba(255,255,255,x); use the tokens. */

:root{
  color-scheme:dark;
  --ink:#f0ece7;
  --soft:#c4bcb3;
  /* --muted and --faint are measured, not picked. Against --bg they run 6.1:1 and 4.9:1,
     both clear of the 4.5 needed for small text. The old --faint of #6d655d came from the
     light palette's dark mode block and sat at 3.29, which put the masthead nav, the hook
     numbers and the footer below AA. Re-measure with tools/contrast.js if you change them. */
  --muted:#9a9189;
  --faint:#8a827a;
  --line:#302b26;
  --line-2:#26221e;
  --bg:#131110;
  --surface:#1a1715;
  --raised:#211d1a;
  --accent:#9dbcf2;
  --accent-soft:#1b2231;
  --flag:#dba86a;
  --flag-soft:#261e14;
  --c:var(--accent);
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --gut:24px;
  --maxw:1040px;
  --rail:150px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mono{ font-family:var(--mono); }

a{ color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
a:hover{ border-bottom-color:var(--accent); }
:focus-visible{ outline:2px solid var(--c); outline-offset:3px; border-radius:2px; }

.skip{ position:absolute; left:-9999px; top:0; background:var(--surface); padding:10px 14px; z-index:60; border:1px solid var(--line); }
.skip:focus{ left:8px; top:8px; }

/* ------------------------------------------------------------- masthead */
.masthead{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.mast-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:52px; }
.mast-name{
  font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); border-bottom:none;
}
.mast-nav{ display:flex; gap:4px; }
.mast-nav a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--faint); border-bottom:none; padding:5px 9px; border-radius:20px;
}
.mast-nav a:hover{ color:var(--ink); }
.mast-nav a[aria-current="true"]{ color:var(--bg); background:var(--ink); }
.progress{
  height:2px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .12s linear;
}

/* ----------------------------------------------------------------- hero */
/* No photograph, no separate ground, no gradient. On a dark page an inked slab with a
   warm wash just looked like a panel bolted to the top, so the hero is now simply the
   page: type, space and a hairline where it hands over to the stat strip. Height follows
   the content with a modest floor, because an empty dark block sized for a photo reads as
   an image that failed to load. */
.hero{
  position:relative; min-height:clamp(340px, 48vh, 470px);
  display:flex; align-items:center;
  border-bottom:1px solid var(--line);
}
.hero-inner{ position:relative; width:100%; padding-top:72px; padding-bottom:72px; }
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 26px;
}
h1{
  font-family:var(--sans); font-weight:500; font-size:clamp(42px,8.4vw,94px);
  letter-spacing:-.036em; line-height:.94; margin:0 0 30px; color:var(--ink);
}
.lede{
  font-family:var(--serif); font-weight:300; font-size:clamp(18px,2.3vw,24px);
  line-height:1.5; color:var(--soft); max-width:46ch; margin:0 0 30px;
}
.cue a{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); border:1px solid var(--line);
  padding:11px 18px; border-radius:2px;
}
.cue a:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }


.statband{ background:var(--surface); border-bottom:1px solid var(--line); }
.statstrip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px; background:var(--line);
}
.stat{ background:var(--surface); padding:22px 18px 24px; }
.stat .n{ font-family:var(--mono); font-size:30px; font-weight:500; line-height:1; letter-spacing:-.02em; }
.stat .l{ font-size:12.5px; color:var(--muted); margin-top:9px; line-height:1.45; }

/* ------------------------------------------------------------- timeline */
.linewrap{ padding-bottom:20px; }
.linehead{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding-top:34px; padding-bottom:6px;
}
.linenote{ font-size:14.5px; color:var(--muted); margin:0; }

/* full-bleed era band */
/* Year dividers. Raised a step off the page rather than inverted, with hairlines top and
   bottom so a long scroll still breaks into chapters. Sized to the numeral. */
.era-band{
  position:relative; background:var(--surface);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  min-height:0; display:flex; align-items:center;
  margin-top:44px;
}
.era-band-in{ width:100%; padding-top:40px; padding-bottom:36px; }
.era-y{
  font-family:var(--mono); font-size:clamp(46px,9vw,110px); font-weight:500;
  letter-spacing:-.04em; line-height:.9; color:var(--ink); margin:0 0 16px;
}
.era-l{
  font-family:var(--serif); font-weight:300; font-size:clamp(17px,2.1vw,23px);
  line-height:1.45; color:var(--soft); margin:0; max-width:48ch;
}


.era-list{ position:relative; padding-top:48px; }
.era-list::before{
  content:""; position:absolute; top:0; bottom:26px;
  left:calc(var(--rail) - 1px); width:2px; background:var(--line);
}

.moment{ position:relative; padding:0 0 4px var(--rail); }
.m-when{
  position:absolute; left:0; top:20px; width:calc(var(--rail) - 26px); text-align:right;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em;
  color:var(--muted); line-height:1.5;
}
.m-date{ display:block; }
.dot{
  position:absolute; left:calc(100% + 19px); top:4px;
  width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--line);
  transition:background .45s ease, border-color .45s ease, transform .45s ease;
}
.moment.seen .dot{ background:var(--c); border-color:var(--c); transform:scale(1.18); }
@media (prefers-reduced-motion: reduce){ .dot{ transition:none; } }

.m-body{ padding-left:8px; }

/* the image that some moments carry, always visible */
.m-fig{ margin:14px 0 4px; max-width:660px; }
.m-fig-set{ display:grid; gap:6px; }
.m-gal .m-fig-set{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.m-fig img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  background:var(--line-2); border-radius:2px;
}
.m-gal img{ aspect-ratio:4/5; }


/* the collapsed line, and what opens */
.m-open{ border-bottom:1px solid var(--line-2); }
.m-open > summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:1fr 26px; gap:14px; align-items:start;
  padding:18px 0 20px;
}
.m-open > summary::-webkit-details-marker{ display:none; }
.m-open > summary:hover h3{ color:var(--c); }
.m-head{ min-width:0; }
.m-head h3{
  font-size:clamp(20px,2.6vw,27px); font-weight:500; letter-spacing:-.022em;
  line-height:1.18; margin:0 0 7px; color:var(--ink);
  transition:color .2s ease;
}
.m-teaser{
  font-family:var(--serif); font-weight:300; font-size:clamp(16px,1.8vw,18.5px);
  line-height:1.45; color:var(--soft); margin:0; max-width:52ch;
}
.m-draft{
  display:inline-block; vertical-align:middle; margin-left:10px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--flag); background:var(--flag-soft);
  border:1px solid color-mix(in srgb, var(--flag) 40%, transparent);
  padding:3px 7px; border-radius:2px;
}
.m-more{
  position:relative; width:26px; height:26px; margin-top:4px;
  border:1px solid var(--line); border-radius:50%; flex:none;
  transition:border-color .2s ease, transform .25s ease;
}
.m-more::before,.m-more::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--muted);
  transform:translate(-50%,-50%); transition:opacity .2s ease, background .2s ease;
}
.m-more::before{ width:9px; height:1px; }
.m-more::after{ width:1px; height:9px; }
.m-open > summary:hover .m-more{ border-color:var(--c); }
.m-open > summary:hover .m-more::before,
.m-open > summary:hover .m-more::after{ background:var(--c); }
.m-open[open] > summary .m-more{ transform:rotate(90deg); border-color:var(--c); }
.m-open[open] > summary .m-more::after{ opacity:0; }

.m-inner{ padding:2px 0 30px; max-width:62ch; }
.m-inner > p{ font-size:16.5px; line-height:1.7; color:var(--soft); margin:0 0 15px; }

/* evidence disclosure */
.m-ev{ margin-top:20px; border-left:2px solid var(--c); }
.m-ev > summary{
  list-style:none; cursor:pointer; display:flex; gap:12px; align-items:baseline;
  padding:8px 0 8px 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--c);
}
.m-ev > summary::-webkit-details-marker{ display:none; }
.m-ev > summary:hover{ background:color-mix(in srgb, var(--c) 7%, transparent); }
.m-ev-n{ color:var(--faint); letter-spacing:.06em; }
.m-ev[open] > summary{ border-bottom:1px solid var(--line-2); }
.m-ev-body{ padding:16px 0 4px 14px; }
.ev + .ev{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line-2); }
.ev-t{ font-size:15.5px; font-weight:500; color:var(--ink); border-bottom-color:transparent; }
.ev-t:hover{ color:var(--c); border-bottom-color:var(--c); }
.ev-r{ font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--soft); margin:7px 0 0; }
.ev-l{ font-size:13.5px; line-height:1.55; color:var(--muted); margin:8px 0 0; }
.ev-l b{ color:var(--flag); font-weight:500; }

/* ---------------------------------------------------------------- bands */
.band{ padding:64px 0; border-top:1px solid var(--line); }
.band.alt{ background:var(--surface); }
.sec{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink); margin:0 0 10px;
}
.secnote{ font-size:15px; color:var(--muted); margin:0 0 30px; max-width:64ch; }

/* ------------------------------------------------------------- controls */
.controls{ border:1px solid var(--line); background:var(--bg); padding:16px 18px; margin-bottom:26px; }
.ctl-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ctl-row + .ctl-row{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2); }
.ctl-search{ flex:1 1 260px; display:block; }
#q{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); padding:10px 13px; border-radius:2px;
}
#q::placeholder{ color:var(--faint); }
.btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--bg); border:1px solid var(--ink);
  padding:10px 14px; border-radius:2px; cursor:pointer;
}
.btn.ghost{ background:transparent; color:var(--muted); border-color:var(--line); }
.btn.ghost:hover{ color:var(--ink); border-color:var(--muted); }
.facets{ align-items:flex-start; }
.facet{ border:0; margin:0; padding:0; min-width:0; }
.facet legend{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); padding:0; margin-bottom:8px;
}
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.03em;
  border:1px solid var(--line); background:var(--surface); color:var(--soft);
  padding:5px 10px; border-radius:20px; cursor:pointer;
}
.chip:hover{ border-color:var(--muted); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
.count{ font-family:var(--mono); font-size:11.5px; color:var(--muted); margin:14px 0 0; }

/* ----------------------------------------------------------------- list */
.list{ border-top:1px solid var(--line); }
.row{ border-bottom:1px solid var(--line); scroll-margin-top:72px; }
.row > summary{
  display:grid; grid-template-columns:1fr auto; gap:12px 18px; align-items:baseline;
  padding:17px 4px 17px 0; cursor:pointer; list-style:none;
}
.row > summary::-webkit-details-marker{ display:none; }
.row > summary:hover .rt{ color:var(--accent); }
.rmain{ min-width:0; display:block; }
.rt{ display:block; font-size:17.5px; font-weight:500; letter-spacing:-.005em; line-height:1.3; }
.rsub{ display:block; font-size:14px; color:var(--muted); margin-top:3px; }
.rmeta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); padding:3px 8px; border-radius:2px; white-space:nowrap;
}
.tag.org{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 30%, transparent); background:var(--accent-soft); }
.tag.yr{ border:0; padding:3px 0; color:var(--faint); }

.rbody{ padding:2px 0 30px; max-width:78ch; }
.rlede{ font-size:16px; color:var(--soft); margin:0 0 16px; }
.rwhy{ font-size:15.5px; color:var(--ink); margin:0 0 20px; padding-left:14px; border-left:2px solid var(--accent); }
.rwhy b{ font-weight:500; }
.blk{ margin:0 0 20px; }
.blk h4{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin:0 0 9px;
}
.blk ul{ margin:0; padding:0; list-style:none; }
.blk li{ font-size:15px; color:var(--soft); line-height:1.58; padding:0 0 0 17px; position:relative; margin-bottom:9px; }
.blk li::before{ content:""; position:absolute; left:0; top:.66em; width:7px; height:1px; background:var(--faint); }
.blk.res li::before{ background:var(--accent); width:9px; }
.blk.lim li::before{ background:var(--flag); }
.blk.lim h4{ color:var(--flag); }
.ipnote{
  font-family:var(--mono); font-size:12px; color:var(--flag);
  background:var(--flag-soft); border-left:2px solid var(--flag);
  padding:10px 13px; margin:0 0 20px;
}
.rlinks{ display:flex; flex-wrap:wrap; gap:16px; font-family:var(--mono); font-size:11.5px; }
.rdom{ font-family:var(--mono); font-size:11px; color:var(--faint); margin:16px 0 0; }

/* -------------------------------------------------------- the refusal */
.refusal{ border:1px solid var(--flag); background:var(--flag-soft); padding:18px 20px 20px; margin-top:20px; }
.rf-head{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--flag); margin:0 0 12px;
}
.refusal pre{
  font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--soft);
  margin:0 0 14px; white-space:pre-wrap; word-break:break-word;
}
.linkbtn{ background:none; border:0; padding:0; color:var(--accent); font:inherit; cursor:pointer; text-decoration:underline; }
.empty{ font-size:15px; color:var(--muted); padding:30px 0; }

/* ---------------------------------------------------------------- about */
.about h3{ font-size:16px; font-weight:500; margin:26px 0 8px; }
.about h3:first-of-type{ margin-top:0; }
.about p{ font-size:15.5px; color:var(--soft); margin:0 0 14px; }
.cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:44px; }
.contact{ list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:13px; }
.contact li{ margin-bottom:7px; }

/* ----------------------------------------------------------------- foot */
.foot{ padding:26px 0 40px; border-top:1px solid var(--line); }
.footrow{ display:flex; justify-content:space-between; gap:16px; font-size:12.5px; color:var(--faint); flex-wrap:wrap; }

/* --------------------------------------------------------------- mobile */
@media (max-width:820px){
  :root{ --rail:60px; }
  .m-when{
    position:static; width:auto; text-align:left; margin:0 0 4px; display:block;
  }
  /* .m-when is no longer positioned, so the dot resolves against .moment.
     Centre it on the spine: the 2px spine sits at (--rail - 1), the dot is 15px wide. */
  .dot{ left:calc(var(--rail) - 7.5px); top:22px; }
  .m-body{ padding-left:0; }
  .m-open > summary{ padding-top:10px; }
}
@media (max-width:600px){
  :root{ --gut:16px; --rail:32px; }
  .hero{ min-height:auto; }
  .hero-inner{ padding-top:70px; padding-bottom:70px; }
  .band{ padding:48px 0; }
  .statstrip{ grid-template-columns:1fr 1fr; }
  .era-band{ min-height:240px; }
  .row > summary{ grid-template-columns:1fr; }
  .rmeta{ justify-content:flex-start; }
  .linehead{ align-items:flex-start; }
}

/* ---------------------------------------------------------------- print */
@media print{
  /* The screen palette is dark, so print inverts the tokens wholesale and every ground
     collapses to white. Anything that hardcodes a colour instead of using a token will
     print as a black slab, which is the other reason the tokens matter. */
  :root{
    --bg:#fff; --surface:#fff; --raised:#fff; --ink:#000; --soft:#222; --muted:#555;
    --line:#ccc; --line-2:#e5e5e5; --rail:110px;
  }
  body{ background:#fff !important; color:#000 !important; }
  .masthead,.controls,.skip,.cue,.progress,.linehead,.m-more{ display:none !important; }
  body{ font-size:10.5pt; }
  .band{ padding:16pt 0; border:0; }
  .hero{ min-height:auto; background:#fff; border:0; }
  .hero h1,.hero .lede,.hero .eyebrow{ color:#000; }
  .era-band{ min-height:auto; background:#fff; margin-top:20pt; border:0; }
  .era-y,.era-l{ color:#000; }
  .sect.dark,.wrong,.sect.alt,.statband,.stat{ background:#fff !important; }
  .vid,.pcard-art{ display:none !important; }
  .moment,.row,.era-band{ break-inside:avoid; }
  .m-inner,.m-ev,.rbody{ display:block !important; }
  .m-ev > summary{ display:none; }
  .moment .dot{ background:#000; border-color:#000; }
  a{ color:#000; border:0; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#555; }
}

/* ============================================================ landing page */
.sect{ padding:92px 0; border-top:1px solid var(--line); }
.sect.alt{ background:var(--surface); }
.sect.close{ padding:88px 0 72px; }
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:0 0 20px;
}
.shead{
  font-size:clamp(28px,4.6vw,50px); font-weight:500; letter-spacing:-.03em;
  line-height:1.06; margin:0 0 20px; max-width:20ch;
}
.shead.big{ max-width:24ch; }
.subhead{
  font-family:var(--serif); font-weight:300; font-size:clamp(17px,2vw,21px);
  line-height:1.5; color:var(--soft); max-width:50ch; margin:0 0 8px;
}
.sectmore{ margin:40px 0 0; }
.sectmore a{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:none; display:inline-flex; gap:10px; align-items:center;
  border:1px solid var(--line); padding:13px 20px; border-radius:2px; color:var(--ink);
}
.sectmore a:hover{ border-color:var(--ink); background:var(--ink); color:var(--bg); }

/* the six hooks */
.hooks{ margin-top:52px; border-top:1px solid var(--line); }
.hook{
  display:grid; grid-template-columns:52px 1fr; gap:6px 22px; align-items:start;
  padding:30px 0; border-bottom:1px solid var(--line); border-radius:0;
  color:var(--ink); border-left:0; border-right:0; border-top:0;
}
.hook:hover{ background:color-mix(in srgb, var(--accent) 4%, transparent); }
.hook-n{
  grid-row:1 / span 3; font-family:var(--mono); font-size:12px; color:var(--faint);
  letter-spacing:.1em; padding-top:5px;
}
.hook-meta{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.hook-meta b{ font-size:15px; font-weight:500; letter-spacing:-.005em; }
.hook-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  padding:3px 8px; border-radius:2px;
}
.hook-line{
  font-family:var(--serif); font-weight:300; font-size:clamp(19px,2.5vw,27px);
  line-height:1.34; letter-spacing:-.01em; color:var(--ink); margin-top:8px;
}
.hook-go{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-top:12px;
}
.hook:hover .hook-go{ color:var(--accent); }

/* The four withdrawals. This is the strongest thing on the site, so it still has to sit
   apart, but on a dark page that means raising it, not inverting it. */
.sect.dark{
  background:var(--surface);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
/* Exactly two columns, because there are exactly four withdrawals and the hairlines are
   drawn by the container showing through 1px gaps. At three columns the fourth card left
   two empty cells, and an empty cell is not blank, it is a slab of --line. If the count
   ever stops being a multiple of two, give the last card `grid-column:1 / -1` or the hole
   comes back. */
.wrongs{
  margin-top:48px; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
}
.wrong{
  background:var(--raised); padding:26px 24px 28px; border:0;
  display:flex; flex-direction:column; gap:12px;
}
.wrong:hover{ background:#2a251f; }
.wrong-when{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--flag);
}
.wrong-line{ font-size:16px; line-height:1.6; color:var(--soft); }

/* eight beats */
.beats{ list-style:none; margin:44px 0 0; padding:0; border-top:1px solid var(--line); }
.beat{
  display:grid; grid-template-columns:120px 1fr; gap:20px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.beat-y{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--muted); }
.beat-line{ font-size:17px; line-height:1.55; color:var(--ink); }

/* personal */
/* One grid for the whole section: visuals down the left, bodies stacked on the right.
   Giving each item its own row left a 370px hole beside the portrait clip, which is
   587px tall against about 217px of text. A visual spans down to the next item that
   brings its own, so the left column stays filled whatever the mix of items. */
.personal{
  margin-top:52px; display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  column-gap:44px; row-gap:44px; align-items:start;
}
.personal.no-art{ grid-template-columns:minmax(0,62ch); }
.pcard{ display:contents; }
.pcard-art{ grid-column:1; grid-row:var(--row,auto) / span var(--span,1); min-width:0; }
.pcard-body{ grid-column:2; grid-row:var(--row,auto); min-width:0; }
.personal.no-art .pcard-body{ grid-column:1; }
.pcard .m-fig{ margin:0; max-width:none; }
.pcard .m-fig img{ aspect-ratio:4/3; }
.pcard-when{
  font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px; display:flex; align-items:center; gap:10px;
}
.pcard-body h3{ font-size:clamp(22px,3vw,30px); font-weight:500; letter-spacing:-.024em; margin:0 0 16px; line-height:1.14; }
.pcard-body p{ font-size:16.5px; line-height:1.68; color:var(--soft); margin:0 0 14px; }
.pcard-go{ margin-top:18px !important; }
.pcard-go a{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }

/* closing */
.closecols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:44px; margin-top:32px; }
.closecols p{ font-size:16px; line-height:1.66; color:var(--soft); margin:0 0 14px; }
.fineprint{ font-size:13.5px !important; color:var(--muted) !important; }
.contactlist{ list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:14px; }
.contactlist li{ margin-bottom:10px; }

/* ============================================================ interior pages */
.pagehead{ padding:70px 0 44px; border-bottom:1px solid var(--line); }
.crumb{ margin:0 0 28px; }
.crumb a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:none; color:var(--muted);
}
.crumb a:hover{ color:var(--ink); }
.phead{
  font-size:clamp(34px,6vw,64px); font-weight:500; letter-spacing:-.034em;
  line-height:1; margin:0 0 22px;
}
.plede{
  font-family:var(--serif); font-weight:300; font-size:clamp(17px,2.1vw,22px);
  line-height:1.5; color:var(--soft); max-width:54ch; margin:0;
}
.cue.inline{ margin:28px 0 0; }
.linewrap .era:first-child .era-band{ margin-top:0; }

@media (max-width:820px){
  .sect{ padding:64px 0; }
  .hook{ grid-template-columns:1fr; gap:6px; }
  .hook-n{ grid-row:auto; padding-top:0; }
  .beat{ grid-template-columns:1fr; gap:4px; }
  /* Back to plain stacked blocks: one article per row, art above its own text. */
  .personal{ grid-template-columns:1fr; row-gap:48px; }
  .pcard{ display:block; }
  .pcard-art{ margin-bottom:22px; }
}

/* The masthead nav carries words now, not three short years, so it needs room
   at phone width or it pushes the page sideways. */
@media (max-width:600px){
  .mast-row{ gap:8px; }
  .mast-name{ font-size:10.5px; letter-spacing:.07em; }
  .mast-nav{ gap:0; }
  .mast-nav a{ font-size:10.5px; letter-spacing:.05em; padding:5px 7px; }
}
@media (max-width:360px){
  .mast-nav a:last-child{ display:none; }
}

/* ========================================================== photographs */
/* Straight photographs, unprocessed, in the column they belong to. No frame
   styling, no caption. The contour renderer is still in app.js behind `art`,
   unused. */

.m-art{ margin:10px 0 2px; max-width:520px; }
.pcard-art .m-fig{ margin:0; max-width:none; }
.pcard-art img{ aspect-ratio:4/3; }

/* ================================================================== video */
/* Portrait, because it was shot on a phone. The placeholder holds the exact
   aspect ratio the real file will take, so nothing reflows when it lands.
   The clip autoplays silently with no control bar, so it has to sit on the page
   like a photograph: hairline border, no chrome, no shadow. */
.vid{
  display:block; width:100%; max-width:330px; height:auto;
  object-fit:cover; background:var(--line-2);
  border:1px solid var(--line); border-radius:2px;
}
.vid-empty{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--line); background:var(--surface);
}
.vid-empty p{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0; line-height:1.9;
}
.vid-empty span{ display:block; font-size:10px; letter-spacing:.1em; color:var(--faint); }

@media (max-width:820px){
  .vid{ max-width:300px; }
}