/* ============================================================
   NAGORI — the experience layer
   Loaded last. Removing this one <link> reverts the site to the
   previous restrained build; nothing below is destructive.

   Concept: the archive is lit, the trace is dark.
   Records and specification sit on Kozo. Atmosphere, openings
   and transitions are full-bleed Sumi. That contrast is the
   design language, and it comes from §03's own 70/22 ratio —
   which the previous build never spent.
   ============================================================ */

:root{
  /* the kit's four, plus two working depths derived from Sumi so the
     dark chapters have air in them rather than one flat black */
  --ink-0:#1C1C1A;                      /* Sumi — the ground of every dark chapter */
  --ink-1:#232320;                      /* one step up, for panels inside the dark */
  --ink-2:#2E2E2A;                      /* hairlines on dark */
  --x-paper:#F7F7F5;                    /* Kozo — namespaced; --paper is taken */
  --x-paper-dim:rgba(247,247,245,.60);    /* secondary type on ink */
  --x-paper-faint:rgba(247,247,245,0.48);  /* notation on ink — 4.62:1, AA at small sizes */

  --measure:58ch;
  --gut:clamp(20px,4vw,64px);
  --col:minmax(0,1fr);
}

/* ---------- shell ---------- */
.x-wrap{ max-width:1440px; margin:0 auto; padding-inline:var(--gut); }
.x-grid{ display:grid; grid-template-columns:repeat(12,var(--col)); gap:0 clamp(16px,2vw,28px); }

/* ---------- chapters ---------- */
.x-ch{ position:relative; padding-block:clamp(88px,15vh,180px); background:var(--x-paper); color:var(--ink-0); }
.x-ch--ink{ background:var(--ink-0); color:var(--x-paper); }
.x-ch--ink .x-eyebrow{ color:var(--x-paper-faint); }
.x-ch--ink .x-body{ color:var(--x-paper-dim); }
.x-ch--tight{ padding-block:clamp(72px,12vh,150px); }
.x-ch--flush{ padding-block:0; }

/* ---------- type. The one bend: the opening statement is allowed to be large.
     Everything after it returns to the kit's scale. ---------- */
.x-display{
  font-family:var(--nagori-font-reading); font-weight:300;
  font-size:clamp(1.6rem,2.3vw,2.25rem); line-height:1.24;
  letter-spacing:-.014em; margin:0; text-wrap:balance;
}
.x-statement{
  font-family:var(--nagori-font-reading); font-weight:300;
  font-size:clamp(1.1875rem,1.5vw,1.5rem); line-height:1.34;
  letter-spacing:-.008em; margin:0; text-wrap:balance;
}
.x-lede{
  font-family:var(--nagori-font-reading); font-weight:300;
  font-size:clamp(1rem,1.1vw,1.0625rem); line-height:1.62;
  letter-spacing:0; margin:0; max-width:42ch;
}
.x-body{
  font-family:var(--nagori-font-reading); font-weight:400;
  font-size:1rem; line-height:1.72; margin:0; max-width:var(--measure);
  color:var(--nagori-ash);
}
.x-eyebrow{
  font-family:var(--nagori-font-notation); font-weight:300; font-size:.625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--nagori-ash);
  display:block; margin:0;
}
.x-jp{ font-family:var(--nagori-font-jp); letter-spacing:.5em; font-size:.8125rem; }

/* a quiet link: a rule that grows, never a button */
.x-link{
  font-family:var(--nagori-font-notation); font-weight:400; font-size:.6875rem;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:currentColor; display:inline-block; padding-bottom:.45em; position:relative;
}
.x-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; opacity:.28;
  transform:scaleX(1); transform-origin:left;
  transition:opacity 600ms cubic-bezier(.2,.6,.2,1);
}
.x-link:hover::after{ opacity:1; }

