/* ==========================================================================
   ENHU — site stylesheet, built from direction C5 (13 November 2026).
   Everything above the "BUILD ADDITIONS" section is C5's style.css as approved,
   with only the font files changed to the subset WOFF2 copies and the
   hard-coded filter rules moved into the Piese page (generated from the data).
   A new structure (Bernatz home and projects, Noa listing, Remington piece,
   Quarters filters) in C2's tokens: Fraunces + DM Sans, cream ground,
   green ink, navy as the one accent. Smaller display type, more ground.
   One stylesheet for every page.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces-var.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces-Italic-var.woff2") format("woff2");
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-Italic-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* --- Tokens (C2, unchanged) ----------------------------------------------- */

:root {
  --cream: #F7F3E2;
  --paper: #FFFAF0;
  --ink: #2C351B;
  --muted: #5F644D;
  --navy: #0E1244;
  --cream-70: rgb(247 243 226 / 0.7);
  --line: rgb(44 53 27 / 0.2);
  --line-navy: rgb(247 243 226 / 0.3);

  --t-13: 0.8125rem;
  --t-15: 0.9375rem;
  --t-body: clamp(1.0625rem, 1.039rem + 0.095vw, 1.125rem);
  --t-lead: clamp(1.25rem, 1.204rem + 0.19vw, 1.375rem);
  --t-h3: clamp(1.625rem, 1.579rem + 0.19vw, 1.75rem);
  --t-h2: clamp(2.25rem, 1.693rem + 2.286vw, 3.75rem);
  --t-h1: clamp(2.625rem, 1.729rem + 4.19vw, 5.5rem);
  --t-num: clamp(2rem, 1.72rem + 1.14vw, 2.75rem);

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --margin: clamp(1.25rem, 5vw, 6rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --sec: clamp(6rem, 12vw, 11rem);
  --after: clamp(2.5rem, 5vw, 5rem);
  --pad: clamp(1.25rem, 3.3vw, 3rem);
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.25rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- C3 adjustments: lighter and smaller than C2 ------------------------- */

:root {
  --t-h1: clamp(2rem, 1.5rem + 2vw, 3.5rem);          /* 32 → 56, never above 64 */
  --t-h2: clamp(1.625rem, 1.45rem + 0.75vw, 2.125rem); /* 26 → 34: section titles stay near h3 */
  --t-name: clamp(1.25rem, 1.17rem + 0.3vw, 1.4375rem);/* 20 → 23: piece and project names */
  --t-ui: 0.875rem;                                    /* 14: menu, filters, small UI */
  --head-h: 3.5rem;                                    /* header bar on phones */
  --sec: clamp(5rem, 11vw, 10rem);
  --drop: clamp(3rem, 9vw, 9rem);                      /* Noa: the right column starts about a third lower */
}
/* desktop: the wordmark (top left) and the stacked menu (top right) are fixed in the corners, and
   the content keeps clear of both: the side margin is the corner inset + the wordmark's width + a gap,
   the same on both sides, so the content sits centred between two quiet gutters */
:root { --edge: 1.25rem; --logo-w: 8.25rem; }
@media (min-width: 1000px) {
  :root {
    --edge: clamp(1.5rem, 2.5vw, 2.5rem);
    --logo-w: clamp(8.5rem, 11.5vw, 11rem);           /* 136 → 176 px wide, 19 → 24 px tall */
    --margin: calc(var(--edge) + var(--logo-w) + clamp(1.5rem, 2.5vw, 2.5rem));
    --head-h: 0rem;
  }
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--sans);
  font-optical-sizing: auto;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

.page { overflow-x: clip; }

img, svg { max-width: 100%; }
img { display: block; height: auto; }

h1, h2, h3, p, figure, blockquote, dl, dt, dd, ol, ul, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-weight: 300;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.014em; font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144; }
h2 { font-size: var(--t-h2); line-height: 1.16; letter-spacing: -0.006em; font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 96; }
h3 { font-size: var(--t-name); line-height: 1.25; font-weight: 360; font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40; }

p { text-wrap: pretty; }

a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

strong { font-weight: 600; }
.nb { white-space: nowrap; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--margin); top: -5rem; z-index: 60;
  background: var(--navy); color: var(--cream); padding: 0.85rem 1.1rem;
  font-size: var(--t-15);
}
.skip:focus { top: 0.5rem; }

/* anchors land below the sticky header */
[id] { scroll-margin-top: calc(var(--head-h) + 1.5rem); }
/* a section with top padding lands its heading, not its padding, under the header */
.sec[id] { scroll-margin-top: calc(var(--head-h) + 1.5rem - var(--sec)); }
@media (min-width: 1000px) { [id] { scroll-margin-top: var(--edge); } .sec[id] { scroll-margin-top: calc(var(--edge) - var(--sec)); } }

/* --- Type helpers -------------------------------------------------------- */

.eyebrow {
  font: 500 var(--t-13)/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.lead {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40;
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-lead);
  line-height: 1.45;
}
.small { font-size: var(--t-15); line-height: 1.5; color: var(--muted); }
.credit, .caption { font-size: var(--t-13); line-height: 1.45; color: var(--muted); }
.measure { max-width: 34em; }

.wrap { padding-inline: var(--margin); max-width: 120rem; margin-inline: auto; }
main { padding-bottom: 0; }
.sec { padding-top: var(--sec); }

.more { font-weight: 500; display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
.more::after { content: "\00a0→"; }

/* --- Header -------------------------------------------------------------- */

/* phones and tablets: a cream bar with the wordmark and Meniu */
.site-head { position: sticky; top: 0; z-index: 40; background: var(--cream); }
.head-bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--head-h); padding-inline: var(--margin); }
.logo { position: relative; z-index: 2; display: block; padding-block: 0.85rem; margin-block: -0.85rem; }
.logo img { width: var(--logo-w); height: auto; }

.nav { display: none; }
.nav a, .menu-sheet a, .lang a { color: var(--ink); text-decoration-color: transparent; }
.nav a:hover, .menu-sheet a:hover, .lang a:hover { text-decoration-color: var(--navy); }
.lang { color: var(--muted); white-space: nowrap; }
.lang [aria-current] { color: var(--navy); }

.menu { position: static; }
.menu summary {
  position: relative; z-index: 2;
  list-style: none; cursor: pointer;
  min-height: 2.75rem; min-width: 2.75rem;
  display: flex; align-items: center; justify-content: flex-end;
  font: 500 var(--t-15)/1 var(--sans);
  margin-right: -0.25rem; padding-right: 0.25rem;
}
.menu summary::-webkit-details-marker { display: none; }
.menu .m-close, .menu[open] .m-open { display: none; }
.menu[open] .m-close { display: inline; }
.menu-sheet {
  position: fixed; inset: 0; z-index: 1;
  background: var(--cream);
  padding: calc(var(--head-h) + 2rem) var(--margin) 2rem calc(var(--margin) + 1.5rem);
  overflow-y: auto;
}
.menu-sheet ul { display: grid; }
.menu-sheet li a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 3.25rem;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 72;
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.2;
}
.menu-sheet .lang { margin-top: var(--s4); font-size: var(--t-15); font-weight: 500; }
.menu-sheet .lang a, .menu-sheet .lang span { display: inline-flex; align-items: center; min-height: 2.75rem; font: 500 var(--t-15)/1.2 var(--sans); }
.lang a, .lang span { display: inline-block; padding: 0.75rem 0.5rem; margin-inline: -0.25rem; }
.lang a:first-child, .lang span:first-child { margin-left: -0.5rem; }

