/* ==========================================================================
   Monte — Catalog 2026
   Concept: "the line". A Monte door is a hairline in a wall; the catalog is
   built from that line — seams that open, drawings that draw themselves,
   rooms whose colour changes as you walk through them.
   ========================================================================== */

/* ---------- Fonts (self-hosted subsets of the Google Fonts files, OFL) ---------- */
/* Antonio — latin-ext */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(../assets/fonts/antonio-latin-ext-100-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Antonio — latin */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(../assets/fonts/antonio-latin-100-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans — latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/instrument-sans-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans — latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/instrument-sans-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans — latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/instrument-sans-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans — latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/instrument-sans-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans — latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/instrument-sans-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans — latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/instrument-sans-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Vazirmatn — arabic */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(../assets/fonts/vazirmatn-arabic-100-700.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Vazirmatn — latin-ext */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(../assets/fonts/vazirmatn-latin-ext-100-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Vazirmatn — latin */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(../assets/fonts/vazirmatn-latin-100-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #151412;
  --ink: #ECE7E0;
  --plaster: #E9E5DF;
  --paper: #F3F0EB;
  --night: #151412;
  --ink-2: color-mix(in srgb, var(--ink) 64%, transparent);
  --ink-3: color-mix(in srgb, var(--ink) 40%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 34%, transparent);

  --f-display: "Antonio", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "Vazirmatn", ui-monospace, monospace;
  --f-head: var(--f-display);

  /* Never closer to the edge than a notch / rounded corner allows (landscape phones). */
  --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --bar-h: 72px;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Plaster noise and paint grain: the original SVG feTurbulence filters, pre-rendered once to small
     transparent WebP tiles. Filters were re-rasterised on every paint (seconds per frame on phones). */
  --noise: url("../assets/textures/noise.webp");
  --grain: url("../assets/textures/grain.webp");
}

/* Derived tokens are redeclared wherever --ink can differ from <html> during a room-colour tween
   (see setTheme in app.js), so lines and secondary text follow their own section's ink. */
[data-bg] { color: var(--ink); } /* re-resolve inherited text colour against the room's own --ink */
[data-bg], .bar, .hud, .seam {
  --ink-2: color-mix(in srgb, var(--ink) 64%, transparent);
  --ink-3: color-mix(in srgb, var(--ink) 40%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 34%, transparent);
}

[dir="rtl"] {
  --f-sans: "Vazirmatn", Tahoma, sans-serif;
  --f-head: "Vazirmatn", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-loading { overflow: hidden; }

.backdrop { position: fixed; inset: 0; z-index: -1; background: var(--bg); pointer-events: none; }

/* Fine plaster grain over everything — the page is a wall */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: var(--noise) 0 0 / 220px 220px;
  opacity: .05;
  /* The noise is pure black, so normal blending is identical to multiply — without forcing the whole
     page into an isolated blend group under a full-screen fixed layer. */
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
::selection { background: var(--ink); color: var(--bg); }

.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
[dir="rtl"] .mono { letter-spacing: 0; font-size: 12px; }
.eyebrow { margin: 0 0 28px; color: var(--ink-2); display: flex; gap: 14px; align-items: center; }
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; flex: none; }

.display {
  font-family: var(--f-head);
  font-weight: 200;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.005em;
  margin: 0;
}
[dir="rtl"] .display { text-transform: none; line-height: 1.12; font-weight: 250; letter-spacing: 0; }
.name { font-family: var(--f-display) !important; text-transform: uppercase !important; line-height: .86 !important; }
.name { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .name { text-align: right; }

.wordmark {
  display: block;
  aspect-ratio: 900 / 393;
  background: currentColor;
  -webkit-mask: url("../assets/brand/monte-wordmark.png") center / contain no-repeat;
          mask: url("../assets/brand/monte-wordmark.png") center / contain no-repeat;
}

/* Line-by-line text reveal helpers (set up by JS) */
.line-mask { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.line-mask > span { display: block; }
.line-mask .w { display: inline-block; white-space: nowrap; }
.line-mask .ch { display: inline-block; }
.word { display: inline-block; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 200; color: var(--plaster); pointer-events: none; }
.loader__half { position: absolute; top: 0; bottom: 0; width: 50.1%; background: var(--night); }
.loader__half--a { left: 0; }
.loader__half--b { right: 0; }
.loader__line { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--plaster); transform: scaleY(0); transform-origin: top; opacity: .6; }
.loader__mark { position: absolute; left: 50%; top: 50%; width: min(220px, 46vw); translate: -50% -50%; }
.loader__mark .wordmark { clip-path: inset(0 0 100% 0); }
.loader__count { position: absolute; left: var(--gutter); bottom: var(--gutter); color: color-mix(in srgb, var(--plaster) 60%, transparent); }

/* ---------- Top bar ---------- */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: calc(var(--bar-h) + var(--safe-t));
  padding: var(--safe-t) var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--ink);
  transition: color .6s var(--ease), transform .6s var(--ease);
}
.bar.is-hidden { transform: translateY(-100%); }
.bar::before { content: ""; position: absolute; inset: 0 0 -32px; z-index: -1; pointer-events: none; background: linear-gradient(var(--bg) 45%, transparent); opacity: 0; transition: opacity .5s; }
.bar.is-solid::before { opacity: 1; }
.bar__logo { width: 92px; justify-self: start; }
.bar__meta { margin: 0; color: var(--ink-2); }
.bar__nav { justify-self: end; display: flex; gap: 8px; align-items: center; }
.bar__btn, .bar__lang {
  height: 36px;
  padding-inline: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: background .3s, color .3s, border-color .3s;
}
.bar__btn sup { font-size: 9px; letter-spacing: 0; translate: 0 -3px; }
.bar__lang { width: 44px; padding: 0; justify-content: center; font-family: "Vazirmatn", var(--f-sans); }
@media (hover: hover) { .bar__btn:hover, .bar__lang:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } }

/* ---------- Seam progress ---------- */
.seam {
  position: fixed;
  inset-inline-end: calc(var(--gutter) * .5);
  top: 22vh;
  bottom: 22vh;
  z-index: 55;
  width: 24px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: opacity .6s;
}
.seam.is-on { opacity: 1; }
.seam__track { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.seam__fill { position: absolute; inset: 0; background: var(--ink); transform-origin: top; transform: scaleY(0); }
.seam__ticks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.seam__ticks li { position: absolute; left: 0; right: 0; translate: 0 -50%; display: flex; justify-content: center; }
.seam__ticks button { width: 24px; height: 18px; display: grid; place-items: center; position: relative; }
.seam__ticks button::before { content: ""; width: 7px; height: 1px; background: var(--ink); transition: width .3s; }
.seam__ticks button span {
  position: absolute;
  inset-inline-end: 28px;
  white-space: nowrap;
  opacity: 0;
  translate: 6px 0;
  transition: opacity .3s, translate .3s;
  color: var(--ink);
}
.seam__ticks button:hover::before, .seam__ticks button.is-active::before { width: 15px; }
.seam__ticks button:hover span { opacity: 1; translate: 0 0; }

/* ---------- HUD (current page) ---------- */
.hud {
  position: fixed;
  inset-inline-start: var(--gutter);
  bottom: calc(22px + var(--safe-b));
  z-index: 55;
  display: flex;
  gap: 12px;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.hud.is-on { opacity: 1; }
.hud__n { color: var(--ink); }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 150;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  display: grid;
  place-items: center;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background .35s;
}
.cursor__label { font: 500 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.is-label { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: rgba(18, 17, 16, .82); mix-blend-mode: normal; backdrop-filter: blur(6px); }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-hidden { width: 0; height: 0; margin: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ==========================================================================
   Hero — a wall with a single door. Scroll opens it and walks you through.
   ========================================================================== */
.hero {
  --open: 0;
  --dh: min(64svh, 640px);
  --dw: calc(var(--dh) * .375);
  --cx: 64%;
  --cy: 52%;
  --wall: var(--plaster);
  position: relative;
  /* One screen of stage + 230% of scroll to walk through the door (the stage sticks; see app.js). */
  height: calc(100svh + 230vh);
  background: var(--wall);
  color: #161514;
}
.hero__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
[dir="rtl"] .hero { --cx: 36%; }
.hero__room {
  position: absolute;
  inset: 0;
  clip-path: inset(
    calc((1 - var(--open)) * (var(--cy) - var(--dh) / 2))
    calc((1 - var(--open)) * (100% - var(--cx) - var(--dw) / 2))
    calc((1 - var(--open)) * (100% - var(--cy) - var(--dh) / 2))
    calc((1 - var(--open)) * (var(--cx) - var(--dw) / 2))
  );
  background: #2a241e;
}
.hero__room img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transform-origin: var(--cx) var(--cy); }
.hero__room::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 8, .35), rgba(10, 9, 8, .05) 40%, rgba(10, 9, 8, .55)); opacity: var(--open); }

.hero__door {
  position: absolute;
  left: calc(var(--cx) - var(--dw) / 2);
  top: calc(var(--cy) - var(--dh) / 2);
  width: var(--dw);
  height: var(--dh);
  perspective: 1400px;
  perspective-origin: 30% 50%;
}
.hero__door::before { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(22, 21, 20, .2); pointer-events: none; }
.hero__leaf {
  position: absolute;
  inset: 0;
  background: var(--wall);
  transform-origin: 0 50%;
  will-change: transform;
}
.hero__leaf::before { content: ""; position: absolute; inset: 0; background: var(--noise) 0 0 / 220px 220px; opacity: .05; }
.hero__leaf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .28)); opacity: var(--shade, 0); }
.hero__handle { position: absolute; right: 14%; top: 47%; width: 2px; height: 13%; background: #1b1a18; }
[dir="rtl"] .hero__handle { right: auto; left: 14%; }

.hero__copy {
  position: absolute;
  inset: 0;
  padding: calc(var(--bar-h) + var(--safe-t) + 6vh) var(--gutter) calc(6vh + var(--safe-b));
  display: grid;
  grid-template-rows: auto 1fr auto;
  pointer-events: none;
}
.hero__copy .eyebrow { color: rgba(22, 21, 20, .62); }
.hero__title { align-self: end; font-size: clamp(64px, 10vw, 188px); white-space: nowrap; }
[dir="rtl"] .hero__title { font-size: clamp(48px, 7.2vw, 128px); }
.hero__foot { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 4vh; }
.hero__sub { margin: 0; max-width: 36ch; font-size: 15px; color: rgba(22, 21, 20, .72); }
.hero__scroll { display: flex; align-items: center; gap: 12px; color: rgba(22, 21, 20, .62); }
.hero__scroll i { width: 1px; height: 44px; background: rgba(22, 21, 20, .2); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: #161514; animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

.hero__enter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #F3EFE9;
  pointer-events: none;
  text-align: center;
}
.hero__enter .display { font-size: clamp(56px, 10vw, 180px); }
.hero__enter .mono { margin-top: 18px; opacity: .8; }

/* ==========================================================================
   Manifesto
   ========================================================================== */
.manifesto { padding: 22vh var(--gutter) 16vh; }
.manifesto__text {
  margin: 0;
  max-width: 22ch;
  font-family: var(--f-head);
  font-weight: 250;
  font-size: clamp(36px, 5.4vw, 92px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -.005em;
}
[dir="rtl"] .manifesto__text { text-transform: none; line-height: 1.5; font-size: clamp(28px, 3.8vw, 62px); max-width: 26ch; font-weight: 300; }
.manifesto__text .word { opacity: .14; }
.facts {
  margin: 14vh 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.facts div { padding-block: 22px 0; padding-inline: 0 20px; border-inline-end: 1px solid var(--line); }
.facts div + div { padding-inline-start: 20px; }
.facts div:last-child { border: 0; }
.facts dt { font-family: var(--f-display); font-weight: 200; font-size: clamp(56px, 6vw, 104px); line-height: 1; }
.facts dd { margin: 10px 0 0; color: var(--ink-2); }

/* ==========================================================================
   Index — the corridor
   ========================================================================== */
.index { padding: 18vh var(--gutter) 16vh; }
.index__head { display: grid; grid-template-columns: 1fr auto; gap: 32px 48px; align-items: end; margin-bottom: 48px; }
.index__title { font-size: clamp(56px, 8vw, 140px); }
[dir="rtl"] .index__title { font-size: clamp(44px, 6vw, 96px); }
.index__sub { max-width: 40ch; color: var(--ink-2); margin: 20px 0 0; }
.index__tools { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.chips, .toggle { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chip {
  height: 34px;
  padding-inline: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .3s, color .3s, border-color .3s;
}
.chip sup { font: 500 9px var(--f-mono); opacity: .6; translate: 0 -3px; }
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }
.chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.toggle { border: 1px solid var(--line-strong); border-radius: 99px; padding: 3px; gap: 0; }
.toggle .chip { border: 0; height: 28px; }

.corridor {
  display: flex;
  gap: 10px;
  height: min(66svh, 640px);
}
.door {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  perspective: 1200px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  transition: flex-grow .8s var(--ease), opacity .5s;
  text-align: start;
  color: #F4F0EA;
}
.door__img { position: absolute; inset: 0; }
.door__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.2s var(--ease-out), filter .6s; filter: saturate(.85); }
.door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 11, 10, .35), transparent 28%, transparent 55%, rgba(12, 11, 10, .66)); pointer-events: none; }
.door__leaf { position: absolute; inset: 0; z-index: 2; background: var(--bg); transform-origin: 0 50%; border: 1px solid var(--line); }
[dir="rtl"] .door__leaf { transform-origin: 100% 50%; }
.door__n { position: absolute; z-index: 3; top: 14px; inset-inline-start: 14px; }
.door__label { position: absolute; z-index: 3; inset: auto 14px 16px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.door__name {
  font-family: var(--f-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: .9;
  writing-mode: vertical-rl;
  rotate: 180deg;
  white-space: nowrap;
  transition: font-size .6s var(--ease);
}
.door__more { opacity: 0; translate: 0 8px; transition: opacity .4s, translate .4s; white-space: nowrap; }
.door__family { position: absolute; z-index: 3; top: 14px; inset-inline-end: 14px; opacity: 0; transition: opacity .4s; }
/* Hover widening only where hover exists — on touch a tap would leave doors stuck "hovered". */
@media (hover: hover) {
  .corridor:hover .door:not(:hover):not(.is-out) img { filter: saturate(.4) brightness(.8); }
  .door:hover { flex-grow: 3.4; }
  .door:hover img { transform: scale(1.02); }
  .door:hover .door__name { writing-mode: horizontal-tb; rotate: 0deg; font-size: clamp(32px, 3vw, 52px); }
  .door:hover .door__more, .door:hover .door__family { opacity: 1; translate: 0 0; }
}
.door:focus-visible { flex-grow: 3.4; outline-offset: -3px; outline-color: #F4F0EA; }
.door:focus-visible img { transform: scale(1.02); }
.door:focus-visible .door__name { writing-mode: horizontal-tb; rotate: 0deg; font-size: clamp(32px, 3vw, 52px); }
.door:focus-visible .door__more, .door:focus-visible .door__family { opacity: 1; translate: 0 0; }
.door.is-out { flex-grow: .3; opacity: .22; pointer-events: none; }

.matrix { display: none; overflow-x: auto; }
.index.is-specs .corridor { display: none; }
.index.is-specs .matrix { display: block; }
.matrix table { width: 100%; border-collapse: collapse; min-width: 880px; }
.matrix th { text-align: start; font-weight: 400; color: var(--ink-2); padding-block: 0 14px; padding-inline: 0 16px; border-bottom: 1px solid var(--line-strong); }
.matrix td { padding-block: 14px; padding-inline: 0 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
.matrix tr[data-slug]:focus-visible { outline-offset: -1px; }
.matrix tr[data-slug] { cursor: pointer; transition: background .25s; }
@media (hover: hover) { .matrix tr[data-slug]:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } }
.matrix tr.is-out { opacity: .2; }
.matrix__model { display: flex; align-items: center; gap: 16px; }
.matrix__model img { width: 36px; height: 52px; object-fit: cover; }
.matrix__model b { font: 300 28px/1 var(--f-display); text-transform: uppercase; }

/* ==========================================================================
   Chapters
   ========================================================================== */
.chapter {
  min-height: 100svh;
  padding: 18vh var(--gutter) 12vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-content: center;
  position: relative;
}
.chapter__n {
  grid-column: 1 / span 6;
  font: 100 clamp(160px, 30vw, 520px)/.8 var(--f-display);
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  margin: 0;
  user-select: none;
}
.chapter__body { grid-column: 7 / span 6; align-self: end; }
.chapter__title { font-size: clamp(48px, 6.4vw, 112px); margin-bottom: 28px; }
[dir="rtl"] .chapter__title { font-size: clamp(40px, 5vw, 84px); }
.chapter__text { max-width: 40ch; font-size: 18px; color: var(--ink-2); margin: 0 0 40px; }
.chapter__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.chapter__list li { border-bottom: 1px solid var(--line); }
.chapter__list a { display: flex; justify-content: space-between; padding: 14px 0; transition: padding .4s var(--ease); }
@media (hover: hover) { .chapter__list a:hover { padding-inline-start: 12px; } }
.chapter__list b { font: 300 22px/1 var(--f-display); text-transform: uppercase; }

/* ==========================================================================
   Product page
   ========================================================================== */
.product {
  min-height: 100svh;
  padding: 16vh var(--gutter) 14vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
}
.product__media { grid-column: 1 / span 7; grid-row: 1; }
.product__info { grid-column: 9 / span 4; grid-row: 1; }
.product--flip .product__media { grid-column: 6 / span 7; }
.product--flip .product__info { grid-column: 1 / span 4; }

.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 82svh;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  clip-path: inset(0% 49.9% 0% 49.9%);
}
.frame--slide { clip-path: inset(0% 100% 0% 0%); }
.frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }
.frame > img.is-next { opacity: 0; }
.frame__seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink); transform: scaleY(0); z-index: 3; }
.frame__tag { position: absolute; z-index: 4; inset-inline-start: 16px; bottom: 14px; color: #F4F0EA; mix-blend-mode: difference; }

/* Mirror Plus — a sheen crosses the glass */
.frame--mirror::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 2;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .1) 52%, transparent 60%);
  translate: -70% 0;
  pointer-events: none;
}
.frame--mirror.is-shine::after { animation: sheen 1.8s var(--ease) forwards; }
@media (hover: hover) { .frame--mirror:hover::after { animation: sheen 1.4s var(--ease); } }
@keyframes sheen { to { translate: 70% 0; } }

