:root{
  --bg:#FFF9FB; --surface:#FFFFFF; --ink:#2B1B3D; --muted:#75657F;
  --accent:#E4007C; --accent-2:#7B2FF7; --line:#F0DCE8;
  --head:'Fraunces',Georgia,serif; --body:'Inter',system-ui,sans-serif; --ui:'Poppins',system-ui,sans-serif;
  --radius:14px; --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--head);line-height:1.2;margin:0 0 .5em;color:var(--ink);letter-spacing:-.022em}
h1{font-size:clamp(1.9rem,4.4vw,3rem)}
h2{font-size:clamp(1.4rem,2.6vw,2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1.1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;background:var(--accent);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
.readbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:60}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:#FFFFFF;border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(228,0,124,.07)}
.header-inner{display:flex;align-items:center;gap:18px;min-height:76px}
.brand img{height:44px;width:auto}
/* The nav sits on ONE line. nowrap + the 1024px collapse below guarantee it:
   the search box that used to share this row is gone, so there is room. */
.primary-nav{margin-left:auto}
/* gap and size flex with the viewport so the row keeps fitting on one line on
   narrower desktops instead of overflowing; both settle at their max on wide
   screens and never grow past the original 18px / .86rem. */
.primary-nav ul{display:flex;gap:clamp(10px,1.35vw,18px);list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.primary-nav a{font-family:var(--ui);font-size:clamp(.76rem,.95vw,.86rem);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#2B1B3D;padding:6px 0;display:block;border-bottom:2px solid transparent;white-space:nowrap}
.primary-nav a:hover{color:var(--accent);border-bottom-color:var(--accent);text-decoration:none}
/* .site-search is no longer in the header; it is only the search page's own box */
.site-search{display:flex;gap:6px}
.page-search{margin:0 0 18px;max-width:520px}
.page-search input{flex:1}
.site-search input{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:8px 12px;font:inherit;font-size:.85rem;width:150px;color:var(--ink)}
.site-search button{border:0;background:var(--accent);color:#fff;border-radius:var(--radius);padding:8px 14px;font-family:var(--ui);font-weight:700;font-size:.8rem;cursor:pointer}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.nav-toggle span{width:24px;height:2px;background:var(--ink);display:block}

/* hero */
.hero{padding:34px 0 10px;background:linear-gradient(180deg,#FDEBF4 0%,#FFF9FB 100%)}
.hero-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:34px;align-items:start}
.hero-main{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 22px rgba(43,27,61,.08)}
.hero-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero-copy{padding:24px}
.hero-copy h1{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:.3em 0}
.hero-copy h1 a{color:var(--ink)}
.rail-title{font-size:1rem;font-family:var(--ui);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:8px}
.rail{list-style:none;margin:0;padding:0;counter-reset:r}
.rail li{border-bottom:1px solid var(--line)}
.rail a{display:flex;gap:12px;align-items:center;padding:12px 0;color:var(--ink)}
.rail a:hover{text-decoration:none;color:var(--accent)}
.rail img{width:72px;height:72px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.rail strong{display:block;font-family:var(--head);font-size:.98rem;line-height:1.3;font-weight:700}
.rail em{font-style:normal;font-size:.76rem;color:var(--muted);font-family:var(--ui)}

/* cards */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 22px rgba(43,27,61,.08);display:flex;flex-direction:column;transition:transform .18s ease}
.card:hover{transform:translateY(-3px)}
.card-media img{width:100%;aspect-ratio:8/5;object-fit:cover}
.card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}
.card-body h3{margin:0;font-size:1.06rem;line-height:1.3}
.card-body h3 a{color:var(--ink)}
.card-body p{margin:0;font-size:.9rem;color:var(--muted)}
.tag{display:inline-block;font-family:var(--ui);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#C1006A;background:#FDE3F0;padding:4px 9px;border-radius:99px;align-self:flex-start}
.meta{font-family:var(--ui);font-size:.76rem;color:var(--muted);margin:0}
.center{text-align:center;margin-top:28px}

/* sections */
.cat-block{margin:52px auto}
.cat-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;border-bottom:3px solid #E4007C;padding-bottom:12px;margin-bottom:26px}
.cat-head h2{margin:0}
.cat-head p{margin:0;color:var(--muted);font-size:.92rem;flex:1 1 260px}
.more{font-family:var(--ui);font-weight:700;font-size:.82rem}
.latest{margin:56px auto}
.latest h2{border-bottom:3px solid #E4007C;padding-bottom:12px;margin-bottom:26px}
.strip{background:linear-gradient(120deg,#7B2FF7,#E4007C);color:#FFFFFF;padding:44px 0;margin-top:56px}
.strip h2{color:#FFFFFF;margin:0 0 6px}
.strip p{margin:0;opacity:.85}
.strip-in{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* forms */
.sub-form{display:flex;gap:8px;flex-wrap:wrap}
.sub-form input[type=email]{flex:1 1 200px;min-width:180px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:.92rem;background:#fff;color:#111}
.sub-form button{border:0;background:var(--accent);color:#fff;padding:12px 22px;border-radius:var(--radius);font-family:var(--ui);font-weight:800;cursor:pointer;font-size:.88rem}
.sub-form button:hover{background:var(--accent-2)}
.sub-form.big input{padding:15px 16px}
.sub-form.big button{padding:15px 30px}
.center-form{justify-content:center;margin:0 0 32px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 24px;border-radius:var(--radius);font-family:var(--ui);font-weight:800;font-size:.88rem;border:2px solid var(--accent)}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent);color:#fff}
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;margin-bottom:56px}
.field{margin-bottom:18px;display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--ui);font-weight:700;font-size:.85rem}
.field input,.field select,.field textarea{padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:.95rem;background:var(--surface);color:var(--ink)}
.field.check{flex-direction:row;align-items:flex-start;gap:10px}
.field.check label{font-weight:400;font-size:.85rem;color:var(--muted)}

/* article */
.breadcrumb-wrap{padding:16px 20px 0}
.breadcrumb{font-family:var(--ui);font-size:.78rem;color:var(--muted)}
.breadcrumb span{margin:0 4px}
.page-head{padding:34px 20px 22px;border-bottom:3px solid #E4007C;margin-bottom:34px}
.page-head p{color:var(--muted);max-width:70ch;margin:0}
.post-head{padding:26px 20px 18px;text-align:left}
.post-head h1{margin:.25em 0}
.standfirst{font-size:1.14rem;color:var(--muted);max-width:62ch;}
.byline{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-top:20px;text-align:left;flex-wrap:wrap}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}
.by{margin:0;font-family:var(--ui);font-size:.86rem;font-weight:700}
.share{margin-left:auto;display:flex;gap:8px}
.share a{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--ui);font-weight:800;font-size:.8rem}
.share a:hover{background:var(--accent-2);text-decoration:none}
.hero-fig{margin:0 auto 30px}
.hero-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}
figcaption{font-family:var(--ui);font-size:.76rem;color:var(--muted);padding-top:8px}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
.post-body{max-width:72ch}
.post-body h2{margin-top:1.7em;}
.post-body h3{margin-top:1.4em;font-size:1.05rem}
.post-body p,.prose p{font-size:1.06rem;line-height:1.75}
.post-body ul,.post-body ol,.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.2em}
.post-body li,.prose li{margin-bottom:.55em}
.post-body ol{}
.inline-fig{margin:28px 0}
.inline-fig img{border-radius:var(--radius)}
.callout{background:#FDF1F7;border-left:4px solid var(--accent);padding:18px 20px;border-radius:var(--radius);margin:26px 0}
.callout p{margin:0}
.callout-mark,.tip-mark{display:block;font-family:var(--ui);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.tipbox{background:#FFF7E6;border:1px dashed var(--accent-2);padding:18px 20px;border-radius:var(--radius);margin:26px 0}
.tipbox p{margin:0}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin-bottom:30px}
.toc h2{margin:0 0 10px;font-size:1rem;font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em}
.toc ol{margin:0;padding-left:1.2em}
.toc li{margin-bottom:.35em;font-size:.94rem}
.post-tags{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0}
.post-tags a{font-family:var(--ui);font-size:.76rem;background:var(--surface);border:1px solid var(--line);padding:5px 11px;border-radius:99px;color:var(--muted)}
.inline-sub{background:linear-gradient(120deg,#7B2FF7,#E4007C);color:#FFFFFF;padding:26px;border-radius:var(--radius);margin:34px 0}
.inline-sub h2{color:#FFFFFF;margin-top:0;font-size:1.25rem}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:34px 0}
.pn{display:block;padding:16px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--head);font-weight:700;color:var(--ink);font-size:.95rem}
.pn span{display:block;font-family:var(--ui);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:4px}
.pn.next{text-align:right}
.pn:hover{border-color:var(--accent);text-decoration:none}
.sidebar{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.side-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.side-box h3{margin:0 0 12px;font-size:.88rem;font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.side-list{margin:0;padding-left:1.1em;font-size:.92rem}
.side-list li{margin-bottom:.6em}
.side-list a{color:var(--ink)}
.side-list a:hover{color:var(--accent)}
.related{margin:56px auto}
.related h2{border-bottom:3px solid #E4007C;padding-bottom:12px;margin-bottom:26px}
.linklist{list-style:none;padding:0}
.linklist li{padding:8px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.linklist span{font-family:var(--ui);font-size:.76rem;color:var(--muted)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:10px auto 46px}
.person{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center}
.person img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 12px}
.person h3{margin:0 0 2px}
.person .role{font-family:var(--ui);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:10px}
.person p{font-size:.9rem;color:var(--muted);margin:0}

/* ads */
.adslot{background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 10px,#FDF1F7 10px,#FDF1F7 20px);border:1px solid var(--line);border-radius:var(--radius);min-height:110px;display:grid;place-items:center;margin:34px 0}
.adslot span{font-family:var(--ui);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.adslot.wide{min-height:120px}
.adslot.tall{min-height:280px;padding:0}

/* footer */
.site-footer{background:#2B1B3D;color:#F5E9F2;margin-top:60px;padding:48px 0 22px}
.site-footer h4{color:#F5E9F2;font-family:var(--ui);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.site-footer a{color:#F5E9F2;opacity:.85}
.site-footer a:hover{opacity:1;color:#FFC531}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:34px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:.5em;font-size:.9rem}
.foot-brand p{font-size:.9rem;opacity:.8}
.foot-brand img{margin-bottom:14px}
.foot-social{margin-top:12px}
.social-link{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);font-family:var(--ui);font-size:.85rem;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s}
.social-link:hover,.social-link:focus-visible{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.social-link svg{flex:none}
.foot-sub p{font-size:.88rem;opacity:.8}
.foot-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;opacity:.8}
.foot-bottom p{margin:0}

/* cookie bar + to top */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;background:#2B1B3D;color:#F5E9F2;padding:14px 18px;border-radius:var(--radius);display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;z-index:70;box-shadow:0 10px 34px rgba(0,0,0,.25)}
.cookie-bar[hidden]{display:none!important}
.cookie-bar p{margin:0;font-size:.85rem}
.cookie-bar a{color:#FFC531}
.cookie-bar button{background:var(--accent);color:#fff;border:0;padding:9px 20px;border-radius:var(--radius);font-family:var(--ui);font-weight:800;cursor:pointer}
.to-top{position:fixed;right:18px;bottom:80px;width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:1.1rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;z-index:65}
.to-top.show{opacity:1;pointer-events:auto}

/* standalone pages */
.standalone{background:var(--bg)}
.confirm{text-align:center;padding:64px 20px 80px}
.confirm-logo{margin:0 auto 30px;height:46px;width:auto}
.confirm-icon{width:76px;height:76px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:2.1rem;margin:0 auto 22px}
.confirm-icon.warn{background:#c0392b}
.confirm-icon.open{background:var(--accent-2)}
.lead{font-size:1.12rem;color:var(--muted)}
.confirm-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin:30px 0;text-align:left}
.confirm-box h2{margin-top:0;font-size:1.15rem}
.rec{width:100%;border-collapse:collapse;font-size:.9rem}
.rec th{text-align:left;padding:8px 12px 8px 0;color:var(--muted);font-family:var(--ui);font-weight:700;white-space:nowrap;border-bottom:1px solid var(--line)}
.rec td{padding:8px 0;border-bottom:1px solid var(--line)}
.confirm-links{font-family:var(--ui);font-size:.86rem}
.muted{color:var(--muted);font-size:.85rem}
.err{text-align:center;padding:60px 20px}
.err-num{font-family:var(--head);font-size:5rem;color:var(--accent);margin:0;line-height:1}
.err .grid{margin-top:40px;text-align:left}

/* responsive */
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .post-layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr}
}
/* Nav collapse. The 7 uppercase items need ~700px next to the 210px logo, so
   below ~1000px they can no longer sit on one line - and because the row is
   now flex-wrap:nowrap it would overflow sideways rather than wrap to two
   lines. Hand over to the hamburger here instead. Keep this breakpoint above
   the width at which the row stops fitting if you add menu items. */
@media (max-width:1024px){
  .nav-toggle{display:flex}
  .primary-nav{display:none;width:100%;order:5;padding-bottom:14px;margin-left:0}
  .primary-nav.open{display:block}
  .primary-nav ul{flex-direction:column;gap:0;flex-wrap:nowrap}
  .primary-nav li{border-bottom:1px solid var(--line)}
  .primary-nav a{padding:12px 0;font-size:.86rem}
  .header-inner{flex-wrap:wrap}
}
@media (max-width:760px){
  body{font-size:16px}
  .page-search{max-width:none}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .prevnext{grid-template-columns:1fr}
  .pn.next{text-align:left}
  .foot-grid{grid-template-columns:1fr}
  .strip-in{flex-direction:column;align-items:stretch}
  .share{margin-left:0;width:100%}
}
.hero-copy .tag{font-size:.72rem}.card-lg{grid-column:span 2}