/* ============================================================
   NAGORI — brand layer
   Loaded last. Everything here enforces a rule that is written
   down in the brand kit; each block cites the rule it serves.
   ============================================================ */

/* ---- §07 RADIUS: 0 px everywhere. Curves belong to the glass. ----
   ---- §07 SHADOW: none. Depth is made with hairlines and space. ---- */
*, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; }

/* ---- §02 ITALICS: none. Newsreader's italic is not licensed for use. ---- */
* { font-style: normal !important; }

/* ---- §07 TYPE: body Newsreader 400 at 17/1.62. Never below 16 px. ---- */
body {
  background: var(--nagori-kozo);
  color: var(--nagori-sumi);
  font-family: var(--nagori-font-reading);
  font-weight: 400;
  font-size: 17px;
  line-height: var(--nagori-leading-body);
  letter-spacing: 0;
}

/* §02 measure 60–68 characters, ragged right, never justified */
.body-text, p {
  font-family: var(--nagori-font-reading);
  font-weight: 400;
  font-size: 17px;
  line-height: var(--nagori-leading-body);
  letter-spacing: 0;
  text-align: left;
  max-width: 66ch;
}

/* §02 scale — statement / heading / body / notation / label key */
.display, .hero-headline, .pause-line, .page-plate-line, .statement {
  font-family: var(--nagori-font-reading);
  font-weight: 300;
  line-height: var(--nagori-leading-statement);
  letter-spacing: -0.006em;
  font-size: clamp(22px, 3.3vw, 34px);
}
.headline, .title, h2, h3 {
  font-family: var(--nagori-font-reading);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 21px);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--nagori-sumi);
}
.display em, .headline em { font-weight: 300; color: var(--nagori-sumi); }

/* ---- §02 NOTATION: anything counted, dated, timed, measured or filed ---- */
.eyebrow, .caption, .label,
.prod-price, .prod-eyebrow, .pdp-price, .pdp-price-alt,
.spec-k, .spec-v, .sp-k, .arc-phase, .arc-time,
.origin, .fl-botanical, .fl-place, .fl-edition,
.footer-label, .footer-social, .footer-bottom, .legal-updated,
.hj-cat, .j-card-cat, .article-meta, .review-author, .review-tag,
.co-row, .cart-item-variant, .touch-n, .process-num, .step-num, .gift-price {
  font-family: var(--nagori-font-notation);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: var(--nagori-track-notation);
  text-transform: uppercase;
  color: var(--nagori-ash);
  font-variant-numeric: tabular-nums;
}
/* .small is fine print, not notation: sentences, ingredient lists, captions.
   It stays in the reading face and keeps its sentence case. */
.small, .pdp-terms, .record-note, .register-note, .specimen-cap,
.disc-terms, .pdp-inci, .pdp-inci-note, .footer-note, .about-links {
  font-family: var(--nagori-font-reading);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nagori-ash);
  max-width: 66ch;
}

/* label key — the quieter of the two notation roles */
.label, .footer-label, .spec-k, .sp-k, .co-row .l {
  font-weight: 300;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: var(--nagori-track-label);
}
/* values sit in ink, keys sit in ash */
.spec-v, .prod-price, .pdp-price { color: var(--nagori-sumi); }

/* §02 numerals: tabular lining wherever a number sits in a column */
table, .record, .register, .co-totals, .pdp-spec-grid { font-variant-numeric: tabular-nums; }

/* ---- §02 JAPANESE: 名残 and any CJK setting ---- */
.jp { font-family: var(--nagori-font-jp); font-weight: 400; letter-spacing: 0.42em; }

/* ---- §07 BUTTONS: rectangles, zero radius, DM Mono 400 at 11.5 px, +0.14 em.
        Never an arrow, never a chevron, never "Shop now". ---- */
.btn, .btn--border, .btn--accent, .btn--lg, .btn--large, .btn--ghost,
.btn-nav, button, .pdp-cart, .pdp-sample, .review-submit,
.checkout-place, .contact-submit, .consult-submit, .footer-submit {
  font-family: var(--nagori-font-notation);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: var(--nagori-track-notation);
  text-transform: uppercase;
  color: var(--nagori-sumi);
  background: transparent;
  border: 1px solid var(--nagori-sumi);
  padding: 14px 28px;
  transition: opacity var(--nagori-motion) ease-out;
}
.btn:hover, .btn--border:hover, .btn--ghost:hover, button:hover { opacity: 0.62; }
/* tertiary / link — a rule under the words, no border box */
.btn--ghost, .link-subtle {
  border: none;
  border-bottom: 1px solid var(--nagori-hairline);
  padding: 0 0 3px;
  color: var(--nagori-ash);
}
/* §07 focus state is a 2 px Ai outline and is never removed */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--nagori-ai);
  outline-offset: 2px;
}

/* ---- §07 MOTION: opacity fades, 180 ms, ease-out.
        No slide-ins, no parallax, no scroll reveals, no skeleton shimmer. ---- */
*, *::before, *::after {
  transition-property: opacity, color, background-color, border-color !important;
  transition-duration: var(--nagori-motion) !important;
  transition-timing-function: ease-out !important;
  animation: none !important;
}
/* anything that was hidden pending a scroll reveal is simply present */
.fade-in, .fade-in-slow, .revealed, .visible { opacity: 1 !important; transform: none !important; }

