/*
Theme Name: ADMake
Theme URI: https://admake.com
Description: Bespoke theme for ADMake, a technology publication. Built on the ADMake Acid Frame design direction: a near-black frame in acid green holding a light reading panel, cut by a single curved seam. No parent theme, no framework, no third party fonts.
Author: Admake
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: admake
Tags: blog, news, one-column, custom-colors, custom-menu, featured-images
*/

/* ==========================================================================
   Fonts. Self hosted, never a third party request.
   ========================================================================== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/poppins-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/poppins-300-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/poppins-400-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/poppins-600-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/poppins-700-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   Tokens. Mirrors the ADMake Acid Frame design direction.
   ========================================================================== */
:root{
  --bg:#FFFFFF;
  --surface:#E6E6E6;
  --ink:#121212;
  --ink-soft:#3A3A3A;
  --muted:#6E6E6E;
  --accent:#05DC7F;
  --on-accent:#0B2C1B;
  --dark:#191919;
  --on-dark:#EDEDED;
  --line:#E1E1E1;
  --line-dark:#333333;
  --grid:#B2B2B2;
  --shot:#2C2C2C;

  --space-xs:8px;
  --space-sm:20px;
  --space-md:24px;
  --space-lg:36px;
  --space-xl:64px;

  --r-sm:7px;
  --r-md:18px;
  --r-lg:26px;
  --r-pill:999px;

  --wrap:1240px;
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* Reset kept at zero specificity so any component rule wins. */
:where(*){box-sizing:border-box}
:where(body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd){margin:0;padding:0}
:where(ul,ol){list-style:none}
:where(img,svg,video){max-width:100%;display:block}
:where(a){color:inherit;text-decoration:none}
:where(button,input,select,textarea){font:inherit;color:inherit}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.7;position:relative}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--space-sm);position:relative;z-index:1}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-sm);top:var(--space-sm);z-index:99;background:var(--accent);color:var(--on-accent);padding:10px 18px;border-radius:var(--r-sm)}
.mark{background:var(--accent);color:var(--on-accent);padding:0 .18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Faint square grid in the page gutters, fading toward the container. */
.gutters{position:fixed;inset:0;z-index:0;pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 68%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 68%,transparent 100%)}
.gutters i{position:absolute;inset:0;display:block;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='3' height='3' fill='%23B2B2B2'/%3E%3C/svg%3E");
-webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.15) calc(50% - 620px),transparent calc(50% - 620px),transparent calc(50% + 620px),rgba(0,0,0,.15) calc(50% + 620px),#000 100%);
mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.15) calc(50% - 620px),transparent calc(50% - 620px),transparent calc(50% + 620px),rgba(0,0,0,.15) calc(50% + 620px),#000 100%)}

/* ==========================================================================
   Brand
   ========================================================================== */
.brand{display:flex;align-items:center;gap:11px;transition:opacity .2s ease}
.brand:hover{opacity:.72}
.brand img{width:44px;height:44px;flex:0 0 44px;object-fit:contain}
.brand span{font-size:22px;font-weight:600;letter-spacing:-.02em}

/* ==========================================================================
   Hero. The one loud moment on the site.
   ========================================================================== */
