:root {
  --paper: #ffffff;
  --mist: #f2f3f4;
  --ink: #000000;
  --text: #4a4a4c;
  --muted: #6c6c70; /* secondary text: at least 4.5:1 on white and on the gray cards */
  --line: #e6e7e9;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-small: 0.875rem;   /* 14 */
  --fs-body: 1.0625rem;   /* 17 */
  --fs-lead: 1.375rem;    /* 22 */
  --fs-h2: 2rem;          /* 32 */
  --fs-display: clamp(2.5rem, 6vw, 4.5rem);

  --radius-frame: 28px;
  --radius-card: 22px;
  --radius-media: 14px;

  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 45rem; /* 720px: about 95 characters of Helvetica a line */
  --nav-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; background: var(--paper); }

body {
  margin: 0;
  overflow-x: clip; /* the full-width carousel reaches the window edges */
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { color: var(--ink); font-weight: 500; letter-spacing: -0.01em; margin: 0; line-height: 1.2; }
p { margin: 0 0 0.9em; }

/* ---------- Liquid glass ----------
   Clear glass: a light tint, a strong blur that lifts the colour behind it, a bright rim on
   the top edge and a soft inner glow at the bottom. In Chromium (.has-refract) the backdrop
   is also bent through the SVG lens in index.html. */
:root {
  --glass-tint: rgba(255, 255, 255, .34);
  --glass-tint-dark: rgba(22, 22, 24, .42);
  --glass-frost: blur(14px) saturate(190%) brightness(1.04);
  --glass-bend: url(#glass-lens) blur(4px) saturate(190%) brightness(1.04);
  --glass-bend-sm: url(#glass-lens-sm) blur(3px) saturate(180%);
  --glass-rim:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 -12px 22px -16px rgba(255, 255, 255, .6);
  --glass-rim-dark:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 -10px 18px -14px rgba(255, 255, 255, .35);
  --glass-drop: 0 12px 32px -16px rgba(0, 0, 0, .35);
}
.glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

/* ---------- Frame + nav ---------- */

/* No box around the intro: it sits on the page, lined up with the sections below */
.frame {
  max-width: var(--wrap);
  margin: 16px auto 0;
  padding: var(--nav-h) var(--gutter) 0;
}

.nav {
  position: fixed;
  top: 16px;
  left: max(16px, calc((100% - var(--wrap)) / 2));
  right: max(16px, calc((100% - var(--wrap)) / 2));
  height: var(--nav-h);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 28px;
  border-radius: var(--radius-frame);
  transition: box-shadow .4s var(--ease);
  background: rgba(214, 216, 222, .52); /* a touch darker than the page, so it reads over white too */
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(0, 0, 0, .05), 0 10px 30px -20px rgba(0, 0, 0, .3);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
}
.has-refract .nav { backdrop-filter: var(--glass-bend); }

.nav.is-floating { box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(0, 0, 0, .05), 0 12px 32px -16px rgba(0, 0, 0, .35); }

.nav__name {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  letter-spacing: -0.01em;
}

.nav__links { display: flex; gap: 1.5rem; }
.nav__links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="true"]::after { transform: scaleX(1); }

.nav__toggle { display: none; }

/* ---------- About (white card inside the frame) ---------- */

.about { padding: clamp(40px, 7vw, 80px) 0 0; }

.about__head { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.8rem; }

.avatar {
  flex: none;
  width: 104px; height: 104px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--muted);
  display: grid; place-items: center;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  object-fit: cover;
  object-position: 50% 30%;
}

.about__name { margin: 0; color: var(--ink); font-size: 1.75rem; font-weight: 500; letter-spacing: -0.01em; }

.about__role { margin: 0.15rem 0 0; color: var(--text); font-size: var(--fs-body); }


.about__bio { max-width: 40rem; }

/* The opening: a light hello over the role line, the same size; then the short intro */
.about__intro {
  max-width: 22ch;
  margin: 0 0 1.4rem;
  color: var(--ink);
  font-size: clamp(1.625rem, 3.3vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* smaller than the role line, with the same gap as between the paragraphs below (0.9em of their size) */
.about__hello { display: block; margin-bottom: calc(clamp(1rem, 1.4vw, 1.125rem) * 0.9); font-size: 0.8em; font-weight: 300; }
.about__hook { display: block; font-weight: 500; }
.about__lede { max-width: 38rem; color: var(--text); font-size: clamp(1rem, 1.4vw, 1.125rem); }
.about__lede p:last-child { margin-bottom: 0; }
.about-me__top { display: grid; gap: 28px; }
.about-me__text .about__name { margin-bottom: 1rem; }
.about-me__photo { display: block; width: min(100%, 360px); aspect-ratio: 3 / 4; border-radius: 4px; /* almost square: a portrait, set apart from the rounded work */ object-fit: cover; object-position: 50% 52%; background: var(--mist); } /* a little room above the head */
/* Phones: the portrait on its own (cropped a little closer), then name, role and text underneath */
@media (max-width: 760px) {
  .about-me__top { gap: 20px; }
  .about-me__frame { width: 54%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; }
  .about-me__photo { width: 100%; height: 100%; transform: scale(1.22); transform-origin: 50% 42%; }
  .about-me__text .about__name { font-size: 1.5rem; }
}
/* Side by side from tablets up: the portrait is exactly as tall as the text beside it */
@media (min-width: 761px) {
  .about-me__top { grid-template-columns: var(--photo-w, 200px) minmax(0, 40rem); /* width set in main.js: about 2:3 of the text's height */ justify-content: start; gap: clamp(28px, 4vw, 56px); }
  /* the frame takes the text's height; the photo fills it without adding height of its own */
  .about-me__frame { position: relative; }
  .about-me__photo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}
.about-me .creds { margin-top: 2.8rem; }

/* Education and Tools: stacked on phones, side by side on wider screens */
.creds { display: grid; gap: 2.2rem; margin-top: 2.2rem; }
@media (min-width: 761px) {
  .creds { grid-template-columns: max-content minmax(0, 22rem); column-gap: clamp(48px, 6vw, 88px); justify-content: start; }
}

.block-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Years column is as wide as the longest years, with the same space on both sides of the divider */
.edu__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); row-gap: 1.1rem; max-width: var(--measure); }
.edu__list li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; }
.edu__years { padding-right: 1rem; }
.edu__years {
  color: var(--muted);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.edu__list li > div { padding-left: 1rem; border-left: 1px solid var(--line); }
.edu__degree { margin: 0; color: var(--ink); font-weight: 500; line-height: 1.4; }
.edu__school {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.3rem 0 0;
  color: var(--text);
  font-size: 0.9375rem;
}
.logo-dot {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 500;
}
.logo-dot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--paper); }
/* The TAU mark is wide, so it sits inside the circle instead of filling it */
.logo-dot img.logo-dot__tau { object-fit: contain; padding: 2px; }

