/* Magazine layout (opt-in via "layout": "magazine" in sites/<domain>.json). Loaded after style.css,
   only for that layout. System font stack, no external requests, works with zero JavaScript.

   Design notes (v2):
   - Type scale is a 1.25 ratio: 0.8125 / 1 / 1.25 / 1.5625 / 1.953 / 2.44 / 3.05 rem.
   - Neutrals are tinted toward the accent hue (no pure black or white text). Body text on white is >= 7:1,
     muted text >= 7:1, accent text >= 7:1, white on the accent button >= 5.5:1 (all WCAG AA or better).
   - Cards are not boxes: the cover is the card. Hover and focus are shown on the whole card via a stretched link.
   - The featured post is a split card (cover left, text right) so text never sits on an illustration.
   - Footer CTA sits inside the dark footer. No negative offsets, so it can never cover page content. */
.layout-magazine {
  --ink:#14151f; --muted:#4a4f5f; --line:#e6e7ee; --panel:#f6f6fa; --r:16px;
  --shadow:0 18px 30px -18px rgba(20,21,31,.35);
  --focus:#14151f;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.6; letter-spacing:-.003em; color:var(--ink);
}
.layout-magazine .logo text { font-family:inherit; }
/* logo lockup (sites with a "logo" block): inline mark + typeset name */
.layout-magazine .brand:has(.logo-mark) { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.logo-mark { height:32px; width:32px; flex:none; display:block; }
.logo-text { font-weight:700; font-size:1.3rem; line-height:1; letter-spacing:-.025em; white-space:nowrap; }
.mag-footer .brand:has(.logo-mark) { color:#fff; }
@media (max-width:640px) { .logo-mark { height:28px; width:28px; } .logo-text { font-size:1.15rem; } }
.layout-magazine .mag-wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.layout-magazine a:focus-visible, .layout-magazine .btn:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }
.layout-magazine .skip:focus { z-index:20; }

/* header */
.mag-header { position:sticky; top:0; z-index:5; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.mag-header-row { display:flex; align-items:center; gap:12px 32px; min-height:72px; }
.mag-header nav { display:flex; gap:4px; margin-right:auto; }
.mag-header nav a { padding:8px 14px; border-radius:8px; color:#2f3342; text-decoration:none; font-weight:600; font-size:.95rem; transition:background-color .15s ease, color .15s ease; }
.mag-header nav a:hover { background:var(--panel); color:var(--ink); }
.mag-header nav a[aria-current="page"] { background:var(--panel); color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); border-radius:8px 8px 4px 4px; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:11px 20px; border-radius:10px; font-weight:600; font-size:.95rem; text-decoration:none; border:1px solid transparent; line-height:1.2; white-space:nowrap; transition:background-color .15s ease, transform .1s ease, box-shadow .15s ease; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(20,21,31,.12); }
.btn-primary:hover { background:var(--accent-ink); }
.btn-light { background:#fff; color:var(--ink); }
.btn-light:hover { background:#ececf3; }
.btn-ghost { color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost:hover { background:rgba(255,255,255,.1); }
.mag-footer .btn:focus-visible { outline-color:#fff; }

/* intro: heading left, standfirst right on wide screens (asymmetric, not a centred stack) */
.mag-intro { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--s2) 64px; align-items:end; padding:var(--s5) 0 var(--s4); }
.layout-magazine .eyebrow { grid-column:1/-1; margin:0; color:var(--accent-ink); font-size:.8125rem; letter-spacing:.06em; }
.layout-magazine h1 { font-size:clamp(2.2rem,1.2rem + 3.4vw,3.05rem); line-height:1.08; letter-spacing:-.022em; font-weight:720; margin:0; text-wrap:balance; }
.layout-magazine .lede { font-size:1.1875rem; line-height:1.55; color:var(--muted); margin:0; max-width:34rem; padding-bottom:.35rem; }

/* featured: split card */
.featured { margin:0 0 var(--s5); }
.featured-link { position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:stretch; border:1px solid var(--line); border-radius:24px; overflow:hidden; color:var(--ink); text-decoration:none; background:#fff; transition:box-shadow .25s ease, border-color .25s ease; }
.featured-link:hover { border-color:#d3d4e0; box-shadow:var(--shadow); }
.featured-link:focus-visible { outline:3px solid var(--focus); outline-offset:4px; border-radius:24px; }
.featured-link img { position:static; width:100%; height:100%; min-height:380px; object-fit:cover; display:block; transition:transform .5s ease; transform-origin:center; }
.featured-link:hover img { transform:scale(1.02); }
.featured-shade { display:none; }
.featured-text { order:2; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:48px 48px 44px; min-height:0; max-width:none; }
.featured-link img { order:1; }
.pill { background:var(--accent-soft); color:var(--accent-ink); font-weight:700; font-size:.8125rem; padding:4px 12px; border-radius:99px; margin-bottom:var(--s3); letter-spacing:.01em; }
.featured-text h2 { margin:0 0 var(--s2); font-size:clamp(1.55rem,1rem + 1.7vw,2.05rem); line-height:1.18; letter-spacing:-.022em; font-weight:740; color:var(--ink); display:flex; gap:12px; align-items:flex-start; text-wrap:balance; }
.featured-text h2 .arrow { flex:none; margin-top:.3em; width:22px; height:22px; color:var(--accent-ink); transition:transform .2s ease; }
.featured-link:hover .arrow { transform:translate(2px,-2px); }
.featured-text > p { margin:0 0 var(--s3); color:var(--muted); font-size:1.0625rem; line-height:1.6; max-width:34rem; }

/* byline: initial mark + name + date (the mark is an organisation initial, not a person) */
.byline { display:flex; align-items:center; gap:10px; margin-top:auto; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; font-weight:700; font-size:.875rem; flex:none; }
.on-dark .avatar { background:var(--accent-soft); color:var(--accent-ink); }
.byline-text { display:flex; flex-direction:column; line-height:1.3; }
.by-name { font-weight:600; font-size:.875rem; }
.by-date { font-size:.8125rem; color:var(--muted); }
.on-dark .by-date { color:var(--muted); }
.featured .byline { margin-top:var(--s1); }

/* grid: image-led cards, whole card clickable, one line of meta */
.recent { margin:0 0 var(--s5); }
.recent > h2 { font-size:1.5625rem; line-height:1.2; letter-spacing:-.02em; font-weight:740; margin:0 0 var(--s3); }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4) 32px; }
.post-card { position:relative; display:flex; flex-direction:column; border-radius:var(--r); }
.post-card:focus-within { outline:3px solid var(--focus); outline-offset:6px; }
.post-img { display:block; border-radius:var(--r); overflow:hidden; aspect-ratio:16/9; background:var(--panel); margin-bottom:var(--s3); box-shadow:inset 0 0 0 1px rgba(20,21,31,.06); transition:box-shadow .25s ease, transform .25s ease; position:relative; }
.post-img::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(20,21,31,.07); pointer-events:none; }
.post-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.post-card:hover .post-img { transform:translateY(-3px); box-shadow:var(--shadow); }
.post-card:hover .post-img img { transform:scale(1.025); }
.post-body { display:flex; flex-direction:column; flex:1; }
.cat { margin:0 0 var(--s1); font-size:.8125rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); }
.post-card h3 { margin:0 0 var(--s1); font-size:1.25rem; line-height:1.28; letter-spacing:-.015em; font-weight:700; text-wrap:balance; }
.post-card h3 a { color:var(--ink); text-decoration:none; display:flex; justify-content:space-between; gap:12px; }
.post-card h3 a::after { content:""; position:absolute; inset:0; border-radius:var(--r); }
.post-card h3 a:focus-visible { outline:none; }
.post-card h3 a:hover span { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--accent); }
.post-card h3 .arrow { flex:none; margin-top:.2em; width:18px; height:18px; color:var(--muted); transition:transform .2s ease, color .2s ease; }
.post-card:hover h3 .arrow { transform:translate(2px,-2px); color:var(--accent-ink); }
.excerpt { margin:0 0 var(--s3); color:var(--muted); font-size:.97rem; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-card .avatar { display:none; }
.post-card .byline-text { flex-direction:row; align-items:baseline; gap:0; }
.post-card .by-name::after { content:"\00B7"; margin:0 .5em; color:var(--muted); font-weight:400; }

/* article: one reading column (about 68 characters), cover breaks out wider */
.mag-article { padding:var(--s5) 0 var(--s3); }
.art-head { max-width:700px; margin:0 auto var(--s4); text-align:left; }
.art-head h1 { font-size:clamp(2rem,1.2rem + 2.8vw,2.7rem); line-height:1.1; margin:0 0 var(--s3); }
.art-head .byline { margin-top:0; }
.art-head .meta { margin:var(--s2) 0 0; font-size:.875rem; }
.art-head .cat { margin-bottom:var(--s2); }
.art-hero { display:block; width:100%; max-width:1040px; margin:0 auto var(--s5); height:auto; border-radius:24px; aspect-ratio:1200/630; object-fit:cover; background:var(--panel); box-shadow:0 0 0 1px rgba(20,21,31,.07); }
.art-col { max-width:700px; margin:0 auto; }
.art-col .prose { max-width:none; font-size:1.0625rem; line-height:1.7; }
.art-col .prose > :first-child { margin-top:0; }
.art-col .prose p { margin:0 0 1.15em; }
.art-col .prose ul, .art-col .prose ol { margin:0 0 1.3em; padding-left:1.35em; }
.art-col .prose li { margin:.45em 0; padding-left:.2em; }
.art-col .prose li::marker { color:var(--accent-ink); }
.art-col .prose h2 { font-size:1.5625rem; line-height:1.25; letter-spacing:-.02em; font-weight:740; margin:2.4em 0 .6em; }
.art-col .prose h3 { font-size:1.25rem; line-height:1.3; margin:1.8em 0 .5em; }
.art-col .prose strong { font-weight:680; }
.art-col .prose a { text-decoration-thickness:1px; text-underline-offset:3px; }
.art-col .cta-box { border-radius:var(--r); border:1px solid var(--accent-line); padding:24px 26px; margin:var(--s5) 0 var(--s3); }
.art-col .sources { margin-top:var(--s4); padding-top:var(--s2); }
.mag-article + .related { margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--line); }

/* simple pages (about, contact, privacy, terms, 404) */
.mag-page { max-width:700px; padding-top:var(--s5); padding-bottom:var(--s5); font-size:1.0625rem; line-height:1.7; }
.mag-page h1 { font-size:clamp(2rem,1.2rem + 2.8vw,2.7rem); margin-bottom:var(--s3); }
.mag-page h2 { font-size:1.5625rem; line-height:1.25; letter-spacing:-.02em; font-weight:740; margin:2.2em 0 .6em; }
.mag-page p { margin:0 0 1.15em; }
.mag-page ul, .mag-page ol { padding-left:1.35em; }
.mag-page li { margin:.45em 0; }

/* footer: dark, CTA inside it, no overlap */
.mag-footer { margin-top:var(--s5); background:#0f1019; color:#c9ccd8; padding:var(--s5) 0 28px; }
.foot-cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s3) var(--s4); margin:0 0 var(--s5); padding:48px; background:#171926; border:1px solid #2a2d40; border-radius:24px; color:#fff; }
.foot-cta > div:first-child { flex:1 1 26rem; }
.foot-cta h2 { margin:0 0 var(--s1); font-size:clamp(1.5625rem,1rem + 1.6vw,1.95rem); line-height:1.2; letter-spacing:-.02em; font-weight:740; color:#fff; text-wrap:balance; }
.foot-cta p { margin:0; color:#c9ccd8; max-width:36rem; font-size:1.0625rem; line-height:1.55; }
.foot-btns { display:flex; flex-wrap:wrap; gap:12px; }
.foot-cols { display:grid; grid-template-columns:2fr 2fr 1fr 1fr 1fr; gap:var(--s4) 32px; padding:0 0 var(--s4); }
.foot-brand .logo { color:#fff; }
.foot-brand p { margin:var(--s2) 0 0; color:#a3a7b8; font-size:.95rem; max-width:20rem; }
.mag-footer .brand { color:#fff; }
.mag-footer nav { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.mag-footer nav h3 { margin:0 0 4px; font-size:.8125rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#a3a7b8; }
.mag-footer nav a { color:#f1f2f7; text-decoration:none; font-weight:500; font-size:.95rem; line-height:1.4; }
.mag-footer nav a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:22rem; }
.mag-footer nav a:hover { text-decoration:underline; text-underline-offset:3px; }
.mag-footer a:focus-visible { outline-color:#fff; }
.mag-footer .footer-disclosure { border-top:1px solid #272a3b; padding-top:20px; margin-top:0; }
.mag-footer .footer-disclosure p { color:#a3a7b8; font-size:.9rem; margin:0; }
.mag-footer .footer-disclosure a { color:#f1f2f7; }

@media (max-width:980px) {
  .mag-intro { grid-template-columns:1fr; gap:var(--s2); align-items:start; padding:var(--s4) 0 var(--s4); }
  .layout-magazine .lede { padding-bottom:0; }
  .featured-link { grid-template-columns:1fr; }
  .featured-link img { min-height:0; height:auto; aspect-ratio:16/9; order:1; }
  .featured-text { order:2; padding:32px; }
  .post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot-cols { grid-template-columns:1fr 1fr 1fr; }
  .foot-brand { grid-column:1/-1; }
  .foot-cta { padding:36px; }
}
@media (max-width:640px) {
  .layout-magazine { font-size:16.5px; }
  .layout-magazine .mag-wrap { padding:0 16px; }
  /* header: brand + button on one row, nav as a scrolling second row, and not sticky (saves ~100px of screen) */
  .mag-header { position:static; }
  .mag-header-row { min-height:0; padding-top:12px; padding-bottom:6px; flex-wrap:wrap; gap:8px 12px; }
  .mag-header .brand { order:1; }
  .mag-header .btn { order:2; margin-left:auto; padding:9px 14px; }
  .mag-header nav { order:3; width:100%; margin-right:0; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .mag-header nav a { padding:10px 14px; }
  .mag-intro { padding:var(--s3) 0 var(--s3); }
  .featured { margin-bottom:var(--s4); }
  .featured-link, .featured-link:focus-visible { border-radius:20px; }
  .featured-text { padding:24px 22px 26px; }
  .post-grid { grid-template-columns:1fr; gap:var(--s4); }
  .art-hero { border-radius:16px; margin-bottom:var(--s4); }
  .mag-article { padding-top:var(--s3); }
  .art-head { margin-bottom:var(--s3); }
  .mag-page { padding-top:var(--s4); }
  .mag-footer { padding-top:var(--s4); margin-top:var(--s4); }
  .foot-cta { padding:28px 22px; border-radius:20px; margin-bottom:var(--s4); }
  .foot-btns { width:100%; }
  .foot-btns .btn { flex:1 1 100%; }
  .foot-cols { grid-template-columns:1fr 1fr; }
  .recent { margin-bottom:var(--s4); }
}
@media (prefers-reduced-motion:reduce) {
  .featured-link img, .post-img, .post-img img, .arrow, .btn { transition:none; }
  .post-card:hover .post-img, .post-card:hover .post-img img, .featured-link:hover img { transform:none; }
}
.footer-note { margin-top: 6px; font-size: .8125rem; opacity: .75; }

/* screenshots (figure.shot) and the home-page demo band; used only on sites that reference screenshots */
.layout-magazine .shot { margin:1.6em 0; }
.layout-magazine .shot img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); }
.layout-magazine .shot figcaption { margin-top:8px; font-size:.875rem; line-height:1.45; color:var(--muted); }
.layout-magazine .demo-band { margin:var(--s5, 48px) 0; }
.layout-magazine .demo-band h2 { margin:0 0 .4em; font-size:clamp(1.4rem,1rem + 1.2vw,1.75rem); letter-spacing:-.02em; }
.layout-magazine .demo-band .demo-intro { max-width:40rem; margin:0 0 20px; color:var(--muted); }
.layout-magazine .demo-band .shot-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:20px; }
.layout-magazine .demo-band .shot { margin:0; }
.layout-magazine .demo-band .demo-link { margin:18px 0 0; font-weight:600; }