/* =============================================================================
   DELINIO ARTICLES
   One stylesheet for the library page and every article. Restyle here and
   every article changes; there is no other CSS to hunt down.

   Tokens are lifted from agents.html so the articles read as a sibling of
   the roster, not a cousin. Do not fork these values.
   ========================================================================== */

:root{
  --ink:#0e0d10;          /* page ground */
  --paper:#f4f1ea;        /* primary text */
  --red:#e00a34;          /* the one accent */
  --rule:rgba(255,255,255,.08);
  --muted:rgba(244,241,234,.72);
  --faint:rgba(244,241,234,.5);
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1240px;          /* full-width furniture */
  --measure:74ch;         /* reading column; do not widen, it hurts the eye */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
::selection{background:var(--red);color:#fff}
.mono{font-family:var(--mono)}

/* --- shared furniture ---------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(14,13,16,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;padding:16px 40px;
}
.site-header img{height:40px;display:block}
.site-nav{
  display:flex;align-items:center;gap:34px;
  font-size:14.5px;font-weight:500;color:rgba(255,255,255,.82);
}
.navlink{position:relative;padding:4px 0}
.navlink::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;
  background:var(--red);transition:width .3s;
}
.navlink:hover::after{width:100%}

/* the drifting grid, same cadence as the roster page */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero .grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;animation:dvpan 9s linear infinite;
}
@keyframes dvpan{to{background-position:52px 52px}}
.hero .wrap{position:relative;padding:96px 40px 66px}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.26em;
  color:var(--red);margin-bottom:26px;text-transform:uppercase;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--red)}

h1.display{
  margin:0;font-weight:900;font-size:76px;line-height:.98;
  letter-spacing:-.025em;color:var(--paper);
}
.lede{max-width:640px;margin:30px 0 0;font-size:18px;line-height:1.55;color:var(--muted)}
.metarow{
  margin-top:40px;display:flex;gap:36px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--faint);
  text-transform:uppercase;
}

/* --- library index ------------------------------------------------------- */
.library{padding:26px 40px 40px}
.entry{
  display:flex;gap:34px;align-items:flex-start;
  padding:34px 0;border-bottom:1px solid var(--rule);
  transition:padding-left .25s;
}
/* the cover card previews the article; it leads on a wide screen and sits
   above the words when there is no room beside them */
.entry-thumb{flex:0 0 340px;max-width:340px}
.entry-thumb img{
  display:block;width:100%;height:auto;border-radius:4px;
  border:1px solid var(--rule);
}
.entry-text{flex:1 1 auto;min-width:0}
.entry:hover{padding-left:12px}
.entry:hover .entry-title{color:var(--red)}
.entry-text > *:first-child{margin-top:0}
.entry-kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--faint);text-transform:uppercase;
}
.entry-title{
  margin:12px 0 0;font-weight:800;font-size:34px;line-height:1.12;
  letter-spacing:-.02em;color:var(--paper);transition:color .25s;
}
.entry-blurb{margin:12px 0 0;max-width:var(--measure);font-size:16px;line-height:1.6;color:var(--muted)}

/* --- the article itself -------------------------------------------------- */
.article{padding:70px 40px 40px}
.article-body{max-width:var(--measure);font-size:18.5px;line-height:1.72;color:rgba(244,241,234,.9)}
.article-body > *:first-child{margin-top:0}
.article-body p{margin:0 0 1.5em}
.article-body h2{
  margin:2.4em 0 .7em;font-weight:800;font-size:31px;line-height:1.18;
  letter-spacing:-.02em;color:var(--paper);
}
.article-body h3{
  margin:2em 0 .5em;font-weight:700;font-size:22px;line-height:1.25;color:var(--paper);
}
.article-body h2 + h3{margin-top:1.2em}
.article-body strong{color:#fff;font-weight:700}
.article-body em{color:rgba(244,241,234,.95)}
.article-body a{color:var(--red);border-bottom:1px solid rgba(224,10,52,.4)}
.article-body a:hover{border-bottom-color:var(--red)}
.article-body ul,.article-body ol{margin:0 0 1.5em;padding-left:1.3em}
.article-body li{margin:0 0 .55em}
.article-body blockquote{
  margin:2em 0;padding:2px 0 2px 26px;border-left:2px solid var(--red);
  font-size:20px;line-height:1.55;color:var(--paper);
}
.article-body hr{margin:3em 0;border:0;border-top:1px solid var(--rule)}
.article-body code{
  font-family:var(--mono);font-size:.88em;padding:2px 6px;border-radius:3px;
  background:rgba(255,255,255,.07);
}
.article-body pre{
  margin:0 0 1.5em;padding:20px 22px;overflow-x:auto;border-radius:4px;
  background:rgba(255,255,255,.045);border:1px solid var(--rule);
}
.article-body pre code{background:none;padding:0;font-size:14px;line-height:1.6}

/* Figures may exceed the reading column; formula plates are wide by nature. */
.article-body figure{margin:2.6em 0;max-width:none;width:100%}
.article-body figure img{
  display:block;width:100%;height:auto;border-radius:4px;
  border:1px solid var(--rule);background:#fff;
}
.article-body figcaption{
  margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--faint);text-transform:uppercase;
}

