/* ==========================================================================
   Abhinav Saraf — PonyUp: a biopic in one sitting
   PonyUp yellow · black · white · silver · dressing-room mirror bulbs
   ========================================================================== */
:root {
  --ink: #0b0b0b; --ink-2: #141414; --ink-3: #1d1d1d;
  --paper: #f6f4ef; --mute: rgba(246, 244, 239, 0.62); --line: rgba(246, 244, 239, 0.12);
  --sun: #ffd31a; --gold: #e8b923; --silver: #cfcfcf;
  --gutter: clamp(16px, 3.4vw, 52px);
  --f-display: "Oswald", "Arial Narrow", sans-serif;
  --f-serif: "DM Serif Display", Georgia, serif;
  --f-body: "Manrope", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace;
  --ss-acc: #ffd31a; --ss-bg: #151515;
  /* one viewport-height unit for every height-critical size: the visible height with the browser's
     toolbars showing (svh), so nothing on a real phone sits under the URL bar or the bottom bar */
  --vh: 1vh;
}
@supports (height: 1svh) { :root { --vh: 1svh; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); }
html.lenis, html.lenis body { height: auto; }
body { background: var(--ink); color: var(--paper); font-family: var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
em { font-style: italic; }
.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.char { display: inline-block; }
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

/* ---------- cursor: a comb ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; }
.cursor__dot { position: fixed; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); }
.cursor__ring { position: fixed; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(255, 211, 26, 0.7); display: grid; place-items: center; transition: width 0.3s, height 0.3s, background 0.3s; }
.cursor__label { font: 700 9px var(--f-mono); color: var(--sun); letter-spacing: 0.08em; text-transform: uppercase; }
.cursor.is-hover .cursor__ring { width: 78px; height: 78px; background: rgba(255, 211, 26, 0.14); border-color: var(--sun); }
.cursor.is-snip .cursor__ring { transform: scale(0.7) !important; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (hover: hover) and (pointer: fine) { body, a, button { cursor: none; } }

/* ---------- mirror bulbs (shared) ---------- */
.bulbs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bulbs b { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6d6556, #2c2820 70%); transition: background 0.25s, box-shadow 0.25s; }
.bulbs b.on { background: radial-gradient(circle at 40% 35%, #fffef2, #ffe27a 45%, #ffb800 75%); box-shadow: 0 0 10px 3px rgba(255, 211, 26, 0.75), 0 0 34px 8px rgba(255, 190, 0, 0.32); }
.mframe { position: relative; border-radius: 24px; background: linear-gradient(145deg, #262626, #121212); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

/* ---------- 00 mirror check ---------- */
.loader { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 45%, #1e1a0c, var(--ink) 70%); }
.loader__mirror { position: relative; width: min(64vw, 380px); aspect-ratio: 3 / 4; border-radius: 24px; background: linear-gradient(145deg, #262626, #121212); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9); }
.loader__glass { position: absolute; inset: 30px; border-radius: 12px; background: radial-gradient(80% 80% at 50% 40%, #232017, #0d0c09); display: grid; place-content: center; text-align: center; gap: 10px; overflow: hidden; }
.loader__glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.08) 45%, transparent 55%); }
.loader__k { color: var(--sun); }
.loader__t { font: italic 400 clamp(40px, 7vw, 64px)/1 var(--f-serif); }
.loader__n { color: var(--mute); }
.loader__foot { position: absolute; bottom: var(--gutter); color: var(--mute); }

/* ---------- nav + rail ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--gutter); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav__logo { display: flex; align-items: center; gap: 10px; font: 600 16px var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; }
.nav__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sun); }
.nav__mark svg { width: 24px; height: 24px; fill: var(--ink); }
.nav__links { display: flex; gap: 24px; padding: 10px 18px; border-radius: 999px; background: rgba(11, 11, 11, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); }
.nav__links a { opacity: 0.75; transition: opacity 0.25s, color 0.25s; }
.nav__links a:hover { opacity: 1; color: var(--sun); }
.nav__cta { padding: 11px 18px; border-radius: 999px; background: var(--sun); color: var(--ink); font-weight: 700; }
body.on-light .nav__links { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
.rail { position: fixed; left: var(--gutter); bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 12px; color: var(--mute); pointer-events: none; }
.rail__track { width: 90px; height: 2px; background: rgba(246, 244, 239, 0.15); overflow: hidden; }
.rail__fill { height: 100%; background: var(--sun); transform-origin: left; transform: scaleX(0); }

/* ---------- 01 the founder ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden;
  background: radial-gradient(50% 60% at 72% 45%, rgba(255, 211, 26, 0.12), transparent 70%), radial-gradient(40% 40% at 10% 100%, rgba(232, 185, 35, 0.08), transparent 70%), var(--ink); }
.hero__hair { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero__mirror { position: absolute; z-index: 2; right: 7vw; top: calc(13 * var(--vh)); height: calc(74 * var(--vh)); aspect-ratio: 3 / 4; border-radius: 24px; background: linear-gradient(145deg, #2a2a2a, #121212); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.hero__glass { position: absolute; inset: 30px; }
.hero__room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; filter: brightness(0.6) saturate(1.1) blur(1px); }
.hero__glass::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; background: linear-gradient(180deg, rgba(11, 11, 11, 0) 40%, rgba(11, 11, 11, 0.5)); }
.hero__man { position: absolute; z-index: 3; left: 0; right: 0; margin: 0 auto; bottom: -10%; height: 108%; width: auto; max-width: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)); }
.hero__kicker { position: absolute; z-index: 4; left: var(--gutter); top: calc(18 * var(--vh)); display: flex; align-items: center; gap: 10px; color: var(--mute); }
.hero__kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px var(--sun); }
.hero__name { position: absolute; z-index: 4; left: calc(var(--gutter) - 0.04em); top: calc(23 * var(--vh)); font: 700 clamp(84px, 12.5vw, 230px)/0.84 var(--f-display); text-transform: uppercase; letter-spacing: 0.005em; }
.hero__name .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero__name .line > span { display: inline-block; }
.hero__name .line + .line { color: var(--sun); }
.hero__lede { position: absolute; z-index: 4; left: var(--gutter); top: calc(23 * var(--vh) + clamp(84px, 12.5vw, 230px) * 1.8); font: 400 clamp(28px, 2.8vw, 46px)/1.05 var(--f-serif); }
.hero__lede em { color: var(--sun); }
.hero__intro { position: absolute; z-index: 4; left: var(--gutter); top: calc(23 * var(--vh) + clamp(84px, 12.5vw, 230px) * 1.8 + 72px); max-width: 380px; font-size: 15px; line-height: 1.55; color: rgba(246, 244, 239, 0.84); }
.hero__foot { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: 50px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; pointer-events: none; }
.hero__foot > * { pointer-events: auto; }
.hero__hint { color: var(--sun); }
.hero__go { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 999px; border: 1px solid rgba(255, 211, 26, 0.5); color: var(--sun); background: rgba(11, 11, 11, 0.5); }
.hero__go span { display: inline-block; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

/* ---------- 02 the chair ---------- */
.chair { position: relative; z-index: 5; height: 560vh; }
.chair__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(60% 50% at 50% 50%, #17150c, var(--ink) 75%); }
.cb { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 0.2em; text-align: center; padding: 0 var(--gutter); opacity: 0; pointer-events: none; }
.cb__big { font: 700 clamp(120px, 24vw, 420px)/0.82 var(--f-display); letter-spacing: -0.01em; color: var(--sun); }
.cb__sub, .cb__mid { font: 600 clamp(34px, 5vw, 86px)/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.01em; }
.cb__line { display: block; font: 600 clamp(44px, 7vw, 124px)/1 var(--f-display); text-transform: uppercase; }
.cb__cut { position: relative; }
.cb__top, .cb__bot { display: block; }
.cb__top { clip-path: inset(0 0 50% 0); }
.cb__bot { position: absolute; inset: 0; clip-path: inset(50% 0 0 0); }
.cb__yes { margin-top: 0.3em; }
.cb__yes em, .cb__ser em { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--sun); }
.cb__ser { max-width: 22em; font: 400 clamp(24px, 2.8vw, 46px)/1.2 var(--f-serif); color: rgba(246, 244, 239, 0.9); }
.cb__q { color: var(--sun); }
.cb__name { display: flex; align-items: flex-end; gap: 0.08em; font: 700 clamp(110px, min(20vw, calc(34 * var(--vh))), 360px)/0.82 var(--f-display); }
.cb--4 .cb__ser { margin-top: 0.9em; font-size: clamp(20px, 2.2vw, 36px); }
.cb__up { display: inline-block; color: var(--sun); transform-origin: 0% 100%; }
.print { position: absolute; z-index: 3; width: min(24vw, 320px); padding: 12px 12px 50px; background: #f7f3ea; box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.7); opacity: 0; }
.print img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.print figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 400 italic 18px var(--f-serif); color: #2a2a2a; }
.print--a { left: 7vw; top: calc(16 * var(--vh)); }
.print--b { right: 7vw; top: calc(30 * var(--vh)); width: min(28vw, 380px); }
.print--b img { aspect-ratio: 16 / 9; }
.chair__note { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(12 * var(--vh)); width: min(560px, 86vw); text-align: center; font: 400 clamp(20px, 2vw, 30px)/1.3 var(--f-serif); opacity: 0; }
.chair__note em { color: var(--sun); }
.snip { position: absolute; left: -160px; top: 50%; width: 140px; height: 70px; z-index: 4; opacity: 0; }
.snip circle, .snip path { fill: none; stroke: var(--silver); stroke-width: 5; stroke-linecap: round; }
.snip__a, .snip__b { transform-origin: 24px 30px; }

/* ---------- 03 the salon floor ---------- */
.floor { position: relative; z-index: 5; }
.floor__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: linear-gradient(180deg, #0b0b0b 0%, #141210 62%, #1d1a14 62%, #0b0b0b 100%); }
.floor__pin::before { content: ""; position: absolute; left: 0; right: 0; top: 62%; height: 38%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 120px); transform: perspective(500px) rotateX(55deg); transform-origin: top; }
.floor__head { position: absolute; z-index: 4; left: var(--gutter); top: 96px; }
.floor__head .mono { color: var(--sun); }
.floor__head h2 { margin-top: 8px; font: 700 clamp(34px, 4.4vw, 70px)/1 var(--f-display); text-transform: uppercase; }
.floor__head h2 em { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--sun); }
.floor__track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: flex-end; gap: clamp(60px, 7vw, 120px); padding: 0 40vw 0 46vw; }
.mir { position: relative; flex: 0 0 auto; width: clamp(220px, min(23vw, calc(31 * var(--vh))), 340px); margin-bottom: calc(38 * var(--vh) - 10px); }
.mir > .bulbs { inset: 0 0 auto 0; height: auto; aspect-ratio: 3 / 4; }
.mir::before { content: ""; display: block; aspect-ratio: 3 / 4; border-radius: 22px; background: linear-gradient(145deg, #2a2a2a, #121212); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.mir__glass { position: absolute; left: 26px; right: 26px; top: 26px; aspect-ratio: 3 / 4; height: auto; border-radius: 10px; overflow: hidden; background: #0f0f0f; }
.mir__glass { bottom: auto; width: auto; }
.mir__glass img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) saturate(0.7); transition: filter 0.6s; }
.mir.is-on .mir__glass img { filter: none; }
.mir__glass img:not([src]) { visibility: hidden; }
.mir__y { position: absolute; left: 0; top: calc(100% + 18px); font: 700 clamp(44px, 4vw, 66px)/0.9 var(--f-display); color: var(--sun); }
.mir__t { position: absolute; left: 0; top: calc(100% + 80px); font: 400 clamp(22px, 1.8vw, 28px)/1.1 var(--f-serif); white-space: nowrap; }
.mir__l { position: absolute; left: 0; top: calc(100% + 118px); width: 120%; font-size: 14.5px; line-height: 1.5; color: var(--mute); }
.mir__y, .mir__t, .mir__l { opacity: 0.35; transition: opacity 0.5s; }
.mir.is-on .mir__y, .mir.is-on .mir__t, .mir.is-on .mir__l { opacity: 1; }
.mir__app { display: grid; place-content: center; gap: 18px; text-align: center; background: radial-gradient(80% 80% at 50% 30%, #2a2414, #101010); }
.mir__app .mono { color: var(--sun); }
.shades { display: grid; gap: 10px; justify-items: center; }
.shades span { width: 150px; padding: 12px 0; border-radius: 999px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, #fff)); font: 700 15px var(--f-display); letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.6); }
.mir__soon { font-size: 9px; color: var(--mute) !important; }
.floor__line { position: absolute; left: 0; right: 0; top: 62%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 211, 26, 0.6), transparent); }
.walker { position: absolute; z-index: 5; left: 37vw; top: 62%; }
.walker img { position: absolute; left: 0; top: 0; max-width: none; display: none; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.5)); }
.walker img.on { display: block; }

/* ---------- 04 the salons ---------- */
.salons { position: relative; z-index: 5; padding: 120px var(--gutter) 100px; background: var(--ink); }
.salons__head .mono { color: var(--sun); }
.salons__head h2 { margin-top: 10px; font: 700 clamp(44px, 6vw, 110px)/0.92 var(--f-display); text-transform: uppercase; }
.salons__head h2 em { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--sun); }
.salons__sub { margin-top: 14px; max-width: 36em; color: var(--mute); font-size: 17px; }
.salons__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sal { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); transform-style: preserve-3d; }
.sal--wide { grid-column: span 2; grid-template-columns: 1.3fr 1fr; grid-template-rows: none; }
.sal__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.sal--wide .sal__media { aspect-ratio: auto; min-height: 340px; }
.sal__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity 0.6s; }
.sal:hover .sal__media img { transform: scale(1.06); }
.sal__alt { opacity: 0; }
.sal:hover .sal__alt { opacity: 1; }
.sal__body { padding: 22px 24px 26px; display: grid; align-content: start; gap: 8px; }
.sal__tag { color: var(--sun); }
.sal h3 { font: 700 34px/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.01em; }
.sal p { color: var(--mute); font-size: 15px; line-height: 1.5; }
.sal__rate { color: var(--paper) !important; }
.sal__rate b { color: var(--sun); font-family: var(--f-display); font-size: 18px; letter-spacing: 0.03em; }
.sal__go { margin-top: 6px; color: var(--sun); }
.sal--wheels { grid-column: span 3; grid-template-columns: 1fr 1fr; grid-template-rows: none; background: var(--sun); color: var(--ink); border: 0; }
.sal--wheels .sal__media { aspect-ratio: auto; min-height: 280px; }
.sal--wheels .sal__tag, .sal--wheels p { color: rgba(11, 11, 11, 0.72); }
.salons__life { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.salons__life figure { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1; }
.salons__life img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.salons__life figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(11, 11, 11, 0.7); color: var(--sun); }

/* ---------- 05 the shelf ---------- */
.shelf { position: relative; z-index: 5; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 5vw; padding: 120px var(--gutter); overflow: hidden; background: radial-gradient(60% 60% at 70% 50%, #1f1a0a, var(--ink) 70%); }
.shelf__spot { position: absolute; inset: -20%; background: conic-gradient(from 200deg at 60% -10%, transparent 0deg, rgba(255, 220, 120, 0.16) 12deg, transparent 24deg); pointer-events: none; }
.shelf__copy { position: relative; }
.shelf__copy .mono { color: var(--sun); }
.shelf__copy h2 { margin-top: 12px; font: 700 clamp(48px, 6.4vw, 120px)/0.9 var(--f-display); text-transform: uppercase; }
.shelf__copy h2 em { display: block; font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--sun); }
.shelf__list { margin-top: 26px; list-style: none; display: grid; gap: 14px; }
.shelf__list li { display: grid; gap: 2px; padding-left: 30px; position: relative; }
.shelf__list li::before { content: "★"; position: absolute; left: 0; top: 0; color: var(--sun); font-size: 18px; }
.shelf__list b { font: 600 22px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; }
.shelf__list span { color: var(--mute); font-size: 15px; }
.shelf__count { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 28px; color: var(--mute); }
.shelf__count b { color: var(--sun); font: 700 28px var(--f-display); margin-right: 4px; letter-spacing: 0.02em; }
.shelf__frames { position: relative; height: min(calc(70 * var(--vh)), 640px); }
.frame { position: absolute; margin: 0; padding: 14px; background: linear-gradient(145deg, #3a3122, #17130b); border-radius: 6px; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(232, 185, 35, 0.4); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption { position: absolute; left: 14px; bottom: -28px; color: var(--mute); }
.frame--a { left: 0; top: 4%; width: 62%; aspect-ratio: 16 / 9; rotate: -3deg; }
.frame--b { right: 0; bottom: 4%; width: 60%; aspect-ratio: 3 / 2; rotate: 2.5deg; }

/* ---------- 06 book ---------- */
.book { position: relative; z-index: 5; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; overflow: clip; background: #0d0b08; }
.book__media { position: absolute; inset: 0; }
.book__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(1.12); }
.book__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 11, 0.92) 30%, rgba(11, 11, 11, 0.45) 65%, rgba(11, 11, 11, 0.2)), linear-gradient(0deg, rgba(11, 11, 11, 0.8), transparent 45%); }
.book__inner { position: relative; z-index: 2; width: min(680px, 100%); padding: 150px var(--gutter) 40px; }
.book__k { color: var(--sun); }
.book__title { margin-top: 14px; font: 700 clamp(64px, 9vw, 170px)/0.86 var(--f-display); text-transform: uppercase; }
.book__title em { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--sun); }
.book__sub { margin-top: 16px; max-width: 30em; font: 400 italic 22px/1.35 var(--f-serif); color: rgba(246, 244, 239, 0.88); }
.book__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: scale 0.3s, background 0.3s; }
.btn:hover { scale: 1.03; }
.btn--sun { background: var(--sun); color: var(--ink); }
.btn--ghost { border: 1px solid rgba(246, 244, 239, 0.3); background: rgba(11, 11, 11, 0.35); backdrop-filter: blur(6px); }
.book__meta { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.book__meta span { display: block; color: rgba(246, 244, 239, 0.5); }
.book__meta a { display: block; margin-top: 4px; color: var(--paper); letter-spacing: 0.06em; }
.footer { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 22px var(--gutter) 58px; color: rgba(246, 244, 239, 0.6); border-top: 1px solid var(--line); }
.footer a:hover { color: var(--sun); }

/* ---------- the tiny Abhinav ---------- */
.guide-layer { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
.guide-layer.is-on { opacity: 1; }
.guide-layer.is-away { opacity: 0; }
.guide { position: absolute; left: 0; top: 0; }
.guide__shadow { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent); }
.guide__rig { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.guide__flip { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.guide__pose { position: absolute; max-width: none; height: auto; opacity: 0; visibility: hidden; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35)); user-select: none; -webkit-user-drag: none; }
.guide__pose.is-on { opacity: 1; visibility: visible; }
.guide__puff { position: absolute; left: 0; top: 0; width: 30px; height: 14px; margin: -10px 0 0 -15px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 211, 26, 0.4), rgba(255, 211, 26, 0)); }
.guide__hit { position: absolute; pointer-events: auto; cursor: pointer; border-radius: 40% 40% 20% 20%; }
.guide__bubble { position: absolute; left: 0; top: 0; max-width: min(270px, 72vw); padding: 12px 16px 13px; border-radius: 18px; background: var(--sun); color: var(--ink); font: 700 14.5px/1.35 var(--f-body); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55); opacity: 0; transform-origin: 50% 100%; transition: opacity 0.25s; }
.guide__bubble.is-on { opacity: 1; }
.guide__bubble.is-ink { background: var(--ink); color: var(--sun); }
.guide__tail { position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; margin-left: -7px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.guide__bubble.is-side .guide__tail { display: none; }

/* ---------- phones ---------- */
/* ---------- living photos: a plate and a cut-out, moving in depth ---------- */
.live { position: absolute; inset: 0; overflow: hidden; background: #121212; border-radius: inherit; }
.live > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.1); will-change: transform; opacity: 0; transition: opacity 0.9s ease, filter 0.6s; user-select: none; -webkit-user-drag: none; }
.live.is-ready > img { opacity: 1; }
.live__fg { transform-origin: 50% 50%; }
.live__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 0.6s; }
.mir:not(.is-on) .live__fx { opacity: 0.35; }
.print__ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.print--b .print__ph { aspect-ratio: 16 / 9; }
.frame .live { inset: 14px; border-radius: 2px; }
.book__media .live { position: sticky; inset: auto; top: 0; height: 100vh; height: 100svh; }
.book__media .live > img { object-position: 60% 0%; }
.salons__life .live > img { object-position: 50% 30%; }
/* the hero mirror: a reflection gliding across the glass now and then */
.hero__glass::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 12px; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.05) 49%, transparent 58%); background-size: 260% 100%; background-position: 130% 0; animation: glass 8s ease-in-out 3.2s infinite; }
@keyframes glass { 0%, 62% { background-position: 130% 0; } 92%, 100% { background-position: -50% 0; } }
.hero__room, .hero__man { will-change: transform; }

