/* D-087 colour system: near-white rose ground, charcoal text, ONE deep rose (--nu-accent) kept for the primary action and selected states; links and secondary buttons are charcoal (--nu-link). Round 3 (information hub): the visual system is quieter - one Gothic stack (--nu-font, no web font), hairline rules and whitespace instead of
 * boxed cards, a spacing rhythm and an image-scale hierarchy (--nu-img-*). Token and class conventions: reports/STYLE-TOKENS.md of the round-3 run. Everything below that
 * existed in round 2 keeps its name; only values changed (accent, --nu-line) and .nu-card is flat by default (.nu-card--boxed is the old box).
 * D-084 site-wide UI foundation (component selectors are `.nrm-ui.nrm-ui .nu-*`, specificity 0,3,0: nuruma-ui.css resets margin/padding/border/background of div/p/ul/section inside `.nrm-ui.nrm-ui` at 0,2,1 and must not strip them): the shared scale and the shared components every surface (monthly list, portal, work info,
 * compare, legacy review blocks) builds on. Loaded right after nuruma-ui.css (dependency), scoped to `.nrm-ui` and `.nu-scope`
 * (`.nu-scope` = the same tokens for blocks that are not inside `.nrm-ui`, e.g. the legacy review components).
 * The base tokens of nuruma-ui.css are repeated here with the SAME values (so `.nu-scope` blocks outside `.nrm-ui` get them), with ONE
 * deliberate changes: --nu-muted is darkened to #645E68 (the old #767280 was 4.34:1 on --nu-bg) and --nu-line-strong (control borders) to
 * #8C8693 (3:1; was #CFC9D3 = 1.6:1). nuruma-ui.css also defines --nu-warn / --nu-ok: the foundation, loaded after it, overrides both. --nu-ok / --nu-warn / --nu-ng and
 * their grounds are new here; the --nu-fs-* / --nu-lh-* / --nu-shadow tokens are new.
 * Rules of the house: spacing 4/8/12/16/24/32 · type scale below (nothing under 12px) · one filled primary per place ·
 * state is always written out · images sit in a reserved frame and are never stretched or cropped. */
.nrm-ui, .nu-scope {
	--nu-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "BIZ UDPGothic", "Noto Sans JP", Meiryo, sans-serif; /* one stack for every surface; no web font, no external request */
	--nu-fw-title: 700; --nu-fw-strong: 700;
	--nu-text: #1F1B1E; --nu-sub: #55505A; --nu-muted: #645E68;
	--nu-link: #1F1B1E; --nu-hero: #FAF5F1; --nu-panel: #FFFDFB; --nu-r-xl: 16px; --nu-accent: #C2364E; --nu-accent-dark: #A32D42; --nu-accent-soft: #FDEEF0; /* coral-rose #C2364E: 5.3:1 with white (white-on-fill and text on white 5.2:1), 4.7:1 on --nu-accent-soft; dark #A32D42 7.4:1. The single primary fill and the selected state; charcoal --nu-link for text links */
	--nu-bg: #FDF8F9; --nu-surface: #FFFFFF; --nu-band: #F5F1EF; /* a quiet warm grey band (search): --nu-sub text 6.9:1 on it */
	--nu-line: #E6DADF; --nu-line-soft: #F0E7EA; --nu-rule: 1px solid #E6DADF; /* hairlines: dividers instead of boxes (decorative, not a control border) */
	--nu-line-strong: #8C8693; /* control borders: >= 3:1 on white, --nu-bg and --nu-accent-soft (WCAG 1.4.11); was #CFC9D3 = 1.6:1 */
	--nu-r-s: 4px; --nu-r: 8px; --nu-r-l: 12px; --nu-tap: 44px;
	/* buttons must be told apart from their background (owner rule): outlined = a border >= 4:1 on white / --nu-bg / --nu-accent-soft, primary = an accent fill (9.7:1 on white) */
	--nu-btn-border: #5F5A63; --nu-btn-border-selected: var(--nu-accent); --nu-btn-bg: var(--nu-surface); --nu-btn-bg-selected: var(--nu-accent-soft); --nu-btn-fill: var(--nu-accent); --nu-btn-fill-hover: var(--nu-accent-dark); --nu-btn-ink: #fff; --nu-btn-min: 44px;
	/* spacing rhythm 4 / 8 / 12 / 16 / 24 / 32 / 48 */
	--nu-sp-1: 4px; --nu-sp-2: 8px; --nu-sp-3: 12px; --nu-sp-4: 16px; --nu-sp-5: 24px; --nu-sp-6: 32px; --nu-sp-7: 48px;
	--nu-gap-block: 24px; --nu-gap-section: 32px;
	/* image scale: ONE large image per screen section, thumbnails elsewhere (widths; the ratio comes from the frame) */
	--nu-img-hero: min(100%, 240px); --nu-img-key: 112px; --nu-img-thumb-l: 80px; --nu-img-thumb: 56px;
	/* type scale: 12 / 13 / 15 / 17 / 20 / 24 / 30 */
	--nu-fs-xs: 12px; --nu-fs-s: 13px; --nu-fs-m: 15px; --nu-fs-l: 17px; --nu-fs-xl: 20px; --nu-fs-h2: 22px; --nu-fs-h1: 26px; --nu-fs-body: 15px;
	--nu-lh-tight: 1.35; --nu-lh-body: 1.65;
	/* readable state colours (text on white >= 4.5:1; never the only cue) */
	--nu-ok: #1E6A3C; --nu-ok-bg: #EAF5EE; --nu-warn: #7A4300; --nu-warn-bg: #FFF4DE; --nu-ng: #55515C; --nu-ng-bg: #EFEEF1;
	--nu-shadow: 0 1px 2px rgba(36, 33, 43, .06), 0 2px 8px rgba(36, 33, 43, .05);
}
@media (min-width: 700px) { .nrm-ui, .nu-scope { --nu-fs-h1: 30px; --nu-fs-h2: 24px; --nu-fs-body: 16px; --nu-gap-section: 48px; --nu-img-hero: min(100%, 320px); --nu-img-key: 152px; --nu-img-thumb-l: 96px; --nu-img-thumb: 64px; } }
.nu-scope { color: var(--nu-text); font-family: var(--nu-font); font-size: var(--nu-fs-body); line-height: var(--nu-lh-body); }
.nu-scope *, .nu-scope *::before, .nu-scope *::after { box-sizing: border-box; }
.nu-scope [hidden] { display: none !important; }

/* Section head: title + one-line sub + optional action, on one baseline (portal sections, collection, review blocks). */
.nrm-ui.nrm-ui .nu-head, .nu-scope .nu-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; }
.nrm-ui.nrm-ui .nu-head__t, .nu-scope .nu-head__t { margin: 0; font-size: var(--nu-fs-h2); line-height: var(--nu-lh-tight); font-weight: var(--nu-fw-title); color: var(--nu-text); overflow-wrap: anywhere; }
.nrm-ui.nrm-ui .nu-head__s, .nu-scope .nu-head__s { margin: 0; flex-basis: 100%; font-size: var(--nu-fs-s); color: var(--nu-sub); }
.nrm-ui.nrm-ui .nu-head__a, .nu-scope .nu-head__a { margin-left: auto; font-size: var(--nu-fs-s); font-weight: 700; }

/* Image frame: a reserved box (the size is known before the image loads). `contain` on a quiet ground: the whole image is
 * visible whatever its ratio, never stretched, never cropped; the ground fills the rest. Modifiers set the box ratio. */
/* The box SIZE has class-level specificity on purpose (0,1,0): a surface sets its own width / aspect-ratio (calendar thumbs, portal
 * cards, compare images) with a normal class selector. The look (ground, border, radius, clipping) must beat the reset (0,3,0). */
:where(.nrm-ui, .nu-scope) .nu-frame { width: 100%; aspect-ratio: 3 / 4; }
:where(.nrm-ui, .nu-scope) .nu-frame--sq { aspect-ratio: 1 / 1; }
:where(.nrm-ui, .nu-scope) .nu-frame--wide { aspect-ratio: 16 / 9; }
:where(.nrm-ui, .nu-scope) .nu-frame--land { aspect-ratio: 4 / 3; }
/* Image-scale classes: set only the WIDTH of a frame (ratio stays the frame's, contain stays). Hero = the one large cover of a view. */
.nrm-ui .nu-img--hero, .nu-scope .nu-img--hero { width: var(--nu-img-hero); max-width: 100%; flex: 0 0 auto; }
.nrm-ui .nu-img--key, .nu-scope .nu-img--key { width: var(--nu-img-key); max-width: 100%; flex: 0 0 auto; }
.nrm-ui .nu-img--thumb-l, .nu-scope .nu-img--thumb-l { width: var(--nu-img-thumb-l); max-width: 100%; flex: 0 0 auto; }
.nrm-ui .nu-img--thumb, .nu-scope .nu-img--thumb { width: var(--nu-img-thumb); max-width: 100%; flex: 0 0 auto; }
.nrm-ui.nrm-ui .nu-frame, .nu-scope .nu-frame { position: relative; display: block; overflow: hidden; background: var(--nu-bg); border: 1px solid var(--nu-line); border-radius: var(--nu-r); }
.nrm-ui.nrm-ui .nu-frame > img, .nu-scope .nu-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; display: block; }
/* No image: the reason is written out (未登録 / 非掲載 / 確認中); the title next to it always stays readable. */
.nrm-ui.nrm-ui .nu-frame--none, .nu-scope .nu-frame--none { display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; color: var(--nu-sub); font-size: var(--nu-fs-xs); line-height: 1.4; border-style: dashed; }
/* An image that failed to load falls back to the same written state (class set by nuruma-ui.js `.is-img-failed` or by CSS :has). */
.nrm-ui.nrm-ui .nu-frame.is-img-failed > img, .nu-scope .nu-frame.is-img-failed > img { visibility: hidden; }
.nrm-ui.nrm-ui .nu-frame.is-img-failed::after, .nu-scope .nu-frame.is-img-failed::after { content: attr(data-fail-text); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-size: var(--nu-fs-xs); color: var(--nu-sub); }

