:root{
  --void:#070504; --bg:#0c0908; --bg2:#100c0a; --warm:#181210; --warm2:#1f1713;
  --ink:#efe5d2; --ink-dim:#d3c5ac; --muted:#9d917c; --faint:#6f6555;
  --blood:#8f211f; --blood-lit:#bb3c2b; --gold:#c4a36a; --gold-dim:#8a7547; --shu:#b23320;
  --hair:rgba(239,229,210,.10);
  --disp:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--gothic);font-size:16px;line-height:1.9;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(80% 50% at 0% 35%, rgba(60,42,32,.4), transparent 60%),
    radial-gradient(90% 70% at 50% 100%, rgba(20,14,12,.9), transparent 70%),
    linear-gradient(180deg,#0a0706,#0d0a08 45%,#080605);
}
a{color:inherit;text-decoration:none}
::selection{background:var(--blood);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.wrap{width:min(100% - 48px,1080px);margin-inline:auto}

/* header */
header.site{border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;gap:24px;min-height:70px}
.brand{display:flex;align-items:baseline;gap:11px;flex-wrap:nowrap;white-space:nowrap}
.brand .jp{font-family:var(--disp);font-size:24px;font-weight:800;white-space:nowrap}
.brand .en{font-family:var(--mono);font-size:10px;letter-spacing:.44em;color:var(--gold-dim)}
.brand .desc{font-size:10px;color:var(--faint);letter-spacing:.2em;margin-left:4px}
.links{display:flex;gap:24px;margin-left:auto;font-size:13px;color:var(--muted);letter-spacing:.06em}
.links a{position:relative}
.links a:hover{color:var(--ink)}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--gold);opacity:.7;transition:.3s}
.links a:hover::after{right:0}

/* footer */
footer.site{padding:60px 0 130px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.5))}
.foot{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.foot .brand .jp{font-size:21px}
.foot nav{display:flex;flex-wrap:wrap;gap:20px;font-size:12px;color:var(--muted)}
.foot nav a:hover{color:var(--ink)}
.foot .fine{width:100%;margin-top:28px;padding-top:22px;font-size:11px;color:var(--faint);line-height:2;font-family:var(--mincho);position:relative}
.foot .fine::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--hair),transparent 50%)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 36px;font-family:var(--gothic);
  font-size:14px;font-weight:700;letter-spacing:.1em;cursor:pointer;border:0;border-radius:10px;color:#fbe9e1;position:relative;transition:.3s;
  background:url('btn-plate-vermilion.webp') center/100% 100% no-repeat;
  box-shadow:0 18px 36px -18px rgba(0,0,0,.7);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 24px 44px -18px rgba(0,0,0,.8)}
.btn.ghost{background:rgba(239,229,210,.06);color:var(--ink);box-shadow:none;text-shadow:none}
.btn.ghost:hover{background:rgba(239,229,210,.11);transform:translateY(-1px)}
.btn.sm{min-height:44px;padding:0 22px;font-size:12px;border-radius:8px}

@media(max-width:760px){
  .links{display:none}
  .nav{gap:14px}
  .brand .desc{display:none}
}