/* ==========================================================================
   Lior Yahav - artist site
   White, airy, plan-view: the page is the canvas, the visitor is the sun.
   ========================================================================== */

:root {
  --paper: #F6F6F4;          /* cool gallery white, matched to the painted grounds */
  --white: #FFFFFF;
  --mat: #ECECE9;
  --ink: #141414;
  --ink-2: #3C3C3A;
  --muted: #66665F;
  --line: rgba(20, 20, 20, .1);
  --line-strong: rgba(20, 20, 20, .24);
  --shadow: #B9B9B4;         /* the grey of his painted shadows */
  --accent: #A9D6DF;         /* the sky of The Dog Park Line: fills */
  --accent-deep: #2F7482;    /* same hue, deep enough for text on white (~5:1) */
  --error: #A8432F;          /* warm brick: the one hue the cool palette never uses, so a problem reads as one (~6:1 on paper) */
  --sky: #A9D6DF;            /* The Dog Park Line */

  --sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --px: max(var(--gutter), calc((100vw - var(--sbw, 0px) - 1600px) / 2 + var(--gutter)));
  --nav-h: 76px;
  --nav-h-c: 58px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; font-weight: 400; overflow-x: hidden; }
body.is-loading { overflow: hidden; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video, canvas, svg { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--accent-deep); outline-offset: 3px; }
[hidden] { display: none !important; }
/* keyboard focus never lands under the sticky nav and filter bar */
html { scroll-padding-top: calc(var(--nav-h) + 90px); }
/* keyboard users can jump straight past the nav */
.skip-link { position: fixed; left: 16px; top: -64px; z-index: 210; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 99px; font-size: 13px; transition: top .2s var(--ease-out-quart); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { padding-left: var(--px); padding-right: var(--px); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.display { font-weight: 200; letter-spacing: -.045em; line-height: .92; }

/* ---------- Links & buttons ------------------------------------------------ */
.ulink { position: relative; display: inline-block; background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px; transition: background-size .5s var(--ease); padding-bottom: 1px; }
.ulink:hover { background-size: 100% 1px; background-position: left bottom; }
/* labels stay put: no rolling text (the light is the site's only signature motion) */
.rc, .btn-roll { display: inline-block; line-height: 1.25; vertical-align: bottom; }

.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 26px; border-radius: 99px;
  background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: background-color .2s linear, box-shadow .2s linear, color .2s linear, transform .4s var(--ease);
}
/* hover: a soft shadow sweeps across the button, like a cloud passing the sun */
@media (hover: hover) { .btn:hover { background: #4A4A47; } } /* no sticky grey after a tap on touch */
.btn:active { transform: scale(.97); }
.btn .arr { display: inline-block; transition: transform .5s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 13px; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (hover: hover) { .btn-ghost:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); } }

/* ---------- Loader ---------------------------------------------------------- */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--paper); display: grid; place-items: center; align-content: center; gap: 26px; transition: opacity .9s var(--ease), visibility .9s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.dial { position: relative; width: 120px; height: 120px; }
.dial-dot { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--ink); }
.dial-shadow { position: absolute; left: 50%; top: 50%; width: 46px; height: 7px; margin-top: -3.5px; border-radius: 99px; background: linear-gradient(90deg, var(--shadow), rgba(185, 185, 180, 0)); transform-origin: 0 50%; transform: rotate(var(--rot, 0deg)); filter: blur(.6px); }
.loader-name { font-size: 13px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.loader-count { color: var(--muted); font-variant-numeric: tabular-nums; }

.curtain { position: fixed; inset: 0; z-index: 150; pointer-events: none; background: var(--paper); display: grid; place-items: center; opacity: 0; }
.curtain-label { display: none; } /* a quiet crossfade between pages, no title card */

/* ---------- Nav ------------------------------------------------------------ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--px);
  transition: background-color .5s var(--ease), height .6s var(--ease), backdrop-filter .5s;
}
.nav::after { content: ''; position: absolute; left: var(--px); right: var(--px); bottom: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.nav.is-compact { height: var(--nav-h-c); background: rgba(246, 246, 244, .86); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.nav.is-compact::after { transform: scaleX(1); }
.brand { justify-self: start; font-size: 13px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.nav-links { display: flex; gap: 36px; font-size: 14px; }
.nav-links a { position: relative; }
/* current page: a hairline beneath the link, like a figure's shadow */
.nav-links a::before { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.nav-links a.is-active::before, .nav-links a:hover::before { transform: scaleX(1); } /* hover: the same hairline as the current page */
.nav-cta { justify-self: end; }
.burger { display: none; justify-self: end; width: 40px; height: 40px; position: relative; }
.burger i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.burger i:first-child { top: 16px; } .burger i:last-child { top: 23px; }
.menu-open .burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 90; background: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: 0 var(--px); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .5s var(--ease), visibility .5s; }
.mobile-menu a { font-size: 13vw; font-weight: 200; letter-spacing: -.04em; line-height: 1.1; }
.mobile-menu-cta { align-self: flex-start; margin-top: 6vh; }
.mobile-menu a.is-active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .5s var(--ease), visibility 0s; }

