/* ═══════════════════════════════════════════════════════════════════════
   Sumrita Shrestha

   Three surface languages, used deliberately:

     .glass  frosted, translucent, floats above the colour blooms
     .clay   soft, puffy, pressed — for anything you touch or read closely
     .frame  photographs

   Glass only reads as glass when there is colour behind it, so every section
   that uses it carries a .field of drifting blooms underneath. Never put a
   glass panel on flat white.

   Everything is driven by the tokens below. See design/DESIGN.md.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* colour */
  --bg:      #fffafc;
  --paper:   #ffffff;
  --petal:   #fdeef3;
  --blush:   #fbdde7;
  --rose:    #d6537a;
  --rose-dp: #a8365a;   /* the only pink safe for small text on white */
  --ink:     #2b2129;
  /*
    Was #8c7c84, which came out at 3.9:1 on white — under AA for body text,
    and this colour carries most of the reading on the page. #756771 holds the
    same soft grey-mauve and measures 5.3:1 on white, 4.8:1 on --petal.
  */
  --muted:   #756771;

  --line:      rgba(43, 33, 41, 0.09);
  --line-rose: rgba(214, 83, 122, 0.22);

  --shadow:    0 26px 64px -34px rgba(168, 54, 90, 0.45);
  --shadow-sm: 0 12px 32px -20px rgba(168, 54, 90, 0.42);
  --shadow-lg: 0 44px 96px -42px rgba(168, 54, 90, 0.55);

  /* glass */
  --glass-fill: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.46));
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(20px) saturate(1.7);

  /* clay */
  --clay-fill: linear-gradient(150deg, #fff7fa, var(--petal));
  --clay-shadow:
    18px 20px 44px -22px rgba(168, 54, 90, 0.34),
    -10px -12px 30px -20px rgba(255, 255, 255, 0.95),
    inset 5px 5px 12px rgba(255, 255, 255, 0.95),
    inset -6px -7px 16px rgba(214, 83, 122, 0.16);
  --clay-shadow-sm:
    10px 12px 26px -16px rgba(168, 54, 90, 0.32),
    inset 3px 3px 8px rgba(255, 255, 255, 0.95),
    inset -4px -5px 11px rgba(214, 83, 122, 0.15);
  --clay-press:
    inset 7px 8px 18px rgba(214, 83, 122, 0.22),
    inset -5px -6px 14px rgba(255, 255, 255, 0.95);

  /* type */
  --display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --body:    "Poppins", ui-sans-serif, system-ui, sans-serif;

  /* metrics */
  --r:    28px;
  --r-sm: 16px;
  --r-lg: 36px;
  --pill: 999px;
  --gutter: clamp(1.15rem, 4vw, 4rem);
  --shell:  1280px;
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

p  { margin: 0; text-wrap: pretty; }
a  { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blush); color: var(--ink); }

/* ═════════════════════════  surfaces  ═════════════════════════ */

.glass {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow:
    0 30px 64px -34px rgba(168, 54, 90, 0.42),
    0 2px 10px -6px rgba(168, 54, 90, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* The lit edge. A real pane of glass is brightest where the light enters. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.6), transparent 40%);
}

/*
  Specular highlight that follows the pointer. --mx/--my are written by the
  tilt script; without it they default to the centre and the sheen sits still.
*/
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(
    38% 48% at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.85),
    transparent 70%
  );
}
.glass:hover::after { opacity: 1; }

.clay {
  background: var(--clay-fill);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-shadow);
}
.clay-sm { box-shadow: var(--clay-shadow-sm); }

/* ═════════════════════════  3D  ═════════════════════════ */

.scene { perspective: 1100px; }

