/* l1l2 — list portfolio, white edition (from the Chalk CP list site) */
:root {
  --bg: #fff;
  --fg: #121212;
  --dim: #8a8a8a;
  --faint: #ececec;
  --line: #e2e2e2;
  --sub: #555;
  --pad: 10px;
  --gap: 10px;
  --cols: 7;
  --fs: 14px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 1400px) { :root { --fs: 15px; --pad: 14px; --gap: 14px; } }
@media (max-width: 1000px) { :root { --cols: 4; } }
@media (max-width: 600px)  { :root { --cols: 2; --pad: 16px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
/* dark option (Light / Dark in the controls, remembered in the browser): the whole site on #121212 */
html.dark { --bg: #121212; --fg: #fff; --dim: #8a8a8a; --faint: #262626; --line: #333; --sub: #b5b5b5; color-scheme: dark; }
html.theme-anim, html.theme-anim body, html.theme-anim .head, html.theme-anim .bar, html.theme-anim .project, html.theme-anim .foot { transition: background-color .45s var(--ease), color .45s var(--ease); }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs)/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a:hover, button:hover { color: var(--dim); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.arrow { display: inline-block; width: .62em; height: .62em; margin-left: .1em; vertical-align: .02em; fill: currentColor; }

/* two languages: every text is in the page twice, html.lang-it shows the Italian one (app.js flips it) */
html:not(.lang-it) [data-l="it"], html.lang-it [data-l="en"] { display: none !important; }

/* ---------- intro (logo animation, doubles as the loader) ---------- */
.loader {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), visibility 0s .9s;
}
.loader__logo { height: min(34vh, 260px); width: auto; overflow: visible; }
.loader__logo path { fill: var(--fg); }
.loader__logo .g { opacity: 0; transform-box: fill-box; }
.loader.is-in .loader__logo .g { animation: gFly .85s cubic-bezier(.2, 1, .3, 1) forwards; animation-delay: calc(var(--i) * .08s); }
@keyframes gFly { from { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 0)); } to { opacity: 1; transform: none; } }
.loader.is-skipped { display: none; }
body:not(.is-loading) .loader { transform: translateY(-100%); visibility: hidden; }

.head, .list, .foot { position: relative; z-index: 1; }

/* ---------- header ---------- */
.head {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); /* equal columns even when the clock overflows */
  column-gap: var(--gap);
  padding: var(--pad);
  align-items: start;
  /* sticky on scroll: stays on top of the list, on the page's white */
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
}
/* the empty band the tall header used to leave now sits above the controls */
.ctrl { margin-top: max(24px, calc(18vh - var(--head-h, 50px))); }
.head__name { grid-column: 1 / span 2; grid-row: 1; white-space: nowrap; }
.head__name { display: block; width: max-content; }
/* the written l1l2: bold, as tall as the two clock lines (cap height .714em → 2.68 × the text size);
   the 1 and the 2 land after spinning through random digits (app.js) */
.head__logo { display: block; font-weight: 700; font-size: calc(var(--fs) * 2.68); line-height: .88; letter-spacing: -.02em; }
.head__logo i { font-style: italic; }
.head__logo .dg { display: inline-block; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .profile.is-open, .project.is-open, .project__side.is-enter > * { animation: none; } }
.head__loc { grid-column: 3; grid-row: 1; }
.head__clock { font-variant-numeric: tabular-nums; }
.head__clock span { display: block; white-space: nowrap; }
/* Profile starts on the left edge of the second image column of the project previews
   (the previews span columns 3–7 and split in two with a 4px gap) */
.head__profile { grid-column: 3 / -1; grid-row: 1; justify-self: start; margin-left: calc(50% + 2px); }
.head__mail { grid-column: 7; grid-row: 1; justify-self: end; }
.head__link { text-align: right; }
/* EN · IT: at the start of the Email column */
.head__lang { grid-column: 7; grid-row: 1; justify-self: start; display: flex; gap: 10px; }
.head__lang > * { color: var(--dim); transition: color .2s; }
.head__lang > :hover, .head__lang > .is-on { color: var(--fg); }

