/* ============================================================
   ATELIER / NORD
   Tokens
   ============================================================ */
:root{
  /* raw brand values */
  --plaster:#F7F5F0;
  --slate:#1A1918;
  --terracotta:#C47253;
  --bronze:#8C7D6B;
  --taupe:#3D3B37;
  --ebony:#11100F;
  --oatmeal:#8E8A83;

  /* semantic: light */
  --bg:#F7F5F0;
  --bg-sunk:#F0ECE3;
  --ink:#11100F;
  --body:#3D3B37;
  --muted:#8E8A83;
  --meta:#8C7D6B;
  --rule:rgba(61,59,55,.16);
  --rule-soft:rgba(61,59,55,.09);
  --accent:#C47253;
  --accent-quiet:rgba(196,114,83,.14);

  --chrome:rgba(247,245,240,.75);
  --chrome-edge:rgba(196,114,83,.14);
  --chrome-shadow:0 18px 44px -28px rgba(17,16,15,.45);

  /* fixed inverse surfaces, identical in both themes */
  --inv-bg:#1A1918;
  --inv-ink:#F4F1EA;
  --inv-body:#CFC8BC;
  --inv-muted:#8E8A83;
  --inv-rule:rgba(255,255,255,.12);
  --inv-chrome:rgba(26,25,24,.85);
  --inv-chrome-edge:rgba(255,255,255,.08);

  /* Instrument Serif is Latin only. Cormorant Garamond sits behind it for
     Cyrillic: browsers fall back per glyph, so the Russian pages get a real
     display serif with true italics instead of Georgia, and English pages
     never download it (Google Fonts subsets by script). */
  --serif:"Instrument Serif","Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  --gutter:clamp(20px,4.4vw,72px);
  --nav-h:70px;
  --stack:clamp(84px,11vw,168px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141312;
    --bg-sunk:#1A1918;
    --ink:#F4F1EA;
    --body:#D6D0C5;
    --muted:#8E8A83;
    --meta:#A2937F;
    --rule:rgba(255,255,255,.14);
    --rule-soft:rgba(255,255,255,.07);
    --accent:#CF7E5E;
    --accent-quiet:rgba(207,126,94,.16);
    --chrome:rgba(26,25,24,.82);
    --chrome-edge:rgba(255,255,255,.08);
    --chrome-shadow:0 18px 44px -28px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#141312;
  --bg-sunk:#1A1918;
  --ink:#F4F1EA;
  --body:#D6D0C5;
  --muted:#8E8A83;
  --meta:#A2937F;
  --rule:rgba(255,255,255,.14);
  --rule-soft:rgba(255,255,255,.07);
  --accent:#CF7E5E;
  --accent-quiet:rgba(207,126,94,.16);
  --chrome:rgba(26,25,24,.82);
  --chrome-edge:rgba(255,255,255,.08);
  --chrome-shadow:0 18px 44px -28px rgba(0,0,0,.8);
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;color:var(--ink);text-wrap:balance;letter-spacing:-.012em;line-height:1.02}
p{margin:0}
a{color:inherit;text-decoration:none}
canvas{display:block;width:100%;height:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent-quiet);color:var(--ink)}

.shell{max-width:1560px;margin:0 auto;padding-inline:var(--gutter)}

