/* Winter Mason Pictures: light, minimal site styles */

:root {
  --ink: #111;
  --muted: #595959;
  --line: #e5e5e5;
  --paper: #fff;
  --wash: #f4f3f1;
  --error: #b3261e;
  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 48px);
  --header: 76px;
  --font: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* scroll-padding keeps links to page sections, focused fields and scripted scrolling clear of the sticky header */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 1rem); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.75 var(--font); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 1rem; }

/* Header: stays at the top of the window while the page scrolls */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: var(--paper); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header); }
.brand { display: block; padding-block: .75rem; font-family: "Audrey WM", var(--font); font-size: clamp(1.05rem, 2vw, 1.5rem); font-weight: 400; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: inherit; white-space: nowrap; }
.brand img { width: clamp(180px, 30vw, 440px); }
.site-nav ul { display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); margin: 0; padding: 0; list-style: none; }
.site-nav a { display: block; padding: .4rem 0; border-bottom: 1px solid transparent; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; }
.site-nav a:hover { border-bottom-color: currentColor; }
.menu-toggle { display: none; }

/* Home: the header sits over the slideshow photos, and stays at the top once they scroll away, turning solid white
   (is-solid, set by site.js) so it can be read over the page. Without JavaScript it scrolls away with the photos. */
/* The home page is the only overlay header, and it keeps the wordmark off the intro (the big centred name is the logo there). */
.site-header--overlay .brand { display: none; }
.site-header--overlay { position: absolute; top: 0; right: 0; left: 0; z-index: 50; border-bottom-color: transparent; background: transparent; color: #fff; }
.js .site-header--overlay { position: fixed; }
.site-header--overlay .brand img { filter: brightness(0) invert(1); }
.site-header--overlay .site-nav a { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.site-header--overlay a:focus-visible, .site-header--overlay button:focus-visible { outline-color: #fff; }
.site-header--overlay.is-solid, .site-header--overlay.is-menu-open { border-bottom-color: var(--line); background: var(--paper); color: var(--ink); }
.site-header--overlay.is-solid .brand img, .site-header--overlay.is-menu-open .brand img { filter: none; }
.site-header--overlay.is-solid .site-nav a, .site-header--overlay.is-menu-open .site-nav a { text-shadow: none; }
.site-header--overlay.is-solid a:focus-visible, .site-header--overlay.is-solid button:focus-visible,
.site-header--overlay.is-menu-open a:focus-visible, .site-header--overlay.is-menu-open button:focus-visible { outline-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .site-header--overlay, .site-header--overlay .brand img { transition: background-color .3s ease, color .3s ease, border-color .3s ease, filter .3s ease; }
}

@media (max-width: 720px) {
  :root { --header: 63px; }
  .header-inner { flex-wrap: wrap; row-gap: .5rem; min-height: 0; padding-block: .75rem; }
  .brand { padding-block: .5rem; }
  .brand img { width: clamp(150px, 52vw, 230px); }
  .site-nav { width: 100%; }
  .site-nav ul { flex-wrap: wrap; gap: .25rem 1.25rem; }
  .js .menu-toggle { display: inline-block; padding: .5rem .85rem; border: 1px solid currentColor; background: none; color: inherit; font: inherit; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
}
/* Beside the name, the six navigation items only fit on one row on wide windows; narrower than that they fold into
   the Menu button, exactly as on phones. The home page's header has no name, so its items still fit on one row. */
@media (min-width: 721px) and (max-width: 1160px) {
  .site-header:not(.site-header--overlay) .header-inner { flex-wrap: wrap; row-gap: .5rem; }
  .site-header:not(.site-header--overlay) .site-nav { width: 100%; }
  .site-header:not(.site-header--overlay) .site-nav ul { flex-wrap: wrap; gap: .25rem 1.25rem; }
  .js .site-header:not(.site-header--overlay) .menu-toggle { display: inline-block; padding: .5rem .85rem; border: 1px solid currentColor; background: none; color: inherit; font: inherit; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
  .js .site-header:not(.site-header--overlay) .site-nav { display: none; }
  .js .site-header:not(.site-header--overlay) .site-nav.is-open { display: block; }
  .js .site-header:not(.site-header--overlay) .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-header:not(.site-header--overlay) .site-nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
}

/* Shared type and buttons */
.page-intro { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem); text-align: center; }
.page-title { margin: 0 0 1rem; font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 300; line-height: 1.3; letter-spacing: .3em; text-transform: uppercase; }
.page-intro .page-title, .contact .page-title, .fees-hero .page-title { padding-inline-start: .3em; }
.lede { margin: 0 auto 1.75rem; max-width: 40rem; color: var(--muted); font-size: 1.05rem; }
.eyebrow { margin: 0 0 .75rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow a { color: var(--muted); text-decoration: none; }
.eyebrow a:hover { color: var(--ink); }
.btn { display: inline-block; padding: .9rem 2rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: inherit; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); }
/* Bold serif button, like the old Squarespace site's CONNECT and SUBMIT buttons */
.btn-bold { padding: .8rem 1.75rem; border-width: 2px; font-family: "Times New Roman", Times, Georgia, serif; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.btn-light { border-color: var(--paper); color: var(--paper); }
.btn-light:hover, .btn-light:focus-visible { background: var(--paper); color: var(--ink); }
.btn-light:focus-visible { outline-color: var(--paper); }

/* Home intro screen: shown over the home page by the script in its head (see site.js) */
.intro { display: none; }
.intro-open, .intro-open body { overflow: hidden; }
.intro-open .intro { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #d4bc9e; color: #fff; }
/* Beige pages carry the wordmark top-left and the navigation to its right, on one row. */
.intro-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.intro-logo { padding: clamp(1.25rem, 3.5vw, 2.4rem) 0 0 clamp(1.25rem, 5vw, 3.5rem); font-family: "Audrey WM", var(--font); font-size: clamp(.95rem, 1.4vw, 1.2rem); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: inherit; white-space: nowrap; }
.intro-logo:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.intro-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.25rem, 3.5vw, 2.4rem) clamp(1.25rem, 5vw, 3.5rem) 0; }
.intro-nav a { font-family: "Audrey WM", var(--font); font-size: clamp(.95rem, 1.25vw, 1.1rem); font-weight: 400; text-transform: uppercase; text-decoration: none; }
.intro-nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.intro-open .intro { cursor: pointer; }
.intro-center { display: grid; place-content: center; justify-items: center; gap: clamp(1.9rem, 4.5vw, 2.75rem); min-height: 0; padding: 0 1rem; }
.intro-name { margin: 0; padding-inline-start: .5em; font-family: "Audrey WM", var(--font); font-size: clamp(.95rem, 1.5vw, 1.25rem); font-weight: 400; letter-spacing: .5em; text-transform: uppercase; }
.intro-mark { position: relative; display: flex; align-items: center; gap: clamp(1.1rem, 2.8vw, 1.9rem); }
.intro-choice { display: block; padding: .5rem; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.intro-choice:focus-visible { outline: none; }
.intro-render { display: block; width: auto; height: clamp(3.25rem, 8.5vw, 6.5rem); filter: drop-shadow(0 .35rem .5rem rgba(84, 62, 34, .2)); }
/* Each picture sits in a box that also holds the light passing over it as the intro opens: a soft band of light, cut
   to the picture's own outline (the picture is its mask, --render, set by build.py) */
.intro-render-box { position: relative; display: block; }
.intro-sheen { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 252, 246, 0) 38%, rgba(255, 252, 246, .95) 50%, rgba(255, 252, 246, 0) 62%) 120% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--render) center / 100% 100% no-repeat; mask: var(--render) center / 100% 100% no-repeat; }
.intro-line { display: block; width: clamp(5rem, 24vw, 16rem); height: 1px; background: currentColor; }
/* PHOTOGRAPHY and SHOP FRAMES: a beige panel over the camera, line and frame, wiping in from the hovered picture's side
   while the word jolts in after it, overshooting a little before settling */
.intro-word { position: absolute; inset: -1.25rem -1rem; z-index: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #d4bc9e; clip-path: inset(0 100% 0 0); pointer-events: none; transition: clip-path .25s ease-in; }
.intro-frame .intro-word { clip-path: inset(0 0 0 100%); }
.intro-word > span, .intro-tow > span { font-family: "Audrey WM", Didot, "Bodoni 72", "Bodoni MT", Georgia, "Times New Roman", serif; font-size: clamp(1.5rem, 3.6vw, 2.9rem); font-weight: 400; line-height: 1.1; text-transform: uppercase; white-space: pre; }
/* The words are 3D like the camera and frame: white letters lit from above (a white-to-cream fill), standing out from
   the beige on three layers of warm beige depth (about 1px each at full size), with a soft shadow like the Photography
   page's frames */
.intro-word > span, .intro-tow > span { --depth: drop-shadow(0 .022em 0 #eee2d1) drop-shadow(0 .022em 0 #dfcdb5) drop-shadow(0 .022em 0 #c9b08e) drop-shadow(0 .14em .18em rgba(84, 62, 34, .3)); }
.intro-word > span { color: #fff; background-image: linear-gradient(180deg, #fff 0%, #fdfaf5 45%, #eadcc8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.intro-word > span, .intro-tow > .tow-word { filter: var(--depth); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .intro-word > span { -webkit-text-fill-color: currentColor; background-image: none; }
}
.intro-word > span { transform: translateX(-60%); transition: transform .25s ease-in; }
.intro-frame .intro-word > span { transform: translateX(60%); }
.intro.is-keyboard .intro-choice:focus-visible .intro-word, .intro-choice.is-revealed .intro-word { clip-path: inset(0); pointer-events: auto; transition: clip-path .4s cubic-bezier(.2, .85, .25, 1); }
.intro.is-keyboard .intro-choice:focus-visible .intro-word > span, .intro-choice.is-revealed .intro-word > span { transform: none; transition: transform .6s cubic-bezier(.3, 1.7, .45, 1); }
.intro.is-keyboard .intro-choice:focus-visible .intro-word { box-shadow: inset 0 0 0 2px var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .intro-word, .intro-word > span { transition: none !important; }
}
/* Click transitions (site.js): the word rises from the line as solid 3D letters (drawn with Three.js on .intro-3d), or
   as a flat copy of the word (.intro-tow) without WebGL, and carries the viewer through to the next page (.intro-sheet,
   uncovered from under .intro-cover). All of it is layered inside the intro: the page and its cover over the intro's
   own content, the word over them, and the camera and frame, passing by the viewer, in front of the word. */
/* The word crossing the screen is laid into the page it brings in: espresso, multiplied, so the colours of the
   bands run through its letters (as SUMMIT's word takes up its photo) */
.intro-3d, .intro-tow { mix-blend-mode: multiply; filter: brightness(.32) saturate(1.4) sepia(.35); }
.intro-3d { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.intro-tow { position: fixed; z-index: 2; display: grid; place-items: center; color: #fff; pointer-events: none; will-change: transform; }
.intro-tow > span { grid-area: 1 / 1; }
/* The flat word's letters rise one by one, each filled like the word on focus (each letter has its own fill: Chrome draws
   a fill clipped to the text of letters that move separately in the wrong place) */
.intro-tow .tow-letter { display: inline-block; color: #fff; background-image: linear-gradient(180deg, #fff 0%, #fdfaf5 45%, #eadcc8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .intro-tow .tow-letter { -webkit-text-fill-color: currentColor; background-image: none; }
}
/* With forced colours (e.g. Windows High Contrast) the browser draws the words plainly; the depth would only shadow
   the box behind them */
@media (forced-colors: active) {
  .intro-word > span, .intro-tow > span { --depth: none; }
}
.intro.is-passing .intro-word { visibility: hidden; }
.intro.is-passing .intro-render-box { z-index: 3; }
/* The copy of the next page is laid out as that page is (.bare-page): at least the screen's height, and taller when its
   content is (on a phone, the Photography page's six buttons push its Instagram link below the screen) */
.intro-sheet { position: fixed; top: 0; right: 0; left: 0; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100vh; min-height: 100svh; background: #d4bc9e; color: #fff; pointer-events: none; will-change: transform; }
/* The cover: the intro's beige over the part of the next page not yet uncovered, fading out over --soft at its edge
   (its right edge for PHOTOGRAPHY, its left for SHOP FRAMES) */
.intro-cover { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; will-change: transform;
  background: linear-gradient(90deg, #d4bc9e calc(100% - 2 * var(--soft)), rgba(212, 188, 158, 0)); }
.intro-cover.is-mirrored { background: linear-gradient(270deg, #d4bc9e calc(100% - 2 * var(--soft)), rgba(212, 188, 158, 0)); }
/* The copy of the Photography page is white, as that page is (.photo-page). As it is uncovered its colour changes from
   the intro's beige to white, and the cover's with it (site.js), so the cover is then one colour with its soft edge
   drawn by a mask */
.intro-sheet.photo-page { background: #fff; color: #d4bc9e; }
.intro-cover.is-fading { background: #d4bc9e;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 2 * var(--soft)), transparent); mask: linear-gradient(90deg, #000 calc(100% - 2 * var(--soft)), transparent); }
.intro-cover.is-fading.is-mirrored {
  -webkit-mask: linear-gradient(270deg, #000 calc(100% - 2 * var(--soft)), transparent); mask: linear-gradient(270deg, #000 calc(100% - 2 * var(--soft)), transparent); }
/* PHOTOGRAPHY's passage (site.js): a nearer copy of the photograph around the word, and a farther one inside its
   letters, which are cut out by a mask (--word, the word drawn in white) and stand a little off the photograph around
   them, with a hairline of shade along one side and a soft shadow below. The camera and frame pass in front. */
.intro-reveal { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.intro-reveal img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; will-change: transform; }
.intro-reveal-back { opacity: 0; }
.intro-reveal-letters { position: absolute; inset: 0;
  filter: drop-shadow(-.18vmin 0 0 rgba(40, 30, 22, .28)) drop-shadow(0 .9vmin 1.6vmin rgba(30, 22, 16, .26)); }
.intro-reveal-word { position: absolute; top: 0; left: 0; overflow: hidden; opacity: 0; transform-origin: 0 0;
  will-change: transform, opacity; -webkit-mask: var(--word) 0 0 / 100% 100% no-repeat; mask: var(--word) 0 0 / 100% 100% no-repeat; }
.intro-reveal-haze { position: absolute; inset: 0; background: #fff; }
/* A bare page (Journal, Shop Frames, Booking, Photography): the intro screen's navigation and Instagram link */
html:has(body.bare-page) { background: #d4bc9e; }
.bare-page { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100vh; min-height: 100svh; background: #d4bc9e; color: #fff; }
.bare-main { display: grid; place-items: center; min-height: 0; padding: 0 1rem; }
/* The Photography page alone is white, its lettering (wordmark, navigation, Instagram link and the categories' names)
   in the beige the other bare pages are drawn on */
html:has(body.photo-page) { background: #fff; }
.bare-page.photo-page { background: #fff; color: #d4bc9e; }
/* Every other page but the home page is white in the same way (.page-white): on a bare page the wordmark, navigation
   and Instagram link are in the beige (and the pages with the site header are recoloured at the end of this file).
   Shop Frames' copy in the SHOP FRAMES passage is white too, so it changes from the intro's beige as it is uncovered,
   as the Photography page's does. */
html:has(body.page-white) { background: #fff; }
.bare-page.page-white, .intro-sheet.page-white { background: #fff; color: #d4bc9e; }
/* The Photography page's categories: 2-col × 3-row frosted-glass grid. --h is the unit the buttons' corners, shadow
   and light are sized in; the buttons themselves are 2.113 times as tall (68.5% taller than it, then 13% and 11%
   taller again: --ph), and the rows are closer together by exactly what the buttons gained, so the group keeps the
   same top and bottom edges (the gain is shared between the two gaps here, and between the five in the single column
   on a phone). The rows never come closer than --gap-min, so they can't overlap: on screens where that holds them
   apart (tall ones, and low wide ones) the group is that much taller. */
.bands { --ease: cubic-bezier(.22, .68, .28, 1); --h: clamp(60px, 7.5vh, 82px); --ph: calc(var(--h) * 2.1134);
  --gap-min: calc(var(--h) * .06);
  display: grid; grid-template-columns: 1fr 1fr;
  row-gap: max(calc(clamp(90px, 13vh, 120px) - var(--h) * 1.6701), var(--gap-min)); column-gap: clamp(14px, 2vw, 20px);
  width: min(78vw, 1100px); }
@media (max-width: 720px) {
  .bands { grid-template-columns: 1fr; width: min(88vw, 560px); row-gap: max(calc(clamp(90px, 13vh, 120px) - var(--h) * 1.3361), var(--gap-min)); }
}
/* The buttons' shadows and light reach past their edges; on a narrow screen that must not make the page scroll sideways */
.photo-main { overflow-x: clip; }
/* Each category is a frosted acrylic plate floating over the beige, drawn in separate layers: ::before the plate's
   shadow on the surface, ::after the light escaping from under the plate onto the surface, .band-glass the plate
   itself (a light frosted fill that blurs and lightens what is behind it, so the shadow shows through it only softly,
   plus a thin white edge), and .band-name the lettering on top.
   Sizes are in --h (set on .bands), so the proportions hold at every window size. */
@property --lift { syntax: "<number>"; inherits: true; initial-value: 0; }
.band { --lift: 0;
  position: relative; isolation: isolate; display: flex; align-items: center; height: var(--ph);
  padding: 0 clamp(1.4rem, 3vw, 2rem);
  border: 1px solid transparent; border-radius: calc(var(--h) * .15); background: none;
  color: rgba(255,255,255,.95); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: translate .28s var(--ease), --lift .28s var(--ease); }
.band::before, .band::after { content: ""; position: absolute; pointer-events: none; }
/* The shadow: the plate's own rounded shape, a little larger, well down and to the right, so the plate reads as
   floating. Where it lies outside the plate it is at full strength; the part directly behind the plate is masked
   down to under half, so through the frosted acrylic it shows only softly. The mask's full-strength parts are the
   strips right of and below the plate (--sx, --sy: how far the shadow reaches past it) and the sliver outside the
   plate's rounded corner. When the plate lifts on hover (--lift), the shadow falls a little farther away. */
.band::before { --sx: calc(var(--h) * .5 + var(--lift) * 2px); --sy: calc(var(--h) * .41 + var(--lift) * 5px);
  --r: calc(var(--h) * .15);
  inset: calc(-1px - var(--h) * .05); z-index: -2; border-radius: calc(var(--h) * .28);
  background: linear-gradient(170deg, rgba(48, 36, 26, .33), rgba(48, 36, 26, .27));
  translate: calc(var(--sx) - var(--h) * .05) calc(var(--sy) - var(--h) * .05);
  filter: blur(calc(var(--h) * (.05 + var(--lift) * .015)));
  -webkit-mask: linear-gradient(#000 0 0) right top / var(--sx) 100% no-repeat,
    linear-gradient(#000 0 0) left bottom / 100% var(--sy) no-repeat,
    radial-gradient(circle at 0 0, transparent var(--r), #000 calc(var(--r) + .5px)) right var(--sx) bottom var(--sy) / var(--r) var(--r) no-repeat,
    linear-gradient(rgba(0,0,0,.36) 0 0);
  mask: linear-gradient(#000 0 0) right top / var(--sx) 100% no-repeat,
    linear-gradient(#000 0 0) left bottom / 100% var(--sy) no-repeat,
    radial-gradient(circle at 0 0, transparent var(--r), #000 calc(var(--r) + .5px)) right var(--sx) bottom var(--sy) / var(--r) var(--r) no-repeat,
    linear-gradient(rgba(0,0,0,.36) 0 0); }
/* The light on the surface: a broad pool (sized by the button's height, so it stays a pool rather than a strip on
   long buttons) spreading out and down from under the plate's lower edge, about two thirds along, and fading on every
   side into the shadow. The mask fades it out a little way up inside the plate. Its hot spot on the plate's edge is
   .band-glass::after. */
.band::after { z-index: -1;
  left: calc(67.5% - var(--h) * 3.105); width: calc(var(--h) * 6.21); top: calc(var(--ph) - var(--h) * .4); height: calc(var(--h) * 1.35);
  background:
    radial-gradient(ellipse 41.3% 68% at 50% 29.6%, rgba(255,253,248,.66) 0%, rgba(255,253,248,.54) 20%,
      rgba(255,253,248,.38) 40%, rgba(255,253,248,.17) 60%, rgba(255,253,248,.05) 80%, rgba(255,253,248,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, rgba(0,0,0,.55) 20%, #000 29.6%);
  mask-image: linear-gradient(to bottom, transparent 8%, rgba(0,0,0,.55) 20%, #000 29.6%);
  filter: blur(calc(var(--h) * .06)); translate: 0 calc(var(--lift) * 3px); }
/* The plate: lightly frosted acrylic. The beige still comes through, softened and a little lighter; the fill is a
   touch brighter toward the top left, and glows where the light enters it along the lower edge. */
.band-glass { position: absolute; inset: -1px; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(calc(var(--h) * 1.62) calc(var(--h) * .34) at 67.5% 100%, rgba(255,255,255,.3),
      rgba(255,255,255,.1) 55%, rgba(255,255,255,0)),
    radial-gradient(ellipse 45% 110% at 5% 0%, rgba(255,255,255,.13), rgba(255,255,255,0) 70%),
    linear-gradient(100deg, rgba(255,251,245,.23), rgba(255,251,245,.17) 45%, rgba(255,251,245,.14));
  -webkit-backdrop-filter: blur(calc(var(--h) * .1)); backdrop-filter: blur(calc(var(--h) * .1));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.22), 0 -1px 0 rgba(60,42,26,.08); }
/* The plate's thin white edge: lit from the top left and falling off to the right and downward, and lit again where
   the light escapes */
.band-glass::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background:
    radial-gradient(calc(var(--h) * 1.485) calc(var(--h) * .5) at 67.5% 100%, #fff 0%, rgba(255,255,255,.9) 45%,
      rgba(255,255,255,0) 100%),
    radial-gradient(110% 170% at 0% 0%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.72) 35%, rgba(255,255,255,.45) 70%,
      rgba(255,255,255,.4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
/* Where the light escapes, it blooms across the plate's lower edge: brightest on the edge, soft on both sides of it,
   with no ends to it. It is part of the plate, so it lifts with it on hover. */
.band-glass::after { content: ""; position: absolute; pointer-events: none;
  left: calc(67.5% - var(--h) * 1.485); width: calc(var(--h) * 2.97); bottom: calc(var(--h) * -.13); height: calc(var(--h) * .26);
  background: radial-gradient(closest-side, rgba(255,255,255,.82), rgba(255,255,255,.5) 45%, rgba(255,255,255,0));
  filter: blur(calc(var(--h) * .045)); }
.band--dark, .band--light { color: rgba(255,255,255,.95); }
/* On the white Photography page each button keeps the beige it was designed on: under the plate itself, and under the
   shadow (its own shape, blur and mask), so the frosted acrylic, its edges and light and the shadow look as they do on
   the beige pages. Only where the light spills past the shadow does it meet the white. */
.photo-page .band { background: #d4bc9e; }
.photo-page .band::before { background-color: #d4bc9e; }
/* (the keyboard's focus ring, white on the beige pages, is beige here so it shows on the white) */
.photo-page .band:focus-visible { outline-color: #d4bc9e; }
.band-name { position: relative; z-index: 1; font-family: "Audrey WM", var(--font); font-size: clamp(.9rem, 1.7vw, 1.2rem);
  letter-spacing: .2em; text-transform: uppercase;
  /* (Audrey's capitals sit .208em above the middle of their line, which leaves room for descenders the names don't
     have; this puts the capitals themselves at the middle of the button) */
  translate: 0 .208em; }
@media (hover: hover) and (pointer: fine) {
  /* The plate lifts; its shadow and light stay on the surface, so the shadow falls a little farther away */
  .band:hover { translate: 0 -3px; --lift: 1; }
}
.band:focus-visible { outline: 2px solid rgba(255,255,255,.80); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .band { transition: none !important; }
  .band { translate: none !important; }
}
/* The Booking page: a cream card on the white, in the beige pages' lettering. The page can be taller than the
   window once a month of days and a form are on it, so unlike the other bare pages it starts at the top and scrolls. */
.booking-main { align-content: start; padding: clamp(.75rem, 2.5vh, 2rem) 1rem clamp(2rem, 5vh, 3.5rem); }
.booking { width: min(100%, 34rem); padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.1rem, 4vw, 2.2rem);
  border-radius: clamp(.9rem, 2vw, 1.3rem); background: #f7f2e9; color: #4a342a;
  box-shadow: 0 1rem 2.2rem rgba(84, 62, 34, .18); }
.booking-title { margin: 0; font-family: "Audrey WM", var(--font); font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  font-weight: 400; letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.booking-lede { margin: .5rem 0 1.4rem; font-size: .9rem; line-height: 1.65; text-align: center; color: #6b5044; }

.booking-progress { display: flex; justify-content: center; gap: clamp(.6rem, 3vw, 1.4rem); margin: 0 0 1.4rem;
  padding: 0; list-style: none; font-family: "Audrey WM", var(--font); font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: #b39e86; }
.booking-progress li { position: relative; }
.booking-progress li + li::before { content: ""; position: absolute; top: 50%; left: calc(-1 * clamp(.35rem, 1.6vw, .8rem));
  width: clamp(.2rem, 1vw, .5rem); height: 1px; background: currentColor; }
.booking-progress .is-current { color: #4a342a; }
.booking-progress .is-done { color: #8a6f57; }

.booking-status { min-height: 1.2rem; margin: 0 0 1rem; font-size: .85rem; text-align: center; color: #6b5044; }
.booking-status.is-error { color: #a33224; }
.booking-status.is-notice { color: #6b5044; }
.booking-status:empty { display: none; }
/* When the diary can't be reached, or no hours are set, only the message is left: an empty calendar
   would look broken, and there would be nothing to click in it anyway. */
.booking.is-closed .booking-panel, .booking.is-closed .booking-progress { display: none; }

.booking-heading { margin: 0 0 .9rem; font-family: "Audrey WM", var(--font); font-size: .95rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; text-align: center; }
.booking-heading:focus { outline: none; }
.booking-chosen { margin: 0 0 1rem; font-size: .92rem; text-align: center; color: #6b5044; }

/* Kinds of session: read from the back office, so this list is whatever the studio offers that week. */
.booking-types { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: 1.2rem; }
.booking-type { padding: .42rem .85rem; border: 1px solid #e0d3c0; border-radius: 999px; background: transparent;
  color: #6b5044; font: inherit; font-size: .8rem; letter-spacing: .06em; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s; }
.booking-type.is-chosen { border-color: #4a342a; background: #4a342a; color: #f7f2e9; }

.booking-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.booking-month-name { margin: 0; font-family: "Audrey WM", var(--font); font-size: 1.05rem; letter-spacing: .14em;
  text-transform: uppercase; }
.booking-nav { width: 2.25rem; height: 2.25rem; border: 1px solid #e0d3c0; border-radius: 50%; background: transparent;
  color: #4a342a; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background-color .2s, opacity .2s; }
.booking-nav:disabled { opacity: .25; cursor: default; }
.booking-nav:not(:disabled):hover { background: #efe4d3; }

.booking-weekdays, .booking-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.booking-weekdays { margin-bottom: .3rem; font-size: .7rem; letter-spacing: .1em; text-align: center; color: #b39e86; }
.booking-day { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 1px solid transparent;
  border-radius: .55rem; background: #efe4d3; color: #4a342a; font: inherit; font-size: .9rem; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s; }
.booking-day.is-blank { background: transparent; }
/* A day with nothing free is still shown, quietly, so the month keeps its shape and the eye can skip it. */
.booking-day.is-quiet { background: transparent; color: #c3b099; cursor: default; }
.booking-day:not(:disabled):hover { border-color: #4a342a; }
.booking-day.is-chosen { background: #4a342a; color: #f7f2e9; }

.booking-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .45rem; }
.booking-time { padding: .6rem .5rem; border: 1px solid #e0d3c0; border-radius: .55rem; background: #fff;
  color: #4a342a; font: inherit; font-size: .88rem; cursor: pointer; transition: background-color .2s, color .2s; }
.booking-time:hover { border-color: #4a342a; }
.booking-time.is-chosen { background: #4a342a; border-color: #4a342a; color: #f7f2e9; }
.booking-none { margin: 0; font-size: .9rem; text-align: center; color: #6b5044; }

.booking-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.booking-field { display: grid; gap: .3rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: #6b5044; }
.booking-field em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; }
.booking-field--wide { grid-column: 1 / -1; }
.booking-field input, .booking-field textarea { width: 100%; padding: .6rem .7rem; border: 1px solid #e0d3c0;
  border-radius: .45rem; background: #fff; color: #4a342a; font: inherit; font-size: .95rem; letter-spacing: 0;
  text-transform: none; }
.booking-field input:focus-visible, .booking-field textarea:focus-visible { outline: 2px solid #4a342a; outline-offset: 1px; }
.booking-field textarea { resize: vertical; }
/* A field only a script would fill in. Off the screen rather than display:none, which some scripts skip. */
.booking-away { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.booking-submit { grid-column: 1 / -1; padding: .85rem 1.5rem; border: 0; border-radius: .5rem; background: #4a342a;
  color: #f7f2e9; font-family: "Audrey WM", var(--font); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: opacity .2s; }
.booking-submit:disabled { opacity: .6; cursor: default; }
.booking-back { display: block; margin: 1rem auto 0; padding: .4rem .2rem; border: 0; background: none; color: #6b5044;
  font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: .3em; cursor: pointer; }

.booking-done-lede { margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.7; text-align: center; }
.booking-summary { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0 0 1.2rem;
  padding: 1rem; border-radius: .6rem; background: #fff; font-size: .92rem; }
.booking-summary dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #8a6f57; }
.booking-summary dd { margin: 0; }
.booking-reference { font-family: "Audrey WM", var(--font); font-size: 1.1rem; letter-spacing: .12em; }
.booking-done-note { margin: 0; font-size: .82rem; line-height: 1.6; text-align: center; color: #6b5044; }

@media (max-width: 520px) {
  .booking-form { grid-template-columns: minmax(0, 1fr); }
  .booking-times { grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .booking-type, .booking-day, .booking-time, .booking-nav, .booking-submit { transition: none; }
}

.intro-snowflake { width: clamp(2.4rem, 3.6vw, 2.9rem); height: auto; margin-top: clamp(-.9rem, -1vw, -.5rem); }
.intro-social { justify-self: end; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0 clamp(.75rem, 4.5vw, 3rem) clamp(.75rem, 3vw, 2rem) 0; color: inherit; transition: opacity .2s; }
.intro-social:hover { opacity: .75; }
.intro-social svg { width: 22px; height: 22px; }
/* The intro's opening sequence, about 3 seconds, once the head script's "intro-play" says the name's font and the
   pictures are ready (until then, with "intro-enter", everything in it waits unseen). Each part ends exactly as the
   page is drawn without it, and only moves, fades, blurs or masks, so nothing on the page shifts.
   - The name is uncovered from left to right by a soft-edged mask while rising into place and coming into focus.
   - The camera, then the frame, come forward from a little way back, turned slightly toward the middle, and settle
     facing the viewer; the light on them comes up and their shadows lengthen, and a band of light passes over each.
   - The line draws out from its middle; then the snowflake drifts down into place, turning gently as it settles.
   - Last, the navigation comes in item by item, then the Instagram link. */
@media (prefers-reduced-motion: no-preference) {
  .intro-enter:not(.intro-play) :is(.intro-name, .intro-render-box, .intro-line, .intro-snowflake),
  .intro-enter:not(.intro-play) .intro > :is(.intro-nav, .intro-social) { opacity: 0; }
  .intro-play .intro-name { animation: intro-name-mask 1.6s cubic-bezier(.4, 0, .2, 1) .05s backwards, intro-name-rise 1.6s cubic-bezier(.16, 1, .3, 1) .1s backwards; }
  .intro-play .intro-camera .intro-render-box { animation: intro-camera-in 1.7s cubic-bezier(.16, 1, .3, 1) .45s backwards, intro-hold 1ms 2.4s forwards; }
  .intro-play .intro-frame .intro-render-box { animation: intro-frame-in 1.7s cubic-bezier(.16, 1, .3, 1) .6s backwards, intro-hold 1ms 2.4s forwards; }
  .intro-play .intro-render { animation: intro-render-light 1.9s cubic-bezier(.25, .1, .25, 1) .45s backwards; }
  .intro-play .intro-frame .intro-render { animation-delay: .6s; }
  /* (the light is blended in only while it passes: site.js takes the blending away once it has, as it would otherwise
     change how the browser draws what follows it, so the page would no longer be exactly as before) */
  .intro-play .intro-sheen { mix-blend-mode: soft-light; }
  .intro-play .intro-camera .intro-sheen { animation: intro-sheen 1.5s cubic-bezier(.45, 0, .3, 1) .95s backwards; }
  .intro-play .intro-frame .intro-sheen { animation: intro-sheen 1.5s cubic-bezier(.45, 0, .3, 1) 1.15s backwards; }
  .intro-play .intro-line { animation: intro-line 1.2s cubic-bezier(.65, 0, .35, 1) .85s backwards, intro-hold-line 1ms 2.1s forwards; }
  .intro-play .intro-snowflake { animation: intro-flake 1.5s cubic-bezier(.22, .61, .36, 1) 1.5s backwards, intro-hold 1ms 3s forwards; }
  /* (once the pictures, the line and the snowflake have arrived, intro-hold and intro-hold-line keep each as it is with
     an animation, as the intro's earlier fade-in and line animation kept them, so the browser goes on drawing the page
     exactly as before, pixel for pixel) */
  .intro-play .intro > .intro-nav a { animation: intro-arrive 1s cubic-bezier(.22, .61, .36, 1) 1.8s backwards; }
  .intro-play .intro > .intro-nav a:nth-child(2) { animation-delay: 1.88s; }
  .intro-play .intro > .intro-nav a:nth-child(3) { animation-delay: 1.96s; }
  .intro-play .intro > .intro-nav a:nth-child(4) { animation-delay: 2.04s; }
  .intro-play .intro > .intro-nav a:nth-child(5) { animation-delay: 2.12s; }
  .intro-play .intro > .intro-nav a:nth-child(6) { animation-delay: 2.2s; }
  .intro-play .intro > .intro-nav a:nth-child(7) { animation-delay: 2.28s; }
  .intro-play .intro > .intro-social { animation: intro-arrive 1s cubic-bezier(.22, .61, .36, 1) 2.3s backwards; }
  .intro.is-closing { animation: intro-out .7s ease forwards; }
}
/* (the mask, two and a half times the name's width, is opaque, then a soft edge half the name's width, then clear; it
   slides from just leaving the name hidden to just covering it, so the edge is on the name the whole time) */
@keyframes intro-name-mask {
  from { -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 250% 100% no-repeat; mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 250% 100% no-repeat; }
  to { -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat; mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat; }
}
@keyframes intro-name-rise { from { transform: translateY(.55em); filter: blur(5px); } }
@keyframes intro-camera-in { from { opacity: 0; transform: perspective(600px) translate3d(-.6rem, 1.3rem, -70px) rotateX(9deg) rotateY(18deg); } 45% { opacity: 1; } }
@keyframes intro-frame-in { from { opacity: 0; transform: perspective(600px) translate3d(.6rem, 1.3rem, -70px) rotateX(9deg) rotateY(-18deg); } 45% { opacity: 1; } }
@keyframes intro-render-light { from { filter: drop-shadow(0 .1rem .15rem rgba(84, 62, 34, .06)) brightness(.8) contrast(.92); } }
@keyframes intro-sheen { from { opacity: 1; background-position: 120% 0; } 75% { opacity: 1; } to { opacity: 0; background-position: -20% 0; } }
@keyframes intro-line { from { transform: scaleX(0); opacity: 0; } 15% { opacity: 1; } }
@keyframes intro-flake { from { opacity: 0; transform: translateY(-.6rem) rotate(-28deg) scale(.92); filter: blur(3px); } }
@keyframes intro-arrive { from { opacity: 0; transform: translateY(-.35rem); } }
@keyframes intro-hold { from, to { opacity: 1; } }
@keyframes intro-hold-line { from, to { transform: none; } }
@keyframes intro-out { to { opacity: 0; } }

/* Home slideshow */
.hero { --caption-bottom: clamp(4.5rem, 11vh, 6.5rem); position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: #2f2f2f; }
.hero-slide { position: absolute; inset: 0; z-index: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.is-active { z-index: 1; opacity: 1; }
.hero-slide.was-active { opacity: 1; transition: none; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero::before, .hero::after { content: ""; position: absolute; right: 0; left: 0; z-index: 2; pointer-events: none; }
.hero::before { top: 0; height: 12rem; background: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)); }
.hero::after { bottom: 0; height: 55%; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.hero-caption { position: absolute; right: 0; bottom: var(--caption-bottom); left: 0; z-index: 3; padding-inline: calc(var(--pad) + 4.5rem); color: #fff; text-align: center; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.hero-caption h1 { margin: 0; padding-inline-start: .35em; font-size: clamp(1.5rem, 4vw, 2.8rem); font-weight: 300; line-height: 1.3; letter-spacing: .35em; text-transform: uppercase; }
.hero-caption p { margin: .6rem 0 0; padding-inline-start: .3em; font-size: clamp(.7rem, 1.6vw, .85rem); letter-spacing: .3em; text-transform: uppercase; }
.hero-controls { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero-controls button { position: absolute; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45)); }
.hero-controls button:focus-visible { outline-color: #fff; }
.hero-arrow { bottom: calc(var(--caption-bottom) + 2.3rem); width: 3.75rem; height: 2.75rem; opacity: .9; transition: opacity .2s; }
.hero-arrow:hover { opacity: 1; }
.hero-arrow svg { width: 48px; height: 24px; }
.hero-prev { left: var(--pad); }
.hero-next { right: var(--pad); }
.hero-pause { bottom: .75rem; left: 50%; width: 2.75rem; height: 2.75rem; margin-left: -1.375rem; opacity: .75; }
.hero-pause:hover { opacity: 1; }
.hero-pause svg { width: 16px; height: 16px; }
.hero-pause .icon-play, .hero-pause.is-paused .icon-pause { display: none; }
.hero-pause.is-paused .icon-play { display: block; }
@media (max-width: 600px) {
  .hero { --caption-bottom: 4.5rem; }
  .hero-caption { padding-inline: var(--pad); }
  .hero-arrow { bottom: .75rem; }
}

/* Story */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
.story-photo { justify-self: center; width: 100%; max-width: 440px; }
.story-photo img { width: 100%; border-radius: 999px 999px 0 0; }
.story-text p { margin: 0 0 1.25rem; }
.story-text .btn { margin-top: 1rem; }
@media (max-width: 800px) {
  .story { grid-template-columns: 1fr; }
  .story-photo { max-width: 340px; }
}

/* Portfolio index */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-block: 0 clamp(4rem, 10vw, 7rem); padding: 0; list-style: none; }
.category-card { display: block; text-decoration: none; }
.category-card-image { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wash); }
.category-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.category-card:hover img, .category-card:focus-visible img { transform: scale(1.03); }
.category-card-title { display: block; margin-top: .9rem; font-size: .8rem; letter-spacing: .25em; text-align: center; text-transform: uppercase; }

/* Category galleries */
.gallery { columns: 3 300px; column-gap: clamp(.75rem, 2vw, 1.25rem); padding-bottom: clamp(3rem, 8vw, 5rem); }
.gallery-item { display: block; margin: 0 0 clamp(.75rem, 2vw, 1.25rem); background: var(--wash); break-inside: avoid; }
.gallery-item img { width: 100%; }
.pager { display: flex; justify-content: space-between; gap: 1rem; padding-block: 2rem clamp(3rem, 8vw, 5rem); border-top: 1px solid var(--line); }
.pager a { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.pager a:hover { text-decoration: underline; text-underline-offset: .3em; }
.pager span { display: block; color: var(--muted); font-size: .68rem; }
.pager-next { margin-left: auto; text-align: right; }

/* Photo viewer */
.lightbox { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(255, 255, 255, .98); color: var(--ink); }
.lightbox::backdrop { background: rgba(255, 255, 255, .98); }
.lightbox[open] { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; align-items: center; }
.lightbox figure { grid-column: 2; display: grid; place-items: center; align-content: center; gap: .75rem; height: 100vh; margin: 0; padding-block: 3.5rem 2rem; }
.lightbox figure img { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 7.5rem); object-fit: contain; }
.lightbox-count { color: var(--muted); font-size: .72rem; letter-spacing: .2em; }
.lightbox button { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.lightbox svg { width: 24px; height: 24px; }
.lightbox-close { position: absolute; top: .75rem; right: .75rem; }
.lightbox-prev { grid-column: 1; grid-row: 1; justify-self: center; }
.lightbox-next { grid-column: 3; grid-row: 1; justify-self: center; }
.lightbox figure { grid-row: 1; }
@media (max-width: 600px) {
  .lightbox[open] { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
}

/* Creative fees */
.fees-hero { position: relative; display: grid; place-items: center; min-height: clamp(320px, 55vh, 560px); overflow: hidden; background: #222; color: var(--paper); text-align: center; }
.fees-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fees-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.fees-hero-inner { position: relative; z-index: 1; padding: var(--pad); }
.fees { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; padding-block: clamp(3rem, 8vw, 6rem); }
.fees-photo { position: sticky; top: calc(var(--header) + 2rem); }
.fees-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.package { padding: 1.75rem; border: 1px solid var(--line); }
.package h2 { margin: 0 0 1rem; font-size: .9rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; }
.package ul { margin: 0 0 1.25rem; padding: 0; color: var(--muted); font-size: .78rem; letter-spacing: .08em; list-style: none; }
.package li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.package-price { margin: .25rem 0 0; font-size: 1.1rem; letter-spacing: .08em; }
.package-note { margin: .9rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.package-link { margin: 1.1rem 0 0; }
.package-link a { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .18em; transition: color .2s, border-color .2s; }
.package-link a:hover { color: var(--muted); }
@media (max-width: 900px) {
  .fees { grid-template-columns: 1fr; }
  .fees-photo { display: none; }
}

/* Wedding photography page — editorial, in the site's white chrome with warm accents.
   Display lines are a light serif; brand labels are the Audrey lettering (uppercase, its only glyphs). */
.wed-serif { font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, "Times New Roman", serif; }
.wed-audrey { font-family: "Audrey WM", var(--font); }

.wed-hero { position: relative; display: grid; place-items: center; min-height: clamp(460px, 82vh, 760px); overflow: hidden; background: #211a15; color: var(--paper); text-align: center; }
.wed-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wed-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 10, .3), rgba(20, 14, 10, .55)); }
.wed-hero-inner { position: relative; z-index: 1; width: min(100% - 2 * var(--pad), 46rem); padding: var(--pad); }
.wed-kicker { margin: 0 0 clamp(1.1rem, 3vw, 1.9rem); font-family: "Audrey WM", var(--font); font-size: clamp(.85rem, 1.4vw, 1.05rem); font-weight: 400; letter-spacing: .5em; text-transform: uppercase; padding-inline-start: .5em; }
.wed-hero-title { margin: 0; font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.18; }
.wed-hero-sub { margin: clamp(1.1rem, 2.5vw, 1.6rem) auto 0; max-width: 34rem; font-size: clamp(.95rem, 1.4vw, 1.08rem); line-height: 1.7; color: rgba(255, 255, 255, .86); }

.wed-opening { max-width: 52rem; padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2rem, 5vw, 3rem); text-align: center; }
.wed-opening .eyebrow { color: var(--muted); }
.wed-lede { margin: .5rem 0 0; font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 1.5; font-weight: 400; }

.wed-spread { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-auto-rows: 1fr; gap: clamp(.75rem, 2vw, 1.5rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.wed-spread figure { margin: 0; overflow: hidden; background: var(--wash); }
.wed-spread img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wed-spread-tall { grid-row: span 2; }
@media (max-width: 720px) {
  .wed-spread { grid-template-columns: 1fr 1fr; }
  .wed-spread-tall { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .wed-spread-stack { aspect-ratio: 1 / 1; }
}

.wed-head { max-width: 44rem; margin: 0 0 clamp(2rem, 5vw, 3.25rem); }
.wed-head--center { margin-inline: auto; text-align: center; }
.wed-head .eyebrow { color: var(--muted); }
.wed-h2 { margin: .25rem 0 0; font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.25; }
.wed-head-sub { margin: 1rem 0 0; max-width: 34rem; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }

.wed-collections { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 9vw, 6.5rem); }
.wed-packages { display: grid; gap: clamp(.5rem, 2vw, 1rem); }
.wed-package { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.25rem, 4vw, 3.5rem); align-items: start; padding: clamp(1.75rem, 4vw, 2.6rem) 0; border-top: 1px solid var(--line); }
.wed-package:last-child { border-bottom: 1px solid var(--line); }
.wed-package--feature { border: 0; border-radius: 2px; margin-block: clamp(.5rem, 2vw, 1rem); padding: clamp(1.9rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.75rem); background: #f7f2e9; }
.wed-package--feature + .wed-package { border-top: 0; }
.wed-package-flag { margin: 0 0 1rem; font-family: "Audrey WM", var(--font); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: #8a6f57; }
.wed-package-name { margin: 0; font-family: "Audrey WM", var(--font); font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: .12em; text-transform: uppercase; }
.wed-package-price { margin: .7rem 0 0; font-size: clamp(1.35rem, 2.6vw, 1.75rem); letter-spacing: .02em; }
.wed-package-price span { font-size: .6em; letter-spacing: .18em; color: var(--muted); }
.wed-package-note { margin: .55rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.wed-package-list { margin: 0; padding: 0; list-style: none; columns: 2 200px; column-gap: clamp(1.5rem, 4vw, 3rem); }
.wed-package-list li { break-inside: avoid; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; letter-spacing: .02em; }
.wed-package--feature .wed-package-list li { border-color: rgba(74, 52, 42, .16); }
@media (max-width: 720px) {
  .wed-package { grid-template-columns: 1fr; gap: 1.25rem; }
  .wed-package-list { columns: 1; }
}

.wed-extras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 4.5rem); margin-top: clamp(3rem, 7vw, 5rem); }
.wed-extras-title { margin: 0 0 1.1rem; font-family: "Audrey WM", var(--font); font-weight: 400; font-size: .82rem; letter-spacing: .24em; text-transform: uppercase; }
.wed-ala-list { margin: 0; padding: 0; list-style: none; }
.wed-ala-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.wed-ala-price { color: var(--muted); white-space: nowrap; }
.wed-terms p { margin: 0 0 1rem; color: var(--muted); font-size: .95rem; line-height: 1.75; }
.wed-terms-fine { font-size: .82rem; letter-spacing: .04em; }
@media (max-width: 720px) { .wed-extras { grid-template-columns: 1fr; } }

.wed-experience { background: #f7f2e9; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.wed-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.wed-step { position: relative; padding-top: 2.5rem; }
.wed-step::before { content: ""; position: absolute; top: 0; left: 0; width: 2rem; height: 1px; background: #b39e86; }
.wed-step-num { font-family: "Audrey WM", var(--font); font-size: .8rem; letter-spacing: .2em; color: #8a6f57; }
.wed-step-name { margin: .6rem 0 .7rem; font-family: "Audrey WM", var(--font); font-weight: 400; font-size: clamp(.95rem, 1.6vw, 1.15rem); letter-spacing: .14em; text-transform: uppercase; color: #4a342a; }
.wed-step-text { margin: 0; color: #6b5044; font-size: .92rem; line-height: 1.65; }
@media (max-width: 800px) { .wed-steps { grid-template-columns: 1fr 1fr; gap: 2rem clamp(1.5rem, 5vw, 3rem); } }
@media (max-width: 460px) { .wed-steps { grid-template-columns: 1fr; } }

.wed-cta { position: relative; display: grid; place-items: center; min-height: clamp(420px, 66vh, 620px); overflow: hidden; background: #211a15; color: var(--paper); text-align: center; }
.wed-cta-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wed-cta::after { content: ""; position: absolute; inset: 0; background: rgba(20, 14, 10, .5); }
.wed-cta-inner { position: relative; z-index: 1; padding: var(--pad); }
.wed-cta-title { margin: 0; font-family: "Audrey WM", var(--font); font-weight: 400; font-size: clamp(1.6rem, 4.2vw, 3rem); letter-spacing: .18em; text-transform: uppercase; }
.wed-cta-sub { margin: 1.1rem auto 2rem; max-width: 30rem; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, .85); }
.wed-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* Contact */
.contact { max-width: 760px; padding-block: clamp(3rem, 8vw, 5.5rem); }
.contact .page-title { margin-bottom: 2.5rem; text-align: center; }
.contact-form { position: relative; display: grid; gap: 1.6rem; }
.field { display: grid; gap: .45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field legend { font-size: 1.05rem; letter-spacing: .08em; }
.field legend { margin-bottom: .5rem; padding: 0; line-height: 1.55; }
.field-required { margin-left: .45rem; color: var(--muted); font-size: .66rem; letter-spacing: .04em; }
.field-choices .field-required { display: block; margin: .1rem 0 0; }
.field input[type="text"], .field input[type="email"], .field textarea { width: 100%; padding: .8rem .9rem; border: 1px solid var(--ink); border-radius: 0; background: #fafafa; color: var(--ink); font: inherit; }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.choice { display: flex; align-items: flex-start; gap: .8rem; padding: .5rem 0; letter-spacing: .06em; cursor: pointer; }
.choice input { flex: none; width: 1.15rem; height: 1.15rem; margin: .3rem 0 0; accent-color: var(--ink); }
.field-error { margin: 0; color: var(--error); font-size: .85rem; }
.field.is-invalid input[type="text"], .field.is-invalid input[type="email"], .field.is-invalid textarea { border-color: var(--error); }
.form-actions { padding-top: .5rem; text-align: center; }
.btn-submit:disabled { cursor: progress; opacity: .6; }
.form-status { min-height: 1.75em; margin: 0; color: var(--muted); text-align: center; }
.form-status.is-error { color: var(--error); }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-success { display: grid; justify-items: center; gap: 1.1rem; max-width: 36rem; margin: 1rem auto 0; padding: clamp(2.5rem, 7vw, 3.75rem) clamp(1.5rem, 6vw, 3.5rem); border: 1px solid var(--line); background: var(--wash); text-align: center; scroll-margin: 2rem; }
.form-success:focus { outline: none; }
.form-success-message { margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 1.55; letter-spacing: .05em; }
.form-success-note { margin: 0; color: var(--muted); font-size: .9rem; letter-spacing: .03em; overflow-wrap: anywhere; }
.success-icon { width: 3.25rem; height: 3.25rem; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.page-intro .success-icon { margin: 0 auto 1.5rem; }

/* The Contact form keeps the cream fields it was given on the beige */
body.page-white .field input[type="text"],
body.page-white .field input[type="email"],
body.page-white .field textarea { border-color: #4a342a; background: #f7f2e9; color: #4a342a; }
body.page-white .field input:focus-visible,
body.page-white .field textarea:focus-visible { outline-color: #4a342a; }
body.page-white .form-success { background: #f7f2e9; border-color: rgba(74, 52, 42, .18); }
@media (prefers-reduced-motion: no-preference) {
  .form-success:not([hidden]) { animation: success-in .45s ease-out both; }
  .form-success:not([hidden]) .success-icon path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: success-check .5s .25s ease-out forwards; }
}
@keyframes success-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes success-check { to { stroke-dashoffset: 0; } }

/* Not found and form results */
.not-found { min-height: 45vh; }

/* Footer */
.site-footer { padding-block: clamp(3.5rem, 8vw, 5.5rem) 2.5rem; text-align: center; }
.footer-inner { display: grid; justify-items: center; gap: 2rem; }
.footer-badge img { width: clamp(120px, 14vw, 160px); }
.footer-social { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--ink); transition: opacity .2s; }
.footer-social:hover { opacity: .65; }
.footer-social svg { width: 28px; height: 28px; }
.copyright { margin: 0; color: var(--ink); font-size: .7rem; }

/* The pages with the site header, white with their lettering in the beige (.page-white): the wordmark, navigation,
   headings, buttons and icons in the beige itself (--ink), and paragraphs and small print in a deeper beige-brown of
   the same family (--muted, and the page's own colour), so they can be read. Words over photographs stay white, and
   the cream panels keep their cream. (:where keeps these rules as weak as a single class, so labels already drawn in
   --muted stay in it.) */
body.page-white:not(.bare-page) { --ink: #d4bc9e; --muted: #8a6f57; color: var(--muted); }
.page-white :where(.site-header, .page-title, .eyebrow, .category-card-title, .pager a, .package h2, .package-link a,
  .wed-h2, .wed-package-name, .wed-extras-title, .wed-step-name, .form-success-message) { color: var(--ink); }
.page-white .fees-hero .page-title { color: inherit; }
.page-white :where(.wed-step-text, .copyright) { color: var(--muted); }
/* (the keyboard's focus ring in the deeper colour, so it shows clearly on the white) */
body.page-white :where(a:focus-visible, button:focus-visible) { outline-color: var(--muted); }
/* The footer's SHOT BY WINTER MASON badge, a black drawing, in the beige: a beige fill cut to the drawing's shape over
   it, the image itself (still the link's text for screen readers) left transparent */
.page-white .footer-badge { position: relative; display: block; }
.page-white .footer-badge img { opacity: 0; }
.page-white .footer-badge::before { content: ""; position: absolute; inset: 0; background: var(--ink);
  -webkit-mask: url("/images/brand/shot-by-winter-mason-trimmed.webp") center / contain no-repeat;
  mask: url("/images/brand/shot-by-winter-mason-trimmed.webp") center / contain no-repeat; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}