/* ---- §01 MARKS. One file, masked, so it inherits colour from context. ----
        Header and footer sit below 200 px, so both take the small cut. */
.brand-mark {
  display: block;
  width: 132px;            /* §01 screen minimum for header/footer is 90 px */
  height: 22.5px;          /* aspect 5.873:1, locked */
  background: currentColor;
  -webkit-mask: url("../brand/nagori-wordmark-small.svg") no-repeat center / contain;
          mask: url("../brand/nagori-wordmark-small.svg") no-repeat center / contain;
}
.footer-logo .brand-mark { width: 160px; height: 27px; }
.loader-mark {
  display: block; width: 44px; height: 44px;
  background: currentColor; color: var(--nagori-sumi);
  -webkit-mask: url("../brand/nagori-interval-mark.svg") no-repeat center / contain;
          mask: url("../brand/nagori-interval-mark.svg") no-repeat center / contain;
}
.loader { background: var(--nagori-kozo); }
/* §01 clear space: 2 × cap height, nothing enters the field */
.nav-logo { display: inline-block; padding: 45px 45px; margin: -45px -45px; }
.footer-logo { padding: 54px 54px; margin: -54px -54px 0; }

/* ---- §03 RULES: hairlines only. Ai is a rule, never a ground. ---- */
.rule, hr, .article-rule, .fl-rule { background: var(--nagori-hairline); border: none; height: 1px; }
a { color: var(--nagori-ai); }
::selection { background: var(--nagori-mist); color: var(--nagori-sumi); }

/* ---- §05 THE RECORD — eleven fields, one order, every object.
        Keys DM Mono 300 at +.16 em in Ash, values DM Mono 400 in Sumi.
        Hairlines between rows only — never vertical, never boxed. ---- */
.record { width: 100%; border-collapse: collapse; background: var(--nagori-plate); margin: 2rem 0; }
.record th, .record td {
  font-family: var(--nagori-font-notation);
  text-align: left;
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid var(--nagori-hairline);
  vertical-align: baseline;
}
.record th {
  font-weight: 300; font-size: 10px; line-height: 1.8;
  letter-spacing: var(--nagori-track-label);
  text-transform: uppercase; color: var(--nagori-ash);
  width: 38%; white-space: nowrap;
}
.record td { font-weight: 400; font-size: 12px; letter-spacing: 0.06em; color: var(--nagori-sumi); }
.record tr:last-child th, .record tr:last-child td { border-bottom: none; }
/* §05 a corrected record stays legible — the only permitted strike in the system */
.record s, .struck { text-decoration: line-through; color: var(--nagori-ash); }

/* ---- §07 COLLECTION IS A REGISTER, NOT A GRID.
        Archive number, name, family, concentration, price. One thumbnail per row. ---- */
.register { width: 100%; border-collapse: collapse; margin: 0 0 4rem; }
.register thead th {
  font-family: var(--nagori-font-notation);
  font-weight: 300; font-size: 10px;
  letter-spacing: var(--nagori-track-label);
  text-transform: uppercase; color: var(--nagori-ash);
  text-align: left; padding: 0 14px 10px;
  border-bottom: 1px solid var(--nagori-sumi);
}
.register td {
  padding: 18px 14px;
  border-bottom: 1px solid var(--nagori-hairline);
  vertical-align: middle;
  font-family: var(--nagori-font-notation);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--nagori-ash);
}
.register td.reg-name {
  font-family: var(--nagori-font-reading);
  font-size: 19px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--nagori-sumi);
}
.register td.reg-no, .register td.reg-price { color: var(--nagori-sumi); white-space: nowrap; }
.register td.reg-price { text-align: right; }
.register img { display: block; width: 56px; height: 70px; object-fit: cover; }
.register tbody tr { transition: opacity var(--nagori-motion) ease-out; }
.register tbody tr:hover { opacity: 0.62; }
.register a { text-decoration: none; color: inherit; }
@media (max-width: 760px) {
  /* §07 the record table scrolls horizontally rather than wrapping */
  .register-wrap, .record-wrap { overflow-x: auto; }
  .register { min-width: 620px; }
}

/* ---- §03 ratio: Kozo 70 · Sumi 22 · Mist 6. Dark sections are Sumi. ---- */
.pause--dark, .pause--noir, .page-plate, .firstmat { background: var(--nagori-sumi); }
.page-plate-line, .pause--noir .pause-line, .firstmat-line { color: var(--nagori-kozo); }

/* ---- §07 GRID: 12 columns, 24 px gutter, 1240 max.
        Outer margin never below one full column. ---- */
