/* ==========================================================================
   alfred. — About (Figma: About - Desktop, 1440 × 6672)
   A vertical page in the homepage's frame and unit: 1 Figma px = 1 --u = 1 homepage unit
   (about.js sets --u/--hu from the window, without the scrollbar). Off White inside, Rich Black frame.
   ========================================================================== */

.page-about {
  --hu: min(100vw / 1440, 100vh / 1024);
  --u: calc(var(--hu) * .7);   /* content at 70%, like the other pages (user: the same or close across board) */
  --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(--black);   /* Figma: the About frame is Rich Black */
  --win-top: calc(var(--edge) + var(--navh) + var(--pad));
  --win-h: calc(100vh - var(--win-top) - var(--edge) - var(--pad));
  background: var(--cream);
  color: var(--black);
  overflow-x: hidden;
}
html:has(.page-about) { background: var(--frame); }

/* ---------- The homepage's frame (same rules as index.html / contact.html) ---------- */
.page-about .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;
}
.ab-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-about .nav { --u: var(--hu); top: var(--edge); height: calc(var(--navh) + var(--pad)); background: var(--frame); color: var(--cream); }
.page-about .nav__lang-menu { background: var(--frame); }

/* the page: the Figma frame's width, centred; it starts under the window's top (Figma's content starts 96 down, under its nav) */
.ab { position: relative; width: calc(1440 * var(--u)); margin: 0 auto; padding: calc(var(--win-top) - 96 * var(--u)) 0 calc(var(--edge) + var(--pad)); }

/* ---------- HERO (119, 262 · 1185): Heading Wide Super 96/75, Alfred Red, centred ---------- */
.ab-hero {
  margin: calc(262 * var(--u)) auto 0;
  width: calc(1185 * var(--u));
  /* thin, small letters (like "we're about"); only BIG TEAM, BIG IMPACT and GLOBAL SCALE fat (user) */
  /* the same size as the culture text below ("this is a few sentences…": 64/75) (user) */
  font-size: calc(64 * var(--u));
  line-height: calc(75 * var(--u));
  font-weight: 400;
  text-transform: none;
  text-align: center;
  color: var(--black);
}
.ab-hero b { font-family: var(--font-wide); font-weight: 900; text-transform: uppercase; color: var(--red); white-space: nowrap; }   /* each pair stays on one line */

/* ---------- Section 1: the rail (801 · 717 tall), cut off hard at the ends of its bar (1274 wide), like the chat ---------- */
.ab-rail-wrap { position: relative; width: calc(1274 * var(--u)); margin: calc(350 * var(--u)) auto 0; }   /* after the text now (user: swapped with the chat) */
.ab-rail {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
  height: calc(717 * var(--u) + 60 * var(--u));   /* room for a photo to pop up without being cut */
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
}
.ab-rail::-webkit-scrollbar { display: none; }
.ab-rail.is-dragging { cursor: grabbing; }
.ab-card { flex: none; position: relative; border: 0; padding: 0; border-radius: calc(16 * var(--u)); background: none; }
/* the black boards: Rich Black, 787 × 649, title Wide Black 40/75 red, text 24/25 Off White; they never pop */
.ab-card--dark {
  width: calc(787 * var(--u));
  height: calc(649 * var(--u));
  padding: calc(69 * var(--u)) calc(78 * var(--u)) 0;
  background: var(--black);
  color: var(--cream);
  font-size: calc(24 * var(--u));
  line-height: calc(25 * var(--u));
}
.ab-card--dark h2 { font-family: var(--font-wide); font-weight: 800; font-size: calc(40 * var(--u)); line-height: calc(75 * var(--u)); text-transform: uppercase; color: var(--red); margin-bottom: calc(80 * var(--u)); }
.ab-card--dark p + p { margin-top: calc(25 * var(--u)); }
/* Button / Contact in the board (178, 499 · 471 × 82): Alfred Red, Off White outline and type */
.ab-card--dark .btn { position: absolute; left: calc(178 * var(--u)); bottom: calc(68 * var(--u)); width: calc(471 * var(--u)); }
/* the photos: 581 × 703 and 537 × 649, straight (user) */
.ab-card--photo { cursor: pointer; will-change: transform; }
.ab-card--photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }
.ab-card--tall { width: calc(581 * var(--u)); height: calc(703 * var(--u)); }
.ab-card--photo:not(.ab-card--tall) { width: calc(537 * var(--u)); height: calc(649 * var(--u)); }

