/* Generated by build-css.py from fonts.css, tokens.css, base.css — do not edit this file.
   Edit those, then run build-css.py. */

/* ---- css/fonts.css ---- */
/* Self-hosted since 14 Sept 2026, so no request leaves nagoriolfactive.com
   for type: faster first paint, no visitor data sent to Google, and a
   security policy that allows fonts from this domain only.
   Spectral (headlines and the name), DM Sans (reading), DM Mono (labels,
   prices, the record) and Shippori Mincho (the two characters of 名残) are
   under the SIL Open Font License 1.1 (fonts/OFL.txt). */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/spectral-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/spectral-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/spectral-300i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/spectral-300i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/dm-mono-latin-ext-689621.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/dm-mono-latin-8a9cab.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono-latin-ext-b746c4.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono-latin-61f462.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/dm-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/shippori-mincho-text-d7327e.woff2') format('woff2');
  unicode-range: U+540d, U+6b8b;
}

/* ---- css/tokens.css ---- */
/* ============================================================
   NAGORI — design tokens
   Derived from nagori-brand-kit-v1 /tokens/tokens.css.
   Usage rules travel with the values. Prefer these tokens to a
   hard-coded hex; experience.css holds the per-edition accents.
   ============================================================ */

:root {
  /* ---- colour — the five, and only the five (17 Sept 2026) ---------------
     The same five the bottle team works from, so the site, the sleeve and the
     flask are one system: Leaf for paper, Ink for type and the cap, Shu for
     the line only, Graphite for secondary type, Rule for hairlines.
     The old names (Kozo, Sumi, Ash, Mist) are kept so existing rules resolve;
     each now points at one of the five. */
  /* ---- motion (24 Sept 2026) ------------------------------------------
     The house moves slowly and stops more slowly still. Two curves and five
     durations, and nothing on the site should need a sixth.

     --ease-settle  something arriving and coming to rest
     --ease-both    something already in motion (the line draws on this)

     The asymmetry is the point. A hover arrives on --dur-turn and leaves on
     --dur-linger, because something that fades back faster than it came
     reads as a snap, and this house is named for what stays behind. Every
     rule below is transform and opacity only: nothing here moves the layout,
     so nothing here can shift the page under a reader. ---- */
  --ease-settle: cubic-bezier(.22, .61, .36, 1);
  --ease-both:   cubic-bezier(.65, 0, .25, 1);
  --dur-touch:   .2s;    /* a control answering a finger */
  --dur-turn:    .45s;   /* something changing its mind */
  --dur-settle:  .8s;    /* something arriving */
  --dur-linger: 1.1s;    /* something leaving */
  --dur-draw:   1.8s;    /* the line, drawn across the five */

  --leaf:     #F6F4ED;
  --ink:      #1A1A1A;
  --shu:      #C62828;
  --graphite: #6B6F75;
  --rule:     #D8D8D3;

  --nagori-sumi:  var(--ink);
  --nagori-kozo:  var(--leaf);
  /* running text: 7.4:1 on Leaf. Ink for headlines, this for paragraphs. */
  --nagori-read:  #4E5257;
  --nagori-mist:  var(--rule);   /* non-text only */
  /* Shu marks the line and nothing else: never a field, never body text,
     never more than a hairline or a numeral. */
  --nagori-shu:   var(--shu);
  --nagori-ai:    var(--ink);    /* links and focus rings */

  /* ---- colour — working ---- */
  --nagori-ash:      var(--graphite); /* secondary text, 4.9:1 on Leaf */
  --nagori-hairline: var(--rule);
  --nagori-plate:    #FBFAF7;         /* a lift of Leaf for inputs and panels */
  /* Leaf shaded 30% toward Rule: the surface an object sits on (the flask's
     stage, the sleeve, the record card). A shade of two of the five, not a
     sixth colour; it replaces the hairline boxes. */
  --leaf-shade:      #EDECE5;

  /* ---- a dash of colour: one per edition, from the brand narrative ----
     001 pale gold, 002 moss, 003 terracotta, 004 dusty rose, 005 plum.
     A dash, never a page: a chip beside the edition's number, the ground
     under its flask, the ground under its story. Shu stays the line.
     Set on any element with data-edition="00N"; outside one, these fall
     back to the neutral shade. --acc-ink is the text-safe depth (at least
     4.9:1 on the mist) for anything small that must be read. Graphite is
     under 4.5:1 on every mist, so labels on a mist use --nagori-read. */
  --acc:      var(--graphite);
  --acc-mist: var(--leaf-shade);
  --acc-ink:  var(--ink);

  /* ---- type — three faces, three jobs -----------------------
     01 headlines and the name   Spectral  (SIL OFL, self-hosted)
     02 reading                  DM Sans   (SIL OFL, self-hosted)
     03 labels, prices, buttons  DM Sans, capitals, tracked
     04 the record               DM Mono   (SIL OFL, self-hosted): numbers,
                                 dates, batch rows. Data only, never a label
     05 名残 and any CJK          Shippori Mincho ---------------- */
  --nagori-font-display:  'Spectral', Georgia, 'Times New Roman', serif;
  --nagori-font-reading:  'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nagori-font-notation: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --nagori-font-label:    var(--nagori-font-reading);
  --nagori-font-jp:       'Shippori Mincho', serif;

  --nagori-track-notation: 0.12em;
  --nagori-track-label:    0.14em;

  --nagori-leading-body:      1.7;
  --nagori-leading-statement: 1.18;

  --nagori-radius: 0px;   /* always, everywhere. curves belong to the glass */
  --nagori-motion: 180ms; /* opacity fades only */

  /* page gutter and measures, used by line.css */
  --gut: clamp(20px, 3.2vw, 48px);
  --max: 1440px;

  /* ============================================================
     SITE LAYER
     Names kept from the previous build so existing rules resolve.
     Every one of them points at a brand token above — nothing here
     introduces a new colour.
     ============================================================ */

  /* ---- surfaces. the tonal ladder is deliberately flattened:
     depth is made with hairlines and space, not with steps of grey ---- */
  --stone:    var(--nagori-kozo);
  --stone-1:  var(--nagori-kozo);
  --stone-2:  var(--nagori-plate);
  --stone-3:  var(--nagori-plate);
  --paper:    var(--nagori-plate);

  /* ---- ink ---- */
  --ink-soft:  var(--nagori-sumi);
  --ink-mute:  var(--nagori-ash);
  --ink-faint: var(--nagori-ash);

  /* ---- dark surfaces ---- */
  --noir:      var(--nagori-sumi);
  --noir-soft: var(--nagori-sumi);

  /* ---- interactive / active states.
     Sumi, not Ai — Ai is never a background. A selected state is a
     Plate panel inside a Sumi hairline, not a wash of colour. ---- */
  --vetiver:       var(--nagori-sumi);
  --vetiver-dk:    var(--nagori-sumi);
  --vetiver-lt:    var(--nagori-ash);
  --vetiver-trace: var(--nagori-plate);

  /* ---- accent. small type, rules and focus rings only ---- */
  --accent:    var(--nagori-ai);
  --pewter:    var(--nagori-ash);
  --pewter-lt: var(--nagori-ash);

  /* ---- text on dark ---- */
  --bone:   var(--nagori-kozo);

  /* ---- per-edition colour lives in experience.css (--s01 to --s05):
     one accent per edition on a shared warm base, as the brand
     narrative sets it. These aliases stay only so older rules resolve. ---- */
  --f01: var(--nagori-mist); --f01-lt: var(--nagori-ash); --f01-trace: var(--nagori-plate);
  --f02: var(--nagori-mist); --f02-lt: var(--nagori-ai);  --f02-trace: var(--nagori-plate);
  --f03: var(--nagori-mist); --f03-lt: var(--nagori-ash); --f03-trace: var(--nagori-plate);
  --f04: var(--nagori-mist); --f04-lt: var(--nagori-ash); --f04-trace: var(--nagori-plate);
  --f05: var(--nagori-mist); --f05-lt: var(--nagori-ash); --f05-trace: var(--nagori-plate);

  /* ---- borders — hairlines only ---- */
  --border:   var(--nagori-hairline);
  --border-2: var(--nagori-mist);
  --border-3: var(--nagori-hairline);

  /* ---- type roles ----
     Three faces, three jobs. The sans is gone: notation is monospaced,
     everything read is set in the serif. */
  --serif: var(--nagori-font-reading);
  --sans:  var(--nagori-font-reading);
  --mono:  var(--nagori-font-notation);
  --jp:    var(--nagori-font-jp);

  /* ---- vertical rhythm ---- */
  --sp-sm: 3.5rem;
  --sp-md: 4rem;
  --sp-lg: 4.5rem;

  /* ---- grid — 12 columns, 24px gutter, 1240 max ---- */
  --grid-max: 1240px;
  --grid-gutter: 24px;
}

