@charset "UTF-8";
/* ==========================================================================
   Paintingwali — Archana Nakhua Bhanushali
   Palette and typographic feel take after Pahari (parchment + olive ink);
   motion and layout after Julien Calot (slow reveals, parallax, big type).
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Ink & paper */
  --ink:            #313927;   /* deep olive-black, the writing colour */
  /* The two muted inks are set by contrast, not by eye. At .62 and .34 they
     looked right and measured 3.5:1 and 1.9:1 against the parchment — the
     price and medium under every thumbnail were effectively unreadable.
     .85 and .76 clear 4.5:1 on the darkest panel the site uses. Hierarchy is
     carried by size, weight and letter-spacing instead of by fading text out;
     --ink-deco keeps the drawn ornaments light without dragging text with
     them. */
  --ink-soft:       rgba(49, 57, 39, .85);   /* secondary prose */
  --ink-faint:      rgba(49, 57, 39, .76);   /* labels, meta, captions */
  --ink-deco:       rgba(49, 57, 39, .30);   /* ornament line-work, not text */
  --ink-hairline:   rgba(49, 57, 39, .17);   /* rules only, never text */
  --ink-ghost:      rgba(49, 57, 39, .07);   /* fills only, never text */

  --paper:          #F1E7D4;   /* the page */
  --paper-warm:     #E9DCC3;   /* raised panels */
  --parchment:      #E4D3B5;   /* the reference parchment */
  --parchment-deep: #D5BF98;   /* wells, footers */

  /* Pigments, taken from the paintings themselves */
  --sindoor:        #A8341C;   /* vermilion — the Dwarkadhish saffron-red */
  --haldi:          #C08A2E;   /* turmeric gold — pichwai ground */
  --indigo:         #2B3A5C;   /* the night in Suryoday */
  --peacock:        #1E5A4C;   /* pichwai foliage */
  --lotus:          #C0697C;   /* lotus border pink */

  --accent:         var(--sindoor);

  /* Type */
  /* Kalnia carries the display voice; everything that has to be read at
     length is DM Sans — low contrast, quietly geometric, and legible in the
     letterspaced small caps the labels use as well as in paragraphs. One
     sans doing both jobs means three families on the page instead of four. */
  --f-display: "Kalnia", "Kalnia Fallback", Georgia, serif;
  --f-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-ui:      var(--f-body);
  --f-deva:    "Tiro Devanagari Hindi", "Kohinoor Devanagari", "Noto Sans Devanagari", serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --measure: 62ch;
  --rule: 1px solid var(--ink-hairline);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io:  cubic-bezier(.65, .05, .36, 1);
  --slow: .9s;
  --med: .55s;
  --fast: .28s;

  --header-h: 5.5rem;
  --logo-h: 2.5rem;
}

@media (max-width: 48rem) { :root { --header-h: 4.6rem; --logo-h: 2.05rem; } }

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1rem, .95rem + .2vw, 1.05rem);
  line-height: 1.68;
  font-weight: 350;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--sindoor); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--sindoor);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Paper texture ------------------------------------------------------- */
/* Procedural: a turbulence filter in an inline SVG data URI, so there is no
   texture image to download and it never tiles visibly. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* A second, much coarser layer gives the blotchy unevenness of real handmade
   paper — without it the grain reads as digital noise. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23m)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 900px 900px;
}

main, header, footer { position: relative; z-index: 1; }

/* Lenis ships these rules in its own stylesheet; the library is vendored as
   JS only, so they live here. Without them lenis-stopped does not actually
   lock the page behind the splash. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* --- Layout -------------------------------------------------------------- */

.wrap { width: min(100% - var(--gutter) * 2, 84rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--gutter) * 2, 52rem); }
.wrap--wide { width: min(100% - var(--gutter) * 2, 100rem); }

