/* Wrong Default Media. Same house as The Wrong Default.
   Palette redone 2026-09-08: parchment ground (#F6EFE1), ink for text (#1E1810),
   the wax seal's own oxblood red for the accent (#6B0000, sampled from the seal
   photograph itself), and a deep forest green for structure — the footer and the
   section washes that break up the page. Four colors, each doing one job: parchment
   to read on, ink to write in, red to mark what matters, green to give the page depth.

   The separation from the publication's site lives in the type, not the color. The
   publication runs serif headlines over sans body. This runs sans headlines over
   serif body. Same house, different room.

   Contrast checked 2026-09-08 against #F6EFE1. Every text pair passes WCAG AA at
   normal size; the index's format colors were darkened for use as label text
   (`--cat-text`) while their brighter originals (`--cat`) remain for filled badges.
   Hairline rules are decorative boundaries, not the sole identifier of a component.
*/

/* Format color classes -- one modifier class per FORMAT_META slug in
   _tools/build_site.py, replacing inline style="--cat:...". The site's CSP
   (script-src 'self'; style-src 'self') does not allow unsafe-inline, so the
   --cat / --cat-text custom properties have to arrive as a class, not an
   attribute. Keep this list and FORMAT_META in sync. Format replaced the old
   twelve-category system 2026-09-09; these six colors are carried over from
   that palette rather than recomputed, so the WCAG AA contrast check against
   the parchment ground (2026-09-08) still holds. */
