/* Home-only styles */
.hero{ position:relative; border-bottom:1px solid var(--line); }
/* 첫 화면(스크롤 전)에 정사각 사진 전체가 보이게 — 자르지 않고 크기만 맞춤 (10/11)
   세로 화면(폰 · 세로 태블릿 · 900px 미만): 사진을 맨 위에(폭 꽉, 단 화면 높이 − 머리글을 넘지 않게), 글은 아래
   가로 화면(PC): 사진 한 변 = 화면 높이 − 머리글(+테두리 1px), 남는 폭은 글 칸. 캡션은 둘 다 사진 위에 */
.hero-grid{ display:flex; flex-direction:column; }
.hero-text{ padding:36px var(--gut) 40px; display:grid; align-content:center; gap:22px; }
.hero-text .lead{ max-width:520px; color:var(--ink); }
.hero-text .btn-row{ margin-top:10px; }
.hero-media{ order:-1; position:relative; width:min(100%, calc(100svh - var(--hdr) - 1px)); margin:0 auto; }
.hero-ph{ aspect-ratio:1/1; overflow:hidden; background:var(--warm); }
.hero-ph img{ width:100%; height:100%; object-fit:cover; }
.hero-cap{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 24px;
  padding:18px var(--gut) 8px; background:linear-gradient(transparent, rgba(62,56,50,.55)); }
.hero-cap .tiny{ color:rgba(242,237,230,.92); font-size:11px; line-height:1.6; }
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .hero-text{ padding:72px 56px 72px max(var(--gut), calc((100vw - var(--max))/2 + var(--gut))); }
  .hero-media{ order:0; --s:min(calc(100svh - var(--hdr) - 1px), 56vw); width:var(--s); height:var(--s); margin:0; align-self:start; }
  .hero-ph{ height:100%; }
  .hero-cap{ padding:14px 24px; }
  .hero-cap .tiny{ font-size:12px; line-height:1.75; }
}
@media (min-width:900px) and (min-aspect-ratio:1/1) and (max-height:760px){ .hero-text{ padding-top:40px; padding-bottom:40px; gap:16px; } }
.hero-fine{ padding:12px var(--gut) 20px; }
@media (min-width:900px) and (min-aspect-ratio:1/1){ .hero-fine{ display:none; } }
.hero-text .fine.desk{ display:none; }
@media (min-width:900px) and (min-aspect-ratio:1/1){ .hero-text .fine.desk{ display:block; margin-top:28px; max-width:440px; } }

/* products head */
.prod-head{ display:grid; gap:16px; margin-bottom:40px; }
@media (min-width:900px){ .prod-head{ grid-template-columns:1fr auto; align-items:end; margin-bottom:56px; } }

/* made to order */
.steps{ list-style:none; display:grid; border-top:1px solid var(--line); }
.step{ display:grid; grid-template-columns:56px 1fr; gap:4px 12px; padding:28px 0; border-bottom:1px solid var(--line); }
.step .num{ font-size:34px; line-height:1; grid-row:span 2; }
.step h3{ font-size:17px; font-weight:400; line-height:1.6; color:var(--ink); }
.step p{ font-size:14px; line-height:1.85; color:var(--mute); }
@media (min-width:900px){
  .steps{ grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
  .step{ grid-template-columns:1fr; gap:14px; padding:40px 40px 44px 0; border-bottom:0; }
  .step + .step{ padding-left:40px; border-left:1px solid var(--line); }
  .step .num{ font-size:52px; grid-row:auto; margin-bottom:10px; }
  .step h3{ font-size:19px; }
}

/* about teaser */
.about-t{ display:grid; gap:36px; align-items:center; }
.about-t .media{ aspect-ratio:1/1; overflow:hidden; }
.about-t .media img{ width:100%; height:100%; object-fit:cover; }
.about-t .txt{ display:grid; gap:20px; justify-items:start; max-width:540px; }
@media (min-width:900px){ .about-t{ grid-template-columns:1fr 1fr; gap:88px; } }

/* instagram band */
.ig{ display:grid; gap:22px; justify-items:center; text-align:center; }
.ig .handle{ font-family:'Cormorant Garamond',serif; font-weight:300; font-style:italic; font-size:40px; line-height:1.1; color:var(--ink); word-break:break-all; }
@media (min-width:768px){ .ig .handle{ font-size:64px; } }
.ig p{ max-width:520px; font-size:14px; color:var(--mute); }