/* ---------- Reveal primitives -------------------------------------------- */
/* reveals: a soft fade in place, no travel */
.rv { opacity: 0; transition: opacity .3s var(--ease-out-quart); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; }
.rv-line { display: block; overflow: hidden; padding: .1em .14em .14em; margin: -.1em -.14em -.14em; }
.rv-line > span { display: inline-block; opacity: 0; transition: opacity .3s var(--ease-out-quart); transition-delay: var(--d, 0s); }
.in .rv-line > span, .rv-line.in > span { opacity: 1; }

img.fade { opacity: 0; transition: opacity 1s var(--ease); }
img.fade.loaded { opacity: 1; }

/* ---------- Cropped artwork (frame on a mat, the wall of the mockup removed) */
.piece { position: relative; display: flex; }
.panel { position: relative; height: 100%; isolation: isolate; }
.canvas { position: absolute; inset: 0; overflow: hidden; }
.canvas img { position: absolute; max-width: none; }

/* White float frame, drawn to scale around every canvas (--cm = px per cm, set by JS):
   2 cm moulding with mitred bevels, a 1 cm shadow gap, and a drop shadow (--drop) aimed by the pointer.
   The moulding is thickest at its outer edge and slopes down towards the canvas, so each face turns its back on a light
   beyond its own outer edge: the face nearest the light is the darkest, the far face (on the drop shadow's side) the
   brightest. --f-t/r/b/l (0 = in shade, 1 = lit) and the gap shadow's direction (--gx, --gy) follow the light, set by
   sheen() in JS; without a light (drawer), it comes from the upper left. Each frame colour mixes --fr-dim and --fr-lit. */
.panel::before {
  --fr-dim: #E8E5DF; --fr-lit: #F9F8F6;
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--cm, 4px) * -3);
  border: calc(var(--cm, 4px) * 2) solid;
  border-top-color: color-mix(in srgb, var(--fr-lit) calc(var(--f-t, .07) * 100%), var(--fr-dim));
  border-right-color: color-mix(in srgb, var(--fr-lit) calc(var(--f-r, .75) * 100%), var(--fr-dim));
  border-bottom-color: color-mix(in srgb, var(--fr-lit) calc(var(--f-b, .93) * 100%), var(--fr-dim));
  border-left-color: color-mix(in srgb, var(--fr-lit) calc(var(--f-l, .25) * 100%), var(--fr-dim));
  background: #E4E1DA;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .05),
    /* the moulding's shadow on the float gap: cast from the rail nearest the light, towards the far side */
    inset calc(var(--cm, 4px) * .55 * var(--gx, .5)) calc(var(--cm, 4px) * .55 * var(--gy, .87)) calc(var(--cm, 4px) * 1.1) rgba(0, 0, 0, .26),
    0 0 0 1px rgba(0, 0, 0, .06),
    var(--drop, 0 18px 28px -14px rgba(0, 0, 0, .38)),
    0 2px 3px rgba(0, 0, 0, .07);
}
/* Sheen over the moulding only (masked to the 2 cm border ring): a touch darker on the side facing the light, brighter
   on the far side, in step with the faces above, so the profile reads as rounded rather than flat. --lang (the direction
   away from the light) is set with the drop shadow; without a light (drawer), it comes from the upper left. */
.panel::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--cm, 4px) * -3); padding: calc(var(--cm, 4px) * 2);
  background: linear-gradient(var(--lang, 150deg), rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .42) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: calc(.15 + .85 * var(--sheen, 1)); /* fades as the light stands right over the frame, where its direction turns over */
}
/* frame choice: the work page's stage and the enquiry drawer's thumbnail */
[data-frame="none"] .panel::after { display: none; }
[data-frame="black"] .panel::before { --fr-dim: #2A2826; --fr-lit: #3C3935; background: #413E3A; }
/* aluminium (matched to a photo of the real frame): a 6 mm flat strip of pale champagne-silver (no sloped faces, so one
   tone all round), floating 1 cm off the canvas over a black tray; the sheen runs over it as over brushed metal */
/* --alu = the strip's width: 6 mm to scale, but never under 3px, or a small painting's frame would vanish */
[data-frame="alu"] .panel::before, [data-frame="alu"] .panel::after { --alu: max(calc(var(--cm, 4px) * .6), 3px); }
[data-frame="alu"] .panel::before { inset: calc((var(--cm, 4px) + var(--alu)) * -1); border-width: var(--alu); border-color: #D6D2C6; background: #1C1C1C; }
[data-frame="alu"] .panel::after { inset: calc((var(--cm, 4px) + var(--alu)) * -1); padding: var(--alu); background: linear-gradient(var(--lang, 150deg), rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 35%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .55) 100%); }
[data-frame="none"] .panel::before { display: none; }
[data-frame="none"] .panel { box-shadow: 0 22px 34px -22px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .06); }
.piece-shadow { box-shadow: 0 22px 34px -22px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .06); }
/* a piece is as large as its box allows while keeping its own proportions */
.fit { container-type: size; }
.fit > .piece { width: min(100cqw, calc(100cqh * var(--ar))); }
.room .ra > .piece { width: 100%; height: 100%; }

