/* ==========================================================================
   alfred. — Work (Figma: Work - Desktop, 4784 × 1024)
   In the homepage's frame and unit, like the other pages: 1 Figma px = 70% of a homepage unit.
   Alfred Red frame, Off White window; THE WORK and six projects slide by sideways as you scroll.
   The cards are 40% bigger than in Figma and spaced evenly, 122 apart (user); the first one ends
   exactly under the K of WORK (work.js). --x / --y / --w are design pixels inside the window.
   ========================================================================== */

.page-work {
  --hu: min(100vw / 1440, 100vh / 1024);
  --u: calc(var(--hu) * .7);
  --edge: calc(12 * var(--hu)); --edge-radius: calc(28 * var(--hu));
  --pad: calc(16 * var(--hu)); --navh: calc(52 * var(--hu));   /* compact (user, 2026-11-06) */ --radius: calc(24 * var(--hu));
  --frame: var(--red);
  --win-top: calc(var(--edge) + var(--navh) + var(--pad));
  --win-h: calc(100vh - var(--win-top) - var(--edge) - var(--pad));
  --barh: calc(92 * var(--u));   /* the page counter and toggle along the bottom */
  background: var(--cream);
  color: var(--black);
}
html:has(.page-work) { background: var(--frame); }

/* ---------- The homepage's frame (same rules as the other pages) ---------- */
.page-work .site-mask {
  position: fixed;
  inset: var(--edge);
  z-index: 60;
  border-radius: var(--edge-radius);
  box-shadow: 0 0 0 100vmax var(--cream);
  pointer-events: none;
}
.w-window {
  position: fixed;
  z-index: 40;
  top: var(--win-top);
  left: calc(var(--edge) + var(--pad));
  right: calc(var(--edge) + var(--pad));
  bottom: calc(var(--edge) + var(--pad));
  border-radius: var(--radius);
  box-shadow: 0 0 0 100vmax var(--frame);
  pointer-events: none;
}
.page-work .nav { --u: var(--hu); top: var(--edge); height: calc(var(--navh) + var(--pad)); background: var(--frame); color: var(--cream); }
.page-work .nav__lang-menu { background: var(--frame); }

/* ---------- The strip: 934 high (the window's height in Figma), centred in the window's height ---------- */
.hscroll { height: 100vh; overflow: hidden; position: relative; }
.hs-track {
  position: absolute;
  left: calc(var(--edge) + var(--pad));
  top: calc(var(--win-top) + (var(--win-h) - var(--barh) - 934 * var(--u)) / 2);   /* centred above the bar */
  width: calc(var(--tw, 5061) * var(--u));   /* ends one gap after its last card (work.js) */
  height: calc(934 * var(--u));
  will-change: transform;
}
.w-item {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}

/* THE WORK (88, 142): Wide Super 160/148, Alfred Red */
.w-title {
  position: absolute;
  left: calc(43 * var(--u));
  top: calc(20 * var(--u));   /* higher, to make room for the bigger photos (user) */
  font-family: var(--font-wide);
  font-weight: 900;
  font-size: calc(160 * var(--u));
  line-height: calc(148 * var(--u));
  text-transform: uppercase;
  color: var(--red);
}

/* the wide cards: 629 × 416 */
.card--6x4 .card__media { aspect-ratio: 629 / 416; }

/* captions: Rich Black on the Off White window (Figma: Client Wide Super 24/25, title Regular 24/25) */
.page-work .card__meta { color: var(--black); }

.card--16x9 .card__media { aspect-ratio: 16 / 9; }

