/* Publishing CMS - frontend theme
   Idea: pages that are built to be quoted. The answer block reads like a
   highlighted passage in a source document; citations get the same treatment. */

:root{
  --ink:#16202b; --ink-soft:#4b5b6b; --paper:#ffffff; --mist:#eef2f6;
  --rule:#d7dee7; --lapis:#1b4de4; --lapis-dark:#12349b; --highlight:#ffe08a;
  --measure:68ch; --radius:3px;
  --sans:"Inter","Noto Sans Devanagari",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Newsreader","Noto Serif Devanagari",Georgia,"Iowan Old Style",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans);text-rendering:optimizeLegibility}
img,picture,video{max-width:100%;height:auto}
a{color:var(--lapis);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--lapis-dark)}
:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}
.wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:99}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead__in{display:flex;align-items:center;gap:2rem;padding:1.1rem 0;justify-content:space-between}
.masthead__brand{font:600 1.15rem/1 var(--serif);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.masthead__brand span{display:block;font:400 .68rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:.35rem}
.masthead nav{margin-left:auto;display:flex;gap:1.4rem;flex-wrap:wrap}
.masthead nav a{font-size:.92rem;color:var(--ink);text-decoration:none}
.masthead nav a:hover{text-decoration:underline}

/* ---------- article ---------- */
.article{padding:3rem 0 4rem;max-width:var(--measure);margin:0 auto}
.article__main{min-width:0}
.eyebrow{font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lapis)}
h1{font:600 clamp(2rem,4.4vw,3rem)/1.12 var(--serif);letter-spacing:-.02em;margin:.6rem 0 .9rem}
h2{font:600 1.55rem/1.25 var(--serif);margin:2.6rem 0 .8rem;scroll-margin-top:1.5rem}
h3{font:600 1.2rem/1.3 var(--serif);margin:2rem 0 .6rem;scroll-margin-top:1.5rem}
.byline{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;color:var(--ink-soft);font-size:.9rem;border-bottom:1px solid var(--rule);padding-bottom:1.1rem}
.byline a{color:var(--ink)}
.prose>p:first-of-type{font-size:1.12rem}
.prose p,.prose ul,.prose ol{margin:0 0 1.15rem}
.prose li{margin-bottom:.4rem}
.prose blockquote{margin:1.8rem 0;padding-left:1.2rem;border-left:3px solid var(--highlight);font:italic 1.1rem/1.6 var(--serif);color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--rule);padding:.6rem .7rem;text-align:left}
.prose figure{margin:2rem 0}
.prose figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:.5rem}

/* ---------- signature: the quotable passage ---------- */
.answer-block{margin:1.8rem 0 2.2rem;padding:1.35rem 1.5rem 1.1rem;background:var(--mist);
  border-left:6px solid var(--highlight);border-radius:0 var(--radius) var(--radius) 0}
