
:root {
  --bg: #fbf7ef;
  --bg-soft: #fffdf8;
  --text: #18130f;
  --muted: rgba(24,19,15,.68);
  --muted-2: rgba(24,19,15,.45);
  --gold: #b68840;
  --gold-soft: rgba(182,136,64,.14);
  --gold-strong: rgba(182,136,64,.30);
  --line: rgba(108,77,35,.10);
  --paper: #f5edde;
  --paper-2: #ecdfc9;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 28px;
  background: linear-gradient(180deg, rgba(15,12,10,.30), rgba(15,12,10,0));
  color: #f7f2e9;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
}
.site-nav .nav-links { display:flex; align-items:center; gap:20px; }
.site-nav.light {
  position: sticky;
  background: rgba(255,253,248,.84);
  color: var(--text);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(108,77,35,.05);
}
.hero-image-first {
  position: relative; min-height: 100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#120f0d;
}
.hero-image-first img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  filter: grayscale(100%) contrast(104%) brightness(76%) blur(1.5px);
  transform: scale(1.06);
}
.hero-image-first::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(22,18,14,.18) 0%, rgba(22,18,14,.22) 46%, rgba(22,18,14,.36) 100%),
    radial-gradient(circle at center, rgba(255,248,238,.20) 0%, rgba(255,248,238,.08) 24%, rgba(255,248,238,0) 52%);
}
.hero-text {
  position:relative; z-index:2; text-align:center; color:#fbf7f0; padding:120px 24px 60px; max-width:760px;
}
.hero-text h1 {
  margin:0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(40px, 5.8vw, 74px); line-height:1.02; font-weight:500; letter-spacing:-.04em; text-wrap: balance;
}
.hero-text .subtle { margin-top: 16px; color: rgba(247,242,234,.82); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.section { padding: 108px 24px; }
.narrow { max-width: 820px; margin: 0 auto; text-align: center; }
.statement {
  font-family: Georgia, 'Times New Roman', serif; font-size: clamp(24px, 3.8vw, 44px); line-height: 1.42; letter-spacing: -.025em; text-wrap: balance; margin: 0 auto; max-width: 760px;
}
.text-link {
  display:inline-block; margin-top:52px; color:var(--gold); text-decoration:none; font-size:15px; border-bottom:1px solid rgba(182,135,63,.30); padding-bottom:6px;
}
.qualities {
  max-width: 1080px; margin: 0 auto; display:block;
}
.quality { padding: 42px 0; border-top: 1px solid rgba(182,136,64,.10); }
.quality:first-child { border-top: none; }
.quality .kicker { color: var(--gold); font-size:10px; letter-spacing:.24em; text-transform:uppercase; margin-bottom:16px; }
.quality p { margin:0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(20px, 2.1vw, 28px); line-height:1.62; letter-spacing:-.015em; }
.work-section {
  max-width: 1180px; margin:0 auto; display:grid; grid-template-columns: 1.08fr .92fr; gap:48px; align-items:center;
}
.work-image-wrap { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); padding: 24px; border: 1px solid var(--line); }
.work-image { background:#fff; border: 18px solid #171411; filter: grayscale(100%) contrast(106%); box-shadow: 0 18px 36px rgba(0,0,0,.10); }
.work-meta { max-width: 460px; }
.work-label, .eyebrow { color: var(--gold); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; margin-bottom:14px; }
.work-meta h2, .page-title { margin:0 0 16px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(28px, 3.3vw, 42px); line-height:1.08; letter-spacing:-.03em; font-weight:500; }
.work-meta p, .body-copy { margin:0; color:var(--muted); font-size:16px; line-height:1.9; }
.product-grid-section { max-width: 1180px; margin: 0 auto; }
.grid-title { margin:0 0 10px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(26px, 3.4vw, 38px); line-height:1.12; font-weight:500; letter-spacing:-.025em; }
.grid-sub { margin:0 0 36px; color: var(--muted); font-size:16px; }
.product-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card {
  padding: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.42);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.product-card:hover { transform: translateY(-3px); border-color: rgba(182,136,64,.18); box-shadow: 0 16px 30px rgba(22,18,14,.05); background: rgba(255,255,255,.58); }
.product-card .media { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); padding: 16px; margin-bottom: 16px; }
.product-card .media img { background:#fff; border: 12px solid #171411; filter: grayscale(100%) contrast(106%); }
.product-card h3 { margin:0 0 8px; font-family: Georgia, 'Times New Roman', serif; font-size: 23px; line-height:1.12; font-weight:500; letter-spacing:-.015em; }
.product-card p { margin:0; color: var(--muted); font-size: 15px; line-height: 1.75; min-height: 74px; }
.product-card .text-link { margin-top: 16px; }
.closing-line { text-align:center; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(24px, 3.4vw, 40px); line-height:1.42; max-width:680px; margin:0 auto; }
.footer { padding: 36px 24px 72px; text-align:center; color: var(--muted); font-size: 12px; }
.footer-links { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:16px; letter-spacing:.14em; text-transform:uppercase; font-size:11px; }
.footer-note { color: var(--muted-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.page-shell { max-width: 1260px; margin: 0 auto; padding: 42px 28px 90px; }
.top-link { color: var(--muted); font-size: 12px; letter-spacing: .20em; text-transform: uppercase; margin-bottom: 26px; display: inline-block; }
.hero-product { display:grid; grid-template-columns: 1.08fr .92fr; gap:54px; align-items:start; }
.image-column { position: sticky; top: 86px; }
.art-shell { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); border: 1px solid var(--line); padding: 24px; }
.art { background: white; border: 18px solid #171411; filter: grayscale(100%) contrast(106%); box-shadow: 0 18px 36px rgba(0,0,0,.10); }
.thumb-row { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:14px; }
.thumb { border:1px solid var(--line); background:#f8f1e4; min-height:126px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.thumb.active { border-color: var(--gold-strong); background: rgba(182,136,64,.10); color: var(--text); }
.meta { padding-top:10px; max-width: 480px; }
.meta h1 { margin:0 0 12px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(36px, 4.2vw, 56px); line-height:1.02; letter-spacing:-.03em; font-weight:500; }
.subhead { margin:0 0 16px; font-family: Georgia, 'Times New Roman', serif; font-size: 23px; line-height:1.46; letter-spacing:-.015em; max-width:400px; }
.price-wrap { margin: 10px 0 18px; }
.price { font-size: 30px; letter-spacing:-.025em; margin:0 0 4px; }
.price-detail { color: var(--muted); font-size:13px; line-height:1.6; }
.made-to-order { color: var(--muted-2); font-size: 12px; margin-top: 8px; }
.option-label { color: var(--muted); font-size: 11px; letter-spacing:.20em; text-transform:uppercase; margin-bottom:10px; }
.pills { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.pill { border:1px solid var(--line); padding:11px 15px; border-radius:999px; background: rgba(255,255,255,.55); font-size:13px; color:var(--muted); }
.pill.active { border-color: var(--gold-strong); background: rgba(182,136,64,.10); color: var(--text); box-shadow: inset 0 0 0 1px rgba(182,136,64,.08); }
.most-chosen { color: var(--muted); font-size: 12px; margin-bottom: 20px; }
.cta-btn { display:inline-block; margin:8px 0 14px; color:white; background: linear-gradient(180deg, #c7994d 0%, #b68640 100%); padding:14px 22px; border-radius:999px; box-shadow: 0 12px 26px rgba(182,136,64,.14); font-size:14px; }
.trust { color:var(--muted); font-size:12px; line-height:1.9; margin-bottom:26px; }
.divider { height:1px; background: rgba(182,136,64,.10); margin:22px 0 24px; }
.notes { display:grid; gap:22px; }
.note h3 { margin:0 0 10px; color: var(--gold); font-size:10px; letter-spacing:.24em; text-transform:uppercase; font-weight:600; }
.note p { margin:0; font-family: Georgia, 'Times New Roman', serif; font-size:21px; line-height:1.6; letter-spacing:-.015em; max-width:410px; }
.details { margin-top:50px; display:grid; grid-template-columns: repeat(3,1fr); gap:26px; padding-top:24px; border-top: 1px solid rgba(182,136,64,.10); }
.detail h4 { margin:0 0 10px; color:var(--gold); font-size:10px; letter-spacing:.24em; text-transform:uppercase; font-weight:600; }
.detail p { margin:0; color:var(--muted); font-size:14px; line-height:1.82; max-width:300px; }
.simple-product { max-width: 1180px; margin: 0 auto; display:grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items:start; }
.simple-meta { max-width: 430px; padding-top: 14px; }
.simple-meta .line { margin:0 0 12px; font-family: Georgia, 'Times New Roman', serif; font-size: 25px; line-height:1.42; letter-spacing:-.015em; }
.simple-meta .desc { margin:0 0 12px; color: var(--muted); font-size: 16px; line-height:1.84; }
.simple-price { font-size: 27px; margin: 6px 0 18px; }
.small-trust { color: var(--muted); font-size: 12px; margin-top: 10px; }
.editorial-page { max-width: 900px; margin: 0 auto; padding: 48px 28px 100px; }
.editorial-intro { max-width: 720px; margin-bottom: 48px; }
.editorial-kicker { color: var(--gold); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 16px; }
.editorial-title { margin: 0 0 18px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px, 5vw, 66px); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; }
.editorial-opening { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(24px, 3vw, 34px); line-height: 1.45; letter-spacing: -.02em; }
.editorial-sections { display: grid; gap: 18px; }
.editorial-block { border-top: 1px solid rgba(182,136,64,.10); padding: 28px 0 0; }
.editorial-block p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.95; max-width: 700px; }
.editorial-close { margin-top: 30px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.55; letter-spacing: -.015em; max-width: 720px; }
.subtle-bottom-line { margin-top: 34px; color: var(--muted-2); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.faq-list { display:grid; gap:18px; }
.faq-item { border-top: 1px solid rgba(182,136,64,.10); padding-top: 22px; }
.faq-item h3 { margin: 0 0 10px; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -.015em; }
.faq-item p { margin:0; color: var(--muted); font-size: 16px; line-height: 1.9; max-width: 720px; }
.contact-panel { max-width: 580px; border-top: 1px solid rgba(182,136,64,.10); padding-top: 28px; }
.contact-email { display:inline-block; margin-top: 16px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; border-bottom: 1px solid rgba(182,135,63,.24); padding-bottom: 8px; }
@media (max-width: 980px) {
  .work-section, .hero-product, .simple-product, .details, .product-grid { grid-template-columns: 1fr; }
  .image-column { position: static; }
  .meta, .work-meta, .simple-meta { max-width: none; }
  .site-nav { padding: 18px 20px; }
  .site-nav { gap: 12px; }
  .site-nav .nav-links { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
}
