/*
Theme Name: Kick Up A Fuss
Theme URI: https://kickupafuss.co.uk
Author: Kick Up A Fuss
Description: A block theme for a UK consumer rights and redress publication. Broadsheet register, warmed for readers who are mid-argument with a company. Pairs with the Kick Up A Fuss Engine plugin.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.3.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kick-up-a-fuss
Tags: blog, news, block-patterns, full-site-editing, one-column, editor-style
*/

/* ==========================================================================
   Kick Up A Fuss — shared stylesheet
   Direction: Broadsheet, warmed
   ========================================================================== */

/* ---------- Tokens — brand guidelines v1 ---------- */
:root{
  --paper:#FAF7F0;         /* Cream — page ground, never white */
  --card:#FFFDF9;          /* Paper — cards and component boxes on cream */
  --ink:#1B1A16;
  --soft:#5C574E;          /* Muted */
  --wash:#F3E7E3;          /* Short Answer + small-print callouts ONLY */
  --rule:#DED7C7;          /* hairlines, 1px only */
  --red:#83332A;           /* Brick — the single accent */
  --brick-light:#C14B3E;   /* dark surfaces, lockup/mark size only */
  --blue:#1B1A16;          /* retired second accent; legacy uses resolve to ink */
  --display:"Fraunces",Georgia,serif;
  --brand:"Fraunces",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --pad:44px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17.5px;line-height:1.68;font-weight:380}
img{max-width:100%;display:block}

/* ---------- Page shell ---------- */
.wp-site-blocks{max-width:1200px;margin:0 auto;background:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.col{padding:38px var(--pad) 0}
.narrow{max-width:62ch}

/* ---------- Masthead ---------- */
.strapline{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:9px var(--pad);border-bottom:1px solid var(--rule);
  font-family:var(--display);font-variant:small-caps;letter-spacing:.07em;font-size:15px;color:var(--soft)}
.masthead{border-bottom:3px solid var(--ink)}
.mast-top{padding:26px var(--pad) 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.wordmark{font-family:var(--brand);font-weight:900;font-variation-settings:"SOFT" 60,"WONK" 1;font-size:54px;line-height:.92;letter-spacing:-.035em;margin:0;text-decoration:none}
.wordmark em{font-style:normal;color:var(--red)}
.tagline{font-family:var(--display);font-size:21px;line-height:1.3;color:var(--ink);margin:0 0 8px;white-space:nowrap}

/* two-line nav: label + what it actually is */
.nav{display:flex;gap:30px;padding:0 var(--pad);flex-wrap:wrap;border-top:1px solid var(--rule)}
.nav a{text-decoration:none;padding:11px 0 12px;border-bottom:3px solid transparent;display:block}
.nav a b{font-family:var(--display);font-weight:500;font-size:17px;display:block;line-height:1.2;white-space:nowrap}
.nav a span{font-size:11.5px;color:var(--soft);display:block;line-height:1.3;margin-top:2px;white-space:nowrap}
@media (min-width:761px) and (max-width:1010px){
  .nav a span{display:none}
  .nav a{padding:13px 0}
}
.nav a[aria-current]{border-bottom-color:var(--red)}
.nav a:hover b{color:var(--red)}

/* ---------- Triage strip (site-wide) ---------- */
.triage{background:var(--wash);padding:18px var(--pad);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.triage p{font-family:var(--display);font-size:19px;margin:0 10px 0 0}
.triage a{font-size:15px;text-decoration:none;background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--blue);padding:10px 15px;line-height:1.3}
.triage a:hover{border-color:var(--blue)}

/* ---------- Article furniture ---------- */
.kicker{font-family:var(--display);font-variant:small-caps;letter-spacing:.09em;font-size:16px;color:var(--red);margin:0 0 14px}
h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.6vw,49px);line-height:1.09;letter-spacing:-.015em;margin:0 0 18px;max-width:19ch}
.standfirst{font-family:var(--display);font-size:21px;line-height:1.48;color:var(--soft);margin:0 0 24px;max-width:56ch}
.byline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:13px 0;margin:0 0 12px;font-size:14.5px;color:var(--soft);max-width:62ch}
.byline strong{color:var(--ink);font-weight:600}
.byline .sep{opacity:.35}
.assure{font-size:15px;color:var(--soft);margin:0 0 34px}
.assure b{color:var(--ink);font-weight:600}

