/* Layout: white page, left aligned. A dark stage holds the lead story, a pale band holds
   a four-column card row, a hairline list holds dates. Five spectrum colours mark the five sections. */
/* Colour: monochrome with indigo and deep purple, and gradients between them. */
:root{
  --ground:#FFFFFF; --ink:#111114; --mute:#5E6068; --line:#D9DADF;
  --band:#F1F1F4; --frame:#E4E5EB;
  --accent:#24357A;                 /* indigo */
  --on-accent:#FFFFFF;
  --g-a:#3546A8; --g-b:#6B2C9E;     /* button gradient: indigo to purple */
  --stage:#0C0D12; --stage-b:#161C4A; --stage-c:#35185A;
  --on-stage:#FFFFFF; --stage-mute:#BDBFD0;
  --c-museum:#24357A; --c-fair:#5A5FB8; --c-market:#4B1F73; --c-antique:#74767F; --c-goods:#111114;
  --f-mark:"Outfit","Zen Kaku Gothic New",sans-serif;
  --f-text:"Outfit","Zen Kaku Gothic New","Noto Sans Arabic","Noto Sans Thai","Hiragino Sans","PingFang SC","Microsoft JhengHei","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0F1014;--ink:#F2F2F6;--mute:#A6A8B4;--line:#30323B;--band:#17181E;--frame:#22242D;--accent:#9AA5FF;--on-accent:#FFFFFF;
  --stage:#000000;--stage-b:#141A48;--stage-c:#331758;
  --c-museum:#8E9BFF;--c-fair:#B4B8F5;--c-market:#B98AF0;--c-antique:#9A9CA8;--c-goods:#F2F2F6;color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#0F1014;--ink:#F2F2F6;--mute:#A6A8B4;--line:#30323B;--band:#17181E;--frame:#22242D;--accent:#9AA5FF;--on-accent:#FFFFFF;
  --stage:#000000;--stage-b:#141A48;--stage-c:#331758;
  --c-museum:#8E9BFF;--c-fair:#B4B8F5;--c-market:#B98AF0;--c-antique:#9A9CA8;--c-goods:#F2F2F6;color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--f-text);font-size:1rem;line-height:1.7;margin:0}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding-block:18px}
.mark{font-family:var(--f-mark);font-weight:800;font-size:1.5rem;letter-spacing:.01em;text-decoration:none;display:flex;align-items:center;gap:10px;line-height:1}
.mark svg{inline-size:34px;block-size:34px;flex:none}
.mark small{display:block;font-weight:500;font-size:.72rem;letter-spacing:.06em;color:var(--mute);margin-block-start:4px}
.spectrum{block-size:6px;background:linear-gradient(90deg,var(--stage),var(--stage-b) 50%,var(--stage-c))}

/* section chip: a coloured square plus the section name */
.chip{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.chip::before{content:"";inline-size:.7em;block-size:.7em;background:var(--c)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:.84rem;color:var(--mute);font-variant-numeric:tabular-nums}
.meta .chip{color:var(--ink)}

/* picture frame */
.frame{background:var(--frame);overflow:hidden;aspect-ratio:4/3;max-inline-size:100%}
.frame svg{display:block;inline-size:100%;block-size:100%}
.note{font-size:.75rem;color:var(--mute);margin:8px 0 0}

/* stage: the lead story */
.stage{background:linear-gradient(115deg,var(--stage) 0%,var(--stage-b) 58%,var(--stage-c) 100%);color:var(--on-stage)}
.stage .wrap{padding-block:clamp(24px,5vw,56px)}
.lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,56px);align-items:center}
.lead .frame{aspect-ratio:16/10;border-end-end-radius:clamp(48px,10vw,140px)}
.lead .meta{color:var(--stage-mute)}
.lead .meta .chip{color:var(--on-stage);--c:var(--on-stage) !important}
.lead h1{font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.3;font-weight:900;margin:14px 0 14px;text-wrap:balance}
.lead h1 a{text-decoration:none}
.lead h1 a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--on-stage)}
.dek{color:var(--stage-mute);margin:0 0 22px;max-inline-size:32em}
.go{display:inline-block;font-weight:700;text-decoration:none;background:linear-gradient(90deg,var(--g-a),var(--g-b));color:var(--on-accent);border-radius:999px;padding:10px 26px}
.go:hover{filter:brightness(1.12)}
.stage .note{color:var(--stage-mute)}

/* band: card row */
.band{background:var(--band)}
.band .wrap,.plain .wrap{padding-block:clamp(32px,5vw,60px)}
.h2{font-family:var(--f-mark);font-weight:800;font-size:1.7rem;line-height:1.2;margin:0 0 24px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}
.card h3{font-size:1.02rem;line-height:1.5;font-weight:700;margin:12px 0 8px}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.empty{color:var(--mute);margin:0}

/* dates list */
.dates{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--ink)}
.dates li{display:grid;grid-template-columns:minmax(9em,13em) minmax(7em,10em) minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;padding-block:16px;border-block-end:1px solid var(--line)}
.dates time{font-variant-numeric:tabular-nums;font-weight:700}
.dates .ev{font-weight:500}
.dates .where{color:var(--mute);font-size:.9rem}

