/* ============================================================
   ARTHA INDUS ATELIER — "Archival Atelier"
   Editorial-luxury identity for a South Asian heritage-art
   curation house. Bone-paper ground, ink charcoal, with
   lapis / terracotta / brushed-gold accents drawn from the
   pigments the work itself celebrates.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Palette — paper & ink */
  --paper:        #f4efe6;   /* bone / cold-pressed paper */
  --paper-2:      #ece4d6;   /* deeper paper for banding */
  --paper-3:      #e4d9c6;
  --ink:          #1c1815;   /* near-black warm ink */
  --ink-soft:     #352f28;
  --ink-mute:     #574d3f;   /* muted taupe text — AA on paper (≈7:1) */

  /* Pigment accents (lapis, terracotta, ochre, gold) */
  --lapis:        #26324c;   /* ground lapis / royal indigo */
  --lapis-deep:   #171f31;
  --terracotta:   #9e4522;   /* AA on paper */
  --ochre:        #c08a2d;
  --gold:         #a98545;   /* brushed / liquid gold — decorative (rules, dots) */
  --gold-deep:    #6f5326;   /* gold TEXT on light grounds — antique bronze, AA (~4.9:1) */
  --gold-lite:    #c9a656;   /* gold text on DARK grounds */
  --sage:         #6f7659;

  /* Roles */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --rule:         rgba(28, 24, 21, 0.16);
  --rule-soft:    rgba(28, 24, 21, 0.09);

  /* Type */
  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --pad-x: clamp(1.25rem, 5vw, 6.5rem);
  --maxw: 1400px;
  /* `ch` is the width of "0", narrower than the average glyph here: 66ch was
     rendering ~77 characters per line. 58ch lands the essays near 66, inside
     the comfortable range for sustained reading. */
  --measure: 58ch;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: clamp(1.075rem, 0.5vw + 1rem, 1.16rem);  /* ≥17px, larger for legibility */
  line-height: 1.72;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Visible keyboard focus for accessibility */
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, .page-hero :focus-visible, .section--ink :focus-visible,
.cta-band :focus-visible, .tile:focus-visible, .footer :focus-visible { outline-color: var(--gold-lite); }
/* Skip link */
.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem; border-radius: 2px;
  font-size: 0.8rem; letter-spacing: 0.06em; transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Paper grain overlay — subtle, fixed */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 350; line-height: 1.05; letter-spacing: -0.01em; }
.serif-italic { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);            /* deep bronze — AA on light grounds */
}
.eyebrow--ink { color: var(--ink-mute); }
/* Gold labels sitting on DARK grounds get the lighter tone for contrast */
.hero .eyebrow, .cta-band .eyebrow, .section--ink .eyebrow, .footer .eyebrow { color: var(--gold-lite); }