.sec{max-width:62ch;margin:0 0 38px}
.sec h2{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.18;margin:0 0 14px;letter-spacing:-.01em}
.sec h3{font-size:19px;font-weight:600;margin:22px 0 8px}
.sec p{margin:0 0 16px}
.sec p:last-child{margin-bottom:0}
.sec ul{margin:0 0 16px;padding-left:22px}
.sec li{margin-bottom:8px}
.plain{font-size:15px;color:var(--soft);border-left:2px solid var(--rule);padding-left:16px}
.source{font-size:14px;color:var(--soft);margin:0 0 38px;max-width:62ch}

/* ---------- Component: the short answer ---------- */
.answer{max-width:60ch;background:var(--wash);border-left:6px solid var(--red);padding:24px 28px;margin:0 0 40px}
.lab{font-family:var(--display);font-variant:small-caps;letter-spacing:.09em;font-size:16px;color:var(--red);display:block;margin-bottom:8px}
.answer p{font-family:var(--display);font-size:23px;line-height:1.42;margin:0}
.answer .today{font-family:var(--body);font-size:16px;line-height:1.55;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--rule)}
.answer .today b{font-weight:600}

/* ---------- Component: qualify list ---------- */
.yes{list-style:none;margin:0 0 16px;padding:0;max-width:62ch}
.yes li{padding:14px 0 14px 34px;border-bottom:1px solid var(--rule);position:relative}
.yes li:first-child{border-top:1px solid var(--rule)}
.yes li::before{content:"Yes";position:absolute;left:0;top:16px;font-family:var(--display);font-variant:small-caps;font-size:15px;letter-spacing:.06em;color:var(--red)}

/* ---------- Component: the record ---------- */
.record{max-width:62ch;margin:0 0 12px}
.rec{display:grid;grid-template-columns:minmax(115px,1.1fr) minmax(0,3fr) 58px;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--rule)}
.rec:first-child{border-top:1px solid var(--rule)}
.rec span:first-child{font-size:16px}
.track{height:14px;border:1px solid var(--rule)}
.fill{display:block;height:100%;background:var(--red)}
.fill.avg{background:var(--soft);opacity:.4}
.num{text-align:right;font-size:16px;font-variant-numeric:tabular-nums}

/* ---------- Component: deadlines as real dates ---------- */
.dates{max-width:62ch;margin:0 0 38px;border:2px solid var(--ink);padding:24px 26px}
.dates .lab{color:var(--ink);font-size:17px;margin-bottom:16px}
.dates ol{list-style:none;margin:0;padding:0}
.dates li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule)}
.dates li:last-child{border-bottom:0;padding-bottom:0}
.dates b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.dates li.now b{color:var(--red)}
.dates .nudge{font-size:15px;color:var(--soft);margin:16px 0 0}

/* ---------- Component: numbered steps ---------- */
.steps{max-width:62ch;margin:0 0 38px;list-style:none;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 24px 46px;border-left:1px solid var(--rule);margin-left:13px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:-13px;top:-2px;width:26px;height:26px;background:var(--red);color:var(--paper);font-size:14px;display:flex;align-items:center;justify-content:center}
.steps h3{margin:0 0 5px;font-size:18px;font-weight:600;line-height:1.35}
.steps p{margin:0 0 8px;font-size:16px;color:var(--soft)}
.steps p:last-child{margin-bottom:0}
.say{display:block;font-family:var(--display);font-size:17px;color:var(--ink);background:var(--wash);padding:12px 16px;margin-top:10px}

/* ---------- Component: tool ---------- */
.tool{max-width:62ch;margin:0 0 38px;background:var(--blue);color:var(--paper);padding:30px}
.tool .lab{color:var(--paper);opacity:.75}
.tool h2,.tool h3{font-family:var(--display);font-weight:500;font-size:27px;margin:0 0 8px;letter-spacing:-.01em}
.tool>p{margin:0 0 24px;font-size:16.5px;opacity:.85}
.field{margin:0 0 18px}
.field span{display:block;font-size:14.5px;margin-bottom:7px;opacity:.8}
.field input,.field select{width:100%;font:inherit;font-size:17px;color:inherit;background:transparent;border:0;border-bottom:2px solid currentColor;padding:8px 0;border-radius:0}
.field select option{color:var(--ink)}
.tool button{font:inherit;font-size:16px;font-weight:600;background:var(--paper);color:var(--blue);border:0;padding:15px 26px;cursor:pointer}
.tool .free{font-size:14.5px;margin:16px 0 0;opacity:.75}
.result{margin-top:26px;padding-top:22px;border-top:2px solid rgba(251,247,239,.35)}
.result h4{font-family:var(--display);font-weight:500;font-size:24px;margin:0 0 8px}
.result p{margin:0 0 10px;font-size:16.5px;opacity:.9}
.result p:last-child{margin-bottom:0}

