/* KaddieIQ News articles — 2026 design.
 *
 * Tokens from kiq-tokens.css, header/footer from kiq-chrome.css, blueprint
 * background also from kiq-chrome.css (--bp-land/--bp-port set below, same
 * mechanism as ballfit and news: the paths must be relative to this sheet,
 * since a url() inside a custom property resolves against the stylesheet
 * that consumes it, not the document).
 *
 * No hero photograph per article on purpose — eighteen articles today, more
 * every week, and a bespoke image for each isn't a sustainable ask. The
 * blueprint background plus the glass data panel below carry the visual
 * weight instead.
 */

:root{
  --ar-prose:68ch;
  --bp-land:url("../images/holes/postage-land.svg");
  --bp-port:url("../images/holes/postage-port.svg");
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--body)}

/* ---------- breadcrumb + masthead ---------- */
.ar-wrap{width:min(820px,92vw);margin:0 auto;padding:clamp(28px,5vw,56px) 0 0}
/* Same fly-out-tab clearance fix as .pg-wrap in kiq-page.css — see the
   comment there. Applies here too since every article shares this wrapper. */
@media (min-width:641px){.ar-wrap{width:min(820px,calc(100vw - 192px))}}
.ar-crumbs{margin:0 0 clamp(22px,4vw,38px);font:var(--fw-label) 13px/1.4 var(--head);color:var(--muted)}
.ar-crumbs a{color:var(--muted);text-decoration:none}
.ar-crumbs a:hover{color:var(--gold-hi)}
.ar-crumbs .sepc{margin:0 .5em;opacity:.6}
.ar-crumbs span[aria-current]{color:var(--soft)}

.ar-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;margin:0 0 .9em;
  font:var(--fw-label) 12px/1.4 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ar-kicker .dot{opacity:.6}
.ar-kicker .muted{color:var(--muted);letter-spacing:.06em;text-transform:none}

h1.ar-title{margin:0 0 .4em;font:var(--fw-display) clamp(28px,4.4vw,46px)/1.14 var(--head);letter-spacing:-.015em}
.ar-dek{margin:0;font:var(--fw-body) clamp(17px,2vw,20px)/1.55 var(--body);color:var(--soft)}

.ar-byline{display:flex;flex-wrap:wrap;gap:.6em;align-items:baseline;margin:clamp(20px,3vw,28px) 0;
  padding-bottom:clamp(20px,3vw,28px);border-bottom:1px solid var(--rule);
  font:var(--fw-label) 13px/1.4 var(--head);color:var(--muted)}
.ar-byline strong{color:var(--ink);font-weight:var(--fw-title)}
.ar-byline .sepc{opacity:.6}

/* ---------- Frank's audio player ---------- */
/* Same glass panel family as .ar-verified below (translucent --surface,
   blurred/saturated) so it reads as part of the same system, not a bolted-on
   widget. JS in kiq-listen.js; degrades to a plain, silent <audio> control
   with the browser's own UI if the script never runs. */
.ar-listen{margin:1.8em 0;padding:16px 20px;border:1px solid var(--hair);border-radius:var(--r,14px);
  background:linear-gradient(165deg,color-mix(in srgb,var(--ink) 5%,var(--surface)) 0%,var(--surface) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent),0 18px 34px -22px rgba(0,0,0,.4)}
.ar-listen-label{display:flex;align-items:center;gap:.5em;margin:0 0 12px;
  font:var(--fw-label) 12px/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.ar-listen-ui{display:flex;align-items:center;gap:14px}
.ar-listen-play{flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--gold-fill);color:var(--on-gold);
  transition:background-color .2s ease,transform .2s ease}
