/* ═══════════════════════════════════════════════
   WHAT'S INSIDE — the per-product anatomy diagram

   The construction is laid out on a soft pastel panel
   inset into the cream page — one tint per product,
   from that product's own family. The sheets cascade,
   each one stepped up and to the right of the one
   below, so every layer shows a crescent of its own
   outline instead of hiding behind the sheet above it.

   They are real materials. Each sheet's face runs
   through an SVG lighting filter — fractal noise as a
   bump map, shaded by one fixed light up and to the
   left — so the topsheet is matte fibre, the core is
   deep fluff, the backsheet and release paper carry a
   specular sheen, and the wrapper is a directional
   weave. Over that goes dome shading, the printed
   texture, a rolled edge catching the light, and the
   shadow the sheet drops on the one beneath.

   Only the **labels** are interactive. Pointing at
   one — or focusing it, or tapping it — lights the
   sheet it names and its marker, and fades the rest.
   The pad itself never responds to a pointer: it is
   not a control, its markers are spans, and nothing
   in the stack moves.

   Content, copy and layer inventory come from each
   product's own final-design dieline.

   Every visual value is a custom property with a
   default, so the whole look retunes without touching
   a rule. studio.html drives these live.
   ═══════════════════════════════════════════════ */

.anatomy{background:var(--cream)}
.anat[hidden]{display:none}          /* author display below would beat [hidden] */

/* ── DEFAULTS ─────────────────────────────────── */
.anat{
  /* --accent and --b1..--b3 are set per product, inline in the markup, as is
     --n (how many sheets this product's stack has) and each sheet's own --l */
  --garnet:#88012a;   /* brand wine — all the section's text */

  /* the panel. A soft pastel, tinted per product in the markup — the page
     around it stays cream, so the panel reads as an inset surface. */
  --panel:#f2e4e7;
  --panel-2:#fbf2f1;
  --stage-radius:30px;
  --stage-shadow:0;   /* was .30 — shadows removed (Vasian, 2026-10-02) */
  --panel-rim:.55;
  --grain-op:.20;      /* paper tooth over the panel */

  /* colour washed across the panel */
  --bloom-blur:62px;
  --bloom-opacity:.42;
  --bloom-sat:1.05;
  --b1x:16%;  --b1y:24%;  --b1r:46%;
  --b2x:84%;  --b2y:18%;  --b2r:44%;
  --b3x:52%;  --b3y:92%;  --b3r:48%;
  --b4x:70%;  --b4y:62%;  --b4r:36%;   /* the accent bloom */

  /* the plate the stack sits on */
  --glass-radius:26px;
  --glass-wash:.18;
  --glass-border:.34;
  --floor-op:.30;      /* the shadow the stack drops on the plate */
  --floor-blur:18px;

  /* the stack */
  --tiltX:20deg;      /* how far the stack leans away from the reader */
  --tiltZ:-5deg;      /* and how far it leans left */
  --pad-scale:1;
  --pl-w:60%;         /* a sheet's box, as a share of the stack's — generous,
                         so every silhouette fits to height and the three
                         products stay in proportion to each other */
  --pl-h:55%;
  --step-x:13%;       /* how far each sheet steps right of the one below */
  --step-y:13.5%;     /*  … and up */
  --step-z:26px;      /*  … and toward the reader */
  --spread:1;         /* opens further while a part is engaged */

  /* a sheet's material */
  --face-op:.95;      /* set per sheet in the markup. Only the topsheet is
                         translucent, and only so the chip beneath it reads. */
  --edge-w:1.6;
  --edge-op:.5;       /* the outline is drawn ink, not a lit edge */
  --tex-op:.92;
  --sheet-shadow:.26; /* what each sheet drops on the one below */
  --dome-op:.72;      /* how domed each sheet reads */
  --lit-edge:2.6;     /* the named sheet's outline thickens in the accent */

  /* floating callout cards */
  --card-bg:.86;
  --card-radius:16px;
  --card-border:.9;
  --card-shadow:0;    /* was .5 — no shadows on the diagram (Vasian, 2026-10-02) */
  --card-blur:10px;
  --card-lift:1.045;

  /* marker orbs */
  --orb-size:13px;
  --orb-glow:9px;
  --orb-ring:3px;
  --orb-active:1.55;

  --dim:.32;          /* the labels and markers that were not named */

  max-width:1180px; margin:0 auto;
  padding:clamp(56px,8vh,92px) 20px clamp(70px,11vh,120px);
}

