/* Tavon Works — 2026 */
:root {
  --bg: #ebe8df;
  --bg-deep: #e2ded3;
  --ink: #31241f;
  --ink-soft: #6f6258;
  --taupe: #b0a594;
  --line: rgba(49, 36, 31, 0.18);
  --gutter: 8px;
  --pad: 12px;
  --serif: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.75;
  font-weight: 400;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

/* ── type ─────────────────────────────── */
.label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}
.serif { font-family: var(--serif); }
.muted { color: var(--ink-soft); }
.u:hover, .foot a:hover, .nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── header ───────────────────────────── */
.top { padding: var(--pad) var(--pad) 0; position: relative; z-index: 5; }
.wordmark { display: block; width: 100%; color: var(--ink); }
.wordmark svg { display: block; width: 100%; height: auto; }
.nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  padding: 14px 0 12px;
}
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.nav a:last-child { text-align: right; }

/* home: header floats over the hero image */
.home .top { position: absolute; inset: 0 0 auto 0; }
.hero { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--bg-deep); }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }

/* ── intro block (vertical label + centred text) ── */
.intro {
  position: relative;
  padding: 96px var(--pad) 104px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.intro .side {
  position: absolute;
  left: var(--pad);
  top: 96px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.intro .mid { grid-column: 2 / 4; text-align: center; max-width: 400px; margin: 0 auto; }
.intro h1, .intro h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.intro p + p { margin-top: 1em; }

/* ── filter ───────────────────────────── */
.filter { display: flex; gap: 22px; padding: 0 var(--pad) 14px; flex-wrap: wrap; }
.filter button { opacity: 0.45; }
.filter button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ── product grid ─────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px var(--gutter);
  padding: 0 var(--pad);
}
.card .ph { aspect-ratio: 4 / 5; background: var(--bg-deep); overflow: hidden; }
.card .ph img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply;
  transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.card:hover .ph img { transform: scale(1.025); }
.card .cap { display: flex; justify-content: space-between; gap: 12px; padding-top: 9px; }
.card[hidden] { display: none; }

/* ── split feature ────────────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  padding: 120px var(--pad) 0;
  align-items: end;
}
.split .pic { grid-column: 1 / 3; }
.split .pic img { aspect-ratio: 4 / 3; object-fit: cover; }
.split .txt { grid-column: 3 / 5; padding: 0 0 4px 12%; max-width: 520px; }
.split.flip .pic { grid-column: 3 / 5; order: 2; }
.split.flip .txt { grid-column: 1 / 3; padding-left: 0; }
.split h2, .page h1, .sec h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.split p + p { margin-top: 1em; }
.more { display: inline-block; margin-top: 26px; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* ── inner pages ──────────────────────── */
.page { padding: 72px var(--pad) 0; }
.cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.cols > .c1 { grid-column: 1 / 2; }
.cols > .c2 { grid-column: 2 / 4; }
.cols > .c23 { grid-column: 2 / 5; }
.cols > .c34 { grid-column: 3 / 5; }
.cols > .c12 { grid-column: 1 / 3; }
.cols > .c4 { grid-column: 4 / 5; }
.prose { max-width: 520px; }
.prose p + p { margin-top: 1.1em; }
.prose h3, .h3 { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; margin: 44px 0 12px; }
.sec { padding: 104px var(--pad) 0; }
.rule { border-top: 1px solid var(--line); }

/* definition rows */
.rows { border-top: 1px solid var(--line); }
.rows > div {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--gutter);
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.rows.wide > div { grid-template-columns: 1fr 1fr; }
.rows dd, .rows dt { margin: 0; }

/* ── product detail ───────────────────── */
.work { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); padding: 56px var(--pad) 0; }
.work .info { grid-column: 1 / 3; position: sticky; top: 24px; align-self: start; padding-right: 16%; }
.work .shots { grid-column: 3 / 5; display: grid; gap: var(--gutter); }
.work .shots figure { background: var(--bg-deep); }
.work .shots img { mix-blend-mode: multiply; }
.work h1 { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; }
.work .price { font-family: var(--serif); font-size: 17px; margin: 6px 0 34px; }
.work .desc p + p { margin-top: 1em; }
.work details { border-top: 1px solid var(--line); }
.work details:last-of-type { border-bottom: 1px solid var(--line); }
.work summary { list-style: none; cursor: pointer; padding: 13px 0; display: flex; justify-content: space-between; }
.work summary::-webkit-details-marker { display: none; }
.work summary::after { content: "+"; }
.work details[open] summary::after { content: "–"; }
.work details .in { padding: 0 0 18px; }
.work details li { padding-left: 12px; text-indent: -12px; }
.work details li::before { content: "· "; }
.btn {
  display: block; text-align: center; margin: 34px 0 34px;
  border: 1px solid var(--ink); padding: 13px 16px;
  transition: background 0.25s, color 0.25s;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.pager { display: flex; justify-content: space-between; padding: 96px var(--pad) 0; }

/* ── class ────────────────────────────── */
.banner img { aspect-ratio: 21 / 9; object-fit: cover; }
.piece { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); padding: 104px var(--pad) 0; }
.piece .txt { grid-column: 1 / 2; }
.piece .pics { grid-column: 2 / 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.piece .pics img { aspect-ratio: 4 / 5; object-fit: cover; }
.piece .pics .w2 { grid-column: span 2; }
.piece .pics .w2 img { aspect-ratio: auto; height: 100%; }
.steps { counter-reset: s; margin-top: 30px; border-top: 1px solid var(--line); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; padding: 11px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); }
.steps b { font-weight: 500; display: block; }

/* ── footer ───────────────────────────── */
.foot {
  margin-top: 150px;
  padding: 0 var(--pad) 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  align-items: end;
}
.foot .biz { text-transform: none; letter-spacing: 0; opacity: 0.6; grid-column: 1 / -1; padding-top: 26px; font-size: 10.5px; }

/* ── reveal ───────────────────────────── */
.rv { opacity: 0; transform: translateY(10px); transition: opacity 0.9s ease, transform 0.9s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ── responsive ───────────────────────── */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .intro { padding: 72px var(--pad) 80px; }
  .intro .mid { grid-column: 1 / 5; padding: 0 36px; }
  .split, .split.flip { padding-top: 88px; }
  .split .pic, .split.flip .pic { grid-column: 1 / 5; order: 0; }
  .split .txt, .split.flip .txt { grid-column: 1 / 5; padding: 22px 0 0; }
  .cols > * { grid-column: 1 / 5 !important; }
  .cols > .c1 { margin-bottom: 10px; }
  .work .info { grid-column: 1 / 5; position: static; padding-right: 0; order: 2; margin-top: 26px; }
  .work .shots { grid-column: 1 / 5; }
  .piece .txt { grid-column: 1 / 5; margin-bottom: 22px; }
  .piece .pics { grid-column: 1 / 5; grid-template-columns: repeat(2, 1fr); }
  .piece .pics .w2 { grid-column: span 2; }
  .foot { grid-template-columns: repeat(2, 1fr); row-gap: 26px; margin-top: 110px; }
  .banner img { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  body { font-size: 13px; }
  .label { font-size: 10.5px; }
  .nav { padding: 10px 0; }
  .hero { height: 78svh; }
  .intro .side { display: none; }
  .intro .mid { padding: 0 8px; }
  .rows > div { grid-template-columns: 1fr 1.6fr; }
}