/* ---------- Component: status line ---------- */
.status{max-width:62ch;margin:0 0 34px;padding:16px 0;border-top:2px solid var(--red);border-bottom:1px solid var(--rule)}
.status b{font-family:var(--display);font-variant:small-caps;letter-spacing:.09em;font-size:16px;color:var(--red);font-weight:400;margin-right:10px}
.status time{font-size:14.5px;color:var(--soft);margin-left:10px}

/* ---------- Component: method box (Findings) ---------- */
.method{max-width:62ch;margin:0 0 38px;border:1px solid var(--rule);border-top:4px solid var(--ink);padding:22px 26px;background:var(--paper)}
.method .lab{color:var(--ink)}
.method p{margin:0;font-size:16px;color:var(--soft)}
.method dl{margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px}
.method dt{font-size:13px;color:var(--soft);margin-bottom:2px}
.method dd{margin:0;font-family:var(--display);font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}

/* ---------- Component: the case box (reader case) ---------- */
.casebox{max-width:62ch;margin:0 0 38px;background:var(--wash);padding:24px 26px}
.casebox .lab{color:var(--red)}
.casebox dl{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.casebox div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--rule)}
.casebox div:last-child{border-bottom:0;padding-bottom:0}
.casebox dt{font-size:15px;color:var(--soft)}
.casebox dd{margin:0;font-weight:600;font-size:16px;text-align:right}

/* ---------- Component: ad slot ---------- */
.adslot{max-width:62ch;margin:0 0 38px;border:1px dashed var(--rule);padding:28px;text-align:center;color:var(--soft);font-size:11px;letter-spacing:.18em;text-transform:uppercase}

/* ---------- Component: submissions nudge ---------- */
.share{max-width:62ch;margin:0 0 44px;background:var(--wash);padding:22px 26px}
.share p{font-family:var(--display);font-size:20px;margin:0 0 10px}
.share a{font-size:16px;font-weight:600;color:var(--blue);text-underline-offset:4px}

/* ---------- Home: hero ---------- */
.hero{padding:34px var(--pad) 0;display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:0 44px}
.lead{border-right:1px solid var(--rule);padding-right:44px}
.lead h1{font-size:clamp(32px,4.4vw,46px);max-width:17ch;margin-bottom:16px}
.lead .standfirst{font-size:20px;max-width:none}
.rail>*+*{margin-top:26px}
.rail h2{font-family:var(--display);font-weight:500;font-size:19px;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.railitem{display:block;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--rule)}
.railitem b{display:block;font-size:16px;font-weight:600;line-height:1.35}
.railitem span{display:block;font-size:14px;color:var(--soft);margin-top:2px}
.railitem:hover b{color:var(--red)}
.signup{background:var(--blue);color:var(--paper);padding:22px}
.signup h2{border-bottom-color:rgba(251,247,239,.4);color:var(--paper)}
.signup p{font-size:15.5px;margin:0 0 16px;opacity:.88}
.signup input{width:100%;font:inherit;font-size:16px;color:inherit;background:transparent;border:0;border-bottom:2px solid currentColor;padding:8px 0;margin-bottom:14px}
.signup button{font:inherit;font-size:15px;font-weight:600;background:var(--paper);color:var(--blue);border:0;padding:12px 20px;cursor:pointer;width:100%}
.signup small{display:block;margin-top:12px;font-size:13.5px;opacity:.75;line-height:1.5}

/* ---------- Home: section headers ---------- */
.band{padding:0 var(--pad);margin-top:44px}
.bandhead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:3px solid var(--ink);padding-top:12px;margin-bottom:20px}
.bandhead h2{font-family:var(--display);font-weight:500;font-size:30px;margin:0;letter-spacing:-.01em}
.bandhead p{margin:0;font-size:15px;color:var(--soft);max-width:44ch}
.bandhead a{font-size:15px;font-weight:600;color:var(--blue);text-decoration:none;white-space:nowrap}
.bandhead a:hover{text-decoration:underline}

/* ---------- Home: problem grid ---------- */
.problems{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.problems a{text-decoration:none;padding:18px 20px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);display:block}
.problems a b{font-family:var(--display);font-size:19px;font-weight:500;display:block;line-height:1.25}
.problems a span{font-size:14px;color:var(--soft);display:block;margin-top:4px}
.problems a:hover{background:var(--wash)}