.label{
  font-size:10.5px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--meta);font-family:var(--sans);
}
.label--inv{color:var(--inv-muted)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ============================================================
   Russian pages. Cormorant is lighter and has a smaller x-height than
   Instrument Serif, so headings take weight 500; it is also wider, so the
   hero headline drops a step to stay on two lines as the English does.
   ============================================================ */
html[lang="ru"] h1,html[lang="ru"] h2,html[lang="ru"] h3,
html[lang="ru"] .work__name,html[lang="ru"] .stage__name,html[lang="ru"] .piece__name,
html[lang="ru"] .palette__name,html[lang="ru"] .faq__q,html[lang="ru"] .card h2,
html[lang="ru"] .project__next-link,html[lang="ru"] .matline__grid b,html[lang="ru"] .hero__index .row b{font-weight:500}
html[lang="ru"] .hero__h1{font-size:clamp(33px,5.8vw,82px);letter-spacing:-.02em;line-height:.94}
html[lang="ru"] .section__title{letter-spacing:-.005em}

/* ============================================================
   Chrome / navigation
   ============================================================ */
/* The hero photograph now runs to the top of the page behind this bar, so the
   chrome is always on — transparent-at-top would drop dark nav text straight
   onto the image. On the cream left-hand side the frosting is barely visible;
   over the photograph it reads as intentional. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease);
  background:var(--chrome);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid transparent;
}
/* Where the blur is unsupported, fall back to a near-opaque bar rather than a
   75%-alpha one over a photograph. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:rgba(247,245,240,.97)}
}
.nav.is-lifted{
  border-bottom:1px solid var(--chrome-edge);
  box-shadow:var(--chrome-shadow);
}
.nav__in{
  display:flex;align-items:center;gap:32px;
  height:70px;
}
.wordmark{display:flex;align-items:baseline;gap:9px;font-family:var(--serif);font-size:19px;letter-spacing:.02em;color:var(--ink)}
.wordmark span{font-size:10.5px;font-family:var(--sans);letter-spacing:.24em;color:var(--meta);text-transform:uppercase}
.nav__links{margin-left:auto;display:flex;gap:30px;align-items:center}
.nav__links a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--body);position:relative;padding-block:6px}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--accent);
  transition:right .45s var(--ease);
}
.nav__links a:hover::after{right:0}
.nav__links a[aria-current="page"]{color:var(--ink)}
/* Language switch: last item in the list, set off by a hairline on desktop */
.nav__lang{font-size:11px;letter-spacing:.16em;color:var(--muted);padding-left:22px;border-left:1px solid var(--rule)}
.nav__lang:hover{color:var(--ink)}
.nav__lang::after{display:none}
.nav__links a[aria-current="page"]::after{right:0;background:var(--rule)}
.nav__cta{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--rule);border-radius:999px;padding:9px 18px;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
  white-space:nowrap;
}
.nav__cta:hover{background:var(--accent);border-color:var(--accent);color:#FBF8F3}

/* Menu toggle: hidden on desktop, where the three links sit inline. */
.nav__toggle{
  display:none;background:none;border:0;padding:8px;margin:-8px 0 -8px -8px;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;
}
.nav__toggle span{display:block;width:20px;height:1px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav.is-open .nav__toggle span:first-child{transform:translateY(3px) rotate(45deg)}
.nav.is-open .nav__toggle span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* Below 860px: three links collapse into a dropdown opened by the toggle.
   The CTA stays outside that collapse (see markup) so it's always reachable
   — this used to hide ALL non-CTA links with no way to open them again,
   which left mobile visitors unable to reach Projects or About at all now
   that they're separate pages rather than anchors on one long page. */
@media(max-width:860px){
  .nav__toggle{display:flex}
  .nav__cta{margin-left:auto}
  .nav__links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--chrome);
    backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
    border-bottom:1px solid var(--chrome-edge);
    padding:4px var(--gutter) 14px;
  }
  .nav.is-open .nav__links{display:flex}
  .nav__links a{padding-block:13px;border-top:1px solid var(--rule-soft)}
  .nav__links a::after{display:none}
  .nav__lang{padding-left:0;border-left:0}
}
/* keep the CTA on one line on phones — wrapped, it dominates the bar */
@media(max-width:480px){
  .nav__cta{padding:8px 14px;font-size:11px;letter-spacing:.06em}
  .nav__in{gap:14px}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;padding-top:0}
.hero__split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.80fr);
  gap:clamp(30px,4.6vw,78px);
  align-items:start;
  padding-block:0 clamp(20px,2.4vw,40px);
}
.hero__col{display:flex;flex-direction:column}

/* Only the type clears the fixed nav. The image runs up behind it, so the
   right-hand column starts flush with the top of the page — no dead corner
   above the photograph. */
.hero__type{
  padding-top:calc(var(--nav-h) + clamp(34px,4.4vw,64px));
}

