/* ============================================================
   MANGO COMPOSE — the look of the Story view (see compose.js).

   The numbers are the grammar the three reference pages share:
   · 12 columns, tight gutters (12 → 16px), small page margins (12 → 32px), no max width until 1728px
   · one grotesque, two weights, no bold; hierarchy by size and one grey (#757575 on #1A1A1A)
   · a narrow reading column (6 of 12, centred) under wide headlines
   · big air between text sections (up to 232px), a tight 12–20px seam between photos so they read as a wall
   · photos keep their own shape; full-width beats alternate with pairs
   · motion that is felt more than seen: a short rise, a slow fade, one sticky "curtain" photo
   ============================================================ */
body.in-story {
  --s-font:   "Helvetica Neue", "Neue Haas Grotesk Text", Helvetica, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --s-m:      var(--edge);        /* page margin: the frame's own edge (index.html), so the header, the view bar and the story line up */
  --s-g:      12px;               /* column gutter */
  --s-wall:   12px;               /* seam between photos that follow each other */
  --s-scene:  clamp(72px, 5vw + 52px, 136px);    /* between scenes */
  --s-section: clamp(120px, 9vw + 90px, 232px);  /* before a heading or a statement */
  --s-radius: 8px;
  --page-bg:  var(--paper);       /* the notebook's paper, so switching Note ↔ Story doesn't flash */
  --page-ink: #1a1a1a;
  --page-line: color-mix(in srgb, var(--page-ink) 15%, transparent);   /* hairlines */
  --page-wash: color-mix(in srgb, var(--page-ink) 6%, transparent);    /* where a photo will appear */
  --ease-text: cubic-bezier(.61, 1, .88, 1);     /* AREA 17's text reveal */
  --ease-media: cubic-bezier(.33, 1, .68, 1);    /* AREA 17's image reveal */
  background-color: var(--page-bg);
  color: var(--page-ink);
  transition: background-color .9s var(--ease-media), color .9s var(--ease-media);
}
@media (min-width: 800px)  { body.in-story { --s-wall: 16px; } }
@media (min-width: 900px)  { body.in-story { --s-g: 16px; } }
@media (min-width: 1040px) { body.in-story { --s-wall: 20px; } }
/* a coloured statement in the middle of the screen repaints the page in the note's colour pair */
body.in-story.story-toned { --page-bg: var(--tone-bg); --page-ink: var(--tone-ink); }

/* the story takes the full width under the shared header and view bar, starting at the same height a note's title does */
body.in-story .wrap { max-width: none; padding: 40px var(--s-m) 0; }
@media (max-width: 520px) { body.in-story .wrap { padding-top: 26px; } }

.story { font-family: var(--s-font); font-size: clamp(17px, .3vw + 15.7px, 20px); line-height: 1.45; letter-spacing: -.003em; max-width: 1728px; margin: 0 auto; }
.story *, .story *::before, .story *::after { box-sizing: border-box; }
.story p, .story h1, .story h2, .story h3, .story ol, .story blockquote, .story figure { margin: 0; padding: 0; }
.story a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.story a:hover { text-decoration-thickness: 2px; }
.story strong { font-weight: 500; }
/* quiet text is the ink at 62% (opacity, so it follows the page as it changes colour; a color-mix() of currentColor
   would freeze mid-transition in Chromium). Lines and photo placeholders come from the page colours for the same reason. */
.story .kicker > span, .story figcaption, .story .hero-cap, .story .no, .story .label, .story .toc-t { opacity: .62; }

/* ---- the grid: every scene is a 12-column row ---- */
.story .sc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-g); margin-top: var(--s-scene); }
.story .sc > * { grid-column: 1 / -1; min-width: 0; }