/* Leather Plus — a loupe to read the grain */
.loupe {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  border-radius: 50%;
  pointer-events: none;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 20px 50px rgba(0, 0, 0, .35);
  opacity: 0;
  scale: .6;
  transition: opacity .3s, scale .4s var(--ease-out);
}
.frame--loupe:hover .loupe { opacity: 1; scale: 1; }

/* Wall & Decor — the image arrives as turning slats */
.frame--louver { perspective: 1400px; background: transparent; }
.frame--louver > img { opacity: 0; }
.slats { position: absolute; inset: 0; display: flex; transform-style: preserve-3d; }
.slat { flex: 1 1 0; height: 100%; background-repeat: no-repeat; transform-origin: 50% 50%; backface-visibility: hidden; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .18); }

.thumbs { display: flex; gap: 8px; margin-top: 14px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.product > * { min-width: 0; }
.thumb { flex: none; width: 52px; height: 66px; overflow: hidden; opacity: .45; transition: opacity .3s; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transition: transform .4s var(--ease); }
@media (hover: hover) { .thumb:hover { opacity: .85; } }
.thumb.is-active { opacity: 1; }
.thumb.is-active::after { transform: scaleX(1); }
.thumbs__count { flex: none; margin-inline-start: auto; padding-inline-start: 8px; color: var(--ink-2); }

.product__idx { color: var(--ink-2); margin: 0 0 22px; display: flex; gap: 10px; }
.product__name { font-size: clamp(60px, 6.6vw, 128px); font-weight: 200; }
.product__alt { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); font-family: "Vazirmatn", var(--f-sans); }
.product__alt [lang="fa"] { font-size: 1.1em; color: var(--ink); }
.product__lede { margin: 20px 0 22px; font-size: 16px; max-width: 40ch; }
[dir="rtl"] .product__lede { font-size: 16px; line-height: 1.9; }