.display {
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.lead {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.35;
  color: var(--ink-soft);
}

/* ---------- Layout primitives ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.section { position: relative; z-index: 2; padding-block: clamp(4.5rem, 11vw, 9rem); }
.section--band { background: var(--paper-2); }
.section--ink  { background: var(--lapis-deep); color: var(--paper); }

.rule { height: 1px; background: var(--rule); border: 0; }
.hairline-top { border-top: 1px solid var(--rule); }

/* Section header cluster */
.sec-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.sec-head .num { font-family: var(--serif); font-size: 0.95rem; color: var(--gold-deep); letter-spacing: 0.1em; }
.section--ink .sec-head .num { color: var(--gold-lite); }
.sec-title { font-size: clamp(2rem, 5vw, 3.4rem); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad-x);
  transition: background 0.5s var(--ease), padding 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.5s var(--ease);
  color: var(--paper);
  mix-blend-mode: normal;
}
.nav.is-scrolled {
  background: rgba(244, 239, 230, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  color: var(--ink);
  padding-block: 0.75rem;
  box-shadow: 0 1px 0 var(--rule-soft);
}
.brand { display: flex; align-items: center; gap: 0.7rem; line-height: 1; }
.brand__words { display: flex; flex-direction: column; line-height: 1; }
.brand__logo {
  width: auto; height: 2.5rem; flex: none; display: block;
  transition: height 0.5s var(--ease), filter 0.5s var(--ease);
}
/* the mark carries navy — lift it so it reads on the dark hero nav */
.nav:not(.is-scrolled) .brand__logo {
  filter: drop-shadow(0 0 1px rgba(244,239,230,0.55)) brightness(1.14) saturate(1.05);
}
.nav.is-scrolled .brand__logo { height: 2.1rem; }
@media (max-width: 720px) { .brand__logo { height: 2.1rem; } }
.brand__mark {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}
.brand__sub {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-top: 0.35rem;
  opacity: 0.72;
}
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.nav__link {
  position: relative;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-block: 0.4rem;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  border: 1px solid currentColor;
  padding: 0.55rem 1.1rem;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.nav.is-scrolled .nav__cta:hover { background: var(--ink); color: var(--paper); }
.nav:not(.is-scrolled) .nav__cta:hover { background: var(--paper); color: var(--ink); }

.nav__toggle { display: none; background: none; border: 0; color: currentColor; padding: 0.4rem; }
.nav__toggle svg { display: block; }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 49;
  background: var(--lapis-deep); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
  padding: var(--pad-x);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu a {
  font-family: var(--serif); font-size: clamp(2rem, 9vw, 3.2rem);
  padding-block: 0.4rem; border-bottom: 1px solid rgba(244,239,230,0.14);
}
.mobile-menu a .m-num { font-family: var(--sans); font-size: 0.8rem; color: var(--gold); letter-spacing: 0.2em; vertical-align: super; margin-right: 0.6rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--paper);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: 55% 45%;
  will-change: transform, filter;
  /* one-time ink-wash resolve (monochrome → full colour), then a continuous slow drift */
  animation: kenburns 38s ease-in-out infinite alternate, inkResolve 8.5s cubic-bezier(0.33,0.7,0.3,1) both;
}
@keyframes inkResolve {
  0%   { filter: grayscale(0.94) sepia(0.34) saturate(0.5) contrast(1.06) brightness(0.85); }
  55%  { filter: grayscale(0.34) sepia(0.12) saturate(0.82) contrast(1.02) brightness(0.96); }
  100% { filter: none; }
}
@keyframes kenburns {
  0%   { transform: scale(1.14) translate3d(0, 0, 0);            transform-origin: 52% 42%; }
  50%  { transform: scale(1.22) translate3d(-1.6%, -1.4%, 0);    transform-origin: 62% 58%; }
  100% { transform: scale(1.16) translate3d(1.4%, 1.2%, 0);      transform-origin: 40% 48%; }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* left column panel — keeps text legible over any photo region */
    linear-gradient(90deg, rgba(15,20,32,0.9) 0%, rgba(15,20,32,0.72) 30%, rgba(15,20,32,0.32) 55%, rgba(15,20,32,0.05) 74%, transparent 88%),
    /* vertical depth */
    linear-gradient(180deg, rgba(15,20,32,0.45) 0%, rgba(15,20,32,0.12) 22%, rgba(15,20,32,0.32) 55%, rgba(15,20,32,0.82) 82%, rgba(15,20,32,0.95) 100%);
}
/* raking dawn light — a very slow ambient warm/cool shift, no glare line */
.hero__scrim::after {
  content: ""; position: absolute; inset: -12%; z-index: 1;
  background: radial-gradient(70% 58% at 32% 12%, rgba(226,184,116,0.16), rgba(226,184,116,0.04) 45%, transparent 66%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  animation: dawnLight 46s ease-in-out infinite alternate;
}
@keyframes dawnLight {
  0%   { opacity: 0.5; transform: translate3d(-3%, -1.5%, 0); filter: hue-rotate(-8deg); }
  100% { opacity: 0.95; transform: translate3d(3.5%, 2%, 0);  filter: hue-rotate(10deg); }
}

.hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero__eyebrow { margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.9s var(--ease) 0.5s both; text-shadow: 0 1px 12px rgba(12,16,26,0.85), 0 0 2px rgba(12,16,26,0.6); }
.hero .eyebrow { color: #e0c06e; }   /* brighter warm gold for the hero eyebrow specifically */
.hero__title {
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.hero__title { text-shadow: 0 2px 26px rgba(12,16,26,0.45); }
.hero__title em { font-style: italic; color: var(--gold-lite); }
/* line-by-line masked reveal */
.hero__title .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title .ln > span {
  display: block;
  transform: translateY(115%) rotate(2deg);
  animation: lineUp 1.15s var(--ease) both;
}
.hero__title .ln:nth-child(1) > span { animation-delay: 0.62s; }
.hero__title .ln:nth-child(2) > span { animation-delay: 0.74s; }
.hero__title .ln:nth-child(3) > span { animation-delay: 0.86s; }
@keyframes lineUp { to { transform: translateY(0) rotate(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px);} to { opacity: 1; transform: none; } }
.hero__meta {
  margin-top: 2.2rem;
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; align-items: center;
  max-width: 60ch;
  opacity: 0; animation: fadeUp 1s var(--ease) 1.05s both;
}
.hero__tag { font-size: 1.15rem; line-height: 1.5; color: rgba(248,244,236,0.95); max-width: 46ch; font-family: var(--serif); text-shadow: 0 1px 16px rgba(12,16,26,0.5); }
.hero__scroll {
  position: absolute; z-index: 2; right: var(--pad-x); bottom: clamp(3rem, 7vw, 6rem);
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244,239,230,0.7);
  writing-mode: vertical-rl;
}
.hero__scroll span.line { writing-mode: horizontal-tb; width: 1px; height: 46px; background: rgba(244,239,230,0.5); animation: scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine { 0%,100%{ transform: scaleY(0.3); opacity:0.3;} 50%{ transform: scaleY(1); opacity:1;} }

/* Marquee of lineages */
.lineage-strip {
  border-block: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
  position: relative; z-index: 2;
}
.lineage-strip__track {
  display: flex; gap: clamp(1.2rem, 3vw, 2.8rem); align-items: center;
  justify-content: center; flex-wrap: wrap;
  padding-block: 1.25rem;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x);
}
.lineage-strip__track span {
  font-family: var(--serif); font-size: 1.1rem; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.8rem);
}
.lineage-strip__track span::after { content: "·"; color: var(--gold-deep); }
.lineage-strip__track span:last-child::after { content: none; }

/* ============================================================
   CURATOR'S NOTE
   ============================================================ */
.curator { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.curator__media { position: relative; }
.curator__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; }
.curator__media figcaption {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(23,31,49,0.82); color: var(--paper);
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.5rem 0.85rem; border-radius: 2px;
}
.curator__body p + p { margin-top: 1.2rem; }
.offerings { margin-top: 2rem; display: grid; gap: 1.1rem; }
.offering {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  padding-top: 1.1rem; border-top: 1px solid var(--rule);
}
.offering__no { font-family: var(--serif); font-size: 1.5rem; color: var(--terracotta); line-height: 1; }
.offering h4 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.offering p { font-size: 0.95rem; color: var(--ink-mute); }
.commitment {
  margin-top: 2rem; padding: 1.4rem 1.6rem;
  background: var(--paper-3); border-left: 2px solid var(--gold); border-radius: 2px;
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.5; color: var(--ink-soft);
}
.signature { margin-top: 2rem; }
.signature .name { font-family: var(--serif); font-size: 1.5rem; }
.signature .role { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); margin-top: 0.4rem; }

/* ============================================================
   PROCESS PIPELINE (Reel 1 — Warli Tree of Life)
   ============================================================ */
.feature-head { max-width: 46ch; margin-bottom: 3rem; }
.feature-head .q { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem,2vw,1.5rem); color: var(--ink-soft); margin-top: 1rem; }

.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); }
.stage { display: flex; flex-direction: column; }
.stage__media { overflow: hidden; border-radius: 2px; position: relative; }
.stage__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 1.1s var(--ease); }
.stage:hover .stage__media img { transform: scale(1.05); }
.stage__no {
  position: absolute; top: 0.8rem; left: 0.8rem; z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(244,239,230,0.92); color: var(--ink);
  font-family: var(--serif); font-size: 1.1rem;
}
.stage__label {
  /* a real <h4> for document outline, so it must opt out of the global
     serif h1-h4 rule rather than inherit Fraunces at weight 350 */
  margin: 1.1rem 0 0; font-family: var(--sans); line-height: 1.4;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute);
}
.stage p { margin-top: 0.6rem; font-size: 0.92rem; color: var(--ink-mute); }

/* Specification study block — hairline treatment on paper (one spec language site-wide) */
.spec {
  margin-top: 2.5rem; padding: 1.7rem 0 0;
  background: transparent; color: var(--ink);
  border-top: 1px solid var(--ink);
  border-radius: 0;
}
.spec__title { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1.4rem; }
.spec__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.4rem 2.5rem; }
.spec__row { display: grid; gap: 0.3rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule-soft); }
.spec__row dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.spec__row dd { font-size: 0.98rem; color: var(--ink-soft); font-family: var(--sans); line-height: 1.5; }

