/* =============================================================================
   Liana Melkonyan Photography · site.css
   "Gallery White": a pure white page, so the photographs' soft grey studio
   backdrops read as luminous plates, like a printed photo book.

    1  Fonts              8  Section heads
    2  Tokens             9  Portfolio
    3  Base              10  About
    4  Utilities         11  Sessions
    5  Type, buttons     12  Inquire: form, human check, states
    6  Header and menu   13  Footer
    7  Plates, hero      14  Error page
                         15  Motion
   ============================================================================= */


/* 1  Fonts ------------------------------------------------------------------
   Self-hosted variable WOFF2 files (latin + latin-ext). Each file carries the
   whole weight axis; the ranges below are the weights the site uses. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-normal-latin.woff2?v=d80df8ff5a") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-normal-latin-ext.woff2?v=cfa9a397d8") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic-latin.woff2?v=6f2f5c3b1a") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic-latin-ext.woff2?v=cd5bf126b2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/jost-latin.woff2?v=7726a5cd6f") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-ext.woff2?v=312ef2b80c") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2  Tokens ----------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Palette: white paper, warm near-black ink, warm greys, hairlines */
  --paper: #ffffff;
  --ink: #2b2521;          /* headings, buttons            15.1:1 on white */
  --text: #3d3632;         /* body copy                     11.9:1 */
  --muted: #6b625c;        /* labels, captions, notes        5.9:1 (5.5:1 on mist) */
  --placeholder: #7a706a;  /* input placeholders             4.8:1 */
  --field: #958c85;        /* form control borders           3.3:1 (non-text) */
  --ornament: #cfc7c0;     /* ornaments, quiet underlines (decorative) */
  --line: #e7e2dd;         /* hairline rules (decorative) */
  --mist: #f7f5f3;         /* faint warm band that echoes the photo backdrops */
  --tint: #f1ebe6;         /* selected session tile */
  --error: #9e3a2f;        /* error text                      6.8:1 (6.3:1 on mist) */

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Hoefler Text", "Times New Roman", serif;
  --sans: "Jost", "Futura", "Avenir Next", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  /* Layout. From 1600px the containers keep growing, so big screens get
     larger photographs rather than wider margins. Image `sizes` attributes
     mirror these formulas; change them together. */
  --gutter: clamp(20px, 5.5vw, 72px);
  --maxw: clamp(1240px, 77.5vw, 1480px);   /* header, hero */
  --wide: clamp(1120px, 70vw, 1340px);     /* gallery, about, sessions */
  --col-gap: clamp(16px, 2.2vw, 32px);
  --header-h: max(64px, 2.75rem + 4px);    /* grows only when the visitor's default text is large */
  --section-space: clamp(60px, 8.5vw, 136px);
  --land: clamp(24px, 3.5vw, 48px);        /* space kept above a section head after an in-page jump */

  /* Type scale */
  --fs-body: clamp(1.25rem, 1.15rem + .35vw, 1.375rem);   /* 20px phones, 22px desktop */
  --fs-lede: clamp(1.3125rem, 1.2rem + .45vw, 1.5rem);
  --fs-h2: clamp(2.5rem, 1.75rem + 2.4vw, 4rem);
  --fs-label: .75rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
}
/* The desktop header needs 900px and, for visitors who enlarge the default text size, 46em
   (site.js matches this query too) */
@media (min-width: 900px) and (min-width: 46em) {
  :root { --header-h: max(88px, 2.75rem + 4px); }
}


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

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Whatever is scrolled into view (keyboard focus, in-page jumps) stops 12px below the sticky
     header instead of under it (WCAG 2.4.11) */
  scroll-padding-top: calc(var(--header-h) + 12px);
}
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
em { font-style: italic; }
button, input, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }

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

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Sections and panels that receive focus programmatically are not controls */
[tabindex="-1"]:focus { outline: none; }

/* In-page jumps, measured from those 12px: a section's head lands --land below the header,
   the Inquire band starts right under it */
.section[id] { scroll-margin-top: calc(var(--land) - var(--section-space) - 12px); }
.inquire[id] { scroll-margin-top: -12px; }


