/* DABB — the project sheet: the full-screen view of one project, a PLATE on the page's own ground: the sand IN THE SUN
   (AMENDMENT 7 — .ground on the panel, css/base.css, and the panel is in .in-sun's list: deep type on the bare sand lifted
   by the light; it scrolls with the plate), its bar a translucent LIGHT with a blur — never a flat fill. The living
   layer lifts whatever it paints on the sand by the same light (10-sheet.js sunOn), so no opening shows a seam.
   A modal that rises from the bottom over the page. It stops under the band: a strip of the page stays in view (the
   backdrop — click it to close), then a rule in the service's colour, the bar, and the plate itself.
   State (set by js/parts/10-sheet.js):  html.is-sheet-open · .sheet.is-open · .sheet[data-accent] = the project's service
     .sheet--type            a project without images: the head becomes a typographic plate and carries the facts
     .sheet__gallery--mixed  portrait and landscape captures together (see "mixed sets" below)
   Geometry: everything sits on the page's .wrap grid; the strip of captures starts on that grid.

   INTO THE OPENING (DESIGN2.md, amendment 3 § 2): the plate is a place on the sand. One canvas (.sheet__sand) lies between
   the panel's ground and the words (.sheet__doc) and carries what lives there; this file only gives those things their
   PLACES — empty aria-hidden boxes the script measures (.sheet__den the opening · .sheet__sprig the project's plant ·
   .sheet__ledge under the strip · .sheet__crew-stall · .sheet__out-rest / -sprig · .sheet__next-den) — and the keeper's
   LANE: the end margin of the words, --sheet-lane wide (no words, no pictures in it, on any screen).
     .sheet.has-scene   the living layer is there        .sheet--den    the head has its opening (--mark: holding the mark)
     .sheet--quiet      Labaik Badal: no animal, no lane, the screens as plates with a hairline and four corner brackets
     .sheet--live       the status begins "Live": the shade lifts at the end
     .sheet.is-mouth    the way in / out: the sand parts (the panel is clipped by the script; .sheet__mouth is the rim)   */

html.is-sheet-open { overflow: hidden; }                        /* the page behind does not scroll */
html.is-sheet-quiet .band--top { visibility: hidden; }          /* Labaik Badal's page: no animal and no prints — the trackway band at the top of the window is a line of prints, so it rests while this page is open */

.sheet {
  --sheet-gap: calc(var(--band-total, 15px) + 13px);            /* the backdrop strip: the band, and a breath of the page */
  --sheet-bar: 52px;
  --sheet-edge: 3px;                                            /* the rule in the service's colour (as thick as the band's) */
  --sheet-rule: var(--rule);
  /* the .wrap grid, restated for full-bleed children:  side = the auto margin beyond --maxw · ps / pe = the paddings */
  --sheet-w: 100vw;
  --sheet-ps: var(--margin);
  --sheet-lane: 0px;                                            /* the keeper's lane (see below: only where the living layer is) */
  --sheet-pe: max(var(--margin), var(--sheet-lane));
  --sheet-side: max(0px, calc((var(--sheet-w) - var(--maxw)) / 2));
  --sheet-in: calc(var(--sheet-w) - var(--sheet-side) * 2 - var(--sheet-ps) - var(--sheet-pe));      /* the content width */
  --sheet-scrim: color-mix(in srgb, var(--ink) 88%, transparent);      /* the page behind sinks into basalt; the band still glints through */
  --link-rule: var(--accent);                                   /* link rules take the service's colour: one colour per view */
  position: fixed; inset: 0; z-index: var(--z-sheet);
  display: grid; grid-template-rows: var(--sheet-gap) minmax(0, 1fr);
  visibility: hidden; pointer-events: none;
}
html[data-theme="night"] .sheet { --sheet-scrim: color-mix(in srgb, var(--n-950) 76%, transparent); }
@supports (inline-size: 1cqi) { .sheet { --sheet-w: 100cqi; } }      /* exact, whatever the scrollbar takes (the panel is the container) */
.sheet.is-open { visibility: visible; pointer-events: auto; }
.sheet:focus { outline: none; }                                 /* the dialog itself takes focus when a script opens it */

/* the page behind, dimmed */
.sheet::before { content: ""; position: absolute; inset: 0; background: var(--sheet-scrim); opacity: 0; }
.sheet.is-open::before { opacity: 1; }
.sheet__backdrop { position: relative; grid-row: 1; cursor: pointer; }

/* the plate: the scroller */
.sheet__panel {
  position: relative; grid-row: 2; grid-column: 1; min-block-size: 0;
  --sh: var(--shade-sun); background-attachment: local;        /* (.ground: the sand lies under the plate and scrolls with it) — in the sun: deep type, 6.0 : 1 (--fg-2 4.9) on the darkest grain, lifted */
  color: var(--fg);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  container: sheet / inline-size;
  clip-path: inset(100% 0 0 0);
}
.sheet.is-open .sheet__panel { clip-path: inset(0 0 0 0); }

