/* ============================================================
   Donghyun Min — portfolio index
   Latin: Google Sans Flex. Korean phrases (lang="ko"): Noto Sans KR,
   numbers and Latin inside them included, as in the printed CV.
   Two weights only: 700 speaks, 300 answers.
   Tracking tightens as size grows; nothing is letter-spaced open.
   Everything sits on the same 4 columns as the grid of work.
   ============================================================ */

@view-transition { navigation: auto; }

:root {
  color-scheme: light;
  /* a whisper of cool: each neutral leans 1–3 units toward blue */
  --paper: #fbfcfd;
  --ink: #0c0d0f;
  --ink-2: #393b3e;
  --mute: #898c91;
  --faint: #bcbec3;
  --hair: #e6e8eb;
  --line: #cdd0d5;
  --soft: #f1f2f4;
  --sans: "Google Sans Flex", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  --ko: "Noto Sans KR", "Google Sans Flex", sans-serif;
  --light: 300;
  --bold: 700;
  --pad: clamp(12px, 1.25vw, 20px);
  --gap: clamp(10px, .9vw, 14px);
  --bar: 66px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* size                                   tracking */
  --fs-xs: 12px;                            --tr-xs: -.004em;
  --fs-s: 13px;                             --tr-s: -.008em;
  --fs-r: 14px;                             --tr-r: -.01em;
  --fs-m: 16px;                             --tr-m: -.012em;
  --fs-k: clamp(18px, 1.45vw, 21px);        --tr-k: -.02em;
  --fs-l: clamp(21px, 1.95vw, 30px);        --tr-l: -.026em;
  --fs-h: clamp(26px, 2.35vw, 36px);        --tr-h: -.032em;
  --fs-xl: clamp(34px, 4.8vw, 80px);        --tr-xl: -.04em;
  --fs-xxl: clamp(50px, 10.6vw, 204px);     --tr-xxl: -.048em;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 12px);
}
html, body { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-m);
  letter-spacing: var(--tr-m);
  line-height: 1.5;
  font-weight: var(--light);
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;          /* Hangul breaks between words, never inside one */
  overflow-wrap: break-word;
  line-break: strict;
  hanging-punctuation: first;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
p, dl, dd, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { margin: 0; font-weight: inherit; font-size: inherit; }
b, strong { font-weight: var(--bold); }
em, i { font-style: normal; }
sup { font-size: .62em; vertical-align: .62em; line-height: 0; margin-left: .12em; font-variant-numeric: tabular-nums; letter-spacing: 0; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }

/* line breaks that follow the sentence; on narrow screens the text flows on its own */
@media (max-width: 900px) { br.br { display: none; } }
@media (max-width: 1200px) { .about-body br.br { display: none; } }

/* underline that draws in from the left */
.u { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .45s var(--ease); padding-bottom: 1px; }
.u:hover { background-size: 0 1px; background-position: 100% 100%; }
.ext { display: inline-block; font-weight: var(--light); margin-left: .18em; transition: transform .35s var(--ease); }
a:hover .ext { transform: translate(2px, -2px); }