.answer-block__q{margin:0 0 .5rem;font:500 .72rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.answer-block__a{margin:0;font:500 1.22rem/1.55 var(--serif)}
.answer-block__list{margin:1rem 0 .3rem;padding-left:1.1rem}
.answer-block__list li{margin-bottom:.35rem}
.answer-block__meta{margin:.9rem 0 0;font:400 .78rem/1.4 var(--mono);color:var(--ink-soft)}

.definition{margin:1.6rem 0;padding:1rem 1.2rem;border:1px solid var(--rule);border-radius:var(--radius)}
.definition dt{font:600 1.05rem/1.3 var(--serif)}
.definition dd{margin:.4rem 0 0;color:var(--ink-soft)}

.toc{margin:0 0 2rem;padding:1rem 1.2rem;border:1px solid var(--rule);border-radius:var(--radius)}
.toc__title{margin:0 0 .6rem;font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.toc ol{margin:0;padding-left:1.1rem;font-size:.93rem}
.toc li{margin-bottom:.35rem}
.toc .toc__l3{margin-left:.9rem;list-style:none;position:relative}
.toc .toc__l3::before{content:"–";position:absolute;left:-.9rem;color:var(--ink-soft)}

.facts{margin:2.4rem 0}
.facts__table{width:100%;border-collapse:collapse;font-size:.95rem}
.facts__table th{text-align:left;font-weight:500;width:45%;border-bottom:1px solid var(--rule);padding:.65rem .5rem .65rem 0;vertical-align:top}
.facts__table td{border-bottom:1px solid var(--rule);padding:.65rem 0}
.facts__date{font:400 .78rem/1 var(--mono);color:var(--ink-soft)}
.facts__src{font:400 .78rem/1 var(--mono)}

.faq__item{border-bottom:1px solid var(--rule);padding:.9rem 0}
.faq__item summary{cursor:pointer;font:600 1.02rem/1.4 var(--serif);list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::before{content:"+";display:inline-block;width:1.2rem;color:var(--lapis);font-family:var(--mono)}
.faq__item[open] summary::before{content:"–"}
.faq__a{padding:.6rem 0 0 1.2rem;color:var(--ink-soft)}

.howto__steps{counter-reset:step;list-style:none;padding:0}
.howto__steps li{counter-increment:step;padding-left:2.6rem;position:relative;margin-bottom:1.4rem}
.howto__steps li::before{content:counter(step);position:absolute;left:0;top:.1rem;width:1.8rem;height:1.8rem;border:1px solid var(--rule);
  border-radius:50%;display:grid;place-items:center;font:500 .85rem var(--mono)}
.howto__steps h3{margin:0 0 .3rem}

.expertise{margin:2rem 0;padding:1rem 1.2rem;background:var(--mist);border-radius:var(--radius);font-size:.95rem}
.expertise p{margin:0}
.sources__list{font-size:.93rem;color:var(--ink-soft)}
.cite-me{margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--rule)}
.cite-me__line{font:400 .88rem/1.6 var(--mono);background:linear-gradient(transparent 62%,var(--highlight) 62%);display:inline;padding:.1rem 0}

.machine-links{margin:1.6rem 0 0;font:400 .78rem/1.6 var(--mono);color:var(--ink-soft)}
.machine-links a{color:var(--ink-soft)}

/* ---------- cards / archives ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:2rem;padding:1rem 0 3rem}
.card{display:flex;flex-direction:column;gap:.55rem}
.card img{border-radius:var(--radius);aspect-ratio:16/10;object-fit:cover}
.card h3{margin:0;font-size:1.15rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card p{margin:0;color:var(--ink-soft);font-size:.93rem}
.card__meta{font:400 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}

.page-head{padding:3rem 0 1rem;border-bottom:1px solid var(--rule);margin-bottom:1.5rem}
.page-head p{color:var(--ink-soft);max-width:var(--measure)}
.breadcrumb{font:400 .8rem/1 var(--mono);color:var(--ink-soft);padding:1.4rem 0 0}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb span{margin:0 .4rem}

.pagination{display:flex;gap:.5rem;padding:1rem 0 4rem;font-size:.9rem}
.pagination a,.pagination strong{padding:.45rem .8rem;border:1px solid var(--rule);border-radius:var(--radius);text-decoration:none;color:var(--ink)}
.pagination strong{background:var(--ink);color:#fff;border-color:var(--ink)}

.related{border-top:1px solid var(--rule);margin-top:3rem;padding-top:1.5rem}
.related h2{margin-top:0}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 0}

/* ---------------------------------------------------------------- author card */
.author-card{display:flex;gap:1.2rem;align-items:flex-start;margin:2.2rem 0 0;padding:1.4rem 1.5rem;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--mist)}
.author-card__photo{flex:none;display:block}
.author-card__photo img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block}
.author-card__label{margin:0 0 .3rem;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.author-card__name{margin:0 0 .15rem;font:600 1.08rem/1.3 var(--serif)}
.author-card__name a{color:var(--ink);text-decoration:none}
.author-card__name a:hover{text-decoration:underline}
.author-card__role{margin:0 0 .55rem;font:500 .8rem/1.4 var(--sans);color:var(--ink-soft)}
.author-card__bio{margin:0 0 .65rem;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.author-card__more{font:600 .84rem/1 var(--sans);color:var(--lapis);text-decoration:none}
.author-card__more:hover{text-decoration:underline}
@media(max-width:480px){.author-card{flex-direction:column}}
.tags a{font:400 .78rem/1 var(--mono);padding:.4rem .7rem;border:1px solid var(--rule);border-radius:99px;text-decoration:none;color:var(--ink-soft)}

.hero{padding:4rem 0 2.5rem;max-width:var(--measure)}
.hero h1{margin-top:.4rem}
.hero p{font-size:1.15rem;color:var(--ink-soft)}
.cta{display:inline-block;background:var(--ink);color:#fff;padding:.75rem 1.4rem;border-radius:var(--radius);text-decoration:none;font-weight:500}
.cta:hover{background:var(--lapis);color:#fff}

.site-foot{border-top:1px solid var(--rule);margin-top:3rem;padding:2rem 0 3rem;font-size:.88rem;color:var(--ink-soft)}
.site-foot a{color:var(--ink-soft)}
.site-foot__row{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center}
.site-foot__links{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;font-size:.78rem}
.site-foot__links a:not(:first-child)::before{content:"·";margin-right:.5rem;color:var(--ink-soft)}

@media (max-width:900px){
  .article{padding-top:1.5rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* figures placed by the editor */
.prose .fig{margin:1.8rem 0}
.prose .fig img{width:100%;height:auto;display:block;border-radius:2px}
.prose .fig figcaption{font:400 .84rem/1.5 var(--sans);color:var(--ink-soft);padding-top:.5rem;border-top:1px solid var(--rule);margin-top:.5rem}
.prose .fig figcaption:empty{display:none}
.prose .fig--center{margin-left:auto;margin-right:auto;max-width:80%}
.prose .fig--left{float:left;max-width:46%;margin:.4rem 1.6rem 1.2rem 0}
.prose .fig--full{max-width:none}
@media(max-width:700px){.prose .fig--left{float:none;max-width:none;margin:1.6rem 0}}

/* masthead with a logo, nested nav and an optional call to action */
.masthead__brand--logo{display:flex;flex-direction:column;gap:.3rem}
.masthead__brand img{display:block;height:auto;max-width:100%}
.masthead__cta{display:inline-block;background:var(--ink);color:#fff;border-radius:3px;padding:.45rem .9rem;
  text-decoration:none;font:500 .86rem var(--sans);margin-left:.6rem}
.masthead__cta:hover{background:var(--lapis)}
.nav-group{position:relative;display:inline-block}
.nav-sub{position:absolute;left:0;top:100%;background:var(--paper);border:1px solid var(--rule);border-radius:3px;
  padding:.4rem 0;min-width:11rem;display:none;z-index:30;box-shadow:0 8px 24px rgba(15,25,35,.12)}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub{display:block}
.nav-sub a{display:block;padding:.4rem .9rem;white-space:nowrap}
.site-foot__top{padding:2.6rem 0 1.6rem;border-bottom:1px solid var(--rule)}
.site-foot__text{margin:0 0 1.8rem;max-width:36rem;color:var(--ink-soft)}
.site-foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1.8rem 1.4rem}
.site-foot__heading{margin:0 0 .7rem;font:600 .78rem/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.site-foot__heading a{color:inherit;text-decoration:none}
.site-foot__heading a:hover{text-decoration:underline}
.site-foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.site-foot__col a{color:var(--ink-soft);font-size:.86rem;text-decoration:none}
.site-foot__col a:hover{color:var(--ink);text-decoration:underline}
@media(max-width:700px){.nav-sub{position:static;display:block;border:0;box-shadow:none;padding:0;min-width:0}}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;margin-bottom:.5rem}
.avatar--lg{width:120px;height:120px;margin-bottom:.9rem}

/* ------------------------------------------------------------------ hero
   Two shapes: a lead story for publications, a statement for everything else. */
.hero--lead{padding:3.4rem 0 2.6rem;max-width:none;border-bottom:1px solid var(--rule);margin-bottom:2.4rem}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero__text{max-width:34rem}
.hero__title{font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;margin:.5rem 0 .9rem;letter-spacing:-.015em;font-family:var(--serif);font-weight:600}
.hero__title a{color:var(--ink);text-decoration:none}
.hero__title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero__standfirst{font-size:1.12rem;line-height:1.6;color:var(--ink-soft);margin:0 0 1rem;max-width:32rem}
.hero__meta{font:400 .8rem/1.5 var(--mono);color:var(--ink-soft);margin:0 0 1.4rem}
.hero__media img,.hero__media picture{width:100%;height:auto;border-radius:var(--radius);display:block}
.hero__media img{aspect-ratio:4/3;object-fit:cover}

.hero--statement{padding:4.5rem 0 3.4rem;max-width:none;border-bottom:1px solid var(--rule);margin-bottom:2.4rem}
.hero--statement .hero__inner{max-width:44rem}
.hero--statement h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.06;margin:.5rem 0 1rem;letter-spacing:-.015em}
.hero--image{background-size:cover;background-position:center;border-bottom:0;color:#fff}
.hero--image h1,.hero--image .eyebrow,.hero--image .hero__standfirst{color:#fff}
.hero--image .hero__standfirst{opacity:.92}
.hero__actions{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.4rem 0 0}
.cta--ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.cta--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero--image .cta{background:#fff;color:var(--ink)}
.hero--image .cta:hover{background:var(--highlight);color:var(--ink)}
.hero--image .cta--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.hero--image .cta--ghost:hover{background:#fff;color:var(--ink)}

.section-head{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono);font-weight:500;
  color:var(--ink-soft);border-bottom:1px solid var(--rule);padding-bottom:.8rem;margin:0 0 .8rem}
@media(max-width:860px){
  .hero__grid{grid-template-columns:1fr;gap:1.6rem}
  .hero__media{order:-1}
  .hero--lead,.hero--statement{padding:2.2rem 0 1.8rem}
}

/* --------------------------------------------------------------- hero slider
   Without JS every slide stays in the flow and readable. Once JS is ready the
   slides stack and only the current one shows. */
.hero--slider .hero__slide + .hero__slide{border-top:1px solid var(--rule);margin-top:2rem;padding-top:2rem}
.hero--slider.is-ready .hero__track{position:relative}
.hero--slider.is-ready .hero__slide{display:none;border-top:0;margin-top:0;padding-top:0;animation:hero-in .45s ease both}
.hero--slider.is-ready .hero__slide.is-current{display:block}
@keyframes hero-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero--slider.is-ready .hero__slide{animation:none}}

.hero__controls{display:none;align-items:center;gap:1rem;padding-top:1.4rem}
.hero--slider.is-ready .hero__controls{display:flex}
.hero__arrow{width:2.3rem;height:2.3rem;border:1px solid var(--rule);background:transparent;border-radius:50%;
  font-size:1.25rem;line-height:1;color:var(--ink);cursor:pointer;flex:none}
.hero__arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero__dots{display:flex;gap:.55rem;flex:1}
.hero__dot{width:2.2rem;height:3px;border:0;padding:0;background:var(--rule);cursor:pointer;border-radius:2px}
.hero__dot.is-current{background:var(--ink)}
.hero__dot:hover{background:var(--ink-soft)}
.hero__arrow:focus-visible,.hero__dot:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}

/* ----------------------------------------------------------------- top bar */
.topbar{border-bottom:1px solid var(--rule);background:var(--mist);font-size:.8rem}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:2.4rem;padding-top:.35rem;padding-bottom:.35rem;flex-wrap:wrap}
.topbar__date{margin:0;color:var(--ink-soft);display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline}
.topbar__date time{font-weight:500;color:var(--ink)}
.topbar__panchang{font-size:.78rem}
.topbar__panchang::before{content:"·";margin-right:.5rem}
.topbar nav[aria-label="Quick links"]{display:flex;gap:1rem;flex-wrap:wrap}
.topbar nav[aria-label="Quick links"] a{color:var(--ink-soft);text-decoration:none;font-size:.8rem}
.topbar nav[aria-label="Quick links"] a:hover{color:var(--ink);text-decoration:underline}
.topbar .nav-sub{font-size:.8rem}

/* ------------------------------------------------------------ social icons */
.social{display:flex;gap:.4rem;list-style:none;margin:0;padding:0}
.social__link{display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:5px;
  color:#fff;background:var(--brand,var(--ink));transition:transform .12s ease,opacity .12s ease}
.social__link:hover{transform:translateY(-1px);opacity:.86;color:#fff}
.social__link:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}
.social--plain .social__link{background:transparent;color:var(--ink-soft);width:1.6rem;height:1.6rem;border-radius:0}
.social--plain .social__link:hover{color:var(--brand,var(--ink));transform:none}
.social svg{display:block}

/* --------------------------------------------------------- mobile navigation */
.burger{display:none;align-items:center;gap:.5rem;background:transparent;border:1px solid var(--rule);
  border-radius:4px;padding:.45rem .7rem;font:500 .84rem var(--sans);color:var(--ink);cursor:pointer}
.burger__bars{display:grid;gap:3px;width:16px}
.burger__bars span{display:block;height:2px;background:currentColor;border-radius:1px;transition:transform .18s ease,opacity .18s ease}
.masthead__nav{display:flex;align-items:center;gap:1.3rem}
.masthead__social-mobile{display:none}

@media(max-width:860px){
  .burger{display:inline-flex}
  .masthead__in{flex-wrap:wrap}
  .masthead__nav{display:none;flex-direction:column;align-items:flex-start;gap:0;width:100%;
    border-top:1px solid var(--rule);margin-top:.8rem;padding-top:.4rem}
  .nav-open .masthead__nav{display:flex}
  .masthead__nav nav{flex-direction:column;align-items:stretch;width:100%;gap:0}
  .masthead__nav nav > a,.nav-group > a{display:block;padding:.75rem .1rem;border-bottom:1px solid var(--rule);width:100%}
  .nav-group{width:100%}
  .nav-sub{display:none;padding-left:1rem}
  .nav-group.is-open .nav-sub{display:block}
  .masthead__cta{margin:.9rem 0 .4rem}
  .masthead__social-mobile{display:block;padding:.6rem 0 .3rem}
  .nav-open .burger__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .nav-open .burger__bars span:nth-child(2){opacity:0}
  .nav-open .burger__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  body.no-scroll{overflow:hidden}
  .topbar__in{justify-content:center;text-align:center}
  .topbar__date{justify-content:center}
  .topbar .social{display:none}          /* the icons live in the menu panel on mobile */
}
@media(max-width:520px){
  .topbar__panchang{width:100%}
  .topbar__panchang::before{content:none}
}

/* subsection strip on a parent category's archive */
.subsections{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.subsections a{background:var(--mist);border:1px solid var(--rule);border-radius:20px;padding:.3rem .85rem;
  font:500 .82rem var(--sans);color:var(--ink);text-decoration:none}
.subsections a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ============================================================ header designs
   .masthead--classic is the existing default and needs no override block. */

/* Centered — logo on its own row, nav centred beneath it. Good for a
   publication that wants the wordmark to read like a printed masthead.
   This only applies above the mobile breakpoint: stacking the brand and nav
   vertically needs the burger pulled out of the flow with a guessed offset,
   and that offset breaks the moment a logo is taller than the guess. Mobile
   keeps the ordinary single-row header (logo left, burger right) instead,
   which cannot overlap regardless of logo size. */
@media(min-width:861px){
  .masthead--centered .masthead__in{flex-direction:column;text-align:center;gap:.5rem;padding:1.6rem 0 1rem;position:relative}
  .masthead--centered .masthead__brand{align-items:center}
  .masthead--centered .masthead__brand--logo{align-items:center}
  .masthead--centered .masthead__nav{justify-content:center;margin-top:.6rem}
}

/* Minimal — one slim row, no visual weight beyond the wordmark and links. */
.masthead--minimal .masthead__in{padding-top:.65rem;padding-bottom:.65rem}
.masthead--minimal .masthead__brand{font-size:.92rem}
.masthead--minimal .masthead__brand span{display:none}
.masthead--minimal .masthead__nav nav a{padding:.3rem 0}
.masthead--minimal .masthead__cta{padding:.32rem .7rem;font-size:.8rem}

/* Bold — a filled bar with the nav and CTA carrying more visual weight,
   for a site that wants the header to anchor the page rather than sit quietly. */
.masthead--bold{background:var(--ink);border-bottom:3px solid var(--lapis)}
.masthead--bold .masthead__brand,.masthead--bold .masthead__brand span{color:#fff}
.masthead--bold .masthead__nav nav a{color:#cfd8e3}
.masthead--bold .masthead__nav nav a:hover{color:#fff}
.masthead--bold .nav-sub{background:#1c2733;border-color:#2c3a49}
.masthead--bold .nav-sub a{color:#cfd8e3}
.masthead--bold .nav-sub a:hover{color:#fff}
.masthead--bold .burger{color:#fff;border-color:#3a4959}
.masthead--bold .masthead__cta{background:var(--lapis);color:#fff}
.masthead--bold .masthead__cta:hover{background:#fff;color:var(--ink)}

/* ============================================================ footer designs
   .site-foot--columns is the existing default and needs no override block. */

.site-foot__flat{display:flex;flex-wrap:wrap;gap:1.4rem;padding:1.6rem 0}
.site-foot__flat a{color:var(--ink-soft);font-size:.88rem;text-decoration:none}
.site-foot__flat a:hover{color:var(--ink);text-decoration:underline}

.site-foot--simple .site-foot__top{padding-bottom:0}
.site-foot--simple .site-foot__flat{padding-top:1.6rem;padding-bottom:1.2rem}

.site-foot--centered .site-foot__top{text-align:center}
.site-foot--centered .site-foot__text{margin-left:auto;margin-right:auto}
.site-foot--centered .site-foot__flat{justify-content:center;padding-bottom:1.6rem}
.site-foot--centered .site-foot__row{flex-direction:column;gap:.5rem;text-align:center;justify-content:center}

.site-foot--dark{background:var(--ink);color:#c9d3dd}
.site-foot--dark .site-foot__top{border-color:#2c3a49}
.site-foot--dark .site-foot__text{color:#9fadbb}
.site-foot--dark .site-foot__heading{color:#fff}
.site-foot--dark .site-foot__col a{color:#9fadbb}
.site-foot--dark .site-foot__col a:hover{color:#fff}
.site-foot--dark .site-foot__row{color:#9fadbb}
.site-foot--dark .site-foot__row a{color:#c9d3dd}
.site-foot--dark .site-foot__row a:hover{color:#fff}

/* --------------------------------------------------------------- hero: split
   One lead story beside a short list of the next few headlines — a compact
   magazine-front layout without any moving parts. */
.hero--split{padding:2.8rem 0;max-width:none;border-bottom:1px solid var(--rule);margin-bottom:2.4rem}
.hero__split{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start}
.hero__lead .hero__title{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12;margin:.5rem 0 .8rem}
.hero__lead .hero__media{display:block;margin:1rem 0}
.hero__lead .hero__media img,.hero__lead .hero__media picture{width:100%;height:auto;border-radius:var(--radius);display:block;aspect-ratio:16/10;object-fit:cover}
.hero__side{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.hero__side li{padding:1rem 0;border-bottom:1px solid var(--rule)}
.hero__side-meta{display:block;font:500 .68rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.hero__side a{font:600 1.02rem/1.35 var(--serif);color:var(--ink);text-decoration:none}
.hero__side a:hover{text-decoration:underline}
@media(max-width:860px){.hero__split{grid-template-columns:1fr;gap:1.6rem}}

/* -------------------------------------------------------------- hero: minimal
   One linked headline, one slim row. As quiet as a hero can be. */
.hero--minimal{border-bottom:1px solid var(--rule);margin-bottom:2rem}
.hero__minimal{display:flex;align-items:baseline;gap:.8rem;padding:.9rem 0;flex-wrap:wrap}
.hero__minimal .eyebrow{flex:none}
.hero__minimal a{font:600 1.05rem/1.4 var(--serif);color:var(--ink);text-decoration:none}
.hero__minimal a:hover{text-decoration:underline}
.hero__minimal-arrow{color:var(--ink-soft);margin-left:auto}

/* ---------------------------------------------------------------- hero: dual
   Two lead stories, equal weight, side by side. */
.hero--dual{padding:2.8rem 0;max-width:none;border-bottom:1px solid var(--rule);margin-bottom:2.4rem}
.hero__dual{display:grid;grid-template-columns:1fr 1fr;gap:0}
.hero__dual-item{padding:0 2.2rem}
.hero__dual-item:first-child{padding-left:0}
.hero__dual-item:last-child{padding-right:0;border-left:1px solid var(--rule)}
.hero__dual-item .hero__title{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;margin:.5rem 0 .7rem}
.hero__dual-item .hero__media{display:block;margin:.9rem 0}
.hero__dual-item .hero__media img,.hero__dual-item .hero__media picture{width:100%;height:auto;border-radius:var(--radius);display:block;aspect-ratio:16/10;object-fit:cover}
.hero__dual-item .hero__standfirst{font-size:1rem}
.hero__dual-item .hero__meta{margin-bottom:1rem}
@media(max-width:860px){
  .hero__dual{grid-template-columns:1fr;gap:2rem}
  .hero__dual-item{padding:0}
  .hero__dual-item:last-child{padding:1.6rem 0 0;border-left:0;border-top:1px solid var(--rule)}
}

/* ------------------------------------------------------------- share buttons */
.share-bar{display:flex;align-items:center;gap:.5rem;margin:1.2rem 0 1.6rem;flex-wrap:wrap}
.share-bar__label{font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-right:.2rem}
.share-bar__link{display:grid;place-items:center;width:2rem;height:2rem;border-radius:6px;border:1px solid var(--rule);
  background:transparent;color:var(--ink-soft);cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease}
.share-bar__link:hover{color:#fff;border-color:transparent}
.share-bar__link--x:hover{background:#000}
.share-bar__link--facebook:hover{background:#1877F2}
.share-bar__link--whatsapp:hover{background:#25D366}
.share-bar__link--linkedin:hover{background:#0A66C2}
.share-bar__copy{position:relative}
.share-bar__copy.is-copied{background:var(--ink);color:#fff;border-color:var(--ink)}
.share-bar__copy.is-copied::after{content:"Copied";position:absolute;bottom:calc(100% + .4rem);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font:500 .68rem/1 var(--sans);padding:.3rem .5rem;border-radius:3px;white-space:nowrap}

/* ===================================================== homepage content blocks */
.home-block{padding:1rem 0}
.home-block .cards,.home-block .tiles{padding:0}

/* -- category: grid variants -- */
.cards--wide{grid-template-columns:repeat(auto-fill,minmax(24rem,1fr));gap:2.6rem}
.cards--compact{grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));gap:1.3rem}
.cards--compact .card{gap:.4rem}
.cards--compact .card h3{font-size:.96rem;line-height:1.3}
.cards--compact .card p:last-child{display:none}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.2rem;padding:1rem 0 3rem}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--ink)}
.tile__link{display:block;height:100%;color:#fff;text-decoration:none}
.tile__link img,.tile__link picture{width:100%;height:100%;object-fit:cover;display:block}
.tile__blank{display:block;width:100%;height:100%;background:linear-gradient(160deg,var(--ink),#2c3a49)}
.tile__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;
  background:linear-gradient(to top,rgba(8,13,19,.88) 0%,rgba(8,13,19,.35) 55%,rgba(8,13,19,0) 100%)}
.tile__meta{font:500 .66rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-bottom:.4rem}
.tile__title{font:600 1.08rem/1.3 var(--serif)}
.tile:hover .tile__title{text-decoration:underline}
@media(max-width:600px){.cards--wide,.cards--compact,.tiles{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}}

/* -- category: list -- */
.hb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.hb-list li{display:flex;gap:.9rem;align-items:flex-start}
.hb-list__thumb{flex:none;width:64px;height:64px;border-radius:4px;overflow:hidden;display:block;background:var(--mist)}
.hb-list__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hb-list__thumb--empty{border:1px dashed var(--rule)}
.hb-list__text{display:flex;flex-direction:column;gap:.25rem}
.hb-list__text a{font:600 1rem/1.35 var(--serif);color:var(--ink);text-decoration:none}
.hb-list__text a:hover{text-decoration:underline}
.hb-list__meta{font:400 .74rem/1 var(--mono);color:var(--ink-soft)}

/* -- category: headlines -- */
.hb-headlines{list-style:decimal;margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:.7rem}
.hb-headlines li{color:var(--ink-soft)}
.hb-headlines a{font:600 .98rem/1.4 var(--serif);color:var(--ink);text-decoration:none}
.hb-headlines a:hover{text-decoration:underline}
.hb-headlines__date{display:block;font:400 .72rem/1 var(--mono);color:var(--ink-soft);margin-top:.15rem}

/* -- category: featured + list -- */
.hb-featured{display:grid;grid-template-columns:1.3fr 1fr;gap:2.6rem;align-items:start}
.hb-featured__lead .hb-featured__media{display:block;margin-bottom:1rem}
.hb-featured__lead .hb-featured__media img,.hb-featured__lead .hb-featured__media picture{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);display:block}
.hb-featured__meta{font:500 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .4rem}
.hb-featured__lead h3{font:600 1.4rem/1.25 var(--serif);margin:0 0 .5rem}
.hb-featured__lead h3 a{color:var(--ink);text-decoration:none}
.hb-featured__lead h3 a:hover{text-decoration:underline}
.hb-featured__excerpt{color:var(--ink-soft);margin:0}
.hb-featured__side{border-top:1px solid var(--rule);padding-top:1rem}
@media(max-width:860px){.hb-featured{grid-template-columns:1fr}}

/* -- page: text / split / banner -- */
.hb-text{max-width:42rem}
.hb-text h2{border-bottom:1px solid var(--rule);padding-bottom:.8rem;margin:0 0 .8rem}
.hb-text p{color:var(--ink-soft);margin:0 0 1.1rem}

.hb-split{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:center}
.home-block--split.is-reversed .hb-split{direction:rtl}
.home-block--split.is-reversed .hb-split > *{direction:ltr}
.hb-split__media{display:block}
.hb-split__media img,.hb-split__media picture{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);display:block}
.hb-split__text h2{border-bottom:1px solid var(--rule);padding-bottom:.8rem;margin:0 0 .8rem}
.hb-split__text p{color:var(--ink-soft);margin:0 0 1.1rem}
@media(max-width:860px){.hb-split{grid-template-columns:1fr}.home-block--split.is-reversed .hb-split{direction:ltr}}

.home-block--banner{padding:4rem 0;text-align:center;background:var(--mist)}
.home-block--banner.has-image{background-size:cover;background-position:center;color:#fff}
.home-block--banner.has-image h2,.home-block--banner.has-image p{color:#fff}
.hb-banner{max-width:38rem;margin:0 auto}
.hb-banner h2{margin:0 0 .8rem}
.hb-banner p{margin:0 0 1.3rem;opacity:.92}
.home-block--banner.has-image .cta{background:#fff;color:var(--ink)}
.home-block--banner.has-image .cta:hover{background:var(--highlight)}

/* auto-generated Team page */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.6rem;margin:1.5rem 0}
.team-card{border:1px solid var(--rule);border-radius:var(--radius);padding:1.1rem}
.team-card img{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:.7rem;display:block}
.team-card h3{margin:0 0 .2rem;font-size:1.05rem}
.team-card h3 a{color:var(--ink);text-decoration:none}
.team-card h3 a:hover{text-decoration:underline}
.team-card__role{font:500 .78rem/1.3 var(--mono);color:var(--ink-soft);margin:0 0 .5rem}