/* Jemetic — a manga page as the brand surface: ink borders, slanted gutters, screentone, speed lines,
   one spot colour (magenta, like a two-colour manga print) and non-photo blue for guides. */
:root{
  --paper:#ffffff; --ink:#111214; --ink-2:#464a52; --muted:#7c818a;
  --blue:#4c8fd6; --blue-soft:#e6f0fb; --tone:#cfd3d8; --panel:#f4f5f6; --line:#111214;
  --spot:#e4007f; --spot-soft:#fde3f0; --on-ink:#ffffff;
  --cta:#111214; --on-cta:#ffffff;
  --f-display:"LXGW WenKai TC","Kaiti TC","STKaiti",serif;
  --f-heavy:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --f-latin:"Space Grotesk","Noto Sans TC",system-ui,sans-serif;
  --f-body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --gutter:clamp(16px,4vw,48px);
  --b:3px; /* panel border */
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#121315; --ink:#eeede9; --ink-2:#b7bac0; --muted:#8a8f96;
  --blue:#78b2ee; --blue-soft:#18222e; --tone:#2d3036; --panel:#1b1d20; --line:#eeede9;
  --spot:#ff4fa3; --spot-soft:#3a1428; --on-ink:#121315;
  --cta:#eeede9; --on-cta:#121315; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#121315; --ink:#eeede9; --ink-2:#b7bac0; --muted:#8a8f96;
  --blue:#78b2ee; --blue-soft:#18222e; --tone:#2d3036; --panel:#1b1d20; --line:#eeede9;
  --spot:#ff4fa3; --spot-soft:#3a1428; --on-ink:#121315;
  --cta:#eeede9; --on-cta:#121315; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
body.en{font-family:var(--f-latin);line-height:1.65}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.25;text-wrap:balance;margin:0}
body.en h1,body.en h2,body.en h3{font-family:var(--f-latin);letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
img,video{max-width:100%}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.tone{background-image:radial-gradient(var(--tone) 1.1px,transparent 1.3px);background-size:7px 7px}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--blue);text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);border-bottom:var(--b) solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;padding-block:10px}
.logo{font-family:var(--f-latin);font-size:22px;font-weight:700;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:10px}
.logo .mark{display:inline-grid;place-items:center;width:30px;height:30px;border:var(--b) solid var(--line);font-family:var(--f-mono);font-size:15px;box-shadow:3px 3px 0 var(--spot);transform:rotate(-4deg)}
.logo .x{font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.08em;margin-left:2px}
.top nav{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--ink-2);align-items:center;white-space:nowrap}
.logo{white-space:nowrap}
.top nav a{text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.lang{font-family:var(--f-mono);font-size:12px;border:1px solid var(--tone);padding:3px 8px;border-radius:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--b) solid var(--line);background:var(--cta);color:var(--on-cta);font:700 15px/1 var(--f-body);padding:13px 22px;border-radius:2px;cursor:pointer;text-decoration:none;box-shadow:4px 4px 0 var(--spot);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--spot)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--spot)}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.link{font-size:15px;text-decoration:none;border-bottom:2px solid var(--spot);padding-bottom:1px}

