/* Hallmark · shape: kept · genre: editorial · theme: Ink (deal 1/3, seed career-manufacturing-leader-recruiters-66b6·7c83980c·2026-11-05·r0) · redesign: restyle
 * hero: kept · nav: kept, scrolling row on phones · footer: kept · imagery: the product, redacted screenshots · signature: kept, the built systems as ruled wells · ink: paper
 * axes: light/grotesk-sans/chromatic-teal · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H3 E3 S4 R4 V3 · weakest: V, no hero action because restyle adds none; the contact button is kept at the foot */
@import url("./tokens.css");
@import url("./base.css");

/* Epilogue has no Hangul: Noto Sans KR carries Korean, so the display tracking is eased there */
:root {
  --font-display: "Epilogue", "Noto Sans KR", "Apple SD Gothic Neo", ui-sans-serif, system-ui, sans-serif;
  --font-body: var(--font-display);
  --color-scrim: oklch(16% 0 0 / 0.6);
  --tap: 48px;
}
html[lang="ko"] { --tracking-display: -0.02em; }
html { scroll-behavior: smooth; }
body { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

a { color: var(--color-ink); font-weight: 600; }
.wrap { width: 100%; max-width: calc(56rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* header: brand and language on one row, the nav a swipeable row under it on phones */
header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
header .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand lang" "nav nav"; align-items: center; column-gap: var(--space-md); padding-block: var(--space-xs) 0; }
header b { grid-area: brand; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-display); color: var(--color-ink); }
nav { grid-area: nav; display: flex; gap: var(--space-lg); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
nav::-webkit-scrollbar { display: none; }
nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
nav a:active { color: var(--color-accent); border-color: var(--color-accent); }

/* controls */
#lang { grid-area: lang; min-width: 52px; min-height: 40px; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; background: var(--color-paper-2); color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
#lang:active { background: var(--color-paper-3); }
#lang:disabled { color: var(--color-muted); cursor: not-allowed; }
@media (hover: hover) {
  nav a:hover { color: var(--color-accent); border-color: var(--color-accent); }
  #lang:hover { background: var(--color-paper-3); }
}

main { padding-bottom: var(--space-2xl); }
section { padding-top: var(--section-gap-s); }
section h2 { margin-bottom: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); font-size: var(--text-2xl); }
@media (min-width: 48rem) { section h2 { font-size: var(--text-section); margin-bottom: var(--space-xl); } }

/* hero */
.hero { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-md); align-items: end; padding-top: var(--space-xl); }
.photo { width: 96px; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); filter: saturate(0.65); }
.hero > div { display: contents; }
.hero h1 { grid-column: 1 / -1; grid-row: 2; font-size: var(--text-display-s); line-height: 1.05; color: var(--color-ink); max-width: 14ch; }
.hero p { grid-column: 2; grid-row: 1; align-self: end; font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
@media (min-width: 48rem) {
  .hero { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-xl); align-items: end; padding-top: var(--space-2xl); }
  .photo { width: 200px; }
  .hero > div { display: block; }
  .hero h1 { font-size: var(--text-display); max-width: 12ch; }
  .hero p { margin-top: var(--space-md); font-size: var(--text-md); }
}

/* stats: two by two on phones, four across from tablet up */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-xl); }
.stat { padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); font-size: var(--text-md); color: var(--color-ink-2); }
.stat span { font-size: var(--text-md); }
.stat b { display: block; margin-bottom: var(--space-2xs); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; letter-spacing: var(--tracking-display); color: var(--color-ink); font-variant-numeric: tabular-nums; overflow-wrap: normal; min-width: 0; }
@media (min-width: 48rem) { .stat b { font-size: var(--text-2xl); } .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); } .stat { padding: var(--space-lg); } }

/* skills: one column of ruled accordions on phones */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: var(--rule-hair) solid var(--color-ink); }
details.box { border-bottom: var(--rule-hair) solid var(--color-rule); }
summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--tap); padding: var(--space-sm) 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-ink); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-paper-2); font-weight: 600; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
details[open] summary::after { content: "–"; background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
summary:active::after { background: var(--color-paper-3); }
@media (hover: hover) { summary:hover::after { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); } }
details ul { margin: 0; padding: 0 0 var(--space-md) var(--space-lg); }
details li { padding-block: var(--space-2xs); }
@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); align-items: start; }
}

/* projects: a ruled list; the dates drop under the title on phones */
.proj { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-weight: 600; color: var(--color-ink); }
section#projects { padding-bottom: 0; }
#projects h2 + .proj { border-top: 0; }
.proj small { display: block; margin-top: var(--space-2xs); font-size: var(--text-md); font-weight: 400; color: var(--color-muted); }
.proj time { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 40rem) { .proj { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-lg); } }

/* built systems: a well with a swipeable strip of screenshots */
.built { margin-bottom: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); overflow: clip; }
.built h3 { padding: var(--space-md) var(--space-md) 0; font-size: var(--text-title); }
.built > p { padding: var(--space-xs) var(--space-md) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.shots { display: flex; gap: var(--space-sm); overflow-x: auto; padding: 0 var(--space-md) var(--space-md); scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-md); -webkit-overflow-scrolling: touch; }
.shots figure { flex: none; width: min(78vw, 280px); margin: 0; scroll-snap-align: start; }
.shots img { width: 100%; height: 176px; object-fit: cover; object-position: top; border-radius: 10px; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); cursor: zoom-in; filter: saturate(0.8); }
.shots figcaption { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
@media (min-width: 48rem) { .built h3, .built > p { padding-inline: var(--space-lg); } .shots { padding-inline: var(--space-lg); scroll-padding-inline: var(--space-lg); } }

/* career */
.job { padding: var(--space-md) 0 var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
#career h2 + .job { border-top: var(--rule-hair) solid var(--color-ink); }
.job h3 { font-size: var(--text-xl); }
.job .meta { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.job ul { margin: var(--space-sm) 0 0; padding-left: var(--space-lg); }
.job li { padding-block: var(--space-2xs); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.tags span { padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-md); font-weight: 600; color: var(--color-ink); background: var(--color-paper); }

/* contact: an ink button, full width on phones */
.contact { display: block; padding: var(--space-md) var(--space-lg); border-radius: 10px; background: var(--color-ink); color: var(--color-paper); font-size: var(--text-lg); font-weight: 600; text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: background-color var(--dur-micro) var(--ease-out); }
.contact:active { background: var(--color-ink-2); }
@media (hover: hover) { .contact:hover { background: var(--color-accent); } }
@media (min-width: 40rem) { .contact { display: inline-block; } }

footer { padding-block: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); border-top: var(--rule-hair) solid var(--color-rule); }

/* lightbox: near full screen on phones */
#lb { width: min(94vw, 1400px); max-height: 92dvh; padding: var(--space-sm); border: 0; border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); cursor: zoom-out; overflow: auto; }
#lb::backdrop { background: var(--color-scrim); }
#lb img { width: 100%; }
#lb p { margin-top: var(--space-xs); font-weight: 600; color: var(--color-ink); }