@media (max-width: 1000px) {
  .head { row-gap: 22px; }
  .ctrl { margin-top: 8vh; }
  .head__name { grid-column: 1 / span 2; grid-row: 1; }
  .head__profile { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
  .head__mail { grid-column: 4; grid-row: 1; }
  .head__lang { grid-column: 4; }
  .head__loc { grid-column: 1 / -1; grid-row: 2; color: var(--dim); margin-top: -18px; }
  .head__clock { margin-top: 0; }
  .head__clock span { display: inline; }
  .head__date::after { content: ", "; }
}
@media (max-width: 600px) {
  /* phones: logo · Profile on one row (no clock, no Email) */
  .head { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .head__name { grid-column: 1; grid-row: 1; }
  .head__loc { display: none; } /* phones: no clock in the header */
  .head__clock span { display: block; }
  .head__date::after { content: none; }
  .head__profile { grid-column: 3; grid-row: 1; justify-self: end; }
  .head__mail { display: none; } /* phones: no Email in the header (it's in the footer and in Profile) */
  .head__lang { grid-column: 2; justify-self: center; } /* phones: logo · EN IT · (+) */
}

/* ---------- view + filter controls (from www.l1l2.graphics Work page) ---------- */
.ctrl {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 4px;
  padding: 0 var(--pad) clamp(48px, 6vw, 96px);
  font-size: var(--fs);
  position: relative; z-index: 1;
}
/* desktop: controls start on the clock's column (3rd of 7) */
@media (min-width: 1001px) {
  .ctrl { padding-left: calc(var(--pad) + (100% - 2 * var(--pad) - 6 * var(--gap)) / 7 * 2 + 2 * var(--gap)); }
}
.ctrl button { color: var(--dim); transition: color .2s; }
.ctrl button:hover, .ctrl button.is-on { color: var(--fg); }
.ctrl__views { display: flex; align-items: baseline; gap: 8px; flex-basis: 100%; } /* own line; the filter sits below */
.ctrl__swap { font-size: inherit; display: inline-block; transition: transform .5s var(--ease), color .2s; }
.ctrl__swap.is-flipped { transform: rotate(180deg); }
.ctrl__sep { display: none; }
.ctrl__filter { display: flex; align-items: baseline; gap: 14px; }
.ctrl__lbl { color: var(--fg); }
.ctrl__disc { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px .3em; }
.ctrl__disc[hidden] { display: none; }
.ctrl__disc button { animation: pillIn .5s var(--ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes pillIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ctrl .ctrl__disc button { color: var(--dim); }
.ctrl .ctrl__disc button:hover, .ctrl .ctrl__disc button.is-on { color: var(--fg); }
.ctrl .ctrl__disc button:not(:last-child)::after { content: ","; color: var(--dim); }
.row.is-out { display: none; }
/* filter / view switch */
.list, .index, .empty { transition: opacity .26s var(--ease), transform .26s var(--ease); }
.is-leaving { opacity: 0; transform: translateY(14px); }
.row.is-enter, .irow.is-enter { animation: rowIn .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rowIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.ctrl button.fbtn, .ctrl .ctrl__disc button { transition: color .25s, background-color .25s, opacity .3s; }
.empty { padding: 0 var(--pad) 9vh; color: var(--dim); font-size: var(--fs); }

/* ---------- index view: one text line per project ---------- */
.index { padding: 0 var(--pad) 9vh; font-size: var(--fs); }
.index[hidden], .list[hidden] { display: none; }
.irow {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap);
  padding: 11px 0 12px; border-top: 1px solid var(--fg);
  transition: color .2s;
}
.irow:last-child { border-bottom: 1px solid var(--fg); }
.irow.is-out { display: none; }
.irow__no { grid-column: 1; color: var(--dim); font-variant-numeric: tabular-nums; }
.irow__client { grid-column: 3 / span 2; font-weight: 700; } /* starts on the Overview ⇄ Index / clock column */
.irow > * { grid-row: 1; }
/* subtitle starts where Profile does in the header (left edge of the second image column) */
.irow__name { grid-column: 3 / -1; justify-self: start; margin-left: calc(50% + 2px); color: var(--dim); }
.irow__year { grid-column: 7; justify-self: end; color: var(--dim); font-variant-numeric: tabular-nums; }
.index:hover .irow { color: var(--dim); }
.index:hover .irow:hover { color: var(--fg); }
.index:hover .irow:hover .irow__name { color: var(--fg); }
@media (max-width: 1000px) {
  .irow__no { grid-column: 1; } .irow__client { grid-column: 2 / span 2; } .irow__name { display: none; } .irow__year { grid-column: 4; }
}
@media (max-width: 600px) {
  .irow { grid-template-columns: 2.4em 1fr auto; }
  .irow__no, .irow__client, .irow__year { grid-column: auto; }
  .irow > * { grid-row: auto; }
}
/* cover that follows the cursor over the index */
.peek {
  position: fixed; left: 0; top: 0; z-index: 20; width: 22vw; max-width: 340px;
  pointer-events: none; opacity: 0; transition: opacity .25s;
  border-radius: 4px; overflow: hidden;
}
.peek img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--faint); }
.peek.is-on { opacity: 1; }
@media (hover: none), (max-width: 1000px) { .peek { display: none; } }

/* ---------- list layout (one row per project) ---------- */
.list { padding: 0 var(--pad) 2vh; }
.row {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  --space: clamp(56px, 7vw, 110px);
  margin-bottom: var(--space);
  --reveal: cubic-bezier(.16, 1, .3, 1);
  position: relative;
}
/* hovering a project fades all the others back (as on gilhuybrecht.com: 20%, quick ease) */
.row { transition: opacity .2s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) { .list:has(.row:hover) .row:not(:hover) { opacity: .2; } }
.row:hover { color: inherit; }
.row__info {
  grid-column: 1 / span 2;
  position: sticky; top: var(--head-h, 0px); /* clears the sticky header */
  /* title block level with the top of the images, tags right below it */
  display: flex; flex-direction: column; justify-content: flex-start; gap: 16px;
  font-size: var(--fs);
  line-height: 1.6;
}
.row__text { margin-top: -.3em; }   /* trim the half-leading so the text sits flush with the image edges */
/* title: bold name + arrow; the subtitle sits on its own line below */
.row__name { font: inherit; color: var(--fg); }
.row__name b {
  font-weight: 700;
  /* hover highlight: a #121212 pill sweeps in from the left behind the title, which turns white */
  padding: .12em .55em .17em; margin: 0 -.55em; border-radius: 999px; /* pill */
  background: linear-gradient(var(--fg), var(--fg)) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .5s cubic-bezier(.16, 1, .3, 1), color .3s var(--ease);
}
@media (hover: hover) { .row.is-in:hover .row__name b { background-size: 100% 100%; color: var(--bg); } }
/* arrow next to the title: nudges up-right when the project is hovered */
.row__name .arrow, .irow__client .arrow { margin-left: .25em; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.row:hover .row__name .arrow, .irow:hover .arrow { transform: translate(.18em, -.18em); }
/* no rules between them, but the spacing the rules had is kept */
.row__tag { color: var(--sub); padding-bottom: 11px; }
.row__brief { color: var(--dim); text-wrap: pretty; margin-top: 10px; padding-bottom: 13px; }
.row__chips { display: flex; flex-wrap: wrap; gap: 0 .3em; font-size: calc(var(--fs) - 2px); }
.row__chips li { color: var(--dim); }
.row__chips li:not(:last-child)::after { content: ","; }
/* info lines rise in one after another */
.row__name, .row__tag, .row__brief, .row__chips {
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s var(--reveal), transform 1s var(--reveal), color .45s var(--ease);
}
.row__tag { transition-delay: .08s; }
.row__brief { transition-delay: .16s; }
.row__chips { transition-delay: .24s; }
.row__media {
  grid-column: 3 / -1;
  /* four 16:9 images, 2 × 2 — the block as a whole stays 16:9 */
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.row__cell {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: var(--faint);
  aspect-ratio: 16 / 9;
  /* each image wipes up from the bottom, one after the other */
  clip-path: inset(100% 0 0 0 round 4px);
  transition: clip-path 1.3s var(--reveal) calc(var(--c, 0) * 110ms);
}
.row__cell { position: relative; }

/* hover: layers carrying the project's other images fade in over each cell, one after the other */
.row__alt {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s var(--ease); pointer-events: none;
}
.row__alt.is-on { opacity: 1; }
.row__alt--slow { transition: opacity 1.4s cubic-bezier(.45, 0, .25, 1); } /* the automatic swap: a slow, even cross-fade */
.row__media img, .row__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.8s var(--reveal) calc(var(--c, 0) * 110ms), opacity .4s;
}
.row.is-in .row__name, .row.is-in .row__tag, .row.is-in .row__brief, .row.is-in .row__chips { opacity: 1; transform: none; }
.row.is-in .row__cell { clip-path: inset(0 0 0 0 round 4px); }
.row.is-in .row__media img, .row.is-in .row__media video { transform: none; }

@media (max-width: 1000px) {
  .row { display: flex; flex-direction: column-reverse; gap: 16px; --space: 96px; }
  .row__info { position: static; }
  .row__text { margin: 0; }
  .row__media { width: 100%; }
}


/* ---------- footer ---------- */
.foot {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  padding: var(--pad) var(--pad) 64px;
  color: var(--fg);
}
.foot { align-items: start; }
.foot > * { grid-row: 1; }
.foot__copy { grid-column: 1 / span 2; }
.foot__tag { grid-column: 3 / span 2; }
/* email starts where Profile does in the header: the left edge of the second image column */
.foot__mail { grid-column: 3 / -1; justify-self: start; margin-left: calc(50% + 2px); }
.foot__top { grid-column: 6 / span 2; justify-self: end; }
@media (max-width: 1000px) {
  .foot { row-gap: 4px; }
  .foot > * { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-left: 0; }
  /* email first (with Back to top on the right), some air, then the credits */
  .foot__mail { grid-row: 1; }
  .foot__top { grid-row: 1; justify-self: end; }
  .foot__copy { grid-row: 2; margin-top: 40px; }
  .foot__tag { grid-row: 3; }
}

/* ---------- project panel ---------- */
.project, .profile {
  position: fixed; inset: 0; z-index: 30;
  background: var(--bg);
  visibility: hidden; opacity: 0;
  transition: opacity .45s var(--ease), visibility 0s .45s;
}
.project.is-open, .profile.is-open {
  visibility: visible; opacity: 1;
  transition: opacity .45s var(--ease), visibility 0s;
}
.project {
  display: grid;
  grid-template-columns: calc((100% - var(--gap) * 6) / 7 * 2.5 + var(--gap) * 2) 1fr;
  column-gap: var(--gap);
}
.project__side {
  --sgap: clamp(24px, 3.4vh, 38px); /* breathing space between title, description, details, nav and thumbnails */
  display: flex; flex-direction: column; gap: var(--sgap);
  padding: var(--pad);
  height: 100vh; height: 100dvh;
  overflow: auto;
}
/* title, description, details and Previous / Next as one title block (cartiglio, as on the Selection pages):
   one black frame, boxes divided by 1px rules, a small label on top of each — all text in the text colour (#121212) */
.project__side { --rule: 1px solid var(--fg); }
.project__top, .project__brief, .project__meta, .project__nav { border: var(--rule); margin-bottom: calc(-1px - var(--sgap)); } /* the boxes touch: their rules overlap */
.project__nav { margin-bottom: 0; }
.ct-l, .project__title::before, .project__brief::before {
  display: block; font-size: 11px; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--fg);
}
.project__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 12px 14px; position: relative; }
/* a rule under PROJECT · CLOSE ✕, across the box */
.project__top::after { content: ""; position: absolute; left: 0; right: 0; top: 29px; height: 1px; background: var(--fg); }
.project__close { flex: none; white-space: nowrap; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: .07em; }
.project__close:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Previous / Next on hover: the box inverts (#121212 background, white text) */
.project__nav button { transition: background-color .25s var(--ease), color .25s var(--ease); }
@media (hover: hover) { .project__nav button:hover { background: var(--fg); color: var(--bg); } }
.project__title { font: inherit; min-width: 0; }
.project__title::before { content: "Project"; margin-bottom: 21px; }
html.lang-it .project__title::before { content: "Progetto"; }
.project__title b { display: block; font-weight: 700; font-size: clamp(22px, 2.1vw, 36px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.project__title span { display: block; margin-top: 8px; color: var(--fg); font-size: calc(var(--fs) * 1.15); line-height: 1.2; }
.project__title span:empty { display: none; }
.project__brief {
  font-size: var(--fs); /* same size as the details */
  line-height: 1.4;
  padding: 9px 12px 12px;
  text-wrap: pretty;
}
.project__brief::before { content: "Description"; margin-bottom: 8px; }
html.lang-it .project__brief::before { content: "Descrizione"; }
/* projects without a description: no empty box */
.project__brief:empty { display: none; }
/* details: a box each — short values (Year, Type…) two to a row, long ones the full width */
.project__meta { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 1px; background: var(--fg); }
.project__meta .ct-c { grid-column: 1 / -1; background: var(--bg); padding: 9px 12px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.project__meta .ct-c--half { grid-column: span 1; }
.project__meta dd { line-height: 1.25; overflow-wrap: anywhere; }
/* Previous · counter · Next: three boxes */
.project__nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1px; background: var(--fg); color: var(--fg); }
.project__nav > * { background: var(--bg); padding: 10px 12px; }
.project__nav [data-prev] { text-align: left; }
.project__nav [data-next] { text-align: right; }
/* the ← → of the home page (Helvetica characters), nudging outward on hover */
.nav-arw { display: inline-block; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) {
  [data-next]:hover .nav-arw { transform: translateX(.2em); }
  [data-prev]:hover .nav-arw { transform: translateX(-.2em); }
}
.project__count { color: var(--fg); font-variant-numeric: tabular-nums; text-align: center; }
.project__thumbs {
  /* follows Previous / Next with the same gap as the other blocks (no longer pinned to the bottom) */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* equal columns whatever the thumbnails are */
  gap: var(--gap);
  align-items: start;
}
.project__thumbs button { position: relative; text-align: left; }
.project__thumbs button span { display: block; text-align: right; padding-bottom: 3px; color: var(--dim); }
.project__thumbs button:hover span { color: var(--fg); }
/* a video without a poster image shows as a small still video: same size as the pictures */
.project__thumbs img, .project__thumbs video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--faint); opacity: .55; transition: opacity .3s; }
.project__thumbs button:hover img, .project__thumbs button:hover video { opacity: 1; }
.project__media {
  height: 100vh; height: 100dvh;
  overflow: auto;
  padding: var(--pad) var(--pad) var(--pad) 0;
  display: flex; flex-direction: column; gap: var(--pad); /* the same space between the images as above the first one */
  overscroll-behavior: contain;
}
.project__media > img, .project__media > video, .project__media > .webframe, .project__media > .pslide {
  width: 100%; height: auto;
  background: var(--faint);
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .9s var(--ease);
}
.project__media > .is-in { opacity: 1; transform: none; }

/* ---------- website page in a minimal browser window ---------- */
.webframe { background: var(--bg); border: 1px solid var(--fg); border-radius: 6px; overflow: hidden; flex: none; }
.webframe__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 9px 12px; border-bottom: 1px solid var(--fg);
}
.webframe__dots { display: flex; gap: 6px; }
.webframe__dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--fg); }
.webframe__url { justify-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.webframe__host { color: var(--dim); }
a.webframe__url:hover, a.webframe__url:hover .webframe__host { color: var(--dim); }
.project__meta dd a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.webframe__expand { justify-self: end; color: var(--dim); white-space: nowrap; }
.webframe:hover .webframe__expand { color: var(--fg); }
.webframe__view { aspect-ratio: 16 / 10; overflow: hidden; cursor: zoom-in; background: var(--faint); }
.webframe__view img { display: block; width: 100%; height: auto; will-change: transform; }

/* full-page viewer: the whole screenshot, free to scroll */
.weblb {
  position: fixed; inset: 0; z-index: 60;
  background: #121212; color: #fff;
  display: flex; flex-direction: column;
  visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ease), visibility 0s .35s;
}
.weblb.is-open { visibility: visible; opacity: 1; transition: opacity .35s var(--ease), visibility 0s; }
.weblb__top { display: flex; justify-content: space-between; gap: 12px; padding: var(--pad); flex: none; }
.weblb button { color: #fff; }
.weblb button:hover { color: #8a8a8a; }
.weblb__scroll { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 0 var(--pad) 8vh; cursor: zoom-out; }
.weblb__scroll img { display: block; width: min(100%, 1200px); height: auto; margin: 0 auto; border-radius: 4px; cursor: default; }

@media (max-width: 1000px) {
  .project { grid-template-columns: 1fr; overflow: auto; }
  .project__side, .project__media { height: auto; overflow: visible; }
  /* the first image: the side margin (--pad, the panel's own bottom padding) under the title block, like the space between images */
  .project__media { padding: 0 var(--pad) var(--pad); }
  .project__thumbs { display: none; }
}

/* ---------- profile panel ---------- */
/* the profile is the one dark page: #121212 with the Chalk CP greys */
.profile { overflow: auto; --bg: #121212; --fg: #fff; --dim: #6b6b6b; --faint: #2a2a2a; --soft: #bdbdbd; color: var(--fg); }
.profile__inner { padding: var(--pad); padding-bottom: 12vh; }
.profile__top {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start;
  /* stays at the top while the profile scrolls */
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  margin: calc(var(--pad) * -1) 0 0; padding: var(--pad) 0;
}
/* the profile's top bar: "Profile" · clock · (−) where the header's (+) is · Email where the header's Email is */
.profile__name { grid-column: 1 / span 2; }
.profile__clock { grid-column: 3; } /* same spot as the header clock */
.profile__name, .profile__minus, .profile__mail { grid-row: 1; }
.profile__mail { grid-column: -2 / -1; justify-self: end; } /* where Email is in the header */
/* (−) sits exactly where the header's (+) is, and closes the profile */
.profile__minus { grid-column: 3 / -1; justify-self: start; margin-left: calc(50% + 2px); }
@media (max-width: 1000px) {
  .profile__minus { grid-column: 3; justify-self: end; margin-left: 0; } /* matches the header (+) on tablets */
  .profile__mail { grid-column: 4; }
  .profile__clock { grid-column: 1 / -1; grid-row: 2; color: var(--dim); margin-top: 2px; }
  .profile__clock span { display: inline; }
  .profile__clock .head__date::after { content: ", "; }
}
.profile__row {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  padding: 14px 0 60px;
  position: relative;
}
.profile__label { grid-column: 1 / span 2; color: var(--dim); }
/* the text right after the statements: no label, no line above */
.profile__row--intro::before { display: none; }
.profile__row--intro { padding-bottom: 32px; }

/* ---------- profile: scroll stage ----------
   (after spatial-festival.program.studio) each statement pins in the middle of the screen; as you scroll
   its letters turn round a vertical cylinder — they swing in from the right, sit flat, then sweep past
   the camera to the left, big and distorted. Letters are split and moved by app.js */
.profile { scroll-snap-type: y mandatory; scroll-padding-top: var(--ptop, 0px); }
/* one statement per screen; a single wheel/touch flick snaps to the next one and the animation plays during the snap */
.pst { position: relative; height: calc(100vh - var(--ptop, 0px)); height: calc(100dvh - var(--ptop, 0px)); scroll-snap-align: start; scroll-snap-stop: always; }
.pst__pin {
  /* fixed to the screen (under the top bar): the browser keeps it still while the snap scroll runs,
     so nothing shakes; only zoom/opacity/reveal are driven from the scroll position */
  position: fixed; left: 0; right: 0; top: var(--ptop, 0px); height: calc(100dvh - var(--ptop, 0px));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: none; visibility: hidden;
}
.profile__rest { scroll-snap-align: start; } /* one big snap area: free scrolling inside it */
.profile.is-free { scroll-snap-type: none; } /* below the statements (app.js) */
.pst__text {
  font-size: clamp(30px, 4.6vw, 76px); line-height: 1.04; letter-spacing: -.03em;
  text-align: center; transform: scale(var(--zoom, 1)); transform-origin: 50% 50%;
}
/* as on the first l1l2 theme's About title: every letter slides up from behind its own mask, staggered */
.pst__w { display: inline-block; white-space: nowrap; }
.pst__m {
  display: inline-block; overflow: hidden; vertical-align: top; line-height: 1;
  padding: 0 .22em .1em; margin: 0 -.22em; /* room for overhangs without changing the spacing */
}
.pst__g { display: inline-block; transform: translateY(125%); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.pst.in .pst__g { transform: none; transition-duration: .9s; transition-delay: var(--d, 0s); }
/* phones: bigger, set left on the page margin; the written line breaks are dropped and the lines balanced,
   so no word is left alone on the last line */
@media (max-width: 600px) {
  .pst__pin { justify-content: flex-start; padding: 0 var(--pad); }
  .pst__text { font-size: 10.4vw; line-height: 1.02; text-align: left; text-wrap: balance; transform-origin: 0 50%; }
  .pst__text br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pst__g { transform: none; }
  .profile { scroll-snap-type: none; }
  .pst { height: auto; }
  .pst__pin { position: relative; top: auto; height: auto; padding: 12vh 0; visibility: inherit; }
}

/* ---------- profile: opening animation ----------
   the dark page wipes up from the bottom, then each section follows:
   its hairline draws from the left and the label + text rise in.
   A project opens the same way: the page wipes up, then its text lines and images follow */
.profile, .project {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s .6s;
}
.profile.is-open, .project.is-open {
  clip-path: inset(0);
  transition: visibility 0s;
  animation: profileIn .9s cubic-bezier(.7, 0, .2, 1);
}
/* project text: the title block draws itself — each box wipes in from the left, top to bottom, then its
   labels and values slide up into it one after another; the thumbnails rise in last
   (--base waits for the page wipe on a fresh open, and is 0 when stepping to the previous / next project) */
.project__side.is-enter > * { animation: riseIn .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--base, 0ms) + var(--n, 0) * 110ms + 250ms); }
.project__side.is-enter > :is(.project__top, .project__brief, .project__meta, .project__nav) {
  animation: boxDraw .75s cubic-bezier(.7, 0, .2, 1) both; animation-delay: calc(var(--base, 0ms) + var(--n, 0) * 110ms);
}
.project__side.is-enter :is(.project__top > *, .project__meta .ct-c > *) {
  animation: textUp .7s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--base, 0ms) + var(--n, 0) * 110ms + 380ms + var(--k, 0) * 60ms);
}
.project__side.is-enter .project__brief { animation-name: boxDraw, textFade; animation-duration: .75s, .8s; }
/* Previous · counter · Next are the boxes themselves (they paint over the black frame): only their text fades in */
.project__side.is-enter .project__nav > * {
  animation: textFade .7s var(--ease) backwards; /* backwards: once in, the hover colours apply */
  animation-delay: calc(var(--base, 0ms) + var(--n, 0) * 110ms + 380ms + var(--k, 0) * 60ms);
}
.project__meta .ct-c:nth-child(2) > *, .project__nav > :nth-child(2), .project__top > :nth-child(2) { --k: 1; }
.project__meta .ct-c:nth-child(3) > *, .project__nav > :nth-child(3) { --k: 2; }
.project__meta .ct-c:nth-child(4) > * { --k: 3; }
.project__meta .ct-c:nth-child(5) > * { --k: 4; }
.project__meta .ct-c:nth-child(n + 6) > * { --k: 5; }
.project__meta .ct-c > dd { animation-delay: calc(var(--base, 0ms) + var(--n, 0) * 110ms + 440ms + var(--k, 0) * 60ms) !important; }
@keyframes boxDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes textUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes textFade { from { color: transparent; } 40% { color: transparent; } to { color: var(--fg); } }
@media (prefers-reduced-motion: reduce) { .project__side.is-enter *, .project__side.is-enter > * { animation: none !important; } }
.project__side > :nth-child(2) { --n: 1; }
.project__side > :nth-child(3) { --n: 2; }
.project__side > :nth-child(4) { --n: 3; }
.project__side > :nth-child(5) { --n: 4; }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes profileIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.profile__row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--faint);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.profile__top, .profile__label, .profile__body {
  opacity: 0; transform: translateY(24px);
  transition: opacity .3s, transform .3s;
}
/* the top bar comes in with the opening; the sections below reveal as they scroll into view (.is-in, app.js) */
.profile.is-open .profile__top {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease) .45s, transform 1s cubic-bezier(.16, 1, .3, 1) .45s;
}
.profile__row.is-in::before { transform: none; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.profile__row.is-in .profile__label, .profile__row.is-in .profile__body {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease) .1s, transform 1s cubic-bezier(.16, 1, .3, 1) .1s;
}
.profile__row.is-in .profile__body { transition-delay: .2s; }
.profile__body { grid-column: 3 / -1; }
/* markbox (from www.l1l2.graphics/about): a 3:4 window with a cascade of bold l1l2, driven by scrolling the profile */
.markbox {
  position: relative; overflow: hidden;
  width: min(100%, clamp(84px, 8vw, 132px)); aspect-ratio: 3 / 4;
  color: var(--fg);
}
/* sits above the About section, on the clock / text column */
.profile__mark {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap);
  margin: 0 0 40px;
}
.profile__mark .markbox { grid-column: 3; }
@media (max-width: 1000px) {
  .profile__mark { margin: 0 0 32px; }
  .profile__mark .markbox { grid-column: 1; }
}
.markstack { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.markitem { font-weight: 700; letter-spacing: -.05em; line-height: .7; white-space: nowrap; }
.markitem i { font-style: italic; }
.profile .markbox { opacity: 0; transform: translateY(34px); transition: opacity .3s, transform .3s; }
.profile.is-open .markbox {
  opacity: 1; transform: none;
  transition: opacity 1.1s ease .5s, transform 1.2s cubic-bezier(.22, 1, .36, 1) .5s;
}
.profile__lead {
  font-size: clamp(20px, 2.1vw, 34px);
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 30em;
}
.profile__lead p + p { margin-top: .8em; }
.profile__points { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); counter-reset: p; }
.profile__points li { counter-increment: p; }
.profile__points span { display: block; margin-bottom: 8px; }
.profile__points span::before { content: counter(p) "  "; color: var(--dim); white-space: pre; }
.profile__points p { color: var(--soft); max-width: 24em; }
.profile__caps { columns: 2; column-gap: var(--gap); } /* two columns, lined up with the Clients columns below */
.profile__beliefs { font-size: clamp(20px, 2.1vw, 34px); line-height: 1.15; letter-spacing: -.02em; columns: 2; column-gap: var(--gap); }
.profile__beliefs li { break-inside: avoid; }
.profile__clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px var(--gap); color: var(--dim); }
.profile__clients span { display: block; color: var(--fg); }
.profile__clients a:hover span { color: var(--dim); }
.profile__contact { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); font-size: clamp(16px, 1.4vw, 22px); line-height: 1.2; }
.profile__contact p:first-child { color: var(--soft); max-width: 26em; }
.profile__contact a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* desktop: the second column of Practice, Clients, Education and Press starts where "Design"
   (2nd of the 4 Approach columns) does — they use the same 4-column grid and fill its first two columns */