/* desktop: no bar. The wordmark is fixed top left and the Bernatz stacked menu fixed top right,
   at all times; both sit in the side gutters, so nothing passes under them */
@media (min-width: 1000px) {
  .site-head { position: static; background: none; }
  .head-bar { display: block; height: 0; padding: 0; }
  .logo { position: fixed; z-index: 45; left: var(--edge); top: var(--edge); margin: 0; padding: 0; }
  .menu { display: none; }
  .nav {
    display: block;
    position: fixed; z-index: 45; right: var(--edge); top: calc(var(--edge) - 0.3rem);
    text-align: right;
    font: 400 var(--t-ui)/1.6 var(--sans);
  }
  .nav li a { position: relative; display: inline-block; padding-block: 0.05rem; }
  .nav [aria-current="page"] { color: var(--navy); }
  .nav .lang { margin-top: 0.55rem; }
  .nav .lang a, .nav .lang span { padding: 0.05rem 0.2rem; margin: 0; }
  .nav .lang span:last-child, .nav .lang a:last-child { padding-right: 0; }
}

/* --- Current-page marker (options on icons.html and eye-icons.html; the site uses mk-eye) --------- */

.mk-line [aria-current="page"]::before,
.mk-ring [aria-current="page"]::before,
.mk-symbol [aria-current="page"]::before,
.mk-dash [aria-current="page"]::before { content: ""; position: absolute; top: 50%; pointer-events: none; }
/* a short navy hairline, like the rules elsewhere on the site */
.mk-line [aria-current="page"]::before { right: calc(100% + 0.5rem); width: 1rem; height: 1px; background: var(--navy); }
/* an open ring */
.mk-ring [aria-current="page"]::before { right: calc(100% + 0.5rem); width: 0.45rem; height: 0.45rem; margin-top: -0.25rem; border: 1px solid var(--navy); border-radius: 50%; }
/* the ENHU brush symbol, small */
.mk-symbol [aria-current="page"]::before { right: calc(100% + 0.4rem); width: 0.8rem; height: 0.8rem; margin-top: -0.42rem; background: url("../brand/logo-symbol.png") center / contain no-repeat; }
/* a Fraunces arrow */
.mk-dash [aria-current="page"]::before { content: "→"; right: calc(100% + 0.4rem); transform: translateY(-50%); font-family: var(--serif); font-weight: 300; color: var(--navy); line-height: 1; }
.menu-sheet .mk-line [aria-current="page"]::before { width: 1.25rem; right: calc(100% + 0.6rem); }
/* the site marker, chosen by Sasha on 13 November: "Pleoapă și pupilă", an upper lid and the pupil beneath it, in navy */
.mk-eye [aria-current="page"]::before { content: ""; position: absolute; top: 50%; right: calc(100% + 0.5rem); width: 1.45rem; height: 0.85rem; margin-top: -0.5rem; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2014%22%3E%3Cpath%20d%3D%22M1.5%209%20Q12%20-1%2022.5%209%22%20fill%3D%22none%22%20stroke%3D%22%230E1244%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.4%22%20r%3D%223.1%22%20fill%3D%22%230E1244%22/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
/* in the phone menu the list is left-aligned, so the eye follows the word instead of sitting on the screen edge */
.nav .on-dark a, .nav .on-dark span, .nav .lang.on-dark { color: var(--cream); }
.nav .on-dark a[aria-current="page"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2014%22%3E%3Cpath%20d%3D%22M1.5%209%20Q12%20-1%2022.5%209%22%20fill%3D%22none%22%20stroke%3D%22%23F7F3E2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.4%22%20r%3D%223.1%22%20fill%3D%22%23F7F3E2%22/%3E%3C/svg%3E"); }
.nav li, .nav .lang { transition: color 200ms; }
.logo { transition: opacity 250ms ease; }
.logo.is-faded { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .logo, .nav li, .nav .lang { transition: none; } }
.menu-sheet .mk-eye [aria-current="page"]::before { width: 1.75rem; height: 1rem; margin-top: -0.55rem; right: auto; left: calc(100% + 0.7rem); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--navy);
  border-radius: 0;
  background: var(--navy);
  color: var(--cream);
  font: 500 var(--t-15)/1.2 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn:hover { background: transparent; color: var(--navy); }
.btn--line { background: transparent; color: var(--navy); }
.btn--line:hover { background: var(--navy); color: var(--cream); }

.on-navy { background: var(--navy); color: var(--cream); }
.on-navy a:not(.btn), .on-navy .eyebrow { color: var(--cream); }
.on-navy .small, .on-navy .credit { color: var(--cream-70); }
.on-navy :focus-visible { outline-color: var(--cream); }
.on-navy .btn { background: var(--cream); border-color: var(--cream); color: var(--navy); }
.on-navy .btn:hover { background: transparent; color: var(--cream); }
.on-navy .btn--line { background: transparent; color: var(--cream); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, .btn, .f-opts label { transition: background-color 160ms, color 160ms, border-color 160ms, text-decoration-color 160ms; }
}

/* --- Forms (from C2, quieter) ------------------------------------------- */

.form { display: grid; row-gap: var(--s3); }
.field label { display: block; margin-bottom: 0.35rem; font-size: var(--t-15); line-height: 1.3; font-weight: 500; }
.field input, .field textarea {
  display: block; width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
  font: 400 var(--t-body)/1.4 var(--sans);
}
.field textarea { min-height: 5.5rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.on-navy .field input, .on-navy .field textarea { padding: 0.6rem 0.8rem; border: 1px solid var(--cream); color: var(--cream); }
.on-navy .field input:focus-visible, .on-navy .field textarea:focus-visible { outline-color: var(--cream); }

.consent { display: block; position: relative; font-size: var(--t-15); line-height: 1.5; }
.consent input {
  -webkit-appearance: none; appearance: none;
  display: inline-block; vertical-align: middle;
  width: 2.75rem; height: 2.75rem;
  margin: -0.85rem -0.2rem -0.75rem -0.75rem;
  border: 0; border-radius: 0;
  background:
    linear-gradient(var(--cream), var(--cream)) center / 1.125rem 1.125rem no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 1.25rem 1.25rem no-repeat;
  cursor: pointer;
}
.consent input:checked { background: linear-gradient(var(--navy), var(--navy)) center / 1.25rem 1.25rem no-repeat; }
.consent input:checked + span::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.3rem;
  width: 0.75rem; height: 0.75rem; background: var(--cream);
  clip-path: polygon(12% 50%, 0 63%, 37% 100%, 100% 24%, 87% 12%, 36% 73%);
  pointer-events: none;
}
.consent input:focus-visible { outline-offset: -0.55rem; }
.consent a { display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; }
.on-navy .consent input {
  background:
    linear-gradient(var(--navy), var(--navy)) center / 1.125rem 1.125rem no-repeat,
    linear-gradient(var(--cream), var(--cream)) center / 1.25rem 1.25rem no-repeat;
}
.on-navy .consent input:checked { background: linear-gradient(var(--cream), var(--cream)) center / 1.25rem 1.25rem no-repeat; }
.on-navy .consent input:checked + span::before { background: var(--navy); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* one-row sign-up: field and button, consent beneath */
.signup { display: grid; row-gap: var(--s2); max-width: 36rem; }
.signup .btn { width: 100%; }
@media (min-width: 560px) {
  .signup { grid-template-columns: 1fr auto; column-gap: var(--s2); align-items: end; }
  .signup .btn { width: auto; }
  .signup .consent { grid-column: 1 / -1; }
}

/* a navy panel with a form: head on the left, form on the right from 900 px */
.panel { margin-inline: calc(-1 * var(--margin)); padding: clamp(2.5rem, 5vw, 4.5rem) var(--margin); }
.panel-head h2 { color: var(--cream); }
.panel-head p { margin-top: var(--s2); max-width: 26em; }
.panel-head a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
.panel-form { margin-top: var(--s4); }
.panel .form .btn { width: 100%; }
@media (min-width: 560px) { .panel .form .btn { width: auto; } }
@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) {
  .panel { margin-inline: 0; padding-inline: var(--pad); display: grid; grid-template-columns: 5fr 1fr 6fr; align-items: start; }
  .panel-head { grid-column: 1; }
  .panel-form { grid-column: 3; margin-top: 0.25rem; }
}

/* --- Footer: full width, navy, edge to edge -------------------------------------------- */
/* the showroom visit and the newsletter, then the small things; the fixed corners turn cream
   (menu) and fade (wordmark) while navy is behind them */

.site-foot { margin-top: var(--sec); padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); font-size: var(--t-15); line-height: 1.6; }
.foot-top { display: grid; row-gap: var(--after); padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line-navy); }
.foot-visit { display: grid; row-gap: var(--s2); align-content: start; }
.foot-big { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem); line-height: 1.2; max-width: 16em; }
.foot-visit .cta { justify-self: start; color: var(--cream); }
.news { display: grid; row-gap: var(--s2); align-content: start; }
@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) {
  .foot-top { grid-template-columns: 5fr 1fr 6fr; }
  .foot-top .news { grid-column: 3; }
}
.news-inv { font-family: var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40; font-weight: 300; font-size: var(--t-name); line-height: 1.35; max-width: 28em; }
.news-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s1) var(--s3); max-width: 40rem; }
.news-row input {
  flex: 1 1 15rem; min-width: 0; min-height: 2.75rem;
  padding: 0.5rem 0; border: 0; border-bottom: 1px solid var(--cream-70); border-radius: 0;
  background: transparent; color: var(--cream); font: 400 var(--t-body)/1.4 var(--sans);
}
.news-row input::placeholder { color: var(--cream-70); opacity: 1; }
.news-row input:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.news-btn {
  min-height: 2.75rem; padding: 0.5rem 0; border: 0; background: none; cursor: pointer;
  color: var(--cream); font: 500 var(--t-15)/1.2 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.news-btn::after { content: "\00a0→"; }
.news-btn:hover { text-decoration-thickness: 2px; }
.news .consent { font-size: var(--t-13); color: var(--cream-70); max-width: 40rem; min-height: 2.75rem; }
.news .consent a { padding-block: 0.85rem; margin-block: -0.85rem; }
.foot { display: grid; row-gap: var(--s4); }
.foot-line { font-size: var(--t-name); line-height: 1.3; max-width: 20em; }
.foot-a p + p { margin-top: var(--s1); }
.foot-b { display: grid; row-gap: var(--s1); }
.site-foot a { display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; }
@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) {
  .foot { grid-template-columns: 1fr auto; column-gap: var(--after); align-items: end; }
  .foot-b { text-align: right; }
}