/*
  --rx/--ry come from the pointer. .tilting drops the transition so the card
  tracks the cursor instead of chasing it; releasing restores the ease so it
  settles back to flat.

  --lift is folded into the same declaration rather than given its own rule:
  a second `transform` elsewhere would replace this one outright and the card
  would stop tilting.
*/
.tilt {
  transform: translateY(var(--lift, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease), box-shadow 0.5s var(--ease);
}
.tilt.tilting { transition: box-shadow 0.5s var(--ease); }
.lift { transform: translateZ(var(--z, 30px)); }

/* ═════════════════════════  colour field  ═════════════════════════ */

/*
  What the glass is looking at. Slow, large, low-contrast — it should read as
  light in the room, never as a pattern.
*/
.field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.field i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.62;
  animation: drift 26s var(--ease) infinite alternate;
}
.field i:nth-child(1) { width: 38rem; height: 38rem; top: -12rem; right: -10rem; background: #fcd2e2; }
.field i:nth-child(2) { width: 28rem; height: 28rem; bottom: -10rem; left: -8rem;  background: #ffe6d8; animation-duration: 32s; animation-delay: -6s; }
.field i:nth-child(3) { width: 24rem; height: 24rem; top: 30%; left: 42%;          background: #ece0fb; animation-duration: 38s; animation-delay: -14s; opacity: 0.5; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3rem, -2.5rem, 0) scale(1.14); }
}

/* ═════════════════════════  primitives  ═════════════════════════ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pad { padding-block: clamp(4rem, 10vh, 8rem); }
section { position: relative; }
.tinted { background: linear-gradient(180deg, rgba(253, 238, 243, 0.85), rgba(255, 250, 252, 0.4)); }

.display {
  font-family: var(--display);
  font-size: clamp(3rem, 11vw, 9rem);
  font-weight: 200;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 300; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 400; letter-spacing: -0.02em; }
.h4 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }

.lede {
  font-size: clamp(1.0625rem, 1.45vw, 1.3rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  max-width: 46ch;
}

.body  { color: var(--muted); max-width: 62ch; }
.rose  { color: var(--rose-dp); }
.tiny  { font-size: 0.8125rem; line-height: 1.7; color: var(--muted); }

/* the rose pill badge — this site's signature label */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: var(--pill);
  background: var(--petal);
  color: var(--rose-dp);
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  box-shadow: var(--clay-shadow-sm);
}
.badge.solid { background: linear-gradient(150deg, #e8709a, var(--rose)); color: #fff; box-shadow: 0 10px 22px -12px rgba(168, 54, 90, 0.7); }
.badge.plain { background: transparent; padding-inline: 0; box-shadow: none; }

.sec-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.sec-head .badge { margin-bottom: 1.25rem; }
.sec-head h2 + p { margin-top: 1.1rem; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .body { margin-inline: auto; }

/* ── buttons ────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* A light sweeps across the button on hover. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
}
.btn:hover::after { left: 115%; }

.btn-primary {
  background: linear-gradient(145deg, #e8709a, var(--rose) 58%, #bd3f65);
  color: #fff;
  box-shadow:
    0 16px 32px -16px rgba(168, 54, 90, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(120, 25, 50, 0.3);
}
.btn-primary:hover { box-shadow: 0 22px 44px -18px rgba(168, 54, 90, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.btn-primary:active { box-shadow: var(--clay-press); }

/*
  WhatsApp green, built as a moulded button: a lighter top face, a darker
  bottom, a bright inner top edge and a dark inner bottom edge, so it reads as
  a solid object with a light source rather than a flat fill.

  The gradient is deliberately darker than WhatsApp's own #25d366 — white text
  on that measures 1.9:1, nowhere near legible. The midpoint here is #148544,
  which gives 4.7:1 and still reads unmistakably as WhatsApp.
*/
.btn-wa {
  background: linear-gradient(145deg, #25b463, #148544 45%, #0a6233);
  color: #fff;
  box-shadow:
    0 18px 34px -16px rgba(12, 110, 56, 0.75),
    0 4px 10px -4px rgba(12, 110, 56, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 8px rgba(5, 60, 30, 0.45);
}
.btn-wa:hover {
  background: linear-gradient(145deg, #2cc76e, #16964d 45%, #0c7139);
  box-shadow:
    0 26px 48px -18px rgba(12, 110, 56, 0.85),
    0 4px 10px -4px rgba(12, 110, 56, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 8px rgba(5, 60, 30, 0.4);
}
/* pressed: the moulding inverts, so the face sinks */
.btn-wa:active {
  box-shadow:
    0 4px 10px -8px rgba(12, 110, 56, 0.6),
    inset 0 3px 10px rgba(5, 60, 30, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}

.btn-soft { background: var(--clay-fill); color: var(--rose-dp); box-shadow: var(--clay-shadow-sm); }
.btn-soft:hover { box-shadow: var(--clay-shadow); }
.btn-soft:active { box-shadow: var(--clay-press); }

.btn-glass {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-edge);
  color: var(--ink);
  box-shadow: 0 16px 34px -22px rgba(168, 54, 90, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.btn-glass:hover { color: var(--rose-dp); }

.btn-sm { padding: 0.68rem 1.25rem; font-size: 0.8125rem; }
.btn-block { width: 100%; }

/* ── photographs ────────────────────────────────────────────── */

.frame {
  position: relative;
  margin: 0;
  aspect-ratio: var(--ratio, 3 / 4);
  border-radius: var(--r);
  background: linear-gradient(155deg, var(--petal), #fff6f9 55%, var(--blush));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame > span {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-dp);
  opacity: 0.6;
  text-align: center;
  padding: 0 1.5rem;
  line-height: 2.2;
}
/* A pane of glass laid over the photograph, lit from the top left. */
.frame.glazed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.28), transparent 38%);
}

/* ── reveal ─────────────────────────────────────────────────── */

/*
  The reveal animates `translate`, not `transform`. Many revealed elements are
  also .tilt, and a `transform` here would replace the tilt's own transform the
  moment the card came into view — the tilt would compute but never render.
  `translate` is a separate property, so the two compose instead of fighting.
*/
.rv {
  opacity: 0;
  translate: 0 1.75rem;
  transition: opacity 0.9s var(--ease), translate 0.9s var(--ease);
}
.rv.in { opacity: 1; translate: none; }

/* ═════════════════════════  nav  ═════════════════════════ */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-top: 0.9rem;
  transition: padding-top 0.5s var(--ease);
}
.nav.stuck { padding-top: 0.5rem; }

/*
  The pill does not span the full width, so without this the page scrolls
  visibly through the gap above and beside it. A soft scrim, faded in only
  once you are off the top, keeps the pill sitting on calm ground.
*/
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.75rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 42%, rgba(255, 250, 252, 0));
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.nav.stuck::before, .nav.open::before { opacity: 1; }

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.55rem 0.6rem 0.55rem 1.4rem;
  border-radius: var(--pill);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
/* Transparent at the top of the page, frosted once you start scrolling. */
.nav:not(.stuck):not(.open) .nav-in {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.nav:not(.stuck):not(.open) .nav-in::before { opacity: 0; }

.mark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.mark em { font-style: normal; color: var(--rose-dp); }

.nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); }
.nav-links .btn { display: none; }

/* :not(.btn) so the menu's own CTA keeps the button colours it was given. */
.nav-links a:not(.btn) {
  position: relative;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.35s var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--rose-dp); }
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.35rem;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

/*
  Scroll progress, as a hairline across the very top of the window. It was
  inside the pill before, where a low percentage read as an underline on her
  name rather than as progress.
*/
.progress {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #f3b3c8, var(--rose));
  box-shadow: 0 0 14px rgba(214, 83, 122, 0.55);
  transition: width 0.15s linear, opacity 0.5s var(--ease);
  opacity: 0;
}
.nav.stuck .progress { opacity: 1; }

.burger { display: none; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: var(--pill); background: var(--clay-fill); box-shadow: var(--clay-shadow-sm); }
.burger i { display: block; width: 1.05rem; height: 1.5px; border-radius: 2px; background: var(--rose-dp); position: relative; transition: background 0.2s; }
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 100%;
  border-radius: 2px; background: var(--rose-dp);
  transition: transform 0.4s var(--ease);
}
.burger i::before { top: -0.34rem; }
.burger i::after  { top: 0.34rem; }
.nav.open .burger i { background: transparent; }
.nav.open .burger i::before { transform: translateY(0.34rem) rotate(45deg); }
.nav.open .burger i::after  { transform: translateY(-0.34rem) rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display: grid; }
  .nav-cta { display: none; }
  .nav-links {
    position: absolute;
    inset: calc(100% + 0.6rem) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 1.4rem 1.4rem;
    border-radius: var(--r);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge);
    box-shadow: 0 34px 60px -34px rgba(168, 54, 90, 0.55);
    display: grid;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.6rem) scale(0.985);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
  }
  .nav.open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links a:not(.btn) { padding: 0.85rem 0; border-bottom: 1px solid var(--line-rose); font-size: 1rem; }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links .btn { display: inline-flex; margin-top: 1.1rem; }
}

