/* ------------------------------------------------------------------
   Liliya — warm gallery, high contrast
   Palette: #FBFAF7 background · #0F0D0B text · #5C554D secondary text
   · #C9C2B7 hairlines only (decorative; never text — see CLAUDE.md)
------------------------------------------------------------------ */

/* Type modelled on olgamiljko.com. Its extended grotesque (Pragmatica
   Extended) is commercial, so the open-licence Archivo is used at its widest
   width (125%) for the same flat, wide, confident letterforms. The menu is set
   in EB Garamond, the reference's own serif. Both are self-hosted. */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* High contrast inside the warm family: a crisp near-white ground and a
     near-black ink, neither pure. Secondary text is a dark greige at ~7:1, so
     nothing reads muddy. The hairline is decorative only. */
  --bg:         #FBFAF7;
  --ink:        #0F0D0B;
  --ink-hover:  #2B2723;   /* single tint of --ink, hover state only */
  --muted:      #5C554D;   /* secondary text, ~7:1 on --bg */
  --hairline:   #C9C2B7;   /* hairlines, borders — never text */

  /* one micro size and one micro tracking for all small UI type */
  --micro:        0.6875rem;
  --track-micro:  0.22em;
  --track-label:  0.26em;
  --track-mark:   0.42em;

  /* Images dominate: slim side margins and a wide measure, so frames grow
     with the screen; the air comes from top padding, not from gutters. */
  --gutter:  clamp(1.25rem, 3vw, 3rem);
  --section: clamp(6.5rem, 12vw, 12rem);
  --measure: 120rem;
  --header-h: 4.75rem;

  /* Portfolio rhythm. ONE gutter, used on both axes: the space between two
     images in a row is exactly the space between two rows, so the grid reads
     as one even mesh of frames. Genres are separated by exactly two gutters.
     At 1440px: 16px gutter. */
  --grid-gap:  clamp(0.75rem, 1.1vw, 1.25rem); /* within AND between rows, ~16px @1440 */
  --row-gap:   var(--grid-gap);
  --genre-gap: clamp(4.5rem, 10.5vw, 10.5rem); /* page-level spacing (titles, Services) */
  --label:     0.75rem;                        /* genre labels, name lines */

  /* 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: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mark: var(--font-body);
  --font-nav:  'EB Garamond', Garamond, Georgia, 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-stretch: 125%;
  font-weight: 300;
  font-size: clamp(0.875rem, 0.86rem + 0.06vw, 0.9375rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  -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;
}

[hidden] { display: none !important; }

.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: 600;
  font-size: clamp(1.375rem, 1.1rem + 0.5vw, 1.625rem);
  letter-spacing: 0.36em;
  margin-right: -0.36em;       /* tracking trails the last letter */
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.6rem;       /* 45px+ tap target */
  white-space: nowrap;
}

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

/* On a phone the menu opens from a two-line icon, closing to an X, as on the
   reference. It only exists on small screens with JS; the button carries an
   aria-label that the script switches between Open and Close. */
.nav__toggle {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 -0.35rem 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.nav__bars,
.nav__bars::before {
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  height: 1.5px;
  background: currentColor;
  transition: transform 420ms var(--ease), top 420ms var(--ease);
}
.nav__bars { top: calc(50% - 5px); }
.nav__bars::before { content: ""; left: 0; right: 0; top: 9px; }
.header.is-open .nav__bars { top: calc(50% - 1px); transform: rotate(45deg); }
.header.is-open .nav__bars::before { top: 0; transform: rotate(-90deg); }

.nav a {
  display: inline-block;
  padding-block: 0.75rem;      /* ~45px tap target */
  color: var(--ink);
  font-family: var(--font-nav);
  font-stretch: normal;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 420ms var(--ease);
}
.nav a:hover { color: var(--muted); }

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

/* One call to action, on every page: a solid ink block, top right. */
.header__cta {
  display: inline-flex;
  align-items: center;
  margin-left: clamp(1.5rem, 2.5vw, 2.5rem);
  padding: 0.85rem 1.4rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 420ms var(--ease);
}
/* The block reads at ~36px; this invisible band lifts the tap target to 45px. */
.header__cta { position: relative; }
.header__cta::before {
  content: "";
  position: absolute;
  inset: -0.35rem 0;
}
.header__cta:hover { background: var(--ink-hover); }
.header__cta:focus-visible { outline-offset: 3px; }

/* The panel-only extras (social icons, Inquire) exist in the markup on every
   page but only appear inside the open phone menu. */
.nav__extras { display: none; }

/* ---------------------------------------------------- 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 (~3:1 against 14:9). 45% keeps the
     head clear of the top edge with the body seated in the light. */
  --pos: 50% 45%;
}

.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: 600;
  font-size: clamp(2.5rem, 10.5vw, 7.5rem);   /* the extended face is ~40% wider */
  line-height: 1;
  text-transform: uppercase;
}

