/* mizukiwada.com — minimal, one narrow column, one page per section.
   Light (paper) and dark (black with silver type) themes; brand silver #b4b9c0. */
:root{
  --bg:#f1f2f3;--ink:#16171a;--head:#16171a;--sub:#4f545b;--mut:#6a7078;--rule:#d9dce0;--tile:#e2e4e7;
  --hl:rgba(180,185,192,.22);--btn:#16171a;--btnfg:#f1f2f3;--brand:#b4b9c0;
  --b:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --m:"DM Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0e0f11;--ink:#b4b9c0;--head:#e4e6e9;--sub:#8b9199;--mut:#6c727a;--rule:#25282c;--tile:#1a1c1f;
  --hl:rgba(180,185,192,.1);--btn:#b4b9c0;--btnfg:#0e0f11;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--b);font-size:15px;line-height:1.75;-webkit-text-size-adjust:100%;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,.page:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.page:focus{outline:none}
[hidden]{display:none!important}
.col{width:100%;max-width:792px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}

/* Header / footer */
.hd{position:sticky;top:0;z-index:20;background:var(--bg)}
.hdi{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-top:max(26px,env(safe-area-inset-top));padding-bottom:18px}
.logo{font-weight:700;font-size:16px;letter-spacing:.01em;text-decoration:none;color:var(--head)}
.hdr{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
nav{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--m);font-size:12px;letter-spacing:.02em}
nav a{text-decoration:none;color:var(--sub);transition:color .2s}
nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.ft{margin-top:auto;padding-top:48px}
.fti{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;padding-bottom:max(48px,env(safe-area-inset-bottom));border-top:1px solid var(--rule);font-family:var(--m);font-size:11px;color:var(--sub)}
.fti a{color:var(--sub);text-decoration:none}.fti a:hover{color:var(--ink)}
.fti .sns{display:flex;gap:6px 18px;flex-wrap:wrap;flex-basis:100%}
@media(max-width:640px){.hd{position:static}.hdi{padding-top:max(22px,env(safe-area-inset-top))}nav{gap:4px 16px}}

/* Theme button: sun in light, crescent in dark */
.thm{width:24px;height:24px;margin:-6px -5px -6px -4px;padding:0;align-self:center;background:none;border:0;color:var(--sub);border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:color .2s,transform .2s}
.thm:hover{color:var(--ink)}
.thm:active{transform:scale(.92)}
.thm svg{width:14px;height:14px;overflow:visible}
.thm .core{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.thm .bite{transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.thm .rays{transform-box:view-box;transform-origin:12px 12px;transition:transform .5s cubic-bezier(.3,.7,.2,1),opacity .3s}
[data-theme=dark] .thm .core{transform:scale(1.65)}
[data-theme=dark] .thm .bite{transform:translate(-7px,4px)}
[data-theme=dark] .thm .rays{transform:rotate(90deg) scale(.4);opacity:0}

/* Page */
.page{flex:1 0 auto;padding-top:72px;padding-bottom:24px;min-height:62vh}
@media(max-width:640px){.page{padding-top:48px}}
.intro{font-weight:500;font-size:clamp(26px,5vw,34px);line-height:1.35;letter-spacing:-.01em;margin:0 0 88px;color:var(--head);text-wrap:balance}
.intro em{display:block;margin-top:12px;font-style:normal;font-weight:400;font-size:15px;color:var(--sub);text-wrap:wrap}
.pt{font-weight:500;font-size:clamp(28px,5vw,36px);letter-spacing:-.01em;line-height:1.2;margin:0 0 6px;color:var(--head)}
.pd{color:var(--sub);margin:0 0 40px}
h2{font-weight:700;font-size:18px;letter-spacing:.01em;margin:0 0 14px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;color:var(--head)}
h2 small{font-weight:400;font-size:13px;color:var(--mut)}
.blk{margin-bottom:72px}
.blk-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 12px}
.blk-h h2{margin:0}
.blk-h a{font-family:var(--m);font-size:12px;color:var(--sub)}
.lead{margin:0;color:var(--sub);max-width:56ch}
.note{color:var(--sub);margin:16px 0 0;font-size:14px}
.back{display:inline-block;font-family:var(--m);font-size:12px;color:var(--sub);margin-bottom:28px;text-decoration:none}
.back:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
section.sub{padding-top:80px}

/* Filters */
.srch{margin:0 0 20px}
.srch input{width:100%;box-sizing:border-box;font-family:var(--m);font-size:13px;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.srch input::placeholder{color:var(--mut)}
.srch input:focus{border-bottom-color:var(--ink)}
.fr{display:flex;gap:6px 14px;align-items:baseline;margin:0 0 18px}
.fr+.ls,.fr+.note{margin-top:22px}
.fl{flex:0 0 52px;font-family:var(--m);font-size:11px;color:var(--mut)}
.fb{display:flex;flex-wrap:wrap;gap:6px}
.fb button{font-family:var(--m);font-size:11px;background:none;border:1px solid var(--rule);color:var(--sub);padding:3px 9px;cursor:pointer;border-radius:999px;transition:background-color .2s,color .2s,border-color .2s}
.fb button span{color:var(--mut)}
.fb button:hover{border-color:var(--ink);color:var(--ink)}
.fb button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fb button[aria-pressed=true] span{color:var(--bg);opacity:.7}
@media (max-width:520px){.fr{flex-direction:column;gap:8px;margin-bottom:20px}.fl{flex:none}}

/* Lists */
.ls{border-bottom:1px solid var(--rule)}
.li{display:grid;grid-template-columns:56px minmax(0,1.15fr) minmax(0,.85fr) 92px;gap:20px;padding-block:12px;padding-inline:14px;border-top:1px solid var(--rule);text-decoration:none;color:inherit;align-items:baseline}
.li.y{border-top-color:var(--sub)}
.li.l3{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) 92px}
.li i{font-style:normal;font-family:var(--m);font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.li .t{font-weight:500;overflow-wrap:anywhere;color:var(--head)}
.li .t small{display:block;font-weight:400;font-size:12px;color:var(--mut);line-height:1.5}
.li .s{font-size:13px;color:var(--sub);overflow-wrap:anywhere}
.li em{font-style:normal;font-family:var(--m);font-size:11px;color:var(--sub);text-align:right;white-space:nowrap}
a.li[href]:hover{background:var(--hl)}
a.li[href]:hover .t{text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){
  .li,.li.l3{grid-template-columns:44px minmax(0,1fr) auto;gap:4px 14px;padding-inline:8px}
  .li.l3{grid-template-columns:minmax(0,1fr) auto}
  .li .s{grid-column:2;grid-row:2}.li.l3 .s{grid-column:1}
  .li em{grid-column:3;grid-row:1}.li.l3 em{grid-column:2}
}
/* Shows: the last column carries format + alias, which can be long, so let it wrap */
.li.sh{grid-template-columns:56px minmax(0,1.15fr) minmax(0,.85fr) minmax(92px,.6fr)}
.li.sh em{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
@media(max-width:600px){.li.sh{grid-template-columns:44px minmax(0,1fr) minmax(0,40%)}}
/* News rows: date, headline (optional body underneath), optional tag */
.li.nw{grid-template-columns:96px minmax(0,1fr) auto}
.li.nw .nb{white-space:pre-line;color:var(--sub);margin-top:2px}
@media(max-width:600px){.li.nw{grid-template-columns:minmax(0,1fr) auto}.li.nw i{grid-column:1;grid-row:1}.li.nw .t{grid-column:1;grid-row:2}.li.nw em{grid-column:2;grid-row:1}}
/* Release rows carry their artwork: muted until hovered */
.li.rel{grid-template-columns:56px 52px minmax(0,1.1fr) minmax(0,.8fr) 92px;align-items:center;padding-block:8px}
.th{width:52px;aspect-ratio:1;background:var(--tile);overflow:hidden;display:block}
.th img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.5;transition:filter .35s ease,opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
[data-theme=dark] .th img{opacity:1;filter:grayscale(1) brightness(.5) contrast(.9)}
.li.rel:hover .th img,.li.rel:focus-visible .th img,[data-theme=dark] .li.rel:hover .th img,[data-theme=dark] .li.rel:focus-visible .th img{filter:saturate(1.15);opacity:1;transform:scale(1.04)}
[data-theme=dark] .li.rel:hover .th img,[data-theme=dark] .li.rel:focus-visible .th img{filter:saturate(1.3) brightness(1.08)}
@media(hover:none){.th img,[data-theme=dark] .th img{filter:grayscale(.35);opacity:.85}}
.li.rel .ym{display:none}
@media(max-width:600px){
  .li.rel{grid-template-columns:48px minmax(0,1fr) auto;gap:2px 14px}
  .li.rel>i{display:none}
  .li.rel .th{width:48px;grid-row:1/span 2}
  .li.rel .t{grid-column:2;grid-row:1}.li.rel .s{grid-column:2;grid-row:2}.li.rel em{grid-column:3;grid-row:1}
  .li.rel .ym{display:inline}
}
.more{display:block;background:none;border:0;padding:0;margin-top:18px;font-family:var(--m);font-size:12px;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:4px}

/* A release or work opens in place under its row */
.li[aria-expanded]{cursor:pointer}
.li.on{background:var(--hl)}
.li.on .t{transform:translateX(4px)}
.li.on .th img,[data-theme=dark] .li.on .th img{filter:saturate(1.15);opacity:1}
[data-theme=dark] .li.on .th img{filter:saturate(1.3) brightness(1.08)}
.xp{overflow:hidden}
.xp.grow{transition:height .6s cubic-bezier(.34,1.18,.5,1)}
.xp.shut{transition:height .4s cubic-bezier(.4,0,.2,1)}
.xi{padding:20px 14px 44px 90px}
.xp.grow .xi{animation:mwIn .55s .08s cubic-bezier(.2,.7,.2,1) both}
.xp.shut .xi{opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .3s}
.xi .rd{grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:32px}
.xi .meta{margin-top:0}
.xi .rs{margin-top:32px}
.xi>.cm:first-child{margin-top:0}
.xi>.cm+.rs{margin-top:24px}
@media(max-width:640px){.xi{padding:16px 8px 36px}.xi .rd{grid-template-columns:minmax(0,1fr);gap:20px}.xi .cv{max-width:260px}}

/* Detail parts */
.rd{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:640px){.rd{grid-template-columns:1fr;gap:24px}}
.cv{aspect-ratio:1;background:var(--tile);display:grid;place-items:center;color:var(--mut);font-size:13px;text-align:center;overflow:hidden}
.cv img{width:100%;height:100%;object-fit:cover}
.cv span{padding:12px}
.dh1{font-weight:500;font-size:clamp(26px,4.6vw,40px);line-height:1.15;letter-spacing:-.015em;margin:0;color:var(--head)}
.sbt{color:var(--sub);margin:4px 0 0}
.ar{font-size:16px;margin:10px 0 0}
.meta{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 16px;margin:24px 0 0;font-size:14px}
.meta dt{font-family:var(--m);font-size:11px;color:var(--mut);padding-top:3px}
.meta dd{margin:0}
.dtags{display:flex;flex-wrap:wrap;gap:6px}
.dtags a{font-family:var(--m);font-size:11px;border:1px solid var(--rule);padding:2px 9px;border-radius:999px;text-decoration:none;color:var(--sub)}
.dtags a:hover{border-color:var(--ink);color:var(--ink)}
.lbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.listen{display:inline-block;padding:10px 18px;background:var(--btn);color:var(--btnfg);text-decoration:none;font-family:var(--m);font-size:12px;letter-spacing:.04em}
.listen:hover{opacity:.85}
.cm{margin-top:32px}
.cm p{margin:0 0 12px;white-space:pre-line;max-width:62ch}.cm p.ja{color:var(--sub)}
.rs{margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
@media(max-width:640px){.rs{grid-template-columns:1fr}}
.rs>div{min-width:0}
.rs .wide{grid-column:1/-1}
.rs h3{font-family:var(--m);font-weight:400;font-size:11px;color:var(--mut);letter-spacing:.04em;margin:0 0 8px;padding-top:12px;border-top:1px solid var(--rule)}
.rs ol{margin:0;padding-left:1.4em}.rs ul{margin:0;padding:0;list-style:none;font-size:13px;color:var(--sub)}
.embed iframe{display:block;width:100%;border:0}
.embed .yt{aspect-ratio:16/9;height:auto;background:#000}
.embed figure{margin:0 0 16px}.embed figcaption{font-family:var(--m);font-size:11px;color:var(--mut);margin-top:6px}
.wl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wl a{font-family:var(--m);font-size:13px;color:var(--ink);text-underline-offset:4px;overflow-wrap:anywhere}

/* Works */
.private{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:32px;padding:18px 20px;border:1px solid var(--rule)}
.private p{margin:0;color:var(--sub);font-size:14px}
.private a{font-family:var(--m);font-size:12px;color:var(--ink);text-underline-offset:4px}

/* Shows */
.li .lu{display:block;font-size:12px;color:var(--mut);margin-top:2px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* About */
.ab-img{width:100%;height:auto;margin:0 0 32px;filter:grayscale(1)}
[data-theme=dark] .ab-img{filter:grayscale(1) brightness(.85)}
.ab p{margin:0 0 14px}.ab p.ja{color:var(--sub)}.ab p:not(.ja)+p.ja{margin-top:24px}
.facts{margin-top:32px}
.sv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
@media(max-width:600px){.sv{grid-template-columns:1fr}}
.sv div{border-top:1px solid var(--rule);padding-block:14px 18px}
.sv b{display:block;font-weight:700;color:var(--head)}
.sv span{display:block;font-family:var(--m);font-size:11px;color:var(--mut);margin-bottom:6px}
.sv p{margin:0;color:var(--sub);font-size:14px}
.ct{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) 92px;gap:20px;align-items:end;border-top:1px solid var(--rule);padding:28px 14px 32px}
.mail{font-size:clamp(22px,4.4vw,32px);font-weight:500;line-height:1.3;text-decoration:none;justify-self:start;border-bottom:2px solid var(--ink);overflow-wrap:anywhere;color:var(--head)}
.mail:hover{border-bottom-color:var(--sub)}
.invite{grid-column:2/4;color:var(--sub);margin:0;font-size:14px}
@media(max-width:600px){.ct{grid-template-columns:1fr;gap:16px;padding:22px 8px 26px}.invite{grid-column:auto}}

/* Motion: a short rise on page change, rows arrive in sequence */
body,.hd,.li,.cv,.fb button{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
@keyframes mwIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mwRise{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(.35em)}to{opacity:1;clip-path:inset(0 0 -20% 0);transform:none}}
@keyframes mwRow{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.page.enter>*{animation:mwIn .5s cubic-bezier(.2,.7,.2,1) both}
.page.enter>*:nth-child(2){animation-delay:.05s}.page.enter>*:nth-child(3){animation-delay:.1s}.page.enter>*:nth-child(4){animation-delay:.15s}.page.enter>*:nth-child(n+5){animation-delay:.2s}
.page.enter .pt,.page.enter .intro,.page.enter .dh1{animation:mwRise .7s cubic-bezier(.2,.7,.2,1) both}
.page.enter .li{animation:mwRow .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 28ms + .12s)}
.page.enter .cv img{animation:mwIn .6s .1s both}
.fade{animation:mwIn .35s both}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.lk{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-family:var(--m);font-size:12px}
.lk a{color:var(--ink);text-underline-offset:4px}