/* ============================================================
   Alt–Border — Monochrome editorial gallery
   Tokens per style reference. Achromatic chrome, 0px radii,
   hairline rules, image carries all colour.
   ============================================================ */

:root {
  /* Colors */
  --color-ink: #000000;
  --color-gallery-white: #ffffff;
  --color-graphite: #333333;
  --color-ash: #808080;

  /* Typography — families (Inter stands in for Neuehaasdisplay /
     Inferi / Suisseintl per the substitution notes) */
  --font-neuehaasdisplay: 'Poppins', 'Noto Sans KR', 'Apple SD Gothic Neo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inferi: 'Poppins', 'Noto Sans KR', 'Apple SD Gothic Neo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintl: 'Poppins', 'Noto Sans KR', 'Apple SD Gothic Neo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — scale */
  --text-caption: 14px;
  --leading-caption: 1;
  --tracking-caption: -0.38px;
  --text-body: 21px;
  --leading-body: 1;
  --tracking-body: -0.57px;
  --text-subheading: 34px;
  --leading-subheading: 1;
  --tracking-subheading: -0.92px;
  --text-heading: 74px;
  --leading-heading: 1.06;

  /* Typography — weights */
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-5: 5px;
  --spacing-7: 7px;
  --spacing-9: 9px;
  --spacing-11: 11px;
  --spacing-19: 19px;

  /* Layout */
  --card-padding: 0px;
  --element-gap: 9px;
  --page-inset: 9px;

  /* Radius — the system is 0px throughout */
  --radius-tags: 0px;
  --radius-cards: 0px;
  --radius-images: 0px;
  --radius-buttons: 0px;

  /* Poster mount (presentation treatment — a deliberate departure from the
     achromatic system; set --mount-bg to #ffffff and --mount-shadow to none
     to return to flat, guide-compliant plates) */
  --mount-bg: #cfc6ba;
  --mount-shadow: 20px 26px 44px rgba(0, 0, 0, 0.30);
  --mount-sheet: 92%;   /* sheet height inside its mount */

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-image-plate: #ffffff;
  --surface-rule-line: #808080;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-ink);
  font-family: var(--font-suisseintl);
  font-weight: var(--font-weight-light);
  font-size: var(--text-body);
  letter-spacing: -0.0270em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- page frame: full bleed, no max-width ---------- */
.page { padding: 0 var(--page-inset); }

/* author rules set display, so hiding needs to win */
[hidden] { display: none !important; }

/* ---------- hairline rule ---------- */
.rule {
  height: 1px;
  background: var(--surface-rule-line);
  border: 0;
  margin: 0;
}

/* ---------- top navigation ---------- */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  padding: var(--spacing-9) 0 var(--spacing-7);
  font-family: var(--font-inferi);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-light);
}
.nav__logo { justify-self: start; }
.nav__center { justify-self: center; }
.nav__end { justify-self: end; }
.nav a:hover { cursor: pointer; }
.nav [aria-current="page"] { border-bottom: 1px solid var(--color-ink); }

/* ---------- hero / statement display type ---------- */
.display {
  font-family: var(--font-neuehaasdisplay);
  font-weight: var(--font-weight-light);
  font-size: clamp(32px, 5.4vw, var(--text-heading));
  line-height: var(--leading-heading);
  letter-spacing: normal;
  color: var(--color-ink);
  margin: 0;
  padding-top: var(--spacing-9);
  padding-bottom: var(--spacing-19);
  text-wrap: balance;
}
.statement {
  line-height: 1.1;
  margin-top: var(--spacing-19);
}

/* inline thumbnail sitting on the baseline like a character */
.thumb-inline,
.thumb-inline.plate {
  display: inline-block;
  width: clamp(34px, 5.4vw, 72px);
  height: clamp(34px, 5.4vw, 72px);
  vertical-align: baseline;
  margin: 0 0.06em -0.04em;
  border-radius: var(--radius-images);
  aspect-ratio: 1 / 1;
}

/* ---------- section label row ---------- */
.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--element-gap);
  padding: var(--spacing-9) 0 var(--spacing-7);
  font-family: var(--font-inferi);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
}

