/* ===========================================================
   Elite Minds - article + hub pages
   Loaded after style.css, which supplies the design tokens,
   navbar and container. Nothing here restates a token value;
   the poster look comes from reusing the same ones.
   =========================================================== */

/* ---------- navbar link (article pages have no anchor rail) ---------- */
.em-navlink {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.em-navlink:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.em-navlink:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- colour drenches, mirroring the homepage sections -------- */
.em-drench-green   { background: var(--green);   color: var(--paper); }
.em-drench-crimson { background: var(--crimson); color: var(--paper); }
.em-drench-purple  { background: var(--purple);  color: var(--paper); }
.em-drench-gold    { background: var(--gold);    color: var(--ink);   }
.em-drench-blue    { background: var(--blue);    color: var(--paper); }

/* ================= EPISODE PAGE ================= */

.em-hero {
  padding: calc(84px + clamp(40px, 7vw, 90px)) 0 clamp(40px, 7vw, 90px);
  border-bottom: 3px solid var(--ink);
}
.em-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.em-title {
  font-family: var(--font-display);
  /* Long names must not overflow, so the size is bounded by viewport. */
  font-size: clamp(2.6rem, 9vw, 6rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 10px 0 12px;
}
.em-known {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: 0.92;
  margin: 0;
}
.em-cover {
  width: clamp(150px, 26vw, 300px);
  height: auto;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--sticker);
  transform: rotate(-2deg);
  background: var(--cream);
}

/* ---------- the read ---------- */
/* Keeps the container's width so the left edge lines up with the hero
   headline above it -- the site's look is strongly left-aligned, and a
   centred narrow column would visibly step inwards. Line length is
   capped on the children instead. */
/* padding-BLOCK only. The old `padding: X 0 Y` shorthand also set inline
   padding to 0, which cancelled .container's padding-inline:26px -- on
   mobile that put every article paragraph flush against the screen edge. */
.em-read { padding-block: clamp(40px, 7vw, 84px) clamp(50px, 8vw, 100px); }
/* About, Privacy and Terms put .em-read inside .em-hub-list, which is already
   padded; without this the two paddings stacked into a ~170px empty band. */
.em-hub-list > .em-read { padding-top: 0; }
.em-read > * { max-width: 42rem; }

/* Each beat is its own line in the source, so give every one room to
   land. This is what keeps the article feeling like a poster rather
   than a blog paragraph. */
.em-beat {
  font-family: var(--font-body);
  font-size: clamp(1.06rem, 2.1vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

/* The "here's the hard truth" beat is the spine of the series, so it
   gets the glass treatment the homepage uses for its key panels. */
.em-truth {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--sticker);
  padding: clamp(18px, 3vw, 28px);
  margin: 2em 0;
  font-weight: 700;
  font-size: clamp(1.12rem, 2.3vw, 1.4rem);
}

.em-signature {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 2.4em 0 0;
  padding-top: 1.2em;
  border-top: 2px dashed var(--ink);
}
.em-correct {
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin: 0.8em 0 0;
  color: rgba(26, 25, 34, 0.72);
}
.em-correct a { color: var(--crimson); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- prev / next ---------- */
.em-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: clamp(36px, 6vw, 64px);
}
.em-pager-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--cream-2);
  box-shadow: var(--sticker);
  color: var(--ink);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.em-pager-next { text-align: right; align-items: flex-end; }
.em-pager-link:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.em-pager-dir {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.em-pager-name { font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; }

/* ================= HUB PAGE ================= */

.em-hub-hero {
  background: var(--blue);
  color: var(--paper);
  padding: calc(84px + clamp(46px, 8vw, 96px)) 0 clamp(46px, 8vw, 96px);
  border-bottom: 3px solid var(--ink);
}
.em-hub-title {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 15vw, 9rem);
  line-height: 0.86;
  text-transform: uppercase;
  margin: 12px 0 18px;
}
.em-hub-accent { color: var(--gold); }
.em-hub-lede {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 0 14px;
}
.em-hub-note {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  opacity: 0.85;
  margin: 0;
}

.em-hub-list { background: var(--cream); padding: clamp(44px, 7vw, 88px) 0; }
.em-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(18px, 3vw, 30px);
}
.em-card {
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--sticker);
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.em-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.em-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 20px;
  color: inherit;
}
.em-card-img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 3px solid var(--ink);
}
.em-card-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 16px 20px 2px;
  opacity: 0.75;
}
.em-card-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0 20px 6px;
}
.em-card-known {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0.9;
  margin: 0 20px;
}