/* ═════════════════════════  hero  ═════════════════════════ */

.hero { padding-top: clamp(7.5rem, 15vh, 10.5rem); padding-bottom: clamp(3rem, 6vh, 5rem); overflow: clip; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin: 1.5rem 0 1.75rem; }
.hero h1 em { font-style: normal; color: var(--rose-dp); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.hero-photo { position: relative; }
.hero-photo .frame { --ratio: 4 / 5; box-shadow: var(--shadow-lg); }

/* Chips float above the photograph on the Z axis, so the tilt parallaxes them. */
.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.15rem;
  border-radius: var(--pill);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 22px 40px -24px rgba(168, 54, 90, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.chip svg { width: 0.95rem; height: 0.95rem; color: var(--rose-dp); flex: none; }
.chip-a { left: -1.5rem; bottom: 2.25rem; --z: 55px; }
.chip-b { right: -1.25rem; top: 2.5rem;   --z: 40px; }
.chip-c { left: 1.5rem;  top: -1.1rem;    --z: 70px; }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3fb98a; flex: none; box-shadow: 0 0 0 4px rgba(63, 185, 138, 0.18); }

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; max-width: 18rem; }
  .hero { padding-top: clamp(6rem, 12vh, 9rem); }
  /* kept inside the gutter — .hero clips, so a chip hung further out is cut */
  .chip-a { left: auto; right: -0.4rem; bottom: 1.5rem; }
  .chip-b { right: auto; left: -0.4rem; top: 1.75rem; }
  .chip-c { display: none; }
}
@media (max-width: 430px) {
  .chip { font-size: 0.75rem; padding: 0.55rem 0.9rem; }
}

