/* ==========================================================================
   Sepehr — photography and videography
   --------------------------------------------------------------------------
   1. Tokens (the four "rooms" the page moves through live here)
   2. Base
   3. Navigation
   4. Hero (aperture)
   5. Statement
   6. Chapters and photo frames
   7. Motion, Bookings, About, Contact
   8. Lightbox
   9. Small screens
   10. No-JS and reduced motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

/* Registered so the whole page can cross-fade between rooms. */
@property --bg  { syntax: "<color>"; inherits: true; initial-value: #000000; }
@property --fg  { syntax: "<color>"; inherits: true; initial-value: #f5eee6; }
@property --dim { syntax: "<color>"; inherits: true; initial-value: #cbbfb2; }
@property --glow { syntax: "<color>"; inherits: true; initial-value: #e8943a; }

:root {
  /* The page never leaves the dark. Each room is a near-black, a text colour,
     a quieter text colour, and the colour of the stage light washing over it.
     Sections pick one with data-tone="…"; script.js applies it page-wide.
       stage  — house lights down, amber spot
       velvet — the curtain, crimson
       ember  — autumn after sunset, rust
       lamp   — a room full of people, gold */
  --stage-bg:  #000000;  --stage-fg:  #f5eee6;  --stage-dim:  #cbbfb2;  --stage-glow:  #e8943a;
  --velvet-bg: #150508;  --velvet-fg: #f7ebe6;  --velvet-dim: #dfc4bf;  --velvet-glow: #c21f3f;
  --ember-bg:  #0f0906;  --ember-fg:  #f5ece0;  --ember-dim:  #d3c0ad;  --ember-glow:  #cf5a1c;
  --lamp-bg:   #110c04;  --lamp-fg:   #f6eedd;  --lamp-dim:   #d6c8a8;  --lamp-glow:   #e7b84a;

  --accent: #efb85f;      /* the one warm accent: buttons, labels, the spotlight ring */
  --on-accent: #1c1003;

  --bg: var(--stage-bg);
  --fg: var(--stage-fg);
  --dim: var(--stage-dim);
  --glow: var(--stage-glow);
  --rule: color-mix(in srgb, var(--fg) 16%, transparent);
  --wash: color-mix(in srgb, var(--fg) 8%, transparent);

  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --body: clamp(1.125rem, 1.04rem + 0.3vw, 1.25rem);
  --small: 0.9375rem;                 /* captions, tags, footer */
  /* Bodoni's hairlines thin out as it grows (optical sizing), which is elegant but hard to read
     in light type on black. These pin it to sturdier cuts: one for the big titles, one for
     headlines that run to a sentence. */
  --cut-title: "opsz" 30;
  --cut-text: "opsz" 12;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);        /* quick start, long settle */
  --ease-light: cubic-bezier(0.45, 0, 0.2, 1);   /* the light changing */

  --gutter: max(clamp(1.125rem, 4.5vw, 4.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --gap: clamp(0.875rem, 2vw, 2rem);
  --radius: clamp(0.875rem, 1.6vw, 1.75rem);
  --section: clamp(6rem, 15vw, 13rem);

  transition:
    --bg 1.1s var(--ease-light),
    --fg 1.1s var(--ease-light),
    --dim 1.1s var(--ease-light),
    --glow 1.4s var(--ease-light);
}

:root[data-light="velvet"] { --bg: var(--velvet-bg); --fg: var(--velvet-fg); --dim: var(--velvet-dim); --glow: var(--velvet-glow); }
:root[data-light="ember"]  { --bg: var(--ember-bg);  --fg: var(--ember-fg);  --dim: var(--ember-dim);  --glow: var(--ember-glow); }
:root[data-light="lamp"]   { --bg: var(--lamp-bg);   --fg: var(--lamp-fg);   --dim: var(--lamp-dim);   --glow: var(--lamp-glow); }

/* 2. Base ------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 450;                   /* light text on black reads thinner than it is */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Stage light: a soft wash from above and a fainter one from the floor,
   fixed behind the page. Its colour follows the room you are in. */
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0 0 auto;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  background:
    radial-gradient(95% 62% at 14% -10%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 72%),
    radial-gradient(70% 42% at 96% 108%, color-mix(in srgb, var(--glow) 16%, transparent), transparent 72%);
}

::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, p, figure, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg { display: block; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
p { text-wrap: pretty; }
[id] { scroll-margin-top: 5.5rem; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 88rem);
  margin-inline: auto;
}

/* Headline voice: Bodoni, the face of playbills and posters, in a sturdy cut. */
.display {
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: var(--cut-title);
  font-weight: 480;
  letter-spacing: -0.015em;
  line-height: 1.04;
  text-wrap: balance;
}

.tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 0.9em;
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transition: scale 0.45s var(--ease);
}
.button:hover { scale: 1.035; }
.button:active { scale: 0.97; }

.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.link { transition: color 0.3s; }
.link:hover { color: var(--accent); }

.skip {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  text-decoration: none;
  transform: translateY(-250%);
}
.skip:focus { transform: none; }

/* 3. Navigation ------------------------------------------------------------ */

.nav {
  position: fixed;
  z-index: 40;
  top: max(0.75rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 2 * var(--gutter), 47rem);   /* room for the name, five tabs and the Book button */
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0 0.375rem 0 1.2rem;
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 1rem;
}

.nav__mark {
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: var(--cut-text);
  font-size: clamp(1.0625rem, 5.6vw, 1.375rem);   /* eases down on the narrowest phones so the name stays on one line */
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.nav__toggle { display: none; }

.nav__links { display: flex; gap: 0.125rem; }

.nav__links a {
  display: block;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--fg) 88%, transparent);  /* stays readable over photographs */
  text-decoration: none;
  transition: color 0.3s, background-color 0.3s;
}
.nav__links a:hover { color: var(--fg); }
.nav__links a[aria-current="true"] { color: var(--accent); background: var(--wash); }

/* 4. Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  height: 260vh;                 /* scroll distance for the aperture */
  background: var(--stage-bg);
  color: #f8f2ea;
}

.hero__stage {
  --r0: clamp(4.25rem, 15vmin, 9.5rem);  /* aperture radius at rest */
  --air: clamp(1.4rem, 2.6vw, 2.75rem);  /* space between aperture and words */
  --r: var(--r0);                        /* current radius, driven by script.js */
  --open: 0;                             /* 0 closed → 1 fully open */
  --cap: 0;                              /* caption visibility */
  --cy: 50vh;                            /* vertical centre of the aperture */

  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}
@supports (height: 100svh) {
  .hero__stage { --cy: 50svh; }
}

.hero__lens {
  position: absolute;
  inset: 0;
  clip-path: circle(var(--r) at 50% var(--cy));
}
.hero__lens img {
  display: block;
  width: 100%;
  height: 100%;
  margin-inline: auto;
  object-fit: cover;
  object-position: 50% 6%;
  transform: scale(calc(1.2 - 0.2 * var(--open)));
  transform-origin: 50% var(--cy);
}
/* The opening photograph is vertical. Stretched across a wide screen it would keep only a thin
   band of itself, so there it stands as a column in the middle of the dark stage and fades out
   at the sides. On phones and other tall screens it still fills the whole screen. */
@media (min-aspect-ratio: 11 / 10) {
  .hero__lens img {
    width: 110vh;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  }
}
/* On tall screens the lit collar sits well above the middle of the photo, so the closed aperture
   would show only dark cloth. Start the photo lower and let it rise into place as the aperture opens. */
@media (max-aspect-ratio: 4 / 5) {
  .hero__lens img {
    transform: translateY(calc((1 - var(--open)) * 24%)) scale(calc(1.2 - 0.2 * var(--open)));
  }
}
.hero__lens::after {            /* darkens the foot of the photo for the caption */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.82), rgb(0 0 0 / 0) 55%);
  opacity: var(--cap);
}

