/* ==========================================================================
   Surf The AI Wave — e-book reader
   Design system + page layouts.

   Light, warm and bright throughout, drawn from the cover art: deep navy ink,
   bright brand blue, ocean aqua, gold-hour accents on warm paper. No dark mode
   by design — the book is meant to feel like sunlight on water.

   Type inside a page is sized in `cqi` (container inline units) so that every
   page renders at the same proportions no matter what pixel size StPageFlip
   stretches the book to.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* ink */
  --ink:        #0B2B4C;
  --ink-soft:   #2C4F73;
  --ink-mute:   #6C89A7;
  --ink-faint:  #9DB3C7;

  /* ocean */
  --blue:       #1B86E8;
  --blue-deep:  #0E62B3;
  --blue-dark:  #0A4A8A;
  --aqua:       #56C7E8;
  --foam:       #D9F0F7;
  --seafoam:    #A8E3E0;

  /* sun */
  --gold:       #F0B429;
  --gold-soft:  #FCE9BC;
  --sun:        #FF9F5A;

  /* paper + surfaces */
  --paper:      #FFFDF8;
  --paper-warm: #FDF6EA;
  --sky:        #EDF7FF;
  --sky-deep:   #DCEEFC;

  --rule:       rgba(11, 43, 76, .12);
  --rule-soft:  rgba(11, 43, 76, .07);

  --shadow-sm:  0 1px 3px rgba(11, 43, 76, .10), 0 4px 12px rgba(11, 43, 76, .06);
  --shadow-md:  0 4px 12px rgba(11, 43, 76, .12), 0 16px 40px rgba(11, 43, 76, .10);
  --shadow-lg:  0 10px 30px rgba(11, 43, 76, .16), 0 40px 90px rgba(11, 43, 76, .16);

  --font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --font-ui:      'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-script:  'Caveat', 'Segoe Script', cursive;
  --font-display: 'Permanent Marker', 'Montserrat', sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------------- app shell  */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--sky);
  background-image:
    radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, var(--sky) 42%, var(--sky-deep) 100%),
    linear-gradient(180deg, transparent 60%, rgba(86, 199, 232, .16) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body.is-scrollmode { overflow: auto; }

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

body.is-scrollmode .app { height: auto; min-height: 100dvh; }

/* sunlit water at the foot of the stage */
.app::after {
  content: '';
  position: fixed;
  inset: auto 0 0 0;
  height: 34vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(70% 100% at 50% 120%, rgba(27, 134, 232, .20), transparent 70%),
    radial-gradient(40% 80% at 80% 120%, rgba(240, 180, 41, .16), transparent 70%);
}

/* ------------------------------------------------------------------ topbar */
.topbar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(12px, 3vw, 28px);
  background: rgba(255, 253, 248, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--rule-soft);
  flex: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--blue) 0%, var(--blue-deep) 60%, var(--blue-dark) 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(14, 98, 179, .35);
}

.brand__mark svg { width: 21px; height: 21px; fill: #fff; }

.brand__text { min-width: 0; }

.brand__title {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .01em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__title em { font-style: normal; color: var(--blue); }

.brand__by {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-top: 2px;
}

.topbar__spacer { flex: 1 1 auto; }

.tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* ------------------------------------------------------------------ buttons */
.btn {
  appearance: none;
  text-decoration: none;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

.btn--icon { padding: 9px; border-radius: 50%; }
.btn--icon svg { width: 17px; height: 17px; }

.btn--primary {
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(14, 98, 179, .34);
}
.btn--primary:hover { box-shadow: 0 8px 22px rgba(14, 98, 179, .40); }

.btn[aria-pressed='true'] {
  background: var(--sky-deep);
  border-color: rgba(27, 134, 232, .4);
  color: var(--blue-deep);
}

.btn:focus-visible,
.toc__link:focus-visible,
.scrub:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.btn__label { display: inline; }

/* ------------------------------------------------------------------- stage */
.stage {
  position: relative;
  outline: none;
  z-index: 10;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 22px);
  padding: clamp(10px, 2.4vh, 26px) clamp(8px, 2vw, 30px);
  min-height: 0;
}

.stage__book {
  position: relative;
  transition: transform .5s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .stage__book { transition: none; } }

/* the book's drop shadow on the "table" */
.stage__book::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -26px;
  height: 40px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(11, 43, 76, .30), transparent 72%);
  filter: blur(7px);
  pointer-events: none;
  z-index: -1;
}

#book { margin: 0 auto; }

/* ------------------------------------------------- page-turn affordances */
/* Always visible, never hover-only: turning the page must be obvious the
   moment the book appears, with no shortcut to learn. */
.pageturn {
  position: static;
  flex: none;
  z-index: 20;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: #fff;
  color: var(--blue-deep);
  box-shadow: 0 3px 10px rgba(11, 43, 76, .16), 0 12px 30px rgba(11, 43, 76, .14);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s, color .18s, opacity .18s;
}

.pageturn svg { width: 26px; height: 26px; fill: currentColor; }

