/* THE CAPSULE — the flagship's floating glass bar, for every page that is not the flagship (v7, owner
   brief 27 Oct 2026: "that glass tab containing every section should be of this same design in every
   section and page … design should be in continuation"). Served at /static/lv-capsule.css and linked
   by every static_v2 page, the Studio and the legal shell; behaviour is /static/lv-nav.js.

   ONE FILE, NOT A TWIN PER SURFACE. The Studio and the legal pages do not load leorve.css (and the
   legal pages must not: its page base restyles body, headings and links), so a block inside
   leorve.css would have needed two hand-kept copies. /static is FastAPI's own mount — the same app
   that serves /studio and /legal/* — so it is present in every deployment mode, the reason
   dotfield.css already lives there for three surfaces (api/main.py _StaticCode).

   THE VALUES ARE THE FLAGSHIP'S, COPIED, NOT RE-CUT. web/app/globals.css (the Vitrine material block,
   .lv-bar / .lv-capsule / .lv-menu / .lv-bag-count / a.lv-acct) is canonical; tests/test_capsule_parity.py
   reads both files and fails when a number here leaves it. Every token is namespaced --lvn-* and
   declared on .lv-head, so no page's own ramp (leorve.css re-points --r-xl inside one band, the Studio
   has its own --vellum-* glass) can reach the bar, and nothing here leaks into a page.

   DEAD-NEUTRAL: every tint below is black or white alpha; every saturate() is <= 1. */

.lv-head {
  --lvn-ink: #111111;
  --lvn-ink-2: #444444;
  --lvn-paper: #FFFFFF;
  --lvn-line: #E6E6E4;
  --lvn-line-2: #D4D4D1;
  --lvn-on-image: #FFFFFF;
  --lvn-on-image-sh: 0 1px 12px rgba(0, 0, 0, .35);
  --lvn-font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --lvn-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --lvn-ease: cubic-bezier(.16, 1, .3, 1);
  --lvn-ease-glide: cubic-bezier(.32, .72, 0, 1);
  --lvn-gutter: clamp(18px, 5vw, 64px);
  /* THE CAPSULE'S GLASS (globals.css --nav-*): Vellum everywhere, clear only over a dark band. */
  --lvn-nav-fill: rgba(255, 255, 255, .82);
  --lvn-nav-fx: blur(24px) saturate(.8);
  --lvn-nav-clear: rgba(255, 255, 255, .08);
  --lvn-nav-clear-line: rgba(255, 255, 255, .16);
  --lvn-nav-clear-hi: inset 0 1px 0 rgba(255, 255, 255, .16);
  --lvn-nav-clear-sheen: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 50%);
  --lvn-nav-clear-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  /* VELLUM (globals.css --vellum-*): the capsule's edge, sheen and shadow, and the menu's glass. */
  --lvn-vellum-fx: blur(28px) saturate(.7);
  --lvn-vellum-line: rgba(17, 17, 17, .08);
  --lvn-vellum-sheen: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 42%);
  --lvn-vellum-hi: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35);
  --lvn-vellum-shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 18px 40px -22px rgba(17, 17, 17, .28);
  --lvn-vellum-menu-fill: rgba(255, 255, 255, .94);
  --lvn-vellum-solid: #FAFAFA;
  /* THE CAPSULE'S GEOMETRY. rest = its top before the first 25px of scroll, stuck = after. Pages read
     the two :root tokens below, never these. Phone values are in the media block. */
  --lvn-rest: 40px;
  --lvn-stuck: 12px;
  --lvn-h: 60px;
  position: absolute;
  inset: 0 0 auto 0;
  /* 100, NOT THE FLAGSHIP'S 50: every static_v2 page's own layers were built under .lv-chrome's 100
     (the Plus sheet, the wardrobe's selection bar, the quiz's foot), so the capsule keeps the slot
     the bar it replaces held. Invisible on the flagship's terms — nothing there competes. */
  z-index: 100;
  /* NO transform, filter, contain OR will-change, EVER: any of them would make this header the
     containing block of the FIXED rail inside it (the rail would scroll away) and the capsule's
     backdrop root (it would blur nothing). globals.css .lv-head records the same rule. */
}
/* WHAT A PAGE OFFSETS ITS CONTENT BY, now that the bar floats instead of taking 75px of flow.
   --lv-nav-foot  where the capsule ends AT REST: a page's first block adds it to the top padding it
                  already had under the old in-flow bar, so the air under the bar is unchanged.
   --lv-nav-safe  what a sticky element, a scrolled-to anchor or a measured offset (--rx-top, --tq-bar)
                  stays below once the capsule has settled: its foot + 8. Typed, not measured: the
                  capsule's height is fixed and its row cannot wrap, so there is nothing to follow. */
