/*
Theme Name: DS Briefs
Theme URI: https://dsbriefs.com
Author: DS Briefs
Description: Website theme for DS Briefs, the legal-awareness series by Dikshak Soni. Built on the DS Briefs Brand Kit v1.0. Includes the BCI Rule 36 disclaimer gate and DS Briefs Setup, where all site content is edited from the dashboard.
Version: 1.2.7
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: dsbriefs
*/

/* Brand Kit v1.0 colour system.
   Layout: one continuous Ink Navy canvas; each section lays a soft glow of the
   signature colours over it, so sections blend into each other with no hard edges. */
:root{
  --navy:#0E1B3D;
  --navy-deep:#0A1430;
  --plum:#2C2448;
  --maroon:#5A2838;
  --red:#E00000;      /* accents only */
  --violet:#3D3363;
  --mist:#B9B4CC;
  --paper:#F4EFE6;
  --ink:#121833;
  --text:#FFFFFF;
  --glass:rgba(255,255,255,.055);
  --glass-hover:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.14);
  --grad:linear-gradient(135deg,#0E1B3D 0%,#2C2448 55%,#5A2838 100%);
  --glow-maroon:rgba(90,40,56,.85);
  --glow-plum:rgba(61,51,99,.75);
  --wrap:1120px;
  --gutter:24px;
  color-scheme:dark;

  /* Motion tokens (transitions.dev scale) */
  --duration-stagger:40ms;
  --duration-quick:150ms;
  --duration-fast:250ms;
  --duration-medium:350ms;
  --duration-very-slow:500ms;
  --ease-smooth-out:cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal open / close */
  --modal-open-dur:250ms;
  --modal-close-dur:150ms;
  --modal-scale:0.96;
  --modal-scale-close:0.96;
  --modal-ease:cubic-bezier(0.22, 1, 0.36, 1);
  /* Texts reveal */
  --stagger-dur:500ms;
  --stagger-distance:12px;
  --stagger-stagger:40ms;
  --stagger-blur:3px;
  --stagger-ease:cubic-bezier(0.22, 1, 0.36, 1);
  /* Learn more hover */
  --learn-shift:2px;
  --learn-spread:8deg;
  --learn-in:350ms;
  --learn-out:350ms;
  --learn-ease:cubic-bezier(0.22, 1, 0.36, 1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-anchor:none;background:var(--navy);color:var(--text);font:400 17px/1.65 Inter,system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
/* Logos, marks and the portrait cannot be dragged out of the page or selected. */
img,svg{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
a{color:inherit}
h1,h2,h3,h4{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.12;margin:0;text-wrap:balance}
p{margin:0 0 1em}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}

/* eyebrow: red dash + spaced caps, as on posts */
.eyebrow{display:flex;align-items:center;gap:12px;font:600 13px/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin-bottom:22px}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--red);flex:none}
.u{background:linear-gradient(transparent 88%,var(--red) 88%)}

