/* ============================================================
   THE SEO VAULT — magazine-editorial design system
   seolegends.pw
   Distinct from SEOpedia (clinical white) and SEO Legends
   (dark hall of fame). Warm cream + ink + rust accent,
   large serif display, asymmetric magazine grid.
   ============================================================ */

:root{
  --cream:#f5efe4;
  --cream-2:#ede4d3;
  --cream-3:#e6d9c1;
  --paper:#fbf7ef;
  --ink:#181613;
  --ink-2:#3a342c;
  --ink-3:#6b6355;
  --ink-4:#8a8272;
  --rule:#d9cdb5;
  --rule-soft:#e2d8c2;
  --rust:#a2431f;
  --rust-2:#7d3419;
  --olive:#5a5e2e;
  --gold:#a97e1e;
  --radius:2px;
  --maxw:1120px;
  --read:640px;
  --serif:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --display:"Iowan Old Style","Charter",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rust);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--rust-2);text-decoration-thickness:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:.7rem 1.2rem;font-family:var(--sans);font-weight:700;z-index:999}
.skip:focus{left:0}

/* ---------- Masthead — newspaper strap ---------- */
.strap{
  border-bottom:1px solid var(--ink);background:var(--cream);
}
.strap-in{
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.strap-in .edition{color:var(--rust);font-weight:600}
.strap-in .cite{display:none}
@media(min-width:640px){.strap-in .cite{display:inline}}

.masthead{
  background:var(--cream);
  border-bottom:3px double var(--ink);
}
.masthead-in{
  max-width:var(--maxw);margin:0 auto;padding:26px 24px 22px;
  display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;
}
.masthead-in .side{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.masthead-in .side.right{text-align:right}
.wordmark{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5vw,44px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);text-align:center;text-decoration:none;
}
.wordmark:hover{color:var(--rust);text-decoration:none}
.wordmark small{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.32em;
  color:var(--rust);margin-top:8px;font-weight:600;text-transform:uppercase;
}
@media(max-width:640px){
  .masthead-in{grid-template-columns:1fr;gap:8px}
  .masthead-in .side{display:none}
}

.subnav{
  background:var(--paper);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:40;
}
.subnav-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;overflow-x:auto}
.subnav ul{
  list-style:none;margin:0;padding:0;display:flex;gap:26px;
  font-family:var(--sans);font-size:13.5px;letter-spacing:.02em;
  white-space:nowrap;
}
.subnav a{
  display:block;padding:14px 0;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.subnav a:hover{color:var(--rust);border-bottom-color:var(--rust)}

/* ---------- Layout ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:0 24px 80px}
.read{max-width:var(--read)}

/* ---------- Hero — magazine cover ---------- */
.cover{padding:56px 0 48px;border-bottom:1px solid var(--rule);position:relative}
.cover-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:820px){.cover-grid{grid-template-columns:2fr 1fr;gap:44px}}

.issue-tag{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rust);border:1px solid var(--rust);
  padding:5px 12px;margin:0 0 24px;font-weight:600;
}
.deck-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,7vw,68px);line-height:1.02;letter-spacing:-.025em;
  color:var(--ink);margin:0 0 20px;
}
.deck-title em{font-style:italic;color:var(--rust)}
.dek{
  font-family:var(--serif);font-size:22px;line-height:1.5;
  color:var(--ink-2);max-width:32ch;font-weight:400;
}
.dek::first-letter{font-weight:600}

.cover-side{
  border-left:1px solid var(--rule);padding-left:32px;
  font-family:var(--sans);font-size:14px;color:var(--ink-3);line-height:1.6;
}
.cover-side h3{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rust);margin:0 0 14px;font-weight:600;
}
.cover-side ul{list-style:none;margin:0;padding:0}
.cover-side li{padding:10px 0;border-bottom:1px solid var(--rule-soft);font-family:var(--serif);font-size:15px;color:var(--ink-2)}
.cover-side li:last-child{border-bottom:none}
.cover-side li strong{color:var(--ink);font-weight:600}
@media(max-width:820px){.cover-side{border-left:none;border-top:1px solid var(--rule);padding:26px 0 0}}

.byline-strip{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);margin-top:28px;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ---------- Section headings ---------- */
.section{padding:56px 0 8px}
.section-lead{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--rust);margin:0 0 12px;font-weight:600;
}
h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4.6vw,44px);line-height:1.15;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 22px;
}
h3{font-family:var(--sans);font-size:17px;font-weight:700;margin:24px 0 10px;color:var(--ink);letter-spacing:.005em}

p{margin:0 0 18px;color:var(--ink-2)}
.read p:first-of-type::first-letter{
  font-family:var(--display);font-weight:700;color:var(--rust);
  font-size:56px;line-height:.9;float:left;
  padding:6px 12px 0 0;
}
p strong,li strong{color:var(--ink);font-weight:600}
em{color:var(--ink-2);font-style:italic}

ul,ol{margin:0 0 20px;padding-left:24px;color:var(--ink-2)}
li{margin:8px 0;padding-left:4px}
li::marker{color:var(--rust)}

