/* ============================================================
   Humans Negombo — restaurant site
   Display: Fraunces · Text: Inter
   ============================================================ */

:root{
  --cream:#faebd7;
  --ink:#0d0d0d;
  --ink-soft:#171717;
  --rose:#c59594;
  --sage:#9daaaa;
  --brown:#483d3b;
  --shell:#ebeae6;

  --nav-h:90px;
  --gut:40px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* The canvas is ink and only <body> is cream, so everything outside the
     page (iOS status-bar tint, rubber-band overscroll above the hero and below
     the footer) matches the dark sections it sits against. */
  background:var(--ink);
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink-soft);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:18px;
  line-height:1.6;
  letter-spacing:-.011em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}

/* ---------- display type ---------- */
.display{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-weight:400;
  font-optical-sizing:auto;
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--ink);
}
/* Type scale is fluid within each breakpoint, matching the reference:
   the big display sizes are vw-driven, component text is fixed per step.
   Masked headings carry bottom padding (below) so descenders clear the mask. */
.display--hero{font-size:min(10.4vw,200px);line-height:1.04;letter-spacing:-.025em;color:var(--cream)}
.display--xl{font-size:min(9.6vw,186px);line-height:1.04;letter-spacing:-.025em}
.display--lg{font-size:min(7.6vw,148px);line-height:1.04;letter-spacing:-.03em}
.display--card{font-size:56px;line-height:1.1}
.display--drink{font-size:42px}
.display--sm{font-size:30px;line-height:1.15;letter-spacing:-.015em}

.lede{
  font-size:18px;
  line-height:1.6;
  letter-spacing:-.011em;
  max-width:390px;
  margin-inline:auto;
  text-align:center;
}

/* ---------- reveal primitives ---------- */
/* one-line mask: the heading slides up out of an overflow-clipped box.
   The padding is in the heading's own em, deep enough for Fraunces' g/y/p tails. */
.mask{overflow:hidden;display:block}
.mask > .display{padding-bottom:.24em}

.reveal-line{
  transform:translateY(105%);
  will-change:transform;
}
.is-in .reveal-line,
.reveal-line.is-in{
  transform:translateY(0);
  transition:transform 1.02s var(--ease-out);
}

.reveal{
  opacity:0;
  transform:translateY(22px);
  will-change:transform,opacity;
}
.reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:var(--d,0ms);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal-line{transform:none}
  .reveal{opacity:1;transform:none}
  .marquee__track,.card__ghost-track{animation:none !important}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 26px;
  border-radius:999px;
  border:1px solid currentColor;
  font-size:16px;
  font-weight:500;
  letter-spacing:-.011em;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .45s var(--ease);
}
.btn span{position:relative;z-index:1}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover::before{transform:translateY(0)}

.btn--light{color:var(--cream)}
.btn--light::before{background:var(--cream)}
.btn--light:hover{color:var(--ink)}

.btn--dark{color:var(--ink)}
.btn--dark::before{background:var(--ink)}
.btn--dark:hover{color:var(--cream)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:absolute;
  inset:0 0 auto 0;
  z-index:20;
  height:var(--nav-h);
  padding:20px var(--gut);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.nav__logo img{width:40px;height:auto}
.nav__right{display:flex;align-items:center;gap:40px}
.nav__links{display:flex;align-items:center;gap:24px}
.nav__links a{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.011em;
  text-transform:uppercase;
  color:var(--cream);
  position:relative;
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-3px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__burger{
  display:none;
  width:44px;height:44px;
  padding:0;
  background:none;
  border:1px solid var(--cream);
  border-radius:999px;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.nav__burger span{display:block;width:16px;height:1.5px;background:var(--cream);transition:transform .4s var(--ease)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  /* Fill the *large* viewport so the photo runs under mobile browser
     toolbars, but centre the copy in the *small* one (the part that's never
     covered) by padding out the difference. Desktop: lvh = svh, no change.
     Browsers without these units keep the 100vh fallback. */
  min-height:100vh;
  min-height:100lvh;
  padding-bottom:calc(100lvh - 100svh);
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--ink);
}
.hero__media{position:absolute;inset:0}
.hero__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
  transform:scale(1.06);
  will-change:transform;
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.05) 26%,rgba(0,0,0,.05) 62%,rgba(0,0,0,.4) 100%);
}
.hero__inner{
  position:relative;
  z-index:5;
  width:100%;
  padding:0 var(--gut);
  text-align:center;
}
.mask--hero{padding-bottom:.02em}
.hero__tag{
  margin-top:-.2em;
  color:var(--cream);
  font-size:16px;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
}
.hero__cta{margin-top:26px}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding:120px 0 130px;text-align:center}
.about__head{padding:0 var(--gut)}
.about__body{padding:44px var(--gut) 0;display:grid;justify-items:center;gap:32px}