/* --- Modal: one component for every request ------------------------------- */
/* with script it is a <dialog> opened with showModal(); without, the same panel shows via :target */

.modal {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: var(--s2); border: 0;
  background: rgb(14 18 68 / 0.45);
  overflow-y: auto; color: var(--ink);
}
.modal[open], html:not(.js) .modal:target { display: grid; place-items: center; }
.modal::backdrop { background: transparent; }
.modal-panel {
  position: relative; width: min(31rem, 100%); margin: auto;
  background: var(--cream); padding: clamp(1.5rem, 4vw, 2.5rem);
}
.modal-close {
  position: absolute; top: 0.6rem; right: 0.9rem;
  display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.25rem;
  font: 500 var(--t-13)/1 var(--sans); letter-spacing: 0.06em; color: var(--muted); text-decoration: none;
}
.modal-close:hover { color: var(--navy); }
.modal-t { font-size: var(--t-name); line-height: 1.3; padding-right: 4.5rem; }
.modal-ctx { color: var(--navy); }
.modal-line { margin-top: var(--s1); font-size: var(--t-15); color: var(--muted); max-width: 30em; }
.modal .form { margin-top: var(--s3); row-gap: var(--s2); }
.modal .field input, .modal .field textarea { min-height: 2.75rem; }
.modal .field textarea { min-height: 4.5rem; }
.modal .btn { width: 100%; }
@media (min-width: 560px) { .modal .btn { width: auto; } }

/* a small text call to action that opens a modal */
.cta { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; font-weight: 500; }
.cta::after { content: "\00a0→"; }

/* ==========================================================================
   SHARED: the first block of a page clears the hanging menu on desktop
   ========================================================================== */

.first { padding-top: clamp(2rem, 6vw, 4rem); }
@media (min-width: 1000px) { .first { padding-top: calc(var(--edge) + 4.5rem); } .pc.first { padding-top: calc(var(--edge) + 2.25rem); } }

.page-title { display: grid; row-gap: var(--s2); max-width: 40rem; }
.page-title p { color: var(--muted); max-width: 30em; }
.page-title .proj-intro { max-width: 34em; }

.sec-head { display: grid; row-gap: var(--s2); max-width: 40rem; margin-bottom: var(--after); }
.sec-head .eyebrow { margin-bottom: -0.25rem; }

/* ==========================================================================
   PIECES: the Noa stagger, used on home and the collection
   ========================================================================== */

.tiles { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(2.75rem, 5vw, 4.5rem); }

.tile {
  width: var(--w1, 100%);
  justify-self: var(--j1, start);
  /* never wider than the crop, never taller than about 560 px (portrait) or 420 px (landscape) */
  max-width: min(var(--iw, 100%), calc(var(--cap, 35rem) * var(--r, 1)));
}
.tile figure { display: block; }
.tile-img { position: relative; background: var(--paper); }
.tile-img img { width: 100%; }
.tile-badge {
  position: absolute; left: 0; top: 0;
  padding: 0.3rem 0.6rem 0.35rem;
  background: var(--cream);
  color: var(--ink);
  font: 500 var(--t-13)/1.2 var(--sans);
  letter-spacing: 0.02em;
}
.tile-badge--sold, .tile-badge--held { color: var(--muted); }
.tile figcaption { margin-top: 0.8rem; display: grid; row-gap: 0.15rem; }
.tile-name { font: 400 var(--t-15)/1.4 var(--sans); color: var(--ink); }
.tile-no { color: var(--muted); margin-right: 0.35em; font-variant-numeric: lining-nums; }
.tile-price { font-size: var(--t-15); line-height: 1.5; font-variant-numeric: lining-nums; }
.tile-st { font-size: var(--t-13); line-height: 1.5; color: var(--muted); }
.tile-src { margin-top: 0.2rem; }
.tile--sold .tile-price span:first-child { color: var(--muted); }
.tile-link { display: block; color: inherit; text-decoration: none; }
.tile-link .tile-name { text-decoration: none; }
.tile-link:hover .tile-name { text-decoration-color: var(--navy); }
.tile-go { margin-top: 0.15rem; font-size: var(--t-13); line-height: 1.5; color: var(--navy); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.25em; }
.tile-link:hover .tile-go { text-decoration-color: var(--navy); }
.tile-go::after { content: "\00a0→"; }