/* header: translucent signature gradient over a blur, so the page shows through as it scrolls */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:linear-gradient(135deg,rgba(14,27,61,.78) 0%,rgba(44,36,72,.70) 55%,rgba(90,40,56,.62) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px -18px rgba(5,10,30,.9)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{flex:none}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav a{display:flex;align-items:center;min-height:44px;box-sizing:border-box;white-space:nowrap;padding:0 16px;border-radius:10px;text-decoration:none;font:500 15.5px/1 Inter;color:var(--mist)}
.nav a:hover{color:#fff;background:var(--glass)}
.nav .current a{color:#fff;box-shadow:inset 0 -2px 0 var(--red);border-radius:0}
.preview-bar{background:var(--violet);color:#fff;font:500 13px/1.4 Inter;text-align:center;padding:6px var(--gutter)}

/* strip of latest posts under the menu */
.ticker{position:relative;z-index:15;overflow:hidden;background:linear-gradient(90deg,rgba(14,27,61,.9),rgba(44,36,72,.85) 55%,rgba(90,40,56,.8));border-bottom:1px solid var(--line);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker.is-drag{cursor:grabbing}
.ticker-track{display:inline-flex;white-space:nowrap;will-change:transform;padding:11px 0}
.ticker-item{display:inline-flex;align-items:center;gap:9px;padding:0 28px;font:600 12px/1.2 Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);text-decoration:none;-webkit-user-drag:none;position:relative}
.ticker-item::after{content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--red)}
.ticker-item:hover,.ticker-item:focus-visible{color:#fff}
.ticker-item:hover span{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.ticker-icon{display:inline-flex;width:15px;height:15px;color:#fff;flex:none}
.ticker-icon svg{width:15px;height:15px}

/* the continuous canvas */
main{position:relative;overflow:clip;background:var(--navy)}
.hero,.section{position:relative;isolation:isolate}
.hero::before,.section::before{content:"";position:absolute;left:0;right:0;top:-160px;bottom:-160px;z-index:-1;pointer-events:none}

/* hero: the signature 135° gradient, fading out at the bottom into the canvas */
.hero{padding:110px 0 90px}
.hero::before{top:0;bottom:-80px;background:var(--grad);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.hero h1{font-size:clamp(40px,6.4vw,76px);max-width:900px}
.hero .lead{font-size:clamp(18px,2vw,22px);color:var(--mist);max-width:720px;margin-top:28px}
.hero .lead strong{color:#fff;font-weight:600}
.hero .mark{position:absolute;right:max(var(--gutter),env(safe-area-inset-right,0px));bottom:60px;height:40px;opacity:.45}
.hero-links{display:flex;gap:28px;margin-top:44px;flex-wrap:wrap}
.hero-links a{font:600 16px/1 Inter;color:#fff;text-decoration:none;padding-bottom:6px;border-bottom:2px solid var(--line)}
.hero-links a:hover{border-color:var(--red)}
.page-hero{padding:84px 0 56px}
.page-hero h1{font-size:clamp(36px,5vw,60px)}

/* sections: glows alternate sides, echoing the 135° / 315° signature gradient */
.section{padding:96px 0}
.page-hero+.section{padding-top:32px}
/* See also follows the article closely */
.section:has(+.related-sec){padding-bottom:40px}
.section+.related-sec{padding-top:8px}
.section::before{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 75%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 75%,transparent 100%);background:
  radial-gradient(70% 50% at 0% 45%,var(--glow-maroon) 0%,transparent 70%),
  radial-gradient(60% 50% at 70% 55%,var(--glow-plum) 0%,transparent 70%)}
.section:nth-of-type(even)::before{background:
  radial-gradient(70% 50% at 100% 55%,var(--glow-maroon) 0%,transparent 70%),
  radial-gradient(60% 50% at 25% 45%,var(--glow-plum) 0%,transparent 70%)}
.section.quiet::before{opacity:.55}
.section h2{font-size:clamp(28px,3.4vw,40px);max-width:760px}
.section .intro{color:var(--mist);max-width:680px;margin-top:16px;font-size:18px}

/* glass cards, one style everywhere */
.topic,.brief,.channel,.area,.contact .item,.empty{background:var(--glass);border:1px solid var(--line);border-radius:18px}

/* topic cards */
.topics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:48px}
.topic{padding:24px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:#fff}
.topic:hover{background:var(--glass-hover)}
.topic .go{margin-top:auto;padding-top:20px;font:600 14px/1 Inter;color:var(--mist);display:inline-flex;align-items:center;gap:6px}
.topic .go span{color:var(--red)}
.topic .chip{display:inline-flex;align-items:center;background:var(--violet);color:#fff;border-radius:999px;padding:7px 13px;font:600 12px/1 Inter;letter-spacing:.02em}
.topic h3{font-size:19px;margin-top:18px}
.topic p{color:var(--mist);font-size:15.5px;margin-top:10px;margin-bottom:0}

/* brief cards (latest posts) */
.briefs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.brief{display:flex;flex-direction:column;padding:24px;text-decoration:none;color:#fff}
.brief:hover,.channel:hover{background:var(--glass-hover)}
.brief .meta{display:flex;justify-content:space-between;font:600 12px/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.brief h3{font-size:20px;line-height:1.3;margin-top:18px}
.brief .part{align-self:flex-start;margin-top:18px;background:var(--violet);color:#fff;border-radius:999px;padding:7px 13px;font:600 12px/1 Inter;letter-spacing:.02em}
.brief .part+h3{margin-top:14px}
.brief .go{margin-top:auto;padding-top:20px;font:600 14px/1 Inter;color:var(--mist)}
.brief .go span{color:var(--red)}
.more{margin-top:36px}
.more a{font:600 16px/1 Inter;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:5px}

/* card grids on DS Briefs and Legal Aid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.cards.two{grid-template-columns:1fr 1fr;margin-top:40px}
.brief .excerpt{color:var(--mist);font-size:15.5px;margin:12px 0 0}
.brief.static .go{text-decoration:none;color:#fff}
.brief.static .meta{color:#fff}
.jump{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.jump a{font:600 14px/1 Inter;text-decoration:none;color:#fff;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--glass)}
.jump a:hover{border-color:var(--red)}
.feed-sec{scroll-margin-top:80px}
.feed-head .eyebrow{margin-bottom:12px}
.feed-head h2 a.feed-title{border:0;padding:0;font:inherit;color:#fff;display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.feed-head h2 a.feed-title:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:6px;text-decoration-thickness:2px}
.feed-head h2 a.feed-title .t-learn-chevron{color:var(--red)}
/* "View all (n)" rides on the heading: it slides in on hover, and is always shown on touch screens */
.feed-head h2 a.feed-title:hover{text-decoration:none}
.feed-all{font:600 14px/1 Inter;letter-spacing:.02em;color:var(--mist);margin-left:4px;padding-bottom:4px;border-bottom:2px solid var(--red);opacity:0;transform:translateX(-6px);transition:opacity var(--duration-fast) var(--ease-smooth-out),transform var(--duration-fast) var(--ease-smooth-out)}
.feed-title:hover .feed-all,.feed-title:focus-visible .feed-all{opacity:1;transform:none;color:#fff}
@media (hover:none){.feed-all{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.feed-all{transition:none}}
.feed-head a.feed-profile{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--glass);color:#fff;transition:border-color var(--duration-fast) var(--ease-smooth-out),background-color var(--duration-fast) var(--ease-smooth-out)}
.feed-head a.feed-profile:hover{border-color:var(--red);background:var(--glass-hover)}
.feed-head a.feed-profile svg{width:20px;height:20px}
.jump a[aria-current="page"]{background:var(--violet);border-color:var(--violet)}

/* two-column explainer with a checklist (Legal Aid, About) */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.checklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.checklist li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.checklist li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:10px;border:2px solid var(--red);border-radius:50%}
.checklist.cols{columns:2;column-gap:32px;border-top:0}
.checklist.cols li{break-inside:avoid}

/* blog post */
.wrap.narrow{max-width:820px}
.byline{color:var(--mist);margin-top:20px}
.post-cover img{border-radius:18px;margin-bottom:36px}
.prose{font-size:18px;line-height:1.75}
.prose h2{font-size:28px;margin:44px 0 14px}
.prose h3{font-size:22px;margin:32px 0 10px}
.prose p,.prose ul,.prose ol{margin:0 0 20px}
.prose a{border-bottom:2px solid var(--red);text-decoration:none}
.prose blockquote{margin:28px 0;padding:22px 26px;border-left:4px solid var(--red);background:var(--glass);border-radius:0 14px 14px 0;font:600 20px/1.5 "Plus Jakarta Sans"}
.prose blockquote p:last-child{margin:0}

/* blog page: breadcrumbs and actions */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font:500 14px/1.4 Inter;color:var(--mist);margin-bottom:36px}
.crumbs a{color:var(--mist);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.post-actions{display:flex;gap:12px;align-items:center;margin-top:22px;color:var(--mist)}
.post-actions button{background:none;border:0;padding:0;font:600 13px/1 Inter;letter-spacing:.1em;text-transform:uppercase;color:#fff;cursor:pointer;border-bottom:2px solid var(--red);padding-bottom:4px}
.meta-icon{display:inline-flex;align-items:center;gap:7px}
.meta-icon svg{width:13px;height:13px}
.facts dd.profile p{margin:0 0 14px}
.facts dd.profile p:last-child{margin:0}

/* leaving-the-website notice */
dialog.leave{max-width:600px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:20px;padding:36px;color:#fff;background:var(--grad);box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
dialog.leave::backdrop{background:rgba(6,10,28,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.leave h2{font-size:clamp(24px,3.4vw,30px)}
dialog.leave p{color:var(--mist);margin-top:14px;font-size:15.5px}
dialog.leave .leave-to{color:#fff;font-size:14px;overflow-wrap:anywhere}
dialog.leave .leave-to span{display:block;color:var(--mist);margin-top:6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.leave-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.leave-actions button{font:600 15px/1 Inter;padding:14px 22px;border-radius:10px;cursor:pointer;border:2px solid var(--line);background:transparent;color:#fff}
.leave-actions button.primary{background:#fff;color:var(--navy);border-color:#fff}

/* find us */
.channels{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.channel{display:flex;align-items:center;gap:20px;padding:26px;text-decoration:none}
.channel svg{width:38px;height:38px;flex:none;color:#fff}
.channel b{display:block;font:800 20px/1.2 "Plus Jakarta Sans"}
.channel span{display:block;color:var(--mist);font-size:15px;line-height:1.45;margin-top:2px}

/* about */
.about-hero{display:flex;justify-content:space-between;align-items:center;gap:48px}
.about-hero .lead a{color:#fff;text-decoration:none;border-bottom:2px solid var(--red)}
.portrait{width:240px;height:auto;border-radius:18px;border:1px solid var(--line);flex:none}
.facts{display:grid;grid-template-columns:240px 1fr;border-top:1px solid var(--line);margin:0}
.facts dt,.facts dd{margin:0;padding:22px 0;border-bottom:1px solid var(--line)}
.facts dt{font:600 13px/1.6 Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.facts dd{font-size:18px;min-width:0}
.facts dd ul{margin:0;padding-left:20px}
.facts dd li{margin:2px 0}
.facts dd a{text-decoration:none;border-bottom:2px solid var(--red)}
.tbc{background:#fff4c2;color:var(--ink);border-radius:4px;padding:0 6px;font-size:.92em}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.area{border-left:4px solid var(--red);border-radius:12px;padding:16px 18px}
.area b{font:800 17px/1.3 "Plus Jakarta Sans";display:block}
.note{margin-top:40px;color:var(--mist);font-size:15px;max-width:760px}

/* DS Briefs page: embeds */
.feed-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:72px}
.feed-head>div{min-width:0}
.feed-head:first-child{margin-top:0}
.feed-head h2{font-size:28px}
.feed-head a{font:600 15px/1 Inter;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:4px}
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:28px;align-items:start}
.feed .instagram-media{margin:0!important;min-width:0!important;width:100%!important}
.feed iframe.li{width:100%;height:560px;border:0;border-radius:12px;background:#fff}
.empty{padding:30px;color:var(--mist)}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact .item{padding:22px 24px;min-width:0}
.contact .k{font:600 12px/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.contact .v{font:600 17px/1.5 Inter;margin-top:10px;overflow-wrap:anywhere}
.contact .v a{text-decoration:none;border-bottom:2px solid var(--line)}
.contact .v a:hover{border-color:var(--red)}
.contact .v .sub{display:block;font-weight:500;color:var(--mist);font-size:15px;margin-top:4px}
.contact .item.wide{grid-column:1/-1}

/* footer: the canvas settles into a deeper navy */
.site-foot{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);color:var(--mist);padding:72px 0 40px;font-size:14px;border-top:1px solid var(--line)}
.site-foot .row{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.site-foot img{height:30px;width:auto}
.site-foot .links{display:flex;gap:20px;flex-wrap:wrap}
.site-foot .links a{text-decoration:none;color:var(--mist)}
.site-foot .links a:hover{color:#fff}
.site-foot .disc{border-top:1px solid var(--line);margin-top:36px;padding-top:24px;line-height:1.6}
.site-foot .disc b{color:#fff;font-weight:600}

/* BCI Rule 36 disclaimer gate */
.gate{position:fixed;inset:0;z-index:100;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;padding:24px max(24px,env(safe-area-inset-right,0px)) 24px max(24px,env(safe-area-inset-left,0px));overflow:auto}
html.dsb-agreed .gate{display:none}
html:not(.dsb-agreed) body:not(.is-holding){overflow:hidden}
.gate-box{max-width:680px;width:100%;margin:auto}
.gate-box img{height:40px;width:auto;margin-bottom:36px}
.gate-box h2{font-size:clamp(26px,4vw,36px)}
.gate-box p{color:var(--mist);margin-top:18px}
.gate-box ul{color:var(--mist);padding-left:20px;margin:16px 0 0}
.gate-box li{margin:8px 0}
.gate-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.gate-actions button,.gate-actions a{font:600 16px/1 Inter;padding:15px 26px;border-radius:10px;cursor:pointer;text-decoration:none;border:2px solid var(--line);background:transparent;color:#fff}
.gate-actions button{background:#fff;color:var(--navy);border-color:#fff}

/* pre-launch holding page */
.holding{min-height:100vh;background:var(--grad);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:48px 0}
.holding .wrap{width:100%}
.holding img{height:56px;width:auto}
.holding h1{font-size:clamp(34px,5vw,56px);margin-top:48px;max-width:760px}
.holding p{color:var(--mist);margin-top:20px;max-width:620px;font-size:18px}
.holding .social{display:flex;gap:24px;margin-top:36px;flex-wrap:wrap}
.holding .social a{color:#fff;text-decoration:none;font-weight:600;border-bottom:2px solid var(--line);padding-bottom:4px}
.holding small{display:block;color:var(--mist);margin-top:72px;font-size:13px;max-width:760px}

@media (max-width:1100px){
  .topics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .topic h3{font-size:21px}
}
@media (max-width:960px){
  .topics{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:28px}
  .briefs{grid-template-columns:1fr}
  .areas{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .cards,.cards.two{grid-template-columns:1fr}
  .checklist.cols{column-gap:16px}
  .checklist li{padding:9px 0 9px 20px;font-size:14.5px}
  .checklist li::before{top:15px;width:8px;height:8px}
  .page-hero+.section{padding-top:12px}
  .hero{padding:56px 0 64px}
  .page-hero{padding:36px 0 24px}
  .section{padding:44px 0}
  .areas{grid-template-columns:1fr 1fr;gap:10px}
  .area{padding:12px 14px;border-radius:10px;border-left-width:3px}
  .area b{font-size:14.5px}
  .channels{gap:12px;margin-top:28px}
  .channel{gap:14px;padding:16px 18px;border-radius:14px}
  .channel svg{width:26px;height:26px}
  .channel b{font-size:17px}
  .channel span{font-size:14px;line-height:1.45}
  .facts dt,.facts dd{padding:14px 0}
  .facts dd{font-size:16px}
  .contact{gap:12px}
  .contact .item{padding:16px 18px;border-radius:14px}
  .contact .k{font-size:11px}
  .contact .v{font-size:15.5px;margin-top:8px}
  .contact .v .sub{font-size:14px}
  .section::before{top:-100px;bottom:-100px}
  .topics,.channels,.contact{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .facts dt{padding-bottom:0;border-bottom:0}
  .feed{grid-template-columns:1fr}
  .about-hero{flex-direction:column-reverse;align-items:flex-start;gap:28px}
  .portrait{width:150px}
  .cards,.briefs,.topics,.feed{gap:12px}
  .brief,.topic{padding:16px 18px;border-radius:14px}
  .brief .meta{font-size:11px}
  .brief h3,.topic h3{font-size:17px;line-height:1.3;margin-top:10px}
  .brief .part{margin-top:10px;padding:5px 10px;font-size:11px}
  .brief .part+h3{margin-top:8px}
  .brief .excerpt,.topic p{font-size:14.5px;line-height:1.5;margin-top:6px}
  .brief .go,.topic .go{padding-top:12px;font-size:13px}
  .topic .chip{padding:5px 10px;font-size:11px}
  .briefs{margin-top:28px}
  .topics{margin-top:28px}
}
/* small screens: logo stays left, menu items stay on the right and wrap onto a second line */
@media (max-width:820px){
  .site-head .wrap{height:auto;min-height:64px;padding-top:10px;padding-bottom:10px;gap:14px}
  .brand img{height:26px}
  #site-nav{flex:1;min-width:0}
  .nav{flex-wrap:wrap;justify-content:flex-end;gap:4px 4px}
  .nav a{min-height:40px;font:600 12.5px/1 Inter;letter-spacing:.06em;text-transform:uppercase;padding:0 10px}
}
@media (max-width:480px){
  .site-head .wrap{gap:10px}
  .brand img{height:24px}
  .nav{gap:2px 0}
  .nav a{font-size:12px;letter-spacing:.04em;padding:0 8px}
  .nav .current a{box-shadow:inset 0 -2px 0 var(--red)}
}
@media (max-width:820px){
  .site-head .wrap,.brand img,.nav a{transition:min-height var(--duration-fast) var(--ease-smooth-out),padding var(--duration-fast) var(--ease-smooth-out),height var(--duration-fast) var(--ease-smooth-out),font-size var(--duration-fast) var(--ease-smooth-out)}
  .site-head.is-tucked .wrap{min-height:48px;padding-top:4px;padding-bottom:4px}
  .site-head.is-tucked .brand img{height:20px}
  .site-head.is-tucked .nav a{min-height:28px;font-size:11px;padding:0 7px}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .site-head .wrap,.brand img,.nav a{transition:none}
}
/* blog posts: alignment chosen in the post editor (left, centre, right, and the Justified style) */
.has-text-align-left{text-align:left}
.has-text-align-center{text-align:center}
.has-text-align-right{text-align:right}
.has-text-align-justify,.is-style-justify{text-align:justify}

/* formatted text from DS Briefs Setup: paragraphs, lists, links and alignment */
.rich>:first-child{margin-top:0}
.rich p{margin:0 0 12px}
.rich p:last-child,.rich ul:last-child,.rich ol:last-child{margin-bottom:0}
.rich ul,.rich ol{margin:0 0 12px;padding-left:20px}
.rich a{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.rich strong,.rich b{color:#fff;font-weight:600}
.hero .lead.rich p{margin:0 0 10px}
.note.rich p{margin:0 0 6px}
.site-foot .disc.rich p{margin:0}
.gate-box .rich{color:var(--mist);margin-top:18px}
.gate-box .rich ul{padding-left:20px;margin:12px 0 0}
dialog.leave .rich{color:var(--mist);margin-top:14px;font-size:15.5px}
.closing-sec{padding-top:0}

/* six latest briefs on the home page: three to a row */
.latest-sec .briefs{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.latest-sec .briefs{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.latest-sec .briefs{grid-template-columns:1fr}}

/* more than five series: the row scrolls sideways */
.topics.is-many{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.topics.is-many .topic{flex:0 0 min(260px,78vw);scroll-snap-align:start}

/* series filter on a section's own page */
.series-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.series-filter button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--glass);color:var(--mist);font:600 13.5px/1 Inter;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-smooth-out),color var(--duration-fast) var(--ease-smooth-out)}
.series-filter button:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.series-filter button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
.is-filtered-out{display:none!important}

/* waiting pages: countdown to going live, then fireworks */
.holding .holding-text{color:var(--mist);margin-top:20px;max-width:620px;font-size:18px}
.countdown{margin-top:40px}
.countdown-label{font:600 13px/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);display:flex;align-items:center;gap:12px}
.countdown-label::before{content:"";width:28px;height:3px;background:var(--red)}
.countdown-units{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.countdown-units div{min-width:92px;padding:16px 14px 12px;border-radius:16px;background:var(--glass);border:1px solid var(--line);text-align:center}
.countdown-units b{display:block;font:800 clamp(30px,5vw,44px)/1 "Plus Jakarta Sans";font-variant-numeric:tabular-nums;color:#fff}
.countdown-units span{display:block;margin-top:8px;font:600 11px/1 Inter;letter-spacing:.12em;padding-left:.12em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.countdown-when{margin-top:12px;color:var(--mist);font-size:14px}
.countdown.is-zero .countdown-units b{color:var(--red)}
.fireworks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;opacity:0;transition:opacity .3s ease-out}
.fireworks.is-on{opacity:1}
@media (max-width:480px){.countdown-units div{min-width:0;flex:1}}

/* Coming Soon / Maintenance page: the brand gradient fills the whole screen, behind the phone's status bar and the
   browser's bottom bar too, and stays in place while the page scrolls or is pulled down to refresh. */
/* Safari paints the strip behind the clock, behind its address bar and during pull-to-refresh in one flat colour.
   The diagonal gradient fades into that same colour at the top and bottom edges, so no line shows where they meet. */
html.is-holding-page,html.is-holding-page body{background:#211E3F}
.holding-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#211E3F 0,rgba(33,30,63,0) 18%,rgba(33,30,63,0) 78%,#211E3F 100%),var(--grad)}
.is-holding .holding{position:relative;z-index:1;background:transparent}
/* Coming Soon / Maintenance page: on a computer everything fits one screen at 100%, sized by the screen's height;
   on a phone the page may scroll a little, and keeps clear of the browser's bottom bar. Pull-to-refresh stays on. */
html,body{overscroll-behavior-y:auto}
.holding{min-height:100vh;min-height:100svh;box-sizing:border-box;padding:clamp(20px,5vh,48px) 0}
.holding img{height:clamp(34px,6.5vh,56px)}
.holding h1{font-size:clamp(28px,min(5vw,6.4vh),56px);margin-top:clamp(16px,4vh,48px)}
.holding .holding-text{margin-top:clamp(10px,2vh,20px);font-size:clamp(15px,2.1vh,18px)}
.countdown{margin-top:clamp(16px,3.5vh,40px)}
.countdown-units{margin-top:clamp(8px,1.6vh,16px)}
.countdown-units div{padding:clamp(8px,1.6vh,16px) 14px clamp(7px,1.3vh,12px)}
.countdown-units b{font-size:clamp(26px,min(5vw,5vh),44px)}
.countdown-units span{margin-top:clamp(4px,.9vh,8px)}
.countdown-when{margin-top:clamp(6px,1.2vh,12px)}
.holding .social{margin-top:clamp(14px,3vh,36px)}
.holding small{margin-top:clamp(16px,4vh,72px)}
.holding .holding-text p{margin:0}
@media (max-width:640px){
  /* Centred between the clock and Safari's bottom bar. 100svh already stops above that bar, so the padding is the same
     on both sides; extra bottom padding made the page taller than the screen, and it then sat at the top. */
  .holding{justify-content:center;padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .holding img{height:40px}
  .holding h1{font-size:clamp(28px,8.4vw,40px);margin-top:28px}
  .holding .holding-text{font-size:16px;line-height:1.55}
  .countdown{margin-top:24px}
  .countdown-units{gap:8px}
  .countdown-units div{padding:12px 4px 10px;border-radius:14px}
  .countdown-units b{font-size:clamp(24px,7.5vw,32px)}
  .countdown-units div{flex:1 1 0;min-width:0;text-align:center}
  .countdown-units span{font-size:clamp(8.5px,2.5vw,10px);letter-spacing:.04em;padding-left:.04em}
  .holding .social{flex-direction:column;gap:14px;margin-top:24px}
  .holding .social a{align-self:flex-start}
  .holding small{margin-top:28px}
}

/* ---------- motion (transitions.dev) ---------- */

/* Modal open / close: the leaving notice and the disclaimer card */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}
dialog.leave::backdrop{opacity:0;transition:opacity var(--modal-open-dur) var(--modal-ease)}
dialog.leave.is-open::backdrop{opacity:1}
.gate{transition:opacity var(--duration-medium) var(--ease-smooth-out)}
.gate.is-leaving{opacity:0;pointer-events:none}

/* Texts reveal: banner and disclaimer lines rise in, one after another */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
.t-stagger-line--5 { transition-delay: calc(var(--stagger-stagger) * 4); }
.t-stagger-line--6 { transition-delay: calc(var(--stagger-stagger) * 5); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}
.eyebrow.t-stagger-line,.hero-links.t-stagger-line,.gate-actions.t-stagger-line,.crumbs.t-stagger-line,.post-actions.t-stagger-line,.jump.t-stagger-line{display:flex}
/* hold the banner text back until the reveal is ready, so it never flashes first */
html.dsb-motion:not(.dsb-revealed) .hero .wrap:not(.about-hero) > *,
html.dsb-motion:not(.dsb-revealed) .about-hero > div:first-child > *,
html.dsb-motion:not(.dsb-revealed) .gate-box > *{opacity:0}

/* Learn more hover: the card's chevron slides and opens into an arrow */
.t-learn-chevron {
  display: inline-flex;
  transform: translateX(0);
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn-arm {
  transform-box: view-box;
  transform-origin: 10px 8px;
  vector-effect: non-scaling-stroke;
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn:hover .t-learn-chevron { transform: translateX(var(--learn-shift)); transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm { transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm-top { transform: rotate(var(--learn-spread)); }
.t-learn:hover .t-learn-arm-bot { transform: rotate(calc(var(--learn-spread) * -1)); }
.t-learn-chevron svg{width:16px;height:16px;fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round}
.go{display:inline-flex;align-items:center;gap:6px}

/* cards lift a little on hover */
.topic,.brief,.channel,.area{transition:transform var(--duration-fast) var(--ease-smooth-out),background-color var(--duration-fast) var(--ease-smooth-out),border-color var(--duration-fast) var(--ease-smooth-out)}
.brief:hover,a.channel:hover,.topic:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.24)}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
  .t-stagger-line { transition: none !important; }
  .t-learn-chevron, .t-learn-arm { transition: none !important; }
  .gate,dialog.leave::backdrop,.topic,.brief,.channel,.area{transition:none!important}
  .brief:hover,a.channel:hover,.topic:hover{transform:none}
}

@media print{
  .gate,.preview-bar,.site-head,.ticker,.site-foot .links,.post-actions,.crumbs,dialog.leave{display:none!important}
  body,main{background:#fff!important;color:#000}
  .hero::before,.section::before{display:none}
  .hero,.section{padding:24px 0}
  .eyebrow,.byline,.note,.prose,.site-foot{color:#333!important}
  .prose a{color:#000}
  .site-foot{background:none;border:0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}