/* Byteline article template. Header, colours, type scale, Most read styling and footer match the homepage.
   The article body (#articleBody) is plain CMS output styled by simple element rules only. */
:root{
  --bg:#ffffff;--alt:#f5f5f7;--sunken:#f5f5f7;--fg:#1d1d1f;--fg2:#3f4048;--muted:#5f6067;--line:#e8e8ed;--line-strong:#d2d2d7;
  --accent:#000000;--accent-fg:#ffffff;--accent-soft:#e8e8ed;
  --head-bg:#000000;--head-fg:#ffffff;--head-muted:#b4b4bc;
  --ink-bg:#000000;--ink-fg:#ffffff;--ink-fg2:#c7c7cc;--ink-accent:#ffffff;--ink-line:#48484f;
  --art-bg:#e8e8ed;--art-1:#d2d2d7;--art-2:#86868b;--art-3:#1d1d1f;--art-line:#c7c7cc;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-h1:clamp(2.0625rem,1.4914rem + 2.4365vi,3.5625rem);
  --t-h2:clamp(1.75rem,1.4645rem + 1.2183vi,2.5rem);
  --t-h3:clamp(1.4375rem,1.1996rem + 1.0152vi,2.0625rem);
  --t-card:clamp(1rem,0.9286rem + 0.3046vi,1.1875rem);
  --t-19:1.1875rem;--t-16:1rem;--t-15:.9375rem;--t-13:.8125rem;--t-11:.6875rem;
  --wrap:max(1360px,min(1600px,84vw));--r-img:4px;--r-lg:10px;
}
:root{color-scheme:light;--hero-bg:#000000}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:var(--t-19);line-height:1.4;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.5px;text-wrap:pretty}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* Same page width as the homepage: content up to 1360px with 16 to 40px side margins */
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * clamp(16px,4vw,40px));margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
[hidden]{display:none!important}
.skip{position:absolute;left:16px;top:-100px;z-index:50;background:#fff;color:#000;padding:10px 16px;border-radius:6px;font-size:var(--t-16);font-weight:700;box-shadow:0 0 0 2px #000}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bi{width:16px;height:16px;fill:currentColor;flex:none}

/* Header (as homepage) */
.site{position:sticky;top:0;z-index:20;background:var(--head-bg);color:var(--head-fg)}
.bar{display:flex;align-items:center;gap:32px;height:60px}
.wordmark{font-weight:700;font-size:23px;letter-spacing:-.04em;display:inline-flex;align-items:center;min-height:44px}
.wordmark i{display:inline-block;width:12px;height:3px;background:currentColor;margin-left:2px;border-radius:2px}
nav.primary{display:flex;gap:4px;flex:1;min-width:0}
nav.primary a{display:flex;align-items:center;min-height:44px;padding-inline:10px;font-size:var(--t-16);letter-spacing:1px;color:var(--head-muted)}
nav.primary a:hover,nav.primary a[aria-current="page"]{color:var(--head-fg)}
nav.primary a[aria-current="page"]{font-weight:500}
.tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding-inline:18px;border-radius:999px;font:inherit;font-size:var(--t-16);font-weight:500;border:0;cursor:pointer}
.btn.primary{background:#000;color:#fff}
.btn.primary:hover{background:#2c2c2e}
.site .btn.primary,.ink .btn{background:#fff;color:#000}
.site .btn.primary:hover,.ink .btn:hover{background:#d2d2d7}
.site :focus-visible,.ink :focus-visible,.hero-panel :focus-visible{outline-color:#fff}
/* Menu for phones and tablets (main navigation is hidden below 1140px) */
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding-inline:12px;border:0;background:transparent;color:var(--head-fg);font:inherit;font-size:var(--t-16);letter-spacing:1px;cursor:pointer}
.menu-btn .ico{width:20px;height:20px}
.menu-btn[aria-expanded="true"] .i-open,.menu-btn:not([aria-expanded="true"]) .i-close{display:none}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--bg);color:var(--fg);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.08);max-height:calc(100dvh - 60px);overflow:auto}
.menu-panel .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px;padding-block:20px 28px}
.menu-panel .menu-h{grid-column:1/-1;font-size:var(--t-13);font-weight:700;color:var(--muted);margin-top:8px}
.menu-panel a{display:flex;align-items:center;min-height:44px;font-size:var(--t-19);font-weight:500;border-bottom:1px solid var(--line)}
.menu-panel a:hover{text-decoration:underline;text-underline-offset:4px}
.menu-panel a[aria-current="page"]{font-weight:700}
@media (max-width:1139px){nav.primary{display:none}.menu-btn{display:inline-flex}}
@media (min-width:1140px){.menu-panel{display:none!important}}
@media (max-width:480px){.tools .btn{min-height:40px;padding-inline:16px;font-size:var(--t-16)}.menu-btn .lbl{display:none}.menu-btn{padding-inline:10px}.menu-panel .wrap{grid-template-columns:minmax(0,1fr);gap:0}}