.container--wide, .container, .container--narrow { max-width: var(--grid-max); }
.container--narrow { max-width: 720px; }
@media (max-width: 760px) { .container, .container--wide, .container--narrow { padding-left: 20px; padding-right: 20px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- §07 HOME: statement, then the archive as a list. Nothing else. ---- */
.home-statement { padding: clamp(90px, 16vh, 170px) 0 clamp(56px, 9vh, 100px); }
.home-jp { font-size: 15px; color: var(--nagori-ash); margin: 0 0 38px; }
.statement { max-width: 28ch; margin: 0; }
.home-index { padding: 0 0 clamp(80px, 14vh, 150px); }
.home-index-label { display: block; margin-bottom: 14px; }
.archive-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nagori-sumi); }
.archive-row a {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 20px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--nagori-hairline);
  text-decoration: none; color: inherit;
  transition: opacity var(--nagori-motion) ease-out;
}
.archive-row a:hover { opacity: 0.62; }
.ar-no {
  font-family: var(--nagori-font-notation); font-size: 12px;
  letter-spacing: var(--nagori-track-notation); color: var(--nagori-sumi);
  font-variant-numeric: tabular-nums;
}
.ar-name { font-family: var(--nagori-font-reading); font-weight: 500; font-size: 21px; letter-spacing: 0.01em; color: var(--nagori-sumi); }
.ar-fam {
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px;
  letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash);
}
@media (max-width: 620px) {
  .archive-row a { grid-template-columns: 74px 1fr; row-gap: 4px; }
  .ar-fam { grid-column: 2; }
}

/* ---- footer additions ---- */
.footer-jp { font-size: 15px; color: var(--nagori-ash); margin: 0 0 10px; }
.footer-tagline { font-family: var(--nagori-font-reading); font-weight: 400; font-size: 15px; color: var(--nagori-ash); }
.footer-note { margin-top: 12px; font-family: var(--nagori-font-notation); font-size: 10px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash); }

/* ---- collection register ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.register td a { display: block; }
.register .reg-thumb { width: 56px; padding-right: 0; }
.register-note { margin-top: 18px; color: var(--nagori-ash); }
.coll-hero { padding: clamp(70px, 12vh, 130px) 0 clamp(30px, 5vh, 54px); }
.coll-hero-body { margin-top: 26px; }

/* ============================================================
   §07 PRODUCT PAGE
   Name and archive number · one image · the paragraph · the full
   eleven-field record · materials with origins · honest wear time
   in hours · price · add to bag · discovery set as the alternative.
   ============================================================ */
.pdp-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  align-items: start; background: var(--nagori-kozo);
}
.pdp-visual { background: var(--nagori-mist); }
.pdp-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-panel { padding: clamp(56px, 8vw, 104px) clamp(28px, 5vw, 72px); max-width: 640px; }

.pdp-archive {
  font-family: var(--nagori-font-notation); font-size: 12px;
  letter-spacing: var(--nagori-track-notation); color: var(--nagori-ash);
  font-variant-numeric: tabular-nums; margin: 0 0 10px;
}
.pdp-name {
  font-family: var(--nagori-font-reading); font-weight: 300;
  font-size: clamp(28px, 4vw, 40px); line-height: var(--nagori-leading-statement);
  letter-spacing: -0.006em; color: var(--nagori-sumi); margin: 0 0 14px;
}
.pdp-family {
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px;
  letter-spacing: var(--nagori-track-label); text-transform: uppercase;
  color: var(--nagori-ash); margin: 0 0 28px;
}
.pdp-para { margin: 0 0 32px; }

/* honest wear time, in hours */
.pdp-wear { border-top: 1px solid var(--nagori-hairline); margin: 0 0 32px; }
.wear-row { display: grid; grid-template-columns: 108px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--nagori-hairline); }
.wear-k {
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px;
  letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash);
}
.wear-v { font-family: var(--nagori-font-reading); font-size: 15px; color: var(--nagori-sumi); }

.pdp-price {
  font-family: var(--nagori-font-notation); font-size: 15px;
  letter-spacing: var(--nagori-track-notation); color: var(--nagori-sumi);
  font-variant-numeric: tabular-nums; margin: 0 0 16px;
}
.size-selector { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--nagori-hairline); margin: 0 0 26px; }
.size-option {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 0; border-bottom: 1px solid var(--nagori-hairline);
  font-family: var(--nagori-font-notation); font-size: 12px;
  letter-spacing: 0.06em; color: var(--nagori-ash);
  background: none; border-left: none; border-right: none; border-top: none;
}
.size-option.selected { color: var(--nagori-sumi); background: none; }

.pdp-cart { margin: 0 0 12px; }
.pdp-alt { display: inline-block; margin: 0 0 22px; }
.pdp-save { border: none; padding: 0; color: var(--nagori-ash); display: block; margin: 0 0 26px; }
.pdp-terms { color: var(--nagori-ash); max-width: 52ch; }

.pdp-record, .pdp-composition, .pdp-arc, .pdp-materials, .pdp-legal { padding: clamp(44px, 6vw, 72px) 0; border-top: 1px solid var(--nagori-hairline); }
.record-note { margin-top: 14px; color: var(--nagori-ash); max-width: 60ch; }

.comp-rows { border-top: 1px solid var(--nagori-hairline); margin-top: 14px; }
.comp-row { display: grid; grid-template-columns: 108px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--nagori-hairline); }
.comp-k { font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash); }
.comp-v { font-family: var(--nagori-font-reading); font-size: 16px; color: var(--nagori-sumi); }

.arc-track { border-top: 1px solid var(--nagori-hairline); margin-top: 14px; }
.arc-moment { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--nagori-hairline); }
.arc-time { font-family: var(--nagori-font-notation); font-weight: 400; font-size: 11px; letter-spacing: var(--nagori-track-notation); text-transform: uppercase; color: var(--nagori-ash); font-variant-numeric: tabular-nums; }
.arc-text { font-family: var(--nagori-font-reading); font-size: 16px; color: var(--nagori-sumi); margin: 0; max-width: 60ch; }