/* ── header, on the page's own cream ── */
.anat__head{max-width:640px; margin:0 auto clamp(28px,4vh,42px); text-align:center}
.anat__eyebrow{
  margin:0 0 12px; font:600 11px/1 var(--sans);
  letter-spacing:.28em; text-transform:uppercase; color:var(--garnet);
}
.anat__heading{
  margin:0 0 10px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,3.4vw,34px); line-height:1.28; color:var(--ink);
  text-wrap:balance;
}
.anat__heading em{font-style:italic; color:var(--garnet)}
.anat__spec{
  margin:0; color:var(--ink-soft);
  font:500 11.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
}

/* ── the panel ── */
.anat__stage{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; align-items:center;
  grid-template-columns:1fr minmax(230px,380px) 1fr;
  gap:clamp(8px,1.4vw,20px);
  max-width:980px; margin:0 auto;
  padding:clamp(34px,4.4vw,58px) clamp(16px,2.4vw,32px);
  border-radius:var(--stage-radius);
  background:
    radial-gradient(120% 88% at 50% 4%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(168deg, var(--panel-2), var(--panel) 64%);
  box-shadow:
    0 34px 70px -34px rgba(84,20,44,var(--stage-shadow)),
    0 0 0 1px rgba(255,255,255,var(--panel-rim)) inset;
}

/* colour on the panel: big soft washes, low contrast on purpose */
.anat__blooms{
  position:absolute; inset:-28%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at var(--b1x) var(--b1y), var(--b1) 0%, transparent var(--b1r)),
    radial-gradient(circle at var(--b2x) var(--b2y), var(--b2) 0%, transparent var(--b2r)),
    radial-gradient(circle at var(--b3x) var(--b3y), var(--b3) 0%, transparent var(--b3r)),
    radial-gradient(circle at var(--b4x) var(--b4y), var(--accent) 0%, transparent var(--b4r));
  filter:blur(var(--bloom-blur)) saturate(var(--bloom-sat));
  opacity:var(--bloom-opacity);
}
/* paper tooth over the panel — fractal noise multiplied into the wash, so the
   surface the sheets lie on has a grain of its own. Sits under the cards, or
   multiply would dirty them. */
.anat__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:var(--stage-radius);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:var(--grain-op);
  mix-blend-mode:multiply;
}
.anat__art{position:relative; z-index:2}
/* above the photo's plate: the connector lines start in this column and have
   to cross over the plate to reach the pad, or they disappear under it */
.anat__col{position:relative; z-index:3}

/* ── the label columns ──
   Each label sits at the height of the layer it names (--y, measured off the
   photograph), not in an evenly spaced stack. That is the whole point of an
   exploded view: the line from the word runs straight to the thing. Evenly
   spaced labels with connector lines pointing nowhere in particular is what
   the old drawn version did, and it read as decoration. */
.anat__col{position:relative; align-self:stretch}
.anat__col .acall{
  position:absolute; top:var(--y,50%);
  max-width:100%;
  z-index:1;
}
/* The active label wins the stack. The chip's list unfolds into space the
   label below it occupies, and being clipped by a neighbour is the one thing
   that makes an expanding panel look broken rather than layered. Everything
   else is dimmed at that moment anyway. */
.anat__col .acall.is-on,
.anat__col .acall:hover,
.anat__col .acall:focus-visible{z-index:4}
.anat__col--l{text-align:right}
.anat__col--l .acall{right:0}
.anat__col--r{text-align:left}
.anat__col--r .acall{left:0}

/* ── the plate the stack lies on ── */
/* ── the plate the photograph sits on ──
   Neutral on purpose. The photograph carries its own warm-grey studio
   background, and a tinted glass plate under it turned the whole thing
   muddy — two greys arguing. A near-white card reads as a deliberate frame
   around real product photography instead. */