@media (min-width: 1001px) {
  .profile__caps {
    columns: auto;
    display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap);
    grid-template-rows: repeat(4, auto); grid-auto-flow: column;
  }
  .profile__clients { grid-template-columns: repeat(4, 1fr); }
  .profile__clients li:nth-child(odd) { grid-column: 1; }
  .profile__clients li:nth-child(even) { grid-column: 2; }
}
@media (max-width: 1000px) {
  .profile__label, .profile__body { grid-column: 1 / -1; }
  .profile__label { margin-bottom: 14px; }
  .profile__points { grid-template-columns: 1fr 1fr; row-gap: 24px; }
}
@media (max-width: 600px) {
  .profile__points, .profile__contact, .profile__clients { grid-template-columns: 1fr; }
  .profile__beliefs { columns: 1; }
  .profile__caps { columns: 1; }
}

body.panel-open, body.is-loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* phones: a tighter vertical rhythm on the 16px grid (kept last so it wins over the general rules) */
@media (max-width: 600px) {
  .ctrl { margin-top: 24px; padding-bottom: 56px; }   /* header → controls → first project */
  .row { --space: 64px; gap: 14px; }                    /* between projects; images → title */
  .foot { padding-top: 0; padding-bottom: 40px; }
}

/* phones: the header (+) is at the right edge, so the profile's (−) takes that spot and replaces Close ✕;
   no clock here either, like the phone header */
