/* ─────────────────────────────────────────────────────────
   Design tokens
   Light + Minimal + 큰 타이포 (warm-paper neutrals + ink black)
   ───────────────────────────────────────────────────────── */
:root {
  /* Deep forest accent + warm cream-yellow paper neutrals */
  --bg:        #FDFCF8;          /* near-white warm paper */
  --bg-elev:   #F4EFE2;          /* visibly darker cream card surface */
  --ink:       #0E1512;          /* near-black with the faintest forest tint */
  --ink-soft:  #1F2622;
  --muted:     #7A7263;          /* warm paper-gray */
  --line:      #E5DECB;          /* cream hairline */
  --line-soft: #EFEADC;          /* faint cream line */

  --accent:    #2F5D48;          /* deep forest moss */
  --accent-soft: rgba(47, 93, 72, .12);
  --accent-ink: #FDFCF8;          /* text on accent — matches bg */

  --pad-x:     clamp(20px, 5vw, 80px);
  --max-w:     1320px;

  --font-ko:   'Pretendard Variable', 'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-en:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --easing:    cubic-bezier(.6,.05,.05,1);
}

/* ─────────────────────────────────────────────────────────
   Reset-ish
   ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: auto; /* lenis handles it */
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ko);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'ss02', 'kern';
  overflow-x: hidden;
  cursor: none; /* custom cursor takes over */
}
@media (hover: none) {
  body { cursor: auto; }
  .cursor { display: none; }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }

::selection { background: var(--accent); color: #FFFFFF; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────────
   Cursor
   ───────────────────────────────────────────────────────── */
.cursor {
  position: fixed; inset: 0 auto auto 0;
  pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
}
.cursor__dot, .cursor__ring {
  position: absolute; left: 0; top: 0;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor__dot {
  width: 6px; height: 6px;
  background: #FFFFFF;
}
.cursor__ring {
  width: 36px; height: 36px;
  border: 1.5px solid #FFFFFF;
  transition: width .25s var(--easing), height .25s var(--easing), opacity .25s;
  opacity: .55;
}
.cursor.is-hover .cursor__ring {
  width: 64px; height: 64px;
  opacity: .9;
}

/* ─────────────────────────────────────────────────────────
   Scroll progress
   ───────────────────────────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--accent);
  z-index: 100;
  transform-origin: left center;
}

/* ─────────────────────────────────────────────────────────
   Nav
   ───────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 90;
  padding: 18px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  transition: backdrop-filter .3s, background .3s, border-color .3s, padding .3s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(253, 252, 248, .78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
  padding-top: 12px; padding-bottom: 12px;
}

.nav__brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: -.01em;
}
.nav__brand-mark {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
  font-size: 12px; font-weight: 800;
}
.nav__brand-name { font-size: 15px; }

.nav__menu {
  display: flex; align-items: center; gap: 6px;
}
.nav__menu a {
  padding: 10px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.nav__menu a:hover {
  background: rgba(10,10,10,.06);
}

.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  transition: transform .2s, background .2s;
}
.nav__cta:hover { background: var(--accent); transform: translateY(-1px); }

.nav__right {
  display: inline-flex; flex-direction: row; align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.nav__lang {
  display: inline-flex; flex-direction: row; align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__lang a {
  padding: 4px 6px;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.nav__lang a:hover { color: var(--ink); }
.nav__lang a.is-active {
  color: var(--ink);
  background: var(--accent-soft);
}
.nav__lang span { opacity: .4; }

@media (max-width: 760px) {
  .nav__menu { display: none; }
  .nav__lang { font-size: 11px; }
  .nav__right { gap: 8px; }
}

/* ─────────────────────────────────────────────────────────
   Layout helpers
   ───────────────────────────────────────────────────────── */
main { width: 100%; }
section {
  padding: clamp(80px, 14vh, 160px) var(--pad-x);
  position: relative;
}
.section-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 36px;
}
.section-label span:first-child {
  font-weight: 700; color: var(--ink);
}
.section-label::before {
  content: ""; display: inline-block;
  width: 28px; height: 1px; background: var(--ink);
}

.muted { color: var(--muted); font-weight: 400; }

/* ─────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  padding-top: clamp(120px, 16vh, 200px);
  padding-bottom: 120px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  overflow: hidden;
}
.hero__meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-en);
  font-size: 13px; color: var(--muted);
  margin-bottom: 40px;
}
.hero__meta-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #34C759;
  box-shadow: 0 0 0 0 rgba(52,199,89,.6);
  animation: pulse 2.4s var(--easing) infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 12px rgba(52,199,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}

.hero__title {
  margin: 0;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
  font-size: clamp(48px, 11.5vw, 188px);
}
.hero__line {
  display: block;
  overflow: hidden;
}
.hero__line .char {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.hero__line--accent .char { color: var(--accent); }

.hero__sub {
  margin-top: clamp(36px, 5vh, 64px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  max-width: 1100px;
}
.hero__sub-en {
  font-family: var(--font-en);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: -.01em;
}
.hero__sub-ko {
  font-size: clamp(14px, 1.25vw, 17px);
  color: var(--muted);
  margin: 0;
  max-width: 38ch;
}
.hero__sub > p {
  opacity: 0; transform: translateY(20px);
}

.hero__scroll {
  position: fixed; bottom: 24px; right: var(--pad-x);
  z-index: 80;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-en);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
  transition: opacity .35s var(--easing), transform .35s var(--easing);
}
.hero__scroll.is-hidden {
  opacity: 0;
  transform: translateY(8px);
}
.hero__scroll-label { color: var(--muted); }
.hero__scroll-arrow {
  color: var(--ink);
  animation: scrollNudge 1.6s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes scrollNudge {
  0%   { transform: translateY(-4px); opacity: .35; }
  50%  { transform: translateY(2px);  opacity: 1; }
  100% { transform: translateY(8px);  opacity: 0; }
}

@media (max-width: 760px) {
  .hero__sub { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
}

/* ─────────────────────────────────────────────────────────
   About
   ───────────────────────────────────────────────────────── */
.about__grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  max-width: var(--max-w);
}
.about__lead .big-text {
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.35;
  letter-spacing: -.022em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 28px 0;
}
.about__lead .big-text em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 60%, var(--accent-soft) 60%);
  padding: 0 .05em;
}
.about__lead .big-text strong { font-weight: 700; }
.about__lead .big-text--small {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.6;
  letter-spacing: -.01em;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: 4px;
}

