:root{--ink:#20291d;--cream:#f5f2e9;--acid:#e8eeaa;--moss:#dce1cb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 Arial,sans-serif}a{color:inherit;text-underline-offset:4px}a:focus-visible{outline:3px solid #6d7439;outline-offset:5px}img{display:block;width:100%;object-fit:cover}h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.065em;line-height:.98;margin:0}h1{font-size:clamp(64px,8vw,144px)}h2{font-size:clamp(42px,6vw,92px)}.strip{text-align:center;background:var(--ink);color:var(--cream);font-size:10px;font-weight:bold;letter-spacing:.2em;padding:9px}.strip span{margin:0 10px}header,footer{display:flex;justify-content:space-between;align-items:center;padding:14px 5%;gap:16px}.logo{font-size:30px;font-weight:bold;line-height:1;text-decoration:none;letter-spacing:.12em}.logo span{display:block;font-size:8px;letter-spacing:.38em;margin-top:4px}nav,footer div{display:flex;gap:clamp(12px,4vw,48px);font-size:14px}nav a{text-decoration:none}.language{padding:6px 12px;border:1px solid;text-decoration:none;font-size:12px}.hero,.story{display:grid;grid-template-columns:1fr 1fr}.hero-copy{background:var(--moss);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:7vw 6vw;min-height:550px}.eyebrow{font-size:11px;letter-spacing:.22em;font-weight:bold;margin:0 0 24px}.intro{max-width:320px;margin:24px 0 28px}.button{display:inline-block;background:var(--ink);color:white;text-decoration:none;padding:14px 22px;font-weight:bold;font-size:14px}.button:hover{background:#3c4b36}.hero-photo{position:relative;min-height:360px}.hero-photo img{height:100%;position:absolute;inset:0}.hero-photo span{position:absolute;bottom:20px;right:20px;color:var(--ink);background:var(--cream);padding:5px 10px;font-size:10px;letter-spacing:.12em}.benefits{display:flex;justify-content:space-evenly;gap:8px;text-align:center;background:var(--acid);padding:16px 8px;font-size:clamp(10px,1.4vw,14px);font-weight:bold;letter-spacing:.1em;text-transform:uppercase}.collection,.help{padding:clamp(55px,8vw,120px) 5%}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}.product{text-decoration:none;display:block}.product img{aspect-ratio:4/5;background:var(--moss)}.product-title,.meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.product-title{margin:12px 0 3px}.product-title h3{margin:0;font-weight:500;font-size:clamp(16px,2vw,24px)}.product-title span{white-space:nowrap}.meta{font-size:13px}.product:hover strong{text-decoration:underline}.story{background:var(--ink);color:var(--cream)}.story img{height:100%;max-height:620px}.story div{padding:7vw 6vw;align-self:center}.story h2{font-size:clamp(42px,5.5vw,78px)}.story p:not(.eyebrow){margin:24px 0}.help{text-align:center}.help p:not(.eyebrow){max-width:550px;margin:24px auto}footer{border-top:1px solid #20291d44;padding-block:28px}@media(max-width:650px){.hero,.story{grid-template-columns:1fr}.hero-copy{min-height:0;padding:50px 6%}.hero-photo{min-height:0;aspect-ratio:4/3}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.meta{flex-wrap:wrap}.story img{height:340px}.story div{padding:44px 6%}footer div{flex-wrap:wrap;justify-content:flex-end}.logo{font-size:24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Art direction for the surf campaign */
:root{--ink:#101618;--cream:#eef3ef;--acid:#c9f976;--moss:#1a2828}
body{background:var(--ink);color:var(--cream)}
.strip{background:var(--acid);color:var(--ink)}
header{border-bottom:1px solid #ffffff26}
.logo{letter-spacing:.04em}
.language{border-color:#ffffff55;border-radius:50px}
h1,h2{font-family:Arial,sans-serif;font-weight:800;letter-spacing:-.075em}
.hero{display:flex;flex-direction:column;position:relative}
.hero-photo{order:-1;min-height:0;aspect-ratio:2.53}
.hero-photo img{object-fit:contain}
.hero-photo span{background:#101618d9;color:var(--acid);border:1px solid #ffffff4d;border-radius:30px}
.hero-copy{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(175px,300px);gap:14px 36px;align-items:center;padding:clamp(28px,5vw,72px) 5%;background:radial-gradient(ellipse at 80% 0%,#263936,#101618 75%)}
.hero-copy .eyebrow{grid-column:1/-1;margin:0;color:var(--acid)}
.hero-copy h1{grid-row:span 2;font-size:clamp(64px,9vw,155px)}
.hero-copy .intro{margin:0}
.button{width:fit-content;background:var(--acid);color:var(--ink);border-radius:50px}
.button:hover{background:#e0ffad}
.benefits{color:var(--ink)}
.collection .eyebrow,.story .eyebrow,.help .eyebrow,.film .eyebrow{color:var(--acid)}
.product img{border-radius:5px}
.product strong{color:var(--acid)}
.film{padding:clamp(40px,7vw,100px) 5%;background:#131e20 center/cover}
.film-heading{margin-bottom:26px}
.film video{display:block;width:min(100%,1100px);margin:auto;aspect-ratio:16/9;background:#0a1114;border:1px solid #ffffff45;border-radius:12px}
.story{background:#202e2f}
.help{background:radial-gradient(ellipse at 50% 100%,#293c3b,#101618 70%)}
footer{border-top-color:#ffffff33}
a:focus-visible{outline-color:var(--acid)}
@media(max-width:650px){.hero-copy{display:flex;align-items:flex-start;gap:18px}.hero-copy h1{font-size:clamp(58px,13vw,85px)}.hero-photo span{bottom:8px;right:8px;font-size:8px}.hero-photo{aspect-ratio:2.53}header{gap:10px}nav{gap:10px;font-size:12px}}

.film{background-image:linear-gradient(#10161855,#10161888),url(/wave.webp);background-position:center top}
.film{position:relative;isolation:isolate;display:grid;align-content:end;min-height:clamp(380px,56vw,760px);overflow:hidden}
.film video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.film::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 25%,#101618dc)}
.film-heading{margin:0 0 22px}
.film-toggle{justify-self:start;border:1px solid #ffffff80;border-radius:50px;background:#101618;color:white;padding:8px 16px;cursor:pointer}
.inner{padding:clamp(48px,8vw,110px) 5%;min-height:65vh}.inner h1{font-size:clamp(48px,8vw,112px);margin-bottom:36px}.inner h2{font-size:clamp(28px,4vw,54px);margin-top:32px}.inner p{max-width:65ch}.inner .eyebrow{color:var(--acid)}.inner .detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,6vw,80px);align-items:start}.detail img{max-height:660px;object-fit:cover}.price{font-size:32px}.inner details{max-width:740px;padding:16px 0;border-top:1px solid #ffffff40}.inner summary{cursor:pointer}.inner .button{margin-top:16px}footer div{flex-wrap:wrap}@media(max-width:650px){header nav{flex-wrap:wrap;justify-content:center}.inner .detail{grid-template-columns:1fr}}

/* Warm editorial palette */
:root{--ink:#30271e;--cream:#f7f1e8;--acid:#e7d6bd;--moss:#eee2d1}
body{background:var(--cream);color:var(--ink)}
.strip{background:#e6d5bf;color:var(--ink)}
header,footer{background:#f7f1e8;border-color:#30271e29}
header{padding-block:20px}
nav a,.language{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.language{border-color:#30271e55;border-radius:0}
.hero-copy{background:#eee2d1}
.hero-copy .eyebrow,.collection .eyebrow,.story .eyebrow,.help .eyebrow,.inner .eyebrow{color:#65503c}
h1,h2{font-weight:750;letter-spacing:-.06em}
.hero-photo span{background:#f7f1e8e8;color:var(--ink);border:0;border-radius:0}
.button{background:#30271e;color:#fffaf1;border-radius:0;text-transform:uppercase;font-size:11px;letter-spacing:.1em}
.button:hover{background:#514133}
.benefits{background:#e6d5bf;border-block:1px solid #30271e20}
.collection .cards{gap:clamp(12px,2vw,30px)}
.product img{border-radius:0}
.product strong{color:#53402f}
.story{background:#e6d5bf;color:var(--ink)}
.help{background:#eee2d1}
.film{color:#fffaf1}
.film .eyebrow{color:#f5e4cc}
.inner details{border-color:#30271e35}
a:focus-visible{outline-color:#765d45}
.film a:focus-visible,.film button:focus-visible{outline:2px solid #fffaf1;outline-offset:4px}

.chapter-home{background:#e6d5bf;min-height:0}
.chapter-home h2{margin-top:0}
.chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px;margin-top:34px}
.chapter-grid a{padding:16px 0;border-top:1px solid #30271e45;text-decoration:none}
.chapter-grid a:hover{text-decoration:underline}
.chapter figure{margin:0 0 40px}
.chapter figure img{width:100%;max-height:570px;aspect-ratio:2/1;object-fit:cover}
.chapter figcaption{font-size:12px;margin-top:8px}
.chapter article{max-width:720px;margin-inline:auto}
.chapter article p{font-size:clamp(17px,2vw,21px)}
.chapter-next{margin:40px 0 0;text-align:center}
@media(max-width:560px){.chapter-grid{grid-template-columns:1fr}.chapter figure img{aspect-ratio:4/3}}

.product-page{padding:24px 5% 0}
.product-back{display:inline-block;margin-bottom:20px;font-size:13px}
.product-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,6vw,100px);align-items:center}
.product-cover{margin:0;position:relative;background:var(--moss)}
.product-cover img{aspect-ratio:4/5;max-height:850px}
.product-cover figcaption{position:absolute;bottom:14px;left:14px;background:var(--cream);padding:7px 12px;font-size:10px;letter-spacing:.15em}
.product-info{padding-block:20px}
.product-info h1{font-size:clamp(40px,6vw,100px);overflow-wrap:anywhere}
.product-price{font-size:28px;margin:18px 0}
.product-tags{list-style:none;padding:0;display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.product-tags li{border:1px solid #30271e40;padding:5px 10px;font-size:12px}
.product-cta{width:100%;text-align:center;padding-block:16px}
.product-note{font-size:13px}
.product-info details{border-top:1px solid #30271e35;padding:14px 0}
.product-info summary{cursor:pointer;font-weight:600}
.product-info details p{margin-bottom:0}
.product-editorial{margin:clamp(38px,7vw,95px) -5.55% 0;padding:clamp(36px,7vw,100px) 5%;background:var(--moss)}
.product-editorial div{display:flex;gap:18px 32px;flex-wrap:wrap;margin-top:24px}
@media(max-width:700px){.product-layout{grid-template-columns:1fr;gap:4px}.product-cover img{aspect-ratio:1/1}.product-info{padding-top:20px}}

#add-product{margin-block:25px}
#add-product label{display:block;font-weight:600;margin-bottom:8px}
#variant{width:100%;padding:12px;background:var(--cream);color:var(--ink);border:1px solid #30271e55;margin-bottom:12px}
#add-product button,.bag-line button{cursor:pointer;border:1px solid #30271e55}
.bag-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid #30271e35}
.bag-line button{min-width:38px;min-height:38px;background:var(--cream);color:var(--ink)}
#cart-lines{margin-bottom:24px}