/* ==========================================================================
   COMPOUND — editorial wealth-building magazine
   Design language mirrors GQ: centered serif masthead, category kickers,
   serif editorial headlines, "Most Read" side rails, "Read More" bottom rails,
   clean black-on-white canvas with a single deep-green brand accent.
   (Working brand name "COMPOUND" is a placeholder — swappable site-wide.)
   ========================================================================== */

:root{
  --ink:#141414;
  --body:#26262a;
  --muted:#77767b;
  --line:#e7e5e1;
  --line-strong:#141414;
  --paper:#ffffff;
  --paper-2:#f6f4ef;        /* warm off-white bands */
  --paper-3:#111113;        /* dark bands / footer */
  --accent:#0d6a3c;         /* deep green: growth / money */
  --accent-ink:#0a5531;
  --maxw:1220px;
  --measure:700px;
  /* Typography, changed 12 August 2026.
     Playfair Display is a Didone: hairline serifs and very high stroke contrast,
     drawn for fashion mastheads. It read as cold on a site whose job is explaining
     tax patiently. Newsreader and Literata are both drawn for reading on screens
     (Literata is the Google Play Books face), which is what this site actually asks
     of a reader.
       --serif  headlines
       --sans   long-form reading text (a SERIF, despite the variable name, which is
                kept only because 4 rules and the body element reference it)
       --ui     genuine interface: form controls, buttons, nav, small caps labels.
                A serif in a number input reads oddly, so those stay in Inter. */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Literata",Georgia,"Times New Roman",serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--body);
  background:var(--paper);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Top utility bar ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar a{color:var(--muted)}
.topbar a:hover{color:var(--accent)}
.topbar__right{display:flex;gap:20px}

/* ---------- Masthead ---------- */
.masthead{text-align:center;padding:26px 24px 18px}
.logo{
  font-family:var(--serif);
  font-weight:900;
  letter-spacing:.02em;
  color:var(--ink);
  font-size:clamp(38px,7vw,72px);
  line-height:.9;
  display:inline-block;
}
.logo .dot{color:var(--accent)}
.masthead .tagline{
  margin-top:8px;
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Section nav ---------- */
.nav{
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  position:sticky;top:0;z-index:50;
  background:var(--paper);
}
.nav .container{
  display:flex;justify-content:center;gap:26px;
  height:48px;align-items:center;
  
}
.nav .container::-webkit-scrollbar{display:none}
.nav a{
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a.is-active{border-bottom-color:var(--accent);color:var(--accent-ink)}
.nav .nav__cta{color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:5px 14px}
.nav .nav__cta:hover{background:var(--accent);color:#fff}

.nav__logo{font-family:var(--serif);font-weight:900;font-size:20px;color:var(--ink)!important;letter-spacing:.01em;margin-right:auto;border-bottom:0!important;text-transform:none!important;padding:0!important}
.nav__logo .dot{color:var(--accent)}
.nav .nav__cta{margin-left:auto}
.nav__has-drop{position:relative;display:inline-flex;align-items:center}
.nav__drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line-strong);min-width:240px;padding:6px 0;display:none;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.10)}
.nav__has-drop:hover .nav__drop,.nav__has-drop:focus-within .nav__drop{display:block}
.nav__drop a{display:block;padding:9px 18px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);border-bottom:0;white-space:nowrap}
.nav__drop a:hover{background:var(--paper-2);color:var(--accent-ink)}
@media(max-width:760px){.nav .container{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}.nav__drop{display:none!important}}