/* Everything that must stay inside the visible area on phones. */
.hero__safe {
  position: absolute;
  inset: 0 0 auto;
  height: 100vh;
  height: 100svh;
}

.hero__probe { position: absolute; width: var(--r0); height: 0; visibility: hidden; }

.hero__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--r) * 2 + 1.25rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 50%;
  opacity: calc(1 - var(--open) * 5);
}

.hero__title {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr calc(var(--r0) * 2 + var(--air) * 2) 1fr;
  align-items: center;
  font-size: clamp(3.25rem, 10vw, 11rem);
  font-weight: 460;
  line-height: 1;
  pointer-events: none;
}
/* The first word of the title stands upright; the second leans. */
.hero__word--b { font-style: italic; }

.hero__word {
  opacity: calc(1 - var(--open) * 2.6);
  will-change: transform, opacity;
}
.hero__word--a {
  grid-column: 1;
  justify-self: end;
  transform: translate3d(calc(var(--open) * -42vw), 0, 0);
}
.hero__word--b {
  grid-column: 3;
  justify-self: start;
  transform: translate3d(calc(var(--open) * 42vw), 0, 0);
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3.5vh, 2.25rem);
  translate: -50% 0;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  white-space: nowrap;
  font-size: var(--small);
  color: rgb(255 255 255 / 0.85);
  opacity: calc(1 - var(--open) * 1.7);
}
.hero__stop {
  min-width: 3.1ch;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.hero__caption {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  opacity: var(--cap);
  transform: translate3d(0, calc((1 - var(--cap)) * 1.25rem), 0);
}
.hero__lede {
  max-width: 16em;
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: var(--cut-text);
  font-size: clamp(1.625rem, 3.3vw, 3.125rem);
  font-weight: 520;
  letter-spacing: -0.008em;
  line-height: 1.16;
  text-wrap: balance;
  text-shadow: 0 1px 1.25rem rgb(0 0 0 / 0.6);   /* it sits on a photograph */
}
.hero__meta {
  display: grid;
  gap: 0.15rem;
  justify-items: end;
  font-size: 1rem;
  text-shadow: 0 1px 1rem rgb(0 0 0 / 0.6);
}
.hero__meta .tags { color: rgb(255 255 255 / 0.86); }

/* One load sequence: the words arrive while script.js opens the aperture.
   It starts shut so nothing jumps before the script takes over. */
.js:not(.static) .hero__stage { --r: 0px; }
.js:not(.static) .hero__word { animation: word-in 1.3s var(--ease) both; }
.js:not(.static) .hero__word--b { animation-delay: 0.09s; }
.js:not(.static) .hero__cue { animation: cue-in 1s 0.9s var(--ease-light) both; }

@keyframes word-in { from { opacity: 0; translate: 0 0.16em; } }
@keyframes cue-in  { from { opacity: 0; } }

/* 5. Statement ------------------------------------------------------------- */

.statement { padding-block: clamp(7rem, 19vw, 15rem) clamp(1rem, 4vw, 4rem); }

.statement__text {
  max-width: 19em;
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 16;
  font-size: clamp(1.875rem, 4.4vw, 4.25rem);
  font-weight: 480;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}
.statement__aside {
  max-width: 34ch;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  margin-left: auto;
  color: var(--dim);
}

/* 6. Chapters and photo frames ---------------------------------------------- */

.chapter { padding-top: var(--section); }

.chapter__head,
.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 0.75rem;
  align-items: end;
  margin-bottom: clamp(2.25rem, 5vw, 4.5rem);
}