/* ---------- the opening ---------- */
.x-open{
  position:relative; min-height:min(78svh,720px); display:grid; align-items:end;
  background:var(--ink-0); color:var(--x-paper); overflow:hidden; isolation:isolate;
}
.x-open-media{ position:absolute; inset:0; z-index:-1; }
.x-open-media img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.52) saturate(.86) contrast(1.02);
}
.x-open-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(28,28,26,.94) 0%, rgba(28,28,26,.34) 46%, rgba(28,28,26,.72) 100%);
}
.x-open-inner{ padding-block:clamp(52px,12vh,120px); }
.x-open .x-display{ grid-column:2 / span 6; }
.x-open .x-jp{ color:var(--x-paper-faint); margin-bottom:clamp(24px,4vh,44px); display:block; }
.x-open-foot{
  margin-top:clamp(34px,6vh,64px); display:flex; gap:clamp(20px,4vw,52px);
  align-items:baseline; flex-wrap:wrap; color:var(--x-paper-dim);
}

/* ---------- asymmetric editorial spreads ---------- */
.x-offset{ grid-column:2 / span 7; }
.x-offset-r{ grid-column:6 / span 6; }
.x-half-l{ grid-column:1 / span 6; }
.x-half-r{ grid-column:7 / span 6; }
.x-full{ grid-column:1 / -1; }

/* ---------- media ---------- */
.x-media{ position:relative; overflow:hidden; background:var(--ink-1); }
.x-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.x-media--4x5{ aspect-ratio:4/5; }
.x-media--3x2{ aspect-ratio:3/2; }
.x-media--1x1{ aspect-ratio:1/1; }
.x-bleed{ width:100%; }
.x-bleed .x-media{ min-height:clamp(280px,48vh,520px); }
.x-cap{
  font-family:var(--nagori-font-notation); font-weight:300; font-size:.625rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--nagori-ash);
  display:block; margin-top:.9em;
}
.x-ch--ink .x-cap{ color:var(--x-paper-faint); }

/* a line laid into a dark plate */
.x-plate-line{
  position:absolute; left:0; right:0; bottom:0; padding:clamp(28px,5vw,72px);
  color:var(--x-paper); max-width:22ch;
  background:linear-gradient(to top, rgba(28,28,26,.80), rgba(28,28,26,0));
}

/* ---------- the archive index: alternating, asymmetric ---------- */
.x-entry{
  display:grid; grid-template-columns:repeat(12,var(--col));
  gap:clamp(20px,3vw,44px); align-items:center;
  padding-block:clamp(40px,6vh,80px);
  text-decoration:none; color:inherit;
  border-top:1px solid var(--nagori-hairline);
}
.x-entry:first-of-type{ border-top:none; }
.x-entry .x-media{ grid-column:1 / span 4; }
.x-entry-copy{ grid-column:6 / span 5; }
.x-entry:nth-of-type(even) .x-media{ grid-column:9 / span 4; grid-row:1; }
.x-entry:nth-of-type(even) .x-entry-copy{ grid-column:2 / span 5; grid-row:1; }
.x-entry-no{
  font-family:var(--nagori-font-notation); font-size:.6875rem; letter-spacing:.18em;
  color:var(--nagori-ash); font-variant-numeric:tabular-nums; display:block; margin-bottom:1.1em;
}
.x-entry-name{
  font-family:var(--nagori-font-reading); font-weight:300;
  font-size:clamp(1.1875rem,1.4vw,1.4375rem); line-height:1.3; letter-spacing:-.008em;
  margin:0 0 .6em; color:var(--nagori-sumi);
}
.x-entry-line{ font-size:.9375rem; line-height:1.6; color:var(--nagori-ash); margin:0 0 1.4em; max-width:38ch; }
.x-entry-meta{
  font-family:var(--nagori-font-notation); font-weight:300; font-size:.5625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--nagori-ash);
}
.x-entry .x-media img{ transition:opacity 900ms cubic-bezier(.2,.6,.2,1); }
.x-entry:hover .x-media img{ opacity:.82; }

