/* ---------- SELF-HOSTED FONTS ----------
   Variable woff2 files served from /assets/fonts/ (latin + latin-ext),
   replacing the render-blocking fonts.googleapis.com request. Weight
   ranges match what the site actually uses: Montserrat 700-900 for
   headings, Nunito Sans 400-700 for body text. */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:700 900;
  font-display:swap;
  src:url('/assets/fonts/montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:700 900;
  font-display:swap;
  src:url('/assets/fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/nunito-sans-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/nunito-sans-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --ocean:#014263;
  --ocean-deep:#012f47;
  --inspire:#31ADE3;
  --cultivate:#70C9CC;
  --kindle:#E59D33;
  /* Text-safe variants of the two accent hues. Inspire (#31ADE3) and
     Kindle (#E59D33) fail WCAG AA as TEXT on white/panel (2.6:1 and 2.3:1
     against a 4.5:1 requirement) — they stay in use as fills (buttons,
     icons, rules), but any text set in an accent color uses these darker
     steps of the same hue instead:
       --inspire-text on white 5.6:1, on panel 5.0:1
       --kindle-text  on white 5.2:1, on panel 4.7:1 */
  --inspire-text:#0F6E9E;
  --kindle-text:#946200;
  --tech:#231F20;
  --paper:#FFFFFF;
  --panel:#E3F6F6;
  --panel-deep:#CDEFF0;
  --white:#FFFFFF;
  --heading-font:'Montserrat', 'Avenir', sans-serif;
  --body-font:'Nunito Sans', 'Avenir Book', sans-serif;
  --max:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body-font);
  color:var(--tech);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--heading-font);font-weight:900;line-height:1.12;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:var(--heading-font);
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--inspire-text);
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
:focus-visible{outline:3px solid var(--kindle); outline-offset:2px;}

/* Skip link: first tab stop on every page, visually hidden until focused. */
.skip-link{
  position:absolute; inset-inline-start:0; top:0; z-index:100;
  /* Hidden by moving up, not off-screen left — a -9999px left offset
     expands the scrollable area on RTL pages and breaks the layout. */
  transform:translateY(-200%);
  background:var(--ocean); color:var(--white); font-weight:700;
  padding:12px 20px; border-radius:0 0 10px 0; text-decoration:underline;
}
.skip-link:focus{transform:none;}

/* ---------- NAV ---------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(227,246,246,0.92);
  backdrop-filter:blur(6px);
  color:var(--ocean);
  border-bottom:1px solid rgba(1,66,99,0.08);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; max-width:var(--max); margin:0 auto;
}
.brand{font-family:var(--heading-font); font-weight:800; font-size:1.05rem; color:var(--ocean);}
nav.links{display:flex; gap:28px; font-weight:600; font-size:0.92rem;}
nav.links a{opacity:0.82; transition:opacity 0.2s; color:var(--ocean);}
nav.links a:hover, nav.links a[aria-current="page"]{opacity:1;}
.menu-btn{
  display:none; background:none; border:none; color:var(--ocean);
  font-size:1.5rem; cursor:pointer; line-height:1;
  width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:8px;
}
.menu-btn:hover{background:rgba(1,66,99,0.06);}

@media (max-width:820px){
  nav.links{
    display:none; flex-direction:column; align-items:flex-start; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--panel); padding:12px 28px 20px;
    box-shadow:0 12px 24px rgba(1,66,99,0.12);
    border-bottom:1px solid rgba(1,66,99,0.1);
  }
  nav.links.open{display:flex;}
  nav.links a{padding:10px 0; width:100%; font-size:1rem;}
  .menu-btn{display:flex;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:linear-gradient(160deg, #FBFEFE 0%, var(--panel) 65%, var(--panel-deep) 100%);
  color:var(--tech);
  padding:96px 0 80px;
  overflow:hidden;
}
.hero-inner{
  max-width:var(--max); margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:center;
}
.hero h1{font-size:clamp(2.4rem, 5vw, 3.6rem); margin:16px 0 22px; color:var(--ocean);}
.hero p.sub{font-size:1.12rem; max-width:520px; color:#3d4b52; margin-bottom:32px;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap;}
/* The hero's three-button row is tight for space (the text column shares
   the hero grid with the illustration), so its buttons are sized a touch
   smaller than the site default — enough to keep all three on one line
   from mobile up through desktop instead of the third one wrapping under
   the first two. */
.hero .cta-row{gap:12px;}
.hero .btn{padding:13px 22px; font-size:0.92rem;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-weight:800; font-size:0.98rem;
  transition:transform 0.18s ease, box-shadow 0.18s ease; cursor:pointer; border:2px solid transparent;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--inspire); color:var(--ocean-deep); box-shadow:0 8px 24px rgba(49,173,227,0.35);}
.btn-primary:hover{box-shadow:0 12px 28px rgba(49,173,227,0.45);}
.btn-outline{border-color:rgba(1,66,99,0.35); color:var(--ocean);}
.btn-outline:hover{background:rgba(1,66,99,0.06);}
  .btn:disabled{opacity:0.4; cursor:not-allowed; transform:none !important;}
.btn-kindle{background:var(--kindle); color:var(--ocean-deep); box-shadow:0 8px 24px rgba(229,157,51,0.35);}