/* Below the two-page threshold the book fills the width, so flanking arrows
   would sit on top of the text. There they move into the bottom bar instead,
   where a thumb can reach them and nothing is covered. */
.navbtn {
  display: none;
  appearance: none;
  border: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  place-items: center;
  cursor: pointer;
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(14, 98, 179, .34);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), opacity .16s;
}
.navbtn svg { width: 20px; height: 20px; fill: currentColor; }
.navbtn:hover:not(:disabled) { transform: scale(1.06); }
.navbtn:disabled { opacity: .3; cursor: default; box-shadow: none; }
.navbtn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

@media (max-width: 719px) {
  .pageturn { display: none; }
  .navbtn { display: grid; }
}

.pageturn:hover:not(:disabled) {
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(14, 98, 179, .42);
}
.pageturn:active:not(:disabled) { transform: scale(1); }

.pageturn:disabled { opacity: .28; cursor: default; box-shadow: var(--shadow-sm); }

.pageturn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* the book itself reads as turnable */
.stf__item, .page { cursor: pointer; }
.page[data-kind='cover'], .page[data-kind='back'] { cursor: pointer; }

/* ============================================================== THE PAGES  */
.page {
  background: var(--paper);
  overflow: hidden;
  container-type: size;
  container-name: page;
}

/* paper: warm tint, faint fibre, and shading toward the gutter */
.page__inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, transparent 30%),
    var(--paper);
  display: flex;
  flex-direction: column;
  padding: 7.5cqi 7cqi 6cqi;
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 2.82cqi;
  line-height: 1.58;
}

/* gutter shading — mirrored per side so a spread reads like a bound book */
.page__inner::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  pointer-events: none;
  z-index: 5;
}
.page[data-side='right'] .page__inner::before {
  left: 0;
  background: linear-gradient(90deg, rgba(11, 43, 76, .17) 0%, rgba(11, 43, 76, .05) 38%, transparent 100%);
}
.page[data-side='left'] .page__inner::before {
  right: 0;
  background: linear-gradient(270deg, rgba(11, 43, 76, .17) 0%, rgba(11, 43, 76, .05) 38%, transparent 100%);
}

/* mirrored inner padding so text never falls into the gutter */
.page[data-side='right'] .page__inner { padding-left: 9.5cqi; }
.page[data-side='left']  .page__inner { padding-right: 9.5cqi; }

/* faint paper grain */
.page__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

.page__body {
  position: relative;
  z-index: 6;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  zoom: var(--fit, 1);
}

/* running folio */
.page__folio {
  position: absolute;
  bottom: 3.2cqi;
  z-index: 7;
  font-family: var(--font-ui);
  font-size: 2.4cqi;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--ink-faint);
}
.page[data-side='right'] .page__folio { right: 7cqi; }
.page[data-side='left']  .page__folio { left: 7cqi; }

.page__runhead {
  position: absolute;
  top: 3.4cqi;
  z-index: 7;
  font-family: var(--font-ui);
  font-size: 2.1cqi;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.page[data-side='right'] .page__runhead { right: 7cqi; }
.page[data-side='left']  .page__runhead { left: 7cqi; }

/* ---------------------------------------------------------- page typography */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 2.3cqi;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 1.6cqi;
}

.h-title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 6.4cqi;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 2.4cqi;
}

.h-title--sm { font-size: 5.4cqi; }

.kicker {
  font-family: var(--font-ui);
  font-size: 2.5cqi;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: .04em;
  margin: -1.4cqi 0 2.4cqi;
}

.rule-wave {
  width: 16cqi;
  height: 1.6cqi;
  margin: 0 0 3cqi;
  flex: none;
}
.rule-wave svg { width: 100%; height: 100%; }

p { margin: 0 0 2.2cqi; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: 3.5cqi;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* "Four Ways to Ride It" is the densest page in the book: two ledes, four
   labelled groups and a closing line, with no picture to absorb the slack.
   At the full lede size the closer fell off the bottom of the page and no
   reader ever saw it. Only a prose page carrying groups comes down a size. */
.page[data-kind='prose']:has(.groups) .lede { font-size: 3.02cqi; }

/* labelled section, e.g. "The work" */
.sect { margin-bottom: 2.6cqi; }

.sect__label {
  font-family: var(--font-ui);
  font-size: 2.2cqi;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin: 0 0 .9cqi;
}

.sect__text { margin: 0; }

/* ------------------------------------------------------------ image slots */
.figure {
  position: relative;
  margin: 0 0 3cqi;
  border-radius: 2.2cqi;
  overflow: hidden;
  background: linear-gradient(150deg, var(--foam) 0%, var(--sky-deep) 55%, var(--seafoam) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, var(--shadow-sm);
  flex: none;
}

.figure__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  display: block;
}

.figure__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* placeholder shown until assets/img/<id>.png exists */
.figure__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2cqi;
  text-align: center;
  padding: 3cqi;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(27, 134, 232, .22), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .30) 0 10px, transparent 10px 20px);
}

