/* Jaehoon Choi — site styles */

@font-face { font-family: 'New CM'; src: url('fonts/NewCM10-Book.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'New CM'; src: url('fonts/NewCM10-BookItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'New CM'; src: url('fonts/NewCM10-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'New CM'; src: url('fonts/NewCM10-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --font: 'New CM', 'Latin Modern Roman', 'Times New Roman', serif;
  --font-display: 'Times New Roman', Times, serif;
  --font-title: 'Montserrat', 'Helvetica Neue', sans-serif;
  --bg: #000000;
  --page: #ffffff;
  --text: #201f1d;
  --muted: #605d5d;
  --faint: #7d7979;
  --divider: rgba(32, 31, 29, 0.16);
  --mat: #eae9e9;
  --hover: #E11B0C;
  --measure: 760px;
  --page-width: 1080px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color 120ms; }

/* every link gets the painted square-dot underline, except chrome */
a:not(.mark):not(.colophon a):not(.plain) {
  padding-bottom: 0;
  background-image: repeating-linear-gradient(90deg, #9b9797 0 1px, transparent 1px 3px);
  background-size: 100% 1px;
  background-repeat: repeat-x;
  background-position: 0 calc(100% - 1px);
}
.colophon a, .mark { background-image: none; }
a:hover { color: var(--hover); }
a:focus-visible { outline: 2px solid var(--hover); outline-offset: 2px; }

/* ---- page shell ---- */

.page {
  width: var(--page-width);
  margin: 0 auto;
  background: var(--page);
  border: 1px solid var(--divider);
  padding: 72px 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

.measure { width: var(--measure); }

/* ---- masthead ---- */

.masthead {
  width: var(--measure);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}

.mark {
  display: inline-flex;
  align-items: center;
  font-size: 22px;
  line-height: 1;
}

.titles { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }

h1 { margin: 0; font-family: var(--font-title); font-size: 34px; font-weight: 700; line-height: 1.15; }
.page-title { font-size: 30px; }

.meta {
  font-size: 14px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.meta a { border-bottom: 1px solid var(--divider); }

/* ---- body copy ---- */

.lede { width: var(--measure); margin: 0; text-wrap: pretty; }
/* New CM ships Book (400) and Bold (700) only — thicken the strokes for a semibold weight */
.semibold { -webkit-text-stroke: 0.3px currentColor; }
.page > .plate { margin-top: -24px; }
.caption + .lede { margin-top: -24px; }
.lede + .lede { margin-top: -30px; }
h2.measure + .lede { margin-top: -36px; }

/* New CM ships 400 and 700 only — stroke the bold cut for an ultrabold weight */
.name-link { padding-bottom: 0; font-weight: 700; -webkit-text-stroke: 0.6px currentColor; }

/* ---- lists ---- */

.stack { width: var(--measure); display: flex; flex-direction: column; gap: 44px; }
.block { display: flex; flex-direction: column; }

.h2-alt {
  padding-bottom: 0;
  display: block;
  width: fit-content;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
}

h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; font-weight: 700; }

.entry {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 0;
  align-items: baseline;
}
.entry .year { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.news-item {
  display: flex;
  gap: 20px;
  padding: 6px 0;
  border-top: 1px solid var(--divider);
  font-size: 15px;
  line-height: 1.45;
}
.news-item .date { width: 78px; flex: none; color: var(--faint); font-size: 14px; padding-top: 4px; }

.fold { border: none; }
.fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 4px 0;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: '▸';
  width: auto;
  margin-right: 3px;
  flex: none;
  color: var(--faint);
}
.fold[open] > summary::before { content: '▾'; }
.fold > summary:hover { color: var(--hover); }
.fold > summary:hover::before { color: var(--hover); }
.fold .fold-title { flex: 1; }
.fold .year { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fold-body { padding: 0 0 14px 1em; font-size: 15px; line-height: 1.5; }
.fold-body p { margin: 0 0 8px; }
.fold-body p:last-child { margin-bottom: 0; }
.fold-body a { border-bottom: none; }

/* ---- CV ---- */

.cv-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 20px;
  padding: 4px 0;
  font-size: 15px;
  line-height: 1.45;
  align-items: baseline;
}
.cv-row .year { color: var(--faint); font-variant-numeric: tabular-nums; }
.cv-row .where { color: var(--faint); }

/* ---- media ---- */

figure { margin: 0; }
figure:not(.plate) { display: flex; flex-direction: column; gap: 10px; }

.plate {
  flex-direction: row;
  background-image: repeating-linear-gradient(45deg, #eae7e7 0 8px, #ffffff 8px 16px);
  border: 6px solid var(--mat);
  outline: 1px solid var(--divider);
  display: flex;
  align-items: flex-end;
  padding: 14px;
}
.plate span {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--faint);
  background: #ffffff;
  padding: 4px 6px;
}
.plate img, .plate video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* real media fills the plate edge to edge — no mat, no placeholder padding */
.plate.has-media { padding: 0; border: none; outline: none; background-image: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.plate figcaption { font-size: 14px; color: var(--faint); width: 100%; text-align: center; }

.r-16-9 { aspect-ratio: 16 / 9; }
.r-3-2  { aspect-ratio: 3 / 2; }
.r-4-5  { aspect-ratio: 4 / 5; }
.r-21-9 { aspect-ratio: 21 / 9; }

.pair { width: var(--measure); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.trio { width: var(--measure); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
.trio img { aspect-ratio: 4 / 3; object-fit: cover; }
.caption { width: var(--measure); font-size: 14px; color: var(--faint); margin-top: -49px; padding-left: 16px; }

/* ---- floating page ---- */

.float-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  z-index: 100;
}
.float-backdrop[hidden] { display: none; }

.float {
  position: relative;
  width: min(760px, 100%);
  max-height: 100%;
  overflow: auto;
  background: var(--page);
  border: 1px solid var(--divider);
  padding: 48px 56px 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.float h2 { margin: 0; }
.float p { margin: 0; }
.float .plate { width: 100%; }

.float-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
  font-size: 26px;
  line-height: 1;
  color: var(--faint);
  cursor: pointer;
}
.float-close:hover { color: var(--hover); }

.video { width: 100%; aspect-ratio: 16 / 9; }
.video iframe { width: 100%; height: 100%; border: none; display: block; }

/* ---- footer ---- */

.colophon {
  width: var(--measure);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--text);
  font-size: 14px;
  color: var(--muted);
}
.colophon .email { font-family: Arial, Helvetica, sans-serif; }
.colophon svg { display: block; width: 22px; height: 22px; }

/* ---- narrow screens ---- */

@media (max-width: 1120px) {
  @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root { --page-width: 100%; --measure: min(760px, calc(100% - 64px)); }
  .page { border-left: none; border-right: none; padding: 48px 0 64px; }
}
@media (max-width: 640px) {
  h1 { font-size: 26px; }
  .pair { grid-template-columns: 1fr; }
  .cv-row { grid-template-columns: 60px 1fr; gap: 12px; }
}