/* ============================================================
   Elizabeth Atelier — landing page
   Core palette (brand-exact):
   Deep Fir #293333 · Mist #D7D4CE · Gold #90805F · Pale Blue #BDC4C2
   NOTE: the brand book's authoritative Gold is #908062 (RGB 144/128/98,
   confirmed 2026-07-31). The site uses #90805F by Liz's decision; the
   two differ by 3/255 in blue only and are visually identical.
   Headline: La Luxes Serif. Sub/body: Jost, self-hosted.
   TYPEFACE DECISION, 10 Aug 2026. The brand book specifies Aglet for
   sub-heads and body. Aglet is licensed; it turned out to be included in
   Liz's Creative Cloud Pro plan at no extra cost, and was trialled on the
   website. She chose Jost instead: free under the SIL Open Font Licence,
   owned outright rather than rented from a subscription that could lapse,
   and self-hostable so every visitor is served the identical file.
   Jost replaces Aglet ONLY. La Luxes Serif remains the headline face.
   Open, deliberately deferred: whether the brand book should be amended to
   name Jost in place of Aglet. Liz's words: "revisit at some point... but
   not now."
   ============================================================ */

@font-face {
  font-family: "La Luxes Serif";
  src: url("assets/LaLuxesSerif.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* Jost, self-hosted. It replaces Avenir Next as the body/label face and is the
   settled answer to the Aglet question: Aglet is the brand book's face but is
   licensed, and Liz chose Jost, which is free under the SIL Open Font Licence
   and owned outright rather than rented from a subscription.
   La Luxes Serif above is UNTOUCHED and remains the headline face.

   Self-hosted rather than fetched from Google: every visitor gets the identical
   file from our own server, with no third-party request. Avenir Next was never
   downloaded at all, so visitors without a Mac were silently served Futura or
   Century Gothic - this page really did look different from person to person.

   Only 400, 500 and 600 are shipped, because only those three are used.
   latin-ext covers accented characters in customers' names. */
@font-face { font-family:"Jost"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/jost-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Jost"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/fonts/jost-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Jost"; font-style:normal; font-weight:600; font-display:swap;
  src:url("assets/fonts/jost-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Jost"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/jost-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Jost"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/fonts/jost-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Jost"; font-style:normal; font-weight:600; font-display:swap;
  src:url("assets/fonts/jost-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* space above and below the hairline that divides sign-up from footer */
  --rule-gap: clamp(2.6rem, 5.5vh, 4rem);
  /* the footer is a lighter tone of whatever the page ground is: the step in
     colour is what separates it from the sign-up section, so no rule is drawn */
  --footer-ground: #9C8C6A;
  /* footer wordmark, 20% down from its previous size */
  --wm-w: clamp(184px, 25.6vw, 304px);
  /* half the height it just gave up (artwork is 874x281, so h = 0.3215w),
     added to the gap above and below so the block's total height is unchanged */
  --wm-gain: calc(var(--wm-w) * 0.0402);
  --deep-fir: #293333;
  --mist: #D7D4CE;
  --gold: #90805F;
  --pale-blue: #BDC4C2;
  --quartz: #D9B5B0;
  --quartz-deep: #C08C84;   /* Quartz weighted for dark grounds */
  --teal: #1F4E4A;
  --sapphire: #1E3A5F;
  --mist-soft: #E3E1DC;   /* airy lift of Mist for large grounds */
  /* gem gradients from the app/website — a glossy shine over a jewel tone */
  --gemsapph: radial-gradient(circle 20px at 28% 30%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 72%), radial-gradient(60% 72% at 50% 40%, #96a8be 0%, #3a5a82 30%, #203c62 62%, #182e4e 82%, #10223a 100%);
  --gemgold: radial-gradient(circle 20px at 28% 30%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.2) 45%, rgba(255,255,255,0) 72%), radial-gradient(60% 72% at 50% 40%, #e8ddba 0%, #c6b482 30%, #968460 62%, #706348 82%, #564b36 100%);
  --serif: "La Luxes Serif", "Times New Roman", serif;
  --sans: "Jost", "Avenir Next", "Century Gothic", sans-serif;
  /* soft photographic grain, used at low opacity for the textural tiles */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.55'/></svg>");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  /* Sits beneath the fixed gradient layer. The gradient only covers the
     viewport, so on a phone THIS is the colour that shows in the rubber-band
     area when you drag past the top or bottom of the page. It must follow the
     ground, or the old gold shows through as a band. */
  background: var(--gold);
  color: var(--deep-fir);
  font-family: var(--sans);
  /* was 300: elegant on a large screen, thin and straining on a phone */
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The gold ground is a fixed, window-sized layer rather than a background
   image. Content scrolls over it, so a section passes from the lighter top
   of the gradient into the deeper foot as it travels down the screen: the
   gold darkens as you approach the footer and lifts again as you scroll away.
   `background-attachment: fixed` produced this on desktop but iOS ignores it,
   which is why the effect never appeared on the phone. A fixed element works
   on every device. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 90% at 15% 8%, rgba(255, 245, 220, 0.20) 0%, rgba(255, 245, 220, 0) 55%),
    linear-gradient(160deg, #a89772 0%, var(--gold) 45%, #7b6c52 100%);
  pointer-events: none;
  z-index: 0;
}

/* fine grain across the gold ground for the textural feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* keep everything above the grain layer */
.hero, .whisper, .wall, .notify, .footer { position: relative; z-index: 1; }

/* ---------- sound toggle ---------- */

/* sound button matching the app's song player: pill + gold gem disc */
#sound-toggle {
  position: fixed;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  /* sapphire gem pill, identical to the page's other buttons (Be first to know) */
  background: var(--gemsapph);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.4rem 0.5rem 0.5rem;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: filter 0.35s ease;
}

#sound-toggle:hover { filter: brightness(0.9); }

#sound-toggle .disc {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gemgold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#sound-toggle .label .t {
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#sound-toggle .ic-pause { display: none; }
#sound-toggle[data-state="on"] .ic-play { display: none; }
#sound-toggle[data-state="on"] .ic-pause { display: block; }















.hero-cta.is-hidden { display: none; }


/* review-only coming-soon message cycle (stacked above the layout pill) */
#message-toggle {
  position: fixed;
  left: clamp(1rem, 3vw, 2.2rem);
  bottom: calc(clamp(1rem, 3vw, 2.2rem) + 12rem);
  z-index: 40;
  background: rgba(41, 51, 51, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(215, 212, 206, 0.55);
  color: var(--mist);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.4s ease, border-color 0.4s ease;
}

#message-toggle:hover { border-color: var(--mist); }

/* ---------- seamless mode: tiles flush, edge to edge, like envy-beauty ---------- */

body.seamless .hero {
  max-width: none;
  margin: 0;
  border-radius: 0;
}

body.seamless .wall { max-width: none; padding: 0; overflow: hidden; }

/* Tiles sit exactly on their grid lines. An earlier version grew each tile by
   half a pixel to mask hairline seams, but tiles paint in source order, so the
   visible boundary landed a pixel apart above and below a junction. Exact
   edges matter more: the columns must run straight down the page. */
body.seamless.layout-bento .wall,
body.seamless.layout-editorial .wall,
body.seamless.layout-centerpiece .wall { gap: 0; }
body.seamless.layout-masonry .wall { column-gap: 0; }
body.seamless.layout-masonry .wall .tile { margin-bottom: 0; }

body.seamless .tile { border-radius: 0; }

body.seamless .tile-aumana { border: none; }

body.seamless .whisper {
  padding: clamp(2.5rem, 7vh, 4rem) 2rem;
}

/* in seamless mode the ribbons keep only their hairlines as the divider */
body.seamless .tile-ribbon {
  border-top: 1px solid rgba(215, 212, 206, 0.4);
  border-bottom: 1px solid rgba(215, 212, 206, 0.4);
}

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.big-serif {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.mid-serif {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.28;
}

.body-copy {
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 34ch;
  margin-top: 1rem;
}

/* two-tone emphasis: the key phrase in Teal, same serif */
.hero-promise em,
.tile-truetoyou .big-serif em {
  font-style: normal;
  color: var(--teal);
}

/* the accent (pop) tile's colour — the review pill cycles this */
body.accent-sapphire { --accent: var(--sapphire); }
body.accent-quartz   { --accent: var(--quartz); }
body.accent-teal     { --accent: var(--teal); }

/* ---------- reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- hero ---------- */

.hero {
  /* taller, so the portrait film shows far more of itself and the verse
     side gains room to breathe */
  min-height: clamp(620px, 96vh, 940px);
  max-width: 1240px;
  margin: clamp(1.2rem, 3vh, 2rem) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  background: transparent;   /* the gold ground shows through */
  overflow: hidden;
  border-radius: 2px;
}

.hero-text {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2rem, 4vw, 3.5rem);
}


/* --- real sheer curtain behind the hero: the veil hangs over the upper
   panel with the logo on it, then fades to reveal the gold ground below --- */
.hero-text::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: var(--fabric);
  background-size: cover;
  background-position: center top;
  /* fully opaque: the Egret that once ghosted behind it now lives on the
     True to You tile, so nothing needs to show through */
  opacity: 1;
  /* the veil hangs the full height with a clean edge, matching the film
     beside it. No fade: a short fade left a cloudy half-transparent band
     of fabric sitting over the gold. */
}

.hero-text > * { position: relative; z-index: 2; }

body.hero-fabA { --fabric: url("assets/sheer-a.jpg"); }
body.hero-fabB { --fabric: url("assets/sheer-b.jpg"); }

.hero-lockup {
  width: clamp(160px, 17vw, 230px);
  height: auto;
  /* pulled up so the extra air can sit below, between verse and tagline */
  margin-bottom: 0.6rem;
  /* rendered clean and crisp on the fabric — no shadow, no softening */
}

/* verse and its attribution share a block sized to the verse itself */
.hero-verse {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1.7rem;
}

/* set like the attribution under a quotation: a dash, then the line,
   right-aligned beneath the verse, in the same brand serif */
.hero-tagline {
  font-family: var(--serif);
  /* exactly 0.9x the verse at every screen size, so it can never outgrow it.
     The verse is clamp(1.25rem, 2vw, 1.7rem); this mirrors it at 90%. */
  font-size: clamp(1.125rem, 1.8vw, 1.53rem);
  letter-spacing: 0.06em;
  color: var(--deep-fir);
  text-align: right;
  margin-top: 2.4rem;
  /* same treatment as the verse above it, so both hold up on a phone */
  -webkit-text-stroke: 0.35px currentColor;
}

.hero-tagline em {
  font-style: normal;
  color: var(--tagline-colour, var(--teal));
}

/* hero eyebrow carries the accent colour (visible, changes with the toggle) */
.hero .eyebrow { color: var(--accent); }

.hero-promise {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.25;
  max-width: 20ch;
  margin-bottom: 0.9rem;
}

/* La Luxes is a very fine serif; on the pale fabric it needs a little more
   body to stop the verse straining the eye on a phone */
.hero-promise {
  -webkit-text-stroke: 0.35px currentColor;
}

/* haiku sits with more air between its three lines */
.hero-promise.is-haiku {
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  line-height: 1.55;
  max-width: none;
}

/* tanka has five lines, so it sits a touch smaller and tighter */
.hero-promise.is-tanka {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.5;
}

body.tagline-teal     { --tagline-colour: var(--teal); }      /* as the pop-up */
body.tagline-sapphire { --tagline-colour: var(--sapphire); }
body.tagline-gold     { --tagline-colour: #6D6046; }          /* dark gold */

.hero-sub.is-hidden,
.hero .eyebrow.is-hidden { display: none; }

/* quiet follow-through beneath the promise */
.hero-sub {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--teal);
  letter-spacing: 0.02em;
  margin-bottom: 1.7rem;
}

.hero-soon {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 1.7rem;
}

/* sapphire gem pill to the quiz, beneath the verse and tagline */
.hero-quiz {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--gemsapph);
  color: var(--mist);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  padding: 0.95rem 1.9rem;
  margin-bottom: 1.2rem;
  transition: filter 0.35s ease;
}

.hero-quiz:hover { filter: brightness(0.9); }

/* gem pill button, matching the app/website across all media */
.hero-cta {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--gemsapph);
  color: var(--mist);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  padding: 0.95rem 1.9rem;
  transition: filter 0.35s ease;
}

.hero-cta:hover { filter: brightness(0.9); }

.hero-media {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
}

.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* translucent veil drawn across the film, per the style board */
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(215, 212, 206, 0.55) 0%,
    rgba(215, 212, 206, 0.12) 34%,
    rgba(215, 212, 206, 0) 60%);
  pointer-events: none;
}