/* ---------- a single line alone ---------- */
.x-solus{ padding-block:clamp(96px,17vh,200px); }
.x-solus .x-statement{ grid-column:2 / span 8; }
.x-solus .interval{ grid-column:2 / span 8; margin:0 0 clamp(28px,4.5vh,50px); }

/* ---------- nav dissolves into the opening ---------- */
body.x-home .nav{ background:transparent; border-bottom:1px solid transparent; }
body.x-home .nav:not(.scrolled) .nav-logo,
body.x-home .nav:not(.scrolled) .nav-links a,
body.x-home .nav:not(.scrolled) .btn-nav,
body.x-home .nav:not(.scrolled) .cart-trigger,
body.x-home .nav:not(.scrolled) .wishlist-trigger,
body.x-home .nav:not(.scrolled) [data-currency],
body.x-home .nav:not(.scrolled) [data-currency] .currency-static,
body.x-home .nav:not(.scrolled) [data-currency] .currency-switch,
body.x-home .nav:not(.scrolled) .cart-count,
body.x-home .nav:not(.scrolled) .wishlist-count{ color:var(--x-paper); }
body.x-home .nav:not(.scrolled) .btn-nav{ border-color:rgba(247,247,245,.42); }
body.x-home .nav:not(.scrolled) .nav-hamburger span{ background:var(--x-paper); }
body.x-home .nav.scrolled{ background:var(--x-paper); border-bottom-color:var(--nagori-hairline); }

/* ---------- responsive: the asymmetry collapses to a single measure ---------- */
@media (max-width:900px){
  .x-open .x-display,
  .x-offset,.x-offset-r,.x-half-l,.x-half-r,
  .x-solus .x-statement{ grid-column:1 / -1; }
  .x-entry{ grid-template-columns:1fr; gap:clamp(18px,4vw,28px); }
  .x-entry .x-media,
  .x-entry-copy,
  .x-entry:nth-of-type(even) .x-media,
  .x-entry:nth-of-type(even) .x-entry-copy{ grid-column:1 / -1; grid-row:auto; }
  .x-ch{ padding-block:clamp(72px,12vh,120px); }
}

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

/* ============================================================
   THE CORRECTION
   §00 — "A record is never erased. It is struck and left
   readable underneath. The cut in the O is that stroke."

   This is the house's own idea and the one thing here that is
   not borrowed. The strike is therefore drawn, not delegated to
   text-decoration: a hairline at the optical centre of the
   x-height, in Ai — the only place the accent carries meaning
   rather than decoration — with the struck text left fully
   legible beneath it.
   ============================================================ */
.struck{
  position:relative; display:inline-block;
  color:var(--nagori-ash);            /* readable, never faded out */
  text-decoration:none;
}
.struck::after{
  content:""; position:absolute;
  left:-.08em; right:-.08em;
  top:54%;                            /* optical centre, not the em box */
  height:1px; background:var(--nagori-ai);
  transform:scaleX(1); transform-origin:left center;
}
.x-ch--ink .struck::after{ background:var(--x-paper-dim); }
.x-ch--ink .struck{ color:var(--x-paper-dim); }

/* a struck row in a register: present, readable, plainly not current */
.reg-struck td, .reg-struck th{ color:var(--nagori-ash); }
.register tbody tr.reg-struck td.reg-name{ color:var(--nagori-ash); }
.register tbody tr.reg-struck td{ color:var(--nagori-ash); }
.reg-struck .reg-no{ position:relative; display:inline-block; color:var(--nagori-ash); }
.reg-struck .reg-no::after{
  content:""; position:absolute; left:-.1em; right:-.1em; top:52%;
  height:1px; background:var(--nagori-ai);
}
.reg-struck img{ filter:grayscale(1) contrast(.92); opacity:.55; }