.facts__row {
  display: grid; grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.facts__row:first-child { border-top: 1px solid var(--line); }
.facts__row dt {
  font-family: var(--font-en);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.facts__row dd {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}
.facts__row dd b { font-weight: 700; }
.facts__sub {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-family: var(--font-en);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  letter-spacing: .02em;
  font-weight: 600;
  vertical-align: middle;
}

.strengths {
  margin-top: clamp(72px, 10vh, 120px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.strengths__item {
  background: var(--bg);
  padding: 36px 32px;
}
.strengths__num {
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 18px;
}
.strengths__item h3 {
  margin: 0 0 12px 0;
  font-size: 22px;
  letter-spacing: -.02em;
  font-weight: 700;
}
.strengths__item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.62;
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .strengths { grid-template-columns: 1fr; }
}

/* word-by-word reveal */
[data-reveal-words] .word {
  display: inline-block;
  overflow: hidden;
}
[data-reveal-words] .word-inner {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

/* generic line reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.is-revealed[data-reveal] {
  opacity: 1; transform: none;
  transition: opacity .8s var(--easing), transform .8s var(--easing);
}

/* ─────────────────────────────────────────────────────────
   Work — Projects
   ───────────────────────────────────────────────────────── */
.work__title {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: -.035em;
  margin: 0 0 80px 0;
  line-height: 1;
}

.project {
  position: relative;
  /* default — overridden per-project in JS based on copy column height */
  min-height: 220vh;
}
.project__sticky {
  position: sticky;
  top: 0;
  /* min-height keeps the pin a full viewport tall, but lets it stretch when
     the copy column is taller than 100vh (Claude Widget) — preventing the
     copy from overlapping into the next project. */
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  padding: 80px 0 40px;
}

.project__visual {
  position: relative;
  height: 100%;
  display: grid;
  /* Vertically centered, horizontally aligned to the LEFT side of the
     visual column — gives a comfortable gap from the copy column. */
  place-items: center start;
  /* Allow cards to slightly cross into the copy column on fan-out so the
     screenshots stay readable. The copy column has higher z-index so text
     remains on top. */
  overflow: visible;
  padding: 8px 0 8px 0;
}

/* Copy column sits above the visual so any overlap stays legible. */
.project__copy {
  position: relative;
  z-index: 5;
}

@media (max-width: 1000px) {
  .project__visual { place-items: center; padding: 8px; overflow: hidden; }
}

.project__copy {
  display: flex; flex-direction: column;
  max-width: 560px;
}
.project__index {
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: .14em;
  color: var(--muted);
}
.project__role {
  margin-top: 20px;
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: -.01em;
}
.project__name {
  margin: 8px 0 12px 0;
  /* Cap at 44px on laptops so long English compounds fit in the ~580–620px
     copy column at 1280–1600px viewports. Larger viewports get a bigger cap
     via the @media (min-width: 1700px) block at the bottom. */
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  /* For Korean — break at spaces / middots normally.
     For English — only break at <wbr> hints or, last resort, at chars.
     Never auto-hyphenate (mangles brand names like Precision-MicroEndo…). */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
.project__badge {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  padding: 4px 10px;
  font-size: 11px;
  background: var(--accent); color: #fff;
  border-radius: 999px;
  letter-spacing: .04em;
  font-weight: 700;
  font-family: var(--font-en);
  white-space: nowrap;
  line-height: 1.4;
}
.project__badge--ai { background: var(--ink); }

.project__tag {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 28px 0;
  line-height: 1.55;
  max-width: 50ch;
}

.project__points {
  border-top: 1px solid var(--line);
  margin-bottom: 28px;
}
.project__points li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  position: relative;
  padding-left: 22px;
}
.project__points li::before {
  content: "";
  position: absolute; left: 0; top: 25px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--ink);
}
.project__points li b { font-weight: 700; color: var(--ink); }

.project__why {
  background: var(--ink); color: var(--bg);
  padding: 20px 22px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 28px 0;
}
.project__why b { color: var(--accent); font-weight: 700; }

.project__stack {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 24px;
}
.project__stack span {
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--font-en);
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--bg-elev);
}

.project__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-en);
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color .2s, border-color .2s;
}
.project__link:hover { color: var(--accent); border-color: var(--accent); }