.fmt-essay{--cat:#9C87C9;--cat-text:#7557B7}
.fmt-newsletter{--cat:#5B8DBE;--cat-text:#3B6C9C}
.fmt-book{--cat:#D97F4A;--cat-text:#A8521F}
.fmt-podcast{--cat:#4FA893;--cat-text:#337263}
.fmt-speaking-video{--cat:#C9556B;--cat-text:#BD3851}
.fmt-research-report{--cat:#6C7FD6;--cat-text:#4961D0}
.fmt-all{--cat:#D9BE7C}

/* Hero photo background: baked in as a class (was an inline style="background-image:...",
   blocked by the same CSP). Only one hero photo exists today (hero-index.jpg, used by the
   home hero and the index hero); add a sibling class here if a second one shows up. */
.hero-photo-index{background-image:linear-gradient(180deg, rgba(246,239,225,.35) 0%, rgba(246,239,225,.82) 62%, rgba(246,239,225,1) 100%), url('/assets/hero-index.jpg');background-size:cover;background-position:center 42%}

/* Small single-purpose classes standing in for what used to be inline style=, all removed
   for the same CSP reason. */
.mt-18{margin-top:18px}
.idx-form-wrap{margin-top:24px}
.idx-form-frame{border:none;width:100%;max-width:640px;height:820px;display:block}
.idx-form-note{margin-top:12px}
.rows-boxed{background:var(--paper-3);padding:0 26px;border:1px solid var(--rule);border-radius:3px}

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/newsreader-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/newsreader-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/newsreader-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/newsreader-latin-400-italic.woff2") format("woff2")}

:root{
  color-scheme:light;
  --paper:#F6EFE1;
  --paper-2:#EFE6CC;
  --paper-3:#E7DAB6;
  --ink:#1E1810;
  --ink-2:#5C5140;
  --muted:#6E6350;
  --rule:#C4AF80;
  --rule-soft:#D8CBA9;
  --accent:#6B0000;
  --accent-dark:#8F1D1D;
  --accent-wash:#6B000022;
  --on-accent:#F6EFE1;
  --forest:#1B3B28;
  --forest-muted:#A9A38A;
  --footer-link:#E3C98A;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{width:min(1140px,calc(100% - 48px));margin:0 auto}
.measure{max-width:68ch}

/* ---- masthead ---- */
.masthead{position:sticky;top:0;z-index:30;background:rgba(246,239,225,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;height:68px}
.wordmark{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;letter-spacing:-.02em;font-size:17px;white-space:nowrap}
.wordmark .wd{color:var(--ink)}
.wordmark .media{letter-spacing:.01em}
.wordmark .media{color:var(--accent)}

/* ---- seal mark ---- */
.seal-mark{flex:none}
.seal-mark-nav{width:36px;height:34px}
.seal-mark-lg{display:block;width:120px;height:120px;margin-bottom:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--rule-soft)}
.seal-mark-foot{display:block;width:54px;height:52px;margin-bottom:14px}
.nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500}
.nav a{color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
@media (max-width:820px){
  .masthead .wrap{height:auto;padding:14px 0;flex-direction:column;align-items:flex-start;gap:10px}
  .nav{flex-wrap:wrap;gap:18px}
}

/* ---- type ---- */
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.025em;line-height:1.07;margin:0;color:var(--ink)}
h1{font-size:clamp(36px,5.2vw,56px)}
h2{font-size:clamp(27px,3.6vw,38px)}
h3{font-size:clamp(19px,2vw,22px);letter-spacing:-.015em}
p{margin:0}
.prose{font-family:var(--serif);font-size:19px;line-height:1.72;color:var(--ink-2)}
.prose.lead{font-size:22px;line-height:1.6;color:var(--ink)}
.prose p + p{margin-top:1.05em}
.prose strong{color:var(--ink);font-weight:600}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.eyebrow.plain{color:var(--muted)}
.small{font-size:14px;color:var(--muted);line-height:1.62}

/* ---- links in prose ---- */
.prose a,.linked{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover,.linked:hover{color:var(--accent-dark);text-decoration-thickness:2px}

/* ---- sections ---- */
section{padding:60px 0;border-top:1px solid var(--rule-soft)}
section.hero{border-top:0;padding:68px 0 56px}
/* The section wash, redone 2026-09-09. It was a pale green (#E9EEDD) that read as
   pistachio against the parchment and did nothing for the page. It is now the palette's
   forest green at full strength with parchment text, the same treatment the footer
   already had, so a wash is a real break rather than a faint tint. Used once per page,
   never behind the index's own filter controls or its cards, which need a light ground. */
section.tint{background:var(--forest);color:var(--paper-2);border-top-color:var(--forest)}
section.tint h1,section.tint h2,section.tint h3,section.tint h4{color:var(--paper)}
section.tint .prose{color:var(--paper-2)}
section.tint .prose strong{color:var(--paper)}
section.tint .eyebrow{color:var(--footer-link)}
section.tint .small{color:var(--forest-muted)}
section.tint .prose a,section.tint .linked{color:var(--footer-link)}
section.tint .prose a:hover,section.tint .linked:hover{color:var(--paper)}
section.tint .btn{border-color:rgba(246,239,225,.45);color:var(--paper)}
section.tint .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
section.tint .rule-mark{background:var(--footer-link)}
section.tint :focus-visible{outline-color:var(--footer-link)}
section.tint .rows,section.tint .rows .row{border-color:rgba(246,239,225,.22)}
section.tint .rows .row .k{color:var(--paper)}
section.tint .rows .row .v{color:var(--paper-2)}
/* Cards and callouts keep their own light ground inside a wash, so their text has to be
   put back to ink rather than inheriting the section's parchment-on-forest. */
section.tint .card,section.tint .callout{color:var(--ink)}
section.tint .card h3,section.tint .callout h3{color:var(--ink)}
section.tint .card .prose,section.tint .callout .prose{color:var(--ink-2)}
section.tint .card .prose strong,section.tint .callout .prose strong{color:var(--ink)}
section.tint .card .prose a,section.tint .callout .prose a{color:var(--accent)}
section.tint .card .prose a:hover,section.tint .callout .prose a:hover{color:var(--accent-dark)}
.section-head{max-width:760px;margin-bottom:30px}
.section-head.tight{margin-bottom:0}
.section-head .prose{margin-top:18px}

/* ---- hero ---- */
.hero h1{margin-bottom:22px;max-width:21ch}
.hero .prose.lead{max-width:60ch}
.rule-mark{width:64px;height:4px;background:var(--accent);margin-bottom:28px}
.hero-photo{background-repeat:no-repeat;padding:92px 0 60px}

/* ---- buttons ---- */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:12px 20px;border-radius:2px;text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);background:transparent;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--on-accent)}

/* ---- grids and cards ---- */
.grid{display:grid;gap:24px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.pair{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.grid.pair{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:28px}
.card.on-tint{background:var(--paper)}
.card h3{margin-bottom:10px}
.card .prose{font-size:17px;margin-top:0}
.card .go{display:inline-block;margin-top:16px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}
.card .go:hover{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:4px 11px;margin-bottom:14px}
.pill.live{color:var(--accent);border-color:var(--accent)}

/* ---- numbered standard list ---- */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--rule)}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps .n{font-size:14px;font-weight:700;color:var(--accent);letter-spacing:.06em;padding-top:4px}
.steps h3{margin-bottom:8px}

/* ---- pull quote ---- */
.pull{font-family:var(--serif);font-size:clamp(22px,2.9vw,30px);line-height:1.4;color:var(--ink);border-left:4px solid var(--accent);padding:4px 0 4px 26px;margin:38px 0;max-width:34ch}

/* ---- callout ---- */
.callout{background:var(--paper-3);border-left:4px solid var(--accent);padding:24px 26px;border-radius:0 3px 3px 0}
.callout h3{font-size:17px;margin-bottom:8px}
.callout .prose{font-size:17px}

/* ---- definition rows ---- */
.rows{border-top:1px solid var(--rule)}
.rows .row{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:28px;padding:22px 0;border-bottom:1px solid var(--rule)}
.rows .row .k{font-size:14px;font-weight:600;color:var(--ink)}
.rows .row .v{font-family:var(--serif);font-size:17.5px;line-height:1.62;color:var(--ink-2)}
@media (max-width:640px){.rows .row{grid-template-columns:1fr;gap:8px}}

/* ---- book layout ---- */
.book-head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
@media (max-width:860px){.book-head{grid-template-columns:1fr;gap:32px}}
.book-cover{border:1px solid var(--rule);border-radius:2px;box-shadow:0 22px 54px rgba(30,24,16,.28)}
.cover-placeholder{aspect-ratio:2/3;background:var(--paper-3);border:1px solid var(--rule);border-radius:2px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.cover-placeholder .t{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.cover-placeholder .s{font-size:13px;color:var(--muted);margin-top:10px}

/* ---- chapter reading ---- */
.chapter{font-family:var(--serif);font-size:20px;line-height:1.78;color:var(--ink-2);max-width:34em}
.chapter p{margin:0 0 1.1em}
.chapter p.first::first-letter{font-size:3.1em;float:left;line-height:.86;padding:.04em .09em 0 0;font-weight:600;color:var(--ink)}

/* ---- footer ---- */
.site-foot{background:var(--forest);color:var(--paper-2);border-top:1px solid var(--rule);padding:60px 0 40px;font-size:14px;line-height:1.7}
.site-foot h4{color:var(--paper);font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.site-foot a{color:var(--paper-2);text-decoration:none}
.site-foot a:hover{color:var(--footer-link);text-decoration:underline;text-underline-offset:3px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:36px}
.foot-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.colophon{margin-top:46px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);color:var(--forest-muted);font-size:13px;display:flex;flex-wrap:wrap;gap:8px 22px}
.site-foot :focus-visible{outline-color:var(--footer-link)}

/* ---- skip link ---- */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);padding:10px 16px;z-index:50}
.skip:focus{left:12px;top:12px}

/* ---- the index (/index/) ---- */
.idx-chips{display:flex;flex-wrap:wrap;gap:10px;padding:28px 0 0}
.idx-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-2);background:transparent;border:1.5px solid var(--rule);border-radius:999px;padding:7px 14px 7px 10px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.idx-chip:hover{border-color:var(--cat,var(--accent));color:var(--ink)}
.idx-chip.is-active{background:var(--cat,var(--accent));border-color:var(--cat,var(--accent));color:var(--ink)}
.idx-mono-sm{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;background:var(--cat,var(--accent));color:var(--ink);font-size:10px;font-weight:800;letter-spacing:.02em}
.idx-chip.is-active .idx-mono-sm{background:var(--ink);color:var(--cat,var(--accent))}
.idx-controls{display:flex;flex-wrap:wrap;gap:12px;padding:20px 0 32px}
.idx-search{flex:1 1 260px;min-width:200px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:2px;padding:11px 14px}
.idx-search::placeholder{color:var(--muted)}
.idx-select{font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:2px;padding:11px 14px}
.idx-controls-wrap{padding-bottom:0}
.idx-claim{margin-bottom:26px}
.idx-results-section{padding-top:36px}
.idx-count{margin-bottom:20px}
.idx-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.idx-card{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--cat,var(--rule));border-radius:3px;padding:24px}
.idx-card-top{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.idx-mono{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;background:var(--cat);color:var(--ink);font-size:11px;font-weight:800;flex:none}
.idx-fmt-label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cat-text,var(--cat))}
.idx-card h3{margin-bottom:6px}
.idx-title{color:var(--ink);text-decoration:none}
.idx-title:hover{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.idx-byline{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.idx-line{font-size:16px;margin-top:0}
.idx-rel{font-size:13px;color:var(--muted);border-top:1px solid var(--rule-soft);margin-top:14px;padding-top:12px}
.idx-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.idx-topic,.idx-tag,.idx-market{font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--rule);border-radius:999px;padding:4px 10px}
/* The audience line ("Best for") sits between the byline and the description now,
   the one thing on the card meant to be scanned before the reader decides whether
   to read the rest, so it carries the accent color rather than the plain rule
   color the topic and use-for tags use lower down. */
.idx-market{color:var(--accent-dark,var(--accent));border-color:var(--accent);font-weight:700}
.idx-market-row{margin:2px 0 14px}
.idx-tags-label{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-right:4px;align-self:center}
.idx-tag-muted{color:var(--muted)}
.idx-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-top:16px;padding-top:12px;border-top:1px solid var(--rule-soft)}
.idx-foot-left{display:flex;gap:14px;align-items:center}
.idx-buy{font-weight:700;color:var(--accent);text-decoration:none}
.idx-buy:hover{text-decoration:underline}
.idx-none{padding:24px 0}
@media (max-width:640px){.idx-grid{grid-template-columns:1fr}.idx-controls{flex-direction:column}.idx-select{width:100%}}

/* Submission form (/submit/). Reuses the idx-search/idx-select input look rather
   than inventing a second visual language for form fields. */
.sub-form{display:flex;flex-direction:column;gap:18px;max-width:560px}
.sub-field label{display:block;font-family:var(--sans);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.sub-field .req{color:var(--accent-dark,var(--accent))}
.sub-field input,.sub-field textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:2px;padding:11px 14px;resize:vertical}
.sub-field input::placeholder,.sub-field textarea::placeholder{color:var(--muted)}
.sub-hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.sub-msg{border-radius:3px;padding:16px 18px;font-size:14.5px;margin-bottom:24px}
.sub-msg-ok{background:var(--paper-2);border:1.5px solid var(--accent);color:var(--ink)}
.sub-msg-err{background:var(--paper-2);border:1.5px solid #B7473C;color:var(--ink)}