/* Work card (portal, collection): frame + body, one anatomy everywhere. */
.nrm-ui.nrm-ui .nu-cardgrid, .nu-scope .nu-cardgrid { display: grid; gap: 24px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .nrm-ui.nrm-ui .nu-cardgrid, .nu-scope .nu-cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; } }
@media (min-width: 1000px) { .nrm-ui.nrm-ui .nu-cardgrid, .nu-scope .nu-cardgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 359px) { .nrm-ui.nrm-ui .nu-cardgrid, .nu-scope .nu-cardgrid { grid-template-columns: minmax(0, 1fr); } }
/* Flat by default (round 3): image frame + text, no box. .nu-card--boxed brings the old box back where a border carries meaning. */
.nrm-ui.nrm-ui .nu-card, .nu-scope .nu-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.nrm-ui.nrm-ui .nu-card.nu-card--boxed, .nu-scope .nu-card.nu-card--boxed { padding: 8px; background: var(--nu-surface); border: 1px solid var(--nu-line); border-radius: var(--nu-r); }
.nrm-ui.nrm-ui .nu-card__t, .nu-scope .nu-card__t { margin: 0; font-size: var(--nu-fs-m); font-weight: var(--nu-fw-title); line-height: var(--nu-lh-tight); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.nrm-ui.nrm-ui .nu-card__m, .nu-scope .nu-card__m { margin: 0; font-size: var(--nu-fs-s); color: var(--nu-sub); overflow-wrap: anywhere; }
.nrm-ui.nrm-ui .nu-card__p, .nu-scope .nu-card__p { margin: 0; font-size: var(--nu-fs-l); font-weight: 700; font-variant-numeric: tabular-nums; }

/* States of a list / block: empty, error, loading. Words first; an action when there is one. */
.nrm-ui.nrm-ui .nu-state, .nu-scope .nu-state { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; background: var(--nu-bg); border: 1px solid var(--nu-line); border-radius: var(--nu-r); font-size: var(--nu-fs-m); color: var(--nu-text); }
.nrm-ui.nrm-ui .nu-state__t, .nu-scope .nu-state__t { margin: 0; font-weight: 700; }
.nrm-ui.nrm-ui .nu-state__d, .nu-scope .nu-state__d { margin: 0; font-size: var(--nu-fs-s); color: var(--nu-sub); }
.nrm-ui.nrm-ui .nu-state--error, .nu-scope .nu-state--error { background: var(--nu-warn-bg); border-color: #E6CF9B; }
.nrm-ui.nrm-ui .nu-state--error .nu-state__t, .nu-scope .nu-state--error .nu-state__t { color: var(--nu-warn); }
.nrm-ui.nrm-ui .nu-skel, .nu-scope .nu-skel { display: block; min-height: 16px; border-radius: var(--nu-r-s); background: linear-gradient(90deg, var(--nu-bg) 0%, #ECE9EF 50%, var(--nu-bg) 100%); background-size: 200% 100%; animation: nu-skel 1.4s ease-in-out infinite; }
@keyframes nu-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .nrm-ui.nrm-ui .nu-skel, .nu-scope .nu-skel { animation: none; } .nrm-ui *, .nu-scope * { scroll-behavior: auto !important; } }

/* Chips (applied filters, entry tiles) and the shared minimum operating target on touch screens. */
.nrm-ui.nrm-ui .nu-chip, .nu-scope .nu-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--nu-btn-border); border-radius: 999px; background: var(--nu-surface); font-size: var(--nu-fs-s); color: var(--nu-text); }
@media (pointer: coarse) { .nrm-ui.nrm-ui .nu-chip[role="button"], .nrm-ui.nrm-ui a.nu-chip, .nrm-ui.nrm-ui button.nu-chip, .nu-scope a.nu-chip, .nu-scope button.nu-chip { min-height: var(--nu-tap); } }
.nrm-ui.nrm-ui .nu-tap, .nu-scope .nu-tap { min-height: var(--nu-tap); }
@media (pointer: coarse) { .nrm-ui.nrm-ui .nu-linkrow a, .nu-scope .nu-linkrow a { display: inline-flex; align-items: center; min-height: var(--nu-tap); } }

/* Page behind an open MODAL does not scroll (native modal dialogs and the phone filter sheet; a non-modal dialog such as a notice does not lock); the compare dialog has its own lock. */
html:has(dialog:modal), html:has(.nrm-cal2-panel[role="dialog"]) { overflow: hidden; scrollbar-gutter: stable; } /* gutter: a classic scrollbar does not make the page jump sideways when the lock removes it (REVIEW-A11Y2 N-5) */
/* WCAG 2.4.11 (focus not obscured): on phones THE THOR's expanded bottom bar (fixed, about 50px, at the top of the page) would cover a focused control in the last 50px of
 * the first screen. scroll-padding-bottom on the document makes the browser scroll a focused element / anchor target into view ABOVE the bar. 64px = the bar plus 14px of air;
 * no layout change (scroll-padding only moves the scroll snapport), no scroll-padding-top touched (the sticky nav offsets of nuruma-ui.js / monthly-calendar.css stay). While the
 * compare tray is open, nuruma-compare.css (`html:has(.nrm-wi-cmpbar:not([hidden]))`, higher specificity) replaces it by the measured tray height, which already includes the
 * tray's own offset above the bar (--nuruma-tray-bottom). */
@media (max-width: 767px) { html:has(.nrm-ui), html:has(.nu-scope) { scroll-padding-bottom: calc(var(--nuruma-tray-bottom, 0px) + 64px); } }

/* Dark lightbox: the plum ring would be 2.6:1 there; a white ring with a black halo is visible on any picture. */
.nrm-ui.nrm-ui .nu-lightbox :focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #000; }
/* A failed-image reason must fit even the small thumbnails: it wraps anywhere. */
.nrm-ui.nrm-ui .nu-frame.is-img-failed::after, .nu-scope .nu-frame.is-img-failed::after { word-break: break-all; line-height: 1.25; padding: 4px; }

/* ---- Round 3 components (all additive) -------------------------------------------------------------------------------------------------- */
/* Section rhythm: whitespace between sections, a head per section. */
.nrm-ui.nrm-ui .nu-section, .nu-scope .nu-section { margin: var(--nu-gap-section) 0 0; }
.nrm-ui.nrm-ui .nu-section:first-child, .nu-scope .nu-section:first-child { margin-top: 0; }

/* Row list: the replacement of boxed cards. [media] [body], a hairline below, no box. */
.nrm-ui.nrm-ui .nu-rows, .nu-scope .nu-rows { margin: 0; padding: 0; list-style: none; border-top: var(--nu-rule); }
.nrm-ui.nrm-ui .nu-row, .nu-scope .nu-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; min-width: 0; padding: 12px 0; margin: 0; border: 0; border-bottom: var(--nu-rule); background: none; }
.nrm-ui.nrm-ui .nu-row.nu-row--plain, .nu-scope .nu-row.nu-row--plain { grid-template-columns: minmax(0, 1fr); }
.nrm-ui.nrm-ui .nu-row__body, .nu-scope .nu-row__body { display: grid; gap: 2px; min-width: 0; }
.nrm-ui.nrm-ui .nu-row__t, .nu-scope .nu-row__t { margin: 0; font-size: var(--nu-fs-m); font-weight: var(--nu-fw-title); line-height: var(--nu-lh-tight); overflow-wrap: anywhere; }
.nrm-ui.nrm-ui .nu-row__m, .nu-scope .nu-row__m { margin: 0; font-size: var(--nu-fs-s); color: var(--nu-sub); overflow-wrap: anywhere; }
.nrm-ui.nrm-ui .nu-row__p, .nu-scope .nu-row__p { margin: 0; font-size: var(--nu-fs-l); font-weight: var(--nu-fw-strong); font-variant-numeric: tabular-nums; }
.nrm-ui.nrm-ui .nu-row__act, .nu-scope .nu-row__act { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0; }

/* Text link with an arrow: the repeated action of a row (never a button per row). Written text first; the arrow is decoration. */
.nrm-ui.nrm-ui a.nu-link, .nu-scope a.nu-link { display: inline-flex; align-items: center; min-height: 32px; color: var(--nu-link); font-weight: var(--nu-fw-strong); text-decoration: none; background: none; border: 0; padding: 0; }
.nrm-ui.nrm-ui a.nu-link::after, .nu-scope a.nu-link::after { content: "\2192"; content: "\2192" / ""; margin-left: 6px; }
.nrm-ui.nrm-ui a.nu-link:hover, .nu-scope a.nu-link:hover { color: var(--nu-link); text-decoration: underline; text-underline-offset: 3px; }
.nrm-ui.nrm-ui a.nu-link.nu-link--sub, .nu-scope a.nu-link.nu-link--sub { color: var(--nu-sub); font-weight: 400; }
@media (pointer: coarse), (max-width: 767px) { .nrm-ui.nrm-ui a.nu-link, .nu-scope a.nu-link { min-height: var(--nu-tap); } }
@media (max-height: 480px) { .nrm-ui.nrm-ui a.nu-link, .nu-scope a.nu-link { min-height: var(--nu-tap); } }

