/* ─────────────────────────────────────────────────────────────
   홈 첫 화면 · 미디어아트 스튜디오 문법으로 다시 짠다.

   해외 스튜디오(Moment Factory, Float4 등)의 공통점은 단순하다.
   작품이 화면을 전부 먹고, 글자는 한 줄만 남고, 자격 배지는 첫 화면에
   두지 않는다. 파는 사람이 아니라 만드는 사람으로 보이려는 배치다.

   그래서 첫 화면은 어둡게 두고 본문은 흰색으로 간다. 5,400줄짜리 기존
   스타일을 뒤집지 않고 첫 화면만 갈아 끼우는 방법이기도 하다.
   styles.css 뒤에 실린다.
   ───────────────────────────────────────────────────────────── */

body.home-2026 {
  --h-ink: #06080c;
  --h-white: #fff;
  --h-mute: rgba(255, 255, 255, 0.6);
  /* 0.38이면 12px 보조 글씨가 어두운 바탕에서 3.49:1이라 기준(4.5:1)에
     못 미친다. 0.48로 올리면 5.0:1이 된다. 어두운 면 위의 작은 글씨는
     회색으로 흐리는 대신 대비를 확보하고 자간을 조금 벌려야 읽힌다. */
  --h-dim: rgba(255, 255, 255, 0.48);
  --h-line: rgba(255, 255, 255, 0.14);
  --h-pad: clamp(18px, 4vw, 56px);
}

/* 실시간 하늘 배경은 첫 화면에서 걷는다.
   연보라 그라데이션이 화면 전체를 덮으면 작품 색이 죽는다.
   대신 지금 날씨는 첫 화면 아래 한 줄로 남긴다. */
body.home-2026 .sky-layer { display: none; }
/* 바탕은 가장 깊은 자리다. 구역이 그 위에 얹히고, 카드가 다시 그
   위로 뜬다. 깊이를 그림자가 아니라 밝기로 만든다 — 어둠 위에서
   그림자는 아무것도 아니다. */
body.home-2026 { background: var(--void); color: var(--ink); }

/* ── 첫 화면 ────────────────────────────────────────────── */
.home2-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: var(--h-ink);
  color: var(--h-white);
  isolation: isolate;
}

/* 살아 있는 작품이 그대로 배경이 된다. 이미지가 아니라 돌아가는 코드다. */
.home2-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* 영상이 붙기 전에도 화면이 완성되어 보여야 한다. 검은 판만 두면
     "아직 안 뜬 자리"로 읽힌다. */
  background:
    radial-gradient(120% 90% at 50% 18%, #16203a 0%, #0a0e17 62%, var(--h-ink) 100%);
}

/* 남의 집 재생기는 iframe이라 object-fit: cover 가 안 먹는다.
   16:9 를 화면보다 크게 잡고 가운데를 보여 주는 방식으로 덮는다. */
.home2-vimeo {
  position: absolute;
  /* 영상 아래쪽에 자막이 구워져 있다. 가운데를 맞추면 그 띠가 제목
     글자와 겹쳐 지저분해진다. 16:9 를 8% 키워 잘라낼 여유를 만들고
     위로 조금 올려, 자막 띠가 보이는 자리 밖으로 나가게 한다. */
  top: 44%;
  left: 50%;
  /* 8% 만 키우면 top:44% 로 올린 만큼 아래가 모자라 22px 이 빈다.
     20% 로 잡아야 자막 띠를 밀어내고도 사방이 덮인다. */
  width: 120vw;
  height: 67.5vw;             /* 가로가 길 때 — 120vw 의 9/16 */
  min-width: 214vh;           /* 세로가 길 때 — 120vh 의 16/9 */
  min-height: 120vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;       /* 첫 화면은 읽는 자리다. 눌러도 재생기가 반응하지 않게 */
  opacity: 0;
  transition: opacity 600ms ease;
}

/* 다 불러온 뒤에 켠다. 반쯤 그려진 재생기가 깜빡이며 나타나지 않게. */
.home2-art.is-playing .home2-vimeo {
  opacity: 1;
}
/* 이 규칙이 .home2-vimeo 보다 뒤에 있고 선택자도 더 세다(.home2-art iframe).
   그래서 inset:0 이 위에서 잡아 둔 top/left 를 덮어써, 영상이 화면 왼쪽
   위로 밀려 4분의 1만 덮고 있었다. 남의 집 재생기는 여기서 제외한다. */