.drawing { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: end; padding: 18px 0; border-top: 1px solid var(--line); }
.drawing svg { display: block; overflow: visible; color: var(--ink); direction: ltr; }
.drawing--plan { grid-template-columns: 1fr; }
.drawing .elev { width: 92px; height: 150px; }
.drawing .plan { width: 100%; max-width: 230px; height: 132px; }
.drawing text { font: 500 9px var(--f-mono); fill: currentColor; letter-spacing: .06em; }
.drawing__cap { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; color: var(--ink-2); }
.draw { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.draw--thin { stroke-width: .6; opacity: .55; }
.draw--dash { stroke-dasharray: 2 3; opacity: .7; }
.solid { fill: currentColor; }

.specs { margin: 0; border-top: 1px solid var(--line); }
.specs div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--ink-2); padding-top: 2px; }
.specs dd { margin: 0; font-size: 14px; }

.finishes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 26px; }
.finish { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.finish i { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding-inline: 22px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  transition: gap .4s var(--ease);
}
@media (hover: hover) { .cta:hover { gap: 22px; } }
.cta svg { width: 16px; height: 10px; }
[dir="rtl"] .cta svg { scale: -1 1; }

/* ==========================================================================
   Moment — Infinity: find the door
   ========================================================================== */
.find {
  min-height: 100svh;
  padding: 16vh var(--gutter) 12vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
}
.find__copy { grid-column: 1 / span 4; }
.find__title { font-size: clamp(52px, 6.4vw, 112px); margin-bottom: 26px; }
.find__sub { color: var(--ink-2); max-width: 36ch; margin: 0 0 32px; }
.find__hint { margin-top: 28px; color: var(--ink-2); }
.find__hint b { color: var(--ink); font-weight: 500; opacity: 0; transition: opacity .4s; margin-inline-start: 8px; }
.find.is-found .find__hint b { opacity: 1; }
.mats { display: flex; flex-wrap: wrap; gap: 6px; }
.mats .chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }

.wall {
  --mat: #E6E1D9;
  grid-column: 6 / span 7;
  position: relative;
  height: 78svh;
  overflow: hidden;
  perspective: 1800px;
  perspective-origin: 30% 50%;
  background: var(--mat);
  background-position: 0 0;
  cursor: pointer;
  transition: background .7s;
}
.wall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, .16), transparent 40%, rgba(0, 0, 0, .12)); }
.wall__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .04)); }
.wall__gap, .wall__leaf { position: absolute; left: 56%; bottom: 9%; height: 72%; aspect-ratio: 3 / 8; }
.wall__gap { background: radial-gradient(120% 70% at 0% 50%, #F6E6C8 0%, #8C6B47 36%, #1A1512 80%); }
.wall__leaf {
  background: var(--mat);
  background-position: calc(var(--dx, 0px) * -1) calc(var(--dy, 0px) * -1);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-out), box-shadow .6s, background .7s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07);
}
.wall__leaf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35)); opacity: 0; transition: opacity 1s; }
.wall.is-open .wall__leaf { transform: rotateY(-34deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 30px 0 60px rgba(0, 0, 0, .25); }
.wall.is-open .wall__leaf::after { opacity: 1; }
/* Hover-to-peek only with a real pointer: on touch, :hover sticks after a tap and the toggle could never close. */
@media (hover: hover) {
  .wall:hover .wall__leaf { transform: rotateY(-34deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 30px 0 60px rgba(0, 0, 0, .25); }
  .wall:hover .wall__leaf::after { opacity: 1; }
}
.wall__mark { position: absolute; left: 56%; bottom: calc(9% + 72% + 14px); color: #161514; opacity: 0; transition: opacity .5s; mix-blend-mode: multiply; }
.find.is-found .wall__mark { opacity: .7; }

.mat-paint { --mat: var(--grain) 0 0 / 220px 220px, #E6E1D9; --sw: #E6E1D9; }
.mat-micro {
  --mat: url("../assets/textures/micro.webp") 0 0 / 520px 520px, var(--grain) 0 0 / 220px 220px, #98948E;
  --sw: #98948E;
}
.mat-stone {
  --mat: url("../assets/textures/stone.webp") 0 0 / 600px 600px, #D6CDBF;
  --sw: #CBC3B6;
}
.mat-wood {
  --mat: url("../assets/textures/wood.webp") 0 0 / 400px 400px, #8A6444;
  --sw: #86603F;
}
.mat-fabric {
  --mat: repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px) 0 0 / 6px 6px, repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 3px) 0 0 / 6px 6px, var(--grain) 0 0 / 220px 220px, #B4A99B;
  --sw: #B6AB9D;
}

/* ==========================================================================
   Moment — Castle: exploded section
   ========================================================================== */
.castle { height: 260vh; position: relative; }
.castle__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: calc(var(--bar-h) + var(--safe-t) + 6vh) var(--gutter) calc(8vh + var(--safe-b));
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
  overflow: hidden;
}
.castle__copy { grid-column: 1 / span 4; }
.castle__title { font-size: clamp(52px, 6.4vw, 112px); margin-bottom: 26px; }
.castle__sub { color: var(--ink-2); max-width: 36ch; margin: 0 0 30px; }
.legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: l; }
.legend li { display: grid; grid-template-columns: 2.2em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; opacity: .3; transition: opacity .5s; }
.legend li.is-on { opacity: 1; }
.legend li span:first-child { color: var(--ink-2); }
.legend small { display: block; color: var(--ink-2); font-size: 12px; }
.castle__stage { grid-column: 6 / span 7; height: 100%; display: grid; place-items: center; perspective: 2400px; }
.stack {
  --gap: 4px;
  position: relative;
  width: min(250px, 22vw);
  aspect-ratio: 3 / 6.2;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-36deg);
}
.slab {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(var(--i) * var(--gap)));
  transform-style: preserve-3d;
}
.slab b { display: none; position: absolute; top: -2px; left: calc(100% + 12px); font: 500 11px var(--f-mono); color: var(--ink); transform: rotateZ(36deg) rotateX(-56deg); transform-origin: left top; white-space: nowrap; }
.slab--0 { border: 7px solid #6C6F72; background: rgba(108, 111, 114, .06); }
.slab--1 { border: 12px solid #84878A; background: linear-gradient(#84878A, #84878A) 0 33% / 100% 10px no-repeat, linear-gradient(#84878A, #84878A) 0 66% / 100% 10px no-repeat; }
.slab--2 { background: repeating-linear-gradient(0deg, transparent 0 34px, #5d6064 34px 37px), repeating-linear-gradient(90deg, transparent 0 34px, #5d6064 34px 37px), #A3A6A9; }
.slab--3 { background: var(--noise) 0 0 / 120px 120px, linear-gradient(135deg, #D7B866, #B9984A); box-shadow: inset 0 0 0 3px #C9CCCF; }
.slab--4 { background: radial-gradient(circle, rgba(0, 0, 0, .35) 1.2px, transparent 1.6px) 0 0 / 7px 7px, #3A3A3D; }
.slab--5 { background: var(--noise) 0 0 / 220px 220px, linear-gradient(160deg, #5E3D28, #3E271A); }
.stack__shadow { position: absolute; inset: 6%; background: rgba(0, 0, 0, .55); filter: blur(28px); transform: translateZ(-40px); }
.stack__dim { position: absolute; top: 0; bottom: 0; right: calc(100% + 34px); width: 1px; background: var(--line-strong); }

/* ==========================================================================
   Projects strip
   ========================================================================== */
.projects { position: relative; }
/* Sticky stage; app.js sets the section height to stage + horizontal walk distance. */
.projects__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.projects__track { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); padding-inline: var(--gutter); direction: ltr; will-change: transform; }
.projects__intro { flex: none; width: min(36vw, 520px); align-self: center; padding-inline-end: 4vw; }
[dir="rtl"] .projects__intro { direction: rtl; }
.projects__title { font-size: clamp(56px, 7vw, 124px); margin-bottom: 24px; }
.projects__intro p { color: var(--ink-2); max-width: 32ch; }
.proj { flex: none; width: clamp(220px, 22vw, 360px); margin: 0; }
.proj:nth-child(3n + 2) { width: clamp(260px, 30vw, 480px); }
.proj:nth-child(4n + 3) { margin-bottom: 9vh; }
.proj__img { overflow: hidden; height: 58svh; }
.proj:nth-child(3n) .proj__img { height: 46svh; }
.proj img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.proj figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; }
.proj figcaption span:last-child { font-family: "Vazirmatn", var(--f-sans); font-size: 13px; color: var(--ink-2); direction: rtl; }
.projects__end { flex: none; width: 300px; align-self: center; padding-inline-start: 4vw; }
.projects__end b { display: block; font: 100 clamp(96px, 10vw, 180px)/.9 var(--f-display); }
.projects__end p { color: var(--ink-2); }
[dir="rtl"] .projects__end { direction: rtl; }

/* ---------- Clients ---------- */
.clients { padding: 12vh var(--gutter) 16vh; border-top: 1px solid var(--line); }
.clients h2 { font-weight: 400; color: var(--ink-2); margin: 0 0 48px; }
.clients__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 40px 32px; align-items: center; }
.client { height: 62px; background: var(--ink); opacity: .62; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; transition: opacity .3s; }
@media (hover: hover) { .client:hover { opacity: 1; } }

/* ---------- Contact ---------- */
.contact { padding: 18vh var(--gutter) 0; overflow: hidden; }
.contact__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.contact__title { grid-column: 1 / span 7; font-size: clamp(72px, 12vw, 220px); }
[dir="rtl"] .contact__title { font-size: clamp(56px, 8vw, 150px); }
.contact__side { grid-column: 9 / span 4; }
.contact__side p { color: var(--ink-2); margin: 0 0 30px; max-width: 36ch; }
.contact__info { margin: 12vh 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.contact__info div { padding-block: 20px 0; padding-inline: 0 20px; }
.contact__info dd { margin: 8px 0 0; font-size: 18px; }
.contact__info a { border-bottom: 1px solid var(--line-strong); }
.outro { margin-top: 14vh; position: relative; }
.outro .wordmark { width: 100%; }
.outro__seam { position: absolute; left: 50%; top: -6vh; bottom: 0; width: 1px; background: var(--ink); transform-origin: top; }
.footer { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0 calc(64px + var(--safe-b)); color: var(--ink-2); }
.footer a { padding-block: 10px; margin-block: -10px; }

/* ==========================================================================
   Sheet (full product page)
   ========================================================================== */
.sheet {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: #161514;
  --ink: #161514;
  --bg: var(--paper);
  --ink-2: color-mix(in srgb, var(--ink) 64%, transparent);
  --ink-3: color-mix(in srgb, var(--ink) 40%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 34%, transparent);
  overflow: hidden;
}
.sheet::backdrop { background: transparent; }
.sheet[open] { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sheet__gallery { position: relative; background: #E4E0DA; display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.sheet__main { position: relative; overflow: hidden; min-height: 0; touch-action: pan-y; }
.sheet__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sheet__thumbs { display: flex; gap: 8px; padding: 14px var(--gutter); overflow-x: auto; background: var(--paper); }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--bar-h) + var(--safe-t) + 10px) var(--gutter) calc(40px + var(--safe-b)); display: flex; flex-direction: column; gap: 22px; }
.sheet__close { position: absolute; top: calc(18px + var(--safe-t)); inset-inline-end: var(--gutter); z-index: 3; height: 40px; padding-inline: 18px; border-radius: 99px; background: #161514; color: var(--paper); display: inline-flex; align-items: center; gap: 10px; font-size: 13px; }
.sheet__name { font-size: clamp(64px, 7vw, 132px); }
.sheet__nav { margin-top: auto; display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 18px; gap: 12px; }
.sheet__nav button { display: flex; flex-direction: column; gap: 4px; text-align: start; }
.sheet__nav button:last-child { text-align: end; align-items: flex-end; }
.sheet__nav b { font: 300 26px/1 var(--f-display); text-transform: uppercase; }
.sheet__arrows { position: absolute; bottom: 16px; inset-inline-end: 16px; display: flex; gap: 6px; z-index: 2; }
.sheet__arrows button { width: 40px; height: 40px; border-radius: 50%; background: rgba(243, 240, 235, .9); color: #161514; display: grid; place-items: center; }
.sheet .specs div { grid-template-columns: 9em 1fr; }
.sheet__goto { align-self: flex-start; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; font-size: 14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .product__media, .product--flip .product__media { grid-column: 1 / span 7; }
  .product__info, .product--flip .product__info { grid-column: 8 / span 5; }
  .product--flip .product__media { grid-column: 6 / span 7; }
  .product--flip .product__info { grid-column: 1 / span 5; }
  .find__copy, .castle__copy { grid-column: 1 / span 5; }
  .wall, .castle__stage { grid-column: 6 / span 7; }
}

@media (max-width: 820px) {
  :root { --bar-h: 60px; }
  .bar { grid-template-columns: auto 1fr; }
  .bar__meta { display: none; }
  .bar__logo { width: 76px; }
  .seam { display: none; }
  .hud { bottom: calc(16px + var(--safe-b)); }

  .hero { --dh: min(50svh, 460px); --cx: 50%; --cy: 44%; }
  [dir="rtl"] .hero { --cx: 50%; }
  .hero__copy { padding-bottom: calc(4vh + var(--safe-b)); }
  .hero__title { font-size: clamp(52px, 15vw, 84px); max-width: none; }
  [dir="rtl"] .hero__title { font-size: clamp(38px, 10.5vw, 60px); }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__sub { font-size: 14px; }
  .hero__scroll { display: none; }

  .manifesto { padding-top: 14vh; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .facts div:nth-child(2n) { border-inline-end: 0; }

  .index__head { grid-template-columns: minmax(0, 1fr); }
  .index__tools { align-items: flex-start; }
  .chips, .toggle { justify-content: flex-start; }
  .corridor {
    height: 62svh;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .corridor::-webkit-scrollbar { display: none; }
  .door, .door:hover, .door:focus-visible { flex: 0 0 46vw; scroll-snap-align: start; }
  .door.is-out { display: none; }
  .door__name, .door:hover .door__name { writing-mode: horizontal-tb; rotate: 0deg; font-size: 26px; white-space: normal; }
  .door__more { display: none; }

  .chapter { grid-template-columns: minmax(0, 1fr); min-height: 90svh; }
  .chapter__n, .chapter__body { grid-column: 1; }
  .chapter__n { font-size: 46vw; }

  .product, .find { grid-template-columns: minmax(0, 1fr); padding-top: 12vh; padding-bottom: 10vh; }
  .product__media, .product__info, .product--flip .product__media, .product--flip .product__info { grid-column: 1; grid-row: auto; }
  .product__info { position: static; }
  .product__name { font-size: clamp(56px, 18vw, 96px); }
  .frame { aspect-ratio: 4 / 5; max-height: 74svh; }
  .loupe { display: none; }
  .specs div, .sheet .specs div { grid-template-columns: 7.5em 1fr; }

  .find__copy, .wall { grid-column: 1; }
  .wall { height: 64svh; }

  .castle { height: 220vh; }
  .castle__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: 0; }
  .castle__copy, .castle__stage { grid-column: 1; }
  .castle__sub { display: none; }
  .legend { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .legend li { padding: 5px 0; font-size: 12px; }
  .legend small { display: none; }
  .castle__title { font-size: 52px; margin-bottom: 0; }
  .castle__stage { place-items: end center; padding-bottom: 6vh; }
  .stack { width: 26vw; }
  .slab b { font-size: 9px; }

  .projects__intro { width: 78vw; }
  .proj, .proj:nth-child(3n + 2) { width: 68vw; }
  .proj__img, .proj:nth-child(3n) .proj__img { height: 48svh; }

  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__title, .contact__side { grid-column: 1; }
  .contact__title { font-size: 22vw; }
  .contact__info { grid-template-columns: 1fr; }
  .contact__info div { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .footer { flex-direction: column; }

  .sheet[open] { grid-template-columns: 1fr; grid-template-rows: 52dvh 1fr; }
  .sheet__body { padding-top: 24px; }
}

/* Phones: the fixed page counter gets a soft backing so it never sits on top of body copy */
@media (max-width: 820px) {
  .hud { padding: 5px 10px; margin-inline-start: -10px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 86%, transparent); }
}

/* Touch screens: every control at least ~44px tall */
@media (pointer: coarse) {
  .bar__logo { position: relative; }
  .bar__logo::after { content: ""; position: absolute; inset: -8px -6px; }
  .toggle .chip { height: 40px; }
  .bar__btn, .bar__lang { height: 44px; }
  .bar__lang { width: 48px; }
  .chip { height: 44px; padding-inline: 16px; }
  .sheet__close { height: 44px; }
  .sheet__arrows button { width: 44px; height: 44px; }
  /* Larger hit areas without moving the underlines */
  .sheet__goto, .contact__info a { position: relative; }
  .sheet__goto::after, .contact__info a::after { content: ""; position: absolute; inset: -12px -4px; }
}

/* Reduced motion, or the animation library failed to load: everything static and readable */
.reduced .hero { height: 100svh; }
.reduced .projects { height: auto; }
.reduced .projects__pin { position: relative; }
.reduced .frame { clip-path: none; }
.reduced .frame > img, .reduced .proj img { transform: none; }
.reduced .frame--louver > img { opacity: 1; }
.reduced .door__leaf, .reduced .hero__enter, .reduced .loader { display: none; }
.reduced .manifesto__text .word { opacity: 1; }
.reduced .projects__pin { height: auto; overflow-x: auto; padding-block: 12vh; }
.reduced .castle { height: auto; }
.reduced .castle__pin { position: relative; height: auto; min-height: 100svh; }
.reduced .stack { --gap: 40px; }
.reduced .legend li { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .frame { clip-path: none; }
  .frame > img, .proj img, .door__img img { transform: none; }
  .manifesto__text .word { opacity: 1; }
  .castle { height: auto; }
  .castle__pin { position: relative; height: auto; min-height: 100svh; }
  .stack { --gap: 40px; }
  .legend li { opacity: 1; }
}