/* detail pages: index (night/bone/clay) palette on the shared layout.
   Token roles are kept from the original light build:
   --paper=page ground, --paper-2=raised plate, --ink=primary text. */
:root{
  --font-body: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-serif-display: "Shippori Mincho B1", "Zen Old Mincho", serif;
  --paper:   #262322;
  --paper-2: #302B29;
  --stone:   #57504A;
  --ink:     #EDE6DD;
  --ink-2:   rgba(237,230,221,.72);
  --terra:   #C9A99B;
  --gold:    #B08D80;
  --muted:   #9A8C80;
  --line: rgba(237,230,221,.15);
  --line-strong: rgba(237,230,221,.34);
  --wrap: 1280px;
  --wrap-wide: 1460px;
  --pad: clamp(20px, 5vw, 64px);
  --sec-y: clamp(72px, 8vw, 120px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  font-weight:400;
}
img{ max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--wide{ max-width:var(--wrap-wide); }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#1B1918;
  padding:10px 16px; font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:14px;
}
.skip:focus{ left:0; }
.kicker{
  margin:0 0 14px;
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-weight:700;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}
h1,h2,h3,h4{ font-family:"Shippori Mincho B1", "Zen Old Mincho", serif; font-weight:700; margin:0; }
.lede{
  margin:18px 0 0; font-family:"Zen Kaku Gothic New", system-ui, sans-serif;
  font-size:clamp(14.5px,1.15vw,16px); color:var(--ink-2); max-width:46em;
}
.topbar{
  position:sticky; inset:0 0 auto 0; z-index:60;
  background:rgba(27,25,24,.74);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.topbar__in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:58px;
}
.topbar__mark{ font-family:"Shippori Mincho B1", "Zen Old Mincho", serif; font-weight:700; font-size:18px; letter-spacing:.1em; text-decoration:none; }
.topbar__nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.topbar__nav a{
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:13px; letter-spacing:.08em;
  text-decoration:none; color:var(--ink-2); padding:6px 0;
  border-bottom:1px solid transparent;
}
.topbar__nav a:hover{ color:var(--ink); border-bottom-color:var(--gold); }
.topbar__mail{ font-weight:700; color:var(--terra) !important; }
@media (max-width:719px){ .topbar__mail{ display:none; } }

.crumb{
  margin:0 0 28px;
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:12.5px;
  letter-spacing:.08em; color:var(--muted);
}
.crumb a{ text-decoration:none; border-bottom:1px solid var(--gold); }
.crumb a:hover{ color:var(--terra); border-bottom-color:var(--terra); }
.crumb span{ margin:0 8px; color:var(--stone); }

.detail{ padding-block:clamp(40px,6vw,72px) var(--sec-y); }
.detail__title{ font-size:clamp(28px,4vw,48px); letter-spacing:.03em; max-width:18em; }
.badge{
  display:inline-block; margin:14px 0 0;
  border:1px solid var(--line-strong); background:var(--paper-2);
  padding:4px 9px;
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-weight:700;
  font-size:10px; letter-spacing:.16em; color:var(--terra);
}

.meta{ margin:clamp(32px,4vw,52px) 0 0; border-top:1px solid var(--line); }
.meta>div{
  display:grid; grid-template-columns:1fr; gap:4px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
@media (min-width:640px){ .meta>div{ grid-template-columns:132px 1fr; gap:24px; align-items:baseline; } }
.meta dt{
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-weight:700; font-size:11.5px;
  letter-spacing:.16em; color:var(--muted);
}
.meta dd{ margin:0; font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:15px; }

.note{
  margin:clamp(28px,3vw,42px) 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:14px; color:var(--ink-2); max-width:52em;
}

.hero-fig{ margin:clamp(28px,3.4vw,48px) 0 0; border:1px solid var(--line); background:var(--paper-2); }
.hero-fig img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--stone); }
.hero-fig figcaption{
  margin:0; padding:10px 14px; border-top:1px solid var(--line);
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:12px; color:var(--muted);
}