.wordmark__name,
.wordmark__surname { display: block; }

.wordmark__name { letter-spacing: 0.24em; }

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

.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;
}

/* Each phrase holds together, so the line can only break between phrases —
   never inside "Fine Art Photography". */
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------- 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: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* ---------------------------------------------------- masonry

   Home and the genre pages, modelled on the reference: two equal columns of
   smaller images, each in its own proportion, with one tight gutter across and
   down. Images are assigned to columns at build time so the two columns end
   level (within one gutter). Two columns at every width, phones included.
   The gallery runs the full viewport width with only the page gutter.     */

:root { --m-gap: clamp(0.5rem, 1.1vw, 1rem); }

.masonry {
  display: flex;
  align-items: flex-start;
  gap: var(--m-gap);
}
.masonry__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--m-gap);
}

/* Galleries span the full viewport, as on the reference: only the page
   gutter (20-48px) at the sides, so on a 2560px display each column is
   ~1220px wide. Images ship at 900px and 1800px (srcset) for that range. */
.genre-page,
.preview { max-width: none; }

/* Home lands straight in the gallery, as on the reference: a calm top margin
   under the header instead of the tall section padding. */
.preview { padding-top: clamp(1.5rem, 5vw, 5rem); }

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

   portfolio.html is a gallery entrance, not a gallery: one row of three 3:4
   cards (the trio archetype), each a single image with the genre beneath it
   in the label style. Each card opens that genre's own page.              */

