/* ===========================================================================
   THE CAPTION SKIN  —  «במרכז», the placed typographic cut.

   THIS IS THE SITE, not a variant. Two caption designs ran side by side behind
   a VARIANT env var until 2026-09-03, when Ilai kept this one and version A
   was deleted along with the switch in server.mjs. index.html now carries
   data-variant="b" on <html> as a permanent attribute and links this file
   directly, BELOW its own <style> block — several rules here tie with that
   block on specificity and win only on source order.

   The attribute stays rather than being stripped out of 341 selectors because
   removing it drops every one of them from (0,2,1) to (0,1,0), which turns a
   comfortable margin into a source-order coin toss.

   THE TYPE IS bbalance v1 «גוף», ported: Bellefair over Assistant, bone type on
   warm near-black ink, one madder accent, hard corners. That variation's own
   rule travels with it. Bellefair's hairlines vanish at small sizes on a dark
   ground, so the display face is spent ONLY on the headline and every piece of
   chrome and small print stays on Assistant.

   ROUND 2, after Ilai's notes:
     - the scene fraction ("05 / 10") is gone;
     - the darkening behind the text is a SMALL patch that hugs the words rather
       than a wash over the frame, and smaller again on a phone;
     - the button is a flat, opaque, solid block. No transparency anywhere;
       (OVERTURNED 2026-09-03 — see the button rule near the foot of this file:
        every button on the site is one translucent, blurred, rounded chip now.)
     - the block is PLACED PER SCENE in the photograph's own quiet area rather
       than dropped in the middle of every one. Scene 9 goes up onto the wall,
       which is where he asked for it.
   =========================================================================== */