/* ---------- hero: a manga page ---------- */
.page{padding-block:clamp(20px,3vw,36px) clamp(40px,6vw,72px)}
.page-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(330px,1.35fr) minmax(230px,1fr);min-height:min(640px,calc(100svh - 120px));gap:12px}
.pnl{position:relative;border:var(--b) solid var(--line);background:var(--paper);overflow:hidden;min-width:0}
/* media never sizes the panel; the grid does */
.pnl img,.pnl video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* slanted gutters: each panel is cut on the diagonal it shares with its neighbour */
.pnl.a{grid-column:1 / 8;grid-row:1 / 3;background:var(--ink);color:var(--on-ink);clip-path:polygon(0 0,100% 0,92% 100%,0 100%);padding:clamp(28px,4vw,56px) clamp(24px,7vw,96px) clamp(28px,4vw,56px) clamp(24px,4vw,52px);display:flex;flex-direction:column;justify-content:center;border:0}
/* b = 角色對話 (top right), c = 故事 (bottom middle), d = 動起來 (bottom right) */
.pnl.b{grid-column:7 / 13;grid-row:1;clip-path:polygon(9% 0,100% 0,100% 100%,4% 100%);margin-left:-6px}
.pnl.c{grid-column:7 / 10;grid-row:2;clip-path:polygon(8% 0,100% 0,94% 100%,0 100%);margin-left:-30px}
.pnl.d{grid-column:10 / 13;grid-row:2;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%);margin-left:-10px}
.pnl.a::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 78% 30%,transparent 0deg 3.2deg,color-mix(in srgb,var(--on-ink) 9%,transparent) 3.2deg 4deg);pointer-events:none}
.pnl.a > *{position:relative}
.pnl.a .label{color:color-mix(in srgb,var(--on-ink) 70%,var(--spot))}
.pnl.a h1{font-family:var(--f-heavy);font-weight:900;font-size:clamp(48px,8.4vw,112px);line-height:1;letter-spacing:-.01em;margin-top:18px}
body.en .pnl.a h1{font-family:var(--f-latin);font-weight:700;letter-spacing:-.04em}
.pnl.a h1 .x{color:var(--spot);font-family:var(--f-mono);font-weight:500;font-size:.6em;vertical-align:.18em;margin-inline:.08em}
.pnl.a .tagline{font-family:var(--f-display);font-size:clamp(22px,2.4vw,30px);margin-top:16px;text-wrap:balance}
body.en .pnl.a .tagline{font-family:var(--f-latin);font-weight:500}
.pnl.a .sub{margin-top:14px;max-width:30em;color:color-mix(in srgb,var(--on-ink) 78%,var(--ink))}
.pnl.a .cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:30px}
.pnl.a .btn{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.pnl.a .link{color:var(--on-ink)}
/* panel tag: which of the three directions this panel shows */
.ptag{position:absolute;z-index:2;top:10px;background:var(--paper);border:2px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;padding:2px 8px;color:var(--ink);white-space:nowrap}
.ptag b{color:var(--spot);font-weight:500;margin-right:6px}
.pnl.b .ptag{left:11%}.pnl.c .ptag{left:12%}.pnl.d .ptag{left:10%}
.sfx{position:absolute;z-index:2;font-family:var(--f-heavy);font-weight:900;color:var(--spot);-webkit-text-stroke:2px var(--paper);paint-order:stroke fill;transform:rotate(-8deg);pointer-events:none;line-height:1}

/* b: a conversation with a character, drawn as manga speech bubbles over screentone */
.pnl.b{background-image:radial-gradient(var(--tone) 1.1px,transparent 1.3px);background-size:7px 7px;background-color:var(--paper)}
.chat{position:absolute;inset:46px 18px 16px 13%;display:flex;flex-direction:column;justify-content:center;gap:12px}
.msg{display:flex;align-items:flex-end;gap:10px;max-width:92%}
.msg .av{flex:none;width:52px;height:52px;border:2px solid var(--line);border-radius:50%;overflow:hidden;position:relative;background:#fff}
.msg .av img{inset:auto;left:-36px;top:-12px;width:130px;max-width:none;height:auto;object-fit:fill}
.msg p{position:relative;background:var(--paper);border:2px solid var(--line);border-radius:22px;padding:9px 16px;font-family:var(--f-display);font-size:clamp(14px,1.35vw,17px);line-height:1.5}
body.en .msg p{font-family:var(--f-latin)}
.msg.me{align-self:flex-end}
.msg.me p{background:var(--ink);color:var(--on-ink);border-color:var(--ink);border-bottom-right-radius:4px}
.msg.ch p{border-bottom-left-radius:4px}
.msg .who{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.typing{display:inline-flex;gap:4px;padding:12px 16px!important}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.3;animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes dot{40%{opacity:1;transform:translateY(-2px)}}

/* c: a finished manga page */
.pnl.c img{object-position:22% 34%}
.pnl.c .sfx{right:10%;bottom:12px;font-size:clamp(22px,2.4vw,34px)}

/* d: a character that idles, blinks and speaks: a stand-in for Live2D */
.pnl.d{background:var(--blue-soft)}
.pnl.d .rig{position:absolute;inset:0;animation:breathe 4.2s ease-in-out infinite;transform-origin:50% 100%}
.pnl.d .rig img{object-position:50% 25%;transform:scale(1.15);transform-origin:50% 30%}
@keyframes breathe{50%{transform:translateY(-3px) scale(1.012) rotate(-.4deg)}}
.voice{position:absolute;z-index:2;left:10%;bottom:12px;display:flex;align-items:center;gap:3px;background:var(--paper);border:2px solid var(--line);padding:6px 10px;border-radius:999px}
.voice i{width:3px;height:14px;background:var(--spot);border-radius:2px;animation:wave 1s ease-in-out infinite}
.voice i:nth-child(2){animation-delay:.15s}.voice i:nth-child(3){animation-delay:.3s}.voice i:nth-child(4){animation-delay:.45s}.voice i:nth-child(5){animation-delay:.6s}
@keyframes wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.voice span{font-family:var(--f-mono);font-size:10px;margin-left:6px;color:var(--ink)}
.emo{position:absolute;z-index:2;right:10px;top:42px;display:grid;gap:4px}
.emo span{font-family:var(--f-mono);font-size:10px;background:var(--paper);border:1px solid var(--line);padding:0 6px;opacity:.35;animation:emo 6s infinite}
.emo span:nth-child(2){animation-delay:2s}.emo span:nth-child(3){animation-delay:4s}
@keyframes emo{0%,30%{opacity:1;border-color:var(--spot);color:var(--spot)}34%,100%{opacity:.35}}
.mock{position:absolute;z-index:2;right:8px;bottom:6px;font-family:var(--f-mono);font-size:9px;color:var(--muted);background:var(--paper);padding:0 4px}

/* ---------- three directions ---------- */
.dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dir{position:relative;border:var(--b) solid var(--line);background:var(--paper);display:flex;flex-direction:column;min-width:0}
.dir .head{padding:22px 22px 18px;border-bottom:var(--b) solid var(--line);background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
.dir .head::before{content:"";position:absolute;inset:-80%;background:repeating-conic-gradient(from 0deg at 90% 20%,transparent 0deg 3.2deg,color-mix(in srgb,var(--on-ink) 8%,transparent) 3.2deg 4deg)}
.dir .head > *{position:relative}
.dir .head .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:color-mix(in srgb,var(--on-ink) 70%,var(--spot))}
.dir .head h3{font-size:clamp(26px,2.6vw,32px);margin-top:6px}
.dir .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.dir .body > p{color:var(--ink-2);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:13px;border:1px solid var(--line);padding:1px 10px;border-radius:999px}
.now{margin-top:auto;border-top:1px dashed var(--tone);padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.now .st{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;border:1px solid currentColor;padding:1px 7px;white-space:nowrap;color:var(--muted)}
.now .st.live{color:var(--spot)}
.now a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--spot)}

/* ---------- section heads: chapter titles ---------- */
section{padding-block:clamp(56px,8vw,104px)}
.chap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:clamp(28px,4vw,44px);border-bottom:var(--b) solid var(--line);padding-bottom:14px}
.chap .no{font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;background:var(--ink);color:var(--paper);padding:3px 10px;transform:skewX(-10deg)}
.chap h2{font-size:clamp(28px,3.6vw,44px)}
.chap p{flex-basis:100%;color:var(--ink-2);max-width:40em}
.rule{border:0;border-top:var(--b) solid var(--line);margin:0}

/* ---------- what we make: domain panels ---------- */
.domains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dom{position:relative;border:var(--b) solid var(--line);padding:22px 20px 24px;min-width:0;background:var(--paper);display:flex;flex-direction:column;gap:8px}
.dom.main{grid-column:span 2;grid-row:span 2;padding:0;background:var(--ink);color:var(--on-ink)}
.dom.main .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.dom.main img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-bottom:var(--b) solid var(--line)}
.dom .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--blue)}
.dom.main .k{color:color-mix(in srgb,var(--on-ink) 70%,var(--spot))}
.dom h3{font-size:24px}
.dom.main h3{font-size:clamp(30px,3vw,40px)}
.dom p{color:var(--ink-2);font-size:15px}
.dom.main p{color:color-mix(in srgb,var(--on-ink) 78%,var(--ink));font-size:16px}
.dom .state{align-self:flex-start;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;border:1px solid currentColor;padding:1px 7px;margin-top:auto;color:var(--muted)}
.dom.main .state{color:var(--spot);border-color:var(--spot)}
.dom.main .go{margin-top:6px}
.dom.main .btn{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.dom.tone-bg{background-image:radial-gradient(var(--tone) 1.1px,transparent 1.3px);background-size:7px 7px}

/* ---------- flagship spread ---------- */
.flag{background:var(--panel);border-block:var(--b) solid var(--line)}
.flag-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.flag .name{font-family:var(--f-display);font-size:clamp(48px,6vw,80px);line-height:1}
.flag .name small{display:block;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--muted);margin-top:10px}
.flag .pitch{margin-top:18px;font-size:clamp(18px,1.8vw,22px);font-family:var(--f-display)}
body.en .flag .pitch{font-family:var(--f-latin);font-weight:500}
.steps3{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px;counter-reset:s}
.steps3 li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;color:var(--ink-2);counter-increment:s}
.steps3 li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--line);font-family:var(--f-mono);font-size:14px;color:var(--ink);background:var(--paper);transform:rotate(-4deg)}
.flag .cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px}
.spread{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;direction:rtl}
.spread figure{margin:0;direction:ltr;min-width:0}
.spread img{display:block;width:100%;height:auto;border:2px solid var(--line);background:#fff}
.spread-wrap{position:relative}
.spread-note{margin-top:10px;font-size:13px;color:var(--muted)}
.vid{position:relative;border:var(--b) solid var(--line);background:var(--paper);margin-bottom:12px}
.vid video{display:block;width:100%;height:auto}
.status{display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;border:1px solid var(--spot);color:var(--spot);padding:1px 8px;margin-left:10px;vertical-align:middle}

/* ---------- beliefs ---------- */
.beliefs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.belief{position:relative;border:var(--b) solid var(--line);padding:28px 24px 26px;min-width:0;border-radius:28px 28px 28px 4px;background:var(--paper)}
.belief .q{font-family:var(--f-display);font-size:22px;line-height:1.45}
body.en .belief .q{font-family:var(--f-latin);font-weight:500}
.belief p{color:var(--ink-2);font-size:15px;margin-top:10px}
.belief .n{position:absolute;top:-14px;left:20px;background:var(--spot);color:#fff;font-family:var(--f-mono);font-size:12px;padding:2px 10px}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,64px);align-items:start}
.founder .who{border:var(--b) solid var(--line);padding:24px;background:var(--panel);box-shadow:6px 6px 0 var(--blue)}
.founder .who h3{font-size:26px}
.founder .who p{color:var(--ink-2);font-size:14px;margin-top:4px}
.founder .who .links{display:grid;gap:6px;margin-top:16px;font-size:14px}
.founder .bio p+p{margin-top:14px}
.founder .bio p{color:var(--ink-2)}
.log{margin-top:26px;border-top:2px solid var(--line);display:grid}
.log a{display:flex;justify-content:space-between;gap:16px;padding-block:12px;border-bottom:1px solid var(--tone);text-decoration:none}
.log a span:last-child{font-family:var(--f-mono);font-size:13px;color:var(--muted);white-space:nowrap}
.log a:hover span:first-child{text-decoration:underline;text-decoration-color:var(--spot);text-underline-offset:4px}

/* ---------- list rows (work page) ---------- */
.hero{padding-block:clamp(48px,8vw,104px) clamp(40px,6vw,72px)}
.hero h1{font-size:clamp(38px,6vw,72px);letter-spacing:.01em;max-width:14em}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--spot-soft) 62%)}
.hero .sub{margin-top:22px;font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);max-width:36em}
.rows{border-top:var(--b) solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;padding-block:24px;border-bottom:1px solid var(--tone)}
.row h3{font-size:22px}
.row p{color:var(--ink-2)}
.row ul{margin:10px 0 0;padding-left:1.2em;color:var(--ink-2)}

