/* =====================================================================================================================
   NARUTO THEME LAYER (2026-10-16, docs/design-system.md "Naruto theme layer"). Loaded on every page by
   pages/_layout.html, right after site.css and before the page's own CSS.
   1. tokens (--nk-*) and the per-page theme hooks (--theme-*), switched by <body data-theme="<name>">
   2. the frame every page shares: background, header, clock strip, menus, footer, page head, section markers
   3. the shared components (.nk-*): headband section head, parchment scroll, mission scroll, rank stamp, paper tag,
      wooden board, notice pin, buttons, chakra line, icons
   The leaf, shuriken, kunai and seal are our own SVG symbols (#nk-leaf, #nk-shuriken, #nk-kunai, #nk-seal in
   pages/_layout.html). Game art is never tinted here; colours go on frames, edges, lines and our own symbols only.
   No Japanese text anywhere. Page families add ONE theme block in their own CSS (docs/design-system.md, "Add a theme").
   ===================================================================================================================== */
/* metric fallback measured in Chrome 2026-10-16: Shojumaru runs 19.8 % wider than Arial Black (size-adjust 120 % = 99.9 %
   of its width); its ascent / descent are 0.99 / 0.34 em, so 82.5 % / 28.5 % after the 120 % scale (the same 1.33 em line) */
@font-face { font-family: "Shojumaru Fallback"; src: local("Arial Black"), local("Arial"); size-adjust: 120%; ascent-override: 82.5%; descent-override: 28.5%; line-gap-override: 0%; }