html[data-variant="b"]{
  /* Prefixed, because --ink already means something else in the base sheet:
     the page's own type colour, which the dots read. Never revalue a token the
     other sheet owns. */
  --vb-ink:20,16,13;              /* warm near-black, as rgb parts for the scrim */
  --vb-bone:#ece5d8;
  --vb-bone-dim:rgba(236,229,216,.88);
  /* v1's madder is #e0704a, tuned for a flat #14100d ground. A photograph is
     not flat, so it is lifted here. It now also has to carry the button as a
     solid fill: #ef9068 under a #14100d label is 5.9:1. */
  --vb-madder:#ef9068;
  --vb-display:"Bellefair",Georgia,"Frank Ruhl Libre",serif;
  --vb-sans:"Assistant",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

/* The chrome moves to Assistant too, so the whole page reads as one voice.
   The display face is deliberately NOT applied here. */
html[data-variant="b"] body,
html[data-variant="b"] .menu a,
html[data-variant="b"] .lang,
html[data-variant="b"] .copy,
html[data-variant="b"] .hint,
html[data-variant="b"] .a11y-panel{font-family:var(--vb-sans)}

/* ---- the caption is a CARD now, not a full-frame layer ----

   Version A's caption spans the frame and darkens the foot of it. B's spans
   only itself: the box shrinks to its own longest line, and the darkening is a
   soft ellipse inside that box. That is the whole answer to "the blur is too
   large" — it is not a lighter wash over the picture, it is a much smaller one.
   Measured: the old ellipse dimmed 46% of the frame on average; this dims about
   a tenth of it.

   The card is positioned from its own centre, so a per-scene placement is one
   number and nothing reflows. */
html[data-variant="b"] .cap{
  left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
  /* THE CARD MUST LEAVE ROOM FOR ITS OWN PATCH. The ::before below is 128% of
     this width, and `.frame` clips whatever leaves it, so a card wider than
     about 78% of the frame gets its fade cut off at the film's edge and the
     hard vertical edges come straight back. 70% keeps the patch inside even on
     a narrow laptop window. */
  width:max-content;max-width:min(620px,70%);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:0;
  /* the padding IS the fade's runway; the text never reaches the edge */
  padding:clamp(30px,3.4vw,46px) clamp(38px,5vw,74px);
  /* NONE, not absent. The base sheet gives .cap version A's linear fade, and
     simply not declaring a background here leaves that fade painting this box:
     a hard-edged dark rectangle exactly the size of the card, which is what the
     phone was showing. The patch lives on the ::before below instead. */
  background:none;
  text-shadow:0 1px 3px rgba(var(--vb-ink),.92),0 4px 22px rgba(var(--vb-ink),.75);
}

/* ---- the patch: a SOFT RECTANGLE, not a sphere -------------------------

   Ilai, 2026-09-03: "the black blur under the text ... right now it looks like
   a sphere below the text. Make it more fade and less black. Both mobile and
   PC." He also said the buttons on the home page did not look transparent the
   way they do on the other pages -- and that turned out to be the same bug,
   not a second one: a near-opaque black disc behind a 13% glass button leaves
   it nothing to be transparent against.

   WHY THE OLD ONE WAS A SPHERE, AND WHY THAT WAS STRUCTURAL. A block of text is
   a RECTANGLE, and an inscribed ellipse misses a rectangle's corners. The only
   way an ellipse can cover a headline's upper corners is to hold a near-opaque
   plateau nearly all the way out and then fall off fast -- .95 at the centre,
   still .92 at 52%, .78 at 80%, zero at 100%. A flat dark core with a fast edge
   IS a sphere; that is what one looks like. No amount of re-tuning those stops
   fixes it, and the measurements say so: every softer curve tried on the same
   geometry put the worst headline between 1.5:1 and 2.9:1, because the corners
   fall out of the ellipse before the middle gets any lighter.

   SO THE SHAPE CHANGED. This is a solid rounded rectangle the size of the card,
   blurred. It covers a block of text evenly, which is the thing it has to
   cover, so it needs far less ink to reach the same corners, and a blur has no
   edge to see. The alpha went .95 -> .74 and the visible boundary went away.

   HOW THE NUMBERS RELATE. A CSS `blur(B)` is a Gaussian with sigma = B/2, so
   the alpha at distance d inside the rectangle's edge is A x PHI(d/sigma). The
   inset is 60px and the card's own padding is another 30-46px, so the text sits
   at least 90px inside the edge -- about 3.75 sigma -- and gets the full .74.
   The whole soft ramp happens OUTSIDE the card, over bare photograph, where
   there is nothing to read. That is the rule to keep: **the inset must stay >=
   the blur radius**, or the ramp starts eating into the headline, which is
   exactly the mistake that made an earlier attempt measure 1.8:1.

   MEASURED on every scene, on BOTH crops, by compositing this exact model
   (erf-based Gaussian edge) over the real photographs and sampling every pixel
   under every text box; the harness walks the live DOM for the geometry rather
   than assuming it. Worst case anywhere:

                     headline   body    button label
     desktop           6.60     5.58      4.94
     phone (-tall)     7.05     5.94      4.86

   The floor is 4.5:1. THE BUTTON'S LABEL IS THE BINDING CONSTRAINT, not the
   headline: it is 15-17px bold, which is NOT WCAG "large text", and it sits on
   its own 13% bone wash, which lifts its background before the label is read
   against it. .70 puts it at 4.31 on the phone and fails. Do not lighten this
   past .74 without re-measuring that label specifically.

   WHY NOT `backdrop-filter: brightness()`, WHICH WOULD BE BETTER. It would:
   darkening the photograph proportionally leaves shade untouched and only pulls
   the blown highlights down (the brightest pixel under scene 2's headline is
   (255,249,216), and it is highlights like that one which force the alpha here).
   It was built, and it renders NOTHING. `.cap.on` carries the `vbScrim` opacity
   animation, which composites the card into its own layer and makes it a
   backdrop root, so a `backdrop-filter` on a descendant has an empty backdrop
   to filter. Proved with three probes: the same element works as a child of
   `.frame` and of `.caps`, and fails inside `.cap`; a clone of `.cap` with
   `animation:none` works. It fails SILENTLY, leaving white text on a bare
   sunlit photograph, which is the worst failure mode available for the thing
   that keeps the words readable. Paint fails safe. Paint wins.

   z-index:-1 puts it behind the text without leaving the card, because the
   transform above already makes this a stacking context. */
html[data-variant="b"] .cap::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  /* PIXELS, not percentages: the blur below is in pixels, and the rule that
     keeps the text out of the ramp is a comparison between the two. A
     percentage inset on a short card would silently break it. */
  top:-60px;bottom:-60px;left:-60px;right:-60px;
  background:rgba(var(--vb-ink),.74);
  border-radius:90px;
  filter:blur(48px);
}

