/* --- LETTERS: DARK BRAND (v7) -----------------------------------------
   Loaded after /style.css. Self-contained: redefines the palette tokens
   at the top so it fully overrides the old light brand, then restyles the
   interior-page chrome + every .letter-* component the letters use.

   World: charcoal #16140F, cream #ECE4D3, one orange #FF4F00.
   Chrome/labels = IBM Plex Mono. Headlines = Anton. Italic accents =
   Instrument Serif. Letter BODY reading = Newsreader (kept ONLY for
   long-form reading on charcoal). Matches session.html + use-cases chrome.
   ──────────────────────────────────────────────────────────────────── */

/* ============ TOKENS (override style.css) ============ */
:root{
  --bg:#16140F;
  --panel:#1D1A14;
  --panel-2:#201C15;
  --line:#2C2820;
  --line-soft:rgba(236,228,211,.07);
  --line-strong:rgba(236,228,211,.24);
  --cream:#ECE4D3;
  --cream-dim:rgba(236,228,211,.78);
  --ink-dim:rgba(236,228,211,.62);
  --ink-faint:rgba(236,228,211,.38);
  --muted:#8F887A;
  --accent:#FF4F00;
  --accent-soft:rgba(255,79,0,.09);

  --read:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Anton',Impact,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;

  --container:1320px;
  --pad:clamp(20px,4vw,56px);
  --measure:66ch;
}

/* ============ BASE / RESET (scoped to the letter shell) ============ */
/* Override style.css html,body{background:var(--paper)} so the old warm
   paper never flashes behind charcoal on overscroll / short pages. */
html{background:#16140F}
body.letter-page{
  min-height:100vh;
  background:
    radial-gradient(1100px 700px at 72% -4%, #221E16 0%, rgba(34,30,22,0) 62%),
    radial-gradient(900px 600px at -10% 30%, #1B1812 0%, rgba(27,24,18,0) 55%),
    var(--bg);
  color:var(--cream);
  font-family:var(--read);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
body.letter-page *,
body.letter-page *::before,
body.letter-page *::after{box-sizing:border-box}
body.letter-page img{max-width:100%;display:block}
body.letter-page a{color:inherit;text-decoration:none}
body.letter-page ::selection{background:var(--accent);color:var(--bg)}
body.letter-page :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.letter-page .wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--pad)}

/* film grain overlay (matches interior pages) */
.letter-page .grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ HEADER (interior chrome, solid on scroll) ============ */
.letter-page .site-head{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:24px;
  height:68px;padding-inline:var(--pad);
  background:#14110C;                       /* solid charcoal, never transparent */
  border-bottom:1px solid var(--line-soft);
}
.letter-page .brand{display:flex;align-items:center;gap:12px;min-height:44px;flex:none}
.letter-page .brand img{width:26px;height:26px}
.letter-page .crumb{
  display:flex;align-items:center;gap:10px;min-width:0;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
}
.letter-page .crumb a{color:var(--muted);padding:14px 0;transition:color .25s}
.letter-page .crumb a:hover{color:var(--cream)}
.letter-page .crumb .sep{color:var(--muted)}
.letter-page .crumb .mid{color:var(--muted)}
.letter-page .crumb a.mid:hover{color:var(--cream)}
.letter-page .crumb .here{color:var(--cream);overflow:hidden;text-overflow:ellipsis}
.letter-page .head-cta{margin-left:auto;flex:none}

.letter-page .pill{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cream);color:var(--bg);
  border:0;border-radius:999px;height:44px;padding:0 24px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
  white-space:nowrap;cursor:pointer;
}
.letter-page .pill:hover{background:#fff;transform:translateY(-1px)}
.letter-page .pill:active{transform:scale(.98)}
.letter-page .pill-ghost{background:transparent;color:var(--cream);border:1px solid var(--line-strong)}
.letter-page .pill-ghost:hover{background:rgba(236,228,211,.06);border-color:var(--cream)}
.letter-page .pill-big{height:54px;padding:0 32px;font-size:12.5px}

/* ============ ARTICLE SHELL ============ */
.letter-page main{padding-top:68px}
article.letter{padding:clamp(40px,5.5vw,84px) 0 clamp(72px,9vw,120px)}
.letter-wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--pad)}

/* in-article crumb row (above the headline) */
.letter-crumbs{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:clamp(28px,4vw,48px);font-weight:600;
}
.letter-crumbs a{color:var(--muted);transition:color .2s}
.letter-crumbs a:hover{color:var(--accent)}

