/* ==========================================================================
   Nirosa Visual · the journey (home page). Inspired by the pacing of normalisboring.es, in Nirosa's own look:
   a short loader that counts up, the name split into the corners, and on wide screens a home page that travels
   sideways chapter by chapter as you scroll. Phones scroll down as usual. journey.js drives it.
   Palette: charcoal, off-white and silver only (blush lives in the logo).
   ========================================================================== */

:root {
  --nj-ink: #161515;
  --nj-char: #211f1f;
  --nj-char2: #2c2a2a;
  --nj-paper: #f4f2ef;
  --nj-paper2: #faf9f7;
  --nj-mist: #e3e1dd;
  --nj-silver: #c9ccd0;
  --nj-steel: #9a9ea5;
  --nj-slate: #6c6f74;
  --nj-serif: 'Cormorant Garamond', Georgia, serif;
  --nj-sans: 'Instrument Sans', system-ui, sans-serif;
  --nj-ease: cubic-bezier(.7, 0, .2, 1);
  --nj-out: cubic-bezier(.16, 1, .3, 1);
  --nj-gut: clamp(16px, 2.4vw, 40px);
  /* Phones turned sideways: keep words and buttons clear of the notch (viewport-fit=cover lets the page run under it). */
  --nj-gut: max(clamp(16px, 2.4vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right));
}

html { background: var(--nj-paper); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--nj-paper); color: var(--nj-char); font-family: var(--nj-sans); -webkit-font-smoothing: antialiased; }
.nj { overflow-x: clip; }
:where(.nj) a { color: inherit; }
.nj img { display: block; max-width: none; }
.nj h1, .nj h2, .nj h3, .nj p { margin: 0; }
.nj em { font-style: italic; }
.nj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nj-label { font-family: var(--nj-sans); font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.nj-paren { font-family: var(--nj-serif); font-size: clamp(15px, 1.15vw, 19px); font-style: italic; letter-spacing: .02em; }
.nj-small { font-size: clamp(13px, .95vw, 15px); line-height: 1.6; max-width: 34ch; color: var(--nj-slate); }
:focus-visible { outline: 2px solid var(--nj-steel); outline-offset: 4px; }

/* Display type: big uppercase serif lines, with one italic word in lower case. */
.nj-display { font-family: var(--nj-serif); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; font-size: clamp(40px, 7.2vw, 132px); }
.nj-display em { text-transform: none; letter-spacing: 0; }
.nj-line { display: block; white-space: nowrap; }
.nj-line > span { display: inline-block; will-change: transform; }

/* ---------- Chrome: the split name in the corners, menu, booking, side links, progress ---------- */
.nj-brand, .nj-visual, .nj-side { position: fixed; z-index: 40; color: #f4f2ef; mix-blend-mode: difference; text-decoration: none; }
.nj-brand { top: 18px; left: var(--nj-gut); font-family: var(--nj-serif); font-size: clamp(20px, 1.7vw, 26px); font-weight: 500; letter-spacing: .22em; line-height: 1; padding: 6px 0; }
.nj-visual { right: var(--nj-gut); bottom: 14px; font-family: var(--nj-serif); font-style: italic; font-size: clamp(34px, 3.6vw, 58px); line-height: 1; pointer-events: none; }
.nj-visual small { display: block; margin-bottom: 4px; font-family: var(--nj-sans); font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; text-align: right; }
.nj-side { left: 14px; top: 50%; display: flex; gap: 28px; transform: translate(-50%, -50%) rotate(-90deg) translateY(50%); transform-origin: center; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.nj-side a { text-decoration: none; padding: 10px 0; }
.nj-side a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nj-tr { position: fixed; z-index: 41; top: 14px; right: var(--nj-gut); display: flex; gap: 10px; align-items: center; }
.nj-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--nj-char); background: var(--nj-char); color: var(--nj-paper); font: 600 11px/1 var(--nj-sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .35s ease, color .35s ease, border-color .35s ease; }
.nj-pill:hover { background: var(--nj-paper); color: var(--nj-char); }
.nj-pill--ghost { background: rgba(244, 242, 239, .82); color: var(--nj-char); border-color: rgba(33, 31, 31, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nj-pill--ghost:hover { background: var(--nj-char); color: var(--nj-paper); }
.nj-pill i { display: inline-grid; gap: 4px; }
.nj-pill i b { display: block; width: 14px; height: 1px; background: currentColor; }
.nj-bar { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(154, 158, 165, .35), #c9ccd0 80%, #fff); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Menu: a full-screen charcoal room, big serif links; the photo behind each link comes up on hover. */
.nj-menu { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); background: var(--nj-ink); color: var(--nj-paper); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .9s var(--nj-ease), visibility 0s linear .9s; }
.nj-menu.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--nj-ease), visibility 0s; }
.nj-menu-list { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 96px var(--nj-gut) 64px calc(var(--nj-gut) + 28px); }
.nj-menu-list a { display: flex; align-items: baseline; gap: 18px; font-family: var(--nj-serif); font-size: clamp(44px, 6.4vw, 104px); line-height: 1; text-transform: uppercase; text-decoration: none; color: rgba(244, 242, 239, .42); transition: color .35s ease, transform .5s var(--nj-out); }
.nj-menu-list a small { font-family: var(--nj-sans); font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--nj-steel); transform: translateY(-1.6em); }
.nj-menu-list a:hover, .nj-menu-list a:focus-visible, .nj-menu-list a[aria-current] { color: var(--nj-paper); }
.nj-menu-list a:hover { transform: translateX(14px); }
.nj-menu-list a em { text-transform: none; }
.nj-menu-pics { position: relative; overflow: hidden; }
.nj-menu-pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.4s var(--nj-out); }
.nj-menu-pics img.on { opacity: 1; transform: scale(1); }
.nj-menu-foot { position: absolute; left: calc(var(--nj-gut) + 28px); bottom: 24px; display: flex; gap: 28px; color: var(--nj-steel); }
.nj-menu-foot a { text-decoration: none; }
.nj-menu-close { position: absolute; top: 14px; right: var(--nj-gut); z-index: 2; }
.nj-menu .nj-pill { background: var(--nj-paper); color: var(--nj-char); border-color: var(--nj-paper); }
.nj-menu .nj-pill:hover { background: transparent; color: var(--nj-paper); }