/* ================= RESPONSIVE ================= */
@media (max-width: 760px) {
  .em-hero-inner { grid-template-columns: 1fr; }
  .em-cover { width: clamp(140px, 44vw, 220px); justify-self: start; }
  .em-pager { grid-template-columns: 1fr; }
  .em-pager-next { text-align: left; align-items: flex-start; }
  .em-navlink { padding: 7px 12px; font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .em-card, .em-pager-link, .em-navlink { transition: none; }
  .em-cover { transform: none; }
}

/* ===========================================================
   MINI CASE STUDIES
   Reuses the Elite Minds article shell; only what differs
   between the three formats is defined here.
   =========================================================== */

.em-navgroup { display: flex; gap: 8px; align-items: center; }
.em-navlink-cs { background: var(--coral); }

/* ---------- hub ---------- */
.cs-hub-hero { background: var(--crimson); }
.cs-hub-accent { color: var(--coral); }
.cs-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cs-card-name {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.08;
  text-transform: none;   /* titles are sentences, not names */
}
.cs-badge {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
/* Text-only studies have no artwork, so the card leads with type and
   needs its own top padding to not look clipped. */
.cs-card-text > a { padding-top: 22px; }

/* ---------- article ---------- */
/* 1.12, not 1.0: case-study titles keep lowercase, and Anton's descenders
   (y, g, p) plus the next line's capitals overrun a 1.0 line box -- "Why"
   visibly collided with "India" on #54. Elite Minds names stay tighter
   because they are uppercase and have no descenders. */
.cs-title { font-size: clamp(2rem, 5.4vw, 3.7rem); line-height: 1.18; text-transform: none; }
/* Long reads carry no image, so the hero gets breathing room instead. */
.cs-hero-text { padding-block: clamp(10px, 2vw, 26px); }

.cs-para {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 1.25em;
  text-wrap: pretty;
}
/* Bullet runs written as "-> ..." keep their shape but get hanging indent. */
.cs-list { padding-left: 1.1em; text-indent: -1.1em; }
.cs-rule { border: 0; border-top: 2px dashed var(--ink); opacity: 0.35; margin: 2em 0; }

/* ---------- carousel ---------- */
.cs-carousel { background: var(--cream-2); padding: clamp(26px, 4vw, 50px) 0; border-bottom: 3px solid var(--ink); }
.cs-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  /* Native swipe on touch; arrows drive it on desktop. */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.cs-track:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.cs-slide {
  flex: 0 0 min(520px, 84%);
  scroll-snap-align: center;
  width: min(520px, 84%);
  height: auto;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--sticker);
  background: var(--cream);
}
.cs-carousel-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}
.cs-arrow {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 800;
  width: 46px; height: 46px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.cs-arrow:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.cs-arrow:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.cs-arrow[disabled] { opacity: 0.35; cursor: default; box-shadow: 3px 3px 0 var(--ink); transform: none; }
.cs-counter { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; min-width: 62px; text-align: center; }

@media (max-width: 760px) {
  .em-navgroup { gap: 6px; }
  .cs-slide { flex-basis: 86%; width: 86%; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-track { scroll-behavior: auto; }
  .cs-arrow { transition: none; }
}

/* ---------- hub hero: centred, no eyebrow (both hubs) ---------- */
.em-hub-hero { text-align: center; }
.em-hub-hero .em-hub-title { margin-top: 0; }
/* The lede is centred with the title, so its max-width needs auto margins. */
.em-hub-hero .em-hub-lede { margin-inline: auto; max-width: 720px; }
.cs-lede-sep { opacity: 0.5; padding-inline: 4px; }

/* ---------- newest / oldest filter ---------- */
.cs-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(22px, 3vw, 34px);
}
.cs-filter-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-right: 2px;
}
.cs-filter-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
              background 0.16s var(--ease), color 0.16s var(--ease);
}
.cs-filter-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
/* Pressed state reads as "this is the active sort", not just a hover. */
.cs-filter-btn.is-on {
  background: var(--ink);
  color: var(--cream);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

@media (max-width: 760px) {
  .cs-filter { flex-wrap: wrap; gap: 8px; }
  .cs-filter-btn { padding: 8px 14px; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-filter-btn { transition: none; }
}

/* ---------- centred hub header: stacked, no collision ---------- */
/* The Elite Minds hub uses line-height 0.86 for a deliberately tight
   left-aligned stack. Centred and at this size the second line rides up
   into the first, so this hub gets its own leading. */
.cs-hub-hero .em-hub-title {
  line-height: 0.94;
  font-size: clamp(2.9rem, 11vw, 7rem);
}

.cs-lede {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 900px;   /* wide enough to keep line 2 unbroken on desktop */
}
.cs-lede-a { font-weight: 400; opacity: 0.95; }
.cs-lede-b { font-weight: 700; text-wrap: balance; }

@media (max-width: 760px) {
  .cs-hub-hero .em-hub-title { line-height: 0.96; }
  .cs-lede { gap: 4px; }
}

/* ===========================================================
   RICH READING TREATMENT  (opt-in per study)
   =========================================================== */

/* ---------- reading progress ---------- */
.cs-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 80;
  background: transparent;
  pointer-events: none;
}
.cs-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--coral);
  border-right: 2px solid var(--ink);
  transition: width 0.08s linear;
}