/* ============================================================
   TYPOLOGIES (Reel 2 — Matsya x5)
   ============================================================ */
/* ============================================================
   FLIPBOOK — one motif, five typologies (pages turning)
   ============================================================ */
.flipbook { position: relative; }
.flipbook__stage {
  position: relative;
  perspective: 2200px;
  perspective-origin: 50% 45%;
  aspect-ratio: 16 / 9;
  min-height: 380px;
}
.leaf {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 1.05s cubic-bezier(0.55, 0.03, 0.28, 1);
  will-change: transform;
}
.leaf.is-turned { transform: rotateY(-172deg); }
.leaf__face, .leaf__back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 2px; overflow: hidden;
}
.leaf__face {
  display: grid; grid-template-columns: 1.25fr 1fr;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(28,24,21,0.18), 1px 0 0 rgba(28,24,21,0.10) inset;
}
.leaf__back {
  transform: rotateY(180deg);
  background:
    linear-gradient(90deg, rgba(28,24,21,0.10), transparent 12%),
    var(--paper-2);
}
.leaf__media { overflow: hidden; }
.leaf__media img { width: 100%; height: 100%; object-fit: cover; }
.leaf__body {
  padding: clamp(1.3rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--rule-soft);
}
.leaf__no {
  font-family: var(--serif); font-size: 0.9rem; letter-spacing: 0.14em;
  color: var(--gold-deep); text-transform: uppercase;
}
.leaf__body h4 { font-size: clamp(1.3rem, 2.4vw, 2rem); margin-top: 0.5rem; line-height: 1.1; }
.leaf__body p { margin-top: 0.9rem; font-size: 0.96rem; color: var(--ink-mute); line-height: 1.6; }
.typo__lbl {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep); margin-right: 0.35rem;
}

/* final spread — all five at a glance */
.leaf__face--full { grid-template-columns: 1fr; }
.sheet {
  padding: clamp(1.2rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; height: 100%;
}
.sheet__head { font-size: clamp(1.2rem, 2.2vw, 1.8rem); margin-top: 0.4rem; }
.sheet__grid {
  margin-top: clamp(1rem, 2vw, 1.6rem);
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  align-items: start;
}
.sheet__item {
  background: none; border: 0; padding: 0; text-align: left;
  display: grid; grid-template-rows: auto auto 1fr; gap: 0.4rem;
  align-content: start; color: inherit;
}
.sheet__media { display: block; overflow: hidden; border-radius: 2px; aspect-ratio: 3 / 4; }
.sheet__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease), filter 0.5s var(--ease);
  filter: saturate(0.95);
}
.sheet__item:hover .sheet__media img { transform: scale(1.06); filter: saturate(1.05); }
.sheet__no { font-family: var(--serif); font-size: 0.8rem; color: var(--gold-deep); letter-spacing: 0.1em; }
.sheet__title { font-family: var(--serif); font-size: 0.95rem; line-height: 1.2; color: var(--ink); }
.sheet__foot { margin-top: 0.9rem; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 780px) {
  .sheet__grid { grid-template-columns: repeat(2, 1fr); overflow-y: auto; }
  .sheet__media { aspect-ratio: 4 / 3; }
}

/* controls */
.flipbook__controls {
  display: flex; align-items: center; justify-content: center; gap: 1.6rem;
  margin-top: 1.6rem;
}
.flip-btn {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font-size: 1.1rem; display: grid; place-items: center;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), opacity 0.35s var(--ease);
}
.flip-btn:hover:not(:disabled) { border-color: var(--gold); background: var(--paper-3); }
.flip-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.flipbook__count {
  font-family: var(--serif); font-size: 1.05rem; color: var(--ink-mute);
  min-width: 6ch; text-align: center; letter-spacing: 0.08em;
}
.flipbook__hint {
  text-align: center; margin-top: 0.7rem;
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
}

@media (max-width: 780px) {
  .flipbook__stage { aspect-ratio: 3 / 4; }
  .leaf__face { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .leaf__body { border-left: 0; border-top: 1px solid var(--rule-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .leaf { transition: opacity 0.3s linear; }
  .leaf.is-turned { transform: none; opacity: 0; pointer-events: none; }
}

/* ============================================================
   THE COLLECTION — archival plates with a glassine veil
   At rest: a quiet catalogue plate, name legible.
   On hover: a warm bone veil draws back, as if lifting the
   glassine tissue that interleaves an archival plate.
   ============================================================ */
.plates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.4rem, 3vw, 2.6rem);
  row-gap: clamp(2.6rem, 5vw, 4.2rem);
  align-items: start;
}
.plates__empty { grid-column: 1 / -1; text-align: center; padding: 3rem 0; font-family: var(--serif); font-size: 1.2rem; color: var(--ink-mute); }
.plates__empty .link-arrow { display: inline-flex; border: 0; margin: 0 0.3rem; }
.plate { min-width: 0; scroll-margin-top: 6rem; }
.plate.is-hidden { display: none; }

.plate__face {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer;
}
.plate__media {
  display: block; position: relative; overflow: hidden;
  border-radius: 2px; background: var(--paper-3);
}
.plate__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  filter: saturate(0.96);
  transition: transform 1.3s var(--ease), filter 0.9s var(--ease);
}
.plate__face:hover .plate__media img,
.plate__face:focus-visible .plate__media img { transform: scale(1.03); }

/* the glassine veil */
.plate__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,239,230,0.90), rgba(236,228,214,0.94));
  opacity: 0; transform: translateY(12%);
  transition: opacity 0.55s var(--ease), transform 0.65s var(--ease);
}
.plate__face:hover .plate__media::after,
.plate__face:focus-visible .plate__media::after { opacity: 1; transform: none; }

/* revealed over the veil */
.plate__cap {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 1.2rem 1.15rem;
  color: var(--ink);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--ease) 0.08s, transform 0.5s var(--ease) 0.08s;
  pointer-events: none;
}
.plate__face:hover .plate__cap,
.plate__face:focus-visible .plate__cap { opacity: 1; transform: none; }
.plate__cap > * { display: block; }
.plate__cap .eyebrow,
.plate__cap .plate__title { display: none; }   /* these live below the plate at rest */
.plate__bestfor { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
.plate__bestfor span {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep); margin-right: 0.4rem;
}
.plate__more {
  margin-top: 0.9rem; font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}
