/* ─────────────────────────────────────────────────────────────
   The regular website (the front porch): header, pages, footer,
   Pixie's chat head, and the portal she opens onto Pixieland.
   Pixieland's own interface stays in style.css.
   ───────────────────────────────────────────────────────────── */

:root {
  --s-bg: #f3f1f8;
  --s-bg-2: #ebe7f4;
  --s-ink: #1d1535;
  --s-ink-2: #5f5680;
  --s-ink-3: #9a92b5;
  --s-line: rgba(29, 21, 53, .14);
  --s-line-strong: rgba(29, 21, 53, .3);
  --s-dark: #1d1535;
  --s-lav: #eae2ff; --s-pink: #ffe3ef; --s-mint: #dcf6ee; --s-butter: #fff3c8; --s-peach: #ffe7d8; --s-sky: #dfeeff;
  --s-grot: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --s-serif: 'Fraunces', Georgia, serif;
  --s-gut: clamp(20px, 4vw, 60px);
  --s-rail: clamp(14px, 2.6vw, 40px);
  --s-ease: cubic-bezier(.22, .8, .24, 1);
}

html[data-mode="site"] { background: var(--s-bg); }
html[data-mode="site"] body { color: var(--s-ink); font-family: var(--s-grot); background: var(--s-bg); }
/* modes (set on <html> by main.js): site → portal (Pixie breaks out of her chat head and opens the way) → land (Pixieland).
   intro is #land in the URL: a white page while Pixieland is built */
html[data-mode="site"] #stage { display: none; }
/* Pixieland's own layers are not merely see-through on the website but out of the page: at opacity 0 they were still composited over it (some blurring what was behind) */
html[data-mode="site"] :is(#hud, #hero, #card, #letter, #outro, #scroll-hint, #dialogue, #reel, #profile, #progress, #flash, #secrets) { display: none; }
html:not([data-mode="land"]) #scroll-space { display: none; }
html:is([data-mode="land"], [data-mode="intro"]) :is(#site, #sprite, #veil, #pixie-btn, #pixie-nudge, #pixie-chat) { display: none; }
/* Pixieland, seen through the hole she opens (portal.js moves the clip). The GL canvas is never fully opaque (three always asks for
   an alpha channel and the haze is see-through), so it carries Pixieland's own backdrop (style.css, html) or the website would show through */
html[data-mode="portal"] #stage { z-index: 50; clip-path: circle(0px at 50% 50%); background: #f7e6f3; }

#site { position: relative; z-index: 10; background: var(--s-bg); font-family: var(--s-grot); color: var(--s-ink); -webkit-font-smoothing: antialiased; }
#site a { color: inherit; text-decoration: none; }
#site img, #site video { display: block; max-width: 100%; }
#site button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
#site ::selection { background: #d9ccff; }

/* ── the frame: content sits between two hairlines, like a page ── */
#page { position: relative; margin: 0 var(--s-rail); border-left: 1px solid var(--s-line); border-right: 1px solid var(--s-line); min-height: 60vh; transition: opacity .32s ease, transform .5s var(--s-ease); }
#page.leaving { opacity: 0; transform: translateY(14px); transition-duration: .22s, .22s; }
#page.entering { opacity: 0; transform: translateY(18px); transition: none; }
.section { padding: clamp(72px, 9vw, 150px) var(--s-gut); border-top: 1px solid var(--s-line); }
.section.first { border-top: 0; }
.section.tight { padding-top: clamp(48px, 6vw, 90px); padding-bottom: clamp(48px, 6vw, 90px); }

/* ── type ── */
.h-big { font-family: var(--s-grot); font-weight: 500; font-size: clamp(46px, 9.4vw, 152px); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; margin: 0 0 clamp(28px, 4vw, 56px); overflow: hidden; }
.h-big .line { display: block; }
.h-big .w { display: inline-block; white-space: nowrap; }
.h-big .l { display: inline-block; transform: translateY(110%); transition: transform .9s var(--s-ease); transition-delay: calc(var(--i) * 28ms); }
.h-big.in .l { transform: none; }
.h-mid { font-weight: 500; font-size: clamp(30px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 24px; }
.h-mid em, .lede em, .statement em { font-family: var(--s-serif); font-style: italic; font-weight: 400; font-variation-settings: 'SOFT' 100, 'WONK' 1; letter-spacing: 0; }
.lede { font-size: clamp(19px, 2.1vw, 30px); font-weight: 500; line-height: 1.28; letter-spacing: -.015em; max-width: 24ch; margin: 0; }
.lede + .lede { margin-top: 1em; }
.body { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; color: var(--s-ink-2); max-width: 60ch; }
.body p + p { margin-top: 1em; }
.eyebrow-s { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--s-ink-3); margin: 0 0 18px; }
.muted { color: var(--s-ink-2); }

/* ── header ── */
#top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 78px; padding: 0 calc(var(--s-rail) + var(--s-gut)); background: rgba(243, 241, 248, .72); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
/* (on touch screens the header is a little more opaque instead of frosted: a live blur under a sticky bar is redone on every frame of a scroll) */
@media (hover: none) { #top { background: rgba(243, 241, 248, .94); backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* the wordmark (assets/brand/wordmark.svg, traced from ChatGPT's flat render, references/wordmark-chatgpt.png) is a mask, so it takes the text colour: ink here, white in the footer */
.wordmark { display: block; flex: none; height: 30px; aspect-ratio: 1346 / 359; margin-right: auto; background: currentColor; -webkit-mask: url(../assets/brand/wordmark.svg) no-repeat center / contain; mask: url(../assets/brand/wordmark.svg) no-repeat center / contain; }
#top .wordmark { margin-right: auto; }
/* the header menu (morph-nav.js): plain links, the ones with a panel carry a chevron; the CTA is a white pill. The panel is dark
   smoked glass: a list on the left (the hovered item gets a soft highlight) and a picture of that item filling the right */
#topnav { position: relative; display: flex; align-items: center; gap: 4px; }
#topnav > a { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; color: rgba(29, 21, 53, .58); white-space: nowrap; user-select: none; border-radius: 10px; transition: color .2s ease-out; }
#topnav > a:hover, #topnav > a.open, #topnav > a.active { color: var(--s-ink); }
#topnav > a:focus-visible { outline: 2px solid var(--s-ink); outline-offset: -2px; }
#topnav .chev { width: 12px; height: 12px; transition: rotate .25s cubic-bezier(.23, 1, .32, 1); }
#topnav > a.open .chev { rotate: 180deg; }
#topnav > .mn-cta { margin-left: 18px; height: 46px; padding: 0 24px; border-radius: 999px; background: #fff; color: var(--s-ink); box-shadow: 0 1px 2px rgba(29, 21, 53, .08), 0 0 0 1px rgba(29, 21, 53, .06); transition: box-shadow .25s ease-out, transform .25s ease-out; }
#topnav > .mn-cta:hover { box-shadow: 0 8px 22px rgba(29, 21, 53, .12), 0 0 0 1px rgba(29, 21, 53, .06); transform: translateY(-1px); }
.mn-panel { position: absolute; top: calc(100% + 10px); left: 0; visibility: hidden; pointer-events: none; }
.mn-panel.on { visibility: visible; pointer-events: auto; }
.mn-pop { position: relative; width: 100%; height: 100%; opacity: 0; }
.mn-bridge { position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* so the pointer never "leaves" on its way down */
.mn-body { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; background: rgba(20, 15, 28, .86); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 70px rgba(20, 14, 38, .32); }
.mn-sec { position: absolute; top: 0; left: 0; display: grid; grid-template-columns: 270px 400px; gap: 8px; padding: 8px; visibility: hidden; color: #fff; }
.mn-list { position: relative; display: grid; align-content: start; }
.mn-hl { position: absolute; left: 0; right: 0; top: 0; border-radius: 13px; background: rgba(255, 255, 255, .085); opacity: 0; pointer-events: none; }
.mn-sec a.mn-item { position: relative; display: block; padding: 13px 16px 14px; border-radius: 13px; color: #fff; outline: none; }
.mn-item b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.mn-item span { display: block; margin-top: 5px; font-size: 14px; line-height: 1.38; color: rgba(255, 255, 255, .6); }
.mn-pics { position: relative; min-height: 100%; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .05); }
.mn-pics figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .45s ease-out; }
.mn-pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform .8s cubic-bezier(.23, 1, .32, 1); }
.mn-pics figure.on { opacity: 1; }
.mn-pics figure.on img { transform: none; }
/* the caption on the picture: what it shows, over a soft shade at the bottom; it rises in a beat after the picture */
.mn-pics figure::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(14, 10, 22, 0), rgba(14, 10, 22, .62)); }
.mn-pics figcaption { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; color: #fff; transform: translateY(6px); opacity: 0; transition: opacity .4s ease-out .08s, transform .5s cubic-bezier(.23, 1, .32, 1) .08s; }
.mn-pics figure.on figcaption { transform: none; opacity: 1; }
.mn-pics figcaption b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; text-wrap: balance; }
.mn-pics figcaption span { display: block; margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, .72); }
#menu-btn { display: none; align-items: center; gap: 12px; padding: 10px 4px 10px 14px; font-size: 13.5px; font-weight: 600; }
#menu-btn .burger { display: block; width: 26px; height: 12px; position: relative; }
#menu-btn .burger::before, #menu-btn .burger::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s; }
#menu-btn .burger::before { top: 0; } #menu-btn .burger::after { bottom: 0; width: 70%; }
#menu-btn:hover .burger::after { width: 100%; }
.close-btn { font-size: 13.5px; font-weight: 600; padding: 10px 0; border-bottom: 1px solid var(--s-ink); }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; background: var(--s-dark); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; transition: transform .35s var(--s-ease), background .25s, box-shadow .35s; white-space: nowrap; }
.pill:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(29, 21, 53, .22); }
#site a.pill, #menu a.pill { color: #fff; }
.pill.ghost, #site a.pill.ghost, #menu a.pill.ghost { background: rgba(29, 21, 53, .07); color: var(--s-ink); }
.pill.ghost:hover { background: rgba(29, 21, 53, .12); box-shadow: none; }
#menu { position: fixed; inset: 0; z-index: 42; background: var(--s-bg); display: grid; grid-template-rows: 78px 1fr auto; padding: 0 calc(var(--s-rail) + var(--s-gut)) 32px; transition: opacity .35s, visibility .35s; }
#menu.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#menu { font-family: var(--s-grot); color: var(--s-ink); }
#menu a { color: inherit; text-decoration: none; }
#menu button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
#menu .menu-top { display: flex; align-items: center; }
#menu .menu-top .pill { margin-left: auto; }
#menu nav { align-self: center; display: grid; gap: 6px; }
#menu nav a { font-size: clamp(44px, 11vw, 96px); font-weight: 500; letter-spacing: -.04em; line-height: 1; text-transform: uppercase; transform: translateY(20px); opacity: 0; transition: transform .6s var(--s-ease), opacity .4s; transition-delay: calc(var(--i) * 60ms); }
#menu:not(.hidden) nav a { transform: none; opacity: 1; }
#menu nav a.active { color: var(--s-ink-3); }
#menu .menu-foot { font-size: 14px; color: var(--s-ink-2); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── home: hero. A full-height empty canvas; the title sits on its bottom edge, a small faded caption in the corner (wearepixies) ── */
.hero-pin { position: relative; height: calc(100svh - 78px + 420px); clip-path: inset(-100vh 0 0 0); } /* 420px of scroll during which the hero stays put and the words climb. Clipped at the sides and bottom only: a page turning over the top of the card rises up under the frosted header */
.hero-px { position: sticky; top: 78px; height: calc(100svh - 78px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 var(--s-gut); --ch: calc((100svh - 78px) * .57); }
.hero-px .h-big { font-size: clamp(54px, 10.9vw, 176px); line-height: .82; letter-spacing: -.06em; text-align: center; margin: 0; overflow: visible; width: 100%; }
.hero-px .h-big .line { display: block; position: relative; z-index: 1; will-change: transform; }
.hero-px .h-big .line:first-child { z-index: 3; } /* the first line rides on top of the reel card; the others run behind it */
.hero-card { position: absolute; z-index: 2; top: 21.5%; height: var(--ch); width: calc(var(--ch) * .943); left: calc(50% - var(--ch) * .4715); border-radius: 6px; background: #1d1535; box-shadow: 0 30px 80px rgba(29, 21, 53, .28); will-change: transform, opacity; perspective: 1500px; }
/* the card is a flipbook (site.js): a page per film. A page turns up about its top edge, like a sketchpad's: the film on its face, paper
   on its back. .shade darkens a face as it turns from the light, and is the shadow a turning page casts on the film under it */
.hero-card .page { position: absolute; inset: 0; transform-origin: 50% 0; transform-style: preserve-3d; will-change: transform; }   /* (no opacity on it: that flattens it, and its back would show the film mirrored) */
.hero-card .face, .hero-card .back { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hero-card .face { background: #1d1535; }
.hero-card .back { transform: rotateX(180deg); background: linear-gradient(0deg, #f6f3fc, #dcd5ec); box-shadow: inset 0 0 0 1px rgba(29, 21, 53, .1); }
.hero-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-turn { position: absolute; z-index: 20; pointer-events: none; }   /* the page while it turns (pageturn.js), reaching up over the card */
.hero-card .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 21, 53, .8), rgba(29, 21, 53, .3) 60%, rgba(29, 21, 53, .1)); opacity: 0; pointer-events: none; }
.hero-px .h-big .half { display: inline-block; will-change: transform; }   /* the two halves of a word that parts around the card */
.hero-cap { position: absolute; left: var(--s-gut); bottom: clamp(26px, 3.6vw, 48px); margin: 0; font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--s-ink-3); }
.hero { padding: clamp(40px, 5vw, 72px) var(--s-gut) clamp(40px, 5vw, 70px); }
.hero .statement { max-width: 22ch; margin: 0 0 clamp(26px, 3.4vw, 48px); }
.statement { grid-column: 2; font-size: clamp(24px, 2.7vw, 40px); font-weight: 500; line-height: 1.14; letter-spacing: -.025em; margin: 0; }
.hero-media { position: relative; border-radius: clamp(18px, 2.4vw, 30px); overflow: hidden; aspect-ratio: 16 / 8.4; min-height: 300px; background: #1d1535; box-shadow: 0 40px 100px rgba(29, 21, 53, .2); }
.hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media .mute { position: absolute; right: 18px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .86); display: grid; place-items: center; color: var(--s-ink); }
.hero-media .mute svg { width: 18px; height: 18px; }
.reel-cap { display: flex; justify-content: space-between; gap: 16px; padding: 16px 4px 0; font-size: 13px; color: var(--s-ink-2); }
.reel-cap span:first-child { color: var(--s-ink); font-weight: 600; }

/* ── two columns with a rule between (the wearepixies grid) ── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.split > .right { border-left: 1px solid var(--s-line); padding-left: clamp(24px, 3.4vw, 52px); }
.split.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split .h-big { margin-bottom: 0; font-size: clamp(40px, 7vw, 118px); }
.split .h-big + .line { margin-top: 28px; }
.split .sticky { position: sticky; top: 110px; }

/* ── service tiles ── */
.make-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.make-head .h-big { margin: 0; }
.make-lede { max-width: 46ch; justify-self: end; padding-bottom: .4em; }
.make-lede p { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--s-ink-2); }
.make-lede p:first-child { font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; line-height: 1.35; letter-spacing: -.012em; color: var(--s-ink); }
.make-lede p + p { margin-top: .9em; }
/* the list: big names on hairlines; the hovered row stays dark, the others fade back, and the picture floats beside the pointer */
.make-list { position: relative; list-style: none; margin: clamp(48px, 6vw, 90px) 0 0; padding: 0; border-top: 1px solid var(--s-line); }
.make-list > li:not(.make-peek) { border-bottom: 1px solid var(--s-line); }
.make-list a { display: grid; grid-template-columns: clamp(44px, 5vw, 80px) minmax(0, 1fr) minmax(0, auto) 44px; align-items: center; gap: clamp(14px, 2vw, 32px); padding: clamp(20px, 2.3vw, 34px) 0; }
.make-list .n { align-self: start; padding-top: .9em; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; color: var(--s-ink-3); font-variant-numeric: tabular-nums; }
.make-list .name { font-size: clamp(32px, 4.6vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -.04em; transition: color .35s ease-out, transform .6s var(--s-ease); }
.make-list .what { max-width: 26ch; text-align: right; font-size: 15px; line-height: 1.4; color: var(--s-ink-2); transition: color .35s ease-out; }
#site .make-list .thumb { display: none; }   /* (#site: the site's own img rule would show it) */
.make-list .go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--s-line-strong); color: var(--s-ink); transition: background-color .3s ease-out, color .3s ease-out, transform .5s var(--s-ease), box-shadow .3s; }
.make-list .go svg { width: 18px; height: 18px; }
.make-list.hovering a:not(.lit) :is(.name, .what) { color: var(--s-ink-3); }
.make-list a.lit .name { transform: translateX(10px); }
.make-list a.lit .go { background: var(--s-dark); color: #fff; box-shadow: none; transform: rotate(-45deg); }
.make-peek { position: absolute; z-index: 3; left: 0; top: 0; width: clamp(220px, 21vw, 320px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0; scale: .7; transition: opacity .3s ease-out, scale .45s var(--s-ease); box-shadow: 0 24px 60px rgba(29, 21, 53, .22); will-change: transform; }
.make-peek.on { opacity: 1; scale: 1; }
.make-peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .35s ease-out, transform .7s var(--s-ease); }
.make-peek img.on { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse) {
  .make-peek { display: none; }
  .make-list a { grid-template-columns: minmax(0, 1fr) 72px; grid-template-areas: 'name thumb' 'what thumb'; row-gap: 8px; }
  .make-list .n, .make-list .go { display: none; }
  .make-list .name { grid-area: name; } .make-list .what { grid-area: what; text-align: left; }
  #site .make-list .thumb { display: block; grid-area: thumb; width: 72px; height: 54px; border-radius: 8px; object-fit: cover; }
}

/* ── the selected work's heading ── */
.featured-head { align-items: flex-end; flex-wrap: nowrap; }
.featured-head .h-big { font-size: clamp(44px, 7.4vw, 120px); flex: none; }
.featured-head .blurb { margin: 0 0 .5em; max-width: 34ch; flex: 0 1 auto; font-size: 13px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--s-ink-2); text-align: left; }
/* cards arriving (site.js bindCards; the blog's): the picture's frame opens out from a smaller window while the shot inside settles
   from a push-in, a beat later for a second card (--d). While the page scrolls, the shot drifts inside its frame (--py) */