.cs-meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 12px 0 0;
}

/* ---------- highlighted figures ---------- */
/* A marker-pen sweep rather than a solid block: the ink stays readable and
   it matches the hand-made feel of the rest of the site. */
.cs-fig {
  background: linear-gradient(180deg, transparent 54%, var(--gold) 54%, var(--gold) 92%, transparent 92%);
  color: inherit;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
  white-space: nowrap;   /* "₹10 Lakhs" never splits across two lines */
}

/* ---------- pull-quote ---------- */
.cs-pull {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 1.6em 0;
  padding: 0 0 0 clamp(16px, 3vw, 28px);
  border-left: 6px solid var(--coral);
  text-wrap: balance;
}
.cs-pull::before { content: '\201C'; }
.cs-pull::after  { content: '\201D'; }

/* ---------- paragraph reveal ---------- */
/* Only armed when the head script confirmed JS + motion are OK, so text is
   never left invisible for crawlers or reduced-motion readers. */
.has-js .cs-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.has-js .cs-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cs-progress > span { transition: none; }
  .has-js .cs-reveal { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================
   READING SPOTLIGHT
   The line under the cursor lifts; everything else recedes.
   Dimming is done with COLOUR, not opacity, so it never fights
   the fade-up reveal (which owns opacity on the same elements).
   scale() is paint-only, so no text around it ever reflows.
   =========================================================== */
.cs-focus .cs-para,
.cs-focus .em-beat,
.cs-focus .cs-pull {
  transition: color 0.32s var(--ease), transform 0.32s var(--ease);
  transform-origin: left center;
  will-change: transform;
}

/* Only recedes once the reader is actually in the article, so the page
   never loads looking greyed out. */
.cs-focus.is-reading .cs-para,
.cs-focus.is-reading .em-beat { color: rgba(26, 25, 34, 0.65); }   /* 5.0:1 on cream, still easy to read */
.cs-focus.is-reading .cs-pull { color: rgba(122, 22, 34, 0.65); }   /* 3.9:1, large text */

.cs-focus.is-reading .cs-para.is-focus,
.cs-focus.is-reading .em-beat.is-focus,
.cs-focus.is-reading .cs-pull.is-focus {
  transform: scale(1.035);
}
.cs-focus.is-reading .cs-para.is-focus,
.cs-focus.is-reading .em-beat.is-focus { color: var(--ink); }
.cs-focus.is-reading .cs-pull.is-focus { color: var(--crimson); }

/* Highlights recede with their paragraph, otherwise the gold keeps
   shouting from lines the reader has left behind. Only the gold softens;
   the figure itself stays as readable as the text around it. */
.cs-focus.is-reading .cs-para:not(.is-focus) .cs-fig,
.cs-focus.is-reading .em-beat:not(.is-focus) .cs-fig {
  background: linear-gradient(180deg, transparent 54%, rgba(227, 169, 46, 0.45) 54%, rgba(227, 169, 46, 0.45) 92%, transparent 92%);
}

@media (prefers-reduced-motion: reduce) {
  .cs-focus .cs-para, .cs-focus .em-beat, .cs-focus .cs-pull { transition: none; transform: none !important; }
  .cs-focus.is-reading .cs-para,
  .cs-focus.is-reading .em-beat,
  .cs-focus.is-reading .cs-pull { color: inherit; }
  .cs-focus.is-reading .cs-para:not(.is-focus) .cs-fig,
  .cs-focus.is-reading .em-beat:not(.is-focus) .cs-fig { background: linear-gradient(180deg, transparent 54%, var(--gold) 54%, var(--gold) 92%, transparent 92%); }
}

/* ===========================================================
   MOBILE ACCESSIBILITY
   Nav, logo and footer links were rendering ~21-28px tall,
   under the ~44px minimum comfortable tap target. Making them
   inline-flex gives the padding real height without changing
   their width (so the wordmark slide measurement is unaffected).
   =========================================================== */
.em-navlink,
.em-footer-sub a,
.em-footer-line a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.em-footer-sub a { padding-inline: 10px; }

@media (max-width: 760px) {
  /* Small tracked labels sit at 12-13px on desktop, which is tight on a
     phone. Nudged up rather than restyled, so the look is unchanged. */
  .eyebrow { font-size: 0.86rem; }
  .cs-meta,
  .em-pager-dir { font-size: 0.86rem; }
  .cs-filter-label { font-size: 0.82rem; }
  /* Reading measure: give body copy the full column on a narrow screen. */
  .em-read > * { max-width: 100%; }
}

/* ===========================================================
   NAVBAR FIT
   The wordmark plus both pills measured ~375px of content in a
   338px bar at 390px wide, so the wordmark wrapped onto a second
   line and the pills sat on top of it. Everything shrinks a step
   on small screens, and the wordmark is never allowed to wrap.
   =========================================================== */
.logo { white-space: nowrap; }

@media (max-width: 560px) {
  .nav-inner { padding-inline: 16px; gap: 10px; }
  .logo { font-size: 1.02rem; }
  .em-navgroup { gap: 6px; flex-shrink: 0; }
  .em-navlink {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    padding: 6px 10px;
    min-height: 38px;
    box-shadow: 2px 2px 0 var(--ink);
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .logo { font-size: 0.94rem; }
  .em-navlink { font-size: 0.62rem; padding: 5px 8px; }
}

/* WebKit measured the wordmark and pills at under 40px tall where Chromium
   reported them fine -- min-height on an inline box is honoured differently.
   An explicit flex box with a set height behaves the same in both engines. */
.logo,
.em-navlink,
.em-footer-sub a,
.em-footer-line a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ===========================================================
   RELATED POSTS  (below the article body, before pager)
   Compact horizontal-scroll strip on mobile, 4-column grid on
   desktop. Reuses sticker shadow + colour drenches so the
   cards look like miniatures of the hub cards.
   =========================================================== */
.cs-related {
  margin: clamp(40px, 6vw, 72px) 0 clamp(20px, 3vw, 32px);
  /* Escape the reading column's 42rem cap so the 4-column grid has room.
     Related posts are metadata, not body copy -- they should span wide. */
  max-width: 100% !important;
}
.cs-related-h {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
  margin: 0 0 20px;
  letter-spacing: 0.01em;
}
.cs-related-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 22px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.cs-related-card {
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--sticker);
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cs-related-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.cs-related-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 14px;
  color: inherit;
}
.cs-related-img {
  width: 100%; height: auto;
  display: block;
  border-bottom: 2px solid var(--ink);
}
.cs-related-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 12px 14px 4px;
}
.cs-related-name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 14px;
}

