/* ============================================================================
   SCIENCE TO BUSINESS (`disc`) — design system
   "Ember & Ink". Deliberately distinct from AADHYA'S QUEST (`industry`), which
   owns leaf-green #3f8f3a on green-cream with Bangers/Baloo 2/Nunito/Patrick
   Hand/Comic Neue. None of those colours or faces appear here.
   Light theme only (rules_comics_common §9 — never dark themes).
   ========================================================================= */

:root{
  /* --- surfaces --------------------------------------------------------- */
  --paper:      #fcf9f4;   /* warm ivory page — NOT industry's green-cream */
  --card:       #ffffff;
  --line:       #e6e0d6;   /* warm hairline */
  --line-soft:  #f0ebe3;

  /* --- text ------------------------------------------------------------- */
  --ink:        #16233f;   /* deep indigo — NOT industry's slate #1d2b36 */
  --ink-soft:   #5a6785;
  --ink-faint:  #8d97ac;

  /* --- brand accents ---------------------------------------------------- */
  --ember:      #d1651f;   /* primary. the Visitor's coat, the flame, the chain */
  --ember-deep: #a24b16;   /* use for TEXT on ember-soft — passes contrast */
  --ember-soft: #fdf1e4;
  --steel:      #2b6188;   /* secondary. diagrams, timelines, systems maps */
  --steel-soft: #eaf1f7;
  --copper:     #9c4a2c;   /* tertiary. moats, industry, metal */
  --copper-soft:#fbeee7;

  /* --- speech (rules_comics_common §13 — kid pink L, adult blue R) ------- */
  --bub-kid-bg:     #fff2f6;
  --bub-kid-edge:   #b04a72;
  --bub-adult-bg:   #eef4fb;
  --bub-adult-edge: #2b6188;

  /* --- type ------------------------------------------------------------- */
  --f-display: 'Fraunces', Georgia, serif;        /* titles, covers, part cards */
  --f-read:    'Source Serif 4', Georgia, serif;  /* narration, long reading    */
  --f-voice:   'Lexend', system-ui, sans-serif;   /* dialogue, UI — high legibility */
  --f-fact:    'IBM Plex Sans', system-ui, sans-serif; /* WOW/TL/MOAT/diagrams  */
  --f-hand:    'Caveat', cursive;                 /* Shreya's notebook          */

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
  --shadow: 0 1px 2px rgba(22,35,63,.06), 0 8px 24px rgba(22,35,63,.05);
}

/* Font loading (house practice — same CDN pattern as the other series):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?
     family=Fraunces:opsz,wght@9..144,600;9..144,800
     &family=Source+Serif+4:opsz,wght@8..60,400;8..60,600
     &family=Lexend:wght@400;500;600;700
     &family=IBM+Plex+Sans:wght@500;600;700
     &family=Caveat:wght@500;600
     &display=swap">                                                          */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-voice);
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---------------------------------------------------------------- headings */
h1,h2,h3{font-family:var(--f-display); font-weight:800; letter-spacing:-.015em; line-height:1.15; margin:0 0 .4em}
h1{font-size:clamp(30px,5vw,46px)}
h2{font-size:clamp(22px,3.4vw,30px)}
h3{font-size:clamp(17px,2.2vw,21px)}
.eyebrow{
  font-family:var(--f-fact); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ember-deep);
}

/* -------------------------------------------------------- reading passages */
.read{font-family:var(--f-read); font-size:18px; line-height:1.72; color:var(--ink)}
.read p{margin:0 0 1em; max-width:68ch}

/* =========================================================================
   COMIC PAGE FURNITURE
   ====================================================================== */

/* Narration — top-left plate, past tense (rules §13). Serif, quiet, never a bubble. */
.narr{
  position:absolute; top:14px; left:14px; max-width:46%;
  background:rgba(252,249,244,.945); border-left:4px solid var(--ember);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:10px 14px; box-shadow:var(--shadow);
  font-family:var(--f-read); font-size:15.5px; line-height:1.5; color:var(--ink);
}

/* Speech — kid pink bottom-LEFT, adult blue bottom-RIGHT (rules §13). */
.bub{
  position:absolute; max-width:56%; padding:11px 15px;
  border-radius:var(--r-lg); border:2px solid; box-shadow:var(--shadow);
  font-family:var(--f-voice); font-size:16px; font-weight:500; line-height:1.45;
}
.bub.kid  {left:16px;  bottom:16px; background:var(--bub-kid-bg);   border-color:var(--bub-kid-edge);   color:#4a1b30}
.bub.adult{right:16px; bottom:16px; background:var(--bub-adult-bg); border-color:var(--bub-adult-edge); color:#123049}
.bub .who{display:block; font-family:var(--f-fact); font-size:11px; font-weight:700;
          letter-spacing:.11em; text-transform:uppercase; opacity:.72; margin-bottom:2px}
/* Caption-quoted speech gets accent italic (rules §13 `_say()`). */
.say{font-style:italic; color:var(--ember-deep)}

/* Fact plates. Facts live ONLY here — never in a bubble (rules §14). */
.wow,.tl,.moat,.diag{
  font-family:var(--f-fact); font-size:15px; line-height:1.55;
  border-radius:var(--r-md); padding:13px 16px; box-shadow:var(--shadow);
  border:1px solid; border-left-width:5px;
}
.wow  {background:var(--ember-soft);  border-color:#f0d9c1; border-left-color:var(--ember);  color:#4a2a12}
.tl   {background:var(--steel-soft);  border-color:#cfdfec; border-left-color:var(--steel);  color:#12324a}
.moat {background:var(--copper-soft); border-color:#eed7cc; border-left-color:var(--copper); color:#4a2015}
.diag {background:var(--card);        border-color:var(--line); border-left-color:var(--ink); color:var(--ink)}
.wow b,.tl b,.moat b,.diag b{font-weight:700}
.wow .tag,.tl .tag,.moat .tag{
  display:block; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; opacity:.75; margin-bottom:4px;
}

/* Shreya's notebook — must read as a teenager writing for herself (bible §5). */
.note{
  font-family:var(--f-hand); font-size:23px; line-height:1.5; color:#2c3550;
  background:
    repeating-linear-gradient(to bottom, transparent 0 33px, #e8e0cf 33px 34px),
    #fffaef;
  border:1px solid #eadfc7; border-radius:var(--r-md);
  padding:16px 18px 14px; box-shadow:var(--shadow);
  transform:rotate(-.5deg);
}
.note p{margin:0 0 2px}

/* The Invisible Chain — the series' visual signature (bible §13/§22). */
.chain{display:flex; flex-wrap:wrap; align-items:center; gap:7px 5px}
.chain b{
  font-family:var(--f-fact); font-size:14px; font-weight:600;
  background:var(--ember-soft); color:var(--ember-deep);
  border:1px solid #f0d9c1; padding:5px 11px; border-radius:999px;
}
.chain b.sys{background:var(--steel-soft); color:#12324a; border-color:#cfdfec}
.chain i{font-style:normal; color:var(--ink-faint); padding:0 1px}

/* =========================================================================
   MOBILE — legibility is a blocking gate (rules §5)
   ====================================================================== */
@media (max-width:520px){
  body{font-size:16px}
  .bub{max-width:48%; font-size:14.5px; padding:9px 12px}   /* rules §5 exact value */
  .narr{max-width:60%; font-size:14px; padding:8px 11px}
  .wow,.tl,.moat,.diag{font-size:14px; padding:11px 13px}
  .note{font-size:21px}
}

/* Wide content must scroll inside itself, never the page body. */
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}