/* slots: four positions that repeat. --w1/--j1 phones, --w2/--j2/--m2 two columns */
.tile:nth-child(4n+1) { --w1: 84%; --j1: start; --w2: 70%; --j2: start; --m2: 0; }
.tile:nth-child(4n+2) { --w1: 84%; --j1: end;   --w2: 100%; --j2: end; --m2: var(--drop); }
.tile:nth-child(4n+3) { --w1: 100%; --j1: start; --w2: 100%; --j2: start; --m2: 0; }
.tile:nth-child(4n+4) { --w1: 84%; --j1: end;   --w2: 70%; --j2: end; --m2: var(--drop); }

@media (min-width: 700px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 7vw, 8rem); align-items: start; }
  /* the right column is moved down without growing the rows, so the two columns overlap like Noa's */
  .tiles { padding-bottom: var(--drop); }
  .tile { width: var(--w2, 100%); justify-self: var(--j2, start); transform: translateY(var(--m2, 0)); }
}
@media (min-width: 1200px) {
  .tiles { max-width: 82rem; }
}

/* home: the six pieces */
.pieces-more { margin-top: var(--after); }


/* ==========================================================================
   COLLECTION
   ========================================================================== */

.coll-title { margin-bottom: var(--after); }

/* the control line: count and the filter toggle */
.ctl { position: relative; margin-bottom: var(--after); }
.filt { border-block: 1px solid var(--line); }
.filt > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 2.75rem;
  font: 500 var(--t-ui)/1.2 var(--sans);
}
.filt > summary::-webkit-details-marker { display: none; }
.count { color: var(--muted); font-weight: 400; margin-right: auto; }
.count::before { content: "12 piese"; }
.filt-label { color: var(--navy); display: inline-flex; align-items: center; gap: 0.45rem; }
.filt-label::after {
  content: ""; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem;
  border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor;
  transform: rotate(45deg);
}
.filt[open] .filt-label::after { transform: rotate(225deg); margin-top: 0.2rem; }
.filt-current { color: var(--ink); }
.filt[open] .filt-current { display: none; }

.f-line { padding: 0.4rem 0 0.8rem; border-top: 1px solid var(--line); display: grid; row-gap: 0.25rem; }
.f-opts { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; }
.f-opts .grp { display: flex; flex-wrap: wrap; align-items: center; }
.f-opts label, .f-ord label {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0 0.15rem;
  font: 500 var(--t-13)/1.2 var(--sans);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.45em;
}
.f-opts label:hover, .f-ord label:hover { color: var(--ink); }
.f-opts .grp label + input + label::before, .f-row label + input + label::before {
  content: "·"; display: inline-block; width: 1.4rem; text-align: center; color: var(--line); text-decoration: none;
}
.f-opts input:checked + label, .f-ord input:checked + label { color: var(--navy); text-decoration-color: var(--navy); }
.f-opts input:focus-visible + label, .f-ord input:focus-visible + label { outline: 2px solid var(--navy); outline-offset: 2px; }
.grp--status { margin-left: auto; }
.grp--status::before { content: ""; display: block; width: 1px; height: 1rem; background: var(--line); margin: 0 1.25rem 0 1rem; }
.f-ord { display: none; align-items: center; flex-wrap: wrap; }
.f-row { display: flex; align-items: center; }
.js .f-ord { display: flex; }
.f-ord legend { float: left; margin-right: 0.75rem; font: 400 var(--t-13)/2.75rem var(--sans); color: var(--muted); }
.f-ord label { text-transform: none; letter-spacing: 0.01em; font-size: var(--t-ui); }

@media (max-width: 699.98px) {
  /* each group is one row; a row that does not fit scrolls sideways under a soft edge */
  .f-opts .grp, .f-row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    width: 100%; padding-right: 1.5rem;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent);
  }
  .f-opts .grp::-webkit-scrollbar, .f-row::-webkit-scrollbar { display: none; }
  .f-opts .grp, .f-ord, .f-row { column-gap: 0.85rem; }
  .f-opts label { letter-spacing: 0.06em; }
  .f-opts .grp label + input + label::before, .f-row label + input + label::before { display: none; }
  .grp--status { margin-left: 0; width: 100%; }
  .grp--status::before { display: none; }
  .f-ord legend { width: 100%; float: none; line-height: 1.5; margin: 0.5rem 0 0; }
}

@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) {
  .f-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 2rem; padding: 0.2rem 0; }
  .f-opts { flex: 1 1 auto; }
}

/* --- Filtering with radios and :has(): generated per build from the piece data,
   see src/_includes/partials/filter-css.njk ------------------------------ */

/* ==========================================================================
   HOME
   ========================================================================== */

.story { display: grid; row-gap: var(--after); }
.story-text { display: grid; row-gap: var(--s3); align-content: start; }
.story-text .belief { font-size: var(--t-body); max-width: 30em; }
.story-text .lead-in { color: var(--muted); max-width: 30em; }
.story-photo img { width: 100%; max-width: 54rem; }
.story-photo figcaption { margin-top: 0.75rem; }
@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) {
  /* the photograph's top meets the headline's cap height (Fraunces caps start 0.209 em below the line box) */
  .story { grid-template-columns: 7fr 1fr 5fr; align-items: start; }
  .story-photo { grid-column: 1; grid-row: 1; margin-top: calc(var(--t-h1) * 0.209); }
  .story-text { grid-column: 3; grid-row: 1; }
}

/* the founder's words, alone and centred */
.quote { max-width: 34rem; margin: 0 auto; text-align: center; }
.quote blockquote { font-family: var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40; font-style: italic; font-weight: 300; font-size: var(--t-lead); line-height: 1.45; color: var(--ink); }
.quote figcaption { margin-top: var(--s2); font-size: var(--t-13); letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }


/* ==========================================================================
   PROJECTS: Bernatz, one large photograph each, alternating sides
   ========================================================================== */

.works { display: grid; row-gap: clamp(4rem, 10vw, 10rem); }
.work { display: grid; row-gap: var(--s3); }
.work-photo { display: block; }
.work-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.work--p .work-photo img { aspect-ratio: 800 / 1455; object-position: 0% 50%; max-width: 30rem; }   /* the TV at the right edge stays out of frame */
.work-text { display: grid; row-gap: var(--s1); align-content: end; }
.work-text .n { font: 500 var(--t-13)/1.3 var(--sans); letter-spacing: 0.12em; color: var(--navy); }
.work-h { font-size: var(--t-name); line-height: 1.25; font-weight: 360; font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40; }
.work-text h3 a, .work-text .work-h a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; color: var(--ink); text-decoration-color: transparent; text-underline-offset: 0.18em; }
.work-text h3 a:hover, .work-text .work-h a:hover { text-decoration-color: var(--navy); }
.work-text p { max-width: 24em; }
.work-text .credit { margin-top: var(--s1); }
.work-text .more { margin-top: var(--s2); font-size: var(--t-15); justify-self: start; }

