*{box-sizing:border-box}
.essential.travel-ticket{max-width:1040px;margin:40px auto 64px;padding:0;display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch;gap:0;background:#f3eee5;border:1px solid #50332f33;border-radius:6px;overflow:hidden}
.ticket-product{padding:36px;text-align:center;background:#756052;color:#f3eee5;position:relative;display:flex;flex-direction:column;align-items:center;align-self:stretch;min-width:0}
.ticket-kicker{font:11px/1.5 Arial,sans-serif;letter-spacing:.1em;color:#e4d7c7}
.ticket-product h2{font:40px/1.08 Georgia,serif;margin:18px 0 0;color:#f3eee5}
.ticket-product img{display:block;width:min(100%,320px);height:auto;object-fit:contain;margin:auto}
.ticket-size{font:14px/1.5 Georgia,serif;margin:0;padding-top:16px;border-top:1px solid #f3eee533;width:100%;color:#e4d7c7}
.ticket-offer{padding:32px;border-left:1px solid #50332f33;min-width:0}
.ticket-heading{font:30px/1.15 Georgia,serif;margin:0 0 24px}.ticket-heading em{font-weight:normal}
.ticket-packs{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ticket-packs li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid #50332f22;font:18px Georgia,serif}
.ticket-packs strong{font:italic 28px Georgia,serif;white-space:nowrap}
.ticket-packs .recommended{background:#50332f;color:#f0e5ce;border-radius:3px}
.ticket-packs small{display:block;font:11px/1.6 Arial,sans-serif;color:#e8c9c1;margin-top:3px}
.ticket-preview{font:12px/1.5 Arial,sans-serif;color:#756b62;margin:16px 0 24px}
.ticket-details details{border-top:1px solid #50332f22}
.ticket-details summary{cursor:pointer;min-height:48px;padding:14px 0;font:15px/1.5 Georgia,serif}
.ticket-details summary span{float:right;color:#756b62;font:12px/1.8 Arial,sans-serif;margin-left:8px}
.ticket-details p{font:14px/1.6 Arial,sans-serif;margin:0 0 16px;max-width:48ch}
.ticket-details summary:focus-visible{outline:2px solid #50332f;outline-offset:3px}
@media(max-width:1100px){.essential.travel-ticket{margin-inline:24px}}
@media(max-width:767px){.essential.travel-ticket{grid-template-columns:1fr;margin:24px 16px 40px}.ticket-product{padding:24px 20px 22px}.ticket-product h2{font-size:34px}.ticket-product img{width:min(100%,240px);margin:-8px auto -10px}.ticket-offer{padding:24px 20px;border-left:0;border-top:1px solid #50332f33}.ticket-heading{font-size:26px}.ticket-details summary span{font-size:11px}}
.how-loop{display:block;width:100%;aspect-ratio:15/16;object-fit:contain;background:#e7e3d8;border:1px solid #50332f33;border-radius:3px}
.video-grid article>p{font-size:15px;line-height:1.5;max-width:32ch}
.loop-toggle{margin-top:24px;min-height:44px;padding:8px 16px;border:1px solid #50332f66;background:transparent;color:#50332f;font:inherit;cursor:pointer}
.loop-toggle:focus-visible{outline:2px solid #50332f;outline-offset:4px}
body{margin:0;background:#f2f0e9;color:#252920;font:16px/1.6 Arial,sans-serif}
header,footer,.intro{padding:24px max(20px,env(safe-area-inset-left))}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #d4d0c5}
a{color:inherit;display:inline-flex;align-items:center;min-height:44px}
.intro{max-width:1000px;margin:auto;padding-top:40px}
h1{font:italic clamp(42px,8vw,80px)/1.05 Georgia;margin:12px 0 24px}
.eyebrow{font:12px monospace;letter-spacing:.15em}
.intro p,footer{color:#676a62}
.track{height:300svh}
.sticky{position:sticky;top:0;height:100svh;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 8px max(8px,env(safe-area-inset-bottom))}
.picture{position:relative;width:min(78vw,440px,calc(100svh - 245px));aspect-ratio:1;flex-shrink:0}
.picture img,.picture canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.picture canvas{visibility:hidden}.picture.ready canvas{visibility:visible}.picture.ready .fallback{visibility:hidden}
.reduced{display:none}
a:focus-visible{outline:3px solid #849677;outline-offset:3px}
.status{font-size:14px;color:#676a62;margin:8px 0 0;text-align:center;max-width:600px}
footer{min-height:45svh;max-width:1000px;margin:auto}
@media(min-width:768px){header,footer,.intro{padding-left:6vw;padding-right:6vw}.sticky{padding:24px}}
@media(min-width:1024px){.intro{padding-top:56px}}
@media(max-height:500px) and (orientation:landscape){.picture{width:min(100%,calc(100svh - 32px))}}
@media(prefers-reduced-motion:reduce){.track{height:auto}.sticky{position:relative;height:auto;min-height:0}.picture{width:min(78vw,440px)}.reduced{display:block}.picture canvas,.fallback{display:none}}
/* Brand landing page: small source imagery, generous editorial typography. */
body{background-image:radial-gradient(#25292009 .7px,transparent .9px);background-size:12px 12px;color:#24241f}
header{max-width:1200px;margin:auto;padding:18px 24px}
.brand{font-size:18px;font-weight:800;letter-spacing:-.06em;text-decoration:none}
nav{display:flex;gap:20px;font-size:14px}nav a{text-decoration:none}
.intro{max-width:1120px;padding:56px 24px 28px;display:grid;gap:32px}
h1{font:clamp(64px,12vw,124px)/.92 Georgia,serif;letter-spacing:-.055em;margin:24px 0}
h1 em,h2 em{font-weight:400}.lede{font-size:18px;line-height:1.55}
.text-link{font-size:14px;text-underline-offset:7px}
.postcard{position:relative;margin:12px auto;background:#e8e4da;width:min(86%,380px);padding:16px;transform:rotate(3deg);box-shadow:3px 6px 0 #24241f0c}
.postcard img{display:block;width:100%;height:auto;max-width:300px;margin:auto}
figcaption{border-top:1px solid #c5c0b3;padding-top:12px;display:flex;justify-content:space-between;gap:12px;font:10px/1.5 monospace}
.tape{position:absolute;width:94px;height:28px;background:#d6cebba6;left:calc(50% - 47px);top:-12px;transform:rotate(-8deg)}
.hero-note{font:italic 17px Georgia;text-align:right;margin:12px 0}
.track{border-block:1px solid #d4d0c5}
.sticky{gap:12px}
.motion-copy{text-align:center;padding:0 12px}
h2{font:clamp(32px,5vw,56px)/1.13 Georgia,serif;letter-spacing:-.035em;margin:14px 0 20px}
.motion-copy h2{font-size:clamp(26px,4vw,42px)}
.scroll-note{font:12px monospace;color:#676a62;margin:8px 0}
.status:empty{display:none}
.collection,.essential{max-width:1120px;margin:auto;padding:64px 24px}
.collection-heading{margin-bottom:32px}
.collection-grid{display:grid;gap:20px}
.live-card a{display:block;text-decoration:none}.card-art{background:#e8e4da;display:grid;place-items:center;padding:24px}.card-art img{width:min(100%,280px);height:auto;display:block}
.card-label{display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid #cdc9bd}.card-label h3{flex:1}
h3{font-size:17px;font-weight:400;line-height:1.4;margin:0}.card-label>span{font:12px monospace}
.soon-card{min-height:220px;background:#ddd8ca;padding:24px;display:flex;justify-content:space-between;flex-direction:column}.edition{font:italic 70px/1 Georgia;color:#807c7055}.soon-card p{font:12px monospace;margin:10px 0 0}.dark{background:#353b31;color:#f2f0e9}.dark .edition{color:#f2f0e944}
.essential{border-top:1px solid #cdc9bd;display:grid;gap:16px}.essential-note>p:first-child{font:22px/1.5 Georgia}.preview-note{font-size:12px;color:#676a62;max-width:280px}
footer{max-width:1120px;min-height:0;padding:28px 24px max(28px,env(safe-area-inset-bottom));border-top:1px solid #cdc9bd;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:start}footer p{font:italic 16px Georgia}footer small{flex-basis:100%;font-size:11px}
@media(min-width:768px){.intro{grid-template-columns:1.15fr 1fr;align-items:center;padding-top:80px;padding-bottom:56px}.hero-note{grid-column:1/-1}.collection-grid{grid-template-columns:1fr 1fr}.live-card{grid-column:1/-1}.essential{grid-template-columns:1fr 1fr}.essential-note{align-self:center}}
@media(min-width:1024px){.collection-grid{grid-template-columns:1.5fr 1fr 1fr}.live-card{grid-column:auto}.soon-card{min-height:330px}.intro{min-height:650px}}
@media(max-height:500px) and (orientation:landscape){.sticky{flex-direction:row;gap:24px}.motion-copy{max-width:48%}.motion-copy h2{font-size:26px}.picture{width:min(40vw,300px,calc(100svh - 48px))}}
/* Reference direction: blue painted facade, oxblood sign, cream lettering. */
:root{--facade:#879aa9;--sign:#50332f;--cream:#f0e5ce;--iron:#253744;--plaster:#e7e3d8}
body{background-color:var(--facade);color:var(--iron);background-image:radial-gradient(#23364615 .7px,transparent 1px),linear-gradient(90deg,#f6f0de09,transparent 50%,#21374308);background-size:7px 9px,100% 100%}
header{max-width:none;padding:22px max(24px,calc((100vw - 1072px)/2));border-bottom:1px solid #25374455;background:#758a9c}
header .brand{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--sign);color:var(--cream);padding:12px 24px;box-shadow:0 3px 0 #2e2526,0 7px 14px #22313a22;outline:1px solid #af948066;outline-offset:-5px;min-width:200px}
header .brand:before,header .brand:after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:#b9aa95;top:50%}header .brand:before{left:10px}header .brand:after{right:10px}
header .brand span{font:italic 28px/1.1 Georgia,serif;letter-spacing:-1px}
header .brand small{font:8px/1.5 Arial,sans-serif;letter-spacing:1.6px;margin-top:5px}
nav a{font:italic 16px Georgia,serif;color:var(--iron)}
.intro{position:relative;gap:36px;padding-top:60px;padding-bottom:36px}
.eyebrow{font:10px/1.6 Arial,sans-serif;letter-spacing:2px;color:var(--iron)}
h1{color:var(--cream);text-shadow:0 2px 0 #25374433;font-weight:400}
h1 em{color:var(--sign)}
.intro p{color:var(--iron)}
.lede{font:20px/1.5 Georgia,serif}
.text-link{color:var(--sign);font:italic 16px Georgia,serif;text-decoration-color:#50332f88}
.postcard{background:var(--plaster);border:7px solid #526879;outline:1px solid #c2c9c577;outline-offset:5px;transform:rotate(-2deg);border-radius:160px 160px 3px 3px;padding:40px 20px 18px;box-shadow:8px 10px 0 #25374415}
.postcard img{max-width:250px}.tape{display:none}
figcaption{border-color:#50332f44;color:var(--sign);font-family:Georgia,serif}
.hero-note{border-top:1px solid #25374444;padding-top:20px}
.track{background:var(--plaster);border-top:8px solid var(--iron);border-bottom:1px solid #25374455;position:relative}
.motion-copy .eyebrow{color:#76685c}.motion-copy h2{color:var(--sign)}
.scroll-note{color:#76685c}
.collection{padding-top:72px;padding-bottom:72px}
.collection-heading h2{color:var(--cream)}.collection-heading h2 em{color:var(--sign)}
.collection-grid{gap:24px}
.live-card{background:var(--plaster);padding:12px;border:1px solid #25374466;box-shadow:4px 5px 0 #25374416}
.card-art{background:transparent;min-height:250px}.card-art img{max-width:235px}
.card-label{border-bottom:0;border-top:1px solid #50332f55;padding:18px 4px;color:var(--sign)}
.soon-card{background:#748a9a;border:1px solid var(--iron);border-radius:140px 140px 0 0;padding:32px 24px 24px;min-height:290px;position:relative;align-items:center;text-align:center;box-shadow:inset 0 0 0 6px #879aa9}
.edition{font:italic 76px/1.4 Georgia;color:#25374477}.soon-card h3{font:23px/1.2 Georgia;color:var(--iron)}.soon-card p{color:var(--iron)}
.dark{background:var(--sign);box-shadow:inset 0 0 0 6px #644642;border-color:#392724}.dark .edition{color:#e7d7bd66}.dark h3,.dark p{color:var(--cream)}
.essential{background:var(--plaster);max-width:none;padding:56px max(24px,calc((100vw - 1072px)/2));border-top:1px solid var(--iron);color:var(--sign)}
.essential .eyebrow{color:#76685c}.preview-note{color:#76685c}
footer{max-width:none;padding:32px max(24px,calc((100vw - 1072px)/2)) max(32px,env(safe-area-inset-bottom));background:var(--sign);color:var(--cream);border-top:5px solid #382b2a}
footer .brand{font:italic 27px Georgia;letter-spacing:-1px}footer small{color:#c3af9f}footer p{color:#d4c2aa}
a:focus-visible{outline:3px solid #e8d3ad;outline-offset:5px}
@media(max-width:480px){header{padding:16px 20px;gap:16px}header .brand{min-width:180px;padding:12px 20px}header .brand span{font-size:25px}nav{gap:16px;width:100%;justify-content:space-between}nav a{min-height:44px}.intro{padding-top:36px}.postcard{width:min(84%,320px)}.collection{padding-top:48px}.soon-card{min-height:260px}}
/* Finishing pass: painted joinery, restrained brass details, clear reading rhythm. */
:root{--brass:#ae9472;--measure:1072px}
html{scroll-padding-top:20px}
::selection{background:var(--sign);color:var(--cream)}
.skip-link{position:fixed;top:-100px;left:16px;z-index:10;padding:8px 16px;background:var(--cream);color:var(--sign)}
.skip-link:focus{top:12px}
header{border-bottom:3px double #25374466;box-shadow:0 1px 0 #d4dddf44}
header .brand{border-radius:2px;background-image:linear-gradient(165deg,#ffffff08,transparent 55%,#00000012)}
nav a{padding:0 8px;text-underline-offset:6px;text-decoration-thickness:1px}
nav a:focus-visible{outline-color:var(--sign)}
.intro{column-gap:64px}
.intro .eyebrow{max-width:300px;font-size:11px;letter-spacing:1.6px}
.intro .text-link{margin-top:10px;border:1px solid #50332f66;border-radius:2px;padding:10px 18px;text-decoration:none;background:#f0e5ce18}
.postcard{transform:rotate(-1.2deg);padding-top:42px;border-width:5px;box-shadow:0 12px 22px #25374416,inset 0 0 0 1px #b8a78c77}
.postcard:before{content:'';position:absolute;inset:10px;border:1px solid #50332f30;border-radius:inherit;pointer-events:none}
figcaption{position:relative;font-size:11px;line-height:1.5;padding-top:16px;align-items:end}
figcaption span:last-child{font-style:italic;white-space:nowrap}
.hero-note{display:flex;gap:18px;align-items:center;justify-content:flex-end;border:0;font-size:16px}
.hero-note:before{content:'';height:1px;background:#25374444;flex:1}
.track{border-top:4px double var(--iron);background-image:linear-gradient(90deg,transparent calc(50% - 536px),#50332f12 calc(50% - 536px),#50332f12 calc(50% - 535px),transparent calc(50% - 535px),transparent calc(50% + 535px),#50332f12 calc(50% + 535px),#50332f12 calc(50% + 536px),transparent calc(50% + 536px))}
.motion-copy .eyebrow:before,.motion-copy .eyebrow:after{content:'';display:inline-block;width:24px;height:1px;background:var(--brass);vertical-align:middle;margin:0 12px}
.motion-copy h2{line-height:1.2;margin-bottom:16px}
.scroll-note{letter-spacing:1px;font-size:11px}
.collection-heading{display:flex;flex-direction:column;border-bottom:1px solid #25374444;padding-bottom:24px;margin-bottom:32px}
.collection-heading h2{margin-bottom:0}
.live-card{border-radius:160px 160px 3px 3px;position:relative;padding:20px 16px 4px;box-shadow:0 6px 14px #25374413}
.card-art{min-height:270px}.card-label{gap:12px;min-height:86px}.card-label h3{font:22px/1.2 Georgia,serif}
.card-label>span:last-child{display:grid;place-items:center;width:36px;height:36px;border:1px solid #50332f55;border-radius:50%;font-size:18px;flex-shrink:0}
.soon-card{box-shadow:inset 0 0 0 5px #879aa9,inset 0 0 0 6px #25374444;min-height:310px;padding-bottom:26px}
.soon-card>div{border-top:1px solid #25374444;padding-top:20px;width:100%}
.soon-card p{font:11px/1.5 Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase}
.dark{box-shadow:inset 0 0 0 5px #644642,inset 0 0 0 6px #d3b89655}.dark>div{border-top-color:#d3b89655}
.essential{border-top:4px double #50332f66;padding-top:64px;padding-bottom:64px}
.essential-note{border-left:1px solid #50332f33;padding-left:32px}
.preview-note{padding-top:18px;border-top:1px solid #50332f22;line-height:1.6}
footer{border-top:4px double #c1a78a88}footer>a{font:italic 16px Georgia}footer small{border-top:1px solid #c3af9f33;padding-top:20px;letter-spacing:.3px}
a:focus-visible{outline-color:var(--iron)}footer a:focus-visible{outline-color:var(--cream)}
@media(hover:hover){nav a:hover{text-decoration:underline}.intro .text-link:hover{background:var(--sign);color:var(--cream)}.live-card a:hover .card-label>span:last-child{background:var(--sign);color:var(--cream)}}
@media(min-width:768px){.collection-heading{flex-direction:row;align-items:end;justify-content:space-between}.collection-heading>.eyebrow{order:2}.live-card{max-width:520px;width:100%;justify-self:center}.collection-grid{align-items:stretch}}
@media(max-width:767px){.intro{gap:24px;padding-bottom:24px}.postcard{width:min(82%,300px);margin-top:8px}.postcard img{max-width:220px}h1{font-size:clamp(66px,15vw,94px)}.hero-note{margin-bottom:0}.collection,.essential{padding:44px 24px}.collection-grid{grid-template-columns:1fr 1fr;gap:16px}.live-card{grid-column:1/-1}.soon-card{min-height:215px;padding:22px 12px 20px;border-radius:90px 90px 0 0}.edition{font-size:48px}.soon-card h3{font-size:19px}.soon-card p{font-size:10px;letter-spacing:.6px}.essential-note{padding-left:0;border-left:0}.motion-copy h2{font-size:26px}.motion-copy .eyebrow{letter-spacing:1px}.motion-copy .eyebrow:before,.motion-copy .eyebrow:after{width:14px;margin-inline:7px}}
@media(prefers-reduced-motion:reduce){.sticky{padding-block:32px}}
/* A restrained second reference: faded pink-and-cream seaside facades. */
:root{--blush:#dcaeaa;--blush-light:#e8c9c1}
header .brand{outline-color:#dcaeaa66}
.intro .text-link{background:var(--blush-light);border-color:#50332f55;box-shadow:0 2px 0 #50332f12}
.postcard{background-color:#eee7dd;background-image:linear-gradient(to bottom,transparent 0 35%,#dcaeaa88 35% 53%,transparent 53% 100%);border-color:#647b8b;box-shadow:0 12px 22px #25374416,inset 0 0 0 1px #dcaeaa88}
.postcard:before{border-color:#50332f25}
.hero-note:before{background:linear-gradient(90deg,#25374433 0 86%,var(--blush) 86% 100%)}
.motion-copy .eyebrow:before,.motion-copy .eyebrow:after{background:#b8807b}
.collection-heading h2{color:var(--cream)}
.soon-card:not(.dark){background:var(--blush-light);border-color:#765953;box-shadow:inset 0 0 0 5px #e8c9c1,inset 0 0 0 6px #76595344}
.soon-card:not(.dark) .edition{color:#50332f66}
.soon-card:not(.dark) h3,.soon-card:not(.dark) p{color:var(--sign)}
.soon-card:not(.dark)>div{border-top-color:#76595344}
.card-label>span:last-child{background:#e8c9c177;border-color:#b8807b88}
.essential{border-top-color:#b8807b77}
footer{border-top-color:var(--blush)}
@media(hover:hover){.intro .text-link:hover{background:var(--sign);color:var(--cream)}}

/* --- Roadmap cards are not products -------------------------------------
   02 and 03 do not exist yet. Rendering them at the same size and in the same
   arch-card language as the one real product reads as "three products", and
   gave two placeholders ~57% of the collection row. Keep them as a quieter
   secondary tier: shorter, lighter numerals, bottom-aligned under the one
   item that can actually be bought. */
@media(min-width:1024px){
  .collection-grid{grid-template-columns:2fr 1fr 1fr;align-items:end}
  .live-card{max-width:none}
  .soon-card{min-height:210px}
}
@media(min-width:768px){
  .soon-card{align-self:end}
}
.soon-card .edition{font-size:40px;line-height:1.1}
.soon-card p{opacity:.75}
/* Unframed colour composition; white-backed artwork blends into warm paper. */
.intro.hero-palette{max-width:none;background:#f3eee5;isolation:isolate;overflow:hidden;padding:56px max(24px,calc((100vw - 1120px)/2));gap:24px;border-bottom:1px solid #50332f22}
.hero-palette .hero-message{position:relative;z-index:1}
.hero-palette .hero-message h1{color:var(--iron);text-shadow:none}
.hero-palette .hero-message h1 em{color:var(--sign)}
.hero-colour-art{position:relative;margin:0;min-width:0;align-self:center}
.hero-colour-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply;transform:rotate(-7deg);transform-origin:center}
.hero-colour-art figcaption{border:0;display:block;text-align:right;padding:12px 16px 0;font:16px/1.5 Georgia,serif;color:var(--sign)}
.hero-colour-art figcaption em{display:block;color:#726358}
@media(min-width:768px){.intro.hero-palette{grid-template-columns:1fr 1.12fr;padding-top:64px;padding-bottom:64px;gap:36px}.hero-colour-art{margin:0 -8px 0 0}.hero-palette .hero-message h1{font-size:clamp(50px,6vw,82px)}}
@media(max-width:767px){.intro.hero-palette{padding:32px 24px 36px;gap:20px}.hero-colour-art{width:min(100%,420px);justify-self:center}.hero-colour-art figcaption{font-size:14px;padding-top:0}.hero-palette .hero-message h1{font-size:clamp(42px,10.8vw,62px)}}
/* Product-first hero: a clear open/folded contrast instead of a small framed object. */
.hero-reveal{max-width:1200px;grid-template-columns:1fr;gap:28px;padding:36px 24px 44px;min-height:0}
.hero-message h1{font-size:clamp(45px,9vw,88px);line-height:1.03;letter-spacing:-.055em;margin:0 0 20px}
.hero-message h1 em{display:inline-block}
.hero-message .lede{font:18px/1.55 Georgia,serif;margin:0 0 24px;max-width:340px}
.hero-action{display:inline-flex;justify-content:space-between;align-items:center;gap:28px;padding:14px 20px;background:var(--sign);color:var(--cream);text-decoration:none;border-radius:3px;min-height:52px;font-size:15px;box-shadow:0 3px 0 #382b2a}
.hero-action span{font-size:20px}.hero-action:focus-visible{outline-color:var(--cream)}
.hero-comparison{position:relative;isolation:isolate;margin:0;width:100%;max-width:520px;justify-self:center;padding:12px 0 0}
.hero-open{width:83%;margin-left:auto;background:var(--plaster);border-radius:48% 48% 4px 4px;padding:20px 12px 24px;text-align:center;border:1px solid #f0e5ce88}
.hero-open img{display:block;width:100%;max-width:330px;height:auto;margin:auto}
.hero-open>span,.hero-folded>span{display:block;font:italic 17px/1.4 Georgia,serif;color:var(--sign)}
.hero-folded{position:absolute;bottom:50px;left:0;width:36%;padding:10px 8px 14px;background:var(--blush-light);border:1px solid #50332f22;border-radius:3px;transform:rotate(-5deg);text-align:center;box-shadow:3px 5px 0 #25374410}
.hero-folded img{width:100%;height:auto;display:block}
.hero-folded>span{font-size:15px}
.hero-comparison figcaption{padding:18px 0 0;margin-left:20%;border:0;font:15px/1.5 Georgia,serif;color:var(--iron);text-align:center;display:block}
@media(min-width:768px){.hero-reveal{grid-template-columns:1fr 1fr;gap:28px;padding:64px 32px}.hero-message h1{font-size:clamp(52px,6.5vw,88px)}.hero-message{align-self:center}}
@media(max-width:480px){.hero-reveal{gap:24px;padding-top:28px}.hero-message h1{font-size:clamp(43px,10.8vw,52px)}.hero-message .lede{font-size:17px;margin-bottom:18px}.hero-action{min-height:48px}.hero-comparison{max-width:350px}.hero-open{padding-top:12px;padding-bottom:18px}.hero-folded{bottom:46px}.hero-open>span{font-size:16px}.hero-comparison figcaption{font-size:14px}}
@media(hover:hover){.hero-action:hover{background:#65413b}}
.soon-card{justify-content:flex-end}
.editorial-story,.palette-story{max-width:1120px;margin:auto;padding:56px 24px;display:grid;gap:28px;align-items:center}
.editorial-photo,.palette-photo{margin:0;min-width:0}
.editorial-photo{padding:8px;background:var(--cream);border:1px solid #50332f33;box-shadow:4px 5px 0 #25374412}
.editorial-photo img,.palette-photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.editorial-copy{min-width:0}.editorial-copy h2{color:var(--sign)}
.editorial-copy>p{max-width:340px;font-size:16px;line-height:1.7}
.palette-story{border-top:1px solid #25374433}
.palette-photo{padding:8px;background:#fff;border:1px solid #50332f22;border-radius:3px}
.palette-names{display:flex;flex-wrap:wrap;gap:14px 18px;list-style:none;margin:24px 0;padding:0;max-width:360px}
.palette-names li{display:flex;gap:8px;align-items:center;font-size:14px}
.palette-names i{width:16px;height:16px;background:var(--swatch);border:1px solid #25374444;border-radius:50%;display:inline-block;flex-shrink:0}
.editorial-copy .palette-disclaimer{font-size:13px;line-height:1.6;color:var(--iron)}
@media(min-width:768px){.editorial-story,.palette-story{grid-template-columns:1fr 1fr;gap:48px;padding-block:72px}.editorial-photo{max-width:440px}.palette-photo{max-width:440px;justify-self:end}.editorial-copy{max-width:420px}}
@media(max-width:767px){.editorial-story,.palette-story{padding-block:36px}.editorial-photo,.palette-photo{width:min(100%,380px);justify-self:center}.editorial-copy h2{font-size:34px}.palette-story{gap:20px}}
.postcard{
  background:#e7e3d8;
  border:1px solid #f0e5ce88;
  outline:none;
  transform:none;
  border-radius:48% 48% 8px 8px;
  padding:36px 24px 28px;
  box-shadow:0 8px 20px #2537440c;
}
.postcard:before{display:none}
.postcard:after{
  content:'';
  display:block;
  width:36px;
  height:2px;
  background:#c89590;
  margin:12px auto 0;
}
/* Higher-detail motion: keep source pixels dense and spread motion over 3 screens. */
.track{height:400svh}
.picture{width:min(76vw,400px,calc(100svh - 245px))}
@media(max-height:500px) and (orientation:landscape){.picture{width:min(40vw,300px,calc(100svh - 48px))}}
@media(prefers-reduced-motion:reduce){.track{height:auto}.picture{width:min(76vw,400px)}}
/* One continuous scene: the grey product travels first, then unfolds. */
.hero-colours{max-width:380px;margin-top:24px}
.hero-colours ul{list-style:none;display:grid;grid-template-columns:repeat(3,max-content);gap:12px 22px;padding:0;margin:0}
.hero-colours li{display:flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap}
.hero-colours i{display:block;width:12px;height:12px;border-radius:50%;background:var(--swatch);border:1px solid #50332f22}
.hero-colours p{font:16px/1.5 Georgia,serif;color:var(--sign);margin:14px 0 0}.hero-colours p span{font:13px/1.5 Arial,sans-serif;color:#756b62}
@media(max-width:767px){.hero-colours{margin-top:16px}.hero-colours ul{gap:8px 14px}.hero-colours li{font-size:13px}.hero-colours p{font-size:14px;margin-top:10px}}
@media(min-width:768px) and (max-width:1023px) and (orientation:portrait){.hero-colours{margin-inline:auto}.hero-colours ul{justify-content:center}}
.hero-header{background:#f3eee5;border:0;box-shadow:none;padding:16px 6%;gap:12px;flex-wrap:nowrap}
.hero-header .brand{background:none;color:var(--sign);border:0;border-radius:0;outline:0;box-shadow:none;min-width:0;padding:0;min-height:44px}
.hero-header .brand:before,.hero-header .brand:after{display:none}
.hero-header .brand span{font:italic 27px/1.1 Georgia,serif;white-space:nowrap;letter-spacing:-1px}
.hero-header nav{width:auto;gap:24px;flex-wrap:nowrap}
.hero-header nav a{white-space:nowrap;min-height:44px;padding:0;color:var(--sign)}
@media(max-width:767px){.hero-header{padding:10px 6%;gap:10px}.hero-header .brand span{font-size:23px}.hero-header nav{gap:14px}.hero-header nav a{font-size:14px}}
.colour-journey{--travel:0;--fade:0;--title:0;background:#f3eee5;border:0;height:auto;isolation:isolate}
.colour-journey .sticky{height:850px;position:relative;display:block;overflow:hidden;padding:0;background:#f3eee5}
.colour-journey.enhanced{height:400svh}
.colour-journey.enhanced .sticky{position:sticky;height:100svh;min-height:580px}
.colour-journey .hero-message{position:absolute;left:6%;top:12%;width:40%;z-index:3;opacity:calc(1 - var(--fade));transform:translateY(calc(-30px * var(--fade)))}
.colour-journey h1{color:var(--iron);text-shadow:none;font-size:clamp(46px,6vw,84px)}
.colour-journey .picture{position:absolute;left:50%;top:56%;width:min(38vw,400px,52svh);transform:translate(-50%,-50%) translateX(calc(24vw * (1 - var(--travel)))) translateY(calc(-3svh * (1 - var(--travel)))) scale(calc(.66 + .34 * var(--travel)));z-index:2;will-change:transform}
.colour-orbit{position:absolute;left:52%;top:12%;width:44%;height:72%;opacity:calc(1 - var(--fade));transform:translateY(calc(-24px * var(--fade)));pointer-events:none;mix-blend-mode:multiply}
.colour-cutout{position:absolute;width:42%;aspect-ratio:1;background-image:url('editorial/palette.png');background-repeat:no-repeat;background-size:300% 300%}
.mustard{left:0;top:0;aspect-ratio:420/460;background-size:298.57% 272.61%;background-position:4.8% 23.3%;transform:rotate(-14deg);clip-path:polygon(0 0,100% 0,100% 68%,43% 100%,0 100%)}
.pink{right:0;top:0;aspect-ratio:440/435;background-size:285% 288.28%;background-position:54.67% 21.98%;transform:rotate(12deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 60%)}
.black{left:0;bottom:0;aspect-ratio:485/465;background-size:258.56% 269.68%;background-position:14.3% 71.61%;transform:rotate(10deg);clip-path:polygon(52% 0,100% 34%,100% 67%,76% 100%,0 100%,0 46%)}
.olive{right:0;bottom:0;aspect-ratio:510/520;background-size:245.88% 241.15%;background-position:75.94% 83.1%;transform:rotate(-12deg);clip-path:polygon(36% 0,100% 0,100% 100%,0 100%,0 46%)}
.colour-journey .motion-copy{position:absolute;left:0;top:12%;width:100%;opacity:var(--title);pointer-events:none}
.mustard{clip-path:polygon(0 0,96% 0,96% 43%,100% 62%,96% 70%,43% 100%,0 100%)}
.pink{clip-path:polygon(57% 0,73% 3%,97% 48%,97% 62%,42% 100%,25% 100%,9% 77%,0 53%,0 42%)}
.black{clip-path:polygon(56% 0,100% 34%,94% 61%,57% 94%,39% 100%,16% 87%,0 61%,16% 32%)}
.olive{clip-path:polygon(40% 0,78% 14%,100% 42%,100% 49%,55% 100%,40% 100%,5% 70%,0 47%,18% 24%)}
.colour-journey .journey-note{position:absolute;bottom:5%;width:100%;text-align:center;font:italic 15px Georgia;color:var(--sign);opacity:calc(1 - var(--fade))}
.colour-journey .status{position:absolute;bottom:2%;width:100%}
.unfold-anchor{position:absolute;top:22%;left:0}
.how-to{max-width:1120px;margin:auto;padding:72px 24px}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:28px}.section-heading h2{color:var(--cream)}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.video-slot{aspect-ratio:3/4;background:#e8c9c1;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid #50332f33;outline:1px solid #50332f22;outline-offset:-10px}
.video-grid article:nth-child(2) .video-slot{background:#e7e3d8}.video-grid article:nth-child(3) .video-slot{background:#b9c3c8}
.video-slot>span{font:italic 58px Georgia;color:#50332f66}.video-slot p{font-size:14px;color:var(--sign)}.video-grid h3{font:24px Georgia;margin-top:18px}
.purchase{align-items:center}.purchase-art img{display:block;width:min(100%,360px);height:auto;margin:auto}.purchase-state{font-size:14px;border-top:1px solid #50332f33;padding-top:20px;max-width:340px}
@media(max-width:767px){
 .colour-journey.enhanced .sticky{min-height:620px}
 .colour-journey .hero-message{left:7%;top:5%;width:86%}
 .colour-journey h1{font-size:clamp(40px,10.8vw,62px);margin-bottom:14px}
 .colour-journey .lede{font-size:17px;line-height:1.4;margin-bottom:14px}
 .colour-journey .hero-action{padding:8px 16px;min-height:44px}
 nav{gap:8px}nav a{font-size:14px;white-space:nowrap;padding:0}
 .colour-orbit{left:7%;top:43%;width:86%;height:33%}
 .colour-cutout{width:30%}
 .colour-orbit .mustard{left:2%;top:0;transform:rotate(-8deg)}
 .colour-orbit .pink{right:0;top:5%;transform:rotate(6deg)}
 .colour-orbit .black{left:0;bottom:0;transform:rotate(4deg)}
 .colour-orbit .olive{right:3%;bottom:-3%;transform:rotate(-6deg)}
 .colour-journey .picture{width:min(76vw,360px,48svh);top:56%;transform:translate(-50%,-50%) translateY(calc(3svh * (1 - var(--travel)))) scale(calc(.53 + .47 * var(--travel)))}
 .colour-journey .motion-copy{top:17%}.colour-journey .motion-copy h2{font-size:27px}
 .colour-journey .journey-note{bottom:18%}
 .section-heading{display:block}.section-heading h2{margin-bottom:12px}
 .how-to{padding:44px 24px}.video-grid{grid-template-columns:1fr;gap:32px}.video-slot{aspect-ratio:4/3}.video-grid h3{margin-top:12px}
}
@media(max-height:540px) and (orientation:landscape){
 .colour-journey.enhanced .sticky{min-height:0}
 .colour-journey .hero-message{left:5%;top:8%;width:42%}.colour-journey h1{font-size:36px}.colour-journey .lede{font-size:15px}
 .colour-orbit{left:53%;top:5%;width:40%;height:85%}.colour-cutout{width:36%}
 .colour-journey .picture{width:60svh;top:60%;transform:translate(-50%,-50%) translateX(calc(23vw * (1 - var(--travel)))) scale(calc(.62 + .38 * var(--travel)))}
 .colour-journey .motion-copy{top:0}.colour-journey .motion-copy h2{font-size:24px}.colour-journey .journey-note{display:none}
}
@media(min-width:768px) and (max-width:1023px) and (orientation:portrait){
 .colour-journey .hero-message{left:8%;top:6%;width:84%;text-align:center}.colour-journey h1{font-size:60px}.colour-journey .lede{margin:0 auto 20px}
 .colour-orbit{left:20%;top:40%;width:60%;height:42%}.colour-cutout{width:36%}
 .colour-journey .picture{width:360px;transform:translate(-50%,-50%) translateY(calc(6svh * (1 - var(--travel)))) scale(calc(.6 + .4 * var(--travel)))}
 .colour-journey .journey-note{bottom:9%}
}
/* Cap the composition, not just the canvas: all five products share a scale. */
@media(min-width:768px) and (min-height:541px){
 .colour-orbit{left:74%;top:53%;width:min(44vw,520px,70svh);height:min(44vw,520px,70svh);transform:translate(-50%,-50%) translateY(calc(-24px * var(--fade)))}
 .colour-cutout{width:30%}
 .colour-orbit .mustard{left:3%;top:0;transform:rotate(-8deg)}
 .colour-orbit .pink{right:0;top:5%;transform:rotate(6deg)}
 .colour-orbit .black{left:0;bottom:0;transform:rotate(4deg)}
 .colour-orbit .olive{right:3%;bottom:-3%;transform:rotate(-6deg)}
 .colour-journey .picture{width:min(38vw,400px,52svh)}
}
@media(min-width:768px) and (max-width:1023px) and (orientation:portrait){
 .colour-orbit{left:50%;top:62%;width:min(60vw,480px);height:min(60vw,480px)}
 .colour-journey .picture{width:360px}
}
/* Black anchors the colour group; grey travels in from its lower-left corner. */
/* Small, static paper details: no filters, new assets, or animation loops. */
.colour-journey .sticky:before,.colour-journey .sticky:after{content:'';position:absolute;pointer-events:none;z-index:0}
.colour-journey .sticky:before{right:4%;top:5%;width:112px;height:88px;background-image:linear-gradient(#879aa922 1px,transparent 1px),linear-gradient(90deg,#879aa922 1px,transparent 1px);background-size:16px 16px;border-top:2px solid #dcaeaa88}
.colour-journey .sticky:after{left:6%;bottom:12%;width:64px;height:48px;border-left:1px solid #879aa966;border-bottom:1px solid #879aa966;background:linear-gradient(#dcaeaa88,#dcaeaa88) 10px 30px/24px 6px no-repeat}
.hero-colours{padding-top:16px;border-top:1px solid #879aa933}
.hero-header{position:relative}
.hero-header:after{content:'';position:absolute;bottom:0;left:6%;width:38px;height:3px;background:linear-gradient(90deg,#879aa9 0 45%,transparent 45% 55%,#dcaeaa 55%);pointer-events:none}
/* Retain the original sign as a compact brand mark, without a separate banner. */
.hero-header .brand{position:relative;background:var(--sign);color:var(--cream);padding:12px 24px;border-radius:2px;outline:1px solid #b99b8277;outline-offset:-6px;box-shadow:0 3px 0 #392925}
.hero-header .brand:before,.hero-header .brand:after{content:'';display:block;position:absolute;top:50%;width:4px;height:4px;border-radius:50%;background:#c9b49a}
.hero-header .brand:before{left:10px}.hero-header .brand:after{right:10px}
.hero-header:after{display:none}
@media(max-width:767px){.hero-header{flex-wrap:wrap}.hero-header .brand{padding:12px 21px}.hero-header .brand span{font-size:23px}.hero-header nav{margin-left:auto}}
@media(max-width:767px){
 .colour-journey .sticky:before{right:5%;top:35%;width:64px;height:40px;background-size:13px 13px;border-top-width:1px}
 .colour-journey .sticky:after{left:7%;bottom:14%;width:32px;height:28px;background-position:7px 16px;background-size:16px 4px}
 .hero-colours{padding-top:12px}
}
@media(max-height:540px) and (orientation:landscape){.colour-journey .sticky:before,.colour-journey .sticky:after{display:none}.hero-colours{padding-top:8px;margin-top:10px}}
.colour-journey .sticky:before{left:52%;right:auto;top:13%;width:42%;height:8%;border:0;background:url('editorial/travel-marks.svg?v=2') center/contain no-repeat;opacity:calc(1 - var(--fade))}
.colour-journey .sticky:after{display:none}
.hero-header .brand{padding:10px 20px;box-shadow:0 2px 0 #392925}
.hero-header .brand span{font-size:25px}
@media(max-width:767px){
 .hero-header{padding-block:10px;gap:8px;flex-wrap:nowrap}
 .hero-header .brand{padding:11px 16px}.hero-header .brand span{font-size:20px}
 .hero-header nav{gap:12px}.hero-header nav a{font-size:13px}
 .hero-header .brand:before{left:7px}.hero-header .brand:after{right:7px}
 .colour-journey .hero-message{top:3%}
 .colour-journey h1{font-size:clamp(38px,10vw,56px)}
 .colour-journey .sticky:before{left:7%;top:35%;width:86%;height:6%;background-size:contain}
 .colour-journey .journey-note{bottom:12%}
}
@media(min-width:768px) and (max-width:1023px) and (orientation:portrait){.colour-journey .sticky:before{left:20%;top:33%;width:60%;height:6%}}
@media(max-height:540px) and (orientation:landscape){.colour-journey .sticky:before{display:none}}
.colour-orbit .black{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%) rotate(4deg)}
.colour-journey .picture{transform:translate(-50%,-50%) translateX(calc((24vw - min(15.4vw,182px,24.5svh)) * (1 - var(--travel)))) translateY(calc((-3svh + min(15.4vw,182px,24.5svh)) * (1 - var(--travel)))) scale(calc(.58 + .42 * var(--travel)))}
@media(max-width:767px){
 .colour-journey .picture{transform:translate(-50%,-50%) translateX(calc(-28vw * (1 - var(--travel)))) translateY(calc(15svh * (1 - var(--travel)))) scale(calc(.47 + .53 * var(--travel)))}
}
@media(min-width:768px) and (max-width:1023px) and (orientation:portrait){
 .colour-journey .picture{transform:translate(-50%,-50%) translateX(calc(min(21vw,168px) * -1 * (1 - var(--travel)))) translateY(calc((6svh + min(21vw,168px)) * (1 - var(--travel)))) scale(calc(.53 + .47 * var(--travel)))}
}
@media(max-height:540px) and (orientation:landscape){
 .colour-journey .picture{transform:translate(-50%,-50%) translateX(calc(10vw * (1 - var(--travel)))) translateY(calc(22svh * (1 - var(--travel)))) scale(calc(.54 + .46 * var(--travel)))}
}
@media(prefers-reduced-motion:reduce){
 .colour-journey.enhanced{height:auto}.colour-journey.enhanced .sticky{position:relative;height:auto;min-height:0;display:flex;flex-direction:column;padding:40px 24px;gap:24px}
 .colour-journey .hero-message{position:relative;left:auto;top:auto;width:100%;max-width:600px;opacity:1;transform:none}
 .colour-journey .picture{position:relative;left:auto;top:auto;width:min(76vw,360px);transform:none;will-change:auto}
 .colour-orbit,.colour-journey .motion-copy,.journey-note{display:none}.unfold-anchor{top:0}
}
/* One closing section: product, packs and the short delivery/returns terms. */
.purchase{display:grid;gap:28px;grid-template-columns:1fr;align-items:start}
.size-figure{position:relative;width:min(100%,360px);margin:0 auto;padding:0 116px 52px 0}
.size-shot{position:relative}
.size-figure img{display:block;width:100%;height:auto}
.dim-v,.dim-h{position:absolute;background:var(--sign)}
.dim-v{right:-40px;top:24.8%;height:61%;width:1px}
.dim-h{left:25.5%;width:58.8%;bottom:-34px;height:1px}
.dim-v:before,.dim-v:after{content:'';position:absolute;left:-6px;width:13px;height:1px;background:var(--sign)}
.dim-v:before{top:0}.dim-v:after{bottom:0}
.dim-h:before,.dim-h:after{content:'';position:absolute;top:-6px;height:13px;width:1px;background:var(--sign)}
.dim-h:before{left:0}.dim-h:after{right:0}
.dim-v>span,.dim-h>span{position:absolute;padding:4px;background:var(--plaster);color:var(--sign);font:13px/1 Arial,sans-serif;white-space:nowrap}
.dim-v>span{left:6px;top:50%;transform:translateY(-50%)}
.dim-h>span{left:50%;top:50%;transform:translate(-50%,-50%)}
.purchase-copy>p{max-width:34ch}
.purchase-copy .measurement-note{font-size:13px;line-height:1.5;color:#76685c}
.fact-row{display:flex;flex-wrap:wrap;gap:10px 32px;margin:20px 0 0;padding-top:18px;border-top:1px solid #50332f33}
.fact-row dt{font:10px/1.6 Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#76685c}
.fact-row dd{margin:2px 0 0;font:19px/1.3 Georgia,serif}
.pack-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pack{position:relative;display:flex;flex-direction:column;gap:4px;background:#f3eee5;border:1px solid #50332f33;outline:1px solid #50332f22;outline-offset:-8px;padding:20px 18px}
.pack h3{font:24px/1.2 Georgia,serif}
.price{margin:2px 0 0;font:italic 38px/1.1 Georgia,serif}
.pack-note{margin:0;font-size:13px;color:#76685c}
.pack.featured{background:var(--sign);color:var(--cream);outline-color:#f0e5ce33}
.pack.featured .pack-note{color:#d4c2aa}
.flag{margin:0;font:10px/1.6 Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--blush-light)}
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:22px;border-top:1px solid #50332f33}
.terms h3{font:20px/1.2 Georgia,serif;margin-bottom:8px}
.terms ul{margin:0;padding-left:17px;font-size:14px;line-height:1.5}
.terms li{margin-bottom:6px}
.terms a{min-height:0;word-break:break-word;color:var(--sign)}
.purchase-state{max-width:none;margin:0}
.purchase-state .text-link{margin-left:10px}
@media(min-width:768px){
 .purchase{grid-template-columns:1fr 1fr;column-gap:56px;row-gap:36px}
 .purchase-copy{align-self:center}
 .pack-grid,.terms,.purchase-state{grid-column:1/-1}
}
@media(max-width:767px){
 .pack-grid{grid-template-columns:1fr;gap:12px}
 .pack{flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px}
 .pack h3{flex:1}.price{font-size:30px}.flag{flex-basis:100%}
 .terms{grid-template-columns:1fr;gap:20px}
}