.skip { position: fixed; left: var(--pad); top: 8px; z-index: 900; background: var(--ink); color: var(--paper); padding: 6px 10px; font-size: var(--fs-s); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* a label never changes width when it turns bold: an invisible bold copy holds the room */
.st { display: inline-grid; justify-items: start; }
.st > span { grid-area: 1 / 1; }
.st > .st-b { font-weight: var(--bold); visibility: hidden; pointer-events: none; user-select: none; }
.st > .st-b sup { font-weight: var(--light); }

/* ---------- bar: the one negative strip on the page ---------- */
.bar {
  /* the bar's own palette: ink ground, paper type */
  --b-ink: var(--paper); --b-2: #c3c6cc; --b-mute: #82858c; --b-line: rgba(251, 252, 253, .12); --b-hover: rgba(251, 252, 253, .1);
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--bar);
  display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--gap); align-items: center;
  padding: 0 var(--pad);
  font-size: 15px; letter-spacing: -.01em; line-height: 1;
  color: var(--b-ink);
  background: rgba(12, 13, 15, .94);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
}
.bar ::selection { background: var(--paper); color: var(--ink); }
/* one weight across the whole bar */
.bar, .bar :is(a, b, span, p, button, i) { font-weight: var(--light); }
.bar :focus-visible { outline-color: var(--paper); }
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--b-line); opacity: 0; transition: opacity .3s; }
.bar.scrolled::after { opacity: 1; }
.bar-brand { justify-self: start; display: inline-flex; align-items: baseline; gap: .5em; white-space: nowrap; }
.bar-brand span { color: var(--b-mute); transition: color .3s; }
.bar-brand:hover span { color: var(--b-ink); }
.bar-nav { justify-self: center; position: relative; display: flex; gap: clamp(16px, 1.8vw, 28px); height: 100%; align-items: center; }
.bar-nav a { position: relative; color: #8f9298; transition: color .25s; }
.bar-nav a:hover, .bar-nav a.on { color: var(--b-ink); }
.bar-tools { justify-self: end; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.clock { color: var(--b-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-t { color: var(--b-ink); }
.clock-t i { animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.zoom { display: flex; gap: 2px; margin-right: -9px; }
.zoom button {
  position: relative; width: 34px; height: 34px; display: grid; place-items: center;
  font-size: 19px; font-weight: var(--light); color: var(--b-ink); letter-spacing: 0;
  border-radius: 50%; transition: background .2s, transform .35s var(--spring);
}
.zoom button:hover { background: var(--b-hover); }
.zoom button:active { transform: scale(.86); }
.zoom button:disabled { color: var(--b-ink); pointer-events: none; }
.zoom button[data-zoom="0"] { font-size: 15px; padding-top: 2px; }   /* ○ is drawn high in the font: level it with − and + */
/* tooltips hang below the bar, over the page, so they stay ink */
[data-tip]::before {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; white-space: pre;
  font-size: var(--fs-xs); letter-spacing: var(--tr-xs); font-weight: var(--light); color: var(--paper); background: var(--ink);
  padding: 5px 8px 6px; border-radius: 4px; pointer-events: none;
  opacity: 0; transform: translateY(-3px); transition: opacity .2s, transform .2s;
}
[data-tip]:hover::before { opacity: 1; transform: none; transition-delay: .45s; }
.bar-progress { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--b-ink); transform-origin: left; transform: scaleX(var(--p, 0)); z-index: 1; }

/* ---------- section heads ---------- */
/* sections are told apart by space and their titles; no rule above them */
.sec-head { padding-top: 12px; }
/* section titles: a size up, a weight down — present without shouting */
.sec-h { font-size: clamp(43.2px, 4.032vw, 63.36px); line-height: 1.04; letter-spacing: -.03em; text-box: trim-both cap alphabetic; }
.sec-h b { font-weight: 400; }
.sec-sub { font-weight: var(--light); color: var(--mute); margin-left: .1em; font-variant-numeric: tabular-nums; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.links { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.links a { display: inline-flex; align-items: baseline; }

/* ---------- work ---------- */
/* the page opens on the work */
.work { padding: calc(var(--bar) + clamp(14px, 2.6vh, 30px)) var(--pad) 0; }
.work-head {
  display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--gap); align-items: baseline;
  padding-top: 12px;
}
.work-head .sec-h { justify-self: start; }
.filters { justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px clamp(14px, 1.6vw, 24px); font-size: var(--fs-s); letter-spacing: var(--tr-s); }
.filters button { color: var(--mute); transition: color .25s; text-align: left; }
.filters button:hover { color: var(--ink); }
.filters button.on { color: var(--ink); font-weight: var(--bold); }
.filters sup { font-weight: var(--light); color: var(--mute); }
/* Grid / Index: one weight, told apart by value alone */
.views { justify-self: end; display: flex; gap: 14px; font-size: var(--fs-s); letter-spacing: var(--tr-s); }
.views button { font-weight: var(--light); color: var(--faint); transition: color .25s; }
.views button:hover { color: var(--ink-2); }
.views button.on { color: var(--ink); }

.grid { position: relative; height: 0; margin-top: clamp(18px, 2.4vh, 26px); column-gap: var(--gap); transition: height .8s var(--ease); }
.grid.instant, .grid.instant .tile { transition: none !important; }

.tile {
  position: absolute; left: 0; top: 0; width: var(--w, 25%);
  transform: translate3d(var(--x, 0), var(--y, 0), 0);
  transition: transform .85s var(--ease), width .85s var(--ease), opacity .45s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.tile.out { opacity: 0; pointer-events: none; }
.tile.gone { visibility: hidden; }
.t-in { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.tile.seen-in .t-in { opacity: 1; transform: none; }
.t-media {
  position: relative; overflow: hidden; aspect-ratio: var(--ar, 1);
  background: var(--soft);
  transition: opacity .5s var(--ease) .05s;
  isolation: isolate;
}
.t-media > img, .t-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.t-media > img { transition: transform 1.2s var(--ease), opacity .5s var(--ease); }
.tile:hover .t-media > img, .tile:focus-visible .t-media > img { transform: scale(1.03); }
.t-media > video { opacity: 0; transition: opacity .45s var(--ease); }
.t-media.playing > video { opacity: 1; }
.t-media .hov { opacity: 0; }
.tile:hover .t-media .hov { opacity: 1; }
canvas.px { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 2; transition: opacity .35s linear; }
canvas.px.done { opacity: 0; }
.t-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 5; background: rgba(255, 255, 255, .35); opacity: 0; transition: opacity .3s; }
.t-bar i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
.t-media.playing .t-bar { opacity: 1; }

/* hover: the image steps back behind a soft veil, two lines step forward */
.t-over {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  container-type: inline-size;
  padding: clamp(14px, 1.5vw, 22px);
  opacity: 0; transition: opacity .4s var(--ease);
}
.t-over::before { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .6; }
.o-desc { position: relative; display: block; font-size: clamp(16px, 3.4cqw, 30px); line-height: 1.2; letter-spacing: var(--tr-l); text-box: trim-start cap alphabetic; }
.o-l { display: block; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .7s var(--ease); }
.o-l + .o-l { transition-delay: .07s; }
.k-work:hover .t-over, .k-work:focus-visible .t-over { opacity: 1; }
.k-work:hover .o-l, .k-work:focus-visible .o-l { opacity: 1; transform: none; }
.k-work:hover .t-bar { background: rgba(12, 13, 15, .1); }
.k-work:hover .t-bar i { background: var(--ink); }
.scrolling .grid { pointer-events: none; }
.c-desc { display: none; }
@media (hover: none) {
  .t-over { display: none; }
  .c-desc { display: block; margin-top: 3px; color: var(--mute); text-transform: none; }
}
.tile:focus-visible { outline: none; }
.tile:focus-visible .t-media { outline: 1.5px solid var(--ink); outline-offset: 3px; }

/* captions: small, sentence case; title bold, the rest light */
.t-cap {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0 0; min-height: 26px;
  font-size: var(--fs-xs); line-height: 1.36; letter-spacing: var(--tr-xs);
}
.t-cap .c-l { min-width: 0; }
.t-cap .c-sep { color: var(--faint); margin: 0 .35em; }
.t-cap .c-r { flex: none; color: var(--mute); font-variant-numeric: tabular-nums; text-align: right; }
.t-cap .c-tags { color: var(--mute); }
.seen-dot { position: relative; display: inline-block; width: 0; height: 0; }
.seen-dot::after { content: ""; position: absolute; left: 2px; bottom: .55em; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .5s var(--spring); }
.is-seen .seen-dot::after { transform: scale(1); }
.c-title-u { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.tile:hover .c-title-u { background-size: 100% 1px; }

/* text cards inside the grid */
.t-card { container-type: inline-size; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(10px, 5.5cqw, 18px); }
.t-card .k { font-size: var(--fs-xs); letter-spacing: var(--tr-xs); display: flex; justify-content: space-between; }
.t-card .k span { opacity: .55; }
.card-stat { background: var(--soft); }
.card-stat .num { font-size: 44cqw; line-height: .78; letter-spacing: -.06em; font-weight: var(--bold); font-variant-numeric: tabular-nums; margin-left: -.04em; }
.card-stat .num-s { font-size: 7.4cqw; line-height: 1.15; letter-spacing: var(--tr-l); margin-top: 2.5cqw; }
.card-stat .list { font-size: var(--fs-xs); letter-spacing: var(--tr-xs); line-height: 1.45; color: var(--ink-2); }
.card-stat .list b { color: var(--ink); }
@container (max-width: 250px) {
  .card-stat .k span, .card-stat .list { display: none; }
  .card-stat .num-s { font-size: 9cqw; }
  .card-lab .foot-k { display: none; }
}
.card-lab { background: var(--ink); color: var(--paper); }
.card-lab .big { font-size: 19cqw; line-height: .86; letter-spacing: -.05em; font-weight: var(--bold); margin-left: -.03em; }
.card-lab .sub { font-size: 6.6cqw; line-height: 1.18; letter-spacing: var(--tr-k); margin-top: 3cqw; opacity: .82; }
.card-lab .foot-k { font-size: var(--fs-xs); letter-spacing: var(--tr-xs); opacity: .55; line-height: 1.4; }
.tile .t-card { transition: transform 1.2s var(--ease); }
.card-lab .big .arr { display: inline-block; font-weight: var(--light); transition: transform .5s var(--ease); }
.tile:hover .card-lab .big .arr { transform: translate(.06em, -.06em); }

/* a slot still rendering */
.t-media.soon { background: #f2f3f5; }
.t-media.soon canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.t-media.soon .soon-k { position: absolute; left: 10px; top: 9px; z-index: 2; font-size: var(--fs-xs); color: var(--mute); font-variant-numeric: tabular-nums; }

/* ---------- index (list view) ---------- */
.index { border-top: 1px solid var(--hair); margin-top: clamp(18px, 2.4vh, 26px); }
.index li { border-bottom: 1px solid var(--hair); }
.ix {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); align-items: baseline;
  padding: 18px 0 17px; position: relative;
  font-size: var(--fs-s); letter-spacing: var(--tr-s);
  transition: color .3s;
}
.ix .ix-no { grid-column: 1; color: var(--mute); font-variant-numeric: tabular-nums; }
.ix .ix-t { grid-column: 1; padding-left: clamp(36px, 4vw, 64px); font-size: clamp(22px, 2.2vw, 34px); line-height: 1; letter-spacing: var(--tr-h); transition: transform .5s var(--ease); }
.ix .ix-s { grid-column: 2 / 3; }
.ix .ix-g { grid-column: 3; color: var(--mute); }
.ix .ix-y { grid-column: 4; font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; }
.ix .ix-a { display: inline-block; transition: transform .45s var(--ease); }
.ix-no, .ix-t { grid-row: 1; }
a.ix:hover .ix-t { transform: translateX(10px); }
a.ix:hover .ix-a { transform: translateX(6px); }
.index.hovering .ix { color: var(--faint); }
.index.hovering .ix.is-hover { color: var(--ink); }
.ix.soon { color: #c1c3c8; }
.ix.soon .ix-t { font-weight: var(--light); font-size: clamp(18px, 1.6vw, 24px); letter-spacing: var(--tr-k); }

.peek {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: clamp(180px, 19vw, 300px);
  opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.9);
  transition: opacity .3s var(--ease);
}
.peek.on { opacity: 1; }
.peek-in { position: relative; overflow: hidden; background: var(--soft); aspect-ratio: var(--ar, 1); transition: aspect-ratio .3s var(--ease); }
.peek-in img, .peek-in canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.peek-in canvas { image-rendering: pixelated; }
.peek-t { padding: 9px 11px 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair); font-size: var(--fs-xs); line-height: 1.38; letter-spacing: var(--tr-xs); color: var(--ink-2); }
.peek-t b { color: var(--ink); }

/* ---------- about ----------
   The photo sets the height of the row: as large as the screen allows,
   never cropped, never cut off. On the right, the words fill the space above
   the facts, and the facts' last rule sits on the photo's bottom edge
   (the sizes are fitted in site.js; these are the fallbacks). */
.about { padding: clamp(88px, 13vh, 160px) var(--pad) 30px; }
/* a section link lands on the heading, not on the space above it */
.about, .cv, .contact { scroll-margin-top: calc(-1 * clamp(88px, 13vh, 160px)); }
.about-body.flow br.br { display: none; }
.about-grid { container-type: inline-size; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); align-items: stretch; margin-top: clamp(24px, 4vh, 40px); }
.about-photo {
  grid-column: 1 / 3; align-self: start; position: relative;
  /* exactly two columns wide; as tall as the screen allows (photo and caption stay on screen).
     The photo fills the frame and whatever overflows is trimmed. */
  --ph: clamp(420px, calc(100svh - 218px), calc(((100cqw - var(--gap) * 3) / 2 + var(--gap)) * 1.5));
}
.lens {
  position: relative; overflow: hidden; background: #eeeff1;
  width: 100%; height: var(--ph);
  touch-action: pan-y;
  --mx: 50%; --my: 45%; --r: 0px; --pos: 50% 70%;
}
.lens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos); transition: opacity .7s var(--ease); }
.lens-c {
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 calc(var(--r) * .55), transparent var(--r));
          mask-image: radial-gradient(circle at var(--mx) var(--my), #000 calc(var(--r) * .55), transparent var(--r));
}
.lens.swap img { opacity: 0; }
.lens-cap { position: absolute; left: 0; right: 0; top: calc(100% + 9px); display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-xs); letter-spacing: var(--tr-xs); color: var(--mute); }
.lens-switch { font-variant-numeric: tabular-nums; color: var(--mute); transition: color .2s; }
.lens-switch b { color: var(--ink); }
.lens-switch span { display: inline-block; margin-left: 4px; transition: transform .6s var(--ease); }
.lens-switch:hover { color: var(--ink); }
.lens-switch:hover span { transform: rotate(180deg); }

.about-text { grid-column: 3 / 5; display: flex; flex-direction: column; }
/* the first line's cap height sits level with the top of the photo */
.about-lede { font-size: clamp(24px, 2.4vw, 46px); line-height: 1.18; letter-spacing: var(--tr-l); text-box: trim-start cap alphabetic; }
/* the thinnest Google Sans Flex has (wght 1), in full ink so the hairline still reads */
.about-body { font-size: clamp(16px, 1.25vw, 24px); font-weight: 1; line-height: 1.4; letter-spacing: -.014em; color: var(--ink); margin: 1.4em 0 32px; text-wrap: pretty; }
.about-body .ext { font-weight: inherit; }
.about-facts { margin-top: auto; border-top: 1px solid var(--hair); }
.about-facts > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 11px 0 12px; border-bottom: 1px solid var(--hair); font-size: var(--fs-s); letter-spacing: var(--tr-s); line-height: 1.42; }
.about-facts dt { color: var(--mute); }
/* on a short screen the facts close up a little, so the words above can stay readable */
@media (max-height: 860px) and (min-width: 901px) {
  .about-facts > div { padding: 8px 0 9px; line-height: 1.34; }
  .about-body { margin: 1.1em 0 18px; }
}

/* ---------- cv ----------
   One table. Eight half-columns (the page's four, halved), so date, title,
   result and organisation fall on the same vertical lines in every block. */
.cv { padding: clamp(88px, 13vh, 160px) var(--pad) 0; }
.cv-block { margin-top: clamp(44px, 6.5vh, 72px); }
.cv-block:first-of-type { margin-top: clamp(30px, 4.5vh, 48px); }
.cv-k { font-size: var(--fs-k); line-height: 1; letter-spacing: var(--tr-k); padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.cv-k span { color: var(--mute); font-weight: var(--light); margin-left: .12em; font-variant-numeric: tabular-nums; }
.row {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline;
  padding: 9px 0 10px; border-bottom: 1px solid var(--hair);
  font-size: var(--fs-r); letter-spacing: var(--tr-r); line-height: 1.45;
}
/* inside the table: one weight and one colour — the darkest ink, not pure black */
.row, .row :is(b, strong) { color: var(--ink); font-weight: var(--light); }
.r-d { grid-column: 1; font-size: var(--fs-s); letter-spacing: var(--tr-s); font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-t { grid-column: 2 / 7; }
.has-result .r-t { grid-column: 2 / 6; }
.r-r { grid-column: 6; }
.r-o { grid-column: 7 / 9; font-size: var(--fs-s); letter-spacing: var(--tr-s); }
.r-n { display: block; margin-top: 1px; font-size: var(--fs-xs); }
.cv-block.flash .cv-k b { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 100% { background: transparent; } 20%, 60% { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 3px var(--ink); } }

/* ---------- contact: who, where, and how to reach ---------- */
.contact { padding: clamp(88px, 13vh, 160px) var(--pad) clamp(80px, 12vh, 140px); }
.sign {
  font-size: var(--fs-xxl); line-height: .9; letter-spacing: var(--tr-xxl);
  margin: clamp(26px, 4.5vh, 52px) 0 0 -.05em; /* optical: the D's stem sits on the column edge */
  white-space: nowrap;
}
.sign b { display: inline-block; }
.inflate { font-weight: 100; transition: font-weight 1.3s var(--spring) .2s; }
.sign.in .inflate, .returning .inflate { font-weight: var(--bold); }
.contact-row { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); margin-top: clamp(28px, 5vh, 64px); align-items: end; }
.contact-meta { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: 18px; font-size: var(--fs-s); letter-spacing: var(--tr-s); line-height: 1.42; }
.contact-meta dt { color: var(--mute); margin-bottom: 3px; }
.contact-lede { grid-column: 3 / 5; font-size: var(--fs-l); line-height: 1.22; letter-spacing: var(--tr-l); text-box: trim-end alphabetic; }
.contact-links { margin-top: clamp(48px, 9vh, 110px); border-top: 1px solid var(--hair); }
.contact-links li { border-bottom: 1px solid var(--hair); }
.cl {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); align-items: baseline;
  padding: clamp(14px, 2vh, 20px) 0; width: 100%; text-align: left;
}
.cl .cl-k { grid-column: 1 / 3; font-size: clamp(26px, 2.8vw, 44px); line-height: 1; letter-spacing: var(--tr-h); font-weight: var(--light); transition: transform .55s var(--ease); }
.cl .cl-h { grid-column: 3; font-size: var(--fs-l); line-height: 1.1; letter-spacing: var(--tr-l); font-weight: var(--light); color: var(--mute); transition: color .25s; }
.cl .cl-a { grid-column: 4; justify-self: end; font-size: clamp(22px, 2.2vw, 34px); line-height: 1; font-weight: var(--light); display: inline-block; transition: transform .45s var(--ease); }
.cl:hover .cl-k { transform: translateX(12px); }
.cl:hover .cl-h { color: var(--ink); }
.cl:hover .cl-a { transform: translate(4px, -4px); }
.cl[data-copy]:hover .cl-a { transform: translateY(-3px); }

/* ---------- footer ---------- */
.foot {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); align-items: baseline;
  padding: 16px var(--pad) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair);
  font-size: var(--fs-s); letter-spacing: var(--tr-s); color: var(--ink-2);
}
.foot-clock { font-variant-numeric: tabular-nums; }
.foot .tz { color: var(--mute); }
.top { justify-self: end; color: var(--ink); }
.top span { display: inline-block; transition: transform .4s var(--ease); }
.top:hover span { transform: translateY(-3px); }