/* ═════════════════════════  ticker  ═════════════════════════ */

.ticker {
  position: relative;
  overflow: hidden;
  padding-block: 1.15rem;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-block: 1px solid var(--glass-edge);
}
/* Fades the ends so the loop does not visibly cut off at the edges. */
.ticker::before, .ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(3rem, 10vw, 9rem);
  z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

.ticker-track { display: flex; width: max-content; animation: slide 40s linear infinite; }
.ticker-track span {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 1.5rem;
  font-size: 0.8125rem;
  color: var(--rose-dp);
  white-space: nowrap;
}
.ticker-track span::after { content: "\2022"; color: var(--rose); opacity: 0.5; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ═════════════════════════  her words  ═════════════════════════ */

.notes-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.notes-sticky { position: sticky; top: 7.5rem; }
.notes-sticky .frame { --ratio: 4 / 5; box-shadow: var(--shadow); }
.notes-sticky p { margin-top: 1rem; }

.note { padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: var(--r); }
.note + .note { margin-top: 1.1rem; }
.note-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.note-head .n {
  width: 2.6rem; height: 2.6rem;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clay-fill);
  box-shadow: var(--clay-shadow-sm);
  color: var(--rose-dp);
  font-size: 0.8125rem;
  font-weight: 500;
}
.note p + p { margin-top: 0.9rem; }

