/* ==========================================================================
   LAYOUT — shells, bands and the grids that carry editorial rhythm
   Bands are horizontal colour territories; shells constrain measure inside.
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--layout-content);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.shell--wide   { max-width: var(--layout-wide); }
.shell--narrow { max-width: calc(var(--layout-measure) + 2 * var(--layout-gutter)); }

.band { padding-block: var(--space-xl); }

.band--hero { padding-block: var(--space-lg) var(--space-xl); }

/* --- Colour territories -------------------------------------------------
   Never all five palette colours on one screen: each band takes one ground,
   and the neutrals do most of the work in between. */
.band--jade   { background: var(--color-jade); color: var(--color-ivory); }
.band--plum   { background: var(--color-plum); color: var(--color-ivory); }
.band--blush  { background: var(--color-blush); }
.band--letter { padding-block: 0; }
.band--rare   { padding-block: var(--space-lg); }

.band--reflective {
  padding-block: var(--space-2xl);
  border-block: 1px solid var(--color-rule);
}

/* Substantial silence after the article ending, so the emotional close stays the
   close before navigation begins. */
.band--related { padding-block: var(--space-3xl) var(--space-xl); }

@media (min-width: 48rem) {
  .band--related { padding-block: var(--space-4xl) var(--space-2xl); }
}

/* One column on the reading measure: a list to continue with, not a grid to
   browse. Titles invite; a gallery of images competes with the ending. `.trio`
   keeps its own behaviour everywhere else. */
.band--related .trio {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: var(--layout-measure);
}

/* A band recolours the cards that sit on its ground - but never reaches into a
   card that paints its own. `.card--solid` is its own colour territory and
   states all of its own ink. */
.band--plum .card:not(.card--solid) .card__title,
.band--plum .card:not(.card--solid) .card__link { color: var(--color-ivory); }

.band--plum .card--quiet { border-bottom-color: rgb(var(--color-ivory-rgb) / 0.2); }
.band--plum .card:not(.card--solid) .card__section { color: var(--color-orchid-light); }
.band--plum .card:not(.card--solid) .card__meta { color: var(--color-orchid-light); }

.band--jade .placeholder { border-color: rgb(var(--color-ivory-rgb) / 0.25); }

/* Coral is lighter against blush than against ivory, so the link affordance
   steps down a shade rather than losing contrast. */
.band--blush .link-arrow { color: var(--color-coral-on-blush); }

/* --------------------------------------------------------------------------
   FEATURED GRID — one wide lead, then a stacked pair.
   The rhythm comes from changing scale, not from four identical cards.
   -------------------------------------------------------------------------- */
.featured-grid { display: grid; gap: var(--space-xl); }

.featured-grid__lead { padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }

.featured-grid__pair { display: grid; gap: var(--space-xl); }

@media (min-width: 48rem) {
  .featured-grid__pair { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}

/* --------------------------------------------------------------------------
   VALE DAVVERO? — evidence panel with its legend alongside
   -------------------------------------------------------------------------- */
.vd-grid { display: grid; gap: var(--space-xl); }

@media (min-width: 62rem) {
  .vd-grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   SERIE — "Nessuno me l'aveva detto": one solid block plus a quiet run
   -------------------------------------------------------------------------- */
.serie-grid { display: grid; gap: var(--space-xl); }

.serie-grid__list { display: grid; gap: 0; align-content: start; }

.serie-grid__list .hand { margin-top: var(--space-md); }

@media (min-width: 56rem) {
  .serie-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   TRIO — three abreast on desktop, one column on mobile
   -------------------------------------------------------------------------- */
.trio { display: grid; gap: var(--space-xl); }

@media (min-width: 48rem) {
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
}

/* --------------------------------------------------------------------------
   REFLECTIVE — the personal moment: voice leads, headline follows
   -------------------------------------------------------------------------- */
.band--reflective .format-badge { margin-bottom: var(--space-sm); }

.reflective__title {
  font-size: var(--text-3xl);
  line-height: var(--leading-display);
  margin-top: var(--space-md);
}

.reflective__title a { text-decoration: none; }

.reflective__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-decoration-color: var(--color-orchid-ink);
}

.reflective__standfirst {
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-plum-soft);
}

.reflective__cta { margin-top: var(--space-md); }

/* --------------------------------------------------------------------------
   ARTICLE
   -------------------------------------------------------------------------- */
.article__header { padding-block: var(--space-xl) var(--space-lg); }

.article__header .format-badge { margin-bottom: var(--space-sm); }

.article__section {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-jade);
  margin-bottom: var(--space-2xs);
}