/* ---------- 1. tokens ---------- */
:root {
  --nk-brush: "Shojumaru", "Shojumaru Fallback", var(--head);
  --nk-paper: #f1e3c0;
  --nk-paper-2: #e0c78f;
  --nk-ink: #2b1d10;
  --nk-ink-2: #4a3622;
  --nk-ink-3: #5e4528;
  --nk-red: #a8231b;
  --nk-red-ink: #7c1a12;
  --nk-wood: #5a3519;
  --nk-wood-2: #8a5528;
  --nk-wood-3: #3a210e;
  --nk-cloth: #182a50;
  --nk-steel: linear-gradient(165deg, #f6f8fb 0%, #b9c3d0 36%, #e9edf3 54%, #8c97a8 100%);
  --nk-chakra: #62b6ff;
  --nk-parchment:
    radial-gradient(ellipse 60% 50% at 18% 12%, rgba(255, 255, 255, 0.38), transparent 70%),
    radial-gradient(ellipse 55% 45% at 85% 92%, rgba(128, 82, 30, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 35% at 70% 30%, rgba(150, 100, 40, 0.08), transparent 70%),
    repeating-linear-gradient(0deg, rgba(110, 75, 30, 0.045) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, rgba(110, 75, 30, 0.03) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--nk-paper), var(--nk-paper-2));
  --nk-rod: linear-gradient(180deg, #2e1a0b 0%, #8a5528 22%, #b5773d 40%, #6b3f1d 70%, #2e1a0b 100%);
  --nk-rod-v: linear-gradient(90deg, #2e1a0b 0%, #8a5528 22%, #b5773d 40%, #6b3f1d 70%, #2e1a0b 100%);
  /* dark wood planks (CSS only, so they stay sharp on any screen): grain lines over a warm brown */
  --nk-wood-planks:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 61px),
    repeating-linear-gradient(180deg, rgba(255, 210, 160, 0.025) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #44270f, #2f1909);
  --nk-wood-dark:
    repeating-linear-gradient(180deg, rgba(255, 210, 160, 0.022) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0 1px, transparent 1px 140px),
    linear-gradient(180deg, #24170d 0%, #1a110a 100%);
  /* the leaf mark as a CSS image (same path as #nk-leaf), for watermarks; stroke colour baked in */
  --nk-leaf-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M96.5 9 L86 22 C76 16 66 13.5 58 13.5 C42 13.5 30 24 24.5 39 C19.5 52 13 66 3 79 C20 87 42 89.5 60 88.5 M24.5 39 C22.5 45 25 66 34 77.5 C41 84.5 50 88.5 60 88.5 C79 88.5 96 75 96 58 C96 42 83 31 70 31 C57 31 47.5 41 47.5 51 C47.5 60.5 55 66.5 63 66 C71 65.5 76.5 58 76 54 C75.5 51 74 49.8 73 49.3'/%3E%3C/svg%3E");
  --nk-shuriken-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M50 3 L61 39 L97 50 L61 61 L50 97 L39 61 L3 50 L39 39 Z M50 42 A8 8 0 1 0 50.01 42 Z'/%3E%3C/svg%3E");
}

/* the per-page theme hooks: the default theme is "village" (the Hidden Leaf at night). A page family's theme block
   overrides only these, e.g. body[data-theme="registry"] { --theme-accent: ...; } (docs/design-system.md). */
body {
  --theme-accent: var(--accent);                 /* the theme's own colour: section markers, hero rule, header line */
  --theme-accent-2: var(--gold);                 /* second colour: kickers, links on wood */
  --theme-chakra: var(--nk-chakra);              /* the chakra line under the header and above the footer */
  --theme-cloth: var(--nk-cloth);                /* headband cloth (section heads, clock strip) */
  --theme-cloth-hi: #24396a;
  --theme-cloth-lo: #101d3c;
  --theme-glow: rgba(255, 147, 48, 0.10);        /* the soft light at the top of the page */
  --theme-glow-2: rgba(98, 182, 255, 0.06);
  --theme-texture: var(--nk-leaf-url);           /* the faint tiled watermark on the page background */
  --theme-texture-size: 180px;
  --theme-texture-opacity: 0.035;
  --theme-hero-frame: none;                      /* an extra layer behind .page-hero (a CSS gradient or a real game picture) */
  --theme-mark: var(--nk-leaf-url);              /* the big faint mark at the right of .page-hero */
}

/* ---------- 2. the shared frame ---------- */
body {
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--theme-glow), transparent 65%),
    radial-gradient(900px 700px at 100% 40%, var(--theme-glow-2), transparent 70%),
    var(--bg);
}
/* the tiled watermark: a fixed layer under everything (no repaint on scroll, never over content) */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--theme-texture-opacity);
  background: #a0beff; -webkit-mask: var(--theme-texture) 0 0 / var(--theme-texture-size) auto repeat; mask: var(--theme-texture) 0 0 / var(--theme-texture-size) auto repeat; }
.nk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nk-ico { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.125em; fill: currentColor; }

/* header: a dark wood beam, the leaf plate by the logo, a chakra line underneath. Same heights as before (no shift). */
.site-header { background: var(--nk-wood-dark); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 10px 24px -14px rgba(0, 0, 0, 0.9); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: repeating-linear-gradient(180deg, rgba(255, 210, 160, 0.022) 0 1px, transparent 1px 5px), linear-gradient(180deg, rgba(36, 23, 13, 0.96), rgba(26, 17, 10, 0.94)); }
}
.site-header::after { height: 2px; bottom: -2px; opacity: 1;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--theme-chakra) 25%, transparent) 10%, var(--theme-chakra) 35%, #e3f3ff 50%, var(--theme-chakra) 65%, color-mix(in srgb, var(--theme-chakra) 25%, transparent) 90%, transparent 100%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--theme-chakra) 70%, transparent); }
.brand-plate { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 28px; border-radius: 5px; background: var(--nk-steel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.55); }
.brand-plate svg { width: 20px; height: 20px; color: #3a4352; }
/* phones: site.css hides the brand name under 420 px; the leaf plate stays from 360 px (at 320 the row has no room) */
/* the brush name is wider than Chakra Petch: hidden up to 639 px (site.css hid it up to 420) and from 1024 to 1279 px
   (the full desktop menu row), so the header row never runs out of room; the logo and the leaf plate stay */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1279px) { .site-header .brand > span[data-site-name] { display: none; } }