/* portrait plate: bleeds to the top and right edges. Height is derived from
   the column's own width via aspect-ratio (matching the source photograph,
   3:4) rather than stretched to match the type column — stretching coupled
   the crop to how many lines the headline wraps to, which got extreme at
   in-between widths (880-1300px) where text wraps onto more lines while the
   column itself is narrow. If the type column ends up taller, the image
   simply ends above it against the shared page background — a clean edge,
   not a bad crop. */
.hero__portrait{
  position:relative;
  aspect-ratio:3/4;
  min-height:360px;
  margin-right:calc(var(--gutter) * -1);
  overflow:hidden;
  background:var(--bg-sunk);
}
.hero__plate{position:absolute;inset:-9% 0 -9% 0;will-change:transform}
.hero__plate picture{display:block;width:100%;height:100%}
.hero__plate img,.hero__plate canvas{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(26,25,24,.24) 0%,rgba(26,25,24,0) 26%,rgba(26,25,24,0) 62%,rgba(26,25,24,.46) 100%),
    linear-gradient(180deg,rgba(196,114,83,.07),rgba(196,114,83,.07));
}
.hero__stamp{
  position:absolute;left:20px;right:20px;bottom:18px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
}
.hero__stamp .label{color:rgba(244,241,234,.78)}
@media(max-width:880px){
  .hero__split{grid-template-columns:1fr;gap:34px;align-items:stretch}
  /* image leads, full-bleed and running to the very top; the type follows */
  .hero__type{padding-top:clamp(26px,5vw,38px)}
  .hero__portrait{
    order:-1;
    /* The desktop aspect-ratio must be cleared here. With a definite height
       set below and width:auto, the ratio derives the WIDTH from the height
       (406px x 3/4 = 305px) instead of letting the image stretch, which left
       it 70px short of the right edge of the phone. */
    aspect-ratio:auto;
    width:auto;
    min-height:0;
    height:clamp(330px,50vh,460px);
    margin-inline:calc(var(--gutter) * -1);
  }
}
.hero__h1{
  font-size:clamp(44px,6.9vw,94px);
  line-height:.88;letter-spacing:-.026em;
}
.hero__h1 em{font-style:italic;color:var(--accent)}
.hero__lede{
  max-width:44ch;font-size:clamp(15px,1.28vw,18px);color:var(--body);
  margin-top:26px;
}
.hero__index{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule);margin-top:clamp(28px,3.4vw,50px)}
.hero__index .row{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rule-soft);
}
.hero__index .row b{font-weight:400;font-family:var(--serif);font-size:19px;color:var(--ink)}
.hero__index .row span{font-size:11px;letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section{padding-block:var(--stack)}
.section__head{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:start;
  padding-top:22px;border-top:1px solid var(--rule);
}
@media(max-width:760px){.section__head{grid-template-columns:1fr;gap:16px}}
.section__title{font-size:clamp(30px,4.2vw,58px);line-height:1.02;max-width:25ch}
.section__note{max-width:66ch;color:var(--body);font-size:15px;margin-top:18px}

/* ============================================================
   Education split (About page): text left, photo right — fills the
   dead space a text-only section__head leaves at wide viewports.
   ============================================================ */
.education__split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(30px,4.2vw,64px);align-items:start;
  padding-top:22px;border-top:1px solid var(--rule);
}
.education__split .section__head{border-top:0;padding-top:0}
.education__shot{aspect-ratio:3/2;overflow:hidden;background:var(--bg-sunk)}
.education__shot img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){
  .education__split{grid-template-columns:1fr}
  .education__shot{order:-1;aspect-ratio:16/10}
}

