/* ==========================================================================
   AikJrk — editorial design system
   Tokens → shell → grids → story cards → article → tables → tools → utilities
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand palette: navy + single orange accent, taken from the AikJrk wordmark */
  --navy-900:#0a1a4f;
  --navy-800:#10266f;
  --navy-700:#1b3a93;
  --navy-100:#e8edf8;
  --navy-050:#f4f7fc;
  --accent-600:#c2410c;   /* accessible orange for text/links on paper */
  --accent-500:#ea580c;
  --accent-400:#f97316;   /* brand orange, decorative + large text only */
  --accent-050:#fff4ec;

  --ink:#15181d;
  --ink-muted:#4e5663;
  --ink-faint:#6b7382;
  --paper:#ffffff;
  --paper-warm:#fbfaf7;
  --paper-sunk:#f3f1ec;
  --rule:#e2ded6;
  --rule-strong:#c9c3b8;

  /* Status colours — always paired with a text label and an icon shape */
  --ok-bg:#e8f5ec;   --ok-fg:#14562c;   --ok-br:#9bd0ae;
  --warn-bg:#fdf3e2; --warn-fg:#7a4a06; --warn-br:#e8c384;
  --dead-bg:#f1f0ee; --dead-fg:#55504a; --dead-br:#cfcac2;
  --info-bg:#e9eefb; --info-fg:#1c3570; --info-br:#a9bbe6;

  /* Type: a serif display voice against a neutral humanist sans for reading */
  --font-display: "Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,
                  "Source Serif 4",Charter,Georgia,"Times New Roman",serif;
  --font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,
               "Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --fs-micro:0.735rem;
  --fs-small:0.84rem;
  --fs-body:1.0rem;
  --fs-lead:1.115rem;
  --fs-h4:1.1rem;
  --fs-h3:1.33rem;
  --fs-h2:1.64rem;
  --fs-h1:2.1rem;
  --fs-display:2.6rem;

  --lh-tight:1.16;
  --lh-head:1.24;
  --lh-body:1.65;

  /* Spacing — 4px base */
  --s1:0.25rem; --s2:0.5rem;  --s3:0.75rem; --s4:1rem;
  --s5:1.5rem;  --s6:2rem;    --s7:2.75rem; --s8:4rem;

  --radius:4px;
  --radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(16,38,111,.07);
  --shadow-md:0 2px 10px rgba(16,38,111,.09);

  /* Layout */
  --masthead-h:66px;
  --rail-w:252px;
  --grid-max:1320px;
  --measure:68ch;          /* ~60-75 characters of body text */
  --gutter:clamp(1rem, 3vw, 2rem);

  --ratio-hero:16/9;
  --ratio-card:3/2;
  --ratio-square:1/1;
}

@media (min-width:1100px){
  :root{ --fs-h1:2.45rem; --fs-display:3.15rem; --fs-h2:1.8rem; }
}