.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 22rem; }
.pills li {
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0.55em 0.8em;
  border-radius: 999px;
}


.brands { margin-top: clamp(2.2rem, 4vw, 3rem); }
.brands__title { color: var(--ink); font-weight: 500; margin-bottom: 1.4rem; }

/* A scrollable strip: it drifts on its own (main.js) and can be swiped or dragged */
.marquee {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 2.6rem;
}
.marquee::-webkit-scrollbar { display: none; }
/* Client logos; --h is set per logo so they read at the same visual size */
.marquee__track { align-items: center; }
.marquee__track img {
  height: var(--h, 28px);
  width: auto;
  max-width: none;
  mix-blend-mode: multiply; /* drops the white box behind logos without transparency */
}

/* ---------- Sections ---------- */

main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding-top: clamp(96px, 14vw, 180px); }

.section__head { max-width: var(--measure); margin-bottom: 28px; }

/* Case studies follow the intro closely: the work is the first thing below it */
#work { padding-top: clamp(48px, 6vw, 80px); }

/* More work: one field open at a time. The switcher is a glass capsule under the heading;
   scrolled past, it docks to the bottom of the screen until the About section (main.js). */
.more { padding-top: clamp(48px, 6vw, 80px); }
/* More work is centred, like the carousels in it: heading, switcher, and each field's heading and line */
.more__head { margin: 0 auto 18px; text-align: center; }
.explore-slot { margin-bottom: clamp(8px, 2vw, 20px); text-align: center; }
.more .section--switch .section__head { margin-inline: auto; text-align: center; }
.more .section--switch { padding-top: clamp(40px, 5vw, 64px); }
.section--switch { scroll-margin-top: calc(var(--nav-h) + 24px); }
.explore {
  position: relative;
  z-index: 45;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(214, 216, 222, .52);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(0, 0, 0, .05);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
}
.has-refract .explore { backdrop-filter: var(--glass-bend); }
.explore.is-docked {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(0, 0, 0, .05), 0 12px 32px -16px rgba(0, 0, 0, .35);
  animation: dock .4s var(--ease) both;
}
@keyframes dock { from { opacity: 0; transform: translate(-50%, 14px); } }
.explore__btn {
  padding: 0.65em 1.15em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 500 1rem/1.1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.explore__btn:hover { background: rgba(255, 255, 255, .45); }
.explore__btn[aria-expanded="true"] { background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 14px -8px rgba(0, 0, 0, .3); }
.explore__short { display: none; }
@media (max-width: 560px) {
  .explore__long { display: none; }
  .explore__short { display: inline; }
  .explore__btn { padding: 0.65em 0.95em; font-size: 0.9375rem; }
}
.section--switch { padding-top: clamp(40px, 5vw, 64px); }
.section__head h2 { font-size: var(--fs-h2); margin-bottom: 0.6rem; }
.section__head p { margin: 0; }

.media {
  width: 100%;
  border-radius: var(--radius-media);
  background: var(--mist);
}

/* ---------- Case studies: three project cards; a card opens its story underneath ---------- */

.cases { display: grid; gap: 28px 20px; }
@media (min-width: 761px) {
  .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case { grid-column: 1 / -1; }
}
@media (min-width: 761px) {
  .cases--design:not(.has-open) .cases__row {
    grid-column: 1 / -1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 40px) / 3); /* same width as a case study card */
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: thin;
  }
  .cases--design:not(.has-open) .case-card { scroll-snap-align: start; }
}
/* On phones each story opens right under its own card */
@media (max-width: 760px) {
  /* (scoped so these win over the base two-column rules further down the file) */
  .gallery .gallery__pair, .case .case__more-list { grid-template-columns: 1fr; }
  main .section .is-orbit { --orbit-w: 50vw; --orbit-gap: 12px; --orbit-tilt: 30; --orbit-depth: 34; perspective: 620px; }
  /* Phones: Cover Flow style. The side films sit smaller and further back, tucked behind the
     chosen one (their inner rounded edges hidden), with an even softer blur */
  main .section .films.is-orbit { --orbit-w: 80vw; --orbit-tilt: 34; --orbit-depth: -120; --orbit-step: 0.6; --e1: 0.2px; --e2: 0.35px; --e3: 0.6px; --e4: 1px; --e5: 1.6px; }
  
  /* Case studies on phones ------------------------------------------------ */
  
  /* Alternatives: a swipeable row of large rectangles */
  #work .gallery__grid--row {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 84%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  #work .gallery__grid--row::-webkit-scrollbar { display: none; }
  main .gallery .gallery__grid--scroll {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  main .gallery .gallery__grid--scroll::-webkit-scrollbar { display: none; }
  main .gallery .gallery__grid--scroll .gallery__tile { flex-basis: 84%; border-radius: 10px; }
  main .gallery .gallery__grid--slides { grid-template-columns: 1fr; }
  #work .gallery__grid--row .gallery__tile { aspect-ratio: 16 / 9; scroll-snap-align: start; }
  
  /* Grids: two per row as rectangles; presentation slides one per row; square crops stay square */
  #work .gallery__grid:not(.gallery__grid--row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #work .gallery__grid:not(.gallery__grid--row) .gallery__tile { aspect-ratio: 16 / 9; }
  #work .gallery .gallery__grid--slides { grid-template-columns: 1fr; }
  #work .gallery .gallery__grid--square .gallery__tile { aspect-ratio: 1; }
  #work .gallery__teaser { justify-self: center; }
  #work .gallery__teaser .gallery__label { text-align: center; }
  
  /* Tirat Zvi: teaser under its two square alternatives */
  #work .gallery__split { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  #work .gallery__split > .gallery__label:first-child { grid-column: 1 / -1; grid-row: auto; order: 0; }
  #work .gallery__split > .gallery__tile { order: 1; }
  #work .gallery__split > .gallery__label:nth-child(2) { grid-column: 1 / -1; grid-row: auto; order: 2; margin-top: 18px; }
  #work .gallery__split > .gallery__label:nth-child(2) { text-align: center; }
  #work .gallery__split > .teaser { grid-column: 1 / -1; grid-row: auto; order: 3; width: 55%; justify-self: center; }
  .gallery__strip--stack .gallery__strip-cell.is-portrait { width: 62%; justify-self: center; }
  .gallery__strip--stack .gallery__strip-cell.is-portrait .gallery__label { text-align: center; }

  /* Three alternatives in a row are too small on a phone: one per row, as wide rectangles */
  .gallery .gallery__grid--row:not(.gallery__grid--wide) { grid-template-columns: 1fr; }
  .gallery .gallery__grid--row:not(.gallery__grid--wide) .gallery__tile { aspect-ratio: 16 / 9; }

  /* Rows of photos at their own proportions (e.g. the event): squares, two per row.
     The columns and shapes are set inline in JS, hence !important */
  .gallery__strip:not(.gallery__strip--stack) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gallery__strip:not(.gallery__strip--stack) .gallery__tile { aspect-ratio: 1 !important; }

  /* Swipe sideways, one at a time, with the next one peeking in (like the teasers) */
  .cases__row,
  .section .films {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 84%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .cases__row::-webkit-scrollbar,
  .films::-webkit-scrollbar { display: none; }
  .cases__row .case-card,
  .films .film { scroll-snap-align: start; }
  .gallery__strip--stack { grid-template-columns: 1fr !important; }
  .case-card:nth-of-type(1) { order: 1; } .case:nth-of-type(1) { order: 2; }
  .case-card:nth-of-type(2) { order: 3; } .case:nth-of-type(2) { order: 4; }
  .case-card:nth-of-type(3) { order: 5; } .case:nth-of-type(3) { order: 6; }
  .case-card:nth-of-type(4) { order: 7; } .case:nth-of-type(4) { order: 8; }
  .case-card:nth-of-type(5) { order: 9; } .case:nth-of-type(5) { order: 10; }
}

@media (min-width: 761px) {
  .cases--design.has-open .cases__row { display: contents; } /* open: the row dissolves into the grid */
  .cases:not(.cases--design) .cases__row { display: contents; } /* case studies: always three across */
}

.case-card {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 10px 10px 18px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--mist);
  transition: background .3s var(--ease);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.case-card__media {
  display: block;
  aspect-ratio: 1;
  margin-bottom: 14px;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--mist);
  transition: opacity .4s var(--ease);
}
/* --focus picks which part of the image stays in view when it's cropped to a square */
.case-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform .8s var(--ease); }
.case-card:hover .case-card__media img { transform: scale(1.02); }
.case-card__meta,
.case-card__title { padding-inline: 8px; }
.case-card__meta { color: var(--muted); font-size: var(--fs-small); }
.case-card__title {
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: underline 1px transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color .3s var(--ease);
}
.case-card[aria-expanded="true"] .case-card__title { text-decoration-color: currentColor; }
/* While one project is open, the others step back */
.cases.has-open .case-card[aria-expanded="false"] .case-card__media { opacity: .45; }
.cases.has-open .case-card[aria-expanded="false"]:hover .case-card__media { opacity: 1; }

