/* Hausen — rules in DESIGN.md. Grey and beige, plus graphite and white. Sora + Inter Tight, one serif accent. */
:root {
  --grey: #A4A6A8; --beige: #EDE5D8; --black: #1C1D1F; --white: #FFFFFF;
  --line: rgba(255, 255, 255, 0.2); --lineb: rgba(28, 29, 31, 0.28);
  --wide: 'Sora', system-ui, sans-serif; --font: 'Inter Tight', system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif;
  --gut: 18px; --max: 1360px; --r: 22px; --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (min-width: 768px) { :root { --gut: 32px; } }
@media (min-width: 1280px) { :root { --gut: 52px; } }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--black); }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { background: var(--black); color: var(--white); font-family: var(--font); font-size: 1.0625rem; line-height: 1.42; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--beige); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.h2 { font-family: var(--wide); font-weight: 300; font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1.06; letter-spacing: -0.04em; }
.mw { display: block; overflow: clip; overflow-clip-margin: 0.06em; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.mw > span { display: block; transform: translateY(112%); transition: transform 1.1s var(--ease); }
.is-in > .mw > span, .is-go .hero__word .mw > span { transform: none; }
.is-go .hero__word .mw > span { transition-duration: 1.5s; transition-delay: 0.15s; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--beige); color: var(--black); font-weight: 500; transition: transform 0.16s ease-out; }
.btn:active { transform: scale(0.97); }
.btn--full { width: 100%; }

/* Liquid glass: blurred image behind, light caught on the edges, a soft glare that follows the cursor */
.glass { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.34); background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.12)); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -18px 34px rgba(255, 255, 255, 0.05); }
.glass::before { content: ''; position: absolute; inset: 0; background: radial-gradient(280px circle at var(--gx, 20%) var(--gy, 0%), rgba(255, 255, 255, 0.22), transparent 70%); pointer-events: none; }