.home2-art img,
.home2-art iframe:not(.home2-vimeo) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.home2-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 8, 12, 0.72) 0%, rgba(6, 8, 12, 0.18) 34%,
                    rgba(6, 8, 12, 0.62) 74%, rgba(6, 8, 12, 0.92) 100%);
}

.home2-body {
  position: relative;
  z-index: 2;
  padding: 0 var(--h-pad) clamp(26px, 4vh, 44px);
  max-width: 1180px;
}

.home2-eyebrow {
  margin: 0 0 clamp(14px, 2vh, 24px);
  /* 모바일에서 10px까지 내려가 읽기 어려웠다. 최소 11px로 올린다. */
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--h-dim);
  font-weight: 600;
}

.home2-word {
  margin: 0;
  font-size: clamp(2.9rem, 8.4vw, 7.6rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--h-white);
  text-wrap: balance;
}

.home2-line {
  margin: clamp(16px, 2.4vh, 30px) 0 0;
  font-size: clamp(1.15rem, 2.3vw, 2rem);
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--h-white);
  max-width: 22ch;
}

.home2-sub {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: clamp(0.9rem, 1.2vw, 1.02rem);
  line-height: 1.75;
  color: var(--h-mute);
}
.home2-sub b { color: rgba(255, 255, 255, 0.9); font-weight: 600; }

.home2-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 3vh, 34px);
}
.home2-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* 어두운 바탕에서 가장 센 단추는 흰 판이다. 다만 판이 희면 글자는
   어두워야 한다 — 바탕을 뒤집을 때 글자까지 같이 밝아져 흰 판에 흰
   글자가 됐었다. */
/* 판이 희면 글자는 어두워야 한다. 예전에는 --void 가 가장 어두운 색이라
   그걸 썼는데, 종이로 뒤집으면서 --void 가 흰색이 됐다. 히어로는 늘
   어두우므로 여기서는 히어로 전용 색을 쓴다. */
.home2-cta .is-solid { background: var(--h-white); color: var(--h-ink); }
.home2-cta .is-solid:hover { background: #ffffff; }
.home2-cta .is-ghost {
  color: var(--h-white);
  border: 1px solid rgba(255, 255, 255, 0.34);
}
.home2-cta .is-ghost:hover { border-color: var(--h-white); background: rgba(255, 255, 255, 0.1); }

/* 지금 대구 · "오늘은 봄날"이라는 이름이 사는 자리 */
.home2-now {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 14px var(--h-pad);
  border-top: 1px solid var(--h-line);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--h-mute);
}
.home2-now b { color: var(--h-white); font-weight: 600; }
.home2-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #7ee2a8; flex: none;
  box-shadow: 0 0 0 3px rgba(126, 226, 168, 0.18);
}

/* ── 작업 색인 ──────────────────────────────────────────── */
.home2-index {
  background: var(--h-ink);
  color: var(--h-white);
  padding: clamp(48px, 8vh, 96px) var(--h-pad) clamp(40px, 6vh, 74px);
}
.home2-index-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(22px, 3vh, 36px);
}
.home2-index-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  letter-spacing: -0.03em;
  font-weight: 800;
}
.home2-index-head p { margin: 0; font-size: 0.88rem; color: var(--h-mute); max-width: 44ch; line-height: 1.7; }

.home2-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}
@media (max-width: 900px) { .home2-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .home2-tiles { grid-template-columns: 1fr; } }

.home2-tile { margin: 0; }
.home2-screen {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0d0f14;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.home2-screen img,
.home2-screen iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; object-fit: cover;
}
.home2-screen::after {
  content: "publicbloom.art";
  position: absolute; right: 8px; bottom: 7px; z-index: 2;
  color: rgba(255, 255, 255, 0.3);
  font-size: 9px; letter-spacing: 0.04em; pointer-events: none;
}
.home2-tile .art-play {
  position: absolute;
  left: 10px; bottom: 10px; z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(8, 10, 14, 0.56);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit; font-size: 0.76rem; font-weight: 700;
  cursor: pointer;
}
.home2-tile .art-play:hover { background: rgba(8, 10, 14, 0.82); border-color: var(--edge-soft); }

.home2-cap { display: block; padding-top: 12px; }
.home2-cap b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.home2-cap span { display: block; margin-top: 3px; font-size: 0.79rem; color: var(--h-dim); }