/* article */
.article{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,56px);align-items:start}
.article h1{font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.3;font-weight:900;margin:14px 0 18px;text-wrap:balance}
.article .frame{border-end-end-radius:clamp(48px,10vw,120px)}
.body p{max-inline-size:36em;margin:0 0 1.15em;font-size:1.05rem}
.src{border-block-start:1px solid var(--ink);margin-block-start:28px;padding-block-start:14px;font-size:.92rem;max-inline-size:36em}
.src b{display:block;margin-block-end:2px}
.src a{color:var(--accent);overflow-wrap:anywhere}
.back{display:inline-block;margin-block-end:22px;font-weight:700;text-underline-offset:4px}
.fb{font-size:.85rem;color:var(--mute);background:var(--band);padding:10px 14px;max-inline-size:36em}

/* artist band */
.artist{background:linear-gradient(245deg,var(--stage) 0%,var(--stage-b) 55%,var(--stage-c) 100%);color:var(--on-stage)}
.artist .wrap{padding-block:clamp(40px,7vw,84px)}
.artist small{display:block;color:var(--stage-mute);font-size:.9rem}
.artist .name{font-family:var(--f-mark);font-weight:800;font-size:clamp(1.9rem,7vw,4.6rem);line-height:1.05;margin:6px 0 6px;overflow-wrap:anywhere}
.artist .kanji{font-size:1.05rem;margin:0 0 18px}
.artist p{max-inline-size:34em;margin:0 0 10px}
.artist .soon{display:inline-block;border:1.5px dashed var(--on-stage);border-radius:999px;padding:8px 20px;font-size:.9rem;margin-block-start:8px}

/* footer */
.foot{padding-block:36px 48px}
.foot h4{font-family:var(--f-mark);font-weight:800;font-size:1.05rem;margin:0 0 12px}
.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 32px;font-size:.92rem;color:var(--mute)}
.rules li{border-block-start:1px solid var(--line);padding-block-start:10px}

@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .lead,.article{grid-template-columns:minmax(0,1fr)}
  .rules{grid-template-columns:minmax(0,1fr)}
  .dates li{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:460px){.cards{grid-template-columns:minmax(0,1fr)}}

/* production additions */
.top{justify-content:space-between}
.nav{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;font-weight:700}
.nav a{text-decoration:none;border-block-end:3px solid transparent;padding:6px 0}
.nav a:hover{border-block-end-color:var(--accent)}
.langs{position:relative}
.langs summary{cursor:pointer;list-style:none;border:1.5px solid var(--ink);border-radius:999px;padding:6px 16px;font-size:.9rem}
.langs summary::-webkit-details-marker{display:none}
.langs ul{position:absolute;inset-inline-end:0;z-index:5;margin:8px 0 0;padding:8px;list-style:none;background:var(--ground);border:1px solid var(--line);min-inline-size:11em;display:grid;gap:2px}
.langs a{display:block;padding:6px 10px;text-decoration:none}
.langs a:hover,.langs a[aria-current]{background:var(--band)}
.chooser{display:grid;grid-template-columns:repeat(auto-fill,minmax(10em,1fr));gap:10px;list-style:none;padding:0;margin:0}
.chooser a{display:block;border:1.5px solid var(--ink);border-radius:999px;padding:10px 18px;text-decoration:none;font-weight:700}
.chooser a:hover{background:var(--ink);color:var(--ground)}
.artist .go{margin-block-start:10px}
.src .chk{display:block;color:var(--mute);margin-block-start:4px}

/* key points, details, Japan-in-a-word */
.key,.info,.terms{max-inline-size:36em;margin-block:0 26px}
.key h2,.info h2,.terms h2{font-family:var(--f-mark);font-weight:800;font-size:1rem;margin:0 0 10px}
.key{background:var(--band);padding:18px 20px;border-end-end-radius:28px}
.key ul{margin:0;padding-inline-start:1.2em;display:grid;gap:6px}
.info,.terms{border-block-start:1px solid var(--ink);padding-block-start:14px;margin-block-start:28px}
.info dl,.terms dl{margin:0;display:grid;gap:10px}
.info dl div{display:grid;grid-template-columns:minmax(6em,9em) minmax(0,1fr);gap:4px 16px}
.info dt{color:var(--mute);font-size:.9rem}
.info dd,.terms dd{margin:0}
.terms{background:linear-gradient(115deg,var(--stage),var(--stage-b) 60%,var(--stage-c));color:var(--on-stage);border:0;padding:20px 22px;border-start-end-radius:28px}
.terms dt{font-weight:900;font-size:1.25rem}
.terms dt i{font-style:normal;font-weight:500;font-size:.9rem;color:var(--stage-mute);margin-inline-start:8px}
.terms dd{color:var(--stage-mute);font-size:.95rem}
.terms dd a{color:var(--on-stage)}
.terms.page{max-inline-size:44em}
.terms.page h1{font-family:var(--f-mark);font-weight:800;font-size:1.7rem;margin:0 0 18px}
.terms.page dl{gap:22px}
.src .sub{margin-block-start:10px}
.src a{display:block}

/* photos (rights-cleared images only) */
.frame.photo img{display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 30%}
.article .frame.photo{aspect-ratio:auto;max-block-size:none}
.article .frame.photo img{block-size:auto}
.note a{color:inherit}

/* quiet footer: a small credit line only */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding-block:28px 36px;border-block-start:1px solid var(--line);margin-block-start:clamp(32px,5vw,60px)}
.foot .by{margin:0;font-size:.8rem;color:var(--mute);letter-spacing:.04em}
.foot .soon{font-size:.8rem;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:5px 14px;cursor:default}