/* Buttons for blocks outside .nrm-ui (inside .nrm-ui nuruma-ui.css has the same .nu-btn): neutral outlined, ONE filled primary per section, quiet = outlined accent, text = looks like a link. */
.nu-scope .nu-btn, .nu-scope .nu-btn-quiet, .nu-scope .nu-btn-text, .nrm-ui .nu-btn-quiet, .nrm-ui .nu-btn-text { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--nu-btn-min); padding: 8px 16px; border-radius: var(--nu-r); border: 1px solid var(--nu-btn-border); background: var(--nu-btn-bg); color: var(--nu-text); font-family: var(--nu-font); font-size: 14px; font-weight: var(--nu-fw-strong); line-height: 1.3; cursor: pointer; text-decoration: none; }
.nu-scope .nu-btn-primary, .nu-scope a.nu-btn-primary { background: var(--nu-btn-fill); border-color: var(--nu-btn-fill); color: var(--nu-btn-ink); }
.nu-scope .nu-btn-primary:hover, .nu-scope a.nu-btn-primary:hover { background: var(--nu-accent-dark); border-color: var(--nu-accent-dark); color: #fff; text-decoration: none; }
.nrm-ui.nrm-ui .nu-btn-quiet, .nu-scope .nu-btn-quiet, .nrm-ui.nrm-ui a.nu-btn-quiet, .nu-scope a.nu-btn-quiet { background: var(--nu-surface); border-color: var(--nu-btn-border); color: var(--nu-link); }
.nrm-ui.nrm-ui .nu-btn-quiet:hover, .nu-scope .nu-btn-quiet:hover, .nrm-ui.nrm-ui a.nu-btn-quiet:hover, .nu-scope a.nu-btn-quiet:hover { background: var(--nu-accent-soft); border-color: var(--nu-accent-dark); color: var(--nu-accent-dark); text-decoration: none; }
.nrm-ui.nrm-ui .nu-btn-text, .nu-scope .nu-btn-text, .nrm-ui.nrm-ui a.nu-btn-text, .nu-scope a.nu-btn-text { min-height: var(--nu-tap); padding: 0; border: 0; background: none; color: var(--nu-link); justify-content: flex-start; }
.nrm-ui.nrm-ui .nu-btn-text:hover, .nu-scope .nu-btn-text:hover, .nrm-ui.nrm-ui a.nu-btn-text:hover, .nu-scope a.nu-btn-text:hover { color: var(--nu-link); text-decoration: underline; text-underline-offset: 3px; background: none; }
@media (pointer: coarse), (max-width: 767px) { .nu-scope .nu-btn, .nu-scope .nu-btn-quiet, .nrm-ui .nu-btn-quiet { min-height: var(--nu-tap); } }

/* 広告 label: on every affiliate link, right after the link text. Inline-block so a parent link's underline never runs through it. */
.nrm-ui.nrm-ui .nu-ad, .nu-scope .nu-ad { display: inline-block; margin-left: 6px; padding: 0 4px; font-size: var(--nu-fs-xs); line-height: 1.5; font-weight: 400; color: var(--nu-sub); background: var(--nu-surface); border: 1px solid var(--nu-line-strong); border-radius: var(--nu-r-s); opacity: 1; vertical-align: 1px; white-space: nowrap; text-decoration: none; }

/* Tokens that never break inside (a date, a price, a counter), figures that line up, and the written unknown state. */
.nrm-ui .nu-tok, .nu-scope .nu-tok { white-space: nowrap; }
.nrm-ui .nu-num, .nu-scope .nu-num { font-variant-numeric: tabular-nums; }
.nrm-ui.nrm-ui .nu-unknown, .nu-scope .nu-unknown { font-size: var(--nu-fs-s); font-weight: 400; color: var(--nu-sub); }

/* ---- D-087 bottom navigation: the ONE glass element. A floating pill (thin border, soft shadow, blur behind it) with four items: icon over label, the current one in the deep rose on a pale pill.
 * Every other surface (body, price, compare, dialogs) stays opaque. Legibility first: the pill is 82% white with a blur; where blur is not supported, or the reader asks for less transparency, it is
 * solid. No motion at all except what the reader's system allows (nothing here animates). nuruma-nav.js lifts it above the theme's own bottom UI (--nuruma-nav-bottom) and publishes its height (--nuruma-nav-h).
 * It is not inside .nrm-ui on purpose: the compare tray treats it like any other fixed UI and sits above it. */
.nrm-nav { position: fixed; left: 0; right: 0; bottom: var(--nuruma-nav-bottom, 0px); z-index: 40; width: auto; box-sizing: border-box; margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); border: 0; border-top: 1px solid var(--nu-line); border-radius: 0; background: #fff; box-shadow: none; font-family: var(--nu-font); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.nrm-nav { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
}
@media (prefers-reduced-transparency: reduce) { .nrm-nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nrm-nav.is-kb { display: none; }
.nrm-nav .nrm-nav__list { display: flex; align-items: stretch; justify-content: space-between; gap: 2px; max-width: 640px; margin: 0 auto; padding: 0 8px; list-style: none; }
.nrm-nav .nrm-nav__li { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.nrm-nav .nrm-nav__li::before { content: none; }
.nrm-nav a.nrm-nav__i, .nrm-nav button.nrm-nav__i { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-sizing: border-box; width: 100%; min-height: 56px; margin: 0; padding: 8px 4px; border: 0; border-radius: 0; background: none; color: var(--nu-text); font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nrm-nav .nrm-nav__ic { display: block; width: 24px; height: 24px; flex: none; }
.nrm-nav .nrm-nav__t { display: block; max-width: 100%; text-align: center; overflow-wrap: anywhere; word-break: keep-all; } /* may wrap at large text sizes: never clipped */
.nrm-nav .nrm-nav__li.is-current a.nrm-nav__i { color: var(--nu-accent-dark); }
/* the selected entry: coral text and icon plus a short coral rule on the bar's top edge (and aria-current): never colour alone */
.nrm-nav .nrm-nav__li.is-current a.nrm-nav__i::before { content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 3px 3px; background: var(--nu-accent); }
.nrm-nav a.nrm-nav__i:hover, .nrm-nav button.nrm-nav__i:hover { background: rgba(31, 27, 30, .06); text-decoration: none; }
.nrm-nav .nrm-nav__li.is-current a.nrm-nav__i:hover { background: rgba(31, 27, 30, .04); }
.nrm-nav a.nrm-nav__i:focus-visible, .nrm-nav button.nrm-nav__i:focus-visible { outline: 2px solid var(--nu-accent-dark); outline-offset: -2px; }
.nrm-nav .nrm-nav__n { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--nu-accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.nrm-nav .nrm-nav__n[hidden] { display: none; }
/* A short message (what to do for the comparison): a plain opaque bubble above the pill. */
.nrm-nav .nrm-nav__live { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); margin: 0; padding: 10px 14px; border: 1px solid var(--nu-line-strong); border-radius: var(--nu-r); background: var(--nu-surface); color: var(--nu-text); font-size: var(--nu-fs-s); line-height: 1.5; box-shadow: var(--nu-shadow); }
.nrm-nav .nrm-nav__live:empty { display: none; }
/* The search dialog: a sheet at the top of the screen (the keyboard comes up from below, the field stays in view). Opaque. */
dialog.nrm-nav-sheet { position: fixed; inset: 0 0 auto 0; width: min(560px, 100%); max-width: 100%; margin: 0 auto; padding: 16px; border: 0; border-radius: 0 0 var(--nu-r-l) var(--nu-r-l); background: var(--nu-surface); color: var(--nu-text); box-shadow: 0 12px 32px rgba(31, 27, 30, .24); }
dialog.nrm-nav-sheet::backdrop { background: rgba(31, 27, 30, .45); }
dialog.nrm-nav-sheet form { display: grid; gap: 12px; margin: 0; }
dialog.nrm-nav-sheet .nrm-nav-sheet__t { margin: 0; font-size: var(--nu-fs-m); font-weight: 700; }
dialog.nrm-nav-sheet .nrm-nav-sheet__row { display: flex; gap: 8px; }
dialog.nrm-nav-sheet .nrm-nav-sheet__q { flex: 1 1 auto; min-width: 0; min-height: var(--nu-tap); box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: 16px; color: var(--nu-text); background: var(--nu-surface); border: 1px solid var(--nu-btn-border); border-radius: var(--nu-r); -webkit-appearance: none; appearance: none; }
dialog.nrm-nav-sheet .nu-btn-text { justify-self: end; min-height: var(--nu-tap); }
dialog.nrm-nav-sheet :focus-visible { outline: 2px solid var(--nu-accent-dark); outline-offset: 2px; }
/* The page keeps room at its end, and a focused control / anchor lands above the pill. */
html.nu-has-nav { padding-bottom: calc(var(--nuruma-nav-h, 0px) + 8px); }
:root.nu-has-nav { scroll-padding-bottom: calc(var(--nuruma-nav-h, 0px) + 16px); }
/* One bottom control on a phone: where the plugin's navigation is shown, THE THOR's own bottom bar (ホーム / メニュー / レビュー記事 / TOP - the same entries as its header menu) is not drawn, and
 * its floating 「TOP」 button sits above the navigation (and above the compare tray when it is open) instead of on top of it. Phones only; the theme and its settings are untouched
 * (a plugin stylesheet, removed with the plugin file). The class is set by nuruma-nav.js. */
@media (max-width: 767px) {
	html.nu-has-nav .controllerFooter { display: none !important; }
	html.nu-has-nav a#bottomFooter__topBtn { bottom: calc(var(--nuruma-nav-h, 0px) + 12px) !important; right: 12px !important; }
	html.nu-has-nav.nu-has-tray a#bottomFooter__topBtn { bottom: calc(var(--nuruma-tray-h, 0px) + 12px) !important; }
}
/* Short landscape (a phone on its side): no floating bar over a few lines of content - the same four items sit in the flow at the end of the page. */
@media (max-height: 480px) and (orientation: landscape) {
	.nrm-nav { position: static; left: auto; right: auto; width: auto; max-width: 560px; margin: 16px auto calc(16px + env(safe-area-inset-bottom, 0px)); padding: 0; border: 1px solid var(--nu-line); border-radius: var(--nu-r-l, 12px); background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
	.nrm-nav .nrm-nav__list { padding: 0; }
	.nrm-nav .nrm-nav__live { position: static; margin: 0 0 8px; }
	html.nu-has-nav { padding-bottom: 0; }
}
@media print { .nrm-nav, dialog.nrm-nav-sheet { display: none; } }
/* THE THOR header in its white-text mode: on a wide screen the theme draws the search icon at 50% white (about 2.6:1 on the header colour) and, on hover, in a dark red that
 * vanishes on it. The plugin's pages draw it solid white (6.7:1 on the header colour). A plugin stylesheet only: the theme and its settings are untouched. */
body.t-headerColor .l-header .searchBtn__link, body.t-headerColor .l-header .searchBtn__link:hover { color: #fff; } /* a literal: the --nu-* tokens are scoped to .nrm-ui and do not exist on the theme's header */
/* D-090: the white header (dark-text mode): the search icon is ink (16:1 on white), coral-dark on hover - never the theme's default grey or its dark red hover on a tinted bar. */
body:not(.t-headerColor) .l-header .searchBtn__link { color: #1F1B1E; }
/* ...and the theme's menu button: ink lines on the white header (the theme fills it with its old wine colour in this mode) */
body:not(.t-headerColor) .l-header .menuBtn, body:not(.t-headerColor) .l-header .menuBtn__link { background: transparent; }
body:not(.t-headerColor) .l-header .menuBtn__link { color: #1F1B1E; }
body:not(.t-headerColor) .l-header .menuBtn__link:hover { color: #A32D42; }
body:not(.t-headerColor) .l-header .searchBtn__link:hover, body:not(.t-headerColor) .l-header .searchBtn__link:focus-visible { color: #A32D42; }
@media (forced-colors: active) {
	.nrm-nav { background: Canvas; border: 2px solid CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
	.nrm-nav a.nrm-nav__i, .nrm-nav button.nrm-nav__i { color: LinkText; }
	.nrm-nav .nrm-nav__li.is-current a.nrm-nav__i { border: 2px solid Highlight; color: HighlightText; background: Highlight; forced-color-adjust: none; }
	dialog.nrm-nav-sheet { border: 2px solid CanvasText; }
}

/* ==== D-090 SORBET: one design language for the three screens (TOP / month list / work info). Reference = Scrolltide's public previews (Sorbet Mesh,
 * Liquid Glass Button, Card Bookmark, Morph Pill Card, Glow Ring Button), re-implemented here from scratch: no source, image or video of theirs.
 * Every part draws from the SAME tokens: colour (warm white, ink, coral axis, three sorbet tints), radius (pill / 20px card), edge (a white inner light +
 * a warm hairline), elevation (two steps), light (one strength) and motion (press 140ms, UI 360ms, drift 24s, orbit 7s, one easing).
 * Motion is decoration only: every state is readable and operable when it stops (prefers-reduced-motion, off-screen pause, no JS). */
.nrm-ui, .nu-scope {
	--nu-warm: #FFFBF6; --nu-warm-2: #FFF6EE;
	--nu-sorbet-cream: #FFF0E2; --nu-sorbet-peach: #FBC6A8; --nu-sorbet-coral: #F2917F; --nu-sorbet-pink: #F6B4C3;
	--nu-edge-light: rgba(255, 255, 255, .78); --nu-edge: rgba(92, 40, 48, .10);
	--nu-elev-1: 0 1px 2px rgba(92, 40, 48, .06), 0 8px 20px -10px rgba(92, 40, 48, .20);
	--nu-elev-2: 0 2px 4px rgba(92, 40, 48, .08), 0 18px 36px -14px rgba(92, 40, 48, .30);
	--nu-r-card: 20px; --nu-r-pill: 999px;
	--nu-white: #FFFFFF; --nu-chip-bg: rgba(255, 255, 255, .72);
	--nu-print-card: 0 1px 2px rgba(92, 40, 48, .06), 0 14px 30px -24px rgba(92, 40, 48, .4); --nu-print-card-hover: 0 1px 2px rgba(92, 40, 48, .08), 0 22px 40px -26px rgba(92, 40, 48, .5);
	--nu-print-flat: 0 1px 2px rgba(92, 40, 48, .12), 0 30px 48px -30px rgba(92, 40, 48, .55); --nu-print-lead: 0 1px 2px rgba(92, 40, 48, .1), 0 18px 32px -24px rgba(92, 40, 48, .5); --nu-inset-soft: inset 0 1px 2px rgba(92, 40, 48, .06); /* D-091: a picture laid flat on the page; a field pressed into it */
	--nu-pool-1: rgba(255, 251, 246, .86); --nu-pool-2: rgba(255, 251, 246, .66); --nu-pool-0: rgba(255, 251, 246, 0); /* the soft pool of warm light under text on the mesh */
	--nu-print: 0 0 0 1px rgba(255, 255, 255, .7), 0 2px 4px rgba(92, 40, 48, .1), 0 26px 50px -22px rgba(92, 40, 48, .5); --nu-print-s: 0 0 0 1px rgba(255, 255, 255, .7), 0 14px 28px -16px rgba(92, 40, 48, .4); /* a picture laid on a surface */
	--nu-ease: cubic-bezier(.2, .8, .2, 1); --nu-dur-press: 140ms; --nu-dur-ui: 360ms; --nu-dur-drift: 24s; --nu-dur-orbit: 7s;
}
@property --nu-gx { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --nu-gy { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --nu-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* -- Sorbet Mesh: peach / coral / pink fields drifting slowly on cream, with a fine grain. Three blurred discs move by transform only (composited, no repaint
 * per frame); the grain is a small SVG noise tile. Behind content only; pictures sit ON it and are never filtered or distorted. */
.nu-mesh { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; background: linear-gradient(160deg, var(--nu-sorbet-cream) 0%, var(--nu-warm) 62%); }
.nu-mesh > i { position: absolute; display: block; width: 62%; aspect-ratio: 1; border-radius: 50%; filter: blur(56px); opacity: .9; will-change: transform; animation: nu-drift-a var(--nu-dur-drift) var(--nu-ease) infinite alternate; }
.nu-mesh > i:nth-child(1) { left: 48%; top: -24%; background: var(--nu-sorbet-coral); }
.nu-mesh > i:nth-child(2) { left: -14%; top: 26%; width: 56%; background: var(--nu-sorbet-pink); animation-name: nu-drift-b; animation-duration: calc(var(--nu-dur-drift) * 1.3); }
.nu-mesh > i:nth-child(3) { left: 26%; top: 48%; width: 74%; background: var(--nu-sorbet-peach); animation-name: nu-drift-c; animation-duration: calc(var(--nu-dur-drift) * 1.6); }
.nu-mesh > b { position: absolute; inset: 0; opacity: .2; mix-blend-mode: multiply; background-size: 180px 180px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
@keyframes nu-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-20%, 16%, 0) scale(1.18); } }
@keyframes nu-drift-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(24%, -12%, 0) scale(.9); } }
@keyframes nu-drift-c { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-14%, -18%, 0) scale(.92); } }
.nu-mesh.is-paused > i { animation-play-state: paused; } /* nuruma-ui.js: off screen or the tab hidden */

/* -- Liquid Glass Button (the primary action): a coral-tinted glass pill. A real lens: the backdrop is blurred and saturated, the bevel is an inner light on top
 * and an inner shade at the foot, a light follows the pointer (--nu-gx / --nu-gy, set by nuruma-ui.js on fine pointers, eased by the registered properties),
 * a sheen crosses once on keyboard focus, and a press sinks it. White label >= 4.5:1 on every part of the fill. */
.nrm-ui.nrm-ui .nu-glass, .nu-scope .nu-glass { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: 52px; padding: 12px 24px 12px 28px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--nu-r-pill); overflow: hidden;
	color: #fff; font-family: var(--nu-font); font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
	background: linear-gradient(180deg, rgba(196, 56, 80, .84) 0%, rgba(184, 48, 72, .86) 52%, rgba(150, 38, 60, .92) 100%);
	-webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .28), inset 0 -10px 16px -8px rgba(255, 196, 176, .42), inset 0 -3px 8px rgba(110, 18, 38, .32), 0 1px 2px rgba(92, 40, 48, .14), 0 12px 26px -12px rgba(156, 40, 62, .62); /* the lens: a light rim, a warm caustic at the foot, a shade under it */
	transition: transform var(--nu-dur-press) var(--nu-ease), box-shadow var(--nu-dur-ui) var(--nu-ease), --nu-gx var(--nu-dur-ui) var(--nu-ease), --nu-gy var(--nu-dur-ui) var(--nu-ease); }
.nrm-ui.nrm-ui .nu-glass::before, .nu-scope .nu-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(140px 70px at var(--nu-gx) var(--nu-gy), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%); } /* light strength kept low: the white label stays >= 3:1 (large text) where the light passes */
.nrm-ui.nrm-ui .nu-glass::after, .nu-scope .nu-glass::after { content: ""; position: absolute; left: 12px; right: 12px; top: 2px; height: 38%; z-index: -1; border-radius: var(--nu-r-pill); pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)); }
.nrm-ui.nrm-ui .nu-glass:hover, .nu-scope .nu-glass:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -4px 10px rgba(110, 18, 38, .4), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 4px rgba(92, 40, 48, .16), 0 18px 32px -12px rgba(156, 40, 62, .7); }
.nrm-ui.nrm-ui .nu-glass:active, .nu-scope .nu-glass:active { transform: translateY(1px) scale(.97); box-shadow: inset 0 2px 8px rgba(110, 18, 38, .55), inset 0 -1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(92, 40, 48, .14); }
.nrm-ui.nrm-ui .nu-glass:focus-visible, .nu-scope .nu-glass:focus-visible { color: #fff; outline: 3px solid var(--nu-accent-dark); outline-offset: 3px; animation: nu-sheen 1.1s var(--nu-ease) 1; }
.nrm-ui.nrm-ui .nu-glass .nu-glass__arrow, .nu-scope .nu-glass .nu-glass__arrow { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); font-size: 15px; line-height: 1; transition: transform var(--nu-dur-ui) var(--nu-ease); }
.nrm-ui.nrm-ui .nu-glass:hover .nu-glass__arrow, .nu-scope .nu-glass:hover .nu-glass__arrow { transform: translate(2px, -2px); }
@keyframes nu-sheen { 0% { --nu-gx: -20%; --nu-gy: 30%; } 100% { --nu-gx: 120%; --nu-gy: 30%; } }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nrm-ui.nrm-ui .nu-glass, .nu-scope .nu-glass { background: linear-gradient(180deg, rgb(196, 56, 80), rgb(156, 40, 62)); } }