@media (max-width: 900px) {
  .cs-related-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cs-related-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-related-card { transition: none; }
}

/* ===========================================================
   BREADCRUMBS
   Home > Section > Post - matches BreadcrumbList schema, gives
   one-click routes back to hub and homepage from any article.
   =========================================================== */
.cs-crumbs {
  padding: calc(72px + 12px) 0 4px;   /* clears the fixed navbar */
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--cream);
  border-bottom: 1px dashed rgba(26, 25, 34, 0.15);
}
/* Long breadcrumb trails must not blow the mobile viewport out - wrap
   instead of forcing a horizontal scroll. */
.cs-crumbs .container { overflow-wrap: anywhere; word-break: break-word; line-height: 1.4; }
.cs-crumbs a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.cs-crumbs a:hover { border-bottom-color: var(--ink); }
.cs-crumbs span { opacity: 0.55; margin: 0 4px; }
.cs-crumbs span[aria-current] {
  opacity: 1;
  color: var(--ink-soft);
  font-weight: 600;
  margin-left: 4px;
}

/* Hero already carries a top-padding to clear navbar; when crumbs sit above
   it, that padding becomes redundant. Trim it. */
.cs-crumbs + section .em-hero,
.cs-crumbs + .em-hub-hero,
.cs-crumbs + section.em-hub-hero,
.cs-crumbs + article .em-hero {
  padding-top: clamp(28px, 4vw, 60px);
}
.cs-crumbs + .em-hub-list .em-hub-hero,
.cs-crumbs + section.em-hub-hero.cs-hub-hero { padding-top: clamp(28px, 4vw, 60px); }

