/* ---------- FONTS (mockup: local files; site: licensed files or stand-ins) ---------- */
@font-face{font-family:"Akira";src:url("fonts/Akira Expanded Demo.otf")}
@font-face{font-family:"Cool";src:url("fonts/Coolvetica Rg.otf")}
@font-face{font-family:"CoolCond";src:url("fonts/Coolvetica Rg Cond.otf")}
@font-face{font-family:"CoolHeavy";src:url("fonts/Coolvetica Hv Comp.otf")}
@font-face{font-family:"LED";src:url("fonts/LEDLIGHT.otf");unicode-range:U+0000-002F,U+003A-10FFFF}
@font-face{font-family:"LED";src:url("fonts/Coolvetica Hv Comp.otf");unicode-range:U+0030-0039;size-adjust:112%}
@font-face{font-family:"Screen";src:url("fonts/Blue Screen Personal Use.ttf");unicode-range:U+0000-002F,U+003A-10FFFF}
/* the demo builds of LEDLIGHT and Blue Screen replace every digit with a watermark glyph, so digits in those two faces come from Coolvetica Heavy Comp (the licensed full fonts would restore their own) */
@font-face{font-family:"Screen";src:url("fonts/Coolvetica Hv Comp.otf");unicode-range:U+0030-0039;size-adjust:112%}

/* ---------- CJK FACES (subset to the characters the site uses; a face only downloads when a page needs it) ----------
   Japanese: April Gothic One (heavy italic, headings) · Kaitou Yokoku Gothic (cut-out letters, stamps and buttons) · Zen Kaku Gothic New (text)
   Korean:   Paperlogy (text + headings)      Chinese: Baotu Xiaobai (headings, stamps) · Noto Sans SC (text)      LED / screen: Mona12 (pixel) */
@font-face{font-family:"April";src:url("fonts/april-ja.woff2") format("woff2");unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+FF00-FFEF}
@font-face{font-family:"Kaitou";src:url("fonts/kaitou-ja.woff2") format("woff2");unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+FF00-FFEF}
@font-face{font-family:"ZenKaku";src:url("fonts/zenkaku-ja-regular.woff2") format("woff2");font-weight:100 500;unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+FF00-FFEF}
@font-face{font-family:"ZenKaku";src:url("fonts/zenkaku-ja-bold.woff2") format("woff2");font-weight:600 900;unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+FF00-FFEF}
@font-face{font-family:"Paperlogy";src:url("fonts/paperlogy-ko-regular.woff2") format("woff2");font-weight:100 500;unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+AC00-D7AF,U+FF00-FFEF}
@font-face{font-family:"Paperlogy";src:url("fonts/paperlogy-ko-bold.woff2") format("woff2");font-weight:600 900;unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+AC00-D7AF,U+FF00-FFEF}
@font-face{font-family:"PaperlogyBlack";src:url("fonts/paperlogy-ko-black.woff2") format("woff2");unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+AC00-D7AF,U+FF00-FFEF}
@font-face{font-family:"Baotu";src:url("fonts/baotu-zh.woff2") format("woff2");unicode-range:U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+FF00-FFEF}
@font-face{font-family:"NotoSC";src:url("fonts/notosc-zh-regular.woff2") format("woff2");font-weight:100 500;unicode-range:U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+FF00-FFEF}
@font-face{font-family:"NotoSC";src:url("fonts/notosc-zh-bold.woff2") format("woff2");font-weight:600 900;unicode-range:U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+FF00-FFEF}
@font-face{font-family:"MonaJP";src:url("fonts/mona-ja.woff2") format("woff2");unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+FF00-FFEF}
@font-face{font-family:"MonaKR";src:url("fonts/mona-ko.woff2") format("woff2");unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+AC00-D7AF,U+FF00-FFEF}
@font-face{font-family:"MonaSC";src:url("fonts/mona-zh.woff2") format("woff2");unicode-range:U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+FF00-FFEF}