@media (min-width: 761px) {
  .cases.has-open {
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
    grid-template-rows: repeat(var(--k), min-content) auto auto;
    gap: 12px 20px;
  }
  .cases.has-open .case-card[aria-expanded="true"] { grid-column: 1; grid-row: 1 / span var(--span); }
  .cases.has-open .case-card[aria-expanded="true"] .case-card__media { aspect-ratio: 16 / 9; margin-bottom: 16px; animation: settle .5s var(--ease); }
  .cases.has-open .case-card[aria-expanded="true"] .case-card__meta { font-size: 1rem; }
  .cases.has-open .case-card[aria-expanded="true"] .case-card__title { font-size: 1.75rem; text-decoration-color: transparent; }

  .cases.has-open .case-card[aria-expanded="false"] {
    grid-column: 2;
    grid-row: var(--row);
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 8px;
    border-radius: 16px;
  }
  .cases.has-open .case-card[aria-expanded="false"] .case-card__media { grid-row: 1 / span 2; width: 64px; margin: 0; border-radius: 10px; opacity: 1; }
  .cases.has-open .case-card[aria-expanded="false"] .case-card__meta,
  .cases.has-open .case-card[aria-expanded="false"] .case-card__title { grid-column: 2; padding-inline: 0; }
  .cases.has-open .case-card[aria-expanded="false"] .case-card__title { font-size: 1rem; }
  .cases.has-open .case-card[aria-expanded="false"]:hover { background: #e9eaec; }

  .cases.has-open .case { grid-row: var(--row); }

  /* Design & copy side cards: one line each, the two lines close together */
  .cases.has-open .case-card[aria-expanded="false"] .long { display: none; }
  .cases.has-open .case-card[aria-expanded="false"] .short { display: inline; }
  .cases.has-open .case-card[aria-expanded="false"] .case-card__meta,
  .cases.has-open .case-card[aria-expanded="false"] .case-card__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cases.has-open .case-card[aria-expanded="false"] .case-card__meta { align-self: end; }
  .cases.has-open .case-card[aria-expanded="false"] .case-card__title { align-self: start; }

  /* Case studies: the two side cards stand upright (image over text) and together
     match the height of the open card exactly */
  .cases:not(.cases--design).has-open { grid-template-rows: repeat(var(--k), minmax(0, 1fr)) auto; }
  .cases:not(.cases--design).has-open .case-card[aria-expanded="true"] { grid-row: 1 / span var(--k); }
  .cases:not(.cases--design).has-open .case { grid-row: auto; }
  .cases:not(.cases--design).has-open .case-card[aria-expanded="false"] {
    grid-template-columns: none;
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-items: stretch;
    padding: 10px 10px 14px;
    border-radius: var(--radius-card);
  }
  .cases:not(.cases--design).has-open .case-card[aria-expanded="false"] .case-card__media {
    position: relative;
    grid-row: auto;
    width: auto;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0 0 10px;
    border-radius: var(--radius-media);
  }
  .cases:not(.cases--design).has-open .case-card[aria-expanded="false"] .case-card__media img { position: absolute; inset: 0; }
  .cases:not(.cases--design).has-open .case-card[aria-expanded="false"] .case-card__meta,
  .cases:not(.cases--design).has-open .case-card[aria-expanded="false"] .case-card__title { grid-column: auto; padding-inline: 6px; align-self: auto; }
}
.case-card .short { display: none; }

.case { padding-top: 32px; border-top: 1px solid var(--line); }

/* Show less: closes the open project */
.case__less {
  margin-top: 24px;
  padding: 0.7em 1.2em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 500 0.9375rem var(--font);
  line-height: 1;
  cursor: pointer;
  transition: border-color .25s var(--ease);
}
.case__less:hover { border-color: var(--ink); }

/* End of a story: the other projects as small cards */
.case__more {
  display: grid;
  gap: 10px;
  margin-top: clamp(40px, 6vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.case__more-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.case-mini {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  background: var(--mist);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.case-mini:hover { background: #e9eaec; }
.case-mini img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.case-mini__text { display: grid; gap: 2px; }
.case-mini__title { color: var(--ink); font-size: 1.0625rem; font-weight: 500; }
/* Design & copy: the other three projects in one row, image only (name capsule on hover) */
.fan .case__more-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-mini.case-mini--image { position: relative; display: block; padding: 0; background: none; border-radius: var(--radius-media); }
.case-mini--image img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-media); transition: transform .5s var(--ease); }
.case-mini--image:hover img { transform: scale(1.02); }
.case-mini--image .case-mini__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.case-mini--image:hover .stack__tag { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
/* phones: a sideways swipe row, so each image (and its name) stays a readable size */
@media (max-width: 760px) {
  main .fan .case__more-list { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  main .fan .case__more-list::-webkit-scrollbar { display: none; }
  main .fan .case-mini--image { scroll-snap-align: start; }
}
.case:not([hidden]) { animation: settle .5s var(--ease); }


.case__text { margin-bottom: 28px; }
.case__text p { max-width: var(--measure); }
.case__meta { color: var(--muted); margin-bottom: 0.35rem; }
.case__text h3 { font-size: 1.75rem; margin-bottom: 1.2rem; }
.case__role { color: var(--muted); font-size: var(--fs-small); margin-top: 1.4rem; }

/* ---------- Gallery: one large image, then a grid of squares ---------- */

.gallery { display: grid; gap: clamp(28px, 4vw, 40px); }
.gallery__group { display: grid; gap: 10px; margin: 0; }
.gallery .gallery__label {
  margin: 0;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
}
.gallery__teaser { width: clamp(200px, 24vw, 260px); margin: 0; }
.gallery__teaser .gallery__label { margin: 0 0 10px; }
/* Computers: a teaser standing on its own in a gallery (the Wolt Lotus) sits in the middle */
@media (min-width: 761px) {
  .gallery > .gallery__teaser { justify-self: center; }
  .gallery > .gallery__teaser .gallery__label { text-align: center; }
}

.gallery__lead,
.gallery__tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--mist);
  cursor: zoom-in;
}
.gallery__lead { border-radius: var(--radius-media); }
.gallery__lead img { width: 100%; height: auto; }

/* Squares per row follow the screen: 3 on phones, up to 5 on wide screens */
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 19vw, 190px), 1fr)); gap: 12px; }
@media (min-width: 761px) {
  .gallery__grid[style*="--cols"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
}
.gallery__tile { aspect-ratio: 1; border-radius: 10px; }

/* Alternatives as squares with the teaser beside them; the 9:16 column is
   9/16 as wide as a square, so the teaser comes out exactly as tall */
.gallery__split {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr)) minmax(0, 0.5625fr);
  align-items: end;
  gap: 10px;
}
.gallery__split > .gallery__label:first-child { grid-column: 1 / -2; }
.gallery__split > .gallery__label:nth-child(2) { grid-column: -2 / -1; }
.gallery__split .teaser { margin: 0; }
.gallery__split .teaser__frame { border-radius: 10px; }