.plate__more::after { content: " \2192"; }

/* the name, at rest, beneath the plate */
.plate__label { padding-top: 1rem; }
.plate__label .eyebrow { font-size: 0.76rem; letter-spacing: 0.22em; color: var(--ink-mute); }
.plate__label .plate__title {
  display: block; font-family: var(--serif); font-weight: 350;
  font-size: clamp(1.12rem, 1.5vw, 1.42rem); line-height: 1.18;
  margin-top: 0.35rem; color: var(--ink);
}
/* a gold rule wipes in under the name on hover */
.plate__label::after {
  content: ""; display: block; height: 1px; margin-top: 0.9rem;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.plate__face:hover .plate__label::after,
.plate__face:focus-visible .plate__label::after { transform: scaleX(1); }

@media (hover: none) {
  /* Touch devices have no hover. Never veil the artwork here — the plate would
     sit permanently behind glassine. The lineage and title already read below
     the plate at rest, and the full study is one tap away. */
  .plate__media::after { opacity: 0; }
  /* Keep the "Best for" line — it is the fastest-scanning fact on a plate and
     hiding it on touch was a content loss, not a graceful degradation. Instead
     of the dark veil it rides a paper bar at the foot of the image, so the
     artwork above stays clear. The "Open the study" prompt is dropped here
     because the arrow appended to the title already carries that invitation. */
  .plate__cap {
    opacity: 1; inset: auto 0 0 0; transform: none;
    background: rgba(244, 239, 230, 0.94);
    padding: 0.6rem 0.75rem;
  }
  .plate__bestfor { color: var(--ink); font-size: 0.82rem; line-height: 1.45; }
  .plate__bestfor span { color: var(--gold-deep); }
  .plate__more { display: none; }
  /* make the invitation explicit, since there is no hover to discover it */
  .plate__label::after { transform: scaleX(1); }
  .plate__label .plate__title::after {
    content: " \2192"; color: var(--gold-deep); font-size: 0.85em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .plate__media::after, .plate__cap { transition: opacity 0.2s linear; transform: none; }
  .plate__face:hover .plate__media img { transform: none; }
}
@media (max-width: 1000px) { .plates { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .plates { grid-template-columns: 1fr; } }

/* specification list — hairline key/value rows */
.spec-list { margin-top: 0.9rem; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.spec-list > div {
  display: grid; grid-template-columns: minmax(130px, 0.42fr) 1fr;
  gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule-soft);
}
.spec-list dt {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep);
  align-self: start; margin: 0; padding-top: 0.15rem;
}
.spec-list dd { margin: 0; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 560px) {
  .spec-list > div { grid-template-columns: 1fr; gap: 0.25rem; }
}
.story__kicker { margin-top: 1.4rem; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--ink-mute); }
.study-tags { list-style: none; padding: 0; margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.study-tags li {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--paper-3);
  padding: 0.32rem 0.68rem; border-radius: 100px; border: 1px solid var(--rule-soft);
}

/* ============================================================
   STUDY OVERLAY — the dossier
   ============================================================ */
.study-overlay { position: fixed; inset: 0; z-index: 90; }
.study-overlay[hidden] { display: none; }
.study-overlay__scrim {
  position: absolute; inset: 0; background: rgba(15,20,32,0.72);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.4s var(--ease);
}
.study-overlay.is-open .study-overlay__scrim { opacity: 1; }
.study-overlay__panel {
  /* Centred by transform alone. Do NOT reintroduce `inset: 0` + `margin: auto`
     here: with a fixed width/height it over-constrains the box, CSS resolves the
     auto margins to negative values, and the panel's header bar gets dragged off
     the top of the viewport. */
  position: absolute; top: 50%; left: 50%; right: auto; bottom: auto; margin: 0;
  width: min(1180px, 100%); height: min(92vh, 100%);
  transform: translate(-50%, -46%) scale(0.99);
  background: var(--paper); border-radius: 3px;
  display: grid; grid-template-rows: auto 1fr auto;
  overflow: hidden; opacity: 0;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  box-shadow: 0 30px 90px rgba(0,0,0,0.4);
}
.study-overlay.is-open .study-overlay__panel { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.study-overlay__bar {
  /* only the nav lives here now that the catalogue numeral is gone */
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0.9rem clamp(1rem, 2.5vw, 1.8rem);
  border-bottom: 1px solid var(--rule);
}
.study-overlay__nav { display: flex; gap: 0.5rem; }
.study-overlay__nav .flip-btn { width: 2.5rem; height: 2.5rem; font-size: 0.95rem; }
.study-overlay__body {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
  overflow: hidden; min-height: 0;
}
.study-overlay__media { margin: 0; overflow: hidden; background: var(--ink); }
.study-overlay__media img { width: 100%; height: 100%; object-fit: cover; }
.study-overlay__text {
  padding: clamp(1.4rem, 3vw, 2.6rem);
  overflow-y: auto; min-height: 0;
}
.study-overlay__text:focus { outline: none; }
.dossier__title { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-top: 0.5rem; line-height: 1.06; }
.dossier__bestfor { margin-top: 0.9rem; font-size: 0.95rem; color: var(--ink-soft); }
.dossier__bestfor span { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); margin-right: 0.45rem; }
.dossier__copy { margin-top: 1.2rem; }
.dossier__copy p + p { margin-top: 0.9rem; }
.dossier__copy p { color: var(--ink-mute); font-size: 0.98rem; line-height: 1.7; }
.dossier__copy strong { color: var(--ink); font-weight: 600; }
.study-overlay__text .study-tags { margin-top: 1rem; }
.study-overlay__text .spec__title { margin-top: 1.8rem; }
.study-overlay__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem clamp(1rem, 2.5vw, 1.8rem);
  border-top: 1px solid var(--rule); flex-wrap: wrap;
}
.study-overlay__foot .link-arrow { margin-top: 0; }
body.overlay-open { overflow: hidden; }

@media (max-width: 900px) {
  .study-overlay__panel { width: 100%; height: 100%; border-radius: 0; }
  .study-overlay__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .study-overlay__media img { max-height: 40vh; }
}

/* ============================================================
   PERSPECTIVES — the essay
   ============================================================ */