/* the withdrawn ledger */
.corr{ border-top:1px solid var(--nagori-sumi); }
.corr-row{
  display:grid; grid-template-columns:112px 1fr 152px;
  gap:clamp(16px,3vw,40px); align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--nagori-hairline);
}
.corr-no{
  font-family:var(--nagori-font-notation); font-size:.75rem;
  letter-spacing:.14em; font-variant-numeric:tabular-nums;
  color:var(--nagori-ash); position:relative; display:inline-block;
}
.corr-no::after{
  content:""; position:absolute; left:-.1em; right:-.1em; top:52%;
  height:1px; background:var(--nagori-ai);
}
.corr-name{
  font-family:var(--nagori-font-reading); font-weight:400;
  font-size:1.125rem; color:var(--nagori-ash); line-height:1.35;
}
.corr-note{
  font-family:var(--nagori-font-notation); font-weight:300; font-size:.625rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--nagori-ash);
  text-align:right; line-height:1.9;
}
/* the revision history inside a formula reference */
.rev{ font-variant-numeric:tabular-nums; }
.rev .struck{ margin-right:.35em; }
@media (max-width:700px){
  .corr-row{ grid-template-columns:96px 1fr; row-gap:4px; }
  .corr-note{ grid-column:2; text-align:left; }
}

/* ============================================================
   THE FINAL FRAME
   Not a footer. The last image the reader carries home.

   The sentence is the brand and dominates, in ink, at up to
   90px. 名残 is the signature: enormous, ghosted in Mist — the
   kit's non-text tone — so it reads as a blind deboss in paper
   rather than as printed type. No shadow is used to fake the
   emboss; §03 says depth is hairlines and space, and Mist on
   Kozo at 1.56:1 is exactly the tone a debossed impression has.

   The eye travels diagonally: mark upper right, sentence lower
   left, then down the left edge into silence.
   ============================================================ */
.x-foot{
  position:relative; overflow:hidden;
  background:var(--x-paper); color:var(--nagori-sumi);
  border-top:1px solid var(--nagori-hairline);
  padding:clamp(76px,10vh,120px) 0 clamp(26px,4vh,40px);
  text-align:left;
}
.x-foot-inner{ position:relative; max-width:1240px; margin:0 auto; padding-inline:var(--gut);  display:flow-root; }

/* ── the signature. Ghosted, enormous, upper right. ── */
.x-foot-mark{
  position:absolute; top:-.16em; right:0; z-index:0; pointer-events:none;
  font-family:var(--nagori-font-jp); font-weight:400;
  font-size:clamp(7rem,15vw,13rem);           /* 112 – 208px */
  line-height:.8; letter-spacing:.06em;
  color:var(--nagori-mist);
  margin:0; user-select:none;
}

/* ── the sentence. This is the brand. ── */
.x-foot-line{
  position:relative; z-index:1;
  font-family:var(--nagori-font-reading); font-weight:300;
  font-size:clamp(2.5rem,5.4vw,5.625rem);      /* 40 – 90px */
  line-height:1.06; letter-spacing:-.028em;
  color:var(--nagori-sumi);
  /* must clear the mark: its box is .8 x clamp(10rem,25vw,24rem) tall,
     pulled up by .16em, so the floor here is set above that worst case */
  /* clears the mark: its box is .8 x the font-size, pulled up .16em,
     so at the 15rem ceiling its bottom sits 154px into the footer */
  margin:clamp(180px,21vh,260px) 0 clamp(58px,8vh,96px);
  max-width:15ch;
}

/* ── the house, as a record field ── */
.x-foot-place{ position:relative; z-index:1; margin:0 0 clamp(64px,9vh,104px); }
.x-foot-place .k{
  display:block;
  font-family:var(--nagori-font-notation); font-weight:300; font-size:.5625rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--nagori-ash);
  margin-bottom:1.1em;
}
.x-foot-place .v{
  font-family:var(--nagori-font-reading); font-weight:300; font-size:1.25rem;
  letter-spacing:-.008em; color:var(--nagori-sumi);
}