/* ============================================================
   Works: asymmetric editorial grid
   ============================================================ */
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(22px,3.4vw,56px) clamp(18px,2.6vw,44px);margin-top:clamp(46px,6vw,92px)}
.work{grid-column:span 12;display:flex;flex-direction:column;gap:16px}
.work__plate{position:relative;overflow:hidden;background:var(--bg-sunk)}
.work__plate picture{display:block;width:100%;height:100%}
.work__plate canvas,.work__plate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.work:hover .work__plate canvas,.work:hover .work__plate img{transform:scale(1.028)}
.work__cap{display:grid;grid-template-columns:1fr auto;gap:12px 20px;align-items:baseline;border-top:1px solid var(--rule);padding-top:12px}
.work__name{font-family:var(--serif);font-size:clamp(21px,2vw,30px);color:var(--ink);line-height:1.08}
.work__year{font-size:11px;letter-spacing:.16em;color:var(--muted);font-variant-numeric:tabular-nums}
.work__meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:12px;color:var(--muted);letter-spacing:.02em}
.work__meta i{font-style:normal;color:var(--meta)}
.work__spec{grid-column:1/-1;max-width:46ch;font-size:14.5px;color:var(--body)}
.work__link{
  grid-column:1/-1;justify-self:start;margin-top:2px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent-quiet);padding-bottom:3px;
  transition:border-color .4s var(--ease)
}
.work:hover .work__link{border-color:var(--accent)}

@media(min-width:900px){
  .work--a{grid-column:1/8}
  .work--b{grid-column:9/13;margin-top:132px}
  .work--c{grid-column:2/12}
  .work--d{grid-column:1/6;margin-top:26px}
  .work--e{grid-column:7/13}
}
.work--a .work__plate{aspect-ratio:4/5}
.work--b .work__plate{aspect-ratio:3/4}
.work--c .work__plate{aspect-ratio:16/7}
.work--d .work__plate{aspect-ratio:1/1}
.work--e .work__plate{aspect-ratio:5/4}
@media(max-width:899px){
  .work__plate{aspect-ratio:4/3 !important}
  .work--b,.work--d{margin-top:0}
}

/* ============================================================
   Material schedule
   ============================================================ */
.materials{background:var(--bg-sunk)}
.mat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,38px);margin-top:clamp(40px,5vw,72px)}
@media(max-width:900px){.mat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mat-grid{grid-template-columns:1fr}}
.mat{display:flex;flex-direction:column;gap:14px}
.mat__swatch{aspect-ratio:1/1;overflow:hidden;position:relative}
.mat__swatch::after{
  content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(61,59,55,.10);
  pointer-events:none;
}
.mat__name{font-family:var(--serif);font-size:20px;color:var(--ink);line-height:1.12}
.mat__spec{font-size:13px;color:var(--muted);line-height:1.55}
.mat__spec b{display:block;font-weight:400;color:var(--meta);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}

/* ============================================================
   Colour: the palette carries the section on its own — no photograph,
   the brushed-texture swatches (canvas, same renderer as the old on-site
   benchmark shot) are the visual centrepiece.
   ============================================================ */
.palette{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(40px,5vw,72px);
}
.palette__item{display:flex;flex-direction:column;gap:14px}
/* No panel and no top hairline: the chip is just a window onto the brushed
   patch, which is drawn on a transparent canvas so the page shows through. */
.palette__chip{
  aspect-ratio:4/5;overflow:hidden;
}
.palette__chip canvas{width:100%;height:100%;display:block;transition:transform .9s var(--ease)}
.palette__item:hover .palette__chip canvas{transform:scale(1.035)}
.palette__name{font-family:var(--serif);font-size:20px;color:var(--ink);line-height:1.1}
.palette__hex{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:-6px}
.palette__use{font-size:13.5px;color:var(--body);line-height:1.5}