/* ---------- contact band ---------- */
.band{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg at 85% 50%,transparent 0deg 3.2deg,color-mix(in srgb,var(--on-ink) 8%,transparent) 3.2deg 4deg);pointer-events:none}
.band .wrap{position:relative;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.band h2{font-size:clamp(26px,3.4vw,40px)}
.band p{margin-top:10px;color:color-mix(in srgb,var(--on-ink) 75%,var(--ink))}
.band .btn{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}

footer{padding-block:36px;font-size:13px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

@media (max-width:960px){
  .domains{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flag-grid,.founder,.row{grid-template-columns:minmax(0,1fr)}
  .beliefs{grid-template-columns:minmax(0,1fr)}
  .top nav .hide-sm{display:none}
}
@media (max-width:760px){
  .logo .x{display:none}
  .top nav{gap:16px}
  .page-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;min-height:0}
  .pnl.a{grid-column:1 / -1;grid-row:auto;clip-path:polygon(0 0,100% 0,100% 94%,0 100%);padding-bottom:56px}
  .pnl.b{grid-column:1 / -1;grid-row:auto;clip-path:none;margin:0;min-height:300px}
  .pnl.c,.pnl.d{grid-row:auto;clip-path:none;margin:0;aspect-ratio:3/4}
  .pnl.c{grid-column:1 / 2}.pnl.d{grid-column:2 / 3}
  .pnl.b .ptag,.pnl.c .ptag,.pnl.d .ptag{left:8px}
  .chat{inset:44px 12px 14px 12px}
  .voice{left:8px}
  .dirs{grid-template-columns:minmax(0,1fr)}
  .domains{grid-template-columns:minmax(0,1fr)}
  .dom.main{grid-column:auto;grid-row:auto}
  .spread{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}