/* ---- type ---- */
.story .display { font-size: clamp(40px, 4.6vw + 22px, 104px); font-weight: 500; line-height: 1.02; letter-spacing: -.032em; text-wrap: balance; max-width: 15ch; padding-bottom: .16em; }   /* at this tight leading the tails of g, p, y hang below the line: keep them inside the title's box */
.story .lede    { font-size: clamp(21px, .9vw + 17px, 32px); line-height: 1.22; letter-spacing: -.012em; text-wrap: pretty; color: inherit; }
.story .head    { font-size: clamp(30px, 2.6vw + 20px, 64px); font-weight: 500; line-height: 1.08; letter-spacing: -.022em; text-wrap: balance; }
.story .big     { font-size: clamp(30px, 3.1vw + 18px, 72px); font-weight: 500; line-height: 1.06; letter-spacing: -.026em; text-wrap: balance; }
.story blockquote { font-size: clamp(24px, 1.1vw + 19px, 36px); font-weight: 500; line-height: 1.18; letter-spacing: -.014em; text-wrap: pretty; }
.story .kicker, .story figcaption, .story .hero-cap, .story .toc { font-size: clamp(13px, .15vw + 12.4px, 15px); line-height: 1.35; letter-spacing: 0; }
.story .col p + p, .story .sp-text p + p { margin-top: 1.1em; }
.story .col p, .story .sp-text p { text-wrap: pretty; }

/* ---- cover ---- */
.story .sc-cover { margin-top: 0; position: relative; z-index: 2; }   /* nothing that follows (the body slides up over the hero) may paint over the cover's type */
.story .kicker { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: clamp(16px, 1.6vw, 28px); }
.story .sc-cover .lede { margin-top: clamp(24px, 2.4vw, 44px); max-width: 30em; }
.story .toc { margin-top: clamp(32px, 3vw, 56px); max-width: 30em; }
.story .toc-t { display: block; margin-bottom: 8px; }
.story .toc ol { list-style: none; border-top: 1px solid var(--page-line); }
.story .toc li { border-bottom: 1px solid var(--page-line); }
.story .toc button { all: unset; cursor: pointer; display: flex; gap: 14px; width: 100%; padding: 10px 0; font-size: clamp(15px, .3vw + 14px, 18px); }
.story .toc button:hover, .story .toc button:focus-visible { text-decoration: underline; text-underline-offset: .18em; }
.story .toc .no { font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .story .sc-cover.split .cv-text { grid-column: 1 / span 6; align-self: end; }
  .story .sc-cover.split .cv-media { grid-column: 7 / span 6; }
  .story .sc-cover.split .cv-media .m { width: min(100%, calc(86svh * var(--ar))); margin-left: auto; }
}
@media (max-width: 899px) { .story .sc-cover.split .cv-media { margin-top: 40px; } }

