/* Nape: the page is graded like a skin fade, oxblood at the top to bone at the foot */
@font-face { font-family: "Alumni Sans"; src: url("/assets/fonts/specimen/alumni-sans-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Alumni Sans"; src: url("/assets/fonts/specimen/alumni-sans-var-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: Gantari; src: url("/assets/fonts/specimen/gantari-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@property --np-p { syntax: "<number>"; inherits: true; initial-value: 0; }

body.spec-nape { margin: 0; background: #2B1618; }
.spec-nape .np-page {
  --np-ox: #2B1618; --np-bone: #F1E9DE; --np-brass: #E4D3B0; --np-red: #C8412F;
  --np-steel: #8F918E; --np-steel-d: #5F615E; --np-g3: #3A1E1D; --np-g2: #56302B;
  --np-g1a: #7A4E40; --np-g1b: #A8826B; --np-gh: #CDB595; --np-cape: #170C0D;
  --np-disp: "Alumni Sans", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --np-text: Gantari, system-ui, sans-serif;
  --np-f-name: min(clamp(8rem, 26vw, 26rem), 52svh);
  --np-f-num: clamp(18rem, 72vh, 56rem);
  --np-f-h2: clamp(3.25rem, 8vw, 9rem);
  --np-f-svc: clamp(2.75rem, 9vw, 8.5rem);
  --np-f-note: clamp(1.25rem, 1.8vw, 1.625rem);
  --np-f-lede: clamp(1.25rem, 1.7vw, 1.5rem);
  --np-f-body: clamp(1rem, .95rem + .2vw, 1.0625rem);
  --np-m: clamp(16px, 4.5vw, 72px);
  --np-pad: max(var(--np-m), calc(50vw - 840px));
  --np-gut: 24px;
  --np-navh: 56px;
  --np-fh: max(520px, calc(100svh - var(--bar-h, 40px) - var(--np-navh)));
  --np-neck: .86; --np-capev: .93;
  --np-colw: clamp(340px, 31vw, 470px);
  --np-ink: var(--np-bone);
  position: relative;
  color: var(--np-ink);
  font: 380 var(--np-f-body)/1.55 var(--np-text);
  background: var(--np-ground, linear-gradient(180deg, #2B1618 0%, #2B1618 16%, #3A1E1D 27%, #56302B 40%, #7A4E40 53.5%, #A8826B 57%, #CDB595 64%, #E4D3B0 76%, #F1E9DE 84%, #F1E9DE 100%));
  -webkit-font-smoothing: antialiased;
}
.spec-nape .np-page *, .spec-nape .np-page *::before, .spec-nape .np-page *::after { box-sizing: border-box; }
.spec-nape .np-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.spec-nape .np-page [id] { scroll-margin-top: calc(var(--bar-h, 40px) + var(--np-navh)); }
.spec-nape .np-page :focus-visible { outline: 2px solid var(--np-red); outline-offset: 3px; }
:where(.spec-nape .np-page) a { color: inherit; }

/* ── the fade in type: every letter carries its own weight ─────────────────────────────── */
.np-gr { --hi: 880; --lo: 480; }
.np-gr .np-w { white-space: nowrap; }
.np-gr .np-w > span {
  --wg: clamp(100, calc(var(--hi) - (var(--hi) - var(--lo)) * var(--i) / max(1, var(--n) - 1) - var(--np-p, 0) * 140 + var(--np-hv, 0)), 900);
  font-weight: var(--wg);
  font-variation-settings: "wght" var(--wg);
  transition: font-weight .32s cubic-bezier(.2, .7, .1, 1), font-variation-settings .32s cubic-bezier(.2, .7, .1, 1);
}
@supports not (font-variation-settings: "wght" 400) {
  .np-gr .np-w > span { font-weight: 800; }
  .np-gr .np-w:nth-child(n+2) > span, .np-gr .np-w > span:nth-child(n+3) { font-weight: 500; }
  .np-gr .np-w:last-child > span:last-child { font-weight: 200; }
}

/* ── nav ─────────────────────────────────────────────────────────────────────────────────── */
.np-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60;
  display: flex; align-items: center; gap: 32px;
  height: var(--np-navh); padding: 0 var(--np-m);
  background: var(--np-navbg, #2B1618); color: var(--np-navink, #F1E9DE);
  border-bottom: 1px solid color-mix(in srgb, var(--np-steel) 55%, transparent);
  font: 540 .9375rem/1 var(--np-text); letter-spacing: .02em;
}
.np-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.np-brand .np-mark { flex: none; display: block; }
.np-brand-w { font: 700 1.875rem/1 var(--np-disp); text-transform: uppercase; letter-spacing: .02em; transform: translateY(1px); }
.np-links { display: flex; gap: 28px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.np-links a { text-decoration: none; padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s; }
.np-links a:hover { background-size: 100% 1px; }
.np-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 2px; text-decoration: none; background: var(--np-bone); color: var(--np-ox); font-weight: 600; transition: background .3s, color .3s; }
.np-nav.np-light .np-cta { background: var(--np-ox); color: var(--np-bone); }
.np-cta-s { display: none; }
@media (max-width: 719px) {
  .spec-nape .np-page { --np-navh: 48px; }
  .np-nav { gap: 12px; }
  .np-links { display: none; }
  .np-cta { margin-left: auto; height: 34px; padding: 0 14px; }
  .np-cta-l { display: none; }
  .np-cta-s { display: inline; }
}

/* ── hero: the field, the name on the cut line, the column in the shadow side ─────────────── */
.np-hero {
  position: relative; display: grid; height: var(--np-fh); padding: 0 var(--np-m);
  grid-template-columns: minmax(0, 1fr) var(--np-colw);
  grid-template-rows: minmax(0, 1fr) auto auto calc(var(--np-fh) * (1 - var(--np-capev)) + 40px);
  column-gap: var(--np-gut); color: var(--np-bone);
}
.np-stage { display: contents; }
.np-field {
  grid-area: 1 / 1 / -1 / -1; margin: 0 calc(-1 * var(--np-m));
  position: relative; overflow: hidden; background: var(--np-cape);
  touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.np-field:focus-visible { outline-offset: -4px; }
.np-poster, .np-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.np-poster img { object-fit: cover; object-position: 50% 72%; transition: opacity .5s; }
.np-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.np-field.np-live .np-poster img { opacity: 0; }
.np-field.np-live { cursor: none; }
.np-field:not(.np-live) .np-cutline { display: none; }
.np-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, rgb(23 12 13 / .62) 0%, rgb(23 12 13 / .3) 22%, rgb(23 12 13 / 0) 42%); }
.np-cutline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.np-cutline polyline { fill: none; stroke: var(--np-red); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgb(200 65 47 / .55)); }
.np-clipper { position: absolute; left: 0; top: 0; width: 160px; height: 200px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .2s; overflow: visible; }
.np-field.np-live.np-hov .np-clipper { opacity: 1; }
.np-teeth line { stroke: var(--np-steel); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.np-cbody { fill: rgb(23 12 13 / .72); stroke: var(--np-steel); stroke-width: 1; vector-effect: non-scaling-stroke; }
.np-blade { fill: #b9bbb7; stroke: #e9e6df; stroke-width: .6; vector-effect: non-scaling-stroke; }
.np-cdot { fill: var(--np-red); }

#np-name {
  position: absolute; z-index: 3; left: var(--np-m); top: calc(var(--np-fh) * var(--np-cut, .62));
  margin: 0; transform: translateY(-.72em); pointer-events: none;
  font: 400 var(--np-f-name)/.78 var(--np-disp); letter-spacing: -.005em; text-transform: uppercase;
  color: var(--np-bone); filter: drop-shadow(0 0 24px rgb(23 12 13 / .45));
}
#np-name .np-gr { --hi: 900; --lo: 100; display: block; }
.np-tag {
  position: absolute; z-index: 3; right: 14px; top: 28px; margin: 0;
  writing-mode: vertical-rl; font: 600 11px/1 var(--np-text); letter-spacing: .16em; text-transform: uppercase;
  color: var(--np-brass); opacity: .85; pointer-events: none;
}
.np-side { grid-area: 2 / 2; position: relative; z-index: 3; padding-bottom: 24px; }
.np-lede { margin: 0 0 16px; font: 340 var(--np-f-lede)/1.35 var(--np-text); letter-spacing: -.005em; max-width: 26ch; text-wrap: balance; }
.np-small { margin: 0 0 24px; max-width: 36ch; color: color-mix(in srgb, var(--np-bone) 86%, var(--np-ox)); }
.np-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.np-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer; text-decoration: none;
  font: 540 1rem/1 var(--np-text); letter-spacing: .02em;
  background: var(--np-ox); color: var(--np-bone);
}
.np-hero .np-book-b { background: var(--np-brass); color: var(--np-ox); }
.np-btn.np-ghost { background: transparent; color: inherit; border-color: currentColor; }
.np-hero .np-pass2 { display: none; }

.np-tray { grid-area: 3 / 2; position: relative; z-index: 3; display: none; }
.np-glok .np-tray { display: block; }
.np-guards-r { display: flex; gap: 6px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.np-guards-r label {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 48px; height: 56px; border-radius: 2px; cursor: pointer;
  background: rgb(23 12 13 / .6); border: 1px solid color-mix(in srgb, var(--np-steel) 45%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.np-guards-r b { font: var(--w) 1.75rem/.8 var(--np-disp); }
.np-guards-r label span { font: 600 .625rem/1 var(--np-text); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--np-bone) 78%, transparent); white-space: nowrap; }
.np-guards-r input:checked + label { border-color: var(--np-steel); background: rgb(23 12 13 / .82); }
.np-guards-r input:checked + label::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--np-red); }
.np-guards-r input:focus-visible + label { outline: 2px solid var(--np-red); outline-offset: 3px; }
.np-guards-r label:hover { border-color: var(--np-steel); }
.np-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.np-tb { white-space: nowrap; }
.np-tb {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: 2px; cursor: pointer;
  font: 540 .9375rem/1 var(--np-text); letter-spacing: .02em; color: var(--np-bone);
  background: rgb(23 12 13 / .6); border: 1px solid color-mix(in srgb, var(--np-steel) 45%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.np-tb:hover { border-color: var(--np-steel); }
.np-tb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.np-tb.np-grow { background: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 8px; text-decoration: underline; text-decoration-color: var(--np-steel); text-underline-offset: 4px; }
.np-hint { margin: 12px 0 0; font: italic 380 var(--np-f-note)/1.15 var(--np-disp); letter-spacing: .01em; color: var(--np-brass); }

@media (max-width: 1180px) and (min-width: 701px) {
  .spec-nape .np-page { --np-colw: clamp(300px, 36vw, 420px); }
  .np-small { max-width: 30ch; }
}
/* short landscape screens: keep the column clear of the nav */
@media (min-width: 701px) and (max-height: 800px) {
  .np-lede { margin-bottom: 8px; }
  .np-small { margin-bottom: 16px; }
  .np-hint { display: none; }
}

/* phones: the blade sign */
@media (max-width: 700px) {
  .spec-nape .np-page { --np-fh: max(420px, calc(100svh - var(--bar-h, 40px) - var(--np-navh))); --np-neck: .84; --np-capev: .91; }
  .np-hero { display: block; height: auto; padding: 0; }
  .np-stage { display: block; position: relative; height: var(--np-fh); }
  .np-field { position: absolute; inset: 0; margin: 0; }
  .np-field::after { background: linear-gradient(90deg, rgb(23 12 13 / .5) 0%, rgb(23 12 13 / 0) 45%); }
  #np-name {
    left: 12px; top: var(--np-ntop, 20px); transform: none;
    writing-mode: vertical-rl; font-size: min(56vw, 40svh); line-height: .8;
  }
  .np-tag { display: none; }
  .np-tray { position: absolute; left: 16px; right: 16px; top: calc(var(--np-fh) * var(--np-capev)); height: calc(var(--np-fh) * (1 - var(--np-capev))); }
  .np-glok .np-tray { display: flex; align-items: center; }
  .np-guards-r { gap: 5px; margin: 0; }
  .np-guards-r label { width: 44px; height: 44px; gap: 2px; }
  .np-guards-r b { font-size: 1.375rem; }
  .np-guards-r label span { font-size: .5625rem; letter-spacing: .02em; }
  .np-tools { margin-left: 5px; }
  .np-tools .np-pass-b, .np-tools .np-grow { display: none; }
  .np-tb { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .np-tbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .np-hint { display: none; }
  .np-side { padding: 24px 16px 40px; }
  .np-lede { font-size: 1.375rem; }
  .np-acts .np-btn { flex: 1 1 auto; }
  .np-hero .np-book-b { flex: 3 1 auto; }
  .np-glok ~ .np-side .np-pass2, .np-hero.np-glok .np-pass2 { display: inline-flex; }
}
@media (max-width: 360px) {
  .np-guards-r { gap: 4px; }
  .np-guards-r label { width: 40px; height: 40px; }
  .np-tray { flex-wrap: wrap; align-content: center; }
}
@media (max-width: 700px) and (max-height: 600px) {
  .spec-nape .np-page { --np-neck: .82; --np-capev: .9; }
  .np-small { display: none; }
  .np-hero .np-pass2 { display: none !important; }
}

/* ── the sections below: stations of the fade ─────────────────────────────────────────── */
.np-sec {
  position: relative; overflow: clip;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--np-gut); align-content: start;
  padding: clamp(96px, 14vh, 192px) var(--np-pad) clamp(64px, 10vh, 128px);
}
:where(.np-sec) > * { grid-column: 3 / -1; min-width: 0; }
.np-shop    { --hi: 880; --lo: 480; --dt: .7;  --nw: 900; --acc: var(--np-brass); --rl: var(--np-steel); }
.np-numbers { --hi: 820; --lo: 420; --dt: .55; --nw: 740; --acc: var(--np-brass); --rl: var(--np-steel); }
.np-cuts    { --hi: 720; --lo: 320; --dt: .4;  --nw: 580; --acc: var(--np-brass); --rl: var(--np-steel); }
.np-blend   { --hi: 560; --lo: 220; --dt: .25; --nw: 420; --acc: var(--np-brass); --rl: var(--np-bone); }
.np-shave, .np-back { --hi: 440; --lo: 160; --dt: .1; --nw: 260; --acc: #4E3A34; --rl: var(--np-steel-d); color: var(--np-ox); }
.np-mirror, .np-book { --hi: 300; --lo: 100; --dt: 0; --nw: 100; --acc: var(--np-steel-d); --rl: var(--np-steel-d); color: var(--np-ox); }
.np-sec .np-gr { --hi: inherit; --lo: inherit; }

/* the cropped guard numeral, at that guard's weight */
.np-num {
  position: absolute; left: calc(var(--np-pad) - .05em); top: -.16em; grid-column: auto; z-index: 0;
  font: var(--nw) var(--np-f-num)/.72 var(--np-disp); color: var(--acc); opacity: .11;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.np-shave .np-num, .np-mirror .np-num { color: var(--np-ox); opacity: .08; }
.np-st {
  position: relative; display: flex; justify-content: space-between; gap: 16px; margin: 0 0 8px;
  font: 600 .75rem/1.33 var(--np-text); letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--acc);
}
.np-rule { position: relative; display: block; width: 100%; height: 48px; margin: 0 0 48px; overflow: visible; }
.np-rule path { fill: none; stroke: var(--rl); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.np-h2 { position: relative; margin: 0 0 32px; font: 400 var(--np-f-h2)/.84 var(--np-disp); text-transform: uppercase; text-wrap: balance; }
.np-h3 { margin: 0 0 8px; font: 600 .75rem/1.33 var(--np-text); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.np-lede2 { position: relative; margin: 0 0 64px; max-width: 40ch; font: 340 var(--np-f-lede)/1.35 var(--np-text); letter-spacing: -.005em; text-wrap: pretty; }
.np-photo { position: relative; margin: 0; }
.np-photo picture { position: relative; display: block; }
.np-photo img { display: block; width: 100%; height: auto; }
.np-photo picture::after { content: ""; position: absolute; inset: 0; background: #4A1D19; mix-blend-mode: color; opacity: calc(var(--dt) * .55); pointer-events: none; }

/* 4 · four chairs */
.np-shop-ph { grid-column: 1 / -1; margin: 24px calc(-1 * var(--np-pad)) 64px; }
.np-shop-ph img { aspect-ratio: 16 / 9; max-height: 88vh; object-fit: cover; object-position: 60% 60%; }
.np-rule-ph { position: absolute; z-index: 1; left: 0; top: -24px; margin: 0; }
.np-rule-ph path { stroke: var(--np-brass); }
.np-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--np-gut); }
.np-col { padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--np-steel) 70%, transparent); }
.np-col p { margin: 0; font-size: 1.125rem; line-height: 1.5; max-width: 26ch; }
.np-hours p { font-size: var(--np-f-body); color: color-mix(in srgb, var(--np-bone) 86%, var(--np-ox)); }

/* 3 · the numbers: a ruler of guards at full size */
.np-ruler { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 8px; }
.np-fig {
  display: grid; justify-items: start; padding: 0 12px 0 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
  font: inherit; -webkit-tap-highlight-color: transparent;
}
.np-fig b { display: block; margin: 0 0 16px; font: var(--w) clamp(4.5rem, 12vw, 12rem)/.8 var(--np-disp); transition: color .2s; }
.np-stub { display: block; width: 100%; height: 140px; border-bottom: 1px solid var(--np-steel); overflow: visible; }
.np-stub path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: .9; }
.np-stub circle { fill: currentColor; }
.np-fig > span { position: relative; margin-top: 12px; padding-bottom: 6px; font: 600 .75rem/1.33 var(--np-text); letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--np-brass); }
.np-fig:hover b, .np-fig:focus-visible b { color: var(--np-brass); }
.np-fig[aria-pressed="true"] > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--np-red); }
.np-note { min-height: 2.4em; margin: 16px 0 0; max-width: 46ch; font: italic 380 var(--np-f-note)/1.15 var(--np-disp); letter-spacing: .01em; color: var(--np-brass); }