.section { padding-block: clamp(4.5rem, 10vw, 9.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.stack > * + * { margin-top: var(--s, 1.5rem); }

/* --- Typographic components ---------------------------------------------- */

.eyebrow {
  font-family: var(--f-ui);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.6rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink-hairline);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { display: none; }
.eyebrow--center::before {
  content: "❖";
  font-size: .8em;
  letter-spacing: 0;
  color: var(--ink-deco);
}

.display-xl { font-size: clamp(3rem, 11vw, 9.5rem); font-weight: 300; }
.display-l  { font-size: clamp(2.25rem, 6.2vw, 5rem); }
.display-m  { font-size: clamp(1.75rem, 3.6vw, 3rem); }
.display-s  { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }

.deva {
  font-family: var(--f-deva);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

.lede {
  font-size: clamp(1.075rem, 1rem + .55vw, 1.35rem);
  line-height: 1.6;
  font-weight: 350;
  color: var(--ink-soft);
  max-width: 46ch;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.15em; }
/* Section headings inside prose are h2 (outline) but sized as sub-heads. */
.prose h2, .prose h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 2.4em 0 .6em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.pull {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.28;
  font-weight: 300;
  color: var(--ink);
  border-left: 2px solid var(--sindoor);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  margin: clamp(2.5rem, 6vw, 4.5rem) 0;
  max-width: 30ch;
}
.pull cite {
  display: block;
  font-family: var(--f-ui);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.2rem;
}

/* --- Links & buttons ----------------------------------------------------- */

.link {
  font-family: var(--f-ui);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding-block: .35em;
  position: relative;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .3;
  transform-origin: right;
  transition: transform var(--med) var(--ease-out), opacity var(--med);
}
.link:hover::after { transform: scaleX(0); }
.link .arw { transition: transform var(--med) var(--ease-out); }
.link:hover .arw { transform: translateX(.4em); }

.btn {
  font-family: var(--f-ui);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.05em 2.2em;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--med) var(--ease-out), border-color var(--med);
}
/* The fill wipes up from the bottom, like ink soaking into the sheet. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--med) var(--ease-out);
}
.btn:hover { color: var(--paper); }
.btn:hover::before { transform: scaleY(1); }

.btn--solid { background: var(--sindoor); border-color: var(--sindoor); color: var(--paper); }
.btn--solid::before { background: var(--ink); }
.btn--solid:hover { border-color: var(--ink); }

.btn--wa { border-color: var(--peacock); color: var(--peacock); }
.btn--wa::before { background: var(--peacock); }
.btn--wa:hover { color: var(--paper); }

.btn[disabled], .btn.is-sold {
  border-color: var(--ink-faint);
  color: var(--ink-faint);
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Ornaments ----------------------------------------------------------- */
/* Line motifs drawn from pichwai borders — a lotus band and a cloud scroll. */

.orn { display: block; color: var(--ink-deco); }
.orn--rule {
  width: min(100%, 30rem);
  height: 2.15rem;
  margin: clamp(2.25rem, 5vw, 4rem) auto;
  color: var(--ink-deco);
}
.orn--lotus { height: 2.5rem; margin-inline: auto; }

.divider {
  border: 0;
  height: 1px;
  background: var(--ink-hairline);
  margin-block: clamp(2.5rem, 6vw, 5rem);
}

/* --- Splash -------------------------------------------------------------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--paper);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.splash[hidden] { display: none; }

.splash__inner {
  display: grid;
  place-items: center;
  gap: clamp(2rem, 6vh, 4rem);
  width: min(78vw, 34rem);
}

/* The logo is revealed by a gradient that sweeps left to right — the
   direction a hand actually writes it. The soft leading edge is what sells it
   as ink arriving rather than a bar sliding across. The letterforms come from
   the mask on the box; the sweep lives on the fill inside it. */
.splash__mark {
  position: relative;
  width: 100%;
  aspect-ratio: 898 / 371;
  -webkit-mask: var(--logo) no-repeat center / contain;
          mask: var(--logo) no-repeat center / contain;
}
.splash__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--ink) 0,
    var(--ink) calc(var(--draw, 0) * 1% - 5%),
    color-mix(in srgb, var(--ink) 45%, transparent) calc(var(--draw, 0) * 1% - 1%),
    transparent calc(var(--draw, 0) * 1% + 3%)
  );
}

.splash__count {
  font-family: var(--f-ui);
  font-size: .78rem;
  letter-spacing: .34em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* The curtain: two halves of parchment that part upward and downward. */
.splash.is-leaving { pointer-events: none; }
.splash__curtain {
  position: absolute;
  inset: 0;
  background: var(--paper);
  z-index: -1;
}

/* --- Header -------------------------------------------------------------- */

.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--med), box-shadow var(--med), transform var(--slow) var(--ease-out);
}
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity var(--med) var(--ease-out), border-color var(--med);
}
.hdr.is-stuck::before { opacity: 1; border-bottom-color: var(--ink-hairline); }
.hdr.is-hidden { transform: translateY(-102%); }

.hdr__in {
  position: relative;
  width: min(100% - var(--gutter) * 2, 100rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand__mark {
  /* Sized by height, not width. Sizing by width meant the mark's computed
     height landed on the header height exactly, so it touched both edges. */
  height: var(--logo-h);
  width: calc(var(--logo-h) * 898 / 371);
  background: var(--ink);
  -webkit-mask: var(--logo) no-repeat center / contain;
          mask: var(--logo) no-repeat center / contain;
  transition: opacity var(--fast);
}
.brand:hover .brand__mark { opacity: .62; }

/* Over the hero photograph, ink-on-paper is unreadable — the header flips to
   paper-on-image until the page scrolls under it. */
.hdr--invert .brand__mark { background: var(--paper); }
.hdr--invert .nav__link,
.hdr--invert .nav__link[aria-current="page"] { color: var(--paper); }
.hdr--invert .burger span,
.hdr--invert .burger span::before,
.hdr--invert .burger span::after { background: var(--paper); }
.hdr--invert .drop__link,
.hdr--invert .drop__all { color: var(--ink); }

/* The mobile menu covers the hero with parchment, so the inverted header has
   to come back to ink or the logo and the close button disappear into it. */
body.menu-open .hdr--invert .brand__mark { background: var(--ink); }
body.menu-open .hdr--invert .nav__link { color: var(--ink); }
body.menu-open .hdr--invert .burger span::before,
body.menu-open .hdr--invert .burger span::after { background: var(--ink); }

/* Nav */
.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.nav__item { position: relative; }

.nav__link {
  font-family: var(--f-ui);
  font-size: .8rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-block: .5rem;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .1rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--med) var(--ease-out);
}
.nav__link:hover::after,
.nav__item.is-open > .nav__link::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--sindoor); }

