/* Layout concept: poster hero (attached artwork, uncropped) beside a solid navy text panel;
   reading sections below on calm solid grounds. Responsive via container queries so the
   desktop / phone preview toggle behaves exactly like a real viewport. */
:root{
  --navy:#071A33;      /* historical deep navy, page ground */
  --navy-2:#0D2748;    /* raised panel */
  --paper:#EEF2F8;     /* cool reading ground */
  --ink:#0B1A2E;       /* text on paper */
  --mute:#5C6B80;      /* secondary text on paper */
  --mute-d:#A9B6C9;    /* secondary text on navy */
  --blue:#2457F5;
  --red:#E3261C;
  --gold:#F4B81C;
  --line:#C9D3E1;
  --f-display:"Dela Gothic One","Arial Black",Impact,sans-serif;
  --f-body:"Noto Sans TC","Noto Sans SC","Noto Sans JP","Noto Sans KR","Hiragino Sans","Microsoft JhengHei",system-ui,sans-serif;
  --f-latin-display:"Dela Gothic One","Arial Black",Impact,sans-serif;
  --f-cjk-heavy:"Noto Sans TC","Noto Sans SC","Noto Sans JP","Noto Sans KR",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --stick-top:0px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--navy);color:#fff;font-family:var(--f-body);font-size:16px;line-height:1.7}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,h3{text-wrap:balance;margin:0}
.site{container:site/inline-size;background:var(--navy);overflow-x:clip}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.label{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}

/* Pending-asset markers: dashed + gold so reviewers spot them instantly */
.todo{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--ink);background:var(--gold);padding:.2em .6em;border-radius:3px;white-space:nowrap;font-weight:600}
.todo::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--red)}

/* Header: sits inside the banner's reserved top strip (91/1086 of its width), turns solid after scrolling */
.top{position:sticky;top:calc(var(--stick-top) + env(safe-area-inset-top,0px));z-index:20;
  height:var(--hdr-h);margin-bottom:calc(-1 * var(--hdr-h));background:transparent;transition:background .2s}
.top.solid{background:var(--navy);box-shadow:0 2px 0 #000}
/* in-page anchors (#about, #works, #links ...) stop below the sticky header at every width:
   same formula as the header height, measured in the same container (cqi), plus breathing room */
#site section[id],#site [id].band,#site #home{scroll-margin-top:calc(var(--hdr-h) + var(--stick-top,0px) + 14px)}
.top .wrap{display:flex;align-items:center;gap:12px;height:100%;max-width:none}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.04em;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.6);font-size:clamp(.82rem,1.6cqi,1.05rem)}
.logo{height:calc(max(8.38cqi,26px) - 6px);width:auto;max-height:76px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.logo-slot{width:clamp(24px,3.4cqi,40px);aspect-ratio:1;border-radius:50%;border:2px dashed var(--gold);display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.5rem;color:var(--gold);flex:none;background:rgba(7,26,51,.45)}
.nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav a{text-decoration:none;padding:5px 10px;border-radius:3px;font-size:clamp(.8rem,1.5cqi,1rem);white-space:nowrap;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6);font-weight:500}
.nav a:hover{background:rgba(0,0,0,.35)}
.nav a span{font-family:var(--f-mono);font-size:.68em;letter-spacing:.1em;margin-left:.35em;opacity:.75}