/* 4  Utilities -------------------------------------------------------------- */

.sr-only {
  position: absolute !important;
  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;
}
.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 18px;
  background: var(--ink); color: #fff;
  font: 500 .75rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 12px; }


/* 5  Type primitives, buttons, links ---------------------------------------- */

/* Small tracked capitals */
.eyebrow {
  font: 500 var(--fs-label)/1.6 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px;
  padding: 0 clamp(1.5em, 6vw, 2.4em);
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink); border-radius: 0;
  font: 500 var(--fs-label)/1.25 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }

/* Tracked text link with a hairline that lengthens on hover */
.text-link {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px;
  font: 500 var(--fs-label)/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.text-link__rule {
  display: block; width: 36px; height: 1px;
  background: currentColor;
  transition: width .45s var(--ease);
}
.text-link:hover .text-link__rule { width: 56px; }

/* Underlined Instagram link (portfolio close, footer) */
.ig-icon { width: 18px; height: 18px; flex: none; }
.ig-link {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; max-width: 100%;
  color: var(--ink); text-decoration: none;
}
.ig-link__label {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ornament);
  transition: border-color .3s var(--ease);
}
.ig-link:hover .ig-link__label { border-bottom-color: var(--ink); }


/* 6  Header and menu ------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease);
}
.site-header.is-scrolled,
.menu-open .site-header { border-bottom-color: var(--line); }

.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 calc(var(--gutter) - 12px);
}

.wordmark {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 44px;
  color: var(--ink); text-decoration: none;
  line-height: 1;
}
.site-header .wordmark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.wordmark__name {
  font-family: var(--serif); font-weight: 400;
  /* The vw cap only bites when the default text size is enlarged: the name then still fits
     between the header's side controls */
  font-size: min(clamp(.9375rem, .82rem + .6vw, 1.5rem), 4.7vw);
  letter-spacing: .2em;
  margin-right: -.2em;              /* trailing tracking would push the name off centre */
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark__sub {
  margin-top: .75em;
  font: 400 min(.6875rem, 3.5vw)/1 var(--sans);   /* the cap, like the name's, only bites with large text */
  letter-spacing: .46em;
  margin-right: -.46em;
  text-transform: uppercase;
  color: var(--muted);
}

.header-ig {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--ink);
}

.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 44px; height: 44px;
  margin: 0; padding: 0 12px;
  background: none; border: 0;
  color: var(--ink);
  font: 500 .6875rem/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer;
}
.menu-toggle__label { margin-right: -.2em; }
.menu-toggle__icon { display: none; position: relative; width: 18px; height: 7px; }
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: currentColor;
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 3px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 3px; transform: rotate(-45deg); }
@media (min-width: 480px) {
  .menu-toggle__icon { display: block; }
}
/* Less room than a 320px phone at the default text size (large text on a phone): the toggle
   keeps its icon and its word only for assistive technology */