/* ============ LETTER HEADER (headline block) ============ */
.letter-header{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(34px,4.5vw,52px);max-width:var(--measure)}
.letter-issue{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
}
.letter-h{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.8rem,7vw,5.6rem);line-height:.94;letter-spacing:.004em;
  color:var(--cream);margin:0;text-wrap:balance;
}
.letter-h em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-transform:none;color:var(--accent);letter-spacing:0;
}
.letter-deck-lg{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(20px,2.1vw,27px);line-height:1.4;color:var(--cream-dim);
  margin:0;text-wrap:pretty;max-width:46ch;
}
.letter-deck-lg em{font-style:italic;color:var(--cream)}

.letter-byline{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--line);margin-top:4px;
}
.byline-name{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;color:var(--cream)}
.byline-where{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ============ COVER (engraving, framed on charcoal) ============ */
/* Engravings render clearly (warm linework on their cream plate); the hairline
   frame + radius + dark page integrate them, matching the homepage letter tiles. */
.letter-cover{
  margin:0 auto clamp(40px,5vw,64px);max-width:var(--container);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#16140F;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.7);
}
.letter-cover img,.letter-cover svg{
  width:100%;display:block;aspect-ratio:16/9;object-fit:cover;
  filter:contrast(1.04) saturate(.96);
}

/* ============ BODY: premium dark-mode reading (Newsreader) ============ */
.letter-body{
  font-family:var(--read);font-weight:400;
  font-size:19.5px;line-height:1.72;color:var(--cream);
  max-width:var(--measure);margin:0 auto;
  font-optical-sizing:auto;
}
article.letter .letter-body > p:first-of-type::first-letter{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:5.4em;line-height:.74;float:left;
  padding:.06em .12em 0 0;color:var(--accent);
}
.letter-body p{margin:0 0 1.25em}
.letter-body em{font-family:var(--serif);font-style:italic;font-size:1.06em;color:var(--cream)}
.letter-body strong{font-weight:600;color:var(--cream)}
.letter-body a{
  color:var(--accent);
  border-bottom:1px solid rgba(255,79,0,.5);
  transition:border-color .2s ease;
}
.letter-body a:hover{border-bottom-color:var(--accent)}

.letter-body h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.02;letter-spacing:.004em;
  margin:1.6em 0 .55em;color:var(--cream);text-wrap:balance;
}
.letter-body h2 em{font-family:var(--serif);font-style:italic;text-transform:none;color:var(--accent)}
.letter-body h3{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.08;letter-spacing:.006em;
  margin:1.4em 0 .5em;color:var(--cream);
}
.letter-body h3 em{font-family:var(--serif);font-style:italic;text-transform:none;color:var(--accent)}

.letter-body blockquote{
  margin:1.6em 0;padding:.1em 0 .1em 1.1em;
  border-left:3px solid var(--accent);
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(22px,2.2vw,28px);line-height:1.36;color:var(--cream);
}
.letter-body blockquote p{margin:0}

.letter-body ul,.letter-body ol{margin:0 0 1.25em;padding-left:1.4em}
.letter-body li{margin-bottom:.55em}
.letter-body li::marker{color:var(--accent)}

.letter-body hr{border:0;border-top:1px solid var(--line);margin:2.4em auto;max-width:120px}

/* engraving figures embedded in body (e.g. ai-engineering infographics) */
.letter-body figure,.letter-body p > img{margin:1.8em 0}
.letter-body img{
  border:1px solid var(--line);border-radius:10px;background:#0C0B08;
  filter:saturate(.96) contrast(1.02);
}

.letter-callout{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:24px 26px;margin:1.8em 0;
  font-family:var(--read);font-weight:400;font-size:18px;line-height:1.6;color:var(--cream-dim);
}
.letter-callout strong{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);
  font-size:21px;display:block;margin-bottom:6px;
}

.letter-rule{border:0;border-top:1px solid var(--line);margin:clamp(40px,5vw,64px) auto clamp(32px,4vw,48px);max-width:200px}

/* ============ BOTTOM CTA: quiet brand card to /session ============ */
.letter-cta{
  max-width:var(--measure);margin:clamp(40px,5vw,60px) auto 0;
  background:linear-gradient(180deg,var(--panel-2) 0%,#1B1812 100%);
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(30px,4.5vw,46px);
  display:flex;flex-direction:column;gap:18px;align-items:flex-start;
}
.letter-cta .cta-eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0;
}
.letter-cta h3{
  font-family:var(--serif);font-style:normal;font-weight:400;
  font-size:clamp(24px,3vw,34px);line-height:1.25;color:var(--cream);margin:0;
  max-width:24ch;text-wrap:balance;
}
.letter-cta h3 em{font-style:italic;color:var(--accent)}
.letter-cta .cta-go{margin-top:4px}
.letter-cta .cta-go .arr{color:var(--accent);margin-left:10px}