/* ---------- category filter (text only, no buttons) ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-11);
}
.filter {
  color: var(--color-graphite);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.filter.is-active {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}
.empty-note {
  font-family: var(--font-inferi);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  padding: var(--spacing-19) 0;
  margin: 0;
}

/* ---------- arrow link ---------- */
.arrow-link {
  font-family: var(--font-inferi);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  padding-bottom: var(--spacing-5);
  cursor: pointer;
}

/* ---------- 3-column grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--element-gap);
  padding: var(--spacing-9) 0 var(--spacing-19);
}
.grid--feed { padding-bottom: var(--spacing-19); }
.grid--four { grid-template-columns: repeat(4, 1fr); }

/* 카드 안에 쓰는 회색 자리 */
.card-slot {
  aspect-ratio: 1 / 1;
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-5);
  color: #8a8a8a;
  font-size: var(--text-caption);
}

/* 사진이 아직 없는 프로젝트 자리 */
.feed-slot {
  aspect-ratio: 1 / 1;
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-5);
  color: #8a8a8a;
  font-size: var(--text-caption);
  text-decoration: none;
}
.feed-slot:hover { color: var(--color-ink); }
@media (max-width: 700px) {
  .grid--four { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- editorial stack ----------
   one sheet per row at full column width, the way a specimen page reads:
   scroll down the type rather than across a grid of thumbnails */
.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--element-gap);
  padding: var(--spacing-9) 0 var(--spacing-19);
}
.stack > img.plate--sheet {
  width: 50%;
  max-width: 50%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
/* a third of the column is unreadable on a phone — give it the full width */
@media (max-width: 700px) {
  .stack > img.plate--sheet { width: 100%; max-width: 100%; }
}

/* each frame carries its own ratio inline, so it keeps its proportions
   like the key image above — no crop, and equal height for equal sheets */
.grid--frames img.plate { height: auto; }

.card {
  padding: var(--card-padding);
  display: block;
  color: inherit;
}
a.card { cursor: pointer; }

/* every plate that links somewhere reads as clickable — cursor only,
   no colour or elevation change, per the system */
a > .plate { cursor: pointer; }
.card__title {
  font-family: var(--font-inferi);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  margin: var(--element-gap) 0 0;
}
.card__meta {
  font-family: var(--font-inferi);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  margin: var(--spacing-5) 0 0;
}

/* ---------- body copy ---------- */
.copy {
  font-family: var(--font-suisseintl);
  font-weight: var(--font-weight-light);
  font-size: var(--text-body);
  line-height: 1.35;
  letter-spacing: var(--tracking-body);
  max-width: 46ch;
}
.copy + .copy { margin-top: var(--spacing-19); }
.subheading {
  font-family: var(--font-inferi);
  font-weight: var(--font-weight-extralight);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  margin: 0;
}

.split__body > .subheading { margin-bottom: var(--spacing-19); }

/* two-column editorial split */
.split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--element-gap);
  padding: var(--spacing-9) 0 var(--spacing-19);
}
.split__lead { grid-column: span 1; }
.split__body { grid-column: span 2; }

/* key image + case text side by side. A full-width portrait poster runs
   taller than the viewport, so it is capped by height and the copy takes
   the space that would otherwise sit empty beside it. */
/* Project case band: a filmstrip of frames. The active frame sits centred,
   its neighbours peek in at the cropped edges, and the arrows overlay those
   edges — type on a faint grey plate, no border, no radius, no shadow. */
.case {
  position: relative;
  margin: 0 auto;
  padding: var(--spacing-9) 0 var(--spacing-11);
}
.carousel { overflow: hidden; }
.carousel__track {
  display: flex;
  align-items: center;
  gap: var(--element-gap);
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.carousel__track.is-instant { transition: none; }
/* a sheet presented on a wall: warm ground, raking light, cast shadow */
.mount {
  margin: 0;
  /* flex, not grid: a grid row sizes itself from the image and the sheet's
     percentage height then resolves against that row instead of the mount */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--mount-bg);
  background-image: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.05) 34%,
    rgba(0, 0, 0, 0.05) 66%,
    rgba(0, 0, 0, 0.10) 100%
  );
}
.mount__sheet {
  display: block;
  width: auto;
  max-width: 92%;
  /* sized off the mount's height, so the ratio of the mount can change
     without the sheet changing size relative to it */
  height: auto;
  max-height: var(--mount-sheet);
  box-shadow: var(--mount-shadow);
}
/* frames grid stays portrait, so the thumbnails read at a third of the width */
.grid .mount { aspect-ratio: 4 / 5; }

