/* Hallmark · built: portfolio · redesign: full · genre: editorial · theme: brand · shape: full-frame gallery · hero: Poster · signature: original film and full-frame artwork */
/* Critique: Original finished art leads; each medium gets its own reading composition. */
/* waive 83: an artist portfolio intentionally prioritizes the user's artworks over photographic balance. */
:root {
 --business-card-pink:#e06aa8;
 --byeol-paper: #f6eee4; --byeol-ink: #692328; --byeol-accent: #a92b35; --byeol-panel: #e6d6c3; --byeol-rule: #c9b7a6; --pyaco-paper: #fff1d2; --pyaco-ink: #613b23; --pyaco-accent: #c75c21; --pyaco-panel: #ffcf7b; --pyaco-rule: #deb98a; --pukupuku-paper: #fff5f0; --pukupuku-ink: #593e43; --pukupuku-accent: #b85376; --pukupuku-panel: #f6dae3; --pukupuku-rule: #dfbdc9;
 --face-latin: Anybody, sans-serif; --face-title: Gasoek, sans-serif; --face-body: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
 --paper: #f8f5ef; --white: #fff; --plum: #201522; --ink: #241e26; --muted: #645c62; --rule: #d6ced1; --signal: #f7e55d; --shade: #201522d9; --scrim: #100c16; --scrim-clear: #100c1600; --caption-rule: #ffffff70; --invert-neutral: #fff9e7; --transparent: transparent;
 --project-bg: #e4e6e0; --blue-paper: #cddfdb; --orange-paper: #f1d4b4; --pink-paper: #f6d9dd; --green-paper: #d5dfc9; --book-paper: #ede8df; --film-paper: #17151b; --film-ink: #f6f1e9;
 --book-shadow: #352a2026; --spine: #352a201c; --spine-light: #ffffff33;
 --gutter: clamp(20px,4vw,64px); --content: 1280px; --gap: 32px; --radius-media: 12px; --reading-width: 40rem;
 --case-paper: var(--paper); --case-ink: var(--ink); --case-rule: var(--rule); --case-muted: var(--muted); --case-font: var(--face-body);
}
@font-face { font-family: Anybody; src: url(fonts/Anybody.woff2); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: Gasoek; src: url(fonts/GasoekOne.woff2); font-weight: 400; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: auto; }
p,dd { word-break: keep-all; overflow-wrap: anywhere; }
body { background: var(--plum); color: var(--paper); font: 17px/1.75 var(--face-body); }
body:has(dialog[open]) { overflow-y: hidden; }
h1,h2,h3 { min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
button,a,select { -webkit-tap-highlight-color: var(--transparent); }
a { color: inherit; text-decoration: none; text-underline-offset: 6px; }
button { font: inherit; color: inherit; cursor: pointer; border-radius: 0; }
button:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
button:disabled { cursor: default; color: var(--muted); background: var(--book-paper); }
button:active:enabled { transform: translateY(1px); }
img,video { display: block; max-width: 100%; border-radius: var(--radius-media); }
img { height: auto; }
figure { margin: 0; }
::selection { background: var(--signal); color: var(--plum); }
[hidden] { display: none !important; }
.skip { position: fixed; top: -120px; left: 20px; z-index: 100; background: var(--plum); padding: 16px; }
.skip:focus { top: 12px; }
.archive.is-inverted { filter:invert(1); }
.noise,.world-bigtype,#archive-preview { display: none; }
#page-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--business-card-pink); z-index: 50; transform-origin: left; }
#invert-layer { position: fixed; inset: 0; background: var(--invert-neutral); mix-blend-mode: difference; pointer-events: none; z-index: 24; clip-path: inset(50% 0); }
.hud { position: fixed; inset: 0 0 auto; height: 64px; z-index: 25; display: flex; justify-content: space-between; align-items: center; padding: 8px var(--gutter); background: var(--plum); color: var(--paper); font-size: 14px; }
.brand { font: 700 24px var(--face-latin); letter-spacing: -.03em; }
.brand span { font-size: 14px; }
.hud > div { display: flex; gap: 8px; }
.hud a,.hud button { min-height: 44px; display: inline-flex; align-items: center; }
.hud button { border: 0; background: var(--transparent); padding: 8px; font-size: 14px; }
.hud button:hover,.hud a:hover { color: var(--signal); }
.hud button span { margin-left: 8px; }
.opening { height: 142svh; }
.opening-pin,.manifesto-pin,.world-stage { position: sticky; top: 64px; height: calc(100svh - 64px); }
.opening-pin { overflow: clip; }
.film { position: absolute; inset: 8px; border-radius: var(--radius-media); overflow: clip; clip-path: inset(var(--gate,0%) 0 round var(--radius-media)); }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film-shade { position: absolute; inset: 0; background: linear-gradient(0deg,var(--shade),var(--scrim-clear) 72%); }
.opening h1 { position: absolute; left: var(--gutter); bottom: 144px; margin: 0; transform: translateY(var(--credit-y,0px)); }
.hero-korean { font: 400 clamp(56px,13vw,192px)/1.08 var(--face-title); letter-spacing: -.04em; }
.opening-top { position: absolute; left: var(--gutter); bottom: 76px; font-size: 17px; line-height: 1.5; }
.opening-top>span:first-child { display: none; }
.film-controls { position: absolute; bottom: 20px; left: var(--gutter); }
.film-controls button,.enter { min-height: 44px; padding: 8px 16px; border: 1px solid var(--caption-rule); background: var(--plum); color: var(--paper); font-size: 15px; }
.enter { position: absolute; bottom: 20px; right: var(--gutter); display: flex; align-items: center; }
.manifesto { height: 180svh; }
.manifesto-pin { display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 40px max(var(--gutter),calc((100% - var(--content))/2)); }
.manifesto h2 { font: 400 clamp(40px,7vw,104px)/1.2 var(--face-title); letter-spacing: -.03em; margin: 0; }
.manifesto-line { display: block; }
.manifesto-note { margin: 0; font-size: 18px; line-height: 1.8; }
.motion-study { padding-top: 80px; }
.motion-copy { max-width: var(--content); margin: auto; padding: 0 var(--gutter) 48px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap); }
.motion-copy h2 { font: 400 clamp(32px,5vw,64px)/1.3 var(--face-title); margin: 0; }
.motion-copy p { margin: 0; max-width: 36em; }
.inline-film { position: relative; margin: 0 8px; }
.inline-film video { width: 100%; height: 80svh; object-fit: cover; }
.inline-film button { position: absolute; bottom: 24px; left: var(--gutter); min-height: 44px; background: var(--plum); color: var(--paper); border: 1px solid var(--caption-rule); padding: 8px 16px; }
.worlds { height: 850svh; }
.world-stage { isolation: isolate; overflow: clip; color: var(--paper); background: var(--plum); }
.world-art { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border: 0; background: var(--project-bg); padding: 0; overflow: clip; border-radius: var(--radius-media); }
.world-art img,.world-art video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal,50% 50%); }
.world-stage::after { content: ''; position: absolute; inset: 8px; border-radius: var(--radius-media); pointer-events: none; background: linear-gradient(0deg,var(--scrim) 0%,var(--shade) 20%,var(--scrim-clear) 65%); z-index: 1; }
.world-heading { position: absolute; top: 28px; left: var(--gutter); right: var(--gutter); z-index: 2; display: flex; justify-content: flex-end; }
.world-heading>span:first-child { display: none; }
#world-number { padding: 4px 12px; background: var(--shade); font-variant-numeric: tabular-nums; font-size: 14px; }
.world-info { position: absolute; left: max(var(--gutter),calc((100% - var(--content))/2)); right: max(var(--gutter),calc((100% - var(--content))/2)); bottom: 100px; z-index: 2; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: var(--gap); align-items: end; pointer-events: none; }
.world-info h2 { font: 400 clamp(32px,5vw,76px)/1.2 var(--face-title); letter-spacing: -.03em; margin: 8px 0 0; }
#world-tag { font-size: 15px; }
.world-summary p { font-size: 17px; max-width: 30em; margin: 0 0 20px; }
.world-summary button { min-height: 44px; padding: 12px 20px; background: var(--paper); color: var(--plum); border: 0; pointer-events: auto; }
.world-summary button:hover { background: var(--signal); }
.world-bottom { position: absolute; z-index: 2; bottom: 24px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.world-bottom button,.world-bottom a { min-height: 44px; min-width: 44px; padding: 8px 12px; border: 0; color: var(--paper); background: var(--transparent); font-size: 15px; }
.world-bottom button:hover:enabled,.world-bottom a:hover { background: var(--shade); }
#world-dots { display: flex; gap: 4px; }
#world-dots button { font-variant-numeric: tabular-nums; border-bottom: 2px solid var(--transparent); }
#world-dots button[aria-pressed=true] { border-bottom-color: var(--paper); }
[data-project=saeparan] { --project-bg: var(--blue-paper); }
[data-project=pyaco] { --project-bg: var(--orange-paper); }
[data-project=pukupuku] { --project-bg: var(--pink-paper); }
[data-project=seojeong] { --project-bg: var(--green-paper); }
.archive { background: var(--paper); color: var(--ink); padding: 112px max(var(--gutter),calc((100% - var(--content))/2)); }
.archive-head h2 { font: 400 clamp(40px,8vw,112px)/1.2 var(--face-title); letter-spacing: -.03em; margin: 0; }
.archive-head sup { font: 16px var(--face-body); vertical-align: top; margin-left: 12px; }
.archive-head p { margin: 20px 0 48px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-bottom: 1px solid var(--rule); padding: 0 0 24px; }
.filters button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--rule); background: var(--transparent); color: var(--ink); font-size: 15px; }
.filters button[aria-pressed=true] { background: var(--plum); color: var(--paper); }
#result-count { margin-left: auto; font-size: 15px; }
.archive-row { border-bottom: 1px solid var(--rule); }
.archive-row button { display: grid; width: 100%; grid-template-columns: 40px minmax(0,1fr) 200px 32px; gap: var(--gap); align-items: center; text-align: left; padding: 28px 0; border: 0; background: var(--transparent); color: var(--ink); }
.archive-row h3 { font: 600 clamp(22px,3vw,40px)/1.4 var(--face-body); margin: 0; letter-spacing: -.03em; }
.archive-row button:hover h3 { text-decoration: underline; text-underline-offset: 8px; }
.row-no,.row-type { font-size: 14px; }
.row-arrow { font-size: 28px; }
.about { background: var(--book-paper); color: var(--ink); padding: 112px max(var(--gutter),calc((100% - var(--content))/2)); }
.about-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 64px; align-items: center; }
.about-title h2 { font: 400 clamp(40px,6vw,80px)/1.2 var(--face-title); margin: 24px 0 0; }
.profile-image { width: 100%; max-width: 400px; aspect-ratio: 1; object-fit: cover; }
.about-lead { font-size: clamp(24px,3vw,36px); line-height: 1.5; font-weight: 600; letter-spacing: -.02em; }
.about-story p { max-width: 38em; }
.about-story dl { margin: 32px 0; }
.about-story dt { font-size: 14px; color: var(--muted); margin-top: 20px; }
.about-story dd { margin: 4px 0 0; font-size: 16px; }
.about-story>a { text-decoration: underline; }
:root { --footer-inline: max(var(--gutter),calc((100% - var(--content))/2)); }
footer { padding: 80px var(--footer-inline) 32px; }
footer>span { font-size: 16px; }
.contact-title { display: flex; flex-direction: column; margin: 32px 0 56px; font: 400 clamp(40px,7vw,104px)/1.3 var(--face-title); letter-spacing: -.03em; }
.contact-title>span+span { font: 500 clamp(24px,4vw,56px)/1.5 var(--face-latin); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; font-size: 15px; }
.footer-bottom a { min-height: 44px; }
dialog { border: 0; padding: 0; max-width: none; max-height: none; }
dialog::backdrop { background: var(--shade); }
#index-dialog,#case,#zoom { position: fixed; inset: 0; margin: 0; width: 100%; height: 100dvh; }
#index-dialog { background: var(--plum); color: var(--paper); padding: 80px max(var(--gutter),calc((100% - var(--content))/2)); }
#index-title { font-size: 16px; }
.dialog-close { position: absolute; top: 16px; right: var(--gutter); min-height: 44px; padding: 8px 16px; border: 1px solid var(--caption-rule); background: var(--transparent); }
#index-dialog nav { display: flex; flex-direction: column; margin-top: 32px; }
#index-dialog nav a { padding: 12px 0; font: 400 clamp(28px,5vw,64px)/1.4 var(--face-title); border-bottom: 1px solid var(--caption-rule); }
#index-dialog nav a:hover { color: var(--signal); }
#case { overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); scrollbar-color: var(--muted) var(--paper); }
.case-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 10; background: var(--paper); padding: 12px var(--gutter); border-bottom: 1px solid var(--rule); font-size: 14px; }
.case-header button { flex-shrink: 0; min-height: 44px; background: var(--transparent); border: 1px solid var(--rule); padding: 8px 16px; color: var(--ink); }
.case-article { max-width: 1440px; margin: auto; padding: 0 var(--gutter); --case-ink: var(--ink); font: 18px/1.85 var(--face-body); }
.case-opening { padding: 64px 0 32px; }
.case-heading { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 64px; align-items: start; padding-bottom: 40px; }
.case-heading h2 { font: 400 clamp(32px,4.5vw,64px)/1.25 var(--face-title); letter-spacing: -.03em; margin: 0; }
.case-lead { font-size: 19px; line-height: 1.7; max-width: 36em; margin: 20px 0 0; }
.case-facts { display: grid; gap: 16px; font-size: 15px; margin: 0; }
.case-facts dt { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.case-facts dd { margin: 0; line-height: 1.6; }
.case-cover figure,.case-cover button { height: 100%; width: 100%; }
.case-cover button { background: var(--project-bg); border: 0; border-radius: var(--radius-media); padding: 0; overflow: clip; }
.case-cover img { width: 100%; height: min(72svh,800px); object-fit: contain; }
.case-toc { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 20px 0; border-block: 1px solid var(--rule); margin: 32px 0 0; font-size: 14px; }
.case-toc a { display: flex; align-items: center; min-height: 44px; }
.case-toc a:hover { text-decoration: underline; }
.case-chapter { padding: 88px 0 0; scroll-margin-top: 96px; }
.case-chapter h3 { font: 650 clamp(24px,2.7vw,36px)/1.4 var(--face-body); letter-spacing: -.02em; margin: 0 0 24px; }
.case-prose { max-width: var(--reading-width); }
.case-prose p { margin: 0 0 24px; word-break: keep-all; overflow-wrap: anywhere; }
.case-overview,.case-credits { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 64px; }
.chapter-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 64px; margin-bottom: 32px; }
.case-figures { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--gap); align-items: start; }
.case-figures:empty { display: none; }
.case-figures button { width: 100%; border: 0; padding: 0; background: var(--transparent); border-radius: var(--radius-media); overflow: clip; }
.case-figures img { width: 100%; height: auto; max-height: 900px; object-fit: contain; }
.figures-pair,.figures-sequence,.figures-comparison { grid-template-columns: repeat(2,minmax(0,1fr)); }
.figures-grid,.figures-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
.figures-cards { gap: 24px; }
.figures-cards img { aspect-ratio: 2/3; object-fit: contain; }
.figures-comparison { background: var(--project-bg); border-radius: var(--radius-media); padding: 40px 24px; align-items: end; }
.figures-comparison img { height: 560px; object-fit: contain; }
.chapter-feature.has-art { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 64px; align-items: center; }
.chapter-feature.has-art .chapter-intro { display: block; margin: 0; }
.chapter-feature.has-art .case-prose { font-size: 17px; }
.chapter-feature.has-art:nth-of-type(even) { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.chapter-feature.has-art:nth-of-type(even) .chapter-intro { order: 2; }
.chapter-feature.has-art:nth-of-type(even) .case-figures { order: 1; }
.case-screening { margin: 64px 0 0; }
.case-screening h3 { font-size: 18px; font-weight: 500; margin: 0 0 16px; }
.case-screening video { width: 100%; max-height: 80svh; background: var(--film-paper); }
.case-credits { border-top: 1px solid var(--rule); margin-top: 88px; padding: 48px 0; font-size: 16px; }
.case-credits h3 { font-size: 24px; }
.case-credits ul { margin: 0 0 24px; padding-left: 20px; }
.case-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.case-links a { min-height: 44px; display: flex; align-items: center; text-decoration: underline; }
.case-next { display: block; width: 100%; background: var(--plum); color: var(--paper); border: 0; padding: 48px var(--gutter); font: 500 clamp(20px,3vw,36px)/1.5 var(--face-body); text-align: left; }
/* Character dossier: entire model and specifications share the first spread. */
.case-article[data-kind=character] .case-opening { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); align-items: center; gap: 64px; }
.case-article[data-kind=character] .case-heading { display: block; padding: 0; }
.case-article[data-kind=character] .case-facts { margin-top: 40px; }
.case-article[data-kind=character] .case-cover img { padding: 24px; height: min(80svh,840px); }
/* Exhibition: card series stays a series, with wide scene interludes. */
.case-article[data-project=byeol] .case-cover img { object-fit: cover; height: auto; max-height: 75svh; }
.case-article[data-project=byeol] .figures-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
/* Films: full-width frames and sequences; the room uses detail pairs. */
.case-article[data-kind=motion] .case-cover img { height: auto; aspect-ratio: 16/9; object-fit: cover; }
.case-article[data-project=yokai] .chapter-grid .case-figures { grid-template-columns: repeat(2,minmax(0,1fr)); }
.case-article[data-project=musicvideo] .chapter-sequence .case-figures { gap: 16px; }
.case-article[data-project=musicvideo] .chapter-sequence .case-figures figure:nth-child(3n+1) { grid-column: 1/-1; }
/* Branding: larger comic/character spread, smaller goods alongside. */
.case-article[data-project=pukupuku] .case-opening { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); align-items: center; gap: 64px; }
.case-article[data-project=pukupuku] .case-heading { display: block; }
.case-article[data-project=pukupuku] .case-facts { margin-top: 32px; }
.case-article[data-project=pukupuku] .case-cover img { height: 560px; object-fit: cover; }
.case-article[data-project=pukupuku] .figures-collage { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: center; }
.case-article[data-project=pukupuku] .figures-collage figure:first-child { grid-row: span 2; }
/* Picture books: generous photographs and a quiet reading table. */
.case-article[data-project=seojeong] .case-cover { max-width: 1000px; margin-left: auto; }
.case-article[data-project=seojeong] .case-cover img { height: 72svh; object-fit: cover; }
.case-article[data-project=sunkeeper] .case-cover { max-width: 1040px; margin: auto; }
.case-article[data-project=sunkeeper] .case-cover img { height: auto; max-height: 65svh; }
#case-book { scroll-margin-top: 80px; }
.book-reader { position: relative; margin: 64px calc(-1 * var(--gutter)) 0; padding: 64px 72px 32px; background: var(--book-paper); }
.book-sheet { position: relative; max-width: 1160px; margin: auto; touch-action: pan-y; perspective: 1600px; }
.book-image { background: var(--transparent); border: 0; padding: 0; width: 100%; display: block; }
.book-image img { width: auto; height: auto; max-width: 100%; max-height: 74svh; margin: auto; box-shadow: 0 16px 40px var(--book-shadow); }
.book-sheet.is-spread::after { content: ''; position: absolute; width: 24px; left: calc(50% - 12px); top: 0; bottom: 0; background: linear-gradient(90deg,var(--transparent),var(--spine),var(--spine-light),var(--transparent)); pointer-events: none; }
.book-prev,.book-next { position: absolute; top: calc(50% - 28px); width: 48px; height: 56px; display: grid; place-items: center; border: 0; background: var(--transparent); color: var(--ink); }
.book-prev { left: 12px; }.book-next { right: 12px; }
.book-prev:hover:enabled,.book-next:hover:enabled { background: var(--paper); }
.book-prev svg,.book-next svg { width: 24px; height: 24px; }
.book-status { margin: 28px 0 0; color: var(--muted); text-align: center; font: 14px var(--face-body); font-variant-numeric: tabular-nums; }
#zoom { background: var(--plum); overflow: auto; }
#zoom-image { width: 100%; height: 100%; object-fit: contain; padding: 80px 20px 24px; }
#zoom-close { position: fixed; top: 20px; z-index: 2; min-height: 44px; padding: 8px 16px; border: 1px solid var(--caption-rule); background: var(--plum); color: var(--paper); font-size: 14px; }
#zoom-close { right: 20px; }
#zoom.zoom-native img { width: auto; height: auto; max-width: none; min-height: 100%; object-fit: none; }
.nojs { padding: 32px; color: var(--paper); }
.nojs a { text-decoration: underline; }
.reduced #invert-layer { display: none; }.reduced .film { clip-path: none; }.reduced .opening h1 { transform: none; }
@media (max-width: 900px) {
 #world-dots { display: none; }
 .world-info { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .world-summary p { display: none; }
 .case-heading,.case-overview,.case-credits,.chapter-intro,.chapter-feature.has-art,.chapter-feature.has-art:nth-of-type(even) { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .chapter-feature.has-art:nth-of-type(even) .chapter-intro,.chapter-feature.has-art:nth-of-type(even) .case-figures { order: initial; }
 .case-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .case-article[data-kind=character] .case-opening,.case-article[data-project=pukupuku] .case-opening { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; }
 .case-article[data-kind=character] .case-facts,.case-article[data-project=pukupuku] .case-facts { grid-template-columns: minmax(0,1fr); }
 .about-layout { gap: 32px; }
 .archive-row button { grid-template-columns: 32px minmax(0,1fr) 32px; }
 .row-type { display: none; }
}
@media (max-width: 600px) {
 :root { --gutter: 20px; --gap: 16px; --radius-media: 8px; }
 body { font-size: 16px; }
 .hud { padding: 8px 12px; }
 .brand { font-size: 18px; }.brand span { font-size: 11px; }
 .hud-work { display: none !important; }.hud button { font-size: 13px; }
 .opening h1 { bottom: 152px; }.hero-korean { font-size: clamp(52px,17vw,100px); }
 .opening-top { bottom: 84px; font-size: 15px; }
 .film-controls button,.enter { font-size: 13px; padding-inline: 12px; }
 .manifesto h2 { font-size: 12vw; }.manifesto-note { font-size: 16px; }.manifesto-pin { gap: 32px; }
 .motion-copy { grid-template-columns: minmax(0,1fr); gap: 24px; }.motion-study { padding-top: 56px; }
 .inline-film video { height: 64svh; }
 .worlds { height: 720svh; }.world-info { bottom: 92px; }.world-info h2 { font-size: clamp(28px,8vw,44px); }
 #world-tag { font-size: 13px; }.world-heading { top: 24px; }.world-summary button { padding: 8px 16px; font-size: 15px; }
 .world-bottom { bottom: 20px; }
 .archive,.about { padding-block: 64px; }
 .filters { gap: 8px; }.filters button { padding: 8px 12px; font-size: 14px; }
 .archive-row button { gap: 12px; padding-block: 24px; }.archive-row h3 { font-size: 24px; }
 .about-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }.profile-image { max-width: 240px; }.about-title h2 { margin: 20px 0 0; }
 .about-lead { font-size: 24px; margin-top: 0; }
 footer { padding-top: 64px; }.footer-bottom { flex-direction: column; gap: 12px; }
 .case-header { padding: 8px 16px; }.case-header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .case-header button { padding-inline: 12px; font-size: 14px; }
 .case-article { font-size: 17px; line-height: 1.85; }.case-opening { padding-top: 32px; }.case-heading { gap: 24px; padding-bottom: 24px; }
 .case-heading h2 { font-size: 32px; }.case-lead { font-size: 17px; margin-top: 16px; }
 .case-facts { font-size: 14px; gap: 16px; }.case-facts dt { font-size: 13px; }
 .case-article[data-kind=character] .case-opening,.case-article[data-project=pukupuku] .case-opening { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .case-article[data-kind=character] .case-facts,.case-article[data-project=pukupuku] .case-facts { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 24px; }
 .case-article[data-kind=character] .case-cover img { height: 64svh; padding: 16px; }
 .case-article[data-project=pukupuku] .case-cover img { height: auto; aspect-ratio: 4/3; }
 .case-article[data-project=seojeong] .case-cover img { height: auto; }
 .case-toc { margin-top: 16px; padding-block: 12px; gap: 0 20px; }
 .case-chapter { padding-top: 48px; }.case-chapter h3 { font-size: 24px; margin-bottom: 16px; }
 .chapter-intro { margin-bottom: 20px; }.case-prose p { margin-bottom: 20px; }
 .figures-comparison { padding: 24px 12px; }.figures-comparison img { height: 360px; }
 .figures-grid,.figures-cards,.case-article[data-project=byeol] .figures-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .figures-pair,.figures-sequence,.case-article[data-project=yokai] .chapter-grid .case-figures { grid-template-columns: minmax(0,1fr); }
 .case-article[data-project=pukupuku] .figures-collage { grid-template-columns: minmax(0,1fr); }
 .case-screening { margin-top: 40px; }.case-credits { margin-top: 48px; padding-block: 32px; }.case-next { padding: 32px 20px; }
 .book-reader { padding: 40px 36px 24px; margin-top: 40px; }.book-prev,.book-next { width: 32px; height: 48px; }.book-prev { left: 0; }.book-next { right: 0; }
 .book-image img { max-height: 70svh; }.book-status { margin-top: 24px; }
}
@media (max-height: 500px) and (orientation: landscape) {
 .opening h1 { bottom: 116px; }.hero-korean { font-size: 56px; }.opening-top { bottom: 68px; font-size: 14px; }.opening-top br { display: none; }
 .world-info { bottom: 80px; grid-template-columns: minmax(0,1fr) auto; }.world-info h2 { font-size: 28px; }.world-summary p { display: none; }
 .world-heading { top: 16px; }.world-bottom { bottom: 12px; }.world-summary button { font-size: 14px; }
 .book-reader { padding-top: 24px; }.book-image img { max-height: 62svh; }
}
@media (prefers-reduced-motion: reduce) {
 *,*::before,*::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
 #invert-layer { display: none; }.film { clip-path: none; }.opening h1 { transform: none; }
}

/* Stable ebook stage, with the spine attached to the printed spread. */
.book-sheet { height: min(74svh,760px); display: flex; align-items: center; justify-content: center; }
.book-image { position: relative; width: auto; max-width: 100%; max-height: 100%; }
.book-image img { max-height: min(74svh,760px); }
.book-sheet.is-spread::after { display: none; }
.book-sheet.is-spread .book-image::after { content: ''; position: absolute; width: 24px; left: calc(50% - 12px); top: 0; bottom: 0; background: linear-gradient(90deg,var(--transparent),var(--spine),var(--spine-light),var(--transparent)); pointer-events: none; }
#case :focus-visible,.archive :focus-visible,.about :focus-visible { outline-color: var(--plum); }
@media(max-width:600px) { .book-sheet { height: 70svh; }.book-image img { max-height: 70svh; } }
/* Book proportions keep the reading table close to the printed page. */
.book-reader { container-type: inline-size; }
.book-sheet { height: min(68svh,42cqw); }
.book-image { height: 100%; }
.book-image img { height: 100%; width: auto; max-height: 100%; object-fit: contain; }
@media(max-width:600px) { .book-sheet { height: 76cqw; }.book-image img { max-height: 100%; } }
@media(min-width:360px) and (max-width:600px) { .hud-work { display: inline-flex !important; font-size: 13px; }.hud>div { gap: 0; }.brand { font-size: 16px; }.brand span { font-size: 10px; }.hud button span { display: none; } }

/* Original poster characters and the two printed sides of the artist's card. */
:root { --poster-paper: #9385ba; --poster-ink: #15181c; --card-edge: #d9bcab; --card-shadow: rgba(32,21,34,.22); }
.poster-study { color: var(--poster-ink); background: var(--poster-paper); padding: 72px var(--gutter) 0; }
.poster-copy { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; max-width: var(--content); margin: auto; align-items: start; }
.poster-copy h2 { font: 600 clamp(32px,4.5vw,64px)/1.1 var(--face-title); margin: 0; max-width: 9em; overflow-wrap: break-word; }
.poster-copy p { max-width: 30rem; margin: 0; font-size: 18px; line-height: 1.85; }
.poster-scene { position: relative; height: clamp(420px,58vw,680px); max-width: var(--content); margin: 20px auto 0; overflow: clip; --scene-x: 0px; --scene-y: 0px; --scene-scroll: 0px; }
.poster-character { position: absolute; transform: translate3d(calc(var(--scene-x)*var(--depth)),calc((var(--scene-y) + var(--scene-scroll))*var(--depth)),0); }
.poster-character img { width: 100%; height: auto; user-select: none; }
.astronaut { width: 35%; max-width: 390px; left: 33%; top: 10%; z-index: 2; --depth: 1; }
.companion { width: 18%; max-width: 210px; --depth: -.6; }
.companion-a { left: 6%; top: 12%; rotate: -16deg; }.companion-b { right: 4%; top: 5%; rotate: 18deg; }
.companion-c { left: 15%; bottom: 6%; rotate: 12deg; }.companion-d { right: 12%; bottom: 7%; rotate: -12deg; }
.poster-character img { animation: poster-float 7s ease-in-out infinite alternate; animation-play-state: paused; }
.is-visible .poster-character img { animation-play-state: running; }.companion-b img,.companion-c img { animation-delay: -3.5s; }
@keyframes poster-float { from { transform: translateY(-6px) rotate(-2deg); } to { transform: translateY(6px) rotate(2deg); } }
.business-card-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 64px; max-width: var(--content); margin: 96px auto 0; padding-top: 64px; border-top: 1px solid var(--rule); align-items: center; }
.business-card-copy h3 { font-size: 28px; line-height: 1.4; margin: 0 0 16px; }.business-card-copy p { font-size: 17px; line-height: 1.8; }
#card-instructions { color: var(--muted); font-size: 14px; }
.business-card-stage { perspective: 1200px; padding: 32px 8px; }
.business-card { display: block; width: 100%; max-width: 640px; aspect-ratio: 240.2/155.3; position: relative; padding: 0; border: 0; background: var(--transparent); transform-style: preserve-3d; transform: rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg)); transition: transform .35s cubic-bezier(.22,1,.36,1); touch-action: pan-y; cursor: grab; }
.business-card.is-dragging { cursor: grabbing; transition: none; }
.card-rotation { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.22,1,.36,1); }
.is-flipped .card-rotation { transform: rotateY(180deg); }
.card-face { display: block; position: absolute; inset: 0; border-radius: var(--radius-media); background: var(--card-edge); box-shadow: 0 20px 36px var(--card-shadow); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-front { transform: translateZ(1px); }.card-back { transform: rotateY(180deg) translateZ(1px); }
.card-face img { width: 100%; height: 100%; object-fit: fill; }
.reduced .poster-character img { animation: none; }.reduced .card-rotation,.reduced .business-card { transition: none; }
@media(max-width:600px) {
 .poster-study { padding-top: 48px; }.poster-copy { grid-template-columns: minmax(0,1fr); gap: 20px; }.poster-copy p { font-size: 17px; }
 .poster-scene { height: 430px; margin-inline: -8px; }.astronaut { width: 58%; left: 22%; top: 22%; }.companion { width: 29%; }.companion-a { left: 0; top: 6%; }.companion-b { right: 0; top: 0; }.companion-c { left: 0; bottom: 7%; }.companion-d { right: 0; bottom: 1%; }
 .business-card-section { grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 48px; padding-top: 40px; }.business-card-stage { padding: 24px 0; }
}
@media(prefers-reduced-motion:reduce) { .poster-character img { animation: none; }.card-rotation,.business-card { transition: none; } }
.chapter-film { min-width: 0; grid-column: 1/-1; }
.chapter-film video { width: 100%; max-height: 80svh; object-fit: contain; background: var(--project-bg,var(--film-paper)); }
.chapter-screening .chapter-intro { max-width: var(--reading-width); }.figures-screening { display: block; }
.case-article[data-project=saeparan] .figures-comparison { grid-template-columns: repeat(3,minmax(0,1fr)); }
.case-article[data-project=saeparan] .figures-comparison img { height: auto; max-height: 640px; object-fit: contain; }
.case-article[data-project=saeparan] .figures-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media(max-width:600px) { .case-article[data-project=saeparan] .figures-comparison { gap: 8px; padding: 16px 4px; } }
.portrait-film { max-width: 460px; justify-self: center; }.portrait-film video { max-height: 74svh; }
.case-article[data-project=byeol] .figures-collage { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }.case-article[data-project=byeol] .figures-collage figure:first-child { grid-column: 1/-1; }
@media(max-width:600px) { .case-article[data-project=byeol] .figures-collage { gap: 16px; } }
/* Allow the original silhouettes to move without clipping at the scene edge. */
@media(max-width:600px) { .poster-scene { height: 480px; }.companion-a { top: 48px; }.companion-b { top: 32px; }.companion-c,.companion-d { bottom: 48px; } }
.book-sheet { touch-action: pan-y; }.book-image img { user-select: none; -webkit-user-drag: none; }
.companion-e { width: 13%; left: 0; top: 52%; rotate: -10deg; }.companion-f { width: 12%; left: 28%; top: 4%; rotate: 12deg; }.companion-g { width: 12%; right: 0; top: 43%; rotate: -14deg; }
@media(max-width:600px) {
 .poster-scene { height: 540px; }.astronaut { top: 28%; }.companion { width: 25%; }.companion-a { left: 1%; top: 64px; }.companion-b { right: 0; top: 64px; }
 .companion-e { width: 20%; left: 0; top: 48%; }.companion-f { width: 20%; left: 39%; top: 32px; }.companion-g { width: 20%; right: 0; top: 48%; }
}
/* Intro artwork and tactile printed card, November 2026. */
:root { --card-glint: #ffffffb8; --card-glint-soft: #ffffff30; }
.profile-link { padding-inline: 8px; }
#about { scroll-margin-top: 64px; }
.manifesto.poster-study { padding: 0; color: var(--paper); background: var(--plum); }
.manifesto-pin { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 32px; isolation: isolate; overflow: clip; }
.manifesto-copy { position: relative; z-index: 1; }
.manifesto h2 { font-size: clamp(40px,5.3vw,76px); }
.manifesto-note { margin-top: 32px; max-width: 28em; }
.manifesto .poster-scene { width: 100%; height: min(70svh,600px); margin: 0; z-index: 3; }
.manifesto #invert-layer { position: absolute; z-index: 2; }
.manifesto .astronaut { width: 44%; left: 28%; top: 26%; }
.manifesto .companion { width: 23%; }
.manifesto .companion-e,.manifesto .companion-f,.manifesto .companion-g { width: 17%; }
.manifesto .companion-c,.manifesto .companion-d { bottom: 12%; }
.motion-study { padding-top: 0; }
.business-card-section { display: block; border: 0; padding-top: 0; margin-top: 72px; }
.business-card-stage { perspective: 850px; max-width: 800px; margin: auto; padding: 64px 64px; }
.business-card { margin: auto; transition: none; }
.business-card:active:enabled { transform: rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg)); }
.card-face { overflow: hidden; }
.card-face::after { content: ''; position: absolute; inset: -60%; pointer-events: none; background: linear-gradient(115deg,var(--transparent) 34%,var(--card-glint-soft) 43%,var(--card-glint) 49%,var(--card-glint-soft) 55%,var(--transparent) 64%); opacity: var(--shine-opacity,.18); transform: translate(var(--shine-x,0%),var(--shine-y,0%)); }
.card-back::after { transform: translate(calc(-1 * var(--shine-x,0%)),var(--shine-y,0%)); }
.contact-email { display: inline-block; font-size: clamp(18px,2.5vw,28px); padding-block: 12px; text-decoration: underline; overflow-wrap: anywhere; }
.reduced .card-face::after { display: none; }
@media(max-width:600px) {
 .manifesto-pin { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: 0; padding: 28px var(--gutter) 8px; }
 .manifesto h2 { font-size: clamp(30px,9vw,44px); line-height: 1.14; }
 .manifesto-note { margin-top: 16px; font-size: 15px; line-height: 1.65; }
 .manifesto .poster-scene { height: 100%; min-height: 240px; max-width: 390px; margin: auto; }
 .manifesto .astronaut { width: 39%; left: 31%; top: 22%; }
 .manifesto .companion { width: 20%; }
 .manifesto .companion-a,.manifesto .companion-b { top: 16%; }
 .manifesto .companion-c,.manifesto .companion-d { bottom: 14%; }
 .manifesto .companion-f { top: 5%; }
 .business-card-section { margin-top: 36px; }
 .business-card-stage { padding: 32px 20px; perspective: 650px; }
 .profile-link { font-size: 13px; padding-inline: 8px; }
 .about-title h2 { font-size: clamp(36px,11vw,56px); }
}
@media(prefers-reduced-motion:reduce) { .card-face::after { display: none; } }
/* Particles is a full-viewport background between introduction and projects. */
.motion-study { height: 170svh; padding: 0; background: var(--plum); --particles-reveal: 0; --particles-zoom: 1; }
.motion-pin { position: sticky; top: 64px; height: calc(100svh - 64px); padding: 8px; }
.motion-study .inline-film { position: relative; height: 100%; margin: 0; border-radius: var(--radius-media); overflow: clip; isolation: isolate; background: var(--film-paper); }
.motion-study .inline-film video { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--particles-zoom)); }
.particles-inversion { position: absolute; inset: 0; background: var(--invert-neutral); mix-blend-mode: difference; clip-path: inset(calc((1 - var(--particles-reveal))*50%) 0); pointer-events: none; }
.motion-study .inline-film button { z-index: 2; }
.reduced .motion-study { height: calc(100svh - 64px); }
.reduced .motion-pin { position: relative; top: 0; }
.reduced .particles-inversion { display: none; }
@media(prefers-reduced-motion:reduce) {
 .motion-study { height: calc(100svh - 64px); }
 .motion-pin { position: relative; top: 0; }
 .particles-inversion { display: none; }
}
/* Original characters as a compact composition; unframed Particles backdrop. */
.manifesto-pin { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 0; }
.manifesto h2 { font-size: clamp(44px,6.2vw,88px); }
.manifesto .poster-scene { height: min(78svh,700px); overflow: visible; --scene-turn: 0deg; }
.manifesto .poster-character { rotate: calc(var(--rest-angle,0deg) + var(--scene-turn)*var(--depth)); }
.manifesto .astronaut { width: 62%; max-width: none; left: 19%; top: 21%; --depth: 1; }
.manifesto .companion { width: 24%; max-width: none; --depth: -.5; }
.manifesto .companion-a { left: 0; top: 10%; --rest-angle: -18deg; }
.manifesto .companion-b { right: 0; top: 13%; --rest-angle: 20deg; }
.manifesto .companion-c { left: 3%; bottom: 10%; --rest-angle: 12deg; }
.manifesto .companion-d { right: 0; bottom: 9%; --rest-angle: -12deg; }
.manifesto .companion-e { width: 19%; left: -3%; top: 44%; --rest-angle: -15deg; }
.manifesto .companion-f { width: 19%; left: 42%; top: 2%; --rest-angle: 14deg; }
.manifesto .companion-g { width: 19%; right: -2%; top: 47%; --rest-angle: -18deg; }
.manifesto .poster-character img { animation-name: character-drift; animation-duration: 4.8s; }
@keyframes character-drift { from { transform: translateY(-12px) rotate(-5deg); } to { transform: translateY(12px) rotate(5deg); } }
.motion-pin { padding: 0; }
.motion-study .inline-film,.motion-study .inline-film video { border-radius: 0; }
.about-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); }
.about-story .about-lead { margin: 0 0 24px; font-size: clamp(24px,3vw,40px); font-weight: 600; line-height: 1.5; }
#contact { background: var(--book-paper); color: var(--ink); padding-top: 64px; }
.contact-layout { border-top: 1px solid var(--rule); padding-top: 56px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 64px; }
.contact-layout h2 { margin: 0; font: 600 clamp(40px,6.5vw,88px)/1.05 var(--face-latin); letter-spacing: -.04em; }
.contact-links { display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }
.contact-links a { display: flex; flex-direction: column; gap: 8px; padding: 0; text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.contact-kind { font-size: 14px; line-height: 1.5; color: var(--muted); }
.contact-links a>span:last-child { font-size: clamp(20px,2.6vw,36px); line-height: 1.4; letter-spacing: -.025em; }
.contact-links a:hover>span:last-child { text-decoration: underline; text-underline-offset: 6px; }
#contact :focus-visible { outline-color: var(--ink); }
#contact .footer-bottom { margin-top: 88px; padding-top: 24px; border-top: 1px solid var(--rule); align-items: center; }
@media(max-width:600px) {
 .manifesto-pin { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; align-content: center; padding: 24px var(--gutter); gap: 12px; }
 .manifesto h2 { font-size: clamp(36px,10.8vw,52px); line-height: 1.1; }
 .manifesto .poster-scene { width: 100%; height: min(106vw,49svh); min-height: 0; max-width: 420px; margin: 0 auto; }
 .manifesto .astronaut { width: 59%; left: 21%; top: 18%; }
 .manifesto .companion { width: 24%; }
 .manifesto .companion-a { left: 0; top: 6%; }
 .manifesto .companion-b { right: 0; top: 8%; }
 .manifesto .companion-c { left: 3%; bottom: 3%; }
 .manifesto .companion-d { right: 1%; bottom: 3%; }
 .manifesto .companion-e { width: 19%; left: -2%; top: 42%; }
 .manifesto .companion-f { width: 19%; left: 40%; top: -2%; }
 .manifesto .companion-g { width: 19%; right: -2%; top: 45%; }
 .about-layout { grid-template-columns: minmax(0,1fr); }
 .about-story .about-lead { font-size: clamp(22px,6vw,28px); }
 .contact-layout { grid-template-columns: minmax(0,1fr); gap: 32px; padding-top: 32px; }
 #contact { padding-top: 16px; }
 .contact-links { gap: 24px; }
 #contact .footer-bottom { margin-top: 48px; }
}
.reduced .manifesto .poster-character { rotate: var(--rest-angle,0deg); }
.reduced .manifesto .poster-character img { animation: none; }
@media(prefers-reduced-motion:reduce) { .manifesto .poster-character img { animation: none; }.manifesto .poster-character { rotate: var(--rest-angle,0deg); } }

@media(max-width:600px) { .manifesto .companion-c,.manifesto .companion-d { bottom: 12%; } #contact .footer-bottom { flex-direction: row; text-align: left; } }
/* Shared portfolio typography and project-specific editorial spreads. */
.manifesto .poster-scene { filter: invert(calc(1 - var(--intro-inversion,0))); }
.reduced .manifesto .poster-scene { filter: none; }
h1,h2,h3,p,dd,li,a,button { word-break: keep-all; overflow-wrap: normal; }
.title-line { display: block; }
#case-title:has(.title-line) { font-size: clamp(26px,4.2vw,60px); }
.about,#contact { background: var(--plum); color: var(--paper); }
.about { padding-bottom: 48px; }
.about-story .about-lead { font: 400 clamp(26px,3.6vw,48px)/1.4 var(--face-title); }
.about-story dt,.contact-kind { color: var(--paper); opacity: .7; }
.about-story dd { max-width: 36em; }
.contact-layout h2 { font: 400 clamp(48px,8vw,112px)/1.1 var(--face-title); }
#contact .contact-layout,#contact .footer-bottom { border-color: var(--caption-rule); }
#contact :focus-visible,.about :focus-visible { outline-color: var(--signal); }
#case[data-project=byeol] { --case-paper: var(--byeol-paper); --case-ink: var(--byeol-ink); --case-accent: var(--byeol-accent); --case-panel: var(--byeol-panel); --case-rule: var(--byeol-rule); }
#case[data-project=pyaco] { --case-paper: var(--pyaco-paper); --case-ink: var(--pyaco-ink); --case-accent: var(--pyaco-accent); --case-panel: var(--pyaco-panel); --case-rule: var(--pyaco-rule); }
#case[data-project=pukupuku] { --case-paper: var(--pukupuku-paper); --case-ink: var(--pukupuku-ink); --case-accent: var(--pukupuku-accent); --case-panel: var(--pukupuku-panel); --case-rule: var(--pukupuku-rule); }
#case { background: var(--case-paper); color: var(--case-ink); }
.case-header { background: var(--case-paper); color: var(--case-ink); border-color: var(--case-rule); }
.case-article { --reading-width: 38rem; }
.case-heading h2 { font-size: clamp(32px,5vw,72px); word-break: keep-all; overflow-wrap: normal; }
.case-lead,.case-prose p,.case-facts dd,.case-chapter h3,.case-links a { word-break: keep-all; overflow-wrap: normal; }
.case-facts dt { color: inherit; opacity: .65; }
.case-cover button { background: var(--case-panel,var(--project-bg)); }
.case-toc { border-color: var(--case-rule); gap: 8px 24px; }
.case-chapter { padding-top: 112px; }
.chapter-intro { align-items: start; margin-bottom: 40px; }
.case-chapter h3 { font-size: clamp(26px,3.2vw,44px); line-height: 1.35; }
.case-prose { font-size: 18px; line-height: 1.9; }
.case-figures[data-count] { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; padding: 0; background: none; }
.case-figures[data-count]>figure { flex: 1 1 calc(33.333% - 24px); min-width: 0; }
.case-figures[data-count='1']>figure { flex-basis: 100%; }
.case-figures[data-count='2']>figure,.case-figures[data-count='4']>figure { flex-basis: calc(50% - 24px); }
.case-figures[data-count]>figure>button { height: 100%; background: var(--case-panel,var(--project-bg)); display: grid; place-items: center; }
.case-figures[data-count] img { width: 100%; height: clamp(240px,30vw,440px); max-height: none; object-fit: contain; }
.case-figures[data-count='1'] img { height: auto; max-height: 850px; }
.case-figures[data-count]>.chapter-film { flex-basis: 100%; }
.case-figures[data-count]>.portrait-film { flex-basis: min(100%,460px); }
.chapter-feature.has-art,.chapter-feature.has-art:nth-of-type(even) { display: block; }
.chapter-feature.has-art .chapter-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); margin-bottom: 40px; }
.chapter-feature.has-art .case-prose { font-size: 18px; }
.chapter-feature.has-art .case-figures { order: initial; }
.case-credits { border-color: var(--case-rule); }
.collection-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 32px; align-items: start; }
.collection-stage { background: var(--case-panel,var(--project-bg)); border-radius: var(--radius-media); position: relative; min-width: 0; overflow: clip; }
.collection-stage>img { width: 100%; height: min(70svh,680px); object-fit: contain; }
.collection-stage>video { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: var(--film-paper); }
.collection-cards .collection-stage>video { height: min(75svh,780px); aspect-ratio: 3/4; }
.collection-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-height: min(75svh,780px); overflow-y: auto; padding: 4px; scrollbar-color: var(--case-accent,var(--ink)) var(--case-panel,var(--paper)); }
.collection-picker button { background: var(--transparent); border: 2px solid var(--transparent); padding: 4px; border-radius: var(--radius-media); min-width: 0; text-align: left; font-size: 14px; }
.collection-picker button[aria-pressed=true] { border-color: var(--case-accent,var(--ink)); }
.collection-picker img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--case-panel,var(--project-bg)); }
.collection-picker span { display: block; padding: 8px 4px 0; }
.collection-current { margin: 16px 0 0; font-size: 16px; }
.collection-flip,.live-model-tabs button,.live-expression-buttons button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--case-rule,var(--rule)); background: var(--case-paper,var(--paper)); color: var(--case-ink,var(--ink)); border-radius: 4px; }
.collection-flip { position: absolute; right: 16px; bottom: 16px; }
.collection-films .collection-layout { grid-template-columns: minmax(0,1fr); }
.collection-films .collection-picker { display: flex; max-height: none; overflow-x: auto; }
.collection-films .collection-picker button { flex: 0 0 180px; }
.collection-films .collection-picker img { aspect-ratio: 16/9; object-fit: cover; }
.live-model-tabs,.live-expression-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.live-model-tabs button[aria-pressed=true],.live-expression-buttons button[aria-pressed=true] { background: var(--case-ink,var(--ink)); color: var(--case-paper,var(--paper)); }
.live-model-stage { height: min(78svh,780px); min-height: 400px; position: relative; background: var(--case-panel,var(--project-bg)); border-radius: var(--radius-media); overflow: clip; touch-action: pan-y; }
.live-model-stage canvas { display: block; width: 100%; height: 100%; }
.live-model-status { position: absolute; inset: 0; display: grid; place-content: center; padding: 32px; }
.live-model-help { font-size: 14px; line-height: 1.8; }
.live-expression-buttons kbd { font: inherit; margin-right: 8px; opacity: .65; }
@media(max-width:700px) {
 .case-heading h2 { font-size: clamp(30px,8vw,48px); }
 .case-chapter { padding-top: 64px; }
 .chapter-intro,.chapter-feature.has-art .chapter-intro { grid-template-columns: minmax(0,1fr); gap: 8px; margin-bottom: 24px; }
 .case-chapter h3 { margin-bottom: 12px; }
 .case-prose,.chapter-feature.has-art .case-prose { font-size: 17px; }
 .case-figures[data-count] { gap: 12px; }
 .case-figures[data-count]>figure { flex-basis: calc(50% - 12px); }
 .case-figures[data-count='3']>figure:last-child { flex-basis: 100%; }
 .case-figures[data-count] img { height: 220px; }
 .case-figures[data-count='1'] img { height: auto; }
 .collection-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .collection-stage>img { height: min(65svh,520px); }
 .collection-picker { grid-template-columns: repeat(4,minmax(0,1fr)); max-height: 280px; gap: 8px; }
 .collection-picker span { font-size: 12px; padding-inline: 0; }
 .collection-cards .collection-stage>video { height: 60svh; }
 .collection-films .collection-picker button { flex-basis: 140px; }
 .live-model-stage { height: 65svh; min-height: 320px; }
 .contact-layout h2 { font-size: 48px; }
 .contact-email>span:last-child { overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion:reduce) { .manifesto .poster-scene { filter: none; } }
.case-article[data-project=pyaco] .case-opening { display: block; }
.case-article[data-project=pyaco] .case-heading { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); padding-bottom: 40px; }
.case-article[data-project=pyaco] .case-facts { margin: 0; }
.case-article[data-project=pyaco] .case-cover img { height: auto; padding: 0; max-height: none; }
.case-chapter>.collection { padding-top: 0; }
.case-chapter>.collection>.chapter-intro { display: none; }
@media(max-width:700px) { .case-article[data-project=pyaco] .case-heading { grid-template-columns: minmax(0,1fr); gap: 24px; } }
.case-chapter>.live-model-section { padding-top: 32px; }
.case-chapter>.live-model-section>.chapter-intro { display: none; }
.collection-faces { display: flex; gap: 8px; padding: 12px; justify-content: center; flex-wrap: wrap; }
.collection-faces button { background: var(--case-paper); color: var(--case-ink); min-height: 44px; border: 1px solid var(--case-rule); padding: 8px 12px; border-radius: 4px; }
.collection-faces button[aria-pressed=true] { background: var(--case-ink); color: var(--case-paper); }
.case-facts>div:only-child { grid-column: 1/-1; }
/* Main navigation: author link replaces the removed profile control. */
@media(max-width:600px) { .hud .hud-work { display:inline-flex !important; font-size:13px; margin-inline-start:auto; margin-inline-end:8px; white-space:nowrap; } }