/* ---------- Loader: the name in the middle, a count up to 100%, then the name splits into the corners ---------- */
.nj-loader { position: fixed; inset: 0; z-index: 80; background: var(--nj-paper); color: var(--nj-char); pointer-events: none; transition: background-color .8s ease .2s; }
.nj-loader-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: baseline; gap: .3em; }
.nj-loader-name span { display: inline-block; will-change: transform; transition: transform 1.15s var(--nj-ease), font-size 1.15s var(--nj-ease); }
.nj-loader .l1 { font-family: var(--nj-serif); font-size: clamp(30px, 3.6vw, 56px); font-weight: 500; letter-spacing: .22em; line-height: 1; }
.nj-loader .l2 { font-family: var(--nj-serif); font-style: italic; font-size: clamp(34px, 4vw, 64px); line-height: 1; }
.nj-loader-count { position: absolute; left: var(--nj-gut); bottom: 18px; font-family: var(--nj-serif); font-size: clamp(56px, 9vw, 150px); line-height: .8; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: opacity .5s ease; }
.nj-loader-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(154, 158, 165, .35), #c9ccd0 80%, #fff); transform: scaleX(0); transform-origin: left; }
.nj-loader.done { background-color: rgba(244, 242, 239, 0); }
.nj-loader.done .nj-loader-count, .nj-loader.done .nj-loader-line { opacity: 0; }
.nj-loader.gone { opacity: 0; transition: opacity .4s ease; }
html.nj-loading .nj-brand, html.nj-loading .nj-visual { opacity: 0; }
html.nj-loading { overflow: hidden; }

/* Leaving for another page: a charcoal curtain rises. */
.nj-curtain { position: fixed; inset: 0; z-index: 90; background: var(--nj-ink); transform: translateY(100%); pointer-events: none; transition: transform .7s var(--nj-ease); }
html.nj-leaving .nj-curtain { transform: translateY(0); }

/* ---------- Photos: they open like a shutter as they arrive ---------- */
.nj-ph { position: relative; overflow: hidden; margin: 0; background: #d9d6d1; will-change: transform; }
.nj-ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1.8s var(--nj-out); }
.nj-ph[data-reveal] { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s var(--nj-ease); }
.nj-ph[data-reveal].in { clip-path: inset(0 0 0 0); }
.nj-ph.in img { transform: scale(1); }
.nj-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--nj-slate); }

/* Words that light up one by one as they pass. */
.nj-lit .w { opacity: .16; transition: opacity .25s linear; }
.nj-lit .w.on { opacity: 1; }

/* ---------- The sideways journey (wide screens) ---------- */
.nj-h { position: relative; }
.nj-stage { position: relative; }
.nj-track { position: relative; }
.nj-x .nj-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.nj-x .nj-track { display: flex; height: 100%; width: max-content; will-change: transform; }
.nj-x .nj-panel { position: relative; flex: 0 0 auto; height: 100%; box-sizing: border-box; }