/* ── 자격 · 첫 화면이 아니라 여기에 둔다 ────────────────── */
/* 자격 띠. 첫 화면(어두운 작품) 바로 아래에 초록으로 앉는다.
   어둠 → 초록 → 흰 종이. 색이 한 번 꺾여야 첫 화면이 끝난 것으로 읽힌다.
   색값은 styles.css 의 초록 띠 규칙이 가져간다. */
.home2-cred {
  padding: clamp(30px, 5vh, 52px) var(--h-pad) clamp(52px, 8vh, 96px);
}

.home2-cred ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 760px) { .home2-cred ul { grid-template-columns: repeat(2, 1fr); row-gap: 22px; } }
.home2-cred li { padding: 0 clamp(14px, 2vw, 26px); border-left: 1px solid rgba(255, 255, 255, 0.24); }
.home2-cred li:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 760px) {
  .home2-cred li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.home2-cred b { display: block; font-size: 0.98rem; font-weight: 700; }
.home2-cred span { display: block; margin-top: 4px; font-size: 0.78rem; color: rgba(242, 248, 244, 0.8); line-height: 1.55; }

/* ── 어두운 첫 화면 위의 메뉴 ───────────────────────────── */
/* 기존 스타일은 메뉴를 흐름 안에 둔다(position: relative). 그러면 첫 화면 위에
   흰 띠 72px이 생기고 흰 글씨가 그 위에서 보이지 않는다. 여기서는 작품 위로 띄운다. */
body.home-2026 .site-nav {
  position: fixed;
  inset: 0 0 auto;
  background: transparent;
}
/* 떠 있는 메뉴는 판이 아니라 재질이어야 한다. 0.88은 거의 불투명이라
   본문이 그 아래로 지나가는 느낌이 없었다. 투명도를 낮추고 채도를
   올려 뒤가 비치게 하고, 경계는 1px 선 대신 흐림으로 끝낸다. */
body.home-2026 .site-nav.scrolled {
  background: rgba(253, 252, 250, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(16, 32, 26, 0.08);
}

/* 투명도를 줄이라고 한 사용자에게는 유리판 대신 판을 준다 */
@media (prefers-reduced-transparency: reduce) {
  body.home-2026 .site-nav.scrolled {
    background: var(--petal);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  body.home-2026 .site-nav.scrolled {
    background: #ffffff;
    backdrop-filter: none;
    border-bottom: 1px solid var(--ink);
  }
}
/* 메뉴는 두 얼굴이다. 첫 화면(어두운 작품) 위에서는 흰 글씨, 스크롤해서
   흰 유리판이 되면 먹빛. 한 색으로 두면 둘 중 하나에서 안 보인다 —
   종이로 뒤집었을 때 실제로 첫 화면 메뉴가 통째로 사라졌다. */
/* 흰 글씨 메뉴는 어두운 첫 화면이 실제로 깔린 쪽에서만이다.
   home-2026 만 보고 걸었더니 /pieces 처럼 그 클래스만 빌려 쓰는 흰 쪽에서
   메뉴가 통째로 사라졌다. 그 쪽은 body 에 dark-hero 를 안 단다. */
body.dark-hero.site-page .brand strong,
body.dark-hero.site-page .site-nav nav a { color: var(--h-white); }
body.dark-hero.site-page .brand span { color: var(--h-mute); }
body.dark-hero.site-page .site-nav nav a:hover { color: var(--h-white); }
body.dark-hero.site-page .nav-toggle span { background: var(--h-white); }
body.dark-hero .site-nav nav a.is-cta {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  padding: 7px 16px;
}
body.dark-hero .site-nav nav a.is-cta:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--h-white); }

body.dark-hero.site-page .site-nav.scrolled .brand strong,
body.dark-hero.site-page .site-nav.scrolled nav a { color: var(--ink); }
body.dark-hero.site-page .site-nav.scrolled .brand span { color: var(--deep); }
body.dark-hero.site-page .site-nav.scrolled .nav-toggle span { background: var(--ink); }
body.dark-hero .site-nav.scrolled nav a.is-cta {
  border-color: var(--rx-green);
  color: var(--rx-green);
}
body.dark-hero .site-nav.scrolled nav a.is-cta:hover {
  background: var(--rx-green);
  color: var(--rx-ink);
}

/* 본문은 흰 바탕에서 다시 읽힌다 */
body.home-2026 main > .section { background: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .home2-cta a { transition: none; }
}

/* ── 미디어박스 · 흰 본문 사이에 넣는 어두운 마디 ─────────── */
.home2-box {
  background: var(--h-ink);
  color: var(--h-white);
  padding: clamp(56px, 9vh, 108px) var(--h-pad);
}
.home2-box-in { max-width: 1180px; margin: 0 auto; }
.home2-box h2 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 3.1rem);
  line-height: 1.16;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--h-white);
}
.home2-box-lead {
  margin: 18px 0 0;
  max-width: 60ch;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.8;
  color: var(--h-mute);
}
.home2-box-lead b { color: var(--h-white); font-weight: 700; }