html[data-variant="b"] .cap-h{
  font-family:var(--vb-display);
  font-weight:400;                /* Bellefair ships one weight and needs no other */
  line-height:1.06;
  letter-spacing:0;
  color:var(--vb-bone);
  max-width:15ch;
}

/* THE SIGNATURE: a madder hairline that draws itself out from the centre as the
   headline lands. With the scene fraction gone this is the one piece of pure
   ornament in the design, and it is what carries the accent into the type.

   Its RESTING state is scaleX(1), declared here and not only inside the
   keyframes, so a visitor who has turned animations off gets a drawn rule
   rather than an invisible one. */
html[data-variant="b"] .cap-h::after{
  content:"";display:block;height:1px;
  width:min(180px,46%);margin:clamp(16px,2.1vw,26px) auto 0;
  background:var(--vb-madder);
  transform:scaleX(1);transform-origin:50% 50%;
}

html[data-variant="b"] .cap-b{
  font-family:var(--vb-sans);
  color:var(--vb-bone-dim);
  line-height:1.5;
  max-width:34ch;
  margin-top:clamp(14px,1.8vw,22px);
}

/* ---- the button ----
   Round 3. The flat madder block went first ("I don't like this color, reshape
   it, make it look more professional"), and Ilai picked this from four shown on
   the real page: a solid near-black block, bone label, one hairline of
   terracotta. Still completely opaque, which was the requirement before it.

   THE HAIRLINE IS WHAT IDENTIFIES IT, because the fill is close to the scrimmed
   photograph behind it, so WCAG 1.4.11's 3:1 lands on the boundary. #b3491d on
   #171310 is 3.42:1 and the label is 15.76:1. Same terracotta as the current
   tab marker in the bar, so the site has one strong accent rather than two. */
/* ROUND 5 (2026-09-03) REPLACED THE SOLID BLOCK ABOVE WITH THE GLASS CHIP.
   Ilai asked for one button for the whole site, and the one he pointed at was
   the translucent pair on the contact page — so the near-black fill and its
   terracotta hairline are gone from here too. The label keeps the card's own
   text-shadow rather than cancelling it: over a 13% wash the shadow is what
   holds the letters apart from whatever the photograph is doing behind them.

   The card's patch is rgba(20,16,13,.92) at its core, so this wash sits on
   near-black and the bone label measures 13.8:1 on it. The hairline carries
   the 3:1 that WCAG 1.4.11 wants for the boundary. */
html[data-variant="b"] .cap-btn{
  margin-top:clamp(20px,2.6vw,32px);
  background:var(--glass);
  color:var(--vb-bone);
  border:0;border-radius:var(--btn-r);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  box-shadow:inset 0 0 0 1px var(--glass-edge);
  min-height:54px;padding:0 clamp(30px,3.4vw,46px);
  font-family:var(--vb-sans);font-weight:700;letter-spacing:.03em;
  transition:background .18s ease,box-shadow .18s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  html[data-variant="b"] .cap-btn{background:var(--glass-solid)}
}
html[data-variant="b"] .cap-btn:hover{background:var(--glass-hi);
  box-shadow:inset 0 0 0 1px var(--glass-edge-hi)}
html[data-variant="b"] .cap-btn:active{background:var(--glass-on);transform:none}
html[data-variant="b"] .cap-btn:focus-visible{outline:3px solid var(--vb-bone);outline-offset:3px}

/* ---- the rings: the walk's ONLY buttons, on the last scene ----
   2026-09-17. Ilai: people he showed the site to clicked the caption buttons in
   the middle of the walk and "couldn't understand the flow". Every caption is
   text now, and the five destinations wait at the end of the walk as circles.
   Same glass as every other button on the site (wash + hairline + blur), only
   the shape changes. The label wraps inside the circle, which is why it is not
   nowrap like .cap-btn. Links inside #caps already stop the tap from advancing
   the walk (app.js), so these need no script. */
