/*
 * Lees & doe components that mirror the print interior (spec §4, §5.3): every magazine uses the same class names;
 * faces come from the typography roles (--font-<role>, Models/MagazineDesign.cs), colours from the palette, the page
 * subject and the decor palette, and each look is chosen by a configuration value (callout style keys, department
 * style, workspace "sheet", decor set), never by a brand name. A new magazine picks its styles in magazines.json.
 * Kids body text stays ≥ 16 px; handwriting (--font-hand) never below --hand-min (1.5rem).
 * Order: role faces · inline markup · departments · titles · drop caps · pull quotes · callouts · facts and
 * sidebars · steps, quiz letters, levels · speech · workspaces · photo notes · rendered cover · decor slots.
 */
@layer components {
  /* --- Role faces ----------------------------------------------------------------------------------- */
  .page-live .page-title {
    font-family: var(--font-title-service, var(--font-title, var(--display)));
    font-weight: var(--font-title-service-weight, var(--font-title-weight, 800));
    font-stretch: var(--font-title-service-stretch, var(--font-title-stretch, 100%));
    font-style: var(--font-title-service-style, normal);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .page-live :is(.voice-story, .voice-feature) .page-title {
    font-family: var(--font-title, var(--display));
    font-weight: var(--font-title-weight, 800);
    font-stretch: var(--font-title-stretch, 100%);
    font-style: var(--font-title-style, normal);
  }
  .title-face--fun_bold .page-live .page-title {
    letter-spacing: 0;
    line-height: 1.04;
  }
  .title-face--serif_display .page-live :is(.voice-story, .voice-feature) .page-title {
    letter-spacing: -0.008em;
    line-height: 1.04;
  }
  .title-face--serif_display .page-live :is(.voice-story, .voice-feature):not(.is-article-continuation) .page-title {
    font-size: 48px;
  }
  .page-live .page-title--opener {
    font-size: clamp(40px, 5.4vw, 56px);
  }
  /* Phones: long Dutch compounds ("bekertjestelefoon") must fit a line; hyphenate rather than break anywhere. */
  @media (max-width: 540px) {
    .page-live .page-title,
    .page-live .page-title--opener {
      font-size: clamp(28px, 8vw, 38px);
      hyphens: auto;
      -webkit-hyphens: auto;
    }
    .title-face--serif_display .page-live :is(.voice-story, .voice-feature):not(.is-article-continuation) .page-title {
      font-size: clamp(30px, 8.4vw, 40px);
    }
  }
  .magazine-children .page-live .page-title--opener,
  .decor-set--play .page-live .page-title {
    color: var(--subject);
  }
  .page-live .article-lead {
    font-family: var(--font-lead, var(--body));
    font-weight: var(--font-lead-weight, 500);
    font-stretch: var(--font-lead-stretch, 100%);
    font-style: var(--font-lead-style, normal);
  }
  .page-live :is(.article-body, .composition-sections, .variety-card, .interview-row, .comparison-panel, .field-notebook-entry, .editorial-timeline, .secondary-copy, .experiment-layout) h3 {
    font-family: var(--font-heading, var(--display));
    font-weight: var(--font-heading-weight, 750);
    font-stretch: var(--font-heading-stretch, 100%);
  }
  .magazine-children .page-live :is(.article-body, .composition-sections, .variety-card, .field-notebook-entry) h3 {
    color: var(--subject);
  }
  /* Body voices: story (children's stories) and feature (VECTOR long reads) read in the serif. */
  .page-live :is(.voice-story, .voice-feature) :is(.article-body, .composition-sections, .variety-card, .interview-row, .comparison-panel, .field-notebook-entry, .editorial-timeline) p {
    font-family: var(--font-story, var(--body));
    font-weight: var(--font-story-weight, 400);
  }
  .page-live .voice-story :is(.article-body, .composition-sections, .variety-card, .field-notebook-entry) p {
    font-size: 1.04em;
    line-height: 1.45;
  }
  /* Newsreader has a smaller x-height than DM Sans (0.469 vs 0.504): a little more size reads the same. */
  .page-live .voice-feature :is(.article-body, .composition-sections, .variety-card, .interview-row, .comparison-panel, .field-notebook-entry) p {
    font-size: 1.08em;
    line-height: 1.55;
  }
  .page-live .voice-story .article-body p {
    font-size: 21px;
    line-height: 1.6;
  }
  .page-live .voice-feature .article-body p {
    font-size: 19px;
    line-height: 1.62;
  }
  .page-live .page-footer b,
  .page-live .fact-strip strong,
  .page-live .steps li::before {
    font-family: var(--font-numeral, var(--display));
    font-weight: var(--font-numeral-weight, 800);
    font-stretch: var(--font-numeral-stretch, 100%);
  }
  .page-live .spread-title {
    font-family: var(--font-title, var(--display));
    font-weight: var(--font-title-weight, 800);
    font-stretch: var(--font-title-stretch, 100%);
    font-style: var(--font-title-style, normal);
  }
  .page-live .page-running > span:first-child {
    font-family: var(--font-masthead, var(--display));
    font-weight: var(--font-masthead-weight, 800);
    font-stretch: var(--font-masthead-stretch, 100%);
    letter-spacing: 0;
  }

  /* --- Inline markup (**strong**, *emphasis*, ==highlight==) ---------------------------------------- */
  .page-live strong {
    font-weight: 700;
  }
  .emphasis--medium-subject .page-live em {
    font-style: normal;
    font-weight: 500;
    color: var(--subject);
  }
  .emphasis--medium-ink .page-live em {
    font-style: normal;
    font-weight: 500;
  }
  .page-live :is(.voice-story, .voice-feature) :is(.article-body, .composition-sections, .variety-card) em {
    font-style: italic;
    font-weight: inherit;
    color: inherit;
  }
  .page-live mark {
    background: var(--mark-color);
    color: inherit;
    padding: 0 0.12em;
    border-radius: 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* --- Department headers ---------------------------------------------------------------------------- */
  .department {
    --dept: var(--subject);
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--font-department, var(--body));
    font-weight: var(--font-department-weight, 700);
    font-stretch: var(--font-department-stretch, 100%);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dept);
  }
  .department + .page-kicker {
    margin-top: 2px;
  }
  .department-icon {
    width: 18px;
    height: 18px;
    flex: none;
  }
  /* WONDER: the subject tab with a white icon, the department name next to it. */
  .department--tab .department-icon {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 9px 7px 6px;
    margin-top: -14px;
    border-radius: 0 0 7px 7px;
    background: var(--dept);
    color: white;
  }
  /* VONK: a strip of washi tape with zigzag ends, slightly turned (outward on each leaf, ≤ 2°). */
  .department--tape {
    position: relative;
    padding: 7px 24px 7px 22px;
    background: var(--dept);
    color: white;
    font-size: 15px;
    letter-spacing: 0.06em;
    clip-path: polygon(
      7px 0, calc(100% - 7px) 0, 100% 12.5%, calc(100% - 7px) 25%, 100% 37.5%, calc(100% - 7px) 50%, 100% 62.5%,
      calc(100% - 7px) 75%, 100% 87.5%, calc(100% - 7px) 100%, 7px 100%, 0 87.5%, 7px 75%, 0 62.5%, 7px 50%, 0 37.5%,
      7px 25%, 0 12.5%
    );
    rotate: -2deg;
    margin-left: -6px;
  }
  .leaf-right .department--tape {
    rotate: 1.6deg;
  }
  .department--tape .department-icon {
    color: white;
  }
  .department--tape .department-kicker {
    opacity: 0.92;
  }
  /* VECTOR: a small subject square before the department name, quiet caps. */
  .department--square {
    color: var(--ink);
    font-size: 12px;
    letter-spacing: 0.14em;
  }
  .department--square::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--dept);
  }
  /* VECTOR's running furniture on one line: ■ DOSSIER | VECTOR • TAAL ALS BEREKENING. */
  .dept-style--square .page-live .department--square + .page-kicker {
    display: inline-flex;
    margin: 0 0 12px 12px;
    padding-left: 12px;
    border-left: 1px solid var(--rule);
  }
  .dept-style--square .page-live .department--square + .page-kicker::before {
    display: none;
  }

  @media (max-width: 540px) {
    .department--tape {
      margin-left: 0;
      padding: 6px 18px 6px 16px;
      font-size: 13px;
      letter-spacing: 0.04em;
      rotate: -1.2deg;
    }
    .leaf-right .department--tape {
      rotate: 1deg;
    }
    .department {
      gap: 4px 8px;
    }
  }

  /* --- Kickers ------------------------------------------------------------------------------------------ */
  .kicker-face--hand .page-live .page-kicker {
    display: inline-block;
    font-family: var(--font-hand, var(--body));
    font-weight: 700;
    font-size: max(var(--hand-min, 1.5rem), 1.6rem);
    line-height: 1;
    letter-spacing: 0;
    text-transform: lowercase;
    color: var(--tab-magenta);
  }
  .kicker-face--hand .page-live .page-kicker::first-letter {
    text-transform: uppercase;
  }
  .dept-style--square .page-live .page-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    letter-spacing: 0.15em;
  }
  .dept-style--square .page-live .page-kicker::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--subject);
    flex: none;
  }

  /* --- Title decoration ------------------------------------------------------------------------------- */
  .page-live .title-mark {
    color: inherit;
    padding: 0 0.1em;
    background: linear-gradient(176deg, transparent 50%, var(--star-yellow) 50%, var(--star-yellow) 90%, transparent 90%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .page-live .title-accent {
    color: var(--title-accent, var(--subject));
  }
  .page-live .title-squiggle {
    display: block;
    width: 132px;
    height: 13px;
    margin: -8px 0 18px;
    color: var(--subject);
  }

  /* --- Drop caps (first paragraph of part 1, typography.dropCap) -------------------------------------- */
  .page-live .has-dropcap > section:first-of-type > p::first-letter {
    font-family: var(--font-dropcap, var(--display));
    font-weight: var(--font-dropcap-weight, 800);
    font-stretch: var(--font-dropcap-stretch, 100%);
    font-style: normal;
    color: var(--subject);
    float: left;
    font-size: 3.4em;
    line-height: 0.82;
    padding: 0.08em 0.1em 0 0;
  }
  @supports (initial-letter: 3) {
    .page-live .has-dropcap > section:first-of-type > p::first-letter {
      float: none;
      font-size: inherit;
      line-height: inherit;
      padding: 0;
      initial-letter: 3;
      margin-right: 0.12em;
    }
  }

  /* --- Pull quotes ------------------------------------------------------------------------------------ */
  .pull-quote {
    position: relative;
    margin: 6px 0 30px;
    font-family: var(--font-quote, var(--display));
    font-weight: var(--font-quote-weight, 700);
    font-stretch: var(--font-quote-stretch, 100%);
    font-style: var(--font-quote-style, normal);
    font-size: 27px;
    line-height: 1.25;
    color: var(--subject);
    break-inside: avoid;
  }
  .pull-quote p,
  .page-live :is(.article-body, .composition-sections) .pull-quote p {
    margin: 0;
    white-space: normal;
    font: inherit;
    line-height: inherit;
  }
  .pull-quote--wow {
    padding: 20px 0 20px 76px;
    border-block: 2px dotted var(--subject);
  }
  .pull-quote-mark {
    position: absolute;
    left: 0;
    top: 22px;
    width: 58px;
    height: 48px;
    color: color-mix(in srgb, var(--lime) 78%, var(--ink));
  }
  .pull-quote--rules {
    padding: 18px 0 18px 48px;
    border-block: 1px solid var(--ink);
    color: var(--ink);
    font-size: 26px;
    line-height: 1.3;
  }
  .pull-quote--rules::before {
    content: '“';
    position: absolute;
    left: 0;
    top: 4px;
    font-family: var(--font-title, var(--display));
    font-style: normal;
    font-size: 76px;
    line-height: 1;
    color: var(--subject);
  }
  .pull-quote--squiggle {
    padding: 8px 6%;
    text-align: center;
  }
  .pull-quote-squiggle {
    display: block;
    width: 140px;
    height: 13px;
    margin: 14px auto 0;
    color: var(--subject);
  }
  .pull-quote--rule {
    padding-left: 20px;
    border-left: 4px solid var(--subject);
  }

  /* --- Callouts: one block per style key (typography.callouts) ---------------------------------------- */
  .page-live .callout {
    min-height: 0;
  }
  .page-live .callout p {
    font-size: 16px;
    line-height: 1.6;
    white-space: pre-line;
  }
  .page-live .callout h3 {
    font-family: var(--font-label, var(--display));
    font-weight: var(--font-label-weight, 750);
    font-stretch: var(--font-label-stretch, 100%);
  }
  .callout-icon .decor-svg {
    display: block;
    width: 40px;
    height: 40px;
  }
  .page-live .callout .callout-cutout {
    width: 104px;
    height: 132px;
    right: 6px;
    bottom: 0;
    object-fit: contain;
    object-position: bottom;
  }
  .page-live .callout .callout-portrait {
    position: static;
    order: -1;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--paper);
    border: 3px solid var(--speaker-color, var(--subject));
  }
  .page-live .callout > div {
    min-width: 0;
    flex: 1;
  }
  @media (max-width: 540px) {
    .page-live .callout.callout-style--cutout-card > div {
      padding-right: 70px;
    }
    .page-live .callout-style--cutout-card .callout-cutout {
      width: 74px;
      height: 112px;
      right: 2px;
    }
    .page-live .callout.callout-style--balloon {
      margin-right: 0;
      padding-bottom: 104px;
    }
    .page-live .callout-style--balloon::after {
      display: none;
    }
    .page-live .callout-style--balloon .callout-cutout {
      right: 10px;
      bottom: 4px;
      width: 78px;
      height: 96px;
    }
  }
  .page-live .callout.has-portrait > div {
    padding-right: 0;
  }
  .page-live .callout:not(.has-mascot) > div {
    padding-right: 0;
  }

  /* VONK action: a yellow sticker card with a magenta label tab and a pencil. */
  .page-live .callout.callout-style--sticker {
    margin-top: 40px;
    padding: 34px 22px 22px;
    background: var(--star-yellow);
    border-radius: 16px;
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--star-ink) 25%, white);
  }
  .callout-style--sticker .callout-icon,
  .callout-style--sticker h3 {
    position: absolute;
    top: -15px;
    background: var(--tab-magenta);
    color: white;
  }
  .callout-style--sticker .callout-icon {
    left: 18px;
    padding: 6px 4px 6px 10px;
    border-radius: 8px 0 0 8px;
  }
  .callout-style--sticker .callout-icon .decor-svg {
    width: 20px;
    height: 20px;
  }
  .page-live .callout-style--sticker h3 {
    left: 50px;
    margin: 0;
    padding: 6px 12px 6px 4px;
    border-radius: 0 8px 8px 0;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .callout-style--sticker p {
    font-weight: 500;
  }
  /* VONK fact: a cloud card (scalloped top) on a sky tint with a sun. */
  .page-live .callout.callout-style--cloud {
    margin-top: 34px;
    padding: 28px 22px 22px;
    background: var(--sky-tint);
    border: 2px solid var(--sky-ink);
    border-radius: 22px;
    color: var(--ink);
  }
  .callout-style--cloud::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: -16px;
    height: 30px;
    background:
      radial-gradient(circle at 15px 15px, var(--paper) 13px, var(--sky-ink) 13px 15px, transparent 15.5px) 0 0 / 30px 30px repeat-x;
    clip-path: inset(0 0 50% 0);
  }
  .callout-style--cloud .callout-icon {
    position: absolute;
    right: 18px;
    top: -26px;
    color: var(--sun-rays);
  }
  .callout-style--cloud .callout-icon .decor-svg {
    width: 50px;
    height: 50px;
    color: var(--sun-rays);
  }
  .page-live .callout-style--cloud h3 {
    color: var(--sky-ink);
  }
  /* VONK tip: a sticky note held by a strip of tape. */
  .page-live .callout.callout-style--sticky {
    margin-top: 34px;
    max-width: 560px;
    padding: 28px 24px 22px;
    background: var(--sticky);
    border-radius: 3px;
    rotate: -0.8deg;
    box-shadow: 0 8px 14px -10px color-mix(in srgb, var(--ink) 50%, transparent);
  }
  .callout-style--sticky::before {
    content: '';
    position: absolute;
    top: -12px;
    left: calc(50% - 46px);
    width: 92px;
    height: 26px;
    background: color-mix(in srgb, var(--tape-1) 88%, transparent);
    rotate: -4deg;
  }
  .page-live .callout-style--sticky h3 {
    font-family: var(--font-hand, var(--display));
    font-size: max(var(--hand-min, 1.5rem), 1.7rem);
    font-weight: 700;
    color: var(--sticky-ink);
    letter-spacing: 0;
  }
  /* Notebook: ruled paper with a pink margin line and a paperclip (VONK note; WONDER's Noor on kraft). */
  .page-live .callout.callout-style--notebook {
    margin-top: 32px;
    padding: 24px 22px 22px 52px;
    background-color: white;
    background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--ruled) 27px 28px),
      linear-gradient(to right, transparent 34px, var(--margin-pink) 34px 36px, transparent 36px);
    background-position: 0 14px, 0 0;
    border: 1px solid var(--ruled);
    border-radius: 6px;
    align-items: flex-start;
  }
  .page-live .callout.callout--mascot.callout-style--notebook {
    background-color: var(--kraft);
  }
  .callout-style--notebook .callout-icon {
    position: absolute;
    top: -18px;
    left: 26px;
    color: var(--muted);
    rotate: 12deg;
  }
  .callout-style--notebook .callout-icon .decor-svg {
    width: 26px;
    height: 44px;
  }
  .page-live .callout-style--notebook h3 {
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--speaker-color, var(--subject));
  }
  .page-live .callout-style--notebook p {
    line-height: 28px;
  }
  .page-live .callout--mascot.callout-style--notebook.callout--short p {
    font-family: var(--font-hand, var(--body));
    font-weight: 700;
    font-size: max(var(--hand-min, 1.5rem), 1.55rem);
    line-height: 28px;
  }
  /* Speech balloon with the character cut-out (VONK STIP). */
  .page-live .callout.callout-style--balloon {
    margin: 28px 120px 0 0;
    padding: 20px 24px;
    background: white;
    border: 2px solid var(--green);
    border-radius: 28px;
  }
  .callout-style--balloon::after {
    content: '';
    position: absolute;
    right: -12px;
    top: calc(50% - 11px);
    width: 22px;
    height: 22px;
    background: white;
    border: 2px solid var(--green);
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 4px 0 0;
    rotate: 45deg;
  }
  .callout-style--balloon .callout-symbol,
  .callout-style--sticky .callout-symbol {
    display: none;
  }
  .page-live .callout-style--balloon.callout--short p {
    font-family: var(--font-hand, var(--body));
    font-weight: 700;
    font-size: max(var(--hand-min, 1.5rem), 1.6rem);
    line-height: 1.15;
  }
  .page-live .callout-style--balloon .callout-cutout {
    right: -122px;
    bottom: -14px;
  }
  .page-live .callout-style--balloon > div {
    padding-right: 0;
  }
  /* Safety: the sign, never decorated beyond its label. */
  .page-live .callout.callout-style--sign {
    background: var(--sign-tint);
    border-left: 5px solid var(--sign-bar);
    border-radius: 0 6px 6px 0;
  }
  .callout-style--sign .callout-icon {
    color: var(--sign-bar);
  }
  .page-live .callout-style--sign h3 {
    color: var(--sign-ink);
  }
  /* WONDER action: the lab card (accent) with a primary label pill over the top edge and a flask. */
  .page-live .callout.callout-style--lab-card {
    margin-top: 34px;
    padding: 30px 22px 22px;
    background: var(--lime);
    border-radius: 10px;
  }
  .callout-style--lab-card .callout-icon,
  .callout-style--lab-card h3 {
    position: absolute;
    top: -14px;
    background: var(--green);
    color: white;
  }
  .callout-style--lab-card .callout-icon {
    left: 22px;
    padding: 5px 2px 5px 10px;
    border-radius: 20px 0 0 20px;
  }
  .callout-style--lab-card .callout-icon .decor-svg {
    width: 18px;
    height: 18px;
  }
  .page-live .callout-style--lab-card h3 {
    left: 50px;
    margin: 0;
    padding: 5px 14px 5px 4px;
    border-radius: 0 20px 20px 0;
    font-family: var(--body);
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  /* WONDER fact: a white card in the subject colour with a "!" burst breaking out of its corner. */
  .page-live .callout.callout-style--wow-burst {
    margin-top: 36px;
    padding: 26px 22px 22px 62px;
    background: var(--paper);
    border: 2px solid var(--subject);
    border-radius: 12px;
  }
  .callout-style--wow-burst .callout-icon {
    position: absolute;
    left: -14px;
    top: -22px;
    width: 64px;
    height: 64px;
    color: var(--wow);
    rotate: -8deg;
  }
  .callout-style--wow-burst .callout-icon .decor-svg {
    width: 64px;
    height: 64px;
  }
  .callout-style--wow-burst .callout-icon b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: white;
    font: 800 30px/1 var(--display);
  }
  .page-live .callout-style--wow-burst h3 {
    font-family: var(--body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--subject);
  }
  /* WONDER mascot: a tinted card with the cut-out standing on its corner, head out of the card. */
  .page-live .callout.callout-style--cutout-card {
    margin-top: 48px;
    padding: 24px 24px 24px 22px;
    background: color-mix(in srgb, var(--speaker-color, var(--green)) 13%, white);
    border-radius: 14px;
  }
  .page-live .callout-style--cutout-card > div {
    padding-right: 128px;
  }
  .page-live .callout-style--cutout-card .callout-cutout {
    width: 124px;
    height: 168px;
    right: 8px;
    bottom: -8px;
  }
  .page-live .callout-style--cutout-card h3 {
    color: var(--speaker-color, var(--green));
  }
  /* WONDER Bram: a blueprint card. */
  .page-live .callout.callout-style--blueprint {
    background-color: var(--blueprint);
    background-image: linear-gradient(color-mix(in srgb, var(--blueprint-ink) 10%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--blueprint-ink) 10%, transparent) 1px, transparent 1px);
    background-size: 15px 15px;
    border-radius: 8px;
  }
  .page-live .callout-style--blueprint h3 {
    color: var(--blueprint-ink);
  }
  /* WONDER note: subject tint with a top rule and a magnifier. */
  .page-live .callout.callout-style--tint-rule {
    background: var(--subject-tint);
    border-top: 4px solid var(--subject);
    border-radius: 0 0 8px 8px;
  }
  .callout-style--tint-rule .callout-icon {
    color: var(--subject);
  }
  .page-live .callout-style--tint-rule h3 {
    color: var(--subject);
  }
  /* WONDER tip: a small accent tag. */
  .page-live .callout.callout-style--tag {
    display: block;
    max-width: 600px;
    padding: 16px 20px;
    background: color-mix(in srgb, var(--lime) 55%, var(--paper));
    border-radius: 6px 24px 24px 6px;
  }
  .callout-style--tag .callout-symbol {
    display: none;
  }
  .page-live .callout-style--tag h3 {
    font-family: var(--body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  /* VECTOR note: no fill, hairlines above and below, serif text. */
  .page-live .callout.callout-style--hairline {
    display: block;
    padding: 16px 0;
    background: none;
    border: 0;
    border-block: 1px solid var(--ink);
    border-radius: 0;
  }
  .callout-style--hairline .callout-symbol,
  .callout-style--dashed .callout-symbol,
  .callout-style--datapoint .callout-symbol {
    display: none;
  }
  .page-live :is(.callout-style--hairline, .callout-style--datapoint, .callout-style--margin-note) h3 {
    font-family: var(--body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--subject);
  }
  .page-live :is(.callout-style--hairline, .callout-style--margin-note, .callout-style--leaders) p {
    font-family: var(--font-story, var(--body));
    font-size: 18px;
    line-height: 1.55;
  }
  /* VECTOR limit (assumption, boundary): a dashed outline with a solid label tab. Dashed means conditional. */
  .page-live .callout.callout-style--dashed {
    display: block;
    margin-top: 34px;
    padding: 26px 20px 18px;
    background: none;
    border: 1.5px dashed var(--ink);
    border-radius: 0;
  }
  .page-live .callout-style--dashed h3 {
    position: absolute;
    top: -13px;
    left: -1px;
    margin: 0;
    padding: 4px 10px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  /* VECTOR action: graph paper with a subject bar and a plus. */
  .page-live .callout.callout-style--graph-paper {
    align-items: flex-start;
    background-color: color-mix(in srgb, var(--lime) 20%, white);
    background-image: linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
    background-size: 8px 8px;
    border-left: 5px solid var(--subject);
    border-radius: 0;
    font-variant-numeric: tabular-nums;
  }
  .callout-style--graph-paper .callout-icon {
    color: var(--subject);
  }
  .callout-style--graph-paper .callout-icon .decor-svg {
    width: 20px;
    height: 20px;
    margin-top: 4px;
  }
  /* VECTOR fact / data point: a subject rule above, the label as a quiet kicker. */
  .page-live .callout.callout-style--datapoint {
    display: block;
    padding: 18px 0 4px;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .callout-style--datapoint::before {
    content: '';
    display: block;
    width: 120px;
    height: 3px;
    margin-bottom: 14px;
    background: var(--subject);
  }
  /* VECTOR AXI: a margin note without frame, the octahedron and serif italic text. */
  .page-live .callout.callout-style--margin-note {
    max-width: 560px;
    align-items: flex-start;
    padding: 6px 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .callout-style--margin-note .callout-icon {
    color: var(--subject);
  }
  .callout-style--margin-note .callout-icon .decor-svg {
    width: 32px;
    height: 40px;
  }
  .page-live .callout-style--margin-note p {
    font-style: italic;
    color: var(--subject);
  }
  .page-live .callout-style--margin-note img {
    display: none;
  }

  /* --- Big numbers (facts) ----------------------------------------------------------------------------- */
  /* VONK: the value inside a 12-point burst in the subject tint (the burst stretches with the value). */
  .page-live .fact-strip--burst-number > li {
    min-width: 150px;
  }
  .page-live .fact-strip--burst-number strong {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding: 16px 14px;
    margin: 6px 0 8px;
    font-size: 30px;
    line-height: 1;
  }
  .page-live .fact-strip--burst-number strong::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -4px -8px;
    background: var(--paper);
    clip-path: polygon(50% 0, 59% 13%, 75% 7%, 77% 23%, 93% 25%, 87% 41%, 100% 50%, 87% 59%, 93% 75%, 77% 77%, 75% 93%, 59% 87%, 50% 100%, 41% 87%, 25% 93%, 23% 77%, 7% 75%, 13% 59%, 0 50%, 13% 41%, 7% 25%, 23% 23%, 25% 7%, 41% 13%);
  }
  /* WONDER: big numbers on a little ruler. */
  .page-live .fact-strip--ruler > li {
    min-width: 160px;
  }
  .page-live .fact-strip--ruler strong {
    font-size: 38px;
    overflow-wrap: anywhere;
    padding-bottom: 12px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--subject) 60%, transparent) 0 1px, transparent 1px 6px) bottom left / 120px 7px no-repeat;
  }
  .page-live .fact-strip--datapoint {
    background: none;
    padding-inline: 0;
    border-top: 3px solid var(--subject);
    border-radius: 0;
  }
  .page-live .fact-strip--datapoint strong {
    font-size: 42px;
  }

  /* --- Sidebars: glossary and timeline styles ------------------------------------------------------- */
  .sidebar-style--tiles .glossary-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
  }
  .sidebar-style--tiles .glossary-list > div {
    position: relative;
    padding: 14px 14px 12px 34px;
    background: var(--paper);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--subject) 25%, transparent);
  }
  .sidebar-style--tiles .glossary-list > div::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 18px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--subject-tint);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 35%, transparent);
  }
  .sidebar-style--tiles dt {
    font-family: var(--font-title, var(--display));
    font-weight: var(--font-title-weight, 700);
    color: var(--subject);
  }
  .sidebar-style--dictionary dt,
  .sidebar-style--leaders dt {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--subject);
  }
  .sidebar-style--dictionary dt::after,
  .sidebar-style--leaders dt::after {
    content: '';
    flex: 1;
    border-bottom: 2px dotted color-mix(in srgb, var(--subject) 45%, transparent);
  }
  .sidebar-style--leaders dd {
    font-family: var(--font-story, var(--body));
  }
  /* VONK timeline: a dotted path with STIP-stars as stations. */
  .sidebar-style--dotted.sidebar-timeline li::before {
    width: 22px;
    height: 22px;
    left: -31px;
    top: 0;
    background: var(--star-yellow);
    clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 58%, 80% 94%, 50% 72%, 20% 94%, 31% 58%, 2% 36%, 38% 35%);
    border: 0;
    border-radius: 0;
  }
  .sidebar-style--dotted .sidebar-items {
    border-left: 3px dotted var(--subject);
  }
  .sidebar-style--rail .sidebar-items strong {
    font-family: var(--font-numeral, var(--display));
    font-weight: var(--font-numeral-weight, 800);
    font-stretch: var(--font-numeral-stretch, 100%);
    font-size: 19px;
    color: var(--subject);
  }

  /* Children read sidebars at body size (≥ 16 px); headings in the magazine's heading face. */
  .magazine-children .page-live .editorial-sidebar :is(p, li, dd),
  .magazine-children .page-live .editor-note p {
    font-size: 16px;
  }
  .page-live :is(.editorial-sidebar, .editor-note, .secondary-article) h3,
  .page-live .quiz legend,
  .page-live .thought-card h3,
  .page-live .riddle h3 {
    font-family: var(--font-heading, var(--display));
    font-weight: var(--font-heading-weight, 800);
    font-stretch: var(--font-heading-stretch, 100%);
  }
  .page-live .contents-page-number {
    font-family: var(--font-numeral, var(--display));
    font-weight: var(--font-numeral-weight, 800);
    font-stretch: var(--font-numeral-stretch, 100%);
  }
  .page-live .voice-story :is(.composition-sections, .variety-card, .field-notebook-entry) p {
    font-size: 1.12em;
  }

  /* --- Steps, quiz letters, levels ------------------------------------------------------------------- */
  .magazine-children .page-live .steps li {
    font-size: 17px;
  }
  .page-live .steps--play-discs li::before {
    width: 32px;
    height: 32px;
    top: -2px;
    background: var(--play-1);
    color: white;
    font-size: 17px;
  }
  .page-live .steps--play-discs li:nth-child(5n + 2)::before { background: var(--play-2); }
  .page-live .steps--play-discs li:nth-child(5n + 3)::before { background: var(--play-3); }
  .page-live .steps--play-discs li:nth-child(5n + 4)::before { background: var(--play-4); }
  .page-live .steps--play-discs li:nth-child(5n + 5)::before { background: var(--play-5); }
  .page-live .steps--play-discs li {
    padding-left: 46px;
  }
  .page-live .steps--numerals li::before {
    content: counter(steps, decimal-leading-zero);
    background: none;
    color: var(--subject);
    border-radius: 0;
    width: auto;
    font-size: 20px;
  }
  .page-live .quiz--play .quiz-letter {
    color: white;
    border-color: transparent;
    font-family: var(--font-title, var(--display));
    font-weight: var(--font-title-weight, 700);
  }
  .page-live .quiz-letter--a { background: var(--play-2); }
  .page-live .quiz-letter--b { background: var(--play-1); }
  .page-live .quiz-letter--c { background: var(--play-3); }
  .page-live .quiz-letter--d { background: var(--play-4); }
  .level--stip-stars .level-stars {
    display: inline-flex;
    gap: 2px;
    vertical-align: -5px;
  }
  .level--stip-stars .level-stars .decor-svg {
    width: 22px;
    height: 22px;
    --star-fill: var(--star-yellow);
    --star-line: var(--star-ink);
  }
  .level--stip-stars .level-stars .off .decor-svg {
    --star-fill: transparent;
  }

  /* --- Speech: short balloons lettered by hand ----------------------------------------------------- */
  .page-live .speech-text--hand p {
    font-family: var(--font-hand, var(--body));
    font-weight: 700;
    font-size: max(var(--hand-min, 1.5rem), 1.6rem);
    line-height: 1.15;
  }

  /* --- Workspaces: a real drawing pad, writing paper and a film strip (typography.workspace "sheet") ---- */
  .page-live .activity-workspace.workspace-paper--sheet {
    border: 0;
    border-radius: 18px;
    background: color-mix(in srgb, var(--paper) 70%, var(--bg));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--subject) 22%, var(--paper));
  }
  .page-live .workspace-paper--sheet h3 {
    font-family: var(--font-title, var(--display));
    font-weight: var(--font-title-weight, 800);
    font-size: 24px;
    color: var(--subject);
  }
  .page-live .workspace-paper--sheet .workspace-label {
    font-family: var(--font-hand, var(--body));
    font-weight: 700;
    font-size: max(var(--hand-min, 1.5rem), 1.55rem);
    line-height: 1.1;
    color: var(--star-ink);
  }
  .page-live .workspace-paper--sheet:not(.workspace--storyboard) .workspace-panel {
    position: relative;
  }
  .page-live .workspace-paper--sheet.workspace--drawing .workspace-panel > .workspace-label {
    position: absolute;
    top: 10px;
    left: 14px;
    z-index: 1;
    pointer-events: none;
    margin: 0;
  }
  .page-live .workspace-paper--sheet canvas {
    border: 1.5px solid var(--sheet-line);
    border-radius: 6px;
    box-shadow: 0 6px 16px -12px color-mix(in srgb, var(--ink) 60%, transparent);
  }
  /* Two strips of washi tape hold each drawing sheet. */
  .page-live .workspace-paper--sheet.workspace--drawing .workspace-panel::before,
  .page-live .workspace-paper--sheet.workspace--drawing .workspace-panel::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: -6px;
    width: 64px;
    height: 20px;
    background: color-mix(in srgb, var(--tape-1) 85%, transparent);
    pointer-events: none;
  }
  .page-live .workspace-paper--sheet.workspace--drawing .workspace-panel::before {
    left: -14px;
    rotate: -35deg;
  }
  .page-live .workspace-paper--sheet.workspace--drawing .workspace-panel::after {
    right: -14px;
    rotate: 35deg;
    background: color-mix(in srgb, var(--tape-2) 85%, transparent);
  }
  .page-live .workspace-paper--sheet.workspace--drawing .workspace-panel:nth-child(even)::before {
    background: color-mix(in srgb, var(--tape-3) 85%, transparent);
  }
  .page-live .workspace-paper--sheet.workspace--drawing .workspace-panel:nth-child(even)::after {
    background: color-mix(in srgb, var(--tape-4) 85%, transparent);
  }
  .workspace-arrow {
    display: inline-block;
    width: 44px;
    height: 26px;
    margin-left: 8px;
    vertical-align: -12px;
    rotate: 18deg;
    color: var(--tab-magenta);
  }
  .page-live .workspace-paper--sheet .workspace-writing {
    background-color: white;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--sheet-rule) 31px 32px);
    background-attachment: local;
    background-position: 0 12px;
    border: 1.5px solid var(--sheet-line);
    line-height: 32px;
    padding: 12px 16px;
    font-size: 18px;
  }
  /* Storyboard: a film strip with perforations above and below the frames. */
  .page-live .workspace-paper--sheet.workspace--storyboard .workspace-panels {
    padding: 26px 16px;
    border-radius: 6px;
    background:
      radial-gradient(circle, transparent 0, transparent 0) 0 0,
      repeating-linear-gradient(90deg, var(--paper) 0 7px, transparent 7px 16px) 6px 8px / 100% 7px no-repeat,
      repeating-linear-gradient(90deg, var(--paper) 0 7px, transparent 7px 16px) 6px calc(100% - 8px) / 100% 7px no-repeat,
      var(--film);
  }
  .page-live .workspace-paper--sheet.workspace--storyboard .workspace-panel > .workspace-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
  }
  .page-live .workspace-paper--sheet.workspace--storyboard .workspace-panel {
    counter-increment: frame;
  }
  .page-live .workspace-paper--sheet.workspace--storyboard .workspace-panels {
    counter-reset: frame;
  }
  .page-live .workspace-paper--sheet.workspace--storyboard .workspace-panel > .workspace-label::before {
    content: counter(frame);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--star-ink);
    color: white;
    font: 700 15px/1 var(--font-title, var(--body));
  }
  .page-live .workspace-paper--sheet.workspace--storyboard canvas {
    border-radius: 2px;
    border-color: transparent;
  }

  /* --- Photo notes at the point (annotations "hand") ---------------------------------------------- */
  .photo-note {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    width: max-content;
    max-width: 38%;
    pointer-events: none;
  }
  .photo-note--right { margin-left: 18px; }
  .photo-note--left { margin-left: -18px; translate: -100% 0; flex-direction: row-reverse; }
  .photo-note--below { margin-top: 16px; }
  .photo-note--above { margin-top: -16px; translate: 0 -100%; align-items: flex-end; }
  .photo-note--left.photo-note--above { translate: -100% -100%; }
  .photo-note-arrow {
    flex: none;
    width: 40px;
    height: 25px;
    margin-top: -8px;
    color: white;
    filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--ink) 70%, transparent));
    rotate: 200deg;
  }
  .photo-note--left .photo-note-arrow { scale: -1 1; rotate: -200deg; }
  .photo-note--above .photo-note-arrow { margin: 0 0 -8px; rotate: 160deg; }
  .photo-note--left.photo-note--above .photo-note-arrow { rotate: -160deg; }
  .photo-note-text {
    padding: 4px 10px 6px;
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-hand, var(--body));
    font-weight: 700;
    font-size: max(var(--hand-min, 1.5rem), 1.45rem);
    line-height: 1.05;
    box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--ink) 55%, transparent);
  }
  .photo-note-text b {
    color: var(--subject);
  }
  .photo-note--long .photo-note-text {
    font-family: var(--body);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.35;
  }
  @media (min-width: 541px) {
    .photo-point-notes--hand {
      position: absolute !important;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }
  }
  @media (max-width: 540px) {
    .photo-note {
      display: none;
    }
  }

  /* --- Lees & doe cover: the rendered page 1 with hotspots, and "In dit nummer" ------------------------- */
  .cover-rendered {
    background: var(--paper);
  }
  .cover-print {
    position: relative;
    margin: 0;
    container-type: inline-size;
    background: var(--cover-dominant, var(--green));
  }
  .cover-print-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 210 / 297;
  }
  .cover-hotspots {
    position: absolute;
    inset: 0;
  }
  .cover-hotspot {
    position: absolute;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: box-shadow 0.15s;
  }
  .cover-hotspot:hover {
    box-shadow: 0 0 0 3px color-mix(in srgb, white 80%, transparent), 0 0 0 6px color-mix(in srgb, var(--ink) 35%, transparent);
  }
  .cover-hotspot:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--ink);
  }
  @container (max-width: 539.98px) {
    .cover-hotspots {
      display: none;
    }
  }
  .cover-contents {
    padding: 24px 30px 30px;
    border-bottom: 1px solid var(--line);
  }
  .cover-contents-heading {
    margin: 0 0 8px;
    color: var(--muted);
  }
  .cover-contents-intro {
    margin: 0 0 16px;
    font-family: var(--font-deck, var(--body));
    font-weight: var(--font-deck-weight, 500);
    font-style: var(--font-deck-style, normal);
    font-size: 20px;
    line-height: 1.4;
  }
  .cover-contents ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cover-contents button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px 10px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    text-align: left;
    color: var(--ink);
  }
  .cover-contents button:hover {
    border-color: var(--green);
  }
  .cover-contents-page {
    display: grid;
    place-items: center;
    align-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--on-accent);
    font-family: var(--font-numeral, var(--display));
    font-weight: var(--font-numeral-weight, 800);
    font-stretch: var(--font-numeral-stretch, 100%);
    font-size: 21px;
    line-height: 0.9;
  }
  .cover-contents-page small {
    font: 700 10px/1.1 var(--body);
    letter-spacing: 0.02em;
  }
  .cover-contents-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .cover-contents-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .cover-contents-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  /* VONK: flower discs on sticker cards in the play colours. */
  .cover-contents--disc-flower .cover-contents-page {
    background: var(--star-yellow);
    color: var(--star-ink);
    border-radius: 0;
    clip-path: polygon(50% 0, 61% 12%, 78% 9%, 79% 26%, 95% 34%, 87% 50%, 95% 66%, 79% 74%, 78% 91%, 61% 88%, 50% 100%, 39% 88%, 22% 91%, 21% 74%, 5% 66%, 13% 50%, 5% 34%, 21% 26%, 22% 9%, 39% 12%);
  }
  .cover-contents--stickers li:nth-child(4n + 1) button { background: var(--play-1); }
  .cover-contents--stickers li:nth-child(4n + 2) button { background: var(--play-2); }
  .cover-contents--stickers li:nth-child(4n + 3) button { background: var(--play-3); }
  .cover-contents--stickers li:nth-child(4n + 4) button { background: var(--play-4); }
  .cover-contents--stickers button {
    border: 0;
    color: white;
    border-radius: 16px;
  }
  .cover-contents--stickers .cover-contents-label {
    color: white;
    opacity: 0.92;
  }
  .cover-contents--stickers .cover-contents-title {
    font-family: var(--font-title, var(--body));
    font-weight: 600;
  }
  /* VECTOR: numerals and hairlines, no discs. */
  .cover-contents--numbers ol {
    gap: 0 24px;
  }
  .cover-contents--numbers button {
    align-items: flex-start;
    border: 0;
    border-top: 1px solid var(--lime);
    border-radius: 0;
    padding: 12px 0;
  }
  .cover-contents--numbers .cover-contents-page {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--subject, var(--green));
    font-size: 28px;
  }
  .cover-contents--numbers .cover-contents-title {
    font-family: var(--font-story, var(--body));
    font-weight: 400;
    font-size: 18px;
  }
  .cover-contents-deck {
    margin: 18px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--muted);
  }

  /* --- Decor slots (manifest pages[i].decor; aria-hidden) --------------------------------------------- */
  /* Decor sits under the page content (its own stacking layer), so text always stays on top. */
  .page-inner {
    position: relative;
    isolation: isolate;
  }
  .page-decor {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .decor {
    position: absolute;
    display: block;
    color: var(--subject);
  }
  .decor .decor-svg,
  .decor img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Positioned slots keep clear of the text: the running head ends at about 66 px, the header reserves room. */
  .has-corner-decor > .article-header {
    padding-right: 96px;
  }
  .decor-slot--header-corner { top: calc(74px + var(--decor-index, 0) * 60px); right: 22px; width: 70px; height: 56px; }
  .decor-slot--after-title { top: calc(140px + var(--decor-index, 0) * 56px); right: 24px; width: 64px; height: 48px; }
  .decor-slot--image-corner { top: 70px; left: 6px; width: 44px; height: 38px; }
  .decor-slot--outer-margin { top: calc(30% + var(--decor-index, 0) * 140px); right: 2px; width: 34px; height: 118px; }
  /* Column-end and page-foot decor follows the article in the flow (right-aligned, above the page footer). */
  .page-decor-flow {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 18px;
    margin: 18px 4px -8px;
    pointer-events: none;
  }
  .page-decor-flow .decor {
    position: relative;
    width: 72px;
    height: 60px;
  }
  .page-decor-flow .decor--mascotPeek {
    width: 92px;
    height: 112px;
    margin-bottom: -22px;
  }
  .page-decor-flow .decor-slot--contents-route {
    flex: 1;
    max-width: 520px;
    height: 46px;
    margin-right: auto;
    color: var(--sun-rays);
  }
  .page-decor-flow .decor--rainbow {
    width: 120px;
    height: 64px;
  }
  .decor-slot--page-corners { inset: 6px; width: auto; height: auto; }
  .decor-slot--page-corners .decor-svg { display: none; }
  .decor-slot--page-corners::before,
  .decor-slot--page-corners::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    opacity: 0.5;
  }
  .decor-slot--page-corners::before { top: 0; left: 0; }
  .decor-slot--page-corners::after { right: 0; bottom: 0; }
  .decor--rainbow { width: 110px; height: 60px; }
  .decor--sun { width: 64px; height: 64px; }
  .page-decor .decor--mascotPeek { width: 86px; height: 110px; right: -14px; }
  .decor--sparkle { color: var(--sparkle); width: 34px; height: 34px; }
  .decor--confetti { width: 80px; height: 40px; }
  .decor--graphPaperCorner { color: var(--grid); width: 72px; height: 72px; }
  .decor--rulerTicks { color: color-mix(in srgb, var(--subject) 60%, transparent); width: 120px; height: 14px; }
  .decor--marker,
  .decor--filmStrip,
  .decor--hairline {
    display: none;
  }
  @media (max-width: 540px) {
    .has-corner-decor > .article-header {
      padding-right: 52px;
    }
    .decor-slot--header-corner,
    .decor-slot--after-title {
      width: 44px;
      height: 38px;
      right: 8px;
    }
    .decor-slot--outer-margin {
      display: none;
    }
  }
  @media (max-width: 379.98px) {
    .page-decor,
    .page-decor-flow {
      display: none;
    }
    .has-corner-decor > .article-header {
      padding-right: 0;
    }
  }
}