/* ---------- 2. Reset & base --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--masthead-h) + 1rem);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4,h5{font-family:var(--font-display);line-height:var(--lh-head);margin:0 0 var(--s3);font-weight:700;letter-spacing:-.012em;}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);text-wrap:balance;}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);}
p{margin:0 0 var(--s4);}
a{color:var(--navy-700);text-underline-offset:2px;text-decoration-thickness:.07em;}
a:hover{color:var(--accent-600);}
:focus-visible{outline:3px solid var(--accent-500);outline-offset:2px;border-radius:2px;}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s6) 0;}
small{font-size:var(--fs-small);}
code,kbd{font-family:var(--font-mono);font-size:.9em;background:var(--paper-sunk);padding:.1em .35em;border-radius:3px;overflow-wrap:anywhere;}
pre{overflow-x:auto;background:var(--paper-sunk);padding:var(--s4);border-radius:var(--radius);border:1px solid var(--rule);max-width:100%;}
pre code{background:none;padding:0;white-space:pre;}
ul,ol{padding-left:1.3em;margin:0 0 var(--s4);}
li{margin-bottom:var(--s2);}
blockquote{margin:var(--s5) 0;padding-left:var(--s4);border-left:3px solid var(--accent-400);color:var(--ink-muted);}
button{font:inherit;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy-800);color:#fff;padding:.7rem 1.1rem;font-weight:600;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0;}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. Masthead -------------------------------------------------- */
.masthead{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--masthead-h);
  background:var(--navy-800);color:#fff;
  border-bottom:3px solid var(--accent-400);
  display:flex;align-items:center;
}
.masthead__inner{
  width:100%;max-width:var(--grid-max);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:var(--s4);
}
.masthead a{color:#fff;}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto;min-width:0;}
.brand__logo{height:34px;width:auto;background:#fff;border-radius:3px;padding:3px 6px;}
.brand__text{display:flex;flex-direction:column;line-height:1.1;min-width:0;}
.brand__name{font-family:var(--font-display);font-size:1.22rem;font-weight:700;letter-spacing:-.01em;}
.brand__tagline{font-size:var(--fs-micro);color:#c3cdeb;letter-spacing:.02em;white-space:nowrap;}
@media (max-width:1000px){ .brand__tagline{display:none;} }
@media (max-width:420px){ .brand__name{font-size:1.05rem;} .brand__logo{height:28px;} }

.masthead__spacer{flex:1 1 auto;}
.masthead__contact{
  font-size:var(--fs-small);color:#d6deef;text-decoration:none;white-space:nowrap;
}
.masthead__contact:hover{color:#fff;text-decoration:underline;}
@media (max-width:860px){ .masthead__contact{display:none;} }

.navtoggle{
  display:none;align-items:center;gap:.4rem;background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.45);border-radius:var(--radius);
  padding:.45rem .7rem;font-size:var(--fs-small);font-weight:600;cursor:pointer;min-height:40px;
}
.navtoggle:hover{background:rgba(255,255,255,.12);}
.navtoggle__bars{display:inline-block;width:16px;height:2px;background:#fff;position:relative;}
.navtoggle__bars::before,.navtoggle__bars::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:#fff;
}
.navtoggle__bars::before{top:-5px;} .navtoggle__bars::after{top:5px;}
.navtoggle[aria-expanded="true"] .navtoggle__bars{background:transparent;}
.navtoggle[aria-expanded="true"] .navtoggle__bars::before{top:0;transform:rotate(45deg);}
.navtoggle[aria-expanded="true"] .navtoggle__bars::after{top:0;transform:rotate(-45deg);}
@media (max-width:1023px){ .navtoggle{display:inline-flex;} }

/* ---------- 4. Search ---------------------------------------------------- */
.sitesearch{position:relative;flex:0 1 300px;min-width:0;}
.sitesearch__input{
  width:100%;padding:.5rem .8rem;border:1px solid rgba(255,255,255,.4);border-radius:var(--radius);
  background:rgba(255,255,255,.1);color:#fff;font-size:var(--fs-small);min-height:40px;
}
.sitesearch__input::placeholder{color:#b9c4e2;}
.sitesearch__input:focus{background:#fff;color:var(--ink);border-color:var(--accent-400);}
.sitesearch__input:focus::placeholder{color:var(--ink-faint);}
.sitesearch__results{
  position:absolute;top:calc(100% + 6px);right:0;left:0;min-width:300px;
  background:#fff;color:var(--ink);border:1px solid var(--rule-strong);border-radius:var(--radius-lg);
  box-shadow:0 8px 28px rgba(10,26,79,.22);max-height:65vh;overflow-y:auto;z-index:130;
}
.sitesearch__results[hidden]{display:none;}
.sitesearch__item{display:block;padding:.6rem .85rem;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);}
.sitesearch__item:last-child{border-bottom:0;}
.sitesearch__item:hover,.sitesearch__item:focus{background:var(--navy-050);}
.sitesearch__kind{
  display:inline-block;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent-600);font-weight:700;margin-bottom:.15rem;
}
.sitesearch__title{font-weight:600;display:block;line-height:1.3;}
.sitesearch__snip{font-size:var(--fs-small);color:var(--ink-muted);display:block;margin-top:.15rem;}
.sitesearch__empty{padding:.85rem;font-size:var(--fs-small);color:var(--ink-muted);}
@media (max-width:860px){
  .sitesearch{flex:1 1 auto;}
  .sitesearch__results{right:auto;left:0;width:min(92vw,420px);}
}

/* ---------- 5. Shell: rail + main --------------------------------------- */
.shell{
  max-width:var(--grid-max);margin:0 auto;padding:calc(var(--masthead-h) + var(--s5)) var(--gutter) var(--s8);
  display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:var(--s7);align-items:start;
}
@media (max-width:1023px){
  .shell{grid-template-columns:minmax(0,1fr);gap:0;padding-top:calc(var(--masthead-h) + var(--s4));}
}

.rail{position:sticky;top:calc(var(--masthead-h) + var(--s4));max-height:calc(100vh - var(--masthead-h) - 2rem);overflow-y:auto;padding-right:.4rem;}
.rail__title{
  font-family:var(--font-body);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-faint);font-weight:700;margin:0 0 var(--s3);padding-bottom:var(--s2);border-bottom:2px solid var(--navy-800);
}
.rail ul{list-style:none;margin:0;padding:0;}
.rail li{margin:0;}
.rail a{
  display:block;padding:.46rem .55rem;text-decoration:none;color:var(--ink);
  font-size:.935rem;border-left:3px solid transparent;border-radius:0 var(--radius) var(--radius) 0;min-height:40px;
}
.rail a:hover{background:var(--navy-050);border-left-color:var(--rule-strong);color:var(--navy-800);}
.rail a[aria-current="page"]{
  background:var(--accent-050);border-left-color:var(--accent-500);
  color:var(--accent-600);font-weight:700;
}
.rail__group{margin-top:var(--s2);}
.rail__group > summary{
  list-style:none;cursor:pointer;padding:.46rem .55rem;font-size:.935rem;
  border-left:3px solid transparent;display:flex;align-items:center;justify-content:space-between;min-height:40px;
}
.rail__group > summary::-webkit-details-marker{display:none;}
.rail__group > summary:hover{background:var(--navy-050);color:var(--navy-800);}
.rail__group > summary::after{content:"+";font-weight:700;color:var(--ink-faint);font-size:1.05rem;line-height:1;}
.rail__group[open] > summary::after{content:"–";}
.rail__group[open] > summary{font-weight:700;color:var(--navy-800);}
.rail__group ul{margin:.1rem 0 .4rem;}
.rail__group ul a{padding-left:1.4rem;font-size:.9rem;}
.rail__sep{height:1px;background:var(--rule);margin:var(--s4) 0;}

@media (max-width:1023px){
  .rail{
    position:fixed;top:var(--masthead-h);left:0;right:0;bottom:0;z-index:95;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:var(--s4) var(--gutter) var(--s7);max-height:none;overflow-y:auto;
    display:none;
  }
  .rail.is-open{display:block;}
  .rail a,.rail__group > summary{font-size:1rem;padding-top:.6rem;padding-bottom:.6rem;}
}

.main{min-width:0;}

/* ---------- 6. Page furniture ------------------------------------------- */
.breadcrumbs{font-size:var(--fs-small);color:var(--ink-muted);margin-bottom:var(--s4);}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;}
.breadcrumbs li{margin:0;display:flex;align-items:center;gap:.4rem;}
.breadcrumbs li+li::before{content:"›";color:var(--rule-strong);}
.breadcrumbs a{color:var(--ink-muted);}

.kicker,.card__kicker,.section-label{
  font-family:var(--font-body);font-size:var(--fs-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent-600);
}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  border-bottom:2px solid var(--navy-800);padding-bottom:var(--s2);margin:var(--s7) 0 var(--s5);flex-wrap:wrap;
}
.section-head:first-child{margin-top:0;}
.section-head h2{margin:0;font-size:var(--fs-h2);}
.section-head__link{font-size:var(--fs-small);font-weight:600;white-space:nowrap;}
.section-intro{color:var(--ink-muted);max-width:var(--measure);margin-top:calc(-1 * var(--s3));margin-bottom:var(--s5);}

