/* =========================================================================
   STORY, the chapters (Miguel, 2026-10-15: option G of the story test, kept; js/story.js).
   Blind Barber's layout that evolves as you scroll, with Squarespace's room
   (clients/miramar/docs/story-references.md). Each moment is a chapter: its year cut out of a card
   of its color across the full width (black on the black page, so it reads as a negative; the
   card hugs the year with equal margins), then the moment on black: the title as the statement,
   the two sentences small, and the picture. A small index of the years stays in the first column
   and shows where you are.
   Balanced (Miguel, same day: "the images and elements are all different sizes", the street and
   the cans "too big and not aligned with any part of the text", 2018's photo "considerably bigger
   than the one in 2022"): every picture is five columns wide, photos 3:2 and the drawings at their
   own shape, about as tall; the text takes five columns on the other side, one empty column
   between, and lines up with the picture, by its top or by its bottom. Since 2026-10-26 the client's
   history is three moments (it was 1996, 2018, 2022, 2025), the sides alternating:
     2021  the line on the left, its foot level with the photo's, on the right
     2025  turned around (.moment--flip): the photo on the left, the line on the right, feet level
     2026  the line on the left, its top level with the shelf's (.moment--tops), on the right
   then the closing: the line as a statement and the paragraph about the artists under it.
   Tablets: the same on eight columns. Phones: stacked (the card, the line, the picture).
   Since 2026-10-15 nothing in it moves with the scroll but the index (Miguel: "remove scroll
   animations from history section"): the cards stand open and the parts in place; the year rolls
   and the drawings build once, as they come into view, like every reveal.
   The base module (year, title, body, the shelf, the odometer) is in sections.css.
   ========================================================================= */
.chapters { display: none; }

.story .moment { position: relative; }

/* The year card: a field of the year's color, the year cut out of it filling its width, all of them
   the same size. (It opened out of a pill with the scroll until 2026-10-15: Motion Library.) */
.story .moment .moment__year {
  display: flex; align-items: flex-end; justify-content: center; align-self: stretch;
  margin: 0; padding: 0; border-radius: var(--radius);
  background: var(--yc); color: var(--ink); container-type: inline-size;
}
/* Equal margins around the year (Miguel, 2026-10-15): about .19em of color on every side of the
   ink, in the year's own em so they stay equal at any card size; the card has no height of its
   own, it hugs the year. Measured in Chromium: the ink is 3.93em wide for every year (the
   odometer's slots are as wide as their widest digit), so the size is 100cqw / (3.93 + 2 x .2),
   centered; --yx (on each moment, in the markup) nudges its year's ink to optical center (the
   italic 1's foot, the 6 against the 5); the ink ends .12em above the box's bottom and starts
   .01em above its top. */
.story .moment .moment__year .odo { font-size: 23.09cqw; margin: .19em 0 .068em var(--yx, .05em); }

/* The statement and its two sentences */
.story .moment__title { font-size: var(--t-2); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 var(--s-3); text-wrap: balance; }
.story .moment__body { font-size: var(--t-0); line-height: var(--lh-body); max-width: 34ch; text-wrap: pretty; }