/* ---------- marquee engine ---------- */
.marquee{overflow:hidden;width:100%}
.marquee__track{
  display:flex;
  width:max-content;
  animation:slide var(--dur,30s) linear infinite;
}
.marquee__track--rev{animation-direction:reverse}
.marquee__group{display:flex;align-items:center;flex:0 0 auto}
@keyframes slide{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-100% / var(--copies,2)),0,0)}
}
/* hand-scrollable variant: main.js moves the track and handles drag,
   swipe and wheel; vertical swipes still scroll the page */
.marquee[data-scroll]{touch-action:pan-y;cursor:grab;user-select:none}
.marquee[data-scroll] .marquee__track{animation:none;will-change:transform}
.marquee[data-scroll] img{-webkit-user-drag:none}
.marquee[data-scroll].is-dragging{cursor:grabbing}

/* gallery tiles */
.marquee--gallery{margin-top:8px}
.tile{margin:0 4px;flex:0 0 auto;width:282px;height:354px;overflow:hidden;background:var(--shell)}
.tile img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{background:var(--ink);color:var(--cream);padding:8px 0}
.ticker .marquee__group{gap:14px;padding-right:14px}
.ticker span,.ticker i{
  font-size:18px;
  font-weight:400;
  font-style:normal;
  letter-spacing:-.011em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ticker i{opacity:.75}

/* ============================================================
   SIGNATURE DISHES + CARD STACK
   ============================================================ */
.selection{padding:120px 0 0;text-align:center}
.selection__head{padding:0 var(--gut);display:grid;justify-items:center;gap:36px}

.stack{
  margin:96px auto 0;
  width:min(1400px,100% - 2*var(--gut));
  display:flex;
  flex-direction:column;
  gap:30px;
  padding-bottom:140px;
}
/* Every card shares one width and one centre line. Each sticks a little
   lower than the one before, so the outlined top edges of the cards
   underneath stay visible as a stack. */
.stack__item{
  position:sticky;
  /* centred in the viewport (--card-h is the tallest card, measured in
     main.js); never higher than just under the nav if a card is too tall */
  top:calc(max(var(--nav-h) - 18px, (100svh - var(--card-h,655px)) / 2) + var(--i,0) * 16px);
  width:min(1120px,100%);
  align-self:center;
  transform:rotate(var(--rot));
}

.card{
  position:relative;
  width:100%;
  min-height:655px;
  border:1.5px solid var(--ink);
  border-radius:14px;
  padding:32px 40px;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  text-align:left;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.55);
}
.card--dark{background:var(--ink);color:var(--cream);box-shadow:0 30px 70px -40px rgba(0,0,0,.55),inset 0 0 0 1px rgba(250,235,215,.16)}
.card--light{background:var(--cream);color:var(--ink)}
/* .display hard-codes ink, so restate it per card colourway */
.card--dark .display{color:var(--cream)}
.card--light .display{color:var(--ink)}

/* oversized ghost wordmark behind the content, scrolling as a marquee:
   four copies in the track, moved by half its width, loop seamlessly */
.card__ghost{
  position:absolute;
  top:6px;left:0;right:0;
  overflow:hidden;
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-size:clamp(64px,7.4vw,104px);
  line-height:1;
  letter-spacing:-.03em;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}
.card__ghost-track{
  display:flex;
  width:max-content;
  animation:ghost 26s linear infinite;
}
.card__ghost-track span{padding-right:.3em}
.stack__item:nth-child(even) .card__ghost-track{animation-direction:reverse}
@keyframes ghost{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.card--dark .card__ghost{color:#fff;opacity:.055}
.card--light .card__ghost{color:var(--ink);opacity:.085}

.card__badge{
  position:absolute;
  top:32px;left:40px;
  width:60px;height:60px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:15px;
  font-weight:500;
  letter-spacing:-.011em;
  z-index:3;
}
.card--dark .card__badge{background:var(--cream);color:var(--ink)}
.card--light .card__badge{background:var(--ink);color:var(--cream)}

.card__text{position:relative;z-index:2;align-self:end;padding-bottom:18px;max-width:530px}
.card__text p{font-size:17px;line-height:1.6;margin:18px 0 28px;max-width:44ch}

.card__shot{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  height:100%;
  min-height:360px;
  padding:26px 0 10px;
}
.card__shot img{
  max-height:385px;
  max-width:min(430px,100%);
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.42));
  transition:transform .8s var(--ease);
}
.card:hover .card__shot img{transform:scale(1.045) rotate(-1.2deg)}
/* landscape plates read small at the square slot size — give them the full column */
.card__shot--wide img{max-width:min(540px,100%)}