.article__title {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.018em;
}

.article__standfirst {
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-plum-soft);
  max-width: 38ch;
}

.byline {
  margin-top: var(--space-md);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-2xs);
  color: var(--color-plum-soft);
}

.byline__author { font-weight: 700; color: var(--color-plum); }

.article__hero { margin-block: var(--space-sm) var(--space-xl); }

.article__evidence { margin-top: var(--space-2xl); }

/* --- Long-form reading -------------------------------------------------
   The measure, the leading and the minimum size are the accessibility
   commitment: elegant is never allowed to win over comfortable here. */
.prose {
  max-width: var(--layout-measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.prose > * + * { margin-top: var(--space-md); }

.prose h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin-top: var(--space-xl);
}

.prose h2 + p { margin-top: var(--space-sm); }

.prose ul { display: grid; gap: var(--space-2xs); }

.prose ul li {
  position: relative;
  padding-left: 1.35rem;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.7em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-coral);
}

.prose .pull-quote { margin-inline: 0; }

.prose .hand { color: var(--color-coral-ink); }

/* Pull the pull-quote and the aside slightly out of the measure on wide
   screens, so the reading column keeps its rhythm but the voice stands out. */
@media (min-width: 62rem) {
  /* The plum-ground quote hangs into the margin; the plain one sits on the page's
     own ivory and stays flush with the reading column. */
  .prose .pull-quote:not(.pull-quote--plain) {
    margin-inline: calc(-1 * var(--space-lg)) 0;
  }
  .prose .hand { margin-left: calc(-1 * var(--space-sm)); }
}

/* --------------------------------------------------------------------------
   SECTION LANDING (stub pages, so navigation can be judged during review)
   -------------------------------------------------------------------------- */
.band--section-intro { padding-block: var(--space-2xl) 0; }

.band--section-intro .section-head__title {
  font-size: var(--text-4xl);
  letter-spacing: -0.018em;
}

/* --------------------------------------------------------------------------
   PAGINATION — the archive's only new furniture.
   Built from the existing link-arrow: prev is the same component mirrored, so
   there is no second arrow glyph and no second treatment to keep in step.
   Three columns rather than space-between, so the status stays centred whether
   one link is present or both.
   -------------------------------------------------------------------------- */
.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}

.pagination__prev   { grid-column: 1; justify-self: start; }
.pagination__status { grid-column: 2; }
.pagination__next   { grid-column: 3; justify-self: end; }

/* Same component, pointing the other way: the arrow moves ahead of the words and
   the hover nudge follows it, so it still travels in the direction of travel. */
.pagination__prev { flex-direction: row-reverse; }
.pagination__prev::after { transform: scaleX(-1); }
.pagination__prev:hover::after { transform: scaleX(-1) translateX(0.25em); }

.pagination__status {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-plum-soft);
}

.section-empty {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-plum-soft);
}

.article__sources { margin-top: var(--space-lg); }

/* ==========================================================================
   SYSTEM REFERENCE PAGE
   Specimen layout only: it must never define a brand value of its own, or the
   reference could disagree with the site it documents.
   ========================================================================== */
.spec {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}

.spec__name { font-size: var(--text-lg); }

.spec__note {
  margin-top: var(--space-3xs);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-plum-soft);
  max-width: 34ch;
}

.spec__stack { display: grid; gap: var(--space-md); align-items: start; }

.spec__stack--dark {
  padding: var(--space-md);
  background: var(--color-plum);
}

.spec__quiet-run { display: grid; }

@media (min-width: 56rem) {
  .spec {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

/* --- Swatches ----------------------------------------------------------- */
.swatches {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin-bottom: var(--space-xl);
}

.swatch__chip {
  height: 5rem;
  border: 1px solid var(--color-rule);
  margin-bottom: var(--space-2xs);
}

.swatch__name {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.swatch__hex {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  color: var(--color-plum-soft);
}

.swatch__role {
  margin-top: var(--space-3xs);
  font-size: var(--text-2xs);
  line-height: 1.45;
  color: var(--color-plum-soft);
}

.hierarchy { display: grid; gap: var(--space-2xs); counter-reset: h; }

.hierarchy li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  counter-increment: h;
}

.hierarchy li::before {
  content: counter(h);
  position: absolute;
  left: 0;
  top: 0.15em;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-plum);
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-size: var(--text-3xs);
  font-weight: 700;
}

.note {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-plum-soft);
  max-width: 62ch;
}