/* 1 · Opening */
.nj-open { background: var(--nj-paper); }
.nj-x .nj-open { width: 100vw; }
.nj-open-copy { position: relative; padding: 120px var(--nj-gut) 72px; }
.nj-x .nj-open-copy { position: absolute; left: 8vw; top: 0; bottom: 0; width: 58vw; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 4.5vh; }
.nj-open-copy .nj-label { color: var(--nj-slate); }
.nj-open h1 .nj-line:nth-child(2) { padding-left: 1.4em; }
.nj-open h1 .nj-line:nth-child(3) { padding-left: .5em; }
.nj-open-foot { display: flex; align-items: flex-end; gap: 48px; }
.nj-cue { display: inline-flex; align-items: center; gap: 14px; color: var(--nj-slate); text-decoration: none; }
.nj-cue i { display: block; width: 64px; height: 1px; background: var(--nj-steel); position: relative; overflow: hidden; }
.nj-cue i::after { content: ''; position: absolute; inset: 0; background: var(--nj-char); transform: translateX(-100%); animation: njCue 2.4s var(--nj-ease) infinite; }
@keyframes njCue { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.nj-open-ph { height: 72vh; margin: 0 var(--nj-gut); }
.nj-x .nj-open-ph { position: absolute; right: -8vw; top: 0; bottom: 0; width: 36vw; height: auto; margin: 0; }

/* 2 · Collage of overlapping photos moving at different speeds */
.nj-collage { background: var(--nj-paper); }
.nj-x .nj-collage { width: 96vw; }
.nj-collage .nj-ph { position: relative; }
.nj-collage .c1 { width: 62vw; height: 82vw; margin: 0 0 0 var(--nj-gut); }
.nj-collage .c2 { width: 70vw; height: 50vw; margin: -18vw var(--nj-gut) 0 auto; z-index: 2; }
.nj-collage .c3 { width: 46vw; height: 32vw; margin: 6vw 0 0 14vw; }
.nj-x .nj-collage .nj-ph { position: absolute; margin: 0; }
.nj-x .nj-collage .c1 { left: 14vw; top: 9vh; width: 24vw; height: 70vh; }
.nj-x .nj-collage .c2 { left: 31vw; top: 34vh; width: 32vw; height: 50vh; }
.nj-x .nj-collage .c3 { left: 66vw; top: 12vh; width: 22vw; height: 30vh; z-index: 1; }
.nj-collage .nj-paren { padding: 24px var(--nj-gut) 0; color: var(--nj-slate); }
.nj-x .nj-collage .nj-paren { position: absolute; left: 66vw; top: 46vh; padding: 0; }

/* 3 · Statement: one line slides into place as you travel */
.nj-say { background: var(--nj-paper); padding: 120px var(--nj-gut) 96px; }
.nj-x .nj-say { width: 112vw; padding: 0; }
.nj-say h2 { position: relative; }
.nj-x .nj-say h2 { position: absolute; left: 6vw; top: 18vh; }
.nj-say h2 .nj-line:nth-child(2) { padding-left: 2.2em; }
.nj-say h2 .nj-line:nth-child(4) { padding-left: 3.2em; }
.nj-say-side { display: grid; gap: 18px; margin-top: 40px; }
.nj-x .nj-say-side { position: absolute; left: 6vw; bottom: 9vh; margin: 0; }
.nj-say .nj-ph { width: 56vw; height: 70vw; margin: 40px 0 0 auto; }
.nj-x .nj-say .nj-ph { position: absolute; right: 7vw; top: 14vh; width: 20vw; height: 30vw; max-height: 62vh; margin: 0; }
.nj-link { display: inline-flex; gap: 12px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding: 10px 0 8px; width: max-content; }
.nj-link span { transition: transform .4s var(--nj-out); }
.nj-link:hover span { transform: translateX(6px); }

/* 4 · The charcoal room: a sentence that lights up word by word */
.nj-room { background: var(--nj-ink); color: var(--nj-paper); padding: 120px var(--nj-gut); }
.nj-x .nj-room { width: 118vw; padding: 0; }
.nj-room .nj-lit { font-family: var(--nj-serif); font-size: clamp(28px, 3.1vw, 56px); line-height: 1.12; max-width: 24ch; }
.nj-x .nj-room .nj-lit { position: absolute; left: 50vw; top: 50%; transform: translateY(-50%); max-width: 22ch; }
.nj-room .nj-label { color: var(--nj-steel); margin-bottom: 28px; display: block; }
.nj-x .nj-room .nj-label { position: absolute; left: 50vw; top: 14vh; margin: 0; }
.nj-room .nj-ph { width: 70vw; height: 52vw; margin-top: 56px; background: #2a2828; }
.nj-x .nj-room .nj-ph { position: absolute; left: 7vw; top: 22vh; width: 34vw; height: 56vh; margin: 0; }
.nj-room .nj-ph.b { width: 44vw; height: 30vw; margin: -12vw 0 0 auto; z-index: 2; }
.nj-x .nj-room .nj-ph.b { left: auto; right: 6vw; top: auto; bottom: 10vh; width: 22vw; height: 34vh; margin: 0; }

/* 5 · The strip: CHAPTERS ✦ CHAPTERS */
.nj-strip { background: var(--nj-mist); overflow: hidden; border-block: 1px solid rgba(33, 31, 31, .08); }
.nj-strip-run { display: flex; gap: .5em; width: max-content; padding: 22px 0; font-family: var(--nj-serif); font-size: clamp(48px, 9vw, 120px); line-height: .9; text-transform: uppercase; white-space: nowrap; animation: njRun 26s linear infinite; }
.nj-strip-run b { font-weight: 400; color: var(--nj-steel); font-size: .5em; align-self: center; }
@keyframes njRun { to { transform: translateX(-50%); } }
.nj-x .nj-strip { width: 13vw; border-block: 0; border-inline: 1px solid rgba(33, 31, 31, .08); }
.nj-x .nj-strip-run { position: absolute; left: 50%; top: 0; padding: 0; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); animation: njRunV 30s linear infinite; font-size: clamp(64px, 8.4vw, 150px); }
@keyframes njRunV { from { transform: translate(-50%, 0) rotate(180deg); } to { transform: translate(-50%, 50%) rotate(180deg); } }

/* 6 · The chapters: a big photo over a coloured band with the name */
.nj-chap { display: grid; grid-template-rows: 64vh auto; text-decoration: none; color: var(--nj-char); background: var(--band, var(--nj-mist)); }
.nj-x .nj-chap { width: 44vw; grid-template-rows: minmax(0, 1fr) 36vh; }
.nj-chap .nj-ph { height: 100%; background: #cfccc6; }
.nj-chap-band { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; padding: 20px var(--nj-gut) 22px; color: var(--ink, var(--nj-char)); }
.nj-chap-top { display: flex; justify-content: space-between; gap: 16px; }
.nj-chap-top .nj-label:last-child { opacity: .7; }
.nj-chap h3 { align-self: center; justify-self: center; text-align: center; font-family: var(--nj-serif); font-weight: 400; font-size: clamp(40px, 4.6vw, 86px); line-height: .92; text-transform: uppercase; padding: 12px 0; }
.nj-chap h3 em { text-transform: none; }
.nj-chap-foot { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 16px; }
.nj-chap-foot p { font-size: 13px; line-height: 1.5; max-width: 32ch; opacity: .8; }
.nj-chap .nj-go { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid currentColor; font: 600 10px/1 var(--nj-sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; transition: background .35s ease, color .35s ease; }
.nj-chap:hover .nj-go, .nj-chap:focus-visible .nj-go { background: var(--ink, var(--nj-char)); color: var(--band, var(--nj-mist)); }

/* 7 · See every chapter */
.nj-all { display: grid; place-items: center; gap: 24px; padding: 96px var(--nj-gut); background: var(--nj-paper); text-decoration: none; color: var(--nj-char); text-align: center; }
.nj-x .nj-all { width: 38vw; padding: 0; align-content: center; }
.nj-all svg { width: clamp(56px, 6vw, 96px); height: auto; transition: transform .6s var(--nj-out); }
.nj-all:hover svg { transform: translate(8px, -8px); }
.nj-all .nj-display { font-size: clamp(44px, 5.2vw, 96px); }

/* ---------- After the watch: the line about time, the booking moment, the footer ---------- */
.nj-time { background: var(--nj-paper); padding: clamp(120px, 22vh, 220px) var(--nj-gut); overflow: hidden; }
.nj-time h2 { font-size: clamp(52px, 10.4vw, 190px); }
.nj-time .nj-line:nth-child(2) { text-align: right; }
.nj-time .nj-line:nth-child(3) { padding-left: 1.2em; }
.nj-time-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: 56px; flex-wrap: wrap; }

.nj-end { position: relative; min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 28px; padding: 120px var(--nj-gut); color: var(--nj-paper); text-align: center; overflow: hidden; background: var(--nj-ink); }
.nj-end .nj-ph { position: absolute; inset: -8vh 0; background: var(--nj-ink); }
.nj-end .nj-ph img { filter: brightness(.55); }
.nj-end > *:not(.nj-ph) { position: relative; z-index: 1; }
.nj-end .nj-display { font-size: clamp(56px, 10vw, 180px); }
.nj-end .nj-display .nj-line:nth-child(2) { padding-left: 1.6em; }
.nj-end .nj-small { color: rgba(244, 242, 239, .78); max-width: 40ch; }
.nj-book { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 30px; border-radius: 999px; background: var(--nj-paper); color: var(--nj-char); font: 600 12px/1 var(--nj-sans); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; transition: background .35s ease; }
.nj-end .nj-book { color: var(--nj-char); }
.nj-book:hover { background: #fff; }

.nj-foot { position: relative; background: var(--nj-ink); color: var(--nj-paper); padding: 72px var(--nj-gut) 0; overflow: hidden; border-top: 1px solid rgba(201, 204, 208, .14); }
.nj-foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px 48px; }
.nj-foot .nj-label { color: var(--nj-steel); display: block; margin-bottom: 14px; }
.nj-foot a, .nj-foot address, .nj-foot p { display: block; font-style: normal; font-size: 15px; line-height: 1.9; text-decoration: none; color: rgba(244, 242, 239, .86); }
.nj-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.nj-foot .nj-foot-word { margin: 56px 0 -.18em; font-family: var(--nj-serif); font-weight: 400; font-size: 25.5vw; line-height: .8; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; background: linear-gradient(180deg, #c9ccd0 0%, #6c6f74 70%, #2c2a2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }

/* ---------- Phones and narrow screens ---------- */
@media (max-width: 899px) {
  .nj-side { display: none; }
  .nj-tr .nj-book-top { display: none; }
  .nj-menu { grid-template-columns: 1fr; }
  .nj-menu-pics { position: absolute; inset: 0; opacity: .22; pointer-events: none; }
  .nj-menu-list { position: relative; z-index: 1; padding-left: var(--nj-gut); }
  .nj-menu-foot { left: var(--nj-gut); flex-wrap: wrap; gap: 8px 22px; }
  .nj-chap-foot p { display: none; }
  .nj-visual { font-size: 30px; bottom: 12px; }
  .nj-open h1 .nj-line:nth-child(2), .nj-say h2 .nj-line:nth-child(2) { padding-left: .8em; }
  .nj-say h2 .nj-line:nth-child(4) { padding-left: 1.6em; }
  .nj-visual small { display: none; }
}

/* ---------- Static: the studio's page editor, and anyone who asks for less motion ---------- */
.nj-static .nj-loader, .nj-static .nj-curtain { display: none; }
.nj-static .nj-ph[data-reveal] { clip-path: none; }
.nj-static .nj-ph img { transform: none; }
.nj-static .nj-strip-run, .nj-static .nj-cue i::after { animation: none; }
.nj-static .nj-lit .w { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nj-ph[data-reveal] { clip-path: none; }
  .nj-ph img { transform: none; }
  .nj-strip-run, .nj-cue i::after { animation: none; }
}

/* ==========================================================================
   Book now, everywhere: the dial (a watch bezel whose ring of words turns), three steps, and a floating pill on phones
   ========================================================================== */
.nj-end h2 { margin-bottom: 8px; }
.nj-dial-wrap { display: grid; justify-items: center; gap: 10px; margin: 8px 0 12px; }
.nj-dial { position: relative; display: grid; place-items: center; width: clamp(200px, 19vw, 300px); aspect-ratio: 1; border-radius: 50%; color: var(--nj-paper); text-decoration: none; transition: transform .6s var(--nj-out); }
.nj-ring { position: absolute; inset: 0; }
.nj-ring svg { width: 100%; height: 100%; overflow: visible; animation: njSpin 28s linear infinite; }
.nj-ring text { fill: currentColor; font: 600 10.5px/1 var(--nj-sans); letter-spacing: .2em; }
.nj-ring .nj-ticks line { stroke: var(--nj-silver); stroke-width: .8; }
@keyframes njSpin { to { transform: rotate(360deg); } }
.nj-dial-core { position: relative; display: grid; place-items: center; align-content: center; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--nj-paper); color: var(--nj-char); font-family: var(--nj-serif); font-size: clamp(24px, 2.1vw, 34px); line-height: .95; text-transform: uppercase; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .6); transition: transform .6s var(--nj-out), background .4s ease; }
.nj-dial-core em { text-transform: none; font-size: 1.05em; }
.nj-dial-core::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(154, 158, 165, .55); }
.nj-dial:hover .nj-dial-core, .nj-dial:focus-visible .nj-dial-core { transform: scale(1.08); background: linear-gradient(140deg, #ffffff 0%, #e4e6e8 40%, #c9ccd0 70%, #f4f2ef 100%); }
.nj-dial:hover .nj-ring svg { animation-duration: 9s; }
.nj-ring-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nj-static .nj-ring-src { position: static; width: auto; height: auto; clip-path: none; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.nj-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin: 8px 0 0; padding: 0; }
.nj-steps li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; letter-spacing: .04em; color: rgba(244, 242, 239, .86); }
.nj-steps b { font-family: var(--nj-serif); font-weight: 400; font-size: 20px; color: var(--nj-silver); }
.nj-float { position: fixed; z-index: 39; left: 50%; white-space: nowrap; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); min-height: 50px; padding: 0 26px; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .5); transition: transform .6s var(--nj-out), background .35s ease, color .35s ease; display: none; }
.nj-float.show { transform: translate(-50%, 0); }
.nj-foot-legal { padding: 18px 0 22px; color: var(--nj-slate); }
@media (max-width: 899px) { .nj-float { display: inline-flex; } [data-page="book"] .nj-float { display: none; } }
@media (prefers-reduced-motion: reduce) { .nj-ring svg { animation: none; } }
.nj-static .nj-ring svg { animation: none; }