.mat-list { border-top: 1px solid var(--nagori-hairline); margin-top: 14px; }
.mat-row { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--nagori-hairline); }
.mat-name { font-family: var(--nagori-font-reading); font-weight: 500; font-size: 16px; color: var(--nagori-sumi); }
.mat-origin { font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash); grid-column: 1; grid-row: 2; }
.mat-note { font-family: var(--nagori-font-reading); font-size: 16px; color: var(--nagori-sumi); margin: 0; grid-column: 2; grid-row: 1 / span 2; max-width: 60ch; }

/* §06 the object placed off-centre against a large empty field */
.specimen { padding: clamp(44px, 6vw, 72px) 0; border-top: 1px solid var(--nagori-hairline); }
.specimen-grid { display: block; }
.specimen-media { max-width: 420px; }
.specimen-media img { display: block; width: 100%; height: auto; }
.specimen-cap { margin-top: 14px; color: var(--nagori-ash); }
.pdp-inci { color: var(--nagori-ash); max-width: 66ch; }
.pdp-inci-note { color: var(--nagori-ash); max-width: 66ch; margin-top: 10px; }

@media (max-width: 860px) {
  .pdp-hero { grid-template-columns: 1fr; }
  .pdp-panel { max-width: none; }
  .arc-moment, .mat-row, .comp-row, .wear-row { grid-template-columns: 1fr; gap: 6px; }
  .mat-origin { grid-column: 1; grid-row: 2; }
  .mat-note { grid-column: 1; grid-row: 3; }
}

/* ---- discovery set ---- */
.disc-hero { padding: clamp(70px, 12vh, 130px) 0 clamp(40px, 6vh, 70px); }
.disc-hero-body { margin: 26px 0 34px; }
.disc-cta { margin-top: 26px; }
.disc-terms { margin-top: 14px; color: var(--nagori-ash); }
.disc-inside, .disc-how { padding: clamp(44px, 6vw, 72px) 0; border-top: 1px solid var(--nagori-hairline); }
.vial-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--nagori-hairline); }
.vial-row { display: grid; grid-template-columns: 88px 1fr auto; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--nagori-hairline); opacity: 1; }
.vial-no { font-family: var(--nagori-font-notation); font-size: 12px; letter-spacing: var(--nagori-track-notation); color: var(--nagori-sumi); font-variant-numeric: tabular-nums; }
.vial-name { font-family: var(--nagori-font-reading); font-weight: 500; font-size: 19px; color: var(--nagori-sumi); }
.vial-note { font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash); }
@media (max-width: 620px) { .vial-row { grid-template-columns: 74px 1fr; row-gap: 4px; } .vial-note { grid-column: 2; } }

/* ---- primer / guide rows (layering, language of scent, sustainability) ---- */
.primer-row { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--nagori-hairline); }
.primer-row:first-child { border-top: 1px solid var(--nagori-sumi); }
.primer-term { font-family: var(--nagori-font-reading); font-weight: 500; font-size: 21px; line-height: 1.35; letter-spacing: 0.01em; color: var(--nagori-sumi); margin: 6px 0 0; }
.primer-body .body-text { margin: 0 0 12px; }
.primer-list { list-style: none; margin: 0; padding: 0; }
.primer-list li { padding: 10px 0; border-bottom: 1px solid var(--nagori-hairline); font-size: 16px; max-width: 66ch; }
.primer-list li:last-child { border-bottom: none; }
.primer-list-k { display: block; font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash); margin-bottom: 4px; }
@media (max-width: 760px) { .primer-row { grid-template-columns: 1fr; gap: 10px; } }

/* ---- materials: one material, one image, one origin ---- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; border-top: 1px solid var(--nagori-hairline); }
.feature--reverse .feature-visual { order: 2; }
.feature-visual { position: relative; background: var(--nagori-mist); }
.feature-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fv-bignum { position: absolute; top: 18px; left: 18px; font-family: var(--nagori-font-notation); font-size: 11px; letter-spacing: var(--nagori-track-notation); color: var(--nagori-kozo); font-variant-numeric: tabular-nums; }
.feature-content { padding: clamp(40px, 5vw, 72px); }
.feature-name { font-family: var(--nagori-font-reading); font-weight: 300; font-size: clamp(26px, 3.4vw, 34px); line-height: var(--nagori-leading-statement); letter-spacing: -0.006em; color: var(--nagori-sumi); margin: 8px 0 18px; }
.feature-content .origin { display: block; margin-top: 16px; }
.process { border-top: 1px solid var(--nagori-hairline); padding: clamp(44px, 6vw, 72px) 0; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature--reverse .feature-visual { order: 0; } }

/* ---- §08 ABOUT: under 250 words. No founder photograph, no journey. ---- */
.about { padding: clamp(70px, 12vh, 130px) 0 clamp(50px, 8vh, 90px); }
.about-jp { font-size: 15px; color: var(--nagori-ash); margin: 0 0 34px; }
.about-statement { max-width: 22ch; margin: 0 0 44px; }
.about-body { max-width: 66ch; }
.about-body .body-text { margin: 0 0 20px; }
.about-record { margin-top: 40px; }
.about-links { margin-top: 26px; }
.about-plate { margin: 0; }
.about-plate img { display: block; width: 100%; max-height: 62vh; object-fit: cover; }

