@font-face {
  font-family: "Cormorant";
  src: url("/assets/fonts/cormorant-normal-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-normal-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --onyx: #0a0a0a;
  --ivory: #faf8f4;
  --blush: #ff4f79;
  --gold: #c6a76e;
  --pad: clamp(16px, 2.2vw, 32px);
  --serif: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ivory); }
body { margin: 0; background: var(--ivory); color: var(--onyx); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video { display: block; }

/* ---- Top bar: white, blended so it reads on the dark reel and the ivory page ---- */
.bar {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--pad); color: #fff; pointer-events: none;
  transition: background .35s, color .35s, backdrop-filter .35s;
}
.bar { transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s, background .35s, color .35s; }
.bar.away { transform: translateY(-110%); opacity: 0; }
.bar a { pointer-events: auto; }
/* past the reel there is no strip at all: the bar is plain white type that inverts whatever it sits over */
.bar.solid { mix-blend-mode: difference; color: #fff; }
.logo img { height: clamp(28px, 3vw, 42px); width: auto; }
.links { display: flex; gap: clamp(16px, 2.4vw, 36px); font: 500 13px/1 var(--sans); letter-spacing: .05em; }
.links a { transition: opacity .3s; }
.links a:hover { opacity: .55; }
.mbtn { display: none; background: none; border: 0; padding: 10px 0 10px 10px; color: inherit; cursor: pointer; font: 500 13px/1 var(--sans); letter-spacing: .05em; pointer-events: auto; }
.mnav { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad); background: var(--onyx); color: var(--ivory); }
.mnav[hidden] { display: none; }
.mnav a { font: 600 clamp(46px, 14vw, 120px)/1 var(--serif); letter-spacing: -.02em; padding: .07em 0; border-bottom: 1px solid #262626; }
.mnav a:active { color: var(--blush); }
@media (max-width: 700px) { .links { display: none; } .mbtn { display: block; } }

/* ---- Hero: the reel, then it dissolves into the page ---- */
.hero { position: relative; height: 100svh; }
.js .hero { height: 250svh; } /* the reel stays pinned: it dissolves to ivory, then the mission fades in alone */
.anchor { position: absolute; left: 0; top: calc((100% - 100svh) * .62); height: 0; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ivory); } /* ivory, so the reel dissolves straight into the page */
.reel {
  position: absolute; inset: 0; overflow: hidden; will-change: transform, opacity;
}
/* the entrance: the film scales down into place out of a soft, slightly oversized start */
.reel-in { position: absolute; inset: 0; background: #111 url("/assets/img/reel-poster.webp") center / cover no-repeat; }
/* Entrance: an ivory cover with the ALOUD wordmark cut out sits over the film, so the film shows through the letters.
   The O's counter is plugged with ivory to start. Then the camera flies into the O: the plug fades, the counter grows
   until it holds the whole screen, and the film plays full-bleed. site.js drives it with the Web Animations API
   (transform and opacity only, so it runs on the GPU), and starts it once the video is ready so nothing competes for the frame. */
.cover { display: none; position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; pointer-events: none; --w: clamp(200px, 46vw, 680px);
  will-change: transform; backface-visibility: hidden; }
.enter .cover { display: block; }
.cover img { position: absolute; left: 0; top: 0; display: block; width: calc(var(--w) * 1394 / 1362); height: auto; transform: translate(-50%, -50%); }
.cover .hole { box-shadow: 0 0 0 150vmax #faf8f4; outline: 4px solid #faf8f4; outline-offset: -2px; }
.cover .plug { will-change: opacity; }
html.locked, html.locked body { overflow: hidden; }
/* Vimeo can't object-fit, so the 1920x1024 player is sized to cover the stage and centred */
.reel iframe {
  position: absolute; top: 50%; left: 50%; border: 0; pointer-events: none;
  width: max(100vw, calc(100svh * 1.875)); aspect-ratio: 1920 / 1024; height: auto;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .9s ease;
}
.reel iframe.ready { opacity: 1; }
.stage::before, .stage::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; opacity: calc(1 - var(--dis, 0)); } /* the shades leave with the reel */
.stage::before { top: 0; height: 24%; background: linear-gradient(to bottom, rgba(10,10,10,.5), transparent); }
.stage::after { bottom: 0; height: 42%; background: linear-gradient(to top, rgba(10,10,10,.6), transparent); }
.veil { z-index: 2; position: absolute; inset: 0; background: var(--ivory); opacity: 0; pointer-events: none; }
.tag {
  z-index: 3; position: absolute; left: var(--pad); bottom: var(--pad); margin: 0; color: #fff;
  font: 600 clamp(26px, 3.2vw, 52px)/.98 var(--serif); letter-spacing: -.01em;
  text-shadow: 0 2px 28px rgba(0,0,0,.4);
  will-change: transform, opacity;
}

/* ---- Portfolio ---- */
/* The sheet fades in over the end of the reel, then the work runs as alternating split rows:
   a rounded card on one side, a big title and a one-line label on the other. */
.sheet { position: relative; z-index: 2; margin-top: -12svh; background: var(--ivory); }

/* Mission: alone on the cleared page, fading in. Without JS it simply sits in the flow. */
.mission { padding: clamp(60px, 9vw, 140px) var(--pad); text-align: center; }
.js .mission { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; opacity: 0; pointer-events: none; color: var(--onyx); }
.eyebrow { margin: 0 0 clamp(18px, 2.4vw, 36px); font: 600 13px/1 var(--sans); letter-spacing: .06em; }
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blush); margin-right: 12px; vertical-align: 1px; }
.statement { margin: 0 auto; max-width: 15em; font: 500 clamp(30px, 4.8vw, 82px)/1.04 var(--serif); letter-spacing: -.02em; }

