/* VOUSSE, lime and interior architecture in Marseille. A concept project by fioel.
   The page is a white wall with the studio's name fixed at its centre; its rooms and limes pass over it like pictures
   pinned to a board, and each opens on a white sheet. One grid for everything: 16 columns, 32 px edge and gap
   (8 columns on a phone). One face, Host Grotesk. Two curves: in-out (.65,0,.35,1) and out (.16,1,.3,1). */
@font-face { font-family: 'Host Grotesk'; src: url('fonts/HostGrotesk.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
:root {
  --bg: #FFFFFF; --ink: #141414; --muted: rgba(20, 20, 20, .3); --chrome: #2E2E2E;
  --edge: 32px; --gap: 32px; --col: calc((100vw - 2 * var(--edge) - 15 * var(--gap)) / 16);
  --row: max(1vh, .58vw);
  --io: cubic-bezier(.65, 0, .35, 1); --out: cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 980px) { :root { --edge: 20px; --gap: 18px; --col: calc((100vw - 2 * var(--edge) - 7 * var(--gap)) / 8); } }
@media (max-width: 640px) { :root { --edge: 16px; --gap: 15px; --row: max(1vh, 1.45vw); } }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Host Grotesk', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.6; font-weight: 500; letter-spacing: -.02em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 2000; background: var(--ink); color: #fff; padding: 8px 12px; }
.skip:focus { top: 8px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- the name, fixed at the centre: "studio" in grey under the pictures, "vousse" always on top ---------- */
.wm { position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; margin: 0; text-align: center; font-size: clamp(48px, 5.14vw, 74px); line-height: 76px; font-weight: 500; letter-spacing: -.04em; pointer-events: none; white-space: nowrap; transition: transform .98s var(--io), filter .6s var(--io), opacity .6s var(--io); }
.wm .a { color: var(--muted); } .wm .b { color: transparent; }
.wm .mask { display: inline-block; overflow: hidden; vertical-align: top; }
.wm .mask > span { display: inline-block; transform: translateY(0); transition: transform .78s var(--out); }
.wm.top { z-index: 39; color: #fff; mix-blend-mode: difference; }
.wm.top .a { color: transparent; } .wm.top .b { color: #fff; }
body.intro .wm .a.mask > span { transform: translateY(115%); } body.intro .wm .b.mask > span { transform: translateY(-115%); }
body.contact-open .wm { transform: translateY(calc(-50% - clamp(148px, 16vh, 196px))); }
body.page-index .wm, body.case-open .wm { opacity: 0; filter: blur(9px); }
@media (max-width: 980px) { .wm { font-size: clamp(42px, 12vw, 72px); line-height: 1.05; } }

/* ---------- the chrome in the corners: white with difference, so it reads on photographs and on white ---------- */
.chrome { position: fixed; z-index: 50; color: #fff; mix-blend-mode: difference; }
.logo { left: var(--edge); top: var(--edge); display: block; width: 26px; height: 32px; transition: transform .58s var(--out), opacity .5s; }
.logo svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.2; }
.nav { right: var(--edge); top: var(--edge); display: flex; gap: 18px; font-size: 18px; font-weight: 600; letter-spacing: -.04em; line-height: 1; transition: transform .54s var(--out), opacity .54s var(--out); }
.nav a, .nav button { opacity: 1; transition: opacity .24s ease; }
body:not(.page-home) .nav a:not([aria-current]), body:not(.page-home) .nav button { opacity: .2; }
body:not(.page-home) .nav a:hover, body:not(.page-home) .nav button:hover { opacity: 1; }
body.case-open .nav, body.case-open .logo { opacity: 0; transform: translateY(-34px); pointer-events: none; }
.clock { right: var(--edge); bottom: var(--edge); font-size: 14px; line-height: 17px; font-weight: 400; color: #fff; display: grid; gap: 0; text-align: right; }
.clock .row { display: flex; justify-content: flex-end; gap: 10px; }
.clock .t { opacity: .4; display: inline-flex; }
.clock .d { display: inline-block; overflow: hidden; height: 17px; position: relative; }
.clock .d span { display: block; transition: transform .46s var(--io); }
.clock .colon { transition: opacity .18s linear; }
.legal { position: fixed; z-index: 44; left: 0; right: 0; bottom: var(--edge); text-align: center; font-size: 10px; font-weight: 400; color: var(--chrome); opacity: .45; line-height: 17px; pointer-events: none; }
.mtoggle { display: none; }
@media (max-width: 980px) {
  .logo { left: 16px; top: 16px; width: 22px; height: 27px; }
  .nav { display: none; }
  .mtoggle { display: block; right: 16px; top: 16px; font-size: 23.6px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
  .mmenu { position: fixed; right: 16px; top: 62px; z-index: 49; display: grid; justify-items: end; gap: 9px; font-size: 23.6px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: #fff; mix-blend-mode: difference; pointer-events: none; }
  .mmenu a, .mmenu button { display: block; overflow: hidden; }
  .mmenu span { display: block; transform: translateY(110%); transition: transform .48s var(--out); }
  body.menu-open .mmenu { pointer-events: auto; } body.menu-open .mmenu span { transform: none; }
  .clock { right: 16px; bottom: 35px; } .legal { display: none; }
}
@media (min-width: 981px) { .mmenu { display: none; } }

/* ---------- the field ---------- */
.field { position: relative; width: 100%; }
.tile { position: absolute; display: block; padding: 0; overflow: visible; z-index: 5; transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .5s; }
.tile .m { position: absolute; inset: 0; overflow: hidden; background: #f2f1ee; }
.tile img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.tile:hover { transform: scale(1.025); } .tile:hover img { transform: scale(1.04); }
.tile .tl { position: absolute; left: 0; top: calc(100% + 6px); font-size: 12px; line-height: 1.3; opacity: 0; transition: opacity .3s; white-space: nowrap; }
@media (hover: none) { .tile .tl { opacity: .55; } }
body.intro .tile .drop { transform: translateY(var(--drop, -250vh)); }
.tile .drop { position: absolute; inset: 0; transition: transform var(--dd, 1.6s) var(--io) var(--dl, 0s); }
body.contact-open .tile { transform: translate(var(--cx, 0), var(--cy, 0)) rotate(var(--cr, 0deg)) scale(.965); transition: transform var(--cd, .8s) var(--io) var(--cdl, 0s); }

/* ---------- the custom cursor: a small square that becomes a circle carrying the name of what it is over ---------- */
.cur { position: fixed; left: 0; top: 0; z-index: 1300; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #fff; mix-blend-mode: difference; pointer-events: none; transition: border-radius .3s var(--out), transform .3s var(--out), width .52s cubic-bezier(.68, -.48, .28, 1.48), height .52s cubic-bezier(.68, -.48, .28, 1.48), margin .52s cubic-bezier(.68, -.48, .28, 1.48), opacity .3s; will-change: left, top; }
.cur.img { border-radius: 50%; transform: scale(1.04); }
.cur-l { position: fixed; left: 0; top: 0; z-index: 1301; width: 176px; margin-left: -88px; text-align: center; font-size: 14px; line-height: 15.6px; letter-spacing: -.04em; color: #fff; mix-blend-mode: difference; pointer-events: none; }
.cur-l span { display: inline-block; overflow: hidden; vertical-align: top; } .cur-l span i { font-style: normal; display: inline-block; transform: translateY(115%); transition: transform .3s var(--out); transition-delay: calc(var(--w) * 24ms); }
.cur-l.on span i { transform: none; }
@media (hover: none), (pointer: coarse) { .cur, .cur-l { display: none; } }

/* ---------- the sheet: a white card slides up over the field; the name runs along its top ---------- */
.case { position: fixed; inset: 0; z-index: 70; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; pointer-events: none; }
body.case-open .case { visibility: visible; pointer-events: auto; }
.case-title { position: fixed; top: 0; left: 0; right: 0; z-index: 72; margin: 0; height: 0; overflow: visible; color: #fff; mix-blend-mode: difference; pointer-events: none; visibility: hidden; will-change: transform; }
body.case-open .case-title { visibility: visible; }
body.case-closing .case-title .track { transform: translateY(-125%); transition: transform .8s var(--io); }
.case-title .track { display: flex; white-space: nowrap; font-size: clamp(96px, 20.9vw, 301px); font-weight: 700; letter-spacing: -.08em; line-height: .72; text-transform: lowercase; transform: translateY(-125%); transition: transform 1.58s var(--out) .54s; }
.case-title .track span { padding-right: .32em; animation: marquee 48s linear infinite; }
body.case-open .case-title .track { transform: none; }
@keyframes marquee { to { transform: translateX(-100%); } }
.card { position: relative; margin: clamp(92px, 23.7vh, 243px) var(--edge) 100vh; padding: 31px 30px 128px; background: #fff; outline: 1px solid rgba(20, 20, 20, .07); border-radius: 4px 4px 0 0; transform: translateY(105vh); transition: transform 1.46s var(--out); }
body.case-open .card { transform: none; }
body.case-closing .card { transform: translateY(105vh); transition: transform 1s var(--io); }
.acts { position: sticky; top: 31px; z-index: 3; display: flex; justify-content: flex-end; gap: 24px; margin-bottom: 52px; font-size: 23.6px; font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; line-height: 1; }
.acts .share { opacity: .6; font-weight: 600; }
.intro { display: grid; grid-template-columns: 230px 1fr; gap: 32px; max-width: min(854px, 100%); margin: 0 auto; }
.meta { margin: 0; }
.meta div { display: grid; grid-template-columns: 1fr auto; padding: 4px 0; border-bottom: .5px solid rgba(0, 0, 0, .1); }
.meta dt { font-size: 10px; text-transform: uppercase; opacity: .5; line-height: 12px; padding-top: 2px; } .meta dd { margin: 0; font-size: 12px; line-height: 14.4px; text-align: right; }
.intro p { margin: 0; font-size: 18px; line-height: 1.2; text-align: justify; }
.gal { max-width: 846px; margin: 136px auto 0; display: grid; gap: 32px; }
.gal figure { margin: 0; display: grid; gap: 8px; }
.gal figure img { width: 100%; height: 100%; object-fit: cover; }
.gal .full img { aspect-ratio: 846 / 560; }
.gal .pair { display: grid; grid-template-columns: 408fr 438fr; gap: 0 0; align-items: start; column-gap: 0; }
.gal .pair figure:first-child img { aspect-ratio: 408 / 529; } .gal .pair figure:last-child { margin-left: 0; } .gal .pair figure:last-child img { aspect-ratio: 438 / 297; }
.gal .pt { width: 558px; justify-self: end; } .gal .pt.l { justify-self: start; } .gal .pt img { aspect-ratio: 558 / 712; }
.gal figcaption { font-size: 12px; line-height: 1.3; display: flex; justify-content: space-between; gap: 16px; } .gal figcaption span:last-child { opacity: .5; text-align: right; }
.gal .say { max-width: 383px; justify-self: end; font-size: 18px; line-height: 1.2; text-align: justify; margin: 0; }
.end { text-align: center; margin-top: 128px; display: grid; justify-items: center; gap: 16px; }
.end .btn { background: var(--ink); color: #fff; font-size: 18px; font-weight: 600; letter-spacing: -.04em; padding: 10px 18px; }
.end p { opacity: .3; margin: 0; }
@media (max-width: 980px) { .card { margin: 92px 12px 100vh; padding: 20px 16px 96px; } .intro { grid-template-columns: 1fr; } .gal { margin-top: 64px; gap: 20px; } .gal .pair { grid-template-columns: 1fr; gap: 20px; } .gal .pt { width: 100%; } .acts { font-size: 18px; } }

/* ---------- index pages: one cluster at the centre, a picture and a list ---------- */
.index { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 32px; align-items: center; z-index: 10; }
.index .im { width: 232px; height: 312px; flex: none; overflow: hidden; background: #f2f1ee; }
.index .im img { width: 100%; height: 100%; object-fit: cover; }
.index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.index li a, .index li button { display: flex; align-items: baseline; gap: 12px; min-height: 29px; opacity: .3; transition: opacity .18s; text-align: left; }
.index li .n { font-size: 10px; width: 16px; } .index li b { font-size: 24px; font-weight: 700; letter-spacing: -.05em; line-height: 1.2; } .index li .mt { font-size: 10px; text-transform: uppercase; opacity: 0; transition: opacity .18s; letter-spacing: 0; }
.index li.on a, .index li.on button { opacity: 1; } .index li.on .mt { opacity: .5; }
.index-enter .im { animation: idxIm .92s var(--io) .15s both; } .index-enter li { animation: idxLi .64s var(--io) both; animation-delay: calc(.26s + var(--i) * 58ms); }
@keyframes idxIm { from { filter: blur(10px); transform: translateY(46px) scale(.985); opacity: 0; } }
@keyframes idxLi { from { filter: blur(9px); transform: translateY(34px); opacity: 0; } }
@media (max-width: 980px) { .index { position: static; transform: none; flex-direction: column; padding: 96px 16px 140px; } .index .im { display: none; } .index li b { font-size: 22px; } .index li a, .index li button { opacity: 1; } .index li .mt { opacity: .5; } }

/* ---------- studio: an editorial column at the left, a rail of pictures in the middle ---------- */
.studio { display: grid; grid-template-columns: 320px 320px; gap: 0 208px; padding: 0 var(--edge); }
.ed { position: sticky; top: 115px; align-self: start; display: grid; gap: 16px; padding-top: 0; }
.ed p { margin: 0; }
.ed .w { display: inline-block; opacity: 0; transform: translateY(12px); transition: opacity .42s var(--out), transform .42s var(--out); transition-delay: calc(.42s + var(--i) * 18ms); }
body.ready .ed .w { opacity: 1; transform: none; }
.ed .div { height: 1px; background: rgba(0, 0, 0, .16); margin: 8px 0; }
.ed dl { margin: 0; display: grid; gap: 6px; } .ed dl div { display: flex; justify-content: space-between; gap: 16px; } .ed dt { font-weight: 500; white-space: nowrap; } .ed dd { margin: 0; opacity: .6; font-size: 12px; text-transform: uppercase; font-weight: 600; letter-spacing: -.02em; text-align: right; }
.rail { padding-top: 56vh; display: grid; gap: 31px; padding-bottom: 40vh; }
.rail figure { margin: 0; } .rail img { width: 320px; aspect-ratio: 320 / 383; object-fit: cover; }
.rail figure:first-child img { aspect-ratio: 320 / 430; }
.rail figure { animation: railIn linear both; animation-timeline: view(); animation-range: entry 0% entry 46%; }
@keyframes railIn { from { transform: translateY(82px); opacity: 0; } }
@media (max-width: 1100px) { .studio { grid-template-columns: 1fr; gap: 40px; padding: 74px 16px 0; } .ed { position: static; } .ed p { text-align: justify; } .rail { padding-top: 0; justify-items: center; } .rail img { width: min(320px, 100%); } }

/* ---------- contact: the pictures push aside and the form opens in the middle ---------- */
.form { position: fixed; left: 50%; top: calc(50% - 64px); transform: translateX(-50%); z-index: 60; width: 232px; display: grid; gap: 8px; visibility: hidden; }
body.contact-open .form { visibility: visible; }
.form .f { overflow: hidden; }
.form input, .form select, .form .send { display: block; width: 100%; font: inherit; font-size: 18px; font-weight: 600; letter-spacing: -.04em; text-align: center; padding: 8px; border: 0; background: transparent; color: var(--ink); border-radius: 0; transform: translateY(110%); transition: transform .48s var(--out); transition-delay: var(--d, 0s); -webkit-appearance: none; appearance: none; }
.form input:hover, .form select:hover { background: #1414140d; }
.form input::placeholder { color: var(--ink); opacity: .35; }
.form .send { background: var(--ink); color: #fff; }
body.contact-open .form input, body.contact-open .form select, body.contact-open .form .send { transform: none; }
.form .note { font-size: 12px; text-align: center; line-height: 1.4; opacity: 0; transition: opacity .4s; } .form.sent .note { opacity: .6; }
.closex { position: fixed; z-index: 61; left: 50%; top: calc(50% + 190px); transform: translateX(-50%); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .3s; }
body.contact-open .closex { opacity: .5; pointer-events: auto; }

/* ---------- leaving a page: the pictures on screen blur and dissolve ---------- */
.ghost { position: fixed; z-index: 38; pointer-events: none; overflow: hidden; transition: filter .9s cubic-bezier(.72, 0, .24, 1), opacity .9s cubic-bezier(.72, 0, .24, 1), transform .9s cubic-bezier(.72, 0, .24, 1); }
.ghost img { width: 100%; height: 100%; object-fit: cover; }
.ghost.go { filter: blur(14px); opacity: 0; transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.field { overflow-x: clip; }
html, body { overflow-x: clip; }

.card:focus { outline: none; }
@media (max-width: 980px) {
  .acts { position: static; }
  .index li a, .index li button { flex-wrap: wrap; column-gap: 12px; row-gap: 0; } .index li b { white-space: nowrap; } .index li .mt { flex-basis: 100%; padding-left: 28px; }
  body.page-studio .wm { opacity: 0; }
}
@media (max-width: 980px) { body:not(.page-home) .clock { display: none; } body.case-open .mtoggle { opacity: 0; pointer-events: none; } }

.index ol { flex: none; } .index li b { white-space: nowrap; }
@media (min-width: 981px) and (max-height: 860px) { .index ol { gap: 0; } .index li a, .index li button { min-height: 0; } .index li b { font-size: 21px; line-height: 1.12; } }
@media (min-width: 981px) and (max-width: 1100px) { .ed { max-width: 640px; } body.page-studio .wm { opacity: 0; } }