/* Kabir Sethi Photography: near-black, warm ivory and marigold gold. Cormorant Garamond for headings, Jost for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #121110;
  --surface: #1B1917;
  --soft: #24211E;
  --ink: #F2EDE6;
  --muted: #B3AA9F;
  --line: #2F2B27;
  --line-strong: #4A443D;
  --brand: #D4AF37;
  --brand-hover: #E6C350;
  --brand-ink: #121110;
  --brand-text: #E2BE4E;
  --eyebrow: #D4AF37;
  --ok: #7FB77E;
  --head: "Cormorant Garamond", Georgia, serif;
  --body: "Jost", system-ui, sans-serif;
  --radius: 4px;
  --radius-lg: 6px;
  --btn-radius: 2px;
  --wrap: 1240px;
  --gap: 24px;
  --menu-bg: #121110;
  --input-bg: #1B1917;
  --est-bg: #24211E;
  --est-ink: #F2EDE6;
  color-scheme: dark;
}
h1, h2, h3 { font-weight: 600; letter-spacing: 0; }
h1 em, h2 em, .f-statement em { font-style: italic; color: var(--brand); font-weight: 500; }
.eyebrow { letter-spacing: .28em; font-weight: 500; font-size: .74rem; }
.btn { text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 500; }
.lede { color: var(--muted); }
.w-cover { border: 0; border-radius: 2px; }
.w-text h3 { font-size: 1.6rem; }
.w-tags span { background: transparent; border-color: var(--line-strong); letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; }

/* header */
.header { position: sticky; background: rgba(18,17,16,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.logo { display: grid; line-height: 1; text-decoration: none; }
.logo b { font: 600 1.7rem var(--head); letter-spacing: .02em; }
.logo span { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--brand); margin-top: 4px; }
.nav a { color: var(--muted); letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--brand); border-radius: 0; }

/* hero */
.hero { position: relative; min-height: min(86vh, 760px); display: grid; align-items: end; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; }
.hero-photo svg { width: 100%; height: 100%; transform: scale(1.04); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,17,16,0) 30%, rgba(18,17,16,.92) 92%); }
.hero-text { position: relative; z-index: 1; padding-block: 120px clamp(48px, 7vw, 88px); }
.hero h1 { font-size: clamp(3rem, 8vw, 6.4rem); line-height: .95; margin: 16px 0 18px; max-width: 13ch; }
.hero .lede { color: #DCD3C7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-ghost { border-color: rgba(242,237,230,.5); }

/* selected frames */
.frames { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 10px; }
.fr { position: relative; }
.fr button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.fr svg { width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s; }
.fr button:hover svg, .fr button:focus-visible svg { transform: scale(1.05); }
.fr p { position: absolute; left: 10px; bottom: 8px; font-size: .78rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); pointer-events: none; opacity: 0; transition: opacity .3s; }
.fr:hover p, .fr:focus-within p { opacity: 1; }
.fr-0 { grid-column: span 2; grid-row: span 2; } .fr-3 { grid-row: span 2; } .fr-4 { grid-column: span 2; } .fr-7 { grid-column: span 2; }
@media (max-width: 760px) { .frames { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; } .fr-4, .fr-7 { grid-column: span 2; } .fr p { opacity: 1; } }

/* lightbox */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8,7,6,.97); color: var(--ink); }
.lb::backdrop { background: rgba(0,0,0,.8); }
.lb[open] { display: grid; place-items: center; }
.lb-fig { margin: 0; display: grid; gap: 14px; justify-items: center; width: min(92vw, 1100px); }
.lb-img svg { width: 100%; height: auto; max-height: 78dvh; }
.lb-img { width: 100%; }
.lb-fig figcaption { font: italic 500 1.3rem var(--head); }
.lb-count { position: absolute; top: 18px; left: 22px; font-size: .8rem; letter-spacing: .2em; color: var(--muted); }
.lb-btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(18,17,16,.6); color: var(--ink); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lb-btn:hover { border-color: var(--brand); color: var(--brand); }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); } .lb-next { right: 16px; top: 50%; transform: translateY(-50%); } .lb-close { top: 12px; right: 16px; }
@media (max-width: 640px) { .lb-prev, .lb-next { top: auto; bottom: 18px; transform: none; } }

.stories-band { background: var(--surface); }

/* packages */
.pk { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .pk { grid-template-columns: minmax(0, 1fr); } }
.pk-in { display: grid; gap: 26px; }
.pk-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pk-events label, .pk-extras label { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.pk-events label:has(input:checked), .pk-extras label:has(input:checked) { border-color: var(--brand); background: rgba(212,175,55,.08); }
.pk-events input, .pk-extras input, .choice input { accent-color: var(--brand); width: 18px; height: 18px; flex: none; }
.pk-extras { display: grid; gap: 8px; }
.pk-extras span { display: grid; }
.pk-extras small { color: var(--muted); }
.choice label { border-color: var(--line-strong); }
.pk-date { min-height: 1.6em; font-weight: 500; }
.pk-date.is-free { color: var(--ok); } .pk-date.is-booked { color: #E7826F; }
.pk-out { position: sticky; top: 96px; display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--brand); border-radius: var(--radius-lg); background: var(--surface); }
.pk-total b { font: 600 clamp(2.6rem, 5vw, 3.6rem)/1 var(--head); color: var(--brand); font-variant-numeric: lining-nums tabular-nums; }
.pk-note { color: var(--muted); font-size: .9rem; }
.pk-out h3 { font-size: 1.4rem; margin-top: 6px; }
.pk-get { list-style: none; display: grid; gap: 8px; }
.pk-get li { display: flex; gap: 10px; }
.pk-get li::before { content: "◆"; color: var(--brand); font-size: .7rem; margin-top: 6px; }

/* inner pages */
.page-head { text-align: center; }
.page-head .lede { margin-inline: auto; }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.cs-head h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
.cs-results dt { color: var(--brand); }
.svc { background: var(--surface); }
.svc-from b { color: var(--brand); font-family: var(--head); }
.process-band { background: var(--surface); }
.quotes blockquote p { font: italic 500 1.35rem/1.4 var(--head); }

/* CTA + footer */
.cta-band { padding-block: clamp(64px, 9vw, 120px); text-align: center; border-top: 1px solid var(--line); }
.cta-band h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); max-width: 18ch; margin: 14px auto 0; line-height: 1.02; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.footer { border-top: 1px solid var(--line); color: var(--muted); }
.f-statement { font: 500 clamp(2.4rem, 7vw, 5rem)/1 var(--head); color: var(--ink); margin-bottom: 48px; }
.footer .logo b { color: var(--ink); }
.footer h2 { color: var(--brand); opacity: 1; }
.f-about { margin-top: 14px; max-width: 34ch; }
.footer .credit a { color: var(--ink); }
.wa-float { background: #1f8a4c; }

/* Small phones: the menu holds the links, so the header keeps only the logo and the menu button. */
@media (max-width: 440px) { .header-cta { display: none; } .logo b { font-size: 1.45rem; } }