/* Nessa Hoang · archive (v2)
   Desktop scenes are drawn on a 1440 × 900 board, mobile on 390 × 844.
   app.js scales the board to the window; everything inside uses board px. */

:root {
  --bg: #121212;
  --cream: #F2ECE2;
  --cream-2: #EDE6DA;
  --muted: #A9A196;
  --pink: #EE8DB5;
  --red: #D9503F;
  --paper: #F7F2E9;
  --serif: 'Instrument Serif', 'Noto Serif TC', 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --W: 1440px;
  --H: 900px;
  --s: 1;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html { overflow-x: clip; background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--cream); font-family: var(--serif); }
img, video { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--cream); color: #111; padding: 10px 14px; font-family: var(--mono); font-size: 12px; text-decoration: none; }
.skip:focus { top: 12px; }
.mono { font-family: var(--mono); font-size: 11px; }

/* ───────── header ───────── */
.site-header { position: fixed; inset: 0 0 auto 0; height: 76px; z-index: 40; pointer-events: none; }
.site-header a, .site-header button { pointer-events: auto; }
.logo { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); font-size: 30px; line-height: 1; padding: 8px 0; text-decoration: none; color: var(--cream-2); opacity: 0; transition: opacity .4s; }
.site-header.is-compact .logo { opacity: 1; }
.site-header:not(.is-compact) .logo { pointer-events: none; }
.nav { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: min(1040px, calc(100vw - 48px)); display: flex; justify-content: space-between; align-items: center; }
.site-header.is-compact .nav { top: 50%; left: auto; right: 36px; transform: translateY(-50%); width: auto; gap: 36px; }
.nav a, .nav button { font-family: var(--serif); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 6px; color: var(--cream-2); text-decoration: none; background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.site-header.is-compact .nav a, .site-header.is-compact .nav button { font-size: 20px; padding: 10px 4px; }
.nav a:hover, .nav button:hover { color: #fff; }
.nav [aria-current="true"], .nav button[aria-expanded="true"] { border-bottom-color: var(--cream-2); color: #fff; }

/* ───────── scenes ───────── */
/* every scene shares one pinned screen; app.js sets .scenes' height to the scroll length */
.scenes { position: relative; height: 1000vh; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; contain: layout paint; }
.intro, .folders { position: absolute; inset: 0; }
.folders { z-index: 2; visibility: hidden; }
.stage { position: absolute; left: 50%; top: 50%; width: var(--W); height: var(--H); transform: translate(-50%, -50%) scale(var(--s)); }

/* paper grain: a noise tile masked to each object's own shape. It only
   flickers while the greeting is at rest (.grain-on): an endless blend-mode
   animation on a dozen layers was what made the first scroll stutter.     */
.grain { position: absolute; inset: 0; pointer-events: none; background-image: var(--noise); background-size: 150px 150px; mix-blend-mode: overlay; opacity: .8; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.grain-on .grain { animation: grain .6s steps(6) infinite; }
.grain--rect { border-radius: inherit; }
@keyframes grain {
  0% { background-position: 0 0; } 17% { background-position: -60px 40px; } 33% { background-position: 50px -70px; }
  50% { background-position: -90px -30px; } 67% { background-position: 30px 80px; } 83% { background-position: 80px 10px; } 100% { background-position: 0 0; }
}

/* greeting */
.obj { position: absolute; will-change: transform; }
.obj img { width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)); user-select: none; -webkit-user-drag: none; }
.obj .grain { inset: 0; }
.obj:not(.is-ready) .grain { display: none; }

.beads { position: absolute; left: 8px; top: 191px; display: flex; gap: 6px; align-items: center; transform-origin: 0 0; z-index: 6; }
.beads span { border-radius: 50%; flex: none; }
.b-s { width: 20px; height: 20px; background: #EDE7DA; box-shadow: inset -3px -3px 6px rgba(0,0,0,.25); }
.b-pink { width: 18px; height: 18px; background: #F2B6C6; }
.b-blue { width: 18px; height: 18px; background: #9CC3E6; }
.b-3 { transform: translateY(16px); }
.b-l { width: 48px; height: 48px; background: #F5F2EA; color: #111; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600; font-size: 22px; box-shadow: inset -4px -5px 8px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.5); }
.b-1 { transform: translateY(6px); }
.b-2 { transform: translateY(12px); }

.hello { position: absolute; left: 285px; top: 165px; width: 263px; height: 193px; padding: 12px 10px 14px; background: #D7262E; color: #fff; border-radius: 12px; box-shadow: 0 16px 26px rgba(0,0,0,.55); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 2px; overflow: hidden; transform-origin: 0 0; }
.hello-big { font-family: 'Archivo Black', 'Arial Black', sans-serif; font-size: 48px; line-height: .95; letter-spacing: .02em; }
.hello-small { font-family: 'Archivo Black', 'Arial Black', sans-serif; font-size: 15px; letter-spacing: .06em; }
.hello-name { margin-top: 8px; width: 100%; height: 86px; background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.hello-name > span { font-family: 'Caveat', cursive; font-weight: 600; font-size: 60px; line-height: 1; color: #1A1A1A; transform: rotate(-3deg); white-space: nowrap; }
.hello-name i { font-style: normal; padding: 0 4px; }
.hello-name [lang] { font-family: 'LXGW WenKai TC', 'Noto Serif TC', serif; font-weight: 400; font-size: 44px; }

.greet { position: absolute; left: 0; right: 0; top: 301px; display: flex; flex-direction: column; align-items: center; gap: 18px; z-index: 8; pointer-events: none; }
.greet h1 { margin: 0; font-weight: 400; font-size: 156px; line-height: .84; letter-spacing: -.01em; text-align: center; color: #F6F1E8; text-shadow: 0 6px 30px rgba(0,0,0,.7); }
.greet h1 span { display: block; }
.greet p { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: #CFC7B9; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.9); }

.corner { position: absolute; bottom: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #B8B0A2; z-index: 9; }
.corner--l { left: 32px; }
.corner--r { right: 32px; }

.scroll-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-2); padding: 6px 12px; text-decoration: none; z-index: 9; transition: opacity .3s; }
.scroll-hint svg { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

/* about me: film roll */
.about { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.about-title { position: absolute; left: 120px; top: 130px; width: 1000px; margin: 0; font-weight: 400; font-size: 60px; line-height: 1.02; color: #F6F1E8; -webkit-text-stroke: 1.2px #F6F1E8; z-index: 10; opacity: 0; transition: opacity .3s; }
.about-title.is-on { opacity: 1; }
.about-title .zh { font-family: 'Noto Serif TC', serif; -webkit-text-stroke: .6px #F6F1E8; }
.hello, .beads, .greet, .canister, .frame { will-change: transform; }
.film { position: absolute; left: -560px; width: 1760px; top: 415px; height: 300px; background: #070707; z-index: 5; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); opacity: 0; visibility: hidden; }
.film::before, .film::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 6px, var(--cream-2) 6px 27px, transparent 27px 33px); }
.film::before { top: 15px; }
.film::after { top: 273px; }
.frame { position: absolute; left: 0; top: 453px; width: 185px; height: 224px; object-fit: cover; z-index: 6; visibility: hidden; }
.frame.is-logo { object-fit: contain; background: #fff; padding: 28px 18px; }
.canister { position: absolute; left: 1180px; top: 380px; width: 195px; z-index: 8; filter: drop-shadow(0 20px 26px rgba(0,0,0,.6)); opacity: 0; transform-origin: 50% 50%; }
.bracket { position: absolute; top: 296px; z-index: 10; opacity: 0; transition: opacity .35s; }
.bracket.is-on { opacity: 1; }
.bracket-label { display: block; text-align: center; font-family: 'Caveat', cursive; font-weight: 600; font-size: 60px; line-height: 1; color: var(--pink); white-space: nowrap; }
.bracket-svg { display: block; margin-top: 6px; overflow: visible; }

/* ───────── folder stack ───────── */
.rail { position: absolute; left: 96px; top: 300px; width: 168px; display: flex; flex-direction: column; gap: 14px; z-index: 30; }
.rail-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.rail-now { font-size: 32px; line-height: .95; }
.rail-rule { height: 1px; background: #3A3631; }
.rail a { display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; color: #9C9489; padding: 4px 0; text-decoration: none; }
.rail a.is-on, .rail a:hover { color: #F6F1E8; }
.counter { position: absolute; left: 1150px; top: 300px; width: 120px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; z-index: 30; }
.counter-no { font-size: 44px; line-height: .9; }
.counter-no small { font-size: 22px; color: var(--muted); }
.counter-bar { position: relative; width: 2px; height: 150px; background: #3A3631; }
.counter-bar span { position: absolute; left: 0; top: 0; width: 2px; height: 26px; background: var(--cream); will-change: transform; }
.rail, .counter, .m-top, .stack-hint { opacity: 0; }
.m-top { display: none; }

.stack { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 10; }
.folder-li { position: absolute; left: 280px; top: 0; width: 880px; height: 500px; transform-origin: 50% 0; will-change: transform; visibility: hidden; }
.folder-li.is-deep .folder { cursor: pointer; }
/* while the page scrolls, folders ignore the pointer (no hover peeks) */
.stack.is-scrolling .folder { pointer-events: none; }
.folder { position: absolute; inset: 0; display: block; text-decoration: none; color: var(--ink); outline-offset: 6px; }
.folder-in { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
/* the hit area stays where the folder sits; a lifted folder also keeps the strip it was pulled up into */
.folder-in { pointer-events: none; }
.folder::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 0; }
.folder-li.is-peek .folder::before { height: 190px; }
.folder-li.is-front.is-peek .folder::before { height: 60px; }
.folder-slip { position: absolute; left: 320px; top: 14px; width: 500px; height: 60px; border-radius: 3px; background: #F3EEE4; }
.folder-tab { position: absolute; left: 28px; top: 0; width: 250px; height: 40px; padding: 0 16px; display: flex; align-items: center; background: var(--c); border-radius: 12px 12px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--ink); white-space: nowrap; text-transform: uppercase; overflow: hidden; }
.folder-body { position: absolute; left: 0; top: 36px; width: 100%; height: 464px; background: var(--c); border-radius: 4px 16px 16px 16px; box-shadow: 0 -8px 26px rgba(0,0,0,.45); overflow: hidden; }
.folder-strip { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 10px 28px; -webkit-text-stroke: .4px currentColor; }
.folder-strip b { font-weight: 400; font-size: 36px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder-strip span { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 0; }
.folder-paper { position: absolute; inset: 14px 14px auto 14px; height: 436px; padding: 16px 32px; background: var(--paper); color: #1E1A16; border-radius: 4px 12px 8px 8px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transition: opacity .3s; }
.fp-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5E554B; }
.fp-title { display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid #D8CFC1; padding-bottom: 10px; }
.fp-title b { font-weight: 400; font-size: 44px; line-height: .9; }
.fp-title i { font-size: 22px; color: #3A332C; white-space: nowrap; }
.fp-row { display: flex; gap: 28px; align-items: flex-start; }
.fp-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fp-short { display: block; margin: 0; font-style: italic; font-size: 22px; line-height: 1.15; }
.fp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-tags span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border: 1px solid #1E1A16; border-radius: 999px; }
.fp-open { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: #1E1A16; color: #F7F2E9; padding: 9px 14px; border-radius: 999px; }
.fp-thumb { width: 300px; height: 170px; object-fit: cover; border-radius: 4px; flex: none; }

.folder-li.is-front .folder-paper, .folder-li.is-peek .folder-paper { opacity: 1; }
.folder-li.is-front .folder-strip, .folder-li.is-peek .folder-strip { visibility: hidden; }
.folder-li.is-front .folder-body, .folder-li.is-peek .folder-body { border-radius: 6px 20px 16px 16px; }
.folder-li.is-peek .folder-in { transform: translateY(-190px) rotate(-1.5deg); }
.folder-li.is-front.is-peek .folder-in { transform: translateY(-60px); }
.folder-li.is-dim .folder-in { opacity: .4; }
.folder-li.is-peek .folder-body { box-shadow: 0 -20px 50px rgba(0,0,0,.6), 0 30px 60px rgba(0,0,0,.5); }

.stack-hint { position: absolute; left: 36px; bottom: 24px; max-width: 220px; line-height: 1.6; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; z-index: 30; }

/* ───────── opened folder (pop-up) ───────── */
.modal { position: fixed; inset: 0; z-index: 80; }
.modal[hidden] { display: none; }
.modal-dim { position: absolute; inset: 0; background: rgba(8,8,8,.74); opacity: 0; transition: opacity .35s; }
.modal.is-open .modal-dim { opacity: 1; }
.sheet { position: absolute; left: 50%; top: 40px; bottom: 0; width: min(1248px, calc(100vw - 48px)); transform: translate(-50%, 104%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.modal.is-open .sheet { transform: translate(-50%, 0); }
.sheet-tab { position: absolute; left: 30px; top: 0; width: 290px; height: 44px; padding: 0 18px; display: flex; align-items: center; background: var(--c); border-radius: 14px 14px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink); text-transform: uppercase; }
.sheet-frame { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; padding: 14px 14px 0; background: var(--c); border-radius: 6px 20px 0 0; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.sheet-paper { height: 100%; overflow-y: auto; overscroll-behavior: contain; border-radius: 4px 12px 0 0; padding: 26px 56px 64px; background: var(--paper); color: #1E1A16; outline: none; scrollbar-width: thin; }
.sheet-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--mono); }
.sheet-where { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-ink, #5E554B); }
.sheet-actions { display: flex; align-items: center; gap: 22px; }
.sheet-nav { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 12px 4px; background: none; border: 0; cursor: pointer; color: inherit; }
.sheet-nav:hover { text-decoration: underline; }
.sheet-close { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 0; color: inherit; }
.sheet-close .esc { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted-ink, #5E554B); }
.sheet-close .x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; }

/* shared card layout */
.c-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5E554B; }
.c-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-top: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--rule, #D8CFC1); }
.c-titles { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.c-title { margin: 0; font-weight: 400; }
.c-meta { margin: 0; display: grid; grid-template-columns: 90px minmax(0, 260px); row-gap: 10px; column-gap: 16px; font-size: 16px; line-height: 1.5; padding-bottom: 6px; flex: none; }
.c-meta dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5E554B; padding-top: 4px; }
.c-meta dd { margin: 0; }
.c-hero { display: flex; gap: 48px; align-items: flex-start; margin-top: 26px; }
.c-hero-fig { flex: 0 0 63%; }
.c-wins { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.c-wins ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.4; }
.c-wins li { display: flex; gap: 14px; border-bottom: 1px solid rgba(26,26,31,.1); padding-bottom: 12px; }
.c-wins li:last-child { border-bottom: 0; }
.w-no { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 600; padding-top: 4px; color: var(--acc, #8A8075); }
.c-story { display: flex; gap: 48px; align-items: flex-start; margin-top: 36px; }
.c-story .c-label { width: 160px; flex: none; padding-top: 10px; }
.c-story p { margin: 0; max-width: 820px; font-style: italic; font-size: 30px; line-height: 1.25; }
.c-gallery { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--rule, #D8CFC1); display: flex; flex-direction: column; gap: 18px; }
.c-gallery-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.g-row { display: flex; gap: var(--gap, 12px); align-items: flex-start; }
.g-row + .g-row { margin-top: 8px; }
.g-row .g-fig { flex: var(--ar) 1 0; min-width: 0; }
.g-row--part { max-width: 680px; }
.g-wrap { display: flex; flex-wrap: wrap; gap: 22px 14px; align-items: flex-start; }
.g-wrap .g-fig { width: calc(260px * var(--ar)); max-width: 100%; flex: none; }
.g-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.g-fig > a { display: block; }
.g-fig img, .g-fig video { width: 100%; height: auto; object-fit: cover; background: rgba(0,0,0,.06); }
.g-fig figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5E554B; }

/* archive card (Paper Archive) */
.t-archive { --rule: #D8CFC1; }
.t-archive .c-title { font-size: 104px; line-height: .88; letter-spacing: -.01em; }
.t-archive .arc-sub { font-style: italic; font-size: 22px; color: #5E554B; }
.t-archive .c-role { font-style: italic; font-size: 30px; color: #3A332C; }
.t-archive .c-wins ol { font-size: 20px; line-height: 1.3; }
.t-archive .c-wins li { border-bottom-color: #E3DACB; }
.t-archive .g-fig img, .t-archive .g-fig video { border-radius: 4px; }
.t-archive .arc-credits { margin: 24px 0 0 208px; font-size: 18px; color: #5E554B; max-width: 720px; }
.t-archive a { color: #1E1A16; }
.t-archive a:hover { color: #B0304F; }

/* IdeaLens (NSTC) */
.t-nstc { --paper: #ffffed; --rule: #d9d9c9; --acc: #1e3086; font-family: 'Figtree', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; color: #1b1b1b; }
.t-nstc .c-label, .t-nstc .c-meta dt, .t-nstc .g-fig figcaption, .t-nstc .nstc-eyebrow { font-family: 'Figtree', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #626262; }
.t-nstc .c-title { font-family: 'EB Garamond', Georgia, serif; font-size: 120px; line-height: .9; }
.t-nstc .c-role { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 30px; color: #1e3086; }
.t-nstc .c-meta { grid-template-columns: 90px minmax(0, 250px); line-height: 1.55; }
.t-nstc .g-fig img { border-radius: 8px; border: 1px solid #d9d9c9; }
.t-nstc .c-wins ol { gap: 0; font-size: 17px; line-height: 1.45; }
.t-nstc .c-wins li { padding: 12px 0; border-bottom: 0; border-top: 1px solid #d9d9c9; }
.t-nstc .c-wins li:last-child { border-bottom: 1px solid #d9d9c9; }
.t-nstc .w-no { font-family: 'Figtree', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .04em; padding-top: 3px; }
.t-nstc .c-story p { font-family: 'EB Garamond', Georgia, serif; font-size: 30px; line-height: 1.3; }
.t-nstc a { color: #1e3086; }

/* APIE */
.t-apie { --paper: #faf7f2; --rule: rgba(26,26,31,.16); --acc: #8b6fc7; --gap: 28px; font-family: 'Lexend', 'Helvetica Neue', sans-serif; color: #1a1a1f; }
.t-apie .c-label, .t-apie .c-meta dt { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8b8b92; }
.t-apie .g-fig figcaption { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4a4a52; }
.t-apie .apie-brand { display: flex; align-items: center; gap: 10px; }
.t-apie .apie-word { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 72px; line-height: 1; }
.t-apie .apie-dot { color: #f26d3d; }
.t-apie .apie-mark { width: 57px; height: 57px; border-radius: 50%; }
.t-apie .c-title { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 72px; line-height: .92; letter-spacing: -.04em; color: #4a4a52; }
.t-apie .c-role { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600; font-size: 30px; color: #8b6fc7; }
.t-apie .g-fig img { border: 2px solid #1a1a1f; border-radius: 16px; box-shadow: 6px 6px 0 #1a1a1f; }
.t-apie .apie-ig { object-position: 42.7757% 0%; object-view-box: inset(0% 12.2519% 35.0594% 9.1584%); }
.t-apie .w-no { font-family: 'JetBrains Mono', monospace; }
.t-apie .c-story p { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 30px; letter-spacing: -.01em; }
.t-apie .apie-hl { color: #8b6fc7; background: linear-gradient(transparent 62%, #c8ff3f 62%, #c8ff3f 88%, transparent 88%); }
.t-apie .apie-note-box { aspect-ratio: var(--ar); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; background: #c8ff3f; border: 2px solid #1a1a1f; border-radius: 16px; box-shadow: 6px 6px 0 #1a1a1f; }
.t-apie .apie-note-box span { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.t-apie .apie-note-box p { margin: 0; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 700; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.01em; }
.t-apie .apie-note-box em { color: #8b6fc7; }
.t-apie a { color: #8b6fc7; }
.t-apie a:hover { color: #1a1a1f; }
.t-apie .sheet-close .x { border-width: 2px; }

/* HaneiRoom */
.t-hanei { --paper: radial-gradient(circle at 0% 0%, #FBE3CC 0, rgba(251,227,204,0) 25%), #FAF4EA; --rule: #c9c9c9; --acc: #ff912c; font-family: 'Inter', system-ui, sans-serif; color: #1e1e1e; }
.t-hanei .c-label, .t-hanei .c-meta dt { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #5c5c5c; }
.t-hanei .g-fig figcaption { font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px; line-height: 26px; letter-spacing: 0; text-transform: none; color: #a85a22; }
.t-hanei .c-title { font-family: 'Instrument Serif', Georgia, serif; font-size: 132px; line-height: .86; letter-spacing: -.01em; color: #253a82; }
.t-hanei .c-title span { color: #ff912c; }
.t-hanei .c-role { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 32px; color: #a85a22; }
.t-hanei .c-meta { line-height: 24px; }
.t-hanei .g-fig img { border-radius: 24px; box-shadow: 0 8px 24px rgba(30,30,60,.12); }
.t-hanei .c-wins ol { font-size: 18px; line-height: 26px; }
.t-hanei .c-wins li { border-bottom-color: #e4e4e4; }
.t-hanei .w-no { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; }
.t-hanei .c-wins b { color: #253a82; }
.t-hanei .c-story p { font-family: 'Instrument Serif', Georgia, serif; font-size: 32px; line-height: 1.2; color: #253a82; }
.t-hanei a { color: #253a82; font-weight: 600; }
.t-hanei a:hover { color: #933519; }

/* ───────── contact card ───────── */
.contact { position: fixed; inset: 0; z-index: 70; }
.contact[hidden] { display: none; }
.contact-dim { position: absolute; inset: 0; background: rgba(8,8,8,.62); opacity: 0; transition: opacity .3s; }
.contact.is-open .contact-dim { opacity: 1; }
.contact-string { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.contact-string path, .contact-string ellipse { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.contact-card { position: absolute; top: 112px; width: 560px; padding: 26px; background: var(--paper); color: #1E1A16; border-radius: 6px; box-shadow: 0 28px 60px rgba(0,0,0,.65); display: flex; gap: 26px; transform-origin: 343px -40px; transform: translateY(-140%) rotate(-6deg); }
.contact.is-open .contact-card { animation: drop 1s cubic-bezier(.25,.9,.3,1) forwards; }
.contact.is-closing .contact-card { animation: lift .35s ease-in forwards; }
@keyframes drop {
  0% { transform: translateY(-140%) rotate(-6deg); }
  45% { transform: translateY(0) rotate(6deg); }
  65% { transform: translateY(0) rotate(-1deg); }
  82% { transform: translateY(0) rotate(4deg); }
  100% { transform: translateY(0) rotate(2.5deg); }
}
@keyframes lift { from { transform: translateY(0) rotate(2.5deg); } to { transform: translateY(-140%) rotate(-4deg); } }
.clip { position: absolute; left: 330px; top: -12px; width: 26px; height: 30px; background: #2B2B2B; border-radius: 4px 4px 2px 2px; }
.polaroid { margin: 0; flex: none; width: 172px; padding: 10px 10px 34px; background: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.22); transform: rotate(-5deg); position: relative; align-self: flex-start; }
.polaroid img { width: 152px; height: 180px; object-fit: cover; object-position: 50% 30%; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-style: italic; font-size: 17px; color: #3A332C; }
.tape { position: absolute; left: 50px; top: -12px; width: 76px; height: 22px; background: rgba(232,205,98,.75); transform: rotate(-4deg); }
.contact-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-top { display: flex; justify-content: space-between; align-items: center; }
.mono-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5E554B; }
.contact-close { width: 44px; height: 44px; margin: -10px -10px 0 0; border-radius: 50%; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.contact-name { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid #D8CFC1; }
.contact-name > span { font-size: 50px; line-height: .9; }
.contact-name em { font-size: 20px; color: #3A332C; }
.contact-name em [lang] { font-family: 'Noto Serif TC', serif; font-style: normal; font-weight: 300; }
.contact-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; border-bottom: 1px solid #E3DACB; font-size: 21px; color: #1E1A16; }
.contact-row:last-child { border-bottom: 0; }
.contact-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.contact-row small { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #5E554B; }
.contact-row:hover { color: #B0304F; }

/* footer: a lighter black screen with the name bouncing around like an old DVD logo */
.site-footer { position: relative; overflow: hidden; height: 200px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 24px 32px; background: #1E1D1B; border-top: 1px solid #2C2A27; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8A8276; }
.dvd { position: absolute; left: 0; top: 0; font-family: 'VT323', 'IBM Plex Mono', monospace; font-size: 48px; line-height: .8; letter-spacing: 0; text-transform: none; color: var(--pink); white-space: nowrap; pointer-events: none; user-select: none; will-change: transform; transition: color .15s; }
.foot-meta, .to-top { position: relative; z-index: 1; }
.foot-meta { padding-bottom: 10px; }
.to-top { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--cream-2); text-decoration: none; padding: 4px; }
.to-top-ring { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; background: #1E1D1B; transition: background .2s, color .2s, transform .2s; }
.to-top:hover .to-top-ring, .to-top:focus-visible .to-top-ring { background: var(--cream-2); color: #1E1D1B; transform: translateY(-4px); }

/* ───────── mobile (390 × 844 board) ───────── */
@media (max-width: 767px) {
  .nav { top: 8px; width: 100%; padding: 0 14px; }
  .nav a, .nav button { font-size: 16px; padding: 12px 4px; }
  .site-header.is-compact .logo { display: none; }
  .site-header.is-compact .nav { top: 8px; left: 0; right: 0; transform: none; width: 100%; gap: 0; }
  .site-header.is-compact .nav a, .site-header.is-compact .nav button { font-size: 16px; padding: 12px 4px; }

  .obj img { filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
  .beads { top: 96px; transform: scale(.667) rotate(-7deg); }
  .hello { left: 196px; top: 100px; }
  .greet { top: 330px; gap: 12px; }
  .greet h1 { font-size: 96px; text-shadow: 0 4px 22px rgba(0,0,0,.75); }
  .greet p { font-size: 10px; letter-spacing: .1em; color: #E2DACD; text-shadow: 0 2px 6px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.9); }
  .corner { display: none; }
  .scroll-hint { flex-direction: row; gap: 8px; min-height: 44px; font-size: 11px; letter-spacing: .14em; padding: 0 16px; background: rgba(18,18,18,.78); border-radius: 999px; white-space: nowrap; bottom: 14px; }

  .about-title { left: 22px; top: 76px; width: 346px; font-size: 36px; line-height: 1.04; -webkit-text-stroke: .8px #F6F1E8; }
  .film { left: 83px; width: 242px; top: 364px; height: 1400px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 50% calc(100% - 24px), 50% 100%, 0 100%); }
  .film::before, .film::after { top: 0; bottom: 0; height: auto; width: 10px; background: repeating-linear-gradient(180deg, transparent 0 5px, var(--cream-2) 5px 22px, transparent 22px 26px); }
  .film::before { left: 12px; right: auto; }
  .film::after { left: auto; right: 12px; }
  .frame { left: 114px; top: 0; width: 181px; height: 149px; }
  .frame.is-logo { padding: 16px 40px; }
  .canister { left: 55px; top: 214px; width: 280px; }
  .bracket { top: 0; left: 330px; }
  .bracket-label { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-size: 28px; }
  .bracket-svg { margin: 0; }

  .rail, .counter, .stack-hint { display: none; }
  .m-top { display: flex; position: absolute; left: 18px; right: 18px; top: 72px; justify-content: space-between; align-items: baseline; z-index: 40; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .m-top b { color: var(--cream); font-weight: 400; }
  .folder-li { left: 18px; width: 354px; height: 500px; }
  .folder-slip { left: 190px; top: 10px; width: 150px; height: 44px; }
  .folder-tab { left: 16px; width: 176px; height: 30px; padding: 0 12px; border-radius: 10px 10px 0 0; font-size: 10px; letter-spacing: .06em; }
  .folder-body { top: 26px; height: 474px; border-radius: 4px 14px 14px 14px; }
  .folder-strip { padding: 8px 16px; -webkit-text-stroke: .3px currentColor; }
  .folder-strip b { font-size: 26px; }
  .folder-strip span { display: none; }
  .folder-paper { inset: 8px 8px auto 8px; height: 458px; padding: 12px 16px; gap: 8px; }
  .fp-meta { font-size: 10px; }
  .fp-title { flex-direction: column; gap: 2px; padding-bottom: 8px; }
  .fp-title b { font-size: 30px; line-height: .95; }
  .fp-title i { font-size: 17px; white-space: normal; }
  .fp-row { flex-direction: column-reverse; gap: 10px; }
  .fp-short { font-size: 18px; }
  .fp-tags span { font-size: 10px; padding: 4px 9px; }
  .fp-thumb { width: 100%; height: 120px; }
  .fp-open { min-height: 44px; padding: 0 16px; }
  .folder-li.is-front .folder-body, .folder-li.is-peek .folder-body { border-radius: 4px 18px 14px 14px; }
  .folder-li.is-peek .folder-in { transform: translateY(-170px) rotate(-1.5deg); }
  .folder-li.is-front.is-peek .folder-in { transform: translateY(-10px); }
  .folder-li.is-peek .folder::before { height: 170px; }
  .folder-li.is-front.is-peek .folder::before { height: 10px; }

  .sheet { left: 0; width: 100%; top: 8px; transform: translateY(104%); }
  .modal.is-open .sheet { transform: translateY(0); }
  .sheet-tab { left: 18px; width: auto; max-width: 70%; height: 34px; padding: 0 14px; border-radius: 12px 12px 0 0; font-size: 10px; letter-spacing: .08em; }
  .sheet-frame { top: 30px; padding: 8px 8px 0; border-radius: 4px 18px 0 0; }
  .sheet-paper { padding: 14px 18px 48px; }
  .sheet-bar { gap: 8px; }
  .sheet-where .long { display: none; }
  .sheet-actions { gap: 6px; }
  .sheet-nav .long { display: none; }
  .sheet-nav { padding: 12px 8px; min-width: 44px; }
  .sheet-close .esc { display: none; }
  .c-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 14px; }
  .c-meta { grid-template-columns: 64px minmax(0, 1fr); font-size: 15px; width: 100%; }
  .c-hero { flex-direction: column; gap: 22px; }
  .c-hero-fig { flex: none; width: 100%; }
  .c-story { flex-direction: column; gap: 8px; margin-top: 28px; }
  .c-story .c-label { width: auto; padding: 0; }
  .c-story p { font-size: 22px !important; }
  .g-row { flex-wrap: wrap; }
  .g-row .g-fig { flex: 1 1 auto; width: calc(140px * var(--ar)); max-width: 100%; }
  .g-row--part { max-width: none; }
  .g-wrap .g-fig { width: calc(150px * var(--ar)); flex: 1 1 auto; }
  .t-archive .c-title { font-size: 56px; }
  .t-archive .c-role { font-size: 22px; }
  .t-archive .c-wins ol { font-size: 18px; }
  .t-archive .arc-credits { margin-left: 0; font-size: 16px; }
  .t-nstc .c-title { font-size: 72px; }
  .t-nstc .c-role { font-size: 22px; }
  .t-apie .apie-word { font-size: 48px; }
  .t-apie .apie-mark { width: 40px; height: 40px; }
  .t-apie .c-title { font-size: 44px; }
  .t-apie .c-role { font-size: 22px; }
  .t-apie .apie-note-box { padding: 20px; aspect-ratio: auto; }
  .t-hanei .c-title { font-size: 84px; }
  .t-hanei .c-role { font-size: 24px; }

  .contact-card { left: 12px !important; right: 12px; width: auto; top: 70px; padding: 18px; gap: 16px; transform-origin: 70% -40px; }
  .clip { left: calc(100% - 70px); }
  .polaroid { width: 112px; padding: 7px 7px 26px; }
  .polaroid img { width: 98px; height: 118px; }
  .polaroid figcaption { font-size: 13px; bottom: 5px; }
  .tape { left: 26px; width: 56px; height: 16px; }
  .contact-name > span { font-size: 34px; }
  .contact-name em { font-size: 15px; }
  .contact-row { font-size: 16px; }
  .site-footer { height: 170px; padding: 18px 18px 20px; }
  .dvd { font-size: 36px; }
  .foot-meta { max-width: 150px; line-height: 1.6; padding-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .scroll-hint svg { animation: none; }
  .contact.is-open .contact-card { animation: none; transform: rotate(2.5deg); }
  .contact.is-closing .contact-card { animation: none; }
  .sheet, .folder-in { transition: none; }
}