/* ALUN: one day, nine to seven. */
:root{
  --salt:#ECEEE9;
  --sand:#DCD7CB;
  --lagoon:#13292A;
  --glass:#8FA79C;
  --mist:#55645F;
  --sun:#F2C46D;
  --ease:cubic-bezier(.7,0,.2,1);
  --out:cubic-bezier(.2,.7,.2,1);
  --pad:clamp(1.25rem,4vw,4rem);
  --sans:'Archivo',system-ui,sans-serif;
  --didone:'Bodoni Moda','Didot',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--salt);color:var(--lagoon);font:400 1.0625rem/1.55 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0;font-weight:300;font-stretch:125%;letter-spacing:-.035em;line-height:.92}
p{margin:0}
:focus-visible{outline:2px solid var(--glass);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--lagoon);color:var(--salt);padding:.6rem 1rem;border-radius:99px}
.skip:focus{top:1rem}
.fine{font-size:.8125rem;color:var(--mist)}
/* Brand mark: the approved Open A with LUN in a Didone. */
.wm,.foot-mark{display:inline-flex;align-items:flex-end;font-family:var(--didone);font-weight:400;line-height:.8}
.wm{gap:.06em;font-size:1.6rem;text-decoration:none;letter-spacing:.02em}
.wm svg{width:.96em;height:1em;overflow:visible}
.foot-mark svg{width:.96em;height:1em;overflow:visible}
/* Navigation */
.demo-note{position:relative;z-index:31;background:var(--lagoon);color:var(--salt);font-size:.75rem;text-align:center;padding:.45rem var(--pad)}
.nav{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1rem var(--pad);transition:color .5s var(--out),background-color .5s var(--out)}
.navlinks{display:flex;gap:1.75rem}
.navlinks a,.bag-open{font-size:.875rem;text-decoration:none;background:none;border:0;padding:.25rem 0;position:relative}
.navlinks a::after,.bag-open::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--out)}
.navlinks a:hover::after,.bag-open:hover::after{transform:scaleX(1);transform-origin:left}
.bag-open{justify-self:end}
.page .nav{background:var(--salt)}
.home .nav{margin-bottom:-4.1rem;background:var(--salt)}
html.in-day .home .nav{background:transparent}
html.on-photo .home .nav{color:#fff}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:1rem;min-height:3.25rem;padding:0 1.75rem;border-radius:99px;border:1px solid var(--lagoon);background:var(--lagoon);color:var(--salt);font-size:.9375rem;text-decoration:none;transition:background-color .3s,color .3s,opacity .3s}
.btn:hover:not(:disabled){background:transparent;color:var(--lagoon)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-light{background:var(--salt);color:var(--lagoon);border-color:var(--salt)}
.btn-light:hover{background:transparent;color:var(--salt)}
.btn-full{width:100%}
#add:not(:disabled){justify-content:space-between}
.text-button{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:.25em;font-size:.875rem}
/* ---------- The day: a pinned scroll from 09:00 to 19:00 ---------- */
.day{--grow:1;--warm:0;--dusk:0;--title:1;--am:0;--pm:0;--sunx:6;--suny:62;--arc:0;position:relative;height:100svh;background:var(--salt)}
.day-pin{position:relative;height:100svh;overflow:hidden}
html.scrolly .day{height:270svh;--grow:0;--title:0}
html.scrolly .day-pin{position:sticky;top:0}
.day-head{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);font-size:clamp(3rem,8.2vw,9.5rem);font-stretch:118%;color:var(--lagoon);opacity:calc(1 - var(--grow)*1.6);pointer-events:none}
.dh-l,.dh-r{display:block;transform:translateX(calc(var(--grow) * var(--dir) * 12vw))}
.dh-l{--dir:-1}
.dh-r{--dir:1;text-align:right}
.day-window{--ix:calc((1 - var(--grow)) * 34vw);--iy:calc((1 - var(--grow)) * 13svh);--r:calc((1 - var(--grow)) * 16vw);position:absolute;inset:0;clip-path:inset(var(--iy) var(--ix) calc(var(--iy) * .55) var(--ix) round var(--r) var(--r) 0 0);will-change:clip-path}
.day-window img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.day-window img{--drop:12svh;transform-origin:50% 40%;transform:translateY(calc((1 - var(--grow)) * var(--drop))) scale(calc(1.1 - var(--grow)*.1))}
.day-window .am{object-position:48% 30%;filter:sepia(calc(var(--warm) * .5)) saturate(calc(1 + var(--warm) * .45)) brightness(calc(1 - var(--warm) * .16)) hue-rotate(calc(var(--warm) * -8deg))}
.day-window .pm{object-position:48% 30%;opacity:var(--dusk)}
.day-glow{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,150,70,.75),rgba(255,110,70,.4) 45%,rgba(70,25,35,.5));mix-blend-mode:soft-light;opacity:calc(var(--warm) * (1 - var(--dusk) * .8))}
.day-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,23,.72),rgba(10,22,23,.1) 55%,rgba(10,22,23,.25));opacity:calc(var(--grow)*.55 + var(--title)*.45)}
.day-cap{text-shadow:0 1px 18px rgba(10,22,23,.35);position:absolute;left:var(--pad);bottom:clamp(6rem,16svh,9rem);color:#fff;font-size:clamp(1.4rem,2.6vw,2.4rem);font-stretch:112%;font-weight:300;letter-spacing:-.02em;max-width:22ch;line-height:1.1}
.day-cap b{display:block;font-weight:500;font-size:.5em;font-stretch:100%;letter-spacing:.02em;margin-bottom:.6em;color:var(--sun)}
.cap-am{opacity:var(--am);transform:translateY(calc((1 - var(--am)) * 1.5rem))}
.cap-pm{opacity:var(--pm);transform:translateY(calc((1 - var(--pm)) * 1.5rem))}
.day-title{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(2.5rem,9svh,6rem);color:#fff;display:grid;grid-template-columns:1fr minmax(16rem,24rem);align-items:end;gap:1.5rem 3rem;opacity:var(--title);pointer-events:none}
.day-title .day-big{grid-row:span 2;max-width:none;opacity:1;font-size:clamp(3.6rem,11.5vw,12rem);font-weight:300;font-stretch:125%;letter-spacing:-.035em;line-height:.92;transform:translateY(calc((1 - var(--title)) * 3rem))}
.day-title p{font-size:1.0625rem;max-width:34ch;opacity:.9}
.day-title .btn{justify-self:start}
html.title-on .day-title{pointer-events:auto}
.dial{position:absolute;right:var(--pad);bottom:clamp(6rem,16svh,9rem);display:flex;align-items:flex-end;gap:.9rem;color:var(--lagoon);opacity:calc(1 - var(--title));transition:color .5s}
html.on-photo .dial{color:#fff}
.dial svg{width:5.5rem;overflow:visible}
.dial .arc{fill:none;stroke:currentColor;stroke-opacity:.3;stroke-width:1;stroke-dasharray:2 3}
.dial .arc-done{fill:none;stroke:var(--sun);stroke-width:1.5;stroke-dasharray:100}
.dial .sun{fill:var(--sun)}
.clock{font-size:2rem;font-weight:300;font-stretch:115%;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.day-hint{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);font-size:.8125rem;color:var(--mist);opacity:calc(1 - var(--grow)*3)}
html:not(.scrolly) .day-hint,html:not(.scrolly) .dial,html:not(.scrolly) .day-cap{display:none}
html:not(.scrolly) .day-shade{opacity:1}
/* Opening: the wave in the A draws itself, then the window rises. */
html.intro .dh-l{animation:inl 1.2s .1s var(--out) both}
html.intro .day-window{animation:rise 1.3s .55s var(--out) both}
html.intro .dh-r{animation:inr 1.2s .1s var(--out) both}
@keyframes inl{from{transform:translateX(-6vw);opacity:0}}
@keyframes inr{from{transform:translateX(6vw);opacity:0}}
@keyframes rise{from{transform:translateY(18svh);opacity:0}}
@keyframes fade{from{opacity:0}}
/* ---------- Edit 01 ---------- */
.edit{--s:1;padding:clamp(6rem,14vw,12rem) var(--pad) clamp(5rem,9vw,8rem)}
.edit-head{display:grid;gap:1.75rem;margin-bottom:clamp(3rem,6vw,5rem)}
.stretch{font-size:clamp(2.6rem,9.2vw,10rem);font-stretch:calc(62% + var(--s) * 63%);white-space:nowrap}
.edit-side{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.25rem 3rem}
.edit-side p{color:var(--mist);max-width:34ch}
.pill{display:inline-flex;justify-self:start;flex:none;padding:.25rem;border:1px solid rgba(19,41,42,.25);border-radius:99px;position:relative}
.pill button{position:relative;z-index:1;border:0;background:none;padding:.6rem 1.1rem;border-radius:99px;font-size:.875rem;transition:color .4s var(--out)}
.pill button[aria-pressed=true]{color:var(--salt)}
.pill::before{content:"";position:absolute;top:.25rem;bottom:.25rem;left:.25rem;width:calc(50% - .25rem);border-radius:99px;background:var(--lagoon);transition:transform .55s var(--ease)}
.shoremode .pill::before{transform:translateX(100%)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.6vw,1.5rem);align-items:start}
.card{text-decoration:none;display:block}
.card:nth-child(2){margin-top:clamp(3rem,7vw,7rem)}
.card:nth-child(3){margin-top:clamp(1rem,2.5vw,2.5rem)}
.card:nth-child(4){margin-top:clamp(5rem,10vw,10rem)}
.ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out)}
.ph .shore{clip-path:inset(0 0 0 100%);transition:clip-path .9s var(--ease) calc(var(--i,0) * 110ms),transform 1.2s var(--out)}
.shoremode .ph .shore{clip-path:inset(0)}
/* Hover or focus swaps the whole photo to the other half of the day. */
.ph::after{content:"19:00 Shore";position:absolute;left:.75rem;top:.75rem;z-index:2;background:var(--salt);border-radius:99px;padding:.3rem .7rem;font-size:.75rem;opacity:0;transform:translateY(-.4rem);transition:opacity .35s var(--out),transform .35s var(--out)}
.shoremode .ph::after{content:"09:00 Work"}
@media (hover:hover){
  .card:hover .ph img{transform:scale(1.03)}
  .edit:not(.shoremode) .card:hover .ph .shore{clip-path:inset(0);transition-delay:0s}
  .shoremode .card:hover .ph .shore{clip-path:inset(0 0 0 100%);transition-delay:0s}
  .card:hover .ph::after{opacity:1;transform:none;transition-delay:.25s}
}
.edit:not(.shoremode) .card:focus-visible .ph .shore{clip-path:inset(0);transition-delay:0s}
.shoremode .card:focus-visible .ph .shore{clip-path:inset(0 0 0 100%);transition-delay:0s}
.card:focus-visible .ph::after{opacity:1;transform:none}
.meta{display:flex;justify-content:space-between;gap:1rem;padding-top:.85rem;font-size:.9375rem}
.meta span:last-child{color:var(--mist);font-variant-numeric:tabular-nums}
/* ---------- Story ---------- */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,7rem);align-items:center;padding:clamp(4rem,8vw,8rem) var(--pad) clamp(6rem,12vw,11rem)}
.story-img{margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:50% 50% 0 0/36% 36% 0 0}
.story-img img{width:100%;height:118%;object-fit:cover;transform:translateY(calc(var(--py,0) * -15%))}
.story-text{max-width:36rem}
.story-text h2{font-size:clamp(2.8rem,6vw,6rem);margin-bottom:2rem}
.story-text .lead{font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.35;font-stretch:108%;margin-bottom:1.25rem}
.story-text p+p{color:var(--mist)}
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:2.5rem;margin:3rem 0 0;padding-top:1.5rem;border-top:1px solid rgba(19,41,42,.18)}
.facts dt{font-size:.8125rem;color:var(--mist)}
.facts dd{margin:.3rem 0 0}
/* ---------- Footer ---------- */
.foot{background:var(--lagoon);color:var(--salt);padding:clamp(3rem,6vw,5rem) var(--pad) 1.5rem;overflow:hidden}
.foot-mark{display:flex;justify-content:center;font-size:min(36vw,30rem);line-height:.78;margin-bottom:2.5rem}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.875rem;opacity:.8;border-top:1px solid rgba(236,238,233,.2);padding-top:1.25rem}
.foot-row p:last-child{display:flex;gap:1.5rem}
/* ---------- Product page ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,6rem);padding:1rem var(--pad) clamp(4rem,8vw,7rem);align-items:start}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.gal-main{grid-column:1/-1;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand)}
.gal-main img,.gal-sub img{width:100%;height:100%;object-fit:cover}
.gal-main img{position:absolute;inset:0}
.gal-main .shore{clip-path:inset(0 0 0 100%);transition:clip-path .9s var(--ease)}
.shoremode .gal-main .shore{clip-path:inset(0)}
.gal-sub{aspect-ratio:3/4;overflow:hidden;background:var(--sand)}
.tag{position:absolute;left:1rem;top:1rem;z-index:2;background:var(--salt);border-radius:99px;padding:.35rem .8rem;font-size:.8125rem}
.info{position:sticky;top:5.5rem;display:grid;gap:1.25rem;max-width:30rem}
.crumb{font-size:.8125rem;color:var(--mist);text-decoration:none}
.crumb:hover{text-decoration:underline}
.info h1{font-size:clamp(2.8rem,5vw,4.75rem)}
.price{font-size:1.25rem;display:flex;align-items:baseline;gap:.75rem}
.desc{color:var(--mist);max-width:40ch}
.lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:.875rem;margin-top:.5rem}
.sizes{display:flex;gap:.5rem;flex-wrap:wrap}
.sizes button{min-width:3.25rem;height:3.25rem;border-radius:99px;border:1px solid rgba(19,41,42,.25);background:none;font-size:.875rem;transition:background-color .25s,color .25s,border-color .25s}
.sizes button:hover:not(:disabled){border-color:var(--lagoon)}
.sizes button[aria-pressed=true]{background:var(--lagoon);color:var(--salt);border-color:var(--lagoon)}
.sizes button:disabled{color:rgba(19,41,42,.35);text-decoration:line-through;cursor:not-allowed}
.fit{font-size:.9375rem;color:var(--mist)}
details{border-top:1px solid rgba(19,41,42,.18);padding:1rem 0 0}
summary{cursor:pointer;font-size:.9375rem;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";transition:transform .3s var(--out)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:.75rem;font-size:.9375rem;color:var(--mist)}
.look{padding:0 var(--pad) clamp(5rem,9vw,8rem)}
.look h2{font-size:clamp(2.2rem,4.5vw,4rem);margin-bottom:.75rem}
.lk{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,1.6vw,1.5rem);margin-top:2rem}
.lk a{text-decoration:none;display:grid;gap:.75rem;font-size:.9375rem}
.lk img{aspect-ratio:3/4;object-fit:cover;width:100%;background:var(--sand);transition:opacity .4s}
.lk span{float:right;color:var(--mist)}
.lk a{display:block}
.lk img{margin-bottom:.75rem}
/* ---------- Dialogs ---------- */
dialog{border:0;padding:2rem;width:min(30rem,100vw);max-height:100dvh;height:100dvh;margin:0 0 0 auto;background:var(--salt);color:var(--lagoon)}
dialog#size-guide,dialog#policy{height:auto;margin:auto;border-radius:1.25rem}
dialog::backdrop{background:rgba(19,41,42,.45);backdrop-filter:blur(3px)}
dialog[open]{animation:slide .5s var(--out)}
dialog#size-guide[open],dialog#policy[open]{animation:fade .3s var(--out)}
@keyframes slide{from{transform:translateX(100%)}}
.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.dialog-head h2{font-size:2rem}
.close{background:none;border:0;font-size:1.75rem;line-height:1;width:2.75rem;height:2.75rem;border-radius:99px}
.close:hover{background:rgba(19,41,42,.08)}
dialog>p,dialog .fine{margin-bottom:1rem}
.bag-item{display:grid;grid-template-columns:4.5rem 1fr auto;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(19,41,42,.15);font-size:.9375rem}
.bag-item img{aspect-ratio:3/4;object-fit:cover}
.bag-item h3{font-size:1rem;font-weight:500;font-stretch:100%;letter-spacing:0;line-height:1.3}
.bag-item p{color:var(--mist);font-size:.8125rem}
.bag-item>div:last-child{text-align:right;display:grid;align-content:space-between;justify-items:end}
.quantity{display:inline-flex;align-items:center;gap:.6rem;margin-top:.6rem}
.quantity button{width:2rem;height:2rem;border-radius:99px;border:1px solid rgba(19,41,42,.25);background:none}
.quantity button:disabled{opacity:.35}
.remove{background:none;border:0;padding:0;font-size:.8125rem;text-decoration:underline;color:var(--mist)}
.empty{font-size:1.25rem;margin-bottom:1.5rem}
.empty-shop{display:inline-flex;padding:.8rem 1.4rem;border-radius:99px;background:var(--lagoon);color:var(--salt);text-decoration:none;font-size:.9375rem;margin-bottom:2rem}
.bag-total{display:flex;justify-content:space-between;font-size:1.125rem;padding:1.25rem 0 .5rem}
.status{font-size:.875rem;margin:1rem 0}
#bag>.text-button{margin-top:1rem}
.guide-table{width:100%;border-collapse:collapse;margin:1rem 0;font-variant-numeric:tabular-nums;font-size:.9375rem}
.guide-table th,.guide-table td{text-align:left;padding:.6rem .4rem;border-bottom:1px solid rgba(19,41,42,.15)}
.guide-table thead th{font-weight:500;font-size:.8125rem;color:var(--mist)}
/* ---------- Small screens ---------- */
@media (max-width:820px){
  .navlinks{gap:1.1rem}
  .day-window{--ix:calc((1 - var(--grow)) * 9vw);--iy:calc((1 - var(--grow)) * 30svh);--r:calc((1 - var(--grow)) * 41vw)}
  .day-head{display:block;font-size:15.5vw;line-height:.95;padding-top:calc(5.5rem + 2svh)}
  .dh-l,.dh-r{display:inline}
  .dh-r br{display:none}
  .day-hint{display:none}
  .day-window img{--drop:21svh}
  .day-window .am,.day-window .pm{object-position:53% 30%}
  .day-title{grid-template-columns:1fr}
  .day-title .day-big{grid-row:auto}
  .day-cap{bottom:auto;top:calc(4.5rem + 2svh);max-width:15ch}
  .dial{bottom:1.25rem}
  .dial svg{width:4rem}
  .clock{font-size:1.5rem}
  .edit-head{grid-template-columns:1fr}
  .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 1rem;scrollbar-width:none}
  .grid::-webkit-scrollbar{display:none}
  .card{flex:0 0 74vw;scroll-snap-align:center;margin-top:0!important}
  .story{grid-template-columns:1fr}
  .story-img{max-width:28rem}
  .facts{grid-template-columns:1fr 1fr;gap:1.25rem 2rem}
  .pdp{grid-template-columns:1fr}
  .info{position:static}
  .lk{grid-template-columns:repeat(3,62vw);overflow-x:auto;scroll-snap-type:x mandatory}
  .lk a{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}