@media (max-width: 600px) {
  .profile__top { align-items: center; min-height: calc(var(--fs) * 2.68 * .88); } /* same row height as the phone header (the l1l2 logo) */
  .profile__minus { grid-column: 2; justify-self: end; }
  .profile__mail, .profile__clock { display: none; } /* phones: Profile + (−), no Email (like the header) */
}
/* phones: the header (+) and the profile's (−) bigger, with a finger-sized tap area around them */
@media (max-width: 600px) {
  .head__profile, .profile__minus { font-size: calc(var(--fs) * 1.4); line-height: 1; padding: 10px; margin: -10px; }
}

/* ---------- Overview as a carousel (as on the l1l2-bodey home) ----------
   the page stops scrolling: under the header and the controls, one project at a time fills the stage with
   its 2 × 2 preview, cross-fading to the next every few seconds; ← → / swipe / drag / wheel / keyboard move it,
   a click opens the project. Each slide is the project's 2 × 2 split; counter, title and arrows sit in the left column, centred on it.
   The Index view keeps the scrolling list. */
html.stage-on, html.stage-on body { overflow: hidden; }
html.stage-on .list, html.stage-on .foot { display: none; }
.stage { display: none; }
html.stage-on .stage {
  display: block;
  position: fixed; z-index: 2;
  top: var(--stage-top, 30vh); height: var(--stage-h, 60vh);
  left: calc(var(--pad) + (100vw - 2 * var(--pad) - 6 * var(--gap)) / 7 * 2 + 2 * var(--gap)); right: var(--pad);
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.slide {
  position: absolute; inset: 0;
  /* the images start on the clock / controls column (left edge of column 3), whatever their size */
  display: flex; align-items: center; justify-content: flex-start;
  opacity: 0; visibility: hidden; z-index: 0;
}
.slide.is-prev { opacity: 1; visibility: visible; z-index: 1; }
.slide.is-on { opacity: 1; visibility: visible; z-index: 2; transition: opacity 1s cubic-bezier(.4, 0, .2, 1); }
.slide:hover { color: inherit; }
/* the project's 2 × 2 split (four 16:9 images, 4px apart), as large as the stage allows */
.frame {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  width: min(100%, calc((var(--stage-h, 60vh) - 4px) * 16 / 9 + 4px));
  cursor: pointer; -webkit-user-drag: none;
}
.slide .frame__cell { clip-path: inset(0 0 0 0 round 4px); transition: clip-path 1.3s cubic-bezier(.16, 1, .3, 1) calc(var(--c, 0) * 110ms); }
body.is-loading .slide .frame__cell { clip-path: inset(100% 0 0 0 round 4px); } /* first appearance: the cells wipe up */
.frame__cell img, .frame__cell video { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .slide.is-on { transition: none; } }
/* phones: the images stacked in one column, as wide as the screen — two or three, as the height allows (app.js sets --cells) */
html.stage-col .frame {
  grid-template-columns: 1fr;
  width: min(100%, calc((var(--stage-h, 60vh) - (var(--cells) - 1) * 4px) / var(--cells) * 16 / 9));
  margin-inline: auto;
}
html.stage-col .frame__cell:nth-child(n + 4) { display: none; }
html.stage-2 .frame__cell:nth-child(3) { display: none; }

/* counter · title · arrows */
.bar { display: none; }
html.stage-on .bar {
  position: fixed; z-index: 12;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  left: var(--pad);
  top: calc(var(--stage-top, 30vh) + var(--stage-h, 60vh) / 2);
  width: calc((100vw - 2 * var(--pad) - 6 * var(--gap)) / 7 * 2 + var(--gap));
  line-height: 1.2;
  opacity: 0; transform: translate(-12px, -50%);
  transition: opacity .45s var(--ease), transform .6s cubic-bezier(.16, 1, .3, 1);
}
html.stage-on .bar.is-on { opacity: 1; transform: translate(0, -50%); }
.bar__count { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar__count .roll { color: var(--fg); }
.bar__title { text-align: left; max-width: 100%; }
.bar__title:hover { color: inherit; }
.bar__title b { font-weight: 700; }
.bar__title .bar__sub { display: block; margin-top: .15em; color: var(--dim); }
.bar__title .roll > span { white-space: normal; }
/* hovering the image or the title: the dark pill behind the title (as the list titles had) */
.bar__title b {
  padding: .12em .55em .17em; margin: 0 -.55em; border-radius: 999px;
  background: linear-gradient(var(--fg), var(--fg)) no-repeat 0 0 / 0% 100%;
  transition: background-size .5s cubic-bezier(.16, 1, .3, 1), color .3s var(--ease);
}
.bar.is-hot .bar__title b, .bar__title:hover b { background-size: 100% 100%; color: var(--bg); }
.bar__title .roll { padding: .2em .6em; margin: -.2em -.6em; } /* room for the pill inside the clipped roll */
.bar__arrows { display: flex; gap: 14px; margin-top: 6px; }
.bar__arrows button { color: var(--fg); }
.bar__arrows button:hover { color: var(--dim); }

/* rolling value: the old one slides out, the new one slides in (upwards when moving forward) */
.roll { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.roll > span { grid-area: 1 / 1; white-space: nowrap; transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .4s var(--ease); }
.roll > span.is-from-below { transform: translateY(100%); opacity: 0; }
.roll > span.is-from-above { transform: translateY(-100%); opacity: 0; }
.roll > span.is-to-above { transform: translateY(-100%); opacity: 0; }
.roll > span.is-to-below { transform: translateY(100%); opacity: 0; }

/* tablet + phone: the stage spans the width; counter, title and arrows in one line under it */
@media (max-width: 1000px) {
  html.stage-on .stage { left: var(--pad); right: var(--pad); }
  html.stage-on .bar {
    top: auto; bottom: 0; left: 0; width: 100%;
    flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: var(--pad); transform: translateY(12px);
  }
  html.stage-on .bar.is-on { transform: none; }
  .bar__title { flex: 1; min-width: 0; text-align: center; }
  /* always two lines, whatever the title: name, then subtitle, each cut with … when too long —
     the bar never changes height, so the images above it never jump */
  .bar__title .roll { display: grid; }
  .bar__title .roll > span { white-space: nowrap; min-width: 0; }
  .bar__title b { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
  .bar__title .bar__sub { display: block; margin: .1em 0 0; overflow: hidden; text-overflow: ellipsis; }
  .bar__arrows { margin: 0; }
}

/* desktop carousel: the controls and the project bar swap places —
   Overview ⇄ Index + filters in the left column, centred on the images;
   counter, arrows and title at the top of column 3, under the clock */
@media (min-width: 1001px) {
  html.stage-on .ctrl {
    position: fixed; z-index: 12; margin: 0; padding: 0;
    left: var(--pad);
    width: calc((100vw - 2 * var(--pad) - 6 * var(--gap)) / 7 * 2 + var(--gap));
    top: calc(var(--stage-top, 30vh) + var(--stage-h, 60vh) / 2);
    transform: translateY(-50%);
  }
  html.stage-on .bar {
    top: max(calc(var(--head-h, 64px) + 24px), 18vh);
    left: calc(var(--pad) + (100vw - 2 * var(--pad) - 6 * var(--gap)) / 7 * 2 + 2 * var(--gap));
    right: var(--pad); width: auto;
    display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 4px; align-items: baseline;
    transform: translateY(-8px);
  }
  html.stage-on .bar.is-on { transform: none; }
  html.stage-on .bar__count { grid-column: 1; grid-row: 1; }
  html.stage-on .bar__arrows { grid-column: 2; grid-row: 1; margin: 0; }
  html.stage-on .bar__title { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  html.stage-on .bar__title .roll > span { white-space: nowrap; }
}

/* Profile: a scroll cue at the bottom of the first screen (fades in after the first statement, gone once you scroll) */
.pscroll {
  position: fixed; left: 50%; bottom: calc(var(--pad) + 14px); z-index: 6;
  transform: translate(-50%, 8px);
  color: var(--soft); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease), transform .8s cubic-bezier(.16, 1, .3, 1);
}
.profile.is-open .pscroll.is-on { opacity: 1; transform: translate(-50%, 0); }
.pscroll__arw { display: inline-block; margin-left: .2em; animation: cueBob 1.6s ease-in-out infinite; }
@keyframes cueBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .pscroll__arw { animation: none; } }

/* Light / Dark switch, in the controls under the filter */
.ctrl__theme { display: flex; align-items: baseline; gap: 14px; flex-basis: 100%; order: 5; } /* after the disciplines */

.theme-sw { display: none; }
.theme-sw button { color: var(--dim); transition: color .2s; }
.theme-sw button:hover, .theme-sw button.is-on { color: var(--fg); }
@media (min-width: 1001px) {
  html.stage-on .ctrl__theme { display: none; }
  html.stage-on .theme-sw {
    display: flex; align-items: baseline; gap: 14px;
    position: fixed; z-index: 12; left: var(--pad);
    top: calc(var(--frame-top, 30vh) - .2em); /* the text's cap line level with the top of the images */
    line-height: 1.2;
  }
}

/* desktop carousel: EN · IT leaves the header for the left column, under the filter,
   its baseline level with the bottom of the images (as Light / Dark is level with their top) */
@media (min-width: 1001px) {
  html.stage-on .head__lang {
    position: fixed; z-index: 12; left: var(--pad);
    top: var(--frame-bottom, 80vh); transform: translateY(calc(-100% + .22em));
    line-height: 1.2;
  }
}

/* ---------- project panel: slider (several images in one frame) ---------- */
.pslide { flex: none; background: none !important; }
.pslide__track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  aspect-ratio: var(--ar, 16 / 9);
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; background: var(--faint);
  outline-offset: -1px;
}
.pslide__track::-webkit-scrollbar { display: none; }
.pslide__item { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; cursor: e-resize; -webkit-user-select: none; user-select: none; }
.pslide__item img, .pslide__item video { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.pslide__bar { display: flex; align-items: baseline; gap: 16px; padding: 8px 0 6px; }
.pslide__arrows { display: flex; gap: 12px; }
.pslide__arrows button:hover { color: var(--dim); }
.pslide__label { color: var(--dim); }
.pslide__count { margin-left: auto; color: var(--dim); font-variant-numeric: tabular-nums; }
.pslide__count b { font-weight: 400; color: var(--fg); }

/* Profile: signature at the very bottom — bold name + grey role, like the project titles */
.profile__row--sign { padding-bottom: clamp(72px, 14vh, 160px); } /* air under the signature, at the end of the page */
.profile__sign b { font-weight: 700; }
.profile__sign span { color: var(--soft); margin-left: .3em; }

/* headings for search engines and screen readers: the H1 is read but not shown; H2s look like the text around them */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1, h2, h3 { font: inherit; }

/* ---------- type specimen (typeface projects, top of the project panel; after exat.hottype.co) ----------
   colours come from the project (--sbg ground, --sink type, --sacc accent); sizes follow the column (cqw) */
.spec {
  container-type: inline-size;
  --sbg: #141412; --sink: #EEECE4; --sacc: #FF5B2E;
  display: flex; flex-direction: column; gap: 4px;
  flex: none; width: 100%;
}
.spec.is-loading { min-height: 56cqw; background: var(--faint); }
.spec > * { border-radius: 4px; padding: clamp(14px, 2.4cqw, 28px); }
.spec__row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--fs) - 2px); }
.spec__lbl { text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--fs) - 2px); margin-bottom: 14px; }

