/* ============================================================
   CHIMANLALS — The Living Paper Atelier
   Foundation + components · dark, mobile-first, sans-serif only
   Palette: Ink / Soot / Plum smoke / Ivory / Oat + foil gold gradient
   Motion vocabulary: Settle · Draw · Foil-wipe · Open · Fan · Float · Shimmer · Drift
   All motion is CSS-first (transform / opacity / clip-path) and
   fully suppressed under prefers-reduced-motion. JS only enhances.
   ============================================================ */

/* ---- Font: Archivo as progressive enhancement over a robust
   system fallback. If the webfont fails to load, the system sans
   stack renders and nothing shifts structurally. ---- */
@font-face { font-family: "ArchivoFallback"; src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial"); ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }

:root {
  /* Core palette */
  --ink:    #0F0C0E;
  --soot:   #171216;
  --plum:   #221A24;
  --ivory:  #EFE5D0;
  --oat:    #C7B9A2;

  /* ------------------------------------------------------------------
     TEXT HIERARCHY ON DARK — QA Round 1 readability pass.
     A meaningful share of Chimanlals customers are 50+. Every one of these
     tokens was contrast-checked against --ink (#0F0C0E) and now clears
     WCAG AA (4.5:1) for normal-size text. The previous muted values did not:
     the old --oat-45 measured 2.82:1, and it was carrying operational
     information (address labels, hours, map captions), not decoration.
     The historical token names are kept so no existing rule needs editing.
     ------------------------------------------------------------------ */
  --muted:        rgba(199,185,162,.65);   /* 4.76:1 on --ink */
  --muted-strong: rgba(199,185,162,.82);   /* 7.0:1  on --ink */

  --ivory-90: rgba(239,229,208,.92);
  --ivory-70: rgba(239,229,208,.80);       /* was .72 */
  --ivory-55: rgba(239,229,208,.68);       /* was .55; 7.5:1 */
  --oat-70:   var(--muted-strong);         /* was .72 */
  --oat-45:   var(--muted);                /* was .45 — failed AA */

  /* Foil gold — a gradient, never flat yellow */
  --foil: linear-gradient(135deg, #7a591f 0%, #b8892f 26%, #e7c977 52%, #f4e3a8 63%, #c79a3c 80%, #8a6522 100%);
  --foil-soft: linear-gradient(120deg, #a67d2e, #e4c777 55%, #a67d2e);
  --gold:   #d9b45a;
  --gold-deep: #a67d2e;
  /* BUTTON SURFACE (QA Round 1). --foil is a display gradient: its bright #f4e3a8
     band reads as a glare crossing the label, and its dark #7a591f ends give the
     ink-coloured button text only 3.07:1. This restrained warm gold holds
     6.5:1 or better across the whole surface, so the label stays readable at
     every point of the button. --foil itself is unchanged for .foil-text. */
  --foil-btn: linear-gradient(180deg, #c9a24a 0%, #c09742 55%, #b98f38 100%);

  /* Hairlines */
  --hair:      rgba(217,180,90,.28);
  --hair-soft: rgba(239,229,208,.12);
  --hair-strong: rgba(217,180,90,.5);

  /* Category accents (subtle jewel tones for labels / accent lines) */
  --acc-envelopes: #d9b45a;
  --acc-cards:     #c0563f;
  --acc-letters:   #3f9b90;
  --acc-tags:      #cf7aa0;
  --acc-bags:      #5f76b0;
  --acc-packaging: #a878b8;
  --acc-accessories: #c08a54;

  /* Type */
  --font: "Archivo", "ArchivoFallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;

  --fs-hero:   clamp(2.6rem, 8vw, 6.4rem);
  --fs-h1:     clamp(2rem, 5.2vw, 3.6rem);
  --fs-h2:     clamp(1.6rem, 3.6vw, 2.6rem);
  --fs-h3:     clamp(1.15rem, 2vw, 1.4rem);
  --fs-body:   clamp(1.0625rem, 1.2vw, 1.125rem);   /* 17 -> 18px (was 16 -> 17.2) */
  --fs-sm:     .95rem;                              /* 15.2px (was 13.6px) */
  --fs-label:  .78rem;                              /* 12.5px (was 11.8px) */
  /* Floor for genuinely secondary uppercase labels. Nothing operational may go below
     this: it is the smallest size the readability pass allows to ship. */
  --fs-micro:  .74rem;                              /* 11.8px */
  /* Operational detail (address, hours, opening times, set contents). Deliberately
     larger than a decorative label because customers act on it. */
  --fs-detail: 1rem;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5.2vw, 76px);
  --section-y: clamp(64px, 10vw, 148px);
  --radius: 4px;

  /* ------------------------------------------------------------------
     SPACING SCALE (final pass). Before this, the same relationship was
     written five different ways across the generators: the CTA row that
     follows a copy block carried an ad-hoc margin-top of 14, 18, 20, 22,
     24, 26 or 30px depending on which page it was on, and the gap
     between two buttons was 14px on some heroes and 16px on others.
     None of those differences meant anything; they were just drift.

     The goal is a consistent RHYTHM, not identical spacing everywhere —
     so this is a small scale that the recurring relationships share,
     while deliberate compositional spacing (hero stages, section
     padding) keeps its own values.
     ------------------------------------------------------------------ */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: clamp(16px, 1.6vw, 20px);
  --space-5: clamp(20px, 2.2vw, 26px);   /* copy block -> its actions */
  --space-6: clamp(28px, 3.2vw, 40px);
  --space-7: clamp(40px, 5vw, 64px);

  /* Handmade-paper fibre texture (subtle turbulence), reused across belt + dark sections */
  --paper-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E");

  /* Motion */
  --paper: cubic-bezier(.16,1,.3,1);
  --ease:  cubic-bezier(.4,0,.2,1);
  --shadow-lift: 0 18px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
  --shadow-deep: 0 30px 80px rgba(0,0,0,.6);
}

/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* STICKY-HEADER OFFSET (QA Round 1). The header is position:sticky, so any anchor
     target used to land underneath it: "A heritage paper house" was reported clipped.
     scroll-padding-top fixes this once, for every anchor on every page (in-page nav,
     #chapters, #craft-process, name-index jumps, Quick View anchor fallbacks),
     instead of patching scroll-margin onto individual headings. --header-h is the
     measured sticky height; the extra 26px is breathing room above the target. */
  --header-h: 79px;
  scroll-padding-top: calc(var(--header-h) + 26px); }
@media (max-width: 1179px) { html { --header-h: 68px; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-reg);
  line-height: 1.65;
  color: var(--ivory-90);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
/* Keep width-constrained logo art in true aspect even with HTML height attrs */
.heritage__watermark { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
h1,h2,h3,h4 { margin: 0; font-weight: var(--fw-semi); line-height: 1.08; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; box-shadow: 0 0 0 4px rgba(217,180,90,.14); }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 200; padding: 10px 14px; min-height: 44px;
  display: inline-flex; align-items: center; border-radius: 6px; color: var(--ink); background: var(--ivory);
  box-shadow: var(--shadow-lift); transform: translateY(-180%); transition: transform .2s var(--ease); }
.skip-link:focus, .skip-link:focus-visible { transform: translateY(0); }
main:focus { outline: none; }

/* ============================================================
   ATMOSPHERE — dark paper texture · grain · lamp glow
   ============================================================ */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body::before {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(217,180,90,.10), transparent 55%),
    radial-gradient(90% 70% at 80% 12%, rgba(168,120,184,.06), transparent 60%),
    radial-gradient(100% 90% at 15% 90%, rgba(63,155,144,.05), transparent 60%),
    linear-gradient(180deg, var(--soot), var(--ink) 60%);
}
body::after {
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.site-header, main, .site-footer, .drawer, .scrim { position: relative; z-index: 1; }

/* ---- Motif data-URIs (gold line art) ---- */
:root {
  --motif-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16' viewBox='0 0 60 16'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M30 3l4 5-4 5-4-5z'/%3E%3Cpath d='M2 8h18M40 8h18'/%3E%3Ccircle cx='24' cy='8' r='1.3' fill='%23d9b45a' stroke='none'/%3E%3Ccircle cx='36' cy='8' r='1.3' fill='%23d9b45a' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --motif-figures: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='58' viewBox='0 0 120 58'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='20' cy='14' r='4'/%3E%3Cpath d='M20 18v14M20 22l-7 6M20 22l7 6M20 32l-6 12M20 32l6 12'/%3E%3Ccircle cx='60' cy='14' r='4'/%3E%3Cpath d='M60 18v14M60 22l-7 6M60 22l7 6M60 32l-6 12M60 32l6 12'/%3E%3Ccircle cx='100' cy='14' r='4'/%3E%3Cpath d='M100 18v14M100 22l-7 6M100 22l7 6M100 32l-6 12M100 32l6 12'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   UTILITIES
   ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; position: relative; }
.section--tight { padding: clamp(40px,6vw,80px) 0; }
.center { text-align: center; }
.utility-page > .section:first-child {
  padding-top: clamp(92px, 11vh, 132px) !important;
  padding-bottom: clamp(34px, 5vw, 66px);
  background: radial-gradient(70% 70% at 12% 20%, rgba(217,180,90,.055), transparent 72%);
}
.utility-hero { position: relative; padding: clamp(34px,4vw,54px) 0 clamp(46px,6vw,76px); overflow: hidden;
  background: radial-gradient(70% 85% at 12% 22%, rgba(217,180,90,.07), transparent 70%); }
.utility-hero .breadcrumb { margin-bottom: clamp(22px,2.5vw,32px); }
.utility-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px,6vw,72px); align-items: center; }
.utility-hero__copy { max-width: 690px; }
.utility-hero__copy h1 { margin: .35em 0 .34em; font-size: var(--fs-h1); font-weight: var(--fw-light); }
.utility-hero__copy h1 em { font-weight: var(--fw-reg); color: var(--oat); }
.utility-hero__copy .lede { max-width: 58ch; margin-bottom: 0; }
.utility-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.utility-hero__text-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 4px;
  color: var(--gold); font-size: var(--fs-sm); font-weight: var(--fw-semi); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.utility-hero__address { margin: 22px 0 0; padding-left: 18px; border-left: 2px solid var(--gold-deep); color: var(--ivory-90); }
.utility-hero__address span { color: var(--ivory-55); font-size: var(--fs-sm); }
.utility-hero__media { position: relative; margin: 0; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden;
  background: var(--soot); box-shadow: var(--shadow-lift); }
.utility-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(239,229,208,.04); }
.utility-hero__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.utility-hero__media--product img { aspect-ratio: 5/4; }
.utility-hero__media figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 30px 18px 14px;
  color: var(--ivory-90); font-size: var(--fs-label); letter-spacing: .06em; background: linear-gradient(transparent, rgba(15,12,14,.88)); }
@media (min-width: 860px) {
  .utility-hero__grid { grid-template-columns: minmax(0,1.02fr) minmax(360px,.98fr); }
  .utility-hero--contact .utility-hero__grid { grid-template-columns: minmax(0,1.08fr) minmax(400px,.92fr); }
  .utility-hero--contact .utility-hero__copy h1 { font-size: clamp(3.2rem,5vw,4.5rem); }
}
@media (min-width: 860px) and (max-height: 800px) {
  .utility-hero { padding-top: 30px; padding-bottom: 40px; }
  .utility-hero .breadcrumb { margin-bottom: 18px; }
  .utility-hero__copy h1 { margin-top: .25em; font-size: clamp(3rem,4.7vw,4rem); }
  .utility-hero__copy .lede { font-size: 1.05rem; line-height: 1.48; }
  .utility-hero__address { margin-top: 12px; line-height: 1.45; }
  .utility-hero__actions { margin-top: 16px; gap: 9px; }
  .utility-hero__actions .btn { padding: .78em 1.05em; font-size: var(--fs-micro); }
  .utility-hero__text-link { font-size: var(--fs-micro); }
}
@media (max-width: 619px) {
  .utility-hero { padding-top: 34px; }
  .utility-hero .breadcrumb { margin-bottom: 24px; }
  .utility-hero__copy h1 { font-size: clamp(2.35rem,12vw,3.5rem); }
  .utility-hero__actions .btn { width: 100%; justify-content: center; }
  .utility-hero--contact .utility-hero__copy { display: flex; flex-direction: column; }
  .utility-hero--contact .utility-hero__address { order: 1; }
}
@media (min-width: 900px) {
  .utility-page > .section:first-child { padding-bottom: 24px; }
  .utility-page > .section:first-child + .section { padding-top: 16px; }
}
/* ------------------------------------------------------------------
   EDITORIAL CHAPTER RHYTHM ON THE UTILITY PAGES (preview closure pass).

   `--section-y` resolves to 136.6px at 1366 and 148px at 1920, and it is
   applied to BOTH edges, so two adjacent chapters stacked 273px / 296px of
   empty ground between them. That is the dead band human QA photographed on
   About. The scale itself is correct for the homepage and the category
   pages, so it is NOT changed globally.

   Scope note: `.utility-page` is About, Privacy, Terms, Contact, the
   collections hub, Selected Pieces and How to Order. The homepage and all
   seven category pages use a bare `<main id="main">` and are therefore
   untouched by everything below - verified, not assumed.

   Excluded deliberately: the first section (its hero spacing is already
   tuned just above) and `.section--tight` (which carries its own,
   already-comfortable rhythm). The result is a joint of roughly 168px at
   1920 and 153px at 1366 - generous breathing room, no dead band, and no
   compression of the chapters themselves.
   ------------------------------------------------------------------ */
@media (min-width: 900px) {
  .utility-page > .section:not(:first-child):not(.section--tight) {
    padding-top: clamp(52px, 5.6vw, 84px);
    padding-bottom: clamp(52px, 5.6vw, 84px);
  }
}
.eyebrow, .label {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--fs-label); font-weight: var(--fw-semi);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--oat-70);
}
.label__mark { width: 22px; height: 1px; background: var(--foil-soft); }
.foil-text {
  background: var(--foil); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}
.gold-hair { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--hair-strong), transparent); margin: 0; }
.lede { font-size: clamp(1.1rem,1.7vw,1.35rem); color: var(--ivory-70); line-height: 1.6; font-weight: var(--fw-light); }
.motif-divider { height: 20px; background: var(--motif-border) center/60px 16px repeat-x; opacity: .5; margin: 0 auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.6em; border-radius: var(--radius);
  min-height: 44px;
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  letter-spacing: .04em; text-transform: uppercase;
  transition: transform .4s var(--paper), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  will-change: transform;
}
.btn .arr { transition: transform .4s var(--paper); }
.btn:hover .arr { transform: translateX(4px); }
.btn--primary { color: var(--ink); background: var(--foil-btn); box-shadow: 0 6px 18px rgba(217,180,90,.18); }
.btn--primary:hover { transform: translateY(-2px); background: linear-gradient(180deg, #d3ab50 0%, #c79c46 55%, #bf953c 100%); }
.btn--ghost { color: var(--ivory-90); border: 1px solid var(--hair-strong); background: rgba(239,229,208,.02); }
.btn--ghost:hover { border-color: var(--gold); background: rgba(217,180,90,.08); transform: translateY(-2px); }
.btn--block { width: 100%; justify-content: center; }

/* ============================================================
   HEADER (hardcoded in HTML — visible without JS)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(15,12,14,.82);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--hair);
}
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 30px; width: auto; }
.brand--footer img { height: 46px; }

/* Desktop nav */
.nav { display: none; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav a, .nav-drop__btn {
  font-size: .82rem; font-weight: var(--fw-med); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ivory-70);
  padding: .5em 0; position: relative; transition: color .3s var(--ease);
}
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--foil-soft); transition: width .35s var(--paper); }
.nav a:hover, .nav-drop__btn:hover { color: var(--ivory); }
.nav a:hover::after { width: 100%; }
.nav a.is-current, .nav-drop__btn.is-current { color: var(--ivory); }
.nav a.is-current::after { width: 100%; }
/* Home makes seven top-level items. At 1440 the gap clamp keeps growing with the
   viewport while the bar stays capped at 1240px, so the flex row started shrinking
   the links and "Selected Pieces", "Craft & Process", "How to Order" and
   "Contact & Enquire" each broke onto a second line. Labels are held on one line and
   the rhythm is tightened just enough to seat seven. Scoped to `.nav > a` so the
   Collections dropdown, whose longest item is "Letter Papers with Envelopes", keeps
   wrapping normally. */
.nav { gap: clamp(.8rem, 1.9vw, 1.7rem); }
.nav > a, .nav-drop__btn { white-space: nowrap; flex: none; }

/* Collections dropdown */
.nav-drop { position: relative; }
.nav-drop__btn { display: inline-flex; align-items: center; gap: .4em; }
.nav-drop__btn .chev { width: 8px; height: 8px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.nav-drop.is-open .nav-drop__btn .chev { transform: rotate(-135deg) translateY(-1px); }
.nav-drop__menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 260px; padding: .6rem; border-radius: 6px;
  background: rgba(23,18,22,.96); backdrop-filter: blur(16px);
  border: 1px solid var(--hair); box-shadow: var(--shadow-deep);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), transform .28s var(--paper);
}
.nav-drop:hover .nav-drop__menu, .nav-drop.is-open .nav-drop__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop__menu a { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 4px; font-size: .82rem; letter-spacing: .04em; text-transform: none; color: var(--ivory-70); transition: background .25s var(--ease), color .25s var(--ease); }
.nav-drop__menu a::after { display: none; }
.nav-drop__menu a:hover { background: rgba(217,180,90,.1); color: var(--ivory); }
.nav-drop__menu a .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc, var(--gold)); flex: none; }

.header__cta { display: none; }
@media (min-width: 1180px) {
  .nav { display: flex; }
  .header__cta { display: inline-flex; }
}
@media (min-width: 1180px) and (max-width: 1420px) {
  .nav { gap: .72rem; }
  .nav a, .nav-drop__btn { font-size: var(--fs-micro); letter-spacing: .025em; }
  .nav .header__cta, .header__cta { padding: 0 .4em 0 1.1em; font-size: var(--fs-micro); margin-left: 10px; }
}

/* Burger */
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; }
.burger span { display: block; height: 1.6px; width: 24px; margin: 0 auto; background: var(--ivory); transition: transform .4s var(--paper), opacity .3s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ============================================================
   MOBILE DRAWER (hardcoded; JS only toggles classes)
   ============================================================ */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(8,6,8,.6); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease); }
.scrim.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; z-index: 80; height: 100vh; height: 100dvh; width: min(88vw, 400px);
  background: linear-gradient(180deg, var(--plum), var(--ink));
  border-left: 1px solid var(--hair);
  transform: translateX(100%); transition: transform .5s var(--paper);
  display: flex; flex-direction: column; overflow-y: auto; box-shadow: var(--shadow-deep);
}
.drawer.is-open { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--gutter); border-bottom: 1px solid var(--hair-soft); }
.drawer__top img { height: 26px; }
.drawer__close { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-right: -10px; }
.drawer__close::before, .drawer__close::after { content: ""; position: absolute; width: 20px; height: 1.6px; background: var(--ivory); }
.drawer__close::before { transform: rotate(45deg); } .drawer__close::after { transform: rotate(-45deg); }
.drawer__nav { padding: 12px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; }
/* :not(.btn) added in QA Round 1. This rule is a nav-link style, but it also matched
   the Contact & Enquire button (specificity 0,1,1 beats .btn--primary's 0,1,0), which
   forced ivory text onto the gold surface: 1.91:1, unreadable. Buttons now keep their
   own colour, padding and border. */
.drawer__nav > a:not(.btn), .drawer__group-btn { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 1.15rem; font-weight: var(--fw-med); color: var(--ivory-90); border-bottom: 1px solid var(--hair-soft); text-align: left; width: 100%; }
.drawer__group-btn .chev { width: 9px; height: 9px; border-right: 1.6px solid var(--oat); border-bottom: 1.6px solid var(--oat); transform: rotate(45deg); transition: transform .35s var(--ease); }
.drawer__group-btn[aria-expanded="true"] .chev { transform: rotate(-135deg); }
.drawer__sub { max-height: 0; overflow: hidden; transition: max-height .45s var(--paper); }
.drawer__sub a { display: flex; align-items: center; gap: .7rem; padding: 13px 0 13px 4px; font-size: 1rem; color: var(--ivory-70); border-bottom: 1px solid var(--hair-soft); }
.drawer__sub a .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc, var(--gold)); flex: none; }
.drawer__nav > a.is-current { color: var(--gold); }
.drawer__cta { margin-top: 26px; }
@media (min-width: 1180px) { .burger, .drawer, .scrim { display: none; } }

/* Progressive fallback: mobile navigation and product enquiries remain usable
   if the enhancement script is blocked before it can open the drawer. */
.nojs-nav { display: none; }
html.no-js [data-shortlist] { display: none !important; }
@media (max-width: 1179px) {
  html.no-js .burger, html.no-js .drawer, html.no-js .scrim { display: none; }
  html.no-js .nojs-nav { display: block; position: relative; z-index: 2; background: var(--ink); border-bottom: 1px solid var(--hair-soft); }
  .nojs-nav__links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; padding-top: 8px; padding-bottom: 8px; }
  .nojs-nav__links a { display: flex; align-items: center; min-height: 48px; padding: 8px 10px; border: 1px solid var(--hair-soft); border-radius: 4px; color: var(--ivory-90); font-size: .78rem; line-height: 1.25; }
  .nojs-nav__links a[aria-current="page"] { color: var(--gold); border-color: var(--hair-strong); }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .nojs-nav__links { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* ============================================================
   HERO — logo ceremony · vertical spine · paper collage
   ============================================================ */
.hero { position: relative; min-height: calc(100vh - 106px); min-height: calc(100svh - 106px); display: flex; align-items: center; padding: 64px 0 48px; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px,5vw,48px); align-items: center; position: relative; z-index: 2; width: 100%; }

.ceremony { text-align: center; }
/* ------------------------------------------------------------------
   MOBILE / TABLET HERO MARK (restored, QA Round 2).
   The approved large centred Chimanlals wordmark. This is the SAME
   artwork the desktop rotated brand object uses; only one of the two is
   ever visible, split at 1024px, so the mark is never duplicated.
   ------------------------------------------------------------------ */
.ceremony__mark { display: block; width: min(72vw, 420px); height: auto;
  margin: 0 auto 1.4rem; opacity: 0; transform: translateY(14px) scale(.985); }
.hero.is-lit .ceremony__mark { animation: settle 1.1s var(--paper) .15s forwards; }
.ceremony__tag { font-size: var(--fs-label); letter-spacing: .28em; text-transform: uppercase; color: var(--oat-70); opacity: 0; }
.hero.is-lit .ceremony__tag { animation: settle 1s var(--paper) .5s forwards; }

.hero__title { font-size: var(--fs-hero); font-weight: var(--fw-light); letter-spacing: -.02em; line-height: .98; margin: .4em 0 .5em; }
.hero__title em { font-style: normal; display: block; }
.hero__title .foil-text { font-weight: var(--fw-reg); }
.hero__sub { max-width: 46ch; margin: 0 auto 2rem; color: var(--ivory-70); font-weight: var(--fw-light); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
/* The one value for "a row of actions following a copy block", replacing the
   per-page 14/18/20/22/24/26/30px margins that had drifted apart. */
.cta-row { margin-top: var(--space-5); }

.hero .reveal-up { opacity: 0; transform: translateY(16px); }
.hero.is-lit .reveal-up { animation: settle .9s var(--paper) forwards; }
.hero.is-lit .reveal-up:nth-of-type(1){ animation-delay:.55s } .hero.is-lit .reveal-up:nth-of-type(2){ animation-delay:.7s } .hero.is-lit .reveal-up:nth-of-type(3){ animation-delay:.85s }

/* ------------------------------------------------------------------
   DESKTOP VERTICAL BRAND OBJECT (QA Round 1).
   Replaces the old typed .brand-spine / .spine, which read as a
   watermark. This is the authentic Chimanlals wordmark artwork, rotated
   and set at real scale, so the desktop hero reads left to right as
   CHIMANLALS | PAPER CULTURE | PRODUCTS.
   Desktop only: it is display:none below 1024px, where the site header
   already carries the mark and there is no margin to hold it.
   ------------------------------------------------------------------ */
.hero__brand { display: none; }
@media (min-width: 1024px) {
  /* From here up the rotated brand object is the mark, so the centred mobile
     wordmark is retired to avoid two Chimanlals logos in one hero. */
  .ceremony__mark { display: none; }
  .hero { min-height: calc(100vh - 122px); min-height: calc(100svh - 122px); }
  /* --brand-len is the mark's VISUAL LENGTH once rotated. The vector wordmark's
     viewBox is 285.97 x 122.616, so its thickness is length * 0.4288 — that is what
     the grid column must reserve. Sizing the column off the unrotated box instead
     leaves a large dead gutter. (Was 0.4379, the 1400x613 PNG's ratio, until the
     final pass swapped the asset for true vector; see scripts/logo_vector.py.) */
  .hero__brand { --brand-len: clamp(360px, 44vh, 520px);
    display: block; position: relative; align-self: stretch;
    width: calc(var(--brand-len) * 0.4288); }
  /* A hairline the mark sits against, so it reads as a deliberate brand panel
     rather than a floating rotated word. */
  .hero__brand::after { content: ""; position: absolute; right: 0; top: 10%; bottom: 10%;
    width: 1px; background: linear-gradient(180deg, transparent, var(--hair), transparent); }
  .hero__brandmark { position: absolute; left: 50%; top: 50%;
    width: var(--brand-len); height: auto; max-width: none;
    transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center;
    opacity: .93; }
}
/* PRINT: the mark is pressed onto the page once, then it is still. */
@media (min-width: 1024px) {
  .enhanced .hero .hero__brandmark { opacity: 0; }
  .enhanced .hero.is-lit .hero__brandmark { animation: brandPress 1.15s var(--paper) .1s forwards; }
  @keyframes brandPress {
    0%   { opacity: 0; transform: translate(-50%,-50%) rotate(-90deg) scale(1.035); filter: blur(3px); }
    55%  { opacity: .93; filter: blur(0); }
    100% { opacity: .93; transform: translate(-50%,-50%) rotate(-90deg) scale(1); filter: blur(0); }
  }
}

@media (max-width: 939px) and (max-height: 700px) {
  .hero { align-items: flex-start; padding: 30px 0 38px; }
  .hero__grid { gap: 20px; }
  .ceremony__mark { width: min(58vw, 230px); margin-bottom: .6rem; }
  .ceremony__tag { font-size: var(--fs-micro); letter-spacing: .22em; }
  .hero__title { font-size: clamp(2.05rem,10vw,3rem); margin: .28em 0 .35em; }
  .hero__sub { font-size: .92rem; line-height: 1.45; margin-bottom: 1rem; }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { padding: .78em 1.1em; }
  .cat-strip { margin-top: 14px; }
}

@media (min-width: 940px) and (max-height: 1250px) {
  .hero { padding: 28px 0 30px; }
  .hero__grid { gap: 24px; }
  .ceremony__mark { width: min(34vw, 300px); margin-bottom: .7rem; }
  .ceremony__tag { font-size: var(--fs-micro); letter-spacing: .24em; }
  .hero__title { font-size: clamp(3rem,4.4vw,4rem); margin: .22em 0 .3em; }
  .hero__sub { font-size: .96rem; line-height: 1.5; margin-bottom: 1rem; }
  .cat-strip { margin-top: 16px; }
}

.collage { position: relative; width: min(92vw, 560px); margin: 8px auto 0; aspect-ratio: 5/4; }
/* PRODUCT WORLD (QA Round 1): materially larger on desktop and allowed to break
   its box, so the breadth of the real range registers immediately. Same
   photography as before; nothing substituted, nothing generated. */
@media (min-width: 1024px) {
  .collage { aspect-ratio: 1/1; width: calc(100% + clamp(20px, 3vw, 64px));
             margin-right: calc(-1 * clamp(20px, 3vw, 64px)); }
  .collage__card { box-shadow: 0 42px 76px -30px rgba(0,0,0,.92),
                               0 10px 22px -14px rgba(0,0,0,.7); }
}
.collage__card { position: absolute; border-radius: 3px; overflow: hidden; box-shadow: var(--shadow-lift); border: 1px solid rgba(239,229,208,.08); opacity: 0; }
.collage__card img { width: 100%; height: 100%; object-fit: cover; }
.collage.is-lit .collage__card { animation: fan 1.1s var(--paper) forwards; }
.collage.is-lit .collage__card.c1 { animation-delay: .2s; }
.collage.is-lit .collage__card.c2 { animation-delay: .34s; }
.collage.is-lit .collage__card.c3 { animation-delay: .48s; }
.collage.is-lit .collage__card.c4 { animation-delay: .62s; }
.collage.is-lit .collage__card.c5 { animation-delay: .76s; }
.collage.is-lit .collage__card.float { animation: fan 1.1s var(--paper) forwards, float 7s ease-in-out 1.6s infinite; }

/* Tablet band: the centring rules below only start at 940px, so between 620 and 939
   the title ranged left while .hero__sub's auto margins centred it. Range everything
   left together. */
@media (max-width: 939px) {
  .hero__sub { margin-left: 0; margin-right: auto; }
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; text-align: left; }
  .ceremony, .hero__sub, .hero__cta { text-align: left; margin-left: 0; }
  .hero__cta { justify-content: flex-start; }
  .collage { margin: 0; width: 100%; }
}
/* THREE-PART DESKTOP COMPOSITION: brand | Paper Culture | product world.
   The brand column is intrinsically sized so the centre and the product
   world share the remaining width; the old layout left a dead gutter. */
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: auto minmax(340px, 1fr) minmax(0, 1.12fr);
                gap: clamp(26px, 3vw, 54px); align-items: center; }
  .hero__centre { min-width: 0; }
}