/* ---------- Home: three-up cards ---------- */
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px}
.card{text-decoration:none;display:block}
.card .kicker{font-size:14px;margin-bottom:8px}
.card h3{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.22;margin:0 0 8px}
.card p{margin:0;font-size:15.5px;color:var(--soft)}
.card:hover h3{color:var(--red)}
.card .meta{display:block;margin-top:10px;font-size:13.5px;color:var(--soft);font-variant-numeric:tabular-nums}

/* ---------- Home: tools row ---------- */
.toolrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.toolrow a{text-decoration:none;border:1px solid var(--rule);border-left:4px solid var(--blue);padding:18px 20px;display:block;background:var(--paper)}
.toolrow a b{display:block;font-family:var(--display);font-size:19px;font-weight:500;line-height:1.25}
.toolrow a span{display:block;font-size:14px;color:var(--soft);margin-top:5px}
.toolrow a:hover{background:var(--wash);border-color:var(--blue)}

/* ---------- News: figure ---------- */
figure{margin:0 0 30px;max-width:62ch}
.ph{background:var(--wash);border:1px solid var(--rule);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--soft);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
figcaption{font-size:14px;color:var(--soft);margin-top:8px;line-height:1.5}

/* ---------- Footer ---------- */
.foot{border-top:3px solid var(--ink);padding:28px var(--pad) 36px;margin-top:46px}
.foot nav{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.foot a{font-size:15px;text-decoration:none}
.foot a:hover{color:var(--red)}
.foot p{margin:0;font-size:14.5px;color:var(--soft);max-width:68ch;line-height:1.6}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);gap:34px}
  .lead{border-right:0;padding-right:0;border-bottom:1px solid var(--rule);padding-bottom:28px}
}
@media (max-width:640px){
  :root{--pad:20px}
  .strapline{font-size:13.5px;gap:6px}
  .strapline{font-size:11px;letter-spacing:.1em}
  .wordmark{font-size:40px}
  .tagline{font-size:19px;margin-bottom:2px}
  .nav{gap:20px;overflow-x:auto;flex-wrap:nowrap}
  .nav a{white-space:nowrap;padding:12px 0}
  .nav a span{display:none}
  .triage a{flex:1 1 100%}
  .rec{grid-template-columns:minmax(95px,1fr) minmax(0,2fr) 48px;gap:10px}
  .dates li,.casebox div{flex-direction:column;gap:2px}
  .casebox dd{text-align:left}
  .bandhead h2{font-size:25px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.triage,.adslot,.signup,.tool button{display:none}.wp-site-blocks{max-width:none}}


/* ==========================================================================
   WordPress specifics
   ========================================================================== */
.wp-site-blocks>*{margin-block-start:0}
.alignwide{max-width:1200px}
.alignfull{max-width:none;margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));width:auto}
.entry-content>*{margin-bottom:16px}
.entry-content>.sec,.entry-content>.answer,.entry-content>.dates{margin-bottom:38px}
.wp-block-post-title{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.6vw,49px);line-height:1.09;letter-spacing:-.015em;margin:0 0 18px;max-width:19ch}
.wp-block-post-terms.kicker a{text-decoration:none}
.wp-block-post-content{max-width:none}
.wp-block-post-content h2{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.18;margin:34px 0 14px;letter-spacing:-.01em;max-width:62ch}
.wp-block-post-content h3{font-size:19px;font-weight:600;margin:24px 0 8px;max-width:62ch}
.wp-block-post-content p,.wp-block-post-content ul,.wp-block-post-content ol{max-width:62ch}
.wp-block-post-content blockquote{border-left:3px solid var(--red);margin:0 0 22px;padding-left:20px;font-family:var(--display);font-size:20px;max-width:60ch}
.wp-block-quote{border-left:3px solid var(--red);padding-left:20px}
.wp-block-separator{border:0;border-top:1px solid var(--rule);margin:32px 0;max-width:62ch}
.wp-block-image figcaption{font-size:14px;color:var(--soft)}
.wp-block-search__button,.wp-element-button,.wp-block-button__link{background:var(--blue);color:var(--paper);border-radius:0;font-weight:600}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--pad);top:8px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 16px}
.archive-list{list-style:none;margin:0;padding:0;max-width:62ch}
.archive-list li{border-bottom:1px solid var(--rule);padding:16px 0}
.wp-block-post-template{list-style:none;margin:0;padding:0}
.wp-block-query-pagination{margin-top:26px;font-size:15px}
.pill{display:inline-block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);border:1px solid var(--rule);padding:3px 9px;margin-right:6px}

