/* Tokens: the source's colours and type, measured at 1440. A brand swap only touches this block. */
:root {
  --coral: rgb(245, 118, 93);
  --coral2: rgb(211, 86, 61);
  --ink: #000;
  --foot: rgb(26, 25, 25);
  --hair: rgb(65, 65, 65);
  --soft: rgba(255, 255, 255, .7);
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --side: max(100px, calc((100% - 1200px) / 2)); /* measured: 1200 container, centred (x113 with the scrollbar) */
  /* Spring read from the source's Element.animate log (Framer linear() easing): settles without overshoot. */
  --spring: linear(0, .04 3%, .16 7%, .48 16%, .72 25%, .88 35%, .96 46%, 1 60%, 1);
  --H: 0px; --k: 1.9; --z: 1;
}

* { box-sizing: border-box; }
/* The source shows a scrollbar: keep the same content width. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-y: scroll; background: #000; }
body { margin: 0; background: #000; color: #fff; font-family: var(--sans); font-size: 16px; line-height: 24px; letter-spacing: .64px; overflow-x: clip; }
h1, h2, h3, h4, p, figure { margin: 0; }
img, video, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.page { position: relative; overflow-x: clip; }
.pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; background: var(--coral); color: #000; font-family: var(--serif); white-space: nowrap; transition: background-color .2s linear; }
.pill:hover { background: #fff; }
.pill.big { flex: none; height: 59px; width: var(--w, auto); padding: 0 30px; font-size: 26px; line-height: 39px; letter-spacing: 1.04px; }
.pill.ghost { background: transparent; color: var(--coral); border: 2px solid var(--coral); }
.hero-btns .pill { width: 256px; }
.hero-btns .pill.ghost { width: 230px; margin-left: 11px; }
.pill.ghost:hover { background: #fff; color: #000; border-color: #fff; }

/* Measured nav: fixed, no background. Entrance: translateY -108 to 0, 400 ms delay 600, cubic-bezier(.44,0,.56,1). */
.nav { position: fixed; z-index: 9; top: 0; left: 0; right: 0; height: 105px; padding: 26px var(--side) 0; display: flex; align-items: flex-start; justify-content: space-between; animation: navin .4s cubic-bezier(.44, 0, .56, 1) .6s both; }
@keyframes navin { from { transform: translateY(-108px); opacity: 0; } }
.logo { margin-top: 3px; font-family: var(--serif); font-size: 40px; line-height: 48px; white-space: nowrap; }
.links { display: flex; gap: 32px; margin: 10px 32px 0 auto; font-family: var(--serif); font-size: 22px; line-height: 33px; letter-spacing: .88px; white-space: nowrap; }
.links a { transition: color .2s linear; }
.links a:hover { color: var(--coral); }
.gymlink { display: none; }
.nav-pill { height: 53px; width: 171px; padding: 0; font-size: 22px; line-height: 33px; letter-spacing: .88px; }
.burger { display: none; }