/* Advertising (same component as the homepage). Space is reserved so nothing jumps when an ad loads. */
.ad{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-inline:auto}
.ad-label{font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#5f6067}
.ad-box{width:100%;display:grid;place-items:center;border-radius:6px;background:#f5f5f7;border:1px dashed #c7c7cc;overflow:hidden}
.ad-box:has(ins){border:0;background:transparent}
.ad-box ins{display:block;width:100%}
.ad-ph{display:grid;gap:2px;text-align:center;color:#5f6067;font-size:12px;padding:8px}
.ad-ph b{font-weight:700;font-size:13px;color:#3f4048}
.ad-ph small{font-size:12px;font-variant-numeric:tabular-nums}
.ad-leader .ad-box{max-width:728px;min-height:90px}
.ad-mid .ad-box{max-width:728px;min-height:90px}
.ad-rect .ad-box{max-width:300px;min-height:250px}
.ad-half .ad-box{max-width:300px;min-height:600px}
.ad-inarticle .ad-box{min-height:250px}
.ad-top{padding-block:20px}
.ad-band{padding-block:32px}
.ad.ad-collapsed{display:none}
.ad.ad-empty .ad-label{visibility:hidden}

/* Invisible layout container: same background as the page, balanced margins */
.sheet{width:min(var(--wrap),calc(100% - 2 * clamp(16px,4vw,40px)));margin-inline:auto}
/* Lower sections: full-width bands, each with its own subtle tone */
.band{padding-block:72px 80px}
.band-mr{background:#f5f5f7}
.band-rel{background:#e8e8ed}

/* Breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--t-13);color:var(--muted);padding-top:16px}
.crumbs a{display:inline-flex;align-items:center;min-height:40px}
.crumbs a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

/* Hero: image left, headline right */
.media{position:relative;overflow:hidden;border-radius:var(--r-img);background:var(--art-bg);aspect-ratio:3/2}
.media svg{display:block;width:100%;height:100%}
.media .a0{fill:var(--art-bg)}.media .a1{fill:var(--art-1)}.media .a2{fill:var(--art-2)}.media .a3{fill:var(--art-3)}
.media .l1{fill:none;stroke:var(--art-line);stroke-width:2}.media .l2{fill:none;stroke:var(--art-2);stroke-width:2.5}
/* Hero: full-width split. Image runs to the left edge; brand panel on the right. */
.hero{--edge:max(clamp(16px,4vw,40px),calc((100% - var(--wrap)) / 2));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;margin-top:4px}
.hero-fig{display:contents;margin:0}
.media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hero .media img{object-position:50% 62%}
.hero .media{grid-column:1;grid-row:1;aspect-ratio:auto;height:100%;min-height:clamp(340px,38vw,600px);border-radius:0}
.hero .credits{grid-column:1;grid-row:2;align-content:start;padding:14px 32px 20px var(--edge)}
.hero-panel{grid-column:2;grid-row:1/span 2;display:grid;grid-template-rows:auto 1fr auto;gap:32px;min-width:0;background:var(--hero-bg);color:#fff;padding:36px var(--edge) 40px clamp(32px,4.5vw,72px)}
.hero-panel :focus-visible{outline-color:#fff}
.hp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.hero-mid{display:grid;gap:20px;align-content:center;max-width:620px}
.hero-foot{display:grid;gap:10px;max-width:620px}
.hero-share{list-style:none;margin:0;padding:12px 0 0;display:flex;gap:6px;border-top:1px solid rgba(255,255,255,.35)}
.hero-share a,.hero-share button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:#fff;cursor:pointer;transition:background .15s}
.hero-share a:hover,.hero-share button:hover{background:rgba(255,255,255,.16)}
.hero-share .bi,.hero-share .ico{width:17px;height:17px}
.hero-msg{font-size:var(--t-13);color:rgba(255,255,255,.85);min-height:1.2em}
/* Image captions and credits (CMS fields; empty fields are hidden) */
.credits{display:grid;gap:6px;margin:0}
.credits .cap{font-size:var(--t-16);line-height:1.45;color:var(--fg2)}
.credit-line{display:flex;flex-wrap:wrap;gap:2px 18px;font-family:var(--mono);font-size:.75rem;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.credit-line .k{font-weight:700;color:var(--fg2)}
.credits [data-cms]:has(.v:empty),.credits .cap:empty,.credit-line:not(:has(.v:not(:empty))),.credits:not(:has(.cap:not(:empty))):not(:has(.v:not(:empty))){display:none}
.eyebrow-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.cat{display:inline-flex;align-items:center;min-height:40px;font-size:var(--t-19);font-weight:700;color:#fff;position:relative}
.cat::before{content:"";position:absolute;left:0;top:2px;width:24px;height:2px;background:rgba(255,255,255,.6)}
.cat:hover{text-decoration:underline;text-underline-offset:3px}
.demo{font-size:.75rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:4px;padding:3px 7px}
.hero h1{font-size:clamp(2.0625rem,1.6rem + 1.6vi,3rem);line-height:1.1;font-weight:700;letter-spacing:-.5px;color:#fff}
.stand{font-size:clamp(1.1875rem,1.12rem + .3vi,1.3125rem);line-height:1.45;color:rgba(255,255,255,.9)}
.byline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:var(--t-16);color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums}
.byline b{flex-basis:100%;font-size:var(--t-19);font-weight:700;color:#fff}
.byline b a:hover{text-decoration:underline;text-underline-offset:3px}
.byline span+span::before{content:"·";margin-right:14px}
.meta{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:var(--t-13);color:var(--muted);font-variant-numeric:tabular-nums}
.meta span+span::before{content:"·";margin-right:8px}
.demo-line{font-size:.875rem;line-height:1.45;color:rgba(255,255,255,.82)}

/* Topics */
.tagbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:36px}
.tagbar .lbl{font-size:var(--t-13);font-weight:700;color:var(--muted);margin-right:4px}
.tag{display:inline-flex;align-items:center;min-height:40px;padding-inline:16px;border-radius:999px;background:var(--sunken);font-size:var(--t-13);font-weight:500;color:var(--fg)}
.tag:hover{background:#d2d2d7}
.tag.primary{background:#000;color:#fff}
.tag.primary:hover{background:#2c2c2e}

/* Reading layout: body column and a 300px ad-only rail (no story lists) */
@media (min-width:1200px){#most-read .rank{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 40px}#most-read .mr{grid-template-columns:160px minmax(0,1fr)}}
/* Topics row and reading area share one 1056px column (700px text, 56px gap, 300px rail), centred on wide screens */
.hero+.sheet{width:min(1056px,calc(100% - 2 * clamp(16px,4vw,40px)))}
/* Reading area: 700px text column and 300px rail, centred in the wide page so there is no gap between them */
.reading{display:grid;grid-template-columns:minmax(0,700px) 300px;justify-content:space-between;gap:56px;padding-top:36px;padding-bottom:72px}
.article-col{min-width:0;max-width:700px}

/* Article body: plain CMS content. Element rules only, no custom blocks. */
.prose{font-size:var(--t-19);line-height:1.65;color:var(--fg);overflow-wrap:break-word}
.prose>*{margin:0}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(1.75rem,1.4645rem + 1.2183vi,2.5rem);line-height:1.15;font-weight:700;letter-spacing:-.5px;margin-top:1.6em;scroll-margin-top:84px}
.prose h3{font-size:clamp(1.4375rem,1.3rem + .6vi,1.75rem);line-height:1.2;font-weight:700;letter-spacing:-.5px;margin-top:1.4em}
.prose h2+*,.prose h3+*{margin-top:.55em}
.prose a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:700}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose blockquote{padding-left:20px;border-left:3px solid var(--line-strong);color:var(--fg2)}
.prose img{display:block;width:100%;height:auto;border-radius:var(--r-img);background:var(--sunken)}
/* Demo only: the portrait demo photo is cropped to 3:2 in the article column. Real CMS images keep their own proportions. */
.prose figure{margin-block:1.6em 0}
.prose figcaption{margin-top:10px}
.prose .ad{margin-block:2.2em 0}
.prose .ad+*{margin-top:2.2em}

/* Below the body: tags, share bar, author bio */
.article-foot{display:grid;gap:28px;margin-top:44px}
.article-foot .tagbar{border:0;margin:0;padding:0}
.share-block{display:grid;gap:12px}
.share-block h2{font-size:var(--t-19);font-weight:700;letter-spacing:-.3px}
.share{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.share a,.share button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-inline:16px;border-radius:999px;border:0;font:inherit;font-size:var(--t-15);font-weight:500;color:var(--fg);background:var(--sunken);cursor:pointer;transition:background .15s,color .15s}
.share a:hover,.share button:hover{background:var(--fg);color:var(--bg)}
.share-msg{font-size:var(--t-13);color:var(--muted);min-height:1.2em}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);font-weight:700;font-size:15px;flex:none}
.author-box{display:flex;gap:16px;align-items:flex-start;padding-top:28px;border-top:1px solid var(--line)}
.author-box .avatar{width:56px;height:56px;font-size:17px}
.author-box b{font-size:var(--t-19)}
.author-box b a:hover{text-decoration:underline;text-underline-offset:3px}
.author-box p{font-size:1.0625rem;color:var(--fg2);margin-top:6px;line-height:1.5}
.author-box p a{color:var(--fg);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.author-box p a:hover{text-decoration-thickness:2px}

/* Rail */
.rail{display:flex;flex-direction:column;gap:32px;min-width:0}
.rail-sticky{position:sticky;top:84px}

/* Bands */
.band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:36px}
.band-head h2{font-size:clamp(2rem,1.55rem + 1.9vi,3rem);line-height:1.05;font-weight:700;letter-spacing:-1px}
.band-head p{font-size:var(--t-19);color:var(--fg2);margin-top:10px;max-width:60ch}
.see-all{font-size:var(--t-16)}
.see-all{font-weight:500}
.see-all{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-16);color:var(--fg);min-height:44px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .15s}
.see-all:hover{text-decoration-color:currentColor}
.see-all .ico{width:16px;height:16px}

/* Most read this week (homepage rank style, with thumbnails) */
.rank{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px}
.mr{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.mr-text{display:grid;gap:8px}
.kicker{font-size:var(--t-13);font-weight:700;color:var(--fg2)}
.mr h3{font-size:clamp(1.1875rem,1.05rem + .6vi,1.5rem);line-height:1.2;font-weight:700;letter-spacing:-.5px;text-wrap:pretty}
.mr h3 a::after{content:"";position:absolute;inset:0}
.mr:hover h3 a{text-decoration:underline;text-underline-offset:3px}
.mr .thumb{order:-1;aspect-ratio:3/2}

/* Related articles and blogs (unchanged) */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 56px}
.card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-auto-rows:min-content;column-gap:24px;row-gap:10px;align-content:start}
.card>*{grid-column:2}
.card .media{grid-column:1;grid-row:1/span 5;aspect-ratio:4/3}
.card .type{font-size:var(--t-13);font-weight:700;color:var(--fg2);margin-top:2px}
.card .type b{font-weight:700;color:var(--fg)}
.card h3{font-size:clamp(1.25rem,1.05rem + .8vi,1.75rem);line-height:1.15;font-weight:700;letter-spacing:-.5px;text-wrap:pretty}
.card h3 a::after{content:"";position:absolute;inset:0}
.card:hover h3 a{text-decoration:underline;text-underline-offset:3px}
.card p{font-size:1.0625rem;color:var(--fg2);line-height:1.45}

/* Newsletter (ink band, as homepage) */
.ink{background:var(--ink-bg);color:var(--ink-fg);padding-block:56px}
.ink .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.ink h2{font-size:var(--t-h3);line-height:1.15;font-weight:700}
.ink p{color:var(--ink-fg2);font-size:var(--t-16);margin-top:8px}
.ink .nlwrap{flex:1 1 320px;max-width:540px;min-width:0}
.ink label.nl-label{display:block;font-size:var(--t-15);font-weight:500;color:#fff;margin-bottom:8px}
.ink form{display:flex;gap:8px;padding:6px;border-radius:999px;border:1px solid #636366;background:#1c1c1f;width:100%}
.ink input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:inherit;font-size:var(--t-16);padding-inline:16px;height:48px}
.ink input::placeholder{color:#a1a1a6;opacity:1}
.ink input:focus{outline:none}
.ink form:focus-within{border-color:#fff;outline:2px solid #fff;outline-offset:2px}
.ink .btn{min-height:48px;padding-inline:24px;font-weight:700}
.ink .msg{font-size:var(--t-13);margin-top:8px;color:var(--ink-fg2);min-height:1.4em}

/* Footer (as homepage) */
footer{background:var(--alt);color:var(--fg)}
.foot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr) minmax(max-content,1.2fr);gap:40px 32px;padding-block:64px 40px}
.foot .wordmark{color:var(--fg);font-size:26px}
.foot>div>p{color:var(--fg2);font-size:var(--t-16);margin-top:12px;max-width:34ch;line-height:1.5}
.foot h2{font-size:var(--t-19);line-height:1.2;font-weight:700;letter-spacing:-.3px;color:var(--fg);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid}
.foot li a{display:flex;align-items:center;min-height:40px;line-height:1.3;font-size:var(--t-16);color:var(--fg2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .15s,text-decoration-color .15s}
.foot li a:hover{color:var(--fg);text-decoration-color:currentColor}
.social-wrap{margin-top:28px}
.foot .social-wrap h2{font-size:var(--t-16)}
.foot .social{display:flex;flex-wrap:wrap;gap:10px}
.foot .social a{display:grid;place-items:center;min-height:0;width:44px;height:44px;padding:0;border-radius:50%;color:var(--fg);box-shadow:inset 0 0 0 1px #c7c7cc;text-decoration:none}
.foot .social a:hover{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 1px var(--fg)}
.foot .social .bi{width:18px;height:18px}
.social-note{font-size:var(--t-13);color:var(--muted);margin-top:10px;max-width:30ch}
.contact{display:grid;gap:10px}
.contact span{display:block;color:var(--muted);font-size:var(--t-13);margin-bottom:2px}
.contact a{display:inline-flex;align-items:center;min-height:40px;font-size:var(--t-16);font-weight:500;color:var(--fg);overflow-wrap:break-word;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.contact a:hover{text-decoration-color:currentColor}
.legal{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding-block:12px 24px;border-top:1px solid var(--line-strong);font-size:var(--t-13);color:var(--muted)}
.legal nav{display:flex;gap:4px 24px;flex-wrap:wrap}
.legal a{display:inline-flex;align-items:center;min-height:44px}
.legal a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px}

/* Responsive */
@media (max-width:1023px){
  .reading{grid-template-columns:minmax(0,1fr)}
  .article-col{max-width:none}
  .rail{display:none}
  .rank{gap:32px 32px}
  .mr{grid-template-columns:140px minmax(0,1fr);gap:18px}
  .cards{grid-template-columns:minmax(0,1fr);gap:36px}
  .card{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px;padding-block:56px 36px}
  .foot>div:first-child{grid-column:1/-1}
  .foot>div:first-child>p{max-width:52ch}
}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .hero .media{height:auto;min-height:0;aspect-ratio:4/3}
  .hero .credits{padding:12px var(--edge) 16px}
  .hero-panel{grid-column:1;grid-row:3;padding:32px var(--edge) 36px;gap:28px}
}
@media (max-width:760px){
  .ad-leader .ad-box{max-width:320px;min-height:100px}
  .ad-mid .ad-box{max-width:300px;min-height:250px}
  .ad-inarticle .ad-box{max-width:336px;min-height:250px}
  .ad-top{padding-block:12px}
  .band{padding-block:48px 56px}
  .band-head{margin-bottom:28px}
  .hero-panel{padding:28px 16px 32px;gap:24px}
  .hero .credits{padding:12px 16px 4px}
  .reading{padding-top:28px;padding-bottom:48px}
  .ad-top{padding-block:14px}
  .prose{font-size:1.125rem}
  .rank{grid-template-columns:minmax(0,1fr);gap:28px}
  .mr{grid-template-columns:120px minmax(0,1fr);gap:16px}
  .cards{gap:36px}
  .card{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .card>*,.card .media{grid-column:1}
  .card .media{grid-row:auto;aspect-ratio:16/9;margin-bottom:6px}
  .share a,.share button{padding-inline:14px}
  .foot{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:48px 28px}
  .foot>div+div{padding-top:28px;border-top:1px solid var(--line-strong)}
  .foot li a{min-height:44px}
  .foot ul.two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .legal{flex-direction:column;align-items:flex-start;gap:4px;padding-block:16px 28px}
  .legal nav{flex-direction:column;gap:0}
}
@media (max-width:480px){
  .ink form{flex-direction:column;gap:10px;padding:0;border:0;border-radius:0;background:transparent}
  .ink input{flex:none;height:52px;border:1px solid #636366;border-radius:12px;background:#1c1c1f;padding-inline:16px}
  .ink input:focus{border-color:#fff}
  .ink form:focus-within{outline:none}
  .ink input:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .ink .btn{width:100%;min-height:52px;border-radius:12px}
}
@media (max-width:400px){.share .lbl{display:none}.share a,.share button{width:44px;padding:0;justify-content:center}.share .copy .lbl{display:inline}.share .copy{width:auto;padding-inline:14px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

.band-rel .media{background:#fff}.band-rel .media .a0{fill:#fff}
/* See More buttons (match the homepage) */
.see-more{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:71px;padding:0 23px 0 21.5px;border:2px solid currentColor;border-radius:999px;color:var(--fg);background:transparent;font-size:20px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;flex:none;transition:background-color .15s,color .15s}
.see-more .arr{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.see-more:hover{background:var(--fg);color:var(--bg,#fff)}
.band-head{align-items:flex-end;flex-wrap:nowrap}
.band-head h2{font-family:"Figtree","Inter",sans-serif;font-weight:900;letter-spacing:-.036em;text-wrap:balance}
h1,h2,h3{hyphens:manual;overflow-wrap:break-word}
@media (max-width:760px){.see-more{height:52px;padding:0 20px 0 19px;gap:8px;font-size:17px}.see-more .arr{width:14px;height:14px}.band-head{flex-direction:column;align-items:flex-start}}
/* DEMO ONLY: the portrait demo photo is cropped to 3:2 in the article column. Real CMS images keep their own proportions. */
.prose img[data-demo]{aspect-ratio:3/2;object-fit:cover;object-position:50% 62%}

/* Header sizing (proportionate to 19px body text): 72px bar and 18px menu text on desktop, 68px on tablet, 60px on phones */
.bar{height:72px}
.wordmark{font-size:28px}
nav.primary a,.search-btn,.icon-btn,.menu-btn{font-size:18px}
.tools .sub,.tools .btn.primary{font-size:17px;min-height:44px;padding-inline:22px}
.menu-panel{max-height:calc(100dvh - 72px)}
@media (max-width:1139px){
  .bar{height:68px}
  .wordmark{font-size:26px}
  .panel,.menu-panel{max-height:calc(100dvh - 68px)}
}
@media (max-width:640px){
  .bar{height:60px}
  .wordmark{font-size:24px}
  .search-btn,.icon-btn,.menu-btn{font-size:17px}
  .tools .sub,.tools .btn.primary{font-size:16px;min-height:42px;padding-inline:18px}
  .panel,.menu-panel{max-height:calc(100dvh - 60px)}
}

/* Typography aligned with the homepage */
.band-head h2{font-size:clamp(2.5rem,1.2rem + 4.6vw,5.1rem);line-height:1}
.ink h2{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.5px}
.site .wordmark{line-height:1}
.hero h1{font-size:var(--t-h1);line-height:1.1}
.foot li a{letter-spacing:1px;line-height:1.4}
.ad-label{font-weight:400;letter-spacing:.5px}
.kicker,.card .type,.card .type b{font-weight:600;letter-spacing:.01em}
@media (max-width:640px){.ink h2{font-size:28px}}


/* OASIS — TechAmerica: FAQ section, from the Byteline FAQ design (html-design/Byteline FAQ Demo.html) */
/* ===== FAQ section (bl-faq.css) ===== */
/* Byteline FAQ section. Every rule is scoped to .bl-faq, so nothing outside the component changes.
   Fonts and colours come from the page (Inter, Figtree, black and white), with fallbacks for pages without the site tokens. */
.bl-faq{
  --faq-fg:var(--fg,#1d1d1f);--faq-fg2:var(--fg2,#3f4048);--faq-muted:var(--muted,#5f6067);
  --faq-line:var(--line-strong,#d2d2d7);--faq-tint:var(--sunken,#f5f5f7);--faq-bg:var(--bg,#fff);
  --faq-pad:20px;
  font-family:inherit;color:var(--faq-fg);font-size:1.1875rem;line-height:1.4;margin:2.6em 0 0;padding:0;border:0;overflow-wrap:break-word;
}
.bl-faq *,.bl-faq *::before,.bl-faq *::after{box-sizing:border-box}

/* Heading block */
.bl-faq .bl-faq__title{margin:0;font-family:"Figtree","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:clamp(1.75rem,1.4645rem + 1.2183vi,2.5rem);line-height:1.05;letter-spacing:-.03em;color:var(--faq-fg);text-wrap:balance}
.bl-faq .bl-faq__intro{margin:14px 0 0;max-width:60ch;font-size:1.1875rem;line-height:1.5;color:var(--faq-fg2)}

/* Questions */
.bl-faq .bl-faq__list{margin-top:28px;border-top:2px solid var(--faq-fg)}
.bl-faq .bl-faq__item{margin:0;padding:0;border-bottom:1px solid var(--faq-line);transition:background-color .2s}
.bl-faq .bl-faq__item[open]{background:var(--faq-tint)}
.bl-faq .bl-faq__q{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:72px;padding:20px var(--faq-pad);margin:0;cursor:pointer;
  font-size:clamp(1.1875rem,1.12rem + .3vi,1.3125rem);line-height:1.3;font-weight:700;letter-spacing:-.3px;color:var(--faq-fg);
  -webkit-tap-highlight-color:transparent;
}
.bl-faq .bl-faq__q::-webkit-details-marker{display:none}
.bl-faq .bl-faq__q::marker{content:""}
.bl-faq .bl-faq__text{text-wrap:pretty}
.bl-faq .bl-faq__q:hover .bl-faq__text{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.bl-faq .bl-faq__q:focus{outline:none}
.bl-faq .bl-faq__q:focus-visible{outline:2px solid var(--faq-fg);outline-offset:-2px;border-radius:2px}

/* Plus / minus icon: two bars drawn in CSS; the vertical bar folds away when open */
.bl-faq .bl-faq__icon{position:relative;flex:none;width:32px;height:32px;border:1.5px solid var(--faq-fg);border-radius:50%;color:var(--faq-fg);transition:background-color .2s,color .2s}
.bl-faq .bl-faq__icon::before,.bl-faq .bl-faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor;border-radius:1px;transition:transform .25s ease}
.bl-faq .bl-faq__icon::after{transform:rotate(90deg)}
.bl-faq .bl-faq__q:hover .bl-faq__icon{background:var(--faq-tint)}
.bl-faq .bl-faq__item[open]>.bl-faq__q .bl-faq__icon{background:var(--faq-fg);color:var(--faq-bg)}
.bl-faq .bl-faq__item[open]>.bl-faq__q:hover .bl-faq__icon{background:var(--faq-fg)}
.bl-faq .bl-faq__item[open]>.bl-faq__q .bl-faq__icon::after{transform:rotate(0deg)}

/* Answers */
.bl-faq .bl-faq__a{overflow:hidden}
.bl-faq .bl-faq__body{padding:0 calc(var(--faq-pad) + 56px) 26px var(--faq-pad);font-size:1.1875rem;line-height:1.65;color:var(--faq-fg2)}
.bl-faq .bl-faq__body>*{margin:0;max-width:62ch}
.bl-faq .bl-faq__body>*+*{margin-top:.8em}
.bl-faq .bl-faq__body a{color:var(--faq-fg);text-decoration:underline;text-underline-offset:3px}
.bl-faq .bl-faq__body a:hover{text-decoration-thickness:2px}
.bl-faq .bl-faq__body strong{color:var(--faq-fg);font-weight:700}
.bl-faq .bl-faq__body ul,.bl-faq .bl-faq__body ol{padding-left:1.3em}
.bl-faq .bl-faq__body li+li{margin-top:.35em}

/* Optional closing line */
.bl-faq .bl-faq__foot{margin:18px 0 0;font-size:1rem;line-height:1.5;color:var(--faq-muted)}
.bl-faq .bl-faq__foot a{color:var(--faq-fg);font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.bl-faq .bl-faq__foot a:hover{text-decoration-thickness:2px}

@media (max-width:640px){
  .bl-faq{--faq-pad:14px;margin-top:2.2em}
  .bl-faq .bl-faq__list{margin-top:22px}
  .bl-faq .bl-faq__q{min-height:60px;padding-block:16px;gap:16px}
  .bl-faq .bl-faq__icon{width:28px;height:28px}
  .bl-faq .bl-faq__body{padding-right:var(--faq-pad);padding-bottom:22px;font-size:1.125rem}
  .bl-faq .bl-faq__intro{font-size:1.0625rem}
}
@media (hover:none){.bl-faq .bl-faq__q:hover .bl-faq__icon{background:none}.bl-faq .bl-faq__item[open]>.bl-faq__q .bl-faq__icon{background:var(--faq-fg)}}
@media (prefers-reduced-motion:reduce){.bl-faq .bl-faq__item,.bl-faq .bl-faq__icon,.bl-faq .bl-faq__icon::before,.bl-faq .bl-faq__icon::after{transition:none}}
@media print{.bl-faq .bl-faq__icon{display:none}.bl-faq .bl-faq__item[open]{background:none}}