:root {
  --lv-nav-foot: 100px;    /* rest 40 + capsule 60 */
  --lv-nav-safe: 80px;     /* stuck 12 + capsule 60 + 8 */
}
/* An address with a #fragment, and every in-page jump, lands below the settled capsule. shop.html's own
   96px is deleted in favour of this one. styling.html KEEPS its own sum (--rx-top + the sticky filter
   bar's --rx-fbar + 12), because only that page knows its filter bar: its <style> comes after this sheet,
   and --rx-top is now var(--lv-nav-safe), so its sum still starts from the capsule. */
html { scroll-padding-top: var(--lv-nav-safe); }
@media (max-width: 767.98px) {
  .lv-head { --lvn-rest: 38px; --lvn-stuck: 8px; --lvn-h: 56px; }
  :root { --lv-nav-foot: 94px; --lv-nav-safe: 72px; }
}
/* A phone pane reads as frosted with less, and blur cost grows with the radius (globals.css). */
@media (pointer: coarse) {
  .lv-head { --lvn-nav-fx: blur(14px) saturate(.8); --lvn-vellum-fx: blur(20px) saturate(.7); }
}
/* NO BACKDROP-FILTER: solid enough to hold AA alone — never see-through without a blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lv-head { --lvn-nav-fill: var(--lvn-vellum-solid); --lvn-nav-clear: rgba(20, 20, 20, .72);
             --lvn-vellum-menu-fill: var(--lvn-vellum-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .lv-head { --lvn-nav-fill: var(--lvn-vellum-solid); --lvn-nav-clear: rgba(20, 20, 20, .80);
             --lvn-vellum-menu-fill: var(--lvn-vellum-solid); --lvn-nav-fx: none; --lvn-vellum-fx: none; }
}
@media (prefers-contrast: more) {
  .lv-head { --lvn-nav-fill: var(--lvn-vellum-solid); --lvn-nav-clear: rgba(20, 20, 20, .80);
             --lvn-vellum-menu-fill: var(--lvn-vellum-solid); --lvn-vellum-line: rgba(17, 17, 17, .45); }
}

/* THE "STUCK" SENTINEL: a 1px point 24px down the document; lv-nav.js settles the capsule the moment it
   leaves the viewport. An IntersectionObserver, never a scroll handler. */
