/* ============================================================
   DIWAKAR BHATT — PORTFOLIO & WRITING
   Shared theme tokens and styles
============================================================ */
:root{
  --bg:#F3F4F8;
  --card:#FFFFFF;
  --accent:#FF2E63;
  --accent-soft:rgba(255,46,99,.08);
  /* Text-safe pink. --accent is 3.28:1 on --bg, below the 4.5:1 AA
     needs for body text; this is 5.34:1. Links only. */
  --accent-ink:#C2185B;
  --accent-2:#7C3AED;
  --grad:linear-gradient(135deg,#FF2E63 0%,#7C3AED 100%);
  --grad-soft:linear-gradient(135deg,rgba(255,46,99,.10),rgba(124,58,237,.10));
  --heading:#1E1E2F;
  --body:#6B7280;
  --line:#E7E8F0;
  --radius:16px;
  --shadow-sm:0 2px 10px rgba(30,30,47,.05);
  --shadow-md:0 12px 30px rgba(30,30,47,.08);
  --shadow-lg:0 24px 60px rgba(30,30,47,.12);
  --shadow-accent:0 12px 30px rgba(255,46,99,.28);
  --font-head:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  /* dark world (writing) — warm plum-ink */
  --ink:#171221;
  --ink-2:#1E1E2F;
  --ink-card:rgba(255,255,255,.045);
  --ink-line:rgba(255,255,255,.09);
  --ink-body:#ACA4BC;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--body);
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  /* `clip` stops horizontal scrolling without creating a scroll container,
     which `hidden` does. Kept because it is the better of the two; older
     browsers fall back to the line above. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--heading);line-height:1.2;font-weight:700}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* ---------- poem topic ----------
   The poem's title settles at the top of the viewport while the poem moves
   underneath it.

   Nothing here changes the element's SIZE on settle. A sticky element keeps its
   box in normal flow, so resizing it would shove the poem — every state below is
   background, backdrop-filter, box-shadow, border-colour or transform, none of
   which reflow. The visual compaction comes from scaling __inner, which carries
   the padding as well as the title so both tighten together.

   --nav-h is deliberately a little under the real nav height. The nav animates
   between padding:22px and padding:12px, so no constant matches it exactly; too
   small merely tucks the topic behind the nav (which has a background and a
   higher z-index), while too large would open a strip of page between them. */
:root{ --nav-h:56px; }

/* The block is the sticky boundary. Because .poem-topic is a child of it, the
   browser releases the title when the block scrolls away — it can never travel
   over anything that follows. No JavaScript is involved in that bound. */
.poem-block{ position:relative; }

/* ORIGINAL SPACING, RESTORED.
   The 80px that sat above the title in the original design is margin here, not
   padding. Margin is NOT part of a sticky element's box, so it positions the
   title exactly where it always was without travelling with it when pinned.
   Padding is deliberately tiny: padding is what the pinned band is made of, and
   an earlier version put 74px in here, which is how a navbar-sized white card
   appeared across the poem. */
.poem-topic{
  position:sticky;
  top:var(--nav-h);
  z-index:10;
  text-align:center;
  margin:70px 0 0;
  padding:10px 0;
  /* The page colour, always. Invisible against the page — it changes nothing
     you can see — and it is the only thing keeping poem lines from running
     through the word as they scroll behind it. Never var(--card), never white,
     no border, no shadow: those made the box. */
  background-color:var(--bg);
}
.poem-topic__inner{ padding:0; }

/* Original typography, unchanged. */
.poem-topic__title{
  font-family:var(--font-head);
  font-size:clamp(36px,5vw,56px);
  font-weight:700;
  letter-spacing:-.5px;
  color:var(--heading);
  line-height:1.3;
  transform-origin:center center;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}

/* The whole settle cue: the title eases down by two per cent. Nothing else
   changes — no background, no border, no shadow, no movement of the poem. */
.poem-topic--settled .poem-topic__title{ transform:scale(.97); }

/* Original gap was 18px between title and meta. The band already contributes
   its 10px bottom padding, so 8px here reproduces it exactly. 60px below, as before. */
.poem-topic-meta{ padding:8px 0 60px; }

/* The sentinel is what IntersectionObserver watches. It must take no space. */
.poem-topic-sentinel{ height:1px; margin-bottom:-1px; pointer-events:none; }

/* Anchors and the skip link clear the nav and the small pinned band. */
html{ scroll-padding-top:calc(var(--nav-h) + 24px); }

@media(max-width:720px){
  :root{ --nav-h:50px; }
  .poem-topic{ margin-top:50px; }
  .poem-topic__title{ font-size:clamp(30px,7.5vw,36px); }
  .poem-topic-meta{ padding:8px 0 50px; }
}

@media(prefers-reduced-motion:reduce){
  .poem-topic__title{ transition:none; }
  .poem-topic--settled .poem-topic__title{ transform:none; }
}
/* ---------- inline links in prose ----------
   The rule above strips link styling, which is right for navigation, cards and
   buttons — they announce themselves by shape. It is wrong in running text,
   where an unstyled link is indistinguishable from the sentence around it.
   Underline plus colour means colour is never the only signal (WCAG 1.4.1),
   and both colours clear 4.5:1 against the page (WCAG 1.4.3). */
.article-content a,
.poem-content a,
.category-intro a,
.page-intro a,
.prose-link a{
  color:var(--accent-2);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .25s,text-decoration-thickness .25s;
}
.article-content a:hover,
.poem-content a:hover,
.category-intro a:hover,
.page-intro a:hover,
.prose-link a:hover{
  color:var(--accent-ink);
  text-decoration-thickness:2px;
}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:14px;z-index:2000;background:var(--heading);color:#fff;padding:12px 22px;border-radius:99px;font-weight:600;font-size:14px}
.skip-link:focus{left:14px}

/* ---------- reading progress bar ---------- */
#progressBar{position:fixed;top:0;left:0;height:4px;width:0;background:var(--grad);z-index:1002;border-radius:0 4px 4px 0;transition:width .1s linear}

/* ---------- cursor glow ---------- */
#cursorGlow{position:fixed;width:320px;height:320px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,46,99,.10) 0%,rgba(124,58,237,.06) 40%,transparent 70%);
  transform:translate(-50%,-50%);transition:opacity .3s;opacity:0}
@media(hover:hover){#cursorGlow{opacity:1}}

/* ---------- section headings ---------- */
.sec-head{text-align:center;max-width:620px;margin:0 auto 48px}
.sec-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.sec-title{font-size:clamp(30px,4vw,44px);margin-bottom:16px}
.sec-sub{font-size:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:15px 32px;border-radius:99px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;position:relative;overflow:hidden}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-accent)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(255,46,99,.38)}
.btn-ghost{background:var(--card);color:var(--heading);border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-md)}
.btn svg{width:18px;height:18px}