.work {
  padding: clamp(24px, 4vw, 64px) var(--pad) clamp(60px, 9vw, 130px);
  display: grid; gap: clamp(56px, 9vw, 150px);
}

.row { display: grid; gap: 18px; align-items: end; }
.card { display: block; }
.media { overflow: hidden; background: #e8e4dc; aspect-ratio: 16 / 10; border-radius: clamp(14px, 1.7vw, 26px); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(.2,.7,.2,1); }
.card:hover .media img { transform: scale(1.04); }
.copy h2 {
  margin: 0; font: 600 clamp(40px, 6.4vw, 108px)/.92 var(--serif); letter-spacing: -.02em;
}
.copy p { margin: clamp(12px, 1.6vw, 24px) 0 0; font: 500 13px/1.3 var(--sans); letter-spacing: .05em; }

@media (min-width: 760px) {
  .row { grid-template-columns: 7fr 4fr; gap: clamp(24px, 5vw, 90px); }
  .row:nth-child(even) { grid-template-columns: 4fr 7fr; }
  .row:nth-child(even) .card { order: 2; }
  .row:nth-child(even) .copy { order: 1; text-align: right; }
}

/* ---- Footer ---- */

html:not(.js) .stage { position: relative; height: auto; background: var(--ivory); }
html:not(.js) .reel { position: relative; height: 100svh; }

@media (prefers-reduced-motion: reduce) {
  .hero, .js .hero { height: 100svh; }
  .media img { transition: none; }
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
/* stopped scrolling keeps the scroll bar, so nothing shifts sideways */

/* ---- Footer: invitation, links, and a giant fading wordmark ---- */
.foot { background: var(--onyx); color: var(--ivory); border-top: 1px solid #1c1c1c; padding: clamp(40px, 4.6vw, 72px) var(--pad) 0; overflow: hidden; }
.foot a { transition: opacity .3s, color .3s; }
.foot-top { display: grid; gap: clamp(36px, 5vw, 70px); }
.foot-pitch p { margin: 0 0 clamp(22px, 2.4vw, 36px); max-width: 16em; font: 500 clamp(38px, 4.8vw, 82px)/.98 var(--serif); letter-spacing: -.025em; }
.pill-btn { display: inline-block; padding: 15px 30px; border: 1px solid var(--ivory); border-radius: 999px; font: 500 13px/1 var(--sans); letter-spacing: .05em; transition: background .3s, color .3s, border-color .3s; }
.pill-btn:hover { background: var(--blush); border-color: var(--blush); color: #fff; }
.foot-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: start; font: 500 clamp(26px, 2.4vw, 38px)/1.1 var(--serif); letter-spacing: -.01em; }
.foot-col a:hover { color: var(--blush); }

.foot-mid { display: flex; align-items: center; flex-wrap: wrap; gap: 14px clamp(16px, 2vw, 28px); margin-top: clamp(34px, 4vw, 60px); font: 400 13px/1.2 var(--sans); }
.foot-mid i { flex: 1 1 60px; height: 1px; background: #262626; min-width: 40px; }
.foot-legal { display: flex; gap: 18px; color: #9a968f; }
.foot-legal a:hover { color: var(--ivory); }
.totop { display: inline-flex; align-items: center; gap: 12px; font: 500 15px/1 var(--sans); }
.totop b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ivory); color: var(--onyx); font-size: 14px; font-weight: 600; transition: transform .4s cubic-bezier(.2,.7,.2,1), background .3s; }
.totop:hover b { transform: translateY(-4px); background: var(--blush); color: #fff; }

/* the wordmark is the logo used as a mask: ivory at the top, dissolving to black at the bottom; blush rises on hover */
.wm {
  display: block; position: relative; margin: clamp(18px, 2.6vw, 40px) auto clamp(14px, 2vw, 28px); width: 100%; aspect-ratio: 1362 / 461; height: auto;
  -webkit-mask: url("/assets/img/logo-white.svg") center / contain no-repeat; mask: url("/assets/img/logo-white.svg") center / contain no-repeat;
  background: linear-gradient(to bottom, var(--ivory) 8%, rgba(250,248,244,.16) 100%);
}
.wm::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; background: linear-gradient(to bottom, var(--blush) 8%, rgba(198,167,110,0) 96%); }
.wm:hover::before { opacity: 1; }
@media (max-width: 700px) { .foot-mid i { display: none; } .foot-mid { gap: 18px 24px; } .totop { margin-left: auto; } }

@keyframes tagIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes barIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.enter:not(.go) .tag, .enter:not(.go) .bar { opacity: 0 !important; }
.go .tag { animation: tagIn 1s cubic-bezier(.2,.7,.2,1) 1.8s backwards; }
.go .bar { animation: barIn .9s cubic-bezier(.2,.7,.2,1) 2s backwards; }

/* the dark shades behind the headline and bar arrive with them, after the wordmark has opened */
@keyframes shadeIn { from { opacity: 0; } }
.enter:not(.go) .stage::before, .enter:not(.go) .stage::after { opacity: 0; }
.go .stage::before, .go .stage::after { animation: shadeIn .9s ease 1.8s backwards; }
@media (prefers-reduced-motion: reduce) { .go .stage::before, .go .stage::after { animation: none; } }

/* footer social icons: drawn to match the type, outlined circles that fill on hover */
.social { display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #3a3a3a; border-radius: 50%; color: var(--ivory); transition: background .4s cubic-bezier(.2,.7,.2,1), border-color .4s, transform .5s cubic-bezier(.2,.7,.2,1); }
.social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.social svg .dot { fill: currentColor; stroke: none; }
.social a:hover { background: var(--blush); border-color: var(--blush); transform: translateY(-3px); }

/* on hover the film plays inside the wordmark's letters */
.wm-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.wm-i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.wm.live .wm-i { opacity: 1; transition: opacity .15s; }
.wm.playing .wm-v { opacity: 1; transition: opacity .25s; }
.wm.live::before { opacity: 0; }

/* the picture that carries you into a project (see ajax.js): transform and clip-path only */
.xt { position: fixed; top: 0; left: 0; z-index: 90; overflow: hidden; background: #151515; color: var(--ivory); pointer-events: none; will-change: transform, clip-path; backface-visibility: hidden; }
.xt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xt-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.72), rgba(10,10,10,.1) 55%, rgba(10,10,10,.25)); }
.xt .np-label { position: absolute; left: clamp(18px, 2.4vw, 40px); top: clamp(18px, 2.4vw, 40px); font: 500 13px/1 var(--sans); letter-spacing: .04em; }
.xt .np-name { position: absolute; left: clamp(18px, 2.4vw, 40px); bottom: clamp(16px, 2.2vw, 38px); font: 600 clamp(36px, 6.4vw, 112px)/.96 var(--serif); letter-spacing: -.02em; }
@media (max-width: 700px) { .xt .np-name { font-size: 34px; bottom: 76px; } }
main.leaving { opacity: 0; transition: opacity .45s ease; }
main.entering .proj-hero { visibility: hidden; }

/* footer reveal: the page is a sheet that slides up and uncovers the footer pinned behind it */
main { position: relative; z-index: 1; background: inherit; }
.foot { position: sticky; bottom: 0; z-index: 0; }
@media (max-width: 700px) { .wm { width: 100%; } }
.foot-pitch { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(20px, 2.6vw, 40px); }
.foot-pitch p { flex: 0 0 100%; }
.foot-mail-big { font: 500 clamp(22px, 2.3vw, 36px)/1.1 var(--serif); letter-spacing: -.01em; border-bottom: 1px solid #4a4741; padding-bottom: 3px; transition: color .3s, border-color .3s; }
.foot-mail-big:hover { color: var(--blush); border-color: var(--blush); }
.foot-pitch p { max-width: none; }

/* the footer is one full screen: the invitation at the top, the wordmark pinned to the bottom */
.foot { min-height: 100svh; display: flex; flex-direction: column; }
.foot-mid { margin-top: auto; padding-top: clamp(28px, 4vw, 60px); }
@media (max-width: 700px) { .foot-top { margin-top: auto; } }

/* the page lifts off the footer: a shadow falls on it, and the footer is a touch lighter at the top so the shadow reads */
main { box-shadow: 0 60px 90px -10px rgba(0,0,0,.6); }
.foot { background: linear-gradient(to bottom, #1b1b1b, var(--onyx) 45%); }

/* ---- custom cursor (mouse only; see cursor.js) ---- */
html.has-cursor, html.has-cursor *:not(input):not(textarea):not(select) { cursor: none !important; }
.cur { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .3s ease; mix-blend-mode: difference; }
html.cur-on .cur { opacity: 1; }
.cur.is-text { opacity: 0 !important; }
.cur-dot, .cur-ring { position: absolute; left: 0; top: 0; will-change: transform; }
.cur-dot i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.cur-ring u { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #fff; display: grid; place-items: center; text-decoration: none; transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s ease, border-color .3s ease; }
.cur-ring b { font: 600 13px/1 var(--sans); letter-spacing: .02em; color: #0a0a0a; opacity: 0; transition: opacity .25s ease; }
.cur.is-link .cur-ring u { transform: scale(1.7); background: #fff; }
.cur.is-link .cur-dot i { transform: scale(0); }
/* over pictures: a labelled disc in true colour */
.cur.is-label { mix-blend-mode: normal; }
.cur.is-label .cur-ring u { transform: scale(2.3); background: #faf8f4; border-color: #faf8f4; }
.cur.is-label .cur-ring b { opacity: 1; transform: scale(.43); }
.cur.is-label .cur-dot i { transform: scale(0); }
.cur.is-down .cur-ring u { transform: scale(.8); }
.cur.is-link.is-down .cur-ring u { transform: scale(1.4); }
.cur.is-label.is-down .cur-ring u { transform: scale(2); }

html.xt-run .foot { visibility: hidden; }