/* 1. hero */
.spec__hero { background: var(--sbg); color: var(--sink); aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.spec__hero .spec__row:first-child span:first-child { color: var(--sacc); }
.spec__big { font-family: var(--sfont), "Helvetica Neue", sans-serif; line-height: .8; white-space: nowrap; letter-spacing: 0; margin-left: -.02em; }

/* 2. tester */
.spec__tester { transition: background-color .4s, color .4s; }
.spec__tester[data-theme="acc"] { background: var(--sacc); color: var(--sbg); }
.spec__tester[data-theme="dark"] { background: var(--sbg); color: var(--sink); }
.spec__tester[data-theme="light"] { background: var(--sink); color: var(--sbg); }
.spec__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid currentColor; font-size: calc(var(--fs) - 2px); }
.spec__ctl { display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .08em; }
.spec__ctl output { min-width: 4.2em; font-variant-numeric: tabular-nums; }
.spec__ctl input[type=range] { -webkit-appearance: none; appearance: none; width: clamp(70px, 12cqw, 140px); height: 1px; background: currentColor; accent-color: currentColor; }
.spec__ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: currentColor; border: 0; cursor: grab; }
.spec__ctl input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: currentColor; border: 0; cursor: grab; }
.spec__btn { border: 1px solid currentColor; border-radius: 999px; padding: 2px 10px; color: inherit; }
.spec__btn[aria-pressed="true"] { border-width: 2px; padding: 1px 9px; font-weight: 700; }
.spec__themes { display: flex; gap: 6px; margin-left: auto; }
.spec__sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; }
.spec__sw--acc { background: var(--sacc); } .spec__sw--dark { background: var(--sbg); } .spec__sw--light { background: var(--sink); }
.spec__sw[aria-pressed="true"] { outline: 1px solid currentColor; outline-offset: 2px; }
.spec__text {
  font-family: var(--sfont), "Helvetica Neue", sans-serif;
  font-size: var(--ts); line-height: var(--tl); letter-spacing: var(--tt);
  outline: none; overflow-wrap: anywhere; min-height: 1.2em; cursor: text;
}

