/* Liquesse Studio — site styles */
@font-face { font-family: "Bodoni Moda"; src: url("../assets/fonts/bodoni-moda-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --abyss: #03171C; --deep: #072A31; --tide: #0D3E4A; --ivory: #EFEBE3; --mist: #9DB5B3;
  --line: rgba(239,235,227,.16);
  --serif: "Bodoni Moda", Didot, serif; --sans: "Hanken Grotesk", system-ui, sans-serif;
  --gutter: clamp(1rem, 5vw, 5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--abyss); }
body { margin: 0; background: transparent; color: var(--ivory); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--ivory); outline-offset: 5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100svh; display: block; z-index: 0; }
.veil { position: fixed; inset: 0; background: var(--abyss); z-index: 1; pointer-events: none; transition: opacity 1.4s ease; }
.ready .veil { opacity: 0; }
main, footer { position: relative; z-index: 2; }

.top { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 1.4rem var(--gutter); transition: background .5s; }
.top.solid { background: rgba(3,23,28,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.top .mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--serif); font-size: 1.2rem; }
.top nav { display: flex; gap: clamp(1rem, 3vw, 2.4rem); font-size: .92rem; }
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 640px) { .top nav a:not(:last-child) { display: none; } }

.ring { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(239,235,227,.7); border-radius: 50%; pointer-events: none; z-index: 20; transition: width .25s, height .25s, margin .25s; mix-blend-mode: difference; opacity: 0; }
.ring.on { opacity: 1; }
.ring.big { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
@media (hover: none) { .ring { display: none; } }

/* Hero */
.hero { position: relative; height: 100svh; min-height: 34rem; }
.hero-copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(2rem, 6vh, 4rem); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; }
.hero-copy h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.1; max-width: 15ch; }
.hero-copy p { margin: 0; max-width: 27rem; color: var(--mist); }
.scroll-cue { position: absolute; left: 50%; bottom: 1.2rem; width: 1px; height: 44px; background: linear-gradient(var(--ivory), transparent); transform-origin: top; animation: cue 2.4s ease-in-out infinite; opacity: .6; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 760px) { .scroll-cue { display: none; } }

/* The story: each chapter is a tall stretch of scroll with text on one side */
.chapter { min-height: 130svh; display: flex; align-items: center; padding: 0 var(--gutter); }
.chapter.right { justify-content: flex-end; }
.panel { max-width: 31rem; }
.panel h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 4.1rem); line-height: 1.06; letter-spacing: -.02em; }
.panel p { margin: 1.6rem 0 0; color: var(--mist); font-size: 1.15rem; max-width: 27rem; }
@media (max-width: 760px) {
  .chapter, .chapter.right { align-items: flex-end; justify-content: flex-start; padding-bottom: 14svh; }
  .panel { padding: 1.5rem 0 0; background: linear-gradient(transparent, rgba(1,10,13,.78) 30%); }
}

/* Text settles in like liquid finding its level */
.reveal { opacity: 0; filter: blur(10px); transform: translateY(22px); transition: opacity 1.1s ease, filter 1.3s ease, transform 1.3s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; filter: none; transform: none; }
.reveal.d2 { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; filter: none; transform: none; transition: none; } .scroll-cue { animation: none; } }

.work { padding: clamp(6rem, 14vw, 11rem) var(--gutter); max-width: 96rem; margin: 0 auto; }
.work > h2 { margin: 0 0 3rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.25rem; }
.track { padding: clamp(1.75rem, 4vw, 3rem); border-radius: 20px; background: rgba(3,23,28,.55); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.track h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.1; }
.track > p { margin: 1rem 0 1.6rem; color: var(--mist); }
.track ul { list-style: none; margin: 0; padding: 0; }
.track li { padding: .8rem 0; border-top: 1px solid var(--line); }

.contact { min-height: 120svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 0 var(--gutter) clamp(5rem, 12vh, 8rem); }
.contact h2 { margin: 0 auto; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1.02; letter-spacing: -.03em; max-width: 12ch; }
.contact p { margin: 1.6rem auto 2.4rem; color: var(--mist); max-width: 30rem; }
.pill { display: inline-block; padding: 1rem 2rem; border: 1px solid var(--ivory); border-radius: 999px; text-decoration: none; transition: background .3s, color .3s; }
.pill:hover { background: var(--ivory); color: var(--abyss); }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 2rem var(--gutter); font-size: .85rem; color: var(--mist); border-top: 1px solid var(--line); background: var(--abyss); }

/* Without WebGL: a calm still version of the same page */
.fallback { display: none; }
.no-gl .fallback { display: grid; position: fixed; inset: 0; z-index: 0; place-items: center; font-family: var(--serif); font-size: clamp(4rem, 17vw, 16rem); letter-spacing: -.04em; color: rgba(239,235,227,.12); pointer-events: none; }
.no-gl #gl, .no-gl .ring { display: none; }

.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 30; background: var(--ivory); color: var(--abyss); padding: .6rem 1rem; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 1rem; }