/* ==========================================================================
   CHRIS EKEIGWE STUDIOS — maison design system
   Method measured from ca.louisvuitton.com (Aug 2026).

   One typeface (Jost). One weight (400). No italics. No radius.
   Three sizes:  10px eyebrow · 16px body · 32px title
   Tracking:     1px on eyebrows, 0.4px everywhere else
   Colour:       #1A1A1A on #FFFFFF · #F8F8F8 over imagery
   Rhythm:       full-bleed media, caption centred beneath,
                 chapters butted together with no gaps.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --ink:#1A1A1A;
  --onmedia:#F8F8F8;
  --muted:#767676;
  --line:#E5E5E5;
  --wash:#F5F4F1;

  --ff:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;

  --pad:clamp(16px,4vw,72px);
  --chapter:clamp(54px,6.6vw,104px);
  --gap:clamp(10px,1.2vw,16px);
  --ease:cubic-bezier(.33,0,.2,1);
  --hd-h:88px;
  --hd-h-solid:68px;
}

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--ff);background:var(--paper);color:var(--ink);
  font-size:16px;font-weight:400;line-height:1.5;letter-spacing:.4px;overflow-x:hidden}
img,video{display:block;width:100%;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-size:inherit;font-weight:400}
ul{list-style:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* ---------------------------------------------------------------- type ---- */
.eyebrow{font-size:10px;font-weight:400;letter-spacing:1px;line-height:15px;text-transform:uppercase}
.title{font-size:clamp(22px,2.5vw,32px);font-weight:400;letter-spacing:.4px;line-height:1.25}
.copy{font-size:16px;font-weight:400;letter-spacing:.4px;line-height:24px;color:var(--muted)}
.copy--ink{color:var(--ink)}
.cta{display:inline-block;font-size:16px;line-height:24px;letter-spacing:.4px;
  border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .3s var(--ease)}
.cta:hover{opacity:.6}
.on-media,.on-media .copy{color:var(--onmedia)}

/* -------------------------------------------------------------- header ---- */
/* The maison's header: a solid white bar with ink text, pinned for the whole page.
   The ONLY exception is the very top of a page that opens on a film, where it sits
   transparent over the imagery. That swap happens once, at the extreme top, and the
   solid state then persists all the way down.

   Three things keep it from flickering, and all three matter:
     1. Hysteresis. It goes solid past 40px but only returns to transparent below 4px,
        so it cannot oscillate around a single threshold.
     2. Overscroll is clamped to 0, so rubber-band and pull-to-refresh never toggle it.
     3. Only background-color and colour change, and both are animatable, so the swap
        crossfades instead of snapping. Height never changes. No mix-blend-mode:
        it is not animatable, which is what made the old version blink.
   Pages without a film hero never get .at-top at all, so they hold a single state. */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hd-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 var(--pad);
  background:var(--paper);color:var(--ink);
  transition:background-color .35s var(--ease),color .35s var(--ease)}
body.has-film .hd.at-top{background:transparent;color:var(--onmedia)}
@media(prefers-reduced-motion:reduce){.hd{transition:none}}
.hd--static{position:absolute}
.hd__mark{grid-column:2;font-size:clamp(15px,1.5vw,21px);letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;text-align:center}
.hd__l,.hd__r{display:flex;gap:clamp(12px,1.7vw,26px);align-items:center;font-size:14px}
.hd__r{justify-content:flex-end}
.hd a.nv{letter-spacing:.4px;opacity:.9;transition:opacity .3s var(--ease)}
.hd a.nv:hover{opacity:1}
.hd__burger{display:none;font-size:14px;letter-spacing:.4px}
@media(max-width:880px){
  .hd__l a.nv,.hd__r a.nv{display:none}
  .hd__burger{display:inline-block}
}

/* ---------------------------------------------------------------- menu ---- */
.menu{position:fixed;inset:0;z-index:70;background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s var(--ease)}
.menu.is-open{opacity:1;visibility:visible}
.menu a{font-size:clamp(20px,4vw,30px);letter-spacing:.4px}
.menu__close{position:absolute;top:26px;right:var(--pad);font-size:14px;letter-spacing:.4px}
.menu__foot{position:absolute;bottom:34px;display:grid;gap:6px;text-align:center;
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}