.gallery{ margin:clamp(40px,5vw,64px) 0 0; display:grid; gap:clamp(40px,5vw,64px); }
.gallery__group + .gallery__group{ margin-top:0; }
.gallery__title{ font-size:clamp(17px,1.6vw,20px); letter-spacing:.03em; }
.gallery__note{
  margin:10px 0 0; font-family:"Zen Kaku Gothic New", system-ui, sans-serif;
  font-size:13.5px; color:var(--muted); max-width:46em;
}
.gallery__grid{
  list-style:none; margin:18px 0 0; padding:0;
  display:grid; gap:clamp(14px,1.6vw,22px);
  align-items:start;
  grid-template-columns:repeat(var(--cols, 3), minmax(0,1fr));
}
.gallery__grid--2{ --cols:2; }
.gallery__grid--3{ --cols:3; }
.gallery__grid--4{ --cols:4; }
.gallery__grid--5{ --cols:5; }
@media (max-width:860px){
  .gallery__grid--4,.gallery__grid--5{ --cols:3; }
}
@media (max-width:620px){
  .gallery__grid--3,.gallery__grid--4,.gallery__grid--5{ --cols:2; }
}
.gallery__item figure{ margin:0; }
.gallery__item img{
  display:block; width:100%; height:auto; background:var(--paper-2);
  border:1px solid var(--line);
}
.gallery__zoom{
  display:block; width:100%; padding:0; border:0; background:transparent;
  cursor:zoom-in; text-align:left;
}
.gallery__zoom:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }
.gallery__item figcaption{
  margin:8px 0 0; font-family:"Zen Kaku Gothic New", system-ui, sans-serif;
  font-size:12.5px; color:var(--muted);
}
.gallery__item--narrow{ max-width:var(--wg-max, 340px); }
.longpage{ display:grid; justify-items:center; margin:18px 0 0; }
.longpage__scroll{
  width:min(100%, 380px); max-height:620px; overflow:auto;
  border:1px solid var(--line-strong); background:#fff; overscroll-behavior:contain;
}
.longpage__scroll img{ display:block; width:100%; height:auto; }
.longpage__hint{
  margin:10px 0 0; font-family:"Zen Kaku Gothic New", system-ui, sans-serif;
  font-size:12.5px; color:var(--muted);
}
.inspect{
  width:min(1100px, calc(100vw - 32px));
  max-width:none; max-height:calc(100vh - 32px);
  padding:0; border:1px solid var(--line-strong); background:var(--paper-2);
}
.inspect::backdrop{ background:rgba(10,9,8,.72); }
.inspect__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 14px; border-bottom:1px solid var(--line);
}
.inspect__cap{
  margin:0; font-family:"Zen Kaku Gothic New", system-ui, sans-serif;
  font-size:13px; color:var(--ink-2);
}
.inspect__actions{ display:flex; gap:8px; flex-shrink:0; }
.inspect__nav,.inspect__close{
  border:1px solid var(--line-strong); background:var(--paper);
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:12.5px;
  padding:6px 10px; cursor:pointer;
}
.inspect__img{ display:block; width:100%; height:auto; max-height:calc(100vh - 120px); object-fit:contain; background:#fff; }

.pager{
  display:grid; gap:16px; margin:clamp(44px,5vw,72px) 0 0;
  padding-top:24px; border-top:1px solid var(--line);
}
@media (min-width:720px){ .pager{ grid-template-columns:1fr 1fr; } }
.pager a{ text-decoration:none; display:block; }
.pager__dir{
  display:block; font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-weight:700;
  font-size:11px; letter-spacing:.16em; color:var(--gold); margin-bottom:6px;
}
.pager__title{ font-family:"Shippori Mincho B1", "Zen Old Mincho", serif; font-weight:700; font-size:17px; }
.pager a:hover .pager__title{ color:var(--terra); }
.pager--empty{ color:var(--muted); }

.outrow{ display:flex; flex-wrap:wrap; gap:18px 28px; margin-top:28px; }
.outlink{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-weight:700; font-size:13.5px; letter-spacing:.1em;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:4px;
}
.outlink:hover{ color:var(--terra); border-bottom-color:var(--terra); }

.demo{
  margin:clamp(28px,3.4vw,48px) 0 0;
  border:1px solid var(--line);
  background:var(--paper-2);
}
.demo__stage{
  position:relative;
  height:min(72vh, 720px);
  overflow:hidden;
  background:#e9e8e3;
}
.demo[data-demo-kind="deck"] .demo__stage{
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
  max-height:min(78vh, 820px);
}
.demo[data-demo-kind="doc"] .demo__stage{
  width:100%;
  height:min(78vh, 860px);
  background:#f5f5f4;
}
.demo__fallback{
  position:absolute; inset:0; z-index:1; background:#e9e8e3;
}
.demo__fallback img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.demo__stage iframe{
  display:block; width:100%; height:100%; border:0; background:#fff;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.demo__cap{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; border-top:1px solid var(--line);
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:13px; color:var(--muted);
}
.demo__open{
  flex-shrink:0; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--gold);
  font-weight:700; letter-spacing:.08em;
}
.demo__open:hover{ color:var(--terra); border-bottom-color:var(--terra); }