.essay { position: relative; z-index: 2; }
.essay__hero { max-width: 24ch; }
.essay__title { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.0; }
.essay__body { max-width: var(--measure); margin-inline: auto; margin-top: clamp(2.5rem,6vw,4rem); }
.essay__body h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-top: 3.2rem; margin-bottom: 1rem;
  color: var(--paper);
}
.essay__body h3 .h-idx { display:block; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-lite); margin-bottom: 0.8rem; }
.essay__body p { color: rgba(244,239,230,0.92); margin-top: 1.1rem; font-size: 1.12rem; line-height: 1.75; }
.essay__body p strong, .essay__body p b { color: var(--paper); font-weight: 600; }
.essay__body p:first-of-type::first-letter {
  font-family: var(--serif); font-size: 4.2rem; line-height: 0.8; float: left;
  padding: 0.1em 0.14em 0 0; color: var(--gold-lite);
}
.pullquote {
  margin: 2.6rem 0; padding-left: 1.6rem; border-left: 2px solid var(--gold);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem,2.6vw,1.9rem);
  line-height: 1.4; color: var(--paper);
}
.essay__refs { max-width: var(--measure); margin: 3rem auto 0; padding-top: 1.6rem; border-top: 1px solid rgba(244,239,230,0.18); }
.essay__refs h4 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-lite); margin-bottom: 1.1rem; }
.essay__refs li { list-style: none; font-size: 0.8rem; color: rgba(244,239,230,0.6); padding: 0.6rem 0; border-bottom: 1px solid rgba(244,239,230,0.1); line-height: 1.55; }
.essay__refs li b { color: rgba(244,239,230,0.85); font-weight: 600; }

/* ============================================================
   COLLABORATE
   ============================================================ */
/* ============================================================
   COLLABORATE — the commission docket
   The page's job is to get a specifier to write to the studio. So the form is
   treated as the instrument on the page: a contained panel (Gestalt common
   region) rather than four underlines floating in space. The opening statement
   runs full width, the argument sits left, the ask sits right, and the Lookbook
   — the low-commitment path — is demoted to a strip beneath both.
   ============================================================ */
.collab__head { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
/* measure set on the heading itself: `ch` on the wrapper would resolve against
   the body size, not the display size, and collapse this to ~270px */
.collab__head .sec-title { max-width: 17ch; }
.collab__head .lead { margin-top: 1.2rem; max-width: 54ch; }

.collab {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  /* start, not stretch: neither column should inherit the other's height */
  align-items: start;
}

.collab__eyebrow { margin-bottom: 1.2rem; }
.collab__points { display: grid; gap: 2.3rem; }
.collab__points > div { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.collab__points .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); margin-top: 0.6rem; }
.collab__points h5 { font-size: 1.02rem; }
.collab__points h5 + p { margin-top: 0.4rem; }
.collab__points p { font-size: 0.95rem; color: var(--ink-mute); line-height: 1.65; }

/* the spec-readiness line, given a hairline of its own so it reads as a
   technical footnote rather than another paragraph */
.collab__readiness {
  margin-top: 2.6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.85; color: var(--ink-mute);
}

/* ---- the docket panel ---- */
.form--docket {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  border-radius: 2px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.form__head { margin-bottom: 0.4rem; }
.form__intro {
  margin-top: 0.6rem; font-size: 0.95rem; color: var(--ink-mute);
  line-height: 1.6; max-width: 40ch;
}

/* ---- the Lookbook, as a strip ---- */
.lookbook--strip {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  background: none; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0;
}
.lookbook--strip .lookbook__media { margin: 0; border-radius: 2px; overflow: hidden; display: block; }
.lookbook--strip .lookbook__media img { width: 100%; height: auto; display: block; transition: transform 0.7s var(--ease); }
.lookbook--strip .lookbook__media:hover img { transform: scale(1.04); }
.lookbook--strip .lookbook__body { padding: 0; }
.lookbook--strip h3 { font-size: 1.15rem; margin-top: 0.45rem; line-height: 1.25; }
.lookbook--strip .lookbook__desc { margin-top: 0.5rem; font-size: 0.92rem; color: var(--ink-mute); max-width: 54ch; }
.lookbook--strip .lookbook__action { text-align: right; display: grid; gap: 0.5rem; justify-items: end; }
.lookbook--strip .lookbook__meta { margin: 0; }

@media (max-width: 900px) {
  .collab { grid-template-columns: 1fr; }
  .lookbook--strip { grid-template-columns: 96px 1fr; }
  .lookbook--strip .lookbook__action { grid-column: 1 / -1; text-align: left; justify-items: start; }
}

.form {
  /* align-content:start is load-bearing. .collab stretches this column to the
     height of the (taller) left column; without it the surplus height is shared
     out among the form's auto rows and the submit button inflates to ~190px. */
  display: grid; gap: 1.2rem; align-content: start;
}
.field { display: grid; gap: 0.45rem; }
/* 0.64rem uppercase at 0.2em tracking was below the legibility the founder asked
   for; raised to 0.76rem with tighter tracking. */
.field label { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem;
  background: transparent; color: var(--ink);
  /* --rule composites to 1.38:1 against paper, failing WCAG 2.1 SC 1.4.11
     (3:1 for the boundary of a form control). This value measures 3.25:1. */
  border: 0; border-bottom: 1px solid rgba(28, 24, 21, 0.5);
  padding: 0.62rem 0.1rem;
  border-radius: 0;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 92px; }
/* --gold is 2.99:1 on paper — a hair under the 3:1 a focus indicator needs.
   --gold-deep is 6.23:1, and the doubled rule makes focus unmistakable. */
/* Deliberately does NOT set `outline: none`. The global rule at the top of this
   file gives every focusable element a 2px --gold-deep outline (6.23:1 on paper);
   suppressing it here to draw a 1px border instead would be a downgrade. This
   only thickens the field's own rule so the active field is obvious even when a
   pointer user clicks in and no outline is drawn. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 1px 0 0 var(--gold-deep);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236f6455' fill='none' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.2rem center; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.btn {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--ink); color: var(--paper);
  padding: 0.95rem 1.8rem; border: 1px solid var(--ink); border-radius: 2px;
  font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn .arrow { transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.form__note { font-size: 0.78rem; color: var(--ink-mute); }
.form__status { font-size: 0.85rem; color: var(--sage); min-height: 1.2em; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--lapis-deep); color: var(--paper); position: relative; z-index: 2; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.footer__mark { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.footer__mark span { display:block; font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-lite); margin-top: 0.8rem; }
.footer h6 { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244,239,230,0.55); margin-bottom: 1.1rem; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer a { font-size: 0.9rem; color: rgba(244,239,230,0.82); transition: color 0.3s var(--ease); }
.footer a:hover { color: var(--gold-lite); }
.footer__note { font-size: 0.95rem; color: rgba(244,239,230,0.82); max-width: 42ch; line-height: 1.6; }
.footer a { font-size: 0.95rem; }
.footer__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid rgba(244,239,230,0.16); font-size: 0.8rem; color: rgba(244,239,230,0.68); letter-spacing: 0.04em; }

/* ============================================================
   INNER-PAGE HERO (banner atop each sub-page)
   ============================================================ */
.page-hero {
  position: relative;
  background: var(--lapis-deep);
  color: var(--paper);
  padding-top: clamp(7rem, 14vw, 11rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(169,133,69,0.28), transparent 55%),
    radial-gradient(90% 70% at -5% 110%, rgba(176,82,43,0.22), transparent 55%);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, 1.5%, 0) scale(1.08); }
}
.page-hero__title { opacity: 0; animation: fadeUp 1s var(--ease) 0.15s both; }
.page-hero__stand { opacity: 0; animation: fadeUp 1s var(--ease) 0.3s both; }