/* ---- §02 ragged right, never justified, never centred.
        Every column left-aligned except numeric, which align right. ---- */
.coll-hero, .coll-hero-inner, .coll-hero-body, .rule--center,
.collection-head, .arc-head, .process-head, .prov-head, .comp-head,
.disc-hero, .disc-hero-inner, .gift-hero, .journal-hero, .contact-hero,
.pause, .pause-line, .page-plate, .page-plate-inner {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.coll-hero-inner, .disc-hero-inner { max-width: none; }
.rule--center { margin: 0 !important; }
.coll-hero-body, .disc-hero-body { max-width: 66ch; }
.section--sm { padding-top: 0; }

/* ---- §01 the wordmark exists in Sumi, in Kozo, and in blind deboss.
        Nothing else. It must never inherit the link accent. ---- */
.nav-logo, .footer-logo { color: var(--nagori-sumi); }
.nav-logo:hover, .footer-logo:hover { color: var(--nagori-sumi); opacity: 0.62; }
/* on a Sumi ground the mark reverses to Kozo */
.nf-page .nav-logo, .story-page .nav:not(.scrolled) .nav-logo,
.nav.on-dark .nav-logo { color: var(--nagori-kozo); }

/* ---- §07 mobile is the design case, not the adaptation ---- */
@media (max-width: 760px) {
  .coll-hero, .disc-hero, .about, .home-statement { padding-top: clamp(44px, 9vh, 72px); padding-bottom: 22px; }
  .section--sm { padding-bottom: 48px; }
  .home-index { padding-bottom: 64px; }
  .pdp-panel { padding: 40px 20px 48px; }
  .footer { padding-top: 56px; }
}

/* ---- nav utilities are notation, like every other counted thing ---- */
.cart-trigger, .wishlist-trigger, .nav-links a, .nav-overlay a, .btn-nav {
  font-family: var(--nagori-font-notation);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: var(--nagori-track-notation);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.nav-links a, .nav-overlay a, .cart-trigger, .wishlist-trigger { color: var(--nagori-ash); border: none; }
.nav-links a:hover, .nav-overlay a:hover, .cart-trigger:hover, .wishlist-trigger:hover { color: var(--nagori-sumi); opacity: 1; }
.btn-nav { border: 1px solid var(--nagori-sumi); color: var(--nagori-sumi); padding: 12px 20px; }

/* ---- F.02 the bag and saved triggers are siblings and need a gap.
        .nav-actions is populated at runtime, so this must not rely on markup. ---- */
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-actions .wishlist-trigger { white-space: nowrap; }

/* ============================================================
   EDITORIAL LAYER
   Cinematic pacing without breaking §07: the drama is scale,
   space and image, never motion. No parallax, no scroll reveal.
   ============================================================ */

/* ---- chapters: long vertical rhythm. Confidence leaves space. ---- */
.chapter { padding: clamp(90px, 16vh, 190px) 0; }
.chapter--tight { padding: clamp(56px, 9vh, 110px) 0; }
.chapter + .chapter { border-top: 1px solid var(--nagori-hairline); }
.chapter-label { display: block; margin-bottom: clamp(26px, 4vw, 44px); }

/* an opening paragraph sits a step above body, never a step above the statement */
.lede {
  font-family: var(--nagori-font-reading);
  font-weight: 300;
  font-size: clamp(19px, 2.1vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--nagori-sumi);
  max-width: 40ch;
}

/* ---- full-bleed plates: the image is the section ---- */
.plate {
  position: relative;
  width: 100%;
  margin: 0;
  background: var(--nagori-mist);
  overflow: hidden;
}
.plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate--tall  { aspect-ratio: 4 / 5; }
.plate--wide  { aspect-ratio: 3 / 2; }
.plate--pano  { aspect-ratio: 16 / 9; }
.plate--full  { min-height: clamp(420px, 78vh, 820px); }
.plate--full img { position: absolute; inset: 0; }
.plate-caption {
  display: block;
  padding: 12px 0 0;
  font-family: var(--nagori-font-notation);
  font-weight: 300; font-size: 10px;
  letter-spacing: var(--nagori-track-label);
  text-transform: uppercase; color: var(--nagori-ash);
}
/* a line laid over a plate — Kozo on Sumi, never Ai (§03) */
.plate-line {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(28px, 5vw, 64px);
  background: linear-gradient(to top, rgba(28,28,26,.72), rgba(28,28,26,0));
  color: var(--nagori-kozo);
  font-family: var(--nagori-font-reading);
  font-weight: 300;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: var(--nagori-leading-statement);
  letter-spacing: -0.006em;
  max-width: 26ch;
}

/* an awaited photograph is drawn, not faked — the slot shows its own brief */
.plate--awaiting {
  display: flex; align-items: center; justify-content: center;
  background: var(--nagori-plate);
  border: 1px solid var(--nagori-hairline);
  min-height: clamp(240px, 42vh, 460px);
}
.plate--awaiting span {
  font-family: var(--nagori-font-notation);
  font-weight: 300; font-size: 10px;
  letter-spacing: var(--nagori-track-label);
  text-transform: uppercase; color: var(--nagori-ash);
  text-align: center; padding: 0 24px; max-width: 44ch; line-height: 2.1;
}

/* ---- editorial two-column: image and argument ---- */
.spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.spread--reverse > :first-child { order: 2; }
.spread-copy { max-width: 46ch; }
.spread-copy p { margin: 0 0 14px; }

/* ---- the homepage index: the five, as an editorial register ---- */
.index-entry {
  display: grid;
  grid-template-columns: 132px 1fr 200px;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  padding: clamp(26px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--nagori-hairline);
  text-decoration: none; color: inherit;
  transition: opacity var(--nagori-motion) ease-out;
}
.index-entry:first-of-type { border-top: 1px solid var(--nagori-sumi); }
.index-entry:hover { opacity: .62; }
.index-media { aspect-ratio: 4/5; background: var(--nagori-mist); overflow: hidden; }
.index-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ie-no {
  font-family: var(--nagori-font-notation); font-size: 12px;
  letter-spacing: var(--nagori-track-notation); color: var(--nagori-ash);
  font-variant-numeric: tabular-nums; display: block; margin-bottom: 8px;
}
.ie-name {
  font-family: var(--nagori-font-reading); font-weight: 300;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.006em;
  color: var(--nagori-sumi); margin: 0 0 10px;
}
.ie-line { font-size: 16px; color: var(--nagori-ash); margin: 0; max-width: 46ch; }
.ie-meta {
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px;
  letter-spacing: var(--nagori-track-label); text-transform: uppercase;
  color: var(--nagori-ash); text-align: right; line-height: 2;
}

/* ---- the wearing: the brief's emotional dimensions, kept as record fields ---- */
.wearing { width: 100%; border-collapse: collapse; }
.wearing th, .wearing td {
  text-align: left; padding: 13px 0; border-bottom: 1px solid var(--nagori-hairline);
  vertical-align: baseline;
}
.wearing th {
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px;
  letter-spacing: var(--nagori-track-label); text-transform: uppercase;
  color: var(--nagori-ash); width: 132px; white-space: nowrap;
}
.wearing td {
  font-family: var(--nagori-font-reading); font-size: 17px;
  color: var(--nagori-sumi); max-width: 52ch;
}
.wearing tr:last-child th, .wearing tr:last-child td { border-bottom: none; }

/* ---- a single line alone in a field ---- */
.solus {
  padding: clamp(90px, 18vh, 200px) 0;
  border-top: 1px solid var(--nagori-hairline);
  border-bottom: 1px solid var(--nagori-hairline);
}
.solus p {
  font-family: var(--nagori-font-reading); font-weight: 300;
  font-size: clamp(22px, 3.2vw, 34px); line-height: var(--nagori-leading-statement);
  letter-spacing: -0.006em; color: var(--nagori-sumi);
  max-width: 24ch; margin: 0;
}

/* ---- §01 THE INTERVAL MARK ----------------------------------------
   The house has two marks: the wordmark, and the interval mark — two
   facing arcs with a gap held open between them. Until now the interval
   mark appeared only on the loading screen, which almost nobody sees.
   It is the drawing of the thing the house is named for, so it now marks
   every place the site stops speaking: a line alone, a pause, a break
   between chapters. One mark, one meaning, on nearly every page.
   ------------------------------------------------------------------ */
.interval {
  display: block; width: 24px; height: 24px;
  background: currentColor; color: var(--nagori-ash);
  -webkit-mask: url("../brand/nagori-interval-mark.svg") no-repeat center / contain;
          mask: url("../brand/nagori-interval-mark.svg") no-repeat center / contain;
}
.solus .interval { margin: 0 0 clamp(26px, 4vh, 40px); }
.pause .interval { margin: 0 auto clamp(26px, 4vh, 40px); }
.pause--dark .interval, .pause--noir .interval { color: var(--nagori-mist); }

/* ---- THE ISSUE ------------------------------------------------------
   Not a size picker. The same object as the register on collection.html:
   ruled rows, a notation header, tabular prices hard right. Choosing a
   size is choosing a line. The selected line is marked in the gutter with
   the interval mark — the house's own mark, doing the work an accent
   colour would do on a shop, which §03 does not allow.
   ------------------------------------------------------------------- */
.issue { display: block; margin: 2rem 0 1.9rem; border-top: 1px solid var(--nagori-hairline); }
.issue-head {
  display: flex; justify-content: space-between; margin: 0;
  padding: 10px 0 9px; border-bottom: 1px solid var(--nagori-hairline);
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 9px;
  letter-spacing: var(--nagori-track-label); text-transform: uppercase;
  color: var(--nagori-ash);
}
.issue .size-option {
  position: relative; display: grid;
  grid-template-columns: 22px minmax(4.5em, auto) 1fr auto;
  align-items: baseline; column-gap: 12px;
  margin: 0; padding: 17px 0 16px; border: none; background: none;
  border-bottom: 1px solid var(--nagori-hairline);
  cursor: pointer; transition: color 0.25s ease;
}
.issue .size-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.issue-mark {
  /* the kit ships a micro cut whose gap survives at this size — the full
     mark closes up below about 16px and reads as a lowercase o */
  width: 13px; height: 13px; opacity: 0;
  background: currentColor; color: var(--nagori-sumi);
  -webkit-mask: url("../brand/nagori-interval-mark-micro.svg") no-repeat center / contain;
          mask: url("../brand/nagori-interval-mark-micro.svg") no-repeat center / contain;
  transition: opacity 0.25s ease;
}
.issue-vol {
  font-family: var(--nagori-font-reading); font-weight: 300; font-size: 17px;
  color: var(--nagori-ash); transition: color 0.25s ease;
}
.issue-note {
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 9px;
  letter-spacing: var(--nagori-track-label); text-transform: uppercase;
  color: var(--nagori-ash); white-space: nowrap;
}
.issue-price {
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 13px;
  font-variant-numeric: tabular-nums; color: var(--nagori-ash);
  transition: color 0.25s ease;
}
.issue .size-option:hover .issue-vol,
.issue .size-option:hover .issue-price { color: var(--nagori-sumi); }
.issue .size-option.selected .issue-mark { opacity: 1; }
.issue .size-option.selected .issue-vol,
.issue .size-option.selected .issue-price { color: var(--nagori-sumi); }
.issue .size-option:focus-within { outline: 1px solid var(--nagori-ai); outline-offset: 3px; }
@media (max-width: 560px) {
  .issue .size-option { grid-template-columns: 20px 1fr auto; row-gap: 5px; }
  .issue-note { grid-column: 2 / -1; }
}

/* ---- THE OPENING: staged, not described ----------------------------
   The page already said what unwrapping a bottle is like. Four frames in
   order, numbered like every other record on the site, so the ceremony is
   shown at the length it actually takes rather than only claimed.
   ------------------------------------------------------------------ */
.opening-seq {
  list-style: none; margin: clamp(34px,5vh,58px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,2vw,26px);
}
.opening-seq > li { margin: 0; }
.opening-seq .plate { background: var(--nagori-mist); }
.opening-cap {
  margin: 14px 0 0;
  font-family: var(--nagori-font-notation); font-weight: 300;
  font-size: 10px; line-height: 1.7; letter-spacing: .06em;
  color: var(--nagori-ash);
}
.opening-no {
  display: block; margin-bottom: 6px;
  letter-spacing: var(--nagori-track-notation); color: var(--nagori-sumi);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) { .opening-seq { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 460px) { .opening-seq { grid-template-columns: 1fr; } }

/* ---- THE HOUR ------------------------------------------------------
   The house composes for a time of day, so the register can be read by
   one. Filtering is the register's own idea: rows that do not answer the
   hour are struck out of view, not hidden by a select box.
   ------------------------------------------------------------------ */
.hour-filter { margin: 0 0 clamp(30px, 5vh, 54px); }
.hour-lede {
  margin: 0 0 18px; font-family: var(--nagori-font-notation); font-weight: 300;
  font-size: 10px; letter-spacing: var(--nagori-track-label);
  text-transform: uppercase; color: var(--nagori-ash);
}
.hour-row { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--nagori-hairline); }
.hour-btn {
  flex: 1 1 auto; min-width: 118px; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--nagori-hairline);
  border-right: 1px solid var(--nagori-hairline);
  padding: 13px 16px 14px; cursor: pointer; color: var(--nagori-ash);
  transition: color var(--nagori-motion) ease, background-color var(--nagori-motion) ease;
}
.hour-btn:last-child { border-right: none; }
.hour-t {
  display: block; font-family: var(--nagori-font-notation); font-weight: 300;
  font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .08em;
}
.hour-n {
  display: block; margin-top: 5px;
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 9px;
  letter-spacing: var(--nagori-track-label); text-transform: uppercase;
  color: var(--nagori-mist);
}
.hour-btn:hover { color: var(--nagori-sumi); }
.hour-btn.is-on { color: var(--nagori-sumi); }
.hour-btn.is-on .hour-n { color: var(--nagori-ash); }
.hour-btn:focus-visible { outline: 1px solid var(--nagori-ai); outline-offset: -1px; }
.register tbody tr.is-out { display: none; }
.register td.reg-hour {
  font-family: var(--nagori-font-notation); font-variant-numeric: tabular-nums;
  color: var(--nagori-sumi); white-space: nowrap;
}
.register td.reg-wears {
  font-family: var(--nagori-font-notation); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.register-wrap { overflow-x: auto; }

/* the hour, stated beside the archive number on the edition's own page */
.pdp-hour {
  margin-left: 14px; padding-left: 14px;
  border-left: 1px solid var(--nagori-hairline);
  color: var(--nagori-ash); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pdp-hour:hover { color: var(--nagori-sumi); }

/* ---- THE WEARING, COMPARED -----------------------------------------
   Aesop keeps a comparison tool and is the strictest subtractor in the
   set, so restraint is not an argument against having one. Every cell is
   read from that edition's own record — the comparison states nothing the
   product page does not already state.
   ------------------------------------------------------------------ */
.compare-lede { max-width: 56ch; margin: 0 0 clamp(26px, 4vh, 44px); }
.compare-wrap { overflow-x: auto; }
.compare {
  width: 100%; min-width: 1080px; border-collapse: collapse;
  margin: 0 0 22px; table-layout: fixed;
}
.compare thead th {
  vertical-align: bottom; text-align: left; padding: 0 18px 14px 0;
  border-bottom: 1px solid var(--nagori-sumi);
  font-family: var(--nagori-font-reading); font-weight: 300; font-size: 17px;
  letter-spacing: -.006em; color: var(--nagori-sumi);
}
.compare thead th:first-child { width: 118px; border-bottom-color: var(--nagori-hairline); }
.compare thead a { text-decoration: none; color: inherit; display: block; }
.compare thead a:hover { color: var(--nagori-ash); }
.cmp-no {
  display: block; margin-bottom: 6px;
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px;
  letter-spacing: var(--nagori-track-notation); text-transform: uppercase;
  color: var(--nagori-ash); font-variant-numeric: tabular-nums;
}
.compare tbody th {
  text-align: left; vertical-align: top; padding: 20px 18px 20px 0;
  border-bottom: 1px solid var(--nagori-hairline);
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 9px;
  letter-spacing: var(--nagori-track-label); text-transform: uppercase;
  color: var(--nagori-ash); white-space: nowrap;
}
.compare tbody td {
  vertical-align: top; padding: 20px 18px 20px 0;
  border-bottom: 1px solid var(--nagori-hairline);
  font-family: var(--nagori-font-reading); font-weight: 300;
  font-size: 14px; line-height: 1.62; color: var(--nagori-sumi);
}
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }

/* the consultation's promise — rendered only when config.js carries one */
.consult-promise {
  margin: 1.6em 0 0;
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px;
  letter-spacing: var(--nagori-track-label); text-transform: uppercase;
  color: var(--nagori-ash);
}

/* the moments row scrolls inside itself rather than widening the document */
.arc-track { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- ingredient pages ---- */
.ing-hero { padding: clamp(70px, 12vh, 140px) 0 clamp(34px, 5vh, 60px); }
.ing-binomial {
  font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px;
  letter-spacing: var(--nagori-track-label); text-transform: uppercase;
  color: var(--nagori-ash); margin: 0 0 14px;
}
.ing-name {
  font-family: var(--nagori-font-reading); font-weight: 300;
  font-size: clamp(34px, 6vw, 62px); line-height: 1.05; letter-spacing: -0.014em;
  margin: 0 0 20px; color: var(--nagori-sumi);
}
.ing-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 0; border-top: 1px solid var(--nagori-sumi); }
.ing-facts div { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--nagori-hairline); }
.ing-facts .v { font-family: var(--nagori-font-notation); font-size: 12px; letter-spacing: .06em; color: var(--nagori-sumi); display: block; margin-top: 5px; }

/* ---- rituals ---- */
.ritual { padding: clamp(30px, 5vw, 46px) 0; border-bottom: 1px solid var(--nagori-hairline); }
.ritual:first-of-type { border-top: 1px solid var(--nagori-sumi); }
.ritual-hour {
  font-family: var(--nagori-font-notation); font-size: 12px;
  letter-spacing: var(--nagori-track-notation); color: var(--nagori-ash);
  font-variant-numeric: tabular-nums; display: block; margin-bottom: 10px;
}
.ritual-name {
  font-family: var(--nagori-font-reading); font-weight: 300;
  font-size: clamp(22px, 2.8vw, 30px); line-height: 1.22; letter-spacing: -0.006em;
  margin: 0 0 12px; color: var(--nagori-sumi);
}

@media (max-width: 860px) {
  .spread, .spread--reverse { grid-template-columns: 1fr; }
  .spread--reverse > :first-child { order: 0; }
  .index-entry { grid-template-columns: 92px 1fr; row-gap: 12px; }
  .ie-meta { grid-column: 2; text-align: left; }
  .wearing th { width: 108px; }
}

/* ---- the note pyramid sits above the fold: it is what a fragrance-literate
        reader came for, and it should not be the sixth section down ---- */
.pyramid { border-top: 1px solid var(--nagori-hairline); margin: 0 0 30px; }
.pyramid-label { display: block; padding: 14px 0 8px; }
.pyr-row { display: grid; grid-template-columns: 66px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--nagori-hairline); }
.pyr-k { font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash); }
.pyr-v { font-family: var(--nagori-font-reading); font-size: 15px; line-height: 1.5; color: var(--nagori-sumi); }
@media (max-width: 620px) { .pyr-row { grid-template-columns: 1fr; gap: 2px; } }