/* the hero photo pins full-bleed while the note slides up over it */
.story .sc-hero { position: sticky; top: 0; z-index: 0; margin: clamp(40px, 4vw, 64px) calc(-1 * var(--s-m)) 0; height: min(100svh, calc((100vw - 0px) / var(--ar))); overflow: hidden; background: #f2f2f2; }
.story .sc-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* shown whole (the default): the photo at its own shape, as large as the screen allows, centred on the page */
.story .sc-hero:not(.fill) { background: transparent; }
.story .sc-hero:not(.fill) img { object-fit: contain; }
.story .story-body { position: relative; z-index: 1; background-color: var(--page-bg); transition: background-color .9s var(--ease-media); margin: 0 calc(-1 * var(--s-m)); padding: 1px var(--s-m) 0; }
.story .hero-cap { margin-top: 12px; }
.story .sc-cover + .story-body > .sc:first-child { margin-top: var(--s-scene); }

/* ---- words ---- */
.story .sc-text .col, .story .sc-spread .col, .story .sc-list .lc, .story .sc-embed > * { grid-column: 1 / -1; }
@media (min-width: 600px) { .story .sc-text .col, .story .sc-spread .col, .story .sc-list:not(.sc-lists) .lc, .story .sc-embed > * { grid-column: 3 / span 8; } }
@media (min-width: 900px) { .story .sc-text .col, .story .sc-spread .col, .story .sc-list:not(.sc-lists) .lc { grid-column: 4 / span 6; } }

.story .sc-spread { margin-top: var(--s-section); }
.story .sc-spread .head { grid-column: 1 / -1; }
@media (min-width: 900px)  { .story .sc-spread .head { grid-column: 1 / span 9; } }
@media (min-width: 1200px) { .story .sc-spread .head { grid-column: 1 / span 8; } }
.story .sc-spread .col { margin-top: clamp(40px, 4vw, 80px); }
.story .sc-spread + .sc { margin-top: clamp(64px, 6vw, 128px); }

.story .sc-statement { margin-top: var(--s-section); }
.story .sc-statement .big { grid-column: 1 / -1; }
@media (min-width: 900px) { .story .sc-statement .big { grid-column: 1 / span 10; } }
.story .sc-statement.toned { min-height: 56svh; align-content: center; }
.story .sc-statement.closing .big { font-weight: 400; }
.story .sc-statement + .sc { margin-top: var(--s-section); }
/* without motion there is no page repaint, so the coloured statement is a band instead */
.story:not(.moving) .sc-statement.toned { background: var(--tone-bg); color: var(--tone-ink); margin-inline: calc(-1 * var(--s-m)); padding: var(--s-scene) var(--s-m); min-height: 0; }

/* the pull quote sits in the right half with a hanging open-quote (Pentagram) */
.story .sc-quote blockquote { grid-column: 1 / -1; position: relative; }
@media (min-width: 600px)  { .story .sc-quote blockquote { grid-column: 3 / span 9; } }
@media (min-width: 1040px) { .story .sc-quote blockquote { grid-column: 7 / span 6; } }
.story .sc-quote blockquote::before { content: '\201C'; position: absolute; right: 100%; padding-right: .06em; }
.story .sc-quote blockquote::after { content: '\201D'; }

/* lists read as numbered rows on hairlines; labelled lists side by side read as a comparison */
.story .label { font-size: inherit; font-weight: 400; margin-bottom: 10px; }
.story .rows { list-style: none; border-top: 1px solid var(--page-line); }
.story .rows li { display: grid; grid-template-columns: 2.6em 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--page-line); }
.story .rows .no { font-variant-numeric: tabular-nums; font-size: .82em; padding-top: .14em; }
.story .sc-lists { display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 600px) { .story .sc-lists { flex-direction: row; gap: calc(var(--s-g) * 2); } .story .sc-lists .lc { flex: 1; } }
@media (min-width: 1040px) { .story .sc-lists { padding-inline: calc((100% - 11 * var(--s-g)) / 12 + var(--s-g)); } }

/* ---- photos ---- */
.story .m-frame { position: relative; aspect-ratio: var(--ar); overflow: hidden; border-radius: var(--s-radius); background: var(--page-wash); }
.story .m-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story figcaption { margin-top: 10px; max-width: 36em; }
/* photos that follow each other close up into one wall */
.story .is-media + .is-media { margin-top: var(--s-wall); }
.story .sc-full .m { grid-column: 1 / -1; }
.story .sc-bleed { margin-inline: calc(-1 * var(--s-m)); }
.story .sc-bleed .m-frame { border-radius: 0; aspect-ratio: var(--ar); width: min(100%, calc(92svh * var(--ar))); margin-inline: auto; }   /* whole: edge to edge when the photo fits the screen's height; otherwise as wide as it can be, centred, never cropped */
.story .sc-bleed .m.fill .m-frame { aspect-ratio: auto; width: auto; height: min(calc(100vw / var(--ar)), 92svh); }   /* fill (the art director's call): always edge to edge, cropped around its focus point */
.story .sc-bleed figcaption { padding-inline: var(--s-m); }
.story .sc-solo .m { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .story .sc-solo.left .m  { grid-column: 2 / span 6; }
  .story .sc-solo.right .m { grid-column: 6 / span 6; }
}
@media (min-width: 1040px) {
  .story .sc-solo.left .m  { grid-column: 2 / span 5; }
  .story .sc-solo.right .m { grid-column: 7 / span 5; }
}
.story .sc-solo .m-frame { max-height: 88svh; margin-inline: auto; }   /* if its height is capped it narrows; keep it centred in its columns */
/* a row shares one height: each photo takes width in proportion to its shape */
.story .sc-row { display: flex; gap: var(--s-wall); max-width: calc(var(--sum) * 84svh + (var(--n) - 1) * var(--s-wall)); margin-inline: auto; }
.story .sc-row .m { flex: var(--ar) 1 0; min-width: 0; }
@media (max-width: 599px) { .story .sc-row.wide { flex-direction: column; } .story .sc-row.wide .m { flex: none; } }

