/* ============================================================
   LABCLONE v4 · "AEDES" · prototype styles
   Loaded after ../tokens.css (the values). White marble, ivory, gold leaf, one fresco colour per app.
   Rule: stone does not move; light does. The curtain is the only big motion.
   Render files are optional: every asset variable below starts as "none" and tools/build.mjs switches it on
   only when the file exists in site/_design/v4/assets/. Until then the CSS draws a quiet stand-in.
   ============================================================ */

/* Castoro Titling fallback, measured in Chrome against Georgia (_qa/dbg-font.mjs): same width and line box as the real font. */
/* Archivo body text fallback, measured the same way (Archivo 400/500 at wdth 100 vs Arial). */
@font-face { font-family: "Archivo Fallback M"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 99%; ascent-override: 88.9%; descent-override: 21.2%; line-gap-override: 0%; }
@font-face { font-family: "Castoro Fallback M"; src: local("Georgia"); size-adjust: 103.46%; ascent-override: 73.46%; descent-override: 23.2%; line-gap-override: 31.9%; }

:root {
  --tex-slab: none; --gold-tex: none; --tex-mosaic: none; --slot: none;
  --niche-narrow: none; --niche-narrow-m: none; --niche-wide: none; --niche-wide-m: none;
  --font-carve: "Castoro Titling", "Castoro Fallback M", Georgia, serif;
  --font-sans: "Archivo", "Archivo Fallback M", system-ui, -apple-system, sans-serif;
  --live: "../../../";

  /* Statuario stand-ins, all hand-made: a soft vein field (SVG noise contour lines), plaster grain, and the meander. */
  --veins: url("../img/marble.jpg");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 .10'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='48'%3E%3Cpath d='M0 34H1V14H33V30H17V22H25V18H9V34H41' fill='none' stroke='%23B8913A' stroke-opacity='.75' stroke-width='1.25'/%3E%3C/svg%3E");
  --meander-cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M0 27H1.5V3H25.5V21H13.5V15H19.5V9H7.5V27H31.5' fill='none' stroke='%237A5A1C' stroke-opacity='.55' stroke-width='1.4'/%3E%3C/svg%3E");
  --marble-css: radial-gradient(120% 90% at 12% -8%, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 55%), var(--veins) center / cover no-repeat, #F8F7F3;
  --leaf-seams: repeating-linear-gradient(90deg, rgb(122 90 28 / .035) 0 1px, transparent 1px .92em), repeating-linear-gradient(0deg, rgb(122 90 28 / .03) 0 1px, transparent 1px .92em);
}
@media (max-width: 767px) { :root { --veins: url("../img/marble-1280.jpg"); } }

/* ---------- base ---------- */
[hidden] { display: none !important; }
html { overflow-x: clip; scroll-padding-top: 88px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button, input, textarea { font: inherit; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); box-sizing: border-box; }
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-3); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 60; background: var(--ink); color: var(--on-ink); padding: 12px 18px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.seam { width: 96px; height: 1px; margin: 0 auto; background: var(--gold); box-shadow: 0 1px 0 rgb(255 255 255 / .9); border: 0; }

.carve { font-family: var(--font-carve); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-carve); line-height: var(--lh-carve); color: var(--ink); text-wrap: balance; }
.numeral { font-family: var(--font-carve); font-size: var(--fs-numeral); letter-spacing: .12em; color: var(--gold-text); line-height: 1; }
.plate { font: 600 var(--fs-plate)/1.4 var(--font-sans); font-stretch: 125%; letter-spacing: var(--track-plate); text-transform: uppercase; color: var(--ink-2); }
.lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.label { display: block; font: 600 15px/1.3 var(--font-sans); margin-bottom: 8px; }
.field { width: 100%; box-sizing: border-box; transition: border-color var(--d-hover) var(--e-out), box-shadow var(--d-hover) var(--e-out); }
.field::placeholder { color: var(--ink-3); opacity: 1; }
.field:hover { border-color: #9E978C; }
.field:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(184 145 58 / .28); }
.error { margin-top: 8px; color: var(--minium); font-size: var(--fs-small); line-height: 1.4; }

/* Buttons (tokens.css .btn), plus a text link with an arrow */
.btn { box-sizing: border-box; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.btn:focus-visible { box-shadow: var(--focus); }
.btn-primary:focus-visible { box-shadow: var(--focus), inset 0 0 0 1px var(--gold); }
.btn[aria-busy="true"] { cursor: progress; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.arrow-link { display: inline-flex; align-items: center; gap: .45em; min-height: var(--tap); font: 600 16px/1.2 var(--font-sans); text-decoration: none; border-radius: 6px; }
.arrow-link > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--vein); transition: text-decoration-color var(--d-hover) var(--e-out); }
.arrow-link:hover > span:first-child { text-decoration-color: var(--gold); }
.arrow-link > span[aria-hidden] { transition: transform var(--d-hover) var(--e-out); }
.arrow-link:hover > span[aria-hidden] { transform: translateX(3px); }
.link-btn { background: none; border: 0; padding: 0; min-height: var(--tap); font: 500 15px/1.3 var(--font-sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--vein); text-underline-offset: 4px; cursor: pointer; border-radius: 6px; }
.link-btn:hover { text-decoration-color: var(--gold); }

/* ---------- reveal (once; opacity only with reduced motion) ---------- */
html.js [data-rv] { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--d-reveal) var(--e-out), transform var(--d-reveal) var(--e-out); transition-delay: calc(var(--i, 0) * 40ms); }
html.js [data-rv].is-in { opacity: 1; transform: none; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-inline: var(--margin); transition: background-color var(--d-state) var(--e-out), box-shadow var(--d-state) var(--e-out), opacity var(--d-reveal) var(--e-out); }
.nav-brand { justify-self: start; display: inline-flex; align-items: center; min-height: var(--tap); font: 900 20px/1 var(--font-sans); font-stretch: 68%; letter-spacing: var(--track-mega); text-transform: uppercase; text-decoration: none; color: var(--ink); border-radius: 6px; }
.nav-links { display: flex; gap: 8px; }
.nav-links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; font: 500 14px/1 var(--font-sans); text-decoration: none; border-radius: 999px; transition: box-shadow var(--d-hover) var(--e-out); }
.nav-links a:hover { box-shadow: inset 0 -1px 0 var(--gold); border-radius: 0; }
.nav-links a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--ink); border-radius: 0; }
.nav-cta { justify-self: end; min-height: var(--tap); padding: 0 20px; font-size: 15px; }
.nav-menu { display: none; justify-self: end; min-height: var(--tap); padding: 0 14px; margin-right: -14px; background: none; border: 0; font: 600 15px/1 var(--font-sans); cursor: pointer; border-radius: 999px; }
.nav.is-floating { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 1px 0 var(--hair); }
@media (max-width: 859px) {
  .threshold { grid-template-rows: var(--nav-h-m) minmax(var(--stage-min), 1fr) auto; --stage-min: min(112vw, 58svh); }
  .nav { height: var(--nav-h-m); grid-template-columns: 1fr auto; }
  .nav-links, .nav-cta { display: none; }
  .nav-menu { display: inline-flex; align-items: center; }
}
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--ivory); display: flex; flex-direction: column; padding: 0 var(--margin) calc(32px + env(safe-area-inset-bottom)); opacity: 0; transition: opacity var(--d-state) var(--e-out); overflow-y: auto; }
.sheet.is-open { opacity: 1; }
.sheet-top { height: var(--nav-h-m); display: flex; align-items: center; justify-content: space-between; }
.sheet-close { min-height: var(--tap); padding: 0 14px; margin-right: -14px; background: none; border: 0; font: 600 15px/1 var(--font-sans); cursor: pointer; border-radius: 999px; }
.sheet-links { display: grid; margin-top: 40px; border-top: 1px solid var(--hair); }
.sheet-links a { display: flex; align-items: center; min-height: 72px; font-family: var(--font-carve); font-size: 30px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--hair); }
.sheet-links a[aria-current="page"]::after { content: ""; width: 40px; height: 1px; margin-left: 16px; background: var(--gold); }
.sheet-cta { margin-top: auto; width: 100%; }