.collision-demo { margin-bottom: var(--space-sm); }

/* --- Voice specimens ---------------------------------------------------- */
.voice-sample--sans {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 46ch;
}

.voice-sample--serif { font-size: var(--text-base); max-width: 46ch; }

.voice-sample--display {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: var(--leading-display);
}

.voice-sample--display em { font-style: italic; color: var(--color-coral-ink); }

/* --- Format and evidence tables ---------------------------------------- */
.format-list,
.evidence-states { display: grid; gap: var(--space-md); }

.format-list__row,
.evidence-states__row {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
  justify-items: start;
}

.format-list__promise,
.evidence-states__row p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-plum-soft);
}

@media (min-width: 48rem) {
  .format-list__row,
  .evidence-states__row {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: baseline;
  }
}

/* --- Ratio grid -------------------------------------------------------- */
.ratio-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: start;
}

.stub__back { margin-top: var(--space-lg); }

/* --------------------------------------------------------------------------
   LONG-FORM EDITORIAL DEVICES
   The written voice uses short lines as punctuation. These treatments give each
   device weight without changing what the author wrote.
   -------------------------------------------------------------------------- */

/* A short line standing alone as a punch. Slightly larger than body, tighter
   leading, and more air around it than a normal paragraph gets. */
.prose .statement {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

.prose .statement + .statement { margin-top: var(--space-sm); }

/* The isolated beat: one line, flush with the reading column, carrying its own
   silence. No rule and no indent - a graphic device explained the joke instead
   of letting it land, so scale and whitespace do the work. */
.prose .beat {
  margin-block: var(--space-2xl);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
}

.prose .beat strong { font-weight: 600; }

/* Inner voice: the author thinking, not speaking. Stays in the serif so the
   handwriting is reserved for the parenthetical asides. */
.prose .voice {
  color: var(--color-plum-soft);
  font-size: var(--text-lg);
  line-height: 1.45;
  padding-left: var(--space-md);
}

/* The run of questions near the end: thoughts accumulating, not a checklist.
   One device, not six paragraphs, and deliberately not a list of rules - seven
   hairlines read as an accordion or a form.

   Scale follows the progression in the questions rather than being assigned for
   visual interest: immediate state -> wellbeing -> preference -> boundaries ->
   long-term agency -> identity. The irregularity comes from RHYTHM: the wellbeing
   and preference questions arrive almost on top of each other because they are
   the same kind of question, a real pause opens before the one line that is a
   decision, and the identity question gets the largest silence of all before
   landing back flush left at full weight.

   Indents are off-round percentages of the reading column so the eye cannot read
   a pattern in them, and so they scale with the measure instead of pushing text
   out of it. */
.question-run {
  /* Generous air after the sequence, so it lands rather than running straight on. */
  margin: var(--space-2xl) 0 var(--space-3xl);
  display: grid;
  gap: 0;
}

.question-run__item {
  margin: 0;
  padding-block: 0;
  border: 0;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

/* immediate state */
.question-run__item:nth-child(1) { font-size: var(--text-lg); }
/* wellbeing - comes quickly after */
.question-run__item:nth-child(2) { font-size: var(--text-xl); margin: var(--space-sm) 0 0 7%; }
/* preference - interrupts, almost on top of the one before */
.question-run__item:nth-child(3) { font-size: var(--text-lg); margin: var(--space-xs) 0 0 2.5%; }
/* boundaries - a pause first, and the passage's one accent */
.question-run__item:nth-child(4) {
  font-size: var(--text-xl);
  margin: var(--space-xl) 0 0 10%;
  color: var(--color-coral-ink);
}
/* long-term agency - follows on from the decision */
.question-run__item:nth-child(5) { font-size: var(--text-lg); margin: var(--space-md) 0 0 5.5%; }
/* identity - strongest, plum, flush left, with the most air of all */
.question-run__item:nth-child(6) { font-size: var(--text-2xl); margin-top: var(--space-2xl); }

/* The prose owns its vertical rhythm, so these devices opt out of the blanket
   sibling margin where they set their own. */
.prose > .beat + *,
.prose > .question-run + * { margin-top: var(--space-md); }