/* chain scene: the frame that turns from the drawing into everything else, and the map of the seven steps beside it
   (under it on phones). Layers are stacked in the frame; chain.js sets their opacity, the wipe and the Blender zoom.
   Design review 20.10.2026: the column starts on the left edge of the section text, the heading takes the h2 size, the
   map reads at AA contrast (state by colour, not by fading), the frame casts a penumbra, labels 12 px at least. */
/* desktop: the composition fills the pinned screen under the header and stands in its middle (owner, 20.10: no empty
   band above or below). chain.js picks one of three arrangements by measuring and sets --sw (map / column width),
   --fw and --fh (the frame, 16:9 up to 3:2); the gaps here are the ones chain.js counts with (48 across, 24 down, 24
   above and below) */
.ch { position: absolute; inset: 0; display: grid; grid-template-columns: var(--sw, 340px) var(--fw, 800px); grid-template-areas: "head frame" "map frame";
  column-gap: 48px; row-gap: var(--gy, 24px); align-content: center; align-items: start;
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--header) + 24px) var(--gutter) 24px; }
.ch-head { grid-area: head; min-width: 0; }
.ch-frame { grid-area: frame; }
.ch-map { grid-area: map; min-width: 0; }
/* side by side (wide, low windows): heading, intro and map on the left, the frame on the right, centred on each other */
.ch.is-side { row-gap: 0; }
.ch.is-side .ch-head { align-self: end; }
.ch.is-side .ch-map { align-self: start; margin-top: var(--gy, 24px); }
.ch.is-side .ch-frame { align-self: center; }
/* heading and intro across the column, the map beside the frame */
.ch.is-hybrid { grid-template-areas: "head head" "map frame"; }
.ch.is-hybrid .ch-map { align-self: center; }
/* stacked (tall windows): heading and intro, the frame across the column, the map in three columns under it */
.ch.is-stack { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "frame" "map"; }
.ch.is-stack .ch-map { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 32px; align-content: start; }
.ch.is-stack .ch-map > [data-col="1"] { grid-column: 1; }
.ch.is-stack .ch-map > [data-col="2"] { grid-column: 2; }
.ch.is-stack .ch-map > [data-col="3"] { grid-column: 3; }
.ch.is-stack .ch-bl { margin-top: 0; padding-top: 5px; padding-bottom: 3px; }
.ch.is-hybrid .ch-text, .ch.is-stack .ch-text { max-width: 72ch; }
.ch-title { font: 800 var(--fs-h2, clamp(1.5rem, 1.05rem + 2.1vw, 2.75rem))/1.08 var(--sans); letter-spacing: -.018em; color: var(--ink); text-wrap: balance; }
:lang(ka) .ch-title, :lang(th) .ch-title { line-height: 1.18; letter-spacing: 0; }
.ch-text { margin-top: var(--sp-head, 14px); font-size: 1rem; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.ch-frame { position: relative; width: var(--fw, 800px); height: var(--fh, 450px); max-width: 100%; justify-self: start;
  overflow: hidden; background: var(--paper2); border: 1.5px solid var(--ink);
  box-shadow: var(--sh-2, 0 1px 2px rgba(38, 41, 47, .10), 0 6px 14px -6px rgba(60, 50, 30, .18), 0 24px 44px -20px rgba(60, 50, 30, .30)); }
.ch-l { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; will-change: opacity, transform; }
.ch-sheet { object-fit: contain; background: #fff; padding: 3%; transform-origin: 50% 50%; }
.ch-blender { object-fit: fill; height: auto; transform-origin: 0 0; }
.ch-badge { z-index: 3; }
/* the caption on the picture: a label on media (ink fill); the number in mono, the caption in the text face, two lines
   at most instead of an ellipsis */
.ch-tag { position: absolute; z-index: 3; left: 12px; top: 12px; display: inline-flex; gap: 10px; align-items: baseline; max-width: calc(100% - 24px);
  padding: 7px 10px; background: rgba(38, 41, 47, .86); color: var(--sheet); font: 600 13px/1.3 var(--sans); letter-spacing: 0; }
.ch-tag b { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #A9C1FF; }
.ch-tag span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; }

/* the map: inactive steps in the soft ink (5.5:1 on paper), done steps in ink, the current one blue with a bar on the
   left; the weight never changes, so the text does not reflow */
.ch-map { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.ch-it { display: flex; gap: 10px; align-items: baseline; padding: 5px 0 5px 10px; font-size: 15px; line-height: 1.35; color: var(--soft);
  box-shadow: inset 0 0 0 transparent; transition: color .25s, box-shadow .25s; }
.ch-it b { flex: none; font-size: 12px; color: inherit; }
.ch-in { padding-left: 26px; }
.ch-it.is-done { color: var(--ink); }
.ch-it.is-on { color: var(--blue); box-shadow: inset 2px 0 0 var(--blue); }
.ch-bl { margin-top: 10px; padding-left: 10px; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.3; color: var(--soft); transition: color .25s; }
.ch-bl::before { content: ''; flex: none; width: 12px; height: 12px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-4px); }
.ch-bl.is-on { color: var(--blue); }

/* a long script on a short screen (chain.js measures): the intro goes to screen readers only */
.ch.is-tighter .ch-text { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* phones: title on top, the frame, the map under it filling the rest of the screen (no empty band when it unpins) */
.ch.is-m { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "head" "frame" "map"; align-content: stretch; gap: 16px; align-items: start; padding: calc(var(--header) + 14px) 16px 18px; }
.ch.is-m .ch-title { line-height: 1.1; }
.ch.is-m .ch-frame { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.ch.is-m .ch-map { margin-top: 2px; gap: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-evenly; }
.ch.is-m .ch-it { padding: 4px 0 4px 10px; font-size: 16px; line-height: 1.32; }
.ch.is-m .ch-in { padding-left: 22px; }
.ch.is-m .ch-it b { font-size: 12px; }
.ch.is-m .ch-bl { margin-top: 8px; font-size: 12px; }
.ch.is-m .ch-tag { left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 5px 8px; font-size: 12px; }

/* the section: the static chain (page.mjs) stands in for the scene without JavaScript and with «reduce motion» */
.scene-chain { background: transparent; }
.v2-still .scene-chain { height: auto; overflow: visible; }
.v2-still .scene-chain .scene-stage { display: none; }
.v2-still .scene-chain .scene-text { display: block; padding: clamp(40px, 6vw, 80px) 0; }