.hero-art{position:relative; display:flex; justify-content:center; padding:16px 40px 40px 16px;}
.hero-stack{
  position:relative; width:100%; max-width:600px; aspect-ratio:16/9;
  cursor:pointer;
}
.hero-stack img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:20px; border:1px solid rgba(1,66,99,0.12);
  box-shadow:0 24px 48px rgba(1,66,99,0.16);
  transition:transform 0.7s cubic-bezier(0.4,0,0.2,1), opacity 0.7s ease, z-index 0s 0.35s;
}
.hero-stack .stack-pos-0{transform:rotate(0deg) translate(0,0) scale(1); z-index:4; opacity:1;}
.hero-stack .stack-pos-1{transform:rotate(3.5deg) translate(14px,14px) scale(0.97); z-index:3; opacity:0.9;}
.hero-stack .stack-pos-2{transform:rotate(7deg) translate(28px,28px) scale(0.94); z-index:2; opacity:0.78;}
.hero-stack .stack-pos-3{transform:rotate(10.5deg) translate(42px,42px) scale(0.91); z-index:1; opacity:0.62;}

@media (max-width:1040px){
  /* Below this the two-column hero (text sharing the row with the
     illustration) squeezes the CTA row too tight for all three buttons
     to stay on one line — stack to a single column instead of shrinking
     the buttons further. The illustration follows the text (no order:-1):
     putting it first pushed the headline to ~450px and the CTAs below the
     fold on a phone, so the first screen was an unlabelled picture. */
  .hero-inner{grid-template-columns:1fr;}
  .hero-art{margin-top:8px;}
}

@media (max-width:520px){
  .hero-art{padding:8px 24px 24px 8px;}
}

/* ---------- PAGE HEADER (non-hero pages) ---------- */
.page-header{
  background:linear-gradient(160deg, #FBFEFE 0%, var(--panel) 100%);
  padding:72px 0 56px;
}
.page-header h1{font-size:clamp(2rem, 4vw, 2.8rem); color:var(--ocean); margin:10px 0 16px;}
.page-header p{font-size:1.08rem; max-width:640px; color:#3d4b52;}

/* ---------- PAGE-LEVEL TABS (e.g. Translate: How to Translate / Resources) ---------- */
/* Underline style, attached to the bottom of the page header rather than
   floating in its own whitespace — reads as primary in-page navigation
   rather than a search filter (which is what the pill/chip style elsewhere
   on this site is reserved for). */
.page-tabs{display:flex; gap:32px; border-bottom:2px solid rgba(1,66,99,0.12);}
.page-tab{
  appearance:none; background:none; border:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:1rem; color:#5b6b72;
  padding:0 0 14px; border-bottom:3px solid transparent; margin-bottom:-2px;
  transition:color .15s ease, border-color .15s ease;
}
.page-tab:hover{color:var(--ocean);}
.page-tab.active{color:var(--ocean); border-bottom-color:var(--inspire);}

/* ---------- SECTION GENERIC ---------- */
section{padding:80px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.2rem); margin:10px 0 16px; color:var(--ocean);}
.section-head p{font-size:1.05rem; color:#3d4b52;}

/* ---------- CARD GRID (reused for features/steps) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.card{
  background:var(--white); border-radius:16px; padding:28px 26px;
  border:1px solid #e2eef1;
}
.card h3{font-size:1.15rem; color:var(--ocean); margin-bottom:10px;}
.card p{color:#4a5960; font-size:0.96rem;}
.card ul{margin:12px 0 0 18px; color:#4a5960; font-size:0.94rem;}
.card li{margin-bottom:6px;}

@media (max-width:900px){
  .card-grid, .card-grid.cols-2{grid-template-columns:1fr;}
}

/* ---------- STATS ---------- */
.big-stat{
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 48px; position:relative;
}
.big-stat::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle, rgba(49,173,227,0.14), transparent 70%);
  z-index:-1;
}
.big-stat-num{
  font-family:var(--heading-font); font-weight:900;
  font-size:clamp(4.5rem, 12vw, 7.5rem); line-height:1;
  background:linear-gradient(135deg, var(--ocean), var(--inspire));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-0.02em;
}
.big-stat-label{
  font-family:var(--heading-font); font-weight:800; font-size:1.05rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ocean);
  line-height:1.4;
}