/* ==========================================================================
   Masthead navigation, compact triage, footer
   ========================================================================== */

/* ---------- Nav: a row on desktop, a panel on phones ---------- */
.navbar{position:relative;border-top:1px solid var(--rule);display:flex;align-items:center;padding:0 var(--pad)}
.navbar .nav{display:flex;gap:24px;flex-wrap:wrap;padding:0;border-top:0;flex:1}
.nav-toggle{display:none;align-items:center;gap:11px;margin-left:auto;background:none;border:0;padding:13px 0;
  font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.nav-bars{display:block;width:20px;height:2px;background:currentColor;position:relative}
.nav-bars::before,.nav-bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor}
.nav-bars::before{top:-6px}
.nav-bars::after{top:6px}
.navbar.is-open .nav-bars{background:transparent}
.navbar.is-open .nav-bars::before{top:0;transform:rotate(45deg)}
.navbar.is-open .nav-bars::after{top:0;transform:rotate(-45deg)}

/* ---------- Triage: full labels on desktop, short ones on phones ---------- */
.triage{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.triage-links{display:flex;gap:10px;flex-wrap:wrap}
.triage-links a{background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--blue);
  padding:10px 15px;font-size:15px;line-height:1.3;text-decoration:none}
.triage-links a:hover{border-color:var(--blue)}
.t-short{display:none}

/* ---------- Footer ---------- */
.foot{border-top:3px solid var(--ink);background:var(--wash);padding:36px var(--pad) 40px;margin-top:52px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:36px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.foot-brand .wordmark{font-size:32px;line-height:1}
.foot-strap{font-family:var(--display);font-size:16.5px;line-height:1.4;color:var(--soft);margin:12px 0 0;max-width:30ch}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:28px}
.foot-col h2{font-family:var(--body);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--soft);font-weight:600;margin:0 0 13px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:9px}
.foot-col a{font-size:15px;text-decoration:none}
.foot-col a:hover{color:var(--red);text-decoration:underline}
.foot-funding{font-family:var(--display);font-size:19.5px;line-height:1.45;margin:26px 0 0;max-width:58ch}
.foot-legal{font-size:13.5px;color:var(--soft);margin:14px 0 0;max-width:72ch;line-height:1.55}

/* ---------- Phones ---------- */
@media (max-width:760px){
  .navbar{justify-content:flex-end}
  .nav-toggle{display:inline-flex}
  .navbar .nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:40;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:3px solid var(--ink);padding:4px var(--pad) 14px;
    box-shadow:0 14px 28px rgba(28,26,22,.10)}
  .navbar.is-open .nav{display:flex}
  .navbar .nav a{padding:14px 0;border-bottom:1px solid var(--rule);border-top:0;white-space:normal}
  .navbar .nav a:last-child{border-bottom:0}
  .navbar .nav a span{display:block}
  .navbar .nav a[aria-current]{border-bottom-color:var(--rule);border-left:3px solid var(--red);padding-left:13px}

  .triage{padding:13px var(--pad);gap:0}
  .triage p{width:100%;font-size:15.5px;margin:0 0 9px}
  .triage-links{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .triage-links::-webkit-scrollbar{display:none}
  .triage-links a{flex:0 0 auto;white-space:nowrap;padding:9px 14px;font-size:14.5px}
  .t-long{display:none}
  .t-short{display:inline}

  .strapline{font-size:12.5px;letter-spacing:.05em}
  .foot-top{grid-template-columns:minmax(0,1fr);gap:26px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .foot-funding{font-size:18px}
}

/* ==========================================================================
   Article layout: full-width head, reading column + sidebar
   ========================================================================== */
.article-head{margin-bottom:6px}
.article-head h1,.article-head .wp-block-post-title{max-width:none}
.article-head .byline{max-width:none}
.article-grid{gap:44px}
.article-main .sec,.article-main .answer,.article-main .dates,.article-main .steps,
.article-main .record,.article-main .yes,.article-main .method,.article-main .casebox,
.article-main .tool,.article-main .status,.article-main .share,.article-main .adslot,
.article-main .source,.article-main figure,.article-main .letter{max-width:none}
.article-main .wp-block-post-content h2,.article-main .wp-block-post-content h3,
.article-main .wp-block-post-content p,.article-main .wp-block-post-content ul,
.article-main .wp-block-post-content ol,.article-main .wp-block-post-content blockquote{max-width:none}
.article-aside>*{margin-bottom:28px}
.article-aside .adslot{margin:0 0 28px;min-height:250px;display:flex;align-items:center;justify-content:center}
.article-aside .signup h2{font-family:var(--display);font-weight:500;font-size:19px;margin:0 0 12px;
  padding-bottom:8px;border-bottom:2px solid rgba(251,247,239,.4)}
@media (max-width:781px){
  .article-grid{gap:0}
  .article-aside{margin-top:10px}
}

/* ==========================================================================
   Archive and search listings
   ========================================================================== */
.kuaf-archive-title{font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,42px);
  line-height:1.1;letter-spacing:-.015em;margin:0 0 10px;max-width:none}
