/* felix-photo — variant "final"
   Combine brief: landing from variant 5 (the Gregor Collienne staggered
   mosaic, reproduced 1:1 in variants/5-index), /work/ and /about/ from
   variant 3 (the 12-column "Halves" field with a sticky pin label), and a
   new horizontal carousel for the five category pages (archetype C in
   concepts/LAYOUT-ARCHETYPES.md — not carried from any existing variant).

   One token set holds the combination together: a single face (Schibsted
   Grotesk, the landing's own choice) replaces variant 3's Archivo Narrow
   on /work/ and /about/, and the landing's reference-exact #F5F3F0 is the
   single background for every page. See NOTES.md. */

:root{
  --bg: #F5F3F0;
  --ink: #121212;
  --meta: #787575;
  --surface: #FFFFFF;

  --font: "Schibsted Grotesk", Helvetica, Arial, sans-serif;

  /* inner-page (work / about / category / 404) grid, carried from variant 3 */
  --container: 1312px;
  --gap: 24px;
  --pad: 24px;
  --cat-gap: 56px;
  --track-gap: 12px;
  --fs-1: 52px;
  --fs-2: 28px;
  --fs-3: 16px;
  --fs-4: 13px;

  /* landing geometry, carried from variant 5 (measured against
     gregorcollienne.com — see variants/5-index/NOTES.md) */
  --offset-gap: 12vh;
  --col-gap: 6vw;
  --row-gap: 22vh;
  --cubic: cubic-bezier(.19,1,.22,1);
  --opener-size: 32px;
  --page-inset: 16px;

  /* new: category-page carousel */
  /* height drives the slide, but it is capped against viewport WIDTH too so
     the photographs resize when the window is narrowed, not only shortened */
  --car-slide-h: min(68vh, 43vw, 760px);
  --car-gap: 24px;
  --car-pad-y: 26px;
}

*,*::before,*::after{box-sizing:border-box}
/* clip, not hidden: overflow-x:hidden turns html/body into a scroll container
   and silently disables position:sticky everywhere below it, which is what
   killed the pinned label on /work/. clip does the same clipping with no
   scroll container. */
html{background:var(--bg);overflow-x:clip;max-width:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  font-size:var(--fs-3);
  line-height:1.3;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  max-width:100%;
}
/* the landing keeps the reference's own weight-800 voice; inner pages read
   at 400 for body copy, with headings/labels stepping up to 700 below */
body.is-home{font-weight:800}

img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--page-inset);top:-100px;z-index:1200;background:var(--ink);color:var(--bg);padding:10px 14px;font-size:13px;transition:top .2s}
.skip-link:focus{top:var(--page-inset)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ==========================================================================
   Inner pages: /work/, /about/, category carousels, /404 — variant 3's
   12-column field, restyled onto the shared token set.
   ========================================================================== */

.grid12{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.c-pin{grid-column:1 / span 3;min-width:0}
.c-imgs{grid-column:4 / span 9;min-width:0}
.c-half-l{grid-column:1 / span 6;min-width:0}
.c-half-r{grid-column:7 / span 6;min-width:0}
.c-about-img{grid-column:1 / span 4;min-width:0}
.c-about-text{grid-column:7 / span 6;min-width:0}

.site-nav{align-items:baseline;padding-block:32px 24px}
.site-name{grid-column:1 / span 6;text-decoration:none;display:flex;align-items:baseline;gap:.75em;min-width:0}
.site-name__name{font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:.011em;line-height:1;white-space:nowrap}
.site-name__sub{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.22em;line-height:1;white-space:nowrap}
.site-nav nav{grid-column:7 / span 6;display:flex;justify-content:flex-end;gap:32px}
.site-nav nav a{text-decoration:none;font-size:var(--fs-3)}
.site-nav nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}

.site-footer{align-items:baseline;padding-block:40px 56px;color:var(--meta);font-size:var(--fs-4)}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--ink)}
.site-footer .foot-left{grid-column:1 / span 6}
.site-footer .foot-right{grid-column:7 / span 6;display:flex;justify-content:flex-end;gap:24px}