.nav__caret { transition: transform var(--med) var(--ease-out); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

/* Dropdown */
.drop {
  position: absolute;
  top: calc(100% + 1.1rem);
  left: 50%;
  translate: -50% 0;
  min-width: 22rem;
  background: var(--paper-warm);
  border: var(--rule);
  box-shadow: 0 1.5rem 3.5rem rgba(49, 57, 39, .13);
  padding: .6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.55rem);
  transition: opacity var(--med) var(--ease-out),
              transform var(--med) var(--ease-out),
              visibility var(--med);
}
.nav__item.is-open .drop { opacity: 1; visibility: visible; transform: none; }

.drop__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .8rem 1rem;
  text-decoration: none;
  position: relative;
  transition: background var(--fast);
}
.drop__link:hover { background: var(--ink-ghost); }
.drop__name { font-family: var(--f-display); font-size: 1.075rem; }
.drop__deva { font-family: var(--f-deva); font-size: .85rem; color: var(--ink-faint); }
.drop__all {
  display: block;
  margin-top: .35rem;
  padding: .85rem 1rem;
  border-top: var(--rule);
  font-family: var(--f-ui);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color var(--fast);
}
.drop__all:hover { color: var(--sindoor); }

/* Burger */
.burger {
  display: none;
  width: 2.5rem; height: 2.5rem;
  border: 0; background: none; padding: 0;
  cursor: pointer;
  place-items: center;
}
.burger span {
  display: block;
  width: 1.5rem; height: 1px;
  background: var(--ink);
  position: relative;
  transition: background var(--fast);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 100%; height: 1px; background: var(--ink);
  transition: transform var(--med) var(--ease-out);
}
.burger span::before { top: -.4rem; }
.burger span::after  { top: .4rem; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { transform: translateY(.4rem) rotate(45deg); }
body.menu-open .burger span::after  { transform: translateY(-.4rem) rotate(-45deg); }

/* --- Mobile menu --------------------------------------------------------- */

.mnav {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: var(--parchment);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--slow) var(--ease-io);
  visibility: hidden;
}
body.menu-open .mnav { clip-path: inset(0 0 0 0); visibility: visible; }

.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__list > li { border-bottom: var(--rule); }
.mnav__a {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 8vw, 2.9rem);
  text-decoration: none;
  padding: .55em 0;
}
.mnav__sub { list-style: none; margin: 0 0 1.4rem; padding: 0 0 0 1.2rem; }
.mnav__sub a {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-ui);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: .55em 0;
}
.mnav__foot {
  margin-top: 3rem;
  font-family: var(--f-ui);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
}
.mnav__foot a { text-decoration: none; display: block; padding: .3rem 0; }

@media (max-width: 62rem) {
  .nav { display: none; }
  .burger { display: grid; }
}

/* --- Hero: the pinned banner stage --------------------------------------- */
/* The section is several viewports tall; the panel inside it sticks for the
   whole of that height. Scrolling therefore moves through the banners while
   the screen holds still, and releases into the next section after the last
   one. The tall height is set by script, so with JavaScript off this is an
   ordinary one-screen hero rather than four screens of nothing. */

.stage {
  position: relative;
  min-height: 100svh;
}

.stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  align-items: end;
  padding-bottom: clamp(5.5rem, 14vh, 9rem);
}

.stage__panels { position: absolute; inset: 0; z-index: 0; }

.stage__panel {
  position: absolute;
  inset: 0;
  margin: 0;
  will-change: opacity, transform;
}
.stage__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.97) contrast(1.02);
}

.stage__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Dark only where type sits — a band at the foot and a lighter one at the
     head for the navigation. The middle of the painting is left alone. */
  background: linear-gradient(to top,
    rgba(30,35,23,.82) 0%,
    rgba(30,35,23,.44) 22%,
    rgba(30,35,23,.06) 48%,
    rgba(30,35,23,.02) 66%,
    rgba(30,35,23,.42) 100%);
}

.stage__body { position: relative; z-index: 2; color: var(--paper); }
/* Keep the headline block clear of the caption and dots on the right. */
@media (min-width: 62rem) { .stage__body { padding-right: 20rem; } }

/* Per-panel caption, bottom right */
.stage__cap {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(5.5rem, 14vh, 9rem);
  z-index: 2;
  text-align: right;
  max-width: 16rem;
  font-family: var(--f-ui);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(241, 231, 212, .68);
  text-decoration: none;
  line-height: 1.6;
}
.stage__cap b { display: block; font-weight: 400; color: rgba(241, 231, 212, .95); }
a.stage__cap:hover b { text-decoration: underline; text-underline-offset: .35em; }
@media (max-width: 48rem) { .stage__cap { display: none; } }

