/* marty.css — the sideways one.

   Every other page in this portfolio moves down. This one moves ACROSS: a
   pinned section where scrolling vertically walks you left to right through the
   restaurant, in the order you would actually walk it. It suits this place
   because it is one long room, not a set of separate spaces.

   Palette off the photographs: the sage green ironwork columns, the ivy, warm
   timber, and the amber of the festoon lights. */

:root{
  --dark    :#131612;
  --dark-2  :#1C211B;
  --cream   :#F3F0E7;
  --cream-d :rgba(243,240,231,.66);
  --cream-f :rgba(243,240,231,.38);
  --sage    :#8FA98A;              /* the painted columns */
  --amber   :#E0A251;              /* the festoon bulbs */
  --line    :rgba(243,240,231,.16);
  --pad     :clamp(22px,5vw,84px);
  --serif   :"Canela","Didot",Georgia,serif;
  --sans    :-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --ease    :cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--dark);color:var(--cream);font-family:var(--sans);
  font-size:clamp(.95rem,1.05vw,1.04rem);line-height:1.64;font-weight:300;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.tag{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-f)}
.display{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(2.5rem,7vw,5.8rem)}
.display em{font-style:italic;color:var(--sage)}
.h2{font-family:var(--serif);font-weight:400;line-height:1.08;
  font-size:clamp(1.7rem,3.6vw,3rem)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:18px var(--pad);
  background:linear-gradient(180deg,rgba(19,22,18,.86),rgba(19,22,18,0))}
.nav__brand{font-family:var(--serif);font-size:1.05rem}
.nav__brand span{color:var(--sage)}
.nav__cta{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:0 20px;min-height:44px;
  display:inline-flex;align-items:center;transition:background .35s var(--ease),color .35s var(--ease)}
.nav__cta:hover{background:var(--cream);color:var(--dark)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero__shot{position:absolute;inset:0}
.hero__shot img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,22,18,.5) 0%,rgba(19,22,18,.06) 42%,rgba(19,22,18,.86) 100%)}
.hero__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(50px,10vh,116px);z-index:2}
.hero h1{margin:16px 0 18px}
.hero__sub{color:var(--cream-d);max-width:44ch}

/* ---------- THE LONG WALK: vertical scroll moves you sideways ---------- */
.walk{position:relative;background:var(--dark-2)}
.walk__track{height:460vh}                    /* the taller this is, the slower the walk */
.walk__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;
  flex-direction:column;justify-content:center}
.walk__rail{display:flex;gap:clamp(14px,2vw,30px);padding:0 var(--pad);
  width:max-content;will-change:transform}
.walk__panel{flex:0 0 auto;width:clamp(260px,42vw,560px)}
.walk__panel figure{overflow:hidden;background:var(--dark)}
.walk__panel img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.walk__panel figcaption{margin-top:14px}
.walk__panel .tag{color:var(--sage)}
.walk__panel h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.1rem,2vw,1.6rem);margin:8px 0 8px}
.walk__panel p{color:var(--cream-d);font-size:.92rem;max-width:38ch}

/* the little progress bar, so it is obvious the page is moving sideways */
.walk__bar{position:absolute;left:var(--pad);right:var(--pad);bottom:34px;height:1px;
  background:var(--line);z-index:3}
.walk__bar i{display:block;height:100%;width:0;background:var(--sage)}
.walk__hint{position:absolute;left:var(--pad);top:calc(var(--pad) + 40px);z-index:3;
  font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cream-f)}

/* with reduced motion it becomes an ordinary scrolling row */
@media (prefers-reduced-motion:reduce){
  .walk__track{height:auto}
  .walk__sticky{position:static;height:auto;padding:clamp(50px,8vh,90px) 0}
  .walk__rail{width:auto;overflow-x:auto;transform:none !important}
  .walk__bar{display:none}
}

/* ---------- a wide statement ---------- */
.say{padding:clamp(80px,14vh,180px) var(--pad);max-width:1180px;margin:0 auto}
.say p{font-family:var(--serif);font-weight:400;line-height:1.16;
  font-size:clamp(1.7rem,4.4vw,3.4rem);max-width:20ch}
.say p em{font-style:italic;color:var(--sage)}
.say small{display:block;margin-top:26px;font-size:1rem;color:var(--cream-d);max-width:52ch}

/* ---------- the live 360 ---------- */
.pano{position:relative;background:var(--dark)}
.pano__track{height:220vh}
.pano__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.pano__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .8s var(--ease)}
.pano.is-loaded .pano__canvas{opacity:1}
.pano.is-dragging .pano__canvas{cursor:grabbing}
.pano__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.pano.is-loaded .pano__poster{opacity:0;transition:opacity .8s var(--ease)}
.pano__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,22,18,.6) 0%,rgba(19,22,18,0) 36%,rgba(19,22,18,.84) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(52px,10vh,110px);z-index:2;pointer-events:none}
.pano__copy h2{max-width:16ch;margin:12px 0 18px}
.pano__hint{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);
  border-radius:100px;padding:11px 20px;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream-d)}
.pano__hint i{width:16px;height:16px;border:1px solid currentColor;border-radius:50%;
  position:relative;flex:0 0 auto}
.pano__hint i::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);animation:nudge 2.2s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translate(-140%,-50%)}50%{transform:translate(40%,-50%)}}
.pano.is-fallback .pano__canvas,.pano.is-fallback .pano__hint{display:none}
.pano.is-fallback .pano__poster{opacity:1}
/* the copy block ignores pointer events so the 360 stays draggable underneath,
   so the link out has to take them back */
.pano__copy a{pointer-events:auto}
.pano__hint--go{margin-left:10px;transition:background .3s ease,color .3s ease}
.pano__hint--go:hover{background:var(--cream);color:var(--dark)}

/* ---------- reveal, visible by default ---------- */
.js-anim [data-rise]{opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js-anim [data-rise].is-in{opacity:1;transform:none}

.foot{border-top:1px solid var(--line);padding:32px var(--pad);display:flex;
  flex-wrap:wrap;gap:9px 28px;justify-content:space-between;color:var(--cream-f);font-size:.72rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  .pano__hint i::after{animation:none}
}

/* ---------- the form ---------- */
.lead{
  --lf-bg     :var(--dark-2);
  --lf-fg     :var(--cream);
  --lf-accent :var(--sage);
  --lf-line   :var(--line);
  --lf-muted  :var(--cream-d);
}
.lead__title{font-family:var(--serif);font-weight:400}
.lead__btn{color:var(--dark);font-weight:500}
.lead__field select option{background:var(--dark-2);color:var(--cream)}