/* THE CLASS IS .dest, NEVER .ring. The loading ring in index.html is
   <svg class="ring">, invisible (#load.gone) but still laid over the whole
   film at z-index 9. The first version of these circles was .ring, so this
   rule gave that svg pointer-events:auto and a 1920x1904 box, and every tap on
   the circles landed on the invisible loader: "the buttons are not working".
   Before naming a class here, grep index.html for it.

   ONE ROW ON A DESKTOP. The 1920 card's content box (720 - 2 x 74 padding) was
   narrower than five 104px circles, so they wrapped 4+1 / 3+2; the test that
   passed had a 1160px frame. nowrap, and the card widens to hold the row
   (#cap-11 below). The phone block turns wrap back on for its 3+2. */
html[data-variant="b"] .cap-rings{
  display:flex;flex-wrap:nowrap;justify-content:center;
  gap:clamp(10px,1vw,16px);
  margin-top:clamp(22px,2.6vw,34px);

  --ring:calc(clamp(88px,5.4vw,104px) * var(--a11y-scale));
}
html[data-variant="b"] .dest{
  pointer-events:auto;box-sizing:border-box;
  width:var(--ring);height:var(--ring);border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 8px;
  background:var(--glass);color:var(--vb-bone);
  flex:none;
  /* a stronger frost than the bar chips: Ilai asked for "a little bit blur
     behind those buttons". It only renders because the entrance animation is
     on each circle, not on .cap-rings -- an opacity animation on the ROW makes
     it a backdrop root and every blur inside it paints nothing
     (backdrop-filter-backdrop-root). */
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
  box-shadow:inset 0 0 0 1px var(--glass-edge);
  font-family:var(--vb-sans);font-weight:700;line-height:1.15;
  font-size:calc(clamp(13px,.8vw,15px) * var(--a11y-scale));
  text-decoration:none;overflow-wrap:anywhere;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,box-shadow .18s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  html[data-variant="b"] .dest{background:var(--glass-solid)}
}
html[data-variant="b"] .dest:hover{background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--glass-edge-hi)}
html[data-variant="b"] .dest:active{background:var(--glass-on)}
html[data-variant="b"] .dest:focus-visible{outline:3px solid var(--vb-bone);outline-offset:3px}
/* the last card carries five circles, so it may be wider than the others. 74%
   still leaves the 128%-wide patch inside the frame on a 1024px window. */
html[data-variant="b"] #cap-11{max-width:min(900px,86%)}

/* ---- the type scale ----
   ONE declaration each, in this file only, so the base sheet's own .cap-* font
   sizes are replaced rather than fought with. Every one still multiplies by
   --a11y-scale: the text-size control has to keep working here exactly as it
   does on version A. */
/* The phone value is the clamp's floor rather than a second declaration in the
   phone block: a later plain rule beats a media query at equal specificity, so
   a phone-specific font-size here would be silently overridden by this line. */
html[data-variant="b"] .cap-h{font-size:calc(clamp(30px,4.2vw,64px) * var(--a11y-scale))}
html[data-variant="b"] .cap-b{font-size:calc(clamp(15px,1.15vw,20px) * var(--a11y-scale))}
html[data-variant="b"] .cap-btn{font-size:calc(clamp(15px,.95vw,17px) * var(--a11y-scale))}

/* ---- WHERE EACH SCENE'S CARD SITS ----

   Placed, not centred. `top` is the card's own centre as a percentage of the
   film box. These numbers are measured off the real photographs, and the block
   below the phone query re-measures them against the -tall cut, which keeps
   only 46% of the frame's width and is effectively a different picture.

   Scene 9 is Ilai's instruction rather than the measurement: the button belongs
   on the wall behind the furniture. Filled in by the survey; see the note at
   the end of this file. */