/* the carousel mount is wide — a sheet on a wall, not a cropped page */
.carousel__track .carousel__slide {
  flex: 0 0 auto;
  /* --slide-h is measured at runtime to fill the screen below the header;
     the min() is the pre-script fallback */
  height: var(--slide-h, min(58vh, 620px));
  width: auto;
  cursor: pointer;
}
.carousel__track figure.carousel__slide { aspect-ratio: 3 / 2; }
.carousel__track img.carousel__slide { max-width: none; }
.carousel__track .carousel__slide.is-active { cursor: default; }

.arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  border-radius: var(--radius-buttons);
  padding: 0;
  width: 44px;
  height: 88px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-ink);
  font-family: var(--font-inferi);
  font-size: var(--text-subheading);
  line-height: 1;
  cursor: pointer;
}
.arrow-btn--prev { left: 0; }
.arrow-btn--next { right: 0; }

/* full-screen presentation opened from the frames below */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-11);
  padding: var(--spacing-19) var(--page-inset);
  background: var(--surface-canvas);
  overflow: auto;
}
.lightbox__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--spacing-11);
  text-align: center;
  font-family: var(--font-inferi);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  margin: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.lightbox__close {
  position: absolute;
  top: var(--spacing-9);
  right: var(--page-inset);
  appearance: none;
  background: none;
  border: 0;
  border-radius: var(--radius-buttons);
  padding: 0;
  color: var(--color-ink);
  font-family: var(--font-inferi);
  font-size: var(--text-body);
  line-height: 1;
  letter-spacing: var(--tracking-body);
  cursor: pointer;
}
.carousel__count {
  font-family: var(--font-inferi);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  text-align: center;
  margin: 0 0 var(--spacing-19);
}

.case__meta {
  margin: var(--spacing-19) 0 0;
  font-family: var(--font-inferi);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
}
.case__meta dt {
  color: var(--color-graphite);
  padding-bottom: var(--spacing-5);
  border-bottom: 1px solid var(--color-ash);
}
.case__meta dd {
  margin: 0;
  padding: var(--spacing-7) 0 var(--spacing-11);
}

/* ---------- workspace: a laptop you can scroll inside ---------- */
.workspace { padding: var(--spacing-19) 0; }
.workspace__copy {
  font-family: var(--font-suisseintl);
  font-weight: var(--font-weight-light);
  font-size: var(--text-body);
  line-height: 1.35;
  letter-spacing: var(--tracking-body);
  text-align: center;
  max-width: 56ch;
  margin: 0 auto;
}
.workspace__down {
  font-family: var(--font-inferi);
  font-size: var(--text-subheading);
  line-height: 1;
  text-align: center;
  margin: var(--spacing-19) 0;
}
.workspace__hint {
  font-family: var(--font-inferi);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  text-align: center;
  margin-top: var(--spacing-11);
}

/* A MacBook-like frame. The device is the one place radii are allowed —
   a squared-off laptop does not read as a laptop. Still achromatic. */
.laptop {
  margin: 0 auto;
  width: min(1040px, 100%);
}
.laptop__lid {
  position: relative;
  background: #101010;
  padding: 13px 13px 20px;
  border-radius: 16px 16px 6px 6px;
}
/* a browser window inside the lid: the chrome is fixed, the page scrolls */
.browser {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-gallery-white);
}
.browser__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-9);
  padding: 7px var(--spacing-9);
  background: #e6e6e6;
  border-bottom: 1px solid #cfcfcf;
  font-family: var(--font-inferi);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
  color: #4a4a4a;
}
.browser__dots {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}
.browser__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c0c0c0;
}
/* the only chromatic marks on the site — the window controls read as a
   browser instantly; set these three to #c0c0c0 to go fully achromatic */