/* Tables scroll rather than breaking the page. */
.table-scroll{overflow-x:auto;margin:0 0 1.8em}
.article-body table{border-collapse:collapse;width:100%;font-size:16px}
.article-body th,.article-body td{
  padding:11px 16px;text-align:left;border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.article-body th{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  color:var(--faint);text-transform:uppercase;font-weight:600;white-space:nowrap;
}

.article-foot{
  max-width:var(--measure);margin:64px 0 0;padding-top:30px;
  border-top:1px solid var(--rule);
}

/* --- footer -------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--rule);margin-top:90px}
.site-footer .wrap{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:56px;
  padding:78px 40px 64px;
}
.foot-slogan{font-weight:900;font-size:19px;letter-spacing:-.01em;color:#fff;margin-top:22px}
.foot-lines{margin-top:16px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.78)}
.foot-lines b{font-weight:800;font-size:17px;color:#fff}
.foot-col-head{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:rgba(255,255,255,.4);margin-bottom:22px;
}
.foot-col{display:flex;flex-direction:column;gap:15px;font-size:14.5px;color:rgba(255,255,255,.72)}
.foot-cols{display:flex;gap:76px;flex-wrap:wrap}
.foot-legal{
  border-top:1px solid var(--rule);
  padding:22px 40px;max-width:var(--wrap);margin:0 auto;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.35);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
}

/* --- small screens ------------------------------------------------------- */
@media (max-width:900px){
  .entry{flex-direction:column;gap:20px}
  .entry-thumb{flex:0 0 auto;max-width:100%;width:100%}
}

@media (max-width:760px){
  html,body{overflow-x:hidden}
  .wrap,.site-header .wrap{padding-left:20px;padding-right:20px}
  .hero .wrap{padding:56px 20px 48px}
  h1.display{font-size:42px}
  .entry-title{font-size:26px}
  .library{padding:18px 20px 30px}
  .article{padding:44px 20px 30px}
  .article-body{font-size:17px}
  .article-body h2{font-size:25px}
  .site-nav{gap:18px;font-size:13px}
  .site-header img{height:32px}
  .metarow{gap:16px}
  .site-footer .wrap{padding:52px 20px 40px;gap:36px}
  .foot-cols{gap:40px}
}

/* Respect a reader who has asked for less movement. */
@media (prefers-reduced-motion:reduce){
  .hero .grid{animation:none}
  *{transition:none !important}
}


/* =============================================================================
   ARTICLE OPENING SEQUENCE
   House layout, fixed: horizontal cover card, title, vertical magazine cover,
   title again, subtitle, then the two dates, then the copy. The title appears
   twice by design; the first is the card's headline, the second opens the
   document itself.
   ========================================================================== */

.cover-card{margin:0;padding:0}
.cover-card img{display:block;width:100%;height:auto}

.opening{padding:70px 40px 0}
.opening .inner{max-width:var(--wrap);margin:0 auto}

/* the vertical cover: a magazine plate, never full bleed */
.cover-mag{margin:46px 0 0;display:flex;justify-content:center}
.cover-mag img{
  display:block;width:100%;max-width:620px;height:auto;border-radius:4px;
  border:1px solid var(--rule);
}

.article-title{
  margin:0;font-weight:900;font-size:64px;line-height:1.02;
  letter-spacing:-.028em;color:var(--paper);max-width:20ch;
}
.article-title--second{font-size:44px;margin:56px 0 0;max-width:26ch}

.article-subtitle{
  margin:24px 0 0;max-width:60ch;padding-left:16px;
  border-left:2px solid var(--red);
  font-family:var(--mono);font-weight:400;font-size:16.5px;line-height:1.55;
  letter-spacing:.04em;color:var(--red);
}
.article-subtitle[data-placeholder]{font-size:15px;opacity:.75}

.datelines{
  margin:38px 0 0;display:flex;gap:40px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;
  color:var(--faint);text-transform:uppercase;
}
.datelines b{color:rgba(244,241,234,.82);font-weight:600}

.opening-rule{margin:52px 0 0;border:0;border-top:1px solid var(--rule)}

/* figure plates in this house are drawings on white; keep the white */
.article-body figure.plate img{background:#fff;padding:0}

@media (max-width:760px){
  .opening{padding:40px 20px 0}
  .article-title{font-size:34px;max-width:none}
  .article-title--second{font-size:26px;margin-top:38px}
  .article-subtitle{font-size:17px}
  .cover-mag img{max-width:100%}
  .datelines{gap:14px;font-size:11.5px}
}


/* --- fair use notice ------------------------------------------------------
   Same treatment as the subtitle: house mono, red, small. A legal line, not a
   design element; it states its business and gets out of the way. */
.fairuse{
  max-width:var(--measure);margin:56px 0 0;padding-left:16px;
  border-left:2px solid var(--red);
  font-family:var(--mono);font-size:13px;line-height:1.6;letter-spacing:.03em;
  color:var(--red);
}
.fairuse b{font-weight:600;letter-spacing:.1em}


/* =============================================================================
   FOOTER, COOKIE-CUTTER WITH THE MAIN PAGE
   ========================================================================== */
.foot-brand{max-width:360px}
.foot-mark{display:flex;align-items:flex-start;gap:10px;margin-bottom:26px}
.foot-mark img{height:34px;display:block}
.foot-llc{font-size:11px;color:rgba(255,255,255,.45);margin-top:3px}
.bang{display:inline-block;color:var(--red);font-size:28px;line-height:1;
margin-left:7px;vertical-align:-3px}
.foot-lines .bang{font-size:23px;margin-left:4px;vertical-align:-2px}
.comma{display:inline-block;color:var(--red);font-weight:900;font-size:19px;margin-left:1px}
.foot-col span.navlink{cursor:default}
.foot-col span.navlink:hover{color:inherit}
.foot-col span.navlink::after{display:none}

/* =============================================================================
   LEGAL POP-UPS, NO JAVASCRIPT
   The :target selector matches the element named in the address bar. A link to
   #privacy opens it; the backdrop and the close button link to #_ and clear it.
   Works with scripting disabled, works off the disk, and the text is in the
   HTML where a search engine can read it. The main page keeps its bundle
   version; the copy is word for word identical.
   ========================================================================== */
.legal-modal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:32px;
  background:rgba(14,13,16,.78);backdrop-filter:blur(8px);
}
.legal-modal:target{display:flex;animation:legalfade .25s ease}
@keyframes legalfade{from{opacity:0}to{opacity:1}}
.legal-scrim{position:absolute;inset:0}
.legal-panel{
  position:relative;background:var(--paper);color:var(--ink);
  max-width:760px;width:100%;max-height:82vh;border-radius:18px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7);
  display:flex;flex-direction:column;overflow:hidden;
}
.legal-head{padding:34px 40px 22px;border-bottom:1px solid rgba(14,13,16,.1)}
.legal-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
color:var(--red);text-transform:uppercase}
.legal-panel h2{margin:12px 0 4px;font-weight:900;font-size:30px;
letter-spacing:-.02em;color:var(--ink)}
.legal-upd{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
color:rgba(14,13,16,.5)}
.legal-body{padding:26px 40px 34px;overflow-y:auto}
.legal-body h3{margin:22px 0 6px;font-weight:700;font-size:16px;color:var(--ink)}
.legal-body h3:first-child{margin-top:0}
.legal-body p{margin:0 0 12px;font-size:14.5px;line-height:1.65;color:rgba(14,13,16,.78)}
.legal-body a{color:var(--red);border-bottom:1px solid rgba(224,10,52,.4)}
.legal-body b{color:var(--ink)}
.legal-foot{margin-top:24px;padding-top:18px;border-top:1px solid rgba(14,13,16,.1);
font-size:12.5px;line-height:1.6;color:rgba(14,13,16,.55)}
.legal-close{
  position:absolute;top:14px;right:22px;z-index:2;font-size:32px;line-height:1;
  font-family:var(--mono);color:rgba(14,13,16,.4);
}
.legal-close:hover{color:var(--red)}