html[data-variant="b"] #cap-2 {top:66%}   /* the empty courtyard floor, under the sign and the mural */
html[data-variant="b"] #cap-3 {top:58%}   /* over the tables; the stARTup sign and the clock stay clear */
html[data-variant="b"] #cap-4 {top:68%}   /* the deck boards; the mural keeps the upper half */
html[data-variant="b"] #cap-5 {top:72%}   /* low, so the glass doors and the ear are untouched */
html[data-variant="b"] #cap-6 {top:66%}   /* on the sofa, with the three paintings above it */
html[data-variant="b"] #cap-7 {top:70%}   /* the rug, under the piano and the bar */
html[data-variant="b"] #cap-8 {top:62%}   /* the sofa and rug, leaving the drums and the piano */
html[data-variant="b"] #cap-9 {top:32%}   /* ON THE WALL, as asked. 6.1:1 up there */
html[data-variant="b"] #cap-10{top:48%}   /* across the lift doors, the one flat surface in the room */
html[data-variant="b"] #cap-11{top:68%}   /* the red floor; taller now it carries the five rings */

/* ---- the staged settle: three arrivals, one landing ----
   The 10k pattern: the headline rises, then the line under it, then the button.
   Nothing here declares a hiding state, on purpose. The container already owns
   visibility, so with animations off every child is simply visible and there is
   no rule that can strand one at opacity 0. */
@keyframes vbRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes vbDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vbScrim{from{opacity:0}to{opacity:1}}

/* THE SCRIM FADE IS ON THE PATCH, NOT ON THE CARD, and that is load-bearing
   rather than tidy. An opacity animation composites the element it runs on into
   its own layer, which makes it a BACKDROP ROOT: every `backdrop-filter` on a
   descendant then has an empty backdrop and renders nothing at all, silently.
   While this line read `.cap.on`, the caption button's `backdrop-filter:
   blur(12px)` was dead on the home page and nowhere else -- which is exactly
   what Ilai reported as "the buttons are not transparent in the home page like
   they are on the other pages".

   Moving it down to ::before costs nothing (the patch is the only child that
   was relying on the parent to fade it in; every other one animates itself) and
   it leaves `.cap` uncomposited, so the button frosts again.

   Do not put an opacity or transform animation back on `.cap`. */
/* `animation:none` IS NOT REDUNDANT. The base sheet gives `.cap.on` its own
   `capin` entrance, and this file used to happen to override it by declaring
   vbScrim on the same selector. Move the scrim down to ::before without
   cancelling capin here and the base animation comes back to life -- and its
   last keyframe is `transform:none`, which wipes the `translate(-50%,-50%)`
   that centres the card. The caption jumps to the bottom-right corner of the
   film box. Caught by measuring the card's centre, not by reading the rule. */
html[data-variant="b"] .cap.on{animation:none}
html[data-variant="b"] .cap.on::before{animation:vbScrim .45s ease both}
html[data-variant="b"] .cap.on .cap-h{animation:vbRise .62s cubic-bezier(.16,.84,.3,1) both}
html[data-variant="b"] .cap.on .cap-h::after{animation:vbDraw .75s cubic-bezier(.16,.84,.3,1) .26s both}
html[data-variant="b"] .cap.on .cap-b{animation:vbRise .62s cubic-bezier(.16,.84,.3,1) .16s both}
html[data-variant="b"] .cap.on .cap-btn{animation:vbRise .62s cubic-bezier(.16,.84,.3,1) .30s both}
html[data-variant="b"] .cap.on .dest{animation:vbRise .62s cubic-bezier(.16,.84,.3,1) .30s both}

/* THE prefers-reduced-motion BLOCK THAT USED TO SIT HERE IS THE BUG RONI
   REPORTED ON 2026-09-03: «the animation of the texts is not working on my
   computer». His Windows has «Animation effects» off, so Chrome and Edge
   report `reduce`, so these five rules cancelled the entire staged settle and
   the card simply appeared. It is the SAME cause as the films that vanished on
   the same machine a day earlier, in the one file that was not re-read then.
   The panel's «עצירת אנימציות» switch is the only thing that stops motion on
   this site; the rule for it is at the foot of this file. Do not put an OS
   media query back. */

