:root{
  --washi:#FAF8F1; --sumi:#26292E; --sumi-soft:#5A5F66;
  --kon:#1C3352; --kon-deep:#132540; --shu:#C73E3A;
  --mist:#EAEEF2; --line:#DDD8CB; --radius:10px;
  --font-display:"Shippori Mincho", serif;
  --font-body:"Zen Kaku Gothic New", sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--washi);color:var(--sumi);line-height:1.65}
img{display:block;max-width:100%}
a{color:var(--kon)}
.crumb{max-width:820px;margin:0 auto;padding:18px clamp(16px,4vw,34px);
  font-size:.86rem;color:var(--sumi-soft)}
.crumb a{text-decoration:none} .crumb a:hover{text-decoration:underline}
.crumb span{margin:0 6px;color:var(--line)}
.fiche{max-width:820px;margin:0 auto 60px;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(28,51,82,.08)}
.fiche-head{background:linear-gradient(160deg,var(--kon),var(--kon-deep));color:#F5F2E8;
  padding:30px 34px 26px;position:relative;overflow:hidden}
.fiche-head .watermark{position:absolute;right:-10px;top:50%;transform:translateY(-50%);
  font-family:var(--font-display);font-weight:800;font-size:7.5rem;line-height:1;
  color:rgba(255,255,255,.07);pointer-events:none;white-space:nowrap}
.fiche-head .kanji{font-family:var(--font-display);font-weight:800;font-size:2.6rem;line-height:1.15}
.fiche-head .romaji{font-size:1.05rem;color:#C9D4E2;letter-spacing:.06em;margin-top:2px}
.fiche-head .cat-tag{display:inline-block;margin-top:12px;background:var(--shu);color:#fff;
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 12px;border-radius:4px}
.fiche-body{padding:26px 34px 36px}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px}
.photo{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff}
.photo .frame{aspect-ratio:4/3;position:relative;background:var(--mist);
  display:flex;align-items:center;justify-content:center}
.photo .frame img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.photo .frame::after{content:attr(data-kanji);position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:3rem;color:var(--kon);
  background:linear-gradient(150deg,var(--mist),#dfe6ee)}
.photo figcaption{padding:8px 12px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sumi-soft);font-weight:700;border-top:1px solid var(--line)}
.names{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:#fff;margin-bottom:26px}
.names>div{padding:13px 16px}
.names>div+div{border-left:1px solid var(--line)}
.names .lang{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--shu);font-weight:700}
.names .val{font-weight:700;margin-top:2px;font-size:.97rem;line-height:1.35}
.names .val .k{font-family:var(--font-display);font-size:1.15rem;color:var(--kon);margin-right:6px}
.section-title{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--kon);
  display:flex;align-items:center;gap:10px;margin-bottom:10px}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}
.gout{margin-bottom:26px}
.regions ul{list-style:none}
.regions li{position:relative;padding:7px 0 7px 24px}
.regions li+li{border-top:1px dashed var(--line)}
.regions li::before{content:"";position:absolute;left:4px;top:15px;width:8px;height:8px;
  border-radius:50%;background:var(--shu)}
.back{margin-top:28px}
.back a{text-decoration:none;font-weight:700} .back a:hover{text-decoration:underline}
.share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 24px;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.share-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sumi-soft);font-weight:700}
.share-btn{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;color:var(--kon);cursor:pointer;padding:0;text-decoration:none;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease}
.share-btn svg{width:17px;height:17px;fill:currentColor}
.share-btn:hover{transform:translateY(-2px)}
.share-x:hover{background:#000;color:#fff;border-color:#000}
.share-facebook:hover{background:#1877F2;color:#fff;border-color:#1877F2}
.share-btn:focus-visible{outline:3px solid var(--kon);outline-offset:2px}
@media (max-width:640px){
  .photos{grid-template-columns:1fr} .names{grid-template-columns:1fr}
  .names>div+div{border-left:none;border-top:1px solid var(--line)}
  .fiche-head{padding:24px 22px 22px} .fiche-body{padding:22px 20px 30px}
  .fiche-head .watermark{font-size:5rem}
}