/* 2 · cuts: the menu as a poster column */
.np-menu { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--np-gut); }
.np-rows { grid-column: 1 / 7; list-style: none; margin: 0; padding: 0; }
.np-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); column-gap: 32px; align-content: start;
  min-height: clamp(300px, 46vh, 500px); padding: 24px 0 48px; border-top: 1px solid color-mix(in srgb, var(--np-steel) 60%, transparent);
}
.np-row > * { grid-column: 1; }
.np-svc { grid-column: 1 / -1; margin: 0 0 24px; font: 400 var(--np-f-svc)/.82 var(--np-disp); text-transform: uppercase; }
.np-row:hover, .np-row:focus-within { --np-hv: 120; }
.np-what { margin: 0; max-width: 36ch; font-size: 1.125rem; line-height: 1.5; }
.np-meta { grid-column: 2; grid-row: 2 / span 3; align-self: start; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 4px 0 0; align-items: baseline; }
.np-meta dt { white-space: nowrap; font: 600 .75rem/1.33 var(--np-text); letter-spacing: .1em; text-transform: uppercase; color: var(--np-brass); }
.np-meta dd { margin: 0; white-space: nowrap; font: 540 1.0625rem/1.2 var(--np-text); font-variant-numeric: tabular-nums; }
.np-aside { margin: 16px 0 0; max-width: 34ch; font: italic 380 var(--np-f-note)/1.15 var(--np-disp); letter-spacing: .01em; color: var(--np-brass); }
.np-rowb { display: inline-block; justify-self: start; margin-top: 24px; padding: 8px 0; font: 540 .9375rem/1 var(--np-text); letter-spacing: .02em; text-decoration: underline; text-decoration-color: var(--np-steel); text-underline-offset: 5px; }
.np-rowb:hover { text-decoration-color: currentColor; }
.np-cuts-ph { grid-column: 7 / -1; }
.np-cuts-ph picture { position: sticky; top: calc(var(--bar-h, 40px) + 88px); }
.np-cuts-ph img { aspect-ratio: 2 / 3; max-height: calc(100vh - var(--bar-h, 40px) - 120px); object-fit: cover; object-position: 50% 40%; }