@media (max-width: 900px) {
  .notes-grid { grid-template-columns: 1fr; }
  .notes-sticky { position: static; max-width: 20rem; }
}

/* ═════════════════════════  rates  ═════════════════════════ */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.tier {
  position: relative;
  border-radius: var(--r);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
}
.tier:hover { box-shadow: 0 46px 90px -40px rgba(168, 54, 90, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.tier > * { position: relative; z-index: 1; }

/* The chosen tier sits forward of the other two and keeps a warm fill. */
.tier.pick {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(253, 226, 236, 0.72));
  box-shadow: 0 46px 92px -38px rgba(168, 54, 90, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --lift: -0.75rem;
}
.tier.pick .badge.solid { position: absolute; top: -0.9rem; left: 50%; translate: -50% 0; z-index: 2; }

.tier h3 { margin: 1rem 0 0.35rem; }
.tier .dur { font-size: 0.8125rem; color: var(--muted); }
.price {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--rose-dp);
  margin: 1.5rem 0 0.35rem;
}
.price sup { font-size: 0.3em; font-weight: 500; vertical-align: 1.5em; margin-right: 0.3rem; letter-spacing: 0.1em; }

.tier ul { margin: 1.75rem 0 2rem; display: grid; gap: 0.8rem; }
.tier li { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.75rem; font-size: 0.9375rem; color: var(--muted); line-height: 1.65; }
.tier li svg { width: 1.15rem; height: 1.15rem; margin-top: 0.3rem; color: var(--rose); }
.tier .btn { margin-top: auto; }
@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; }
  .tier.pick { --lift: 0rem; margin-top: 0.75rem; }
}

.addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.addon {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.addon .price { margin: 0.4rem 0 0; font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
@media (max-width: 700px) { .addons { grid-template-columns: 1fr; } }

/* ═════════════════════════  steps  ═════════════════════════ */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.step { text-align: center; }
.step .n {
  width: 3.6rem; height: 3.6rem;
  margin: 0 auto 1.35rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clay-fill);
  box-shadow: var(--clay-shadow);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--rose-dp);
  transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.step:hover .n { box-shadow: var(--clay-press); transform: translateY(2px); }
.step h3 { margin-bottom: 0.6rem; }
.step p { font-size: 0.9375rem; color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* ═════════════════════════  gallery rail  ═════════════════════════ */

/*
  Lines the rail's first photograph up with the section heading, then lets it
  bleed off the right edge. 100% (not 100vw) so the scrollbar's width does not
  push it a few pixels out of alignment.
*/
.rail-wrap { padding-left: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter))); }
.rail {
  display: flex;
  gap: clamp(0.85rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* room for the lifted cards to cast their shadow without being clipped */
  padding: 1.75rem 0 2.25rem;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: var(--blush) transparent;
}
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-track { background: var(--petal); border-radius: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--blush); border-radius: 4px; }

.shot { flex: none; width: clamp(14rem, 26vw, 20rem); scroll-snap-align: start; user-select: none; }
.shot .frame { box-shadow: var(--shadow); }
.shot:hover .frame { box-shadow: var(--shadow-lg); }
.shot figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; font-size: 0.8125rem; }
.shot figcaption b { font-weight: 500; }
.shot figcaption span { color: var(--muted); }

/* ═════════════════════════  quotes  ═════════════════════════ */

.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.quote { border-radius: var(--r); padding: clamp(1.75rem, 3vw, 2.5rem); }
.quote > * { position: relative; z-index: 1; }
.quote .stars { display: flex; gap: 0.2rem; margin-bottom: 1.1rem; }
.quote .stars svg { width: 0.95rem; height: 0.95rem; color: var(--rose); }
.quote p { font-size: 1.0625rem; font-weight: 300; line-height: 1.75; margin-bottom: 1.5rem; }
.quote footer { display: flex; align-items: center; gap: 0.85rem; }
.quote .av {
  width: 2.8rem; height: 2.8rem;
  flex: none;
  border-radius: 50%;
  background: var(--clay-fill);
  box-shadow: var(--clay-shadow-sm);
  display: grid; place-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rose-dp);
}
.quote footer b { display: block; font-weight: 500; font-size: 0.9375rem; line-height: 1.5; }
.quote footer span { display: block; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 800px) { .quotes { grid-template-columns: 1fr; } }