/* ------------------------------------------------------------------
   QA ROUND 2 — DESKTOP HERO STAGE EXPANSION.
   The Round 1 concept (intact rotated wordmark | Paper Culture | real
   product world) is correct and is NOT redesigned here. The defect the
   human found is scale: the whole composition sat inside the 1240px
   content column and occupied roughly 76vw x 60% of the hero's height,
   leaving large dead black margins on both sides and a deep empty band
   below. Only the stage is enlarged.

   The hero gets its own wider container so the rest of the page keeps the
   1240px measure. Everything else is proportional: the brand object grows
   with the taller stage, the copy column keeps a comfortable measure, and
   the product world takes the width that is freed.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .hero > .container {
    max-width: min(94vw, 1720px);
    padding-inline: clamp(20px, 2.4vw, 44px);
  }
  /* Fill the hero's own height instead of centring a short block inside it.
     The stage now reads as a composed spread rather than a small object
     floating in a large black field. */
  .hero { padding: clamp(28px, 3.4vh, 56px) 0 clamp(32px, 4vh, 64px); }
  .hero__grid { align-items: stretch; min-height: min(70vh, 660px); }
  .hero__centre { justify-content: center; }
  /* The brand object scales off the stage, not off a fixed clamp. */
  .hero__brand { --brand-len: clamp(440px, 58vh, 640px); }
  /* The product world becomes the destination it should be: taller than it is
     wide so it can hold the full range, and allowed to break the right edge. */
  .collage { align-self: center; aspect-ratio: 1 / 1;
             width: calc(100% + clamp(34px, 4vw, 96px));
             margin-right: calc(-1 * clamp(34px, 4vw, 96px)); }
}
@media (min-width: 1180px) {
  .hero__grid { grid-template-columns: auto minmax(360px, .92fr) minmax(0, 1.34fr);
                gap: clamp(30px, 3.2vw, 62px); }
}
/* The expansive composition starts at 1400, not 1366: at 1366 these values put the
   centre column on its minimum and pushed the product world past the viewport edge,
   which is the edge pressure human QA reported. 1024-1399 is handled by the
   mid-desktop comfort band below. */
@media (min-width: 1400px) {
  .hero__brand { --brand-len: clamp(500px, 64vh, 760px); }
  .hero__grid { grid-template-columns: auto minmax(400px, .9fr) minmax(0, 1.42fr);
                gap: clamp(36px, 3.6vw, 78px); min-height: min(74vh, 760px); }
  .collage { width: calc(100% + clamp(52px, 6vw, 132px));
             margin-right: calc(-1 * clamp(52px, 6vw, 132px)); }
}
@media (min-width: 1680px) {
  .hero__brand { --brand-len: clamp(560px, 66vh, 820px); }
  /* The centre column keeps enough measure for "Paper Culture" to stay on one line:
     at 1680 the .9fr column fell to 422px against a 77px headline and the two words
     broke apart, which is not the approved treatment. */
  .hero__grid { min-height: min(76vh, 820px);
                grid-template-columns: auto minmax(520px, 1.02fr) minmax(0, 1.3fr); }
}
/* The copy keeps a readable measure while the stage around it grows: a hero
   headline that scales with a 94vw stage would otherwise outrun the products. */
@media (min-width: 1024px) {
  .hero__title { font-size: clamp(3.2rem, 4.3vw, 4.9rem); }
  .hero__sub { max-width: 42ch; }
}

/* ------------------------------------------------------------------
   FINAL PASS — MID-DESKTOP COMFORT BAND (1024 to 1399).

   The three-part concept and the 1440+ composition are NOT changed. The
   defect human QA reported is specific to the middle of the desktop
   range: at 1366 the hero ran to a 74px gutter while the rest of the
   page keeps ~134px, the centre column was pinned to its 400px minimum,
   and the product world's right bleed (82px) carried it past the
   viewport edge. Everything sat against the sides.

   This band gives that range its own proportions: a real gutter, a
   slightly shorter brand object, a centre column with slack above its
   minimum, and a product world that still breaks its box but stops well
   inside the screen. From 1400 up, the expansive composition above
   takes over unchanged. The step at 1400 is deliberate — the two bands
   are two different compositions, not one that is being scaled.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) and (max-width: 1399px) {
  .hero > .container {
    max-width: min(93vw, 1400px);
    padding-inline: clamp(34px, 4.6vw, 68px);
  }
  /* ~111px of air each side at 1366, against 74px before. */
  .hero__brand { --brand-len: clamp(400px, 54vh, 580px); }
  .hero__grid { grid-template-columns: auto minmax(330px, .98fr) minmax(0, 1.22fr);
                gap: clamp(28px, 3vw, 52px); }
  /* Still breaks its box, but by a third of what it did: at 1366 the product world
     now stops ~80px inside the right edge instead of running off it. */
  .collage { width: calc(100% + clamp(18px, 2.2vw, 44px));
             margin-right: calc(-1 * clamp(18px, 2.2vw, 44px)); }
}

/* A very restrained warm ground so the enlarged stage does not read as empty
   black. It is a CSS gradient only: no image, no texture file, no extra weight. */
@media (min-width: 1024px) {
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(58% 68% at 22% 42%, rgba(217,180,90,.055), transparent 68%),
      radial-gradient(60% 70% at 84% 58%, rgba(192,86,63,.045), transparent 70%);
  }
}

/* ============================================================
   SECTIONS / HEADS
   ============================================================ */
.head { max-width: 640px; margin-bottom: clamp(32px,5vw,56px); }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head__title { font-size: var(--fs-h2); font-weight: var(--fw-light); margin-top: .5rem; }
.head__title em { font-style: normal; }

.statement { font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-weight: var(--fw-light); line-height: 1.28; letter-spacing: -.01em; max-width: 20ch; }
.statement .foil-text { font-weight: var(--fw-reg); }

.world { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hair-soft); border: 1px solid var(--hair-soft); border-radius: 6px; overflow: hidden; }
.world__cell { background: var(--soot); padding: clamp(22px,3vw,34px); }
.world__k { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: var(--fw-light); color: var(--ivory); }
.world__v { font-size: var(--fs-sm); color: var(--oat-70); letter-spacing: .04em; }
@media (min-width: 640px){ .world { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 940px){ .world { grid-template-columns: repeat(4,1fr); } }

.chapters { display: grid; grid-template-columns: 1fr; gap: clamp(14px,2vw,20px); }
@media (min-width: 620px){ .chapters { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px){ .chapters { grid-template-columns: repeat(3,1fr); } }
.chapter { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 24px; border-radius: 6px; overflow: hidden; border: 1px solid var(--hair-soft); background: var(--soot); isolation: isolate; }
.chapter__media { position: absolute; inset: 0; z-index: -2; }
.chapter__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--paper); }
.chapter::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,12,14,.12) 0%, rgba(15,12,14,.55) 55%, rgba(15,12,14,.92) 100%); }
.chapter:hover .chapter__media img { transform: scale(1.06); }
.chapter__idx { font-size: var(--fs-label); letter-spacing: .2em; color: var(--acc, var(--gold)); font-weight: var(--fw-semi); }
.chapter__name { font-size: 1.35rem; font-weight: var(--fw-med); margin: .3rem 0 .2rem; }
.chapter__meta { font-size: var(--fs-sm); color: var(--ivory-55); }
.chapter__accent { position: absolute; top: 0; left: 0; height: 3px; width: 46px; background: var(--acc, var(--gold)); z-index: 1; }
.chapter--text { justify-content: center; align-items: flex-start; background: linear-gradient(160deg, var(--plum), var(--soot)); }
.chapter--text .chapter__name { font-size: 1.15rem; }

.craft { display: grid; grid-template-columns: 1fr; gap: clamp(28px,5vw,60px); align-items: center; }
@media (min-width: 900px){ .craft { grid-template-columns: 1.05fr .95fr; } }
.craft__media { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--hair-soft); }
.craft__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.craft__figs { height: 46px; background: var(--motif-figures) left center/120px 46px repeat-x; opacity: .55; margin: 20px 0; }

.samples { display: grid; grid-auto-flow: column; grid-auto-columns: min(70vw, 300px); gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.sample { scroll-snap-align: start; border-radius: 5px; overflow: hidden; border: 1px solid var(--hair-soft); background: var(--soot); }
.sample__media { aspect-ratio: 4/5; overflow: hidden; }
.sample__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--paper); }
.sample:hover .sample__media img { transform: scale(1.05); }
.sample__cap { padding: 14px 16px; }
.sample__name { font-size: 1rem; font-weight: var(--fw-med); }
.sample__meta { font-size: var(--fs-sm); color: var(--oat-70); }
@media (min-width: 940px){ .samples { grid-auto-columns: 300px; } }

.heritage { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair); background: linear-gradient(155deg, var(--plum), var(--ink)); padding: clamp(40px,6vw,80px); }
.heritage__watermark { position: absolute; right: -4%; bottom: -18%; width: min(70%, 520px); opacity: .05; z-index: 0; pointer-events: none; }
.heritage__inner { position: relative; z-index: 1; max-width: 60ch; }

.paths { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px){ .paths { grid-template-columns: repeat(3,1fr); } }
.path { padding: 28px; border-radius: 6px; border: 1px solid var(--hair-soft); background: var(--soot); transition: border-color .35s var(--ease), transform .5s var(--paper); }
.path:hover { border-color: var(--hair-strong); transform: translateY(-3px); }
.path__k { font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--oat-70); }
.path__v { font-size: 1.15rem; font-weight: var(--fw-med); margin: .4rem 0 .1rem; }
.path__v a:hover { color: var(--gold); }
.path__note { font-size: var(--fs-sm); color: var(--ivory-55); }

.variation { display: flex; gap: 16px; align-items: flex-start; max-width: 70ch; margin: 0 auto; padding: 22px 26px; border-left: 2px solid var(--gold-deep); background: rgba(239,229,208,.03); border-radius: 0 6px 6px 0; }
.variation__icon { flex: none; width: 26px; height: 26px; color: var(--gold); }
.variation p { margin: 0; font-size: var(--fs-sm); color: var(--ivory-70); }

.showroom { display: grid; grid-template-columns: 1fr; gap: clamp(24px,4vw,48px); align-items: center; }
@media (min-width: 900px){ .showroom { grid-template-columns: 1.1fr .9fr; } }
.showroom__media { border-radius: 6px; overflow: hidden; border: 1px solid var(--hair-soft); }
.showroom__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; }
.showroom__info dt { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--oat-70); margin-top: 16px; }
.showroom__info dd { margin: 2px 0 0; font-size: 1.05rem; color: var(--ivory-90); }
.showroom__info a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact-details { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; padding: clamp(28px,4vw,48px);
  border: 1px solid var(--hair-soft); border-radius: 10px; background: linear-gradient(145deg, rgba(39,29,37,.72), rgba(18,14,17,.7)); }
@media (min-width: 820px){ .contact-details { grid-template-columns: .9fr 1.1fr; gap: clamp(42px,6vw,86px); } }

.final-cta { text-align: center; }
.final-cta__title { font-size: var(--fs-h1); font-weight: var(--fw-light); margin-bottom: 1rem; }

/* ============================================================
   ONWARD NAVIGATION + FOOTER
   ============================================================ */
.onward { position: relative; z-index: 1; padding: clamp(42px,6vw,72px) 0; border-top: 1px solid var(--hair-soft);
  background: linear-gradient(180deg, rgba(38,28,36,.48), rgba(15,12,14,.92)); }
.onward__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.onward__head h2 { max-width: 14ch; color: var(--ivory-90); font-size: clamp(1.55rem,2.8vw,2.4rem); font-weight: var(--fw-light); }
.onward__grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hair); }
.onward__item { display: grid; gap: 7px; min-height: 154px; padding: 22px 18px; border-bottom: 1px solid var(--hair);
  transition: background .3s var(--ease), transform .4s var(--paper); }
.onward__title { color: var(--ivory-90); font-size: 1.04rem; font-weight: var(--fw-med); }
.onward__text { color: var(--ivory-55); font-size: var(--fs-sm); line-height: 1.55; }
.onward__link { align-self: end; color: var(--gold); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; }
.onward__item:hover { background: rgba(217,180,90,.055); transform: translateY(-2px); }
@media (min-width: 620px) {
  .onward__grid { grid-template-columns: repeat(2,1fr); }
  .onward__item:nth-child(odd) { border-right: 1px solid var(--hair); }
}
@media (min-width: 1040px) {
  .onward__grid { grid-template-columns: repeat(4,1fr); }
  .onward__grid--3 { grid-template-columns: repeat(3,1fr); }
  .onward__item { border-right: 1px solid var(--hair); }
  .onward__item:last-child { border-right: 0; }
}
@media (max-width: 619px) {
  .onward__head { display: block; }
  .onward__head h2 { margin-top: 10px; }
  .onward__item { min-height: 0; padding-inline: 4px; }
}

.site-footer { border-top: 1px solid var(--hair); background: linear-gradient(180deg, var(--ink), #0a080a); padding: clamp(52px,7vw,88px) 0 40px; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 38px 28px; }
@media (min-width: 620px){ .footer__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px){ .footer__grid { grid-template-columns: 1.25fr .9fr 1fr 1.1fr; } }
.footer__seal img { height: 54px; width: auto; margin-bottom: 18px; }
.footer__blurb { color: var(--ivory-55); font-size: var(--fs-sm); max-width: 34ch; }
.footer__col h2 { font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--oat-70); margin-bottom: 16px; font-weight: var(--fw-semi); }
.footer__col a, .footer__col p { display: block; width: fit-content; max-width: 100%; color: var(--ivory-70); font-size: var(--fs-sm); margin: 0 0 10px; transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--gold); }
@media (max-width: 1079px) {
  .footer__col a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
}
.footer__wa { margin-top: 16px; max-width: 270px; }
.footer__wa .wa-status { padding: 12px; }
.footer__wa .wa-status__v { line-height: 1.45; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hair-soft); font-size: var(--fs-sm); color: var(--ivory-55); }

/* ============================================================
   SCROLL REVEALS (JS adds .in; base hidden only when JS present)
   ============================================================ */
.enhanced .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--paper), transform .9s var(--paper); }
.enhanced .reveal.in { opacity: 1; transform: none; }
.enhanced .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--paper), transform .8s var(--paper); }
.enhanced .stagger.in > * { opacity: 1; transform: none; }
.enhanced .stagger.in > *:nth-child(2){ transition-delay:.08s } .enhanced .stagger.in > *:nth-child(3){ transition-delay:.16s }
.enhanced .stagger.in > *:nth-child(4){ transition-delay:.24s } .enhanced .stagger.in > *:nth-child(5){ transition-delay:.32s }
.enhanced .stagger.in > *:nth-child(6){ transition-delay:.4s } .enhanced .stagger.in > *:nth-child(7){ transition-delay:.48s }

/* ============================================================
   KEYFRAMES — the motion vocabulary
   ============================================================ */
@keyframes settle   { to { opacity: 1; transform: none; } }
@keyframes fan      { from { opacity: 0; transform: translateY(18px) rotate(var(--r0,0deg)) scale(.97); } to { opacity: 1; transform: translate(var(--tx,0),var(--ty,0)) rotate(var(--r,0deg)) scale(1); } }
@keyframes float    { 0%,100% { transform: translate(var(--tx,0),var(--ty,0)) rotate(var(--r,0deg)); } 50% { transform: translate(var(--tx,0), calc(var(--ty,0px) - 10px)) rotate(var(--r,0deg)); } }
@keyframes drift    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes shimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.shimmer-line { height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent); background-size: 200% 100%; animation: shimmer 6s linear infinite; }

/* ============================================================
   PASS 1.5 — legacy token aliases so inline var(--teal) etc. in
   pre-existing interim pages keep resolving under the new palette.
   ============================================================ */
:root {
  --teal: var(--acc-letters);
  --lac: var(--acc-cards);
  --indigo: var(--acc-bags);
  --clay: var(--acc-accessories);
  --lotus: var(--acc-tags);
}

/* ============================================================
   BREADCRUMB — semantic, polished, replaces raw "Home/X/Y" text
   ============================================================ */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; padding: 18px 0 0; font-size: .78rem; letter-spacing: .03em; }
.breadcrumb a { color: var(--oat-70); position: relative; padding: .2em 0; transition: color .25s var(--ease); }
.breadcrumb a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--foil-soft); transition: width .3s var(--paper); }
.breadcrumb a:hover { color: var(--ivory); }
.breadcrumb a:hover::after { width: 100%; }
.breadcrumb__sep { color: var(--oat-45); font-size: .8em; }
.breadcrumb__current { color: var(--gold); font-weight: var(--fw-med); }
/* also style legacy raw markup so old pages aren't left with dev-output text */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; padding: 18px 0 0; font-size: .78rem; letter-spacing: .03em; list-style: none; }
.crumb a { color: var(--oat-70); transition: color .25s var(--ease); }
.crumb a:hover { color: var(--ivory); }
.crumb .sep { color: var(--oat-45); font-size: .8em; margin: 0 .1em; }
.crumb [aria-current="page"] { color: var(--gold); font-weight: var(--fw-med); }

/* ============================================================
   CTA SYSTEM — header CTA connected + sized; contextual labels
   ============================================================ */
.nav .header__cta, .header__cta {
  /* QA Round 1: the boxed, gold-filling CTA read as cramped and stuck onto the
     navigation. It is now part of the navigation system: ivory label, a gold rule
     that draws in on hover, and a faint warm surface. No border box, no sheen.

     QA Round 2: the selector is doubled up because `.nav a` (0,1,1) was beating
     `.header__cta` (0,1,0) and forcing `padding: .5em 0` onto it. With zero inline
     padding the separator hairline sat hard against the C of "Contact" and the
     hover rule started in the wrong place, which is the cramped look human QA
     reported. Same class of specificity bug as the Round 1 drawer CTA. */
  position: relative; overflow: visible;
  min-height: 44px; padding: 0 .5em 0 1.5em; border-radius: 0;
  border: 0; background: transparent; color: var(--ivory);
  /* `display` is deliberately NOT set here: this block's doubled selector outranks
     the `@media (min-width:1180px) { .header__cta { display:inline-flex } }` show
     rule, so declaring it here would hide the CTA at every width. Visibility stays
     owned by the two low-specificity rules that already handle it. */
  align-items: center; gap: .5em; letter-spacing: .06em;
  margin-left: clamp(10px, 1.4vw, 22px);
  transition: color .35s var(--paper);
}
.header__cta > span { position: relative; z-index: 1; }
.header__cta .arr { color: var(--gold); transition: transform .35s var(--paper); }
/* A separator so the CTA is clearly a distinct action, not another nav link. */
.header__cta::before { content: ""; position: absolute; left: 0; top: 50%; z-index: 0;
  width: 1px; height: 18px; transform: translateY(-50%);
  background: var(--hair-strong); transition: none; }
/* The rule that draws in under the label on hover / focus. */
.header__cta::after { content: ""; position: absolute; left: 1.35em; right: .35em; bottom: 9px;
  height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--paper); }
.header__cta:hover, .header__cta:focus-visible { color: var(--gold); }
.header__cta:hover::after, .header__cta:focus-visible::after { transform: scaleX(1); }
.header__cta:hover .arr { transform: translateX(4px); }
@keyframes ctaSheen { from { left: -50%; } to { left: 130%; } }
@media (min-width: 1180px) { .header__cta { display: inline-flex; } }
.btn--sm { padding: .7em 1.2em; font-size: .78rem; }

/* ============================================================
   SECTION COMPOSITION — image washes, motif crops, corner frames
   (max one background + one motif treatment per section, per brief)
   ============================================================ */
.wash { position: relative; isolation: isolate; }
.wash::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  opacity: .14; filter: saturate(.7) brightness(.75);
  -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.9) 18%, rgba(0,0,0,.9) 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.9) 18%, rgba(0,0,0,.9) 82%, transparent);
}
.wash--envelopes::before { background-image: var(--wash-img); }
.corner-frame { position: relative; }
.corner-frame::before, .corner-frame::after {
  content: ""; position: absolute; width: 22px; height: 22px; border: 1.4px solid var(--hair-strong); z-index: 2; pointer-events: none;
}
.corner-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.corner-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.motif-crop { border-radius: 5px; overflow: hidden; border: 1px solid var(--hair-soft); position: relative; }
.motif-crop img { width: 100%; height: 100%; object-fit: cover; }
.motif-crop__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px;
  background: linear-gradient(0deg, rgba(15,12,14,.92), transparent);
  font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--oat-70);
}

/* ============================================================
   ORIGINS — archival-label timeline treatment
   ============================================================ */
.origins { display: grid; grid-template-columns: 1fr; gap: clamp(24px,4vw,48px); align-items: center; }
@media (min-width: 900px){ .origins { grid-template-columns: .95fr 1.05fr; } }
.origins__media { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--hair-soft); }
.origins__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.origins__tag {
  position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 2px;
  background: rgba(15,12,14,.78); border: 1px solid var(--hair-strong);
  font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.origins__rail { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.origins__step { display: flex; gap: 14px; align-items: flex-start; }
.origins__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 7px; }
.origins__step p { margin: 0; font-size: var(--fs-sm); color: var(--ivory-70); }
.origins__step strong { color: var(--ivory-90); font-weight: var(--fw-med); }

/* ============================================================
   INDIAN DESIGN INSPIRATIONS — real product crops paired w/ labels
   ============================================================ */
.inspirations { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (min-width: 700px){ .inspirations { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1000px){ .inspirations { grid-template-columns: repeat(6,1fr); } }
.insp { position: relative; border-radius: 5px; overflow: hidden; aspect-ratio: 3/4; border: 1px solid var(--hair-soft); }
.insp img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--paper); }
.insp:hover img { transform: scale(1.08); }
.insp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,12,14,.88)); }
.insp span { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory-90); z-index: 1; }

/* ============================================================
   MATERIAL LIBRARY — tactile swatches
   ============================================================ */
.materials { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
@media (min-width: 700px){ .materials { grid-template-columns: repeat(4,1fr); } }
.material { border: 1px solid var(--hair-soft); border-radius: 5px; padding: 18px 16px; background: linear-gradient(155deg, rgba(239,229,208,.03), transparent); }
.material__k { font-size: .95rem; font-weight: var(--fw-med); color: var(--ivory-90); }
.material__v { font-size: var(--fs-sm); color: var(--oat-70); margin-top: 3px; }

/* ============================================================
   CRAFT / SILK-SCREEN — layered composition replacing plain
   image-left/text-right; motif-crop background + shimmer detail
   ============================================================ */
.craft { position: relative; isolation: isolate; }
.craft::before {
  content: ""; position: absolute; inset: -10% -6%; z-index: -1; opacity: .08;
  background: var(--motif-figures) center/160px 78px repeat;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent);
}
.craft__detail { position: relative; margin-top: 14px; border-radius: 4px; overflow: hidden; border: 1px solid var(--hair); }
.craft__detail img { width: 100%; display: block; }
.craft__detail::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(217,180,90,.22) 50%, transparent 60%);
  background-size: 220% 100%; background-position: -220% 0; opacity: 0; transition: opacity .3s;
}
.craft__detail:hover::after { opacity: 1; animation: shimmer 1.6s ease-out; }

/* ============================================================
   OCCASIONS
   ============================================================ */
.occasions { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px){ .occasions { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px){ .occasions { grid-template-columns: repeat(4,1fr); } }
.occasion { padding: 20px; border: 1px solid var(--hair-soft); border-radius: 5px; background: var(--soot); }
.occasion__k { font-size: .95rem; font-weight: var(--fw-med); color: var(--ivory-90); }
.occasion__v { font-size: var(--fs-sm); color: var(--oat-70); margin-top: 4px; }

/* ============================================================
   ENQUIRY JOURNEY explainer
   ============================================================ */
.journey { display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: step; }
@media (min-width: 780px){ .journey { grid-template-columns: repeat(5,1fr); } }
.journey__step { position: relative; padding: 18px 16px 18px 0; }
.journey__step::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hair-strong); color: var(--gold); font-size: .78rem; font-weight: var(--fw-semi); margin-bottom: 10px; }
.journey__step h4 { font-size: .95rem; font-weight: var(--fw-med); margin-bottom: 4px; }
.journey__step p { font-size: var(--fs-sm); color: var(--ivory-55); margin: 0; }
@media (min-width: 780px) {
  .journey__step { padding-right: 20px; }
  .journey__step:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(100% - 10px); width: 20px; height: 1px; background: var(--hair); }
}

/* ============================================================
   WRAPPING PAPER — editorial gallery within Packaging (not a top-level collection)
   ============================================================ */