.page-head{margin-bottom:var(--s6);}
.page-head h1{margin-bottom:var(--s3);}
.standfirst{font-size:var(--fs-lead);color:var(--ink-muted);max-width:var(--measure);line-height:1.5;}
.meta{font-size:var(--fs-small);color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:var(--s3);}
.meta time{white-space:nowrap;}

/* ---------- 7. Status pills (never colour alone) ------------------------ */
.pill{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:999px;border:1px solid;line-height:1.5;
  white-space:normal;max-width:100%;overflow-wrap:anywhere;
}
.pill::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor;flex:0 0 auto;}
.pill--active{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-br);}
.pill--soon{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-br);}
.pill--soon::before{border-radius:0;transform:rotate(45deg);}
.pill--expired{background:var(--dead-bg);color:var(--dead-fg);border-color:var(--dead-br);}
.pill--expired::before{border-radius:0;width:.5rem;height:.15rem;}
.pill--info{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-br);}
.pill--info::before{border-radius:2px;}
.pill-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--s3);}

/* ---------- 8. Story cards & magazine grids ----------------------------- */
.card{
  display:flex;flex-direction:column;gap:var(--s2);min-width:0;
  padding-bottom:var(--s4);border-bottom:1px solid var(--rule);
}
.card__media{
  display:block;overflow:hidden;border-radius:var(--radius);background:var(--paper-sunk);
  aspect-ratio:var(--ratio-card);margin-bottom:var(--s1);
}
.card__media img{width:100%;height:100%;object-fit:cover;}
.card__title{font-family:var(--font-display);font-size:1.16rem;line-height:1.26;margin:0;font-weight:700;}
.card__title a{color:var(--ink);text-decoration:none;}
.card__title a:hover{color:var(--accent-600);text-decoration:underline;}
.card__summary{font-size:var(--fs-small);color:var(--ink-muted);margin:0;line-height:1.55;}
.card__meta{font-size:var(--fs-micro);color:var(--ink-faint);display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto;padding-top:var(--s1);}