/* 3. construction viewer + character set */
.spec__con, .spec__set { background: var(--sbg); color: var(--sink); }
.spec__con { display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 26cqw, 260px); gap: 12px 24px; }
.spec__con > .spec__row { grid-column: 1 / -1; }
.spec__gname { color: var(--sacc); white-space: pre; }
.spec__svg { width: 100%; height: auto; display: block; overflow: visible; }
.spec__gl { fill: none; stroke: color-mix(in srgb, var(--sink) 16%, transparent); stroke-width: 1; }
.spec__ht { fill: none; stroke: color-mix(in srgb, var(--sacc) 45%, transparent); stroke-width: 1; }
.spec__ml { fill: none; stroke: color-mix(in srgb, var(--sink) 45%, transparent); stroke-width: 1; }
.spec__ml--d { stroke: color-mix(in srgb, var(--sacc) 70%, transparent); stroke-dasharray: 6 4; }
.spec__mlab { fill: color-mix(in srgb, var(--sink) 60%, transparent); font-family: "Helvetica Neue", Helvetica, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.spec__ink { fill: var(--sink); transition: d .25s; }
.spec__outl { fill: none; stroke: var(--sacc); stroke-width: 1.6; stroke-linejoin: miter; }
.spec__nodes rect { fill: var(--sbg); stroke: var(--sacc); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.spec__info { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; font-size: calc(var(--fs) - 1px); }
.spec__info dt, .spec__info dd { margin: 0; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--sink) 18%, transparent); }
.spec__info dt { color: color-mix(in srgb, var(--sink) 60%, transparent); padding-right: 14px; text-transform: uppercase; letter-spacing: .06em; font-size: calc(var(--fs) - 3px); }
.spec__info dd { overflow-wrap: anywhere; }
.spec__set .spec__row { margin-bottom: 14px; }
.spec__set .spec__row span:last-child { color: color-mix(in srgb, var(--sink) 60%, transparent); text-transform: none; letter-spacing: 0; }
.spec__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(38px, 6.2cqw, 64px), 1fr)); border-left: 1px solid color-mix(in srgb, var(--sink) 14%, transparent); border-top: 1px solid color-mix(in srgb, var(--sink) 14%, transparent); }
.spec__grid .spec__g { border-right: 1px solid color-mix(in srgb, var(--sink) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--sink) 14%, transparent); }
.spec__g { aspect-ratio: 1; background: var(--sbg); color: var(--sink); font-family: var(--sfont), "Helvetica Neue", sans-serif; font-size: clamp(16px, 2.6cqw, 28px); line-height: 1; transition: background-color .15s, color .15s; }
.spec__g:hover, .spec__g:focus-visible { background: var(--sink); color: var(--sbg); outline: none; }
.spec__g.is-on { background: var(--sacc); color: var(--sbg); }

