/* Orbit Vintage — style.css
   Plates: plaster (ground), lemon (once), ink (the closer). Two families: Syne, Fraunces italic.
   Every photo is an object with a 1px hairline edge and no radius. Decided once. */

@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/syne-normal-latin.woff2) format('woff2')}

:root{
  --plaster:#E8E6E0;
  --ink:#1C1311;
  --lemon:#F4F44B;
  --flame:#DE6C25;
  --hair:rgba(28,19,17,.16);
  --hair-on-ink:rgba(232,230,224,.2);
  --m:clamp(20px,4.5vw,84px);
  --syne:'Syne','Helvetica Neue',Arial,sans-serif;
  --fraunces:'Fraunces',Georgia,'Times New Roman',serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --meta:13px;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--plaster);color:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;font-family:var(--syne);font-weight:500;font-size:var(--meta);line-height:1.4;letter-spacing:.005em;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--flame);color:var(--plaster)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.closer :focus-visible,.lightbox :focus-visible{outline-color:var(--plaster)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- reveal masks (drop-text, per line — never per character on a wordmark) ---------- */
.ln{display:block;overflow:hidden;padding:.14em .16em .26em;margin:-.14em -.16em -.26em}
.ln>span{display:block;transform:translate3d(0,140%,0);transition:transform 1.1s var(--ease-out);transition-delay:var(--d,0ms)}
.is-in .ln>span,.ln.is-in>span{transform:none}
html.is-still .ln>span{transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.ln>span{transform:none;transition:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 20px 0 22px;border:1px solid var(--ink);color:var(--ink);font:500 var(--meta)/1 var(--syne);letter-spacing:.01em;white-space:nowrap;transition:background .35s var(--ease-out),color .35s var(--ease-out)}
.btn::after{content:"";width:9px;height:9px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);transition:transform .35s var(--ease-out)}
.btn:hover{background:var(--ink);color:var(--plaster)}
.btn:hover::after{transform:rotate(45deg) translate(2px,-2px)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--plaster);display:flex;align-items:center;justify-content:center;transition:transform .9s var(--ease-io),visibility 0s .9s;transform:translate3d(0,0,0)}
.loader.is-done{transform:translate3d(0,-101%,0);visibility:hidden}
.loader__sun{width:clamp(120px,18vw,220px);height:auto;color:var(--flame);transform:rotate(-16deg);clip-path:inset(100% 0 0 0);transition:transform 1.4s var(--ease-out),clip-path 1.1s var(--ease-out)}
.loader.is-live .loader__sun{transform:none;clip-path:inset(0 0 0 0)}
.loader__count{position:absolute;left:var(--m);bottom:calc(var(--m) - 4px);font:500 var(--meta)/1 var(--syne);letter-spacing:.04em}
html.is-still .loader,html.no-loader .loader{display:none}
@media (prefers-reduced-motion:reduce){.loader{display:none}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:26px var(--m) 0;pointer-events:none;color:var(--ink);transition:color .4s ease}
.nav>*{pointer-events:auto}
.nav__mark{display:block;width:44px;height:48px;color:var(--flame);transition:transform .8s var(--ease-out)}
.nav__mark svg{width:100%;height:100%;display:block}
.nav__mark:hover{transform:rotate(22deg)}
.nav__links{display:flex;gap:28px;font:500 var(--meta)/1 var(--syne)}
.nav__links a{position:relative;padding:8px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav.on-ink{color:var(--plaster)}


/* ---------- the rail: where you are on the page, and that there is more ---------- */
.rail{position:fixed;right:14px;top:calc(var(--m) + 62px);bottom:var(--m);width:16px;z-index:49;pointer-events:none;color:var(--ink);transition:color .4s ease}
.rail.on-ink{color:var(--plaster)}
.rail__line{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:currentColor;opacity:.22}
.rail__fill{position:absolute;left:50%;top:0;width:2px;height:100%;margin-left:-1px;background:currentColor;transform:scaleY(0);transform-origin:top;will-change:transform}
.rail__tick{position:absolute;left:50%;width:9px;height:1px;background:currentColor;transform:translateX(-50%);opacity:.32;transition:opacity .3s ease}
.rail__tick.is-past{opacity:1}
.rail__label{position:absolute;right:calc(100% + 4px);top:0;font:500 11px/1 var(--syne);letter-spacing:.06em;writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center;opacity:0;transition:opacity .4s ease}
.rail__pulse{position:absolute;left:50%;top:0;width:2px;height:26px;margin-left:-1px;background:currentColor;opacity:0;transform:translateY(-30px)}
.rail.is-idle .rail__label{opacity:.8;transition-delay:.9s}
.rail.is-idle .rail__pulse{opacity:1;animation:railpulse 2.4s var(--ease-io) infinite}
@keyframes railpulse{0%{transform:translateY(-30px);opacity:0}12%{opacity:1}70%{opacity:1}100%{transform:translateY(calc(var(--rail-h,600px) + 10px));opacity:0}}
@media (prefers-reduced-motion:reduce){.rail.is-idle .rail__pulse{animation:none;opacity:0}}
html.is-still .rail__label{opacity:.8;transition:none}
.hero__hint{position:absolute;margin:0;font:500 var(--meta)/1 var(--syne);color:rgba(28,19,17,.72);z-index:3;opacity:0;transition:opacity .6s ease}
.is-in .hero__hint.is-live{opacity:1}

/* ---------- pinned tracks ---------- */
.track{position:relative}
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.plate{position:relative}

/* ---------- 1 · the fitting room ---------- */
.track--hero{height:340vh;z-index:2}
.hero{background:var(--plaster)}
.hero__frame{cursor:ew-resize;position:absolute;left:var(--frame-left,55%);top:var(--frame-top,13vh);height:var(--frame-h,66vh);aspect-ratio:749/1059;box-shadow:0 0 0 1px var(--hair);background:#bfbcb4;z-index:3;transform:translate3d(0,0,0)}
.hero__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hero__frame img.is-on{opacity:1}
.hero__count{position:absolute;left:var(--frame-left,55%);top:calc(var(--frame-top,13vh) - 30px);display:flex;align-items:center;gap:10px;font:500 var(--meta)/1 var(--syne);letter-spacing:.04em;z-index:3}
.hero__count i{display:block;width:26px;height:1px;background:var(--ink)}
.wordmark{position:absolute;left:var(--m);right:var(--m);bottom:var(--wm-bottom,7vh);margin:0;font:800 var(--wm-size,9.2vw)/.86 var(--syne);letter-spacing:-.035em;white-space:nowrap;z-index:2}
.wordmark .ln{display:inline-block;vertical-align:bottom}
.wordmark__vintage{margin-left:.22em}
.hero__line{position:absolute;left:var(--m);bottom:var(--line-bottom,31vh);margin:0;font:italic 400 clamp(19px,1.75vw,27px)/1.22 var(--fraunces);font-variation-settings:'SOFT' 50,'opsz' 48;max-width:22em;z-index:2}
.hero__line .ln>span{transition-delay:calc(var(--d,0ms) + 700ms)}
.hero__cta{position:absolute;left:var(--m);bottom:var(--cta-bottom,22vh);z-index:2;opacity:0;transition:opacity .8s ease 1.1s,background .35s var(--ease-out),color .35s var(--ease-out)}
.is-in .hero__cta{opacity:1}
html.is-still .hero__cta{opacity:1;transition:none}
@media (prefers-reduced-motion:reduce){.hero__cta{opacity:1;transition:none}}

/* ---------- 2 · the statement, on lemon ---------- */
.track--statement{height:230vh;z-index:3;background:var(--lemon)}
.plate--lemon{color:var(--ink)}
.statement{display:flex;align-items:center;padding:0 var(--m)}
.statement__text{position:relative;z-index:2;margin:0;font:800 clamp(38px,6.4vw,104px)/1.02 var(--syne);letter-spacing:-.035em;max-width:14em}
.statement__text .w{display:inline-block;opacity:.14;will-change:opacity}
.void{height:34vh}

/* ---------- 3 · the rack ---------- */
.track--rack{height:420vh;z-index:3;background:var(--plaster)}
.rack{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.rack.is-dragging{cursor:grabbing}
.rack__rail{position:absolute;left:0;right:0;top:var(--rail-top,13vh);height:1px;background:var(--ink);z-index:1}
.rack__strip{position:absolute;inset:0;z-index:2}
.rack__card{position:absolute;left:0;top:var(--rail-top,13vh);will-change:transform}
.rack__hook{position:absolute;left:50%;top:0;width:1px;height:var(--hook,26px);background:var(--ink);transform:translateX(-50%)}
.rack__wrap{position:absolute;left:0;top:var(--hook,26px);overflow:hidden;box-shadow:0 0 0 1px var(--hair);background:#bfbcb4}
.rack__wrap img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.rack__caption{position:absolute;left:var(--m);bottom:calc(var(--m) - 2px);margin:0;font:italic 400 clamp(22px,2.4vw,38px)/1.1 var(--fraunces);font-variation-settings:'SOFT' 50,'opsz' 60;z-index:4;pointer-events:none}
.rack__caption .ln>span{transition:transform .9s var(--ease-out)}
.rack__hint{position:absolute;right:var(--m);bottom:calc(var(--m) - 2px);font:500 var(--meta)/1 var(--syne);color:rgba(28,19,17,.72);z-index:4;pointer-events:none}

/* ---------- single words (design-craft: the breather) ---------- */
.word{margin:0;padding:22vh var(--m) 0;font:800 clamp(56px,9vw,150px)/.9 var(--syne);letter-spacing:-.035em}

/* ---------- 4 · the knits ---------- */
.knits{position:relative;z-index:3;background:var(--plaster)}
.track--knits{height:260vh}
.knits__stage{display:flex;align-items:center;justify-content:center;perspective:1200px}
.knits__row{position:absolute;inset:0}
.knits__row figure{position:absolute;left:50%;top:50%;margin:calc(var(--knit-w,150px) * 1059 / 749 / -2) 0 0 calc(var(--knit-w,150px) / -2);width:var(--knit-w,150px);aspect-ratio:749/1059;box-shadow:0 0 0 1px var(--hair);background:#bfbcb4;overflow:hidden;will-change:transform,opacity}
.knits__row img{width:100%;height:100%;object-fit:cover}

/* ---------- 5 · the flat-lays fly past ---------- */
.track--tiles{height:280vh;z-index:3;background:var(--plaster)}
.tiles{perspective:1200px}
.tiles__stage{position:absolute;inset:0;transform-style:preserve-3d;z-index:2}
.tiles__tile{position:absolute;transform-style:preserve-3d;will-change:transform,opacity;box-shadow:0 0 0 1px var(--hair);background:#bfbcb4}
.tiles__tile img{width:100%;height:100%;object-fit:cover}
.tiles__end{position:absolute;left:var(--m);right:var(--m);top:50%;transform:translateY(-50%);z-index:1;opacity:0;pointer-events:none}
.tiles__end.is-live{opacity:1;pointer-events:auto}
.tiles__word{display:inline-block;font:800 clamp(64px,13vw,220px)/.86 var(--syne);letter-spacing:-.035em;position:relative}
.tiles__word::after{content:"";position:absolute;left:.02em;right:.02em;bottom:-.04em;height:.055em;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.tiles__word:hover::after{transform:scaleX(1)}
.tiles__line{margin:26px 0 0;font:italic 400 clamp(19px,1.75vw,27px)/1.2 var(--fraunces);font-variation-settings:'SOFT' 50,'opsz' 48}

/* ---------- 6 · the shop ---------- */
.track--shop{height:320vh;z-index:3;background:var(--plaster)}
.shop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;padding:0 0 0 var(--m)}
.shop__title{margin:0 0 18px;font:800 clamp(30px,3.05vw,50px)/.98 var(--syne);letter-spacing:-.03em;white-space:nowrap}
.shop__city{margin:0 0 34px;font:italic 400 clamp(19px,1.75vw,27px)/1.2 var(--fraunces);font-variation-settings:'SOFT' 50,'opsz' 48}
.hours{margin:0 0 36px;padding:0;max-width:22rem;border-top:1px solid var(--hair)}
.hours div{display:flex;justify-content:space-between;gap:24px;padding:11px 0;border-bottom:1px solid var(--hair);font:500 var(--meta)/1.3 var(--syne)}
.hours dt,.hours dd{margin:0}
.shop__photos{position:relative;aspect-ratio:701/465;width:100%}
.shop__photos figure{position:absolute;inset:0;margin:0;opacity:0;box-shadow:0 0 0 1px var(--hair);background:#bfbcb4;overflow:hidden;will-change:opacity,transform}
.shop__photos img{width:100%;height:100%;object-fit:cover}
.shop__step{position:absolute;left:var(--m);bottom:calc(var(--m) - 4px);display:flex;align-items:center;gap:10px;font:500 var(--meta)/1 var(--syne);letter-spacing:.04em}
.shop__step i{display:block;width:26px;height:1px;background:var(--ink)}

/* ---------- 7 · the story ---------- */
.story{position:relative;z-index:3;background:var(--plaster);padding:26vh var(--m) 30vh}
.story__text{margin:0 0 0 auto;max-width:30em;font:italic 400 clamp(22px,2.3vw,36px)/1.3 var(--fraunces);font-variation-settings:'SOFT' 50,'opsz' 60}
.story__text .ln{display:inline-block}

/* ---------- 8 · the closer ---------- */
.closer{position:relative;z-index:3;background:var(--ink);color:var(--plaster);min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.closer__sun{position:absolute;right:-30vw;bottom:-34vw;width:78vw;height:auto;color:var(--flame);opacity:.92;z-index:0;will-change:transform;pointer-events:none}
.closer__body{position:relative;z-index:2;padding:22vh var(--m) 0}
.closer__word{margin:0 0 42px;font:800 clamp(44px,7.4vw,126px)/.9 var(--syne);letter-spacing:-.035em}
.closer__word .ln{display:block}
.closer__links{display:flex;flex-wrap:wrap;gap:6px 34px;font:500 clamp(15px,1.25vw,19px)/1 var(--syne)}
.closer__links a{position:relative;padding:8px 0}
.closer__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.closer__links a:hover::after{transform:scaleX(1);transform-origin:left}
.foot{position:relative;z-index:2;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:16vh var(--m) calc(var(--m) - 6px);font:500 var(--meta)/1.3 var(--syne);color:rgba(232,230,224,.7)}

/* ---------- gallery page ---------- */
.page-gallery .nav{transition:color .4s ease,background .4s ease,padding .4s ease}
.page-gallery .nav.is-scrolled:not(.on-ink){background:rgba(232,230,224,.94);padding-top:14px;padding-bottom:12px;box-shadow:0 1px 0 var(--hair)}
.page-gallery .nav.is-scrolled .nav__mark{width:34px;height:38px}
.closer--short{min-height:70vh}
.gal-head{padding:calc(var(--m) + 84px) var(--m) 0}
.gal-head h1{margin:0;font:800 clamp(56px,11vw,190px)/.86 var(--syne);letter-spacing:-.035em}
.gal-head p{margin:18px 0 0;font:italic 400 clamp(19px,1.75vw,27px)/1.2 var(--fraunces);font-variation-settings:'SOFT' 50,'opsz' 48}
.filters{display:flex;flex-wrap:wrap;gap:4px 22px;padding:44px var(--m) 0;font:500 var(--meta)/1 var(--syne)}
.filters button{appearance:none;background:none;border:0;padding:8px 0;margin:0;font:inherit;color:inherit;cursor:pointer;position:relative;opacity:.72;transition:opacity .3s ease}
.filters button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.filters button:hover,.filters button[aria-pressed="true"]{opacity:1}
.filters button[aria-pressed="true"]::after{transform:scaleX(1);transform-origin:left}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px);padding:56px var(--m) 30vh;align-items:start}
.gal__col{display:grid;gap:clamp(14px,2vw,32px);will-change:transform}
.gal__item{appearance:none;background:#bfbcb4;border:0;padding:0;margin:0;display:block;width:100%;cursor:pointer;box-shadow:0 0 0 1px var(--hair);overflow:hidden;position:relative}
.gal__item img{width:100%;height:auto;display:block}
.gal__item figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font:italic 400 17px/1.2 var(--fraunces);font-variation-settings:'SOFT' 50,'opsz' 20;color:var(--plaster);background:linear-gradient(to top,rgba(28,19,17,.55),rgba(28,19,17,0));opacity:0;transition:opacity .4s ease}
.gal__item:hover figcaption,.gal__item:focus-visible figcaption{opacity:1}
.gal__item.is-hidden{display:none}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(28,19,17,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .35s ease}
.lightbox img{max-width:min(92vw,calc((100vh - 120px) * .707));max-height:calc(100vh - 120px);width:auto;height:auto;box-shadow:0 0 0 1px var(--hair-on-ink)}
.lightbox__cap{position:absolute;left:var(--m);bottom:calc(var(--m) - 2px);margin:0;color:var(--plaster);font:italic 400 clamp(18px,1.6vw,24px)/1.2 var(--fraunces);font-variation-settings:'SOFT' 50,'opsz' 48}
.lightbox__n{position:absolute;right:var(--m);bottom:calc(var(--m) - 2px);color:var(--plaster);font:500 var(--meta)/1 var(--syne);letter-spacing:.04em}
.lightbox button{appearance:none;background:none;border:0;padding:0;margin:0;color:var(--plaster);cursor:pointer;position:absolute;display:flex;align-items:center;justify-content:center;width:56px;height:56px}
.lightbox button svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lightbox__close{top:calc(var(--m) - 12px);right:calc(var(--m) - 16px)}
.lightbox__prev{left:calc(var(--m) - 16px);top:50%;transform:translateY(-50%)}
.lightbox__next{right:calc(var(--m) - 16px);top:50%;transform:translateY(-50%)}
.lightbox button:hover svg{stroke:var(--flame)}

/* ---------- phones and small screens ---------- */
@media (min-width:900px){.hero__hint{display:none}}
@media (max-width:899px){
  :root{--meta:13px}
  .nav{padding-top:18px}
  .nav__mark{width:34px;height:38px}
  .track--hero{height:280vh}
  /* on a phone the frame takes the top of the screen and the name sits under it, on plaster */
  .hero__frame{left:0;top:66px;height:calc(58svh - 66px);aspect-ratio:auto;width:100%;box-shadow:none;z-index:1}
  .hero__frame img{object-position:50% 22%}
  .hero__count{left:auto;right:var(--m);top:calc(58svh + 16px)}
  .hero__hint{right:var(--m);top:calc(58svh + 40px);text-align:right}
  .rail{right:8px;top:calc(var(--m) + 56px);bottom:calc(var(--m) + 4px)}
  .wordmark{bottom:auto;top:calc(58svh + 12px);right:auto;font-size:clamp(44px,13.4vw,108px);white-space:normal}
  .wordmark .ln{display:block}
  .wordmark__vintage{margin-left:0}
  .hero__line{top:calc(58svh + 12px + 2 * .86 * clamp(44px,13.4vw,108px) + 22px);bottom:auto;right:var(--m);max-width:16em;font-size:18px}
  .hero__cta{bottom:calc(var(--m) - 2px)}
  .track--statement{height:150vh}
  .statement__text{font-size:clamp(34px,9.6vw,56px)}
  .track--rack{height:300vh}
  .rack__caption{font-size:22px;bottom:calc(var(--m) + 30px)}
  .rack__hint{bottom:calc(var(--m) + 34px)}
  .word{padding-top:16vh}
  .track--knits{height:200vh}
  .track--tiles{height:200vh}
  .tiles__word{font-size:clamp(56px,17vw,90px)}
  .track--shop{height:240vh}
  .shop{grid-template-columns:1fr;align-content:center;gap:28px;padding:10vh var(--m) 0}
  .shop__step{left:auto;right:var(--m)}
  .shop__title{font-size:clamp(24px,7vw,40px)}
  .shop__city{margin-bottom:22px}
  .hours{margin-bottom:24px}
  .shop__photos{order:-1;max-height:38vh;aspect-ratio:701/465}
  .story{padding:18vh var(--m) 22vh}
  .story__text{margin-left:0}
  .closer__sun{right:-42vw;bottom:-60vw;width:132vw}
  .closer__body{padding-top:18vh}
  .foot{padding-top:14vh}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal__col:nth-child(3){display:none}
}
@media (max-width:899px) and (orientation:landscape){
  .hero__frame{object-position:top}
}