/* =====================================================================
   WORK — IMMERSIVE PROJECT EXHIBITION
   Loaded only by /work/index.html. Uses the site tokens and the shared
   chrome from main.css and adds nothing global; the .project card
   styles in main.css are left alone because the homepage still uses them.

   Structure, per project:

     .ex-item            one chapter, taller than the viewport
       .ex-item__stick   sticks for the length of the chapter
         .ex-media       the photograph (the link into the project)
         .ex-meta        number, title, location, type

   Consecutive chapters overlap by --ex-lap, so an exiting photograph and
   the one arriving under it share the screen for a moment instead of
   cutting. Every value the scroll timeline writes is a transform or an
   opacity — nothing here animates layout.
   ===================================================================== */

.ex{
  --ex-lap:16vh;              /* how far chapters overlap on handoff */
  --ex-track:190vh;           /* scroll length of one chapter        */
  position:relative;
}

/* ---- opener ----
   The page keeps the original portfolio header (.opener / .opener--skyline
   from main.css) — skyline, headline and studio copy. Nothing is restyled
   here; the exhibition simply starts underneath it. */

/* ---- one chapter ---- */
.ex-item{
  position:relative;
  min-height:var(--ex-track);
  scroll-margin-top:0;
}
.ex-item + .ex-item{margin-top:calc(var(--ex-lap) * -1)}
.ex-item__stick{
  position:sticky;top:0;
  height:100vh;height:100svh;
  display:grid;align-content:center;
  overflow:hidden;
}

/* the photograph */
.ex-media{
  display:block;position:relative;
  background:var(--bg-media);
  overflow:hidden;
  text-decoration:none;color:inherit;
  transform-origin:center center;
  will-change:transform,opacity;
}
.ex-media__frame{position:absolute;inset:0;overflow:hidden}
.ex-media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  will-change:transform;
}
.ex-media__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(26,26,26,.42),rgba(26,26,26,0) 46%);
  opacity:0;
}
.ex-media:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

/* metadata */
.ex-meta{display:grid;gap:clamp(6px,1vh,12px);pointer-events:none}
.ex-meta__num{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1;letter-spacing:.02em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.ex-meta__num i{font-style:normal;color:var(--muted)}
.ex-meta__title{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.75rem,4.4vw,4rem);line-height:.98;letter-spacing:var(--tracking-display);
  margin:0;
}
.ex-meta__row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(10px,1.6vw,22px);
  margin-top:clamp(4px,.8vh,10px);
  font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--muted);
}
.ex-meta__row span+span::before{content:"";display:inline-block;width:14px;height:1px;background:var(--line);vertical-align:middle;margin-right:clamp(10px,1.6vw,22px)}
.ex-meta__cta{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:clamp(10px,1.6vh,20px);
  font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--ink);
}
.ex-meta__cta i{display:block;width:22px;height:1px;background:var(--accent);transition:width var(--dur-fast) var(--ease)}
.ex-item:hover .ex-meta__cta i{width:36px}

/* ---------------------------------------------------------------
   COMPOSITIONS — one system, six framings. Every one stays
   landscape: all twelve card photographs are landscape, so a
   portrait crop would throw away most of the picture.
   --------------------------------------------------------------- */
.ex-item__stick > .container{width:100%}
.ex-frame{position:relative}

/* full — the photograph takes the viewport, type sits over its foot */
.ex-item[data-comp="full"] .ex-item__stick{align-content:stretch}
.ex-item[data-comp="full"] .ex-media{position:absolute;inset:0;width:100%;height:100%}
.ex-item[data-comp="full"] .ex-media__veil{opacity:1}
.ex-item[data-comp="full"] .ex-meta{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 var(--pad-x) clamp(38px,8vh,90px);
  color:var(--ink-inverse);
}
.ex-item[data-comp="full"] .ex-meta__row,
.ex-item[data-comp="full"] .ex-meta__cta{color:rgba(245,242,237,.82)}
.ex-item[data-comp="full"] .ex-meta__cta{color:var(--ink-inverse)}
.ex-item[data-comp="full"] .ex-meta__row span+span::before{background:rgba(245,242,237,.3)}