/* ---------- cursor label, toast, veil ---------- */
/* cursor: an ink dot. A hairline ring over links, a thin bar over text,
   and it grows into a label over the work. */
.cur { position: fixed; left: 0; top: 0; z-index: 700; pointer-events: none; display: none; }
.has-cursor .cur { display: block; }
.has-cursor, .has-cursor * { cursor: none !important; }
.cur-b {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; overflow: hidden;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(251, 252, 253, .7);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transition: width .42s var(--spring), height .42s var(--spring), border-radius .3s var(--ease), background-color .25s, box-shadow .25s, transform .2s var(--ease), opacity .2s;
}
.cur-l { padding: 0 11px; font-size: var(--fs-xs); line-height: 1; letter-spacing: var(--tr-xs); font-weight: var(--bold); color: var(--paper); white-space: nowrap; opacity: 0; transition: opacity .12s; }
.cur[data-mode="link"] .cur-b { width: 28px; height: 28px; background-color: transparent; box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 1px rgba(251, 252, 253, .5); }
.cur[data-mode="text"] .cur-b { width: 2px; height: var(--bh, 18px); border-radius: 1px; }
.cur[data-mode="label"] .cur-b { width: var(--lw, 90px); height: 26px; }
.cur[data-mode="label"] .cur-l { opacity: 1; transition: opacity .2s .1s; }
.cur.light .cur-b { background-color: var(--paper); box-shadow: 0 0 0 1px rgba(12, 13, 15, .2); }
.cur.light .cur-l { color: var(--ink); }
.cur.light[data-mode="link"] .cur-b { background-color: transparent; box-shadow: inset 0 0 0 1px var(--paper), 0 0 0 1px rgba(12, 13, 15, .4); }
.cur.down .cur-b { --s: .78; }
.cur.off .cur-b { opacity: 0; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 450;
  background: var(--ink); color: var(--paper); font-size: var(--fs-s); padding: 9px 14px 10px; border-radius: 999px;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: transform .45s var(--spring), opacity .25s;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }

.veil { position: fixed; inset: 0; z-index: 500; background: var(--paper); opacity: 0; pointer-events: none; transition: opacity .22s linear; }
.veil.on { opacity: 1; pointer-events: auto; }
.fly {
  position: fixed; z-index: 499; pointer-events: none; overflow: hidden; background: var(--soft);
  transition: left .62s var(--ease-io), top .62s var(--ease-io), width .62s var(--ease-io), height .62s var(--ease-io);
}
.fly img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- reveal ---------- */
.returning .t-in, .returning .rv, .returning .inflate { transition: none !important; opacity: 1; transform: none; }
.rv { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }

/* ---------- intro: one line, drawn with one pen ---------- */
html[data-intro="full"], html[data-intro="quick"] { overflow: hidden; }
html:not([data-intro="full"]):not([data-intro="quick"]) .ld { display: none; }
.ld {
  position: fixed; inset: 0; z-index: 650; background: var(--paper); color: var(--ink);
  animation: ld-safety .4s 9s forwards;       /* if the script never runs, the page still opens */
}
@keyframes ld-safety { to { opacity: 0; visibility: hidden; } }
.ld-top {
  position: absolute; inset: 0 0 auto 0; height: var(--bar); padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; letter-spacing: -.01em; line-height: 1;
}
.ld-top :is(b, span, button) { font-weight: var(--light); }
.ld-brand { display: inline-flex; align-items: baseline; gap: .5em; white-space: nowrap; }
.ld-brand span { color: var(--mute); }
.ld-skip { color: var(--mute); transition: color .2s; }
.ld-skip:hover { color: var(--ink); }
.ld-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: grid; place-items: center; }
.ld-svg { width: min(58vh, 76vw); height: auto; aspect-ratio: 1; overflow: visible; margin-top: -4vh; }
.ld-line { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ld-dot { fill: var(--ink); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s var(--spring), opacity .2s; }
.ld.on .ld-dot { opacity: 1; transform: scale(1); }
.ld-glow { opacity: 0; transition: opacity .35s var(--ease); }
.ld.lit .ld-glow { opacity: 1; }
.ld-disp { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ld-light { opacity: 0; }
.ld-eye { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ld-pupil { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ld-foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 12px);
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
}
.ld-say { position: relative; flex: 1; height: 1.2em; overflow: hidden; font-size: var(--fs-h); line-height: 1.1; letter-spacing: var(--tr-h); }
.ld-say span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.ld-count { font-size: var(--fs-s); letter-spacing: var(--tr-s); color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ld-count b { color: var(--ink); }
.ld-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(0); }
@media (max-width: 640px) {
  .ld-svg { width: 84vw; margin-top: -8vh; }
  .ld-say { font-size: 22px; }
}

/* ---------- Korean: the whole phrase in Noto Sans KR, a touch tighter ---------- */
:lang(ko) { font-family: var(--ko); letter-spacing: -.022em; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .bar-brand span { display: none; }
}
/* below ~1060px a half-column can't hold a date range, so the table loosens */
@media (max-width: 1060px) {
  /* every block keeps the same four tracks, so the organisation column never moves */
  .row, .has-result .row { grid-template-columns: 8.8em minmax(0, 1fr) 9.6em minmax(0, .7fr); }
  .r-d { grid-column: 1; }
  .r-t { grid-column: 2 / 4; }
  .has-result .r-t { grid-column: 2; }
  .r-r { grid-column: 3; }
  .r-o, .has-result .r-o { grid-column: 4; }
}
@media (max-width: 900px) {
  :root { --fs-l: clamp(20px, 3.2vw, 26px); }
  .clock { display: none; }
  .contact-row { grid-template-columns: 1fr; row-gap: 28px; }
  .contact-meta, .contact-lede { grid-column: 1; }
  .contact-lede { grid-row: 1; max-width: 30ch; }
  .work-head { grid-template-columns: auto 1fr auto; column-gap: 18px; }
  .filters { justify-self: start; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .about-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .about-photo { grid-column: 1; width: 100%; max-width: 620px; margin-bottom: 30px; --ph: auto; }
  .lens { height: auto; aspect-ratio: 4829 / 4096; }
  .about-text { grid-column: 1; }
  .about-lede { max-width: 30ch; }
  .about-body { max-width: 46ch; }
  .about-facts { margin-top: 8px; }
  .ix { grid-template-columns: 1fr auto; row-gap: 4px; }
  .ix .ix-no { display: none; }
  .ix .ix-t { grid-column: 1; padding-left: 0; }
  .ix .ix-s { grid-column: 1; grid-row: 2; }
  .ix .ix-g { display: none; }
  .ix .ix-y { grid-column: 2; grid-row: 1; gap: 14px; }
  .foot { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .top { grid-column: 2; grid-row: 1; }
}
@media (max-width: 640px) {
  :root { --bar: 72px; }
  .bar { grid-template-columns: auto 1fr; }
  .bar-nav { justify-self: end; gap: 16px; }
  .bar-tools { display: none; }
  .sign { white-space: normal; line-height: .88; }
  .work-head { grid-template-columns: 1fr auto; row-gap: 12px; }
  .work-head .sec-h { grid-column: 1; }
  .views { grid-column: 2; grid-row: 1; }
  .filters { grid-column: 1 / -1; grid-row: 2; }
  .row, .has-result .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 10px 0 11px; }
  .r-d { grid-column: 1 / -1; }
  .r-t, .has-result .r-t { grid-column: 1; }
  .r-r { grid-column: 2; grid-row: 2; padding-left: 12px; }
  .r-o, .has-result .r-o { grid-column: 1 / -1; }
  .about-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .cl { grid-template-columns: 1fr auto; }
  .cl .cl-k { grid-column: 1; }
  .cl .cl-h { grid-column: 1; grid-row: 2; margin-top: 8px; font-size: 18px; }
  .cl .cl-a { grid-column: 2; grid-row: 1; }
  .foot { grid-template-columns: 1fr; }
  .top { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .rv, .t-in { opacity: 1; transform: none; }
}