/* ---------- animated link underline ---------- */
.u-link{position:relative}
.u-link::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--grad);border-radius:2px;transition:width .35s cubic-bezier(.65,0,.35,1)}
.u-link:hover::after,.u-link.active::after{width:100%}

/* ---------- reveal animations ---------- */
.js .reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s}


/* ---------- page intro ----------
   One definition, replacing the eight identical copies that were sitting in
   per-page <style> blocks. Tightened on purpose. The old value was
   100px 0 60px, and because every listing page follows the intro with a plain
   <section> carrying the global 88px of vertical padding, the gap between the
   lede and the first card was 148px of nothing on desktop. Measured from the
   top of the document, the first poem card on /literature.html began roughly
   680px down; the first blog card, roughly 450px. */
.page-intro{padding:64px 0 32px;background:var(--bg)}

/* The intro and the content under it are one editorial unit, so the section
   that follows does not open its own 88px of air. This single rule is the
   largest part of the fix and it is why none of the pages needed their section
   structure rewritten. */
.page-intro + section{padding-top:0}

/* A listing section leads with its heading and its cards. The paragraph that
   used to sit between them is background — where the poems came from, what the
   stories have in common — so it now follows the grid it describes. It reads as
   a closing note rather than a preamble, which is also where the "browse all"
   link belongs. */
.category-intro--after{margin:34px 0 0;max-width:760px}

/* Was margin:60px 0 20px. The section above already supplies its own padding,
   so the 60px was stacking on top of it. */
.category-title{margin:0 0 20px}

/* ---------- share bar ----------
   Modelled on .fc-btn, which is the site's existing small pill control: same
   99px radius, same 1.5px --line border, same border-colour/colour hover. No
   new visual language is introduced. Each brand keeps its own hover colour so
   the icons are recognisable, but the label is always real text, never the icon
   alone. */