/* 1 · the blend: the ink flips here */
.np-blend { min-height: max(560px, 100svh); grid-template-rows: auto auto 1fr auto; }
.np-blend .np-num {
  left: 50%; top: 50%; transform: translate(-50%, -52%); font-size: max(760px, 128svh); line-height: .72;
  color: transparent; background: linear-gradient(180deg, var(--np-bone) 0 50%, var(--np-ox) 50% 100%); -webkit-background-clip: text; background-clip: text; opacity: .13;
}
.np-blend .np-st { color: var(--np-brass); }
.np-held { position: relative; margin: 16px 0 0; max-width: 24ch; font: 340 clamp(1.5rem, 2.4vw, 2.25rem)/1.25 var(--np-text); letter-spacing: -.01em; color: var(--np-bone); }
.np-rule-big { position: absolute; left: var(--np-pad); width: calc(100% - 2 * var(--np-pad)); top: calc(50% - 60px); height: 120px; margin: 0; }
.np-rule-big path { stroke-width: 3.75; stroke: var(--np-bone); stroke-linecap: round; }
.np-blend .np-h2 { grid-row: 4; margin: 0; color: var(--np-ox); }

/* ½ · the shave, on a time rule */
.np-towel-ph { grid-column: 1 / 6; grid-row: 5 / span 2; align-self: start; margin-left: calc(-1 * var(--np-pad)); }
.np-towel-ph img { aspect-ratio: 2 / 3; object-fit: cover; }
.np-steps { grid-column: 7 / -1; grid-row: 5; list-style: none; margin: 0; padding: 0 0 0 64px; }
.np-steps li { position: relative; min-height: calc(var(--m) * 17px); padding: 0 0 32px 32px; }
.np-steps li::before { content: ""; position: absolute; left: -9px; top: 0; width: 18px; height: 1px; background: var(--np-ox); }
.np-steps li::after { content: ""; position: absolute; left: -1px; top: 4px; bottom: 3px; width: 3px; background: var(--np-ox); }
.np-steps li:last-child::before { box-shadow: 0 0 0 0 var(--np-ox); }
.np-at { position: absolute; left: -72px; top: -.55em; width: 52px; text-align: right; font: 600 .75rem/1.33 var(--np-text); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--acc); }
.np-at.np-end { top: auto; bottom: -.6em; }
.np-steps li:last-child { padding-bottom: 40px; }
.np-steps li:last-child .np-end::after { content: ""; position: absolute; right: -29px; top: 50%; width: 18px; height: 1px; background: var(--np-ox); }
.np-step { margin: -6px 0 6px; font: 400 clamp(2.25rem, 3.2vw, 3.25rem)/.86 var(--np-disp); text-transform: uppercase; }
.np-steps li:nth-child(1) .np-step { font-weight: 720; } .np-steps li:nth-child(2) .np-step { font-weight: 600; }
.np-steps li:nth-child(3) .np-step { font-weight: 480; } .np-steps li:nth-child(4) .np-step { font-weight: 360; }
.np-steps li:nth-child(5) .np-step { font-weight: 250; }
.np-min { margin: 0 0 6px; font: 600 .75rem/1.33 var(--np-text); letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--acc); }
.np-steps p:not(.np-min) { margin: 0; max-width: 34ch; }
.np-razor-ph { grid-column: 7 / -1; grid-row: 6; margin-top: 48px; }
.np-razor-ph img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ½ → 0 · when to come back: a strip of weeks */
.np-back { padding-top: clamp(64px, 10vh, 128px); }
.np-strip { --lab: minmax(9rem, 15rem); margin: 0 0 24px; }
.np-wk { display: grid; grid-template-columns: var(--lab) repeat(8, minmax(0, 1fr)); margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--np-ox); font: 600 .75rem/1.33 var(--np-text); letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--acc); }
.np-wk span:not(:first-child) { text-align: right; padding-right: 2px; }
.np-weeks { list-style: none; margin: 0; padding: 0; }
.np-weeks li { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0; align-items: center; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--np-steel-d) 45%, transparent); }
.np-weeks b { grid-column: 1; font: var(--w) 2.25rem/.9 var(--np-disp); text-transform: uppercase; }
.np-every { grid-column: 1; font-size: .9375rem; color: color-mix(in srgb, var(--np-ox) 82%, transparent); }
.np-yourtag { margin-left: 8px; font: italic 400 1.125rem/1 var(--np-disp); letter-spacing: .01em; color: var(--np-ox); text-transform: none; }
.np-bar { grid-column: 2; grid-row: 1 / span 2; position: relative; align-self: stretch; min-height: 32px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), color-mix(in srgb, var(--np-steel-d) 30%, transparent) calc(12.5% - 1px) 12.5%); }
.np-bar::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(var(--a) / 8 * 100%); border-top: 1px dashed color-mix(in srgb, var(--np-ox) 55%, transparent); }
.np-bar::after {
  content: ""; position: absolute; top: calc(50% - 8px); height: 16px; left: calc(var(--a) / 8 * 100% - 1px); width: calc((var(--b) - var(--a)) / 8 * 100% + 2px);
  background: linear-gradient(var(--np-ox), var(--np-ox)) 0 0 / 2px 100% no-repeat, linear-gradient(var(--np-ox), var(--np-ox)) 100% 0 / 2px 100% no-repeat, linear-gradient(var(--np-ox), var(--np-ox)) 0 50% / 100% 3px no-repeat;
}
.np-cap { margin: 0; font: italic 380 var(--np-f-note)/1.15 var(--np-disp); color: var(--np-ox); }