/* Panel counter and dots, right edge */
.stage__nav {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  display: grid;
  gap: .85rem;
  justify-items: center;
}
.stage__nav button {
  width: 1.9rem;
  height: 1px;
  padding: 0;
  border: 0;
  background: rgba(241, 231, 212, .35);
  cursor: pointer;
  transition: background var(--med), width var(--med) var(--ease-out);
}
.stage__nav button[aria-current="true"] { background: var(--paper); width: 3rem; }
@media (max-width: 48rem) {
  .stage__nav { right: auto; left: 50%; translate: -50% 0; top: auto;
                bottom: 3.4rem; grid-auto-flow: column; }
}

.hero__title { font-weight: 300; color: var(--paper); }
.hero__sub {
  font-family: var(--f-ui);
  font-size: clamp(.78rem, 1.6vw, .98rem);
  letter-spacing: .16em;
  color: rgba(241, 231, 212, .82);
  margin-top: 1.6rem;
}
.hero__deva {
  font-family: var(--f-deva);
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(241, 231, 212, .78);
  margin-bottom: 1rem;
}

.hero__scroll {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  translate: -50% 0;
  z-index: 3;
  font-family: var(--f-ui);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(241, 231, 212, .7);
  display: grid;
  justify-items: center;
  gap: .7rem;
  transition: opacity var(--med);
}
.stage.is-through .hero__scroll { opacity: 0; }
.hero__scroll i {
  display: block;
  width: 1px; height: 2.6rem;
  background: linear-gradient(rgba(241,231,212,.75), transparent);
  animation: dripDown 2.4s var(--ease-io) infinite;
  transform-origin: top;
}
@keyframes dripDown {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(2.6rem); opacity: 0; }
}

@media (max-width: 48rem) { .hero__scroll { display: none; } }

/* One still banner, no pinning, when motion is not wanted. */
@media (prefers-reduced-motion: reduce) {
  .stage { height: 100svh !important; }
  .stage__panel { opacity: 0 !important; }
  .stage__panel[data-panel="0"] { opacity: 1 !important; }
  .stage__nav { display: none; }
}

/* --- Page head (inner pages) --------------------------------------------- */

.phead {
  padding-top: calc(var(--header-h) + clamp(3.5rem, 9vw, 7rem));
  padding-bottom: 0;
}
/* A page head is already a large block of space; the section that follows it
   should not add its own full measure on top. */
.phead + .section,
.phead + .section--tight { padding-top: clamp(2rem, 4.5vw, 3.5rem); }
.phead__deva { font-family: var(--f-deva); color: var(--ink-faint); font-size: 1.1rem; margin-bottom: .8rem; }
.phead__lede { margin-top: 1.8rem; }

.crumbs {
  font-family: var(--f-ui);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--sindoor); }

/* --- Collection cards ---------------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* Five collections on a three-column grid would leave a hole in the second
   row. On wide screens the grid becomes six narrow columns: the first three
   cards take two each, the last two take three each, so both rows fill. The
   wider pair is given a squatter ratio so the two rows end up the same height. */
@media (min-width: 70rem) {
  .cols { grid-template-columns: repeat(6, 1fr); }
  .cols > .col-card { grid-column: span 2; }
  .cols > .col-card:nth-last-child(-n + 2) { grid-column: span 3; aspect-ratio: 1.234; }
}

.col-card {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  background: var(--parchment);
  aspect-ratio: 4 / 5;
}
.col-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter var(--slow);
  filter: saturate(.92);
}
.col-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(49,57,39,.86) 4%, rgba(49,57,39,.22) 48%, rgba(49,57,39,.06) 100%);
  transition: opacity var(--slow);
}
.col-card:hover .col-card__img { transform: scale(1.055); filter: saturate(1.02); }