/* Nav */
.nav { position: fixed; z-index: 40; left: var(--gut); right: var(--gut); top: 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; transition: transform 0.5s var(--ease); }
.nav.is-hidden { transform: translateY(-160%); }
.nav.is-solid { padding: 7px 16px 7px 7px; border-radius: 999px; background: rgba(28, 29, 31, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav__pills { display: none; gap: 6px; }
.nav__pills a { padding: 10px 22px; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 999px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; transition: background 0.2s, color 0.2s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nav__pills a.is-on { background: var(--white); color: var(--black); border-color: var(--white); }
@media (hover: hover) { .nav__pills a:hover { background: var(--white); color: var(--black); } }
.logo { display: flex; align-items: center; gap: 9px; grid-column: 2; }
.logo i { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 25px; }
.logo b { aspect-ratio: 1; border-radius: 3px; background: var(--white); }
.logo span { font-family: var(--wide); font-weight: 500; font-size: 0.8125rem; line-height: 1; }
.logo em { display: block; font-size: 0.75rem; font-weight: 300; margin-top: 2px; }
.nav__cta { justify-self: end; grid-column: 3; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.nav__cta span { display: inline-block; margin-left: 6px; font-size: 1.2rem; transition: transform 0.3s var(--ease); vertical-align: -1px; }
@media (hover: hover) { .nav__cta:hover span { transform: translateX(6px); } }
@media (min-width: 1000px) { .nav__pills { display: flex; } }
@media (max-width: 999px) { .nav { grid-template-columns: auto 1fr; } .logo { grid-column: 1; } .nav__cta { grid-column: 2; } }

/* HERO: the photo stays whole. The word sits between the sky and the same photo without its sky. */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--black); --w: max(100vw, calc(max(100svh, 640px) * 1.7917)); }
.hero__sky, .hero__front, .hero__dots { position: absolute; left: 50%; bottom: 0; width: var(--w); aspect-ratio: 2752 / 1536; margin-left: calc(var(--w) / -2); will-change: transform; }
.hero__sky img, .hero__front img { width: 100%; height: 100%; }
.hero__sky { z-index: 0; } .hero__front { z-index: 2; pointer-events: none; } .hero__dots { z-index: 3; pointer-events: none; }
.hero__sky img { animation: settle 2s var(--ease) both; }
.hero__front img { animation: settle 2s var(--ease) both; }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
.hero__word { position: absolute; z-index: 1; left: 0; right: 0; top: 15svh; text-align: center; font-family: var(--wide); font-weight: 500; font-size: 19.6vw; line-height: 1; letter-spacing: -0.045em; color: var(--beige); will-change: transform; }
.hero__script { position: absolute; z-index: 4; right: calc(var(--gut) + 3vw); top: 47svh; font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 9.4vw, 9.4rem); line-height: 1; color: var(--white); letter-spacing: -0.01em; will-change: transform; }
.hero__lab, .hero__list { position: absolute; z-index: 3; font-size: 0.8125rem; line-height: 1.3; color: var(--white); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.hero__lab--a { left: 8.6vw; top: 12.2svh; }
.hero__lab--b { left: 58vw; top: 9.5svh; }
.hero__list { right: var(--gut); top: 13svh; list-style: none; padding: 0; text-align: right; }
.hero__list li::before { content: '— '; }
.dot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: auto; }
.dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25); transition: box-shadow 0.3s, transform 0.3s var(--ease); }
.dot[aria-pressed='true']::before { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.3); transform: scale(1.1); }
.spec { position: absolute; z-index: 4; left: 8.6vw; bottom: 9svh; padding: 16px 18px; width: 300px; font-size: 0.875rem; line-height: 1.36; }
.spec p { position: relative; }
.spec b { font-weight: 500; }
.hero__txt { position: absolute; z-index: 4; right: var(--gut); bottom: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; width: min(46vw, 620px); font-size: 0.875rem; line-height: 1.42; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
@media (max-width: 999px) {
  .hero { --w: calc(max(100svh, 640px) * 1.7917); }
  .hero__sky, .hero__front, .hero__dots { margin-left: calc(var(--w) * -0.6); }
  .hero__word { top: 28svh; font-size: 21.5vw; letter-spacing: -0.05em; }
  .hero__lab--a, .hero__lab--b { display: none; }
  .hero__list { top: 12svh; }
  .hero__script { top: 61svh; right: 34px; font-size: 16vw; }
  .hero__txt { display: none; }
  .spec { left: var(--gut); right: var(--gut); width: auto; bottom: 22px; font-size: 0.8125rem; }
  .dot[data-spec='0'] { left: 52% !important; } .dot[data-spec='1'] { left: 58% !important; } .dot[data-spec='2'] { left: 67% !important; top: 52% !important; }
}

/* ABOUT */
.about { padding: clamp(90px, 13vw, 200px) var(--gut); background: var(--grey); color: var(--black); }
.about__t { max-width: 22ch; font-family: var(--wide); font-weight: 300; font-size: clamp(1.75rem, 5vw, 5rem); line-height: 1.1; letter-spacing: -0.04em; }

/* TAKE IT APART */
.take { display: grid; gap: 18px; padding: clamp(70px, 9vw, 130px) var(--gut); background: radial-gradient(80% 80% at 66% 42%, #393B3F, var(--black) 74%); align-items: center; }
@media (min-width: 1000px) { .take { grid-template-columns: 0.62fr 1.38fr; } }
.take__txt { display: grid; gap: 18px; justify-items: start; max-width: 440px; }
.layers { display: flex; flex-wrap: wrap; gap: 6px; }
.layers button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.92rem; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.16s ease-out; }
.layers button:active { transform: scale(0.96); }
.layers button[aria-pressed='true'] { background: var(--white); color: var(--black); border-color: var(--white); }
.take__view { height: clamp(420px, 82vh, 860px); cursor: grab; touch-action: pan-y; }
.take__view.is-drag { cursor: grabbing; }
.take__view canvas { display: block; width: 100% !important; height: 100% !important; }
.take__stage { position: relative; }

/* ELEMENTS TO HOME */
.line { padding: clamp(60px, 8vw, 110px) var(--gut); background: var(--beige); color: var(--black); }
.line .h2 { text-align: center; }
.compare { position: relative; max-width: var(--max); max-height: 78svh; width: 100%; margin: clamp(26px, 4vw, 48px) auto 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); clip-path: inset(10% 6% round var(--r)); transition: clip-path 1.1s var(--ease); background: var(--black); user-select: none; }
.compare.is-in { clip-path: inset(0 round var(--r)); }
.compare__canvas, .compare__canvas canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.compare__tag { position: absolute; left: 18px; bottom: 16px; color: var(--white); font-size: 0.9rem; transition: opacity 0.25s; pointer-events: none; }
.compare__tag--r { left: auto; right: 18px; }
.compare.at-l .compare__tag:first-of-type, .compare.at-r .compare__tag--r { opacity: 0; }
.compare__h { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--beige); pointer-events: none; }
.compare__h i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--beige); color: var(--black); font-style: normal; font-size: 1.2rem; }
.compare__r { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
@media (max-width: 767px) { .compare { aspect-ratio: 4 / 5; } }

/* PROJECTS: full picture and the glass card */
.proj { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--black); }
.proj__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.9s ease, transform 1.8s var(--ease); }
.proj__slides img.is-on { opacity: 1; transform: none; }
.proj::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(28, 29, 31, 0.45), transparent 32%); pointer-events: none; }
.proj__t { position: absolute; z-index: 2; left: var(--gut); top: 34px; font-family: var(--wide); font-weight: 300; font-size: clamp(1.75rem, 3.4vw, 3.2rem); letter-spacing: -0.04em; }
.proj__next { position: absolute; z-index: 2; right: var(--gut); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.72); transition: background 0.2s, color 0.2s, transform 0.16s ease-out; }
.proj__next svg { width: 30px; }
.proj__next:active { transform: scale(0.95); }
@media (hover: hover) { .proj__next:hover { background: var(--white); color: var(--black); } }
.card { position: absolute; z-index: 2; left: clamp(var(--gut), 10vw, 170px); top: 50%; translate: 0 -50%; width: min(calc(100vw - var(--gut) * 2), 500px); padding: 16px 24px 24px; }
.card > * { position: relative; }
.card__top { display: flex; align-items: center; justify-content: space-between; }
.card__top span { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 0.8125rem; }
.card__top i { width: 120px; height: 14px; background: repeating-linear-gradient(rgba(255, 255, 255, 0.8) 0 1px, transparent 1px 4px); }
.card h3 { margin: 18px 0 16px; font-family: var(--wide); font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -0.03em; }
.card hr { border: 0; height: 1px; background: rgba(255, 255, 255, 0.5); margin: 0 0 16px; }
.card__b { display: flex; align-items: center; gap: 16px; }
.card__b svg { flex: 0 0 48px; width: 48px; }
@media (max-width: 767px) { .card { top: auto; bottom: 22px; translate: none; left: var(--gut); padding: 14px 18px 18px; } .proj__next { top: 38px; translate: none; width: 56px; height: 56px; } }

