/* ============================================================
   headlines-serif.css
   Serif headline system for the case studies.
   Ported from the Portfolio v2 design (case-study-emotional-design-v2.html).

   THE SYSTEM
     h1  hero ............ Newsreader 350, pink #ff75c1 italic accent
     h2  sections ........ Newsreader 300, 44px / 28px mobile, -1% tracking
     h3  inner titles .... Newsreader 300, 32px / 24px mobile, ink (was purple)
         intros .......... Plus Jakarta Sans 300, 22px
         stat numerals ... Newsreader 300, each page keeps its own size
         footer .......... Newsreader 300, 40px / 28px mobile

   HOW TO REVERT A PAGE
     1. Delete the <link> to this file (sits just after the page's
        last </style>, marked with a HEADLINE SYSTEM comment).
     2. Un-comment the two original font <link> lines in that page's <head>.
     Any leftover hook classes (try-stat-num, try-footer-h, try-shekel)
     are inert without this file, so nothing else needs undoing.

   WHY IT LOADS AFTER THE INLINE <style>
     These pages keep their CSS in <style> blocks in the body, so this file
     must come after the last one to win the cascade. Moving it into <head>
     will silently stop it working.

   NOT INCLUDED ON PURPOSE
     App-lockup headings on Process Efficiency ("Household finance app",
     "Personal task manager") stay sans - they label a lockup, not a section.
   ============================================================ */

/* --- h1: hero. Already serif on every page; this only sets the weight.
       350 sits between the v2 Light 300 and the original 400. --- */
.cs-hero-fold-d h1,
.cs-hero-fold-m h1 { font-weight: 350 !important; }
.cs-hero-fold-d h1 em,
.cs-hero-fold-m h1 em { font-weight: 350 !important; }

/* --- h2: section headlines (were Plus Jakarta Sans Light 40) --- */
h2.font-display {
  font-family: 'Newsreader', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 44px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}
h2.font-display em { font-style: italic; font-weight: 300; color: #ff75c1; }
@media (max-width: 767px) {
  h2.font-display { font-size: 28px !important; }
}

/* --- h3: inner section titles. Present on Emotional Design,
       Feature Ideation and Process Efficiency; absent on Competitor Research. --- */
.de2-title {
  font-family: 'Newsreader', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #292b30 !important;
}
@media (max-width: 767px) {
  .de2-title { font-size: 24px !important; }
}

/* --- intro paragraph under each inner title --- */
.de2-intro { font-weight: 300 !important; }

/* --- white highlight behind the inner heading and its intro.
       The text is wrapped in <span class="hl"> in the markup so the paragraph
       keeps its 60ch measure - making the element itself inline would let it
       run the full column width and rebreak the lines.
       box-decoration-break:clone gives every wrapped line its own bar. --- */
.de2-title .hl,
.de2-intro .hl {
  background: #ffffff;
  margin-left: -14px;              /* keeps the text's left edge where it was */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Vertical padding is tuned per level so consecutive line bars TOUCH and a
   wrapped paragraph reads as one continuous block with no dividers between
   rows. The values come from each level's leading; a hair of overlap keeps
   antialiasing from showing a seam. Change the line-height and these need
   re-measuring. */
.de2-title .hl { padding: 6.5px 14px; }
.de2-intro .hl { padding: 5.5px 14px; }
.de2-title { line-height: 1.6 !important; }
.de2-intro { line-height: 1.75 !important; }

/* --- stat numerals. Font only, never size, so the impact cards keep their
       original geometry.
       Newsreader's vertical metrics sit the digits ~7px higher in the line
       box than Plus Jakarta Sans did, which lifted every numeral off its
       label's baseline (measured: the same ~7px on all four pages, including
       Competitor Research). position:relative puts them back without
       affecting layout. Desktop only - the cards stack on mobile, so there
       is no side-by-side baseline to match. --- */
.try-stat-num {
  font-family: 'Newsreader', Georgia, serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
}
@media (min-width: 768px) {
  /* Newsreader sits digits ~6.8px higher in the line box than Plus Jakarta
     Sans did, lifting every numeral off its label's baseline. This puts them
     back. NOTE: align-self/flex tricks do nothing here - the numeral is the
     tallest item in its row, so it has no room to move. A relative offset is
     the only thing that shifts it, and it does not affect layout. */
  .try-stat-num { position: relative; top: 15.85px; }
  /* Competitor Research's numeral is the one built with leading-none
     (line-height 1 instead of 1.24), so its baseline lands differently and
     needs its own offset. The class scopes this rule to that card only. */
  .try-stat-num.leading-none { top: -1.54px; }
}

/* --- shekel (Process Efficiency only, inert elsewhere).
       Newsreader has no U+20AA, so the glyph fell back to a heavy system
       font. Heebo is a Hebrew family with a real Thin (100) weight.
       line-height:0 stops the enlarged glyph inflating the line box, which
       would push this stat's label out of line with the one beside it. --- */
.try-shekel {
  font-family: 'Heebo', 'Times New Roman', serif;
  font-weight: 100;
  font-size: 1.3em;
  line-height: 0;
}
/* The hero uses the same shekel but its figure is Plus Jakarta Sans SemiBold,
   while the impact card's is Newsreader Light. A Thin shekel matches the card
   and reads as a hollow box beside the hero's bold digits, so the hero gets a
   weight of its own. */
.cs-hero-fold-d .try-shekel {
  font-weight: 600;
  font-size: 1.05em;
  margin-left: 2px;
}

/* --- footer heading --- */
.try-footer-h {
  font-family: 'Newsreader', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 40px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}
@media (max-width: 767px) {
  .try-footer-h { font-size: 28px !important; }
}