/* ─────────────────────────────────────────────────────────────
   Kashmir & Co. — "One valley, made around you"

   The page is one Kashmir day. A single fixed sky sits behind
   everything and moves through soft warm gradients as you scroll —
   dawn, morning, noon, afternoon, dusk, evening, twilight, night.
   It is drawn from sufiyana rang, the pastel gradients of Kashmiri
   papier-mâché. Sections have no backgrounds of their own, so there
   is never a visible break. main.js sets --sky-a/--sky-b/--sun-*.

   Desire lives in the warm pastels; the decision happens at night,
   in a deep kahwa-plum (deep tones read as trust and luxury).
   Type: Montserrat only. Shape: the Mughal arch.
   Full rationale and sources: README.md.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Sky — overwritten continuously by main.js. Defaults are dawn. */
  --sky-a: #FCF3EE;
  --sky-b: #F6E0D6;
  --sun: rgba(255,186,150,.55);
  --sun-x: 12%;
  --sun-y: 88%;

  --ink: #2A1D18;        /* walnut */
  --ink-soft: #57403A;   /* ≥4.5:1 on every light sky stop */
  --wine: #7E2A36;       /* kesar wine: small accent text */
  --gold: #B8862E;       /* saffron gold: hairlines, numerals */
  --line: rgba(42,29,24,.16);
  --glass: rgba(255,250,246,.62);

  --plum: #2E1E24;       /* kahwa plum: buttons, and the night */
  --plum-2: #3D2830;
  --cream: #FCF3EE;
  --gold-night: #E2B15B;

  --grade: saturate(.94) contrast(1.03) sepia(.07) brightness(1.02);
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V33C0 15 27 5 50 0C73 5 100 15 100 33V100Z'/%3E%3C/svg%3E");
  --arch-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M.5 100V33C.5 15.3 27 5.5 50 .6C73 5.5 99.5 15.3 99.5 33V100' fill='none' stroke='%23B8862E' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pad: clamp(20px, 5vw, 72px);
  --max: 1280px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Past dusk the type turns to lamplight. main.js toggles this. */
html.is-night {
  --ink: #F6E9DD;
  --ink-soft: #D9C6BA;
  --wine: #E2B15B;
  --line: rgba(246,233,221,.2);
  --glass: rgba(46,30,36,.6);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--sky-a); }
body { font-family: var(--font); font-size: 16.5px; line-height: 1.75; font-weight: 400; color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--plum); color: var(--cream); }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-weight: 300; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); }
h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); }
h3 { font-weight: 600; letter-spacing: -0.015em; font-size: 1.3rem; line-height: 1.25; }
p { max-width: 62ch; }

.skip { position: fixed; left: 12px; top: -80px; z-index: 500; background: var(--plum); color: var(--cream); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ── SKY ──────────────────────────────────────────── */

.sky { position: fixed; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 100%); }
.sky__sun { position: absolute; inset: 0; background: radial-gradient(70vmax circle at var(--sun-x) var(--sun-y), var(--sun) 0%, transparent 46%); }
/* A whisper of paper texture, like the pulp under papier-mâché paint. */
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .15 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html.is-night .grain { mix-blend-mode: screen; opacity: .05; }