.anat__art{
  margin:0; line-height:0;
  padding:clamp(10px,1.6vw,18px);
  border-radius:var(--glass-radius);
  background:linear-gradient(150deg, #fbf9f7, #f4f1ee);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:none;   /* no shadows on the diagrams (Vasian, 2026-10-02) */
}

/* ══ the stack ══
   Sheets bottom to top: wrapper, release film, backsheet, absorbent core,
   the chip, breathable topsheet — whichever of those this product actually
   has. --i is the sheet's place in that order and --n how many there are,
   so the cascade centres itself whatever the count. */
.pad{
  position:relative; width:100%; margin:0 auto;
  aspect-ratio:300/var(--pad-h,400);
  transform-style:preserve-3d;
  transform:rotateX(var(--tiltX)) rotateZ(var(--tiltZ)) scale(var(--pad-scale));
}
/* the shadow the whole stack drops on the plate */
.pad__floor{
  position:absolute; left:50%; top:88%; z-index:0;
  width:82%; height:22%; pointer-events:none;
  transform:translate(-50%,-50%) translateZ(-40px);
  background:radial-gradient(closest-side ellipse at 50% 50%, rgba(84,20,44,.5), transparent 74%);
  opacity:var(--floor-op);
  filter:blur(var(--floor-blur));
}

.pl{
  position:absolute; left:50%; top:50%;
  width:var(--pl-w); height:var(--pl-h);
  transform-style:preserve-3d;
  /* the sheet's place measured from the middle of the stack, so index 0
     sits as far below centre as the top sheet sits above it */
  --off:calc(var(--i) - (var(--n) - 1) / 2);
  transform:
    translate(-50%,-50%)
    translate3d(
      calc(var(--off) * var(--step-x) * var(--spread)),
      calc(var(--off) * var(--step-y) * -1 * var(--spread)),
      calc(var(--off) * var(--step-z) * var(--spread)));
  transition:transform .6s var(--ease), opacity .35s var(--ease);
  pointer-events:none;
}

.pl__svg{
  width:100%; height:100%; display:block; overflow:visible;
  /* the silhouette's own shadow, so a sheet sits ON the one below rather than
     floating in front of it — this is what makes the cascade read as a stack */
  filter:drop-shadow(0 7px 9px rgba(84,20,44,var(--sheet-shadow)));
}

/* a sheet is a material. Only the topsheet stays a little translucent, and
   only so the chip beneath it still reads through. */
.pl__face{
  fill:var(--l); fill-opacity:var(--face-op);
}
.pl__edge{
  fill:none; stroke:var(--ink-l,#6b3a44);
  stroke-width:var(--edge-w); stroke-opacity:var(--edge-op);
  transition:stroke .3s var(--ease), stroke-width .3s var(--ease);
}
.pl__tex, .pl__quilt{pointer-events:none; opacity:var(--tex-op)}

/* the absorbent zone — embossed into the topsheet, SAP-rich in the core.
   A real core does not run to the edge of the pad, and showing that is most
   of what makes the stack read as a pad rather than five copies of a shape. */
.pl__zone{pointer-events:none; opacity:var(--tex-op)}
/* a pad is thicker down the middle and rolls off at the edge — the same soft
   dome over every sheet is what stops them reading as cut paper */
.pl__dome{pointer-events:none; opacity:var(--dome-op)}
.pl__chip-dome{pointer-events:none; opacity:var(--dome-op)}
.pl__chip-edge{
  fill:none; stroke:var(--ink-l,#6b3a44); stroke-opacity:.4;
  stroke-width:1.4; pointer-events:none;
}

.pl__zone-fill{fill:var(--ink-l,#6b3a44); fill-opacity:.055; pointer-events:none}
.pl__zone-line{
  fill:none; stroke:var(--ink-l,#6b3a44); stroke-opacity:.28;
  stroke-width:1.6; pointer-events:none;
}
/* the crimp pressed in just inside the outline, sealing topsheet to backsheet */
.pl__seal{
  fill:none; stroke:var(--ink-l,#6b3a44); stroke-opacity:.14;
  stroke-width:1.4; stroke-dasharray:5 4; pointer-events:none;
}
/* the adhesive bands the release paper covers */
.pl__glue{pointer-events:none; opacity:.85}
.pl__glue-edge{
  fill:none; stroke:var(--ink-l,#6b3a44); stroke-opacity:.3;
  stroke-width:1.3; pointer-events:none;
}
/* where the release paper is split so it peels in two */
.pl__split{
  fill:none; stroke:var(--ink-l,#6b3a44); stroke-opacity:.3;
  stroke-width:1.6; stroke-dasharray:9 6; pointer-events:none;
}
.pl__tab{
  fill:#fff; fill-opacity:.42; stroke:var(--ink-l,#6b3a44);
  stroke-opacity:.26; stroke-width:1.3; pointer-events:none;
}
/* the sealed, serrated ends of the wrapper */
.pl__crimp{
  fill:none; stroke:var(--ink-l,#6b3a44); stroke-opacity:.34;
  stroke-width:1.5; stroke-linecap:round; pointer-events:none;
}
.pl__fold{
  fill:none; stroke:var(--ink-l,#6b3a44); stroke-opacity:.16;
  stroke-width:1.4; pointer-events:none;
}

/* the chip is a real tile, not a full sheet — it sits between core and topsheet */
.pl__chip rect{
  fill:var(--l); fill-opacity:var(--face-op);
}
.pl__motif{fill:none; stroke:#fff; stroke-opacity:.92; stroke-width:2.4; stroke-linecap:round}

/* markers ride their own plane and are counter-rotated back to face the reader */
.pl__pins{
  position:absolute; top:0; left:50%; height:100%;
  aspect-ratio:var(--sil-ar, 300/862);
  transform:translateX(-50%);
  transform-style:preserve-3d;
}
.pl__pins .adot{
  transform:translate(-50%,-50%)
    rotateZ(calc(var(--tiltZ) * -1)) rotateX(calc(var(--tiltX) * -1));
}



/* ── the photograph ──
   Replaces the drawn SVG cascade. The pad is rendered as real product
   photography (see assets/anatomy/) rather than simulated with filters —
   two attempts at faking the materials in SVG both read as illustration. */
.anat__photo{
  display:block; width:100%; height:auto;
  border-radius:calc(var(--glass-radius) - 6px);
}

.anat__cap{
  margin:14px 0 0; text-align:center;
  font:500 11px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ── a callout, floating above the panel ── */
.acall{
  position:relative; appearance:none; cursor:pointer; width:fit-content; max-width:25ch;
  background:rgba(255,255,255,var(--card-bg)); color:var(--garnet);
  border:1px solid rgba(255,255,255,var(--card-border)); border-radius:var(--card-radius);
  padding:12px 16px; text-align:inherit;
  font:600 12.5px/1.4 var(--sans); letter-spacing:.005em;
  -webkit-backdrop-filter:blur(var(--card-blur)) saturate(1.1);
  backdrop-filter:blur(var(--card-blur)) saturate(1.1);
  box-shadow:
    0 12px 24px -14px rgba(74,16,42,var(--card-shadow)),
    0 1px 0 rgba(255,255,255,.95) inset;
  transition:opacity .45s var(--ease), transform .3s var(--ease),
             box-shadow .3s, background .3s, border-color .3s;
}
.acall__t{display:block}
/* ── the chip's claims ──
   Folded away until the chip is the thing being looked at. Left open, this
   list is 160px tall in a column that also has to hold the topsheet and the
   backsheet labels at their own layers' heights, and it lands on top of
   both. It is also the only label whose body is not about the layer itself
   but about what the layer does — which is exactly the kind of thing that
   belongs behind a deliberate look, not in the resting state. */
.acall__list{
  display:grid;
  /* grid-template-rows alone collapses only the FIRST row — the other four
     claims land in implicit rows, which stay `auto` and keep the list 93px
     tall while it is supposed to be shut. grid-auto-rows is what actually
     folds it. */
  grid-template-rows:0fr; grid-auto-rows:0fr;
  margin-top:0; overflow:hidden;
  opacity:0;
  transition:grid-template-rows .32s var(--ease), grid-auto-rows .32s var(--ease),
             opacity .24s, margin-top .32s var(--ease);
}
.acall__list > *{min-height:0}
.acall.is-on .acall__list,
.acall:hover .acall__list,
.acall:focus-visible .acall__list{
  /* auto, not 1fr: equal rows would stretch every one-line claim to the
     height of the two-line one and the list reads as badly spaced */
  grid-template-rows:1fr; grid-auto-rows:auto; margin-top:8px; opacity:1;
}
.acall__list span{
  display:block; position:relative; padding-left:14px;
  font-weight:500; font-size:12px; line-height:1.55; color:var(--garnet);
}
.acall__list span::before{
  content:''; position:absolute; left:2px; top:.58em;
  width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 7px var(--accent);
}
.acall--chip{max-width:28ch}
.acall--chip .acall__t{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-align:center;
}

/* the connector: shaft + head, pointing from the pill toward the stack */
/* The connector has to cross the gap between the label column and the pad
   itself — and the pad sits inside the photograph's own margin, not at its
   edge. A line that stops at the image border points at grey background and
   reads as decoration, which is exactly what the old version did. */
.acall{--conn:clamp(34px,6.4vw,86px); --sh:.72}
/* Most labels hang off the middle of their own box. The chip's does not: it
   carries a bullet list and is several times taller than the rest, so
   centring it puts half that list over the label above. --line-at pins the
   connector near its top instead and lets the box grow downward, into empty
   space. */
.acall{--line-at:50%}
.acall--chip{--line-at:22px}
.acall::before,
.acall::after{
  content:''; position:absolute; top:var(--line-at); opacity:1;
  /* the shaft scales and the head rides with it — animating `width` here
     would relayout the pseudo-element on every frame */
  transition:opacity .25s, transform .25s var(--ease);
}
.acall::before{width:var(--conn); height:2px; border-radius:2px; background:currentColor}
.acall::after{
  width:6px; height:6px; margin-top:-3px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
}
.anat__col--l .acall::before{
  left:100%; margin-top:-1px; transform-origin:left center; transform:scaleX(var(--sh));
}
.anat__col--l .acall::after{
  left:calc(100% + var(--conn) - 6px);
  transform:translateX(calc((var(--sh) - 1) * var(--conn))) rotate(45deg);
}
.anat__col--r .acall::before{
  right:100%; margin-top:-1px; transform-origin:right center; transform:scaleX(var(--sh));
}
.anat__col--r .acall::after{
  right:calc(100% + var(--conn) - 6px);
  transform:translateX(calc((1 - var(--sh)) * var(--conn))) rotate(-135deg);
}

/* ── a marker on a sheet: a lit orb ── */
/* ── focus, always visible. The labels are the only focusable things here. ── */
.acall:focus-visible{outline:2px solid var(--garnet); outline-offset:3px}

/* ── named / not named ──
   Driven by a class on the stage rather than :hover alone, so tap and keyboard
   land in the same state as a mouse. Only the labels are ever the trigger. */
.anat__stage.has-active .acall:not(.is-on),
.anat__stage.has-active .adot:not(.is-on){opacity:var(--dim)}
.anat__stage.has-active .acall.is-on{
  background:#fff;
  border-color:color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:
    0 0 0 1.5px var(--accent),
    0 1px 0 rgba(255,255,255,.95) inset;
  transform:scale(var(--card-lift));
  --sh:1;
}
.anat__stage.has-active .adot.is-on{
  transform:translate(-50%,-50%) scale(var(--orb-active));
  box-shadow:
    0 0 0 calc(var(--orb-ring) + 1px) rgba(255,255,255,.9),
    0 4px 12px rgba(74,16,42,.45),
    0 0 calc(var(--orb-glow) * 1.8) var(--accent);
}
/* the sheet the named part lives on: everything else steps back */
.anat__stage.has-active .pl{opacity:.55}
.anat__stage.has-active .pl.is-lit{opacity:1}
.anat__stage.has-active .pl.is-lit .pl__edge{
  stroke:var(--accent); stroke-opacity:1; stroke-width:var(--lit-edge);
}

.adot{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:var(--orb-size); height:var(--orb-size); border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #fff 0%, var(--accent) 62%);
  box-shadow:
    0 0 0 var(--orb-ring) rgba(255,255,255,.85),
    0 4px 10px rgba(74,16,42,.4),
    0 0 var(--orb-glow) var(--accent);
  transition:opacity .3s, transform .3s var(--ease), box-shadow .3s;
}



/* ── the reveal ──
   The panel lands first, then the labels and markers arrive one after
   another. Only opacity is staggered: .acall and .adot already own their
   transform for the parallax and the active state. */
.anat{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.anat.is-in{opacity:1; transform:none}

/* hidden only when JS is present to reveal them again — without this the
   labels are invisible with no fallback if the script never runs */
:root.anat-js .anat .acall, :root.anat-js .anat .adot{opacity:0}
:root.anat-js .anat.is-in .acall, :root.anat-js .anat.is-in .adot{opacity:1}
.anat.is-in .acall, .anat.is-in .adot{opacity:1}
.anat .acall{transition:opacity .45s var(--ease), transform .35s var(--ease),
             box-shadow .3s, background .3s, border-color .3s}
.anat.is-in .anat__col--l .acall:nth-child(1){transition-delay:.18s}
.anat.is-in .anat__col--l .acall:nth-child(2){transition-delay:.24s}
.anat.is-in .anat__col--l .acall:nth-child(3){transition-delay:.30s}
.anat.is-in .anat__col--l .acall:nth-child(4){transition-delay:.36s}
.anat.is-in .anat__col--r .acall:nth-child(1){transition-delay:.21s}
.anat.is-in .anat__col--r .acall:nth-child(2){transition-delay:.27s}
.anat.is-in .anat__col--r .acall:nth-child(3){transition-delay:.33s}
.anat.is-in .adot:nth-of-type(1){transition-delay:.34s}
.anat.is-in .adot:nth-of-type(2){transition-delay:.39s}
.anat.is-in .adot:nth-of-type(3){transition-delay:.44s}
.anat.is-in .adot:nth-of-type(4){transition-delay:.49s}
.anat.is-in .adot:nth-of-type(5){transition-delay:.54s}
/* once something is named, the dimming owns opacity — drop the entrance delays
   so the response is immediate instead of replaying the stagger */
.anat__stage.has-active .acall,
.anat__stage.has-active .adot{transition-delay:0s !important}
/* once something is picked, the dimming owns opacity — drop the entrance delays
   so highlighting responds immediately instead of replaying the stagger */

/* the stack itself rises into place with the rest */
:root.anat-js .anat .pad{opacity:0}
:root.anat-js .anat.is-in .pad{opacity:1; transition:transform .55s var(--ease), opacity .7s var(--ease) .1s}
.anat.is-in .pad{opacity:1}

@media (prefers-reduced-motion:reduce){
  .anat{opacity:1; transform:none; transition:none}
  .acall, .adot, .anat__art, .anat__blooms{transition:none; transform:none}
  .pad{transition:none}
  .pl{transition:opacity .001s}
  /* land on the final state, never mid-stagger */
  .anat .acall, .anat .adot, .anat .pad{opacity:1; transition-delay:0s}
  .anat__stage.has-active .acall:not(.is-on),
  .anat__stage.has-active .adot:not(.is-on){opacity:var(--dim)}
  .anat__stage.has-active .acall.is-on{transform:none}
  .anat__stage.has-active .adot.is-on{transform:translate(-50%,-50%)}
}

/* ── phones: the stack on top, callouts a readable list beneath ── */
@media (max-width:820px){
  .anat__stage{
    grid-template-columns:1fr; gap:clamp(14px,3vh,22px);
    padding:22px 16px 26px; border-radius:calc(var(--stage-radius) - 6px);
  }
  .anat__grain{border-radius:calc(var(--stage-radius) - 6px)}
  .anat__art{order:-1; max-width:340px; margin:0 auto; padding:10px}
  /* less lean and a shorter cascade, or the stack outgrows a narrow column */
  .anat{--tiltX:15deg; --tiltZ:-4deg; --step-y:10%; --step-x:8%; --pad-scale:.98}
  /* ── the side-labels layout does not survive one column ──
     Labels pinned to their layer's height need a column beside the photo to
     be pinned in. Stacked, they land on top of the photograph and hide the
     very thing they are describing. Below this width they go back to being
     an ordinary list under the picture, and the connector lines — which now
     point at nothing — are switched off with them. */
  .anat__col{position:static; display:flex; flex-direction:column; gap:9px}
  .anat__col .acall{position:static; top:auto; z-index:auto}
  .anat__col--l, .anat__col--r{align-items:stretch; text-align:left}
  /* the chip's list is not competing for space here, so let it stand open */
  .acall__list{grid-template-rows:1fr; margin-top:8px; opacity:1}
  .anat__col--l .acall:nth-child(2), .anat__col--r .acall:nth-child(2){margin:0}
  .acall{max-width:none; width:100%; font-size:12.5px; padding:13px 16px}
  .acall--chip{max-width:none}
  .acall--chip .acall__t{text-align:left}
  /* the connectors point at a stack that is no longer beside them */
  .acall::before, .acall::after{display:none}
  .adot{width:calc(var(--orb-size) + 2px); height:calc(var(--orb-size) + 2px)}
  /* no pointer to follow on touch */
  .anat__blooms, .anat__art, .acall{transform:none}
}