/* ============================================================
   ASK Studio — works.css
   Supplement to guide.css for the works catalog: /works/,
   /works/<slug>/, atelier.html and /hospitality/.
   Loads AFTER guide.css and reuses its tokens (:root in guide.css).
   ============================================================ */

/* ---------- filter row (/works/) ---------- */
.filters {
  display: flex;
  gap: 8px;
  margin: 6px 0 clamp(28px, 4vh, 44px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.filters::-webkit-scrollbar { display: none; }
.filters a {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s, border-color 0.3s;
}
.filters a:hover { color: var(--ink); border-color: rgba(232, 226, 214, 0.4); }
.filters a.is-active { color: #0e0d0b; background: var(--accent); border-color: var(--accent); }

/* ---------- works grid (/works/) ---------- */
.workgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3.4vw, 48px) clamp(18px, 2.6vw, 36px);
  margin: 0 0 clamp(48px, 8vh, 96px);
}
@media (max-width: 760px) { .workgrid { grid-template-columns: 1fr; } }

.wcard { margin: 0; }
.wcard.is-hidden { display: none; }
.wcard a.wcard__link { text-decoration: none; color: inherit; display: block; }
.wcard__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(232, 226, 214, 0.04);
}
.wcard__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.wcard a:hover .wcard__media img { transform: scale(1.03); }
.wcard__cap { padding: 14px 2px 0; }
.wcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wcard__name { font-family: var(--serif); font-weight: 350; font-size: clamp(21px, 2.4vw, 27px); margin: 0; }
.wcard__mat { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
.wcard__meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 6px;
}
.wcard__note { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 0; max-width: none; }
.wcard__price {
  font-size: 12.5px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 8px; display: inline-block;
}
.wcard__price a, a.wcard__price { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(185, 154, 100, 0.45); }

/* ---------- status chips ---------- */
.chip-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px;
}
.chip-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.chip-status--sold { color: var(--ink-3); }
.chip-status--sold::before { background: var(--ink-3); }
.chip-status--cure::before { background: #6f8a86; }

/* "Design study" badge over renders */
.badge-study {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(232, 226, 214, 0.85);
  background: rgba(14, 13, 11, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(232, 226, 214, 0.22);
  border-radius: 999px; padding: 5px 11px;
}

/* ---------- work page (/works/<slug>/) ---------- */
.wp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin: 8px 0 6px; }
.wp-head h1 { margin: 0; }
.wp-head .wp-noun { font-family: var(--serif); font-style: italic; font-weight: 250; font-size: clamp(19px, 2.4vw, 28px); color: var(--pour, var(--accent)); }
/* the № · year line carries the piece's own pour tint */
.wp-num { color: var(--pour, var(--accent)); }
.wp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0 26px; }
.wp-price { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.wp-price a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(185, 154, 100, 0.45); }
.wp-note { font-family: var(--serif); font-size: clamp(18px, 2vw, 23px); font-weight: 350; color: var(--ink-2); font-style: italic; margin: 18px 0 0; }

.wp-hero { position: relative; }
.wp-hero img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 761px) {
  .wp-hero--land img { aspect-ratio: 16 / 10; }
}

/* spec table */
.spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec th, .spec td { text-align: left; padding: 12px 14px 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 1px solid var(--line); }
.spec th { font-weight: 400; color: var(--ink-2); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; padding-right: 26px; }
.spec td { color: var(--ink); font-variant-numeric: tabular-nums; }
.spec td small { color: var(--ink-2); display: block; font-size: 12.5px; }

/* dimension diagram */
.dims { max-width: 560px; margin: 10px 0 8px; }
.dims svg { width: 100%; height: auto; display: block; }
.dims .d-line { stroke: var(--ink-3); stroke-width: 1; }
.dims .d-obj { stroke: var(--ink-2); stroke-width: 1.5; fill: none; }
.dims .d-fill { fill: rgba(185, 154, 100, 0.14); stroke: var(--pour, var(--accent)); stroke-width: 1; }
.dims text { fill: var(--ink-2); font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; }
.dims figcaption { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }

