/* ============================================================
   ARJUN RAO PHOTOGRAPHY — shared styles
   Gallery-dark monochrome · candlelight gold
   Marcellus (display) · Mulish (body) · IBM Plex Mono (EXIF)
   Designed & built by ARTistic AI Studios
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:      #0D0C0A;   /* gallery wall, lights off            */
  --ink-2:    #151210;   /* raised surface                      */
  --ink-3:    #1D1812;   /* deep frame interiors                */
  --line:     #2B2519;   /* hairline borders, warm              */
  --bone:     #EDE6D9;   /* candlelit paper — primary text      */
  --dim:      #A89E8C;   /* secondary text (AA on --ink)        */
  --faint:    #8C8272;   /* tertiary — 4.9:1 on ink-2, AA-safe  */
  --gold:     #D9A441;   /* candlelight gold — the one accent   */
  --gold-soft:#E9C97E;   /* highlight edge of the flame         */
  --gold-deep:#8A6524;   /* shadow side of the flame            */

  --display: 'Marcellus', 'Times New Roman', serif;
  --body:    'Mulish', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'IBM Plex Mono', 'Courier New', monospace;

  --s1: .5rem;  --s2: 1rem;  --s3: 1.5rem;  --s4: 2.5rem;
  --s5: 4rem;   --s6: 6.5rem;

  --r-frame: 2px;    /* prints get almost-square corners  */
  --r-card:  10px;   /* interface cards soften slightly   */
  --r-pill:  999px;

  --nav-h: 72px;
  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --track-label: .16em;                    /* the one tracking for caps labels  */
  --rhythm: clamp(4.5rem, 9vw, 7.5rem);    /* the one section cadence           */
  --t-quick: .2s;                          /* hovers & micro-interactions       */
  --t-reveal: .45s;                        /* caption & accordion reveals —
                                              deliberately unhurried            */
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-padding-top: calc(var(--nav-h) + 18px); }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
html, body{ overflow-x: clip; }
body{
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[id]{ scroll-margin-top: calc(var(--nav-h) + 18px); }
p, li, dd, dt, blockquote, figcaption{ text-wrap: pretty; }
body::before{ /* faint candlelight falloff on the whole wall */
  content:"";
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(217,164,65,.05), transparent 55%),
    radial-gradient(90% 70% at 85% 110%, rgba(217,164,65,.03), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
img, svg{ max-width:100%; display:block; }
a{ color: var(--gold); text-decoration: none; }
a:hover{ color: var(--gold-soft); }
ul[role="list"], ol[role="list"]{ list-style:none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection{ background: var(--gold); color: var(--ink); }
:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
main{ position: relative; z-index: 1; }

.wrap{
  width: min(var(--wrap), 100% - 3rem);
  margin-inline: auto;
}
@media (max-width: 640px){
  .wrap{ width: calc(100% - 2.5rem); }
}

.skip-link{
  position: fixed; top: -60px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: .9rem;
  padding: .6rem 1.2rem; border-radius: 0 0 8px 8px;
  z-index: 2000; transition: top .25s var(--ease);
}
.skip-link:focus{ top: 0; color: var(--ink); }

/* ---------- Type roles ---------- */
h1, h2, h3, .display{
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .01em;
  text-wrap: balance;
}
h1{ font-size: clamp(2.5rem, 6.4vw, 4.9rem); line-height: 1.08; }
h2{ font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3{ font-size: clamp(1.2rem, 2vw, 1.45rem); }

.eyebrow{
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--display);
  font-size: .74rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow .eb-ap{ width: 15px; height: 15px; flex: none; stroke: var(--gold); }

.lede{
  color: var(--dim);
  max-width: 62ch;
  font-size: 1.0625rem;
}
.mono-note{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--faint);
}
/* figures line up — prices, dates, frame counts */
.mono-note, .cap-exif, .cap-index, .adv-when, .hero-foot,
.pack-price, .about-facts, .foot-bar-inner, .fcount{
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- Sections ---------- */
.sec{ padding: var(--rhythm) 0; position: relative; }
.sec-alt{ background: var(--ink-2); }
.sec-head{ max-width: 720px; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.sec-head h2{ margin: .9rem 0 .9rem; }

/* ---------- Interior page hero ---------- */
.page-hero{
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(3.5rem, 9vw, 6.5rem)) 0 clamp(2.8rem, 6vw, 4.5rem);
}
.page-hero .eyebrow{ margin-bottom: 1.3rem; }
.page-hero h1{
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  max-width: 18ch;
  margin-bottom: 1.3rem;
}
.page-hero h1 em{ font-style: normal; color: var(--gold); }
.page-hero .lede{ font-size: clamp(1.02rem, 1.5vw, 1.15rem); }
.page-aperture{
  position: absolute;
  top: 50%; right: -14vw;
  width: clamp(300px, 40vw, 620px);
  height: auto;
  transform: translateY(-50%);
  stroke: var(--gold);
  opacity: .06;
  pointer-events: none;
}
@media (max-width: 640px){
  .page-aperture{ right: -50vw; opacity: .045; }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--body); font-weight: 700; font-size: .95rem;
  letter-spacing: .02em;
  padding: .85rem 1.7rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform var(--t-quick) var(--ease), background var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.btn:active{ transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn-gold{ background: var(--gold); color: var(--ink); }
.btn-gold:hover{ background: var(--gold-soft); color: var(--ink); transform: translateY(-2px); }
.btn-gold:active{ background: var(--gold); transform: translateY(0) scale(.98); }
.btn-ghost{ border-color: var(--line); color: var(--bone); }
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-soft); transform: translateY(-2px); }
.btn-ghost:active{ transform: translateY(0) scale(.98); }

/* ---------- Nav ---------- */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex; align-items: center;
  transition: border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
/* The blur lives on a pseudo-element: backdrop-filter on .nav itself would
   make the header the containing block for the fixed mobile menu overlay,
   clipping it to 72px tall. */
.nav::before{
  content:"";
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(13,12,10,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.nav.scrolled{ border-bottom-color: var(--line); }
.nav.scrolled::before{ opacity: 1; }
.nav-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  /* no width here — .wrap must keep the nav on the same grid as the page */
}
.wordmark{
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--bone);
}
.wordmark:hover{ color: var(--bone); }
.wordmark .wm-ap{ width: 26px; height: 26px; stroke: var(--gold); flex: none; }
.wordmark .wm-text{
  font-family: var(--display);
  font-size: 1.06rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
.wordmark .wm-sub{
  display: block;
  font-size: .56rem;
  letter-spacing: .46em;
  color: var(--dim);
}
.nav-links{
  display: flex; align-items: center; gap: 1.9rem;
  list-style: none;
}
.nav-links a{
  font-size: .9rem; font-weight: 600;
  color: var(--dim);
  transition: color var(--t-quick) var(--ease);
}
.nav-links a:hover{ color: var(--bone); }
.nav-links a[aria-current="page"]{ color: var(--gold); }
.nav-links a[aria-current="page"]:hover{ color: var(--gold-soft); }
.nav-links .btn{ padding: .6rem 1.25rem; font-size: .86rem; }
/* the gold CTA must keep ink text — .nav-links a would otherwise grey it out */
.nav-links a.btn-gold,
.nav-links a.btn-gold:hover,
.nav-links a.btn-gold[aria-current="page"]{ color: var(--ink); }
.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  position: relative;
  z-index: 1002;
}
.nav-toggle span{
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: var(--bone);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease), top .3s var(--ease);
}
.nav-toggle span:nth-child(1){ top: 16px; }
.nav-toggle span:nth-child(2){ top: 26px; }
.nav-toggle.open span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2){ top: 21px; transform: rotate(-45deg); }

@media (max-width: 920px){
  .nav-toggle{ display: block; }
  .nav-links{
    position: fixed; inset: 0;
    z-index: 1001;
    flex-direction: column; justify-content: center;
    gap: 1.4rem;
    background: rgba(13,12,10,.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .nav-links.open{ opacity: 1; visibility: visible; }
  .nav-links a{ font-size: 1.35rem; font-family: var(--display); font-weight: 400; letter-spacing: .06em; }
  .nav-links .btn{ margin-top: .8rem; font-size: 1rem; padding: .85rem 1.9rem; }
}
body.no-scroll{ overflow: hidden; }

/* ---------- Portfolio / masonry ---------- */
.filters{
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: 2.2rem;
}
.fbtn{
  font-size: .85rem; font-weight: 600;
  letter-spacing: .04em;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .5rem 1.2rem;
  transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease),
              background var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.fbtn:hover{ color: var(--bone); border-color: var(--gold-deep); }
.fbtn:active{ transform: scale(.97); }
.fbtn .fcount{
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--faint);
  margin-left: .3rem;
  transition: color var(--t-quick) var(--ease);
}
.fbtn[aria-pressed="true"]{
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 700;
}
.fbtn[aria-pressed="true"] .fcount{ color: rgba(13,12,10,.72); }
.masonry{
  columns: 3;
  column-gap: 1.4rem;
}
@media (max-width: 980px){ .masonry{ columns: 2; } }
@media (max-width: 600px){ .masonry{ columns: 1; } }

.item{
  break-inside: avoid;
  margin: 0 0 1.4rem;
  position: relative;
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-3);
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.item:hover, .item:focus-visible{ border-color: var(--gold-deep); transform: translateY(-3px); }
.item.hide{ display: none; }
a.item{ display: block; color: inherit; }
a.item:hover{ color: inherit; }

.ph{ position: relative; width: 100%; }
.ph::before{ /* film grain */
  content:"";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05)       0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: 2;
}
.ph::after{ /* vignette */
  content:"";
  position: absolute; inset: 0;
  background: radial-gradient(125% 125% at 50% 42%, transparent 52%, rgba(0,0,0,.5) 100%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.45);
  pointer-events: none;
  z-index: 2;
}

/* --- duotone scenes (all CSS, no images) --- */
.art-a{ /* The haldi hands — turmeric wash */
  aspect-ratio: 4/5;
  background:
    radial-gradient(42% 34% at 32% 36%, rgba(233,190,90,.55), transparent 70%),
    radial-gradient(30% 26% at 66% 58%, rgba(214,156,58,.38), transparent 70%),
    radial-gradient(20% 16% at 48% 74%, rgba(233,190,90,.22), transparent 70%),
    linear-gradient(160deg, #3B2C15 0%, #191209 58%, #0E0B07 100%);
}
.art-b{ /* The first look — stairwell light shaft */
  aspect-ratio: 3/4;
  background:
    linear-gradient(104deg, transparent 38%, rgba(231,186,96,.30) 46%, rgba(231,186,96,.07) 56%, transparent 62%),
    radial-gradient(36% 26% at 56% 46%, rgba(233,196,110,.20), transparent 70%),
    linear-gradient(180deg, #241B0F 0%, #120E08 55%, #0C0A07 100%);
}
.art-c{ /* Mandap at dusk — arch glow + fairy lights */
  aspect-ratio: 1/1;
  background:
    radial-gradient(3px 3px at 16% 24%, rgba(240,205,120,.9), transparent 100%),
    radial-gradient(2px 2px at 30% 18%, rgba(240,205,120,.7), transparent 100%),
    radial-gradient(3px 3px at 47% 15%, rgba(240,205,120,.85), transparent 100%),
    radial-gradient(2px 2px at 63% 18%, rgba(240,205,120,.7), transparent 100%),
    radial-gradient(3px 3px at 80% 25%, rgba(240,205,120,.9), transparent 100%),
    radial-gradient(85% 120% at 50% 118%, rgba(216,160,66,.5), transparent 58%),
    linear-gradient(180deg, #16110A 0%, #221909 74%, #100C07 100%);
}
.art-d{ /* Sparkler exit — bokeh field */
  aspect-ratio: 4/5;
  background:
    radial-gradient(5px 5px at 22% 30%, rgba(240,208,128,.95), transparent 100%),
    radial-gradient(3px 3px at 34% 22%, rgba(240,208,128,.7), transparent 100%),
    radial-gradient(7px 7px at 48% 38%, rgba(240,208,128,.85), transparent 100%),
    radial-gradient(4px 4px at 63% 26%, rgba(240,208,128,.75), transparent 100%),
    radial-gradient(6px 6px at 76% 42%, rgba(240,208,128,.9), transparent 100%),
    radial-gradient(3px 3px at 84% 30%, rgba(240,208,128,.6), transparent 100%),
    radial-gradient(4px 4px at 30% 52%, rgba(240,208,128,.55), transparent 100%),
    radial-gradient(5px 5px at 68% 58%, rgba(240,208,128,.6), transparent 100%),
    radial-gradient(45% 40% at 50% 46%, rgba(206,148,52,.28), transparent 75%),
    linear-gradient(180deg, #0F0C08 0%, #1B140A 52%, #0C0A07 100%);
}
.art-e{ /* Amma's blessing — window light, left */
  aspect-ratio: 3/4;
  background:
    linear-gradient(92deg, rgba(229,186,100,.26) 0%, rgba(229,186,100,.08) 26%, transparent 48%),
    radial-gradient(40% 30% at 34% 44%, rgba(233,196,110,.18), transparent 72%),
    linear-gradient(200deg, #1E170D 0%, #120E08 60%, #0C0A07 100%);
}
.art-f{ /* Baraat on Brick Lane — midday energy */
  aspect-ratio: 5/4;
  background:
    linear-gradient(24deg, transparent 44%, rgba(235,196,108,.24) 50%, transparent 57%),
    linear-gradient(24deg, transparent 62%, rgba(235,196,108,.14) 66%, transparent 71%),
    radial-gradient(55% 45% at 50% 30%, rgba(233,196,110,.3), transparent 75%),
    linear-gradient(180deg, #2E2413 0%, #17110A 68%, #0D0B07 100%);
}
.art-g{ /* Nia, Hampstead Heath — smoke-grey mist, low sun */
  aspect-ratio: 3/4;
  background:
    radial-gradient(9% 6% at 70% 34%, rgba(236,214,160,.75), transparent 100%),
    linear-gradient(180deg, rgba(140,132,120,.24) 0%, rgba(96,90,82,.14) 38%, transparent 62%),
    linear-gradient(180deg, #201D18 0%, #14120E 55%, #0D0C0A 100%);
}
.art-h{ /* The Raos at home — kitchen window panes */
  aspect-ratio: 4/5;
  background:
    linear-gradient(90deg, transparent 18%, rgba(214,196,160,.13) 20%, rgba(214,196,160,.13) 34%, transparent 36%),
    linear-gradient(90deg, transparent 44%, rgba(214,196,160,.10) 46%, rgba(214,196,160,.10) 60%, transparent 62%),
    radial-gradient(45% 30% at 40% 62%, rgba(226,196,130,.14), transparent 75%),
    linear-gradient(180deg, #1B1712 0%, #120F0B 60%, #0C0A08 100%);
}
.art-i{ /* Maya, ninety days — soft centre glow */
  aspect-ratio: 1/1;
  background:
    radial-gradient(46% 40% at 50% 48%, rgba(233,214,180,.24), transparent 75%),
    radial-gradient(24% 20% at 50% 46%, rgba(240,224,192,.16), transparent 80%),
    linear-gradient(180deg, #191510 0%, #110E0A 62%, #0C0A08 100%);
}
.art-j{ /* Diwali at the gallery — a shelf of diyas */
  aspect-ratio: 3/2;
  background:
    radial-gradient(4px 6px at 12% 62%, rgba(242,206,118,.95), transparent 100%),
    radial-gradient(4px 6px at 26% 60%, rgba(242,206,118,.85), transparent 100%),
    radial-gradient(4px 6px at 40% 63%, rgba(242,206,118,.95), transparent 100%),
    radial-gradient(4px 6px at 54% 61%, rgba(242,206,118,.8),  transparent 100%),
    radial-gradient(4px 6px at 68% 63%, rgba(242,206,118,.9),  transparent 100%),
    radial-gradient(4px 6px at 82% 60%, rgba(242,206,118,.85), transparent 100%),
    linear-gradient(180deg, transparent 55%, rgba(206,150,58,.22) 66%, transparent 82%),
    linear-gradient(180deg, #100D08 0%, #1D150A 62%, #0E0B07 100%);
}
.art-k{ /* The toast — one raised glass */
  aspect-ratio: 4/5;
  background:
    radial-gradient(5px 9px at 58% 38%, rgba(242,212,132,.9), transparent 100%),
    radial-gradient(35% 28% at 55% 44%, rgba(226,178,88,.22), transparent 75%),
    radial-gradient(70% 45% at 50% 108%, rgba(210,156,62,.30), transparent 70%),
    linear-gradient(180deg, #120E09 0%, #191309 60%, #0D0A07 100%);
}
.art-l{ /* The last dance — slow-shutter streaks */
  aspect-ratio: 3/4;
  background:
    linear-gradient(88deg, transparent 20%, rgba(238,200,112,.20) 30%, transparent 44%),
    linear-gradient(92deg, transparent 48%, rgba(238,200,112,.13) 58%, transparent 74%),
    linear-gradient(86deg, transparent 68%, rgba(238,200,112,.18) 78%, transparent 90%),
    radial-gradient(60% 40% at 50% 60%, rgba(206,150,58,.16), transparent 78%),
    linear-gradient(180deg, #110E09 0%, #17110A 55%, #0C0A07 100%);
}
.art-m{ /* Jeelakarra bellam — two pools of warmth at crown height */
  aspect-ratio: 4/5;
  background:
    radial-gradient(26% 18% at 38% 34%, rgba(236,198,110,.42), transparent 72%),
    radial-gradient(26% 18% at 64% 36%, rgba(236,198,110,.34), transparent 72%),
    linear-gradient(180deg, transparent 46%, rgba(214,160,66,.16) 56%, transparent 68%),
    linear-gradient(180deg, #251B0E 0%, #140F09 60%, #0C0A07 100%);
}
.art-n{ /* Talambralu — rice mid-air over two crowns */
  aspect-ratio: 3/4;
  background:
    radial-gradient(2px 3px at 18% 18%, rgba(242,228,196,.9), transparent 100%),
    radial-gradient(2px 2px at 30% 30%, rgba(242,228,196,.65), transparent 100%),
    radial-gradient(3px 4px at 44% 14%, rgba(242,228,196,.85), transparent 100%),
    radial-gradient(2px 3px at 58% 26%, rgba(242,228,196,.7), transparent 100%),
    radial-gradient(2px 2px at 70% 16%, rgba(242,228,196,.8), transparent 100%),
    radial-gradient(3px 3px at 82% 28%, rgba(242,228,196,.6), transparent 100%),
    radial-gradient(2px 3px at 36% 42%, rgba(242,228,196,.5), transparent 100%),
    radial-gradient(2px 2px at 64% 44%, rgba(242,228,196,.45), transparent 100%),
    radial-gradient(40% 28% at 50% 62%, rgba(226,178,88,.26), transparent 75%),
    linear-gradient(180deg, #17110A 0%, #1E160C 55%, #0D0A07 100%);
}
.art-o{ /* Sangeet, song three — beams over the dance floor */
  aspect-ratio: 1/1;
  background:
    conic-gradient(from 210deg at 30% 12%, transparent 0 40deg, rgba(238,200,112,.16) 46deg 52deg, transparent 58deg),
    conic-gradient(from 150deg at 76% 8%, transparent 0 30deg, rgba(238,200,112,.12) 36deg 44deg, transparent 50deg),
    radial-gradient(45% 35% at 50% 74%, rgba(216,160,66,.3), transparent 70%),
    linear-gradient(180deg, #120E08 0%, #1B140A 60%, #0C0A07 100%);
}
.art-p{ /* Rain outside the registry — one umbrella, wet stone */
  aspect-ratio: 3/4;
  background:
    repeating-linear-gradient(102deg, transparent 0 9px, rgba(214,206,190,.05) 9px 10px),
    radial-gradient(50% 35% at 50% 30%, rgba(206,198,182,.14), transparent 75%),
    radial-gradient(30% 20% at 50% 78%, rgba(226,186,100,.14), transparent 75%),
    linear-gradient(180deg, #1C1A16 0%, #12100C 58%, #0C0B09 100%);
}
.art-q{ /* The awards night — a single spotlight cone */
  aspect-ratio: 5/4;
  background:
    conic-gradient(from 172deg at 46% -10%, transparent 0 4deg, rgba(238,204,116,.22) 8deg 16deg, transparent 20deg),
    radial-gradient(26% 12% at 48% 66%, rgba(238,204,116,.28), transparent 75%),
    linear-gradient(180deg, #0E0B08 0%, #15100A 62%, #0C0A07 100%);
}
.art-r{ /* South Bank, blue hour — river shimmer */
  aspect-ratio: 3/2;
  background:
    linear-gradient(180deg, transparent 55%, rgba(236,200,120,.10) 56%, transparent 60%),
    linear-gradient(180deg, transparent 63%, rgba(236,200,120,.14) 64%, transparent 69%),
    linear-gradient(180deg, transparent 72%, rgba(236,200,120,.08) 73%, transparent 79%),
    radial-gradient(4px 4px at 22% 40%, rgba(240,208,128,.8), transparent 100%),
    radial-gradient(3px 3px at 66% 36%, rgba(240,208,128,.7), transparent 100%),
    radial-gradient(4px 4px at 84% 42%, rgba(240,208,128,.75), transparent 100%),
    linear-gradient(180deg, #14120E 0%, #100D09 50%, #0C0A08 100%);
}

/* --- real frames — duotone-graded photographs sit in the same
       .ph frame system: grain + vignette overlays apply unchanged --- */
.ph > img{
  display: block;
  width: 100%;
  height: auto;
}

/* --- frame captions --- */
.item figcaption{
  position: absolute; inset: auto 0 0 0;
  z-index: 3;
  padding: 2.6rem 1.1rem .95rem;
  background: linear-gradient(180deg, transparent 0%, rgba(10,9,7,.82) 55%, rgba(10,9,7,.95) 100%);
}
.item figcaption h3{
  font-size: 1.08rem;
  letter-spacing: .03em;
  margin-bottom: .1rem;
  color: var(--bone);
}
.cap-story{
  color: var(--dim);
  font-size: .86rem;
  line-height: 1.5;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--t-reveal) var(--ease), opacity var(--t-reveal) var(--ease),
              margin var(--t-reveal) var(--ease);
}
.item:hover .cap-story,
.item:focus .cap-story,
.item:focus-within .cap-story{
  max-height: 4.6em;
  opacity: 1;
  margin-bottom: .35rem;
}
.cap-exif{
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--gold);
  margin-top: .25rem;
}
.cap-index{
  position: absolute;
  top: .7rem; right: .8rem;
  z-index: 3;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  color: rgba(237,230,217,.75);
}
.work-note{
  margin-top: 2.4rem;
  text-align: center;
}

/* ---------- Kind words ---------- */
.words-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
@media (max-width: 880px){ .words-grid{ grid-template-columns: 1fr; } }
.word{
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 2rem 1.9rem 1.7rem;
  position: relative;
  transition: border-color var(--t-quick) var(--ease);
}
.sec-alt .word{ background: var(--ink); }
.word:hover{ border-color: var(--gold-deep); }
.word::before{
  content:"\201C";
  font-family: var(--display);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--gold);
  opacity: .55;
  display: block;
  margin-bottom: .4rem;
}
.word blockquote{
  border: none; margin: 0 0 1.2rem;
  color: var(--bone);
  font-size: 1rem;
  line-height: 1.7;
}
.word cite{
  font-style: normal;
  display: block;
}
.word cite strong{
  display: block;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .05em;
  font-size: .98rem;
  color: var(--gold-soft);
}
.word cite span{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--faint);
}

/* ---------- FAQ ---------- */
.faq-list{ max-width: 780px; }
.faq-item{
  border-bottom: 1px solid var(--line);
}
.faq-item:first-child{ border-top: 1px solid var(--line); }
.faq-q{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem;
  text-align: left;
  padding: 1.35rem .2rem;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  letter-spacing: .02em;
  color: var(--bone);
  transition: color var(--t-quick) var(--ease);
}
.faq-q:hover{ color: var(--gold-soft); }
.faq-q svg{
  width: 18px; height: 18px; flex: none;
  stroke: var(--gold);
  transition: transform var(--t-reveal) var(--ease);
}
.faq-item.open .faq-q svg{ transform: rotate(180deg); }
.faq-a{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-reveal) var(--ease);
}
.faq-item.open .faq-a{ grid-template-rows: 1fr; }
.faq-a-inner{ overflow: hidden; }
.faq-a p{
  color: var(--dim);
  padding: 0 .2rem 1.5rem;
  max-width: 64ch;
}

/* ---------- Response-promise chip (contact) ---------- */
.reply-chip{
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .45rem 1rem;
  margin-bottom: 1.2rem;
  color: var(--dim);
}
.reply-chip[hidden]{ display: none; } /* author display would otherwise beat [hidden] */
.reply-chip::before{
  content:"";
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(217,164,65,.7);
}

/* ---------- Enquiry form ---------- */
.enq-grid{
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 920px){ .enq-grid{ grid-template-columns: 1fr; } }
.enq-side h2{ margin: .9rem 0 1.1rem; }
.enq-side p{ color: var(--dim); margin-bottom: 1.1rem; max-width: 46ch; }
.enq-side .mono-note{ display: block; margin-top: 1.6rem; }
.enq-form{
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
}
.sec-alt .enq-form{ background: var(--ink); }
.f-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
@media (max-width: 620px){ .f-row{ grid-template-columns: 1fr; } }
.f-field{ margin-bottom: 1.15rem; }
.f-field label{
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .45rem;
}
.f-field label em{ color: var(--gold); font-style: normal; }
.f-field input,
.f-field select,
.f-field textarea{
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--bone);
  font: inherit;
  font-size: .96rem;
  padding: .75rem .9rem;
  transition: border-color var(--t-quick) var(--ease);
}
.sec-alt .enq-form .f-field input,
.sec-alt .enq-form .f-field select,
.sec-alt .enq-form .f-field textarea{ background: var(--ink-2); }
.f-field select{
  appearance: none;
  padding-right: 2.5rem; /* keep option text clear of the chevron */
  background-image: linear-gradient(45deg, transparent 49%, var(--gold) 50%),
                    linear-gradient(-45deg, transparent 49%, var(--gold) 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.f-field input::placeholder, .f-field textarea::placeholder{ color: var(--faint); }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus{
  border-color: var(--gold);
  outline: none;
}
.f-field input:focus-visible, .f-field select:focus-visible, .f-field textarea:focus-visible{
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.f-field textarea{ min-height: 120px; resize: vertical; }
.f-field.err input, .f-field.err select, .f-field.err textarea{ border-color: #C4694E; }
.f-msg{
  display: none;
  font-size: .78rem;
  color: #E0937B;
  margin-top: .35rem;
}
.f-field.err .f-msg{ display: block; }
.f-field input[type="date"]{ color-scheme: dark; }
.enq-form .btn{ width: 100%; margin-top: .4rem; }
.f-privacy{
  margin-top: .9rem;
  font-size: .78rem;
  color: var(--faint);
  text-align: center;
}
.form-success{
  display: none;
  text-align: center;
  padding: 2.5rem 1rem;
}
.form-success svg{
  width: 56px; height: 56px;
  stroke: var(--gold);
  margin: 0 auto 1.3rem;
}
.form-success h3{ font-size: 1.5rem; margin-bottom: .7rem; }
.form-success p{ color: var(--dim); max-width: 40ch; margin-inline: auto; }
.enq-form.sent form{ display: none; }
.enq-form.sent .form-success{ display: block; }
.form-error{
  font-size: .85rem;
  color: #E0937B;
  margin-top: .8rem;
  text-align: center;
}
.enq-form .btn[disabled]{ opacity: .6; cursor: default; transform: none; }

/* ---------- Closing CTA band ---------- */
.cta-band{ text-align: center; }
.cta-band .cta-inner{ max-width: 640px; margin-inline: auto; }
.cta-band h2{ margin: .9rem 0 1rem; }
.cta-band p{ color: var(--dim); margin-inline: auto; max-width: 52ch; }
.cta-band .cta-actions{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  margin-top: 1.8rem;
}
.cta-band .mono-note{ display: block; margin-top: 1.6rem; }

/* ---------- Footer ---------- */
.footer{
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  position: relative;
  z-index: 1;
}
.foot-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (max-width: 880px){ .foot-grid{ grid-template-columns: 1fr; gap: 2.2rem; } }
.foot-brand .wordmark{ margin-bottom: 1.1rem; }
.foot-brand p{ color: var(--dim); font-size: .92rem; max-width: 40ch; }
.foot-h{
  font-family: var(--display);
  font-size: .74rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.foot-list{ list-style: none; }
.foot-list li{ margin-bottom: .55rem; }
.foot-list a{ color: var(--dim); font-size: .92rem; transition: color var(--t-quick) var(--ease); }
.foot-list a:hover{ color: var(--bone); }
.foot-list .mono-note{ color: var(--faint); }
address{ font-style: normal; color: var(--dim); font-size: .92rem; line-height: 1.9; }
address a{ color: var(--dim); }
address a:hover{ color: var(--gold-soft); }
.foot-bar{
  border-top: 1px solid var(--line);
  /* bottom clearance keeps the legal line out from under the floating
     WhatsApp / chat buttons at full scroll — at every width */
  padding: 1.3rem 0 5.25rem;
}
.foot-bar-inner{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 2rem;
  font-size: .8rem;
  color: var(--faint);
}
.foot-bar a{ color: var(--dim); }
.foot-bar a:hover{ color: var(--gold-soft); }

/* ---------- Floating: WhatsApp (left) ---------- */
.wa-fab{
  position: fixed;
  left: 1.1rem; bottom: 1.1rem;
  z-index: 900;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--bone);
  border-radius: var(--r-pill);
  padding: .72rem;
  transition: border-color var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.wa-fab svg{ width: 24px; height: 24px; fill: #43C554; flex: none; }
.wa-fab .wa-label{
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: .85rem; font-weight: 600;
  transition: max-width .3s var(--ease), margin .3s var(--ease);
}
.wa-fab:hover, .wa-fab:focus-visible{ border-color: #43C554; transform: translateY(-2px); color: var(--bone); }
.wa-fab:hover .wa-label, .wa-fab:focus-visible .wa-label{ max-width: 170px; margin-right: .35rem; }

/* ---------- Floating: Lumo chat (right) ---------- */
.chat-fab{
  position: fixed;
  right: 1.1rem; bottom: 1.1rem;
  z-index: 900;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: .78rem 1.25rem .78rem .95rem;
  font-weight: 700; font-size: .92rem;
  box-shadow: 0 8px 28px rgba(217,164,65,.25);
  transition: transform var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.chat-fab svg{ width: 22px; height: 22px; stroke: var(--ink); flex: none; }
.chat-fab:hover{ background: var(--gold-soft); transform: translateY(-2px); }

.chat-panel{
  position: fixed;
  right: 1.1rem; bottom: 5.4rem;
  z-index: 950;
  width: min(390px, calc(100vw - 2.2rem));
  height: min(600px, calc(100dvh - 7rem));
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(.98);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
}
.chat-panel.open{
  opacity: 1; visibility: visible;
  transform: none;
}
.chat-head{
  display: flex; align-items: center; gap: .8rem;
  padding: .95rem 1.1rem;
  background: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.chat-avatar{
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--gold);
  display: grid; place-items: center;
}
.chat-avatar svg{ width: 22px; height: 22px; stroke: var(--ink); }
.chat-id{ flex: 1; min-width: 0; }
.chat-id strong{
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .06em;
}
.chat-id span{
  display: block;
  font-size: .72rem;
  color: var(--dim);
}
.chat-status{
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #43C554;
  margin-right: .3rem;
}
.chat-close{
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--dim);
  transition: color var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.chat-close:hover{ color: var(--bone); background: rgba(237,230,217,.07); }
.chat-close svg{ width: 16px; height: 16px; stroke: currentColor; }

.chat-log{
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: .65rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.msg{
  max-width: 86%;
  padding: .68rem .95rem;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.6;
}
.msg.bot{
  align-self: flex-start;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  color: var(--bone);
}
.msg.user{
  align-self: flex-end;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  border-bottom-right-radius: 4px;
}
.msg .msg-link{
  display: inline-block;
  margin-top: .45rem;
  font-weight: 700;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-deep);
}
.msg .msg-link:hover{ color: var(--gold-soft); }
.msg.typing{
  display: inline-flex; gap: 5px; align-items: center;
  padding: .85rem 1rem;
}
.msg.typing i{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dim);
  animation: dotPulse 1.2s ease-in-out infinite;
}
.msg.typing i:nth-child(2){ animation-delay: .18s; }
.msg.typing i:nth-child(3){ animation-delay: .36s; }
@keyframes dotPulse{
  0%, 60%, 100%{ opacity: .3; transform: translateY(0); }
  30%{ opacity: 1; transform: translateY(-3px); }
}
.chip-row{
  display: flex; flex-wrap: wrap; gap: .45rem;
  padding: .55rem 1.1rem .7rem;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
}
.chip{
  font-size: .78rem; font-weight: 600;
  color: var(--gold);
  border: 1px solid var(--gold-deep);
  border-radius: var(--r-pill);
  padding: .34rem .85rem;
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.chip:hover{ background: var(--gold); color: var(--ink); }
.chat-form{
  display: flex; gap: .55rem;
  padding: .75rem 1.1rem;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
}
.chat-form input{
  flex: 1; min-width: 0;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--bone);
  font: inherit; font-size: .9rem;
  padding: .6rem 1rem;
}
.chat-form input:focus{ border-color: var(--gold); outline: none; }
.chat-form input::placeholder{ color: var(--faint); }
.chat-send{
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: var(--gold);
  display: grid; place-items: center;
  transition: background var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.chat-send:hover{ background: var(--gold-soft); transform: translateY(-1px); }
.chat-send svg{ width: 17px; height: 17px; stroke: var(--ink); }
.chat-credit{
  text-align: center;
  font-size: .68rem;
  color: var(--faint);
  padding: .5rem 1rem .7rem;
  background: var(--ink-2);
}
.chat-credit a{ color: var(--dim); }
.chat-credit a:hover{ color: var(--gold-soft); }

@media (max-width: 640px){
  .chat-panel{
    right: 0; bottom: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  body.chat-open{ overflow: hidden; }
  .wa-fab, .chat-fab{ bottom: .9rem; }
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{ opacity: 1; transform: none; }
.d1{ transition-delay: .08s; }
.d2{ transition-delay: .16s; }
.d3{ transition-delay: .24s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1 !important; transform: none !important; }
}

/* ---------- Honeypot ----------
   Off-screen for humans (never visible, never in the tab order);
   bots that autofill every field give themselves away. */
.hp-field{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Print helpers ---------- */
.print-only{ display: none; }

/* ============================================================
   Print — couples print the packages page for the kitchen table.
   Collections black-on-white, chrome and widgets hidden.
   ============================================================ */
@media print{
  *, *::before, *::after{
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }
  html, body{ background: #fff !important; }
  body{ font-size: 11pt; }
  body::before{ display: none; }

  /* chrome & widgets */
  .nav, .skip-link, .scroll-cue,
  .wa-fab, .chat-fab, .chat-panel,
  .hero-aperture, .page-aperture,
  .btn, .cta-band, .filters, .footer{ display: none !important; }

  /* reveals must not print invisible */
  .reveal{ opacity: 1 !important; transform: none !important; }

  /* compact rhythm on paper */
  .page-hero{ padding: 0 0 1rem; }
  .sec{ padding: 1.1rem 0; }
  .sec-head{ margin-bottom: 1.2rem; }

  a{ text-decoration: none; }
  svg{ stroke: #000 !important; }

  /* cards keep their edges and never split across pages */
  .pack, .inc, .city, .word, .terms-item, .faq-item{
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pack{ border: 1px solid #999 !important; margin-bottom: 1rem; }
  .pack.featured{ border: 1px solid #000 !important; }
  .pack-grid, .inc-grid, .travel-grid{ display: block; }
  .inc, .city{ border: 1px solid #ccc !important; margin-bottom: .8rem; }
  .pack-flag{
    position: static;
    display: inline-block;
    margin-bottom: .6rem;
    padding: 0;
    font-weight: 700;
  }
  .pack li{ border-bottom-color: #ddd !important; }

  /* print-only contact line */
  .print-only{
    display: block !important;
    margin: .4rem 0 1rem;
    font-family: var(--mono);
    font-size: .8rem;
    letter-spacing: .04em;
    text-align: center;
  }
}