.wp-block-term-description{font-family:var(--display);font-size:19px;color:var(--soft);
  max-width:60ch;margin:0 0 26px}
.archive-item{border-bottom:1px solid var(--rule);padding:22px 0;max-width:none}
.archive-item:first-child{border-top:1px solid var(--rule)}
.wp-block-query .wp-block-post-title{max-width:none;font-size:26px;line-height:1.22;margin:0 0 8px}
.wp-block-query .wp-block-post-title a{text-decoration:none}
.wp-block-query .wp-block-post-title a:hover{color:var(--red)}
.archive-item .kicker{margin-bottom:6px;font-size:14px}
.archive-item .wp-block-post-excerpt{color:var(--soft);font-size:16px;max-width:72ch}
.archive-item .wp-block-post-date{font-size:13.5px;color:var(--soft)}

/* ==========================================================================
   Sidebar that travels: contents list + ad
   ========================================================================== */
.aside-sticky{position:sticky;top:24px}
.kuaf-toc[hidden]{display:none}
.kuaf-toc h2{font-family:var(--display);font-weight:500;font-size:19px;margin:0 0 10px;
  padding-bottom:8px;border-bottom:2px solid var(--ink)}
.kuaf-toc ol{list-style:none;margin:0;padding:0}
.kuaf-toc li{border-left:2px solid var(--rule)}
.kuaf-toc a{display:block;font-size:14.5px;line-height:1.4;padding:7px 0 7px 14px;
  text-decoration:none;color:var(--soft)}
.kuaf-toc a:hover{color:var(--red)}
.kuaf-toc li.is-current{border-left-color:var(--red)}
.kuaf-toc li.is-current a{color:var(--ink);font-weight:600}
.wp-block-post-content h2{scroll-margin-top:28px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:781px){
  .kuaf-toc{display:none}
  .aside-sticky{position:static}
}

/* ==========================================================================
   The letter: how a document reads on the page
   ========================================================================== */
.letter{background:var(--paper);border:1px solid var(--ink);padding:28px 30px;margin:0 0 22px;max-width:66ch}
.letter p{margin:0 0 14px;font-size:16.5px;line-height:1.6}
.letter p:last-child{margin-bottom:0}
.letter strong{font-weight:600}


/* ==========================================================================
   Brand v1 — type roles
   ========================================================================== */
h1,h2,h3.card-h,.wp-block-post-title,.kuaf-archive-title,.bandhead h2,
.sec h2,.answer .ans-lead,.tool h2,.tool h3,.foot-strap{
  font-variation-settings:'opsz' 9,'SOFT' 0,'WONK' 1;
}
h1,.wp-block-post-title{font-weight:900}
.sec h2,.wp-block-post-content h2,.bandhead h2,.kuaf-archive-title{font-weight:900;letter-spacing:-.005em}
strong,b{font-weight:640}
/* eyebrows, labels and figures go mono */
.kicker,.lab,.strapline,.foot-col h2,.adslot,.pill,.status b,.kuaf-toc h2,
.nav a span,.byline,.assure,.source,.meta,.archive-item .wp-block-post-date{font-family:var(--mono)}
.kicker,.lab,.strapline,.foot-col h2,.status b{font-variant:normal;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:500}
.num,.dates b,.method dd,.limits dd,.rec .num,.casebox dd{font-family:var(--mono);font-weight:400}
.byline,.assure,.source{font-size:13px;letter-spacing:0}
.say{font-family:var(--body);font-weight:640;font-size:16px}
.answer p{font-family:var(--body);font-weight:640;font-size:20px;line-height:1.5}
.answer .today{font-weight:380}
.standfirst{font-family:var(--body);font-weight:380;font-size:20px}
.foot-strap{font-weight:600}