/* Measured hero: h1 at y271, media 600 x 625 at y147. Entrances from the source's animate log. */
.hero { position: relative; height: var(--vh, 100vh); padding: max(90px, calc(var(--vh, 100vh) / 2 - 179px)) var(--side) 0; overflow: hidden; }
.hero-text { position: relative; z-index: 2; width: min(510px, 50%); }
h1 { font-family: var(--serif); font-weight: 400; font-size: 60px; line-height: 70.2px; }
h1 em { color: var(--coral); }
.hero-text > p { margin-top: 12.400px; padding-right: 70px; }
.hero-btns { margin-top: 24px; display: flex; animation: up .8s var(--spring) .4s both; width: max-content; }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
.hero-media { --mw: min(600px, max(calc(468px + (100vw - 1185px) * .7375), calc(527px + (100vw - 1265px) * .9125))); /* fitted to the source at 1185, 1265 and 1345 content width */ position: absolute; top: calc(var(--vh, 100vh) / 2 + 9.5px - var(--mw) * 625 / 1200); right: var(--side); width: var(--mw); height: calc(var(--mw) * 625 / 600); animation: fromright .4s var(--spring) both; }
@keyframes fromright { from { transform: translateX(150px); opacity: 0; } }
/* The film's own background is pure black (Y 16 in every corner). The spoon handle meets the frame edge, so it fades out. */
.hero-media video { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 86%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 50%, #000 86%, transparent 100%); }
.vword { position: absolute; z-index: 2; top: calc(var(--vh, 100vh) / 2 - 229px + max(0px, (1360px - 100vw) * .16)); right: var(--side); width: 55px; display: grid; justify-items: center; font-family: var(--serif); font-size: 55px; line-height: 80.3px; animation: fade .4s linear .6s both; }
.vword span { background: linear-gradient(var(--coral), var(--coral2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes fade { from { opacity: 0; } }

/* Measured sections: 100 top padding, head at 2 columns, 514 apart. */
.sec { position: relative; padding: 100px var(--side) 100px; }
.glyph { position: absolute; top: 6px; left: calc(var(--side) + 677px); font-family: var(--serif); font-size: 240px; line-height: 240px; background: linear-gradient(90deg, rgb(65, 65, 65) 0%, #000 136%); -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; white-space: nowrap; opacity: .24; }
.glyph.left { left: var(--side); top: 0; }
/* Measured: this section alone has 120 padding. */
.sec.reserve { padding-block: 120px; }
.reserve .glyph { left: calc(var(--side) + 720px); top: 20px; }
.glyph.stack { left: calc(var(--side) - 36px); top: 9px; display: grid; }
.glyph.stack i { display: block; width: 312px; height: 240px; font-style: normal; text-align: left; padding-left: 36px; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }
.head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
h2 { font-family: var(--serif); font-weight: 400; font-size: 50px; line-height: 58.5px; letter-spacing: normal; }
.head h2 { color: var(--coral); white-space: nowrap; }
.head h2 span { display: inline-block; white-space: pre; }
.head h2 { flex: 3 1 0; min-width: 0; }
.head p { flex: 4 1 0; min-width: 0; }

/* Measured letters: blur 10 to 0, opacity .001 to 1, 400 ms, 50 ms per letter, on entering view. */
.head h2.ready span { filter: blur(10px); opacity: .001; }
.head h2.in span { filter: blur(0); opacity: 1; transition: filter .4s var(--spring), opacity .4s var(--spring); transition-delay: calc(var(--i) * 50ms); }

/* Measured experience: cards 392 x 420, radius 32, gap 12; image parallax over scroll 0 to 700. */
.exp-cards { position: relative; margin-top: 64px; display: flex; gap: 12px; }
.exp-card { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 392 / 420; border-radius: 32px; overflow: hidden; }
.exp-card { will-change: transform; }
.exp-card img { object-fit: cover; }
.exp-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 60.54%, rgba(0, 0, 0, .7)); }
.exp-card figcaption { position: absolute; z-index: 1; left: 24px; bottom: 24px; font-family: var(--serif); font-size: 26px; line-height: 39px; }

.ruled { position: relative; display: flex; align-items: center; gap: 32px; margin-top: 64px; overflow: hidden; }
.rule { flex: 1 1 0; height: 2px; background: var(--coral); }
.ruled .rule { transition: transform .8s var(--spring); }
.ruled .rule.l { transform: translateX(-100%); }
.ruled .rule.r { transform: translateX(100%); }
.ruled.in .rule { transform: none; }

/* Measured menu: group title 40/40, sub 26/26, items 2 columns with a 231 x 140 image. */
.group { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 32px; align-items: center; margin-top: 64px; }
.group h3 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 40px; letter-spacing: normal; }
.group .rule { transform: translateY(18px); }
.group p { grid-column: 1 / -1; margin-top: 12px; text-align: center; color: var(--coral); font-family: var(--serif); font-size: 26px; line-height: 26px; }
.items { position: relative; margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 32px; }
.group.two + .items { margin-top: 52px; }
.item { display: flex; gap: 24px; height: 140px; }
.item > div { flex: 1 1 0; min-width: 0; }
.item img { flex: 0 0 39.55%; width: 39.55%; height: 140px; object-fit: cover; border-radius: 16px; }
.line { display: flex; align-items: center; gap: 12px; }
.line h4 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 31.2px; letter-spacing: .52px; white-space: nowrap; }
.line i { flex: 1 1 0; height: 1px; background: var(--hair); }
.line b { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 31.2px; color: var(--coral); white-space: nowrap; }
.item p { margin-top: 12px; color: var(--soft); font-size: 14px; line-height: 18.2px; letter-spacing: .56px; }
.ruled.tight { margin-top: 64px; }

/* Measured form: inputs with a bottom rule, coral text, labels 26/39 serif. */
.form { position: relative; margin-top: 64px; display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 32px; row-gap: 32px; align-items: center; }
.form label { display: block; }
.half { grid-column: span 3; }
.third { grid-column: span 2; }
.form label span { display: block; font-size: 16px; line-height: 24px; }
.form label::after { content: ''; display: block; height: 1px; margin-top: 11px; background: var(--hair); }
.form label:focus-within::after { background: var(--coral); }
.form input { display: block; width: 100%; height: 24px; margin-top: 24px; padding: 0; border: 0; background: transparent; color: var(--coral); font: inherit; letter-spacing: inherit; color-scheme: dark; }
.form input:focus { outline: none; }
/* Measured: placeholder white at 70%, date and time fields 26 tall. */
.form input::placeholder { color: rgba(255, 255, 255, .7); opacity: 1; }
.form input[type=date], .form input[type=time] { height: 26px; }
.form input[type=date]:invalid::-webkit-datetime-edit, .form input[type=time]:not(:focus)::-webkit-datetime-edit { color: rgba(255, 255, 255, .7); }
.form-btn { grid-column: 1 / -1; margin-top: 32px; }
.status { position: absolute; left: 0; right: 0; top: calc(100% + 8px); text-align: center; font-size: 14px; line-height: 21px; color: var(--soft); }

/* Measured reviews: cards 392 x 400, radius 45; inner panel inset 12, radius 33. */
.rev-cards { position: relative; margin-top: 64px; display: flex; gap: 12px; }
.rev { position: relative; flex: 1 1 0; min-width: 0; height: 400px; border-radius: 45px; overflow: hidden; }
/* Fitted by eye: our plates are white where the source photos are dark, so they are dimmed to sit the same under the veil. */
.rev > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); }
.rev-top { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .8) 40%, rgba(0, 0, 0, .62) 100%); }
.rev-in { position: absolute; inset: 12px; border-radius: 33px; background: linear-gradient(transparent 59.46%, rgba(222, 91, 64, .55)); }
.rev > p { position: absolute; left: 24px; right: 24px; top: 24px; }
.who { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px; }
.who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.who strong { display: block; font-weight: 400; font-size: 14px; line-height: 18.2px; letter-spacing: .56px; }
.who span { display: block; margin-top: 4px; font-size: 14px; line-height: 18.2px; letter-spacing: .56px; color: var(--soft); }

