:root { --ink:#102a43; --paper:#f8f5ee; --lime:#e5ff43; --coral:#fa7659; --line:#c7d0d8; }
* { box-sizing:border-box } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.45 ui-sans-serif,system-ui,sans-serif }
a { color:inherit; text-decoration:none } .site-header, footer { display:flex; align-items:center; justify-content:space-between; padding:20px clamp(20px,5vw,72px); border-bottom:1px solid var(--line) }
.wordmark { font-weight:900; letter-spacing:-.06em; font-size:1.5rem }.wordmark span { color:var(--coral) } nav { display:flex; gap:22px } nav a:hover { text-decoration:underline }
main { max-width:1280px; margin:auto; padding:clamp(28px,5vw,72px) }.eyebrow { color:#52616b; font-size:.77rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase }
.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:stretch; margin-bottom:72px }.hero h1 { font-size:clamp(3rem,8vw,7.4rem); line-height:.87; letter-spacing:-.085em; margin:.25em 0 }.hero-card,.product-image { min-height:320px; background:linear-gradient(140deg,#b7d2db,#f2cf9c 60%,#fa7659); position:relative; overflow:hidden }.hero-card:after,.product-image:after { content:""; position:absolute; width:75%; aspect-ratio:1; border:38px solid var(--lime); border-radius:50%; right:-25%; bottom:-38% }.hero-copy { padding:clamp(25px,5vw,64px); background:var(--ink); color:white; display:flex; flex-direction:column; justify-content:space-between }
.button { display:inline-block; border:0; background:var(--lime); color:var(--ink); padding:14px 19px; font-weight:850; cursor:pointer; text-align:center }.button:hover { background:white }.button.secondary { background:var(--ink); color:white }.button.secondary:hover { background:var(--coral) }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px }.card { border:1px solid var(--line); background:white }.card .product-image { min-height:225px }.card:nth-child(2) .product-image { background:linear-gradient(145deg,#f5bfbe,#efdf91) }.card:nth-child(3) .product-image { background:linear-gradient(145deg,#c8d29d,#8ac5bd) }.card-copy { padding:17px }.card h2 { margin:0; font-size:1.3rem; letter-spacing:-.04em }.card p { color:#52616b; margin:.3rem 0 0 }
.product { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,100px) }.product-image.large { min-height:570px }.product h1,.cart h1,.checkout h1 { font-size:clamp(2.8rem,5vw,5rem); line-height:.92; letter-spacing:-.07em; margin:.25em 0 }.price { font-weight:800; font-size:1.3rem }.option { display:block; margin:24px 0 8px; font-weight:700 }.variants { display:flex; gap:8px }.variants button { border:1px solid var(--ink); padding:9px 14px; background:transparent; cursor:pointer }.variants button[aria-pressed="true"] { background:var(--ink); color:#fff }.product form { margin-top:30px }.product form .button { width:100%; font-size:1rem }
.cart { max-width:760px }.cart-line { display:flex; justify-content:space-between; gap:16px; padding:22px 0; border-bottom:1px solid var(--line) }.cart-line small { color:#52616b }.cart-total { margin:26px 0; display:flex; justify-content:space-between; font-size:1.3rem; font-weight:800 }.empty { padding:50px 0; color:#52616b }.checkout { max-width:760px; margin:auto }.checkout-box { background:white; border:1px solid var(--line); padding:clamp(22px,4vw,45px) }.checkout-box label { display:block; font-weight:700; margin:18px 0 6px }.checkout-box input { width:100%; padding:12px; border:1px solid var(--line); font:inherit }.notice { padding:14px; background:#effbd5; border-left:5px solid #7e9c00; margin-bottom:20px } footer { margin-top:50px; border-top:1px solid var(--line); border-bottom:0; color:#52616b; font-size:.86rem }
.scenario-note { margin:0 0 22px; padding:11px 14px; border:1px dashed var(--coral); background:#fff7f3; font-size:.9rem }.visual-change { outline:18px solid #241b4f; outline-offset:12px; background:#d9fbff; padding:18px }
@media (max-width:720px) { .hero,.product { grid-template-columns:1fr }.grid { grid-template-columns:1fr }.hero-card { min-height:220px }.product-image.large { min-height:330px }.site-header,footer { gap:14px; align-items:flex-start; flex-direction:column } }