/* ============================================================================
   vespa-scaling-reader: the reading modes of "Scaling Smarter: Vespa's
   Approach to High-Performance Data Management". doc.css is the shared design
   system and is byte-identical across every reader. Everything this document
   needs that the others do not is here. Two modes are new to the factory:
   callout and pair.
   ========================================================================= */

:root{
  --split-gap:clamp(1.75rem,4vw,4.5rem);
  /* EQUAL INSETS (Omar checks padding by eye). Every framed box on this page
     takes ONE of these two tokens on all four sides, never a pair: --pp for
     the large frames (the product box, the plate), --tp for the tiles (the
     glossary terms, the callouts, the cards, the audience tiles).
     scaling-check's `insets` row measures all four on every [data-inset]. */
  --pp:clamp(1.25rem,1rem + 1.4vw,2.25rem);
  --tp:clamp(1.1rem,.95rem + .7vw,1.6rem);
}

/* A long URL never pushes a phone wide. */
.prose p,.sc-term p,.sc-card p,.sc-pair__i p,.close__about,.close__note{overflow-wrap:break-word}
p,li,figcaption{text-wrap:pretty}
/* A glossary entry or a callout opened by a link from Figure 2 lands clear of
   the fixed rail, as every act does (doc.css's scroll-padding-top). */
.sc-term,.sc-note{scroll-margin-top:6rem}

.figcap{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.03em;line-height:1.5;
  color:var(--on-ground-soft);max-width:48rem;
}

/* LINKS ON A LIGHT GROUND ARE INK, NOT THE LINK BLUE (#4A86E8 is 3.58:1 on
   white). Ink keeps doc.css's underline. Sage is doc.css's own rule; on ink
   the links are doc.css green. */
.act--paper .prose a,.act--mist .prose a,.act--paper .link,.act--mist .link{color:var(--ink)}

/* ============================== the diagrams ============================== */
/* Two layouts each. Wide from 48rem (the act is at least 691px wide there, so
   a 16-unit label is 11.06px at the least), tall below (15 units of 360). */
.dfig{display:flex;flex-direction:column;gap:calc(var(--u)*1.5);min-width:0}
.dfig__art svg{width:100%;height:auto}
.dg{border-radius:14px}
.dg--tall{display:none}
@media (max-width:47.99rem){
  .dg--wide{display:none}
  .dg--tall{display:block;max-width:28rem;margin-inline:auto}
}
@media (max-width:47.99rem) and (orientation:landscape) and (max-height:30rem){
  .dg--tall{max-width:22rem}
}
/* Clear space round every drawing, the same on every figure. */
.sc-fig{margin-block:calc(var(--u)*2)}
/* Figure 2's links: a hand over a box says it opens something. */
.dg a{cursor:pointer}
.dg a:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px}

/* ============================== 0 the cover =============================== */
.sc-cover{justify-content:space-between;gap:calc(var(--u) * 3)}
.sc-cover__mast{max-width:var(--max)}
.sc-cover__h1{color:var(--paper);max-width:22ch}
.sc-h1__lead{display:block}
.sc-h1__rest{display:block;font-size:var(--t-h2);line-height:1.14;letter-spacing:-.015em;margin-top:.35em;color:var(--paper-72);max-width:26ch}
/* Page 2's identity block on the cover: the brand's own name over its blurb.
   2026-10-29, the date is off the cover (Omar: "remove the 2025 in the hero
   section and adjust spacing"). The title to the VESPA.AI label is now one
   step: the cover's band gap plus 2u of its own, so the blurb reads as a new
   block and not as the title's next line (with the band gap alone it sat
   33 to 35px under the subtitle on a phone, the same as the rule above the
   title). The cover still shares out what height is left. */
