:root {
  color-scheme: dark;
  --background: #0f172a;
  --foreground: #94a3b8;
  --heading: #e2e8f0;
  --muted: #64748b;
  --accent: #5eead4;
  --surface: rgb(30 41 59 / .5);
  --focus: #5eead4;
  --spotlight-x: 50vw;
  --spotlight-y: 20vh;
  font-family: Inter, 'Noto Sans KR', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: 'ss03', 'cv02', 'cv11';
  font-size: 16px;
  line-height: 1.625;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--background); color: var(--foreground); }
body:has(dialog[open]) { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 5px;
  border-radius: 2px;
}
::selection { color: #134e4a; background: #5eead4; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--heading); }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { color: var(--heading); font-weight: 500; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 100; top: 1rem; left: 1rem;
  padding: .75rem 1rem; color: var(--background); background: var(--accent);
  font-size: .875rem; font-weight: 600; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
#spotlight {
  display: block; position: fixed; inset: 0; z-index: 30;
  pointer-events: none;
  background: radial-gradient(600px at var(--spotlight-x) var(--spotlight-y),
    rgb(29 78 216 / .15), transparent 80%);
  transition: background 300ms ease;
}
.shell, .archive-shell, .detail-shell {
  width: 100%; max-width: 1280px; margin-inline: auto; padding: 3rem 1.5rem;
}
.identity { min-width: 0; }
.identity-name {
  font-size: 2.25rem; line-height: 2.5rem; font-weight: 700;
  letter-spacing: -.025em;
}
.identity-name a:hover { color: var(--heading); }
.identity-role {
  margin-top: .75rem; font-size: 1.25rem; line-height: 1.75rem;
  font-weight: 500; letter-spacing: -.025em; color: var(--heading);
}
.identity-tagline { max-width: 20rem; margin-top: 1rem; line-height: 1.5rem; }
.nav { display: none; margin-top: 4rem; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 2.5rem;
  width: max-content; color: var(--muted); font-size: .75rem;
  line-height: 1rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
}
.nav-line {
  display: inline-block; width: 2rem; height: 1px; margin-right: 1rem;
  background: var(--muted);
  transition: width 150ms ease, background-color 150ms ease;
}
.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current='location'],
.nav-link[aria-current='true'], .nav-link.is-active { color: var(--heading); }
.nav-link:hover .nav-line, .nav-link:focus-visible .nav-line,
.nav-link[aria-current='location'] .nav-line,
.nav-link[aria-current='true'] .nav-line, .nav-link.is-active .nav-line {
  width: 4rem; background: var(--heading);
}
.social-links { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.social-links a, .social-links button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2rem; padding: 0; border: 0; background: transparent;
  color: var(--foreground); transition: color 150ms ease;
}
.social-links a:hover, .social-links button:hover { color: var(--heading); }
.social-links svg { width: 1.5rem; height: 1.5rem; flex: none; }
.content { padding-top: 6rem; min-width: 0; }
.section { margin-bottom: 4rem; scroll-margin-top: 6rem; }
.section-heading {
  position: sticky; top: 0; z-index: 20; width: calc(100% + 3rem);
  margin: 0 -1.5rem 1rem; padding: 1.25rem 1.5rem;
  background: rgb(15 23 42 / .9); backdrop-filter: blur(12px);
  font-size: .875rem; line-height: 1.25rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.prose p, .about-copy p { margin-bottom: 1rem; }
.identity-tagline, .about-copy, .row-title, .row-description, .detail-title, .detail-intro, .detail-prose, .project-cell { word-break: keep-all; overflow-wrap: anywhere; }
.prose p:last-child, .about-copy p:last-child { margin-bottom: 0; }
.prose a, .about-copy a { color: var(--heading); font-weight: 500; }
.prose a:hover, .about-copy a:hover { color: var(--accent); }
.technical-details { margin-top: 1.5rem; font-size: .875rem; line-height: 1.5rem; }
.technical-details summary { width: fit-content; cursor: pointer; color: var(--heading); font-weight: 500; }
.technical-details summary:hover { color: var(--accent); }
.technical-details p { margin-top: 1rem; }
.hover-list { isolation: isolate; }
.experience-row, .project-row {
  position: relative; display: grid; gap: .5rem; margin-bottom: 3rem;
  min-width: 0; transition: opacity 150ms ease;
}
.row-meta {
  position: relative; margin-top: .25rem; margin-bottom: .5rem;
  color: var(--muted); font-size: .75rem; line-height: 1rem;
  font-weight: 600; letter-spacing: .025em; text-transform: uppercase;
}
.row-content { min-width: 0; }
.row-title {
  color: var(--heading); font-size: 1rem; line-height: 1.375rem;
  font-weight: 500; overflow-wrap: anywhere;
}
.row-title > a { position: static; }
.link-tail { display: inline-block; white-space: nowrap; }
.row-title > a::after { content: ''; position: absolute; inset: -.5rem; z-index: 1; }
.row-title .subtitle { color: var(--muted); }
.row-title .arrow, .archive-link .arrow, .back-link .arrow,
.archive-table .arrow {
  display: inline-block; width: 1rem; height: 1rem; margin-left: .25rem;
  vertical-align: -2px; flex-shrink: 0; transition: transform 150ms ease;
}
.row-description { margin-top: .5rem; font-size: .875rem; line-height: 1.3125rem; }
.row-description a, .row-content button, .row-content .secondary-link { position: relative; z-index: 2; }
.row-description a:hover { color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: .5rem .375rem; margin-top: .75rem; }
.tags li, .tags > span {
  display: inline-flex; align-items: center; padding: .25rem .75rem;
  border-radius: 999px; background: rgb(45 212 191 / .1);
  color: var(--accent); font-size: .75rem; line-height: 1.25rem; font-weight: 500;
}
.project-thumb {
  width: 200px; max-width: 100%; aspect-ratio: 16 / 9; order: 1;
  border-radius: .25rem; border: 2px solid rgb(226 232 240 / .1);
  overflow: hidden; object-fit: cover; background: var(--thumb-bg, #1e293b);
  transition: border-color 150ms ease;
}
.project-row .row-content { order: 2; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.project-thumb--crop { position: relative; overflow: hidden; }
.project-thumb--crop img { position: absolute; width: var(--crop-width); height: auto; max-width: none; max-height: none; left: var(--crop-left); top: 0; transform: translateY(var(--crop-shift)); border-radius: 0; }
.portrait-window { position: absolute; top: 0; bottom: 0; aspect-ratio: var(--portrait-ratio); left: 50%; transform: translateX(-50%); overflow: hidden; }
.project-row .project-thumb--full-source { height: auto; aspect-ratio: 16 / 9; justify-self: start; background: #c5daf7; }
.project-thumb--full-source img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-thumb picture { display: block; width: 100%; height: 100%; }
.project-thumb--pair { display: flex; }
.project-thumb--pair img { width: 50%; min-width: 0; flex: 0 0 50%; }
.archive-link, .back-link {
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--heading); font-size: 1rem; line-height: 1.5rem; font-weight: 500;
}
.archive-link:hover, .back-link:hover { color: var(--accent); }
.archive-link:hover .arrow { transform: translateX(4px); }
.back-link { margin-bottom: 2rem; color: var(--accent); }
.back-link .arrow { margin-left: 0; margin-right: .25rem; }
.back-link:hover .arrow { transform: translateX(-4px); }
.site-footer { max-width: 28rem; padding-bottom: 4rem; color: var(--muted); font-size: .875rem; line-height: 1.5rem; }
.site-footer a { color: var(--foreground); font-weight: 500; }
.site-footer a:hover { color: var(--accent); }

/* The archive is a compact index, not another card gallery. */
.archive-shell { min-height: 100vh; }
.archive-title, .detail-title, .archive-shell > h1, .detail-header > h1 {
  font-size: 2.25rem; line-height: 2.5rem; font-weight: 700;
  letter-spacing: -.025em; overflow-wrap: anywhere;
}
.archive-title, .archive-shell > h1 { margin-bottom: 3rem; }
.archive-table { width: 100%; border-collapse: collapse; text-align: left; }
.archive-table thead th {
  position: sticky; top: 0; z-index: 10; background: rgb(15 23 42 / .95);
  padding: 1rem .5rem 1rem 0; color: var(--heading);
  font-size: .875rem; line-height: 1.5rem; font-weight: 600;
  backdrop-filter: blur(12px);
}
.archive-table td, .archive-table tbody th { border-top: 1px solid rgb(203 213 225 / .1); padding: 1rem .5rem 1rem 0; vertical-align: top; font-size: .875rem; line-height: 1.5rem; }
.archive-table tbody th { position: static; color: var(--heading); font-weight: 600; }
.archive-table td:first-child { width: 3.5rem; padding-right: 1.5rem; white-space: nowrap; color: var(--muted); }
.archive-year-note { display: block; max-width: 6rem; margin-top: .25rem; white-space: normal; font-size: .6875rem; line-height: 1rem; font-weight: 400; overflow-wrap: anywhere; }
.archive-table th:last-child, .archive-table td:last-child { padding-right: 0; }
.archive-table .project-cell { color: var(--heading); font-weight: 600; }
.archive-table a { display: inline-block; }
.archive-table a:hover { color: var(--accent); }
.archive-table a:hover .arrow { transform: translate(2px, -2px); }
.archive-table .tags { margin: 0; }
.archive-table .made-at, .archive-table .built-with,
.archive-table .project-link, .archive-table .hide-mobile,
.archive-table .archive-company, .archive-table .archive-tech,
.archive-table .archive-link-cell { display: none; }

/* Detail content stays readable; original media has one horizontal row. */
.detail-shell { max-width: 1056px; }
.detail-header { margin-bottom: 3rem; }
.detail-title, .detail-header > h1 { max-width: 52rem; }
.detail-summary, .detail-intro { max-width: 45rem; margin-top: 1.5rem; font-size: 1rem; line-height: 1.75rem; }
.detail-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; font-size: .875rem; }
.detail-meta > div { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.detail-meta dt { color: var(--muted); }
.detail-meta dd { margin: 0; color: var(--foreground); }
.detail-section, .detail-prose > section { margin-bottom: 3rem; }
.detail-section h2, .detail-prose h2, .detail-diagram h2, .gallery-top h2 { margin-bottom: 1rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.detail-section h3 { margin-block: 1.5rem .5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.detail-section p, .detail-prose p { max-width: 48rem; margin-bottom: 1rem; line-height: 1.75rem; }
.detail-section ul:not(.tags):not(.media-strip) { max-width: 48rem; padding-left: 1.25rem; list-style: disc; }
.detail-section li { margin-bottom: .5rem; }
.detail-section .tags li { margin-bottom: 0; }
.detail-section a:not(.media-strip a) { color: var(--heading); }
.detail-section a:not(.media-strip a):hover { color: var(--accent); }
.gallery { position: relative; min-width: 0; margin-block: 1.5rem 3rem; }
.gallery-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.gallery-top h2 { margin: 0; }
.gallery-top .gallery-controls { margin: 0; }
.detail-diagram { margin-bottom: 3rem; }
.detail-diagram img { display: block; width: 100%; max-width: 48rem; height: auto; }
.project-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: 3rem; font-size: .875rem; }
.project-links a { color: var(--heading); }
.project-links a:hover { color: var(--accent); }
.detail-contact { margin-block: 3rem; }
.media-strip {
  display: flex; flex-flow: row nowrap; align-items: flex-start; gap: 1rem;
  overflow-x: auto; overscroll-behavior-inline: contain; padding: .375rem .375rem 1rem;
  margin-inline: -.375rem; scrollbar-width: thin; scrollbar-color: #475569 transparent;
  scroll-snap-type: x proximity;
}
.media-strip > * { flex: 0 0 auto; max-width: 100%; margin: 0; scroll-snap-align: start; }
.media-strip button, .media-strip a {
  display: block; flex: 0 0 auto; width: auto; max-width: 100%; padding: 0;
  border: 0; border-radius: .25rem; background: transparent;
}
.media-strip img {
  width: auto; height: 180px; max-height: 180px; max-width: 100%;
  border: 2px solid rgb(226 232 240 / .1); border-radius: .25rem;
  object-fit: contain; transition: border-color 150ms ease;
}
.media-strip button:hover img, .media-strip a:hover img { border-color: rgb(226 232 240 / .3); }
.media-strip figcaption { max-width: 28rem; padding-top: .5rem; font-size: .75rem; line-height: 1.25rem; color: var(--muted); }
.gallery-controls { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.gallery-controls button, .dialog-controls button, .close-dialog {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem;
  min-height: 2.75rem; border: 1px solid rgb(148 163 184 / .25);
  border-radius: .25rem; background: transparent; color: var(--heading);
}
.gallery-controls button:hover:not(:disabled), .dialog-controls button:hover:not(:disabled),
.close-dialog:hover { color: var(--accent); border-color: var(--accent); }
.gallery-controls button:disabled, .dialog-controls button:disabled { opacity: .3; }
dialog {
  width: min(1100px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem); padding: 1rem; border: 1px solid rgb(148 163 184 / .25);
  border-radius: .5rem; background: var(--background); color: var(--foreground);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .5);
}
dialog::backdrop { background: rgb(2 6 23 / .9); backdrop-filter: blur(6px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dialog-header h2 { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.close-dialog { flex: none; margin-left: auto; }
#image-dialog > .close-dialog { position: absolute; z-index: 2; top: .75rem; right: .75rem; background: var(--background); }
#image-dialog img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 10rem); margin-inline: auto; object-fit: contain; }
.original-image-link { display: inline-block; margin-top: 1rem; color: var(--heading); font-size: .875rem; }
.original-image-link:hover { color: var(--accent); }
.dialog-caption, [data-lightbox-caption] { padding-top: .75rem; font-size: .875rem; line-height: 1.5rem; }
.dialog-controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }
[data-lightbox-count] { min-width: 3rem; text-align: center; font-size: .75rem; }
.version-grid { display: grid; gap: 1.5rem; }
.version-card { min-width: 0; }
.version-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 2px solid rgb(226 232 240 / .1); border-radius: .25rem; }
.version-card h2, .version-card h3 { margin-top: .75rem; font-size: 1rem; line-height: 1.5rem; }
.version-card p { margin-top: .25rem; font-size: .875rem; }
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; z-index: 100;
  width: max-content; max-width: calc(100vw - 3rem); padding: .875rem 1.25rem;
  border: 1px solid rgb(94 234 212 / .3); border-radius: .375rem;
  background: #1e293b; color: var(--heading); font-size: .875rem; line-height: 1.5rem;
  box-shadow: 0 10px 30px rgb(2 6 23 / .3);
  transform: translateX(-50%); opacity: 0; visibility: hidden;
  transition: opacity 150ms ease, visibility 150ms ease;
}
.toast.is-visible { opacity: 1; visibility: visible; }
.toast[data-state='error'] { border-color: rgb(148 163 184 / .4); }
.toast input { display: block; width: 100%; margin-top: .75rem; padding: .5rem; border: 1px solid #64748b; border-radius: .25rem; background: #0f172a; color: var(--heading); }

@media (min-width: 640px) {
  .identity-name, .archive-title, .detail-title, .archive-shell > h1, .detail-header > h1 { font-size: 3rem; line-height: 3rem; }
  .experience-row, .project-row { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2rem; }
  .row-meta, .project-thumb { grid-column: span 2; }
  .row-content { grid-column: span 6; }
  .project-thumb { order: 1; width: 100%; margin-top: .25rem; }
  .project-row .row-content { order: 2; }
  .archive-table .made-at, .archive-table .archive-company { display: table-cell; }
  .version-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-strip img { height: 220px; max-height: 220px; }
}

@media (min-width: 768px) {
  .shell, .archive-shell, .detail-shell { padding: 4rem 3rem; }
  .section { margin-bottom: 6rem; }
  .section-heading { width: calc(100% + 6rem); margin-inline: -3rem; padding-inline: 3rem; }
  .experience-row, .project-row { gap: 1rem; }
  .archive-table .built-with, .archive-table .archive-tech { display: table-cell; }
  .archive-table td:first-child { width: 5rem; }
  .archive-table .project-cell { min-width: 15rem; }
}

@media (min-width: 1024px) {
  .shell { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0; }
  .identity { position: sticky; top: 0; width: 48%; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding-block: 6rem; }
  .identity > .social-links { margin-top: 0; }
  .content { width: 52%; padding-block: 6rem; }
  .nav { display: block; }
  .section { margin-bottom: 9rem; }
  .section-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .experience-row::before, .project-row::before {
    content: ''; position: absolute; z-index: -1; inset: -1rem -1.5rem;
    border-radius: .375rem; transition: background-color 150ms ease, box-shadow 150ms ease;
  }
  .row-title > a::after { inset: -1rem -1.5rem; }
  .experience-row:hover::before, .project-row:hover::before,
  .experience-row:focus-within::before, .project-row:focus-within::before {
    background: var(--surface); box-shadow: inset 0 1px 0 0 rgb(148 163 184 / .1), 0 8px 18px -12px rgb(2 6 23 / .2);
  }
  .experience-row:hover .row-title, .project-row:hover .row-title,
  .experience-row:focus-within .row-title, .project-row:focus-within .row-title { color: var(--accent); }
  .experience-row:hover .row-title .arrow, .project-row:hover .row-title .arrow,
  .experience-row:focus-within .row-title .arrow, .project-row:focus-within .row-title .arrow { transform: translate(4px, -4px); }
  .project-row:hover .project-thumb, .project-row:focus-within .project-thumb { border-color: rgb(226 232 240 / .3); }
  .hover-list:focus-within > .experience-row, .hover-list:focus-within > .project-row { opacity: .5; }
  .hover-list > .experience-row:focus-within, .hover-list > .project-row:focus-within { opacity: 1; }
  .site-footer { padding-bottom: 0; }
  .archive-shell, .detail-shell { padding-block: 6rem; }
  .archive-table .project-link, .archive-table .hide-mobile, .archive-table .archive-link-cell { display: table-cell; }
  .archive-table .project-link, .archive-table .archive-link-cell { max-width: 15rem; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  #spotlight { display: none; }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .hover-list:hover > .experience-row, .hover-list:hover > .project-row { opacity: .5; }
  .hover-list > .experience-row:hover, .hover-list > .project-row:hover { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #spotlight { background: radial-gradient(600px at 50vw 20vh, rgb(29 78 216 / .15), transparent 80%); }
}

@media print {
  #spotlight, .nav, .toast, .gallery-controls, .skip-link { display: none !important; }
  body { color: #334155; background: #fff; }
  h1, h2, h3, h4, strong { color: #0f172a; }
  .shell { display: block; }
  .identity, .content { position: static; width: auto; height: auto; padding: 1rem 0; }
  .section-heading { position: static; width: auto; height: auto; margin: 1rem 0; padding: 0; clip: auto; overflow: visible; background: transparent; }
  .media-strip { overflow: visible; flex-wrap: wrap; }
  .experience-row, .project-row { break-inside: avoid; opacity: 1 !important; }
}

/* Measured reference type metrics; user-requested identity/media additions only. */
html { scrollbar-gutter: stable; }
:root {
  font-family: Inter, var(--locale-font, 'Portfolio Korean'), 'Portfolio Korean', 'Portfolio Japanese', 'Portfolio Han Simplified', 'Portfolio Han Traditional', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: 'cv02', 'cv11', 'ss03';
  line-height: 1.625;
}
.identity-brand {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto;
  column-gap: 1rem;
  align-items: start;
  justify-content: start;
}
.identity-brand .identity-name { grid-column: 1; grid-row: 1; }
.identity-brand .identity-role { grid-column: 1; grid-row: 2; }
.identity-photo {
  grid-column: 2; grid-row: 1 / span 2;
  width: 4rem; height: 4rem; object-fit: cover;
  border-radius: .75rem; border: 1px solid rgb(148 163 184 / .25);
}
.identity-role { font-size: 1.125rem; line-height: 1.75rem; }
.identity-tagline { max-width: 20rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: normal; }
.about-copy { font-size: 1rem; line-height: 1.625rem; letter-spacing: normal; font-weight: 400; }
.about-copy strong { font-weight: 500; color: var(--heading); }
.about-copy p { margin-bottom: 1rem; }
.about-copy p:last-child { margin-bottom: 0; }
.detail-shell { max-width: 1280px; }
.detail-header { max-width: none; }
.capture-notice { margin-top: .75rem; margin-bottom: 2.5rem; font-size: .75rem; line-height: 1.25rem; color: var(--muted); }
.media-strip a { transition: border-color 150ms ease, background-color 150ms ease; }
.media-strip a:hover { border-color: rgb(94 234 212 / .5); }
html[lang='ja'] .about-copy, html[lang^='zh'] .about-copy,
html[lang='ja'] .detail-prose, html[lang^='zh'] .detail-prose,
html[lang='ja'] .row-description, html[lang^='zh'] .row-description { word-break: normal; }
.toast { box-shadow: 0 10px 28px rgb(2 6 23 / .18); border-color: rgb(148 163 184 / .18); }
#language-dialog p, #language-dialog button { word-break: keep-all; overflow-wrap: anywhere; }
.language-fallback { max-width: 1280px; margin: 0 auto; padding: 1rem 3rem; }
.language-fallback a { display: inline-block; margin: .25rem 1rem .25rem 0; color: var(--accent); }
@media (min-width: 640px) { .identity-role { font-size: 1.25rem; line-height: 1.75rem; } }
@media (min-width: 1024px) { .identity-photo { width: 5rem; height: 5rem; } }
@media (max-width: 639px) { .identity-photo { margin-top: 1rem; width: 3.5rem; height: 3.5rem; } .identity-brand { column-gap: .75rem; } }
@media (max-width: 340px) { .identity-photo { width: 3rem; height: 3rem; } .identity-brand { column-gap: .75rem; } }
@media (prefers-reduced-motion: reduce) { .media-strip a { transition: none; } }

/* Locale controls inherit the current portfolio's navy/teal tokens and authored labels. */
[data-language-toggle] {
  position: fixed; z-index: 35;
  top: max(1.25rem, env(safe-area-inset-top)); right: max(1.5rem, env(safe-area-inset-right));
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-width: 44px; height: 44px; padding: 10px;
  border: 1px solid rgb(148 163 184 / .25); border-radius: 999px;
  color: var(--foreground, #94a3b8); background: var(--background, #0f172a);
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
[data-language-toggle]:hover, [data-language-toggle][aria-expanded='true'] {
  color: var(--accent, #5eead4); border-color: var(--accent, #5eead4);
}
[data-language-toggle] svg { width: 22px; height: 22px; flex: none; }
[data-language-toggle][hidden] { display: none; }
#language-dialog {
  position: fixed; inset: max(4.5rem, calc(env(safe-area-inset-top) + 3.5rem)) max(1.5rem, env(safe-area-inset-right)) auto auto;
  width: min(19rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 6rem); margin: 0; padding: 1.25rem;
  border: 1px solid rgb(148 163 184 / .25); border-radius: .75rem;
  color: var(--foreground, #94a3b8); background: var(--background, #0f172a);
  box-shadow: 0 16px 48px rgb(2 6 23 / .35); overflow-y: auto;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity 200ms ease, transform 200ms ease;
}
#language-dialog.is-language-open { opacity: 1; transform: translateY(0) scale(1); }
#language-dialog.is-language-closing { opacity: 0; transform: translateY(-6px) scale(.98); }
#language-dialog::backdrop { background: rgb(2 6 23 / .28); backdrop-filter: none; }
#language-dialog h2 { margin: 0 2.25rem .875rem 0; font-size: 1rem; line-height: 1.5; }
#language-dialog [data-language-close] {
  position: absolute; top: .5rem; right: .5rem; display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: .5rem; border: 0; border-radius: .25rem;
  color: inherit; background: transparent;
}
#language-dialog a[data-language-code] {
  display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .625rem .75rem;
  border-radius: .375rem; color: var(--heading, #e2e8f0); line-height: 1.4;
  text-decoration: none; transition: color 180ms ease, background-color 180ms ease;
}
#language-dialog a[data-language-code]:hover, #language-dialog a[aria-current='page'] {
  color: var(--accent, #5eead4); background: rgb(45 212 191 / .1);
}
#language-dialog a[aria-current='page'] { font-weight: 600; }
#language-dialog [data-language-reset] {
  display: block; width: 100%; min-height: 44px; margin-top: .75rem; padding: .75rem;
  border: 0; border-top: 1px solid rgb(148 163 184 / .2); border-radius: 0;
  background: transparent; color: var(--foreground, #94a3b8); text-align: start; line-height: 1.5;
}
#language-dialog [data-language-reset]:hover { color: var(--accent, #5eead4); }
@media (max-width: 639px) {
  [data-language-toggle] { top: max(.75rem, env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); }
  #language-dialog { top: max(4rem, calc(env(safe-area-inset-top) + 3.25rem)); right: max(.75rem, env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: reduce) {
  [data-language-toggle], #language-dialog, #language-dialog a[data-language-code] { transition: none; }
  #language-dialog, #language-dialog.is-language-closing { transform: none; }
}

html[lang="ko"]{--locale-font:'Portfolio Korean'}
html[lang="en"]{--locale-font:'Portfolio Latin'}
html[lang="ja"]{--locale-font:'Portfolio Japanese'}
html[lang="zh-Hans"]{--locale-font:'Portfolio Han Simplified'}
html[lang="zh-Hant"]{--locale-font:'Portfolio Han Traditional'}
html[lang="es"]{--locale-font:'Portfolio Latin'}
html[lang="fr"]{--locale-font:'Portfolio Latin'}

/* Mobile-only additions for the profile and touch-first media interactions. */
@media (max-width: 1023px) {
  .identity-brand {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: .875rem;
  }

  .identity-brand .identity-portrait {
    position: relative;
    flex: 0 0 clamp(3rem, 20vw, 5rem);
    width: clamp(3rem, 20vw, 5rem);
    align-self: stretch;
    overflow: hidden;
    border-radius: .75rem;
  }

  .identity-brand .identity-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: inherit;
  }

  .identity-brand .identity-heading {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
  }

  .identity-brand .identity-name {
    overflow-wrap: anywhere;
  }

  .identity-brand .identity-tagline { max-width: none; }

  .nav-link,
  .gallery-controls button,
  #language-dialog button,
  .media-strip > a,
  .media-strip > button {
    min-height: 44px;
  }

  .media-strip > a,
  .media-strip > button {
    min-width: 44px;
  }

  .media-strip {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* The identity markup returns to its existing grid at the desktop breakpoint. */
@media (min-width: 1024px) {
  .identity-brand .identity-portrait { display:block;position:relative;grid-column:2;grid-row:1 / span 2;width:5rem;height:5rem; }
  .identity-brand .identity-portrait .identity-photo { width:100%;height:100%; }
}

:root {font-family:'Portfolio Reference',var(--locale-font,'Portfolio Korean'),ui-sans-serif,system-ui,sans-serif;}
.social-links a,.social-links button {min-width:44px;min-height:44px;touch-action:manipulation;}
[data-language-toggle],.gallery-controls button,.dialog-controls button,.close-dialog {touch-action:manipulation;}
[data-image-status] {display:none;font-size:.75rem;}
.identity-portrait {border-radius:.75rem;overflow:hidden;}
.lightbox-frame {position:relative;min-height:100px;display:grid;place-items:center;}
.language-flag {flex:none;width:27px;height:18px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgb(148 163 184 / .15);}
#language-dialog.language-dialog--compact {padding:.5rem;width:min(16rem,calc(100vw - 1.5rem));}
#language-dialog .language-name {font-family:ui-sans-serif,system-ui,sans-serif;}
#language-dialog.language-dialog--compact a {gap:.75rem;min-height:48px;}
.toast {transform:translate(-50%,.5rem);}
.toast.is-visible {transform:translate(-50%,0);}

/* The enhancer adds this class only after it has initialized its states. */
.has-mobile-enhancements [data-image-state] { position: relative; }
.has-mobile-enhancements [data-image-state='pending'] [data-image-status],
.has-mobile-enhancements [data-image-state='error'] [data-image-status] {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  padding: .75rem;
  color: var(--muted, #94a3b8);
  text-align: center;
  line-height: 1.4;
  background: var(--background, #0f172a);
  pointer-events: none;
}
.has-mobile-enhancements [data-image-state='pending'] [data-image-status] {
  color: transparent;
  font-size: 0;
  background: transparent;
  isolation: isolate;
}
/* Preserve the former pending background pulse, independently of the spinner. */
.has-mobile-enhancements [data-image-state='pending'] [data-image-status]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--background, #0f172a);
  animation: image-pending-pulse 1.2s ease-in-out infinite alternate;
}
.has-mobile-enhancements [data-image-state='pending'] [data-image-status]::before {
  content: '';
  /* The accessible text still exists: do not let its anonymous grid row place the ring. */
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid color-mix(in srgb, var(--accent, #5eead4) 28%, transparent);
  border-top-color: var(--accent, #5eead4);
  border-radius: 50%;
  animation: image-pending-spin .8s linear infinite;
}
.has-mobile-enhancements [data-image-state='ready'] [data-image-status] { display: none; }

@keyframes image-pending-spin {
  to { transform: rotate(360deg); }
}
@keyframes image-pending-pulse {
  to { opacity: .68; }
}

.toast {
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .has-mobile-enhancements [data-image-state='pending'] [data-image-status] {
    transition: none;
    animation: none;
    will-change: auto;
  }
  .has-mobile-enhancements [data-image-state='pending'] [data-image-status]::before { animation: none; }
  .has-mobile-enhancements [data-image-state='pending'] [data-image-status]::after { animation: none; }
}

/* Adapted from Jase Smith, A Portal to Tomorrow (public CodePen qqgvZe, MIT).
   See assets/licenses/portal-MIT.txt. Geometry/motion only; no original content or images. */
.playground-launcher { position:fixed;right:max(1.5rem,env(safe-area-inset-right));bottom:max(1.5rem,env(safe-area-inset-bottom));z-index:32;display:grid;place-items:center;width:48px;height:48px;padding:10px;border:1px solid rgb(148 163 184/.3);border-radius:50%;background:#0f172a;color:#5eead4;transition:transform 220ms ease,border-color 220ms ease;touch-action:manipulation; }
.playground-launcher:hover {transform:rotate(18deg);border-color:#5eead4;}
/* Unchanged play polygon centroid is (26.6111929308,32) in its 64-square viewBox.
   Center its filled area, not only the square SVG viewport, inside the round button. */
.playground-launcher svg {display:block;width:100%;height:100%;transform-box:border-box;transform:translateX(8.420011045655373%);}
.playground-launcher:focus-visible,.portal-close:focus-visible {outline:2px solid #5eead4;outline-offset:4px;}
#playground-dialog {position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;color:#0f172a;opacity:0;transition:opacity 240ms ease;}
#playground-dialog::backdrop {background:rgb(15 23 42/.6);backdrop-filter:blur(12px);}
#playground-dialog.is-portal-open {opacity:1;}
.portal-close {position:absolute;z-index:4;top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#cbd5e1;font-size:1.5rem;cursor:pointer;touch-action:manipulation;}
.portal-shell {position:absolute;left:50%;top:50%;width:min(78vmin,640px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.9);transition:transform 360ms cubic-bezier(.16,1,.3,1);isolation:isolate;}
.is-portal-open .portal-shell {transform:translate(-50%,-50%) scale(1);}
.portal-rings {position:absolute;inset:8%;pointer-events:none;isolation:isolate;}
.portal-rings > i {position:absolute;top:50%;left:50%;width:88%;height:88%;border-radius:90% 95% 85% 105%;background:#0f0;mix-blend-mode:screen;filter:hue-rotate(0deg);transform:translate(var(--x,-50%),var(--y,-50%)) rotate(0deg);transform-origin:calc(-1 * var(--y)) calc(-1 * var(--x));box-shadow:0 0 2.5vmin 1vmin #000 inset,0 0 .75vmin 0 #fff;animation:portal-wobble calc(150ms * var(--t)) linear infinite;animation-delay:var(--delay);animation-play-state:paused;}
.portal-rings > i:nth-child(1){--x:-53%;--y:-53%;--t:37;--delay:-1.2s;}
.portal-rings > i:nth-child(2){--x:-47%;--y:-52%;--t:58;--delay:-4.8s;}
.portal-rings > i:nth-child(3){--x:-45%;--y:-50%;--t:46;--delay:-3.1s;}
.portal-rings > i:nth-child(4){--x:-53%;--y:-45%;--t:72;--delay:-8.1s;}
.portal-rings > i:nth-child(5){--x:-55%;--y:-45%;--t:62;--delay:-5.2s;}
.is-portal-open:not([data-paused]) .portal-rings>i {animation-play-state:running;}
@keyframes portal-wobble {to{filter:hue-rotate(360deg);transform:translate(var(--x),var(--y)) rotate(360deg);}}
.portal-core {position:absolute;inset:16%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.875rem;padding:clamp(1rem,3vmin,2rem);border-radius:50%;background:radial-gradient(circle,#fff 0%,rgb(255 255 255/.95) 50%,rgb(255 255 255/.2) 72%,transparent 76%);text-align:center;}
.portal-core h2 {font-size:clamp(1.25rem,4vmin,2rem);line-height:1.2;font-weight:700;color:#0f172a;letter-spacing:-.025em;}
.portal-core p {max-width:24rem;font-size:clamp(.75rem,2vmin,1rem);line-height:1.5;color:#334155;word-break:keep-all;overflow-wrap:anywhere;}
@media(max-width:639px){.playground-launcher{right:max(.75rem,env(safe-area-inset-right));bottom:max(.75rem,env(safe-area-inset-bottom));width:44px;height:44px;}.portal-shell{width:min(92vw,78dvh,540px);}.portal-core{inset:18%;}}
@media(prefers-reduced-motion:reduce){#playground-dialog,.portal-shell,.playground-launcher{transition:none}.portal-rings>i{animation:none;filter:hue-rotate(calc(var(--t)*4deg));}.playground-launcher:hover{transform:none;}}

/* PORT-27: restrained About emphasis and a complete, horizontally scrollable archive table. */
.about-copy--refinement27 strong {
  color: var(--heading);
  font-weight: 500;
}

.archive-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.archive-table--refinement27 {
  width: 100%;
  min-width: 50rem;
  table-layout: fixed;
}

.archive-table--refinement27 col.archive-year-col { width: 6rem; }
.archive-table--refinement27 col.archive-company-col { width: 8rem; }
.archive-table--refinement27 col.archive-link-col { width: 8rem; }
.archive-table--refinement27 .archive-year,
.archive-table--refinement27 .archive-company,
.archive-table--refinement27 .archive-link-cell,
.archive-table--refinement27 .archive-tech { display: table-cell; }
.archive-table--refinement27 .archive-year { white-space: nowrap; }
.archive-table--refinement27 .archive-company { overflow-wrap: anywhere; }
.archive-table--refinement27 .archive-link-cell { white-space: nowrap; }
.archive-table--refinement27 .project-cell,
.archive-table--refinement27 .archive-tech { min-width: 0; }

@media (max-width: 639px) {
  .archive-table--refinement27 { min-width: 50rem; }
}