/* ── BUTTONS ─────────────────────────────────────── */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: .98rem; letter-spacing: .005em; text-decoration: none; padding: 15px 26px; border-radius: 999px; border: 1px solid transparent; transition: background .3s, color .3s, border-color .3s, box-shadow .3s; white-space: nowrap; }
.btn--lg { padding: 18px 32px; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }
.btn--dark { background: var(--plum); color: var(--cream); box-shadow: 0 12px 28px -14px rgba(46,30,36,.7); }
.btn--dark:hover { background: var(--plum-2); box-shadow: 0 16px 34px -14px rgba(46,30,36,.75); }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--sky-a); }
.btn--gold { background: var(--gold-night); color: var(--plum); box-shadow: 0 12px 34px -12px rgba(226,177,91,.55); }
.btn--gold:hover { background: #ECC274; }
.btn--line-light { border-color: rgba(246,233,221,.5); color: #F6E9DD; }
.btn--line-light:hover { border-color: #F6E9DD; background: rgba(246,233,221,.08); }

/* ── NAV ─────────────────────────────────────────── */

.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; gap: 28px; padding: 18px var(--pad); transition: background .4s, box-shadow .4s, padding .4s; }
.nav.is-scrolled { padding: 12px var(--pad); background: color-mix(in srgb, var(--sky-a) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--line); }
.nav__mark { font-weight: 600; font-size: 1.1rem; letter-spacing: .01em; text-decoration: none; margin-right: auto; }
.nav__mark span, .foot__mark span { font-weight: 300; color: var(--wine); }
.nav__links { display: flex; gap: clamp(18px, 2.2vw, 32px); }
.nav__links a { text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--ink-soft); transition: color .25s; }
.nav__links a:hover { color: var(--ink); }
.nav__cta { padding: 11px 20px; font-size: .9rem; }
.nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; }
.nav__burger span { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* ── ARCH WINDOWS ────────────────────────────────── */

.arch { position: relative; }
.arch::before { content: ''; position: absolute; inset: -14px -14px 0; background: var(--arch-line) center / 100% 100% no-repeat; pointer-events: none; opacity: .75; }
.arch__photo { position: relative; width: 100%; height: 100%; overflow: hidden; background: rgba(120,70,50,.08);
  -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; }
.arch__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--grade); opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease), transform 7s var(--ease); }
.arch__photo img.is-on, .arch__photo img:only-child { opacity: 1; transform: scale(1); }
/* One warm grade over every photo, so different sources read as one shoot. */
.arch__photo::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(255,214,186,.35), rgba(140,70,60,.18)); }

/* ── HERO ────────────────────────────────────────── */

.hero { min-height: 100svh; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 6vw, 96px); align-items: center; max-width: var(--max); margin: 0 auto; padding: 120px var(--pad) 64px; }
.live { font-size: .9rem; font-weight: 500; color: var(--ink-soft); min-height: 1.6em; display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity .6s; }
.live.is-on { opacity: 1; }
.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(184,134,46,.5); animation: pulse 2.6s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(184,134,46,.55); } 70% { box-shadow: 0 0 0 9px rgba(184,134,46,0); } 100% { box-shadow: 0 0 0 0 rgba(184,134,46,0); } }
.hero__title { margin-top: 22px; font-size: clamp(2.7rem, 5.6vw, 5.6rem); line-height: 1; letter-spacing: -0.05em; }
.hero__lede { margin-top: 28px; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.7; max-width: 46ch; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.assure { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; font-size: .9rem; font-weight: 500; color: var(--ink-soft); }
.assure li { display: flex; align-items: center; gap: 10px; }
.assure li::before { content: ''; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); flex: none; }

.hero__window { display: flex; flex-direction: column; gap: 22px; }
.arch--hero { height: min(70vh, 700px); width: 100%; }
.seasons-switch { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
.seasons-switch__label { font-size: .85rem; color: var(--ink-soft); }
.seasons-switch__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.seasons-switch__btns button { font-size: .92rem; font-weight: 500; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); transition: background .3s, color .3s, border-color .3s; }
.seasons-switch__btns button:hover { border-color: var(--ink); }
.seasons-switch__btns button[aria-pressed="true"] { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.seasons-switch__note { font-size: .92rem; color: var(--ink-soft); min-height: 3.2em; transition: opacity .35s; }
.seasons-switch__note.is-changing { opacity: 0; }

/* ── PROBLEM ─────────────────────────────────────── */

.problem { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 150px) var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px) clamp(40px, 7vw, 110px); align-items: start; }
.problem__lead { grid-column: 1 / -1; }
.problem__lead h2 { max-width: 19ch; }

