/* Merch: same lake-at-dusk palette as mkemusic.com, with the badge's bone and ember carried into the product cards. */
:root{--bone:#f4f1ea;--card:#e9e5dc;--ink:#1b1b1b}

.merch-hero{padding-block:clamp(120px,15vw,180px) clamp(48px,7vw,96px)}
.merch-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:860px){.merch-hero-grid{grid-template-columns:1fr}.hero-badge{max-width:280px}}
.merch-hero h1{font-size:clamp(3rem,9vw,7.2rem);font-weight:900;line-height:.88;letter-spacing:-.04em;margin:16px 0 22px;text-transform:uppercase;text-wrap:balance}
.merch-hero p{max-width:40ch;margin:0 0 28px;color:color-mix(in srgb,var(--haze) 82%,var(--slate))}
.hero-badge{width:100%;height:auto;max-width:420px;justify-self:center;animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:translateY(14px) rotate(-6deg)}to{transform:none}}

.shop{padding-top:0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{all:unset;box-sizing:border-box;display:grid;gap:14px;cursor:pointer}
.card:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
.card .ph{background:var(--card);aspect-ratio:1/1;overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.04)}
.card .meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card .meta b{font-weight:700;font-size:var(--step-1)}
.card .meta span{font-variant-numeric:tabular-nums;color:var(--haze)}
.card small{font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.card.feature{grid-column:span 2}
.card.feature .ph{aspect-ratio:2/1;display:grid;grid-template-columns:1fr 1fr}
@media (max-width:560px){.card.feature{grid-column:auto}.card.feature .ph{aspect-ratio:1/1;grid-template-columns:1fr}.card.feature .ph img+img{display:none}}

/* product dialog */
dialog#product{width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);background:var(--lake);color:var(--haze)}
dialog#product::backdrop{background:rgba(5,10,14,.72);backdrop-filter:blur(4px)}
.close-row{position:sticky;top:0;display:flex;justify-content:flex-end;padding:14px 14px 0;z-index:2}
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);padding:0 clamp(16px,3vw,36px) clamp(24px,3vw,36px)}
@media (max-width:820px){.pd{grid-template-columns:1fr}}
.pd-media img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--card)}
.views{display:flex;gap:8px;margin-top:10px}
.views button{font:inherit;font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;background:none;color:var(--slate);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer}
.views button[aria-pressed="true"]{color:var(--lake);background:var(--haze);border-color:var(--haze)}
.pd-info{display:grid;gap:14px;align-content:start;min-width:0}
.pd-info h2{font-size:var(--step-3)}
.price{font-size:var(--step-2);font-weight:300;margin:0;font-variant-numeric:tabular-nums}
.pd-info>p{margin:0;color:color-mix(in srgb,var(--haze) 82%,var(--slate))}
.specs{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:.92rem;color:var(--slate)}
.specs li::before{content:"— ";color:var(--ember)}
.sizes{border:0;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sizes legend{margin-bottom:10px;padding:0}
.sizes label{position:relative}
.sizes input{position:absolute;opacity:0;inset:0;cursor:pointer}
.sizes span{display:inline-grid;place-items:center;min-width:52px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-weight:500;font-size:.9rem}
.sizes input:checked+span{background:var(--haze);color:var(--lake);border-color:var(--haze)}
.sizes input:focus-visible+span{outline:2px solid var(--ember);outline-offset:2px}
.fine{font-size:var(--step--1);color:var(--slate);margin:0}

/* Morse explainer */
.morse-note{background:var(--lake-2)}
.morse-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:860px){.morse-grid{grid-template-columns:1fr}}
.morse-grid p{max-width:44ch;color:color-mix(in srgb,var(--haze) 82%,var(--slate))}
.morse-demo{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.morse-demo .m{display:flex;gap:12px;align-items:center}
.morse-demo i{display:block;height:16px;border-radius:8px;background:var(--bone)}
.morse-demo .dash{width:64px}
.morse-demo .dot{width:16px;background:var(--ember)}