/* Not Your Average Model, from-scratch draft (2026-10-11). Built from Alecia's Pinterest board: the ornate oval frame,
   watercolour ivy, phone, lace envelope,
   kiss and legs. Type from her "Chic & Luxurious" and "Stylish & Poised" pairings, with free lookalikes:
   Section titles are her "Chic & Luxurious" pairing: Corinthia (for Adelicia Script) over Jost 200 capitals (for
   Bodoni Sans). Jost also sets buttons and body.
   The Masthead logo stays exactly as it is (Bodoni + Inter). */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/bodoni-moda-0.woff2) format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(/fonts/bodoni-moda-italic.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 200 600; font-display: swap; src: url(/fonts/jost-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "Italiana"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/italiana-0.woff2) format("woff2"); }
@font-face { font-family: "Corinthia"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/corinthia-latin.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --cream: #F5EFE2;
  --card: #FBF7EE;
  --forest: #1F3A2D;
  --forest-deep: #15281F;
  --gold: #C9A866;
  --gold-ink: #9A7634;
  --muted: #5E6B5F;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;   /* POISED: weight 800-900, caps */
  --sans: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;   /* STYLISH / LUXURIOUS: light, tracked */
  --headline: "Italiana", "Didot", Georgia, serif;               /* replaces the script font in headings (10/14) */
  --script: "Corinthia", "Snell Roundhand", cursive;               /* Chic & (Adelicia Script lookalike) */
  --gutter: clamp(16px, 5vw, 72px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--forest); font: 300 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; font-weight: 400; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--forest); color: var(--cream); padding: 8px 14px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; }

/* The Masthead logo, unchanged */
.mast { --big: 40px; display: grid; justify-items: center; width: max-content; max-width: 100%; text-transform: uppercase; line-height: 1; }
.mast__small { font: 500 calc(var(--big) * .125)/1 "Inter", "Helvetica Neue", Arial, sans-serif; letter-spacing: .78em; margin-right: -.78em; }
.mast__rule { display: block; width: 62%; height: 1px; background: var(--gold); margin: calc(var(--big) * .13) auto calc(var(--big) * .07); }
.mast__big { font: 500 var(--big)/.82 var(--serif); letter-spacing: .01em; }
/* The NYAM mark: Bodoni with the gold italic A */
.nyam { font: 800 1em/1 var(--serif); letter-spacing: .02em; color: var(--forest); }
.nyam i { font-style: italic; font-weight: 500; color: var(--gold-ink); margin: 0 .02em; }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }

/* ---------- HERO: Alecia in the ornate oval with ivy, the logo and ENTER NYAM ---------- */
/* Her portrait on the left; the logo on the right with ENTER NYAM directly beneath it */
.hero { overflow: clip; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center;
  column-gap: clamp(48px, 7vw, 130px); padding: clamp(18px, 3.5svh, 40px) var(--gutter); }
.hero__art { position: relative; height: min(84svh, 940px); aspect-ratio: 733 / 1235; }
.ornate { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ornate__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.ornate__photo { position: absolute; left: 14%; top: 14.2%; width: 72.2%; height: 71.5%; max-width: none; object-fit: cover; object-position: 46% 32%; border-radius: 50%; }
/* Ivy (her watercolour) climbs the outer side of the frame */
.hero__ivy { position: absolute; z-index: 3; pointer-events: none; }
.hero__ivy--top { width: 52%; left: -27%; top: -3%; rotate: -10deg; }
.hero__ivy--low { width: 40%; left: -18%; bottom: -5%; rotate: 200deg; scale: -1 1; }
.hero__side { display: grid; justify-items: center; gap: clamp(28px, 5svh, 52px); }
.hero__mast { --big: min(9.5vw, 12svh, 8rem); color: var(--forest); }

/* ENTER NYAM; on hover (and once clicked) it reads "Loading something iconic…" in the same type and colour */
.enter { position: relative; display: grid; place-items: center; min-width: 280px; min-height: 56px; padding: 0 28px; border: 1px solid var(--forest);
  color: var(--forest); text-decoration: none; font: 400 .78rem/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; overflow: hidden;
  transition: background-color .45s ease, color .45s ease; }
.enter__a, .enter__b { grid-area: 1 / 1; white-space: nowrap; transition: opacity .5s ease, transform .6s var(--ease); }
.enter__a { padding-left: .34em; }
.enter__b { opacity: 0; transform: translateY(80%); letter-spacing: .14em; padding-left: .14em; font-size: .7rem; }
.enter:hover, .enter:focus-visible, .enter.is-entering { background: var(--forest); color: var(--cream); }
.enter:hover .enter__a, .enter:focus-visible .enter__a, .enter.is-entering .enter__a { opacity: 0; transform: translateY(-80%); }
.enter:hover .enter__b, .enter:focus-visible .enter__b, .enter.is-entering .enter__b { opacity: 1; transform: none; }
.enter:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; }

/* Entering: the hero fades away, "Loading something iconic…" sits alone in the middle of the page while a fine gold
   line fills beneath it, then the welcome page settles in (arrive.js) */
.loading { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 22px; background: var(--cream);
  opacity: 0; visibility: hidden; transition: opacity .6s ease .35s, visibility 0s linear .95s; }
body.is-entering .loading { opacity: 1; visibility: visible; transition: opacity .6s ease .35s, visibility 0s; }
.loading__text { font: 400 clamp(.78rem, 1.4vw, .95rem)/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--forest); padding-left: .34em; text-align: center; }
.loading__bar { position: relative; width: min(240px, 60vw); height: 1px; background: rgba(31, 58, 45, .14); overflow: hidden; }
.loading__bar::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
body.is-entering .loading__bar::after { animation: load 1.5s cubic-bezier(.45, 0, .2, 1) .75s forwards; }
@keyframes load { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .hero { transition: opacity .6s ease; }
  body.is-entering .hero { opacity: 0; }
  .hero__art { animation: fade 1.2s ease both; }
  .hero__side { animation: rise 1.2s var(--ease) .25s both; }
}
@keyframes zoom-arrive { from { opacity: 0; transform: scale(.94); } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; justify-items: center; align-content: center; row-gap: 26px; padding-top: 28px; padding-bottom: 36px; }
  .hero__side { display: contents; }
  .hero__mast { --big: min(22vw, 7rem); order: 1; }
  .hero__art { order: 2; height: auto; width: min(70vw, 400px); }
  .enter { order: 3; min-width: 0; width: min(280px, 80vw); }
}

/* ---------- WELCOME page ---------- */
/* The top bar on every inside page: NYAM on the left (home), Book on the right; stays at the top while you scroll */
.nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter); background: rgba(245, 239, 226, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Her gold garland (from her board) hangs from the bar across the full width; the footer has the same garland rising */
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 42px; pointer-events: none;
  background: url(/images/new/garland-down.png) 50% 0 / auto 42px repeat-x; transition: opacity .4s ease, visibility 0s linear 0s; }