.sheet__defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

/* the living layer: a window of the plate (the script sets its place and height), under the words */
.sheet__sand { position: absolute; inset-inline-start: 0; inset-block-start: 0; z-index: 0; display: block; inline-size: 100%; block-size: 0; pointer-events: none; }
.sheet__doc { position: relative; z-index: 1; }
/* the keeper's lane: the words keep clear of the end margin */
.sheet.has-scene { --sheet-lane: 46px; }                       /* (a phone: the keeper is about 86 px long — its body and feet need this much lane: js/parts/10-sheet.js) */
.sheet.has-scene.sheet--quiet { --sheet-lane: 0px; }
.sheet__doc .wrap { padding-inline-end: var(--sheet-pe); }

/* ── shared bits ── */
.sheet__mark { flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent-mark); }   /* one dot in the project's service colour */
.sheet__sep { opacity: 0.5; }
.sheet__h { display: flex; margin-block-end: var(--s-4); }
.sheet__ticks { position: absolute; inset: -10px; pointer-events: none; }
/* arrows: forward = the reading direction's end, back = its start; on hover they dash 4 px their own way */
.sheet__ico { --flip: 1; --nudge: 0px; transform: scaleX(var(--flip)) translateX(var(--nudge)); }
.sheet__ico--back { --flip: -1; }
[dir="rtl"] .sheet__ico { --flip: -1; }
[dir="rtl"] .sheet__ico--back { --flip: 1; }
.sheet__step {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 44px; block-size: 44px; color: inherit; border-radius: 50%;
}
.sheet__step .ico { inline-size: 20px; block-size: 20px; }
.sheet__step:hover .sheet__ico { --nudge: 4px; }
.sheet__step--box { border: var(--hair) solid var(--rule-2); }
.sheet__step--box:hover { background: var(--fg); color: var(--on-btn); border-color: var(--fg); }
.sheet__step[aria-disabled="true"] { opacity: 0.32; cursor: default; }
.sheet__step[aria-disabled="true"] .sheet__ico { --nudge: 0px; }
.sheet__step--box[aria-disabled="true"]:hover { background: none; color: inherit; border-color: var(--rule-2); }

/* ── top bar:  ◆ 02 / Games / Kingdom Land ········ ← 03 / 07 →   Close ✕ ── */
.sheet__bar {
  position: sticky; inset-block-start: 0; z-index: 3;
  background: rgba(var(--sun-rgb), 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);      /* a light over the plate that passes under it (the plate is in the sun: its deep type reads on it), never a solid bar */
  border-block-start: var(--sheet-edge) solid var(--accent);
  border-block-end: var(--hair) solid var(--rule);
}
.sheet__bar-in { display: flex; align-items: center; gap: var(--s-3); block-size: var(--sheet-bar); }
.sheet__route { flex: 1 1 auto; min-inline-size: 0; color: var(--fg); white-space: nowrap; }
.sheet__route-text, .sheet__route-tail, .sheet__route-svc { display: inline-flex; align-items: baseline; gap: 0.7em; min-inline-size: 0; }
.sheet__route-tail { display: none; }
.sheet__route-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }      /* a long name gives way to the pager — it stands in full right below */
.sheet__pager { display: inline-flex; align-items: center; flex: none; }
.sheet__count { padding-inline: var(--s-2); font-size: var(--fs-xs); text-align: center; color: var(--fg-2); white-space: nowrap; }      /* the padding keeps a focus ring off the digits */
.sheet__close {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); flex: none;
  min-inline-size: 44px; min-block-size: 44px; margin-inline-end: -10px;      /* -10px: the icon's ink sits on the grid edge */
  font-size: var(--fs-sm); font-weight: 600; line-height: 1; color: inherit; white-space: nowrap;
}
.sheet__close-word { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }      /* phones: the cross alone */
.sheet__close-ico { inline-size: 24px; block-size: 24px; }
.sheet__close:hover .sheet__close-ico { transform: rotate(90deg); }

