:root{--paper:#f4f1e9;--paper-2:#e9e5da;--ink:#151713;--muted:#65675f;--blue:#1f5cff;--line:rgba(21,23,19,.16);--green:#1f9d62;--container:min(1240px,calc(100% - 48px))}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Manrope",sans-serif;overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.skip-link{position:fixed;top:-50px;left:20px;z-index:100;background:var(--ink);color:#fff;padding:12px}.skip-link:focus{top:20px}a{color:inherit;text-decoration:none}button{font:inherit}:focus-visible{outline:3px solid #f3a51b;outline-offset:4px}.site-header{width:var(--container);height:86px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:30;position:relative}.brand{display:inline-flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:800;letter-spacing:-.04em}.brand img{width:23px;height:32px;object-fit:contain}.desktop-nav{display:flex;gap:28px;font-size:.82rem;font-weight:600}.desktop-nav a:hover,.desktop-nav .active{color:var(--blue)}.nav-actions{display:flex;justify-content:flex-end;align-items:center;gap:20px;font-size:.82rem;font-weight:600}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:var(--blue);color:#fff;border:1px solid var(--blue);padding:15px 20px;font-size:.82rem;font-weight:700;transition:.2s}.button-small{padding:11px 16px}.button:hover{transform:translateY(-2px)}.button:active{transform:scale(.97)}.button-light{background:#fff;color:var(--ink);border-color:#fff}.menu-button,.mobile-menu{display:none}h1,h2,h3{font-family:"Newsreader",serif;font-weight:600;letter-spacing:-.055em;margin:0;text-wrap:balance}.article-hero{width:var(--container);margin:auto;padding:55px 0 85px}.issue-line{display:grid;grid-template-columns:1fr auto 1fr;border-block:1px solid var(--ink);padding:12px 0;font:500 .58rem "DM Mono",monospace}.issue-line span:last-child{text-align:right}.hero-grid{display:grid;grid-template-columns:1fr 3fr;gap:7%;align-items:start;padding-top:70px}.hero-side>span,.section-number,.related header>span,.article-cta>span{font:500 .6rem "DM Mono",monospace;color:var(--blue)}.hero-side p{max-width:230px;color:var(--muted);font-size:.76rem;line-height:1.7;margin-top:25px}.article-hero h1{font-size:clamp(4.5rem,8vw,8.7rem);line-height:.79}.article-hero h1 em,.related h2 em{color:var(--blue);font-weight:500}.deck{max-width:720px;color:var(--muted);font-size:1.05rem;line-height:1.7;margin:38px 0 28px}.byline{display:flex;gap:25px;border-top:1px solid var(--line);padding-top:16px;font:500 .58rem "DM Mono",monospace;color:var(--muted)}.hero-art{height:690px;margin:0;position:relative;overflow:hidden;background:var(--blue);color:#fff;padding:max(28px,calc((100% - 1240px)/2));display:flex;align-items:center}.art-grid{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:60px 60px}.art-index{position:absolute;left:max(24px,calc((100% - 1240px)/2));top:35px;font:500 .61rem "DM Mono",monospace}.number-slip{position:relative;z-index:1;background:var(--paper);color:var(--ink);width:min(560px,55%);padding:38px;transform:rotate(-4deg);box-shadow:20px 25px 0 rgba(21,23,19,.25)}.number-slip small,.number-slip div{font:500 .6rem "DM Mono",monospace}.number-slip strong{display:block;font:500 clamp(3rem,6vw,6rem)/.95 "DM Mono",monospace;margin:45px 0}.number-slip div{display:flex;justify-content:space-between}.number-slip b{color:var(--green)}.sms-slip{position:absolute;z-index:2;right:10%;bottom:15%;background:var(--ink);padding:24px;width:310px;transform:rotate(3deg);box-shadow:12px 15px 0 rgba(21,23,19,.2)}.sms-slip span{font:500 .58rem "DM Mono",monospace;color:#aeb3aa}.sms-slip p{font-size:.72rem}.sms-slip strong{font:500 2.2rem "DM Mono",monospace;letter-spacing:.12em}.hero-art figcaption{position:absolute;bottom:18px;right:max(24px,calc((100% - 1240px)/2));font:400 .52rem "DM Mono",monospace;color:rgba(255,255,255,.6)}.article-layout{width:var(--container);margin:auto;display:grid;grid-template-columns:250px minmax(0,720px);gap:11%;justify-content:center;padding:120px 0}.contents{position:sticky;top:25px;height:max-content;border-top:2px solid var(--ink);padding-top:18px}.contents>span,.share>span{font:500 .58rem "DM Mono",monospace;color:var(--blue)}.contents nav{display:flex;flex-direction:column;margin:18px 0 50px}.contents nav a{font-size:.72rem;color:var(--muted);padding:10px 0;border-bottom:1px solid var(--line)}.contents nav a:hover{color:var(--blue)}.share{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:.68rem;flex-wrap:wrap}
.share-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.share-actions a,.share-copy{color:var(--blue,#2459e8);font-weight:700;text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.share-actions a:hover,.share-copy:hover{text-decoration:underline}
.share-copy.copied{color:var(--green,#17875a)}.standfirst{font:500 1.35rem/1.6 "Newsreader",serif;margin:0 0 100px}.article-body section{scroll-margin-top:30px;margin-bottom:105px}.article-body h2{font-size:clamp(2.8rem,5vw,4.5rem);line-height:.92;margin:24px 0 28px}.article-body p,.article-body li{color:#50524c;font-size:.94rem;line-height:1.85}.article-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}.callout{border-left:5px solid var(--blue);background:var(--paper-2);padding:25px 28px;margin:38px 0}.callout span{font:500 .58rem "DM Mono",monospace;color:var(--blue)}.callout p{font:500 1.2rem/1.5 "Newsreader",serif;color:var(--ink);margin:10px 0 0}.steps{list-style:none;padding:0;border-top:2px solid var(--ink)}.steps li{display:grid;grid-template-columns:55px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}.steps li>span{font:500 .62rem "DM Mono",monospace;color:var(--blue)}.steps h3{font-size:1.5rem}.steps p{margin-bottom:0}.fact-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);margin-top:40px}.fact-row div{padding:23px;border-right:1px solid var(--ink)}.fact-row div:last-child{border:0}.fact-row strong{display:block;font:600 2rem "Newsreader",serif}.fact-row span{font:500 .52rem "DM Mono",monospace;color:var(--muted)}.comparison{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);margin:35px 0}.comparison>div{padding:28px}.comparison>div+div{background:var(--blue);color:#fff}.comparison>div>span{font:500 .55rem "DM Mono",monospace}.comparison h3{font-size:1.6rem;margin:18px 0}.comparison>div+div p,.comparison>div+div li{color:rgba(255,255,255,.74)}.comparison ul{padding-left:18px}.mistakes{list-style:none;padding:0;border-top:2px solid var(--ink)}.mistakes li{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;padding:25px 0;border-bottom:1px solid var(--line)}.mistakes b{color:var(--ink)}.article-faq{border-top:2px solid var(--ink);padding-top:25px}.article-faq details{border-bottom:1px solid var(--line)}.article-faq summary{list-style:none;display:flex;justify-content:space-between;padding:22px 0;font-weight:700;cursor:pointer}.article-faq summary::-webkit-details-marker{display:none}.article-faq summary i{font-style:normal;font-size:1.2rem}.article-faq details[open] summary i{transform:rotate(45deg)}.article-faq details p{padding:0 30px 20px 0}.article-cta{background:var(--blue);color:#fff;padding:45px;margin-bottom:0!important}.article-cta>span{color:#e5ff44}.article-cta h2{font-size:3.6rem}.article-cta p{color:rgba(255,255,255,.7);max-width:500px}.article-cta .button{margin-top:20px;text-decoration:none}.related{background:var(--paper-2);padding:110px max(24px,calc((100% - 1240px)/2))}.related header{display:grid;grid-template-columns:1fr 2fr;gap:8%;margin-bottom:60px}.related h2{font-size:5rem;line-height:.85}.related>div{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink)}.related>div>a{position:relative;padding:35px;border-bottom:1px solid var(--ink)}.related>div>a:first-child{border-right:1px solid var(--ink)}.related>div span{font:500 .55rem "DM Mono",monospace;color:var(--blue)}.related h3{font-size:2rem;margin-top:45px;max-width:430px}.related i{position:absolute;right:25px;top:30px;color:var(--blue);font-style:normal}footer{background:#10120f;color:#fff;padding:80px max(24px,calc((100% - 1240px)/2)) 25px}.footer-main{display:grid;grid-template-columns:1.3fr 1fr;gap:12%;padding-bottom:80px}.footer-brand p{max-width:350px;color:rgba(255,255,255,.5);font-size:.78rem;line-height:1.7}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.footer-links div{display:flex;flex-direction:column;gap:13px}.footer-links b{font:500 .6rem "DM Mono",monospace;color:#e5ff44}.footer-links a{font-size:.75rem;color:rgba(255,255,255,.62)}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:24px;display:flex;justify-content:space-between;font:400 .56rem "DM Mono",monospace;color:rgba(255,255,255,.45)}.footer-bottom strong{color:#fff}@media(max-width:900px){:root{--container:calc(100% - 34px)}.desktop-nav,.nav-actions .login,.nav-actions .button{display:none}.site-header{height:72px;grid-template-columns:1fr auto}.menu-button{display:flex;width:42px;height:42px;border:1px solid var(--line);background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:6px}.menu-button span{width:17px;height:1.5px;background:var(--ink)}.menu-button.active span:first-child{transform:translateY(3.75px) rotate(45deg)}.menu-button.active span:last-child{transform:translateY(-3.75px) rotate(-45deg)}.mobile-menu{display:flex;position:fixed;z-index:25;inset:72px 0 auto;background:var(--paper);padding:20px 17px 30px;flex-direction:column;transform:translateY(-120%);transition:.3s}.mobile-menu.open{transform:none}.mobile-menu a{padding:14px;border-bottom:1px solid var(--line);font-weight:600}.hero-grid{grid-template-columns:1fr}.hero-side{margin-bottom:35px}.hero-art{height:580px}.article-layout{grid-template-columns:1fr}.contents{position:static;margin-bottom:65px}.contents nav{display:grid;grid-template-columns:1fr 1fr}.related header{grid-template-columns:1fr}.related h2{margin-top:25px}}@media(max-width:620px){.article-hero h1{font-size:4.2rem}.issue-line{grid-template-columns:1fr 1fr}.issue-line span:last-child{display:none}.byline{flex-wrap:wrap}.hero-art{height:500px}.number-slip{width:85%;padding:25px}.sms-slip{width:240px;right:4%}.article-layout{padding:80px 0}.standfirst{margin-bottom:75px}.fact-row{grid-template-columns:1fr}.fact-row div{border-right:0;border-bottom:1px solid var(--ink)}.comparison{grid-template-columns:1fr}.mistakes li{grid-template-columns:1fr}.article-cta{padding:30px}.article-cta h2{font-size:3rem}.related h2{font-size:4rem}.related>div{grid-template-columns:1fr}.related>div>a:first-child{border-right:0}.footer-main{grid-template-columns:1fr}.footer-links{margin-top:45px;grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;gap:12px}.footer-bottom strong{order:-1}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* ── Percentage row-gap fix ───────────────────────────────────────────────
   These grids use shorthand `gap:N%`, which sets a percentage ROW gap as well
   as the intended column gap. Chrome resolves a percentage row-gap against the
   container's own content height but does NOT count it when sizing that
   container, so once the grid collapses to a single column the second row is
   pushed clean out of its parent — on the article page that put the whole body
   544px past `.article-layout`, and `.related` then rendered on top of it.
   Zeroing the row gap keeps the percentage column gap exactly as designed;
   stacked spacing is already handled by the margins in the design's own
   mobile rules (.contents margin-bottom, .demo-wrap margin-top, etc.). */
.hero-grid,.article-layout,.related header,.footer-main{row-gap:0}

/* ── Additions for the live template ──────────────────────────────────────
   Markup the static mockup had no equivalent for: a real breadcrumb trail, an
   uploaded featured image, the sidebar service CTA, and the <article> wrapper
   now required around each related-post card. */

/* Breadcrumb — sits above the issue line, same mono treatment. */
.breadcrumb{width:var(--container);margin:0 auto;padding-top:26px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;font:500 .58rem "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.breadcrumb li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.breadcrumb li+li:before{content:"/";color:var(--line)}
.breadcrumb a{color:var(--blue)}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb li:last-child span{color:var(--muted);max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Featured image replaces the CSS-drawn illustration when a post has one. */
.hero-art.has-image{display:block;padding:0;background:var(--paper-2)}
.hero-art.has-image img{width:100%;height:100%;object-fit:cover;display:block}
.hero-art.has-image figcaption{background:rgba(16,18,15,.72);padding:6px 10px}

/* Sidebar service CTA, under the contents list. */
.side-cta{background:var(--ink);color:#fff;padding:24px;margin-bottom:45px}
.side-cta>span{font:500 .55rem "DM Mono",monospace;color:#e5ff44;letter-spacing:.08em}
.side-cta h2{font:600 1.5rem/1.05 "Newsreader",serif;letter-spacing:-.03em;margin:14px 0 10px;color:#fff}
.side-cta p{font-size:.76rem;line-height:1.65;color:rgba(255,255,255,.68);margin:0 0 18px}
.side-cta a{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.22);padding-top:14px;font-size:.72rem;font-weight:700;color:#fff}
.side-cta a:hover{color:#e5ff44}

/* Related cards are wrapped in <article> for semantics; move the card framing
   onto the wrapper so the anchor keeps filling it. */
.related>div>article{position:relative;border-bottom:1px solid var(--ink)}
.related>div>article:first-child{border-right:1px solid var(--ink)}
.related>div>article>a{display:block;position:relative;padding:35px;height:100%}

@media(max-width:620px){
  .related>div>article:first-child{border-right:0}
  .side-cta{margin-bottom:35px}
}