/* ─────────────────────────────────────────────────────────
   Store badges — global component
   Uses Apple/Google official badges; size aligned by height.
   ───────────────────────────────────────────────────────── */
.store-badges {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.badge-store {
  display: inline-block;
  line-height: 0;
  border-radius: 12px;
  transition: transform .2s var(--easing), opacity .2s;
}
.badge-store img {
  display: block;
  height: 48px;       /* common visual height; aspect ratios preserved */
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.badge-store:hover { transform: translateY(-2px); opacity: .92; }
.badge-store:active { transform: translateY(0); }

@media (max-width: 480px) {
  .badge-store img { height: 44px; }
}

@media (max-width: 1000px) {
  .project { min-height: auto; }
  .project__sticky {
    position: relative; height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0;
    align-items: start;
  }
  .project__visual { min-height: 0; }
}

/* ─────────────────────────────────────────────────────────
   Precision — 3-frame fan stack (live site screenshots)
   ───────────────────────────────────────────────────────── */
.precision-stack {
  position: relative;
  width: 100%;
  max-width: 500px;             /* slightly larger, still inside column */
  aspect-ratio: 4 / 3.2;
  margin-top: -200px;           /* align with the "PrecisionMicroEndodontics" title line */
  /* 3D context for tilt — small angles only, won't clip cards */
  perspective: 1600px;
  perspective-origin: 50% 40%;
}

@media (max-width: 1000px) {
  .precision-stack { margin-top: 0; }
}
.precision-stack .site-frame {
  position: absolute;
  margin: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
/* Base position — all cards centered horizontally (12% gutter both sides).
   The fan-out + tilt happens in JS via GSAP scrub. */
.precision-stack__back  { top: 4%;  left: 12%; width: 76%; z-index: 1; opacity: .9; }
.precision-stack__mid   { top: 9%;  left: 12%; width: 76%; z-index: 2; opacity: .95; }
.precision-stack__front { top: 14%; left: 12%; width: 76%; z-index: 3; }

@media (max-width: 1000px) {
  .precision-stack { aspect-ratio: 5 / 4; max-width: 460px; perspective: 1200px; }
  .precision-stack__back  { width: 80%; left: 10%; }
  .precision-stack__mid   { width: 80%; left: 10%; }
  .precision-stack__front { width: 80%; left: 10%; }
}

@media (max-width: 1000px) {
  /* On mobile the scroll-scrubbed fan-out is disabled (no sticky pin),
     so give all three cards a clearly readable staggered default position. */
  .precision-stack {
    aspect-ratio: 4 / 3.6;
    max-width: 100%;
    margin: 0 auto;
    perspective: none;
  }
  .precision-stack__back  { width: 84%; left: 14%; top: 0;   transform: rotate(2deg);  opacity: 1; }
  .precision-stack__mid   { width: 84%; left: 2%;  top: 14%; transform: rotate(-1.5deg); opacity: 1; }
  .precision-stack__front { width: 88%; left: 6%;  top: 28%; transform: rotate(0); opacity: 1; }
}

@media (max-width: 600px) {
  .site-frame__chrome { padding: 8px 10px; gap: 6px; }
  .site-frame__chrome > span { width: 8px; height: 8px; }
  .site-frame__url {
    font-size: 10px;
    padding: 4px 8px;
    margin: 0 6px;
  }
}

/* ─────────────────────────────────────────────────────────
   Live site frame (real screenshot inside browser chrome)
   ───────────────────────────────────────────────────────── */
.site-frame {
  width: 100%; max-width: 720px;
  background: var(--bg-elev);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(10,10,10,.04),
    0 30px 60px -20px rgba(10,10,10,.20),
    0 8px 20px -10px rgba(10,10,10,.12);
  overflow: hidden;
  border: 1px solid var(--line);
}
.site-frame__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: #F0EBDB;
  border-bottom: 1px solid var(--line-soft);
}
.site-frame__chrome > span {
  width: 11px; height: 11px; border-radius: 999px;
}
.site-frame__chrome > span:nth-child(1) { background: #FF5F57; }
.site-frame__chrome > span:nth-child(2) { background: #FEBC2E; }
.site-frame__chrome > span:nth-child(3) { background: #27C840; }
.site-frame__url {
  flex: 1;
  min-width: 0;
  margin: 0 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  background: var(--bg);
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-frame__shot {
  width: 100%; height: auto; display: block;
}

/* ─────────────────────────────────────────────────────────
   Project visuals — Browser frame
   ───────────────────────────────────────────────────────── */
.visual--browser {
  width: 100%; max-width: 640px;
  background: var(--bg-elev);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(10,10,10,.04),
    0 30px 60px -20px rgba(10,10,10,.18),
    0 8px 20px -10px rgba(10,10,10,.12);
  overflow: hidden;
  border: 1px solid var(--line);
}
.visual__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: #F0EBDB;
  border-bottom: 1px solid var(--line-soft);
}
.visual__chrome > span {
  width: 11px; height: 11px; border-radius: 999px;
  background: #E0DBCF;
}
.visual__chrome > span:nth-child(1) { background: #FF5F57; }
.visual__chrome > span:nth-child(2) { background: #FEBC2E; }
.visual__chrome > span:nth-child(3) { background: #27C840; }
.visual__url {
  flex: 1;
  margin: 0 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  background: var(--bg);
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
}
.visual__screen {
  aspect-ratio: 16 / 11;
  padding: 28px;
  display: flex; flex-direction: column;
  background: var(--bg-elev);
}

/* Precision screen */
.visual__screen--precision {
  background: linear-gradient(180deg, #F4EFE2 0%, #E5DEC9 100%);
}
.precision-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.precision-hero__pre {
  font-family: var(--font-en);
  font-size: 10px; letter-spacing: .25em;
  color: #8E7B5A;
}
.precision-hero__title {
  font-family: var(--font-en);
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 12px 0 16px;
  line-height: 1.05;
  color: #0A0A0A;
}
.precision-hero__cta {
  font-family: var(--font-en);
  font-size: 12px; font-weight: 600;
  padding: 10px 16px;
  background: #0A0A0A; color: #FAFAF7;
  border-radius: 999px;
}
.precision-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.precision-card {
  background: rgba(10,10,10,.03);
  border: 1px solid var(--line-soft);
  padding: 10px 12px;
  font-size: 11px; color: var(--ink-soft);
  border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────
   DSAT — figma slide stack
   ───────────────────────────────────────────────────────── */
.dsat-stack {
  position: relative;
  width: 100%; max-width: 560px;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
}
.dsat-fig {
  position: absolute;
  margin: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow:
    0 20px 40px -16px rgba(10,10,10,.20),
    0 6px 16px -8px rgba(10,10,10,.12);
  overflow: hidden;
  will-change: transform;
}
.dsat-fig img {
  width: 100%; height: auto; display: block;
  background: #F8F8F6;
}
.dsat-fig figcaption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 4px 10px;
  background: rgba(10,10,10,.85); color: #FAFAF7;
  font-family: var(--font-en);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* No base CSS rotate — GSAP owns the rotate property end-to-end so the
   scrub doesn't fight the stylesheet on first paint. */
.dsat-fig--back  { top: 0;   left: 8%;   width: 70%; z-index: 1; }
.dsat-fig--mid   { top: 18%; left: 24%;  width: 70%; z-index: 2; }
.dsat-fig--front { top: 36%; left: 4%;   width: 72%; z-index: 3; }

@media (max-width: 1000px) {
  .dsat-stack { aspect-ratio: 5 / 4; }
}

/* Legacy DSAT screen block (unused now) */
.visual__screen--dsat {
  background: #FFFFFF;
  font-family: var(--font-en);
}
.dsat-bar {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 10px; margin-bottom: 18px;
}
.dsat-bar__time { font-family: var(--font-mono); }
.dsat-q__num { margin: 0 0 4px; font-size: 11px; color: var(--muted); font-weight: 600; }
.dsat-q__body { margin: 0 0 18px; font-size: clamp(13px, 1.4vw, 17px); color: var(--ink); line-height: 1.5; }
.dsat-choices { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dsat-choices li {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.dsat-choices .is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.dsat-foot {
  display: flex; justify-content: space-between;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--muted);
}
.dsat-foot__next { color: var(--ink); font-weight: 600; }

/* ─────────────────────────────────────────────────────────
   Mentoring — dual-portal stack
   ───────────────────────────────────────────────────────── */
.ment-stack {
  position: relative;
  width: 100%; max-width: 580px;
  aspect-ratio: 5 / 4;
}
.ment-stack .site-frame {
  position: absolute;
  width: 78%;
}
.ment-stack__a { top: 0;   left: 0;     transform: rotate(-3deg); z-index: 2; }
.ment-stack__b { bottom: 0; right: 0;   transform: rotate(2deg);  z-index: 1; }

.ment-stack__caption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 4px 10px;
  background: rgba(10,10,10,.85); color: #FAFAF7;
  font-family: var(--font-en);
  font-size: 10.5px; font-weight: 600;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 1000px) {
  .ment-stack { aspect-ratio: 4 / 5; max-width: 460px; }
}

/* Legacy mentoring screen block (unused) */
.visual__screen--mentoring {
  background: linear-gradient(180deg, #E8E2CF 0%, #F4EFE2 100%);
}
.ment-head { margin-bottom: 16px; }
.ment-head__logo {
  font-family: var(--font-en);
  font-size: 10px; letter-spacing: .2em;
  color: var(--muted);
}
.ment-head__title {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.025em;
  margin-top: 6px;
}
.ment-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 1;
}
.ment-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ment-card__avatar {
  width: 32px; height: 32px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 24px;
}
.ment-card__name { font-size: 13px; font-weight: 700; }
.ment-card__meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ─────────────────────────────────────────────────────────
   Phones (Apple game) — flex-based so GSAP can use transform freely
   ───────────────────────────────────────────────────────── */
.phones {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}
.phone {
  position: relative;
  flex: 0 0 auto;
  width: clamp(160px, 17vw, 220px);
  aspect-ratio: 9 / 19.5;
  background: #0A0A0A;
  border-radius: 34px;
  padding: 8px;
  box-shadow:
    0 30px 60px -20px rgba(10,10,10,.30),
    0 12px 30px -12px rgba(10,10,10,.18);
  will-change: transform;
}
.phone__screen {
  width: 100%; height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #FFF8EE;
}
.phone__screen img {
  width: 100%; height: 100%; object-fit: cover;
}
.phone--a { margin-right: -56px; z-index: 2; transform: rotate(-8deg) translateY(8px); }
.phone--b { z-index: 3; transform: rotate(0deg) translateY(-6px); }
.phone--c { margin-left: -56px; z-index: 2; transform: rotate(8deg) translateY(8px); }

@media (max-width: 1000px) {
  .phones { height: auto; padding: 12px 0; }
}
@media (max-width: 600px) {
  .phone { width: clamp(120px, 28vw, 160px); }
  .phone--a { margin-right: -36px; }
  .phone--c { margin-left: -36px; }
}

/* ─────────────────────────────────────────────────────────
   Claude Widget mockup — true to actual SwiftUI design
   (Claude orange + Codex green dual-provider tracking)
   ───────────────────────────────────────────────────────── */
.cw-stage {
  width: 100%; max-width: 580px;
  display: flex; flex-direction: column;
  gap: 22px;
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(135deg, #5BA0E8 0%, #5DD4B0 50%, #F5C16B 100%);
  box-shadow:
    0 30px 60px -20px rgba(10,10,10,.20),
    0 8px 20px -10px rgba(10,10,10,.12);
}

/* macOS menu bar status item */
.cw-menubar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20,20,22,.92);
  color: #F4F4F5;
  font-family: var(--font-en);
  font-size: 11.5px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.cw-menubar__app { font-weight: 600; opacity: .92; }
.cw-menubar__app:first-child { font-weight: 700; }
.cw-menubar__spacer { flex: 1; }
.cw-menubar__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-weight: 700;
}
.cw-menubar__pill b { font-weight: 700; }
.cw-menubar__sys { opacity: .8; font-weight: 500; }

.cw-dot {
  width: 7px; height: 7px; border-radius: 999px;
  display: inline-block;
}
.cw-dot--claude { background: #F97316; box-shadow: 0 0 0 2px rgba(249,115,22,.18); }
.cw-dot--codex  { background: #10B981; box-shadow: 0 0 0 2px rgba(16,185,129,.18); }

/* Popover card (dark glass) */
.cw-pop {
  background: rgba(28,28,32,.92);
  color: #E8E8EB;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 12px 30px -8px rgba(0,0,0,.35);
  font-family: var(--font-en);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.cw-pop__head {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(232,232,235,.55);
  margin-bottom: 14px;
}
.cw-pop__row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  grid-template-areas:
    "brand pct   stats"
    "brand sub   stats";
  align-items: center;
  column-gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cw-pop__row:first-of-type { border-top: 0; }
.cw-pop__brand {
  grid-area: brand;
  font-size: 11px; letter-spacing: .14em; font-weight: 700;
}
.cw-pop__brand--claude { color: #F97316; }
.cw-pop__brand--codex  { color: #10B981; }
.cw-pop__pct {
  grid-area: pct;
  font-size: 32px; font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.cw-pop__sub {
  grid-area: sub;
  font-size: 11px; color: rgba(232,232,235,.55);
  margin-top: 2px;
}
.cw-pop__stats {
  grid-area: stats;
  display: flex; gap: 16px;
  text-align: right;
}
.cw-pop__stats > div { display: flex; flex-direction: column; }
.cw-pop__stats b { font-size: 13px; font-weight: 700; color: #F4F4F5; }
.cw-pop__stats span { font-size: 10px; color: rgba(232,232,235,.45); }

.cw-pop__foot {
  display: flex; justify-content: space-between;
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 11.5px;
  color: rgba(232,232,235,.65);
}

/* iOS Lock Screen widget (rectangular) */
.cw-lock {
  background: rgba(20,20,22,.55);
  color: #FFFFFF;
  border-radius: 14px;
  padding: 14px 16px;
  font-family: var(--font-en);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}
.cw-lock__time {
  font-size: 28px; font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.cw-lock__date {
  font-size: 11px; opacity: .7; margin-top: 2px;
  margin-bottom: 12px;
}
.cw-lock__widget {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 12px;
}
.cw-lock__widget b { font-size: 14px; font-weight: 800; }
.cw-lock__lbl { opacity: .55; }
.cw-lock__sep { opacity: .4; margin: 0 2px; }

@media (max-width: 600px) {
  .cw-stage {
    padding: 16px;
    gap: 16px;
    border-radius: 18px;
  }
  .cw-menubar {
    gap: 8px;
    padding: 6px 10px;
    font-size: 10.5px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  /* Hide secondary macOS app labels on narrow screens — keep Finder + spacer + pill + clock */
  .cw-menubar__app:nth-child(2),
  .cw-menubar__app:nth-child(3),
  .cw-menubar__app:nth-child(4) { display: none; }
  .cw-menubar__pill { padding: 3px 8px; gap: 4px; }
  .cw-menubar__sys:nth-of-type(1) { display: none; }

  .cw-pop { padding: 14px 14px; }
  .cw-pop__head { font-size: 10px; margin-bottom: 10px; }
  .cw-pop__row {
    grid-template-columns: 56px 1fr auto;
    column-gap: 10px;
    padding: 10px 0;
  }
  .cw-pop__brand { font-size: 10px; }
  .cw-pop__pct { font-size: 26px; }
  .cw-pop__sub { font-size: 10px; }
  .cw-pop__stats { gap: 10px; }
  .cw-pop__stats b { font-size: 12px; }
  .cw-pop__stats span { font-size: 9px; }
  .cw-pop__foot { font-size: 10.5px; padding-top: 10px; }

  .cw-lock { padding: 12px 14px; }
  .cw-lock__time { font-size: 24px; }
  .cw-lock__date { font-size: 10.5px; margin-bottom: 10px; }
  .cw-lock__widget {
    flex-wrap: wrap;
    gap: 6px;
    padding: 9px 10px;
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .cw-menubar__app:first-child { display: none; }
  .cw-pop__row { grid-template-columns: 48px 1fr auto; column-gap: 8px; }
  .cw-pop__pct { font-size: 22px; }
  .cw-pop__stats { gap: 8px; }
}

/* ─────────────────────────────────────────────────────────
   Mac mockup (legacy, kept but unused)
   ───────────────────────────────────────────────────────── */
.mac {
  width: 100%; max-width: 620px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow:
    0 30px 60px -20px rgba(10,10,10,.18),
    0 8px 20px -10px rgba(10,10,10,.12);
  overflow: hidden;
}
.mac__bar {
  background: linear-gradient(180deg, #F1EDE3, #E8E3D6);
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.mac__btn {
  display: inline-block;
  width: 11px; height: 11px; border-radius: 999px;
  margin-right: 6px;
}
.mac__btn:nth-child(1) { background: #FF5F57; }
.mac__btn:nth-child(2) { background: #FEBC2E; }
.mac__btn:nth-child(3) { background: #27C840; }

.mac__menubar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 4px 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(10,10,10,.06);
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--ink-soft);
}
.mac__menu-spacer { flex: 1; }
.mac__widget {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: var(--ink); color: var(--bg);
  border-radius: 6px;
}
.mac__widget img { width: 14px; height: 14px; filter: invert(1) brightness(2); }
.mac__widget-num { font-weight: 700; }
.mac__widget-meta { color: rgba(255,255,255,.55); font-size: 11px; }

.mac__body {
  padding: 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F6F0 100%);
  min-height: 280px;
  display: grid; place-items: start end;
}
.mac__dropdown {
  width: 280px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 12px 30px -10px rgba(10,10,10,.18);
}
.mac__dropdown-row {
  display: flex; justify-content: space-between;
  font-size: 12px;
  padding: 6px 0;
}
.mac__dropdown-row--muted { color: var(--muted); }
.mac__dropdown-row b { font-weight: 700; }
.mac__dropdown-bar {
  height: 6px; background: var(--line-soft);
  border-radius: 999px;
  margin: 4px 0 12px;
  overflow: hidden;
}
.mac__dropdown-bar > div {
  height: 100%; background: var(--accent);
  border-radius: 999px;
}

/* ─────────────────────────────────────────────────────────
   Stack
   ───────────────────────────────────────────────────────── */
.stack__title {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: -.035em;
  margin: 0 0 60px 0;
  line-height: 1;
}
.stack__groups {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stack__group {
  background: var(--bg);
  padding: 28px 24px;
}
.stack__group h4 {
  margin: 0 0 16px 0;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.stack__group ul {
  display: flex; flex-direction: column; gap: 10px;
}
.stack__group li {
  font-size: 17px;
  letter-spacing: -.01em;
  font-weight: 500;
  color: var(--ink);
}
@media (max-width: 1000px) {
  .stack__groups { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .stack__groups { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   Career timeline
   ───────────────────────────────────────────────────────── */
.career__title {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: -.035em;
  margin: 0 0 60px 0;
  line-height: 1;
}
.timeline {
  border-top: 1px solid var(--line);
}
.timeline__item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  transition: background .3s;
}
.timeline__item:hover {
  background: rgba(10,10,10,.02);
}
.timeline__year {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -.01em;
}
.timeline__body h4 {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.timeline__body p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.timeline__body p b { font-weight: 700; }

@media (max-width: 700px) {
  .timeline__item { grid-template-columns: 1fr; gap: 8px; }
}

/* ─────────────────────────────────────────────────────────
   Education / Certificates / Languages
   ───────────────────────────────────────────────────────── */
.creds__title {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: -.035em;
  margin: 0 0 60px 0;
  line-height: 1;
}
.creds__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.creds__col {
  background: var(--bg);
  padding: 32px 28px;
}
.creds__col h4 {
  margin: 0 0 24px 0;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.creds__list { display: flex; flex-direction: column; gap: 22px; }
.creds__list > li {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.creds__list > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.creds__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
}
.creds__meta {
  font-family: var(--font-en);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}
.creds__list p {
  margin: 8px 0 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

@media (max-width: 1000px) {
  .creds__grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   Contact
   ───────────────────────────────────────────────────────── */
.contact__title {
  font-size: clamp(40px, 7vw, 100px);
  font-weight: 800;
  letter-spacing: -.04em;
  margin: 0 0 60px 0;
  line-height: 1.02;
}
.contact__title-accent { color: var(--accent); }

.contact__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.contact__card {
  background: var(--bg);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background .25s, color .25s;
}
.contact__card:hover { background: var(--ink); color: var(--bg); }
.contact__card:hover .contact__card-label { color: rgba(250,250,247,.6); }
.contact__card-label {
  font-family: var(--font-en);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.contact__card-value {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact__note {
  margin-top: 36px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

@media (max-width: 700px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__card { padding: 24px 22px; }
  .contact__card-value { font-size: 20px; }
}

/* ─────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────── */
.foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px var(--pad-x);
  border-top: 1px solid var(--line);
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 700px) {
  .foot { flex-direction: column; gap: 6px; }
}

/* ─────────────────────────────────────────────────────────
   Large viewport (≥1700px — 27"+ external monitors)
   Default clamp() caps were tuned for 1280–1600px laptops. On wider
   screens content felt small and lost. Bump max content width, gutters,
   and typography caps so the page scales up gracefully.
   ───────────────────────────────────────────────────────── */
@media (min-width: 1700px) {
  :root {
    --max-w: 1560px;
    --pad-x: clamp(60px, 5vw, 140px);
  }
  .hero__title { font-size: clamp(160px, 11vw, 240px); }
  .hero__sub-en { font-size: clamp(20px, 1.4vw, 26px); }
  .hero__sub-ko { font-size: clamp(18px, 1.3vw, 24px); }

  .about__lead .big-text { font-size: clamp(36px, 2.6vw, 50px); }
  .about__lead .big-text--small { font-size: clamp(18px, 1.3vw, 24px); }
  .facts__row dt,
  .facts__row dd { font-size: clamp(14px, 1.05vw, 18px); }

  .work__title,
  .stack__title,
  .career__title,
  .creds__title { font-size: clamp(70px, 6vw, 110px); }

  .project__role { font-size: clamp(14px, 1.05vw, 17px); }
  /* 56px cap so Precision<wbr>Micro<wbr>Endodontics fits one line in
     the ~700–900px copy column on 1700–2200px viewports. Above 2200px
     we bump again (column is wider, can fit larger font). */
  .project__name { font-size: clamp(44px, 3vw, 56px); }
  .project__tag { font-size: clamp(17px, 1.4vw, 22px); }
  .project__points li { font-size: clamp(15px, 1.15vw, 19px); }
  .project__stack span { font-size: clamp(11px, 0.85vw, 14px); padding: 6px 14px; }

  /* Visual mockups: grow with column on big screens */
  .precision-stack { max-width: 660px; margin-top: -240px; }
  .dsat-stack { max-width: 720px; }
  .ment-stack { max-width: 740px; }
  .cw-stage { max-width: 720px; padding: 32px; gap: 26px; }
  .phone { width: clamp(180px, 14vw, 260px); }

  .contact__title { font-size: clamp(100px, 7vw, 160px); }
  .contact__card { padding: 44px 36px; }
  .contact__card-value { font-size: clamp(28px, 2.5vw, 40px); }
  .contact__note { font-size: clamp(14px, 1.05vw, 17px); }
}

@media (min-width: 2200px) {
  :root {
    --max-w: 1760px;
  }
  .hero__title { font-size: clamp(200px, 10.5vw, 280px); }
  .project__name { font-size: clamp(56px, 3vw, 72px); }
  .precision-stack { max-width: 780px; margin-top: -280px; }
  .dsat-stack { max-width: 820px; }
  .ment-stack { max-width: 840px; }
  .cw-stage { max-width: 820px; }
  .phone { width: clamp(220px, 14vw, 300px); }
}

/* ─────────────────────────────────────────────────────────
   Reduced motion
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .hero__line .char { transform: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal-words] .word-inner { transform: none !important; }
  body { cursor: auto; }
  .cursor { display: none; }
}

/* ─────────────────────────────────────────────────────────
   Print (PDF export via Chrome headless --print-to-pdf)
   ───────────────────────────────────────────────────────── */
@media print {
  @page { size: A4; margin: 14mm 12mm; }

  html, body {
    background: #FFFFFF !important;
    overflow: visible !important;
    cursor: auto !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide interactive chrome */
  .cursor,
  .scroll-progress,
  .hero__scroll,
  .nav { display: none !important; }

  /* Reveal everything (belt-and-braces — JS already does this under reduced-motion) */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal-words] .word-inner { transform: none !important; }
  .hero__line .char,
  .hero__sub > p { opacity: 1 !important; transform: none !important; }

  /* Kill viewport-locked heights so the document flows naturally on paper */
  .hero {
    min-height: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 40px !important;
  }

  .project {
    min-height: 0 !important;
    padding: 0 var(--pad-x);
  }
  /* Single-column on paper: visual on top, copy below.
     The 2-col desktop grid squeezes into ~280px columns on A4 and overflows
     across pages, leaving stray tag-only orphans. */
  .project__sticky {
    position: static !important;
    min-height: 0 !important;
    display: block !important;
    grid-template-columns: none !important;
    padding: 16px 0 !important;
  }
  .project__visual,
  .project__copy {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 16px;
  }
  /* Visual mockups: kill aspect-ratio cages, absolute positions, and rotations
     so each screenshot becomes a simple in-flow block that never splits. */
  .project__visual { max-width: 100%; overflow: visible !important; }
  .precision-stack,
  .ment-stack,
  .dsat-stack,
  .phones,
  .cw-stage {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    perspective: none !important;
    display: block !important;
  }
  .precision-stack .site-frame,
  .ment-stack .site-frame {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0 auto 12px !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: 0 0 0 1px var(--line) !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .ment-stack__caption { display: none !important; }
  .precision-stack__back,
  .precision-stack__mid,
  .precision-stack__front,
  .ment-stack__a,
  .ment-stack__b { top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
  /* Only show the front-most precision card to save a page (front = hero shot) */
  .precision-stack__back,
  .precision-stack__mid { display: none !important; }

  /* Phones / dsat: stack inline-block thumbnails so they fit one row if possible */
  .phone, .dsat-fig {
    position: static !important;
    display: inline-block !important;
    width: 30% !important;
    margin: 0 6px 12px 0 !important;
    transform: none !important;
    vertical-align: top;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .dsat-fig figcaption { font-size: 9px !important; }

  /* Claude widget mockup is complex; just hide secondary elements */
  .cw-menubar, .cw-lock { display: none !important; }
  .cw-pop { position: static !important; margin: 0 auto !important; max-width: 320px !important; }

  /* Contact: 1-column on paper so cards have room for full email */
  .contact__grid {
    grid-template-columns: 1fr !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .contact__card-value { font-size: 18px !important; word-break: break-all; }
  .contact { break-inside: avoid; page-break-inside: avoid; }

  /* Keep small atomic blocks together. Use modern `break-inside` — works on
     flex/grid children where the legacy `page-break-inside` is silently
     ignored by Chrome.
     Intentionally NOT avoiding break on `.project` or `.project__stack`:
     projects are taller than a page and forcing them atomic creates ugly
     orphan tag rows on the next page with whitespace above. Letting them
     flow naturally produces a denser, cleaner result. */
  .strengths__item,
  .facts__row,
  .timeline__item,
  .creds__col,
  .creds__list > li,
  .contact__card,
  .stack__group,
  .project__points li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Footer is just "© 2026 Jaehee Kim" — redundant with Contact, drop it
     to avoid orphaning a near-empty final page. */
  .foot { display: none !important; }

  /* Reset any per-project sticky/transform fanouts so screenshots sit flat */
  .precision-stack,
  .phones,
  .dsat-stack,
  .ment-stack,
  .cw-stage {
    transform: none !important;
  }
  .precision-stack__back, .precision-stack__mid, .precision-stack__front,
  .phone--a, .phone--b, .phone--c,
  .dsat-fig, .ment-stack__a, .ment-stack__b {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Make links visibly link-colored on paper */
  a { color: var(--accent) !important; }

  /* Don't let pulsing dot animate (mostly off via reduced-motion already) */
  .hero__meta-dot { animation: none !important; }
}