/* ---------- whisper ---------- */

.whisper {
  padding: clamp(3rem, 8vh, 5rem) 2rem;
  text-align: center;
}

/* was gold on the gold ground, so effectively invisible: now the same dark
   gold used for the footer lock-up, and larger rather than heavier */
.whisper-eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #6D6046;
  margin-bottom: 1rem;
}

.whisper-eyebrow.is-hidden { display: none; }

.whisper p:not(.whisper-eyebrow) {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--teal);
  letter-spacing: 0.06em;
}

/* ---------- gallery wall ---------- */

.wall {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.5rem) clamp(4rem, 8vh, 6rem);
}

/* ===== shared grid for the explicit-placement layouts ===== */
body.layout-bento .wall,
body.layout-editorial .wall,
body.layout-centerpiece .wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(165px, auto);
  gap: clamp(1rem, 2.2vw, 1.8rem);
}

/* ===== Layout: CENTERPIECE — tall gem spine dead centre, flush top & bottom ===== */
@media (min-width: 901px) {
  body.layout-centerpiece .wall .tile { min-height: 0; }
  body.layout-centerpiece .tile-accent    { grid-column: 3 / 5; grid-row: 1 / 8; } /* tall CENTRE spine */
  body.layout-centerpiece .tile-work      { grid-column: 1 / 3; grid-row: 1 / 3; }
  body.layout-centerpiece .tile-aumana-text   { grid-column: 1 / 3; grid-row: 3 / 5; }
  body.layout-centerpiece .tile-veil      { grid-column: 1 / 3; grid-row: 5 / 6; }
  body.layout-centerpiece .tile-letter    { grid-column: 1 / 3; grid-row: 6 / 8; }
  body.layout-centerpiece .tile-aumana-phone  { grid-column: 5 / 7; grid-row: 1 / 3; }
  body.layout-centerpiece .tile-truetoyou { grid-column: 5 / 7; grid-row: 3 / 4; }
  body.layout-centerpiece .tile-makers  { grid-column: 5 / 7; grid-row: 4 / 6; }
  body.layout-centerpiece .tile-quiz      { grid-column: 5 / 7; grid-row: 6 / 8; }
}