@media (max-width: 1023px) {
  .story .moments { display: flex; flex-direction: column; gap: var(--s-8); }
}
@media (max-width: 639px) {
  .story .moment { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-5); }
  .story .moment__text { order: 1; }
  .story .moment__art { order: 2; margin: 0; }
  .story .moment__art--drawing { align-self: center; width: min(100%, 480px); }
}
/* Tablets: desktop's balance on the eight columns, text and picture four each, sides alternating */
@media (min-width: 640px) and (max-width: 1023px) {
  .story .moment { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .story .moment .moment__year { grid-area: 1 / 1 / 2 / -1; }
  .story .moment > :not(.moment__year) { margin-top: var(--s-5); }
  .story .moment__art { aspect-ratio: 3 / 2; margin-bottom: 0; }
  .story .moment__art--drawing { aspect-ratio: auto; }
  .story .moment__art--drawing .shelf__row { column-gap: 4%; }
  .story .moment .moment__text { grid-area: 2 / 1 / 3 / 5; }
  .story .moment .moment__art { grid-area: 2 / 5 / 3 / -1; }
  .story .moment--flip .moment__art { grid-area: 2 / 1 / 3 / 5; }
  .story .moment--flip .moment__text { grid-area: 2 / 5 / 3 / -1; }
  .story .moment--tops .moment__art { align-self: start; }
  .story .moment:not(.moment--tops) :is(.moment__art, .moment__text) { align-self: end; }
}

@media (min-width: 1024px) {
  /* The index rides in the first column; the chapters use the other eleven */
  .story .story__body {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
    padding: 0 var(--margin);
  }
  .story .moments { grid-area: 1 / 1 / 2 / -1; display: block; padding: 0; }
  .story .moment { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; align-items: start; }
  .story .moment + .moment { margin-top: var(--s-8); }
  .story .moment .moment__year { grid-area: 1 / 2 / 2 / -1; }
  .story .moment__title { font-size: var(--t-3); }

  /* The moment under its card: five columns of text, five of picture, one empty between */
  .story .moment > :not(.moment__year) { margin-top: var(--s-7); }
  .story .moment__art { aspect-ratio: 3 / 2; margin-bottom: 0; }   /* no leftover space under it: the text's foot meets the photo's */
  .story .moment__art--drawing { aspect-ratio: auto; }   /* the shelf at its own shape, about as tall as the photos */
  .story .moment__art--drawing .shelf__row { column-gap: 4%; }   /* scales with the width, so the shelf stays about 3:2, as tall as the photos */
  .story .moment .moment__text { grid-area: 2 / 2 / 3 / 7; }
  .story .moment .moment__art { grid-area: 2 / 8 / 3 / -1; }
  .story .moment--flip .moment__art { grid-area: 2 / 2 / 3 / 7; }
  .story .moment--flip .moment__text { grid-area: 2 / 8 / 3 / -1; }
  /* A drawing (.moment--tops): tops level (the title's caps start .1em into its box); a photo: feet level */
  .story .moment--tops .moment__text { margin-top: calc(var(--s-7) - .1 * var(--t-3)); }
  .story .moment--tops .moment__art { align-self: start; }
  .story .moment:not(.moment--tops) :is(.moment__art, .moment__text) { align-self: end; }
  .story .moment:not(.moment--tops) .moment__body { margin-bottom: -.3em; }   /* the last line's baseline, not its leading, meets the photo's foot */

  /* The index: the years in the first column, staying beside the chapters while they pass;
     the one you're in sits on a pill of its color (black type), which slides to the next year. */
  .story .chapters {
    grid-area: 1 / 1 / 2 / 2; align-self: start; justify-self: start;
    position: sticky; top: calc(50svh - var(--s-6)); z-index: 1;
    display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none;
    --ix: var(--s-4);
  }
  @media (pointer: coarse) { .story .chapters { --ix: var(--s-5); } }   /* a tablet in landscape: 48px to tap */
  .chapters button {
    position: relative; display: flex; align-items: center; height: var(--ix); padding: 0 var(--s-1);
    font: 700 var(--t--1)/1 var(--f-mono); letter-spacing: .06em; color: var(--on-page-dim);
    transition: color .6s var(--ease-out);
  }
  .chapters button:hover { color: var(--on-page); }
  .chapters .is-at button { color: var(--ink); }
  .chapters__pill {
    position: absolute; left: 0; top: 0; width: 100%; height: var(--ix); border-radius: var(--r-pill);
    background: var(--c, var(--cielo)); translate: 0 calc(var(--at, 0) * var(--ix));
    transition: translate .6s var(--ease-out), background-color .6s var(--ease-out);
  }
}
/* 1024 to 1279: the statement a step down (like the section titles), so no title breaks into a word a line */
@media (min-width: 1024px) and (max-width: 1279px) { .story .moment__title { font-size: var(--t-2); } }

/* The closing (the client, 2026-10-26: "Porque más que elaborar cerveza…" and the paragraph about
   the artists; all the "about" copy kept together in the story): the line as a statement in the
   moment titles' type, tight (Miguel, same day: "can the headline be tightened?"), and the
   paragraph at the body size. Two columns from 640px (Miguel: "two columns, instead of one on
   top of each other... each line shorter"), on the chapters' columns: from 1024px the line on
   2–6 like a moment's text, the paragraph on 8–12 like its picture, one empty between; tablets
   four and four. The two first lines start level as they are (ink tops equal from 1280px, within
   2px below). Phones: stacked. One reveal
   as it comes into view, like the section lead. --fl is the line's size: the moment titles' at
   every width (it was a step smaller on phones; Miguel, 2026-10-26: "a different size from others"). */
.story__close { --fl: var(--t-2); margin-top: var(--s-8); padding: 0 var(--margin); }
.story__line { max-width: 22ch; margin: 0 0 var(--s-4); font: 800 var(--fl)/1 var(--f-text); letter-spacing: -.03em; text-wrap: balance; }
.story__more { max-width: 62ch; margin: 0; font-size: var(--t-0); line-height: var(--lh-body); font-weight: 500; text-wrap: pretty; }
.story__close[data-scroll] { opacity: 0; translate: 0 24px; transition: opacity 1.1s var(--ease-out), translate 1.3s var(--ease-out); }
.story__close.is-inview { opacity: 1; translate: 0 0; }
@media (min-width: 640px) {
  .story__close { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .story__line { grid-column: 1 / 5; max-width: none; margin: 0; }
  .story__more { grid-column: 5 / -1; max-width: none; }
}
@media (min-width: 1024px) {
  .story .story__close { --fl: var(--t-3); grid-area: 2 / 2 / 3 / -1; grid-template-columns: repeat(11, minmax(0, 1fr)); padding: 0; }
  .story__line { grid-column: 1 / 6; }
  .story__more { grid-column: 7 / -1; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .story .story__close { --fl: var(--t-2); } }