.entrance__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.entrance__card {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.entrance__label {
  display: block;
  margin-top: clamp(1rem, 1.6vw, 1.5rem);
  font-size: var(--label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: color 420ms var(--ease);
}
.entrance__card:hover .entrance__label { color: var(--muted); }
@media (hover: hover) {
  .entrance__card:hover .frame img.is-loaded { transform: scale(1.028); }
}

/* ---------------------------------------------------- client projects */

.clients__note {
  margin: calc(-2 * var(--grid-gap) + 0.75rem) 0 calc(var(--grid-gap) * 2);
  color: var(--muted);
  font-size: var(--micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* ---------------------------------------------------- genre pages

   fashion.html, branding.html, fine-art.html: a quiet way back, a small
   genre title, then the genre's rows on the same uniform grid.            */

.back-link {
  display: inline-block;
  padding-block: 0.8rem;        /* 45px tap target */
  margin: -0.8rem 0 calc(clamp(1.75rem, 3.5vw, 3rem) - 0.8rem);
  color: var(--muted);
  font-size: var(--micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 420ms var(--ease);
}
.back-link:hover { color: var(--ink); }

.genre-page__title {
  margin: 0 0 calc(var(--grid-gap) * 2);   /* two gutters, as between genres */
  color: var(--ink);
  font-family: var(--font-mark);
  font-weight: 600;
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

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

/* One confident line in her own voice, then the work. */
.preview__intro {
  max-width: 24ch;
  margin: 0 0 clamp(3.5rem, 7vw, 7rem);
  color: var(--ink);
  font-family: var(--font-mark);
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.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(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  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 — on one 12-column field.
   Every row is FULL WIDTH and built from exactly three archetypes:

     slot--pair-l / -r   two equal halves, 1-6 and 7-12, both 3:4
     slot--trio-1/2/3    three equal thirds, 1-4, 5-8, 9-12, all 3:4
     slot--full          one image across the whole column, 3:2

   Every portrait frame on the page is 3:4, so every image in a row is the
   same height by construction, and all pairs (and all trios) are the same
   height as each other. Frames are fixed aspect-ratio boxes; the photo
   inside is object-fit: cover, so a source can never set its own height.
   Which original fills each slot is documented in images/README.md.       */

.genre + .genre { margin-top: calc(var(--grid-gap) * 2); }   /* two gutters, never a canyon */

.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);          /* equal to the column gap: one gutter */
  align-items: start;
}

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

@media (min-width: 761px) {
  .slot--pair-l { grid-column: 1 / span 6; }
  .slot--pair-r { grid-column: 7 / span 6; }
  .slot--trio-1 { grid-column: 1 / span 4; }
  .slot--trio-2 { grid-column: 5 / span 4; }
  .slot--trio-3 { grid-column: 9 / span 4; }
  .slot--full   { grid-column: 1 / -1; }

  /* 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

   Modelled on the reference's about page: a large black-and-white portrait in
   a circle, centred; a short bold line; then her words as separate, centred,
   airy lines in the light body face. Lots of air above and below.          */

.about {
  padding-top: clamp(4.5rem, 10vw, 9rem);
  padding-bottom: clamp(6rem, 12vw, 12rem);
  text-align: center;
}

.about__portrait {
  width: min(78vw, 30rem);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #8A8580;          /* neutral grey while the photo loads */
}
.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__text {
  max-width: 38rem;
  margin: clamp(2.75rem, 6vw, 4rem) auto 0;
}

.about__heading {
  margin: 0 0 clamp(1rem, 2vw, 1.4rem);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.about__text p {
  margin: 0;
  color: #2B2723;               /* calm grey-black: one step off --ink */
  font-size: clamp(0.875rem, 0.85rem + 0.12vw, 1rem);
  line-height: 1.65;
  letter-spacing: 0.05em;
  text-wrap: pretty;
}
.about__text p + p { margin-top: clamp(0.9rem, 1.6vw, 1.15rem); }

/* Team credit: one slightly bolder line, then a quiet underlined link. */
.about__text .about__team {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--ink);
  font-weight: 500;
}
.about__text .about__team-link { margin-top: 0.35rem; }
.about__team-link a {
  display: inline-block;
  padding-block: 0.6rem;        /* ~44px tap target */
  color: var(--ink);
  font-size: var(--micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: color 420ms var(--ease);
}
.about__team-link a:hover { color: var(--muted); }

/* ---------------------------------------------------- about: get in touch + map

   Under the bio, as on the reference's contact page: a centred bold tracked
   heading, then a calm form of underline-only fields with small regular
   labels, and a black Send bottom right. Then a quiet greyscale map.       */

.enquiry {
  max-width: calc(40rem + 2 * var(--gutter));
  padding-top: 0;
}

.enquiry__heading {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  color: var(--ink);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
}

.enquiry__form {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.25rem);
}

.enquiry__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: inherit;
}
@media (min-width: 761px) {
  .enquiry__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.enquiry .field label,
.enquiry .field legend {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--ink);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: none;
}
.enquiry .req { color: var(--muted); }
.enquiry .field legend { padding: 0; }

.enquiry .field input[type="text"],
.enquiry .field input[type="email"],
.enquiry .field textarea {
  width: 100%;
  padding: 0.45rem 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.enquiry .field textarea { resize: vertical; min-height: 6rem; }
.enquiry .field input:focus,
.enquiry .field textarea:focus { outline: none; border-bottom-width: 2px; }

.field--choice {
  margin: 0;
  padding: 0;
  border: 0;
}
.enquiry .field--choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 2rem 0 0;
  padding-block: 0.6rem;        /* ~44px tap target */
  cursor: pointer;
}
.enquiry .field--choice input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: var(--ink);
}

.enquiry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.enquiry__actions .button { margin-left: auto; padding-inline: 2.5rem; border-radius: 4px; }
.enquiry .form__status { margin: 0; }

.studio-map {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(5rem, 9vw, 8rem);
}
.studio-map iframe {
  display: block;
  width: 100%;
  height: clamp(16rem, 30vw, 24rem);
  border: 0;
  filter: grayscale(1) contrast(1.05);   /* understated, on-palette */
}

/* ---------------------------------------------------- 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); }

/* Shown in place of a form once Formspree accepts it. */
.form__thanks {
  max-width: 34rem;
  padding-block: clamp(1rem, 2vw, 1.5rem);
  outline: none;
}
.enquiry .form__thanks { margin-inline: auto; text-align: center; }
.form__thanks p { margin: 0; color: #2B2723; letter-spacing: 0.05em; line-height: 1.65; }
.form__thanks .form__thanks-title {
  margin-bottom: 0.5rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.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: 1.5rem;                  /* 24px between glyphs; the 44px tap boxes just meet */
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
}

/* Brand glyphs as inline SVG line icons: crisp at any density, no third-party
   script. The 44px box is the tap target; the glyph is 20px inside it, and the
   negative margin lets the glyph, not the box, set the line. */
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.75rem;             /* the 20px glyph sits where the text used to */
  color: var(--ink);
  transition: color 420ms var(--ease), opacity 420ms var(--ease);
}
.social a:hover { color: var(--muted); }
.social__icon { display: block; width: 1.25rem; height: 1.25rem; }

/* ---------------------------------------------------- footer

   Modelled on the reference: left-aligned blocks, each opened by a small bold
   widely tracked uppercase heading, with plain underlined text links beneath
   (no icons here). Follow, then the studio: name, address, email and phone.
   Stacked on phones; side by side on wider screens.                       */

.footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 4.5vw, 3.25rem);
  /* 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(4rem, 7vw, 6rem) var(--gutter) clamp(4rem, 7vw, 6rem);
  font-size: 0.8125rem;         /* ~13px, as on the reference */
  line-height: 1.6;
}

@media (min-width: 761px) {
  .footer { grid-template-columns: repeat(2, max-content); column-gap: clamp(5rem, 12vw, 12rem); }
}

.footer__heading {
  margin: 0 0 clamp(1.15rem, 2vw, 1.4rem);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* As on the reference: "Follow" keeps its case; the studio name is capitals. */
.footer__heading--follow { text-transform: none; }

.footer__address { font-style: normal; }
.footer__address p { margin: 0 0 clamp(0.9rem, 1.6vw, 1.15rem); }

.footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__list a {
  display: inline-block;
  padding-block: 0.35rem;       /* ~37px target; stacked targets just meet */
  margin-block: -0.35rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 420ms var(--ease);
}
.footer__list li + li { margin-top: 0.45rem; }
.footer__list a:hover { color: var(--muted); }

.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;
}

/* ---------------------------------------------------- back to top

   A quiet circle with a thin arrow, bottom right. Without JS it is a plain
   link to #top that is always available; with JS it stays hidden until the
   visitor is well down the page, and steps aside (fades out) whenever it would
   sit over a link or button, so it never covers anything clickable.        */

.to-top {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 2.75rem;               /* 44px: the tap target and the circle */
  height: 2.75rem;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: rgba(251, 250, 247, 0.92);
  color: var(--ink);
  text-decoration: none;
  transition: opacity 420ms var(--ease), visibility 420ms var(--ease),
              border-color 420ms var(--ease), color 420ms var(--ease);
}
.to-top:hover { border-color: var(--ink); }
.to-top svg { display: block; }

.js .to-top { opacity: 0; visibility: hidden; }
.js .to-top.is-shown { opacity: 1; visibility: visible; }
html.is-nav-open .to-top { opacity: 0; visibility: hidden; }

@media (min-width: 761px) {
  .to-top { width: 3rem; height: 3rem; bottom: 1.75rem; }
}

/* ---------------------------------------------------- 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;
}

/* No stagger inside a row: a delayed right-hand frame slides in late and the
   row is visibly ragged while it does. A row arrives as one. */
.js .about__text { transition-delay: 160ms; }

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



@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.16em; }
  .wordmark__surname { letter-spacing: 0.3em; }

  /* Phone title block: one composed unit. LILIYA / USHIN / credential stay a
     tight lockup; then one even 1.5rem step to the disciplines, and the same
     step to the intro line, which joins the block rather than opening a new
     section. One 3.5rem gap then hands over to the work. */
  .hero__title { padding-top: 2.25rem; }
  .hero__line {
    margin-top: 1.5rem;
    letter-spacing: 0.06em;
    text-wrap: wrap;
  }
  /* Two balanced lines, "Fashion · Branding" / "Fine Art Photography ·
     Michigan". The separator between them is dropped so no line ends on a
     dangling dot. */
  .hero__sep { display: none; }
  .hero__place { display: block; }
  .preview { padding-top: 1.5rem; }
  .preview__intro { margin-bottom: 3.5rem; }

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

  /* One column on a phone. Twelve tracks would keep eleven column gaps
     (11 x 32px = 352px), wider than a 390px screen's content box, and push
     every frame 10px past the edge. */
  .genre__grid,
  .preview__grid,
  .entrance__grid { grid-template-columns: minmax(0, 1fr); }


  /* 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: 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; }

  /* Phone header: the logo and the menu icon, nothing else. The Inquire
     button moves inside the menu panel, full width, as on the reference. */
  .js .header__cta { display: none; }

  .js .nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: var(--header-h) var(--gutter) 2rem;
    text-align: center;
    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; }

  /* The open menu: large, centred serif, then the icons and Inquire. */
  .js .nav > a {
    padding-block: 0.6rem;
    color: var(--ink);
    font-size: clamp(2.125rem, 9.6vw, 2.625rem);
    line-height: 1.2;
    letter-spacing: 0;
  }
  .js .nav a[aria-current] { text-underline-offset: 0.18em; }

  .js .nav__extras {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: clamp(2rem, 7vh, 3.5rem);
  }
  .js .nav__social { justify-content: center; margin: 0; }
  .js .nav__social a { padding: 0; }
  .js .nav__social .social__icon { width: 1.75rem; height: 1.75rem; }
  .js .nav__cta {
    display: block;
    width: min(72%, 21rem);
    margin-top: clamp(2rem, 6vh, 3rem);
    padding: 1.15rem 1rem;
    border-radius: 4px;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-body);
    font-stretch: 125%;
    padding-block: 1.3rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
  }

  /* Scoped to html: a bare :not(.js) also matches body and header when JS
     is on, and would override the panel's gap. */
  html:not(.js) .nav { flex-wrap: wrap; gap: 0.75rem 1.25rem; }

}

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 .about__text { transition-delay: 0ms; }

  .header,
  .header__mark,
  .js .nav,
  .frame img,
  .nav a,
  .button,
  .contact__address a,
  .social a,
  .footer__list a,
  .preview__links a,
  .service__link,
  .to-top,
  .back-link,
  .entrance__label,
  .field input,
  .field textarea { transition: none; }

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