/* ===== Layout 1: BENTO — square turtle, centered TALL gem, spread talls ===== */
@media (min-width: 901px) {
  body.layout-bento .wall .tile { min-height: 0; }
  body.layout-bento .tile-work      { grid-column: 1 / 3; grid-row: 1 / 3; } /* square */
  body.layout-bento .tile-accent    { grid-column: 3 / 5; grid-row: 1 / 4; } /* centered TALL gem */
  body.layout-bento .tile-aumana-phone  { grid-column: 5 / 7; grid-row: 1 / 4; } /* tall right */
  body.layout-bento .tile-veil      { grid-column: 1 / 3; grid-row: 3 / 4; } /* thin */
  body.layout-bento .tile-aumana-text   { grid-column: 1 / 3; grid-row: 4 / 6; }
  body.layout-bento .tile-letter    { grid-column: 3 / 7; grid-row: 4 / 6; } /* wide feature */
  body.layout-bento .tile-truetoyou { grid-column: 1 / 3; grid-row: 6 / 9; } /* tall left */
  body.layout-bento .tile-makers    { grid-column: 3 / 7; grid-row: 6 / 8; } /* wide, roomy */
  body.layout-bento .tile-quiz      { grid-column: 3 / 7; grid-row: 8 / 9; } /* thin double-wide */
}

/* ===== Layout 3: EDITORIAL — alternating big blocks left/right ===== */
@media (min-width: 901px) {
  body.layout-editorial .wall .tile { min-height: 0; }
  body.layout-editorial .tile-work      { grid-column: 1 / 4; grid-row: 1 / 3; } /* big left */
  body.layout-editorial .tile-accent    { grid-column: 4 / 7; grid-row: 1 / 2; } /* thin wide */
  body.layout-editorial .tile-aumana-text   { grid-column: 4 / 7; grid-row: 2 / 3; }
  body.layout-editorial .tile-letter    { grid-column: 1 / 4; grid-row: 3 / 5; } /* big left */
  body.layout-editorial .tile-truetoyou { grid-column: 4 / 7; grid-row: 3 / 5; } /* big right */
  body.layout-editorial .tile-aumana-phone  { grid-column: 1 / 3; grid-row: 5 / 7; } /* tall left */
  body.layout-editorial .tile-quiz      { grid-column: 3 / 5; grid-row: 5 / 7; }
  body.layout-editorial .tile-veil      { grid-column: 5 / 7; grid-row: 5 / 6; } /* thin */
  body.layout-editorial .tile-makers  { grid-column: 5 / 7; grid-row: 6 / 7; } /* thin */
}

/* ===== Layout 2: MASONRY — equal columns, staggered heights ===== */
body.layout-masonry .wall {
  column-count: 3;
  column-gap: clamp(1rem, 2.2vw, 1.8rem);
}

body.layout-masonry .wall .tile {
  width: 100%;
  margin-bottom: clamp(1rem, 2.2vw, 1.8rem);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

body.layout-masonry .wall .tile-work      { min-height: 580px; }
body.layout-masonry .wall .tile-truetoyou { min-height: 420px; }
body.layout-masonry .wall .tile-accent    { min-height: 300px; }
body.layout-masonry .wall .tile-aumana-phone  { min-height: 440px; }
body.layout-masonry .wall .tile-aumana-text   { min-height: 360px; }
body.layout-masonry .wall .tile-veil      { min-height: 380px; }
body.layout-masonry .wall .tile-quiz      { min-height: 480px; }
body.layout-masonry .wall .tile-makers  { min-height: 340px; }
body.layout-masonry .wall .tile-letter    { min-height: 520px; }

.tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.4rem);
  min-height: 460px;
  border-radius: 2px;
}

/* --- the work: clear, dark, product photograph --- */

.tile-work {
  grid-column: span 3;
  min-height: 620px;
  background: #101314;
  padding: 0;
  justify-content: flex-end;
}

.tile-work img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s ease;
}

.tile-work:hover img { transform: scale(1.035); }

/* style board: a sheer translucent panel drawn across part of the piece */
.tile-work::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 46%;
  background: linear-gradient(to right,
    rgba(227, 225, 220, 0.34) 0%,
    rgba(227, 225, 220, 0.18) 55%,
    rgba(227, 225, 220, 0) 100%);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to right, black 55%, transparent 100%);
  mask-image: linear-gradient(to right, black 55%, transparent 100%);
  pointer-events: none;
}