/* ═════════════════════════  receipts  ═════════════════════════ */

/*
  Two conveyors running against each other, tilted into the page so the row
  reads as a shelf seen from an angle rather than a flat strip. Perspective is
  set per card, not on a shared scene: a scene's vanishing point sits at its
  centre, so cards near the edges would skew far harder than those in the
  middle and the row would look bent.
*/
.marquee { display: grid; gap: clamp(0.85rem, 1.8vw, 1.5rem); }

.marquee-row {
  position: relative;
  overflow: hidden;
  /* room for the tilt and the lifted hover state to breathe */
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
}
/* Fades both ends so cards arrive and leave rather than being cut off. */
.marquee-row::before, .marquee-row::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(3rem, 12vw, 11rem);
  z-index: 3;
  pointer-events: none;
}
.marquee-row::before { left: 0;  background: linear-gradient(90deg, var(--petal), rgba(253, 238, 243, 0)); }
.marquee-row::after  { right: 0; background: linear-gradient(270deg, var(--petal), rgba(253, 238, 243, 0)); }

.marquee-track {
  display: flex;
  gap: clamp(0.85rem, 1.8vw, 1.4rem);
  width: max-content;
  animation: convey 56s linear infinite;
}
.marquee-row.reverse .marquee-track { animation-direction: reverse; animation-duration: 68s; }
@keyframes convey { to { transform: translateX(-50%); } }

/* Stop the belt while someone is actually looking at a receipt. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.receipt {
  flex: none;
  width: clamp(8.5rem, 13vw, 11.5rem);
  margin: 0;
  cursor: zoom-in;
  transform: perspective(900px) rotateY(-17deg) rotateX(4deg);
  transition: transform 0.55s var(--ease), filter 0.55s var(--ease);
}
.marquee-row.reverse .receipt { transform: perspective(900px) rotateY(17deg) rotateX(4deg); }

/* Straighten, grow and come forward under the pointer. */
.marquee-row .receipt:hover,
.marquee-row .receipt:focus-visible {
  transform: perspective(900px) rotateY(0deg) rotateX(0deg) scale(1.1);
  filter: drop-shadow(0 30px 40px rgba(168, 54, 90, 0.4));
  z-index: 2;
}

.receipt .frame {
  --ratio: 591 / 1100;
  border-radius: 14px;
  box-shadow:
    22px 26px 50px -26px rgba(168, 54, 90, 0.55),
    0 2px 6px -2px rgba(168, 54, 90, 0.3);
}
.marquee-row.reverse .receipt .frame {
  box-shadow:
    -22px 26px 50px -26px rgba(168, 54, 90, 0.55),
    0 2px 6px -2px rgba(168, 54, 90, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .receipt, .marquee-row.reverse .receipt { transform: none; }
  /* nothing scrolls, so the row has to be swipeable by hand instead */
  .marquee-row { overflow-x: auto; }
}

/* ═════════════════════════  faq  ═════════════════════════ */

.faq { max-width: 52rem; margin-inline: auto; display: grid; gap: 0.85rem; }
.faq details { border-radius: var(--r-sm); overflow: hidden; transition: box-shadow 0.4s var(--ease); }
.faq details[open] { box-shadow: var(--clay-press); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 1.7rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  letter-spacing: -0.015em;
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--rose-dp); }
.faq .pm {
  position: relative;
  width: 1.85rem; height: 1.85rem;
  flex: none;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--clay-shadow-sm);
  transition: box-shadow 0.35s var(--ease);
}
.faq details[open] .pm { box-shadow: var(--clay-press); }
.faq .pm::before, .faq .pm::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0.65rem; height: 1.5px;
  border-radius: 2px;
  background: var(--rose-dp);
  translate: -50% -50%;
  transition: transform 0.35s var(--ease);
}
.faq .pm::after { transform: rotate(90deg); }
.faq details[open] .pm::after { transform: rotate(0deg); }
.faq .ans { padding: 0 1.7rem 1.6rem; }