/* ---------- the one-minute film ---------- */
.hero__acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hero__film { display: inline-flex; align-items: center; gap: 12px; padding: 9px 20px 9px 9px; border: 0; border-radius: 999px; background: var(--sun); color: var(--ink); font-weight: 700; cursor: pointer; box-shadow: 0 14px 30px -12px rgba(255, 211, 26, 0.6); transition: scale 0.3s; }
.hero__film:hover { scale: 1.04; }
.hero__film i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--sun); font-style: normal; font-size: 10px; padding-left: 2px; }
.film { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--paper); }
.film, .film * { cursor: auto; }
.film button, .film a { cursor: pointer; }
.film::backdrop { background: rgba(5, 5, 5, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.film[open] { display: grid; place-items: center; }
.film__box { position: relative; display: flex; align-items: center; gap: 40px; padding: 24px; }
.film video { display: block; height: min(calc(86 * var(--vh)), 900px); aspect-ratio: 9 / 16; border-radius: 22px; background: #000; box-shadow: 0 60px 120px -40px #000, 0 0 0 1px rgba(255, 255, 255, 0.08); }
.film__side { display: grid; gap: 14px; max-width: 300px; justify-items: start; }
.film__k { color: var(--sun); }
.film__t { font: 400 40px/1.05 var(--f-serif); }
.film__t em { color: var(--sun); }
.film__d { color: var(--mute); font-size: 14px; line-height: 1.5; }
.film__x { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: var(--paper); font-size: 26px; line-height: 1; }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav { padding: 12px 16px; }
  .nav__cta { padding: 9px 14px; font-size: 10px; }
  .rail { display: none; }
  .hero { --mw: min(74vw, calc((100 * var(--vh) - 390px) * 0.75)); }
  .hero__mirror { left: 0; right: 0; margin: 0 auto; top: 78px; height: auto; width: var(--mw); }
  .hero__kicker { top: calc(78px + var(--mw) * 4 / 3 + 34px); font-size: 9.5px; letter-spacing: 0.08em; }
  .hero__name { top: calc(78px + var(--mw) * 4 / 3 + 58px); font-size: 21vw; }
  .hero__lede { top: calc(78px + var(--mw) * 4 / 3 + 58px + 21vw * 1.75); font-size: 26px; }
  .hero__intro, .hero__hint { display: none; }
  .hero__foot { bottom: 22px; justify-content: flex-start; }
  .hero__acts .hero__go { display: none; }
  .film__box { flex-direction: column; gap: 12px; padding: 10px; }
  .film video { height: auto; width: min(92vw, calc(80 * var(--vh) * 9 / 16)); }
  .film__side { display: none; }
  .film__x { right: 14px; top: 14px; z-index: 2; background: rgba(0, 0, 0, 0.55); }
  .cb__big { font-size: 34vw; }
  .print { width: 44vw; padding: 8px 8px 34px; }
  .print figcaption { font-size: 13px; bottom: 9px; }
  .print--a { left: 5vw; top: calc(13 * var(--vh)); }
  .print--b { right: 5vw; top: auto; bottom: calc(26 * var(--vh)); width: 54vw; }
  .chair__note { bottom: calc(7 * var(--vh)); font-size: 18px; width: 64vw; left: 16px; right: auto; margin: 0; text-align: left; }
  .floor__pin { background: linear-gradient(180deg, #0b0b0b 0%, #141210 68%, #1d1a14 68%, #0b0b0b 100%); }
  .floor__pin::before { top: 68%; height: 32%; }
  .floor__line, .walker { top: 68%; }
  .floor__head { top: 70px; }
  .floor__head h2 { font-size: 30px; }
  .mir { width: min(62vw, calc((68 * var(--vh) - 185px) * 0.75)); margin-bottom: calc(32 * var(--vh)); }
  .mir__y { top: calc(100% + 12px); font-size: 40px; }
  .mir__t { top: calc(100% + 56px); font-size: 21px; }
  .mir__l { top: calc(100% + 88px); width: 100%; font-size: 13.5px; }
  .floor__track { padding: 0 30vw 0 34vw; gap: 46px; }
  .walker { left: 10vw; }
  .salons { padding: 90px 16px 80px; }
  .salons__grid { grid-template-columns: 1fr; }
  .sal--wide, .sal--wheels { grid-column: auto; grid-template-columns: 1fr; }
  .sal--wide .sal__media, .sal--wheels .sal__media { min-height: 0; aspect-ratio: 4 / 3; }
  .salons__life { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .shelf { grid-template-columns: 1fr; padding: 90px 16px; }
  .shelf__frames { height: 92vw; }
  .book__inner { padding-top: 120px; }
  .book__shade { background: linear-gradient(0deg, rgba(11, 11, 11, 0.95) 35%, rgba(11, 11, 11, 0.5)); }
  .book__meta { grid-template-columns: 1fr 1fr; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) { .grain, .hero__go span, .hero__glass::after { animation: none; } }

/* share sheet in PonyUp type */
.ss, .ss__btn, .ss__h { font-family: var(--f-body); }
.ss__k { font-family: var(--f-mono); }