/* 4. waterfall */
.spec__fall { background: var(--sink); color: var(--sbg); overflow: hidden; }
.spec__wf { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--sbg) 20%, transparent); }
.spec__wfs { font-size: calc(var(--fs) - 3px); letter-spacing: .06em; color: color-mix(in srgb, var(--sbg) 60%, transparent); font-variant-numeric: tabular-nums; }
.spec__wft { font-family: var(--sfont), "Helvetica Neue", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }

/* panel: the specimen rises in like the images; its thumbnail is a small "Aa" in the font */
.project__media > .spec { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.project__media > .spec.is-in { opacity: 1; transform: none; }
.thumb-spec { display: flex !important; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: #141412; color: #EEECE4; font-size: 26px; padding: 0 !important; text-align: center !important; opacity: .55; transition: opacity .3s; }
.project__thumbs button:hover .thumb-spec { opacity: 1; }
@container (max-width: 560px) {
  .spec__con { grid-template-columns: minmax(0, 1fr); }
  .spec__themes { margin-left: 0; }
}

/* specimen: the tester, construction and waterfall blocks are the same size as the hero (16:9 of the column) */
@container (min-width: 561px) {
  .spec__tester, .spec__con, .spec__fall { aspect-ratio: 16 / 9; overflow: hidden; }
  .spec__tester { display: flex; flex-direction: column; }
  .spec__tester .spec__text { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; }
  .spec__tester .spec__text::-webkit-scrollbar { display: none; }
  .spec__con { grid-template-rows: auto minmax(0, 1fr); }
  .spec__con .spec__svg { height: 100%; width: 100%; }
  .spec__con .spec__info { overflow: hidden; }
  .spec__fall { display: flex; flex-direction: column; justify-content: space-between; }
  .spec__fall .spec__lbl { margin-bottom: 0; }
}