.tile-work .tile-caption { z-index: 2; }

.tile-work .tile-caption {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: linear-gradient(to top, rgba(16, 19, 20, 0.82), rgba(16, 19, 20, 0));
}

.tile-work .eyebrow { margin-bottom: 0.5rem; }

.tile-work .line {
  font-family: var(--serif);
  color: var(--mist);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.35;
}

/* --- True to You: clear typography on Deep Fir --- */

.tile-truetoyou {
  grid-column: span 3;
  min-height: 620px;
  /* Fabric B — echoes the hero veil across the top of the wall */
  background-image: url("assets/sheer-b.jpg");
  background-size: cover;
  background-position: center;
  align-items: center;
  text-align: center;
}

.tile-truetoyou { overflow: hidden; }

/* the Egret echo now lives here, in front of Fabric B, offset to one side */
/* The visible bird occupies only ~28% of this PNG's width (the rest is
   transparent padding), so these numbers are set from the bird, not the box:
   its back lands on the tile's centre line and its front reaches 75%, the
   midpoint between centre and the right margin. */
.tt-egret {
  position: absolute;
  z-index: 1;
  left: 18.3%;
  top: 50%;
  transform: translateY(-50%);
  width: 88%;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
}

/* a soft light bloom so the words sit clearly on the fabric */
.tile-truetoyou::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(58% 42% at 46% 50%,
    rgba(233, 231, 225, 0.62) 0%,
    rgba(233, 231, 225, 0) 100%);
  pointer-events: none;
}

.tile-truetoyou > *:not(.tt-egret) { position: relative; z-index: 2; }
.tile-truetoyou .eyebrow { color: var(--deep-fir); }
.tile-truetoyou .big-serif { color: var(--deep-fir); }

/* --- softer trace: translucent, layered veil on Pale Blue --- */

.tile-veil {
  grid-column: span 2;
  min-height: 400px;
  background: var(--pale-blue);
  /* words sit on the right, in the clear field the stones fade into */
  align-items: flex-end;
  text-align: right;
  overflow: hidden;
}

/* aquamarines rise from the bottom of the tile and dissolve upward into the
   Pale Blue, the line sitting at the threshold where they begin to fade */
.tile-veil::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background-image: url("assets/softer-trace.jpg");
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to top, #000 32%, rgba(0,0,0,0.5) 66%, transparent 100%);
  mask-image: linear-gradient(to top, #000 32%, rgba(0,0,0,0.5) 66%, transparent 100%);
  pointer-events: none;
}

/* keep the words above the stones, and give them enough body to hold their
   own against a busy photograph */
.tile-veil .eyebrow,
.tile-veil .mid-serif { position: relative; z-index: 2; }

.tile-veil .eyebrow { color: var(--deep-fir); }

.tile-veil .mid-serif {
  color: var(--deep-fir);
  -webkit-text-stroke: 0.4px currentColor;
}

.tile-veil .veil-layers {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(227, 225, 220, 0.85) 0%, rgba(227, 225, 220, 0) 55%),
    radial-gradient(120% 90% at 85% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(15deg, rgba(144, 128, 95, 0.10) 0%, rgba(144, 128, 95, 0) 45%);
}

.tile-veil .veil-layers::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
}

.tile-veil .eyebrow,
.tile-veil .mid-serif { position: relative; }

/* --- Aumana: the heirloom service --- */

/* Deep Fir, not the old gold gradient. The brand guideline forbids setting the
   name on a gold ground: gold on gold measures 1.00:1 at the gradient's
   midpoint, so the "Au" would vanish entirely. On Deep Fir the Au reads at
   3.37:1 and "mana" at 8.79:1. The faint radial lift keeps the tile from
   looking flat. */