@media (min-width: 360px) and (max-width: 639px) { .site-header .brand > .brand-plate { display: grid; width: 30px; height: 26px; } .site-header .brand > .brand-plate svg { width: 18px; height: 18px; } }
@media (max-width: 359px) { .site-header .brand > .brand-plate { display: none; } }
.brand > span[data-site-name] { font-family: var(--nk-brush); font-weight: 400; letter-spacing: 0.03em; text-transform: none; color: #fff3d6; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.nav-btn { position: relative; color: #d9c8ad; }
.nav-btn:hover, .nav-group.open .nav-btn { color: #fff3d6; box-shadow: inset 0 -2px 0 rgba(255, 220, 170, 0.35); }
/* the current group: a kunai under its name instead of a flat line */
.nav-group.is-current .nav-btn { color: #fff3d6; box-shadow: none; }
.nav-group.is-current .nav-btn::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px; height: 5px; background: var(--theme-accent);
  clip-path: polygon(0 35%, 6px 35%, 8px 0, 10px 35%, calc(100% - 14px) 35%, 100% 50%, calc(100% - 14px) 65%, 10px 65%, 8px 100%, 6px 65%, 0 65%); }
/* the Download button as a kunai (point on the right, notch on the left) */
.nav a.nav-cta { position: relative; isolation: isolate; padding: 0 22px 0 18px; border-radius: 0; background: none; color: #1f0e00; }
.nav a.nav-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #ffa24a, #f36c12);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 6px 50%); }
.nav a.nav-cta:hover { background: none; color: #1f0e00; }
.nav a.nav-cta:hover::before { background: linear-gradient(180deg, #ffc46e, #ff8a1f); }
.nav a.nav-cta[aria-current="page"] { background: none; box-shadow: none; }
.nav a.nav-cta[aria-current="page"]::before { background: linear-gradient(180deg, #ffd07a, #ff9330); }
.nav a.nav-discord, .site-header .search-btn, .site-header .nav-toggle { background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.16); color: #d9c8ad; border-color: transparent; }
.nav a.nav-discord:hover, .site-header .search-btn:hover, .site-header .nav-toggle:hover { color: #fff3d6; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.32); }
/* dropdown menus: a parchment slip with ink text (desktop) */
@media (min-width: 1024px) {
  .nav-menu { background: var(--nk-parchment); box-shadow: inset 0 0 22px rgba(120, 70, 20, 0.22), 0 0 0 1px rgba(58, 33, 14, 0.6), 0 20px 40px -12px rgba(0, 0, 0, 0.85); }
  .nav-menu::before { left: -6px; right: -6px; top: -5px; height: 9px; border-radius: 5px; background: var(--nk-rod); }
  .nav .nav-menu a { color: var(--nk-ink); }
  .nav .nav-menu a:hover, .nav .nav-menu a:focus-visible { color: var(--nk-ink); background: rgba(90, 53, 25, 0.12); }
  .nav .nav-menu a[aria-current="page"] { color: var(--nk-red-ink); background: rgba(168, 35, 27, 0.10); box-shadow: inset 3px 0 0 var(--nk-red); }
  .nav .nav-menu a:focus-visible { outline-color: var(--nk-red-ink); }
}
/* the phone / tablet menu panel: the same dark wood, group titles as small gold caps */
@media (max-width: 1023px) {
  .nav { background: var(--nk-wood-dark); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.4), 0 18px 30px -18px rgba(0, 0, 0, 0.9); }
  .nav-h { color: var(--theme-accent-2); }
  .nav .nav-menu a { color: #e6d6bb; }
  .nav .nav-menu a:hover, .nav .nav-menu a:focus-visible { color: #fff3d6; background: rgba(255, 220, 170, 0.07); }
  .nav .nav-menu a[aria-current="page"] { color: #fff3d6; background: rgba(255, 147, 48, 0.12); box-shadow: inset 3px 0 0 var(--theme-accent); }
}
/* the clock strip: a stitched headband cloth */
.site-header .clock-strip { color: #b9c6e4;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 7px, transparent 7px 12px) 0 2px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 7px, transparent 7px 12px) 0 calc(100% - 3px) / 100% 1px no-repeat,
    linear-gradient(180deg, var(--theme-cloth-hi) 0%, var(--theme-cloth) 55%, var(--theme-cloth-lo) 100%); }
.clock-strip .clk-label { background: var(--nk-steel); color: #2b3340; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.clock-strip b { color: #fff3d6; }

/* footer: a wooden board under a chakra line, the leaf as a large faint mark */
.site-footer { overflow: hidden; background: var(--nk-wood-dark); color: #b7a58a; }
.site-footer::before { height: 2px; opacity: 1;
  background: linear-gradient(90deg, transparent 0%, var(--theme-chakra) 30%, #e3f3ff 50%, var(--theme-chakra) 70%, transparent 100%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--theme-chakra) 70%, transparent); }
.site-footer::after { content: ""; position: absolute; right: -60px; bottom: -70px; width: 360px; height: 360px; pointer-events: none; opacity: 0.06; background: #ffdcae;
  -webkit-mask: var(--nk-leaf-url) center / contain no-repeat; mask: var(--nk-leaf-url) center / contain no-repeat; }
.site-footer .wrap { position: relative; z-index: 1; }
.site-footer .disclaimer strong { color: #fff3d6; }
.site-footer .faint { color: #a8977d; }
.site-footer .foot-nav { border-top-color: rgba(255, 220, 170, 0.12); }
.site-footer .foot-h { font: 400 0.8125rem/1.2 var(--nk-brush); letter-spacing: 0.04em; text-transform: none; color: var(--theme-accent-2); }
.site-footer .foot-col a, .site-footer nav a { color: #d9c8ad; }
.site-footer .foot-col a:hover, .site-footer nav a:hover { color: #fff3d6; }
.site-footer .socials a { background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.18); color: #d9c8ad; }
.site-footer .socials a:hover, .site-footer .socials a:focus-visible { background: rgba(0, 0, 0, 0.45); color: #fff3d6; }
.foot-mark { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #fff3d6; font: 400 1rem/1.2 var(--nk-brush); letter-spacing: 0.03em; }
.foot-mark .brand-plate { width: 38px; height: 30px; }
.foot-kunai { display: block; width: 72px; height: 14px; margin: 6px 0 0; color: rgba(255, 220, 170, 0.35); }

/* page head (.page-hero): the theme frame layer, a big faint mark on the right, the brush title, a kunai rule */
.page-hero { position: relative; isolation: isolate; background: var(--theme-hero-frame); }
.page-hero::before { content: ""; position: absolute; z-index: -1; top: 8px; right: max(var(--gutter), calc((100% - var(--max)) / 2)); width: 190px; height: 190px; pointer-events: none;
  opacity: 0.07; background: #ffdcae; -webkit-mask: var(--theme-mark) center / contain no-repeat; mask: var(--theme-mark) center / contain no-repeat; }
.page-hero h1 { font-family: var(--nk-brush); font-weight: 400; letter-spacing: 0.01em; color: #fff3d6; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.page-hero > .wrap { background:
  linear-gradient(var(--theme-accent), var(--theme-accent)) var(--gutter) calc(100% - 1px) / 56px 3px no-repeat,
  linear-gradient(var(--line), var(--line)) 50% 100% / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.page-hero:has(+ .toolbar) > .wrap, .page-hero:has(+ .secnav) > .wrap { background: none; }
@media (max-width: 600px) {
  .page-hero h1 { font-size: 1.625rem; line-height: 1.15; letter-spacing: 0; }
  .page-hero::before { width: 120px; height: 120px; top: 4px; }
}
/* section titles: a small shuriken in the theme colour instead of the diamond */
.section-head h2::before, .band-title::before, .m-section > header h2::before, .m-sec > h2::before, .m-sec > .sec-head h2::before, .update-group h2::before {
  width: 14px; height: 14px; border-radius: 0; transform: none; box-shadow: none; background: var(--theme-accent);
  -webkit-mask: var(--nk-shuriken-url) center / contain no-repeat; mask: var(--nk-shuriken-url) center / contain no-repeat; }

/* ---------- 3. shared components ---------- */

/* parchment scroll: paper with a wooden rod on top and bottom. <div class="nk-scroll">...</div> */
.nk-scroll { position: relative; color: var(--nk-ink); background: var(--nk-parchment); border-radius: 2px;
  box-shadow: inset 0 0 40px rgba(120, 70, 20, 0.28), inset 0 0 0 1px rgba(90, 53, 25, 0.35), 0 18px 34px -16px rgba(0, 0, 0, 0.85); }
.nk-scroll::before, .nk-scroll::after { content: ""; position: absolute; left: -10px; right: -10px; height: 14px; border-radius: 7px; background: var(--nk-rod); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); }
.nk-scroll::before { top: -7px; }
.nk-scroll::after { bottom: -7px; }
.nk-scroll a:not(.nk-btn), .nk-mission a:not(.nk-btn), .nk-paper a:not(.nk-btn) { color: var(--nk-red-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.nk-scroll a:not(.nk-btn):hover, .nk-mission a:not(.nk-btn):hover, .nk-paper a:not(.nk-btn):hover { color: var(--nk-ink); }
.nk-scroll h2, .nk-scroll h3, .nk-mission h3 { color: var(--nk-ink); }
.nk-scroll .muted, .nk-mission .muted, .nk-paper .muted { color: var(--nk-ink-2); }
.nk-scroll .faint, .nk-mission .faint, .nk-paper .faint { color: var(--nk-ink-3); }
/* plain paper (no rods): a note, a sheet in a file */
.nk-paper { position: relative; color: var(--nk-ink); background: var(--nk-parchment); border-radius: 2px;
  box-shadow: inset 0 0 22px rgba(120, 70, 20, 0.22), 0 6px 12px rgba(0, 0, 0, 0.45); }

/* mission scroll card: parchment with one rod on top, a rank stamp in the corner. <a class="nk-mission" href>
   <span class="nk-stamp nk-stamp-s"></span> art + <h3> + <p></a> */
.nk-mission { position: relative; display: block; margin: 7px 0; padding: 14px 16px 16px; border-radius: 2px; background: var(--nk-parchment); color: var(--nk-ink);
  box-shadow: inset 0 0 30px rgba(120, 70, 20, 0.25), inset 0 0 0 1px rgba(90, 53, 25, 0.35), 0 16px 28px -16px rgba(0, 0, 0, 0.85); transition: transform .15s, box-shadow .15s; }
.nk-mission::before { content: ""; position: absolute; left: -7px; right: -7px; top: -7px; height: 12px; border-radius: 6px; background: var(--nk-rod); z-index: 2; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
a.nk-mission:hover { transform: translateY(-3px); color: var(--nk-ink); box-shadow: inset 0 0 30px rgba(120, 70, 20, 0.25), inset 0 0 0 1px rgba(90, 53, 25, 0.5), 0 0 0 2px rgba(255, 204, 77, 0.6), 0 20px 30px -16px rgba(0, 0, 0, 0.9); }
.nk-mission h3 { margin: 0 0 6px; font: 400 var(--fs-md)/1.2 var(--nk-brush); color: var(--nk-red-ink); letter-spacing: 0.01em; }
.nk-mission p { margin: 0; color: var(--nk-ink-2); font-size: 0.875rem; }
.nk-mission > .nk-stamp { right: 4px; top: 4px; }
@media (prefers-reduced-motion: reduce) { a.nk-mission:hover { transform: none; } }

/* rank stamp: a red seal ring with the game's own rank letter (img/ui/tier-*.webp, shown as it is) inside.
   <span class="nk-stamp nk-stamp-s" aria-hidden="true"></span>; the rank also needs to be in the text for screen readers */
.nk-stamp { position: absolute; z-index: 3; display: block; width: 58px; height: 58px; border-radius: 50%;
  background: var(--nk-rank, none) center / 30px auto no-repeat, radial-gradient(circle, rgba(255, 245, 220, 0.95) 0 52%, transparent 53%),
    radial-gradient(circle, transparent 0 58%, var(--nk-red) 59% 66%, transparent 67% 72%, var(--nk-red) 73% 76%, transparent 77%);
  transform: rotate(-12deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); pointer-events: none; }
.nk-stamp-ss { --nk-rank: url("/img/ui/tier-ss.webp"); }
.nk-stamp-s { --nk-rank: url("/img/ui/tier-s.webp"); }
.nk-stamp-a { --nk-rank: url("/img/ui/tier-a.webp"); }
.nk-stamp-b { --nk-rank: url("/img/ui/tier-b.webp"); }
.nk-stamp-c { --nk-rank: url("/img/ui/tier-c.webp"); }
.nk-stamp-d { --nk-rank: url("/img/ui/tier-d.webp"); }
.nk-stamp-sm { width: 44px; height: 44px; background-size: 22px auto, auto, auto; }
/* a stamp in the flow (not in a corner): <span class="nk-stamp nk-stamp-a nk-stamp-inline"> */
.nk-stamp-inline { position: relative; display: inline-block; vertical-align: middle; }

/* paper tag label: a small talisman strip. <span class="nk-tag">Limited</span>, .nk-tag-red / .nk-tag-ink for variants */
.nk-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 10px; border-radius: 1px; background: var(--nk-parchment); color: var(--nk-ink);
  font: 700 0.75rem/1.2 var(--head); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(90, 53, 25, 0.35), inset 3px 0 0 var(--nk-red), inset -3px 0 0 var(--nk-red), 0 2px 4px rgba(0, 0, 0, 0.4); }
.nk-tag-red { background: var(--nk-red); color: #fff3d6; box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.35), 0 2px 4px rgba(0, 0, 0, 0.4); }
.nk-tag-ink { background: var(--nk-ink); color: var(--nk-paper); box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.25), 0 2px 4px rgba(0, 0, 0, 0.4); }

/* wooden board: planks with an inner frame. <div class="nk-board">...</div> (text on it is light) */
.nk-board { position: relative; padding: var(--sp-5); border-radius: 4px; color: #ead9c3; background: var(--nk-wood-planks);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 4px #2a1708, inset 0 0 0 5px rgba(255, 210, 160, 0.12), var(--shadow-card); }
.nk-board .faint, .nk-board .muted { color: #e8cfae; }
.nk-board a:not(.nk-btn):not(.btn) { color: var(--gold); }
@media (max-width: 760px) { .nk-board { padding: var(--sp-4); } }

/* notice pin: add .nk-pinned to a note (paper or card) for a red pin at its top centre; .nk-tilt tilts every other one */
.nk-pinned { position: relative; }
.nk-pinned::before { content: ""; position: absolute; z-index: 2; top: -5px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a7a, var(--nk-red) 55%, #5a0f0b); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
.nk-tilt > :nth-child(odd) { transform: rotate(-0.4deg); }
.nk-tilt > :nth-child(even) { transform: rotate(0.4deg); }
@media (prefers-reduced-motion: reduce) { .nk-tilt > * { transform: none; } }

/* headband section head: a steel plate with our leaf on a stitched cloth band.
   <header class="nk-head"><span class="nk-plate" aria-hidden="true"><svg><use href="#nk-leaf"/></svg></span>
     <div class="nk-head-t"><span class="nk-kicker">Kicker</span><h2>Title</h2></div><a class="nk-link" href>More</a></header>
   .nk-head-red: the red cloth (summons), or set --theme-cloth / --theme-cloth-hi / --theme-cloth-lo in a theme block */
.nk-head { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; min-height: 60px; margin: 0 0 var(--sp-4); padding: 0 30px 0 0; }
.nk-head { --nk-stitch: rgba(255, 255, 255, 0.2); --nk-cloth-bg: linear-gradient(180deg, var(--theme-cloth-hi) 0%, var(--theme-cloth) 55%, var(--theme-cloth-lo) 100%);
  --nk-band: repeating-linear-gradient(90deg, var(--nk-stitch) 0 7px, transparent 7px 12px) 0 3px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--nk-stitch) 0 7px, transparent 7px 12px) 0 calc(100% - 3px) / 100% 1px no-repeat, var(--nk-cloth-bg); }
.nk-head-red { --nk-stitch: rgba(255, 220, 160, 0.25); --nk-cloth-bg: linear-gradient(180deg, #8a2620 0%, #651714 55%, #4a0f0e 100%); }
.nk-head::before { content: ""; position: absolute; z-index: -1; left: 18px; right: 0; top: 6px; height: 48px; background: var(--nk-band);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%); }
.nk-plate { position: relative; flex: none; display: grid; place-items: center; width: 66px; height: 50px; border-radius: 7px; background: var(--nk-steel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 -3px 0 rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.55); }
.nk-plate::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 7px 7px, #6f7a8a 2px, transparent 2.6px), radial-gradient(circle at calc(100% - 7px) 7px, #6f7a8a 2px, transparent 2.6px),
    radial-gradient(circle at 7px calc(100% - 7px), #6f7a8a 2px, transparent 2.6px), radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #6f7a8a 2px, transparent 2.6px); }
.nk-plate svg { width: 32px; height: 32px; color: #3a4352; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8)); }
.nk-head-t { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.nk-kicker { display: block; font: 600 0.75rem/1.2 var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: #a9bde6; }
.nk-head h2 { margin: 1px 0 0; font: 400 clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem)/1.15 var(--nk-brush); color: #fff3d6; letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-head-red .nk-kicker { color: #f3c88a; }
.nk-link { position: relative; z-index: 1; flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px;
  color: var(--theme-accent-2); font: 700 0.8125rem/1 var(--head); letter-spacing: 0.08em; text-transform: uppercase; }
.nk-link::after { content: ""; width: 20px; height: 9px; background: currentColor; clip-path: polygon(0 38%, 55% 38%, 55% 0, 100% 50%, 55% 100%, 55% 62%, 0 62%); }
.nk-link:hover { color: #fff3d6; }
.nk-sub { margin: -4px 0 var(--sp-3); max-width: 780px; color: var(--muted); font-size: 0.875rem; }
@media (max-width: 760px) {
  .nk-head { flex-wrap: wrap; padding-right: 0; gap: 4px 12px; }
  .nk-head .nk-link { flex-basis: 100%; justify-content: flex-end; margin-top: 2px; }
  .nk-plate { width: 58px; height: 46px; z-index: 1; }
  .nk-plate svg { width: 28px; height: 28px; }
  /* phones: the cloth band sits on the title itself, so a long title wraps inside it */
  .nk-head::before { display: none; }
  .nk-head-t { flex: 1 1 0; min-height: 50px; margin-left: -22px; padding: 7px 28px 7px 32px; background: var(--nk-band);
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); }
  .nk-head h2 { white-space: normal; overflow: visible; font-size: 1.05rem; }
}
@media (max-width: 400px) {
  .nk-plate { width: 50px; height: 40px; }
  .nk-plate svg { width: 24px; height: 24px; }
  .nk-head-t { margin-left: -18px; padding: 6px 22px 6px 26px; }
  .nk-kicker { letter-spacing: 0.08em; }
}

/* buttons: kunai (main action), Discord (notched), ink (paper with an ink ring). 46 px tall (44 px tap target).
   <a class="nk-btn nk-btn-kunai" href><svg aria-hidden="true"><use href="#nk-kunai"/></svg>Download</a>; group them in .nk-cta */
.nk-cta { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.nk-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 26px 0 18px;
  border: 0; background: none; cursor: pointer; font: 700 0.875rem/1.1 var(--head); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.nk-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nk-bg, var(--grad)); clip-path: var(--nk-shape); transition: filter .15s, transform .15s; }
.nk-btn:hover::before { filter: brightness(1.08); }
.nk-btn:active::before { transform: translateY(1px); }
.nk-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.nk-btn svg { flex: none; width: 34px; height: 8px; }
.nk-btn-kunai { --nk-bg: linear-gradient(180deg, #ffa24a, #f36c12); --nk-shape: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 7px 50%); color: #1f0e00; }
.nk-btn-kunai:hover { color: #1f0e00; }
.nk-btn-discord { --nk-bg: #5865f2; --nk-shape: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); color: #fff; padding: 0 22px; }
.nk-btn-discord:hover { color: #fff; }
.nk-btn-ink { --nk-bg: linear-gradient(180deg, #f4e7c6, #e2cb95); --nk-shape: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); color: var(--nk-ink); padding: 0 22px; }
.nk-btn-ink::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nk-ink); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%, 0 0, 3px 2px, 2.5px calc(100% - 2px), calc(100% - 11px) calc(100% - 2px), calc(100% - 2.5px) 2px, 11px 2px, 0 0); }
.nk-btn-ink:hover { color: var(--nk-ink); }
.nk-btn-ink svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .nk-cta { display: grid; grid-template-columns: minmax(0, 1fr); } .nk-cta > .nk-btn { width: 100%; } }

/* chakra line: a glowing blue flow between big blocks. <div class="nk-chakra" aria-hidden="true"></div> */
.nk-chakra { height: 3px; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 26px auto 0; padding: 0 var(--gutter); background-clip: content-box;
  background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--theme-chakra) 15%, transparent) 12%, var(--theme-chakra) 32%, #e3f3ff 50%, var(--theme-chakra) 68%, color-mix(in srgb, var(--theme-chakra) 15%, transparent) 88%, transparent 100%);
  background-size: 200% 100%; animation: nk-flow 5s linear infinite; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--theme-chakra) 85%, transparent)); }
@keyframes nk-flow { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* the seal outline: a slowly turning ring behind a block. <svg class="nk-seal-bg" aria-hidden="true"><use href="#nk-seal"/></svg> */
.nk-seal-bg { position: absolute; z-index: -1; right: -70px; top: -70px; width: 340px; height: 340px; color: rgba(255, 204, 77, 0.11); pointer-events: none; animation: nk-spin 80s linear infinite; }
@keyframes nk-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .nk-seal-bg { width: 240px; height: 240px; right: -60px; top: -50px; } }
@media (prefers-reduced-motion: reduce) { .nk-chakra, .nk-seal-bg { animation: none; } }