.sc-brand{display:flex;flex-direction:column;gap:calc(var(--u) * 1);max-width:var(--max);margin-top:calc(var(--u) * 2)}
.sc-brand__name{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.sc-brand__p{font-size:var(--t-small);line-height:1.55;color:var(--paper-72);max-width:var(--measure)}
/* "High-Performance" never breaks at its own hyphen (a span inside the h1). */
.sc-nowrap{white-space:nowrap}
/* On a phone "to" stays with "High-Performance", so no line of the H1 is one
   word (fix round, scaling-check `headings` on phones). */
@media (max-width:47.99rem){.sc-ph-nowrap{white-space:nowrap}}
/* FIX ROUND 1: A SHORT DESK SEES THE WHOLE COVER. At 1200x630 (the share
   card's own size) the brand blurb ran 52px under the first screen and the
   card cut it mid-sentence; 1280x720 cleared it by 17px. Below 760px of
   height the cover's air and its two display sizes follow the screen's
   height, so title and blurb sit on the first screen (scaling-check
   `cover`). */
@media (min-width:48rem) and (max-height:47.5rem) and (orientation:landscape) and (min-height:30.01rem){
  .sc-cover{padding-block:calc(2.5rem + 2vh);gap:calc(var(--u) * 2)}
  .sc-cover__mast{gap:calc(var(--u) * 2)}
  .sc-cover__h1{font-size:min(var(--t-display), 11vh)}
  .sc-h1__rest{font-size:min(var(--t-h2), 6vh)}
}
@media (orientation:landscape) and (max-height:30rem){
  .sc-cover{padding-top:calc(3.4rem + var(--u));padding-bottom:calc(var(--u) * 2);gap:1.25rem}
  .sc-cover .wordmark{height:1.5rem}
  .sc-cover__mast{gap:1rem}
  .sc-cover__h1{font-size:2.1rem;max-width:none}
  .sc-h1__rest{font-size:1.35rem;margin-top:.25em;max-width:none}
  /* fix round 1: the blurb ended 12px under a turned iPhone's first screen */
  .sc-brand{gap:.35rem}
  .sc-brand__p{font-size:.95rem;line-height:1.45;max-width:none}
}

/* ============================== 1 brief =================================== */
/* The paper's product box, beside the Introduction as page 3 sets it. */
.sc-lede{
  background:var(--mist);border-left:4px solid var(--green);border-radius:0 12px 12px 0;
  padding:var(--pp);display:flex;flex-direction:column;gap:calc(var(--u) * 1.5);
}
.sc-lede__h{font-family:var(--sans-display);font-size:var(--t-deck);line-height:1.25;font-weight:500;letter-spacing:-.008em}
.sc-lede__p p{font-size:var(--t-small);line-height:1.6}

/* ============================== 2 glossary ================================ */
/* Twelve terms in the paper's four groups, two columns on a desk as page 4
   sets them (groups one and two left, three and four right). Each term is a
   tile, its bold label set larger IN PLACE inside the one paragraph. */
.sc-gl{display:grid;gap:calc(var(--u) * 4) var(--split-gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:64rem){.sc-gl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc-gl__g{display:flex;flex-direction:column;gap:calc(var(--u) * 1.5)}
.sc-gl__h{font-family:var(--sans-display);font-size:var(--t-deck);line-height:1.25;font-weight:500}
.sc-gl__list{display:flex;flex-direction:column;gap:var(--gap)}
.sc-term{background:var(--paper);border-radius:12px;border-top:3px solid var(--green);padding:var(--tp)}
.sc-term p{font-size:var(--t-small);line-height:1.55}
.sc-term strong{display:block;font-family:var(--sans-display);font-size:var(--t-body);font-weight:500;line-height:1.3;margin-bottom:.35em}

/* ============================== 3 callout ================================= */
/* NEW MODE. Page 5's drawing, with the two callouts page 5 alone carries set
   beside it on a desk (under the head, left of the drawing, which starts on
   the page's spine) and under it on a phone. One grid, the spine's own
   columns and gap. */
.sc-co{display:grid;gap:calc(var(--u) * 4) var(--split-gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:64rem){
  /* Fix round 1: the head takes the act's full width above the drawing. In
     the 5fr column "Processing" stood alone on its line; it sits beside no
     text, so it is not a sticky head and needs no column of its own. */
  .sc-co{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr;align-items:start}
  .sc-co__head{grid-column:1 / -1;grid-row:1}
  .sc-co__fig{grid-column:2;grid-row:2 / span 2}
  .sc-co__notes{grid-column:1;grid-row:2}
}
.sc-co__fig .sc-fig{margin-block:0}
/* one column between 48 and 64rem: the 640-unit drawing held to a reading width */
@media (min-width:48rem) and (max-width:63.99rem){.sc-co__fig .dg--proc{max-width:36rem;margin-inline:auto}}
.sc-co__notes{gap:var(--gap)}
.sc-note{background:var(--paper);border-radius:0 12px 12px 0;border-left:4px solid var(--green);padding:var(--tp)}
.sc-note p{font-size:var(--t-small);line-height:1.55}

/* ============================== 5 sequence ================================ */
/* Numbered by a counter: the paper does not number its four parts, so the
   numerals are the page's, generated, never typed into the markup. */
.parts{counter-reset:part;display:flex;flex-direction:column}
.part{counter-increment:part;border-top:1px solid var(--hair);padding-top:calc(var(--u)*4);margin-top:calc(var(--u)*4)}
/* Fix round 2: no gap of its own. The Elasticsearch reader's 1.25u here was the
   one stack gap on the page off the shared 2u (align.mjs `stack gap`, 17px
   against 27.2px everywhere else). */
.part__head::before{
  content:counter(part,decimal-leading-zero);
  font-family:var(--sans-display);font-weight:500;font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:.9;letter-spacing:-.03em;color:var(--green-ink);
}
/* A grid item stretches to its row and then has no room to stick: aligned to
   its row's start it sticks while its part's text scrolls (the discovery
   reader's fix). */
@media (min-width:64rem){.part__head{align-self:start}}
.pillar__title{font-size:var(--t-section);line-height:1.2;margin-top:0}
.part > .sc-fig{margin-top:calc(var(--u)*4)}

/* ============================== 6 list ==================================== */
.sc-lead{font-weight:500}
.register{display:flex;flex-direction:column}
.register li{border-top:1px solid var(--hair);padding:calc(var(--u)*2) 0}
.register li:last-child{border-bottom:1px solid var(--hair)}
.sc-reg strong{font-weight:600}

/* ============================== 7 turn ==================================== */
/* The five challenges, one card each, one under the other, each as tall as
   its own text. FIX ROUND 1: a grid of three then two stretched every card to
   its row, so the short ones carried up to 298px of empty paper under their
   text at 1440 (scaling-check `insets`). On a desk each card divides on the
   page's own ratio: the challenge's bold label in the left column, its text
   in the right. The label stays bold IN PLACE inside its paragraph: the
   paragraph is a subgrid row, the <strong> its first cell and the text after
   it the anonymous second, so no string is split. The fixed side is the
   paper's neutral grey along the top, never red. */
.sc-cards{display:flex;flex-direction:column;gap:var(--gap)}
.sc-card{background:var(--paper);border-radius:12px;border-top:3px solid var(--sage);padding:var(--tp);display:flex;flex-direction:column;gap:.8em}
.sc-card p{font-size:var(--t-small);line-height:1.55}
.sc-card strong{display:block;font-family:var(--sans-display);font-size:var(--t-body);font-weight:500;line-height:1.3;margin-bottom:.4em}
@media (min-width:64rem){
  .sc-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--split-gap);row-gap:.8em}
  .sc-card p{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:baseline}
  .sc-card p > strong{grid-column:1;margin-bottom:0}
  .sc-card p + p{display:block;grid-column:2}
}
/* The turn: the paper's answer on the ink plate, ONE padding on four sides
   (doc.css's .plate pads two values, a pair Omar's eye would catch). */
.sc-plate{padding:var(--pp)}
/* The plate's head and its three paragraphs on the page's own ratio, so the
   text fills the plate to its padding on all four sides (a capped column left
   a band of empty ink on the right) and the prose keeps a reading measure. */
@media (min-width:64rem){
  .sc-turn{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--split-gap);align-items:start}
}
.sc-turn__h{color:var(--paper)}
.sc-turn__p p{color:var(--paper-72)}

/* ============================== 8 pair ==================================== */
/* NEW MODE. The claim, then the same claim for two readers side by side, each
   tile opening on its own audience in the paper's words (set larger IN
   PLACE, a span inside the one paragraph), then the line that joins them. */
.sc-pair{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:52rem){.sc-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc-pair__i{background:var(--green-12);border-top:3px solid var(--green);border-radius:12px;padding:var(--tp)}
.sc-pair__i p{font-size:var(--t-body);line-height:1.6}
.sc-pair__who{display:block;font-family:var(--sans-display);font-size:var(--t-deck);line-height:1.2;letter-spacing:-.008em;margin-bottom:.45em}
.sc-last{font-family:var(--sans-display);font-size:var(--t-deck);line-height:1.35;letter-spacing:-.008em}

/* ============================== 9 close =================================== */
.close__about{font-size:var(--t-small);line-height:1.6;color:var(--paper-72);max-width:var(--measure)}
.close__invite{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.04em;line-height:1.5;color:var(--paper-72);max-width:var(--measure)}
.close__note{font-size:var(--t-small);line-height:1.55;color:var(--paper-72);max-width:var(--measure)}
.close__mark{height:3rem;width:3rem;align-self:flex-start}
.close__dl{display:flex;flex-direction:column;gap:calc(var(--u)*1.75);border-top:1px solid var(--hair);padding-top:calc(var(--u)*2)}
.close__dl dt{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-72)}
.close__dl dd{margin:.3em 0 0;color:var(--paper)}

/* ============================ the type floor, last ======================== */
/* The shared --t-micro is 10.56px at its floor. Lifted here, last, so every
   rule above that sets these runs to it loses. doc.css stays byte-identical. */
.cover__foot,.colophon,.close__dl dt{font-size:max(.6875rem, var(--t-micro))}
.figcap{font-size:max(.75rem, var(--t-micro))}
/* Act titles. Fix round 1: this paper's titles run to six words ("Overcoming
   Limitations of Traditional Systems", "Data Ingestion: Real-Time and
   Scalable"), and at the series' 3.06rem in the 5fr head column they broke
   into lone words at every desk width (scaling-check `headings`, 13 found).
   One step down the scale, held at 2.5rem, a size the head column can set
   them in without a word alone. */
.act .title{font-size:min(var(--t-title), 2.5rem, 3.2vw)}
/* on one column (below 64rem) the title has the act's whole width. Fix round
   (the verifier): at 360 "Processing" stood alone on act 3's first line at the
   2rem floor, so on phones the size follows the screen's width (8.2vw, 29.5px
   at 360, 32px at 390) and "Processing Incoming Data" sets on one line.
   scaling-check `headings` now holds phones too. */
@media (max-width:63.99rem){.act .title{font-size:min(var(--t-title), 2.5rem, 8.2vw)}}