.browser__dots i:nth-child(1) { background: #ff5f57; }
.browser__dots i:nth-child(2) { background: #febc2e; }
.browser__dots i:nth-child(3) { background: #28c840; }
.browser__tab {
  flex: 0 0 auto;
  max-width: 28%;
  padding: 4px 10px;
  background: var(--color-gallery-white);
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.browser__url {
  flex: 1 1 auto;
  padding: 4px 10px;
  background: #f4f4f4;
  border-radius: 9px;
  color: #6b6b6b;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* the page scrolls in here — a real scroll container, not an animation */
.laptop__viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  background: var(--color-gallery-white);
  scrollbar-width: thin;
}
.laptop__viewport img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.laptop__camera {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3a3a3a;
}
/* the deck sits a little wider than the lid, as it does on the real thing */
.laptop__deck {
  position: relative;
  width: 106%;
  margin-left: -3%;
  height: 15px;
  background: linear-gradient(180deg, #c9c9c9 0%, #9e9e9e 55%, #7c7c7c 100%);
  border-radius: 0 0 11px 11px;
}
.laptop__lip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 13%;
  height: 5px;
  background: #6f6f6f;
  border-radius: 0 0 5px 5px;
}

@media (max-width: 560px) {
  .laptop__lid { padding: 6px 6px 10px; border-radius: 9px 9px 4px 4px; }
  .laptop__deck { height: 9px; width: 100%; margin-left: 0; }
  .browser__bar { gap: var(--spacing-5); padding: 4px var(--spacing-5); font-size: 8px; }
  .browser__dots i { width: 5px; height: 5px; }
  .browser__tab { display: none; }
  .laptop__camera { top: 2px; width: 3px; height: 3px; }
}

/* index list (projects) */
.index-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--element-gap);
  padding: var(--spacing-11) 0;
  border-bottom: 1px solid var(--color-ash);
  font-family: var(--font-inferi);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: inherit;
}
a.index-row { cursor: pointer; }
.index-row--head { color: var(--color-graphite); }

/* ---------- footer (nav-only, per the system) ---------- */
.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  padding: var(--spacing-9) 0 var(--spacing-19);
  font-family: var(--font-inferi);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
}
.footer__center { justify-self: center; }
.footer__end { justify-self: end; }

/* ============================================================
   Image plates — photography stands in as controlled studio
   compositions built in CSS. Full bleed, 0px radius, no overlay.
   ============================================================ */
.plate {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-images);
  background: var(--plate-bg, #d8d8d8);
}
/* a real photograph fills the plate; --auto lets a poster show whole */
/* the width/height attributes are presentational hints — without height:auto
   the intrinsic pixel height wins over the plate's aspect-ratio */
img.plate {
  object-fit: cover;
  object-position: center top;
  height: auto;
  /* no grey fallback behind a photograph — it shows while the file loads */
  background: none;
}

/* show the whole frame instead of cropping it — for a set that mixes
   landscape photography with square product shots */
img.plate--contain { object-fit: contain; object-position: center; }

.plate--auto { aspect-ratio: auto; height: auto; }

.plate--wide { aspect-ratio: 3 / 2; }
.plate--tall { aspect-ratio: 5 / 7; }
.plate--square { aspect-ratio: 1 / 1; }

/* glossy sphere / CGI object */
.plate--sphere::before {
  content: "";
  position: absolute;
  left: 50%; top: 52%;
  width: 58%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.92) 0 6%, rgba(255,255,255,.35) 14%, transparent 34%),
    radial-gradient(circle at 70% 78%, rgba(0,0,0,.38) 0 22%, transparent 60%),
    var(--plate-obj, #111);
}
.plate--sphere::after {
  content: "";
  position: absolute;
  left: 50%; top: 84%;
  width: 62%; height: 8%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  filter: blur(6px);
}

/* perfume bottle / capsule still-life */
.plate--capsule::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 16%;
  width: 34%; height: 52%;
  transform: translateX(-50%);
  background:
    linear-gradient(100deg, rgba(255,255,255,.55) 0 8%, transparent 22% 74%, rgba(255,255,255,.30) 86% 100%),
    var(--plate-obj, #111);
}
.plate--capsule::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 68%;
  width: 13%; height: 12%;
  transform: translateX(-50%);
  background: var(--plate-obj2, #000);
}

/* arch / architectural crop */
.plate--arch::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 62%; height: 74%;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--plate-obj, #111), rgba(0,0,0,.12));
}
.plate--arch::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18%;
  background: rgba(0,0,0,.18);
}

/* lens / eye beauty close-up */
.plate--lens::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 74%; height: 40%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--plate-obj, #111);
}
.plate--lens::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 26%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 12%, transparent 30%),
    var(--plate-obj2, #000);
}