@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) {
  .work { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .work--l .work-photo { grid-column: 1 / 9; grid-row: 1; }
  .work--l .work-text  { grid-column: 9 / 13; grid-row: 1; padding-left: var(--gap); }
  .work--r .work-photo { grid-column: 5 / 13; grid-row: 1; }
  .work--r .work-text  { grid-column: 1 / 5; grid-row: 1; padding-right: var(--gap); }
  .work--p .work-photo { grid-column: 2 / 6; }
  .work--p .work-text { grid-column: 7 / 12; }
  .work--s .work-photo { grid-column: 1 / 7; }        /* a smaller source stays at half width */
  .work--rs .work-photo { grid-column: 7 / 13; }
  .work--rs .work-text { grid-column: 1 / 6; }
  .work--s .work-text { grid-column: 8 / 13; }
}

/* ==========================================================================
   PIECE: the Remington layout
   ========================================================================== */

.pc { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "stack" "side"; row-gap: var(--s3); }

/* phones and tablets: a swipe strip, the next photograph peeks */
.stack { grid-area: stack; position: relative; }
.strip {
  display: flex; gap: 0.75rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin);
  scroll-padding-inline: var(--margin);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip figure { flex: 0 0 82%; scroll-snap-align: start; max-width: 34rem; }
.strip img, .strip svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (min-width: 900px) and (max-width: 1199.98px) {
  /* tablet and small desktop: the slides stop at about 55 % of the screen height, so name, price and Rezervă show in the first screen */
  .strip figure { flex-basis: min(82%, 55vh); }
}
@media (min-width: 1000px) {
  /* the fixed menu and wordmark sit in the gutters: the strip stays inside the content margins */
  .strip { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}

/* the to-scale drawing: one more image in the stack, on paper */
.strip .scale-fig svg { background: var(--paper); aspect-ratio: 1 / 1; }
.scale-fig .ink * { vector-effect: non-scaling-stroke; }
.scale-fig .dim { vector-effect: non-scaling-stroke; }
.scale-fig text { font-family: var(--sans); font-weight: 500; fill: var(--navy); }
.scale-fig .t-title { font-family: var(--serif); font-weight: 300; fill: var(--ink); }
.scale-fig .t-sub { font-weight: 400; fill: var(--muted); }

.side { grid-area: side; }
.buy { display: flex; flex-direction: column; }
.buy > * { order: 2; }
.buy-meta { order: 0; font-size: var(--t-15); color: var(--muted); }
.buy-meta a { color: var(--muted); text-decoration-color: transparent; display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
.buy-meta a:hover { text-decoration-color: currentColor; }
.buy h1 .pc-no { font-family: var(--sans); font-size: 0.5em; font-weight: 500; letter-spacing: 0.02em; color: var(--navy); vertical-align: 0.32em; margin-right: 0.15em; }
.buy h1 { order: 1; margin-top: 0.3rem; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); line-height: 1.12; }
.buy-desc { order: 6; margin-top: var(--after); max-width: 34em; }
.buy-price { margin-top: var(--s2); }
.buy-price .amount { font-family: var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40; font-weight: 300; font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem); line-height: 1.2; color: var(--navy); font-variant-numeric: lining-nums; }
.buy-lines { margin-top: 0.25rem; font-size: var(--t-15); line-height: 1.5; display: grid; row-gap: 0.1rem; }
.buy-lines .st { font-weight: 500; }
.buy-act { margin-top: var(--s3); display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.buy-act .btn { padding-inline: 0.8rem; }
.buy-alt { margin-top: var(--s3); font-size: var(--t-15); line-height: 1.5; color: var(--muted); }
.buy-alt a { display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; font-weight: 500; }
.buy-alt p + p { margin-top: 0.2rem; }

.rec { order: 7; margin-top: var(--s4); border-top: 1px solid var(--line); }
.rec > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 2.75rem;
  font: 500 var(--t-ui)/1.2 var(--sans);
}
.rec > summary::-webkit-details-marker { display: none; }
.rec > summary::after {
  content: ""; width: 0.4rem; height: 0.4rem; margin: -0.2rem 0.3rem 0 0;
  border-right: 1.25px solid var(--navy); border-bottom: 1.25px solid var(--navy); transform: rotate(45deg);
}
.rec[open] > summary::after { transform: rotate(225deg); margin-top: 0.2rem; }
.rec dl > div { display: grid; grid-template-columns: 11rem 1fr; column-gap: var(--s2); padding: 0.45rem 0; border-top: 1px solid var(--line); font-size: var(--t-15); line-height: 1.45; }
.rec dt { color: var(--muted); }
.rec .small { margin-top: 0.6rem; font-size: var(--t-13); }
@media (max-width: 459.98px) { .rec dl > div { grid-template-columns: 1fr; row-gap: 0.1rem; } }

@media (min-width: 1200px) {
  .pc {
    grid-template-columns: minmax(0, 58fr) minmax(0, 6fr) minmax(0, 36fr);
    grid-template-areas: "stack . side";
    row-gap: 0;
  }
  /* left: the photographs (and the drawing) stacked large, scrolling with the page */
  .strip { display: grid; row-gap: var(--s4); overflow: visible; scroll-snap-type: none; }
  .strip figure { max-width: var(--iw, 100%); }          /* never wider than the photograph's pixels */
  .strip img { aspect-ratio: var(--ar, 4 / 5); }
  .strip .sq img { aspect-ratio: 4 / 5; }
  .strip .scale-fig { max-width: none; }
  .strip .scale-fig svg { aspect-ratio: 4 / 5; }

  /* right: the panel, anchored to the bottom of the viewport */
  .side { display: flex; flex-direction: column; justify-content: flex-end; }
  .buy {
    position: sticky; bottom: var(--edge);
    max-height: calc(100vh - 2 * var(--edge));
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .buy > *, .buy h1 { order: 0; }
  .buy-desc { margin-top: var(--s2); max-width: none; font-size: 1rem; line-height: 1.6; }
  .buy-price { margin-top: var(--s3); }
  .rec dl > div { padding: 0.3rem 0; font-size: var(--t-ui); grid-template-columns: 9.5rem 1fr; }
  .buy-act { grid-template-columns: auto auto; justify-content: start; }
  .rec { margin-top: var(--s3); }
}

/* below the stack: the sections, in order */
.pc-after .sec-split { display: grid; row-gap: var(--s4); }
@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) {
  .pc-after .sec-split { grid-template-columns: 5fr 1fr 6fr; align-items: start; }
  .pc-after .sec-split > :last-child { grid-column: 3; }
}
.pc-after h2 + p, .pc-after .sec-split p { margin-top: var(--s2); max-width: 28em; }


.seen { display: grid; row-gap: var(--s3); color: var(--ink); text-decoration: none; }
.seen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.seen h3 > span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.seen:hover h3 > span { text-decoration-color: var(--navy); }
.seen h3 > span::after { content: "\00a0→"; color: var(--navy); }
@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) { .seen { grid-template-columns: 5fr 1fr 6fr; align-items: end; } .seen > div:first-child { grid-column: 1; } .seen > div:last-child { grid-column: 3; grid-row: 1; } }