/* ── head ── */
.sheet__top { padding-block-start: clamp(36px, 6vw, 88px); }
.sheet__head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.sheet__head > .sheet__ticks { display: none; }
.sheet__eyebrow { display: flex; flex-wrap: wrap; row-gap: var(--s-2); }
.sheet__plate-no { white-space: nowrap; }
.sheet__for { display: inline-flex; align-items: center; gap: var(--s-3); }
.sheet__client { display: inline-flex; align-items: center; color: var(--fg); }
.sheet__client:empty { display: none; }
.sheet__client svg { display: block; block-size: 20px; inline-size: auto; max-inline-size: none; }
/* the logo and the name: the logo in its circle, as it is kept at home on the ground */
.sheet__title { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); min-inline-size: 0; }
.sheet__logo {
  --sheet-logo: clamp(56px, 7vw, 100px);
  flex: none; inline-size: var(--sheet-logo); block-size: var(--sheet-logo);
  border-radius: 50%; object-fit: cover; background: var(--paper); border: var(--hair) solid var(--rule-2);
}
.sheet__logo--mark { object-fit: contain; padding: calc(var(--sheet-logo) * 0.07); }
.sheet__name { min-inline-size: 0; overflow-wrap: anywhere; }
.sheet__lead { max-inline-size: 40ch; color: var(--fg-2); }
.sheet__chips { margin-block-start: var(--s-2); }
.sheet__status.is-live { background: var(--green-light); border-color: var(--green-light); color: var(--green-deep); }      /* out in the stores: the one filled mark — in Najd green, the colour of what lives and grows (never the service's colour: green means "live" everywhere in dabb2) */
.sheet__plate-facts { display: none; }

/* the opening dug in the sand (the script paints it; this box is its mouth). The cover lies on its floor: the picture itself is
   drawn by the living layer under the sand of the walls — the <img> keeps its place and its words for a reader that cannot see it */
.sheet__den { display: none; }
.sheet--den .sheet__den {
  --den: min(100%, 400px);
  display: block; position: relative; order: 1; justify-self: center;
  inline-size: var(--den); aspect-ratio: 1; margin-block: 3% 27%;      /* (below it: the sand it threw out) */
}
.sheet--den .sheet__links { order: 2; }
.sheet--den .sheet__plate-facts { order: 3; }
.sheet__den-img { position: absolute; inset: 3%; inline-size: 94%; block-size: 94%; object-fit: cover; border-radius: 24%; opacity: 0; }
.sheet__sprig { position: absolute; inset-inline-start: -4%; inset-block-end: -31%; inline-size: clamp(64px, 9vw, 124px); aspect-ratio: 1; }      /* the project's own plant, on the sand by the opening */
.sheet--den:not(.sheet--type) .sheet__name { font-size: clamp(2.5rem, 1.25rem + 5.2vw, 6rem); line-height: var(--lh-mega); letter-spacing: var(--tr-mega); }
.sheet--mark .sheet__den { --den: clamp(132px, 38vw, 190px); margin-block: 4% 30%; justify-self: start; margin-inline-start: 6%; }
.sheet--mark .sheet__logo { display: none; }                    /* (the mark lies in its opening) */

/* ── the typographic plate: a project without images. The name is the picture; the facts stand beside it ── */
.sheet--type .sheet__top { padding-block-start: 0; padding-inline: 0; }
.sheet--type .sheet__head {
  --sheet-rule: color-mix(in srgb, var(--fg) 22%, transparent);
  grid-template-rows: auto 1fr;                                 /* the eyebrow at the top edge; everything else stands on the ground */
  min-block-size: min(72vh, 560px);
  padding: var(--s-7) var(--margin) var(--s-6);
  background: rgba(var(--warm-rgb), 0.07);                      /* the typographic plate: the shade lifts a little over it */
}
.sheet--type .sheet__head > .sheet__ticks { display: block; inset: 10px; }
.sheet--type .sheet__title { align-self: end; display: grid; justify-items: start; gap: clamp(20px, 3vw, 36px); }
.sheet--type .sheet__logo { --sheet-logo: clamp(72px, 9vw, 120px); }
.sheet--type .sheet__name {                                   /* --sheet-fit: set by the script when one word is wider than the column */
  justify-self: stretch; overflow-wrap: normal;
  font-size: calc(var(--fs-mega) * var(--sheet-fit, 1)); line-height: var(--lh-mega); letter-spacing: var(--tr-mega);
}
.sheet--type .sheet__lead { color: var(--fg); }
.sheet--type .sheet__chips { margin-block-start: 0; }
.sheet--type .sheet__plate-facts { display: block; margin-block-start: var(--s-5); }
.sheet--type .sheet__gallery { display: none; }
.sheet--type.sheet--den .sheet__head { background: none; }      /* (with its opening the plate is the sand itself: no wash over the relief) */
.sheet.has-scene.sheet--type .sheet__head { padding-inline-end: var(--sheet-pe); }      /* (a full-bleed plate on a phone: its words keep clear of the keeper's lane all the same) */

/* ── facts: a definition list on hairlines ── */
.sheet__facts { display: grid; }
.sheet__fact {
  display: grid; grid-template-columns: minmax(7.25rem, 0.44fr) minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline;
  padding-block: var(--s-3); border-block-start: var(--hair) solid var(--sheet-rule);
}
.sheet__fact:last-child { border-block-end: var(--hair) solid var(--sheet-rule); }
.sheet__fact-k { display: block; }
.sheet__fact-v { font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* ── gallery ── */
.sheet__gallery { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 4vw, 56px); margin-block-start: clamp(36px, 5vw, 72px); }