.stats-section{
  background:var(--panel); color:var(--tech); position:relative; overflow:hidden;
}
.stats-section::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 15% 20%, rgba(229,157,51,0.1), transparent 40%),
                    radial-gradient(circle at 85% 80%, rgba(49,173,227,0.12), transparent 45%);
}
.stats-inner{position:relative; z-index:1;}
.stats-section .eyebrow{color:var(--inspire-text);}
.stats-section h2{color:var(--ocean); margin:10px 0 48px; font-size:clamp(1.8rem,3.4vw,2.4rem); max-width:620px;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px;}
.stat{border-inline-start:3px solid var(--inspire); padding-inline-start:18px;}
.stat .num{font-family:var(--heading-font); font-weight:900; font-size:clamp(1.6rem,3vw,2.2rem); color:var(--ocean);}
.stat .label{margin-top:6px; font-size:0.95rem; color:#3d4b52;}
@media (max-width:900px){.stat-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
@media (max-width:520px){.stat-grid{grid-template-columns:1fr;}}

/* ---------- STUDY READER ---------- */
@media (max-width:820px){
  .study-reader{grid-template-columns:1fr !important;}
}

/* ---------- FULL LIBRARY ACCORDION ---------- */
.full-lib-lang{
  border:1px solid rgba(1,66,99,0.12); border-radius:10px; margin-bottom:8px; overflow:hidden;
}
.full-lib-lang > summary{
  padding:16px 20px; font-weight:800; color:var(--ocean); cursor:pointer; background:var(--white);
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.full-lib-lang > summary::-webkit-details-marker{display:none;}
.full-lib-lang[open] > summary{background:var(--panel);}
.full-lib-lang-body{padding:0 20px 16px;}

.full-lib-owner{
  border:1px solid rgba(1,66,99,0.1); border-radius:8px; margin:10px 0; background:var(--white);
}
.full-lib-owner > summary{
  padding:12px 16px; font-weight:700; color:var(--ocean); background:var(--ocean-deep); color:#fff;
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; border-radius:8px 8px 0 0;
}
.full-lib-owner > summary::-webkit-details-marker{display:none;}
.full-lib-owner-body{padding:14px 16px;}

.full-lib-resource{border:1px solid rgba(1,66,99,0.08); border-radius:6px; margin-bottom:10px;}
.full-lib-resource > summary{
  padding:10px 14px; font-weight:700; font-size:0.92rem; color:var(--ocean); background:var(--panel);
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; border-radius:6px 6px 0 0;
}
.full-lib-resource > summary::-webkit-details-marker{display:none;}
.full-lib-resource-body{padding:12px 16px; display:flex; flex-direction:column; gap:6px;}
.full-lib-link{font-size:0.88rem; color:var(--inspire-text); display:flex; align-items:center; gap:6px;}
.full-lib-link .tag{color:#64747d; font-size:0.78rem;}

.full-lib-other{border:1px solid rgba(1,66,99,0.08); border-radius:6px; margin-top:6px;}
.full-lib-other > summary{
  padding:8px 12px; font-weight:700; font-size:0.85rem; color:var(--ocean); background:#f1f8f8;
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; border-radius:6px;
}
.full-lib-other > summary::-webkit-details-marker{display:none;}
.full-lib-other-body{padding:8px 12px 4px; display:flex; flex-direction:column; gap:4px;}

/* ---------- AUDIENCE / PILLS ---------- */
#mission{
  position:relative;
  background-image:linear-gradient(rgba(255,255,255,0.93), rgba(255,255,255,0.93)), url('/assets/img/story-garden.jpg');
  background-size:cover;
  background-position:center 65%;
}
.audience-wrap{text-align:center;}
.audience-wrap .section-head{margin-left:auto; margin-right:auto; text-align:center;}
.pill-field{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:12px 0 40px;
}
.pill{
  font-family:var(--heading-font); font-weight:700; font-size:0.95rem;
  padding:12px 24px; border-radius:999px; background:var(--white);
  border:2px solid #d9ecef; color:var(--ocean);
  transition:transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.pill:hover{border-color:var(--inspire); background:rgba(49,173,227,0.08); transform:translateY(-2px);}

.possibility-line{
  font-style:italic; color:#3d4b52; font-size:1.05rem;
  max-width:640px; margin:20px 0 0; line-height:1.7;
}
.audience-wrap .closing-line{
  max-width:600px; margin:0 auto; font-size:1.15rem; color:var(--ocean); font-weight:600;
}

/* ---------- FINAL CTA ---------- */
.final-cta{
  background:linear-gradient(135deg, #FBFEFE, var(--panel) 55%, var(--panel-deep));
  color:var(--tech); text-align:center; position:relative; overflow:hidden;
}
.final-cta::after{
  content:""; position:absolute; bottom:-40%; left:50%; transform:translateX(-50%);
  width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle, rgba(229,157,51,0.14), transparent 60%);
}
.final-cta-inner{position:relative; z-index:1; max-width:700px; margin:0 auto;}
.final-cta h2{font-size:clamp(1.9rem,4vw,2.6rem); color:var(--ocean); margin-bottom:18px;}
.final-cta p{font-size:1.08rem; color:#3d4b52; margin-bottom:40px;}
.final-cta .cta-row{justify-content:center;}

/* ---------- LIBRARY PAGE ---------- */
.library-tools{max-width:720px; margin:0 auto 40px;}
.search-box{
  display:flex; align-items:center; gap:10px; background:var(--white);
  border:1px solid rgba(1,66,99,0.2); border-radius:999px; padding:12px 20px;
  margin-bottom:16px;
}
.search-box input{
  /* padding-block (not just the pill's own padding) so the input's real
     focusable box fills the visible pill height, instead of leaving a
     thin text-height strip as the only part that actually responds to a tap */
  border:none; outline:none; font-size:1rem; flex:1; font-family:var(--body-font); color:var(--tech); background:transparent;
  padding-block:8px; min-width:0; text-overflow:ellipsis;
}
.format-filters{display:flex; gap:10px; flex-wrap:wrap;}
.filter-chip{
  font-size:0.85rem; font-weight:700; padding:8px 16px; border-radius:999px;
  border:1px solid rgba(1,66,99,0.25); background:var(--white); color:var(--ocean); cursor:pointer;
}
.filter-chip.active{background:var(--ocean); color:var(--white); border-color:var(--ocean);}
@media (pointer:coarse){
  /* 33px-tall chips clear the bare 24px minimum but sit well under the
     ~44px comfortable touch target — and these are the primary filter
     control on a page used heavily on phones. */
  .filter-chip{padding:12px 18px;}
}
.lib-status{text-align:center; color:#4a5960; font-size:0.9rem; margin-bottom:24px;}
.lang-list{display:flex; flex-direction:column; gap:2px; max-width:820px; margin:0 auto; list-style:none; padding:0;}
.lang-list li{margin:0;}
.lang-list li[hidden]{display:none;}
/* Rows are prerendered links (crawlable, keyboard-native); discover.js
   only filters and intercepts clicks to open the inline reader. */
.lang-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; border-bottom:1px solid rgba(1,66,99,0.08); background:var(--white);
  border-radius:10px; cursor:pointer; flex-wrap:wrap; color:inherit; text-decoration:none;
}
.lang-row:hover{background:var(--panel);}
.lang-row .name{font-weight:700; color:var(--ocean); font-size:1rem;}
.lang-row .code{font-size:0.82rem; color:#4a5960;}
.lang-row .code .english{color:var(--ocean); font-weight:600;}
.detail-text-link{color:var(--inspire-text); text-decoration:underline; font-size:0.92rem;}
.lang-row .code code{font-family:inherit;}
.lang-row .badges{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.badge{font-size:0.72rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--panel); color:var(--ocean);}
.badge.audio{background:#FBEFDB; color:#7a4e10;}
.badge.video{background:#F5E3EE; color:#7a1a52;}

/* ---------- STEP LIST (Translate page) ---------- */
.step-list{display:flex; flex-direction:column; gap:0; max-width:820px; margin:0 auto;}
.step-item{
  display:flex; gap:24px; padding:28px 4px; border-bottom:1px solid rgba(1,66,99,0.1);
}
.step-item:last-child{border-bottom:none;}
.step-num{
  flex:none; width:44px; height:44px; border-radius:50%; background:var(--ocean);
  color:var(--white); font-family:var(--heading-font); font-weight:800; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
}
.step-item.celebrate .step-num{background:var(--kindle);}
.step-body h3{font-size:1.1rem; color:var(--ocean); margin-bottom:6px;}
.step-body p{color:#4a5960; font-size:0.96rem; margin-bottom:6px;}
.step-body ul{margin:8px 0 0 18px; color:#4a5960; font-size:0.94rem;}
.step-body a{color:var(--inspire-text); text-decoration:underline;}

@media (max-width:600px){
  .step-item{gap:16px;}
}

/* ---------- STORY ROW (Why OBS field-story blocks) ---------- */
.story-row{display:grid; grid-template-columns:200px 1fr; gap:28px; align-items:center;}
.story-row img{width:100%; height:150px; object-fit:cover; border-radius:12px;}
@media (max-width:640px){
  .story-row{grid-template-columns:1fr;}
  .story-row img{height:200px;}
}

/* ---------- HERO STORY (Why OBS section 1 — banner image, then byline/heading on white) ---------- */
.hero-story-inner{max-width:760px; margin:0 auto; text-align:center;}
.hero-story-byline{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:32px;}
.hero-story-byline img{width:84px; height:84px; border-radius:50%; object-fit:cover;}
.hero-story-byline .name{font-weight:800; color:var(--ocean);}
.hero-story-byline .role{font-size:0.95rem; font-weight:700; color:var(--ocean);}
.hero-story-heading{font-size:clamp(1.8rem, 3.6vw, 2.4rem); color:var(--ocean); margin-bottom:8px;}
.hero-story-subhead{
  font-family:var(--heading-font); font-weight:700; color:var(--inspire-text);
  font-size:0.95rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:20px;
}
.hero-story-teaser{font-size:1.12rem; line-height:1.7; color:#2b3a41;}

/* ---------- STORY CONTINUED (Why OBS section 2 — full narrative) ---------- */
.story-continued p{font-size:1.08rem; line-height:1.75; color:#2b3a41; margin-bottom:20px;}
.story-bridge{font-weight:700; color:var(--ocean); font-size:1.1rem;}
.section-kicker{font-size:clamp(1.6rem, 3vw, 2.2rem); color:var(--ocean); margin-bottom:28px;}

/* ---------- SCROLL CARDS (Why OBS section 3 — horizontal outcome cards) ---------- */
.scroll-cards-wrap{position:relative; margin-top:16px;}
.scroll-cards{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:8px 4px 20px; margin:0 -4px; scrollbar-width:thin;
}
.scroll-card{
  flex:0 0 auto; scroll-snap-align:start; width:270px;
  background:var(--white); border-radius:16px; padding:26px 24px;
  border:1px solid #e2eef1; box-shadow:0 6px 18px rgba(1,66,99,0.06);
}
.scroll-card-icon{
  width:52px; height:52px; border-radius:50%; background:rgba(49,173,227,0.12);
  color:var(--inspire); display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.scroll-card h3{font-size:1.1rem; color:var(--ocean); margin-bottom:10px; line-height:1.3;}
.scroll-card p{font-size:0.92rem; color:#4a5960; line-height:1.55;}
.scroll-arrow{
  display:none; align-items:center; justify-content:center;
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; background:var(--white);
  border:1px solid rgba(1,66,99,0.2); color:var(--ocean); font-size:1.1rem; cursor:pointer;
  box-shadow:0 6px 16px rgba(1,66,99,0.12); z-index:2;
}
.scroll-arrow-left{left:-21px;}
.scroll-arrow-right{right:-21px;}
.scroll-arrow:hover{background:var(--panel);}
@media (min-width:1060px){
  .scroll-arrow{display:flex;}
}

/* ---------- FIELD VOICES AUTO-ROTATING BANNER (Why OBS section 3 — around the world) ----------
   No tab/button row — quotes fade in on their own timer. Each panel is a
   centered card; the small dots below (.whyworks-dots) are the only manual
   control, for a direct jump and for browsing without motion when
   prefers-reduced-motion is set (see the script that drives this). */
.whyworks-stage{min-height:220px;}
.whyworks-panel{display:none;}
.whyworks-panel.active{display:block; animation:whyworks-fade 0.3s ease;}
.whyworks-copy{
  max-width:640px; margin:0 auto; text-align:center;
  background:var(--white); border-radius:16px; padding:36px 32px;
  border:1px solid #e2eef1; box-shadow:0 8px 22px rgba(1,66,99,0.08);
}
.whyworks-copy .quote{font-style:italic; color:#2b3a41; font-size:1.15rem; margin-bottom:14px; line-height:1.65;}
.whyworks-copy .attr{font-size:0.85rem; font-weight:700; color:#4a5960;}
.whyworks-dots{display:flex; justify-content:center; gap:2px; margin-top:24px;}
.whyworks-dot{
  /* Visible dot stays a subtle 10px, but the button box itself is 24x24 —
     a bare 10px tap target is well under the ~24px minimum for comfortable
     touch, so the hit area is padded out around it via ::before. */
  appearance:none; border:none; cursor:pointer; background:transparent;
  width:24px; height:24px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.whyworks-dot::before{
  content:""; display:block; width:10px; height:10px; border-radius:50%;
  background:rgba(1,66,99,0.25); transition:background .2s ease, transform .2s ease;
}
.whyworks-dot:hover::before{background:rgba(1,66,99,0.45);}
.whyworks-dot.active::before{background:var(--inspire); transform:scale(1.3);}
@keyframes whyworks-fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
@media (max-width:640px){
  .whyworks-copy{padding:28px 22px;}
}

/* ---------- DISCOVER HERO BACKDROP MAP (decorative only, not interactive) ----------
   A single-color, low-opacity world map sits behind just the top intro text
   (eyebrow/heading/subhead) as a subtle texture, rather than a clickable
   region filter. There is no real geographic data behind the OBS catalog
   (verified against the live Door43 API — no continent/region field exists
   for any of the 213 published languages), so a functional map would either
   be fake or broken; this purely visual treatment was explicitly OK'd
   instead. Scoped to its own wrapper (not the shared .page-header class,
   which also wraps the language list below) so the map stays anchored to
   the intro only and never overlaps the search/list content underneath. */
/* No overflow:hidden here on purpose — a previous version clipped most of
   the map away (the container is only as tall as the 3-line intro text, so
   hiding overflow chopped off everything below the equator: Africa, South
   America, Oceania all disappeared, leaving two unrecognizable blobs). The
   map is positioned fully inside the intro block's own width instead, so
   nothing needs to be clipped for it to stay out of the way of the text. */
.discover-hero-intro{position:relative; padding-inline-end:24px;}
.discover-hero-intro > *{position:relative; z-index:1;}
.discover-map-backdrop{
  position:absolute;
  top:8px; inset-inline-end:0;
  width:340px;
  max-width:34vw;
  opacity:0.18;
  pointer-events:none;
  z-index:0;
}
@media (max-width:900px){
  .discover-map-backdrop{width:280px; max-width:44vw; top:12px;}
}
@media (max-width:700px){
  /* On phones the map used to flow into the document (position:relative),
     taking ~200px and pushing the search box — the whole point of the
     page — below the fold. It's aria-hidden decoration, so it simply
     goes away on small screens. */
  .discover-map-backdrop{display:none;}
}

/* ---------- FOOTER ----------
   One continuous block: logo+nav row, then a single small credit line
   below — no second heading-weight section, so it doesn't read as two
   stacked footers. The divider between them is intentionally light. */
body > footer{background:var(--panel); color:#3d4b52; padding:40px 0 28px; border-top:1px solid rgba(1,66,99,0.08);}
.footer-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; padding-bottom:20px; border-bottom:1px solid rgba(1,66,99,0.07);}
.footer-top img{height:28px;}
.footer-links{display:flex; gap:26px; font-size:0.9rem; font-weight:600; flex-wrap:wrap;}
.footer-links a{color:var(--ocean);}

.footer-credit{margin:16px 0 0; font-size:0.85rem; color:#5a6a71; line-height:1.5; text-align:center;}
.footer-legal{margin:8px 0 0; font-size:0.85rem; color:#5a6a71; text-align:center;}
.footer-legal a{color:var(--ocean); font-weight:700;}

/* Legal pages (privacy policy, terms of use) */
.legal{max-width:760px;}
.legal h2{font-size:1.35rem; color:var(--ocean); margin:36px 0 14px;}
.legal h2:first-child{margin-top:0;}
.legal p{margin:0 0 14px; line-height:1.7;}
.legal ul, .legal ol{margin:0 0 14px; padding-left:24px; line-height:1.7;}
.legal li{margin-bottom:8px;}
.legal a{color:var(--inspire-text); text-decoration:underline;}
.footer-credit a{color:var(--ocean); font-weight:700;}

@media (max-width:600px){
  section{padding:56px 0;}
  .card-grid{grid-template-columns:1fr;}
  /* iOS Safari auto-zooms on focus for inputs/selects under 16px */
  input, select{font-size:16px !important;}
}

/* ---------- FULL-PAGE READER (/discover/read/) ---------- */
/* Overrides the reader's inline fixed height so the full-page view isn't
   still capped to the same small, internally-scrolling box used inline on
   Discover (see the .study-main / .slide-content comment in discover.js —
   that box is intentionally fixed-height so the Next/Back buttons don't
   shift position between slides; the full-page reader has room to just
   grow with the content instead). */
#full-reader .study-main{
  height:auto !important;
}
#full-reader .slide-content{
  overflow:visible !important;
}

/* ---------- LANGUAGE SWITCHER ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.lang-switcher{position:relative; font-size:0.88rem;}
.lang-switcher-code{display:none;}
@media (max-width:820px){
  .lang-switcher-name{display:none;}
  .lang-switcher-code{display:inline;}
}
.lang-switcher-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:1px solid rgba(1,66,99,0.25); border-radius:8px;
  color:var(--ocean); font-family:var(--body-font); font-weight:600;
  font-size:0.88rem; padding:6px 12px; cursor:pointer;
}
.lang-switcher-btn:hover{background:rgba(1,66,99,0.06);}
.lang-switcher-menu{
  display:none; position:absolute; inset-inline-end:0; top:calc(100% + 6px);
  z-index:60; min-width:12em; max-height:70vh; overflow-y:auto;
  list-style:none; margin:0; padding:6px 0;
  background:var(--paper); border:1px solid rgba(1,66,99,0.12);
  border-radius:10px; box-shadow:0 12px 28px rgba(1,66,99,0.18);
}
.lang-switcher-btn[aria-expanded="true"] + .lang-switcher-menu{display:block;}
/* One alignment for the whole list (the page's direction) — per-item
   dir= attributes keep each name's glyph order correct without letting
   RTL names jump to the opposite edge of the menu. */
.lang-switcher-menu a{display:block; padding:7px 16px; white-space:nowrap; color:var(--ocean); text-align:left;}
[dir="rtl"] .lang-switcher-menu a{text-align:right;}
.lang-switcher-menu a:hover{background:var(--panel);}
/* Mark the active language without relying on colour alone. */
.lang-switcher-menu a[aria-current="true"]{font-weight:800;}
.lang-switcher-menu a[aria-current="true"]::before{content:"\2713  ";}

/* ---------- NON-LATIN SCRIPT FONTS ----------
   Self-hosted per-script packs generated by scripts/build-font-css.mjs into
   /assets/fonts/ and <link>ed by Base.astro for the page's script only. The
   overrides are keyed on <html data-script="…"> — set from the locale's
   `script` (src/i18n/config.ts) on marketing pages and from the detected
   script of the content language on /l/{code}/ hubs — so /l/ne/, /l/ckb/,
   /l/as/… get the same faces as hi, ar, bn. Keep the values in sync with
   the PACKS map in build-font-css.mjs. Cyrillic reuses the Montserrat/Nunito
   Sans family names, so it needs no override here — its pack just adds the
   cyrillic @font-face ranges. */
html[data-script="arabic"]{
  --heading-font:'Noto Sans Arabic', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Arabic', 'Nunito Sans', sans-serif;
}
html[data-script="nastaliq"]{
  --heading-font:'Noto Nastaliq Urdu', 'Montserrat', serif;
  --body-font:'Noto Nastaliq Urdu', 'Nunito Sans', serif;
}
html[data-script="devanagari"]{
  --heading-font:'Noto Sans Devanagari', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Devanagari', 'Nunito Sans', sans-serif;
}
html[data-script="bengali"]{
  --heading-font:'Noto Sans Bengali', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Bengali', 'Nunito Sans', sans-serif;
}
html[data-script="myanmar"]{
  --heading-font:'Noto Sans Myanmar', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Myanmar', 'Nunito Sans', sans-serif;
}
html[data-script="han"]{
  --heading-font:'Noto Sans SC', 'Montserrat', sans-serif;
  --body-font:'Noto Sans SC', 'Nunito Sans', sans-serif;
}
/* The same six faces, for the elements whose text was swapped in the browser
   (public/assets/js/locale.js). <html data-script> stays on the CONTENT
   language — the story text on a hub is still written in it — so a swapped
   element carries [data-i18n-script] instead.

   The attribute lands on exactly the elements whose text changed, never on a
   whole region: a region also wraps content-language text (the autonym H1,
   the story titles), and body text inherits a font-family computed on <body>,
   so a region-level custom property never reached the nav links at all.
   font-family is therefore set here too, not just the variables — with the
   heading rule after it, so a swapped h2 keeps the heading face rather than
   taking the body one from the attribute selector's higher specificity.
   Only the six scripts the 16 marketing locales use can appear. */
[data-i18n-script]{font-family:var(--body-font);}
h1[data-i18n-script],h2[data-i18n-script],h3[data-i18n-script],h4[data-i18n-script],
[data-i18n-script].eyebrow,[data-i18n-script].brand{font-family:var(--heading-font);}
[data-i18n-script="arabic"]{
  --heading-font:'Noto Sans Arabic', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Arabic', 'Nunito Sans', sans-serif;
}
[data-i18n-script="nastaliq"]{
  --heading-font:'Noto Nastaliq Urdu', 'Montserrat', serif;
  --body-font:'Noto Nastaliq Urdu', 'Nunito Sans', serif;
}
[data-i18n-script="devanagari"]{
  --heading-font:'Noto Sans Devanagari', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Devanagari', 'Nunito Sans', sans-serif;
}
[data-i18n-script="bengali"]{
  --heading-font:'Noto Sans Bengali', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Bengali', 'Nunito Sans', sans-serif;
}
[data-i18n-script="myanmar"]{
  --heading-font:'Noto Sans Myanmar', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Myanmar', 'Nunito Sans', sans-serif;
}
[data-i18n-script="han"]{
  --heading-font:'Noto Sans SC', 'Montserrat', sans-serif;
  --body-font:'Noto Sans SC', 'Nunito Sans', sans-serif;
}
/* Scripts with no marketing locale — these exist only because published
   translations do (/l/or/, /l/gu/, /l/ta/, /l/te/, /l/kn/, /l/ml/, /l/pa/,
   /l/lo/, /l/am/ and the 30-odd smaller languages that share their
   scripts). detectScript() in scripts/fetch-catalog.mjs decides which one a
   language gets. */
html[data-script="gurmukhi"]{
  --heading-font:'Noto Sans Gurmukhi', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Gurmukhi', 'Nunito Sans', sans-serif;
}
html[data-script="gujarati"]{
  --heading-font:'Noto Sans Gujarati', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Gujarati', 'Nunito Sans', sans-serif;
}
html[data-script="oriya"]{
  --heading-font:'Noto Sans Oriya', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Oriya', 'Nunito Sans', sans-serif;
}
html[data-script="tamil"]{
  --heading-font:'Noto Sans Tamil', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Tamil', 'Nunito Sans', sans-serif;
}
html[data-script="telugu"]{
  --heading-font:'Noto Sans Telugu', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Telugu', 'Nunito Sans', sans-serif;
}
html[data-script="kannada"]{
  --heading-font:'Noto Sans Kannada', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Kannada', 'Nunito Sans', sans-serif;
}
html[data-script="malayalam"]{
  --heading-font:'Noto Sans Malayalam', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Malayalam', 'Nunito Sans', sans-serif;
}
html[data-script="lao"]{
  --heading-font:'Noto Sans Lao', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Lao', 'Nunito Sans', sans-serif;
}
html[data-script="ethiopic"]{
  --heading-font:'Noto Sans Ethiopic', 'Montserrat', sans-serif;
  --body-font:'Noto Sans Ethiopic', 'Nunito Sans', sans-serif;
}
/* Nastaliq script is tall — give Urdu text extra breathing room. The
   heading override needs !important to beat the per-page inline
   line-height styles, which were tuned for Latin ascenders and clip
   Nastaliq's. */
html[data-script="nastaliq"] body{line-height:2;}
html[data-script="nastaliq"] h1, html[data-script="nastaliq"] h2, html[data-script="nastaliq"] h3, html[data-script="nastaliq"] h4{line-height:1.7 !important;}

/* Letter-spaced uppercase is a Latin/Cyrillic convention: on Arabic-script
   text it separates letters that must join, and on Devanagari it splits
   conjuncts. Applies to the ar/ur/hi/… marketing pages as well as hubs. */
html:not([data-script="latin"]):not([data-script="cyrillic"]) .eyebrow{letter-spacing:0;}

/* ---------- LANGUAGE HUBS (/l/{code}/) ---------- */
.hub-back{margin-bottom:22px; padding:9px 18px; font-size:0.85rem;}
.hub-header h1{font-size:clamp(2rem, 5vw, 3.2rem); margin:6px 0 4px;}
.hub-english-name{font-size:1.25rem; color:#4a5960; margin:0 0 18px; font-weight:600;}
.hub-format-list{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:12px;}
.hub-app-note{margin:18px 0 0; font-size:0.95rem; color:#4a5960;}
/* Shown only inside <noscript>, on the hubs whose read controls are reader
   fragments (see read() in src/pages/l/[code]/index.astro). */
.hub-js-note{margin:18px 0 0; font-size:0.95rem; color:#4a5960; max-width:640px;}
/* Inline links inside the hub's text need a non-colour cue (WCAG 1.4.1);
   the global a{} rule strips both colour and underline. */
.hub-facts a, .hub-license a, .hub-app-note a, .hub-partial a{color:var(--inspire-text); text-decoration:underline;}
.hub-extract-grid{display:grid; grid-template-columns:minmax(0, 360px) minmax(0, 1fr); gap:32px; align-items:start;}
.hub-extract-grid img{width:100%; height:auto; border-radius:12px; box-shadow:0 12px 28px rgba(1,66,99,0.16);}
.hub-extract blockquote{border-inline-start:3px solid var(--inspire); padding-inline-start:20px; margin:18px 0; font-size:1.15rem; line-height:1.7; color:var(--tech); max-width:760px;}
html[data-script="nastaliq"] .hub-extract blockquote{line-height:2.1;}
.hub-extract-title{font-family:var(--heading-font); font-weight:800; color:var(--ocean); margin:0 0 10px;}
.hub-extract footer{font-style:italic; color:#64747d; font-size:0.9rem; margin-top:10px;}
.hub-partial{color:#4a5960; margin:-6px 0 18px;}
.hub-partial a{margin-inline-start:6px;}
.hub-story-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:4px 24px;}
.hub-story-list a{display:flex; gap:12px; align-items:baseline; padding:8px 10px; border-radius:8px; color:var(--tech); text-decoration:none;}
.hub-story-list a:hover{background:var(--panel);}
.hub-story-num{font-weight:800; color:var(--inspire-text); min-width:2ch; text-align:end;}
.hub-about{background:var(--panel);}
.hub-about h2{font-size:1.3rem;}
.hub-facts{display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:18px 0 0; font-size:0.95rem; max-width:720px;}
.hub-facts dt{font-weight:700; color:var(--ocean);}
.hub-facts dd{margin:0; color:var(--tech);}
.hub-facts code{font-family:inherit; background:var(--white); padding:1px 8px; border-radius:6px;}
.hub-publishers{list-style:none; padding:0; margin:0;}
.hub-version, .hub-cc{color:#64747d; font-size:0.85em;}
.hub-license{font-size:0.9rem; color:#4a5960; margin:24px 0 0;}
@media (max-width:760px){ .hub-extract-grid{grid-template-columns:1fr;} .hub-extract-grid img{max-width:360px;} }
@media (max-width:640px){ .hub-facts{grid-template-columns:1fr;} .hub-facts dt{margin-top:8px;} }

/* ---------- QUESTIONS AND ANSWERS ----------
   One reading measure, answer directly under its question, no accordion:
   the answers are two or three sentences each and they are the point of the
   page (#17), so hiding them behind a click would hide them from the
   keyboard, from Reader mode, and from a crawler's first pass. Shared by the
   /faq/ pages (.faq-item, H2 + P) and the hubs' short FAQ (a DL). */
.faq-list{max-width:760px; margin:0 auto;}
.contact-faq-title{margin:0 0 18px;}
.faq-jump{margin:0 0 34px;}
.faq-jump ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px;}
.faq-jump a{font-size:0.95rem;}
.faq-item + .faq-item{margin-top:32px;}
/* An anchored heading must not land under the sticky header. */
.faq-item h2,.faq-item h3{scroll-margin-top:88px;}
.faq-item h2,.faq-item h3{font-size:clamp(1.15rem, 2.4vw, 1.45rem); color:var(--ocean); margin:0 0 10px;}
.faq-item p{color:var(--tech); max-width:none;}
/* An answer can run to more than one paragraph (a blank line in the i18n
   string). The global reset zeroes p margins, so without this the break was a
   0px gap against a 25.6px line-height — it read as a line wrap, and in the
   licence answer it ran CC BY-SA 4.0 and the illustrations' CC BY-SA 3.0
   together as one sentence about one licence. The whole page depends on the
   first paragraph reading as the answer and the rest as detail. */
.faq-item p + p{margin-top:14px;}
.hub-faq dd + dd{margin-top:10px;}
.faq-list a{color:var(--inspire-text); text-decoration:underline;}
.hub-faq{padding:8px 0 0;}
.hub-faq .faq-list{margin:0;}
.hub-faq dt{font-family:var(--heading-font); font-weight:800; color:var(--ocean); margin-top:26px;}
.hub-faq dd{margin:8px 0 0; color:var(--tech);}
.hub-faq > .wrap > p{margin-top:26px;}

/* ---------- STORY PAGES (/l/{code}/story-{n}/) ---------- */
/* A reading column, not a marketing page: one measure, generous leading, and
   the illustration above the text it belongs to. Logical properties
   throughout so RTL scripts mirror without a second rule set. */
.story{padding:32px 0 56px;}
.story .wrap{max-width:720px;}
.story-crumb{display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; font-size:0.9rem; margin-bottom:14px;}
.story-crumb a{color:var(--inspire-text); text-decoration:none;}
.story-crumb a:hover{text-decoration:underline;}
.story-count{color:#64747d;}
.story h1{font-size:clamp(1.8rem, 4vw, 2.6rem); line-height:1.25; margin:0 0 22px;}
.story-media{margin:0 0 30px;}
.story-audio, .story-video{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; padding:12px 16px; background:var(--panel); border-radius:10px;}
.story-audio-label{font-weight:700; color:var(--ocean); font-size:0.9rem;}
.story-audio audio{height:36px; max-width:280px; flex:1 1 220px;}
.story-video video{width:100%; max-width:360px; height:auto; border-radius:8px; background:#000;}
/* Download links for this story's own audio/video — the per-story
   alternative to a multi-gigabyte zip of all fifty (#16). */
.story-media-dl{color:var(--inspire-text); text-decoration:underline; font-size:0.9rem;}
/* The story text below is the transcript of the recording; saying so is what
   makes the connection legible to a reader as well as to a crawler. */
.story-transcript-note{color:#4a5960; font-size:0.9rem; margin:0;}
.story-frame{margin:0 0 34px;}
.story-frame img{display:block; width:100%; max-width:480px; height:auto; border-radius:10px; margin-bottom:14px;}
.story-frame p{font-size:1.15rem; line-height:1.8; margin:0; color:var(--tech);}
.story-reference{color:#64747d; margin:0 0 32px; font-size:0.95rem;}
.story-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 26px; padding-top:22px; border-top:1px solid #e4e9ec;}
.story-license{font-size:0.85rem; color:#64747d; margin:0;}
/* Nastaliq and other tall scripts clip at the Latin-tuned leading. */
html:lang(ur) .story-frame p{line-height:2.2;}
@media (max-width:640px){
  .story-frame p{font-size:1.08rem;}
  .story-nav .btn{flex:1 1 auto; text-align:center;}
}
/* A story whose title was read but whose text was not — shown, not linked. */
.hub-story-unlinked{display:flex; gap:12px; align-items:baseline; padding:8px 10px; color:#64747d;}

/* The reader, embedded on a language hub. The section ships hidden and
   hub-reader.js reveals it on first open, so there is nothing to lay out
   until someone actually asks to read. */
.hub-reader{scroll-margin-top:16px;}
.story-open-reader{margin:0 0 24px;}