/* Veinline: the page is one stone floor laid in a running bond, measured in millimetres.
   Salt-white stone, near-black ink, verde for the brand and the controls, template red for the
   templates and one field of its own. Tall condensed names stand like slabs in the rack. */

@font-face { font-family: "Stack Sans Notch"; src: url("/assets/fonts/specimen/stack-sans-notch-var.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Smooch Sans"; src: url("/assets/fonts/specimen/smooch-sans-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Stack Sans Text"; src: url("/assets/fonts/specimen/stack-sans-text-var.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@property --vl-thick-w { syntax: "<number>"; inherits: true; initial-value: 560; }
@property --vl-wadd { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --vl-ja { syntax: "<number>"; inherits: true; initial-value: 0; }

.spec-veinline {
  --vl-salt: #F4F3F0;
  --vl-ink: #121416;
  --vl-verde: #00855B;
  --vl-verde-deep: #006E4B;
  --vl-red: #D30F2E;
  --vl-red-deep: #A60A22;
  --vl-vein: #8E918F;
  --vl-ink-2: #4A4D50;
  --vl-haze: rgba(244, 243, 240, .82);
  --vl-screed: #E4E3DF;
  --vl-joint: rgba(142, 145, 143, .6);
  --vl-cut: "Smooch Sans", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --vl-notch: "Stack Sans Notch", "Helvetica Neue", Arial, system-ui, sans-serif;
  --vl-text: "Stack Sans Text", "Helvetica Neue", Arial, system-ui, sans-serif;
  --vl-vw: 100vw;
  --vl-mm: calc(var(--vl-vw) / 3600);
  --vl-cols: 6;
  --vl-t12: calc(1200 * var(--vl-mm));
  --vl-t6: calc(600 * var(--vl-mm));
  --vl-c: var(--vl-t6);
  --vl-pad: max(16px, calc(60 * var(--vl-mm)));
  --vl-edge: max(16px, calc(240 * var(--vl-mm)));
  --vl-nav-h: 56px;
  --vl-thick-w: 560;
  background: var(--vl-salt);
  color: var(--vl-ink);
  font: 400 clamp(1rem, .95rem + .2vw, 1.125rem)/1.6 var(--vl-text);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.spec-veinline { margin: 0; background: var(--vl-salt); }
@media (max-width: 1180px) { .spec-veinline { --vl-mm: calc(var(--vl-vw) / 3000); --vl-cols: 5; } }
@media (max-width: 700px) { .spec-veinline { --vl-mm: calc(var(--vl-vw) / 1200); --vl-cols: 2; --vl-nav-h: 52px; --vl-edge: 16px; } }
@media (max-width: 700px) and (max-height: 620px) { .spec-veinline { --vl-nav-h: 48px; } }

.vl-root { transition: --vl-thick-w .6s ease; }
.vl-root *, .vl-root *::before, .vl-root *::after { box-sizing: border-box; }
.vl-root :where(h1, h2, h3, p, ul, ol, figure, fieldset, legend) { margin: 0; padding: 0; }
.vl-root :where(ul, ol) { list-style: none; }
.vl-root img { display: block; max-width: 100%; }
.vl-root :focus-visible { outline: 3px solid var(--vl-verde); outline-offset: 3px; }
.vl-root a { color: inherit; }
.vl-vh { position: absolute !important; width: 1px; height: 1px; overflow: visible; clip-path: inset(50%); white-space: nowrap; }

/* ── type ─────────────────────────────────────────────────────────────── */
.vl-h1 { font: 300 clamp(2.25rem, 1.3rem + 2.6vw, 3.75rem)/.94 var(--vl-cut); letter-spacing: -.005em; text-wrap: balance; }
.vl-h2 { font: 700 clamp(2.5rem, 1.3rem + 3.2vw, 4.75rem)/.92 var(--vl-cut); letter-spacing: -.005em; text-wrap: balance; }
.vl-h2s { font: 200 clamp(3rem, 1rem + 6.4vw, 8.5rem)/.86 var(--vl-cut); letter-spacing: -.01em; text-wrap: balance; }
.vl-h2x { font: 860 clamp(3.5rem, .5rem + 11.4vw, 14rem)/.8 var(--vl-cut); letter-spacing: -.012em; }
.vl-h3 { font: 600 clamp(1.25rem, 1.05rem + .6vw, 1.625rem)/1.15 var(--vl-notch); }
.vl-display { font: 400 clamp(1.375rem, 1rem + 1.2vw, 2.125rem)/1.28 var(--vl-text); letter-spacing: -.01em; }
.vl-lede, .vl-stand { font: 400 clamp(1.125rem, 1rem + .35vw, 1.3125rem)/1.45 var(--vl-text); }
.vl-small, .vl-root figcaption { font: 460 .875rem/1.45 var(--vl-text); color: var(--vl-ink-2); font-variant-numeric: tabular-nums lining-nums; }
.vl-root p { max-width: 62ch; }

/* ── the floor: one stone tile under the whole page, each section's bond drawn over it ──────── */
/* the veined floor shows only in the bands laid in stone (the board and the floors); elsewhere the
   stones stand on plain salt as objects */
.vl-floor { position: relative; isolation: isolate; background: var(--vl-salt); }
.vl-marble::before, .vl-marble::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--vl-floor-base, url("/assets/work/veinline/floor.webp")) 0 0 / 1024px 1024px repeat; }
.vl-marble::after { background-image: var(--vl-floor-next, none); opacity: 0; }
.vl-relaid .vl-marble::after { opacity: 1; transition: opacity .4s ease; }
@media (max-width: 700px) { .vl-marble::before { background-image: var(--vl-floor-base, url("/assets/work/veinline/floor-sm.webp")); background-size: 768px 768px; } .vl-marble::after { background-size: 768px 768px; } }
.vl-sec:where(:not(.vl-marble)) .vl-haze { background-color: var(--vl-salt); }

/* a section lays its own module, --vl-tw by --vl-th millimetres, each course shifted by --vl-off of
   a tile (a running bond unless it says otherwise), anchored to its top joint */
.vl-sec, .vl-tpl-head, .vl-board-t { scroll-margin-top: calc(var(--bar-h, 40px) + var(--vl-nav-h)); }
.vl-sec, .vl-course {
  --vl-tpx: calc(var(--vl-tw, 1200) * var(--vl-mm));
  --vl-c: calc(var(--vl-th, 600) * var(--vl-mm));
  position: relative;
  background-image:
    linear-gradient(var(--vl-joint) 0 1.5px, transparent 1.5px),
    conic-gradient(at 1.5px 50%, transparent 0 75%, var(--vl-joint) 0),
    conic-gradient(at 1.5px 50%, transparent 0 75%, var(--vl-joint) 0);
  background-size: 100% var(--vl-c), var(--vl-tpx) calc(2 * var(--vl-c)), var(--vl-tpx) calc(2 * var(--vl-c));
  background-position: 0 0, 0 0, calc(var(--vl-off, .5) * var(--vl-tpx)) var(--vl-c);
}
/* blocks sit on the 600 mm grid and take whole courses: the joints are the gutters */
.vl-band {
  display: grid; grid-template-columns: repeat(var(--vl-cols), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--vl-t6), auto);
  padding: calc(var(--vl-pt, 0) * var(--vl-t6)) 0 calc(var(--vl-pb, 0) * var(--vl-t6));
}
.vl-js .vl-band { grid-auto-rows: var(--vl-t6); }
.vl-t { position: relative; min-width: 0; grid-column: var(--c, 1) / span var(--w, var(--vl-cols)); grid-row: var(--r, auto) / span var(--vl-rows, var(--h, 1)); }
.vl-haze { background-color: var(--vl-haze); }
.vl-auto { padding: var(--vl-pad); }
.vl-auto.vl-flush { padding-left: var(--vl-edge); }
.vl-fig { overflow: hidden; background: #DCDBD7; }
.vl-fig picture, .vl-fig img { display: block; width: 100%; height: 100%; }
.vl-fig img { object-fit: cover; }
.vl-fig figcaption { position: absolute; left: 0; bottom: 0; max-width: 100%; padding: 8px 14px 9px var(--vl-pad); background: var(--vl-haze); color: var(--vl-ink); }

/* ── nav ──────────────────────────────────────────────────────────────── */
.vl-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 32px);
  height: var(--vl-nav-h); padding: 0 var(--vl-edge);
  background: rgba(244, 243, 240, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 -1.5px 0 var(--vl-joint);
}
.vl-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; color: var(--vl-ink); text-decoration: none; font: 600 20px/1 var(--vl-notch); letter-spacing: -.005em; white-space: nowrap; }
.vl-mark { display: block; flex: none; }
.vl-mark-slab { fill: var(--vl-verde); }
.vl-mark-vein { fill: var(--vl-salt); }
.vl-mark-vein2 { fill-opacity: .7; }
.vl-mark-floor { fill: var(--vl-ink); }
.vl-nav-list { display: flex; gap: clamp(14px, 1.7vw, 30px); }
.vl-nav-list a, .vl-menu a { display: inline-block; padding: 12px 0 10px; font: 560 .9375rem/1 var(--vl-text); letter-spacing: .005em; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.vl-nav-list a:hover { border-bottom-color: var(--vl-verde); }
.vl-menu { display: none; position: relative; }
.vl-menu summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font: 560 .9375rem/1 var(--vl-text); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--vl-ink); border-radius: 2px; }
.vl-menu summary::-webkit-details-marker { display: none; }
.vl-menu ul { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; padding: 8px 20px; background: var(--vl-salt); box-shadow: 0 0 0 1.5px var(--vl-joint), 0 12px 28px rgba(18, 20, 22, .12); }
.vl-menu li + li { border-top: 1.5px solid rgba(142, 145, 143, .35); }
.vl-menu a { display: block; padding: 14px 0; }
@media (max-width: 1060px) { .vl-nav-list { display: none; } .vl-menu { display: block; } }

/* ── buttons ──────────────────────────────────────────────────────────── */
.vl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 2px;
  background: transparent; color: var(--vl-ink); cursor: pointer; text-decoration: none;
  font: 560 .9375rem/1 var(--vl-text); letter-spacing: .005em; white-space: nowrap;
  transition: transform 90ms, box-shadow 160ms, background-color 160ms;
}
.vl-btn:active { transform: translateY(1px); }
.vl-btn svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.vl-btn-sq { width: 44px; padding: 0; background: var(--vl-salt); box-shadow: inset 0 0 0 1.5px var(--vl-ink-2); }
.vl-btn-sq:hover { box-shadow: inset 0 0 0 1.5px var(--vl-ink); }
.vl-btn-primary { background: var(--vl-salt); box-shadow: inset 0 0 0 2px var(--vl-verde); padding: 0 18px; }
.vl-btn-primary:hover { background: #fff; }
/* the way on: filled verde, the arrow running ahead on hover */
.vl-btn-go { min-height: 50px; padding: 0 20px 0 22px; gap: 12px; background: var(--vl-verde-deep); color: #fff; box-shadow: 0 8px 18px -10px rgba(0, 110, 75, .8); font-weight: 620; }
.vl-btn-go:hover { background: #005A3D; }
.vl-root .vl-btn-go { color: #fff; }
.vl-go-arrow { display: inline-block; transition: translate .25s ease; }
.vl-btn-go:hover .vl-go-arrow { translate: 4px 0; }
.vl-btn-go:focus-visible { outline: 2px solid var(--vl-ink); outline-offset: 3px; }

/* ── the yard ─────────────────────────────────────────────────────────── */
.vl-yard { position: relative; }
.vl-hello { position: absolute; z-index: 4; top: clamp(18px, 2.6vw, 40px); left: var(--vl-edge); width: clamp(300px, 34vw, 420px); }
@media (max-width: 1180px) { .vl-hello { width: clamp(300px, 44vw, 440px); } .vl-sub { font-size: .9375rem; max-width: none; } }
/* small landscape screens: only the headline over the rack; the sub-line follows the course */
@media (max-width: 1180px) and (min-width: 701px) and (min-aspect-ratio: 5/4) {
  .vl-yard { display: flex; flex-direction: column; }
  .vl-hello { display: contents; }
  .vl-h1 { position: absolute; z-index: 4; top: clamp(18px, 2.6vw, 40px); left: var(--vl-edge); max-width: 56vw; }
  .vl-stage { order: 1; }
  .vl-course { order: 2; }
  .vl-sub { order: 3; margin: 0; padding: 18px var(--vl-edge) 22px; max-width: none; background: var(--vl-haze); box-shadow: inset 0 1.5px 0 var(--vl-joint); }
  .vl-sub { font-size: 1rem; }
}
.vl-sub { margin-top: 12px; max-width: 380px; font: 400 1rem/1.5 var(--vl-text); color: var(--vl-ink-2); }
.vl-stage {
  --vl-stage-h: clamp(300px, calc(100svh - var(--bar-h, 40px) - var(--vl-nav-h) - var(--vl-c)), 820px);
  position: relative; height: var(--vl-stage-h); overflow: hidden;
  background: linear-gradient(to bottom, #F4F3F0 0%, #E9E8E4 var(--vl-hor, 42%), #E9E8E4 100%);
}
.vl-poster, .vl-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vl-poster img { object-fit: cover; object-position: 62% 42%; }
.vl-poster { transition: opacity .45s ease; }
.vl-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .45s ease;
  background: linear-gradient(to top, rgba(244, 243, 240, .9) 0, rgba(244, 243, 240, .72) 16%, rgba(244, 243, 240, 0) 34%),
    linear-gradient(90deg, rgba(244, 243, 240, .92) 0, rgba(244, 243, 240, .78) 30%, rgba(244, 243, 240, 0) 56%); }
.vl-live::before { opacity: 0; }
@media (max-width: 700px) { .vl-stage::before { background: linear-gradient(to top, rgba(244, 243, 240, .92) 0, rgba(244, 243, 240, .7) 22%, rgba(244, 243, 240, 0) 42%); } }
.vl-live .vl-poster { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.vl-rack { position: absolute; inset: 0; z-index: 1; touch-action: pan-y; outline: none; }
.vl-live .vl-rack { cursor: grab; }
.vl-live .vl-rack:active { cursor: grabbing; }
.vl-rack:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 3px var(--vl-verde); pointer-events: none; }
.vl-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* the stone's name is cut into the slab in front (stone.js draws it into the face at a template
   line). Without the rack it is cut into the photograph's front slab the same way. */
.vl-name {
  --vl-name-size: min(clamp(2.75rem, 1rem + 6vw, 7rem), 13svh);
  position: absolute; z-index: 3; right: 4.5%; top: 47%; left: auto;
  margin: 0; padding: 0 .12em .06em; max-width: 46%;
  font: 780 var(--vl-name-size)/.9 var(--vl-cut); letter-spacing: -.005em;
  color: rgba(18, 20, 22, .84); mix-blend-mode: multiply; white-space: nowrap; pointer-events: none;
  text-shadow: -1px -1px 0 rgba(255, 255, 255, .5), 1px 1px 0 rgba(0, 0, 0, .18);
  border-bottom: 3px solid var(--vl-red);
}
.vl-live .vl-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); border: 0; padding: 0; }
.vl-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.vl-slab-snap { position: absolute; z-index: 5; pointer-events: none; }
@supports (view-transition-name: a) {
  ::view-transition-group(vl-slab), ::view-transition-group(vl-stone-name) { animation-duration: 560ms; animation-timing-function: cubic-bezier(.3, 0, .1, 1); }
  ::view-transition-old(vl-slab), ::view-transition-new(vl-slab), ::view-transition-old(vl-stone-name), ::view-transition-new(vl-stone-name) { height: 100%; object-fit: fill; }
  ::view-transition-group(vl-cut-1), ::view-transition-group(vl-cut-2), ::view-transition-group(vl-cut-3), ::view-transition-group(vl-cut-4), ::view-transition-group(vl-cut-5), ::view-transition-group(vl-cut-6), ::view-transition-group(vl-face-0), ::view-transition-group(vl-face-1) { animation-duration: 480ms; animation-timing-function: cubic-bezier(.3, 0, .1, 1); }
  ::view-transition-old(vl-cut-1), ::view-transition-old(vl-cut-2), ::view-transition-old(vl-cut-3), ::view-transition-old(vl-cut-4), ::view-transition-old(vl-cut-5), ::view-transition-old(vl-cut-6), ::view-transition-new(vl-cut-1), ::view-transition-new(vl-cut-2), ::view-transition-new(vl-cut-3), ::view-transition-new(vl-cut-4), ::view-transition-new(vl-cut-5), ::view-transition-new(vl-cut-6) { height: 100%; object-fit: fill; }
}

/* ── the tray under the rack: a chip of each stone, the one in front lifted and pointing up at it ── */
.vl-tray {
  position: absolute; z-index: 4; right: var(--vl-edge); bottom: 18px; display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 10px; border-radius: 4px; background: rgba(244, 243, 240, .95);
  box-shadow: 0 0 0 1.5px var(--vl-joint), 0 18px 34px -16px rgba(18, 20, 22, .45); visibility: hidden;
}
.vl-on .vl-tray { visibility: visible; }
.vl-tray-tab {
  position: absolute; left: 12px; bottom: 100%; margin: 0; padding: 5px 10px 4px; border-radius: 4px 4px 0 0;
  background: var(--vl-ink); color: var(--vl-salt); font: 640 .6875rem/1 var(--vl-text); letter-spacing: .08em; text-transform: uppercase;
}
.vl-tray-arrow { width: 40px; min-height: 40px; }
.vl-chips { display: flex; gap: 8px; }
.vl-chip {
  position: relative; display: grid; justify-items: center; gap: 6px; min-width: 64px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--vl-ink-2); font: 560 .75rem/1 var(--vl-text); letter-spacing: .01em;
}
.vl-chip-face {
  display: block; width: 64px; height: 42px; overflow: hidden; border-radius: 2px; background: var(--vl-chip, #DDD);
  box-shadow: inset 0 0 0 1px rgba(18, 20, 22, .14), 0 2px 4px -1px rgba(18, 20, 22, .3);
  transition: translate .22s cubic-bezier(.3, 0, .1, 1), box-shadow .22s ease;
}
.vl-chip-face canvas { display: block; width: 100%; height: 100%; }
.vl-chip-s { display: none; }
@media (hover: hover) { .vl-chip:hover .vl-chip-face { translate: 0 -3px; box-shadow: inset 0 0 0 1px rgba(18, 20, 22, .14), 0 8px 12px -6px rgba(18, 20, 22, .45); } .vl-chip:hover { color: var(--vl-ink); } }
.vl-chip[aria-checked="true"] { color: var(--vl-ink); font-weight: 720; }
.vl-chip[aria-checked="true"] .vl-chip-face { translate: 0 -6px; box-shadow: 0 0 0 2px var(--vl-salt), 0 0 0 4px var(--vl-verde), 0 10px 16px -8px rgba(18, 20, 22, .5); }
.vl-chip:focus-visible { outline: none; }
.vl-chip:focus-visible .vl-chip-face { box-shadow: 0 0 0 2px var(--vl-salt), 0 0 0 4px var(--vl-ink); }
.vl-tray-sep { align-self: stretch; width: 1.5px; margin: 0 2px; background: var(--vl-joint); }
.vl-tray-book { min-height: 40px; padding: 0 12px 0 10px; background: var(--vl-salt); box-shadow: inset 0 0 0 1.5px var(--vl-ink-2); }
.vl-tray-book:hover { box-shadow: inset 0 0 0 1.5px var(--vl-ink); }
.vl-tray-book[aria-pressed="true"] { color: var(--vl-verde-deep); box-shadow: inset 0 0 0 2px var(--vl-verde); }
/* short screens: a slimmer tray, so the slab in front keeps its size */
@media (min-width: 701px) and (max-height: 820px) {
  .vl-tray { bottom: 12px; gap: 8px; padding: 9px 10px 7px; }
  .vl-tray-arrow, .vl-tray-book { min-height: 36px; }
  .vl-tray-arrow { width: 36px; }
  .vl-chip { gap: 4px; min-width: 54px; }
  .vl-chip-face { width: 54px; height: 32px; }
}
@media (max-width: 1180px) and (min-width: 701px) {
  .vl-tray { right: 16px; bottom: 14px; gap: 8px; padding: 10px; }
  .vl-chip { min-width: 56px; } .vl-chip-face { width: 56px; height: 38px; }
  .vl-tray-book .vl-bm-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vl-tray-book { width: 44px; padding: 0; }
}
/* phones: the tray is the stage's own floor, under the rack */
@media (max-width: 700px) {
  .vl-on .vl-stage { height: calc(var(--vl-stage-h) + 88px); }
  .vl-on .vl-rack, .vl-on .vl-poster { bottom: 88px; height: auto; }
  .vl-tray { left: 0; right: 0; bottom: 0; height: 88px; justify-content: space-between; gap: 6px; padding: 14px 16px 10px; border-radius: 0; background: var(--vl-haze); box-shadow: inset 0 1.5px 0 var(--vl-joint); }
  .vl-tray-tab { left: 16px; }
  .vl-tray-arrow, .vl-tray-sep { display: none; }
  .vl-chips { flex: 1; justify-content: space-between; }
  .vl-chips { gap: 6px; }
  .vl-chip { min-width: 0; flex: 1; font-size: .6875rem; white-space: nowrap; }
  .vl-chip-face { width: min(52px, calc(100% - 6px)); height: 34px; }
  .vl-chip-l { display: none; } .vl-chip-s { display: inline; }
  .vl-tray-book { width: 44px; min-height: 44px; padding: 0; flex: none; }
  .vl-tray-book .vl-bm-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 379px) {
  .vl-tray { padding: 14px 10px 10px; gap: 4px; }
  .vl-chip { font-size: .625rem; letter-spacing: -.01em; }
  .vl-chips { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .vl-chip-face, .vl-go-arrow { transition: none; } }

.vl-course { position: relative; display: grid; grid-template-columns: var(--vl-t12) 1fr; min-height: var(--vl-c); }
.vl-tile { background-color: var(--vl-haze); }
.vl-tile-ctl { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px var(--vl-pad) var(--vl-pad) var(--vl-edge); }
.vl-tile-line { padding: 20px var(--vl-pad) var(--vl-pad); }
.vl-bundle { font: 460 .875rem/1.45 var(--vl-text); color: var(--vl-ink-2); font-variant-numeric: tabular-nums lining-nums; }
.vl-line { font: 400 clamp(1.125rem, 1rem + .35vw, 1.3125rem)/1.45 var(--vl-text); max-width: 36ch; }
.vl-sizes { margin-top: 10px; font: 460 .875rem/1.45 var(--vl-text); color: var(--vl-ink-2); font-variant-numeric: tabular-nums lining-nums; }
.vl-hint { visibility: hidden; }
.vl-on .vl-hint { visibility: visible; }
.vl-hint { display: none; margin-top: 18px; font: 460 .875rem/1.45 var(--vl-text); color: var(--vl-ink-2); }
@media (hover: hover) and (pointer: fine) { .vl-hint { display: block; } }
@media (min-width: 1181px) { .vl-tile-line { padding-left: var(--vl-edge); } }
/* on desktops the course under the rack is a shallower course (1200 by 400 mm, never under 172 px), and
   the rack's stage takes what it gives up, so the rack, not the course, fills the first screen */
@media (min-width: 1181px) {
  .vl-yard { --vl-yc: max(172px, calc(400 * var(--vl-mm))); }
  .vl-yard .vl-stage { --vl-stage-h: clamp(300px, calc(100svh - var(--bar-h, 40px) - var(--vl-nav-h) - var(--vl-yc)), 860px); }
  .vl-yard .vl-course { --vl-c: var(--vl-yc); }
}
/* the course under the rack: its words and the way on sit in the middle of the course, not at its top */
@media (min-width: 701px) {
  .vl-tile-ctl { justify-content: center; padding-top: var(--vl-pad); }
  .vl-tile-line { display: flex; flex-direction: column; justify-content: center; padding-top: var(--vl-pad); }
}

/* tablets and small laptops: the course is shallower, so the controls sit in one row */
@media (max-width: 1180px) and (min-width: 701px) {
  .vl-tile-ctl { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 10px 12px; }
  .vl-bundle { flex-basis: 100%; }
  .vl-course { grid-template-columns: calc(var(--vl-t12) + var(--vl-t6) * .5) 1fr; }
}

/* phones: the headline takes a band above the rack, the sub-line drops below the controls */
@media (max-width: 700px) {
  .vl-yard { display: flex; flex-direction: column; }
  .vl-hello { display: contents; }
  .vl-h1 { order: 0; padding: 14px 16px 12px; font-size: 2.25rem; background: rgba(244, 243, 240, .86); box-shadow: inset 0 -1.5px 0 var(--vl-joint); }
  .vl-stage { order: 1; --vl-stage-h: max(240px, min(52svh, calc(100svh - 300px))); }
  .vl-course { order: 2; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "line line" "sizes sizes" "lay lay" "bundle bundle"; gap: 0 8px; padding: 14px 16px 18px; min-height: 0;
    background-image: linear-gradient(var(--vl-haze), var(--vl-haze)), linear-gradient(var(--vl-joint) 0 1.5px, transparent 1.5px), conic-gradient(at 1.5px 50%, transparent 0 75%, var(--vl-joint) 0), conic-gradient(at 1.5px 50%, transparent 0 75%, var(--vl-joint) 0);
    background-size: 100% 100%, 100% var(--vl-c), var(--vl-t12) calc(2 * var(--vl-c)), var(--vl-t12) calc(2 * var(--vl-c));
    background-position: 0 0, 0 0, 0 0, var(--vl-t6) var(--vl-c); }
  .vl-tile { display: contents; }
  .vl-line { grid-area: line; }
  .vl-sizes { grid-area: sizes; margin: 6px 0 14px; }
  #vl-layout { grid-area: lay; margin-top: 10px; min-height: 48px; width: 100%; justify-content: space-between; }
  .vl-bundle { grid-area: bundle; margin-top: 12px; }
  .vl-sub { order: 3; margin: 0; padding: 16px 16px 22px; max-width: none; background: var(--vl-haze); }
  .vl-name { --vl-name-size: clamp(2.5rem, 1.2rem + 7.2vw, 3rem); right: 16px; top: auto; bottom: 18%; max-width: 70%; }
}
@media (max-width: 700px) and (max-height: 620px) {
  .vl-h1 { font-size: 1.875rem; padding: 10px 16px 8px; }
  .vl-name { --vl-name-size: 2.25rem; }
  .vl-course { grid-template-areas: "line lay" "sizes sizes" "bundle bundle"; padding-top: 10px; }
  .vl-line { font-size: 1rem; margin-bottom: 8px; }
  .vl-sizes { margin: 10px 0 0; }
  #vl-layout { width: 48px; padding: 0; margin-top: 0; justify-content: center; }
  #vl-layout .vl-lay-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ── 2. the board: lay your kitchen on the slab ──────────────────────────────────────────────── */
.vl-tpl-top { --vl-pt: 1; }
.vl-tpl-head { padding: var(--vl-pad) var(--vl-edge); }
.vl-tpl-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 14px clamp(24px, 4vw, 64px); align-items: end; }
.vl-tpl-name {
  display: block; width: max-content; max-width: 100%; margin-bottom: clamp(6px, .8vw, 12px);
  font: var(--vl-thick-w) clamp(3rem, 1.2rem + 5.4vw, 6.75rem)/.86 var(--vl-cut); letter-spacing: -.005em;
  font-variation-settings: "wght" var(--vl-thick-w);
}
.vl-stand { max-width: 40ch; margin-bottom: .2em; color: var(--vl-ink-2); }
.vl-tools { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; gap: 18px clamp(24px, 3.4vw, 48px); padding: var(--vl-pad) var(--vl-edge); }
.vl-tool-turn { display: flex; align-items: center; gap: 14px; flex: 1 1 240px; }
.vl-root:not(.vl-js) .vl-tools-band { display: none; }
.vl-tool-l { margin-bottom: 8px; font: 560 .9375rem/1.2 var(--vl-text); }
.vl-opts { display: flex; gap: 8px; }
.vl-opt {
  flex: 0 0 auto; min-width: 92px; min-height: 70px; padding: 9px 12px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 2px; background: var(--vl-salt); color: var(--vl-ink); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(74, 77, 80, .42);
  font: 560 .875rem/1.15 var(--vl-text); text-align: center; transition: box-shadow 160ms, background-color 160ms;
}
.vl-opt:hover { box-shadow: inset 0 0 0 1.5px var(--vl-ink); }
.vl-opt:active { transform: translateY(1px); }
.vl-opt svg { flex: none; height: 24px; width: auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.vl-opt[aria-pressed="true"] { color: var(--vl-verde-deep); background: rgba(0, 133, 91, .1); box-shadow: inset 0 0 0 2px var(--vl-verde); }

.vl-board-t { padding: var(--vl-pad) var(--vl-edge); }
.vl-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.vl-board-poster { position: absolute; z-index: 0; left: 0; right: 0; top: 0; aspect-ratio: 32 / 9; overflow: hidden; }
.vl-board-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.vl-slabs .vl-board-poster { display: none; }
.vl-slab { position: relative; z-index: 1; min-width: 0; }
.vl-face { position: relative; aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px rgba(18, 20, 22, .38), 0 14px 24px -16px rgba(18, 20, 22, .6); }
.vl-slabs .vl-face { background: var(--vl-tint, #ECEBE7); }
.vl-face > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vl-slab-l { margin-top: 8px; font: 460 .875rem/1.4 var(--vl-text); color: var(--vl-ink-2); font-variant-numeric: tabular-nums lining-nums; }
.vl-help { max-width: 34ch; font: 460 .875rem/1.45 var(--vl-text); color: var(--vl-ink-2); }
.vl-turn[disabled] { opacity: .4; cursor: default; }

.vl-piece {
  position: absolute; z-index: 1;
  left: calc(var(--x) / 32 * 1%); top: calc(var(--y) / 18 * 1%); width: calc(var(--w) / 32 * 1%); height: calc(var(--h) / 18 * 1%);
  box-shadow: inset 0 0 0 1.5px var(--vl-red), inset 0 0 0 2.5px rgba(244, 243, 240, .55); background: rgba(244, 243, 240, .06);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline-offset: 2px;
}
.vl-piece.vl-sel { z-index: 2; box-shadow: inset 0 0 0 3px var(--vl-red), 0 0 0 1px rgba(244, 243, 240, .9); background: rgba(211, 15, 46, .045); }
.vl-face[data-r="2"] .vl-piece:not(.vl-sel) { box-shadow: inset 0 0 0 1.5px #FF6B7F, inset 0 0 0 2.5px rgba(18, 20, 22, .35); }
.vl-face[data-r="2"] .vl-sink { border-color: rgba(244, 243, 240, .9); }
.vl-piece.vl-held { cursor: grabbing; }
.vl-pl { position: absolute; left: 3px; top: 3px; padding: 3px 6px; background: rgba(244, 243, 240, .92); font: 560 .75rem/1.1 var(--vl-text); color: var(--vl-red-deep); white-space: nowrap; pointer-events: none; }
.vl-sel .vl-pl { background: var(--vl-red); color: #fff; }
.vl-piece[data-r="1"] .vl-pl { left: auto; right: 3px; }
.vl-piece[data-r="2"] .vl-pl { left: auto; right: 3px; top: auto; bottom: 3px; }
.vl-piece[data-r="3"] .vl-pl { top: auto; bottom: 3px; }
.vl-sink { position: absolute; left: calc(var(--sx) / var(--w) * 100%); top: calc(var(--sy) / var(--h) * 100%); width: calc(var(--sw) / var(--w) * 100%); height: calc(var(--sh) / var(--h) * 100%); border: 1px solid var(--vl-ink); border-radius: 3px; background: rgba(18, 20, 22, .12); pointer-events: none; }
.vl-grid-tile .vl-pl { left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.vl-grid { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.vl-grid path { fill: none; stroke: rgba(18, 20, 22, .5); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }

.vl-fitted { --c: 1; --w: 4; --h: 3; padding: var(--vl-pad) var(--vl-pad) var(--vl-pad) var(--vl-edge); }
.vl-fit-view { position: absolute; top: calc(var(--vl-pad) + 44px); bottom: var(--vl-pad); left: var(--vl-edge); right: var(--vl-pad); }
.vl-fit-view > canvas, .vl-fit-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vl-fit-svg { overflow: visible; }
.vl-fit-svg path { stroke: var(--vl-ink); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vl-fit-svg .vl-fit-face { fill: rgba(142, 145, 143, .25); stroke: rgba(18, 20, 22, .55); }
.vl-fit-svg .vl-fit-box { fill: #F3F2EF; }
.vl-fit-svg .vl-fit-hole { fill: rgba(18, 20, 22, .45); }
.vl-fit-svg .vl-fit-line { fill: none; }
.vl-drawn .vl-fit-svg { visibility: hidden; }
.vl-joint { --c: 5; --w: 2; --h: 3; }
.vl-joint-view { position: relative; aspect-ratio: 4 / 3; margin-bottom: 14px; display: none; }
.vl-joint-view > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vl-slabs .vl-joint-view { display: block; }
.vl-joint-say { margin-bottom: 10px; font: 560 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.35 var(--vl-text); }

/* ── 3. five stones: the names at slab scale, each beside a tile of its own stone ─────────────── */
.vl-stones-end { margin-top: calc(-1 * var(--vl-t6)); }
.vl-stone-name {
  --r: 1; --vl-sw: calc(var(--vl-thick-w) + var(--vl-wadd));
  align-self: end; padding: 0 var(--vl-pad); margin-bottom: -.08em;
  font: var(--vl-sw) clamp(3.25rem, 1rem + 7.4vw, 9.5rem)/.84 var(--vl-cut); letter-spacing: -.008em;
  font-variation-settings: "wght" var(--vl-sw); text-wrap: balance;
  transition: --vl-wadd .3s ease;
}
@supports (text-box: trim-end alphabetic) { .vl-stone-name, .vl-state, .vl-floors-h { text-box: trim-end alphabetic; margin-bottom: 0; } }
.vl-stone-name, .vl-state, .vl-floors-h { z-index: 2; pointer-events: none; }
.vl-stone:hover .vl-stone-name, .vl-stone:focus-within .vl-stone-name { --vl-wadd: 60; }
.vl-inset { --r: 1; --w: 2; --h: 2; margin: 0 0 calc(var(--vl-t6) * .12); overflow: hidden; background: var(--vl-tint);
  box-shadow: 0 0 0 1px rgba(18, 20, 22, .22), 0 calc(3px + var(--vl-thick-w) / 140 * 1px) 0 -1px #CFCECA, 0 26px 34px -22px rgba(18, 20, 22, .55); }
.vl-inset > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vl-stone-copy { --r: 2; --w: 2; }
.vl-stone-copy p { font-size: 1rem; line-height: 1.45; }
.vl-lay { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; font: 560 .9375rem/1 var(--vl-text); text-decoration: underline 2px var(--vl-verde); text-underline-offset: 5px; }
.vl-lay:hover { text-decoration-thickness: 3px; }
.vl-stone:nth-child(odd) .vl-stone-name { --c: 1; --w: 4; padding-left: var(--vl-edge); }
.vl-stone:nth-child(odd) .vl-inset { --c: 5; }
.vl-stone:nth-child(odd) .vl-stone-copy { --c: 2; }
.vl-stone:nth-child(even) .vl-inset { --c: 1; }
.vl-stone:nth-child(even) .vl-stone-name { --c: 3; --w: 4; }
.vl-stone:nth-child(even) .vl-stone-copy { --c: 4; }
.vl-stone[data-bundle="0"], .vl-face[data-r="0"] { --vl-tint: linear-gradient(118deg, #EFEEEA 0 30%, #D8D9D7 34%, #EDECE8 37%, #EFEEEA 62%, #CFD0CF 64.5%, #EFEEEA 67% 100%); }
.vl-stone[data-bundle="1"], .vl-face[data-r="1"] { --vl-tint: linear-gradient(64deg, #F1F0EC 0 24%, #3A3C3F 26%, #9C9EA0 28%, #F1F0EC 33% 58%, #2C2E31 59.5%, #A5A7A9 61.5%, #F1F0EC 66% 100%); }
.vl-stone[data-bundle="2"], .vl-face[data-r="2"] { --vl-tint: linear-gradient(140deg, #1F5A43 0 18%, #C9D8CC 19.5%, #174D39 21% 52%, #BFD1C3 53%, #0F3B2C 54.5% 100%); }
.vl-stone[data-bundle="3"], .vl-face[data-r="3"] { --vl-tint: radial-gradient(60% 80% at 30% 40%, #E7D6B8, #D4BF98 70%), #DCC8A6; }
.vl-stone[data-bundle="4"], .vl-face[data-r="4"] { --vl-tint: repeating-linear-gradient(172deg, #DDDEDB 0 14px, #C7CBCC 16px, #E6E7E4 19px 34px); }
.vl-stones-foot { --c: 5; --w: 2; background: var(--vl-haze); color: var(--vl-ink-2); font: 460 .875rem/1.45 var(--vl-text); }

/* ── 4. an afternoon at the yard: one paragraph on an island top, round a sink cut-out ────────── */
.vl-afternoon { --vl-joint: rgba(110, 0, 18, .34); background-color: var(--vl-red); color: var(--vl-salt); }
.vl-afternoon .vl-haze { background-color: transparent; }
.vl-afternoon .vl-island { color: var(--vl-ink); }
.vl-afternoon :focus-visible { outline-color: var(--vl-salt); }
.vl-aft-top { --vl-pt: 1; }

.vl-island {
  --c: 2; --w: 5; --h: 2; isolation: isolate;
  --ip: clamp(20px, 2.8vw, 44px); --kw: calc(780 * var(--vl-mm)); --kh: calc(440 * var(--vl-mm)); --kt: calc(170 * var(--vl-mm));
  --kx: calc(100% - var(--ip) - var(--kw));
  padding: var(--ip);
}
.vl-island-top {
  position: absolute; inset: 0; z-index: -1;
  background: #F9F9F7; box-shadow: inset 0 0 0 1.5px rgba(18, 20, 22, .3), inset 0 0 0 4px rgba(255, 255, 255, .7);
  filter: drop-shadow(0 22px 26px rgba(70, 0, 10, .45));
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-size: 100% calc(var(--ip) + var(--kt)), 100% calc(100% - var(--ip) - var(--kt) - var(--kh)), var(--kx) var(--kh), calc(100% - var(--kx) - var(--kw)) var(--kh);
  mask-size: 100% calc(var(--ip) + var(--kt)), 100% calc(100% - var(--ip) - var(--kt) - var(--kh)), var(--kx) var(--kh), calc(100% - var(--kx) - var(--kw)) var(--kh);
  -webkit-mask-position: 0 0, 0 100%, 0 calc(var(--ip) + var(--kt)), 100% calc(var(--ip) + var(--kt));
  mask-position: 0 0, 0 100%, 0 calc(var(--ip) + var(--kt)), 100% calc(var(--ip) + var(--kt));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.vl-sink-sp { float: right; width: 0; height: var(--kt); }
.vl-sink-cut { float: right; clear: right; width: var(--kw); height: var(--kh); margin: 0 0 clamp(8px, 1vw, 14px) clamp(18px, 2.2vw, 36px); border: 1.5px solid var(--vl-ink); border-radius: calc(10 * var(--vl-mm)); box-shadow: inset 0 3px 10px -2px rgba(18, 20, 22, .28); }
.vl-runin { display: block; margin-bottom: .25em; font: 800 clamp(2.75rem, 1.4rem + 3.6vw, 5.25rem)/.86 var(--vl-cut); letter-spacing: -.005em; color: var(--vl-red); }

.vl-aft-fig { --c: 1; --w: 3; --h: 2; }
.vl-aft-fig img { object-position: 50% 55%; }
.vl-aft-note { --c: 4; --w: 3; font: 400 clamp(1.125rem, 1rem + .4vw, 1.375rem)/1.45 var(--vl-text); }
.vl-afternoon .vl-fig { background: var(--vl-red-deep); }
.vl-afternoon figcaption { background: var(--vl-salt); }

/* ── 5. marble and lemon juice: a polished tile to etch and hone ─────────────────────────────── */
.vl-etch { --vl-tw: 600; }
.vl-etch-top { --vl-pt: 0; }
.vl-state { --c: 1; --w: 6; align-self: end; padding: 0 var(--vl-edge); margin-bottom: -.08em; font: 540 clamp(3rem, 1rem + 6.2vw, 8rem)/.86 var(--vl-cut); letter-spacing: -.008em; text-wrap: balance; }
/* the lemon test, close up: the polished tile itself, edge to edge, and nothing laid over it but its tools */
.vl-etch-mid { grid-auto-rows: auto !important; }
.vl-etch-tile { --c: 1; --w: 6; height: min(calc(3 * var(--vl-t6)), calc(100svh - var(--bar-h, 40px) - var(--vl-nav-h) - 24px)); min-height: 360px; overflow: hidden; background: #E9E8E4; }
.vl-etch-do { position: absolute; z-index: 2; left: var(--vl-edge); bottom: clamp(16px, 2.4vw, 36px); pointer-events: none; }
.vl-etch-do > * { pointer-events: auto; }
.vl-etch-do .vl-try { display: inline-block; margin: 0; padding: 6px 10px; background: var(--vl-salt); }
.vl-etch-do .vl-small { display: inline-block; padding: 4px 10px; background: rgba(244, 243, 240, .9); }
.vl-etch-tile:not(.vl-live) .vl-etch-do { display: none; }
.vl-etch-gl { position: absolute; inset: 0; touch-action: none; }
.vl-on .vl-etch-gl.vl-live { cursor: crosshair; }
.vl-etch-poster, .vl-etch-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vl-etch-poster img { object-fit: cover; object-position: 42% 60%; }
.vl-etch-gl.vl-live .vl-etch-poster { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.vl-etch-gl > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vl-etch-copy { --c: 1; --w: 6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px clamp(24px, 4vw, 72px); padding: var(--vl-pad) var(--vl-edge) calc(var(--vl-pad) * .5); }
.vl-etch-copy { background: var(--vl-salt); }
.vl-etch-copy .vl-lede { font: 700 clamp(1.75rem, 1rem + 2.2vw, 3rem)/.98 var(--vl-cut); max-width: 18ch; text-wrap: balance; }
.vl-try { font-weight: 560; }
.vl-etch-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 8px; }
.vl-hp { --c: 1; --w: 3; padding-left: var(--vl-edge); }
.vl-hp .vl-h3 { font: 700 clamp(2rem, 1.2rem + 2.4vw, 3.5rem)/.9 var(--vl-cut); }
.vl-hp .vl-h3 { margin-bottom: 10px; }
.vl-hp-fig { --c: 4; --w: 3; --h: 2; }
.vl-hp-fig img { object-position: 45% 58%; }

/* ── 6. walls that open like a book: the one stack bond on the page ──────────────────────────── */
.vl-bath { --vl-tw: 600; --vl-off: 0; }
.vl-bath-head { --vl-pt: 0; }
.vl-h2s { --c: 1; --w: 6; align-self: end; padding: 0 var(--vl-edge); margin-bottom: -.06em; }
.vl-book { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: calc(3 * var(--vl-t6)); background: #E7E6E2; }
.vl-leaf { position: relative; overflow: hidden; background: linear-gradient(104deg, #F1F0EC 0 22%, #B9BBBA 25%, #ECEBE7 29% 55%, #A9ABAB 58.5%, #F0EFEB 62% 100%); }
.vl-leaf-r { transform: scaleX(-1); }
.vl-leaf > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vl-leaf-r > canvas { transform: scaleX(-1); }
.vl-book::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(18, 20, 22, .18); }
.vl-pair-cap { position: absolute; z-index: 1; left: var(--vl-edge); bottom: 0; max-width: min(46ch, 70%); padding: 8px 12px 9px; margin: 0; background: var(--vl-salt); font: 460 .875rem/1.45 var(--vl-text); color: var(--vl-ink-2); }
.vl-bath-band { --vl-pt: 1; }
.vl-bath-fig { --c: 1; --w: 2; --h: 3; --r: 1; }
.vl-bath-fig img { object-position: 50% 30%; }
.vl-bath-copy { --c: 3; --w: 3; --r: 1; }
.vl-bath-copy p + p { margin-top: 12px; }

/* ── 7. floors, laid in bond: the page's own pattern, named ─────────────────────────────────── */
.vl-floors { --vl-joint: rgb(calc(142 - 80 * var(--vl-ja)) calc(145 - 80 * var(--vl-ja)) calc(143 - 78 * var(--vl-ja)) / calc(.6 + .3 * var(--vl-ja))); }
.vl-floors-band { --vl-pt: 0; }
.vl-floors-h { --c: 2; --w: 5; --r: 1; align-self: end; padding: 0 var(--vl-pad); margin-bottom: -.08em; font: 700 clamp(2.5rem, 1rem + 4vw, 5.5rem)/.9 var(--vl-cut); letter-spacing: -.005em; }
.vl-floors-fig { --c: 2; --w: 4; --h: 2; --r: 2; }
.vl-floors-fig img { object-position: 60% 55%; }
.vl-floors-copy { --c: 4; --w: 3; --r: 4; }
@supports (animation-timeline: view()) {
  .vl-floors { animation: vl-joints linear both; animation-timeline: view(); animation-range: entry 35% cover 62%; }
}
@keyframes vl-joints { 0%, 100% { --vl-ja: 0; } 50% { --vl-ja: 1; } }

/* ── 8. living with marble: open type on plain salt, no stone, no joints ────────────────────── */
.vl-living { background-image: none; padding: clamp(56px, 8vw, 128px) var(--vl-edge) clamp(56px, 7vw, 112px); box-shadow: inset 0 1.5px 0 var(--vl-joint); }
.vl-lw-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(24px, 4vw, 72px); padding: 0; }
.vl-lw-band > .vl-t { grid-column: auto; grid-row: auto; padding: 0; background: none; }
.vl-h2x { grid-column: 1 / -1 !important; margin: 0 0 clamp(8px, 2vw, 32px) -.04em; white-space: nowrap; }
.vl-lw .vl-h3 { margin-bottom: 12px; padding-top: 14px; box-shadow: inset 0 3px 0 var(--vl-ink); }
.vl-lw-b .vl-h3 { box-shadow: inset 0 3px 0 var(--vl-red); }
.vl-lw p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; }

/* ── 9. come and walk the racks ─────────────────────────────────────────────────────────────── */
.vl-visit-top { --vl-pt: 1; }
.vl-visit-fig { --c: 1; --w: 6; --h: 3; }
.vl-visit-fig img { object-position: 58% 64%; }
.vl-visit-copy { --c: 1; --w: 2; padding-left: var(--vl-edge); }
.vl-visit-copy .vl-h2 { margin-bottom: 14px; font-size: clamp(3rem, 1.2rem + 4.4vw, 6rem); }
.vl-form { --c: 3; --w: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; align-content: start; }
.vl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; }
.vl-field label, .vl-field legend { font: 560 .9375rem/1.3 var(--vl-text); }
.vl-field input, .vl-field textarea, .vl-field select {
  width: 100%; min-height: 48px; padding: 12px; border: 0; border-radius: 0; margin: 0;
  background: var(--vl-salt); color: var(--vl-ink); font: 400 1rem/1.4 var(--vl-text);
  box-shadow: inset 0 -1.5px 0 var(--vl-vein);
}
.vl-field textarea { resize: vertical; }
.vl-field input::placeholder, .vl-field textarea::placeholder { color: #6A6D70; }
.vl-field input:focus-visible, .vl-field textarea:focus-visible, .vl-field select:focus-visible { outline: 3px solid var(--vl-verde); outline-offset: 0; box-shadow: inset 0 -2px 0 var(--vl-verde); }
.vl-fhint { font: 460 .8125rem/1.4 var(--vl-text); color: var(--vl-ink-2); }
.vl-rooms { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.vl-rooms legend { float: left; width: 100%; margin-bottom: 6px; }
.vl-room { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px 0 10px; background: var(--vl-salt); box-shadow: inset 0 0 0 1.5px rgba(74, 77, 80, .42); cursor: pointer; font: 460 .9375rem/1 var(--vl-text); }
.vl-room input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.vl-room svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.vl-room:has(input:checked) { color: var(--vl-verde-deep); background: rgba(0, 133, 91, .1); box-shadow: inset 0 0 0 2px var(--vl-verde); }
.vl-room:has(input:focus-visible) { outline: 3px solid var(--vl-verde); outline-offset: 3px; }
.vl-field-wide, .vl-send-row { grid-column: 1 / -1; }
.vl-send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.vl-send { min-height: 48px; }
.vl-status { min-height: 1.45em; font: 560 .9375rem/1.45 var(--vl-text); color: var(--vl-verde-deep); }

/* ── the footer: the floor stops at a cut edge, then screed ─────────────────────────────────── */
.vl-foot { position: relative; background: var(--vl-screed); box-shadow: inset 0 2px 0 var(--vl-ink); }
.vl-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 10px; background: linear-gradient(rgba(18, 20, 22, .16), rgba(18, 20, 22, 0)); pointer-events: none; }
.vl-screed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; min-height: 96px; padding: 22px var(--vl-edge) 24px; }
.vl-screed .vl-brand { margin-right: 0; }
.vl-foot-line { margin-right: auto; font: 460 .875rem/1.45 var(--vl-text); color: var(--vl-ink-2); }
.vl-foot-nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.vl-foot-nav a { display: inline-block; padding: 13px 0; font: 560 .875rem/1 var(--vl-text); text-decoration: none; }
.vl-foot-nav a:hover { text-decoration: underline 2px var(--vl-verde); text-underline-offset: 5px; }

/* ── 3 m of floor across (tablets and small laptops): five half tiles ─────────────────────────── */
@media (max-width: 1180px) {
  .vl-tpl-in { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
  .vl-fitted { --w: 3; }
  .vl-joint { --c: 4; }
  .vl-stone:nth-child(odd) .vl-stone-name { --w: 3; }
  .vl-stone:nth-child(odd) .vl-inset { --c: 4; }
  .vl-stone:nth-child(even) .vl-stone-name { --w: 3; }
  .vl-stone:nth-child(even) .vl-stone-copy { --c: 4; }
  .vl-stones-foot { --c: 4; --w: 2; }
  .vl-island { --c: 1; --w: 5; }
  .vl-aft-note { --c: 4; }
  .vl-state { --w: 5; }
  .vl-hp { --w: 2; }
  .vl-hp-fig { --c: 3; --w: 3; }
  .vl-bath-copy { --c: 3; --w: 3; }
  .vl-floors-h { --c: 1; --w: 5; padding-left: var(--vl-edge); }
  .vl-floors-fig { --c: 2; --w: 4; }
  .vl-floors-copy { --c: 1; --w: 3; padding-left: var(--vl-edge); }
  .vl-visit-fig { --w: 5; }
  .vl-visit-copy { --w: 2; }
  .vl-form { --c: 3; --w: 3; grid-template-columns: 1fr; }
}

/* ── 1.2 m across (phones): one tile, everything laid in order ──────────────────────────────── */
@media (max-width: 700px) {
  .vl-t { --c: 1 !important; --w: 2 !important; --r: auto !important; }
  .vl-auto, .vl-auto.vl-flush, .vl-tpl-head, .vl-hp, .vl-visit-copy, .vl-floors-copy { padding: 16px; }
  .vl-tpl-name { font-size: clamp(2rem, 1.2rem + 3vw, 2.5rem); }
  .vl-tpl-in { grid-template-columns: 1fr; }
  .vl-tpl-head { display: flex; flex-direction: column; justify-content: flex-end; }
  .vl-tools { gap: 16px; }
  .vl-tool { flex: 1 1 100%; }
  .vl-opts { width: 100%; }
  .vl-opt { flex: 1 1 0; min-width: 0; min-height: 64px; padding: 9px 4px 8px; }
  .vl-board-t { padding: 16px; }
  .vl-board { grid-template-columns: 1fr; }
  .vl-board-poster { display: none; }
  .vl-face { background: var(--vl-tint, linear-gradient(118deg, #EFEEEA 0 30%, #D8D9D7 34%, #EDECE8 37%, #EFEEEA 62%, #CFD0CF 64.5%, #EFEEEA 67% 100%)); }
  .vl-tool-turn .vl-btn-sq { width: 48px; min-height: 48px; }
  .vl-fitted { --h: 2; padding: 16px; }
  .vl-joint { --h: 1; }
  .vl-fit-view { left: 16px; right: 16px; bottom: 12px; top: 58px; }
  .vl-stone-name { --r: 1; padding: 0 16px !important; font-size: clamp(2.25rem, 1rem + 6.4vw, 3rem); }
  .vl-inset { --r: 2 !important; --h: 2; margin-bottom: 14px; }
  .vl-stone-copy { --r: 3 !important; }
  .vl-stones-foot { padding: 16px; }
  .vl-stones-end { margin-top: 0; }
  .vl-island { --ip: 16px; --kw: calc(100% - 2 * var(--ip)); --kx: var(--ip); --kt: calc(7 * 1.18 * 1.5rem); }
  .vl-island .vl-sink-cut { width: 100%; margin: 0 0 12px; }
  .vl-aft-fig { --h: 2; }
  .vl-state { padding: 0 16px; }
  .vl-etch-copy { grid-template-columns: 1fr; padding: 16px; }
  .vl-etch-tile { height: auto; min-height: 0; overflow: visible; background: none; }
  .vl-etch-gl { position: relative; height: min(100vw, 64svh); overflow: hidden; background: #E9E8E4; }
  .vl-etch-do { position: static; padding: 12px 16px 0; }
  .vl-etch-do .vl-try, .vl-etch-do .vl-small { padding: 0; background: none; }
  .vl-etch-copy .vl-lede { max-width: none; }
  .vl-pair-cap { left: 0; max-width: 88%; }
  .vl-bath-fig { --h: 3; }
  .vl-floors-h { padding: 0 16px; }
  .vl-floors-fig { --h: 2; }
  .vl-lw-band { grid-template-columns: 1fr; }
  .vl-h2x { white-space: normal; font-size: clamp(4rem, 1rem + 16vw, 6rem); }
  .vl-visit-fig { --h: 2; }
  .vl-form { grid-template-columns: 1fr; gap: 16px; }
  .vl-screed { padding: 18px 16px 22px; }
}

/* ── cues: what can be touched says so, until it has been ─────────────────────────────── */
.vl-cue { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px;
  background: rgba(244, 243, 240, .94); color: var(--vl-ink); font: 600 .875rem/1 var(--vl-text); letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 6px 18px -6px rgba(18, 20, 22, .35), 0 0 0 1px rgba(18, 20, 22, .08); pointer-events: none; }
.vl-cue svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* the rack: a hand under the front slab, swaying the way the rack goes */
.vl-cue-rack { position: absolute; z-index: 3; left: var(--x, 70%); top: var(--y, 86%); translate: -50% -50%; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.vl-live:not(.vl-known) .vl-cue-rack { opacity: 1; visibility: visible; transition: opacity .6s ease .9s, visibility 0s; }
.vl-cue-rack .vl-cue-arrow { color: var(--vl-verde); font-weight: 700; }
.vl-cue-hand { animation: vl-sway 2.2s ease-in-out infinite; }
@keyframes vl-sway { 0%, 100% { translate: -5px 0; } 50% { translate: 5px 0; } }

/* the lemon tile */
.vl-cues { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.vl-cues > * { position: absolute; left: calc(var(--x, .5) * 100%); top: calc(var(--y, .5) * 100%); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.vl-etch-tile.vl-live[data-step="drop"] .vl-cue-tap,
.vl-etch-tile.vl-live[data-step="hone"] .vl-cue-etch,
.vl-etch-tile.vl-live[data-step="hone"] .vl-cue-hone,
.vl-cue-timer.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.vl-cue-tap { --x: .52; --y: .5; translate: -50% -50%; }
.vl-cue-tap svg { stroke: #9C8400; fill: #F5D547; }
.vl-cue-ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid var(--vl-verde); animation: vl-ring 2.4s ease-out infinite; }
@keyframes vl-ring { 0% { scale: .45; opacity: .9; } 80%, 100% { scale: 1.25; opacity: 0; } }
/* the lemon's time on the tile, round the drop */
.vl-cue-timer { width: calc(var(--r, .05) * 200% + 18px); height: calc(var(--r, .05) * 200% + 18px); translate: -50% -50%; overflow: visible; }
.vl-cue-timer ellipse { fill: none; stroke: var(--vl-verde); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.vl-cue-timer.is-on ellipse { animation: vl-tick var(--ms, 1200ms) linear forwards; }
@keyframes vl-tick { to { stroke-dashoffset: 0; } }
/* what the lemon left: a tag on a leader, in the template's red */
.vl-cue-etch { display: flex; align-items: center; translate: 6px -50%; color: var(--vl-red-deep); font: 700 .8125rem/1 var(--vl-text); letter-spacing: .04em; text-transform: uppercase; }
.vl-cue-lead { display: block; width: 34px; height: 1.5px; margin-right: 6px; background: var(--vl-red); }
.vl-cue-etch .vl-cue-t { padding: 4px 7px; background: rgba(244, 243, 240, .94); box-shadow: inset 0 0 0 1.5px var(--vl-red); }
/* the honing pad, sliding across where the etch is */
.vl-cue-hone { --x: .5; translate: -50% calc(-50% + 64px); }
.vl-cue-track { position: relative; display: block; width: 74px; height: 22px; border-bottom: 1.5px dashed rgba(18, 20, 22, .35); }
.vl-cue-pad { position: absolute; left: 0; top: 0; animation: vl-pad 1.8s ease-in-out infinite; }
@keyframes vl-pad { 0% { left: 0; } 50% { left: calc(100% - 22px); } 100% { left: 0; } }
/* the tile itself: a lemon to drop where you point, a pad while you drag */
.vl-on .vl-etch-gl.vl-live { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C16 3 7 12.6 7 18a9 9 0 0 0 18 0C25 12.6 16 3 16 3Z' fill='%23F5D547' stroke='%23121416' stroke-width='1.6'/%3E%3Ccircle cx='16' cy='29' r='1.6' fill='%23121416'/%3E%3C/svg%3E") 16 29, crosshair; }
.vl-on .vl-etch-gl.vl-live.vl-honing { cursor: grabbing; }

/* the steps: numbered, the next one lit */
.vl-etch-ctl { list-style: none; padding: 0; }
.vl-etch-ctl li { display: contents; }
.vl-step { position: relative; gap: 8px; padding: 0 14px 0 10px; background: var(--vl-salt); box-shadow: inset 0 0 0 1.5px var(--vl-ink-2); transition: box-shadow .25s ease, background-color .25s ease, translate .2s ease; }
.vl-step:hover { box-shadow: inset 0 0 0 1.5px var(--vl-ink); }
.vl-step:active { translate: 0 1px; }
.vl-step svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vl-step .vl-ic-lemon { fill: #F5D547; stroke: #9C8400; }
.vl-step-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(18, 20, 22, .08); font: 700 .75rem/1 var(--vl-text); }
.vl-step.is-next { box-shadow: inset 0 0 0 2px var(--vl-verde), 0 0 0 4px rgba(0, 133, 91, .14); }
.vl-step.is-next .vl-step-n { background: var(--vl-verde); color: #fff; }
.vl-etch-do .vl-try { max-width: 46ch; min-height: 2.9em; line-height: 1.45; }

/* the board: the piece in hand asks to be moved */
.vl-board:not(.vl-moved) .vl-piece.vl-sel::after {
  content: "Drag to move"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 6px 12px; border-radius: 999px;
  background: rgba(244, 243, 240, .95); color: var(--vl-ink); font: 600 .8125rem/1 var(--vl-text); white-space: nowrap; pointer-events: none;
  box-shadow: 0 0 0 2px var(--vl-verde), 0 6px 16px -6px rgba(18, 20, 22, .35); animation: vl-ask 2s ease-in-out infinite;
}
@keyframes vl-ask { 0%, 100% { box-shadow: 0 0 0 2px var(--vl-verde), 0 0 0 2px rgba(0, 133, 91, .35), 0 6px 16px -6px rgba(18, 20, 22, .35); } 50% { box-shadow: 0 0 0 2px var(--vl-verde), 0 0 0 9px rgba(0, 133, 91, 0), 0 6px 16px -6px rgba(18, 20, 22, .35); } }

@media (prefers-reduced-motion: reduce) {
  .vl-cue-hand, .vl-cue-ring, .vl-cue-pad, .vl-board .vl-piece.vl-sel::after { animation: none !important; }
  .vl-cue-timer.is-on ellipse { animation: none; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vl-root, .vl-root *, .vl-root *::before, .vl-root *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .vl-floors { animation: none; }
}