/* ==========================================================================
   Portfolio: an index of chapters, then each chapter travels sideways through its photographs
   ========================================================================== */
.nj-pindex { position: relative; padding: clamp(110px, 18vh, 180px) var(--nj-gut) 96px; background: var(--nj-paper); }
.nj-pindex h1 { font-size: clamp(80px, 17vw, 300px); line-height: .8; margin: 18px 0 56px; }
.nj-pindex h1 .nj-line:nth-child(2) { padding-left: 1.3em; }
.nj-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(33, 31, 31, .14); }
.nj-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 48px; align-items: center; gap: 16px 24px; padding: 18px 0; border-bottom: 1px solid rgba(33, 31, 31, .14); text-decoration: none; color: var(--nj-char); }
.nj-row-name { font-family: var(--nj-serif); font-size: clamp(34px, 4.4vw, 76px); line-height: 1; text-transform: uppercase; transition: transform .6s var(--nj-out), color .3s ease; }
.nj-row-tags, .nj-row-count { color: var(--nj-slate); }
.nj-row-count { text-align: right; }
.nj-row:hover .nj-row-name { transform: translateX(18px); font-style: italic; }
.nj-peek { position: fixed; left: 0; top: 0; z-index: 30; width: 220px; height: 280px; pointer-events: none; opacity: 0; transition: opacity .3s ease; overflow: hidden; }
.nj-peek img { width: 100%; height: 100%; object-fit: cover; }
.nj-peek.on { opacity: 1; }

.nj-chapter { background: var(--band); color: var(--ink); }
.nj-chapter .nj-track { padding: 96px var(--nj-gut) 72px; display: flex; flex-wrap: wrap; gap: 28px 16px; }
.nj-x .nj-chapter .nj-track { padding: 0; flex-wrap: nowrap; gap: 0; }
.nj-ctitle { flex: 1 1 100%; display: grid; gap: 18px; align-content: end; padding-bottom: 12px; }
.nj-ctitle .nj-display { font-size: clamp(56px, 8vw, 150px); }
.nj-ctitle .nj-small { color: inherit; opacity: .75; }
.nj-x .nj-ctitle { flex: 0 0 auto; width: 42vw; padding: 0 4vw 0 7vw; align-content: center; }
.nj-shot { all: unset; box-sizing: border-box; cursor: zoom-in; display: block; flex: 0 0 auto; width: calc(50% - 8px); }
.nj-shot:nth-child(3n + 2) { width: 100%; }
.nj-shot .nj-ph { display: block; aspect-ratio: var(--r); width: 100%; background: rgba(0, 0, 0, .12); }
.nj-shot .nj-cap { color: inherit; opacity: .7; }
.nj-shot .nj-cap b { font-family: var(--nj-serif); font-weight: 400; font-size: 15px; letter-spacing: .04em; }
.nj-shot:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.nj-x .nj-shot { position: relative; width: auto; margin: var(--t) 0 0 5vw; align-self: flex-start; }
.nj-x .nj-shot .nj-ph { width: var(--w); height: var(--h); aspect-ratio: auto; }
.nj-cnext { flex: 1 1 100%; display: grid; gap: 14px; justify-items: start; padding: 40px 0 0; text-decoration: none; color: inherit; }
.nj-cnext .nj-display { font-size: clamp(40px, 5vw, 90px); }
.nj-x .nj-cnext { flex: 0 0 auto; width: 34vw; padding: 0 6vw; align-content: center; }
.nj-cnext:hover .nj-display { font-style: italic; }