/* ---------- Section heads -------------------------------------------------- */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; /* the link stands on the title's baseline */ padding-bottom: 20px; margin-bottom: 48px; position: relative; }
.sec-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-strong); }
.sec-title { font-size: clamp(30px, 3.2vw, 50px); font-weight: 200; letter-spacing: -.04em; line-height: 1.05; }
.sec-link { font-size: 13px; padding-bottom: 6px; }

/* ==========================================================================
   HOME
   ========================================================================== */
/* The hero is one open ground, edge to edge: the figures of three paintings stand on it in a loose lattice, as they do
   on his canvases, and the name takes the place of a few of them. --cols/--rows set the lattice. The copy lies over it,
   on the nav's left edge; JS (heroField) clears only the cells its lines actually cover, so the clearing follows the
   shape of the text rather than a box, and deals the figures into every other cell. --u = one atlas pixel on screen
   (a cell is 104 atlas px wide), so figures grow with the section; --s evens their sizes out. */
.hero { position: relative; display: flex; min-height: max(100svh, 640px); padding: calc(var(--nav-h) + 2vh) var(--gutter) 5vh; overflow: hidden; }
.hero-field { --cols: 10; --rows: 4; flex: 1; position: relative; container-type: inline-size; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); }
.hero-copy { position: absolute; z-index: 30; /* above any enlarged figure */ left: calc(var(--px) - var(--gutter)); top: 50%; transform: translateY(-50%); }
.fig {
  --u: calc(100cqw / (var(--cols) * 104));
  place-self: center; display: block; width: calc(var(--w) * var(--s) * var(--u)); height: calc(var(--h) * var(--s) * var(--u));
  background: url(/assets/img/hero/figures.webp?v=2) no-repeat calc(var(--x) * var(--s) * var(--u) * -1) calc(var(--y) * var(--s) * var(--u) * -1) / calc(2048 * var(--s) * var(--u)) auto; /* 2048 = the atlas's width */
  opacity: 0; transition: opacity 1s var(--ease-out-quart) calc(.2s + var(--i) * 14ms); /* they arrive left to right, row by row */
  will-change: transform; /* its size is eased frame by frame in JS (heroField), never by a CSS transition */
}
.hero.in .fig { opacity: 1; }
/* figures step closer as the sun nears them: --z (set by heroField in JS) falls off in a straight line from the sun
   itself (full size) to the edge of its circle (no change); the nearest stands above its neighbours */
/* --ox, --oy = the body's centre of mass in the sprite (the shadow pulls the sprite's own centre off to one side):
   the figure is shifted so that the body, not the sprite, stands in the middle of its cell, and it grows from that point */
.fig { translate: calc((50 - var(--ox, 50)) * 1%) calc((50 - var(--oy, 50)) * 1%); transform: scale(var(--z, 1)); transform-origin: calc(var(--ox, 50) * 1%) calc(var(--oy, 50) * 1%); position: relative; z-index: var(--zi, 0); }
/* the sun: walks the field on its own, or rides the pointer while it is among the figures (heroField moves it) */
/* drawn as a magnifying glass (it is what makes the figures larger); the element's origin is the centre of the lens */
.sun { position: absolute; left: 0; top: 0; z-index: 25; width: 64px; height: 64px; margin: -24px 0 0 -24px; color: var(--ink); pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-out-quart) .8s; will-change: transform; }
.sun svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero.in .sun { opacity: 1; }
@media (min-width: 1700px) { .hero-field { --cols: 12; } }
@media (min-width: 2300px) { .hero-field { --cols: 14; } }
.hero-name { display: flex; gap: .2em; white-space: nowrap; font-size: clamp(52px, 7vw, 124px); font-weight: 200; letter-spacing: -.055em; line-height: .86; } /* the name on one line */
.hero-name .ln { display: block; overflow: hidden; padding: .06em .08em .12em; margin: -.06em -.08em -.12em; }
.hero-name .ln > span { display: inline-block; opacity: 0; transition: opacity .3s var(--ease-out-quart); }
.hero-name .ln:nth-child(2) > span { transition-delay: .1s; }
.hero.in .hero-name .ln > span { opacity: 1; }
.hero-sub { max-width: 34ch; margin-top: 4vh; font-size: 16px; color: var(--ink-2); }
.hero-sub em { font-style: normal; color: var(--ink); }
.hero-actions { display: flex; gap: 12px; margin-top: 4vh; align-items: center; }
/* among the figures the button is a deep red, picked by eye, not the ink of the other buttons (white on it: ~14:1); it darkens on hover */
.hero-actions .btn { background: #580E10; }
@media (hover: hover) { .hero-actions .btn:hover { background: #3F0A0B; } }

/* Statement */
.intro { padding: 20vh var(--px) 18vh; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.intro .label { padding-top: 14px; }
.intro-text { font-size: clamp(28px, 3.3vw, 52px); font-weight: 300; letter-spacing: -.03em; line-height: 1.25; max-width: 24ch; }
.intro-text .hl { color: #580E10; } /* the hero button's deep red (~14:1 on the paper); the text simply reads: no word-by-word lighting */

/* Selected works: the same framed masonry as /works (see .grid-masonry) */
.walk { padding: 0 var(--px) 12vh; }
.walk .grid { padding: 0; }

/* About teaser */
.meet { display: grid; grid-template-columns: 5fr 7fr; gap: 6vw; padding: 6vh var(--px) 20vh; align-items: center; }
.meet-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--mat); border-radius: 7px; } /* same 7px as the work page's niche */
.meet-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: filter 1.2s var(--ease), transform 1.6s var(--ease); }
.meet-img:hover img { filter: none; transform: scale(1.03); }
.meet h2 { font-size: clamp(28px, 2.9vw, 44px); font-weight: 200; letter-spacing: -.045em; line-height: 1.02; margin: 18px 0 28px; }
.meet p { color: var(--ink-2); max-width: 52ch; margin-bottom: 30px; }

/* CTA + process */
.cta { padding: 16vh var(--px) 18vh; text-align: center; border-top: 1px solid var(--line); }
.cta-title { font-size: clamp(32px, 4.2vw, 68px); font-weight: 200; letter-spacing: -.05em; line-height: .98; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1180px; margin: 9vh auto 8vh; text-align: left; }
.step { position: relative; padding-top: 24px; }
.step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); transition-delay: var(--d, 0s); }
.step.in::before { transform: scaleX(1); }
.step h3 { font-size: 26px; font-weight: 300; letter-spacing: -.03em; margin-bottom: 10px; }
.step p { color: var(--ink-2); font-size: 14px; max-width: 34ch; }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.page-head { padding: calc(var(--nav-h) + 13vh) var(--px) 8vh; }
.page-title { font-size: clamp(46px, 5.6vw, 96px); font-weight: 200; letter-spacing: -.06em; line-height: .88; }
.page-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 44px; align-items: end; }
.page-intro p { max-width: 46ch; color: var(--ink-2); font-size: 16px; }
/* privacy: a short readable column */
.prose { max-width: 62ch; margin-top: 48px; color: var(--ink-2); font-size: 16px; }
.prose h2 { margin: 36px 0 8px; font-size: 18px; font-weight: 500; color: var(--ink); }
.prose p + p { margin-top: 12px; }