.wrap-gallery { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (min-width: 700px){ .wrap-gallery { grid-template-columns: repeat(5,1fr); } }
.wrap-gallery__tile { margin: 0; border-radius: 5px; overflow: hidden; aspect-ratio: 3/4; border: 1px solid var(--hair-soft); background: var(--plum); }
.wrap-gallery__tile img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   PRODUCT CARD SYSTEM — sample (photo) / archive-label (no photo) /
   featured panel (anchor imagery)
   ============================================================ */
.catalogue { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (min-width: 640px){ .catalogue { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 980px){ .catalogue { grid-template-columns: repeat(4,1fr); } }

.pcard { border: 1px solid var(--hair-soft); border-radius: 5px; background: var(--soot); overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 110px; transition: box-shadow .4s var(--paper), border-color .4s var(--paper); }
.pcard.is-jumped, .morecard.is-jumped { border-color: var(--gold, #d9b45a); box-shadow: 0 0 0 3px rgba(217,180,90,.35); }
.morecard { scroll-margin-top: 110px; }
.pcard__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--plum); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--paper); }
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pcard__name { font-size: .92rem; font-weight: var(--fw-med); color: var(--ivory-90); }
.pcard__meta { font-size: .78rem; color: var(--oat-70); }
.pcard__cta { margin-top: auto; padding-top: 8px; min-height: 44px; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: .4em; }
.pcard__collection { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-micro); color: var(--ivory-70); text-decoration: underline; text-underline-offset: 3px; }
.pcard__cta .arr { transition: transform .3s var(--paper); }
.pcard:hover .pcard__cta .arr { transform: translateX(3px); }

/* Archive-label card: no photo, typographic treatment on a dark plate */
.pcard--archive { justify-content: center; }
.pcard--archive .pcard__media { display: none; }
.pcard--archive { background: linear-gradient(160deg, var(--plum), var(--soot)); min-height: 168px; justify-content: center; padding: 4px; }
.pcard--archive .pcard__body { align-items: flex-start; justify-content: center; }
.pcard--archive .pcard__name::before { content: "—"; color: var(--gold); margin-right: .4em; }

/* Featured panel: larger anchor imagery, spans 2 cols on wider grids */
.pcard--featured { grid-column: span 2; }
.pcard--featured .pcard__media { aspect-ratio: 16/10; }
@media (max-width: 639px) { .pcard--featured { grid-column: span 2; } }

.catalogue-more { text-align: center; margin-top: 18px; font-size: var(--fs-sm); color: var(--ivory-55); }

/* ============================================================
   GIFT ENVELOPES — ceremonial category hero + shingle/fan/open
   ============================================================ */
.cat-hero { position: relative; min-height: min(72vh,680px); display: flex; align-items: flex-end; padding: 96px 0 52px; overflow: hidden; }
.cat-hero__bg { position: absolute; inset: 0; z-index: -2; }
/* QA Round 2 — cross-category normalisation. Gift Envelopes is the only hero whose
   background is a full-bleed product photograph, and at opacity .5 the title and body
   copy sat directly on a legible print. Every other category now runs one blurred,
   knocked-back atmospheric layer; this brings the seventh in line with that rule
   without touching its approved fan composition or replacing any image. */
.cat-hero__bg img { width: 100%; height: 100%; object-fit: cover;
  opacity: .30; filter: blur(8px) saturate(.4) brightness(.56) contrast(.92);
  transform: scale(1.05);   /* hides the blur's soft edge at the band boundary */ }
/* The copy side gets a dark ground so nothing reads over the photograph. */
.cat-hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(15,12,14,.97) 34%, rgba(15,12,14,.72) 58%,
                                     rgba(15,12,14,.35) 78%, rgba(15,12,14,.12) 100%); }
@media (max-width: 899px) {
  .cat-hero__bg img { opacity: .22; filter: blur(12px) saturate(.3) brightness(.46) contrast(.9); }
  .cat-hero__bg::after { background: linear-gradient(180deg, rgba(15,12,14,.96) 42%,
                                                     rgba(15,12,14,.7) 74%, rgba(15,12,14,.45)); }
}
.cat-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,12,14,.25), rgba(15,12,14,.75) 55%, var(--ink) 96%); }
/* FINAL PASS — Gift Envelopes form layer. This hero predates the .catart system and has
   no atmosphere element of its own, so its one structural detail is drawn here: the V of
   an envelope flap opening across the product side, over a very faint print haze. Same
   rule as the other six — CSS only, product side only, gone before the copy and before
   every edge. The approved ceremonial fan composition is untouched. */
.cat-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(118deg, transparent 0 49.6%, rgba(239,229,208,.085) 49.6% 50.1%, rgba(0,0,0,.22) 50.1% 54%, transparent 54%),
    linear-gradient(62deg, transparent 0 49.6%, rgba(239,229,208,.085) 49.6% 50.1%, rgba(0,0,0,.22) 50.1% 54%, transparent 54%),
    radial-gradient(46% 44% at 76% 62%, rgba(217,180,90,.09), transparent 74%);
  -webkit-mask-image: linear-gradient(96deg, transparent 0 40%, rgba(0,0,0,.45) 58%, #000 76%, #000 91%, transparent 100%);
          mask-image: linear-gradient(96deg, transparent 0 40%, rgba(0,0,0,.45) 58%, #000 76%, #000 91%, transparent 100%); }
@media (max-width: 899px) {
  .cat-hero::before { opacity: .28;
    -webkit-mask-image: linear-gradient(180deg, transparent 0 64%, rgba(0,0,0,.45) 80%, #000 95%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0 64%, rgba(0,0,0,.45) 80%, #000 95%, transparent 100%); }
}
.cat-hero__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: end; position: relative; z-index: 1; width: 100%; }
@media (min-width: 940px){ .cat-hero__grid { grid-template-columns: 1.1fr .9fr; } }
.cat-hero__title { font-size: var(--fs-hero); font-weight: var(--fw-light); line-height: .96; margin: .3em 0 .4em; }
.cat-hero__title em { font-style: normal; }
.cat-hero__sub { max-width: 46ch; color: var(--ivory-70); font-weight: var(--fw-light); }
.cat-hero__range { margin: 14px 0 0; font-size: var(--fs-sm); letter-spacing: .04em; color: var(--oat-70); }
.cat-hero__range strong { color: var(--gold); font-weight: var(--fw-semi); }
@media (min-width: 940px) and (max-height: 920px) {
  .cat-hero { min-height: calc(100vh - 122px); align-items: center; padding: 46px 0 34px; }
  .cat-hero__title { font-size: clamp(2.8rem,5.3vw,4.7rem); }
  .cat-hero__sub { font-size: .98rem; line-height: 1.5; }
  .cat-hero .ge-fan { transform: scale(.9); transform-origin: center; }
}
@media (min-width: 940px) and (max-width: 1100px) and (max-height: 920px) {
  .cat-hero .hero__cta { gap: 8px !important; }
  .cat-hero .hero__cta .btn { padding: .8em 1em; font-size: var(--fs-micro); }
}
/* FINAL PASS — CTA row consistency. Gift Envelopes is the one hero that is not a
   .cat-hero--set, and its copy column is narrower, so its two hero buttons wrapped onto
   separate lines while the other six sat side by side. Trimming the inline padding on
   this hero only fixes the inconsistency without touching its approved fan composition
   or the six pages that were already correct. */
@media (min-width: 940px) {
  .cat-hero:not(.cat-hero--set) .hero__cta .btn { padding-inline: 1.12em; }
}

/* Identity rail: thin vertical category label, echoes homepage spine */
.cat-rail { display: none; }
@media (min-width: 940px) {
  .cat-rail { display: flex; position: absolute; right: var(--gutter); top: 0; bottom: 0; z-index: 1; align-items: center; writing-mode: vertical-rl; font-size: var(--fs-micro); letter-spacing: .48em; text-transform: uppercase; color: var(--oat-45); }
}

/* Shingled / fan envelope composition */
.shingle { position: relative; width: 100%; aspect-ratio: 5/4; }
.shingle__card { position: absolute; border-radius: 3px; overflow: hidden; box-shadow: var(--shadow-lift); border: 1px solid rgba(239,229,208,.1); opacity: 0; }
.shingle__card img { width: 100%; height: 100%; object-fit: cover; }
.shingle.is-lit .shingle__card { animation: fan 1s var(--paper) forwards; }
.shingle.is-lit .shingle__card:nth-child(1){ animation-delay:.1s } .shingle.is-lit .shingle__card:nth-child(2){ animation-delay:.22s }
.shingle.is-lit .shingle__card:nth-child(3){ animation-delay:.34s } .shingle.is-lit .shingle__card:nth-child(4){ animation-delay:.46s }
.shingle.is-lit .shingle__card:nth-child(5){ animation-delay:.58s }

/* One envelope-flap Open interaction */
.envelope-open { position: relative; width: min(100%, 340px); margin: 0 auto; aspect-ratio: 4/3; perspective: 900px; }
.envelope-open__body { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--hair-strong); }
.envelope-open__body img { width: 100%; height: 100%; object-fit: cover; }
.envelope-open__flap {
  position: absolute; top: 0; left: 0; right: 0; height: 52%; transform-origin: top center;
  background: linear-gradient(160deg, var(--plum), var(--soot)); border-bottom: 1px solid var(--hair-strong);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform 1.1s var(--paper);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 16px;
}
.envelope-open__flap span { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.envelope-open:hover .envelope-open__flap, .envelope-open:focus-within .envelope-open__flap { transform: rotateX(-150deg); }
.envelope-open__flap { cursor: pointer; }

.range-list { columns: 2; column-gap: 24px; }
@media (min-width: 700px){ .range-list { columns: 3; } }
.range-list li { font-size: var(--fs-sm); color: var(--ivory-70); padding: 6px 0; break-inside: avoid; border-bottom: 1px solid var(--hair-soft); }

/* ============================================================
   NO-JS FALLBACK — if JavaScript never runs, the entrance-hidden
   hero content and collage must still be fully visible.
   (Header, nav and footer are plain markup and always render.)
   ============================================================ */
html.no-js .ceremony__mark,
html.no-js .ceremony__tag,
html.no-js .hero .reveal-up,
html.no-js .collage__card { opacity: 1 !important; transform: none !important; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
/* ============================================================
   PASS 1.5 — interim page components (chips · swatches · steps · panel)
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  font-size: var(--fs-sm); color: var(--ivory-70);
  padding: 9px 16px; border: 1px solid var(--hair); border-radius: 999px;
  background: rgba(217,180,90,.05); transition: border-color .3s var(--ease), color .3s var(--ease);
}
.chips li:hover { border-color: var(--hair-strong); color: var(--ivory); }

.swatches { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (min-width: 640px){ .swatches { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 940px){ .swatches { grid-template-columns: repeat(6,1fr); } }
.swatch { border: 1px solid var(--hair-soft); border-radius: 6px; overflow: hidden; background: var(--soot); }
.swatch__chip { display: block; height: 70px; background: linear-gradient(135deg, var(--c1,#c9b79a), var(--c2,#8a7350)); position: relative; }
.swatch__chip::after { content: ""; position: absolute; inset: 0; opacity: .18; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.swatch__name { display: block; padding: 10px 12px 2px; font-size: .85rem; font-weight: var(--fw-med); color: var(--ivory-90); }
.swatch__note { display: block; padding: 0 12px 12px; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--oat-70); }

.steps { display: grid; gap: 14px; counter-reset: step; }
@media (min-width: 760px){ .steps { grid-template-columns: repeat(5,1fr); } }
.step { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px solid var(--hair-soft); border-radius: 6px; background: var(--soot); }
@media (min-width: 760px){ .step { flex-direction: column; } }
.step__num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: var(--fw-semi); color: var(--ink); background: var(--foil-btn); }
.step__title { font-size: 1.02rem; font-weight: var(--fw-med); margin: 0 0 .3rem; }
.step__text { font-size: var(--fs-sm); color: var(--ivory-55); margin: 0; }

.panel { padding: clamp(24px,4vw,40px); border: 1px solid var(--hair-soft); border-radius: 8px; background: linear-gradient(160deg, var(--plum), var(--soot)); }

/* ============================================================
   GIFT ENVELOPES pilot — ceremonial fan + flap Open interaction
   ============================================================ */
.ge-fan { position: relative; width: min(92vw, 520px); aspect-ratio: 5/4; margin: 0 auto; }
.ge-fan__piece { position: absolute; inset: 0; margin: auto; width: 58%; height: 82%; border-radius: 4px; overflow: hidden;
  box-shadow: var(--shadow-lift); border: 1px solid rgba(239,229,208,.1); transform-origin: bottom center; }
.ge-fan__piece img { width: 100%; height: 100%; object-fit: cover; }
.ge-fan__piece:nth-child(1){ --rot:-26deg } .ge-fan__piece:nth-child(2){ --rot:-13deg }
.ge-fan__piece:nth-child(3){ --rot:0deg } .ge-fan__piece:nth-child(4){ --rot:13deg }
.ge-fan__piece:nth-child(5){ --rot:26deg }
/* Reveal: OPACITY is instant (not transitioned) so the fan becomes visible the moment
   .is-lit lands, even if the transform transition is throttled (background tab / delayed JS).
   Only the transform (slide + rotate) is animated, and that is purely decorative. */
.enhanced .ge-fan__piece { opacity: 0; transform: rotate(0) translateY(24px);
  transition: transform .8s var(--paper); }
.enhanced .ge-fan__piece:nth-child(2){ transition-delay: .08s } .enhanced .ge-fan__piece:nth-child(3){ transition-delay: .16s }
.enhanced .ge-fan__piece:nth-child(4){ transition-delay: .24s } .enhanced .ge-fan__piece:nth-child(5){ transition-delay: .32s }
.enhanced .ge-fan.is-lit .ge-fan__piece { opacity: 1; transform: rotate(var(--rot)); }
html.no-js .ge-fan__piece { opacity: 1; transform: rotate(var(--rot)); }
@media (prefers-reduced-motion: reduce){ .enhanced .ge-fan__piece { transition: none; } }

/* Signature Open scene */
.ge-open { display: grid; grid-template-columns: 1fr; gap: clamp(28px,5vw,56px); align-items: center; }
@media (min-width: 900px){ .ge-open { grid-template-columns: 1fr 1fr; } }
.ge-open__stage { position: relative; aspect-ratio: 4/3; perspective: 1400px; display: flex; align-items: center; justify-content: center; }
.ge-open__env { position: relative; width: min(80%, 380px); aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-deep); border: 1px solid var(--hair); }
.ge-open__env img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ge-open__card { position: absolute; left: 8%; right: 8%; bottom: 8%; height: 62%; border-radius: 3px;
  background: linear-gradient(180deg, #f3ead6, #e4d7bb); box-shadow: 0 -8px 20px rgba(0,0,0,.35); transform: translateY(64%);
  transition: transform .7s var(--paper); display: flex; align-items: center; justify-content: center; z-index: 1; }
.ge-open__card span { font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: #7c623c; }
.ge-open__flap { position: absolute; top: 0; left: 0; right: 0; height: 52%; z-index: 2; transform-origin: top center;
  background: linear-gradient(160deg, rgba(15,12,14,.55), rgba(15,12,14,.15)), var(--foil-soft);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .7s var(--paper); }
.ge-open.is-open .ge-open__flap { transform: rotateX(180deg); }
.ge-open.is-open .ge-open__card { transform: translateY(0); }
.ge-open__btn { margin-top: 18px; }
@media (prefers-reduced-motion: reduce){ .ge-open__flap, .ge-open__card { transition: none; } }

/* Close-up "Details inside and out" interaction (one real envelope, zoom to detail) */
.env-detail__frame { position: relative; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--hair); box-shadow: var(--shadow-deep); }
.env-detail__frame img { width: 100%; height: 100%; object-fit: cover; transform-origin: 64% 66%;
  transition: transform 1s var(--paper); }
.env-detail.is-zoomed .env-detail__frame img { transform: scale(2.1); }
.env-detail__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(217,180,90,.25); }
.env-detail__cap { display: block; margin-top: 10px; font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--oat-70); }
@media (prefers-reduced-motion: reduce){ .env-detail__frame img { transition: none; } }

/* Occasions */
.occasions { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px){ .occasions { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px){ .occasions { grid-template-columns: repeat(3,1fr); } }
.occasion { padding: 22px 24px; border: 1px solid var(--hair-soft); border-radius: 6px; background: var(--soot); transition: border-color .3s var(--ease), transform .5s var(--paper); }
.occasion:hover { border-color: var(--hair-strong); transform: translateY(-3px); }
.occasion__k { font-size: 1.05rem; font-weight: var(--fw-med); color: var(--ivory-90); margin-bottom: .3rem; }
.occasion__v { font-size: var(--fs-sm); color: var(--ivory-55); }

/* Shortlist (enhancement-only; hidden until an item is added) */
.pcard__sl { margin-top: 8px; display: inline-flex; align-items: center; gap: .45em; font-size: var(--fs-micro); letter-spacing: .04em;
  text-transform: uppercase; color: var(--oat-70); border: 1px solid var(--hair-soft); border-radius: 999px; padding: 7px 12px;
  min-height: 44px; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); align-self: flex-start; }
.pcard__sl::before { content: "+"; font-size: 1.05em; line-height: 1; }
.pcard__sl:hover { border-color: var(--hair-strong); color: var(--ivory); }
.pcard__sl.is-added { color: var(--gold); border-color: var(--hair-strong); background: rgba(217,180,90,.08); }
.pcard__sl.is-added::before { content: "\2713"; }

.shortlist-bar { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 10px)); z-index: 90; display: none; }
.shortlist-bar.is-visible { display: block; }
.shortlist-bar__toggle { display: inline-flex; align-items: center; gap: .5em; padding: 12px 18px; min-height: 46px; border-radius: 999px;
  background: var(--foil-btn); color: var(--ink); font-size: .8rem; font-weight: var(--fw-semi); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: var(--shadow-lift); }
.shortlist-bar__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: rgba(15,12,14,.22); font-weight: var(--fw-bold); }
.shortlist-bar__panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(90vw, 340px); padding: 18px;
  background: rgba(23,18,22,.98); backdrop-filter: blur(16px); border: 1px solid var(--hair); border-radius: 10px; box-shadow: var(--shadow-deep); }
.shortlist-bar__title { font-size: 1rem; color: var(--ivory); margin: 0 0 6px; }
.shortlist-bar__note { font-size: var(--fs-label); letter-spacing: .02em; color: var(--oat-70); margin: 0 0 12px; }
.shortlist-bar__list { max-height: 40vh; overflow-y: auto; margin: 0 0 14px; }
.shortlist-bar__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair-soft); font-size: var(--fs-sm); color: var(--ivory-90); }
.shortlist-bar__rm { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 6px; color: var(--oat-70); font-size: 1.1rem; line-height: 1; transition: background .2s var(--ease), color .2s var(--ease); }
.shortlist-bar__rm:hover { background: rgba(192,86,63,.18); color: var(--ivory); }
.shortlist-bar__actions { display: flex; flex-direction: column; gap: 10px; }
.shortlist-bar__call { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--ivory-90); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.shortlist-bar__clear { font-size: var(--fs-sm); color: var(--oat-70); min-height: 44px; padding: 8px; }
.shortlist-bar__clear:hover { color: var(--ivory); }
@media (max-width: 340px) and (max-height: 600px) {
  .shortlist-bar { right: max(0px, env(safe-area-inset-right, 0px)); top: 116px; bottom: auto; }
  .shortlist-bar__toggle { width: 46px; min-width: 46px; height: 46px; padding: 0; justify-content: center; gap: 0; border-radius: 50%; }
  .shortlist-bar__toggle > span:last-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

/* ============================================================
   PASS 1.6 — GLOBAL BACKGROUND & ATMOSPHERE SYSTEM
   Reusable recipes so no section is a flat black rectangle.
   A section opts in with class "atmo" and, optionally, inline
   custom properties:  --acc (category accent)  --wash (image url)
   Rule of thumb enforced by the classes: at most ONE image wash +
   ONE motif/glow per section; never a busy image behind body text.
   ============================================================ */

/* -- Product-derived motif line-art (simplified interpretations, gold stroke) -- */
:root {
  --motif-paisley-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='28' viewBox='0 0 240 28'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-width='1' stroke-linecap='round' opacity='.9'%3E%3Cpath d='M12 20c0-6 5-10 10-10s8 3 8 8-4 7-8 5'/%3E%3Ccircle cx='22' cy='16' r='1.4' fill='%23d9b45a' stroke='none'/%3E%3Cpath d='M60 8l4 6-4 6-4-6z'/%3E%3Cpath d='M96 20c0-6 5-10 10-10s8 3 8 8-4 7-8 5'/%3E%3Ccircle cx='106' cy='16' r='1.4' fill='%23d9b45a' stroke='none'/%3E%3Cpath d='M144 8l4 6-4 6-4-6z'/%3E%3Cpath d='M180 20c0-6 5-10 10-10s8 3 8 8-4 7-8 5'/%3E%3Ccircle cx='190' cy='16' r='1.4' fill='%23d9b45a' stroke='none'/%3E%3Cpath d='M228 8l4 6-4 6-4-6z'/%3E%3C/g%3E%3C/svg%3E");
  --motif-diamond-chain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-width='1'%3E%3Cpath d='M0 7h44M76 7h44'/%3E%3Cpath d='M60 1l5 6-5 6-5-6z'/%3E%3Ccircle cx='48' cy='7' r='1.3' fill='%23d9b45a' stroke='none'/%3E%3Ccircle cx='72' cy='7' r='1.3' fill='%23d9b45a' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  /* Original, product-derived ornaments (medallion, floral corner, botanical vine) */
  --motif-medallion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-width='1.1'%3E%3Ccircle cx='60' cy='60' r='10'/%3E%3Ccircle cx='60' cy='60' r='34'/%3E%3Ccircle cx='60' cy='60' r='52'/%3E%3Cpath d='M60 8c7 10 7 20 0 30-7-10-7-20 0-30z' transform='rotate(0 60 60)'/%3E%3Cpath d='M60 8c7 10 7 20 0 30-7-10-7-20 0-30z' transform='rotate(45 60 60)'/%3E%3Cpath d='M60 8c7 10 7 20 0 30-7-10-7-20 0-30z' transform='rotate(90 60 60)'/%3E%3Cpath d='M60 8c7 10 7 20 0 30-7-10-7-20 0-30z' transform='rotate(135 60 60)'/%3E%3Cpath d='M60 8c7 10 7 20 0 30-7-10-7-20 0-30z' transform='rotate(180 60 60)'/%3E%3Cpath d='M60 8c7 10 7 20 0 30-7-10-7-20 0-30z' transform='rotate(225 60 60)'/%3E%3Cpath d='M60 8c7 10 7 20 0 30-7-10-7-20 0-30z' transform='rotate(270 60 60)'/%3E%3Cpath d='M60 8c7 10 7 20 0 30-7-10-7-20 0-30z' transform='rotate(315 60 60)'/%3E%3C/g%3E%3C/svg%3E");
  --motif-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M8 8c34 0 62 28 62 62'/%3E%3Cpath d='M8 8c20 3 34 17 36 37'/%3E%3Cpath d='M24 8c-7 0-12 5-12 12 7 0 12-5 12-12z'/%3E%3Cpath d='M8 24c0-7 5-12 12-12 0 7-5 12-12 12z'/%3E%3Ccircle cx='70' cy='70' r='2.2' fill='%23d9b45a' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --motif-vine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='26' viewBox='0 0 220 26'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 13c22-11 44 11 66 0s44-11 66 0 44 11 66 0'/%3E%3Cpath d='M33 7c5-3 9-2 10 3-5 2-9 1-10-3z'/%3E%3Cpath d='M99 19c-5 3-9 2-10-3 5-2 9-1 10 3z'/%3E%3Cpath d='M165 7c5-3 9-2 10 3-5 2-9 1-10-3z'/%3E%3Ccircle cx='66' cy='13' r='1.5' fill='%23d9b45a' stroke='none'/%3E%3Ccircle cx='132' cy='13' r='1.5' fill='%23d9b45a' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  /* Repeating product-derived FIELDS (block-print floret grid, sparse paisley) for atelier-wall tooth */
  --field-blockprint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-width='.9'%3E%3Cpath d='M32 12c3 4 3 8 0 12-3-4-3-8 0-12zM32 40c3 4 3 8 0 12-3-4-3-8 0-12zM12 32c4-3 8-3 12 0-4 3-8 3-12 0zM40 32c4-3 8-3 12 0-4 3-8 3-12 0z'/%3E%3Ccircle cx='32' cy='32' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.2'/%3E%3Ccircle cx='64' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='64' r='2.2'/%3E%3Ccircle cx='64' cy='64' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  --field-paisley: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-width='1'%3E%3Cpath d='M34 44c0-13 11-21 21-19s15 13 8 23-19 9-21-2c-1-7 3-11 9-10'/%3E%3Ccircle cx='55' cy='40' r='1.5' fill='%23d9b45a' stroke='none'/%3E%3Cpath d='M104 119c0-13 11-21 21-19s15 13 8 23-19 9-21-2c-1-7 3-11 9-10'/%3E%3Ccircle cx='125' cy='115' r='1.5' fill='%23d9b45a' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --motif-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96' viewBox='0 0 120 96'%3E%3Cg fill='%23d9b45a'%3E%3Cpath d='M20 84c-9 0-16-7-16-17 0-20 16-38 38-51l6 9C34 34 26 44 24 54c11 0 19 7 19 17s-9 13-23 13zM82 84c-9 0-16-7-16-17 0-20 16-38 38-51l6 9C96 34 88 44 86 54c11 0 19 7 19 17s-9 13-23 13z'/%3E%3C/g%3E%3C/svg%3E");
}

/* -- BG System 1: product image wash (dissolves into the dark) -- */
/* overflow-x: clip found in QA Round 1. Decorative watermarks bleed off the edge on
   purpose (.wm--edge-r sits at right:-144px), but with overflow visible that bleed
   made the whole page horizontally scrollable by 144px. `clip` keeps the bleed
   looking identical while removing the scroll, and unlike `hidden` it does not turn
   the section into a scroll container, so the sticky header and .atmo__glow are
   unaffected. */
.atmo { position: relative; isolation: isolate; overflow-x: clip; }
.atmo > .container, .atmo > * { position: relative; z-index: 1; }
.atmo__wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.atmo__wash::before {
  content: ""; position: absolute; inset: -2% ; background-image: var(--wash);
  background-size: cover; background-position: var(--wash-pos, center);
  opacity: var(--wash-op, .32); filter: saturate(var(--wash-sat, .9)) contrast(1.03);
  /* dissolve edges so it never reads as wallpaper */
  -webkit-mask-image: radial-gradient(120% 90% at var(--wash-anchor, 80% 15%), #000 0%, rgba(0,0,0,.5) 38%, transparent 70%);
          mask-image: radial-gradient(120% 90% at var(--wash-anchor, 80% 15%), #000 0%, rgba(0,0,0,.5) 38%, transparent 70%);
}
.atmo__wash::after { /* keep body copy readable */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,12,14,.35), rgba(15,12,14,.62));
}

/* -- BG System 4: category colour atmosphere (radial glow) -- */
.atmo__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 55% at var(--glow-pos, 15% 25%), color-mix(in srgb, var(--acc, var(--gold)) 24%, transparent), transparent 62%); }
.atmo__glow--soft { opacity: .82; }