/* inset — centred, generous margin, the photograph as an exhibit */
.ex-item[data-comp="inset"] .ex-media{aspect-ratio:3/2;max-width:min(1080px,88vw);margin-inline:auto}
.ex-item[data-comp="inset"] .ex-meta{max-width:min(1080px,88vw);margin:clamp(18px,3vh,34px) auto 0;text-align:center;justify-items:center}
.ex-item[data-comp="inset"] .ex-meta__row{justify-content:center}

/* wide — a letterbox, type beneath */
.ex-item[data-comp="wide"] .ex-media{aspect-ratio:21/9}
.ex-item[data-comp="wide"] .ex-meta{margin-top:clamp(18px,3vh,34px)}

/* left / right — asymmetric, photograph one side, type the other */
.ex-item[data-comp="left"] .ex-row,
.ex-item[data-comp="right"] .ex-row{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vh,32px)}
.ex-item[data-comp="left"] .ex-media,
.ex-item[data-comp="right"] .ex-media{aspect-ratio:4/3}

/* offset — pushed off the centre line, the widest whitespace on the page */
.ex-item[data-comp="offset"] .ex-media{aspect-ratio:3/2}
.ex-item[data-comp="offset"] .ex-meta{margin-top:clamp(18px,3vh,34px)}

@media (min-width:900px){
  .ex-item[data-comp="left"] .ex-row{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--gutter-featured);align-items:center}
  .ex-item[data-comp="right"] .ex-row{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--gutter-featured);align-items:center}
  .ex-item[data-comp="right"] .ex-media{order:2}
  .ex-item[data-comp="right"] .ex-meta{order:1}
  .ex-item[data-comp="left"] .ex-meta,
  .ex-item[data-comp="right"] .ex-meta{margin-top:0}
  .ex-item[data-comp="offset"] .ex-media{max-width:76%;margin-left:auto}
  .ex-item[data-comp="offset"] .ex-meta{max-width:76%;margin-left:auto}
  .ex-item[data-comp="wide"] .ex-media{max-width:92%}
}

/* ---------------------------------------------------------------
   PROJECT INDEX — quiet, fixed, always tells you where you are
   --------------------------------------------------------------- */