.ticket { filter: drop-shadow(0 26px 40px rgba(110,60,40,.18)); transform: rotate(-1.4deg); }
/* Punched notches either side, like a printed tour voucher. */
.ticket__paper { background: rgba(255,251,247,.86); padding: clamp(26px, 3vw, 40px) clamp(28px, 3.4vw, 46px); border-radius: 10px;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 13px, #000 13.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 13px, #000 13.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 13px, #000 13.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 13px, #000 13.5px) right / 51% 100% no-repeat; }
html.is-night .ticket__paper { background: rgba(255,251,247,.9); color: #2A1D18; }
.ticket__cap { font-weight: 600; font-size: 1rem; margin-bottom: 14px; color: #2A1D18; }
.ticket li { display: grid; grid-template-columns: 60px 1fr; gap: 10px; padding: 12px 0; border-top: 1px dashed rgba(42,29,24,.2); font-size: .95rem; line-height: 1.5; color: #57403A; }
.ticket li b { font-weight: 600; color: #2A1D18; }
.strike { background: linear-gradient(#7E2A36, #7E2A36) no-repeat 0 58% / 0 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .7s var(--ease); }
.ticket.is-struck .strike { background-size: 100% 1.5px; }
.ticket.is-struck li:nth-child(2) .strike { transition-delay: .18s; }
.ticket.is-struck li:nth-child(3) .strike { transition-delay: .36s; }
.ticket.is-struck li:nth-child(4) .strike { transition-delay: .54s; }
.ticket.is-struck li:nth-child(5) .strike { transition-delay: .72s; }
.ticket__note { margin-top: 16px; font-size: .92rem; font-weight: 600; color: #7E2A36; }

.principles li { padding: 22px 0; border-top: 1px solid var(--line); }
.principles li:first-child { padding-top: 0; border-top: 0; }
.principles h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.principles p { margin-top: 6px; color: var(--ink-soft); }

/* ── STORIES ─────────────────────────────────────── */

.stories { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--pad) 0; }
.stories__head h2 { max-width: 14ch; font-size: clamp(2.3rem, 5vw, 4.4rem); }
.stories__head p { margin-top: 18px; font-size: 1.1rem; color: var(--ink-soft); }
.stories__body { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 7vw, 110px); margin-top: clamp(30px, 5vw, 60px); }
.stories__stage { position: sticky; top: 14vh; height: 72vh; display: flex; flex-direction: column; }
.arch--stage { flex: 1; min-height: 0; }

.chapter { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; transition: opacity .6s var(--ease); }
.js .chapter:not(.is-active) { opacity: .3; }
.chapter__img { display: none; }
.chapter__who { font-size: .95rem; font-weight: 600; color: var(--wine); }
.chapter h3 { margin-top: 10px; font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1.05; }
.chapter > p:not(.chapter__time) { margin-top: 20px; font-size: 1.08rem; }
.chapter__look { color: var(--ink-soft); padding-left: 16px; border-left: 1px solid var(--gold); }
.chapter__look b { display: block; font-weight: 600; color: var(--ink); }
.chapter__add { margin-top: 22px; }
.chapter__addlabel { font-size: .92rem; font-weight: 600; }
/* Suggestions, not bookable items: quiet outlined tags, so they don't read as buttons. */
.addons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.addons li { font-size: .9rem; padding: 7px 14px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--gold) 70%, transparent); color: var(--ink); background: color-mix(in srgb, var(--glass) 60%, transparent); }
.chapter__cta { align-self: flex-start; margin-top: 26px; font-weight: 600; text-decoration: none; padding-bottom: 4px; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1.5px no-repeat; transition: background-size .3s, color .3s; }
.chapter__cta:hover { color: var(--wine); background-size: 100% 3px; }
.stories__end { padding: clamp(60px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); font-size: clamp(1.7rem, 3.4vw, 2.9rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.2; max-width: 22ch; }

/* ── TAILOR ──────────────────────────────────────── */

.tailor { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--pad); }
.tailor__head h2 { font-size: clamp(2.3rem, 5vw, 4.4rem); }
.tailor__head p { margin-top: 16px; font-size: 1.1rem; color: var(--ink-soft); }
.tailor__grid > * { min-width: 0; }
.tailor__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); margin-top: clamp(36px, 5vw, 60px); align-items: start; }

.choices fieldset { border: 0; padding: 0; margin-bottom: 30px; min-width: 0; }  /* fieldsets default to min-content width, which stops chips wrapping */
.choices legend { font-weight: 600; font-size: 1.02rem; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chips label { font-size: .94rem; font-weight: 500; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; transition: background .25s, color .25s, border-color .25s; user-select: none; }
.chips label:hover { border-color: var(--ink); }
.chips input:checked + label { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.chips input:focus-visible + label { outline: 2px solid var(--wine); outline-offset: 3px; }

.field { margin-bottom: 30px; }
.field__label { display: block; font-weight: 600; font-size: 1.02rem; margin-bottom: 12px; }
.select { appearance: none; -webkit-appearance: none; font: inherit; font-size: .98rem; font-weight: 500; color: var(--ink); width: min(100%, 360px); padding: 12px 46px 12px 18px; border-radius: 999px; border: 1px solid var(--line); background-color: var(--glass); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237E2A36' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; transition: border-color .25s; }
.select:hover { border-color: var(--ink); }
.select:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }

.sketch { position: sticky; top: 96px; background: rgba(255,251,247,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 30px; padding: 22px 22px 0; box-shadow: 0 40px 80px -48px rgba(110,50,50,.45); color: #2A1D18; }
.arch--sketch { height: 190px; width: 72%; margin: 14px auto 0; }
.sketch__body { padding: 22px clamp(8px, 2vw, 22px) 26px; }
.sketch__kicker { font-size: .88rem; font-weight: 600; color: #7E2A36; }
.sketch__title { margin-top: 6px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.12; color: #2A1D18; }
.sketch__text { margin-top: 14px; font-size: .98rem; line-height: 1.7; color: #3A2A24; transition: opacity .25s; }
.sketch__text.is-changing, .sketch__title.is-changing, .sketch__moments.is-changing { opacity: 0; }
.sketch__title, .sketch__moments { transition: opacity .25s; }
.sketch__mlabel { margin-top: 18px; font-size: .88rem; font-weight: 600; color: #7E2A36; }
.sketch__moments { margin-top: 6px; }
.sketch__moments li { position: relative; padding: 7px 0 7px 22px; font-size: .95rem; line-height: 1.45; border-top: 1px solid rgba(42,29,24,.1); }
.sketch__moments li:first-child { border-top: 0; }
.sketch__moments li::before { content: ''; position: absolute; left: 3px; top: 15px; width: 6px; height: 6px; transform: rotate(45deg); background: #B8862E; }
.sketch__fields { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin: 20px 0 18px; }
.sketch__fields label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; color: #57403A; }
.sketch__fields input { font: inherit; font-size: 1rem; font-weight: 400; color: #2A1D18; background: transparent; border: 0; border-bottom: 1px solid rgba(42,29,24,.3); padding: 6px 0; border-radius: 0; }
.sketch__fields input:focus { outline: none; border-bottom-color: #7E2A36; }
.sketch__small { margin-top: 12px; font-size: .82rem; color: #57403A; text-align: center; max-width: none; }

/* ── WHEN ────────────────────────────────────────── */

.when { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--pad); }
.when__head p { margin-top: 14px; font-size: 1.1rem; color: var(--ink-soft); }
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: clamp(30px, 4vw, 48px); }
.months button { padding: 14px 0 12px; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--ink-soft); border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s; position: relative; }
.months button::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--dot, var(--gold)); }
.months button:hover { border-color: var(--line); color: var(--ink); }
.months button[aria-pressed="true"] { background: var(--plum); color: var(--cream); }
.month { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(28px, 4vw, 44px); }
.month__photo { aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; position: relative; }
.month__photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); transition: opacity .4s; }
.month__photo img.is-changing { opacity: 0; }
.month__name { font-size: .95rem; font-weight: 600; color: var(--wine); }
.month__text h3 { margin-top: 6px; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 300; letter-spacing: -0.04em; }
.month__text p:not(.month__name) { margin-top: 14px; font-size: 1.06rem; }
.month__text .btn { margin-top: 26px; }
.month__text > * { transition: opacity .3s; }
.month__text.is-changing > * { opacity: 0; }

/* ── CELEBRATIONS ────────────────────────────────── */

.celebrate { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--pad); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.celebrate h2 { max-width: 15ch; }
.celebrate__text > p { margin-top: 20px; font-size: 1.08rem; color: var(--ink-soft); }
.occasions { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 30px; }
.occasions a { font-size: clamp(1.3rem, 2.1vw, 1.8rem); font-weight: 300; letter-spacing: -0.03em; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 92% / 0 1.5px no-repeat; transition: background-size .35s var(--ease), color .3s; }
.occasions a:hover { color: var(--wine); background-size: 100% 1.5px; }
.arch--celebrate { height: min(72vh, 680px); }

/* ── STAYS ───────────────────────────────────────── */

.stays { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--pad); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.arch--stays { height: min(78vh, 720px); position: sticky; top: 110px; }
.stays__lists { display: grid; gap: clamp(50px, 6vw, 80px); }
.stays h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.list { margin-top: 20px; }
.list li { display: grid; grid-template-columns: minmax(170px, 15rem) 1fr; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.list b { font-weight: 600; }
.list span { color: var(--ink-soft); }

/* ── HOW IT WORKS ────────────────────────────────── */

.how { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--pad); }
.how ol { margin-top: clamp(28px, 4vw, 48px); counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
.how li { counter-increment: step; padding-top: 20px; border-top: 1px solid var(--line); }
.how li::before { content: counter(step); display: block; font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--gold); margin-bottom: 14px; }
.how li p { margin-top: 8px; color: var(--ink-soft); }

.dusk-gap { height: 42vh; }

/* ── NIGHT ───────────────────────────────────────── */

.night { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; color: var(--ink); }
html:not(.js) .night { background: linear-gradient(180deg, #3A2229, #1C1115); --ink: #F6E9DD; --ink-soft: #D9C6BA; --wine: #E2B15B; --line: rgba(246,233,221,.2); }
.night__photo { position: absolute; inset: 0; opacity: .3;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 90%); mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 90%); }
.night__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) sepia(.2); }
.lanterns i { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(226,177,91,.35) 0%, rgba(226,177,91,0) 65%); filter: blur(6px); animation: drift 14s ease-in-out infinite alternate; }
.lanterns i:nth-child(1) { left: 8%; top: 22%; }
.lanterns i:nth-child(2) { right: 12%; top: 14%; width: 200px; height: 200px; animation-delay: -4s; }
.lanterns i:nth-child(3) { left: 46%; top: 58%; width: 340px; height: 340px; animation-delay: -8s; opacity: .7; }
.lanterns i:nth-child(4) { right: 26%; top: 70%; width: 160px; height: 160px; animation-delay: -2s; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(24px, -30px); } }
.night__inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px var(--pad) 80px; }
.night h2 { font-size: clamp(3rem, 8.4vw, 7.6rem); letter-spacing: -0.055em; line-height: .98; max-width: 11ch; }
.night__inner > p { margin-top: 22px; font-size: 1.2rem; color: var(--ink-soft); }
.night__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; }

.foot { position: relative; z-index: 2; max-width: var(--max); width: 100%; margin: 0 auto; padding: 40px var(--pad) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); }
.foot__mark { font-weight: 600; font-size: 1.2rem; color: var(--ink); }
.foot__line { margin-top: 6px; }
.credits { margin-top: 22px; font-size: .78rem; }
.credits summary { cursor: pointer; font-weight: 600; }
.credits p { margin-top: 10px; max-width: 120ch; line-height: 1.7; }
.foot__base { margin-top: 20px; }