/* -- Motif band that Draws across a section boundary (BG System 3 / transitions) -- */
.motif-band { height: 26px; background: var(--motif-paisley-band) center/240px 26px repeat-x; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.enhanced .motif-band { clip-path: inset(0 100% 0 0); }
.enhanced .motif-band.in { animation: bandDraw 1.2s var(--paper) forwards; }
@keyframes bandDraw { to { clip-path: inset(0 0 0 0); } }

/* -- Gold seam that draws between chapters -- */
.seam { position: relative; height: 1px; margin: 0 auto; width: min(1100px, 88%);
  background: linear-gradient(90deg, transparent, var(--hair-strong), transparent); }
.enhanced .seam { transform: scaleX(0); transform-origin: center; }
.enhanced .seam.in { animation: seamDraw 1s var(--paper) forwards; }
@keyframes seamDraw { to { transform: scaleX(1); } }

/* -- BG System 6: pressed logo seal watermark (one per page max) -- */
.pressed-seal { position: absolute; z-index: 0; pointer-events: none;
  width: min(46%, 420px); opacity: .05; filter: grayscale(1) brightness(1.6); }
.pressed-seal--tr { top: 6%; right: -3%; }
.pressed-seal--bl { bottom: -6%; left: -4%; }

/* ============================================================
   ART-DIRECTION LAYER (Pass 1.8.2)
   Priority of decorative assets: 1) Chimanlals logo watermark,
   2) product-derived motifs, 3) paper texture, 4) folk line-art,
   5) gold ornament. Every placement is deliberate; nothing is
   centred or pasted at random. All layers sit BEHIND content
   (z-index 0) and never sit directly behind paragraphs.
   ============================================================ */
/* Logo as primary decorative asset: large, cropped, emerging from darkness */
.wm { position: absolute; z-index: 0; pointer-events: none; opacity: .09;
  background: url("../images/logo/logo-watermark.png") no-repeat center / contain;
  filter: grayscale(1) brightness(1.55); }
@media (prefers-reduced-motion: no-preference){
  .wm--drift { animation: wmDrift 22s ease-in-out infinite alternate; }
}
@keyframes wmDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-14px,0); } }
/* emerges from the right darkness, dissolving inward */
.wm--edge-r { top: 50%; right: -10%; width: min(66%, 720px); height: 118%; margin-top: -59%;
  -webkit-mask-image: linear-gradient(270deg, #000 8%, transparent 78%);
          mask-image: linear-gradient(270deg, #000 8%, transparent 78%); }
/* emerges from the left */
.wm--edge-l { top: 50%; left: -12%; width: min(60%, 640px); height: 110%; margin-top: -55%;
  -webkit-mask-image: linear-gradient(90deg, #000 8%, transparent 78%);
          mask-image: linear-gradient(90deg, #000 8%, transparent 78%); }
/* rises from the bottom, fading up (footer transitions / final CTA) */
.wm--rise { left: 50%; bottom: -34%; width: min(88%, 900px); height: 150%; transform: translateX(-50%);
  opacity: .07;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 70%);
          mask-image: linear-gradient(0deg, #000, transparent 70%); }
@media (max-width: 720px){
  .wm--edge-r, .wm--edge-l { width: 92%; opacity: .06; }
  .wm--rise { width: 130%; opacity: .05; }
}

/* Corner / medallion ornaments (product-derived motifs) */
.ornm { position: absolute; z-index: 0; pointer-events: none; opacity: .5; background-repeat: no-repeat; background-size: contain; }
.ornm--medallion { background-image: var(--motif-medallion); width: 220px; height: 220px; opacity: .16; }
.ornm--corner { background-image: var(--motif-corner); width: 92px; height: 92px; opacity: .55; }
.ornm--tl { top: 14px; left: 14px; }
.ornm--tr { top: 14px; right: 14px; transform: scaleX(-1); }
.ornm--bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
.ornm--br { bottom: 14px; right: 14px; transform: scale(-1,-1); }
/* botanical vine divider (reusable, replaces bare gaps) */
.vine { height: 26px; background: var(--motif-vine) center / 220px 26px repeat-x; opacity: .45; }
.vine--short { width: 220px; margin-inline: auto; background-repeat: no-repeat; }

/* Product-derived FIELD: faint gold pattern that gives dark voids atelier-wall tooth.
   Masked to bloom from one corner and dissolve well before it reaches the text. */
.field { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05; }
.field--blockprint { background: var(--field-blockprint) repeat; background-size: 60px 60px; }
.field--paisley { background: var(--field-paisley) repeat; background-size: 190px 190px; opacity: .06; }
.field--tr { -webkit-mask-image: radial-gradient(78% 78% at 100% 0%, #000, transparent 72%); mask-image: radial-gradient(78% 78% at 100% 0%, #000, transparent 72%); }
.field--tl { -webkit-mask-image: radial-gradient(78% 78% at 0% 0%, #000, transparent 72%); mask-image: radial-gradient(78% 78% at 0% 0%, #000, transparent 72%); }
.field--br { -webkit-mask-image: radial-gradient(78% 78% at 100% 100%, #000, transparent 72%); mask-image: radial-gradient(78% 78% at 100% 100%, #000, transparent 72%); }
.field--bl { -webkit-mask-image: radial-gradient(78% 78% at 0% 100%, #000, transparent 72%); mask-image: radial-gradient(78% 78% at 0% 100%, #000, transparent 72%); }
.field--top { -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%); mask-image: linear-gradient(180deg, #000, transparent 60%); }
@media (max-width: 720px){ .field { opacity: .04; } }

/* ============================================================
   PASS 2.5.1 — category story-band visual anchor
   The story/intro band on the six generator-driven category pages
   previously had only a very faint .field pattern, leaving a large
   empty area beside the copy at desktop widths. This one class adds
   a single quiet handmade-paper-sheet motif, used only where the
   category is most material-led (Letter Papers). The other five
   categories reuse the EXISTING .wm / .ornm primitives (see
   STORY_ART in build_category.py) rather than a new asset per page.
   Static by default; any drift motion already gates behind
   prefers-reduced-motion: no-preference via the shared .wm--drift rule.
   ============================================================ */
.storyband { overflow: hidden; }
.storyband > .storyband__wm.wm--edge-r,
.storyband > .storyband__wm.wm--edge-l { top: -4%; height: 108%; margin-top: 0; }
.storyband__paper { position: absolute; z-index: 0; pointer-events: none;
  top: 10%; right: -4%; width: min(42%, 340px); aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, rgba(239,229,208,.07), rgba(239,229,208,.02));
  border: 1px solid var(--hair-soft); border-radius: 3px; transform: rotate(-3deg);
  -webkit-mask-image: radial-gradient(88% 88% at 62% 38%, #000 52%, transparent 86%);
          mask-image: radial-gradient(88% 88% at 62% 38%, #000 52%, transparent 86%); }
.storyband__paper::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--paper-fibre); background-size: 200px 200px; opacity: .45; mix-blend-mode: overlay; }
@media (max-width: 900px){ .storyband__paper { width: 56%; right: -10%; } }
@media (max-width: 620px){ .storyband__paper { width: 60%; right: -18%; top: 6%; opacity: .7; } }

/* Oversized decorative quotation mark (reviews / testimonial voids) */
.quote-mark { position: absolute; z-index: 0; pointer-events: none; width: 150px; height: 120px;
  background: var(--motif-quote) no-repeat center / contain; opacity: .1; }

/* Final CTA "paper plate": buttons rest on a crafted, deckle-framed surface, not empty space */
.cta-plate { position: relative; max-width: 760px; margin: 0 auto; padding: clamp(34px,5vw,58px) clamp(24px,5vw,56px);
  border-radius: 4px; isolation: isolate;
  background:
    radial-gradient(120% 140% at 50% -30%, rgba(217,180,90,.10), transparent 62%),
    linear-gradient(168deg, rgba(34,26,36,.55), rgba(23,18,22,.5)); }
.cta-plate::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--paper-fibre); background-size: 210px 210px; opacity: .1; mix-blend-mode: screen; }
/* thin gold double rule, drawn slightly inside the plate edge */
.cta-plate::after { content: ""; position: absolute; inset: 12px; z-index: -1; border: 1px solid rgba(217,180,90,.22);
  box-shadow: inset 0 0 0 3px rgba(217,180,90,.05); border-radius: 2px; pointer-events: none; }

/* Composed enquiry panel: unifies heading + paths + CTA on one crafted surface */
.enq-frame { position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--hair-soft);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(217,180,90,.10), transparent 60%),
    linear-gradient(165deg, var(--plum), var(--soot));
  padding: clamp(34px, 5vw, 60px) clamp(20px, 5vw, 64px); }
.enq-frame > :not(.wm):not(.ornm) { position: relative; z-index: 1; }
.enq-frame .wm--edge-r { opacity: .07; }

/* Crafted variation note: reads as craftsmanship, not legalese */
.craftnote { position: relative; overflow: hidden; max-width: 74ch; margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  padding: clamp(22px,3vw,30px) clamp(22px,4vw,38px); border-radius: 10px;
  border: 1px solid rgba(217,180,90,.24);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(217,180,90,.07), transparent 55%),
    linear-gradient(160deg, rgba(34,26,36,.65), rgba(23,18,22,.65)); }
.craftnote::after { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--paper-fibre); background-size: 200px 200px; opacity: .1; mix-blend-mode: screen; pointer-events: none; }
.craftnote > * { position: relative; z-index: 1; }
.craftnote__seal { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(217,180,90,.4);
  background: radial-gradient(circle at 50% 40%, rgba(217,180,90,.14), transparent 70%); color: var(--gold); }
.craftnote__seal svg { width: 34px; height: 34px; }
.craftnote__k { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 .4rem; }
.craftnote__t { color: var(--ivory-80); line-height: 1.6; margin: 0; font-size: .98rem; }
@media (max-width: 560px){ .craftnote { grid-template-columns: 1fr; text-align: left; gap: 14px; } }

/* -- BG System 5: paper-table surface (warm spotlight + fibre) -- */
.table-surface { position: relative; border-radius: 10px; overflow: hidden;
  background:
    radial-gradient(80% 120% at 50% -10%, rgba(217,180,90,.08), transparent 60%),
    linear-gradient(160deg, var(--plum), var(--soot));
  border: 1px solid var(--hair-soft); }

/* -- Foil-wipe accent for eyebrow labels -- */
.enhanced .label .label__mark { background-size: 200% 100%; }
.enhanced .reveal.in .label__mark, .enhanced .stagger.in .label__mark { animation: foilwipe 1.4s var(--ease) .2s both; }
@keyframes foilwipe { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* -- One-time metallic shimmer (Illuminate) -- */
.shimmer-once { position: relative; overflow: hidden; }
.enhanced .shimmer-once.in::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(244,227,168,.5) 50%, transparent 60%);
  transform: translateX(-120%); animation: shimmerOnce 1.5s var(--ease) .3s 1; }
@keyframes shimmerOnce { to { transform: translateX(120%); } }

/* -- Craft "print layers align" one-time sequence -- */
.printseq { position: relative; }
.printseq__layer { position: absolute; inset: 0; opacity: 0; }
.enhanced .printseq.in .printseq__layer { animation: layerAlign .7s var(--paper) forwards; }
.enhanced .printseq.in .printseq__layer:nth-child(1){ animation-delay:.05s } .enhanced .printseq.in .printseq__layer:nth-child(2){ animation-delay:.3s }
.enhanced .printseq.in .printseq__layer:nth-child(3){ animation-delay:.55s } .enhanced .printseq.in .printseq__layer:nth-child(4){ animation-delay:.8s }
@keyframes layerAlign { from { opacity:0; transform: translate(var(--lx,6px), var(--ly,-6px)); } to { opacity:1; transform: none; } }

/* -- Enrich existing chapter cards with a category glow on view/hover -- */
.chapter::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: radial-gradient(90% 70% at 80% 110%, color-mix(in srgb, var(--acc, var(--gold)) 30%, transparent), transparent 62%);
  transition: opacity .5s var(--ease); }
.chapter:hover::before { opacity: .95; }

/* ============================================================
   REVIEWS (Google trust) — paper slips & archival cards
   ============================================================ */
.reviews-aggregate { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: clamp(24px,4vw,40px); }
.reviews-stars { --pct: 90%; font-size: 1.3rem; line-height: 1; letter-spacing: 2px;
  background: linear-gradient(90deg, var(--gold) var(--pct), rgba(199,185,162,.35) var(--pct));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.reviews-aggregate__score { font-size: clamp(1.8rem,4vw,2.4rem); font-weight: var(--fw-light); color: var(--ivory); }
.reviews-aggregate__meta { font-size: var(--fs-sm); color: var(--oat-70); }
.reviews-aggregate__meta a { color: var(--gold); }
.reviews-aggregate__badge { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--oat-70); border: 1px solid var(--hair-soft); border-radius: 999px; padding: 6px 12px; }

.reviews-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px){ .reviews-grid { grid-template-columns: repeat(3,1fr); } }
.review-card { position: relative; padding: 26px 24px 22px; border-radius: 6px;
  background: linear-gradient(168deg, #efe5d0, #e0d3b6); color: #2a2018;
  box-shadow: var(--shadow-lift); border: 1px solid rgba(120,90,40,.25); }
.review-card:nth-child(2){ background: linear-gradient(168deg, #241a24, #1a141a); color: var(--ivory-90); border-color: var(--hair); }
.review-card__quote { font-family: Georgia, "Times New Roman", serif; font-size: 2.6rem; line-height: .6; color: var(--gold-deep); height: .5em; display: block; }
.review-card:nth-child(2) .review-card__quote { color: var(--gold); }
.review-card__text { font-size: .95rem; line-height: 1.55; margin: 10px 0 16px; }
.review-card__who { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); }
.review-card__name { font-weight: var(--fw-semi); }
.review-card__date { color: rgba(80,64,40,.7); font-size: var(--fs-label); }
.review-card:nth-child(2) .review-card__date { color: var(--oat-70); }
.review-card__src { display: block; margin-top: 10px; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: rgba(120,90,40,.9); }
.review-card:nth-child(2) .review-card__src { color: var(--oat-70); }
.enhanced .reviews-grid.in .review-card { animation: settle .8s var(--paper) both; }
.enhanced .reviews-grid.in .review-card:nth-child(1){ animation-delay:.05s } .enhanced .reviews-grid.in .review-card:nth-child(2){ animation-delay:.18s } .enhanced .reviews-grid.in .review-card:nth-child(3){ animation-delay:.31s }
.enhanced .reviews-grid .review-card { opacity: 0; transform: translateY(18px); }
.review-card:hover { transform: translateY(-3px); transition: transform .4s var(--paper); }

/* compact category-review strip (reusable for category pages) */
.catreview { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 22px 26px; border-radius: 8px;
  background: linear-gradient(160deg, var(--plum), var(--soot)); border: 1px solid var(--hair-soft); }
.catreview__score { font-size: 1.8rem; font-weight: var(--fw-light); color: var(--ivory); }
.catreview__stars { color: var(--gold); letter-spacing: 2px; }
.catreview__text { flex: 1 1 260px; font-size: var(--fs-sm); color: var(--ivory-70); }
.catreview__text .q { color: var(--ivory-90); font-style: italic; }

/* -- Hero category strip -- */
.cat-strip { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; padding: 0; }
.cat-strip li { list-style: none; }
.cat-strip a { display: inline-flex; align-items: center; gap: .5em; font-size: .8rem; color: var(--ivory-70);
  padding: 8px 14px; min-height: 38px; border: 1px solid var(--hair-soft); border-radius: 999px;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
.cat-strip a:hover { border-color: var(--hair-strong); color: var(--ivory); background: rgba(217,180,90,.06); }
.cat-strip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc, var(--gold)); flex: none; }

/* -- Printseq craft layers need a sized relative box -- */
.craft__media.printseq { aspect-ratio: 4/3; }
.craft__media.printseq .printseq__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* -- Showroom door-like mask reveal -- */
.enhanced .door-reveal img { clip-path: inset(0 0 0 100%); transition: clip-path 1.1s var(--paper); }
.enhanced .door-reveal.in img { clip-path: inset(0 0 0 0); }

/* -- Section vertical rhythm: hairline seam handled by .seam element -- */

/* ============================================================
   PASS 1.7 — visual density: stars, review carousel, design-language
   gallery, material table, occasion story tiles, journey thread.
   ============================================================ */

/* -- Header CTA sizing. QA Round 2: `padding: 0 22px` and `border-radius: 6px`
   removed. They were left over from the boxed treatment this CTA no longer uses and
   were fighting the rule above; the box geometry is owned in one place now. -- */
.header__cta { min-height: 46px; margin-left: clamp(14px, 1.6vw, 26px); gap: .7em;
  font-size: .78rem; letter-spacing: .06em; }
.header__cta .arr { margin-left: 2px; }

/* -- Accurate gold star row (supports half via --pct) -- */
.stars { position: relative; display: inline-block; font-size: 1em; line-height: 1; white-space: nowrap; }
.stars__base { color: rgba(199,185,162,.30); }
.stars__fill { position: absolute; inset: 0; width: var(--pct, 100%); overflow: hidden;
  color: var(--gold); background: var(--foil); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 5px rgba(217,180,90,.4)); }
/* one-time fill sweep when the surrounding reveal scrolls in; static width stays correct if it never fires */
.enhanced .reveal.in .stars--animate .stars__fill,
.enhanced .stars--animate.in .stars__fill { animation: starFill 1.1s var(--paper) .15s; }
@keyframes starFill { from { width: 0; } to { width: var(--pct, 100%); } }

/* -- Reviews rating hero -- */
.rating-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-bottom: clamp(26px,4vw,44px); }
.rating-hero__score { font-size: clamp(3rem,7vw,4.6rem); font-weight: var(--fw-light); line-height: .9; color: var(--ivory); }
.rating-hero__stars { font-size: clamp(1.4rem,3vw,2rem); }
.rating-hero__meta { font-size: var(--fs-sm); color: var(--oat-70); }
.rating-hero__meta strong { color: var(--ivory-90); }
.rating-hero__badge { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--oat-70); border: 1px solid var(--hair); border-radius: 999px; padding: 7px 14px; }
.rating-hero__cta { margin-left: auto; }
@media (max-width: 700px){ .rating-hero__cta { margin-left: 0; width: 100%; } }

/* -- Review carousel (scroll-snap; swipe + buttons + autoplay) -- */
.rcarousel { position: relative; }
.rcarousel__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 8px 2px 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rcarousel__track::-webkit-scrollbar { display: none; }
.rcard { scroll-snap-align: center; flex: 0 0 clamp(280px, 32%, 420px); position: relative;
  padding: 30px 28px 24px; border-radius: 8px; box-shadow: var(--shadow-lift); }
@media (max-width: 720px){ .rcard { flex-basis: 84%; } }
.rcard { background: linear-gradient(168deg, #efe5d0, #ddceb0); color: #2a2018; border: 1px solid rgba(120,90,40,.28); }
.rcard:nth-child(even) { background: linear-gradient(168deg, #241a24, #171017); color: var(--ivory-90); border-color: var(--hair); }
.rcard::before { content: ""; position: absolute; inset: 8px; border-radius: 5px; border: 1px solid rgba(217,180,90,.28); pointer-events: none; }
.rcard__quote { font-family: Georgia, serif; font-size: 3rem; line-height: .4; height: .5em; display: block; color: var(--gold-deep); }
.rcard:nth-child(even) .rcard__quote { color: var(--gold); }
.rcard__stars { font-size: 1rem; margin: 8px 0 12px; }
.rcard__text { font-size: .96rem; line-height: 1.55; margin: 0 0 16px; }
.rcard__who { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rcard__name { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.rcard__date { font-size: var(--fs-label); color: rgba(80,64,40,.75); }
.rcard:nth-child(even) .rcard__date { color: var(--oat-70); }
.rcard__src { display: inline-block; margin-top: 12px; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: rgba(120,90,40,.95); }
.rcard:nth-child(even) .rcard__src { color: var(--oat-70); }
.rcard__tag { display: inline-block; margin-top: 10px; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); border: 1px solid rgba(120,90,40,.4); border-radius: 999px; padding: 3px 9px; }
.rcard:nth-child(even) .rcard__tag { color: var(--gold); border-color: var(--hair); }
.rcarousel__controls { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rcarousel__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); color: var(--ivory-90);
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .25s var(--ease), background .25s var(--ease); }
.rcarousel__btn:hover { border-color: var(--gold); background: rgba(217,180,90,.1); }
.rcarousel__status { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--oat-70); margin-left: 6px; }

/* -- Design Language gallery -- */
.dlang { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px){ .dlang { grid-template-columns: 1.5fr 1fr; align-items: stretch; } }
.dlang__feature { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair); box-shadow: var(--shadow-deep); min-height: 320px; }
.dlang__feature img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--paper), transform 6s ease; }
.dlang__feature img.is-active { opacity: 1; transform: scale(1.04); }
.dlang__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 26px 22px;
  background: linear-gradient(180deg, transparent, rgba(15,12,14,.85)); }
.dlang__cap-k { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.dlang__cap-t { font-size: 1.4rem; font-weight: var(--fw-med); margin: 4px 0 2px; }
.dlang__cap-d { font-size: var(--fs-sm); color: var(--ivory-70); max-width: 46ch; }
.dlang__thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (min-width: 900px){ .dlang__thumbs { grid-template-columns: repeat(2,1fr); } }
.dlang__thumb { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--hair-soft); aspect-ratio: 4/3; cursor: pointer; background: var(--soot); }
.dlang__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--paper); }
.dlang__thumb:hover img, .dlang__thumb:focus-visible img { transform: scale(1.07); }
.dlang__thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: var(--fs-label);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ivory-90); background: linear-gradient(180deg, transparent, rgba(15,12,14,.8)); }
.dlang__thumb.is-active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

/* -- Material Library table -- */
.matlib { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 900px){ .matlib { grid-template-columns: 1fr 1fr; align-items: center; } }
.matlib__stage { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--hair);
  background: linear-gradient(160deg, var(--plum), var(--soot)); padding: 22px; }
.matlib__mag { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16/11; border: 1px solid var(--hair); }
.matlib__mag img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--paper); transform: scale(1.02); }
.matlib__mag img.is-active { opacity: 1; }
.matlib__mag-label { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-90); background: rgba(15,12,14,.6); padding: 6px 12px; border-radius: 999px; }
.matlib__swatches { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 16px; }
@media (min-width: 520px){ .matlib__swatches { grid-template-columns: repeat(3,1fr); } }
.mswatch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--hair-soft); border-radius: 8px; background: var(--soot); text-align: left; transition: border-color .25s var(--ease), transform .4s var(--paper); }
.mswatch:hover, .mswatch:focus-visible { transform: translateY(-2px); border-color: var(--hair-strong); }
.mswatch.is-active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.mswatch__chip { width: 30px; height: 30px; border-radius: 6px; flex: none; background: linear-gradient(140deg, var(--c1,#c9b79a), var(--c2,#8a7350)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mswatch__k { font-size: .82rem; font-weight: var(--fw-med); color: var(--ivory-90); }
.matlib__desc { font-size: var(--fs-sm); color: var(--ivory-70); margin: 16px 0 0; min-height: 3em; }
.matlib__note { font-size: var(--fs-label); color: var(--ivory-55); margin-top: 10px; }

/* -- Occasion story tiles -- */
.occ2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (max-width: 619px){
  .occ2 { grid-template-columns: repeat(6, 82%); grid-auto-flow: row; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
  .occ2::-webkit-scrollbar { display: none; }
  .occ2 > .otile { scroll-snap-align: start; min-height: 300px; }
}
@media (min-width: 620px){ .occ2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px){ .occ2 { grid-template-columns: repeat(3,1fr); } }
.otile { position: relative; min-height: 300px; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair-soft);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; isolation: isolate; }
.otile__media { position: absolute; inset: 0; z-index: -2; }
.otile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--paper); }
.otile:hover .otile__media img { transform: scale(1.06); }
.otile::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(175deg, rgba(15,12,14,.15) 0%, rgba(15,12,14,.55) 52%, rgba(15,12,14,.94) 100%); }
.otile__accent { position: absolute; top: 0; left: 0; height: 3px; width: 54px; background: var(--acc, var(--gold)); z-index: 1; }
.otile__k { font-size: 1.28rem; font-weight: var(--fw-med); color: var(--ivory); }
.otile__d { font-size: var(--fs-sm); color: var(--ivory-70); margin: .35rem 0 .6rem; }
.otile__tags { font-size: var(--fs-label); letter-spacing: .05em; text-transform: uppercase; color: var(--acc, var(--gold)); margin-bottom: 12px; }
.otile__cta { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ivory-90); }
.otile__cta .arr { transition: transform .35s var(--paper); }
.otile:hover .otile__cta .arr { transform: translateX(4px); }

/* -- Journey with a connector thread behind the content -- */
.journey2 { position: relative; }
.journey2__grid { display: grid; grid-template-columns: 1fr; gap: 26px; position: relative; z-index: 1; }
@media (min-width: 860px){ .journey2__grid { grid-template-columns: repeat(5,1fr); gap: 18px; } }
.jstep { position: relative; padding: 0; }
.jstep__media { position: relative; aspect-ratio: 5/4; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair-soft); background: var(--soot); margin-bottom: 16px; }
.jstep__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--paper); }
.jstep:hover .jstep__media img { transform: scale(1.06); }
.jstep__num { position: absolute; top: 12px; left: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-semi); color: var(--ink);
  background: var(--foil-btn); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
/* illustrated step tile: custom line-art on a dark paper card (replaces photography) */
.jstep__ill { position: relative; aspect-ratio: 5/4; border-radius: 10px; margin-bottom: 16px; overflow: hidden;
  border: 1px solid var(--hair-soft); display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(217,180,90,.10), transparent 60%),
    linear-gradient(160deg, var(--plum), var(--soot));
  transition: transform .5s var(--paper), border-color .5s var(--paper), box-shadow .5s var(--paper); }
.jstep__ill::before { content: ""; position: absolute; inset: 0; background-image: var(--paper-fibre); background-size: 200px 200px; opacity: .12; mix-blend-mode: screen; pointer-events: none; }
.jstep__ill::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(217,180,90,.16); border-radius: 6px; pointer-events: none; }
.jstep__art { width: 56%; max-width: 84px; height: auto; color: var(--gold);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.35)); transition: transform .6s var(--paper); }
.jstep:hover .jstep__ill { transform: translateY(-4px); border-color: rgba(217,180,90,.4); box-shadow: 0 14px 30px rgba(0,0,0,.34); }
.jstep:hover .jstep__art { transform: scale(1.07) rotate(-1.5deg); }
.jstep__t { font-size: 1.05rem; font-weight: var(--fw-med); color: var(--ivory-90); }
.jstep__d { font-size: var(--fs-sm); color: var(--ivory-55); margin-top: .3rem; }
/* the thread: sits BEHIND cards, aligned to the number row, never touching text */
.journey2__thread { display: none; }
@media (min-width: 860px){
  .journey2__thread { display: block; position: absolute; left: 8%; right: 8%; top: 20px; height: 2px; z-index: 0;
    background: repeating-linear-gradient(90deg, var(--hair-strong) 0 8px, transparent 8px 16px); opacity: .5; }
  .enhanced .journey2__thread { transform: scaleX(0); transform-origin: left; }
  .enhanced .journey2__thread.in { animation: seamDraw 1.4s var(--paper) forwards; }
}
/* mobile vertical thread on the far left, cards clear of it */
@media (max-width: 859px){
  .journey2__grid { padding-left: 30px; }
  .journey2__thread { display: block; position: absolute; left: 13px; top: 10px; bottom: 10px; width: 2px; z-index: 0;
    background: repeating-linear-gradient(180deg, var(--hair-strong) 0 8px, transparent 8px 16px); opacity: .5; }
  .jstep__num { position: static; margin-bottom: 12px; }
}

