/* Kin & Bough: storefront landing (index.html, 404.html). Shares tokens and fonts with site.css. */
@font-face { font-family: "Cormorant Garamond"; src: url(/fonts/cg-500-latin.woff) format("woff"); font-weight: 500; font-display: swap; }

body.home { overflow-x: hidden; }
.home h1, .home h2 { font-weight: 500; letter-spacing: -.015em; }
.home h1 em, .home h2 em { font-style: italic; font-weight: 500; color: var(--accent); }
.eyebrow { font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }

/* header */
.top .nav { display: flex; gap: 22px; margin-right: 14px; }
.top .nav a { color: var(--ink-2); text-decoration: none; font: 400 15px/1 var(--sans); letter-spacing: .02em; }
.top .nav a:hover { color: var(--accent); }

/* the Etsy CTA: a quiet tag while the shop is closed, a button once SHOP_LIVE flips it to .live */
.shop { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 500 15px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; text-decoration: none; }
.shop.small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.shop.soon { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); background: var(--card); cursor: default; }
.shop.soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c9a75f; box-shadow: 0 0 0 4px rgba(201, 167, 95, .18); }
.shop.live { background: var(--warm); color: #fff8f2; }
.shop.live:hover { filter: brightness(1.06); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 6vw, 72px) 0 clamp(24px, 4vw, 48px); }
.hero h1 { font-size: clamp(3rem, 7.2vw, 5.6rem); line-height: .98; margin: 0 0 22px; }
.hero h1 em { display: block; }
.lede { font: 300 clamp(1.1rem, 1.6vw, 1.3rem)/1.5 var(--sans); color: var(--ink-2); margin: 0 0 30px; max-width: 26em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-art { margin: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(60, 45, 20, .55); aspect-ratio: 1200 / 1350; background: #e9e1d2; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* at a glance */
.specs { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 8px auto clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.specs li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 8px; text-align: center; }
.specs li + li { border-left: 1px solid var(--line); }
.specs b { font: 500 clamp(1.9rem, 3.4vw, 2.6rem)/1 var(--serif); color: var(--ink); }
.specs b i { font-weight: 500; }
.specs span { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* designs */
.designs-sec { text-align: center; margin-bottom: clamp(56px, 8vw, 104px); }
.designs-sec h2, .maker-copy h2, .detail-card h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin: 0 0 10px; }
.sub { font: 300 1.1rem/1.5 var(--sans); color: var(--ink-2); margin: 0 0 36px; }
.designs { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 18px; }
.designs figure { flex: 0 0 calc((100% - 3 * 18px) / 4); margin: 0; }
.designs img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 720; object-fit: cover; border-radius: 3px; background: #ece5d8; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.designs figure:hover img { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(60, 45, 20, .6); }
.designs figcaption { padding-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.designs figcaption b { font: 500 1.45rem/1.1 var(--serif); }
.designs figcaption span { font: 400 13px/1.3 var(--sans); letter-spacing: .04em; color: var(--muted); }

/* detail band */
.detail { position: relative; margin: 0 0 clamp(56px, 8vw, 104px); }
.detail img { display: block; width: 100%; height: clamp(280px, 42vw, 560px); object-fit: cover; }
.detail-card { position: absolute; left: max(16px, calc((100% - 1080px) / 2)); bottom: clamp(20px, 4vw, 48px); max-width: min(440px, calc(100% - 32px)); background: rgba(255, 253, 248, .94); backdrop-filter: blur(6px); padding: clamp(20px, 3vw, 32px); border-radius: 4px; box-shadow: 0 20px 50px -30px rgba(40, 30, 10, .6); }
.detail-card h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.sizes { margin: 0; font: 400 13px/1.9 var(--sans); letter-spacing: .06em; color: var(--muted); }

/* maker */
.maker-sec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; margin-bottom: clamp(64px, 9vw, 112px); }
.phone { justify-self: center; width: min(320px, 78vw); padding: 12px; border-radius: 44px; background: #23211d; box-shadow: 0 40px 70px -40px rgba(30, 20, 5, .7); }
.phone img { display: block; width: 100%; height: auto; border-radius: 32px; }
.steps-list { list-style: none; counter-reset: s; padding: 0; margin: 22px 0 32px; }
.steps-list li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.steps-list li:last-child { border-bottom: 1px solid var(--line); }
.steps-list li::before { content: counter(s); grid-row: span 2; font: italic 500 2rem/1 var(--serif); color: var(--accent); }
.steps-list b { font: 500 1.35rem/1.2 var(--serif); }
.steps-list span { color: var(--ink-2); font-weight: 300; }

/* footer */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; border-top: 1px solid var(--line); padding: 26px 0 calc(36px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 14px; }
.foot .wordmark.small { font-size: 20px; margin-right: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--accent); }

/* 404 */
.lost { min-height: 62vh; display: grid; place-content: center; text-align: center; padding: 48px 0; }
.lost h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); margin-bottom: 12px; }
.lost p { color: var(--ink-2); margin: 0 0 28px; }

@media (max-width: 900px) {
  .designs figure { flex-basis: calc((100% - 2 * 18px) / 3); }
}
@media (max-width: 760px) {
  .top .nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 22px; }
  .hero-art { order: -1; aspect-ratio: 4 / 3.4; }
  .hero h1 em { display: inline; }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .specs li:nth-child(3) { border-left: 0; }
  .specs li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .designs { gap: 22px 12px; }
  .designs figure { flex-basis: calc((100% - 12px) / 2); }
  .designs figcaption b { font-size: 1.25rem; }
  .detail { display: flex; flex-direction: column; }
  .detail-card { position: static; max-width: none; margin: -36px 16px 0; }
  .maker-sec { grid-template-columns: 1fr; }
  .maker-copy { order: -1; }
}
@media (max-width: 380px) {
  .shop.small { padding: 0 12px; }
  .top .wordmark { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .designs img { transition: none; } }

/* header aligned to the content column on the storefront */
.home .top { padding-left: max(16px, calc((100% - 1080px) / 2)); padding-right: max(16px, calc((100% - 1080px) / 2)); }
.phone img { max-height: 620px; object-fit: cover; object-position: top; }
@media (max-width: 760px) { .phone { width: min(280px, 72vw); } .phone img { max-height: 470px; } }
.maker-copy h2 em { display: block; }