.tile-aumana {
  grid-column: span 4;
  background:
    radial-gradient(130% 110% at 20% 90%, #35403F 0%, rgba(53, 64, 63, 0) 60%),
    var(--deep-fir);
  color: var(--mist);
}

.tile-aumana { color: var(--mist); }

/* The name, two-tone: Au in Gold, mana in Mist. One word, never split by a
   space and never given a second capital, so the split is done with a span
   rather than by breaking the word. */
.aumana-name { color: var(--mist); }
.aumana-name .au { color: var(--gold); }

/* The trademark, raised after the name. Deliberately sets NO font-family, so
   it inherits La Luxes from the name itself — the font carries its own U+2122
   glyph, so nothing is substituted from a fallback face. Sized as a fraction
   of the name (em), so it scales with it on every screen. */
.aumana-name .tm {
  font-size: 0.3em;
  /* NOT vertical-align: super — that raises by a fraction of the symbol's own
     size, which at 30% is almost nothing, so it sat mid-letter. This lifts it
     by 1.8x its own size, roughly 0.55em of the name, putting its top level
     with the cap height of the A. */
  vertical-align: baseline;
  position: relative;
  /* Measured from the font itself: the cap height of 'A' is 0.801em, and the
     tm glyph's own ink top is 0.799em of its own size. At 0.3em, raising it
     1.87em of its own size puts its top at 0.3 x (0.799 + 1.87) = 0.801em —
     exactly level with the top of the A, at every screen size. */
  top: -1.87em;
  margin-left: 0.1em;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

/* the meaning, set quietly beneath the name */
.aumana-line {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.58rem);
  line-height: 1.4;
  color: var(--mist);
  /* was 0.88 — full strength reads properly against Deep Fir at 8.79:1 */
  opacity: 1;
  /* NO text-stroke. A 0.4px stroke was tried to add weight and Liz rejected it:
     it thickens La Luxes' fine serifs and coarsens the letterforms. The size
     increase carries the legibility on its own. */
  margin-top: 0.4rem;
}

/* Spacing inside the Aumana tile only, so the other tiles keep their own
   rhythm. Each line gets room to be read on its own rather than the block
   reading as one dense paragraph. */
.tile-aumana .eyebrow   { margin-bottom: 2.1rem; }   /* was 1.1 */
/* the one gap being opened up; everything below moves down with it */
.tile-aumana .aumana-line { margin-top: 2.3rem; }    /* was 1, was 0.4 */
.tile-aumana .body-copy { margin-top: 2.6rem; }      /* was 1   */
/* "Arriving soon" is NOT set here: a later .tile-aumana .soon-note block
   overrides it, so its spacing lives there. */
.tile-aumana .tile-inner { position: relative; }
.tile-aumana .eyebrow { color: var(--mist); }
/* Accent statement tile — pops out of the mosaic (like Envy's hero line) */
/* sapphire GEM tile — convex, glossy, matching the pill buttons */
.tile-accent {
  grid-column: span 2;
  background:
    radial-gradient(70% 62% at 50% 42%, #3a5a82 0%, #274a76 38%, #1a3154 70%, #10223a 100%);
  color: var(--mist);
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  /* convex dome: edges darken inward */
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.4);
}

/* the gem's glossy highlight, top-left, like the buttons */
.tile-accent .accent-shine {
  position: absolute;
  inset: 0;
  background: radial-gradient(38% 42% at 30% 22%,
    rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.tile-accent .accent-line { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }

/* same weight as the Aumana name in its tile, in gold rather than Mist */
.accent-line {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 400;
  line-height: 1.42;
  color: #C6B482;
}

/* Aumana — phone mockup tile on Mist (the phone screenshot is brightened) */
.tile-aumana-phone {
  grid-column: span 2;
  background: var(--mist);
  align-items: center;
  justify-content: center;
  padding: clamp(1.6rem, 3vw, 2.6rem);
}

/* the phone tile's ground, under review — nothing else about the tile moves */
body.phone-paleblue .tile-aumana-phone { background: var(--pale-blue); }
body.phone-deepfir  .tile-aumana-phone { background: var(--deep-fir); }
body.phone-gold     .tile-aumana-phone { background: var(--gold); }

/* On Deep Fir the phone is dark-on-dark and sinks into the tile. Light is
   placed BEHIND it — a soft pool of Mist under the device and a faint halo
   around it — so the phone lifts off the ground rather than the tile being
   lightened, which would have lost the Deep Fir. */
body.phone-deepfir .tile-aumana-phone {
  background:
    radial-gradient(56% 44% at 50% 47%,
      rgba(215, 212, 206, 0.22) 0%,
      rgba(215, 212, 206, 0.07) 45%,
      rgba(215, 212, 206, 0) 74%),
    var(--deep-fir);
}

body.phone-deepfir .phone {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5),
              0 0 46px 10px rgba(215, 212, 206, 0.17),
              inset 0 0 0 1.5px rgba(215, 212, 206, 0.24);
}

/* the screen itself carries a little more light on the darker ground */
body.phone-deepfir .app-shot {
  /* same reasoning as above: no lift, or the gold "Au" blows out to white */
  filter: none;
}

/* No filter. The old screenshot was dim and needed a 55% lift; the Aumana
   screenshot is properly exposed, and that same lift pushed the gold strokes
   of the "Au" to R255 G255 B251 — white — collapsing the two-tone name into
   one tone. Shown exactly as captured. */
.app-shot { filter: none; }

.phone {
  width: min(210px, 74%);
  /* matches the Aumana screenshot exactly, so nothing crops off the bottom */
  aspect-ratio: 1290 / 2527;
  background: #0c100f;
  border-radius: 30px;
  padding: 7px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45),
              inset 0 0 0 1.5px rgba(215, 212, 206, 0.12);
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 23px;
  overflow: hidden;
  background: #141a1a;
}

.app-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Aumana — text tile */
.tile-aumana-text { grid-column: span 2; }

/* The extra weight here was for Mist on the OLD gold ground, a soft pairing
   that needed help. On Deep Fir, Mist reads at 8.79:1 and needs none, so this
   is back to the page's regular weight. Size is kept. */
.tile-aumana .body-copy {
  color: var(--mist);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.7;
  max-width: 30ch;
}
.tile-aumana .soon-note {
  /* sits well clear of the body copy, so it reads as a closing note */
  margin-top: 3.2rem;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}

/* --- quiz teaser: soft, diffused Mist --- */

.tile-quiz {
  grid-column: span 3;
  min-height: 520px;
  background: var(--deep-fir);
}

.tile-quiz .mid-serif { color: var(--pale-blue); }
.tile-quiz .body-copy { color: var(--mist); }

/* style board: crisp foreground, diffused washed-away background */
.tile-quiz .quiz-echo {
  position: absolute;
  right: -14%;
  top: 50%;
  transform: translateY(-50%) scale(1.05);
  width: 68%;
  filter: blur(16px);
  opacity: 0.30;
  pointer-events: none;
}

.tile-quiz .tile-inner { position: relative; }

.tile-quiz .quiet-cta {
  display: inline-block;
  margin-top: 1.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.35rem;
}

/* --- a living house of makers: clear on Deep Fir --- */

.tile-makers {
  grid-column: span 3;
  min-height: 420px;
  background: var(--mist);
}

.tile-makers .mid-serif { color: var(--deep-fir); }

/* the materials, from the song: bigger and light, never bold */
.makers-line {
  margin-top: 1.1rem;
  font-size: 1.18rem;
  line-height: 1.7;
  max-width: 46ch;
  color: var(--deep-fir);
}

/* --- thin ribbon tiles: long, low, a breath between the big pieces --- */

.tile-ribbon {
  grid-column: span 6;
  min-height: 0;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: transparent;
  border-top: 1px solid rgba(215, 212, 206, 0.5);
  border-bottom: 1px solid rgba(215, 212, 206, 0.5);
  align-items: center;
  text-align: center;
}

.ribbon-line {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  letter-spacing: 0.14em;
  color: var(--mist);
}

.tile-ribbon-soon .ribbon-line {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* --- founder's note: paper, textural --- */

.tile-letter {
  grid-column: span 6;
  /* real rain-on-glass photograph, warm gold dusk light */
  background-image: url("assets/aumana-water.jpg");
  background-size: cover;
  background-position: center;
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 4vw, 3.4rem);
}

/* gentle DARK veil so the vibrant rain photo stays rich while light text
   reads on top (heaviest in the centre, behind the letter) */
.tile-letter::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 64% at 50% 50%, rgba(16, 21, 21, 0.5) 0%, rgba(16, 21, 21, 0) 100%),
    linear-gradient(180deg, rgba(16, 21, 21, 0.3) 0%, rgba(16, 21, 21, 0.42) 100%);
  pointer-events: none;
}

.tile-letter .tile-inner {
  position: relative;
  max-width: 58ch;
  margin: 0 auto;
}

/* gold was near-invisible on the darkened rain photograph */
.tile-letter .eyebrow {
  color: var(--mist);
  font-size: 0.86rem;
}