/* ============================================================
   PASS 1.8 — announcement belt, larger logo, WhatsApp status,
   product carousels, variation trust panel.
   ============================================================ */

/* -- Announcement belt (paper-toned, seamless loop) -- */
.belt { background: linear-gradient(180deg, #f1e7d3 0%, #e9dcc1 55%, #e0d1b2 100%); color: #3a2c1c; overflow: hidden;
  position: relative; z-index: 61; border-bottom: 1px solid rgba(120,90,40,.28);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.35); }
/* faint handmade-paper fibre wash so the belt reads as paper, not a flat bar */
.belt::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: var(--paper-fibre); background-size: 220px 220px; mix-blend-mode: multiply; }
.belt__track { display: flex; align-items: center; gap: 0; white-space: nowrap; width: max-content;
  padding: 0; height: 40px; will-change: transform; position: relative; }
@media (min-width: 940px){ .belt__track { height: 44px; } }
.enhanced .belt__track { animation: beltMove 40s linear infinite; }
.belt:hover .belt__track, .belt:focus-within .belt__track, .belt.is-paused .belt__track { animation-play-state: paused; }
@keyframes beltMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.belt__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-micro); letter-spacing: .13em;
  text-transform: uppercase; font-weight: var(--fw-med); padding: 0 6px; color: #3a2c1c; }
.belt__ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--gold-deep); opacity: .9; }
.belt__sep { display: inline-flex; align-items: center; justify-content: center; width: 34px; color: var(--gold-deep); opacity: .55; }
.belt__sep svg { width: 13px; height: 13px; }
.belt__star { color: var(--gold-deep); }
@media (min-width: 940px){ .belt__item { font-size: .75rem; letter-spacing: .15em; } }

/* -- Larger, more present header logo -- */
.brand img { height: 40px; }
.header__bar { height: 66px; }
@media (min-width: 940px){ .brand img { height: 38px; } .header__bar { height: 78px; } }
.drawer__top img { height: 34px; }

/* -- Header CTA gap tuning (Enquire Now) -- */
.header__cta { gap: 12px; margin-right: 2px; }

/* -- WhatsApp coming-soon status (config-driven; no link while disabled) -- */
.wa-status { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 8px;
  border: 1px solid var(--hair-soft); background: rgba(239,229,208,.03); }
.wa-status__icon { flex: none; width: 22px; height: 22px; color: var(--oat-70); margin-top: 1px; }
.wa-status__k { font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ivory-90); }
.wa-status__v { font-size: var(--fs-label); color: var(--ivory-55); margin-top: 2px; }
.wa-status--drawer { margin-top: 16px; }
.wa-cta { /* becomes a real button only when JS enables it */ }
.drawer__shortcuts { display: grid; gap: 8px; margin-top: 18px; }
.drawer__short { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--hair-soft); border-radius: 8px; color: var(--ivory-90); font-size: var(--fs-sm);
  transition: border-color .25s var(--ease), background .25s var(--ease); }
.drawer__short svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.drawer__short:hover { border-color: var(--hair-strong); background: rgba(217,180,90,.06); }
.footer__wa { margin-top: 14px; }
.footer__wa .wa-status { padding: 12px; }
.footer__wa .wa-status__k { font-size: var(--fs-sm); }

/* -- Generic product carousel (Featured / Explore More) -- */
.nameidx { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 18px; }
.nameidx__field { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; min-width: 240px; max-width: 460px;
  border: 1px solid var(--hair); border-radius: 999px; padding: 0 18px; background: rgba(255,255,255,.02); transition: border-color .25s var(--ease); }
.nameidx__field:focus-within { border-color: var(--gold); }
.nameidx__icon { width: 15px; height: 15px; flex: 0 0 auto; border: 1.6px solid var(--oat-70); border-radius: 50%; position: relative; }
.nameidx__icon::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 7px; height: 1.6px; background: var(--oat-70); transform: rotate(45deg); }
.nameidx__input { flex: 1; min-width: 0; min-height: 46px; background: transparent; border: 0; outline: none; color: var(--ivory-90);
  font: inherit; font-size: .95rem; letter-spacing: .01em; }
.nameidx__input::placeholder { color: var(--oat-70); }
.nameidx__count { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--oat-70); margin: 0; }
.nameidx__empty { color: var(--oat-70); font-size: .9rem; margin: 4px 0 0; }
.pcar { position: relative; }
.pcar__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 6px 2px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pcar__track::-webkit-scrollbar { display: none; }
.pcar .pcard { scroll-snap-align: center; flex: 0 0 82%; }
@media (min-width: 620px){ .pcar .pcard { flex-basis: 46%; } }
@media (min-width: 980px){ .pcar .pcard { flex-basis: 31%; } }
.pcar .pcard--featured { flex-basis: 82%; }
@media (min-width: 620px){ .pcar .pcard--featured { flex-basis: 60%; } }
@media (min-width: 980px){ .pcar .pcard--featured { flex-basis: 40%; } }
.pcar__controls { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.pcar__btn { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 1px solid var(--hair); color: var(--ivory-90);
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .25s var(--ease), background .25s var(--ease); }
.pcar__btn:hover { border-color: var(--gold); background: rgba(217,180,90,.1); }
.pcar__dots { display: flex; gap: 6px; margin-left: 4px; }
.pcar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hair-soft); transition: background .25s var(--ease), transform .25s var(--ease); }
.pcar__dot.is-on { background: var(--gold); transform: scale(1.3); }
.pcar__count { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--oat-70); margin-left: auto; }
/* bigger media in carousel cards */
.pcar .pcard__media { aspect-ratio: 4/3; }
.pcard__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.pcard__vary { font-size: var(--fs-label); color: var(--oat-70); margin-top: 6px; }
.pcard__larger { font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--oat-70);
  border: 1px solid var(--hair-soft); border-radius: 999px; padding: 7px 12px; min-height: 44px; display: inline-flex; align-items: center; gap: .4em; transition: border-color .25s var(--ease), color .25s var(--ease); }
.pcard__larger:hover { border-color: var(--hair-strong); color: var(--ivory); }

/* -- Handmade-variation primary trust panel -- */
.vpanel { position: relative; overflow: hidden; border-radius: 10px; padding: clamp(24px,4vw,36px);
  background: linear-gradient(155deg, #efe5d0, #ddceb0); color: #2a2018; border: 1px solid rgba(120,90,40,.3); }
.vpanel::before { content: ""; position: absolute; inset: 10px; border-radius: 6px; border: 1px solid rgba(120,90,40,.35); pointer-events: none; }
.enhanced .vpanel::before { clip-path: inset(0 100% 0 0); }
.enhanced .vpanel.in::before { animation: bandDraw 1.3s var(--paper) forwards; }
.vpanel__seal { position: absolute; right: -3%; bottom: -18%; width: 240px; opacity: .1; filter: grayscale(1) brightness(.4); pointer-events: none; }
.vpanel__inner { position: relative; z-index: 1; max-width: 60ch; }
.vpanel__icon { width: 30px; height: 30px; color: var(--gold-deep); margin-bottom: 8px; }
.vpanel__k { font-size: clamp(1.3rem,2.4vw,1.7rem); font-weight: var(--fw-med); margin: 0 0 .5rem; }
.vpanel__v { font-size: var(--fs-sm); line-height: 1.6; color: #4a3c2c; margin: 0; }

/* -- Lightbox (View Larger) -- */
.lightbox { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center;
  background: rgba(8,6,8,.9); backdrop-filter: blur(4px); padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(92vw,900px); max-height: 86vh; border-radius: 6px; border: 1px solid var(--hair); box-shadow: var(--shadow-deep); }

/* ------------------------------------------------------------------
   MAP ENLARGE (QA Round 2 — reported FAIL by human QA).
   Root cause: the shared lightbox capped the image at 900px on a page
   where the map already rendered ~570-600px wide, and the backdrop was
   near-black on a near-black page. The overlay opened, but the result
   read as "nothing happened": barely larger, no visible frame, and the
   970px source was already being upscaled.
   The map now gets its own overlay treatment: ~92vw x 88vh, contained,
   on a real backdrop, over a 3x source derivative.
   ------------------------------------------------------------------ */
.lightbox--map { background: rgba(6,4,5,.94); backdrop-filter: blur(6px); }
.lightbox--map img {
  /* FINAL PASS: the wider map panel is more landscape than the old crop, so it now
     runs out of height before width. Allowing 92vh (the caption sits in the padding
     band below it) keeps the enlargement near the top of the useful viewport instead
     of leaving a deep dead band above and below. */
  max-width: 93vw; max-height: 92vh; width: auto; height: auto;
  object-fit: contain;                       /* never crop the map */
  border-radius: 3px; border: 0;
  padding: clamp(10px, 1.4vw, 20px); background: #fbf8f1;
  box-shadow: 0 60px 130px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(239,229,208,.14);
}
.lightbox--map .lightbox__close {
  top: clamp(12px, 2vh, 26px); right: clamp(12px, 2vw, 30px);
  width: 52px; height: 52px; font-size: 1.5rem;
  background: rgba(15,12,14,.92); border: 1px solid var(--gold);
  color: var(--ivory); z-index: 2;
}
.lightbox--map .lightbox__cap { bottom: clamp(6px, 1.1vh, 13px); }
@media (max-width: 700px) {
  /* A phone is portrait and the map is landscape, so "fit to screen" would only be
     ~1.15x the inline map — not worth opening. The overlay instead presents the map
     at a readable scale and lets the reader pan it, which is what inspecting a street
     map actually needs. Pinch-zoom is left alone on top of this. */
  /* backdrop-filter must go here: it makes the overlay a containing block for
     position:fixed descendants, which pushed the close button and the caption out
     of the viewport once the map could be panned. The backdrop is near-opaque
     anyway, so nothing is lost. */
  .lightbox--map { touch-action: auto; overflow: auto; -webkit-overflow-scrolling: touch;
    align-items: center; justify-content: flex-start; padding: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: #070506; }   /* fully opaque: no page bleed-through behind the map */
  .lightbox--map img { max-width: none; width: 210vw; max-height: none; height: auto;
    padding: 8px; margin: auto; flex: none; }
  /* The chrome must not pan away with the map. */
  .lightbox--map .lightbox__close { position: fixed; width: 46px; height: 46px; top: 10px; right: 10px; }
  .lightbox--map .lightbox__cap { position: fixed; bottom: 12px; padding: 0 14px;
    background: linear-gradient(180deg, transparent, rgba(6,4,5,.9) 40%); }
  .lightbox--map .lightbox__pan { display: block; }
}
/* A one-line hint that the enlarged map pans, shown only where panning is the model. */
.lightbox__pan { display: none; position: fixed; top: 16px; left: 16px; z-index: 2;
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--oat-70); background: rgba(6,4,5,.8); padding: 7px 11px; border-radius: 2px; }
.lightbox__close { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--hair); color: var(--ivory); font-size: 1.4rem; background: rgba(23,18,22,.7); }
.lightbox__cap { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: var(--ivory-70); font-size: var(--fs-sm); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ceremony__mark, .ceremony__tag, .hero .reveal-up, .collage__card { opacity: 1 !important; transform: none !important; }
  /* The vertical brand object must reach its final, fully visible state without
     relying on brandPress running. Its rotation is layout, not motion, so it is
     restored explicitly rather than cleared with transform:none. */
  .hero__brandmark { opacity: .93 !important; animation: none !important;
    transform: translate(-50%, -50%) rotate(-90deg) !important; }
  .enhanced .reveal, .enhanced .stagger > * { opacity: 1 !important; transform: none !important; }
  .enhanced .motif-band, .enhanced .seam, .enhanced .reviews-grid .review-card, .enhanced .printseq__layer, .enhanced .door-reveal img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .shimmer-once.in::after { display: none !important; }
  .enhanced .stars--animate .stars__fill { width: var(--pct,100%) !important; animation: none !important; }
  .rcarousel__track, .pcar__track, .storyrow, .chapters--swipe, .occ2 { scroll-behavior: auto !important; scroll-snap-type: none !important; }
  .journey2__thread { transform: none !important; }
  .dlang__feature img.is-active { transform: none !important; }
  .enhanced .belt__track { animation: none !important; }
  .enhanced .vpanel::before { animation: none !important; clip-path: none !important; }
}

/* ============================================================
   PASS 2 — reusable category components (hero emblem, Made-For tiles)
   ============================================================ */
.cat-hero__emblem { position: relative; min-height: 240px; display: grid; place-items: center; isolation: isolate; }
.cat-hero__emblem::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px;
  background: radial-gradient(62% 62% at 50% 42%, rgba(217,180,90,.14), transparent 70%); }
.cat-hero__emblem::before { background: radial-gradient(62% 62% at 50% 42%, color-mix(in srgb, var(--acc,#d9b45a) 26%, transparent), transparent 72%); }
.cat-hero__emblem .ornm--medallion { position: static; width: min(66%, 260px); height: auto; aspect-ratio: 1 / 1; opacity: .5; }
.cat-hero__emblem .wm { opacity: .08; }
@media (max-width: 859px){ .cat-hero__emblem { min-height: 150px; margin-top: 8px; } .cat-hero__emblem .ornm--medallion { width: 150px; } }

.usegrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px){ .usegrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px){ .usegrid { grid-template-columns: repeat(3, 1fr); } }
.usecard { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 10px;
  border: 1px solid var(--hair-soft); background: linear-gradient(160deg, rgba(34,26,36,.5), rgba(23,18,22,.4));
  transition: border-color .4s var(--paper), transform .4s var(--paper); }
.usecard:hover { border-color: color-mix(in srgb, var(--acc,#d9b45a) 50%, var(--hair-strong)); transform: translateY(-3px); }
.usecard__ic { width: 34px; height: 34px; flex: 0 0 auto; color: var(--acc, var(--gold)); }
.usecard__k { font-weight: var(--fw-med); color: var(--ivory-90); font-size: .98rem; }
.usecard__v { font-size: var(--fs-sm); color: var(--ivory-55); margin-top: 3px; }

/* ============================================================
   PASS 2.1.1 — editorial art direction
   ============================================================ */
/* Made-For: category photography beside the use-case grid (desktop only; mobile stays clean) */
.madefor { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 900px){ .madefor { grid-template-columns: 5fr 7fr; align-items: stretch; gap: 34px; } }
.madefor__art { display: none; }
@media (min-width: 900px){
  .madefor__art { display: block; position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--hair-soft); }
  .madefor__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .madefor__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15,12,14,.6)); }
  .madefor__cap { position: absolute; left: 22px; bottom: 20px; z-index: 1; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-90); }
  .madefor .usegrid { grid-template-columns: 1fr 1fr; align-content: start; }
}

/* Archive card recomposed as an intentional catalogue entry (never an error) */
.pcard--archive { background: linear-gradient(160deg, var(--plum), var(--soot)); min-height: 0; justify-content: flex-start; padding: 0; }
.pcard--archive .pcard__body { align-items: stretch; justify-content: flex-start; }
.pcard--archive .pcard__name::before { content: none; }
.pcard--archive .pcard__media { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(217,180,90,.09), transparent 62%), var(--soot); }
.pcard--archive .pcard__media::before { content: ""; position: absolute; inset: 0; background: var(--paper-fibre); background-size: 200px 200px; opacity: .12; mix-blend-mode: screen; }
.pcard--archive .pcard__media::after { content: ""; position: absolute; inset: 0; margin: auto; width: 78px; height: 78px; background: var(--motif-medallion) center / contain no-repeat; opacity: .38; }
.pcard__badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--oat-70); border: 1px solid var(--hair); border-radius: 999px; padding: 3px 10px; background: rgba(15,12,14,.55); }

/* ============================================================
   PASS 2.2 — Made-For recompose + catalogue-only assisted discovery
   ============================================================ */
/* Made For: 3 weighted primary story cards (swipeable on mobile) + secondary chips.
   Replaces the failed "one image + six equal tiles + side void" pattern. */