.nav__burger{display:none}
.nav__panel{display:none}
@media(max-width:760px){
 .nav .container > a:not(.nav__logo):not(.nav__cta){display:none}
 .nav .container .nav__has-drop{display:none}
 /* 44x44 minimum. It was 36x34, from padding:10px 8px around three 20px bars.
    This is the primary navigation control on a phone and the most-tapped thing on
    the site, so it is the last place to be stingy with a hit area. Centring the
    bars keeps it looking identical. */
 .nav__burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;background:none;border:0;padding:12px;min-width:44px;min-height:44px;margin-left:auto;cursor:pointer}
 .nav__burger span{width:20px;height:2px;background:var(--ink);display:block}
 .nav .nav__cta{margin-left:10px}
 .nav__panel{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line-strong);padding:6px 24px 12px;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.08)}
 .nav--open .nav__panel{display:block}
 .nav__panel a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
 .nav__panel a:last-child{border-bottom:0}
}
.article__head .kicker a{color:inherit;border-bottom:1px solid transparent}
.article__head .kicker a:hover{border-bottom-color:var(--accent)}
/* ---------- Kickers / bylines ---------- */
.kicker{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 8px;
}
.byline{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.byline strong{color:var(--ink);font-weight:600}

/* ---------- Duotone "photo" placeholders ---------- */
.media{
  position:relative;background:#0d3324;overflow:hidden;
  aspect-ratio:16/10;
  background-image:
    radial-gradient(120% 120% at 15% 10%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(135deg,#0d6a3c 0%,#0a4f2e 48%,#0b2d22 100%);
}
.media::after{
  content:attr(data-label);
  position:absolute;left:14px;bottom:12px;
  font-family:var(--serif);font-weight:900;color:rgba(255,255,255,.22);
  font-size:34px;letter-spacing:.02em;
}
.media.tone-2{background-image:radial-gradient(120% 120% at 85% 10%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,#123c5a 0%,#0e2a45 100%)}
.media.tone-3{background-image:radial-gradient(120% 120% at 20% 90%,rgba(255,255,255,.14),transparent 55%),linear-gradient(135deg,#5a3312 0%,#3a2110 100%)}
.media.tone-4{background-image:radial-gradient(120% 120% at 80% 20%,rgba(255,255,255,.14),transparent 55%),linear-gradient(135deg,#3a2d5a 0%,#241a3d 100%)}
.media.tone-5{background-image:radial-gradient(120% 120% at 15% 15%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,#5a4a12 0%,#3a300b 100%)}
.media.tone-6{background-image:radial-gradient(120% 120% at 85% 85%,rgba(255,255,255,.12),transparent 55%),linear-gradient(135deg,#5a1230 0%,#3a0b20 100%)}

/* ---------- Generic card ---------- */
.card{display:block}
.card .media{margin-bottom:12px}
.card__title{
  font-family:var(--serif);font-weight:800;color:var(--ink);
  line-height:1.14;letter-spacing:-.01em;margin:0 0 8px;
  font-size:21px;
}
.card:hover .card__title{color:var(--accent-ink)}
/* Tools page only. The tools grid carries no kicker, so its titles run two points
   larger than an article card, matching the homepage tools band. Scoped to the grid
   because .card__title is shared by every article card on 23 pages. */
.grid--tools .card__title{font-size:23px}
.card__dek{font-size:14.5px;color:var(--muted);margin:0 0 10px;line-height:1.5}

/* ---------- Hero / lead ---------- */
.lead{padding:34px 0 8px;border-bottom:1px solid var(--line)}
.lead__grid{display:grid;grid-template-columns:2fr 1fr;gap:40px}
.lead__main .media{aspect-ratio:16/9;margin-bottom:18px}
.lead__kicker{color:var(--accent)}
.lead__title{
  font-family:var(--serif);font-weight:900;color:var(--ink);
  font-size:clamp(30px,4.4vw,52px);line-height:1.04;letter-spacing:-.015em;margin:0 0 14px;
}
.lead__dek{font-size:19px;color:var(--body);max-width:36em;margin:0 0 14px;line-height:1.5}
.lead__side{display:flex;flex-direction:column;gap:22px;border-left:1px solid var(--line);padding-left:32px}
.lead__side .card__title{font-size:19px}
.lead__side .card + .card{border-top:1px solid var(--line);padding-top:20px}

/* ---------- Section layout with sidebar ---------- */
.layout{display:grid;grid-template-columns:1fr 320px;gap:48px;padding:44px 0}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--line-strong);padding-bottom:10px;margin:0 0 26px;
}
.section-head h1{font-family:var(--serif);font-weight:900;color:var(--ink);margin:0;letter-spacing:-.01em}
.section-head h2{
  font-family:var(--serif);font-weight:900;font-size:26px;color:var(--ink);margin:0;letter-spacing:-.01em;
}
.section-head a{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* ---------- Most Read rail ---------- */
.aside{align-self:start;position:sticky;top:64px}
.rail + .rail{margin-top:36px}
.rail__head{
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:8px;margin:0 0 6px;
}
.most-read{list-style:none;margin:0;padding:0;counter-reset:mr}
.most-read li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);counter-increment:mr}
.most-read li::before{
  content:counter(mr);font-family:var(--serif);font-weight:900;font-size:30px;
  color:var(--line);line-height:1;min-width:32px;
}
.most-read a{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.2;color:var(--ink)}
.most-read a:hover{color:var(--accent)}
.most-read .byline{display:block;margin-top:6px}

/* rail promo (newsletter mini) */
.rail__promo{background:var(--paper-2);padding:22px;border:1px solid var(--line)}
.rail__promo h4{font-family:var(--serif);font-size:20px;margin:0 0 8px;color:var(--ink)}
.rail__promo p{font-size:14px;color:var(--muted);margin:0 0 14px}

/* ---------- Newsletter band ---------- */
.news{background:var(--paper-3);color:#fff;padding:56px 0}
.news .inner{max-width:640px;margin:0 auto;text-align:center}
.news .kicker{color:#7fd6a5}
.news h2{font-family:var(--serif);font-weight:900;font-size:clamp(26px,3.4vw,38px);margin:0 0 12px;line-height:1.08}
.news p{color:#bdbcc2;margin:0 0 22px}
.news form{display:flex;gap:10px;max-width:460px;margin:0 auto}
/* 16px, not 15px: iOS Safari zooms the whole page in when a text field with a font
   smaller than 16px receives focus, and the reader then has to pinch back out. This
   field is the newsletter signup and appears on all 55 pages. Found 18 Aug 2026 in a
   mobile sweep. The calculator inputs were already 17px and correct. */
.news input{flex:1;padding:14px 16px;border:1px solid #3a3a40;background:#1b1b1e;color:#fff;font-size:16px;border-radius:2px}
.news button{padding:14px 22px;background:var(--accent);color:#fff;border:0;font-weight:700;letter-spacing:.04em;cursor:pointer;border-radius:2px}
.news button:hover{background:#0f7d47}
.news small{display:block;margin-top:14px;color:#77767b;font-size:12px}

/* ---------- Strip (horizontal row) ---------- */
.strip{padding:44px 0;border-top:1px solid var(--line)}
.strip .grid{grid-template-columns:repeat(4,1fr);gap:26px}
.strip .card__title{font-size:18px}

/* ==========================================================================
   ARTICLE PAGE
   ========================================================================== */
.article{padding:40px 0 10px}
.article__head{max-width:820px;margin:0 auto;text-align:center}
.article__head .kicker{margin-bottom:14px}
.article__title{
  font-family:var(--serif);font-weight:900;color:var(--ink);
  font-size:clamp(32px,5vw,58px);line-height:1.03;letter-spacing:-.02em;margin:0 0 18px;
}
.article__dek{font-size:21px;color:var(--body);line-height:1.45;max-width:34em;margin:0 auto 20px}
.article__meta{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.article__hero{margin:10px 0 36px}
.article__hero{margin:0 0 26px}
.article__hero img{width:100%;height:auto;display:block;border-radius:2px}
.article__hero .media{aspect-ratio:16/9}
/* article images: natural shape (uncropped); centre focus if ever cropped */
/* Card visuals must share ONE aspect ratio or headings will not line up across a
   grid row. .media placeholders are 16/10; without a ratio here an <img> follows
   its own natural shape (a wide chart came out 2.17, sitting its heading 40px
   higher than its neighbours). height:auto is required or the width/height attrs
   would win and aspect-ratio would be ignored. */
.card-img{width:100%;height:auto;aspect-ratio:16/10;display:block;margin-bottom:12px;border-radius:2px;object-fit:cover;object-position:center}
.lead__main .card-img{margin:0 0 18px}
.article__hero figcaption{font-size:12px;color:var(--muted);text-align:center;margin-top:8px}

.article__wrap{display:grid;grid-template-columns:minmax(0,var(--measure)) 300px;gap:56px;justify-content:center}
.article__body{font-size:19px;line-height:1.72;color:#2a2a2e}
.article__body p{margin:0 0 22px}
.article__body > p:first-of-type::first-letter{
  font-family:var(--serif);font-weight:900;float:left;font-size:74px;line-height:.72;
  padding:6px 12px 0 0;color:var(--ink);
}
.article__body h2{font-family:var(--serif);font-weight:800;font-size:28px;color:var(--ink);margin:38px 0 14px;line-height:1.12}
.article__body h3{font-family:var(--sans);font-weight:700;font-size:19px;color:var(--ink);margin:28px 0 10px}
.article__body a{color:var(--accent-ink);border-bottom:1px solid rgba(13,106,60,.35)}
.article__body a:hover{border-bottom-color:var(--accent)}
.article__body ul{margin:0 0 22px;padding-left:22px}
.article__body li{margin:0 0 8px}

.pullquote{
  font-family:var(--serif);font-weight:800;font-size:27px;line-height:1.24;color:var(--ink);
  border-top:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);
  padding:22px 0;margin:34px 0;
}
.tool-callout{
  background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--accent);
  padding:22px 24px;margin:32px 0;
}
.tool-callout .kicker{margin-bottom:6px}
.tool-callout h4{font-family:var(--serif);font-size:22px;margin:0 0 6px;color:var(--ink)}
.tool-callout p{font-size:15px;color:var(--muted);margin:0 0 14px}
.btn{
  display:inline-block;background:var(--accent);color:#fff;font-weight:700;font-size:14px;
  letter-spacing:.04em;padding:11px 20px;border-radius:2px;
}
.btn:hover{background:#0f7d47;color:#fff}
/* buttons must stay white-on-green even inside prose (article/page link colours are more specific) */
.article__body a.btn,.page a.btn,.tool-callout a.btn,.capture-inline a.btn,a.btn{color:#fff;border-bottom:0}
.article__body a.btn:hover,.page a.btn:hover,a.btn:hover{color:#fff;border-bottom:0}
.article__body a.btn--ghost,.page a.btn--ghost,a.btn--ghost{color:var(--accent-ink);background:transparent}
.article__body a.btn--ghost:hover,.page a.btn--ghost:hover,a.btn--ghost:hover{color:#fff;background:var(--accent)}
.btn--ghost{background:transparent;color:var(--accent-ink);border:1px solid var(--accent)}
.btn--ghost:hover{background:var(--accent);color:#fff}

.inline-related{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:30px 0}
.inline-related .kicker{margin-bottom:4px}
.inline-related a{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink)}
.inline-related a:hover{color:var(--accent)}

/* article sidebar (sticky rails) */
.article__aside{align-self:start;position:sticky;top:64px}

/* bottom "Read More" */
.readmore{border-top:2px solid var(--line-strong);margin-top:44px;padding-top:30px}
.up-next{background:var(--paper-2);border-top:1px solid var(--line);padding:40px 0}

/* ---------- Footer ---------- */
.footer{background:var(--paper-3);color:#c7c6cc;padding:52px 0 30px;margin-top:0}
.footer__top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px;padding-bottom:36px;border-bottom:1px solid #2a2a2e}
.footer .logo{color:#fff;font-size:34px}
.footer__brand p{font-size:14px;color:#8a898f;max-width:26em;margin:14px 0 0}
.footer h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:0 0 10px}
.footer a{font-size:14px;color:#8a898f}
.footer a:hover{color:#fff}
.footer__bottom{display:flex;justify-content:space-between;padding-top:22px;font-size:12px;color:#6a696f;flex-wrap:wrap;gap:10px}
.disclaimer{max-width:var(--maxw);margin:0 auto;padding:16px 24px 0;font-size:12px;color:#6a696f;line-height:1.6}

/* ---------- Static / legal / company pages ---------- */
.page{max-width:760px;margin:0 auto;padding:48px 24px 8px}
.page .kicker{margin-bottom:10px}
.page h1{font-family:var(--serif);font-weight:900;font-size:clamp(30px,4.4vw,46px);line-height:1.06;letter-spacing:-.015em;color:var(--ink);margin:0 0 14px}
.page .lede{font-size:20px;line-height:1.5;color:var(--body);margin:0 0 10px}
.page .updated{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 30px}
.page h2{font-family:var(--serif);font-weight:800;font-size:25px;color:var(--ink);margin:34px 0 12px}
.page h3{font-weight:700;font-size:18px;color:var(--ink);margin:24px 0 8px}
.page p,.page li{font-size:17.5px;line-height:1.72;color:#2a2a2e}
.page ul{padding-left:22px;margin:0 0 20px}
.page li{margin:0 0 8px}
.page a{color:var(--accent-ink);border-bottom:1px solid rgba(13,106,60,.35)}
.page a:hover{border-bottom-color:var(--accent)}
.page .note{background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--accent);padding:16px 18px;font-size:14.5px;color:var(--muted);margin:26px 0;line-height:1.6}
.page .signoff{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

/* ---------- Calculator component ---------- */
.calc{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:26px 28px;margin:10px 0 30px}
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end}
.calc .row .field{display:flex;flex-direction:column;height:100%;margin:0 0 18px}
/* Push the spare space ABOVE the label, not between label and input. The label
   used to stretch (flex:1 0 auto), which left a one-line label floating far
   above its box whenever a neighbouring field had a two-line label + hint.
   Only ONE auto margin in the column, or the free space gets split between them. */
.calc .row .field label{margin-top:auto}
.calc .field{margin:0 0 18px}
.calc label{display:block;font-weight:600;font-size:14px;color:var(--ink);margin:0 0 8px}
.calc label .hint{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:3px}
.calc .input-money{position:relative}
.calc .input-money::before{content:"£";position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;pointer-events:none}
.calc input[type=number],.calc select{width:100%;padding:12px 14px;border:1px solid #cfcdc8;border-radius:3px;font-size:17px;font-family:var(--sans);background:#fff;color:var(--ink)}
.calc .input-money input{padding-left:26px}
.calc .input-pct{position:relative}
.calc .input-pct::after{content:"%";position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;pointer-events:none}
.calc .input-pct input{padding-right:30px}
.calc input:focus,.calc select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.calc #results,.calc [aria-live]{margin-top:6px}
.calc .headline{display:flex;flex-direction:column;gap:3px;background:var(--paper-2);border:1px solid var(--line);border-radius:3px;padding:18px 20px;margin:6px 0 16px}
.calc .headline.warn{border-left:4px solid var(--accent)}
.calc .headline > span:first-child{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.calc .headline .big{font-family:var(--serif);font-weight:900;font-size:38px;color:var(--ink);line-height:1.02}
.calc table.breakdown{width:100%;border-collapse:collapse;margin:10px 0}
.calc .breakdown td{padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:#2a2a2e}
.calc .breakdown td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.calc .breakdown tr.total td{border-top:2px solid var(--line-strong);border-bottom:0;font-weight:800;padding-top:12px;font-size:16.5px}
.calc .escape{background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:3px;padding:16px 18px;margin-top:16px;font-size:15px;line-height:1.55}
.calc .escape h3{font-family:var(--serif);font-size:19px;margin:0 0 8px;color:var(--ink)}
.calc .trap-flag{color:var(--accent-ink);font-weight:700}
.calc .disclaimer{font-size:13px;color:var(--muted);margin:12px 0 0;line-height:1.55}
.page details{border-top:1px solid var(--line);padding:13px 0}
.page details:last-of-type{border-bottom:1px solid var(--line)}
.page summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:16px}
.page details p{margin:10px 0 0;font-size:16px}
@media(max-width:560px){.calc .row{grid-template-columns:1fr}.calc{padding:22px 18px}}

.chart{margin:28px 0}
.chart svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:3px}
.chart figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}


.intro{text-align:center;max-width:720px;margin:0 auto;padding:22px 24px 2px;font-size:17px;line-height:1.55;color:var(--body)}
@media(max-width:560px){.masthead{padding:16px 20px 12px}.logo{font-size:clamp(30px,10vw,42px)}.masthead .tagline{font-size:10px;letter-spacing:.22em}.intro{font-size:15px;padding:16px 20px 2px}}


/* breadcrumbs / author box / inline capture */
.crumbs{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--accent-ink)}
.author-box{display:flex;gap:14px;align-items:flex-start;background:var(--paper-2);border:1px solid var(--line);border-radius:3px;padding:18px 20px;margin:34px 0 0}
.author-box .avatar{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:900;font-size:20px;flex:0 0 46px}
.author-box p{margin:0;font-size:14.5px;line-height:1.55;color:var(--body)}
.author-box .who{font-weight:700;color:var(--ink);font-size:15px}
.capture-inline{background:var(--paper-3);border-radius:3px;padding:22px 24px;margin:32px 0;color:#fff}
.capture-inline .kicker{color:#7fd6a5;margin-bottom:4px}
.capture-inline h4{font-family:var(--serif);font-size:21px;margin:0 0 6px;color:#fff}
.capture-inline p{font-size:14px;color:#bdbcc2;margin:0 0 14px;line-height:1.5}
.capture-inline form{display:flex;gap:8px}
/* 16px, not 14px. Same iOS zoom-on-focus defect fixed in .news input yesterday, in a
   second selector that was missed: a text field under 16px makes Safari zoom the page
   in on focus and the reader has to pinch back out. This block is on 29 pages. A sweep
   of every input rule in this file now shows 16px or 17px throughout. */
.capture-inline input{flex:1;padding:11px 14px;border:1px solid #3a3a40;background:#1b1b1e;color:#fff;font-size:16px;border-radius:2px}
.capture-inline button{padding:11px 16px;background:var(--accent);color:#fff;border:0;font-weight:700;font-size:13px;cursor:pointer;border-radius:2px;white-space:nowrap}
.capture-inline small{display:block;margin-top:8px;color:#77767b;font-size:11px}
@media(max-width:560px){.capture-inline form{flex-direction:column}}


/* polish */
.crumbs{margin-bottom:12px}
.article__meta{row-gap:6px}
.calc table.breakdown td:first-child{padding-right:12px}
.capture-inline h4{line-height:1.2}
.card__title{text-wrap:balance}
.article__title,.lead__title{text-wrap:balance}
.footer a:focus-visible,.nav a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .lead__grid{grid-template-columns:1fr;gap:26px}
  .lead__side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
  .layout{grid-template-columns:1fr;gap:40px}
  .article__wrap{grid-template-columns:1fr;gap:0}
  .article__aside{position:static;margin-top:40px;border-top:2px solid var(--line-strong);padding-top:24px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .strip .grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .grid,.grid--2,.strip .grid{grid-template-columns:1fr}
  .news form{flex-direction:column}
  .footer__top{grid-template-columns:1fr}
  .article__body{font-size:18px}
}

/* calc control sizing: inputs and selects must be identical height so rows align */
.calc input[type=number],.calc select{height:46px;min-height:46px;max-height:46px;box-sizing:border-box;line-height:normal;appearance:none;-webkit-appearance:none}
.calc select{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,#77767b 50%),linear-gradient(135deg,#77767b 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* salary link grid: equal-width, perfectly aligned tiles */
.salary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin:22px 0 8px;padding:0;list-style:none}
.salary-grid a{display:flex;align-items:center;justify-content:center;height:46px;margin:0;padding:0 8px;border:1px solid var(--accent);color:var(--accent-ink);background:transparent;font-weight:700;font-size:14px;letter-spacing:.02em;border-radius:2px;text-align:center;font-variant-numeric:tabular-nums}
.salary-grid a:hover{background:var(--accent);color:#fff}
.salary-grid a.is-current{background:var(--accent);color:#fff;cursor:default}
@media(max-width:560px){.salary-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}.salary-grid a{height:42px;font-size:13px}}

/* magazine homepage: dates, new badges, popular band, research rail */
.card-date{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.badge-new{display:inline-block;background:var(--accent);color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;padding:2px 7px;border-radius:2px;margin-right:8px;vertical-align:1px}
.popular{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0 30px;margin-top:8px}
.popular-list{list-style:none;counter-reset:pop;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px 30px}
.popular-list li{counter-increment:pop;display:flex;gap:14px;align-items:flex-start}
.popular-list li::before{content:counter(pop);font-family:var(--serif);font-weight:900;font-size:38px;line-height:.86;color:var(--accent);opacity:.32;min-width:30px}
.popular-list a{font-family:var(--serif);font-weight:700;font-size:16.5px;line-height:1.22;color:var(--ink);display:block}
.popular-list a:hover{color:var(--accent-ink)}
.popular-list .byline{display:block;margin-top:5px}
.research-rail .card{padding:14px 0;border-bottom:1px solid var(--line)}
.research-rail .card:last-child{border-bottom:0}
.research-rail .card__title{font-size:17px}
.research-rail .card__dek{font-size:13.5px;margin-bottom:4px}
@media(max-width:560px){.popular-list{grid-template-columns:1fr;gap:14px}.popular-list li::before{font-size:30px}}

/* ================= GQ-style homepage: top stories / trending / sections ================= */
.sec-block{padding:40px 0 6px}
.sec-block:first-of-type{padding-top:26px}
.sec-title{font-family:var(--serif);font-weight:900;font-size:38px;line-height:1;letter-spacing:-.015em;margin:0 0 12px}
.sec-title a{color:inherit;text-decoration:none}
.sec-title a:hover{color:var(--accent)}
.sec-rule{border:0;border-top:3px solid var(--ink);margin:0 0 28px}

/* --- Top Stories: side column | big lead | latest rail --- */
.ts-grid{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:36px}
.ts-lead__img{display:block;margin-bottom:14px}
.ts-lead__img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:2px}
.ts-lead__title{font-family:var(--serif);font-weight:900;font-size:33px;line-height:1.1;letter-spacing:-.01em;margin:6px 0 10px}
.ts-lead__title a{color:inherit;text-decoration:none}
.ts-lead__title a:hover{color:var(--accent)}
.ts-lead__dek{font-size:16.5px;color:var(--muted);line-height:1.55;margin:0 0 10px}
.ts-col>.card+.card{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.ts-col .card-img{height:auto;aspect-ratio:4/3;object-fit:cover}

/* --- The Latest rail: headline left, small square thumb right --- */
.latest-rail{list-style:none;margin:0;padding:0}
.latest-item{display:grid;grid-template-columns:1fr 84px;gap:14px;align-items:start;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.latest-item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.latest-item h4{font-size:16px;font-weight:700;line-height:1.3;margin:0 0 6px}
.latest-item h4 a{color:inherit;text-decoration:none}
.latest-item h4 a:hover{color:var(--accent)}
.latest-item img{width:84px;height:84px;object-fit:cover;border-radius:2px;display:block}
.latest-item .thumb-ph{width:84px;height:84px;border-radius:2px;background:var(--paper-2);border:1px solid var(--line)}

/* --- Trending breaker (Essential reading), small pictures --- */
.trending{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0 34px;margin-top:38px}
.trend-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 20px}
.trend-head h2{font-family:var(--serif);font-weight:900;font-size:25px;letter-spacing:-.01em;margin:0}
.trend-head a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap}
.trend-row{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.trend-card{display:block;text-decoration:none;color:inherit}
.trend-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:2px;margin-bottom:10px}
.trend-card .thumb-ph{width:100%;aspect-ratio:3/2;border-radius:2px;background:#fff;border:1px solid var(--line);margin-bottom:10px}
.trend-card h4{font-size:14.5px;font-weight:700;line-height:1.32;margin:0}
.trend-card:hover h4{color:var(--accent)}
.trend-n{font-family:var(--serif);font-weight:900;color:var(--accent);opacity:.55;margin-right:6px}

/* --- section-page CTA tile that fills a short row --- */
.more-tile{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;border:1px solid var(--line);background:var(--paper-2);border-radius:2px;padding:26px;text-decoration:none;min-height:180px}
.more-tile strong{font-family:var(--serif);font-weight:900;font-size:21px;line-height:1.15;color:var(--ink)}
.more-tile span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}
.more-tile:hover strong{color:var(--accent)}

@media(max-width:1000px){
  .ts-grid{grid-template-columns:1fr}
  .ts-lead__title{font-size:30px}
  .trend-row{grid-template-columns:repeat(2,1fr)}
  .sec-title{font-size:30px}
}

/* ---- tools band: the AI-resistant half, promoted high on the homepage ---- */
.toolsband{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:10px;padding-bottom:38px}
.toolsband__sub{color:var(--muted);margin:-14px 0 22px;font-size:16px}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tool-card{display:block;background:#fff;border:1px solid var(--line);border-radius:3px;padding:20px 22px;text-decoration:none;transition:border-color .15s,transform .15s}
.tool-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.tool-card h3{font-family:var(--serif);font-weight:800;font-size:22px;line-height:1.2;margin:0 0 8px;color:var(--ink)}
.tool-card:hover h3{color:var(--accent)}
.tool-dek{font-size:14px;color:var(--muted);line-height:1.5;margin:0}
.salary-lookup{background:#fff;border:1px solid var(--line);border-radius:3px;padding:20px 22px;margin:0 0 22px}
.salary-lookup>label{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px}
.salary-lookup__row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.salary-lookup .input-money{position:relative;flex:0 1 210px}
.salary-lookup .input-money::before{content:"£";position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;pointer-events:none}
.salary-lookup input{width:100%;height:46px;box-sizing:border-box;padding:0 12px 0 26px;font:inherit;font-size:16px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink)}
.salary-lookup button{height:46px;padding:0 22px;border:0;border-radius:2px;background:var(--accent);color:#fff;font:inherit;font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap}
.salary-lookup button:hover{background:var(--accent-ink,#0a5531)}
.salary-lookup .hint{display:block;margin-top:9px;font-size:13px;color:var(--muted)}
@media(max-width:1000px){.tools-grid{grid-template-columns:1fr}}

/* ---- on-page data animations ---- */
.data-video{margin:22px 0 8px}
.data-video video{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:3px;background:#fff}
.data-video figcaption{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}
.data-video .dl{font-size:12.5px}
.data-video .dl a{color:var(--accent);font-weight:600}


/* ---- one action bar for all calculator buttons (share image + copy link) ---- */
.calc-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
/* min-height 44px: these were 36px tall, under a comfortable tap target. Share,
   copy-link and embed are the actions a reader on a phone is most likely to want
   after getting a number, so they should not need a careful aim. */
.calc-actions button{background:transparent;border:1px solid var(--accent);color:var(--accent);
  font-family:var(--sans);font-size:13.5px;font-weight:600;padding:12px 16px;border-radius:3px;
  min-height:44px;cursor:pointer;line-height:1.2}
.calc-actions button:hover{background:var(--accent);color:#fff}
.calc-actions__note{font-size:12.5px;color:var(--muted);margin:9px 0 0;line-height:1.5}

/* ---- "Get this calculator" modal ---- */
.gc-overlay{position:fixed;inset:0;background:rgba(20,20,20,.55);z-index:900;
  display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto}
.gc-overlay[hidden]{display:none}
.gc-box{position:relative;background:var(--paper);border-radius:6px;max-width:560px;width:100%;
  padding:30px 30px 26px;box-shadow:0 18px 60px rgba(0,0,0,.25)}
.gc-close{position:absolute;top:10px;right:12px;background:none;border:0;font-size:28px;line-height:1;
  color:var(--muted);cursor:pointer;padding:4px 8px}
.gc-close:hover{color:var(--ink)}
.gc-title{font-family:var(--serif);font-weight:900;font-size:25px;line-height:1.2;margin:0 0 8px}
.gc-lede{font-size:15px;color:var(--muted);margin:0 0 20px;line-height:1.55}
.gc-step{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;margin:18px 0 10px}
.gc-step span{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.gc-code{background:#1e1e22;color:#e8e6e1;border-radius:4px;padding:14px;margin:0;
  font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;overflow-x:auto}
.gc-copy{margin-top:10px;background:var(--accent);color:#fff;border:0;border-radius:3px;
  padding:10px 18px;font:inherit;font-weight:600;font-size:14.5px;cursor:pointer}
.gc-copy:hover{opacity:.92}
.gc-hint{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0}
.gc-hint a{color:var(--accent);font-weight:600}
@media(max-width:560px){.gc-box{padding:26px 20px 22px}.gc-title{font-size:22px}}

/* widget picker on the embed page */
.picker{margin:0 0 14px}
.picker label{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.picker select{height:44px;padding:0 12px;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);width:100%;max-width:340px}

/* embed prompt on the tools hub, aimed at site owners arriving from outreach */
.gc-note{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 3px 3px 0;padding:14px 18px;font-size:15px;color:var(--ink);margin:0 0 22px;line-height:1.55}
.gc-note a{color:var(--accent);font-weight:600}

/* ---------- Editorial data tables ----------
   Article tables previously had no rules at all: the only table styling was
   scoped to .calc, so a table inside an article used browser defaults and the
   header cells ran together with no padding. Borderless, generous, one rule
   under the header, in the house style. tabular-nums keeps figures aligned
   column to column, which matters when every cell is a percentage. */
.article__body table, .page table{
  width:100%;
  border-collapse:collapse;
  margin:28px 0 12px;
  font-size:15.5px;
  line-height:1.45;
  font-variant-numeric:tabular-nums;
}
.article__body table thead th, .page table thead th{
  text-align:left;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  padding:0 20px 10px 0;
  border-bottom:2px solid var(--ink);
  white-space:nowrap;
}
.article__body table td, .page table td{
  padding:12px 20px 12px 0;
  border-bottom:1px solid var(--line);
  color:var(--body);
  vertical-align:baseline;
}
.article__body table tbody tr:last-child td, .page table tbody tr:last-child td{
  border-bottom:none;
}
/* first column is the row label: darker and never wrapped mid-figure */
.article__body table td:first-child, .page table td:first-child{
  font-weight:600;color:var(--ink);white-space:nowrap;
}
.article__body table th:last-child, .article__body table td:last-child,
.page table th:last-child, .page table td:last-child{padding-right:0}
.article__body table caption, .page table caption{
  caption-side:bottom;text-align:left;font-size:13px;color:var(--muted);padding-top:12px;
}

/* On a narrow screen a four or six column table squashes to unreadable. Let it
   scroll sideways inside its own box rather than shrink. Tested at 375px. */
@media(max-width:700px){
  .article__body table, .page table{
    display:block;overflow-x:auto;white-space:nowrap;max-width:100%;
    -webkit-overflow-scrolling:touch;font-size:14.5px;
  }
  .article__body table thead th, .page table thead th{padding-right:16px}
  .article__body table td, .page table td{padding-right:16px}
}

/* ---------- Interface type stays sans ----------
   Reading text is Literata; anything the reader operates or scans rather than reads
   stays in Inter. Added with the 12 August 2026 typeface change. */
.calc input[type=number], .calc select, .calc input[type=text],
.calc label, button, .btn, .nav a, .nav__logo, .kicker, .byline,
.badge-new, .card-date, .article__body table thead th, .page table thead th,
.updated, .crumbs, .footer, .disclaimer{
  font-family:var(--ui);
}

/* ---------- Guides index ----------
   The library front door, added 14 August 2026 with the guides/commentary split.
   18 of 19 guides are tax-year-bound reference pages rather than news, so this page
   is organised by topic and by which calculator the topic belongs to, never by date.
   Deliberately plain: it is a contents page, and its job is to let someone find the
   one guide they need without reading anything else. */
.g-topic{margin:0 0 46px}
.g-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:12px}
.g-head h2{font-family:var(--serif);font-weight:800;font-size:26px;color:var(--ink);
  margin:0;letter-spacing:-.01em}
.g-head a{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--accent);
  white-space:nowrap;border:0}
.g-promise{font-size:16px;color:var(--muted);margin:0 0 16px;max-width:60ch;line-height:1.5}

/* the calculator sits at the top of its topic, not buried under the reading */
.g-tool{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line-strong);border-left:3px solid var(--accent);
  padding:12px 16px;margin:0 0 18px;text-decoration:none;border-bottom:1px solid var(--line-strong)}
.g-tool strong{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink)}
.g-tool span{font-family:var(--ui);font-size:13px;color:var(--accent);font-weight:600}
.g-tool:hover{background:#fff}

.g-list{list-style:none;margin:0;padding:0}
.g-list li{border-bottom:1px solid var(--line)}
.g-list li:last-child{border-bottom:0}
.g-list a{display:block;padding:13px 0;text-decoration:none;border:0}
.g-list a:hover .g-title{color:var(--accent)}
.g-title{display:block;font-family:var(--serif);font-weight:700;font-size:19px;
  line-height:1.25;color:var(--ink);margin-bottom:3px}
.g-dek{display:block;font-size:15px;line-height:1.5;color:var(--muted);max-width:68ch}

@media(max-width:640px){
  /* Stack the heading and its "All <topic>" link. Side by side they share one flex row,
     and the link cannot shrink (white-space:nowrap), so a longer topic name gets squeezed
     into two lines: "Pensions & FIRE" wrapped at 375px while shorter names did not. */
  .g-head{flex-direction:column;align-items:flex-start;gap:2px}
  .g-head h2{font-size:22px}
  .g-title{font-size:17.5px}
  .g-dek{font-size:14.5px}
}

/* ---------- .page inside the article grid ----------
   The three profession reference pages carry `class="page"` on their <article> because
   .page is what supplies their typography: they have no .article__body, and every body
   rule on this site is scoped to `.page X` or `.article__body X`, so an element in
   neither inherits nothing and falls back to browser defaults.

   But .page also carries PAGE-level layout, max-width:760px and padding:48px 24px 8px,
   which is right for a standalone page and wrong inside the .article__wrap grid column.
   Measured on 18 Aug 2026 at 1280px, the two live pages were broken in different ways:
     nhs-consultant   article 700px, text line 652px (the side padding ate the column)
     headteacher      article 760px in a 700px column, overflowing it, text 712px
   Both now render a 700px text line, matching every other article on the site.

   Zeroing the layout does NOT touch typography: those rules select `.page h1`, `.page p`
   and so on, and still match. */
.article__wrap > article.page{max-width:none;margin:0;padding:0}

/* Constraining .page to its grid column (above) surfaced a second problem: the
   headteacher page's 6-column pay table wanted 713px in a 700px column and, with
   overflow visible on the article, spilled 13px into the gutter. It only fitted before
   because .page's max-width let the whole article grow to 760px, which was the actual
   bug. Trimming the cell gutter to 12px brings the table to 700px with room to spare.
   Measured across 20/16/14/12/10px: 16px still overflowed, 14px fitted exactly. */
.article__wrap > article.page table th,
.article__wrap > article.page table td{padding-right:12px}

/* ---------- wide tables must not blow out the column on a phone ----------
   Found 18 Aug 2026 at a 375px CSS viewport. The three profession reference pages carry
   5 and 6 column pay tables whose minimum content width is 564px and 673px. A grid item
   defaults to min-width:auto, so it refuses to shrink below that, and .article__wrap sets
   justify-content:center, so the oversized item was centred and spilled equally BOTH ways:
   the headteacher page started 149px to the LEFT of the viewport, which no amount of
   scrolling in a left-to-right language will ever reach.

   Measured, per page, overflow past a 375px viewport:
     headteacher       149px      average-uk-salary  95px

   min-width:0 lets the item shrink to the column; the table then scrolls inside its own
   box. Verified: article back to 327px at left 24, table scrolling internally, document
   scrollWidth equal to the viewport.

   This predates the .page rule added earlier today. Neutralising that rule made it worse,
   not better (612px wide instead of 564px), so it was never the cause. Ordinary articles
   are unaffected: they have no tables and already measured 327px with no overflow. */
.article__wrap > article,
.article__wrap > .article__body{min-width:0}

@media(max-width:640px){
  .article__wrap table{display:block;overflow-x:auto;max-width:100%}
}

/* ---------- pullquote inside a .page ----------
   `.pullquote` is declared at line 290 with font-size 27px and no scope. `.page p, .page li`
   is declared at 348 with the SAME specificity (0,1,1 vs 0,1,0 actually favours .page p) and
   later in the file, so on a .page-layout page the pullquote silently rendered at body size,
   17.5px. Articles are unaffected because `.article__body p` sits BEFORE the pullquote rule,
   so there the pullquote wins.

   Found 19 August 2026 on research-small-pension-pots, the first .page-layout page to use a
   pullquote. Restated here, after .page p, at higher specificity so order cannot decide it.
   The borders and padding are not contested and still come from .pullquote. */
.page p.pullquote{
  font-family:var(--serif);font-weight:800;font-size:27px;line-height:1.24;color:var(--ink);
  margin:34px 0;
}
/* No mobile reduction here. Articles use the unscoped .pullquote at 27px at every width,
   and dropping .page pullquotes to 22px on a phone would mean a research page and an
   article rendering the same element differently. 27px in a 327px column is arguably
   large across the whole site, but that is a site-wide decision, not a side effect of
   adding one page. */

/* ---------------------------------------------------------------------------
 * TAP TARGETS: 44px minimum on touch devices
 *
 * Measured on a real 375px frame on 23 August 2026: 12 controls on the homepage and 18
 * on the salary pages were under 44px, including the nav wordmark at 20px, the "Free
 * guide" CTA at 32px, the salary tiles at 42px and the newsletter button at 38px.
 *
 * Scoped to (pointer: coarse) rather than a width breakpoint. A touch tablet at 900px
 * needs this and a 500px browser window on a desktop does not, so width is the wrong
 * question. Desktop layout is untouched.
 *
 * TWO TECHNIQUES, chosen per element:
 *
 *   min-height, for things that are already boxes. Honest and simple; it changes the
 *   layout, which for a button is what you want.
 *
 *   vertical padding, for links inside headings and for brand marks. Hit testing uses
 *   the padding box, and on an INLINE link vertical padding does not change the line box,
 *   so the type around it does not move. On a block, a matching negative margin cancels
 *   the layout effect. (An absolutely positioned ::after overlay was tried first and did
 *   not hit-test reliably. See the note further down.)
 *
 * DELIBERATELY NOT INCLUDED: links inside a sentence, such as "Privacy" in the footer
 * small print and the salary-lookup hint. WCAG 2.5.8 exempts inline links in text, and
 * padding them out would either overlap the line above or break the line spacing. They
 * measured 17 to 19px and that is correct for what they are.
 */
@media (pointer: coarse) {

  /* Boxes: grow them. */
  .nav__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The tiles are the main way of moving between the take-home-pay pages. */
  .salary-grid a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Newsletter capture appears on nearly every page. */
  .news input, .news button,
  [data-lead] input, [data-lead] button,
  .capture-inline input, .capture-inline button {
    min-height: 44px;
  }

  /* FAQ disclosure rows on the tool and reference pages. */
  .page details summary,
  .article__body details summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Isolated links: enlarge the element's OWN padding box.
   *
   * An absolutely positioned ::after overlay was tried first and abandoned. The overlay
   * was applied and computed at 44px, but document.elementFromPoint still returned a
   * painted sibling on four of the six, and adding z-index did not change it: z-index
   * only orders within a stacking context, and these links sit in several. A thumb would
   * have missed exactly where the probe did.
   *
   * Padding is boring and works, because hit testing uses the padding box. On an INLINE
   * link vertical padding does not affect line box height, so the type around it does
   * not move. On a block or inline-block it does, so a matching negative margin cancels
   * it. Values are per element because each starts from a different height and blanket
   * padding would overshoot. */
  .trend-head a,
  .section-head a {                 /* block, 19px */
    display: block;
    padding: 13px 0;
    margin: -13px 0;
  }
  .sec-title a {                    /* inline, 30px: padding only, no layout effect */
    padding: 7px 0;
  }
  .footer .logo {                   /* inline-block, 31px */
    padding: 7px 0;
    margin: -7px 0;
  }
  .footer__bottom a,
  .footer__brand a {                /* 17px, and a row of separated links, not a sentence */
    padding: 14px 0;
  }
  .nav__logo,
  .masthead .logo {                 /* these two already reached 44 via the overlay,
                                       but padding is simpler and keeps one technique */
    display: inline-block;
    padding: 12px 0;
    margin: -12px 0;
  }
}