:root { --paper:#F4EFE6; --card:#FBF8F2; --ink:#23201C; --soft:#625B51; --madder:#9E3B2E; --madder-d:#7F2E23; --indigo:#2C3E66; --flax:#CDB892; --line:#E2D8C6; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.62 'Switzer',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; } img { max-width:100%; height:auto; display:block; }
h1, h2, h3 { font-family:'Hedvig Letters Serif',Georgia,serif; font-weight:400; line-height:1.04; letter-spacing:-.015em; text-wrap:balance; }
h1 em, h2 em { color:var(--madder); }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-999px; } .skip:focus { left:8px; top:8px; background:var(--ink); color:#fff; padding:8px; z-index:99; }
:focus-visible { outline:3px solid var(--indigo); outline-offset:3px; }
[hidden] { display:none !important; }

.top { position:sticky; top:0; z-index:20; background:rgba(244,239,230,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:24px; height:72px; }
.logo { display:flex; align-items:center; text-decoration:none; }
.logo img { width:40px; height:40px; margin-right:-3px; }
.logo span { display:flex; flex-direction:column; }
.logo b { font:400 33px/0.9 'Hedvig Letters Serif',serif; color:var(--ink); margin-top:2px; }
.logo small { font:600 10.5px/1 'Switzer'; letter-spacing:.36em; color:var(--madder); margin-top:4px; margin-left:1px; }
.top nav { display:flex; gap:24px; margin-left:auto; }
.top nav a { text-decoration:none; font-weight:500; font-size:15.5px; color:var(--soft); padding:6px 0; border-bottom:2px solid transparent; }
.top nav a:hover, .top nav a[aria-current] { color:var(--ink); border-color:var(--madder); }
.cta { text-decoration:none; font-weight:600; font-size:15px; background:var(--ink); color:#fff; padding:10px 18px; border-radius:6px; white-space:nowrap; }
.cta:hover { background:var(--madder); }

.btn { display:inline-block; background:var(--madder); color:#fff; font-weight:600; text-decoration:none; padding:14px 22px; border-radius:6px; border:0; font-size:16px; cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--madder-d); } .btn.line { background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor; }
.sec { padding:96px 0; } .sec h2 { font-size:clamp(38px,4.6vw,64px); margin:0 0 16px; }
.sec.alt { background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec.dark { background:#1E1B18; color:#E9E2D6; } .sec.dark .lede { color:#B9AFA1; } .sec.dark h2 em { color:#E0A08F; }
.lede { font-size:clamp(18px,1.5vw,20.5px); color:var(--soft); max-width:38em; margin:0 0 36px; }
.src { font-size:13.5px; color:var(--soft); margin-top:16px; }
.page-intro { padding:72px 0 30px; } .page-intro h1 { font-size:clamp(46px,6vw,86px); margin:0 0 18px; max-width:14ch; }
.page-intro p { font-size:clamp(18px,1.5vw,21px); color:var(--soft); max-width:36em; margin:0; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.photo { margin:0; overflow:hidden; position:relative; border-radius:4px; }
.photo img { width:100%; height:100%; object-fit:cover; }
.photo figcaption { position:absolute; left:12px; bottom:10px; font-size:12.5px; color:#fff; background:rgba(0,0,0,.45); padding:3px 8px; border-radius:3px; }

/* hero */
.hero { display:grid; grid-template-columns:1.05fr .95fr; min-height:min(calc(100vh - 72px),740px); }
.hero .t { padding:64px 52px 56px max(24px, calc((100vw - 1200px) / 2 + 24px)); display:flex; flex-direction:column; justify-content:center; }
.hero h1 { font-size:clamp(54px,6.8vw,104px); margin:0 0 20px; }
.hero p { font-size:clamp(18px,1.5vw,21px); color:var(--soft); max-width:30em; margin:0 0 28px; }
.hero figure { margin:0; position:relative; overflow:hidden; }
.hero figure img { width:100%; height:100%; object-fit:cover; animation:slow 24s ease-in-out infinite alternate; }
.hero figure small { position:absolute; right:12px; bottom:10px; font-size:12px; color:rgba(255,255,255,.8); }
@keyframes slow { from { transform:scale(1.02); } to { transform:scale(1.09) translate(-1%,1%); } }
@media (prefers-reduced-motion:reduce) { .hero figure img { animation:none; } }
.order { display:flex; gap:0; margin:34px 0 0; padding:0; list-style:none; counter-reset:o; max-width:560px; }
.order li { flex:1; counter-increment:o; border-top:2px solid var(--ink); padding-top:10px; font-size:15px; color:var(--soft); }
.order li::before { content:counter(o); display:block; font:400 30px/1 'Hedvig Letters Serif'; color:var(--madder); margin-bottom:6px; }
.order li b { display:block; color:var(--ink); font-size:16px; }
.order li + li { margin-left:14px; }

/* swatch book */
.sb { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:44px; align-items:start; }
.sb-swatch { position:relative; aspect-ratio:1; background:var(--card); filter:drop-shadow(0 18px 26px rgba(40,25,10,.22)); }
.sb-swatch canvas { position:absolute; left:0; right:0; bottom:0; top:30px; width:100%; height:calc(100% - 30px); touch-action:pan-y; }
.selv { position:absolute; inset:0 0 auto 0; height:30px; background:#EFE7DA; display:flex; align-items:center; gap:18px; padding:0 14px; font:600 10.5px 'Switzer'; letter-spacing:.22em; color:var(--soft); border-bottom:1px dashed #CDBFA8; white-space:nowrap; overflow:hidden; }
.selv span:first-child { color:var(--madder); }
.selv i { width:7px; height:7px; border-radius:50%; background:var(--paper); box-shadow:inset 0 1px 2px rgba(0,0,0,.35); margin-left:auto; flex:none; }
.selv i + i { margin-left:0; }
.sb-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.sb-tabs button, .sb-col button { font:500 14.5px 'Switzer'; background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer; color:var(--ink); }
.sb-tabs button[aria-selected=true] { background:var(--ink); color:#fff; border-color:var(--ink); }
.sb-col { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.sb-col button { display:inline-flex; gap:8px; align-items:center; }
.sb-col i { width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%); box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.sb-col button[aria-pressed=true] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.sb-zoom { display:grid; gap:6px; font-weight:600; font-size:15px; max-width:320px; margin-bottom:6px; }
.sb-zoom input { accent-color:var(--madder); }
.sb-side h3 { font-size:40px; margin:18px 0 8px; }
.sb-side p { margin:0 0 12px; }
.sb-side ul { margin:0; padding:0; list-style:none; }
.sb-side li { padding:9px 0 9px 26px; border-top:1px solid var(--line); position:relative; }
.sb-side li::before { content:''; position:absolute; left:2px; top:17px; width:12px; height:6px; background:repeating-linear-gradient(90deg,var(--madder) 0 3px,transparent 3px 5px); }

/* cards */
.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cards3 > * { display:block; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.cards3 img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.cards3 .c { padding:18px 20px 22px; } .cards3 h3 { font-size:28px; margin:0 0 6px; } .cards3 p { margin:0; color:var(--soft); font-size:15.5px; }
.cards3 a:hover h3 { color:var(--madder); }

/* spec sheet */
.spec { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; }
.sheet { background:#fff; border:1px solid var(--line); box-shadow:0 14px 30px rgba(40,25,10,.08); padding:26px 28px; font-size:15.5px; position:sticky; top:96px; }
.sheet header { display:flex; gap:16px; align-items:center; border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:6px; }
.sheet header canvas { width:84px; height:84px; flex:none; }
.sheet header b { display:block; font:400 28px/1.1 'Hedvig Letters Serif'; } .sheet header small { color:var(--soft); }
.sheet dl { margin:0; }
.sheet .row { display:grid; grid-template-columns:1fr auto; gap:14px; padding:9px 8px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:3px; }
.sheet .row:hover, .sheet .row[aria-current=true] { background:#F7EFE4; }
.sheet .row[aria-current=true] dt { color:var(--madder); }
.sheet dt { font-weight:600; } .sheet dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.sheet .note { font-size:13px; color:var(--soft); margin:12px 0 0; }
.explain { display:grid; gap:12px; }
.explain article { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:20px 22px; scroll-margin-top:96px; transition:border-color .2s, box-shadow .2s; }
.explain article.on { border-color:var(--madder); box-shadow:0 0 0 1px var(--madder); }
.explain h3 { font-size:26px; margin:0 0 6px; } .explain p { margin:0 0 8px; } .explain p:last-child { margin:0; }
.meter { display:grid; grid-template-columns:auto 1fr; gap:8px 12px; font-size:14px; align-items:center; margin:10px 0; }
.meter span:nth-child(odd) { color:var(--soft); }
.meter i { display:block; height:10px; border-radius:2px; background:var(--indigo); }

/* yardage */
.yd { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:32px; align-items:start; }
.pieces { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pieces button { background:var(--card); border:1.5px solid var(--line); border-radius:6px; padding:12px 8px 10px; cursor:pointer; font:500 14px 'Switzer'; color:var(--ink); display:grid; gap:6px; justify-items:center; }
.pieces button svg { width:100%; max-width:110px; height:64px; }
.pieces button[aria-pressed=true] { border-color:var(--madder); background:#F8ECE6; }
.yd-ctl { display:grid; gap:18px; margin-top:20px; }
.yd-ctl fieldset { border:0; padding:0; margin:0; }
.yd-ctl legend { font-weight:600; margin-bottom:8px; }
.seg { display:inline-flex; flex-wrap:wrap; border:1.5px solid var(--line); border-radius:6px; overflow:hidden; }
.seg button { font:500 14.5px 'Switzer'; background:var(--card); border:0; padding:9px 14px; cursor:pointer; color:var(--soft); }
.seg button + button { border-left:1.5px solid var(--line); }
.seg button[aria-pressed=true] { background:var(--ink); color:#fff; }
.yd-ctl label.r { display:grid; gap:6px; font-weight:600; max-width:420px; } .yd-ctl input[type=range] { accent-color:var(--madder); }
.yd-out { background:#fff; border:1px solid var(--line); padding:26px; position:sticky; top:96px; box-shadow:0 14px 30px rgba(40,25,10,.08); }
.yd-out .big { font:400 clamp(56px,7vw,84px)/1 'Hedvig Letters Serif'; color:var(--madder); }
.yd-out .big small { font:500 20px 'Switzer'; color:var(--soft); margin-left:6px; }
.yd-out .bolt { margin:18px 0 14px; height:46px; position:relative; }
.yd-out .bolt svg { width:100%; height:100%; }
.yd-out table { width:100%; border-collapse:collapse; font-size:15px; margin-bottom:12px; }
.yd-out th { text-align:left; font-weight:500; padding:7px 0; border-bottom:1px solid var(--line); } .yd-out td { text-align:right; border-bottom:1px solid var(--line); }
.yd-out p { font-size:14.5px; color:var(--soft); margin:0 0 8px; }

/* steps + faq */
.steps { list-style:none; margin:0; padding:0; counter-reset:s; }
.steps > li { counter-increment:s; display:grid; grid-template-columns:76px 1fr; gap:22px; padding:26px 0; border-top:1px solid var(--line); }
.steps > li::before { content:counter(s); font:400 54px/1 'Hedvig Letters Serif'; color:var(--madder); }
.steps h3 { font-size:30px; margin:0 0 8px; } .steps p { margin:0 0 8px; max-width:44em; } .steps p:last-child { margin:0; }
.faq { max-width:840px; }
.faq details { border-top:1px solid var(--line); padding:18px 0; } .faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; font:400 23px/1.25 'Hedvig Letters Serif'; list-style:none; display:flex; justify-content:space-between; gap:18px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font:400 26px/1 'Switzer'; color:var(--madder); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:12px 0 0; color:var(--soft); max-width:44em; }
.ask ul { padding-left:20px; } .ask li { margin-bottom:8px; }
.mail { display:inline-block; font:400 clamp(24px,2.8vw,34px) 'Hedvig Letters Serif'; color:var(--madder); word-break:break-all; }

.foot { background:var(--ink); color:#D8D0C3; font-size:14.5px; padding:52px 0 36px; }
.foot-g { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.foot-b { font:400 26px 'Hedvig Letters Serif'; color:#fff; margin:0 0 8px; } .foot-h { font-weight:600; color:#fff; margin:0 0 10px; }
.foot-g a { display:block; text-decoration:none; color:#BDB3A4; margin-bottom:6px; } .foot-g a:hover { color:#fff; }
.foot-g p { margin:0; max-width:34em; }
.foot .fine { color:#948A7C; margin:34px 0 0; padding-top:20px; border-top:1px solid #3A3530; }

@media (max-width:1020px) {
  .top nav { display:none; }
  .hero, .two, .sb, .spec, .yd { grid-template-columns:1fr; gap:32px; }
  .hero figure { min-height:320px; order:-1; } .hero .t { padding:44px 24px; }
  .sheet, .yd-out { position:static; }
  .cards3 { grid-template-columns:1fr 1fr; } .foot-g { grid-template-columns:1fr 1fr; } .foot-g > div:first-child { grid-column:1 / -1; }
}
@media (max-width:620px) {
  body { font-size:16.5px; } .sec { padding:64px 0; } .wrap { padding:0 18px; }
  .cta { padding:9px 13px; font-size:14px; } .logo b { font-size:29px; } .logo img { width:36px; height:36px; }
  .cards3, .pieces { grid-template-columns:1fr 1fr; } .cards3 { grid-template-columns:1fr; }
  .steps > li { grid-template-columns:44px 1fr; gap:12px; } .steps > li::before { font-size:40px; } .steps h3 { font-size:25px; }
  .order li { font-size:13.5px; } .sb-side h3 { font-size:32px; } .sheet { padding:20px 16px; }
}
@media (max-width:350px) { .cta { display:none; } }