.storyrow { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px){ .storyrow { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (max-width: 759px){
  .storyrow { grid-template-columns: repeat(3, 80%); grid-auto-flow: row; grid-auto-columns: auto; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
  .storyrow::-webkit-scrollbar { display: none; }
  .storycard { scroll-snap-align: start; }
}
.storycard { position: relative; padding: 26px 24px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--hair-soft); isolation: isolate;
  background: linear-gradient(165deg, color-mix(in srgb, var(--acc,#d9b45a) 12%, var(--plum)), var(--soot));
  transition: transform .5s var(--paper), border-color .5s var(--paper), box-shadow .5s var(--paper); }
.storycard::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--paper-fibre); background-size: 200px 200px; opacity: .1; mix-blend-mode: screen; }
.storycard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc,#d9b45a) 45%, var(--hair-strong)); box-shadow: 0 16px 34px rgba(0,0,0,.34); }
.storycard__ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--acc, var(--gold));
  border: 1px solid color-mix(in srgb, var(--acc,#d9b45a) 40%, transparent); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--acc,#d9b45a) 16%, transparent), transparent 70%); margin-bottom: 16px; }
.storycard__ic svg { width: 26px; height: 26px; }
.storycard__k { font-size: 1.12rem; font-weight: var(--fw-med); color: var(--ivory-90); margin: 0 0 .35rem; }
.storycard__v { font-size: var(--fs-sm); color: var(--ivory-55); margin: 0; line-height: 1.55; }
.storychips { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.storychips__lead { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--oat-70); margin-right: 4px; }
.chip { font-size: .82rem; color: var(--ivory-80); border: 1px solid var(--hair); border-radius: 999px; padding: 7px 15px; background: rgba(255,255,255,.02); }

/* More designs in the collection: compact assisted-discovery for catalogue-only products */
.moregrid { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 22px; }
@media (min-width: 620px){ .moregrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px){ .moregrid { grid-template-columns: 1fr 1fr 1fr; } }
.morecard { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--hair-soft); background: linear-gradient(160deg, rgba(34,26,36,.5), rgba(23,18,22,.42)); }
.morecard__mk { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 8px; background: var(--motif-medallion) center / 34px no-repeat, var(--soot); opacity: .9; border: 1px solid var(--hair-soft); }
.morecard__b { min-width: 0; flex: 1; }
.morecard__name { font-size: .92rem; font-weight: var(--fw-med); color: var(--ivory-90); }
.morecard__meta { font-size: var(--fs-label); color: var(--oat-70); margin-top: 1px; }
.morecard__actions { display: flex; gap: 10px; align-items: center; margin-top: 7px; }
.morecard__cta { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-micro); letter-spacing: .03em; text-transform: uppercase; color: var(--gold); }
.morecard__sl { font-size: 1.2rem; line-height: 1; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); color: var(--oat-70); background: transparent; flex: 0 0 auto; }
.morecard__sl.is-added { color: var(--gold); border-color: var(--hair-strong); background: rgba(217,180,90,.08); }

/* Pass 2.3 — Related Collections: horizontal swipe row on mobile (desktop keeps 3-up grid) */
@media (max-width: 759px){
  .chapters--swipe { display: grid; grid-template-columns: repeat(3, 82%); grid-auto-flow: row; grid-auto-columns: auto; gap: 14px;
    overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
  .chapters--swipe::-webkit-scrollbar { display: none; }
  .chapters--swipe > .chapter { scroll-snap-align: start; min-height: 230px; }
}
.swipe-hint { display: none; margin: 10px 0 0; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--oat-70); }
@media (max-width: 759px){ .swipe-hint { display: block; } }
/* craft band figure keeps a stable aspect so it never collapses or shifts */
.craftband .showroom__media { aspect-ratio: 4 / 3; overflow: hidden; }
.craftband .showroom__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   CATEGORY VISUAL PILOT — reusable art-directed category system
   Driven by assets/data/category-visuals.json ("designed": true) and emitted by
   scripts/build_category.py. Every rule below is additive: a category that is not
   yet designed never gets these classes, so its page is unchanged.
   Pilot category: Cards with Envelopes.
   ============================================================ */

/* ---- catart: the category atmosphere layer -------------------------------
   An enlarged print fragment from the category's OWN photography, an oversized
   paper rectangle and gold registration hairlines. Always decorative and
   aria-hidden; always masked away from the text column so copy stays readable. */
.catart { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* The catart layer is positioned with z-index 0, which paints it above in-flow,
   non-positioned content. Anything in the band that is not already in its own
   stacking context (the hero breadcrumb, section containers) has to be lifted, or the
   atmosphere washes over the copy instead of sitting behind it. */
.cat-hero--set > .container,
.setdeck-band > .container,
.pcnote-band > .container,
.storyband > .container { position: relative; z-index: 1; }
.catart__print {
  position: absolute; inset: 0;
  background-image: var(--art); background-repeat: no-repeat;
  background-position: var(--art-pos, 118% 46%);
  background-size: var(--art-size, cover);
  opacity: var(--art-op, .40); transform: none;
  filter: saturate(.86) contrast(1.04);
  -webkit-mask-image: var(--art-mask, radial-gradient(88% 96% at 88% 46%, #000 8%, rgba(0,0,0,.55) 48%, transparent 78%));
          mask-image: var(--art-mask, radial-gradient(88% 96% at 88% 46%, #000 8%, rgba(0,0,0,.55) 48%, transparent 78%));
}
/* PRINT: in the hero only, the fragment settles in like ink into paper. Runs once,
   never loops. Every other band renders its fragment immediately, so the page is never
   blank while waiting for script. */
.enhanced .cat-hero--set .catart__print {
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.1s var(--paper), transform 1.4s var(--paper);
}
.enhanced .cat-hero--set.is-lit .catart__print { opacity: var(--art-op, .40); transform: none; }

/* ------------------------------------------------------------------
   CATEGORY HERO ATMOSPHERE — QA ROUND 2 NORMALISATION.

   Rejected by human QA: the hero fragment used to be presented as an
   oversized SHEET — bordered, shadowed, rotated, 48-72% wide, 92-116%
   tall, at .40-.54 opacity. That is a second, readable product
   photograph sitting behind the first one, and it is why Letter Papers,
   Packaging, Accessories and Gift Cards and Tags read as collage on
   collage with sloppy cropping.

   The rule now, for every designed category: ONE atmospheric layer, and
   it must be unmistakably atmosphere. It is blurred past legibility,
   heavily desaturated, darkened below the foreground, stripped of all
   sheet chrome, and masked so it dissolves before it reaches any edge.
   The photographs of the actual products are the only sharp thing in
   the band. Nothing is cropped differently and no image is replaced —
   this is entirely a matter of how loudly the background speaks.
   ------------------------------------------------------------------ */
.cat-hero--set .catart__print {
  inset: auto; right: -6%; top: -10%; width: 62%; height: 108%;
  background-size: cover; background-position: 42% 46%;
  transform: none;
  border-radius: 0; border: 0; box-shadow: none;   /* no longer an object */
  /* These base values apply to the Cards with Envelopes pilot, which human QA named
     as the quality reference: its source crop is already a dark, low-contrast maroon
     brocade, so it needs less knocking back than the five pale or saturated ones and
     keeps the warmth the reference page was approved for. Each of the other five
     overrides both values below. */
  filter: blur(7px) saturate(.42) brightness(.6) contrast(.94);
  --art-op: .38;
  --art-mask: radial-gradient(78% 86% at 78% 50%, #000 0%, rgba(0,0,0,.42) 46%, transparent 78%);
}

/* ------------------------------------------------------------------
   CATEGORY FORM LAYER (FINAL PASS).

   Round 2 was right to delete the wallpaper photography, but it left the
   heroes flat: a black field, a title and some floating products. This
   is the air that replaces it — ONE restrained structural detail per
   category, drawn from that category's own physical vocabulary rather
   than from another photograph of it.

   Everything here is a CSS gradient. No image, no request, no weight,
   nothing that can crop badly or read as a second product photograph.
   Each form is masked so it lives on the product side of the band and
   has dissolved completely before it reaches the copy column or any
   edge, so it can never take contrast away from the text.
   ------------------------------------------------------------------ */
.catart__form {
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--form-op, .62);
  background-image: var(--form, none);
  background-repeat: no-repeat;
  background-size: var(--form-size, cover);
  background-position: var(--form-pos, center);
  /* default: nothing until well past the copy column, gone before the right edge */
  -webkit-mask-image: var(--form-mask,
    linear-gradient(96deg, transparent 0 36%, rgba(0,0,0,.5) 56%, #000 74%, #000 90%, transparent 100%));
          mask-image: var(--form-mask,
    linear-gradient(96deg, transparent 0 36%, rgba(0,0,0,.5) 56%, #000 74%, #000 90%, transparent 100%));
}
.enhanced .cat-hero--set .catart__form { opacity: 0; transition: opacity 1.3s var(--paper) .15s; }
.enhanced .cat-hero--set.is-lit .catart__form { opacity: var(--form-op, .62); }

/* An oversized sheet of paper behind the copy: the "layered rectangles" idea,
   and the reason body text never sits directly on the photograph. */
.catart__sheet {
  position: absolute; left: -14%; top: -25%; width: min(88%, 1020px); height: 150%;
  transform: rotate(-1.4deg);
  background: linear-gradient(98deg, rgba(15,12,14,.99) 46%, rgba(15,12,14,.9) 66%, rgba(15,12,14,.42) 86%, rgba(15,12,14,0) 100%);
  /* the .catart wrapper clips to the band, so fade the top and bottom edges or the
     sheet reads as a rendering seam at the section boundary rather than as paper */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
/* In the hero the sheet reaches the top edge rather than fading, so the copy column has
   a controlled ground from the breadcrumb down. */
.cat-hero--set .catart__sheet { -webkit-mask-image: none; mask-image: none; }
/* A tiled strip of the category's own printed border, run down the page margin. */
.catart__edge {
  position: absolute; top: 0; bottom: 0; right: 0; width: clamp(46px, 5vw, 82px);
  background-image: var(--edge); background-size: 100% auto; background-repeat: repeat-y;
  opacity: .30; filter: saturate(.7);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
/* Print-registration hairlines at the content-column edges. */
.catart__rule { position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(217,180,90,.22) 22%, rgba(217,180,90,.22) 78%, transparent); }
.catart__rule--l { left: max(var(--gutter), calc(50% - (var(--maxw) / 2) + 8px)); }
.catart__rule--r { right: max(var(--gutter), calc(50% - (var(--maxw) / 2) + 8px)); }

/* QA Round 2: the same "atmosphere must not read as a second photograph" rule as the
   hero, applied more lightly to the deeper bands. These sit beside copy or beside a
   product grid rather than behind a foreground composition, so they keep their level
   and only lose legibility. */
.catart--story .catart__print, .catart--deck .catart__print,
.catart--note .catart__print { filter: blur(6px) saturate(.5) brightness(.72) contrast(.95); }
.catart--story { --art-op: .26; --art-pos: 112% 40%; }
.catart--deck  { --art-op: .24; --art-pos: 108% 6%; --art-size: 62% auto;
  --art-mask: radial-gradient(70% 80% at 94% 12%, #000 6%, rgba(0,0,0,.5) 44%, transparent 74%); }
.catart--note  { --art-op: .24; --art-pos: 104% 60%; --art-size: 58% auto;
  --art-mask: radial-gradient(72% 86% at 96% 58%, #000 6%, rgba(0,0,0,.5) 46%, transparent 76%); }
.catart--deck .catart__sheet, .catart--story .catart__sheet { height: 130%; top: -15%; }
.catart--enq { border-radius: inherit; }
.catart--enq .catart__edge { opacity: .22; }
@media (max-width: 899px) {
  /* On a narrow screen the oversized printed sheet lies behind the whole lower half of
     the hero rather than standing as a column, so it never shows a hard vertical seam
     beside the copy. */
  .cat-hero--set .catart__print {
    inset: auto 0 0 -8%; width: 116%; height: 42%;
    transform: none; border-radius: 0; border: 0; box-shadow: none;
    background-position: 48% 44%;
    filter: blur(14px) saturate(.24) brightness(.42) contrast(.9);
    --art-op: .18;
    --art-mask: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 42%, #000 100%);
  }
  .catart__sheet { left: -20%; width: 128%; transform: none;
    background: linear-gradient(180deg, rgba(15,12,14,.95) 30%, rgba(15,12,14,.6) 62%, rgba(15,12,14,0)); }
  .catart__edge { width: 30px; opacity: .2; }
  .catart__rule { display: none; }
  .catart--deck { --art-op: .26; --art-size: 132% auto; --art-pos: 118% 2%; }
  .catart--note { --art-op: .26; --art-size: 112% auto; --art-pos: 118% 62%; }
}
@media (prefers-reduced-motion: reduce) {
  .enhanced .cat-hero--set .catart__print { transition: none; opacity: var(--art-op, .40); transform: none; }
  .enhanced .cat-hero--set .catart__form { transition: none; opacity: var(--form-op, .62); }
}

/* ---- cwe-set: the layered card-and-envelope hero -------------------------
   Offset paper rectangles on a grid, deliberately squared-off so it never reads as
   the Gift Envelopes radial fan. Animation verbs: SETTLE, OPEN, SLIDE, DRAW, LIFT. */
.cat-hero--set { min-height: min(88vh, 800px); align-items: center; }
.cat-hero--set .cat-hero__grid { align-items: center; }
.cwe-set { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 600px; margin-inline: auto; isolation: isolate; }
.cwe-set__piece {
  position: absolute; margin: 0; overflow: hidden; border-radius: 3px;
  border: 1px solid rgba(239,229,208,.22);
  box-shadow: 0 26px 60px rgba(0,0,0,.62), 0 6px 16px rgba(0,0,0,.5);
  background: var(--soot);
}
.cwe-set__piece img { width: 100%; height: 100%; object-fit: cover; }
/* dominant pair */
.cwe-set__piece--a { left: -6%;  top: 30%; width: 70%; aspect-ratio: 4/3; z-index: 3; }
/* the offset "opening" pair behind it */
.cwe-set__piece--b { right: -6%; top: -4%; width: 56%; aspect-ratio: 4/3; z-index: 2; transform: rotate(3.2deg); }
/* the third pair, tucked low */
.cwe-set__piece--c { right: -2%; bottom: 2%; width: 46%; aspect-ratio: 4/3; z-index: 1; transform: rotate(-2.4deg); }
.cwe-set__shown {
  position: absolute; left: -6%; bottom: -6px; margin: 0;
  font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--oat-70);
}
.cwe-set__bracket {
  position: absolute; inset: -8% -6%; width: 112%; height: 116%; z-index: 4; pointer-events: none;
  color: var(--gold); opacity: .9; stroke-width: 1.4; fill: none;
}
.cwe-set__bracket path { stroke-dasharray: 200; stroke-dashoffset: 0; }
.cwe-set__sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(244,227,168,.30) 48%, transparent 62%); }

/* Entrance: only when JS has confirmed motion is welcome. */
.enhanced .cwe-set__piece { opacity: 0; }
.enhanced .cwe-set__piece--a { transform: translateY(-18px); }
.enhanced .cwe-set__piece--b { transform: rotate(-6deg) translateY(-8px); }
.enhanced .cwe-set__piece--c { transform: rotate(-2.4deg) translateX(40px); }
.enhanced .cwe-set__bracket path { stroke-dashoffset: 200; }
.enhanced .cat-hero.is-lit .cwe-set__piece {
  opacity: 1;
  transition: opacity .8s var(--paper), transform 1.1s var(--paper);
}
.enhanced .cat-hero.is-lit .cwe-set__piece--a { transform: none; transition-delay: .10s; }        /* SETTLE */
.enhanced .cat-hero.is-lit .cwe-set__piece--b { transform: rotate(3.2deg); transition-delay: .34s; } /* OPEN  */
.enhanced .cat-hero.is-lit .cwe-set__piece--c { transform: rotate(-2.4deg); transition-delay: .50s; }/* SLIDE */
.enhanced .cat-hero.is-lit .cwe-set__bracket path {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--paper) .90s;                        /* DRAW  */
}
.enhanced .cat-hero.is-lit .cwe-set__piece--a .cwe-set__sheen { animation: ctaSheen 1.1s var(--paper) 1.30s 1; } /* LIFT */
@media (prefers-reduced-motion: reduce) {
  .enhanced .cwe-set__piece { opacity: 1; transition: none; }
  .enhanced .cwe-set__piece--a { transform: none; }
  .enhanced .cwe-set__piece--b { transform: rotate(3.2deg); }
  .enhanced .cwe-set__piece--c { transform: rotate(-2.4deg); }
  .enhanced .cwe-set__bracket path { stroke-dashoffset: 0; transition: none; }
  .enhanced .cwe-set__sheen { animation: none !important; }
}
@media (max-width: 899px) {
  .cat-hero--set { min-height: 0; padding-top: 74px; padding-bottom: 40px; }
  .cat-hero--set .cat-hero__grid { gap: 18px; }
  .cat-hero--set .cat-hero__title { margin: .22em 0 .3em; }
  .cat-hero--set .cat-hero__sub { max-width: 40ch; }
  .cwe-set { max-width: 100%; aspect-ratio: 4 / 3; margin-top: 2px; margin-bottom: 40px; }
  .cwe-set__piece--a { left: 0;   top: 18%;   width: 70%; }
  .cwe-set__piece--b { right: 0;  top: -2%;   width: 50%; }
  .cwe-set__piece--c { right: 4%; bottom: 0;  width: 40%; }
  .cwe-set__bracket { display: none; }
  /* stays absolute so it sits under the composition, not over it (the pieces are
     absolutely positioned, so a static caption would render at the top of the box) */
  .cwe-set__shown { left: 0; right: 0; bottom: -30px; letter-spacing: .06em; line-height: 1.4; }
}

/* ---- setdeck: one discovery component, two presentations -----------------
   Mobile: a native scroll-snap swipe deck with the next set always partly visible.
   Desktop: an offset editorial mosaic, not a uniform product wall.
   Works with JavaScript off (native overflow scrolling); dots, counter and the
   alphabet rail are progressive enhancements. */
.setdeck { position: relative; }
.setdeck__rail { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
@media (max-width: 899px) {
  /* one row, scrolled rather than wrapped, so the rail never pushes the deck down a line */
  .setdeck__rail { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .setdeck__rail::-webkit-scrollbar { display: none; }
  .setdeck__shelf { flex: 0 0 auto; }
}
.setdeck__shelf {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-soft);
  font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--oat-70);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.setdeck__shelf:hover, .setdeck__shelf.is-on { border-color: var(--hair-strong); color: var(--ivory); background: rgba(217,180,90,.08); }

.setcard {
  position: relative; display: flex; flex-direction: column; scroll-margin-top: 110px;
  border: 1px solid var(--hair-soft); border-radius: 6px; background: var(--soot); overflow: hidden;
  transition: transform .5s var(--paper), box-shadow .5s var(--paper), border-color .4s var(--ease);
}
.setcard.is-jumped { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,180,90,.35); }
.setcard__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--plum); }
.setcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--paper); }
.setcard__zoom {
  position: absolute; inset: 0; width: 100%; height: 100%; display: flex;
  align-items: flex-end; justify-content: flex-end; padding: 12px;
  background: linear-gradient(180deg, transparent 55%, rgba(15,12,14,.72));
  opacity: 0; transition: opacity .35s var(--ease);
}
.setcard__zoom > span {
  font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory);
  border: 1px solid var(--hair); border-radius: 999px; padding: 7px 13px; background: rgba(15,12,14,.62);
}
.setcard:hover .setcard__zoom, .setcard__zoom:focus-visible { opacity: 1; }
.setcard__body { padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.setcard__name { margin: 0; font-size: .98rem; font-weight: var(--fw-med); line-height: 1.2; }
.setcard__q {
  padding: 0; text-align: left; color: var(--ivory-90);
  border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.setcard__q:hover, .setcard__q:focus-visible { color: var(--gold); border-bottom-color: var(--hair-strong); }
.setcard__meta { margin: 3px 0 0; font-size: .78rem; color: var(--oat-70); }
.setcard__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.setcard__sl { margin-top: 0; }
.setcard__cta {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding-left: 4px;
  font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}
.setcard__cta .arr { transition: transform .3s var(--paper); }
.setcard:hover .setcard__cta .arr { transform: translateX(3px); }

.setdeck__controls { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.setdeck__dots { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; max-width: 46%; }
.setdeck__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hair-soft);
  transition: background .25s var(--ease), transform .25s var(--ease); }
.setdeck__dot.is-on { background: var(--gold); transform: scale(1.4); }
.setdeck__count { margin-left: auto; font-size: var(--fs-label); letter-spacing: .08em;
  text-transform: uppercase; color: var(--oat-70); }

/* Mobile and tablet: the swipe deck. */
@media (max-width: 899px) {
  .setdeck__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 4px 0 8px;
  }
  .setdeck__track::-webkit-scrollbar { display: none; }
  .setcard { scroll-snap-align: center; }
  .setcard__media { aspect-ratio: 5/4; }
  .setcard__zoom { opacity: 1; background: linear-gradient(180deg, transparent 62%, rgba(15,12,14,.62)); }
}
/* Desktop: an offset editorial mosaic. Deliberately not a uniform product wall.
   Four columns with a periodic wide tile and deliberate vertical offsets, so the
   rhythm reads as composed paper layers and the whole set still fits in a scan. */
@media (min-width: 900px) {
  .setdeck__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 26px) clamp(14px, 1.6vw, 22px); align-items: start; }
  .setdeck__track > .setcard:nth-child(4n + 2) { margin-top: 26px; }
  .setdeck__track > .setcard:nth-child(4n + 4) { margin-top: 11px; }
  /* one wider composition per block of eight, and it earns a taller photograph */
  .setdeck__track > .setcard:nth-child(8n + 1) { grid-column: span 2; }
  .setdeck__track > .setcard:nth-child(8n + 1) .setcard__media { aspect-ratio: 16/9; }
  .setcard__media { aspect-ratio: 4/3; }
  .setcard:hover, .setcard:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--hair); }
  .setcard:hover .setcard__media img { transform: scale(1.05); }
  .setdeck__controls [data-setdeck-prev], .setdeck__controls [data-setdeck-next] { display: none; }
  .setdeck__dots { display: none; }
  .setdeck__count { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .setcard, .setcard__media img { transition: none; }
  .setcard:hover { transform: none; }
}

/* ---- printdetail: the card-to-envelope close look ---- */
.printdetail { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 54px); align-items: center; }
@media (min-width: 900px) { .printdetail { grid-template-columns: 1.05fr .95fr; } }
.printdetail__media { position: relative; margin: 0; }
.printdetail__media img { width: 100%; border-radius: 5px; border: 1px solid var(--hair-soft); box-shadow: var(--shadow-lift); }
.printdetail__link { position: absolute; left: 8%; right: 8%; bottom: 16%; width: 84%; height: 40px;
  color: var(--gold); opacity: .8; pointer-events: none; }
.printdetail__link path { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 200; stroke-dashoffset: 200; }
.enhanced .reveal.in .printdetail__link path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--paper) .25s; }
.printdetail__cap { margin-top: 12px; font-size: var(--fs-label); letter-spacing: .08em;
  text-transform: uppercase; color: var(--oat-70); }
@media (prefers-reduced-motion: reduce) {
  .printdetail__link path { stroke-dashoffset: 0; }
  .enhanced .reveal.in .printdetail__link path { transition: none; }
}

/* ---- hvary: the handmade-variation component ----
   Positive craft storytelling on warm paper, not fine print on dark. */
.hvary {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr;
  gap: clamp(18px, 2.4vw, 30px); align-items: start; border-radius: 10px;
  padding: clamp(24px, 4vw, 40px);
  background: linear-gradient(150deg, #efe5d0, #ddceb2 68%, #cdbb9b);
  box-shadow: var(--shadow-lift);
}
.hvary::before { content: ""; position: absolute; inset: 10px; border-radius: 6px;
  border: 1px solid rgba(120,90,40,.35); pointer-events: none; }
.hvary::after { content: ""; position: absolute; inset: 0; background-image: var(--paper-fibre);
  background-size: 220px 220px; opacity: .14; mix-blend-mode: multiply; pointer-events: none; }
.hvary > * { position: relative; z-index: 1; }
.hvary__mark { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  color: #6b5222; border: 1px solid rgba(120,90,40,.4); background: rgba(255,255,255,.28); }
.hvary__mark svg { width: 30px; height: 30px; }
.hvary__body { max-width: 62ch; }
.hvary__k { margin: 2px 0 .55rem; font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  font-weight: var(--fw-med); color: #2f2418; letter-spacing: -.005em; }
.hvary__v { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: #4a3c2c; }
.hvary__extra { margin: .7rem 0 0; font-size: var(--fs-label); color: #5c4c39; }
@media (max-width: 560px) { .hvary { grid-template-columns: 1fr; gap: 14px; } }

/* ---- pcnote: the Paper Culture Note ----
   A lightweight editorial seam. The full heritage and archive system attaches here later. */
.pcnote-band { overflow: hidden; }
.pcnote { position: relative; max-width: 74ch; }
.pcnote__eyebrow { display: inline-flex; align-items: center; gap: .7em; margin-bottom: 1rem;
  font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.pcnote__eyebrow .label__mark { width: 26px; height: 1px; background: var(--foil-soft); display: block; }
.pcnote__t { margin: 0; font-size: clamp(1.15rem, 2.1vw, 1.62rem); font-weight: var(--fw-light);
  line-height: 1.5; letter-spacing: -.005em; color: var(--ivory-90); }

/* ---- qview: the reusable product quick view ----
   One dialog for all seven collections, built in assets/js/script.js from a per-page
   JSON island. Never a per-product page. */
.qview { position: fixed; inset: 0; z-index: 96; display: none; }
.qview.is-open { display: block; }
.qview__scrim { position: absolute; inset: 0; background: rgba(8,6,7,.88); backdrop-filter: blur(6px); }
.qview__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(94vw, 940px); max-height: min(90vh, 860px); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--hair); border-radius: 10px; background: var(--soot);
  box-shadow: var(--shadow-deep);
}
.qview__close {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem; line-height: 1;
  color: var(--ivory); border: 1px solid var(--hair); background: rgba(15,12,14,.72);
}
.qview__close:hover { border-color: var(--gold); background: rgba(217,180,90,.14); }
.qview__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 780px) { .qview__grid { grid-template-columns: 1.02fr .98fr; align-items: stretch; } }
.qview__media { position: relative; overflow: hidden; background: var(--plum); min-height: 220px; }
.qview__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--paper); cursor: zoom-in; }
.qview__media.is-zoomed img { transform: scale(1.75); cursor: zoom-out; }
.qview__zoomhint { position: absolute; left: 12px; bottom: 12px; font-size: var(--fs-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ivory-70);
  border: 1px solid var(--hair-soft); border-radius: 999px; padding: 6px 12px; background: rgba(15,12,14,.6); }
.qview__pending { display: grid; place-items: center; text-align: center; padding: 40px 26px;
  background: linear-gradient(160deg, var(--plum), var(--soot)); }
.qview__pending::before { content: ""; width: 84px; height: 84px; margin: 0 auto 16px;
  background: var(--motif-medallion) center / contain no-repeat; opacity: .4; }
.qview__pending-k { margin: 0 0 .4rem; font-size: 1rem; font-weight: var(--fw-med); color: var(--ivory-90); }
.qview__pending-v { margin: 0; font-size: var(--fs-sm); color: var(--oat-70); max-width: 34ch; }
.qview__body { padding: clamp(24px, 3.4vw, 38px); display: flex; flex-direction: column; }
.qview__cat { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.qview__name { margin: .5rem 0 0; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: var(--fw-light); }
.qview__dl { margin: 18px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px;
  font-size: var(--fs-sm); border-top: 1px solid var(--hair-soft); padding-top: 16px; }
.qview__dl dt { color: var(--oat-45); letter-spacing: .06em; text-transform: uppercase; font-size: var(--fs-label); padding-top: 2px; }
.qview__dl dd { margin: 0; color: var(--ivory-90); }
.qview__vary { margin: 18px 0 0; border-radius: 8px; padding: 14px 16px;
  border: 1px solid rgba(217,180,90,.22); background: rgba(217,180,90,.07); }
.qview__vary-k { margin: 0 0 .25rem; font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); }
.qview__vary-v { margin: 0; font-size: var(--fs-sm); color: var(--ivory-70); line-height: 1.55; }
.qview__actions { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.qview__actions .btn { flex: 1 1 auto; }
.qview__email { flex-basis: 100%; min-height: 44px; display: inline-flex; align-items: center;
  font-size: var(--fs-sm); color: var(--ivory-70); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 779px) {
  .qview__panel { top: auto; bottom: 0; transform: translate(-50%, 0); width: 100%;
    max-height: 92vh; border-radius: 14px 14px 0 0; }
  .qview__media { aspect-ratio: 4/3; min-height: 0; }
  .qview__actions .btn { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .qview__media img { transition: none; } }

/* ============================================================
   FIVE-CATEGORY VISUAL ROLLOUT (2026-08)
   Letter Papers, Gift Cards and Tags, Gift Bags, Packaging, Accessories.

   Every rule below is scoped to a class that only appears on one of those five
   pages. Nothing here touches .cwe-set, .ge-fan, or any unscoped .setdeck /
   .catart / .printdetail rule, so the two approved pages (Gift Envelopes and
   Cards with Envelopes) render from exactly the declarations they were approved
   with. The five identities are driven by assets/data/category-visuals.json:
   heroSet.patternId -> .catset--*, artKey -> .catart--*, discovery.variant ->
   .setdeck--*, printDetail.variant -> .printdetail--*.
   ============================================================ */

/* ---- catset: the shared layered-hero contract ----------------------------
   One markup contract, five compositions. The base gives every hero real paper
   edges, depth shadow, a single stroked mark and a "Shown:" credit; each pattern
   below then places, scales and animates the pieces its own way. */
.catset { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 600px;
  margin-inline: auto; isolation: isolate; }
.catset__piece {
  position: absolute; margin: 0; overflow: hidden; border-radius: 3px;
  border: 1px solid rgba(239,229,208,.20);
  box-shadow: 0 26px 60px rgba(0,0,0,.62), 0 6px 16px rgba(0,0,0,.5);
  background: var(--soot);
}
.catset__piece img { width: 100%; height: 100%; object-fit: cover; }
.catset__sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(244,227,168,.28) 48%, transparent 62%); }
.catset__shown {
  /* QA Round 2: was bottom:-34px, which several patterns' lowest piece overlapped
     (Gift Cards and Tags puts piece C at bottom:0 and it bleeds past the box, so the
     caption printed over the photograph). Cleared properly and given its own space
     below the composition instead of being tucked under it. */
  position: absolute; left: 0; right: 0; top: 100%; margin: 14px 0 0;
  font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--oat-70);
}
/* The one stroked mark per pattern (writing rules, a hanging line, a shelf, a
   crease, a desk edge). Stretched over the composition, drawn once, never looped. */
.catset__mark { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5;
  pointer-events: none; color: var(--gold); opacity: .85; stroke-width: 1.3; fill: none; }
.catset__mark path { stroke-dasharray: 520; stroke-dashoffset: 0; }

/* Entrance is gated on .is-lit, which assets/js/script.js adds to .cat-hero--set.
   With no script the hero renders complete and static. */
.enhanced .catset__piece { opacity: 0; }
.enhanced .catset__mark path { stroke-dashoffset: 520; }
.enhanced .cat-hero.is-lit .catset__piece {
  opacity: 1; transition: opacity .8s var(--paper), transform 1.1s var(--paper);
}
.enhanced .cat-hero.is-lit .catset__mark path {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s var(--paper) .90s;   /* DRAW */
}
@media (prefers-reduced-motion: reduce) {
  .enhanced .catset__piece { opacity: 1; transition: none; }
  .enhanced .catset__mark path { stroke-dashoffset: 0; transition: none; }
  .enhanced .catset__sheen { animation: none !important; }
}
@media (max-width: 899px) {
  .cat-hero--set .catset { max-width: 100%; aspect-ratio: 4 / 3; margin-top: 2px; margin-bottom: 44px; }
  .catset__shown { top: 100%; margin-top: 10px; letter-spacing: .06em; line-height: 1.4; }
  .catset__piece { box-shadow: 0 16px 36px rgba(0,0,0,.6), 0 3px 10px rgba(0,0,0,.45); }
}

/* ---- lp-sheets: Letter Papers ------------------------------------------
   Four portrait writing sheets slid over one another on a desk, at four
   different small angles, with two writing rules drawn beneath them.
   Verbs: SLIDE, UNFOLD, SETTLE, DRAW, LIFT. */
.catset--lp-sheets { max-width: 560px; }
.catset--lp-sheets .catset__piece { border-radius: 2px;
  box-shadow: 0 18px 44px rgba(0,0,0,.56), 0 3px 10px rgba(0,0,0,.44); }
.catset--lp-sheets .catset__piece--a { left: 1%;   top: 20%;    width: 55%; aspect-ratio: 3/4; z-index: 4; transform: rotate(-1.6deg); }
.catset--lp-sheets .catset__piece--b { right: 0;   top: 5%;     width: 46%; aspect-ratio: 3/4; z-index: 3; transform: rotate(2.6deg); }
.catset--lp-sheets .catset__piece--c { right: 7%;  bottom: 1%;  width: 42%; aspect-ratio: 3/4; z-index: 2; transform: rotate(-3.4deg); }
.catset--lp-sheets .catset__piece--d { left: 13%;  top: 1%;     width: 39%; aspect-ratio: 3/4; z-index: 1; transform: rotate(4.4deg); }
.catset--lp-sheets .catset__mark { opacity: .7; }
.enhanced .catset--lp-sheets .catset__piece--a { transform: rotate(-1.6deg) translateY(22px); }   /* SLIDE */
.enhanced .catset--lp-sheets .catset__piece--b { transform: rotate(-4.5deg); }                    /* UNFOLD */
.enhanced .catset--lp-sheets .catset__piece--c { transform: rotate(-3.4deg) translateX(34px); }   /* SLIDE */
.enhanced .catset--lp-sheets .catset__piece--d { transform: rotate(4.4deg); }                     /* SETTLE */
.enhanced .cat-hero.is-lit .catset--lp-sheets .catset__piece--a { transform: rotate(-1.6deg); transition-delay: .12s; }
.enhanced .cat-hero.is-lit .catset--lp-sheets .catset__piece--b { transform: rotate(2.6deg);  transition-delay: .32s; }
.enhanced .cat-hero.is-lit .catset--lp-sheets .catset__piece--c { transform: rotate(-3.4deg); transition-delay: .46s; }
.enhanced .cat-hero.is-lit .catset--lp-sheets .catset__piece--d { transform: rotate(4.4deg);  transition-delay: .60s; }
.enhanced .cat-hero.is-lit .catset--lp-sheets .catset__piece--a .catset__sheen { animation: ctaSheen 1.1s var(--paper) 1.35s 1; } /* LIFT */
@media (max-width: 899px) {
  .catset--lp-sheets .catset__piece--a { left: 0;   top: 14%;   width: 50%; }
  .catset--lp-sheets .catset__piece--b { right: 2%; top: 2%;    width: 40%; }
  .catset--lp-sheets .catset__piece--c { right: 8%; bottom: 0;  width: 36%; }
  .catset--lp-sheets .catset__piece--d { left: 22%; top: 0;     width: 34%; }
}

/* ---- gct-wall: Gift Cards and Tags -------------------------------------
   Five clusters of small objects pinned at different scales and rotations,
   hung from one drawn line. The fifth is dropped on phones rather than shrunk.
   Verbs: DRAW, HANG, GATHER, SLIDE, ILLUMINATE. */
.catset--gct-wall { max-width: 620px; }
.catset--gct-wall .catset__piece { border-radius: 2px; }
.catset--gct-wall .catset__piece--a { left: 5%;  top: 29%;   width: 47%; aspect-ratio: 4/3; z-index: 3; transform: rotate(-2deg); }
.catset--gct-wall .catset__piece--b { right: 1%; top: 6%;    width: 35%; aspect-ratio: 1/1; z-index: 4; transform: rotate(2.4deg); }
.catset--gct-wall .catset__piece--c { left: 19%; bottom: 0;  width: 45%; aspect-ratio: 4/3; z-index: 2; transform: rotate(1.4deg); }
.catset--gct-wall .catset__piece--d { right: 4%; top: 45%;   width: 31%; aspect-ratio: 1/1; z-index: 5; transform: rotate(-3.2deg); }
.catset--gct-wall .catset__piece--e { left: 0;   top: 0;     width: 25%; aspect-ratio: 3/4; z-index: 1; transform: rotate(3.6deg); }
.enhanced .catset--gct-wall .catset__piece--a { transform: rotate(-2deg) translateY(-26px); }     /* HANG */
.enhanced .catset--gct-wall .catset__piece--b { transform: rotate(2.4deg) translateY(-34px); }    /* HANG */
.enhanced .catset--gct-wall .catset__piece--c { transform: rotate(1.4deg) scale(.94); }           /* GATHER */
.enhanced .catset--gct-wall .catset__piece--d { transform: rotate(-3.2deg) scale(.94); }          /* GATHER */
.enhanced .catset--gct-wall .catset__piece--e { transform: rotate(3.6deg) translateY(-30px); }    /* SLIDE */
.enhanced .cat-hero.is-lit .catset--gct-wall .catset__piece--a { transform: rotate(-2deg);   transition-delay: .20s; }
.enhanced .cat-hero.is-lit .catset--gct-wall .catset__piece--b { transform: rotate(2.4deg);  transition-delay: .34s; }
.enhanced .cat-hero.is-lit .catset--gct-wall .catset__piece--c { transform: rotate(1.4deg);  transition-delay: .48s; }
.enhanced .cat-hero.is-lit .catset--gct-wall .catset__piece--d { transform: rotate(-3.2deg); transition-delay: .60s; }
.enhanced .cat-hero.is-lit .catset--gct-wall .catset__piece--e { transform: rotate(3.6deg);  transition-delay: .72s; }
.enhanced .cat-hero.is-lit .catset--gct-wall .catset__piece--c .catset__sheen { animation: ctaSheen 1.1s var(--paper) 1.25s 1; } /* ILLUMINATE */
@media (max-width: 899px) {
  /* A wall of five is a wall of five thumbnails on a phone. Show four, larger. */
  .catset--gct-wall .catset__piece--e { display: none; }
  .catset--gct-wall .catset__piece--a { left: 0;   top: 26%;  width: 52%; }
  .catset--gct-wall .catset__piece--b { right: 1%; top: 0;    width: 38%; }
  .catset--gct-wall .catset__piece--c { left: 16%; bottom: 0; width: 48%; }
  .catset--gct-wall .catset__piece--d { right: 2%; top: 46%;  width: 33%; }
}