@media (max-width:760px){
  .legal-modal{padding:14px}
  .legal-head{padding:26px 22px 18px}
  .legal-body{padding:20px 22px 26px}
  .legal-panel h2{font-size:24px}
}


/* --- bibliography lists ---------------------------------------------------- */
.article-body ul.sources{list-style:none;padding-left:0;margin:0 0 1.8em}
.article-body ul.sources li{
  margin:0 0 1em;padding-left:18px;position:relative;
  font-size:15.5px;line-height:1.6;color:var(--muted);
}
.article-body ul.sources li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--red);
}
.article-body ul.sources a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
  word-break:break-all;
}


/* author block: head of the body, directly under the opening rule */
.article-authors{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;
  margin:0 0 2.8em;padding:0 0 1.7em;border-bottom:1px solid var(--rule);
}
.article-authors .authors-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(244,241,234,.42);
}
.article-author{display:flex;align-items:center;gap:13px}
.article-author img{
  width:58px;height:58px;border-radius:50%;object-fit:cover;
  display:block;margin:0;padding:0;background:transparent;
  border:1px solid var(--rule);
}
.article-author .nm{font-size:16.5px;font-weight:600;letter-spacing:.01em}
@media (max-width:640px){
  .article-authors{gap:12px 22px}
  .article-author img{width:48px;height:48px}
  .article-author .nm{font-size:15px}
}