/* the bar under the rail (Figma: 1274 long, its thumb 165): a pill like the chat's bar (user), thick enough to grab */
.ab-bar { position: relative; width: calc(1274 * var(--u)); height: max(8px, calc(12 * var(--u))); margin: calc(8 * var(--u)) auto 0; background: rgba(35, 35, 35, .2); border-radius: 99px; cursor: pointer; }
.ab-bar span { position: absolute; top: 0; bottom: 0; left: 0; width: calc(165 * var(--u)); border-radius: inherit; background: var(--black); cursor: grab; touch-action: none; }

/* ---------- Section 2 (148, 1763 · 1145): Regular 64/75, "alfred." Wide Black red ---------- */
.ab-text { text-transform: none; margin: calc(207 * var(--u)) auto 0; width: calc(1145 * var(--u)); font-size: calc(64 * var(--u)); line-height: calc(75 * var(--u)); text-align: center; color: #000; }
/* alfred. starts in the same thin font, and turns fat and red once you scroll past it (user) */
.ab-kw { position: relative; display: inline-block; vertical-align: top; }
.ab-kw__bold { text-transform: none;   /* alfred. stays as it is written (user) */ position: absolute; left: 0; top: 0; font-family: var(--font-wide); font-weight: 800; color: var(--red); white-space: nowrap; opacity: 0; }

/* ---------- Sections 3 + 4: the group chat, one window tall ---------- */
.ab-chat { position: relative; margin-top: calc(275 * var(--u));   /* right after the hero now */ height: min(var(--win-h), calc(820 * var(--u))); }
.ab-chat__head { z-index: 2; position: absolute; left: calc(124 * var(--u)); top: 0; width: calc(565 * var(--u)); }
.ab-chat__title { position: relative; z-index: 1; font-family: var(--font-wide); font-weight: 900; font-size: calc(96 * var(--u)); line-height: calc(75 * var(--u)); text-transform: uppercase; color: var(--red); }
.ab-chat__dot { z-index: 2; cursor: pointer; will-change: transform; position: absolute; left: calc(441 * var(--u)); top: calc(182 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #5fbc01; }
.ab-chat__sub { margin: calc(52 * var(--u)) 0 0 calc(9 * var(--u));   /* Figma: 47 from the foot of CHAT to the top of ALFREDO'S */ font-weight: 500; font-size: calc(24 * 1.4 * var(--u)); line-height: calc(25 * 1.4 * var(--u)); text-transform: none; color: #000; }   /* 40% larger (user) */
/* the chat: its own scroller (only while the pointer is over it); messages are cut off hard at its top edge,
   which is level with the top of THE GROUP CHAT, so they never pass it */
.ab-chat__view {
  position: absolute;
  left: calc(740 * var(--u));
  width: calc(580 * var(--u));
  top: 0;
  bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.ab-chat__view::-webkit-scrollbar { display: none; }
/* Figma's positions, relative to the first message; the list ends right under the last message, no empty space */
.ab-chat__list { position: relative; padding: calc(40 * var(--u)) 0 calc(20 * var(--u)) calc(39 * var(--u)); }
.ab-msg { position: absolute; left: calc((var(--x) - 740) * var(--u)); top: calc(40 * var(--u) + var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.ab-msg img { display: block; width: 100%; height: 100%; }
/* the sender's avatar is a button laid over the little face in the screenshot */
.ab-msg__face { position: absolute; width: 9%; aspect-ratio: 1; translate: -50% -50%; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; }
.ab-msg__face:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* who sent it: a 128 face, and to its left the black pill (580 × 152, radius 76): name Super Italic 48/52, role 24/25 */
.ab-who { position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none; }
.ab-who__face { position: absolute; width: calc(128 * var(--u)); height: calc(128 * var(--u)); margin: calc(-64 * var(--u)) 0 0 calc(-64 * var(--u));   /* centred by margins: works in every phone browser */ border-radius: 50%; background: #ddd center / cover no-repeat; box-shadow: 0 0 0 calc(4 * var(--u)) var(--cream); opacity: 0; }
.ab-who__pill {
  position: absolute;
  right: calc(-80 * var(--u));   /* Figma: the pill ends 80 right of the face centre */
  top: calc(-76 * var(--u));
  min-width: calc(580 * var(--u));   /* grows to fit a longer name */
  white-space: nowrap;
  height: calc(152 * var(--u));
  /* name and role centred top to bottom, the same space above as below, a clear gap between */
  padding: 0 calc(160 * var(--u)) 0 calc(63 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(14 * var(--u));
  border-radius: calc(76 * var(--u));
  background: var(--black);
  color: #fff;
  clip-path: inset(0 0 0 100% round calc(76 * var(--u)));
}
.ab-who__pill strong { text-transform: uppercase; font-weight: 900; font-style: italic; font-size: calc(48 * var(--u)); line-height: 1; }
.ab-who__pill span { font-size: calc(24 * var(--u)); line-height: 1; }

/* the chat's progress bar (1347 · 12 wide, radius 12) */
.ab-chat__bar { position: absolute; left: calc(1347 * var(--u)); top: calc(19 * var(--u)); bottom: 0; width: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(35, 35, 35, .2); cursor: pointer; }
.ab-chat__bar span { position: absolute; left: 0; right: 0; top: 0; height: 20%; border-radius: inherit; background: var(--black); cursor: grab; touch-action: none; }

/* ---------- Bottom: SLIDE IN OUR DM'S, centred, just under the rail's bar ---------- */
.ab-end { position: relative; height: calc((107 + 79) * var(--u)); margin-top: calc(110 * var(--u)); }
/* 30% bigger than Figma's (user) */
.ab-dm { position: absolute; left: calc(50% - 394 * var(--u)); top: 0; width: calc(788 * var(--u)); height: calc(107 * var(--u)); font-size: calc(52 * var(--u)); border-width: calc(3 * var(--u)); }

/* ---------- A photo, opened: a grey veil over the window, the photo as big as fits ---------- */
.ab-pop { position: fixed; z-index: 45; top: var(--win-top); left: calc(var(--edge) + var(--pad)); right: calc(var(--edge) + var(--pad)); bottom: calc(var(--edge) + var(--pad)); display: grid; place-items: center; pointer-events: none; visibility: hidden; }
.ab-pop.is-open { pointer-events: auto; visibility: visible; }
.ab-pop::before { content: ""; position: absolute; inset: 0; background: rgba(200, 200, 194, .72); backdrop-filter: grayscale(1); opacity: var(--veil, 0); }
.ab-pop__media { position: relative; z-index: 1; border-radius: calc(16 * var(--u)); overflow: hidden; will-change: transform; }
.ab-pop__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Portrait (phones, upright tablets): same pieces, stacked, sized from the width ---------- */
@media (orientation: portrait) {
  .page-about { --u: calc(100vw / 600); }
  .ab { width: auto; }
  .ab-hero { width: auto; margin: calc(120 * var(--u)) calc(40 * var(--u)) 0; font-size: calc(36 * var(--u)); line-height: calc(44 * var(--u)); }   /* = .ab-text on phones */
  .ab-rail-wrap { width: auto; margin: calc(120 * var(--u)) calc(40 * var(--u)) 0; }
  .ab-rail { --u: calc(100vw / 1100); }
  .ab-bar { --u: calc(100vw / 600); width: 100%; }
  .ab-text { width: auto; margin: calc(120 * var(--u)) calc(40 * var(--u)) 0; font-size: calc(36 * var(--u)); line-height: calc(44 * var(--u)); }
  .ab-chat { margin-top: calc(160 * var(--u)); height: auto; }
  .ab-chat__head { position: relative; left: calc(40 * var(--u)); width: calc(400 * var(--u)); }
  .ab-chat__title { font-size: calc(64 * var(--u)); line-height: calc(56 * var(--u)); }
  .ab-chat__dot { left: calc(290 * var(--u)); top: calc(120 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
  .ab-chat__view { position: relative; left: auto; width: calc(560 * var(--u)); margin: calc(40 * var(--u)) auto 0; height: calc(var(--win-h) * .8); }
  .ab-chat__list { --u: calc(100vw / 640); }
  .ab-chat__list { padding-left: calc(12 * var(--u)); }
  .ab-chat__bar { left: auto; right: calc(10 * 100vw / 600); top: auto; bottom: 0; height: calc(var(--win-h) * .8); }
  .ab-end { height: calc(56 * var(--u) + 60 * var(--u)); margin-top: calc(60 * var(--u)); }
  .ab-dm { left: calc(50% - 160 * var(--u)); right: auto; top: 0; bottom: auto; width: calc(320 * var(--u)); font-size: calc(22 * var(--u)); height: calc(56 * var(--u)); }
}

/* ---------- The group chat game (about.js initGame) ---------- */
.ab-chat__sub { transform-origin: 50% 50%; }
.ab-game { position: absolute; z-index: 4; pointer-events: none; }
.is-playing .ab-game { pointer-events: auto; cursor: none; }
.is-game-paused .ab-game { pointer-events: none; cursor: auto; }   /* paused: the page works as normal */
.ab-game__bar { position: absolute; left: 0; height: calc(18 * var(--u)); border-radius: 99px; background: var(--red); opacity: 0; transform-origin: 50% 100%; }
.ab-game__ball { position: absolute; left: 0; top: 0; border-radius: 50%; background: #5fbc01; opacity: 0; }
.is-playing .ab-game__ball { opacity: 1; }
.ab-game__how { position: absolute; left: 0; right: 0; bottom: calc(40 * var(--u)); text-align: center; font-size: calc(22 * var(--u)); text-transform: none; opacity: 0; }
.ab-game__end { position: absolute; left: 0; right: 0; top: 52%; text-align: center; font-family: var(--font-wide); font-weight: 900; font-size: calc(72 * var(--u)); line-height: 1; text-transform: uppercase; color: var(--black); }
.ab-brick { display: inline-block; }
/* pause, score and lives: plain, in Rich Black, just above the play area on the left */
.ab-hud { position: absolute; z-index: 5; display: none; align-items: center; gap: calc(22 * var(--u)); color: var(--black); }
.is-playing .ab-hud { display: flex; }
.ab-hud__pause { display: flex; gap: calc(5 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--black); cursor: pointer; }
.ab-hud__pause i { width: calc(5 * var(--u)); height: calc(14 * var(--u)); background: var(--cream); border-radius: 2px; }
.ab-hud.is-paused .ab-hud__pause i:first-child { width: 0; height: 0; background: none; border-style: solid; border-width: calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(13 * var(--u)); border-color: transparent transparent transparent var(--cream); margin-left: calc(3 * var(--u)); }
.ab-hud.is-paused .ab-hud__pause i:last-child { display: none; }
.ab-hud__score { font-family: var(--font-wide); font-weight: 900; font-size: calc(30 * var(--u)); color: var(--black); }
.ab-hud__lives { display: flex; gap: calc(8 * var(--u)); }
.ab-hud__lives i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: var(--black); transition: opacity .3s, transform .4s var(--ease-pop); }
.ab-hud__lives i.is-lost { opacity: .2; transform: scale(.6); }


/* letter bricks: each hit wears them a little more (--crack 0..1): rougher edges, lighter; no crack lines (user) */
.ab-chat__title .char, .ab-brick { position: relative; }
.is-cracked { opacity: calc(1 - var(--crack) * .35); filter: url(#ab-crumble); }
.ab-crumb { position: absolute; left: 0; top: 0; border-radius: 2px; pointer-events: none; }

/* ---------- The game on phones and upright tablets (user, 2026-11-04) ----------
   The game opens up its own room under THE GROUP CHAT (the title and alfredo's are the bricks, the bar
   at the foot of that room); the chat stays where it is, underneath. Pause, score, lives and an X to quit
   sit in one row above it, all on one centre line. */
.ab-hud__quit { display: none; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .page-about .ab { padding-left: 10px; padding-right: 10px; }
  .ab-chat__head { left: auto; width: calc(400 * var(--u)); margin: 0 auto; }   /* the title block centred, like everything on phones */
  .ab-chat.is-arena .ab-chat__head { padding-top: 24px; }
  .is-arena .ab-game { border-radius: 22px; background: rgba(35, 35, 35, .05); }   /* the arena: one rounded box around everything, the bar and hint included */   /* its height: about.js, to fit the screen */
  .ab-hero { margin-top: calc(200 * var(--u)) !important; }
  .is-arena .ab-game__how { z-index: 1; }   /* the opening line further from the top (user) */
  .is-arena.is-playing .ab-game { touch-action: none; }
  .is-arena.is-game-paused .ab-game { touch-action: auto; }
  .is-arena { -webkit-user-select: none; user-select: none; }
  .is-arena .ab-game__bar { height: 14px; }
  .is-arena .ab-game__how { bottom: 16px; font-size: 15px; padding: 0 20px; }
  .is-arena .ab-game__end { top: 60%; font-size: 11vw; }
  .ab-hud { gap: 14px; height: 40px; align-items: center; }
  .ab-hud > * { flex: none; }
  .ab-hud__pause, .ab-hud__quit { width: 40px; height: 40px; padding: 0; gap: 5px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--black); cursor: pointer; }
  .ab-hud__pause i { width: 5px; height: 14px; }
  .ab-hud__score { display: flex; align-items: center; height: 40px; font-size: 24px; line-height: 1; }
  .ab-hud__lives { display: flex; align-items: center; height: 40px; gap: 7px; }
  .ab-hud__lives i { width: 12px; height: 12px; }
  .is-arena .ab-hud__quit { display: flex; position: relative; margin-left: auto; }
  .ab-hud__quit i { position: absolute; width: 16px; height: 2.5px; border-radius: 2px; background: var(--cream); transform: rotate(45deg); }
  .ab-hud__quit i + i { transform: rotate(-45deg); }
}

/* phones: who's who opens to the right of the avatar, sized for the phone, the name and role
   left-aligned in the pill right after the big face, all on screen (user) */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .ab-who { --u: calc(100vw / 760); z-index: 6; }
  .ab-who.is-flip .ab-who__pill { right: auto; left: calc(-80 * var(--u)); min-width: 0; width: max-content; max-width: none; padding: 0 calc(56 * var(--u)) 0 calc(160 * var(--u)); clip-path: inset(0 100% 0 0 round calc(76 * var(--u))); }
  .ab-who.is-flip .ab-who__face { z-index: 1; }
  .ab-who__pill strong { font-size: calc(46 * var(--u)); }
  .ab-who__pill span { font-size: calc(28 * var(--u)); }
}

/* who's who: drawn on its own layer, so the face growing and the pill opening stay smooth on phones */
.ab-who__face, .ab-who__pill { will-change: transform, clip-path; backface-visibility: hidden; }

/* the face always sits over the pill, never under it */
.ab-who__face { z-index: 2; }
.ab-who__pill { z-index: 1; }

/* the text sits evenly between the chat and the photo strip (user, 2026-11-09) */
.ab-rail-wrap { margin-top: calc(207 * var(--u)); }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) { .ab-rail-wrap { margin-top: calc(120 * var(--u)); } }

/* the button is sized by its text now: centred on the page whatever its width (user, 2026-11-10) */
.ab-dm, .ab-dm.ab-dm { left: 0; right: 0; width: fit-content; margin: 0 auto; }

/* the DM button the size of every other button (user, 2026-11-10) */
body .btn.btn.ab-dm { width: fit-content !important; }   /* pinned left and right to centre it, so it must not stretch: sized by its words like every button */

/* the big face: a letter on their colour when there is no photo (chat, 2026-11-10) */
.ab-who__face.is-letter { display: grid; place-items: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: calc(58 * var(--u)); font-weight: 500; }
.ab-who__face.is-letter { text-transform: uppercase; }

/* ---------- the About strip's panels (user, 2026-11-11): frame, quote, job; own colours and text size ---------- */
.ab-card--panel { width: calc(787 * var(--u)); height: calc(649 * var(--u)); padding: calc(64 * var(--u)) calc(72 * var(--u)); background: var(--pbg, var(--black)); color: var(--pfg, var(--cream)); overflow: hidden; }
.ab-card__fit { display: flex; flex-direction: column; height: 100%; font-size: calc(24 * var(--u) * var(--ps, 1) * var(--fit, 1)); line-height: 1.3; }
.ab-card--panel h2 { margin: 0 0 calc(36 * var(--u) * var(--fit, 1)); font-family: var(--font-wide); font-weight: 800; text-transform: uppercase; color: var(--pac, var(--red)); font-size: calc(40 * var(--u) * var(--ps, 1) * var(--fit, 1)); line-height: 1.08; overflow-wrap: anywhere; }
.ab-card__text p { margin: 0; }
.ab-card__text p + p { margin-top: .9em; }
.ab-card--panel .btn { margin-top: auto; align-self: center; flex: none; }
.ab-card__text { margin-bottom: calc(32 * var(--u)); }
.ab-card__kicker { margin-bottom: calc(14 * var(--u)); font-size: calc(20 * var(--u)); opacity: .75; }
.ab-card--quote { width: calc(620 * var(--u)); }
.ab-card--quote .ab-card__fit { justify-content: center; text-align: center; }
.ab-card--quote blockquote { margin: 0; font-style: italic; font-size: calc(44 * var(--u) * var(--ps, 1) * var(--fit, 1)); line-height: 1.15; }
.ab-card--quote figcaption { margin-top: calc(30 * var(--u)); font-size: calc(22 * var(--u)); opacity: .8; }
.ab-card--job.is-empty .ab-card__fit { justify-content: center; text-align: center; }
/* the text under the chat: its size from the CMS */
.ab-text { font-size: calc(64 * var(--u) * var(--ts, 1)); line-height: calc(75 * var(--u) * var(--ts, 1)); }
@media (orientation: portrait) { .ab-text { font-size: calc(36 * var(--u) * var(--ts, 1)); line-height: calc(44 * var(--u) * var(--ts, 1)); } }

/* ---------- Job openings: their own section under the strip (user, 2026-11-11) ---------- */
.ab-jobs { width: calc(1000 * var(--u)); margin: calc(180 * var(--u)) auto 0; }
.ab-jobs__title { margin: 0 0 calc(56 * var(--u)); text-align: center; font-family: var(--font-wide); font-weight: 900; text-transform: uppercase; color: var(--red); font-size: calc(80 * var(--u)); line-height: .95; }
.ab-jobs__list { list-style: none; margin: 0; padding: 0; border-top: calc(2 * var(--u)) solid var(--black); }
.ab-job { display: grid; grid-template-columns: 1fr auto; gap: calc(10 * var(--u)) calc(40 * var(--u)); align-items: start; padding: calc(34 * var(--u)) 0; border-bottom: calc(2 * var(--u)) solid var(--black); }
.ab-job__title { grid-column: 1; margin: 0; font-family: var(--font-wide); font-weight: 900; text-transform: uppercase; color: var(--red); font-size: calc(36 * var(--u)); line-height: 1.05; }
.ab-job__text { grid-column: 1; margin: 0; font-size: calc(24 * var(--u)); line-height: 1.35; color: var(--black); }
.ab-job__link { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; font-size: calc(24 * var(--u)); color: var(--black); text-decoration: underline; text-underline-offset: .18em; }
.ab-job__link:hover { color: var(--red); }
.ab-jobs__none { margin: 0; text-align: center; font-size: calc(30 * var(--u)); line-height: 1.35; color: var(--black); }
@media (orientation: portrait) {
  .ab-jobs { width: auto; margin: calc(120 * var(--u)) calc(40 * var(--u)) 0; }
  .ab-jobs__title { font-size: calc(46 * var(--u)); margin-bottom: calc(40 * var(--u)); }
  .ab-job { grid-template-columns: 1fr; }
  .ab-job__link { grid-column: 1; grid-row: auto; justify-self: start; }
  .ab-job__title { font-size: calc(38 * var(--u)); }
  .ab-job__text, .ab-job__link { font-size: max(15px, calc(26 * var(--u))); }
  .ab-jobs__none { font-size: max(16px, calc(30 * var(--u))); }
}

/* who said the quote: a dash before the name (user, 2026-11-11) */
.ab-card--quote figcaption::before { content: "– "; }

/* ---------- Working at alfred: under the text under the chat, above the job openings (user, 2026-11-11) ---------- */
.ab-culture { margin-top: calc(180 * var(--u)); }
.cu__title { margin: 0 0 calc(56 * var(--u)); text-align: center; font-family: var(--font-wide); font-weight: 900; text-transform: uppercase; color: var(--red); font-size: calc(80 * var(--u)); line-height: .95; }
/* the photos: one calm, endless row, the whole width of the window, no bar */
.cu-reel { position: relative; width: calc(100vw - 2 * (var(--edge, 0px) + var(--pad, 0px))); margin-left: 50%; transform: translateX(-50%); overflow: hidden; }
.cu-reel__track { display: flex; gap: calc(24 * var(--u)); width: max-content; animation: cu-reel 40s linear infinite; will-change: transform; }
.cu-reel__track img { flex: none; height: calc(460 * var(--u)); width: auto; border-radius: calc(16 * var(--u)); object-fit: cover; }
@keyframes cu-reel { to { transform: translateX(var(--shift, -50%)); } }
@media (prefers-reduced-motion: reduce) { .cu-reel__track { animation: none; } }
/* the quote */
.cu-quote { width: calc(1000 * var(--u)); margin: calc(130 * var(--u)) auto 0; text-align: center; }
.cu-quote blockquote { margin: 0; font-family: var(--font); font-weight: 400; text-transform: none; letter-spacing: normal; font-size: calc(52 * var(--u)); line-height: 1.18; font-style: italic; color: var(--black); }
.cu-quote figcaption { margin-top: calc(16 * var(--u)); font-family: var(--font); font-weight: 400; text-transform: none; font-size: calc(24 * var(--u)); color: var(--black); opacity: .8; }
.cu-quote figcaption::before { content: "– "; }
@media (orientation: portrait) {
  .ab-culture { margin-top: calc(120 * var(--u)); }
  .cu__title { font-size: calc(46 * var(--u)); margin: 0 calc(40 * var(--u)) calc(40 * var(--u)); }
  .cu-reel { width: 100vw; }
  .cu-reel__track img { height: calc(380 * var(--u)); }
  .cu-quote { width: auto; margin: calc(100 * var(--u)) calc(40 * var(--u)) 0; }
  .cu-quote blockquote { font-size: calc(38 * var(--u)); }
  .cu-quote figcaption { font-size: max(15px, calc(26 * var(--u))); }
}