@media(max-width:980px){.palette{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){
  .palette{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .palette__name{font-size:18px}
}
@media(max-width:420px){.palette{grid-template-columns:1fr}}

.colour__note{margin-top:clamp(28px,3.4vw,42px);padding-top:20px;border-top:1px solid var(--rule);font-size:14.5px;color:var(--body);max-width:58ch}

.matline{margin-top:clamp(28px,3.4vw,46px)}
.matline__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;margin-top:14px}
@media(max-width:620px){.matline__grid{grid-template-columns:1fr}}
.matline__grid p{font-size:13px;color:var(--muted);line-height:1.5}
.matline__grid b{display:block;font-weight:400;color:var(--ink);font-family:var(--serif);font-size:17px;margin-bottom:3px}

/* ============================================================
   Process: project stages (a genuine sequence, hence numbered)
   ============================================================ */
.stages{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--rule)}
.stage{
  display:grid;grid-template-columns:64px minmax(0,240px) minmax(0,1fr) auto;
  gap:clamp(16px,3vw,44px);align-items:baseline;
  padding:clamp(20px,2.6vw,34px) 0;border-bottom:1px solid var(--rule-soft);
  transition:background .5s var(--ease);
}
.stage:hover{background:var(--accent-quiet)}
.stage__no{font-family:var(--serif);font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums}
.stage__name{font-family:var(--serif);font-size:clamp(21px,2.1vw,29px);color:var(--ink);line-height:1.1}
.stage__desc{font-size:14.5px;color:var(--body);max-width:56ch}
.stage__dur{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:880px){
  .stage{grid-template-columns:44px 1fr;gap:8px 16px}
  .stage__desc{grid-column:2}
  .stage__dur{grid-column:2}
}

/* ============================================================
   FAQ: question and answer pairs in the two-column note grid
   ============================================================ */
.faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,40px) clamp(24px,3vw,48px);margin-top:clamp(36px,4.6vw,64px)}
.faq__q{font-family:var(--serif);font-size:clamp(19px,1.5vw,22px);color:var(--ink);line-height:1.15}
.faq__a{font-size:14.5px;color:var(--body);line-height:1.6;margin-top:8px;max-width:52ch}
.faq__a a{color:var(--accent);border-bottom:1px solid var(--accent-quiet);transition:border-color .35s var(--ease)}
.faq__a a:hover{border-color:var(--accent)}

@media(max-width:620px){.faq__grid{grid-template-columns:1fr;gap:26px}}

/* ============================================================
   Bench: dark, fixed inverse surface
   ============================================================ */