/* Lead story — the front page anchor */
.lead{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:var(--s6);align-items:start;margin-bottom:var(--s7);
  padding-bottom:var(--s6);border-bottom:3px double var(--rule-strong);
}
.lead__media{
  display:block;overflow:hidden;border-radius:var(--radius-lg);background:var(--paper-sunk);
  aspect-ratio:var(--ratio-hero);margin-bottom:var(--s4);
}
.lead__media img{width:100%;height:100%;object-fit:cover;}
.lead__title{font-size:clamp(1.75rem,2.6vw + .6rem,2.55rem);line-height:1.12;margin:var(--s2) 0 var(--s3);text-wrap:balance;}
.lead__title a{color:var(--ink);text-decoration:none;}
.lead__title a:hover{color:var(--accent-600);}
.lead__standfirst{font-size:var(--fs-lead);color:var(--ink-muted);max-width:60ch;}
.lead__support{display:flex;flex-direction:column;gap:var(--s4);border-left:1px solid var(--rule);padding-left:var(--s5);}
.lead__support .card{padding-bottom:var(--s4);}
.lead__support .card:last-child{border-bottom:0;padding-bottom:0;}
@media (max-width:900px){
  .lead{grid-template-columns:minmax(0,1fr);gap:var(--s5);}
  .lead__support{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:var(--s4);}
}

.grid{display:grid;gap:var(--s5);}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1150px){ .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:860px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:620px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr);}
}