/* Article page: the em-hero pads calc(84px + clamp...) for navbar clearance.
   Once crumbs supply that clearance, shorten. */
.cs-crumbs ~ main .em-article .em-hero,
main > .cs-crumbs + article .em-hero { padding-top: clamp(24px, 4vw, 56px); }


@media (max-width: 480px) {
  /* Navbar wraps to two rows on phones (~118 px measured), so the crumbs
     need to sit well below that or they get hidden behind the nav. */
  .cs-crumbs { font-size: 0.78rem; padding-top: var(--nav-h-mobile); }
}

/* Mobile-only tap targets for the new links: crumbs and legal footer links
   are compact by design, but touch needs 44px. Bump only on phones. */
@media (max-width: 480px) {
  .cs-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px 0 0;
  }
  /* Wrapped 2-row navbar on phones ~118 px; clear it fully. */
  .cs-crumbs { padding-top: var(--nav-h-mobile); padding-bottom: 0; }
}

/* WTH navbar pill: same shape as EM/CS pills, purple/berry accent so all
   three series are visually distinct at a glance in the navbar. */
.em-navlink-wth { background: var(--purple); color: #fff; }

/* Inline glossary definitions used by the WTH series: "[term = X]".
   Renders as a subtle inset so a reader sees "quick aside definition,
   not the main sentence." The bold term reads like a mini-heading. */
.cs-bracket {
  display: inline-block;
  padding: 2px 10px;
  margin: 2px 0;
  background: var(--cream-2, #faf3e3);
  border-left: 3px solid var(--blue);
  border-radius: 4px;
  font-size: 0.94em;
  color: var(--ink);
  line-height: 1.5;
}
.cs-bracket b { font-weight: 700; color: var(--blue); }

/* Author asides opened by "Disclaimer:" / "Note:" / "Disclosure:".
   The goal is fine print: the reader's eye finds it once, registers the
   caveat, and moves on. So: subdued colour, small text, a warm-muted
   sidebar to mark it as ancillary, and only the label bolded so scanning
   still catches it. Never a headline - the article body carries the
   argument. */
.cs-disclaimer {
  display: block;
  margin: 1.4em 0;
  padding: 14px 18px;
  background: var(--cream-2, #f6ecd7);
  border-left: 3px dashed rgba(43, 30, 24, 0.35);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1em;               /* match body copy size */
  line-height: 1.6;
  color: rgba(43, 30, 24, 0.75); /* still muted vs full ink */
  text-wrap: pretty;
  max-width: 42rem;  /* same read-column cap as body copy */
}
.cs-disclaimer b {
  color: rgba(43, 30, 24, 0.9);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.92em;
  margin-right: 5px;
}

/* On phones (<= 540px) the wordmark + all three navlinks won't fit on one
   row without clipping. Wrap the navgroup onto a second row below the logo,
   full width, so nothing gets cut off. Keeps hand-written pages (404, about,
   privacy, terms) usable on mobile without needing a hamburger. */
@media (max-width: 540px) {
  .navbar .nav-inner {
    flex-wrap: wrap;
    row-gap: 6px;
    padding-block: 8px;
  }
  .navbar .em-navgroup {
    width: 100%;
    justify-content: flex-start;
    order: 2;
  }
  /* A two-row navbar costs real estate on a phone, so make the pills as
     compact as they can be while staying comfortably tappable. */
  .navbar .em-navlink {
    font-size: 0.64rem;
    padding: 5px 10px;
    min-height: 34px;
    box-shadow: 2px 2px 0 var(--ink);
  }
  /* Two-row navbar is ~118 px on mobile; ensure the crumbs strip clears it
     across the same range, not only <= 480 px. */
  .cs-crumbs { padding-top: var(--nav-h-mobile); }
}

/* Belt-and-braces: the reading spotlight is a pointer-driven effect. On any
   device without a fine pointer, force every paragraph to full contrast and
   no transform, regardless of what classes the script left on the element.
   Without this, a stray .is-reading leaves body copy dimmed. */
@media (hover: none), (pointer: coarse) {
  .cs-focus.is-reading .cs-para,
  .cs-focus.is-reading .em-beat { color: var(--ink); }
  .cs-focus.is-reading .cs-pull { color: var(--crimson); }
  .cs-focus .cs-para,
  .cs-focus .em-beat,
  .cs-focus .cs-pull { transform: none !important; }
  .cs-focus.is-reading .cs-para:not(.is-focus) .cs-fig,
  .cs-focus.is-reading .em-beat:not(.is-focus) .cs-fig { background: linear-gradient(180deg, transparent 54%, var(--gold) 54%, var(--gold) 92%, transparent 92%); }
}


/* Case-studies hub filter row on phones. .cs-filter is one flex line holding
   the search field, the "Sort" label and both sort buttons -- on a narrow
   screen the search box eats the row and SORT ends up wedged between the
   field and the buttons with no breathing room. Give the search its own
   full-width row so the label and the two buttons share a clean second row. */
/* ===========================================================
   READER IDEAS BOARD + "send an idea" box
   The board is curated by hand from content/reader-ideas.md.
   The box posts to /ideas-submit.php (moderated queue).
   =========================================================== */
.cs-ideas {
  background: var(--cream-2);
  border-top: 3px solid var(--ink);
  padding: clamp(40px, 6vw, 76px) 0 clamp(44px, 7vw, 84px);
}
.cs-ideas-h {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.02;
  text-transform: uppercase;
  margin: 10px 0 10px;
  text-wrap: balance;
}
.cs-ideas-lede {
  font-family: var(--font-body);
  font-size: 1rem;
  margin: 0 0 clamp(20px, 3vw, 30px);
  opacity: 0.85;
  max-width: 42rem;
}
.cs-ideas-empty {
  font-family: var(--font-body);
  font-size: 1rem;
  opacity: 0.7;
  margin: 0 0 26px;
}
.cs-idea-list {
  list-style: none;
  margin: 0 0 clamp(26px, 4vw, 40px);
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 46rem;
}
.cs-idea {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 13px 16px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
}
.cs-idea-mark { font-weight: 800; opacity: 0.45; }
.cs-idea.is-done .cs-idea-mark { color: var(--green); opacity: 1; }
.cs-idea-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cs-idea-text a:hover { color: var(--crimson); }
.cs-idea-by {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .cs-idea { grid-template-columns: auto 1fr; row-gap: 4px; }
  .cs-idea-by { grid-column: 2; }
}

/* ---- the send box ---- */
.cs-ideabox {
  border: 3px dashed var(--ink);
  border-radius: 16px;
  padding: clamp(18px, 3vw, 26px);
  background: var(--cream);
  max-width: 46rem;
  margin: clamp(30px, 5vw, 48px) 0 0;
}
.em-read > .cs-ideabox { max-width: 42rem; }
.cs-ideabox-h {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  text-transform: uppercase;
  margin: 0 0 14px;
  line-height: 1.05;
}
.cs-ideaform { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-ideainput {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 46px;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
}
.cs-ideainput::placeholder { color: var(--ink); opacity: 0.45; font-weight: 500; }
.cs-ideaname {
  flex: 1 1 150px;
  min-width: 0;
  min-height: 46px;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
}
.cs-ideaname::placeholder { color: var(--ink); opacity: 0.45; font-weight: 500; }
/* Honeypot: off-screen rather than display:none, because some bots skip
   fields that are not rendered at all. Never shown to a real reader. */
.cs-ideatrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cs-ideastatus {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 10px 0 0;
  min-height: 1.2em;
}
.cs-ideastatus.is-ok  { color: var(--green); }
.cs-ideastatus.is-bad { color: var(--crimson); }
.cs-ideabtn {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 10px 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.cs-ideabtn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.cs-ideabtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.cs-ideabox-note {
  font-family: var(--font-body);
  font-size: 0.86rem;
  opacity: 0.7;
  margin: 12px 0 0;
}
.cs-ideabox-note a { color: var(--crimson); }

@media (max-width: 560px) {
  .cs-filter {
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 8px;
  }
  .cs-search-wrap {
    flex: 1 1 100%;
    max-width: none;
  }
  .cs-filter-label {
    margin-right: 4px;
    opacity: 0.75;
  }
}

/* Link back to the full board from the /idea/ landing page. */
.cs-idea-backlink { font-family: var(--font-body); font-weight: 700; margin: 22px 0 0; }
.cs-idea-backlink a { color: var(--crimson); }

/* "Suggest the next one" sits in the drenched hub hero, so it takes the
   hero's light text rather than the page link colour, with an underline
   so it still reads as a link against a busy background. */
.cs-hub-suggest {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  white-space: nowrap;
}
.cs-hub-suggest:hover { color: var(--gold); }

/* Small print under the idea form: what happens to a submission, and the
   reCAPTCHA notice Google requires when the badge is hidden. Quiet enough
   not to compete with the form, readable enough to actually be read. */
.cs-ideadisc {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(26, 25, 34, 0.62);
  margin: 14px 0 0;
  max-width: 44rem;
}
.cs-ideadisc a { color: rgba(122, 22, 34, 0.85); text-underline-offset: 2px; }

/* Self-hosted CAPTCHA row inside the idea form. Full width so it sits on its
   own line under the inputs, and quiet enough to read as a formality. */
.cs-captcha { flex: 1 1 100%; margin: 2px 0 0; }
.cs-captcha-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(26, 25, 34, 0.78);
}
.cs-captcha-sum { font-weight: 800; color: var(--ink); }
.cs-captcha-input {
  width: 84px;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  text-align: center;
}

/* On a phone the count and the suggest link cannot share a line, and the
   middot separator wrapped down on its own -- reading as a stray bullet
   above the link. Drop the separator and give the link its own line. */
@media (max-width: 560px) {
  .cs-hub-sep { display: none; }
  .cs-hub-suggest { display: inline-block; margin-top: 8px; }
}

/* Standalone link under the idea form: needs a real touch target. */
@media (hover: none), (pointer: coarse) {
  .cs-idea-backlink a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ===========================================================
   CASE STUDY TOPICS
   Topic buttons on the hub and topic pages, and the topic link
   under each case study title.
   =========================================================== */
.cs-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}
.cs-topic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--cream-2);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
              background 0.16s var(--ease), color 0.16s var(--ease);
}
.cs-topic:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.cs-topic.is-on {
  background: var(--ink);
  color: var(--cream);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.cs-topic-n {
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.65;
}
.cs-topic-title { font-size: clamp(2.6rem, 8vw, 5.5rem); }
.cs-meta-sep { margin: 0 0.35em 0 0.6em; }
/* Date, read time and topic each stay whole; the line wraps between them. */
.cs-meta time, .cs-topic-link { white-space: nowrap; }
.cs-topic-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.cs-topic-link:hover { opacity: 1; text-decoration-thickness: 3px; }
/* Phones: one swipeable row instead of three wrapped rows of buttons. The row
   bleeds to the screen edges so the cut-off last button hints "swipe". */
@media (max-width: 560px) {
  .cs-topics {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    margin-inline: -20px;
    padding: 2px 20px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cs-topics::-webkit-scrollbar { display: none; }
  .cs-topic { flex: none; padding: 8px 14px; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-topic { transition: none; }
}

/* ===========================================================
   START HERE (/start/)
   A numbered reading list: the order is a recommendation, so the
   numbers carry meaning. Rows, not cards: number, poster, text.
   =========================================================== */
.start-list { display: flex; flex-direction: column; gap: 14px; max-width: 54rem; }
.start-link {
  display: grid;
  grid-template-columns: auto 104px minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2.5vw, 26px);
  padding: 14px clamp(14px, 2.5vw, 22px);
  background: var(--cream-2);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.start-link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.start-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--crimson);
  min-width: 2ch;
}
.start-img {
  width: 104px; height: 104px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  object-fit: cover;
}
.start-img-cs  { background: var(--coral); }
.start-img-em  { background: var(--gold); }
.start-img-wth { background: var(--purple); }
.start-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.start-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.start-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.08;
  text-wrap: balance;
}
.start-more { margin: 32px 0 0; font-size: 1.02rem; max-width: 54rem; }
.start-more a { color: var(--crimson); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .start-link { grid-template-columns: 76px minmax(0, 1fr); padding: 12px; }
  .start-num { display: none; }
  .start-img { width: 76px; height: 76px; }
  .start-title { font-size: 1.25rem; }
  .start-label { letter-spacing: 0.06em; font-size: 0.7rem; }
  .start-mins { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .start-link { transition: none; }
}

/* ===========================================================
   SOURCES & NOTES
   Under the signature on any post with a "Sources:" paragraph.
   Quiet, like the disclaimer: there to check, not to read.
   =========================================================== */
.cs-sources {
  margin: 1.6em 0 0;
  padding: 16px 20px 18px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--cream-2);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}
.cs-sources-h {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cs-sources-list { margin: 0; padding-left: 1.15em; list-style: disc; }
.cs-sources-list li::marker { color: var(--crimson); }
.cs-sources-list li + li { margin-top: 3px; }
.cs-sources-list a { color: var(--crimson); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.cs-sources-list a:hover { color: var(--ink); }
.cs-sources-note { margin: 10px 0 0; }
.cs-sources + .em-correct { margin-top: 1em; }

/* ---------- navbar search button: icon only; opens the header search (style.css) ---------- */
.em-navlink-search { background: var(--cream-2); padding-inline: 11px; cursor: pointer; line-height: 1; }
.em-navlink-search svg { display: block; }
@media (max-width: 560px) {
  .em-navlink-search { padding-inline: 8px; }
  .em-navlink-search svg { width: 15px; height: 15px; }
}