.bench{background:var(--inv-bg);color:var(--inv-body);padding-block:var(--stack)}
.bench h2,.bench h3{color:var(--inv-ink)}
.bench .section__head{border-top-color:var(--inv-rule)}
.bench .section__note{color:var(--inv-body)}
.bench-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(42px,5vw,80px)}
@media(max-width:820px){.bench-grid{grid-template-columns:1fr;max-width:520px}}
.piece{display:flex;flex-direction:column;gap:15px}
.piece__plate{aspect-ratio:4/3;overflow:hidden;background:#111010}
.piece__plate canvas{transition:transform 1.2s var(--ease)}
.piece:hover .piece__plate canvas{transform:scale(1.03)}
.piece__name{font-family:var(--serif);font-size:23px;color:var(--inv-ink);line-height:1.1}
.piece__dims{font-size:12px;color:var(--inv-muted);letter-spacing:.05em;font-variant-numeric:tabular-nums}
.piece__desc{font-size:14px;color:var(--inv-body);max-width:38ch}

/* ============================================================
   Inquiry
   ============================================================ */
.inquiry{position:relative;background:var(--inv-bg);padding-block:0 var(--stack)}
/* Height used to be a fixed clamp() with the card centered via absolute
   positioning + overflow:hidden — as soon as the form grew past that height
   (adding email/phone did it), the vertically-centered card clipped evenly
   off its top and bottom, cutting into the submit button. The frame now
   sizes to the card's real content height instead of a guessed ceiling. */
.inquiry__frame{
  position:relative;overflow:hidden;
  min-height:clamp(480px,58vh,640px);
  display:flex;align-items:center;justify-content:center;
  padding-block:clamp(56px,9vh,110px);
}
.inquiry__plate{position:absolute;inset:0}
.inquiry__plate img{width:100%;height:100%;object-fit:cover;display:block}
.inquiry__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,25,24,.55),rgba(26,25,24,.86))}
.card{
  position:relative;
  width:min(720px,calc(100% - var(--gutter) * 2));
  background:var(--inv-chrome);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--inv-chrome-edge);
  padding:clamp(26px,3.6vw,48px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.card h2{font-size:clamp(28px,3.4vw,44px);color:var(--inv-ink);line-height:1.04;max-width:16ch}
.card p.card__note{color:var(--inv-body);font-size:14.5px;margin-top:14px;max-width:48ch}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
@media(max-width:620px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field--wide{grid-column:1/-1}
.field label{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--inv-muted)}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--inv-rule);
  color:var(--inv-ink);font-family:var(--sans);font-size:15px;font-weight:300;
  padding:9px 0;transition:border-color .4s var(--ease);
}
.field select{appearance:none;border-radius:0}
.field select option{background:#1A1918;color:#F4F1EA}
.field textarea{resize:vertical;min-height:62px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:rgba(142,138,131,.75)}
/* iOS Safari zooms the whole page when a focused field is under 16px. The
   desktop 15px is fine with a mouse; on touch it made the enquiry form jump
   on every tap. Must sit after the base rule above to win the cascade. */
@media(max-width:860px){
  .field input,.field select,.field textarea{font-size:16px}
}
.submit{
  grid-column:1/-1;justify-self:start;margin-top:8px;
  background:var(--terracotta);color:#FBF8F3;border:0;border-radius:999px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:14px 30px;cursor:pointer;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.submit:hover{background:#B0644A;transform:translateY(-1px)}
.submit[disabled]{opacity:.55;cursor:progress;transform:none}
/* honeypot: off-screen for people, present in the DOM for bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{grid-column:1/-1;margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--inv-body);min-height:0}
.form__status:empty{display:none}
.form__status--error{color:#E8A08A}
.form__status a{color:inherit;text-decoration:underline}
/* The one alternative to the form, under it: a WhatsApp deep link with a
   prefilled opener. Quiet on purpose; the form stays the primary path. */
.form__alt{grid-column:1/-1;margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--inv-muted)}
.form__alt a{color:var(--inv-body);border-bottom:1px solid var(--inv-rule);transition:color .3s var(--ease),border-color .3s var(--ease)}
.form__alt a:hover{color:var(--accent);border-color:var(--accent)}

.field label .opt{opacity:.6;letter-spacing:.12em}
.card__done{color:var(--inv-ink);font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);line-height:1.2}
.card__done + p{color:var(--inv-body);font-size:14.5px;margin-top:12px;max-width:44ch}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:var(--inv-bg);color:var(--inv-body);padding-bottom:44px}
.footer__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--inv-rule);
}
@media(max-width:880px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer h3{font-family:var(--serif);font-size:clamp(30px,4vw,52px);color:var(--inv-ink);line-height:1;max-width:12ch}
.footer .col{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.footer .col a{color:var(--inv-body);transition:color .3s var(--ease)}
.footer .col a:hover{color:var(--accent)}
.footer__social{margin-top:14px}
.footer__icon{display:inline-flex;align-items:center;margin-top:-2px}
.footer__base{
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  margin-top:clamp(42px,5vw,78px);padding-top:18px;border-top:1px solid var(--inv-rule);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--inv-muted);
}

/* ============================================================
   Project detail (case study) pages
   ============================================================ */
.project__hero{margin:clamp(20px,3vw,36px) 0 0}
.project__hero img{width:100%;height:auto;display:block;background:var(--bg-sunk)}
.project__intro{max-width:70ch;margin-top:clamp(28px,4vw,46px);font-size:15.5px;color:var(--body);line-height:1.75}
.project__gallery{
  display:flex;flex-direction:column;gap:clamp(34px,4.6vw,64px);
  margin-top:clamp(50px,6.5vw,96px);
}
.project__gallery figure{margin:0}
.project__gallery img{width:100%;height:auto;display:block;background:var(--bg-sunk)}
.project__gallery figcaption{
  margin-top:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);
}
/* Next-project link at the foot of the gallery, so a case study never
   dead-ends. Same serif as the work names; the rule above it separates it
   from the last photograph. */