/* ---- config-driven components. Each is absent, not empty, when unconfigured ---- */
.press-list { border-top: 1px solid var(--nagori-hairline); margin-top: 14px; }
.press-row { display: grid; grid-template-columns: 180px 1fr 90px; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--nagori-hairline); }
.press-outlet { font-family: var(--nagori-font-notation); font-weight: 300; font-size: 10px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash); }
.press-title { font-family: var(--nagori-font-reading); font-size: 16px; color: var(--nagori-sumi); text-decoration: none; }
.press-title:hover { opacity: .62; }
.press-date { font-family: var(--nagori-font-notation); font-size: 11px; letter-spacing: var(--nagori-track-notation); color: var(--nagori-ash); text-align: right; font-variant-numeric: tabular-nums; }
.currency-switch, .currency-static {
  font-family: var(--nagori-font-notation); font-weight: 400; font-size: 11.5px;
  letter-spacing: var(--nagori-track-notation); text-transform: uppercase;
  color: var(--nagori-ash); background: transparent; border: none; padding: 0;
  appearance: none; cursor: pointer;
}
.currency-switch:hover { color: var(--nagori-sumi); }
/* an editor sees the unfilled state; a visitor sees nothing */
[data-unfilled] { display: none; }
@media (max-width: 760px) { .press-row { grid-template-columns: 1fr; gap: 4px; } .press-date { text-align: left; } }