@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600&display=swap');

:root {
  --bg: #F1F1F3;
  --paper: #FAFAFB;
  --ink: #1D1D1F;
  --ink-2: #555861; /* #7C808A until 2026-10-02: lost on some photos; now the timeline's date grey */
  --hairline: rgba(29,29,31,.14);
  --vellum: rgba(250,250,251,.72);
  --placeholder: #D9DBE0;
  --font-serif-en: "Gelasio", Georgia, serif;
  --font-serif-ko: "Song Myung", serif;
  --font-mono: "Nanum Gothic Coding", "Courier New", monospace;
  --font-body-ko: "Pretendard", "Apple SD Gothic Neo", sans-serif;
  --nav-height: 56px;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); scroll-behavior: auto; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: var(--font-body-ko); }
main { position: relative; z-index: 1; }
/* ---- vellum ground: photo → frosted paper → grain (the moodboard) ---- */
.ground { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.ground-photo { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; object-fit: cover; opacity: 0; filter: blur(12px) saturate(1.2) contrast(.97) brightness(1.02); transform: translateZ(0); transition: opacity 2.6s cubic-bezier(.45, 0, .25, 1); will-change: opacity; } /* 1.6s ease until 2026-10-02: the change felt abrupt */
.ground-photo.is-on { opacity: 1; }
.ground-vellum { position: absolute; inset: 0; z-index: 5; background: rgba(241,241,243,.46); } /* above the three photo layers */
.ground-vellum::before { content: ''; position: absolute; inset: 0; opacity: .11; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.ground-vellum::after { content: ''; position: absolute; inset: 0; background: radial-gradient(130% 80% at 50% 12%, rgba(255,255,255,.34), rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(29,29,31,0) 70%, rgba(29,29,31,.05)); }
@media (max-width: 768px) { .ground-photo { filter: blur(10px) saturate(1.2) contrast(.97) brightness(1.02); transition: none; } }
body.detail-open { overflow: hidden; }
body.is-loading { user-select: none; -webkit-user-select: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.site-grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .055; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }

.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; min-height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 28px; font: 12px/1 var(--font-mono); letter-spacing: .08em; transition: border-color .25s ease, background-color .25s ease; }
.site-nav.is-scrolled { border-bottom: 1px solid var(--hairline); background: var(--vellum); backdrop-filter: blur(14px) saturate(.9); }

.nav-wordmark, .nav-actions, .nav-link, .nav-toggle { font: inherit; letter-spacing: inherit; text-transform: uppercase; }
.nav-wordmark { white-space: nowrap; }
.nav-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }
.nav-link, .nav-toggle { border: 0; padding: 5px 0; background: transparent; color: var(--ink); cursor: pointer; }
.nav-link:hover, .nav-toggle:hover { color: var(--ink-2); }
/* a wider pause between the section links and the two toggles (연서, 2026-10-02) */
.nav-link + .nav-toggle { margin-left: 30px; }
/* the two toggles are settings, not sections: a softer grey until hovered */
.nav-toggle { color: #61656E; }
.nav-toggle:hover { color: var(--ink); }
/* phones: 'best viewed on a computer', bottom centre, fades in and out */
.desktop-note { position: fixed; left: 50%; bottom: 16px; z-index: 70; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); padding: 9px 10px 9px 14px; border: 1px solid var(--hairline); background: rgba(250,250,251,.92); backdrop-filter: blur(10px); color: var(--ink); font: 11px/1.5 var(--font-mono); letter-spacing: .02em; transform: translate(-50%, 8px); opacity: 0; transition: opacity .5s ease, transform .5s ease; }
.desktop-note.is-shown { opacity: 1; transform: translate(-50%, 0); }
.desktop-note button { flex: none; border: 0; padding: 0 4px; background: transparent; color: var(--ink-2); font: 16px/1 var(--font-mono); cursor: pointer; }
.nav-divider { color: var(--ink-2); }
/* narrow desktop windows (split screen, 601 to 1000px): the nav stays on one line (2026-10-03) */
@media (max-width: 1000px) and (min-width: 601px) and (hover: hover) {
  .site-nav { gap: 14px; padding: 0 18px; font-size: 11px; letter-spacing: .04em; }
  .nav-actions { gap: 9px; flex-wrap: nowrap; }
  .nav-link + .nav-toggle { margin-left: 12px; }
}
@media (max-width: 760px) and (min-width: 601px) and (hover: hover) {
  .nav-divider { display: none; }
  .site-nav { font-size: 10px; letter-spacing: .02em; }
}