/* -- Glow Ring (secondary entries: all reviews, price / bonus lists): an icon disc whose ring of sorbet light travels round it, settling to coral on hover / focus. */
.nrm-ui.nrm-ui .nu-glow, .nu-scope .nu-glow { display: inline-flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 48px; padding: 6px 18px 6px 6px; border: 1px solid var(--nu-edge); border-radius: var(--nu-r-pill); background: var(--nu-warm); color: var(--nu-text); font-size: var(--nu-fs-m); font-weight: 700; line-height: 1.3; text-decoration: none;
	box-shadow: inset 0 1px 0 var(--nu-edge-light), var(--nu-elev-1); transition: transform var(--nu-dur-ui) var(--nu-ease), box-shadow var(--nu-dur-ui) var(--nu-ease); }
.nrm-ui.nrm-ui .nu-glow__disc, .nu-scope .nu-glow__disc { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--nu-accent-dark); }
.nrm-ui.nrm-ui .nu-glow__disc svg, .nu-scope .nu-glow__disc svg { position: relative; z-index: 1; width: 20px; height: 20px; }
.nrm-ui.nrm-ui .nu-glow__disc::before, .nu-scope .nu-glow__disc::before, .nrm-ui.nrm-ui .nu-glow__disc::after, .nu-scope .nu-glow__disc::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none;
	background: conic-gradient(from var(--nu-ang), var(--nu-sorbet-coral), var(--nu-sorbet-pink), var(--nu-sorbet-peach), var(--nu-accent), var(--nu-sorbet-coral)); animation: nu-orbit var(--nu-dur-orbit) linear infinite; }