/* ---------- pages: common head ---------- */
.page-head { padding-top: calc(var(--nav-h) + clamp(56px, 7vw, 112px)); padding-bottom: clamp(40px, 5vw, 72px); display: grid; justify-items: center; text-align: center; gap: 20px; }
.page-head .lede { margin-inline: auto; }
.page-title { font-size: var(--fs-carve-1); letter-spacing: .16em; }
.page-title.is-left { letter-spacing: .08em; }
.page-head:has(.is-left) { justify-items: start; text-align: left; }
.scene { padding-block: var(--scene-gap); }

/* ============================================================
   THE THRESHOLD (home hero) and THE CURTAIN
   ============================================================ */
/* The threshold is three bands: the nav on marble, the stage (curtain, then the temple), and the copy on clean marble below.
   Nothing ever sits on the picture, at any aspect ratio: the architrave and its LABCLONE stay clear. */
.threshold { position: relative; min-height: 100svh; display: grid; grid-template-rows: var(--nav-h) minmax(var(--stage-min), 1fr) auto; isolation: isolate; overflow: clip;
  --stage-min: min(52vw, 64svh); --stage-pos: 50% 12%; }
.stage { grid-row: 2; position: relative; z-index: var(--z-stage); overflow: hidden; background: var(--ivory); }
.stage > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage picture img, .stage video { width: 100%; height: 100%; object-fit: cover; object-position: var(--stage-pos); }
.closed .stage { position: absolute; inset: 0; grid-row: auto; }
.stage-plate { z-index: 0; } .stage-poster, .curtain-css { z-index: 1; } .stage-film { z-index: 2; }
.stage-film { opacity: 0; transition: opacity 240ms linear; }
.stage-film.is-playing { opacity: 1; }

/* The plate stand-in: no columns (they are never drawn in CSS), only the architrave and its gilded inscription. */
.plate-css { background: linear-gradient(rgb(251 250 247 / .38), rgb(251 250 247 / .38)), var(--marble-css); }
.plate-css::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, rgb(251 250 247 / .86), rgb(251 250 247 / 0)); }
.steps { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: clamp(54px, 8.4vh, 84px); display: grid; grid-template-rows: 1fr 1fr 1fr; }
.steps i { display: block; background: linear-gradient(180deg, #FFFFFF 0 1px, #F3F0EA 1px, #ECE8E0 100%); box-shadow: 0 -1px 0 rgb(185 179 170 / .55); }
.steps i:nth-child(1) { margin: 0 6%; } .steps i:nth-child(2) { margin: 0 3%; }
.architrave { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); width: min(78%, 1100px); padding: clamp(18px, 2.6vw, 40px) 0; display: grid; place-items: center; border-block: 1px solid rgb(185 179 170 / .55); box-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 1px 0 rgb(255 255 255 / .9); }
.architrave::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 1px; background: rgb(185 179 170 / .38); box-shadow: 0 1px 0 rgb(255 255 255 / .9); }
.architrave::after { content: ""; position: absolute; left: 1.5%; right: 1.5%; top: 100%; height: 28px; background: linear-gradient(to bottom, rgb(58 54 49 / .07), rgb(58 54 49 / 0)); }
.inscription { font-family: var(--font-carve); font-weight: 400; text-transform: uppercase; font-size: clamp(36px, 6.4vw, 104px); letter-spacing: .3em; margin-right: -.3em; line-height: 1; }
.gilt { color: var(--gold); background: var(--gold-leaf), var(--leaf-seams), var(--gold-tex); background-size: 100% 100%, auto, 512px; background-blend-mode: multiply; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: url("#vcut-xl"); }

/* The curtain stand-in (until curtain-16x9.* and its poster are rendered): two halves of carved Statuario folds and one gold seam. */
.curtain-css, .stage-poster, .stage-film, .curtain-skip { display: none; }
html[data-curtain="play"] :is(.curtain-css, .stage-poster, .stage-film), html[data-curtain="copy"] :is(.curtain-css, .stage-poster, .stage-film) { display: block; }
html[data-curtain="play"] .curtain-skip, html[data-curtain="copy"] .curtain-skip { display: inline-flex; }
/* "Enter" leaves before the copy arrives in the same band (any key, click or touch still skips) */
.curtain-skip { transition: opacity 220ms var(--e-in), visibility 0s linear 220ms; }
.threshold.is-skip-out .curtain-skip, html[data-curtain="copy"] .curtain-skip { opacity: 0; visibility: hidden; pointer-events: none; }
.curtain-css.is-still, .stage-poster.is-still { display: block; }
.curtain-css { overflow: hidden; }
/* Each half hangs from 6 runners (.slice, numbered from the outer edge). The centre runners start first and travel
   further, so the folds bunch towards the edges; the heavy hem lags (skew from the top), then swings back as it stops. */