/* ---- the copyright ----
   Version A drops the copyright's blur plate because the caption's fade is
   already behind it. Here the card is a small patch somewhere else entirely, so
   that line keeps its own plate. */
html[data-variant="b"]:root[data-cap] .copy{
  background:rgba(20,16,13,.34);
  -webkit-backdrop-filter:blur(11px) saturate(130%);
  backdrop-filter:blur(11px) saturate(130%);
}

/* ---- accessibility ----
   High contrast replaces the soft patch with a solid plate and a ruled edge,
   matching what that mode already does to the menu chips. Doubled attribute
   selector, like every other rule in that mode. */
html[data-variant="b"][data-a11y-contrast][data-a11y-contrast] .cap{
  background:#000;border:2px solid #fff;text-shadow:none}
/* the soft patch extends beyond the card, so under a solid plate it shows as a
   grey halo around it. High contrast means solid ink on solid ground; drop it. */
html[data-variant="b"][data-a11y-contrast][data-a11y-contrast] .cap::before{display:none}
html[data-variant="b"][data-a11y-contrast][data-a11y-contrast] .cap-h,
html[data-variant="b"][data-a11y-contrast][data-a11y-contrast] .cap-b{color:#fff}
html[data-variant="b"][data-a11y-contrast][data-a11y-contrast] .cap-h::after{background:#fff}
/* box-shadow:none — the terracotta hairline is an inset shadow, and high
   contrast is solid ink on a solid ground. */
html[data-variant="b"][data-a11y-contrast][data-a11y-contrast] .dest,
html[data-variant="b"][data-a11y-contrast][data-a11y-contrast] .cap-btn{
  background:#fff;color:#000;border:2px solid #000;text-shadow:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
html[data-variant="b"][data-a11y-motion] .cap.on::before,
html[data-variant="b"][data-a11y-motion] .cap.on,
html[data-variant="b"][data-a11y-motion] .cap.on .cap-h,
html[data-variant="b"][data-a11y-motion] .cap.on .cap-h::after,
html[data-variant="b"][data-a11y-motion] .cap.on .cap-b,
html[data-variant="b"][data-a11y-motion] .cap.on .cap-btn,
html[data-variant="b"][data-a11y-motion] .cap.on .dest{animation:none}

/* ---- the phone ----
   A smaller card again, and a smaller patch again: this is the screen Ilai
   called out. Placements are re-measured against the -tall cut rather than
   inherited from the wide one. */
@media (max-width: 900px){
  html[data-variant="b"] .cap{
    /* 76%, for the same reason as the desktop rule: 296px of a 390px screen
       leaves the 128%-wide patch 11px of clearance inside the film box. At the
       92% this was, the patch was wider than the frame, `.frame` clipped it,
       and the phone got two hard vertical edges through the middle of the
       picture — the exact fault Ilai reported, reintroduced by the fix for it. */
    max-width:min(300px,76%);
    padding:clamp(22px,5vw,28px) clamp(24px,6vw,32px);
  }
  /* The phone keeps the desktop's -22%, and the reason is measured: a headline
     is the widest and tallest thing in the card and it sits at the TOP, so its
     upper corners are the furthest point from the patch's centre and the first
     to fall out of it. At -16% two scenes' headlines came out at 3.15:1 and
     2.89:1 on the -tall cut. The taller patch, with the stops above, puts the
     worst on the whole phone walk at 6.0:1 for four points more coverage. */
  /* The -tall cut keeps only the middle 46% of the frame's width, so it is a
     different photograph and every placement is re-measured against it. The
     card covers between 22% and 41% of the film box here, where the old wash
     covered all of it. */
  html[data-variant="b"] #cap-2 {top:62%}   /* the courtyard floor */
  html[data-variant="b"] #cap-3 {top:50%}   /* the quietest band on this crop by a clear margin */
  html[data-variant="b"] #cap-4 {top:68%}   /* the deck */
  html[data-variant="b"] #cap-5 {top:72%}   /* the concrete, under the doors */
  html[data-variant="b"] #cap-6 {top:66%}   /* the sofa */
  html[data-variant="b"] #cap-7 {top:72%}   /* the rug */
  html[data-variant="b"] #cap-8 {top:58%}   /* the sofa and rug */
  html[data-variant="b"] #cap-9 {top:30%}   /* ON THE WALL: the brick runs 11% to 44% on this crop */
  html[data-variant="b"] #cap-10{top:48%}   /* the lift doors */
  html[data-variant="b"] #cap-11{top:54%}   /* the rings make this card tall: centred, so it fits the box */
  /* three rings then two. The card's content box on a 390px phone is 240px
     (measured), so 3 x 72 + 2 x 8 = 232 is what fits; 76px wrapped to 2-2-1. */
  html[data-variant="b"] .cap-rings{flex-wrap:wrap;gap:8px;--ring:calc(72px * var(--a11y-scale));max-width:232px;margin-top:18px}
  html[data-variant="b"] .dest{font-size:calc(12px * var(--a11y-scale));padding:0 5px}
}

/* ---- A SHORT FILM BOX (the small phones) ----

   375x667 leaves a film box 389px tall, and the card plus its patch is about
   336 of that. Measured there at 100% text: the card itself hung 11px out of
   the frame and the patch was clipped on three scenes, which brings the hard
   edges straight back. Two things give:

   1. Every placement comes back to the middle. The per-scene positions are a
      luxury that needs room above and below the card, and there is none here.
   2. The card gets smaller: a shorter headline floor, a tighter button (still
      over the 44px touch minimum), less padding, and a smaller runway on the
      patch.

   Anything with a film box over ~460px tall, which is every current phone in
   portrait, keeps the full treatment. */
@media (max-width: 900px) and (max-height: 740px){
  html[data-variant="b"] .cap{
    max-width:min(288px,80%);
    padding:18px 22px;
  }
  /* A SMALLER CARD TAKES A SMALLER PATCH, and the two numbers move together:
     the inset must stay >= the blur radius or the ramp starts eating into the
     headline. 52/44 keeps the same margin the desktop's 60/48 does. The alpha
     does not change -- it is set by the photographs, not by the screen -- and
     it is measured on the -tall crop, which is a different picture: worst case
     there is 7.05 headline, 5.94 body, 4.86 button label. */
  html[data-variant="b"] .cap::before{
    top:-52px;bottom:-52px;left:-52px;right:-52px;
    border-radius:64px;filter:blur(44px);
  }
  html[data-variant="b"] .cap-h{font-size:calc(26px * var(--a11y-scale));max-width:14ch}
  html[data-variant="b"] .cap-b{font-size:calc(14px * var(--a11y-scale));margin-top:11px}
  html[data-variant="b"] .cap-h::after{margin-top:12px;width:min(140px,44%)}
  html[data-variant="b"] .cap-btn{min-height:46px;margin-top:14px;padding:0 24px;
    font-size:calc(14px * var(--a11y-scale))}
  html[data-variant="b"] #cap-2,html[data-variant="b"] #cap-3,
  html[data-variant="b"] #cap-4,html[data-variant="b"] #cap-5,
  html[data-variant="b"] #cap-6,html[data-variant="b"] #cap-7,
  html[data-variant="b"] #cap-8,html[data-variant="b"] #cap-9,
  html[data-variant="b"] #cap-10,html[data-variant="b"] #cap-11{top:50%}
  /* the short box: the ring card measured 419px against a 395px film box.
     Smaller rings and tighter spacing bring it inside. */
  html[data-variant="b"] .cap-rings{gap:6px;--ring:calc(58px * var(--a11y-scale));max-width:188px;margin-top:12px}
  html[data-variant="b"] .dest{font-size:calc(11px * var(--a11y-scale));padding:0 3px}
}

/* ---- a phone turned sideways ----
   Restated, because the base sheet's guard is a bare .cap and every rule in
   this file outranks it. Same reasoning: about 110px of film is left there,
   and the bar above is already showing all five section buttons. */
@media (max-width: 900px) and (max-height: 560px){
  html[data-variant="b"] .cap,
  html[data-variant="b"]:root:not([data-js]) .cap[data-first]{display:none}
}