/* the brand signature leads, in the display serif as the brand book intends.
   Sized to sit just above "Elizabeth" rather than tower over it, and small
   enough that each line holds together instead of breaking awkwardly. */
.letter-heading {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.2vw, 2.05rem);
  /* the two lines were sitting on top of one another on a phone */
  line-height: 1.75;
  color: var(--quartz);
  margin-bottom: 1.7rem;
  text-wrap: balance;
  -webkit-text-stroke: 0.75px currentColor;
  text-shadow: 0 1px 10px rgba(20, 24, 24, 0.7);
}

/* the letter itself is body copy, so it takes the body face, as elsewhere
   on the page. A little weight so Mist holds on the photograph. */
.letter-body {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  font-weight: 500;
  /* the heading gave back some room, so the letter can breathe. The extra
     line-height also leaves space for the taller highlighted phrases. */
  line-height: 2.1;
  letter-spacing: 0.015em;
  color: var(--mist);
  text-shadow: 0 1px 6px rgba(20, 24, 24, 0.5);
}

/* key phrases lift into the display serif, a little larger, in Quartz.
   La Luxes is a fine face, so the strokes are thickened and given a darker
   shadow: Quartz is a pale colour and was disappearing into the photograph. */
.letter-body em {
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.3em;
  font-weight: 400;
  color: var(--mist);
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0.6px currentColor;
  text-shadow: 0 1px 8px rgba(20, 24, 24, 0.75);
}

.letter-sig {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  color: var(--quartz);
  margin-top: 1.8rem;
  -webkit-text-stroke: 0.75px currentColor;
}

/* now the sign-off line, sitting quietly beneath her name */
.letter-eyebrow {
  margin-top: 0.6rem;
  margin-bottom: 0;
  color: var(--mist);
  font-size: 0.84rem;
  text-shadow: 0 1px 5px rgba(20, 24, 24, 0.5);
}

.letter-sig { text-shadow: 0 1px 6px rgba(20, 24, 24, 0.45); }

/* The honeypot field: real people never see or reach it (it is removed from
   layout, from the tab order, and from screen readers), but form-filling bots
   complete every field they find in the markup. The server discards any
   submission that arrives with this filled. Hidden by position rather than
   display:none, because cruder bots skip fields marked display:none. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- notify ---------- */

.notify {
  /* the ground runs on unbroken to the footer band */
  background: transparent;
  /* the same gap the footer band uses, top and bottom */
  padding: var(--rule-gap) 2rem var(--rule-gap);
  text-align: center;
}

/* The full lock-up: egret above the wordmark, as the mark is normally set.
   The artwork is cropped to its own edges (EA_LOGO_notify.png), because the
   original carries 19% empty space above and below the lock-up, which was
   padding both gaps out invisibly. This width is the old one scaled by the
   crop ratio, so the lock-up still renders at exactly the size it did. */
.notify-wordmark {
  width: clamp(87px, 9.89vw, 125px);
  height: auto;
  display: block;
  margin: 0 auto var(--rule-gap);
}

/* The Egret symbol alone stands here, no wordmark. Sized by HEIGHT rather
   than width, set to the height the egret occupied inside the full lock-up
   (66.9% of it), so the bird keeps exactly the proportion it had there.
   The artwork is the official symbol cropped to its own edges — the source
   file carries ~72% empty space horizontally, which no CSS margin can reach. */
.notify-egret {
  height: clamp(76px, 8.59vw, 109px);
  width: auto;
  display: block;
  margin: 0 auto var(--rule-gap);
}

.notify .eyebrow { color: var(--deep-fir); }
.notify .mid-serif { color: var(--mist); margin-bottom: 2.4rem; }

/* stacked contact form matching the app's .field style */
#notify-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

#notify-form .field {
  width: 100%;
  background: rgba(255, 255, 255, 0.14);
  /* gold at rest, never the near-black Deep Fir it used to be */
  border: 1px solid rgba(144, 128, 95, 0.6);
  color: var(--deep-fir);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.9rem 1.1rem;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.3s ease;
}

#notify-form .field::placeholder { color: rgba(41, 51, 51, 0.55); }
/* Focused: the same gold, at full strength and doubled in weight. The second
   line comes from a ring rather than a thicker border, because changing
   border-width would shove the field 1px and make the layout twitch. */
#notify-form .field:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

#notify-form button {
  margin-top: 0.4rem;
  /* the form is a flex column, which stretched the pill to the full width of
     the fields; this lets it size to its own words like every other pill */
  align-self: center;
  /* the same gold gem the Aumana app uses on its primary button,
     with the dark type that goes with it */
  background: var(--gemgold);
  border: none;
  color: var(--deep-fir);
  text-shadow: 0 1px 1px rgba(255, 251, 236, 0.45);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 1rem 2.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.35s ease;
}

#notify-form button:hover { filter: brightness(0.9); }

.form-note {
  margin-top: 1.4rem;
  font-size: 1.02rem;
  color: var(--deep-fir);
  min-height: 1.4rem;
}

/* a confirmed signup should read as an occasion, not a footnote */
.form-note.is-success {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--mist);
  margin-top: 1.8rem;
}

.form-note.is-error { color: #6b1f14; }

/* ---------- sign-up pop-up ---------- */

.popup {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(24, 30, 30, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: popup-fade 0.5s ease both;
}

.popup[hidden] { display: none; }

@keyframes popup-fade { from { opacity: 0; } to { opacity: 1; } }

.popup-panel {
  position: relative;
  width: min(430px, 100%);
  /* the sheer fabric at full strength, texture intact */
  background-image: url("assets/sheer-a.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* this padding is the darkened fabric border */
  padding: 14px;
  text-align: center;
  border-radius: 2px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
  animation: popup-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes popup-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* the border is the same fabric, darkened: the panel shows the fabric
   deepened, and the inner frame lifts it back to full brightness */
.popup-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(60, 50, 34, 0.42);
  pointer-events: none;
}

.popup-frame {
  position: relative;
  z-index: 1;
  padding: clamp(1.8rem, 4vw, 2.4rem) clamp(1.4rem, 3vw, 2rem);
  background-image: url("assets/sheer-a.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 14px rgba(40, 32, 20, 0.35);
}

/* soft bloom behind the words only, so the weave stays visible at the edges */
.popup-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(78% 62% at 50% 50%,
    rgba(233, 231, 225, 0.80) 0%,
    rgba(233, 231, 225, 0.45) 62%,
    rgba(233, 231, 225, 0.05) 100%);
  pointer-events: none;
}

.popup-frame > * { position: relative; z-index: 1; }

.popup-close {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(41, 51, 51, 0.5);
  cursor: pointer;
  transition: color 0.3s ease;
}

.popup-close:hover { color: var(--deep-fir); }

/* matches the website footer's "Join the house" block */
.popup-eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}

.popup-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  color: var(--deep-fir);
  margin-bottom: 0.7rem;
}

.popup-line em { font-style: normal; color: var(--teal); }

.popup-intro {
  font-size: 0.95rem;
  color: var(--deep-fir);
  margin-bottom: 1.1rem;
}

/* country + phone row, shared by the pop-up and the signup section */
.phone-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.dialcode {
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  border: 1px solid rgba(144, 128, 95, 0.6);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--deep-fir);
  white-space: nowrap;
  flex: 0 0 auto;
}