.home2-box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: clamp(30px, 5vh, 46px) 0 0;
  padding: clamp(22px, 3vh, 32px) 0 0;
  list-style: none;
  border-top: 1px solid var(--h-line);
}
@media (max-width: 900px) { .home2-box-list { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } }
@media (max-width: 520px) { .home2-box-list { grid-template-columns: 1fr; row-gap: 22px; } }
.home2-box-list li { padding: 0 clamp(14px, 2vw, 26px); border-left: 1px solid var(--h-line); }
.home2-box-list li:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 900px) { .home2-box-list li:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 520px) { .home2-box-list li { padding-left: 0; border-left: 0; } }
.home2-box-list b { display: block; font-size: 1rem; font-weight: 700; }
.home2-box-list span { display: block; margin-top: 7px; font-size: 0.83rem; color: var(--h-dim); line-height: 1.7; }

.home2-box-more { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(26px, 4vh, 38px) 0 0; }
.home2-box-more a {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: 11px 22px;
  font-size: 0.92rem; font-weight: 700; text-decoration: none;
  color: var(--h-white); border: 1px solid rgba(255, 255, 255, 0.34);
}
/* 흰 판 위 글자는 어두워야 한다. 위 .is-solid 와 같은 이유다. */
.home2-box-more a:first-child { background: var(--h-white); color: var(--void); border-color: var(--h-white); }
.home2-box-feat li:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 620px) { .home2-box-feat li:nth-last-child(-n+2) { border-bottom: 1px solid var(--h-line); }
  .home2-box-feat li:last-child { border-bottom: 0; } }
.home2-box-more a:hover { background: rgba(255, 255, 255, 0.12); }
.home2-box-more a:first-child:hover { background: #ffffff; }

.home2-box-proof {
  margin: clamp(24px, 3.5vh, 34px) 0 0;
  padding-top: clamp(18px, 2.5vh, 24px);
  border-top: 1px solid var(--h-line);
  max-width: 70ch;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--h-mute);
}
.home2-box-proof b { color: var(--h-white); font-weight: 700; }

.home2-box-sub {
  margin: clamp(34px, 5vh, 52px) 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: none;
  font-weight: 700;
  color: var(--h-dim);
}
.home2-box-sub + .home2-box-list { margin-top: clamp(16px, 2vh, 22px); }

.home2-box-feat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  margin: clamp(16px, 2vh, 22px) 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 620px) { .home2-box-feat { grid-template-columns: 1fr; } }
.home2-box-feat li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--h-line);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--h-dim);
}
/* 설명을 걷어내고 이름만 남겼다. 8.5em 으로 붙잡아 두면 '멈추면 스스로
   되 / 살아남' 처럼 이름이 두 줄로 꺾인다. 제 폭만큼 쓰게 둔다. */
.home2-box-feat b { color: var(--h-white); font-weight: 700; }

.home2-box-terms {
  margin: clamp(20px, 3vh, 28px) 0 0;
  max-width: 70ch;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--h-mute);
}
.home2-box-terms b { color: var(--h-white); font-weight: 700; }

/* ── 히어로 배경 영상 ───────────────────────────────────────
   같은 작품을 라이브로 돌리면 4K 캔버스라 페이지가 5fps가 된다.
   미리 뽑은 완전 루프 영상을 포스터 위에 겹친다. 재생이 안 되면
   포스터가 그대로 보이므로 어떤 경우에도 빈 화면은 나오지 않는다. */
/* 움직임을 줄이라고 한 사용자에게는 정지 화면을 준다 */
@media (prefers-reduced-motion: reduce) {
}

/* 좁은 화면에서는 데이터를 쓰지 않는다. 첫 화면도 짧아 정지 화면으로 충분하다. */
@media (max-width: 640px) {
}

/* 어두운 면 위의 12px 안팎 글씨는 자간을 조금 벌려 읽히게 한다 */
.home2-eyebrow,
.home2-cred span,
.home2-cap span {
  letter-spacing: 0.015em;
}