/* ---- gb-stack: Gift Bags -----------------------------------------------
   Three standing objects at true relative scale on a drawn shelf line with two
   measure ticks. They rise once and stop; nothing floats.
   Verbs: REVEAL, RISE, STACK, DRAW, LIFT. */
.catset--gb-stack { max-width: 620px; aspect-ratio: 6 / 5; }
.catset--gb-stack .catset__piece--a { left: 0;    bottom: 9%;  width: 60%; aspect-ratio: 4/3; z-index: 1; }
.catset--gb-stack .catset__piece--b { right: 1%;  bottom: 9%;  width: 44%; aspect-ratio: 3/4; z-index: 2; }
.catset--gb-stack .catset__piece--c { left: 30%;  bottom: 0;   width: 38%; aspect-ratio: 4/3; z-index: 3; }
.catset--gb-stack .catset__mark { opacity: .62; }
.enhanced .catset--gb-stack .catset__piece--a { transform: translateY(34px); }    /* RISE */
.enhanced .catset--gb-stack .catset__piece--b { transform: translateY(48px); }    /* RISE */
.enhanced .catset--gb-stack .catset__piece--c { transform: scale(.92); }          /* STACK */
.enhanced .cat-hero.is-lit .catset--gb-stack .catset__piece--a { transform: none; transition-delay: .14s; }
.enhanced .cat-hero.is-lit .catset--gb-stack .catset__piece--b { transform: none; transition-delay: .34s; }
.enhanced .cat-hero.is-lit .catset--gb-stack .catset__piece--c { transform: none; transition-delay: .52s; }
.enhanced .cat-hero.is-lit .catset--gb-stack .catset__piece--b .catset__sheen { animation: ctaSheen 1.1s var(--paper) 1.25s 1; } /* LIFT */
@media (max-width: 899px) {
  .catset--gb-stack .catset__piece--a { left: 0;   bottom: 7%; width: 52%; }
  .catset--gb-stack .catset__piece--b { right: 1%; bottom: 7%; width: 36%; }
  .catset--gb-stack .catset__piece--c { left: 26%; bottom: 0;  width: 34%; }
}

/* ---- pk-fold: Packaging -------------------------------------------------
   Two panels meeting at one drawn crease that runs the full height, the right
   one tipped back about that edge, a third tucked behind.
   Verbs: UNWRAP, SETTLE, FOLD, SLIDE, DRAW, REVEAL. */
.catset--pk-fold { max-width: 620px; perspective: 1100px; }
.catset--pk-fold .catset__piece--a { left: 2%;  top: 12%;   width: 47%; aspect-ratio: 3/4; z-index: 3; }
.catset--pk-fold .catset__piece--b { left: 50%; top: 8%;    width: 43%; aspect-ratio: 3/4; z-index: 2;
  transform-origin: left center; transform: rotateY(-13deg); }
.catset--pk-fold .catset__piece--c { left: 13%; bottom: 0;  width: 36%; aspect-ratio: 4/3; z-index: 1; }
.catset--pk-fold .catset__mark { opacity: .58; }
.enhanced .catset--pk-fold .catset__piece--a { transform: translateY(-16px); }                 /* SETTLE */
.enhanced .catset--pk-fold .catset__piece--b { transform: rotateY(-34deg); }                   /* FOLD */
.enhanced .catset--pk-fold .catset__piece--c { transform: translateX(-30px); }                 /* SLIDE */
.enhanced .cat-hero.is-lit .catset--pk-fold .catset__piece--a { transform: none;               transition-delay: .12s; }
.enhanced .cat-hero.is-lit .catset--pk-fold .catset__piece--b { transform: rotateY(-13deg);    transition-delay: .34s; }
.enhanced .cat-hero.is-lit .catset--pk-fold .catset__piece--c { transform: none;               transition-delay: .52s; }
.enhanced .cat-hero.is-lit .catset--pk-fold .catset__piece--a .catset__sheen { animation: ctaSheen 1.1s var(--paper) 1.30s 1; } /* REVEAL */
@media (max-width: 899px) {
  .catset--pk-fold { perspective: 800px; }
  .catset--pk-fold .catset__piece--a { left: 0;   top: 8%;   width: 48%; }
  .catset--pk-fold .catset__piece--b { left: 50%; top: 4%;   width: 44%; }
  .catset--pk-fold .catset__piece--c { left: 12%; bottom: 0; width: 38%; }
}
@media (prefers-reduced-motion: reduce) {
  .enhanced .catset--pk-fold .catset__piece--b { transform: rotateY(-13deg); }
}

/* ---- ac-desk: Accessories ----------------------------------------------
   Objects on a work surface: a spread of diaries, an open booklet lifted over
   it, tall books to the right, on a drawn desk edge with a corner bracket.
   Verbs: SETTLE, SLIDE, OPEN, STACK, DRAW, LIFT. */
.catset--ac-desk { max-width: 640px; aspect-ratio: 6 / 5; }
.catset--ac-desk .catset__piece--a { left: 0;   bottom: 10%; width: 64%; aspect-ratio: 4/3; z-index: 1; }
.catset--ac-desk .catset__piece--b { right: 0;  bottom: 26%; width: 50%; aspect-ratio: 4/3; z-index: 3;
  transform-origin: left center; }
.catset--ac-desk .catset__piece--c { right: 4%; bottom: 0;   width: 38%; aspect-ratio: 4/3; z-index: 2; }
.catset--ac-desk .catset__mark { opacity: .66; }
.enhanced .catset--ac-desk .catset__piece--a { transform: translateX(-30px); }    /* SLIDE */
.enhanced .catset--ac-desk .catset__piece--b { transform: rotate(-5deg); }        /* OPEN */
.enhanced .catset--ac-desk .catset__piece--c { transform: translateY(-20px); }    /* STACK */
.enhanced .cat-hero.is-lit .catset--ac-desk .catset__piece--a { transform: none; transition-delay: .12s; }
.enhanced .cat-hero.is-lit .catset--ac-desk .catset__piece--b { transform: none; transition-delay: .34s; }
.enhanced .cat-hero.is-lit .catset--ac-desk .catset__piece--c { transform: none; transition-delay: .50s; }
.enhanced .cat-hero.is-lit .catset--ac-desk .catset__piece--b .catset__sheen { animation: ctaSheen 1.1s var(--paper) 1.28s 1; } /* LIFT */
@media (max-width: 899px) {
  .catset--ac-desk .catset__piece--a { left: 0;   bottom: 10%; width: 58%; }
  .catset--ac-desk .catset__piece--b { right: 0;  bottom: 26%; width: 44%; }
  .catset--ac-desk .catset__piece--c { right: 4%; bottom: 0;   width: 34%; }
}

/* ---- catart per category -------------------------------------------------
   The atmosphere layer is shared, but a wall of saturated tags and a sheet of
   pale ivory writing paper cannot carry the same treatment. Each category's
   artKey tunes opacity, tint and the geometry of the oversized hero sheet, so
   the five pages have visibly different air without a global override. */

/* QA Round 2: each category still gets its own air, but the difference is now
   carried by WHERE the atmosphere sits and how quiet it is, not by how large a
   product photograph is pasted behind the hero. Every one of these inherits the
   blur / desaturate / darken treatment above; only placement and level vary.
   The non-hero bands (story, deck, note, enquiry) keep their existing tuning. */

/* Letter Papers: the palest photography on the site, so it needs the deepest
   knock-down. A low, upright breath of print behind the sheets, nothing more. */
.catart--letters { --art-op: .36; }
.catart--letters .catart__print { filter: saturate(.8) contrast(1.06) sepia(.1); }
.cat-hero--set .catart--letters .catart__print {
  right: -4%; top: 4%; width: 52%; height: 88%;
  background-position: 48% 58%; --art-op: .20;
  filter: blur(11px) saturate(.24) brightness(.40) contrast(.9);
}
.catart--letters .catart__edge { opacity: .24; }
/* FORM: correspondence. Sheet edges stacked on a writing surface — the lip of one
   page lying over the next — with a single faint print imprint low behind them. */
.cat-hero--set .catart--letters .catart__form {
  --form-op: .5;
  --form:
    repeating-linear-gradient(177.4deg,
      rgba(239,229,208,.075) 0 1.1px,
      rgba(0,0,0,.20) 1.1px 5px,
      transparent 5px 58px),
    radial-gradient(52% 40% at 74% 74%, rgba(199,185,162,.10), transparent 72%);
  --form-mask: linear-gradient(96deg, transparent 0 40%, rgba(0,0,0,.45) 58%, #000 76%, #000 91%, transparent 100%);
}

/* Gift Cards and Tags: the most saturated photography on the site, so the lowest
   level of all. It sits high and small, like light off a wall of samples. */
.catart--tags { --art-op: .26; }
.catart--tags .catart__print { filter: saturate(.58) contrast(1.04) brightness(.88); }
.cat-hero--set .catart--tags .catart__print {
  --art-mask: radial-gradient(72% 74% at 84% 30%, #000 0%, rgba(0,0,0,.4) 44%, transparent 76%);
  right: -4%; top: -8%; width: 54%; height: 82%;
  background-position: 50% 42%; --art-op: .18;
  filter: blur(12px) saturate(.26) brightness(.46) contrast(.88);
}
.catart--tags .catart__edge { opacity: .26; filter: saturate(.5); }
/* FORM: the finishing touch. One enlarged gold medallion, drawn as concentric print
   rings, and the hanging line the tags are strung on. */
.cat-hero--set .catart--tags .catart__form {
  --form-op: .62;
  --form:
    repeating-radial-gradient(circle at 72% 34%,
      rgba(217,180,90,.115) 0 1.5px, transparent 1.5px 35px),
    linear-gradient(97.6deg, transparent 0 30%, rgba(217,180,90,.20) 30% 30.14%, transparent 30.14%);
  --form-mask: radial-gradient(78% 88% at 72% 44%, #000 0 34%, rgba(0,0,0,.55) 62%, transparent 86%);
}

/* Gift Bags: a tall narrow breath, because this category is about standing height. */
.catart--bags { --art-op: .30; }
.catart--bags .catart__print { filter: saturate(.7) contrast(1.03) brightness(.9); }
.cat-hero--set .catart--bags .catart__print {
  --art-mask: radial-gradient(66% 96% at 84% 50%, #000 0%, rgba(0,0,0,.42) 46%, transparent 78%);
  right: -6%; top: -4%; width: 44%; height: 108%;
  background-position: 44% 50%; --art-op: .26;
  filter: blur(9px) saturate(.34) brightness(.5) contrast(.92);
}
/* FORM: standing paper. Vertical creases running the height of the band, and the arc
   of a handle above them. */
.cat-hero--set .catart--bags .catart__form {
  --form-op: .55;
  --form:
    repeating-linear-gradient(90.6deg,
      rgba(239,229,208,.06) 0 1px,
      rgba(0,0,0,.17) 1px 4px,
      transparent 4px 66px),
    radial-gradient(circle at 70% 96%,
      transparent 0 176px, rgba(217,180,90,.15) 176px 178px, transparent 178px);
  --form-mask: linear-gradient(96deg, transparent 0 40%, rgba(0,0,0,.4) 56%, #000 74%, #000 90%, transparent 100%);
}

/* Packaging: the busiest source photography (wrapping rolls), so it is pushed
   furthest back and furthest off the corner. */
.catart--wrap { --art-op: .34; }
.catart--wrap .catart__print { filter: saturate(.82) contrast(1.08) sepia(.12); }
.cat-hero--set .catart--wrap .catart__print {
  --art-mask: radial-gradient(70% 78% at 86% 40%, #000 0%, rgba(0,0,0,.4) 44%, transparent 76%);
  right: -8%; top: -6%; width: 54%; height: 96%;
  background-position: 46% 44%; --art-op: .19;
  filter: blur(13px) saturate(.28) brightness(.44) contrast(.88);
}
/* FORM: fold and wrap. One long crease across the band, a ribbon line crossing it,
   and the faint register of a wrapping sheet folded behind. */
.cat-hero--set .catart--wrap .catart__form {
  --form-op: .58;
  --form:
    linear-gradient(112deg, transparent 0 44%,
      rgba(239,229,208,.075) 44% 44.5%, rgba(0,0,0,.24) 44.5% 49%, transparent 49%),
    linear-gradient(21deg, transparent 0 58%,
      rgba(217,180,90,.17) 58% 58.28%, transparent 58.28%),
    repeating-linear-gradient(112deg, rgba(239,229,208,.035) 0 1px, transparent 1px 84px);
  --form-mask: radial-gradient(74% 92% at 70% 52%, #000 0 26%, rgba(0,0,0,.5) 58%, transparent 84%);
}

/* Accessories: warm, low and wide, so it behaves like the far edge of a desk
   rather than a hanging sheet. Its photography is the lightest on the site. */
.catart--desk { --art-op: .28; }
.catart--desk .catart__print { filter: saturate(.5) contrast(1.02) brightness(.8); }
.cat-hero--set .catart--desk .catart__print {
  --art-mask: radial-gradient(84% 70% at 72% 78%, #000 0%, rgba(0,0,0,.4) 46%, transparent 80%);
  right: -8%; top: auto; bottom: -6%; width: 66%; height: 62%;
  background-position: 42% 46%; --art-op: .18;
  filter: blur(12px) saturate(.22) brightness(.42) contrast(.9);
}
.catart--desk .catart__edge { opacity: .22; filter: saturate(.55); }
/* FORM: the paper desk. A low shadow along the far edge of the surface, with the
   banded page block of a bound book resting on it. */
.cat-hero--set .catart--desk .catart__form {
  --form-op: .6;
  --form:
    repeating-linear-gradient(180deg,
      rgba(239,229,208,.06) 0 1.2px, rgba(0,0,0,.15) 1.2px 4px, transparent 4px 15px),
    linear-gradient(180deg, transparent 0 58%, rgba(0,0,0,.30) 80%, rgba(0,0,0,.46) 100%);
  --form-mask: radial-gradient(92% 62% at 68% 88%, #000 0 30%, rgba(0,0,0,.5) 62%, transparent 88%);
}
@media (max-width: 899px) {
  /* QA Round 2 mobile rule: STRICTER than desktop. No hero wallpaper photography at
     all on a phone. What survives is a single bounded, blurred breath of the
     category's own print low in the band, well under the foreground products, so a
     small screen shows a clean dark stage, clear products, a strong title and
     readable copy — and nothing else. */
  .cat-hero--set .catart--letters .catart__print,
  .cat-hero--set .catart--tags .catart__print,
  .cat-hero--set .catart--bags .catart__print,
  .cat-hero--set .catart--wrap .catart__print,
  .cat-hero--set .catart--desk .catart__print {
    inset: auto 0 0 -8%; width: 116%; height: 42%; transform: none;
    border-radius: 0; border: 0; box-shadow: none; background-position: 48% 44%;
    filter: blur(14px) saturate(.22) brightness(.4) contrast(.88);
    --art-mask: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 42%, #000 100%);
  }
  .cat-hero--set .catart--letters .catart__print,
  .cat-hero--set .catart--tags .catart__print,
  .cat-hero--set .catart--bags .catart__print,
  .cat-hero--set .catart--wrap .catart__print,
  .cat-hero--set .catart--desk .catart__print { --art-op: .16; }
  /* FINAL PASS, same rule for the form layer: on a phone it is a hint of structure low
     in the band and nothing else. It never runs behind the title or the copy, and it
     is halved against desktop so a small screen keeps a clean dark stage. */
  /* Listed per category on purpose: the desktop rules above are .cat-hero--set
     .catart--X .catart__form (0,3,0), and a media query adds no specificity, so a
     shorter selector here would lose and the desktop mask would survive on phones.
     That is exactly what let the Packaging crease and ribbon run across the mobile
     title on first inspection. */
  .cat-hero--set .catart--letters .catart__form,
  .cat-hero--set .catart--tags .catart__form,
  .cat-hero--set .catart--bags .catart__form,
  .cat-hero--set .catart--wrap .catart__form,
  .cat-hero--set .catart--desk .catart__form {
    --form-op: .28;
    /* Nothing above the lower third: on a phone the copy sits high in the band, so the
       form must not run behind the title or the body text at all. */
    --form-mask: linear-gradient(180deg, transparent 0 64%, rgba(0,0,0,.45) 80%, #000 95%, transparent 100%);
  }
}

/* ---- setdeck variants ----------------------------------------------------
   One component, five presentations. Mobile keeps a 14px gap in every variant
   because assets/js/script.js measures the step as card width + 14; only the
   card width and the media aspect change per category. */

/* Letter Papers: portrait sheets, three wide columns laid out like a desk. */
@media (max-width: 899px) {
  .setdeck--sheets .setdeck__track { grid-auto-columns: 80%; }
  .setdeck--sheets .setcard__media { aspect-ratio: 3/4; }
}
@media (min-width: 900px) {
  .setdeck--sheets .setdeck__track { grid-template-columns: repeat(3, 1fr); }
  .setdeck--sheets .setcard__media { aspect-ratio: 3/4; }
  .setdeck--sheets .setdeck__track > .setcard:nth-child(3n + 2) { margin-top: 34px; }
  .setdeck--sheets .setdeck__track > .setcard:nth-child(3n + 3) { margin-top: 14px; }
  .setdeck--sheets .setdeck__track > .setcard:nth-child(8n + 1) { grid-column: auto; }
  .setdeck--sheets .setdeck__track > .setcard:nth-child(8n + 1) .setcard__media { aspect-ratio: 3/4; }
  .setdeck--sheets .setcard:hover, .setdeck--sheets .setcard:focus-within { transform: translateY(-4px); }
}

/* Gift Cards and Tags: small square objects, five dense columns, no offsets. */
@media (max-width: 899px) {
  .setdeck--wall .setdeck__track { grid-auto-columns: 66%; }
  .setdeck--wall .setcard__media { aspect-ratio: 1/1; }
}
@media (min-width: 900px) {
  .setdeck--wall .setdeck__track { grid-template-columns: repeat(5, 1fr); gap: 14px 12px; }
  .setdeck--wall .setcard__media { aspect-ratio: 1/1; }
  .setdeck--wall .setdeck__track > .setcard:nth-child(4n + 2),
  .setdeck--wall .setdeck__track > .setcard:nth-child(4n + 4) { margin-top: 0; }
  .setdeck--wall .setdeck__track > .setcard:nth-child(8n + 1) { grid-column: auto; }
  .setdeck--wall .setdeck__track > .setcard:nth-child(8n + 1) .setcard__media { aspect-ratio: 1/1; }
  .setdeck--wall .setcard__body { padding: 10px 12px; }
  .setdeck--wall .setcard__name { font-size: .9rem; }
  .setdeck--wall .setcard:hover, .setdeck--wall .setcard:focus-within {
    transform: translateY(-5px); border-color: rgba(217,180,90,.5); }
}

/* Gift Bags: tall objects, four staggered portrait columns, never widened. */
@media (max-width: 899px) {
  .setdeck--tall .setdeck__track { grid-auto-columns: 74%; }
  .setdeck--tall .setcard__media { aspect-ratio: 4/5; }
}
@media (min-width: 900px) {
  .setdeck--tall .setcard__media { aspect-ratio: 4/5; }
  .setdeck--tall .setdeck__track > .setcard:nth-child(4n + 2) { margin-top: 42px; }
  .setdeck--tall .setdeck__track > .setcard:nth-child(4n + 3) { margin-top: 16px; }
  .setdeck--tall .setdeck__track > .setcard:nth-child(4n + 4) { margin-top: 54px; }
  .setdeck--tall .setdeck__track > .setcard:nth-child(8n + 1) { grid-column: auto; }
  .setdeck--tall .setdeck__track > .setcard:nth-child(8n + 1) .setcard__media { aspect-ratio: 4/5; }
  .setdeck--tall .setcard:hover, .setdeck--tall .setcard:focus-within { transform: translateY(-7px); }
}

/* Packaging: a wide-narrow-narrow panel rhythm, like folded panels of
   different widths meeting at creases. */
@media (max-width: 899px) {
  .setdeck--fold .setdeck__track { grid-auto-columns: 84%; }
}
@media (min-width: 900px) {
  .setdeck--fold .setdeck__track { grid-template-columns: repeat(4, 1fr); }
  .setdeck--fold .setdeck__track > .setcard { grid-column: span 1; margin-top: 0; }
  .setdeck--fold .setdeck__track > .setcard:nth-child(3n + 1) { grid-column: span 2; }
  .setdeck--fold .setdeck__track > .setcard:nth-child(3n + 1) .setcard__media { aspect-ratio: 16/10; }
  .setdeck--fold .setdeck__track > .setcard:nth-child(3n + 3) { margin-top: 28px; }
  .setdeck--fold .setdeck__track > .setcard:nth-child(8n + 1) .setcard__media { aspect-ratio: 16/10; }
}

/* Accessories: a cabinet. One large piece per block, small ones around it. */
@media (max-width: 899px) {
  .setdeck--desk .setdeck__track { grid-auto-columns: 78%; }
}
@media (min-width: 900px) {
  .setdeck--desk .setdeck__track { grid-auto-rows: min-content; }
  .setdeck--desk .setdeck__track > .setcard { margin-top: 0; }
  .setdeck--desk .setdeck__track > .setcard:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; }
  .setdeck--desk .setdeck__track > .setcard:nth-child(7n + 1) .setcard__media { aspect-ratio: 5/4; }
  .setdeck--desk .setdeck__track > .setcard:nth-child(7n + 4) { margin-top: 22px; }
  .setdeck--desk .setdeck__track > .setcard:nth-child(7n + 6) { margin-top: 12px; }
  .setdeck--desk .setdeck__track > .setcard:nth-child(8n + 1) { grid-column: span 2; }
  .setdeck--desk .setcard:hover, .setdeck--desk .setcard:focus-within { transform: translateY(-5px); }
}

/* ---- printdetail variants -----------------------------------------------
   Same scene, different geometry, and the photograph changes side between
   categories so consecutive collections never open with the same composition. */
@media (min-width: 900px) {
  .printdetail--letters { grid-template-columns: .95fr 1.05fr; }
  .printdetail--letters .printdetail__media { order: 2; }
  .printdetail--letters .printdetail__copy  { order: 1; }
  .printdetail--tags    { grid-template-columns: 1fr 1fr; }
  .printdetail--bags    { grid-template-columns: .96fr 1.04fr; }
  .printdetail--bags .printdetail__media { order: 2; }
  .printdetail--bags .printdetail__copy  { order: 1; }
  .printdetail--fold    { grid-template-columns: 1.15fr .85fr; }
  .printdetail--desk    { grid-template-columns: .92fr 1.08fr; }
  .printdetail--desk .printdetail__media { order: 2; }
  .printdetail--desk .printdetail__copy  { order: 1; }
}
/* The drawn line is a different gesture per category: a diagonal following the
   envelope, an arc like a hanging cord, a corner, a vertical crease, a curve. */
.printdetail--letters .printdetail__link { bottom: 22%; }
.printdetail--tags .printdetail__link    { bottom: auto; top: 10%; }
.printdetail--fold .printdetail__link    { left: 46%; right: auto; width: 8%; height: 76%; top: 12%; }
.printdetail--desk .printdetail__link    { bottom: 12%; }

/* ---- wrapch: the Wrapping Paper chapter, inside Packaging only ----------
   Wrapping Paper is never a top-level collection. It gets a real editorial
   chapter here: a lead photograph of the rolls beside the copy, and a strip of
   the confirmed range photographs at a size where the pattern is legible. */
.wrapch { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3.2vw, 42px); align-items: center; }
@media (min-width: 900px) { .wrapch { grid-template-columns: .82fr 1.18fr; } }
.wrapch__lead { position: relative; margin: 0; }
.wrapch__lead img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--hair-soft); box-shadow: var(--shadow-lift); }
@media (max-width: 899px) { .wrapch__lead img { aspect-ratio: 16/10; } }
.wrapch__cap { margin-top: 10px; font-size: var(--fs-label); letter-spacing: .08em;
  text-transform: uppercase; color: var(--oat-70); }
.wrapch__strip {
  margin-top: clamp(22px, 3vw, 34px);
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 2px 0 8px;
}
.wrapch__strip::-webkit-scrollbar { display: none; }
.wrapch__tile { margin: 0; scroll-snap-align: center; }
.wrapch__tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 5px;
  border: 1px solid var(--hair-soft); transition: transform .6s var(--paper); }
.wrapch__tile figcaption { margin-top: 8px; font-size: var(--fs-label); letter-spacing: .08em;
  text-transform: uppercase; color: var(--oat-70); }
@media (min-width: 900px) {
  /* Full width beneath the panel, all five patterns visible at once and still
     large enough to read the print. */
  .wrapch__strip { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr);
    grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; }
  .wrapch__tile:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .wrapch__tile img { transition: none; } }

/* The pilot's crops are mostly black ground, so a mask that runs to the edge of a
   band is invisible there. Four of the five rollout categories have pale or warm
   photography (ivory writing paper, gold foil wrapping paper, a warm desk, a
   colour-block tag grid), and the same mask would clip those crops into a visible
   grey slab at the section boundary. Every non-hero band in these categories
   therefore uses an inset radial that fades out before it reaches any edge.
   The hero is unaffected: it sets its own --art-mask directly on .catart__print. */
.catart--letters, .catart--tags, .catart--bags, .catart--wrap, .catart--desk {
  --art-mask: radial-gradient(56% 52% at 88% 46%, #000 2%, rgba(0,0,0,.55) 40%, transparent 74%);
}
@media (max-width: 899px) {
  .catart--letters, .catart--tags, .catart--bags, .catart--wrap, .catart--desk {
    --art-mask: radial-gradient(84% 48% at 74% 36%, #000 4%, rgba(0,0,0,.6) 44%, transparent 78%);
  }
}

/* ============================================================
   HERITAGE / ARCHIVE / FORT MAP  (2026-08 Paper Culture pass)
   Motion verbs: PAPER FOLD DRAW INK STAMP SETTLE.
   All motion is transform/opacity, runs once, and is driven by the
   existing .reveal + .in observer, so with JS off or under
   prefers-reduced-motion every element renders at its final state.
   Scoped to .hchap / .arch / .fmap: category pages are untouched.
   ============================================================ */

/* -- Archival Paper Culture continuity fragment (hero) -- */

/* -- Heritage editorial chapters -- */
.hchap { display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: 78%;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px 0 14px; margin: 0 calc(var(--gutter, 20px) * -1); padding-inline: var(--gutter, 20px);
  scrollbar-width: none; }
.hchap::-webkit-scrollbar { display: none; }
/* QA Round 1: these read as four dull grey rectangles with small grey text. They are
   now individual paper pieces: more presence, a real heading step, and body copy at
   full reading size rather than caption size. */
.hchap__card { scroll-snap-align: start; position: relative; display: flex; flex-direction: column;
  gap: .62rem; padding: 30px 26px 32px; border: 1px solid var(--hair); border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  background-image: var(--paper-fibre); background-blend-mode: overlay;
  box-shadow: 0 22px 44px -30px rgba(0,0,0,.9); }
.hchap__idx { font-size: var(--fs-micro); letter-spacing: .3em; color: var(--gold); font-weight: var(--fw-med); }
.hchap__k { font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: var(--fw-reg);
  color: var(--ivory); letter-spacing: .005em; line-height: 1.15; }
.hchap__t { font-size: var(--fs-detail); line-height: 1.62; color: var(--ivory-90); margin: 0; }
.hchap__rule { position: absolute; left: 20px; right: 20px; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent); transform-origin: left center; }
.enhanced .reveal .hchap__rule { transform: scaleX(0); }
.enhanced .reveal.in .hchap__rule { animation: drawRule .9s var(--paper) both; }
@keyframes drawRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hchap__pager { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.hchap__pager i { width: 5px; height: 5px; border-radius: 50%; background: var(--hair-strong); }
@media (min-width: 700px){
  .hchap { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-columns: auto;
    overflow: visible; margin: 0; padding-inline: 0; gap: 18px; }
  .hchap__pager { display: none; }
}
@media (min-width: 1100px){
  .hchap { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
  .hchap__card { padding: 26px 22px 30px; }
  .hchap__card:nth-child(even) { transform: translateY(18px); }
}

/* -- FROM THE ARCHIVE -- */
.arch { position: relative; display: grid; gap: clamp(22px,4vw,34px); align-items: center; }
.arch__sheet { position: relative; border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(201,169,97,.22); box-shadow: 0 26px 60px -30px rgba(0,0,0,.85); }
.arch__sheet img { display: block; width: 100%; height: auto; }
.arch__sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,12,14,.10), rgba(15,12,14,.55)); }
.arch__stamp { position: absolute; left: 18px; bottom: 16px; z-index: 2;
  font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--oat-70);
  border: 1px solid var(--hair-strong); border-radius: 999px; padding: 6px 12px;
  background: rgba(15,12,14,.6); backdrop-filter: blur(3px); }
/* QA Round 1: this used to be a 6.4rem "1974". Public storytelling no longer turns on
   a date; the archive chapter now leads on Paper Culture, which is what the sheet
   beside it actually shows. "Paper" stays ivory, "Culture" takes the foil. */
.arch__year { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: var(--fw-light); line-height: .96;
  color: var(--ivory); letter-spacing: -.015em; margin: 0 0 .35em; }
/* The genuine archival crop of the two words belongs here, not under the hero H1. */
.arch__frag { margin: 0 0 1.1rem; max-width: 320px; }
.arch__frag img { display: block; width: 100%; height: auto; border-radius: 2px;
  opacity: .88; filter: saturate(.75) contrast(1.05); }
.arch__frag figcaption { margin-top: 8px; font-size: var(--fs-micro); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.arch__body { color: var(--ivory-70); font-weight: var(--fw-light); margin: 0 0 1rem; }
.arch__then { display: block; font-size: var(--fs-micro); letter-spacing: .24em; text-transform: uppercase;
  color: var(--oat-45); margin-bottom: .5rem; }
.arch__now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--hair); }
.arch__now b { font-weight: var(--fw-reg); font-size: 1.15rem; color: var(--ivory); }
.enhanced .reveal .arch__sheet { opacity: 0; transform: translateY(20px) rotate(-.5deg); }
.enhanced .reveal.in .arch__sheet { animation: archSettle 1.15s var(--paper) .1s both; }

/* ==================================================================
   PAPER CULTURE CHAPTER, TEXT-LED (preview closure pass, 2026-08-26).

   The archive folio is GONE. It rendered a ribbed handmade-paper ground
   carrying a blind-embossed wordmark (.folio, .folio__sheet,
   .folio__emboss, .folio__reg, .folio__deckle, .folio__cap and the
   folioPlace keyframes, plus the earlier .folio__press) and human QA
   rejected that visual outright. All of it is deleted rather than
   hidden, so it cannot come back by accident. The two chapters it used
   to sit in - the homepage archive chapter and the About "Two words"
   chapter - are now composed as COMPLETE text-led editorial passages.

   No placeholder, no reserved empty box, no "image coming soon". The
   decoration is the dark ground, the type, one restrained gold rule,
   and (on About) the existing motif linework already behind .craft.

   TO REINSTATE THE APPROVED REPLACEMENT VISUAL: add the figure back as
   the second grid child and drop the --text modifier. The two-column
   rules (.craft at 900, .arch at 940) are deliberately left untouched
   and will pick the figure straight back up.
   ================================================================== */
.arch--text, .craft--text { max-width: 64ch; margin-inline: auto; text-align: center; }
@media (min-width: 900px){ .craft.craft--text { grid-template-columns: minmax(0, 1fr); } }
/* Doubled class on purpose: the two-column `.arch` rule for the old figure layout is
   declared LATER in this file, so a single-class modifier ties on specificity and
   loses. Without this the chapter kept a phantom second column and the text was
   squeezed into ~305px. */
@media (min-width: 940px){ .arch.arch--text { grid-template-columns: minmax(0, 1fr); } }
/* The eyebrow is an inline-flex chip, so it needs centring explicitly. */
.arch--text .label, .craft--text .label { justify-content: center; }
.arch--text .arch__now { justify-content: center; text-align: center; }
.craft--text > div { max-width: none; }

/* The one piece of ornament these chapters carry: a short gold hairline that
   separates the title from the passage. Uses the existing gold token, fades at
   both ends so it reads as drawn rather than as a border. */
.pcrule {
  display: block; width: clamp(64px, 8vw, 96px); height: 1px;
  margin: clamp(16px, 2vw, 24px) auto clamp(18px, 2.2vw, 26px);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .85;
}

@keyframes archSettle { from { opacity: 0; transform: translateY(20px) rotate(-.5deg); }
                          to { opacity: 1; transform: none; } }
@media (min-width: 940px){ .arch { grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: clamp(34px,4vw,56px); } }

/* -- SIGNATURE FORT MAP -- */
.fmap-sec { position: relative; overflow: hidden; }
/* PAPER: the dark page warms toward the kraft of the real archival sheet */
.fmap-sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(185,154,115,.20), transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(185,154,115,.055) 62%, rgba(185,154,115,.10) 100%); }
.fmap-sec > .container { position: relative; z-index: 1; }
.fmap { display: grid; gap: clamp(24px,4vw,38px); align-items: start; }