.ex-index{
  position:fixed;left:clamp(14px,2.2vw,32px);top:50%;transform:translateY(-50%);
  z-index:var(--z-toolbar);
  display:flex;flex-direction:column;gap:7px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.ex-index.is-on{opacity:1;visibility:visible}
.ex-index__item{
  display:flex;align-items:center;gap:9px;
  background:none;border:0;padding:2px 0;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:var(--text-micro);
  letter-spacing:var(--tracking-label);color:var(--muted);
  transition:color .3s var(--ease);
}
.ex-index__num{font-variant-numeric:tabular-nums;opacity:.55;transition:opacity .3s var(--ease)}
.ex-index__dash{display:block;width:12px;height:1px;background:currentColor;opacity:.5;transition:width .4s var(--ease),opacity .3s var(--ease)}
.ex-index__label{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  text-transform:uppercase;
  transition:max-width .45s var(--ease),opacity .3s var(--ease);
}
.ex-index__item:hover,.ex-index__item:focus-visible{color:var(--ink)}
.ex-index__item:hover .ex-index__label,
.ex-index__item:focus-visible .ex-index__label{max-width:230px;opacity:1}
.ex-index__item.is-active{color:var(--ink)}
.ex-index__item.is-active .ex-index__num{opacity:1}
.ex-index__item.is-active .ex-index__dash{width:28px;opacity:1;background:var(--accent)}
.ex-index__item.is-active .ex-index__label{max-width:230px;opacity:1}

/* counter, bottom right — the "01 / 12" reading */
.ex-count{
  position:fixed;right:clamp(14px,2.4vw,34px);bottom:clamp(14px,2.4vh,30px);
  z-index:var(--z-toolbar);
  margin:0;font-size:var(--text-micro);font-weight:500;
  letter-spacing:var(--tracking-label);color:var(--muted);
  font-variant-numeric:tabular-nums;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  mix-blend-mode:difference;color:#8d8d8d;
}
.ex-count.is-on{opacity:1;visibility:visible}
.ex-count b{font-weight:500;color:#e9e9e9}

/* ---------------------------------------------------------------
   OPEN TRANSITION — the photograph grows to fill the viewport and
   hands over to the site's existing colour wipe.
   --------------------------------------------------------------- */
.ex-opening{position:relative;z-index:calc(var(--z-transition) - 1)}
.ex-opening .ex-meta{opacity:0}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width:1200px){
  .ex-index__label{display:none}
}
@media (max-width:899px){
  .ex{--ex-track:150vh;--ex-lap:9vh}
  .ex-index{
    left:0;right:0;top:auto;bottom:0;transform:none;
    flex-direction:row;justify-content:flex-start;gap:0;
    overflow-x:auto;scrollbar-width:none;
    background:var(--header-bg);border-top:1px solid var(--line);
    padding:8px var(--pad-x);
  }
  .ex-index::-webkit-scrollbar{display:none}
  .ex-index__item{flex:0 0 auto;padding:6px 11px;min-height:44px}
  .ex-index__dash{display:none}
  .ex-count{bottom:auto;top:calc(var(--header-offset,64px) + 8px)}
  .ex-item[data-comp="full"] .ex-meta{padding-bottom:clamp(64px,12vh,110px)}
  .ex-item[data-comp="wide"] .ex-media{aspect-ratio:16/10}
  .ex-item[data-comp="inset"] .ex-media{aspect-ratio:4/3;max-width:100%}
  .ex-item[data-comp="inset"] .ex-meta{max-width:100%;text-align:left;justify-items:start}
  .ex-item[data-comp="inset"] .ex-meta__row{justify-content:flex-start}
  .ex-item[data-comp="left"] .ex-media,
  .ex-item[data-comp="right"] .ex-media{aspect-ratio:4/3}
  .ex-item[data-comp="offset"] .ex-media{aspect-ratio:4/3}
  /* the last chapter clears the fixed mobile index bar */
  .ex-item:last-child{padding-bottom:56px}
}
@media (max-width:600px){
  .ex{--ex-track:135vh}
  .ex-intro{padding-block:clamp(80px,14vh,120px) clamp(30px,5vh,60px)}
}

/* ---------------------------------------------------------------
   REDUCED MOTION — the exhibition becomes a clean, static sequence.
   Chapters stop overlapping and stop sticking, so nothing moves
   under the reader; every project stays fully legible.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ex{--ex-lap:0px;--ex-track:auto}
  .ex-item{min-height:0;padding-block:clamp(40px,7vh,90px)}
  .ex-item + .ex-item{margin-top:0}
  .ex-item__stick{position:static;height:auto;overflow:visible}
  .ex-item[data-comp="full"] .ex-item__stick{min-height:0}
  .ex-item[data-comp="full"] .ex-media{position:relative;inset:auto;height:auto;aspect-ratio:16/9}
  .ex-item[data-comp="full"] .ex-meta{position:static;padding:clamp(16px,3vh,28px) var(--pad-x) 0;color:var(--ink)}
  .ex-item[data-comp="full"] .ex-meta__row,
  .ex-item[data-comp="full"] .ex-meta__cta{color:var(--muted)}
  .ex-item[data-comp="full"] .ex-meta__cta{color:var(--ink)}
  .ex-media,.ex-media img,.ex-meta{transform:none!important;opacity:1!important;clip-path:none!important}
  .ex-media__veil{opacity:0}
  .ex-item[data-comp="full"] .ex-media__veil{opacity:0}
}