@font-face { font-family: "General Sans"; src: url("/fonts/GeneralSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "General Sans"; src: url("/fonts/GeneralSans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
  @font-face { font-family: "General Sans"; src: url("/fonts/GeneralSans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
  @font-face { font-family: "Raleway"; src: url("/fonts/Raleway-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

  /* Brand tokens sit on .ig-page, not :root: scrollcraft.css declares its
     defaults on .ig-page, and a :root value loses to that nearer one. */
  .ig-page {
    --sc-canvas:     #0b0908;
    --sc-surface:    #17120f;
    --sc-ink:        #fbf7f2;
    --sc-ink-soft:   #cfc3b6;
    --sc-accent:     #ff9f00;
    --sc-accent-ink: #0b0908;
    --sc-font-display: "General Sans", "HK Gothic", system-ui, sans-serif;
    --sc-font-text:    "Raleway", system-ui, sans-serif;
    --sc-shadow-color: 24 40% 3%;
    --sc-r-sm: 8px; --sc-r-md: 16px; --sc-r-lg: 22px;
    --orange-hover: #e68f00;
    --white-hover: #e9e2d9;
    --glass: rgba(22, 15, 11, .52);
    --glass-bright: rgba(22, 15, 11, .64);
    --glass-foot: linear-gradient(180deg, rgba(22, 15, 11, 0) 0%, rgba(22, 15, 11, .3) 100%);
    --cta-h: 54px;
  }
  html { scroll-behavior: auto; }

  /* The site header (5rem, sticky) sits above this page in the flow, which
     pushed the viewport-tall hero 5rem down and its two doors below the first
     screen on phones. Start the page under the header, where every pinned
     scene already sits once you scroll. */
  .ig-page { margin-top: -5rem; }

  /* Scenes dissolve: every scene after the first overlaps the one before it by
     --blend and feathers the top of its imagery over that distance, so one room
     fades into the next while the page slides. The card sits outside the mask. */
  :root { --blend: 28svh; }
  .scene + .scene, .scene + .close { margin-top: calc(-1 * var(--blend)); }
  .scene + .scene .hold { background: transparent; }
  .scene + .scene .depth {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blend));
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blend));
  }

  /* --------------------------------------------------------------- chrome -- */
  .brand {
    position: fixed; z-index: 70; left: var(--sc-gutter); top: max(1.1rem, env(safe-area-inset-top));
    display: flex; align-items: center; gap: .6rem; color: var(--sc-ink);
    font-family: var(--sc-font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.005em;
    pointer-events: none;
  }
  .brand img { width: 30px; height: 30px; }

  /* ---------------------------------------------------------------- scene -- */
  .scene--flow { height: calc(128svh + var(--blend)); position: relative; }
  .hold--flow { position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: var(--sc-z-stage); }
  .hold { background: var(--sc-canvas); isolation: isolate; }
  .depth { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 50% 45%; overflow: hidden; }
  .stage3d { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
  .sway { position: absolute; inset: 0; transform-style: preserve-3d; }
  .worldbox { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; transform: translateZ(-160px) scale(1.16); transform-style: preserve-3d; }
  .world { position: relative; flex: none; width: max(100vw, calc(100svh * 16 / 9)); aspect-ratio: 16 / 9; will-change: transform; }
  .world picture { display: contents; }
  .world img { position: absolute; max-width: none; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .world .table { inset: auto 0 0 0; height: auto; }
  @media (max-aspect-ratio: 0.64) {
    .world { width: auto; height: 100%; aspect-ratio: 9 / 16; }
    .hold--hero .worldbox { align-items: flex-start; }
    .hold--hero .world { height: 118%; top: -8%; }
  }

  .figw {
    position: absolute; left: var(--fx); bottom: var(--fb); height: var(--fh);
    translate: -50% 0; transform-origin: 50% 100%; will-change: transform; opacity: 1;
    transform: translateZ(0);
  }
  .fig { height: 100%; width: auto; display: block; max-width: none; filter: brightness(.98) saturate(.96) drop-shadow(0 30px 40px rgba(6, 3, 1, .55)); }
  .fgw { position: absolute; left: 50%; bottom: -6svh; width: 150vw; translate: -50% 0; transform-origin: 50% 100%; will-change: transform; transform: translateZ(130px) scale(.9); pointer-events: none; }
  .fg { width: 100%; height: auto; display: block; max-width: none; }

  /* ambient light. Gradients only, animated, gated to no-preference. */
  .amb { position: absolute; inset: 0; pointer-events: none; transform: translateZ(-60px) scale(1.05); }
  .amb::before, .amb::after { content: ""; position: absolute; border-radius: 50%; filter: blur(14px); mix-blend-mode: screen; opacity: 0; }
  .amb--heat::before { left: 8%; bottom: 14svh; width: 34vw; height: 22svh; background: radial-gradient(closest-side, rgba(255, 220, 190, .5), transparent); }
  .amb--heat::after  { left: 28%; bottom: 12svh; width: 26vw; height: 20svh; background: radial-gradient(closest-side, rgba(255, 235, 215, .42), transparent); }
  .amb--amber::before { left: 50%; top: 30svh; width: 70vw; height: 40svh; translate: -50% 0; background: radial-gradient(closest-side, rgba(255, 170, 70, .3), transparent); }
  .amb--dusk::before { left: 60%; top: 18svh; width: 60vw; height: 36svh; background: radial-gradient(closest-side, rgba(255, 190, 110, .26), transparent); }
  .amb--flare::before { right: -10%; top: 6svh; width: 60vw; height: 40svh; background: radial-gradient(closest-side, rgba(255, 200, 140, .3), transparent); }
  .amb--candle::before { left: 50%; top: 46svh; width: 42vw; height: 24svh; translate: -50% 0; background: radial-gradient(closest-side, rgba(255, 190, 100, .38), transparent); }
  @media (prefers-reduced-motion: no-preference) {
    .amb--heat::before { animation: steam 7.5s ease-in-out infinite; }
    .amb--heat::after  { animation: steam 9s ease-in-out 2.6s infinite; }
    .amb--amber::before, .amb--dusk::before, .amb--flare::before { animation: pulse 6s ease-in-out infinite alternate; }
    .amb--candle::before { animation: flicker 3.4s linear infinite; }
    .fg--twinkle { animation: twinkle 4.2s ease-in-out infinite alternate; }
    .sway { animation: sway 11s ease-in-out infinite alternate; }
    .fig { animation: breathe 6s ease-in-out infinite; }
  }
  @keyframes steam { 0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(.8); } 35% { opacity: .75; } 100% { opacity: 0; transform: translate3d(12px, -90px, 0) scale(1.25); } }
  @keyframes pulse { from { opacity: .55; } to { opacity: 1; } }
  @keyframes flicker { 0% { opacity: .8; } 11% { opacity: .55; } 23% { opacity: .9; } 37% { opacity: .62; } 52% { opacity: .95; } 64% { opacity: .7; } 81% { opacity: .88; } 100% { opacity: .8; } }
  @keyframes twinkle { from { opacity: .72; } to { opacity: 1; } }
  @keyframes sway { from { transform: rotateY(-.7deg) rotateX(.3deg); } to { transform: rotateY(.7deg) rotateX(-.3deg); } }
  @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
  @keyframes arrive { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.97); } to { opacity: 1; transform: none; } }

  /* scrims: siblings of copy */
  .scrim { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
  .scrim--band { background: linear-gradient(180deg, transparent 40%, rgba(11, 9, 8, .7) 74%, rgba(11, 9, 8, .94) 100%); }

  /* copy that lives on the table (hero + close share the doors) */
  .copy { position: absolute; z-index: 40; left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(env(safe-area-inset-bottom) + 1.75rem); }
  .question { margin: 0; font-size: var(--sc-t-2xl); line-height: 1.02; }
  .question .soft { color: #d9cfc3; }
  .ctas { display: flex; gap: .625rem; margin-top: var(--sc-5); }
  .cta {
    display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0;
    min-height: var(--cta-h); padding: 0 1.4rem; border-radius: var(--sc-r-pill);
    font-family: var(--sc-font-display); font-weight: 600; font-size: .98rem; letter-spacing: -0.005em;
    color: var(--sc-accent-ink); text-decoration: none; white-space: nowrap;
    transition: background-color 140ms var(--sc-ease-out), transform 110ms var(--sc-ease-out);
    box-shadow: var(--sc-e1);
  }
  .cta--host { background: var(--sc-accent); box-shadow: 0 8px 20px rgba(255, 159, 0, .22), var(--sc-e1); }
  .cta--host:hover { background: var(--orange-hover); }
  .cta--find { background: #fefefe; }
  .cta--find:hover { background: var(--white-hover); }
  .cta:active { transform: scale(.98); }
  .cta:focus-visible { outline: 2px solid #fefefe; outline-offset: 3px; }
  .cta--find:focus-visible { outline-color: var(--sc-accent); }

  /* the glass card */
  .card {
    position: absolute; z-index: 40; left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(env(safe-area-inset-bottom) + 2.5svh);
    padding: 1.15rem 1.25rem 1.3rem; border-radius: var(--sc-r-lg);
    background-color: var(--glass); background-image: var(--glass-foot); color: var(--sc-ink);
    -webkit-backdrop-filter: blur(16px) saturate(1.12); backdrop-filter: blur(16px) saturate(1.12);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(6, 3, 1, .2), 0 24px 60px -24px rgba(6, 3, 1, .7);
  }
  #scene-guest .card, #scene-chef .card, #scene-creator .card { background-color: var(--glass-bright); }
  .card__role { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.025em; line-height: 1.05; }
  .card__story { margin: .45rem 0 0; font-family: var(--sc-font-text); font-weight: 300; font-size: .88rem; line-height: 1.45; color: var(--sc-ink-soft); }
  .card__why { margin: .8rem 0 0; font-family: var(--sc-font-text); font-weight: 500; font-size: 1rem; line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }
  .card__perks { margin: .85rem 0 0; padding: 0; list-style: none; display: grid; gap: .38rem; }
  .card__perks li { position: relative; padding-left: 1rem; font-family: var(--sc-font-text); font-size: .88rem; line-height: 1.4; color: var(--sc-ink-soft); }
  .card__perks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--sc-accent); }
  .card__rule { height: 1px; border: 0; margin: .9rem 0 0; background: rgba(255, 255, 255, .12); }

  /* ------------------------------------------------------------ the close -- */
  .close {
    position: relative; overflow: hidden; z-index: var(--sc-z-stage);
    background: linear-gradient(to bottom, transparent 0, var(--sc-canvas) var(--blend));
    min-height: 100svh; display: grid; align-items: start; justify-items: center;
    padding: clamp(7rem, 34svh, 13rem) var(--sc-gutter) calc(env(safe-area-inset-bottom) + var(--sc-6));
  }
  .close__candle { position: absolute; right: -8%; bottom: -2%; width: min(720px, 92vw); height: auto; transform: scaleX(-1); opacity: .95; pointer-events: none; max-width: none; z-index: 0; }
  .close__inner { position: relative; z-index: 1; width: 100%; max-width: 640px; text-align: center; }
  .close__lede { margin: 0 0 var(--sc-4); font-family: var(--sc-font-text); font-weight: 300; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }
  .close__q { margin: 0 auto; max-width: 12ch; font-size: var(--sc-t-2xl); }
  .close .ctas { justify-content: center; margin-top: var(--sc-6); }
  .close .cta { flex: 0 1 auto; min-width: 150px; }
  .foot {
    position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(env(safe-area-inset-bottom) + 1.25rem);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 1;
    font-family: var(--sc-font-text); font-size: .8rem; color: var(--sc-ink-soft);
  }
  .foot .brand { position: static; font-size: .95rem; pointer-events: auto; }
  .foot .brand img { width: 24px; height: 24px; }
  .foot a { color: inherit; text-decoration: none; }
  .foot a:hover { text-decoration: underline; }
  .foot__tag { display: none; }
  @media (min-width: 620px) { .foot__tag { display: block; } }

  /* "Find an experience" cannot wrap: tighten both doors on narrow phones */
  @media (max-width: 400px) {
    .cta { padding: 0 .9rem; font-size: .9rem; }
    .close .cta { min-width: 0; }
  }

  /* ----------------------------------------------------------- placements -- */
  /* phone first: x centre, bottom, height, all against the viewport */
  .figw--guest      { --fx: 72%; --fb: 24svh; --fh: 52svh; }
  .figw--venuehost  { --fx: 62%; --fb: 14svh; --fh: 70svh; }
  .figw--chef       { --fx: 64%; --fb: 16svh; --fh: 70svh; }
  .figw--mixologist { --fx: 54%; --fb: 26svh; --fh: 62svh; }
  .figw--creator    { --fx: 36%; --fb: 16svh; --fh: 70svh; }
  .fgw--pass   { width: 170vw; left: 44%; }
  .fgw--bar    { width: 160vw; left: 56%; }
  .fgw--lights { width: 150vw; left: 50%; bottom: -4svh; }
  .fgw--bokeh  { width: 170vw; left: 46%; }

  @media (min-width: 861px) {
    .copy { right: auto; max-width: 860px; bottom: clamp(2.5rem, 11vh, 7rem); }
    .question { font-size: var(--sc-t-3xl); }
    .cta { flex: 0 0 auto; padding: 0 2rem; font-size: 1.02rem; min-height: 56px; }
    .scrim--band { background:
      radial-gradient(60% 66% at 0% 100%, rgba(11, 9, 8, .92), rgba(11, 9, 8, .6) 50%, transparent 100%),
      linear-gradient(180deg, transparent 66%, rgba(11, 9, 8, .5) 100%); }
    .card { left: 6vw; right: auto; top: 20svh; bottom: auto; width: min(470px, 36vw); padding: 1.6rem 1.75rem 1.75rem; }
    .card__role { font-size: 1.9rem; }
    .card__story { font-size: .95rem; margin-top: .6rem; }
    .card__why { font-size: 1.1rem; margin-top: 1rem; }
    .card__perks { margin-top: 1.05rem; gap: .5rem; }
    .card__perks li { font-size: .95rem; }
    .close__q { font-size: var(--sc-t-3xl); max-width: 14ch; }
    .close { padding-top: clamp(8rem, 36svh, 15rem); }
    .figw--guest      { --fx: 74%; --fb: -6svh; --fh: 84svh; }
    .figw--venuehost  { --fx: 70%; --fb: -10svh; --fh: 94svh; }
    .figw--chef       { --fx: 68%; --fb: -10svh; --fh: 94svh; }
    .figw--mixologist { --fx: 66%; --fb: 22svh; --fh: 72svh; }
    .figw--creator    { --fx: 64%; --fb: -10svh; --fh: 94svh; }
    .fgw { width: 104vw; bottom: -5svh; }
    .fgw--pass, .fgw--bar, .fgw--bokeh { width: 104vw; left: 50%; }
    .fgw--lights { width: 48vw; left: 20vw; bottom: -4svh; }
    .amb--heat::before { left: 18%; bottom: 8svh; width: 24vw; height: 30svh; }
    .amb--heat::after  { left: 30%; bottom: 6svh; width: 18vw; height: 26svh; }
  }

  @media (prefers-reduced-motion: reduce) {
    .figw { transition-duration: 1ms; }
  }