.share{max-width:750px;margin:0 auto;padding:44px 24px 0;border-top:1px solid var(--line)}
.share-label{font-family:var(--font-head);font-size:15px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--body);margin:0 0 18px}
.share-row{display:flex;flex-wrap:wrap;gap:10px}

.share-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);
  font-size:14px;font-weight:600;color:var(--heading);background:var(--card);
  border:1.5px solid var(--line);border-radius:99px;padding:10px 18px;cursor:pointer;
  transition:border-color .3s,color .3s,transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.share-btn svg{width:17px;height:17px;flex:none}
.share-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.share-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

.share-btn--whatsapp:hover{border-color:#25D366;color:#128C4A}
.share-btn--facebook:hover,
.share-btn--messenger:hover{border-color:#1877F2;color:#1877F2}
.share-btn--x:hover{border-color:var(--heading);color:var(--heading)}
.share-btn--linkedin:hover{border-color:#0A66C2;color:#0A66C2}
.share-btn--copy:hover,
.share-btn--native:hover{border-color:var(--accent-2);color:var(--accent-2)}

/* Copy link confirmation. The width does not change, so the row cannot reflow
   when the label swaps. */
.share-btn--copy.is-copied{border-color:#25D366;color:#128C4A}

@media(max-width:720px){
  /* Comfortable tap targets: 44px minimum height, and the row scrolls sideways
     rather than wrapping into a tall block. */
  .share{padding:32px 24px 0}
  .share-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .share-row::-webkit-scrollbar{display:none}
  .share-btn{padding:12px 18px;min-height:44px;flex:none}
}

@media(prefers-reduced-motion:reduce){
  .share-btn{transition:border-color .3s,color .3s}
  .share-btn:hover{transform:none}
}

@media(max-width:720px){
  .page-intro{padding:44px 0 24px}
}

/* ---------- reveal fail-safe (layer 3 of 3) ----------
   The rule above hides roughly thirty elements on the homepage, and ONLY
   assets/js/shared.js can un-hide them. On 2026-08-28 that file was truncated
   to 0 bytes on the server; it still answered HTTP 200, so nothing alerted,
   and every page rendered as an empty background with a full scroll height.

   Three independent layers now guarantee that cannot recur:

     1. <script onerror> on the shared.js tag       — instant, covers 404/abort
     2. the inline watchdog in <head>               — 3s, covers 0 bytes, throws, timeouts
     3. this keyframe                               — 6s, covers a dead main thread

   Layer 3 needs no JavaScript of any kind. It runs in the compositor, so it
   fires even if script is blocked by CSP, stripped by a proxy, or wedged by a
   long task. The delay sits above the watchdog window so it never fires first
   in a healthy load, and it is scoped to :not(.js-ready) so that once the real
   reveal system reports in, the scroll animations are handed straight back.

   CONTENT WINS OVER ANIMATION. Losing the fade is acceptable; losing the page
   is not. */
.js:not(.js-ready) .reveal{animation:reveal-failsafe .01s linear 6s forwards}
@keyframes reveal-failsafe{to{opacity:1;transform:none}}

/* Motion is already suppressed for these visitors, so reveal immediately
   rather than making them wait six seconds for the net to catch a failure. */
@media(prefers-reduced-motion:reduce){
  .js:not(.js-ready) .reveal{animation-delay:.01s}
}
/* ============================================================
   HEADER
============================================================ */
header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:22px 0;transition:all .4s}
header.scrolled{padding:12px 0;background:rgba(255,255,255,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow-sm);border-bottom:1px solid rgba(231,232,240,.7)}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--heading)}
.logo span{color:var(--accent)}
.logo .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--grad);margin-left:3px}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--heading)}
#navToggle{display:none;flex-direction:column;gap:5px;padding:8px}
#navToggle span{width:24px;height:2.5px;background:var(--heading);border-radius:2px;transition:.3s}