/* 배경으로 도는 것이 무슨 작업인지 적는 줄.
   첫 화면에서 제일 작은 글자지만, 이게 없으면 예쁜 배경일 뿐이다. */
.home2-credit {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0;
  padding: 0 var(--h-pad) 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(233, 239, 250, 0.72);
}

.home2-credit-label {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.home2-credit a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  transition: border-color 160ms ease;
}

.home2-credit a:hover {
  border-bottom-color: var(--edge-soft);
}

.home2-credit-meta {
  color: rgba(233, 239, 250, 0.55);
}

/* ── 더 보기 ─────────────────────────────────────────────────
   랜딩에 다 이어 붙이면 스크롤이 길어져 무엇을 하는 회사인지 오히려
   안 읽힌다. 긴 것들은 각자 주소로 빼고 여기서는 이름만 건다. */
.more-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* auto-fit 으로 두었더니 넓은 화면에서 여덟이 한 줄로 서서, 칸마다
     글자 두 줄만 든 얇은 띠가 됐다. 넉넉한 칸 넷으로 묶어 두 줄로 세운다. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line, rgba(16, 32, 26, 0.12));
  border: 1px solid var(--line, rgba(16, 32, 26, 0.108));
  border-radius: 14px;
  overflow: hidden;
}
.more-grid a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.2vw, 26px);
  min-height: 116px;
  height: 100%;
  background: var(--paper, #0b0e14);
  transition: background 140ms ease;
}
.more-grid a:hover,
.more-grid a:focus-visible { background: rgba(16, 32, 26, 0.05); }
.more-grid b {
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  font-weight: 700;
  letter-spacing: -.015em;
}
.more-grid span {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-dim, rgba(16, 32, 26, 0.6));
}
@media (max-width: 980px) {
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .more-grid a { padding: 16px 16px; min-height: 0; }
}

/* 작품 페이지(/pieces)에서 쓰는 타일 구역.
   랜딩에서는 첫 화면 바로 아래에 검은 띠로 붙지만, 여기서는 본문 한가운데
   놓이므로 위아래 여백만 줄이고 바탕은 페이지를 따른다.

   바탕을 페이지에 맡기면 글자도 페이지를 따라야 한다. 종이로 뒤집으면서
   여기만 흰 글자가 남아 흰 판에 흰 글씨가 됐다 — 설명 한 문단과 작품
   이름이 통째로 안 보였다. */
.subpage-main .home2-index {
  background: transparent;
  color: var(--ink);
  padding-top: clamp(18px, 3vh, 34px);
}
.subpage-main .home2-index-head p { color: var(--deep); }
.subpage-main .home2-cap b { color: var(--ink); }
.subpage-main .home2-cap span { color: var(--faint); }

/* ── 첫 화면을 글자로 짓는다 ─────────────────────────────────
   배경은 우리가 만든 영상이 돈다. 그 위에 얹는 글자가 굵은 고딕이면
   영상과 싸운다 — 둘 다 큰 목소리다. 명조로 낮춰 부르면 영상이 앞으로
   나오고 글자는 그 위에 얹힌 제목이 된다. 전시 도록의 표지와 같은 짜임이다.

   eyebrow 는 대문자로 벌려 쓰던 것을 이탤릭 명조 한 줄로 돌린다.
   대문자 자간 놀이는 어느 랜딩에나 있다. */
.home2-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 19px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.66);
}

.home2-word {
  font-family: var(--font-display);
  /* 명조는 획이 가늘어 같은 크기에서 고딕보다 작아 보인다. 조금 키운다. */
  font-size: clamp(3.2rem, 9.2vw, 8.6rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.012em;
  font-synthesis-weight: none;
  color: var(--h-white);
}

/* 두 번째 줄도 제목이다. 크기만 낮추고 같은 얼굴로 이어 붙인다.
   여기서 고딕으로 갈아타면 한 문장이 두 사람 목소리로 읽힌다. */
.home2-line {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.1vw, 2.5rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.008em;
  font-synthesis-weight: none;
  color: rgba(255, 255, 255, 0.86);
}

/* 읽는 줄은 고딕 그대로. 여기까지 명조로 끌고 가면 본문이 흐려진다. */
.home2-sub {
  font-family: var(--font);
  letter-spacing: -0.008em;
}

@media (max-width: 640px) {
  .home2-word { letter-spacing: -0.006em; }
  .home2-line { letter-spacing: -0.004em; }
}