/* Items at their own proportions, side by side at one height (columns set in JS) */
.gallery__strip { display: grid; gap: 10px; align-items: end; }
.gallery__strip-label { grid-column: 1 / -1; }
.gallery__strip-cell { display: grid; gap: 10px; margin: 0; }
.gallery__strip .gallery__tile { border-radius: 10px; }
.gallery__strip .teaser { margin: 0; }
.gallery__strip .teaser__frame { border-radius: 10px; }

/* Two labeled items side by side (e.g. renewed logo + presentation) */
.gallery__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.gallery__lead video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gallery__pair .gallery__lead img { aspect-ratio: 16 / 9; object-fit: cover; }

/* Alternatives: one row; two (or one) of them as wide rectangles */
.gallery__grid--row { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.gallery__grid--wide .gallery__tile { aspect-ratio: 16 / 9; }
.gallery__grid--slides .gallery__tile { aspect-ratio: 16 / 9; }
/* Alternatives: rectangles the size of the main image, side by side, scrolled sideways */
.gallery .gallery__grid--scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 8px;
  cursor: grab;
}
.gallery .gallery__grid--scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery .gallery__grid--scroll.is-dragging .gallery__tile { pointer-events: none; }
.gallery .gallery__grid--scroll .gallery__tile {
  flex: 0 0 72%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  scroll-snap-align: start;
}
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .3s; }
.gallery__tile:hover img { transform: scale(1.04); }
.gallery__tile .play,
.gallery__lead .play { cursor: pointer; }

.play {
  position: absolute;
  left: 16px; bottom: 16px;
  padding: 0.55em 1em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font: 500 var(--fs-small) var(--font);
}

.placeholder {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 24px;
  border: 1px dashed #c9cacd;
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(0, 0, 0, .018) 12px 24px), var(--paper);
  color: var(--muted);
  font-size: var(--fs-small);
  text-align: center;
}

/* ---------- Teasers: row of vertical phones ---------- */