/* Hero: the banner full-bleed, uncropped */
.hero{margin:0;background:#000;border-bottom:4px solid #000}
.hero img{width:100%;height:auto}
.intro-band{background:var(--navy);border-bottom:4px solid #000}
.intro-band .wrap{display:grid;gap:24px;padding-block:36px 44px}
.intro{display:flex;flex-direction:column;gap:18px;min-width:0}
.intro .label{color:var(--gold)}
.intro h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,8cqi,4rem);line-height:1.05;letter-spacing:.01em}
.intro h1 .cn{display:block;font-family:var(--f-body);font-weight:700;font-size:.34em;letter-spacing:.3em;color:var(--mute-d);margin-top:.6em}
.side{display:flex;flex-direction:column;gap:18px;min-width:0;align-self:end}
.tagline-slot{border:2px dashed #3A557D;border-radius:4px;padding:14px 16px;color:var(--mute-d);font-size:.92rem;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;font-weight:700;padding:12px 18px;border:2px solid #000;
  border-radius:3px;box-shadow:4px 4px 0 #000;transition:transform .12s,box-shadow .12s;font-size:.95rem}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.btn.am{background:var(--red);color:#fff}
.btn.yt{background:var(--gold);color:var(--ink)}
.btn.ig{background:var(--blue);color:#fff}
.facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none;font-family:var(--f-mono);font-size:.8rem;color:var(--mute-d)}
.facts b{color:#fff;font-weight:600}

/* Reading sections */
.band{background:var(--paper);color:var(--ink)}
.band.alt{background:#fff}
.band .wrap{padding-block:56px}
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.sec-head h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.7rem,6cqi,2.6rem);line-height:1.1}
.sec-head .label{color:var(--mute)}
.sec-head .note{margin-left:auto;font-size:.85rem;color:var(--mute)}

.about{display:grid;gap:28px}
.avatar-slot{aspect-ratio:1;max-width:220px;width:100%;border:2px dashed var(--mute);border-radius:50%;display:grid;place-items:center;
  text-align:center;color:var(--mute);font-size:.85rem;padding:20px}
.avatar{width:112px;height:112px;aspect-ratio:1;border-radius:50%;object-fit:cover;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--red);flex:none}
.cover-img{aspect-ratio:1;width:100%;height:auto;object-fit:cover;border-bottom:2px solid var(--ink)}
.bio{min-width:0;max-width:68ch;display:flex;flex-direction:column;gap:18px}
.bio-tabs{display:flex;flex-wrap:wrap;gap:6px}
.bio-tabs button{font:inherit;font-size:.85rem;font-weight:700;padding:6px 14px;border:0;border-radius:3px;cursor:pointer;
  color:#fff;background:var(--red);opacity:.5;transition:opacity .15s,transform .15s}
.bio-tabs button:nth-child(3n+2){background:var(--gold);color:var(--ink)}
.bio-tabs button:nth-child(3n){background:var(--blue);color:#fff}
.bio-tabs button:hover{opacity:.8}
.bio-tabs button[aria-selected="true"]{opacity:1;transform:translateY(-2px)}
.bio-panel p{margin:0 0 10px;font-size:1.05rem}
.bio-panel .lead{font-family:var(--f-display);font-size:clamp(1.25rem,3.4cqi,1.7rem);line-height:1.3;color:var(--ink);text-wrap:balance}
.bio-panel .trio{font-weight:700;color:var(--red);line-height:1.5}
.bio-src{margin:0;font-family:var(--f-mono);font-size:.72rem;color:var(--mute);letter-spacing:.04em}
.tagline{margin:0;display:flex;flex-direction:column;gap:4px;font-size:clamp(1.1rem,2.6cqi,1.45rem);font-weight:700;line-height:1.4}
.tagline span+span{font-size:.78em;font-weight:500;color:var(--mute-d)}
.bio-slot{border:2px dashed var(--mute);border-radius:4px;padding:24px;min-width:0;max-width:68ch;background:#fff}
.bio-slot h3{font-size:1.15rem;margin:10px 0 8px}
.bio-slot p{margin:0;color:var(--mute)}
.bio-langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.bio-langs span{font-family:var(--f-mono);font-size:.72rem;border:1px solid var(--line);padding:2px 8px;border-radius:2px;color:var(--mute)}

/* Works */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:22px}
.card{display:flex;flex-direction:column;background:#fff;border:2px solid var(--ink);border-radius:3px;text-decoration:none;color:var(--ink);
  transition:transform .12s,box-shadow .12s;min-width:0}
.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
/* H2: one release = one card (cover, title, type/date) that is NOT itself a link; at its foot two native links stacked
   inside the card's coloured panel: "Listen on Apple Music" above "Listen on Amazon Music". No a-in-a, no second cover.
   Each link is a full-width row >= 44px tall; colours stay on the site tokens (white text + gold underline on red/blue,
   ink on gold). */
.card.work{transition:none}
.card.work:hover{transform:none;box-shadow:none}
.card.work .listen{margin-top:auto;padding-top:6px;display:flex;flex-direction:column}
.card.work .listen a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:.85rem;font-weight:700;line-height:1.35;
  overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* colours reuse existing site values only: gold underline + half-gold divider on red/blue, ink on gold */
.card.work.k-red .listen a,.card.work.k-blue .listen a{color:#fff;text-decoration-color:var(--gold)}
.card.work.k-red .listen a+a,.card.work.k-blue .listen a+a{border-top:1px solid rgba(244,184,28,.5)}
.card.work.k-gold .listen a{color:var(--ink);text-decoration-color:var(--ink)}
.card.work.k-gold .listen a+a{border-top:1px solid rgba(7,26,51,.45)}
.card.work .listen a:hover{text-decoration-thickness:3px}
.card.work.k-red .listen a:focus-visible,.card.work.k-blue .listen a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.card.work.k-gold .listen a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.facts .amz-fact{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.facts .amz-fact:hover,.facts .amz-fact:focus-visible{color:var(--gold)}
.cover{aspect-ratio:1;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:14px;color:#fff;
  border-bottom:2px solid var(--ink);overflow:hidden}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.4px) 0 0/9px 9px;pointer-events:none}
.cover .t{font-family:var(--f-display);font-size:1.2rem;line-height:1.15;position:relative;z-index:1;overflow-wrap:anywhere}
.cover .todo{align-self:flex-start;position:relative;z-index:1}
.c-blue{background:var(--blue)}.c-red{background:var(--red)}.c-navy{background:var(--navy-2)}.c-ink{background:#10151d}
.meta{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.meta h3{font-size:1rem;line-height:1.35;overflow-wrap:anywhere}
.meta .row{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:.74rem;color:var(--mute);font-variant-numeric:tabular-nums}
.k-blue .meta{background:var(--blue);color:#fff}
.k-red .meta{background:var(--red);color:#fff}
.k-gold .meta{background:var(--gold);color:var(--ink)}
.k-blue .meta .row,.k-red .meta .row{color:rgba(255,255,255,.82)}
.k-gold .meta .row{color:rgba(11,26,46,.75)}
.k-blue .meta .go,.k-red .meta .go{color:var(--gold)}
.k-gold .meta .go{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.meta .go{margin-top:auto;padding-top:8px;font-size:.85rem;font-weight:700;color:var(--red)}
.videos{margin-top:48px}
.sec-head.sub{margin-bottom:18px}
.sec-head.sub h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,4cqi,1.8rem)}
.vcard{display:grid;grid-template-columns:1fr;border:2px solid var(--ink);border-radius:3px;text-decoration:none;color:#fff;background:var(--red);
  max-width:820px;transition:transform .12s,box-shadow .12s;overflow:hidden}
.vcard:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.thumb{position:relative;display:block;aspect-ratio:16/9;background:#000}
.thumb img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--gold);border:3px solid #000;box-shadow:3px 3px 0 #000}
.play::after{content:"";position:absolute;left:24px;top:17px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--ink)}
.vmeta{display:flex;flex-direction:column;gap:6px;padding:16px 18px;justify-content:center}
.vmeta .label{color:rgba(255,255,255,.8)}
.vmeta strong{font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.15}
.vmeta .go{font-weight:700;color:var(--gold)}
.series{margin-top:36px;border:2px dashed var(--mute);border-radius:4px;padding:18px 20px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;color:var(--mute);font-size:.92rem}
.series b{color:var(--ink)}

/* Platforms */
.links{display:grid;gap:12px}
.plat{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px 18px;border:2px solid var(--ink);border-radius:3px;
  text-decoration:none;min-width:0;transition:transform .12s,box-shadow .12s}
a.plat:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.plat .ico{width:28px;height:28px;color:currentColor}
.p-red{background:var(--red);color:#fff}
.p-blue{background:var(--blue);color:#fff}
.p-gold{background:var(--gold);color:var(--ink)}
.plat .name{font-weight:700}
.plat .handle{font-family:var(--f-mono);font-size:.8rem;color:var(--mute);overflow-wrap:anywhere}
.plat .st{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--mute);text-align:right}
/* small text on coloured cards: must come after .plat .handle/.st and be more specific (WCAG AA >= 4.5:1) */
.plat.p-red .handle,.plat.p-red .st,.plat.p-blue .handle,.plat.p-blue .st{color:#fff}
.plat.p-gold .handle,.plat.p-gold .st{color:var(--ink)}
.plat.pending{border-style:dashed}

footer{background:var(--navy);color:var(--mute-d);border-top:4px solid #000}
footer .wrap{padding-block:28px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.85rem}

/* Wider containers */
@container site (min-width:820px){
  .intro-band .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding-block:56px 64px}
  .about{grid-template-columns:112px minmax(0,1fr);align-items:start;gap:48px}
  .links{grid-template-columns:repeat(3,minmax(0,1fr))}   /* G: 5 platform cards -> 3 + 2 here, one row of 5 from 1100px */
  .plat{grid-template-columns:auto 1fr}
  .plat .st{grid-column:1 / -1;text-align:left}
  .vcard{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .band .wrap{padding-block:80px}
}
@container site (min-width:1100px){
  .links{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@container site (max-width:520px){
  .nav a span{display:none}
  .nav a{padding:2px 7px;font-size:.8rem}
  .top .wrap{gap:6px}
  .brand .nm{display:none}
  .plat{grid-template-columns:auto 1fr}
  .plat .st{grid-column:2;text-align:left}
}

/* ===== v14 additions ===== */
/* Seasonal decoration: lives in the navy band under the banner, never over the banner text */
.intro-band{position:relative;overflow:hidden}
.intro-band .wrap{position:relative;z-index:1}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.fx-toggle{position:absolute;z-index:2;top:12px;right:max(16px,env(safe-area-inset-right,0px));display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:.75rem;font-family:var(--f-mono);letter-spacing:.06em;color:#fff;background:rgba(7,26,51,.7);
  border:1px solid #3A557D;border-radius:999px;padding:5px 11px;cursor:pointer}
.fx-toggle:hover{border-color:var(--gold)}
.fx-toggle b{color:var(--gold);font-weight:600}
.fx-toggle[aria-pressed="false"] b{color:var(--mute-d)}
.fx-dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.fx-toggle[aria-pressed="false"] .fx-dot{background:#3A557D}

/* Second video card */
.videos{display:flex;flex-direction:column;gap:20px}
.videos .sec-head{margin-bottom:0}
.vcard.v-blue{background:var(--blue)}

/* Language switch shared by bio, seasons and footer */
.lang-switch{display:flex;flex-wrap:wrap;gap:5px}
.sec-head .lang-switch{margin-left:auto}
.lang-switch button{font:inherit;font-size:.78rem;font-weight:700;padding:4px 10px;border:0;border-radius:3px;cursor:pointer;
  color:#fff;background:var(--red);opacity:.5;transition:opacity .15s,transform .15s}
.lang-switch button:nth-child(3n+2){background:var(--gold);color:var(--ink)}
.lang-switch button:nth-child(3n){background:var(--blue);color:#fff}
.lang-switch button:hover{opacity:.8}
.lang-switch button[aria-pressed="true"]{opacity:1;transform:translateY(-2px)}

/* All-Japan seasons */
.sec-note{margin:-12px 0 24px;color:var(--mute);font-size:.92rem;max-width:72ch}
.season-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.season{position:relative;display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:3px;overflow:hidden;
  text-decoration:none;transition:transform .12s,box-shadow .12s;min-width:0}
.season:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.season.s-red{background:var(--red);color:#fff}
.season.s-gold{background:var(--gold);color:var(--ink)}
.season.s-blue{background:var(--blue);color:#fff}
.season-art{height:110px;border-bottom:2px solid var(--ink);background-color:var(--navy);position:relative;overflow:hidden}
.art-sakura{background-image:radial-gradient(circle at 20% 35%,#F6B3C8 0 9px,transparent 10px),radial-gradient(circle at 48% 62%,#FFD6E2 0 13px,transparent 14px),
  radial-gradient(circle at 78% 30%,#F48FB1 0 8px,transparent 9px),radial-gradient(circle at 88% 74%,#F6B3C8 0 6px,transparent 7px),radial-gradient(circle at 32% 82%,#FFD6E2 0 5px,transparent 6px)}
.art-koyo{background-image:radial-gradient(circle at 25% 40%,var(--red) 0 12px,transparent 13px),radial-gradient(circle at 55% 66%,var(--gold) 0 15px,transparent 16px),
  radial-gradient(circle at 80% 32%,#C2410C 0 10px,transparent 11px),radial-gradient(circle at 12% 78%,var(--gold) 0 6px,transparent 7px)}
.art-hanabi{background-image:repeating-conic-gradient(from 0deg at 50% 55%,var(--gold) 0 3deg,transparent 3deg 18deg),radial-gradient(circle at 50% 55%,transparent 0 46px,var(--navy) 47px)}
.season-art::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.14) 1.2px,transparent 1.4px) 0 0/9px 9px}
.now-badge{position:absolute;top:10px;left:10px;z-index:1;font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;
  background:#fff;color:var(--ink);border:2px solid var(--ink);padding:2px 8px;border-radius:3px;box-shadow:3px 3px 0 var(--ink)}
.season-body{display:flex;flex-direction:column;gap:6px;padding:16px;flex:1}
.season-body strong{font-family:var(--f-display);font-weight:400;font-size:1.25rem;line-height:1.2;overflow-wrap:anywhere}
.season-body .desc{font-size:.92rem}
.season-body .src{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.03em;opacity:.85;overflow-wrap:anywhere}
.season-body .go{margin-top:auto;padding-top:8px;font-weight:700}
.s-red .go,.s-blue .go{color:var(--gold)}
.s-gold .go{text-decoration:underline;text-underline-offset:3px}

/* ===== Footer: Osaka now + counter ===== */
footer .wrap{display:block;padding-block:48px 28px}
.now-panel{display:grid;gap:22px;border:3px solid #000;background:var(--navy-2);border-radius:4px;padding:22px;
  box-shadow:7px 7px 0 var(--red),-7px -7px 0 var(--blue);margin:8px 8px 28px}
.clock-col,.stats-col{min-width:0}
.clock-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.clock-head h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.15rem,3.4cqi,1.6rem);color:#fff}
.clock-head .label{color:var(--gold)}
.lamp{width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(244,184,28,.25);flex:none;animation:lamp 2s ease-in-out infinite}
.lamp.sm{width:9px;height:9px;animation:none;background:var(--mute-d);box-shadow:none}
.lamp.ok{background:#3BD16F}.lamp.warn{background:var(--gold)}.lamp.bad{background:var(--red)}
@keyframes lamp{50%{box-shadow:0 0 0 7px rgba(244,184,28,0)}}
.clock{display:flex;align-items:baseline;gap:2px;margin:14px 0 4px;font-family:var(--f-display);font-size:clamp(2.6rem,11cqi,4.6rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.clock span{display:inline-block;min-width:1.25em;text-align:center;background:#000;border:2px solid #000;border-radius:4px;padding:.06em .04em;box-shadow:inset 0 -.5em 0 rgba(255,255,255,.04)}
.clock span[data-h]{color:#fff}.clock span[data-m]{color:var(--gold)}.clock span[data-s]{color:#7FA0FF}
.clock i{font-style:normal;color:var(--red);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.date-line{font-family:var(--f-mono);font-size:1.05rem;color:#fff;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.wd.red{color:#FF6B60;font-weight:600}.wd.blue{color:#7FA0FF;font-weight:600}
.day-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.tag{font-size:.82rem;padding:4px 10px;border-radius:3px;border:2px solid #000;line-height:1.4}
.tag b{font-weight:700}
.t-red{background:var(--red);color:#fff}.t-gold{background:var(--gold);color:var(--ink)}.t-blue{background:var(--blue);color:#fff}
.t-line{border:1px dashed var(--mute-d);color:var(--mute-d)}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:4px}
.day{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:3px;background:rgba(255,255,255,.04);color:var(--mute-d);min-width:0}
.day i{font-style:normal;font-family:var(--f-mono);font-size:.68rem}
.day b{font-family:var(--f-display);font-weight:400;font-size:1.05rem;color:#fff}
.day em{font-style:normal;font-size:.6rem;line-height:1.2;text-align:center;overflow-wrap:anywhere;color:#FF8F86}
.day em.q{color:var(--mute-d)}
.day.red i,.day.red b{color:#FF6B60}.day.blue i,.day.blue b{color:#7FA0FF}
.day.today{background:#fff;outline:2px solid #000;box-shadow:3px 3px 0 var(--gold)}
.day.today i,.day.today b{color:var(--ink)}.day.today.red i,.day.today.red b{color:var(--red)}.day.today.blue i,.day.today.blue b{color:var(--blue)}
.data-line{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-family:var(--f-mono);font-size:.72rem;color:var(--mute-d);line-height:1.5}
.red-day .now-panel{box-shadow:7px 7px 0 var(--red),-7px -7px 0 var(--red)}

.stats-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.stat{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:12px;border:2px solid #000;border-radius:3px;min-height:118px;min-width:0}
.stat .no{font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;opacity:.8}
.stat .v{font-family:var(--f-display);font-weight:400;font-size:2.4rem;line-height:1}
.stat .k{font-size:.8rem;font-weight:700;line-height:1.3}
.s-red{background:var(--red);color:#fff}.s-gold{background:var(--gold);color:var(--ink)}.s-blue{background:var(--blue);color:#fff}
.counter{min-height:2.4rem;display:flex;align-items:center}
.counter .pending{font-family:var(--f-mono);font-size:.74rem;font-weight:600;background:#000;color:var(--gold);padding:4px 8px;border-radius:3px;letter-spacing:.04em}
.counter.on{background:#000;border-radius:3px;padding:4px 6px;align-self:flex-start;max-width:100%}
.asahi-counter{height:28px;width:auto;image-rendering:pixelated}
.stat-note{grid-column:1 / -1;margin:2px 0 0;font-size:.74rem;color:var(--mute-d);line-height:1.5}
.foot-bar{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--mute-d)}

@container site (min-width:820px){
  .now-panel{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;padding:28px}
  .stats-col{grid-template-columns:minmax(0,1fr)}
  .stat{min-height:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
  .stat .k{order:2}.stat .v,.stat .counter{order:3}
  .stat .counter{justify-content:flex-end}
}
@container site (max-width:520px){
  .stats-col{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat{padding:10px 8px;min-height:104px}
  .stat .v{font-size:1.9rem}
  .now-panel{padding:16px;margin:6px 6px 24px}
  .fx-toggle{top:8px;font-size:.7rem;padding:4px 9px}
}
/* Motion off: system preference or the page toggle */
@media (prefers-reduced-motion:reduce){.lamp,.clock i{animation:none}}
.fx-off .lamp,.fx-off .clock i{animation:none}

/* Videos: 16:9 MV beside a 9:16 poster. Each keeps its own ratio; nothing is cropped to match. */
.vrow{display:grid;gap:20px;align-items:stretch}
.vcard.v-land{max-width:none;grid-template-columns:1fr}
.vcard.v-land .vmeta{flex:1}
.vposter{display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:3px;overflow:hidden;text-decoration:none;color:#fff;
  background:var(--blue);transition:transform .12s,box-shadow .12s;justify-self:center;width:100%;
  max-width:min(100%,calc(68svh * 9 / 16))}
.vposter:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.poster-frame{position:relative;display:block;aspect-ratio:9/16;background:var(--navy);border-bottom:2px solid var(--ink)}
.poster-frame img{width:100%;height:100%;object-fit:contain}
.poster-frame .play{background:var(--gold)}
.poster-missing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:16px;
  background:radial-gradient(circle at 30% 30%,rgba(36,87,245,.55) 0 18%,transparent 19%),radial-gradient(circle at 72% 22%,rgba(244,184,28,.5) 0 11%,transparent 12%),
  radial-gradient(circle at 60% 48%,rgba(127,160,255,.45) 0 14%,transparent 15%),var(--navy)}
.pm-name{font-family:var(--f-display);font-size:1.5rem;color:#fff;letter-spacing:.02em}
.poster-frame.missing .play{top:auto;bottom:18%}
.vposter .vmeta{background:var(--blue)}
.vposter .vmeta strong{font-size:1.15rem}
@container site (min-width:820px){
  /* desktop: MV takes the wide column, the poster sits beside it at matching height */
  .vrow{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .vposter{max-width:none}
  .vcard.v-land{display:flex;flex-direction:column}
}
.poster-frame:not(.missing) .play{left:auto;top:auto;right:14px;bottom:14px;margin:0}

/* ===== v15 ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav a b{font-weight:500}
html:not([lang^="zh"]):not([lang="ja"]):not([lang="ko"]) .nav a span{display:none}
/* Top language dropdown: native select, sits in the banner's reserved strip */
.lang-select{display:inline-flex;align-items:center;gap:5px;flex:none;color:#fff;background:rgba(7,26,51,.78);border:1.5px solid var(--gold);
  border-radius:999px;padding:0 4px 0 8px;height:clamp(24px,calc(8.38cqi - 12px),40px);cursor:pointer}
.lang-select:focus-within{outline:3px solid var(--gold);outline-offset:2px}
.lang-select .globe{width:clamp(12px,1.5cqi,17px);height:auto;color:var(--gold);flex:none}
.lang-select select{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:#fff;cursor:pointer;
  font:inherit;font-weight:700;font-size:clamp(.74rem,1.25cqi,.95rem);padding:0 16px 0 0;height:100%;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F4B81C' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:9px 6px}
.lang-select select option{color:#0B1A2E;background:#fff}
.top .wrap{gap:10px}
.nav{margin-left:auto}

/* Theme badge: static, always visible (motion off too) */
.theme-badge{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;max-width:100%;background:#000;color:#fff;
  border:2px solid var(--gold);border-radius:4px;padding:6px 14px 6px 6px;box-shadow:4px 4px 0 var(--blue)}
.theme-badge.tk-holiday{border-color:var(--red);box-shadow:4px 4px 0 var(--gold)}
.theme-badge.tk-season{border-color:#3A557D;box-shadow:none}
.tb-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:3px;background:var(--navy-2)}
.tb-icon svg{width:36px;height:36px}
.tb-text{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.tb-kind{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;color:var(--gold)}
.tk-holiday .tb-kind{color:#FF8F86}
.tb-text strong{font-family:var(--f-display);font-weight:400;font-size:1.15rem;color:#fff}
.tb-extra{font-family:var(--f-mono);font-size:.74rem;color:var(--mute-d)}
.tb-also{font-size:.74rem;color:#FF8F86}
/* Garland strip along the bottom of the intro band (static decoration, no clicks) */
.theme-garland{position:absolute;left:0;right:0;bottom:0;height:30px;background-repeat:repeat-x;pointer-events:none;z-index:0;
  border-top:1px dashed rgba(244,184,28,.22)}
.intro-band .wrap{padding-bottom:44px}
html[data-theme-kind="festival"] .intro-band{box-shadow:inset 0 4px 0 var(--gold)}
html[data-theme-kind="holiday"] .intro-band{box-shadow:inset 0 4px 0 var(--red)}
@container site (min-width:820px){ .intro-band .wrap{padding-bottom:64px} }
@container site (max-width:520px){
  .top .wrap{gap:6px}
  .nav{gap:0}
  .nav a{padding:2px 5px;font-size:.76rem}
  .lang-select{padding:0 2px 0 6px;gap:3px}
  .lang-select select{font-size:.72rem;padding-right:13px}
  .tb-text strong{font-size:1.02rem}
}
@container site (max-width:360px){
  .lang-select .globe{display:none}
  .nav a{padding:2px 4px;font-size:.72rem}
}

/* ===== v16: real photos on the seasonal cards ===== */
.season-photo{position:relative;display:block;aspect-ratio:16/9;background:var(--navy);border-bottom:2px solid var(--ink);overflow:hidden}
.season-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.season:hover .season-photo img{transform:scale(1.04)}
.season-photo .credit{position:absolute;right:6px;bottom:6px;max-width:calc(100% - 12px);font-family:var(--f-mono);font-size:.62rem;line-height:1.3;
  color:#fff;background:rgba(0,0,0,.62);padding:2px 6px;border-radius:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-credits{margin:18px 0 0;font-size:.74rem;color:var(--mute);line-height:1.6}
.photo-credits a{color:var(--mute)}
@media (prefers-reduced-motion:reduce){.season:hover .season-photo img{transform:none}}
@container site (min-width:640px){ .season-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ===== v17: synced lists ===== */
.sync-line{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-family:var(--f-mono);font-size:.72rem;color:var(--mute);line-height:1.5;flex-wrap:wrap}
.sync-line .lamp.sm{background:var(--mute)}
.sync-line .lamp.ok{background:#1FA34A}.sync-line .lamp.warn{background:var(--gold)}.sync-line .lamp.bad{background:var(--red)}
.sync-empty{grid-column:1 / -1;color:var(--mute);margin:0}
.latest-head{margin-top:36px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:14px}
.vtile{display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:3px;overflow:hidden;text-decoration:none;color:#fff;background:var(--navy-2);transition:transform .12s,box-shadow .12s;min-width:0}
.vtile:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.vthumb{position:relative;display:block;aspect-ratio:16/9;background:var(--navy);overflow:hidden;border-bottom:2px solid var(--ink)}
.vthumb img{width:100%;height:100%;object-fit:cover}
.vt-fallback{position:absolute;inset:0;display:none;place-items:center;font-size:1.6rem;color:var(--gold)}
.vthumb.noimg .vt-fallback{display:grid}
.vt-meta{display:flex;flex-direction:column;gap:4px;padding:10px 12px;flex:1}
.vt-meta strong{font-size:.86rem;font-weight:700;line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vt-meta span{font-family:var(--f-mono);font-size:.7rem;color:var(--mute-d)}
.vgrid .vtile:nth-child(3n+1){background:var(--red);color:#fff}
.vgrid .vtile:nth-child(3n+2){background:var(--gold);color:var(--ink)}
.vgrid .vtile:nth-child(3n){background:var(--blue);color:#fff}
.vgrid .vtile .vt-meta span{color:inherit;opacity:.8}
@container site (max-width:520px){ .vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .vt-meta{padding:8px} .vt-meta strong{font-size:.78rem} }


/* ===== Type consistency (v18) =====
   Dela Gothic One lacks many Chinese glyphs, which fell back to a thin font (mixed thick/thin).
   Rule: CJK headlines use one Noto Sans family at weight 900; Latin headlines, the name and digits keep Dela.
   Body text picks the Noto family that matches the text's language, so no glyph falls back. */
:where(:lang(zh-Hans)){--f-body:"Noto Sans SC","Noto Sans TC","Noto Sans JP",sans-serif;--f-cjk-heavy:"Noto Sans SC","Noto Sans TC","Noto Sans JP",sans-serif}
:where(:lang(ja)){--f-body:"Noto Sans JP","Noto Sans TC","Noto Sans SC",sans-serif;--f-cjk-heavy:"Noto Sans JP","Noto Sans TC","Noto Sans SC",sans-serif}
:where(:lang(ko)){--f-body:"Noto Sans KR","Noto Sans JP","Noto Sans TC",sans-serif;--f-cjk-heavy:"Noto Sans KR","Noto Sans JP","Noto Sans TC",sans-serif}
:where(:lang(zh),:lang(ja),:lang(ko)){--f-display:var(--f-cjk-heavy)}
:where([lang]){font-family:var(--f-body)}
:where(:lang(zh),:lang(ja),:lang(ko)) :is(.sec-head h2,.bio-panel .lead,.sec-head.sub h3,.vmeta strong,.season-body strong,.clock-head h2,.tb-text strong,.cover .t){font-weight:900;letter-spacing:.01em}
/* always the Latin art face: the name, digits, poster placeholder name */
.intro h1,.clock,.day b,.stat .v,.pm-name{font-family:var(--f-latin-display);font-weight:400}
.intro h1 .cn{font-family:var(--f-body)}

/* ===== First screen (freeaddr candidate B) =====
   Goal: name, role and the main listen/watch buttons on the first screen, poster kept whole
   (people, GEMINI title and the Ludwig signature never cropped), soft transition into the navy.
   Phone/tablet: header stays in the poster's top strip; the poster shows from the top down to just
   below the signature and dissolves into the navy. Tablet/desktop (>= 700px): poster on the right at full
   height, intro and buttons on the left. */
.site{--hdr-h:max(8.38cqi,26px)}
.hero{position:relative;overflow:hidden}
.hero img{display:block;aspect-ratio:1086/1100;height:auto;object-fit:cover;object-position:50% 0}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:13%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,26,51,0) 0%,rgba(7,26,51,.6) 55%,var(--navy) 100%)}
.hero-split .hero{border-bottom:0}
.hero-split .intro-band .wrap{padding-top:20px}
/* phone: buttons come right after the name/tagline; a holiday caption follows them instead of pushing them down */
/* first-screen priority: name -> main buttons; facts and any holiday caption follow, so short screens and
   long languages still show Apple Music / YouTube on the first screen */
.hero-split .intro,.hero-split .side{display:contents}
.hero-split .intro-band .wrap{gap:14px}
.hero-split .intro .label{order:1}.hero-split .intro h1{order:2;margin-bottom:4px}
.hero-split .tagline{order:3}.hero-split .cta{order:4}.hero-split .intro .facts{order:5}.hero-split #theme-badge{order:6}
@container site (max-width:699px){
  .hero-split .cta{order:3}.hero-split .tagline{order:4}   /* phone: buttons straight after the name */
}
@container site (min-width:560px) and (max-width:699px){
  /* F2 (middle widths, short screens - Ludwig 2026-10-25, review item 15): on a 560-699px wide screen the full-width
     poster alone is ~700px tall, so on a short screen (692x721, 699x900) the main buttons fell below the first screen.
     Here the poster keeps its full picture (nothing cropped: people, GEMINI title and signature stay whole) but is only
     as wide as the screen height allows - the width whose poster height leaves ~330px for label, name and buttons -
     and is centred on the navy. The header's content box follows the poster (same width, centred), so logo, menu and
     language menu stay inside the poster's own top strip. On a tall screen the poster is full width as before. */
  .top,main{--poster-w:min(100cqi,calc((100svh - var(--stick-top,0px) - 330px) * 1086 / 1100));--hdr-h:calc(var(--poster-w) * .0838)}
  .top .wrap{width:var(--poster-w);margin:0 auto;padding-left:calc(var(--poster-w) * .022);padding-right:calc(var(--poster-w) * .022)}
  .top .logo{height:calc(var(--hdr-h) - 6px);max-height:64px;width:auto}
  .top .wrap{gap:clamp(4px,.8cqi,10px)}
  .nav{gap:0;margin-left:auto}
  .nav a{padding:2px clamp(3px,.6cqi,9px);line-height:1.25;font-size:clamp(12px,calc(var(--hdr-h) * .34),16px)}
  .nav a span{display:none}   /* the small ABOUT/WORKS/LINKS captions do not fit a strip this narrow in CJK; the words themselves stay */
  .lang-select{height:calc(var(--hdr-h) - 8px);min-height:20px;padding:0 3px 0 6px}
  .lang-select select{font-size:clamp(11px,calc(var(--hdr-h) * .3),15px);padding-right:14px}
  .lang-select .globe{width:clamp(11px,calc(var(--hdr-h) * .3),16px)}
  .hero{background:transparent}
  .hero img{width:var(--poster-w);margin:0 auto}
}
@container site (min-width:700px){
  /* F-NAV-01 / F-NAV-04 (Ludwig, 2026-10-25): logo, navigation and language menu all sit inside the poster's own
     reserved top strip, on desktop exactly as on the phone (reference screenshot 02). The poster is top-aligned in the
     right column, so its strip is directly under the sticky header; the header's content box is confined to the poster's
     span (same width, right-aligned), the header itself stays transparent. No painted extension band: left of the poster
     the page navy shows. Header height = 91/1086 of the poster width. The poster is never narrower than 360px so the
     whole group (logo + 3 links + language menu) fits in the strip at 700-800px with phone-size text, not tiny text. */
  .top,main{--poster-w:min(max(46cqi,360px),calc((100svh - var(--stick-top,0px)) * .75),720px);--hdr-h:calc(var(--poster-w) * .0838)}
  .top{background:transparent}
  .top.solid{background:var(--navy)}
  .top .wrap{width:var(--poster-w);margin-left:auto;margin-right:0;padding-left:calc(var(--poster-w) * .022);padding-right:calc(var(--poster-w) * .022);gap:clamp(4px,.8cqi,10px)}
  .top .logo{height:calc(var(--hdr-h) - 6px);max-height:64px;width:auto}
  .nav{gap:0;margin-left:auto}
  .nav a{padding:2px clamp(3px,.6cqi,9px);line-height:1.25;font-size:clamp(12px,calc(var(--hdr-h) * .34),16px)}
  .nav a span{font-size:.66em;margin-left:.25em}
  .lang-select{height:calc(var(--hdr-h) - 8px);min-height:20px;padding:0 3px 0 6px}
  /* below 900px the poster (and its strip) is only 360px wide: the small ABOUT/WORKS/LINKS captions would collide in CJK */
  @container site (max-width:899px){.nav a span{display:none}}
  .lang-select select{font-size:clamp(11px,calc(var(--hdr-h) * .3),15px);padding-right:14px}
  .lang-select .globe{width:clamp(11px,calc(var(--hdr-h) * .3),16px)}
  .hero-split{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;border-bottom:4px solid #000;
    min-height:calc(100svh - var(--stick-top,0px));padding-top:0;
    background:radial-gradient(120% 90% at 100% 0%,rgba(36,87,245,.22),transparent 55%),radial-gradient(90% 80% at 60% 100%,rgba(227,38,28,.16),transparent 60%),var(--navy)}
  .hero-split .hero{grid-column:2;grid-row:1;align-self:start;background:transparent;border:0;margin:0}
  /* left edge dissolves into the navy below the strip only: the strip itself stays whole, so the logo sits on the real strip */
  .hero-split .hero img{aspect-ratio:auto;object-fit:contain;width:var(--poster-w);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%),linear-gradient(#000,#000);
    -webkit-mask-size:100% 100%,100% var(--hdr-h);-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-over;
    mask-image:linear-gradient(to right,transparent 0,#000 9%),linear-gradient(#000,#000);
    mask-size:100% 100%,100% var(--hdr-h);mask-repeat:no-repeat;mask-composite:add}
  .hero-split .hero::after{height:9%;background:linear-gradient(to bottom,rgba(7,26,51,0),var(--navy))}
  .hero-split .intro-band{grid-column:1;grid-row:1;align-self:center;background:transparent;border:0;overflow:visible;padding-top:var(--hdr-h)}
  .hero-split .intro-band .wrap{grid-template-columns:minmax(0,1fr);gap:18px;max-width:640px;margin-left:auto;margin-right:0;
    padding:28px clamp(24px,4cqi,56px) 40px}
  /* F1 (F-DESIGN-02): desktop - the control dock is the first row of the intro column, above the "official website" label */
  .hero-split .intro .lc-dock-slot{order:0;margin-bottom:-4px}
}

/* ===== Small-text contrast (freeaddr candidate B): every small text >= 4.5:1, brand colours kept =====
   White on the red/blue cards; gold stays as the underline accent of the action link. */
.k-blue .meta .row,.k-red .meta .row,.vmeta .label{color:#fff}
.k-blue .meta .go,.k-red .meta .go,.s-red .go,.s-blue .go,.vmeta .go{color:#fff;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.bio-panel .trio{color:#B3170F}

/* ===== Restrained scroll transition (freeaddr candidate B) =====
   CSS scroll-driven animations only: no JS, no scroll listeners, no wheel capture, no extra screens.
   Identity and buttons are fully visible before any scrolling; nothing waits for an animation.
   Desktop/tablet: while the first screen scrolls away, the poster rises ~3% and settles to 98%, and a navy veil
   (max 30%) lets it sink into the background. Section titles below rise 16px into place as they enter.
   Phone: poster untouched; only the section-title entrance. Off with the motion switch, with
   prefers-reduced-motion, and in browsers without scroll timelines (content then simply static). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @container site (min-width:700px) {
      :root:not(.fx-off) .hero-split .hero img{animation:lcPosterSettle linear both;animation-timeline:scroll(root);animation-range:0 100vh;transform-origin:50% 100%}
      .hero-split .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--navy);opacity:0}
      :root:not(.fx-off) .hero-split .hero::before{animation:lcPosterVeil linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    }
    :root:not(.fx-off) .band .sec-head{animation:lcRiseIn linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes lcPosterSettle{to{transform:translate3d(0,-3%,0) scale(.98)}}
@keyframes lcPosterVeil{to{opacity:.3}}
@keyframes lcRiseIn{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
/* inactive language tabs were at 50% opacity (unreadable small text): keep full colour, mark the active one instead */
.bio-tabs button,.lang-switch button{opacity:1}
.bio-tabs button[aria-selected="true"],.lang-switch button[aria-pressed="true"]{box-shadow:3px 3px 0 #000;outline:2px solid #000;outline-offset:0}
.vgrid .vtile .vt-meta span,.season-body .src,.stat .no{opacity:1}
/* short phones (e.g. 375x667): a little tighter so the buttons are not at the very edge of the first screen */
@media (max-height:700px){
  @container site (max-width:699px){
    .hero-split .intro-band .wrap{padding-top:12px;gap:12px}
    .hero-split .intro h1{font-size:clamp(2rem,9cqi,2.6rem)}
  }
}

/* ===== Whole site on the deep navy (freeaddr candidate B; confirmed by Ludwig 2026-10-25) =====
   Every large block uses #071A33 like the "Osaka time" footer; raised panels #0D2748.
   Red / gold / blue cards, album covers and the approved poster stay as they are.
   Text that was written for the light ground is switched to light colours. */
.band,.band.alt{background:var(--navy);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.band .sec-head .label,.sec-head .label{color:var(--mute-d)}
.bio-panel .lead,.series b{color:#fff}
.bio-panel .trio{color:#FF7468}
.bio-slot{background:var(--navy-2);border-color:#3A557D;color:#fff}
.card,.vtile{background:var(--navy-2)}
.avatar{border-color:#000}
.band{--mute:var(--mute-d)}   /* secondary text in the reading sections */

/* ===== Control dock (freeaddr candidate B) =====
   Motion switch + festival sound switch. In the intro's top-right corner while the first screen is visible;
   floating at the window's right edge (above the bottom-pinned decorations) after the intro scrolls away. */
.lc-dock{position:absolute;z-index:3;top:12px;right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:row-reverse;gap:8px;align-items:center}
/* F1 (F-DESIGN-02, 2026-10-25): in the intro the dock is no longer laid over the text. It is a row in the intro's own
   flow (a grid row like the label, name and buttons), right-aligned and wrapping when the language is long, so it reserves
   its own space and can never cover the label, name or buttons at any width or in any language.
   Phone (<700): the row comes right after the main buttons, so the first-screen order name -> buttons is unchanged.
   Desktop (>=700): the row is the first one, above the "official website" label.
   F2 (F1-ANCHOR-05): the row is a slot (.lc-dock-slot) that stays in the flow at the dock's height when the dock floats
   or moves to the footer bar, so the intro keeps its height and anchors (#about/#works/#links) never jump. */
.intro .lc-dock-slot{order:4;min-height:32px}   /* F2: keeps the dock's height while the dock floats, so nothing below moves */
.lc-dock-slot>.lc-dock{position:static;z-index:auto;flex-wrap:wrap;justify-content:flex-start}
.lc-dock .fx-toggle{position:static}
.lc-dock .seasonal-sound-toggle{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important}
.lc-dock.is-floating{position:fixed;top:auto;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(196px + env(safe-area-inset-bottom,0px));
  z-index:40;flex-direction:column-reverse;align-items:flex-end}
.lc-dock.is-floating>*{min-height:38px;border:1.5px solid var(--gold)!important;background:var(--navy)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.45)}
/* bottom-pinned festival decorations step aside while they would cover the key first-screen content */
.lc-decor-yield :is(.seasonal-monster-parade,.seasonal-winter-trees,.seasonal-gift-row,.seasonal-christmas-snowbank,.seasonal-kadomatsu,
  .seasonal-kadomatsu-right,.seasonal-newyear-lanterns,.seasonal-newyear-gifts,.seasonal-thanksgiving-footer-decor,.seasonal-obon-procession,
  .seasonal-obon-riverlight,.seasonal-pumpkin-corners img,.seasonal-settled-leaves){opacity:0!important;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
:is(.seasonal-monster-parade,.seasonal-winter-trees,.seasonal-gift-row,.seasonal-christmas-snowbank,.seasonal-kadomatsu,.seasonal-kadomatsu-right,
  .seasonal-newyear-lanterns,.seasonal-newyear-gifts,.seasonal-thanksgiving-footer-decor,.seasonal-obon-procession,.seasonal-obon-riverlight,.seasonal-pumpkin-corners img,.seasonal-settled-leaves){transition:opacity .35s ease}
/* hover on language tabs: no fading (kept text contrast); underline instead */
.bio-tabs button:hover,.lang-switch button:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
/* visitor check: larger touch areas without changing the look (header strip on phones is only ~30px high) */
.top .nav a,.brand{position:relative}
.top .nav a::after,.brand::after{content:"";position:absolute;inset:-8px -2px}
.lc-dock>*{min-height:40px}
.bio-tabs button,.lang-switch button{min-height:36px}
.lc-dock .seasonal-sound-toggle{min-height:40px!important}

/* ===== Counter cards without the decorative 01/02/03 (Ludwig, 2026-10-25) =====
   One row per card on every width: label on the left, the number (or the official counter image) on the right,
   so long labels in any language never squeeze into 4 lines and the numbers line up. */
.stats-col{grid-template-columns:minmax(0,1fr)!important;gap:10px}
.stat{min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px!important}
.stat .k{order:1;font-size:.9rem;line-height:1.35}
.stat .v,.stat .counter{order:2;justify-self:end}
.stat .v{font-size:2rem!important}
.stat .counter{justify-content:flex-end;min-height:0}
/* platform cards: the internal "verified" mark is gone; name/handle + icon only */
.plat{grid-template-columns:auto 1fr}
/* control dock: compact in the intro, full 40px touch size when floating */
.lc-dock:not(.is-floating)>*{min-height:32px}
.lc-dock:not(.is-floating) .seasonal-sound-toggle{min-height:32px!important}
.lc-dock.is-floating{bottom:calc(var(--dock-bottom,196px) + env(safe-area-inset-bottom,0px))}
/* F5 (TRIAL-F4-DOCK-ES-01): floating dock fallback - icons only when the full dock has no free spot. Labels stay for assistive tech. */
.lc-dock.is-floating.is-compact>*{width:44px!important;min-width:44px!important;min-height:44px!important;padding-left:0!important;padding-right:0!important;justify-content:center!important;gap:0!important}
.lc-dock.is-floating.is-compact .fx-toggle>span:not(.fx-dot),.lc-dock.is-floating.is-compact .fx-toggle b,.lc-dock.is-floating.is-compact .seasonal-sound-toggle b{display:none}
.lc-dock.is-floating.is-compact .fx-dot{width:14px;height:14px}
/* F6: bottom bar - the dock's own strip along the bottom edge (always on phone widths while floating; on wider screens only
   when no free spot exists even for the compact dock). Full-size buttons, opaque navy, nothing laid over mid-screen text. */
.lc-dock.is-floating.is-bar{left:0;right:0;top:auto;bottom:0;flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:8px;
  padding:3px max(12px,env(safe-area-inset-right,0px)) calc(3px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
  min-height:44px;background:var(--navy);border-top:1px solid rgba(227,179,61,.5);box-shadow:0 -4px 14px rgba(0,0,0,.35)}
.lc-dock.is-floating.is-bar>*{box-shadow:none!important}
.tag .ja-name{font-weight:500;opacity:1}
.lc-dock.in-footer{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}

/* H1: preserve the caption's document-flow placement even if the seasonal adapter stylesheet fails.
   ID specificity defeats the generic fixed-position caption rule; normal adapter appearance is unchanged. */
#theme-badge > .seasonal-holiday-note.lc-in-flow{position:relative;inset:auto}

/* H3 (H2-CLOCK-IPAD-01, iPad 820/834): the clock was sized from the whole-site width (11cqi) while at >=820 it sits in the
   narrower left column, and its digit tiles were allowed to shrink below their two digits, so the digits ran into the
   colons. Now the clock is sized from its own column (.clock-fit is the container), the tiles never shrink below their
   digits, and each colon keeps its own gap. Same fonts, colours and look; no clipping. */
.clock-fit{container-type:inline-size;min-width:0}
.clock-fit>.clock{font-size:clamp(24px,13.4cqi,4.6rem);gap:.05em;max-width:100%}
.clock-fit>.clock>span{flex:0 0 auto}
.clock-fit>.clock>i{flex:0 0 auto}