/* Sanskrit section-name mark (introduced inside each section) */
.page-hero__skt {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.1;
  color: var(--gold-lite); margin-top: 0.5rem;
  display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap;
  opacity: 0; animation: fadeUp 0.9s var(--ease) 0.08s both;
}
.page-hero__skt .deva {
  font-style: normal; font-family: "Noto Serif Devanagari", "Noto Sans Devanagari", var(--serif);
  font-size: 0.82em; opacity: 0.78; letter-spacing: 0;
}
.page-hero .eyebrow { margin-top: 0.8rem; }
.page-hero > * { position: relative; z-index: 1; }
.page-hero__num { font-family: var(--serif); font-size: 0.95rem; color: var(--gold-lite); letter-spacing: 0.1em; }
.page-hero .eyebrow { color: var(--gold-lite); }
.page-hero__title { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 0.98; margin-top: 1rem; max-width: 18ch; }
.page-hero__title em { font-style: normal; font-weight: 300; color: var(--gold-lite); }
.page-hero__stand { margin-top: 1.6rem; max-width: 54ch; font-family: var(--serif); font-size: clamp(1.2rem,2vw,1.55rem); color: rgba(248,244,236,0.94); line-height: 1.45; }
.page-hero__meta { margin-top: 1.8rem; display: flex; gap: 0.6rem; align-items: center; font-size: 0.80rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244,239,230,0.55); }
.page-hero__meta a { color: rgba(244,239,230,0.55); transition: color 0.3s var(--ease); }
.page-hero__meta a:hover { color: var(--gold-lite); }
.crumb-sep { opacity: 0.5; }

/* ============================================================
   HOME — four tiles + intro
   ============================================================ */
.home-intro { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem,6vw,5rem); align-items: end; }
.home-intro__lead { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.home-intro p.body { margin-top: 1.4rem; color: var(--ink-mute); }

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.9rem, 2vw, 1.4rem); }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(280px, 38vw, 440px);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  overflow: hidden; border-radius: 3px;
  color: var(--paper); isolation: isolate;
}
.tile__bg { position: absolute; inset: 0; z-index: -2; }
.tile__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,27,43,0.28) 0%, rgba(20,27,43,0.52) 42%, rgba(20,27,43,0.9) 78%, rgba(20,27,43,0.97) 100%);
  transition: background 0.6s var(--ease);
}
.tile:hover .tile__bg img { transform: scale(1.07); }
.tile:hover::after { background: linear-gradient(180deg, rgba(20,27,43,0.4) 0%, rgba(20,27,43,0.62) 42%, rgba(20,27,43,0.94) 78%, rgba(20,27,43,0.99) 100%); }
.tile > * { text-shadow: 0 1px 14px rgba(12,16,26,0.55); }
.tile__no { font-family: var(--serif); font-size: 0.95rem; color: var(--gold-lite); letter-spacing: 0.1em; }
.tile__title { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-top: 0.3rem; color: var(--paper); }
.tile__desc { margin-top: 0.7rem; font-size: 1rem; color: rgba(248,244,236,0.95); max-width: 34ch; }
.tile__go { margin-top: 1.2rem; display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.80rem; letter-spacing: 0.2em; text-transform: uppercase; }
.tile__go .arrow { transition: transform 0.4s var(--ease); }
.tile:hover .tile__go .arrow { transform: translateX(5px); }