/* gallery */
.wp-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 26px); margin: 0 0 clamp(40px, 7vh, 80px); }
@media (max-width: 560px) { .wp-gallery { grid-template-columns: 1fr; } }
.wp-gallery figure { margin: 0; position: relative; }
.wp-gallery figure.wide { grid-column: 1 / -1; }
.wp-gallery img { aspect-ratio: 4 / 5; object-fit: cover; }
.wp-gallery figure.wide img { aspect-ratio: 16 / 9; }
.wp-gallery figcaption { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; letter-spacing: 0.04em; }

/* edition + provenance */
.edition {
  border-left: 2px solid var(--pour, var(--accent));
  padding: 6px 0 6px 20px;
  margin: clamp(28px, 4vh, 44px) 0;
  max-width: 560px;
}
.edition p { margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(16px, 1.8vw, 20px); font-weight: 350; line-height: 1.55; }

/* commission band on work pages */
.wp-commission {
  border: 1px solid var(--line); border-radius: 2px;
  padding: clamp(22px, 3.2vw, 36px);
  margin: clamp(40px, 7vh, 80px) 0 0;
  max-width: none;
}
.wp-commission h2 { margin-top: 0; }
.wp-commission p { max-width: 560px; }

/* prev / next */
.wp-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(40px, 7vh, 72px); padding-top: 22px; border-top: 1px solid var(--line); }
.wp-nav a { text-decoration: none; color: var(--ink-2); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.3s; }
.wp-nav a:hover { color: var(--accent); }
.wp-nav a b { display: block; font-family: var(--serif); font-weight: 350; font-size: 19px; color: var(--ink); text-transform: none; letter-spacing: 0; margin-top: 4px; }
.wp-nav a:last-child { text-align: right; }

/* ---------- art direction: the numbered monograph ---------- */
/* a large, ghosted plate numeral sits behind the head — the piece's № as a
   catalogue-raisonné mark, tinted with the piece's own --pour. Set --pour on
   the piece <body>; it falls back to the house accent where unset. */
body.has-stickybar #main { position: relative; }
.wp-monogram {
  position: absolute; top: -0.06em; right: 0;
  z-index: -1; pointer-events: none; user-select: none;
  font-family: var(--serif); font-weight: 300; line-height: 0.72;
  font-size: clamp(150px, 30vw, 320px);
  color: var(--pour, var(--accent));
  opacity: 0.09;
}
@media (max-width: 760px) { .wp-monogram { font-size: clamp(120px, 42vw, 210px); opacity: 0.11; } }
@media (prefers-reduced-motion: no-preference) {
  .wp-monogram { transition: color var(--theme-t, 0.9s) var(--ease-soft, ease); }
}

/* tier signal without a number — replaces bare "Price on request" */
.wp-price--tier { color: var(--ink-2); font-variant-numeric: normal; }
.wp-price--tier b { color: var(--ink); font-weight: 400; }
.wp-price--tier a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(185, 154, 100, 0.45); }

/* catalogue card: a hairline of the piece's pour under the name on hover */
.wcard { --pour: var(--accent); }
.wcard__name { position: relative; }
.wcard a:hover .wcard__name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--pour, var(--accent)); opacity: 0.7;
}

