@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400..700;1,400..700&family=Inter+Tight:wght@400..700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* Munari — the book page, the cover, the series, the cut-out, the method. Values come from tokens.css. */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-serif); }

/* ---------- Page: a book page, one column on a 30px baseline ---------- */
.pg-page {
  --fs-body: 20px; --lh: var(--baseline);
  container-type: inline-size; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh); font-weight: 450;
  font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1; font-variant-numeric: oldstyle-nums proportional-nums;
  font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  hanging-punctuation: first allow-end last;
}
.pg-page *, .pg-page *::before, .pg-page *::after { box-sizing: border-box; }
.pg-page__inner { display: flow-root; max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--space-3) var(--space-7); }
.pg-page__inner > * { max-width: var(--measure); margin-inline: auto; }
.pg-page__inner > .pg-wide { max-width: none; }
.pg-page figure { margin-inline: 0; }
.pg-page__inner > figure:not(.pg-wide) { margin-inline: auto; }
@container (min-width: 60rem) { .pg-page__inner { padding-inline: var(--space-5); } }

/* text: book paragraphs — indented, no space between, justified and hyphenated when there is room */
.pg-page__inner > p, .pg-spread__page > p {
  margin-block: 0; orphans: 2; widows: 2; text-wrap: pretty;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 2;
}
.pg-page__inner > p + p, .pg-spread__page > p + p { text-indent: 1.5em; }
.pg-page__inner > .pg-runhead + p, .pg-spread__page > .pg-runhead + p { text-indent: 0; }
@container (min-width: 30rem) {
  .pg-page__inner > p, .pg-spread__page > p { text-align: justify; text-justify: inter-word; }
}
.pg-page h2 { font-size: 17px; line-height: var(--lh); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: lining-nums; margin-block: calc(var(--lh) * 2) calc(var(--lh) / 2); }
.pg-page h3 { font-size: var(--fs-body); line-height: var(--lh); font-weight: 450; font-style: italic; margin-block: var(--lh) 0; }
.pg-page em, .pg-page i { font-style: italic; }
.pg-page strong, .pg-page b { font-weight: 700; }
.pg-page a { color: var(--link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.pg-page a:focus-visible, .pg-page button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pg-page__inner > ul, .pg-page__inner > ol { margin-block: calc(var(--lh) / 2); padding-left: 1.5em; }
.pg-page__inner > ul { list-style: none; }
.pg-page__inner > ul > li::before { content: "–"; position: absolute; margin-left: -1.5em; }
.pg-page__inner > blockquote:not([class]) { margin-block: calc(var(--lh) / 2); padding-left: 1.5em; font-style: italic; }
.pg-page code { font-family: var(--font-mono); font-size: .8em; font-variant-numeric: normal; }
.pg-page pre { margin-block: calc(var(--lh) / 2) var(--lh); padding: var(--space-3); background: var(--paper-2); overflow-x: auto; font-family: var(--font-mono); font-size: 15px; line-height: 22px; font-variant-numeric: normal; tab-size: 2; }
.pg-page pre code { font-size: inherit; }

/* ---------- Running head ---------- */
.pg-runhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-block: 0 var(--lh) !important; font-size: 17px; font-style: italic; }
.pg-runhead__folio, .pg-label { font: 700 12px/15px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* ---------- Title: the cover ---------- */
.pg-title { margin-block: 0 var(--space-7); }
.pg-title__top { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.pg-title__no { font: 700 40px/45px var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pg-title__h { margin: 0; font: 700 40px/45px var(--font-sans); letter-spacing: -.015em; text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; }
.pg-title__meta { margin-top: var(--lh); }
.pg-title__kicker { margin: 0 0 calc(var(--lh) / 2); }
.pg-title__deck { margin: 0; font-size: 22px; line-height: var(--lh); font-style: italic; max-width: 26em; text-wrap: pretty; }
.pg-title__byline { margin: calc(var(--lh) / 2) 0 0; font: 400 15px/22px var(--font-sans); }
.pg-title__band { margin-top: var(--space-6); }
@container (min-width: 44rem) {
  .pg-title__top { grid-template-columns: 2fr 3fr; gap: var(--spread-gap); }
  .pg-title__meta { grid-column: 2; }
}
.pg-title--band { padding-bottom: 0; }

/* ---------- Spread: figure page and text page ---------- */
.pg-spread { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-block: var(--space-6); }
.pg-spread__page { min-width: 0; }
.pg-spread__page > .pg-figure { margin-top: 0; }
@container (min-width: 60rem) {
  .pg-spread { grid-template-columns: 1fr 1fr; gap: var(--spread-gap); }
  .pg-spread__page > .pg-runhead { margin-bottom: var(--lh) !important; }
}

/* ---------- Figure ---------- */
.pg-figure { margin-block: var(--space-5); }
.pg-figure__art { display: grid; place-items: center; }
.pg-figure__art > svg, .pg-figure__art > img, .pg-figure__art > canvas { display: block; max-width: 100%; height: auto; }
.pg-figure--field .pg-figure__art { padding: var(--space-5) var(--space-4); }
.pg-figure--rosso .pg-figure__art { background: var(--rosso); color: var(--on-field); }
.pg-figure--giallo .pg-figure__art { background: var(--giallo); color: var(--on-field); }
.pg-figure--verde .pg-figure__art { background: var(--verde); color: var(--on-field); }
.pg-figure--rosa .pg-figure__art { background: var(--rosa); color: var(--on-field); }
.pg-figure figcaption { margin-top: var(--space-2); font-size: 16px; line-height: 22px; font-style: italic; max-width: 32em; text-wrap: pretty; }
.pg-figure figcaption .pg-label { margin-right: .6em; }

/* ---------- Variations: one rule, many results ---------- */
.pg-variations { margin-block: var(--space-5); }
.pg-variations__grid { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: var(--space-1); }
.pg-variations__cell { aspect-ratio: 1; background: var(--paper); }
.pg-variations__cell canvas { display: block; width: 100%; height: 100%; }
.pg-variations__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-top: var(--space-2); }
.pg-variations__foot figcaption .pg-label { margin-right: .6em; }
.pg-variations__foot figcaption { margin: 0; font-size: 16px; line-height: 22px; font-style: italic; max-width: 32em; }
@container (max-width: 40rem) { .pg-variations__grid { grid-template-columns: repeat(var(--cols-narrow, 4), minmax(0, 1fr)); } }
.pg-button { font: 700 12px/15px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: var(--radius-0); background: transparent; color: var(--ink); cursor: pointer; }
.pg-button:hover { background: var(--ink); color: var(--paper); }

/* ---------- Cutout: the die-cut hole ---------- */
.pg-cutout { display: grid; margin-block: var(--space-6); min-height: var(--h, 32rem); }
.pg-cutout > * { grid-area: 1 / 1; min-width: 0; }
.pg-cutout__behind, .pg-cutout__front { display: flex; flex-direction: column; justify-content: var(--justify, flex-end); padding: var(--space-5) var(--space-4); color: var(--on-field); font-size: 17px; line-height: 22px; font-family: var(--font-sans); }
.pg-cutout__front {
  -webkit-mask: radial-gradient(circle at var(--x, 50%) var(--y, 40%), transparent var(--r, 90px), #000 calc(var(--r, 90px) + .5px));
          mask: radial-gradient(circle at var(--x, 50%) var(--y, 40%), transparent var(--r, 90px), #000 calc(var(--r, 90px) + .5px));
}
.pg-cutout [data-tone="rosso"] { background: var(--rosso); }
.pg-cutout [data-tone="giallo"] { background: var(--giallo); }
.pg-cutout [data-tone="verde"] { background: var(--verde); }
.pg-cutout [data-tone="rosa"] { background: var(--rosa); }
.pg-cutout [data-tone="paper"] { background: var(--paper-2); color: var(--ink); }
.pg-cutout__front p, .pg-cutout__behind p { margin: 0 0 .4em; max-width: 18em; }
.pg-cutout__behind { position: relative; }
.pg-cutout__peek { position: absolute; left: var(--x, 50%); top: var(--y, 40%); width: calc(var(--r0, 90px) * 1.5); transform: translate(-50%, -50%); text-align: center; }
.pg-cutout__peek p { max-width: none; }

/* ---------- Method: from problem to solution ---------- */
.pg-method { margin-block: var(--space-5); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-4) var(--space-4); counter-reset: step; }
.pg-method__step { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; column-gap: var(--space-3); align-items: start; }
.pg-method__glyph { width: 22px; height: 22px; margin-top: 4px; background: var(--ink); }
.pg-method__step:nth-child(3n+1) .pg-method__glyph { border-radius: var(--radius-round); }
.pg-method__step:nth-child(3n+3) .pg-method__glyph { clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.pg-method__step[aria-current="step"] .pg-method__glyph { background: var(--rosso); }
.pg-method__step.is-done .pg-method__glyph { opacity: .35; }
.pg-method__n { font: 700 12px/15px var(--font-sans); letter-spacing: .06em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pg-method__n::before { content: counter(step, decimal-leading-zero); }
.pg-method__step[aria-current="step"] .pg-method__n { color: var(--link); }
.pg-method__t { margin: 2px 0 0; font: 700 17px/22px var(--font-sans); letter-spacing: -.005em; }
.pg-method__d { margin: 4px 0 0; font-size: 16px; line-height: 22px; font-style: italic; }

/* ---------- Field: kinetic, programmed art (WebGL) ---------- */
.pg-field { margin-block: var(--space-5); }
.pg-field__canvas { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 16 / 9); background: var(--paper-2); touch-action: pan-y; }
.pg-field--interactive .pg-field__canvas { cursor: crosshair; }
.pg-field__fallback { display: block; width: 100%; aspect-ratio: var(--ratio, 16 / 9); background: var(--verde) radial-gradient(circle, var(--rosso) 0 7px, transparent 7.5px) 0 0 / 48px 48px; }
.pg-field figcaption { margin-top: var(--space-2); font-size: 16px; line-height: 22px; font-style: italic; max-width: 32em; }
.pg-field figcaption .pg-label { margin-right: .6em; }