.figure__ph svg {
  width: 9cqi;
  height: 9cqi;
  fill: none;
  stroke: var(--blue-deep);
  stroke-width: 6;
  opacity: .55;
}

.figure__phid {
  font-family: var(--font-ui);
  font-size: 2.1cqi;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--blue-dark);
  opacity: .85;
  word-break: break-word;
}

.figure__phnote {
  font-family: var(--font-ui);
  font-size: 1.85cqi;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-deep);
  opacity: .6;
}

.figure__cap {
  font-family: var(--font-ui);
  font-size: 2.15cqi;
  font-style: normal;
  line-height: 1.45;
  color: var(--ink-mute);
  padding: 1.6cqi 2.2cqi 1.8cqi;
  background: rgba(255, 255, 255, .75);
  border-top: 1px solid rgba(255, 255, 255, .9);
}

/* ------------------------------------------------------------- pull quotes */
.pull {
  margin: 0 0 2.6cqi;
  padding: 2.6cqi 3cqi;
  border-radius: 2.2cqi;
  background: linear-gradient(140deg, var(--gold-soft) 0%, #FFF6E2 100%);
  border: 1px solid rgba(240, 180, 41, .38);
  display: flex;
  gap: 2.6cqi;
  align-items: center;
  flex: none;
}

.pull__stat {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 6.2cqi;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--blue-deep);
  flex: none;
}

.pull__stat--word {
  font-size: 3.6cqi;
  line-height: 1.12;
  max-width: 26cqi;
  letter-spacing: -.01em;
}

.pull__text {
  font-family: var(--font-ui);
  font-size: 2.45cqi;
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0;
}

/* stat pair */
.stats {
  display: flex;
  gap: 2.4cqi;
  margin: 0 0 2.6cqi;
  flex: none;
}

.stat {
  flex: 1 1 0;
  background: var(--sky);
  border: 1px solid rgba(27, 134, 232, .2);
  border-radius: 2cqi;
  padding: 2.2cqi;
}

.stat__value {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 5.2cqi;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--blue-deep);
  margin-bottom: .9cqi;
}

.stat__label {
  font-family: var(--font-ui);
  font-size: 2.05cqi;
  line-height: 1.4;
  color: var(--ink-mute);
  font-weight: 500;
}

.srcnote {
  font-family: var(--font-ui);
  font-size: 2.05cqi;
  line-height: 1.45;
  color: var(--ink-faint);
  font-style: italic;
  margin: 0 0 2.4cqi;
}

/* credential chip */
.cred {
  display: flex;
  gap: 2cqi;
  align-items: flex-start;
  padding: 2.2cqi 2.4cqi;
  border-radius: 2cqi;
  background: var(--paper-warm);
  border: 1px dashed rgba(11, 43, 76, .2);
  margin: 0 0 2.4cqi;
  flex: none;
}

.cred svg { width: 4cqi; height: 4cqi; fill: var(--gold); flex: none; margin-top: .2cqi; }