.reel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(200px, 24vw, 260px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: 16px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}
/* Curved, looping carousels (main.js): Video editing and Filmmaking, full window width */
.section .is-orbit {
  --orbit-w: clamp(190px, 19vw, 280px);
  --orbit-h: calc(var(--orbit-w) * 16 / 9); /* vertical teasers */
  --orbit-gap: 24px;
  --orbit-tilt: 15;
  --orbit-depth: 22; /* how much the outer cards grow: the curve of the arc */
  position: relative;
  display: block;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 0;
  height: calc(var(--orbit-h) * 1.34); /* room above and below, so the outer cards of the arc show whole */
  overflow: hidden;
  perspective: 1100px;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.section .films.is-orbit {
  --orbit-w: clamp(320px, 50vw, 760px);
  --orbit-h: calc(var(--orbit-w) * 9 / 16); /* wide films */
  --orbit-tilt: 12;
  /* a gentler blur at the sides than the teasers */
  --e1: 0.3px; --e2: 0.6px; --e3: 1.1px; --e4: 1.8px; --e5: 3px;
  height: calc(var(--orbit-h) * 1.34);
}
.section .is-orbit.is-dragging { cursor: grabbing; }
.is-orbit > .teaser {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orbit-w);
  margin: 0;
  will-change: transform;
}
.is-orbit > .teaser.is-side { cursor: pointer; }
.is-orbit > .teaser figcaption { display: none; }
/* Edge layers: each stacked layer blurs more and covers less, so the blur grows toward the sides */
.orbit__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 200;
  width: calc(50% - var(--orbit-w) / 2 - var(--orbit-gap) / 2);
  pointer-events: none;
}
.orbit__edge--left { left: 0; }
.orbit__edge--right { right: 0; }
.orbit__edge i { position: absolute; inset: 0; }
.orbit__edge i:nth-child(1) { -webkit-backdrop-filter: blur(var(--e1, 0.5px)); backdrop-filter: blur(var(--e1, 0.5px)); --from: 0%; --to: 30%; }
.orbit__edge i:nth-child(2) { -webkit-backdrop-filter: blur(var(--e2, 1px)); backdrop-filter: blur(var(--e2, 1px)); --from: 15%; --to: 45%; }
.orbit__edge i:nth-child(3) { -webkit-backdrop-filter: blur(var(--e3, 2px)); backdrop-filter: blur(var(--e3, 2px)); --from: 30%; --to: 62%; }
.orbit__edge i:nth-child(4) { -webkit-backdrop-filter: blur(var(--e4, 3.5px)); backdrop-filter: blur(var(--e4, 3.5px)); --from: 48%; --to: 80%; }
.orbit__edge i:nth-child(5) { -webkit-backdrop-filter: blur(var(--e5, 6px)); backdrop-filter: blur(var(--e5, 6px)); --from: 66%; --to: 100%; }
.orbit__edge--left i {
  -webkit-mask-image: linear-gradient(to left, transparent var(--from), #000 var(--to)), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, transparent var(--from), #000 var(--to)), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
.orbit__edge--right i {
  -webkit-mask-image: linear-gradient(to right, transparent var(--from), #000 var(--to)), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent var(--from), #000 var(--to)), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
.orbit__caption { position: relative; z-index: 2; margin-top: 14px; text-align: center; } /* pulled up under the middle card in main.js */
.orbit__title { min-height: 1.6em; margin: 0; color: var(--ink); font-size: 1.0625rem; font-weight: 500; }
.orbit__sub { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.orbit__sub:empty { display: none; }

.teaser { margin: 0; scroll-snap-align: start; }
.teaser video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.teaser figcaption { margin-top: 0.8rem; font-size: var(--fs-small); color: var(--muted); }

.teaser__frame { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--mist); }
.teaser__frame video { display: block; cursor: pointer; }
/* Cover (the client logo frame): shown while the video waits, hidden while it plays */
.teaser__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.teaser__frame.is-idle .teaser__cover { opacity: 1; }
.teaser__sound,
.teaser .teaser__full {
  position: absolute;
  bottom: 10px;
  width: 32px;
  height: 32px;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-tint-dark) center / 16px no-repeat;
  box-shadow: var(--glass-rim-dark), 0 6px 16px -8px rgba(0, 0, 0, .5);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
}
.has-refract .teaser__sound,
.has-refract .teaser .teaser__full { backdrop-filter: var(--glass-bend-sm); }
.teaser__sound {
  left: 10px;
  cursor: pointer;
  transition: background-color .25s var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='m22 9-6 6M16 9l6 6'/%3E%3C/svg%3E");
}
.has-sound .teaser__sound {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
}
.teaser .teaser__full {
  right: 10px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  transition: background-color .25s var(--ease);
}
.teaser .teaser__full:hover,
.teaser__sound:hover { background-color: rgba(22, 22, 24, .62); }

/* The sound and full-screen buttons appear only while the video plays and the mouse is on it
   (on touch screens: while it plays) */
.teaser__sound,
.teaser .teaser__full { opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), background-color .25s var(--ease); }
@media (hover: hover) {
  .teaser__frame:not(.is-idle):hover .teaser__sound,
  .teaser__frame:not(.is-idle):hover .teaser__full { opacity: 1; pointer-events: auto; }
}
@media (hover: none) {
  .teaser__frame:not(.is-idle) .teaser__sound,
  .teaser__frame:not(.is-idle) .teaser__full { opacity: 1; pointer-events: auto; }
}
.teaser__frame:focus-within .teaser__sound,
.teaser__frame:focus-within .teaser__full { opacity: 1; pointer-events: auto; }
.teaser figcaption strong { display: block; color: var(--ink); font-weight: 500; font-size: 1rem; }

/* ---------- Design & copy: tabs + vertical gallery ---------- */



/* ---------- Video production ---------- */

.films {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 20px) / 2);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.films .film { scroll-snap-align: start; }
.film { margin: 0; }
/* Films use the teaser player in a wide frame */
.teaser__frame--wide { aspect-ratio: 16 / 9; border-radius: var(--radius-media); }
.film figcaption,
.script figcaption { margin-top: 0.8rem; font-size: var(--fs-small); color: var(--muted); }
.film figcaption strong,
.script figcaption strong { display: block; color: var(--ink); font-weight: 500; font-size: 1rem; }


/* ---------- Screenwriting: a bookshelf ----------
   Flat colours, real depth: each book is a 3D box (cover in front, spine on its left side)
   that turns as one piece. Closed, it is turned 90deg so its spine faces you; open, it turns
   back almost to face you, keeping a sliver of spine on the left. */

.shelf {
  --w: 236px;                         /* cover width */
  --h: calc(var(--w) * 1000 / 692);   /* cover height */
  --t: calc(var(--w) * 0.25);         /* thickness = spine width */
  --open: 16deg;
  --swing: .9s cubic-bezier(.22, 1, .36, 1);
  padding-top: 16px;
}
.shelf__books {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(var(--t) * 0.32);
  height: var(--h);
}
.book {
  position: relative;
  flex: none;
  width: var(--t);
  height: var(--h);
  perspective: 2400px; /* far away, so it stays flat-looking */
  transition: width var(--swing);
}
.book.is-open { width: calc(var(--w) * 0.962 + var(--t) * 0.276 + 4px); }

.book__box {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--w);
  height: 100%;
  margin-left: calc(var(--w) / -2);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--w) / -2)) rotateY(90deg);
  transition: transform var(--swing);
}
.book.is-open .book__box { transform: translateZ(calc(var(--t) / -2)) rotateY(var(--open)); }