/* CTA band */
.cta-band { background: var(--lapis); color: var(--paper); text-align: center; }
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 20ch; margin-inline: auto; }
.cta-band p { margin-top: 1.2rem; color: rgba(244,239,230,0.78); max-width: 50ch; margin-inline: auto; }
.cta-band .btn { margin-top: 2rem; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-band .btn:hover { background: transparent; color: var(--paper); }

/* subpage top spacing (no big hero) */
.pad-top { padding-top: clamp(3rem, 7vw, 5.5rem); }

/* ============================================================
   JOURNAL INDEX (Perspectives)
   ============================================================ */
.featured { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; color: inherit; }
.featured__media { overflow: hidden; border-radius: 2px; }
.featured__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 1.3s var(--ease); }
.featured:hover .featured__media img { transform: scale(1.04); }
.featured__body h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.02; margin-top: 0.8rem; }
.featured__dek { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--ink-soft); margin-top: 0.8rem; line-height: 1.35; }
.featured__meta { margin-top: 1.2rem; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.featured__excerpt { margin-top: 1.2rem; color: var(--ink-mute); max-width: 46ch; }
.featured .link-arrow { margin-top: 1.6rem; }

.journal-more { margin-top: clamp(3.5rem, 8vw, 6rem); }
.journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.jcard { display: flex; flex-direction: column; color: inherit; border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.jcard__media { overflow: hidden; border-radius: 2px; margin-bottom: 1.1rem; }
.jcard__media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform 1.2s var(--ease); }
.jcard:hover .jcard__media img { transform: scale(1.05); }
.jcard__meta { font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.jcard h3 { font-size: 1.4rem; margin-top: 0.4rem; }
.jcard__excerpt { margin-top: 0.6rem; font-size: 0.92rem; color: var(--ink-mute); }
.jcard .link-arrow { margin-top: 1rem; border: 0; padding: 0; }
.journal-fallback { text-align: center; padding: 2rem 0; }
.journal-fallback p { color: var(--ink-mute); margin-bottom: 1.4rem; }

/* ============================================================
   SINGLE POST (long-form reading, light ground)
   ============================================================ */
.post__loading { padding: 8rem 0; text-align: center; color: var(--ink-mute); }
.post__hero { padding-top: clamp(6.5rem, 13vw, 10rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.post__back { font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; gap: 0.5rem; transition: color 0.3s var(--ease); }
.post__back:hover { color: var(--gold-deep); }
.post__hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02; margin-top: 0.8rem; max-width: 20ch; }
.post__dek { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: var(--ink-soft); margin-top: 1.2rem; max-width: 40ch; line-height: 1.35; }
.post__byline { margin-top: 1.6rem; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.post__cover { margin: clamp(1rem, 3vw, 2rem) 0 0; overflow: hidden; border-radius: 2px; }
.post__cover img { width: 100%; max-height: 60vh; object-fit: cover; }

/* Body raised from 1.16rem for the "legible to old eyes" requirement; leading
   eased from 1.78 because larger type needs proportionally less of it. */
.post__body { max-width: var(--measure); margin: clamp(2.5rem, 6vw, 4rem) auto 0; font-size: 1.22rem; line-height: 1.72; }
.post__body > p { margin-top: 1.3rem; color: var(--ink-soft); }
.post__body > p:first-of-type::first-letter { font-family: var(--serif); font-size: 4rem; line-height: 0.78; float: left; padding: 0.08em 0.12em 0 0; color: var(--gold-deep); }
.post__body h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-top: 2.8rem; margin-bottom: 0.4rem; line-height: 1.1; }
.post__body h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); margin-top: 2.2rem; margin-bottom: 0.6rem; line-height: 1.4; }
.post__body strong { color: var(--ink); font-weight: 600; }
.post__body a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.post__body ul, .post__body ol { margin-top: 1.2rem; padding-left: 1.3rem; color: var(--ink-soft); }
.post__body li { margin-top: 0.5rem; }
.post__body hr { border: 0; height: 1px; background: var(--rule); margin: 2.6rem 0; }
.post__pull { margin: 2.4rem 0; padding-left: 1.6rem; border-left: 2px solid var(--gold); font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.4; color: var(--ink); }
.post__figure { margin: 2.2rem 0; }
.post__figure img { width: 100%; border-radius: 2px; }
.post__figure figcaption { margin-top: 0.7rem; font-size: 0.82rem; color: var(--ink-mute); text-align: center; font-style: italic; }
.post__foot { max-width: var(--measure); margin: clamp(2.5rem,6vw,4rem) auto clamp(2rem,5vw,3rem); padding-top: 1.6rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; }
.post__sign { font-family: var(--serif); font-style: italic; font-size: 1.3rem; }
.post__bio { font-size: 0.9rem; color: var(--ink-mute); margin-top: 0.4rem; max-width: 44ch; }
.post__copy { background: none; border: 1px solid var(--rule); border-radius: 2px; padding: 0.6rem 1rem; font-size: 0.80rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.post__copy:hover { border-color: var(--gold); color: var(--ink); }

/* references list */
.post__ref { font-size: 0.9rem !important; line-height: 1.55; color: var(--ink-mute); padding-left: 1.4rem; text-indent: -1.4rem; margin-top: 0.8rem !important; }
.post__code { background: var(--paper-3); padding: 1rem 1.2rem; border-radius: 3px; overflow-x: auto; font-size: 0.9rem; margin-top: 1.3rem; }
.post__body code { background: var(--paper-3); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.9em; }

/* TOC + layout */
.post__layout { max-width: var(--measure); margin-inline: auto; position: relative; }
.post__toc { display: none; }
@media (min-width: 1200px) {
  .post__layout { max-width: calc(var(--measure) + 340px); display: grid; grid-template-columns: 1fr var(--measure); gap: 2.5rem; align-items: start; }
  .post__layout .post__body { grid-column: 2; }
  .post__toc { display: block; position: sticky; top: 6rem; grid-column: 1; padding-right: 1rem; }
  .post__toc-title { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.9rem; }
  .post__toc ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; border-left: 1px solid var(--rule); }
  .post__toc a { display: block; padding-left: 1rem; font-size: 0.82rem; color: var(--ink-mute); line-height: 1.35; transition: color 0.3s var(--ease); }
  .post__toc a:hover { color: var(--gold-deep); }
}

/* reading progress */
.post__progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 45; background: transparent; }
.post__progress span { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.1s linear; }

/* prev / next */
.post__prevnext { max-width: var(--measure); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--rule); }
.post__pn { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.post__pn span { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.post__pn--next { text-align: right; }
.post__related { max-width: calc(var(--measure) + 340px); margin: clamp(2.5rem,6vw,4rem) auto 0; }

@media (max-width: 860px) {
  .featured { grid-template-columns: 1fr; }
  .featured__media { max-width: 560px; }
}

/* ============================================================
   COMPARE SLIDER (paper ↔ built relief)
   ============================================================ */
.compare {
  position: relative; margin-top: 1rem;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px;
  cursor: ew-resize; user-select: none; touch-action: pan-y;
  background: var(--ink);
}
.compare__img, .compare__before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); will-change: clip-path; }
.compare__divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; background: rgba(244,239,230,0.9); transform: translateX(-1px);
  pointer-events: none; box-shadow: 0 0 0 1px rgba(15,20,32,0.25);
}
.compare__handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  display: grid; place-items: center; font-size: 1.15rem;
  box-shadow: 0 2px 18px rgba(15,20,32,0.4);
}
.compare__tag {
  position: absolute; bottom: 1rem; z-index: 2;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--paper); background: rgba(15,20,32,0.55);
  padding: 0.4rem 0.7rem; border-radius: 2px; backdrop-filter: blur(4px);
}
.compare__tag--l { left: 1rem; }
.compare__tag--r { right: 1rem; }
.compare__range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.compare__range:focus-visible + .compare__tag,
.compare:focus-within .compare__divider { outline: 2px solid var(--gold-lite); outline-offset: 2px; }
.compare__hint { text-align: center; margin-top: 0.8rem; font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }

/* ============================================================
   MID-PAGE CTA
   ============================================================ */
.mid-cta { background: var(--lapis); color: var(--paper); }
.mid-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; padding-block: clamp(1.8rem, 4vw, 2.6rem); }
.mid-cta p { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--paper); max-width: 40ch; }
.mid-cta--inline { grid-column: 1 / -1; border-radius: 3px; margin-block: clamp(1rem,3vw,2rem); }
.mid-cta--inline .mid-cta__inner { padding-inline: clamp(1.4rem, 3vw, 2.4rem); }