/* Pull quote (magazine style) */
.pull{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:26px;line-height:1.35;color:var(--ink);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:24px 0;margin:36px 0;text-align:center;
  position:relative;max-width:36ch;margin-left:auto;margin-right:auto;
}

/* ---------- Chapters (home) ---------- */
.chapter{margin:44px 0 0}
.chapter-head{
  display:flex;align-items:baseline;gap:16px;justify-content:space-between;
  padding-bottom:14px;border-bottom:2px solid var(--ink);flex-wrap:wrap;
}
.chapter-head h2{margin:0}
.chapter-head .count{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-3);
  text-transform:uppercase;
}

.entries{margin:0}
.entry{
  display:grid;grid-template-columns:80px 1fr;gap:24px;
  padding:28px 0;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;color:inherit;transition:background .16s;
  align-items:start;
}
.entry:hover{background:var(--paper);text-decoration:none}
.entry:hover .entry-name{color:var(--rust)}
.entry:hover .entry-name::after{opacity:1;transform:translateX(4px)}
.entry-num{
  font-family:var(--display);font-weight:700;font-size:44px;
  color:var(--cream-3);line-height:.9;font-variant-numeric:tabular-nums;
  text-align:right;padding-top:2px;transition:color .16s;
}
.entry:hover .entry-num{color:var(--rust)}
.entry-body{min-width:0}
.entry-name{
  font-family:var(--display);font-weight:700;font-size:26px;
  line-height:1.15;color:var(--ink);margin:0 0 4px;transition:color .16s;
  display:inline-flex;align-items:center;gap:12px;
}
.entry-name::after{
  content:"→";font-family:var(--sans);font-size:19px;color:var(--rust);
  opacity:.4;transition:opacity .18s,transform .18s;
}
.entry-role{
  font-family:var(--sans);font-size:14px;color:var(--ink-3);
  margin:0 0 12px;letter-spacing:.005em;
}
.entry-tag{
  font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink-2);margin:0 0 10px;
}
.entry-meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;
}
.entry-meta span{position:relative}
.entry-meta span + span::before{
  content:"";position:absolute;left:-9px;top:50%;width:2px;height:2px;background:var(--ink-4);
}
@media(max-width:560px){
  .entry{grid-template-columns:52px 1fr;gap:16px;padding:22px 0}
  .entry-num{font-size:30px}
  .entry-name{font-size:22px}
  .entry-name::after{display:none}
}

/* ---------- Filter bar ---------- */
.filter{
  margin:32px 0 0;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:16px 20px;background:var(--paper);border:1px solid var(--rule);
}
.filter label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);flex-shrink:0}
.filter input{
  flex:1;min-width:220px;padding:11px 14px;border:1px solid var(--rule);
  background:var(--cream);color:var(--ink);font:inherit;font-size:16px;
  font-family:var(--serif);
}
.filter input:focus{outline:none;border-color:var(--rust);background:var(--paper)}
.filter .count-live{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em}

/* ---------- Pillars / editorial cards ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin:28px 0}
.tile{padding:24px 22px;background:var(--paper);border:1px solid var(--rule)}
.tile .n{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--rust);margin:0 0 12px;font-weight:600}
.tile h3{margin:0 0 8px;font-family:var(--display);font-size:20px;font-weight:700}
.tile p{margin:0;font-size:15.5px;line-height:1.6}

/* ---------- Directory / routing table ---------- */
.directory{
  width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px;
  font-family:var(--serif);
}
.directory caption{
  text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--rust);text-transform:uppercase;padding:0 0 12px;font-weight:600;
}
.directory th,.directory td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule-soft)}
.directory th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:2px solid var(--ink);background:var(--paper);
}
.directory td:first-child{color:var(--ink);font-weight:600;width:32%}
.directory td:nth-child(2){color:var(--ink-2);width:32%}
@media(max-width:680px){
  .directory,.directory tbody,.directory tr,.directory td{display:block;width:100%}
  .directory thead{display:none}
  .directory tr{border:1px solid var(--rule);margin-bottom:14px;background:var(--paper)}
  .directory td{border-bottom:1px solid var(--rule-soft);padding:12px 16px}
  .directory td:first-child{background:var(--cream-2);color:var(--rust);width:100%}
  .directory td:last-child{border-bottom:none}
}

/* ---------- Profile page ---------- */
.crumbs{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-4);
  padding:22px 0 0;text-transform:uppercase;
}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--rust);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-2)}

.profile-cover{
  padding:26px 0 40px;border-bottom:2px solid var(--ink);margin-bottom:44px;
  display:grid;grid-template-columns:1fr;gap:28px;
}
@media(min-width:820px){.profile-cover{grid-template-columns:2fr 1fr;gap:44px}}

.profile-num{
  font-family:var(--display);font-weight:700;font-size:80px;line-height:1;
  color:var(--cream-3);letter-spacing:-.03em;margin:0 0 14px;
}
.profile-chapter{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--rust);
  text-transform:uppercase;margin:0 0 14px;font-weight:600;
}
.profile-cover h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,6vw,58px);line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 12px;
}
.profile-role{
  font-family:var(--sans);font-size:17px;color:var(--ink-3);margin:0 0 20px;
}
.profile-tag{
  font-family:var(--display);font-style:italic;font-size:21px;line-height:1.5;
  color:var(--rust);border-left:3px solid var(--rust);padding-left:18px;margin:0;
}