.phone-row .field { flex: 1 1 auto; }

select.field { appearance: none; cursor: pointer; }

#popup-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
}

#popup-form .field {
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  /* gold at rest, never the near-black Deep Fir it used to be */
  border: 1px solid rgba(144, 128, 95, 0.6);
  color: var(--deep-fir);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.85rem 1.1rem;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.3s ease;
}

#popup-form .field::placeholder { color: rgba(41, 51, 51, 0.55); }
#popup-form .field:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

#popup-form button {
  margin-top: 0.2rem;
  align-self: center;
  /* matches the page's own Join the house button */
  background: var(--gemgold);
  border: none;
  color: var(--deep-fir);
  text-shadow: 0 1px 1px rgba(255, 251, 236, 0.45);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.35s ease;
}

#popup-form button:hover { filter: brightness(0.9); }

.popup-note {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #8a2b1c;          /* only ever used for problems now */
  min-height: 1.2rem;
}

/* the thank-you replaces the form entirely, so it cannot be missed */
.popup-thanks {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.4rem 0 0.6rem;
  animation: popup-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.popup-thanks[hidden] { display: none; }

.popup-thanks-mark {
  width: clamp(120px, 30vw, 150px);
  height: auto;
  display: block;
  margin: 0 auto 1.3rem;
}

.popup-thanks-line {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  color: var(--deep-fir);
  margin-bottom: 0.9rem;
}

/* bigger and fully dark: this sat too pale on the fabric to read */
.popup-thanks-sub {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--deep-fir);
  max-width: 30ch;
  margin: 0 auto 1.8rem;
}

.popup-thanks-close {
  background: var(--gemsapph);
  border: none;
  color: var(--mist);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.95rem 2.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.35s ease;
}

.popup-thanks-close:hover { filter: brightness(0.9); }

/* The two Join the House buttons and the welcome's Close button are one set:
   if the sign-up pill is gold the Close must be gold, and the same for
   sapphire. Both options are kept so either can be chosen by swapping a
   single body class. */