/* ---------- sticky mobile inquiry bar ---------- */
.stickybar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(14, 13, 11, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 10px;
}
.stickybar a {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px;
  transition: background 0.3s, color 0.3s;
}
.stickybar__wa { background: var(--accent); color: #0e0d0b; }
.stickybar__wa svg { width: 16px; height: 16px; fill: currentColor; }
.stickybar__inq { border: 1px solid rgba(232, 226, 214, 0.35); color: var(--ink); }
@media (max-width: 760px) {
  .stickybar { display: flex; }
  body.has-stickybar main { padding-bottom: 120px; }
  .guidecta { display: none; } /* never two floating CTAs at once */
}
@media print { .stickybar { display: none; } }

/* ---------- tap-to-zoom lightbox (piece galleries) ---------- */
.glb {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(14, 13, 11, 0.95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.glb.is-open { display: flex; }
.glb__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: zoom-out; }
.glb__img { max-width: 94vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; border-radius: var(--r, 2px); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55); }
.glb__cap { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.glb button { background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); }
.glb__close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; font-size: 19px; opacity: 0.75; transition: opacity 0.25s; }
.glb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 34px; opacity: 0.65; transition: opacity 0.25s; }
.glb__close:hover, .glb__nav:hover, .glb__close:focus-visible, .glb__nav:focus-visible { opacity: 1; }
.glb__prev { left: 4px; } .glb__next { right: 4px; }
@media (max-width: 560px) { .glb__nav { width: 44px; font-size: 27px; } }

/* ---------- editorial-plate grid ---------- */
/* every card's № carries its own pour tint (the monograph motif, subtly) */
.wcard__meta span:first-child { color: var(--pour, var(--ink-3)); }

/* the one real piece opens the catalogue as a full-width editorial spread:
   the portrait photo faced by a plate column (name, note, and a ghosted №). */
.wcard--feature { grid-column: 1 / -1; margin-bottom: clamp(14px, 2.6vw, 30px); }
.wcard--feature .wcard__link { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(22px, 4vw, 60px); align-items: center; }
.wcard--feature .wcard__cap { position: relative; padding-top: 0; }
.wcard--feature .wcard__name { font-size: clamp(30px, 4vw, 46px); }
.wcard--feature .wcard__note { font-size: clamp(15px, 1.6vw, 18px); }
.wcard--feature .wcard__row, .wcard--feature .wcard__meta, .wcard--feature .wcard__note { position: relative; z-index: 1; }
.wcard__plate {
  position: absolute; right: -0.03em; top: -0.3em; z-index: 0;
  pointer-events: none; user-select: none;
  font-family: var(--serif); font-weight: 300; line-height: 0.72;
  font-size: clamp(120px, 15vw, 210px);
  color: var(--pour, var(--accent)); opacity: 0.12;
}
@media (max-width: 760px) {
  .wcard--feature .wcard__link { display: block; }
  .wcard__plate { top: auto; bottom: 0.15em; font-size: clamp(92px, 30vw, 140px); opacity: 0.10; }
}

/* ---------- atelier page ---------- */
.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 32px); margin: 24px 0 8px; }
@media (max-width: 760px) { .partners { grid-template-columns: 1fr; } }
.partner { border-top: 1px solid var(--line); padding-top: 18px; }
.partner h3 { margin: 0 0 4px; }
.partner .role { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px; }
.partner p { font-size: 13.5px; margin: 0; }

/* ---------- hospitality page ---------- */
.steps { counter-reset: step; max-width: 720px; margin: 10px 0 26px; padding: 0; list-style: none; }
.steps li { counter-increment: step; border-top: 1px solid var(--line); padding: 18px 0 18px 56px; position: relative; margin: 0; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: "0" counter(step);
  position: absolute; left: 0; top: 20px;
  font-family: var(--serif); font-style: italic; font-weight: 250;
  color: var(--accent); font-size: 19px;
}
.steps b { font-weight: 400; color: var(--ink); display: block; margin-bottom: 4px; }

/* ============================================================
   The catalogue raisonné, touchable (2026-07)
   Six moves that share one language — the piece's own --pour.
   Every move is transform/opacity only (compositor-safe) and
   degrades to the previous static design: no JS, reduced motion
   or an unsupporting browser simply sees the page as it was.
   ============================================================ */

/* ---------- the continuity cut : catalogue → piece, unbroken ----------
   Cross-document View Transitions. Tap a card and its photograph glides
   into the product hero (the back gesture reverses it); between product
   pages the piece flows into the next. The hero carries the shared name
   statically; catalogue.js stamps it on the outgoing/incoming card.
   Browsers without support keep today's instant cut — no fallback code. */