.project__next{margin-top:clamp(50px,6.5vw,96px);padding-top:26px;border-top:1px solid var(--rule)}
.project__next-link{
  display:inline-block;margin-top:12px;
  font-family:var(--serif);font-size:clamp(24px,2.6vw,36px);color:var(--ink);line-height:1.1;
  border-bottom:1px solid var(--accent-quiet);padding-bottom:4px;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.project__next-link:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   Touch targets and phone flow

   Desktop is untouched below. With a mouse a 22px link is a fine target;
   the same link under a thumb is not, so the interactive elements get real
   height on narrow viewports rather than the type shrinking everywhere.
   ============================================================ */
.work__plate{display:block}
/* "All projects" back link, on every case-study page */
.backlink{display:inline-flex;align-items:center}

@media(max-width:860px){
  /* Small caps at 10.5px are an editorial device that survives a desktop
     screen and not a phone. Up one point, with the tracking eased back so
     each label occupies the same width and nothing re-wraps. */
  .label{font-size:11.5px;letter-spacing:.15em}
  .field label{font-size:11.5px;letter-spacing:.15em}

  /* Menu button, wordmark, back link and header CTA were 17-36px tall. */
  .nav__toggle{width:44px;height:44px;padding:12px;margin:-12px 0 -12px -12px}
  .wordmark{min-height:44px;align-items:center}
  .backlink{min-height:44px}
  .nav__cta{padding-block:12px}
  .nav__links a{display:flex;align-items:center;min-height:46px;padding-block:0}

  /* "View the project" is the primary action on every card. The rule has to
     stay tight under the text, so the target is grown with a pseudo element
     rather than padding, which would drag the underline down with it. */
  .work__link{position:relative}
  .work__link::before{
    content:"";position:absolute;left:0;right:-10px;top:50%;
    transform:translateY(-50%);height:46px;
  }

  /* Footer: phone, email, Contact me and the Instagram glyph were all
     18-22px rows sitting 9px apart. Each row now owns its own height. */
  /* max-width:12ch broke "Anna-Interior.com" at its hyphen. The column is
     wide enough for the whole name at the clamp's floor size. */
  .footer h3{max-width:none}
  .footer .col{gap:0}
  .footer .col .label{padding-bottom:7px}
  .footer .col a{display:flex;align-items:center;min-height:44px}
  .footer__icon{width:44px;height:44px;justify-content:flex-start}

  /* Links that are actions in their own right (contact page, 404, the
     WhatsApp line, next project) get a full-height target; links inside
     running prose stay inline. Lives here, after the base rules, so the
     padding is not undone by a later declaration. */
  .faq__grid--actions .faq__a a{display:inline-block;padding-block:11px}
  .matline__grid b a{display:inline-block;padding-block:10px}
  .form__alt a{display:inline-block;padding-block:12px}
  .project__next-link{padding-block:10px}

  /* Form: 16px type (set above, to stop iOS zooming) plus room to tap. */
  .field input,.field select,.field textarea{padding:13px 0}
  .field textarea{min-height:88px}
  .submit{padding:17px 32px}
}

/* The bar needs 327px for wordmark + CTA + menu button, so it broke out of
   the viewport on 320px phones. Below 340px the tracked "Arsentyeva" tail of
   the logotype drops, which buys 83px and leaves the name itself intact. */
@media(max-width:340px){
  .wordmark span{display:none}
  .nav__in{gap:10px}
  .nav__cta{padding-inline:12px}
}

@media(max-width:620px){
  /* Two stamps sharing the foot of the image left each about 150px, so both
     wrapped onto two lines over the photograph. The style/room caption is
     the informative one and fits a single line once it has the full width;
     "Private apartment" is already the first thing the works list says. */
  .hero__stamp .label:last-child{display:none}
}

@media(max-width:520px){
  /* A left-aligned pill at the foot of a full-width form reads as an
     afterthought on a phone; stretched, it is the obvious next step. */
  .submit{justify-self:stretch;width:100%;text-align:center}
}

/* ============================================================
   Load sequence (runs on load, settles visible)
   ============================================================ */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.anim{animation:rise .9s var(--ease) both}
.anim-fade{animation:fade 1.5s var(--ease) both}
.d1{animation-delay:.10s}.d2{animation-delay:.20s}.d3{animation-delay:.30s}.d4{animation-delay:.40s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .hero__plate{position:absolute;inset:0}
}