/* Compact chronological list (news latest, archives) */
.rundown{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.rundown > li{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.rundown__date{font-size:var(--fs-small);color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap;}
.rundown__body h3{font-size:1.06rem;margin:0 0 .3rem;}
.rundown__body h3 a{color:var(--ink);text-decoration:none;}
.rundown__body h3 a:hover{color:var(--accent-600);text-decoration:underline;}
.rundown__body p{font-size:var(--fs-small);color:var(--ink-muted);margin:0;}
@media (max-width:620px){
  .rundown > li{grid-template-columns:minmax(0,1fr);gap:var(--s1);}
}

/* Quiet editorial list for guides */
.guidelist{display:grid;gap:var(--s4);}
.guidelist article{padding:var(--s4);background:var(--paper-warm);border:1px solid var(--rule);border-radius:var(--radius-lg);}
.guidelist h3{margin:0 0 var(--s2);font-size:1.18rem;}
.guidelist h3 a{color:var(--ink);text-decoration:none;}
.guidelist h3 a:hover{color:var(--accent-600);text-decoration:underline;}
.guidelist p{margin:0;font-size:var(--fs-small);color:var(--ink-muted);}

/* ---------- 9. Panels, callouts, notes ---------------------------------- */
.panel{
  background:var(--paper-warm);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:var(--s5);margin-bottom:var(--s5);
}
.panel--accent{background:var(--accent-050);border-color:var(--warn-br);}
.panel--info{background:var(--navy-050);border-color:var(--navy-100);}
.panel > :last-child{margin-bottom:0;}
.panel h2,.panel h3{margin-top:0;}

.takeaways{
  border-left:4px solid var(--accent-500);background:var(--accent-050);
  padding:var(--s4) var(--s5);border-radius:0 var(--radius-lg) var(--radius-lg) 0;margin-bottom:var(--s6);
}
.takeaways h2{font-size:var(--fs-h4);font-family:var(--font-body);text-transform:uppercase;
  letter-spacing:.08em;color:var(--accent-600);margin:0 0 var(--s2);}
.takeaways ul{margin:0;}
.takeaways > :last-child{margin-bottom:0;}

.note{
  font-size:var(--fs-small);color:var(--ink-muted);background:var(--paper-sunk);
  border-left:3px solid var(--rule-strong);padding:var(--s3) var(--s4);border-radius:0 var(--radius) var(--radius) 0;
  margin-bottom:var(--s4);
}
.note strong{color:var(--ink);}

.pullquote{
  font-family:var(--font-display);font-size:1.4rem;line-height:1.35;color:var(--navy-800);
  border-top:2px solid var(--accent-400);border-bottom:2px solid var(--accent-400);
  padding:var(--s4) 0;margin:var(--s6) 0;font-style:italic;
}

/* ---------- 10. Article template ---------------------------------------- */
.article{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);}
@media (min-width:1180px){
  .article{grid-template-columns:minmax(0,1fr) 230px;}
  .article__rail{position:sticky;top:calc(var(--masthead-h) + var(--s4));align-self:start;max-height:calc(100vh - var(--masthead-h) - 3rem);overflow-y:auto;}
}
.article__body{max-width:var(--measure);font-size:1.035rem;overflow-wrap:break-word;}
.article__body h2{margin-top:var(--s7);padding-top:var(--s2);border-top:1px solid var(--rule);}
.article__body h3{margin-top:var(--s5);}
.article__body > :first-child{margin-top:0;}
.article__hero{margin-bottom:var(--s5);}
.article__hero img{width:100%;border-radius:var(--radius-lg);aspect-ratio:var(--ratio-hero);object-fit:cover;}
.article__hero figcaption{font-size:var(--fs-micro);color:var(--ink-faint);margin-top:var(--s2);}

.toc{background:var(--paper-warm);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:var(--s4);}
.toc h2{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;
  font-family:var(--font-body);color:var(--ink-faint);margin:0 0 var(--s2);}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;}
.toc li{margin:0 0 .3rem;counter-increment:toc;}
.toc a{font-size:var(--fs-small);text-decoration:none;color:var(--ink-muted);display:block;padding:.15rem 0;}
.toc a::before{content:counter(toc) ". ";color:var(--rule-strong);}
.toc a:hover{color:var(--accent-600);}