.book__cover,
.book__spine {
  position: absolute;
  top: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.book__cover {
  left: 0;
  width: var(--w);
  overflow: hidden;
  background: var(--mist);
  transform: translateZ(calc(var(--t) / 2));
  cursor: pointer;
}
.book:not(.is-open) .book__cover { pointer-events: none; }
.book__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.book__spine {
  left: calc((var(--w) - var(--t)) / 2);
  width: var(--t);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: var(--spine);
  color: var(--spine-ink);
  font: 600 calc(var(--t) * 0.27) / 1 var(--font);
  letter-spacing: 0.01em;
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  cursor: pointer;
}
.book__spine span { padding-top: calc(var(--t) * 0.34); writing-mode: vertical-rl; white-space: nowrap; }

.shelf__caption {
  max-width: 34rem;
  min-height: 4.8em;
  margin: 28px auto 0;
  color: var(--muted);
  font-size: var(--fs-small);
  text-align: center;
}
.shelf__text { white-space: pre-line; }
.shelf__title { display: block; margin-bottom: 0.2rem; color: var(--ink); font-size: 1.0625rem; font-weight: 500; }


@media (max-width: 760px) {
  .shelf { --w: min(180px, 48vw); }
}
@media (prefers-reduced-motion: reduce) {
  .shelf { --swing: .01s linear; }
}

/* ---------- Case studies: three cards fanned out, Wolt in the middle ----------
   Closed: a fan. Hovering a card lifts it to the front like a card drawn from a hand (its
   layer rises gradually, so nothing snaps over the others). Open: the chosen card grows to
   full size with the other two small in a column beside it; the browser morphs between the
   two layouts (View Transitions, main.js). */
.stack { --w: clamp(240px, 35vw, 520px); } /* about as big as the Design & copy fan below */
/* A gentle arc: Wolt in the middle, slightly higher and in front, Tirat Zvi and Rafael spread out on either side.
   Each card sits on the centre of the row and is shifted by a share of its own size. */
.stack__row {
  position: relative;
  height: calc(var(--w) * 0.75 * 1.42);
  margin: 0 0 8px;
}
.stack .stack__card {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: var(--w);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: none;
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .35); /* just a touch of shadow */
  transition: box-shadow .45s var(--ease);
  cursor: pointer;
}
.stack .stack__card:nth-child(1) { transform: translate(-50%, -50%) translate(-82%, 9%) rotate(-5deg); z-index: 1; }
.stack .stack__card:nth-child(2) { transform: translate(-50%, -50%) translate(0%, -9%) rotate(1deg); z-index: 3; }
.stack .stack__card:nth-child(3) { transform: translate(-50%, -50%) translate(82%, 9%) rotate(5deg); z-index: 2; }
.stack .stack__card .case-card__media { aspect-ratio: 4 / 3; margin: 0; border-radius: inherit; }
.stack .stack__card:hover .case-card__media img { transform: none; }
.stack .stack__card .case-card__title,
.stack .stack__card .case-card__meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Hover is animated in main.js (a card is drawn out of the pile and laid on top) */
.stack:not(.has-open) .stack__card:hover { box-shadow: 0 18px 32px -18px rgba(0, 0, 0, .4); }
.stack:not(.has-open) .stack__card:focus-visible { z-index: 5; }

/* Open: the chosen card large, the other two small in a column on the right */
.stack.has-open .stack__row {
  height: auto;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
  grid-template-rows: 1fr 1fr;
  gap: 12px 20px;
  align-items: stretch;
  padding: 0 0 8px;
}
.stack.has-open .stack__card { position: relative; left: auto; top: auto; width: auto; margin: 0; transform: none; z-index: auto; border-radius: 20px; }
.stack.has-open .stack__card[aria-expanded="true"] { grid-column: 1; grid-row: 1 / span 2; }
.stack.has-open .stack__card[aria-expanded="true"] .case-card__media { aspect-ratio: 16 / 9; }
.stack.has-open .stack__card[aria-expanded="false"] { grid-column: 2; }
.stack.has-open .stack__card[aria-expanded="false"] .case-card__media { height: 100%; aspect-ratio: auto; }
.stack.has-open .stack__card[aria-expanded="false"]:hover { box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .4); }
/* the morph between the two layouts: the cards crop (never stretch) while they change shape */
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(card-tirat), ::view-transition-new(card-tirat),
::view-transition-old(card-wolt), ::view-transition-new(card-wolt),
::view-transition-old(card-rafael), ::view-transition-new(card-rafael) { width: 100%; height: 100%; object-fit: cover; }

/* The client's name in a light glass capsule, floating just above the pointer (main.js) */
.stack__tag {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 100%);
  z-index: 2;
  padding: 0.5em 1.05em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  font: 500 0.9375rem/1 var(--font);
  white-space: nowrap;
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 24px -12px rgba(0, 0, 0, .35);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 8px)) scale(.94);
  transition: opacity .2s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.has-refract .stack__tag { backdrop-filter: var(--glass-bend-sm); }