.cred__text {
  font-family: var(--font-ui);
  font-size: 2.3cqi;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

/* pay strip, pinned to the foot of a career page */
.pay {
  margin-top: auto;
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 1.6cqi;
  flex-wrap: wrap;
  padding-top: 2.2cqi;
  border-top: 2px solid var(--rule);
}

.pay__label {
  font-family: var(--font-ui);
  font-size: 2.1cqi;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pay__value {
  font-family: var(--font-ui);
  font-size: 3.3cqi;
  font-weight: 800;
  color: var(--blue-deep);
  letter-spacing: -.01em;
}

.pay__note {
  flex-basis: 100%;
  font-family: var(--font-ui);
  font-size: 1.95cqi;
  color: var(--ink-faint);
  font-style: italic;
}

/* On a career page the illustration is elastic: it takes the room the text
   doesn't need, so a long entry and a short one both fill the page cleanly. */
.page[data-kind='career'] .figure,
.page[data-kind='prose'] .figure,
.page[data-kind='foreword'] .figure,
.page[data-kind='paddle'] .figure {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.page[data-kind='career'] .figure__frame,
.page[data-kind='prose'] .figure__frame,
.page[data-kind='foreword'] .figure__frame,
.page[data-kind='paddle'] .figure__frame {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 16cqi;
}
.page[data-kind='career'] .figure__cap,
.page[data-kind='prose'] .figure__cap,
.page[data-kind='foreword'] .figure__cap,
.page[data-kind='paddle'] .figure__cap { flex: none; }

/* ------------------------------------------------------- career page head */
.career__head {
  display: flex;
  align-items: center;
  gap: 2.2cqi;
  margin-bottom: 2cqi;
  flex: none;
}
.career__head .eyebrow { margin: 0; }

.career__num {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 2.9cqi;
  line-height: 1;
  color: #fff;
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
  width: 7cqi;
  height: 7cqi;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 .6cqi 1.6cqi rgba(14, 98, 179, .34);
  letter-spacing: 0;
}

.continues {
  font-family: var(--font-script);
  font-size: 3.6cqi;
  color: var(--ink-mute);
  margin: -1.6cqi 0 2.4cqi;
}

/* ------------------------------------------------------------- part divider */
.page[data-kind='part'] .page__inner {
  padding: 0;
  background: linear-gradient(165deg, var(--blue-deep) 0%, var(--blue-dark) 48%, #062F5C 100%);
  color: #fff;
}

.part {
  position: relative;
  z-index: 6;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.part { height: 100%; justify-content: flex-end; }

.part__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.part__art .figure {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
}
.part__art .figure__frame { height: 100%; aspect-ratio: auto; }
.part__art .figure__cap { display: none; }

/* sunlit scrim so the white type always holds */
.part__art::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Clear across the top half so the photograph is actually seen, then a fast
     ramp to solid behind the type. Only as much scrim as the words need. */
  background: linear-gradient(180deg,
    rgba(6, 47, 92, 0)    0%,
    rgba(6, 47, 92, 0)   36%,
    rgba(6, 47, 92, .28) 48%,
    rgba(6, 47, 92, .78) 60%,
    rgba(5, 38, 76, .95) 72%,
    rgba(5, 38, 76, .98) 100%);
  pointer-events: none;
}

.part__text {
  position: relative;
  z-index: 2;
  padding: 5cqi 7cqi 8cqi;
}

.part__eyebrow {
  font-family: var(--font-ui);
  font-size: 2.3cqi;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 1.4cqi;
}

.part__num {
  font-family: var(--font-display);
  font-size: 7cqi;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 1cqi;
}

.part__title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 7.6cqi;
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0 0 2.2cqi;
  color: #fff;
}

.part__standfirst {
  font-family: var(--font-body);
  font-size: 2.7cqi;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 3cqi;
}

.part__roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .95cqi;
}

.part__roles li {
  font-family: var(--font-ui);
  font-size: 2.35cqi;
  font-weight: 600;
  color: rgba(255, 255, 255, .95);
  display: flex;
  align-items: center;
  gap: 1.6cqi;
}

.part__roles li::before {
  content: '';
  width: 2.2cqi;
  height: 2.2cqi;
  border-radius: 50%;
  background: var(--aqua);
  flex: none;
  box-shadow: 0 0 0 .6cqi rgba(86, 199, 232, .22);
}

.page[data-kind='part'] .page__folio { color: rgba(255, 255, 255, .5); }
.page[data-kind='part'] .page__inner::after { opacity: .18; }

/* ------------------------------------------------------------------- cover */
.page[data-kind='cover'] .page__inner,
.page[data-kind='back'] .page__inner { padding: 0; }

.cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page[data-kind='back'] .page__inner {
  background: linear-gradient(165deg, var(--blue-deep) 0%, var(--blue-dark) 55%, #062F5C 100%);
  color: #fff;
  padding: 9cqi 7cqi;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.back__mark {
  width: 13cqi;
  height: 13cqi;
  border-radius: 4cqi;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  display: grid;
  place-items: center;
  margin-bottom: 4cqi;
}
.back__mark svg { width: 8cqi; height: 8cqi; fill: #fff; }

.back__quote {
  font-family: var(--font-script);
  font-size: 6.4cqi;
  line-height: 1.15;
  color: var(--gold);
  margin: 0 0 3cqi;
}

.back__text {
  font-family: var(--font-body);
  font-size: 2.9cqi;
  line-height: 1.55;
  color: rgba(255, 255, 255, .9);
  margin: 0 0 4cqi;
  max-width: 78%;
}

.back__site {
  font-family: var(--font-ui);
  font-size: 2.4cqi;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aqua);
}

/* -------------------------------------------------------------- title page */
.page[data-kind='title'] .page__inner {
  justify-content: center;
  text-align: center;
  align-items: center;
  background:
    radial-gradient(90% 60% at 50% 0%, var(--sky) 0%, transparent 60%),
    var(--paper);
}

.title__wave { width: 26cqi; margin-bottom: 4cqi; }
.title__wave svg { width: 100%; }

.title__main {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 9.6cqi;
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0 0 3cqi;
  text-transform: uppercase;
}
.title__main em { font-style: normal; color: var(--blue); }

.title__sub {
  font-family: var(--font-body);
  font-size: 2.8cqi;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 5cqi;
  max-width: 84%;
}

.title__rule {
  width: 18cqi;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 0 4cqi;
}

.title__author {
  font-family: var(--font-ui);
  font-size: 3.4cqi;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.6cqi;
}

.title__date {
  font-family: var(--font-ui);
  font-size: 2.2cqi;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}

/* --------------------------------------------------------------- colophon */
.page[data-kind='colophon'] .page__inner { justify-content: center; }

.colophon__tag {
  font-family: var(--font-display);
  font-size: 5.6cqi;
  color: var(--blue);
  line-height: 1.05;
  margin-bottom: 3cqi;
  transform: rotate(-1.5deg);
}

.colophon p {
  font-size: 2.75cqi;
  line-height: 1.6;
  color: var(--ink-soft);
}

.colophon__meta {
  margin-top: 4cqi;
  padding-top: 2.6cqi;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 2.1cqi;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------- epigraph */
.page[data-kind='epigraph'] .page__inner {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.epigraph__quote {
  font-family: var(--font-script);
  font-size: 7.4cqi;
  line-height: 1.12;
  color: var(--blue-deep);
  margin: 0 0 3cqi;
  max-width: 88%;
}

.epigraph__attrib {
  font-family: var(--font-ui);
  font-size: 2.2cqi;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7cqi;
}

.epigraph__ded {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 2.7cqi;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 80%;
  padding-top: 3cqi;
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------- contents */
.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 4cqi;
  column-fill: balance;
}

.toc__sect {
  break-inside: avoid;
  margin-bottom: 1.4cqi;
}

.toc__rows { list-style: none; margin: 0; padding: 0; }

.toc__group {
  font-family: var(--font-ui);
  font-size: 1.85cqi;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 2.6cqi 0 1.2cqi;
}
.toc__group:first-child { margin-top: 0; }

.toc__row {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 1cqi;
  font-family: var(--font-ui);
  font-size: 2.1cqi;
  padding: .5cqi 0;
  color: var(--ink-soft);
  font-weight: 500;
}

.toc__dots {
  flex: 1 1 auto;
  border-bottom: 1.5px dotted var(--ink-faint);
  transform: translateY(-.4cqi);
  min-width: 2cqi;
}

.toc__pg {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ prose groups */
.groups {
  list-style: none;
  margin: 0 0 1.4cqi;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1cqi;
}

.group {
  display: flex;
  gap: 2.2cqi;
  align-items: flex-start;
}

.group__icon {
  width: 5.6cqi;
  height: 5.6cqi;
  border-radius: 1.8cqi;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--sky) 0%, var(--foam) 100%);
  border: 1px solid rgba(27, 134, 232, .22);
}
.group__icon svg { width: 3.2cqi; height: 3.2cqi; fill: var(--blue-deep); }

.group__name {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 2.75cqi;
  color: var(--ink);
  margin-bottom: .4cqi;
}

.group__text {
  font-family: var(--font-ui);
  font-size: 2.3cqi;
  line-height: 1.45;
  color: var(--ink-mute);
  font-weight: 500;
  margin: 0;
}

.closer {
  margin-top: auto;
  padding-top: 1.2cqi;
  border-top: 2px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 2.35cqi;
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 600;
  flex: none;
}

/* ---------------------------------------------------------- salary tables */
.salary { width: 100%; border-collapse: collapse; margin: 0 0 2.6cqi; }

.salary th {
  font-family: var(--font-ui);
  font-size: 1.9cqi;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 0 1.2cqi 1.2cqi 0;
  border-bottom: 2px solid var(--rule);
}
.salary th:last-child, .salary td:last-child { padding-right: 0; text-align: right; }

.salary td {
  font-family: var(--font-ui);
  font-size: 2.2cqi;
  padding: 1.5cqi 1.2cqi 1.5cqi 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
  vertical-align: top;
  line-height: 1.35;
}

.salary td.salary__role { font-weight: 700; color: var(--ink); }
.salary td.salary__range { color: var(--blue-deep); font-weight: 700; white-space: nowrap; }
.salary td.salary__src { color: var(--ink-faint); font-size: 1.95cqi; font-style: italic; }

/* --- range bars: one shared axis, single hue, redundant with the text --- */
.salary__barrow td { padding: 0 0 1.5cqi 0; border-bottom: 1px solid var(--rule-soft); }
.salary__row td { border-bottom: none; padding-bottom: .7cqi; }

.rbar {
  position: relative;
  height: 1.5cqi;
  width: 100%;
}

.rbar__track {
  position: absolute;
  inset: 0;
  background: var(--sky-deep);
  border-radius: 999px;
}

.rbar__span {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--blue);
  border-radius: 999px;
  min-width: 1.5cqi;
}

/* a bar that runs past the axis gets a cut end, not a false edge */
.rbar__span--over {
  border-radius: 999px 0 0 999px;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
}

.rbar__point {
  position: absolute;
  top: 50%;
  width: 1.5cqi;
  height: 1.5cqi;
  margin: -.75cqi 0 0 -.75cqi;
  border-radius: 50%;
  background: var(--blue);
}

.rbar--none .rbar__track { opacity: .45; }

.raxis {
  position: relative;
  height: 3.4cqi;
  margin: .6cqi 0 2.4cqi;
  border-top: 1px solid var(--rule);
  flex: none;
}

.raxis__t {
  position: absolute;
  top: 1cqi;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 1.75cqi;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}
.raxis__t:first-child { transform: none; }
.raxis__t:last-child { transform: translateX(-100%); }

.salary__note {
  margin-top: auto;
  flex: none;
  font-family: var(--font-ui);
  font-size: 2.05cqi;
  line-height: 1.5;
  color: var(--ink-mute);
  background: var(--paper-warm);
  border-left: 3px solid var(--gold);
  padding: 1.8cqi 2.2cqi;
  border-radius: 0 1.4cqi 1.4cqi 0;
}

/* ------------------------------------------------------------- paddle out */
.page[data-kind='paddle'] .page__inner { background: linear-gradient(175deg, var(--paper) 0%, var(--sky) 100%); }

.paddle__title {
  font-family: var(--font-display);
  font-size: 11cqi;
  line-height: .95;
  color: var(--blue-deep);
  margin: 0 0 1.4cqi;
  transform: rotate(-1.5deg);
}

.steps { list-style: none; margin: 0 0 3cqi; padding: 0; display: flex; flex-direction: column; gap: 1.8cqi; }

.step { display: flex; gap: 2.2cqi; align-items: center; }

.step__n {
  width: 6.4cqi;
  height: 6.4cqi;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 3cqi;
  box-shadow: 0 2px 8px rgba(14, 98, 179, .34);
}

.step__text {
  font-family: var(--font-ui);
  font-size: 2.9cqi;
  font-weight: 600;
  color: var(--ink);
}

.paddle__script {
  font-family: var(--font-script);
  font-size: 5.4cqi;
  color: var(--blue);
  text-align: center;
  margin-top: auto;
  padding-top: 2.4cqi;
  flex: none;
}

/* ------------------------------------------------------------------- about */
.about__portrait {
  width: 27cqi;
  margin: 0 auto 3cqi;
  flex: none;
}
.about__portrait .figure { border-radius: 50%; margin: 0; }
.about__portrait .figure__cap { display: none; }

.about p { font-size: 2.75cqi; }

/* ---------------------------------------------- About spread, facing page */
.gallery__shot { margin-bottom: 1.5cqi; }
.gallery__shot .figure { margin: 0; }
.gallery__shot .figure__cap { font-size: 1.95cqi; padding: 1.2cqi 1.8cqi 1.4cqi; }

/* -------------------------------------------------- notes & bibliography */
.note {
  font-family: var(--font-ui);
  font-size: .62em;
  font-weight: 700;
  color: var(--blue);
  vertical-align: super;
  line-height: 0;
  margin-left: .12em;
  letter-spacing: 0;
}
.note + .note { margin-left: .28em; }

.endnotes {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.endnote {
  display: flex;
  gap: 1.8cqi;
  font-family: var(--font-ui);
  font-size: 1.95cqi;
  line-height: 1.42;
  color: var(--ink-soft);
  padding: 1.1cqi 0;
  border-bottom: 1px solid var(--rule-soft);
  overflow-wrap: anywhere;
}
.endnote:last-child { border-bottom: none; }

.endnote__n {
  flex: none;
  width: 5cqi;
  height: 5cqi;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sky);
  border: 1px solid rgba(27, 134, 232, .28);
  color: var(--blue-deep);
  font-weight: 800;
  font-size: 1.85cqi;
  margin-top: .2cqi;
}

.endnote__t em { font-style: italic; }

.biblio { list-style: none; margin: 0; padding: 0; }

.biblio__item {
  font-family: var(--font-ui);
  font-size: 1.95cqi;
  line-height: 1.45;
  color: var(--ink-soft);
  padding: 1.15cqi 0 1.15cqi 4cqi;
  text-indent: -4cqi;          /* hanging indent, as a bibliography wants */
  border-bottom: 1px solid var(--rule-soft);
  overflow-wrap: anywhere;
}
.biblio__item:last-child { border-bottom: none; }
.biblio__item em { font-style: italic; }

/* ------------------------------------------------------------- foreword */
.fw-script {
  font-family: var(--font-script);
  font-size: 4.6cqi;
  line-height: 1.2;
  color: var(--blue);
  margin: 2.2cqi 0 0;
}

.fw-sign {
  font-family: var(--font-script);
  font-size: 5.4cqi;
  color: var(--ink);
  margin: 2.4cqi 0 0;
  padding-top: 2cqi;
  border-top: 1px solid var(--rule);
}

/* ----------------------------------------------------------------- sources */
.sources__list {
  list-style: none;
  margin: 0 0 2.6cqi;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.3cqi;
}

.sources__list li {
  font-family: var(--font-ui);
  font-size: 2.2cqi;
  line-height: 1.4;
  color: var(--ink-soft);
  padding-left: 3.4cqi;
  position: relative;
}

.sources__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55cqi;
  width: 1.8cqi;
  height: 1.8cqi;
  border-radius: 50%;
  border: 2px solid var(--gold);
}

/* ============================================================ BOTTOM BAR  */
.controls {
  position: relative;
  z-index: 30;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  padding: 12px clamp(12px, 3vw, 28px) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 253, 248, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid var(--rule-soft);
}


.progress {
  flex: 1 1 auto;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.scrub {
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) var(--pct, 0%), var(--sky-deep) var(--pct, 0%));
  cursor: pointer;
  margin: 0;
}
.scrub::-webkit-slider-thumb {
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.scrub::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue); box-shadow: var(--shadow-sm);
}

.progress__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.progress__meta strong { color: var(--ink); font-weight: 800; }

/* ============================================================ TOC DRAWER  */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 43, 76, .22);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(330px, 88vw);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  transform: translateX(-102%);
  transition: transform .34s var(--ease);
  display: flex;
  flex-direction: column;
}