[data-card] .pic { clip-path: inset(13% 8% 13% 8% round 22px); transition: clip-path 1.5s cubic-bezier(.16, 1, .3, 1) var(--d); }
[data-card] .pic :is(img, video) { scale: 1.32; translate: 0 var(--py, 0%); transition: scale 1.9s cubic-bezier(.16, 1, .3, 1) var(--d), transform 1.1s var(--s-ease); }
[data-card].in .pic { clip-path: inset(0 round var(--r, 14px)); }
[data-card].in .pic :is(img, video) { scale: 1.12; }
@media (prefers-reduced-motion: reduce) {
  [data-card] .pic { clip-path: inset(0 round var(--r, 14px)); opacity: 0; transition: opacity .6s; }
  [data-card].in .pic { opacity: 1; }
  [data-card] .pic :is(img, video) { scale: 1; translate: none; transition: none; }
}
.cards-more { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 72px); }

/* ── the work page (work-grid.js): the page head like the others, the kinds of work as outlined pills with their counts, then two
   columns of films. The cards arrive and drift like the site's others ([data-card] above): the frame opens out of a smaller window,
   the shot drifts in it (--py) and the right column glides against the left (--lag) ── */
#site .wk-filters { margin: clamp(36px, 4vw, 60px) 0 clamp(30px, 3.4vw, 50px); }
.wk-filters sup { margin-left: 5px; font-size: .7em; vertical-align: super; line-height: 0; opacity: .65; }
.wg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(50px, 6vw, 96px) clamp(20px, 2.6vw, 40px); }
#site .wg-item { display: block; color: var(--s-ink); --r: 18px; }
.wg-item[data-card] { translate: 0 var(--lag, 0px); }
.wg-item .pic { position: relative; aspect-ratio: 16 / 10.4; border-radius: 18px; overflow: hidden; background: var(--s-bg-2); }
#site .wg-item .pic img, #site .wg-item .pic video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
#site .wg-item .pic video { transform: scale(var(--z, 1)); opacity: 0; transition: opacity .6s, transform 1.1s var(--s-ease); }
#site .wg-item .pic video.on { opacity: 1; }
#site .wg-item:hover .pic img { transform: scale(1.045); }
#site .wg-item:hover .pic video { transform: scale(calc(var(--z, 1) * 1.045)); }
.wg-year { position: absolute; left: 14px; bottom: 12px; padding: 6px 11px; border-radius: 999px; background: rgba(29, 21, 53, .78); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.wg-cap { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 18px 0 16px; border-bottom: 1px solid var(--s-line-strong); }
.wg-cap::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--s-ink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--s-ease); }
.wg-item:hover .wg-cap::after { transform: none; }
.wg-kind { margin: 0 0 10px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--s-ink-2); }
.wg-cap h3 { margin: 0; font-size: clamp(26px, 2.6vw, 42px); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.wg-go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--s-line-strong); transition: background .4s, color .4s, box-shadow .4s, transform .5s var(--s-ease); }
.wg-go svg { width: 18px; height: 18px; }
.wg-item:hover .wg-go { background: var(--s-dark); color: #fff; box-shadow: none; transform: rotate(-45deg); }
.wg-item[data-card] :is(.wg-kind, h3, .wg-go, .wg-year) { opacity: 0; translate: 0 12px; transition: opacity .7s ease-out calc(var(--d) + .4s), translate 1s cubic-bezier(.16, 1, .3, 1) calc(var(--d) + .4s); }
.wg-item[data-card].in :is(.wg-kind, h3, .wg-go, .wg-year) { opacity: 1; translate: 0 0; }
.wg-item[data-card].in h3 { transition-delay: calc(var(--d) + .5s); }
@media (max-width: 860px) { .wg { grid-template-columns: minmax(0, 1fr); gap: 44px; } .wg-item[data-card] { translate: none; } }
@media (prefers-reduced-motion: reduce) { .wg-item[data-card] { translate: none; } .wg-item[data-card] :is(.wg-kind, h3, .wg-go, .wg-year) { opacity: 1; translate: none; transition: none; } }

/* ── the work deck (work-deck.js): each project a big screen playing its reel. On a wide screen they are stacked like prints: each
   sticks a little lower than the last, so the top edges of the ones behind still show, and as the next comes up over it (--c, 0 to 1)
   it settles back, smaller and darker ── */
.deck { position: relative; }
.dk { position: sticky; top: calc(78px + 22px + var(--i) * 14px); height: calc(100svh - 78px - 56px - var(--i) * 14px); min-height: 460px; max-height: 860px; margin-bottom: 26vh; --c: 0; }
.dk:last-child { margin-bottom: 0; }
#site .dk-card { position: relative; display: block; height: 100%; border-radius: clamp(18px, 2vw, 28px); overflow: hidden; color: #f3f1f8; background: var(--s-dark); transform: scale(calc(1 - var(--c) * .07)); transform-origin: 50% 0; box-shadow: 0 -10px 40px rgba(29, 21, 53, .16); isolation: isolate; }
.dk-media { position: absolute; inset: 0; overflow: hidden; }
#site .dk-media img, #site .dk-media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.4s var(--s-ease), opacity .6s; }
#site .dk-media video { transform: scale(var(--z, 1)); opacity: 0; }
#site .dk-media video.on { opacity: 1; }
.dk-card:hover .dk-media img { transform: scale(1.04); }
#site .dk-card:hover .dk-media video { transform: scale(calc(var(--z, 1) * 1.04)); }
.dk-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 14, 39, .86), rgba(20, 14, 39, .25) 42%, transparent 62%), linear-gradient(180deg, rgba(20, 14, 39, .45), transparent 22%); pointer-events: none; }
.dk-dim { position: absolute; inset: 0; background: #140e27; opacity: calc(var(--c) * .62); pointer-events: none; }
.dk-top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: clamp(18px, 2vw, 30px) clamp(20px, 2.4vw, 38px); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.dk-n { font-variant-numeric: tabular-nums; }
.dk-n small { font-size: inherit; color: rgba(243, 241, 248, .55); }
.dk-tags { color: rgba(243, 241, 248, .78); }
.dk-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 70px); align-items: end; padding: clamp(22px, 2.6vw, 42px) clamp(20px, 2.4vw, 38px); }
.dk-kind { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 241, 248, .7); }
.dk-name h3 { margin: 0; font-size: clamp(44px, 6.2vw, 112px); font-weight: 500; line-height: .9; letter-spacing: -.05em; }
.dk-side { display: grid; justify-items: start; gap: 18px; max-width: 44ch; justify-self: end; }
.dk-side p { margin: 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; color: rgba(243, 241, 248, .82); }
.dk-go { display: inline-flex; align-items: center; gap: 12px; padding: 7px 7px 7px 20px; border-radius: 99px; background: rgba(243, 241, 248, .14); border: 1px solid rgba(243, 241, 248, .3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14px; font-weight: 500; transition: background .45s, color .45s; }
.dk-go i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f3f1f8; color: var(--s-ink); transition: transform .5s var(--s-ease); }
.dk-go svg { width: 16px; height: 16px; }
.dk-card:hover .dk-go { background: #f3f1f8; color: var(--s-ink); }
.dk-card:hover .dk-go i { background: var(--s-dark); color: #f3f1f8; transform: rotate(-45deg); }
/* arriving: the screen opens from a smaller window, then the words rise */
.dk .dk-card { clip-path: inset(6% 4% round 28px); transition: clip-path 1.3s cubic-bezier(.16, 1, .3, 1); }
.dk.in .dk-card { clip-path: inset(0 round clamp(18px, 2vw, 28px)); }
.dk :is(.dk-top, .dk-name, .dk-side) { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out .35s, transform 1.1s var(--s-ease) .35s; }
.dk.in :is(.dk-top, .dk-name, .dk-side) { opacity: 1; transform: none; }
.dk.in .dk-side { transition-delay: .5s; }
@media (max-width: 860px) {
  .dk { position: relative; top: auto; height: auto; min-height: 0; max-height: none; margin-bottom: 18px; }
  #site .dk-card { height: auto; aspect-ratio: 4 / 5; transform: none; }
  .dk-bottom { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dk-side { justify-self: start; }
  .dk-side p { display: none; }
  .dk-name h3 { font-size: clamp(36px, 10vw, 54px); }
  .dk-tags { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dk .dk-card { clip-path: none; transition: none; }
  .dk :is(.dk-top, .dk-name, .dk-side) { opacity: 1; transform: none; transition: none; }
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(26px, 3vw, 44px); }
.section-head .h-big { margin: 0; }
/* the button (site.js btn(); .sbtn because .btn is Pixieland's own, in style.css): a pill with its label and an arrow. On hover a fill rises inside it (its top edge curved like a
   meniscus, flattening as it fills), the label rolls up to a fresh copy and the arrow slides out as a new one slides in.
   .dark is the filled one, for the main action of a page: it inverts to white */
#site .sbtn, .sbtn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; height: 54px; padding: 0 24px 0 28px; border-radius: 999px; border: 1px solid rgba(29, 21, 53, .8); background: transparent; color: var(--s-ink); font: 500 15px/1 var(--s-grot); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: color .45s cubic-bezier(.23, 1, .32, 1), border-color .45s; }
#site a.sbtn, #site button.sbtn { color: var(--s-ink); }
.sbtn::before { content: ''; position: absolute; z-index: -1; left: -2px; right: -2px; top: 0; height: calc(100% + 30px); border-radius: 50% 50% 0 0 / 30px 30px 0 0; background: var(--s-dark); transform: translateY(100%); transition: transform .55s cubic-bezier(.23, 1, .32, 1), border-radius .55s cubic-bezier(.23, 1, .32, 1); }
.sbtn:is(:hover, :focus-visible)::before { transform: translateY(-30px); border-radius: 0; }
#site .sbtn:is(:hover, :focus-visible) { color: #fff; }
.sbtn:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 3px; }
.sbtn-l { position: relative; display: block; overflow: hidden; height: 1.25em; line-height: 1.25; }
.sbtn-l > span { display: block; transition: transform .5s cubic-bezier(.23, 1, .32, 1); }
.sbtn:is(:hover, :focus-visible) .sbtn-l > span { transform: translateY(-100%); }
.sbtn-a { position: relative; display: block; flex: none; width: 18px; height: 18px; overflow: hidden; }
.sbtn-a svg { position: absolute; inset: 0; width: 18px; height: 18px; transition: transform .5s cubic-bezier(.23, 1, .32, 1); }
.sbtn-a svg + svg { transform: translateX(-130%); }
.sbtn:is(:hover, :focus-visible) .sbtn-a svg { transform: translateX(130%); }
.sbtn:is(:hover, :focus-visible) .sbtn-a svg + svg { transform: none; transition-delay: .06s; }
#site .sbtn.dark { background: var(--s-dark); border-color: var(--s-dark); color: #fff; }
.sbtn.dark::before { background: #fff; }
#site .sbtn.dark:is(:hover, :focus-visible) { color: var(--s-ink); }
@media (prefers-reduced-motion: reduce) { .sbtn::before, .sbtn-l > span, .sbtn-a svg { transition-duration: .01s; } }
.link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; padding-bottom: 3px; border-bottom: 1px solid var(--s-line-strong); transition: gap .3s, border-color .3s; }
.link:hover { gap: 16px; border-color: var(--s-ink); }
.link svg { width: 16px; height: 16px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; }
.filters button { padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; background: rgba(29, 21, 53, .06); color: var(--s-ink-2); transition: .25s; }
.filters button:hover { color: var(--s-ink); }
.filters button.active { background: var(--s-dark); color: #fff; }

/* "Since 2023": the year as an odometer across the full width; the story and its founders on the left, the figures in a row of
   three on the right, counting up */
.since-title { display: flex; justify-content: space-between; align-items: flex-end; gap: .2em; margin: 0; font-size: clamp(64px, 15.2vw, 250px); font-weight: 500; line-height: .86; letter-spacing: -.055em; text-transform: uppercase; white-space: nowrap; }
.since-word { display: block; overflow: hidden; }
.odo { display: flex; font-variant-numeric: tabular-nums; }
.odo .d { display: block; height: .86em; overflow: hidden; }
.odo .d > span { display: flex; flex-direction: column; transition: transform 2.2s cubic-bezier(.16, 1, .3, 1) calc(var(--k) * 140ms); }
@media (prefers-reduced-motion: reduce) { .odo .d > span { transition: none; } }
.odo i { display: block; height: .86em; font-style: normal; }
.since.in .odo .d > span { transform: translateY(calc(var(--n) * -.86em)); }   /* (a turn of 0 to 9, then on to its digit) */
.since-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); gap: clamp(32px, 6vw, 110px); margin-top: clamp(44px, 6vw, 96px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--s-line); align-items: start; }
.since-who { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 13.5px; font-weight: 500; color: var(--s-ink-2); }
.since-who .faces { display: flex; }
.since-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--s-lav); box-shadow: 0 0 0 3px var(--s-bg); }
.since-who img + img { margin-left: -10px; }
.since-lede { margin: 0 0 32px; max-width: 26ch; font-size: clamp(21px, 2vw, 30px); font-weight: 500; line-height: 1.28; letter-spacing: -.015em; }
.since-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.since-figs > div { padding: 4px clamp(16px, 2vw, 30px) 0; border-left: 1px solid var(--s-line); }
.since-figs dt { display: flex; align-items: baseline; gap: 6px; margin: 0 0 14px; white-space: nowrap; }
.since-figs b { font-size: clamp(40px, 4.3vw, 80px); font-weight: 500; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.since-figs small { font-size: clamp(14px, 1.2vw, 19px); font-weight: 500; color: var(--s-ink-2); }
.since-figs dd { margin: 0; max-width: 18ch; font-size: 14.5px; line-height: 1.45; color: var(--s-ink-2); }

/* ── people ── */

/* ── blog rows ── */
/* the team lineup (home): a row of panels; the open one grows wide and dark and shows the person, the others narrow to a portrait
   and their first name running up the side. Portraits stay at or under their baked size (384px), never stretched */
.team-head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.team-head .make-lede p + p { margin-top: 26px; }
.lineup { display: flex; gap: 10px; height: clamp(400px, 34vw, 500px); }
.lu { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 22px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(29, 21, 53, .06); color: var(--s-ink); transition: flex-grow .75s cubic-bezier(.16, 1, .3, 1), background-color .5s ease-out; }
.lu.open { flex-grow: 4.2; background: var(--s-dark); }
#site .lu { color: var(--s-ink); }
#site .lu.open { color: #fff; }   /* (#site: the site's link rule would make the name inherit the dark ink) */
.lu:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 3px; }
.lu-face { position: absolute; left: 50%; top: 22px; width: 92px; height: 92px; margin-left: -46px; border-radius: 50%; overflow: hidden; background: var(--s-lav); transition: left .75s cubic-bezier(.16, 1, .3, 1), top .75s cubic-bezier(.16, 1, .3, 1), width .75s cubic-bezier(.16, 1, .3, 1), height .75s cubic-bezier(.16, 1, .3, 1), margin .75s cubic-bezier(.16, 1, .3, 1); }
.lu.open .lu-face { left: 32px; top: 32px; width: 184px; height: 184px; margin-left: 0; box-shadow: 0 0 0 6px rgba(255, 255, 255, .08); }
#site .lu-face img { width: 100%; height: 100%; object-fit: cover; }
.lu-side { position: absolute; left: 50%; bottom: 26px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -.02em; white-space: nowrap; transition: opacity .35s ease-out .2s; }
.lu.open .lu-side { opacity: 0; transition-delay: 0s; }
.lu-text { position: absolute; left: 32px; right: 32px; bottom: 30px; display: block; min-width: 300px; opacity: 0; transform: translateY(12px); transition: opacity .3s ease-out, transform .5s cubic-bezier(.16, 1, .3, 1); }
.lu.open .lu-text { opacity: 1; transform: none; transition-delay: .28s; }
.lu-text b { display: block; font-size: clamp(26px, 2.4vw, 38px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.lu-text em { display: block; margin-top: 6px; font-style: normal; font-size: 14px; color: rgba(255, 255, 255, .62); }
.lu-text > span { display: block; max-width: 40ch; margin-top: 16px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.lu-text small { display: inline-block; margin-top: 16px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; color: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
@media (max-width: 860px) {
  .lineup { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--s-gut) * -1); padding: 0 var(--s-gut) 6px; scrollbar-width: none; }
  .lineup::-webkit-scrollbar { display: none; }
  /* (the cards flow, portrait then words, so a longer card on the about page grows instead of running over the portrait) */
  .lu, .lu.open { flex: 0 0 min(78vw, 320px); display: flex; flex-direction: column; gap: 22px; height: auto; padding: 24px; scroll-snap-align: start; background: var(--s-dark); }
  #site .lu { color: #fff; }
  .lu .lu-face, .lu.open .lu-face { position: relative; left: auto; top: auto; flex: none; width: 132px; height: 132px; margin: 0; }
  .lu .lu-side { display: none; }
  .lu .lu-text, .lu.open .lu-text { position: static; min-width: 0; opacity: 1; transform: none; }
}
/* "From the story room" (home): the newest post large on the left, the next two stacked on the right */
.room-head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.room-head .h-big { margin: 0 0 clamp(18px, 2vw, 28px); }
.room-sub { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.room-sub p { margin: 0; font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.012em; }
.room { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.room .pic { display: block; overflow: hidden; border-radius: 18px; background: var(--s-bg-2); }
#site .room .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.room a:hover .pic img { transform: scale(1.045); }
.room .meta { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--s-ink-2); }
.room .meta b { padding: 0; background: none; border-radius: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--s-ink); }
.room .who { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--s-ink-2); }
#site .room .who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--s-lav); }
.sr-lead .pic { aspect-ratio: 16 / 10.5; margin-bottom: 22px; }
.sr-lead h3 { margin: 12px 0 12px; max-width: 22ch; font-size: clamp(28px, 3vw, 46px); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; transition: color .3s; }
.sr-lead p { margin: 0 0 20px; max-width: 48ch; font-size: 16px; line-height: 1.55; color: var(--s-ink-2); }
.sr-side { display: grid; gap: clamp(22px, 2.6vw, 36px); }
.sr-item { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 20px; align-items: start; padding-bottom: clamp(22px, 2.6vw, 36px); border-bottom: 1px solid var(--s-line); }
.sr-item:last-child { border-bottom: 0; padding-bottom: 0; }
.sr-item .pic { aspect-ratio: 4 / 3.2; }
.sr-item .txt { display: grid; gap: 10px; align-content: start; }
.sr-item h4 { margin: 0 0 4px; font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
@media (max-width: 860px) {
  .room { grid-template-columns: minmax(0, 1fr); }
  .sr-item { grid-template-columns: 120px minmax(0, 1fr); }
}
.featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--s-line); transition: box-shadow .5s, transform .5s var(--s-ease); }
.featured:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(29, 21, 53, .12); }
.featured .pic { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--s-bg-2); }
.featured .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--s-ease); }
.featured:hover .pic img { transform: scale(1.04); }
.featured h3 { margin: 14px 0 12px; font-size: clamp(26px, 2.8vw, 42px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.featured p { margin: 0 0 18px; color: var(--s-ink-2); line-height: 1.55; font-size: 16px; }
.featured .link { margin-top: 8px; }
.meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--s-ink-2); }
.meta b { font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--s-ink); padding: 5px 9px; border-radius: 999px; background: var(--s-lav); }
.who { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--s-ink-2); margin: 14px 0 0; }
.who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: linear-gradient(160deg, #efe9ff, #ffe3ef); }
.post-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.post-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-card { display: block; }
.post-card .pic { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--s-bg-2); margin-bottom: 16px; }
.post-card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--s-ease); }
.post-card:hover .pic img { transform: scale(1.05); }
.post-card h3 { margin: 12px 0 8px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
.post-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--s-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(30px, 5vw, 80px); align-items: start; }
.post-side { position: sticky; top: 110px; }
.author-box { padding: 24px; border-radius: 18px; border: 1px solid var(--s-line); background: #fff; }
.author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: linear-gradient(160deg, #efe9ff, #ffe3ef); margin-bottom: 14px; }
.author-box .eyebrow-s { margin-bottom: 4px; }
.author-box b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.author-box .role { display: block; font-size: 13px; color: var(--s-ink-2); margin-bottom: 10px; }
.author-box p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--s-ink-2); }
.next-post { display: grid; grid-template-columns: 200px 1fr auto; gap: 24px; align-items: center; margin-top: clamp(40px, 5vw, 70px); padding: 22px; border-radius: 20px; background: var(--s-lav); }
.next-post .pic { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.next-post .pic img { width: 100%; height: 100%; object-fit: cover; }
.next-post h3 { margin: 4px 0 8px; font-size: clamp(20px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.next-post .eyebrow-s { margin: 0; }
.next-post svg { width: 26px; height: 26px; transition: transform .4s var(--s-ease); }
.next-post:hover svg { transform: translateX(6px); }
.post-cover { border-radius: clamp(18px, 2.4vw, 30px); overflow: hidden; aspect-ratio: 16 / 7.5; min-height: 240px; background: var(--s-bg-2); margin-bottom: clamp(28px, 4vw, 56px); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.prose { max-width: 66ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.7; color: var(--s-ink); }
.prose p { margin: 0 0 1.3em; }
.prose h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; margin: 2em 0 .7em; }
.prose blockquote { margin: 1.6em 0; padding: 0 0 0 26px; border-left: 2px solid var(--s-ink); font-family: var(--s-serif); font-style: italic; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.3; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.byline { display: flex; align-items: center; gap: 14px; margin: 0 0 30px; font-size: 14px; color: var(--s-ink-2); }
.byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: linear-gradient(160deg, #efe9ff, #ffe3ef); }
.byline b { color: var(--s-ink); font-weight: 600; }

/* ── case study ── */
.case-hero { border-radius: clamp(18px, 2.4vw, 30px); overflow: hidden; aspect-ratio: 16 / 8; min-height: 260px; background: #1d1535; margin-bottom: clamp(30px, 4vw, 60px); position: relative; }
.case-hero img, .case-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--s-line); }
.facts li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--s-line); font-size: 15px; }
.facts b { font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--s-ink-3); padding-top: 3px; }
.chips-s { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-s span, .chips-s a { padding: 8px 13px; border-radius: 999px; background: rgba(29, 21, 53, .06); font-size: 13px; font-weight: 500; }
.chips-s a:hover { background: rgba(29, 21, 53, .12); }
.stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(30px, 4vw, 60px); }
.stills figure { margin: 0; }
.stills .pic { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--s-bg-2); }
.stills img { width: 100%; height: 100%; object-fit: cover; }
.stills figcaption { margin-top: 10px; font-size: 13px; color: var(--s-ink-2); }
.pager { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(40px, 5vw, 80px); padding-top: 30px; border-top: 1px solid var(--s-line); }
.pager a { display: grid; gap: 8px; font-size: clamp(18px, 2vw, 26px); font-weight: 500; letter-spacing: -.02em; }
.pager a small { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--s-ink-3); }
.pager a:last-child { text-align: right; }
.play { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; }