/* ---------- PALETTE ---------- */
:root{
  --pewter:#96AEBA; --ruddy:#BD692B; --yinmn:#2D548A; --olive:#5D6739; --topaz:#87260E;
  --black:#161310; --white:#F3EEE5;
  /* CJK faces per role; html[lang] below reorders them so each language draws Han characters with its own faces */
  --cjk-d:"April","PaperlogyBlack","Baotu";            /* headings (with Akira) */
  --cjk-n:"Kaitou","PaperlogyBlack","Baotu";           /* stamps, buttons, counters (with Coolvetica Heavy) */
  --cjk-t:"ZenKaku","Paperlogy","NotoSC";              /* labels and text (with Coolvetica) */
  --cjk-led:"MonaJP","MonaKR","MonaSC";                /* LED ticker and screen text (pixel) */
  --f-display:"Akira",var(--cjk-d),"Archivo Black","Arial Black",sans-serif;
  --f-ui:"Cool",var(--cjk-t),"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-label:"CoolCond",var(--cjk-t),"Archivo Narrow","Arial Narrow",sans-serif;
  --f-num:"CoolHeavy",var(--cjk-n),"Archivo Narrow","Arial Narrow",sans-serif;
  --f-led:"LED",var(--cjk-led),"Doto","Courier New",monospace;
  --f-screen:"Screen",var(--cjk-led),"VT323","Courier New",monospace;
  --f-jp:"ZenKaku","Paperlogy","NotoSC","Noto Sans CJK JP","Noto Sans JP","Hiragino Sans","Yu Gothic","Malgun Gothic",sans-serif;   /* the artists' own Japanese / Korean lines */
  /* NIGHT is the house default; DAY follows the viewer or the switch */
  --paper:var(--black); --ink:var(--pewter); --ink-strong:var(--white); --ink-soft:rgba(150,174,186,.55);
  --accent:var(--ruddy); --accent-2:var(--topaz); --panel:var(--yinmn); --panel-2:var(--olive);
  --display:var(--pewter); --ghost-a:var(--ruddy); --ghost-b:var(--yinmn); --blend:screen;
  --thumb-blend:screen; --line:rgba(150,174,186,.35); color-scheme:dark;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --paper:var(--white); --ink:var(--yinmn); --ink-strong:var(--black); --ink-soft:rgba(45,84,138,.55);
  --accent:var(--topaz); --accent-2:var(--ruddy); --panel:var(--pewter); --panel-2:var(--olive);
  --display:var(--yinmn); --ghost-a:var(--ruddy); --ghost-b:var(--pewter); --blend:multiply;
  --thumb-blend:multiply; --line:rgba(45,84,138,.35); color-scheme:light; } }
:root[data-theme="light"]{ --paper:var(--white); --ink:var(--yinmn); --ink-strong:var(--black); --ink-soft:rgba(45,84,138,.55);
  --accent:var(--topaz); --accent-2:var(--ruddy); --panel:var(--pewter); --panel-2:var(--olive);
  --display:var(--yinmn); --ghost-a:var(--ruddy); --ghost-b:var(--pewter); --blend:multiply;
  --thumb-blend:multiply; --line:rgba(45,84,138,.35); color-scheme:light; }
/* the page language puts its own faces first: a Japanese page draws kanji with the Japanese faces, a Chinese page with the Chinese one */
html[lang="ja"]{--cjk-d:"April","ZenKaku","PaperlogyBlack","Baotu";--cjk-n:"Kaitou","April","PaperlogyBlack";--cjk-t:"ZenKaku","Paperlogy","NotoSC";--cjk-led:"MonaJP","MonaKR","MonaSC"}
html[lang="ko"]{--cjk-d:"PaperlogyBlack","April","Baotu";--cjk-n:"PaperlogyBlack","Kaitou","Baotu";--cjk-t:"Paperlogy","ZenKaku","NotoSC";--cjk-led:"MonaKR","MonaJP","MonaSC"}
html[lang="zh"]{--cjk-d:"Baotu","NotoSC","PaperlogyBlack","April";--cjk-n:"Baotu","NotoSC","Kaitou";--cjk-t:"NotoSC","ZenKaku","Paperlogy";--cjk-led:"MonaSC","MonaJP","MonaKR","NotoSC"}
html[lang="ja"] body,html[lang="ko"] body,html[lang="zh"] body{letter-spacing:0}
/* the site's own NIGHT / DAY switch wins over everything above */
body[data-mode="dark"]{ --paper:var(--black); --ink:var(--pewter); --ink-strong:var(--white); --ink-soft:rgba(150,174,186,.55);
  --accent:var(--ruddy); --accent-2:var(--topaz); --panel:var(--yinmn); --panel-2:var(--olive);
  --display:var(--pewter); --ghost-a:var(--ruddy); --ghost-b:var(--yinmn); --blend:screen;
  --thumb-blend:screen; --line:rgba(150,174,186,.35); color-scheme:dark; }