/* ============================================================
   FOOTER
============================================================ */
footer{background:#1E1E2F;color:#A5A7B8;padding:72px 0 0;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;top:-200px;right:-150px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,46,99,.14),transparent 65%);pointer-events:none}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:50px;padding-bottom:56px;position:relative}
.footer-grid .logo{color:#fff;margin-bottom:18px;display:inline-block}
.footer-about p{font-size:14px;max-width:300px}
.footer-col h4{color:#fff;font-size:16px;margin-bottom:22px}
.footer-col li{margin-bottom:12px}
.footer-col a{font-size:14px;transition:color .3s,padding-left .3s}
.footer-col a:hover{color:var(--accent);padding-left:6px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.5px;position:relative}
.footer-bottom .heart{color:var(--accent)}

/* ---------- back to top ---------- */
#toTop{position:fixed;bottom:28px;right:28px;z-index:900;width:48px;height:48px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-accent);opacity:0;transform:translateY(16px);transition:.4s;pointer-events:none}
#toTop.show{opacity:1;transform:none;pointer-events:auto}
#toTop:hover{transform:translateY(-4px)}
#toTop svg{width:20px;height:20px}

/* ============================================================
   BLOG PAGE STYLES
============================================================ */
.blog-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.feature-card{background:var(--card);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;height:100%;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.feature-card>a{display:flex;flex-direction:column;flex:1}
/* aspect-ratio + the img's width/height attributes reserve the box before the
   artwork decodes, so the grid never reflows; the fill avoids a white flash */
.fc-img{aspect-ratio:16/9;overflow:hidden;position:relative;background:linear-gradient(135deg,#1E1E2F,#171221)}
.fc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.feature-card:hover .fc-img img{transform:scale(1.06)}
.fc-img .blog-tag{position:absolute;top:18px;left:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fc-body{padding:30px 34px 34px;display:flex;flex-direction:column;flex:1}
.blog-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:13px;font-weight:500;margin-bottom:14px}
.blog-meta .sep{color:var(--line)}
.blog-tag{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);padding:6px 14px;border-radius:99px;background:var(--accent-soft)}
.fc-body h3{font-size:clamp(20px,2vw,24px);line-height:1.32;margin-bottom:12px;transition:color .3s}
.feature-card:hover .fc-body h3{color:var(--accent)}
.fc-body p{font-size:14.5px;margin-bottom:24px;flex:1}
.fc-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--heading);border:1.5px solid var(--line);border-radius:99px;padding:10px 24px;align-self:flex-start;transition:border-color .3s,color .3s,gap .3s}
.feature-card:hover .fc-btn{border-color:var(--accent);color:var(--accent);gap:12px}
.fc-btn svg{width:15px;height:15px}

/* ============================================================
   LITERATURE PAGE STYLES
============================================================ */
.literature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:48px}
/* Devanagari titles need a little more leading than the Latin blog headings */
.literature-grid .fc-body h3{line-height:1.5}
.literature-card{background:var(--card);border-radius:var(--radius);padding:36px 30px;box-shadow:var(--shadow-sm);transition:transform .4s,box-shadow .4s,border-color .4s;border:1px solid transparent;position:relative}
.literature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--accent-soft)}
.literature-card a{display:block}
.literature-card h3{font-size:20px;margin-bottom:12px;color:var(--heading)}
.literature-card p{font-size:14.5px;margin-bottom:20px;color:var(--body);line-height:1.6}
.read-more{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent)}
.read-more svg{width:14px;height:14px}
.literature-card:hover .read-more{gap:12px}
.poem-date, .story-date{display:block;font-size:12px;color:var(--body);margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

/* ============================================================
   ARTICLE PAGE STYLES
============================================================ */
.article-page{background:var(--bg)}
.article-header{background:var(--card);padding:60px 0 40px;box-shadow:var(--shadow-sm)}
.article-title{font-size:clamp(32px,5vw,52px);margin-bottom:18px;letter-spacing:-.5px}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;font-size:14px;color:var(--body)}
.article-content{max-width:750px;margin:0 auto;padding:60px 24px}
.article-content p{margin-bottom:24px;font-size:16px;line-height:1.8}
.article-content h3{font-size:24px;margin:40px 0 20px;color:var(--heading)}
.article-content h4{font-size:18px;margin:32px 0 16px;color:var(--heading)}
.article-content ul, .article-content ol{margin:24px 0 24px 24px}
.article-content li{margin-bottom:12px;font-size:16px}
.article-content strong{color:var(--heading);font-weight:600}
.article-content em{font-style:italic;color:var(--accent-2)}

