/* 시안 A — Catalogue
   전시 도록의 조판. 색을 화면에서 빼고 작품 14점의 서로 다른 양식을
   균일한 격자가 묶어 준다. 유일한 채도는 그림에서 나온다. */

:root {
  --paper:   #F7F6F3;   /* 쿨 뉴트럴 */
  --paper-2: #EFEDE8;
  --ink:     #1C1B1A;   /* 대비 15.91 : AAA */
  --ink-2:   #55514A;   /* 대비  7.30 : AAA */
  --ink-3:   #6E6862;   /* 대비  5.09 : AA  */
  --rule:    rgba(28,27,26,.14);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-util:    'Archivo', 'Inter', system-ui, sans-serif;
}

.sec__title { font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -.01em; }

/* 워드마크 — 활자 조판 */
.mark {
  font-family: var(--font-util); font-weight: 600;
  font-size: clamp(13px, 1.5vw, 15px); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); margin-right: auto; line-height: 1.2;
}
.mark span { display: block; font-size: 10px; letter-spacing: .16em; color: var(--ink-3); font-weight: 400; }

/* 히어로 — 작가 사진 + 작가노트 한 문장.
   초판은 사진 없이 문장만 두었으나(도록은 표지에 사람을 넣지 않는다),
   Haidar 본인 요청(2026-09-04)으로 초상을 맨 위로 올렸다.
   2026-10-06 셀카(portrait.*)를 작업실 촬영본(IMG_2247, 점묘 나무 벽 앞)으로
   교체했다(발주자 승인). 모바일에서 172px 까지 줄어들어 상반신으로 좁게 잘랐다.
   portrait.* 는 studio/ 시안이 아직 참조해 남겨 둔다.
   ⚠️ 초상에는 .reveal 을 걸지 않는다. `.reveal{opacity:0}` 이라 JS 가 실패하면
      사라지는데, 사이트 첫 화면에서 가장 중요한 요소다. */
.hero {
  padding-block: clamp(56px, 9vw, 118px) clamp(46px, 6vw, 80px);
  display: grid;
  grid-template-columns: clamp(148px, 19vw, 236px) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
}
.hero__portrait img { width: 100%; height: auto; border: 1px solid var(--rule); }
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .hero__portrait { max-width: 172px; }
}
.hero__q {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 5vw, 60px); line-height: 1.22; letter-spacing: -.012em;
  max-width: 20ch;
}
.hero__q em { font-style: italic; }
.hero__by {
  margin-top: 26px; font-family: var(--font-util); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}

/* 균일한 열 격자 — 열 너비가 같아 서로 다른 양식이 하나로 묶인다.
   ⚠️ 작품을 자르지 않는다. 도록은 도판을 크롭하지 않으며,
      괘선이 크롭된 가장자리를 두르면 캔버스 경계를 잘못 표시하게 된다.
      (W11은 2:1 파노라마라 정사각으로 맞추면 절반이 날아간다) */
.grid {
  display: grid; gap: clamp(24px, 3.2vw, 44px);
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  align-items: start;
}
.grid .work__img { border: 0; padding: 0; }
.grid .work__img img { width: 100%; height: auto; border: 1px solid var(--rule); }

/* About — 글 + 작업실 사진(2026-09-10 촬영). 측정은 58ch 로 잡는다.
   ⚠️ 작업실은 세탁소 안에 있다. 세탁소는 보여 주지 않는다(발주자 지시, 2026-10-06) —
      사진을 바꿀 때 배경에 세탁물·가게가 들어오지 않는지 확인할 것. */
.about__p { margin: 0 0 1em; max-width: 58ch; }
.about { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.about__fig { margin: 0; display: grid; gap: 12px; }
.about__fig img { width: 100%; height: auto; border: 1px solid var(--rule); }
.about__details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about__cap, .contact__cap {
  font-family: var(--font-util); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Contact — 폼 옆에 커미션 사진. 원본(2581)은 배경이 세탁물이라 그림과 손만 남기고 잘랐다 */
.contact { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 620px) minmax(0, 380px); justify-content: space-between; align-items: start; }
}
.contact__fig { margin: 0; display: grid; gap: 12px; max-width: 380px; }
.contact__fig img { width: 100%; height: auto; border: 1px solid var(--rule); }

/* 초안 고지 — 승격 전 루트 비교 페이지에 있던 문구를 옮겨 왔다.
   작품 이미지가 Worple 임시본이라는 사실은 정식 공개 전까지 화면에 남아야 한다.
   (docs/SESSION-2026-09-04.md — "반드시 먼저 밝힐 것") */
.draft {
  border-top: 1px solid var(--rule);
  padding-block: clamp(30px, 4vw, 46px) clamp(24px, 3vw, 36px);
  color: var(--ink-3); font-size: 14.5px;
}
.draft h2 {
  margin: 0 0 12px; font-family: var(--font-util);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
}
.draft p { margin: 0 0 10px; max-width: 74ch; }
.draft strong { color: var(--ink-2); }