.ar-listen-play:hover{background:var(--gold-hi)}
.ar-listen-play:active{transform:scale(.94)}
.ar-listen-play:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ar-listen-play svg{width:18px;height:18px;fill:currentColor}
.ar-listen-play .i-pause{display:none}
.ar-listen.playing .ar-listen-play .i-play{display:none}
.ar-listen.playing .ar-listen-play .i-pause{display:block}
.ar-listen-track{flex:1;min-width:0}
.ar-listen-bar{position:relative;height:5px;border-radius:999px;background:var(--rule);cursor:pointer;margin-bottom:8px}
.ar-listen-fill{position:absolute;inset:0 auto 0 0;width:0%;border-radius:999px;background:var(--gold-fill)}
.ar-listen-handle{position:absolute;top:50%;left:0%;width:12px;height:12px;border-radius:50%;
  background:var(--gold-hi);box-shadow:0 0 0 2px var(--bg);transform:translate(-50%,-50%)}
.ar-listen-bar:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.ar-listen-time{font:var(--fw-label) 12px/1 var(--head);color:var(--muted)}

/* ---------- pull quote ---------- */
.ar-pullquote{margin:2em 0;padding:0 0 0 20px;border-left:3px solid var(--gold)}
.ar-pullquote p{margin:0;font:italic var(--fw-title) clamp(19px,2.4vw,23px)/1.5 var(--head);color:var(--ink)}

/* ---------- body copy ---------- */
.ar-body{max-width:var(--ar-prose)}
.ar-lede{font:var(--fw-body) 19px/1.65 var(--body);color:var(--soft);margin:0 0 1.3em}
.ar-body h2{margin:1.6em 0 .6em;font:var(--fw-title) clamp(20px,2.4vw,25px)/1.3 var(--head);letter-spacing:-.01em;color:var(--ink)}
.ar-body h3{margin:1.3em 0 .5em;font:var(--fw-title) clamp(17px,2vw,19px)/1.35 var(--head);letter-spacing:-.005em;color:var(--ink)}
.ar-body p{margin:0 0 1.2em;color:var(--ink)}
.ar-body a{color:var(--gold-hi);text-underline-offset:3px}
.ar-body a:hover{color:var(--gold)}

/* A bare source note — the same small, muted citation .ar-source gives a
   Verified Data panel, for the rare case (a comparison table, say) where a
   figure needs sourcing outside one. */
.ar-body p.source-note{font-size:13px;color:var(--muted)}
.ar-body p.source-note a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.ar-body p.source-note a:hover{color:var(--gold-hi)}

/* Occasional comparison table (e.g. seasonal yardage loss) — themed to
   match the rest of the article rather than left at browser defaults. */