.btn--ghost { background: transparent; color: var(--paper); border-color: rgba(244,239,230,0.5); white-space: nowrap; }
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--ghost-light { background: transparent; color: var(--paper); border-color: rgba(244,239,230,0.6); }
.btn--ghost-light:hover { background: rgba(244,239,230,0.12); color: var(--paper); }
.cta-band__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.cta-band__actions .btn { margin-top: 0; }

/* ============================================================
   DUAL OFFER
   ============================================================ */
.offer-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2rem); }
.offer {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  display: flex; flex-direction: column;
}
.offer__no { font-family: var(--serif); font-size: 1.1rem; color: var(--terracotta); }
.offer h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 0.4rem; }
.offer__desc { margin-top: 0.9rem; color: var(--ink-mute); }
.offer__list { list-style: none; padding: 0; margin: 1.3rem 0 1.6rem; display: grid; gap: 0.6rem; }
.offer__list li { position: relative; padding-left: 1.2rem; font-size: 0.95rem; color: var(--ink-soft); }
.offer__list li::before { content: "—"; position: absolute; left: 0; color: var(--gold-deep); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 0.3rem; align-self: flex-start; transition: gap 0.35s var(--ease); }
.link-arrow:hover { gap: 0.9rem; }
.link-arrow .arrow { transition: transform 0.35s var(--ease); }

/* ============================================================
   STUDY INDEX / FILTER
   ============================================================ */
.study-index { margin-bottom: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 1.2rem; }
.study-index__group { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; align-items: baseline; }
.study-index__legend { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); padding-top: 0.5rem; }
.study-index__row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.study-index__f {
  background: none; border: 0; padding: 0.5rem 0;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--ink-mute); position: relative; transition: color 0.3s var(--ease);
}
.study-index__f::after { content: ""; position: absolute; left: 0; bottom: 0.2rem; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.study-index__f:hover { color: var(--ink); }
.study-index__f.is-active { color: var(--ink); }
.study-index__f.is-active::after { transform: scaleX(1); }
.study-index__count { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-mute); font-style: italic; font-family: var(--serif); }

/* filtered-out state */
.story.is-hidden { display: none; }

.stories__empty { text-align: center; padding: 3rem 0; font-family: var(--serif); font-size: 1.2rem; color: var(--ink-mute); }
.stories__empty .link-arrow { display: inline-flex; border: 0; margin: 0 0.3rem; }

/* ============================================================
   STUDY TAGS + BEST-FOR
   ============================================================ */
.study-tags { list-style: none; padding: 0; margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.study-tags li {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--paper-3);
  padding: 0.35rem 0.7rem; border-radius: 100px; border: 1px solid var(--rule-soft);
}
.section--band .study-tags li { background: var(--paper); }
.story__bestfor { margin-top: 0.9rem; font-size: 0.95rem; color: var(--ink-soft); }
.story__bestfor span { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); margin-right: 0.5rem; }

/* share-link affordance */
.story__media { }
.story__link {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(244,239,230,0.92); color: var(--ink); border: 0;
  font-size: 0.8rem; display: grid; place-items: center;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
}
.story__media:hover .story__link, .story__link:focus-visible { opacity: 1; transform: none; }
.story__link:hover { background: var(--gold-lite); }
.story__link.is-copied { background: var(--sage); color: var(--paper); }

/* zoomable images */
.story__media img, .stage__media img, .typo img { cursor: zoom-in; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15,20,32,0.96);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 2px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); transform: scale(0.97); transition: transform 0.4s var(--ease); }
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__cap { position: absolute; bottom: clamp(1rem,4vw,2.4rem); left: 50%; transform: translateX(-50%); color: rgba(244,239,230,0.85); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; }
.lightbox__close {
  position: absolute; top: clamp(1rem,3vw,1.8rem); right: clamp(1rem,3vw,1.8rem);
  width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(244,239,230,0.4);
  background: transparent; color: var(--paper); font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center; transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox__close:hover { background: rgba(244,239,230,0.14); transform: rotate(90deg); }

@media (max-width: 760px) {
  .offer-split { grid-template-columns: 1fr; }
  .study-index__group { grid-template-columns: 1fr; }
  .mid-cta__inner { flex-direction: column; align-items: flex-start; }
  .compare { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }
.reveal[data-d="4"] { transition-delay: 0.32s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .curator, .collab { grid-template-columns: 1fr; }
  .curator__media { max-width: 460px; }
  .pipeline { grid-template-columns: 1fr; max-width: 460px; }
  .story, .story--flip { grid-template-columns: 1fr; }
  .story--flip .story__media { order: 0; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .home-intro { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .form__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
  body { font-weight: 380; }
}

/* ============================================================
   LOOKBOOK DOWNLOAD CARD (Collaborate)
   ============================================================ */
.lookbook {
  margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule);
  display: grid; gap: 1.4rem;
}
.lookbook__media {
  display: block; overflow: hidden; border-radius: 2px;
  box-shadow: 0 12px 34px rgba(28,24,21,0.16);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.lookbook__media img { width: 100%; display: block; }
.lookbook__media { max-width: 420px; }
.lookbook__media:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(28,24,21,0.24); }
.lookbook__body h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-top: 0.4rem; line-height: 1.2; }
.lookbook__desc { margin-top: 0.7rem; font-size: 0.95rem; color: var(--ink-mute); }
.lookbook__body .btn { margin-top: 1.2rem; }
.lookbook__body .btn .arrow { transition: transform 0.35s var(--ease); }
.lookbook__body .btn:hover .arrow { transform: translateY(3px); }
.lookbook__meta { margin-top: 0.8rem; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 720px) {
  .lookbook__media { max-width: 320px; }
}

/* ============================================================
   SERVICES (Studio Collaboration & Trade Integration)
   ============================================================ */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.2vw, 1.6rem); }
.service {
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border: 1px solid var(--gold); border-radius: 2px;
  background: rgba(244,239,230,0.5);
}
.service__no { font-family: var(--serif); font-size: 1.7rem; color: var(--gold-deep); line-height: 1; }
.service h3 { font-size: 1.12rem; margin-top: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--sans); font-weight: 600; }
.service p { margin-top: 0.7rem; font-size: 0.93rem; color: var(--ink-mute); }
@media (max-width: 980px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services { grid-template-columns: 1fr; } }

/* Curatorial thesis pull-quote */
.thesis {
  margin-top: 2rem; padding: 1.6rem 1.8rem;
  background: var(--lapis-deep); color: var(--paper); border-radius: 3px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.4;
}
.thesis .eyebrow { color: var(--gold-lite) !important; margin-bottom: 0.8rem; font-style: normal; }