/* one accent per component; wash only for the answer + small print */
.answer{background:var(--wash);border-left:0;border-radius:2px;padding:26px 30px}
.plain{background:var(--wash);border-left:0;border-radius:2px;padding:14px 18px;color:var(--ink)}
.say{background:var(--card);border:1px solid var(--rule);border-radius:2px}
.casebox,.share,.limits{background:var(--card);border:1px solid var(--rule);border-radius:2px}
.method{border:1px solid var(--rule);border-top:2px solid var(--ink);border-radius:2px;background:var(--card)}
.dates{border-width:1px;border-radius:2px;background:var(--card)}
.letter{background:var(--card);border-radius:2px}
.status{background:var(--card);border:1px solid var(--rule);border-top:0;border-bottom:0;border-left:0;border-right:0;padding:0}
.status{border:1px solid var(--rule);border-radius:2px;padding:16px 20px;margin:0 0 34px}
.status b{color:var(--red)}
.status time{font-family:var(--mono);font-size:12px}
.adslot,.adslot-live{border-radius:2px}
.tool,.signup{background:var(--ink);border-radius:2px}
.tool .lab,.signup .lab{color:var(--paper);opacity:.7}
.tool button,.signup button,.wp-element-button,.wp-block-button__link{background:var(--red);color:var(--paper);border-radius:2px;font-weight:640}
.tool button:hover,.signup button:hover{background:var(--brick-light)}
.signup h2{border-bottom-color:rgba(250,247,240,.35)}
.triage{background:transparent;border-bottom:1px solid var(--rule)}
.triage-links a{background:var(--card);border-radius:2px;border-left-color:var(--red)}
.toolrow a{border-left-color:var(--red);border-radius:2px;background:var(--card)}
.problems a:hover{background:var(--card)}
.card,.railitem{border-radius:2px}
.rec-track,.track{border-radius:2px}
.ph{background:var(--card);border-radius:2px}
.kuaf-toc li.is-current{border-left-color:var(--red)}
.aside-sticky .adslot{background:var(--card)}
:focus-visible{outline-color:var(--red)}
.frame :focus-visible{outline-color:var(--red)}

/* ==========================================================================
   Masthead: the supplied lockup, never rebuilt in type
   ========================================================================== */
.mast-top{padding:24px var(--pad) 20px}
.lockup-link{display:block;line-height:0}
.lockup-link img,.lockup-link svg{width:min(380px,82vw);height:auto;display:block}
.foot-brand img{width:min(230px,60vw);height:auto;display:block}
.nav a.nav-start{color:var(--red)}
.nav a.nav-start b{color:var(--red);display:flex;align-items:center;gap:7px}
.nav a.nav-start .ast-mark{width:15px;height:15px;flex:0 0 auto}
.nav a.nav-start:hover b{color:var(--brick-light)}

/* ==========================================================================
   Alert band — the news notice under the masthead
   ========================================================================== */
