:root{--ink:#060606;--ink-2:rgba(6,6,6,.72);--ink-3:rgba(6,6,6,.62);--line:#e4e4e4;--paper:#fff;--paper-2:#f4f4f2;--accent:#c8552a;--accent-ink:#a94420;--serif:Barlow,-apple-system,"Helvetica Neue",Arial,sans-serif;--sans:Barlow,-apple-system,"Helvetica Neue",Arial,sans-serif;--max:1300px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
/* headings: Archivo expanded 800 (Marco, 30 Sep 2026); body stays Barlow, prints and logo Notable */
h1,h2,h3,.h2{font-family:Archivo,var(--serif);font-weight:800;font-stretch:112%;margin:0;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.75vw,4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.65rem)}
h3{font-size:1.15rem;line-height:1.25;letter-spacing:-.01em}
h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .6rem}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
.eyebrow{display:block;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.8rem}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:40rem;margin-top:.9rem}
.muted{color:var(--ink-2)} .small{font-size:.85rem} .center{text-align:center;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;letter-spacing:.02em;padding:1rem 1.7rem;border:0;border-radius:0;cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:#000}
.btn.accent{background:var(--accent)} .btn.accent:hover{background:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)} .btn.ghost:hover{background:var(--ink);color:#fff}
.textlink{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.actions{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;margin-top:1.6rem}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:100}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
section{padding:88px 0} section.tight{padding-top:8px} section.alt{background:var(--paper-2)}
@media (max-width:720px){section{padding:52px 0}}
.strip{background:var(--ink);color:#fff;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;text-align:center;padding:.7rem 1rem}
.strip b{font-weight:600} .strip span{opacity:.55;margin:0 .7rem}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.logo{font-family:var(--serif);font-weight:700;font-size:1.25rem;text-decoration:none;letter-spacing:-.01em;white-space:nowrap;text-transform:uppercase}
.logo em{font-style:normal;color:var(--accent)}
.nav ul{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0;font-size:.95rem;font-weight:500}
.nav ul a{text-decoration:none;color:var(--ink-2)} .nav ul a:hover{color:var(--ink)}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.burger span{display:block;width:22px;height:2px;background:var(--ink)}
/* seven links since Gifts and Swim joined the nav (24 Sep 2026): tighter spacing, burger sooner */
@media (max-width:1100px){.nav ul{gap:1.15rem}}
@media (max-width:1000px){
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 24px 16px}
  .nav ul li a{display:block;padding:12px 0;border-top:1px solid var(--line)}
  .nav.open ul{display:flex} .burger{display:flex}
  .nav .btn{padding:.6rem .9rem;font-size:.85rem;white-space:nowrap}
}
@media (max-width:720px){.strip{font-size:.75rem} .strip .d{display:none} .nav{height:60px} .logo{font-size:1.2rem}}
@media (max-width:480px){.nav .btn{display:none}}
.crumbs{font-size:.8rem;color:var(--ink-3);padding-top:14px} .crumbs a{color:var(--ink-3);text-decoration:none} .crumbs span{margin:0 .3rem}
.hero{padding:0;background:linear-gradient(180deg,#ebe7df 0%,#e2ddd3 100%);overflow:hidden;position:relative}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(180deg,#d8d2c6,#cbc4b6)}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;min-height:620px;padding-top:56px;padding-bottom:56px;position:relative;z-index:1}
.hero .wall{align-self:end;display:flex;justify-content:center;padding-top:24px}
.hero h1{margin:.6rem 0 1rem}
.hero small{display:block;margin-top:1rem;color:var(--ink-3);font-size:.85rem}
.hero .frame img{height:min(520px,58vh);width:auto}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;min-height:0}.hero .wall{order:-1}.hero .frame img{height:auto;width:min(300px,78vw)}}
.vhero{padding:0;background:#e6e2da}
.vhero .stage{position:relative;width:100%;aspect-ratio:16/9;max-height:82vh;overflow:hidden;background:#dfe6ee}
.vhero video,.vhero .trail,.vhero .reveal{position:absolute;inset:0;width:100%;height:100%}
.vhero video{object-fit:cover}
.vhero .reveal{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1a1a1a 0%,#262626 100%);opacity:0;transition:opacity 1.1s ease;pointer-events:none;z-index:1}
.vhero .reveal.on{opacity:1}
.vhero .reveal .frame{transform:scale(.96);transition:transform 1.4s ease}
.vhero .reveal.on .frame{transform:scale(1)}
.vhero .reveal .frame img{height:min(62vh,520px);width:auto}
.vhero .stage:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.42) 100%);z-index:1;pointer-events:none}
.vhero .copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;z-index:2;color:#fff}
.vhero .copy h1{margin:.5rem 0 1rem;font-size:clamp(2.1rem,5.3vw,4.35rem);color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35);max-width:20ch}
.vhero .copy .eyebrow{color:rgba(255,255,255,.82)}
.vhero .copy .lead{max-width:44ch;color:rgba(255,255,255,.94);font-size:1.15rem;text-shadow:0 1px 18px rgba(0,0,0,.4)}
.vhero .copy .actions{justify-content:center;gap:2rem;margin-top:2rem}
.vhero .copy .textlink{color:#fff}
.vhero .copy small{display:block;margin-top:1rem;color:rgba(255,255,255,.82);font-size:.88rem}
.vhero .btn.accent{background:#fff;color:var(--ink)} .vhero .btn.accent:hover{background:#f0f0f0}
@media (max-width:900px){.vhero .stage{aspect-ratio:3/4;max-height:none}.vhero .copy h1{font-size:clamp(1.9rem,7.6vw,2.65rem)}.vhero .copy .lead{font-size:1rem}.vhero .reveal .frame img{height:min(52vh,340px)}}
@media (prefers-reduced-motion:reduce){.vhero .reveal{opacity:1;transition:none}}
.paper-only{box-shadow:0 18px 40px -18px rgba(0,0,0,.4);display:inline-block}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}
.card{text-decoration:none;display:block}
.card .pic{background:var(--paper-2);padding:32px 24px;display:flex;justify-content:center;align-items:center;aspect-ratio:1/1.05;transition:background .2s}
.card:hover .pic{background:#efece5}
.card h3{margin-top:16px;font-family:var(--sans);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.card .muted{margin-top:4px;font-size:.92rem}
.card .price{color:var(--ink);font-size:.95rem;margin-top:8px;font-weight:600}
.tag{display:inline-block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:#fff;padding:.2rem .5rem;margin:12px 0 -6px}
.tag.soon{background:var(--ink-3)}
.rgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:36px}
.rgrid.big{grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:1000px){.rgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.rgrid,.rgrid.big{grid-template-columns:1fr 1fr;gap:14px}}
.rcard{text-decoration:none}.rcard .pic{background:var(--paper-2);padding:18px;display:flex;justify-content:center;align-items:center;aspect-ratio:1/1.1}
.rgrid.big .rcard .frame img{height:230px}
@media (max-width:600px){.rcard .frame img,.rgrid.big .rcard .frame img{height:120px}}
.rcard h3{font-family:var(--sans);font-weight:700;font-size:.95rem;margin-top:12px;letter-spacing:-.01em}
section.config{padding:60px 0}
.config .wrap,.create .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.create .wrap{align-items:start}
@media (max-width:900px){.config .wrap,.create .wrap{grid-template-columns:1fr}.preview .frame img{height:auto;width:min(360px,80vw)}}
.preview{display:flex;flex-direction:column;align-items:center;gap:14px}
.preview .frame img{width:auto;height:min(62vh,540px);max-width:100%;transition:opacity .2s}
.preview.sticky{position:sticky;top:90px}
.opt{margin-top:1.5rem} .opt .eyebrow{margin-bottom:.55rem;color:var(--ink-2)}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;padding:.55rem .9rem;font-size:.9rem;cursor:pointer;border-radius:2px;display:inline-flex;align-items:center;gap:.5rem;font-family:inherit;color:var(--ink)}
.chip.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.swatch{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.12)}
.filebox{margin-top:.8rem} .filebox textarea{width:100%;margin-top:.4rem;font:inherit;font-size:.9rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:2px;resize:vertical} .drop{display:flex;flex-direction:column;gap:.25rem;border:1px dashed var(--ink-3);padding:1.1rem 1rem;cursor:pointer;border-radius:2px;background:#fff} .drop:hover{border-color:var(--ink)} .filelist{list-style:none;margin:.7rem 0 0;padding:0;font-size:.88rem} .filelist li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--line)} .filelist li span:last-child{color:var(--ink-3)} .filelist li.bad span:first-child{color:#a3281f}
.note{margin-top:.9rem;color:var(--ink-3);font-size:.85rem}
.detail img{width:100%;border:1px solid var(--line);margin-top:28px}
.bordered{border:1px solid var(--line);margin-top:28px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:36px}
@media (max-width:760px){.cols{grid-template-columns:1fr}}
.cols h3{margin-bottom:.4rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:36px}
.steps.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.steps.four{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.steps,.steps.four{grid-template-columns:1fr}}
.step{border-top:2px solid var(--ink);padding-top:18px}
.step .n{font-family:var(--serif);font-weight:700;color:var(--accent);font-size:1.3rem;margin-bottom:.5rem}
.step h3{margin-bottom:.4rem}
details{border-top:1px solid var(--line);padding:18px 0} details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-weight:400;color:var(--ink-3);font-size:1.3rem;flex:none}
details[open] summary:after{content:"–"}
details p{margin-top:.8rem;color:var(--ink-2)}
.band{background:var(--ink);color:#fff;text-align:center}
.band h2{font-size:clamp(1.8rem,3.8vw,2.85rem)}
.band h2{color:#fff} .band .lead{margin:1rem auto 1.6rem;color:#cfcfcf}
.pagehead{padding-bottom:36px}
.product .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
@media (max-width:900px){.product .wrap{grid-template-columns:1fr}}
.gallery .main{background:var(--paper-2);padding:36px;display:flex;justify-content:center}
.gallery .main .frame img{width:min(420px,100%)}
.thumbs{display:flex;gap:10px;margin-top:12px}
.thumbs button{border:1px solid var(--line);background:#fff;padding:4px;width:72px;cursor:pointer}
.thumbs button.on{border-color:var(--ink)}
.thumbs img{width:100%;aspect-ratio:1;object-fit:cover}
.buy h1{margin-top:.4rem}
.specs{margin:1.6rem 0 0;display:grid;gap:12px}
.specs div{display:grid;grid-template-columns:130px 1fr;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.specs dt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.specs dd{margin:0;color:var(--ink-2)}
.tablewrap{overflow-x:auto;margin-top:28px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line)} th{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.prose{max-width:720px} .prose p{margin-top:1rem;color:var(--ink-2);font-size:1.05rem} .prose h2{margin-top:2.2rem;font-size:1.5rem}
form{max-width:100%}
label{display:block;font-size:.85rem;font-weight:600;margin:14px 0 6px}
input[type=text],input[type=email],select,textarea{width:100%;padding:.8rem .9rem;border:1px solid #cfcfcf;border-radius:2px;font:inherit;background:#fff}
.configurator h1{margin-bottom:.4rem}
.configurator input[type=text]{max-width:420px}
.configurator select{max-width:420px}
.summary{margin-top:2rem;border-top:2px solid var(--ink);padding-top:18px}
.summary .row{display:flex;justify-content:space-between;gap:16px;margin-bottom:8px}
.summary strong{font-size:1.3rem}
.summary .btn{width:100%;justify-content:center;margin-top:14px}
.msg{margin-top:12px;font-size:.9rem;min-height:1.2em}
.msg.err{color:#b3261e} .msg.ok{color:#1e7a46}
.contact label{margin-top:16px}
.site-footer{border-top:1px solid var(--line);padding:56px 0 40px;font-size:.9rem;color:var(--ink-2)}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:800px){.fcols{grid-template-columns:1fr 1fr}}
.site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{margin:.3rem 0} .site-footer a{text-decoration:none;color:var(--ink-2)} .site-footer a:hover{color:var(--ink)}
.site-footer .logo{color:var(--ink)}
.attr{margin-top:32px;color:var(--ink-3);font-size:.78rem}

/* ---- homepage, September 2026: the new poster family ---- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:32px}}
.wall{background:linear-gradient(135deg,#ece8df,#dcd6ca);display:flex;justify-content:center;align-items:center;padding:clamp(28px,5vw,64px)}
.wall.big{padding:clamp(36px,6vw,84px)}
.pframe{display:inline-block;line-height:0;background:#c9a274;padding:clamp(7px,1.1vw,13px);box-shadow:0 34px 60px -22px rgba(0,0,0,.5),0 10px 20px -10px rgba(0,0,0,.35);transition:padding .2s,background .2s}
.pframe img{display:block;width:100%;height:auto;max-width:420px;aspect-ratio:1200/1697;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);transition:opacity .2s}
.pframe.f-black{background:#151515}.pframe.f-white{background:#f6f4ef;box-shadow:0 34px 60px -22px rgba(0,0,0,.4),0 0 0 1px #d6d1c6}
.pframe.f-none{padding:0;background:transparent;box-shadow:0 22px 40px -20px rgba(0,0,0,.45),0 4px 10px -4px rgba(0,0,0,.25)}
.vhero .reveal .pframe{transform:scale(.96);transition:transform 1.4s ease}.vhero .reveal.on .pframe{transform:scale(1)}
.vhero .reveal .pframe img{height:min(62vh,520px);width:auto;max-width:none}
@media (max-width:900px){.vhero .reveal .pframe img{height:min(52vh,340px)}}
.ticks{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.7rem}
.ticks li{padding-left:1.6rem;position:relative;color:var(--ink-2)}
.ticks li:before{content:"";position:absolute;left:0;top:.62em;width:.7rem;height:2px;background:var(--accent)}
.pricebig{margin-top:1.5rem;font-size:1.15rem;font-weight:600}.pricebig .sep{color:var(--ink-3);margin:0 .3rem}
.showcase{padding-bottom:72px}
/* picker */
.picker fieldset{border:0;padding:0;margin:1.5rem 0 0;min-width:0}
.picker legend{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:0;margin-bottom:.7rem}
.picker legend b{color:var(--ink);letter-spacing:.04em;margin-left:.5rem}
.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px 8px}
.sw{cursor:pointer;display:block;text-align:center}
.sw input,.opt-pill input{position:absolute;opacity:0;pointer-events:none}
.chip3{display:flex;height:44px;border:1px solid rgba(0,0,0,.18);outline:2px solid transparent;outline-offset:2px}
.chip3 i{display:block}.chip3 i:nth-child(1){flex:3}.chip3 i:nth-child(2){flex:1}.chip3 i:nth-child(3){flex:1.4}
.sw input:checked+.chip3{outline-color:var(--ink)}.sw input:focus-visible+.chip3{outline-color:var(--accent)}
.sw .nm{display:block;font-size:.75rem;line-height:1.2;margin-top:.35rem;color:var(--ink-2)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.opt-pill span{display:block;border:1px solid var(--line);background:#fff;padding:.6rem .95rem;font-size:.9rem;cursor:pointer}
.opt-pill input:checked+span{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.opt-pill input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.pk-buy{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line);flex-wrap:wrap}
.pk-price{display:block;font-size:1.9rem;line-height:1;font-weight:700;letter-spacing:-.02em}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pk-stage .note{margin-top:.8rem}
@media (max-width:900px){
  .picker .two{gap:0}
  .pk-stage{position:sticky;top:60px;z-index:5;background:var(--paper-2);margin:0 -24px;padding:0 24px 6px}
  .pk-stage .wall{padding:14px}.pk-stage .pframe img{max-width:none;width:auto;height:34vh}
  .pk-stage .note{display:none}
  /* no sideways scrolling for colours on phones (Marco, 28 Sep 2026): they wrap, as on the create page */
  .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:12px 8px}
}
/* up close */
.crops{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;margin-top:2rem;align-items:start}
.crops figure{margin:0}.crops img{width:100%;height:auto}.crops figcaption{font-size:.85rem;color:var(--ink-3);margin-top:.6rem}
@media (max-width:800px){.crops{grid-template-columns:1fr}}
.cols.four{grid-template-columns:repeat(4,1fr)}@media (max-width:980px){.cols.four{grid-template-columns:1fr 1fr}}@media (max-width:560px){.cols.four{grid-template-columns:1fr}}
/* activities */
.agrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:2.2rem}
@media (max-width:1100px){.agrid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:560px){.agrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.acard{text-decoration:none;display:block}.acard h3{margin-top:.8rem;font-size:1rem}.acard p{font-size:.85rem;margin-top:.2rem}
.apic{aspect-ratio:4/5;overflow:hidden;background:#e9e5dc;display:flex;align-items:center;justify-content:center}
.apic>img{width:100%;height:100%;object-fit:cover}
.apic.wall{padding:14%}.apic.wall .pframe{padding:4px}.apic.wall .pframe img{max-width:100%}
.acard:hover .apic{filter:brightness(.96)}
.tile{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;position:relative;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.tile svg{position:absolute;inset:8% 8% 22% 8%;width:84%;height:70%}
.tile span{position:relative;opacity:.85}
/* resorts, light */
.rlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rlist a{display:flex;justify-content:space-between;gap:16px;padding:.85rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.rlist a:hover strong{text-decoration:underline;text-underline-offset:3px}.rlist span{color:var(--ink-3);font-size:.9rem;text-align:right}
.resorts-lite .two{align-items:start}
.faq3 details{border-bottom:1px solid var(--line);padding:1rem 0}.faq3 summary{cursor:pointer;font-weight:600}.faq3 details p{margin-top:.6rem;color:var(--ink-2)}
/* phone buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.buybar .btn{padding:.8rem 1.2rem}
@media (max-width:720px){.buybar:not([hidden]){display:flex}body.has-buybar{padding-bottom:70px}}
/* grid children must be allowed to shrink, or a scrolling row inside one stretches the whole page */
.two>*{min-width:0}
@media (max-width:720px){
  .showcase{padding-bottom:44px}.wall.big{padding:26px}.showcase .pframe img{max-width:56vw}
  .pk-buy .btn{flex:1 1 100%;justify-content:center}
  .pills{flex-wrap:nowrap;overflow-x:auto;margin:0 -24px;padding:2px 24px 6px}.opt-pill{flex:0 0 auto}.opt-pill span{white-space:nowrap}
  .crops figure:nth-child(2){display:none}
  .upclose .cols,.why .cols{gap:18px;margin-top:1.6rem}
  .why .cols.four{grid-template-columns:1fr 1fr}.why .cols h3{font-size:1rem}.why .cols p{font-size:.88rem}
  .agrid{display:flex;overflow-x:auto;gap:12px;margin:1.6rem -24px 0;padding:0 24px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .acard{flex:0 0 44vw;scroll-snap-align:start}
  .how .steps{gap:14px}.how .step{display:grid;grid-template-columns:2.2rem 1fr;column-gap:10px;padding:0}.how .step .n{grid-row:1 / span 2;margin:0}.how .step h3{margin:0}
  .rlist a{padding:.6rem 0}.rlist span{display:none}
}
@media (max-width:720px){
  .upclose .cols{display:none}
  .resorts-lite .rlist li:nth-child(n+5){display:none}
  .ticks{gap:.5rem;margin-top:1rem}.pricebig{margin-top:1.1rem}
}

/* sport-neutral homepage and sport landing pages */
.wall.duo{gap:clamp(14px,2.4vw,30px);align-items:flex-end;padding:clamp(24px,4vw,56px)}
.wall.duo .pframe{flex:1 1 0;min-width:0}.wall.duo .pframe:nth-child(2){flex:.72 1 0;margin-bottom:6%}
.wall.duo .pframe img{max-width:100%}
.crops.even{grid-template-columns:1fr 1fr}@media (max-width:800px){.crops.even{grid-template-columns:1fr}.crops.even figure:nth-child(2){display:block}}
.sport-hero{padding:56px 0 72px}.sport-hero h1{font-size:clamp(2rem,4vw,3.3rem);margin:.4rem 0 0}
.sport-tile{aspect-ratio:4/5;max-height:560px;width:100%;max-width:440px;justify-self:center}
.sport-tile .tile{font-size:.8rem;padding:20px}
@media (max-width:900px){.sport-hero .wall,.sport-hero .sport-tile{order:-1}.sport-hero{padding:28px 0 48px}}
@media (max-width:720px){.wall.duo{padding:20px}}

/* brand, 22 Sep 2026: wordmark in Notable, navy with a green MAP; favicon is Design's Glacier badge */
:root{--navy:#0f2f4a;--green:#2e9e5b;--green-light:#7bd389;--accent:#0f2f4a;--accent-ink:#0a2238}
.logo{font-family:Notable,var(--serif);font-weight:400;font-size:1.02rem;letter-spacing:.01em;color:var(--navy);line-height:1}
.logo em{color:var(--green)}
footer .logo,.site-footer .logo{font-size:1.02rem}
@media (max-width:720px){.logo{font-size:.9rem}}
.ticks li:before{background:var(--green)}.step .n{color:var(--green)}
.band{background:var(--navy)}

/* hero final frame: the prints lined up left to right */
.vhero .reveal .row{display:flex;gap:clamp(10px,1.6vw,26px);align-items:center;justify-content:center;padding:0 24px;width:100%}
.vhero .reveal .row .pframe{flex:0 1 auto;transform:translateY(18px);opacity:0;transition:transform .9s ease,opacity .9s ease}
.vhero .reveal.on .row .pframe{transform:none;opacity:1}
.vhero .reveal.on .row .pframe:nth-child(2){transition-delay:.12s}.vhero .reveal.on .row .pframe:nth-child(3){transition-delay:.24s}.vhero .reveal.on .row .pframe:nth-child(4){transition-delay:.36s}.vhero .reveal.on .row .pframe:nth-child(5){transition-delay:.48s}.vhero .reveal.on .row .pframe:nth-child(6){transition-delay:.6s}
.vhero .reveal .row .pframe img,.vhero .reveal .row .tile-wrap{height:min(38vh,300px);width:auto;max-width:none;aspect-ratio:1200/1697}
.vhero .reveal .row .tile-wrap{display:block}.vhero .reveal .row .tile{font-size:.55rem;padding:8px}
@media (max-width:900px){.vhero .reveal .row{flex-wrap:wrap;gap:10px}.vhero .reveal .row .pframe img,.vhero .reveal .row .tile-wrap{height:min(22vh,150px)}}
/* final frame: six prints must fit the stage, and the headline steps aside while they show */
.vhero .reveal .row{align-items:flex-end;max-width:1500px;margin:0 auto}
.vhero .reveal .row .pframe{width:calc((100% - 5 * clamp(10px,1.6vw,26px)) / 6);flex:0 0 auto}
.vhero .reveal .row .pframe img,.vhero .reveal .row .tile-wrap{height:auto;width:100%;max-height:min(46vh,380px)}
.vhero .reveal .row .pframe:nth-child(2n){margin-bottom:5%}
.vhero .copy{transition:opacity .8s ease}
.vhero.showing-prints .copy{opacity:0;pointer-events:none}
@media (max-width:900px){.vhero .reveal .row{flex-wrap:wrap;justify-content:center}.vhero .reveal .row .pframe{width:calc((100% - 2 * 10px) / 3)}.vhero .reveal .row .pframe:nth-child(2n){margin-bottom:0}}
.tile{line-height:1.25}.tile span{white-space:nowrap}
.vhero .reveal .row .tile{font-size:.5rem;letter-spacing:.08em;padding:8px}
/* create page: the form fields Design's spec asks for */
.create .fields{display:grid;gap:14px;margin-top:.4rem}
.create .fields label{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.create .fields input{margin-top:.35rem;text-transform:none;letter-spacing:0}
.create .fields small{display:block;margin-top:.3rem;font-size:.78rem;color:var(--ink-3);text-transform:none;letter-spacing:0;font-weight:400}
.create .opt b{color:var(--ink);letter-spacing:.04em;margin-left:.5rem}
.create input[type=email],.create input[type=text],.create select,.create textarea{width:100%;font:inherit;font-size:.95rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink)}
.create input:focus-visible,.create textarea:focus-visible,.create select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.create .swatches{grid-template-columns:repeat(8,minmax(0,1fr))}
.create .preview .wall{background:linear-gradient(135deg,#ece8df,#dcd6ca);padding:clamp(20px,3vw,40px)}
.create .preview .pframe img{max-width:100%}
.msg{margin-top:.9rem;font-size:.9rem} .msg.err{color:#a3281f} .msg.ok{color:#0b6b3a}
.btn[disabled]{opacity:.55;cursor:default}
/* Marco, 28 Sep 2026: no sideways scrolling for options; the swatches wrap into as many columns as fit */
@media (max-width:900px){.create .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:12px 8px}}
/* long-form pages */
.prose h2{font-size:1.3rem;margin:2rem 0 .6rem}
.prose p{margin-bottom:1rem;color:var(--ink-2)}
.prose p:first-child{margin-top:0}
.pagehead .narrow .lead{margin-left:0;margin-right:0}
.product .gallery .main.wall,.card .pic.wall{background:linear-gradient(135deg,#ece8df,#dcd6ca);display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vw,44px)}
.card .pic.wall{aspect-ratio:4/5;padding:12%}
.card .pic.wall .pframe img{max-width:100%;height:auto}
.thumbs button{padding:0;border:1px solid var(--line);background:#fff;cursor:pointer;overflow:hidden}
.thumbs button.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
/* resort cards: a print when Design has drawn one, otherwise a clean text card */
.rcard{display:block;text-decoration:none}
.rcard h3{margin-top:.7rem;font-size:1.02rem}
.rcard .runs{margin-top:.15rem;color:var(--ink-3)}
.rcard.textonly{border-top:2px solid var(--ink);padding-top:14px}
.rcard.textonly h3{margin-top:0}
.rcard .pic.wall{aspect-ratio:4/5;padding:12%}
.rcard .pic.wall .pframe{padding:5px}
.rcard .pic.wall img{width:100%;height:auto;max-width:100%}
.rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.rgrid.big{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.rgrid,.rgrid.big{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.gallery .main.wall.placeholder{aspect-ratio:3/4;text-align:center;padding:clamp(24px,5vw,60px)}
.gallery .main.wall.placeholder p{max-width:34ch;margin:0 auto}
/* create page on a phone: the poster stays small and pinned at the top so the thing you just
   changed is always visible, and the form scrolls under it */
.create .preview.sticky{position:sticky;top:90px}
@media (max-width:559px){
  /* Marco, 3 Oct 2026: on a phone the print sits small on the left and the options run down the right,
     not a band across the top. Tap the print to see it big. */
  .create .wrap{gap:12px;grid-template-columns:minmax(0,34fr) minmax(0,66fr)!important;align-items:start}
  .create .preview.sticky{position:sticky;top:72px;align-self:start;gap:6px;margin:0;padding:0;background:none;box-shadow:none}
  .create .preview .wall{padding:6px}
  .create .preview .pframe{padding:3px}
  .create .preview .pframe img{width:100%;height:auto;max-width:100%}
  .create .preview .note{display:none}
  .create .zoomhint{font-size:.72rem;line-height:1.25;text-align:center}
  .create .configurator h1{margin-top:0;font-size:1.6rem}
  .create .configurator .cstep legend{font-size:1rem}
  .create .opt-pill span,.create .chip{font-size:.82rem;padding:.45rem .6rem}
  .create .swatches{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))!important;gap:10px 6px}
  .create .sw .nm{font-size:.66rem}
  .create .wline input{font-size:1rem;padding-right:2.6rem}
  .create .pills{flex-wrap:wrap!important;overflow:visible;margin:0;padding:0}
  .create .wtoggles .pills{flex-wrap:wrap!important}
}
/* a grid child will not shrink below its content unless it is told it may, and a poster image
   is wide content: without this the single mobile column blows past the screen */
.create .wrap,.config .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.create .wrap>*,.config .wrap>*,.product .wrap>*,.two>*{min-width:0}
@media (max-width:900px){.config .wrap{grid-template-columns:minmax(0,1fr)}}
/* 560 to 900: tablets and narrow windows keep the print beside the options (Marco, 28 Sep 2026) */
@media (min-width:560px) and (max-width:900px){.create .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px}.create .preview .note{font-size:.78rem}}
/* when the film is not loaded the poster frame is the backdrop, so the prints still read */
/* the hero's poster is the video's own background, one per shape, so the first view never waits for
   the film (v2, 4 Oct 2026) */
.vhero video{background:#0d1a22 url(/img/hero2-poster.jpg) center/cover no-repeat}
@media (max-width:899px){.vhero video{background-image:url(/img/hero2-poster-mobile.jpg)}
  /* a blurred header over a playing film re-blurs every frame: phones get a plain one */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .vhero .copy h1,.vhero .copy .lead{text-shadow:0 1px 10px rgba(0,0,0,.35)}}

/* ---- 24 Sep 2026: create page in numbered steps, with the words drawn live on the print ---- */
.create [hidden]{display:none!important}
.poster{position:relative;display:block;line-height:0}
.poster svg.words{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.words .wt{font-family:Notable,Georgia,serif}
.words .wl{font-family:Barlow,sans-serif;font-size:4.2px;letter-spacing:1.3px}
.words .wv{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:10.5px}
.words .we{font-family:Barlow,sans-serif;font-weight:600;font-size:4.6px;letter-spacing:1.7px}
.words .wf{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:6.4px}
.words .wm{font-family:Barlow,sans-serif;font-weight:600;font-size:2.5px;letter-spacing:1.1px}
.cstep{border:0;margin:1.7rem 0 0;padding:1.5rem 0 0;border-top:1px solid var(--line);min-width:0}
.cstep>legend{float:left;width:100%;padding:0;margin:0 0 .95rem;font-weight:700;font-size:1.08rem;letter-spacing:-.01em;display:flex;align-items:baseline;gap:.65rem}
.cstep>legend+*{clear:both}
.cstep>legend .n{font-family:"Barlow Condensed",sans-serif;font-size:.9rem;color:var(--ink-3);letter-spacing:.06em}
.cstep>legend b{font-weight:500;color:var(--ink-3)}
.configurator>h1{margin-bottom:.2rem}
.configurator .cstep:first-of-type{border-top:0;padding-top:.6rem}
.wordsbox{display:grid;gap:16px}
.wfield{display:block}
.wlabel{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.45rem}
.wlabel em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;margin-left:.35rem}
.wline{position:relative;margin-bottom:8px}
.create .configurator input[type=text],.create .configurator select{max-width:none}
.create .wline input{font-family:Notable,var(--sans);font-size:1.2rem;letter-spacing:.03em;text-transform:uppercase;padding:.75rem 3.8rem .65rem .9rem;line-height:1.2}
.create .wline input::placeholder{color:rgba(6,6,6,.22)}
.wline .count{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.count.warn,.whint.warn{color:#a3281f}
.whint{font-size:.8rem;color:var(--ink-3);margin-top:.5rem;line-height:1.45}
.wtoggles{display:flex;gap:28px;flex-wrap:wrap;margin-top:20px}
.wtoggles .pills{flex-wrap:nowrap}
.race{margin-top:20px;padding:16px 18px;background:var(--paper-2)}
.racebox{display:grid;gap:12px;margin-top:14px}
.wrow{display:grid;grid-template-columns:1fr 1.3fr .8fr;gap:10px}
@media (max-width:560px){.wrow{grid-template-columns:1fr 1fr}}
.switch{display:flex;align-items:center;gap:.7rem;cursor:pointer;font-weight:600;font-size:.95rem;position:relative}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch span{width:38px;height:22px;border-radius:11px;background:#cfcfcb;position:relative;transition:background .2s;flex:0 0 38px}
.switch span:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked+span{background:var(--ink)}.switch input:checked+span:after{transform:translateX(16px)}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.switch em{font-style:normal;font-weight:400;color:var(--ink-3);font-size:.85rem}
.cstep .chips{margin-bottom:12px}
.cstep [data-physical]{margin-top:10px}
.cstep .filebox{margin-top:12px}
.cstep [data-only="ski"]{margin-top:16px}
.summary .btn{font-size:1.02rem}

/* homepage: four whole prints, no close-ups */
.pwall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:2rem}
.pw{text-decoration:none;display:block}.pw .wall{padding:14% 12%}.pw .pframe img{max-width:100%}
.pw span{display:block;font-size:.88rem;color:var(--ink-2);margin-top:.7rem}
.pw:hover .wall{filter:brightness(.97)}
.realprints .cols{margin-top:2.6rem}
@media (max-width:900px){.pwall{display:flex;overflow-x:auto;margin:1.6rem -24px 0;padding:0 24px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.pw{flex:0 0 62vw;scroll-snap-align:start}}
.soon{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;background:var(--paper-2);padding:.22rem .45rem;margin-left:.35rem;vertical-align:middle;font-weight:600;color:var(--ink-3)}
/* the closing band is navy, and so is the accent button: invert it there (it was invisible) */
.band .btn.accent{background:#fff;color:var(--navy);border-color:#fff}.band .btn.accent:hover{background:#e9eef3}

/* ---- 24 Sep 2026: gift guides, race guides, Strava ---- */
.ideas,.miles{list-style:none;margin:1.6rem 0 0;padding:0;counter-reset:n;border-top:1px solid var(--line)}
.ideas li,.miles li{counter-increment:n;display:grid;grid-template-columns:2.2rem 1fr;gap:.2rem 1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.ideas li::before,.miles li::before{content:counter(n,decimal-leading-zero);grid-row:span 2;font-family:"Barlow Condensed",sans-serif;font-weight:700;color:var(--ink-3)}
.ideas strong,.miles strong{font-weight:700}
.ideas span,.miles span{display:block;color:var(--ink-2)}
.narrow h2+.lead,.narrow .ideas+h2{margin-top:1rem}
.narrow>h2:not(:first-child){margin-top:2.6rem}
.cols.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.cols.two-col{grid-template-columns:1fr}}
.pwall.gifts{grid-template-columns:repeat(5,minmax(0,1fr))}
.pw strong{display:block;margin-top:.8rem;font-size:1rem}
.pw strong+span{margin-top:.15rem}
.giftband .rlist{margin-top:.4rem}
/* footer: brand plus six link columns since the gift and race pages arrived */
@media (min-width:1101px){.site-footer .fcols{grid-template-columns:1.3fr repeat(5,minmax(0,1fr));gap:28px}}
@media (min-width:901px) and (max-width:1100px){.site-footer .fcols{grid-template-columns:repeat(5,minmax(0,1fr))}.site-footer .fcols>div:first-child{grid-column:1/-1}}
@media (min-width:701px) and (max-width:900px){.site-footer .fcols{grid-template-columns:repeat(3,minmax(0,1fr))}.site-footer .fcols>div:first-child{grid-column:1/-1}}
.pwall.gifts.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.pwall.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.realprints .pwall:not(.three):not(.gifts){grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.pwall.gifts.six,.pwall.three,.realprints .pwall{display:flex}}
/* 25 Sep 2026: snowboarding is its own sport (seven cards) and has its own gift guide (seven guides) */
@media (min-width:1101px){.agrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:16px}}
.pwall.gifts{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (max-width:900px){.pwall.gifts{display:flex}}
@media (min-width:901px) and (max-width:1100px){.agrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* 25 Sep 2026: date and time on every print (Chief's request), race for every sport but ski and snowboard */
.when{margin-top:18px}
.wrow2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.create input[type=date]{width:100%;font:inherit;font-size:.95rem;padding:.62rem .8rem;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink)}
.check{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin-top:10px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--ink)}
/* Route guides: one block per path on a hiking guide (tools/site/hikes.mjs). */
.path{padding:1.3rem 0;border-top:1px solid var(--line)}.path:first-of-type{border-top:0}.path h3{margin:0 0 .25rem}.path p{margin:.3rem 0 0}
.two.top{align-items:start}
/* Regional ski hubs (tools/site/resorts.mjs): the comparison table and the Colorado map. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rtable{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.rtable th,.rtable td{padding:.55rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.rtable th{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.rtable .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rtable th.n:first-child,.rtable td.n:first-child{text-align:left;color:var(--ink-3);width:2.2rem}
.rmap{margin:0}.rmap svg{width:100%;height:auto;display:block}
.rmap .state{fill:var(--paper-2);stroke:var(--ink-3);stroke-width:1}
.rmap .dot{fill:var(--paper);stroke:var(--navy);stroke-width:1.6}.rmap .dot.guide{fill:var(--navy)}
.rmap .num{font:600 11px var(--sans);fill:var(--ink)}
.rmap .town{fill:var(--ink-3)}.rmap .townname{font:italic 11px var(--sans);fill:var(--ink-3)}
.rmap figcaption{margin-top:.6rem}
.mapwrap{max-width:980px}
.rmap .lead{stroke:var(--ink-3);stroke-width:.8}
.rmap .statename{font:600 13px var(--sans);letter-spacing:.3em;fill:var(--ink-3)}
/* The artist's route guide maps on guide pages. */
.guidemap{margin:0}.guidemap img{width:100%;height:auto;display:block;border-radius:2px}
.guidemap figcaption{margin-top:.6rem}.guidemap.tall{max-width:760px;margin:0 auto}
/* QA 25 Sep: footer column titles are labels, not headings; sport feature lines are h2s at h3 size */
.site-footer .fh{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .6rem;font-weight:700}
.cols h2.h3{font-size:1.15rem;line-height:1.25;letter-spacing:-.01em;margin-bottom:.4rem}
/* QA 25 Sep: list rows give the name the room; the figures shrink first */
.rlist strong{flex:1 1 55%;min-width:0}.rlist span{flex:0 1 45%}
.step h2.h3{font-size:1.15rem;line-height:1.25;letter-spacing:-.01em;margin-bottom:.4rem}
.card h2.h3{margin-top:16px;font-family:var(--sans);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;line-height:1.25}
/* 25 Sep: the closing band's line is a styled paragraph, so the page outline is the keyword headings */
.band .h2{font-family:Archivo,var(--serif);font-weight:800;font-stretch:112%;letter-spacing:-.03em;line-height:1.02;text-wrap:balance;font-size:clamp(1.8rem,3.8vw,2.85rem);color:#fff;margin:0}
/* Race page photos and course maps from Wikimedia Commons, credited under each */
.racefig{margin:0}.racefig img{width:100%;height:auto;max-height:620px;object-fit:cover;display:block;border-radius:2px;background:var(--paper-2)}
.racefig figcaption{margin-top:.6rem}.racefig figcaption a{color:inherit}
.racefig.tall{max-width:560px;margin:0 auto}.racefig.tall img{max-height:none}
/* Marco, 26 Sep 2026: the whole print must stay in view while editing. On desktop the preview is
   sized by the screen's height, not the column's width, and stays pinned under the header. */
@media (min-width:560px){
  .create .preview.sticky{top:88px}
  .create .preview .wall{padding:clamp(14px,2.2vh,32px);display:flex;justify-content:center}
  .create .preview .pframe{display:inline-block}
  .create .preview .pframe img{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 88px - 150px);max-height:calc(100svh - 88px - 150px)}
  .create .preview .note{margin:0}
}

/* the enlarged print on the create page */
.create #cfgFrame{cursor:zoom-in}
.zoomhint{display:block;margin:.5rem auto 0;background:none;border:0;font:inherit;font-size:.78rem;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:559px){.zoomhint{margin-top:.2rem;font-size:.72rem}}
.zoombox{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100svh;max-width:none;max-height:none;background:transparent}
.zoombox::backdrop{background:rgba(12,16,20,.86)}
.zoombox[open]{display:flex;align-items:center;justify-content:center}
.zoomstage{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:56px 16px 24px}
.zoomstage .poster{position:relative;width:min(100%,calc((100vh - 80px) * 1200 / 1697));width:min(100%,calc((100svh - 80px) * 1200 / 1697));aspect-ratio:1200/1697;height:auto;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.zoomstage .poster img{display:block;width:100%;height:100%}
.zoomstage .poster .words{position:absolute;inset:0;width:100%;height:100%}
.zoomclose{position:fixed;top:12px;right:12px;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:2rem;line-height:1;cursor:pointer;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.zoomclose:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
body.zooming{overflow:hidden}
.official{margin:.8rem 0 0;font-size:.9rem;color:var(--ink-3)}

/* resort maps: the still on the page, and the full map that pans and zooms */
.resortmap{margin:0;position:relative}.resortmap a{display:block;cursor:zoom-in}.resortmap img{width:100%;height:auto;display:block;border-radius:2px}
.resortmap .explore{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:inherit;font-weight:600;font-size:.95rem;padding:.7rem 1.2rem;border:0;border-radius:2px;background:var(--ink);color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.resortmap figcaption{margin-top:.6rem}
.mapview{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:#f7f6f2;overflow:hidden}
.mapview::backdrop{background:rgba(12,16,20,.86)}
.mv-stage{position:absolute;inset:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mv-stage:active{cursor:grabbing}.mv-stage svg{display:block}
.mv-stage svg.mv-hit .runs path{stroke-width:calc(34px / var(--k,1))!important;stroke-opacity:0}
.mv-stage .runs path.mv-on{stroke-width:calc(9px / var(--k,1))}
.mv-load{position:absolute;top:50%;left:0;right:0;text-align:center;color:var(--ink-3)}
.mv-ui{position:absolute;right:14px;bottom:18px;display:grid;gap:8px}
.mv-ui button,.mv-close{width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.25)}
.mv-close{position:absolute;top:12px;right:12px;font-size:2rem}
.mv-ui button:focus-visible,.mv-close:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mv-info,.mv-hint{position:absolute;left:14px;bottom:18px;right:76px;margin:0;width:max-content;max-width:calc(100% - 90px);background:#fff;padding:.6rem .9rem;border-radius:2px;box-shadow:0 3px 12px rgba(0,0,0,.2);font-size:.92rem}
.mv-hint{color:var(--ink-3);font-size:.82rem}.mv-info{font-weight:600}
.runlist{columns:3 14rem;column-gap:2rem;margin:.6rem 0 0;padding:0;list-style:none;font-size:.92rem}
.runlist li{break-inside:avoid;padding:.2rem 0;display:flex;gap:.5rem;align-items:baseline}
.runlist .g{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;display:inline-block;transform:translateY(.05rem)}
.runs-and-lifts details{border-top:1px solid var(--line);padding:.9rem 0}.runs-and-lifts summary{cursor:pointer;font-weight:600}

/* the artist's wall photos: framed prints in rooms */
.wallrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:1.4rem}
.wallrow.two{grid-template-columns:repeat(2,minmax(0,1fr))}.wallrow.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.wallrow,.wallrow.two{grid-template-columns:minmax(0,1fr)}.wallrow.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.wallshot{margin:0}.wallshot img{width:100%;height:auto;display:block;border-radius:2px;background:var(--paper-2)}
.wallshot figcaption{margin-top:.5rem}
.wallrow.two{max-width:880px}

/* Make your own colours */
.chip3.wheel{background:conic-gradient(#e2433a,#f2a93b,#f5e35a,#6cc36a,#3aa7d8,#6b5bd6,#d65bb0,#e2433a)}
.sw.off{opacity:.4;cursor:not-allowed}
.customcol{margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:2px;background:#fff}
.pickers{display:flex;flex-wrap:wrap;gap:12px 22px}
.pickers label{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;cursor:pointer}
.pickers input[type=color]{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;padding:0;background:none;cursor:pointer;overflow:hidden}
.pickers input[type=color]::-webkit-color-swatch-wrapper{padding:0}.pickers input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.pickers input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
#routeFix{margin-top:.4rem;background:none;border:0;padding:0;font:inherit;font-size:.9rem;cursor:pointer}
.poster .custommap{position:absolute;inset:0;line-height:0}.poster .custommap svg{width:100%;height:100%;display:block}
.poster .custommap .mv-load{position:absolute;top:40%;left:0;right:0;text-align:center;line-height:1.4;font-size:.85rem;color:var(--ink-3)}
.words .wm{font-family:"Avenir Next Condensed","DIN Condensed","Helvetica Neue",sans-serif;font-weight:700}

/* the main nav as five sport groups (29 Sep 2026): a dropdown on desktop, an accordion on phones */
.nav .grp{position:relative;display:flex;align-items:center;gap:.15rem}
.nav .subbtn{width:22px;height:22px;border:0;background:none;cursor:pointer;padding:0;position:relative}
.nav .subbtn::after{content:"";position:absolute;left:7px;top:6px;width:6px;height:6px;border-right:1.6px solid var(--ink-2);border-bottom:1.6px solid var(--ink-2);transform:rotate(45deg);transition:transform .15s}
.nav .grp.open .subbtn::after{transform:rotate(-135deg);top:9px}
.nav ul.sub{display:none;position:absolute;top:100%;left:-14px;min-width:230px;flex-direction:column;gap:0;background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:0 12px 30px rgba(0,0,0,.12);padding:6px 0;z-index:30;font-weight:400}
.nav ul.sub a{display:block;padding:.55rem 1rem;white-space:nowrap}
.nav ul.sub li:first-child a{font-weight:600}
@media (min-width:1001px){
  .nav .grp:hover ul.sub,.nav .grp:focus-within ul.sub,.nav .grp.open ul.sub{display:flex}
  .nav .grp::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
  .nav ul{gap:1.3rem}
}
@media (max-width:1180px) and (min-width:1001px){.nav ul{gap:.9rem;font-size:.9rem}}
@media (max-width:1000px){
  .nav .grp{flex-wrap:wrap;border-top:1px solid var(--line)}
  .nav .grp>a{flex:1;border-top:0!important}
  .nav .subbtn{width:44px;height:44px}.nav .subbtn::after{left:17px;top:16px}.nav .grp.open .subbtn::after{top:20px}
  .nav ul.sub{position:static;box-shadow:none;border:0;padding:0 0 8px 14px;min-width:0;width:100%}
  .nav .grp.open ul.sub{display:flex}
  .nav ul.sub a{padding:.55rem 0;border-top:0!important}
  .nav.open ul#menu{max-height:calc(100vh - 60px);overflow-y:auto}
}
.agrid.hub{grid-template-columns:repeat(auto-fill,minmax(240px,320px))}
@media (max-width:560px){.agrid.hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
.swatches a.sw{text-decoration:none;color:inherit}.swatches a.sw[hidden]{display:none}

/* every swatch alike, label or link: the global label style would otherwise lift the linked one */
.swatches .sw{margin:0;font-size:.85rem;font-weight:600}
/* the run list: dot, grade and count sit together, the + stays at the end */
.runs-and-lifts h2+p{margin-top:.5rem;margin-bottom:1rem}
.runs-and-lifts summary .gl{display:flex;align-items:center;gap:.6rem}
.runs-and-lifts summary .g{flex:none;width:.7rem;height:.7rem;border-radius:50%}

/* testimonials: real words, a visible label, no stars */
.testimonials .tlabel{margin-top:.4rem}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;margin-top:1.4rem}
.tcard img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:2px;background:var(--paper-2)}
.tcard blockquote{margin:1rem 0 .5rem;font-size:1.02rem;line-height:1.5}
.tcard .twho{margin:0;font-size:.9rem}

/* nav layout B: Sports opens one panel with a column per kind of sport */
.nav .grp.sports{position:static}
.nav .sub.mega{display:none;position:absolute;left:50%;transform:translateX(-50%);top:100%;width:min(1000px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:0 14px 34px rgba(0,0,0,.12);padding:22px 26px;z-index:30;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 26px;font-weight:400}
.nav .sub.mega ul{display:flex;flex-direction:column;gap:0;list-style:none;margin:.4rem 0 0;padding:0;font-size:.92rem}
.nav .sub.mega ul a{display:block;padding:.35rem 0;white-space:normal}
.nav .mhead{font-weight:700;color:var(--ink)!important;display:block;padding-bottom:.35rem;border-bottom:1px solid var(--line)}
.site-header .nav{position:relative}
@media (min-width:1001px){
  .nav .grp.sports:hover .sub.mega,.nav .grp.sports:focus-within .sub.mega,.nav .grp.sports.open .sub.mega{display:grid}
  .nav .grp.sports::after{display:none}
  .nav .grp.sports>a{padding:28px 0}
  .nav ul{gap:1.8rem}
}
@media (max-width:1000px){
  .nav .sub.mega{position:static;transform:none;width:100%;box-shadow:none;border:0;padding:4px 0 10px 14px;grid-template-columns:1fr;gap:10px}
  .nav .grp.sports.open .sub.mega{display:grid}
  .nav .mhead{border-bottom:0;padding:.4rem 0 0}
  .nav .sub.mega ul{margin:0;position:static;display:flex;padding:0 0 4px;border:0;background:none;box-shadow:none}
  .nav .sub.mega ul a{padding:.4rem 0;border-top:0!important}
}

/* create page Sport step: categories, then the kinds of sport in the chosen one */
.create .kinds{margin-top:.8rem}.create .kinds .morekinds{margin-top:8px;background:none;border-style:dashed}.create .kinds .morekinds[hidden]{display:none}.create .kinds[hidden]{display:none}
.create .kinds .chip{font-size:.85rem;padding:.45rem .8rem}
.chips .chip[hidden]{display:none}
.create .kinds .chips .chip{font-size:.85rem;padding:.42rem .8rem;min-height:0}

/* a swatch holds its own hidden radio, so the radio can never widen the page */
.sw{position:relative}

/* homepage, 30 Sep 2026: stills from our film, lean picker, sample reviews, band photo */
.agrid.cats{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.agrid.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:1.6rem 0 0;padding:0}.agrid.cats .acard:last-child{grid-column:1/-1;max-width:50%}}
.pk-lean{margin-top:1.6rem;align-items:center}
.tcard{position:relative}.tsample{position:absolute;top:10px;left:10px;background:#fff;color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .55rem;border-radius:2px;z-index:1}
.band.photo{background:linear-gradient(rgba(8,12,18,.62),rgba(8,12,18,.62)),var(--band-photo) var(--band-pos,center)/cover no-repeat}
/* Marco's photos, 2 Oct 2026: background blocks and full-width breaks */
.photo-bg{background:linear-gradient(rgba(8,12,18,.6),rgba(8,12,18,.6)),var(--band-photo) var(--band-pos,center)/cover no-repeat;color:#fff}
/* Marco, 2 Oct: taller, so more of each photo shows */
/* tall enough to see nearly the whole 3:2 photo, never past the screen */
.band.photo,.photo-bg{display:flex;align-items:center;min-height:min(66.6vw,92vh);padding:120px 0}
.band.photo>.wrap,.photo-bg>.wrap{width:100%}
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:1.6rem}
.mosaic picture:first-child{grid-column:span 2;grid-row:span 2}
.mosaic img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.mosaic picture:first-child img{aspect-ratio:auto}
@media (max-width:760px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mosaic picture:first-child{grid-row:auto}.mosaic picture:first-child img{aspect-ratio:3/2}.band.photo,.photo-bg{min-height:min(84vh,640px);padding:90px 0}}
.photo-bg h1,.photo-bg h2,.photo-bg h3,.photo-bg .textlink{color:#fff}
.photo-bg .lead,.photo-bg .muted{color:rgba(255,255,255,.86)} .photo-bg .eyebrow{color:rgba(255,255,255,.8)}
.photo-bg .step{border-top-color:#fff} .photo-bg .step .n{color:#fff}
.pagehead.photo-bg{margin-top:14px}
@media (max-width:760px){.band.photo,.photo-bg{background-image:linear-gradient(rgba(8,12,18,.62),rgba(8,12,18,.62)),var(--band-photo-sm,var(--band-photo))}}
/* text on photos, Marco 2 Oct: clearer, with the same ruled columns as the homepage steps */
.photo-bg{background-image:linear-gradient(90deg,rgba(8,12,18,.78),rgba(8,12,18,.5) 70%,rgba(8,12,18,.42)),var(--band-photo)}
.photo-bg h1,.photo-bg h2,.photo-bg h3,.photo-bg p,.photo-bg .eyebrow{text-shadow:0 1px 14px rgba(0,0,0,.35)}
.photo-bg .cols{gap:40px;margin-top:44px}
.photo-bg .cols>div{border-top:2px solid rgba(255,255,255,.9);padding-top:18px}
.photo-bg .cols h3{font-size:1.3rem;margin-bottom:.55rem}
.photo-bg .cols p,.photo-bg .step p{font-size:1.05rem;line-height:1.6}
.photo-bg .cols ~ p{max-width:46rem;font-size:.98rem;color:rgba(255,255,255,.8)}
.photo-bg .cols + p{margin-top:2.4rem !important;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.28)}
.photo-bg .two .lead{font-size:1.25rem;color:#fff}
@media (max-width:760px){.photo-bg{background-image:linear-gradient(rgba(8,12,18,.66),rgba(8,12,18,.66)),var(--band-photo-sm,var(--band-photo))}.photo-bg .cols{gap:26px}}
a.plain{color:inherit;text-decoration:none}a.plain:hover{text-decoration:underline;text-underline-offset:4px}
/* reviews, Marco 3 Oct 2026: dark earthy green stars, all twenty on the homepage */
.tstars{display:block;color:#3f5b34;font-size:1.05rem;letter-spacing:.12em;line-height:1;margin:1rem 0 0}.tstars>span{color:#d9ddd3}
.tcard>.tstars:first-child,.tcard>.tsample+.tstars{margin-top:0}
.tstars + blockquote{margin-top:.6rem}
.tsum{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin:.8rem 0 0;font-size:1.05rem}.tsum .tstars{display:inline-block;margin:0;font-size:1.25rem}
.tgrid.many{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:max(24px,(100vw - var(--max))/2 + 24px);padding:4px 24px 14px;margin:1.4rem calc(-1*max(24px,(100vw - var(--max))/2 + 24px)) 0;padding-left:max(24px,(100vw - var(--max))/2 + 24px);padding-right:max(24px,(100vw - var(--max))/2 + 24px);scrollbar-width:thin;overscroll-behavior-x:contain}
.tgrid.many .tcard{flex:0 0 clamp(250px,26vw,320px);scroll-snap-align:start}
.tnav{display:flex;gap:8px;justify-content:flex-end;margin-top:-2.6rem}.tnav button{width:42px;height:42px;border:1px solid var(--ink);background:#fff;color:var(--ink);font-size:1.1rem;cursor:pointer;border-radius:50%}.tnav button:hover{background:var(--ink);color:#fff}
@media (max-width:760px){.tnav{display:none}}
.tcard.text{background:var(--paper-2);padding:22px 20px 20px;border-radius:2px}
.tcard.text blockquote{margin:.6rem 0 .8rem;font-size:.98rem}
.tcard.text .tsample{position:static;display:inline-block;margin-bottom:.7rem}
.official-after{padding-bottom:8px}.official-after .official{margin:0;font-size:.95rem}
/* the homepage route line (Marco, 3 Oct 2026): tools/site/route-line.js */
.rl{position:absolute;left:0;top:0;pointer-events:none;z-index:4}
.rl-svg{position:absolute;left:0;top:0;overflow:visible}
.rl-ahead{fill:none;stroke:rgba(110,110,110,.22);stroke-width:1.6;stroke-dasharray:1 7;stroke-linecap:round}
/* the line is faint too, the same soft sage as the rider, cream on dark (Marco, 4 Oct 2026) */
.rl-done{fill:none;stroke:#bfcbbf;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.rl-done-dark{stroke:rgba(239,232,216,.7)}
/* the rider is quiet, a soft sage on light sections and cream on dark (Marco, 4 Oct 2026) */
.rl-rider{position:absolute;left:0;top:0;width:var(--rl-size,40px);height:var(--rl-size,40px);color:#a7b8a8;will-change:transform;transition:color .3s}
.rl-rider.dark{color:#efe8d8}
.rl-flip,.rl-fig{display:block;width:100%;height:100%}
.rl-fig{overflow:visible}
.rl-rider.moving .rl-fig{animation:rl-bob .34s ease-in-out infinite alternate}
.rl-rider[data-sport=surfer].moving .rl-fig{animation:rl-rock .6s ease-in-out infinite alternate}
/* kayak and paddleboard: a stroke left, a stroke right, while you scroll (the paddle is part of the shape) */
.rl-rider[data-sport=kayaker].moving .rl-fig,.rl-rider[data-sport=paddleboarder].moving .rl-fig{animation:rl-stroke .5s ease-in-out infinite alternate}
/* runners: a quick running bounce with a forward lean (their legs are part of the shape) */
.rl-rider[data-sport^=runner].moving .rl-fig{animation:rl-run .26s ease-in-out infinite alternate}
@keyframes rl-run{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-12%) rotate(4deg)}}
@keyframes rl-stroke{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
/* the cyclist doesn't bob: his wheels turn instead */
.rl-rider[data-sport=cyclist].moving .rl-fig{animation:none}
.rl-spokes{transform-box:view-box}.rl-spokes line{stroke:currentColor;stroke-width:26;stroke-linecap:round}
.rl-rider.moving .rl-spokes{animation:rl-spin .45s linear infinite}
@keyframes rl-spin{to{transform:rotate(360deg)}}
@keyframes rl-bob{from{transform:translateY(0)}to{transform:translateY(-7%)}}
@keyframes rl-rock{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.rl{display:none}}
.testimonials{overflow-x:clip}
.pk-sub{font-family:Archivo,var(--serif);font-weight:700;font-stretch:112%;letter-spacing:-.02em;font-size:clamp(1.15rem,1.8vw,1.45rem);margin:.5rem 0 0;color:var(--ink-2)}
/* create page on a phone: nothing moves sideways, ever (Marco, 3 Oct 2026). clip, not hidden, so the
   pinned print still sticks; pan-y keeps vertical scrolling and pinch zoom but drops sideways drags */
html:has(.create),html:has(.create) body{overflow-x:clip;overscroll-behavior-x:none}
@media (max-width:900px){.create{touch-action:pan-y pinch-zoom}.create .wrap{max-width:100vw}}
/* every colour picker on a phone (Marco, 3 and 5 Oct 2026): as on the create page, split down the
   middle, the print small on the left and the options down the right, and only a few colourways,
   with Make your own last */
@media (max-width:720px){
  .picker .two{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:14px;align-items:start}
  .picker .pk-stage{position:sticky;top:72px;margin:0;padding:0;background:none;z-index:1}
  .picker .pk-stage .wall{padding:6px}.picker .pk-stage .pframe{padding:3px}
  .picker .pk-stage .pframe img{width:100%;height:auto;max-width:100%}
  .picker h2{font-size:1.5rem}.picker .pk-sub{font-size:1rem}
  .picker .pills{flex-wrap:wrap;overflow:visible;margin:0;padding:0;gap:6px}
  .picker .opt-pill{margin:0}.picker .opt-pill span{font-size:.8rem;padding:.4rem .55rem;min-height:0}
  .picker .swatches{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px}
  .picker .swatches .sw:nth-child(n+6):not(.custom):not(:has(input:checked)){display:none}
  .picker .sw .nm{font-size:.68rem}
  .picker .pk-lean{flex-direction:column;align-items:stretch;gap:.8rem}.picker .pk-lean .btn{justify-content:center}
  .picker .pk-buy{flex-direction:column;align-items:stretch;gap:.7rem}.picker .pk-buy .btn{justify-content:center}
  .picker fieldset{margin-top:1rem}
}
/* the route line needs a margin to run in: none on phones and small screens */
@media (max-width:759px){.rl{display:none}}
/* narrower desktops: the homepage content steps in so the line has a margin of at least 84 px */
@media (min-width:760px){.rl-on #main .wrap{padding-left:max(24px,calc(84px - max(0px,(100vw - var(--max)) / 2)));padding-right:max(24px,calc(84px - max(0px,(100vw - var(--max)) / 2)))}}
/* v2 runs across the whole page: clipped at its edges so it can leave the page without a scrollbar */
.rl-wide{width:100%;overflow:hidden}
.pk-stage .zoomhint{margin-top:.6rem}@media (max-width:720px){.picker .pk-stage .zoomhint{font-size:.7rem;line-height:1.25;text-align:center}}
.testimonials.alt .tcard.text{background:#fff}
.rl-wave{fill:none;stroke-linecap:round;opacity:0}
.rl-wave-body{stroke:none;fill:#a7b8a8;opacity:0}.rl-wave-body.dark{fill:#efe8d8}
/* Save your design: a small card on the create page, never in the way (Marco, 4 Oct 2026) */
.savecard{position:fixed;right:24px;bottom:24px;z-index:40;width:min(360px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:18px 18px 14px;transform:translateY(16px);opacity:0;transition:transform .3s ease,opacity .3s ease}
.savecard.in{transform:none;opacity:1}
.saveclose{position:absolute;top:6px;right:8px;border:0;background:none;font-size:1.3rem;line-height:1;color:var(--ink-3);cursor:pointer;padding:6px}
.saveclose:hover{color:var(--ink)}
.savehead{font-weight:700;font-size:1.05rem;margin:0 24px 4px 0}
.savetext{margin:0 0 12px;font-size:.92rem;color:var(--ink-2);line-height:1.45}
.saverow{display:flex;gap:8px}
.saverow input{flex:1;min-width:0;font:inherit;font-size:.95rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:6px;background:#fff}
.saverow .btn{padding:.55rem 1rem;white-space:nowrap}
.savenews{align-items:flex-start;font-weight:400;font-size:.82rem;color:var(--ink-2);line-height:1.4}
.savenews input{margin-top:2px;flex:none}
.savesmall{margin:8px 0 0;font-size:.78rem;color:var(--ink-3)}
.savesmall a{color:inherit}
.savesmall.err{color:var(--accent-ink)}
@media(min-width:1000px){.savecard{right:auto;left:24px}}
/* desktop: over the title boxes in The words, until it's answered */
.cstep{position:relative}
.savecard.over{position:absolute;left:0;right:0;bottom:auto;width:auto;z-index:5;padding:22px 24px 18px;box-shadow:0 16px 40px rgba(0,0,0,.14)}
.savecard.over .savetext{max-width:46ch}
.savego{display:block;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;margin-top:12px;font-size:.9rem}
@media(max-width:759px){.savecard{right:16px;bottom:16px;left:16px;width:auto}}
@media(prefers-reduced-motion:reduce){.savecard{transition:none}}
@media(max-width:759px){.switch{flex-wrap:wrap;row-gap:2px}.switch em{flex-basis:100%;padding-left:calc(38px + .7rem)}}
/* the footer on a phone: the brand, the five hubs and the category pages, nothing else (Marco, 5 Oct 2026) */
.fmob{display:none}
@media (max-width:700px){
  .site-footer{padding:36px 0 28px}
  .site-footer .fcols>div:not(:first-child){display:none}
  .site-footer .fcols{grid-template-columns:1fr;gap:0}
  .fmob{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
  .fmob .flegal{grid-column:1/-1;margin:4px 0 0;font-size:.82rem;color:var(--ink-3)}
  .site-footer .attr{font-size:.7rem}
}
.savegoogle{margin:0 0 10px;min-height:44px}.savegoogle[hidden]{display:none}
.sumoffer{color:var(--accent-ink);font-weight:600}
/* the hero eyebrow on one line on a phone: "Map prints from your own GPS" (Marco, 6 Oct 2026) */
@media (max-width:600px){.vhero .copy .eyebrow{white-space:nowrap;letter-spacing:.14em}.vhero .copy .eb-long{display:none}}
/* the route line on phones: a short ride above each section, once (tools/site/route-line.js) */
.rlm{position:absolute;left:0;top:-44px;width:100%;height:100px;overflow:hidden;overflow:clip;pointer-events:none;z-index:1;color:#a7b8a8}
.rlm-line{position:absolute;left:0;top:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 110px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 110px,#000 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--mw) 100%;mask-size:var(--mw) 100%;-webkit-mask-position:var(--x0) 0;mask-position:var(--x0) 0}
.rlm-line path{fill:none;stroke:#bfcbbf;stroke-width:2;stroke-linecap:round}
.rlm-rider{position:absolute;left:0;top:0;offset-distance:0%}
.rlm-rider>svg{display:block;width:100%;height:100%;overflow:visible}
@media (min-width:760px){.rlm{display:none}}
/* ...driven by the scroll: the rider crosses as the strip rises from the foot of the screen to about
   a fifth of the way down, slowly, drawing the line behind; then the line fades (Marco, 8 and 11 Oct 2026) */
@keyframes rlm-go{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes rlm-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}
@keyframes rlm-fade{from{opacity:1}to{opacity:0}}
.rlm.scroll{view-timeline:--rlm block}
.rlm.scroll .rlm-rider{animation:rlm-go linear both;animation-timeline:--rlm;animation-range:cover 4% cover 72%}
@keyframes rlm-trail{from{-webkit-mask-position:var(--x0) 0;mask-position:var(--x0) 0}to{-webkit-mask-position:var(--x1) 0;mask-position:var(--x1) 0}}
.rlm.scroll .rlm-line{animation:rlm-draw linear both,rlm-trail linear both,rlm-fade linear both;animation-timeline:--rlm,--rlm,--rlm;animation-range:cover 4% cover 72%,cover 4% cover 72%,cover 74% cover 86%}
/* more air between each step's rule and its number (Marco, 8 Oct 2026: "the line above is too close") */
.step{padding-top:28px}
@media (max-width:720px){.how .step{padding-top:16px}}
/* free delivery under every price, and the currency switch in the footer (Marco, 13 Oct 2026) */
.freedel{margin:.35rem 0 0;font-size:.88rem;color:var(--ink-2)}
.photo-bg .freedel,.band .freedel{color:rgba(255,255,255,.86)}
.fcur{margin:18px 0 0;font-size:.82rem;color:var(--ink-3)}
.fcur select{font:inherit;color:var(--ink-2);background:none;border:1px solid var(--line);border-radius:4px;padding:.2rem .4rem;margin-left:.3rem}
/* the launch price on unframed prints, said plainly next to it (Marco, 20 Oct 2026; Legal's rules:
   no crossed-out price, no countdown). Gone once the launch is over, even on an older page */
.lp{font-size:.62em;font-weight:500;color:var(--ink-2);letter-spacing:0;white-space:normal}
.pricebig .lp{display:inline-block;margin:0 .5em 0 .45em;vertical-align:middle;line-height:1.3;white-space:nowrap}
td .lp,dd .lp{display:block;font-size:.8rem;margin-top:2px}
#sumLaunch.lp{font-size:.82rem;color:var(--ink-2)}
.buybar .lp{font-size:.8em}
.photo-bg .lp,.band .lp{color:rgba(255,255,255,.86)}
.launch-over .lp{display:none}
/* dark wood (Marco, 16 Oct 2026; the artist's mockup face colour) and natural wood nearer Gelato's pale pine */
.pframe.f-darkwood{background:#4a3324}
/* the frame switcher on the map print page */
.frames .frameshot img{width:100%;height:auto;display:block}
.frames .pills{margin-top:1.2rem;flex-wrap:wrap}
#framePick .opt-pill{background:none;border:1px solid var(--line);cursor:pointer;font:inherit;padding:0}
#framePick .opt-pill span{display:block;padding:.6rem 1rem}
#framePick .opt-pill.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pricebig .nw{white-space:nowrap}
@media (max-width:600px){.pricebig .sep{display:none}.pricebig .nw{display:block;margin-top:.15rem}}