/* Din aceeași categorie: three pieces, then the "Cauți altceva?" box at the same size */
.tile-ask .ask {
  aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s2);
  padding: clamp(1rem, 2.5vw, 1.75rem);
}
.ask h3 { font-size: var(--t-name); line-height: 1.2; color: var(--cream); }
.ask p { font-size: var(--t-15); line-height: 1.45; color: var(--cream-70); margin-top: var(--s1); }
.ask .cta { align-self: flex-start; color: var(--cream); font-size: var(--t-15); }
@media (max-width: 559.98px) { .ask h3 { font-size: 1.125rem; } .ask p { font-size: var(--t-13); } .ask .cta { font-size: var(--t-13); } }
/* Din aceeași categorie: an even row, as Remington ends */
.row4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--gap); }
.row4 .tile { width: 100%; justify-self: stretch; margin-top: 0; transform: none; max-width: none; }
.row4 .tile-img img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) { .row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   PROJECT
   ========================================================================== */

.crumbs { font-size: var(--t-15); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration-color: transparent; display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; }
.crumbs a:hover { text-decoration-color: currentColor; }

.proj-head { display: grid; row-gap: var(--s3); }
.proj-head .lead { max-width: 32em; }
.facts { font-size: var(--t-15); display: grid; row-gap: 0.15rem; }
.facts dt, .facts dd { display: inline; }
.facts dt { color: var(--muted); }
.facts dt::after { content: ": "; }
@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) {
  .proj-head { grid-template-columns: 7fr 1fr 4fr; align-items: end; }
  .proj-head > .proj-head-a { grid-column: 1; }
  .proj-head > .facts { grid-column: 3; padding-bottom: 0.4rem; }
}