.ar-body table{width:100%;margin:0 0 1.2em;border-collapse:collapse;font-size:14px}
.ar-body th,.ar-body td{padding:.6em .8em;text-align:left;border-bottom:1px solid var(--rule)}
.ar-body th{font:var(--fw-title) 12px/1.3 var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ar-body td{color:var(--ink)}
.ar-body td.g{color:var(--wm);font-weight:var(--fw-title)}

/* ---------- verified-data glass panel ---------- */
/* Same glass recipe as the News carousel cards: translucent --surface,
   blurred and saturated so the blueprint behind still reads through, a
   hairline border and an inset top highlight. */
.ar-verified{margin:1.8em 0;padding:20px;border:1px solid var(--hair);border-radius:var(--r,14px);
  background:linear-gradient(165deg,color-mix(in srgb,var(--ink) 5%,var(--surface)) 0%,var(--surface) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent),0 18px 34px -22px rgba(0,0,0,.4)}
.ar-verified-head{display:flex;align-items:center;gap:8px;margin:0 0 16px}
.ar-verified-head img{width:22px;height:22px}
.ar-verified-head span{font:var(--fw-label) 12px/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.ar-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin:0 0 14px}
.ar-stat-n{font:var(--fw-display) clamp(20px,2.6vw,26px)/1.1 var(--head);color:var(--ink)}
.ar-stat-l{margin-top:.35em;font:var(--fw-body) 13px/1.4 var(--body);color:var(--muted)}
.ar-source{margin:0;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}
.ar-source a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.ar-source a:hover{color:var(--gold-hi)}

/* Currency footnote: a $ figure gets an asterisk and its £ equivalent
   wherever it appears, and one explanation of both, sitting with the
   panel's own sourcing since that is where a reader already looks for
   caveats on a number. */
.ar-fn-mark{color:var(--gold);font-size:.75em}
.ar-stat-fx{font-size:.5em;font-weight:var(--fw-body);color:var(--muted);vertical-align:middle;margin-left:.3em}
.ar-price-note{margin:.6em 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.ar-price-note .ar-fn-mark{margin-right:.15em}

/* ---------- CTA panel ---------- */
/* Same glass base, permanently gold-tinted rather than only on hover — this
   is the one place on an article meant to be noticed, not blended in. */
.ar-cta{display:block;margin:2em 0;padding:22px;border:1px solid var(--gold);border-radius:var(--r,14px);
  background:linear-gradient(165deg,color-mix(in srgb,var(--gold) 16%,var(--surface)) 0%,color-mix(in srgb,var(--gold) 7%,var(--surface)) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.ar-cta-kicker{margin:0 0 .5em;font:var(--fw-label) 12px/1.4 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi)}
.ar-cta-copy{margin:0 0 1em;color:var(--ink)}
.ar-cta-copy strong{color:var(--gold-hi)}
.ar-cta-links{display:flex;flex-wrap:wrap;gap:.4em 1.2em;align-items:center}
.ar-cta-links a{color:var(--gold-hi);font:var(--fw-title) 15px/1 var(--head);text-decoration:none}
.ar-cta-links a:first-child{color:var(--on-gold);background:var(--gold-fill);padding:.75em 1.2em;border-radius:2px}
.ar-cta-links a:first-child:hover{background:var(--gold-hi)}
.ar-cta-links a:not(:first-child):hover{color:var(--gold)}

/* ---------- next tease ---------- */
.ar-next{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2em 0 0;
  padding:18px 20px;border:1px solid var(--rule);border-radius:var(--r,14px);
  text-decoration:none;color:inherit;transition:border-color .2s ease,background-color .2s ease}
.ar-next:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.ar-next-label{font:var(--fw-label) 11px/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ar-next-title{margin-top:.25em;font:var(--fw-title) 16px/1.3 var(--head);color:var(--ink)}
.ar-next-arrow{font-size:20px;color:var(--gold);flex:none}
.ar-next:hover .ar-next-arrow{color:var(--gold-hi)}

/* ---------- verified data, explained ---------- */
/* A standing statement, identical on every article — not the specific
   figures (that's .ar-verified above), but what the badge promises. Same
   glass family as the data panel it explains, deliberately quieter: no gold
   border, this isn't asking for a click. */
.ar-integrity{display:flex;gap:16px;align-items:flex-start;margin:2.2em 0 0;padding:20px;
  border:1px solid var(--rule);border-radius:var(--r,14px);
  background:linear-gradient(165deg,color-mix(in srgb,var(--ink) 4%,var(--surface)) 0%,var(--surface) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}
.ar-integrity img{width:26px;height:26px;flex:none;margin-top:.15em}
.ar-integrity-kicker{margin:0 0 .5em;font:var(--fw-label) 12px/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.ar-integrity p{margin:0;font-size:14px;line-height:1.65;color:var(--soft)}
.ar-integrity a{color:var(--soft);text-decoration:underline;text-underline-offset:2px}
.ar-integrity a:hover{color:var(--gold-hi)}

/* ---------- tags + close ---------- */
.ar-tags{display:flex;flex-wrap:wrap;gap:8px;margin:2.2em 0 0;padding-top:1.6em;border-top:1px solid var(--rule)}
.ar-tag{padding:.4em .9em;border:1px solid var(--rule);border-radius:999px;font:var(--fw-label) 12px/1 var(--head);
  letter-spacing:.03em;color:var(--muted);transition:border-color .2s ease,color .2s ease}
.ar-tag:hover{border-color:var(--gold);color:var(--gold-hi)}
.ar-contact{margin:1.2em 0 0;font-size:14px;color:var(--muted)}
.ar-contact a{color:var(--muted)}
.ar-contact a:hover{color:var(--gold-hi)}

main{padding-bottom:clamp(40px,6vw,72px)}

@media (max-width:560px){
  .ar-stats{grid-template-columns:1fr 1fr}
}