/* ============ LETTER NAV (prev / home) ============ */
.letter-nav{
  max-width:var(--measure);margin:clamp(48px,6vw,72px) auto 0;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.letter-nav a{
  color:var(--muted);min-height:44px;display:inline-flex;align-items:center;
  transition:color .2s;
}
.letter-nav a:hover{color:var(--accent)}

/* ============ FOOTER (interior chrome) ============ */
.foot-letter{margin-top:clamp(64px,8vw,110px);border-top:1px solid var(--line);background:transparent}
.foot-letter .foot-min{
  max-width:var(--container);margin:0 auto;padding:30px var(--pad) 38px;
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap;
}
.foot-letter .brand{flex:none}
.foot-letter .foot-nav{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
.foot-letter .foot-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:12px 0;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:color .25s;
}
.foot-letter .foot-nav a:hover{color:var(--cream)}
.foot-letter .legal{
  margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}

/* ============ ARCHIVE (letters index) ============ */
.archive{padding:clamp(40px,5.5vw,84px) 0 clamp(72px,9vw,120px)}
.archive-head{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(40px,5.5vw,64px);max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.archive .eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.archive-h{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(3rem,9vw,7rem);line-height:.92;letter-spacing:.004em;
  color:var(--cream);margin:0;text-wrap:balance;
}
.archive-h em{font-family:var(--serif);font-style:italic;text-transform:none;color:var(--accent)}
.archive-deck{
  font-family:var(--serif);font-weight:400;font-size:clamp(18px,2vw,23px);line-height:1.45;
  color:var(--cream-dim);margin:0;max-width:52ch;
}
.archive-deck em{font-style:italic;color:var(--cream)}

.archive-wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--pad)}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.archive-card{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;color:var(--cream);
  transition:transform .35s ease,border-color .35s ease;
}
.archive-card:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.archive-thumb{aspect-ratio:16/9;overflow:hidden;background:#16140F}
/* Engravings render clearly (warm linework on charcoal cards, matching the
   homepage tiles); a hairline + the card frame integrate them, no blend mode. */
.archive-thumb img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.04) saturate(.96);
  transition:transform .6s ease;
}
.archive-card:hover .archive-thumb img{transform:scale(1.04)}
.archive-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.archive-meta{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
}
.archive-meta .em{color:var(--accent)}
.archive-card h3{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,2vw,1.85rem);line-height:1.02;letter-spacing:.004em;
  margin:0 0 12px;color:var(--cream);
}
.archive-card h3 em{font-family:var(--display);font-weight:400;font-style:normal;text-transform:uppercase;color:var(--accent)}
.archive-card p{font-family:var(--serif);font-size:17px;line-height:1.4;color:var(--cream-dim);margin:0;flex:1}
.archive-card .link{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);display:flex;justify-content:space-between;align-items:center;
}
.archive-card .link .arr{color:var(--accent)}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .archive-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .letter-page .site-head{height:60px}
  .letter-page main{padding-top:60px}
  .letter-body{font-size:18.5px;line-height:1.7}
  article.letter .letter-body > p:first-of-type::first-letter{font-size:4.6em}
  .archive-grid{grid-template-columns:1fr;gap:18px}
}
@media (max-width:520px){
  .letter-page .crumb .crumb-root,.letter-page .crumb .sep-1{display:none}
}
@media (max-width:390px){
  .letter-h{font-size:2.5rem}
  .archive-h{font-size:2.7rem}
  .letter-cta{padding:26px 22px}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  body.letter-page *,body.letter-page *::before,body.letter-page *::after{
    animation:none!important;transition:none!important;
  }
  .letter-page html{scroll-behavior:auto}
}

/* ============ PRINT ============ */
@media print{
  .letter-page .site-head,.letter-page .grain,.foot-letter,.letter-cta,.letter-nav{display:none}
  body.letter-page{background:#fff;color:#000}
  .letter-body{color:#000;max-width:none}
  .letter-body a{color:#000}
}

/* mobile: collapse breadcrumb prefix, show full page name */
@media(max-width:560px){.crumb-root,.crumb .mid,.crumb .sep{display:none}.crumb .here{overflow:visible;text-overflow:clip;max-width:none}}