.chapter__title,
.section-head__title {
  grid-column: 1 / span 8;
  font-size: clamp(3.25rem, 10.5vw, 10rem);
}
.chapter__note,
.section-head__note {
  grid-column: 9 / -1;
  max-width: 34ch;
  padding-bottom: 0.9em;
  color: color-mix(in srgb, var(--fg) 90%, transparent);
}

/* Feature + grid: one large photograph beside four small ones, all 3:4.
   Four equal columns; the feature takes two columns and two rows. Because the
   row gap is 4/3 of the column gap, two small rows are exactly as tall as the
   feature. The width is capped so the feature always fits on screen. */
.chapter__frames {
  --tile-gap: clamp(0.5rem, 1.1vw, 1rem);
  --radius: clamp(0.625rem, 1.1vw, 1.125rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--tile-gap);
  row-gap: calc(var(--tile-gap) * 4 / 3);
  width: min(100%, calc((100vh - 8rem) * 1.5 + var(--tile-gap)));
}
.frame { position: relative; }
.frame--feature { grid-column: span 2; grid-row: span 2; }

/* Flipped chapters put the feature on the right and hang off the right edge. */
.chapter--flip .chapter__frames { margin-left: auto; }
.chapter--flip .frame--feature { grid-column: 3 / span 2; grid-row: 1 / span 2; }

.frame__open,
.about__photo,
.reel__poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  background: var(--wash);
}
.frame__open {
  padding: 0;
  border: 0;
  cursor: zoom-in;
}
.frame__open:focus-visible { outline-offset: 4px; }

/* The image is a little taller than its frame so it can drift as you scroll. */
.frame__open img,
.about__photo img,
.reel__poster img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  max-width: none;
  object-fit: cover;
  transform: translate3d(0, calc(var(--par, 0) * -6%), 0);
}

/* Photographs "develop" the first time they come into view. */
.js:not(.static) .frame__open img,
.js:not(.static) .about__photo img,
.js:not(.static) .reel__poster img {
  opacity: 0;
  filter: saturate(0) contrast(0.75) brightness(1.25);
  transition: opacity 0.9s var(--ease-light), filter 1.9s var(--ease-light);
}
.js:not(.static) .is-in > img {
  opacity: 1;
  filter: none;
}

.frame__hint {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  opacity: 0;
  scale: 0.8;
  transition: opacity 0.3s, scale 0.5s var(--ease);
}
@media (hover: hover) {
  .frame__open:hover .frame__hint { opacity: 1; scale: 1; }
}
.frame__open:focus-visible .frame__hint { opacity: 1; scale: 1; }

/* Captions sit over the foot of the photograph so the grid stays tight.
   They appear on hover or keyboard focus; on touch screens only the
   feature shows its caption, and the viewer shows the rest. */