.hero{padding:26px 0 0;position:relative;z-index:1}
.stage{max-width:var(--wrap);margin:0 auto;padding:0 var(--space-sm);container-type:inline-size}
.frame{position:relative;aspect-ratio:1200/907;background:var(--accent);border-radius:2.2cqw;overflow:hidden}
.sheet{position:absolute;inset:0}
.sheet-light{background:var(--surface);clip-path:url(#admk-panel)}
.sheet-dark{background:var(--dark);clip-path:url(#admk-dark)}

.h-brand{position:absolute;left:4.7%;top:4.7%;display:flex;align-items:center;gap:1.1cqw;transition:opacity .2s ease}
.h-brand:hover{opacity:.72}
.h-brand img{width:3.9cqw;height:3.9cqw;object-fit:contain}
.h-brand span{font-size:2.4cqw;font-weight:600;letter-spacing:-.02em;color:var(--ink)}

.h-nav{position:absolute;right:4.2%;top:3.1%;display:flex;align-items:center;gap:1.5cqw}
.h-nav a{color:var(--on-accent);font-size:1.3cqw;line-height:1.25;text-align:center;max-width:7.5cqw;font-weight:500;position:relative;padding-bottom:.5cqw}
.h-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--on-accent);transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.h-nav a:hover::after,.h-nav a:focus-visible::after,.h-nav a[aria-current]::after{transform:scaleX(1)}
.h-nav i{display:block;width:1px;height:2.6cqw;background:rgba(11,44,27,.32)}

.h-title{position:absolute;left:4.7%;top:15.3%;width:46%;font-size:4.3cqw;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.h-lede{position:absolute;left:4.7%;top:31%;width:43%;font-size:2cqw;font-weight:500;line-height:1.45;color:var(--ink-soft)}
.h-body{position:absolute;left:4.7%;top:41.7%;width:39%;font-size:1.45cqw;line-height:1.75;color:var(--muted)}

.h-search{position:absolute;left:4.7%;top:56.6%;width:45%;height:6.8%;background:#fff;border-radius:var(--r-pill);display:flex;align-items:center;padding:.6cqw}
.h-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:1.3cqw;color:var(--ink);padding-left:2cqw;-webkit-appearance:none;appearance:none}
.h-search input::placeholder{color:#9B9B9B;opacity:1}
.h-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.h-search button{width:3.6cqw;height:3.6cqw;flex:0 0 3.6cqw;border:0;padding:0;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .18s ease}
.h-search button:hover{transform:scale(1.06)}
.h-search button svg{width:1.7cqw;height:1.7cqw;fill:none;stroke:var(--on-accent);stroke-width:2.4}
.h-search:focus-within{box-shadow:0 0 0 3px rgba(5,220,127,.45)}

.h-card{position:absolute;left:60.6%;top:12.8%;width:36.1%;height:66.2%;background:var(--shot);border-radius:1.6cqw;overflow:hidden}
.h-slide{position:absolute;inset:0;background:var(--shot) center/cover no-repeat;opacity:0;transition:opacity .8s ease}
.h-slide.on{opacity:1}
.h-glass{position:absolute;left:6%;right:6%;bottom:5%;background:rgba(12,12,12,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:1.3cqw;padding:1.7cqw 1.8cqw}
.h-chip{display:inline-block;background:var(--accent);color:var(--on-accent);font-size:1.05cqw;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:.6cqw 1.5cqw;border-radius:.6cqw}
.h-ct{font-size:1.6cqw;font-weight:600;color:#fff;line-height:1.35;margin-top:1.5cqw;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.h-rule{height:1px;background:rgba(255,255,255,.28);margin:1.5cqw 0}
.h-cx{font-size:1.2cqw;font-weight:300;color:rgba(255,255,255,.82);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.h-dots{position:absolute;right:1.6cqw;top:1.6cqw;display:flex;align-items:center;gap:.6cqw;z-index:2}
.h-dots button{width:.85cqw;height:.85cqw;padding:0;border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.5);cursor:pointer;transition:width .35s ease,background .35s ease}
.h-dots button[aria-current="true"]{background:var(--accent);width:2.6cqw}

.h-live{position:absolute;left:4.7%;top:74.2%;display:flex;align-items:center;gap:1.2cqw}
.h-live span:first-child{width:1cqw;height:1cqw;border-radius:50%;background:var(--accent)}
.h-live span:last-child{font-size:3cqw;font-weight:600;letter-spacing:-.025em;color:#fff}

.h-mq{position:absolute;left:3.33%;right:3.33%;top:85.6%;height:10%;overflow:hidden;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%)}
.h-track{display:flex;gap:1.3cqw;width:max-content;height:100%;animation:admk-marquee 34s linear infinite}
.h-track:hover{animation-play-state:paused}
@keyframes admk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.h-pc{display:flex;align-items:center;gap:1cqw;width:19cqw;padding:.9cqw 1.2cqw;border:1px solid rgba(255,255,255,.16);border-radius:1.1cqw;background:rgba(255,255,255,.04)}
.h-pc b{width:3.4cqw;height:3.4cqw;flex:0 0 3.4cqw;border-radius:.7cqw;background:#3A3A3A center/cover no-repeat}
.h-pc em{font-style:normal;font-size:.85cqw;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;font-weight:600}
.h-pc span{font-size:1.1cqw;color:rgba(255,255,255,.9);line-height:1.35;font-weight:300;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{padding:var(--space-xl) 0 0}
.sec-h{font-size:30px;font-weight:700;letter-spacing:-.025em;margin-bottom:var(--space-md)}
.about{padding:74px 0 8px}
.about-eye{font-size:13px;color:var(--muted);margin-bottom:var(--space-md)}
.about-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}
.about h2{font-size:38px;font-weight:700;line-height:1.16;letter-spacing:-.03em}
.about p{font-size:15px;color:var(--muted);line-height:1.85}

/* Article cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--space-md)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
.card-media{position:relative;aspect-ratio:16/10;background:#D6D6D6;overflow:hidden}
.card-media__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chip{position:absolute;left:14px;bottom:14px;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-sm)}
.card-in{padding:20px 20px 18px;display:flex;flex-direction:column;flex:1}
.card-t{font-size:18px;font-weight:600;line-height:1.38;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-x{font-size:14px;color:var(--muted);line-height:1.7;margin-top:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.by{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:17px;border-top:1px solid var(--line)}
.by .av{width:28px;height:28px;flex:0 0 28px;border-radius:50%;object-fit:cover;background:#CFCFCF}
.by strong{font-size:13.5px;font-weight:600}
.by em{font-style:normal;font-size:13px;color:var(--muted)}

/* Ticker */
.ticker{margin-top:var(--space-xl);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;position:relative;z-index:1;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 min(60px,8%),#000 calc(100% - min(60px,8%)),transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 min(60px,8%),#000 calc(100% - min(60px,8%)),transparent 100%)}
.ticker-track{display:flex;gap:46px;width:max-content;padding:16px 0;animation:admk-marquee 46s linear infinite}
.ticker-track:hover{animation-play-state:paused}
.ticker-track a{display:flex;align-items:center;gap:14px;width:330px}
.ticker-track b{width:56px;height:42px;flex:0 0 56px;border-radius:var(--r-sm);background:#D6D6D6 center/cover no-repeat}
.ticker-track span{font-size:14.5px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Missed */
.missed{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--space-md)}
.mcard{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9.4;background:#4A4A4A center/cover no-repeat;display:flex;flex-direction:column;justify-content:space-between;padding:16px}
.mcard::before{content:"";position:absolute;inset:0;background:rgba(10,10,10,.45)}
.mcard>*{position:relative}
.mcard .chip{position:static;align-self:flex-start}
.mcard h3{font-size:16.5px;font-weight:600;color:#fff;line-height:1.35;margin-top:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard .by{border-top:0;padding-top:0;margin-top:0}
.mcard .by strong{color:#fff}
.mcard .by em{color:rgba(255,255,255,.75)}

/* Author box */
.author{margin-top:44px;background:#F2F2F2;border-radius:var(--r-lg);padding:40px;display:grid;grid-template-columns:110px 1fr;gap:32px;align-items:start}
.author .pic{width:110px;height:110px;border-radius:50%;object-fit:cover;background:#CFCFCF;flex:0 0 110px}
.author .eye{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.author h3{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:8px 0 12px}
.author p{font-size:15px;color:var(--muted);line-height:1.8;max-width:70ch}
.author a{display:inline-block;margin-top:18px;font-size:14.5px;font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:2px}

/* ==========================================================================
   Article, archive, page
   ========================================================================== */
.pagehead{padding:56px 0 0;max-width:820px}
.pagehead .eye{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.pagehead h1{font-size:44px;font-weight:700;line-height:1.14;letter-spacing:-.03em}
.pagehead p{font-size:17px;color:var(--muted);line-height:1.75;margin-top:16px}
.pagemeta{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.pagemeta b{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#CFCFCF center/cover no-repeat}
.pagemeta strong{font-size:14.5px;font-weight:600}
.pagemeta em{font-style:normal;font-size:14px;color:var(--muted)}

.hero-img{margin:32px 0 0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/8;background:#D6D6D6 center/cover no-repeat}

.prose{max-width:720px;margin:40px 0 0;font-size:17px;line-height:1.8}
.prose>*+*{margin-top:22px}
.prose h2{font-size:27px;font-weight:700;line-height:1.25;letter-spacing:-.02em;margin-top:44px}
.prose h3{font-size:20px;font-weight:600;line-height:1.35;margin-top:32px}
.prose p{color:#2A2A2A}
.prose strong{font-weight:600;color:var(--ink)}
.prose a{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:1px}
.prose a:hover{background:var(--accent);color:var(--on-accent)}
.prose ul{list-style:disc;padding-left:24px}
.prose ol{list-style:decimal;padding-left:24px}
.prose li+li{margin-top:10px}
.prose code{background:#F2F2F2;padding:2px 6px;border-radius:4px;font-size:15px}
.prose blockquote{border-left:3px solid var(--accent);border-radius:0;padding-left:20px;color:var(--muted)}
.prose img{border-radius:var(--r-md);margin:32px 0}

.pager{display:flex;gap:10px;justify-content:center;margin-top:56px}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:14.5px;font-weight:500}
.pager .page-numbers.current{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pager a.page-numbers:hover{border-color:var(--ink)}

.empty{padding:80px 0;max-width:640px}
.empty h1{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.empty p{font-size:16px;color:var(--muted);margin-top:16px}
.empty form{margin-top:28px;display:flex;gap:10px;max-width:440px}
.empty input{flex:1;height:48px;border:1px solid var(--line);border-radius:var(--r-pill);padding:0 20px;outline:0}
.empty input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(5,220,127,.35)}
.empty button{height:48px;padding:0 26px;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-weight:600;cursor:pointer}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site{margin-top:80px;background:var(--dark);color:#D9D9D9;position:relative;z-index:1}
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding:60px 0 46px}
.f-top .brand span{color:#fff}
.f-tag{font-size:14px;color:#9E9E9E;margin-top:18px;line-height:1.7}
.f-col h2{font-size:14.5px;font-weight:600;color:#fff;margin-bottom:16px}
.f-col .sp{color:var(--accent);margin-right:9px}
.f-col ul{display:flex;flex-direction:column;gap:11px}
.f-col a{font-size:14px;color:#B4B4B4}
.f-col a:hover{color:var(--accent)}
.f-bar{background:var(--accent);color:var(--on-accent);text-align:center;padding:15px 0;font-size:13.5px;font-weight:500}

/* ==========================================================================
   Small screens. The curved seam cannot survive a narrow column, so the
   hero stops being a single clipped frame and becomes stacked blocks.
   ========================================================================== */
@media (max-width:960px){
  .gutters{display:none}
  .frame{aspect-ratio:auto;background:transparent;border-radius:0;overflow:visible;display:flex;flex-direction:column;gap:14px}
  .sheet{position:static;clip-path:none!important}
  .sheet-light{display:none}
  .sheet-dark{display:none}
  .frame{padding:0}
  .h-panel-m{background:var(--surface);border-radius:var(--r-lg);padding:26px 22px;order:2}
  .h-dark-m{background:var(--dark);border-radius:var(--r-lg);padding:24px 0 26px;order:4;overflow:hidden}
  .h-brand,.h-nav,.h-title,.h-lede,.h-body,.h-search,.h-card,.h-live,.h-mq{position:static;left:auto;top:auto;right:auto;width:auto;max-width:none;height:auto}
  .h-brand{order:1;padding:0 0 18px;gap:11px}
  .h-brand img{width:40px;height:40px}
  .h-brand span{font-size:21px}
  .h-nav{order:5;display:flex;flex-wrap:wrap;gap:8px 16px;background:var(--accent);border-radius:var(--r-lg);padding:16px 20px}
  .h-nav a{font-size:14px;max-width:none;padding-bottom:2px}
  .h-nav i{display:none}
  .h-title{font-size:34px}
  .h-lede{font-size:17px;margin-top:14px}
  .h-body{font-size:15px;margin-top:14px}
  .h-search{height:52px;margin-top:22px;padding:6px}
  .h-search input{font-size:15px;padding-left:18px}
  .h-search button{width:40px;height:40px;flex:0 0 40px}
  .h-search button svg{width:18px;height:18px}
  .h-card{order:3;aspect-ratio:4/5;border-radius:var(--r-md)}
  .h-glass{padding:16px 16px}
  .h-chip{font-size:10.5px;padding:5px 11px}
  .h-ct{font-size:17px;margin-top:14px}
  .h-cx{font-size:14px}
  .h-rule{margin:14px 0}
  .h-dots{right:14px;top:14px;gap:6px}
  .h-dots button{width:8px;height:8px}
  .h-dots button[aria-current="true"]{width:24px}
  .h-live{padding:0 20px 16px}
  .h-live span:first-child{width:9px;height:9px}
  .h-live span:last-child{font-size:25px}
  .h-mq{overflow:hidden;height:auto}
  .h-track{gap:12px;animation-duration:26s}
  .h-pc{width:230px;padding:10px 12px;gap:11px}
  .h-pc b{width:38px;height:38px;flex:0 0 38px}
  .h-pc em{font-size:9.5px}
  .h-pc span{font-size:13px}

  .about-grid{grid-template-columns:1fr;gap:20px}
  .about h2{font-size:29px}
  .sec{padding:var(--space-lg) 0 0}
  .sec-h{font-size:25px}
  .pagehead h1{font-size:32px}
  .prose{font-size:16px}
  .prose h2{font-size:23px}
  .author{grid-template-columns:1fr;gap:20px;padding:26px}
  .f-top{grid-template-columns:1fr 1fr;gap:32px;padding:44px 0 34px}
}

@media (max-width:560px){
  .h-title{font-size:29px}
  .f-top{grid-template-columns:1fr;gap:28px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .h-track,.ticker-track{animation:none}
  .h-nav a::after{transition:none}
  .h-slide{transition:none}
}
/* ==========================================================================
   The featured image, now living inside the article after the second
   paragraph. It matches the prose measure instead of the full container, so
   the article reads as one column, and it is flattened to 21/9 with cover so
   the crop happens at the top and bottom rather than stretching the photo.
   ========================================================================== */
.inpost-img{margin:34px 0}
.inpost-img .inpost-media{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-md);display:block}
.inpost-img figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.6}

/* Publication and revision dates, at the end of the article rather than the
   top. A visible revision date is what tells a reader the piece is maintained. */
.postdates{max-width:720px;margin:36px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}

/* Ad blocks from Ad Inserter carry a fixed pixel width from the ad server and
   know nothing about our column, so a 336px creative inside a 300px column
   pushes the page sideways. Contain the box and centre it. */
.prose .code-block,.prose [class*="code-block-"]{max-width:100%;margin-left:auto;margin-right:auto;overflow:hidden}
.prose .code-block iframe,.prose [class*="code-block-"] iframe,.prose .code-block ins,.prose [class*="code-block-"] ins{max-width:100%}

/* ==========================================================================
   ARTICLE COLUMN, CENTRED

   The reading column is narrower than the container by design, so it has to be
   centred or it hangs off the left edge with a wide empty margin on the right.
   Listing pages keep their left edge on purpose: a centred heading sitting over
   a full width grid of cards reads as misaligned, not composed.
   ========================================================================== */
.single .pagehead,
.page .pagehead,
.single .prose,
.page .prose,
.single .postdates{margin-left:auto;margin-right:auto}
.single .author{max-width:820px;margin-left:auto;margin-right:auto}
/* The related posts heading lines up with the left edge of the cards below it,
   not with the centred reading column, because a heading floating in from the
   left of its own grid reads as a mistake. */
.single .sec-h{max-width:none;margin-left:0;margin-right:0;margin-bottom:var(--space-md)}

/* ==========================================================================
   AD BLOCK SPACING

   The Ad Manager creative arrives with min-height 580px hard coded inline, plus
   2rem of margin above and below, and then renders an ad roughly half that
   tall. The result is a long empty gap in the middle of the article. Reserve a
   sensible amount of space instead of an arbitrary one, so the layout still does
   not jump when the ad loads, and pull the margins in.
   ========================================================================== */
.prose .code-block,
.prose [class*="code-block-"]{margin-top:26px !important;margin-bottom:26px !important}
.prose .code-block [style*="min-height"]{min-height:0 !important}
.prose .code-block [style*="margin-top"]{margin-top:0 !important;margin-bottom:0 !important}
.prose .code-block > div{padding-bottom:0 !important;border-bottom:0 !important}
/* ==========================================================================
   TIGHTER ARTICLE HEADER

   The byline used to sit between the standfirst and the body, which meant the
   reader met the author before meeting the article. It now lives only in the box
   at the end, where someone who finished the piece might actually care who wrote
   it. With that row gone the two remaining gaps close to 24px, so the title,
   the standfirst and the first line of the article read as one block.
   ========================================================================== */
.single .pagehead,
.page .pagehead{padding-top:24px}
.single .pagehead p:last-child,
.page .pagehead p:last-child{margin-bottom:0}
.single .prose,
.page .prose{margin-top:24px}
/* ==========================================================================
   AD LABEL

   Advertising has to be distinguishable from editorial content, and that is a
   requirement of the ad networks as well as good manners toward the reader.

   The label is drawn with a pseudo element on the block wrapper rather than
   using the plugin's own label feature, which only renders in some alignment
   modes and was not appearing here. It also keeps the text in the theme, where
   it is visible to anyone reading the stylesheet, instead of buried in a
   serialised plugin option.
   ========================================================================== */
.prose [class*="code-block-"]::before{
  content:"Advertisements";
  display:block;
  text-align:center;
  font-size:11px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#A0A0A0;
  margin:0 0 8px;
  line-height:1.2;
}
/* Consent and opt-out row. Required reading for anyone who wants to change their
   mind about tracking, so it sits in the footer of every page rather than only
   inside the cookie policy. The first control reopens the consent banner, the
   other two are the industry opt-out pages named in that policy. */
.f-consent{border-top:1px solid var(--line-dark);padding:18px 0;text-align:center}
.f-consent .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.f-consent button,
.f-consent a{background:none;border:0;padding:0;font-size:12.5px;letter-spacing:.03em;color:#9E9E9E;cursor:pointer;font-family:inherit}
.f-consent button:hover,
.f-consent a:hover{color:var(--accent)}
.f-consent span{color:#5A5A5A;font-size:12px}
@media (max-width:960px){.f-top{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:560px){.f-top{grid-template-columns:1fr;gap:26px}}
/* Tables. Needed first by the cookie policy, which lists real cookie names and
   lifetimes instead of describing cookies in the abstract. On a narrow screen
   the figure scrolls sideways rather than squeezing four columns into 320px. */
.prose figure.wp-block-table{margin:30px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6;min-width:520px}
.prose thead th{text-align:left;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 14px 10px 0;border-bottom:2px solid var(--ink)}
.prose tbody td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody td:first-child{font-weight:500;color:var(--ink);white-space:nowrap}

/* ==========================================================================
   MOBILE SHELL

   The bar, the drawer and the search panel exist in the markup on every page
   and are hidden above the breakpoint. Keeping them in the document rather
   than printing them conditionally means one header for every viewport and no
   duplicated navigation to keep in sync.

   The panel wrapper uses display:contents on desktop so it vanishes from the
   layout and its children keep resolving against the frame exactly as before.
   ========================================================================== */
.m-bar,.m-drawer,.m-search{display:none}
.h-panel-m{display:contents}

/* ==========================================================================
   MOBILE BAR AND STACK

   Below 960px the hero stops being a composed frame and becomes a stack, and
   the order changes on purpose: the featured card comes first, because an
   image is what stops a thumb, and the headline follows it. Navigation and
   search move into a sticky bar, which is the pattern every reader already
   knows from news apps.

   Everything here lives inside the media query. Nothing in this block can
   reach the desktop layout.
   ========================================================================== */
@media (max-width:960px){
  .m-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
  .m-logo{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:600;letter-spacing:-.02em}
  .m-logo img{width:34px;height:34px;object-fit:contain}
  .m-icon{width:44px;height:44px;flex:0 0 44px;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;padding:0}
  .m-icon:active{background:#F0F0F0}
  .m-icon svg{width:21px;height:21px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
  .m-burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .18s ease}
  .m-burger span+span{margin-top:5px}
  .m-burger[aria-expanded='true'] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .m-burger[aria-expanded='true'] span:nth-child(2){opacity:0}
  .m-burger[aria-expanded='true'] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .m-drawer{display:block;max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--bg);position:sticky;top:59px;z-index:59;border-bottom:1px solid transparent}
  .m-drawer.open{max-height:360px;border-bottom-color:var(--line)}
  .m-drawer a{display:block;padding:15px 20px;font-size:16px;font-weight:500;border-bottom:1px solid var(--line)}
  .m-drawer a:last-child{border-bottom:0}
  .m-search{display:block;max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--bg)}
  .m-search.open{max-height:130px;border-bottom:1px solid var(--line)}
  .m-search form{display:flex;gap:8px;padding:14px 20px}
  .m-search input{flex:1;min-width:0;height:46px;border:1px solid var(--line);border-radius:var(--r-pill);padding:0 18px;outline:0;font-size:16px}
  .m-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(5,220,127,.35)}
  .m-search button{height:46px;padding:0 20px;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-weight:600;cursor:pointer}

  /* the desktop header and the in-hero header both step aside */
  header.wrap{display:none}
  .h-brand,.h-nav,.h-search{display:none}

  /* stack order: card, then the text panel, then the dark band */
  .hero{padding:16px 0 0}
  .h-card{order:1;aspect-ratio:4/5;border-radius:var(--r-lg)}
  .h-panel-m{display:block;order:2;background:var(--surface);border-radius:var(--r-lg);padding:24px 22px}
  .h-dark-m{order:3}
  .h-title{font-size:32px;margin:0}
  .h-lede{font-size:17px;margin-top:12px}
  .h-body{font-size:15px;margin-top:12px}
}

@media (max-width:560px){
  .h-title{font-size:28px}
  .m-logo{font-size:17px}
}

/* ==========================================================================
   MOBILE CARD FIX

   The slides are absolutely positioned with inset 0, which only fills the card
   while the card is itself a positioned element. On desktop it is absolute, so
   that worked. The mobile reset made it static, the slides started measuring
   against the frame instead, and each one grew to the full height of the hero.
   The overlay ended up hundreds of pixels below the visible card and was cut
   off by overflow hidden, which is why the card showed a photo and nothing
   else. Restoring position relative is the whole fix.

   The card also gets a wider ratio here, and the overlay drops the rule and the
   excerpt. Three lines of body copy over a photo is unreadable at this size,
   and the headline is what people tap.
   ========================================================================== */
@media (max-width:960px){
  .h-card{position:relative;order:1;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden}
  .h-slide{border-radius:inherit}
  .h-glass{left:14px;right:14px;bottom:14px;padding:14px 15px;border-radius:14px}
  .h-glass .h-rule,.h-glass .h-cx{display:none}
  .h-chip{font-size:10px;padding:5px 11px;border-radius:6px}
  .h-ct{font-size:17px;line-height:1.3;margin-top:11px}
  .h-dots{right:14px;top:14px;gap:6px}
  .h-dots button{width:8px;height:8px}
  .h-dots button[aria-current='true']{width:24px}
}

/* Publication and revision dates, at the top where a reader checking whether
   a technical guide is current will look for them. The revision date only
   prints when it differs from publication, so it means something when it is
   there. The line that used to carry these at the end of the article was
   removed, because saying the same thing twice on one page is noise. */
.pagedate{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.pagedate time{color:inherit}
.pagedate span{margin:0 4px;color:#B4B4B4}
@media (max-width:960px){.pagedate{font-size:13px;margin-top:18px;padding-top:14px}}