/* -------------------------------------------------------------- media ----- */
.media{position:relative;overflow:hidden;background:var(--wash)}
.media img,.media video{transition:transform 1.6s var(--ease)}
a.card:hover .media img,.media--hover:hover img{transform:scale(1.03)}

.ar-film{height:100svh;min-height:520px}
.ar-film video,.ar-film img{position:absolute;inset:0;height:100%;object-fit:cover}
.ar-wide{aspect-ratio:16/9}
.ar-wide img,.ar-wide video{height:100%;object-fit:cover}
.ar-portrait{aspect-ratio:4/5}
.ar-portrait img{height:100%;object-fit:cover}
@media(max-width:760px){.ar-wide{aspect-ratio:4/5}}

/* a portrait shown whole, never cropped, on a wash band */
.plate{background:var(--wash);display:flex;justify-content:center;padding:0}
.plate img{width:auto;max-width:min(100%,720px);max-height:86svh;object-fit:contain}
.plate--hero img{max-height:88svh}
@media(max-width:760px){.plate img{max-width:100%;max-height:none}}

.scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.30),rgba(0,0,0,.05) 34%,rgba(0,0,0,.10) 60%,rgba(0,0,0,.52))}

/* two portraits side by side, flush */
.split{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.split .media{aspect-ratio:4/5}
.split .media img{height:100%;object-fit:cover}

.quad{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.quad{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.quad{grid-template-columns:1fr}}
.quad .media{aspect-ratio:3/4}
.quad .media img{height:100%;object-fit:cover}

/* ------------------------------------------------------------ captions ---- */
.hero-cap{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(34px,6vh,72px);text-align:center}
.hero-cap .eyebrow{margin-bottom:12px}
.hero-cap .title{margin-bottom:14px}
.hero-cap .copy{margin:0 auto 18px;max-width:46ch}

.cap{text-align:center;padding:clamp(24px,3vw,40px) var(--pad) 0;max-width:660px;margin:0 auto}
.cap .eyebrow{margin-bottom:10px;color:var(--muted)}
.cap .title{margin-bottom:10px}
.cap .copy{margin:0 auto 18px}
.cap--pad{padding-top:0}

/* body prose, centred column */
.prose{max-width:660px;margin:0 auto;padding:clamp(22px,3vw,34px) var(--pad) 0;text-align:center}
.prose p{font-size:16px;line-height:24px;color:var(--muted);margin-bottom:14px}
.prose p:last-child{margin-bottom:0}

/* ----------------------------------------------------------- meta row ----- */
/* The spec row sits apart from the caption above it, and its own rows need enough
   air that a three-line value does not read as one continuous column of text. */
.meta{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(34px,4.2vw,54px) var(--gap);
  max-width:1100px;margin:0 auto;padding:clamp(46px,6vw,84px) var(--pad) 0;text-align:center}
@media(max-width:760px){.meta{grid-template-columns:repeat(2,1fr);gap:clamp(30px,7vw,44px) var(--gap)}}
.meta dt{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.meta dd{font-size:16px;line-height:26px;letter-spacing:.4px}

/* ---------------------------------------------------------------- rows ---- */
.chapter{padding-bottom:var(--chapter)}
.chapter--top{padding-top:var(--chapter)}
.row{margin-top:clamp(30px,3.6vw,52px)}
.row__head{display:flex;align-items:center;justify-content:center;gap:16px;padding:0 var(--pad) 16px}
/* Static grid. No horizontal scrolling: every selected project is visible at once,
   which suits a page you scan vertically. */
.rowgrid{display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(22px,2.6vw,38px) var(--gap);padding:0 var(--pad)}
@media(max-width:1200px){.rowgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.rowgrid{grid-template-columns:repeat(2,1fr)}}
.card{display:block}
.card__t{text-align:center;padding-top:14px;font-size:16px;line-height:24px;letter-spacing:.4px}
.card__s{text-align:center;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* --------------------------------------------------------- work index ----- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3vw,44px) var(--gap);
  padding:0 var(--pad)}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid{grid-template-columns:1fr}}
.grouphead{text-align:center;padding:clamp(46px,5.5vw,80px) var(--pad) clamp(22px,2.6vw,34px)}
.grouphead .eyebrow{color:var(--muted)}

/* -------------------------------------------------------------- quote ----- */
.quote{text-align:center;padding:clamp(54px,6.6vw,104px) var(--pad)}
.quote blockquote{font-size:clamp(20px,2.3vw,30px);line-height:1.3;letter-spacing:.4px;max-width:20ch;margin:0 auto}

/* --------------------------------------------------------------- next ----- */
.nextp{text-align:center;padding:0 var(--pad) var(--chapter)}
.nextp .eyebrow{color:var(--muted);margin-bottom:10px}
.nextp .title{margin-bottom:12px}

/* -------------------------------------------------------------- close ----- */
.close{text-align:center;padding:var(--chapter) var(--pad)}
.close .eyebrow{color:var(--muted);margin-bottom:10px}
.close .title{margin-bottom:10px}
.close .copy{margin:0 auto 18px}

/* ------------------------------------------------------------- footer ----- */
.ft{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:14px;padding:24px var(--pad) 40px;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.ft>:first-child{justify-self:start}
.ft>:nth-child(2){justify-self:center;text-align:center}
.ft>:last-child{justify-self:end;text-align:right}
.ft a:hover{color:var(--ink)}
@media(max-width:680px){
  .ft{grid-template-columns:1fr;text-align:center;gap:10px}
  .ft>*{justify-self:center!important;text-align:center!important}
}

/* --------------------------------------------------- film sound toggle ---- */
.film-ui{position:absolute;right:var(--pad);bottom:clamp(34px,6vh,72px);display:flex;gap:14px}
.film-ui button{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--onmedia);
  border-bottom:1px solid rgba(248,248,248,.6);padding-bottom:2px;transition:opacity .3s var(--ease)}
.film-ui button:hover{opacity:.6}

/* -------------------------------------------------------------- motion ---- */
.js .rv{opacity:0}
.rv{transition:opacity 1s var(--ease)}
.rv.in{opacity:1}
@media(prefers-reduced-motion:reduce){
  .js .rv,.rv{opacity:1;transition:none}
  .media img,.media video{transition:none}
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:14px;z-index:99;background:var(--paper);color:var(--ink);padding:10px 14px}

/* ---------------------------------------------------------------- form ---- */
.form{max-width:760px;margin:0 auto;padding:clamp(26px,3vw,42px) var(--pad) 0;
  display:grid;gap:clamp(20px,2.4vw,30px);text-align:left}
.form__row{display:grid;gap:clamp(20px,2.4vw,30px);grid-template-columns:1fr 1fr}
@media(max-width:640px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:8px}
.field label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--ff);font-size:16px;line-height:24px;letter-spacing:.4px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);padding:9px 0;width:100%;
  transition:border-color .3s var(--ease)}