/* DREAM SPACE */
.dream { position: relative; height: 112svh; min-height: 680px; overflow: hidden; background: var(--black); }
.dream > img { position: absolute; inset: -7% 0 0; width: 100%; height: 114%; object-fit: cover; object-position: 72% 50%; will-change: transform; }
.dream::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(15, 15, 16, 0.55), transparent 58%); }
.dream__in { position: absolute; z-index: 2; left: clamp(var(--gut), 9vw, 150px); top: 24%; max-width: 560px; }
.dream__pre { font-family: var(--wide); font-weight: 300; font-size: clamp(1.1rem, 2.1vw, 1.9rem); letter-spacing: -0.03em; color: var(--grey); margin-bottom: 4px; }
.dream__t { font-family: var(--wide); font-weight: 200; font-size: clamp(4.4rem, 11.6vw, 11.6rem); line-height: 0.94; letter-spacing: -0.065em; }
.dream__t .mw { padding-bottom: 0.16em; margin-bottom: -0.16em; }
.dream__t .mw > span { background: linear-gradient(100deg, #8B8A84 0%, #D9D3C6 38%, #FFFFFF 62%, #A9A79F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dream__p { margin-top: 26px; max-width: 34ch; color: var(--white); opacity: 0; transform: translateY(16px); transition: opacity 0.9s 0.25s ease, transform 1s 0.25s var(--ease); }
.dream__p.is-in { opacity: 1; transform: none; }
.dream__mark { position: absolute; z-index: 2; right: clamp(var(--gut), 9vw, 150px); bottom: 7%; font-family: var(--wide); font-weight: 300; font-size: clamp(1.1rem, 2vw, 1.7rem); letter-spacing: 0.2em; text-align: center; }
.dream__mark span { display: block; font-size: max(11px, 0.42em); letter-spacing: 0.34em; margin-top: 3px; }
@media (max-width: 767px) { .dream__in { top: 9%; left: var(--gut); right: 34px; } .dream > img { object-position: 74% 50%; } .dream::before { background: linear-gradient(rgba(15, 15, 16, 0.92) 30%, transparent 62%); } }

/* VISTA + WORK: the photo drifts slower, the dark panel rises over it */
.vista { position: relative; height: 112svh; overflow: hidden; background: var(--black); }
.vista img { position: absolute; inset: -12% 0 0; width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.vista::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(28, 29, 31, 0.15), rgba(28, 29, 31, 0.5)); }
.vista__t { position: absolute; z-index: 1; left: var(--gut); right: var(--gut); top: 30svh; text-align: center; font-family: var(--wide); font-weight: 300; font-size: clamp(2.4rem, 8vw, 8.4rem); line-height: 1; letter-spacing: -0.05em; will-change: transform; }
.work { position: relative; z-index: 2; overflow: hidden; margin-top: -22svh; border-radius: 32px 32px 0 0; padding: clamp(110px, 16vw, 230px) var(--gut) clamp(80px, 10vw, 150px); background: var(--grey); color: var(--black); }
.work__word { position: absolute; left: 0; right: 0; top: 10%; text-align: center; font-family: var(--wide); font-weight: 500; font-size: 25vw; line-height: 1; letter-spacing: -0.05em; color: var(--beige); will-change: transform; }
.cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 1200px; margin: 0 auto; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.wc { display: block; will-change: transform; }
.wc--b { margin-top: 64px; } .wc--c { margin-top: 16px; } .wc--d { margin-top: 90px; }
.wc > div { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r); clip-path: inset(100% 0 0 0 round var(--r)); transition: clip-path 1.1s var(--ease); }
.wc.is-in > div { clip-path: inset(0 round var(--r)); }
.wc img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
@media (hover: hover) { .wc:hover img { transform: scale(1.05); } }
.wc b { display: block; margin-top: 10px; font-weight: 500; font-size: 1rem; }
.work__p { position: relative; z-index: 1; max-width: 44ch; margin: clamp(40px, 6vw, 90px) auto 0; text-align: center; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.3; }