/* Works grid */
.filters { position: sticky; top: var(--nav-h); z-index: 20; background: rgba(246, 246, 244, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 14px var(--px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 56px; transition: top .6s var(--ease); }
body.nav-compact .filters { top: var(--nav-h-c); }
.filters-group { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
/* one line at every width: All / Available on the left, count and units on the right */
@media (max-width: 420px) { .filters { padding-inline: 12px; } .filters .chip { padding: 0 11px; } .filters-group { gap: 6px; } }
.chip { height: 34px; padding: 0 14px; border-radius: 99px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .4s var(--ease), color .4s, box-shadow .4s; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.chip.is-on { background: var(--ink); color: var(--paper); box-shadow: none; }
.results { color: var(--muted); white-space: nowrap; }
.results b { color: var(--ink); font-weight: 500; }
.unit { display: inline-flex; gap: 2px; font-family: var(--mono); font-size: 11px; padding: 3px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.unit button { padding: 3px 9px; border-radius: 99px; color: var(--muted); transition: background .3s, color .3s; }
.unit button.is-on { background: var(--ink); color: var(--paper); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px 40px; padding: 0 var(--px) 18vh; }
.card { display: block; position: relative; }
.card.is-hidden { display: none; }

/* Framed masonry (/artworks, home, "More artworks", About): framed paintings straight on the page, packed in a masonry
   (1px rows, JS places each card under the shortest column); the frame's drop shadow (--drop) is aimed by the pointer.
   No hover effect on the painting: the "View" cursor is the hover cue, the pointer-lit shadow the only motion. */
.grid.grid-masonry { padding-top: clamp(56px, 6vw, 96px); --cols: 2; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: 1px; gap: 0 clamp(100px, 8.6vw, 140px); align-items: start; }
/* a single row of three (related works on a work page, About) */
.grid.grid-masonry.grid-row3 { --cols: 3; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0 clamp(48px, 5vw, 88px); padding-left: 0; padding-right: 0; }
.card-bare { padding-bottom: clamp(100px, 8.6vw, 140px); container-type: inline-size; }
/* body = the frame's outer box: the canvas plus the 3 cm the frame spills on every side (margin, in the piece's own --cm);
   every frame is exactly one column wide, whatever the painting's proportions: 100cqw / (1 + 6 cm / canvas width) */
.card-body { display: block; width: fit-content; margin: 0 auto; }
/* only the frame, the label and a label-wide bridge between them take the pointer ("View"); the bare wall around
   them (beside the label, below the card) stays plain wall. Clicks on the live parts still reach the link. */
.card-body { pointer-events: none; }
.card-art, .card-label { pointer-events: auto; }
.card-label { position: relative; }
.card-label::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 38px; } /* = the label's margin-top: the strip of wall between frame and label stays part of the link */
.card-art { display: flow-root; } /* keeps the frame's 3 cm margin from collapsing into the label's */
.card-art .piece { width: calc(100cqw / (1 + 6 / var(--wcm))); margin: calc(var(--cm, 4px) * 3); }
/* wall label: a small white card stuck flat under the frame, flush with its left edge; no shadow, no outline:
   a nod to the gallery label rather than a transcription of it */
/* title, then three tight small lines: medium, dimensions, availability */
.card-label { width: fit-content; max-width: 100%; margin-top: 38px; padding: 14px 44px 15px 24px; background: var(--white); display: grid; gap: 0; }
.card-label h3 { font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 6px; }
.card-label .mono { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
/* sold: the gallery's red sticker dot, stuck by hand somewhere right of the word (spot set per work: --rx, --ry) */
.card-label .sold { position: relative; }
.red-dot { position: absolute; width: 17px; height: 17px; top: calc(50% - 8.5px + var(--ry, 0px)); left: calc(2.4em + 12px + var(--rx, 0) * (100% - 2.4em - 12px - 17px)); border-radius: 50%; background: #FF0A27; }
@media (max-width: 600px) {
  .grid.grid-masonry, .grid.grid-masonry.grid-row3 { --cols: 1; }
  .card-label { margin-top: 28px; }
  .card-label::before { height: 28px; }
}

/* Work page */
.work { display: grid; grid-template-columns: 7fr 5fr; gap: 5vw; padding: calc(var(--nav-h) + 6vh) var(--px) 12vh; align-items: start; }
/* The niche: a fixed recess in the wall (full column width, --box-h tall, the same for every work), so moving from one
   work to the next never shifts the layout; the framed painting hangs centred in it. The wall's colour lifted by 25% white; its
   inner shadow (--niche, aimed by the pointer like every frame's drop shadow) says it is recessed. */
.work-media { position: sticky; top: calc(var(--nav-h) + 3vh); --box-h: calc(100svh - var(--nav-h) - 9vh - 64px); }
@media (min-width: 861px) {
  /* the wall's top edge sits on the title's cap height (0.125em below its line top, measured on Manrope 200) */
  .work-media { margin-top: calc(var(--title-fs) * .125); }
}
.stage { position: relative; height: var(--box-h); min-height: 420px; background: rgba(255, 255, 255, .25); border-radius: 7px; overflow: hidden; box-shadow: var(--niche, inset 0 0 5px -2px rgba(40, 40, 36, .14), inset 2px 3px 8px -4px rgba(40, 40, 36, .13)); }
/* the frame spills 3 cm outside the canvas, into the 10% of wall kept around it */
.stage .art { position: absolute; inset: 10%; display: flex; align-items: center; justify-content: center; container-type: size; }
.stage .art .piece { width: min(100cqw, calc(100cqh * var(--ar))); }
/* To scale: the room fills the whole wall; the painting (and its shadow) fades out underneath */
.stage .art { transition: opacity .6s var(--ease), transform .6s var(--ease), transform-origin .12s linear; }
.stage.show-scale .art { opacity: 0; }
/* viewfinder: step up to the wall. The framed painting doubles around the point under the pointer (transform-origin set
   by JS) and fills the wall, which crops it; no overlay */
.stage.is-zoomed .art { transform: scale(2); touch-action: none; }
.zoom-hint { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 99px; background: rgba(246, 246, 244, .9); color: var(--ink-2); font-size: 11px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-out-quart); }
.stage.show-hint .zoom-hint { opacity: 1; }
/* the room photo has its own fixed lighting (from above): the frame hung in it keeps a still shadow, not the pointer's */
.stage .scale-view { --drop: 0 9px 14px -6px rgba(0, 0, 0, .34); --lang: 180deg; position: absolute; inset: 0; z-index: 2; overflow: hidden; background: #efefed; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility .8s; container-type: size; }
.stage.show-scale .scale-view { opacity: 1; visibility: visible; }
.room { position: absolute; left: 50%; top: 50%; aspect-ratio: 1200 / 727; width: max(104.6cqw, 165.06cqh); transform: translate(-52.17%, -50%) scale(1.08); transform-origin: 52.17% 50%; transition: transform 1.8s var(--ease); }
.show-scale .room { transform: translate(-52.17%, -50%) scale(1); }
.room .room-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.room .ra { position: absolute; opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease) .25s, transform 1.2s var(--ease) .25s; }
.room .piece-shadow { box-shadow: 0 12px 16px -10px rgba(0, 0, 0, .5), 0 2px 5px rgba(0, 0, 0, .12); }
.show-scale .room .ra { opacity: 1; transform: none; }
.room-cap { position: absolute; top: 16px; left: 16px; z-index: 2; background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); padding: 7px 12px; border-radius: 99px; }
/* view controls sit under the painting, never on its frame */
.stage-tools { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.seg { display: inline-flex; padding: 3px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-strong); position: relative; font-size: 12px; }
.seg button { position: relative; z-index: 1; height: 30px; padding: 0 14px; border-radius: 99px; transition: color .4s; }
.seg button.is-on { color: var(--paper); }
.seg .pill { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 99px; background: var(--ink); transition: transform .35s var(--ease); }
.zoom-btn:disabled { opacity: .3; cursor: default; }
.zoom-btn { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); display: grid; place-items: center; font-size: 16px; }

.work { --title-fs: clamp(44px, 5vw, 80px); }
.work-title { font-size: var(--title-fs); font-weight: 200; letter-spacing: -.05em; line-height: .95; margin-bottom: 18px; }
.work-by { font-size: 15px; color: var(--ink-2); }
.specs { margin: 44px 0 30px; border-top: 1px solid var(--line-strong); }
.specs > div { display: grid; grid-template-columns: 123px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14px; align-items: center; }
.specs dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.specs dd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.specs .unit { margin-left: auto; }
.price-line { color: var(--ink); margin: 4px 0 18px; }
.work-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.work-actions .btn { flex: 1; justify-content: center; min-width: 200px; }
.assure { margin-top: 30px; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); }
.assure div { display: flex; gap: 12px; align-items: baseline; }
.assure span { font-size: 10px; color: var(--ink); flex: none; }
.work-nav { display: flex; justify-content: space-between; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.work-nav a { display: inline-flex; gap: 10px; align-items: center; }
.work-nav small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.work-nav .next { text-align: right; }
.more { padding: 4vh var(--px) 16vh; }
.more-cta { text-align: center; margin-top: 9vh; }

/* About */
/* two columns: name + lead on the left (sticky), portrait with the story right beneath it on the right */
.about { display: grid; grid-template-columns: 7fr 5fr; gap: 6vw; padding: calc(var(--nav-h) + 12vh) var(--px) 16vh; align-items: start; }
.about-left { position: sticky; top: calc(var(--nav-h) + 8vh); }
.about .page-title { font-size: clamp(46px, 5.6vw, 96px); }
.about-lead { margin-top: 7vh; max-width: 22ch; }
.about-text { margin-top: 44px; }

.about-portrait { aspect-ratio: 1; overflow: hidden; background: var(--mat); border-radius: 7px; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }

.about-lead { font-size: clamp(26px, 2.4vw, 38px); font-weight: 300; letter-spacing: -.03em; line-height: 1.3; }
.about-text p { color: var(--ink-2); font-size: 16px; line-height: 1.75; margin-bottom: 1.2em; }
.timeline { padding: 0 var(--px) 18vh; }
.tl { list-style: none; }
.tl li { display: grid; grid-template-columns: 1fr 2fr 3fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); align-items: baseline; }
.tl li:last-child { border-bottom: 1px solid var(--line); }
.tl .when { font-family: var(--mono); font-size: 13px; }
.tl h3 { font-size: 22px; font-weight: 300; letter-spacing: -.02em; }
.tl p { color: var(--ink-2); font-size: 14px; }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; padding: calc(var(--nav-h) + 12vh) var(--px) 16vh; }
.contact .page-title { font-size: clamp(46px, 5.6vw, 96px); }
.contact-lead { font-size: 17px; color: var(--ink-2); max-width: 44ch; margin: 36px 0 48px; }
.contact-list { border-top: 1px solid var(--line-strong); max-width: 520px; }
.contact-list > div { display: grid; grid-template-columns: 140px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.contact-list dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }

/* ---------- Forms --------------------------------------------------------- */
.form { display: grid; gap: 22px; }
.form .row2 { display: grid; grid-template-columns: 1fr; gap: 22px; } /* stacked: side by side, names and emails overflow */
.field { position: relative; display: block; }
.field input, .field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; border-radius: 0; padding: 24px 0 10px; font-size: 16px; outline: none; resize: none; }
.field textarea { min-height: 120px; line-height: 1.5; }
.field label { position: absolute; left: 0; top: 24px; font-size: 15px; color: var(--muted); pointer-events: none; transform-origin: left; transition: transform .45s var(--ease); }
.field::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.field:focus-within::after { transform: scaleX(1); }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-20px) scale(.78); }
.field.has-error::after { background: var(--error); transform: scaleX(1); }
/* the error sits on its own line just under the field's rule (in the form's 22px gap), never over what was typed */
.field .err { position: absolute; left: 0; right: 0; top: calc(100% + 5px); font-size: 12px; line-height: 1.3; color: var(--error); opacity: 0; transition: opacity .3s; }
.field.has-error .err { opacity: 1; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* the spam trap stays out of sight and reach */
.form-error { font-size: 13.5px; color: var(--error); }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 8px; }
.form-foot p { font-size: 12px; color: var(--muted); max-width: 30ch; }
.form .btn.is-sending .btn-roll { opacity: 0; }
.form .btn .spin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; opacity: 0; animation: spin .8s linear infinite; }
.form .btn.is-sending .spin { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.success svg { width: 64px; height: 64px; margin-bottom: 26px; }
.success circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw 1s var(--ease) forwards; }
.success path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .7s var(--ease) .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success h3 { font-size: 36px; font-weight: 300; letter-spacing: -.03em; margin-bottom: 12px; overflow-wrap: anywhere; outline: none; }
.success p { color: var(--ink-2); max-width: 40ch; margin-bottom: 26px; overflow-wrap: anywhere; }
.success .success-next { font-size: 13px; color: var(--muted); margin-top: -12px; }