/* the gallery: large photographs, small captions, more ground */
.gal { display: grid; row-gap: clamp(3rem, 7vw, 7rem); }
.gal figure img { width: 100%; }
.gal .crop { aspect-ratio: var(--ar, 3 / 2); object-fit: cover; object-position: var(--pos, 50% 50%); }
.gal .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.gal .two .crop { --ar: 4 / 5; }
.gal .story-p { max-width: 34em; }
@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) {
  .gal { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .gal > * { grid-column: 1 / -1; }
  .gal .g-wide { grid-column: 1 / 11; }
  .gal .g-wide-r { grid-column: 3 / 13; }
  .gal .two { grid-column: 3 / 11; }
  .gal .two--r { grid-column: 4 / 13; }
  .gal .story-p { grid-column: 5 / 12; }
  .gal .story-p--l { grid-column: 2 / 9; }
}
@media (max-width: 559.98px) { .gal .two { grid-template-columns: 1fr; } .gal .two .crop { --ar: 4 / 3; } }

/* Markers on the gallery photographs themselves, only where a sample piece appears:
   a navy circle with a thin cream ring (holds on dark and light photographs), 44 px target.
   The label is the button's neighbour, so it holds a real link; it opens on hover, on focus
   and, with script, on the first tap or Enter. */
.gal figure.has-spots { position: relative; container-type: inline-size; }
.spots { position: absolute; inset: 0; pointer-events: none; }
.spot { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; pointer-events: auto; }
.spot-btn {
  position: absolute; left: -1.375rem; top: -1.375rem;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.spot-n {
  position: relative; display: block;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 1.5px var(--cream);
}
.spot-n::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 0.6rem; margin: -0.36rem 0 0 -0.5rem; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2014%22%3E%3Cpath%20d%3D%22M1.5%209%20Q12%20-1%2022.5%209%22%20fill%3D%22none%22%20stroke%3D%22%23F7F3E2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.4%22%20r%3D%223.1%22%20fill%3D%22%23F7F3E2%22/%3E%3C/svg%3E") center / contain no-repeat; }
.spot-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 0; }
.spot-btn:focus-visible .spot-n { box-shadow: 0 0 0 1.5px var(--cream), 0 0 0 3.5px var(--navy); }
.spot-label {
  position: absolute; left: 1.1rem; top: 0.6rem; z-index: 5;
  opacity: 0; clip-path: inset(50%); pointer-events: none;
  width: max-content; max-width: min(15rem, 55cqw);
  padding: 0.45rem 0.7rem 0.55rem;
  background: var(--cream); color: var(--ink);
  font: 400 var(--t-15)/1.35 var(--sans); text-align: left;
}
.spot-label b { display: block; font-weight: 500; }
.spot-label .go { display: inline-block; padding-block: 0.75rem; margin-block: -0.5rem -0.75rem; color: var(--navy); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.spot--up .spot-label { top: auto; bottom: 0.6rem; }
.spot--left .spot-label { left: auto; right: 1.1rem; }
/* between 40 % and 60 % across, the label opens centred under (or over) the marker, so it stays inside the photograph */
.spot--mid .spot-label { left: 0; top: 1.15rem; transform: translateX(-50%); }
.spot--mid.spot--up .spot-label { top: auto; bottom: 1.15rem; }
/* on a phone-width photograph the labels get a little smaller, so they stay inside it */
@container (max-width: 480px) {
  .spot-label { max-width: min(12.5rem, 50cqw); padding: 0.35rem 0.55rem 0.45rem; font-size: var(--t-13); line-height: 1.35; }
  .spot-label .go { padding-block: 0.9rem; margin-block: -0.65rem -0.9rem; }
}
.spot:hover .spot-label, .spot:focus-within .spot-label, .spot.is-open .spot-label { opacity: 1; clip-path: none; pointer-events: auto; }
.spot:hover, .spot:focus-within, .spot.is-open { z-index: 6; }
.gal-cta { max-width: 34em; }

/* Alte proiecte: the other three, side by side */
.others { display: grid; gap: var(--s4) var(--gap); }
.others a { display: grid; row-gap: var(--s2); color: var(--ink); text-decoration: none; }
.others img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.others h3 { font-size: var(--t-15); font-family: var(--sans); font-weight: 400; line-height: 1.4; }
.others--2 { max-width: 52rem; }
@media (min-width: 700px) { .others.others--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.others h3 span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.others a:hover h3 span { text-decoration-color: var(--navy); }
@media (min-width: 700px) { .others { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   SERVICES
   ========================================================================== */

.svc-index { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: var(--s3); font-size: var(--t-15); }
.svc-index a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; text-decoration-color: transparent; }
.svc-index a:hover { text-decoration-color: var(--navy); }
.svc-index a::before { content: attr(data-n); margin-right: 0.5rem; color: var(--muted); font-weight: 400; }

/* the hairline sits on the content, never across the gutters */
.svc-grid { display: grid; row-gap: var(--after); border-top: 1px solid var(--line); padding-top: var(--s4); }
.svc-text { display: grid; row-gap: var(--s2); align-content: start; }
.svc-text h2 { margin-top: var(--s1); }
.svc-text p { max-width: 32em; }
.svc-text ul { display: grid; row-gap: 0.1rem; margin-top: var(--s1); }
.svc-text li { padding-left: 1.4rem; position: relative; }
.svc-text li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.75rem; height: 1px; background: var(--navy); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s2); }
.ctas .cta { margin-block: -0.75rem; }
.svc-photo img { width: 100%; }
@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) {
  .svc-grid { grid-template-columns: 5fr 1fr 6fr; align-items: start; }
  .svc-grid > .svc-text { grid-column: 1; grid-row: 1; }
  .svc-grid > .svc-photo { grid-column: 3; grid-row: 1; }
  .svc--r .svc-grid { grid-template-columns: 6fr 1fr 5fr; }
  .svc--r .svc-grid > .svc-text { grid-column: 3; }
  .svc--r .svc-grid > .svc-photo { grid-column: 1; }
}
.works--page { margin-top: var(--after); }
/* Servicii keeps a shorter rhythm: the first section sits close under the index, and phones step by --after */
.svc-first { padding-top: var(--after); }
@media (max-width: 899.98px) { .svc-sec { padding-top: var(--after); } }
.svc-h3 { margin-top: var(--s3); font-family: var(--sans); font-size: var(--t-13); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.svc-cum { display: grid; row-gap: var(--s2); max-width: 36em; margin-top: var(--after); padding-top: var(--s4); border-top: 1px solid var(--line); }
.svc-cum .cta { justify-self: start; margin-top: var(--s1); }


/* ==========================================================================
   BUILD ADDITIONS (step 4). Rules for pages and states C5 did not mock up,
   written only with C5's tokens and existing patterns.
   ========================================================================== */

/* responsive images: <picture> adds no box, so C5's img rules apply as before */
picture { display: contents; }
/* the footer newsletter and its thank-you line share one grid cell */
.news-wrap { display: contents; }
.form-done:focus { outline: none; }
.news-done { color: var(--cream); font-size: var(--t-15); align-self: center; }
.modal .form-done { display: grid; row-gap: var(--s2); }
.modal .form-done[hidden] { display: none; }

/* Stage A: the pieces are announced, not shown */
.teaser { display: grid; row-gap: var(--s2); max-width: 32em; }
.teaser-cats { font: 500 var(--t-13)/1.5 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.teaser-line { max-width: 32em; }
.teaser--page { max-width: none; row-gap: var(--after); border-top: 1px solid var(--line); padding-top: var(--s4); }
.teaser--page .teaser-text { display: grid; row-gap: var(--s2); align-content: start; max-width: 32em; }
.teaser-photo img { width: 100%; }
@media (min-width: 900px) and (max-width: 999.98px), (min-width: 1200px) {
  .teaser--page { grid-template-columns: 6fr 1fr 5fr; align-items: start; }
  .teaser--page .teaser-photo { grid-column: 1; grid-row: 1; }
  .teaser--page .teaser-text { grid-column: 3; grid-row: 1; }
}

/* Piese: the archive link closes the list */
.archive-end { display: grid; row-gap: var(--s1); margin-top: var(--after); padding-top: var(--s4); border-top: 1px solid var(--line); max-width: 40rem; }

/* piece page: more than one project in "Văzută în" */
.seen-list { display: grid; row-gap: var(--after); }

/* Servicii: the quiet link to each section's own page */
.svc-more { margin-top: var(--s1); font-size: var(--t-15); }

/* Închiriere: four kinds, numbered like the projects */
.kinds { list-style: none; padding: 0; display: grid; gap: var(--s4) var(--gap); }
.kinds li { display: grid; row-gap: var(--s1); align-content: start; border-top: 1px solid var(--line); padding-top: var(--s3); }
.kinds .n { font: 500 var(--t-13)/1.3 var(--sans); letter-spacing: 0.12em; color: var(--navy); }
.kinds p { max-width: 26em; }
.kinds .more { margin-top: var(--s1); font-size: var(--t-15); }
.kinds-note { margin-top: var(--after); }
@media (min-width: 700px) { .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kinds { max-width: 60rem; }

/* Despre: the two syllables of the name, set large as on the deck slide */
.name-story { display: grid; gap: var(--s4) var(--gap); }
.name-story > div { display: grid; row-gap: var(--s1); border-top: 1px solid var(--line); padding-top: var(--s3); }
.name-story dt { font-family: var(--serif); font-weight: 300; font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144; font-size: var(--t-h1); line-height: 1; color: var(--navy); letter-spacing: 0.02em; }
.name-story dd { margin: 0; max-width: 26em; }
.name-close { margin-top: var(--after); max-width: 34em; font-family: var(--serif); font-weight: 300; font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40; font-size: var(--t-lead); line-height: 1.45; }
.name-values { margin-top: var(--s3); font-family: var(--sans); font-size: var(--t-body); line-height: 1.6; color: var(--muted); }
@media (min-width: 700px) { .name-story { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 60rem; } }
.about-index { margin-top: 0; }

/* Contact */
.contact-grid { display: grid; row-gap: var(--s3); margin-top: var(--after); border-top: 1px solid var(--line); padding-top: var(--s4); max-width: 40rem; }
.contact-list { display: grid; row-gap: var(--s2); }
.contact-list > div { display: grid; row-gap: 0.1rem; }
.contact-list dt { font: 500 var(--t-13)/1.5 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.contact-list dd { margin: 0; font-family: var(--serif); font-weight: 300; font-size: var(--t-name); font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40; }
.contact-list a { display: inline-block; padding-block: 0.4rem; }
.contact-line { max-width: 32em; }

/* Termeni, Confidențialitate (draft) */
.legal-body { max-width: 40rem; margin-top: var(--after); display: grid; row-gap: var(--s2); }
.legal-body h2 { font-size: var(--t-name); margin-top: var(--s4); }
.legal-body h2:first-child { margin-top: 0; }
.legal-draft { color: var(--navy); font-size: var(--t-15); border-left: 2px solid var(--navy); padding-left: var(--s2); }
mark.ph { background: rgb(14 18 68 / 0.08); color: var(--navy); padding: 0 0.2em; }

/* Filters without :has() (older Safari and Firefox): script fallback, see enhu.js */
.no-has .tile[hidden] { display: none; }

/* Stage A teaser on Piese: C5's navy "Cauți altceva?" box, so the sourcing request exists before the pieces do */
.teaser-ask { display: grid; row-gap: var(--s1); margin-top: var(--s4); padding: clamp(1rem, 2.5vw, 1.75rem); max-width: 26rem; }
.teaser-ask .ask-h { font-size: var(--t-name); line-height: 1.2; color: var(--cream); }
.teaser-ask .cta { justify-self: start; margin-top: var(--s1); }

/* MENU AND PAGE TRANSITIONS (launch, 13 Nov) */
/* Behaviour after patrickbernatz.com, drawn in ENHU's own terms: colours fade calmly on hover,
   ENHU's eye opens on the current menu item, a small navy ring follows a fine pointer while the
   next page loads, and pages change by opacity alone. Script: the last section of enhu.js;
   the eye and a tiny pre-paint script: partials/header.njk. Everything still works without
   script, and nothing moves under prefers-reduced-motion. */

:root { --calm: cubic-bezier(0.215, 0.61, 0.355, 1); --calm-io: cubic-bezier(0.45, 0, 0.55, 1); }

/* hover: colour fades to navy over 600 ms; C5's underline fades in with it. Nothing moves. */
.nav a:hover, .menu-sheet a:hover, .lang a:hover { color: var(--navy); }
.nav .on-dark a:hover { color: var(--cream); text-decoration-color: var(--cream); }

/* the wordmark is a picture, so its navy is a mask of the same file faded over it (already cached) */
.logo::after {
  content: ""; position: absolute; inset: 0.85rem 0; pointer-events: none;
  background: var(--navy);
  -webkit-mask: url("/assets/brand/logo-wordmark.png") left center / contain no-repeat;
          mask: url("/assets/brand/logo-wordmark.png") left center / contain no-repeat;
  opacity: 0;
}
.logo:hover::after { opacity: 1; }
@media (min-width: 1000px) { .logo::after { inset: 0; } }

/* the current-page eye: one inline drawing per item (header.njk) replaces C5's ::before marker,
   at exactly its size and place; hidden unless current, or the item just clicked */
.mk-eye [aria-current="page"]::before { content: none; }
.mk-eye .eye {
  position: absolute; top: 50%; right: calc(100% + 0.5rem);
  width: 1.45rem; height: 0.85rem; margin-top: -0.5rem;
  color: var(--navy); overflow: visible; pointer-events: none;
  opacity: 0;
}
.menu-sheet .mk-eye .eye { width: 1.75rem; height: 1rem; margin-top: -0.55rem; right: auto; left: calc(100% + 0.7rem); }
.mk-eye [aria-current="page"] > .eye, .mk-eye .is-going > .eye { opacity: 1; }
.mk-eye .is-was > .eye { opacity: 0; }
.nav .on-dark .eye { color: var(--cream); }
.eye-lid { transform-box: fill-box; transform-origin: 50% 100%; vector-effect: non-scaling-stroke; }
.eye-pupil { transform-box: fill-box; transform-origin: 50% 50%; }
/* the clicked item takes the current colour at once; the old one returns to ink */
@media (min-width: 1000px) {
  .nav .is-going { color: var(--navy); }
  .nav .is-was { color: var(--ink); }
  .nav .on-dark .is-going, .nav .on-dark .is-was { color: var(--cream); }
}

/* the pointer loader (made by enhu.js only for a fine pointer with hover) */
.enhu-loader {
  position: fixed; left: 0; top: 0; z-index: 70;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  color: var(--navy); pointer-events: none;
  opacity: 0; will-change: transform, opacity;
}
.enhu-loader.on-dark { color: var(--cream); }
.enhu-loader svg { display: block; width: 16px; height: 16px; }
.enhu-loader.is-on { opacity: 1; }
@media not all and (hover: hover) and (pointer: fine) { .enhu-loader { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* 600 ms ease-out cubic on every menu colour, the language switch and the footer corners */
  .nav a, .menu-sheet a, .lang a, .lang span, .nav li, .nav .lang, .mk-eye .eye {
    transition: color 600ms var(--calm), text-decoration-color 600ms var(--calm);
  }
  .logo { transition: opacity 600ms var(--calm); }
  .logo::after { transition: opacity 600ms var(--calm); }

  /* the eye opens: the lid rises from a closed line into its arc, then the pupil appears */
  .js .mk-eye [aria-current="page"] .eye-lid, .js .mk-eye .is-going .eye-lid { animation: enhu-lid-open 760ms var(--calm) 120ms both; }
  .js .mk-eye [aria-current="page"] .eye-pupil, .js .mk-eye .is-going .eye-pupil { animation: enhu-pupil-in 320ms var(--calm) 600ms both; }
  .js .mk-eye .is-going .eye-lid { animation-delay: 0ms; }
  .js .mk-eye .is-going .eye-pupil { animation-delay: 480ms; }
  /* already opened on the page before (or the same item): it stays still */
  .eye-held .mk-eye [aria-current="page"]:not(.is-was) .eye-lid,
  .eye-held .mk-eye [aria-current="page"]:not(.is-was) .eye-pupil { animation: none; }
  /* opened by the click on the page before: the opening carries on from where it was */
  .eye-cont .mk-eye [aria-current="page"]:not(.is-was) .eye-lid { animation-delay: calc(0ms - var(--eye-ago, 0ms)); }
  .eye-cont .mk-eye [aria-current="page"]:not(.is-was) .eye-pupil { animation-delay: calc(480ms - var(--eye-ago, 0ms)); }
  /* the one being left closes and fades */
  .mk-eye .is-was > .eye { transition: opacity 420ms var(--calm-io), color 600ms var(--calm); }
  .js .mk-eye .is-was .eye-lid { animation: enhu-lid-close 420ms var(--calm-io) both; }
  .js .mk-eye .is-was .eye-pupil { animation: enhu-pupil-out 200ms var(--calm-io) both; }

  /* the loader: fades in 300 ms (after a short wait, so quick pages never show it), turns every 2 s */
  .enhu-loader { transition: opacity 300ms var(--calm); }
  .enhu-loader.is-on { transition-delay: 150ms; }
  .enhu-loader.no-fade { transition: none; }
  .enhu-loader svg { animation: enhu-turn 2s linear infinite; }

  /* page changes, cross-document view transitions: the page fades out, the next fades in;
     the wordmark and menu keep their place and only cross-fade where they differ */
  @view-transition { navigation: auto; }
  ::view-transition { background: #F7F3E2; }
  ::view-transition-old(root) { animation: enhu-out 400ms var(--calm-io) both; }
  ::view-transition-new(root) { animation: enhu-in 500ms var(--calm) 220ms both; }
  ::view-transition-group(enhu-logo), ::view-transition-group(enhu-nav), ::view-transition-group(enhu-head) { animation-duration: 0s; }
  ::view-transition-old(enhu-logo), ::view-transition-old(enhu-nav), ::view-transition-old(enhu-head) { animation: enhu-out 300ms var(--calm) both; }
  ::view-transition-new(enhu-logo), ::view-transition-new(enhu-nav), ::view-transition-new(enhu-head) { animation: enhu-in 300ms var(--calm) both; }
  @media (min-width: 1000px) {
    .logo { view-transition-name: enhu-logo; }
    .nav { view-transition-name: enhu-nav; }
  }
  @media (max-width: 999.98px) {
    .site-head { view-transition-name: enhu-head; }
    .site-head:has(.menu[open]) { view-transition-name: none; }   /* an open sheet fades with the page */
  }

  /* page changes, scripted fallback (enhu.js): out 350 ms, in 500 ms; the corners stay */
  .fx-in main, .fx-in .site-foot { animation: enhu-in 500ms var(--calm) both; }
  .fx-out main, .fx-out .site-foot, .fx-out .menu-sheet { opacity: 0; transition: opacity 350ms var(--calm-io); }
}

@keyframes enhu-lid-open { from { transform: scaleY(0.03); } to { transform: scaleY(1); } }
@keyframes enhu-lid-close { from { transform: scaleY(1); } to { transform: scaleY(0.03); } }
@keyframes enhu-pupil-in { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes enhu-pupil-out { from { transform: scale(1); opacity: 1; } to { transform: scale(0.2); opacity: 0; } }
@keyframes enhu-turn { to { transform: rotate(360deg); } }
@keyframes enhu-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes enhu-in { from { opacity: 0; } to { opacity: 1; } }

/* reduced motion: the eye simply shown, no fades, no loader */
@media (prefers-reduced-motion: reduce) {
  .eye-lid, .eye-pupil, .enhu-loader svg { animation: none !important; }
  .mk-eye .eye, .logo, .logo::after { transition: none !important; }
  .enhu-loader { display: none !important; }
  .fx-in main, .fx-in .site-foot { animation: none !important; }
  .fx-out main, .fx-out .site-foot, .fx-out .menu-sheet { opacity: 1 !important; }
}