.sources{font-size:var(--fs-small);}
.sources ol{padding-left:1.2em;}
.sources li{margin-bottom:var(--s2);overflow-wrap:anywhere;}

/* ---------- 11. Tables --------------------------------------------------- */
.tablewrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:var(--s5);
  border:1px solid var(--rule);border-radius:var(--radius-lg);
}
.tablewrap:focus-visible{outline:3px solid var(--accent-500);}
.tablewrap__hint{
  font-size:var(--fs-micro);color:var(--ink-faint);margin:0 0 var(--s2);
}
table{border-collapse:collapse;width:100%;font-size:var(--fs-small);background:#fff;}
caption{text-align:left;font-size:var(--fs-small);color:var(--ink-muted);padding:var(--s3) var(--s4);background:var(--paper-warm);border-bottom:1px solid var(--rule);}
th,td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top;overflow-wrap:anywhere;}
thead th{
  background:var(--navy-050);font-weight:700;color:var(--navy-800);white-space:nowrap;
  position:sticky;top:0;border-bottom:2px solid var(--navy-100);
}
tbody tr:last-child td{border-bottom:0;}
tbody tr:nth-child(even){background:var(--paper-warm);}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}

/* ---------- 12. Fact panel (card reviews) -------------------------------- */
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:#fff;border:1px solid var(--rule);border-top-width:1px;border-left-width:1px;
  border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--s5);
}
.facts__item{background:#fff;padding:var(--s4);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-right:-1px;margin-bottom:-1px;}
.facts__label{
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-faint);font-weight:700;display:block;margin-bottom:.25rem;
}
.facts__value{font-size:1.06rem;font-weight:600;color:var(--ink);line-height:1.35;}
.facts__value small{display:block;font-weight:400;font-size:var(--fs-small);color:var(--ink-muted);margin-top:.15rem;}

/* ---------- 13. Directory / comparison listing --------------------------- */
.filters{
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end;
  padding:var(--s4);background:var(--paper-warm);border:1px solid var(--rule);
  border-radius:var(--radius-lg);margin-bottom:var(--s5);
}
.field{display:flex;flex-direction:column;gap:.25rem;min-width:0;flex:1 1 170px;}
.field label{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--ink-faint);}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--fs-small);padding:.5rem .6rem;border:1px solid var(--rule-strong);
  border-radius:var(--radius);background:#fff;color:var(--ink);min-height:42px;width:100%;
}
.field input:focus,.field select:focus{border-color:var(--accent-500);}
.field__hint{font-size:var(--fs-micro);color:var(--ink-faint);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--navy-800);color:#fff;border:1px solid var(--navy-800);
  padding:.6rem 1.1rem;border-radius:var(--radius);font-weight:600;font-size:var(--fs-small);
  text-decoration:none;cursor:pointer;min-height:44px;
}
.btn:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff;}
.btn--ghost{background:transparent;color:var(--navy-800);}
.btn--ghost:hover{background:var(--navy-050);color:var(--navy-800);}
.btn--accent{background:var(--accent-600);border-color:var(--accent-600);}
.btn--accent:hover{background:var(--accent-500);border-color:var(--accent-500);}
.btn--sm{padding:.4rem .7rem;min-height:38px;font-size:var(--fs-micro);}

.cardlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);}
.cardrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:start;
  padding:var(--s4);border:1px solid var(--rule);border-radius:var(--radius-lg);background:#fff;
}
.cardrow:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-sm);}
.cardrow h3{font-size:1.1rem;margin:0 0 .3rem;}
.cardrow h3 a{color:var(--ink);text-decoration:none;}
.cardrow h3 a:hover{color:var(--accent-600);text-decoration:underline;}
.cardrow__issuer{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-weight:700;}
.cardrow__summary{font-size:var(--fs-small);color:var(--ink-muted);margin:.4rem 0 0;}
.cardrow__stats{text-align:right;font-size:var(--fs-small);white-space:nowrap;}
.cardrow__fee{font-weight:700;font-size:1.05rem;display:block;}
.cardrow__feelabel{font-size:var(--fs-micro);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.07em;}
@media (max-width:620px){
  .cardrow{grid-template-columns:minmax(0,1fr);}
  .cardrow__stats{text-align:left;}
}