/* ── DOCK (mobile) ───────────────────────────────── */

.dock { display: none; }

/* ── RESPONSIVE ──────────────────────────────────── */

@media (max-width: 1060px) {
  .nav__links { display: none; }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 104px; min-height: auto; }
  .arch--hero { height: min(62vh, 560px); }
  .problem, .celebrate, .stays, .tailor__grid, .month { grid-template-columns: 1fr; }
  .how ol { grid-template-columns: repeat(2, 1fr); }
  .ticket { max-width: 560px; }
  .stories__body { grid-template-columns: 1fr; }
  .stories__stage { display: none; }
  .js .chapter:not(.is-active) { opacity: 1; }
  .chapter { min-height: 0; padding: 36px 0; }
  .chapter__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: var(--grade); border-radius: 200px 200px 22px 22px; margin-bottom: 22px; }
  .sketch { position: static; }
  .months { grid-template-columns: repeat(6, 1fr); }
  .arch--celebrate { height: 60vh; order: -1; }
  .arch--stays { position: relative; top: auto; height: 56vh; }  /* not static: the arch outline needs this as its positioning box */
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav { gap: 12px; }
  .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__links.is-open { display: flex; flex-direction: column; gap: 22px; position: fixed; inset: 0; z-index: -1; padding: 110px var(--pad) 40px; background: linear-gradient(180deg, var(--sky-a), var(--sky-b)); }
  .nav__links.is-open a { font-size: 1.7rem; font-weight: 300; letter-spacing: -0.03em; color: var(--ink); }
  .hero__acts .btn { flex: 1 1 100%; }
  .assure { flex-direction: column; gap: 8px; }
  .br-desk { display: none; }
  .list li { grid-template-columns: 1fr; gap: 2px; }
  .how ol { grid-template-columns: 1fr; }
  .sketch__fields { grid-template-columns: 1fr; }
  .months { grid-template-columns: repeat(4, 1fr); }
  .night__acts .btn { flex: 1 1 100%; }
  .dock { display: flex; position: fixed; z-index: 90; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); gap: 8px; padding: 8px; border-radius: 999px; background: color-mix(in srgb, var(--sky-a) 80%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 18px 40px -18px rgba(46,30,36,.45); transform: translateY(140%); transition: transform .45s var(--ease); }
  .dock.is-on { transform: none; }
  .dock__plan { flex: 1; }
  .dock__wa { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; }
  .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

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