.nrm-ui.nrm-ui .nu-glow__disc::before, .nu-scope .nu-glow__disc::before { inset: -3px; padding: 2.5px; -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor; mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0); }
.nrm-ui.nrm-ui .nu-glow__disc::after, .nu-scope .nu-glow__disc::after { inset: -6px; z-index: -1; filter: blur(7px); opacity: .5; }
.nrm-ui.nrm-ui .nu-glow:hover, .nu-scope .nu-glow:hover, .nrm-ui.nrm-ui .nu-glow:focus-visible, .nu-scope .nu-glow:focus-visible { color: var(--nu-text); text-decoration: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--nu-edge-light), var(--nu-elev-2); }
.nrm-ui.nrm-ui .nu-glow:hover .nu-glow__disc::before, .nu-scope .nu-glow:hover .nu-glow__disc::before, .nrm-ui.nrm-ui .nu-glow:focus-visible .nu-glow__disc::before, .nu-scope .nu-glow:focus-visible .nu-glow__disc::before { background: var(--nu-accent); animation-play-state: paused; }
.nrm-ui.nrm-ui .nu-glow:focus-visible, .nu-scope .nu-glow:focus-visible { outline: 3px solid var(--nu-accent-dark); outline-offset: 3px; }
.nrm-ui.nrm-ui .nu-glow.is-paused .nu-glow__disc::before, .nrm-ui.nrm-ui .nu-glow.is-paused .nu-glow__disc::after, .nu-scope .nu-glow.is-paused .nu-glow__disc::before, .nu-scope .nu-glow.is-paused .nu-glow__disc::after { animation-play-state: paused; }
@keyframes nu-orbit { to { --nu-ang: 360deg; } }

/* -- Bookmark card (new reviews): a card with a tab on its top edge (the date) and a bite out of its foot; on hover / focus the picture's own colours bloom
 * through the card (a blurred copy of the same picture, under a light veil so the text stays >= 4.5:1). Appearance only: nothing is saved. */
.nrm-ui.nrm-ui .nu-bm, .nu-scope .nu-bm { position: relative; margin-top: 22px; filter: drop-shadow(0 1px 1px rgba(92, 40, 48, .1)) drop-shadow(0 12px 18px rgba(92, 40, 48, .14)); transition: transform var(--nu-dur-ui) var(--nu-ease), filter var(--nu-dur-ui) var(--nu-ease); }
.nrm-ui.nrm-ui .nu-bm__tab, .nu-scope .nu-bm__tab { position: absolute; left: 0; top: -22px; z-index: 2; display: flex; align-items: center; gap: 6px; box-sizing: border-box; height: 23px; min-width: 40%; max-width: 70%; padding: 2px 14px 0; border-radius: 14px 14px 0 0; background: var(--nu-bm-bg, var(--nu-warm)); color: var(--nu-sub); font-size: var(--nu-fs-xs); font-weight: 700; line-height: 1; white-space: nowrap; }
.nrm-ui.nrm-ui .nu-bm__tab::after, .nu-scope .nu-bm__tab::after { content: ""; position: absolute; right: -14px; bottom: 0; width: 14px; height: 14px; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--nu-bm-bg, var(--nu-warm)) 14px); }
.nrm-ui.nrm-ui .nu-bm__tab::before, .nu-scope .nu-bm__tab::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nu-accent); }
.nrm-ui.nrm-ui .nu-bm__body, .nu-scope .nu-bm__body { position: relative; overflow: hidden; border-radius: 0 var(--nu-r-card) var(--nu-r-card) var(--nu-r-card); background: var(--nu-bm-bg, var(--nu-warm));
	-webkit-mask: radial-gradient(circle 19px at calc(100% - 46px) 100%, transparent 18.5px, black 19px); mask: radial-gradient(circle 19px at calc(100% - 46px) 100%, transparent 18.5px, black 19px); }
.nrm-ui.nrm-ui .nu-bm__body > *, .nu-scope .nu-bm__body > * { position: relative; z-index: 1; }
.nrm-ui.nrm-ui .nu-bm__bloom, .nu-scope .nu-bm__bloom { position: absolute !important; inset: -25%; z-index: 0 !important; opacity: 0; pointer-events: none; transition: opacity var(--nu-dur-ui) var(--nu-ease); }
.nrm-ui.nrm-ui .nu-bm__bloom img, .nu-scope .nu-bm__bloom img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: blur(40px) saturate(1.9); }
.nrm-ui.nrm-ui .nu-bm__bloom::after, .nu-scope .nu-bm__bloom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 251, 246, .5), rgba(255, 251, 246, .78)); }
.nrm-ui.nrm-ui .nu-bm:hover, .nu-scope .nu-bm:hover, .nrm-ui.nrm-ui .nu-bm:focus-within, .nu-scope .nu-bm:focus-within { transform: translateY(-3px); filter: drop-shadow(0 2px 2px rgba(92, 40, 48, .08)) drop-shadow(0 18px 26px rgba(92, 40, 48, .16)); }
.nrm-ui.nrm-ui .nu-bm:hover .nu-bm__bloom, .nu-scope .nu-bm:hover .nu-bm__bloom, .nrm-ui.nrm-ui .nu-bm:focus-within .nu-bm__bloom, .nu-scope .nu-bm:focus-within .nu-bm__bloom { opacity: .9; }
.nrm-ui.nrm-ui .nu-bm:has(:focus-visible) .nu-bm__body, .nu-scope .nu-bm:has(:focus-visible) .nu-bm__body { box-shadow: inset 0 0 0 3px var(--nu-accent-dark); }
@media (hover: none) { .nrm-ui.nrm-ui .nu-bm__bloom, .nu-scope .nu-bm__bloom { opacity: .35; } } /* touch: a resting bloom, so the colour is there without a hover */

/* -- Morph pill (bonus / shop details): a pill that becomes the detail card in the same surface. A native <details>: tap, click, Enter / Space open it without
 * script; nuruma-ui.js only adds Escape. Where the browser can interpolate sizes the pill visibly grows into the card; elsewhere it opens at once. */
.nrm-ui.nrm-ui .nu-morph, .nu-scope .nu-morph { box-sizing: border-box; width: fit-content; max-width: 100%; margin: 0; border: 1px solid var(--nu-edge); border-radius: 22px; background: var(--nu-warm-2); box-shadow: inset 0 1px 0 var(--nu-edge-light); interpolate-size: allow-keywords;
	transition: width var(--nu-dur-ui) var(--nu-ease), border-radius var(--nu-dur-ui) var(--nu-ease), background-color var(--nu-dur-ui) var(--nu-ease), box-shadow var(--nu-dur-ui) var(--nu-ease); }
