/* ------------------------------------------------------------------
   Liliya — warm gallery
   Palette: #F7F4EF background · #1A1613 text · #746B61 secondary text
   · #9B9185 hairlines only (fails AA as text — see CLAUDE.md Design Spec)
------------------------------------------------------------------ */

@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:         #F7F4EF;
  --ink:        #1A1613;
  --ink-hover:  #2A2621;   /* single tint of --ink, hover state only */
  /* Two greiges, one family. #9B9185 is decorative only — as text on --bg it
     measures 2.82:1 and fails WCAG AA, so secondary copy uses the darker
     #746B61 (4.76:1). See the Palette note in CLAUDE.md. */
  --muted:      #746B61;   /* secondary text */
  --hairline:   #9B9185;   /* hairlines, borders — never text */

  /* one micro size and one micro tracking for all small UI type */
  --micro:        0.7rem;
  --track-micro:  0.18em;
  --track-label:  0.22em;
  --track-mark:   0.34em;

  --gutter:  clamp(1.5rem, 5vw, 5.5rem);
  --section: clamp(6rem, 10vw, 10rem);
  --measure: 90rem;
  --header-h: 4.75rem;

  /* Portfolio rhythm — one step for the grid, used on BOTH axes so every
     gutter on the page is identical, then two clean multiples of it.
     At 1440px: 50px between images, 108px between genres, 288px between
     sections. Roughly 1 : 2 : 6. */
  --grid-gap:  clamp(2rem, 3.5vw, 3.5rem);     /* within a row  ~50px @1440 */
  --row-gap:   clamp(2.5rem, 5.5vw, 5.5rem);   /* between rows  ~79px */
  --genre-gap: clamp(4.5rem, 10.5vw, 10.5rem); /* between genres ~151px */
  --label:     0.8125rem;                      /* genre labels only */

  /* Motion: slow, and never drawing attention to itself. */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mark: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.965rem + 0.18vw, 1.0625rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p, figure, form { margin: 0; }

img { display: block; max-width: 100%; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.visually-hidden {
  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;
}

.skip-link {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.85rem 1.25rem;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------- header */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: transform 620ms var(--ease-soft), border-color 620ms var(--ease);
}

.header.is-hidden { transform: translateY(-100%); }
.header.is-scrolled { border-bottom-color: var(--hairline); }

.header__mark {
  font-family: var(--font-mark);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: var(--track-mark);
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.8rem;       /* 45px tap target */
  visibility: hidden;          /* also removes it from the tab order */
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.header.is-marked .header__mark { visibility: visible; opacity: 1; }

.nav {
  display: flex;
  gap: clamp(1.4rem, 3vw, 2.75rem);
  margin-left: auto;
}

/* Five destinations do not fit as inline text on a phone. The toggle is a
   word, not an icon, and only exists on small screens with JS. */
.nav__toggle {
  display: none;
  margin-left: auto;
  padding: 1rem 0 1rem 0.75rem;   /* ~46px tap target */
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  cursor: pointer;
}

.nav a {
  display: inline-block;
  padding-block: 0.85rem;      /* ~47px tap target */
  color: var(--muted);
  font-size: var(--micro);
  font-weight: 400;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 420ms var(--ease);
}
.nav a:hover { color: var(--ink); }

/* The page you are on: full ink, plus a hairline so it does not rely on
   colour alone. */
.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
  text-decoration-color: var(--hairline);
}

/* ---------------------------------------------------- frames + placeholders */

.frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 5);
}

.frame__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--hairline);
  color: var(--muted);
  font-size: var(--micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
}
.frame__ph span { opacity: 0.65; }

.frame img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-slot crop anchor. Defaults to centre; a slot sets --pos only when the
     frame's subject genuinely sits off-centre. Documented in images/README.md. */
  object-position: var(--pos, 50% 50%);
  transition: transform 900ms var(--ease-soft);
}

/* Hidden until it has actually decoded, so a missing photo never
   flashes a broken-image glyph before the placeholder shows. */
.js .frame img { visibility: hidden; }
.js .frame img.is-loaded { visibility: visible; }

@media (hover: hover) {
  .frame:hover img.is-loaded { transform: scale(1.028); }
}

/* ---------------------------------------------------- hero */

main { flex: 1 0 auto; padding-top: var(--header-h); }