.col-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--paper);
}
.col-card__deva { font-family: var(--f-deva); font-size: .9rem; opacity: .72; }
.col-card__name { font-family: var(--f-display); font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: .2rem; }
.col-card__blurb {
  font-size: .93rem;
  line-height: 1.6;
  color: rgba(241,231,212,.78);
  margin-top: .8rem;
  max-width: 34ch;
  /* Held back until hover — keeps the grid calm at rest. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--slow) var(--ease-out), opacity var(--med), margin var(--slow) var(--ease-out);
}
.col-card:hover .col-card__blurb,
.col-card:focus-visible .col-card__blurb { max-height: 8rem; opacity: 1; }
@media (hover: none) {
  .col-card__blurb { max-height: 8rem; opacity: 1; }
}

/* --- Work grid ----------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 3.25rem) clamp(1.25rem, 2.4vw, 2.5rem);
  align-items: start;
}

.tile { display: block; text-decoration: none; position: relative; }

.tile__frame {
  position: relative;
  overflow: hidden;
  /* Every tile is the same box, so the grid reads as a grid. The painting is
     shown whole inside it rather than cropped to fit — a 12 x 60 pichwai
     panel cropped square would stop being the painting. The mount is what
     makes the leftover space look deliberate. */
  aspect-ratio: 4 / 5;
  background: var(--paper-warm);
  /* One explicit cell that fills the mount. It has to be explicit: with an
     auto column the cell is sized from the image's intrinsic width, which is
     zero until the (lazy) image loads — so the whole mount collapsed to its
     padding. And it has to be a definite cell, because the image's height:100%
     needs something real to resolve against; without it a 1:3 panel computed
     950px tall inside a 460px mount and was clipped by the overflow. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  padding: clamp(.9rem, 2.2vw, 1.6rem);
}
/* Single column on a phone means each mount is nearly full width, and a 4:5
   box around a landscape painting leaves a great deal of empty parchment.
   Squarer there — still uniform, just less air. */
@media (max-width: 48rem) {
  .tile__frame { aspect-ratio: 1 / 1; }
}
.tile__frame img {
  /* A definite box with object-fit, rather than letting the image size
     itself. With `width:auto` and a srcset, the layout size is derived from
     the `sizes` hint, so every tile came out at whatever that hint said
     instead of filling the mount. drop-shadow (not box-shadow) is what keeps
     the shadow hugging the painted area rather than the transparent box. */
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 .4rem 1.1rem rgba(49, 57, 39, .26));
  transition: transform 1.05s var(--ease-out), filter var(--slow);
}
.tile:hover .tile__frame img {
  transform: scale(1.035);
  filter: drop-shadow(0 .7rem 1.7rem rgba(49, 57, 39, .34));
}

/* A hairline that draws itself across the image on hover. */
.tile__frame::after {
  content: "";
  position: absolute;
  inset: .5rem;
  border: 1px solid var(--ink-hairline);
  opacity: 0;
  transform: scale(1.02);
  transition: opacity var(--med), transform var(--med) var(--ease-out);
  pointer-events: none;
}
.tile:hover .tile__frame::after { opacity: 1; transform: none; }

.tile__meta { padding-top: 1.05rem; display: grid; gap: .3rem; }
.tile__name { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.25; }
.tile__deva { font-family: var(--f-deva); font-size: .85rem; color: var(--ink-faint); }
.tile__sub {
  font-family: var(--f-ui);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  margin-top: .25rem;
}
.tile__price { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Availability filter on a collection page */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.filters button {
  font-family: var(--f-ui);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--ink-hairline);
  color: var(--ink-soft);
  padding: .7em 1.3em;
  cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.filters button:hover { border-color: var(--ink-faint); color: var(--ink); }
.filters button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.tag {
  font-family: var(--f-ui);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .28em .7em;
  border: 1px solid currentColor;
  line-height: 1;
}
.tag--sold { color: var(--sindoor); }
.tag--comm { color: var(--indigo); }
.tag--print { color: var(--peacock); }

.tile__badge {
  position: absolute;
  top: .7rem; left: .7rem;
  z-index: 3;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-ui);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .4em .8em;
}

/* --- Work detail --------------------------------------------------------- */

.work {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: 1fr;
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem));
}
@media (min-width: 62rem) {
  .work { grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .65fr); align-items: start; }
}

.work__figure { position: relative; margin: 0; }
.work__img {
  width: 100%;
  background: var(--parchment);
  cursor: zoom-in;
}
.work__cap {
  font-family: var(--f-ui);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .9rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.work__panel { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 62rem) { .work__panel { position: static; } }

.work__title { font-size: clamp(2rem, 4.6vw, 3.25rem); }
.work__deva { font-family: var(--f-deva); font-size: 1.15rem; color: var(--ink-soft); margin-bottom: .5rem; }
.work__caption { margin-top: 1.5rem; color: var(--ink-soft); }

.specs { margin: 2.25rem 0 0; display: grid; }
.specs div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: .85rem 0;
  border-top: var(--rule);
}
.specs div:last-child { border-bottom: var(--rule); }
.specs dt {
  font-family: var(--f-ui);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: .25em;
}
.specs dd { margin: 0; }