.nj-view { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 64px 72px; background: #161515; color: var(--nj-paper); opacity: 0; transition: opacity .35s ease; }
.nj-view.open { opacity: 1; }
.nj-view[hidden] { display: none; }
.nj-view figure { margin: 0; display: grid; gap: 14px; max-width: 100%; max-height: 100%; }
.nj-view img { max-width: min(92vw, 1600px); max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); width: auto; height: auto; object-fit: contain; }
.nj-view figcaption { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--nj-silver); }
.nj-view-prev, .nj-view-next { position: absolute; top: 50%; transform: translateY(-50%); }
.nj-view-prev { left: var(--nj-gut); } .nj-view-next { right: var(--nj-gut); }
.nj-view-close { position: absolute; top: 14px; right: var(--nj-gut); background: var(--nj-paper); color: var(--nj-char); }
@media (max-width: 899px) {
  .nj-row { grid-template-columns: 36px minmax(0, 1fr) 32px; }
  .nj-row-tags { display: none; }
  .nj-view { padding: 64px 12px 84px; }
  .nj-view { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .nj-view-prev, .nj-view-next { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); transform: none; }
}

/* ==========================================================================
   About
   ========================================================================== */
.nj-hero-about { position: relative; min-height: 100vh; padding: clamp(110px, 18vh, 170px) var(--nj-gut) 96px; display: grid; align-content: start; gap: 28px; background: var(--nj-paper); overflow: hidden; }
.nj-hero-about h1 { position: relative; z-index: 2; font-size: clamp(76px, 14vw, 250px); line-height: .82; mix-blend-mode: difference; color: #f4f2ef; }
.nj-hero-about h1 .nj-line:nth-child(2) { padding-left: 1.2em; }
.nj-ab1 { width: 58vw; height: 72vw; margin-left: auto; }
.nj-ab2 { width: 46vw; height: 58vw; margin-top: -24vw; }
.nj-ab-lit { font-family: var(--nj-serif); font-size: clamp(26px, 2.8vw, 48px); line-height: 1.15; max-width: 26ch; }
@media (min-width: 900px) {
  .nj-hero-about { min-height: 150vh; }
  .nj-ab1 { position: absolute; right: 8vw; top: 16vh; width: 28vw; height: 70vh; }
  .nj-ab2 { position: absolute; left: 34vw; top: 58vh; width: 20vw; height: 44vh; margin: 0; z-index: 1; }
  .nj-ab-lit { position: absolute; left: 58vw; top: 98vh; max-width: 19ch; }
}
.nj-artist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px 6vw; align-items: center; padding: clamp(96px, 16vh, 180px) var(--nj-gut); background: var(--nj-mist); }
.nj-artist-pic { display: grid; place-items: center; aspect-ratio: 4 / 5; background: repeating-linear-gradient(135deg, #d9d6d1 0 14px, #e3e1dd 14px 28px); color: var(--nj-slate); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-align: center; padding: 24px; }
.nj-artist-copy { display: grid; gap: 24px; justify-items: start; }
.nj-artist-copy .nj-display { font-size: clamp(56px, 7.4vw, 136px); }
.nj-body { font-size: 17px; line-height: 1.7; max-width: 46ch; color: #3a3838; }
.nj-film { position: relative; min-height: 100vh; display: grid; align-items: end; overflow: hidden; background: var(--nj-ink); color: var(--nj-paper); }
.nj-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.nj-film-copy { position: relative; display: grid; gap: 18px; padding: 0 var(--nj-gut) 72px; }
.nj-film-copy .nj-label { color: var(--nj-silver); }
.nj-film-copy .nj-display { font-size: clamp(56px, 9vw, 170px); }
.nj-film-ctl { display: flex; gap: 10px; }
.nj-words { background: var(--nj-paper); }
.nj-words .nj-track { padding: 96px var(--nj-gut); display: grid; gap: 40px; }
.nj-x .nj-words .nj-track { display: flex; padding: 0; gap: 0; align-items: stretch; }
.nj-words-title .nj-display { font-size: clamp(56px, 8vw, 150px); }
.nj-x .nj-words-title { width: 46vw; display: grid; align-content: center; padding-left: 7vw; }
.nj-quote { margin: 0; display: grid; gap: 22px; align-content: center; border-top: 1px solid rgba(33, 31, 31, .14); padding-top: 28px; }
.nj-quote blockquote { margin: 0; font-family: var(--nj-serif); font-size: clamp(30px, 3.2vw, 58px); line-height: 1.1; }
.nj-quote figcaption { color: var(--nj-slate); }
.nj-x .nj-quote { width: 40vw; padding: 0 4vw; border-top: 0; border-left: 1px solid rgba(33, 31, 31, .14); }
.nj-words-ph { height: 70vw; }
.nj-x .nj-words-ph { width: 34vw; height: 76vh; align-self: center; margin: 0 7vw 0 3vw; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.nj-hero-price { padding: clamp(110px, 18vh, 180px) var(--nj-gut) 72px; display: grid; gap: 28px; background: var(--nj-paper); }
.nj-hero-price h1 { font-size: clamp(64px, 12vw, 220px); line-height: .84; }
.nj-hero-price h1 .nj-line:nth-child(2) { padding-left: 1em; }
.nj-prices { background: #dfe1e3; padding: 24px var(--nj-gut) 72px; }
.nj-prices ul { list-style: none; margin: 0; padding: 0; }
.nj-price { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 24px; padding: 32px 0; border-bottom: 1px solid rgba(33, 31, 31, .16); }
.nj-price .nj-label { padding-top: 1.2em; color: var(--nj-slate); }
.nj-price h3 { font-size: clamp(48px, 8.6vw, 168px); line-height: .9; }
.nj-price-copy { grid-column: 2; display: grid; gap: 6px; max-width: 46ch; font-size: 15px; line-height: 1.6; }
.nj-price-from { font-family: var(--nj-serif); font-size: 28px; }
.nj-price-inc { color: var(--nj-slate); font-size: 13px; }
.nj-price-ph { display: none; }
@media (min-width: 900px) and (hover: hover) {
  .nj-price { grid-template-columns: 64px minmax(0, 1fr) 30vw; align-items: center; }
  .nj-price-copy { grid-column: 3; grid-row: 1; }
  .nj-price-ph { display: block; position: absolute; left: 46%; top: 50%; z-index: 2; width: 15vw; height: 20vw; margin: 0; overflow: hidden; pointer-events: none; clip-path: inset(50% 0 50% 0); transform: translate(-50%, -50%) rotate(-3deg); transition: clip-path .7s var(--nj-ease); }
  .nj-price-ph img { width: 100%; height: 100%; object-fit: cover; }
  .nj-price:hover .nj-price-ph { clip-path: inset(0 0 0 0); }
  .nj-price h3 { transition: transform .7s var(--nj-out); }
  .nj-price:hover h3 { transform: translateX(2vw); }
}
.nj-how { background: var(--nj-ink); color: var(--nj-paper); }
.nj-how .nj-track { padding: 96px var(--nj-gut); display: grid; gap: 48px; }
.nj-x .nj-how .nj-track { display: flex; padding: 0; gap: 0; }
.nj-how-title { display: grid; gap: 24px; align-content: center; justify-items: start; }
.nj-how-title .nj-display { font-size: clamp(56px, 8vw, 150px); }
.nj-x .nj-how-title { width: 44vw; padding-left: 7vw; }
.nj-step { display: grid; gap: 14px; align-content: center; }
.nj-step-n { font-family: var(--nj-serif); font-size: clamp(90px, 13vw, 240px); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--nj-steel); }
.nj-step h3 { font-family: var(--nj-serif); font-weight: 400; font-size: clamp(30px, 2.6vw, 46px); text-transform: uppercase; }
.nj-step p { max-width: 30ch; color: rgba(244, 242, 239, .76); line-height: 1.6; font-size: 15px; }
.nj-x .nj-step { width: 30vw; padding: 0 3vw; border-left: 1px solid rgba(201, 204, 208, .16); }
.nj-how-ph { height: 64vw; }
.nj-x .nj-how-ph { width: 30vw; height: 70vh; align-self: center; margin: 0 7vw 0 4vw; }
.nj-faq { padding: clamp(96px, 16vh, 180px) var(--nj-gut); background: var(--nj-paper); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px 6vw; align-items: start; }
.nj-faq .nj-display { font-size: clamp(56px, 7vw, 130px); }
.nj-faq details { border-bottom: 1px solid rgba(33, 31, 31, .16); }
.nj-faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--nj-serif); font-size: clamp(22px, 1.8vw, 30px); }
.nj-faq summary::-webkit-details-marker { display: none; }
.nj-faq summary i { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.nj-faq summary i::before, .nj-faq summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .4s var(--nj-out); }
.nj-faq summary i::after { transform: rotate(90deg); }
.nj-faq details[open] summary i::after { transform: rotate(0); }
.nj-faq details p { padding: 0 0 24px; max-width: 54ch; line-height: 1.7; color: #3a3838; }

/* ==========================================================================
   Book now page: a slow photo story on one side, the form on the other
   ========================================================================== */
.nj-bookpage { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--nj-paper); }
.nj-book-side { position: relative; height: 46vh; overflow: hidden; background: var(--nj-ink); color: var(--nj-paper); }
.nj-book-pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 7s linear; filter: brightness(.72); }
.nj-book-pics img.on { opacity: 1; transform: scale(1); }
.nj-book-big { position: absolute; left: var(--nj-gut); bottom: 28px; font-size: clamp(48px, 7vw, 120px); }
.nj-book-main { padding: 56px var(--nj-gut) 120px; display: grid; gap: 40px; align-content: start; }
.nj-book-head { display: grid; gap: 14px; }
.nj-book-head .nj-display { font-size: clamp(48px, 5.6vw, 96px); }
.nj-book-head .nj-label { color: var(--nj-slate); }
.nj-form { display: grid; gap: 40px; }
.nj-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; }
.nj-form legend { display: flex; gap: 14px; align-items: baseline; padding: 0 0 14px; font-family: var(--nj-serif); font-size: clamp(26px, 2.2vw, 36px); text-transform: uppercase; }
.nj-form legend span { font-family: var(--nj-sans); font-size: 12px; font-weight: 600; letter-spacing: .26em; color: var(--nj-steel); }
.nj-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--nj-slate); }
.nj-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 24px; }
.nj-fields--when { align-items: end; }
.nj-form .nv-field { width: 100%; min-height: 52px; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(33, 31, 31, .32); border-radius: 0; background: transparent; color: var(--nj-char); font: 400 18px/1.4 var(--nj-sans); letter-spacing: 0; text-transform: none; box-sizing: border-box; transition: border-color .3s ease; }
.nj-form .nv-field:focus { outline: none; border-bottom-color: var(--nj-char); }
.nj-form .nv-field[aria-invalid="true"] { border-bottom-color: #a3262b; }
.nj-form textarea.nv-field { resize: vertical; }
.nj-form input[type="date"].nv-field::-webkit-date-and-time-value { text-align: left; }
.nj-check { display: flex !important; gap: 10px; align-items: center; min-height: 52px; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 400 !important; color: var(--nj-char) !important; }
.nj-check input { width: 18px; height: 18px; accent-color: var(--nj-char); }
.nj-picks { display: flex; flex-wrap: wrap; gap: 10px; }
.nv-pick { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(33, 31, 31, .28); background: transparent; color: var(--nj-char); font: 500 15px/1 var(--nj-sans); cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.nv-pick:hover { border-color: var(--nj-char); }
.nv-pick[aria-pressed="true"] { background: var(--nj-char); color: var(--nj-paper); border-color: var(--nj-char); }
.nj-send { display: grid; gap: 14px; justify-items: start; }
.nj-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 40px; border: 0; border-radius: 999px; background: var(--nj-char); color: var(--nj-paper); font: 600 13px/1 var(--nj-sans); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; transition: transform .6s var(--nj-out); }
.nj-submit::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-100%); transition: transform .9s var(--nj-ease); }
.nj-submit:hover::before { transform: translateX(100%); }
.nj-submit span { position: relative; }
.nj-send-note { color: var(--nj-slate); }
.nj-send-note a { color: var(--nj-char); text-transform: none; letter-spacing: .02em; }
.nj-thanks { display: grid; justify-items: start; gap: 18px; padding: 48px 0; }
.nj-thanks h1 { font-size: clamp(48px, 6vw, 96px); outline: none; }
.nj-thanks-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--nj-steel); color: var(--nj-slate); }
@media (min-width: 900px) {
  .nj-bookpage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
  .nj-book-side { position: sticky; top: 0; height: 100vh; }
  .nj-book-main { padding: 120px 6vw 120px 5vw; }
}