/* Height yields to the wordmark: the reserve keeps the full hero unit
   — image, LILIYA, tagline — above the fold on every desktop height. */
.frame--hero {
  aspect-ratio: auto;
  height: clamp(18rem, min(56vh, 100vh - 26rem), 42rem);
  /* The band is far wider than the frame: hold the top so a head is never cut. */
  --pos: 50% 0%;
}

.hero__title {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter) 0;
}

/* The hero lockup: LILIYA leads, USHIN sits tight beneath it at about a third
   of the size. Both children size in em off .wordmark, so the whole lockup
   scales from one clamp. The small header logo stays LILIYA alone. */
.wordmark {
  font-family: var(--font-mark);
  font-weight: 400;
  font-size: clamp(3.25rem, 15vw, 9.5rem);
  line-height: 1;
  text-transform: uppercase;
}

.wordmark__name,
.wordmark__surname { display: block; }

.wordmark__name { letter-spacing: 0.26em; }

.wordmark__surname {
  margin-top: 0.3em;            /* 0.3 x the surname's own size — tight */
  font-size: 0.36em;            /* 36% of LILIYA */
  letter-spacing: 0.34em;
}

.hero__credential {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  color: var(--muted);
  font-size: var(--micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.hero__line {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--muted);
  font-size: clamp(0.8rem, 0.74rem + 0.24vw, 0.95rem);
  letter-spacing: 0.1em;
  text-wrap: balance;
}

/* ---------------------------------------------------- sections */

.section {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--section) var(--gutter);
}

.page__title {
  margin: 0 0 var(--genre-gap);
  color: var(--ink);
  font-family: var(--font-mark);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------------------------------------------------- home preview */

.preview__intro {
  max-width: 42ch;
  margin: 0 0 var(--genre-gap);
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.preview__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--row-gap);
  align-items: start;
}

.preview__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.75rem, 3.5vw, 3rem);
  margin-top: var(--genre-gap);
}