.price {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-top: 2rem;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.price small {
  font-family: var(--f-ui);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.price--sold { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }

/* Print size/price table */
.tariff { width: 100%; border-collapse: collapse; margin-top: 1.75rem; }
.tariff caption {
  text-align: left;
  font-family: var(--f-ui);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: .9rem;
}
.tariff th, .tariff td {
  text-align: left;
  padding: .7rem .5rem .7rem 0;
  border-bottom: var(--rule);
  font-size: .95rem;
}
.tariff th {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tariff td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tariff td.sub { color: var(--ink-faint); font-size: .82rem; }
.tariff__note {
  font-size: .85rem;
  color: var(--ink-faint);
  margin-top: 1rem;
  font-style: italic;
}

.work__actions { display: grid; gap: .8rem; margin-top: 2.25rem; }
@media (min-width: 30rem) { .work__actions { grid-template-columns: 1fr 1fr; } }
.work__actions .btn { width: 100%; }

.work__reassure {
  font-size: .85rem;
  color: var(--ink-faint);
  margin-top: 1.4rem;
  line-height: 1.6;
}

/* Lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--med), visibility var(--med);
  cursor: zoom-out;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb img { max-width: 100%; max-height: 92vh; object-fit: contain; }
.lb__close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: none; border: 0;
  color: var(--paper);
  font-family: var(--f-ui);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --- Featured strip (home) ----------------------------------------------- */

.strip { overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem); }
.strip__track {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  width: max-content;
  will-change: transform;
}
.strip__item { width: clamp(14rem, 24vw, 22rem); flex: none; }
.strip__item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.strip__cap {
  font-family: var(--f-ui);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .8rem;
}

/* --- Split feature ------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-l { grid-template-columns: 1.25fr 1fr; }
  .split--wide-r { grid-template-columns: 1fr 1.25fr; }
  .split--flip > :first-child { order: 2; }
}
.split__media { position: relative; overflow: hidden; }
.split__media img { width: 100%; will-change: transform; }

/* A portrait-orientation photograph next to a short block of text leaves a
   long run of empty page beside it. Cropping to a square keeps the pair
   level without shrinking the picture. */
.split__media--crop img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 32%;
}

/* --- About: the opening lattice ------------------------------------------ */
/* Six tiles that fly in from scattered 3D positions and land in a symmetric
   grid, staggered outward from the middle. The displacement per tile comes
   from --rx/--ry/--tz in the markup; --e is the tile's own eased progress,
   written by script. At --e:1 every transform resolves to nothing, so the
   finished state is a plain grid. */

.lattice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.8vw, 1.5rem);
  perspective: 1300px;
  perspective-origin: 50% 45%;
  margin-bottom: clamp(3rem, 8vw, 7rem);
}
@media (max-width: 46rem) { .lattice { grid-template-columns: repeat(2, 1fr); } }

.lattice__tile {
  --e: 1;                       /* script drives this from 0 to 1 */
  display: block;
  text-decoration: none;
  position: relative;
  transform-style: preserve-3d;
  transform:
    translateZ(calc(var(--tz, 0px) * (1 - var(--e))))
    rotateX(calc(var(--rx, 0deg) * (1 - var(--e))))
    rotateY(calc(var(--ry, 0deg) * (1 - var(--e))))
    scale(calc(0.4 + 0.6 * var(--e)));
  opacity: var(--e);
  will-change: transform, opacity;
}

.lattice__frame {
  display: block;
  overflow: hidden;
  background: var(--paper-warm);
  aspect-ratio: 1;
}
.lattice__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95);
  transition: transform 1.1s var(--ease-out), filter var(--slow);
}
.lattice__tile:hover .lattice__frame img { transform: scale(1.06); filter: saturate(1.02); }

.lattice__name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem .9rem .8rem;
  font-family: var(--f-ui);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(to top, rgba(30, 35, 23, .8), transparent);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity var(--med), transform var(--med) var(--ease-out);
}
.lattice__tile:hover .lattice__name,
.lattice__tile:focus-visible .lattice__name { opacity: 1; transform: none; }

/* The quote lands once the tiles have — its lines are held down until the
   script adds .is-in, which the reveal rules for .ln already act on. */
.lattice__quote {
  margin: 0 auto;
  max-width: 30ch;
  text-align: center;
}
.lattice__quote p {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  margin: 0;
}

/* Without script, or without motion, the grid is simply a grid. */
.js-off .lattice__tile { --e: 1; }
@media (prefers-reduced-motion: reduce) {
  .lattice__tile { --e: 1 !important; transform: none !important; opacity: 1 !important; }
}

/* --- About ---/* --- About --------------------------------------------------------------- */