.kuaf-alert{background:var(--red);color:var(--paper)}
.kuaf-alert a{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:11px var(--pad);text-decoration:none;color:inherit}
.kuaf-alert .lab{color:var(--paper);opacity:.8;margin:0}
.kuaf-alert .al-text{font-size:15.5px;font-weight:640}
.kuaf-alert .al-go{font-family:var(--mono);font-size:13px;margin-left:auto;white-space:nowrap;opacity:.9}
.kuaf-alert a:hover .al-text{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   /start/ tiles
   ========================================================================== */
.start-group{border:0;padding:0;margin:0 0 26px}
.start-group legend{font-family:var(--display);font-variation-settings:'opsz' 9,'SOFT' 0,'WONK' 1;font-weight:900;font-size:22px;color:var(--paper);margin:0 0 14px;padding:0;letter-spacing:-.005em}
.start-group+.start-group{margin-top:34px;padding-top:30px;border-top:1px solid rgba(250,247,240,.2)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.tile{position:relative;display:block;cursor:pointer}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile span{display:block;background:var(--card);color:var(--ink);border:1px solid var(--rule);border-radius:2px;padding:13px 15px;font-size:15px;line-height:1.35;font-weight:380}
.tile:hover span{border-color:var(--soft)}
.tile input:checked+span{background:var(--red);border-color:var(--red);color:var(--paper);font-weight:640}
.tile input:focus-visible+span{outline:2px solid var(--paper);outline-offset:2px}
.tool .tiles+.tiles{margin-top:10px}
@media (max-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.tiles{grid-template-columns:1fr}}

/* ==========================================================================
   Footer rebalance
   ========================================================================== */
.foot-top{grid-template-columns:250px minmax(0,1fr);gap:44px}
.foot-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.foot-col h2{font-size:11px}
@media (max-width:860px){
  .foot-top{grid-template-columns:minmax(0,1fr);gap:26px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.tiles-label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;opacity:.7;margin:18px 0 10px}

.start-group .tiles-label:first-of-type{margin-top:0}
.result-next{margin:16px 0 0}
.result-next a{color:var(--paper);font-weight:640;text-underline-offset:4px}
.result-next a:hover{color:var(--brick-light)}
.result-next a[hidden]{display:none}

/* Tiles: authoritative, regardless of any fallback styling on .tool */
.tool .tiles .tile span{background:var(--card);color:var(--ink);border:1px solid var(--rule)}
.tool .tiles .tile:hover span{border-color:var(--soft)}
.tool .tiles .tile input:checked+span{background:var(--red);border-color:var(--red);color:var(--paper)}

/* The router earns the full page */
.tool[data-kuaf-tool="start"]{max-width:none}

/* Status: clickable card, breathing room, and an everything mode */
.status{margin:34px 0}
a.status{display:block;text-decoration:none;transition:border-color .12s ease}
a.status:hover{border-color:var(--soft)}
a.status:hover .status-text{text-decoration:underline;text-underline-offset:3px}
.status-group{display:grid;gap:12px;max-width:none;margin:34px 0}
.status-group .status{margin:0}

/* Triage: mark the page you are on */
.triage-links a.is-here{background:var(--red);border-left-color:var(--red);color:var(--paper)}
.triage-links a.is-here:hover{background:var(--red)}

/* Full-width page template: let the writing use the room */
.page-template-page-wide .wp-block-post-title,
.page-template-page-wide .byline,
.page-template-page-wide .wp-block-post-content > p,
.page-template-page-wide .wp-block-post-content > h2,
.page-template-page-wide .wp-block-post-content > h3,
.page-template-page-wide .wp-block-post-content > ul,
.page-template-page-wide .wp-block-post-content > ol,
.page-template-page-wide .standfirst{max-width:none}

/* Route card: the secondary scheme reference link */
.result-scheme{margin:8px 0 0}
.result-scheme a{color:var(--paper);opacity:.85;font-size:15px;text-underline-offset:4px}
.result-scheme a:hover{opacity:1;color:var(--brick-light)}
.result-scheme a[hidden]{display:none}

/* Breadcrumbs */
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.crumbs a{text-decoration:none;color:inherit}
.crumbs a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-current]{color:var(--ink)}
@media (max-width:640px){.crumbs span[aria-current]{display:none}}

/* ==========================================================================
   Section landing (/complain/ and future section fronts)
   ========================================================================== */
.section-lead{display:block;background:var(--card);border:1px solid var(--rule);border-radius:2px;
  padding:28px 32px;margin:26px 0 38px;text-decoration:none;color:inherit;transition:border-color .12s ease}
.section-lead:hover{border-color:var(--soft)}
.section-lead .lab{margin-bottom:10px;display:block;color:var(--red)}
.section-lead h2{font-family:var(--display);font-variation-settings:'opsz' 9,'SOFT' 0,'WONK' 1;
  font-weight:900;font-size:clamp(24px,3vw,32px);line-height:1.12;letter-spacing:-.005em;margin:0 0 10px;max-width:none}
.section-lead p{margin:0;color:var(--soft);font-size:16.5px;max-width:70ch}
.section-lead:hover h2{color:var(--red)}
.sec-label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:var(--soft);margin:0 0 14px}
.sec-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:0 0 40px}
.sec-card{display:block;background:var(--card);border:1px solid var(--rule);border-radius:2px;
  padding:20px 22px;text-decoration:none;color:inherit;transition:border-color .12s ease}
.sec-card:hover{border-color:var(--soft)}
.sec-card h3{font-family:var(--display);font-variation-settings:'opsz' 9,'SOFT' 0,'WONK' 1;
  font-weight:900;font-size:19px;line-height:1.2;margin:0 0 8px}
.sec-card:hover h3{color:var(--red)}
.sec-card p{margin:0;color:var(--soft);font-size:15px;line-height:1.5}
.sec-card-soon{border-style:dashed}

/* Generic listings: stop centring items inside the wide column */
.wp-block-query,.wp-block-post-template{max-width:none}
.wp-block-post-template > li{max-width:none}