:root{--font-ui:Inter,"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif;--font-display:"Arial Narrow","Roboto Condensed","Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-reading:ui-serif,Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,"Times New Roman",serif;--tech-line:color-mix(in srgb,var(--line) 82%,transparent)}
body{font-family:var(--font-ui)}

/* Native text masthead: crisp at every device pixel ratio. */
.brand{position:relative;display:inline-flex;align-items:center;white-space:nowrap;color:var(--ink);text-decoration:none;line-height:1}
.brand-text{gap:.13em;font-family:var(--font-ui);font-weight:900;letter-spacing:-.065em}
.brand-name{font-size:clamp(2.05rem,4.8vw,3.85rem);line-height:.86}
.brand-domain{display:inline-flex;align-items:center;justify-content:center;padding:.28em .36em .24em;border-radius:.34em;background:var(--accent);color:#fff;font-size:clamp(.92rem,2vw,1.55rem);font-weight:900;letter-spacing:-.07em;line-height:1}
.brand:after{content:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Display language: tech-forward sans. Long-form reading stays editorial. */
.lead-copy h1,.section-heading h2,.page-header h1,.story-card h3,.listing-card h2,.article-header h1,.latest-card h3,.section-feature h3,.rail-story h3,.spotlight-result strong,.menu-head strong,.footer-row strong{font-family:var(--font-display);font-weight:800;letter-spacing:-.028em}
.lead-copy h1,.article-header h1{font-weight:820;letter-spacing:-.038em}
.brand-note,.article-deck,.article-body,.feature-summary,.cookie-copy strong{font-family:var(--font-reading)}
.article-body{font-size:1.13rem;line-height:1.74}.article-body h2,.article-body h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em}

/* Interface labels use wider tracking and sharper hierarchy. */
.primary-nav a,.section-subnav a,.eyebrow,.story-kicker,.rail-label,.story-meta,.article-meta,.header-tool,.spotlight-input-row input,.menu-panel nav a,.menu-panel nav button{font-family:var(--font-ui)}
.primary-nav a,.section-subnav a,.eyebrow,.story-kicker,.rail-label,.story-meta,.article-meta{letter-spacing:.09em}
.primary-nav a{position:relative}
.primary-nav a.active:after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:3px;background:var(--accent);transform:skewX(-24deg)}
.section-subnav{scroll-snap-type:x proximity}.section-subnav a{scroll-snap-align:start}

/* Tech editorial section markers. */
.section-heading-light,.section-heading{position:relative}
.section-heading-light h2,.editorial-section .section-heading h2{display:flex;align-items:center;gap:12px}
.section-heading-light h2:before,.editorial-section .section-heading h2:before{content:"";display:inline-block;width:14px;height:28px;background:var(--accent);transform:skewX(-24deg);flex:0 0 auto}
.section-rule{height:1px!important;background:linear-gradient(90deg,var(--accent) 0 16%,var(--tech-line) 16% 100%)!important}

/* Quiet technical texture in the masthead only. */
.site-header{position:relative;overflow:hidden}
.site-header:after{content:"";position:absolute;pointer-events:none;top:4px;right:0;width:min(33vw,430px);height:88px;opacity:.16;background-image:radial-gradient(circle,var(--muted) 1px,transparent 1.2px);background-size:12px 12px;mask-image:linear-gradient(90deg,transparent,#000 32%,#000)}
.masthead,.nav-band,.subnav-band{position:relative;z-index:1}
.header-tool{backdrop-filter:blur(8px)}

/* Long headlines should feel deliberate rather than oversized on phones. */
.article-header{max-width:920px}
.article-header h1{text-wrap:balance}
.article-deck{text-wrap:pretty}

.menu-head strong,.footer-row strong{text-transform:uppercase;letter-spacing:.035em}.menu-head strong span{font-size:1em;color:inherit}.menu-head strong span:first-letter{color:var(--accent)}

@media(max-width:800px){.brand-name{font-size:clamp(1.85rem,8vw,2.65rem)}.brand-domain{font-size:clamp(.78rem,3.6vw,1.08rem)}.lead-copy h1,.story-card h3,.latest-card h3,.section-feature h3,.rail-story h3{letter-spacing:-.025em}.article-header h1{font-size:clamp(2.2rem,8.8vw,3.35rem);line-height:.98}.article-deck{font-size:1.15rem;line-height:1.48}.article-body{font-size:1.06rem}.section-heading-light h2:before,.editorial-section .section-heading h2:before{width:10px;height:22px}.site-header:after{width:34vw;height:68px;background-size:10px 10px}.section-subnav a{padding-inline:13px}}

/* Keep the domain badge legible regardless of theme-token overrides. */
.brand-domain{background:#b61e2e;color:#fff!important;text-shadow:0 1px 1px #0005}