.stack .stack__card:hover .stack__tag { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
/* Touch screens have no hover: the names sit at the bottom of each card, always shown */
@media (hover: none) {
  .stack .stack__card .stack__tag,
  .stack .stack__card:hover .stack__tag,
  .case-mini--image .stack__tag,
  .case-mini--image:hover .stack__tag { left: 50%; top: auto; bottom: 10px; opacity: 1; transform: translateX(-50%); }
}
@media (max-width: 760px) {
  /* phones: one above the other, large, each overlapping the next a little; Wolt first and on top */
  .stack { --w: 82vw; }
  .stack:not(.has-open) .stack__row { height: calc(var(--w) * 0.75 * 2.8); }
  .stack:not(.has-open) .stack__card:nth-child(2) { transform: translate(-50%, -50%) translate(-3%, -88%) rotate(-2deg); z-index: 3; }
  .stack:not(.has-open) .stack__card:nth-child(1) { transform: translate(-50%, -50%) translate(3%, 0%) rotate(2deg); z-index: 2; }
  .stack:not(.has-open) .stack__card:nth-child(3) { transform: translate(-50%, -50%) translate(-3%, 88%) rotate(-2deg); z-index: 1; }
  .stack .stack__card { border-radius: 18px; }
  .stack__tag { font-size: 0.8125rem; padding: 0.45em 0.85em; }
  /* open on phones: the chosen card full width, the other two side by side under it */
  .stack.has-open .stack__row { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 10px; }
  .stack.has-open .stack__card[aria-expanded="true"] { grid-column: 1 / -1; grid-row: 1; }
  .stack.has-open .stack__card[aria-expanded="false"] { grid-column: auto; grid-row: 2; }
  .stack.has-open .stack__card[aria-expanded="false"] .case-card__media { aspect-ratio: 16 / 9; height: auto; }
}

/* ---------- Design & copy: a fan of projects ---------- */
/* The middle card is as large as the alternatives in the opened story (72% of the content width) */
.fan { --card: calc((min(100vw, var(--wrap)) - 2 * var(--gutter)) * 0.72); }
.fan__stage {
  position: relative;
  height: calc(var(--card) * 0.5625 + 16px + var(--card) * 0.2); /* the middle card, plus room for the lower side cards */
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  /* the side cards fade out softly at the bottom instead of being cut */
  -webkit-mask-image: linear-gradient(#000 calc(100% - var(--card) * 0.17), transparent);
          mask-image: linear-gradient(#000 calc(100% - var(--card) * 0.17), transparent);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.fan__stage:focus-visible { outline-offset: -4px; }
.fan__stage { cursor: grab; }
.fan__stage.is-dragging { cursor: grabbing; }
.fan__stage.is-dragging .fan__card { pointer-events: none; }
.fan .fan__card {
  position: absolute;
  top: 16px;
  left: 50%;
  display: block;
  width: var(--card);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: none;
  transform-origin: 50% 100%;
  will-change: transform;
  cursor: pointer;
}
.fan .fan__card .case-card__media {
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 18px 34px -22px rgba(0, 0, 0, .45);
  opacity: 1;
}
.fan .fan__card:hover .case-card__media img { transform: none; }
.fan .fan__card .case-card__title,
.fan .fan__card .case-card__meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fan__caption { position: relative; z-index: 20; margin: calc(var(--card) * -0.2 + 12px) 0 0; text-align: center; }
.fan__title { display: block; color: var(--ink); font-size: 1.125rem; font-weight: 500; }
.fan__sub { display: block; margin-top: 0.15rem; color: var(--muted); font-size: var(--fs-small); }
.fan .case { margin-top: 40px; }
@media (max-width: 760px) {
  .fan { --card: 76vw; }
}

/* ---------- Contact + footer ---------- */


/* The email is ~10.4em wide in Helvetica: it gets the largest size that still fits on one
   line, and the heading above keeps the desktop ratio to it (about 0.45) */
.contact {
  --mail: clamp(1.25rem, calc((100vw - 2 * var(--gutter)) / 10.6), 2rem);
  padding-bottom: clamp(80px, 10vw, 140px);
}
.contact h2 { font-size: clamp(1.125rem, calc(var(--mail) * 0.5), 1.375rem); margin-bottom: 1rem; }
/* The email, drawn as an iOS text selection: blue highlight, a grip at each end */
.contact__mail {
  position: relative;
  display: inline-block;
  margin: 0.35rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--mail);
  cursor: copy;
}
.sel {
  position: relative;
  display: inline-block;
  padding: 0.04em 0.14em 0.08em;
  background: #5b9bf3;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  white-space: nowrap;
}
.sel__grip { position: absolute; width: 2px; height: calc(100% + 0.12em); background: #2f7cf6; }
.sel__grip::before { content: ""; position: absolute; left: 50%; width: 0.36em; height: 0.36em; border-radius: 50%; background: #2f7cf6; transform: translateX(-50%); }
.sel__grip--start { left: -1px; bottom: 0; }
.sel__grip--start::before { top: -0.3em; }
.sel__grip--end { right: -1px; top: 0; }
.sel__grip--end::before { bottom: -0.3em; }
/* A light glass bubble that floats just above the pointer (main.js sets --x / --y) */
.copy-tip {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 0px);
  z-index: 5;
  padding: 0.55em 1.15em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  font: 500 0.9375rem/1 var(--font);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(0, 0, 0, .06), 0 14px 30px -14px rgba(0, 0, 0, .4);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px)) scale(.94);
  transition: opacity .2s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.has-refract .copy-tip { backdrop-filter: var(--glass-bend-sm); }
.contact__mail:hover .copy-tip,
.contact__mail:focus-visible .copy-tip,
.contact__mail.is-copied .copy-tip { opacity: 1; transform: translate(-50%, calc(-100% - 16px)) scale(1); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact__list { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }
.contact__list a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
/* Taller tap area on touch screens, same look */
@media (hover: none) {
  .contact__list a, .foot a { position: relative; }
  .contact__list a::before, .foot a::before { content: ""; position: absolute; inset: -12px -8px; }
  .contact__list { row-gap: 1.4rem; }
}
.contact__list a:hover { border-color: var(--ink); }
.contact__note { color: var(--text); }

.foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 28px var(--gutter) 40px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--fs-small);
  border-top: 1px solid var(--line);
}
.foot a { text-decoration: none; }

/* ---------- Viewer (images, videos, scripts) ---------- */

.viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  --stage-h: calc(100dvh - 110px);
}
.viewer::backdrop { background: rgba(242, 243, 244, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.viewer[open] { display: grid; grid-template-rows: auto 1fr; animation: fade .35s var(--ease); }
@keyframes fade { from { opacity: 0; } }

.viewer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--gutter);
  color: var(--muted);
  font-size: var(--fs-small);
}
.viewer__close {
  font: 500 var(--fs-small) var(--font);
  padding: 0.55em 1.1em;
  border-radius: 999px;
  border: 0;
  background: rgba(22, 22, 24, .7);
  color: var(--paper);
  box-shadow: var(--glass-rim-dark), var(--glass-drop);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  cursor: pointer;
}

.viewer__stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 clamp(16px, 7vw, 96px) 24px;
}
.viewer__stage > * { animation: settle .45s var(--ease); }
@keyframes settle { from { opacity: 0; transform: scale(.985); } }