.about { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 62rem) {
  .about { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
  .about__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

.about__portrait { margin: 0 0 2.5rem; }
.about__portrait img {
  width: 100%;
  /* The only photograph of the artist is portrait-orientation; left
     unconstrained it swamps the page, so it is capped and cropped from the
     top, where the faces are. */
  max-height: 62svh;
  object-fit: cover;
  object-position: 50% 22%;
}
.about__portrait figcaption {
  font-family: var(--f-ui);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .9rem;
  line-height: 1.5;
}

.about__sec + .about__sec { margin-top: clamp(2.75rem, 6vw, 4.5rem); }
.about__sec .pull { margin-block: clamp(2rem, 4vw, 3rem); }

/* --- Atelier / journal --------------------------------------------------- */

.journal { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.entry {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: var(--rule);
}
@media (min-width: 52rem) {
  .entry { grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}
.entry__when {
  font-family: var(--f-ui);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: .4rem;
}
.entry__title { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: .8rem; }
.entry__media { margin: 0; }
.entry__media img { width: 100%; }

/* A panoramic work gets the full measure and its text centred beneath it,
   rather than being squeezed into a side column where it renders as a strip. */
.entry--wide { display: block; text-align: center; }
.entry--wide .entry__media { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.entry--wide .entry__media img {
  width: 100%;
  background: var(--paper-warm);
  box-shadow: 0 .6rem 2rem rgba(49, 57, 39, .16);
}
.entry--wide .entry__body {
  max-width: 54ch;
  margin-inline: auto;
}
.entry--wide .entry__when { padding-top: 0; margin-bottom: .9rem; }
.entry--wide .entry__title { margin-bottom: 1rem; }
.entry__kind {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--peacock);
  border: 1px solid currentColor;
  padding: .3em .7em;
  margin-bottom: 1rem;
}

/* --- Atelier: Recent, and the film grid ---------------------------------- */

.recent { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 56rem) {
  .recent { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.recent__media { position: relative; margin: 0; }
/* The studio films are shot on a phone, so they are 9:16. Held to that
   ratio and capped, a vertical clip sits beside a paragraph instead of
   running the page off the bottom of the screen. */
.recent__vid {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 78svh;
  object-fit: cover;
  background: var(--parchment-deep);
  display: block;
  margin-inline: auto;
}
@media (min-width: 56rem) { .recent__vid { max-width: 24rem; } }

.recent__cap {
  display: block;
  margin-top: 1rem;
  font-family: var(--f-ui);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
.recent__cap b { font-weight: 400; color: var(--ink-soft); }
a.recent__cap:hover b { color: var(--sindoor); }

/* A play glyph, shown until the clip actually starts. */
.vid__cue {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 3.4rem; height: 3.4rem;
  border: 1px solid rgba(241, 231, 212, .75);
  border-radius: 50%;
  background: rgba(30, 35, 23, .3);
  backdrop-filter: blur(3px);
  pointer-events: none;
  transition: opacity var(--med);
}
.vid__cue::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  translate: -50% -50%;
  border-left: .62rem solid var(--paper);
  border-top: .4rem solid transparent;
  border-bottom: .4rem solid transparent;
}
[data-vid].is-playing .vid__cue { opacity: 0; }

.films {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.9rem, 2vw, 1.6rem);
}
@media (min-width: 56rem) { .films { grid-template-columns: repeat(4, 1fr); } }

.film__link { display: block; text-decoration: none; }
.film { position: relative; margin: 0; }
.film__vid {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--parchment-deep);
  display: block;
  transition: transform 1s var(--ease-out);
}
.film__link:hover .film__vid { transform: scale(1.02); }
.film__meta { padding-top: .9rem; display: grid; gap: .25rem; }
.film__label { font-family: var(--f-display); font-size: 1.05rem; line-height: 1.25; }
.film__sub {
  font-family: var(--f-ui);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Entry photograph that is far taller than its column. */
.entry__media--crop img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 30%;
}

.vid {
  position: relative;
  background: var(--parchment-deep);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.vid video { width: 100%; height: 100%; object-fit: cover; }
/* Shown in place of the player until a web-sized file is dropped in. Sits on
   its own panel so it stays legible whatever the poster frame looks like. */
.vid__todo {
  text-align: center;
  padding: 1.1rem 1.8rem;
  background: var(--paper);
  border: var(--rule);
  color: var(--ink-soft);
  font-family: var(--f-ui);
  font-size: .8rem;
  letter-spacing: .12em;
  max-width: 28rem;
  margin: 0;
}
.vid__todo::before {
  content: "▶";
  display: block;
  font-size: 1.4rem;
  color: var(--ink-faint);
  margin-bottom: .7rem;
}

/* --- Contact ------------------------------------------------------------- */

.contact { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 60rem) { .contact { grid-template-columns: 1.15fr .85fr; } }

.field { display: grid; gap: .55rem; margin-bottom: 1.5rem; }
.field label {
  font-family: var(--f-ui);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-faint);
  padding: .75rem 0;
  font-family: var(--f-body);
  font-size: 1rem;
  border-radius: 0;
  transition: border-color var(--med);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-bottom-color: var(--sindoor);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field select { appearance: none; cursor: pointer; }
.field--sel { position: relative; }
.field--sel::after {
  content: "▾";
  position: absolute;
  right: .2rem; bottom: .9rem;
  pointer-events: none;
  color: var(--ink-faint);
}

.form__row { display: grid; gap: 0 1.5rem; }
@media (min-width: 40rem) { .form__row { grid-template-columns: 1fr 1fr; } }

.form__note { font-size: .85rem; color: var(--ink-faint); margin-top: -.4rem; }

.form__status { margin-top: 1.25rem; font-size: .92rem; min-height: 1.5em; }
.form__status.is-ok { color: var(--peacock); }
.form__status.is-err { color: var(--sindoor); }

.setup {
  border: 1px dashed var(--sindoor);
  background: color-mix(in srgb, var(--sindoor) 5%, transparent);
  padding: 1.25rem 1.4rem;
  font-size: .86rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.setup b { font-family: var(--f-ui); letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; display: block; margin-bottom: .4rem; color: var(--sindoor); }
.setup code { background: var(--ink-ghost); padding: .1em .4em; font-size: .9em; }

/* Enquiry summary card injected when arriving from a Buy button */
.enq {
  display: none;
  gap: 1.25rem;
  align-items: center;
  border: var(--rule);
  background: var(--paper-warm);
  padding: 1rem;
  margin-bottom: 2rem;
}
.enq.is-on { display: flex; }
.enq img { width: 5.5rem; height: 5.5rem; object-fit: cover; flex: none; }
.enq__t { font-family: var(--f-display); font-size: 1.2rem; }
.enq__s { font-family: var(--f-ui); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: .3rem; }

.deets { display: grid; gap: 1.75rem; }
.deets__k {
  font-family: var(--f-ui);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .4rem;
}
.deets a { text-decoration: none; border-bottom: 1px solid var(--ink-hairline); }
.deets a:hover { border-bottom-color: var(--sindoor); color: var(--sindoor); }

/* --- Blog ---------------------------------------------------------------- */

.posts { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.post-card {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  text-decoration: none;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: var(--rule);
}
@media (min-width: 56rem) { .post-card { grid-template-columns: 22rem 1fr; } }

.post-card__pic { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-warm); }
.post-card__pic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.post-card:hover .post-card__pic img { transform: scale(1.05); }

.post-card__body { display: block; }
.post-card__when {
  display: block;
  font-family: var(--f-ui);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .7rem;
}
.post-card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  margin: 0 0 .7rem;
}
.post-card__sf { display: block; color: var(--ink-soft); max-width: 48ch; }

/* Reading page */
.post__lead {
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  width: min(100% - var(--gutter) * 2, 74rem);
  margin-inline: auto;
}
.post__lead img { width: 100%; }

.post__body p {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem);
  line-height: 1.78;
  margin: 0 0 1.35em;
  max-width: 68ch;
}
/* The opening paragraph carries a little more weight, as in a printed essay. */
.post__body p:first-child { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); line-height: 1.6; }
.post__body em { font-style: italic; }

.post__fig { margin: clamp(2.25rem, 5vw, 3.5rem) 0; }
.post__fig img { width: 100%; }
.post__fig figcaption {
  font-family: var(--f-ui);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .8rem;
}

/* --- Instagram ------------------------------------------------------------ */

.ig { padding-bottom: 0; }

.ig__head {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 56rem) {
  .ig__head { grid-template-columns: 1.1fr .9fr; }
}
.ig__aside p {
  color: var(--ink-soft);
  max-width: 40ch;
  margin-bottom: 1.6rem;
}

.ig__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.4rem, 1vw, .8rem);
}
@media (min-width: 46rem) { .ig__grid { grid-template-columns: repeat(4, 1fr); } }

.ig__tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--parchment);
}
.ig__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter var(--med);
}
.ig__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 35, 23, .42);
  opacity: 0;
  transition: opacity var(--med);
}
.ig__mark {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--paper);
  opacity: 0;
  transform: scale(.88);
  transition: opacity var(--med), transform var(--med) var(--ease-out);
}
.ig__tile:hover img { transform: scale(1.06); }
.ig__tile:hover::after,
.ig__tile:focus-visible::after { opacity: 1; }
.ig__tile:hover .ig__mark,
.ig__tile:focus-visible .ig__mark { opacity: 1; transform: none; }