.loader { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: transparent; touch-action: none; user-select: none; }
/* the sheet is translucent paper over the ground photo — the moodboard "photo under vellum, torn to reveal" */
.loader { transition: opacity .8s ease; }
.loader.is-done { opacity: 0; pointer-events: none; touch-action: auto; }
.loader-scene, .loader-sheet-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader-scene { display: grid; place-items: center; }
.loader-sheet-svg { overflow: visible; }
.loader-sheet-panel { width: 100%; height: 100%; background: var(--vellum); backdrop-filter: blur(18px) saturate(.9); }
/* the sharp photo seen through the hole (same framing as the blurred ground behind the paper) */
.loader-reveal-wrap { position: absolute; inset: 0; overflow: hidden; clip-path: url(#loader-hole-clip); }
.loader-reveal { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; object-fit: cover; filter: saturate(1.05) contrast(1.02); }
/* torn edge: paper shadow inside the hole, then the fibrous white rim of the torn sheet */
.loader-tear-shadow { fill: none; stroke: rgba(29,29,31,.55); stroke-width: 26; filter: url(#loader-soft); transform: translate(4px, 7px); }
.loader-tear-rim-soft { fill: none; stroke: rgba(255,255,255,.38); stroke-width: 18; stroke-linejoin: round; filter: url(#loader-fiber); }
.loader-tear-rim { fill: none; stroke: rgba(255,255,255,.92); stroke-width: 9; stroke-linejoin: round; filter: url(#loader-fiber); }
.loader-tear-rim-fine { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 3.5; stroke-linejoin: round; filter: url(#loader-fiber-fine); }
.loader-tear-edge { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1; stroke-linejoin: round; }
.loader-caption { position: absolute; left: 50%; top: 50%; z-index: 3; margin: 0; transform: translate(-50%,-50%); color: var(--ink); font: 12px/1 var(--font-mono); letter-spacing: .1em; transition: opacity .2s ease; }
.loader.is-tearing .loader-caption, .loader.is-open .loader-caption { opacity: 0; }

main { overflow: clip; }
.site-section { position: relative; min-height: 100vh; padding: calc(var(--nav-height) + 24px) 28px 40px; }
/* no alternating bands: the sections share one continuous ground */
.section-shell { max-width: 1440px; min-height: calc(100vh - var(--nav-height) - 116px); margin: 0 auto; display: flex; flex-direction: column; }
.section-heading { display: none; } /* retired: sections run into each other without titles, rules or counters */
.section-heading__index { color: var(--ink-2); }
.section-empty { flex: 1; display: grid; place-items: center; padding: 12vh 0; color: var(--ink-2); text-align: center; }
.section-empty__mark { width: min(52vw,360px); aspect-ratio: 1.45; display: grid; place-items: center; border: 1px dashed var(--ink-2); font: 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.section-empty__note { max-width: 34ch; margin: 18px auto 0; font: 14px/1.7 var(--font-body-ko); }

#intro { min-height: 100vh; padding: 0; overflow: visible; background: transparent; }
.intro-stage { position: relative; min-height: 100vh; overflow: hidden; }
.intro-visual-host { position: absolute; inset: 0; z-index: 0; }
.intro-frame { position: relative; z-index: 2; min-height: 100vh; padding: calc(var(--nav-height) + 24px) 28px 52px; }

.intro-frame > .section-heading { max-width: 1440px; margin: 0 auto; }
.intro-copy { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; min-height: 360px; transform: translateY(-54%); font: clamp(19px, 1.9vw, 27px)/1.45 var(--font-mono); letter-spacing: .06em; }
.intro-lines { position: relative; z-index: 5; user-select: none; -webkit-user-select: none; width: min(54vw, 680px); margin: 0 auto; padding: 16px 18px; background: transparent; }
.intro-punct { margin-left: -.2em; font-family: "Nanum Gothic Coding", "Courier New", monospace; }
.intro-line { height: 1.55em; white-space: nowrap; text-align: center; opacity: 0; transition: opacity .2s ease; }
.intro-lines.is-final .intro-line { transition: opacity 1.5s ease; }
.intro-lines.is-final .intro-line[data-row="2"] { transition-delay: .12s; }
.intro-lines.is-final .intro-line[data-row="3"] { transition-delay: .3s; }
.intro-lines.is-final .intro-line[data-row="4"] { transition-delay: .42s; }
.intro-lines.is-final .intro-line[data-row="5"] { transition-delay: .6s; }
.intro-lines.is-final .intro-line[data-row="6"] { transition-delay: .72s; }
.intro-line--solo { position: absolute; left: 18px; right: 18px; top: 50%; height: auto; transform: translateY(-50%); pointer-events: none; }
.intro-lines.is-final .intro-line[data-row="3"], .intro-lines.is-final .intro-line[data-row="5"] { margin-top: 1.55em; }
/* ---- hand-drawn notes (연서's strokes) ---- */
.hand-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.hand-group { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility 0s linear .12s; }
.hand-group.is-on { opacity: 1; visibility: visible; transition: opacity .12s ease; }
.hand-group.is-on .hand-hot { pointer-events: auto; }
.hand-img { position: absolute; display: block; user-select: none; pointer-events: none; }
.hand-svg { overflow: visible; color: var(--ink); }
.hand-svg { filter: url("#hand-rough"); }
.hand-svg path { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hand-svg .hand-thin { stroke-width: 1.2; opacity: .85; }
/* the handwritten sub-notes: a thin handwriting face, and each piece writes itself in when the note opens */
.hand-svg text { font-family: "Gaegu", "Nanum Pen Script", "Patrick Hand", cursive; font-weight: 300; fill: currentColor; stroke: none; letter-spacing: .02em; }
.hand-svg .hand-faint { opacity: .58; }
.hand-sub path { vector-effect: none; stroke-width: 1.7; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s ease .08s; }
.hand-sub circle { fill: currentColor; stroke: none; }
.hand-sub text, .hand-sub .hand-dots { opacity: 0; clip-path: inset(-30% 100% -30% -6%); transition: opacity .2s ease, clip-path .42s ease-out; transition-delay: calc(.22s + var(--i, 0) * .07s); }
.hand-group.is-on .hand-sub path { stroke-dashoffset: 0; }
.hand-group.is-on .hand-sub text, .hand-group.is-on .hand-sub .hand-dots { opacity: 1; clip-path: inset(-30% -6% -30% -6%); }
.hand-group:not(.is-on) .hand-sub text, .hand-group:not(.is-on) .hand-sub .hand-dots, .hand-group:not(.is-on) .hand-sub path { transition-delay: 0s; transition-duration: 0s; }
.hand-hot { position: absolute; display: block; cursor: pointer; }
/* the label(s) of an open note blink softly and slowly: they are links to that filter of the archive */
.hand-group.is-on:not(.is-ghost) :is(.hand-insight, .hand-ai, .hand-fc) { animation: hand-blink 2s ease-in-out .35s infinite; }
.hand-group.is-on:has(.hand-hot:hover) :is(.hand-insight, .hand-ai, .hand-fc) { animation: none; opacity: 1; }
@keyframes hand-blink { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
/* the first look: every note at once, faint, rippling like water, then gone */
.hand-group.is-ghost { visibility: visible; animation: hand-ghost 1.7s ease-in-out both; will-change: opacity, transform; transform-origin: 50% 50%; }
/* thin pen in the glimpse: a blur on the whole layer had spread every line and letter, so they read bold */
.hand-group.is-ghost .hand-svg path { stroke-width: 1.3; }
.hand-group.is-ghost .hand-sub path { stroke-width: 1.1; }
.hand-group.is-ghost .hand-svg .hand-thin { stroke-width: .8; }
.hand-group--visual.is-ghost { animation-delay: .05s; }
.hand-group--design.is-ghost { animation-delay: .1s; }
.hand-group.is-ghost .hand-svg { filter: url("#hand-wave"); }
.hand-group.is-ghost .hand-hot { pointer-events: none; }
/* the first look: faint, one slow sway, then gone (2026-10-02) */
@keyframes hand-ghost {
  0% { opacity: 0; transform: translateY(8px) skewX(1deg) scaleY(.99); }
  45% { opacity: .32; transform: translateY(0) skewX(-.8deg) scaleY(1.008); }
  100% { opacity: 0; transform: translateY(-6px) skewX(0) scaleY(1); }
}


.hand-hot:hover { outline: 0; }
.intro-frame.is-hand-insight .intro-keyword[data-keyword="insight"] { color: transparent; text-shadow: none; }
/* a narrow desktop window has no notes; phones and tablets get them, opening by themselves (2026-10-17) */
@media (max-width: 760px) and (hover: hover) {
  .hand-layer { display: none; }
  .intro-lines.is-final .intro-keyword { text-decoration: none; animation: none; cursor: default; }
}
.hand-layer.is-phone .hand-desk, .hand-layer:not(.is-phone) .hand-phone { display: none; }
.hand-layer.is-auto .hand-group { transition: opacity .55s ease, visibility 0s linear .55s; }
.hand-layer.is-auto .hand-group.is-on { transition: opacity .55s ease; }
.hand-svg.hand-phone { overflow: visible; }
.intro-line.is-visible { opacity: 1; }
.intro-line.is-active::after { content: '_'; display: inline-block; margin-left: .08em; animation: cursor-blink .72s steps(1,end) infinite; }
.intro-keyword { display: inline; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
/* hover: a soft white neon halo around the letters instead of an underline */
.intro-keyword { transition: text-shadow .25s ease, text-decoration-color .4s ease; }
/* the cue: a faint dotted underline that stays, so the hint under the paragraph always has something to point at */
.intro-lines.is-final .intro-keyword { text-decoration: underline dotted rgba(29,29,31,.45); text-decoration-thickness: 1px; text-underline-offset: .26em; }
.intro-frame.is-hand-insight .intro-keyword[data-keyword="insight"] { text-decoration-color: transparent; }
.intro-keyword:hover, .intro-keyword:focus-visible, .intro-keyword.is-lit { text-decoration: none; text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 0 10px #fff, 0 0 16px #fff, 0 0 22px rgba(29,29,31,.55), 0 0 30px rgba(29,29,31,.35); }
/* above the vellum block so a line reaches the word itself, not the block edge */
.intro-map-svg { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.intro-map-svg.is-visible { opacity: 1; }
.intro-map-svg svg { width: 100%; height: 100%; overflow: visible; }
.mindmap-line { stroke: var(--ink-2); stroke-width: 1; transition: stroke-dashoffset .4s ease; }
/* Columns mode (narrow desktop / touch): the whole map sits under the text block, all branches at once. */
.mindmap-panel { position: relative; z-index: 4; display: none; width: min(92vw, 1100px); max-height: 36vh; margin: 22px auto 0; overflow: auto; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 22px; opacity: 0; pointer-events: none; transition: opacity .3s ease; font-family: var(--font-mono); }
.mindmap-panel.is-visible { display: grid; opacity: 1; pointer-events: auto; }
.mindmap-branch { min-width: 0; transition: opacity .2s ease; }
.mindmap-panel.is-focus .mindmap-branch:not(.is-focus) { opacity: .3; }
.mindmap-panel .mindmap-project { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mindmap-label { margin: 0 0 10px; color: var(--ink-2); font: 11px/1.3 var(--font-mono); letter-spacing: .1em; }
.mindmap-project { display: block; width: 100%; border: 0; padding: 3px 0; background: transparent; color: var(--ink); font: 11px/1.45 var(--font-mono); text-align: left; cursor: pointer; }
.mindmap-project:hover { text-decoration: underline; text-underline-offset: .2em; }
.intro-scroll-hint { display: none; }
/* SKIP ↓ (2026-10-19): bottom right of the intro, in the nav's small mono voice; gone once the paragraph is complete */
.intro-skip { position: absolute; right: 28px; bottom: 24px; z-index: 7; border: 0; padding: 6px 2px; background: transparent; color: var(--ink-2); font: 11px/1 var(--font-mono); letter-spacing: .12em; cursor: pointer; transition: color .25s ease, opacity .4s ease; }
.intro-skip:hover, .intro-skip:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }
.intro-skip.is-done { opacity: 0; pointer-events: none; }
@media (max-width: 600px), (hover: none) { .intro-skip { right: 16px; bottom: 18px; } }
.intro-sound-hint { position: absolute; left: 50%; top: 50%; z-index: 3; margin: 0; transform: translate(-50%, -50%); white-space: nowrap; color: var(--ink-2); font: 12px/1.4 var(--font-mono); letter-spacing: .06em; pointer-events: none; transition: opacity .35s ease; text-shadow: 0 0 6px rgba(250, 250, 251, .9), 0 0 2px rgba(250, 250, 251, .9); }
.intro-frame.is-started .intro-sound-hint, .intro-sound-hint.is-hidden { opacity: 0; }
@media (max-width: 600px), (hover: none) { .intro-sound-hint { font-size: 11px; } }
/* the paragraph's own en / ko — tiny, top-right of the block, from the first typed line */
.intro-lang { position: relative; z-index: 6; width: min(54vw, 680px); height: 0; margin: 0 auto; text-align: right; font: 10px/1 var(--font-mono); letter-spacing: .14em; opacity: 0; transition: opacity .6s ease; }
.intro-lang > * { position: relative; top: -6px; }
.intro-lang span { margin: 0 2px; color: rgba(29,29,31,.32); }
.intro-lang button { border: 0; padding: 4px 3px; background: transparent; color: rgba(29,29,31,.36); font: inherit; letter-spacing: inherit; cursor: pointer; transition: color .25s ease; }
.intro-lang button:hover, .intro-lang button.is-current { color: var(--ink); }
.intro-frame.is-started .intro-lang { opacity: 1; }
/* the hover hint: small and faint under the settled paragraph, types itself in with a blinking cursor and stays */
.intro-hint { position: absolute; left: 0; right: 0; top: 100%; margin: 18px 0 0; text-align: center; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.intro-hint-pill { display: inline-block; color: var(--ink); font: 400 .6em/1 var(--font-mono); letter-spacing: .12em; white-space: nowrap; }
.intro-hint.is-typing { opacity: .85; } /* .62 until 2026-10-16: easy to miss */
.intro-hint-cursor { display: inline-block; margin-left: .1em; animation: cursor-blink .72s steps(1,end) infinite; }
/* until then, the dotted underlines darken one after another in a slow wave */
@keyframes keyword-cue { 0%, 60%, 100% { text-decoration-color: rgba(29,29,31,.45); } 28% { text-decoration-color: rgba(29,29,31,1); } }
.intro-lines.is-final .intro-keyword { animation: keyword-cue 3.4s ease-in-out 1.4s infinite; }
.intro-lines.is-final .intro-keyword[data-keyword="visual"] { animation-delay: 1.85s; }
.intro-lines.is-final .intro-keyword[data-keyword="design"] { animation-delay: 2.3s; }
.intro-frame.is-discovered .intro-keyword { animation: none; }
.intro-scroll-hint span { display: inline-block; margin-left: 4px; animation: cursor-blink .72s steps(1,end) infinite; }

.detail-overlay { position: fixed; inset: 0; z-index: 65; overflow: auto; padding: calc(var(--nav-height) + 24px) 28px 48px; background: var(--vellum); backdrop-filter: blur(14px) saturate(.9); }
.detail-overlay[hidden] { display: none; }
.detail-shell { max-width: 900px; margin: 0 auto; }
.detail-close { float: right; border: 0; padding: 8px; background: transparent; font: 12px var(--font-mono); cursor: pointer; }
.detail-content { clear: both; padding-top: 16vh; }
.detail-eyebrow, .detail-notice { color: var(--ink-2); font: 12px/1.6 var(--font-mono); letter-spacing: .08em; }
.detail-title { max-width: 18ch; margin: 18px 0 40px; font: 400 clamp(42px,7vw,92px)/1.02 var(--font-serif-en); }
.detail-notice { padding: 20px; border: 1px dashed var(--ink-2); }

@keyframes cursor-blink { 50% { opacity: 0; } }

@media (max-width: 1040px) {
  .intro-lines { width: min(58vw, 600px); }
}
/* six links + two toggles on one line down to 320px wide phones */
@media (max-width: 389px) {
  .site-nav { letter-spacing: .02em; }
  .site-nav .nav-actions { gap: 4px 6px; }
}

@media (max-width: 600px), (hover: none) {
  :root { --nav-height: 82px; }
  .site-nav { align-items: flex-start; flex-wrap: wrap; padding: 13px 16px 10px; gap: 8px; font-size: 9px; }
  .nav-wordmark { width: 100%; }
  .nav-actions { width: 100%; max-width: none; gap: 4px 8px; justify-content: space-between; }
  .nav-divider { display: none; }
  .nav-link + .nav-toggle { margin-left: 0; }
  .site-section { padding: calc(var(--nav-height) + 28px) 16px 48px; }
  .section-shell { min-height: calc(100vh - var(--nav-height) - 76px); }
  .section-empty { padding: 9vh 0; }
  .section-empty__mark { width: min(82vw,320px); }
  .intro-frame { padding: calc(var(--nav-height) + 28px) 16px 36px; }
  .intro-copy { left: 16px; right: 16px; top: 44%; min-height: 0; transform: translateY(-50%); font-size: clamp(11px, 3.35vw, 13px); line-height: 1.55; letter-spacing: .03em; } /* centred (was top 31%, under the nav on a phone), room above and below for the notes */
  .intro-lines { width: 100%; padding: 12px 10px; }
  .intro-line { height: 1.65em; }
  .intro-line--solo { left: 10px; right: 10px; }
  .mindmap-panel { width: 100%; max-height: 30vh; margin: 16px 0 0; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .intro-map-svg { display: none; }
  .intro-hint { top: -7px; left: 10px; right: auto; margin: 0; text-align: left; } /* phones: on the en / ko row, above the paragraph (below it the notes open) */
  .intro-hint-pill { font-size: 10px; letter-spacing: .08em; }
  .intro-lang { width: 100%; }
  .intro-scroll-hint { bottom: 18px; }
  .detail-overlay { padding: calc(var(--nav-height) + 16px) 16px 32px; }
}



/* Stage 2 — SELECTED WORK (ring) */
.work-section { padding: 0; min-height: 100vh; background: transparent; }
.work-inner { max-width: none; margin: 0 auto; }
.work-stage { position: relative; height: 100vh; min-height: 520px; /* 640px until 2026-10-18: a short window lost the song note under the edge */ padding: calc(var(--nav-height) + 24px) 28px 28px; display: flex; flex-direction: column; box-sizing: border-box; }
.work-heading { position: relative; z-index: 3; width: 100%; max-width: 1440px; margin: 0 auto; pointer-events: none; }
/* the ring fills the whole stage — heading and hint float over it; the index list is retired (hover shows the title) */
.work-body { position: absolute; left: 0; right: 0; top: var(--nav-height); bottom: 0; display: block; min-height: 0; padding: 0; }
.work-index { display: none; }
.work-index button { display: flex; gap: 12px; align-items: baseline; width: 100%; border: 0; padding: 3px 0; background: transparent; color: var(--ink-2); font: 12px/1.35 var(--font-mono); letter-spacing: .04em; text-align: left; cursor: pointer; transition: color .25s ease; }
.work-index button:hover, .work-index button.is-active { color: var(--ink); }
.work-index-number { flex: 0 0 auto; width: 22px; letter-spacing: .08em; }
.work-index-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-index button.is-active .work-index-title { text-decoration: underline; text-underline-offset: .22em; text-decoration-color: var(--hairline); }
.work-canvas-wrap { position: absolute; inset: 0; min-height: 0; overflow: hidden; }
.work-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; user-select: none; }
.work-object-slot { position: absolute; left: 50%; top: 50%; width: min(26vh, 220px); aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border: 1px dotted var(--ink-2); color: var(--ink-2); font: 11px/1 var(--font-mono); letter-spacing: .08em; pointer-events: none; transition: opacity .6s ease; }
.work-object-slot.is-loaded { opacity: 0; }
.work-tooltip[hidden] { display: none; }
.work-tooltip { position: absolute; left: 0; top: 0; z-index: 3; max-width: 280px; padding: 10px 12px; border: 1px solid var(--hairline); background: var(--vellum); backdrop-filter: blur(10px); pointer-events: none; display: grid; gap: 4px; }
.work-tooltip strong { font: 400 15px/1.3 var(--font-serif-ko); }
html[lang="en"] .work-tooltip strong { font-family: var(--font-serif-en); }
.work-tooltip span { color: var(--ink-2); font: 10px/1.4 var(--font-mono); letter-spacing: .06em; }
.work-hint { display: none; }
/* soundtrack note under the ring (2026-10-04): quiet, above the canvas so it can be read, never clickable */
.work-sound-note { position: absolute; left: 50%; bottom: 22px; z-index: 2; margin: 0; transform: translateX(-50%); white-space: nowrap; color: var(--ink-2); font: 11px/1.4 var(--font-mono); letter-spacing: .06em; pointer-events: none; text-shadow: 0 0 6px rgba(250, 250, 251, .9), 0 0 2px rgba(250, 250, 251, .9); } /* no pill behind it (연서, 2026-10-06) */
.work-list { display: none; }

/* phones (2026-10-17): the ring is back, not pinned, with the front card's title and the song note under it. If a
   phone cannot draw it (no WebGL), .is-list shows the cards as a list instead. */
.work-caption { display: none; }
@media (max-width: 600px), (hover: none) {
  .work-section { padding: 0; min-height: 0; }
  .work-stage { height: min(150vw, 88vh); height: min(150vw, 88svh); min-height: 0; padding: 0; } /* the ring sets its own height once it is built (work.js placeCaption) */
  .work-hint, .work-tooltip { display: none !important; }
  .work-caption { position: absolute; left: 16px; right: 16px; bottom: 46px; z-index: 2; height: 96px; margin: 0; display: grid; align-content: start; justify-items: center; gap: 4px; text-align: center; pointer-events: none; text-shadow: 0 0 6px rgba(250, 250, 251, .9), 0 0 2px rgba(250, 250, 251, .9); }
  .work-caption strong { max-width: 30ch; font: 400 16px/1.35 var(--font-serif-ko); text-wrap: balance; }
  html[lang="en"] .work-caption strong { font-family: var(--font-serif-en); }
  html[lang="ko"] .work-caption strong { word-break: keep-all; overflow-wrap: anywhere; }
  .work-caption span { color: var(--ink-2); font: 10px/1.4 var(--font-mono); letter-spacing: .06em; }
  .work-caption em { margin-top: 6px; color: var(--ink-2); font: normal 9.5px/1.4 var(--font-mono); letter-spacing: .14em; }
  .work-sound-note { left: 16px; right: 16px; bottom: 16px; transform: none; white-space: normal; text-align: center; font-size: 10.5px; text-wrap: balance; }
  .work-section.is-list { padding: calc(var(--nav-height) + 28px) 16px 72px; }
  .work-section.is-list .work-stage { display: none; }
  .work-section.is-list .work-list { display: grid; grid-template-columns: 1fr; gap: 34px; padding-top: 28px; }
  .work-card-button { width: 100%; border: 0; padding: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
  .work-card .card-img { aspect-ratio: 3/4; }
  .work-card .card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
  .work-card .card-img.has-image img { opacity: 1; }
  .work-card .card-img.has-image .archive-image-slot { opacity: 0; }
  .work-card-meta { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 4px 10px; padding-top: 12px; align-items: baseline; }
  .work-card-index { color: var(--ink-2); font: 11px/1 var(--font-mono); letter-spacing: .08em; }
  .work-card-title { grid-column: 2; margin: 0; font: 400 18px/1.3 var(--font-serif-ko); }
  html[lang="en"] .work-card-title { font-family: var(--font-serif-en); }
  .work-card-cat { grid-column: 2; margin: 0; color: var(--ink-2); font: 11px/1.4 var(--font-mono); letter-spacing: .06em; }
}

/* Stage 3 — NAME */
.name-section { position: relative; height: 58vh; min-height: 440px; padding: 0; overflow: hidden; background: transparent; }
.name-canvas-wrap, .name-canvas, .name-glass-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.name-canvas { display: block; }
.name-copy { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; padding: 28px; text-align: center; transition: opacity .2s ease; }
.name-section.is-webgl .name-copy { opacity: 0; }
.name-title { margin: 0; color: var(--ink); font: 400 clamp(64px, 14.5vw, 230px)/.92 var(--font-serif-en); letter-spacing: -.04em; }
.name-disciplines { margin: 28px 0 0; color: var(--ink); font: 11px/1.5 var(--font-mono); letter-spacing: .1em; }
.name-caption { display: none; }
.name-glass-layer { z-index: 2; display: none; overflow: hidden; background: var(--vellum); backdrop-filter: blur(1.5px) saturate(.9); pointer-events: none; }
.name-static .name-glass-layer { display: block; }
.name-static .name-glass-layer::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -55%; width: 48%; background: linear-gradient(105deg, transparent 30%, var(--vellum) 50%, transparent 70%); transform: skewX(-12deg); animation: name-light-sweep 12s linear infinite; }
.name-section.is-software-fallback .name-glass-layer { backdrop-filter: none; }
/* review builds: show whether the glass shader is running */
.is-review .work-stage[data-gl]::after { content: attr(data-gl); position: absolute; right: 16px; bottom: 12px; z-index: 5; padding: 3px 6px; background: rgba(29,29,31,.72); color: #fff; font: 10px/1.2 var(--font-mono); letter-spacing: .06em; pointer-events: none; }
.is-review .name-section::after { content: 'GL: ' attr(data-gl); position: absolute; right: 16px; bottom: 12px; z-index: 5; padding: 3px 6px; background: rgba(29,29,31,.72); color: #fff; font: 10px/1.2 var(--font-mono); letter-spacing: .06em; pointer-events: none; }
.name-section.is-software-fallback .name-glass-layer::after { animation: none; opacity: .28; transform: translateX(120%) skewX(-12deg); }

@keyframes name-light-sweep {
  from { transform: translateX(0) skewX(-12deg); }
  to { transform: translateX(330%) skewX(-12deg); }
}

@media (max-width: 600px), (hover: none) {
  .name-section { height: 70vh; min-height: 70vh; }
  .name-copy { padding: 16px; }
  .name-title { font-size: clamp(64px, 20vw, 108px); }
  .name-disciplines { max-width: 34ch; margin-top: 20px; font-size: 10px; line-height: 1.7; }
  .name-caption { left: 16px; bottom: 16px; }
  /* no frosted box over the name on a phone (연서, 2026-10-17): the water runs there now, and if it cannot, the name is plain */
  .name-glass-layer, .name-static .name-glass-layer { display: none; }
}


/* Stage 4 — ABOUT */
.about-section { min-height: 100vh; padding: calc(var(--nav-height) + 24px) 28px 56px; background: transparent; }
.about-inner { max-width: 1440px; margin: 0 auto; }
.about-kicker, .about-photo figcaption, .timeline-topline, .about-skills > h2 { margin: 0; color: var(--ink-2); font: 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.about-kicker, .about-photo figcaption { display: none; }
.about-strengths-grid { display: grid; grid-template-columns: minmax(0,7fr) minmax(280px,5fr); gap: clamp(40px,7vw,112px); align-items: start; padding: clamp(76px,10vw,144px) 0 96px; }
.about-strength-list { margin: 42px 0 0; padding: 0; list-style: none; }
.about-strength-item { position: relative; padding: 24px 0; border-top: 1px solid var(--hairline); }
.about-strength-item:last-child { border-bottom: 1px solid var(--hairline); }
.about-strength-claim { margin: 0; font: 400 17px/1.55 var(--font-mono); letter-spacing: .01em; }

/* the small how-to line under the strengths, bottom right */
.about-strength-hint { margin: 14px 0 0; text-align: right; color: var(--ink-2); font: 11px/1.5 var(--font-mono); letter-spacing: .04em; }
.about-strength-keyword { display: inline; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.about-strength-evidence { margin: 8px 0 0; color: #4A4D55; font: 12px/1.65 var(--font-mono); } /* ink-2 got lost on the warm photos */
.about-strength-inline { display: none; margin-top: 18px; }
.about-photo { position: relative; width: min(100%,440px); margin: 0 0 0 auto; }
.about-photo-frame { position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px dotted var(--ink-2); background: var(--placeholder); }
/* stacked collage: three photos, uneven sizes and gaps, overlapping */
.about-photo--stack { width: min(100%, 560px); aspect-ratio: auto; }
/* heights come from a padding box and percentages, not aspect-ratio: in one browser the frames grew taller than
   their photos and white showed underneath (2026-10-02). The photo always fills its frame. */
.about-photo--stack::before { content: ''; display: block; padding-top: 108%; }
.about-photo--stack .about-photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-photo--stack .about-photo-frame { position: absolute; margin: 0; box-shadow: 0 10px 28px rgba(29,29,31,.14); }
.about-photo--stack .about-photo-frame--1 { left: 0; top: 6%; width: 63%; height: 77.78%; aspect-ratio: auto; z-index: 1; } /* the portrait, a touch bigger (2026-10-01) */
.about-photo--stack .about-photo-frame--2 { right: 0; top: 0; width: 55%; height: 38.19%; aspect-ratio: auto; z-index: 2; }
.about-photo--stack .about-photo-frame--3 { right: 6%; bottom: 0; width: 47%; height: 32.64%; aspect-ratio: auto; z-index: 3; }
.about-photo--stack figcaption { position: absolute; right: 0; bottom: -22px; }
/* two photos: the portrait, and the café shot tucked over its lower right corner */
.about-photo--count-2::before { padding-top: 98%; }
.about-photo--count-2 .about-photo-frame--1 { top: 0; width: 66%; height: 89.8%; }
.about-photo--count-2 .about-photo-frame--2 { right: 0; top: auto; bottom: 0; width: 52%; height: 39.8%; aspect-ratio: auto; }
.about-photo-frame img, .strength-media-frame img, .strength-inline-frame img { width: 100%; height: 100%; display: none; object-fit: cover; }
.about-photo-frame.has-image img, .strength-media-frame.has-image img, .strength-inline-frame.has-image img { display: block; }
.about-photo-frame > span, .strength-media-frame > span, .strength-inline-frame > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-2); font: 11px/1 var(--font-mono); letter-spacing: .1em; }
.about-photo-frame.has-image > span, .strength-media-frame.has-image > span, .strength-inline-frame.has-image > span { display: none; }
.about-photo-frame img { filter: saturate(.84) contrast(.92); } /* brightness is baked into the files; a little less colour and contrast on top (the lens that banded with live filters is gone) */
.about-photo figcaption { margin-top: 10px; text-align: right; }
/* the Codrops square lens on the project cover — a full-cover canvas, no frame (the mask's hard edge is the border) */
.photo-lens-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; pointer-events: none; }
.strength-media-popup { position: fixed; top: 0; left: 0; z-index: 58; width: 220px; aspect-ratio: 4/5; opacity: 0; pointer-events: none; mix-blend-mode: multiply; }
.strength-media-popup.is-visible { pointer-events: none; }
.strength-media-frame, .strength-inline-frame { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px dotted var(--ink-2); background: var(--placeholder); }
.strength-media-frame img { filter: saturate(.9) contrast(.96); }
.about-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.about-stat { min-height: 142px; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px clamp(12px,3vw,42px); }
.about-stat + .about-stat { border-left: 1px solid var(--hairline); }
.about-stat strong { color: var(--ink); font: 400 44px/1 var(--font-serif-en); }
.about-stat span { color: var(--ink-2); font: 11px/1.4 var(--font-mono); letter-spacing: .08em; }
.about-timeline { position: relative; width: 100vw; margin: 120px 0 0 calc(50% - 50vw); }
.timeline-pin { position: relative; height: 100vh; min-height: 680px; overflow: hidden; background: transparent; }
.timeline-topline { position: absolute; top: calc(var(--nav-height) + 68px + (100% - var(--nav-height) - 68px) * .46 - 240px); left: 28px; right: 28px; z-index: 4; display: flex; justify-content: space-between; align-items: center; }
.timeline-topline h2 { margin: 0; font: inherit; }
.timeline-topline-arrow { font-family: var(--font-body-ko); } /* the typewriter face has no arrow glyph */
.timeline-viewport { position: absolute; inset: calc(var(--nav-height) + 68px) 0 0; overflow: hidden; perspective: 900px; }
.timeline-track { position: relative; height: 100%; display: flex; width: max-content; padding: 0 14vw 0 6vw; transform-style: preserve-3d; }
.timeline-track::before { content: ''; position: absolute; top: 46%; left: 0; right: 0; border-top: 1px solid var(--ink-2); }
.timeline-segment { position: relative; flex: 0 0 720px; height: 100%; }
.timeline-segment-marker { position: absolute; top: calc(46% - 24px); left: 0; display: flex; flex-direction: column; gap: 30px; }
.timeline-segment-marker::before { content: ''; position: absolute; top: 24px; left: 0; height: 16px; border-left: 1px solid var(--ink-2); }
.timeline-year { font: 12px/1 var(--font-mono); letter-spacing: .08em; }
.timeline-grade { color: #5F636C; font: 11px/1.3 var(--font-mono); letter-spacing: .06em; }
.timeline-items { position: absolute; inset: 0; }
.timeline-item { position: absolute; top: calc(46% + 58px); width: 98px; border: 0; padding: 0; background: transparent; color: var(--ink-2); text-align: left; transform-origin: left center; transform-style: preserve-3d; cursor: pointer; }
.timeline-item::before { content: ''; position: absolute; left: 0; bottom: calc(100% + 8px); height: 42px; border-left: 1px solid var(--hairline); }
.timeline-item:nth-child(1) { left: 7%; }
.timeline-item:nth-child(2) { left: 20%; top: calc(46% + 168px); }
.timeline-item:nth-child(2)::before { height: 152px; }
.timeline-item:nth-child(3) { left: 34%; }
.timeline-item:nth-child(4) { left: 48%; top: calc(46% + 168px); }
.timeline-item:nth-child(4)::before { height: 152px; }
.timeline-item:nth-child(5) { left: 62%; }
.timeline-item:nth-child(6) { left: 76%; top: calc(46% + 168px); }
.timeline-item:nth-child(6)::before { height: 152px; }
.timeline-item:nth-child(7) { left: 89%; }
.timeline-item-date { display: block; margin-bottom: 6px; font: 10px/1.3 var(--font-mono); letter-spacing: .04em; }
.timeline-item-title { display: block; font: 12.5px/1.45 var(--font-mono); }
/* the minor items stay smaller and in mono, but dark enough to read at a glance */
.timeline-item:not(.is-major) { color: #383B42; }
.timeline-item-date { color: #555861; }
.timeline-item { text-shadow: 0 0 14px rgba(246,245,242,.55); }
.timeline-item.is-major { color: var(--ink); }
.timeline-item.is-major .timeline-item-title { font: 400 15px/1.4 var(--font-mono); letter-spacing: .02em; }

.timeline-item-desc { display: none; }
.timeline-side-panel { position: fixed; top: var(--nav-height); right: 0; bottom: 0; z-index: 55; width: 380px; border-left: 1px solid var(--hairline); background: var(--paper); transform: translateX(100%); transition: transform .25s ease; pointer-events: none; }
.timeline-side-panel.is-open { transform: translateX(0); pointer-events: auto; }
.timeline-panel-inner { padding: 72px 34px; }
.timeline-panel-date, .timeline-panel-grade { margin: 0; color: var(--ink-2); font: 11px/1.5 var(--font-mono); letter-spacing: .08em; }
.timeline-panel-title { margin: 18px 0 10px; font: 400 22px/1.4 var(--font-mono); letter-spacing: .02em; }

.timeline-panel-desc { margin: 42px 0; color: var(--ink); font: 13px/1.85 var(--font-mono); }
.timeline-panel-open { border: 0; padding: 8px 0; background: transparent; color: var(--ink); font: 11px/1 var(--font-mono); letter-spacing: .08em; cursor: pointer; }
.about-skills { display: grid; grid-template-columns: 150px 1fr; gap: 34px; padding: 76px 0 0; }
.about-skill-groups { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.about-skill-group h3 { margin: 0 0 10px; color: var(--ink-2); font: 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.about-skill-group p { margin: 0; font: 13px/1.7 var(--font-body-ko); }
.timeline-panel-close { display: none; }
/* folded timeline (2026-10-16): one line with OPEN until she or a visitor asks for it */
.timeline-topline-end { display: flex; align-items: center; gap: 28px; }
.timeline-toggle { border: 0; border-bottom: 1px solid var(--ink-2); padding: 4px 0 3px; background: transparent; color: var(--ink); font: 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.timeline-toggle:hover, .timeline-toggle:focus-visible { border-bottom-color: var(--ink); }
.about-timeline.is-collapsed { margin-top: 96px; }
.about-timeline.is-collapsed .timeline-pin { height: auto; min-height: 0; overflow: visible; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.about-timeline.is-collapsed .timeline-topline { position: relative; top: auto; left: auto; right: auto; padding: 22px 28px 0; }
/* closed, a strip of the year line and the first row of items keeps drifting sideways so it reads as something that moves
   (2026-10-16, 연서: folded, nobody knows there is an interaction). Clicking the strip opens it. */
.about-timeline.is-collapsed .timeline-viewport { position: relative; inset: auto; height: 230px; overflow: hidden; perspective: none; cursor: pointer; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.about-timeline.is-collapsed .timeline-track { animation: none; } /* about.js moves the strip on every screen (2026-10-17: the CSS animation ran back and forth and looked still in Safari) */
.about-timeline.is-collapsed .timeline-items { pointer-events: none; }
.about-timeline.is-collapsed .timeline-item-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* one line each in the strip */
@keyframes timeline-peek { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100vw)); } }
.about-reduced .timeline-pin { height: auto; min-height: 680px; overflow-x: auto; }
.about-reduced .timeline-viewport { position: relative; inset: auto; height: 620px; overflow-x: auto; }
.about-reduced .timeline-topline { position: relative; top: auto; left: auto; right: auto; padding: 24px 28px; }

@media (max-width: 600px), (hover: none) {
  .about-section { padding: calc(var(--nav-height) + 28px) 16px 64px; }
  .about-strengths-grid { grid-template-columns: 1fr; gap: 48px; padding: 64px 0 72px; }
  .about-strength-list { margin-top: 28px; }
  .about-strength-claim { font-size: 16px; }
  .about-strength-inline { width: min(62vw,240px); aspect-ratio: 4/5; }
  .about-strength-item.is-media-open .about-strength-inline { display: block; }
  .about-photo { width: 100%; margin: 0; }
  .about-photo figcaption { text-align: left; }
  .about-stats { grid-template-columns: 1fr; }
  .about-stat { min-height: 106px; padding: 20px 0; }
  .about-stat + .about-stat { border-left: 0; border-top: 1px solid var(--hairline); }
  .about-stat strong { font-size: 40px; }
  .strength-media-popup { display: none; }
  /* the timeline on a phone is the computer's (2026-10-17, 연서: "like the PC, sideways, flowing by itself"): folded, the
     strip drifts sideways; OPEN pins it and the page scroll moves it sideways. A tapped item opens its text in a sheet
     from the bottom (the computer's side panel). */
  .about-timeline { margin-top: 84px; }
  .about-timeline.is-collapsed { margin-top: 64px; }
  .timeline-pin { min-height: 560px; }
  .timeline-topline { left: 16px; right: 16px; }
  .about-timeline.is-collapsed .timeline-topline { padding: 18px 16px 0; }
  .about-timeline.is-collapsed .timeline-track { animation: none; } /* phones: about.js moves the strip at 160px a second (the CSS animation looked still on an iPhone, 2026-10-17) */
  .timeline-topline-end { gap: 18px; }
  .timeline-side-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh; overflow-y: auto; border-left: 0; border-top: 1px solid var(--hairline); box-shadow: 0 -12px 32px rgba(29,29,31,.12); transform: translateY(105%); }
  .timeline-side-panel.is-open { transform: translateY(0); }
  .timeline-panel-inner { padding: 22px 20px calc(30px + env(safe-area-inset-bottom)); }
  .timeline-panel-close { display: block; margin: 0 0 6px auto; border: 0; padding: 4px 0; background: transparent; color: var(--ink-2); font: 11px/1 var(--font-mono); letter-spacing: .1em; cursor: pointer; }
  .timeline-panel-title { margin: 12px 0 8px; font-size: 18px; }
  .timeline-panel-desc { margin: 18px 0 22px; }
  .about-skills { grid-template-columns: 1fr; gap: 20px; padding-top: 48px; }
  .about-skill-groups { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
}


/* Stage 5 — ARCHIVE */
.archive-section { min-height: 100vh; padding: calc(var(--nav-height) + 24px) 28px 64px; background: transparent; }
.archive-inner { max-width: 1440px; margin: 0 auto; }
.archive-filters { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding: 72px 0 34px; border-bottom: 1px solid var(--hairline); }
.archive-filter { position: relative; border: 0; padding: 0 0 7px; background: transparent; color: var(--ink-2); font: 12px/1 var(--font-mono); letter-spacing: .06em; white-space: nowrap; cursor: pointer; }
.archive-filter::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid transparent; transform: scaleX(0); transform-origin: left; transition: transform .25s ease, border-color .25s ease; }
.archive-filter.is-active { color: var(--ink); }
.archive-filter.is-active::after { border-color: var(--ink); transform: scaleX(1); }
/* archive: photos edge to edge, 3 across; title + meta only on hover, over the photo */
.archive-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding-top: 34px; }
.project-card[hidden] { display: none; }
.archive-card-button { width: 100%; border: 0; padding: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.card-img { position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px dotted var(--ink-2); background: var(--placeholder); }
.card-img.has-image { border: 0; }
.archive-image-slot { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-2); font: 11px/1 var(--font-mono); letter-spacing: .08em; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.card-img.has-image { border: 0; }
.card-img.has-image img { opacity: 1; }
.card-img.has-image .archive-image-slot { opacity: 0; }
.archive-card-button:hover .card-img img, .archive-card-button:focus-visible .card-img img { transform: scale(1.03); }
/* Tone: cards sit in the page's cool, low-saturation register; the detail overlay shows the work in full colour. */
.card-img img { filter: saturate(.72) contrast(1.02); }
.archive-card-button:hover .archive-image-slot, .archive-card-button:focus-visible .archive-image-slot { transform: scale(1.03); }
.archive-now-badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 6px 8px; border: 1px solid var(--hairline); background: var(--vellum); color: var(--ink); font: 10px/1 var(--font-mono); letter-spacing: .06em; }
.archive-card-meta { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 16px; color: var(--ink); text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.archive-card-button { position: relative; display: block; }
.archive-card-button::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(241,241,243,.78); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.archive-card-button:hover::after, .archive-card-button:focus-visible::after { opacity: 1; }
.archive-card-button:hover .archive-card-meta, .archive-card-button:focus-visible .archive-card-meta { opacity: 1; transform: none; }
.archive-card-button:hover .card-img img, .archive-card-button:focus-visible .card-img img { filter: saturate(.35) contrast(.95); }
.archive-card-key { display: none; }
.archive-card-title { margin: 0; font: 400 15px/1.35 var(--font-serif-ko); }
html[lang="en"] .archive-card-title { font-family: var(--font-serif-en); }
.archive-card-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 8px; color: var(--ink-2); font: 11px/1.45 var(--font-mono); }
.archive-card-title { max-width: 100%; }
.mindmap-label { display: block; color: var(--ink); text-decoration: none; }
.mindmap-label:hover, .mindmap-label:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* NOW: this term's courses under the archive, same weight as the strengths (claim in serif, evidence in mono) */
/* a sheet of tracing paper over the ground photo, so the small mono lines stay readable */
.now-block { margin-top: clamp(88px,10vw,144px); padding: 26px clamp(20px,2.4vw,36px) 30px; background: var(--vellum); backdrop-filter: blur(14px) saturate(.9); scroll-margin-top: calc(var(--nav-height) + 16px); }
.now-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline); color: var(--ink-2); font: 12px/1 var(--font-mono); letter-spacing: .06em; }
.now-head h2 { margin: 0; color: var(--ink); font: inherit; letter-spacing: inherit; }
.now-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 clamp(28px,3.4vw,56px); margin: 0; padding: 0; list-style: none; }
.now-item { padding: 28px 0 8px; }
.now-label { margin: 0 0 14px; color: #5F636C; font: 11px/1.4 var(--font-mono); letter-spacing: .06em; }
.now-claim { margin: 0; color: var(--ink); font: 400 17px/1.55 var(--font-mono); letter-spacing: .01em; }

html[lang="ko"] .now-claim, html[lang="ko"] .now-evidence, html[lang="ko"] .about-strength-evidence { word-break: keep-all; overflow-wrap: anywhere; }
.now-evidence { margin: 10px 0 0; color: #5F636C; font: 12px/1.65 var(--font-mono); }
/* the AI class clip: small, square, looping while on screen */
.now-media { margin: 16px 0 0; width: min(100%, 280px); }
.now-media video { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--placeholder); }
.now-media figcaption { margin-top: 6px; color: #5F636C; font: 10px/1.4 var(--font-mono); letter-spacing: .06em; }
.now-media--image { width: min(100%, 420px); }
.now-media img { display: block; width: 100%; height: auto; background: var(--placeholder); }
.now-media + .now-media { margin-top: 18px; } /* several media in one NOW item (2026-10-06) */
/* the AI class item (2026-10-07): text on the left, its media as a stack of cards on the right, spanning two columns
   and both rows, so the other two courses sit stacked in the third column and the box has no empty corner */
.now-item--deck { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: clamp(28px,3.4vw,56px); align-items: start; }
.now-item--deck + .now-item + .now-item { border-top: 1px solid var(--hairline); margin-top: 20px; }
.now-deck { padding: 34px 30px 0 0; }
.now-deck-stage { position: relative; width: 100%; aspect-ratio: 1/1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.now-deck-stage:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.now-deck-stage > .now-media { position: absolute; inset: 0; margin: 0; width: 100%; transform-origin: 30% 100%; transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .55s, box-shadow .55s; box-shadow: 0 1px 0 rgba(29,29,31,.08); }
.now-deck-stage > .now-media img, .now-deck-stage > .now-media video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.now-deck-stage > .now-media figcaption { display: none; }
.now-deck-stage > .now-media[data-pos="0"] { z-index: 3; transform: none; }
.now-deck-stage > .now-media[data-pos="1"] { z-index: 2; transform: translate(14px,-14px) rotate(2deg); filter: saturate(.55) brightness(1.06); }
.now-deck-stage > .now-media[data-pos="2"] { z-index: 1; transform: translate(28px,-28px) rotate(4deg); filter: saturate(.35) brightness(1.1); }
.now-deck-stage:hover > .now-media[data-pos="1"] { transform: translate(20px,-18px) rotate(3deg); }
.now-deck-stage:hover > .now-media[data-pos="2"] { transform: translate(36px,-34px) rotate(5.5deg); }
.now-deck-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 10px 0 0; color: #5F636C; font: 10px/1.45 var(--font-mono); letter-spacing: .06em; }
.now-deck-count { flex: none; color: var(--ink); }
html[lang="ko"] .now-deck-caption { word-break: keep-all; overflow-wrap: anywhere; }
/* where it gets me by December: same voice, a shade darker, with its own small label */
.now-lead { margin: 16px 0 0; color: #383B42; font: 12px/1.6 var(--font-mono); letter-spacing: .02em; }
.now-next { margin: 12px 0 0; padding-top: 10px; border-top: 1px dotted rgba(29,29,31,.22); color: #383B42; font: 12px/1.65 var(--font-mono); }
.now-next span { display: block; margin-bottom: 2px; color: var(--ink); font-size: 11px; letter-spacing: .06em; }
html[lang="ko"] .now-next, html[lang="ko"] .now-lead { word-break: keep-all; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .now-list { grid-template-columns: 1fr; max-width: 640px; }
  .now-item { padding: 24px 0; border-bottom: 1px solid var(--hairline); }
  .now-item:last-child { border-bottom: 0; }
  .now-item--deck { display: block; grid-column: auto; grid-row: auto; }
  .now-item--deck + .now-item + .now-item { border-top: 0; margin-top: 0; }
  .now-deck { width: min(100%, 380px); padding: 40px 30px 0 0; }
}

@media (max-width: 600px), (hover: none) {
  .archive-section { padding: calc(var(--nav-height) + 28px) 16px 72px; }
  .archive-filters { flex-wrap: nowrap; gap: 20px; overflow-x: auto; padding: 48px 0 24px; scrollbar-width: none; }
  .archive-filters::-webkit-scrollbar { display: none; }
  .archive-filter { font-size: 11px; }
  /* three a row with one short word each (연서, 2026-10-17; two a row with title and details until then) */
  .archive-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding-top: 24px; }
  .archive-card-meta { position: static; opacity: 1; transform: none; padding: 8px 6px 16px 0; }
  .archive-card-button::after { display: none; }
  .archive-card-title, .archive-card-details { display: none; }
  .archive-card-key { display: block; overflow: hidden; color: var(--ink); font: 400 12.5px/1.35 var(--font-serif-ko); white-space: nowrap; text-overflow: ellipsis; }
  html[lang="en"] .archive-card-key { font-family: var(--font-serif-en); font-size: 12px; }
  .now-block { margin-top: 64px; padding: 22px 18px 10px; }
  .now-head { font-size: 11px; }
  .now-claim { font-size: 16px; }
}


/* Stage 6 — CONTACT */
.contact-section { position: relative; height: 100vh; min-height: 680px; padding: 0; overflow: hidden; background: transparent; }
/* behind the vellum: the sharp version of the section's ground photo — the pointer clears the paper to reveal it */
.contact-reveal-media { display: none; } /* the image is drawn into the canvas windows, not shown directly */
.contact-grid-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; }
.contact-content { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.contact-heading { position: absolute; top: calc(var(--nav-height) + 24px); left: 28px; right: 28px; }
.contact-center { position: absolute; left: 50%; top: 50%; width: min(92vw,900px); transform: translate(-50%,-50%); display: grid; justify-items: center; text-align: center; pointer-events: auto; }
.contact-center h2 { margin: 0; color: var(--ink); font: 400 clamp(64px,8vw,96px)/.95 var(--font-serif-en); letter-spacing: -.035em; }
.contact-links { display: grid; justify-items: center; gap: 14px; margin-top: 38px; }
.contact-links a { position: relative; color: var(--ink); font: 14px/1.35 var(--font-mono); text-decoration: none; }
.contact-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; border-bottom: 1px solid var(--hairline); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.contact-links a:hover::after, .contact-links a:focus-visible::after { transform: scaleX(1); }
.contact-controls { display: flex; gap: 22px; margin-top: 36px; }
.contact-controls button { border: 0; padding: 0; background: transparent; color: var(--ink-2); font: 11px/1 var(--font-mono); letter-spacing: .08em; cursor: pointer; }
.site-footer { position: absolute; left: 28px; right: 28px; bottom: 24px; display: flex; justify-content: space-between; gap: 24px; color: var(--ink-2); font: 11px/1.3 var(--font-mono); letter-spacing: .05em; }
.detail-result-pending { margin-top: 32px; padding: 28px; border: 1px dotted var(--ink-2); color: var(--ink-2); font: 11px/1.4 var(--font-mono); letter-spacing: .08em; text-align: center; }

@media (max-width: 600px), (hover: none) {
  .contact-section { min-height: 640px; }
  .contact-heading { top: calc(var(--nav-height) + 28px); left: 16px; right: 16px; }
  .contact-center { width: calc(100% - 32px); }
  .contact-center h2 { font-size: clamp(64px,21vw,82px); }
  .contact-links { margin-top: 30px; }
  .contact-links a { font-size: 12px; }
  .site-footer { left: 16px; right: 16px; bottom: 16px; align-items: end; font-size: 10px; }
  .site-footer span:last-child { max-width: 19ch; text-align: right; }
}


/* Fix pass — graph, timeline, vintage type, contact, Stage 2 detail */
:root { --font-mono: "Special Elite", "Nanum Gothic Coding", "Courier New", monospace; }
.svg-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.intro-line, .section-heading > span { filter: url("#ink-bleed"); font-weight: 600; text-shadow: 0 0 .15px currentColor; }
.intro-line { font-weight: 400; text-shadow: none; }
/* Mind map titles: same typewriter face and ink bleed as the six lines, smaller and lighter. */
.mindmap-node, .mindmap-panel .mindmap-project, .mindmap-panel .mindmap-label { filter: url("#ink-bleed"); text-shadow: 0 0 .15px currentColor; }
.mindmap-panel .mindmap-project { padding: 6px 0; font-size: 12px; letter-spacing: .04em; }

/* Complete mind-map graph: all nodes exist, only the active subtree is visible. */
.mindmap-graph { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.mindmap-subtree { position: absolute; inset: 0; pointer-events: none; }
.mindmap-node { position: absolute; left: 0; top: 0; width: auto; max-width: 220px; margin: 0; border: 0; padding: 0; background: transparent; color: var(--ink); font: 12px/1.3 var(--font-mono); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.mindmap-node.mindmap-label { color: var(--ink-2); letter-spacing: .1em; }
.mindmap-more { color: var(--ink-2); text-decoration: none; letter-spacing: .08em; }
.mindmap-panel .mindmap-more { display: block; padding: 3px 0; font: 11px/1.45 var(--font-mono); }
.mindmap-subtree.is-visible .mindmap-node { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mindmap-node:hover, .mindmap-node:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.mindmap-line { opacity: 0; stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset .4s ease, opacity .2s ease; }
.mindmap-line.is-visible { opacity: 1; stroke-dashoffset: 0; }

/* One baseline and 220px item allocations. */
.timeline-track::before { top: 46%; height: 1px; border: 0; background: rgba(29,29,31,.62); box-shadow: 0 1px 0 rgba(250,250,251,.5); z-index: 1; } /* ink-2 vanished on mid-grey photos */
/* Chrome on a Mac drew the spine only part way (2026-10-06): it sat in a 6000px-wide layer inside a 3D context
   (preserve-3d + perspective). The items never showed perspective (their segments flatten them), so the 3D context
   goes, and the spine is drawn across the viewport instead of along the whole moving track: it looks the same. */
/* (2026-10-17: phones run the same horizontal timeline, so this applies everywhere) */
@media all {
  .timeline-viewport { perspective: none; }
  .timeline-track { transform-style: flat; }
  .timeline-track::before { display: none; }
  .timeline-viewport::before { content: ''; position: absolute; left: 0; right: 0; top: 46%; height: 1px; background: rgba(29,29,31,.62); box-shadow: 0 1px 0 rgba(250,250,251,.5); pointer-events: none; }
}
.timeline-segment { z-index: 2; flex-basis: 380px; }
.timeline-segment--count-2 { flex-basis: 600px; }
.timeline-segment--count-3 { flex-basis: 820px; }
.timeline-segment--count-4 { flex-basis: 1040px; }
.timeline-segment--count-5 { flex-basis: 1260px; }
.timeline-segment--count-6 { flex-basis: 1480px; }
.timeline-segment--count-7 { flex-basis: 1700px; }
.timeline-segment-marker { z-index: 3; }
/* the semester on the spine, in the typewriter's red ribbon so it reads apart from the items */
.timeline-segment-marker .timeline-year { color: #B0352B; font-size: 14px; letter-spacing: .06em; text-shadow: 0 0 10px rgba(246,245,242,.85); }
.timeline-segment-marker .timeline-grade { color: #383B42; text-shadow: 0 0 10px rgba(246,245,242,.85); }
/* things that ran across semesters: a thin line under the spine from the item's stem to the month it ended,
   stacked in lanes 5px apart; hovering the item turns its line red */
.timeline-span { position: absolute; top: calc(46% + 5px + var(--lane, 0) * 5px); height: 0; border-top: 1px solid rgba(29,29,31,.32); z-index: 2; pointer-events: none; transition: border-color .2s ease; }
.timeline-span::after { content: ''; position: absolute; right: -2px; top: -2.5px; width: 4px; height: 4px; border-radius: 50%; background: rgba(29,29,31,.45); transition: background-color .2s ease; }
.timeline-span.is-hot { border-top-color: #B0352B; }
.timeline-span.is-hot::after { background: #B0352B; }
.timeline-item { z-index: 3; width: 220px; min-width: 220px; }
.timeline-item:nth-child(1) { left: 100px; }
.timeline-item:nth-child(2) { left: 320px; }
.timeline-item:nth-child(3) { left: 540px; }
.timeline-item:nth-child(4) { left: 760px; }
.timeline-item:nth-child(5) { left: 980px; }
.timeline-item:nth-child(6) { left: 1200px; }
.timeline-item:nth-child(7) { left: 1420px; }
.timeline-item-title { max-width: 220px; }
/* Even items sit ABOVE the baseline so the timeline reads as one spine with items on both sides. */
.timeline-item:nth-child(even) { top: auto; bottom: calc(54% + 58px); }
.timeline-item:nth-child(even)::before { top: calc(100% + 8px); bottom: auto; height: 42px; }

/* CONTACT footer is intentionally single-sided. */
.site-footer { justify-content: flex-start; }
.contact-controls { display: none; }

/* Complete Stage 2 detail overlay. */
.detail-overlay { overscroll-behavior: contain; padding: 0; background: var(--bg); backdrop-filter: none; }
/* detail ground — same moodboard as the main page: blurred photo, vellum, grain */
.detail-ground { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.detail-ground-photo { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; object-fit: cover; opacity: 0; filter: blur(14px) saturate(1.15) contrast(.97) brightness(1.03); transform: translateZ(0); transition: opacity 1.2s ease; }
.detail-ground-photo.is-on { opacity: 1; }
.detail-ground-vellum { position: absolute; inset: 0; background: rgba(245,245,247,.6); }
.detail-ground-vellum::before { content: ''; position: absolute; inset: 0; opacity: .1; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.detail-ground-vellum::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 8%, rgba(255,255,255,.32), rgba(255,255,255,0) 60%); }
.detail-shell { position: relative; z-index: 1; width: 100%; max-width: none; min-height: 100%; margin: 0; }
.detail-close { position: fixed; top: 18px; right: 28px; z-index: 3; float: none; padding: 8px 0; color: var(--ink); background: transparent; text-shadow: 0 0 6px rgba(250, 250, 251, .9), 0 0 2px rgba(250, 250, 251, .9); font: 12px/1 var(--font-mono); letter-spacing: .08em; } /* no box behind it (연서, 2026-10-05); a soft light halo keeps it readable over photos */
.detail-content { width: min(100% - 56px,1200px); margin: 0 auto; padding: calc(var(--nav-height) + 72px) 0 120px; }
.detail-hero, .detail-gallery-item { position: relative; margin: 0; overflow: hidden; border: 1px dotted var(--ink-2); background: var(--placeholder); }
.detail-hero { width: 100%; aspect-ratio: 16/9; }
.detail-hero--shaped { width: var(--hero-w, 100%); margin-inline: auto; }
@media (max-width: 700px) { .detail-hero--shaped { width: 100%; } }
.detail-hero--shaped.detail-hero--tall { width: min(100%, calc(80vh * var(--hero-r, .5625))); } /* SCORPIO poster: the whole poster fits the window (2026-10-14) */
.detail-gallery-item { width: 100%; aspect-ratio: 3/4; margin: 0; break-inside: avoid; }
.detail-gallery-item:nth-child(even) { aspect-ratio: 4/5; }
.detail-hero img, .detail-gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.detail-hero.has-image img, .detail-gallery-item.has-image img { opacity: 1; }
.detail-hero.has-image, .detail-gallery-item.has-image { border: 0; }
/* Gallery images keep their own proportions once loaded (slides and boards must not be cropped). */
.detail-gallery-item.has-image { aspect-ratio: auto; }
.detail-gallery-item.has-image img { position: static; height: auto; }
.detail-media-slot { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-2); font: 11px/1 var(--font-mono); letter-spacing: .1em; }
.detail-hero.has-image .detail-media-slot, .detail-gallery-item.has-image .detail-media-slot { display: none; }
.detail-header { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); gap: 32px 72px; padding: 56px 0 64px; border-bottom: 1px solid var(--hairline); }
.detail-meta { grid-column: 1/-1; margin: 0; color: var(--ink-2); font: 12px/1.5 var(--font-mono); letter-spacing: .06em; }
/* title, key line and numbers speak in the intro's typewriter voice (Special Elite, Korean in Nanum Gothic Coding), kept modest */
.detail-title { max-width: 24ch; margin: 0; font: 400 clamp(26px,2.6vw,38px)/1.35 var(--font-mono); letter-spacing: .04em; }
.detail-headline { align-self: end; max-width: 42ch; margin: 0; font: 400 clamp(15px,1.25vw,18px)/1.75 var(--font-mono); letter-spacing: .04em; }
/* in Korean the typewriter face would only catch the full stops and Latin letters, too heavy next to Hangul (the intro sets those in the Korean face too) */
html[lang="ko"] .detail-title, html[lang="ko"] .detail-headline, html[lang="ko"] .detail-metrics strong { font-family: "Nanum Gothic Coding", "Special Elite", monospace; }
.detail-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--hairline); }
.detail-metrics > div { min-height: 128px; display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 28px clamp(12px,3vw,42px); }
.detail-metrics > div + div { border-left: 1px solid var(--hairline); }
.detail-metrics strong { font: 400 clamp(22px,2.2vw,30px)/1.2 var(--font-mono); letter-spacing: .03em; }
.detail-metrics span { color: var(--ink-2); font: 11px/1.45 var(--font-mono); letter-spacing: .05em; }
.detail-role { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 24px; margin: 0; padding: 34px 0; border-bottom: 1px solid var(--hairline); font: 14px/1.75 var(--font-body-ko); }
.detail-role span, .detail-story-block h3, .detail-gallery-section > h3, .detail-soundtrack > h3, .detail-films > h3, .detail-press > h3 { color: var(--ink-2); font: 11px/1.4 var(--font-mono); letter-spacing: .1em; }
.detail-note { margin: -22px 0 0; padding: 0 0 30px 144px; border-bottom: 1px solid var(--hairline); color: var(--ink-2); font: 12px/1.7 var(--font-mono); }
.detail-role + .detail-note { margin-top: -1px; }
.detail-role:has(+ .detail-note) { border-bottom: 0; padding-bottom: 8px; }
.detail-films { padding: 34px 0 6px; }
.detail-films > h3 { margin: 0 0 18px; }
.detail-film { position: relative; aspect-ratio: 16 / 9; margin: 0; background: var(--placeholder); }
.detail-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.detail-film--vertical { width: min(100%, 360px); aspect-ratio: auto; height: 760px; background: transparent; } /* Instagram reel embed */
.detail-film-row { display: grid; grid-template-columns: 360px repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.detail-film-row .detail-film--vertical { width: 100%; }
.detail-film-side { display: block; width: 100%; height: 760px; object-fit: cover; }
@media (max-width: 700px) { .detail-film-row { grid-template-columns: 1fr 1fr; } .detail-film-row .detail-film--vertical { grid-column: 1 / -1; width: min(100%, 360px); justify-self: center; } .detail-film-side { height: auto; aspect-ratio: 9 / 16; } }
.detail-press { padding: 34px 0 8px; border-top: 1px solid var(--hairline); }
.detail-press > h3 { margin: 0 0 18px; }
.detail-press blockquote { margin: 0; padding: 0 0 0 24px; border-left: 1px solid var(--ink-2); }
.detail-press blockquote p { margin: 0; font: 15px/1.85 var(--font-body-ko); }
.detail-press-link { margin: 0 0 10px; }
.detail-press .detail-press-link cite { margin-top: 0; font: normal 13px/1.6 var(--font-body-ko); letter-spacing: 0; color: var(--ink); }
.detail-press .detail-press-link a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: .2em; }
.detail-press .detail-press-link a:hover { text-decoration-color: currentColor; }
.detail-press cite { display: block; margin-top: 12px; color: var(--ink-2); font: 11px/1.6 var(--font-mono); font-style: normal; letter-spacing: .04em; }
.detail-press cite a { color: inherit; text-decoration: none; }
.detail-press cite a:hover, .detail-press cite a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.detail-story { padding: 56px 0; }
.detail-story-block { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 24px; padding: 30px 0; border-top: 1px solid var(--hairline); }
.detail-story-block:last-child { border-bottom: 1px solid var(--hairline); }
.detail-story-block h3, .detail-story-block p, .detail-story-block ol { margin: 0; }
.detail-story-block p, .detail-story-block ol { font: 15px/1.85 var(--font-body-ko); }
.detail-story-block ol { padding-left: 1.25em; }
.detail-story-block li + li { margin-top: 12px; }
.detail-result-pending { margin: 0; border: 1px dotted var(--ink-2); padding: 28px; }
.detail-result-pending h3 { color: var(--ink-2); }
.detail-result-pending p { color: var(--ink-2); font: 11px/1.4 var(--font-mono); letter-spacing: .08em; text-align: center; }
/* see also (2026-10-03): Art2Wear ⇄ the Arts Week installation */
.detail-related p + p { margin-top: 10px; }
.detail-related-lead { color: var(--ink-2); font: 12px/1.7 var(--font-mono); margin-bottom: 22px; }
.detail-related-link { display: inline-block; margin-top: 16px; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font: 12px/1.4 var(--font-mono); letter-spacing: .06em; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.detail-related-link:hover, .detail-related-link:focus-visible { background: var(--ink); color: var(--paper); }
.detail-related-link + p { margin-top: 22px; }
.detail-expandable { margin: 12px 0 82px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.detail-expand-toggle { width: 100%; border: 0; padding: 20px 0; background: transparent; color: var(--ink); font: 12px/1.4 var(--font-mono); letter-spacing: .06em; text-align: left; cursor: pointer; }
.detail-expand-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 56px; padding: 18px 0 48px; }
.detail-expand-body[hidden] { display: none; }
.detail-expand-body p { margin: 0; font: 14px/1.8 var(--font-body-ko); }
.detail-gallery-section, .detail-soundtrack { padding-top: 20px; }
.detail-film-link { display: inline-block; margin: 10px 0 18px; color: var(--ink-2); font: 11px/1.4 var(--font-mono); letter-spacing: .08em; text-decoration: underline; text-underline-offset: .3em; }
.detail-film-link:hover { color: var(--ink); }
/* one caption above each film when a page has several (motion graphics: Toxic, APT, 후라이의 꿈) */
.detail-film-label { margin: 0 0 8px; color: var(--ink); font: 13px/1.6 var(--font-mono); }
/* the project's song, top right: three tiny lines, then the 80px Spotify bar. The player's own colours can't
   be restyled (it is Spotify's page), so the whole frame is toned down and returns to full colour on hover */
.detail-track { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin: -40px 0 16px; }
.detail-track-text { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 260px; text-align: right; color: var(--ink-2); font: 9.5px/1.45 var(--font-mono); letter-spacing: .04em; }
.detail-track-label { color: var(--ink); letter-spacing: .14em; }
/* the reason line: whole words only, lines evened out (2026-10-04, 연서: the breaks looked odd) */
.detail-track-text > span:not(.detail-track-label) { text-wrap: balance; }
html[lang="ko"] .detail-track-text { word-break: keep-all; overflow-wrap: anywhere; font-family: "Nanum Gothic Coding", "Special Elite", monospace; letter-spacing: 0; }
.detail-track-text a { color: inherit; opacity: .8; text-decoration: underline; text-underline-offset: .28em; }
.detail-track-text a:hover { opacity: 1; color: var(--ink); }
/* 2026-10-03: softer and lighter so it sits in the page (연서: 채도 연하게, 밝게, 대비 강하지 않게).
   Was saturate(.55) contrast(.94) with full colour on hover */
.detail-track .detail-spotify-wrap { position: relative; flex: 0 0 auto; display: block; width: 250px; height: 80px; border-radius: 12px; overflow: hidden; }
.detail-track .detail-spotify-wrap::after { content: ''; position: absolute; inset: 0; background: rgba(250,250,251,.3); pointer-events: none; transition: opacity .4s ease; }
.detail-track .detail-spotify { display: block; width: 100%; height: 100%; border: 0; border-radius: 12px; filter: saturate(.3) contrast(.6) brightness(1.32); transition: filter .4s ease; }
.detail-track .detail-spotify-wrap:hover::after { opacity: 0; }
.detail-track .detail-spotify-wrap:hover .detail-spotify { filter: saturate(.55) contrast(.9) brightness(1.05); }
.detail-soundtrack > p:not(.detail-song-meta) { margin-top: 8px; }
.detail-song-meta { margin: 6px 0 0 !important; color: var(--ink-2); opacity: .7; font: 9.5px/1.4 var(--font-mono) !important; letter-spacing: .06em; }
.detail-song-meta a { color: inherit; text-decoration: underline; text-underline-offset: .28em; }
.detail-song-meta a:hover { color: var(--ink); }
.detail-song-meta:hover { opacity: 1; }
/* 작업과정: a small label and smaller rows under the finished work */
.detail-process { padding-top: 64px; }
.detail-process > h3 { font-family: var(--font-body-ko); letter-spacing: .04em; }
/* two jobs in one project — two columns, a gap in the middle, no rule */
.detail-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(36px, 5vw, 80px); padding: 56px 0; }
.detail-roles .detail-story { padding: 0; }
.detail-roles .detail-story-block { grid-template-columns: 74px minmax(0,1fr); gap: 16px; }
.detail-role-label { margin: 0 0 18px; font: 500 clamp(18px, 1.6vw, 22px)/1.3 var(--font-body-ko); letter-spacing: .01em; }
.detail-role-image { position: relative; margin: 28px 0 0; aspect-ratio: auto; }
.detail-role-image img { position: static; width: auto; max-width: 100%; height: auto; display: block; }
.detail-role-image .detail-media-slot { display: none; }
.detail-gallery-section > h3, .detail-soundtrack > h3 { margin: 0 0 22px; }
/* Images sit flush in justified rows (JS computes each row so photos are as large as possible without upscaling). */
.detail-gallery { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; }
.detail-gallery.is-justified .detail-gallery-item { flex: 0 0 auto; margin: 0; aspect-ratio: auto; }
.detail-gallery.is-justified .detail-gallery-item.has-image img { position: static; display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-gallery.is-justified .detail-gallery-item:not(.has-image) { display: none; }
.detail-gallery-item.has-image img { vertical-align: top; }
/* sections (2026-10-02): a title, an optional one-line note, short captions under the making-of pictures */
.detail-section + .detail-section, .detail-section + .detail-stack-section, .detail-stack-section + .detail-section { padding-top: 56px; }
.detail-section-note { margin: -12px 0 20px; color: var(--ink-2); font: 12px/1.55 var(--font-mono); }
.detail-gallery-item.has-image { background: transparent; }
.detail-gallery-item .detail-caption { margin: 0; padding: 7px 14px 16px 0; color: var(--ink-2); font: 11px/1.45 var(--font-mono); }
/* the mind map as a pile of small overlapping cards, in order; the one under the pointer comes forward */
.detail-stack { display: flex; flex-direction: column; gap: 22px; padding: 12px 0 34px; }
.detail-stack-row { display: flex; flex-wrap: nowrap; align-items: flex-start; }
.detail-stack-item { position: relative; flex: 0 0 auto; margin: 0; background: #fff; box-shadow: 0 4px 16px rgba(20, 20, 30, .16); transform: rotate(var(--tilt, 0deg)); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; outline: none; }
.detail-stack-item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.detail-stack-item .detail-media-slot { display: none; }
.detail-stack-item:hover, .detail-stack-item:focus { z-index: 60 !important; transform: rotate(0deg) translateY(-10px) scale(1.6); box-shadow: 0 16px 40px rgba(20, 20, 30, .28); }
.detail-stack-num { position: absolute; left: 6px; top: 5px; padding: 1px 4px; background: rgba(255, 255, 255, .86); color: var(--ink-2); font: 10px/1.2 var(--font-mono); }
.detail-film { margin: 0; }
.detail-film + .detail-film { margin-top: 0; }
.detail-review-tag { position: absolute; left: 0; top: 0; z-index: 2; padding: 3px 6px; background: rgba(29,29,31,.72); color: #fff; font: 10px/1.2 var(--font-mono); letter-spacing: .06em; pointer-events: none; }
.detail-soundtrack { margin-top: 76px; padding-bottom: 20px; border-top: 1px solid var(--hairline); }
.detail-soundtrack > h3 { margin-top: 24px; }
.detail-spotify { width: 100%; height: 152px; border: 0; border-radius: 0; }
.detail-soundtrack p { margin: 12px 0 0; color: var(--ink-2); font: 11px/1.6 var(--font-mono); }

@media (max-width: 1179px) {
  .mindmap-graph, .intro-map-svg { display: none; }
}
/* Focus: hovering a keyword keeps the whole map but lifts its own branch. */
.intro-frame.is-map-focus .mindmap-subtree:not(.is-focus) .mindmap-node { opacity: .28; }
.intro-frame.is-map-focus .mindmap-line:not(.is-focus) { opacity: .22; }
.mindmap-line { transition: stroke-dashoffset .4s ease, opacity .2s ease; }

@media (max-width: 600px), (hover: none) {
  .mindmap-graph { display: none; }
  .timeline-segment-marker .timeline-year { font-size: 13px; }
  .detail-close { top: 12px; right: 16px; }
  .detail-content { width: calc(100% - 32px); padding: calc(var(--nav-height) + 48px) 0 80px; }
  .detail-header { grid-template-columns: 1fr; gap: 26px; padding: 40px 0 54px; }
  .detail-meta { grid-column: auto; }
  .detail-title { font-size: clamp(22px,6.4vw,28px); }
  .detail-headline { font-size: 15px; }
  .detail-metrics { grid-template-columns: 1fr; }
  .detail-metrics > div { min-height: 88px; padding: 20px 0; }
  .detail-metrics > div + div { border-left: 0; border-top: 1px solid var(--hairline); }
  .detail-role, .detail-story-block { grid-template-columns: 1fr; gap: 12px; }
  .detail-roles { grid-template-columns: 1fr; gap: 48px; }
  .detail-track { margin: -24px 0 12px; gap: 10px; }
  .detail-track-text { max-width: 46%; }
  .detail-track .detail-spotify-wrap { width: min(54%, 250px); }
  .detail-roles .detail-story-block { grid-template-columns: 1fr; }
  .detail-note { padding-left: 0; }
  .detail-expand-body { grid-template-columns: 1fr; gap: 22px; }
  .detail-gallery { columns: 1; }
  .site-footer { right: auto; }
}



/* Korean line breaking: keep words whole in headings. */
html[lang="ko"] .detail-title, html[lang="ko"] .detail-headline, html[lang="ko"] .archive-card-title, html[lang="ko"] .timeline-item-title, html[lang="ko"] .timeline-panel-title, html[lang="ko"] .about-strength-claim, html[lang="ko"] .work-tooltip, html[lang="ko"] .work-card-title { word-break: keep-all; overflow-wrap: anywhere; }

/* Korean prose set in the mono voice: Hangul and its punctuation in Nanum Gothic Coding, the way the intro and the
   project pages read (Special Elite only has Latin, and its full stops and commas sat heavy next to Hangul) */
html[lang="ko"] :is(.about-strength-claim, .about-strength-evidence, .now-label, .now-claim, .now-evidence, .now-next, .now-lead, .now-media figcaption,
  .timeline-item-title, .timeline-grade, .timeline-item-desc, .timeline-panel-title, .timeline-panel-desc, .timeline-panel-grade,
  .work-index-title, .archive-card-details span, .detail-meta, .detail-metrics span, .detail-note, .detail-film-label, .about-strength-hint, .desktop-note span,
  .detail-caption, .detail-section-note, .detail-section > h3, .detail-stack-section > h3),
html[lang="ko"] .timeline-item.is-major .timeline-item-title {
  font-family: "Nanum Gothic Coding", "Special Elite", monospace;
}

/* the glass ball under the pointer (js/cursor-lens.js): a small WebGL canvas over the photo it is on */
.cursor-lens-canvas { position: fixed; left: 0; top: 0; z-index: 9999; display: none; pointer-events: none; will-change: transform; }
.cursor-lens-canvas.is-in-card { position: absolute; z-index: 2; } /* between the card's vellum veil (1) and its title (3) */

/* phones (2026-10-09, 연서): the nav is the name and a ≡ button whose panel holds the links and the two toggles.
   (SELECTED was hidden on phones from 10-09 to 10-17; it is back with the ring.) */
.nav-menu-button, .nav-menu-toggles { display: none; }
@media (max-width: 600px), (hover: none) {
  :root { --nav-height: 54px; }
  .site-nav { align-items: center; flex-wrap: nowrap; padding: 0 8px 0 16px; gap: 12px; font-size: 11px; letter-spacing: .08em; }
  .site-nav.is-menu-open { background: var(--vellum); backdrop-filter: blur(14px) saturate(.9); -webkit-backdrop-filter: blur(14px) saturate(.9); }
  .nav-wordmark { width: auto; }
  .nav-menu-button { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .nav-menu-button span { display: block; height: 1.5px; background: var(--ink); transition: transform .3s ease, opacity .2s ease; }
  .site-nav.is-menu-open .nav-menu-button span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .site-nav.is-menu-open .nav-menu-button span:nth-child(2) { opacity: 0; }
  .site-nav.is-menu-open .nav-menu-button span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .site-nav .nav-actions { position: absolute; top: 100%; left: 0; right: 0; width: auto; display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 4px 16px 18px; border-bottom: 1px solid var(--hairline); background: var(--vellum); backdrop-filter: blur(14px) saturate(.9); -webkit-backdrop-filter: blur(14px) saturate(.9); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
  .site-nav.is-menu-open .nav-actions { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
  .site-nav .nav-link { padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; letter-spacing: .12em; }
  .nav-menu-toggles { display: flex; gap: 22px; padding-top: 12px; }
  .nav-menu-toggles .nav-toggle { padding: 6px 0; font-size: 12px; letter-spacing: .1em; }
}

/* AWARDS under KEY FIGURES, and the AI WORKS line pointing to NOW (2026-10-09) */
.about-awards { display: grid; grid-template-columns: 150px 1fr; gap: 34px; padding: 64px 0 0; }
.about-awards > h2 { margin: 0; color: var(--ink-2); font: 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.about-award-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.about-award-list li { border-bottom: 1px solid var(--hairline); }
.about-award { width: 100%; display: grid; grid-template-columns: 56px 150px minmax(0,1fr) auto; gap: 18px; align-items: baseline; padding: 15px 0; border: 0; background: transparent; color: var(--ink); text-align: left; font: 14px/1.55 var(--font-body-ko); }
button.about-award { cursor: pointer; }
.about-award-year, .about-award-label, .about-award-go { color: var(--ink-2); font: 11px/1.55 var(--font-mono); letter-spacing: .06em; }
button.about-award:hover .about-award-title, button.about-award:focus-visible .about-award-title { text-decoration: underline; text-underline-offset: 4px; }
html[lang="ko"] .about-award-title { word-break: keep-all; overflow-wrap: anywhere; }
.archive-now-note { margin: 30px 0 0; font: 12px/1.6 var(--font-mono); letter-spacing: .04em; }
.archive-now-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.archive-now-note[hidden] { display: none; }
@media (max-width: 600px), (hover: none) {
  .about-awards { grid-template-columns: 1fr; gap: 16px; padding-top: 44px; }
  .about-award { grid-template-columns: 44px minmax(0,1fr); gap: 4px 12px; }
  .about-award-label, .about-award-title { grid-column: 2; }
  .about-award-go { display: none; }
}

/* EXPERIENCE above AWARDS, and NOW moved to the top of the archive section (2026-10-09) */
.about-awards .about-award { grid-template-columns: 124px 230px minmax(0,1fr) auto; } /* EXPERIENCE and AWARDS share the columns */
.about-experience + .about-awards { padding-top: 48px; }
.archive-inner > .now-block:first-child { margin-top: 0; }
@media (max-width: 600px), (hover: none) {
  .about-awards .about-award { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .about-awards .about-award-label, .about-awards .about-award-title { grid-column: 1; }
}
/* narrow computer windows, e.g. split screen (2026-10-18, 연서: the place column shrank to one letter a line):
   the heading goes above the list, then the date and role columns narrow; the GPA figures keep one line */
@media (max-width: 900px) and (min-width: 601px) and (hover: hover) {
  .about-awards { grid-template-columns: 1fr; gap: 16px; }
  .about-stat strong { font-size: clamp(28px, 4.4vw, 40px); white-space: nowrap; }
}
/* KEY FIGURES with four cells (2026-10-19: awards 3 and the permanent collection 1 counted apart): the two GPA cells keep
   the room their longer figures need */
@media (min-width: 601px) and (hover: hover) { .about-stats:has(> .about-stat:nth-child(4)) { grid-template-columns: 1.3fr 1.3fr 1fr 1fr; } } /* phones keep their one column */
@media (max-width: 760px) and (min-width: 601px) and (hover: hover) {
  .about-stats:has(> .about-stat:nth-child(4)) { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .about-stats:has(> .about-stat:nth-child(4)) .about-stat:nth-child(3) { border-left: 0; }
  .about-stats:has(> .about-stat:nth-child(4)) .about-stat:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .about-awards .about-award { grid-template-columns: 96px 170px minmax(0,1fr) auto; gap: 14px; }
  .detail-header { grid-template-columns: 1fr; gap: 26px; } /* a project's title kept a narrow column and broke into five or six lines */
  .detail-meta { grid-column: auto; }
}

/* SKILLS under AWARDS, the timeline after them (2026-10-09) */
.about-awards + .about-skills { padding-top: 48px; }

/* fashion show roles: pictures in a row of their own under both columns (2026-10-09) */
.detail-role-media { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; min-width: 0; }
.detail-role-media:empty { display: none; }
.detail-role-media .detail-role-image { margin: 0; }
.detail-role-media .detail-role-image img { width: 100%; }
@media (max-width: 600px), (hover: none) {
  .detail-roles > * { order: var(--m-order, 0); }
  .detail-role-media { margin-top: -24px; }
}

/* nav ARCHIVE lands on the filters, below NOW (2026-10-10) */
#archive-list { scroll-margin-top: calc(var(--nav-height) + 16px); }

/* short silent loops in a gallery (2026-10-10): the poster sets the size, the video sits on it */
.detail-loop { position: relative; display: block; }
.detail-loop img { display: block; }
.detail-loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* WORK EXPERIENCE and ACTIVITIES on a phone: a tap shows the timeline text under the row (2026-10-10) */
.about-award-more { padding: 0 0 18px; }
.about-award-more[hidden] { display: none; }
.about-award-desc { margin: 0 0 10px; color: var(--ink); font: 13px/1.8 var(--font-mono); }
html[lang="ko"] .about-award-desc { word-break: keep-all; overflow-wrap: anywhere; }

/* About, one profile photo (연서, 2026-10-17): text column up to 700px + photo 270px, centred together */
.about-strengths-grid { grid-template-columns: minmax(0, 700px) 270px; gap: 96px; justify-content: center; }
.about-photo--single { width: 270px; margin: 42px 0 0 0; } /* the photo's top meets the first strength line */
.about-photo--single .about-photo-frame { aspect-ratio: 3 / 4; border: 0; box-shadow: 0 10px 28px rgba(29, 29, 31, .14); }
.about-photo--single figcaption { display: block; margin-top: 12px; text-align: right; }
/* strength text: size and colour only, the words stay */
.about-strength-item { padding: 28px 0; }
.about-strength-evidence { margin-top: 12px; font-size: 13px; line-height: 1.8; color: #3a3d44; }
@media (max-width: 600px), (hover: none) {
  .about-strengths-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-photo--single { width: min(62vw, 240px); margin: 0; }
  .about-photo--single figcaption { text-align: left; }
}
/* narrow computer windows (2026-10-18): the photo narrows with the window so the text keeps most of it
   (at 620px the 270px photo and the 96px gap left the text a third of the width) */
@media (max-width: 900px) and (min-width: 601px) and (hover: hover) {
  .about-strengths-grid { grid-template-columns: minmax(0,1fr) clamp(170px,28vw,270px); gap: clamp(32px,6vw,96px); }
  .about-photo--single { width: 100%; }
  html[lang="ko"] .about-strength-hint { word-break: keep-all; } /* "열려요" broke before its last syllable */
}

/* ring role lines (2026-10-17): under the front cards, always on (desktop) */
.work-card-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.work-card-label { position: absolute; left: 0; top: 0; padding: 4px 9px; white-space: nowrap; color: var(--ink); text-shadow: 0 0 6px rgba(246, 245, 242, .9), 0 0 2px rgba(246, 245, 242, .9); font: 11px/1.3 var(--font-mono); /* no box behind the role line (연서, 2026-10-17) */ letter-spacing: .04em; opacity: 0; will-change: transform, opacity; }

/* the typed intro shows two lines at a time (2026-10-17) */
.intro-line--solo { white-space: pre-line; line-height: 1.55; }

/* archive hover (2026-10-17, 연서: what I did matters more than the work's title): the role line big, the title small under it.
   Korean breaks at spaces only (a long line used to split '대기 / 중'). */
.archive-card-title, .archive-card-details { word-break: keep-all; overflow-wrap: anywhere; }
.archive-card-details--title { margin-top: 10px; letter-spacing: .02em; }

/* 'How I made this site →' under the e-mail and LinkedIn (2026-10-17): a little apart and quieter, it is not a way to reach me */
.contact-made { margin-top: 30px; border: 0; padding: 0; background: none; color: var(--ink-2); font: 12px/1.35 var(--font-mono); letter-spacing: .04em; cursor: pointer; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: .35em; transition: color .2s ease, text-decoration-color .2s ease; }
.contact-made:hover, .contact-made:focus-visible { color: var(--ink); text-decoration-color: currentColor; }