/* ── correspondence ── */
.x-corr{ position:relative; z-index:1; max-width:34ch; margin:0 0 clamp(72px,11vh,128px); }
.x-corr-title{
  font-family:var(--nagori-font-notation); font-weight:300; font-size:.5625rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--nagori-ash);
  margin:0 0 3.2em;
}
.x-corr-label{
  font-family:var(--nagori-font-reading); font-weight:300; font-size:1.1875rem;
  line-height:1.6; color:var(--nagori-sumi); margin:0 0 1.5em;
}
.x-corr-sub{
  font-family:var(--nagori-font-reading); font-weight:300; font-size:1.1875rem;
  line-height:1.6; color:var(--nagori-ash); margin:0 0 3.6em;
}
.x-corr-form{
  display:flex; align-items:baseline; gap:1.6em;
  border-bottom:1px solid var(--nagori-hairline); padding-bottom:.9em; max-width:30ch;
}
.x-corr-form input{
  flex:1; min-width:0; border:none; background:none; padding:0; outline:none;
  font-family:var(--nagori-font-reading); font-size:1rem; color:var(--nagori-sumi);
}
.x-corr-form input::placeholder{ color:var(--nagori-ash); }
.x-corr-form:focus-within{ border-bottom-color:var(--nagori-ai); }
.x-corr-form button{
  border:none; background:none; padding:0; cursor:pointer; white-space:nowrap;
  font-family:var(--nagori-font-notation); font-size:.5625rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--nagori-ash);
  transition:color var(--nagori-motion) ease-out;
}
.x-corr-form button:hover{ color:var(--nagori-sumi); }
.x-corr-msg{
  font-family:var(--nagori-font-notation); font-size:.5rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--nagori-ash); margin:2em 0 0; min-height:1em;
}

/* ── everything else, behind one word ── */
.x-index{ position:relative; z-index:1; }
.x-index summary{
  list-style:none; cursor:pointer; display:inline-block;
  font-family:var(--nagori-font-notation); font-weight:300; font-size:.5625rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--nagori-ash);
}
.x-index summary::-webkit-details-marker{ display:none; }
.x-index summary:hover,.x-index[open] summary{ color:var(--nagori-sumi); }
.x-index[open] summary{ margin-bottom:3em; }
.x-index-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1.1em 2em; padding-bottom:1.4em; max-width:820px;
}
.x-index-grid a{
  font-family:var(--nagori-font-notation); font-weight:300; font-size:.5625rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--nagori-ash); text-decoration:none;
}
.x-index-grid a:hover{ color:var(--nagori-sumi); }

/* Legal is not editorial. It sits below a hairline, smaller and fainter,
   so the house's own pages and the terms of sale never read as peers. */
.x-index-legal{
  margin-top:2.2em; padding-top:1.4em; max-width:820px;
  border-top:1px solid var(--nagori-hairline);
  display:flex; flex-wrap:wrap; gap:.4em 1.6em;
}
.x-index-legal a{
  font-family:var(--nagori-font-notation); font-weight:300; font-size:.5rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--nagori-ash); opacity:.62; text-decoration:none;
}
.x-index-legal a:hover{ opacity:1; color:var(--nagori-sumi); }
.x-foot-legal{
  position:relative; z-index:1; margin:clamp(48px,7vh,80px) 0 0;
  font-family:var(--nagori-font-notation); font-weight:300; font-size:.5rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--nagori-ash); opacity:.5;
}

@media (max-width:820px){
  .x-foot-mark{ position:static; font-size:clamp(7rem,34vw,12rem); text-align:right; margin:0 0 -.06em; }
  .x-foot-line{ margin-top:clamp(48px,9vh,90px); font-size:clamp(2.125rem,8.4vw,3.25rem); }
}