/* ── timeline, steps, clients ── */

/* ── request / contact ── */
.request .line { font-size: clamp(30px, 4.6vw, 64px); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; margin: 0 0 18px; }
.request .ask { font-size: clamp(18px, 1.8vw, 24px); color: var(--s-ink-2); margin: 0 0 10px; }
.request .mail { display: inline-block; max-width: 100%; font-size: clamp(22px, 3.3vw, 50px); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; border-bottom: 3px solid var(--s-ink); padding-bottom: 4px; overflow-wrap: anywhere; transition: color .3s, border-color .3s; }
.request .mail:hover { color: #7a5fd0; border-color: #7a5fd0; }
.request .person-row { display: flex; align-items: center; gap: 20px; margin-top: clamp(40px, 6vw, 90px); }
.request .person-row img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: linear-gradient(160deg, #efe9ff, #ffe3ef); flex: none; }
.request .person-row p { margin: 0; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.35; font-weight: 500; max-width: 30ch; }
.request .person-row p span { display: block; font-size: 14px; color: var(--s-ink-2); font-weight: 400; margin-top: 8px; }
.request .person-row p span a { border-bottom: 1px solid var(--s-line-strong); }
.form-s { display: grid; gap: 22px; margin-top: 24px; max-width: 560px; }
.form-s label { display: block; }
.form-s label span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--s-ink-3); margin-bottom: 8px; }
.form-s input, .form-s select, .form-s textarea { width: 100%; font: 500 17px var(--s-grot); color: var(--s-ink); background: transparent; border: 0; border-bottom: 1px solid var(--s-line-strong); padding: 10px 0; outline: none; border-radius: 0; resize: vertical; transition: border-color .25s; }
.form-s input:focus, .form-s select:focus, .form-s textarea:focus { border-bottom-color: var(--s-ink); }
.form-s ::placeholder { color: var(--s-ink-3); font-style: italic; font-family: var(--s-serif); font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.form-s .row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-s .sbtn { justify-self: start; }
.form-s .err { min-height: 1.2em; font-size: 13px; color: #d0407a; }
.form-s.sent > *:not(.done) { display: none; }
.form-s .done { display: none; padding: 30px; border-radius: 18px; background: var(--s-lav); }
.form-s.sent .done { display: block; }
.form-s .done h4 { margin: 0 0 8px; font-size: 28px; font-weight: 500; letter-spacing: -.03em; }
.form-s .done p { margin: 0; color: var(--s-ink-2); }
.details { display: grid; gap: 28px; margin-top: clamp(40px, 5vw, 70px); }
.details h5 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--s-ink-3); }
.details p { margin: 0; line-height: 1.6; color: var(--s-ink-2); }
.details a { border-bottom: 1px solid var(--s-line-strong); }
.socials-s { display: flex; gap: 8px; flex-wrap: wrap; }
.socials-s a { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--s-line-strong); font-size: 13px; font-weight: 500; transition: .25s; }
.socials-s a:hover { background: var(--s-dark); color: #fff; border-color: var(--s-dark); }

/* ── 404 ── */
.lost-page { min-height: 50vh; display: grid; align-content: center; gap: 18px; }

/* ── footer ── */
#foot { margin: 0 var(--s-rail); background: var(--s-dark); color: #f3f1f8; border-radius: 26px 26px 0 0; padding: clamp(50px, 6vw, 90px) var(--s-gut) 30px; }
#foot .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
#foot .big { font-size: clamp(30px, 4vw, 58px); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; margin: 0; max-width: 14ch; }
#foot .big em { font-family: var(--s-serif); font-style: italic; font-weight: 400; color: #ffe9b8; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
#foot .col { border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 28px; display: grid; align-content: space-between; gap: 40px; }
#foot .col h5 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 241, 248, .55); }
#foot .col nav { display: grid; gap: 8px; margin-top: 14px; }
#foot .col a { font-size: 15px; color: rgba(243, 241, 248, .85); transition: color .25s; }
#foot .col a:hover { color: #fff; }
#foot .fine { margin-top: clamp(50px, 7vw, 100px); padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: rgba(243, 241, 248, .6); }
#foot .fine em { font-family: var(--s-serif); font-style: italic; font-size: 15px; color: rgba(243, 241, 248, .82); font-variation-settings: 'SOFT' 100, 'WONK' 1; }
#foot .wordmark { color: #fff; }

/* ── reveals ── */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform 1s var(--s-ease); transition-delay: var(--d, 0ms); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { transition: none; opacity: 1; transform: none; } .h-big .l { transition: none; transform: none; } }