/* ═════════════════════════  book  ═════════════════════════ */

.book-card {
  position: relative;
  border-radius: clamp(var(--r), 4vw, 48px);
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}
.book-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }

.channels { display: grid; gap: 0.8rem; }
.channel {
  border-radius: var(--r-sm);
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.channel:hover { transform: translateX(5px); box-shadow: var(--clay-shadow); }
.channel:active { box-shadow: var(--clay-press); }
.channel .ic {
  width: 2.7rem; height: 2.7rem;
  flex: none;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--clay-shadow-sm);
  display: grid; place-items: center;
}
.channel .ic svg { width: 1.2rem; height: 1.2rem; color: var(--rose-dp); }
.channel b { display: block; font-weight: 500; font-size: 0.9375rem; line-height: 1.5; }
.channel small { display: block; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
/*
  The backup is a fallback, not a second front door. Outlined instead of
  filled, so the eye lands on the row above it first and only comes here if
  that one did not work.
*/
.channel.backup {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-rose);
}
.channel.backup .ic { background: var(--petal); box-shadow: none; }
.channel.backup:hover { background: var(--clay-fill); box-shadow: var(--clay-shadow-sm); }

.channel .arw { margin-left: auto; color: var(--rose); flex: none; transition: transform 0.4s var(--ease); }
.channel:hover .arw { transform: translateX(3px); }
.channel .arw svg { width: 1.1rem; height: 1.1rem; }

@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } }

/* ═════════════════════════  footer  ═════════════════════════ */

footer.site { position: relative; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; background: linear-gradient(180deg, rgba(255, 250, 252, 0), var(--petal) 32%); }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.75fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.foot-col h4 { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-dp); margin-bottom: 1.15rem; font-family: var(--body); }
.foot-col li + li { margin-top: 0.55rem; }
.foot-col a { font-size: 0.9375rem; color: var(--muted); transition: color 0.3s var(--ease); }
.foot-col a:hover { color: var(--rose-dp); }
.foot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-rose);
  padding-top: 1.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-col:first-child { grid-column: 1 / -1; } }

/* ═════════════════════════  lightbox  ═════════════════════════ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  background: rgba(43, 33, 41, 0.6);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  padding: var(--gutter);
}
.lb.open { display: grid; animation: lbIn 0.4s var(--ease); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
/*
  The frame elsewhere crops to a fixed ratio. In here it must not: the point of
  opening a photograph is to see all of it, so the box takes the image's own
  shape and the image is contained rather than covered. The min sizes keep the
  box from collapsing when what opened was a placeholder with no <img> in it.
*/
.lb .frame {
  aspect-ratio: auto;
  width: auto;
  max-width: min(40rem, 92vw);
  max-height: 82vh;
  min-width: min(18rem, 78vw);
  min-height: 12rem;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.6);
  animation: lbPop 0.5s var(--ease);
}
@keyframes lbPop { from { transform: scale(0.94) translateY(1rem); } to { transform: none; } }
.lb .frame img { width: auto; height: auto; max-width: min(40rem, 92vw); max-height: 82vh; object-fit: contain; }
.lb .close { position: absolute; top: 1.25rem; right: 1.25rem; }

/* skip link */
.skip {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 90;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}
.skip:focus { transform: none; }

/* ═════════════════════════  reduced motion  ═════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track, .field i { animation: none; }
  .rv { opacity: 1; translate: none; transition: none; }
  /* keeps the chosen tier raised, drops only the pointer rotation */
  .tilt { transform: translateY(var(--lift, 0)); }
  .btn::after { display: none; }
  .lb.open, .lb .frame { animation: none; }
  .btn:hover, .channel:hover, .receipts .frame:hover, .step:hover .n { transform: none; }
}