/* a portrait beside words (AREA 17's media split) */
.story .sc-split { align-items: center; row-gap: 32px; }
.story .sc-split .sp-media .m { width: min(100%, calc(84svh * var(--ar))); }
@media (min-width: 900px) {
  .story .sc-split.left .sp-media  { grid-column: 1 / span 6; grid-row: 1; }
  .story .sc-split.left .sp-text   { grid-column: 8 / span 5; grid-row: 1; }
  .story .sc-split.right .sp-media { grid-column: 7 / span 6; grid-row: 1; }
  .story .sc-split.right .sp-media .m { margin-left: auto; }
  .story .sc-split.right .sp-text  { grid-column: 1 / span 5; grid-row: 1; }
}
@media (min-width: 600px) and (max-width: 899px) { .story .sc-split .sp-text { grid-column: 3 / span 8; } }

/* players from the note page */
.story .sc-embed .prose .embed, .story .sc-embed .prose .mapblock { margin: 0; }
@media (min-width: 900px) { .story .sc-embed > * { grid-column: 3 / span 8; } }

.story .sc-break { height: 1px; background: var(--page-line); margin-top: var(--s-section); }


.story-wait { font-family: var(--s-font); opacity: .55; padding: 30vh 0; text-align: center; }

/* ---- motion: only once the script has started it, so nothing is ever stuck invisible ---- */
.story.moving [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-text) var(--d, 0ms), transform .7s var(--ease-text) var(--d, 0ms); }
.story.moving [data-reveal].in { opacity: 1; transform: none; }
/* photos fade slowly and settle (AREA 17's 1s curve, with Studio Dumbar's scale softened to a 6% settle) */
.story.moving .m[data-reveal] { transform: none; transition: opacity 1s var(--ease-media) var(--d, 0ms); }
.story.moving .m[data-reveal] img { transform: scale(1.06); transition: transform 1.6s var(--ease-media) var(--d, 0ms); }
.story.moving .m[data-reveal].in img { transform: none; }
.story.moving .m.drift img { transition: none; }
/* big words rise one by one from behind their own line */
.story .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .18em; margin: 0 -.02em -.18em; }   /* the mask each word rises from: deep enough for the longest tails (SF Pro, Helvetica Neue) */
.story .w > span { display: inline-block; }
.story.moving [data-reveal]:has(.w) { opacity: 1; transform: none; }
.story.moving [data-reveal] .w > span { transform: translateY(108%); transition: transform .95s var(--ease-text) calc(var(--d, 0ms) + var(--k, 0) * 38ms); }
.story.moving [data-reveal].in .w > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  body.in-story, .story .story-body { transition: none; }
}