.field textarea{resize:vertical;min-height:132px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:#B5B2AC}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:22px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%231A1A1A' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center}
.form__note{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:center}
.form__submit{justify-self:center;padding-top:6px}
.form__submit button{font-size:16px;line-height:24px;letter-spacing:.4px;
  border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .3s var(--ease)}
.form__submit button:hover{opacity:.6}
.req{color:var(--muted)}

/* ------------------------------------------------------------ list cols --- */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,56px) var(--gap);
  max-width:1100px;margin:0 auto;padding:clamp(30px,4vw,54px) var(--pad) 0;text-align:center}
@media(max-width:820px){.cols{grid-template-columns:1fr}}
.cols h3{font-size:16px;line-height:24px;letter-spacing:.4px;margin-bottom:6px}
.cols .copy{margin-bottom:14px}
.cols li{font-size:16px;line-height:26px;letter-spacing:.4px;color:var(--muted)}

/* numbered steps */
.steps{max-width:760px;margin:0 auto;padding:clamp(30px,4vw,54px) var(--pad) 0;display:grid;gap:clamp(24px,3vw,38px)}
.step{text-align:center}
.step .eyebrow{color:var(--muted);margin-bottom:8px}
.step h3{font-size:16px;line-height:24px;letter-spacing:.4px;margin-bottom:6px}