.preview__links a {
  display: inline-block;
  padding-block: 0.8rem;        /* 45px tap target */
  margin-block: -0.4rem;
  color: var(--ink);
  font-size: var(--micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 420ms var(--ease);
}
.preview__links a:hover { color: var(--muted); }

/* ---------------------------------------------------- services */

.service + .service { margin-top: var(--genre-gap); }

.service__name {
  margin: 0 0 var(--grid-gap);
  color: var(--ink);
  font-size: var(--label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.service__body p {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(1.0625rem, 0.99rem + 0.36vw, 1.25rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.service__link {
  display: inline-block;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  padding-block: 0.8rem;        /* 45px tap target */
  color: var(--ink);
  font-size: var(--micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
  text-decoration-color: var(--hairline);
  transition: text-decoration-color 420ms var(--ease);
}
.service__link:hover { text-decoration-color: var(--ink); }

.services__note {
  margin: var(--genre-gap) 0 0;
  color: var(--muted);
  font-size: var(--micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* ---------------------------------------------------- 404 */

.notfound .page__title { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.notfound__line {
  max-width: 42ch;
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
}

/* ---------------------------------------------------- portfolio

   Three genre groups — Fashion, Branding, Fine Art — sharing one 12-column
   field. Rows are built from three archetypes so that every row aligns top and
   bottom and no row ever ends ragged:

     SOLO       one image alone in its row, held left or right, air beside it
     PAIR       two equal halves, 1-6 and 7-12, sharing one ratio
     FULL       the section's single full-width moment (branding-01)

   Variation comes from which archetype a row uses, how wide a solo is, and the
   ratio a row carries — never from mismatched heights inside a row. Genre ->
   filename -> ratio -> size -> slot is documented in images/README.md.        */

.genre + .genre { margin-top: var(--genre-gap); }

.genre__label {
  margin: 0 0 var(--grid-gap);      /* exactly one gutter above its images */
  color: var(--ink);
  font-size: var(--label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.genre__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--row-gap);          /* rows step above the in-row gutter, so a
                                       pair reads as one row, not a mesh */
  align-items: start;
}

.slot { grid-column: 1 / -1; }      /* mobile: one full-width column */

@media (min-width: 761px) {
  /* Fashion — a monochrome pair, a red pair, then a solo close held right. */
  .slot--fashion-01  { grid-column: 1 / span 6; }
  .slot--fashion-02  { grid-column: 7 / span 6; }
  .slot--fashion-03  { grid-column: 1 / span 6; }
  .slot--fashion-04  { grid-column: 7 / span 6; }
  .slot--fashion-05  { grid-column: 5 / span 8; }

  /* Branding — the peak opens, centred; a pair closes. */
  .slot--branding-01 { grid-column: 2 / span 10; }
  .slot--branding-02 { grid-column: 1 / span 6; }
  .slot--branding-03 { grid-column: 7 / span 6; }

  /* Fine Art — a dark pair, an outdoor pair, then the full-width moment. */
  .slot--fine-art-01 { grid-column: 1 / span 6; }
  .slot--fine-art-02 { grid-column: 7 / span 6; }
  .slot--fine-art-03 { grid-column: 1 / span 6; }
  .slot--fine-art-04 { grid-column: 7 / span 6; }
  .slot--fine-art-05 { grid-column: 1 / -1; }

  /* Home preview — a tonally matched trio, then the red pair as the last
     thing before the onward links. Both are full rows. */
  .slot--home-01 { grid-column: 1 / span 4; }
  .slot--home-02 { grid-column: 5 / span 4; }
  .slot--home-03 { grid-column: 9 / span 4; }
  .slot--home-04 { grid-column: 1 / span 6; }
  .slot--home-05 { grid-column: 7 / span 6; }

  /* Services — the name sits in the margin beside its copy. */
  .service {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--grid-gap);
  }
  .service__name { margin-bottom: 0; padding-top: 0.35rem; }
}

/* ---------------------------------------------------- about */

.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: end;
}

.about__text p { max-width: 58ch; text-wrap: pretty; }
.about__text p + p { margin-top: 1.6rem; }

.about__text p:not(.about__credit):not(.about__name):not(.about__credential) {
  font-size: clamp(1.0625rem, 0.99rem + 0.36vw, 1.25rem);
  line-height: 1.7;
}

.about__text p.about__name {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: var(--label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.about__text p.about__credential {   /* must outrank `.about__text p + p` */
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  color: var(--muted);
  font-size: var(--micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.about__text p.about__credit {   /* must outrank `.about__text p + p` */
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  color: var(--muted);
  font-size: var(--micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* ---------------------------------------------------- contact */

.contact__form {
  display: grid;
  gap: clamp(2rem, 3.5vw, 2.75rem);
  max-width: 34rem;
}

.field { display: block; }

.field label {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--muted);
  font-size: var(--micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  transition: border-color 420ms var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.field textarea { resize: none; min-height: 6.5rem; }

.button {
  justify-self: start;
  padding: 1.05rem 2.75rem;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--bg);
  font-family: inherit;
  font-size: var(--micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 420ms var(--ease);
}
.button:hover { background: var(--ink-hover); }

.form__status {
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.8rem;
}

.contact__address {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  color: var(--muted);
  font-size: var(--micro);
  font-style: normal;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.contact__address a {
  /* Padding buys a ~44px tap target; the negative margin keeps the line
     sitting exactly where it looks like it sits. */
  display: inline-block;
  padding-block: 0.8rem;
  margin-block: -0.8rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 420ms var(--ease);
}
.contact__address a:hover { color: var(--ink); }

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.5rem, 3vw, 2.75rem);
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: inline-block;
  padding-block: 0.8rem;        /* 45px tap target */
  margin-block: -0.4rem;
  color: var(--ink);
  font-size: var(--micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 420ms var(--ease);
}
.social a:hover { color: var(--muted); }

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem clamp(1.75rem, 4vw, 4rem);
  /* width:100% is required: auto inline margins on a column-flex child cancel
     the default stretch, which would shrink the footer to its content. */
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(2.5rem, 4vw, 3.5rem) var(--gutter) clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid var(--hairline);
}

.footer__mark {
  display: inline-block;
  padding-block: 0.8rem;        /* ~44px tap target */
  margin-block: -0.8rem;
  font-family: var(--font-mark);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: var(--track-mark);
  color: var(--ink);
  text-decoration: none;
}

/* The wordmark is the logo; the full name sits quietly beside it. */
.footer__name {
  margin: 0;
  color: var(--ink);
  font-size: var(--micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.25rem, 2.5vw, 2rem);
  margin: 0;
  margin-right: auto;
  color: var(--muted);
  font-size: var(--micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.footer__meta a {
  display: inline-block;
  padding-block: 0.8rem;        /* 45px tap target */
  margin-block: -0.75rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 420ms var(--ease);
}
.footer__meta a:hover { color: var(--ink); }

.footer .social { margin: 0; }

/* Contact carries the inbox, location and socials in the page itself, so the
   footer would print all four again a few hundred pixels lower. Slim it there
   to the wordmark alone rather than delete the in-page block, which is the
   page's actual job. */
.page-contact .footer__meta,
.page-contact .footer .social { display: none; }

.contact__lede {
  max-width: 52ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.7;
  text-wrap: pretty;
}

/* ---------------------------------------------------- reveals */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* A row resolves left to right: the right half of a pair, and each step of the
   trio, arrives a beat behind the one before it. */
.js .slot--fashion-02,
.js .slot--fashion-04,
.js .slot--branding-03,
.js .slot--fine-art-02,
.js .slot--fine-art-04,
.js .slot--home-05 { transition-delay: 200ms; }
.js .slot--home-02 { transition-delay: 130ms; }
.js .slot--home-03 { transition-delay: 260ms; }
.js .about__text { transition-delay: 160ms; }

/* ---------------------------------------------------- responsive */

/* Single column early: keeps her voice at 60–75 characters per line
   across the whole tablet band instead of choking it to ~45. */
@media (max-width: 1200px) {
  .about__inner { grid-template-columns: minmax(0, 1fr); }
  .about__portrait { max-width: min(100%, 34rem); }
}

@media (max-width: 760px) {
  :root { --header-h: 3.9rem; }

  .frame--hero {
    height: clamp(20rem, 62vh, 34rem);
    --pos: 50% 50%;            /* hero-mobile.jpg is already cropped upright */
  }
  .wordmark__name { letter-spacing: 0.18em; }
  .wordmark__surname { letter-spacing: 0.26em; }

  /* On a phone the header is otherwise an empty bar with MENU alone. */
  .header__mark { visibility: visible; opacity: 1; }

  .preview__links { flex-direction: column; gap: 0; align-items: flex-start; }

  /* The full-width moment keeps its status on a phone: it alone
     breaks the page gutter and runs edge to edge. */
  .slot--fine-art-05 { margin-inline: calc(var(--gutter) * -1); }

  /* With JS the nav is a panel behind the header, opened by the toggle.
     Without JS it stays a plain wrapping row, so navigation always works. */
  .js .nav__toggle { display: inline-block; }

  /* The nav is a child of .header, so its z-index competes with the header's
     own children, not with the header. The toggle and mark must therefore be
     lifted above the panel explicitly or the panel covers them and traps the
     visitor with no way out on touch. */
  .js .header__mark,
  .js .nav__toggle { position: relative; z-index: 41; }

  .js .nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(1rem, 3vw, 1.75rem);
    margin: 0;
    padding: var(--header-h) var(--gutter) 0;
    background: var(--bg);
    visibility: hidden;
    opacity: 0;
    transition: opacity 420ms var(--ease), visibility 420ms var(--ease);
  }

  .js .header.is-open .nav { visibility: visible; opacity: 1; }

  .js .nav a {
    padding-block: 0.7rem;
    color: var(--ink);
    font-size: 1.0625rem;
    letter-spacing: 0.14em;
  }

  :not(.js) .nav { flex-wrap: wrap; gap: 0.75rem 1.25rem; }

  .js .slot--fashion-02,
  .js .slot--fashion-04,
  .js .slot--branding-03,
  .js .slot--fine-art-02,
  .js .slot--fine-art-04,
  .js .slot--home-02,
  .js .slot--home-04,
  .js .slot--home-05 { transition-delay: 0ms; }
}

html.is-nav-open { overflow: hidden; }

/* ---------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .slot--fashion-02,
  .js .slot--fashion-04,
  .js .slot--branding-03,
  .js .slot--fine-art-02,
  .js .slot--fine-art-04,
  .js .slot--home-02,
  .js .slot--home-04,
  .js .slot--home-05,
  .js .about__text { transition-delay: 0ms; }

  .header,
  .header__mark,
  .js .nav,
  .frame img,
  .nav a,
  .button,
  .contact__address a,
  .social a,
  .footer__meta a,
  .preview__links a,
  .service__link,
  .field input,
  .field textarea { transition: none; }

  .header.is-hidden { transform: none; }
  .frame:hover img.is-loaded { transform: none; }
}