/* The garland only lives at the top of the page: once you scroll, it fades away and the bar gets a fine line instead */
.nav.is-scrolled::after { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.nav { transition: box-shadow .4s ease; }
.nav.is-scrolled { box-shadow: 0 1px 0 rgba(31, 58, 45, .1); }
.nav__logo { font-size: clamp(1.6rem, 2.4vw, 2.1rem); text-decoration: none; line-height: 1; }
.nav__book { display: inline-flex; align-items: center; min-height: 44px; padding: 0 26px; background: var(--forest); color: var(--cream); text-decoration: none;
  font: 400 .74rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; padding-left: calc(26px + .32em); transition: background-color .35s ease, color .35s ease; }
.nav__book:hover, .nav__book:focus-visible { background: var(--gold); color: var(--forest-deep); }
/* A small link back to the opening (splash) page */
.nav__end { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav__replay { font: 400 .68rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--forest); text-decoration: none;
  padding-bottom: 4px; border-bottom: 1px solid var(--gold); }
.nav__replay:hover, .nav__replay:focus-visible { color: var(--gold-ink); }
/* Section titles: her "Chic & / LUXURIOUS" pairing, a script line over thin wide capitals */
.ttl { display: grid; justify-items: center; color: var(--forest); text-align: center; }
.ttl:focus { outline: none; }
.ttl__script { font: 400 clamp(2.4rem, 6vw, 5.16rem)/1 var(--headline); letter-spacing: 0; }
.ttl__caps { font: 200 clamp(1.25rem, 3.4vw, 2.9rem)/1.1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding-left: .16em; margin-top: .1em; }
.ttl--left { justify-items: start; text-align: left; }
.ttl--left .ttl__caps { padding-left: 0; }
.ttl--small .ttl__script { font-size: clamp(3rem, 6vw, 4.8rem); }
.ttl--small .ttl__caps { font-size: clamp(1.05rem, 2.2vw, 1.8rem); }
.welcome { position: relative; overflow-x: clip; padding: clamp(24px, 2.6vw, 40px) var(--gutter) clamp(72px, 9vw, 130px); text-align: center; }

/* The six pieces, each in the ornate oval from her board (the same frame as her portrait on the opening page) */
/* Three frame drawings from her board, all in the same gold; every frame is the same height so rows stay even */
.oframe { position: relative; display: block; height: clamp(320px, 29vw, 400px); width: auto; }
.oframe--oval { aspect-ratio: 733 / 1235; }
.oframe--crest { aspect-ratio: 900 / 1108; }
.oframe--botanical { aspect-ratio: 788 / 1173; }
.oframe__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Her photo fills the frame and is clipped to that frame's exact opening (traced from the drawing), so it sits
   just under the inner gold line whatever the shape */
.oframe__photo { position: absolute; max-width: none; object-fit: cover;
  -webkit-mask: var(--opening) center / 100% 100% no-repeat; mask: var(--opening) center / 100% 100% no-repeat; }
.oframe--oval .oframe__photo { --opening: url(/images/new/frame-oval-mask.png?v=2); left: 13.37%; top: 14.01%; width: 73.53%; height: 71.9%; }
.oframe--crest .oframe__photo { --opening: url(/images/new/frame-crest-mask.png?v=2); left: 14.89%; top: 17.15%; width: 69.44%; height: 72.38%; }
.oframe--botanical .oframe__photo { --opening: url(/images/new/frame-botanical-mask.png?v=2); left: 10.91%; top: 18.41%; width: 77.92%; height: 66.16%; }
/* One mirror per row, alternating sides: frame on one side, its title, line and button on the other */
/* Homepage frames: each photo in its own shape with a hairline gold rim that shimmers, plus two more hairlines
   around it in shapes that do NOT match the photo (a box around the arch, a tilted oval around the blob, ...) */
.shape { --rim: 1.5px; --line: 1px solid rgba(154, 118, 52, .75); position: relative; isolation: isolate; display: block;
  width: clamp(300px, 30vw, 440px); aspect-ratio: 4 / 5; border-radius: var(--r); padding: var(--rim);
  background: linear-gradient(115deg, #8C6A2E 0%, #B8914A 30%, #E9D29A 46%, #FFF4D2 50%, #E9D29A 54%, #B8914A 70%, #8C6A2E 100%);
  background-size: 300% 100%; background-position: 100% 0; }
.shape__photo { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: var(--r); }
.shape::before, .shape::after { content: ""; position: absolute; z-index: 2; pointer-events: none; }
.shape::after { border: var(--line); }
/* One of the two outlines is one of her three ornate frames (oval, rose crest, botanical), thin and light, AROUND the photo:
   it sits behind the picture, sized so the frame's opening (from the mask traces) just clears the photo. Each shape gets the
   frame whose opening best matches its proportions (the tall pill gets the oval). */
.shape::before { z-index: -1; opacity: .55; scale: .86;
  /* the frame drawing is a stencil over a soft, light gold that a sheen sweeps across */
  background: linear-gradient(115deg, #B8914A 0%, #CDAA66 30%, #EBD7A0 44%, #FFF8E2 50%, #EBD7A0 56%, #CDAA66 70%, #B8914A 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask: var(--orn) center / 100% 100% no-repeat; mask: var(--orn) center / 100% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) { .shape::before { animation: shimmer 9s ease-in-out infinite; } .pieces li:nth-child(2n) .shape::before { animation-delay: -4.5s; } }
.shape--1::before { --orn: url(/images/new/frame-crest-hair.webp); left: -25.7%; top: -30.2%; width: 152.6%; height: 150.3%; }
.shape--2::before { --orn: url(/images/new/frame-botanical-hair.webp); left: -17.8%; top: -33.4%; width: 136%; height: 162%; }
.shape--3::before { --orn: url(/images/new/frame-crest-hair.webp); left: -25.7%; top: -28.1%; width: 152.6%; height: 146.5%; }
.shape--3::before { scale: 1.04; }  /* the crest gently squared up so it rings the circle evenly, just clear of the photo */
.shape--4::before { --orn: url(/images/new/frame-oval-hair.webp); left: -23.1%; top: -23.7%; width: 145.8%; height: 147.4%; }
.shape--5::before { --orn: url(/images/new/frame-botanical-hair.webp); left: -17.8%; top: -33.4%; width: 136%; height: 162%; }
.shape--6::before { --orn: url(/images/new/frame-crest-hair.webp); left: -25.7%; top: -30.2%; width: 152.6%; height: 150.3%; }
@media (prefers-reduced-motion: no-preference) { .shape { animation: shimmer 14s ease-in-out infinite; } .pieces li:nth-child(2n) .shape { animation-delay: -7s; } }
@keyframes shimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: -50% 0; } }
/* As in Version Two: every photo is black and white (as one set) until hovered; on hover a band of gold shimmer sweeps
   across and wipes the tint away, revealing the photo's own colour */
.shape__bw, .shape__shine { position: absolute; inset: var(--rim); border-radius: var(--r); pointer-events: none; }
.shape__bw { z-index: 1; background: #000; mix-blend-mode: saturation; clip-path: inset(0 0 0 0); transition: clip-path .95s cubic-bezier(.6, 0, .25, 1); }
.shape__shine { z-index: 1; overflow: hidden; mix-blend-mode: screen; }
.shape__shine::before { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; opacity: 0;
  background: linear-gradient(100deg, rgba(233, 210, 154, 0), rgba(233, 210, 154, .55) 40%, rgba(255, 244, 210, .85) 50%, rgba(233, 210, 154, .55) 60%, rgba(233, 210, 154, 0)); }
.piece:has(.piece__btn:hover) .shape__bw, .piece:focus-visible .shape__bw { clip-path: inset(0 0 0 100%); }
@media (prefers-reduced-motion: no-preference) {
  .piece:has(.piece__btn:hover) .shape__shine::before, .piece:focus-visible .shape__shine::before { animation: reveal-shine .95s cubic-bezier(.6, 0, .25, 1) forwards; }
}
@keyframes reveal-shine { 0% { opacity: 1; translate: 0 0; } 85% { opacity: 1; } 100% { opacity: 0; translate: 330% 0; } }
/* 1 arch: a square box and a circle */
.shape--1 { --r: 999px 999px 4px 4px; }
.shape--1::after { inset: -18px; }
/* 2 blob: a tilted oval and a tilted box */
.shape--2 { --r: 58% 42% 46% 54% / 46% 40% 60% 54%; }
.shape--2::after { inset: -22px -16px; border-radius: 50%; rotate: -7deg; }
/* 3 circle: a square and an arch */
.shape--3 { --r: 50%; aspect-ratio: 1; }
.shape--3::after { inset: -20px; }
/* 4 tall pill: a wide box and a circle */
.shape--4 { --r: 999px; aspect-ratio: 3 / 5; width: clamp(250px, 24vw, 330px); }
.shape--4::after { inset: 8% -38px; }
/* 5 blob: an arch and a box */
.shape--5 { --r: 46% 54% 40% 60% / 58% 44% 56% 42%; }
.shape--5::after { inset: -26px -18px -12px; border-radius: 999px 999px 0 0; }
/* 6 inverted arch: an oval and a circle */
.shape--6 { --r: 4px 4px 999px 999px; }
.shape--6::after { inset: -18px -28px; border-radius: 50%; }

/* Full-width bands, every other one a deeper cream; each frame spills over its band's edges into the rows
   above and below, so the mirrors overlap the bands like pieces laid on top of each other */
/* Welcome sits top-left, lined up with the rows below, script and capitals set tight together */
/* Hero: Welcome reads across a fine gold line to the doorbell, whose button sits level with that line; the doorbell
   then drops down into the first row so her hand leads you into the page */
.hero-w { --bh: clamp(250px, 30vw, 420px); --bw: calc(var(--bh) * .662);
  --over: calc(var(--gutter) + max(0px, (100vw - 2 * var(--gutter) - 1240px) / 2));  /* distance from the column edge to the window edge */
  position: relative; display: flow-root; max-width: 1240px; margin: 0 auto; min-height: calc(var(--bh) * .58); }
.hero-w > .ttl { justify-items: start; text-align: left; position: relative; z-index: 2; margin-top: calc(var(--bh) * .169 + 14px);
  margin-right: calc(var(--bw) - var(--over)); }  /* the gold line runs right up to where the doorbell photo begins */
.hero-w .ttl__caps { justify-self: stretch; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.hero-w .ttl__caps::after { content: ""; flex: 1; height: 1.5px; transform-origin: left;
  background: linear-gradient(115deg, #8C6A2E 0%, #B8914A 30%, #E9D29A 46%, #FFF4D2 50%, #E9D29A 54%, #B8914A 70%, #8C6A2E 100%);
  background-size: 300% 100%; background-position: 100% 0; }
/* The logo, very faint, centred behind the hero like it is printed on the background */
.hero-w__mark { --big: clamp(7rem, 17vw, 15rem); position: absolute; z-index: 0; left: 50%; top: calc(var(--bh) * .42); translate: -50% -50%;
  margin: 0; color: var(--forest); opacity: .07; pointer-events: none; }
.hero-w__mark .mast__rule { background: var(--forest); }
/* Pinned flush to the window's right edge, true proportions, hanging down into the first row */
.hero-w__bell { position: absolute; z-index: 3; top: 14px; right: calc(-1 * var(--over)); height: var(--bh); width: var(--bw); max-width: none; object-fit: cover;
  padding: 4px 0 4px 4px;  /* shimmering gold edge on the left, top and bottom (the right side runs off the window) */
  background: linear-gradient(115deg, #8C6A2E 0%, #B8914A 30%, #E9D29A 46%, #FFF4D2 50%, #E9D29A 54%, #B8914A 70%, #8C6A2E 100%);
  background-size: 300% 100%; background-position: 100% 0;
  box-shadow: 0 18px 34px -20px rgba(58, 42, 18, .45); }
@media (prefers-reduced-motion: no-preference) {
  .hero-w .ttl__caps::after { animation: line-draw 1.4s cubic-bezier(.65, 0, .25, 1) .3s both, shimmer 14s ease-in-out infinite; }
}
@keyframes line-draw { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) { .hero-w__bell { animation: shimmer 14s ease-in-out infinite; } }
@media (max-width: 700px) {
  .hero-w { min-height: 0; display: grid; justify-items: center; }
  .hero-w > .ttl { margin-top: 0; margin-right: 0; }
  .hero-w .ttl__caps::after { display: none; }
  .hero-w__mark { --big: 24vw; top: 46%; max-width: none; }
  .welcome { padding-top: 48px; }
  .hero-w__bell { position: relative; top: auto; right: auto; height: 250px; width: auto; aspect-ratio: 864 / 1305; justify-self: end;
    margin: 16px calc(-1 * var(--gutter)) -90px 0; }
}
.hero-w > .ttl .ttl__caps { white-space: nowrap; }
.hero-w > .ttl .ttl__caps { margin-top: -.15em; padding-left: 1.6em; white-space: nowrap; }
.pieces { list-style: none; width: min(1640px, calc(100vw - 48px)); position: relative; left: 50%; translate: -50% 0; margin: clamp(190px, 15vw, 230px) 0 clamp(60px, 7vw, 100px); padding: 0; display: grid; gap: 0; }
.pieces > li { position: relative; padding: clamp(12px, 1.4vw, 20px) 0; }
.pieces > li::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--cream); }
.pieces > li:nth-child(even)::before { background: #EBE1CC; }
.piece .shape { position: relative; z-index: 2; margin: calc(-1 * clamp(70px, 7vw, 110px)) 0; }
.piece { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "frame text"; align-items: center;
  gap: clamp(36px, 4vw, 72px); text-decoration: none; color: var(--forest); }
.piece .shape { grid-area: frame; justify-self: start; margin-left: clamp(0px, 3vw, 60px) !important; }
.piece__text { grid-area: text; display: grid; justify-items: start; gap: 14px; text-align: left; }
.pieces li:nth-child(even) .piece { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "text frame"; }
.pieces li:nth-child(even) .piece .shape { justify-self: end; margin-left: 0 !important; margin-right: clamp(0px, 3vw, 60px) !important; }
.pieces li:nth-child(even) .piece__text { justify-items: end; text-align: right; }
.piece__title { font: 400 clamp(1.8rem, 3.24vw, 2.76rem)/1 var(--headline); color: var(--forest); }
.piece__btn { margin-top: 10px; display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border: 1px solid var(--forest);
  font: 400 .76rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; transition: background-color .35s ease, color .35s ease; }
.piece__btn:hover, .piece:focus-visible .piece__btn { background: var(--forest); color: var(--cream); }
.piece:focus-visible { outline: none; }
.piece:focus-visible .piece__btn { outline: 2px solid var(--gold-ink); outline-offset: 4px; }
.piece__line { font: 200 clamp(1rem, 1.8vw, 1.35rem)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--forest); max-width: none; text-wrap: balance; }
@media (max-width: 700px) {
  .piece, .pieces li:nth-child(even) .piece { grid-template-columns: 1fr; grid-template-areas: "frame" "text"; gap: 44px; }
  .piece .shape, .pieces li:nth-child(even) .piece .shape { justify-self: center; width: min(66vw, 280px); margin: 0 !important; }

  .pieces > li { padding: 56px 0 52px; }
  .piece__text, .pieces li:nth-child(even) .piece__text { justify-items: center; text-align: center; }
}

/* Solid forest button (section pages) */
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; background: var(--forest); color: var(--cream); text-decoration: none;
  font: 400 .78rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; transition: background-color .35s ease, color .35s ease; }
.btn:hover, .btn:focus-visible { background: var(--gold); color: var(--forest-deep); }

/* ---------- SECTION PAGES: the mirror from the homepage, opened up ---------- */
.sec { display: grid; grid-template-columns: auto minmax(0, 520px); justify-content: center; align-items: center; gap: clamp(36px, 6vw, 110px);
  padding: clamp(36px, 6vw, 90px) var(--gutter) clamp(48px, 7vw, 100px); }
.sec__frame.oframe { height: min(70svh, 640px); }
.sec__text { display: grid; justify-items: start; gap: 18px; }
.sec__kicker { font: 400 .74rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
.sec .ttl__script { font-size: clamp(3.2rem, 6.4vw, 5.8rem); }
.sec .ttl__caps { font-size: clamp(1.1rem, 2.3vw, 2rem); }
.sec__intro { max-width: 44ch; color: #3E4A41; }
.sec__note { font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1 var(--headline); color: var(--gold-ink); }
.sec-list { max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 110px); }
.sec-list__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); border-top: 1px solid rgba(31, 58, 45, .2); }
.sec-list__items li { padding-top: 22px; display: grid; gap: 10px; align-content: start; }
.sec-list__title { font: 400 clamp(1.3rem, 1.8vw, 1.6rem)/1 var(--headline); color: var(--forest); }
.sec-list__items p { font-size: .98rem; color: #3E4A41; }
@media (max-width: 860px) {
  .sec { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .sec__frame.oframe { height: min(58svh, 460px); }
  .sec__text { justify-items: center; }
  .sec .ttl--left { justify-items: center; text-align: center; }
  .sec-list__items { grid-template-columns: 1fr; text-align: center; }
}

/* ---------- GET IN TOUCH: the phone and the lace envelope ---------- */
.touch { position: relative; z-index: 3; padding: clamp(28px, 3vw, 44px) var(--gutter) clamp(52px, 4.4vw, 64px); text-align: center; background: var(--cream); }
/* the darker band sits behind the heading and ends a little under "Book a call"; the phone and envelope overflow onto the cream */
.touch__head { position: relative; padding-bottom: clamp(36px, 3.6vw, 52px); margin-bottom: clamp(18px, 2.4vw, 36px); }
.touch__head::before { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0; top: calc(-1 * clamp(28px, 3vw, 44px)); background: #E3D6BC; }
.touch__head .touch__book { margin-bottom: 0; }
/* The phone hangs from the very top edge of this section: it keeps its place in the row but its cord starts at the top */
.touch { --ph: clamp(300px, 29vw, 420px); }
.touch .ttl__script { font-size: clamp(3rem, 6.4vw, 5.4rem); }
.touch .ttl__caps { font-size: clamp(1.05rem, 2.3vw, 1.9rem); }
/* "Book a call" centred under the heading */
.touch__book { position: relative; z-index: 5; display: inline-block; margin: 0 0 clamp(18px, 2.4vw, 36px); font: 400 .78rem/1 var(--sans); letter-spacing: .32em;
  text-transform: uppercase; color: var(--forest); text-decoration: none; padding: 0 0 7px .32em; border-bottom: 1px solid var(--gold); }
.touch__book:hover, .touch__book:focus-visible { color: var(--gold-ink); }
/* "Are you ready?" in the logo's Bodoni capitals, big and centred */
.touch__ready { position: relative; z-index: 5; margin: 0 0 clamp(14px, 1.6vw, 22px); font: 500 clamp(2.6rem, 7.2vw, 6.6rem)/.95 var(--serif);
  text-transform: uppercase; letter-spacing: .05em; color: var(--forest); text-align: center;
  -webkit-text-stroke: clamp(1px, .14vw, 2px) var(--forest); }  /* thickens the Bodoni hairlines so every letter reads */
.touch__pair { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: clamp(120px, 26vw, 460px); margin-top: 0; }
.call { display: block; position: static; padding-left: calc(var(--ph) * .232 + 22px); min-height: 0; align-self: end; text-decoration: none; color: var(--forest); }
.call__phone { position: absolute; z-index: 4; top: 0; height: var(--ph); width: auto; margin-left: calc(-1 * (var(--ph) * .232 + 22px)); transform-origin: 50% 0; }
/* The phone sways slowly on its cord, pivoting from the top */
@media (prefers-reduced-motion: no-preference) { .call__phone { animation: sway 7s ease-in-out infinite; } }
@keyframes sway { 0%, 100% { rotate: 1.6deg; } 50% { rotate: -1.6deg; } }
.call__text { display: grid; justify-items: start; text-align: left; }
/* desktop: "Book a call" sits beside the bottom of the hanging handset (top measured from the section, like the phone) */
@media (min-width: 761px) { .call { min-width: calc(var(--ph) * .232 + 22px + 110px); } }
.call__small { margin-top: 12px; font: 400 .72rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 6px; }
/* The lace envelope: when it comes into view the kiss stamps onto the card; on hover the envelope lifts and tilts
   toward you while its shadow deepens (new.js adds .is-sealed once, on scroll) */
.letter { position: relative; display: block; width: clamp(200px, 21vw, 280px); text-decoration: none; color: var(--forest);
  transition: transform .7s var(--ease), filter .7s ease; filter: drop-shadow(0 6px 10px rgba(58, 16, 22, .12)); }
/* new.js sets --rise as the section scrolls past, so the envelope floats upward */
/* desktop: further right, higher, turned on a slight diagonal; rises on scroll (wide screens keep it below the heading) */
@media (min-width: 1600px) { .letter { --up: 330px; } }
.letter { --lift: var(--up, clamp(260px, 22vw, 330px)); translate: clamp(40px, 6vw, 110px) calc(var(--rise, 0px) - var(--lift)); rotate: 8deg;
  margin-bottom: calc(-1 * var(--lift)); }  /* the raise also takes its space out of the section, so no gap is left below */
.letter:hover, .letter:focus-visible { transform: translateY(-8px) rotate(-2.5deg); filter: drop-shadow(0 22px 26px rgba(58, 16, 22, .26)); }
.letter:focus-visible { outline: none; }
.letter:focus-visible .letter__card { outline: 2px solid var(--gold-ink); outline-offset: 4px; }
.letter__env { width: 100%; height: auto; }
.letter__card { position: absolute; left: 29%; right: 29%; top: 26%; height: 24%; display: grid; place-items: center; align-content: start; gap: clamp(8px, 1vw, 14px); text-align: center; }
.letter__hi { font: 400 clamp(1.1rem, 1.4vw, 1.3rem)/1.1 var(--headline); color: var(--gold-ink); }
.letter__email { font: 400 clamp(.46rem, .62vw, .54rem)/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.letter__kiss { position: absolute; width: 17%; left: 61%; top: 45%; rotate: -12deg; }
@media (prefers-reduced-motion: no-preference) {
  .js .letter__kiss { opacity: 0; scale: 1.8; }
  .js .letter.is-sealed .letter__kiss { animation: stamp .55s cubic-bezier(.3, 1.5, .5, 1) .2s forwards; }
}
@keyframes stamp { 0% { opacity: 0; scale: 1.8; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }
.touch__or { margin-top: clamp(20px, 2.6vw, 32px); font: 300 1rem/1.4 var(--sans); color: var(--muted); }
.touch__or a { color: var(--forest); text-decoration-color: var(--gold); text-underline-offset: 3px; }
@media (max-width: 760px) {
  .touch__pair { row-gap: 8px; }
  .touch { padding-bottom: 44px; }
  .touch__pair { grid-template-columns: 1fr; justify-items: center; }
  .call { display: grid; grid-template-columns: auto auto; align-items: center; gap: 16px; padding-left: 0; min-height: 0; }
  .call__phone { position: static; height: 200px; margin-left: 0; }
  .letter { width: 240px; translate: none; rotate: 6deg; margin-top: 10px; margin-bottom: 0; }
  .call__phone { height: 170px; }
}

/* ---------- XOXO, with the legs ---------- */
.sign { position: relative; display: grid; justify-items: center; gap: 4px; padding: clamp(64px, 7vw, 96px) 16px 28px; text-align: center; overflow: hidden; }
.sign::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42px; pointer-events: none;
  background: url(/images/new/garland-up.png) 50% 100% / auto 42px repeat-x; }
/* rising from the bottom edge of the page: the cut at the hips sits below the edge (the footer clips it) */
.sign__legs { position: absolute; width: clamp(110px, 10vw, 150px); height: auto; left: calc(50% + clamp(150px, 12vw, 190px)); bottom: -14%; pointer-events: none; }
.sign__xoxo { font: 400 clamp(3.6rem, 9vw, 6.4rem)/1 var(--script); color: var(--gold-ink); rotate: -4deg; margin-bottom: 8px; }
.sign__mast { --big: clamp(2.6rem, 8vw, 5rem); color: var(--forest); }
.sign__year { margin-top: clamp(30px, 4vw, 48px); font: 400 .66rem/1 var(--sans); letter-spacing: .24em; color: var(--muted); }
@media (max-width: 640px) { .sign__legs { width: 70px; left: auto; right: 14px; bottom: -8%; } }
/* TEMP (Cara 10-11, "get rid of the shapes for a sec"): the hairline box / oval outlines are hidden. Delete this rule to bring them back. */
.shape::after { display: none; }

/* Buttons on hover: forest green with a light gold shimmer sweeping across (every button on these pages) */
.piece__btn, .nav__book, .btn, .enter {
  background-image: linear-gradient(110deg, rgba(233, 210, 154, 0) 30%, rgba(233, 210, 154, .38) 48%, rgba(255, 244, 210, .55) 50%, rgba(233, 210, 154, .38) 52%, rgba(233, 210, 154, 0) 70%);
  background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat; }
.piece__btn:hover, .piece:focus-visible .piece__btn,
.nav__book:hover, .nav__book:focus-visible, .btn:hover, .btn:focus-visible,
.enter:hover, .enter:focus-visible, .enter.is-entering {
  background-color: var(--forest); color: var(--cream); border-color: var(--forest); }
@media (prefers-reduced-motion: no-preference) {
  .piece__btn:hover, .piece:focus-visible .piece__btn,
  .nav__book:hover, .nav__book:focus-visible, .btn:hover, .btn:focus-visible,
  .enter:hover, .enter:focus-visible, .enter.is-entering { animation: btn-shimmer 2.6s ease-in-out infinite; }
}
@keyframes btn-shimmer { 0% { background-position: 130% 0; } 70%, 100% { background-position: -30% 0; } }

/* Arriving from the loading screen: the two gold garlands start together in the middle of a cream screen (lines facing,
   as in her pin), then part, one up and one down, opening onto the page. Only after ENTER NYAM (arrive.js adds .zoom-in). */
.opening { display: none; }
html.zoom-in .opening { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; background: var(--cream); }
.opening__half { position: absolute; left: 0; right: 0; height: 50%; }
.opening__half--top { top: 0; }
.opening__half--bottom { bottom: 0; }
.opening__half::after { content: ""; position: absolute; left: 0; right: 0; height: 42px; }  /* same size as the nav garland */
.opening__half--top::after { bottom: 0; background: url(/images/new/garland-down.png) 50% 0 / auto 100% repeat-x; }  /* hangs like the nav garland */
.opening__half--bottom::after { top: 0; background: url(/images/new/garland-up.png) 50% 100% / auto 100% repeat-x; }
@media (prefers-reduced-motion: reduce) { html.zoom-in .opening { display: none; } }
@keyframes garland-in { from { opacity: 0; } }
@keyframes open-top { 0%, 17% { transform: none; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  39%, 50% { transform: translateY(-46px); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 100% { transform: translateY(var(--to, -46px)); } }
@keyframes open-bottom { 0%, 17% { transform: none; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  39%, 50% { transform: translateY(46px); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 100% { transform: translateY(var(--to, 46px)); } }
@keyframes fold { to { opacity: 0; } }
@keyframes opening-off { to { visibility: hidden; } }
@keyframes op-creep { 0% { transform: scaleX(0); } 100% { transform: scaleX(.9); } }

/* Opening after ENTER NYAM (V1 and V2): the splash goes straight here; "Loading something iconic…" sits between the closed garlands while a
   gold line fills, then it fades and the garlands part (top to the nav, bottom away) and the page appears */
.opening__load { display: none; }
html.zoom-in .opening__load { display: grid; position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; justify-items: center; gap: 12px; z-index: 2; }
.opening__load p { margin: 0; font: 400 clamp(.72rem, 1.2vw, .86rem)/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--forest); padding-left: .34em; }
.opening__load span { width: min(200px, 50vw); height: 1px; background: rgba(31, 58, 45, .15); position: relative; overflow: hidden; }
.opening__load span::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
/* The garlands hold just apart with "Loading something iconic…" between them for as long as the page is still
   loading (the gold line creeps toward the end). When everything is in, new.js adds .opening-part: the line
   completes, the words fade, the garlands glide apart (top onto the nav), and the cream lifts onto the page. */
@media (prefers-reduced-motion: no-preference) {
  html.zoom-in .opening__half--top { transform: translateY(-34px); }
  html.zoom-in .opening__half--bottom { transform: translateY(34px); }
  html.zoom-in .opening__half::after, html.zoom-in .opening__load { animation: garland-in .7s ease both; }
  html.zoom-in.opening-go .opening__load span::after { animation: op-creep 6s cubic-bezier(.2, .6, .3, 1) forwards; }
  html.zoom-in.opening-part .opening__load span::after { animation: none; transform: scaleX(1); transition: transform .4s ease; }
  /* the words stay while the garlands open, and lift away with the cream at the end */
  /* the garlands are already on the loading screen; when the page is ready they part, top up onto the nav and bottom down
     out of view, then the cream lifts onto the page */
  html.zoom-in.opening-part .opening__half { transform: translateY(var(--to)); transition: transform 2.4s cubic-bezier(.45, 0, .2, 1) .5s; }
  html.zoom-in.opening-part .opening { opacity: 0; visibility: hidden; transition: opacity .8s ease 2.9s, visibility 0s linear 3.7s; }
}
/* Nav and footer garlands softer (V1 + V2) */
.nav::after, .sign::before { opacity: .45; }
.nav.is-scrolled::after { opacity: 0; }

/* The phone and envelope are pictures, not links (Book a call and the Book button do the booking) */
.call, .letter { cursor: default; }
.letter:hover { transform: none; filter: drop-shadow(0 6px 10px rgba(58, 16, 22, .12)); }

/* TEMP (Cara 10-11, "kill links on sections for now"): the six offerings are not clickable yet. Their pages are kept in
   data-href; to switch them back on, rename data-href to href in welcome.html (V1 and V2) and delete this rule. */
a.piece:not([href]), a.strip__card:not([href]) { cursor: default; }

/* Top nav: the six offerings between NYAM and Book; on narrower screens they fold into a Menu button */
.nav__links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); margin-inline: auto; }
.nav__links a { font: 400 .7rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--forest); text-decoration: none;
  padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .3s ease, color .3s ease; }
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a[aria-current] { border-bottom-color: var(--gold); }
.nav__menu { display: none; border: 0; background: none; font: 400 .7rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--forest);
  padding: 10px 4px; border-bottom: 1px solid var(--gold); cursor: pointer; margin-left: auto; margin-right: 18px; }
@media (max-width: 1180px) {
  .nav__menu { display: block; }
  .nav__links { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 2; flex-direction: column; gap: 0; padding: 10px var(--gutter) 18px;
    background: rgba(245, 239, 226, .98); box-shadow: 0 14px 24px -18px rgba(21, 40, 31, .5); }
  .nav__links a { padding: 14px 0; width: 100%; text-align: center; border-bottom: 1px solid rgba(31, 58, 45, .1); }
  .nav.is-open .nav__links { display: flex; }
}
.nav__replay { display: none; }  /* hidden for now; delete this line to bring "Replay intro" back */
@media (max-width: 440px) { .nav__book { padding: 0 14px; letter-spacing: .16em; font-size: .66rem; } }  /* "Work with Alecia" fits beside the logo and Menu on phones */

/* Garlands back under the nav and above the footer (Cara 10-11), at the softer strength set above */
.nav__links { background: none; }
@media (max-width: 1180px) { .nav__links { background: var(--cream); } }

/* ---------- Polish (2026-10-12): a little more pop, more elegant, tighter (Version One's six rows only) ---------- */
/* tighter: less empty cream after the last row and between the rows, text a touch closer to its photo */
.welcome { padding-bottom: clamp(36px, 4vw, 60px); }
.pieces { margin-bottom: clamp(24px, 3vw, 48px); }
.pieces > li { padding: clamp(6px, .8vw, 12px) 0; }
.piece { gap: clamp(28px, 3vw, 54px); }
/* pop: each photo lifts off the page on a soft shadow, with a slightly fuller gold rim */
.pieces .shape { --rim: 2.5px; box-shadow: 0 30px 44px -26px rgba(40, 30, 12, .5), 0 3px 8px rgba(40, 30, 12, .08); }
/* elegant: bigger script titles, then a fine gold rule and small, widely spaced capitals */
.piece__title { font-size: clamp(3.4rem, 6vw, 5.2rem); }
.piece__line { font: 300 clamp(.86rem, 1.15vw, 1.02rem)/1.4 var(--sans); letter-spacing: .3em; padding-top: 16px; position: relative; }
.piece__line::before { content: ""; position: absolute; top: 0; left: 0; width: 72px; height: 1px;
  background: linear-gradient(90deg, #8C6A2E, #E9D29A 50%, #8C6A2E); }
.pieces li:nth-child(even) .piece__line::before { left: auto; right: .3em; }
.piece__btn { margin-top: 6px; border-color: var(--gold-ink); padding: 0 30px 0 calc(30px + .3em); }
@media (max-width: 700px) {
  .piece__line::before, .pieces li:nth-child(even) .piece__line::before { left: 50%; right: auto; translate: -50% 0; }
  .pieces > li { padding: 44px 0 40px; }
}
/* the frames never sit on top of the words or buttons: the text sits above them, and each button is filled with its band's colour */
.piece__text { position: relative; z-index: 3; }
.piece__btn { background-color: var(--cream); }
.pieces li:nth-child(even) .piece__btn { background-color: #EBE1CC; }
.piece__btn:hover, .piece:focus-visible .piece__btn { background-color: var(--forest); }
.pieces li .piece__btn:hover, .pieces li .piece:focus-visible .piece__btn { background-color: var(--forest); color: var(--cream); }
/* only the button catches the mouse: hovering the button (not the photo) reveals the photo's colour */
.piece__text { pointer-events: none; }
.piece__btn { pointer-events: auto; }
/* every photo row (band) the same height as the tallest one, with its photo and words centred in it */
@media (min-width: 701px) {
  .pieces { grid-auto-rows: 1fr; }
  .pieces > li { display: grid; align-items: center; }
}
/* a fine gold line at the top and bottom of every photo band (one shared line between bands); the photos sit over it */
.pieces > li::before { border-top: 1.5px solid #B8914A; }
.pieces > li:last-child::before { border-bottom: 1.5px solid #B8914A; }

/* ---------- Editorial pass (2026-10-12): tighter, more unique, more design (Version One's photo rows) ---------- */
@media (min-width: 701px) {
  /* tighter: slightly smaller photos, so every row (and the gap under the intro) is shorter */
  .pieces { margin-top: clamp(150px, 12vw, 190px); }
  .pieces .shape { width: clamp(260px, 26vw, 380px); }
  .pieces .shape--4 { width: clamp(220px, 21vw, 290px); }
  /* unique: each photo laid on the page at a slight angle, alternating like prints on a table */
  .pieces li:nth-child(odd) .shape { rotate: -2.2deg; }
  .pieces li:nth-child(even) .shape { rotate: 2.2deg; }
}
/* magazine numbering: "No. 01" in small gold capitals over each title, and a big faint Bodoni numeral behind the words */
.pieces { counter-reset: piece; }
.pieces > li { counter-increment: piece; }
.piece__title { display: block; }
.piece__title::before { content: "No. " counter(piece, decimal-leading-zero); display: block; margin-bottom: .55em;
  font: 400 .7rem/1 var(--sans); letter-spacing: .4em; text-transform: uppercase; color: var(--gold-ink); }
.piece__text::before { content: counter(piece, decimal-leading-zero); position: absolute; z-index: -1; top: 50%; translate: 0 -54%;
  font: 500 clamp(9rem, 15vw, 14rem)/1 var(--serif); color: var(--forest); opacity: .06; pointer-events: none; }
/* the numeral stands in the open space on the far side of the row, clear of the words */
.piece__text { align-self: stretch; align-content: center; }
.pieces li:nth-child(odd) .piece__text::before { right: 4%; }
.pieces li:nth-child(even) .piece__text::before { left: 4%; }
.piece__text::before { opacity: .09; font-size: clamp(8rem, 13vw, 12.5rem); }
/* a small gold diamond centred on each gold band line */
.pieces > li::after { content: ""; position: absolute; z-index: 1; top: -4px; left: 50%; width: 8px; height: 8px; translate: -50% 0; rotate: 45deg;
  background: linear-gradient(135deg, #8C6A2E, #E9D29A 50%, #8C6A2E); }
.pieces > li:last-child { position: relative; }
.pieces > li:last-child .piece::after { content: ""; position: absolute; z-index: 1; bottom: -4px; left: 50%; width: 8px; height: 8px; translate: -50% 0; rotate: 45deg;
  background: linear-gradient(135deg, #8C6A2E, #E9D29A 50%, #8C6A2E); }
@media (max-width: 700px) {
  .piece__text::before { left: 50% !important; right: auto !important; translate: -50% -54%; }
}
/* numbers removed (Cara, 10/12): no "No. 01" labels and no big numerals */
.piece__title::before, .piece__text::before { content: none; }
/* hovering Explore turns the section name gold too, with a sheen running through it, as the photo comes into colour */
.piece__title { transition: color .6s ease; }
.piece:has(.piece__btn:hover) .piece__title, .piece:focus-visible .piece__title {
  background: linear-gradient(110deg, #8C6A2E 0%, #B8914A 35%, #F3DFA6 50%, #B8914A 65%, #8C6A2E 100%) 100% 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .piece:has(.piece__btn:hover) .piece__title, .piece:focus-visible .piece__title { animation: title-sheen 1.6s ease-out forwards; }
}
@keyframes title-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- Photo rows coming in (new.js adds .rows-anim, then .is-in per row as it scrolls into view); the rows themselves don't move ---------- */
/* the gold line along the top of each band draws out from the centre, and its diamond appears */
html.rows-anim .pieces > li::before { border-top-width: 0; background-image: linear-gradient(90deg, #B8914A, #B8914A); background-repeat: no-repeat;
  background-position: 50% 0; background-size: 0 1.5px; transition: background-size 1.4s cubic-bezier(.65, 0, .25, 1) .1s; }
html.rows-anim .pieces > li.is-in::before { background-size: 100% 1.5px; }
html.rows-anim .pieces > li::after { transition: opacity .5s ease, scale .6s var(--ease); }
html.rows-anim .pieces > li:not(.is-in)::after { opacity: 0; scale: 0; }
/* the gold frame blooms in around the photo once it has landed */
html.rows-anim .shape::before { transition: opacity 1.1s ease .7s, scale 1.3s var(--ease) .7s; }
html.rows-anim .pieces > li:not(.is-in) .shape::before { opacity: 0; scale: .7; }

/* ---------- Section pages, built out (2026-10-12): bands under the mirror, alternating creams, each opened by a gold line and diamond ---------- */
.band { position: relative; padding: clamp(64px, 8vw, 116px) var(--gutter); }
.band--deep { background: #EDE3CF; }
.band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid rgba(184, 145, 74, .55); }
.band::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; translate: -50% 0; rotate: 45deg;
  background: linear-gradient(135deg, #8C6A2E, #E9D29A 50%, #8C6A2E); }
.band__head { display: grid; justify-items: center; gap: 18px; margin: 0 auto clamp(36px, 5vw, 64px); max-width: 640px; text-align: center; }
.band__lede, .cta__line, .band__empty { color: #3E4A41; text-wrap: pretty; }
.band__empty { text-align: center; max-width: 48ch; margin: 0 auto; }
.band__more { margin-top: clamp(32px, 4vw, 52px); text-align: center; }
.more-link { display: inline-block; font: 400 .78rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--forest);
  text-decoration: none; padding: 0 0 7px .32em; border-bottom: 1px solid var(--gold); transition: color .3s ease; }
.more-link:hover, .more-link:focus-visible { color: var(--gold-ink); }
h3 { margin: 0; font-weight: 400; }
.sec__intro, .card__body p, .step p, .faq__a p, .quote__words p, .note__intro { text-wrap: pretty; }

/* Cards: a script title over a fine gold rule, words, and an optional list with gold diamonds */
.cards { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; gap: clamp(20px, 2.6vw, 36px); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; display: grid; align-content: start; gap: 14px; padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  background: var(--card); box-shadow: 0 1px 0 rgba(31, 58, 45, .06), 0 18px 40px -28px rgba(31, 58, 45, .35); }
.band--deep .card { background: #F8F2E6; }
.card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(184, 145, 74, .4); pointer-events: none; }
.card__title { font: 400 clamp(1.2rem, 1.68vw, 1.56rem)/1 var(--headline); color: var(--forest); padding-bottom: 14px; border-bottom: 1px solid rgba(184, 145, 74, .55); text-wrap: balance; }
.card__body { font-size: .98rem; color: #3E4A41; }
.ticks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; font-size: .94rem; }
.ticks li { position: relative; padding-left: 20px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; rotate: 45deg; background: var(--gold); }
/* the wide list (What we work on, Our promise): two columns of larger lines */
.ticks--wide { max-width: 900px; margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); font: 200 clamp(1.05rem, 1.5vw, 1.25rem)/1.4 var(--sans); letter-spacing: .02em; }
.ticks--wide li { padding: 18px 0 18px 26px; border-bottom: 1px solid rgba(31, 58, 45, .14); }
.ticks--wide li::before { top: calc(18px + .5em); width: 7px; height: 7px; }

/* Steps: First / Next / Last in gold capitals over a script title */
.steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; gap: clamp(28px, 4vw, 56px); counter-reset: none; }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { display: grid; align-content: start; justify-items: center; gap: 12px; text-align: center; }
.step__when { font: 400 .7rem/1 var(--sans); letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: var(--gold-ink); }
.step__when::after { content: ""; display: block; width: 8px; height: 8px; margin: 14px auto 2px; rotate: 45deg; background: linear-gradient(135deg, #8C6A2E, #E9D29A 50%, #8C6A2E); }
.step__title { font: 400 clamp(1.26rem, 1.8vw, 1.68rem)/1 var(--headline); color: var(--forest); text-wrap: balance; }
.step p { max-width: 30ch; font-size: .98rem; color: #3E4A41; }

/* Questions: a thin line between each, a gold plus that turns as it opens */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid rgba(31, 58, 45, .18); }
.faq__item { border-bottom: 1px solid rgba(31, 58, 45, .18); }
.faq__item summary { position: relative; list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font: 300 clamp(1.05rem, 1.6vw, 1.25rem)/1.4 var(--sans); color: var(--forest); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%; font: 200 1.8rem/1 var(--sans); color: var(--gold-ink); transition: rotate .35s var(--ease); }
.faq__item[open] summary::after { rotate: 45deg; }
.faq__item summary:hover { color: var(--gold-ink); }
.faq__a { padding: 0 48px 24px 0; color: #3E4A41; display: grid; gap: 12px; }

/* Reviews: big Bodoni quote marks, her clients' words, name and who they are */
.quotes { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.quotes:not(:has(.quote:not([hidden]))) { display: none; }
.quote { position: relative; display: grid; align-content: start; gap: 20px; padding: clamp(48px, 4vw, 60px) clamp(24px, 2.6vw, 36px) clamp(28px, 3vw, 40px); background: #F8F2E6;
  box-shadow: 0 18px 40px -28px rgba(31, 58, 45, .35); }
.quote::before { content: "\201C"; position: absolute; top: 4px; left: clamp(20px, 2.4vw, 32px); font: 500 5.4rem/1 var(--serif); color: var(--gold); }
.quote__words { margin: 0; display: grid; gap: 12px; font: 300 clamp(1.02rem, 1.4vw, 1.15rem)/1.6 var(--sans); color: var(--forest); }
.quote__who { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid rgba(184, 145, 74, .55); }
.quote__name { font: 400 clamp(1.25rem, 1.7vw, 1.5rem)/1 var(--headline); color: var(--forest); }
.quote__role { font: 400 .7rem/1.3 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.quote__name:empty, .quote__role:empty { display: none; }

/* Content Creation: a strip of her photos, black and white until hovered, laid at slight angles like prints */
.strip { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.strip__item { aspect-ratio: 4 / 5; overflow: hidden; background: #E3D6BC; padding: 8px; box-shadow: 0 18px 36px -24px rgba(31, 58, 45, .45); outline: 1px solid rgba(184, 145, 74, .45); outline-offset: -4px; }
.strip__item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .7s ease; }
.strip__item:hover img { filter: none; }
.strip__item:nth-child(odd) { rotate: -1.4deg; }
.strip__item:nth-child(even) { rotate: 1.4deg; }
.strip__item:nth-child(n+9) { display: none; }

/* Notes: her latest posts, each photo in an arch with a hairline gold rim */
.notes { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 36px); }
.notes:empty { display: none; }
.note { display: grid; align-content: start; gap: 10px; }
.note__media { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 4px 4px; background: #E3D6BC; margin-bottom: 8px;
  outline: 1px solid rgba(184, 145, 74, .6); outline-offset: 6px; }
.note__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.note:hover .note__media img { scale: 1.04; }
.note__media--type .nyam { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.note__meta { font: 400 .68rem/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.note__title { font: 500 clamp(1.3rem, 1.8vw, 1.55rem)/1.2 var(--serif); text-wrap: balance; }
.note__title a { text-decoration: none; }
.note__title a:hover, .note__title a:focus-visible { color: var(--gold-ink); }
.note__intro { font-size: .96rem; color: #3E4A41; }

/* Closing band on each page */
.cta { display: grid; justify-items: center; gap: 22px; text-align: center; }
.cta .band__head, .cta .ttl { margin-bottom: 0; }
.cta__line { max-width: 46ch; }
.cta__btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 32px; margin-top: 6px; }

@media (max-width: 1000px) {
  .cards--4, .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip__item:nth-child(n+7) { display: none; }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cards--3, .cards--4, .steps--3, .steps--4, .notes { grid-template-columns: 1fr; }
  .cards { max-width: 480px; }
  .card { text-align: center; justify-items: center; }
  .ticks:not(.ticks--wide) { justify-items: start; text-align: left; }
  .ticks--wide { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notes { max-width: 420px; }
  .faq__a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .strip__item img, .note__media img, .faq__item summary::after { transition: none; } }
/* no single word left alone on a last line: short lines are balanced, and three cards stack on tablets */
.ticks li, .faq__item summary, .card__body p, .step p, .cta__line, .band__lede, .band__empty, .faq__a p { text-wrap: balance; }
@media (max-width: 900px) { .cards--3 { grid-template-columns: 1fr; max-width: 520px; } .card { text-align: center; justify-items: center; } .ticks:not(.ticks--wide) { justify-items: start; text-align: left; } }

/* ---------- Section page heroes (2026-10-12): the welcome page's row, opened up. Compact deep-cream band, her photo in the
   same shape and faint ornate frame as on the welcome page (in colour, laid at a slight angle), hanging over the gold line
   into the page below; a faint frame drawing sits behind the words ---------- */
.phero { position: relative; z-index: 2; isolation: isolate; overflow-x: clip; display: grid; grid-template-columns: max-content minmax(0, 560px); justify-content: center; align-items: center;
  column-gap: clamp(56px, 7vw, 120px); padding: clamp(64px, 6vw, 92px) var(--gutter) clamp(40px, 4vw, 64px); background: #EBE1CC; }
.phero::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .14;
  background: url(/images/new/frame-botanical-hair.webp) right max(-60px, calc(50% - 760px)) top -40px / auto 130% no-repeat; }
.phero--1::before, .phero--3::before, .phero--6::before { background-image: url(/images/new/frame-crest-hair.webp); }
.phero--4::before { background-image: url(/images/new/frame-oval-hair.webp); }
/* the gold line along the bottom, with its diamond, as on the welcome rows */
.phero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; translate: 0 50%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238C6A2E'/%3E%3Cstop offset='.5' stop-color='%23E9D29A'/%3E%3Cstop offset='1' stop-color='%238C6A2E'/%3E%3C/linearGradient%3E%3Cpath d='M6 0 12 6 6 12 0 6z' fill='url(%23g)'/%3E%3C/svg%3E") center / 12px 12px no-repeat, linear-gradient(rgba(184, 145, 74, .75), rgba(184, 145, 74, .75)) center / 100% 1px no-repeat; }
.phero__shape.shape { z-index: 2; align-self: end; width: clamp(280px, 27vw, 400px); margin-bottom: calc(-1 * clamp(110px, 10vw, 150px)); rotate: -2.2deg;
  box-shadow: 0 30px 60px -34px rgba(31, 58, 45, .55); }
.phero--2 .phero__shape, .phero--4 .phero__shape, .phero--6 .phero__shape { rotate: 2.2deg; }
.phero__shape.shape--4 { width: clamp(230px, 21vw, 300px); }
.phero__shape.shape--3 { box-shadow: 0 30px 60px -34px rgba(31, 58, 45, .55); }
/* the band below makes room for the photo hanging into it */
.phero + .band { padding-top: clamp(130px, 12vw, 190px); }
.phero__text { display: grid; justify-items: start; gap: 16px; padding-bottom: clamp(20px, 3vw, 44px); }
.phero__kicker { font: 400 .72rem/1 var(--sans); letter-spacing: .4em; text-transform: uppercase; color: var(--gold-ink); }
.phero__title { display: grid; justify-items: start; gap: 14px; margin: 2px 0 6px; color: var(--forest); }
.phero__script { font: 400 clamp(2.04rem, 3.6vw, 3.24rem)/1 var(--headline); padding-right: .1em; }
.phero__rule { display: block; width: 72px; height: 1px; background: var(--gold); }
.phero__caps { font: 200 clamp(1.05rem, 1.9vw, 1.6rem)/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.phero__intro { max-width: 44ch; color: #3E4A41; text-wrap: pretty; }
.phero__note { font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1 var(--headline); color: var(--gold-ink); }
.phero .btn { margin-top: 8px; }
@media (max-width: 760px) {
  .phero { grid-template-columns: 1fr; justify-items: center; row-gap: 40px; padding-top: 56px; padding-bottom: 0; text-align: center; }
  .phero::before { background-position: center top -20px; background-size: auto 70%; opacity: .1; }
  .phero__shape.shape { align-self: center; width: min(64vw, 280px); margin-bottom: 0; }
  .phero__shape.shape--4 { width: min(50vw, 210px); }
  .phero__text { justify-items: center; padding-bottom: 56px; }
  .phero__title { justify-items: center; }
  .phero + .band { padding-top: clamp(64px, 8vw, 116px); }
}

/* ---------- Phones and small screens (2026-10-12) ---------- */
/* section titles: the capitals sit clear of the script's tails */
.band__head .ttl__caps, .cta .ttl__caps { margin-top: .42em; }
@media (max-width: 700px) {
  /* no empty stripe between the last photo row and Are you ready? */
  .welcome { padding-bottom: 0; }
  .pieces { margin-bottom: 0; }
  /* calmer spacing between bands */
  .band { padding-top: 60px; padding-bottom: 64px; }
  .band__head { margin-bottom: 32px; }
  .ttl--small .ttl__script { font-size: 3.1rem; }
  /* Notes: each post as a compact row, a small arched photo beside its title */
  .notes { max-width: 520px; gap: 26px; }
  .note { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "media meta" "media title" "media intro"; column-gap: 18px; row-gap: 6px; align-content: start; text-align: left; }
  .note__media { grid-area: media; margin: 0; outline-offset: 4px; align-self: start; }
  .note__meta { grid-area: meta; font-size: .62rem; }
  .note__title { grid-area: title; font-size: 1.15rem; }
  .note__intro { grid-area: intro; font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .note__media--type .nyam { font-size: 1.4rem; }
  /* Content strip: straighter prints so the grid reads cleanly at this size */
  .strip__item:nth-child(odd) { rotate: -.8deg; }
  .strip__item:nth-child(even) { rotate: .8deg; }
  /* questions: room for the thumb */
  .faq__item summary { padding: 20px 40px 20px 0; font-size: 1.02rem; }
}

/* Phones: "Work with Alecia" moves out of the top bar into the bottom of the Menu, as a full-width forest button */
.nav__links-book { display: none; }
@media (max-width: 700px) {
  .nav__end .nav__book { display: none; }
  .nav__menu { margin-right: 0; }
  .nav__links .nav__links-book { display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 18px; padding: 0 20px;
    background: var(--forest); color: var(--cream); border: 0; font: 400 .76rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
  .nav__links .nav__links-book:hover, .nav__links .nav__links-book:focus-visible { background: var(--gold); color: var(--forest-deep); }
}

/* Phones: the phone hangs down the left side for the full height of Are you ready?, its cord from the top edge, larger,
   and the heading, Get in touch and the envelope sit in the column beside it */
@media (max-width: 760px) {
  .touch { --mph: 600px; --mpw: calc(var(--mph) * .232); min-height: var(--mph); padding-left: calc(var(--mpw) + 14px); padding-right: 16px; padding-bottom: 36px; }
  .touch__pair { display: block; }
  .call { position: static; display: block; padding: 0; }
  .call__phone { position: absolute; z-index: 4; top: 0; left: 10px; height: var(--mph); width: var(--mpw); margin: 0; }
  .touch__head::before { left: calc(-1 * (var(--mpw) + 14px)); right: -16px; }
  .touch__ready { font-size: clamp(2.2rem, 11vw, 2.9rem); }
  .letter { width: min(100%, 210px); margin: 26px auto 0; rotate: 6deg; }
}
@media (max-width: 360px) { .touch { --mph: 540px; } .letter__hi { font-size: 1.05rem; } .letter__email { font-size: .36rem; letter-spacing: .01em; } .letter__card { gap: 6px; } }

/* ---------- Phones (2026-10-12): Are you ready? centred across the full width; the phone still hangs the full height down
   the left, and the envelope sits lower, beside the handset ---------- */
@media (max-width: 760px) {
  .touch { padding-left: 16px; padding-right: 16px; }
  .touch__head { padding-left: 0; }
  .touch__head::before { left: -16px; right: -16px; }
  .letter { margin: clamp(60px, 18vw, 90px) 0 0 calc(var(--mpw) + 4px); width: min(calc(100% - var(--mpw) - 8px), 210px); justify-self: auto; }
}

/* Phones: the row in the middle of the screen reveals its colour and its title turns gold (new.js adds .is-live) */
@media (max-width: 700px) {
  .piece.is-live .shape__bw { clip-path: inset(0 0 0 100%); }
  .piece .piece__title { transition: color .6s ease; }
  .piece.is-live .piece__title {
    background: linear-gradient(110deg, #8C6A2E 0%, #B8914A 35%, #F3DFA6 50%, #B8914A 65%, #8C6A2E 100%) 0 0 / 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .piece.is-live .piece__btn { border-color: var(--gold); }
  .strip.is-live .strip__item img { filter: none; }
  .strip__item:nth-child(2) img { transition-delay: .15s; } .strip__item:nth-child(3) img { transition-delay: .3s; }
  .strip__item:nth-child(4) img { transition-delay: .45s; } .strip__item:nth-child(5) img { transition-delay: .6s; }
  .strip__item:nth-child(6) img { transition-delay: .75s; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .piece.is-live .shape__shine::before { animation: reveal-shine .95s cubic-bezier(.6, 0, .25, 1) forwards; }
  .piece.is-live .piece__title { background-position: 100% 0; animation: title-sheen 1.6s ease-out forwards; }
}
@media (max-width: 360px) { .call__phone { left: 2px; } .touch__ready { font-size: 1.95rem; } }
/* Phones: cream space above the Are you ready? band; the phone's cord still starts at the very top of the section */
@media (max-width: 760px) {
  .touch { padding-top: 64px; }
  .touch__head::before { top: -28px; }
}
/* Phones: bigger legs and bigger sign-off */
@media (max-width: 640px) {
  .sign { padding-bottom: 40px; }
  .sign__xoxo { font-size: 4.6rem; }
  .sign__mast { --big: min(15vw, 3.8rem); }
  .sign__mast .mast__small { font-size: .62rem; letter-spacing: .6em; margin-right: -.6em; }
  .sign__year { font-size: .82rem; margin-top: 34px; }
  .sign__legs { width: min(34vw, 140px); right: 4px; bottom: -6%; }
}
@media (max-width: 760px) { .touch { padding-top: 96px; } .touch__head::before { top: -30px; } }
/* Phones: the legs rise from the bottom-right corner beside the year, clear of the words */
@media (max-width: 640px) {
  .sign { padding-bottom: 96px; }
  .sign__legs { width: min(30vw, 124px); right: 6px; bottom: -34px; }
}
@media (max-width: 640px) { .sign { padding-bottom: 112px; } .sign__legs { bottom: -64px; } }
@media (max-width: 760px) { .touch { --mph: 640px; padding-top: 150px; } .touch__head::before { top: -32px; } }
@media (max-width: 360px) { .touch { --mph: 580px; } }
/* Phones: the handset hangs partly off the left edge so it clears Get in touch; the footer words sit lower, beside the legs */
@media (max-width: 760px) { .call__phone { left: -38px; } .letter { margin-left: calc(var(--mpw) - 30px); width: min(calc(100% - var(--mpw) + 26px), 220px); } }
@media (max-width: 360px) { .call__phone { left: -40px; } .touch { padding-top: 120px; } }
@media (max-width: 640px) { .sign { padding-top: 120px; padding-bottom: 64px; } }
/* Phones: XOXO and the sign-off at the top, the year lower down beside the legs */
@media (max-width: 640px) { .sign { padding-top: 64px; padding-bottom: 52px; } .sign__year { margin-top: 92px; } }
/* Phones: the handset only just off the left edge; the envelope higher; the whole sign-off together at the foot, beside the legs */
@media (max-width: 760px) { .call__phone { left: -14px; } .letter { margin-top: 28px; } }
@media (max-width: 360px) { .call__phone { left: -16px; } }
@media (max-width: 640px) {
  .sign { padding-top: 128px; padding-bottom: 44px; padding-right: min(28vw, 116px); padding-left: 12px; }
  .sign__year { margin-top: 26px; }
}
@media (max-width: 360px) { .call__phone { left: -24px; } }
@media (max-width: 640px) { .sign { padding-top: 100px; } }
/* Phones: a slightly smaller phone, the section a little higher, and cream space before the footer */
@media (max-width: 760px) { .touch { --mph: 570px; padding-top: 124px; } .touch + .sign, main + .sign { margin-top: 48px; } }
@media (max-width: 360px) { .touch { --mph: 520px; padding-top: 104px; } }
/* Phones: the phone a little further in, and fine gold lines along the top and bottom of the Are you ready? band */
@media (max-width: 760px) {
  .call__phone { left: 2px; }
  .touch__head::before { border-top: 1px solid rgba(184, 145, 74, .8); border-bottom: 1px solid rgba(184, 145, 74, .8); }
}
@media (max-width: 360px) { .call__phone { left: -10px; } }
@media (max-width: 360px) { .call__phone { left: -16px; } }
/* Phones: the sign-off centred; the legs kick up beside the year, below the words */
@media (max-width: 640px) { .sign { padding: 72px 16px 108px; } .sign__year { margin-top: 26px; } }
/* Phones: the envelope further right and higher, its top tip over the edge of the Are you ready? band; the footer closer */
@media (max-width: 760px) {
  .letter { position: relative; z-index: 4; margin: -34px 8px 0 auto; }
  .touch + .sign, main + .sign { margin-top: 0; }
  .touch { padding-bottom: 24px; }
}
/* Phones: Get in touch as a solid forest button */
@media (max-width: 760px) {
  .touch__head .touch__book { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 6px; padding: 0 20px 0 calc(20px + .26em);
    background: var(--forest); color: var(--cream); border: 0; letter-spacing: .26em; font-size: .72rem; transition: background-color .35s ease, color .35s ease; }
  .touch__head .touch__book:hover, .touch__head .touch__book:focus-visible { background: var(--gold); color: var(--forest-deep); }
}
@media (max-width: 360px) { .call__phone { left: -26px; } .touch__head .touch__book { padding: 0 14px 0 calc(14px + .2em); letter-spacing: .2em; } }

/* ---------- Portfolio (2026-10-12): filter chips, the book as prints with a fine gold rim, tap to open larger ---------- */
.filters { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 900px; margin: 0 auto clamp(28px, 4vw, 44px); }
.filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(31, 58, 45, .22); border-radius: 999px; background: transparent;
  font: 400 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--forest); cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.filters button:hover { border-color: var(--gold); }
.filters button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.filters__n { font-size: .62rem; letter-spacing: .08em; opacity: .7; }
.filters__line { display: none; }
.book { max-width: 1240px; margin: 0 auto; columns: 3 300px; column-gap: clamp(16px, 2vw, 26px); }
.book__item { break-inside: avoid; margin: 0 0 clamp(18px, 2.4vw, 30px); display: grid; gap: 10px; }
.book__item[hidden] { display: none; }
.book__open { display: block; width: 100%; padding: 8px; border: 0; background: #FBF7EE; cursor: zoom-in; box-shadow: 0 18px 36px -24px rgba(31, 58, 45, .45);
  outline: 1px solid rgba(184, 145, 74, .45); outline-offset: -4px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.book__open img { width: 100%; height: auto; display: block; }
.book__open:hover, .book__open:focus-visible { transform: translateY(-3px); box-shadow: 0 26px 44px -26px rgba(31, 58, 45, .55); }
.book__item figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0 4px; }
.shot__kind { font: 400 .66rem/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.shot__note { font-size: .92rem; color: var(--muted); }
@media (max-width: 700px) {
  .book { columns: 2; column-gap: 12px; }
  .book__item { margin-bottom: 18px; gap: 6px; }
  .book__open { padding: 5px; outline-offset: -3px; }
  .shot__note { font-size: .82rem; }
  .filters button { min-height: 36px; padding: 0 12px; letter-spacing: .18em; }
}

/* The larger view */
.lb { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(21, 40, 31, .94); color: var(--cream); }
.lb[open] { display: grid; grid-template-rows: 1fr auto; place-items: center; }
.lb::backdrop { background: rgba(21, 40, 31, .94); }
.lb__fig { margin: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(56px, 7vh, 80px) clamp(16px, 8vw, 110px) 0; }
.lb__fig img { max-width: 100%; max-height: calc(100svh - 160px); width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
.lb__cap { padding: 16px 16px 24px; text-align: center; display: grid; gap: 4px; }
.lb__cap .shot__kind { color: var(--gold); }
.lb__cap .shot__note { color: rgba(245, 239, 226, .8); }
.lb__btn { position: fixed; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(201, 168, 102, .5); border-radius: 50%; background: rgba(21, 40, 31, .6);
  color: var(--cream); font: 300 1.6rem/1 var(--sans); cursor: pointer; }
.lb__btn:hover { background: var(--gold); color: var(--forest-deep); border-color: var(--gold); }
.lb__close { top: 16px; right: 16px; }
.lb__prev { left: clamp(10px, 3vw, 36px); top: 50%; translate: 0 -50%; }
.lb__next { right: clamp(10px, 3vw, 36px); top: 50%; translate: 0 -50%; }
.lb__count { position: fixed; top: 28px; left: 50%; translate: -50% 0; font: 400 .7rem/1 var(--sans); letter-spacing: .3em; color: rgba(245, 239, 226, .7); }
@media (max-width: 700px) { .lb__prev, .lb__next { top: auto; bottom: 18px; translate: none; } .lb__cap { padding-bottom: 80px; } }

/* Content Creation: "Let's make something" sits beside the last step, Ready to post */
.steps-cta { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(250px, 1.25fr); gap: clamp(24px, 3vw, 44px); align-items: center; }
.steps-cta .steps { max-width: none; margin: 0; }
.steps-cta__card { position: relative; padding: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 30px); background: #F8F2E6; box-shadow: 0 18px 40px -28px rgba(31, 58, 45, .45); gap: 16px; }
.steps-cta__card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(184, 145, 74, .5); pointer-events: none; }
.steps-cta__card .ttl__script { font-size: clamp(2.6rem, 3.4vw, 3.4rem); }
.steps-cta__card .ttl__caps { font-size: clamp(1rem, 1.5vw, 1.35rem); }
.steps-cta__card .cta__line { font-size: .98rem; max-width: 28ch; }
.steps-cta__card .btn { padding: 0 20px; letter-spacing: .24em; }
@media (max-width: 1100px) { .steps-cta { grid-template-columns: 1fr; } .steps-cta__card { max-width: 520px; width: 100%; justify-self: center; } }
/* Portfolio filters on one line: centred on computers; on phones the line scrolls sideways */
.filters { flex-wrap: nowrap; max-width: 100%; width: max-content; overflow-x: auto; scrollbar-width: none; gap: 8px; padding: 2px; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; padding: 0 14px; letter-spacing: .2em; }
@media (max-width: 1100px) { .filters { width: auto; justify-content: flex-start; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 2px var(--gutter); } }

/* Opening, softer (2026-10-12): the garlands wait, unseen, until their pictures are ready (new.js adds .opening-go), then
   fade in slowly while drifting the last few pixels toward each other; the words fade in with them */
@media (prefers-reduced-motion: no-preference) {
  html.zoom-in .opening__half::after, html.zoom-in .opening__load { animation: none; opacity: 0; }
  html.zoom-in .opening__half--top::after { transform: translateY(-14px); }
  html.zoom-in .opening__half--bottom::after { transform: translateY(14px); }
  html.zoom-in.opening-go .opening__half::after { opacity: 1; transform: none;
    transition: opacity 1.4s cubic-bezier(.25, .1, .25, 1), transform 1.8s cubic-bezier(.2, .7, .2, 1); }
  html.zoom-in.opening-go .opening__load { opacity: 1; transition: opacity .9s ease 1.4s; }  /* once the garlands are fully in */
}

/* No blank moment between the opening page and Welcome: after ENTER NYAM the garlands fade in on the opening page itself
   (new.js adds .garlands-in, then .garlands-show), exactly where they sit on Welcome, which then starts with them showing */
html.garlands-in .opening { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html.garlands-in .opening__half--top { transform: translateY(-34px); }
  html.garlands-in .opening__half--bottom { transform: translateY(34px); }
  html.garlands-in .opening__half::after { opacity: 0; }
  html.garlands-in .opening__half--top::after { transform: translateY(-14px); }
  html.garlands-in .opening__half--bottom::after { transform: translateY(14px); }
  html.garlands-show .opening__half::after { opacity: 1; transform: none; transition: opacity 1.1s cubic-bezier(.25, .1, .25, 1) .1s, transform 1.3s cubic-bezier(.2, .7, .2, 1) .1s; }
  html.zoom-in.garlands-ready .opening__half::after { opacity: 1; transform: none; transition: none; }
  html.zoom-in.garlands-ready.opening-go .opening__load { transition-delay: .2s; }
}
/* With the garlands opening, the words show once, between the garlands on Welcome (not on the splash as well) */
html.garlands-in .loading { display: none; }

/* ---------- One note (blog post): the Version One look ---------- */
.post-loading { min-height: 50vh; display: grid; place-items: center; align-content: center; gap: 14px; padding: 60px var(--gutter); text-align: center; color: var(--muted); }
.post-loading h1 { font: 500 clamp(1.8rem, 4vw, 2.6rem)/1.2 var(--serif); color: var(--forest); }
.np { padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(56px, 8vw, 110px); }
.np__head { max-width: 820px; margin: 0 auto; display: grid; justify-items: center; gap: 18px; text-align: center; }
.np__kicker { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font: 400 .72rem/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-ink); }
.np__kicker a { color: inherit; text-decoration: none; }
.np__kicker a:hover { color: var(--forest); }
.np__title { font: 500 clamp(2.2rem, 5.4vw, 4rem)/1.1 var(--serif); color: var(--forest); text-wrap: balance; }
.np__rule { display: block; width: 72px; height: 1px; background: var(--gold); }
.np__meta { font: 400 .78rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.np__cover { max-width: 900px; margin: clamp(36px, 5vw, 60px) auto 0; padding: 10px; background: #FBF7EE; box-shadow: 0 24px 50px -30px rgba(31, 58, 45, .5);
  outline: 1px solid rgba(184, 145, 74, .45); outline-offset: -5px; }
.np__cover img { width: 100%; height: auto; max-height: 78vh; object-fit: cover; }
.np__body { max-width: 680px; margin: clamp(40px, 5vw, 64px) auto 0; font-size: 1.12rem; line-height: 1.85; color: #34453A; }
.np__body > * + * { margin-top: 1.15em; }
.np__body p { text-wrap: pretty; }
.np__body > p:first-child::first-letter { float: left; font: 500 4.2em/.8 var(--serif); color: var(--gold-ink); padding: .08em .1em 0 0; }
.np__body h2 { margin-top: 1.9em; font: 400 clamp(1.44rem, 2.4vw, 1.86rem)/1 var(--headline); color: var(--forest); }
.np__body h3 { margin-top: 1.6em; font: 500 1.3rem/1.3 var(--serif); color: var(--forest); }
.np__body a { color: var(--forest); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.np__body ul, .np__body ol { padding-left: 0; list-style: none; display: grid; gap: .5em; }
.np__body ul li { position: relative; padding-left: 24px; }
.np__body ul li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 7px; height: 7px; rotate: 45deg; background: var(--gold); }
.np__body ol { counter-reset: n; }
.np__body ol li { counter-increment: n; position: relative; padding-left: 32px; }
.np__body ol li::before { content: counter(n); position: absolute; left: 0; font: 500 1rem/1.85 var(--serif); color: var(--gold-ink); }
.np__body blockquote { margin: 1.8em 0; padding: 26px 28px; border-top: 1px solid rgba(184, 145, 74, .6); border-bottom: 1px solid rgba(184, 145, 74, .6); text-align: center;
  font: 400 clamp(1.14rem, 1.92vw, 1.5rem)/1.15 var(--headline); color: var(--gold-ink); }
.np__body blockquote p { margin: 0; }
.np__body figure { margin: 1.8em 0; }
.np__body figure img { width: 100%; height: auto; padding: 8px; background: #FBF7EE; box-shadow: 0 18px 36px -24px rgba(31, 58, 45, .45); }
.np__body figcaption { margin-top: 8px; font-size: .9rem; color: var(--muted); text-align: center; }
.np__foot { max-width: 680px; margin: clamp(40px, 5vw, 60px) auto 0; padding-top: 28px; border-top: 1px solid rgba(31, 58, 45, .14); text-align: center; }
@media (max-width: 700px) {
  .np__body { font-size: 1.04rem; line-height: 1.8; }
  .np__cover { padding: 6px; outline-offset: -3px; }
  .np__body blockquote { padding: 20px 8px; }
}
.np__body li { text-wrap: balance; }
.np__body h2 { margin-top: 1.5em; }

/* Portfolio: the "view" cursor, a fine gold ring with view in Bodoni italic that trails the mouse over the photos (mouse only) */
.book-cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; }
.book-cursor__ring { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(230, 211, 168, .9); background: radial-gradient(circle, rgba(21, 40, 31, .22), rgba(21, 40, 31, .06) 70%);
  -webkit-backdrop-filter: blur(2px) saturate(120%); backdrop-filter: blur(2px) saturate(120%); box-shadow: inset 0 0 0 6px rgba(230, 211, 168, .1);
  opacity: 0; transform: scale(.4); transition: opacity .35s var(--ease), transform .5s cubic-bezier(.2, .8, .2, 1); }
.book-cursor__ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(230, 211, 168, .3); }
.book-cursor__word { font: italic 400 1.15rem/1 var(--serif); letter-spacing: .06em; color: #FFF8E8; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.book-cursor.is-on .book-cursor__ring { opacity: 1; transform: scale(1); }
@media (hover: hover) and (pointer: fine) { .book__open { cursor: none; } }

/* ---------- Contact & booking (2026-10-13): the Version One look ---------- */
.phero__mail a { font: 400 .8rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--forest); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--gold); }
.phero__mail a:hover { color: var(--gold-ink); }
.cform__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cform__info { display: grid; gap: 22px; }
.cform__title { font: 400 clamp(1.44rem, 2.04vw, 1.8rem)/1 var(--headline); color: var(--forest); }
.cform__facts { margin: 6px 0 0; display: grid; gap: 0; border-top: 1px solid rgba(31, 58, 45, .14); }
.cform__facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(31, 58, 45, .14); }
.cform__facts dt { font: 400 .68rem/1.6 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.cform__facts dd { margin: 0; text-align: right; color: var(--forest); }
.cform__facts a { color: var(--forest); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.cform__facts .tbc { color: var(--muted); font-style: italic; }
.cform__card { position: relative; padding: clamp(28px, 4vw, 52px); background: #FBF7EE; box-shadow: 0 24px 50px -30px rgba(31, 58, 45, .45); }
.cform__card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(184, 145, 74, .5); pointer-events: none; }
.cform__head { font: 400 clamp(1.44rem, 2.16vw, 1.92rem)/1 var(--headline); color: var(--forest); margin-bottom: 22px; }
.cform .form { position: relative; display: grid; gap: 18px; }
.cform .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform .field { display: grid; gap: 8px; }
.cform label { font: 400 .68rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--forest); }
.cform .opt { letter-spacing: .06em; text-transform: none; color: var(--muted); }
.cform input, .cform select, .cform textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(31, 58, 45, .22); border-radius: 0; background: #FFFDF8;
  font: 300 1rem/1.5 var(--sans); color: var(--forest); transition: border-color .25s ease, box-shadow .25s ease; -webkit-appearance: none; appearance: none; }
.cform select { background-image: linear-gradient(45deg, transparent 50%, #9A7634 50%), linear-gradient(135deg, #9A7634 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.cform textarea { min-height: 150px; resize: vertical; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 168, 102, .2); }
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform .form__error { padding: 12px 14px; background: #F8E7E3; color: #A23B2A; font-size: .95rem; }
.cform .btn { justify-self: start; margin-top: 6px; }
.cform .btn[disabled] { opacity: .6; }
.form-done { position: relative; display: grid; justify-items: center; gap: 12px; padding: clamp(30px, 5vw, 60px) 10px; text-align: center; outline: none; }
.form-done .sign__xoxo { font-size: clamp(3rem, 6vw, 4.4rem); margin: 0; }
.form-done h2 { font: 200 clamp(1.2rem, 2vw, 1.6rem)/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--forest); }
.form-done p { color: var(--muted); }
.form-done[hidden] { display: none; }  /* stays hidden until the request has actually sent */
@media (max-width: 900px) {
  .cform__grid { grid-template-columns: 1fr; }
  .cform__info { position: static; max-width: 560px; }
}
@media (max-width: 600px) {
  .cform .field-row { grid-template-columns: 1fr; }
  .cform__card { padding: 30px 20px; }
  .cform .btn { justify-self: stretch; justify-content: center; }
}
.cform .form[hidden] { display: none; }

/* ---------- The cursor (mouse only, Version One pages): a small gold dot exactly at the pointer, a fine champagne ring
   that floats a beat behind it and blooms over anything clickable, and now and then a tiny gold sparkle left in its
   wake. new.js adds .nyam-cursor; reduced motion and touch screens keep the normal cursor. ---------- */
html.nyam-cursor, html.nyam-cursor body, html.nyam-cursor a, html.nyam-cursor button, html.nyam-cursor summary, html.nyam-cursor label,
html.nyam-cursor select, html.nyam-cursor [role="button"], html.nyam-cursor .piece { cursor: none; }
html.nyam-cursor input, html.nyam-cursor textarea { cursor: text; }
.nc-dot, .nc-ring { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; will-change: transform; }
.nc-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF4D2, #C9A866 60%, #9A7634);
  box-shadow: 0 0 6px rgba(233, 210, 154, .9); transition: opacity .25s ease, scale .25s ease; }
.nc-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid rgba(201, 168, 102, .55);
  transition: width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1), margin .35s cubic-bezier(.2, .8, .2, 1),
    background-color .35s ease, border-color .35s ease, opacity .3s ease; }
html.nc-hot .nc-ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: rgba(201, 168, 102, .8); background: radial-gradient(circle, rgba(233, 210, 154, .22), rgba(233, 210, 154, 0) 70%); }
html.nc-hot .nc-dot { scale: 1.5; }
html.nc-down .nc-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
html.nc-text .nc-ring, html.nc-text .nc-dot, html.nc-hide .nc-ring, html.nc-hide .nc-dot { opacity: 0; }
html.nc-away .nc-ring, html.nc-away .nc-dot { opacity: 0; }
.nc-spark { position: fixed; left: 0; top: 0; z-index: 2147482999; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; pointer-events: none;
  background: radial-gradient(circle, #FFF8E2 0 18%, transparent 20%), conic-gradient(from 45deg, transparent 0 20%, #E9D29A 24% 26%, transparent 30% 45%, #E9D29A 49% 51%, transparent 55% 70%, #E9D29A 74% 76%, transparent 80%);
  -webkit-mask: radial-gradient(circle, #000 0 45%, transparent 70%); mask: radial-gradient(circle, #000 0 45%, transparent 70%);
  animation: nc-twinkle .9s ease-out forwards; }
@keyframes nc-twinkle { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3) rotate(0deg); } 25% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 14px)) scale(1) rotate(90deg); } }
/* the photo viewer sits above everything: there the normal cursor comes back */
html.nyam-cursor .lb, html.nyam-cursor .lb * { cursor: auto; }
html.nyam-cursor .lb button { cursor: pointer; }
/* the dot sits in the middle of the ring and travels with it */
.nc-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
/* over links and buttons the circle only grows (no glow); the dot stays the same */
html.nc-hot .nc-ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: rgba(201, 168, 102, .55); background: none; }
html.nc-down .nc-ring { background: none; }
html.nc-hot .nc-dot { scale: 1; }