@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Noto+Serif+JP:wght@400;500;600&display=swap');

:root {
  --ink:#0d0d0d; --paper:#eeeae3; --muted:#aaa39c; --line:rgba(238,234,227,.17);
  --gold:#d4bd97; --wine:#6f3f46; --serif:"Libre Baskerville","Noto Serif JP",serif;
  --sans:"DM Sans","Yu Gothic",sans-serif; --photo-width:420px;
}
* { box-sizing:border-box; }
html { overflow-anchor:none; scroll-padding-top:92px; }
body { margin:0; background:var(--ink); color:var(--paper); font:16px/1.8 var(--sans); overflow-x:clip; }
[hidden] { display:none!important; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button,summary,a { -webkit-tap-highlight-color:transparent; }
button,summary { cursor:pointer; }
h1,h2,h3,h4,button,summary,img,svg,.no-select,.no-select *,.block-link,.icon-link {
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
}
img { max-width:100%; display:block; }
:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.round-icon { border:0; padding:0; background:transparent; border-radius:50%; object-fit:contain; aspect-ratio:1; flex-shrink:0; }
.new-tab-icon { display:inline-block; width:15px; height:15px; flex-shrink:0; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:1.5; }

.hero { padding:85px 24px 110px; background:linear-gradient(90deg,rgba(13,13,13,.88),rgba(13,13,13,.57)),url('../images/background.webp') center/cover; }
.hero-inner,.section-inner { width:min(1200px,100%); margin-inline:auto; }
.hero-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,var(--photo-width)); gap:clamp(36px,6vw,90px); align-items:center; }
.portrait,.bio-image { width:100%; max-width:var(--photo-width); justify-self:center; }
.portrait,.bio-image img { width:100%; height:auto; box-shadow:16px 16px 0 rgba(111,63,70,.3); }
.eyebrow { margin:0; color:var(--gold); font-size:10px; letter-spacing:.2em; }
.hero h1 { font:400 clamp(36px,4.8vw,64px)/1.15 "Noto Serif JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif; margin:25px 0 8px; letter-spacing:.055em; }
.hero-roman { margin:0; font-size:12px; letter-spacing:.28em; color:var(--gold); }
.lead { font:15px/2.1 "Noto Serif JP",serif; color:#d7d1c8; margin:30px 0 0; }

.section { position:relative; padding:clamp(80px,10vw,135px) max(6vw,24px); scroll-margin-top:90px; }
.section-news { --surface:#171314; --edge:#141112; background:linear-gradient(130deg,#21191b 0%,#171314 42%,#0b0b0c 100%); }
.section-videos { --surface:#2a2020; --edge:#171112; background:linear-gradient(135deg,#3a2928 0%,#2a2020 45%,#120f10 100%); }
.section-biography { --surface:#281b1e; --edge:#181315; background:linear-gradient(125deg,#382126 0%,#281b1e 45%,#100f10 100%); }
.section-social { --surface:#301f23; --edge:#201619; background:linear-gradient(135deg,#43292f 0%,#301f23 45%,#120d0f 100%); }
.section-shop { --surface:#eee7de; --edge:#ded4c9; --line:rgba(30,25,22,.2); --gold:#76624b; background:linear-gradient(135deg,#f5eee5 0%,#eee7de 44%,#cfc2b6 100%); color:#201d19; }
.section-contact { --surface:#171112; --edge:#0e0c0d; background:linear-gradient(135deg,#26171b 0%,#171112 44%,#090909 100%); }
.section-videos::before,.section-contact::before { content:""; position:absolute; top:0; bottom:0; width:62%; pointer-events:none; background-repeat:no-repeat; background-size:100% 100%; }
.section-videos::before { right:0; background-image:url('../images/videos-score.svg'); opacity:.23; }
.section-contact::before { left:0; background-image:url('../images/contact-flourish.svg'); opacity:.19; }
.section.section-arrived.section-videos::before { opacity:.23; }
.section.section-arrived.section-contact::before { opacity:.19; }
.section-videos>.section-inner,.section-contact>.section-inner { position:relative; z-index:1; }
@media(max-width:800px) { .section-videos::before,.section-contact::before { width:90%; opacity:.14; } }
.section-heading { position:relative; display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:24px; padding-bottom:22px; margin-bottom:clamp(38px,5vw,65px); }
.section-heading h2 { margin:0; font:400 clamp(34px,5vw,62px)/1.15 var(--serif); letter-spacing:-.04em; }
.section-heading>span { text-align:right; color:var(--muted); font:12px/1.5 "Noto Serif JP",serif; }
.section-heading::after { content:""; grid-column:1; grid-row:2; width:100%; max-width:150px; height:1px; margin-top:20px; background:linear-gradient(90deg,var(--gold),transparent); transform-origin:left; transition:transform .82s; }
.section-shop .section-heading>span { color:#6c6156; }

/* One two-tone note crosses only the Social Media / Shop boundary. */
.section-note { position:absolute; z-index:4; right:7%; top:-100px; width:160px; height:200px; pointer-events:none; }
.section-keys { position:absolute; z-index:4; left:7%; top:-56px; width:160px; height:112px; pointer-events:none; }
.section-note { opacity:0; clip-path:inset(0 0 100%); }
.section-note.is-visible { animation:note-reveal .75s ease-out both; }
.piano-key { opacity:0; transform-box:fill-box; transform-origin:center; }
.key-white { fill:#191a1d; stroke:#d4bd97; stroke-width:1.5; }
.key-black { fill:#d4bd97; }
.section-keys.is-visible .piano-key { animation:key-sweep .3s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--step)*30ms); }
@keyframes key-sweep { from { opacity:0; transform:translateY(-9px); } to { opacity:1; transform:none; } }
@keyframes note-reveal { from { opacity:0; clip-path:inset(0 0 100%); } to { opacity:1; clip-path:inset(0); } }

.block-link,.block-button,.more-button,.close-expand {
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:25px;
  width:fit-content; min-height:48px; padding:14px 20px; border:1px solid var(--line);
  background:rgba(212,189,151,.05); color:inherit; font:500 11px/1.5 var(--sans); letter-spacing:.12em;
  overflow:hidden; transition:background .18s,color .18s,border-color .18s,box-shadow .18s;
}
.block-link,.block-button { margin-top:32px; min-width:205px; }
.more-button { min-width:175px; margin:30px auto 0; }
.close-expand { min-width:120px; margin:24px auto 0; justify-content:center; background:transparent; color:inherit; opacity:.8; text-transform:uppercase; }
.block-link::before,.block-button::before,.more-button::before { content:""; position:absolute; inset:0; transform:translateX(-120%); background:linear-gradient(110deg,transparent,rgba(255,255,255,.11),transparent); transition:transform .3s; pointer-events:none; }
.block-link:hover::before,.block-button:hover::before,.more-button:hover::before { transform:translateX(120%); }
.block-link:hover,.block-button:hover,.more-button:hover,.close-expand:hover { border-color:var(--gold); background:rgba(212,189,151,.12); opacity:1; }
button:active,.block-link:active { box-shadow:inset 0 0 0 2px rgba(212,189,151,.25); }
.plus-icon { position:relative; display:inline-block; width:14px; height:14px; flex-shrink:0; transition:transform .23s; }
.plus-icon::before,.plus-icon::after { content:""; position:absolute; background:currentColor; inset:6px 0 auto; height:1px; }
.plus-icon::after { transform:rotate(90deg); }
details[open]>summary .plus-icon,.close-expand .plus-icon { transform:rotate(45deg); }
summary { list-style:none; }
summary::-webkit-details-marker { display:none; }
details { min-width:0; }
.disclosure-body { display:block; }
.collection>summary { /* Remains in flow and in the same place throughout expansion. */ scroll-margin-top:100px; }
.collection[data-expanded="true"]>summary { visibility:hidden; pointer-events:none; }
#news-archive[data-expanded="true"]>summary,#social-archive[data-expanded="true"]>summary,#shop-archive[data-expanded="true"]>summary { display:none; margin:0; padding:0; }
#news-archive[data-expanded="true"] #news-extra { margin-top:0; border-top:0; }
#social-archive[data-expanded="true"] #social-extra,#shop-archive[data-expanded="true"] #shop-extra { padding-top:16px; }
.collection .disclosure-body { padding:0; }
.extra-grid { padding-top:18px; }
.collection .close-expand { margin-bottom:0; }
.accordion-list { border-top:1px solid var(--line); }
.news-item { border-bottom:1px solid var(--line); }
.news-item>summary { display:grid; grid-template-columns:105px minmax(0,1fr) 20px; align-items:center; gap:20px; padding:22px 4px; }
.news-date { color:var(--gold); font-size:12px; letter-spacing:.06em; }
.news-title { display:block; font:500 16px/1.8 "Noto Serif JP",serif; }
.news-body { padding:18px 28px 12px 129px; color:#d1cbc3; font:14px/2 "Noto Serif JP",serif; }
.news-body p { margin:0 0 14px; overflow-wrap:anywhere; }
.verbatim-copy { white-space:pre-wrap; }
.news-body a { color:var(--gold); text-decoration:underline; text-underline-offset:4px; }
.news-body .close-expand { margin:20px 0 0; }
#news-extra { margin-top:18px; }

.biography-layout { display:grid; grid-template-columns:minmax(0,var(--photo-width)) minmax(0,1fr); gap:clamp(36px,6vw,90px); align-items:start; }
.bio-image { position:static; }
.bio-intro { font:15px/2.1 "Noto Serif JP",serif; color:#e1dad1; }
.bio-intro p { margin:0 0 1.5em; }
.timeline-details { margin-top:30px; border:0; }
.timeline-details>summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:56px; padding:15px 0; border-top:1px solid var(--line); font-size:13px; }
.timeline-row { display:grid; grid-template-columns:90px minmax(0,1fr); gap:18px; border-top:1px solid var(--line); padding:16px 0; }
.timeline-year { font-size:12px; color:var(--gold); }
.timeline-text { margin:0; font:14px/1.9 "Noto Serif JP",serif; }
.timeline-details .close-expand { margin-bottom:0; }
.social-grid,.shop-grid { display:grid; gap:16px; }
.social-grid { grid-template-columns:minmax(0,1fr); }
.shop-grid { grid-template-columns:minmax(0,1fr); }
.social-card { display:grid; grid-template-columns:minmax(200px,.8fr) minmax(0,2fr); align-items:center; gap:12px 28px; padding:18px 24px; border:1px solid var(--line); background:rgba(255,255,255,.025); transition:background .2s,border-color .2s; min-width:0; }
.social-identity { display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; align-items:center; min-width:0; }
.social-description { min-width:0; }
.social-description p+p { margin-top:4px; }
.social-card:hover,.channel-card:hover { border-color:var(--gold); background:rgba(255,255,255,.07); }
.social-card .round-icon { width:48px; height:48px; }
.social-card h3 { font:500 16px/1.6 "Noto Serif JP",serif; margin:0; }
.social-card .username { color:var(--gold); font-size:11px; overflow-wrap:anywhere; margin:0; }
.social-card p { margin:0; font:13px/1.9 "Noto Serif JP",serif; color:#c7bfc0; }
.social-card .account-link { display:flex; align-items:center; gap:9px; padding-top:6px; font:11px/1.5 var(--sans); color:var(--gold); }
.shop-card { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,2fr) minmax(170px,.7fr); align-items:center; gap:12px 28px; padding:18px 24px; background:rgba(255,255,255,.38); border:1px solid #bcb1a4; border-left:3px solid var(--wine); min-width:0; }
.shop-card h3 { margin:0; font:500 21px/1.6 "Noto Serif JP",serif; }
.shop-label,.ended { color:#66594e; font-size:11px; }
.shop-card .ended { display:inline-flex; align-items:center; gap:8px; width:max-content; padding:6px 10px; border:1px solid rgba(117,53,63,.5); border-left:3px solid var(--wine); background:rgba(117,53,63,.08); color:var(--wine); letter-spacing:.08em; text-transform:uppercase; }
.shop-card p { margin:0; font:14px/1.9 "Noto Serif JP",serif; }
.shop-card .block-link { min-width:0; width:100%; margin-top:0; }
.shop-card.shop-card-ended { filter:grayscale(1); opacity:.56; }
.shop-card.shop-card-ended .block-link { pointer-events:none; cursor:not-allowed; opacity:.52; }
.shop-grid:not(:has(> :nth-child(3))) { grid-template-columns:minmax(0,1fr); }

.video-slider { width:min(970px,100%); margin:auto; }
.video-viewport { overflow:hidden; touch-action:pan-y; }
.video-track { display:flex; align-items:flex-start; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.video-slide { flex:0 0 100%; min-width:0; }
.video-media { display:block; background:#090b0d; }
.video-media img { display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; }
.video-media::after { content:none; }
.video-copy { padding:18px 2px 0; }
.video-copy h3 { font:500 16px/1.7 "Noto Serif JP",serif; margin:0; }
.video-copy h3 a { display:flex; gap:12px; align-items:baseline; }
.video-copy p { font-size:10px; color:var(--gold); letter-spacing:.14em; margin:8px 0 0; }
.video-controls { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:10px; }
.video-dots { display:flex; gap:8px; }
.video-dots button { position:relative; width:28px; height:44px; border:0; padding:0; background:none; }
.video-dots button::after { content:""; position:absolute; top:21px; left:0; right:0; height:2px; background:#76706b; }
.video-dots button.active::after { background:var(--gold); }

.contact-copy,.contact-form,.contact-grid { width:min(760px,100%); margin-inline:auto; }
.contact-copy { color:#d3ccc4; font:15px/2 "Noto Serif JP",serif; }
.contact-form { margin-top:36px; display:grid; gap:20px; }
.contact-form label { display:grid; gap:7px; font-size:12px; }
.contact-form input,.contact-form textarea { width:100%; border:1px solid var(--line); background:rgba(255,255,255,.05); padding:13px; color:var(--paper); border-radius:0; resize:vertical; }
.contact-form .block-button { margin-top:6px; }
.form-status { margin:0; font-size:13px; color:var(--gold); }
.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:44px; }
.contact-card { display:grid; grid-template-columns:44px minmax(0,1fr) 16px; grid-template-rows:auto 1fr; align-items:center; column-gap:14px; row-gap:10px; padding:22px; border:1px solid var(--line); background:rgba(255,255,255,.025); transition:background .2s,border-color .2s; }
.contact-card:hover { border-color:var(--gold); background:rgba(212,189,151,.06); }
.contact-card .round-icon { grid-column:1; grid-row:1; width:44px; height:44px; }
.contact-card h3 { grid-column:2; grid-row:1; font:500 16px/1.5 "Noto Serif JP",serif; margin:0; }
.contact-card .new-tab-icon { grid-column:3; grid-row:1; }
.contact-card p { grid-column:1/-1; grid-row:2; margin:0; font-size:12px; color:var(--muted); overflow-wrap:anywhere; align-self:start; }
.modal { border:1px solid var(--line); background:#171415; color:var(--paper); padding:0; width:min(820px,calc(100% - 32px)); max-height:calc(100dvh - 48px); }
.modal::backdrop { background:rgba(0,0,0,.8); }
.modal-panel { padding:clamp(26px,5vw,50px); }
.modal-close { margin:0 0 25px auto; }
.modal-panel h2 { font:400 clamp(24px,3.5vw,38px)/1.3 var(--serif); margin:15px 0 30px; }
.channel-list { display:grid; gap:12px; }
.channel-card { display:grid; grid-template-columns:56px minmax(0,1fr) 16px; gap:16px; align-items:center; padding:16px; border:1px solid var(--line); }
.channel-card .round-icon { width:56px; height:56px; }
.channel-card strong { display:block; font:500 15px/1.6 "Noto Serif JP",serif; }
.channel-card small { color:var(--muted); font-size:11px; overflow-wrap:anywhere; }

[data-reveal] { /* Visible by default, including when JavaScript or data fails. */ }
.motion-init [data-reveal="rise"],.motion-init [data-reveal="heading"] { opacity:0; }
.motion-init [data-reveal="rise"] { transform:translateY(18px); }
.motion-init [data-reveal="heading"] { transform:translateX(-14px); }
.motion-init [data-reveal="image"] { opacity:0; }
.reveal-ready { opacity:0; transform:translateY(18px); transition:opacity .55s,transform .65s cubic-bezier(.2,.8,.2,1); }
[data-reveal="heading"].reveal-ready { transform:translateX(-14px); }
[data-reveal="image"].reveal-ready { transform:translateY(10px) scale(.985); clip-path:inset(0 0 7% 0); transition:opacity .75s,clip-path .8s,transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal-ready.visible { opacity:1; transform:none; clip-path:inset(0); }
.motion-init [data-reveal="image"].reveal-ready.visible { opacity:1; }
.reveal-ready:not(.visible).section-heading::after { transform:scaleX(0); }
.load-error { padding:20px; color:var(--paper); }
body:not([data-ready]) #profile-text,body:not([data-ready]) #news-list,body:not([data-ready]) #news-extra,body:not([data-ready]) #video-track,body:not([data-ready]) #bio-intro,body:not([data-ready]) #timeline,body:not([data-ready]) #social-list,body:not([data-ready]) #social-extra,body:not([data-ready]) #shop-list,body:not([data-ready]) #shop-extra,body:not([data-ready]) #contact-list { visibility:hidden; }
body:not([data-ready]) .hero-copy { visibility:hidden; }
html.js-enabled body:not([data-ready])>header,html.js-enabled body:not([data-ready])>main,html.js-enabled body:not([data-ready])>footer { visibility:hidden; }

/* Both background photos are optional. Failed loads never hide content. */
.has-bg-1 .section-news { background-image:linear-gradient(130deg,rgba(33,25,27,.94) 0%,rgba(23,19,20,.9) 45%,rgba(8,8,9,.84) 100%),var(--section-photo-1); background-size:cover; background-position:center; }
.has-bg-1 .section-biography { background-image:linear-gradient(125deg,rgba(56,33,38,.94) 0%,rgba(40,27,30,.9) 45%,rgba(12,11,12,.84) 100%),var(--section-photo-1); background-size:cover; background-position:center; }
.has-bg-2 .section-videos { background-image:linear-gradient(135deg,rgba(58,41,40,.94) 0%,rgba(42,32,32,.9) 45%,rgba(12,9,10,.84) 100%),var(--section-photo-2); background-size:cover; background-position:center; }
.has-bg-2 .section-social { background-image:linear-gradient(135deg,rgba(67,41,47,.94) 0%,rgba(48,31,35,.9) 45%,rgba(16,11,13,.84) 100%),var(--section-photo-2); background-size:cover; background-position:center; }

@media(max-width:1050px) {
  :root { --photo-width:360px; }
  .biography-layout,.hero-inner { gap:38px; }
}
@media(max-width:800px) {
  html { scroll-padding-top:82px; }
  :root { --photo-width:420px; }
  .hero { padding:54px 24px 84px; }
  .hero-inner,.biography-layout { grid-template-columns:1fr; gap:45px; }
  .portrait { order:-1; }
  .hero h1 { font-size:clamp(40px,9vw,62px); }
  .section { padding:76px 24px; }
  .section-heading { gap:10px; }
  .section-heading>span { font-size:10px; }
  .bio-image { margin-inline:auto; }
  .section-note { right:5%; width:104px; height:130px; top:-65px; }
  .section-keys { left:5%; width:120px; height:84px; top:-42px; }
  .shop-grid,.shop-grid:not(:has(> :nth-child(3))) { grid-template-columns:1fr; }
  .news-item>summary { grid-template-columns:76px minmax(0,1fr) 16px; gap:10px; }
  .news-date { font-size:10px; }
  .news-title { font-size:14px; }
  .news-body { padding:14px 0; }
  .shop-card { grid-template-columns:1fr; gap:10px; padding:18px; }
  .timeline-row { grid-template-columns:74px minmax(0,1fr); gap:12px; }
}
@media(max-width:520px) {
  .social-card { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); padding:16px; gap:14px; }
  .social-identity { grid-template-columns:1fr; gap:8px; }
  .social-card h3 { font-size:14px; }
  .social-card p { font-size:12px; }
  .section-heading>span { display:none; }
  .social-grid,.contact-grid { grid-template-columns:1fr; }
  .channel-card { gap:12px; padding:12px; grid-template-columns:44px minmax(0,1fr) 16px; }
  .channel-card .round-icon { width:44px; height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .reveal-ready { opacity:1; transform:none; clip-path:none; }
  .motion-init [data-reveal] { opacity:1; transform:none; clip-path:none; }
  .section-note,.piano-key { opacity:1; clip-path:none; transform:none; }
}