/* Ledger — right-column dossier */
.ledger{background:var(--paper);border:1px solid var(--rule);padding:0}
.ledger-head{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rust);background:var(--cream-2);border-bottom:1px solid var(--rule);
  padding:12px 18px;font-weight:700;
}
.ledger dl{display:grid;grid-template-columns:1fr;margin:0;padding:14px 18px 4px}
.ledger dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-4);margin:14px 0 4px;font-weight:600;
}
.ledger dt:first-child{margin-top:0}
.ledger dd{margin:0 0 4px;padding:0;font-family:var(--serif);font-size:15px;color:var(--ink);line-height:1.55}
.tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 18px 18px;margin:6px 0 0}
.tag{
  font-family:var(--sans);font-size:12px;padding:3px 9px;
  background:var(--cream);border:1px solid var(--rule);color:var(--ink-2);
  letter-spacing:.01em;
}
.tag.rust{background:var(--rust);color:var(--paper);border-color:var(--rust)}

/* Article body */
.article-body{max-width:var(--read);margin-top:12px}
.article-body h2{
  font-family:var(--display);font-weight:700;font-size:28px;line-height:1.25;
  margin:44px 0 14px;color:var(--ink);
}
.article-body h2::before{
  content:"§ ";color:var(--rust);font-weight:400;
}
.article-body p{font-size:18px;line-height:1.75}

/* CTA */
.recruit{
  margin:52px 0 0;padding:28px 28px 30px;background:var(--ink);color:var(--cream);
  display:grid;grid-template-columns:1fr;gap:12px;
}
.recruit .kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--gold);
  text-transform:uppercase;font-weight:600;
}
.recruit h3{font-family:var(--display);font-size:24px;color:var(--cream);margin:0 0 4px;font-weight:700}
.recruit p{color:var(--cream-3);margin:0 0 14px;font-family:var(--serif);font-size:16px;line-height:1.6}
.recruit a{
  display:inline-block;font-family:var(--sans);font-weight:700;font-size:14px;
  color:var(--ink);background:var(--gold);padding:11px 22px;text-decoration:none;
  letter-spacing:.02em;text-transform:uppercase;justify-self:start;
}
.recruit a:hover{background:var(--cream);text-decoration:none}

/* Pager */
.pager{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:52px 0 0;
  padding-top:28px;border-top:1px solid var(--rule);
}
.pager a{
  display:block;padding:22px 22px;background:var(--paper);border:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:border-color .18s;
}
.pager a:hover{border-color:var(--rust);text-decoration:none}
.pager .dir{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rust);display:block;margin-bottom:6px;font-weight:600;
}
.pager .who{font-family:var(--display);font-size:19px;color:var(--ink);font-weight:700;line-height:1.2}
.pager .next{text-align:right}
@media(max-width:560px){.pager{grid-template-columns:1fr}.pager .next{text-align:left}}

/* FAQ */
.faq details{
  border-bottom:1px solid var(--rule);padding:0;background:transparent;
}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 0;font-family:var(--display);font-weight:700;
  color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:center;
  font-size:20px;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rust);font-weight:400;font-size:24px;flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq details>p{padding:0 0 22px;margin:0;font-size:17px;line-height:1.7;max-width:64ch}

/* Footer */
.colophon{background:var(--ink);color:var(--cream-3);margin-top:80px}
.colophon-in{max-width:var(--maxw);margin:0 auto;padding:52px 24px 36px;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.colophon h4{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--gold);
  text-transform:uppercase;margin:0 0 16px;font-weight:600;
}
.colophon ul{list-style:none;margin:0;padding:0;font-family:var(--serif);font-size:16px}
.colophon li{margin:9px 0}
.colophon a{color:var(--cream-3);text-decoration:none}
.colophon a:hover{color:var(--gold)}
.colophon .brand{font-family:var(--display);font-weight:700;font-size:26px;color:var(--cream);line-height:1;margin:0 0 6px}
.colophon .brand small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--gold);margin-top:8px;font-weight:600;text-transform:uppercase}
.colophon .blurb{font-family:var(--serif);font-size:15px;line-height:1.65;color:var(--ink-4);margin:14px 0 0;max-width:38ch}
.colophon .fine{
  border-top:1px solid #2a2620;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--ink-4);
}
.colophon .fine div{max-width:var(--maxw);margin:0 auto;padding:20px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:760px){.colophon-in{grid-template-columns:1fr;gap:32px;padding:44px 22px 28px}}

/* Motion & a11y */
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Print — keep the archive readable on paper */
@media print{
  body{background:white;color:black;font-size:11pt}
  .subnav,.strap,.recruit,.pager,.filter{display:none}
  a{color:black;text-decoration:none}
  .colophon{background:white;color:black;margin-top:20pt}
}