/* --- Footer -------------------------------------------------------------- */

.ftr {
  background: var(--parchment);
  border-top: var(--rule);
  padding-block: clamp(3rem, 7vw, 5.5rem) 2rem;
  margin-top: clamp(4rem, 9vw, 8rem);
}
.ftr__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.ftr__mark {
  width: 11rem;
  aspect-ratio: 898 / 371;
  background: var(--ink);
  -webkit-mask: var(--logo) no-repeat center / contain;
          mask: var(--logo) no-repeat center / contain;
  margin-bottom: 1.25rem;
}
/* These are h2 for a correct document outline, but they are column labels,
   not display headings — the styling belongs to the role, not the tag. */
.ftr h2 {
  font-family: var(--f-ui);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ftr a { text-decoration: none; font-size: .95rem; }
.ftr a:hover { color: var(--sindoor); }
.ftr__base {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-family: var(--f-ui);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--ink-faint);
}

/* --- Scroll reveal ------------------------------------------------------- */
/* Applied by JS. The no-js / reduced-motion fallbacks below matter: without
   them the whole site is invisible if the script fails. */

[data-rise] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-rise].is-in { opacity: 1; transform: none; }

[data-veil] { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-io); }
[data-veil].is-in { clip-path: inset(0 0 0 0); }

.js-off [data-rise], .js-off [data-veil] { opacity: 1; transform: none; clip-path: none; }

/* Line-by-line heading reveal, built by JS from data-lines. */
.ln { display: block; overflow: hidden; }
.ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.is-in .ln > span, .ln.is-in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-rise], [data-veil] { opacity: 1; transform: none; clip-path: none; }
  .ln > span { transform: none; }
  .hero__media img { transform: none !important; }
}

/* --- Utilities ----------------------------------------------------------- */

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; top: -100%; left: var(--gutter);
  z-index: 9999; background: var(--ink); color: var(--paper);
  padding: .8rem 1.4rem; text-decoration: none;
  font-family: var(--f-ui); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
}
.skip:focus { top: 1rem; }

.center { text-align: center; }
.mt-l { margin-top: clamp(2.5rem, 6vw, 4.5rem); }