.frame figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.1rem 1rem;
  padding: 2.75rem clamp(0.7rem, 1.2vw, 1.1rem) clamp(0.65rem, 1.1vw, 1rem);
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(to top, rgb(0 0 0 / 0.74), rgb(0 0 0 / 0));
  color: #fff;
  font-size: var(--small);
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
}
.frame figcaption .tags { color: rgb(255 255 255 / 0.88); }
.frame__title { font-weight: 600; }
.frame:focus-within figcaption { opacity: 1; }
@media (hover: hover) {
  .frame:hover figcaption { opacity: 1; }
}
@media (hover: none) {
  .frame--feature figcaption { opacity: 1; }
}

/* 7. Motion, Bookings, About, Contact ---------------------------------------- */

.motion { padding-top: var(--section); }

.reels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.reel {
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
}
.reel:focus-visible { outline-offset: 4px; border-radius: var(--radius); }
.reel__poster { aspect-ratio: 9 / 16; }
.reel__poster::after {          /* darkens the foot of the poster for its label */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0) 42%);
}
.reel__label {
  position: absolute;
  left: clamp(0.75rem, 1.4vw, 1.25rem);
  right: clamp(0.75rem, 1.4vw, 1.25rem);
  bottom: clamp(0.75rem, 1.4vw, 1.25rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 1px 0.75rem rgb(0 0 0 / 0.7);
}
.reel__play {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: scale 0.5s var(--ease), background-color 0.3s;
}
@media (hover: hover) {
  .reel:hover .reel__play { scale: 1.1; background: rgb(255 255 255 / 0.3); }
}

.bookings { padding-block: var(--section) 0; }

.specs { border-bottom: 1px solid var(--rule); }
.specs__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--gap);
  align-items: baseline;
  padding-block: clamp(1.25rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.specs dt { grid-column: 1 / span 3; color: var(--accent); }
.specs dd {
  grid-column: 4 / span 6;
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: var(--cut-text);
  font-size: clamp(1.375rem, 2.5vw, 2.125rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.24;
}
.specs small {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--dim);
}
/* The starting price sits at the right end of its row, like a price on a programme. */
.specs .specs__price {
  grid-column: 10 / -1;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}
/* The deposit sits under its price, quieter than the price. */
.specs .specs__deposit {
  margin-top: 0.2rem;
  font-size: var(--small);
  text-align: right;
}
.specs__from,
.specs__unit {
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 450;
  letter-spacing: 0;
  color: var(--dim);
}
/* Book sits under the price. It opens the form below with this row already chosen. */
.specs .specs__book {
  grid-column: 10 / -1;
  grid-row: 2;
  display: flex;
  justify-self: end;
  align-self: start;
  margin-top: 0.75rem;
}
.book {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 1.4rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--accent);
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
/* Hover looks are for pointers only: on a touch screen they would stick after a tap. */
@media (hover: hover) {
  .book:hover { background-color: var(--accent); color: var(--on-accent); }
}
.bookings__terms {
  max-width: 62ch;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  font-size: var(--small);
  line-height: 1.55;
  color: var(--dim);
}
/* How booking works: four steps in order, then the deposit rule. The numbers are real:
   each step only happens once the one before it has. */
.process { margin-top: clamp(3.5rem, 8vw, 7rem); }
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) var(--gap);
  margin: clamp(1.25rem, 2.6vw, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.process__steps li {
  counter-increment: step;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.process__steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: var(--cut-title);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-variant-numeric: lining-nums;
  font-weight: 480;
  line-height: 1;
  color: var(--accent);
}
.process__steps h4 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: var(--cut-text);
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.process__steps p { color: var(--dim); }
.process__rule {
  max-width: 62ch;
  margin-top: clamp(1.75rem, 3.4vw, 2.75rem);
}
.process__rule strong { font-weight: 650; color: var(--accent); }
@media (max-width: 63.99rem) {
  .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  /* On a phone the steps stack, each with its number beside it. */
  .process__steps { grid-template-columns: minmax(0, 1fr); }
  .process__steps li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 0.5rem; }
  .process__steps li::before { grid-row: 1 / span 2; margin-bottom: 0; font-size: 2.25rem; }
  .process__steps h4, .process__steps p { grid-column: 2; }
}