/* a wide figure (the cover): registration ticks, the picture, and its caption row — label · what it shows · its size */
.sheet__wide-frame { position: relative; }
.sheet__shot { inline-size: 100%; }
.sheet__wide .sheet__shot { aspect-ratio: var(--ar); max-block-size: 78vh; }
.sheet__cap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-5); align-items: baseline;
  margin-block-start: var(--s-4); padding-block-start: var(--s-3); border-block-start: var(--hair) solid var(--rule);
}
.sheet__cap-k { grid-area: 1 / 1; justify-self: start; color: var(--fg); }
.sheet__cap-dim { grid-area: 1 / 2; font-size: var(--fs-xs); color: var(--fg-2); white-space: nowrap; }      /* (small: the secondary ink) */
.sheet__cap-text { grid-area: 2 / 1 / auto / -1; max-inline-size: 70ch; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--fg-2); }

/* the strip: every capture at one height, on one ground line; it starts on the grid and runs off the far edge.
   The height is 68vh (640 px at most) — less when the widest capture would not leave the next one in sight. */
.sheet__reel { min-inline-size: 0; }
.sheet__strip {
  --ar-max: var(--ar-p, 0.5);
  --sheet-fill: 0.88;                                           /* how much of the plate's width the widest capture may take */
  --sheet-shot-h: min(68vh, 640px, calc(var(--sheet-in) * var(--sheet-fill) / var(--ar-max)));
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding-block: 12px 14px;                                     /* room for the focus ring, the corner brackets and the head of the sun's shadow */
  padding-inline: calc(var(--sheet-side) + var(--sheet-ps)) 0;  /* it ends where the words end: the lane beyond stays clear */
  margin-inline-end: calc(var(--sheet-side) + var(--sheet-pe));
  scroll-padding-inline: calc(var(--sheet-side) + var(--sheet-ps)) 0;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;      /* contain: a swipe at the end must not become "Back" */
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.sheet__strip::-webkit-scrollbar { display: none; }
.sheet__strip:focus-visible { outline-offset: -3px; box-shadow: none; }
.sheet__fig { position: relative; flex: none; scroll-snap-align: start; cursor: pointer; }
.sheet__fig .sheet__shot { block-size: var(--sheet-shot-h); inline-size: calc(var(--sheet-shot-h) * var(--ar)); }
/* THE SCREENS ARE FINDS ON THE SAND: each lies under the page's one sun — its cast shadow falls down and away from the top
   left (physical: it does not turn when the page is mirrored), its sun-side edge catches the light */
.sheet__fig .sheet__shot { overflow: visible; box-shadow: 9px 12px 22px rgba(var(--shade-rgb), 0.34), 2px 3px 5px rgba(var(--shade-rgb), 0.28); }      /* (a noon shadow on sand is soft) */
.sheet__fig .sheet__shot img { border-radius: inherit; }
.sheet__fig .sheet__shot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--sand-high) 34%, transparent), inset -1px -1px 0 rgba(var(--shade-rgb), 0.4);
}
/* the quiet page: plates laid on smoothed sand — a hairline and four corner brackets, no shadow play */
.sheet__fig-ticks { display: none; position: absolute; inset: -9px -9px auto; block-size: calc(var(--sheet-shot-h) + 18px); pointer-events: none; }
.sheet--quiet .sheet__fig-ticks { display: block; }
.sheet--quiet .sheet__strip { gap: var(--s-6); }
.sheet--quiet .sheet__fig .sheet__shot { box-shadow: 0 0 0 var(--hair) var(--rule-2); }
.sheet--quiet .sheet__fig .sheet__shot::after { content: none; }
.sheet--quiet .sheet__fig-cap { color: var(--fg-2); }
/* the ledge under the strip: where the keeper comes to the shot in view (wide plates) */
.sheet__ledge { display: none; }
.sheet__fig-cap { display: flex; margin-block-start: var(--s-3); gap: var(--s-2); color: var(--fg-2); }      /* (small: the secondary ink — in the sun the tertiary is for large type and marks) */
.sheet__fig-cap::before { content: ""; flex: none; inline-size: 6px; block-size: 6px; margin-inline-end: 2px; border-radius: 50%; background: var(--accent-mark); transform: rotate(45deg) scale(0); }
.sheet__fig:hover .sheet__fig-cap, .sheet__fig[aria-current="true"] .sheet__fig-cap { color: var(--fg); }
.sheet__fig[aria-current="true"] .sheet__fig-cap::before { transform: rotate(45deg) scale(1); }
/* mixed sets (portrait and landscape together): a landscape capture cannot share a phone-high row on a narrow screen —
   there it is shown as a wide figure above the strip; on a wide plate it takes its place in the strip. Built twice, shown once. */
.sheet__fig--alt { display: none; }
@container sheet (min-width: 1040px) {
  .sheet__fig--alt { display: block; }
  .sheet__wide--alt { display: none; }
  .sheet__gallery--mixed .sheet__strip { --ar-max: var(--ar-all, 0.5); }
  .sheet__gallery--flat .sheet__strip { --sheet-fill: 0.64; }   /* landscape captures only: smaller than the cover above them, so that the next one shows */
}