.drawer[aria-hidden='false'] { pointer-events: auto; }
.drawer[aria-hidden='false'] .drawer__scrim { opacity: 1; }
.drawer[aria-hidden='false'] .drawer__panel { transform: none; }

.drawer__head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}

.drawer__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
}

.drawer__body { overflow-y: auto; padding: 12px 10px 24px; flex: 1 1 auto; }

.toc__heading {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 14px 12px 6px;
}

.toc__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.toc__link:hover { background: var(--sky); color: var(--blue-deep); }
.toc__link[aria-current='true'] { background: var(--sky-deep); color: var(--blue-deep); font-weight: 800; }
.toc__link span { flex: 1 1 auto; }
.toc__link em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  font-weight: 700;
  font-size: 12px;
}

@media (min-width: 1080px) {
  .app {
    transition: padding-left .34s var(--ease);
  }
  body.is-toc .app { padding-left: 330px; }

  /* docked, not modal: nothing is covered, so no scrim at all */
  body.is-toc .drawer__scrim { display: none; }

  .drawer__panel { border-right: 1px solid var(--rule-soft); box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app, .drawer__panel { transition: none; }
}

/* ============================================ SCROLL (ACCESSIBLE) MODE   */
.scrollview { display: none; }

body.is-scrollmode .stage,
body.is-scrollmode .controls { display: none; }

body.is-scrollmode .scrollview {
  display: block;
  position: relative;
  z-index: 10;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(18px, 5vw, 32px) 120px;
}

.scrollview .page {
  container-type: normal;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  margin-bottom: 26px;
  overflow: hidden;
  position: relative;
}

/* in scroll mode the cqi type scale is replaced by a px scale */
.scrollview .page__inner {
  position: relative;
  inset: auto;
  padding: clamp(26px, 5vw, 46px);
  font-size: 16.5px;
  line-height: 1.72;
}
.scrollview .page__inner::before { display: none; }

.scrollview .page[data-side] .page__inner { padding-left: clamp(26px, 5vw, 46px); padding-right: clamp(26px, 5vw, 46px); }

.scrollview .h-title { font-size: 30px; margin-bottom: 14px; }
.scrollview .h-title--sm { font-size: 25px; }
.scrollview .eyebrow { font-size: 11px; margin-bottom: 8px; }
.scrollview .career__head { gap: 12px; margin-bottom: 10px; }
.scrollview .career__num { width: 34px; height: 34px; font-size: 14px; box-shadow: 0 2px 7px rgba(14,98,179,.34); }
.scrollview .sect__label { font-size: 11px; margin-bottom: 4px; }
.scrollview .sect { margin-bottom: 18px; }
.scrollview p { margin-bottom: 14px; }
.scrollview .lede { font-size: 19px; }
.scrollview .rule-wave { width: 84px; height: 9px; margin-bottom: 18px; }
.scrollview .figure { border-radius: 14px; margin-bottom: 20px; }
.scrollview .figure__ph svg { width: 44px; height: 44px; }
.scrollview .figure__phid { font-size: 12px; }
.scrollview .figure__phnote { font-size: 10px; }
.scrollview .figure__cap { font-size: 12.5px; padding: 10px 14px 12px; }
.scrollview .pull { border-radius: 14px; padding: 18px 20px; gap: 16px; margin-bottom: 20px; }
.scrollview .pull__stat { font-size: 34px; }
.scrollview .pull__stat--word { font-size: 20px; max-width: 150px; }
.scrollview .pull__text { font-size: 14px; }
.scrollview .stats { gap: 14px; margin-bottom: 20px; }
.scrollview .stat { border-radius: 14px; padding: 14px; }
.scrollview .stat__value { font-size: 28px; }
.scrollview .stat__label { font-size: 12px; }
.scrollview .cred { border-radius: 14px; padding: 14px 16px; gap: 12px; margin-bottom: 20px; }
.scrollview .cred svg { width: 20px; height: 20px; }
.scrollview .cred__text { font-size: 13.5px; }
.scrollview .srcnote { font-size: 12.5px; margin-bottom: 18px; }
.scrollview .pay { padding-top: 16px; gap: 10px; margin-top: 8px; }
.scrollview .pay__label { font-size: 11px; }
.scrollview .pay__value { font-size: 19px; }
.scrollview .pay__note { font-size: 12px; }
.scrollview .part__text { margin-top: 0; padding: 30px clamp(26px, 5vw, 46px) 36px; }
.scrollview .part__art { height: 230px; flex: none; }
.scrollview .part__num { font-size: 30px; }
.scrollview .part__title { font-size: 38px; }
.scrollview .part__standfirst { font-size: 16px; }
.scrollview .part__eyebrow { font-size: 11px; }
.scrollview .part__roles li { font-size: 14px; gap: 10px; }
.scrollview .part__roles li::before { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(86,199,232,.22); }
.scrollview .title__main { font-size: 46px; }
.scrollview .title__sub { font-size: 16px; }
.scrollview .title__author { font-size: 17px; }
.scrollview .title__date { font-size: 12px; }
.scrollview .title__wave { width: 120px; }
.scrollview .epigraph__quote { font-size: 36px; }
.scrollview .epigraph__attrib { font-size: 11px; margin-bottom: 30px; }
.scrollview .epigraph__ded { font-size: 15px; }
.scrollview .colophon__tag { font-size: 28px; }
.scrollview .colophon p { font-size: 16px; }
.scrollview .colophon__meta { font-size: 12.5px; }
.scrollview .toc__group { font-size: 11px; }
.scrollview .toc__row { font-size: 14.5px; padding: 5px 0; }
.scrollview .toc__list { columns: 1; }
.scrollview .groups { gap: 14px; margin-bottom: 20px; }
.scrollview .group__icon { width: 38px; height: 38px; border-radius: 12px; }
.scrollview .group__icon svg { width: 20px; height: 20px; }
.scrollview .group__name { font-size: 15px; }
.scrollview .group__text { font-size: 13.5px; }
.scrollview .closer { font-size: 15px; padding-top: 16px; margin-top: 10px; }
.scrollview .salary th { font-size: 10.5px; padding-bottom: 8px; }
.scrollview .salary td { font-size: 13px; padding: 10px 8px 10px 0; }
.scrollview .salary td.salary__src { font-size: 11.5px; }
.scrollview .salary__note { font-size: 12.5px; padding: 12px 14px; margin-top: 10px; }
.scrollview .rbar { height: 8px; }
.scrollview .rbar__span { min-width: 8px; }
.scrollview .rbar__point { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.scrollview .salary__barrow td { padding-bottom: 10px; }
.scrollview .raxis { height: 20px; margin: 4px 0 16px; }
.scrollview .raxis__t { font-size: 10px; top: 5px; }
.scrollview .paddle__title { font-size: 48px; }
.scrollview .step__n { width: 34px; height: 34px; font-size: 16px; }
.scrollview .step__text { font-size: 17px; }
.scrollview .paddle__script { font-size: 30px; margin-top: 16px; }
.scrollview .about__portrait { width: 160px; }
.scrollview .about p { font-size: 16px; }
.scrollview .endnote { font-size: 13px; gap: 10px; padding: 8px 0; }
.scrollview .endnote__n { width: 24px; height: 24px; font-size: 11px; }
.scrollview .biblio__item { font-size: 13px; padding: 8px 0 8px 22px; text-indent: -22px; }
.scrollview .fw-script { font-size: 26px; }
.scrollview .fw-sign { font-size: 30px; }
.scrollview .sources__list li { font-size: 13.5px; padding-left: 20px; }
.scrollview .sources__list li::before { width: 9px; height: 9px; top: 5px; }
.scrollview .page__folio,
.scrollview .page__runhead { position: static; display: none; }
.scrollview .back__text { max-width: 100%; }
.scrollview .back__quote { font-size: 32px; }
.scrollview .back__mark { width: 60px; height: 60px; border-radius: 18px; }
.scrollview .back__mark svg { width: 34px; height: 34px; }
.scrollview .back__site { font-size: 12px; }
.scrollview .page[data-kind='cover'] { aspect-ratio: 2 / 3; }
.scrollview .page[data-kind='cover'] .page__inner { position: absolute; inset: 0; }

.scrollview__note {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-mute);
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 26px;
  line-height: 1.55;
}

/* ================================================================= helpers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--blue-deep);
  color: #fff;
  padding: 11px 18px;
  border-radius: 0 0 12px 12px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* the loading veil */
.boot {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: var(--sky);
  transition: opacity .5s var(--ease), visibility .5s;
}
.boot[hidden] { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none; }

.boot__inner { text-align: center; }

.boot__wave { width: 76px; margin: 0 auto 18px; animation: bob 2.4s ease-in-out infinite; }
.boot__wave svg { width: 100%; fill: var(--blue); }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-9px) rotate(2deg); }
}

.boot__text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .btn__label { display: none; }
  .btn { padding: 9px; border-radius: 50%; }
  .btn--primary { padding: 9px 15px; border-radius: 999px; }
  .btn--primary .btn__label { display: inline; }
  .brand__by { display: none; }
}

@media (max-width: 560px) {
  .brand__text { display: none; }
  .controls { gap: 10px; }
  .progress__meta { font-size: 10px; }
  .pageturn { width: 46px; height: 46px; margin-top: -23px; }
  .pageturn svg { width: 21px; height: 21px; }
  .stage { gap: 0; }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .boot__wave { animation: none; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .topbar, .controls, .drawer, .boot, .skip-link, .stage { display: none !important; }
  body { overflow: visible; background: #fff; }
  .scrollview { display: block !important; max-width: none; padding: 0; }
  .scrollview .page { break-after: page; box-shadow: none; border-radius: 0; margin: 0; }
  .scrollview__note { display: none; }
}