@media (max-width: 19.99em) {
  .menu-toggle { padding: 0 13px; }
  .menu-toggle__icon { display: block; }
  .menu-toggle__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* Phones and tablets: a quiet full-screen menu below the header. Its content is centred by auto
   margins, so when it is taller than the screen (a phone held sideways, zoom) it starts at the
   top and scrolls, instead of being cut off above the first link. */
.site-nav {
  position: fixed; top: var(--header-h); right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 24px var(--gutter) calc(40px + env(safe-area-inset-bottom));
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.menu-open .site-nav {
  visibility: visible; opacity: 1;
  transition: opacity .35s var(--ease);
}
.nav-list { margin: 0; padding: 0; list-style: none; text-align: center; }
.nav-list a {
  display: inline-block;
  padding: 6px 16px;
  font: 300 clamp(2.25rem, 9vw, 2.75rem)/1.25 var(--serif);
  color: var(--ink); text-decoration: none;
}
.nav-list__inquire { display: none; }   /* the full-width button below stands in for it */
.nav-cta { width: 100%; max-width: 440px; margin-top: 36px; }
.nav-ig {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: 24px;
  font: 400 .9375rem/1 var(--sans); letter-spacing: .02em;
  color: var(--text); text-decoration: none;
}
.site-nav > :first-child { margin-top: auto; }
.site-nav > :last-child { margin-bottom: auto; }
/* Short screens (phones held sideways): a tighter menu that fits without scrolling */
@media (max-height: 480px) {
  .site-nav { padding-top: 12px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .nav-list a { padding: 5px 16px; font-size: 1.75rem; }
  .nav-cta { margin-top: 18px; }
  .nav-ig { margin-top: 10px; }
}
@media (max-height: 480px) and (min-width: 560px) {
  .nav-list { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 8px; }
}

/* Desktop: split navigation around the centred wordmark */
@media (min-width: 900px) and (min-width: 46em) {
  .header-inner { justify-content: flex-start; padding: 0 var(--gutter); }
  .header-ig { margin-left: -13px; }
  .menu-toggle { display: none; }
  .site-nav {
    position: static; flex: 1;
    display: block;
    padding: 0; background: none; overflow: visible;
    visibility: visible; opacity: 1; transition: none;
  }
  .nav-list {
    display: flex; align-items: center; gap: clamp(28px, 3vw, 44px);
    margin-left: clamp(10px, 1.4vw, 20px);
  }
  .nav-list li:nth-child(3) { margin-left: auto; }
  .nav-list a {
    position: relative;
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0;
    font: 500 var(--fs-label)/1 var(--sans);
    letter-spacing: .2em; text-transform: uppercase;
  }
  .nav-list a::after {
    content: ""; position: absolute; left: 0; right: .2em; bottom: 10px; height: 1px;
    background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform .45s var(--ease);
  }
  .nav-list a:hover::after { transform: scaleX(1); }
  /* The call to action: a thin ink frame, filled on hover */
  .nav-list__inquire { display: block; }
  .nav-list__inquire a {
    min-height: 44px;
    padding: 0 calc(1.5em - .2em) 0 1.5em;
    border: 1px solid var(--ink);
    transition: background-color .35s var(--ease), color .35s var(--ease);
  }
  .nav-list__inquire a::after { display: none; }
  .nav-list__inquire a:hover { background: var(--ink); color: #fff; }
  .nav-cta, .nav-ig { display: none; }
}


/* 7  Plates and hero -------------------------------------------------------- */

.plate img {
  width: 100%;
  background-color: #efebe8;
  background-color: color-mix(in srgb, var(--ph, #e6e1dd) 50%, #fff);
}
.plate__cap {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: 14px;
}
.plate__no {
  flex: none;
  font: 500 .6875rem/1 var(--sans);
  letter-spacing: .2em;
  color: var(--muted);
}
.plate__no::after {
  content: ""; display: inline-block;
  width: 22px; height: 1px; margin-left: 14px;
  vertical-align: middle;
  background: var(--ornament);
}
.plate__title {
  font-style: italic; font-weight: 400;
  font-size: 1.125rem; line-height: 1.3;
  color: var(--text);
}

/* Hero: on phones eyebrow, title, plate, then the words; from 900px text left, plate right */
.hero { padding: 18px var(--gutter) 0; }
.hero__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-areas: "head" "plate" "body";
  justify-items: center;
  text-align: center;
}
.hero__head { grid-area: head; width: 100%; container-type: inline-size; }
.hero__eyebrow {
  font-size: .6875rem;
  letter-spacing: .15em;
  text-wrap: balance;
}
.hero__eyebrow-more { display: none; }
.hero__sep { padding: 0 .55em 0 .7em; }
.hero__title {
  margin-top: 14px;
  font-size: clamp(2.5rem, 13.6cqi, 6rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.hero__title em { display: block; }
.hero__plate { grid-area: plate; width: min(100%, 520px); margin-top: 24px; }
.hero__plate img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 86%; }
.hero__plate .plate__cap { margin-top: 12px; text-align: left; }
.hero__body { grid-area: body; margin-top: 22px; }
.hero__lede {
  max-width: 25em; margin: 0 auto;
  font-size: var(--fs-lede); font-weight: 400; line-height: 1.55;
  color: var(--text);
}
.hero__actions {
  margin-top: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}

/* The eyebrow is one line at the default text size: it tightens, then gains "Photographer"
   where its column allows. With enlarged text it wraps rather than being cut off. */
@container (min-width: 350px) {
  .hero__eyebrow { letter-spacing: .2em; }
}
@container (min-width: 500px) {
  .hero__eyebrow { font-size: var(--fs-label); letter-spacing: .24em; }
  .hero__eyebrow-more { display: inline; }
}
@media (min-width: 900px) {
  .hero { padding-top: clamp(16px, 3vw, 44px); }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". plate" "head plate" "body plate" ". plate";
    column-gap: clamp(48px, 6vw, 112px);
    justify-items: stretch;
    text-align: left;
  }
  .hero__title { margin-top: 22px; }
  /* Fits the plate and its caption inside the first screen; mirrored by the `sizes` attribute */
  .hero__plate {
    width: min(42vw, clamp(560px, 37.5vw - 40px, 680px), max(380px, 80vh - 176px));
    width: min(42vw, clamp(560px, 37.5vw - 40px, 680px), max(380px, 80svh - 176px));
    margin-top: 0;
  }
  .hero__body { margin-top: 26px; }
  .hero__lede { margin: 0; }
  .hero__actions { flex-direction: row; flex-wrap: wrap; gap: 18px 36px; margin-top: 36px; }
}


/* 8  Section heads ------------------------------------------------------------
   Portfolio and Inquire open with a centred vertical hairline; About and
   Sessions with a left-aligned rule that suits their column layouts. */

.section { padding: var(--section-space) var(--gutter) 0; }

.section-head {
  max-width: 760px;
  margin: 0 auto clamp(36px, 5.5vw, 80px);
  text-align: center;
}
.section-head::before {
  content: ""; display: block;
  width: 1px; height: clamp(32px, 4.5vw, 64px);
  margin: 0 auto clamp(18px, 2.6vw, 34px);
  background: var(--ornament);
}
.section-head h2 { margin-top: 14px; }
.section-head__intro {
  max-width: 30em; margin: 20px auto 0;
  font-size: var(--fs-lede); font-style: italic; font-weight: 400; line-height: 1.5;
  color: var(--text);
}

.rule-head { display: flex; align-items: center; gap: 16px; }
.rule-head::before {
  content: ""; flex: none;
  width: 40px; height: 1px;
  background: var(--ornament);
}


/* 9  Portfolio ---------------------------------------------------------------- */

.gallery {
  max-width: var(--wide); margin: 0 auto;
  display: grid; row-gap: clamp(30px, 5vw, 92px);
}
.spread { display: grid; row-gap: 30px; }
.spread > .plate { width: 100%; }
.spread--single .plate--md { justify-self: center; }

/* Phones: staggered widths, alternating sides, keep the rhythm of a book */
@media (max-width: 767.98px) {
  .plate__cap { margin-top: 12px; }
  .spread--pair .plate--sm { width: 66%; justify-self: end; }
  .spread--trio .plate:nth-child(1) { width: 80%; justify-self: start; }
  .spread--trio .plate:nth-child(2) { width: 66%; justify-self: end; }
  .spread--trio .plate:nth-child(3) { width: 80%; justify-self: start; }
  .spread--single .plate--md { width: 66%; justify-self: center; }
}

@media (min-width: 768px) {
  .spread { column-gap: var(--col-gap); }
  /* A large and a small plate, sharing a caption baseline */
  .spread--pair { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .spread--pair .plate--lg { grid-column: 1 / span 6; grid-row: 1; }
  .spread--pair .plate--sm { grid-column: 8 / span 4; grid-row: 1; align-self: end; }
  /* Three plates, stepped down the page */
  .spread--trio {
    --step: clamp(32px, 4vw, 80px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .spread--trio .plate:nth-child(2) { margin-top: var(--step); }
  .spread--trio .plate:nth-child(3) { margin-top: calc(2 * var(--step)); }
  .spread--single .plate--md { width: 42%; }
}

.gallery-actions {
  margin-top: clamp(40px, 5.5vw, 84px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 40px;
}
.gallery-actions .ig-link__label {
  font: 500 var(--fs-label)/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
}


/* 10 About ------------------------------------------------------------------- */

.about__inner { max-width: var(--wide); margin: 0 auto; }
.about__title { margin-top: 18px; }
.about__lead {
  max-width: 24em; margin-top: 24px;
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  font-style: italic; font-weight: 400; line-height: 1.5;
  color: var(--ink);
}
.about__body { max-width: 29em; margin-top: 22px; }
.about__sign {
  margin-top: 18px;
  font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem);
  font-style: italic; font-weight: 400; line-height: 1.2;
  color: var(--ink);
}

@media (min-width: 900px) {
  .about__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .about .rule-head { grid-column: 1 / -1; }
  .about__title {
    grid-column: 1 / span 5; grid-row: 2;
    margin-top: clamp(26px, 3vw, 44px);
    font-size: clamp(3.5rem, 1.9rem + 3.3vw, 5.25rem);
    line-height: 1.04;
  }
  .about__title-line { display: block; }
  .about__lead { grid-column: 1 / span 5; grid-row: 3; margin-top: 30px; }
  /* The text page faces the title page and ends on the same line as the lead */
  .about__body { grid-column: 7 / span 6; grid-row: 2 / span 2; align-self: end; margin-top: 0; }
}


/* 11 Sessions ----------------------------------------------------------------- */

.sessions__inner { max-width: var(--wide); margin: 0 auto; }
.sessions__head h2 { margin-top: 18px; }
.session-list {
  margin: clamp(36px, 4.5vw, 64px) 0 0; padding: 0;
  list-style: none;
  display: grid;
}
/* Phones: a hanging numeral, and the session's "Inquire" on its title line */
.session {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: baseline;
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
}
.session > * { grid-column: 2 / -1; }
.session > .session__no { grid-column: 1; grid-row: 1; }
.session > .session__link { grid-column: 3; grid-row: 1; margin-left: 16px; }
.session__no {
  font-style: italic; font-weight: 400;
  font-size: 1.375rem; line-height: 1;
  color: var(--muted);
}
.session h3 { grid-column: 2; grid-row: 1; font-size: clamp(2.125rem, 1.7rem + 1.1vw, 2.75rem); }
.session__desc { max-width: 24em; margin-top: 14px; }
.session__note {
  margin-top: 16px;
  font: 500 var(--fs-label)/1.6 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.session__link .text-link__rule { width: 24px; }
@media (max-width: 359.98px) {
  .session__link .text-link__rule { display: none; }
}

.sessions__pair {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.sessions__pair p {
  max-width: 28em;
  font-size: clamp(1.3125rem, 1.15rem + .6vw, 1.625rem); font-weight: 400; line-height: 1.4;
  color: var(--ink);
}
.sessions__pair em { color: var(--text); }

@media (min-width: 900px) {
  /* Three equal columns; a subgrid keeps titles, notes and links on shared lines, and the
     hairlines sit in the middle of the gaps */
  .session-list {
    --gap: clamp(48px, 6.4vw, 96px);
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto);
    column-gap: var(--gap);
  }
  .session {
    position: relative;
    grid-row: span 5;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    align-items: start;
    padding: 4px 0 0;
    border-top: 0;
  }
  .session + .session::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2);
    border-left: 1px solid var(--line);
  }
  .session > *, .session > .session__no, .session > .session__link, .session h3 { grid-column: 1; grid-row: auto; }
  .session > .session__link { margin: 4px 0 0; }
  .session__link .text-link__rule { width: 36px; }
  .session h3 { margin-top: 12px; }
  .session__note { margin-top: 0; padding-top: 22px; text-wrap: balance; }
  .sessions__pair { margin-top: clamp(44px, 4.5vw, 64px); padding-top: clamp(32px, 3.5vw, 44px); }
}


/* 12 Inquire: form, human check, states -------------------------------------- */

.inquire {
  margin-top: var(--section-space);
  padding: clamp(48px, 6.6vw, 104px) var(--gutter) clamp(56px, 7vw, 112px);
  background: var(--mist);
}
.inquire .section-head__intro {
  max-width: 31em;
  font-size: var(--fs-body); font-style: normal; font-weight: 500; line-height: 1.6;
  color: var(--text);
}

.inquiry { position: relative; max-width: 760px; margin: 0 auto; }

/* The form needs site.js. Until the script has wired it up (it adds .js to <html>) the form keeps
   its place but stays hidden, so nothing moves when it appears. If the script never runs (failed
   to load, blocked, a browser too old for it), a note with the Instagram link appears instead of
   a form that could not send. */
html:not(.js) .inquiry { visibility: hidden; }
.inquiry-fallback { display: none; }
html:not(.js) .inquiry-fallback {
  display: block; position: absolute; top: 0; left: 0; right: 0;
  visibility: hidden;
  animation: fallback-note 0s 6s forwards;
}
@keyframes fallback-note { to { visibility: visible; } }

.form-note {
  margin-bottom: 20px;
  font-size: 1.125rem; line-height: 1.5;
  color: var(--text);
}
.form-grid { display: grid; gap: 22px; }
.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field--session, .field--message { margin-top: 24px; }
.field__label {
  display: block;
  margin-bottom: 10px; padding: 0;
  font: 500 var(--fs-label)/1.5 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text);
}
/* Soft italic tag for optional fields */
.opt {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.0625rem; line-height: 1;
  letter-spacing: 0; text-transform: none;
  color: var(--muted);
}
.form-note .opt { font-size: 1em; }

.input {
  display: block; width: 100%;
  min-height: 54px; margin: 0; padding: 0 16px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--field); border-radius: 0;
  font: 400 1rem/1.4 var(--sans);
  -webkit-appearance: none; appearance: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
textarea.input { min-height: 124px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.input::placeholder { color: var(--placeholder); opacity: 1; }
.input::-webkit-date-and-time-value { text-align: left; }
.input.is-empty::-webkit-datetime-edit { color: var(--placeholder); }
.input:hover { border-color: var(--muted); }
/* The transparent outline is invisible here, but forced colours (Windows contrast themes) draw
   it, where the box-shadow ring disappears */
.input:focus { outline: 2px solid transparent; outline-offset: 0; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

.field.has-error .input { border-color: var(--error); }
/* A field with an error keeps its red border and gets the site's focus ring */
.field.has-error .input:focus { box-shadow: none; outline: 2px solid var(--ink); outline-offset: 2px; }
.field__error {
  margin-top: 8px;
  font: 400 1rem/1.45 var(--sans);
  color: var(--error);
}

/* Session tiles: real radio buttons with a visible indicator */
.tiles { display: grid; gap: 10px; }
.tile {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 12px 18px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--field);
  font: 400 1rem/1.3 var(--sans);
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.tile:hover { border-color: var(--ink); }
.tile input {
  flex: none;
  display: grid; place-content: center;
  width: 20px; height: 20px; margin: 0;
  scroll-margin-block: 18px;   /* focus brings the whole tile into view, not just the radio */
  background: var(--paper);
  border: 1px solid var(--field); border-radius: 50%;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.tile input::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  transition: transform .2s var(--ease);
}
.tile input:checked { border-color: var(--ink); }
.tile input:checked::before { transform: scale(1); }
.tile:has(input:checked) { background: var(--tint); border-color: var(--ink); }
.tile:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.tile:has(input:focus-visible) input { outline: none; }
.field.has-error .tile { border-color: var(--error); }
@media (min-width: 560px) {
  /* Same gutter as the fields above, so every box sits on one grid */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
/* Forced colours replace backgrounds, which draw the dot and the selected tile: keep both */
@media (forced-colors: active) {
  .tile input::before { forced-color-adjust: none; background: CanvasText; }
  .tile:has(input:checked)::after {
    content: ""; position: absolute; inset: 3px;
    border: 2px solid Highlight;
    pointer-events: none;
  }
  .human .altcha-checkbox input:checked + svg { forced-color-adjust: none; color: CanvasText; }
}

/* Honeypot: off screen, out of the tab order, hidden from assistive tech */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Human check (the real ALTCHA widget), restyled through its own custom properties */
.form-send { display: grid; gap: 14px; margin-top: 28px; }
.human altcha-widget {
  --altcha-max-width: 100%;
  --altcha-padding: 14px;
  --altcha-border-width: 1px;
  --altcha-border-radius: 0;
  --altcha-border-color: var(--ink);
  --altcha-color-base: var(--paper);
  --altcha-color-base-content: var(--ink);
  --altcha-color-primary: var(--ink);
  --altcha-color-primary-content: #fff;
  --altcha-color-success: var(--ink);
  --altcha-color-success-content: #fff;
  --altcha-color-error: var(--error);
  --altcha-color-error-content: #fff;
  --altcha-color-neutral: var(--line);
  --altcha-color-neutral-content: var(--muted);
  --altcha-input-background-color: var(--paper);
  --altcha-checkbox-size: 24px;
  --altcha-checkbox-border-width: 1px;
  --altcha-checkbox-border-radius: 0;
  --altcha-checkbox-border-color: var(--muted);
  --altcha-checkbox-outline: 2px solid var(--ink);
  --altcha-checkbox-outline-color: var(--ink);
  --altcha-checkbox-outline-offset: 3px;
  --altcha-spinner-color: var(--ink);
  --altcha-shadow: none;
  --altcha-transition-duration: .4s;
  display: block;
  font: 400 1rem/1.25 var(--sans);
  color: var(--ink);
}
/* Until the widget's script arrives, draw its unverified state so nothing moves */
.human altcha-widget:not(:defined) {
  display: flex; align-items: center; gap: .75rem;
  min-height: 54px; padding: 0 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
}
.human altcha-widget:not(:defined)::before {
  content: ""; flex: none;
  width: 24px; height: 24px;
  border: 1px solid var(--muted);
}
.human altcha-widget:not(:defined)::after { content: "I\2019m not a robot"; }
.human .altcha-main { min-height: 54px; justify-content: center; }
.human .altcha-checkbox-wrap { gap: .75rem; }
.human .altcha-checkbox-wrap > label {
  flex: 1; align-self: stretch;
  display: flex; align-items: center;
  margin: -14px -14px -14px 0; padding: 14px 14px 14px 0;   /* the whole box answers a tap */
  cursor: pointer;
}
.human .altcha-checkbox input:hover { border-color: var(--ink); }
.human .altcha-checkbox svg { stroke-width: 1.6; }
.human .altcha-spinner { border-width: 1.5px; opacity: 1; }
/* The site reports check problems itself, under the Send button */
.human .altcha-popover { display: none; }
.human.has-error altcha-widget { --altcha-border-color: var(--error); }

.btn--send { width: 100%; }
.btn--send[aria-disabled="true"] { cursor: progress; background: var(--muted); border-color: var(--muted); color: #fff; }

@media (min-width: 560px) {
  /* The human check fills the left column; Send closes the right one */
  .form-send { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .btn--send { justify-self: end; width: auto; min-width: 220px; }
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
  .field--session, .field--message { margin-top: 26px; }
  textarea.input { min-height: 156px; }
  .tile { min-height: 56px; }
}

/* Error summary and status messages (both role="alert") */
.form-summary__box, .inquiry-success {
  scroll-margin-top: 12px;   /* 24px below the sticky header (html has scroll-padding) */
}
.form-summary__box {
  margin-bottom: 28px; padding: 18px 20px 12px;
  background: var(--paper);
  border: 1px solid var(--error);
}
.form-summary__title { font: 500 1rem/1.45 var(--sans); color: var(--error); }
.form-summary__list { margin: 4px 0 0; padding: 0; list-style: none; }
.form-summary__list a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font: 400 1rem/1.4 var(--sans);
  color: var(--error);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.form-status__msg {
  margin-top: 18px;
  font: 400 1rem/1.55 var(--sans);
  color: var(--error);
  scroll-margin-bottom: 24px;   /* brought into view with some air below it */
}
/* Inline, so its line is as tall as the others; the padding keeps a 44px tap target */
.form-status__msg a {
  padding: 11px 0;
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.privacy {
  margin-top: 18px;
  font-size: 1.0625rem; line-height: 1.5;
  color: var(--muted);
}

.noscript-note, .inquiry-fallback { max-width: 32em; margin: 0 auto; text-align: center; }
.noscript-note a, .inquiry-fallback a {
  color: var(--ink); font-style: italic; font-weight: 400;
  text-decoration: underline; text-decoration-color: var(--ornament);
  text-decoration-thickness: 1px; text-underline-offset: 5px;
  overflow-wrap: anywhere;
}

/* Success: the form is replaced by a personal thank-you */
.inquiry-success {
  max-width: 760px; margin: 0 auto;
  padding: clamp(48px, 7vw, 72px) 28px;
  background: var(--paper);
  text-align: center;
}
.inquiry-success__title {
  margin-top: 14px;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 300; line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}
.inquiry-success__text { max-width: 28em; margin: 16px auto 0; }
.inquiry-success__ig { margin-top: 6px; font-size: 1.25rem; line-height: 1.5; }

/* The Instagram alternative comes after the form, never before it */
.inquire-alt {
  max-width: 760px; margin: clamp(32px, 5vw, 56px) auto 0;
  text-align: center;
  font-size: 1.25rem; line-height: 1.5;
  color: var(--text);
}
.inquire-alt__link {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-style: italic; font-weight: 400;
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--ornament);
  text-decoration-thickness: 1px; text-underline-offset: 5px;
  overflow-wrap: anywhere;
  transition: text-decoration-color .3s var(--ease);
}
.inquire-alt__link:hover { text-decoration-color: var(--ink); }


/* 13 Footer ---------------------------------------------------------------------- */

.site-footer { padding: clamp(48px, 6vw, 88px) var(--gutter) 22px; text-align: center; }
.site-footer .wordmark__name { font-size: min(clamp(1.125rem, 1rem + .5vw, 1.5rem), 6vw); }
.footer-desc {
  margin-top: 18px;
  font: 500 var(--fs-label)/1.9 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.footer-desc__sep { padding: 0 .5em 0 .7em; }
.footer-desc__part { display: block; }
.footer-desc__sep { display: none; }
@media (min-width: 560px) {
  .footer-desc__part, .footer-desc__sep { display: inline; }
}
.footer-ig {
  margin-top: 10px;
  font: 400 1rem/1.2 var(--sans); letter-spacing: .03em;
  overflow-wrap: anywhere;
}
.footer-base {
  max-width: var(--maxw);
  margin: clamp(28px, 5.5vw, 72px) auto 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--muted);
}
.footer-base p { padding: 12px 0 0; }
.footer-top {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font: 500 var(--fs-label)/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.footer-top:hover { color: var(--ink); }
@media (min-width: 640px) {
  .footer-base { flex-direction: row; justify-content: space-between; padding-top: 6px; }
  .footer-base p { padding: 0; }
}


/* 14 Error page ------------------------------------------------------------------ */

/* Header, message and footer fill exactly one screen; the message is centred in what is left */
.page-notfound { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.notfound {
  flex: 1 0 auto;
  display: grid; place-content: center; justify-items: center;
  padding: clamp(32px, 6vh, 96px) var(--gutter);
  text-align: center;
}
.site-footer--simple { padding-top: 0; }
.site-footer--simple .footer-base { margin-top: 0; }
.notfound h1 { margin-top: 16px; font-size: clamp(2.75rem, 1.9rem + 3.6vw, 5rem); line-height: 1.04; }
.notfound h1 em { display: block; }
.notfound__text { max-width: 26em; margin-top: 22px; }
.notfound__actions {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 36px;
}
.notfound__actions .ig-link__label {
  font: 500 var(--fs-label)/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
}


/* 15 Motion -------------------------------------------------------------------------
   Content is never hidden without JavaScript: site.js adds .reveal only when
   IntersectionObserver exists and the visitor has not asked for less motion. */

@media (prefers-reduced-motion: no-preference) {
  .hero__head, .hero__body { animation: rise 1.1s var(--ease) both; }
  .hero__body { animation-delay: .14s; }
  .hero__plate { animation: fade 1.3s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: .001; } to { opacity: 1; } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* The verifying spinner is feedback, not decoration: keep it turning, slowly */
  .human .altcha-spinner { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
}

@media print {
  .site-header, .skip-link, .inquiry, .gallery-actions { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}