/* 0 · the hand mirror */
.np-hand { grid-column: 3 / 7; grid-row: 3; position: relative; width: 100%; max-width: 480px; aspect-ratio: 480 / 760; justify-self: center; }
.np-glass { position: absolute; left: 8.333%; top: 2.105%; width: 83.333%; height: 68.421%; border-radius: 50%; overflow: hidden; background: var(--np-cape); }
.np-glass-p, .np-glass-p img, .np-glass-c { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.np-glass-p img { object-fit: cover; object-position: 50% 78%; transform: scaleX(-1); }
.np-glass-c { opacity: 0; transition: opacity .4s; }
.np-glass.np-drawn .np-glass-c { opacity: 1; }
.np-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 24px rgb(43 22 24 / .18)); }
.np-mtext { grid-column: 8 / -1; grid-row: 3; align-self: center; }
.np-verdict { position: relative; margin: 0 0 24px; max-width: 30ch; font: 340 clamp(1.375rem, 2vw, 1.875rem)/1.3 var(--np-text); letter-spacing: -.01em; }
.np-mnote { margin: 0 0 32px; max-width: 40ch; }
.np-mirror .np-btn.np-ghost, .np-book .np-btn.np-ghost { color: var(--np-ox); }

/* 0 · book a chair */
.np-book { padding-top: clamp(64px, 10vh, 128px); }
.np-form { grid-column: 3 / 9; grid-row: 4; display: grid; gap: 24px; align-content: start; }
.np-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--np-gut); }
.np-field-r { display: grid; gap: 8px; margin: 0; align-content: end; }
.np-fl { font: 600 .75rem/1.33 var(--np-text); letter-spacing: .1em; text-transform: uppercase; color: var(--np-ox); padding: 0; }
.np-opt { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--np-steel-d); }
.np-in { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--np-steel-d); border-radius: 2px; background: rgb(255 255 255 / .28); color: var(--np-ox); font: 400 1rem/1 var(--np-text); }
.np-in:focus-visible { outline: 2px solid var(--np-red); outline-offset: 3px; }
select.np-in { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: rgb(255 255 255 / .28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232B1618' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; }
.np-cutrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); gap: var(--np-gut); align-items: end; }
.np-rule-thumb { height: 48px; margin: 0; border: 1px solid var(--np-steel-d); border-radius: 2px; overflow: hidden; }
.np-rule-thumb path { stroke: var(--np-ox); }
.np-fs { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.np-fs legend { margin-bottom: 8px; }
.np-days { display: flex; flex-wrap: wrap; gap: 8px; }
.np-chip { position: relative; display: inline-flex; }
.np-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.np-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--np-steel-d); border-radius: 2px; font: 500 .9375rem/1.2 var(--np-text); font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
.np-chip:hover span { border-color: var(--np-ox); }
.np-chip input:checked + span { background: var(--np-ox); color: var(--np-bone); border-color: var(--np-ox); }
.np-chip input:focus-visible + span { outline: 2px solid var(--np-red); outline-offset: 3px; }
.np-sendrow { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.np-status { min-height: 1.55em; margin: 0; font-weight: 500; }
.np-yours { grid-column: 10 / -1; grid-row: 4; align-self: start; position: sticky; top: calc(var(--bar-h, 40px) + 88px); padding-top: 16px; border-top: 1px solid var(--np-ox); }
.np-yours .np-h3 { color: var(--np-steel-d); }
.np-rule-card { height: 72px; margin: 8px 0 16px; }
.np-rule-card path { stroke: var(--np-ox); stroke-width: 1.5; }
.np-yours-t { margin: 0 0 40px; font: 340 var(--np-f-lede)/1.35 var(--np-text); }
.np-yours p { margin-top: 0; }

/* footer: the page ends in hairline */
.np-foot { color: var(--np-ox); padding: 64px var(--np-pad) 0; overflow: clip; }
.np-foot-row { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: center; padding-top: 24px; border-top: 1px solid var(--np-steel-d); }
.np-foot-row p { margin: 0; font-size: .9375rem; }
.np-foot-row .np-brand { margin-right: auto; }
.np-bigname { margin: 40px 0 0; padding-bottom: 16px; font: 100 min(44vw, 64vh)/.74 var(--np-disp); text-transform: uppercase; color: var(--np-brass); letter-spacing: -.01em; white-space: nowrap; }
.np-bigname .np-gr { --hi: 100; --lo: 100; }

@media (max-width: 1180px) {
  :where(.np-sec) > * { grid-column: 2 / -1; }
  .np-rows { grid-column: 1 / 7; }
  .np-row { display: block; min-height: clamp(280px, 40vh, 420px); }
  .np-meta { margin-top: 16px; }
  .np-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .np-hand { grid-column: 2 / 7; }
  .np-mtext { grid-column: 8 / -1; }
  .np-form { grid-column: 2 / 9; }
  .np-yours { grid-column: 9 / -1; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .np-rows { grid-column: 1 / -1; }
  .np-cuts-ph { grid-column: 1 / -1; grid-row: 1; margin-bottom: 32px; }
  .np-cuts-ph picture { position: static; }
  .np-cuts-ph img { aspect-ratio: 16 / 10; max-height: none; object-position: 50% 45%; }
  .np-form, .np-yours { grid-column: 2 / -1; }
  .np-yours { grid-row: 3; position: static; margin-bottom: 40px; }
  .np-yours-t { margin-bottom: 16px; }
}
@media (max-width: 700px) {
  .np-sec { display: flex; flex-direction: column; padding: 96px 16px 64px; }
  .np-back, .np-book { padding-top: 64px; }
  .np-num { left: 8px; }
  .np-rule { margin-bottom: 32px; }
  .np-lede2 { margin-bottom: 40px; }
  .np-shop-ph { margin: 16px -16px 48px; }
  .np-shop-ph img { aspect-ratio: 4 / 5; max-height: none; object-position: 70% 60%; }
  .np-cols { grid-template-columns: 1fr; gap: 24px; }
  .np-ruler { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .np-fig { min-height: 44px; }
  .np-fig b { font-size: clamp(3.5rem, 18vw, 5rem); margin-bottom: 8px; }
  .np-stub { height: 140px; }
  .np-menu { display: flex; flex-direction: column; }
  .np-cuts-ph { order: -1; margin: 0 -16px 32px; }
  .np-cuts-ph picture { position: static; }
  .np-cuts-ph img { aspect-ratio: 4 / 5; max-height: none; }
  .np-row { display: block; min-height: 0; padding: 24px 0 40px; }
  .np-svc { font-size: 13vw; margin-bottom: 16px; }
  .np-meta { margin-top: 16px; }
  .np-blend { justify-content: space-between; }
  .np-blend .np-h2 { margin-top: auto; }
  .np-held { font-size: 1.5rem; margin-bottom: 0; }
  .np-towel-ph { margin: 0 -16px 48px; }
  .np-towel-ph img { aspect-ratio: 4 / 5; }
  .np-steps { padding-left: 48px; }
  .np-steps li { min-height: calc(var(--m) * 13px); padding-left: 24px; }
  .np-at { left: -60px; width: 40px; }
  .np-razor-ph { margin: 24px -16px 0; }
  .np-razor-ph img { aspect-ratio: 4 / 3; }
  .np-strip { --lab: 0; }
  .np-wk { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .np-wk span:first-child { display: none; }
  .np-weeks li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .np-weeks b { grid-row: 1; font-size: 2rem; }
  .np-every { grid-column: 2; grid-row: 1; text-align: right; }
  .np-bar { grid-column: 1 / -1; grid-row: 2; min-height: 28px; }
  .np-hand { width: 70vw; max-width: 340px; align-self: center; margin: 0 0 40px; }
  .np-mtext { align-self: stretch; }
  .np-acts .np-btn { flex: 1 1 auto; }
  .np-two, .np-cutrow { grid-template-columns: 1fr; }
  .np-rule-thumb { display: none; }
  .np-yours { order: 3; position: static; margin-bottom: 40px; }
  .np-yours-t { margin-bottom: 16px; }
  .np-form { order: 4; }
  .np-foot { padding: 48px 16px 0; }
  .np-foot-row { gap: 8px 24px; }
  .np-foot-row .np-brand { width: 100%; }
}

/* ── motion: everything enters upward, straight, once; below the hero, weight is the motion ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .np-sec .np-gr { animation: np-thin linear both; animation-timeline: view(); animation-range: entry 20% exit 80%; }
    .np-rv { animation: np-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .np-rule:not(.np-rule-thumb, .np-rule-card) { animation: np-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .np-photo picture::after { animation: np-lift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
  .np-rvjs .np-rv { transition: clip-path .52s cubic-bezier(.2, .7, .1, 1), translate .52s cubic-bezier(.2, .7, .1, 1); }
  .np-rvjs .np-rv:not(.np-in) { clip-path: inset(100% -40px -24px -40px); translate: 0 24px; }
}
@keyframes np-thin { from { --np-p: 0; } to { --np-p: 1; } }
@keyframes np-rise {
  0% { clip-path: inset(100% -40px -24px -40px); translate: 0 24px; }
  85% { clip-path: inset(-4px -40px -24px -40px); translate: 0 -4px; }
  100% { clip-path: inset(-24px -40px -24px -40px); translate: 0 0; }
}
@keyframes np-draw { from { clip-path: inset(-40px 100% -40px 0); } to { clip-path: inset(-40px -4px -40px 0); } }
@keyframes np-lift { 0%, 100% { opacity: calc(var(--dt) * .55); } 50% { opacity: calc(max(0, var(--dt) - .08) * .55); } }

@media (prefers-reduced-motion: reduce) {
  .spec-nape .np-page { --np-p: .35; }
  .np-sec .np-gr { animation: none !important; --np-p: .35; }
  .np-gr .np-w > span, .np-poster img, .np-clipper, .np-glass-c { transition: none !important; }
}