/* the legend of the strip:  02 / 04 · what the current figure shows · ← → */
.sheet__legend {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-5); align-items: start;
  margin-block-start: var(--s-2); padding-block-start: var(--s-3); border-block-start: var(--hair) solid var(--rule);
}
.sheet__legend-n { font-size: var(--fs-xs); line-height: 44px; color: var(--fg); white-space: nowrap; }
.sheet__legend-nav { display: flex; gap: var(--s-2); justify-self: end; }
.sheet__legend-text { grid-column: 1 / -1; grid-row: 2; max-inline-size: 62ch; min-block-size: calc(var(--lh-sm) * 2em); color: var(--fg-2); }

/* ── body ── */
.sheet__body { display: grid; gap: var(--s-8) var(--gutter); margin-block-start: clamp(56px, 8vw, 120px); }
.sheet--type .sheet__body { margin-block-start: clamp(40px, 6vw, 88px); }
.sheet__summary { max-inline-size: 58ch; }
.sheet__main, .sheet__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-content: start; min-inline-size: 0; }
.sheet__role { max-inline-size: 58ch; color: var(--fg-2); }
/* THE CREW: one line per part of the role sentence — a dabb of the team stands in the stall (the living layer), its label is the project's own words */
.sheet__crew { display: grid; margin-block-start: var(--s-6); max-inline-size: 34rem; }
.sheet__crew-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-4);
  min-block-size: 72px; border-block-start: var(--hair) solid var(--sheet-rule);
}
.sheet__crew-item:last-child { border-block-end: var(--hair) solid var(--sheet-rule); }
.sheet__crew-stall { inline-size: 96px; block-size: 52px; }
.sheet__crew-label { padding-block: var(--s-3); font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; }
.sheet:not(.has-scene) .sheet__crew-stall { display: none; }
.sheet__features { display: grid; gap: var(--s-3); }
.sheet__feature { position: relative; padding-inline-start: var(--s-5); font-size: var(--fs-body); line-height: var(--lh-sm); }
.sheet__feature::before {
  content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: calc(var(--lh-sm) * 0.5em - 3px);
  inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent-mark);
}
/* where to open it — the website and the stores: one clear button each (the first in the service's colour).
   On a phone each is a full row: its mark and its name at the start, the arrow at the end. */
.sheet__links { display: grid; gap: var(--s-2); }
/* dabb2: pills. The first link is the white pill (the script's .btn--accent is drawn as the plain primary here: no coloured
   buttons), the others are outlined. The badge holds the "out" arrow, which already points up-and-forward: no turn. */
.sheet__link { inline-size: 100%; justify-content: flex-start; min-block-size: 52px; padding-block: 6px; white-space: normal; line-height: 1.3; text-align: start; }
.sheet__link.btn--accent { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.sheet__link.btn--accent:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.sheet__link.btn--accent > .sheet__link-go { background: var(--on-btn); color: var(--btn); }
.sheet__link-ico { inline-size: 20px; block-size: 20px; }
.sheet__link-text { flex: 1 1 auto; }
.sheet .btn > .sheet__link-go, .sheet .btn:hover > .sheet__link-go { transform: none; }
[dir="rtl"] .sheet .btn > .sheet__link-go, [dir="rtl"] .sheet .btn:hover > .sheet__link-go { transform: scaleX(-1); }
.sheet--type .sheet__link.btn--ghost:hover { background: var(--fg); color: var(--on-btn); }

/* ── the end: where the project stands now. Live: the light comes up round the store links (the living layer lays the sand
   over it) and the keeper lies down in that sun — the status stands on its own patch of light.  
   Not yet released: the keeper sits by the young plant. ── */
.sheet__out {
  position: relative; display: grid; gap: var(--s-6); align-items: center;
  margin-block-start: clamp(88px, 12vw, 176px); min-block-size: 176px;
}
.sheet__out-text { display: grid; gap: var(--s-5); justify-items: start; min-inline-size: 0; }
.sheet__out-chip {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4);
  padding: 10px 18px; border-radius: 22px; background: rgba(var(--sun-rgb), 0.5);
}
.sheet__out-k { color: var(--fg-2); }
.sheet__out-v { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
.sheet--live .sheet__out-v { color: var(--green-text); }        /* a live product: its dot and its word are Najd green (deep, in the sun) */
.sheet--live .sheet__out-v::before {
  content: ""; display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-end: 0.6em; border-radius: 50%;
  background: var(--green-text); vertical-align: 0.08em;
}
.sheet__links--out { inline-size: 100%; }
.sheet__out-rest { justify-self: end; inline-size: 96px; block-size: 64px; }      /* where the keeper lies (live) or sits (not yet released) */
.sheet__out-sprig { position: absolute; inset-inline-end: 112px; inset-block-end: 0; inline-size: 62px; block-size: 62px; }
.sheet--live:not(.sheet--quiet) .sheet__out-sprig { display: none; }
.sheet--quiet .sheet__out-rest { display: none; }
.sheet--quiet .sheet__out-sprig { inset-inline-end: 12px; inset-block-end: 12px; }
.sheet--quiet .sheet__out { min-block-size: 0; }

/* ── foot: back to the work · the next plate ── */
.sheet__foot {
  display: grid; gap: var(--s-7);
  margin-block-start: clamp(64px, 9vw, 136px); padding-block: var(--s-6) max(var(--s-7), env(safe-area-inset-bottom, 0px));
  border-block-start: var(--hair) solid var(--rule);
}
.sheet__back { display: inline-flex; align-items: center; justify-self: start; gap: var(--s-3); min-block-size: 44px; color: inherit; text-decoration: none; }
.sheet__back:hover > .sheet__ico { --nudge: 4px; }
.sheet__back-word, .sheet__next-word {
  background: linear-gradient(var(--link-rule), var(--link-rule)) no-repeat 0 100% / 0% 2px;      /* the quiet link's rule (as .link--quiet) */
  padding-block-end: 2px;
}
[dir="rtl"] .sheet__back-word, [dir="rtl"] .sheet__next-word { background-position: 100% 100%; }
.sheet__back-word { font-weight: 600; line-height: 1.4; }
.sheet__back:hover .sheet__back-word { background-size: 100% 2px; }
.sheet__next { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 40px); color: inherit; text-decoration: none; }
.sheet__next-text { display: grid; gap: var(--s-3); justify-items: start; min-inline-size: 0; }
/* the next project's opening, with its mark on the floor (the living layer digs it; this box is its mouth). Not dug
   (.sheet__next--plate: the quiet project, or its page): the mark as a plate, a hairline and four corner brackets */