/* stacked bars / graphic composition */
.plate--bars::before {
  content: "";
  position: absolute;
  inset: 22% 18%;
  background:
    linear-gradient(180deg, var(--plate-obj, #111) 0 32%, transparent 32% 50%, var(--plate-obj2, #000) 50% 78%, transparent 78%);
}
.plate--bars::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: 50%;
  height: 1px;
  background: rgba(255,255,255,.6);
}

/* liquid / glassware pour */
.plate--liquid::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 66%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-12deg);
  border-radius: 46% 54% 38% 62% / 58% 42% 58% 42%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.8) 0 8%, transparent 32%),
    var(--plate-obj, #111);
}
.plate--liquid::after {
  content: "";
  position: absolute;
  left: 22%; top: 18%;
  width: 12%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--plate-obj2, #000);
}

/* Objects are sized off plate width, which reads too heavy on the 3:2
   key images — re-size those off height so the crop stays a still-life. */
.plate--wide.plate--sphere::before { width: auto; height: 62%; aspect-ratio: 1; }
.plate--wide.plate--sphere::after  { width: auto; height: 7%;  aspect-ratio: 9; top: 88%; }
.plate--wide.plate--capsule::before { width: auto; height: 58%; aspect-ratio: 0.5; }
.plate--wide.plate--capsule::after  { width: auto; height: 12%; aspect-ratio: 1.1; bottom: 74%; }
.plate--wide.plate--liquid::before  { width: auto; height: 78%; aspect-ratio: 1; }
.plate--wide.plate--arch::before    { width: auto; height: 78%; aspect-ratio: 0.72; }
.plate--wide.plate--lens::before    { width: auto; height: 52%; aspect-ratio: 2.1; }
.plate--wide.plate--lens::after     { width: auto; height: 34%; aspect-ratio: 1; }
.plate--wide.plate--bars::before    { inset: 16% 30%; }
.plate--wide.plate--bars::after     { left: 30%; right: 30%; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .carousel__track .carousel__slide { height: var(--slide-h, min(42vh, 380px)); }
  .split__lead, .split__body { grid-column: auto; }
  .index-row { grid-template-columns: 2fr 1fr; }
  .index-row > :nth-child(3) { display: none; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }

  .nav, .footer { grid-template-columns: 1fr auto; row-gap: var(--spacing-7); }
  .nav__center, .footer__center { justify-self: end; }
  .nav__end, .footer__end { grid-column: 1 / -1; justify-self: start; }
}

/* A side image fills its column so it ends level with the text beside it.
   Scoped tighter than img.plate and placed after the plate rules, which set
   height:auto and a square ratio. Only on wide screens: in the stacked
   layout the column has no text to match, so the square ratio stands. */
@media (min-width: 901px) {
  /* a wider left column for the image — 2fr:3fr puts it about 100px past the
     1/3 the three-column split gives, and stays proportional at any width */
  .split:has(.side-image) { grid-template-columns: 2fr 3fr; }
  .split:has(.side-image) > .split__lead,
  .split:has(.side-image) > .split__body { grid-column: span 1; }

  .split__lead:has(> img.side-image) { align-self: stretch; }
  .split__lead > img.side-image {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    /* the frame keeps its size; the photograph sits inside it whole rather
       than filling and cropping */
    object-fit: contain;
    object-position: center;
  }
}

/* one frame given two grid rows — for a portrait image that would otherwise
   sit small inside a landscape cell */
.grid--feed img.frame--big {
  grid-row: span 2;
  aspect-ratio: auto;
  height: 100%;
}

/* ---------- type tester ---------- */
.tester { padding: var(--spacing-19) 0; }
/* the input sits on top of a grey guide line; both share the same metrics
   so the guide always continues from the caret */
.tester__stage { position: relative; }
.tester__ghost,
.tester__input {
  font-family: var(--tester-font, "Noto Sans KR"), "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.tester__ghost {
  position: absolute;
  inset: 0;
  color: #c9c9c9;
  pointer-events: none;
  user-select: none;
}
.tester__typed { visibility: hidden; }