body.buttons-sapphire #notify-form button,
body.buttons-sapphire #popup-form button,
body.buttons-sapphire .popup-thanks-close {
  background: var(--gemsapph);
  color: var(--mist);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.buttons-gold #notify-form button,
body.buttons-gold #popup-form button,
body.buttons-gold .popup-thanks-close {
  background: var(--gemgold);
  color: var(--deep-fir);
  text-shadow: 0 1px 1px rgba(255, 251, 236, 0.45);
}

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

/* no dividing rule: icons, then the wordmark, then the line */
.footer {
  background: var(--footer-ground);
  padding: var(--rule-gap) 2rem clamp(2.4rem, 4.5vh, 3.2rem);
  text-align: center;
}

/* --footer-ground is the lighter band the footer sits on.
   background is what the phone shows when you drag past the end of the page —
   set to the same value so the two read as one continuous surface. */
body.ground-mist     { --footer-ground: #E4E2DD; background: #E4E2DD; }
body.ground-paleblue { --footer-ground: #CFD5D3; background: #CFD5D3; }
body.ground-deepfir  { --footer-ground: #36423F; background: #36423F; }

.socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3rem);
  margin-bottom: calc(clamp(2rem, 4vh, 2.8rem) + var(--wm-gain));
}

.socials a {
  display: inline-flex;
  color: var(--gold);
  transition: opacity 0.35s ease;
}

.socials a:hover { opacity: 0.62; }

.socials svg {
  width: clamp(22px, 2.4vw, 26px);
  height: auto;
  display: block;
}

.footer-wordmark {
  width: var(--wm-w);
  height: auto;
  display: block;
  margin: 0 auto calc(clamp(1.6rem, 3.2vh, 2.2rem) + var(--wm-gain));
}

.footer-line {
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

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

@media (max-width: 900px) {
  /* iPhones ZOOM THE WHOLE PAGE when a focused form field's text is under
     16px — that is the sideways jump Liz saw moving from email to phone.
     Every field, select and the dial code must be at least 16px on phones.
     (Name and email fields triggered it too, but near the top of the form
     the zoom was less noticeable; the phone row made it obvious.) */
  #notify-form .field,
  #popup-form .field,
  select.field,
  .dialcode {
    font-size: 16px;
  }

  /* stacked: the film leads, then the veiled verse, then Coming soon */
  .hero { grid-template-columns: 1fr; }
  .hero-media { order: 1; }
  .hero-text  { order: 2; }
  .hero-text { padding-top: clamp(4rem, 10vh, 6rem); }
  .hero-media { min-height: 70vh; }
  .hero-veil {
    background: linear-gradient(to bottom,
      rgba(215, 212, 206, 0.5) 0%,
      rgba(215, 212, 206, 0) 40%);
  }
  /* thin gold line art needs more size to hold up on a phone screen */
  .notify-wordmark { width: clamp(140px, 36.08vw, 192px); }
  .notify-egret { height: clamp(122px, 31.35vw, 167px); }

  body.layout-bento .wall,
  body.layout-editorial .wall,
  body.layout-centerpiece .wall { display: block; }
  body.layout-masonry .wall { column-count: 1; }
  .wall .tile { min-height: 420px; margin-bottom: clamp(0.9rem, 3vw, 1.4rem); break-inside: avoid; }
  .wall .tile-work { min-height: 520px; }
  .wall .tile-aumana-phone { min-height: 460px; }
  .wall .tile-accent { min-height: 300px; }

  /* the tile is taller when stacked, so the stones can take a little more */
  .tile-veil::after { height: 55%; }
  body.seamless .wall .tile { margin-bottom: 0; }
}

/* tablet: two columns for masonry */
@media (min-width: 601px) and (max-width: 900px) {
  body.layout-masonry .wall { column-count: 2; }
}

/* ============================================================
   Alternate page grounds (for comparison)
   Only the page background and the words sitting directly on it
   change. Tiles, images, video and any text over them are untouched.
   ============================================================ */

body.ground-mist::before {
  background:
    radial-gradient(120% 90% at 15% 8%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #E6E4DF 0%, var(--mist) 45%, #C3BFB6 100%);
}

body.ground-paleblue::before {
  background:
    radial-gradient(120% 90% at 15% 8%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #D2D8D6 0%, var(--pale-blue) 45%, #A6AEAC 100%);
}

/* on a light ground these were Mist and would disappear */
body.ground-mist .notify .mid-serif,
body.ground-paleblue .notify .mid-serif {
  color: var(--gold);
}

body.ground-mist .form-note.is-success,
body.ground-paleblue .form-note.is-success {
  color: var(--deep-fir);
}

/* the gold reads properly against a light ground, so the whisper can carry it */
body.ground-mist .whisper-eyebrow,
body.ground-paleblue .whisper-eyebrow {
  color: var(--gold);
}

/* ---------- pop-up: mark above, wordmark below ---------- */

.popup-mark {
  /* sized by height, not width: the artwork is cropped to the bird itself,
     so the Egret roughly doubles while the panel keeps its height */
  height: clamp(58px, 7.5vh, 68px);
  width: auto;
  display: block;
  margin: 0 auto 0.55rem;
}

.popup-wordmark {
  width: clamp(120px, 20vw, 155px);
  height: auto;
  display: block;
  margin: 0.5rem auto 0;
  opacity: 0.85;
}

/* Borderless pop-up (under review): the darkened ring disappears and the
   whole panel reads as one sheer surface — the same look as the welcome
   panel, so the form and the thank-you match. */
/* One radius on the shared panel rounds BOTH states — the sign-up form and
   the welcome note — identically, since they live inside the same surface
   (overflow: hidden clips the fabric to the curve). */
body.popup-borderless .popup-panel {
  padding: 0;
  border-radius: clamp(14px, 2.4vw, 22px);
}
body.popup-borderless .popup-frame {
  background-image: none;   /* no second, brighter fabric layer = no ring */
  box-shadow: none;
  padding: clamp(2rem, 4.5vw, 2.6rem) clamp(1.6rem, 3.4vw, 2.2rem);
}

/* the welcome panel has no bloom either — drop it so the two truly match */
body.popup-borderless .popup-frame::before { background: none; }

/* Without the border ring the welcome note lost height and the curve made it
   read squarer still. Generous vertical padding restores the taller,
   rectangular proportion it had. */
body.popup-borderless .popup-thanks {
  padding: clamp(2.6rem, 6vh, 3.6rem) 1.5rem clamp(2rem, 4.5vh, 2.8rem);
}

/* Safari paints any field it autofills in its own pale blue, ignoring the
   page's styling. Repainted in a light lift of Mist (the box-shadow is the
   only reliable way to cover Safari's colour), with the type kept in
   Deep Fir. Rose quartz was tried here and rejected. */
input.field:-webkit-autofill,
input.field:-webkit-autofill:hover,
input.field:-webkit-autofill:active,
select.field:-webkit-autofill,
select.field:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px #E9E7E2 inset !important;
  box-shadow: 0 0 0 1000px #E9E7E2 inset !important;
  -webkit-text-fill-color: var(--deep-fir) !important;
  caret-color: var(--deep-fir);
  /* second line of defence: the browser fades its colour in via a
     transition, so an absurdly long delay means it never arrives */
  transition: background-color 100000s ease-in-out 0s;
}

/* An autofilled field that is ALSO focused needs both effects in one
   declaration — otherwise the focus rule's shadow replaces the cover and the
   blue reappears, which is exactly what was happening. */
input.field:-webkit-autofill:focus,
select.field:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #E9E7E2 inset,
                      0 0 0 1px var(--gold) !important;
  box-shadow: 0 0 0 1000px #E9E7E2 inset,
              0 0 0 1px var(--gold) !important;
  -webkit-text-fill-color: var(--deep-fir) !important;
  border-color: var(--gold) !important;
}

/* the frame around the pop-up: the panel's tint shows as the border */
body.popup-mist .popup-panel::before      { background: rgba(215, 212, 206, 0.62); }
body.popup-paleblue .popup-panel::before  { background: rgba(189, 196, 194, 0.66); }
body.popup-deepfir .popup-panel::before   { background: rgba(41, 51, 51, 0.55); }

/* Darker option under review: layered on top of popup-borderless, this
   removes the tint from the shared panel, so the form AND the welcome note
   both show the sheer fabric at full richness. It must sit BELOW the tint
   rules above — the selectors tie on specificity, so file order decides. */
/* Fully bare fabric proved darker than the old bordered interior, because
   that interior always carried a soft glow behind the words. A gentle, even
   lift at roughly a third of the Mist wash's strength lands between the two:
   richer than the hazy version, brighter than bare cloth, and uniform so the
   form and the welcome note stay identical. */
body.popup-rich.popup-borderless .popup-panel::before { background: rgba(233, 231, 225, 0.35); }

/* ---------- Deep Fir ground ---------- */

body.ground-deepfir::before {
  background:
    radial-gradient(120% 90% at 15% 8%, rgba(189, 196, 194, 0.14) 0%, rgba(189, 196, 194, 0) 55%),
    linear-gradient(160deg, #35403F 0%, var(--deep-fir) 45%, #1E2626 100%);
}

/* on a dark ground the words that sit directly on it must lift */
body.ground-deepfir .whisper p:not(.whisper-eyebrow) { color: var(--pale-blue); }
body.ground-deepfir .whisper-eyebrow { color: var(--gold); }
body.ground-deepfir .notify .mid-serif { color: var(--mist); }
body.ground-deepfir .notify .eyebrow { color: var(--gold); }
body.ground-deepfir .form-note.is-success { color: var(--mist); }
body.ground-deepfir #notify-form .field,
body.ground-deepfir #notify-form .dialcode {
  background: rgba(215, 212, 206, 0.10);
  border-color: rgba(215, 212, 206, 0.45);
  color: var(--mist);
}
body.ground-deepfir #notify-form .field::placeholder { color: rgba(215, 212, 206, 0.55); }
body.ground-deepfir .footer-line { color: var(--gold); }