/* credits */
.credits{max-width:900px;margin:0 auto;padding:clamp(26px,3vw,42px) var(--pad) 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.credits li{font-size:16px;line-height:26px;letter-spacing:.4px;color:var(--muted)}

/* ------------------------------------------------------------ lightbox ---- */
/* Project images open full-size at their true aspect ratio. The surround is
   near-black because that is what serves a photograph; the chrome stays maison
   (10px tracked caps, no boxes, no radius). One token flips it to paper white. */
:root{ --lb-bg:#0B0B0B; --lb-fg:#F8F8F8; }

button.media{display:block;width:100%;cursor:zoom-in;text-align:inherit;font:inherit;color:inherit}
button.media.plate{display:flex;justify-content:center}
.split button.media,.quad button.media{height:100%}

.lb{position:fixed;inset:0;z-index:90;background:var(--lb-bg);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease)}
.lb.is-open{opacity:1;visibility:visible}
.lb__fig{margin:0;padding:clamp(56px,7vh,88px) clamp(16px,5vw,88px);
  display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.lb__img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.lb__bar{position:absolute;left:0;right:0;top:0;height:var(--hd-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:0 var(--pad);color:var(--lb-fg)}
.lb__count{grid-column:2;font-size:10px;letter-spacing:1px;text-transform:uppercase;text-align:center}
.lb__close{grid-column:3;justify-self:end;font-size:14px;letter-spacing:.4px;color:var(--lb-fg);
  transition:opacity .3s var(--ease)}
.lb__close:hover{opacity:.6}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  color:var(--lb-fg);font-size:16px;line-height:1;opacity:.7;transition:opacity .3s var(--ease)}
.lb__nav:hover{opacity:1}
.lb__nav[disabled]{opacity:.2;cursor:default}
.lb__prev{left:clamp(6px,1.6vw,26px)}
.lb__next{right:clamp(6px,1.6vw,26px)}
.lb__cap{position:absolute;left:0;right:0;bottom:0;height:clamp(44px,6vh,64px);
  display:flex;align-items:center;justify-content:center;padding:0 var(--pad);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--lb-fg);opacity:.7}
@media(max-width:640px){.lb__nav{display:none}}
@media(prefers-reduced-motion:reduce){.lb{transition:none}}

/* --------------------------------------------------- about: inline lists --- */
/* Disciplines and production capability read as a quiet line of terms, not a
   service grid. Same rhythm as .credits, so the page keeps one visual language. */
.terms{max-width:820px;margin:0 auto;padding:clamp(20px,2.6vw,32px) var(--pad) 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px}
.terms li{font-size:16px;line-height:26px;letter-spacing:.4px;color:var(--ink)}
.terms--quiet li{color:var(--muted)}

/* ------------------------------------------------------------ about bio --- */
/* Portrait beside the text, the way a photographer's about page reads.
   Stacks on narrow screens with the portrait first. */
.bio{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(26px,4vw,68px);
  max-width:1240px;margin:0 auto;padding:0 var(--pad);align-items:start}
@media(max-width:860px){.bio{grid-template-columns:1fr;gap:26px}}
.bio__img{display:block;width:100%;cursor:zoom-in;background:var(--wash);overflow:hidden}
.bio__img img{width:100%;height:auto;transition:transform 1.6s var(--ease)}
.bio__img:hover img{transform:scale(1.02)}
.bio__txt .eyebrow{color:var(--muted);margin-bottom:14px}
.bio__txt .title{margin-bottom:20px}
.bio__txt p{font-size:16px;line-height:26px;letter-spacing:.4px;color:var(--muted);
  margin-bottom:16px;max-width:54ch}
.bio__txt p:last-child{margin-bottom:0}

/* Card captions: let the browser even out the line lengths, and never break a word
   across lines. Combined with the non-breaking space before each separator, a wrapped
   caption stays visually centred instead of looking ragged on a narrow screen. */
.card__t,.card__s{text-wrap:balance;overflow-wrap:break-word;hyphens:none}