.tester__input {
  position: relative;
  display: block;
  width: 100%;
  min-height: 2.5em;
  border: 0;
  padding: 0;
  resize: none;
  overflow: hidden;
  background: none;
  /* the face first, a plainly different fallback behind it so a missing
     glyph is visible as well as listed */
  color: var(--color-ink);
}
.tester__input:focus { outline: none; }
.tester__input::placeholder { color: var(--color-ash); }
.tester__note {
  font-family: var(--font-inferi);
  font-size: var(--text-caption);
  line-height: 1.5;
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  margin: 0 0 var(--spacing-7);
  min-height: 1.5em;
}
.tester__note.is-missing { color: var(--color-ink); }

/* the dingbats sit under the tester as a quiet aside */
.tester__dingbat {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-11);
  margin: 0 0 var(--spacing-19);
}
.tester__dingbat-label {
  font-family: var(--font-inferi);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  flex: 0 0 auto;
}
/* deliberately NOT set in the typeface — these syllables are the keys you
   type to get a dingbat, so they have to stay readable as syllables */
.tester__dingbat-chars {
  font-family: var(--font-inferi);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ink);
  word-spacing: 0.2em;
}
.tester__coverage-sep {
  color: var(--color-ash);
  margin: 0 var(--spacing-9);
}
.tester__coverage {
  font-family: var(--font-inferi);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
}


/* ---------- typeface story ----------
   a single reading column: statements, specs, and grey slots standing in for
   pictures that have still to be made */