.viewer__stage img {
  max-width: 100%;
  max-height: var(--stage-h);
  border-radius: var(--radius-media);
  object-fit: contain;
}
/* Videos keep their own shape (set from the item) before the file loads */
.viewer__stage video {
  height: var(--stage-h);
  max-width: 100%;
  width: auto;
  border-radius: var(--radius-media);
  background: #000;
}
.viewer__stage video.is-wide { width: min(100%, var(--stage-h) * 16 / 9); height: auto; }
.viewer__stage iframe {
  width: min(100%, 860px);
  height: var(--stage-h);
  border: 0;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .4);
}

/* A document as page images, scrolled inside the viewer */
.viewer__doc {
  width: min(100%, 860px);
  height: var(--stage-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .4);
}
.viewer__sheet { position: relative; }
.viewer__stage .viewer__sheet img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: 0;
}
.viewer__sheet img + img { border-top: 1px solid var(--line); }
/* From the blur down; the capsule stays in view while the blurred pages scroll by */
.viewer__lock { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 72px; }
.viewer__cta {
  position: sticky;
  top: 40%;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  background: rgba(22, 22, 24, .62);
  color: var(--paper);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--glass-rim-dark), 0 14px 30px -14px rgba(0, 0, 0, .55);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  transition: transform .3s var(--ease);
}
.viewer__cta:hover { transform: translateY(-2px); }
.has-refract .viewer__cta { backdrop-filter: var(--glass-bend); }

.viewer__stage iframe.is-youtube {
  width: min(100%, var(--stage-h) * 16 / 9);
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  background: #000;
  box-shadow: none;
}

.viewer__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--glass-tint);
  color: var(--ink);
  font: 400 1.75rem/1 var(--font);
  padding-bottom: 4px;
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(0, 0, 0, .06), var(--glass-drop);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.viewer__nav:hover { background-color: rgba(255, 255, 255, .6); }
.has-refract .viewer__nav,
.has-refract .viewer__close { backdrop-filter: var(--glass-bend); }
.viewer__nav--prev { left: clamp(8px, 2vw, 28px); }
.viewer__nav--next { right: clamp(8px, 2vw, 28px); }
.viewer__nav[hidden] { display: none; }

/* ---------- Reveal (one gentle settle per image) ---------- */

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

.js .about { animation: arrive .9s var(--ease) both; }
@keyframes arrive { from { opacity: 0; } }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  :root { --nav-h: 68px; }
  .nav { padding: 0 20px; }
  .nav__toggle {
    display: grid;
    gap: 6px;
    align-content: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-right: -9px;
    padding: 8px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav__toggle span { display: block; width: 26px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .nav__links {
    position: absolute;
    top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 20px;
    background: var(--mist);
    border-radius: var(--radius-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: 12px 0; font-size: 1.125rem; }
  .nav__links a::after { display: none; }

}

@media (max-width: 520px) {
  .about__head { gap: 1.1rem; }
  .avatar { width: 96px; height: 96px; font-size: 1.2rem; }
  .about__name { font-size: 1.5rem; }
  .nav__name { font-size: 1.25rem; }
  .gallery__group, .gallery__grid { gap: 6px; }
  .gallery__split { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .gallery__split > .gallery__label:first-child { grid-column: 1 / -1; order: 0; }
  .gallery__split > .gallery__tile { order: 1; }
  .gallery__split > .gallery__label:nth-child(2) { grid-column: 1 / -1; order: 2; margin-top: 18px; }
  .gallery__split > .teaser { grid-column: 1 / -1; order: 3; width: 55%; }
  .gallery__tile { border-radius: 6px; }
  .gallery__tile .play { left: 6px; bottom: 6px; font-size: 0.75rem; padding: 0.4em 0.7em; }
  .viewer { --stage-h: calc(100dvh - 170px); }
  .viewer__stage { padding: 0 8px 76px; }
  .viewer__nav { top: auto; bottom: 18px; translate: none; width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}


/* ---------- Opening: "Hi, I'm Or" typed in white on black, a bulb lights up, and its light
   opens the page (main.js). The bulb stays lit beside the greeting. ---------- */
.about__hello .bulb { display: inline-block; height: 0.95em; width: auto; margin-left: 0.1em; vertical-align: -0.14em; }
html.intro-pending body { overflow: hidden; }
/* (absolute, not fixed: newer Safari tints its toolbar from fixed elements at the top of the screen and
   kept the black after the opening; the page is at the top and locked while this shows) */
html.intro-pending::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; min-height: 100lvh; z-index: 9998; background: #000; } /* until the opening builds itself */
html.intro-on body { overflow: hidden; }
html.intro-on .about { animation: none; }
.intro { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; min-height: 100lvh; z-index: 9999; background: #000; cursor: pointer; }
.intro__line { position: absolute; margin: 0; color: #fff; white-space: pre; }
.intro__line span { opacity: 0; }
.intro__line span.is-in { opacity: 1; }
.intro__bulb { position: absolute; opacity: 0; }
.intro__bulb img { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__bulb .warm, .intro__bulb .on { opacity: 0; }
.intro__glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 900%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 140, .5), rgba(255, 205, 110, .16) 38%, transparent 68%);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}