/* photo primitives — no cards, no chrome, no cropping */
.photo{margin:0;flex:0 1 auto;min-width:0}
.photo button.photo-trigger{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit}
.photo img{width:100%;height:auto}

.track{display:flex;align-items:flex-start;width:100%}

/* ---------- /work/ index — CASCADE ----------
   Layout and scroll behaviour from the Claude Design handoff; colour, type and
   spacing are this site's own tokens. The design's cream/terracotta palette
   (#F4F2ED, #B4552F) and its Archivo + IBM Plex Mono pairing are deliberately
   not used — one family, weight for hierarchy, no accent hue. */

/* page gutters: the design is full-bleed with a max(4vw,28px) gutter. The
   right gutter is widened to a band the fixed rail lives in, so photographs
   stop before it instead of running underneath it. */
.work-index{padding-left:max(4vw,var(--pad));padding-right:max(11vw,140px)}
.work-hero,.page-hero{padding:14vh 0 10vh}
.work-hero h1,.page-hero h1{
  margin:0;font-weight:800;text-transform:uppercase;
  font-size:clamp(64px,15vw,220px);line-height:.82;letter-spacing:-.045em;
}

/* right-edge category rail */
.cat-rail{
  position:fixed;right:max(2.2vw,16px);top:50%;transform:translateY(-50%);
  z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
.cat-rail a{
  display:flex;align-items:center;gap:8px;
  font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--meta);transition:color .35s ease;
}
.cat-rail__dash{display:block;width:10px;height:1px;background:var(--meta);transition:width .4s var(--cubic),background .35s ease}
.cat-rail a:hover,.cat-rail a.is--active{color:var(--ink)}
.cat-rail a:hover .cat-rail__dash,.cat-rail a.is--active .cat-rail__dash{width:30px;background:var(--ink)}

/* the section: pinned title left, staggered photo column right */
.cascade{
  display:grid;grid-template-columns:minmax(200px,.32fr) minmax(0,.68fr);
  gap:min(6vw,72px);
  border-top:1px solid rgba(18,18,18,.14);
}
.cascade__side{position:relative}
.cascade__pin{position:sticky;top:16vh;padding:12vh 0 8vh}
.cascade .label{margin:0;font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.035em;font-size:clamp(30px,4.2vw,60px)}
.cascade .count{margin:18px 0 0;color:var(--meta);font-size:var(--fs-4);font-weight:400;letter-spacing:.2em;text-transform:uppercase}
.cascade__photos{display:flex;flex-direction:column;padding:12vh 0 14vh}
.cascade-figure{margin:0}
.cascade-figure img{width:100%;height:auto;display:block}

/* one-shot reveal as each photograph enters — armed by JS so a no-JS page
   shows every photograph, and skipped entirely under reduced motion */
.js-reveal .cascade-figure[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--cubic),transform 1s var(--cubic)}
.js-reveal .cascade-figure.is--in{opacity:1;transform:none}

/* the arrow into the category — a bare rule and head, no enclosing shape */
.cat-enter{display:inline-block;margin-top:26px;color:var(--ink)}
.cat-enter svg{display:block;width:46px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--cubic)}
.cat-link:hover,.cascade .label a:hover{text-decoration:none}
.cascade__pin:hover .cat-enter svg,.cat-enter:hover svg,.cat-enter:focus-visible svg{transform:translateX(7px)}

/* ---------- about ---------- */
.page-hero{padding-inline:var(--pad);max-width:var(--container);margin-inline:auto}
.about-layout{padding-block:24px 96px}
.about-portrait img{width:100%;height:auto}
.about-text{max-width:330px}
.about-text p{margin:0 0 20px}
.about-text a{text-decoration:underline;text-underline-offset:4px}

/* ---------- 404 ---------- */
.notfound{padding-block:96px}
.notfound h1{grid-column:1 / span 6;font-size:var(--fs-1);font-weight:700;text-transform:uppercase;margin:0 0 16px}
.notfound p{grid-column:1 / span 6;margin:0 0 24px;color:var(--meta)}
.notfound a{grid-column:1 / span 6;text-decoration:underline;text-underline-offset:4px}