/* ==========================================================================
   Phones and small tablets: audit fixes (Nov 2026)
   - every tap target at least 44px, no text under 12px
   - headings sized to the screen so long words never run off the edge
   - nothing overlaps the words (no sideways drift, no negative margins)
   - the name and Menu tuck away while you scroll down and come back when you scroll up
   ========================================================================== */
@media (max-width: 899px) {
  .nj-label { font-size: 12px; letter-spacing: .2em; }
  .nj-small { font-size: 15px; max-width: 40ch; }
  .nj-brand { top: 10px; padding: 12px 0; font-size: 20px; }
  .nj-tr { top: 10px; }
  .nj-pill { min-height: 44px; font-size: 12px; }
  .nj-brand, .nj-tr { transition: transform .45s var(--nj-out), opacity .3s ease; }
  html.nj-tuck .nj-brand, html.nj-tuck .nj-tr { transform: translateY(-140%); opacity: 0; pointer-events: none; }
  /* Visual, in the bottom corner, steps aside too, so it never sits over words, fields or messages while you read. */
  .nj-visual { transition: transform .45s var(--nj-out), opacity .3s ease; }
  html.nj-tuck .nj-visual { transform: translateY(140%); opacity: 0; }
  /* The floating Book now pill steps aside with them, so it never sits over the words you are scrolling to. */
  html.nj-tuck .nj-float { transform: translate(-50%, 140%); }
  .nj-visual { font-size: 26px; right: max(14px, env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); }
  .nj-link { min-height: 44px; box-sizing: border-box; padding: 15px 0 12px; font-size: 12px; }
  .nj-cue { min-height: 44px; }
  .nj-cap { font-size: 12px; letter-spacing: .18em; }
  .nj-go, .nj-chap .nj-go { min-height: 44px; padding: 0 18px; font-size: 12px; }
  .nj-foot a { padding: 11px 0; line-height: 1.5; }
  .nj-foot address, .nj-foot p { line-height: 1.7; }
  .nj-foot .nj-link { padding: 15px 0 12px; }
  .nj-send-note a { display: inline-flex; align-items: center; min-height: 44px; }
  .nj-row { min-height: 64px; }
  .nj-steps { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nj-steps li { font-size: 15px; }

  /* Opening: the sentence and the Scroll cue stack instead of squeezing side by side. */
  .nj-open-copy { padding-top: 96px; display: grid; gap: 18px; }
  .nj-open-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nj-open .nj-display { font-size: min(12.2vw, 64px); }
  .nj-say .nj-display { font-size: min(11vw, 60px); }
  .nj-collage .c2 { margin-top: -14vw; }

  /* The dark room: the second photo sits under the words, never over them. */
  .nj-room .nj-ph.b { margin: 16px 0 0 auto; }
  .nj-room .nj-lit { font-size: 27px; }

  .nj-time h2 { font-size: min(12.4vw, 72px); }
  .nj-time .nj-line:nth-child(3) { padding-left: .5em; }
  .nj-end .nj-display { font-size: min(15vw, 84px); }
  .nj-end .nj-display .nj-line:nth-child(2) { padding-left: .6em; }
  .nj-end { gap: 22px; padding: 104px var(--nj-gut) 96px; }
  .nj-pindex h1 { font-size: min(30vw, 160px); margin-bottom: 36px; }
  .nj-row-name { font-size: min(8.6vw, 40px); }
  .nj-ctitle .nj-display { font-size: min(13vw, 72px); }
  .nj-cnext .nj-display { font-size: min(10vw, 52px); }
  .nj-hero-about h1 { font-size: min(18vw, 120px); }
  .nj-hero-about h1 .nj-line:nth-child(2) { padding-left: .5em; }
  .nj-ab-lit { font-size: 24px; }
  .nj-artist-copy .nj-display, .nj-words-title .nj-display, .nj-how-title .nj-display, .nj-faq .nj-display { font-size: min(13vw, 72px); }
  .nj-film-copy .nj-display { font-size: min(14vw, 80px); }
  .nj-quote blockquote { font-size: 28px; }
  .nj-hero-price h1 { font-size: min(13vw, 84px); }
  .nj-hero-price h1 .nj-line:nth-child(2) { padding-left: .4em; }
  .nj-price { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 14px; }
  .nj-price h3 { font-size: min(10.5vw, 72px); }
  .nj-step-n { font-size: min(24vw, 120px); }
  .nj-faq { grid-template-columns: minmax(0, 1fr); }
  .nj-faq summary { min-height: 56px; padding: 14px 0; font-size: 21px; }
  .nj-book-big { font-size: min(10.5vw, 56px); bottom: 20px; }
  .nj-book-head .nj-display, .nj-thanks h1 { font-size: min(12vw, 64px); }
  .nj-book-main { padding: 40px var(--nj-gut) 104px; }
  .nj-submit { width: 100%; padding: 0 20px; }
  .nv-pick { min-height: 48px; }
  .nj-check input { width: 22px; height: 22px; }

  /* The watch takes a shorter scroll on phones; it plays the same story, a little quicker. */
  .nj-watch.mw { height: 420vh; }
  .nj-menu-list a { font-size: min(12vw, 60px); min-height: 56px; align-items: center; }
  .nj-menu-list a small { transform: none; }
  .nj-menu-foot { flex-direction: column; gap: 0; bottom: 16px; }
  .nj-menu-foot a, .nj-menu-foot span { display: inline-flex; align-items: center; min-height: 44px; }
  html.nj-menu-on .nj-float { display: none; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .nj-watch.mw { height: auto; } }
/* Touch screens wide enough for the sideways layout (a tablet on its side) still get thumb-sized buttons. */
@media (min-width: 900px) and (pointer: coarse) {
  .nj-pill { min-height: 44px; }
  .nj-side a { padding: 16px 0; }
  .nj-brand { padding: 12px 0; }
  .nj-link, .nj-cue { min-height: 44px; box-sizing: border-box; }
  .nj-foot a { padding: 8px 0; }
  .nj-send-note a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ==========================================================================
   Phones: more of an experience than desktop
   - the opening is a full-screen photo that slowly breathes, words over it
   - the collage becomes a stack: each photo fills the screen and the next slides over it
   - the chapters are a deck you swipe through, like flipping prints, with a counter
   - each portfolio chapter is a strip of full-height prints you swipe, with a counter
   - everything you press gives a little under your thumb
   ========================================================================== */
.nj-deck, .nj-shots { display: contents; }
.nj-swipe-hint { display: none; }
@media (max-width: 899px) {
  /* Opening: one full-screen photo, the words resting on it */
  .nj-open { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--nj-ink); color: var(--nj-paper); }
  .nj-open .nj-open-ph { position: absolute; inset: 0; height: auto; margin: 0; z-index: 0; }
  .nj-open .nj-open-ph img { animation: njBreathe 14s ease-in-out infinite alternate; filter: brightness(.82); }
  .nj-open .nj-open-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 21, 21, .35) 0%, rgba(22, 21, 21, 0) 26%, rgba(22, 21, 21, 0) 42%, rgba(22, 21, 21, .82) 100%); }
  /* The top padding keeps the words under Menu when a short screen (a phone on its side) makes them taller than it. */
  .nj-open-copy { position: relative; z-index: 1; padding: 76px var(--nj-gut) 92px; }
  .nj-open-copy .nj-label, .nj-open .nj-small, .nj-open .nj-cue { color: rgba(244, 242, 239, .82); }
  .nj-open .nj-cue i { background: rgba(244, 242, 239, .4); }
  .nj-open .nj-cue i::after { background: var(--nj-paper); }
  .nj-open .nj-display { font-size: min(12.2vw, 66px); }

  /* The collage becomes a stack of full-screen prints */
  .nj-collage { position: relative; display: flex; flex-direction: column; background: var(--nj-ink); padding: 0; }
  /* Each print is as tall as the screen, except a landscape: it is only about 1.7 times its own height, so a
     group (two graduates, two friends) is never cut down to one face. Shorter prints rest in the middle of the
     screen. --r is the photo's shape, set by journey.js. */
  .nj-collage .nj-ph { --h: 100vh; --h: min(100vh, calc(100vw / var(--r, .5) * 1.7)); --h: min(100svh, calc(100vw / var(--r, .5) * 1.7)); }
  .nj-collage .nj-ph, .nj-collage .c1, .nj-collage .c2, .nj-collage .c3 { position: sticky; top: calc((100vh - var(--h)) / 2); top: calc((100svh - var(--h)) / 2); width: 100%; height: var(--h); margin: 0; transform: none !important; box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .55); }
  .nj-collage .nj-ph img { transform: scale(calc(1.12 - .12 * var(--in, 0))); filter: brightness(calc(1 - .45 * var(--out, 0))); transition: none; }
  .nj-collage .nj-ph[data-reveal] { clip-path: none; }
  .nj-collage .c1 { z-index: 1; } .nj-collage .c2 { z-index: 2; } .nj-collage .c3 { z-index: 3; }
  /* The line leads the stack (after it, the last print slid over it while it rested in the middle). */
  .nj-collage .nj-paren { order: -1; position: relative; padding: 40px var(--nj-gut) 28px; color: rgba(244, 242, 239, .86); font-size: 20px; }

  /* Chapters: a deck of prints you swipe through */
  .nj-swipe { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--nj-gut); padding: 0 var(--nj-gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nj-swipe::-webkit-scrollbar { display: none; }
  .nj-deck { padding: 18px var(--nj-gut) 0; background: var(--nj-paper); }
  .nj-deck .nj-chap { flex: 0 0 84vw; height: 76vh; height: 76svh; max-height: 680px; grid-template-rows: minmax(0, 1fr) auto; scroll-snap-align: center; border-radius: 4px; overflow: hidden; transform: scale(calc(.9 + .1 * var(--on, 0))); opacity: calc(.55 + .45 * var(--on, 0)); transition: transform .5s var(--nj-out), opacity .5s ease; will-change: transform; }
  .nj-deck .nj-chap .nj-ph[data-reveal] { clip-path: none; }
  .nj-deck .nj-chap .nj-ph img { transform: scale(calc(1.08 - .08 * var(--on, 0))); transition: transform 1.2s var(--nj-out); }
  .nj-deck .nj-chap h3 { font-size: min(11vw, 52px); padding: 4px 0; }
  /* A phone on its side: the card is too short to stack photo over band, so they sit side by side. */
  @media (orientation: landscape) and (max-height: 500px) {
    .nj-deck .nj-chap { flex-basis: 76vw; height: 82vh; height: 82svh; grid-template-rows: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .nj-deck .nj-chap h3 { font-size: min(7vw, 44px); }
  }
  .nj-deck .nj-chap-band { gap: 10px; padding: 16px 16px 18px; }
  .nj-swipe-hint { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px var(--nj-gut) 28px; background: inherit; color: var(--nj-slate); }
  .nj-swipe-hint i { position: relative; display: block; width: 48px; height: 1px; background: currentColor; overflow: hidden; opacity: .5; }
  .nj-swipe-hint i::after { content: ''; position: absolute; inset: 0; background: var(--nj-char); animation: njCue 2.2s var(--nj-ease) infinite; }
  .nj-swipe-n { font-variant-numeric: tabular-nums; color: var(--nj-char); }
  .nj-open ~ .nj-swipe-hint, .nj-deck + .nj-swipe-hint { background: var(--nj-paper); }

  /* Portfolio: each chapter is a strip of full-height prints */
  /* Room under Next chapter for the floating pill and the corner name, so neither covers it. */
  .nj-chapter .nj-track { padding: 88px 0 104px; gap: 0; }
  .nj-chapter .nj-ctitle { padding: 0 var(--nj-gut) 22px; }
  .nj-shots { flex: 1 1 100%; gap: 10px; align-items: center; }
  .nj-shots .nj-shot, .nj-shots .nj-shot:nth-child(3n + 2) { flex: 0 0 auto; width: auto; scroll-snap-align: center; transform: none !important; }
  /* Each print keeps its own shape: as tall as 62% of the screen, unless that would make a landscape wider than
     88% of it, in which case it is as wide as that and only as tall as its shape allows (never a cropped square). */
  .nj-shots .nj-shot .nj-ph { height: 62vh; height: min(62vh, calc(88vw / var(--r))); height: min(62svh, calc(88vw / var(--r))); width: auto; aspect-ratio: var(--r); max-width: 88vw; }
  .nj-shots .nj-shot .nj-ph[data-reveal] { clip-path: none; }
  .nj-shots .nj-shot .nj-ph img { transform: none; }
  .nj-shots .nj-shot { opacity: calc(.45 + .55 * var(--on, 0)); transition: opacity .4s ease; }
  .nj-chapter .nj-swipe-hint { background: transparent; color: inherit; }
  .nj-chapter .nj-swipe-hint .nj-swipe-n { color: inherit; }
  .nj-chapter .nj-swipe-hint i::after { background: currentColor; }
  .nj-chapter .nj-cnext { padding: 8px var(--nj-gut) 0; }

  /* Under your thumb */
  .nj-pill:active, .nj-book:active, .nv-pick:active, .nj-submit:active { transform: scale(.96); }
  .nj-chap:active { transform: scale(.97); }
  .nj-dial:active .nj-dial-core { transform: scale(.92); }
  .nj-row:active .nj-row-name { transform: translateX(10px); font-style: italic; }
}
@keyframes njBreathe { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .nj-open .nj-open-ph img { animation: none; }
  .nj-collage .nj-ph, .nj-collage .c1, .nj-collage .c2, .nj-collage .c3 { position: relative; }
}
.nj-static .nj-open .nj-open-ph img { animation: none; }
@media (max-width: 899px) {
  /* Over full-screen photos the blended name broke up; on phones it sits in a soft pill like Menu. */
  .nj-brand { mix-blend-mode: normal; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(244, 242, 239, .96); color: var(--nj-char); font-size: 17px; letter-spacing: .2em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}