.lv-head-sentinel { position: absolute; top: 24px; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* THE RAIL: full width, click-through, it only TRANSLATES (the compositor's cheapest move). */
.lv-head .lv-bar {
  position: fixed;
  inset: 0 0 auto 0;
  /* Stated, because the retired bar's rules named the same class on these pages (display:flex, an
     18/32 padding and the 900–1279 clamps); (0,2,0) here outranks every one of them if one survives. */
  display: block;
  margin: 0;
  padding: 0;
  z-index: 60;
  pointer-events: none;
  transform: translateY(var(--lvn-rest));
  transition: transform 420ms var(--lvn-ease-glide);
  /* --lvn-gap: the classic scroll bar's width while the sheet's lock has removed it (lv-nav.js open()), so
     the rail keeps the width it had and the capsule does not slide sideways. 0 everywhere else. */
  right: var(--lvn-gap, 0px);
  /* THE RAIL IS A CONTAINER (flagship twin, globals.css; verify flagship NEW-2 — FLAGSHIP request 1), so
     the six's tightening keys on the width the capsule is really laid out in (the viewport LESS a classic
     scroll bar) and not on the media query, which counts the bar. The rail is fixed with both insets set,
     so its inline size never depends on its content, and it already carries a transform, so containment
     adds no containing block or backdrop root. */
  container: lvbar / inline-size;
}
.lv-head .lv-bar.is-stuck { transform: translateY(var(--lvn-stuck)); }
/* DOCKED — a page that does not scroll as a document (the Studio: #app is one 100dvh grid). The capsule
   sits settled from the first frame and the header becomes the grid's first row, reserving exactly the
   settled capsule plus its air (--lv-nav-safe), so nothing in the work area ever sits under it. */
/* z 34 / 41 is the Studio's own ladder, kept from the bar this replaces: above the stage's chrome, under
   its drawers (60), pops (75) and the 3D view (80); 41 while the menu is open, so the sheet clears the
   tool rail (40) it drops over. */
.lv-head.is-docked { position: relative; inset: auto; height: var(--lv-nav-safe); z-index: 34; }
.lv-head.is-docked.is-open { z-index: 41; }
.lv-head.is-docked .lv-bar { transform: translateY(var(--lvn-stuck)); transition: none; }

/* THE CAPSULE. One anatomy (globals.css .lv-glass): fill + 1px hairline ON the backdrop (padding-box
   clip) + lit top edge + inner rim + top-lit sheen + a neutral shadow cast down. Only the tint cross-
   fades between clear and Vellum; backdrop-filter is never transitioned anywhere in this house. */
.lv-capsule {
  --lvn-g-fill: var(--lvn-nav-fill);
  --lvn-g-line: var(--lvn-vellum-line);
  --lvn-g-sheen: var(--lvn-vellum-sheen);
  --lvn-g-hi: var(--lvn-vellum-hi);
  --lvn-g-shadow: var(--lvn-vellum-shadow);
  pointer-events: auto;
  position: relative;
  box-sizing: border-box;
  margin-inline: auto;
  width: min(1112px, calc(100% - 2 * var(--lvn-gutter)));
  height: var(--lvn-h);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 10px 0 24px;
  border: 1px solid var(--lvn-g-line);
  background: var(--lvn-g-sheen), var(--lvn-g-fill);
  background-clip: padding-box;
  -webkit-backdrop-filter: var(--lvn-nav-fx);
  backdrop-filter: var(--lvn-nav-fx);
  box-shadow: var(--lvn-g-hi), var(--lvn-g-shadow);
  color: var(--lvn-ink);
  font-family: var(--lvn-font-body);
  /* The flagship body's 15px / 1.55: the line the lockup sits on (see .lv-cap-home). */
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color 320ms var(--lvn-ease), color 320ms var(--lvn-ease),
              border-color 320ms var(--lvn-ease), box-shadow 320ms var(--lvn-ease);
}
/* CLEAR — only over a page's own measured dark band (data-lv-nav-band, lv-nav.js), never on the menu. */
.lv-capsule.is-over {
  --lvn-g-fill: var(--lvn-nav-clear);
  --lvn-g-line: var(--lvn-nav-clear-line);
  --lvn-g-sheen: var(--lvn-nav-clear-sheen);
  --lvn-g-hi: var(--lvn-nav-clear-hi);
  --lvn-g-shadow: var(--lvn-nav-clear-shadow);
  color: var(--lvn-on-image);
}
/* FROM 1024 THE ROW IS A 1fr | auto | 1fr GRID: the six sit centred, and a member's circle arriving
   after the account answers grows the right column only — under space-between it slid the six 28px. */
@media (min-width: 1024px) {
  .lv-capsule { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .lv-capsule > :first-child { justify-self: start; }
  .lv-capsule > :last-child { justify-self: end; }
}
@media (max-width: 767.98px) {
  .lv-capsule { width: calc(100% - 16px); padding: 0 6px 0 18px; gap: 10px; }
}

/* THE LOCKUP — the nav cut (26 / 11), the identity's own mask and face (BRAND.md). */
@font-face {
  font-family: "Leorve Wordmark";
  src: url("/app/brand/julius-leorve.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+45, U+4C, U+4F, U+52, U+56;
}
/* A BLOCK HOLDING AN INLINE-FLEX LOCKUP ON A 15px / 1.55 LINE, exactly as the flagship's <a> is laid out
   (a grid or flex item is blockified): the lockup sits on the line's baseline, so the anchor is 32.25px
   tall and the signature's centre lands 3px above the capsule's — measured on the flagship, and copied
   rather than "corrected", because one bar drawn two ways is the bug this file exists to end. */
.lv-cap-home { display: block; color: inherit; text-decoration: none; border-radius: 12px; }
.lv-lockup { display: inline-flex; align-items: center; gap: 12px; vertical-align: baseline; --lv-h: 26px; --lv-word: 11px; }
.lv-capsule .lv-mark {
  display: block;
  height: var(--lv-h, 26px);
  aspect-ratio: 595 / 308;
  background: currentColor;
  -webkit-mask: center / contain no-repeat url("/app/brand/leorve-script.svg");
  mask: center / contain no-repeat url("/app/brand/leorve-script.svg");
}
.lv-capsule .lv-word {
  font-family: "Leorve Wordmark", Fraunces, Georgia, serif;
  font-weight: 400;
  font-size: var(--lv-word, 11px);
  --lv-track: .44em;
  letter-spacing: var(--lv-track);
  margin-right: calc(-1 * var(--lv-track));
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}
.lv-capsule.is-over .lv-word { text-shadow: var(--lvn-on-image-sh); }

/* THE SIX (≥1024). 500 13px Instrument Sans, ink on Vellum, a 10px pill inset that the travelling
   plate fills. nowrap: a wrapped row still passes scrollWidth checks (CLAUDE.md), so it is forbidden. */
.lv-cap-nav { display: none; position: relative; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .005em; }
@media (min-width: 1024px) { .lv-cap-nav { display: flex; } }
@media (min-width: 1152px) { .lv-cap-nav { gap: 20px; } }
@media (min-width: 1280px) { .lv-cap-nav { gap: 32px; } }
.lv-cap-nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--lvn-ink);
  text-decoration: none;
  white-space: nowrap;
}
/* 1024–1151: four-px gaps and eight-px insets so a member's 44px circle fits beside the six (globals.css). */
@media (min-width: 1024px) and (max-width: 1151.98px) {
  .lv-cap-nav { gap: 4px; }
  .lv-cap-nav a { padding-inline: 8px; }
}
/* THE PAGE YOU ARE ON: a 1.5px ink rule under the WORD — a rule, never a plate, because the plate is
   the pointer's (the flagship's AnimatedBackground was designed beside exactly this rule). Absolute,
   so the current label's box is its siblings' height and the row never drops a pixel. */
.lv-cap-nav a.on::after {
  content: "";
  position: absolute;
  left: var(--lvn-pad-x, 10px);
  right: var(--lvn-pad-x, 10px);
  bottom: 2px;
  height: 1.5px;
  background: currentColor;
}
@media (min-width: 1024px) and (max-width: 1151.98px) { .lv-cap-nav a.on::after { --lvn-pad-x: 8px; } }
/* NEW-2 (the flagship's twin, globals.css): THE SAME BAND KEYED ON THE RAIL'S OWN WIDTH, and one more step
   where a Windows scroll bar takes the rest. Measured on the flagship with real scroll bars: at a 1024px
   window a member's "Your month" circle kept 13.3px of air beside "Plans" (floor 24) → 24.3px with these,
   and 1152–1169px windows lost the tight band while the capsule was still a tight-band width. The media
   blocks above stay for an engine with no container queries (and as what test_site_nav_consistency
   reads). Below 1024 the six are hidden, so a narrower container changes nothing anyone sees. */
@container lvbar (max-width: 1151.98px) {
  .lv-cap-nav { gap: 4px; }
  .lv-cap-nav a { padding-inline: 8px; }
  .lv-cap-nav a.on::after { --lvn-pad-x: 8px; }
}
@container lvbar (max-width: 1056px) {
  .lv-cap-nav { gap: 2px; }
  .lv-cap-nav a { padding-inline: 7px; }
  .lv-cap-nav a.on::after { --lvn-pad-x: 7px; }
}
/* A THUMB'S 44px ON THE SIX. A tablet held landscape (1024–1366, coarse pointer) shows the six, and each
   label box is 28px tall. ::before grows the hit area 8px above and below inside the 60px capsule without
   moving a pixel of the drawing or the travelling plate (which measures the link's own box). */
@media (pointer: coarse) and (min-width: 1024px) {
  .lv-cap-nav a::before { content: ""; position: absolute; inset: -8px 0; }
}
.lv-capsule.is-over .lv-cap-nav a { color: var(--lvn-on-image); text-shadow: var(--lvn-on-image-sh); }
/* THE TRAVELLING PLATE — the vanilla twin of animated-background.tsx: ONE plate, moved, never six that
   light up. --line by day; a white wash over a clear capsule. lv-nav.js creates and moves it. */
.lv-nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 999px;
  background: var(--lvn-line);
  opacity: 0;
  pointer-events: none;
  /* The flagship's spring (bounce .2, .3s) as a curve with the same small overshoot. */
  transition: transform 300ms cubic-bezier(.3, 1.25, .5, 1), width 300ms cubic-bezier(.3, 1.25, .5, 1),
              height 300ms cubic-bezier(.3, 1.25, .5, 1), opacity 200ms linear;
}
.lv-capsule.is-over .lv-nav-pill { background: rgba(255, 255, 255, .18); }

/* THE RIGHT CLUSTER: burger (<1024), Your month (members, ≥1024), account, bag, then the wardrobe pill
   (640–1023). One shape for every small control: the 44px hairline circle. */
.lv-cap-end { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1280px) { .lv-cap-end { gap: 12px; } }
.lv-circ {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, .12);
  background: rgba(255, 255, 255, .40);
  color: var(--lvn-ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 200ms ease;
}
.lv-circ svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lv-circ[hidden] { display: none; }
.lv-capsule.is-over .lv-circ:not([data-rank]) { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: var(--lvn-on-image); }
@media (hover: hover) and (pointer: fine) {
  .lv-circ:hover { opacity: .7; }
}
/* The burger lives below 1024 only; the month door from 1024 only (a member's door below it is the
   menu's first row); the account circle leaves the capsule below 360 for the menu's foot. */
@media (min-width: 1024px) { .lv-burger { display: none; } }
.lv-burger .lv-x { display: none; }
.lv-burger[aria-expanded="true"] .lv-x { display: block; }
.lv-burger[aria-expanded="true"] .lv-bars { display: none; }
@media (max-width: 1023.98px) { .lv-month-door { display: none; } }
@media (max-width: 359.98px) { .lv-capsule .lv-acct { display: none; } }

/* THE MONOGRAM (a.lv-acct). The SAME 44px box in every state: initials for anyone signed in; rank 1
   adds an ink ring, rank 2+ an ink disc with the initials knocked out. */
.lv-acct-ini { font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1; }
a.lv-acct[data-rank="1"] { border-color: var(--lvn-ink); box-shadow: inset 0 0 0 .5px var(--lvn-ink); }
a.lv-acct[data-rank="2"], a.lv-acct[data-rank="3"], a.lv-acct[data-rank="4"], a.lv-acct[data-rank="5"] {
  background: var(--lvn-ink); border-color: var(--lvn-ink); color: var(--lvn-paper);
}
.lv-capsule.is-over a.lv-acct[data-rank="1"] { border-color: var(--lvn-on-image); box-shadow: inset 0 0 0 .5px var(--lvn-on-image); color: var(--lvn-on-image); }
.lv-capsule.is-over a.lv-acct[data-rank="2"], .lv-capsule.is-over a.lv-acct[data-rank="3"],
.lv-capsule.is-over a.lv-acct[data-rank="4"], .lv-capsule.is-over a.lv-acct[data-rank="5"] {
  background: var(--lvn-on-image); border-color: var(--lvn-on-image); color: var(--lvn-ink);
}

/* /account IS THE PAGE YOU ARE ON: round control, round mark — a paper gap, then a 1.5px ink ring OUTSIDE
   the circle (the option tiles' "selected" idiom), so the box never changes size and the mark cannot be
   read as the Plus ring, which is drawn INSIDE. aria-current="page" says it to a screen reader. */
a.lv-acct.on { box-shadow: 0 0 0 2px var(--lvn-paper), 0 0 0 3.5px var(--lvn-ink); }
a.lv-acct.on[data-rank="1"] { box-shadow: inset 0 0 0 .5px var(--lvn-ink), 0 0 0 2px var(--lvn-paper), 0 0 0 3.5px var(--lvn-ink); }

/* THE BAG'S COUNT, hung off the circle's shoulder; pointer-events none so a tap on the number is a tap
   on the bag. An empty bag is an outlined 0, never a notification. lv-bag.js writes it. */
.lv-bag-count {
  position: absolute;
  top: -4px;
  right: -6px;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--lvn-ink);
  color: var(--lvn-paper);
  font: 700 10px/18px var(--lvn-font-body);
  text-align: center;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.lv-bag-count[data-n="0"] { background: var(--lvn-paper); color: var(--lvn-ink-2); box-shadow: inset 0 0 0 1px var(--lvn-line-2); }
.lv-capsule.is-over .lv-bag-count { background: var(--lvn-on-image); color: #141414; }
.lv-capsule.is-over .lv-bag-count[data-n="0"] { background: rgba(17, 17, 17, .55); color: var(--lvn-on-image); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
@media (max-width: 767.98px) { .lv-capsule .lv-bag-count { top: -2px; right: 0; } }

/* THE WARDROBE PILL, 640–1023 only: "Start free" to a visitor, "My wardrobe" once signed in. */
.lv-cap-cta {
  display: none;
  align-items: center;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--lvn-line-2);
  color: var(--lvn-ink);
  font: 600 12px/1.55 var(--lvn-font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .4s var(--lvn-ease), border-color .4s var(--lvn-ease);
}
@media (min-width: 640px) and (max-width: 1023.98px) { .lv-cap-cta { display: inline-flex; } }
@media (hover: hover) and (pointer: fine) { .lv-cap-cta:hover { transform: translateY(-2px); border-color: var(--lvn-ink); } }
.lv-capsule.is-over .lv-cap-cta { border-color: rgba(255, 255, 255, .5); color: var(--lvn-on-image); }

/* ── THE SECTIONS MENU, BELOW 1024: a floating Vellum sheet 8px under the capsule ─────────────────── */
.lv-menu {
  pointer-events: auto;
  box-sizing: border-box;
  width: min(560px, calc(100% - 16px));
  margin: 8px auto 0;
  border-radius: 28px;
  padding: 8px 8px 12px;
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--lvn-vellum-line);
  background: var(--lvn-vellum-sheen), var(--lvn-vellum-menu-fill);
  background-clip: padding-box;
  -webkit-backdrop-filter: var(--lvn-vellum-fx);
  backdrop-filter: var(--lvn-vellum-fx);
  box-shadow: var(--lvn-vellum-hi), var(--lvn-vellum-shadow);
  color: var(--lvn-ink);
  font-family: var(--lvn-font-body);
  -webkit-font-smoothing: antialiased;
}
.lv-menu[hidden] { display: none; }
/* Hidden from 1024 by the SHEET, not only by the script: a rotated phone never hangs a menu under
   the six. */
@media (min-width: 1024px) { .lv-menu { display: none; } }
/* The entrance is on the pane itself — opacity on an ANCESTOR of glass would make it the backdrop root. */
.lv-menu:not([hidden]) { animation: lv-menu-in 280ms var(--lvn-ease) both; }
@keyframes lv-menu-in { from { opacity: 0; transform: translateY(-6px); } }
.lv-menu-nav { position: relative; display: flex; flex-direction: column; align-items: stretch; counter-reset: lv-menu; }
.lv-menu .lv-menu-nav a {
  position: relative;
  z-index: 1;
  counter-increment: lv-menu;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 18px;
  border-radius: 18px;
  font: 500 17px/1 var(--lvn-font-display);
  letter-spacing: -.01em;
  color: var(--lvn-ink);
  text-decoration: none;
}
.lv-menu .lv-menu-nav a::after {
  content: counter(lv-menu, decimal-leading-zero) / "";
  font: 500 11px/1 var(--lvn-font-body);
  letter-spacing: .14em;
  color: var(--lvn-ink-2);
}
/* Straight 1px hairlines inset by the row's padding — an inset shadow bent up with the 18px radius. */
.lv-menu .lv-menu-nav a + a { background: linear-gradient(rgba(17, 17, 17, .07), rgba(17, 17, 17, .07)) 18px 0 / calc(100% - 36px) 1px no-repeat; }
/* The page you are on, in the menu: the same 1.5px rule under the word as the bar draws. */
.lv-menu .lv-menu-nav a.on > span { position: relative; }
.lv-menu .lv-menu-nav a.on > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px; background: currentColor; }
.lv-menu .lv-nav-pill { border-radius: 18px; background: rgba(17, 17, 17, .05); }
.lv-menu-month {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 18px;
  font: 500 17px/1 var(--lvn-font-display);
  letter-spacing: -.01em;
  color: var(--lvn-ink);
  cursor: pointer;
  background: linear-gradient(rgba(17, 17, 17, .07), rgba(17, 17, 17, .07)) 18px 100% / calc(100% - 36px) 1px no-repeat;
}
.lv-menu-month[hidden] { display: none; }
.lv-menu-month svg { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.lv-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 10px 4px 18px;
  margin-top: 4px;
  border-top: 1px solid rgba(17, 17, 17, .08);
  font-size: 14px;
  color: var(--lvn-ink-2);
}
.lv-menu-foot .lv-acct { display: none; }
@media (max-width: 359.98px) { .lv-menu-foot .lv-acct { display: grid; } }
.lv-menu-about { display: inline-flex; align-items: center; min-height: 44px; color: var(--lvn-ink-2); font-weight: 500; text-decoration: none; }
/* THE ONE VERB INTO THE READING (GLOSSARY D5): the flagship's tactile ink pill (.cc-btn), copied. */
.lv-menu-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid var(--lvn-ink);
  background: var(--lvn-ink);
  color: var(--lvn-paper);
  font: 600 13px/1.55 var(--lvn-font-body);
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .40),
              0 1px 2px rgba(17, 17, 17, .22), 0 10px 22px -12px rgba(17, 17, 17, .55);
  transition: transform .4s var(--lvn-ease), background-color .4s var(--lvn-ease), border-color .4s var(--lvn-ease);
}
@media (hover: hover) and (pointer: fine) { .lv-menu-cta:hover { transform: translateY(-1px); background: #2B2B2B; border-color: #2B2B2B; } }
.lv-menu-cta:active { transform: scale(.985); background: #000; border-color: #000; }

/* THE STUDIO'S ACCOUNT ROWS (#navAcct, written by its _renderNavAcct): Sign in for a visitor; the address,
   Your account, Your plan / Plans and Sign out once signed in. Quiet 44px rows under the six, in the
   foot's voice — the Studio keeps sign-in in place so a design on the stage is never left behind. */
.lv-menu-acct { display: flex; flex-direction: column; margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(17, 17, 17, .08); }
.lv-menu-acct:empty { display: none; }
.lv-menu-acct .nav-menu-rule { display: none; }
.lv-menu-acct a, .lv-menu-acct .nav-acct-act {
  box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0; padding: 0 18px;
  border: 0; border-radius: 14px; background: none; font: 500 14px/1.2 var(--lvn-font-body); letter-spacing: 0;
  text-transform: none; color: var(--lvn-ink-2); text-decoration: none; text-align: left; cursor: pointer;
}
.lv-menu-acct .nav-acct-who { display: block; padding: 8px 18px 2px; font-size: 12px; color: var(--lvn-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .lv-menu-acct a:hover, .lv-menu-acct .nav-acct-act:hover { color: var(--lvn-ink); background: rgba(17, 17, 17, .05); }
}

/* THE PAGE IS DIMMED, NOT BLURRED, while the menu is open: it is locked and still, so a blurred scrim
   would be a third full-viewport layer bought for nothing (phone budget: capsule + menu = 2). */
.lv-menu-dim { position: fixed; inset: 0; z-index: 55; background: rgba(8, 8, 8, .28); animation: lv-dim-in 200ms linear both; }
.lv-menu-dim[hidden] { display: none; }
@keyframes lv-dim-in { from { opacity: 0; } }

/* ONE FOCUS RING: ink, offset 3px; white where the capsule is clear. */
.lv-head :focus-visible { outline: 2px solid var(--lvn-ink); outline-offset: 3px; }
.lv-capsule.is-over :focus-visible { outline-color: var(--lvn-on-image); }
.lv-head :focus:not(:focus-visible) { outline: none; }

/* A thumb's 44px on the route home, without changing what is drawn (Studio FIX_SPEC D13). */
/* Padding grows the target, the equal negative margin keeps the margin box — and so the drawing —
   exactly where it was: 32.25px tall becomes 44.25px to a thumb. */
@media (pointer: coarse) { .lv-cap-home { padding-block: 6px; margin-block: -6px; } }

/* UNDER A MODAL NOTHING BLURS TWICE: the capsule is under ::backdrop, so its own blur is invisible work.
   lv-plus.js's month sheet sets html.lvm-lock and the sign-in sheet html.is-modal while open. */
html.is-modal .lv-capsule, html.lvm-lock .lv-capsule { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Any modal <dialog> at all (v7's sign-in dialog included) without relying on its script to set a class.
   A rule of its own: a browser that cannot parse :has() drops only this rule, not the one above. */
html:has(dialog:modal) .lv-capsule { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* /styling's piece drawer (reco/rx-drawer.js) is a scrim and a sheet, not a <dialog>, and it inerts the
   page under it — the capsule included — so the capsule's blur under it is the same invisible work.
   Its own rule, for the same :has() reason as above. */
html:has(.rx-drawer.is-on) .lv-capsule { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* AND THE STOOD-DOWN CAPSULE GOES SOLID, never see-through without a blur (v7 integration of PAGES_B B9
   / WARDROBE_WEB #6 / FLAGSHIP R-F1; web/app/globals.css does the same, so the two capsules stay ONE
   capsule under a modal too). Dropping the blur kept the .82 fill, and under a phone sheet's plain dim
   the page's type read straight through the lockup and the circles — measured on /account at 390 over
   "YOUR PURCHASES" (review shot rv2-account-p390-pay-ask) and on /wardrobe at 1440 under the vitrine's
   58px title. The fills are this file's own no-backdrop-filter fallback (.lv-head tokens), re-pointed at
   0,2,1 so they beat that fallback and the reduced-transparency swap whatever the order. .72, not .80:
   it is the flagship's --nav-clear-solid and this file's @supports value, so the two match pixel for
   pixel. Three rules for the same :has() reason as above. */
html.is-modal .lv-head, html.lvm-lock .lv-head { --lvn-nav-fill: var(--lvn-vellum-solid); --lvn-nav-clear: rgba(20, 20, 20, .72); }
html:has(dialog:modal) .lv-head { --lvn-nav-fill: var(--lvn-vellum-solid); --lvn-nav-clear: rgba(20, 20, 20, .72); }
html:has(.rx-drawer.is-on) .lv-head { --lvn-nav-fill: var(--lvn-vellum-solid); --lvn-nav-clear: rgba(20, 20, 20, .72); }

@media (prefers-reduced-motion: reduce) {
  .lv-head .lv-bar, .lv-capsule, .lv-circ, .lv-cap-cta, .lv-menu-cta { transition: none; }
  .lv-nav-pill { transition: opacity 150ms linear; }
  .lv-menu:not([hidden]), .lv-menu-dim { animation: none; }
  /* The lift and the press arrive without travel; named without :hover so no hover sits outside the gate. */
  .lv-cap-cta, .lv-menu-cta { transform: none !important; }
}
@media (forced-colors: active) {
  .lv-capsule, .lv-menu {
    background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .lv-circ { border-color: CanvasText; }
  .lv-cap-nav a.on::after, .lv-menu .lv-menu-nav a.on > span::after { background: CanvasText; }
}
@media print { .lv-head { display: none !important; } }