/* Measured footer: 548 tall, rgb(26,25,25). */
.foot { position: relative; background: var(--foot); height: 548px; padding: 100px var(--side) 0; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; }
.foot-top p { margin-top: 12px; color: var(--soft); }
.foot-top .pill { margin-top: 17px; height: 60px; padding: 0 30px; width: 190px; }
.foot-cols { margin-top: 64px; display: grid; grid-template-columns: 211px 115px auto; gap: 32px; }
.fc h3 { font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: .64px; }
.fc p { margin-top: 10px; font-size: 14px; line-height: 18.2px; letter-spacing: .56px; color: var(--soft); }
.fc h3 + p { margin-top: 16px; }
.foot-bot { position: absolute; left: var(--side); right: var(--side); top: 415px; display: flex; justify-content: space-between; align-items: center; }
.foot-bot nav { display: flex; gap: 32px; font-family: var(--serif); font-size: 22px; line-height: 33px; letter-spacing: .88px; }
.foot-bot nav a { transition: color .2s linear; }
.foot-bot nav a:hover { color: var(--coral); }
.social { display: flex; gap: 32px; }
.social svg { width: 32px; height: 32px; color: #fff; }
.social svg .cut { fill: none; stroke: var(--foot); stroke-width: 2; stroke-linecap: round; }
.social svg .dot { fill: var(--foot); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav, .hero-btns, .hero-media, .vword { animation: none; }
  .head h2.ready span { filter: none; opacity: 1; }
  .ruled .rule.l, .ruled .rule.r { transform: none; transition: none; }
  .exp-card { transform: none !important; }
}

/* A narrow desktop window keeps the layout: the 1440 page, zoomed to fit. */
html.zoomed .page { zoom: var(--z); }
html.zoomed .page, html.fill .page { width: 1440px; }

/* Fill mode: the same hero filling a portrait screen on black. The film stays visible above the words and
   never sits under text. Type is enlarged by --k: the one deliberate difference from strict scaling.
   Only the nav collapses to a menu. The rest of the page stays the 1440 layout. */
html.fill .hero { height: var(--H); padding: 0 96px; }
html.fill .hero-media { top: calc(var(--H) * .08); left: 0; right: 0; width: 100%; height: 1440px; }
html.fill .vword { top: calc(var(--H) * .1); right: 48px; width: calc(55px * var(--k)); font-size: calc(55px * var(--k)); line-height: calc(80.3px * var(--k)); }
html.fill .hero-text { position: absolute; left: 96px; right: 96px; width: auto; top: calc(var(--H) * .08 + 1400px); }
html.fill h1 { font-size: calc(60px * var(--k)); line-height: calc(70.2px * var(--k)); text-wrap: pretty; }
html.fill .hero-text > p { width: 100%; margin-top: calc(12px * var(--k)); font-size: calc(20px * var(--k)); line-height: calc(30px * var(--k)); text-wrap: pretty; }
html.fill .hero-btns { margin-top: calc(24px * var(--k)); width: 100%; gap: calc(8px * var(--k)); }
html.fill .hero-btns .pill { flex: 1 1 0; padding: 0; height: calc(59px * var(--k)); font-size: calc(26px * var(--k)); line-height: 1; letter-spacing: calc(1.04px * var(--k)); margin: 0; }
html.fill .nav { height: auto; padding: calc(26px * var(--k)) 48px 0; }
html.fill .logo { font-size: calc(40px * var(--k)); line-height: calc(53px * var(--k)); margin: 0; }
html.fill .nav-pill { margin-left: auto; width: auto; white-space: nowrap; height: calc(53px * var(--k)); font-size: calc(22px * var(--k)); line-height: 1; letter-spacing: calc(.88px * var(--k)); padding: 0 calc(24px * var(--k)); }
html.fill .burger { display: grid; gap: calc(9px * var(--k)); width: calc(53px * var(--k)); height: calc(53px * var(--k)); margin-left: calc(10px * var(--k)); align-content: center; justify-items: center; }
html.fill .burger span { display: block; width: calc(30px * var(--k)); height: calc(2px * var(--k)); background: #fff; transition: transform .2s; }
html.fill .links { display: none; position: absolute; top: 100%; left: 48px; right: 48px; margin: calc(12px * var(--k)) 0 0; flex-direction: column; gap: 0; padding: calc(16px * var(--k)); border-radius: calc(16px * var(--k)); background: var(--foot); font-size: calc(30px * var(--k)); line-height: 1; }
html.fill .links a { padding: calc(14px * var(--k)); }
html.fill .gymlink { display: block; }
html.fill .nav.open .links { display: flex; }
html.fill .nav.open .burger span:first-child { transform: translateY(calc(5.500px * var(--k))) rotate(45deg); }
html.fill .nav.open .burger span:last-child { transform: translateY(calc(-5.500px * var(--k))) rotate(-45deg); }

/* Measured: the date and time icons sit small and quiet at the field's right edge. */
.form input::-webkit-calendar-picker-indicator { width: 13px; height: 13px; opacity: .6; }

/* Inside the zoomed 1440 page the window width no longer sets these. */
html.zoomed .hero-media { --mw: 600px; }
html.zoomed .vword { top: calc(var(--vh, 100vh) / 2 - 229px); }

/* Tablet in portrait: a smaller film so the words and buttons stay on the first screen. */
html.tab .hero-media { top: calc(var(--H) * .04); left: 80px; right: 80px; width: 1280px; height: 1280px; }
html.tab .hero-text { top: calc(var(--H) * .04 + 1250px); }

/* Measured on the source: a fixed 220 px stack of 8 backdrop blurs, each masked to one band, doubling toward the top edge. */
.blurtop { position: fixed; z-index: 3; top: 0; left: 0; right: 0; height: 220px; pointer-events: none; }
html.fill .blurtop { height: calc(220px * var(--k)); }
.blurtop i { position: absolute; inset: 0; }
.blurtop i:nth-child(1) { z-index: 1; backdrop-filter: blur(0.15625px); -webkit-backdrop-filter: blur(0.15625px); -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); mask-image: linear-gradient(to top, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
.blurtop i:nth-child(2) { z-index: 2; backdrop-filter: blur(0.3125px); -webkit-backdrop-filter: blur(0.3125px); -webkit-mask-image: linear-gradient(to top, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); mask-image: linear-gradient(to top, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
.blurtop i:nth-child(3) { z-index: 3; backdrop-filter: blur(0.625px); -webkit-backdrop-filter: blur(0.625px); -webkit-mask-image: linear-gradient(to top, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); mask-image: linear-gradient(to top, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
.blurtop i:nth-child(4) { z-index: 4; backdrop-filter: blur(1.25px); -webkit-backdrop-filter: blur(1.25px); -webkit-mask-image: linear-gradient(to top, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); mask-image: linear-gradient(to top, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
.blurtop i:nth-child(5) { z-index: 5; backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); -webkit-mask-image: linear-gradient(to top, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); mask-image: linear-gradient(to top, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
.blurtop i:nth-child(6) { z-index: 6; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to top, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); mask-image: linear-gradient(to top, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); }
.blurtop i:nth-child(7) { z-index: 7; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to top, transparent 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(to top, transparent 75%, #000 87.5%, #000 100%); }
.blurtop i:nth-child(8) { z-index: 8; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-mask-image: linear-gradient(to top, transparent 87.5%, #000 100%); mask-image: linear-gradient(to top, transparent 87.5%, #000 100%); }

/* Menu page. Measured on the source's menu page at 1440x900: full-window hero with a .8 black shade, 60 px title centred;
   section padding 120; "Filter by" 50/59; buttons 59 tall, 40 side padding, gap 13; groups and rows as on the home page. */
.mhero { position: relative; height: var(--vh, 100vh); overflow: hidden; background: #000; }
.mhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mhero-shade { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .8); }
.mhero-glyph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--serif); font-size: 240px; line-height: 240px; white-space: nowrap; background: linear-gradient(90deg, rgb(65, 65, 65) 0%, #000 136%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: glyphin .9s var(--spring) .3s both; }
@keyframes glyphin { from { filter: blur(18px); opacity: .001; } to { filter: blur(0); opacity: 1; } }
.mhero h1 { position: relative; font-size: 60px; line-height: 70.2px; color: #fff; letter-spacing: normal; }
.mhero h1 span, .mfilter h2 span { display: inline-block; white-space: pre; }
.mhero h1.ready span, .mfilter h2.ready span { filter: blur(10px); opacity: .001; }
.mhero h1.in span, .mfilter h2.in span { filter: blur(0); opacity: 1; transition: filter .4s var(--spring), opacity .4s var(--spring); transition-delay: calc(var(--i) * 50ms); }
.msec { position: relative; padding: 120px var(--side) 120px; }
.mfilter { text-align: center; }
.mfilter h2 { font-family: var(--serif); font-weight: 400; font-size: 50px; line-height: 58.5px; letter-spacing: normal; color: var(--coral); }
.mbtns { margin-top: 24px; display: flex; justify-content: center; gap: 13px; }
.mbtns button { height: 59px; padding: 0 40px; border: 0; border-radius: 50px; background: rgb(26, 25, 25); color: #fff; font-family: var(--serif); font-size: 26px; line-height: 39px; letter-spacing: 1.04px; cursor: pointer; }
.mbtns button.on { background: var(--coral); color: #000; }
/* Resampled from frames on the source, All to Beverages and back: 3490 to 1418, 0 at the first moved frame. */
.mgroup.moving { position: relative; transition: transform .5s linear(0, .022 1%, .086 3.2%, .229 6.6%, .381 10%, .535 13.4%, .662 16.6%, .771 20%, .856 23.2%, .914 26.6%, .957 30%, .985 33.2%, 1.001 36.6%, 1.01 39.8%, 1.014 43.2%, 1.015 46.6%, 1.014 50%, 1.012 53.2%, 1.0075 60.2%, 1.001 75.6%, 1 91%, 1); }
.msec ~ section, .msec ~ footer { position: relative; z-index: 1; background: #000; }
.mgroup[hidden] { display: none; }
.mlist .line h4 { white-space: normal; flex: 0 1 auto; }
.mlist .line b { flex: none; }
.item.plain { height: auto; }
html.fill .mhero { height: var(--H); }
html.fill .mhero-glyph { font-size: calc(240px * var(--k)); line-height: calc(240px * var(--k)); }
@media (prefers-reduced-motion: reduce) {
  .mhero-glyph { animation: none; }
  .mhero h1.ready span, .mfilter h2.ready span { filter: none; opacity: 1; }
  .mgroup.moving { transition: none; }
}


/* Experience page, measured on the source at 1440 x 900. Hero: same as the menu page, plus the picture sliding in. */
.xhero picture { position: absolute; inset: 0; display: block; animation: xin .4s var(--spring) both; }
@keyframes xin { from { opacity: .001; transform: translateX(150px); } to { opacity: 1; transform: none; } }

/* Sticky stack: 3 blocks one screen tall, z 1 to 3; the first two stick at the top, the third scrolls. */
.xstack { position: relative; }
.xblock { position: relative; height: var(--vh, 100vh); }
.xblock:nth-child(1) { position: sticky; top: 0; z-index: 1; }
.xblock:nth-child(2) { position: sticky; top: 0; z-index: 2; }
.xblock:nth-child(3) { z-index: 3; }
.xmain { position: absolute; inset: 0; overflow: hidden; background: #000; transform: scale(var(--s, 1)); transform-origin: 50% 50%; will-change: transform; }
.xmain > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xfade { position: absolute; inset: 0; background: linear-gradient(#000 0%, rgba(71, 71, 71, 0) 53%, #000 100%); }
.xtext { position: absolute; inset: 0; z-index: 3; padding: 120px var(--side); display: flex; flex-direction: column; justify-content: flex-end; }
.xtext h2 { font-family: var(--serif); font-weight: 400; font-size: 50px; line-height: 58.5px; letter-spacing: normal; color: var(--coral); }
.xsub { margin-top: 12px; font-family: var(--serif); font-size: 60px; line-height: 70.2px; letter-spacing: normal; color: var(--soft); }
.xbody { margin-top: 24px; width: 500px; }
.xbody p + p { margin-top: 12px; }
.xbody a { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; }
.xbody a:hover { color: #fff; }
.w { display: inline-block; }
.xtext h2 span, .xsub span, .xh2 span, .xmenu .group h3 span, .xmenu .group p span { display: inline-block; white-space: pre; }
/* Measured reveal, once at half way: h2 letters from 200 ms, the line under it from 500, paragraph lines from 400, 400 ms each. */
.xblock.wait h2 span, .xblock.wait .xsub span, .xblock.wait .w { filter: blur(10px); opacity: .001; }
.xblock.wait.in h2 span, .xblock.wait.in .xsub span, .xblock.wait.in .w { filter: blur(0); opacity: 1; transition: filter .4s var(--spring), opacity .4s var(--spring); }
.xblock.wait.in h2 span { transition-delay: calc(200ms + var(--i) * 50ms); }
.xblock.wait.in .xsub span { transition-delay: calc(500ms + var(--i) * 50ms); }
.xblock.wait.in .w { transition-delay: calc(400ms + var(--l, 0) * 50ms); }

/* The running row. Section padding 120; h2 900 wide, letters on entering view. */
.xteam, .xmenu { position: relative; z-index: 4; padding-block: 120px; background: #000; }
.xteam .glyph.left { top: 24px; }
.xmenu .glyph.stack { top: -36px; }
.xh2 { position: relative; width: 900px; font-family: var(--serif); font-weight: 400; font-size: 50px; line-height: 58.5px; letter-spacing: normal; color: var(--coral); }
.xh2.ready span, .xmenu .group .ready span { filter: blur(10px); opacity: .001; }
.xh2.in span, .xmenu .group .in span { filter: blur(0); opacity: 1; transition: filter .4s var(--spring), opacity .4s var(--spring); transition-delay: calc(var(--i) * 50ms); }
.xmenu .group p.in span { transition-delay: calc(200ms + var(--i) * 50ms); }
.xrow { position: relative; margin-top: 64px; height: 720px; display: flex; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%); }
.xtrack { display: flex; gap: 40px; margin: 0; padding: 0; list-style: none; will-change: transform; }
.xtrack li { flex: none; width: 400px; }
.xcard { height: 600px; padding: 24px; display: flex; flex-direction: column; gap: 24px; border-radius: 32px; background: var(--foot); }
.xpic { flex: none; height: 352px; border-radius: 16px; overflow: hidden; }
.xpic img { width: 100%; height: 100%; object-fit: cover; }
.xcap { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; }
.xrole { color: var(--soft); font-size: 14px; line-height: 24px; letter-spacing: .56px; }
.xcap h3 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 40px; letter-spacing: normal; color: var(--coral); }
.xnote { color: #fff; }
footer.foot { position: relative; z-index: 4; }
html.fill .xblock { height: var(--H); }
@media (prefers-reduced-motion: reduce) {
  .xhero picture { animation: none; }
  .xh2.ready span, .xmenu .group .ready span { filter: none; opacity: 1; }
  .xrow { overflow-x: auto; }
}