/* ----------------------------------------------------------------------
   CLEAN FORT MAP (QA Round 1). The primary Visit visual is now the light
   client map (assets/images/archive/fort-map-clean.png), cropped from
   Archive/Chimanlals Map.png. It is presented as a real paper sheet lying
   on the dark page: white mat, soft cast shadow, no dark chrome. The old
   kraft scan is demoted to From the Archive only.
   ---------------------------------------------------------------------- */
.fmap__sheetwrap { position: relative; }
.fmap__paper { position: relative; border-radius: 2px; overflow: hidden;
  /* Thinner mat than Round 2: the derivative now carries the map panel's own printed
     margin, so a deep white border on top of it read as wasted paper. */
  background: #fbf8f1; padding: clamp(7px,1vw,13px);
  box-shadow: 0 34px 74px -30px rgba(0,0,0,.85), 0 2px 0 rgba(0,0,0,.35),
              0 0 0 1px rgba(255,255,255,.06); }
.fmap__paper img { display: block; width: 100%; height: auto; }
/* PAPER ENTER: the sheet is placed on the table once, then it is still. */
.enhanced .reveal .fmap__paper { opacity: 0; transform: translateY(16px) rotate(-.5deg); }
.enhanced .reveal.in .fmap__paper { animation: sheetPlace 1s var(--paper) .05s both; }
@keyframes sheetPlace {
  from { opacity: 0; transform: translateY(16px) rotate(-.5deg); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   ENLARGE — ONE INTERACTION, ONE LABEL (FINAL PASS).
   Round 2 shipped two instructions at once: a "Tap to enlarge" badge on
   the sheet AND a "Click to enlarge map ->" hint in the caption line.
   Human QA asked for exactly one. The caption hint is deleted; the badge
   is the single affordance and now reads "Enlarge map" at every viewport
   (it no longer collapses to an icon on phones, because the widened map
   crop gives it a blank paper foot to sit in on any screen).

   The whole sheet remains the target: a full-cover invisible button with
   cursor:zoom-in, so a customer can click the map itself rather than
   hunting for a control.
   ------------------------------------------------------------------ */
.fmap__enlarge { position: absolute; inset: 0; z-index: 4; cursor: zoom-in;
  border: 0; padding: 0; background: transparent; }
.fmap__enlarge:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.fmap__zoom { position: absolute; right: clamp(10px,1.4vw,18px); bottom: clamp(10px,1.4vw,18px);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 2px;
  background: rgba(15,12,14,.9); color: var(--ivory); border: 1px solid rgba(217,180,90,.5);
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase;
  transition: background .3s var(--paper), border-color .3s var(--paper); }
.fmap__zoom svg { color: var(--gold); flex: none; }
.fmap__enlarge:hover .fmap__zoom, .fmap__enlarge:focus-visible .fmap__zoom,
.fmap__sheetwrap:hover .fmap__zoom {
  background: rgba(15,12,14,.98); border-color: var(--gold); }
.fmap__capline { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 20px; }
.fmap__sheetwrap:hover .fmap__paper { box-shadow: 0 40px 82px -28px rgba(0,0,0,.9),
  0 2px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(217,180,90,.35); }
.fmap__paper { transition: box-shadow .35s ease; }

/* ROUTE + DESTINATION STAMP, drawn in ink that reads on white paper */
.fmap__route { position: absolute; inset: clamp(7px,1vw,13px); width: auto; height: auto;
  z-index: 3; pointer-events: none; }
.fmap__line { fill: none; stroke: #b8452e; stroke-width: 5; stroke-linecap: round;
  stroke-linejoin: round; opacity: .85; }
.fmap__dest { fill: none; stroke: #b8452e; stroke-width: 5; }
.fmap__pin { fill: #b8452e; }
.fmap__cap { margin-top: 12px; font-size: var(--fs-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--oat-45); }

/* DRAW / INK / STAMP, once, only when the section scrolls in */
.enhanced .reveal .fmap__line { stroke-dasharray: 720; stroke-dashoffset: 720; }
.enhanced .reveal.in .fmap__line { animation: inkRoute 1.4s var(--paper) .75s both; }
@keyframes inkRoute { from { stroke-dashoffset: 720; } to { stroke-dashoffset: 0; } }
.enhanced .reveal .fmap__dest, .enhanced .reveal .fmap__pin { opacity: 0; }
.enhanced .reveal.in .fmap__pin { animation: settle .5s var(--paper) 2s both; }
.enhanced .reveal.in .fmap__dest { animation: stampOnce .8s var(--paper) 2.1s both; }
@keyframes stampOnce {
  0%   { opacity: 0; transform: scale(1.9); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: .9;  transform: scale(1); }
}

/* Current (non-archival) showroom information */
.fmap__now { display: flex; flex-direction: column; gap: 20px; }
.fmap__info { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 20px;
  font-size: var(--fs-detail); }
.fmap__info dt { font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); padding-top: .22em; }
.fmap__info dd { margin: 0; color: var(--ivory-90); line-height: 1.55; font-size: var(--fs-detail); }
.fmap__vary { border: 1px solid var(--hair); border-left: 2px solid var(--gold); border-radius: 2px;
  padding: 16px 18px; background: rgba(255,255,255,.03); }
.fmap__vary p { margin: 0; font-size: var(--fs-sm); color: var(--ivory-70); line-height: 1.6; }
.fmap__vary strong { display: block; font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivory); font-weight: var(--fw-med); margin-bottom: .5rem; }
/* CTA hierarchy: Get Directions primary, WhatsApp secondary, phone tertiary. */
.fmap__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.fmap__tel { margin: -4px 0 0; font-size: var(--fs-sm); color: var(--ivory-70); }
.fmap__tel a { color: var(--ivory); border-bottom: 1px solid var(--hair); padding-bottom: 1px; }
.fmap__tel a:hover { border-bottom-color: var(--gold); }
@media (min-width: 940px){
  /* ~58% map / ~42% current information */
  .fmap { grid-template-columns: minmax(0,1.38fr) minmax(320px,1fr); gap: clamp(32px,3.6vw,56px);
          align-items: center; }
}
/* On a phone the sheet is ~350px wide, so a labelled badge in the map's own bottom
   margin would clip the tail of the "Location of chimanlals Showroom" legend - which
   is exactly the content the full-panel crop exists to protect. Round 2 solved that by
   dropping the words, leaving the interaction unlabelled. Instead the paper mat grows a
   foot band below the image and the SAME single badge sits in it: still inside the
   full-cover button, still the only label on the page, and now over no map content at
   all. */
@media (max-width: 700px){
  .fmap__paper { padding-bottom: 46px; }
  .fmap__zoom { right: 9px; bottom: 9px; padding: 7px 11px; gap: 7px; letter-spacing: .1em; }
  .fmap__zoom svg { width: 15px; height: 15px; }
}
@media (max-width: 520px){
  .fmap__cta .btn { width: 100%; justify-content: center; }
}

/* ---- REDUCED MOTION / NO-JS: complete static final state, nothing hidden ---- */
@media (prefers-reduced-motion: reduce) {
  .arch__sheet, .fmap__paper, .fmap__pin, .fmap__dest, .hchap__rule { opacity: 1 !important; animation: none !important; }
  .arch__sheet, .fmap__paper, .fmap__pin, .fmap__dest, .hchap__rule { transform: none !important; }
  .fmap__line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .hchap__card:nth-child(even) { transform: none !important; }
}

/* Paper Culture centrally positioned (client note 22-07-2026: Chimanlals vertical,
   Paper Culture central). The copy column centres on desktop instead of ranging left. */
@media (min-width: 940px){
  .hero__grid { text-align: center; }
  /* Targets the copy column by name. It used to be `> div:first-child`, which the
     QA Round 1 hero rebuild silently repointed at the new brand column. */
  .hero__centre { display: flex; flex-direction: column; align-items: center; }
  .hero__grid .cat-strip { justify-content: center; }
  .hero__grid .hero__sub { margin-left: auto; margin-right: auto; }
  .hero__grid .hero__sub, .hero__grid .hero__title { text-align: center; }
  /* The eyebrow and the CTA group were missed when the column was re-centred and
     stayed on the superseded two-column rule above (styles.css ~519), so on desktop
     they hung left of a centred heading: at 1440 the eyebrow sat 31px and the two
     buttons 49px and 85px left of the column axis. Everything on the axis now shares
     it. Scoped to .hero__grid so the left-ranged .cat-hero__grid category heroes,
     which are a different approved concept, are untouched; and to >=940px so the
     mobile hero, which already centres these from the base rules, cannot move. */
  .hero__grid .ceremony { text-align: center; }
  .hero__grid .hero__cta { justify-content: center; text-align: center; }
}

/* The five category chips wrapped 4 + 1 between 940 and 1679, orphaning "Packaging"
   alone on the second row, which read as an accident rather than a decision. The
   centre column is ~394px at 1366 and ~400px at 1440 and the five chips need ~507px,
   so one row is not available in that band; the honest fix is a deliberate 3 + 2.
   Capping the strip's measure is what forces the break, and it keeps the two rows
   centred on the same axis as the rest of the column. From 1680 the column is wide
   enough for all five, so the cap is lifted and they sit on one row. Mobile is below
   940 and never sees any of this. */
@media (min-width: 940px) and (max-width: 1679px) {
  .hero__grid .cat-strip { max-width: 336px; margin-inline: auto; }
}

/* The archive sheet is an artefact: show it whole rather than cropping the wordmark */
.craft__media img[src*="archive-mission"] { object-fit: contain; height: auto; background: transparent; }

/* ============================================================
   CATEGORY MOTION (QA Round 2, item 8).
   Round 1 deliberately left the category pages out of the new motion
   vocabulary. It is added here, AFTER the heroes were recomposed, so
   nothing animates a cluttered layout.

   Rules kept: no loops, no scroll-jacking, no parallax, no motion over
   text, no library. Transform and opacity only, driven by the existing
   .reveal + .in IntersectionObserver, so the static final state is
   complete with JavaScript off. Each category gets its own physical
   verb rather than one shared fade, matching the hero it now sits under.
   ============================================================ */
.enhanced .setdeck .setcard {
  opacity: 0;
  transition: opacity .7s var(--paper), transform .9s var(--paper);
}
.enhanced .reveal.in .setcard,
.enhanced .setdeck-band .reveal.in .setcard { opacity: 1; transform: none; }
/* Stagger: four steps, then everything after lands together, so a long deck
   never turns into a slow cascade. */
.enhanced .setdeck .setcard:nth-child(1) { transition-delay: .04s; }
.enhanced .setdeck .setcard:nth-child(2) { transition-delay: .13s; }
.enhanced .setdeck .setcard:nth-child(3) { transition-delay: .22s; }
.enhanced .setdeck .setcard:nth-child(n+4) { transition-delay: .30s; }

/* LETTER PAPERS — SETTLE: sheets come to rest on the desk. */
.enhanced .setdeck--sheets .setcard { transform: translateY(20px) rotate(-.5deg); }
/* GIFT CARDS AND TAGS — DRAW/HANG: small printed objects drop onto the line. */
.enhanced .setdeck--wall .setcard { transform: translateY(-14px) scale(.985); }
/* GIFT BAGS — RISE: this category is about standing height. */
.enhanced .setdeck--tall .setcard { transform: translateY(26px); }
/* PACKAGING — FOLD/OPEN: the form opens towards the reader. */
.enhanced .setdeck--fold .setcard { transform: perspective(900px) rotateY(7deg) translateX(14px); }
/* ACCESSORIES — LIFT: objects are placed onto the desk. */
.enhanced .setdeck--desk .setcard { transform: translateY(16px) scale(.982); }
/* CARDS WITH ENVELOPES (pilot, no variant class) — SLIDE, as its hero does. */
.enhanced .setdeck:not([class*="setdeck--"]) .setcard { transform: translateX(16px); }

/* The story band's rule is inked in rather than faded, matching the homepage. */
.enhanced .storyband .reveal .seam,
.enhanced .printdetail .reveal .seam { transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--paper) .1s; }
.enhanced .storyband .reveal.in .seam,
.enhanced .printdetail .reveal.in .seam { transform: scaleX(1); }

/* No-JS and reduced motion: the complete, final, static state. Nothing here
   carries information, so nothing is lost. */
html.no-js .setdeck .setcard,
html.no-js .storyband .seam, html.no-js .printdetail .seam {
  opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .enhanced .setdeck .setcard,
  .enhanced .storyband .reveal .seam, .enhanced .printdetail .reveal .seam {
    opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==================================================================
   LEGAL PAGES (Privacy Policy, Terms of Use)
   Added in the legal launch pass. Long-form prose inside the existing
   dark system: no new colours, no new fonts, no new components beyond
   what reading a legal document needs.

   Priorities, in order: comfortable measure, clear heading rhythm,
   and readability for older customers (a meaningful share of
   Chimanlals customers are 50+), which is why the body here runs at
   --fs-body rather than --fs-sm and the measure is capped at 68ch.
   ================================================================== */
.legal { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1024px) { .legal { grid-template-columns: 232px minmax(0, 1fr); } }

/* ------------------------------------------------------------------
   CONTENTS PANEL ("On this page") — rebuilt in the preview closure pass.
   Human QA kept the function and rejected the presentation: it read as a
   raw, tiny list rather than part of a premium legal page.

   Desktop: a proper editorial contents panel — gold rule above the
   heading, numbered rows at a readable size, generous row height, and a
   gold marker that appears on the active row. Mobile: the same markup
   collapses into a <details> disclosure so it costs one line instead of
   a full-height sidebar.
   ------------------------------------------------------------------ */
.legal__toc { border-top: 1px solid var(--gold-hair, rgba(217,180,90,.34)); padding-top: 14px; }
@media (min-width: 1024px) {
  .legal__toc { position: sticky; top: calc(var(--header-h) + 24px);
    border-top: 1px solid var(--gold-hair, rgba(217,180,90,.34)); border-left: 0;
    padding: 16px 0 2px; }
}
.legal__toc h2 { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold); margin: 0; font-weight: var(--fw-semi); }

/* --- the disclosure shell --- */
.legal__toc-sum { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 2px 0 10px; }
.legal__toc-sum::-webkit-details-marker { display: none; }
.legal__toc-sum:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }
.legal__toc-chev { width: 9px; height: 9px; border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold); rotate: 45deg; translate: 0 -2px;
  transition: rotate .25s var(--ease); flex: none; }
.legal__toc-d[open] .legal__toc-chev { rotate: -135deg; translate: 0 2px; }

/* --- the rows --- */
.legal__toc-list { list-style: none; margin: 0; padding: 0; display: grid;
  gap: 1px; counter-reset: toc; }
.legal__toc-list li { counter-increment: toc; }
.legal__toc-list a { position: relative; display: flex; gap: 10px; align-items: baseline;
  color: var(--ivory-80); text-decoration: none;
  font-size: var(--fs-sm); line-height: 1.45;
  padding: 9px 10px 9px 12px; border-radius: 4px;
  transition: color .2s var(--ease), background-color .2s var(--ease); }
/* the row number: an editorial cue, and it makes each row read as a row */
.legal__toc-list a::before { content: counter(toc, decimal-leading-zero);
  font-size: var(--fs-micro); letter-spacing: .1em; color: var(--oat-45);
  flex: none; min-width: 1.6em; transition: color .2s var(--ease); }
/* the gold marker: hidden until the row is hovered, focused or current */
.legal__toc-list a::after { content: ""; position: absolute; left: 0; top: 50%;
  translate: 0 -50%; width: 2px; height: 0; border-radius: 2px; background: var(--gold);
  transition: height .22s var(--ease); }
.legal__toc-list a:hover, .legal__toc-list a:focus-visible { color: var(--gold);
  background: rgba(217,180,90,.06); }
.legal__toc-list a:hover::before, .legal__toc-list a:focus-visible::before { color: var(--gold); }
.legal__toc-list a:hover::after, .legal__toc-list a:focus-visible::after { height: 62%; }
.legal__toc-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* No active-section tracking. A CSS-only version is not possible here (the panel
   precedes the sections it points at, so :target cannot reach back up), and a
   scroll-spy would mean a JS subsystem this page does not need. Hover, focus and
   the browser's own :focus-visible ring are the row feedback. */

@media (min-width: 1024px) {
  /* Desktop is always expanded: the list is forced visible regardless of the
     details state, and the summary stops behaving like a control. This means a
     visitor who collapses it on a phone and then widens the window still sees a
     complete panel. */
  .legal__toc-sum { pointer-events: none; padding-bottom: 12px; }
  .legal__toc-chev { display: none; }
  .legal__toc-d:not([open]) > .legal__toc-list { display: grid; }
}
@media (max-width: 1023px) {
  /* Compact on mobile: one line closed, comfortable tap targets open. */
  .legal__toc { border-top-width: 1px; }
  .legal__toc-list { padding-bottom: 4px; }
  .legal__toc-list a { padding: 11px 10px 11px 12px; font-size: var(--fs-body); }
}

.legal__body { max-width: 68ch; }
.legal__body > section + section { margin-top: clamp(30px, 3.6vw, 46px); }
.legal__body h2 { font-size: var(--fs-h3); line-height: 1.25; margin: 0 0 .7rem;
  color: var(--ivory-90); font-weight: var(--fw-semi); }
.legal__body h3 { font-size: var(--fs-detail); margin: 1.5rem 0 .5rem;
  color: var(--ivory-90); font-weight: var(--fw-semi); }
.legal__body p { font-size: var(--fs-body); line-height: 1.72; color: var(--ivory-70); margin: 0 0 .95rem; }
.legal__body p:last-child, .legal__body ul:last-child { margin-bottom: 0; }
.legal__body a { color: var(--gold); text-underline-offset: 3px; }
.legal__body ul { margin: 0 0 .95rem; padding: 0; list-style: none; display: grid; gap: .55rem; }
.legal__body ul li { position: relative; padding-left: 20px; font-size: var(--fs-body);
  line-height: 1.62; color: var(--ivory-70); }
.legal__body ul li::before { content: ""; position: absolute; left: 2px; top: .68em;
  width: 6px; height: 6px; border: 1px solid var(--hair-strong); transform: rotate(45deg); }
.legal__body strong { color: var(--ivory-90); font-weight: var(--fw-semi); }
/* The one place a storage key name is quoted verbatim, in the cookies section.
   Browser-default monospace at browser-default size reads as a foreign object on
   this page, so it is tied back into the palette and held at the body size. */
.legal__body code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em; color: var(--ivory-90); background: rgba(239,229,208,.07);
  border: 1px solid var(--hair-soft); border-radius: 3px; padding: .08em .38em;
  word-break: break-word; }
.legal__body dl { margin: 0 0 .95rem; display: grid; gap: .5rem; }
.legal__body dt { font-size: var(--fs-body); color: var(--ivory-90); font-weight: var(--fw-semi); }
.legal__body dd { margin: 0 0 .5rem; font-size: var(--fs-body); line-height: 1.7; color: var(--ivory-70); }

/* The plain-language summary that opens each legal page. */
.legal__gist { border: 1px solid var(--hair); border-radius: 8px; padding: clamp(18px, 2.6vw, 26px);
  background: linear-gradient(160deg, var(--plum), var(--soot)); margin: 0 0 clamp(28px, 3.4vw, 40px); }
.legal__gist h2 { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold); margin: 0 0 .6rem; font-weight: var(--fw-semi); }
.legal__gist p { margin-bottom: .6rem; }
.legal__gist p:last-child { margin-bottom: 0; }

.legal__stamp { margin-top: 1rem; font-size: var(--fs-sm); color: var(--oat-70); }

/* Footer legal links. They share the footer__bottom flex row with the copyright
   and location lines, so the four-column footer grid above is untouched. */
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.footer__legal a { color: var(--ivory-55); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease); }
.footer__legal a:hover, .footer__legal a:focus-visible { color: var(--gold); border-bottom-color: var(--hair-strong); }
@media (max-width: 720px) { .footer__bottom { justify-content: flex-start; } }

/* ==================================================================
   READABILITY PASS (preview closure, 2026-08-26).

   A meaningful share of Chimanlals customers are older, and a scan of the
   rendered pages found real product information sitting on the label and
   micro tokens - sizes intended for tracked, decorative labels, not for
   text a customer actually has to read.

   Deliberately NOT a global enlargement. Eyebrows, chips, counts, dates
   and other tracked uppercase labels keep their sizes, because they are
   design language rather than reading text. Only the classes below carry
   information a customer needs, and only those move.
   ================================================================== */

/* Set composition ("5 CARDS (Assrt) + 5 ENVS") is the single most useful fact
   on a product card and it was the smallest text on the page at 12.5px. */
.setcard__meta { font-size: var(--fs-sm); }

/* "Shown: Upavan · 5 CARDS (Assrt) + 5 ENVS" — this is what identifies the
   pieces in the photograph, so it has to be readable next to the photograph. */
.printdetail__cap { font-size: var(--fs-sm); letter-spacing: .06em; }
.cwe-set__shown { font-size: var(--fs-sm); }

/* The map caption carries an operational instruction (use Get Directions for
   current navigation), not decoration, and it was on the 11.8px floor. */
.fmap__cap { font-size: var(--fs-sm); letter-spacing: .08em; }

/* The contents panel is navigation: 15.2px was small for a list a reader is
   meant to scan and click. 16px on desktop; mobile already runs at body size. */
@media (min-width: 1024px) {
  .legal__toc-list a { font-size: 1rem; }
}