@view-transition { navigation: auto; }
.wp-hero img { view-transition-name: piece; }
::view-transition-old(root) { animation-duration: 0.35s; }
::view-transition-new(root) { animation-duration: 0.35s; }
::view-transition-group(piece) { animation-duration: 0.45s; animation-timing-function: var(--ease); }
/* snapshots fill the morphing group with a cover-crop, so a 4:5 card
   re-crops into a 16:10 hero instead of stretching */
::view-transition-old(piece),
::view-transition-new(piece) {
  animation-duration: 0.45s;
  height: 100%; width: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ("The settle" — an opsz-resolve on the piece h1 — was designed and cut
   here: Fraunces' optical axis changes advance widths monotonically
   (measured -21% across opsz 10→110), so the settle dragged the noun
   sideways through every load. No width-stable range exists. */

/* ---------- the fill line : the pour, witnessed in the drawing ----------
   The dimension diagram's resin channel (.d-fill, already tinted by the
   piece's --pour) fills bottom-up when the figure enters view, with one
   damped level-out. gallery.js arms it; unarmed it prints complete. */
.dims .d-fill { transform-box: fill-box; transform-origin: 50% 100%; }
.dims--armed .d-fill { transform: scaleY(0); }
.dims--armed.is-poured .d-fill { animation: dims-pour 1.2s var(--ease) both; }
@keyframes dims-pour {
  0%   { transform: scaleY(0); }
  72%  { transform: scaleY(1.05); }
  88%  { transform: scaleY(0.985); }
  100% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dims--armed .d-fill { transform: none; animation: none; }
}

/* ---------- the plates : full-bleed snap gallery (mobile) ----------
   On the phone the product gallery becomes edge-to-edge plates with
   OS-native snap physics — flick, inertia, rubber-band all come from the
   compositor, vertical scroll is never hijacked. A bronze page-gauge and
   a plate caption ride beneath (built by gallery.js). Without JS each
   plate keeps its own caption; desktop keeps the editorial grid. */
@media (max-width: 760px) {
  .wp-gallery {
    display: flex;
    gap: 0;
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wp-gallery::-webkit-scrollbar { display: none; }
  .wp-gallery figure {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }
  .wp-gallery img {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 76svh;
    object-fit: cover;
    border-radius: 0;
  }
  .wp-gallery figure.wide img { aspect-ratio: 16 / 9; }
  .wp-gallery figcaption { padding: 0 var(--pad); }
  /* captions move into the shared plate bar once gallery.js builds it */
  .wp-gallery.is-plates { margin-bottom: 0; }
  .wp-gallery.is-plates figcaption {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* the film plate sits in the gallery like any other plate */
.wp-gallery video { width: 100%; height: auto; display: block; border-radius: var(--r); background: #0e0d0b; }
@media (max-width: 760px) {
  .wp-gallery video { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
}

.plates-bar { display: none; }
@media (max-width: 760px) {
  .plates-bar { display: block; margin: 12px 0 clamp(40px, 7vh, 80px); }
  .plates-bar__top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
  .plates-bar__num { color: var(--pour, var(--accent)); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .plates-bar__gauge { position: relative; flex: 1; height: 1px; background: var(--line); overflow: hidden; }
  .plates-bar__gauge i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
  .plates-bar__cap { display: block; color: var(--ink-2); min-height: 1.5em; transition: opacity 0.25s var(--ease-soft); }
  .plates-bar__cap.is-swap { opacity: 0; }
}

/* ---------- the private viewing : plate labels in the lightbox ----------
   The tap-to-zoom viewer gains a proper plate label and one quiet line —
   "Request this piece" — at the emotional peak, pre-addressed to WhatsApp. */
.glb__cap { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 0 18px; }
.glb__num { color: var(--pour, var(--accent)); font-variant-numeric: tabular-nums; }
.glb__note { color: var(--ink-2); }
.glb__ask {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid rgba(185, 154, 100, 0.45);
  padding: 6px 2px; margin-top: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.glb__ask:hover { color: var(--accent); border-color: var(--accent); }
/* the caption is three rows now — reserve its room so the image can never
   push "Request this piece" off a short (landscape-phone) viewport */
.glb__img { max-height: calc(100vh - 158px); }
@supports (height: 1svh) { .glb__img { max-height: calc(100svh - 158px); } }

/* ---------- reading the slab : a traverse along the grain ----------
   Vertical scroll pans a macro strip of the actual slab horizontally —
   the digital version of drawing your hand along the wood. Three
   provenance notes surface beneath as their region passes. Static plate
   with printed notes when JS, sticky or motion preference say no. */
.slab { margin: 8px 0 clamp(40px, 7vh, 80px); }
.slab__window { position: relative; }
.slab__track img { width: 100%; height: auto; display: block; border-radius: var(--r); }
.slab__notes { display: grid; gap: 6px; margin-top: 12px; }
.slab__note { color: var(--ink-3); }
.slab.is-live {
  height: 300svh;
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
}
.slab.is-live .slab__window {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: 18px;
  overflow: hidden;
}
.slab.is-live .slab__track { align-self: flex-start; will-change: transform; }
.slab.is-live .slab__track img {
  width: auto; height: min(54svh, 520px);
  max-width: none; border-radius: 0;
}
.slab.is-live .slab__notes { display: block; position: relative; margin: 0 var(--pad); min-height: 2.6em; }
.slab.is-live .slab__note {
  position: absolute; left: 0; right: 0; top: 0;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft);
}
.slab.is-live .slab__note.is-on { opacity: 1; transform: none; }

/* ---------- the pour line : one continuous pour down the catalogue ----------
   Mobile catalogue index only (single column, so the line owns the left
   gutter). A 2px thread interpolates every visible piece's --pour in
   order; scroll fills it, a small meniscus tip rides the surface, and
   each card clicks a node in its own pour onto the line. Reduced motion
   prints the full line quietly; without JS it stands complete. */
.pourline { display: none; }
@media (max-width: 760px) {
  .workgrid { position: relative; }
  .pourline {
    display: block;
    position: absolute;
    left: calc(-0.5 * var(--pad));
    top: 4px; bottom: 4px;
    width: 2px;
    pointer-events: none;
  }
  /* the fill is revealed (clip), never scaled — a scale would squash the
     gradient so mid-scroll every colour sat at the wrong card's node */
  .pourline__fill {
    position: absolute; inset: 0;
    background: var(--pour-gradient, var(--accent));
    clip-path: inset(0 0 calc((1 - var(--pl, 1)) * 100%) 0);
  }
  .pourline__tip {
    position: absolute; left: 50%; top: calc(var(--pl, 0) * 100%);
    width: 7px; height: 7px;
    margin: -4px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px 1px rgba(185, 154, 100, 0.55);
    opacity: 0;
  }
  .pourline.is-live .pourline__tip { opacity: 1; }
  .wcard::before {
    content: "";
    position: absolute;
    left: calc(-0.5 * var(--pad) - 2px);
    top: 9px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pour, var(--accent));
  }
  .wcard { position: relative; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .pourline__fill { clip-path: none; opacity: 0.45; }
  .pourline__tip { display: none; }
}

/* paged media: the traverse prints as its static plate, notes legible;
   an armed-but-unpoured diagram prints complete; the film plate (a black
   box on paper) doesn't print at all */
@media print {
  .dims--armed .d-fill { transform: none; animation: none; }
  .plate-film { display: none; }
  .slab.is-live { height: auto !important; margin: 8px 0; }
  .slab.is-live .slab__window { position: static; height: auto; overflow: visible; }
  .slab.is-live .slab__track { transform: none !important; }
  .slab.is-live .slab__track img { width: 100%; height: auto; }
  .slab.is-live .slab__notes { display: grid; min-height: 0; margin: 12px 0 0; }
  .slab.is-live .slab__note { position: static; opacity: 1; transform: none; }
}