:root{
 --black:#050d24;--panel:#0a1533;--panel2:#0e1c42;--line:#1c2a52;
 --text:#f4f6fb;--muted:#a8b2cc;--gold:#ffcc00;--goldsoft:#ffe36e;--red:#ff4d5e;
 --light:#f7f8fb;--lightink:#0d1832;--lightmuted:#46527a;--lightline:#dde3ef;
 --golddeep:#a8860a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font-family:ABeeZee,Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
h1,h2,h3,.navbrand{font-family:Montserrat,'Helvetica Neue',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-weight:800;line-height:1.15}
h2{font-size:clamp(1.7rem,4.2vw,2.5rem);margin-bottom:22px}
h3{font-size:1.12rem;letter-spacing:.1em;margin-bottom:10px;color:var(--gold)}
p{font-size:1.1rem;color:var(--muted);margin-bottom:16px}
p.big{font-size:1.28rem;color:var(--text)}
strong{color:var(--text)}
a{color:var(--goldsoft)}
img{max-width:100%;height:auto}
.eyebrow{letter-spacing:.38em;text-transform:uppercase;font-size:.72rem;color:var(--gold);margin-bottom:16px;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;background:var(--gold);color:#0d1832;text-decoration:none;font-family:Montserrat,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.95rem;padding:16px 32px;border-radius:3px;transition:all .2s;margin:8px 14px 8px 0;border:1px solid var(--gold);text-indent:0;min-height:54px;box-sizing:border-box}
/* letter-spacing adds a space after the last character, which shifts a
   centred label left by half of it; a trailing arrow adds its own side
   bearing. Cancel both on the label itself so the ink is centred. */
.btn>.btl{display:inline-block;margin-right:-.1em}
.secnext a{text-indent:0}
.secnext a>.btl{display:inline-block;margin-right:-.04em}
.secnext a>.btl{margin-right:-.04em}
.btn:hover{background:var(--goldsoft);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn.ghost:hover{background:rgba(255,204,0,.1)}
section{padding:118px 0}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:#040a1e;border-bottom:1px solid #1a2750}
nav .in{max-width:1180px;margin:0 auto;padding:15px 24px;display:flex;align-items:center;gap:19px;flex-wrap:wrap}
nav img{height:40px;width:auto;display:block}
nav .navbrand{display:none;font-size:1rem;color:var(--text);letter-spacing:.3em}
nav a{color:#c6cde0;text-decoration:none;font-family:Montserrat,sans-serif;text-transform:uppercase;font-size:.79rem;letter-spacing:.07em;font-weight:600;transition:color .2s;white-space:nowrap}
nav a:hover,nav a.on{color:var(--gold)}
nav .navmore{display:inline-flex;align-items:center;gap:13px;flex-wrap:nowrap}
nav a.more{font-size:.68rem;letter-spacing:.07em;color:#8b96b0;font-weight:600;white-space:nowrap}
nav a.more:hover,nav a.more.on{color:#ffcc00}
nav .navsep{width:1px;height:16px;background:#22315c;display:inline-block;margin:0 4px}
nav .spacer{flex:1}

/* HERO */
.hero{text-align:center;padding:84px 24px;background:radial-gradient(ellipse at 50% -20%,#12245c 0%,var(--black) 68%)}
.hero h1{font-size:clamp(2.2rem,5.6vw,4rem);max-width:24ch;margin-left:auto;margin-right:auto;line-height:1.08}
.hero .sub{color:var(--goldsoft);font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(.85rem,2.2vw,1.05rem);margin:18px 0 38px}
.herosplit{text-align:left;padding:0;background:linear-gradient(95deg,rgba(4,10,28,.94) 0%,rgba(5,13,36,.72) 46%,rgba(5,13,36,.18) 100%),url('../images/hammock-flip.jpg') center left/cover;min-height:74vh;display:flex;align-items:flex-start}
.herosplit .hgrid{max-width:1120px;margin:0 auto;padding:52px 32px 104px;width:100%}
.herosplit h1{font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.1;max-width:780px}
.herosplit .sub{margin:22px 0 36px}
.herosplit img{display:none}
@media(max-width:860px){.herosplit{background:linear-gradient(rgba(4,10,28,.8),rgba(5,13,36,.9)),url('../images/hammock-flip.jpg') center/cover;text-align:center}.herosplit h1{max-width:none}}
.naturebg-dark h3{color:var(--text)}
.naturebg-dark .eyebrow{color:var(--gold)}
.video{position:relative;max-width:780px;margin:0 auto;aspect-ratio:16/9;background:#000;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* STATS */
.stats{display:flex;justify-content:center;gap:64px;flex-wrap:wrap;text-align:center}
.stat b{display:block;font-family:Montserrat,sans-serif;font-size:2.8rem;color:var(--gold);font-weight:800;line-height:1.1}
.stat span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* GRID */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
@media(max-width:800px){.three{grid-template-columns:1fr}}
.three .num{font-family:Montserrat,sans-serif;font-size:2.2rem;color:var(--gold);font-weight:800;margin-bottom:14px}
.three h3{color:var(--text)}
.three p{font-size:1rem}

/* LIGHT sections */
.light{background:var(--light);color:var(--lightink);border-color:var(--lightline)}
.light h2,.light .num{color:var(--lightink)}
.light h3{color:var(--golddeep)}
.light p{color:var(--lightmuted)}
.light p.big,.light strong{color:var(--lightink)}
.light .eyebrow{color:var(--golddeep)}

/* BENEFIT rows */
.brow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:110px}
.brow:last-child{margin-bottom:0}
@media(max-width:800px){.brow{grid-template-columns:1fr}}
.brow img{border-radius:6px;box-shadow:0 18px 50px rgba(10,20,50,.25)}
.brow .tag{font-family:Montserrat,sans-serif;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--golddeep);font-weight:800;margin-bottom:8px}
.brow h3{font-size:1.5rem;letter-spacing:.04em;color:var(--lightink)}
.naturebg-dark .brow h3{color:var(--text)}

/* QUOTE */
.pull{font-family:Lora,Georgia,serif;font-style:italic;font-size:clamp(1.3rem,3vw,1.7rem);color:var(--text);border-left:3px solid var(--gold);padding-left:26px;margin:34px 0;line-height:1.6}
.light .pull{color:var(--lightink);border-color:var(--gold)}
/* Bare spans used as descriptions inside light sections. */
.light .sitemap-group li span{color:var(--lightmuted)}
.light .sitemap-group li a{color:var(--golddeep)}
/* A .card is a dark panel even inside a light section, so its text must stay light. */
.light .card h3{color:var(--text)}
.light .card p{color:var(--muted)}
.light .card{background:var(--panel);border-color:var(--line)}

/* PLAYER */
.player{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-top:30px;overflow:hidden}
.light .player{background:#fff;border-color:var(--lightline);box-shadow:0 12px 40px rgba(10,20,50,.08)}
.player .now{padding:16px 20px;border-bottom:1px solid var(--line)}
.light .player .now{border-color:var(--lightline)}
.player .now .nt{font-size:.95rem;font-weight:600;margin-bottom:8px;color:var(--text)}
.player audio{width:100%}
ul.tracks{list-style:none;max-height:420px;overflow-y:auto}
ul.tracks li{display:flex;align-items:center;gap:14px;padding:11px 20px;border-bottom:1px solid var(--line);cursor:pointer;font-size:.95rem;transition:background .15s;color:var(--muted)}
.light ul.tracks li{border-color:var(--lightline)}
.article .player{background:#fff;border-color:var(--lightline);box-shadow:0 12px 40px rgba(10,20,50,.08)}
.article .player .now{border-color:var(--lightline)}
.article .player .now .nt{color:var(--lightink)}
.article ul.tracks li{border-color:var(--lightline);color:#3d465c}
.article ul.tracks li.active{background:#fdf3cf;color:#111c33}
.article ul.tracks li:hover{background:#fbf7e6}
ul.tracks li:hover{background:rgba(255,204,0,.08)}
ul.tracks li.active{background:rgba(255,204,0,.14);font-weight:600;color:var(--text)}
ul.tracks li .n{color:var(--golddeep);font-family:Montserrat,sans-serif;font-size:.78rem;width:22px;flex-shrink:0}
ul.tracks li .t{flex:1}
ul.tracks li .d{font-size:.82rem;opacity:.65}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:800px){.cards{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;display:block;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--gold)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.card .pad{padding:18px 20px 22px}
.card h3{color:var(--text);font-size:1rem;letter-spacing:.06em}
.card p{font-size:.9rem;margin:6px 0 0}
.card p.cardlink{color:var(--goldsoft);font-family:Montserrat,sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.03em;margin-top:12px}

/* PILLS */
.pills{text-align:center;background:radial-gradient(ellipse at 50% 130%,#1b0a10 0%,var(--black) 70%);padding:130px 0}
.pills h2{font-size:clamp(2.4rem,6.5vw,4.2rem)}
.pills .bigq{font-family:Lora,Georgia,serif;font-style:italic;font-size:clamp(1.25rem,3vw,1.8rem);color:var(--goldsoft);margin:10px 0 4px}
.choice{display:flex;justify-content:center;gap:48px;margin-top:70px;flex-wrap:wrap}
.choice img{width:min(380px,84vw);filter:drop-shadow(0 26px 60px rgba(0,0,0,.7));transition:transform .2s}
.choice a{text-decoration:none;max-width:400px}
.choice a:hover img{transform:scale(1.08)}
.choice .lbl{font-size:1.25rem;color:var(--muted);margin-top:22px}
.choice .lbl b{color:var(--text)}

/* CREDS */
.creds{display:flex;gap:44px;flex-wrap:wrap;margin:30px 0 34px}
.creds div b{display:block;color:var(--gold);font-family:Montserrat,sans-serif;font-size:1.7rem;font-weight:800}
.creds div span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.light .creds div b{color:var(--golddeep)}
.light .creds div span{color:var(--lightmuted)}

/* ARTICLE */
.article{background:var(--light);color:var(--lightink)}
.article .wrap{max-width:720px}
.article h1{font-size:clamp(2rem,5vw,3rem);color:var(--lightink);margin-bottom:10px}
.article .standfirst{font-family:Lora,Georgia,serif;font-style:italic;font-size:1.3rem;color:var(--golddeep);margin-bottom:34px}

/* headings: real hierarchy so a long page has shape */
.article h2{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(1.5rem,2.9vw,1.95rem);color:var(--lightink);
 margin:64px 0 20px;letter-spacing:-.01em;line-height:1.26;position:relative;padding:0 0 17px}
.article h2::before{content:'';position:absolute;left:0;bottom:0;width:76px;height:8px;background:transparent url('yellow-brush-stroke.svg') left center/100% 100% no-repeat}
.article h2:first-child{margin-top:8px}
.article h3{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.18rem;color:var(--lightink);margin:40px 0 12px;letter-spacing:0}
.article h4{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.02rem;color:var(--golddeep);margin:32px 0 10px;
 letter-spacing:.06em;text-transform:uppercase}

/* body: longer measure, more air, bigger type */
.article p{line-height:1.85;color:#3b465e;font-size:1.14rem;line-height:1.82;margin-bottom:22px}
.article>.wrap>p:first-of-type,.article .lead{font-size:1.26rem;line-height:1.72;color:#2b3550}

/* links you can actually see */
.article p a,.article li a,.article dd a{color:#123a8c;text-decoration:none;
 background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;
 background-position:0 92%;background-size:100% 2px;padding-bottom:1px;transition:background-size .18s,color .18s}
.article p a:hover,.article li a:hover,.article dd a:hover{color:#0b2a68;background-size:100% 100%;background-position:0 100%}

.article img{border-radius:10px;margin:34px 0;box-shadow:0 18px 50px rgba(10,20,50,.16)}
.article .cap{font-family:Montserrat,sans-serif;font-size:.8rem;letter-spacing:.06em;color:#7d87a0;
 margin-top:-24px;margin-bottom:34px;text-align:center}

/* lists that look designed */
.article ul,.article ol{margin:0 0 26px 0;padding:0;color:#3b465e;font-size:1.09rem;list-style:none}
.article ul li{position:relative;padding:0 0 0 30px;margin-bottom:13px;line-height:1.72}
.article ul li::before{content:'';position:absolute;left:6px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.article ol{counter-reset:ai}
.article ol li{counter-increment:ai;position:relative;padding:0 0 0 40px;margin-bottom:14px;line-height:1.72}
.article ol li::before{content:counter(ai);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;
 background:#fff;border:1.5px solid var(--gold);color:var(--golddeep);font-family:Montserrat,sans-serif;font-weight:700;
 font-size:.8rem;display:flex;align-items:center;justify-content:center}

/* first paragraph after a heading gets a touch more presence */
.article h2+p{color:#2f3a54}

/* a quiet rule between long sections */
.article hr{border:0;height:1px;background:linear-gradient(90deg,var(--lightline),transparent);margin:52px 0}
/* keep-reading + share, restyled */
.article .sharebox{margin:56px 0 0;padding:24px 26px;background:#fff;border:1px solid var(--lightline);border-radius:16px;
 display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.article .sharebox .lbl{font-family:Montserrat,sans-serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
 color:#5f6884;margin:0 6px 0 0;flex:1 1 100%}
.article .sharebox a{font-family:Montserrat,sans-serif;font-size:.84rem;font-weight:700;color:var(--lightink);
 background:#f1f4fa;border-radius:999px;padding:9px 18px;text-decoration:none;background-image:none}
.article .sharebox a:hover{background:var(--gold);color:#101a33}

.article .meta{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:#7d87a0;margin-bottom:36px}
.article strong,.audiobox strong{color:var(--lightink)}
.article .pull{color:var(--lightink);border:0;border-left:0;padding:0;margin:44px 0;font-family:Lora,Georgia,serif;font-style:italic;font-size:clamp(1.35rem,3vw,1.75rem);line-height:1.5;text-align:center;position:relative;padding-top:44px}
.article .pull::before{content:'“';position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-family:Lora,Georgia,serif;font-size:82px;color:var(--gold);line-height:1;opacity:.85}
.article blockquote{font-family:Lora,Georgia,serif;font-style:italic;border-left:3px solid var(--gold);padding-left:22px;margin:26px 0;color:var(--lightink);font-size:1.15rem}
.audiobox{background:#fff;border:1px solid var(--lightline);border-radius:8px;padding:18px 20px;margin:30px 0;box-shadow:0 10px 30px rgba(10,20,50,.08)}
.audiobox .lb{font-family:Montserrat,sans-serif;text-transform:uppercase;font-size:.78rem;letter-spacing:.18em;color:var(--golddeep);margin-bottom:10px}

/* ONE-DAY DETOX — practical plan components */
.article .plan-summary{margin:34px 0 46px;padding:30px 32px;background:#eef5ff;border:1px solid #cbdcf4;border-radius:18px;box-shadow:0 14px 36px rgba(22,55,105,.08)}
.article .plan-summary h2{font-size:1.35rem;margin:0 0 16px;padding:0}
.article .plan-summary h2::before{display:none}
.article .plan-summary ul{margin-bottom:0}
.article .plan-summary li:last-child{margin-bottom:0}
.article .safety-note,.article .personal-note{margin:30px 0;padding:24px 26px;border-radius:16px}
.article .safety-note{background:#fff8dc;border:1px solid #eadb91}
.article .personal-note{background:#14294d;border:1px solid #254a84;color:#fff}
.article .personal-note p{color:#e7edf7;margin-bottom:12px}
.article .personal-note p:last-child{margin-bottom:0}
.article .personal-note strong{color:#fff}
.article .day-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 34px}
.article .daypart{background:#fff;border:1px solid var(--lightline);border-radius:14px;padding:22px 20px;box-shadow:0 10px 24px rgba(17,28,51,.06)}
.article .daypart h3{font-size:1rem;margin:0 0 10px;text-transform:none}
.article .daypart p{font-size:.98rem;line-height:1.65;margin:0}
.article .next-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:30px 0 6px}
.article .route-card{display:block;background:#fff;border:1px solid var(--lightline);border-radius:16px;padding:24px;text-decoration:none;background-image:none;transition:transform .18s,border-color .18s,box-shadow .18s}
.article .route-card:hover{transform:translateY(-3px);border-color:#2f68bf;box-shadow:0 14px 32px rgba(17,28,51,.1)}
.article .route-card strong{display:block;font-family:Montserrat,sans-serif;font-size:1rem;margin-bottom:6px}
.article .route-card span{display:block;color:#53617a;font-size:.95rem;line-height:1.55}
@media(max-width:700px){
 .article .plan-summary{padding:24px 22px}
 .article .day-grid,.article .next-choices{grid-template-columns:1fr}
 .article .safety-note,.article .personal-note{padding:22px 20px}
}

/* DIGITAL DETOX BENEFITS — experience first, evidence clearly separated */
.article .source-note{margin:34px 0 48px;padding:24px 27px;background:#fdf8ea;border-left:4px solid var(--gold);border-radius:0 14px 14px 0}
.article .source-note p{margin:0;font-size:1.02rem;line-height:1.7;color:#46516a}
.article .benefit-photo{margin:46px 0 58px}
.article .benefit-photo img{margin:0 auto}
.article .benefit-photo figcaption{max-width:650px;margin:12px auto 0;text-align:center;color:#69748c;font-size:.88rem;line-height:1.55;font-style:italic}
.article .evidence-limit{margin:36px 0 54px;padding:28px 30px;background:#14294d;border:1px solid #254a84;border-radius:17px}
.article .evidence-limit h3{margin:0 0 10px;color:#fff;font-size:1.12rem;text-transform:none;letter-spacing:0}
.article .evidence-limit p{margin:0;color:#e4ebf6;font-size:1rem;line-height:1.72}
.article .notice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:26px 0 30px}
.article .notice-grid>div{background:#fff;border:1px solid var(--lightline);border-radius:14px;padding:22px 21px;box-shadow:0 10px 24px rgba(17,28,51,.05)}
.article .notice-grid strong{display:block;font-family:Montserrat,sans-serif;font-size:.92rem;margin-bottom:7px;color:var(--lightink)}
.article .notice-grid span{display:block;color:#53617a;font-size:.96rem;line-height:1.55}
.article .benefits-next{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 12px}
@media(max-width:760px){
 .article .notice-grid,.article .benefits-next{grid-template-columns:1fr}
 .article .source-note{padding:22px 20px}
 .article .evidence-limit{padding:24px 21px}
}

/* BOOK */
.bookgrid{display:grid;grid-template-columns:280px 1fr;gap:52px;align-items:start}
@media(max-width:800px){.bookgrid{grid-template-columns:1fr}}
.bookgrid img{border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.6)}
.light .bookgrid img{border-color:var(--lightline);box-shadow:0 18px 50px rgba(10,20,50,.2)}
.excerpt{font-family:Lora,Georgia,serif;font-style:italic;border-left:3px solid var(--gold);padding:8px 0 8px 26px;margin:28px 0}
.excerpt p{color:var(--text);font-size:1.16rem;line-height:1.85}
.excerpt .src{font-style:normal;font-size:.8rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.chapter{font-family:Lora,Georgia,serif}
.chapter h2{font-family:Montserrat,sans-serif;font-size:1.3rem;letter-spacing:.2em;margin:60px 0 26px;text-align:center}
.chapter p{font-family:Lora,Georgia,serif;font-size:1.16rem;line-height:1.95;color:#3d465c;margin-bottom:22px}
.chapter .scene{text-align:center;color:var(--golddeep);letter-spacing:.3em;margin:50px 0}
.chapter .dateline{font-style:italic;color:#7d87a0;font-size:1rem}

/* FOOTER */
footer{background:#03081a;padding:64px 24px 40px;font-size:.9rem;color:#8d94ab}
footer .cols{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
@media(max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer .cols{grid-template-columns:1fr}}
footer h4{font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--gold);margin-bottom:14px}
footer a{color:#a8b2cc;text-decoration:none;display:block;padding:3px 0}
footer a:hover{color:var(--gold)}
footer form{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
footer input{background:#0a1330;border:1px solid var(--line);color:var(--text);padding:11px 14px;border-radius:3px;font-size:.95rem;flex:1;min-width:140px}
footer button{background:var(--gold);border:0;color:#0d1832;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.1em;padding:11px 22px;border-radius:3px;cursor:pointer;font-weight:600}
footer .base{max-width:960px;margin:44px auto 0;padding-top:22px;border-top:1px solid var(--line);text-align:center}
footer .tag{color:var(--gold);letter-spacing:.08em}



.light::before,.article::before,.pills::before{content:none;display:none}
.article{position:relative}
.pills{position:relative}
.naturebg{background:linear-gradient(rgba(247,248,251,.93),rgba(247,248,251,.9)),url('../images/beach33-resized.jpg') center/cover}
.naturebg-dark{background:linear-gradient(rgba(5,13,36,.88),rgba(5,13,36,.94)),url('../images/beach33-resized.jpg') center/cover}

/* THEMED HERO BACKGROUNDS */
.hero-future{background:linear-gradient(rgba(5,13,36,.72),rgba(5,13,36,.94)),url('../images/flying-cars.jpg') center/cover}
.hero-dark{background:linear-gradient(rgba(6,10,26,.42),rgba(4,8,20,.86)),url('../images/darkside-hero.jpg') center/cover;position:relative}
.hero-dark h1{text-shadow:0 6px 40px rgba(0,0,0,.75)}
.hero-dark .sub{color:#e4b9b9;text-shadow:0 2px 20px rgba(0,0,0,.8)}
.hero-beach{background:linear-gradient(rgba(5,13,36,.78),rgba(5,13,36,.93)),url('../images/Beach-woman-resized.jpg') center/cover}
.hero-beach2{background:linear-gradient(rgba(5,13,36,.8),rgba(5,13,36,.94)),url('../images/laptop-beach-resized.jpg') center/cover}
.hero-eye{background:linear-gradient(rgba(5,13,36,.8),rgba(5,13,36,.95)),url('../images/eye2-resized.jpg') center/cover}
.hero-phone{background:linear-gradient(rgba(5,13,36,.85),rgba(5,13,36,.95)),url('../images/SmartPhone16.jpg') center/cover}
.hero-bttf{background:linear-gradient(rgba(5,13,36,.62),rgba(5,13,36,.92)),url('../images/2-1024x735.jpg') center/cover}
.sitemap-group{margin-bottom:44px}
.sitemap-group ul{list-style:none;margin-top:14px}
.sitemap-group li{padding:8px 0;border-bottom:1px dotted var(--line);font-size:1.02rem}
.sitemap-group li span{color:var(--muted);font-size:.9rem;display:block}

/* READABLE LINKS ON LIGHT BACKGROUNDS */
.light a,.article a,.audiobox a{color:var(--golddeep);font-weight:600}
.light a:hover,.article a:hover{color:#6e5410}
.light .btn,.article .btn{color:#0d1832}
.light .btn.ghost,.article .btn.ghost{color:var(--golddeep);border-color:var(--golddeep)}

/* QUIZ */
#quiz .q{display:block;background:#fff;border:1px solid var(--lightline);border-radius:8px;padding:14px 18px;margin-bottom:10px;font-size:1.05rem;color:var(--lightink);cursor:pointer;transition:border-color .15s}
#quiz .q:hover{border-color:var(--golddeep)}
#quiz input{margin-right:12px;transform:scale(1.3);accent-color:#a8860a}
#result{background:#fff;border:2px solid var(--golddeep);border-radius:10px;padding:28px 30px;margin-top:30px}
#result h2{color:var(--lightink);font-size:1.5rem}

/* NATURE BAND */
.natureband{padding:110px 0;text-align:center;background:linear-gradient(rgba(5,13,36,.55),rgba(5,13,36,.72)),url('../images/beach33-resized.jpg') center/cover}
.natureband h2{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.natureband p{color:#eef1f8;font-family:Lora,Georgia,serif;font-style:italic;font-size:1.3rem;text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* MANIFESTO — classy edition */
.manifesto .wrap{max-width:680px}
.manifesto p{font-size:1.14rem;line-height:2.1;margin-bottom:30px;color:#454e63}
.manifesto h2{text-align:center;font-size:clamp(1.9rem,4.6vw,2.7rem);letter-spacing:.04em;margin:110px 0 46px;color:var(--lightink)}
.manifesto h2 .partnum{display:block;font-family:Lora,serif;font-size:.82rem;letter-spacing:.42em;color:var(--golddeep);margin-bottom:16px;font-weight:600}
.manifesto h2:first-of-type{margin-top:24px}
.manifesto h2::after{content:"";display:block;width:56px;height:2px;background:var(--gold);margin:22px auto 0}
.manifesto h3{text-align:center;letter-spacing:.18em;margin:60px 0 26px}
.manifesto p > strong:first-child{display:block;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.92rem;color:var(--golddeep);margin-bottom:10px}
.manifesto p:has(> strong:first-child){margin-top:52px}
.manifesto .pull{text-align:center;border:none;padding:36px 20px;margin:56px 0;font-size:clamp(1.5rem,3.6vw,2rem);color:var(--lightink)}
.manifesto .pull::before,.manifesto .pull::after{content:"";display:block;width:56px;height:2px;background:var(--gold);margin:0 auto}
.manifesto .pull::before{margin-bottom:28px}
.manifesto .pull::after{margin-top:28px}
.manifesto > .wrap > p:first-of-type{font-size:1.28rem;color:var(--lightink)}

.hero-couple{background:linear-gradient(rgba(5,13,36,.7),rgba(5,13,36,.9)),url('../images/car-couple.jpg') center/cover}
.mfig{margin:76px 0}
.mfig img{width:100%;border-radius:14px;box-shadow:0 22px 60px rgba(10,20,50,.2);display:block}
.mfig .cap{text-align:center;font-size:.85rem;color:#98a0b5;margin-top:12px;font-style:italic}


/* ARTICLE PAGES */
.article img{display:block;width:100%;max-width:740px;margin:36px auto 0;border-radius:16px;box-shadow:0 22px 60px rgba(10,20,50,.18)}
.article .cap{font-size:.85rem;color:#7d87a0;margin:12px auto 36px;text-align:center;max-width:640px;font-style:italic}
.article .video{margin:36px auto}
.article h2{font-size:1.55rem;letter-spacing:0;color:var(--lightink);margin:52px 0 14px}
.article h3{margin:38px 0 10px}
.article .lead{font-size:1.16rem;line-height:1.75}
.sharebox{margin-top:54px;padding-top:26px;border-top:1px solid rgba(128,138,168,.3)}
.sharebox .lbl{font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:#7d87a0;margin-bottom:14px}
.sharebox a{display:inline-block;margin:0 9px 9px 0;padding:9px 18px;border:1px solid #dfe3ec;border-radius:999px;font-size:.86rem;color:var(--golddeep);text-decoration:none;background:#fff;transition:all .15s;font-family:Montserrat,sans-serif;font-weight:600}
.sharebox a:hover{background:var(--golddeep);color:#fff;border-color:var(--golddeep)}
/* SMALLER FOOTER */
footer{padding:40px 24px 26px;font-size:.85rem}
footer .cols{gap:26px;max-width:1000px}
footer h4{font-size:.76rem;letter-spacing:.16em;margin-bottom:10px}
footer a{padding:2px 0;font-size:.85rem}
footer .base{margin:26px auto 0;padding-top:16px}
footer .base .copy{font-size:.78rem}
/* NOW PLAYING — obvious */
.player .now{background:linear-gradient(180deg,#fffdf3,#fff)}
.player .now .nowlbl{font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;color:var(--golddeep);margin-bottom:6px;display:block}
@keyframes npflash{0%{background:#ffe98a}60%{background:#fff8dc}100%{background:transparent}}
.player .now.flash{animation:npflash .9s ease-out}
ul.tracks li.active .t::after{content:'▶';color:#c9a21f;font-size:.7em;margin-left:9px;vertical-align:2px}

/* ARTICLE BANNERS */
.artbanner{background-size:cover;background-position:center;padding:118px 0 104px;position:relative;text-align:center}
.artbanner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(5,13,36,0),rgba(5,13,36,.55));pointer-events:none}
.artbanner .wrap{position:relative;z-index:2}
.artbanner .meta{font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--gold);margin-bottom:20px;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.artbanner h1{font-size:clamp(34px,5vw,58px);color:#fff;line-height:1.12;text-shadow:0 5px 40px rgba(0,0,0,.6)}
.artbanner .standfirst{margin:20px auto 0;font-family:Lora,Georgia,serif;font-style:italic;font-size:clamp(17px,2.1vw,21px);color:#e4ebf9;max-width:660px;text-shadow:0 2px 22px rgba(0,0,0,.7)}
@media(max-width:700px){.artbanner{padding:70px 0 62px}}

/* BOOK GRID */
.books{display:grid;grid-template-columns:1fr;gap:24px;margin:44px 0 10px}
.bookcard{background:#fff;border:1px solid #e5e8f0;border-radius:18px;box-shadow:0 14px 40px rgba(17,28,51,.09);display:grid;grid-template-columns:148px 1fr;gap:28px;align-items:start;padding:24px;scroll-margin-top:110px}
@media(max-width:620px){.bookcard{grid-template-columns:1fr;gap:18px}}
.bookcard img{width:100%;height:auto;display:block;margin:0;border-radius:10px;box-shadow:0 10px 26px rgba(17,28,51,.18)}
.bookcard .bpad{padding:4px 0 0;display:flex;flex-direction:column}
.bookcard h3{font-family:Montserrat,sans-serif;font-size:1.16rem;color:var(--lightink);margin:0 0 4px;letter-spacing:0;text-transform:none}
.bookcard .by{font-size:.84rem;color:#5f6884;margin-bottom:12px;font-family:Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.bookcard p{font-size:.94rem;color:#4b5468;margin-bottom:18px;flex:1}
.bookcard .buy{display:inline-block;align-self:flex-start;padding:9px 18px;border:1px solid #dfe3ec;border-radius:999px;font-size:.84rem;font-family:Montserrat,sans-serif;font-weight:700;color:var(--golddeep);text-decoration:none;text-align:center}
.bookcard .buy:hover{background:var(--golddeep);color:#fff;border-color:var(--golddeep)}
.gift{font-family:Montserrat,sans-serif;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#8d94ab;margin-top:14px}
.gift a{color:#8d94ab;text-decoration:underline;text-underline-offset:3px}
.gift a:hover{color:var(--gold)}
.hero p.gift,.herosplit p.gift{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#98a3bd;margin-top:16px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.light .gift,.article .gift{color:var(--golddeep)}
/* DONATE */
.donate{background:#0a1533;border:1px solid #1c2a52;border-radius:22px;padding:38px 40px;max-width:760px;margin:0 auto;text-align:center}
.light .donate,.article .donate{background:#fffdf4;border-color:#eadfae}
.donate .dlbl{font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--golddeep);margin-bottom:14px}
.donate h3{font-family:Montserrat,sans-serif;font-size:1.3rem;color:var(--lightink);margin-bottom:12px;letter-spacing:0}
.donate p{max-width:560px;margin:0 auto 20px}
.donate a.btn{margin:6px 6px 0}

/* AUDIO BLOCKS — full width, generous */
.audiobox{background:#fff;border:1px solid #e5e8f0;border-radius:16px;padding:20px 22px;margin:18px 0;box-shadow:0 12px 34px rgba(17,28,51,.07)}
.audiobox .lb{font-family:Montserrat,sans-serif;font-weight:700;font-size:.92rem;color:var(--lightink);margin-bottom:12px;letter-spacing:0;text-transform:none}
.audiobox audio{width:100%;display:block}
.article .audiobox,.light .audiobox{background:#fff}
/* ELSEWHERE LINKS */
.elsewhere{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:820px;margin:34px auto 0}
@media(max-width:760px){.elsewhere{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.elsewhere{grid-template-columns:1fr}}
.elsewhere a{display:block;padding:18px 20px;border:1px solid var(--lightline);border-radius:14px;text-decoration:none;background:#fff;transition:all .18s}
.elsewhere a:hover{border-color:var(--golddeep);transform:translateY(-3px);box-shadow:0 14px 34px rgba(17,28,51,.1)}
.elsewhere b{display:block;font-family:Montserrat,sans-serif;font-size:.98rem;color:var(--lightink);margin-bottom:4px}
.elsewhere span{display:block;font-size:.86rem;color:#6b7590}
.hero-coach{background:linear-gradient(rgba(5,13,36,.55),rgba(5,13,36,.88)),url('../images/beach6.jpg') center/cover}

/* ---- section heads (main stylesheet) ---- */
.sect-head{text-align:center;margin-bottom:54px}
.sect-head .besom{font-family:Besom,Georgia,serif;font-weight:400;font-size:clamp(36px,4.8vw,58px);line-height:1.12;color:var(--text)}
.sect-head .sub{font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.28em;font-size:12px;color:var(--gold);margin-top:14px}
.band .sect-head .besom{color:#fff}
section.light .sect-head .besom,section:not(.band):not(.bignums) .sect-head .besom{color:var(--lightink)}
.band .sect-head .besom{color:#fff}

/* ---- mobile: readable type and thumb-sized targets ---- */
@media(max-width:820px){
  nav a{padding:12px 10px;display:inline-block;line-height:1.2}
  header nav{gap:2px}
  .article p,.article li{font-size:1.07rem;line-height:1.78}
  .article .wrap,.wrap{padding-left:20px;padding-right:20px}
  .article h2{margin-top:48px;padding-top:22px}
  .statcard,.toolrow,.studycard,.helprow,.mythcard{padding:22px 20px}
  .bn b{font-size:clamp(3rem,15vw,4.2rem)}
  .door .dtxt{padding:22px 22px 26px}
  .door>img{height:150px}
  .footer a,footer a{padding:7px 0;display:inline-block}
  .jump a{padding:10px 15px}
  .sharebox a{padding:11px 18px}
}
@media(max-width:520px){
  .artbanner{padding:78px 0 62px}
  .bnrow{gap:40px}
}
/* nothing smaller than 13px anywhere, and nothing under 15px in running text */
.cap,.artdates,.bnsrc,.filmcap .src{font-size:.82rem}
.sc-src{font-size:.86rem;line-height:1.55}
.toolrow .spec{font-size:.95rem;line-height:1.6}
@media(max-width:820px){.artbanner .meta{font-size:.76rem;letter-spacing:.16em}}
.article p,.article li,.article dd,.lede,.statcard .sc-det,.toolrow p,.studycard dd,.helprow p,.glosslist dd{font-size:1.06rem}
a{-webkit-tap-highlight-color:rgba(255,204,0,.25)}

/* ---- the old site's feel: brush headers, angled bands, room to breathe ---- */
.stageband{position:relative;padding:104px 0 96px;margin:0;overflow:hidden}
.stageband::before{content:'';position:absolute;inset:-70px 0;transform:skewY(-2.4deg);z-index:0}
.stageband>*{position:relative;z-index:1}
.stageband.b1::before{background:#7d1b3e}
.stageband.b2::before{background:#8fb59a}
.stageband.b3::before{background:#7fd3e8}
.stageband.b4::before{background:#f0e6cf}
.stageband h2,.stageband .besom{font-family:Besom,Georgia,serif;font-weight:400;color:#fff;
 font-size:clamp(44px,7vw,86px);line-height:1.06;text-align:center;margin:0}
.stageband.b4 h2,.stageband.b4 .besom{color:#2a2118}
.stageband .sub{text-align:center;margin-top:22px;font-family:Montserrat,sans-serif;
 letter-spacing:.26em;text-transform:uppercase;font-size:12px;color:rgba(255,255,255,.82)}
.stageband.b4 .sub{color:#8a7550}

/* room to breathe — the old site was generous and the new one was not */
.article .wrap{max-width:760px}
.article p{line-height:1.85;font-size:1.18rem;line-height:1.86;margin-bottom:26px}
.article h2{margin-top:74px}
section{padding:88px 0}
.wrap.narrow{max-width:760px}
.wrap.narrow p{font-size:1.18rem;line-height:1.86;margin-bottom:26px}

/* bold only on the phrase that matters, and it should look deliberate */
.article strong{font-weight:700;color:var(--lightink)}
.light .wrap.narrow strong{font-weight:700;color:var(--lightink)}
.wrap.narrow strong{font-weight:700;color:var(--text)}
.article b,.wrap.narrow b{font-weight:700}

/* quick-facts rings, as they were */
.rings{display:grid;gap:56px;justify-items:center;margin-top:62px}
@media(min-width:800px){.rings{grid-template-columns:repeat(3,1fr);gap:34px}}
.ring{text-align:center;max-width:280px}
.ring svg{display:block;margin:0 auto}
.ring .rv{font-family:Montserrat,sans-serif;font-weight:600;font-size:40px;fill:#3c4763}
.ring .rl{margin-top:22px;font-size:1.16rem;line-height:1.5;color:#3c4763;font-weight:700}
.factband{background:#fdf8ec;padding:96px 0 90px}
.factband .besom{font-family:Besom,Georgia,serif;font-size:clamp(48px,7vw,84px);color:#1d2333;text-align:center;line-height:1.05}
.factband .fsub{text-align:center;color:#6b7590;margin-top:14px;font-size:1.06rem}
.factband .fsrc{text-align:center;margin-top:56px;font-size:.86rem;color:#5f6884}
.factband .fsrc a{color:#5a6478;border-bottom:1px solid #ccd3e2}

/* ---- big numbers band ---- */
.bignums{background:linear-gradient(rgba(5,13,36,.88),rgba(5,13,36,.96)),url('../images/stock/many-hands-phones.jpg') center/cover;padding:80px 0 70px}
.bignums .sect-head{text-align:center;margin-bottom:0}
.bignums .besom{font-family:Besom,Georgia,serif;font-weight:400;color:#fff;font-size:clamp(40px,5.6vw,66px);line-height:1.1}
.bignums .sub{font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.28em;font-size:12px;color:var(--gold);margin-top:16px}
.bnrow{display:grid;gap:52px;margin-top:60px;text-align:center}
@media(min-width:820px){.bnrow{grid-template-columns:repeat(3,1fr);gap:34px}}
.bn b{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(3.2rem,7.4vw,5.4rem);line-height:.95;color:var(--gold);letter-spacing:-.03em;white-space:nowrap}
.bn span{display:block;margin-top:18px;font-size:1.1rem;line-height:1.5;color:#cfd7ea;max-width:270px;margin-left:auto;margin-right:auto}
.bnsrc{text-align:center;margin-top:56px;font-size:.84rem;color:#7b85a4}
.bnsrc a{color:#a9b4cf;border-bottom:1px solid #35446e;margin-left:8px}
.bnsrc a:hover{color:var(--gold);border-color:var(--gold)}

/* ---- author bio box ---- */
.authorbox{display:flex;gap:24px;align-items:flex-start;margin:60px 0 10px;padding:28px 30px;background:#fff;border:1px solid var(--lightline);border-radius:18px;box-shadow:0 14px 40px rgba(17,28,51,.07)}
.authorbox img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:0 0 88px}
.authorbox .ab-name{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.05rem;color:var(--lightink);margin-bottom:3px}
.authorbox .ab-role{font-family:Montserrat,sans-serif;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--golddeep);margin-bottom:12px}
.authorbox p{font-size:.97rem;line-height:1.66;color:var(--lightmuted);margin:0 0 10px}
.authorbox .ab-links a{font-family:Montserrat,sans-serif;font-size:.82rem;color:var(--lightink);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1px;margin-right:18px}
.authorbox .ab-links a:hover{color:var(--golddeep)}
@media(max-width:620px){.authorbox{flex-direction:column;gap:16px}.authorbox img{width:70px;height:70px;flex:0 0 70px}}
.artdates{font-family:Montserrat,sans-serif;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#5f6884;margin-top:52px;padding-top:18px;border-top:1px solid var(--lightline)}

/* ---- authority page furniture ---- */
.lede{font-size:1.22rem;line-height:1.72;color:var(--lightmuted);max-width:760px;margin:0 0 34px}
.updated{display:inline-block;font-family:Montserrat,sans-serif;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--golddeep);background:#fffaeb;border:1px solid #f2e2ac;border-radius:999px;padding:7px 16px;margin-bottom:26px}
.promise{background:#0a1533;color:#e8ecf7;border-radius:20px;padding:30px 34px;margin:44px 0}
.promise b{color:var(--gold);font-family:Montserrat,sans-serif;display:block;margin-bottom:9px;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.promise p{color:#c3cbe0;margin:0;font-size:1rem;line-height:1.7}
.statgrid{display:grid;gap:20px;margin:30px 0 10px}
@media(min-width:760px){.statgrid{grid-template-columns:1fr 1fr}}
/* Long reference pages were dense. More air between every block. */
.statgrid{gap:30px!important}
.article h2{margin-top:74px;margin-bottom:22px}
.article h3{margin-top:44px}
.article > .wrap > p{max-width:70ch}
.article .statcard + .statcard{margin-top:22px}
.toolrow{padding:30px 32px!important;margin-bottom:24px}
dl,dd{line-height:1.8}
.article ul li,.article ol li{margin-bottom:12px;line-height:1.8}
/* Book covers are 2:3 portrait. Never crop or stretch them into a card ratio. */
img[src*="entranced-cover"],img[src*="Digital-Detox-Book"],img[src*="book-cover"]{
  object-fit:contain!important;aspect-ratio:auto!important;background:#0a1533}
.card img[src*="entranced-cover"]{aspect-ratio:2/3!important;object-fit:contain!important}
.statcard{background:#fff;border:1px solid var(--lightline);border-radius:16px;padding:34px 36px}
.statcard .sc-num{font-family:Montserrat,sans-serif;font-weight:800;font-size:2.15rem;line-height:1.05;color:var(--lightink);margin-bottom:6px}
.statcard .sc-lab{font-family:Montserrat,sans-serif;font-weight:700;font-size:.95rem;color:var(--lightink);margin-bottom:10px}
.statcard .sc-det{font-size:.97rem;line-height:1.62;color:var(--lightmuted);margin-bottom:12px}
.statcard .sc-src{font-size:.79rem;line-height:1.5;color:#5f6884}
.statcard .sc-src a{color:#6b7590}
.statcard .sc-when{display:block;margin-top:3px;font-style:italic}
.mythcard{background:#fffdf7;border:1px solid #eee0bd;border-left:4px solid var(--gold);border-radius:12px;padding:30px 34px;margin-bottom:26px}
.mythcard h3{font-family:Montserrat,sans-serif;font-size:1.02rem;color:var(--lightink);margin:0 0 9px}
.mythcard p{font-size:.98rem;line-height:1.66;color:var(--lightmuted);margin:0}
.mythcard .src{font-size:.79rem;color:#5f6884;margin-top:9px;display:block}
.studycard{border:1px solid var(--lightline);border-radius:18px;padding:36px 38px;margin-bottom:34px;background:#fff}
.studycard h3{font-family:Montserrat,sans-serif;font-size:1.16rem;color:var(--lightink);margin:0 0 6px}
.studycard .sub{font-family:Montserrat,sans-serif;font-size:.86rem;color:var(--golddeep);margin-bottom:16px}
.studycard dl{margin:0}
.studycard dt{font-family:Montserrat,sans-serif;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:#5f6884;margin-top:14px}
.studycard dd{margin:4px 0 0;font-size:1rem;line-height:1.66;color:var(--lightmuted)}
.studycard .cite{font-size:.82rem;color:#5f6884;margin-top:18px;padding-top:14px;border-top:1px solid var(--lightline)}
.toolrow{border:1px solid var(--lightline);border-radius:16px;padding:24px 26px;margin-bottom:16px;background:#fff}
.toolrow h3{font-family:Montserrat,sans-serif;font-size:1.1rem;color:var(--lightink);margin:0 0 4px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.toolrow .tag{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;background:#eef1f8;color:#5a6478;border-radius:999px;padding:4px 11px;font-weight:700}
.toolrow .tag.ev{background:#e8f6ec;color:#256b3a}
.toolrow .tag.free{background:#fff4cc;color:#8a6a00}
.toolrow p{font-size:.99rem;line-height:1.66;color:var(--lightmuted);margin:9px 0 0}
.toolrow .verdict{color:var(--lightink);border-left:3px solid var(--gold);padding-left:14px;margin-top:14px}
.toolrow .spec{font-size:.88rem;color:#5f6884;margin-top:14px;line-height:1.6}
@media(max-width:620px){.toolrow{padding:24px 20px!important;margin-bottom:20px}}
.booklist{margin:0 0 12px}
.bookrow{display:grid;grid-template-columns:112px minmax(0,1fr);gap:24px;align-items:start;padding:28px 0;border-bottom:1px solid var(--lightline)}
.bookrow:last-child{border-bottom:0}
.bookrow .bookcover{display:block;width:112px;border:0;text-decoration:none}
.bookrow .bookcover img{display:block;width:112px;height:168px;object-fit:contain;border-radius:7px!important;background:#fff;box-shadow:0 10px 24px rgba(17,28,51,.16)!important}
.bookrow .bookcopy{min-width:0;display:flex;gap:8px;flex-direction:column;padding-top:2px}
.bookrow .bt{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.06rem;color:var(--lightink)}
.bookrow .bt a{color:var(--lightink);text-decoration:none;border-bottom:1px solid var(--gold)}
.bookrow .bt a:hover{color:var(--golddeep)}
.bookrow .ba{font-family:Montserrat,sans-serif;font-size:.83rem;letter-spacing:.06em;color:var(--golddeep);text-transform:uppercase}
.bookrow p{font-size:.99rem;line-height:1.68;color:var(--lightmuted);margin:0}
@media(max-width:560px){.bookrow{grid-template-columns:76px minmax(0,1fr);gap:16px;padding:24px 0}.bookrow .bookcover,.bookrow .bookcover img{width:76px}.bookrow .bookcover img{height:114px}.bookrow .bt{font-size:1rem}.bookrow .ba{font-size:.72rem}.bookrow p{font-size:.96rem;line-height:1.62}}
.doors{display:grid;gap:38px;margin:44px 0}
@media(min-width:820px){
  /* One door at a time: picture beside the words, room to breathe.
     Scoped to .doors>.door so it beats the later .door{display:block}. */
  .doors>.door{display:grid;grid-template-columns:360px 1fr;align-items:stretch}
  .doors>.door>img{height:100%;min-height:252px}
  .doors>.door>.dtxt{padding:44px 48px;align-self:center}
}
.door{display:block;background:#fff;border:1px solid var(--lightline);border-radius:20px;overflow:hidden;text-decoration:none;transition:all .2s;box-shadow:0 10px 30px rgba(17,28,51,.05)}
.door>img{width:100%;height:200px;object-fit:cover;display:block}
.door .dtxt{padding:32px 34px 36px}
.door:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(17,28,51,.12);border-color:var(--gold)}
.door .dk{font-family:Montserrat,sans-serif;font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--golddeep);margin-bottom:10px}
.door h3{font-family:Montserrat,sans-serif;font-size:1.52rem;color:var(--lightink);margin:0 0 14px;line-height:1.26}
.door p{font-size:1.08rem;line-height:1.78;color:var(--lightmuted);margin:0 0 18px;max-width:56ch}
.door .go{font-family:Montserrat,sans-serif;font-size:.88rem;color:var(--lightink);font-weight:700}
.door.dark{background:#0e1c42;border-color:#1c2a52}
.door.dark h3{color:#fff}
.door.dark p{color:#b9c2da}
.door.dark .go{color:var(--gold)}
.door.dark:hover{border-color:var(--gold)}
.calmpage{background:#050d24;color:#dfe5f3}
.calmwrap{max-width:640px;margin:0 auto;padding:0 26px}
.calmwrap h2{color:#fff;font-family:Montserrat,sans-serif;font-size:1.5rem;margin:52px 0 16px;line-height:1.3}
.calmwrap p{font-size:1.14rem;line-height:1.85;color:#c6cee4;margin:0 0 20px}
.calmwrap .big{font-size:1.5rem;line-height:1.6;color:#fff}
.calmstep{border-left:2px solid var(--gold);padding:4px 0 4px 22px;margin:0 0 26px}
.glosslist dt{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.06rem;color:var(--lightink);margin-top:30px;scroll-margin-top:110px}
.glosslist dd{margin:8px 0 0;font-size:1rem;line-height:1.7;color:var(--lightmuted)}
.jump{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 40px}
.jump a{font-family:Montserrat,sans-serif;font-size:.8rem;background:#eef1f8;color:#3c4763;border-radius:999px;padding:8px 15px;text-decoration:none}
.jump a:hover{background:var(--gold);color:#101a33}
.helprow{border:1px solid var(--lightline);border-radius:16px;padding:22px 26px;margin-bottom:14px;background:#fff}
.helprow h3{font-family:Montserrat,sans-serif;font-size:1.06rem;margin:0 0 4px}
.helprow h3 a{color:var(--lightink);text-decoration:none;border-bottom:1px solid var(--gold)}
.helprow .badge{font-family:Montserrat,sans-serif;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--golddeep);margin-bottom:8px}
.helprow p{font-size:.99rem;line-height:1.66;color:var(--lightmuted);margin:0}

.ytlite{position:absolute;inset:0;cursor:pointer;background:#050d24 center/cover no-repeat}
.ytlite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytlite::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,24,.06),rgba(5,10,24,.20));transition:background .25s}
.ytlite:hover::after{background:linear-gradient(180deg,rgba(5,10,24,0),rgba(5,10,24,.10))}
.ytlite .ytbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;background:rgba(9,14,32,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.4);color:#fff;font-family:Montserrat,sans-serif;font-weight:700;letter-spacing:.06em;font-size:.88rem;padding:15px 30px;border-radius:999px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:11px;white-space:nowrap}
.ytlite:hover .ytbtn{background:var(--gold);color:#101a33;border-color:var(--gold);transform:translate(-50%,-50%) scale(1.05)}
.ytlite:focus-visible .ytbtn,.ytlite .ytbtn:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.ytlite.playing::after,.ytlite.playing .ytbtn{display:none}
.ytlite.realposter::after{background:linear-gradient(180deg,rgba(5,10,24,.18),rgba(5,10,24,.42))}
.ytlite.loading .ytbtn{opacity:.55}

.filmgrid{display:grid;gap:44px;margin-top:8px}
.filmitem .video{margin:0}
.filmcap{margin-top:16px}
.filmcap h3{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.16rem;color:var(--ink);margin:0 0 7px}
.filmcap p{margin:0 0 6px;font-size:1rem;line-height:1.65;color:var(--lightink)}
.filmcap .src{font-family:Montserrat,sans-serif;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#5f6884}
.filmcap .src a{color:#5f6884;text-decoration:underline;text-underline-offset:3px}
.filmcap .src a:hover{color:var(--gold2,#b8860b)}
@media(min-width:900px){.filmgrid{grid-template-columns:1fr 1fr;gap:48px 40px}}

/* ========================= THE READING LAYER =========================
   Everything below is about one thing: how it feels to read 2,000 words on
   this page. The numbers come from how Medium and Substack set their article
   pages, because between them they have had more eyes on more long-form text
   than anyone else — a single large headline, an opening paragraph one size
   up from the body, twenty-pixel body type on a measure of roughly
   sixty-seven characters, section headings in sentence case with far more
   room above them than below, and nothing centred or justified.
   This block is last in the file on purpose: it wins. */

/* measure — 648px of text at 20px lands on 67 characters a line */
.article .wrap{max-width:696px}
.wrap.narrow{max-width:696px}

.article p,.article li,.article dd{font-size:20px;line-height:1.66;color:#33394a}
.article p{margin:0 0 30px}
.wrap.narrow p{font-size:20px;line-height:1.66;margin:0 0 30px}

/* the opening paragraph is the one people decide on, so it gets a size */
.article>.wrap>p:first-of-type,.article .lead,.lede{font-size:23px;line-height:1.58;
  color:#464e63;margin-bottom:38px}
.article>.wrap>p.big:first-of-type{font-size:24px;line-height:1.55;color:#2b3550}

/* sentence case in running text. Uppercase belongs on the nav bar. */
.article h2{text-transform:none;letter-spacing:-.008em;font-size:31px;line-height:1.24;
  margin:82px 0 16px;padding-top:28px}
.article h2:first-child{margin-top:10px}
.article h3{text-transform:none;letter-spacing:0;font-size:22px;line-height:1.32;
  margin:54px 0 12px}
.article h4{text-transform:none;letter-spacing:.01em;font-size:18px;margin:40px 0 10px}
/* a heading belongs to the text under it, not the text above it */
.article h2+p,.article h3+p,.article h4+p,.article h2+ul,.article h3+ul{margin-top:0}

.article ul,.article ol{margin:0 0 30px}
.article ul li,.article ol li{margin-bottom:15px;line-height:1.66}

/* pictures breathe out past the measure, the way they do on Substack */
.article img{max-width:100%;margin:44px auto 0}
.article .cap{margin:14px auto 44px;font-size:15px;font-style:italic;letter-spacing:0;
  text-transform:none;color:#77809a}
.article .video{margin:44px auto}

/* the headline and its standfirst, both a size up */
.artbanner h1{font-size:clamp(38px,5.6vw,66px);line-height:1.1}
.artbanner .standfirst{font-size:clamp(19px,2.4vw,24px);line-height:1.5;max-width:640px}
.article h1{font-size:clamp(34px,5.4vw,54px);line-height:1.12;margin-bottom:14px}

/* the date belongs at the end of what you read, not in front of it */
.updfoot{margin:64px 0 0;padding-top:20px;border-top:1px solid var(--lightline);
  font-family:Montserrat,sans-serif;font-size:14px;letter-spacing:.02em;color:#6b7590}
.updfoot b{font-weight:600;color:#414b63}

/* ---- four typefaces, not five: Montserrat, ABeeZee, Lora, and Besom
        for the manifesto display only ---- */
.article blockquote,.article .standfirst,.artbanner .standfirst,.pull,.article .pull{
  font-family:Lora,Georgia,serif}

/* ---- small labels that were still under 14px ---- */
.mfside li{font-size:14px;line-height:1.45}
.mfp .hint{font-size:14px}
.partmeta,.stepmeta,.spec.small,.factband .fsrc,.bnsrc,.filmcap .src{font-size:14px}
.podrow h3 a,.helprow h3 a{display:inline-block;padding:4px 0}
.podrow a,.linkrow a{min-height:auto}

/* ---- the video plays in the page; this is only a last resort ---- */
.vidalt{display:block;margin-top:10px;font-family:Montserrat,sans-serif;font-size:13px;
  letter-spacing:.02em;color:#7d87a0;text-decoration:none;text-align:right}
.vidalt:hover{color:var(--golddeep);text-decoration:underline}
.video{overflow:visible}

/* ---- search: a fixed nav trigger opens a separate panel, so the header never moves ---- */
.navsearch{--ddsearch-top:clamp(84px,12vh,118px);position:relative;display:flex;align-items:center;
  justify-content:center;flex:0 0 40px;width:40px;height:40px;margin:0 4px 0 0}
.navsearchbtn{position:relative;width:40px;height:40px;flex:0 0 40px;padding:0;border:1px solid #22315c;
  border-radius:50%;background:rgba(255,255,255,.055);color:#9ba5c1;cursor:pointer;
  transition:border-color .18s,background .18s,color .18s}
.navsearchbtn:hover,.navsearchbtn[aria-expanded="true"]{border-color:#52638e;
  background:rgba(255,255,255,.1);color:#fff}
.navsearchbtn:focus-visible,.ddsearchclose:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.navsearchbtn::before{content:'';position:absolute;left:12px;top:11px;width:12px;height:12px;
  border:2px solid currentColor;border-radius:50%}
.navsearchbtn::after{content:'';position:absolute;left:24px;top:24px;width:7px;height:2px;
  background:currentColor;border-radius:2px;transform:rotate(45deg);transform-origin:left center}
.ddsearchback{display:none;position:fixed;inset:0;width:100%;height:100%;padding:0;border:0;
  background:rgba(2,7,20,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  cursor:default;z-index:100}
.ddsearchback.on{display:block}
body.ddsearch-open{overflow:hidden}
.ddsearchshell{--ddsearch-top:clamp(84px,12vh,118px);display:none;position:fixed;top:var(--ddsearch-top);left:50%;
  width:min(640px,calc(100vw - 32px));transform:translateX(-50%);text-align:left;z-index:101}
.ddsearchshell.on{display:block;animation:ddsearchin .16s ease-out}
@keyframes ddsearchin{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.ddsearchshell input#ddq{display:block;width:100%;height:56px;background:#0a1533;
  border:1px solid #52638e;border-radius:12px;padding:0 56px 0 48px;color:#f2f5fc;
  font-family:Montserrat,sans-serif;font-size:16px;letter-spacing:.01em;outline:none;
  box-shadow:0 28px 80px rgba(0,0,0,.55);-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba5c1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:17px 50%;background-size:19px 19px}
.ddsearchshell input#ddq::placeholder{color:#8b96b3}
.ddsearchshell input#ddq:focus{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 28px 80px rgba(0,0,0,.55)}
.ddsearchclose{position:absolute;top:8px;right:8px;width:40px;height:40px;padding:0;border:0;
  border-radius:8px;background:transparent;color:#9ba5c1;cursor:pointer}
.ddsearchclose:hover{background:rgba(255,255,255,.08);color:#fff}
.ddsearchclose::before,.ddsearchclose::after{content:'';position:absolute;left:12px;top:19px;
  width:16px;height:2px;background:currentColor;border-radius:2px}
.ddsearchclose::before{transform:rotate(45deg)}
.ddsearchclose::after{transform:rotate(-45deg)}
.ddsearchshell #ddres{display:none;position:static;width:100%;margin-top:10px;
  background:#0a1533;border:1px solid #22315c;border-radius:12px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);max-height:calc(100vh - var(--ddsearch-top) - 82px);
  overflow-y:auto;padding:8px;text-align:left;z-index:101}
.ddsearchshell #ddres.on{display:block}
.ddsearchshell #ddres .cnt{font-family:Montserrat,sans-serif;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#8b96b3;padding:8px 12px 10px;margin:0}
.ddsearchshell #ddres a{display:block;padding:11px 12px;border-radius:8px;text-decoration:none;
  border:0;background:none}
.ddsearchshell #ddres a:hover,.ddsearchshell #ddres a:focus{background:rgba(255,204,0,.1);outline:none}
.ddsearchshell #ddres .rt{display:block;font-family:Montserrat,sans-serif;font-weight:700;
  font-size:14.5px;line-height:1.35;color:#f2f5fc;margin-bottom:4px;text-transform:none;
  letter-spacing:0}
.ddsearchshell #ddres .rx{display:block;font-size:13px;line-height:1.5;color:#9fabc8;
  margin-bottom:5px}
.ddsearchshell #ddres .rs{display:block;font-family:Montserrat,sans-serif;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--golddeep)}
.ddsearchshell #ddres mark{background:rgba(255,204,0,.26);color:#fff;padding:0 1px;border-radius:2px}
.ddsearchshell #ddres .none{padding:12px;margin:0;font-size:13.5px;color:#9fabc8}
.ddsearchshell #ddres .ddswitch{background:none;border:0;color:var(--gold);font-family:inherit;
  font-size:13px;cursor:pointer;text-decoration:underline;padding:0}
@media(max-width:700px){
  .navsearch{--ddsearch-top:76px;order:-1;width:40px;margin:0 4px 0 0}
  .ddsearchshell{--ddsearch-top:76px;width:calc(100vw - 20px)}
  .ddsearchshell #ddres{max-height:calc(100vh - 148px)}
}

/* ---- the library: a dense scannable list, not one card per screen ---- */
.article.wide .wrap{max-width:1060px}
.article.wide>.wrap>p,.article.wide .lede{max-width:64ch}
.article.wide .studycard{max-width:860px}
.libgrid{display:grid;gap:18px;margin:24px 0 44px}
@media(min-width:860px){.libgrid{grid-template-columns:1fr 1fr;gap:18px 22px}}
.libitem{background:#fff;border:1px solid var(--lightline);border-radius:12px;
  padding:20px 22px 22px;box-shadow:0 6px 20px rgba(17,28,51,.05)}
.libitem h3{margin:0 0 5px;font-size:18px;line-height:1.3;letter-spacing:0;
  text-transform:none;font-family:Montserrat,sans-serif;font-weight:700}
.libitem h3 a{color:var(--lightink);background-image:none;border-bottom:2px solid var(--gold);
  padding-bottom:1px;font-weight:700}
.libitem h3 a:hover{color:var(--golddeep)}
.libitem .who{font-family:Montserrat,sans-serif;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#7d87a0;margin:0 0 11px}
.libitem p{font-size:17px;line-height:1.55;margin:0;color:#3b4256}
.libitem .tag.free{margin-left:6px}
.article .libgrid+h3{margin-top:8px}
.libitem.libbook{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;padding:18px}
.libitem.libbook .libcover{display:block;align-self:start;border:0;background:none}
.libitem.libbook .libcover img{display:block;width:104px;height:156px;margin:0;object-fit:contain;
  border-radius:7px;background:#fff;box-shadow:0 9px 22px rgba(17,28,51,.16)}
.libitem.libbook .libcopy{display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.libitem.libbook .libget{display:inline-block;margin-top:14px;color:var(--golddeep);font-size:13px;
  font-family:Montserrat,sans-serif;font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold)}
@media(max-width:560px){.libitem.libbook{grid-template-columns:78px minmax(0,1fr);gap:14px;padding:16px}
  .libitem.libbook .libcover img{width:78px;height:117px}.libitem.libbook p{font-size:15px}}

/* ---- nothing on a reading page should be too small to read ---- */
.smallprint{font-size:16px!important;line-height:1.62;color:#5f6884;max-width:58ch}
.article .smallprint a,.smallprint a{font-weight:600}
footer .copy{font-size:14px;line-height:1.7}
.artbanner .meta{font-size:clamp(12.5px,1.5vw,14px)}
.article .cap,.cap{font-size:15px}
#quiz .q{font-size:19px;line-height:1.5;padding:16px 20px}
#quiz .q input{transform:scale(1.25)}
.wrap.narrow>p[style*="font-size"]{max-width:58ch}

/* ---- section hero: shared by every section page, so it lives here ---- */
.sechero{position:relative;background:#050d24;background-size:cover;background-position:center;
  padding:104px 24px 92px;text-align:center}
.sechero h1{font-family:Montserrat,sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.1;color:#fff;margin:0 auto;max-width:22ch;
  font-size:clamp(2.1rem,5vw,3.5rem)}
.sechero p{color:#c6cde0;font-size:clamp(1.06rem,1.8vw,1.3rem);line-height:1.6;
  margin:26px auto 0;max-width:52ch;text-transform:none;letter-spacing:0}

/* ---- more room between the sections on a hub page, and before the text ---- */
.secidx{padding:76px 0 104px}
.secgrp{margin:0 0 106px}
.secgrp:last-child{margin-bottom:0}
.secgrp h3.gh{margin:0 0 40px;padding-bottom:24px}
.secgrp .gc{margin:0 0 36px;font-size:1.06rem}
.secidx .cards{gap:44px 30px}
@media(max-width:820px){.secidx{padding:52px 0 72px}.secgrp{margin-bottom:74px}}

/* the dark panels that sit inside a light article keep their own colours —
   the reading layer is late in the file, so it has to say so explicitly */
.article .promise p,.promise p{color:#c3cbe0;font-size:19px;line-height:1.68}
.article .promise b,.promise b{color:var(--gold)}
.article .calmwrap p{color:#c6cee4}

@media(max-width:700px){
  .article p,.article li,.article dd,.wrap.narrow p{font-size:18px;line-height:1.68}
  .article>.wrap>p:first-of-type,.article .lead{font-size:20px}
  .article h2{font-size:26px;margin-top:60px}
  .article h3{font-size:20px}
}

/* homepage opening — the h1 had max-width:none from a later override, so it ran
   the full width of the container while every other text block is held to a
   measure. Both the headline and the standfirst now get one. */
.herosplit h1{max-width:17ch;margin-left:0;margin-right:0;text-wrap:balance}
.herosplit .hlede{max-width:56ch;margin:22px 0 34px;font-size:20px;line-height:1.62;color:#c6cee4}
.herosplit .gift{font-size:15px;color:#98a0bb;margin-top:26px}
.herosplit,.herosplit .hgrid{text-align:left}
.herosplit{min-height:62vh}
.herosplit .hgrid{padding:58px 32px 84px}
.herosplit .hcta{margin:32px 0 0}
@media(max-width:820px){.herosplit{min-height:auto}.herosplit .hgrid{padding:44px 24px 56px}}
@media(max-width:700px){
  .herosplit h1{max-width:14ch}
  .herosplit .hlede{font-size:18px;line-height:1.6;max-width:42ch}
}

/* the self-selection panel, straight under the hero */
/* Every colour here is a literal. --lightink is #0d1832 despite the name, and
   using it on a dark panel is what made this section invisible the first time. */
.choose{background:#050d24;padding:82px 0 90px}
.choose h2{text-align:center;font-size:34px;line-height:1.2;margin:0 0 10px;color:#ffffff}
.choose .chsub{text-align:center;font-size:17px;line-height:1.6;color:#c6cee4;margin:0 auto 46px;max-width:44ch}
.chgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.chdoor{display:block;background:rgba(255,255,255,.045);border:1px solid rgba(185,192,214,.3);
        border-radius:10px;padding:26px 26px 28px;text-decoration:none;
        transition:border-color .2s,transform .2s,background .2s}
.chdoor:hover{border-color:#ffcc00;background:rgba(255,255,255,.08);transform:translateY(-3px)}
.chdoor b{display:block;font-size:20px;line-height:1.32;color:#ffffff;font-weight:700;margin-bottom:11px}
.qlist{list-style:none;padding:0;margin:34px 0 0}
.qlist li{position:relative;padding:0 0 0 30px;margin:0 0 18px;font-size:20px;line-height:1.55;color:#e8ecf6}
.qlist li:before{content:"";position:absolute;left:2px;top:12px;width:12px;height:2px;background:#c9a227}
@media(max-width:700px){.qlist li{font-size:18px;padding-left:24px}}
.chparent{background:rgba(255,204,0,.09);border-color:rgba(255,204,0,.46)}
.chparent b{color:#ffcc00}
.chparent:hover{background:rgba(255,204,0,.15);border-color:#ffcc00}
.chdoor span{display:block;font-size:16.5px;line-height:1.62;color:#c6cee4}
@media(max-width:820px){
  .choose{padding:56px 0 64px}
  .chgrid{grid-template-columns:1fr;gap:14px}
  .choose h2{font-size:27px}
  .choose .chsub{margin-bottom:30px;font-size:16px}
  .chdoor b{font-size:19px}
}

/* Search is the final control at the far right. Its panel is outside the flex
   layout, so opening it cannot push links onto another row. */
@media(min-width:701px){
  nav .in{gap:14px}
  nav .in>a:first-of-type{order:-2}
  .navsearch{order:99;margin-left:4px;margin-right:0}
}

.skip-link{position:fixed;left:12px;top:10px;z-index:100000;transform:translateY(-150%);background:#fff;color:#071229;padding:10px 14px;border-radius:4px;font-weight:700}
.skip-link:focus{transform:none}