.nrm-ui.nrm-ui .nu-morph[open], .nu-scope .nu-morph[open] { width: 100%; border-radius: 16px; background: var(--nu-warm); box-shadow: inset 0 1px 0 var(--nu-edge-light), var(--nu-elev-1); }
.nrm-ui.nrm-ui .nu-morph > summary, .nu-scope .nu-morph > summary { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 40px; padding: 6px 14px 6px 8px; list-style: none; cursor: pointer; color: var(--nu-text); font-size: var(--nu-fs-s); font-weight: 700; line-height: 1.3; border-radius: inherit; -webkit-tap-highlight-color: transparent; }
.nrm-ui.nrm-ui .nu-morph > summary::-webkit-details-marker, .nu-scope .nu-morph > summary::-webkit-details-marker { display: none; }
.nrm-ui.nrm-ui .nu-morph > summary::before, .nu-scope .nu-morph > summary::before { content: "i"; display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--nu-accent-dark); font: italic 700 13px/1 Georgia, serif; box-shadow: inset 0 0 0 1px var(--nu-edge); }
.nrm-ui.nrm-ui .nu-morph > summary::after, .nu-scope .nu-morph > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--nu-dur-ui) var(--nu-ease); }
.nrm-ui.nrm-ui .nu-morph[open] > summary::after, .nu-scope .nu-morph[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.nrm-ui.nrm-ui .nu-morph > summary:focus-visible, .nu-scope .nu-morph > summary:focus-visible { outline: 3px solid var(--nu-accent-dark); outline-offset: 2px; }
.nrm-ui.nrm-ui .nu-morph::details-content, .nu-scope .nu-morph::details-content { height: 0; overflow: clip; opacity: 0; transition: height var(--nu-dur-ui) var(--nu-ease), opacity var(--nu-dur-ui) var(--nu-ease), content-visibility var(--nu-dur-ui) allow-discrete; }
.nrm-ui.nrm-ui .nu-morph[open]::details-content, .nu-scope .nu-morph[open]::details-content { height: auto; opacity: 1; }
.nrm-ui.nrm-ui .nu-morph__card, .nu-scope .nu-morph__card { padding: 4px 16px 14px 40px; font-size: var(--nu-fs-s); line-height: 1.7; color: var(--nu-text); }
.nrm-ui.nrm-ui .nu-morph__card > * + *, .nu-scope .nu-morph__card > * + * { margin-top: 6px; }

/* Reduced motion: everything settles to its still state (no drift, no orbit, no sheen, no morph tween, no lift); information and controls stay. */
@media (prefers-reduced-motion: reduce) {
	.nu-mesh > i:nth-child(n), .nrm-ui.nrm-ui .nu-glow__disc::before, .nrm-ui.nrm-ui .nu-glow__disc::after, .nu-scope .nu-glow__disc::before, .nu-scope .nu-glow__disc::after, .nrm-ui.nrm-ui .nu-glass:focus-visible, .nu-scope .nu-glass:focus-visible { animation: none; }
	.nrm-ui.nrm-ui .nu-glass, .nu-scope .nu-glass, .nrm-ui.nrm-ui .nu-glass .nu-glass__arrow, .nu-scope .nu-glass .nu-glass__arrow, .nrm-ui.nrm-ui .nu-glow, .nu-scope .nu-glow, .nrm-ui.nrm-ui .nu-bm, .nu-scope .nu-bm, .nrm-ui.nrm-ui .nu-morph, .nu-scope .nu-morph, .nrm-ui.nrm-ui .nu-morph::details-content, .nu-scope .nu-morph::details-content, .nrm-ui.nrm-ui .nu-bm__bloom, .nu-scope .nu-bm__bloom { transition: none; }
	.nrm-ui.nrm-ui .nu-glass:hover, .nu-scope .nu-glass:hover, .nrm-ui.nrm-ui .nu-glow:hover, .nu-scope .nu-glow:hover, .nrm-ui.nrm-ui .nu-bm:hover, .nu-scope .nu-bm:hover, .nrm-ui.nrm-ui .nu-bm:focus-within, .nu-scope .nu-bm:focus-within, .nrm-ui.nrm-ui .nu-glow:focus-visible, .nu-scope .nu-glow:focus-visible { transform: none; }
}
@media (prefers-reduced-transparency: reduce) { .nrm-ui.nrm-ui .nu-glass, .nu-scope .nu-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgb(196, 56, 80), rgb(156, 40, 62)); } }
@media (forced-colors: active) {
	.nu-mesh, .nrm-ui.nrm-ui .nu-bm__bloom, .nu-scope .nu-bm__bloom { display: none; }
	.nrm-ui.nrm-ui .nu-glass, .nu-scope .nu-glass { border: 2px solid ButtonText; color: ButtonText; background: ButtonFace; forced-color-adjust: none; }
	.nrm-ui.nrm-ui .nu-glow, .nu-scope .nu-glow, .nrm-ui.nrm-ui .nu-morph, .nu-scope .nu-morph { border: 1px solid ButtonText; }
	.nrm-ui.nrm-ui .nu-bm__body, .nu-scope .nu-bm__body { border: 1px solid CanvasText; }
}

/* PC (>= 1024px): the four items are one row at the top of the content column (nuruma-nav.js moves the bar there), in the flow (not sticky) - never laid over
 * text or buttons. The selected item is the coral fill (the selection axis); the others are ink on the warm glass. Phones keep the bottom bar. */