.story {
  /* Pretendard at a reading size: this column is meant to be read straight
     through, not scanned like the rest of the site */
  font-family: 'Pretendard Variable', Pretendard, var(--font-suisseintl);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: -0.005em;
  max-width: 620px;
  margin: 0 auto;
  padding: var(--spacing-19) 0;
}
.story__kicker {
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--color-ink-soft, #6f6f6f);
  margin: 0 0 var(--spacing-3);
}
.story__lead {
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-light);
  margin: 0 0 var(--spacing-11);
}
.story__h {
  font-size: 18px;
  font-weight: 600;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.01em;
  margin: var(--spacing-19) 0 var(--spacing-5);
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--color-rule, #e0e0e0);
}
.story__p {
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 var(--spacing-5);
}
.story__quote {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
  text-align: center;
  margin: var(--spacing-11) 0;
  color: var(--color-ink);
}
.story__list {
  list-style: disc;
  margin: 0 0 var(--spacing-5);
  padding-left: 1.1em;
  font-size: inherit;
  line-height: inherit;
}
.story__list li { margin-bottom: 0.35em; }
.specs {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: 0;
  font-size: inherit;
  margin: 0 0 var(--spacing-5);
}
.specs dt,
.specs dd {
  margin: 0;
  padding: 0.6em 0;
  border-top: 1px solid var(--color-rule, #e0e0e0);
  line-height: 1.5;
}
.specs dt { color: var(--color-ink-soft, #6f6f6f); }
.specs dd:last-of-type,
.specs dt:last-of-type { border-bottom: 1px solid var(--color-rule, #e0e0e0); }

/* a picture that does not exist yet, sized to the ratio it should be shot at */
.slot {
  margin: var(--spacing-9) 0;
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-5);
}
.slot figcaption {
  font-size: 13px;
  line-height: 1.6;
  color: #8a8a8a;
  max-width: 30ch;
}
.slot__ratio {
  display: block;
  margin-top: 0.5em;
  letter-spacing: 0.14em;
}
/* 본문 스페시멘 — 그림이 아니라 이 폰트로 실제 조판한 글. 한글과 라틴을
   나란히 놓아 두 문자의 결이 같은지 바로 확인할 수 있다 */
.specimen {
  /* 아래 글자표 이미지와 같은 종이색 위에 앉혀, 둘이 한 장처럼 이어지게 한다 */
  background: #f5f6f1;
  margin: var(--spacing-9) 0;
  padding: var(--spacing-11) var(--spacing-11) calc(var(--spacing-11) - var(--spacing-5));
}
.specimen__col + .specimen__col { margin-top: var(--spacing-11); }
.specimen__label {
  font-family: var(--font-suisseintl);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #8a8a8a;
  margin: 0 0 var(--spacing-5);
}
.specimen__text + .specimen__text { margin-top: 0.9em; }
.specimen__text {
  font-family: var(--tester-font, "Noto Sans KR"), "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: -0.01em;
  margin: 0;
  word-break: keep-all;
}
.specimen__text--ko { line-height: 1.9; }
@media (max-width: 700px) {
  .specimen { padding: var(--spacing-9); }
}

/* 기호표 — 이미지가 아니라 폰트가 실제로 그리는 글자를 그대로 깐다 */
.glyphs__count {
  font-family: var(--font-suisseintl);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #8a8a8a;
  margin: var(--spacing-9) 0 var(--spacing-5);
}
.glyphs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  background: #f5f6f1;
  border: 1px solid #e6e7e1;
  gap: 1px;
  margin: 0 0 var(--spacing-9);
}
.glyphs > span {
  font-family: var(--tester-font, "Noto Sans KR"), "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  font-size: 19px;
  line-height: 1;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 1px solid #edeee8;   /* gap 대신 outline을 써서 칸이 어긋나지 않게 */
  overflow: hidden;
}
@media (max-width: 700px) {
  .glyphs { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
  .glyphs > span { font-size: 16px; }
}

/* 두 장을 나란히 — 각자 원래 비율을 지키고 아래를 맞춘다 */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--element-gap);
  align-items: end;
  margin: var(--spacing-9) 0;
}
.pair--three { grid-template-columns: repeat(3, 1fr); align-items: start; }
/* 세 장은 읽기 칼럼보다 넓게 펴야 표정이 보인다 — 컨테이너 폭까지 밀어낸다 */
@media (min-width: 1080px) {
  .pair--three { width: 160%; margin-left: -30%; }
}
.pair__fig { margin: 0; }
.pair__fig img { width: 100%; height: auto; display: block; }
.pair__fig figcaption { font-size: 13px; color: #8a8a8a; padding-top: 0.6em; }
@media (max-width: 700px) {
  .pair { grid-template-columns: 1fr; gap: var(--spacing-9); }
}

.story__fig { margin: var(--spacing-9) 0; }
.story__fig img { width: 100%; height: auto; display: block; }
.story__fig figcaption {
  font-size: 13px;
  color: #8a8a8a;
  padding-top: 0.6em;
}
.story__todo {
  font-size: 13px;
  color: #8a8a8a;
  border-top: 1px solid var(--color-rule, #e0e0e0);
  padding-top: var(--spacing-5);
  margin-top: var(--spacing-11);
}
@media (max-width: 700px) {
  .specs { grid-template-columns: 1fr; }
  .specs dd { border-top: 0; padding-top: 0; }
}

/* the sentence that has to land: a marker line drawn under the text, so the
   page stays monochrome and the highlight still reads at a glance */
.hl {
  background: linear-gradient(transparent 58%, #e4e4e4 58%, #e4e4e4 96%, transparent 96%);
  color: inherit;
  font-weight: 600;
  padding: 0 0.05em;
}

/* Compact overview of the in-progress Jajaknamu glyph sheets. */
.glyph-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 760px;
  margin: 32px auto;
  align-items: start;
}
.glyph-gallery__item { margin: 0; min-width: 0; }
.glyph-gallery__item a { display: block; cursor: zoom-in; }
.glyph-gallery__item img { display: block; width: 100%; height: auto; }
.glyph-gallery__item figcaption { margin-top: 8px; font-size: 12px; color: var(--color-graphite); }
@media (max-width: 600px) {
  .glyph-gallery { gap: 12px; }
  .glyph-gallery__item figcaption { font-size: 10px; }
}

/* Keep image viewer controls visible independently of image dimensions. */
.lightbox { padding: 64px 48px 42px; overflow: hidden; }
.lightbox__img { max-width: calc(100vw - 96px); max-height: calc(100dvh - 106px); min-height: 0; flex-shrink: 1; }
.lightbox__close {
  position: fixed; top: 12px; right: 12px; z-index: 102;
  width: 44px; height: 44px; padding: 0;
  background: #fff; color: #111; border: 1px solid #aaa;
  font-family: Arial, sans-serif; font-size: 0;
}
.lightbox__close::before, .lightbox__close::after {
  content: ''; position: absolute; top: 20px; left: 11px;
  width: 20px; height: 2px; background: #111; transform: rotate(45deg);
}
.lightbox__close::after { transform: rotate(-45deg); }
.lightbox__close:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

/* Four original lettering works presented as one home-page thumbnail. */
.lettering-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  gap: 2px;
  background: #fff;
}
.lettering-mosaic img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}

/* Lettering originals: no mockup backing, padding or shadows. */
.lettering-originals { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.lettering-originals > img.plate {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: center;
  padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none;
}