.specs__quote {
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* Booking: dates from a calendar, a start time, and a request written from the answers.
   script.js sets data-send on .quote: "email" when booking-settings.js holds a key (the request
   goes to Sepehr's inbox), otherwise "dm" (the visitor copies it into Instagram). Parts marked
   data-mode show only in their own mode; until the script has run, the Instagram version shows. */
.quote {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: clamp(3.5rem, 8vw, 7rem);
  color-scheme: dark;
}
.quote__intro,
.quote__form,
.quote__fallback { grid-column: 1 / -1; }
.quote__fallback { justify-self: start; }
.quote__title {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: var(--cut-text);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.quote__intro p { max-width: 46ch; color: var(--dim); }
.quote__intro p + p { margin-top: 0.6rem; }
@media (min-width: 64rem) {
  .quote__intro { grid-column: 1 / span 3; }
  .quote__form,
  .quote__fallback { grid-column: 4 / -1; }
}
.no-js .quote__form,
.no-js .quote__how,
.js .quote__fallback { display: none; }
.quote:not([data-send="email"]) [data-mode="email"],
.quote[data-send="email"] [data-mode="dm"] { display: none; }
.quote [hidden],
.quote__trap { display: none; }
/* The Invoices form needs the email key to work, so without one (or without JavaScript)
   only its Instagram line shows. */
.records:not([data-send="email"]) .records__form,
.records[data-send="email"] .records__dm { display: none; }

/* Invoices: Request opens a short form inside its own row, so nobody is sent down the page.
   The open row's button stays lit. */
.specs .specs__quick {
  grid-column: 4 / -1;
  grid-row: 3;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.6;
  color-scheme: dark;
}
.quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem var(--gap);
}
.quick__actions { grid-column: 1 / -1; }
.book[aria-expanded="true"] { background-color: var(--accent); color: var(--on-accent); }

.quote__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem var(--gap);
}
.field { display: grid; align-content: start; gap: 0.45rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: var(--small); color: var(--dim); }

.control {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  border-radius: 0.875rem;
  background-color: var(--wash);
  color: var(--fg);
  font: inherit;
  line-height: 1.5;
  transition: border-color 0.25s, background-color 0.25s;
}
.control::placeholder { color: color-mix(in srgb, var(--dim) 72%, transparent); opacity: 1; }
.control:hover { border-color: color-mix(in srgb, var(--fg) 46%, transparent); }
.control:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.control[aria-invalid="true"] { border-color: #ff9d8c; }
select.control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f5eee6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem;
  cursor: pointer;
}
select.control option { background: #1b1210; color: #f5eee6; }
textarea.control { resize: vertical; }
textarea.quote__message {
  background-color: transparent;
  border-style: dashed;
  resize: none;
  overflow: hidden;
}

/* Photos, video or both: three buttons, one of them lit. */
.choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.choice label { position: relative; display: block; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: grid;
  place-items: center;
  min-height: 3.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  border-radius: 0.875rem;
  background-color: var(--wash);
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.choice input:hover + span { border-color: color-mix(in srgb, var(--fg) 46%, transparent); }
.choice input:checked + span {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The calendar. Days are buttons: tap one to choose it, tap again to let it go.
   Booked days are hatched and struck through; days that have passed are dimmed. */
.quote__form .cal { grid-row: span 3; }
.cal__box {
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  border-radius: 0.875rem;
  background-color: var(--wash);
}
.cal__head {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
}
.cal__month {
  text-align: center;
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: var(--cut-text);
  font-size: clamp(1.125rem, 5.4vw, 1.4375rem);   /* the longest month still fits on one line on a small phone */
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.cal__turn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color 0.25s;
}
@media (hover: hover) {
  .cal__turn:hover { background-color: color-mix(in srgb, var(--fg) 12%, transparent); }
}
.cal__turn:disabled { opacity: 0.28; background: none; cursor: default; }
.cal__turn svg {
  width: 0.5rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cal__week,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.cal__week {
  margin-top: 0.5rem;
  padding-bottom: 0.35rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--dim);
}
.cal__grid { grid-auto-rows: 2.75rem; }   /* always six rows, so the form doesn't jump between months */
.cal__day {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0.625rem;
  background: none;
  font-variant-numeric: lining-nums tabular-nums;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
@media (hover: hover) {
  .cal__day:hover { background-color: color-mix(in srgb, var(--fg) 13%, transparent); }
}
.cal__day:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
.cal__day.is-today::after {
  content: "";
  position: absolute;
  bottom: 0.3rem;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: currentColor;
}
.cal__day[aria-pressed="true"] {
  background-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.cal__day:disabled {
  background: none;
  color: color-mix(in srgb, var(--dim) 42%, transparent);
  cursor: default;
}
.cal__day.is-booked,
.cal__swatch--booked {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--fg) 5%, transparent) 0 4px,
    color-mix(in srgb, var(--fg) 20%, transparent) 4px 5px);
}
.cal__day.is-booked {
  color: color-mix(in srgb, var(--dim) 78%, transparent);
  text-decoration: line-through;
  cursor: not-allowed;
}
.cal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  min-height: 2.25rem;
  margin-top: 0.5rem;
  padding-inline: 0.25rem;
  font-size: var(--small);
}
.cal__key { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; color: var(--dim); }
.cal__key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.cal__swatch { width: 0.875rem; height: 0.875rem; border-radius: 0.25rem; }
.cal__swatch--picked { background: var(--accent); }
.cal__clear { padding: 0; border: 0; background: none; cursor: pointer; }

/* Where?: matching places drop down under the field as the visitor types. */
.place__box { position: relative; }
.place__menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--fg) 9%, var(--bg));   /* solid: the form behind must not show through */
  box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 0.55);
}
.place__list li {
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 1rem;
  line-height: 1.35;
  cursor: pointer;
}
.place__list li + li { border-top: 1px solid var(--rule); }
.place__list li[aria-selected="true"] { background-color: color-mix(in srgb, var(--fg) 12%, transparent); }
@media (hover: hover) {
  .place__list li:hover { background-color: color-mix(in srgb, var(--fg) 12%, transparent); }
}
.place__list small { font-size: var(--small); color: var(--dim); }
.place__credit {
  padding: 0.4rem 1rem 0.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--dim);
}
.place__map { justify-self: start; font-size: var(--small); }