/* ---------- 14. Tools ---------------------------------------------------- */
.toolgrid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(255px,1fr));}
.toolcard{
  display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);
  border:1px solid var(--rule);border-left:4px solid var(--accent-400);
  border-radius:var(--radius-lg);background:#fff;
}
.toolcard h3{margin:0;font-size:1.08rem;}
.toolcard h3 a{color:var(--ink);text-decoration:none;}
.toolcard h3 a:hover{color:var(--accent-600);text-decoration:underline;}
.toolcard p{margin:0;font-size:var(--fs-small);color:var(--ink-muted);}

.tool{max-width:none;}
.tool__io{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--s6);align-items:start;}
@media (max-width:900px){ .tool__io{grid-template-columns:minmax(0,1fr);gap:var(--s5);} }
.tool__inputs{
  background:var(--paper-warm);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);
}
@media (min-width:901px){ .tool__inputs{position:sticky;top:calc(var(--masthead-h) + var(--s4));} }
.tool__results{min-width:0;}
.result-headline{
  background:var(--navy-800);color:#fff;border-radius:var(--radius-lg);padding:var(--s5);margin-bottom:var(--s5);
}
.result-headline .facts__label{color:#aebbdf;}
.result-headline strong{font-size:2rem;font-family:var(--font-display);display:block;line-height:1.15;}
.result-headline p{margin:var(--s2) 0 0;color:#d4dcf0;font-size:var(--fs-small);}
.assumptions{font-size:var(--fs-small);color:var(--ink-muted);}
.assumptions summary{cursor:pointer;font-weight:600;color:var(--navy-800);padding:var(--s2) 0;}

.bar{height:10px;background:var(--paper-sunk);border-radius:999px;overflow:hidden;border:1px solid var(--rule);}
.bar__fill{height:100%;background:var(--accent-500);border-radius:999px;}

/* ---------- 15. Footer --------------------------------------------------- */
.footer{
  border-top:3px solid var(--navy-800);background:var(--paper-warm);margin-top:var(--s8);
  padding:var(--s6) 0;font-size:var(--fs-small);color:var(--ink-muted);
}
.footer__inner{max-width:var(--grid-max);margin:0 auto;padding:0 var(--gutter);
  display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.footer h2{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;
  font-family:var(--font-body);color:var(--ink);margin:0 0 var(--s2);}
.footer ul{list-style:none;margin:0;padding:0;}
.footer li{margin-bottom:.3rem;}
.footer__legal{
  max-width:var(--grid-max);margin:var(--s6) auto 0;padding:var(--s4) var(--gutter) 0;
  border-top:1px solid var(--rule);font-size:var(--fs-micro);line-height:1.6;
}

/* ---------- 16. Utilities ------------------------------------------------ */
.stack > * + *{margin-top:var(--s4);}
.mt0{margin-top:0;} .mb0{margin-bottom:0;}
.mb4{margin-bottom:var(--s4);} .mb6{margin-bottom:var(--s6);}
.measure{max-width:var(--measure);}
.center{text-align:center;}
.muted{color:var(--ink-muted);}
.tabnum{font-variant-numeric:tabular-nums;}
.nowrap{white-space:nowrap;}
[hidden]{display:none!important;}

@media print{
  .masthead,.rail,.sitesearch,.navtoggle,.footer__inner{display:none!important;}
  .shell{display:block;padding-top:0;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;word-break:break-all;}
}

/* Narrow-screen safety: nothing may push the page wider than the viewport. */
@media (max-width:620px){
  .article__body,.measure,.main{overflow-wrap:break-word;}
  .rundown__body p,.card__summary{overflow-wrap:anywhere;}
}