body[data-mode="light"]{ --paper:var(--white); --ink:var(--yinmn); --ink-strong:var(--black); --ink-soft:rgba(45,84,138,.55);
  --accent:var(--topaz); --accent-2:var(--ruddy); --panel:var(--pewter); --panel-2:var(--olive);
  --display:var(--yinmn); --ghost-a:var(--ruddy); --ghost-b:var(--pewter); --blend:multiply;
  --thumb-blend:multiply; --line:rgba(45,84,138,.35); color-scheme:light; }

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--f-ui);font-size:14px;line-height:1.25;-webkit-font-smoothing:antialiased;position:relative;min-height:100vh;overflow-x:hidden}
/* paper grain */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>")}
/* halftone vignette corners */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:49;opacity:.35;
  background-image:radial-gradient(circle,var(--ink) 1.1px,transparent 1.4px);background-size:7px 7px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,transparent 55%,#000 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,transparent 55%,#000 100%)}

.page{max-width:1380px;margin:0 auto;padding-block:22px 34px;padding-left:max(30px,env(safe-area-inset-left,0px));padding-right:max(30px,env(safe-area-inset-right,0px));position:relative}
@media (max-width:700px){.page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
.u{text-transform:uppercase}
.label{font-family:var(--f-label);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.num{font-family:var(--f-num);letter-spacing:.02em}
.box{border:2px solid var(--ink)}
.bracket{position:relative;padding:10px 12px}
.bracket::before,.bracket::after{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--ink)}
.bracket::before{left:0;top:0;border-right:0;border-bottom:0}
.bracket::after{right:0;bottom:0;border-left:0;border-top:0}

/* ---------- MASTHEAD ---------- */
.mast{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.mast .nav{display:flex;align-items:center;gap:10px}
.mast .nav a{font-family:var(--f-label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:2px solid var(--ink);padding:6px 10px 5px}
.mast .nav a:hover,.mast .nav a.here{background:var(--ink);color:var(--paper)}
.mast a.home{display:block}
.mast .logo{height:30px;display:block}
.mast .strip{font-family:var(--f-label);font-size:13px;letter-spacing:.08em;text-transform:uppercase;display:flex;gap:26px;white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 46px),transparent)}
.mast .strip b{color:var(--ink-strong);font-weight:normal}
.toggle{font-family:var(--f-label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--ink);padding:5px 9px;display:flex;gap:10px;cursor:pointer;background:none;color:var(--ink)}
.toggle span{padding:1px 6px}
.toggle .on{background:var(--ink);color:var(--paper)}
/* language switch: EN / 日本語 / 한국어 / 中文, next to NIGHT / DAY */
.langsel{display:flex;border:2px solid var(--ink);font-family:var(--f-label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.langsel button{font:inherit;letter-spacing:inherit;background:none;border:0;color:inherit;padding:6px 8px 5px;cursor:pointer;line-height:1.1;white-space:nowrap}
.langsel button.on{background:var(--ink);color:var(--paper)}
.langsel button:hover{color:var(--accent)}.langsel button.on:hover{color:var(--paper)}
.langs{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.langs .flag{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.langs .flag svg{display:block;width:38px;height:26px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .15s steps(3),box-shadow .15s steps(3);background:var(--paper)}
.langs .flag:hover svg{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.langs .flag.on{color:var(--accent)}
.langs .flag.on svg{border-color:var(--accent);box-shadow:3px 3px 0 var(--accent)}
.langs .flag span{white-space:nowrap}
/* an artist's native paragraph shown in English (the page is already in that language) */
.bio.jp.as-en{font-family:var(--f-ui);font-weight:normal}

/* ---------- LED TICKER ---------- */
.ticker{margin:10px 0 16px;background:var(--black);border:2px solid var(--ink);height:38px;overflow:hidden;position:relative}
.ticker .run{display:flex;gap:0;white-space:nowrap;font-family:var(--f-led);font-size:20px;line-height:38px;color:var(--pewter);text-shadow:0 0 6px rgba(150,174,186,.8),0 0 14px rgba(150,174,186,.35);animation:run 28s linear infinite;will-change:transform}
.ticker .run span{padding:0 22px}.ticker .run .sep{padding:0;width:12px;height:12px;background:var(--pewter);transform:rotate(45deg);align-self:center;margin:0 10px;box-shadow:0 0 8px rgba(150,174,186,.8)}
.ticker::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 1px,transparent 1px 3px);pointer-events:none}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- FOOTER LEGAL ROW ---------- */
.legalrow{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:10px;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.legalrow a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.legalrow a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- STAMPS ---------- */
.stamp{display:inline-block;border:3px solid var(--accent);color:var(--accent);font-family:var(--f-num);font-size:18px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px 3px;transform:rotate(-6deg);filter:url(#rough);opacity:.9;line-height:1.05;white-space:nowrap}
.stamp.round{border-radius:50%;padding:14px 12px;text-align:center;font-size:14px}
.stamp-wrap{position:absolute;z-index:5}

/* ---------- SELECT STRIP ---------- */
.select{margin-top:16px;border-top:2px solid var(--ink);padding-top:14px;position:relative}
.select .plus{font-family:var(--f-display);font-size:30px;color:var(--accent);line-height:1;text-align:center;margin:-32px 0 2px}
.select .row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.select .logo{height:46px}
.thumbs{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,.9vw,12px);padding:4px 0;width:100%}
.thumb{display:block;min-width:0;text-align:center;font-family:var(--f-label);font-size:clamp(8px,.85vw,11px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-weight:normal}
.thumb .ph{display:block;width:100%;aspect-ratio:92/112;border:2px solid var(--ink);background:var(--panel);overflow:hidden;margin-bottom:6px;position:relative}
.thumb .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);mix-blend-mode:var(--thumb-blend);opacity:.9;display:block}
.thumb .ph::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.3) .7px,transparent .9px);background-size:4px 4px;mix-blend-mode:multiply}
.thumb .nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb:hover .ph{border-color:var(--accent)}
.thumb.sel{color:var(--accent)}
.thumb.sel .ph{border-color:var(--accent);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--accent);background:var(--accent)}
.thumb.sel .ph img{filter:none;mix-blend-mode:normal;opacity:1}
.choose{text-align:center;font-family:var(--f-display);font-size:clamp(20px,3vw,34px);letter-spacing:.02em;color:var(--ink-strong);margin:18px 0 0;text-transform:uppercase}
.choose span{color:var(--accent)}
.colophon{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:flex-end;margin-top:14px;font-family:var(--f-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.barcode{display:flex;align-items:flex-end;gap:0;height:34px}
.barcode i{display:block;background:var(--ink-strong);height:100%}
.barcode i.s{height:70%}

/* ---------- LINKS ---------- */
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- RESPONSIVE (kept last so it wins) ---------- */
@media (max-width:900px){.mast .strip{display:none}.mast .nav{flex-wrap:wrap;justify-content:flex-end;row-gap:8px}}
.mast .nav a,.toggle span,.langsel button{white-space:nowrap}
@media (max-width:520px){.mast{grid-template-columns:1fr auto}.mast .nav{grid-column:1 / -1;justify-content:flex-start;flex-wrap:wrap}.langsel button{padding:6px 6px 5px}}
@media (max-width:900px){.select .row{grid-template-columns:1fr}.select .row>.logo{display:none}}
@media (max-width:560px){.thumbs{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.thumb{font-size:9px}}

/* ---------- PAGE TRANSITIONS: seven-band shutter ---------- */
#wipe,#veil{position:fixed;inset:0;z-index:200;display:flex;pointer-events:none;overflow:hidden}
#veil{background:var(--paper)}   /* covers the page in the mode's paper until its bands are built */
/* the bands overlap by a pixel on each side (and carry a same-colour shadow), so no seam shows between them at fractional display scales */
#wipe i,#veil i,#modewipe i{flex:1;display:block;margin:0 -1px;will-change:transform;backface-visibility:hidden}
#wipe i{transform:scaleY(0);transform-origin:bottom}
#wipe.go i{animation:bandIn .34s cubic-bezier(.7,0,.2,1) forwards;animation-delay:calc(var(--i) * 32ms)}
#veil i{transform:scaleY(1);transform-origin:top;animation:bandOut .42s cubic-bezier(.7,0,.2,1) forwards;animation-delay:calc(var(--i) * 40ms + 160ms)}
@keyframes bandIn{to{transform:scaleY(1)}}
@keyframes bandOut{to{transform:scaleY(0)}}
/* NIGHT <-> DAY: the same bands rise in the new paper, then lift once the page has changed under them */
#modewipe{position:fixed;inset:0;z-index:210;display:flex;pointer-events:none;overflow:hidden}
#modewipe i{transform:scaleY(0);transform-origin:bottom}
#modewipe.go i{animation:bandIn .34s cubic-bezier(.7,0,.2,1) forwards;animation-delay:calc(var(--i) * 32ms)}
#modewipe.lift i{transform:scaleY(1);transform-origin:top;animation:bandOut .42s cubic-bezier(.7,0,.2,1) forwards;animation-delay:calc(var(--i) * 40ms)}
/* Japanese / Korean / Chinese glyphs fill the whole em: the tight line-heights made for Latin capitals would make two lines collide */
html:is([lang="ja"],[lang="ko"],[lang="zh"]) :is(.open h1,.legal .head h1,.head h1,.block h3,.feature h2){line-height:1.16}
html:is([lang="ja"],[lang="ko"],[lang="zh"]) .motto{line-height:1.2}