.quote__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.quote__actions .button { border: 0; cursor: pointer; }
.quote__actions .button:disabled { opacity: 0.55; scale: none; cursor: default; }
/* When requests go by email, copying for Instagram is the quieter second choice. */
.quote[data-send="email"] .quote__copy {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.3s;
}
.quote[data-send="email"] .quote__copy:hover { scale: none; color: var(--accent); }
.quote__status { flex-basis: 100%; min-height: 1.55em; font-size: var(--small); line-height: 1.55; color: var(--fg); }

.about { padding-block: var(--section); }
.about__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 2.5rem;
  align-items: center;
}
.about__photo { grid-column: 1 / span 5; }
.about__text { grid-column: 7 / -1; }
.about__title {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-variation-settings: "opsz" 18;
  font-size: clamp(2.25rem, 4.8vw, 4.5rem);
  font-weight: 500;
  line-height: 1.1;
}
.about__text p { max-width: 58ch; }
.about__text p + p { margin-top: 1em; }

.contact {
  padding-block: clamp(4rem, 9vw, 8rem) max(1.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}
.contact__title {
  max-width: 12em;
  font-size: clamp(2.25rem, 7vw, 7.25rem);
  line-height: 1.06;
}
.contact__note { margin-top: clamp(1.25rem, 2.5vw, 2rem); color: var(--dim); }
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}
.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(4rem, 10vw, 8rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--small);
  color: var(--dim);
}

/* 8. Lightbox --------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #f1f5f6;
  overflow: hidden;
}
.lightbox::backdrop { background: none; }

.lightbox__shade {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
}

.lightbox__stage {
  position: absolute;
  inset: 4.5rem clamp(0.75rem, 5vw, 5rem) 5.75rem;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: zoom-out;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.75rem;
  object-fit: cover;
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
}

.round {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  cursor: pointer;
  transition: background-color 0.25s, scale 0.4s var(--ease);
}
.round:hover { background: rgb(255 255 255 / 0.22); }
.round:active { scale: 0.92; }

.lightbox__close {
  position: absolute;
  top: max(0.875rem, env(safe-area-inset-top));
  right: clamp(0.875rem, 3vw, 2rem);
}

.lightbox__bar {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(0.875rem, 3vw, 2rem);
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
}
.lightbox__caption { display: grid; gap: 0.1rem; font-size: 1rem; }
.lightbox__title { font-weight: 600; }
.lightbox__tags { color: rgb(255 255 255 / 0.8); }
.lightbox__controls { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.lightbox__count {
  margin-right: 0.5rem;
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.8);
}

html.is-locked { overflow: hidden; }

/* 9. Small screens ---------------------------------------------------------- */

/* Portrait: the words stack above and below the aperture. */
@media (max-aspect-ratio: 4 / 5) {
  .hero__stage {
    --r0: clamp(4.25rem, 21vw, 9rem);
    --air: clamp(0.75rem, 2.5vh, 2rem);
  }
  .hero__title {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr calc(var(--r0) * 2 + var(--air) * 2) 1fr;
    font-size: clamp(4rem, 22vw, 11rem);
    line-height: 0.9;
  }
  .hero__word--a {
    grid-row: 1;
    align-self: end;
    justify-self: center;
    transform: translate3d(0, calc(var(--open) * -38vh), 0);
  }
  .hero__word--b {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    justify-self: center;
    transform: translate3d(0, calc(var(--open) * 38vh), 0);
  }
}