/* ─────────────────────────────────────────────────────────────
   Pixie's chat widget: her chat head (her icon, like a messenger),
   a nudge, and the chat panel. #sprite is the see-through canvas
   she breaks out onto (portal.js)
   ───────────────────────────────────────────────────────────── */
#sprite { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }
#sprite.above { z-index: 65; }
#veil { position: fixed; inset: 0; z-index: 44; pointer-events: none; opacity: 0; display: none; background: radial-gradient(ellipse 70% 65% at 50% 47%, rgba(26, 14, 58, .16), rgba(26, 14, 58, .5)); }
html[data-mode="portal"] #veil { display: block; }   /* the page dims a little while the magic happens */
/* the chat head: the pearly chat bubble (chat-256.webp, see-through in the middle), with a soft lavender shadow; it bobs now and then so it reads as someone, not a logo */
#pixie-btn { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; background: none;
  filter: drop-shadow(0 12px 18px rgba(74, 38, 150, .3)); transition: transform .4s var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1)), filter .4s; }
#pixie-btn .face { display: block; width: 100%; height: 100%; animation: head-bob 7s ease-in-out 3s infinite; transform-origin: 50% 80%; }
#pixie-btn:hover { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 18px 24px rgba(74, 38, 150, .38)); }
#pixie-btn:hover .face, #pixie-btn[aria-expanded="true"] .face { animation: none; }
#pixie-btn[aria-expanded="true"] { transform: scale(.94); }
#pixie-btn:focus-visible { outline: 3px solid #b89cf5; outline-offset: 3px; }
@keyframes head-bob { 0%, 86%, 100% { transform: none; } 90% { transform: translateY(-5px) rotate(-7deg); } 94% { transform: translateY(0) rotate(4deg); } 97% { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { #pixie-btn .face { animation: none; } }
#pixie-btn .dot { position: absolute; right: 1px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: #ff6fa6; border: 2.5px solid var(--s-bg); transition: transform .3s var(--ease-pop, ease); }
#pixie-btn.quiet .dot { transform: scale(0); }
#pixie-btn .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#pixie-nudge { position: fixed; right: 88px; bottom: 32px; z-index: 40; padding: 11px 16px; border-radius: 18px 18px 4px 18px; background: var(--s-dark); color: #fff; font-family: var(--s-serif); font-style: italic; font-size: 16px; box-shadow: 0 14px 34px rgba(29, 21, 53, .22); font-variation-settings: 'SOFT' 100, 'WONK' 1; transform-origin: 100% 100%; transition: opacity .35s, transform .5s var(--ease-pop, ease), visibility .35s; white-space: nowrap; pointer-events: none; }
#pixie-nudge.hidden { opacity: 0; visibility: hidden; transform: scale(.7) translateY(8px); }

/* the panel: a small lavender room with a dashed sill, cream notes from her, ink notes from you */
#pixie-chat { position: fixed; right: 24px; bottom: 100px; z-index: 42; width: min(392px, calc(100vw - 32px)); max-height: min(72vh, 640px); display: flex; flex-direction: column; border-radius: 26px; color: var(--s-ink); font-family: var(--s-grot);
  background: linear-gradient(180deg, #f5f0ff 0%, #fbf9ff 34%, #ffffff 100%); border: 1px solid rgba(29, 21, 53, .08); box-shadow: 0 34px 80px rgba(29, 21, 53, .26), 0 2px 0 #fff inset;
  transform-origin: 100% 100%; transition: opacity .3s, transform .55s var(--ease-pop, ease), visibility .3s; overflow: hidden; }
#pixie-chat.hidden { opacity: 0; visibility: hidden; transform: scale(.88) translateY(22px); pointer-events: none; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-bottom: 1px dashed rgba(29, 21, 53, .2); }
.chat-avatar { position: relative; width: 42px; height: 42px; flex: none; }
.chat-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; filter: drop-shadow(0 5px 10px rgba(110, 70, 200, .28)); }
.chat-avatar::after { content: ''; position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #3fcf8e; border: 2px solid #f6f2ff; }   /* here, awake */
.chat-head .name { font-family: var(--s-serif); font-style: italic; font-size: 24px; line-height: 1; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.chat-head .close { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 1px solid rgba(29, 21, 53, .16); color: var(--s-ink); font-size: 19px; line-height: 1; cursor: pointer; transition: .25s; }
.chat-head .close:hover { background: var(--s-dark); color: #fff; border-color: var(--s-dark); }
.chat-msgs { flex: 1 1 auto; overflow-y: auto; padding: 18px 16px 6px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; }
.msg { max-width: 84%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.45; animation: msg-in .4s var(--ease-pop, ease); position: relative; }
.msg.her { align-self: flex-start; background: #fff; border: 1px solid rgba(29, 21, 53, .1); border-bottom-left-radius: 6px; box-shadow: 0 4px 12px rgba(29, 21, 53, .05); margin-left: 34px; }
.msg.her.lead { margin-top: 8px; }
.msg.her.tail::before { content: ''; position: absolute; left: -35px; bottom: -1px; width: 28px; height: 28px; border-radius: 50%; background: url("../assets/pixie/icon-256.webp") center / cover no-repeat; filter: drop-shadow(0 3px 6px rgba(110, 70, 200, .25)); }   /* her face beside the last bubble of each run, like a messenger */
.msg.note { align-self: center; max-width: 92%; padding: 2px 6px; margin: 4px 0 2px; font-size: 12.5px; font-style: italic; letter-spacing: .01em; color: rgba(29, 21, 53, .55); }   /* "Pixie will remember that." */
.msg.me { align-self: flex-end; background: var(--s-dark); color: #fff; border-bottom-right-radius: 6px; margin-top: 8px; }
.msg.typing { display: flex; gap: 4px; padding: 14px 16px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #b89cf5, #ff9fcb); animation: dots 1s ease-in-out infinite; }
.msg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 12px 50px; }
.chat-chips button { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(122, 95, 208, .55); background: transparent; color: var(--s-ink); font: 500 13.5px var(--s-grot); cursor: pointer; transition: .25s; animation: msg-in .4s var(--ease-pop, ease); }
.chat-chips button:hover { background: linear-gradient(135deg, #b89cf5, #ff9fcb); color: #fff; border-color: transparent; }
.chat-chips:empty { display: none; }
.chat-input { display: flex; gap: 8px; align-items: center; margin: 6px 12px 12px; padding: 5px 5px 5px 18px; border-radius: 999px; background: #fff; border: 1px solid rgba(29, 21, 53, .14); transition: border-color .3s, box-shadow .3s; }
.chat-input:focus-within { border-color: rgba(122, 95, 208, .6); box-shadow: 0 0 0 4px rgba(184, 156, 245, .18); }
.chat-input input { flex: 1; min-width: 0; border: 0; outline: none; font: 500 16px var(--s-grot); color: var(--s-ink); background: transparent; padding: 9px 0; }   /* (16px: smaller, and an iPhone zooms the whole page in when it is tapped) */
.chat-input input::placeholder { color: var(--s-ink-3); }
.chat-input button { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: var(--s-dark); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease-pop, ease), background .3s; }
.chat-input button:hover { transform: scale(1.08); background: #7a5fd0; }
.chat-input button svg { width: 16px; height: 16px; }
.chat-input.magic { border-color: #e6c25a; background: #fffaf0; }
.chat-input.magic:focus-within { box-shadow: 0 0 0 4px rgba(230, 194, 90, .22); }
.chat-input.magic input { font-family: var(--s-serif); font-style: italic; font-size: 17px; font-variation-settings: 'SOFT' 100, 'WONK' 1; }

/* "hold on tight!": Pixie, just before she dives through the portal (portal.js sets its top) */
#holdon { position: fixed; left: 50%; top: 14%; transform: translate(-50%, -50%) rotate(-5deg) scale(.6); opacity: 0; z-index: 66; pointer-events: none; font-family: var(--s-serif); font-style: italic; font-weight: 600; font-size: clamp(36px, 7vw, 92px); color: #fff; text-shadow: 0 0 30px rgba(255, 170, 220, .9), 0 6px 0 rgba(160, 110, 240, .35); font-variation-settings: 'SOFT' 100, 'WONK' 1; white-space: nowrap; }

/* ── small screens ── */
@media (max-width: 980px) {
  .stills { grid-template-columns: 1fr 1fr; }
    #foot .grid { grid-template-columns: 1fr 1fr; }
  #foot .grid .big { grid-column: 1 / -1; }
  .statement { grid-column: 1; max-width: 22ch; }
  .make-head { grid-template-columns: minmax(0, 1fr); }
  .make-lede { justify-self: start; }
  /* phones: no pin, a plain stack: caption, the reel card, then the whole title */
  .hero-pin { height: auto; clip-path: none; }
  .hero-px { position: static; height: auto; min-height: calc(100svh - 78px); justify-content: space-between; align-items: stretch; padding: 22px var(--s-gut) 28px; --ch: min(40vh, 66vw); }
  .hero-cap { order: 1; position: static; margin: 0; }
  .hero-card { order: 2; position: static; margin: 22px auto; left: auto; }
  .hero-px .h-big { order: 3; font-size: clamp(50px, 14.5vw, 76px); }
  .hero-px .h-big .line, .hero-px .h-big .line:first-child { z-index: auto; transform: none !important; }
}
@media (max-width: 860px) {
  #topnav { display: none; }
  #menu-btn { display: inline-flex; }
  .featured { grid-template-columns: 1fr; padding: 16px; }
  .post-cards, .post-cards.two { grid-template-columns: 1fr; }
  .post-body { grid-template-columns: 1fr; }
  .post-side { position: static; }
  .next-post { grid-template-columns: 1fr; }
    .split, .split.wide-left { grid-template-columns: 1fr; }
  .split > .right { border-left: 0; padding-left: 0; border-top: 1px solid var(--s-line); padding-top: 28px; }
  .split .sticky { position: static; }
  .since-body { grid-template-columns: minmax(0, 1fr); }
  .since-figs { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--s-line); }
  .since-figs > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--s-line); }
  .since-figs dt { margin: 0; }
  .post-row { grid-template-columns: 1fr auto; }
  .post-row time { grid-column: 1 / -1; }
  .form-s .row { grid-template-columns: 1fr; }
    #foot { border-radius: 18px 18px 0 0; }
}
@media (max-width: 640px) {
  .case-hero, .post-cover { aspect-ratio: 4 / 3; min-height: 0; }
  .featured-head { flex-wrap: wrap; }
  .featured-head .h-big { flex: 1 1 100%; min-width: 0; }
  .featured-head .blurb { margin: 0; }
  .stills { grid-template-columns: 1fr; }
    #foot .grid { grid-template-columns: 1fr; }
  #foot .col { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 22px; }
  .hero-media { min-height: 260px; aspect-ratio: 4 / 4.2; }
  .hero-px { padding-bottom: 94px; }   /* the title ends above Pixie's chat head, not under it */
  #pixie-btn { right: 16px; bottom: 16px; width: 48px; height: 48px; }
  #pixie-nudge { right: 76px; bottom: 25px; }
  #pixie-chat { right: 8px; left: 8px; bottom: 84px; width: auto; max-height: 70vh; }
}

/* ═══ About (about.js; lusion.co/about was the model): a film with the name across it, lines that light up, the team in pixie dust,
   good company, the record over outlined words, how we work dealt out as cards, and the end in a swell of dots ═══ */
.ab-open, .ab-say, .ab-team, .ab-how { background: var(--s-dark); color: #f3f1f8; }
.ab-open em, .ab-say em, .ab-we .it { font-family: var(--s-serif); font-style: italic; font-weight: 400; font-variation-settings: 'SOFT' 100, 'WONK' 1; letter-spacing: -.01em; }

/* the opening: pinned for a screen and a bit while the name lifts off the film (--p, 0 to 1) and who we are rises in */
.ab-open { position: relative; height: calc(100svh - 78px + 110vh); --p: 0; }
.ab-stage { position: sticky; top: 78px; height: calc(100svh - 78px); overflow: hidden; }
#site .ab-film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(calc(1.18 - .18 * var(--p))); filter: saturate(calc(1.05 - .25 * var(--p))) brightness(calc(.95 - .3 * var(--p))); }
.ab-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(29, 21, 53, .9), rgba(29, 21, 53, .2) 55%, rgba(29, 21, 53, .35)); }
.ab-word { position: absolute; left: var(--s-gut); right: var(--s-gut); bottom: clamp(30px, 3.6vw, 56px); margin: 0; font-size: 17.2vw; font-weight: 500; line-height: .74; letter-spacing: -.055em; white-space: nowrap; }
.ab-word > span { display: flex; justify-content: space-between; animation: ab-rise 1.6s cubic-bezier(.16, 1, .3, 1) .15s both; }
.ab-word i { display: block; font-style: normal; --q: clamp(0, calc(var(--p) * 3.4 - var(--i) * .09), 1); transform: translate3d(0, calc(var(--q) * -60%), 0); opacity: calc(1 - var(--q) * 1.15); filter: blur(calc(var(--q) * 14px)); }
@keyframes ab-rise { from { transform: translateY(45%); opacity: 0; } }
.ab-hint { position: absolute; right: var(--s-gut); top: clamp(22px, 3vw, 40px); margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: calc(.8 - var(--p) * 3); }
.ab-we { position: absolute; left: var(--s-gut); right: var(--s-gut); bottom: clamp(30px, 3.6vw, 56px); display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.ab-we p { margin: 0; font-size: clamp(30px, 3.5vw, 60px); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase; }
.ab-right { text-align: right; }
.ab-we .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.ab-we .ln > span { display: block; --q: clamp(0, calc((var(--p) - .26) * 4.2 - var(--k) * .14), 1); transform: translate3d(0, calc((1 - var(--q)) * 108%), 0); }

/* the lines that light up word by word (about.js sets each word's opacity), pinned for a while on a wide screen */
.ab-say { position: relative; height: 210vh; }
.ab-say-in { position: sticky; top: 78px; height: calc(100svh - 78px); padding: clamp(40px, 6vw, 90px) var(--s-gut); display: flex; flex-direction: column; justify-content: space-between; }
.ab-say p { margin: 0; font-size: clamp(30px, 3.6vw, 60px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.ab-say .ln { display: block; }
.ab-say .w { opacity: .16; transition: opacity .25s linear; }
.ab-say-a .ln:nth-child(2) { padding-left: 1.2em; } .ab-say-a .ln:nth-child(3) { padding-left: 2.4em; } .ab-say-a .ln:nth-child(4) { padding-left: .6em; }
.ab-say-b { align-self: flex-end; text-align: right; }
.ab-say-b .ln:nth-child(2) { padding-right: 1.4em; }

/* the team: one person at a time in pixie dust (about.js), name and role at the bottom left with the timer under them, a few lines
   about them at the bottom right, everyone's first name along the bottom */
.ab-team { position: relative; height: calc(100svh - 78px); min-height: 620px; overflow: hidden; outline: none; background: #140e27; border-top: 1px solid rgba(243, 241, 248, .14); }   /* (a step deeper than the lines above, with a hairline: its own room without breaking the dark run) */
.ab-team::before { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side at 50% 52%, rgba(146, 120, 255, .16), transparent 80%); pointer-events: none; }
.ab-team-top { position: absolute; left: var(--s-gut); right: var(--s-gut); top: clamp(24px, 3.4vw, 48px); display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; }
.ab-count { margin: 10px 0 0; text-align: right; font-size: 13px; font-weight: 500; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: rgba(243, 241, 248, .55); }
.ab-count b { font-weight: 500; color: #f3f1f8; }
.ab-team-title { margin: 0; font-size: clamp(46px, 6.4vw, 112px); font-weight: 400; line-height: .9; letter-spacing: .22em; text-transform: uppercase; }
.ab-face { position: absolute; left: 50%; top: 50%; width: min(76vh, 64vw); aspect-ratio: 1; transform: translate(-50%, -50%); }
.ab-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
#site .ab-face-img { position: absolute; inset: 18%; width: 64%; height: 64%; border-radius: 50%; object-fit: cover; }
#site .ab-team.gl .ab-face-img { display: none; }
#site .ab-next { position: absolute; z-index: 3; right: var(--s-gut); top: 50%; width: clamp(64px, 6.4vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--s-lav); color: var(--s-ink); display: grid; place-items: center; transform: translateY(-50%); transition: transform .5s var(--s-ease), background .3s; }
#site .ab-next svg { width: 34%; height: 34%; transition: transform .5s var(--s-ease); }
#site .ab-next:hover { transform: translateY(-50%) scale(1.08); background: #fff; }
#site .ab-next:hover svg { transform: translateX(3px); }
.ab-people { list-style: none; margin: 0; padding: 0; }
.ab-people li { position: absolute; left: var(--s-gut); right: var(--s-gut); bottom: clamp(70px, 8vw, 110px); display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; pointer-events: none; z-index: 2; }
.ab-people li > * { opacity: 0; transform: translateY(18px); transition: opacity .45s ease-out, transform .8s var(--s-ease); }
.ab-people li.on > * { opacity: 1; transform: none; transition-delay: .25s; pointer-events: auto; }
.ab-people li.on > .ab-about { transition-delay: .38s; }
.ab-who b { display: block; font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -.02em; }
.ab-who span { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 241, 248, .55); }
.ab-about { max-width: 38ch; text-align: left; }
.ab-about p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(243, 241, 248, .86); }
.ab-loves { margin-top: 12px !important; color: rgba(243, 241, 248, .6) !important; }
.ab-loves i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-right: 10px; color: rgba(243, 241, 248, .45); }
.ab-bar { position: absolute; left: var(--s-gut); bottom: clamp(50px, 5.6vw, 80px); width: clamp(140px, 14vw, 200px); height: 2px; background: rgba(243, 241, 248, .18); z-index: 2; }
.ab-bar i { display: block; height: 100%; width: 100%; background: #f3f1f8; transform: scaleX(0); transform-origin: left; }
.ab-bar.run i { animation: ab-fill 7s linear both; }
@keyframes ab-fill { to { transform: scaleX(1); } }
.ab-picks { position: absolute; left: 0; right: 0; bottom: clamp(18px, 2.2vw, 30px); display: flex; justify-content: center; gap: clamp(14px, 2vw, 30px); z-index: 2; }
#site .ab-picks button { font-size: 12.5px; font-weight: 500; letter-spacing: .06em; color: rgba(243, 241, 248, .42); padding: 6px 2px; transition: color .3s; }
#site .ab-picks button:hover, #site .ab-picks button.on { color: #f3f1f8; }

/* good company: the names slide by in two rows, one each way */
.ab-company { padding: clamp(72px, 9vw, 140px) 0 clamp(60px, 7vw, 110px); overflow: hidden; }
.ab-company-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: 0 var(--s-gut); margin-bottom: clamp(36px, 4.4vw, 70px); }
.ab-company-head h2 { margin: 0; font-size: clamp(36px, 4.4vw, 72px); font-weight: 500; line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.ab-company-head p { margin: 0; max-width: 24ch; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--s-ink-2); text-align: right; }
.ab-row { border-top: 1px solid var(--s-line); padding: clamp(14px, 1.8vw, 26px) 0; }
.ab-row:last-of-type { border-bottom: 1px solid var(--s-line); }
.ab-row > div { display: flex; width: max-content; animation: ab-slide 70s linear infinite; }
.ab-row.rev > div { animation-direction: reverse; animation-duration: 80s; }
.ab-row span { flex: none; padding: 0 .55em; font-size: clamp(38px, 5.2vw, 88px); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; }
.ab-row span.it { font-family: var(--s-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--s-ink-2); }
@keyframes ab-slide { to { transform: translateX(-50%); } }
.ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; padding: 0; }

/* the story so far: pinned while the chapters go by (about.js). The year is the hero, its digits rolling like a clock's; the chapter's
   picture opens over it, and the title and note rise in under it */
.ab-story { position: relative; border-top: 1px solid var(--s-line); }
.ab-story-stage { display: none; }
.ab-story.pin .ab-story-stage { position: sticky; top: 78px; height: calc(100svh - 78px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: clamp(28px, 3.4vw, 50px) var(--s-gut) clamp(24px, 2.8vw, 40px); overflow: hidden; }
.ab-story.pin .ab-st-list { display: none; }
.ab-st-top { display: flex; justify-content: space-between; align-items: baseline; }
.ab-st-top h2 { margin: 0; font-size: clamp(22px, 2vw, 32px); font-weight: 500; letter-spacing: -.02em; text-transform: uppercase; }
.ab-st-count { margin: 0; display: flex; align-items: baseline; gap: .7em; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--s-ink-3); }
.ab-st-count b { font-weight: 400; color: var(--s-ink); }
.ab-st-count small { font-size: inherit; margin-left: .3em; }
.ab-st-mid { position: relative; display: flex; align-items: center; min-height: 0; }
.ab-st-year { margin: 0; display: flex; font-size: min(25vw, calc((100svh - 78px) * .5)); font-weight: 500; line-height: .78; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.ab-st-year .col { display: block; height: .78em; clip-path: inset(0 -.25em); }   /* (clipped above and below only: the tight spacing lets a digit reach past its box) */
.ab-st-year .strip { display: block; transition: transform 1.05s cubic-bezier(.7, 0, .2, 1); }
.ab-st-year .strip span { display: block; height: .78em; line-height: .78; }
.ab-st-year .col:nth-child(2) .strip { transition-delay: .05s; } .ab-st-year .col:nth-child(3) .strip { transition-delay: .1s; } .ab-st-year .col:nth-child(4) .strip { transition-delay: .15s; }
.ab-st-pics { position: absolute; right: 0; top: 50%; width: min(26vw, 46vh * 1.33); aspect-ratio: 4 / 3; transform: translateY(-50%) rotate(2deg); }
.ab-st-pics figure { position: absolute; inset: 0; margin: 0; border-radius: 10px; overflow: hidden; background: var(--s-bg-2); clip-path: inset(100% 0 0 0 round 10px); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1); box-shadow: 0 30px 70px rgba(29, 21, 53, .22); }
.ab-st-pics figure.on { clip-path: inset(0 0 0 0 round 10px); z-index: 2; }
#site .ab-st-pics img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 1.6s var(--s-ease); }
#site .ab-st-pics figure.on img { transform: none; }
.ab-st-pics figure.cut, .ab-st-list figure.cut { background: radial-gradient(circle at 50% 58%, #fff, var(--s-lav) 72%); }
#site .ab-st-pics figure.cut img, #site .ab-st-list figure.cut img { object-fit: contain; padding: 7%; }
.ab-st-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; }
.ab-st-texts { display: grid; }
.ab-st-ch { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 50px); align-items: end; pointer-events: none; }
.ab-st-ch h3 { margin: 0; font-size: clamp(34px, 3.6vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.ab-st-ch p { margin: 0; max-width: 46ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--s-ink-2); }
.ab-st-ch h3, .ab-st-ch p { overflow: hidden; padding-bottom: .08em; }
.ab-st-ch h3 > span, .ab-st-ch p > span { display: block; transform: translateY(105%); opacity: 0; transition: transform .6s cubic-bezier(.7, 0, .2, 1), opacity .3s; }
.ab-st-ch.on h3 > span, .ab-st-ch.on p > span { transform: none; opacity: 1; transition: transform 1s var(--s-ease) .35s, opacity .4s .35s; }
.ab-st-ch.on p > span { transition-delay: .45s; }
.ab-st-ticks { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 1.6vw, 26px); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--s-ink-3); }
.ab-st-ticks li { display: grid; gap: 8px; transition: color .4s; }
.ab-st-ticks li i { display: block; width: 52px; height: 2px; background: var(--s-line); position: relative; overflow: hidden; }
.ab-st-ticks li i::after { content: ''; position: absolute; inset: 0; background: var(--s-ink); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--s-ease); }
.ab-st-ticks li.on, .ab-st-ticks li.past { color: var(--s-ink); }
.ab-st-ticks li.on i::after, .ab-st-ticks li.past i::after { transform: none; }
.ab-st-list { list-style: none; margin: 0; padding: 70px var(--s-gut); display: grid; gap: 56px; }
.ab-st-list .yr { display: block; font-size: clamp(80px, 26vw, 160px); font-weight: 500; line-height: .8; letter-spacing: -.07em; margin-bottom: 18px; }
.ab-st-list figure { margin: 0 0 18px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--s-bg-2); }
#site .ab-st-list img { width: 100%; height: 100%; object-fit: cover; }
.ab-st-list h3 { margin: 0 0 8px; font-size: 30px; font-weight: 500; letter-spacing: -.03em; }
.ab-st-list p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--s-ink-2); }

/* the awards: the title and a total that counts up, then a big row per award (number, award body large, the award and the project at
   the right, an arrow). Hovering a row fills it with ink from below and floats the project's picture by the pointer */
.ab-awards { position: relative; padding: clamp(80px, 10vw, 160px) var(--s-gut); border-top: 1px solid var(--s-line); }
.ab-aw-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 40px; align-items: end; margin-bottom: clamp(40px, 5vw, 80px); }
.ab-aw-head h2 { margin: 0; font-size: clamp(64px, 10vw, 180px); font-weight: 500; line-height: .82; letter-spacing: -.055em; text-transform: uppercase; }
.ab-aw-total { grid-column: 2; grid-row: 1; margin: 0; display: grid; justify-items: end; text-align: right; }
.ab-aw-total b { font-size: clamp(64px, 10vw, 180px); font-weight: 400; line-height: .82; letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: var(--s-ink-3); }
.ab-aw-total span { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--s-ink-2); }
.ab-aw-lede { grid-column: 1; margin: 22px 0 0; max-width: 46ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; color: var(--s-ink-2); }
.ab-aw-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--s-line); }
.ab-aw-rows > li { position: relative; border-bottom: 1px solid var(--s-line); }
#site .ab-aw-rows .it { position: relative; display: grid; grid-template-columns: 3.2em minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr) 46px; gap: clamp(14px, 2vw, 30px); align-items: center; padding: clamp(18px, 2vw, 30px) clamp(10px, 1vw, 18px); color: var(--s-ink); overflow: hidden; isolation: isolate; transition: opacity .35s, color .45s; }
.ab-aw-rows .it::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--s-dark); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--s-ease); }
.ab-aw-rows .n { font-size: 13px; font-weight: 500; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--s-ink-3); transition: color .45s; }
.ab-aw-rows .org { font-size: clamp(30px, 3.8vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.ab-aw-rows .t { font-size: clamp(16px, 1.3vw, 20px); font-weight: 500; }
.ab-aw-rows .p { font-size: clamp(15px, 1.15vw, 18px); color: var(--s-ink-2); transition: color .45s; }
.ab-aw-rows .go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--s-line-strong); transition: background .45s, border-color .45s, color .45s, transform .5s var(--s-ease); }
.ab-aw-rows .go svg { width: 18px; height: 18px; }
.ab-aw-rows.hovering .it { opacity: .38; }
#site .ab-aw-rows .it.lit { opacity: 1; color: #f3f1f8; }
.ab-aw-rows .it.lit::before { transform: none; }
.ab-aw-rows .it.lit .n, .ab-aw-rows .it.lit .p { color: rgba(243, 241, 248, .62); }
.ab-aw-rows .it.lit .go { background: var(--s-lav); border-color: var(--s-lav); color: var(--s-ink); transform: rotate(-45deg); }
.ab-aw-rows > li .it > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease-out calc(var(--r) * 70ms), transform 1s var(--s-ease) calc(var(--r) * 70ms), color .45s, background .45s, border-color .45s; }
.ab-aw-rows > li.in .it > * { opacity: 1; transform: none; }
.ab-aw-rows > li.in .it .go { transform: none; }
.ab-aw-rows > li.in .it.lit .go { transform: rotate(-45deg); }
.ab-aw-peek { position: absolute; left: 0; top: 0; z-index: 5; width: clamp(220px, 19vw, 300px); aspect-ratio: 4 / 3; margin: 0; border-radius: 12px; overflow: hidden; pointer-events: none; opacity: 0; scale: .85; transition: opacity .3s, scale .45s var(--s-ease); box-shadow: 0 24px 60px rgba(29, 21, 53, .3); }
.ab-aw-peek.on { opacity: 1; scale: 1; }
#site .ab-aw-peek img { width: 100%; height: 100%; object-fit: cover; }