/* ---- what the art director adds ---- */
/* a featured upright photo: large and centred; a detail: small and off to one side */
@media (min-width: 600px) {
  .story .sc-solo.center .m { grid-column: 3 / span 8; }
  .story .sc-solo.small.left .m { grid-column: 2 / span 4; }
  .story .sc-solo.small.right .m { grid-column: 8 / span 4; }
}
@media (min-width: 1040px) {
  .story .sc-solo.center .m { grid-column: 4 / span 6; }
  .story .sc-solo.small.left .m { grid-column: 2 / span 3; }
  .story .sc-solo.small.right .m { grid-column: 9 / span 3; }
}
/* a pull quote lifted from the text above it sits closer to it than a quote the writer typed */
.story .sc-text + .sc-quote.pulled, .story .sc-split + .sc-quote.pulled, .story .sc-spread + .sc-quote.pulled { margin-top: clamp(40px, 4vw, 72px); }

/* ---- Frames (a direction's layout, after studying byeverett.com/spaces and /films) ----
   One column of photos in a few fixed shapes: a full-width frame of about 1.7:1 (4:3 on phones), a pair of squares (3:4 when
   both are portraits), a reel; generous corners; a 32px seam; words in the right half, a section's heading on the left. */
.story.frames { --f-gap: 12px; --f-radius: 14px; padding-inline: max(0px, calc(5.5vw - var(--s-m))); }   /* a gallery's margins: about 80px at 1440, the page's own edge on a phone */
@media (min-width: 900px)  { .story.frames { --f-gap: 24px; --f-radius: 24px; } }
@media (min-width: 1280px) { .story.frames { --f-gap: 32px; --f-radius: 32px; } }
.story.frames .m-frame { border-radius: var(--f-radius); }
.story.frames .is-media + .is-media { margin-top: var(--f-gap); }
.story .m.fr .m-frame { aspect-ratio: var(--fr, 1); }
.story .sc-frame .m { grid-column: 1 / -1; }
@media (max-width: 599px) { .story .sc-frame:not(.pano) .m.fr .m-frame { aspect-ratio: 4 / 3; } }
.story .sc-fpair { column-gap: var(--f-gap); row-gap: var(--f-gap); }
.story .sc-fpair .m { grid-column: 1 / -1; }
.story .sc-fpair .m.fr .m-frame { aspect-ratio: 1; }
.story .sc-fpair.tall .m.fr .m-frame { aspect-ratio: 3 / 4; }
@media (min-width: 600px) {
  .story .sc-fpair .m { grid-column: span 6; }
  .story .sc-fpair.single .m { grid-column: 7 / span 6; }   /* on its own, it sits in the right half, over the words */
}
.story .sc-reel .reel { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--f-gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--f-radius); outline-offset: 4px; }
.story .sc-reel .reel::-webkit-scrollbar { display: none; }
.story .sc-reel .m { scroll-snap-align: start; }
.story .sc-reel .m.fr .m-frame { aspect-ratio: 16 / 9; }
.story .sc-reel .reel-nav { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13px; opacity: .7; }
.story .sc-reel .reel-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--page-line); background: transparent; color: inherit; font: inherit; font-size: 16px; cursor: pointer; }
.story .sc-reel .reel-nav button:hover { border-color: currentColor; }
/* words in the right half; a section's heading on the left, level with its words */
@media (min-width: 900px) {
  .story.frames .sc-text .col, .story.frames .sc-list:not(.sc-lists) .lc { grid-column: 7 / span 6; }
  .story.frames .sc-spread:not(.solo-head) .head { grid-column: 1 / span 5; grid-row: 1; font-size: clamp(26px, 1.4vw + 14px, 44px); }
  .story.frames .sc-spread .col { grid-column: 7 / span 6; grid-row: 1; margin-top: 0; }
}

/* ---- 360° photos: the note page's viewer (drag to look around, full screen), full width on their own ---- */
.story .sc-sphere .m { grid-column: 1 / -1; }
.story .sc-sphere .pano { border-radius: var(--s-radius); }
.story.frames .sc-sphere .pano { border-radius: var(--f-radius); }
html.pano-open .story .story-body { z-index: auto; }   /* a viewer opened full screen must cover the page, header included */