@media (max-width: 47.99rem) {
  /* Navigation folds into a panel that grows out of the bar. */
  .nav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 3rem 0fr;
    padding-right: 0.3rem;
    transition: grid-template-rows 0.55s var(--ease), background-color 0.4s;
  }
  .nav.is-open {
    grid-template-rows: 3rem 1fr;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
  }

  .nav__toggle {
    display: block;
    height: 2.4rem;
    padding: 0 0.9rem;
    border: 0;
    border-radius: 999px;
    background: none;
    font-weight: 560;
    cursor: pointer;
  }
  .nav__links {
    grid-column: 1 / -1;
    align-self: stretch;   /* take the row's height so the panel clips as it grows */
    display: block;
    min-height: 0;
    overflow: hidden;
    padding-right: 0.9rem;
    visibility: hidden;
    transition: visibility 0s 0.55s;
  }
  .nav.is-open .nav__links { visibility: visible; transition-delay: 0s; }
  .nav__links a {
    padding: 0.7rem 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    color: var(--fg);
    font-family: var(--display);
    font-optical-sizing: none;
    font-variation-settings: var(--cut-text);
    font-size: 1.75rem;
    font-weight: 520;
    letter-spacing: -0.005em;
    line-height: 1.2;
  }
  .nav__links a[aria-current="true"] { background: none; }
  .nav__links li:last-child a { padding-bottom: 1rem; }

  .hero__caption { bottom: 1.5rem; }
  .hero__meta { justify-items: start; }

  .statement__aside { margin-left: 0; }

  .chapter__title, .section-head__title,
  .chapter__note, .section-head__note { grid-column: 1 / -1; }
  .chapter__note, .section-head__note { padding-bottom: 0; }

  /* The feature fills the width; the four small photographs sit two across below. */
  .chapter__frames {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .frame--feature,
  .chapter--flip .frame--feature { grid-column: 1 / -1; grid-row: auto; }

  /* Reels become a row you swipe through, bleeding off the screen edge. */
  .reels {
    display: flex;
    gap: 0.75rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .reels::-webkit-scrollbar { display: none; }
  .reels li { flex: 0 0 62%; scroll-snap-align: start; }

  /* The name and its price share the first line; what it covers runs underneath. */
  .specs__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; column-gap: 1rem; row-gap: 0.4rem; }
  .specs dt { grid-column: 1; grid-row: 1; }
  .specs dd { grid-column: 1 / -1; grid-row: 2; }
  .specs .specs__price { grid-column: 2; grid-row: 1; font-size: 1.375rem; }
  .specs .specs__book { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 0.5rem; }
  .specs .specs__quick { grid-column: 1 / -1; grid-row: 3; margin-top: 0.75rem; }
  .quick { grid-template-columns: minmax(0, 1fr); }

  .quote__form { grid-template-columns: minmax(0, 1fr); }
  .quote__form .cal { grid-row: auto; }

  .about__photo, .about__text { grid-column: 1 / -1; }
  .about__photo { width: 82%; }

  .lightbox__stage { inset: 4.25rem 0.75rem 6.25rem; }
  .lightbox__count { display: none; }
}

/* 9b. Booking sheet ---------------------------------------------------------
   The booking form lives in a sheet that opens from every Book button: a Book button that
   stays in the menu, the sheet itself with its three steps, and the one button that ends the
   Bookings section. It comes after "Small screens" so its own phone rules have the last word. */

/* Book in the menu */
.nav__links { margin-left: auto; }
.nav__book {
  order: 5;                                  /* last, after the tabs */
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  margin-left: 0.5rem;
  padding: 0.3rem 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transition: scale 0.45s var(--ease);
}
.nav__book:hover { scale: 1.04; }
.nav__book:active { scale: 0.96; }

/* The button that ends Bookings */
.bookings__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.bookings__cta-note { color: var(--dim); }

/* The sheet */
.sheet {
  /* it always wears the curtain red, whichever room of the page is behind it */
  --bg: var(--velvet-bg);
  --fg: var(--velvet-fg);
  --dim: var(--velvet-dim);
  --rule: color-mix(in srgb, var(--fg) 16%, transparent);
  --wash: color-mix(in srgb, var(--fg) 8%, transparent);

  position: fixed;
  inset: 0;
  width: min(47rem, 100% - 2rem);
  height: min(50rem, 100dvh - 2rem);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background:
    radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--velvet-glow) 26%, transparent), transparent 70%),
    color-mix(in srgb, var(--fg) 4%, var(--bg));
  color: var(--fg);
  box-shadow: 0 2.5rem 6rem rgb(0 0 0 / 0.65), inset 0 0 0 1px var(--rule);
  overflow: hidden;
  color-scheme: dark;
}
.sheet::backdrop {
  background: rgb(8 2 3 / 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.sheet__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }

.sheet__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  padding: 1.4rem clamp(1.25rem, 4vw, 2.25rem) 0;
}
.sheet__count { grid-column: 1; font-size: var(--small); color: var(--dim); }
.sheet__title {
  grid-column: 1;
  margin: 0.15rem 0 0;
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: var(--cut-text);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.1;
  outline: none;
}
.sheet__close { grid-column: 2; grid-row: 1 / span 2; align-self: start; color: inherit; }
/* how far along: a line that fills, like house lights coming up */
.sheet__bar { grid-column: 1 / -1; height: 2px; margin-top: 1.1rem; border-radius: 2px; background: var(--rule); overflow: hidden; }
.sheet__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--done, 0.3333));
  transform-origin: 0 50%;
  transition: transform 0.8s var(--ease);
}