.drape { position: absolute; top: 0; bottom: 0; width: 50.6%; }
.drape-l { left: 0; } .drape-r { right: 0; }
.slice { position: absolute; top: 0; bottom: 0; left: calc(var(--j) * (100% / var(--n))); width: calc(100% / var(--n) + 1px); overflow: hidden; transform-origin: 0 0; backface-visibility: hidden; }
.drape-r .slice { left: auto; right: calc(var(--j) * (100% / var(--n))); transform-origin: 100% 0; }
.drape-cloth { position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  --light: linear-gradient(180deg, rgb(58 54 49 / .16) 0%, rgb(58 54 49 / 0) 12%, rgb(255 255 255 / .18) 55%, rgb(58 54 49 / .06) 92%);
  background: var(--light), var(--veins) 0 0 / auto 100% no-repeat, var(--pipes, none), var(--folds, #F3F1EC), #F3F1EC;
  background-blend-mode: normal, multiply, multiply, normal, normal; }
.slice .drape-cloth { left: calc(var(--j) * (1px - 100%)); width: calc(var(--n) * (100% - 1px)); }
.drape-r .slice .drape-cloth { left: auto; right: calc(var(--j) * (1px - 100%)); }
.drape-r .drape-cloth { background-position: 0 0, 100% 0, 0 0, 0 0, 0 0; }
/* the gold fillet on each meeting edge (together: the seam), and the thin stone edge lit through from behind */
.drape-cloth::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1.5px; background: linear-gradient(180deg, #9E7A2C, #E6C77C 30%, #B8913A 60%, #D4B061); box-shadow: -1px 0 0 rgb(255 255 255 / .85); }
.drape-r .drape-cloth::after { right: auto; left: 0; box-shadow: 1px 0 0 rgb(255 255 255 / .85); }
.drape-cloth::before { content: ""; position: absolute; top: 0; bottom: 0; right: 1.5px; width: 12px; background: linear-gradient(to left, rgb(255 236 204 / .55), rgb(255 236 204 / 0)); opacity: 0; mix-blend-mode: soft-light; }
.drape-r .drape-cloth::before { right: auto; left: 1.5px; background: linear-gradient(to right, rgb(255 236 204 / .55), rgb(255 236 204 / 0)); }
.drape-hem { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(16px, 2.5vh, 26px); background: var(--meander-cut) 0 50% / auto 70% repeat-x, linear-gradient(180deg, #CDAE62, #B8913A 45%, #9C7A30); box-shadow: 0 -1px 0 rgb(255 255 255 / .9), 0 -2px 0 rgb(122 90 28 / .3); }
/* behind the curtain: warm light through the seam, and the curtain's own shadow on the portico */
@property --lit { syntax: "<percentage>"; inherits: false; initial-value: -24%; }
.shade, .seam-light { position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; }
.seam-light { left: 50%; right: auto; width: 140px; margin-left: -70px; background: linear-gradient(90deg, rgb(255 238 208 / 0), rgb(255 241 218 / .6) 50%, rgb(255 238 208 / 0)); opacity: 0; transform: scaleX(.04); }
.shade { background: rgb(46 50 58 / .17); -webkit-mask: linear-gradient(to top, transparent var(--lit), #000 calc(var(--lit) + 22%)); mask: linear-gradient(to top, transparent var(--lit), #000 calc(var(--lit) + 22%)); }
html[data-curtain="play"] .drape-l .slice, html[data-curtain="copy"] .drape-l .slice { animation-name: runner-l; animation-timing-function: linear; animation-fill-mode: both; }
html[data-curtain="play"] .drape-r .slice, html[data-curtain="copy"] .drape-r .slice { animation-name: runner-r; animation-timing-function: linear; animation-fill-mode: both; }
html[data-curtain="play"] .shade, html[data-curtain="copy"] .shade { animation: shade-sweep 3.2s linear both; }
html[data-curtain="play"] .seam-light, html[data-curtain="copy"] .seam-light { animation: seam-light 3.2s linear both; }
html[data-curtain="play"] .drape-cloth::before, html[data-curtain="copy"] .drape-cloth::before { animation: edge-light 3.2s linear both; }
.curtain-css.is-poster .slice, .curtain-css.is-poster .shade, .curtain-css.is-poster .drape-cloth::before { animation: none !important; }
.curtain-css.is-poster .seam-light { display: none; }
/* give → acceleration (the hem lags) → glide → soft stop at the frame edge (the hem swings past, then settles) */
@keyframes runner-l {
  0% { transform: translateX(0) scaleX(1) skewX(0deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  12% { transform: translateX(calc(var(--dx) * .012)) scaleX(1) skewX(0deg); animation-timing-function: cubic-bezier(.55, 0, .8, .55); }
  55% { transform: translateX(calc(var(--dx) * .55)) scaleX(.85) skewX(.9deg); animation-timing-function: cubic-bezier(.2, .45, .5, .6); }
  86% { transform: translateX(calc(var(--dx) * .93)) scaleX(.74) skewX(-.35deg); animation-timing-function: cubic-bezier(.3, .6, .4, 1); }
  100% { transform: translateX(var(--dx)) scaleX(.72) skewX(0deg); }
}
@keyframes runner-r {
  0% { transform: translateX(0) scaleX(1) skewX(0deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  12% { transform: translateX(calc(var(--dx) * .012)) scaleX(1) skewX(0deg); animation-timing-function: cubic-bezier(.55, 0, .8, .55); }
  55% { transform: translateX(calc(var(--dx) * .55)) scaleX(.85) skewX(-.9deg); animation-timing-function: cubic-bezier(.2, .45, .5, .6); }
  86% { transform: translateX(calc(var(--dx) * .93)) scaleX(.74) skewX(.35deg); animation-timing-function: cubic-bezier(.3, .6, .4, 1); }
  100% { transform: translateX(var(--dx)) scaleX(.72) skewX(0deg); }
}
@keyframes shade-sweep { 0%, 32% { --lit: -24%; animation-timing-function: cubic-bezier(.45, 0, .35, 1); } 94%, 100% { --lit: 124%; } }
@keyframes seam-light { 0% { opacity: .45; transform: scaleX(.03); } 18.75% { opacity: .5; transform: scaleX(.04); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 28% { opacity: .85; transform: scaleX(.3); } 46% { opacity: .5; transform: scaleX(1); } 64%, 100% { opacity: 0; transform: scaleX(1.5); } }
@keyframes edge-light { 0% { opacity: .55; } 18.75% { opacity: .6; } 27% { opacity: 1; } 42%, 100% { opacity: 0; } }
.stage.is-skipping :is(.curtain-css, .stage-poster, .stage-film) { opacity: 0; transition: opacity var(--d-skip) var(--e-stone); }
/* once the film plays, the still poster underneath is gone: the hand-off dissolves the film straight into the plate */
.stage.is-film .stage-poster { visibility: hidden; transition: visibility 0s linear 260ms; }
.stage.is-handoff :is(.stage-poster, .stage-film) { opacity: 0; transition: opacity 600ms var(--e-light); }
.stage.is-handoff.is-reframe :is(.stage-poster, .stage-film) { transition-duration: 900ms; }
.stage.is-fading .stage-poster { opacity: 0; transition: opacity 700ms var(--e-stone); }
.curtain-skip { grid-row: 3; position: absolute; z-index: var(--z-skip); left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: var(--tap); min-width: 88px; align-items: center; justify-content: center; padding: 0 18px; background: none; border: 0; border-top: 1px solid var(--gold); border-radius: 0; font: 500 14px/1 var(--font-sans); letter-spacing: .04em; color: var(--ink); cursor: pointer; }
html[data-curtain="play"] .nav, html[data-curtain="play"] .threshold-copy { pointer-events: none; }
.threshold-copy { grid-row: 3; position: relative; z-index: var(--z-copy); display: grid; justify-items: center; text-align: center; gap: 10px; padding: clamp(22px, 3.4vh, 36px) var(--margin) clamp(26px, 4.2vh, 44px); background: var(--marble); box-shadow: 0 -1px 0 rgb(185 179 170 / .55); transition: opacity var(--d-reveal) var(--e-out), transform var(--d-reveal) var(--e-out); }
html[data-curtain="play"] .threshold-copy { transform: translateY(var(--rise)); }
.t-h1 { font: 500 clamp(28px, 1.6vw + 18px, 40px)/1.12 var(--font-sans); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.t-sub { font-size: var(--fs-lede); color: var(--ink-2); }
.t-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px; margin-top: 8px; }

/* ============================================================
   THE HALL: an elevation of arched niches (5 · 3 · 5), not a card grid
   ============================================================ */
.lintel { display: grid; justify-items: center; gap: 18px; text-align: center; margin-bottom: clamp(48px, 5vw, 80px); }
.lintel-word { font-size: var(--fs-carve-1); letter-spacing: .2em; margin-right: -.2em; }
/* 10 columns, each niche spans 2: rows of 5 · 3 (centred, the middle bay) · 5. Filtering falls back to plain flow. */
.hall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--pier); row-gap: clamp(44px, 4vw, 64px); }
.hall-item { grid-column: auto / span 2; min-width: 0; transition: opacity 200ms var(--e-out); }
.hall-item[data-n="6"] { grid-column: 3 / span 2; }
.hall-item[data-n="9"] { grid-column: 1 / span 2; }
.hall.is-filtered .hall-item { grid-column: auto / span 2; }
.hall-item.is-vacant { display: none; }
.hall-item[hidden] { display: none !important; }
.hall-link { display: block; text-decoration: none; color: var(--ink); border-radius: 16px; -webkit-tap-highlight-color: transparent; }
.hall-link:focus-visible { box-shadow: 0 0 0 6px var(--marble), 0 0 0 8px var(--ink), 0 0 0 9px var(--gold); }
.hall-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; margin-top: clamp(56px, 5vw, 80px); }

/* the niche */
.arch { position: relative; display: block; aspect-ratio: 250 / 420; isolation: isolate; --plinth-h: 11%; }
.arch-wall { position: absolute; inset: 0; z-index: -1; border-radius: var(--r-arch); overflow: hidden;
  background: radial-gradient(120% 82% at 58% 46%, var(--app) 0%, color-mix(in oklab, var(--app) 62%, var(--ivory)) 86%);
  box-shadow: inset 14px 18px 30px -14px rgb(40 34 26 / .34), inset 3px 4px 6px -2px rgb(40 34 26 / .16), inset -1px -1px 0 rgb(255 255 255 / .38), 0 0 0 1px rgb(185 179 170 / .30); transition: filter var(--d-hover) var(--e-out); }
.arch-wall::before { content: ""; position: absolute; inset: 0; background: var(--grain); mix-blend-mode: multiply; }
.arch-wall::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 46% at 68% 74%, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 70%), linear-gradient(to bottom, rgb(0 0 0 / 0) 70%, rgb(40 34 26 / .10)); }
/* with the plaster render: the swatch is laid into lime plaster (multiply), masked to the plaster */
.arch-wall.has-render { background: var(--plaster) center / 100% 100%; box-shadow: none; }
.arch-wall.has-render::before { background: radial-gradient(120% 90% at 50% 38%, var(--app), color-mix(in oklab, var(--app) 62%, var(--ivory)) 78%); mix-blend-mode: multiply; -webkit-mask: var(--plaster-m) center / 100% 100%; mask: var(--plaster-m) center / 100% 100%; }
.arch-wall.has-render::after { display: none; }
/* the string course: one vein line at plinth level, continuous across a row */
.arch::after { content: ""; position: absolute; left: calc(var(--pier) / -2); right: calc(var(--pier) / -2); bottom: -1px; height: 1px; background: var(--vein); opacity: .7; }

.arch-piece { position: absolute; left: 50%; bottom: var(--plinth-h); width: var(--tile-w, 46%); transform: translateX(-50%); display: flex; justify-content: center; align-items: flex-end; }
.plinth { position: absolute; left: 50%; bottom: 0; width: 76%; height: var(--plinth-h); transform: translateX(-50%); background: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / 0) 30%), linear-gradient(97deg, #FFFFFF 0%, #F6F4F0 46%, #E6E2DA 100%); box-shadow: var(--sh-contact), 8px 6px 14px -10px rgb(58 54 49 / .5); }
.plinth::before { content: ""; position: absolute; left: -3%; right: -3%; top: -4px; height: 5px; background: linear-gradient(180deg, #FFFFFF, #F1EEE8 70%, #E2DED6); box-shadow: 0 1px 0 rgb(58 54 49 / .16), 4px 5px 8px -5px rgb(58 54 49 / .4); }
.plinth.has-render { background: var(--plinth) center bottom / 100% 100% no-repeat; box-shadow: none; }
.plinth.has-render::before { display: none; }
.plinth-face { position: absolute; inset: 22% 6% 14%; display: grid; place-items: center; overflow: hidden; }

/* The app above its plinth: our icon, floating. A calm levitation (6.4 s, a few px, each niche out of phase); the contact
   shadow on the stone tightens and darkens as the icon comes down, softens as it rises. Transforms and opacity only.
   Hover, keyboard focus or a first tap (.is-flip) reveals the icon of the app it replaces. Reduced motion: still. */
.tile { position: relative; display: block; width: 100%; aspect-ratio: 1; margin-bottom: 15%; --float: 6px; }
.tile-float { position: absolute; inset: 0; display: block; animation: tile-float 6.4s ease-in-out var(--phase, 0s) infinite; will-change: transform; }
.tile-face { position: absolute; inset: 0; display: block; transition: opacity var(--d-state) var(--e-out), transform var(--d-state) var(--e-out); filter: drop-shadow(4px 7px 6px rgb(40 34 26 / .16)) drop-shadow(1px 1.5px 1.5px rgb(40 34 26 / .14)); }
.tile-face > img, .tile-face > svg { display: block; width: 100%; height: 100%; }
.tile-face .rent { border-radius: 22.4%; object-fit: cover; box-shadow: 0 0 0 1px rgb(28 25 21 / .06); background: #FFFFFF; }
.tile-face.is-rent { opacity: 0; transform: scale(.94); }
.is-flip .tile-face.is-ours { opacity: 0; transform: scale(1.04); }
.is-flip .tile-face.is-rent { opacity: 1; transform: none; }
/* the contact shadow on the plinth top (the sun is upper left, so it sits a touch to the right) */
.tile-shadow { position: absolute; left: 10%; right: 0; bottom: calc(-15% - 3px); height: 9%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgb(40 34 26 / .34), rgb(40 34 26 / .12) 55%, rgb(40 34 26 / 0) 76%); z-index: -1; animation: tile-shadow 6.4s ease-in-out var(--phase, 0s) infinite; will-change: transform, opacity; }
@keyframes tile-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--float))); } }
@keyframes tile-shadow { 0%, 100% { transform: scale(1, 1); opacity: 1; } 50% { transform: scale(.86, .8); opacity: .62; } }
.arch.is-product .tile { --float: 9px; }
@media (max-width: 899px) { .tile { --float: 4px; } }
@media (prefers-reduced-motion: reduce) { .tile-float, .tile-shadow { animation: none !important; } }
.hall-hint { font-size: 14px; color: var(--ink-3); }
.hall-hint .tp { display: none; }
@media (hover: none) { .hall-hint .hv { display: none; } .hall-hint .tp { display: inline; } }

/* niche V: the veil */
.veil { display: block; width: 86%; margin: 0 auto; aspect-ratio: 120 / 172; position: relative;
  clip-path: polygon(9% 33%, 11% 23%, 16% 14%, 23% 7.5%, 32% 3%, 41% .6%, 50% 0, 59% .6%, 68% 3%, 77% 7.5%, 84% 14%, 89% 23%, 91% 33%, 93% 62%, 97% 86%, 100% 100%, 0 100%, 3% 86%, 7% 62%);
  background: radial-gradient(55% 34% at 36% 16%, rgb(255 255 255 / .95), rgb(255 255 255 / 0) 72%), linear-gradient(180deg, rgb(255 255 255 / 0) 60%, rgb(58 54 49 / .10)),
    conic-gradient(from 0deg at 50% 3%, #E3E5E7 152deg, #FFFFFF 157deg, #DADDE0 163deg, #F7F6F3 168deg, #CFD3D8 173.5deg, #FFFFFF 179deg, #DADCDF 185deg, #F6F5F2 190deg, #D3D6DA 195.5deg, #FBFAF8 201deg, #DEE0E2 207deg), #F2F1EE; }
.veil::before { content: ""; position: absolute; inset: 0; background: var(--veins) 30% 20% / 900px auto; mix-blend-mode: multiply; opacity: .8; }
.veil-hem { position: absolute; left: 0; right: 0; bottom: 0; height: 3.2%; background: linear-gradient(180deg, #D4B061, #B8913A 50%, #8E6E28); box-shadow: 0 -1px 0 rgb(255 255 255 / .8); }
.arch.is-veil .arch-piece { filter: drop-shadow(6px 9px 9px rgb(40 34 26 / .26)); }
.veil-img { width: 92%; margin: 0 auto; height: auto; }
.arch.has-veil-render .plinth { display: none; }
.arch.has-veil-render .arch-piece { bottom: 0; width: 86%; filter: none; }
.arch.has-veil-render .veil-img { width: 100%; }
.arch.is-veil .arch-piece { width: 44%; }
/* an empty niche: plain ivory plaster, an empty plinth */
.arch.is-vacant { --app: #E9E3D7; }

/* captions under the plinth */
.cap { display: grid; justify-items: center; gap: 7px; padding-top: 20px; text-align: center; }
.cap-name { font-family: var(--font-carve); font-size: var(--fs-carve-3); letter-spacing: .08em; text-transform: uppercase; line-height: 1.12; text-wrap: balance; }
.cap-alt { display: block; font-size: 14px; line-height: 1.35; color: var(--ink-3); text-wrap: balance; }
.cap-line { font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 26ch; text-wrap: pretty; }
.cap-meta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 14px; color: var(--ink-3); }
.cap-price { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (hover: hover) and (pointer: fine) { .hall-link:hover .arch-wall { filter: brightness(1.04); } }

@media (max-width: 1099px) and (min-width: 900px) { .cap-name { font-size: 17px; } .cap-alt { font-size: 13px; } }
@media (max-width: 899px) {
  :root { --pier: 12px; }
  .hall { row-gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hall-item, .hall-item[data-n], .hall.is-filtered .hall-item { grid-column: auto / span 1; }
  .hall-item.is-veiled { grid-column: 1 / -1; }
  .hall-item.is-vacant { display: block; }
  .hall.is-filtered .hall-item.is-veiled, .hall.is-filtered .hall-item.is-vacant { display: none; }
  .arch { aspect-ratio: 166 / 272; }
  .arch.is-veil { aspect-ratio: auto; height: 160px; }
  .arch.is-veil .arch-wall { border-radius: 50% 50% 0 0 / 40% 40% 0 0; }
  .arch.is-veil .arch-piece { width: 24%; max-width: 92px; }
  .arch.is-veil .plinth { width: 40%; height: 20%; }
  .arch.is-veil { --plinth-h: 20%; }
  .cap { padding-top: 14px; gap: 6px; }
  .cap-alt { font-size: 13px; color: var(--ink-2); }
}

/* ============================================================
   THE LINE CARVED IN STONE
   ============================================================ */
.slab { position: relative; background: var(--tex-slab) center / cover, var(--marble-css); background-color: #F6F4EF; border-block: 1px solid rgb(185 179 170 / .45); box-shadow: inset 0 1px 0 #FFFFFF; }
.scene-line { min-height: 560px; display: grid; place-items: center; padding: 96px var(--margin); box-sizing: border-box; text-align: center; }
.line-inner { display: grid; justify-items: center; gap: 18px; }
.latin { font-family: var(--font-carve); font-weight: 400; font-size: var(--fs-carve-2); letter-spacing: .14em; margin-right: -.14em; line-height: 1.15; color: var(--ink); filter: url("#vcut"); text-wrap: balance; }
.gloss { font: 500 var(--fs-lede)/1.4 var(--font-sans); color: var(--ink-2); }
.line-inner .seam { width: 64px; margin: 14px 0; }
.line-price { font: 600 clamp(22px, .6vw + 19px, 28px)/1.2 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
@media (max-width: 767px) { .scene-line { min-height: 420px; } .latin { font-size: 30px; } }

/* ============================================================
   THE FINALE: the private door, the footer, the mosaic band and LABCLONE in gold leaf
   ============================================================ */
.finale { margin-top: auto; padding-top: clamp(64px, 7vw, 112px); background: var(--marble); }
.door { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding-bottom: 28px; border-bottom: 1px solid var(--hair); }
.door-lintel { font-family: var(--font-carve); font-size: 15px; letter-spacing: .2em; color: var(--gold-text); }
.door-line { font-size: 17px; color: var(--ink-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 28px; padding-top: 18px; }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 11px; margin-inline: -11px; font-size: 14px; text-decoration: none; border-radius: 6px; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 6px 0 40px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.foot-legal span + span::before { content: "·"; margin-right: 16px; color: var(--vein); }
.mosaic { height: 48px; background: var(--tex-mosaic) 0 0 / auto 48px repeat-x, var(--meander) 0 0 / 30px 48px repeat-x, var(--ivory); border-top: 1px solid rgb(185 179 170 / .5); box-shadow: inset 0 1px 0 #FFFFFF; }
.mega-slab { overflow: hidden; background: var(--tex-slab) center / cover, var(--marble-css); background-color: #F6F4EF; border-top: 1px solid rgb(185 179 170 / .5); }
.mega-slab.has-render { background: var(--marble); border-top: 0; }
.mega-render { position: relative; }
.mega-render picture, .mega-render img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* On phones the tall render is cropped to its bottom (the word and its reflection), so the word sits close under the footer band, as on desktop. */
@media (max-aspect-ratio: 3/4) { .mega-render.is-9x16 img { aspect-ratio: 16 / 9; object-position: 50% 100%; } }
@media (max-width: 767px) { .mega-render.is-4x5 img { aspect-ratio: 16 / 9; object-position: 50% 100%; } }
@media (min-width: 768px) and (max-width: 1099px) { .mega-render img { aspect-ratio: 2 / 1; object-position: 50% 100%; } }
.mega { display: block; width: max-content; margin: clamp(24px, 3vw, 48px) auto -.2em; background-size: 100% 100%, auto, 512px; }
.mega.gilt { filter: url("#vcut-xl"); }
.raking::after { background-size: 300% 100%; background-position: var(--rx, 140%) 0; }
.raking.is-lit::after { background-position: -40% 0; }
.raking.is-follow::after { transition: none; background-position: var(--rx) 0; }
@media (max-width: 767px) {
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; }
  .foot-legal { display: grid; }
  .foot-legal span + span::before { content: none; }
  .door { gap: 4px 12px; }
}

/* ============================================================
   THE HALL PAGE (catalog) and THE ORACLE (product page)
   ============================================================ */
.hall-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; margin-bottom: clamp(48px, 5vw, 72px); }
.search { flex: 0 1 340px; }
.search .field { min-height: 48px; border-radius: var(--r-pill); padding-inline: 20px; -webkit-appearance: none; appearance: none; }
.pills { display: flex; gap: 8px; }
.pill { min-height: var(--tap); padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--vein); background: transparent; font: 500 15px/1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: background-color var(--d-hover) var(--e-out), border-color var(--d-hover) var(--e-out), color var(--d-hover) var(--e-out); }
.pill:hover { border-color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.hall.is-filtered .is-veiled, .hall.is-filtered .is-vacant { display: none; }
.hall-item.is-out { opacity: 0; }
.hall-empty { display: grid; justify-items: center; gap: 18px; text-align: center; padding-bottom: 24px; }
.hall-empty[hidden] { display: none; }
.is-empty-arch { width: 150px; }
.is-empty-arch::after { display: none; }
.hall-empty-t { font-family: var(--font-carve); font-size: var(--fs-carve-3); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 899px) {
  .hall-tools { display: grid; justify-content: stretch; gap: 14px; }
  .search { flex: none; }
  .pills { overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--margin) * -1); padding: 2px var(--margin) 6px; scrollbar-width: none; }
  .pills::-webkit-scrollbar { display: none; }
  .pill { scroll-snap-align: start; }
  .cap-line { font-size: 14px; }
}

.oracle-view { display: none; padding-top: calc(var(--nav-h) + 20px); }
html.is-oracle .hall-view { display: none; }
html.is-oracle .oracle-view { display: block; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: 14px; text-decoration: none; margin-bottom: 12px; border-radius: 6px; }
.back:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.oracle { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 4vw, 64px); align-items: start; }
.oracle-niche { position: sticky; top: calc(var(--nav-h) + 24px); }
.arch.is-product { aspect-ratio: 900 / 980; --plinth-h: 21%; }
.arch.is-product .arch-wall { background: radial-gradient(110% 80% at 56% 44%, var(--app) 0%, color-mix(in oklab, var(--app) 80%, var(--ivory)) 90%); transition: background var(--d-state) var(--e-out), filter var(--d-hover) var(--e-out); }
.arch.is-product { --tile-w: 34%; }
.arch.is-product .plinth { width: 82%; }
.arch.is-product::after { display: none; }
.plinth-face { container-type: inline-size; }
.carved { font-family: var(--font-carve); font-weight: 400; text-transform: uppercase; letter-spacing: .14em; margin-right: -.14em; line-height: 1; color: var(--ink); filter: url("#vcut"); white-space: nowrap; font-size: clamp(20px, 9cqi, 56px); }
.carved.is-empty { color: var(--ink-3); }
.carved .ch { display: inline-block; }
.carved .ch.is-new { animation: carve var(--d-carve) var(--e-out) both; }
@keyframes carve { from { clip-path: inset(0 100% 100% 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.carved .ch.is-gone { animation: uncarve 120ms var(--e-in) both; }
@keyframes uncarve { to { opacity: 0; } }
.shot.is-loading { opacity: .55; transition: opacity var(--d-state) var(--e-out); }

.counter { background: var(--ivory); border-radius: var(--r-card); padding: clamp(24px, 3vw, 40px); box-shadow: var(--sh-card), inset 0 1px 0 #FFFFFF; display: grid; gap: 18px; }
.counter .plate { color: var(--ink-2); }
.c-name { font-size: var(--fs-carve-2); letter-spacing: .12em; line-height: 1.02; overflow-wrap: anywhere; }
.c-line { font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-2); }
.c-alt { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.c-alt .logo { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px rgb(28 25 21 / .08); }
.c-facts { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--ink-3); margin: 0; padding: 0; list-style: none; }
.c-facts li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--vein); }
.counter .seam { margin: 6px 0; width: 72px; }
.c-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.c-price .price { font-size: var(--fs-price); }
.c-price span:last-child { color: var(--ink-2); }
.f { border: 0; padding: 0; margin: 0; min-width: 0; }
.f legend { padding: 0; }
.c-body { display: grid; gap: 22px; }
.help { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.addr { margin-top: 6px; font: 500 15px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ink); }
.addr.is-empty { color: var(--ink-3); }
.addr.is-invalid { color: var(--minium); }
.chip-name { font-weight: 500; color: var(--ink-3); margin-left: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip-dot { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(90% 90% at 40% 35%, var(--app), color-mix(in oklab, var(--app) 70%, var(--ivory))); box-shadow: inset 2px 3px 5px -2px rgb(40 34 26 / .35), 0 0 0 1px rgb(28 25 21 / .08); transition: box-shadow var(--d-hover) var(--e-out); }
.chip input:checked + .chip-dot { box-shadow: inset 2px 3px 5px -2px rgb(40 34 26 / .35), 0 0 0 2px var(--ivory), 0 0 0 3.5px var(--ink); }
.chip input:focus-visible + .chip-dot { box-shadow: 0 0 0 2px var(--ivory), 0 0 0 4px var(--ink), 0 0 0 5px var(--gold); }
.buy { display: grid; gap: 10px; }
.buy-btn { width: 100%; min-height: 56px; }
.buy-btn.is-busy { position: relative; }
.buy-btn.is-busy::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 9px; height: 1px; background: var(--gold); transform-origin: left; animation: seam-grow 1.2s var(--e-light) infinite; }
@keyframes seam-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.proto-tag { justify-self: start; font: 600 12px/1.3 var(--font-sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); border: 1px dashed rgb(125 94 30 / .55); border-radius: 6px; padding: 5px 8px; }
.buy-note { font-size: 14px; line-height: 1.5; color: var(--ink-2); background: var(--marble); border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--hair); }
.buy-note.is-error { color: var(--minium); }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.keybox { display: grid; gap: 10px; }
.keybox[hidden] { display: none; }
.key-row { display: flex; gap: 10px; }
.key-row .field { font-family: var(--font-till); letter-spacing: .06em; text-transform: uppercase; }
.key-row .btn { flex: none; padding: 0 20px; }
.today { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--hair); }
.today.is-main { padding-top: 0; border-top: 0; }
.kit .today.is-main .btn { justify-self: start; }
@media (max-width: 899px) { .kit .today.is-main .btn { justify-self: stretch; } }
.today[hidden] { display: none; }
.today-t { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.today .btn { justify-self: start; }
.alts { display: flex; flex-wrap: wrap; gap: 0 18px; }
.howto { font-size: 15px; }
.howto summary { min-height: var(--tap); display: inline-flex; align-items: center; cursor: pointer; font-weight: 500; text-decoration: underline; text-decoration-color: var(--vein); text-underline-offset: 4px; border-radius: 6px; }
.howto ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); line-height: 1.5; }
.mylink { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--marble); box-shadow: inset 0 0 0 1px var(--hair); }
.mylink[hidden] { display: none; }
.mylink-url { font: 500 15px/1.4 var(--font-sans); overflow-wrap: anywhere; }
.mylink-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mylink-actions .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.seal { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.seal svg, .seal img { width: 44px; height: 38px; flex: none; object-fit: contain; }
.c-small { font-size: 14px; color: var(--ink-3); }
.owned-t { display: flex; align-items: center; gap: 10px; font: 600 20px/1.3 var(--font-sans); color: var(--ok); }
.owned-t svg { width: 22px; height: 22px; }
.licence { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); padding: 12px 14px; border-radius: 12px; background: var(--marble); box-shadow: inset 0 0 0 1px var(--hair); }
.licence code { font: 400 14px/1 var(--font-till); letter-spacing: .04em; color: var(--ink); }
.preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* the receipt (apocha): thermal paper from a bronze slot */
.till-wrap { display: grid; justify-items: center; margin-top: 8px; }
.slot { width: 100%; max-width: 360px; height: 22px; border-radius: 6px; background: var(--slot) center / 100% 100% no-repeat, linear-gradient(180deg, #8A6A3E 0%, #5B4223 45%, #3C2B16 55%, #6E5330 100%); box-shadow: inset 0 1px 0 rgb(255 225 170 / .35), 0 2px 4px rgb(40 30 18 / .3); position: relative; z-index: 2; }
.slot::after { content: ""; position: absolute; left: 7%; right: 7%; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 2px; background: #1B130A; }
.paper { position: relative; width: calc(100% - 32px); max-width: 360px; margin-top: -11px; padding: 26px 20px 30px; box-sizing: border-box; background: linear-gradient(180deg, rgb(58 54 49 / .10), rgb(58 54 49 / 0) 18px), #FCFBF8; color: #2B2925; box-shadow: 4px 10px 22px -12px rgb(58 54 49 / .45); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x; transform-origin: top; }
.paper p { display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 400 var(--fs-till)/1.55 var(--font-till); font-variant-numeric: tabular-nums; }
.paper p.c { justify-content: center; text-align: center; }
.paper p.b { font-weight: 700; }
.paper p.dim { color: #4F473E; font-size: 13px; line-height: 1.45; display: block; }
.paper p.rule { height: 0; border-top: 1px dashed #B9B3AA; margin: 10px 0; }
.paper p span:first-child { flex: none; }
.paper p span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.paper p.r { justify-content: flex-end; text-align: right; overflow-wrap: anywhere; font-size: 13px; }
.stamp { display: block; width: max-content; margin: 18px auto 0; font: 700 14px/1.2 var(--font-till); letter-spacing: .06em; color: var(--minium); border: 2px solid currentColor; border-radius: 4px; padding: 6px 10px; transform: rotate(-5deg); opacity: .92; text-align: center; }
.paper.is-printing { animation: print-strip calc(var(--n, 14) * var(--d-line) + 200ms) steps(14, end) both; }
@keyframes print-strip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.paper.is-printing .stamp { animation: stamp var(--d-stamp) var(--e-out) both; animation-delay: calc(var(--n, 14) * var(--d-line) + 260ms); }
@keyframes stamp { from { transform: rotate(-5deg) scale(1.06); opacity: 0; } to { transform: rotate(-5deg) scale(1); opacity: .92; } }
.till-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 22px; margin-top: 10px; }
.till-actions .link-btn { display: inline-flex; align-items: center; }

/* below the counter */
.o-more { display: grid; gap: clamp(64px, 7vw, 112px); padding-top: clamp(80px, 8vw, 128px); }
.o-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 4vw, 64px); align-items: start; }
.o-sec h2 { font-size: clamp(24px, 1.2vw + 18px, 34px); letter-spacing: .08em; }
.o-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.o-list li { padding: 16px 0; border-bottom: 1px solid var(--hair); line-height: 1.5; display: grid; gap: 2px; }
.o-list li b { font-weight: 600; }
.o-list li span { color: var(--ink-3); font-size: 15px; }
.frames { display: grid; grid-template-columns: 2.2fr 1fr; gap: 16px; align-items: end; margin-top: 32px; }
.frame { margin: 0; }
.frame img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid rgb(28 25 21 / .09); box-shadow: 6px 14px 32px -18px rgb(58 54 49 / .32), 1px 2px 5px -2px rgb(58 54 49 / .12); background: #FFFFFF; }
.frame.is-phone img { border-radius: 18px; }
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; cursor: pointer; font-weight: 600; list-style: none; border-radius: 6px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 22px; color: var(--ink-3); transition: transform var(--d-hover) var(--e-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--ink-2); line-height: 1.6; max-width: 60ch; }
.o-src { margin-top: 14px; }
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 10px var(--margin) calc(10px + env(safe-area-inset-bottom)); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 -1px 0 var(--hair); transform: translateY(110%); transition: transform var(--d-state) var(--e-out); display: none; }
.sticky-buy.is-on { transform: none; }
.sticky-buy .btn { width: 100%; }

.counter.is-skeleton { min-height: 520px; align-content: start; }
.sk-line { display: block; height: 14px; border-radius: 7px; background: var(--pentelic); }
.sk-line.tall { height: 44px; }
.w40 { width: 40%; } .w60 { width: 60%; } .w70 { width: 70%; } .w90 { width: 90%; }
.sk-seam { display: block; width: 72px; height: 1px; background: var(--gold); }
.arch.is-skeleton .arch-wall { background: var(--pentelic); box-shadow: none; }
.arch.is-skeleton .sk-seam { position: absolute; left: 50%; top: 18%; bottom: 18%; width: 1px; height: auto; transform: translateX(-50%); }
.oracle-error { display: grid; justify-items: center; gap: 18px; padding: 64px 0; text-align: center; }
.oracle-error[hidden] { display: none; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: var(--z-toast); max-width: min(520px, calc(100vw - 32px)); box-sizing: border-box; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 14px 18px; border-radius: 14px; background: var(--ink); color: var(--on-ink); font-size: 15px; line-height: 1.45; box-shadow: var(--sh-card); transition: opacity var(--d-state) var(--e-out), transform var(--d-state) var(--e-out); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 899px) {
  .oracle { grid-template-columns: minmax(0, 1fr); }
  .oracle-niche { position: static; }
  .arch.is-product { aspect-ratio: 343 / 420; --plinth-h: 20%; }
  .arch.is-product { --tile-w: 38%; }
  .o-sec { grid-template-columns: minmax(0, 1fr); }
  .frames { grid-template-columns: 1fr; }
  .frames .frame.is-phone { max-width: 220px; }
  .sticky-buy { display: block; }
  .key-row { flex-wrap: wrap; }
  .key-row .btn { width: 100%; }
  .proto-tag { letter-spacing: .1em; }
}

/* ============================================================
   KITS: three tables of offerings (mensae)
   ============================================================ */
.page-head.center { justify-items: center; text-align: center; }
.kits { display: grid; gap: clamp(64px, 7vw, 112px); }
.kit-seam { margin: 0 auto; }
.kit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; }
.kit.is-flip .mensa { order: 2; }
.mensa { position: relative; aspect-ratio: 16 / 9; isolation: isolate; }
.mensa-img { position: absolute; inset: 0; z-index: -2; }
.mensa-img img { width: 100%; height: 100%; object-fit: cover; }
.mensa.has-render .mensa-wall, .mensa.has-render .mensa-table { display: none; }
.mensa-wall { position: absolute; inset: 0; z-index: -2; background: var(--marble-css); box-shadow: inset 0 0 0 1px rgb(185 179 170 / .35); }
.mensa-wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #ECE7DD, #E4DED2); box-shadow: inset 0 1px 0 rgb(185 179 170 / .6); }
.mensa-pieces { position: absolute; left: 12%; right: 12%; bottom: 34%; display: flex; align-items: flex-end; justify-content: center; gap: 4.5%; }
.mensa-pieces .tile { width: 15%; flex: none; margin-bottom: 0; }
.mensa-table { position: absolute; left: 8%; right: 8%; bottom: 10%; height: 24%; z-index: -1; }
.mensa-top { position: absolute; left: 0; right: 0; top: 0; height: 15%; background: linear-gradient(180deg, #FFFFFF, #F1EEE8 60%, #DCD7CE); box-shadow: 0 1px 0 rgb(58 54 49 / .16), 6px 10px 16px -10px rgb(58 54 49 / .5); }
.mensa-cloth { position: absolute; left: 40%; right: 40%; top: -2px; height: 86%; background: linear-gradient(180deg, rgb(255 255 255 / .45) 0 2px, rgb(40 34 26 / .16) 2px 4px, rgb(40 34 26 / 0) 12px), linear-gradient(90deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 30%, rgb(40 34 26 / .06) 62%, rgb(255 255 255 / .1) 80%, rgb(40 34 26 / .08)), linear-gradient(180deg, color-mix(in oklab, var(--app) 52%, var(--ivory)), color-mix(in oklab, var(--app) 44%, var(--ivory))); border-radius: 0 0 2px 2px; box-shadow: 5px 8px 12px -9px rgb(40 34 26 / .4); }
.mensa-cloth::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 7px; background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--app) 55%, var(--ivory)) 0 1px, transparent 1px 4px); }
.mensa-cloth::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .10) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgb(40 34 26 / .05) 0 1px, transparent 1px 3px), var(--grain); mix-blend-mode: multiply; }
.mensa-leg { position: absolute; top: 15%; bottom: 0; width: 8%; background: linear-gradient(90deg, #FBFAF7 0 76%, #E2DDD3 76% 100%); box-shadow: inset 0 1px 0 rgb(58 54 49 / .12), 8px 6px 12px -8px rgb(58 54 49 / .45); }
.mensa-leg::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 9%; background: linear-gradient(90deg, #F6F4EF 0 78%, #DCD6CB 78%); box-shadow: 0 -1px 0 rgb(58 54 49 / .1); }
.mensa-leg:nth-of-type(3) { left: 9%; }
.mensa-leg:nth-of-type(4) { right: 9%; }
.kit-copy { display: grid; gap: 16px; align-content: start; }
.kit-title { font-size: clamp(28px, 1.4vw + 22px, 44px); letter-spacing: .1em; }
.kit-line { font: 600 18px/1.4 var(--font-sans); }
.kit-apps { list-style: none; margin: 4px 0; padding: 0; border-top: 1px solid var(--hair); }
.kit-apps a { display: grid; grid-template-columns: 36px auto 1fr; align-items: baseline; gap: 4px 12px; padding: 12px 0; min-height: var(--tap); box-sizing: border-box; border-bottom: 1px solid var(--hair); text-decoration: none; }
.kit-apps a:hover .ka-name { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.ka-name { font-family: var(--font-carve); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.ka-use { font-size: 14px; color: var(--ink-3); text-align: right; }
.kit .buy-btn { width: auto; justify-self: start; }
@media (max-width: 899px) {
  .kit { grid-template-columns: minmax(0, 1fr); }
  .kit.is-flip .mensa { order: 0; }
  .mensa { aspect-ratio: 343 / 240; }
  .mensa-pieces { left: 6%; right: 6%; }
  .kit .buy-btn { width: 100%; }
  .kit-apps a { grid-template-columns: 30px 1fr; }
  .ka-use { grid-column: 2; text-align: left; }
}

/* ============================================================
   PRIVATE BUILDS: the workshop
   ============================================================ */
.by-appt { font: 600 clamp(22px, .6vw + 19px, 28px)/1.2 var(--font-sans); }
.workshop { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.workshop-img img { width: 100%; height: 100%; object-fit: cover; }
.workshop-css { position: absolute; inset: 0; background: var(--marble-css); box-shadow: inset 0 0 0 1px rgb(185 179 170 / .35); display: grid; place-items: end center; }
.workshop:has(.workshop-css) { aspect-ratio: 21 / 9; }
.workshop-css .arch { width: min(20%, 250px); margin-bottom: 6%; }
.workshop-css .arch { --tile-w: 46%; }
.workshop-css .arch::after { left: -60%; right: -60%; }
.trace { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 7%; border-radius: 22.4%; border: 1px dashed rgb(125 94 30 / .62); box-sizing: border-box; }
@media (max-width: 767px) { .workshop:has(.workshop-css) { aspect-ratio: 4 / 5; } .workshop-css .arch { width: 46%; margin-bottom: 12%; } }
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 5vw, 80px); max-width: 900px; padding-block: clamp(48px, 5vw, 72px); }
.offer { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--hair); }
.offer p:last-child { font-size: 17px; color: var(--ink-2); line-height: 1.5; }
.card { background: var(--ivory); border-radius: var(--r-card); box-shadow: var(--sh-card), inset 0 1px 0 #FFFFFF; }
.req { max-width: 680px; margin: 0 auto; padding: clamp(24px, 3vw, 40px); box-sizing: border-box; display: grid; gap: 22px; }
.req textarea.field { min-height: 104px; resize: vertical; }
.req-msg { padding: 14px 16px; border-radius: 14px; background: var(--marble); box-shadow: inset 0 0 0 1px var(--hair); }
.req-msg .label { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.req-text { white-space: pre-wrap; font-size: 15px; line-height: 1.5; color: var(--ink-2); user-select: all; }
.req-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.req-note.is-ok { color: var(--ok); }
.req-note.is-error { color: var(--minium); }
@media (max-width: 767px) {
  .workshop { aspect-ratio: 4 / 5; }
  .offers { grid-template-columns: 1fr; }
  .req-actions .btn { width: 100%; }
}

/* ============================================================
   THE SMALL PRINT and 404
   ============================================================ */
.page-legal .page-head { justify-items: start; text-align: left; max-width: calc(680px + 2 * var(--margin)); }
.page-legal .page-head .lede { margin-inline: 0; }
.prose h2 { font: 600 19px/1.35 var(--font-sans); letter-spacing: -.005em; margin: 14px 0 -6px; color: var(--ink); }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.text-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--vein); text-underline-offset: 3px; }
.text-link:hover { text-decoration-color: var(--gold); }
.lede .text-link { color: inherit; }
.tablet { max-width: 680px; margin: 0 auto; box-sizing: border-box; padding: clamp(28px, 3vw, 44px); background: var(--ivory); border-top: 1px solid var(--gold); box-shadow: inset 0 1px 0 #FFFFFF; display: grid; gap: 18px; font-size: 17px; line-height: 1.6; }
.page-legal .page-head { margin-inline: auto; width: 100%; }
.closed { position: relative; min-height: max(560px, 92svh); display: grid; place-items: center; isolation: isolate; overflow: clip; }
.closed .stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(46% 36% at 50% 50%, rgb(251 250 247 / .93), rgb(251 250 247 / .7) 55%, rgb(251 250 247 / 0) 100%); }
.closed-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px; text-align: center; padding: calc(var(--nav-h) + 40px) var(--margin) 64px; }
.latin.is-404 { font-size: var(--fs-carve-2); }
.tassel { width: 28px; height: 56px; margin-top: 10px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-rv] { transform: none; transition-property: opacity; }
  .slice, .shade, .seam-light, .drape-cloth::before { animation: none !important; }
  .paper.is-printing, .paper.is-printing .stamp, .carved .ch.is-new, .carved .ch.is-gone { animation: none !important; }
  .tile-face { transition: none !important; }
  .buy-btn.is-busy::after { animation: none; transform: none; }
}
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--d-page); }