/* how we work: a lightbox in a dark room; while pinned the six cards are dealt from a face-down deck into two rows of three. Each is
   a sheet of animation paper, with its peg holes at the top and its name upside down in the corner, like a playing card */
.ab-how { position: relative; height: 290vh; }
.ab-how-stage { position: sticky; top: 78px; height: calc(100svh - 78px); display: grid; grid-template-rows: auto 1fr; padding: clamp(28px, 3.6vw, 56px) var(--s-gut) clamp(24px, 3vw, 44px); overflow: hidden;
  background: radial-gradient(60% 55% at 50% 62%, rgba(234, 226, 255, .17), transparent 70%); }
.ab-how-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.ab-how-head h2 { margin: 0; font-size: clamp(56px, 8.6vw, 150px); font-weight: 500; line-height: .86; letter-spacing: -.05em; text-transform: uppercase; }
.ab-how-head h2 span { display: block; }
.ab-how-head h2 span + span { padding-left: 1.6em; }
.ab-how-head p { margin: 0 0 .6em; max-width: 26ch; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 241, 248, .6); text-align: right; }
.ab-cards { position: relative; list-style: none; margin: clamp(18px, 2vw, 30px) 0 0; padding: 0; perspective: 1800px; --cw: min(23vw, calc((100svh - 78px - 330px) / 2 * 1.3), 330px); }
.ab-card { position: absolute; left: 0; top: 0; width: var(--cw); height: calc(var(--cw) / 1.3); transform-style: preserve-3d; will-change: transform; }
.ab-card-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.ab-card .front, .ab-card .back { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 40px rgba(8, 4, 20, .45), 0 2px 0 rgba(255, 255, 255, .4) inset; }
.ab-card .front { background: #f8f4ea; color: var(--s-ink); padding: calc(var(--cw) * .1) calc(var(--cw) * .07) calc(var(--cw) * .07); display: flex; flex-direction: column; }
.ab-card .back { transform: rotateY(180deg); background: #d9cffb repeating-linear-gradient(45deg, rgba(29, 21, 53, .07) 0 1px, transparent 1px 9px); display: grid; place-items: center; }
.ab-card .back > span { font-family: var(--s-serif); font-style: italic; font-size: calc(var(--cw) * .11); color: var(--s-ink); font-variation-settings: 'SOFT' 100, 'WONK' 1; padding: .1em .5em; background: #d9cffb; border-radius: 99px; }
.ab-card .pegs { position: absolute; top: calc(var(--cw) * .035); left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--cw) * .09); align-items: center; }
.ab-card .pegs i { display: block; width: calc(var(--cw) * .04); height: calc(var(--cw) * .04); border-radius: 50%; background: var(--s-dark); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.ab-card .pegs i:nth-child(2) { width: calc(var(--cw) * .11); border-radius: 99px; }
.ab-card .no { font-size: calc(var(--cw) * .14); font-weight: 500; line-height: 1; letter-spacing: -.04em; color: var(--s-ink-3); font-variant-numeric: tabular-nums; }
.ab-card h3 { margin: auto 0 0; font-size: calc(var(--cw) * .1); font-weight: 500; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.ab-card p { margin: calc(var(--cw) * .03) 0 0; max-width: 30ch; font-size: clamp(12.5px, calc(var(--cw) * .045), 15px); line-height: 1.45; color: var(--s-ink-2); }
.ab-card .foot { position: absolute; right: calc(var(--cw) * .06); top: calc(var(--cw) * .07); display: flex; gap: 8px; transform: rotate(180deg); transform-origin: center; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--s-ink-3); }
.ab-how.flat { height: auto; }
.ab-how.flat .ab-how-stage { position: static; height: auto; display: block; }
.ab-how.flat .ab-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; margin-top: 36px; perspective: none; --cw: 300px; }
.ab-how.flat .ab-card { position: relative; width: auto; height: auto; aspect-ratio: 1.3; transform: none !important; }
.ab-how.flat .back { display: none; }

/* the end: a question and the way to start */
.ab-end { position: relative; overflow: hidden; min-height: min(70svh, 640px); display: grid; align-items: center; justify-items: center; text-align: center; padding: clamp(80px, 11vw, 170px) var(--s-gut); background: var(--s-bg-2); border-top: 1px solid var(--s-line); }
.ab-end-in { position: relative; z-index: 1; }
.ab-end-in p { margin: 0 0 clamp(14px, 1.6vw, 24px); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--s-ink-2); }
#site .ab-end-in a { display: inline-block; font-size: clamp(54px, 8.4vw, 150px); font-weight: 500; line-height: .92; letter-spacing: -.05em; color: var(--s-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat; transition: background-size .7s var(--s-ease); padding-bottom: .06em; }
#site .ab-end-in a:hover { background-size: 100% 3px; }