/* ==========================================================================
   Category pages — NEW: a horizontal, scroll-snapped, one-category-at-a-
   time carousel (archetype C). Not carried from any existing variant: the
   pin+stack from variant 3 was left on /work/ only, so this page family
   gets its own, calmer identity instead of a second copy of "Halves".
   ========================================================================== */

.cat-top{padding-block:8px 32px;align-items:end;row-gap:16px}
.cat-heading{grid-column:1 / span 7;min-width:0}
.cat-heading h1{margin:0;font-size:var(--fs-1);font-weight:700;text-transform:uppercase;line-height:1.05}
.cat-heading .count{margin-top:8px;color:var(--meta);font-size:var(--fs-4)}
.cat-switch{grid-column:8 / span 5;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 20px}
.cat-switch a{font-size:var(--fs-4);text-transform:uppercase;letter-spacing:.02em}
.cat-switch a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
.cat-switch a:not([aria-current="page"]){color:var(--meta)}
.cat-switch a:hover{color:var(--ink)}

.carousel{position:relative;padding-block:8px 64px}
.car-track{
  display:flex;
  align-items:center;
  gap:var(--car-gap);
  /* the vertical padding is the room the hover enlargement grows into —
     the track clips overflow-y, so without it the scale would be cut off */
  height:calc(var(--car-slide-h) + var(--car-pad-y) * 2);
  margin:0;padding:var(--car-pad-y) var(--pad);
  list-style:none;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.car-track::-webkit-scrollbar{display:none}
.car-track.is--dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.car-track.is--dragging img{pointer-events:none}
.car-slide{
  flex:none;
  position:relative;
  height:var(--car-slide-h);
  scroll-snap-align:start;
}
.car-slide .photo{height:100%;transition:transform .45s var(--cubic)}
.car-slide .photo button.photo-trigger{height:100%;width:auto;cursor:zoom-in}
.car-slide img{
  height:100%;
  width:auto;
  max-width:none;
}
/* enlarge on hover; the slide lifts above its neighbours as it grows */
@media (hover:hover){
  .car-slide:hover{z-index:3}
  .car-slide:hover .photo{transform:scale(1.05)}
}
.car-slide:focus-within{z-index:3}
.car-slide:focus-within .photo{transform:scale(1.05)}
.car-prev,.car-next{
  position:absolute;
  top:calc(var(--car-pad-y) + var(--car-slide-h) / 2);
  transform:translateY(-50%);
  z-index:5;
  width:44px;height:44px;
  font-size:24px;
  line-height:1;
  background:var(--surface);
  border-radius:0;
}
.car-prev{left:calc(var(--pad) - 4px)}
.car-next{right:calc(var(--pad) - 4px)}
.car-counter{
  position:absolute;
  right:var(--pad);
  bottom:24px;
  font-size:var(--fs-4);
  color:var(--meta);
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   Landing — variant 5, reproduced against gregorcollienne.com. Only the
   background token changed (F5F3F0 → the shared --bg) and font-weight now
   comes from body.is-home instead of a bare `body` rule; the geometry,
   scroll mechanics and nav overlay are untouched. See variants/5-index/
   NOTES.md for the full measurement record.
   ========================================================================== */

.c-overviewgrid{
  --rows-per-viewport: 3;
  position:relative;
  z-index:1;
  width:110%;
  left:-5%;
  top:calc(var(--offset-gap) * -1);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  column-gap:var(--col-gap);
  row-gap:var(--row-gap);
  overflow:hidden;
}
.c-overviewgrid .overview-item{
  position:relative;
  margin:0;
  height:calc((100vh + var(--offset-gap) * 2) / var(--rows-per-viewport) - var(--row-gap) * 2 / var(--rows-per-viewport));
}
@supports (height: 100svh){
  .c-overviewgrid .overview-item{
    height:calc((100svh + var(--offset-gap) * 2) / var(--rows-per-viewport) - var(--row-gap) * 2 / var(--rows-per-viewport));
  }
}
.c-overviewgrid .overview-item:nth-child(5n+2),
.c-overviewgrid .overview-item:nth-child(5n+4){
  transform:translateY(calc(50% + var(--row-gap) / 2));
}
.c-overviewgrid .media{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:110%;
  height:120%;
  display:block;
  cursor:zoom-in;
}
.c-overviewgrid .media img{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}
.c-overviewgrid .overview-item--skip{pointer-events:none}

.js-reveal .c-overviewgrid .media{opacity:0;transition:opacity .49s ease}
.js-reveal .c-overviewgrid .overview-item.is--visible .media{opacity:1}

/* The wordmark sits UNDERNEATH the mosaic (z-index 0 against the grid's 1),
   so photographs travel over the top of it as the page scrolls. */
.c-wordmark{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  z-index:0;
  line-height:1.2;
  letter-spacing:.011em;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
.c-wordmark__name{display:block;font-size:5.5vw;font-weight:800}
/* the quiet half of the pair: same face, four weights down, tracked out */
.c-wordmark__sub{
  display:block;
  margin-top:.35em;
  font-size:1.32vw;
  font-weight:400;
  letter-spacing:.22em;
  text-indent:.22em;
}

.c-header{position:fixed;top:var(--page-inset);left:50%;transform:translateX(-50%);z-index:999}
.navopener{position:relative;display:block;width:var(--opener-size);height:var(--opener-size);perspective:700px}
.navopener__open,.navopener__close{
  position:absolute;inset:0;
  transform-style:preserve-3d;transform-origin:center center;
  backface-visibility:hidden;
  transition:transform .79s var(--cubic);
}
.navopener__open::before,.navopener__open::after,
.navopener__close::before,.navopener__close::after{
  content:"";position:absolute;display:block;
  width:100%;height:3px;background:var(--ink);
  top:50%;left:50%;
  transform:translateX(-50%) translateY(-50%);
  backface-visibility:hidden;
}
.navopener__open::after{transform:translateX(-50%) translateY(-50%) rotate(-90deg)}
.navopener__close{transform:translateY(-40%) rotateX(-90deg);transition:none}
.navopener__close::before{transform:translateX(-50%) translateY(-50%) rotate(45deg)}
.navopener__close::after{transform:translateX(-50%) translateY(-50%) rotate(-45deg)}
body.nav--isopen .navopener__open{transform:translateY(-60%) rotateX(90deg)}
body.nav--isopen .navopener__close{transform:translateY(0) rotateX(0deg);transition:transform .79s var(--cubic)}

.c-navscreen{
  position:fixed;inset:0;z-index:998;
  background:var(--bg);
  display:flex;
  opacity:0;visibility:hidden;
  transition:opacity .49s var(--cubic),visibility .49s;
}
.c-navscreen[hidden]{display:flex}
body.nav--isopen .c-navscreen{opacity:1;visibility:visible}
.c-navscreen__inner{display:flex;flex-direction:column;justify-content:space-between;width:100%;padding:calc(var(--page-inset) * 5) var(--page-inset) var(--page-inset)}
.c-navscreen__top ul{list-style:none;margin:0;padding:0;text-align:center}
.c-navscreen__top a{display:inline-block;font-size:5.5vw;line-height:1.2;text-transform:uppercase;letter-spacing:.011em}
.phatlines{margin:0 0 clamp(24px,4vh,64px);text-align:center}
.phatlines .line{display:block;overflow:hidden}
.phatlines .line__inner{
  display:block;
  font-size:clamp(20px,3.05vw,44px);line-height:1.25;
  text-transform:uppercase;letter-spacing:.011em;
  transform:translateY(105%);
  transition:transform .79s var(--cubic);
}
body.nav--isopen .phatlines .line__inner{transform:none}
.phatlines .line:nth-child(2) .line__inner{transition-delay:.06s}
.phatlines .line:nth-child(3) .line__inner{transition-delay:.12s}
.phatlines .line:nth-child(4) .line__inner{transition-delay:.18s}
.phatlines .line:nth-child(5) .line__inner{transition-delay:.24s}
.c-navscreen__footer{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;font-size:13px;font-weight:400}
.c-navscreen__footer .align--right{display:flex;gap:24px}
.c-navscreen__footer a:hover,.c-navscreen__top a:hover{text-decoration:underline;text-underline-offset:.14em}
.copyright{flex-basis:100%;text-align:center;opacity:.6}



/* ==========================================================================
   Lightbox — one shared implementation. The landing (js/landing.js) and the
   category carousels (js/lightbox.js) both target this exact markup/class
   set, so one block styles the photo viewer everywhere it appears.
   ========================================================================== */

.lightbox{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;padding:0;background:var(--bg)}
.lightbox::backdrop{background:var(--bg)}
.lightbox-stage{position:absolute;inset:clamp(48px,7vh,96px) clamp(48px,7vw,120px);display:flex;align-items:center;justify-content:center}
.lightbox-img{max-width:100%;max-height:100%;width:auto;height:auto}
.lightbox-prev,.lightbox-next,.lightbox-close{position:absolute;z-index:2;font-size:32px;line-height:1;padding:12px}
.lightbox-prev{left:8px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:8px;top:50%;transform:translateY(-50%)}
.lightbox-close{top:8px;right:12px;font-size:28px}
.lightbox-counter{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;font-size:13px;font-weight:400;font-variant-numeric:tabular-nums}

/* ==========================================================================
   Mobile — 700px breakpoint for inner pages (variant 3's own breakpoint),
   768px for the landing (variant 5's own breakpoint). Kept separate
   because each page family's collapse strategy is inherited from its
   source and neither needed to change to coexist.
   ========================================================================== */

@media (max-width:700px){
  :root{--fs-1:34px;--fs-2:22px;--pad:16px;--cat-gap:32px;--car-slide-h:min(56vh,62vw,520px);--car-gap:16px;--car-pad-y:16px}

  .site-nav .site-name{grid-column:1 / span 8;gap:.5em}
  .site-name__name{font-size:17px}
  .site-name__sub{font-size:9px;letter-spacing:.18em}
  .site-nav nav{grid-column:9 / span 4;gap:16px}

  .cascade{grid-template-columns:minmax(0,1fr);gap:0}
  .cascade__pin{position:sticky;top:56px;padding:6vh 0 3vh;background:var(--bg)}
  .cascade__photos{padding:0 0 8vh}
  .cascade-figure{width:100%!important;margin-left:0!important}
  .cascade-figure + .cascade-figure{margin-top:4vh!important}
  .cat-rail{display:none}
  .work-index{padding-inline:var(--pad)}
  .work-hero,.page-hero{padding:8vh 0 6vh}
  .cat-enter{margin-top:14px}
  .cat-enter svg{width:38px;height:22px}

  .c-pin,.c-about-img{grid-column:1 / span 12}
  .c-imgs,.c-about-text{grid-column:1 / span 12;margin-top:16px}
  .about-text{max-width:none}

  .cat-top{padding-block:0 20px}
  .cat-heading{grid-column:1 / span 12}
  .cat-switch{grid-column:1 / span 12;justify-content:flex-start;margin-top:12px}
  .car-prev,.car-next{width:36px;height:36px;font-size:20px}
  .car-prev{left:8px}
  .car-next{right:8px}
  .car-counter{bottom:16px;right:16px}

  .site-footer .foot-left,.site-footer .foot-right{grid-column:1 / span 12}
  .site-footer .foot-right{justify-content:flex-start;margin-top:8px}

  .notfound h1,.notfound p,.notfound a{grid-column:1 / span 12}
}

@media (max-width:768px){
  :root{--page-inset:12px}
  .c-overviewgrid{--col-gap:16px;--offset-gap:8vh;width:100%;left:0}
  .c-overviewgrid .media{width:160%;height:70%}
  .c-wordmark__name{font-size:9.23vw}
  .c-wordmark__sub{font-size:3.1vw;letter-spacing:.2em;text-indent:.2em}
  .c-wordmark{white-space:normal;max-width:72vw}
  .c-navscreen__top a{font-size:9.23vw}
}

@media (prefers-reduced-motion: reduce){
  .js-reveal .c-overviewgrid .media{opacity:1}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .phatlines .line__inner{transform:none}
  .skip-link{transition:none}
  .car-track{scroll-behavior:auto}
}