/* ============================================================
   LOUNGE — pinned split reveal
   ============================================================ */
.speak{
  position:relative;
  height:300vh;
  background:var(--ink);
}
.speak__pin{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
}
.speak__shutter{
  position:absolute;
  top:0;
  /* 1px of overlap so no hairline of the panel shows through the seam */
  width:calc(50% + 1px);
  height:100%;
  z-index:2;
  will-change:transform;
}
.speak__shutter img{width:100%;height:100%;object-fit:cover}
/* Scale from the inner (centre) edges so the extra 14% bleeds off the
   outside of the screen and the seam stays pinned to the middle — scaling
   from the outer edges pushed the seam ~7vw left of centre. */
.speak__shutter--l{left:0;transform-origin:right center}
.speak__shutter--r{right:0;transform-origin:left center}

.speak__panel{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:26px;
  padding:0 var(--gut);
  text-align:center;
  color:var(--cream);
}
.speak__panel .display{color:var(--cream)}
.speak__panel .lede{color:var(--cream)}

/* ============================================================
   DRINKS
   ============================================================ */
.drinks{padding:130px 0 130px;text-align:center;overflow:hidden}
.drinks__head{padding:0 var(--gut);display:grid;justify-items:center;gap:26px}
.marquee--drinks{margin-top:74px}
.marquee--drinks .marquee__group{gap:23px;padding-right:23px}

.drink{
  flex:0 0 auto;
  width:396px;
  min-height:665px;
  border-radius:12px;
  padding:34px 28px 30px;
  color:var(--cream);
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  justify-items:center;
  gap:10px;
  text-align:center;
}
.drink--ink{background:var(--ink)}
.drink--rose{background:var(--rose)}
.drink--sage{background:var(--sage)}
.drink--brown{background:var(--brown)}

.drink__meta{font-size:15px;letter-spacing:-.011em;opacity:.9}
.drink__meta i{font-style:normal;opacity:.6;padding:0 6px}
.drink .display--drink{color:var(--cream)}
.drink__desc{font-size:16px;line-height:1.55;max-width:30ch;opacity:.92}

.drink__shot{
  display:grid;
  place-items:center;
  width:100%;
  padding:14px 0 6px;
  min-height:290px;
}
.drink__shot img{
  max-height:300px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.34));
  transition:transform .8s var(--ease);
}
.drink:hover .drink__shot img{transform:translateY(-8px) scale(1.04)}

.drink__pair{display:grid;gap:2px;font-size:16px}
.drink__pair b{font-weight:700}
.drink__pair span{opacity:.92}

/* ============================================================
   BOOK A TABLE
   ============================================================ */
.book{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--ink);
}
.book__media{position:absolute;inset:0}
.book__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%;will-change:transform}
.book__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 50% 46%,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 100%),
    rgba(0,0,0,.36);
}
.book__inner{
  position:relative;
  z-index:3;
  display:grid;
  justify-items:center;
  gap:24px;
  padding:0 var(--gut);
  text-align:center;
  color:var(--cream);
}
.book__inner .display{color:var(--cream)}
.book__inner .lede{color:var(--cream)}

/* ============================================================
   STRIP
   ============================================================ */
.strip{background:var(--cream);padding:6px 0}
.strip .tile{height:341px}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--ink);
  color:var(--cream);
  padding:110px var(--gut) 34px;
  text-align:center;
}
.foot .display{color:var(--cream)}
.mask--foot{padding-bottom:.02em}
.foot .lede{color:var(--cream);margin-top:52px}

.foot__cols{
  margin:88px auto 0;
  max-width:1360px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}
.foot__col h3{margin-bottom:22px}
.foot__col p{
  font-size:14px;
  font-weight:500;
  letter-spacing:-.011em;
  text-transform:uppercase;
  margin:14px 0;
}
.foot__col a{position:relative}
.foot__col 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);
}
.foot__col a:hover::after{transform:scaleX(1);transform-origin:left}