@media (max-width: 860px) {
  .ab-open { height: calc(100svh - 78px + 70vh); }
  .ab-word { font-size: 15.4vw; bottom: auto; top: 34%; }
  .ab-we { flex-direction: column; align-items: stretch; gap: 18px; }
  .ab-we p { font-size: clamp(26px, 8vw, 40px); }
  .ab-say { height: auto; }
  .ab-say-in { position: static; height: auto; gap: 60px; padding: 90px var(--s-gut); }
  .ab-say p { font-size: clamp(26px, 7.4vw, 40px); }
  .ab-say-a .ln, .ab-say-b .ln { padding: 0 !important; }
  .ab-team { height: auto; min-height: 0; padding: 26px 0 30px; display: flex; flex-direction: column; }
  .ab-team-top { position: static; padding: 0 var(--s-gut); }
  .ab-team-title { font-size: clamp(34px, 11vw, 60px); letter-spacing: .12em; }
  .ab-face { position: relative; left: auto; top: auto; transform: none; width: min(92vw, 520px); margin: 10px auto 0; }
  #site .ab-next { right: var(--s-gut); top: calc(26px + 60px + min(92vw, 520px) * .82); width: 60px; }
  .ab-people { position: relative; min-height: 210px; }
  .ab-people li { left: var(--s-gut); right: var(--s-gut); top: 6px; bottom: auto; flex-direction: column; align-items: flex-start; gap: 14px; }
  .ab-bar { position: relative; left: auto; bottom: auto; margin: 0 var(--s-gut); }
  .ab-picks { position: static; flex-wrap: wrap; padding: 22px var(--s-gut) 0; justify-content: flex-start; }
  .ab-aw-head { grid-template-columns: minmax(0, 1fr); }
  .ab-aw-total { grid-column: 1; grid-row: 2; justify-items: start; text-align: left; margin-top: 18px; }
  .ab-aw-lede { grid-row: 3; }
  #site .ab-aw-rows .it { grid-template-columns: 2.4em minmax(0, 1fr); row-gap: 6px; padding: 20px 4px; }
  .ab-aw-rows .org { grid-column: 2; font-size: clamp(26px, 8vw, 40px); }
  .ab-aw-rows .t, .ab-aw-rows .p { grid-column: 2; }
  .ab-aw-rows .n { grid-row: 1; align-self: start; padding-top: .6em; }
  .ab-aw-rows .go { display: none; }
  .ab-company-head, .ab-how-head { flex-direction: column; align-items: flex-start; }
  .ab-company-head p, .ab-how-head p { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-row > div, .ab-word > span { animation: none; }
}

/* ═══ About, Blog, a post, Contact: in the same language as the home page ═══ */

.lu-text small + small { margin-left: 6px; }

/* Blog: the latest post, a big cover beside it (it arrives like the work cards) */
#site .featured { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; margin-top: clamp(44px, 5vw, 80px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; --r: 20px; }
#site .featured .pic { display: block; aspect-ratio: 4 / 3; border-radius: 20px; }
#site .featured .text { display: grid; justify-items: start; gap: 18px; }
#site .featured h3 { margin: 0; max-width: 18ch; font-size: clamp(30px, 3.6vw, 58px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; }
#site .featured .sum { max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--s-ink-2); }
#site .featured .meta { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--s-ink-2); }
#site .featured .meta b, #site .post-card .meta b, .post-meta b { padding: 0; background: none; border-radius: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--s-ink); }
#site .featured .who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--s-ink-2); }
#site .featured .who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--s-lav); }
#site .featured:hover .sbtn::before { transform: translateY(-30px); border-radius: 0; }
#site .featured:hover .sbtn { color: #fff; }
#site .featured:hover .sbtn .sbtn-l > span { transform: translateY(-100%); }
#site .featured:hover .sbtn .sbtn-a svg { transform: translateX(130%); }
#site .featured:hover .sbtn .sbtn-a svg + svg { transform: none; }
/* Blog: the topic tabs, outlined, the chosen one filled */
#site .filters button { padding: 11px 18px; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--s-line-strong); color: var(--s-ink-2); transition: background-color .3s, color .3s, box-shadow .3s; }
#site .filters button:hover { color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink); }
#site .filters button.active { background: var(--s-dark); color: #fff; box-shadow: none; }
/* Blog: the post cards' words come up after their picture */
.post-cards { gap: clamp(40px, 4vw, 60px) clamp(18px, 2vw, 28px); }
#site .post-card .pic { display: block; }
.post-card[data-card] :is(.meta, h3, p, .who) { opacity: 0; translate: 0 12px; transition: opacity .7s ease-out calc(var(--d) + .4s), translate 1s cubic-bezier(.16, 1, .3, 1) calc(var(--d) + .4s); }
.post-card[data-card].in :is(.meta, h3, p, .who) { opacity: 1; translate: 0 0; }

/* A post: a big title, the cover opening out, the next post as a dark panel */
.post-head { max-width: 1100px; margin-bottom: clamp(30px, 4vw, 56px); }
.post-meta { display: flex; gap: 12px; align-items: baseline; margin: 0 0 22px; font-size: 13.5px; color: var(--s-ink-2); }
.post-title { margin: 0 0 30px; max-width: 18ch; font-size: clamp(40px, 5.6vw, 92px); font-weight: 500; line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
#site .post-cover { --r: clamp(18px, 2.4vw, 30px); overflow: visible; background: none; border-radius: 0; }
#site .post-cover .pic { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--r); background: var(--s-bg-2); }
.author-box .sbtn { height: 46px; padding: 0 18px 0 20px; font-size: 14px; }
#site .next-post { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: clamp(48px, 6vw, 90px); padding: 16px clamp(16px, 2vw, 28px) 16px 16px; border: 0; border-radius: 24px; background: var(--s-dark); color: #fff; }
#site .next-post .pic { display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
#site .next-post .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
#site .next-post:hover .pic img { transform: scale(1.05); }
.np-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
#site .next-post h3 { margin: 8px 0 10px; font-size: clamp(22px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; color: #fff; }
#site .next-post .meta { font-size: 13px; color: rgba(255, 255, 255, .6); }
.np-go { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); transition: background-color .3s, color .3s, transform .5s cubic-bezier(.16, 1, .3, 1); }
.np-go svg { width: 20px; height: 20px; }
#site .next-post:hover .np-go { background: #fff; color: var(--s-ink); transform: rotate(-45deg); }

/* Contact: the address huge, then the form on a white card beside Priya, the studio and the four words */
.c-mail { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: clamp(44px, 5vw, 80px) 0 0; padding: clamp(18px, 2vw, 30px) 0; border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); }
.c-mail span { font-size: clamp(20px, 6.4vw, 108px); font-weight: 500; letter-spacing: -.05em; line-height: 1; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .7s cubic-bezier(.16, 1, .3, 1); }
.c-mail:hover span { background-size: 100% 2px; }
.c-mail i { display: grid; place-items: center; flex: none; width: clamp(56px, 6vw, 92px); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--s-line-strong); transition: background-color .35s, color .35s, transform .6s cubic-bezier(.16, 1, .3, 1); }
.c-mail i svg { width: 40%; height: 40%; }
#site .c-mail:hover i { background: var(--s-dark); color: #fff; transform: rotate(-45deg); }
.c-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: start; margin-top: clamp(44px, 5vw, 80px); }
.form-s.c-form { max-width: none; margin: 0; padding: clamp(24px, 3vw, 44px); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(29, 21, 53, .06), 0 30px 70px rgba(29, 21, 53, .08); gap: 26px; }
.c-form .eyebrow-s { margin: 0; }
.c-kinds { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.c-kinds legend { padding: 0; margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--s-ink-3); }
.c-kinds label { position: relative; display: inline-block; }
.c-kinds input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
#site .form-s .c-kinds label span { display: block; margin: 0; padding: 11px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-line-strong); transition: background-color .25s, color .25s, box-shadow .25s; }
.c-kinds label:hover span { box-shadow: inset 0 0 0 1px var(--s-ink); }
#site .form-s .c-kinds input:checked + span { background: var(--s-dark); color: #fff; box-shadow: none; }
.c-kinds input:focus-visible + span { outline: 2px solid var(--s-ink); outline-offset: 2px; }
.c-side { display: grid; gap: clamp(26px, 3vw, 40px); }
.c-person { padding: clamp(22px, 2.4vw, 32px); border-radius: 24px; background: var(--s-dark); color: #fff; }
.c-person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--s-lav); }
.c-person p { margin: 18px 0 14px; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
#site .c-person a { color: #fff; font-size: 15px; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.c-info h5 { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--s-ink-3); }
.c-info p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--s-ink-2); }

@media (max-width: 860px) {
  #site .featured { grid-template-columns: minmax(0, 1fr); }
  #site .next-post { grid-template-columns: 96px minmax(0, 1fr); }
  .np-go { display: none; }
  .c-grid { grid-template-columns: minmax(0, 1fr); }
  .c-mail span { font-size: 8vw; white-space: nowrap; }
  .c-mail i { display: none; }
}