/* ---------- The bar: page counter in the middle, the grid toggle on the right ---------- */
.w-bar {
  position: fixed;
  z-index: 39;   /* under the window's rounded frame, so its strip never squares off the corners */
  left: calc(var(--edge) + var(--pad));
  right: calc(var(--edge) + var(--pad));
  bottom: calc(var(--edge) + var(--pad) + 22 * var(--u));   /* raised clear of the edge (user) */
  height: var(--barh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(40 * var(--u));
  pointer-events: none;
}
.w-bar > * { pointer-events: auto; }
.w-pages { display: flex; gap: calc(14 * var(--u)); }
.w-page {
  min-width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  padding: 0;
  border: 0;   /* solid pills in the brand colours instead of thin outlines (user) */
  border-radius: 99px;
  background: var(--black);
  color: var(--cream);
  font: inherit;
  font-size: calc(20 * var(--u));
  line-height: 1;
  /* the number dead centre: a flex box, the line trimmed to the figures' own height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-box: trim-both cap alphabetic;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: none;   /* colours switch at once: no muddy in-between (the movement is work.js's) */
}
/* (the circles move only when clicked: work.js bounces them) */
.w-page.is-on { background: var(--red); color: var(--black); }
/* only the page you are on is salmon: hovering never colours a circle, so it is never mistaken for the current page */
/* the toggle: three columns (pages) or a 2x2 grid, with a switch between them */
.w-toggle {
  position: absolute;
  right: calc(40 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.w-toggle__icon { display: grid; gap: calc(3 * var(--u)); opacity: .4; transition: opacity .3s var(--ease-out); }
.w-toggle__icon i { display: block; background: var(--black); border-radius: calc(2 * var(--u)); }
.w-toggle__icon--pages { grid-template-columns: repeat(3, calc(7 * var(--u))); }
.w-toggle__icon--pages i { height: calc(20 * var(--u)); }
.w-toggle__icon--grid { grid-template-columns: repeat(2, calc(9 * var(--u))); }
.w-toggle__icon--grid i { height: calc(9 * var(--u)); }
/* a solid black pill; the salmon knob sits dead centre in its height */
.w-toggle__track { display: flex; align-items: center; width: calc(60 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(5 * var(--u));   /* 32 high, 22 knob: 5 all round */ border-radius: 99px; background: var(--black); }
.w-toggle__knob { display: block; flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--red); }   /* moved (with a squish) by work.js */
.w-toggle[aria-pressed="false"] .w-toggle__icon--pages, .w-toggle[aria-pressed="true"] .w-toggle__icon--grid { opacity: 1; }

/* ---------- Grid view: THE WORK centred at the top, 4 columns of 16:9 below, scrolling down ---------- */
.w-grid { display: none; }
.is-grid .hscroll { height: auto; overflow: visible; padding: calc(var(--win-top) + 40 * var(--u)) calc(var(--edge) + var(--pad) + 60 * var(--u)) calc(var(--edge) + var(--pad) + var(--barh) + 40 * var(--u)); }
.is-grid .hs-track { position: static; width: auto; height: auto; text-align: center; }
.is-grid .w-title { position: static; display: inline-block; text-align: center; }
.is-grid .w-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(60 * var(--u)) calc(40 * var(--u)); margin-top: calc(60 * var(--u)); }
.is-grid .w-grid .w-item { position: relative; left: auto; top: auto; width: auto; }
.is-grid .w-pages { display: none; }
/* the bar sits on a strip of the window's own colour, so cards scroll away under it */
/* (it reaches down to the window's edge, so nothing peeks out beneath it) */
.is-grid .w-bar { background: var(--cream); bottom: calc(var(--edge) + var(--pad)); height: calc(var(--barh) + 22 * var(--u)); padding-bottom: calc(22 * var(--u)); }

/* ---------- Upright screens (phones, upright tablets): both views stacked, sized from the width ---------- */
@media (orientation: portrait) {
  .page-work { --u: calc(100vw / 600); --barh: calc(64 * var(--u)); }
  .hscroll { height: auto; overflow: visible; padding: calc(var(--win-top) + 30 * var(--u)) calc(var(--edge) + var(--pad) + 24 * var(--u)) calc(var(--edge) + var(--pad) + var(--barh) + 30 * var(--u)); }
  .hs-track { position: static; width: auto; height: auto; display: flex; flex-direction: column; gap: calc(40 * var(--u)); }
  .w-title { position: static; font-size: calc(96 * var(--u)); line-height: calc(88 * var(--u)); }
  .hs-track .w-item, .is-grid .w-grid .w-item { position: relative; left: auto !important; top: auto; width: auto; }
  .is-grid .w-grid { grid-template-columns: 1fr; gap: calc(40 * var(--u)); }
  .w-bar { background: var(--cream); bottom: calc(var(--edge) + var(--pad)); height: calc(var(--barh) + 22 * var(--u)); padding-bottom: calc(22 * var(--u)); }
}
@media (orientation: portrait) and (min-width: 700px) {
  .is-grid .w-grid { grid-template-columns: repeat(2, 1fr); }
}

/* the arrow (next, or back on the last page): a drawn arrow, so it sits dead centre (a typed → rides low) */
.w-page--arrow svg { width: 45%; height: 45%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Filters (left of the bar): small letters, the chosen one a salmon pill ---------- */
.w-filters { position: absolute; left: calc(40 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); max-width: calc(50% - 160 * var(--u)); }
.w-filter {
  height: calc(40 * var(--u));
  padding: 0 calc(16 * var(--u));
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 99px;
  background: var(--black);
  color: var(--cream);
  font: inherit;
  text-transform: none;   /* buttons do not inherit it */
  font-size: calc(20 * var(--u));
  line-height: 1;
  text-box: trim-both cap alphabetic;
  cursor: pointer;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .45s var(--ease-pop);
}
.w-filter:hover { transform: translateY(calc(-3 * var(--u))) scale(1.05); background: var(--red); color: var(--black); }
.w-filter.is-on { background: var(--red); color: var(--black); }

/* upright screens: the filters get their own row above the counter and toggle */
@media (orientation: portrait) {
  .page-work { --barh: calc(140 * var(--u)); }
  .w-bar { flex-direction: column; justify-content: flex-end; gap: calc(14 * var(--u)); padding-bottom: calc(30 * var(--u)); }
  .w-filters { position: static; max-width: none; justify-content: center; }
}


/* the counter: an empty place at each end of the numbers; the arrow is laid out over the right one
   and only ever moves by transform, so the numbers stay exactly where they are */
.w-pages { position: relative; }
.w-slot { flex: none; width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.w-page--arrow { position: absolute; right: 0; top: 0; }
/* a little more room between the arrow and the numbers, so its landing squish never touches them */
.w-slot:first-child { margin-right: calc(10 * var(--u)); }
.w-slot:last-of-type { margin-left: calc(10 * var(--u)); }

/* and its own bottom corners follow the window's */
.w-bar { border-radius: 0 0 var(--radius) var(--radius); }

/* phones and upright tablets: the list alone; no page numbers, no view switch, the filters centred (user) */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .w-toggle { display: none !important; }
  .is-m .w-pages { display: flex; width: fit-content; margin: 48px auto 0; }
  .is-m .hs-track .w-item { width: 100% !important; }
  .is-m .hs-track .card__media { aspect-ratio: 16 / 9; }
  .w-bar { display: none; }
  .is-m .hscroll { padding: calc(var(--win-top) + 44px) calc(var(--edge) + var(--pad) + 26px) calc(var(--edge) + var(--pad) + 60px); }
  .is-m .hs-track { align-items: center; }
  .is-m .w-title, .is-m.is-grid .w-title { display: block; text-align: center; font-size: min(14vw, 64px); line-height: .92; }
  .is-m .w-filters { position: static; max-width: 300px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 24px auto 36px; }
  .is-m .w-filter { height: 28px; padding: 0 12px .1em; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
  .is-m .w-grid { gap: 36px; }
}

/* ---------- the three shapes (CMS), and the 16:9 crop for phones and the grid ---------- */
.card--1x1 .card__media { aspect-ratio: 1; }
.card--9x16 .card__media { aspect-ratio: 9 / 16; }
.card.is-crop .card__img { background-position: var(--cx, 50%) var(--cy, 50%); scale: var(--cz, 1); transform-origin: var(--cx, 50%) var(--cy, 50%); }

/* hover (user, 2026-11-10): like the homepage cards, the card turns salmon and the picture sits inside
   it with all four corners rounded; the words white and 20% larger */
.page-work .card__media { background: var(--red); }
.page-work .card__img { clip-path: inset(0 round calc(16 * var(--u))); transition: transform 1.1s var(--ease-out), clip-path .6s var(--ease-out); }
.page-work .card:hover .card__img { transform: none; clip-path: inset(calc(10 * var(--u)) calc(10 * var(--u)) calc(100% / 3) calc(10 * var(--u)) round calc(10 * var(--u))); }
.page-work .card__sheet { background: transparent; box-shadow: none; border-radius: 0; color: #fff; }
.page-work .card__desc p { font-size: calc(21.6 * var(--u)); color: #fff; }
.page-work .card__more { color: #fff; }

/* the thin text under each work (the project line) and the hover text larger (user, 2026-11-10); the fat client name stays */
.page-work .card__meta > span { font-size: calc(24 * 1.35 * var(--u)); line-height: 1.15; }
.page-work .card__desc p { font-size: calc(21.6 * 1.25 * var(--u)); }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) { .page-work .card__meta > span { font-size: max(16px, calc(24 * 1.35 * var(--u))); } }

/* (user, 2026-11-11) the hover: with a result, the red band with the text, 20% smaller and quieter;
   without one, only a thin red outline round the picture. A work that leads somewhere: the round arrow. */
.page-work .card__desc p { font-size: calc(21.6 * var(--u)); font-weight: 300; opacity: 0; }
.page-work .card:hover .card__desc p { opacity: .92; }
.page-work .card:not(.has-text):hover .card__img { clip-path: inset(calc(10 * var(--u)) round calc(10 * var(--u))); }
.page-work .card:not(.is-link) { cursor: default; }
.wcursor { position: fixed; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 9999; pointer-events: none; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.wcursor.is-on { opacity: 1; transform: none; }
.wcursor svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) { .page-work .w-item.is-link .card__media, .page-work .w-item.is-link .card__media * { cursor: none !important; } }
.w-filters[hidden] { display: none !important; }   /* the filter row switched off in the CMS */