/* Desktop menu opens from the header control while the page stays readable. */
@media(min-width:901px) {
 body:has(#index-dialog[open]):not(:has(dialog[open]:not(#index-dialog))) { overflow-y:auto; }
 #index-dialog { inset:var(--menu-top,72px) var(--menu-right,var(--gutter)) auto auto; width:270px; height:auto; max-height:calc(100dvh - 96px); padding:24px; border-radius:var(--radius-media); box-shadow:0 14px 36px var(--shade); z-index:60; }
 #index-dialog[open] { animation:menu-unfold .28s cubic-bezier(.22,1,.36,1); transform-origin:top right; }
 #index-dialog nav { margin-top:20px; }
 #index-dialog nav a { padding:12px 0; font:400 18px/1.5 var(--face-body); }
 #index-dialog #index-close { top:12px; right:12px; min-height:36px; padding:4px 8px; font-size:12px; border:0; }
 #index-dialog p { display:none; }
}
@keyframes menu-unfold { from { clip-path:inset(0 0 100%); transform:translateY(-6px); } to { clip-path:inset(0); transform:translateY(0); } }
.world-info h2 .title-original,.world-info h2 .title-translation { display:block; }
.world-info h2 .title-translation { font:500 .42em/1.6 var(--face-body); letter-spacing:0; margin-top:8px; }
@media(prefers-reduced-motion:reduce) {
 #index-dialog[open] { animation:none; }
}


/* Menu links carry keyboard focus as an underline, without a yellow frame. */
#index-dialog:focus { outline:none; }
#index-dialog nav { margin-top:0; }
#index-dialog nav a:focus-visible { outline:none; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; }
#index-close { display:grid; place-items:center; min-width:44px; min-height:44px; }
#index-close svg { display:block; fill:none; stroke:currentColor; stroke-width:1.5; }
#index-close:focus-visible { outline:2px solid currentColor; }
@media(min-width:901px) { #index-dialog #index-close { display:none; } #index-dialog nav { margin-top:0; } }