@media (min-width: 1024px) {
	.nrm-nav.is-top { position: relative; top: auto; left: auto; right: auto; bottom: auto; z-index: 30; width: fit-content; max-width: 100%; margin: -8px 0 12px auto; padding: 4px; border: 1px solid var(--nu-edge); border-radius: 999px; background: rgba(255, 251, 246, .9); box-shadow: inset 0 1px 0 var(--nu-edge-light), var(--nu-elev-1); }
	.nrm-nav.is-top .nrm-nav__list { max-width: none; gap: 2px; padding: 0; }
	.nrm-nav.is-top .nrm-nav__li { flex: 0 0 auto; }
	.nrm-nav.is-top a.nrm-nav__i, .nrm-nav.is-top button.nrm-nav__i { flex-direction: row; gap: 8px; min-height: 44px; padding: 6px 18px 6px 14px; border-radius: 999px; font-size: 14px; }
	.nrm-nav.is-top .nrm-nav__ic { width: 20px; height: 20px; }
	.nrm-nav.is-top .nrm-nav__li.is-current a.nrm-nav__i { color: #fff; background: linear-gradient(180deg, rgb(196, 56, 80), rgb(160, 42, 64)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 6px rgba(110, 18, 38, .3); }
	.nrm-nav.is-top .nrm-nav__li.is-current a.nrm-nav__i::before { display: none; }
	.nrm-nav.is-top .nrm-nav__li.is-current a.nrm-nav__i:hover { background: linear-gradient(180deg, rgb(186, 50, 74), rgb(150, 38, 60)); }
	.nrm-nav.is-top .nrm-nav__live { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; width: 22em; }
	.nrm-nav.is-top .nrm-nav__n { top: 2px; left: auto; right: 4px; }
	html.nu-has-nav.nu-nav-top { padding-bottom: 0; }
}
@media (min-width: 1024px) and (forced-colors: active) { .nrm-nav.is-top .nrm-nav__li.is-current a.nrm-nav__i { background: Highlight; color: HighlightText; } }

/* Forced colours (Windows high contrast): the UA swaps every colour for a system colour and drops shadows / background images. Frames, cards and
 * states keep their (width / style) borders, a loading skeleton gets a border (its gradient disappears), the focus ring is a system colour. */
@media (forced-colors: active) {
	.nrm-ui.nrm-ui .nu-frame, .nu-scope .nu-frame, .nrm-ui.nrm-ui .nu-card, .nu-scope .nu-card, .nrm-ui.nrm-ui .nu-state, .nu-scope .nu-state { border-color: CanvasText; }
	.nrm-ui.nrm-ui .nu-skel, .nu-scope .nu-skel { border: 1px solid GrayText; background: none; }
	.nrm-ui.nrm-ui .nu-chip, .nu-scope .nu-chip { border-color: ButtonText; }
	.nrm-ui.nrm-ui .nu-rows, .nu-scope .nu-rows, .nrm-ui.nrm-ui .nu-row, .nu-scope .nu-row { border-color: CanvasText; }
	.nrm-ui.nrm-ui .nu-ad, .nu-scope .nu-ad { border-color: ButtonText; color: ButtonText; }
	.nrm-ui.nrm-ui a.nu-link, .nu-scope a.nu-link, .nrm-ui.nrm-ui .nu-btn-text, .nu-scope .nu-btn-text { text-decoration: underline; }
	.nrm-ui.nrm-ui .nu-btn-quiet, .nu-scope .nu-btn-quiet, .nu-scope .nu-btn { border-color: ButtonText; }
	.nu-scope .nu-btn-primary { border: 2px solid Highlight; }
	.nrm-ui.nrm-ui .nu-chip[aria-pressed="true"], .nu-scope .nu-chip[aria-pressed="true"] { border-width: 2px; text-decoration: underline; }
	.nu-scope :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
	.nrm-ui.nrm-ui .nu-lightbox :focus-visible { outline: 2px solid Highlight; box-shadow: none; }
}

/* ==== D-091: one page, not boxes. The navigation is printed at the start of the content (work-pages.php): on a wide screen it is a plain row of tabs on the
 * page ground - no pill, no box - aligned with the content; the selected tab is coral with a short rule. The glass is kept where a background shows through
 * (the hero button on the mesh) and quietened: a thin rim, a soft lift, no heavy gloss. Pressing anything answers at once (a small sink, 120ms). */
@media (min-width: 1024px) {
	.nrm-nav.is-top { position: relative; top: auto; left: auto; right: auto; bottom: auto; z-index: 1; width: auto; max-width: none; margin: -6px 0 20px; padding: 0; border: 0; border-bottom: 1px solid var(--nu-edge, rgba(92, 40, 48, .1)); border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
	.nrm-nav.is-top .nrm-nav__list { justify-content: flex-start; gap: 4px; max-width: none; margin: 0; padding: 0; }
	.nrm-nav.is-top .nrm-nav__li { flex: 0 0 auto; }
	.nrm-nav.is-top a.nrm-nav__i, .nrm-nav.is-top button.nrm-nav__i { flex-direction: row; gap: 8px; min-height: 48px; padding: 8px 14px; border-radius: 0; font-size: 14px; font-weight: 700; color: var(--nu-sub, #55505A); background: none; box-shadow: none; }
	.nrm-nav.is-top .nrm-nav__ic { width: 18px; height: 18px; }
	.nrm-nav.is-top a.nrm-nav__i:hover, .nrm-nav.is-top button.nrm-nav__i:hover { color: var(--nu-text, #1F1B1E); background: none; }
	.nrm-nav.is-top .nrm-nav__li.is-current a.nrm-nav__i { color: var(--nu-accent-dark, #A32D42); background: none; box-shadow: none; }
	.nrm-nav.is-top .nrm-nav__li.is-current a.nrm-nav__i::before { content: ""; display: block; position: absolute; top: auto; bottom: -1px; left: 14px; right: 14px; width: auto; height: 2px; margin: 0; border-radius: 2px 2px 0 0; background: var(--nu-accent, #C2364E); }
	.nrm-nav.is-top .nrm-nav__li.is-current a.nrm-nav__i:hover { background: none; }
	.nrm-nav.is-top .nrm-nav__live { top: calc(100% + 8px); bottom: auto; left: 0; right: auto; width: 22em; }
	.nrm-nav.is-top .nrm-nav__n { position: static; margin-left: 2px; }
	.nrm-nav.is-top a.nrm-nav__i:focus-visible, .nrm-nav.is-top button.nrm-nav__i:focus-visible { outline-offset: 2px; border-radius: 6px; }
}
/* ==== D-107: the navigation as in the approved mock - a dark glass pill, the selected item white (the bottom bar of a phone is already dark). */
@media (min-width: 1024px) {
	.nrm-nav.is-top { width: fit-content; margin: -6px 0 18px 0; padding: 5px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(20, 16, 24, .86); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 34px -18px rgba(0, 0, 0, .6); }
	.nrm-nav.is-top .nrm-nav__list { gap: 2px; }
	.nrm-nav.is-top a.nrm-nav__i, .nrm-nav.is-top button.nrm-nav__i { min-height: 44px; padding: 6px 18px 6px 14px; border-radius: 999px; color: rgba(255, 255, 255, .86); }
	.nrm-nav.is-top a.nrm-nav__i:hover, .nrm-nav.is-top button.nrm-nav__i:hover { color: #fff; background: rgba(255, 255, 255, .14); }
	.nrm-nav.is-top .nrm-nav__li.is-current a.nrm-nav__i { color: #1F1B1E; background: #fff; }
	.nrm-nav.is-top .nrm-nav__li.is-current a.nrm-nav__i::before { display: none; }
	.nrm-nav.is-top .nrm-nav__li.is-current a.nrm-nav__i:hover { color: #1F1B1E; background: #fff; }
	.nrm-nav.is-top a.nrm-nav__i:focus-visible, .nrm-nav.is-top button.nrm-nav__i:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 999px; }
}
@media (min-width: 1024px) and (prefers-reduced-transparency: reduce) { .nrm-nav.is-top { background: #1B1620; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (min-width: 1024px) and (forced-colors: active) { .nrm-nav.is-top { background: Canvas; border: 1px solid CanvasText; } .nrm-nav.is-top a.nrm-nav__i { color: LinkText; } .nrm-nav.is-top .nrm-nav__li.is-current a.nrm-nav__i { background: Highlight; color: HighlightText; } }
/* The TOP hero band runs from screen edge to screen edge only on the page that clips its own horizontal overflow (the acceptance page prints #nuruma-chrome-minimal with body { overflow-x: clip }); elsewhere the mesh stays inside the content column. */
/* D-092: the mesh is no longer a band - it is the stage behind the picture (nuruma-portal.css places it in the picture's grid cell) */
/* the glass, quietened: translucent coral on the mesh, a thin light rim, a soft lift; no thick bevel, no dark halo */
.nrm-ui.nrm-ui .nu-glass, .nu-scope .nu-glass { border: 1px solid rgba(255, 255, 255, .38); font-size: 17px; letter-spacing: 0;
	background: linear-gradient(180deg, rgba(196, 56, 80, .8) 0%, rgba(176, 46, 70, .86) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(110, 18, 38, .18), 0 10px 24px -14px rgba(156, 40, 62, .55); }
.nrm-ui.nrm-ui .nu-glass::after, .nu-scope .nu-glass::after { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); }
.nrm-ui.nrm-ui .nu-glass:hover, .nu-scope .nu-glass:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(110, 18, 38, .18), 0 14px 28px -14px rgba(156, 40, 62, .6); }
.nrm-ui.nrm-ui .nu-glass:active, .nu-scope .nu-glass:active { transform: scale(.97); box-shadow: inset 0 1px 3px rgba(110, 18, 38, .3); }
.nrm-ui.nrm-ui .nu-glass .nu-glass__arrow, .nu-scope .nu-glass .nu-glass__arrow { background: rgba(255, 255, 255, .16); box-shadow: none; }
/* glow entries: the ring on the disc stays; the pill box around it goes (text link with its disc) */
.nrm-ui.nrm-ui .nu-glow, .nu-scope .nu-glow { padding: 4px 8px 4px 2px; border: 0; background: transparent; box-shadow: none; }
.nrm-ui.nrm-ui .nu-glow:hover, .nu-scope .nu-glow:hover, .nrm-ui.nrm-ui .nu-glow:focus-visible, .nu-scope .nu-glow:focus-visible { transform: none; box-shadow: none; color: var(--nu-accent-dark); }
/* bookmark cards: a lighter lift, a thinner line of shadow */
.nrm-ui.nrm-ui .nu-bm, .nu-scope .nu-bm { filter: drop-shadow(0 1px 1px rgba(92, 40, 48, .06)) drop-shadow(0 8px 14px rgba(92, 40, 48, .08)); }
.nrm-ui.nrm-ui .nu-bm:hover, .nu-scope .nu-bm:hover, .nrm-ui.nrm-ui .nu-bm:focus-within, .nu-scope .nu-bm:focus-within { transform: translateY(-2px); filter: drop-shadow(0 1px 1px rgba(92, 40, 48, .07)) drop-shadow(0 14px 22px rgba(92, 40, 48, .12)); }
/* morph pills: no fill, a hairline; open = the same surface with a hairline */
.nrm-ui.nrm-ui .nu-morph, .nu-scope .nu-morph { background: transparent; box-shadow: none; }
.nrm-ui.nrm-ui .nu-morph[open], .nu-scope .nu-morph[open] { background: transparent; box-shadow: none; border-color: var(--nu-edge); }
/* pressing answers at once: buttons, pills, tabs, cards (120ms sink; nothing under reduced motion) */
.nu-scope .nu-btn:active, .nrm-ui .nu-btn:active, .nrm-ui.nrm-ui .nu-bm:active, .nu-scope .nu-bm:active, .nrm-ui.nrm-ui .nu-glow:active, .nu-scope .nu-glow:active, .nrm-ui .nu-seg button:active, .nrm-ui .nu-chip:active, .nrm-ui.nrm-ui .nu-morph > summary:active { transform: scale(.98); transition: transform 120ms ease-out; }
.nrm-nav a.nrm-nav__i:active, .nrm-nav button.nrm-nav__i:active { transform: scale(.96); } /* the bar answers a press at once (no transition on the bar) */
@media (prefers-reduced-motion: reduce) { .nrm-nav a.nrm-nav__i:active, .nrm-nav button.nrm-nav__i:active { transform: none; } }
@media (prefers-reduced-motion: reduce) { .nu-scope .nu-btn:active, .nrm-ui .nu-btn:active, .nrm-ui.nrm-ui .nu-bm:active, .nu-scope .nu-bm:active, .nrm-ui.nrm-ui .nu-glow:active, .nu-scope .nu-glow:active, .nrm-ui .nu-seg button:active, .nrm-ui .nu-chip:active, .nrm-ui.nrm-ui .nu-morph > summary:active, .nrm-ui.nrm-ui .nu-glass:active, .nu-scope .nu-glass:active { transform: none; transition: none; } }
/* the phone bar: the same page ground, one hairline (no white slab) */
@media (max-width: 1023px) { .nrm-nav { background: rgba(255, 251, 246, .96); border-top-color: var(--nu-edge, rgba(92, 40, 48, .1)); } }
@media (max-width: 1023px) and (prefers-reduced-transparency: reduce) { .nrm-nav { background: #FFFBF6; } }

/* ==== D-092: the statement system. One type statement per screen, pictures large and whole on the ground, a monochrome base with coral as the one
 * accent, and calm motion: a section reveals once when it enters (opacity + a 12px rise, 420ms; nothing under reduced motion; without script nothing is
 * hidden), every press sinks. Phones: the navigation is a floating dark pill above the safe area (ink, white labels, coral for the current item). */
.nrm-ui, .nu-scope { --nu-ink: #1F1B1E; --nu-ink-2: #2B2226; --nu-ground-2: #F4EFEA; --nu-fs-statement: clamp(28px, 7.6vw, 34px); --nu-fs-statement-l: clamp(40px, 4.2vw, 56px); --nu-ls-tight: -.015em; --nu-ls-meta: .06em; }
@media (min-width: 1024px) { .nrm-ui, .nu-scope { --nu-fs-statement: var(--nu-fs-statement-l); } }
/* nothing is ever hidden: a section plays a short rise once when it enters (the class is added by nuruma-ui.js at that moment) */
@keyframes nu-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.nu-js .nu-reveal.is-in { animation: nu-rise 420ms var(--nu-ease, ease) both; }
@media (prefers-reduced-motion: reduce) { html.nu-js .nu-reveal.is-in { animation: none; } }
@media (max-width: 1023px) {
	.nrm-nav { left: 12px; right: 12px; bottom: calc(var(--nuruma-nav-bottom, 0px) + 12px + env(safe-area-inset-bottom, 0px)); padding: 6px; border: 0; border-top: 0; border-radius: 999px; background: #1F1B1E; box-shadow: 0 10px 30px -12px rgba(31, 27, 30, .55), 0 1px 2px rgba(31, 27, 30, .2); }
	.nrm-nav .nrm-nav__list { max-width: none; gap: 4px; padding: 0; }
	.nrm-nav a.nrm-nav__i, .nrm-nav button.nrm-nav__i { min-height: 52px; padding: 6px 4px; border-radius: 999px; color: rgba(255, 255, 255, .82); font-size: 12px; letter-spacing: .02em; }
	.nrm-nav .nrm-nav__li.is-current a.nrm-nav__i { color: #fff; background: rgba(255, 255, 255, .1); }
	.nrm-nav .nrm-nav__li.is-current a.nrm-nav__i::before { top: auto; bottom: 5px; left: 50%; width: 16px; height: 3px; margin-left: -8px; border-radius: 3px; background: var(--nu-sorbet-coral, #F2917F); }
	.nrm-nav a.nrm-nav__i:hover, .nrm-nav button.nrm-nav__i:hover, .nrm-nav .nrm-nav__li.is-current a.nrm-nav__i:hover { background: rgba(255, 255, 255, .14); }
	.nrm-nav a.nrm-nav__i:focus-visible, .nrm-nav button.nrm-nav__i:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
	.nrm-nav .nrm-nav__n { background: var(--nu-sorbet-coral, #F2917F); color: #1F1B1E; }
	.nrm-nav .nrm-nav__live { left: 0; right: 0; bottom: calc(100% + 10px); }
	html.nu-has-nav { padding-bottom: calc(var(--nuruma-nav-h, 0px) + 16px); }
}
@media (max-width: 1023px) and (prefers-reduced-transparency: reduce) { .nrm-nav { background: #1F1B1E; } }
@media (max-width: 1023px) and (forced-colors: active) { .nrm-nav { background: Canvas; border: 2px solid CanvasText; } .nrm-nav a.nrm-nav__i, .nrm-nav button.nrm-nav__i { color: LinkText; } }
/* D-092: the colour stage behind the TOP picture is a halo, not a box - it fades out before its edges (the token is used by nuruma-portal.css) */
.nrm-ui, .nu-scope { --nu-halo-mask: radial-gradient(ellipse 72% 74% at 50% 50%, #000 36%, transparent 100%); }
/* D-093: the lead title (the TOP's newest 感想 and the list's statement): phones 24-30px, PC 30-44px */
.nrm-ui, .nu-scope { --nu-fs-lead: clamp(24px, 6.6vw, 30px); --nu-fs-lead-l: clamp(30px, 3.2vw, 44px); }
/* ==== D-094: the stage. An ink ground with the sorbet fog at low strength and, behind a picture, that picture's own colours bloomed (the same file, enlarged
 * and blurred by this stylesheet - decoration behind the picture, never the picture itself, which is always shown whole beside / over it). White type, coral
 * stays the one accent. The bloom drifts slowly (transform only); nothing under reduced motion; hidden where the picture is withheld (no markup is printed then).
 * The stage fades into the warm paper at its foot. */
.nrm-ui, .nu-scope { --nu-stage: #15121A; --nu-stage-2: #241D29; --nu-on-stage: #FFFFFF; --nu-on-stage-2: rgba(255, 255, 255, .78); --nu-on-stage-3: rgba(255, 255, 255, .58);
	--nu-glass-dark: rgba(255, 255, 255, .07); --nu-glass-dark-hover: rgba(255, 255, 255, .12); --nu-glass-rim: rgba(255, 255, 255, .16); --nu-glass-rim-hover: rgba(255, 255, 255, .34);
	--nu-stage-shadow: 0 1px 0 rgba(255, 255, 255, .14), 0 34px 70px -26px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); --nu-stage-shadow-s: 0 1px 0 rgba(255, 255, 255, .1), 0 18px 36px -18px rgba(0, 0, 0, .8); }
.nrm-ui.nrm-ui .nu-stage, .nu-scope .nu-stage { position: relative; isolation: isolate; color: var(--nu-on-stage); background: var(--nu-stage); }
.nrm-ui.nrm-ui .nu-stage > .nu-mesh, .nu-scope .nu-stage > .nu-mesh, .nrm-ui.nrm-ui .nu-stage .nrm-portal-hero > .nu-mesh { position: absolute; inset: 0; z-index: 0; width: auto; height: auto; margin: 0; border-radius: 0; background: none; opacity: .34; mix-blend-mode: screen; -webkit-mask-image: none; mask-image: none; }
.nrm-ui.nrm-ui .nu-stage .nu-mesh > b, .nu-scope .nu-stage .nu-mesh > b { opacity: .35; mix-blend-mode: screen; }
.nu-stage__bloom { position: absolute; inset: -40% -30%; z-index: 0; overflow: hidden; pointer-events: none; opacity: .82; filter: blur(64px) saturate(1.6); will-change: transform; animation: nu-bloom calc(var(--nu-dur-drift, 24s) * 1.4) ease-in-out infinite alternate; -webkit-mask-image: radial-gradient(ellipse 62% 64% at 50% 46%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 62% 64% at 50% 46%, #000 30%, transparent 100%); } /* the light has no edge: it fades out well inside its own box */
.nu-stage__bloom > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transform: scale(1.18); }
@keyframes nu-bloom { from { transform: translate3d(-2%, -1.5%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.08); } }
.nrm-ui.nrm-ui .nu-stage > :not(.nu-mesh):not(.nu-stage__bloom), .nu-scope .nu-stage > :not(.nu-mesh):not(.nu-stage__bloom) { position: relative; z-index: 1; }
/* the stage's foot fades into the paper (the next section's ground) */
.nrm-ui.nrm-ui .nu-stage--fade::after, .nu-scope .nu-stage--fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 80px; pointer-events: none; background: linear-gradient(180deg, rgba(21, 18, 26, 0), var(--nu-warm, #FFFBF6)); }
/* the words keep their contrast on any bloom (a saturated or a pale key visual): a soft dark scrim behind the text column and a thin text shadow */
.nrm-ui, .nu-scope { --nu-stage-scrim: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(21, 18, 26, .62) 0%, rgba(21, 18, 26, .4) 55%, rgba(21, 18, 26, 0) 100%); --nu-stage-text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 24px rgba(0, 0, 0, .25); }
/* real glass on the stage: the cards blur the light behind them (only where the browser can; opaque ink otherwise, and under reduced transparency) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nrm-ui.nrm-ui .nu-stage li.nrm-rv, .nu-scope .nu-stage li.nrm-rv { -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); } }
@media (prefers-reduced-transparency: reduce) { .nrm-ui.nrm-ui .nu-stage li.nrm-rv, .nu-scope .nu-stage li.nrm-rv { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--nu-stage-2); } }
/* dark glass: the card, the field and the chip on the stage (a translucent fill with a light rim; no backdrop filter - the stage is opaque behind them) */
.nrm-ui.nrm-ui .nu-stage .nu-glass-card, .nu-scope .nu-stage .nu-glass-card { background: var(--nu-glass-dark); border: 1px solid var(--nu-glass-rim); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--nu-stage-shadow-s); }
/* type on the stage */
.nrm-ui.nrm-ui .nu-stage a, .nu-scope .nu-stage a { color: var(--nu-on-stage); }
.nrm-ui.nrm-ui .nu-stage .nu-glow, .nu-scope .nu-stage .nu-glow { color: var(--nu-on-stage); }
.nrm-ui.nrm-ui .nu-stage .nu-glow:hover, .nu-scope .nu-stage .nu-glow:hover, .nrm-ui.nrm-ui .nu-stage .nu-glow:focus-visible, .nu-scope .nu-stage .nu-glow:focus-visible { color: var(--nu-sorbet-coral); }
.nrm-ui.nrm-ui .nu-stage .nu-glow:focus-visible, .nu-scope .nu-stage .nu-glow:focus-visible, .nrm-ui.nrm-ui .nu-stage a:focus-visible, .nu-scope .nu-stage a:focus-visible, .nrm-ui.nrm-ui .nu-stage button:focus-visible, .nu-scope .nu-stage button:focus-visible, .nrm-ui.nrm-ui .nu-stage input:focus-visible, .nu-scope .nu-stage input:focus-visible { outline: 2px solid var(--nu-on-stage); outline-offset: 3px; }
/* scroll-driven settle: a card rises as it enters (the browser drives it from the scroll position; no script, nothing taken over, nothing waits) */
@supports (animation-timeline: view()) {
	.nrm-ui.nrm-ui .nu-stage li.nrm-rv, .nu-scope .nu-stage li.nrm-rv { animation: nu-settle linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
}
@keyframes nu-settle { from { opacity: .35; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nu-stage__bloom { animation: none; } .nrm-ui.nrm-ui .nu-stage li.nrm-rv, .nu-scope .nu-stage li.nrm-rv { animation: none; } }
@media (prefers-reduced-transparency: reduce) { .nu-stage__bloom { display: none; } .nrm-ui.nrm-ui .nu-stage .nu-glass-card, .nu-scope .nu-stage .nu-glass-card { background: var(--nu-stage-2); } }
@media (forced-colors: active) { .nrm-ui.nrm-ui .nu-stage, .nu-scope .nu-stage { background: Canvas; color: CanvasText; } .nu-stage__bloom, .nrm-ui.nrm-ui .nu-stage > .nu-mesh, .nu-scope .nu-stage > .nu-mesh { display: none; } .nrm-ui.nrm-ui .nu-stage--fade::after, .nu-scope .nu-stage--fade::after { display: none; } .nrm-ui.nrm-ui .nu-stage .nu-glass-card, .nu-scope .nu-stage .nu-glass-card { border: 1px solid CanvasText; background: Canvas; } }
/* the PC tab row sits on the cream header area above the stage; the phone pill is already ink */
.nrm-ui, .nu-scope { --nu-stage-fade: linear-gradient(180deg, rgba(21, 18, 26, 0), #FFFBF6); }
.nrm-ui, .nu-scope { --nu-stage-fog: radial-gradient(ellipse 60% 55% at 18% 8%, rgba(242, 145, 127, .16), transparent 62%), radial-gradient(ellipse 50% 60% at 88% 85%, rgba(246, 180, 195, .12), transparent 62%); } /* D-094: the stage's faint sorbet fog (a static field; the moving light is the picture's bloom) */