/* ---------- Drawer -------------------------------------------------------- */
.drawer-scrim { position: fixed; inset: 0; z-index: 120; background: rgba(20, 20, 20, .28); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 130; width: min(560px, 100%); background: var(--paper); transform: translateX(102%); visibility: hidden; transition: transform .55s var(--ease), visibility 0s .55s; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.drawer-open .drawer { transform: none; visibility: visible; transition: transform .55s var(--ease); }
.drawer-open .drawer-scrim { opacity: 1; visibility: visible; }
.drawer-close { position: absolute; top: 24px; right: 28px; font-size: 13px; display: inline-flex; gap: 8px; align-items: center; z-index: 2; }
.drawer-close span { font-size: 20px; line-height: 1; transition: transform .5s var(--ease); }
.drawer-close:hover span { transform: rotate(90deg); }
.drawer-inner { padding: 88px 44px 44px; }
.drawer-title { font-size: 40px; font-weight: 200; letter-spacing: -.04em; line-height: 1.02; margin: 14px 0 30px; }
.drawer-work:empty { display: none; }
.drawer-work { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; background: var(--white); margin-bottom: 28px; }
.drawer-art { width: 104px; container-type: inline-size; display: flow-root; }
.drawer-art .piece { width: min(calc(100cqw / (1 + 6 / var(--wcm))), calc(120px * var(--ar))); margin: calc(var(--cm, 4px) * 3) auto; }
.drawer-work b { font-weight: 500; display: block; overflow-wrap: anywhere; }
.drawer-work span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.drawer-assure { margin: 0 0 30px; }
/* Send stays in reach: the form's foot sticks to the bottom of the drawer at every size */
.drawer .form-foot { position: sticky; bottom: 0; z-index: 2; margin: 0 -44px -44px; padding: 16px 44px calc(18px + env(safe-area-inset-bottom, 0px)); background: rgba(246, 246, 244, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- Cursor -------------------------------------------------------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 180; pointer-events: none; }
/* one 80px disc, scaled per state (8px dot, 40px ring, 22px sun, 80px label): the size change stays on the compositor */
.cursor-dot { position: absolute; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: var(--ink); transform: scale(.1); transition: transform .7s var(--ease-out-quart), background .5s, box-shadow .5s, opacity .4s; }
.cursor-label { position: absolute; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.cursor.is-label .cursor-dot { transform: scale(.8); } /* 64px */
.cursor.is-label .cursor-label { opacity: 1; transition-delay: .1s; }
.cursor.is-link .cursor-dot { transform: scale(.375); background: transparent; box-shadow: inset 0 0 0 2.67px var(--ink); } /* 30px ring, 1px line */
/* over the hero field the cursor becomes the sun */
.cursor.is-sun .cursor-dot { transform: scale(.275); background: #F2C14E; box-shadow: 0 0 0 36px rgba(242, 193, 78, .18), 0 0 145px 44px rgba(242, 193, 78, .35); }
.cursor.is-light .cursor-dot { background: #fff; }
.cursor.is-light.is-link .cursor-dot { background: transparent; box-shadow: inset 0 0 0 2.67px #fff; }
.cursor.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (hover: hover) and (pointer: fine) { body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } body.has-cursor input, body.has-cursor textarea { cursor: text; } }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 190; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 99px; font-size: 13px; transition: transform .7s var(--ease), visibility .7s; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; }

/* ---------- Footer -------------------------------------------------------- */
.footer { background: var(--ink); color: var(--paper); padding-top: 12vh; }
.footer .label { color: rgba(246, 246, 244, .62); margin-bottom: 14px; }
.footer-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; padding-bottom: 12vh; }
.footer-name { font-size: clamp(48px, 6vw, 96px); font-weight: 200; letter-spacing: -.05em; line-height: .9; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 26px; color: rgba(246, 246, 244, .5); position: relative; }
.footer-bottom::before { content: ''; position: absolute; top: 0; left: var(--px); right: var(--px); height: 1px; background: rgba(246, 246, 244, .14); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-field { --cols: 8; }
}
@media (max-width: 860px) {
  :root { --nav-h: 64px; --nav-h-c: 56px; }
  .nav { grid-template-columns: 1fr auto; }
  .nav-links, .nav-cta { display: none; }
  .burger { display: block; }
  /* phone: three rows of figures, the copy with one figure to its right, then a last row of figures (the copy holds
     two cells of the 4th row, so the figures flow round it). Figures stand a little smaller than a cell would allow, for air; the copy
     is smaller too, and starts on the left edge of the first column's figures (a body is about 40px wide, centred in
     its cell), not on the edge of the field. */
  .hero { min-height: 0; padding-top: calc(var(--nav-h) - 6px); padding-bottom: 5vh; } /* the first row starts close under the nav: its figures have their own ground above them */
  .hero-field { --cols: 3; --rows: 4; grid-template-rows: repeat(3, clamp(108px, 31.2vw, 204px)) auto clamp(108px, 31.2vw, 204px); }
  .fig { --u: calc(100cqw / (var(--cols) * 104) * .8); }
  .fig:nth-of-type(n+14) { display: none; } /* 9 above the copy, 1 beside it, 3 below */
  /* the copy holds the first two cells of its row and may run a little into the third, short of the figure standing there */
  .hero-copy { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / span 2; grid-row: 4; padding: 22px 0 14px calc(100cqw / 6 - 20px); margin-right: -24px; }
  /* the copy's row is kept as short as it can be, and the figure beside it a touch larger, so that figure keeps about
     the same ground above and below as the others and the lattice reads as unbroken, the copy standing in two cells */
  .fig:nth-of-type(10) { --u: calc(100cqw / (var(--cols) * 104) * .92); }
  .hero-name { font-size: clamp(34px, 10.5vw, 46px); }
  .hero-sub { margin-top: 8px; font-size: 14px; line-height: 1.3; max-width: 30ch; }
  .hero-actions { margin-top: 12px; }
  .hero-actions .btn { height: 38px; padding: 0 18px; font-size: 13px; gap: 10px; background: var(--ink); } /* on a phone the button is the site's ink, not the red */
  /* it looks 38px tall but answers to a finger over 54px: an invisible margin of 8px all round is part of the button */
  .hero-actions .btn { overflow: visible; }
  .hero-actions .btn::after { content: ''; position: absolute; inset: -8px; border-radius: 99px; }
  .hero-sub-tail { display: none; } /* the sentence stops at "shadow." */
  .cta { text-align: left; }
  .intro { grid-template-columns: 1fr; padding: 12vh var(--px); }
  .meet, .about, .work, .contact { grid-template-columns: 1fr; }
  .about-left { position: relative; top: 0; margin-bottom: 6vh; }
  .work-media { position: relative; top: 0; }
  /* the stage takes the painting's own proportions instead of a fixed 64vh of mostly empty mat */
  .work-media { --box-h: 50dvh; }
  /* narrow screens: less side wall, so thin paintings hang a little larger */
  .stage .art { inset: 10% 5%; }
  /* framing gets its own line of options, so the four frames never wrap */
  .specs > div:has(.frames) { grid-template-columns: 1fr; gap: 10px; }
  .stage { min-height: 300px; }
  /* thumb-zone enquiry bar (work pages); the drawer keeps Send within reach the same way */
  .ebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--px) calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(246, 246, 244, .9); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 -1px 0 var(--line); transform: translateY(100%); visibility: hidden; transition: transform .6s var(--ease), visibility 0s .6s; }
  .ebar.is-on { transform: none; visibility: visible; transition: transform .6s var(--ease); }
  .ebar-meta { min-width: 0; display: grid; gap: 2px; }
  .ebar-meta b { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ebar-meta .label { color: var(--muted); }
  .ebar .btn { height: 48px; flex: none; }
  .drawer .form-foot { margin: 0 -24px -32px; padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .drawer .form-foot p { max-width: 22ch; }
  .steps { grid-template-columns: 1fr; }
  .page-intro { grid-template-columns: 1fr; }
  .filters { gap: 10px; }
  .grid { gap: 44px 16px; }
  .tl li { grid-template-columns: 1fr; gap: 6px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; }
  .drawer-inner { padding: 80px 24px 32px; }
  .form .row2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
}
.ebar { display: none; }
@media (max-width: 860px) { .ebar { display: flex; } }
/* Touch: every control gets a 44px hit area; small pills grow invisibly so the layout stays as drawn */
@media (pointer: coarse) {
  .unit button, .fr-opt, .chip { position: relative; }
  .unit button::after { content: ''; position: absolute; inset: -10px -2px; }
  .fr-opt::after, .seg button::after { content: ''; position: absolute; inset: -7px -3px; }
  .chip::after { content: ''; position: absolute; inset: -5px -3px; }
  .zoom-btn { width: 44px; height: 44px; }
  .burger { width: 44px; height: 44px; margin-right: -6px; }
  .burger i:first-child { top: 18px; } .burger i:last-child { top: 25px; }
  .drawer-close { top: 12px; right: 16px; height: 44px; padding: 0 12px; }
  .work-nav a { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
  .rv, .rv-line > span, .hero-name .ln > span, .fig { opacity: 1; transform: none; }
}

/* ---------- Frame preview (artwork view and room, drawn to scale) ---------
   --cm = rendered px per cm (set by JS). Moulding 2 cm, float gap 1 cm, as layered spreads so
   the painting itself is never resized or re-cropped. */
.frames { gap: 6px !important; }
.fr-opt { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 6px; border-radius: 99px; font-size: 12px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s, background .3s; }
.fr-opt:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.fr-opt.is-on { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--white); }
.fr-opt .sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.sw-none { background: linear-gradient(135deg, transparent 46%, var(--muted) 47%, var(--muted) 53%, transparent 54%), #fff; }
.sw-white { background: #F7F6F2; }
.sw-black { background: #161514; }
.sw-alu { background: radial-gradient(circle, #1C1C1C 0 38%, transparent 40%), linear-gradient(135deg, #B9B4A6, #EEEBE2 40%, #CFCABD 65%, #E2DED3); } /* the strip round its black tray */