/* =============================================================
   HaruKurohane — partner page theme (views/creators/harukurohane.css)

   春黒羽 — a demon lord vampire holding court in Babylon Palace. Colours read
   off his art:
     sumi   #0A0709 · lacquer #120A0D · ink #1A1014 · stone #241820
     crimson #B31427 · blood #7A1020 · ember #E2434F
     gold   #C9A227 · pale gold #EBD48A · bone #F2ECE6 · ash #A2968F
     jade   #2E7D63 (the green light in his throne-room art, used sparingly)

   Fonts, self-hosted (SIL Open Font License):
     Shippori Mincho 600/800 Latin — the mincho serif that carries the page.
     Shippori Mincho 800, Japanese subset — 6KB holding only the 22 kanji this
     page draws (春黒羽, the omikuji ranks, 御神籤, 血). A subset means the
     kanji look identical on every device instead of falling back to whatever
     CJK font the machine happens to have, and costs less than a small photo.
     Every kanji is marked translate="no" in the template so browsers treat it
     as ornament and never offer to translate the page.

   Motion: lantern light following the pointer, kiseru smoke drifting, the
   omikuji box shaking and the slip unrolling. Loops stop for reduced motion
   and .perf-lite; the fortune still draws.
   ============================================================= */

@font-face { font-family: 'Shippori Mincho'; src: url('/assets/fonts/shippori-mincho-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Shippori Mincho'; src: url('/assets/fonts/shippori-mincho-800-latin.woff2') format('woff2'); font-weight: 800; font-display: swap; }
/* The kanji subset. unicode-range keeps it out of the way of Latin text. */
@font-face {
  font-family: 'Shippori Mincho JP';
  src: url('/assets/fonts/shippori-mincho-800-jp-subset.woff2') format('woff2');
  font-weight: 800; font-display: swap;
  unicode-range: U+3010-3011, U+4E2D, U+51F6, U+52E2, U+5409, U+591C, U+5927, U+5BAE, U+5C0F, U+5FA1, U+60AA, U+65E5, U+6625, U+672B-672C, U+738B, U+795E, U+7C64, U+7D05, U+7FBD, U+8840, U+8A9E, U+904B, U+9580, U+9B54, U+9ED2;
}

body.cp-theme-harukurohane { background: #0A0709; }

.hk {
  --h-sumi: #0A0709; --h-lacquer: #120A0D; --h-ink: #1A1014; --h-stone: #241820;
  --h-crimson: #B31427; --h-blood: #7A1020; --h-ember: #E2434F;
  --h-gold: #C9A227; --h-pale: #EBD48A; --h-bone: #F2ECE6; --h-ash: #A2968F; --h-jade: #2E7D63;
  --h-line: rgba(201, 162, 39, .2); --h-line2: rgba(201, 162, 39, .42);
  --h-card: rgba(20, 12, 16, .84);
  /* The JP subset sits in every stack: its unicode-range means it is only
     ever used for the handful of Japanese characters this page shows, so
     日本語 in a sentence looks the same everywhere rather than falling back
     to whatever CJK font the device happens to own. */
  --h-display: 'Shippori Mincho', 'Shippori Mincho JP', 'Times New Roman', serif;
  --h-jp: 'Shippori Mincho JP', 'Shippori Mincho', serif;
  --h-ease: cubic-bezier(.22, 1, .36, 1);
  --h-spring: cubic-bezier(.34, 1.4, .64, 1);
  /* creator.css tokens, pointed at his palette for the shared join block */
  --pink: var(--h-crimson); --purple: var(--h-stone); --ink: var(--h-bone); --ink2: #D6CCC6; --ink3: var(--h-ash);
  isolation: isolate;
  padding-top: 0;
  color: var(--h-bone);
  font-family: 'Nunito', 'Shippori Mincho JP', system-ui, sans-serif;
  background: var(--h-sumi);
}
.hk ::selection { background: var(--h-crimson); color: #fff; }
.hk-jp, .hk [lang="ja"] { font-family: var(--h-jp); font-weight: 800; }

/* ---------------- the palace ----------------
   One fixed layer: lantern light drifting with the pointer (--ax/--ay,
   harukurohane.js) over a kumiko lattice, with smoke rising from the kiseru. */
.hk-palace {
  --x: calc(var(--ax, 0) * 1px);
  --y: calc(var(--ay, 0) * 1px);
  position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict;
  background-image:
    radial-gradient(46% 50% at calc(74% + var(--x)) calc(14% + var(--y)), rgba(179, 20, 39, .3), transparent 72%),
    radial-gradient(38% 42% at calc(16% - var(--x)) calc(58% - var(--y)), rgba(201, 162, 39, .1), transparent 72%),
    radial-gradient(58% 55% at calc(50% + var(--x)) 104%, rgba(46, 125, 99, .14), transparent 70%),
    linear-gradient(180deg, #0C0709 0%, #140B0F 52%, #0A0709 100%);
}
/* Kumiko: the lattice screens behind his throne. */
.hk-lattice {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(45deg, rgba(201, 162, 39, .07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(201, 162, 39, .07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(179, 20, 39, .05) 0 1px, transparent 1px 88px);
  mask-image: radial-gradient(100% 75% at 50% 25%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(100% 75% at 50% 25%, #000 25%, transparent 80%);
}
.hk-smoke {
  position: absolute; bottom: -20vh; width: 260px; height: 60vh; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 236, 230, .05), transparent 70%);
  filter: blur(22px); opacity: 0; animation: hk-smoke 22s ease-in-out infinite;
}
.hk-smoke--1 { left: 12%; }
.hk-smoke--2 { left: 68%; animation-duration: 28s; animation-delay: -12s; }
@keyframes hk-smoke {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.8); }
  25% { opacity: .8; }
  100% { opacity: 0; transform: translate3d(40px, -95vh, 0) scale(1.4); }
}

/* ---------------- shared bits ---------------- */
.hk-kick { display: flex; align-items: center; gap: 9px; font-family: var(--h-display); font-weight: 600; font-size: 15px; letter-spacing: .24em; text-transform: uppercase; color: var(--h-gold); }
.hk-title { margin-top: 8px; font-family: var(--h-display); font-weight: 800; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: .02em; color: var(--h-bone); text-transform: none; }
.hk-title span { color: var(--h-ember); }
.hk-panel { position: relative; border: 1px solid var(--h-line); background: var(--h-card); box-shadow: 0 30px 60px -44px #000, inset 0 1px 0 rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hk-sec { position: relative; padding-top: 96px; }
.hk-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 30px; }
.hk-sec-links { display: flex; gap: 10px; flex-wrap: wrap; }
.hk-note { max-width: 46ch; font-size: 15px; font-weight: 600; color: var(--h-ash); }
.hk-empty { padding: 28px; border: 1px dashed var(--h-line2); text-align: center; color: var(--h-ash); }
.hk-warn { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 9px 16px; border: 1px solid rgba(226, 67, 79, .4); background: rgba(179, 20, 39, .12); font-size: 14px; font-weight: 600; color: #F1C9CC; }
.hk-warn b { font-family: var(--h-display); font-weight: 800; letter-spacing: .08em; color: var(--h-ember); }
.hk-link { padding: 9px 18px; border: 1px solid var(--h-line2); background: rgba(18, 10, 13, .8); font-family: var(--h-display); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--h-pale) !important; white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s, transform .35s var(--h-spring); }
.hk-link:hover { background: var(--h-gold); border-color: var(--h-gold); color: #120A0D !important; transform: translateY(-2px); }
.hk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hk-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border: 0; font-family: var(--h-display); font-weight: 800; font-size: 16px; letter-spacing: .1em; white-space: nowrap; cursor: pointer; transition: transform .35s var(--h-spring), box-shadow .35s var(--h-ease), background-color .3s, color .3s; }
.hk-btn svg { width: 18px; height: 18px; fill: currentColor; }
.hk-btn:hover { transform: translateY(-3px); }
.hk-btn--crimson { background: linear-gradient(135deg, #D8213A, #B31427 50%, #7A1020); color: #FFF3F4 !important; box-shadow: 0 14px 30px -14px rgba(179, 20, 39, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.hk-btn--crimson:hover { box-shadow: 0 20px 36px -14px rgba(226, 67, 79, 1), 0 0 0 3px rgba(226, 67, 79, .18); }
.hk-btn--ghost { background: rgba(242, 236, 230, .05); color: var(--h-bone) !important; box-shadow: inset 0 0 0 1.5px var(--h-line2); }
.hk-btn--ghost:hover { background: rgba(201, 162, 39, .16); box-shadow: inset 0 0 0 1.5px var(--h-gold); }
.hk-share { display: flex; gap: 8px; }
.hk-share button { width: 48px; height: 48px; border: 0; background: rgba(242, 236, 230, .05); color: var(--h-gold); font-size: 17px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--h-line2); transition: transform .35s var(--h-spring), background-color .3s, color .3s; }
.hk-share button:hover { background: var(--h-crimson); color: #fff; transform: translateY(-2px); }
.hk-btn:focus-visible, .hk-link:focus-visible, .hk-soc:focus-visible, .hk-share button:focus-visible,
.hk-thumb:focus-visible, .hk-box:focus-visible, .hk-art:focus-visible { outline: 3px solid var(--h-gold); outline-offset: 3px; }

.cp-js .hk [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(30px); }
.hk [data-reveal] { transition: opacity 1s var(--h-ease), transform 1s var(--h-ease); }

/* ---------------- hero ---------------- */
.hk-hero { position: relative; overflow: hidden; min-height: min(100svh, 920px); padding: 132px 0 64px; display: flex; align-items: center; }
.hk-hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px 44px; align-items: center; width: 100%; }
.hk-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid var(--h-line); background: rgba(18, 10, 13, .72); font-family: var(--h-display); font-weight: 600; font-size: 13.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--h-ash); animation: hk-rise .9s var(--h-ease) .05s both; }
.hk-kicker span { color: var(--h-ember); }
.hk-jp-mark { margin: 18px 0 2px; font-size: clamp(56px, 8vw, 104px); line-height: 1; letter-spacing: .06em; background: linear-gradient(170deg, #FFF6F0 10%, #E2434F 55%, #7A1020); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 26px rgba(179, 20, 39, .5)); animation: hk-rise 1s var(--h-ease) .12s both; }
.hk-name { font-family: var(--h-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: var(--h-bone); animation: hk-rise .9s var(--h-ease) .28s both; }
.hk-tagline { margin-top: 10px; font-family: var(--h-display); font-weight: 600; font-size: clamp(17px, 1.9vw, 22px); letter-spacing: .28em; text-transform: uppercase; color: var(--h-gold); animation: hk-rise .9s var(--h-ease) .4s both; }
.hk-lede { max-width: 52ch; margin-top: 16px; font-size: clamp(16px, 1.5vw, 18px); font-weight: 600; line-height: 1.75; color: #D6CCC6; animation: hk-rise .9s var(--h-ease) .52s both; }
.hk-hero .hk-actions { margin-top: 26px; animation: hk-rise .9s var(--h-ease) .64s both; }
.hk-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; animation: hk-rise .9s var(--h-ease) .76s both; }
.hk-stat { min-width: 140px; padding: 12px 18px; border: 1px solid var(--h-line); background: rgba(18, 10, 13, .7); }
.hk-stat b { display: block; font-family: var(--h-display); font-weight: 800; font-size: 19px; line-height: 1.2; letter-spacing: .06em; color: var(--h-pale); }
.hk-stat span { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ash); }
@keyframes hk-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.hk-hero-art { position: relative; justify-self: center; width: min(460px, 100%); animation: hk-rise 1.2s var(--h-ease) .3s both; }
/* The court's name down the side, the way a shrine banner reads. */
.hk-banner-jp {
  position: absolute; z-index: 3; right: -6px; top: -26px; margin: 0;
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: clamp(26px, 3vw, 40px); letter-spacing: .3em; line-height: 1;
  color: rgba(242, 236, 230, .82);
  text-shadow: 0 0 18px rgba(179, 20, 39, .9);
}
.hk-moon { position: absolute; z-index: 0; left: 50%; top: 40%; width: min(120%, 520px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(179, 20, 39, .5), rgba(122, 16, 32, .18) 62%, transparent 72%); }
.hk-frame { position: relative; z-index: 1; margin: 0; overflow: hidden; aspect-ratio: 5 / 7; border: 1px solid var(--h-line2); box-shadow: 0 0 0 8px rgba(18, 10, 13, .85), 0 40px 80px -34px #000; }
.hk-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.02); transition: transform 1.2s var(--h-ease); }
.hk-hero-art:hover .hk-frame img { transform: scale(1.07); }
/* A red seal stamp in the corner, as a painting would carry. */
.hk-seal {
  position: absolute; right: 14px; bottom: 14px; width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--h-crimson); color: #FFF2F2; font-size: 26px; line-height: 1;
  box-shadow: 0 0 0 2px rgba(255, 242, 242, .3), 0 10px 22px -10px #000;
}

/* ---------------- band ---------------- */
.hk-band { position: relative; z-index: 2; overflow: hidden; border-top: 1px solid var(--h-line2); border-bottom: 1px solid var(--h-line2); background: linear-gradient(90deg, #100A0D, #2A0A11 50%, #100A0D); }
.hk-band-track { display: flex; align-items: center; width: max-content; animation: hk-marquee 44s linear infinite; }
.hk-band span { padding: 12px 14px; font-family: var(--h-display); font-weight: 600; font-size: 14px; letter-spacing: .24em; color: var(--h-bone); white-space: nowrap; }
.hk-band i { font-style: normal; color: var(--h-ember); }
@keyframes hk-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------------- about ---------------- */
.hk-about { display: grid; grid-template-columns: .8fr 1.28fr .82fr; gap: 26px; align-items: start; }
.hk-model { position: relative; }
.hk-model img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .65)); }
.hk-model-floor { position: absolute; left: 8%; right: 8%; bottom: -6px; height: 30px; background: radial-gradient(closest-side, rgba(179, 20, 39, .5), transparent 70%); filter: blur(9px); }
.hk-about-copy { padding: 34px 32px; }
.hk-about-copy .hk-title { margin-bottom: 18px; font-size: clamp(26px, 3.2vw, 40px); }
.hk-about-copy p:not(.hk-kick) { font-size: 16px; font-weight: 600; line-height: 1.85; color: #CFC5BE; }
.hk-about-copy p.hk-first { font-size: 18px; font-weight: 700; line-height: 1.7; color: var(--h-bone); }
.hk-about-copy p + p { margin-top: 12px; }
.hk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hk-tag { padding: 6px 13px; background: rgba(179, 20, 39, .16); box-shadow: inset 0 0 0 1px rgba(226, 67, 79, .35); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #F2D6D8; }
.hk-tag:nth-child(3n) { background: rgba(201, 162, 39, .12); box-shadow: inset 0 0 0 1px var(--h-line2); color: var(--h-pale); }
.hk-socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; margin-top: 24px; }
.hk-soc { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--h-line); background: rgba(242, 236, 230, .03); font-weight: 700; font-size: 14px; color: var(--h-bone) !important; transition: transform .35s var(--h-spring), background-color .3s, border-color .3s; }
.hk-soc:hover { transform: translateY(-3px); background: rgba(179, 20, 39, .18); border-color: var(--h-ember); }
.hk-soc .i { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; background: var(--c, var(--h-stone)); color: var(--h-bone); font-size: 14px; }
.hk-soc .i svg { width: 15px; height: 15px; fill: currentColor; }
.hk-soc.twitch { --c: #5B2E8C; } .hk-soc.youtube { --c: #8E1620; } .hk-soc.tiktok { --c: #1D4F52; } .hk-soc.x { --c: #2A2026; }
.hk-soc.link { --c: #7A1020; }
.hk-facts { margin: 0; padding: 16px 24px; }
.hk-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--h-line); }
.hk-fact:last-child { border-bottom: 0; }
.hk-fact dt { font-family: var(--h-display); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--h-ash); white-space: nowrap; }
.hk-fact dd { margin: 0; font-weight: 700; font-size: 14.5px; color: var(--h-bone); text-align: right; }

/* ---------------- media ---------------- */
.hk-vods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.hk-media { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--h-card); border: 1px solid var(--h-line); transition: transform .5s var(--h-ease), box-shadow .5s var(--h-ease), border-color .4s; }
.hk-media:hover { transform: translateY(-5px); border-color: var(--h-line2); box-shadow: 0 30px 50px -32px rgba(179, 20, 39, .7); }
.hk-player { position: relative; aspect-ratio: 16 / 9; background: var(--h-ink); }
.hk-media--tall .hk-player { aspect-ratio: 9 / 16; }
.hk-thumb { position: absolute; inset: 0; display: block; overflow: hidden; }
.hk-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .9s var(--h-ease), filter .5s; }
.hk-media:hover .hk-thumb img { transform: scale(1.05); filter: none; }
.hk-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10, 7, 9, .8)); }
.hk-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; border-radius: 50%; background: rgba(10, 7, 9, .6); color: var(--h-bone); box-shadow: inset 0 0 0 2px rgba(242, 236, 230, .55); transition: transform .45s var(--h-spring), background-color .3s, color .3s; }
.hk-play svg { width: 20px; height: 20px; margin-left: 2px; fill: currentColor; }
.hk-media:hover .hk-play { transform: scale(1.12); background: var(--h-crimson); color: #fff; }
.hk-len { position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 3px 9px; background: rgba(10, 7, 9, .85); font-family: var(--h-display); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--h-bone); }
.hk-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hk-thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; color: var(--h-gold); background: radial-gradient(circle, var(--h-stone), var(--h-lacquer)); }
.hk-media-meta { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.hk-chip { align-self: flex-start; padding: 3px 10px; font-family: var(--h-display); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; background: rgba(91, 46, 140, .34); color: #D3BEF2; }
.hk-chip.highlight { background: rgba(201, 162, 39, .18); color: var(--h-pale); }
.hk-chip.clip { background: rgba(179, 20, 39, .24); color: #F2B7BD; }
.hk-chip.yt { background: rgba(142, 22, 32, .32); color: #F0A79A; }
.hk-chip.tiktok { background: rgba(29, 79, 82, .4); color: #8FD8E0; }
.hk-media-title { font-family: 'Nunito', 'Shippori Mincho JP', system-ui, sans-serif; font-weight: 800; font-size: 15px; line-height: 1.4; letter-spacing: 0; color: var(--h-bone); text-transform: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hk-media-sub { font-size: 13px; font-weight: 600; color: var(--h-ash); }
.hk-sub { margin: 52px 0 18px; font-family: var(--h-display); font-weight: 800; font-size: 24px; letter-spacing: .06em; color: var(--h-bone); text-transform: none; }
.hk-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 60px) / 4)); gap: 20px; overflow-x: auto; margin: 0 -12px; padding: 8px 12px 26px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(201, 162, 39, .5) transparent; }
.hk-row > * { scroll-snap-align: start; }
.hk-row--tall { grid-auto-columns: 226px; }

/* ---------------- omikuji ---------------- */
.hk-omikuji { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 34px; align-items: center; padding: 40px 34px; border: 1px solid var(--h-line); background:
    radial-gradient(60% 50% at 50% 0%, rgba(179, 20, 39, .14), transparent 70%), var(--h-card); }
/* Before a slip is drawn there is nothing to sit beside, so the box takes the
   middle on its own. */
.hk-omikuji:not(.has-slip) { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hk-omikuji:not(.has-slip) .hk-box-wrap { display: grid; gap: 14px; justify-items: center; }
.hk-ask { max-width: 40ch; font-size: 15px; font-weight: 600; line-height: 1.7; color: var(--h-ash); }
.hk-omikuji.has-slip .hk-ask { display: none; }
.hk-box-wrap { display: grid; place-items: center; }
/* The lacquer box: black with a gold mouth and his mark on the front. */
.hk-box {
  position: relative; width: 236px; aspect-ratio: 3 / 4.2; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(170deg, #241118 0%, #140A0E 40%, #2A1219 100%);
  box-shadow: inset 0 -24px 40px rgba(0, 0, 0, .7), 0 30px 60px -28px #000;
  transition: transform .4s var(--h-spring), box-shadow .4s var(--h-ease);
}
.hk-box:hover { transform: translateY(-6px); box-shadow: inset 0 -24px 40px rgba(0, 0, 0, .7), 0 36px 70px -28px rgba(179, 20, 39, .6); }
.hk-box.is-shaking { animation: hk-shake .6s ease-in-out; }
@keyframes hk-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-6px, -4px) rotate(-3deg); }
  35% { transform: translate(7px, -8px) rotate(4deg); }
  55% { transform: translate(-5px, -6px) rotate(-3deg); }
  75% { transform: translate(6px, -3px) rotate(2deg); }
}
/* The lid sits inside the box, so the gold edge reads as one piece: an inset
   shadow on the box itself would be painted under this and look detached. */
.hk-box::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px var(--h-line2); }
.hk-box:hover::after { box-shadow: inset 0 0 0 2px var(--h-gold); }
.hk-box-lid { position: absolute; left: 0; right: 0; top: 0; height: 24%; background: linear-gradient(180deg, #3A1A22, #1E0F14); border-bottom: 2px solid var(--h-line2); }
.hk-box-hole { position: absolute; left: 50%; top: 11%; width: 16px; height: 5px; translate: -50% 0; background: #050203; box-shadow: 0 0 10px 2px rgba(0, 0, 0, .9); }
.hk-box-mark { position: absolute; left: 50%; top: 55%; translate: -50% -50%; font-size: 34px; line-height: 1.05; writing-mode: vertical-rl; color: var(--h-pale); text-shadow: 0 0 16px rgba(201, 162, 39, .5); }
.hk-box-hint { position: absolute; left: 0; right: 0; bottom: 14px; font-family: var(--h-display); font-weight: 600; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--h-ash); }

.hk-slip { display: grid; gap: 16px; }
.hk-slip[hidden] { display: none; }
.hk-slip-paper {
  position: relative; padding: 30px 32px;
  background: linear-gradient(180deg, #F7F1E6, #EADFCD);
  color: #1A1014;
  box-shadow: 0 30px 60px -30px #000, inset 0 0 0 1px rgba(26, 16, 20, .12);
  animation: hk-unroll .55s var(--h-ease) both;
}
.hk-slip-paper::before, .hk-slip-paper::after { content: ''; position: absolute; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg, rgba(179, 20, 39, .5) 0 10px, transparent 10px 20px); }
.hk-slip-paper::before { top: 0; }
.hk-slip-paper::after { bottom: 0; }
@keyframes hk-unroll { from { opacity: 0; transform: scaleY(.2); transform-origin: top; } to { opacity: 1; transform: none; } }
.hk-slip-kanji { font-family: var(--h-jp); font-size: clamp(46px, 7vw, 76px); line-height: 1; color: var(--h-crimson); }
.hk-slip-rank { margin-top: 4px; font-family: var(--h-display); font-weight: 800; font-size: 20px; letter-spacing: .22em; text-transform: uppercase; color: #6B1220; }
.hk-slip-line { margin-top: 14px; max-width: 52ch; font-size: 17px; font-weight: 600; line-height: 1.7; color: #2B1B20; }
.hk-slip-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(26, 16, 20, .18); }
.hk-slip-detail dt { font-family: var(--h-display); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #7A6A62; }
.hk-slip-detail dd { margin: 4px 0 0; font-weight: 700; font-size: 15px; color: #2B1B20; }
.hk-slip-foot { margin-top: 18px; font-family: var(--h-display); font-size: 13px; letter-spacing: .16em; color: #8A5560; }
.hk-slip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hk-slip-note { font-size: 13.5px; font-weight: 600; color: var(--h-ash); }

/* ---------------- shop ---------------- */
.hk .hk-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk .hk-gal .gl-card { min-width: 0; }
.hk .hk-gal .gl-media img { width: 100%; height: 100%; object-fit: cover; }
.hk .gal-glass::before { background: radial-gradient(38% 30% at 18% 22%, rgba(179, 20, 39, .28), transparent 70%), radial-gradient(34% 28% at 82% 48%, rgba(201, 162, 39, .12), transparent 70%); }
.hk .gl-card::before { background: linear-gradient(140deg, #C9A227, #B31427 45%, #2E7D63 80%, #C9A227); }
.hk .gl-name { font-family: var(--h-display); font-weight: 800; letter-spacing: .03em; }
.hk .gl-price { font-family: var(--h-display); font-weight: 800; }
.hk .gal-glass .gl-by { color: var(--h-pale); }
.hk .gal-glass .gl-buy { background: linear-gradient(135deg, #D8213A, #B31427); color: #FFF3F4; font-family: var(--h-display); font-weight: 800; letter-spacing: .1em; }
.hk .gal-glass .gl-buy:hover { background: var(--h-gold); color: #140A0E; }
.hk .gl-chip i { background: var(--h-crimson); color: #fff; }

/* ---------------- art ---------------- */
.hk-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hk-art { position: relative; overflow: hidden; padding: 0; border: 1px solid var(--h-line); background: var(--h-ink); cursor: zoom-in; aspect-ratio: 4 / 5; }
.hk-art--0 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.hk-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.1s var(--h-ease); }
.hk-art:hover img { transform: scale(1.05); }
.hk-art:hover { border-color: var(--h-ember); box-shadow: 0 24px 50px -24px rgba(179, 20, 39, .7); }
.hk-viewer { position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content; max-width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.hk-viewer::backdrop { background: rgba(10, 7, 9, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hk-viewer[open] { animation: hk-zoom .45s var(--h-spring); }
@keyframes hk-zoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.hk-viewer img { display: block; max-width: min(1200px, 94vw); max-height: 88vh; width: auto; height: auto; border: 1px solid var(--h-line2); }
.hk-viewer-close { position: absolute; right: -10px; top: -14px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--h-crimson); color: #fff; font-size: 18px; cursor: pointer; }

/* ---------------- palace ---------------- */
.hk-court { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: stretch; }
.hk-court-card { position: relative; overflow: hidden; padding: 44px 40px 36px; border: 1px solid var(--h-line2); background: radial-gradient(70% 70% at 100% 0%, rgba(179, 20, 39, .22), transparent 62%), linear-gradient(150deg, #1E1016, #140C11 60%, #0C0709); }
.hk-court-card h2 { margin: 8px 0 12px; max-width: 14ch; font-family: var(--h-display); font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: .03em; color: var(--h-bone); text-transform: none; }
.hk-court-text { max-width: 46ch; font-size: 16px; font-weight: 600; line-height: 1.8; color: #CFC5BE; }
.hk-court-card .hk-actions { margin-top: 22px; }
.hk-rules-title { margin: 28px 0 10px; font-family: var(--h-display); font-size: 13.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--h-ash); }
.hk-rules { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hk-rules li { padding: 7px 13px; border: 1px solid var(--h-line); background: rgba(242, 236, 230, .04); font-size: 13.5px; font-weight: 700; color: var(--h-bone); }
.hk-rules li::before { content: '❖ '; color: var(--h-ember); }
.hk-credits { padding: 28px 26px; }
.hk-credits h3 { font-family: var(--h-display); font-weight: 800; font-size: 24px; letter-spacing: .06em; color: var(--h-bone); text-transform: none; }
.hk-credits .lead { margin: 6px 0 14px; font-size: 14.5px; font-weight: 600; color: var(--h-ash); }
.hk-credit { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--h-line); }
.hk-credit > span:first-child { font-family: var(--h-display); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--h-ash); }
.hk-credit-names { display: flex; flex-wrap: wrap; gap: 6px; }
.hk-credit-names a, .hk-credit-names b { font-weight: 800; font-size: 14px; color: var(--h-pale) !important; }
.hk-credit-names a:hover { color: var(--h-ember) !important; }

/* ---------------- join DRXP (shared markup, his colours) ---------------- */
.hk .cp-join { margin-top: 96px; }
.hk .cp-join-card { background: linear-gradient(135deg, #2A0F17, #1A1014 60%, #0E0A0C); box-shadow: inset 0 0 0 1px var(--h-line2), 0 30px 70px -30px rgba(179, 20, 39, .5); }
.hk .cp-join-card::before { content: '❖'; color: rgba(201, 162, 39, .12); }
.hk .cp-join-card h2 { font-family: var(--h-display); font-weight: 800; letter-spacing: .02em; }
.hk .cp-kick { font-family: var(--h-display); font-size: 14px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--h-ember); }
.hk .cp-btn { font-family: var(--h-display); font-weight: 800; letter-spacing: .1em; }
.hk .cp-btn-white { background: linear-gradient(135deg, #F7F1E6, #E2D3C4); color: #14100A; }
.hk .cp-num b { font-family: var(--h-display); color: var(--h-pale); }

.hk-toast { position: fixed; z-index: 95; left: 50%; bottom: 28px; padding: 12px 22px; background: linear-gradient(135deg, #D8213A, #7A1020); color: #FFF3F4; font-family: 'Shippori Mincho', serif; font-weight: 800; font-size: 15px; letter-spacing: .1em; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8); opacity: 0; transform: translate(-50%, 20px); transition: opacity .35s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.34, 1.4, .64, 1); pointer-events: none; }
.hk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- header: lacquer glass ---------------- */
body.cp-theme-harukurohane .cpnav { font-family: 'Shippori Mincho', 'Nunito', serif; }
body.cp-theme-harukurohane .cpnav-in { background: rgba(10, 7, 9, .7); border-color: rgba(201, 162, 39, .24); box-shadow: 0 14px 34px -20px rgba(179, 20, 39, .6), inset 0 1px 0 rgba(255, 255, 255, .05); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.cp-theme-harukurohane .cpnav-in { background: rgba(10, 7, 9, .96); } }
.perf-lite body.cp-theme-harukurohane .cpnav-in { background: rgba(10, 7, 9, .96); }
body.cp-theme-harukurohane .cpnav-who { color: #F2ECE6; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-left-color: rgba(201, 162, 39, .28); }
body.cp-theme-harukurohane .cpnav-av { border-color: #C9A227; box-shadow: 0 0 12px -4px #B31427; }
body.cp-theme-harukurohane .cpnav-av img { object-position: 50% 14%; transform-origin: 50% 14%; transform: scale(1.5); }
body.cp-theme-harukurohane .cpnav-links a { color: #CFC5BE; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
body.cp-theme-harukurohane .cpnav-links a:hover { color: #E2434F; background: rgba(242, 236, 230, .05); }
body.cp-theme-harukurohane .cpnav-links a[aria-current="true"] { background: linear-gradient(135deg, #B31427, #7A1020); color: #FFF3F4; box-shadow: 0 6px 16px -8px #B31427; }
body.cp-theme-harukurohane .cpnav-cart { background: linear-gradient(135deg, #D8213A, #B31427); color: #FFF3F4; box-shadow: 0 8px 18px -10px #B31427; }
body.cp-theme-harukurohane .cpnav-cart:hover { background: #C9A227; color: #140A0E; }
body.cp-theme-harukurohane .cpnav-account { background: rgba(242, 236, 230, .06); color: #C9A227; }
body.cp-theme-harukurohane .cpnav-account:hover { background: #C9A227; color: #140A0E; }
body.cp-theme-harukurohane .cpnav-burger { background: rgba(242, 236, 230, .06); }
body.cp-theme-harukurohane .cpnav-burger span { background: #C9A227; }
body.cp-theme-harukurohane .srch { --srch-acc: #E2434F; --srch-acc-soft: rgba(226, 67, 79, .16); --srch-bg: rgba(18, 10, 13, .95); }

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .hk-about { grid-template-columns: .9fr 1.1fr; }
  .hk-facts { grid-column: 1 / -1; }
  .hk-row { grid-auto-columns: minmax(280px, calc((100% - 40px) / 3)); }
  .hk-omikuji { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 30px 24px; }
}
@media (max-width: 1024px) {
  .hk-hero-grid { grid-template-columns: 1fr 1fr; }
  .hk-court { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .hk .hk-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hk-hero { min-height: 0; padding: 150px 0 52px; }
  .hk-hero-grid { grid-template-columns: 1fr; gap: 46px; }
  .hk-hero-art { width: min(340px, 82%); }
  .hk-banner-jp { right: -14px; top: -18px; font-size: 26px; }
  .hk-about { grid-template-columns: 1fr; }
  .hk-model { max-width: 330px; margin: 0 auto; }
  .hk-sec { padding-top: 76px; }
  .hk-vods { grid-template-columns: 1fr; }
  .hk-omikuji { grid-template-columns: 1fr; justify-items: center; }
  .hk-slip { width: 100%; }
  .hk-court-card { padding: 34px 22px 30px; }
}
@media (max-width: 560px) {
  .hk .hk-gal { grid-template-columns: 1fr; }
  .hk-about-copy, .hk-credits { padding: 24px 20px; }
  .hk-actions .hk-btn { flex: 1 1 auto; justify-content: center; }
  .hk-stat { flex: 1 1 42%; min-width: 0; }
  .hk-row { grid-auto-columns: 84%; }
  .hk-row--tall { grid-auto-columns: 62%; }
  .hk-gallery { grid-template-columns: 1fr; }
  .hk-art--0 { aspect-ratio: 16 / 10; }
  .hk-slip-paper { padding: 24px 20px; }
  .hk-slip-detail { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hk-smoke, .hk-band-track, .hk-box, .hk-slip-paper, .hk-hero * { animation: none !important; transition: none !important; }
  .cp-js .hk [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .hk-smoke { display: none; }
}
.perf-lite .hk-smoke, .perf-lite .hk-band-track { animation: none; }
.perf-lite .hk-smoke { display: none; }
.perf-lite .hk-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* The page's scrollbars in this palette (site.css reads --scroll-acc off
   <html>, which only the literal colour can reach from here). */
html:has(> body.cp-theme-harukurohane) { --scroll-acc: #B31427; }