/* Generated by build-css.py from nagori.css, nav.css, line.css — do not edit this file. Edit those, then run build-css.py. */ /* ---- css/nagori.css ---- */ /* ============================================================ 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; } /* ---- Italics: only where the copy asks for them, in DM Sans italic. Headlines stay upright. ---- */ h1, h2, h3, .statement, .display { font-style: normal; } /* ---- TYPE: body DM Sans 400 at 16/1.65. Never below 16 px for reading. ---- */ body { background: var(--nagori-kozo); color: var(--nagori-sumi); font-family: var(--nagori-font-reading); font-weight: 400; font-size: 16px; line-height: var(--nagori-leading-body); letter-spacing: 0; } /* §02 measure 60–68 characters, ragged right, never justified. Set at the floor: at 66ch the column read diffuse beside houses that run 47–52ch. 60 is as tight as §02 allows. */ .body-text, p { font-family: var(--nagori-font-reading); font-weight: 400; font-size: 16px; line-height: var(--nagori-leading-body); letter-spacing: 0; text-align: left; max-width: 60ch; color: var(--nagori-read); } /* §02 scale — statement / heading / body / notation / label key */ .display, .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, .origin, .footer-social, .legal-updated, .article-meta, .co-row, .cart-item-variant, .gift-price { font-family: var(--nagori-font-label); 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 { 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: 60ch; } /* label key — the quieter of the two notation roles */ .label, .co-row .l { font-weight: 300; font-size:12px; line-height: 1.8; letter-spacing: var(--nagori-track-label); } /* values sit in ink, keys sit in ash */ /* §02 numerals: tabular lining wherever a number sits in a column */ table, .record, .register, .co-totals { font-variant-numeric: tabular-nums; } /* ---- §02 JAPANESE: 名残 and any CJK setting ---- */ /* ---- §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--lg, .btn--ghost, button, .pdp-cart, .pdp-sample, .checkout-place, .contact-submit, .consult-submit, .footer-submit { font-family: var(--nagori-font-label); 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:16px 28px; transition: opacity var(--nagori-motion) ease-out; } .btn:hover, .btn--border:hover, .btn--ghost:hover, button:hover { opacity: 0.62; } /* the bag's stepper and remove link are controls, not §07 buttons: without this they took the 16 × 28 padding above and swelled to 58 × 34. The stepper sits on its own line under the size. */ .cart-qty { display: flex; width: max-content; margin-top: .6rem; } .cart-qty button { padding: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; } .cart-remove { padding: 0; min-height: 32px; } /* tertiary / link — a rule under the words, no border box */ .btn--ghost { 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. This is the default and it stays the default: anything on this site that has not been named below fades, in 180 ms, and does nothing else. What it was also doing, until 24 September 2026, was overruling motion that had been chosen deliberately — silently, because !important wins however the other rule is written. The line across the five had never once drawn itself; the hero had never made its slow approach; the bag snapped open instead of sliding. Every one of those was written, with a reduced-motion fallback, by someone who then watched it not happen. So the exceptions are named, one at a time, where each motion is defined, and each carries !important and the same tag: grep -rn "§07-exempt" css/ Twenty of them today. Nothing opts in by accident — a rule has to be given the tag by hand, which is the entire point of the tag. Adding one is a decision about how the house moves, not a bug fix, and the list is short enough to read in one sitting on purpose. ---- */ *, *::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 */ .revealed, .visible { opacity: 1 !important; transform: none !important; } /* an image frame waits in the hairline tone. The old dark art-directed placeholders read as black holes while a photograph was still arriving */ .ph, .ph--01, .ph--02, .ph--03 { background-color: var(--nagori-hairline); background-image: none; } /* ---- §01 MARKS. One file, masked, so it inherits colour from context. ---- Header and footer sit below 200 px, so both take the small cut. */ /* §01 clear space: 2 × cap height, nothing enters the field */ /* ---- §03 RULES: hairlines only. Ai is a rule, never a ground. ---- */ .rule, hr, .article-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-label); text-align: left; padding:12px 16px; border: none; border-bottom: 1px solid var(--nagori-hairline); vertical-align: baseline; } .record th { font-weight: 300; font-size:12px; 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 { 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-label); font-weight: 300; font-size:12px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash); text-align: left; padding:0 16px 8px; border-bottom: 1px solid var(--nagori-sumi); } .register td { padding:16px 16px; border-bottom: 1px solid var(--nagori-hairline); vertical-align: middle; font-family: var(--nagori-font-label); font-size: 12px; letter-spacing: 0.06em; color: var(--nagori-ash); } .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 */ .record-wrap { overflow-x: auto; } .register { min-width: 620px; } } /* ---- §03 ratio: Kozo 70 · Sumi 22 · Mist 6. Dark sections are Sumi. ---- */ /* ---- §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. ---- */ .statement { max-width: 28ch; margin: 0; } /* ---- footer additions ---- */ /* ---- 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; } .coll-hero { padding: clamp(70px, 12vh, 130px) 0 clamp(30px, 5vh, 54px); } .coll-hero-body { margin-top:24px; } /* ============================================================ §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-panel { padding: clamp(56px, 8vw, 104px) clamp(28px, 5vw, 72px); max-width: 640px; } .pdp-archive { font-family: var(--nagori-font-label); font-size: 12px; letter-spacing: var(--nagori-track-notation); color: var(--nagori-ash); font-variant-numeric: tabular-nums; margin:0 0 8px; } .pdp-name { font-family: var(--nagori-font-display); 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 16px; } /* honest wear time, in hours */ .size-selector { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--nagori-hairline); margin:0 0 24px; } .size-option { display: flex; align-items: center; gap:8px; cursor: pointer; padding: 12px 0; border-bottom: 1px solid var(--nagori-hairline); font-family: var(--nagori-font-label); 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; } /* product.css styles .arc-track as a repeat(3,1fr) card grid. The redesign below is a vertical list of rows — label, then text — so that grid has to be switched off explicitly, not merely overridden in part. Left on, each row got a third of the container and the 190px label column left about fifty pixels for the sentence: twenty lines averaging five characters. */ /* product.css also gives each moment a top rule and a small square marker, which belong to the card version and fight the row version. */ /* §06 the object placed off-centre against a large empty field */ @media (max-width: 860px) { .pdp-panel { max-width: none; } } /* ---- discovery set ---- */ .disc-cta { margin-top:24px; } .vial-list { list-style: none; margin:16px 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; } @media (max-width: 620px) { .vial-row { grid-template-columns: 74px 1fr; row-gap: 4px; } } /* ---- primer / guide rows (layering, language of scent, sustainability) ---- */ .primer-row { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding:32px 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:8px 0 0; } .primer-body .body-text { margin: 0 0 12px; } .primer-list { list-style: none; margin: 0; padding: 0; } .primer-list li { padding:8px 0; border-bottom: 1px solid var(--nagori-hairline); font-size: 16px; max-width: 60ch; } .primer-list li:last-child { border-bottom: none; } .primer-list-k { display: block; font-family: var(--nagori-font-label); font-weight: 300; font-size:12px; 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:8px; } } /* ---- 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-name { font-family: var(--nagori-font-display); 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 16px; } .process { border-top: 1px solid var(--nagori-hairline); padding: clamp(44px, 6vw, 72px) 0; } @media (max-width: 860px) { .feature { grid-template-columns: 1fr; } } /* ---- §08 ABOUT: under 250 words. No founder photograph, no journey. ---- */ .about { padding: clamp(70px, 12vh, 130px) 0 clamp(50px, 8vh, 90px); } /* ---- §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, .contact-hero { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } .coll-hero-inner { max-width: none; } .rule--center { margin: 0 !important; } .coll-hero-body { max-width: 60ch; } /* ---- §07 mobile is the design case, not the adaptation ---- */ @media (max-width: 760px) { .coll-hero, .about { padding-top: clamp(44px, 9vh, 72px); padding-bottom:24px; } .pdp-panel { padding: 40px 20px 48px; } .footer { padding-top: 56px; } } /* ---- 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:16px; } /* ============================================================ 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 */ /* ---- 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--pano { aspect-ratio: 16 / 9; } .plate-caption { display: block; padding: 12px 0 0; font-family: var(--nagori-font-label); font-weight: 300; font-size:12px; 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) */ /* an awaited photograph is drawn, not faked — the slot shows its own brief */ /* ---- editorial two-column: image and argument ---- */ /* ---- the homepage index: the five, as an editorial register ---- */ /* ---- 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:12px 0; border-bottom: 1px solid var(--nagori-hairline); vertical-align: baseline; } .wearing th { font-family: var(--nagori-font-label); font-weight: 300; font-size:12px; 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 ---- */ /* ---- §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. ------------------------------------------------------------------ */ /* ---- 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. ------------------------------------------------------------------- */ /* ---- 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. ------------------------------------------------------------------ */ /* ---- 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. ------------------------------------------------------------------ */ /* the hour, stated beside the archive number on the edition's own page */ /* ---- 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 { width: 100%; min-width: 1080px; border-collapse: collapse; margin:0 0 24px; table-layout: fixed; } .compare thead th { vertical-align: bottom; text-align: left; padding:0 16px 16px 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:8px; font-family: var(--nagori-font-label); font-weight: 300; font-size:12px; 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 16px 20px 0; border-bottom: 1px solid var(--nagori-hairline); font-family: var(--nagori-font-label); font-weight: 300; font-size:12px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash); white-space: nowrap; } .compare tbody td { vertical-align: top; padding:20px 16px 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-label); font-weight: 300; font-size:12px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--nagori-ash); } /* The horizontal scroll that used to be here was treating the symptom: the row overflowed because it was still a three-column grid. That is fixed at the source above, so there is nothing to scroll. */ /* ---- the material an edition is built on, weighted ------------------- Born To Stand Out sets its dominant notes heavier than the supporting ones, which turns a list into a hierarchy. Ours marks the one material the edition is stated to be built on — a fact from the record, not a judgement about which note leads. Weight, never colour: §03. ------------------------------------------------------------------ */ .pyr-lead { font-weight: 500; color: var(--nagori-sumi); } /* ---- what applies at the point of buying, on one line ---------------- */ /* ---- THE INSCRIPTION ------------------------------------------------- Le Labo puts personalisation on the product page, not buried at checkout, and shows the characters left as you type — so the constraint is part of the object rather than a validation error later. Cap engraving already existed here; it was three pages further on. Built as a register row, like the issue above it. ------------------------------------------------------------------ */ /* 1.52:1 was unreadable */ .co-row--note .l, .co-row--note .v { font-family: var(--nagori-font-label); font-weight: 300; font-size:12px; letter-spacing: var(--nagori-track-notation); text-transform: uppercase; color: var(--nagori-read); } .co-row--note .v { text-align: right; max-width: 30ch; line-height: 1.7; } .co-row--note[hidden] { display: none; } .currency-notice { margin: 0 0 0.8rem; font-family: var(--nagori-font-label); font-weight: 300; font-size:12px; letter-spacing: var(--nagori-track-notation); text-transform: uppercase; line-height: 1.7; color: var(--nagori-read); max-width: 46ch; } .currency-notice[hidden] { display: none; } .currency-switch { appearance: none; background: none; border: 0; padding:0 16px 0 0; cursor: pointer; font-family: var(--nagori-font-label); font-weight: 300; font-size: 11.5px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: inherit; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 4px center, right 0 center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } .currency-switch:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; } .currency-switch option { color: var(--nagori-sumi); background: var(--nagori-kozo); } .preorder-note { margin: 0 0 0.9rem; font-family: var(--nagori-font-reading); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; line-height: 1.55; color: var(--nagori-read); max-width: 46ch; } .cart-item-eng { display: block; font-family: var(--nagori-font-label); font-weight: 300; font-size:12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nagori-ash); margin-top: 3px; } /* ---- BREADCRUMB ------------------------------------------------------ Every reference house has one; we had none on any page. It sits at the head of the text column so the full-bleed hero is untouched. ------------------------------------------------------------------ */ .crumbs { margin: 0 0 1.6rem; } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .55em; } .crumbs li { font-family: var(--nagori-font-label); font-weight: 300; font-size:12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nagori-ash); } .crumbs li + li::before { content: "/"; margin-right: .55em; color: var(--nagori-ash); } .crumbs a { color: var(--nagori-ash); text-decoration: none; } .crumbs a:hover { color: var(--nagori-sumi); } .crumbs [aria-current="page"] { color: var(--nagori-sumi); } /* ---- ingredient pages ---- */ /* ---- 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); } @media (max-width: 860px) { .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 ---- */ /* ---- config-driven components. Each is absent, not empty, when unconfigured ---- */ .press-list { border-top: 1px solid var(--nagori-hairline); margin-top:16px; } .press-row { display: grid; grid-template-columns: 180px 1fr 90px; gap: 20px; align-items: baseline; padding:16px 0; border-bottom: 1px solid var(--nagori-hairline); } .press-outlet { font-family: var(--nagori-font-label); font-weight: 300; font-size:12px; 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: 12px; 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-label); 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; } } /* ---- PRINT ----------------------------------------------------------- A house that letterpresses an archive card should survive a printer. The chrome goes; the record stays, unbroken, on paper. ------------------------------------------------------------------- */ @media print { .nav, .nav-overlay, .skip-link, .cart-drawer, .footer, .pdp-cart, .pdp-sample, .btn { display: none !important; } html, body { background: #fff !important; color: #000 !important; } main { padding-top: 0 !important; } a { text-decoration: none; color: #000 !important; } /* a record must never be split across a page break */ .record, .wearing, .register, .compare, .record-wrap, figure, .plate { break-inside: avoid; page-break-inside: avoid; } .record th, .record td, .wearing th, .wearing td, .register th, .register td, .compare th, .compare td { border-color: #000 !important; color: #000 !important; } .compare { min-width: 0 !important; } h1, h2, h3 { break-after: avoid; page-break-after: avoid; } img { max-width: 100% !important; break-inside: avoid; } /* the archive number is the identifier — print it beside the name */ .pdp-archive::after { content: " · nagoriolfactive.com"; color: #000; } } /* ---- WhatsApp. Renders only when js/config.js carries a number; the rule costs nothing while that is empty because the element is never created. Kept in the house greyscale — no brand green, no icon, no badge. ---- */ .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-block; padding:12px 16px; background: var(--nagori-sumi); color: var(--nagori-kozo); font-family: var(--nagori-font-label); font-weight: 300; font-size:12px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; text-decoration: none; transition: opacity var(--nagori-motion) ease; } .wa-float:hover { opacity: .82; } .wa-float:focus-visible { outline: 1px solid var(--nagori-ai); outline-offset: 3px; } @media (max-width: 620px) { .wa-float { right: 14px; bottom: 14px; padding:8px 16px; } } @media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } } /* ---- Ask the house. Created only when /api/chat reports a key in the environment, so these rules cost nothing until then. Same greyscale as the rest: no bubbles, no avatars, no rounded corners. ---- */ /* when WhatsApp is also present it takes the corner and this sits above it */ /* ---- Last-line orphans ------------------------------------------------- Eleven paragraphs across the site ended on a single short word alone — "best.", "changed.", "equivalent.", "paper.". `pretty` is the property made for exactly this: it pulls a word back rather than equalising every line the way `balance` does, so running prose keeps its natural rag. Display type that already asks for `balance` is left alone; browsers without support ignore it and nothing changes. ---- */ p, .body-text, .legal-p, .accordion-inner p, .article-body p { text-wrap: pretty; } /* experience.css loads after this file, so the display type that asks for `balance` keeps it; only unclassed prose falls through to `pretty`. */ /* ---- The graduation ------------------------------------------------------ The flask carries a graduated scale with the vermilion band at the top of it: the level starts at the band and only ever falls. The Brand Bible puts the same device on the site — "graduated marks along a rule, long at every fifth, short between… used on the site's section dividers" — so the site's dividers become the scale rather than a plain hairline. Drawn with gradients, so it costs no image, scales to any width, and stays crisp at any density. The single vermilion mark is the index: one per rule, never a row of them. ---------------------------------------------------- */ /* the index — one mark, at the start of the scale */ /* NOT applied to the record. The scale was tried there and pulled: it measures nothing on that block, which makes it a texture band referencing the bottle rather than an instrument, and §06 forbids decoration. It also collided with the caption. The component stays below, ready for the place where it will measure something real — most likely the volume selector, once 100 ml or 50 ml is settled, or a wear scale against the hours the edition actually lasts. Do not apply it until it has something to measure. */ /* On ink the two tick weights swap round: the hairline is the lighter colour, so against a dark ground it out-shouts the ash and the long-every-fifth hierarchy is lost. Invert the pair so the reading stays the same. */ /* ---- The wear scale ------------------------------------------------------ The graduation, put where it measures something. The flask's scale measures what is left in the bottle; this one measures what is left on skin — which is the thing the house says it composes for. "Everyone composes for the first spray. We compose for the hour after." The vermilion index is the first spray: the datum, at zero, exactly as the band sits at the first-fill line on the flask. Everything to the right of it is the hour after. One scale across all five editions, so they are comparable at a glance — that is the whole reason to draw it rather than only write the sentence. The sentence stays and carries the meaning for anyone not seeing this, which is why the figure is aria-hidden rather than given a role of its own. ---- */ /* the interval this edition actually occupies */ /* an open-ended figure — "twelve hours or more" — fades rather than stopping */ /* the first spray */ /* a struck entry that came back — the strike stays, the pointer is added */ /* ---------- touch targets ---------- Thirty-five of the sixty-six controls on the homepage measured under 44px high, because the notation register is small and most controls are set in it. Rather than enlarge the type everywhere, the hit area is grown on coarse pointers only: the mark stays the same size, the target does not. */ @media (pointer: coarse), (max-width: 768px) { .x-link, .btn, .btn--ghost, .btn--border, .size-option, .crumbs a, .nav-overlay a, footer a, .footer-submit, .cart-close, .cart-trigger { min-height: 44px; } .cart-close, .cart-trigger, .footer-submit { min-width: 44px; } /* grown to 44px, the bag's label would sit at the top of its box and ride above the currency beside it */ .cart-trigger { align-items: center; } .x-link, .crumbs a { display: inline-flex; align-items: center; } } /* ---------- the registered address ---------- An unknown house asking fifteen thousand rupees has to say where it is. Set in the notation register, because an address is data, and left unstyled otherwise —
defaults to italic and the kit forbids it (the global reset already normalises font-style, this is belt and braces). */ .channel-addr{ font-style: normal; line-height: 1.6; } .channel-note{ color: var(--nagori-ash); margin-top: 8px; } /* ---------- About: why a Japanese word ---------- A heading for the reader and the outline, set in the caption register so it reads as a label within the essay rather than a new chapter. */ /* ---- css/nav.css ---- */ /* ============================================================ NAGORI — the header, the menu and search Three things at rest: Menu, the name, and Search · currency · Bag. Everything else lives in the menu. On the home page the bar sits over the film in Leaf until the page moves. ============================================================ */ :root { --nav-h: 72px; } @media (max-width: 720px) { :root { --nav-h: 60px; } } nav.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: var(--nav-h); background: var(--leaf); border-bottom: 1px solid var(--rule); color: var(--ink); transition: background-color .4s ease, border-color .4s ease, color .4s ease; } body { padding-top: var(--nav-h); } body.home { padding-top: 0; } .nav-inner { height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; } /* ---- Menu ---- */ .nav-hamburger { justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; color: inherit; font-family: var(--nagori-font-label); font-weight: 500; font-size: 11px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; } .nav-burger { position: relative; display: block; width: 20px; height: 8px; } .nav-burger span { position: absolute; left: 0; width: 20px; height: 1px; background: currentColor; transition: transform .3s ease, top .3s ease !important; /* §07-exempt */ } .nav-burger span:nth-child(1) { top: 0; } .nav-burger span:nth-child(2) { top: 7px; } .nav.open .nav-burger span:nth-child(1) { top: 4px; transform: rotate(35deg); } .nav.open .nav-burger span:nth-child(2) { top: 4px; transform: rotate(-35deg); } .nav-close-label { display: none; } .nav.open .nav-menu-label { display: none; } .nav.open .nav-close-label { display: inline; } /* ---- the name ---- */ /* the drawn wordmark (brand/nagori-wordmark-small.svg), in the bar's colour */ /* The wordmark is drawn at 134 x 21, which is a 21 px tall thing to hit with a thumb — under the 24 x 24 that WCAG 2.2 AA asks of a target (2.5.8). The box is 158 x 40 and the mark is painted at its own size in the middle of it, so the mark has not moved and the target is now a comfortable one. */ .nav-logo { --mark-w: 134px; --mark-h: 21px; justify-self: center; display: block; margin: 0; width: calc(var(--mark-w) + 24px); height: max(40px, calc(var(--mark-h) + 16px)); background: currentColor; -webkit-mask: url(../brand/nagori-wordmark-small.svg) center / var(--mark-w) var(--mark-h) no-repeat; mask: url(../brand/nagori-wordmark-small.svg) center / var(--mark-w) var(--mark-h) no-repeat; font-size: 0; line-height: 0; color: inherit; text-decoration: none; overflow: hidden; } .nav-logo:hover { color: inherit; } /* ---- Search · currency · Bag ---- */ .nav-actions { justify-self: end; display: flex; align-items: center; gap: 26px; font-family: var(--nagori-font-label); font-weight: 500; font-size: 11px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; } .nav-search, .nav .cart-trigger { appearance: none; background: none; border: 0; padding: 0; margin: 0; min-height: 44px; display: inline-flex; align-items: center; gap: .35em; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; } .nav .cart-count { font: inherit; color: inherit; font-feature-settings: "tnum" 1; } .nav [data-currency], .nav .currency-static, .nav .currency-switch { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; } .nav .currency-switch { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0 2px; min-height: 44px; cursor: pointer; } .nav .currency-switch option { color: var(--ink); background: var(--leaf); } .nav-search:hover, .nav .cart-trigger:hover, .nav .currency-switch:hover, .nav-hamburger:hover { opacity: .6; } .nav-search:focus-visible, .nav .cart-trigger:focus-visible, .nav-hamburger:focus-visible, .nav-logo:focus-visible, .nav .currency-switch:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; } @media (max-width: 720px) { .nav-menu-label, .nav.open .nav-close-label { display: none; } .nav-hamburger { width: 44px; } .nav-logo { --mark-w: 108px; --mark-h: 17px; } .nav-actions { gap: 14px; font-size: 11px; } .nav-search { display: none; } } /* ---- over the film (Leaf on a dark picture, ink on a light one) ---- */ body.home .nav:not(.scrolled):not(.open) { background: transparent; border-bottom-color: transparent; color: var(--leaf); } body.home .nav:not(.scrolled):not(.open)::before { content: ""; position: absolute; inset: 0 0 -96px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(26,26,26,.5), rgba(26,26,26,.22) 55%, rgba(26,26,26,0)); } body.home:has(.l-slide.is-on[data-tone="light"]) .nav:not(.scrolled):not(.open) { color: var(--ink); } body.home:has(.l-slide.is-on[data-tone="light"]) .nav:not(.scrolled):not(.open)::before { background: linear-gradient(to bottom, rgba(246,244,237,.7), rgba(246,244,237,.3) 55%, rgba(246,244,237,0)); } /* ============================================================ The menu — one panel for every screen ============================================================ */ .nav-overlay { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 899; background: var(--leaf); border-top: 1px solid var(--rule); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; display: flex; flex-direction: column; } .nav.open .nav-overlay { opacity: 1; visibility: visible; transition: opacity .3s ease; } .menu-grid { width: 100%; max-width: var(--max); margin: 0 auto; padding: clamp(32px, 6vh, 72px) var(--gut) 32px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; } .menu-col { display: flex; flex-direction: column; } .menu-k { margin: 0 0 14px; font-family: var(--nagori-font-label); font-weight: 500; font-size: 11px; letter-spacing: var(--nagori-track-label); text-transform: uppercase; color: var(--graphite); } .menu-k:not(:first-child) { margin-top: 32px; } .nav-overlay a, .nav-overlay-search { text-decoration: none; color: var(--ink); } .menu-main a { font-family: var(--nagori-font-display); font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.22; letter-spacing: -.01em; } .menu-five a { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); font-family: var(--nagori-font-display); font-weight: 300; font-size: 22px; line-height: 1.2; } .menu-five a:last-child { border-bottom: 1px solid var(--rule); } .menu-five a span { display: inline-flex; align-items: center; font-family: var(--nagori-font-notation); font-size: 11px; letter-spacing: .12em; color: var(--graphite); } .menu-help a, .menu-help .nav-overlay-search { font-family: var(--nagori-font-label); font-weight: 500; font-size: 11px; line-height: 2.6; letter-spacing: var(--nagori-track-label); text-transform: uppercase; } .nav-overlay a:hover, .nav-overlay-search:hover { color: var(--graphite); } /* Search in the menu opens a dialog, so it is a button: an is not a place you can go, and a crawler is told to follow it. The button carries no look of its own — the rules above draw it, and these three lines only undo what a browser gives a