.article-nav{max-width:750px;margin:0 auto;padding:60px 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line)}
.nav-prev, .nav-next{flex:1;min-width:200px;padding:24px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
.nav-prev:hover, .nav-next:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.nav-prev a, .nav-next a{display:block}
.nav-label{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.nav-title{font-size:16px;font-weight:600;color:var(--heading);margin-bottom:6px}
.nav-next{text-align:right}

/* ============================================================
   DARK THEME (Writing Section)
============================================================ */
.writing-world{background:var(--ink);color:var(--ink-body);position:relative;overflow:hidden}
.writing-world::before{content:"";position:absolute;top:-160px;left:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.16),transparent 65%);pointer-events:none}
.writing-world::after{content:"";position:absolute;bottom:-180px;right:-140px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(255,46,99,.10),transparent 65%);pointer-events:none}
.writing-world .container{position:relative;z-index:1}
.writing-world .sec-tag{color:#C9B8F5}
.writing-world .sec-title{color:#fff}
.writing-world h3,.writing-world h4,.writing-world h5{color:#fff}

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:1024px){
  .blog-grid-2{grid-template-columns:1fr}
  .literature-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

@media(max-width:720px){
  section{padding:70px 0}
  .nav-links{position:fixed;top:0;right:-300px;width:280px;height:100vh;background:#fff;flex-direction:column;gap:8px;padding:100px 34px;box-shadow:var(--shadow-lg);transition:right .4s cubic-bezier(.16,1,.3,1);z-index:999}
  .nav-links.open{right:0}
  .nav-links a{font-size:17px;padding:10px 0}
  #navToggle{display:flex;z-index:1001}
  #navToggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  #navToggle.open span:nth-child(2){opacity:0}
  #navToggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .blog-grid-2,.literature-grid{grid-template-columns:1fr}
  .fc-body{padding:26px 24px 30px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .article-nav{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- breadcrumbs ----------
   Rendered by site-chrome.php from the same trail as the BreadcrumbList schema, so
   the visible path and the structured one cannot disagree. Quiet on purpose: it
   orients, it does not compete with the headline. */
.breadcrumbs{margin:0 0 16px;font-size:13px;line-height:1.4;color:var(--body)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;list-style:none;margin:0;padding:0}
.breadcrumbs li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.breadcrumbs li+li::before{content:"/";color:var(--body);opacity:.5}
.breadcrumbs a{color:var(--body);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.breadcrumbs a:hover{color:var(--accent-ink)}
.breadcrumbs [aria-current="page"]{color:var(--heading);font-weight:500;max-width:36ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:720px){ .breadcrumbs [aria-current="page"]{max-width:22ch} }

/* ---------- topic links (end of an article) ----------
   Up to the hub, across to related articles. Sits directly above the share bar,
   which already draws the dividing rule. */
.topic-links{max-width:750px;margin:0 auto;padding:8px 24px 36px}
.topic-links__hub{font-size:14.5px;color:var(--body);margin:0}
.topic-links__hub a{color:var(--accent-2);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.topic-links__hub a:hover{color:var(--accent-ink)}
.topic-links__title{font-family:var(--font-head);font-size:14px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--body);margin:22px 0 12px}
.topic-links ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.topic-links li a{font-weight:600;color:var(--heading);line-height:1.45}
.topic-links li a:hover{color:var(--accent-ink)}
.topic-links li span{display:block;font-size:13px;color:var(--body);margin-top:2px}

/* ---------- professional hubs ---------- */
.article-content .lede{font-size:18px;line-height:1.75;color:var(--heading)}
.hub-section{padding:12px 0 56px}
.hub-section .sec-title{text-align:left;font-size:clamp(24px,3vw,32px);margin:0 0 24px}
.hub-section .literature-grid{margin-top:0}
.hub-subtitle{font-family:var(--font-head);font-size:18px;color:var(--heading);margin:40px 0 18px}
.hub-areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.hub-areas a{display:block;height:100%;padding:20px 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s}
.hub-areas a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(124,58,237,.25)}
.hub-areas strong{display:block;font-family:var(--font-head);font-size:16px;color:var(--heading);margin-bottom:6px}
.hub-areas span{display:block;font-size:14px;color:var(--body);line-height:1.55}
@media(prefers-reduced-motion:reduce){ .hub-areas a:hover{transform:none} }

/* Tables in long-form content: hubs and studies use them for comparisons. */
.article-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;display:block;overflow-x:auto}
.article-content th,.article-content td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.article-content th{font-family:var(--font-head);font-weight:600;color:var(--heading)}