.sheet__next-den { position: relative; flex: none; inline-size: clamp(84px, 22vw, 112px); aspect-ratio: 1; margin-block: 14px 76px; margin-inline: 22px; }
.sheet__next-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 22%; opacity: 0; }
.sheet__next-ticks { display: none; position: absolute; inset: -10px; }
.sheet__next--plate .sheet__next-den { margin-block: 14px; inline-size: clamp(64px, 16vw, 84px); }
.sheet__next--plate .sheet__next-img { opacity: 1; border-radius: 14%; box-shadow: 0 0 0 var(--hair) var(--rule-2); }
.sheet__next--plate .sheet__next-ticks { display: block; }
.sheet__next-k { min-block-size: 1.5rem; }
.sheet__next-name { display: block; }
.sheet__next-word { background-size: 0% 3px; padding-block-end: 0.06em; }
.sheet__next-name .ico { display: inline-block; inline-size: 0.8em; block-size: 0.8em; margin-inline-start: 0.12em; vertical-align: -0.06em; stroke-width: 2; }      /* glued to the last word (a no-break space in the markup) */
.sheet__next:hover .sheet__next-word { background-size: 100% 3px; }
.sheet__next:hover .sheet__ico { --nudge: 8px; }

@media (min-width: 640px) {
  .sheet { --sheet-bar: 56px; }
  .sheet.has-scene { --sheet-lane: 64px; }
  .sheet.has-scene.sheet--quiet { --sheet-lane: 0px; }
  .sheet__crew-stall { inline-size: 132px; block-size: 60px; }
  .sheet__crew-item { min-block-size: 84px; }
  .sheet__out-rest { inline-size: 150px; block-size: 84px; }
  .sheet__out-sprig { inset-inline-end: 158px; inset-block-end: 6px; inline-size: 78px; block-size: 78px; }
  .sheet--mark .sheet__den { --den: clamp(170px, 24vw, 230px); }
  .sheet__bar-in { gap: var(--s-5); }
  .sheet__route-tail { display: inline-flex; }
  .sheet__close { margin-inline-end: calc(var(--s-2) * -1); padding-inline: var(--s-3) var(--s-2); }
  .sheet__close-word { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }
  .sheet__close-ico { margin-inline-end: -5px; }
  .sheet__cap { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sheet__cap-text { grid-area: 1 / 2; }
  .sheet__cap-dim { grid-area: 1 / 3; }
  .sheet__strip { gap: var(--s-4); }
  .sheet__legend { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sheet__legend-text { grid-column: auto; grid-row: auto; min-block-size: 0; padding-block-start: calc((44px - var(--lh-sm) * 1em) / 2); }
  .sheet__links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
  .sheet__link { inline-size: auto; justify-content: center; white-space: nowrap; }
  .sheet__link-text { flex: none; }
  .sheet--type .sheet__top { padding-block-start: var(--s-6); padding-inline: var(--margin); }
  .sheet--type .sheet__head { padding: clamp(40px, 5vw, 72px) clamp(32px, 4.5vw, 64px) clamp(32px, 4vw, 56px); }
  .sheet--type .sheet__head > .sheet__ticks { inset: 14px; }
  .sheet.has-scene.sheet--type .sheet__top { padding-inline-end: var(--sheet-pe); }
  .sheet.has-scene.sheet--type .sheet__head { padding-inline-end: clamp(32px, 4.5vw, 64px); }
}
@media (min-width: 900px) {
  .sheet { --sheet-gap: calc(var(--band-total, 15px) + 17px); }
  .sheet__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .sheet__eyebrow, .sheet__chips, .sheet__links { grid-column: 1 / -1; }
  .sheet__title { grid-column: 1 / span 8; }
  .sheet__lead { grid-column: 9 / -1; padding-block-end: 0.5em; }
  /* the typographic plate: the name, its line and its chips on the start side; the facts on the end side, on the same ground */
  .sheet--type .sheet__head { grid-template-rows: auto 1fr auto auto auto; min-block-size: min(66vh, 580px); }
  .sheet--type .sheet__title { grid-column: 1 / span 7; }
  .sheet--type .sheet__name { font-size: calc(var(--fs-mega) * 0.8 * var(--sheet-fit, 1)); }
  .sheet--type .sheet__lead { grid-column: 1 / span 6; padding-block-end: 0; }
  .sheet--type .sheet__chips, .sheet--type .sheet__links { grid-column: 1 / span 7; }
  .sheet--type .sheet__plate-facts { grid-column: 8 / -1; grid-row: 2 / -1; align-self: end; margin-block-start: 0; }
  .sheet.has-scene { --sheet-lane: 96px; }
  .sheet.has-scene.sheet--quiet { --sheet-lane: 0px; }
  /* the head with its opening: the words on the start side, the opening on the end side, large */
  .sheet--den:not(.sheet--type) .sheet__head { grid-template-rows: auto auto auto auto auto 1fr; align-items: start; }
  .sheet--den:not(.sheet--type) .sheet__eyebrow { grid-column: 1 / span 6; grid-row: 1; }
  .sheet--den:not(.sheet--type) .sheet__title { grid-column: 1 / span 6; grid-row: 2; }
  .sheet--den:not(.sheet--type) .sheet__lead { grid-column: 1 / span 5; grid-row: 3; padding-block-end: 0; }
  .sheet--den:not(.sheet--type) .sheet__chips { grid-column: 1 / span 6; grid-row: 4; }
  .sheet--den:not(.sheet--type) .sheet__links { grid-column: 1 / span 6; grid-row: 5; }
  .sheet--den:not(.sheet--type) .sheet__den {
    --den: min(500px, 56vh, 37vw);
    grid-column: 7 / -1; grid-row: 1 / -1; margin-block: calc(var(--den) * 0.03) calc(var(--den) * 0.3);
  }
  .sheet--den:not(.sheet--type) .sheet__sprig { inset-inline-start: -19%; inset-block-end: -22%; }
  /* the typographic plate with its opening: the mark's opening above the facts, on the end side */
  .sheet--type.sheet--den .sheet__eyebrow { grid-column: 1 / span 7; grid-row: 1; }
  .sheet--type.sheet--den .sheet__title { grid-row: 2; }
  .sheet--type.sheet--den .sheet__lead { grid-row: 3; }
  .sheet--type.sheet--den .sheet__chips { grid-row: 4; }
  .sheet--type.sheet--den .sheet__links { grid-row: 5; }
  .sheet--type.sheet--den .sheet__den { grid-column: 8 / -1; grid-row: 1 / span 2; justify-self: start; align-self: start; margin-block: 0 28%; margin-inline-start: 10%; }
  .sheet--type.sheet--den .sheet__plate-facts { grid-row: 3 / -1; }
  .sheet--type.sheet--den .sheet__sprig { inset-inline-start: auto; inset-inline-end: -52%; inset-block-end: -18%; }
  /* the screens: a little lower, so that the ledge under them — where the keeper comes — is in view with them */
  .sheet.has-scene:not(.sheet--quiet) .sheet__strip { --sheet-shot-h: min(58vh, 600px, calc(var(--sheet-in) * var(--sheet-fill) / var(--ar-max))); }
  .sheet.has-scene:not(.sheet--quiet) .sheet__ledge { display: block; block-size: 104px; }
  .sheet__crew { max-inline-size: 38rem; }
  .sheet__crew-stall { inline-size: 168px; block-size: 68px; }
  .sheet__crew-item { min-block-size: 100px; column-gap: var(--s-5); }
  .sheet__out { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(40px, 7vw, 120px); }
  .sheet--live .sheet__out-rest { justify-self: start; align-self: end; margin-block-end: 2px; }      /* in the sun, beside the links */
  .sheet__next-text { justify-items: end; }
  .sheet__next-den { inline-size: 116px; margin-block: 8px 96px; margin-inline: 30px 6px; }
  .sheet__body { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0; }
  .sheet__main { grid-column: 1 / span 6; }
  .sheet__side { grid-column: 8 / -1; }
  .sheet__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding-block: var(--s-7) max(var(--s-8), env(safe-area-inset-bottom, 0px)); }      /* the two first lines share one line */
  .sheet__next { text-align: end; }
}
@media (min-width: 1200px) {
  .sheet { --sheet-ps: max(var(--margin), calc(var(--rail-w) + var(--gutter))); }      /* .wrap clears the rail from here up */
  .sheet.has-scene { --sheet-lane: 116px; }
  .sheet.has-scene.sheet--quiet { --sheet-lane: 0px; }
  .sheet--type .sheet__top { padding-inline-start: max(var(--margin), calc(var(--rail-w) + var(--gutter))); }
}

/* ── the way in: the sand parts. The script clips the panel to a hand-dug outline that widens from the place of the mark
   that was clicked (and closes on it again); this is the rim of that mouth — the sand's own lip, lit on the side that
   faces the sun, its sun-side wall throwing a shadow on what comes up through it ── */
.sheet__mouth { display: none; position: relative; z-index: 4; grid-row: 2; grid-column: 1; inline-size: 100%; block-size: 100%; overflow: hidden; pointer-events: none; }
.sheet.is-mouth .sheet__mouth { display: block; }
.sheet.is-closing { visibility: visible; }
.sheet__mouth path { fill: none; stroke-linejoin: round; }
.sheet__mouth-cast { stroke: rgba(var(--shade-rgb), 0.3); stroke-width: 24px; transform: translate(6px, 8px); }
.sheet__mouth-cast--far { stroke: rgba(var(--shade-rgb), 0.2); stroke-width: 52px; transform: translate(11px, 14px); }
.sheet__mouth-rim { stroke-width: 20px; }
.sheet__mouth-rim--lumps { stroke-width: 27px; stroke-linecap: round; stroke-dasharray: 3 37 14 59 1 83 22 31 7 101; }      /* thrown sand lies in lumps of no one size: the lip is no hoop */
.sheet__mouth-rim--lumps2 { stroke-width: 24px; stroke-linecap: round; stroke-dasharray: 9 71 2 29 17 113 5 47; stroke-dashoffset: 53; }
.sheet__mouth-tone { stroke: rgba(var(--shade-rgb), 0.3); stroke-width: 20px; }
.sheet__mouth-lit { stroke: var(--sand-high); stroke-opacity: 0.24; stroke-width: 10px; transform: translate(-3.6px, -4.3px); }
.sheet__mouth-dark { stroke: var(--sand-deep); stroke-opacity: 0.4; stroke-width: 11px; transform: translate(3.6px, 4.3px); }
.sheet.is-mouth .sheet__doc, .sheet.is-mouth .sheet__sand { transform: translateY(var(--sheet-rise, 0px)); }      /* the project comes up through it */

/* ── motion: the way in (above) — then stillness. Calm / still: it simply appears ── */
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .sheet { transition: visibility 0s linear var(--t-3); }
  html:not(.is-calm) .sheet.is-open { transition: visibility 0s; }
  html:not(.is-calm) .sheet::before { transition: opacity var(--t-3) var(--e-std); }
  html:not(.is-calm) .sheet.has-scene.is-open::before { transition-delay: 240ms; }      /* (the ground round the mouth stays in its light while the sand parts) */
  html:not(.is-calm) .sheet:not(.has-scene) .sheet__panel { transition: clip-path var(--t-3) var(--e-dash); }      /* (without the living layer: the old rise from the bottom) */
  /* the name rises out of its line when a plate is shown */
  html:not(.is-calm) .sheet.is-swap .sheet__name-in { animation: sheet-name var(--t-4) var(--e-dash) both; }
  html:not(.is-calm) .sheet.is-open.is-rise .sheet__name-in { animation-delay: 120ms; }
  html:not(.is-calm) .sheet__ico, html:not(.is-calm) .sheet__close-ico, html:not(.is-calm) .sheet__link-go { transition: transform var(--t-3) var(--e-dash); }
  html:not(.is-calm) .sheet__step--box { transition: background-color var(--t-2) var(--e-std), color var(--t-2) var(--e-std), border-color var(--t-2) var(--e-std); }
  html:not(.is-calm) .sheet__fig-cap { transition: color var(--t-2) var(--e-std); }
  html:not(.is-calm) .sheet__fig-cap::before { transition: transform var(--t-2) var(--e-dash); }
  html:not(.is-calm) .sheet__back-word, html:not(.is-calm) .sheet__next-word { transition: background-size var(--t-3) var(--e-dash); }
}
@keyframes sheet-name {
  from { transform: translateY(112%); }
  to { transform: none; }
}