.foot__bar{
  margin-top:92px;
  padding-top:26px;
  border-top:1px solid rgba(250,235,215,.28);
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-size:15px;
}
.foot__bar p:last-child{text-transform:uppercase;font-size:14px;font-weight:500}

/* ---------- back to top ----------
   Ink disc with a cream ring so it reads on both the cream and the dark
   sections; the hover is the same fill wipe as .btn. Hidden until the
   visitor is a screen down (main.js toggles .is-shown). */
.totop{
  position:fixed;
  right:var(--gut);
  bottom:calc(var(--gut) + env(safe-area-inset-bottom, 0px));
  z-index:60;
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:999px;
  border:1px solid var(--cream);
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s linear .4s,color .45s var(--ease);
}
.totop.is-shown{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s,color .45s var(--ease);
}
.totop::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  background:var(--cream);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.totop svg{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--ease);
}
.totop:hover,.totop:focus-visible{color:var(--ink)}
.totop:hover::before,.totop:focus-visible::before{transform:translateY(0)}
.totop:hover svg{transform:translateY(-3px)}
.totop:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1199px){
  :root{--gut:28px}

  .display--hero{font-size:13.8vw}
  .display--xl{font-size:10.8vw}
  .display--lg{font-size:8.7vw}
  .display--card{font-size:46px}
  .display--drink{font-size:44px}

  .card{grid-template-columns:1fr 1fr;min-height:0}
  .card__shot img{max-height:330px}
}

@media (max-width:809px){
  :root{--gut:20px;--nav-h:76px}
  body{font-size:14px}

  .display--hero{font-size:20vw}
  .display--xl,
  .display--lg{font-size:12.6vw}
  .display--card{font-size:34px}
  .display--drink{font-size:30px}
  .lede{font-size:14px;line-height:1.6}
  .hero__tag{font-size:12px;letter-spacing:.28em}

  .nav__right{display:none}
  .nav__burger{display:flex}
  .nav.is-open .nav__right{
    display:flex;
    position:absolute;
    top:var(--nav-h);
    left:var(--gut);right:var(--gut);
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:22px;
    background:rgba(13,13,13,.94);
    backdrop-filter:blur(8px);
    border-radius:14px;
  }
  .nav.is-open .nav__links{flex-direction:column;align-items:flex-start;gap:14px}

  .about{padding:80px 0 86px}
  .selection{padding:80px 0 0}
  .drinks{padding:86px 0 90px}
  .foot{padding-top:80px}

  .tile{width:200px;height:252px}
  .strip .tile{height:238px}

  /* Same sticky slide-over stack as desktop, with half the tilt. The nav
     isn't fixed on mobile, so a card too tall to centre sticks near the top. */
  .stack{gap:22px;padding-bottom:70px;width:calc(100% - 2*var(--gut))}
  .stack__item{top:calc(max(14px, (100svh - var(--card-h,600px)) / 2) + var(--i,0) * 10px);transform:rotate(calc(var(--rot) / 2))}
  .card{
    grid-template-columns:1fr;
    padding:26px 22px 30px;
    gap:6px;
  }
  .card__badge{top:22px;left:auto;right:22px}
  .card__text{order:2;padding-bottom:0;max-width:none}
  .card__text p{font-size:14px;margin:14px 0 22px}
  .card__shot{order:1;min-height:0;padding:34px 0 10px}
  /* A stuck card taller than the screen would be covered before its button
     is seen, so the photo gives up height on short screens: ~400px is the
     rest of the card (text, button, padding) plus the sticky offset. */
  .card__shot img{max-height:min(250px,calc(100svh - 400px))}
  .card__ghost{font-size:50px;top:2px}

  .speak{height:260vh}
  .drink{width:300px;min-height:0;padding:26px 20px 24px}
  .drink__desc,.drink__pair{font-size:14px}
  .drink__shot{min-height:210px}
  .drink__shot img{max-height:220px}
  .marquee--drinks .marquee__group{gap:16px;padding-right:16px}

  .foot__cols{grid-template-columns:1fr;gap:44px;margin-top:64px}
  .foot__bar{flex-direction:column;align-items:center;text-align:center;margin-top:64px}
  .display--sm{font-size:26px}
  .totop{width:46px;height:46px}
}

@media (max-width:480px){
  .tile{width:164px;height:206px}
  .strip .tile{height:196px}
  .drink{width:min(84vw,300px)}
}