[data-edition="001"] { --acc: #C9A961; --acc-mist: #EEE6D2; --acc-ink: #6E5826; }
[data-edition="002"] { --acc: #8C9A64; --acc-mist: #E0E3D3; --acc-ink: #4E5B31; }
[data-edition="003"] { --acc: #C4714F; --acc-mist: #EAD9CD; --acc-ink: #8E4830; }
[data-edition="004"] { --acc: #C99BA1; --acc-mist: #EDDDDC; --acc-ink: #7C4B54; }
[data-edition="005"] { --acc: #A06D90; --acc-mist: #E3D7E0; --acc-ink: #6F3F60; }

/* ---- css/base.css ---- */
/* ============================================================
   NAGORI — Base
   Leaf ground, Ink type. Spectral, DM Sans, DM Mono.
   ============================================================ */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--stone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; }
input { font-family: inherit; }
ul { list-style: none; }

::selection { background: var(--vetiver-trace); }

/* ---------- Accessibility: skip link + keyboard focus ---------- */
.skip-link {
  position: fixed; top: 0; left: 0; z-index: 10001;
  transform: translateY(-120%);
  background: var(--vetiver); color: var(--bone);
  padding:12px 24px;
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 0.2s ease !important;  /* §07-exempt */
}
.skip-link:focus { transform: translateY(0); outline: none; }
.skip-link:focus-visible { outline: 2px solid var(--bone); outline-offset: -6px; }
/* The custom cursor hides the pointer; keyboard users still need a clear ring */
:focus-visible { outline: 2px solid var(--vetiver); outline-offset: 3px; }
.btn:focus-visible, .cart-trigger:focus-visible, .size-option:focus-within, .accordion-header:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--stone-1); }
::-webkit-scrollbar-thumb { background: var(--vetiver-lt); }
html { scrollbar-width: thin; scrollbar-color: var(--vetiver-lt) var(--stone-1); }

/* ============================================================
   SPACING SYSTEM
   ============================================================ */
.section     { padding: var(--sp-md) 0; }


.container        { max-width: 1240px; margin: 0 auto; padding: 0 4rem; }
.container--narrow{ max-width: 760px;  margin: 0 auto; padding: 0 4rem; }
.container--wide  { max-width: 1320px; margin: 0 auto; padding: 0 4rem; }

@media (max-width: 768px) {
  .container, .container--narrow, .container--wide { padding: 0 1.75rem; }
  .section     { padding: 6rem 0; }
  
}
/* Serif soul-accent inside display / headline */
.display em,
.headline em {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--vetiver);
}

/* ── HEADLINE ── */
.headline {
  font-family: var(--nagori-font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* ── TITLE ── */
.title {
  font-family: var(--nagori-font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.008em;
  color: var(--ink);
}

/* ── EYEBROW — tiny, impossibly spaced, restrained ── */
.eyebrow {
  font-family: var(--sans);
  font-weight: 300;
  font-size:12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
}

/* ── LABEL / CAPTION ── */
.label,
.caption {
  font-family: var(--sans);
  font-weight: 300;
  font-size:12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── BODY ── */
.body-text {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.62;
  letter-spacing: 0;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ── SMALL ── */
.small {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
}

/* Rule — the signature vetiver hairline */
.rule {
  width: 32px;
  height: 1px;
  background: var(--vetiver);
  margin: 2rem 0;
  display: block;
  border: none;
}
.rule--center { margin-left: auto; margin-right: auto; }

/* ============================================================
   EDITORIAL PAUSE — full-width, one sentence, large serif, nothing else
   <section class="pause"><div class="container--narrow">
     <p class="pause-line fade-in-slow">…</p></div></section>
   ============================================================ */



/* ============================================================
   PAGE PLATE — full-bleed editorial image band (closes a page so
   no page reads "orphan"); one quiet line over an atmospheric image.
   ============================================================ */









/* ============================================================
   BUTTONS — outline only, sharp corners
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 300;
  font-size:12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--border-2);
  border-radius: 0;
  padding:16px 32px;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Signature variant — vetiver (HTML hook: .btn--border, .btn--accent) */
.btn--border {
  color: var(--vetiver-dk);
  border-color: var(--vetiver-lt);
}
.btn--border:hover {
  border-color: var(--vetiver);
}

/* Large */
.btn--lg { padding:16px 48px; font-size:12px; letter-spacing: 0.1em; }

/* Full width */
.btn--full { display: block; width: 100%; text-align: center; }

/* Ghost / subtle text link */
.btn--ghost {
  font-family: var(--sans);
  font-weight: 300;
  font-size:12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-2);
  border-radius: 0;
  padding: 0 0 3px;
  display: inline-block;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.btn--ghost:hover { color: var(--ink); background: transparent; border-color: var(--ink); }

/* custom cursor removed — native cursor (Aesop restraint) */

/* ============================================================
   IMAGE PLACEHOLDERS — art-directed, image-ready
   Swap a .ph block for an <img class="ph-img"> with its own src and alt.
   when real/AI photography is ready. Ratios + grade are pre-set.
   ============================================================ */
.ph {
  position: relative;
  overflow: hidden;
  background-color: #1D1915;
  background-image:
    radial-gradient(66% 52% at 30% 28%, rgba(236,229,217,0.17), rgba(236,229,217,0.04) 40%, rgba(0,0,0,0) 70%),
    linear-gradient(155deg, #261F19 0%, #1D1915 72%);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.ph::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.42; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}
.ph--01, .ph--02, .ph--03 { background-image: linear-gradient(155deg, #261F19 0%, #1D1915 74%); }


.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   ORIGIN LINE — signature provenance device
   <span class="origin">Petrichor · mitti attar · Kannauj</span>
   ============================================================ */
.origin {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-weight: 300;
  font-size:12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.origin::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--vetiver-lt);
  
  position: relative;
}

/* ============================================================
   FOOTER — shared across every page
   ============================================================ */
.footer { background: var(--stone-1); border-top: 1px solid var(--border); padding: 5rem 0 2.5rem; }



.footer-social { font-family: var(--sans); font-weight: 300; font-size:12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.footer-social a:hover { color: var(--ink); }





.footer-input { flex: 1; background: transparent; border: none; color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: 0.03em; padding: 8px 0; outline: none; }
.footer-input::placeholder { color: var(--ink-faint); }
.footer-submit { color: var(--vetiver); font-size: 15px; padding: 0 0 0 0.6rem; transition: transform 0.2s ease !important; }  /* §07-exempt */
.footer-submit:hover { transform: translateX(3px); }





/* ---------- Branded loader ---------- */
/* the loader overlay was removed: it hid pages that were already ready */

/* the page-transition fade was removed: it delayed every internal click */
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* ============================================================
   CART — nav trigger + slide-in drawer (injected by main.js)
   ============================================================ */
.cart-trigger {
  font-family: var(--sans); font-weight: 300; font-size:12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  background: none; border: none; cursor: pointer; padding:8px 2px;
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  transition: color 0.25s ease;
}
.cart-trigger:hover { color: var(--vetiver); }
.cart-count { font-family: var(--mono, var(--sans)); font-feature-settings: "tnum" 1; font-size:12px; color: var(--vetiver); }


/* In-article inline image (fills the reading column) */
.article-figure { margin: clamp(2.6rem, 6vw, 4rem) 0; }
.article-figure img { width: 100%; height: auto; display: block; }
.article-figure figcaption { font-family: var(--sans); font-weight: 300; font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute); margin-top: 0.85rem; }

.cart-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(29,25,21,0.42);
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
}
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer {
  position: fixed; top: 0; right: 0; z-index: 1101;
  width: min(420px, 92vw); height: 100%;
  background: var(--paper); border-left: 1px solid var(--border);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.45s !important;  /* §07-exempt */
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); visibility: visible; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), visibility 0s !important; }  /* §07-exempt */
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 2rem 1.8rem 1.4rem; border-bottom: 1px solid var(--border); }
.cart-title { font-family: var(--serif); font-style: normal; font-weight: 300; font-size: 1.5rem; color: var(--ink); }
.cart-close { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink-mute); padding: 0; min-width: 44px; min-height: 44px; margin-right: -12px; display: inline-flex; align-items: center; justify-content: center; }
.cart-close:hover { color: var(--ink); }
.cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.8rem; }
.cart-empty { font-family: var(--sans); font-weight: 300; font-size: 13px; letter-spacing: 0.02em; color: var(--ink-mute); padding: 3rem 0; text-align: center; line-height: 1.7; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--border); }
.cart-item-name { font-family: var(--serif); font-style: normal; font-weight: 300; font-size: 1.15rem; color: var(--ink); }
.cart-item-variant { font-family: var(--sans); font-weight: 300; font-size:12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.cart-item-price { font-family: var(--mono, var(--sans)); font-feature-settings: "tnum" 1; font-size: 13px; color: var(--ink); text-align: right; align-self: center; }
.cart-qty { display: inline-flex; align-items: center; gap: 0.9rem; margin-top: 0.5rem; }
.cart-qty button { width: 22px; height: 22px; border: 1px solid var(--border-2); background: none; cursor: pointer; color: var(--ink); font-size: 13px; line-height: 1; }
.cart-qty button:hover { border-color: var(--ink); }
.cart-qty span { font-family: var(--mono, var(--sans)); font-feature-settings: "tnum" 1; font-size: 12px; min-width: 1ch; text-align: center; }
.cart-remove { grid-column: 1 / -1; justify-self: start; margin-top: 0.6rem; background: none; border: none; cursor: pointer; font-family: var(--sans); font-weight: 300; font-size:12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.cart-remove:hover { color: var(--f02-lt); }
.cart-foot { padding: 1.6rem 1.8rem 2rem; border-top: 1px solid var(--border); }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.cart-subtotal .lbl { font-family: var(--sans); font-weight: 500; font-size:12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.cart-subtotal .val { font-family: var(--mono, var(--sans)); font-feature-settings: "tnum" 1; font-size: 1.4rem; color: var(--ink); }
.cart-note { font-family: var(--sans); font-weight: 300; font-size: 12px; letter-spacing: 0.02em; color: var(--ink-mute); margin-bottom: 1.2rem; }
.cart-checkout { width: 100%; text-align: center; }
.cart-msg { font-family: var(--sans); font-weight: 500; font-size:12px; letter-spacing: 0.05em; color: var(--vetiver); margin-top: 0.8rem; min-height: 13px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .cart-drawer { transition: none; } }
@keyframes loaderPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ---------- Image-card hover (subtle "alive") ---------- */
.gift-card .ph { transition: filter 0.45s ease !important; }  /* §07-exempt */


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

/* ---------- Metadata in mono (prices, specs, data) — Sillage voice ---------- */
.feature-price, .gift-price {
  font-family: var(--serif);
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   LEGAL PAGES — privacy / terms / refunds
   ============================================================ */
.legal .container--narrow { max-width: 760px; }
.legal-updated {
  font-family: var(--sans); font-weight: 300; font-size: 12px; line-height: 1.7;
  letter-spacing: 0.01em; color: var(--ink-mute);
  margin-bottom: 2.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--border);
}
.legal-block { margin-bottom: 2.6rem; }
.legal-h { margin: 0.4rem 0 0.9rem; }
.legal-p { margin-bottom: 0.9rem; max-width: none; }
.legal-p:last-child { margin-bottom: 0; }
.legal-updated a, .legal-p a { color: var(--vetiver); border-bottom: 1px solid var(--border-2); }
.legal-updated a:hover, .legal-p a:hover { color: var(--ink); }



/* ============================================================
   [hidden] must always win. Any rule that sets display on an
   element — .search-panel{display:flex}, .co-row{display:flex} —
   otherwise beats the attribute's UA display:none and leaves the
   thing on screen. This has caught us twice; it stops here.
   ============================================================ */
[hidden] { display: none !important; }

/* Said here as well as in nagori.css, because that rule turns off transitions
   and an animation is not a transition. A reader who asks for less motion
   gets a site that does not move at all. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}