/* REQUEST */
.start { display: grid; gap: 28px; padding: clamp(70px, 9vw, 120px) var(--gut); background: var(--black); }
@media (min-width: 1000px) { .start { grid-template-columns: 0.9fr 1.1fr; align-items: end; } }
.start__l p { margin-top: 18px; max-width: 42ch; font-size: 0.94rem; }
.start__l b { font-weight: 500; }
.start__model { width: min(100%, 560px); height: auto; aspect-ratio: 1; margin-top: 8px; mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent); mask-image: radial-gradient(closest-side, #000 84%, transparent); opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1.2s var(--ease); }
.start__model.is-in { opacity: 1; transform: none; }
.start__f { display: grid; gap: 14px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills button { min-height: 46px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.94rem; transition: background 0.2s, color 0.2s, transform 0.16s ease-out; }
.pills button:active { transform: scale(0.97); }
.pills button[aria-pressed='true'] { background: var(--grey); border-color: var(--grey); color: var(--black); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin: 18px 0 14px; }
.fields label { display: grid; gap: 2px; }
.fields span { font-size: 0.875rem; color: var(--grey); }
.fields input { width: 100%; height: 40px; padding: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); border-radius: 0; background: none; color: var(--white); font: inherit; font-size: 1rem; transition: border-color 0.2s; }
.fields input:focus { outline: 0; border-color: var(--beige); }
@media (max-width: 480px) { .fields { grid-template-columns: 1fr; } }

/* FOOTER */
.foot { background: var(--black); padding: 30px var(--gut) 22px; overflow: hidden; }
.foot__big { font-family: var(--wide); font-weight: 500; font-size: 19vw; line-height: 1.05; letter-spacing: -0.05em; text-align: center; color: var(--grey); }
.foot__row { margin-top: 14px; font-size: 0.9rem; color: var(--grey); }
.toast { position: fixed; z-index: 70; left: 50%; bottom: 20px; translate: -50% 0; padding: 10px 18px; border-radius: 999px; background: var(--beige); color: var(--black); font-size: 0.94rem; opacity: 0; transform: translateY(14px); transition: opacity 0.2s ease, transform 0.3s var(--ease); pointer-events: none; white-space: nowrap; }
.toast.is-on { opacity: 1; transform: none; }
.badge { position: fixed; z-index: 30; right: 6px; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; padding: 12px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); color: var(--black); font-size: 0.8125rem; font-weight: 500; }
@media (max-width: 767px) { .badge { font-size: 0.6875rem; padding: 10px 4px; right: 2px; } }