.sheet__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.25rem) 1.25rem;
}
.sheet .quote { display: block; margin: 0; }
.sheet .quote[hidden] { display: none; }
.sheet .quote__form { display: block; }
.step {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem var(--gap);
  align-content: start;
}
/* with a mouse the days can be a little shorter, so the whole first step shows without scrolling */
@media (hover: hover) and (min-width: 48rem) {
  .sheet .cal__grid { grid-auto-rows: 2.5rem; }
}
/* the chosen service's price and deposit, beside the calendar */
.sheet__price {
  align-self: start;
  padding: 0.85rem 1rem;
  border-radius: 0.875rem;
  background: var(--wash);
  color: var(--dim);
}
.sheet__price strong { font-weight: 600; color: var(--fg); }
.sheet__price:empty { display: none; }

/* On the last step the bar's button sends the request, so it is always in sight. The form's own
   Send button still does the sending; it just isn't shown twice, and what it reports (a missing
   name, a failed send) is shown in the bar instead of under the message. */
.sheet .quote__send,
.sheet .quote__status { display: none; }

.sheet__done { display: grid; gap: 1.1rem; justify-items: start; align-content: center; min-height: 100%; max-width: 34rem; }
.sheet__done[hidden] { display: none; }
.sheet__done p { color: var(--dim); }
.sheet__done .sheet__done-title {
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: var(--cut-title);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 480;
  line-height: 1.04;
  color: var(--fg);
}
.sheet__done .button { border: 0; cursor: pointer; }

.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1rem clamp(1.25rem, 4vw, 2.25rem) max(1rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}
.sheet__foot[hidden],
.sheet__foot [hidden] { display: none; }
.sheet__say { flex-basis: 100%; font-size: var(--small); color: var(--fg); }
.sheet__say:empty { display: none; }
.sheet__back { padding: 0.5rem 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.sheet__note { margin-right: auto; font-size: var(--small); color: var(--dim); }
.sheet__next { margin-left: auto; border: 0; cursor: pointer; }
.sheet__next:disabled { opacity: 0.55; scale: none; cursor: default; }

/* the days and the Book buttons answer a press */
.book { transition: background-color 0.3s, color 0.3s, scale 0.45s var(--ease); }
.book:active, .cal__turn:active { scale: 0.95; }
.cal__day { transition: background-color 0.25s, color 0.25s, scale 0.35s var(--ease); }
.cal__day:active:not(:disabled) { scale: 0.88; }

@media (max-width: 47.99rem) {
  /* the bar: name, Book, Menu on one line; the tabs still fold out underneath */
  .nav { grid-template-columns: minmax(0, 1fr) auto auto; }
  .nav__mark { font-size: clamp(0.875rem, 4.6vw, 1.25rem); }   /* a little smaller, to make room for Book */
  .nav__book { grid-column: 2; grid-row: 1; align-self: center; min-height: 2.1rem; margin: 0; padding: 0.2rem 0.8rem; }
  .nav__toggle { grid-column: 3; grid-row: 1; }
  .nav__links { margin-left: 0; }

  /* on a phone the sheet is the whole screen and comes up from the bottom */
  .sheet { inset: auto 0 0; width: 100%; height: 100dvh; margin: 0; border-radius: 0; }
  .step { grid-template-columns: minmax(0, 1fr); }
  .sheet__note { display: none; }
}
@media (max-width: 22.5rem) {
  /* the smallest phones: everything in the bar gives up a little so the name still fits */
  .nav__mark { font-size: 0.8125rem; }
  .nav__book { padding-inline: 0.65rem; }
  .nav__toggle { padding-inline: 0.6rem; }
}

/* Without JavaScript the sheet can't open: the Book button in the menu and the one that ends
   Bookings are put away, and the Instagram button shows in their place. */
.no-js .nav__book,
.no-js .bookings__cta [data-book],
.no-js .bookings__cta-note { display: none; }

/* 10. No-JS and reduced motion ------------------------------------------------ */

/* Without scripting, or when motion is unwelcome, the hero is a still photograph. */
:is(.no-js, .static) { scroll-behavior: auto; }
:is(.no-js, .static) .hero { height: auto; }
:is(.no-js, .static) .hero__stage { --cap: 1; position: relative; height: 100vh; height: 100svh; }
:is(.no-js, .static) .hero__lens { clip-path: none; }
:is(.no-js, .static) .hero__lens img { transform: none; filter: brightness(0.7); }
:is(.no-js, .static) :is(.hero__ring, .hero__cue) { display: none; }
:is(.no-js, .static) .hero__title {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0 0.22em;
  padding-bottom: 12vh;
}
:is(.no-js, .static) .hero__word { transform: none; }

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}