.case{ margin:clamp(72px,9vw,128px) 0 0; display:grid; gap:clamp(64px,8vw,112px); }
.case__block{ padding-top:clamp(24px,3vw,40px); border-top:1px solid var(--line); }
.case__head{
  display:grid; gap:16px; align-items:start;
  margin:0;
}
@media (min-width:760px){
  .case__head{ grid-template-columns:minmax(120px,.3fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); }
}
.case__head .kicker{ margin:0; }
.case__head h2{ font-size:clamp(26px,3.5vw,46px); letter-spacing:0; max-width:16em; }
.case__head p{
  margin:20px 0 0; font-family:"Zen Kaku Gothic New", system-ui, sans-serif;
  font-size:15px; color:var(--ink-2); max-width:64ch;
}
.case__block:has(.case__system) .case__head{ margin-bottom:clamp(28px,4vw,52px); }
.case__system{
  display:grid; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line);
}
@media (min-width:760px){ .case__system{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.case__system article{
  min-width:0; padding:clamp(22px,3vw,36px);
  border-top:1px solid var(--line);
}
@media (min-width:760px){
  .case__system article{ border-top:0; border-left:1px solid var(--line); }
  .case__system article:first-child{ border-left:0; }
}
@media (max-width:759.98px){
  .case__head{ margin-bottom:24px; }
  .case__system article:first-child{ border-top:0; }
}
.case__system article > span{
  display:block; margin-bottom:28px;
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-weight:700;
  font-size:11px; letter-spacing:.08em; color:var(--terra);
}
.case__system h3{ font-size:clamp(18px,2vw,23px); letter-spacing:0; }
.case__system p{
  margin:14px 0 0; font-family:"Zen Kaku Gothic New", system-ui, sans-serif;
  font-size:13.5px; color:var(--muted);
}
.case__related-title{ font-size:clamp(17px,1.6vw,20px); letter-spacing:.03em; margin:0 0 18px; }
.case__related{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:860px){ .case__related{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .case__related{ grid-template-columns:1fr; } }
.case__rel{
  display:block; text-decoration:none; border:1px solid var(--line); background:var(--paper-2);
}
.case__rel img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--stone); }
.case__rel span{
  display:block; padding:10px 12px;
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:13px;
}
.case__rel:hover{ border-color:var(--terra); }
.case__rel:hover span{ color:var(--terra); }

.foot{ background:#141312; color:var(--ink); border-top:1px solid var(--line); padding-block:clamp(56px,7vw,92px) 34px; }
.foot__cols{ display:grid; gap:clamp(32px,4vw,60px); grid-template-columns:1fr; }
@media (min-width:760px){ .foot__cols{ grid-template-columns:1.4fr 1fr 1fr; } }
.foot h2{ font-size:26px; letter-spacing:.1em; }
.foot__role{ margin:12px 0 0; font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:13px; letter-spacing:.06em; color:rgba(237,230,221,.66); }
.foot__h{
  margin:0 0 16px; font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-weight:700;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(237,230,221,.55);
}
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li+li{ margin-top:11px; }
.foot a{ font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:13.5px; text-decoration:none; color:var(--ink); border-bottom:1px solid transparent; }
.foot a:hover{ border-bottom-color:var(--gold); }
.foot__end{
  margin-top:clamp(44px,5vw,72px); padding-top:22px;
  border-top:1px solid rgba(237,230,221,.22);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; font-size:11.5px; letter-spacing:.1em;
  color:rgba(237,230,221,.62);
}