/* words light up one by one as the page scrolls */
.w { opacity: 0.16; }

/* SUN STUDY: full stage, the sky is the model's own background */
.sun { position: relative; height: 100svh; min-height: 680px; overflow: hidden; background: #54565B; }
.sun__view { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.sun__view.is-drag { cursor: grabbing; }
.sun__view canvas { display: block; width: 100% !important; height: 100% !important; }
.sun__head { position: absolute; z-index: 1; left: var(--gut); top: clamp(70px, 12svh, 130px); max-width: 430px; pointer-events: none; text-shadow: 0 1px 18px rgba(20, 21, 22, 0.35); }
.sun__head p { margin-top: 14px; }
.sun__panel { position: absolute; z-index: 1; left: 50%; bottom: 6svh; translate: -50% 0; width: min(calc(100vw - var(--gut) * 2), 760px); padding: 16px 22px 18px; display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; align-items: center; }
.sun__panel > * { position: relative; }
.sun__time { font-family: var(--wide); font-weight: 300; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sun__pills { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.sun__pills button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.92rem; transition: background 0.2s, color 0.2s, transform 0.16s ease-out; }
.sun__pills button:active { transform: scale(0.96); }
.sun__pills button[aria-pressed='true'] { background: var(--white); color: var(--black); border-color: var(--white); }
.range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: none; cursor: grab; }
.range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--white) var(--p, 0%), rgba(255, 255, 255, 0.3) var(--p, 0%)); }
.range::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); }
.range::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--white); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11.5px; border: 0; border-radius: 50%; background: var(--white); }
.range::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--white); }
@media (max-width: 767px) { .sun__panel { bottom: 16px; padding: 12px 14px 14px; gap: 2px 14px; } .sun__pills button { padding: 0 12px; font-size: 0.875rem; } }

/* RING: a real CSS 3D cylinder. Only the track moves; the cards never repaint. */
.ring { position: relative; overflow: hidden; padding: clamp(70px, 8vw, 110px) 0 clamp(50px, 6vw, 80px); background: var(--beige); color: var(--black); --w: clamp(210px, 21vw, 330px); --r: calc(var(--w) * 1.42); }
.ring__word { position: absolute; left: 0; right: 0; top: clamp(70px, 9vw, 130px); text-align: center; font-family: var(--wide); font-weight: 500; font-size: 24vw; line-height: 1; letter-spacing: -0.05em; color: var(--grey); will-change: transform; }
.ring__stage { position: relative; z-index: 1; margin-top: clamp(70px, 10vw, 150px); height: calc(var(--w) * 1.5); perspective: 1500px; perspective-origin: 50% 42%; cursor: grab; touch-action: pan-y; user-select: none; }
.ring__stage.is-drag { cursor: grabbing; }
.ring__track { position: absolute; left: 50%; top: 50%; width: var(--w); height: calc(var(--w) * 1.33); margin: calc(var(--w) * -0.665) 0 0 calc(var(--w) * -0.5); transform-style: preserve-3d; will-change: transform; }
.ring__track figure { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(calc(var(--i) * 45deg)) translateZ(var(--r)); background: var(--black); }
.ring__track img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ring__foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 16px; }
.ring__name { min-width: 11ch; text-align: center; font-family: var(--wide); font-weight: 300; font-size: clamp(1.15rem, 1.8vw, 1.6rem); letter-spacing: -0.03em; }
.ring__btn { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--lineb); border-radius: 50%; transition: background 0.2s, color 0.2s, transform 0.16s ease-out; }
.ring__btn svg { width: 22px; }
.ring__btn:active { transform: scale(0.95); }
@media (hover: hover) { .ring__btn:hover { background: var(--black); color: var(--white); } }
@media (max-width: 767px) { .ring { --w: 52vw; --r: calc(var(--w) * 1.36); } .ring__stage { perspective: 900px; } }