/* ---------- Fonts ----------
   Newsreader and DM Sans load from Google Fonts (compressed WOFF2, Latin only), linked in index.html.
   The same fonts are also kept in fonts/ as TTF files. */

/* ---------- Tokens ---------- */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --ink:#16161A; --muted:#16161A; --line:rgba(22,22,26,.14);
  --red:#E53029; --on-red:#FFFFFF; --tile-l:86%; --tile-s:12%;
  --serif:"Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* DM Sans type scale: major second (1.125) on a 16px base. DM Sans is a low-contrast geometric sans
     drawn for small text, so it carries only the small sizes; everything large is set in Newsreader. */
  --fs-xs:13px; --fs-sm:14px; --fs-base:16px; --fs-md:18px; --fs-lg:20px;
  /* Newsreader scale, Substack-style: modest sizes, heavier weights (500-600), used on every page.
     Desktop sizes: 22, 24, 28, 40, 48, 52. Section labels use --fs-lg (20px) in semibold. */
  --fs-s1:clamp(20px,1.6vw,22px);    /* card and row titles, decision headings */
  --fs-s2:clamp(20px,1.7vw,24px);    /* leads, quotes, list links */
  --fs-s3:clamp(24px,2vw,28px);      /* sub-section headings, previous/next */
  --fs-s4:clamp(28px,2.8vw,40px);    /* footer line */
  --fs-s5:clamp(32px,3.4vw,48px);    /* page titles in the banner */
  --fs-s6:clamp(30px,3.6vw,52px);    /* the red statement */
  --pad:clamp(20px,4.5vw,64px); --max:1360px;
  /* grid + spacing rhythm (4px base) */
  --gutter:32px;
  --space-section:clamp(64px, 5.33vw + 43.2px, 120px);   /* 64 at 390 -> 120 at 1440 */
  --space-group:clamp(40px, 2.29vw + 31.1px, 64px);      /* 40 at 390 -> 64 at 1440 */
  --head-gap:40px;     /* section head -> content */
  --media-gap:16px;    /* image -> caption, card image -> title, portrait -> quote */
  --btn-gap:12px;      /* space between buttons in a row */
  --pill-x:12px;       /* horizontal padding of pills, chips and tags */
  color-scheme:light;
}
@media (max-width:1279px){:root{--gutter:24px}}
@media (max-width:767px){:root{--gutter:16px}}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17171A; --surface:#1F1F23; --ink:#F2F1EE; --muted:#F2F1EE; --line:rgba(242,241,238,.14);
    --red:#E53029; --on-red:#FFFFFF; --tile-l:24%; --tile-s:8%;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#17171A; --surface:#1F1F23; --ink:#F2F1EE; --muted:#F2F1EE; --line:rgba(242,241,238,.14);
  --red:#E53029; --on-red:#FFFFFF; --tile-l:24%; --tile-s:8%;
  color-scheme:dark;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(80px + env(safe-area-inset-top,0px))}
*,*::before,*::after{box-sizing:inherit;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--fs-base);line-height:1.6;font-optical-sizing:auto;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
img,video{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--bg);padding:8px 16px;z-index:100}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,.serif{overflow-wrap:break-word;text-wrap:balance;font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.08;font-optical-sizing:auto}
h2{font-size:var(--fs-s4)}
h3{font-family:var(--sans);font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em;line-height:1.35}
p{max-width:62ch;text-wrap:pretty}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:24px;height:64px}
.brand{white-space:nowrap;font-family:var(--serif);font-size:22px;text-decoration:none;letter-spacing:-.01em}
/* Header keys: name and role in cells divided by lines that run the full height of the header, like piano keys */
.keys{display:flex;align-self:stretch;min-width:0}
.key{display:flex;align-items:center;padding:0 20px;white-space:nowrap;border-right:1px solid var(--line)}
.key:first-child{padding-left:0}
.key-role{font-size:var(--fs-sm);font-weight:500;letter-spacing:.005em;line-height:1.5}
@media (max-width:900px){.key-role{display:none}.key{border-right:0}}
.nav-links{display:flex;gap:24px;margin-left:auto;list-style:none;padding:0}
.nav-links a{text-decoration:none;font-size:var(--fs-sm);font-weight:500;padding:8px 0;border-bottom:1.5px solid transparent}
.nav-links a:hover{border-color:var(--ink)}
.nav-links a[aria-current="page"]{border-color:var(--red);color:var(--red)}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn svg{width:18px;height:18px}
.nav-links{display:none!important}
.more-btn{display:inline-flex;margin-left:auto}
/* ---- "There's more" button: replaces the hamburger on tablet and mobile ---- */
/* Theme toggle sits to the right of the menu button, so it stays put while the label changes width */
.more-btn{margin-left:auto!important}
#themeBtn{order:2;margin-left:-16px;flex:none}
.more-word{margin-top:-4px}
@media (max-width:480px){#themeBtn{margin-left:-4px}}
@media (max-width:360px){#themeBtn{display:none}}
.more-btn{align-items:center;gap:8px;height:44px;padding:0 8px 0 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;transition:background .25s,color .25s}
.more-btn:hover,.more-btn:focus-visible,.more-btn[aria-expanded="true"]{background:#E53029;color:#fff}
.more-word{display:inline-block;overflow:hidden;height:1.4em;line-height:1.4em;vertical-align:bottom;text-align:left;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.more-word span{display:inline-block;font-family:var(--serif);font-style:italic;font-size:17px;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.more-word span.out{transform:translateY(-110%);opacity:0}
.more-word span.in{transform:translateY(110%);opacity:0;transition:none}
.more-plus{width:30px;height:30px;border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;flex:none;transition:background .25s,color .25s}
.more-btn:hover .more-plus,.more-btn:focus-visible .more-plus,.more-btn[aria-expanded="true"] .more-plus{background:#fff;color:#E53029}
.more-plus svg{width:15px;height:15px}
@media (max-width:480px){
  .nav-in{gap:12px}
  .more-btn{height:40px;padding:0 4px 0 12px;gap:8px;font-size:var(--fs-sm)}
  .more-word span,.more-measure{font-size:15px!important}
  .more-plus{width:28px;height:28px}
}
@media (max-width:360px){.brand{font-size:19px}}
.more-measure{position:absolute;visibility:hidden;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:17px}

/* ---- Balloon menu: inflates out of the menu button ---- */
.drawer{position:fixed;inset:0;z-index:60;display:none;background:rgba(10,10,14,.12)}
.drawer.open{display:block}
.balloon{position:fixed;width:min(400px,calc(100vw - 24px));max-height:calc(100svh - 24px);overflow-y:auto;background:#E53029;color:#fff;border-radius:32px;padding:12px 12px 24px 32px;box-shadow:0 30px 60px -20px rgba(120,0,20,.45)}
.balloon-top{display:flex;justify-content:flex-end;height:44px;align-items:center}
.close-btn{width:44px;height:44px;border-radius:50%;background:#fff;color:#E53029;display:grid;place-items:center}
.close-btn svg{width:16px;height:16px}
.close-btn:hover{transform:rotate(90deg);transition:transform .3s}
.balloon ul{list-style:none;padding:0 16px 0 0;margin:8px 0 4px}
.balloon li{border-bottom:1px solid rgba(255,255,255,.28)}
.balloon li:last-child{border-bottom:0}
.balloon a{display:block;text-decoration:none;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,36px);line-height:1.15;letter-spacing:-.015em;padding:8px 0;transition:transform .25s}
.balloon a:hover{transform:translateX(6px);font-style:italic}
.balloon a[aria-current="page"]{font-style:italic}
.balloon a[aria-current="page"]::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;margin-left:12px;vertical-align:middle}
.balloon :focus-visible{outline-color:#fff}
.theme-row{display:inline-flex;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:3px}
.theme-row button{height:34px;padding:0 16px;border-radius:999px;font-size:var(--fs-sm);color:#fff}
.theme-row button[aria-pressed="true"]{background:#fff;color:#E53029}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;font-weight:500;font-size:var(--fs-base);text-decoration:none;border-radius:2px;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--red);color:var(--on-red)}
.btn-primary:hover{background:var(--ink);color:var(--bg)}
.btn-ghost{border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}

/* ---------- Structure ---------- */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.rule{border-top:1px solid var(--line)}
.sec{padding:var(--space-section) 0 0}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;padding-bottom:12px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.sec-head h2{grid-column:1 / span 8;font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.sec-head .aside{grid-column:9 / span 4;justify-self:end}
@media (max-width:760px){.sec-head h2,.sec-head .aside{grid-column:1 / -1}.sec-head .aside{justify-self:start;margin-top:20px}}


/* ---------- Hero ---------- */
.hero{padding-top:clamp(40px,7vh,88px)}
.social{display:flex;gap:8px;align-items:center}
.social a{display:inline-flex;align-items:center;height:32px;padding:0 var(--pill-x);border:1px solid var(--ink);border-radius:999px;text-decoration:none;font-weight:500;font-size:var(--fs-xs);letter-spacing:.012em;transition:background .2s,color .2s,border-color .2s}
.social a:hover{background:#E53029;border-color:#E53029;color:#fff}
.hero-meta{align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
.hero-meta > span:nth-child(1){grid-column:1 / span 4;color:var(--ink);font-weight:500}
.hero-meta > span:nth-child(2){grid-column:5 / span 4}
.hero-meta > span:nth-child(3){grid-column:9 / span 4;text-align:right}
.hero h1{font-size:clamp(46px,8.4vw,142px);line-height:.98;letter-spacing:-.035em;font-weight:350;padding:clamp(40px,8vh,96px) 0 clamp(40px,7vh,88px);max-width:15ch}
/* Desktop: size the headline by screen height as well as width, so the subtext always shows in the first view */
@media (min-width:1121px){
  .hero{padding-top:clamp(24px,4vh,56px)}
  .hero h1{font-size:clamp(56px,min(6.4vw,11.5vh),116px);padding:clamp(28px,5.5vh,72px) 0 clamp(28px,5vh,64px)}
  .hero .hero-foot p{grid-column:1 / span 6;max-width:none;padding-right:0}
  /* Buttons sit on the subtext's last line */
  .hero-foot{align-items:end}
  /* Button bottoms line up with the bottom of the subtext's last line (minus its half-leading) */
  .hero-cta{align-self:end;margin-bottom:calc(.175 * clamp(var(--fs-md),1.4vw,var(--fs-lg)))}
}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln > span{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.hero h1.on .ln > span{transform:none}
/* ---- Headline play: lens warp + sargam ---- */
.hero h1.done .ln{overflow:visible}
@media (min-width:601px){.hero h1.hplay{max-width:none}}
.hero h1.hplay{touch-action:pan-y;cursor:default;position:relative;z-index:1}
.hero{position:relative}
.hw{display:inline-block;position:relative}
.hc{display:inline-block;transform-origin:50% 85%;will-change:transform}
.note{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);font-family:var(--sans);font-size:var(--fs-xs);font-weight:600;letter-spacing:0;color:var(--red);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .5s,transform .5s}
.note em{font-family:var(--serif);font-weight:400;color:var(--muted);margin-left:4px}
.note.show{opacity:1;transform:translate(-50%,12px);transition:opacity .08s,transform .25s}
.snd-wrap{grid-column:9 / span 4;justify-self:end;position:relative}
.eq{display:flex;align-items:center;gap:2.5px;height:16px}
.eq i{display:block;width:2.5px;height:3px;border-radius:2px;background:currentColor;transition:height .3s}
.snd[aria-pressed="true"] .eq i{animation:eq 1s ease-in-out infinite}
.snd[aria-pressed="true"] .eq i:nth-child(1){animation-delay:-.2s}.snd[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.6s}
.snd[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-.1s}.snd[aria-pressed="true"] .eq i:nth-child(4){animation-delay:-.8s}
.snd[aria-pressed="true"] .eq i:nth-child(5){animation-delay:-.4s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
.snd[aria-pressed="false"]{opacity:.55}
.snd-hint{position:absolute;right:8px;top:calc(100% + 10px);background:var(--bg);padding:0 6px;white-space:nowrap;font-size:var(--fs-xs);color:var(--red);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s;pointer-events:none}
.snd-hint.show{opacity:1;transform:none}
.snd{width:40px!important;height:40px!important;padding:0!important;justify-content:center;border-color:var(--ink)!important;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-xs);font-weight:500;color:var(--ink)}
.snd:hover{border-color:var(--ink)}
.snd svg{width:15px;height:15px;flex:none}
.snd span{white-space:nowrap}
.snd[aria-pressed="true"]{border-color:var(--ink)}
.snd[aria-pressed="true"] .wave{stroke:var(--red)}
.snd .wave{display:none}.snd[aria-pressed="true"] .wave{display:inline}.snd[aria-pressed="true"] .x{display:none}
.hero-foot{padding:24px 0 0;border-top:1px solid var(--line);align-items:start}
.hero-foot p{grid-column:1 / span 5;font-size:clamp(var(--fs-md),1.4vw,var(--fs-lg));color:var(--muted)}
.hero-cta{grid-column:9 / span 4;display:flex;gap:var(--btn-gap);justify-content:flex-end;flex-wrap:wrap}
@media (min-width:761px) and (max-width:1120px){
  .hero-foot p{grid-column:1 / span 6;max-width:none}
  .hero-cta{grid-column:1 / -1;justify-content:flex-start;margin-top:24px}
}
@media (max-width:760px){
  .hero-meta > span:nth-child(2){display:none}
  .hero-meta > span:nth-child(1){grid-column:1 / span 6;align-self:center}
  .snd-wrap{grid-column:7 / span 6}
  .hero-foot p,.hero-cta{grid-column:1 / -1;justify-content:flex-start}
  .hero-cta{margin-top:24px}
}

/* ---------- Manifesto: the one bold moment ---------- */
.manifesto{position:relative;background:var(--red);color:var(--on-red);margin-top:var(--space-section);padding:clamp(72px,11vw,160px) 0}
.man-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.manifesto p,.manifesto h2{max-width:none}
.man-big{grid-column:1 / -1;font-family:var(--serif);font-size:clamp(44px,8vw,132px);line-height:.98;letter-spacing:-.035em;font-weight:350;color:inherit;margin:0}
.man-big em{display:block;font-style:italic;padding-left:25%}
.man-stat{grid-column:1 / span 5;display:flex;flex-direction:column;gap:12px;margin-top:clamp(48px,7vw,104px);padding-top:24px;border-top:1.5px solid #fff}
.man-num{font-family:var(--serif);font-size:clamp(64px,8vw,128px);line-height:.85;font-weight:350;letter-spacing:-.04em}
.man-cap{font-size:var(--fs-sm);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.man-body{grid-column:7 / -1;margin:clamp(48px,7vw,104px) 0 0;padding-top:24px;border-top:1.5px solid #fff;font-family:var(--serif);font-size:clamp(20px,1.9vw,30px);line-height:1.4;letter-spacing:-.01em;font-weight:400}
.man-body mark{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
@media (max-width:860px){
  .man-big em{padding-left:0}
  .man-stat{grid-column:1 / -1;margin-top:48px;flex-direction:row;align-items:flex-end;gap:16px}
  .man-cap{padding-bottom:6px;max-width:16ch}
  .man-body{grid-column:1 / -1;margin-top:32px;padding-top:0;border-top:0;font-size:21px}
}

/* ---------- About ---------- */
.about .lead{grid-column:1 / span 6;font-family:var(--serif);font-size:var(--fs-s2);line-height:1.25;letter-spacing:-.015em;font-weight:350}
.about .body{grid-column:8 / span 5;color:var(--muted)}
.about .body p + p{margin-top:16px}
@media (max-width:860px){.about .lead,.about .body{grid-column:1 / span 6}.about .body{margin-top:24px}}
@media (max-width:767px){.about .lead,.about .body{grid-column:1 / -1}}
.steps{list-style:none;padding:0;margin-top:var(--space-group);border-top:1px solid var(--line)}
.steps li{grid-column:span 3;padding:24px 0 0}
.steps .n{font-family:var(--serif);font-size:44px;line-height:1;color:var(--red);font-weight:300}
.steps h3{margin:16px 0 8px}
.steps p{font-size:var(--fs-sm);color:var(--muted);max-width:30ch}
@media (max-width:860px){.steps li{grid-column:span 6;padding-bottom:32px}}
@media (max-width:480px){.steps li{grid-column:1 / -1}}

/* ---------- Video ---------- */
.video{position:relative;aspect-ratio:16/9;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.video video{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:var(--red);color:var(--on-red);display:grid;place-items:center;transition:transform .25s}
.play:hover{transform:scale(1.06)}
.play svg{width:26px;height:26px;margin-left:4px}
.caption{display:flex;justify-content:space-between;gap:16px;padding-top:var(--media-gap);font-size:var(--fs-sm);color:var(--muted)}

/* ---------- Cards ---------- */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-group) var(--gutter);container-type:inline-size}
.card{grid-column:span 4;text-decoration:none;display:block}
.card.wide{grid-column:span 8}.card.half{grid-column:span 6}.card.full{grid-column:span 12}
.cover{position:relative;height:clamp(220px,27vw,420px);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;display:grid;place-items:center}
.card.full .cover{height:clamp(260px,40vw,640px)}
.cover .art{position:absolute;inset:6% 5%;width:90%;height:88%}
.cover .ph{font-size:var(--fs-xs);color:var(--muted)}
.card .cover > *{transition:transform .5s}
.card:hover h3{color:var(--red)}
.card-meta{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding-top:var(--media-gap)}
.card-meta h3{font-family:var(--serif);font-size:var(--fs-s1);font-weight:600;letter-spacing:-.01em;line-height:1.25;transition:color .2s}
.card-meta .yr{font-size:var(--fs-sm);color:var(--muted)}
.card-meta p{grid-column:1 / -1;max-width:calc((100cqw - 11 * var(--gutter)) / 12 * 6 + 5 * var(--gutter));font-size:var(--fs-sm);color:var(--muted)}
.card-meta .kind{grid-column:1 / -1;font-size:var(--fs-xs);font-weight:500;color:var(--muted);order:-1}
@media (max-width:767px){.card-meta p{max-width:none}}
@media (max-width:900px){.card,.card.wide{grid-column:span 6}}
@media (max-width:600px){.card,.card.wide,.card.half,.card.full{grid-column:1 / -1}.card .cover,.card.full .cover{height:auto;aspect-ratio:4/3}}

/* Listing pages: four equal cards per row from 1024px (two below, one on phone) */
.grid-4 .card{grid-column:span 3}
.grid-4 .cover{height:auto;aspect-ratio:4/3}
.grid-4 .card-meta h3{min-height:2.5em}
.grid-4 .card-meta p{max-width:none;min-height:4.65em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1023px){.grid-4 .card{grid-column:span 6}}
@media (max-width:600px){.grid-4 .card{grid-column:1 / -1}.grid-4 .card-meta h3,.grid-4 .card-meta p{min-height:0}.grid-4 .card-meta p{-webkit-line-clamp:unset}}

/* ---------- Brands ---------- */
.brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line)}
.brands li{list-style:none;aspect-ratio:3/1;display:grid;place-items:center;text-align:center;padding:12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:clamp(var(--fs-sm),1.4vw,var(--fs-lg));font-weight:600;letter-spacing:-.01em;color:var(--ink)}
@media (max-width:600px){.brands li{aspect-ratio:auto;min-height:88px;font-size:var(--fs-sm)}}

/* ---------- Testimonials: small and plain ---------- */
.rec-tabs{display:flex;gap:24px;flex-wrap:wrap;margin:-12px 0 var(--head-gap)}
.rec-tabs button{font-size:var(--fs-base);font-weight:500;padding:8px 0;border-bottom:1.5px solid transparent;letter-spacing:.005em}
.rec-tabs button:hover{border-color:var(--ink)}
.rec-tabs button[aria-selected="true"]{border-color:var(--red);color:var(--red)}
.t-photo{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--bg)}
.ph-photo{display:block;overflow:hidden}
.ph-photo svg{display:block}
.ph-photo span{font-family:var(--serif);font-size:clamp(40px,4vw,64px);font-weight:300;letter-spacing:-.02em}
.t-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);align-items:start}
@media (max-width:1000px){.t-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){
  .t-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad);scroll-padding:0 var(--pad)}
  .t-grid::-webkit-scrollbar{display:none}
  .t-grid .t-card{scroll-snap-align:start}
}
.t-card{padding-top:0;display:flex;flex-direction:column;gap:var(--media-gap)}
.t-card .who{margin-top:auto}
.t-card blockquote{font-family:var(--serif);font-size:var(--fs-md);line-height:1.45;font-weight:400}
.who{font-size:var(--fs-sm)}
.who b{font-weight:600;display:block}
.who span{color:var(--muted)}

/* ---------- Ask ---------- */
.ask{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--space-group) 0}
.ask .intro{grid-column:1 / span 5}
.ask .intro h2{font-size:var(--fs-s3)}
.ask .tool{grid-column:7 / span 6}
.ask-box{display:flex;border:1px solid var(--ink)}
.ask-box input{flex:1;min-width:0;background:none;border:0;font:inherit;color:var(--ink);padding:0 16px;height:48px}
.ask-box input:focus{outline:none}
.ask-box:focus-within{outline:2px solid var(--red);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{border:1px solid var(--line);padding:8px var(--pill-x);font-size:var(--fs-sm);border-radius:2px}
.chip:hover{border-color:var(--ink)}
.ask-out{margin-top:16px;font-size:var(--fs-sm);color:var(--muted);min-height:1.6em}
@media (max-width:860px){.ask .intro,.ask .tool{grid-column:1 / -1}.ask .tool{margin-top:32px}}

/* ---------- Footer ---------- */
.foot{padding:var(--space-section) 0 40px}
.foot > .wrap{container-type:inline-size}
.foot h2{font-size:var(--fs-s4);letter-spacing:-.02em;line-height:1.15;font-weight:500;max-width:calc((100cqw - 11 * var(--gutter)) / 12 * 10 + 9 * var(--gutter))}
@media (max-width:767px){.foot h2{max-width:none}}
.foot-cta{display:flex;gap:var(--btn-gap);flex-wrap:wrap;margin-top:40px}
.foot-row{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin-top:80px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.foot-row nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- Internal pages ---------- */
.page-head{padding-top:var(--space-section);container-type:inline-size}
.crumb{max-width:calc((100cqw - 11 * var(--gutter)) / 12 * 6 + 5 * var(--gutter))}
@media (max-width:767px){.crumb{max-width:none}}
.page-head h1{font-size:var(--fs-s5);line-height:1.12;letter-spacing:-.02em;font-weight:500}
.page-head .sub{padding:24px 0;margin-top:var(--space-group);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:var(--head-gap);align-items:center}
.page-head .sub .count{grid-column:10 / span 3;text-align:right;font-size:var(--fs-sm);color:var(--muted)}
.page-head .sub p{grid-column:1 / span 6;color:var(--muted);font-size:var(--fs-lg)}
.filters{grid-column:7 / span 6;display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.filters a{text-decoration:none;font-size:var(--fs-sm);font-weight:500;padding:4px 0;border-bottom:1.5px solid transparent}
.filters a:hover{border-color:var(--ink)}
.filters a[aria-current="page"]{color:var(--red);border-color:var(--red)}
@media (max-width:767px){.page-head .sub p,.filters{grid-column:1 / -1;justify-content:flex-start}.filters{margin-top:16px}}
.crumb{font-size:var(--fs-sm);color:var(--muted);margin-bottom:20px}
.case-h1{font-size:var(--fs-s5)!important}
.case-cover{height:auto;aspect-ratio:21/9}
.case-meta{padding:24px 0;border-bottom:1px solid var(--line);margin-bottom:var(--space-group)}
.case-meta div{grid-column:span 3}
.case-meta dt{font-size:var(--fs-xs);color:var(--muted)}
.case-meta dd{font-weight:500;margin-top:4px}
@media (max-width:700px){.case-meta div{grid-column:span 6;margin-bottom:12px}.case-cover{aspect-ratio:4/3}}
.case-block{margin-bottom:var(--space-section)}
.case-block h2{grid-column:1 / span 4;font-size:var(--fs-s3);font-weight:600;line-height:1.2}
.case-block .c{grid-column:7 / span 6}
.case-block p{color:var(--muted);font-size:var(--fs-md)}
@media (max-width:1023px){.case-block h2{grid-column:1 / -1}.case-block .c{grid-column:1 / span 6;margin-top:16px}}
@media (max-width:767px){.case-block .c{grid-column:1 / -1}}
.next{display:block;text-decoration:none;padding:40px 0;border-top:1px solid var(--line)}
.next span{font-size:var(--fs-sm);color:var(--muted)}
.next .serif{font-size:var(--fs-s3);margin-top:8px;font-weight:500}
.next:hover .serif{color:var(--red)}
.empty{padding:40px 0;color:var(--muted);grid-column:1 / span 6}
@media (max-width:767px){.empty{grid-column:1 / -1}}

@media (max-width:600px){
  .hero h1 .ln{display:inline;overflow:visible}
  .filters{gap:8px 20px}
  .filters a{white-space:nowrap}
}
/* ---------- Tags: small, quiet pills ---------- */
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{height:26px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-xs);font-weight:500;letter-spacing:.012em;line-height:1}

/* ---------- Work: thumbnail, title, summary, tags, Read more ---------- */
.work-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-group) var(--gutter)}
.work-item{display:flex;flex-direction:column;height:100%;text-decoration:none}
.work-thumb{height:auto;aspect-ratio:4/3;margin-bottom:var(--media-gap)}
.work-list.portrait .work-thumb{aspect-ratio:4/5}
.work-thumb .cover-img{top:50%;left:8%;width:84%;height:auto;transform:translateY(-50%);border-bottom:1px solid var(--line)}
.work-item h3{font-family:var(--serif);font-size:var(--fs-s1);font-weight:600;line-height:1.25;letter-spacing:-.01em;text-wrap:balance;min-height:2.5em;transition:color .2s}
.work-item p{margin-top:12px;font-size:var(--fs-base);line-height:1.55;min-height:4.65em;max-width:52ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.work-item .tags{margin-top:16px}
.work-go{align-self:flex-start;margin-top:auto;padding-top:24px;font-size:var(--fs-sm);font-weight:500;line-height:1.5;border-bottom:1.5px solid var(--ink);transition:color .2s,border-color .2s}
.work-item:hover h3,.work-item:hover .work-go{color:var(--red);border-color:var(--red)}
@media (max-width:1023px){.work-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.work-list{grid-template-columns:1fr}.work-item h3,.work-item p{min-height:0}.work-item p{-webkit-line-clamp:unset}}
/* Narrower four-up cards (1024-1359px): allow a fourth line, and room for two rows of tags, so cards stay equal */
@media (min-width:1024px) and (max-width:1359px){.grid-4 .card-meta p,.work-item p{min-height:6.2em;-webkit-line-clamp:4}.work-item .tags{gap:4px;min-height:56px;align-content:flex-start}.work-item .tags li{padding:0 8px}}

/* ---------- Case study ---------- */
.cover-img{position:absolute;inset:8% 7% 0;width:86%;height:92%;object-fit:cover;object-position:top left;border:1px solid var(--line);border-bottom:0}
.cs-head{container-type:inline-size}
.cs-intro{margin-top:var(--space-group);padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:var(--head-gap);
  max-width:none;display:flex;flex-direction:column;gap:12px}
.cs-intro p{max-width:calc((100cqw - 11 * var(--gutter)) / 12 * 6 + 5 * var(--gutter));font-size:var(--fs-base);line-height:1.55}
.cs-intro .cs-sum{font-size:var(--fs-lg)}
.cs-intro .tags{margin-top:4px}
@media (max-width:767px){.cs-intro p{max-width:none}}
.cs-hero{height:auto;aspect-ratio:21/9;margin-bottom:var(--space-group)}
@media (max-width:700px){.cs-hero{aspect-ratio:4/3}}
.cs-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.cs-toc{grid-column:1 / span 3;position:sticky;top:calc(96px + env(safe-area-inset-top,0px))}
.cs-toc ol{list-style:none;padding:0;border-left:1px solid var(--line)}
.cs-toc a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:1.5px solid transparent;text-decoration:none;font-size:var(--fs-sm);font-weight:500;letter-spacing:.005em;line-height:1.4}
.cs-toc a:hover{border-left-color:var(--ink)}
.cs-toc a[aria-current="true"]{border-left-color:var(--red);color:var(--red)}
.cs-body{grid-column:5 / span 8;container-type:inline-size;min-width:0}
.cs-sec{padding-bottom:var(--space-section);scroll-margin-top:16px}
.cs-sec + .cs-sec{padding-top:40px;border-top:1px solid var(--line)}
.cs-sec h2{font-size:var(--fs-s3);line-height:1.2;font-weight:600;letter-spacing:-.01em;max-width:20ch;margin-bottom:var(--head-gap)}
/* Running text never wider than 6 of the 12 columns */
.cs-text{max-width:calc((100cqw - 7 * var(--gutter)) / 8 * 6 + 5 * var(--gutter))}
.cs-text p{max-width:none;font-size:var(--fs-md);letter-spacing:-.005em;line-height:1.6}
.cs-text p + p{margin-top:16px}
.cs-text .cs-lead{font-family:var(--serif);font-size:var(--fs-s2);line-height:1.4;letter-spacing:-.01em;font-weight:400;margin-bottom:24px}
.cs-caps{list-style:none;padding:0;margin-top:var(--space-group);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cs-caps li{padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-caps h3{margin-bottom:8px}
.cs-caps p{font-size:var(--fs-sm);letter-spacing:.005em;line-height:1.55}
.cs-figs{display:flex;flex-direction:column;gap:var(--space-group);margin-top:var(--space-group)}
.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.cs-fig img{width:100%;height:auto;border:1px solid var(--line)}
.cs-fig figcaption{padding-top:var(--media-gap);font-size:var(--fs-sm);letter-spacing:.005em;line-height:1.5;max-width:62ch;text-wrap:pretty}
.cs-decisions{margin-top:var(--space-group);border-top:1px solid var(--line)}
.cs-decision{padding:32px 0;border-bottom:1px solid var(--line)}
.cs-decision h3{font-family:var(--serif);font-size:var(--fs-s1);font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:16px;max-width:28ch;text-wrap:balance}
.cs-decision .cs-text p{font-size:var(--fs-base)}
.cs-decision .cs-text p + p{margin-top:12px}
.cs-principle{margin-top:var(--space-group);padding:24px 0 0;border-top:1.5px solid var(--red);font-family:var(--serif);font-style:italic;font-size:var(--fs-s2);line-height:1.25;letter-spacing:-.015em;font-weight:350;max-width:24ch;text-wrap:balance}
.cs-note{margin-top:var(--space-group);padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:var(--fs-sm);letter-spacing:.005em;line-height:1.55;max-width:62ch}
.cs-pn{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);margin-top:var(--space-section)}
.cs-pn a{display:block;text-decoration:none;padding:40px 0;border-top:1px solid var(--line)}
.cs-pn .cs-next{text-align:right}
.cs-pn span{font-size:var(--fs-sm);letter-spacing:.005em}
.cs-pn .serif{font-size:var(--fs-s3);line-height:1.2;margin-top:8px;font-weight:500}
.cs-pn a:hover .serif{color:var(--red)}
/* Below 1024: the section list becomes a sticky row under the header */
@media (max-width:1023px){
  .cs-toc{grid-column:1 / -1;top:calc(64px + env(safe-area-inset-top,0px));z-index:40;margin:0 calc(var(--pad) * -1) var(--space-group);padding:0 var(--pad);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .cs-toc::-webkit-scrollbar{display:none}
  .cs-toc ol{display:flex;gap:24px;border-left:0}
  .cs-toc a{white-space:nowrap;padding:12px 0;margin:0;border-left:0;border-bottom:1.5px solid transparent}
  .cs-toc a:hover{border-bottom-color:var(--ink)}
  .cs-toc a[aria-current="true"]{border-bottom-color:var(--red)}
  .cs-body{grid-column:1 / -1}
  .cs-sec{scroll-margin-top:56px}
  .cs-text{max-width:calc((100cqw - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter))}
}
@media (max-width:767px){
  .cs-text{max-width:none}
  .cs-caps{grid-template-columns:1fr}
  .cs-pair{grid-template-columns:1fr;row-gap:var(--space-group)}
  .cs-pn{grid-template-columns:1fr}
  .cs-pn .cs-next{text-align:left}
  .cs-pn a{padding:24px 0}
}

/* ---------- Headline brush stroke behind "3× faster." ---------- */
.hero h1 .paint{position:relative;display:inline-block;white-space:nowrap;z-index:0;padding:0 .06em;transition:color .3s 1.2s}
.hero h1.on .paint{color:var(--on-red)}
.hero h1 .paint::before{content:"";position:absolute;z-index:-1;left:-.14em;right:-.12em;top:-.1em;bottom:-.06em;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M14 26C40 16 78 19 120 15C170 10 214 17 262 12C306 8 350 9 384 16C392 18 396 24 391 30C397 40 389 48 395 57C399 66 391 74 393 82C386 90 360 87 330 90C280 95 236 88 186 92C140 96 92 90 52 93C34 94 18 92 10 86C4 78 12 70 6 62C2 52 11 46 5 38C2 32 6 28 14 26Z'/%3E%3Cpath d='M4 44C-2 46 1 52 6 51Z M392 34C402 36 400 42 394 43Z' /%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M14 26C40 16 78 19 120 15C170 10 214 17 262 12C306 8 350 9 384 16C392 18 396 24 391 30C397 40 389 48 395 57C399 66 391 74 393 82C386 90 360 87 330 90C280 95 236 88 186 92C140 96 92 90 52 93C34 94 18 92 10 86C4 78 12 70 6 62C2 52 11 46 5 38C2 32 6 28 14 26Z'/%3E%3Cpath d='M4 44C-2 46 1 52 6 51Z M392 34C402 36 400 42 394 43Z' /%3E%3C/svg%3E") center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);transform:rotate(-1.2deg);transition:clip-path .7s cubic-bezier(.6,0,.2,1) .9s}
.hero h1.on .paint::before{clip-path:inset(0 0 0 0)}
/* Same brush splash in the line under the headline; it paints in just after the headline rises */
.hero-sub b{font-weight:600}
.hero-sub .paint{position:relative;display:inline-block;white-space:nowrap;z-index:0;padding:0 .3em;margin:0 .05em;transition:color .3s 1.4s}
.hero-sub .paint::before{content:"";position:absolute;z-index:-1;left:-.1em;right:-.1em;top:-.08em;bottom:-.1em;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M14 26C40 16 78 19 120 15C170 10 214 17 262 12C306 8 350 9 384 16C392 18 396 24 391 30C397 40 389 48 395 57C399 66 391 74 393 82C386 90 360 87 330 90C280 95 236 88 186 92C140 96 92 90 52 93C34 94 18 92 10 86C4 78 12 70 6 62C2 52 11 46 5 38C2 32 6 28 14 26Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M14 26C40 16 78 19 120 15C170 10 214 17 262 12C306 8 350 9 384 16C392 18 396 24 391 30C397 40 389 48 395 57C399 66 391 74 393 82C386 90 360 87 330 90C280 95 236 88 186 92C140 96 92 90 52 93C34 94 18 92 10 86C4 78 12 70 6 62C2 52 11 46 5 38C2 32 6 28 14 26Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);transform:rotate(-1deg);transition:clip-path .7s cubic-bezier(.6,0,.2,1) 1.1s}
.hero h1.on ~ .hero-sub .paint{color:var(--bg)}
.hero h1.on ~ .hero-sub .paint::before{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion: reduce){.hero-sub .paint::before{clip-path:none}.hero-sub .paint{color:var(--bg)}}
@media (prefers-reduced-motion: reduce){.hero h1 .paint::before{clip-path:none}}

/* ---------- Banner: top of every internal page ---------- */
.page-head.has-banner{padding-top:clamp(16px,2.5vw,32px)}
.banner{position:relative;min-height:clamp(180px,20vw,300px);background:#E53029;color:#fff;overflow:hidden;display:flex;align-items:flex-end}
.banner canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.banner-in{position:relative;padding:clamp(20px,3vw,40px);width:100%}
.banner .crumb{color:#fff;margin-bottom:12px;max-width:none}
.banner .crumb a{color:#fff}
.banner h1{color:#fff;font-size:var(--fs-s5)!important;line-height:1.12;letter-spacing:-.02em;font-weight:500;max-width:22ch}
.banner :focus-visible{outline-color:#fff}

/* ---------- Home: full-width grid, Substack-style type ----------
   Same 12-column container as every page. Titles are modest and heavier (Newsreader 500-600)
   instead of huge and light; body text is 18px with relaxed leading; section labels are small. */
.home .sec{padding-top:clamp(56px,6vw,88px)}
.home-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.home-head h2{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.home-head a{font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.home-head a:hover{color:var(--red)}
/* Hero */
.home .hero{padding-top:clamp(32px,6vh,64px)}
.hero-top{display:flex;justify-content:flex-end;align-items:center;gap:16px}
.home .hero h1{font-size:clamp(36px,5.9vw,84px);line-height:1.02;letter-spacing:-.035em;font-weight:350;padding:clamp(40px,7vh,72px) 0 0;max-width:none}
.home .hero h1 .ln{padding-bottom:.04em}
.hero-sub{margin-top:24px;font-size:var(--fs-lg);line-height:1.55;letter-spacing:-.005em;max-width:36em}
.home .hero-cta{display:flex;gap:var(--btn-gap);flex-wrap:wrap;justify-content:flex-start;margin:32px 0 0}
/* Work: rows like a post list; text on 7 columns, thumbnail on 4 */
.post-list{list-style:none;padding:0}
.post-list li + li{border-top:1px solid var(--line)}
.post{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;padding:24px 0;text-decoration:none}
.post-text{grid-column:1 / span 7}
.post-thumb{grid-column:9 / span 4}
.post-list li:first-child .post{padding-top:4px}
.post h3{font-family:var(--serif);font-size:var(--fs-s1);font-weight:600;line-height:1.25;letter-spacing:-.01em;text-wrap:balance;transition:color .2s}
.post p{margin-top:6px;font-size:var(--fs-md);line-height:1.55;max-width:36em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post .post-meta{margin-top:12px;font-size:var(--fs-xs);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.post-thumb{height:auto;aspect-ratio:16/9}
.post-thumb .cover-img{top:50%;left:8%;width:84%;height:auto;transform:translateY(-50%);border-bottom:1px solid var(--line)}
.post:hover h3{color:var(--red)}
@media (max-width:900px){.post-text{grid-column:1 / span 8}.post-thumb{grid-column:9 / span 4;aspect-ratio:4/3}}
@media (max-width:600px){.post{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:16px;align-items:start}.post-text,.post-thumb{grid-column:auto}.post p{font-size:var(--fs-base)}}
/* Project tiles: tall outlined cards, four in a row; drawing on top, text at the bottom. Red is only an accent. */
.tiles{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
@media (max-width:1023px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;display:flex;flex-direction:column;height:100%;min-height:clamp(380px,32vw,480px);border-radius:16px;overflow:hidden;
  background:var(--bg);color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}
.tile-art{flex:1;min-height:0;display:grid;place-items:center;padding:20px 20px 0;overflow:hidden}
.tile-art .art{width:100%;height:100%;max-height:260px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:hover .tile-art .art,.tile:focus-visible .tile-art .art{transform:scale(1.05)}
.tile:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.tile:hover h3{color:var(--red)}
.tile h3{transition:color .2s}
.tile-text{padding:20px 20px 24px}
.tile h3{font-family:var(--serif);font-size:var(--fs-s1);font-weight:600;line-height:1.25;letter-spacing:-.01em;text-wrap:balance;min-height:2.5em}
.tile p{margin-top:8px;font-size:var(--fs-sm);line-height:1.5;min-height:6em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tile .tile-tags{min-height:2.8em;margin-top:14px;font-size:var(--fs-xs);font-weight:500;letter-spacing:.03em;text-transform:uppercase;line-height:1.4}
.tile:focus-visible{outline-color:var(--red);outline-offset:4px}
@media (min-width:1024px) and (max-width:1279px){.tile p{-webkit-line-clamp:5;min-height:7.5em}}
@media (max-width:600px){.tile h3,.tile p,.tile .tile-tags{min-height:0}.tile p{-webkit-line-clamp:unset}}
/* With a photo: it fills the tile and the text sits over a dark fade */
.tile.has-photo{color:#fff}
.tile.has-photo:hover h3{color:#fff}
.tile.has-photo .tile-art{position:absolute;inset:0;padding:0}
.tile.has-photo .tile-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile.has-photo:hover .tile-art img{transform:scale(1.05)}
.tile.has-photo .tile-text{position:relative;margin-top:auto;padding-top:64px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.78) 34%,rgba(0,0,0,.86))}

/* Hero photos: an edge-to-edge strip at the foot of the red banner, landscape and portrait panels side by side.
   Panel widths follow their shape: landscape 3:2, portrait 4:5, all at the same height. */
.hero-reel{position:relative;margin:clamp(40px,6vh,72px) 0 0;width:calc(100vw - var(--sbw,0px));margin-left:calc(50% - (100vw - var(--sbw,0px)) / 2);
  height:clamp(200px,22vw,440px);display:flex;gap:3px;background:var(--bg);overflow:hidden}
.reel-panel{position:relative;overflow:hidden;min-width:0}
.reel-portrait{flex:.8 1 0}
.reel-wide{flex:2.1 1 0}
.reel-landscape{flex:1.45 1 0}
.reel-square{flex:1 1 0}
.reel-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:0;z-index:0;transform:scale(1.03)}
.reel-panel img.on,.reel-panel img.off{animation:reel-drift 10s linear forwards}   /* the outgoing photo keeps drifting while it fades */
/* Never an empty frame: the new photo fades in ON TOP while the old one stays fully visible underneath */
.reel-panel img.on{opacity:1;z-index:2;transition:opacity 2.4s ease}
.reel-panel img.off{opacity:1;z-index:1}
@keyframes reel-drift{from{transform:scale(1.03)}to{transform:scale(1.12)}}
.reel-caption{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:64px clamp(16px,2.4vw,28px) clamp(16px,2.4vw,24px);
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));color:#fff;font-family:var(--serif);font-size:var(--fs-s1);line-height:1.25;letter-spacing:-.01em;pointer-events:none}
@media (max-width:860px){.hero-reel{height:30vw;min-height:200px}.reel-panel:nth-child(4){display:none}}
@media (max-width:560px){.hero-reel{height:52vw}.reel-panel:nth-child(n+3){display:none}.reel-caption{padding-top:48px;font-size:var(--fs-base)}}
@media (prefers-reduced-motion: reduce){.reel-panel img.on{transform:none}}

/* Projects on the homepage: the tiles slide in a row, with the next one peeking past the right edge */
.tiles.pc-track{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(30%,420px);gap:var(--gutter);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
.tiles.pc-track::-webkit-scrollbar{display:none}
.tiles.pc-track > li{scroll-snap-align:start;min-width:0}
@media (max-width:1023px){.tiles.pc-track{grid-auto-columns:46%}}
@media (max-width:600px){.tiles.pc-track{grid-auto-columns:82%}.tiles.pc-track .tile h3,.tiles.pc-track .tile p{min-height:0}}
.rc-all{font-size:var(--fs-sm);font-weight:500;margin-right:8px}
.rc-all:hover{color:var(--red)}

/* Recently: a carousel of large entries. The row peeks past the right edge; each image area holds its own photos. */
.rc-controls{display:flex;align-items:center;gap:12px}
/* On narrow screens the controls wrap under the section heading instead of pushing past the edge */
.home-head:has(.rc-controls){flex-wrap:wrap;row-gap:12px}
.home-head .rc-controls{margin-left:auto}
.rc-count{font-size:var(--fs-sm);font-weight:500;font-variant-numeric:tabular-nums;margin-right:4px}
.rc-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;transition:background .2s,color .2s}
.rc-btn svg{width:18px;height:18px}
.rc-btn:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.rc-btn:disabled{border-color:var(--line);cursor:default}
.rc-track{list-style:none;padding:0 var(--pad) 0 0;margin:0 calc(var(--pad) * -1) 0 0;display:grid;grid-auto-flow:column;grid-auto-columns:min(64%,860px);gap:var(--gutter);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rc-track::-webkit-scrollbar,.rc-slides::-webkit-scrollbar{display:none}
.rc-card{scroll-snap-align:start;min-width:0}
.rc-media{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.rc-media > .art{position:absolute;inset:8%;width:84%;height:84%}
.rc-slides{list-style:none;padding:0;margin:0;display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.rc-slides li{flex:0 0 100%;height:100%;scroll-snap-align:start}
.rc-slides img{width:100%;height:100%;object-fit:cover;display:block}
.rc-media-nav{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.rc-dots{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(0,0,0,.55);pointer-events:auto}
.rc-dots button{width:8px;height:8px;border-radius:999px;background:#fff;opacity:.6;transition:width .25s,opacity .25s}
.rc-dots button[aria-current="true"]{width:22px;opacity:1}
.rc-arrows{display:flex;gap:8px;pointer-events:auto}
.rc-arrows button{width:36px;height:36px;border-radius:50%;background:#fff;color:#16161A;display:grid;place-items:center}
.rc-arrows svg{width:16px;height:16px}
.rc-text{padding-top:var(--media-gap)}
.rc-date{font-size:var(--fs-xs);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;margin-bottom:8px}
.rc-card h3{font-family:var(--serif);font-size:var(--fs-s1);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.rc-body{margin-top:6px;font-size:var(--fs-md);line-height:1.55;max-width:65ch}
.rc-arrows button:focus-visible,.rc-dots button:focus-visible{outline-color:#fff}
@media (max-width:1023px){.rc-track{grid-auto-columns:82%}}
@media (max-width:600px){.rc-track{grid-auto-columns:88%}.rc-arrows{display:none}.rc-body{font-size:var(--fs-base)}}

/* About me: lead and chapter links on the left (sticky), the story on the right */
.journey-side{grid-column:1 / span 6;position:sticky;top:calc(96px + env(safe-area-inset-top,0px));align-self:start}
.home .about .journey-side .lead{grid-column:auto}
/* The quote at the top of About me: a large red opening mark hanging into the margin */
.about-quote{position:relative;padding-top:.9em}
.about-quote::before{content:"\201C";position:absolute;left:-.04em;top:-.12em;font-family:var(--serif);font-size:3.4em;line-height:1;color:var(--red);font-weight:400}
.about-quote p{max-width:none;font-family:var(--serif);font-style:italic;font-size:inherit;line-height:inherit}
.about-quote p::after{content:"\201D";color:var(--red)}
.journey{scroll-margin-top:16px}
.journey + .journey{margin-top:32px}
.journey h3{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-bottom:8px}
/* Video */
.home .play{width:64px;height:64px}
.home .play svg{width:20px;height:20px}
/* How I work: lead on the left, story on the right, four steps in a row */
.home .about .lead{font-size:var(--fs-s2);font-weight:400;line-height:1.4}
.home .about .body p{font-size:var(--fs-md);line-height:1.65}
.home .about .body b,.about-quote b{font-weight:600}
/* Recommendations */
/* Recommendations: equal outlined cards in a carousel. Same portrait frame for every photo (black and white,
   colour on hover), a large red quote mark, the first lines of the quote, and a quiet footer. */
.home .t-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(48%,660px);gap:var(--gutter);align-items:stretch;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 calc(var(--pad) * -1) 0 0;padding:0 var(--pad) 0 0}
.home .t-grid::-webkit-scrollbar{display:none}
.home .t-card{scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,2.4vw,32px);align-items:stretch;
  padding:clamp(12px,1.2vw,16px);border:1px solid var(--line);border-radius:20px;background:var(--bg);transition:border-color .25s}
.home .t-card:hover{border-color:var(--ink)}
.t-frame{position:relative;border-radius:12px;overflow:hidden;align-self:stretch;min-height:300px}   /* fills the card height */
.home .t-frame .t-photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 22%;
  filter:grayscale(1) contrast(1.06);transition:filter .5s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.home .t-card:hover .t-photo{filter:none;transform:scale(1.03)}
.home .t-body{display:flex;flex-direction:column;min-width:0;padding:8px 8px 4px 0}
/* A card with a video: it plays in the portrait frame, in place of the photo */
.t-frame.has-video{background:#000}
.t-frame.has-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* "Play with sound": a small pill in the bottom-left corner, clear of the face */
.t-frame-play{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;border-radius:999px;
  background:rgba(22,22,26,.72);color:#fff;font-size:var(--fs-xs);font-weight:500;letter-spacing:.01em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.t-frame-play:hover{background:var(--red);transform:translateY(-1px)}
.t-frame-play svg{width:14px;height:14px;flex:none}
.t-frame-play:focus-visible{outline-color:#fff}
.t-frame-play[hidden]{display:none}

.t-intro{margin:-8px 0 24px;font-size:var(--fs-md);line-height:1.55;max-width:60ch}
.t-mark{font-family:var(--serif);font-size:72px;line-height:.7;height:36px;color:var(--red);font-weight:400}
.home .t-card blockquote{margin-top:12px;font-family:var(--serif);font-size:clamp(17px,1.25vw,19px);line-height:1.5;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.home .t-card blockquote p{max-width:none;display:inline}
.home .t-card blockquote p + p::before{content:" "}
.t-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:12px}
.t-actions:not(:has(button:not([hidden]))){display:none}
.t-watch{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:999px;background:var(--red);color:#fff;font-size:var(--fs-sm);font-weight:500;transition:background .2s}
.t-watch svg{width:14px;height:14px}
.t-watch:hover{background:var(--ink);color:var(--bg)}
.t-more{align-self:flex-start;font-size:var(--fs-sm);font-weight:500;border-bottom:1.5px solid var(--ink);padding:0 0 2px;transition:color .2s,border-color .2s}
.t-more:hover{color:var(--red);border-color:var(--red)}
.home .t-card .who{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-sm)}
.who-text{display:flex;flex-direction:column;line-height:1.4}
.who-text b{font-family:var(--serif);font-size:var(--fs-md);font-weight:600;letter-spacing:-.005em}
.t-in{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:background .2s,border-color .2s,color .2s}
.t-in svg{width:15px;height:15px}
.t-in:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
@media (max-width:1023px){.home .t-grid{grid-auto-columns:82%}}
@media (max-width:600px){
  .home .t-grid{grid-auto-columns:88%}
  .home .t-card{grid-template-columns:1fr}
  .t-frame{aspect-ratio:1/1}
  .home .t-card blockquote{-webkit-line-clamp:7}
}
/* The modal window for a full testimonial: profile panel on the left, the full quote on the right */
.t-modal{border:0;padding:0;margin:auto;width:min(1280px,calc(100vw - 48px));height:min(860px,calc(100svh - 48px));max-height:none;
  border-radius:20px;background:var(--bg);color:var(--ink);overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.45)}
.t-modal::backdrop{background:rgba(10,10,14,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.t-modal[open]{animation:t-pop .45s cubic-bezier(.2,.8,.2,1)}
.t-modal[open]::backdrop{animation:t-fade .35s ease}
@keyframes t-pop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes t-fade{from{opacity:0}}
.t-modal-in{display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr);height:100%}
/* Left: profile panel */
.t-modal-side{display:flex;flex-direction:column;gap:24px;padding:32px;border-right:1px solid var(--line);overflow-y:auto}
.t-modal-photo{aspect-ratio:4/5;border-radius:14px;overflow:hidden;flex:none}
/* Video recommendation: the portrait video plays in the profile panel */
.t-modal-video{aspect-ratio:9/16;max-height:62%;border-radius:14px;overflow:hidden;background:#000;flex:none;align-self:center;width:100%}
.t-modal-video video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.t-modal-photo .t-photo{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 25%;display:block}
.t-modal-who{display:flex;flex-direction:column;align-items:flex-start}
.t-modal-who b{font-family:var(--serif);font-size:var(--fs-s1);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.t-modal-who > span{margin-top:6px;font-size:var(--fs-sm);line-height:1.45}
.t-modal-li{display:inline-flex;align-items:center;gap:10px;margin-top:20px;height:40px;padding:0 16px 0 12px;border:1px solid var(--ink);border-radius:999px;
  font-size:var(--fs-sm);font-weight:500;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.t-modal-li svg{width:16px;height:16px;flex:none}
.t-modal-li:hover{background:var(--ink);color:var(--bg)}
/* Right: the full quote */
.t-modal-text{position:relative;padding:48px 56px 40px;overflow-y:auto;min-height:0}
.t-modal-mark{display:block;font-family:var(--serif);font-size:72px;line-height:.6;height:32px;color:var(--red)}
.t-modal-text blockquote{margin-top:20px;font-family:var(--serif);font-size:16px;line-height:1.6}
.t-modal-text blockquote p{max-width:62ch}
.t-modal-text blockquote p + p{margin-top:12px}
@media (min-width:1100px){.t-modal-text blockquote.long{column-count:2;column-gap:44px}.t-modal-text blockquote.long p{max-width:none}}
/* Shorter screens: slightly smaller type and padding, so the whole testimonial still fits without scrolling */
@media (min-width:1100px) and (max-height:960px){.t-modal-text{padding:40px 48px 32px}.t-modal-text blockquote{font-size:15px;line-height:1.55}.t-modal-text blockquote p + p{margin-top:10px}}
@media (min-width:1100px) and (max-height:820px){.t-modal-in{grid-template-columns:240px minmax(0,1fr)}.t-modal-side{padding:24px;gap:20px}
  .t-modal-text{padding:32px 44px 24px}.t-modal-text blockquote{font-size:14px;line-height:1.5;margin-top:14px}.t-modal-mark{font-size:56px;height:24px}}
.t-modal-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;background:var(--bg);transition:background .2s,color .2s,transform .3s}
.t-modal-close:hover{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(90deg)}
.t-modal-close svg{width:16px;height:16px}
/* Phones and small tablets: profile panel on top (small portrait beside the name), quote below */
@media (max-width:860px){
  .t-modal{height:calc(100svh - 32px);width:calc(100vw - 32px)}
  .t-modal-in{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .t-modal-side{flex-direction:row;align-items:center;gap:16px;padding:20px 72px 20px 20px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .t-modal-photo{width:88px}
  .t-modal-side.has-video{flex-direction:column;align-items:stretch;padding-right:20px}
  .t-modal-side.has-video .t-modal-video{width:min(240px,62%);max-height:none;align-self:center}
  .t-modal-li{margin-top:12px}
  .t-modal-text{padding:28px 24px}
  .t-modal-text{position:static}            /* so the close button sits in the corner of the whole window */
  .t-modal-close{top:16px;right:16px}
}
.t-modal-in{position:relative}
/* Footer */
.home .foot-cta{margin-top:28px}
.home .foot-row{margin-top:56px}

/* ---------- Bio ---------- */
.bio-intro{margin-bottom:var(--space-section);align-items:start}
.bio-portrait{grid-column:1 / span 5;height:auto!important;aspect-ratio:4/5}
.bio-text{grid-column:7 / span 6}
.bio-text p{margin-bottom:16px}
.bio-text .bio-lead{margin-bottom:32px}
.bio-lead{font-family:var(--serif);font-size:var(--fs-s2);line-height:1.25;letter-spacing:-.015em;font-weight:350}
.bio-block{padding:32px 0 var(--space-group);border-top:1px solid var(--line)}
.bio-block h2{grid-column:1 / span 4;font-size:var(--fs-s3);font-weight:600;line-height:1.2}
.bio-block .c{grid-column:7 / span 6}
.bio-quote{font-family:var(--serif);font-size:var(--fs-s2);line-height:1.25;letter-spacing:-.015em;font-weight:350}
.bio-quote + .bio-quote{margin-top:32px;font-style:italic}
.bio-list{list-style:none;padding:0}
.bio-list li{display:grid;grid-template-columns:9em 1fr 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:var(--fs-base)}
.bio-list li:first-child{padding-top:0}
.bio-list b{font-weight:500}
.bio-tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bio-tags li{border:1px solid var(--ink);border-radius:999px;padding:8px var(--pill-x);font-size:var(--fs-sm)}
.bio-beyond{list-style:none;padding:0}
.bio-beyond a{display:block;font-family:var(--serif);font-size:var(--fs-s2);text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line)}
.bio-beyond li:last-child a{border-bottom:0}
.bio-beyond a:hover{color:var(--red);font-style:italic}
.bio-cta{display:flex;gap:var(--btn-gap);flex-wrap:wrap}
@media (max-width:860px){
  .bio-portrait,.bio-block h2{grid-column:1 / -1}
  .bio-text,.bio-block .c{grid-column:1 / span 6}
  .bio-portrait{grid-column:1 / span 7;max-width:none;margin-bottom:32px}
  .bio-block .c{margin-top:20px}
}
@media (max-width:767px){.bio-text,.bio-block .c{grid-column:1 / -1}}
@media (max-width:520px){.bio-list li{grid-template-columns:1fr;gap:2px}}

/* DM Sans: tracking opens slightly as size drops, tightens slightly as it grows; leading follows */
.snd,.cover .ph,.card-meta .kind,.case-meta dt{letter-spacing:.012em;line-height:1.45}
.small,.hero-meta,.caption,.card-meta .yr,.card-meta p,.who,.chip,.ask-out,.foot-row,.page-head .sub .count,.crumb,.next span,.steps p,.more-btn,.filters a,.brands li,.manifesto .sig,.btn{letter-spacing:.005em;line-height:1.5}
.hero-foot p,.page-head .sub p,.case-block p{letter-spacing:-.005em;line-height:1.55}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .snd[aria-pressed="true"] .eq i{height:12px}
  .hero h1 .ln > span{transform:none}
}

/* Button groups on tablet and phone: every button in a group gets the same width.
   They sit side by side when there is room, and stack at full width when there isn't. */
@media (max-width:860px){
  .hero-cta,.home .hero-cta,.foot-cta,.bio-cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--btn-gap)}
  .hero-cta .btn,.foot-cta .btn,.bio-cta .btn{width:100%;padding:0 16px}
}


/* ================= Type and motion, after neutomni.com (2026-10-16 experiment) =================
   Big sans titles that finish in italic serif, tight leading, more air between sections,
   titles that slide up out of a mask once, a hero strip that unveils, and the four steps as red
   columns that grow level as you scroll. */
:root{--space-section:clamp(88px, 8vw + 56px, 176px)}
.home-head{align-items:flex-end;padding-bottom:20px;margin-bottom:32px}
h2.mix,.home-head h2.mix{font-family:var(--sans);font-weight:400;font-size:clamp(42px,6.6vw,108px);line-height:.95;letter-spacing:-.045em}
h2.mix em,.home .hero h1 .hs,.man-big em,.steps h3 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.025em}
.foot h2.mix{font-size:clamp(36px,5vw,84px);max-width:16ch}
@media (max-width:767px){.home-head{margin-bottom:24px}.home-head h2.mix{width:100%}}

/* hero: the sentence in DM Sans, ending in italic Newsreader */
.home .hero h1{font-family:var(--sans);font-weight:400;letter-spacing:-.045em;line-height:1}

/* the red statement follows the same pairing */
.man-big{font-family:var(--sans);font-weight:400;letter-spacing:-.05em}

/* title reveal: each word rises out of its own mask, once */
.rv{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .1em 0;margin:0 -.08em -.1em 0}
.rv>span{display:inline-block;transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.rv-wait .rv>span{transform:translateY(110%)}

/* hero strip unveils from the bottom, frame by frame, on load */
@keyframes reel-unveil{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.reel-panel{animation:reel-unveil 1.1s cubic-bezier(.7,0,.2,1) both}
.reel-panel:nth-child(2){animation-delay:.12s}.reel-panel:nth-child(3){animation-delay:.24s}.reel-panel:nth-child(4){animation-delay:.36s}

/* How I work: four red columns, stepped, that grow level as you scroll (--g is set by the script) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;height:clamp(400px,36vw,540px);margin-top:var(--space-section);padding:0;border-top:0}
.steps li{--g:1;grid-column:auto;height:calc(var(--g) * 100%);min-height:0;background:var(--red);color:#fff;padding:20px clamp(16px,1.6vw,28px) clamp(20px,2vw,28px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.steps .n{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.08em;line-height:1;color:#fff}
.steps h3{font-family:var(--sans);font-size:clamp(26px,2.4vw,38px);font-weight:400;letter-spacing:-.035em;line-height:1;margin:0 0 14px;color:#fff}
.steps h3 em{display:block}
.steps p{color:#fff;font-size:var(--fs-sm);line-height:1.45;max-width:30ch}
@media (max-width:1023px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));height:auto;align-items:end}.steps li{height:auto;min-height:calc(var(--g) * 280px);justify-content:space-between}}
@media (max-width:767px){.steps{grid-template-columns:1fr;gap:10px}.steps li{min-height:calc(var(--g) * 240px);padding:18px 18px 22px}.steps p{max-width:none}}
@media (prefers-reduced-motion: reduce){.reel-panel{animation:none}.steps li{--g:1!important}}

/* ================= Opening curtain, wordmark, and line drawings in the steps (2026-10-16) ================= */
.wm-text{font-family:var(--sans);font-weight:500;letter-spacing:-.06em;line-height:.86;white-space:nowrap}
.wm-text em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em;padding-right:.04em}

/* the curtain: red, the name in white at the wordmark's size and place, then vertical strips slide away */
.curtain{position:fixed;inset:0;z-index:200;overflow:hidden;animation:curtain-failsafe 0s 6s forwards}
.z-half{position:absolute;inset:0;will-change:clip-path,transform;background-color:#121214;
  /* black woven fabric, like the tape a zip is sewn into: fine light grain plus a cross-weave */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
.z-teeth{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.z-half .curtain-name{left:var(--wm-x)}
@keyframes curtain-failsafe{to{visibility:hidden;pointer-events:none}}
.curtain-name{position:absolute;top:20px;width:max-content;color:#fff;font-size:var(--wm-fs,12vw)}
.curtain-name > *{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.curtain-name em{transition-delay:.12s}
.curtain.in .curtain-name > *{transform:none}

/* the wordmark (homepage only): fixed, scaled down by the script as you scroll */
.wordmark{display:none;position:fixed;top:20px;left:var(--pad);z-index:60;color:var(--red);text-decoration:none;transform-origin:0 0;will-change:transform}
.is-home .wordmark{display:block}
.wm-space{height:12vw}
.is-home .home .hero,.is-home .hero{padding-top:20px}
/* on the homepage the header waits until the name has shrunk into place, then slides in around it */
.is-home .nav{position:fixed;left:0;right:0;transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.is-home.docked .nav{transform:none;transition-delay:.55s}
/* the name squeezing into the header, and the space it held closing up */
.wm-anim .wordmark{transition:transform .9s cubic-bezier(.7,0,.2,1)}
.wm-anim .wm-space{transition:height .9s cubic-bezier(.7,0,.2,1)}
.is-home .brand{color:transparent}


/* line drawings in the red step columns: a wave that flattens, a dashed line across all four,
   and a shape per step that settles as the columns level (--p goes 0 → 1, set by the script) */
.steps li{position:relative;--p:1}
.st-wave{position:absolute;left:0;right:0;top:52px;width:100%;height:20px;transform:scaleY(calc(1 - var(--p)));transform-origin:50% 50%}
.st-wave path{fill:none;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}
.st-dash{position:absolute;left:0;right:0;bottom:calc(clamp(400px,36vw,540px) * .56);border-top:1.5px dashed rgba(255,255,255,.9)}
.st-art{flex:1;align-self:center;width:min(70%,170px);min-height:0;max-height:170px;margin:12px 0;overflow:visible}
.st-art *{fill:none;stroke:#fff;stroke-width:1.4}
.st-art .dot{fill:#fff;stroke:none}
.st-frame rect{transform-box:fill-box;transform-origin:center;transform:rotate(calc((1 - var(--p)) * 135deg)) scale(calc(.6 + var(--p) * .4))}
.st-build rect{transform-box:fill-box;transform-origin:center}
.st-build .b1{transform:translateX(calc((1 - var(--p)) * -34px))}
.st-build .b3{transform:translateX(calc((1 - var(--p)) * 34px))}
.st-build .b2{transform:scaleX(calc(.4 + var(--p) * .6))}
.st-test .ring,.st-test .ring2,.st-decide .tick{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p))}
.st-test .ring2{stroke-dashoffset:calc(1 - var(--p) * var(--p))}
@media (max-width:1023px){.st-dash{display:none}.st-art{max-height:110px;width:110px;margin:8px 0}.st-wave{top:44px}}
@media (prefers-reduced-motion: reduce){.steps li{--p:1!important}.curtain{display:none}}
:root{--wm-x:var(--pad)}
.curtain-name{padding-bottom:.28em}

/* the role on the curtain, under the name */
.c-role{display:block;font-family:var(--sans);font-size:max(.19em,22px);font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-top:.12em}
.curtain-name > .c-role{transition-delay:.24s}
.c-role{font-size:max(.25em,26px);margin-top:.18em}

/* first load on the homepage: one thing at a time. The name lands in the header first, then the
   headline rises, then the line under it, the buttons and the photos (body.hero-go, set by the script) */
.is-home .hero-sub,.is-home .hero-cta,.is-home .hero-top{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.hero-go .hero-sub,.hero-go .hero-cta,.hero-go .hero-top{opacity:1;transform:none}
.hero-go .hero-sub{transition-delay:.5s}.hero-go .hero-cta{transition-delay:.7s}.hero-go .hero-top{transition-delay:1s}
.reel-panel{animation-play-state:paused}
.hero-go .reel-panel{animation-play-state:running}
.hero-go .reel-panel:nth-child(1){animation-delay:.8s}.hero-go .reel-panel:nth-child(2){animation-delay:.92s}.hero-go .reel-panel:nth-child(3){animation-delay:1.04s}.hero-go .reel-panel:nth-child(4){animation-delay:1.16s}
@media (prefers-reduced-motion: reduce){.is-home .hero-sub,.is-home .hero-cta,.is-home .hero-top{opacity:1;transform:none;transition:none}}
.is-home .hero h1{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.hero-go .hero h1{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.is-home .hero h1{opacity:1;transform:none;transition:none}}

/* ================= Red first view (2026-10-16) =================
   The homepage banner (name, headline, buttons, photo strip) sits on red, full width, with a light woven
   grain. Inside it the colours swap: text white, main button black, the brush stroke white. */
.is-home .hero{isolation:isolate;--bg:#E53029;--ink:#FFFFFF;--muted:#FFFFFF;--red:#16161A;--on-red:#FFFFFF;--line:rgba(255,255,255,.35);color:var(--ink)}
.is-home .hero::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:calc(100vw - var(--sbw,0px));transform:translateX(-50%);
  background-color:#E53029;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)}
.is-home .hero .hero-reel{background:#E53029}
/* the big name is white on the red, and turns red as it settles into the white header */
.is-home .wordmark{color:#fff;transition:transform .9s cubic-bezier(.7,0,.2,1),color .6s .5s}
.is-home.docked.past-hero .wordmark{color:var(--red)}
.is-home .hero .hero-reel{background:transparent}
.is-home .nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),background .35s,color .35s,border-color .35s}

/* the red banner, its header and its buttons, all in the one brand red */
.is-home .hero{--warp:#FFFFFF}
.is-home:not(.past-hero) .nav{--bg:#E53029;--ink:#FFFFFF;--line:rgba(255,255,255,.3);color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.is-home .hero .btn-primary{background:#fff;color:#E53029}
.is-home .hero .btn-primary:hover{background:#16161A;color:#fff}
.is-home .hero .btn-ghost{border-color:#fff;color:#fff}
.is-home .hero .btn-ghost:hover{background:#fff;color:#E53029}
/* name type: looser tracking and a lighter weight so the letters breathe, the italic Roy set a touch larger */
.wm-text{font-weight:450;letter-spacing:-.035em}
.wm-text em{letter-spacing:-.015em;font-size:1.04em;margin-left:.04em}

/* "shaping" in solid black on the red, and the "3× faster with AI" stroke in black */
.hero .hw-shape{color:var(--red)}
.is-home .hero .hw-shape{color:#16161A}
.is-home .hero .hero-sub .paint::before{background:#16161A}
.is-home .hero h1.on ~ .hero-sub .paint{color:#fff}

@media (max-width:860px){.journey-side{position:static}}
@media (max-width:767px){.journey-side{grid-column:1 / -1}}

/* On weekends: a strip of its own, with a little week where Saturday and Sunday are the happy days */
.wk-strip{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:clamp(18px,2.4vw,40px);margin-top:clamp(20px,2.4vw,32px);
  padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,32px);border:1.5px solid var(--ink);border-radius:999px}
.wk-strip h3{font-family:var(--sans);font-size:clamp(24px,2.2vw,32px);font-weight:400;letter-spacing:-.035em;line-height:1;margin:0;white-space:nowrap}
.wk-strip h3 em{font-family:var(--serif);font-style:italic;letter-spacing:-.02em}
.wk-strip p{max-width:none;font-size:var(--fs-base);line-height:1.5}
.wk-cal{display:flex;gap:6px}
.wk-cal span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:600;border:1px solid var(--line)}
.wk-cal .we{position:relative;background:var(--red);border-color:var(--red);color:#fff;animation:wk-hop 3.2s ease-in-out infinite}
.wk-cal .we + .we{animation-delay:.18s}
.wk-cal .we::after{content:"";position:absolute;left:50%;bottom:-9px;width:10px;height:5px;margin-left:-5px;border:2px solid var(--red);border-top:0;border-radius:0 0 10px 10px}
@keyframes wk-hop{0%,70%,100%{transform:translateY(0) rotate(0)}78%{transform:translateY(-6px) rotate(-8deg)}86%{transform:translateY(0) rotate(6deg)}92%{transform:translateY(-2px) rotate(0)}}
@media (max-width:900px){.wk-strip{grid-template-columns:auto 1fr;border-radius:24px}.wk-strip p{grid-column:1 / -1}}
@media (max-width:767px){.wk-strip{grid-template-columns:1fr;gap:14px;padding:20px 20px 22px}.wk-cal span{width:28px;height:28px}}
@media (prefers-reduced-motion: reduce){.wk-cal .we{animation:none}}

/* phone hero: the headline leads, the line under it steps back */
@media (max-width:767px){
  .home .hero h1{font-size:clamp(42px,12.4vw,52px);line-height:.98}
  .home .hero .hero-sub{font-size:16px;line-height:1.5}
}


/* ================= About me, editorial (2026-10-16) =================
   A large statement, then four chapters. Desktop: a two-by-two grid, every chapter open.
   Phone: an accordion, one chapter open at a time. */
.about-statement{max-width:24ch;font-family:var(--sans);font-size:clamp(30px,3.6vw,56px);font-weight:400;letter-spacing:-.035em;line-height:1.08}
.about-statement em{font-family:var(--serif);font-style:italic;letter-spacing:-.02em}

/* ================= Carousels on a phone =================
   No arrows; swipe, with a slim progress bar and the count under each carousel */
.rc-foot{display:none}
@media (max-width:767px){
  .home-head .rc-btn,.home-head .rc-count{display:none}
  .home-head:has(.rc-controls){flex-wrap:nowrap}
  .home-head .rc-controls{margin-left:auto;align-self:flex-end;padding-bottom:6px}
  .rc-foot{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
  .rc-foot > span:first-child{flex:none;min-width:3.2em}
  .rc-bar{flex:1;height:2px;background:var(--line);overflow:hidden}
  .rc-bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transition:transform .25s ease-out}
}

/* ================= About me: the statement and a shuffling deck of chapter cards ================= */
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:center}
.about-left{grid-column:1 / span 6}
.deck-index{list-style:none;padding:0;margin:clamp(28px,3vw,44px) 0 0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.deck-index a{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:var(--fs-base);font-weight:500;transition:color .25s}
.deck-index a::before{content:"";width:0;height:2px;background:var(--red);transition:width .35s cubic-bezier(.2,.8,.2,1)}
.deck-index a.on{color:var(--red)}
.deck-index a.on::before{width:22px}
.deck-index a:hover{color:var(--red)}
.deck{grid-column:8 / -1;position:relative;display:grid;padding:10px 34px 46px 0;touch-action:pan-y;cursor:pointer;user-select:none;-webkit-user-select:none;outline:none}
.deck:focus-visible .ch.top{box-shadow:0 0 0 2px var(--red)}
.deck::after{content:"Tap the card to shuffle";position:absolute;right:34px;bottom:8px;font-size:13px;font-weight:500}
.deck .ch{--d:0;--dx:0px;--tilt:0deg;grid-area:1 / 1;display:flex;flex-direction:column;gap:16px;min-height:100%;padding:clamp(28px,2.8vw,40px);background:var(--bg);border:1px solid var(--ink);border-radius:22px;
  transform:translateX(var(--dx)) translate(calc(var(--d) * 12px),calc(var(--d) * 12px)) rotate(calc(var(--d) * var(--tilt)));transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.deck .ch:nth-child(1){--tilt:1.4deg}.deck .ch:nth-child(2){--tilt:-1.8deg}.deck .ch:nth-child(3){--tilt:2.2deg}.deck .ch:nth-child(4){--tilt:-1.2deg}
.deck .ch.top{box-shadow:0 30px 60px -36px rgba(22,22,26,.45)}
.deck .ch > *{transition:opacity .3s}
.deck .ch:not(.top) > *{opacity:0}
.deck.dragging .ch.top{transition:none}
.deck .ch.fly{transform:translate(calc(var(--fx) * 118%),-14px) rotate(calc(var(--fx) * 12deg));transition:transform .38s cubic-bezier(.5,0,.75,0)}
.deck .ch-t{margin:0;font-family:var(--sans);font-size:clamp(30px,2.8vw,44px);font-weight:400;letter-spacing:-.035em;line-height:1}
.deck .ch-t em{font-family:var(--serif);font-style:italic;letter-spacing:-.02em}
.deck .ch p{margin:0;font-size:var(--fs-md);line-height:1.6;max-width:none}
@media (max-width:1023px){.about-left{grid-column:1 / span 5}.deck{grid-column:6 / -1}}
@media (max-width:767px){
  .about-grid{grid-template-columns:1fr;gap:28px}
  .about-left,.deck{grid-column:1 / -1}
  .about-statement{font-size:30px;line-height:1.12;max-width:none}
  .deck{padding:4px 22px 40px 0;order:2}
  .deck::after{right:22px}
  .deck .ch{padding:24px 22px 26px;border-radius:20px;gap:14px}
  .deck .ch-t{font-size:30px}
  .deck .ch p{font-size:16px}
  .about-left{display:contents}
  .about-statement{order:1}
  .deck-index{order:3;margin:0;flex-direction:row;flex-wrap:wrap;gap:0 18px;border:0}
  .deck-index a{border:0;padding:6px 0;font-size:14px}
}
@media (prefers-reduced-motion: reduce){.deck .ch,.deck .ch.fly{transition:none}}

/* ================= On weekends: four small animated line illustrations ================= */
.wk-strip{display:block;margin-top:clamp(56px,6vw,96px);padding:0;border:0;border-radius:0}
.wk-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.wk-head h3{font-family:var(--sans);font-size:clamp(28px,2.6vw,40px);font-weight:400;letter-spacing:-.035em;line-height:1;margin:0}
.wk-head h3 em{font-family:var(--serif);font-style:italic;letter-spacing:-.02em}
.wk-tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.wk-tiles li{display:flex;flex-direction:column;gap:14px}
.wi-art{display:grid;place-items:center;aspect-ratio:6/5;border:1px solid var(--line);border-radius:20px}
.wi{width:70%;height:auto;overflow:visible}
.wi-l{font-size:var(--fs-base);font-weight:500;line-height:1.35}
.wi *{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wi .egg{fill:var(--bg)}
.wi .yolk,.wi .spark,.wi .braille circle,.wi .notes circle{fill:var(--red);stroke:none}
.wi .notes path{stroke:var(--red)}
.wi .dots circle{fill:var(--ink);stroke:none}
.wi .head{fill:var(--bg)}
.wi g,.wi path,.wi circle{transform-box:fill-box;transform-origin:center}
@media (max-width:767px){.wk-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}.wi-l{font-size:14px}.wk-head .wk-cal span{width:24px;height:24px;font-size:11px}.wk-cal{gap:4px}}
/* cooking: the egg flips, steam rises */
.wi-cook .flip{animation:wi-flip 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes wi-flip{0%,55%,100%{transform:translateY(0) rotate(0)}70%{transform:translateY(-22px) rotate(180deg)}85%{transform:translateY(0) rotate(360deg)}}
.wi-cook .steam path{animation:wi-steam 2.4s ease-in-out infinite;opacity:0}
.wi-cook .steam path:nth-child(2){animation-delay:.4s}.wi-cook .steam path:nth-child(3){animation-delay:.8s}
@keyframes wi-steam{0%{opacity:0;transform:translateY(8px)}40%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
/* AI: typing dots and twinkling sparkles */
.wi-ai .dots circle{animation:wi-type 1.4s ease-in-out infinite}
.wi-ai .dots circle:nth-child(2){animation-delay:.18s}.wi-ai .dots circle:nth-child(3){animation-delay:.36s}
@keyframes wi-type{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.wi-ai .spark{animation:wi-twinkle 2s ease-in-out infinite}.wi-ai .s2{animation-delay:.7s}
@keyframes wi-twinkle{0%,100%{transform:scale(.6) rotate(0)}50%{transform:scale(1.15) rotate(45deg)}}
/* scribing: the pen writes a line, braille dots pop up */
.wi-scribe .ink{stroke-dasharray:1;stroke-dashoffset:1;animation:wi-write 3.2s ease-in-out infinite}
@keyframes wi-write{0%{stroke-dashoffset:1}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.wi-scribe .pen{animation:wi-pen 3.2s ease-in-out infinite}
@keyframes wi-pen{0%{transform:translate(-44px,6px)}55%{transform:translate(0,0)}85%{transform:translate(0,0)}100%{transform:translate(-44px,6px)}}
.wi-scribe .braille circle{animation:wi-pop 3.2s ease-in-out infinite;transform:scale(0)}
.wi-scribe .braille circle:nth-child(2){animation-delay:.15s}.wi-scribe .braille circle:nth-child(3){animation-delay:.3s}.wi-scribe .braille circle:nth-child(4){animation-delay:.45s}.wi-scribe .braille circle:nth-child(5){animation-delay:.6s}.wi-scribe .braille circle:nth-child(6){animation-delay:.75s}
@keyframes wi-pop{0%,40%{transform:scale(0)}55%{transform:scale(1.25)}65%,90%{transform:scale(1)}100%{transform:scale(0)}}
/* singing: shower drops fall, notes float up */
.wi-sing .drops path{animation:wi-drop 1.1s linear infinite;opacity:0}
.wi-sing .drops path:nth-child(2){animation-delay:.25s}.wi-sing .drops path:nth-child(3){animation-delay:.5s}.wi-sing .drops path:nth-child(4){animation-delay:.15s}.wi-sing .drops path:nth-child(5){animation-delay:.65s}
@keyframes wi-drop{0%{opacity:0;transform:translateY(-6px)}20%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
.wi-sing .n1{animation:wi-note 2.6s ease-in-out infinite}.wi-sing .n2{animation:wi-note 2.6s ease-in-out 1.1s infinite}
@keyframes wi-note{0%{transform:translate(0,10px) rotate(-6deg);opacity:0}25%{opacity:1}100%{transform:translate(6px,-18px) rotate(8deg);opacity:0}}
@media (prefers-reduced-motion: reduce){.wi *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}

.sec.about{overflow-x:clip}
@media (max-width:767px){.deck .ch{transform:translateX(var(--dx)) translate(calc(var(--d) * 7px),calc(var(--d) * 9px)) rotate(calc(var(--d) * var(--tilt) * .7))}
  .deck .ch.fly{transform:translate(calc(var(--fx) * 118%),-14px) rotate(calc(var(--fx) * 12deg))}}

/* weekend labels: readable, the verb in red italic serif */
.wi-l{font-family:var(--sans);font-size:clamp(18px,1.6vw,22px);font-weight:400;letter-spacing:-.02em;line-height:1.25}
.wi-l em{font-family:var(--serif);font-style:italic;font-size:1.12em;letter-spacing:-.01em;color:var(--red)}
@media (max-width:767px){.wi-l{font-size:17px}}
/* "shaping" on the red banner: a soft light pink, readable against the red */
.is-home .hero .hw-shape{color:#FFC4CD}

/* the curtain's words: "Build with" small, the name large, sitting above the zip mid-screen */
.wm-pre{position:absolute;left:.05em;bottom:100%;margin-bottom:.1em;font-family:var(--sans);font-style:normal;font-size:max(.17em,15px);font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap;opacity:0;transition:opacity .6s ease}
html.wm-center .wm-pre{opacity:1}
html.unzipping .wm-pre{opacity:0}
html.wm-center body.is-home .wordmark{transform:translate(var(--wm-cx,0px),var(--wm-cy,30vh))}
.wordmark em{transition:opacity .6s .35s}

/* About me: a quieter statement, so the chapter list sits higher */
.about-statement{font-size:clamp(22px,2vw,30px);line-height:1.2;max-width:28ch}
.deck-index{margin-top:clamp(20px,2vw,28px)}
@media (max-width:767px){.about-statement{font-size:22px;line-height:1.25}}

/* the deck: the card being read is red; the ones behind it are soft pastels */
.deck .ch{border:0;color:var(--ink)}
.deck .ch:nth-child(1){background:#F9D9DE}.deck .ch:nth-child(2){background:#FCE4D2}.deck .ch:nth-child(3){background:#FBF0C9}.deck .ch:nth-child(4){background:#E7DFF6}
.deck .ch.top{background:#E53029;color:#fff}
.deck .ch.top .ch-t,.deck .ch.top b{color:#fff}
.deck .ch{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background-color .45s ease}
.about-grid{align-items:start}.about-left{padding-top:12px}

/* "Build with" sits centred over the name while it waits under the curtain */
.wm-pre{left:0;width:var(--wm-dw,auto);text-align:center}

/* glide the name in one move */
.is-home .wordmark,.wm-anim .wordmark{transition:transform 1.15s cubic-bezier(.65,0,.25,1),color .6s .7s}
.wm-anim .wm-space{transition:height 1.15s cubic-bezier(.65,0,.25,1)}
/* the deck: the cards behind are soft pastel greys */
.deck .ch:nth-child(1){background:#EFEFF1}.deck .ch:nth-child(2){background:#E6E6E9}.deck .ch:nth-child(3){background:#DDDDE1}.deck .ch:nth-child(4){background:#EAEAEC}
.deck .ch.top{background:#E53029}
.deck{padding-bottom:62px}
.deck::after{bottom:6px;z-index:10}
@media (max-width:767px){.deck{padding-bottom:58px}}

/* deck: the hint lives inside the card ("Next: …"), the old floating line is gone */
.deck::after{content:none}
.deck{padding-bottom:34px}
.ch-next{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:auto;padding-top:20px;font-size:13px;font-weight:500;letter-spacing:.01em;opacity:.92}
.ch-next i{font-style:normal;font-size:16px;display:inline-block;animation:ch-nudge 2.6s ease-in-out infinite}
@keyframes ch-nudge{0%,70%,100%{transform:translateX(0)}80%{transform:translateX(6px)}90%{transform:translateX(0)}}
.deck .ch.top .ch-next{border-top:1px solid rgba(255,255,255,.28)}
/* the card being read: red card stock, a fine grain and a soft sheen from the top corner */
.deck .ch.top{background-color:#E53029;background-image:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-blend-mode:normal,multiply}
/* the cards behind: soft greys on light; on dark, translucent white layers like frosted cards */
.deck{--c1:#EFEFF1;--c2:#E6E6E9;--c3:#DDDDE1;--c4:#EAEAEC}
.deck .ch:nth-child(1){background-color:var(--c1)}.deck .ch:nth-child(2){background-color:var(--c2)}.deck .ch:nth-child(3){background-color:var(--c3)}.deck .ch:nth-child(4){background-color:var(--c4)}
.deck .ch.top{background-color:#E53029}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .deck{--c1:rgba(255,255,255,.07);--c2:rgba(255,255,255,.1);--c3:rgba(255,255,255,.13);--c4:rgba(255,255,255,.08)}
  :root:not([data-theme="light"]) .deck .ch:not(.top){backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}}
:root[data-theme="dark"] .deck{--c1:rgba(255,255,255,.07);--c2:rgba(255,255,255,.1);--c3:rgba(255,255,255,.13);--c4:rgba(255,255,255,.08)}
:root[data-theme="dark"] .deck .ch:not(.top){backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
@media (prefers-reduced-motion: reduce){.ch-next i{animation:none}}

/* ================= Bathroom concert ================= */
.wi-tile-sing{position:relative}
.wi-tile-sing .wi-art{cursor:pointer}
.wi-play{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px 0 10px;border-radius:999px;background:var(--red);color:#fff;font-size:13px;font-weight:600;letter-spacing:.01em;box-shadow:0 8px 18px -10px rgba(229,48,41,.8);transition:transform .2s}
.wi-play svg{width:14px;height:14px;fill:#fff}
.wi-play:hover{transform:scale(1.06)}
.wi-play::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--red);opacity:0;animation:wi-ping 2.4s ease-out infinite}
@keyframes wi-ping{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
html.concert-on,html.concert-on body{overflow:hidden}
.concert{position:fixed;inset:0;z-index:300;color:#fff;background-color:#16161A;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;background-position:center;
  opacity:0;transition:opacity .35s ease;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.concert.in{opacity:1}
.cc-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.cc-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);z-index:5}
.cc-title{font-family:var(--sans);font-size:clamp(20px,2vw,26px);letter-spacing:-.03em}
.cc-title em{font-family:var(--serif);font-style:italic}
.cc-close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center}
.cc-close svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none}
.cc-bar{position:absolute;left:var(--pad);right:var(--pad);bottom:max(26px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:18px;z-index:5}
.cc-play{flex:none;width:64px;height:64px;border-radius:50%;background:#E53029;display:grid;place-items:center;box-shadow:0 10px 30px -12px rgba(229,48,41,.9)}
.cc-play svg{width:24px;height:24px;fill:#fff}
.cc-play .i-play{display:none}.concert.paused .cc-play .i-play{display:block}.concert.paused .cc-play .i-pause{display:none}
.cc-track{flex:1;display:flex;flex-direction:column;gap:8px}
.cc-seek{width:100%;accent-color:#E53029}
.cc-time{font-size:13px;font-variant-numeric:tabular-nums;opacity:.85}
.cc-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(22,22,26,.82);z-index:6;text-align:center;padding:0 var(--pad)}
.cc-end[hidden]{display:none}
.cc-end p{font-size:20px;max-width:24ch}.cc-end b{font-family:var(--serif);font-style:italic;font-size:1.3em;color:#FF8A98}
.cc-encore{height:52px;padding:0 28px;border-radius:999px;background:#fff;color:#E53029;font-size:16px;font-weight:600}
@media (prefers-reduced-motion: reduce){.wi-play::after{animation:none}.cc-duck.hop{animation:none}}

/* the tub scene */
.cc-stage{position:absolute;left:50%;top:clamp(84px,14vh,140px);transform:translateX(-50%);width:min(620px,94vw);z-index:1}
.cc-tub{display:block;width:100%;height:auto;overflow:visible}
.cc-tub .t-pipe{stroke:#d9dbe0;stroke-width:6;stroke-linecap:round;fill:none}
.cc-tub .t-head{fill:#e9eaee}
.cc-tub .t-body{fill:#F4F4F6}
.cc-tub .t-rim{fill:#ffffff}
.cc-tub .t-foot{fill:#E53029}
.cc-tub .g{fill:rgba(255,255,255,.18);stroke:#16161A;stroke-width:2.4}
.cc-tub .eye{fill:none;stroke:#16161A;stroke-width:2;stroke-linecap:round}
.cc-tub .foam circle{fill:#fff;stroke:rgba(22,22,26,.08);stroke-width:1}
.cc-tub .foam{animation:cc-foam 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes cc-foam{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,1.05)}}
.cc-tub .me{animation:cc-sway 4s ease-in-out infinite}
@keyframes cc-sway{0%,100%{transform:translate(92px,114px) rotate(-14deg)}50%{transform:translate(92px,112px) rotate(-10deg)}}
.cc-tub .toes{animation:cc-toes 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes cc-toes{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
.cc-duck{cursor:pointer;transform-box:fill-box;transform-origin:50% 100%;animation:cc-bob 2.2s ease-in-out infinite}
@keyframes cc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.cc-duck.hop{animation:cc-hop .5s cubic-bezier(.3,1.6,.5,1)}
.cc-duck .d-body{fill:#FFC93C}.cc-duck .d-beak{fill:#F28C28}.cc-duck .d-eye{fill:#16161A}.cc-duck .d-wing{fill:#F2B21E}
.cc-tip{position:absolute;left:0;right:0;bottom:122px;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,26px);z-index:4;pointer-events:none}
.cc-score{position:absolute;right:var(--pad);top:74px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;z-index:5;pointer-events:none}
.cc-score b{font-family:var(--sans);font-size:28px;letter-spacing:-.03em;color:#FF8A98;margin-right:4px;text-transform:none}
.cc-end p b{font-family:var(--serif);font-style:italic;font-size:1.4em;color:#FF8A98}
@media (max-width:767px){.cc-stage{top:118px}.cc-tip{bottom:116px;font-size:20px}.cc-score{top:70px}}
@media (prefers-reduced-motion: reduce){.cc-tub .foam,.cc-tub .me,.cc-tub .toes,.cc-duck{animation:none}}
.cc-stage{top:47%;transform:translate(-50%,-50%);width:min(700px,92vw)}
@media (max-width:767px){.cc-stage{top:46%;width:104vw}}
.cc-tip,.cc-score,.cc-title,.cc-end p{max-width:none}.cc-end p{max-width:24ch}
/* the tub, as a small white line drawing */
.cc-stage{width:min(440px,80vw)}
@media (max-width:767px){.cc-stage{width:88vw;top:44%}}
.cc-tub .l{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cc-tub .l.fill{fill:#16161A}
.cc-tub .r{fill:#E53029;stroke:none}
.cc-tub .foam circle{fill:#16161A;stroke:#fff}
#ccHead{transform-box:fill-box;transform-origin:50% 100%}
.cc-tub .toes{transform-box:fill-box;transform-origin:50% 100%;animation:cc-toes 1.6s ease-in-out infinite}
.cc-stage{width:min(520px,80vw)}
@media (max-width:767px){.cc-stage{width:100vw;top:45%}}
/* the reference-style scene: a front view of the tub under a rain shower */
.cc-stage{width:min(620px,88vw)}
@media (max-width:767px){.cc-stage{width:112vw;top:44%}}
.cc-tub .dot{fill:#fff}
.cc-tub .l{stroke-width:1.6}
.cc-stage{width:min(520px,80vw)}
@media (max-width:767px){.cc-stage{width:96vw;top:45%}}

/* the sound toggle: a still speaker icon, on or off (no moving bars) */
.snd .eq{display:none}
.snd-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.snd-ico .spk{fill:currentColor}
.snd .snd-ico .off{display:none}
.snd[aria-pressed="false"] .snd-ico .on{display:none}
.snd[aria-pressed="false"] .snd-ico .off{display:inline}
/* the tub scene: hair strands a touch finer than the outlines */
#ccHead .l:not(.fill){stroke-width:1.3}

.cc-end p span{display:block}.cc-end p span + span{margin-top:6px}

/* the thank-you under Brands: serif, like the testimonials; Dew Solutions in bright red, Gaurav Jain in bold */
.brands-thanks{margin:-8px 0 26px;max-width:46ch;font-family:var(--serif);font-size:clamp(19px,1.5vw,22px);line-height:1.5;letter-spacing:-.005em}
.brands-thanks a{color:var(--red);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.brands-thanks a:hover{text-decoration-thickness:2.5px}
.brands-thanks b{font-weight:600}
/* same size and leading as the testimonial quotes */
.brands-thanks{font-size:clamp(17px,1.25vw,19px);line-height:1.5;letter-spacing:-.005em;max-width:52ch}

/* the card being read: very pale red, dark text, key points marked with a soft red highlighter */
.deck .ch.top{background-color:#FCEBED;color:#16161A;background-blend-mode:normal,multiply}
.deck .ch.top{background-image:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.6),rgba(255,255,255,0) 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.deck .ch.top .ch-t{color:#16161A}
.deck .ch.top .ch-t em{color:#E53029}
.deck .ch.top b{color:#16161A;font-weight:600;background:linear-gradient(transparent 58%,rgba(229,48,41,.2) 58%,rgba(229,48,41,.2) 92%,transparent 92%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.deck .ch.top .ch-next{color:#16161A;border-top-color:rgba(22,22,26,.16)}
.deck .ch.top .ch-next i{color:#E53029}

/* phone: the chapter names become a tab rail above the deck, with a sliding red underline */
.di-bar{display:none}
@media (max-width:767px){
  .deck-index{order:2;position:relative;flex-direction:row;flex-wrap:nowrap;gap:22px;margin:4px calc(var(--pad) * -1) 18px;padding:0 var(--pad);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
  .deck-index::-webkit-scrollbar{display:none}
  .deck-index li{flex:none}
  .deck-index a{padding:12px 0 13px;font-size:15px;font-weight:500;white-space:nowrap;border:0}
  .deck-index a::before{display:none}
  .deck-index a.on{color:var(--ink)}
  .di-bar{display:block;position:absolute;left:0;bottom:-1px;height:2px;background:var(--red);border-radius:2px;transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}
  .deck{order:3}
}
@media (prefers-reduced-motion: reduce){.di-bar{transition:none}}

/* ================= Weekends, flat (2026-10-16) =================
   Flat, friendly shapes in the brand red with soft pink, butter and sky. Still at rest on desktop;
   hovering a tile brings it to life. On touch screens they move gently on their own. */
.fi{width:72%;height:auto;overflow:visible}
.fi g,.fi path,.fi rect,.fi circle{transform-box:fill-box;transform-origin:center}
.wk-tiles li .wi-art{transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .35s,border-color .35s}
.fi-sing .drops rect{animation:fi-drop 1.1s linear infinite}
.fi-sing .drops rect:nth-child(2){animation-delay:.3s}.fi-sing .drops rect:nth-child(3){animation-delay:.55s}.fi-sing .drops rect:nth-child(4){animation-delay:.15s}.fi-sing .drops rect:nth-child(5){animation-delay:.7s}.fi-sing .drops rect:nth-child(6){animation-delay:.45s}
@keyframes fi-drop{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}100%{transform:translateY(16px);opacity:0}}
.fi-sing .note{animation:fi-note 2.4s ease-in-out infinite}.fi-sing .n2{animation-delay:1.1s}
@keyframes fi-note{0%{transform:translate(0,6px) rotate(-8deg);opacity:0}25%{opacity:1}100%{transform:translate(4px,-16px) rotate(10deg);opacity:0}}
.fi-ai .dots circle{animation:fi-type 1.3s ease-in-out infinite}.fi-ai .dots circle:nth-child(2){animation-delay:.16s}.fi-ai .dots circle:nth-child(3){animation-delay:.32s}
@keyframes fi-type{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
.fi-ai .sp{animation:fi-spark 1.8s ease-in-out infinite}.fi-ai .sp2{animation-delay:.5s}.fi-ai .sp3{animation-delay:1s}
@keyframes fi-spark{0%,100%{transform:scale(.5) rotate(0)}50%{transform:scale(1.25) rotate(90deg)}}
.fi-scribe .ink{stroke-dasharray:1;stroke-dashoffset:1;animation:fi-write 2.8s ease-in-out infinite}
@keyframes fi-write{0%{stroke-dashoffset:1}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.fi-scribe .pen{animation:fi-pen 2.8s ease-in-out infinite}
@keyframes fi-pen{0%,100%{transform:translate(-50px,-14px)}55%,85%{transform:translate(0,0)}}
.fi-scribe .br circle{animation:fi-pop 2.8s ease-in-out infinite}
.fi-scribe .br circle:nth-child(2){animation-delay:.12s}.fi-scribe .br circle:nth-child(3){animation-delay:.24s}.fi-scribe .br circle:nth-child(4){animation-delay:.36s}.fi-scribe .br circle:nth-child(5){animation-delay:.48s}.fi-scribe .br circle:nth-child(6){animation-delay:.6s}
@keyframes fi-pop{0%,35%{transform:scale(.2)}50%{transform:scale(1.3)}60%,100%{transform:scale(1)}}
.fi-cook .flip{animation:fi-flip 2.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes fi-flip{0%,50%,100%{transform:translateY(0) rotate(0)}68%{transform:translateY(-24px) rotate(180deg)}85%{transform:translateY(0) rotate(360deg)}}
.fi-cook .steam path{animation:fi-steam 2.2s ease-in-out infinite;opacity:0}.fi-cook .steam path:nth-child(2){animation-delay:.4s}.fi-cook .steam path:nth-child(3){animation-delay:.8s}
@keyframes fi-steam{0%{opacity:0;transform:translateY(8px)}40%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
.fi-cook .flame path{transform-origin:50% 100%;animation:fi-flame .5s ease-in-out infinite alternate}.fi-cook .flame path:nth-child(2){animation-delay:.2s}
@keyframes fi-flame{from{transform:scaleY(.8)}to{transform:scaleY(1.15)}}
/* desktop: still until you hover; then everything plays and the tile lifts a little */
@media (hover:hover){
  .fi *{animation-play-state:paused!important}
  .wk-tiles li:hover .fi *{animation-play-state:running!important}
  .wk-tiles li:hover .wi-art{transform:translateY(-4px);background-color:#FFF5F6;border-color:rgba(229,48,41,.35)}
}
@media (prefers-reduced-motion: reduce){.fi *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}

/* "Hear me sing": a lively pill with a bouncing note */
.wi-play{top:auto;bottom:12px;right:auto;left:12px;height:40px;padding:0 16px 0 5px;gap:8px;font-size:14px;box-shadow:0 10px 22px -10px rgba(229,48,41,.9);animation:wp-bounce 3.2s cubic-bezier(.3,1.5,.5,1) infinite;transition:transform .25s}
.wi-play::after{content:none}
.wp-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.wp-ico svg{width:13px;height:13px;fill:#E53029;margin-left:2px}
.wp-note{width:16px;height:16px;fill:#fff;animation:wp-note 1.6s ease-in-out infinite}
@keyframes wp-bounce{0%,82%,100%{transform:translateY(0)}88%{transform:translateY(-6px)}94%{transform:translateY(0)}}
@keyframes wp-note{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-12deg)}}
.wi-play:hover{animation:none;transform:translateY(-3px) scale(1.04)}
.wi-play:hover .wp-ico{transform:rotate(360deg)}
@media (prefers-reduced-motion: reduce){.wi-play,.wp-note{animation:none}}

/* ================= Recent activity: grayscale photos; on desktop, all three at once with IIT Bombay as the hero ================= */
.rc-slides img{filter:grayscale(1)}
@media (min-width:1024px){
  [aria-labelledby="recent-h"] .home-head .rc-controls{display:none}
  .rc-track{grid-auto-flow:row;grid-template-columns:1.55fr 1fr;grid-auto-columns:auto;grid-template-rows:auto auto;column-gap:var(--gutter);row-gap:28px;overflow:visible;margin:0;padding:0}
  .rc-card:first-child{grid-row:1 / span 2}
  .rc-card:first-child .rc-media{aspect-ratio:4/3}
  .rc-card:first-child h3{font-size:clamp(24px,2.2vw,32px)}
  .rc-card:not(:first-child) .rc-media{aspect-ratio:16/9}
  .rc-card:not(:first-child) .rc-body{font-size:var(--fs-base)}
}
.wi-art{position:relative}
/* resting poses (desktop, before hover): the pen on the page, the line written, the dots raised, steam showing */
.fi-scribe .ink,.fi-scribe .pen{animation-delay:-1.9s}
.fi-scribe .br circle:nth-child(1){animation-delay:-1.9s}.fi-scribe .br circle:nth-child(2){animation-delay:-1.78s}.fi-scribe .br circle:nth-child(3){animation-delay:-1.66s}.fi-scribe .br circle:nth-child(4){animation-delay:-1.54s}.fi-scribe .br circle:nth-child(5){animation-delay:-1.42s}.fi-scribe .br circle:nth-child(6){animation-delay:-1.3s}
.fi-cook .steam path:nth-child(1){animation-delay:-.9s}.fi-cook .steam path:nth-child(2){animation-delay:-.5s}.fi-cook .steam path:nth-child(3){animation-delay:-.1s}
.fi-sing .drops rect:nth-child(1){animation-delay:-.5s}.fi-sing .drops rect:nth-child(2){animation-delay:-.2s}.fi-sing .drops rect:nth-child(3){animation-delay:-.75s}.fi-sing .drops rect:nth-child(4){animation-delay:-.4s}.fi-sing .drops rect:nth-child(5){animation-delay:-.6s}.fi-sing .drops rect:nth-child(6){animation-delay:-.3s}
.fi-sing .n1{animation-delay:-.9s}.fi-sing .n2{animation-delay:-1.6s}
@media (max-width:767px){.wi-play{height:32px;padding:0 12px 0 4px;gap:6px;font-size:12.5px;white-space:nowrap;left:8px;bottom:8px}.wp-ico{width:24px;height:24px}.wp-ico svg{width:11px;height:11px}.wp-note{display:none}}

/* Client logos: full colour; light tiles keep them legible in dark mode */
.brands li.logo{padding:18px 22px}
.brands li.logo img{display:block;max-width:min(150px,78%);max-height:44px;width:auto;height:auto;object-fit:contain}
@media (max-width:600px){.brands li.logo{padding:14px 10px}.brands li.logo img{max-height:32px;max-width:86%}}
@media (min-width:1024px){.brands li.logo img{max-width:min(190px,70%);max-height:56px}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brands li.logo{background:#fff}}
:root[data-theme="dark"] .brands li.logo{background:#fff}
.brands-thanks{max-width:68ch}

/* Weekends v3: Sing and Cook redrawn in the soft-pink style of AI and Scribe */
.fi-sing .bb{animation:fi-wob 2.6s ease-in-out infinite}
.fi-sing .nt{animation:fi-bob 2.6s ease-in-out infinite}
.fi-sing .bub{animation:fi-rise 2.6s ease-in-out infinite}.fi-sing .b2{animation-delay:-.9s}.fi-sing .b3{animation-delay:-1.7s}
.fi-sing .sp{animation:fi-spark 1.8s ease-in-out infinite}
@keyframes fi-wob{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.97)}}
@keyframes fi-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-6deg)}}
@keyframes fi-rise{0%{transform:translateY(6px);opacity:0}25%,70%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.fi-cook .lid{animation:fi-lid 1.4s ease-in-out infinite}
.fi-cook .dots circle{animation:fi-type 1.3s ease-in-out infinite}.fi-cook .dots circle:nth-child(2){animation-delay:.16s}.fi-cook .dots circle:nth-child(3){animation-delay:.32s}
.fi-cook .sp{animation:fi-spark 1.8s ease-in-out infinite}.fi-cook .sp3{animation-delay:.8s}
@keyframes fi-lid{0%,60%,100%{transform:translateY(0) rotate(0)}70%{transform:translateY(-4px) rotate(-4deg)}80%{transform:translateY(-2px) rotate(3deg)}}
/* the pen writes along the line, from its start to its end */
@keyframes fi-pen{0%,100%{transform:translate(-38px,0)}55%,85%{transform:translate(0,0)}}
/* "Pop the bubbles" button: two little bubbles instead of a play triangle */
.wp-bub{position:relative}
.wp-bub i{position:absolute;border-radius:50%;border:2px solid var(--red)}
.wp-bub i:first-child{width:12px;height:12px;left:6px;top:10px}
.wp-bub i:last-child{width:7px;height:7px;left:16px;top:6px;animation:wp-bub 1.6s ease-in-out infinite}
@keyframes wp-bub{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media (max-width:767px){.wp-bub i:first-child{width:10px;height:10px;left:4px;top:8px}.wp-bub i:last-child{width:6px;height:6px;left:12px;top:4px}}
/* Weekdays are crossed out; Sat and Sun stay */
.wk-cal span:not(.we){position:relative;border-color:transparent}
.wk-cal span:not(.we)::before{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--red);transform:rotate(-40deg)}
.fi-sing .b1{animation-delay:-.6s}

/* Weekends v4: game link sits under the Sing caption, not on the art */
.wi-game{display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding:0;background:none;border:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.wg-bub{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--red);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.wg-bub i{position:absolute;border-radius:50%;border:2px solid #fff}
.wg-bub i:nth-child(1){width:12px;height:12px;left:7px;top:14px}
.wg-bub i:nth-child(2){width:8px;height:8px;left:18px;top:8px;animation:wg-rise 2.2s ease-in-out infinite}
.wg-bub i:nth-child(3){width:5px;height:5px;left:20px;top:20px;animation:wg-rise 2.2s ease-in-out -1.1s infinite}
@keyframes wg-rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.wg-t{display:flex;flex-direction:column;line-height:1.25}
.wg-t b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:18px;color:var(--red)}
.wg-t span{font-size:13px;font-weight:500;text-decoration:underline;text-decoration-color:rgba(229,48,41,.45);text-underline-offset:3px}
.wi-game:hover .wg-bub{transform:scale(1.1) rotate(-12deg)}
.wi-game:hover .wg-t span{text-decoration-color:var(--red)}
.wi-game:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:8px}
@media (max-width:767px){.wi-game{gap:8px;margin-top:10px}.wg-bub{width:30px;height:30px}.wg-t b{font-size:16px}.wg-t span{font-size:12px}}
@media (prefers-reduced-motion: reduce){.wg-bub i{animation:none}}

/* Illustrations: a slow float and twinkle at rest; full motion and a pale tile on hover */
.wk-tiles .fi{animation:fi-float 4.5s ease-in-out infinite}
.wk-tiles li:nth-child(2) .fi{animation-delay:-1.1s}.wk-tiles li:nth-child(3) .fi{animation-delay:-2.2s}.wk-tiles li:nth-child(4) .fi{animation-delay:-3.3s}
@keyframes fi-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (hover:hover){
  .fi .sp,.fi-sing .bub,.fi-cook .steam path{animation-play-state:running!important}
  .wk-tiles li:hover .wi-art{background-color:#FFF1F3;border-color:rgba(229,48,41,.18)}
  .wk-tiles li:hover .fi{animation-duration:2.2s}
}
@media (prefers-reduced-motion: reduce){.wk-tiles .fi{animation:none}}

/* Weekends v5 */
/* each tile has its own pale tint; hover deepens it */
.wk-tiles li .wi-art{border-color:transparent}
.wk-tiles li:nth-child(1) .wi-art{background-color:#EEF6FD}
.wk-tiles li:nth-child(2) .wi-art{background-color:#FFF6DD}
.wk-tiles li:nth-child(3) .wi-art{background-color:#F2EEFA}
.wk-tiles li:nth-child(4) .wi-art{background-color:#FFF0E6}
@media (hover:hover){
  .wk-tiles li:nth-child(1):hover .wi-art{background-color:#D9ECFB;border-color:transparent}
  .wk-tiles li:nth-child(2):hover .wi-art{background-color:#FFEAB0;border-color:transparent}
  .wk-tiles li:nth-child(3):hover .wi-art{background-color:#E3DBF5;border-color:transparent}
  .wk-tiles li:nth-child(4):hover .wi-art{background-color:#FFDCC4;border-color:transparent}
}
/* play button: a red disc with a play triangle and two bubbles floating off it */
.wg-bub{display:grid;place-items:center;overflow:visible}
.wg-bub svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.wg-bub i{border-color:var(--red);background:var(--bg,#fff)}
.wg-bub i:nth-child(2){width:9px;height:9px;left:auto;right:-6px;top:-5px;animation:wg-rise 2.2s ease-in-out infinite}
.wg-bub i:nth-child(3){width:6px;height:6px;left:auto;right:-11px;top:6px;animation:wg-rise 2.2s ease-in-out -1.1s infinite}
.wi-game{gap:14px}
.wi-game:hover .wg-bub{transform:scale(1.1)}
/* weekdays: readable, with a thin red line through; Sat and Sun spelt out as tags */
.wk-cal span:not(.we){border-color:transparent;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1.5px;color:var(--ink)}
.wk-cal span:not(.we)::before{content:none}
.wk-cal .we{width:auto;padding:0 9px;border-radius:8px}
.wk-cal .we::after{content:none}
/* concert disclaimer */
.cc-intro{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;padding:0 var(--pad);background:rgba(22,22,26,.88);text-align:center}
.cc-intro[hidden]{display:none}
.cci{max-width:34ch}
.cci-k{font-family:var(--serif);font-style:italic;font-size:17px;color:#FF8A98;margin:0 0 10px}
.cci-h{font-family:var(--sans);font-weight:400;font-size:clamp(34px,5vw,48px);letter-spacing:-.035em;line-height:1.05;margin:0 0 18px}
.cci-h em{font-family:var(--serif);font-style:italic;letter-spacing:-.01em;color:#FF8A98}
.cci-p{font-size:17px;line-height:1.5;margin:0 auto 10px;max-width:34ch}
.cc-jam{margin-top:16px;height:52px;padding:0 30px;border-radius:999px;background:#fff;color:#E53029;font-size:16px;font-weight:600;transition:transform .2s}
.cc-jam:hover{transform:scale(1.05)}
.concert .cc-top{z-index:8}
/* Trial: hero subtext in the serif (remove this block to go back to DM Sans) */
.is-home .hero .hero-sub{font-family:var(--serif);font-size:clamp(20px,1.6vw,23px);line-height:1.5;letter-spacing:-.005em}
.is-home .hero .hero-sub b{font-weight:600}
@media (max-width:767px){.home .hero .hero-sub,.is-home .hero .hero-sub{font-size:18.5px;line-height:1.45}}
@media (max-width:767px){.wk-head .wk-cal span:not(.we){width:15px}.wk-head .wk-cal .we{width:auto;padding:0 7px;font-size:11px}.wk-cal{gap:3px}}

/* Weekends v6: very light grey tiles; pale red on hover or tap */
.wk-tiles li .wi-art,.wk-tiles li:nth-child(n) .wi-art{background-color:#F4F4F5;border-color:transparent}
.wk-tiles li:nth-child(n):hover .wi-art,.wk-tiles li:nth-child(n):active .wi-art{background-color:#FCEBED;border-color:transparent}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wk-tiles li:nth-child(n) .wi-art{background-color:rgba(255,255,255,.06)}}
:root[data-theme="dark"] .wk-tiles li:nth-child(n) .wi-art{background-color:rgba(255,255,255,.06)}
/* concert intro: short, two sizes only */
.cci-p b{color:#fff;font-weight:600}
.cci-s{font-size:15px;color:#FF8A98;margin-top:4px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wk-tiles li:nth-child(n):hover .wi-art,:root:not([data-theme="light"]) .wk-tiles li:nth-child(n):active .wi-art{background-color:rgba(229,48,41,.2)}}
:root[data-theme="dark"] .wk-tiles li:nth-child(n):hover .wi-art,:root[data-theme="dark"] .wk-tiles li:nth-child(n):active .wi-art{background-color:rgba(229,48,41,.2)}
.cc-intro{background:rgba(22,22,26,.96)}

/* Weekends v7: simple line drawings, ink with one red accent, like the step drawings */
.wk-tiles li:nth-child(n) .wi-art,.wk-tiles li:nth-child(n):hover .wi-art,.wk-tiles li:nth-child(n):active .wi-art{background-color:transparent;border:1px solid var(--line)}
@media (hover:hover){.wk-tiles li:nth-child(n):hover .wi-art{border-color:var(--red);transform:translateY(-3px)}}
.fl{--d:3.4s;width:58%;height:auto;overflow:visible;color:var(--ink)}
.wk-tiles li:hover .fl,.wk-tiles li:active .fl{--d:1.5s}
.fl *{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.fl .r{color:var(--red);stroke:var(--red)}
.fl .dot{fill:currentColor;stroke:none}.fl .dot.r{fill:var(--red)}
.fl g{fill:none}
.fl-sing .drops path{animation:fl-drop var(--d) linear infinite}
.fl-sing .drops path:nth-child(2){animation-delay:-.7s}.fl-sing .drops path:nth-child(3){animation-delay:-1.4s}.fl-sing .drops path:nth-child(4){animation-delay:-2.1s}.fl-sing .drops path:nth-child(5){animation-delay:-2.8s}
.fl-sing .note{animation:fl-bob var(--d) ease-in-out infinite}
.fl-ai .dots circle{animation:fl-type var(--d) ease-in-out infinite}.fl-ai .dots circle:nth-child(2){animation-delay:.15s}.fl-ai .dots circle:nth-child(3){animation-delay:.3s}
.fl-ai .spark{animation:fl-spin calc(var(--d) * 2) linear infinite}
.fl-scribe .ink{stroke-dasharray:1;animation:fl-write var(--d) ease-in-out infinite}
.fl-scribe .br circle{animation:fl-pop var(--d) ease-in-out infinite}
.fl-scribe .br circle:nth-child(2){animation-delay:.12s}.fl-scribe .br circle:nth-child(3){animation-delay:.24s}.fl-scribe .br circle:nth-child(4){animation-delay:.36s}.fl-scribe .br circle:nth-child(5){animation-delay:.48s}.fl-scribe .br circle:nth-child(6){animation-delay:.6s}
.fl-cook .steam path{stroke-dasharray:1;animation:fl-steam var(--d) ease-in-out infinite}.fl-cook .steam path:nth-child(2){animation-delay:-.6s}.fl-cook .steam path:nth-child(3){animation-delay:-1.2s}
.fl-cook .lid{animation:fl-lid var(--d) ease-in-out infinite}
@keyframes fl-drop{0%{transform:translateY(-4px);opacity:0}25%{opacity:1}100%{transform:translateY(10px);opacity:0}}
@keyframes fl-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-6deg)}}
@keyframes fl-type{0%,50%,100%{transform:translateY(0)}25%{transform:translateY(-4px)}}
@keyframes fl-spin{to{transform:rotate(360deg)}}
@keyframes fl-write{0%{stroke-dashoffset:1}50%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fl-pop{0%,30%,100%{transform:scale(1)}15%{transform:scale(1.6)}}
@keyframes fl-steam{0%{stroke-dashoffset:1;opacity:1}50%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fl-lid{0%,70%,100%{transform:translateY(0) rotate(0)}78%{transform:translateY(-3px) rotate(-3deg)}86%{transform:translateY(-1px) rotate(2deg)}}
@media (prefers-reduced-motion: reduce){.fl *{animation:none!important}}
.fl{width:76%}.fl *{stroke-width:1.8}
@media (max-width:767px){.fl{width:84%}}

/* Recent activity photos: thin progress bars instead of dots and arrows */
.rc-media-nav{left:14px;right:14px;top:14px;bottom:auto}
.rc-arrows{display:none}
.rc-dots{flex:1;gap:4px;padding:0;background:none;border-radius:0}
.rc-dots button{position:relative;flex:1;width:auto;height:14px;padding:0;border-radius:0;background:none;opacity:1}
.rc-dots button::before,.rc-dots button::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px}
.rc-dots button::before{background:rgba(255,255,255,.38);box-shadow:0 0 6px rgba(0,0,0,.25)}
.rc-dots button::after{background:#fff;transform-origin:left;transform:scaleX(0)}
.rc-dots button.done::after{transform:scaleX(1)}
.rc-dots button.on::after{animation:rc-fill 4.5s linear forwards}
.rc-dots button[aria-current="true"]{width:auto}
.rc-media.hold .rc-dots button.on::after{animation-play-state:paused}
@keyframes rc-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.rc-dots button.on::after{animation:none;transform:scaleX(1)}}

/* Recent activity v3: photos in colour; a thin pill indicator at the bottom, the current pill fills red */
.rc-slides img{filter:none}
.rc-slides{cursor:pointer}
.rc-media-nav{left:12px;right:auto;top:auto;bottom:12px}
.rc-dots{flex:none;gap:5px;padding:6px 8px;border-radius:999px;background:rgba(0,0,0,.4)}
.rc-dots button{flex:none;width:8px;height:12px;transition:width .3s ease}
.rc-dots button::before,.rc-dots button::after{top:4.5px;height:3px;border-radius:3px}
.rc-dots button::before{background:rgba(255,255,255,.55);box-shadow:none}
.rc-dots button.done::before{background:rgba(255,255,255,.55)}
.rc-dots button::after{background:var(--red)}
.rc-dots button.done::after{transform:scaleX(0)}
.rc-dots button.on{width:26px}
.rc-dots button.on::before{background:#fff}
.rc-dots button.on::after{animation-duration:3s}
@media (prefers-reduced-motion: reduce){.rc-dots button.on::after{transform:scaleX(0)}}
/* Recent activity: arrows back (bottom right); longer pills on desktop */
.rc-media-nav{right:12px}
.rc-arrows{display:flex}
@media (max-width:600px){.rc-arrows{display:none}}
@media (min-width:1024px){.rc-dots{gap:6px;padding:7px 10px}.rc-dots button{width:14px}.rc-dots button.on{width:44px}}
/* Hero photos: a deeper fade under the caption so it always reads */
.reel-caption{padding-top:90px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55) 45%,rgba(0,0,0,.85));text-shadow:0 1px 8px rgba(0,0,0,.45)}
/* Phone: all four frames, bigger, as a swipeable row */
@media (max-width:767px){
  .hero-reel{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:4px;padding:0 16px;scroll-padding:0 16px}
  .hero-reel::-webkit-scrollbar{display:none}
  .reel-panel,.reel-panel:nth-child(n){display:block;flex:0 0 82%;height:min(68vw,320px);scroll-snap-align:start;border-radius:0}
  .reel-panel.reel-portrait,.reel-panel.reel-square{flex-basis:62%}
  .reel-caption{padding-top:70px}
}
/* Phone: the IIT Bombay frame comes first so it is seen straight away */
@media (max-width:767px){.reel-panel.reel-wide{order:-1}}

/* A simple framework: four overlapping cards; the active one turns red, lifts, and its bar fills */
.fw{margin-top:var(--space-section)}
.fw-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(24px,3vw,40px)}
.fw-head h3{font-family:var(--sans);font-size:clamp(28px,3vw,44px);font-weight:400;letter-spacing:-.035em;line-height:1.05;margin:0}
.fw-head h3 em{font-family:var(--serif);font-style:italic;letter-spacing:-.02em}
.fw-head p{font-size:var(--fs-base);line-height:1.5;max-width:38ch;margin:0}
.fw-cards{list-style:none;margin:0;padding:12px 0 0;display:flex}
.fw-cards li{position:relative;flex:1 1 0;min-width:0;min-height:clamp(220px,20vw,280px);margin-left:-3.2%;padding:clamp(20px,2vw,28px) clamp(20px,2.4vw,32px) 28px;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;border:1px solid var(--line);border-radius:22px;background:var(--bg);color:var(--ink);
  box-shadow:-14px 0 28px -22px rgba(0,0,0,.45);cursor:default;outline:none;overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.9,.2,1),color .4s ease,border-color .4s ease,box-shadow .6s ease}
.fw-cards li:first-child{margin-left:0}
.fw-cards li:nth-child(1){z-index:1}.fw-cards li:nth-child(2){z-index:2}.fw-cards li:nth-child(3){z-index:3}.fw-cards li:nth-child(4){z-index:4}
.fw-cards li::before{content:"";position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.7,0,.2,1);z-index:-1}
.fw-cards li > *{position:relative}
.fw-cards li{isolation:isolate}
.fw-cards h4{font-family:var(--sans);font-size:clamp(24px,2.1vw,32px);font-weight:400;letter-spacing:-.035em;line-height:1.02;margin:0}
.fw-cards h4 em{display:block;font-family:var(--serif);font-style:italic;letter-spacing:-.015em}
.fw-cards p{font-size:var(--fs-sm);line-height:1.45;margin:0;max-width:26ch}
.fw-bar{display:block;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.fw-bar i{display:block;height:100%;background:currentColor;transform:scaleX(0);transform-origin:left}
.fw-cards li.past .fw-bar i{transform:scaleX(1);opacity:.35}
.fw-cards li.on{z-index:10;color:#fff;border-color:var(--red);transform:translateY(-12px) rotate(-1.2deg);box-shadow:0 26px 40px -24px rgba(229,48,41,.75)}
.fw-cards li.on::before{transform:scaleY(1)}
.fw-cards li.on .fw-bar{background:rgba(255,255,255,.35)}
.fw-cards li.on .fw-bar i{animation:fw-fill 1.5s linear forwards}
.fw.hold .fw-cards li.on .fw-bar i{animation-play-state:paused}
@keyframes fw-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the loop back to the start */
.fw-loop{position:relative;height:60px;margin:6px 0 0}
.fw-loop svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fw-loop path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.fw-arc{stroke:var(--line);stroke-dasharray:.006 .008;animation:fw-march 18s linear infinite reverse}
.fw-arc-on{stroke:var(--red);stroke-dasharray:1;stroke-dashoffset:1}
.fw-loop.go .fw-arc-on{animation:fw-draw 1.2s cubic-bezier(.6,0,.3,1) forwards}
.fw-loop span{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,50%);padding:0 12px;background:var(--bg);font-family:var(--serif);font-style:italic;font-size:var(--fs-sm)}
@keyframes fw-march{to{stroke-dashoffset:1}}
@keyframes fw-draw{0%{stroke-dashoffset:1;opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
/* tablet and phone: the cards stack and overlap downwards; the loop runs up the left side */
@media (max-width:900px){
  .fw-cards{flex-direction:column;padding:0 0 0 22px}
  .fw-cards li{margin-left:0;margin-top:-26px;min-height:0;padding:22px 22px 26px;gap:18px;box-shadow:0 -14px 28px -22px rgba(0,0,0,.45)}
  .fw-cards li:first-child{margin-top:0}
  .fw-cards li.on{transform:translateX(6px) rotate(-.8deg)}
  .fw-cards p{max-width:none}
  .fw-cards{position:relative}
  .fw-cards::before{content:"";position:absolute;left:6px;top:24px;bottom:24px;border-left:1.5px dashed var(--line);transition:border-color .3s}
  .fw.wrap .fw-cards::before{border-left:1.5px solid var(--red)}
  .fw-loop{height:auto;margin:14px 0 0 22px}
  .fw-loop svg{display:none}
  .fw-loop span{position:static;transform:none;padding:0;background:none;font-size:var(--fs-sm)}
}
@media (prefers-reduced-motion: reduce){.fw-cards li,.fw-cards li::before{transition:none}.fw-cards li.on .fw-bar i{animation-duration:6s}.fw-arc{animation:none}}
@media (min-width:901px){.fw-cards li{margin-left:-28px}.fw-cards li:first-child{margin-left:0}.fw-cards li:not(:first-child){padding-left:calc(clamp(20px,2.4vw,32px) + 26px)}}
@media (max-width:900px){.fw-cards li{flex:none;margin-top:-18px;padding:22px 22px 40px}.fw-cards li:first-child{margin-top:0}.fw-cards li .fw-bar{margin-top:4px}}
.fw-cards li.on .fw-bar i{animation-duration:2.2s}
/* Tata CLiQ mark is drawn small; give it more height */
.brands li.logo img[alt="Tata CLiQ"]{max-height:52px;max-width:min(120px,60%)}
@media (max-width:600px){.brands li.logo img[alt="Tata CLiQ"]{max-height:40px;max-width:66%}}
@media (min-width:1024px){.brands li.logo img[alt="Tata CLiQ"]{max-height:66px;max-width:min(140px,50%)}}
.brands li.logo img[alt="Tata CLiQ"]{height:40px;width:auto}
@media (max-width:600px){.brands li.logo img[alt="Tata CLiQ"]{height:32px}}
@media (min-width:1024px){.brands li.logo img[alt="Tata CLiQ"]{height:50px}}

/* Design framework: no loop line; "viable" gets a red underline with "lovable / desirable" written above it */
.fw-loop{display:none}
@media (max-width:900px){.fw-cards{padding-left:0}.fw-cards::before{content:none}}
.fw-cards p.fw-mvp{padding-top:22px}
.fw-fix{position:relative;display:inline-block;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.fw-note{position:absolute;left:50%;bottom:100%;transform:translate(-30%,-2px) rotate(-4deg);white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1;color:var(--red);pointer-events:none}
.fw-note svg{position:absolute;left:4px;top:100%;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fw-cards li.on .fw-fix{text-decoration-color:#fff}
.fw-cards li.on .fw-note{color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fw-note{transform:translate(-50%,-6px) rotate(-3deg)}.fw-note svg{left:50%;margin-left:-7px;top:calc(100% - 1px);width:14px;height:12px}

/* Banner: five frames; the one under the pointer widens and the others make room */
@media (hover:hover) and (min-width:861px){
  .reel-panel{transition:flex-grow .7s cubic-bezier(.2,.8,.2,1)}
  .hero-reel:hover .reel-panel{flex-grow:.8}
  .hero-reel .reel-panel:hover{flex-grow:2.4}
  .reel-caption{transition:opacity .4s}
}
@media (min-width:768px) and (max-width:860px){.reel-panel:nth-child(n+4){display:none}}
/* Recent activity: the first photo stays up longer */
.rc-dots button.on.first::after{animation-duration:5.5s}

/* Headline sound: starts as a "Hear the headline" pill so it is clear the words play music */
.snd.invite{width:auto!important;padding:0 16px 0 12px!important;border-radius:999px;gap:8px;position:relative}
.snd .snd-label{display:none;font-size:14px;font-weight:600;letter-spacing:.005em}
.snd.invite .snd-label{display:inline}
.snd.invite::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:1.5px solid currentColor;opacity:0;animation:snd-ping 2.2s ease-out infinite}
@keyframes snd-ping{0%{opacity:.6;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}
.snd.invite .snd-ico .on{animation:snd-wave 1.2s ease-in-out infinite}
@keyframes snd-wave{0%,100%{opacity:1}50%{opacity:.25}}
/* each word pops as its note plays */
.hw.hit{animation:hw-hit .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes hw-hit{0%{transform:translateY(0)}40%{transform:translateY(-.12em) scale(1.06)}100%{transform:none}}
/* phones: a finger can slide across the words (the page still scrolls up and down) */
#heroTitle.hplay{touch-action:pan-y}
@media (prefers-reduced-motion: reduce){.snd.invite::after,.snd.invite .snd-ico .on{animation:none}.hw.hit{animation:none}}
/* Testimonials on phones: every photo is the same square and stays inside its card */
@media (max-width:600px){
  .home .t-card .t-frame{width:100%;min-height:0;aspect-ratio:1/1;align-self:start}
  .home .t-card{align-content:start}
}
@media (max-width:600px){.home .t-card blockquote{-webkit-line-clamp:10}}
.home .t-card blockquote{-webkit-line-clamp:11}
@media (max-width:600px){.home .t-card blockquote{-webkit-line-clamp:11}}
/* Phone banner order: IIT Bombay, then QCI, then the rest */
@media (max-width:767px){.reel-panel.reel-wide{order:-2}.reel-panel.reel-square{order:-1}}
/* Menu: the shower concert entry carries a small note */
.menu-note{display:block;margin-top:2px;font-family:var(--sans);font-style:normal;font-size:13px;font-weight:500;letter-spacing:.01em}

/* Jam with me: start screen */
.cc-intro{background:rgba(22,22,26,.97)}
.cci{max-width:30ch;display:flex;flex-direction:column;align-items:center}
.cci-bubbles{position:relative;width:120px;height:90px;margin-bottom:22px}
.cci-bubbles i{position:absolute;bottom:0;border-radius:50%;border:2px solid rgba(255,255,255,.85);animation:cci-rise 3.2s ease-in-out infinite}
.cci-bubbles i:nth-child(1){left:10px;width:26px;height:26px;animation-delay:0s}
.cci-bubbles i:nth-child(2){left:46px;width:16px;height:16px;animation-delay:.6s}
.cci-bubbles i:nth-child(3){left:70px;width:34px;height:34px;animation-delay:1.2s;border-color:#FF8A98}
.cci-bubbles i:nth-child(4){left:28px;width:12px;height:12px;animation-delay:1.9s}
.cci-bubbles i:nth-child(5){left:92px;width:14px;height:14px;animation-delay:2.5s}
@keyframes cci-rise{0%{transform:translateY(10px) scale(.6);opacity:0}25%{opacity:1}100%{transform:translateY(-70px) scale(1);opacity:0}}
.cci-h{font-size:clamp(34px,6vw,52px);margin:0 0 16px}
.cci-h em{display:block}
.cci-p{font-size:17px;line-height:1.5;margin:0 0 6px;max-width:30ch}
.cc-jam{display:inline-flex;align-items:center;gap:10px;margin-top:24px;height:54px;padding:0 28px 0 22px}
.cc-jam svg{width:16px;height:16px;fill:currentColor}
@media (prefers-reduced-motion: reduce){.cci-bubbles i{animation:none;opacity:1}}

/* Flipbook (project walkthrough) */
.fb{margin:clamp(8px,2vw,24px) 0 clamp(32px,4vw,56px)}
.fb-stage{position:relative;aspect-ratio:16/10;perspective:2400px;border-radius:16px;background:#ECECEE;overflow:hidden;outline:none;touch-action:pan-y pinch-zoom}
.fb-stage:focus-visible{box-shadow:0 0 0 2px var(--red)}
.fb-page{position:absolute;inset:clamp(10px,2vw,28px);margin:0;display:none;background:#fff;border-radius:6px;transform-origin:left center;backface-visibility:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 30px -18px rgba(0,0,0,.35);will-change:transform}
.fb-page.on{display:block}
.fb-page img{width:100%;height:100%;object-fit:contain;display:block;border-radius:6px}
.fb-shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:3}
.fb-zone{position:absolute;top:0;bottom:0;width:50%;z-index:4;background:none;border:0;padding:0}
.fb-zl{left:0;cursor:w-resize}.fb-zr{right:0;cursor:e-resize}
.fb-full{position:absolute;right:12px;top:12px;z-index:5;width:38px;height:38px;border-radius:50%;background:rgba(22,22,26,.72);color:#fff;display:grid;place-items:center}
.fb-full svg{width:16px;height:16px}.fb-full .c{display:none}.fb.full .fb-full .o{display:none}.fb.full .fb-full .c{display:inline}
.fb-bar{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;margin-top:14px}
.fb-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;color:var(--ink);transition:background .2s,color .2s}
.fb-btn svg{width:16px;height:16px}
.fb-btn:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.fb-btn:disabled{border-color:var(--line);color:var(--line);cursor:default}
.fb-mid{min-width:0}
.fb-cap{margin:0 0 8px;font-size:var(--fs-sm);line-height:1.4;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-pips{display:flex;gap:4px}
.fb-pips i{flex:1;height:3px;border-radius:3px;background:var(--line);cursor:pointer;transition:background .3s}
.fb-pips i.on{background:var(--red)}
.fb-count{font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:600px){
  .fb-stage{aspect-ratio:4/3;border-radius:12px}
  .fb-page{inset:8px}
  .fb-bar{grid-template-columns:1fr auto;gap:10px}
  .fb-btn{display:none}
  .fb-cap{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
/* full screen */
.fb.full{position:fixed;inset:0;z-index:500;margin:0;background:#16161A;display:flex;flex-direction:column;padding:12px}
.fb.full .fb-stage{flex:1;aspect-ratio:auto;background:#16161A;border-radius:0}
.fb.full .fb-page{inset:0;background:transparent;box-shadow:none}
.fb.full .fb-bar{color:#fff}.fb.full .fb-btn{border-color:#fff;color:#fff}.fb.full .fb-count{color:#fff}
.fb.full .fb-pips i{background:rgba(255,255,255,.25)}.fb.full .fb-pips i.on{background:var(--red)}
.fb:fullscreen{position:fixed}
html.fb-lock,html.fb-lock body{overflow:hidden}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fb-stage{background:#232327}}
:root[data-theme="dark"] .fb-stage{background:#232327}
@media (max-width:767px) and (orientation:portrait){
  .fb.full .fb-stage::after{content:"Turn your phone sideways to read";position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:6;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:500;white-space:nowrap;pointer-events:none}
}

/* ===== Case-study book ===== */
.bk{margin:clamp(8px,2vw,24px) 0 clamp(40px,5vw,72px)}
.bk-tabs ol{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:6px 18px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.bk-tabs button{padding:10px 0;font-size:var(--fs-sm);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.bk-tabs button[aria-current="true"]{color:var(--red);border-bottom-color:var(--red)}
/* the page itself */
.bp{height:100%;overflow:auto;padding:clamp(24px,3vw,44px);background:#fff;color:#16161A;font-size:15px;line-height:1.55;scrollbar-width:thin}
.bp-label{margin:0 0 8px;font-family:var(--serif);font-style:italic;font-size:17px;color:#E53029}
.bp h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.1vw,32px);line-height:1.15;letter-spacing:-.01em;margin:0 0 14px}
.bp h3{font-size:15px;font-weight:600;margin:0 0 4px}
.bp p{margin:0 0 10px;max-width:none}
.bp-lead{font-family:var(--serif);font-size:18px;line-height:1.45}
.bp-caps{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.bp-caps li{padding-left:12px;border-left:2px solid #E53029}
.bp-decision{margin-top:14px;padding-top:12px;border-top:1px solid #E6E6E9}
.bp-principle{margin:16px 0 0;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4;color:#E53029}
.bp-note{font-size:13px}
.bp-cover{display:flex;flex-direction:column;justify-content:flex-end}
.bp-cover h2{font-size:clamp(30px,3vw,46px)}
.bp-contents ol{list-style:none;padding:0;margin:8px 0 0}
.bp-contents li{border-top:1px solid #E6E6E9}
.bp-contents button{width:100%;text-align:left;padding:14px 0;font-family:var(--serif);font-size:22px;color:#16161A}
.bp-contents button:hover{color:#E53029}
.bp-hint{margin-top:16px;font-size:13px}
.bp-opener{display:flex;flex-direction:column;justify-content:center}
.bp-opener h2{font-size:clamp(34px,3.4vw,52px);font-style:italic}
.bp-img{margin:0;display:flex;flex-direction:column;justify-content:center;gap:12px}
.bp-zoom{display:block;padding:0;border:0;background:none;cursor:zoom-in}
.bp-img img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 0 0 1px #E6E6E9}
.bp-img figcaption{font-size:14px;line-height:1.45}
.bp-img figcaption span{display:block;margin-bottom:2px;font-family:var(--serif);font-style:italic;font-size:16px;color:#E53029}
/* desktop: two-page spread */
.bk-mob{display:none}
.bk-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;height:min(78vh,720px);perspective:2600px;border-radius:14px;background:#E9E9EC;padding:14px;gap:0;outline:none;cursor:pointer}
.bk-stage:focus-visible{box-shadow:0 0 0 2px var(--red)}
.bk-slot{position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 36px -24px rgba(0,0,0,.4)}
.bk-l{border-radius:8px 0 0 8px}.bk-r{border-radius:0 8px 8px 0}
.bk-spine{position:absolute;left:50%;top:14px;bottom:14px;width:1px;background:rgba(0,0,0,.12);z-index:2;pointer-events:none}
.bk-leaf{display:none;position:absolute;top:14px;bottom:14px;left:50%;width:calc(50% - 14px);transform-origin:left center;transform-style:preserve-3d;z-index:5;pointer-events:none}
.bk-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;box-shadow:0 10px 30px -10px rgba(0,0,0,.35)}
.bk-front{border-radius:0 8px 8px 0}
.bk-back{transform:rotateY(180deg);border-radius:8px 0 0 8px}
.bk-shade{position:absolute;inset:14px;background:#000;opacity:0;pointer-events:none;z-index:4;border-radius:8px}
.bk-bar{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;margin-top:14px}
.bk-pips,.bk-mpips{display:flex;gap:4px}
.bk-pips i,.bk-mpips i{flex:1;height:3px;border-radius:3px;background:var(--line);cursor:pointer;transition:background .3s}
.bk-pips i.on,.bk-mpips i.on{background:var(--red)}
.bk-count,.bk-mcount{font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* phone (and narrow tablets): swipe through single pages */
@media (max-width:900px){
  .bk-desk{display:none}
  .bk-mob{display:block}
  .bk-tabs ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:18px}
  .bk-tabs ol::-webkit-scrollbar{display:none}
  .bk-tabs button{white-space:nowrap}
  .bk-track{list-style:none;margin:0 calc(var(--pad) * -1);padding:0 var(--pad);display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .bk-track::-webkit-scrollbar{display:none}
  .bk-card{scroll-snap-align:start;height:min(74vh,600px);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
  .bp{padding:22px 20px;font-size:15px}
  .bp h2{font-size:24px}
  .bp-lead{font-size:17px}
  .bp-cover h2{font-size:30px}
  .bp-opener h2{font-size:34px}
  .bk-mbar{display:flex;align-items:center;gap:12px;margin-top:14px}
  .bk-mpips{flex:1}
}
/* full-size screen */
.bk-lb{position:fixed;inset:0;z-index:600;background:rgba(22,22,26,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 12px 20px;gap:12px}
.bk-lb[hidden]{display:none}
.bk-lb img{max-width:100%;max-height:calc(100% - 60px);object-fit:contain;border-radius:6px;background:#fff}
.bk-lb p{color:#fff;font-size:14px;text-align:center;max-width:60ch;margin:0}
.bk-lb-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;background:#fff;color:#16161A;font-size:24px;line-height:1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .bk-stage{background:#232327}}
:root[data-theme="dark"] .bk-stage{background:#232327}
.bp-zoom{position:relative}
.bp-zoom::after{content:"Tap to enlarge";position:absolute;right:8px;bottom:8px;padding:5px 10px;border-radius:999px;background:rgba(22,22,26,.78);color:#fff;font-family:var(--sans);font-size:12px;font-weight:500}
@media (hover:hover){.bp-zoom::after{content:"Click to enlarge";opacity:0;transition:opacity .2s}.bp-zoom:hover::after{opacity:1}}
@media (max-width:767px) and (orientation:portrait){.bk-lb::before{content:"Turn your phone sideways to read";position:absolute;top:20px;left:16px;color:#fff;font-size:13px;font-weight:500}}
/* Sticky chapter tabs: stick under the header; once stuck they become a full-width red bar */
.bk-tabs{position:sticky;top:var(--nav-h,64px);z-index:30;background:var(--bg);transition:background .25s,box-shadow .25s}
.bk-tabs.stuck{background:var(--red);box-shadow:0 0 0 100vmax var(--red);clip-path:inset(0 -100vmax)}
.bk-tabs.stuck ol{border-bottom-color:transparent}
.bk-tabs.stuck button{color:#fff}
.bk-tabs.stuck button[aria-current="true"]{color:#fff;border-bottom-color:#fff}
@media (max-width:767px){
  .deck-index{position:sticky;top:var(--nav-h,60px);z-index:30;background:var(--bg);transition:background .25s}
  .deck-index.stuck{background:var(--red);border-bottom-color:transparent}
  .deck-index.stuck a,.deck-index.stuck a.on{color:#fff}
  .deck-index.stuck .di-bar{background:#fff}
}
.deck-index.gone{transform:translateY(-120%);opacity:0;pointer-events:none}
@media (max-width:767px){.deck-index{transition:background .25s,transform .3s ease,opacity .3s ease}}

/* no jump when the tabs stick: their spacing never changes */
.bk-tabs{margin-bottom:16px}.bk-tabs ol{margin-bottom:0}

/* ===== Book page: index panel + closed book; full-screen reader ===== */
.bpv{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,72px);align-items:start;padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(40px,5vw,72px)}
.bpv-side{position:sticky;top:calc(var(--nav-h,64px) + 24px)}
.bpv-h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,2.8vw,44px);line-height:1.08;letter-spacing:-.015em;margin:10px 0 16px}
.bpv-sum{font-family:var(--serif);font-size:19px;line-height:1.45;margin:0 0 12px}
.bpv-role{font-size:var(--fs-sm);line-height:1.5;margin:0 0 14px}
.bpv-ix-h{margin:28px 0 6px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--red)}
.bpv-ix{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bpv-ix li{border-bottom:1px solid var(--line)}
.bpv-ix button{width:100%;text-align:left;padding:11px 0;font-size:var(--fs-base);font-weight:500;display:flex;justify-content:space-between;align-items:center}
.bpv-ix button::after{content:"\2192";color:var(--red);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.bpv-ix button:hover{color:var(--red)}.bpv-ix button:hover::after{opacity:1;transform:none}
.bpv-book{display:flex;flex-direction:column;align-items:center}
/* the closed book */
.bc{position:relative;display:block;width:min(100%,560px);aspect-ratio:4/5;padding:0;border:0;border-radius:4px 14px 14px 4px;background:var(--red);color:#fff;text-align:left;cursor:pointer;
  box-shadow:inset 14px 0 18px -10px rgba(0,0,0,.35),inset 2px 0 0 rgba(255,255,255,.12),0 30px 60px -30px rgba(120,10,25,.7),8px 8px 0 -2px #EDEDF0,9px 9px 0 -2px var(--line);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;transform-origin:left center}
.bc:hover{transform:perspective(1600px) rotateY(-9deg) translateX(4px)}
.bc:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.bc-face{position:absolute;inset:0;padding:clamp(28px,4vw,52px) clamp(28px,4vw,48px) clamp(28px,4vw,44px) clamp(40px,5vw,64px);display:flex;flex-direction:column}
.bc-kicker{margin:0;font-family:var(--serif);font-style:italic;font-size:17px;opacity:.95}
.bc-title{margin:auto 0 16px;font-family:var(--serif);font-weight:500;font-size:clamp(34px,3.6vw,56px);line-height:1.04;letter-spacing:-.015em;color:#fff}
.bc-sum{margin:0 0 24px;font-size:16px;line-height:1.5;max-width:34ch}
.bc-open{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;background:#fff;color:var(--red);font-weight:600;font-size:15px}
.bc-open::after{content:"\2192"}
.bpv-hint{margin:22px 0 0;font-size:var(--fs-sm)}
@media (max-width:900px){
  .bpv{grid-template-columns:1fr;gap:28px}
  .bpv-side{position:static}
  .bpv-ix-h{margin-top:20px}
  .bc{width:100%}
  .bc:hover{transform:none}
}
/* reader */
.rd{position:fixed;inset:0;z-index:500;background:rgba(22,22,26,.97);color:#fff}
.rd[hidden]{display:none}
.rd-in{position:absolute;inset:0;display:flex;flex-direction:column;padding:14px clamp(14px,3vw,40px) 18px;transform-origin:center}
.rd-top{display:flex;align-items:center;gap:20px;min-height:48px;margin-bottom:12px}
.rd-title{margin:0;font-family:var(--serif);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28ch}
.rd-tabs{flex:1;min-width:0}
.rd-tabs ol{list-style:none;margin:0;padding:0;display:flex;gap:20px;justify-content:center;overflow-x:auto;scrollbar-width:none}
.rd-tabs ol::-webkit-scrollbar{display:none}
.rd-tabs button{padding:8px 0;font-size:14px;font-weight:500;color:rgba(255,255,255,.75);white-space:nowrap;border-bottom:2px solid transparent}
.rd-tabs button:hover{color:#fff}
.rd-tabs button[aria-current="true"]{color:#fff;border-bottom-color:var(--red)}
.rd-exit{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;background:#fff;color:#16161A;font-weight:600;font-size:14px;flex:none}
.rd-exit svg{width:16px;height:16px}
.rd-desk{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.rd-stage{height:100%;max-height:820px;width:min(100%,calc((100vh - 170px) * 1.5),1500px);background:#2A2A2F;cursor:pointer}
.rd-track{display:none}
.rd-bar{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;margin-top:14px;width:min(100%,1500px);align-self:center}
.rd .fb-btn{border-color:rgba(255,255,255,.6);color:#fff}
.rd .fb-btn:hover:not(:disabled){background:#fff;color:#16161A}
.rd .fb-btn:disabled{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.2)}
.rd .bk-pips i{background:rgba(255,255,255,.2)}.rd .bk-pips i.on{background:var(--red)}
.rd .bk-count{color:#fff}
/* a page */
.pg{position:relative;height:100%;background:#FBFAF7;color:#16161A;padding:44px clamp(26px,3.2vw,52px) 44px;display:flex;flex-direction:column;overflow:hidden}
.pg-run{position:absolute;top:16px;left:clamp(26px,3.2vw,52px);margin:0;font-size:11px;letter-spacing:.02em;color:#6b6b72;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-run-r{left:auto;right:clamp(26px,3.2vw,52px);text-align:right}
.pg-folio{position:absolute;bottom:14px;left:clamp(26px,3.2vw,52px);margin:0;font-size:11px;font-variant-numeric:tabular-nums;color:#6b6b72}
.pg-folio-r{left:auto;right:clamp(26px,3.2vw,52px)}
.pg-fig{margin:auto 0;display:flex;flex-direction:column;gap:14px}
.pg-fig img{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain;border-radius:4px;box-shadow:0 0 0 1px #E3E1DC,0 18px 30px -22px rgba(0,0,0,.35);background:#fff}
.pg-fig figcaption{font-size:14px;line-height:1.5;max-width:46ch}
.pg-fig figcaption span{display:block;margin-bottom:4px;font-family:var(--serif);font-style:italic;font-size:17px;color:#E53029}
.pg-art{justify-content:center;gap:24px}
.pg-artwork{width:72%;margin:0 auto;opacity:.95}
.pg-artwork svg{width:100%;height:auto;display:block}
.pg-pull{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.8vw,26px);line-height:1.3;color:#16161A;border-left:3px solid #E53029;padding-left:16px}
.pg-text{margin:auto 0;overflow:auto;scrollbar-width:thin;font-size:15.5px;line-height:1.6;max-width:56ch}
.pg-label{margin:0 0 10px;font-family:var(--serif);font-style:italic;font-size:17px;color:#E53029}
.pg h2{margin:0 0 16px;font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.3vw,36px);line-height:1.1;letter-spacing:-.01em;color:#16161A}
.pg-lead{font-family:var(--serif);font-size:clamp(18px,1.4vw,21px);line-height:1.45;margin:0 0 14px}
.pg p{margin:0 0 12px}
.pg mark{background:linear-gradient(transparent 58%,rgba(229,48,41,.22) 58%);color:inherit;padding:0 1px}
.pg-caps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pg-caps h3,.pg-dh{margin:0 0 6px;font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2}
.pg-trade{font-size:15px}
.pg-principle{margin:18px 0 0;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4;color:#E53029}
.pg-note{font-size:12.5px;color:#6b6b72}
.rd .bk-slot{box-shadow:none}
.rd .bk-l .pg{box-shadow:inset -18px 0 24px -20px rgba(0,0,0,.25)}
.rd .bk-r .pg,.rd .bk-front .pg{box-shadow:inset 18px 0 24px -20px rgba(0,0,0,.25)}
/* phone reader: swipe through spreads, picture above, text below */
@media (max-width:900px){
  .rd-in{padding:10px 0 14px}
  .rd-top{padding:0 14px;gap:12px;flex-wrap:wrap}
  .rd-title{flex:1;max-width:none;font-size:16px}
  .rd-tabs{order:3;flex-basis:100%}
  .rd-tabs ol{justify-content:flex-start;gap:18px}
  .rd-desk{display:none}
  .rd-track{display:grid;flex:1;min-height:0;list-style:none;margin:0;padding:0 14px;grid-auto-flow:column;grid-auto-columns:calc(100% - 28px);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .rd-track::-webkit-scrollbar{display:none}
  .rd-card{scroll-snap-align:center;overflow-y:auto;border-radius:12px;background:#FBFAF7;scrollbar-width:none}
  .rd-card .pg{height:auto;padding:22px 18px 28px;overflow:visible}
  .rd-card .pg-l{padding-bottom:6px}
  .rd-card .pg-r{padding-top:10px}
  .rd-card .pg-run,.rd-card .pg-folio{display:none}
  .rd-card .pg-fig img{max-height:none}
  .rd-card .pg-art{gap:14px}.rd-card .pg-artwork{width:60%}
  .rd-card .pg-text{max-width:none;overflow:visible}
  .rd-bar{grid-template-columns:1fr auto;padding:0 14px;width:100%}
  .rd-bar .fb-btn{display:none}
}
.pg-chapter{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(28px,2.6vw,40px);line-height:1.1;color:#E53029;text-align:center}

/* Book page v2: fits on one screen, no index, wider reader with chapters on the side */
.bpv{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center;min-height:calc(100vh - var(--nav-h,64px) - 40px);padding-top:clamp(20px,3vw,40px);padding-bottom:clamp(20px,3vw,40px)}
.bpv-side{position:static}
.bpv-sum{font-size:clamp(20px,1.6vw,24px);line-height:1.4;margin:10px 0 14px}
.bpv-read{margin-top:26px}
.bc{width:auto;height:min(calc(100vh - var(--nav-h,64px) - 120px),640px);max-width:100%}
.bc-title{margin:auto 0 22px;font-family:var(--serif);font-weight:500;font-size:clamp(34px,3.4vw,54px);line-height:1.04;letter-spacing:-.015em;color:#fff}
.bpv-others{padding-top:clamp(24px,3vw,40px)}
@media (max-width:900px){
  .bpv{min-height:0;align-items:start}
  .bc{height:auto;width:100%;max-height:none}
  .bpv-read{display:none}
}
/* reader: chapters down the left, the book as wide as the screen allows */
.rd-top{justify-content:space-between}
.rd-title{max-width:60ch}
.rd-body{flex:1;min-height:0;display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(16px,2vw,32px)}
.rd-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.rd-tabs{align-self:center}
.rd-tabs ol{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;overflow:visible}
.rd-tabs li{border-top:1px solid rgba(255,255,255,.12)}
.rd-tabs li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.rd-tabs button{width:100%;text-align:left;padding:12px 4px 12px 14px;border-bottom:0;border-left:2px solid transparent;white-space:normal;line-height:1.3}
.rd-tabs button[aria-current="true"]{border-left-color:var(--red);border-bottom:0;background:rgba(255,255,255,.06)}
.rd-desk{flex:1}
.rd-stage{width:100%;height:100%;max-height:none}
.rd-bar{width:100%}
@media (max-width:900px){
  .rd-body{display:flex;flex-direction:column;gap:10px}
  .rd-tabs{align-self:stretch;padding:0 14px}
  .rd-tabs ol{flex-direction:row;overflow-x:auto;gap:18px}
  .rd-tabs li,.rd-tabs li:last-child{border:0}
  .rd-tabs button{width:auto;padding:8px 0;border-left:0;border-bottom:2px solid transparent;white-space:nowrap}
  .rd-tabs button[aria-current="true"]{background:none;border-bottom-color:var(--red)}
  .rd-main{flex:1}
}
.rd{background:#16161A}
@media (max-width:900px){
  .rd-tabs{flex:none;order:0;flex-basis:auto}
  .rd-main{flex:1 1 auto;min-height:0}
  .bpv{grid-template-columns:1fr}
  .bc{aspect-ratio:4/5}
  .bc-title{font-size:clamp(30px,8vw,40px)}
  .bc-face{padding:28px 24px 26px 34px}
}

/* ===== One typography across the site (taken from the homepage) ===== */
/* page titles: big sans, last part in italic serif */
.page-head h1.mix,.case-h1.mix,.bpv-h1.mix{font-family:var(--sans);font-weight:400;font-size:clamp(42px,6vw,96px)!important;line-height:.98;letter-spacing:-.045em;margin:0}
.page-head h1.mix em,.case-h1.mix em,.bpv-h1.mix em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.025em}
/* section titles inside pages */
.sec-head h2,.bio-block h2,.home-head h2:not(.mix){font-family:var(--sans);font-weight:400;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.035em;line-height:1.05}
.sec-head h2 em,.bio-block h2 em{font-family:var(--serif);font-style:italic;letter-spacing:-.02em}
/* the header name matches the homepage wordmark */
.brand{font-family:var(--sans);font-weight:500;letter-spacing:-.04em}
.brand em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
/* body copy */
.page-head .sub p,.cs-intro p,.bpv-sum{font-family:var(--sans);font-size:clamp(17px,1.3vw,20px);line-height:1.5}
.crumb a{font-size:var(--fs-sm);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.crumb a:hover{color:var(--red)}

/* ===== Project page: text on the left, the book pushed to the right ===== */
.bpv{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,80px)}
.bpv-side{align-self:center}
.bpv-h1.mix{font-size:clamp(40px,4.4vw,72px)!important;margin:18px 0 22px}
.bpv-sum{margin:0 0 14px;max-width:38ch}
.bpv-role{max-width:46ch}
.bpv-book{align-items:flex-end}
.bc{height:min(calc(100vh - var(--nav-h,64px) - 80px),760px)}
/* cloth-bound cover: a fine woven texture and a gentle sheen at the spine */
.bc{background-color:var(--red);background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
  repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px)}
.bc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:22px;border-radius:4px 0 0 4px;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.06) 60%,rgba(0,0,0,.12));pointer-events:none}
.bc::after{content:"";position:absolute;left:22px;top:0;bottom:0;width:1px;background:rgba(0,0,0,.18);pointer-events:none}
.bc-title{font-family:var(--sans);font-weight:500;letter-spacing:-.04em;line-height:1}
/* the pages inside get a faint paper grain */
.pg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}
.bpv-others .home-head{margin-bottom:clamp(24px,3vw,40px)}
@media (max-width:900px){
  .bpv-book{align-items:stretch}
  .bc{height:auto}
  .bpv-h1.mix{font-size:clamp(38px,10vw,56px)!important}
}
.brand em{margin-left:.12em}
@media (max-width:900px){
  .bpv{grid-template-columns:1fr}
  .bc{height:auto;width:100%;aspect-ratio:4/5}
  .bc-title{font-size:clamp(30px,8vw,40px)}
}
/* Two typefaces only, as on the homepage: DM Sans for everything, Newsreader just for italic accents */
.tile h3,.rd-title,.pg h2,.pg-lead,.pg-caps h3,.pg-dh,.bp h2,.bp-lead,.bp-caps h3,.bp-contents button,.bc-title,.cs-related h3,.card h3{font-family:var(--sans);font-style:normal}
.pg h2{font-weight:500;letter-spacing:-.035em;line-height:1.05}
.pg-lead{font-weight:400;letter-spacing:-.015em;line-height:1.45}
.pg-caps h3,.pg-dh{font-weight:600;letter-spacing:-.02em;font-size:19px}
.tile h3{font-weight:500;letter-spacing:-.025em}
.rd-title{font-weight:500;letter-spacing:-.01em}

/* the cover as the turning leaf while the book opens or closes */
.bk-front .bc-leaf{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0 8px 8px 0;box-shadow:inset 14px 0 18px -10px rgba(0,0,0,.35);cursor:default;transform:none!important}
.bk-front .bc-leaf .bc-title{font-size:clamp(34px,3.2vw,52px)}
.rd-stage.opening{background:transparent;box-shadow:none}
.rd-stage{transform-origin:center center;will-change:transform}

/* header name: exactly the homepage wordmark's weight and spacing */
.brand{font-weight:450;letter-spacing:-.035em}
/* Book, left page: one edge-to-edge picture frame, the same size on every spread */
.pg-photo{padding:0;background:#E8E6E1;position:relative;overflow:hidden}
.pg-photo .pg-media{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;margin:0;border-radius:0}
.pg-photo .pg-media img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;border-radius:0;box-shadow:none;max-height:none}
.pg-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px clamp(18px,2vw,28px) 16px;background:rgba(22,22,26,.82);color:#fff;font-size:13.5px;line-height:1.45}
.pg-photo figcaption span{display:inline;margin-right:8px;font-family:var(--serif);font-style:italic;font-size:15px;color:#FFB3BF}
.pg-empty{display:grid!important;place-items:center;background:#E8E6E1;border:1.5px dashed #C9C6BE!important;box-sizing:border-box}
.pg-empty span{font-size:13px;color:#8A877F;letter-spacing:.01em}
.pg-photo .bp-zoom::after{z-index:2}
/* phone: the frame is a fixed 4:3 picture on top of each card */
@media (max-width:900px){
  .rd-card .pg-photo{position:relative;height:auto;aspect-ratio:4/3;padding:0}
  .rd-card .pg-photo figcaption{position:absolute}
}

/* header name: the same shapes and colour as the homepage wordmark (display cuts, red) */
.brand{color:var(--red);font-optical-sizing:none;font-variation-settings:"opsz" 40}
.brand em{font-optical-sizing:none;font-variation-settings:"opsz" 72}
.is-home .brand{color:transparent}
/* the small book that waits in the middle while the pictures load */
.rd-mini{position:fixed;left:50%;top:50%;width:124px;height:155px;margin:-90px 0 0 -62px;z-index:4;perspective:700px;display:flex;flex-direction:column;align-items:center}
.rd-mini[hidden]{display:none}
.bc-mini{width:124px;height:155px;flex:none;border-radius:2px 7px 7px 2px;cursor:default;transform-origin:center}
.bc-mini:hover{transform:none}
.bc-mini .bc-face{padding:12px 10px 12px 18px}
.bc-mini .bc-kicker,.bc-mini .bc-open{display:none}
.bc-mini .bc-title{margin:auto 0 0;font-size:13px;line-height:1.1;letter-spacing:-.02em}
.bc-mini::before{width:9px}.bc-mini::after{left:9px}
.rd-mini.wait .bc-mini{animation:rd-turn 1.2s ease-in-out infinite}
@keyframes rd-turn{0%,100%{transform:rotateY(-22deg) translateY(0)}50%{transform:rotateY(22deg) translateY(-6px)}}
.rd-loading{margin:22px 0 0;color:#fff;font-size:14px;font-weight:500;letter-spacing:.01em;white-space:nowrap;opacity:0;transition:opacity .25s}
.rd-mini.wait .rd-loading{opacity:1}
.rd-loading::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:rd-dots 1.2s steps(4,end) infinite}
@keyframes rd-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ===== Book v4: chapters on top, wider book, bigger type, picture on the top half of the left page ===== */
.rd-top{gap:24px}
.rd-top .rd-tabs{flex:1;min-width:0;align-self:center}
.rd-top .rd-tabs ol{flex-direction:row;justify-content:flex-start;gap:6px;overflow-x:auto}
.rd-top .rd-tabs li,.rd-top .rd-tabs li:last-child{border:0}
.rd-top .rd-tabs button{width:auto;padding:9px 14px;border:0;border-radius:999px;white-space:nowrap;font-size:14px;color:rgba(255,255,255,.72)}
.rd-top .rd-tabs button:hover{color:#fff;background:rgba(255,255,255,.08)}
.rd-top .rd-tabs button[aria-current="true"]{color:#fff;background:var(--red)}
.rd-body{display:flex;flex-direction:column}
.rd-mini{display:none!important}
/* type inside the book */
.pg{font-size:17px;line-height:1.62;padding:48px clamp(30px,3.4vw,60px) 44px}
.pg h2{font-size:clamp(28px,2.4vw,40px)}
.pg-lead{font-size:clamp(19px,1.45vw,23px)}
.pg-text{font-size:17.5px;max-width:62ch}
.pg-label{font-size:18px}
.pg-caps h3,.pg-dh{font-size:21px}
.pg-run{color:#9A9AA0;font-size:12px;letter-spacing:.02em}
.pg-folio{color:#9A9AA0}
/* left page: picture on the top half, the chapter's title and opening below */
.pg-split{display:flex;flex-direction:column;gap:0;padding-top:40px}
.pg-split .pg-media{position:relative;display:block;flex:0 0 48%;width:100%;margin:0 0 20px;padding:0;border:0;border-radius:4px;overflow:hidden;background:#E8E6E1}
.pg-split .pg-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block;box-shadow:none;max-height:none;border-radius:0}
.pg-split .pg-empty{display:grid!important;place-items:center;border:1.5px dashed #C9C6BE!important}
.pg-below{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.pg-below h2{margin-bottom:12px}
.pg-cap{margin-top:8px!important;font-size:14px;color:#6b6b72}
@media (max-width:900px){
  .rd-top{flex-wrap:nowrap}
  .rd-top .rd-tabs{order:0;flex-basis:auto}
  .rd-card .pg-split .pg-media{flex:none;aspect-ratio:4/3}
  .rd-card .pg-run{display:block;position:static;margin:0 0 10px}
  .rd-card .pg-r .pg-run{display:none}
  .pg{font-size:16.5px}
}
.rd-body{flex:1;min-height:0}.rd-main{flex:1;min-height:0}
/* Book v5: square everywhere; the picture fills the top half of the left page, edge to edge */
.rd-stage,.bk-slot,.bk-l,.bk-r,.bk-face,.bk-front,.bk-back,.bk-shade,.pg,.pg-media,.pg-media img,.bc-leaf,.bk-front .bc-leaf,.rd-card,.bk-lb img{border-radius:0!important}
.bc{border-radius:0 3px 3px 0}
.bc::before{border-radius:0}
.pg-split{padding:0!important;display:flex;flex-direction:column}
.pg-split .pg-media{flex:0 0 50%;width:100%;margin:0!important;border:0;border-radius:0}
.pg-split .pg-empty{border:0!important;border-bottom:1.5px dashed #C9C6BE!important}
.pg-split .pg-below{flex:1;padding:22px clamp(30px,3.4vw,60px) 44px;overflow:auto}
.pg-split .pg-below .pg-run{position:static;margin:0 0 14px;max-width:none}
.pg-split .pg-cap{margin:6px 0 0!important;font-size:16px;line-height:1.5;color:#3d3d44}
.pg-r .pg-text{margin:auto 0}
@media (max-width:900px){
  .rd-card .pg-split .pg-media{flex:none;aspect-ratio:4/3}
  .rd-card .pg-split .pg-below{padding:18px 18px 10px}
  .rd-card .pg-split .pg-below .pg-run{display:block}
}
/* project page: one description paragraph, one size; bold is the only emphasis */
.bpv-sum{max-width:44ch;margin-bottom:20px}.bpv-sum b{font-weight:600}
/* Trial: the "Experiment with AI" tile uses an illustration, gently alive */
.wi-pic{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.wi-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 50%;transform:scale(1.18);transform-origin:60% 45%;animation:wi-float 5s ease-in-out infinite}
@keyframes wi-float{0%,100%{transform:scale(1.18) translateY(0) rotate(0)}50%{transform:scale(1.2) translateY(-4px) rotate(-.6deg)}}
.wk-tiles li:hover .wi-pic img{animation-duration:2.4s}
/* little four-point sparkles that twinkle over the picture */
.wi-pic .tw{position:absolute;width:14px;height:14px;background:#E53029;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:wi-tw 2.6s ease-in-out infinite;pointer-events:none}
.wi-pic .tw1{left:18%;top:14%}
.wi-pic .tw2{right:10%;top:22%;width:10px;height:10px;background:#16161A;animation-delay:.9s}
.wi-pic .tw3{right:22%;bottom:16%;width:12px;height:12px;animation-delay:1.7s}
@keyframes wi-tw{0%,100%{transform:scale(.3) rotate(0);opacity:0}45%{transform:scale(1) rotate(45deg);opacity:1}70%{opacity:.9}}
.wk-tiles li .wi-art:has(.wi-pic){padding:0;overflow:hidden;background:#fff}
@media (prefers-reduced-motion: reduce){.wi-pic img,.wi-pic .tw{animation:none}.wi-pic .tw{opacity:0}}
/* Experiment with AI, v2: the illustration's own pale pink as the tile; the person stays still, the small things move */
.wk-tiles li .wi-art:has(.wi-pic),.wk-tiles li:nth-child(n) .wi-art:has(.wi-pic),.wk-tiles li:nth-child(n):hover .wi-art:has(.wi-pic){background:#F7EBEB!important;border-color:transparent!important;display:grid;place-items:center}
.wi-pic{position:relative;width:100%;height:auto;aspect-ratio:4/3;overflow:visible}
.wi-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:none!important;animation:none!important;mix-blend-mode:multiply}
.wi-pic .tw{display:none}
/* the typing dots in the speech bubble take turns to hop */
.wi-pic .ty-cover{position:absolute;left:60.3%;top:31.6%;width:12.2%;height:5.6%;background:#F7EBEB;border-radius:6px}
.wi-pic .ty{position:absolute;top:32.8%;width:2.5%;aspect-ratio:1;border-radius:50%;background:#010002;animation:ty-hop 1.3s ease-in-out infinite}
.wi-pic .ty1{left:60.9%;background:#E53029}
.wi-pic .ty2{left:65.1%;animation-delay:.16s}
.wi-pic .ty3{left:69.3%;animation-delay:.32s}
@keyframes ty-hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-55%)}}
/* new sparkles twinkle in the empty space around the bubble */
.wi-pic .sp4{position:absolute;width:3.2%;aspect-ratio:1;background:#E53029;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:sp4 2.8s ease-in-out infinite;opacity:0}
.wi-pic .s1{left:89%;top:42%}
.wi-pic .s2{left:44%;top:10%;background:#010002;width:2.4%;animation-delay:.7s}
.wi-pic .s3{left:72%;top:56%;width:2.2%;animation-delay:1.4s}
.wi-pic .s4{left:86%;top:8%;background:#010002;width:2.6%;animation-delay:2.1s}
@keyframes sp4{0%,100%{transform:scale(.2) rotate(0);opacity:0}40%{transform:scale(1) rotate(45deg);opacity:1}70%{transform:scale(.9) rotate(60deg);opacity:.9}}
/* small dots drift up and fade, like ideas bubbling off the conversation */
.wi-pic .fd{position:absolute;width:1.1%;aspect-ratio:1;border-radius:50%;background:#E53029;opacity:0;animation:fd-rise 3.6s ease-out infinite}
.wi-pic .f1{left:80%;top:62%}
.wi-pic .f2{left:84%;top:55%;background:#010002;animation-delay:.9s}
.wi-pic .f3{left:76%;top:58%;animation-delay:1.8s;width:.8%}
.wi-pic .f4{left:88%;top:60%;background:#010002;animation-delay:2.7s;width:.9%}
@keyframes fd-rise{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-260%);opacity:0}}
/* three little rays flash beside the bubble now and then */
.wi-pic .rays{position:absolute;left:80%;top:16%;width:6%;height:10%}
.wi-pic .rays b{position:absolute;left:0;top:50%;width:100%;height:2px;background:#010002;transform-origin:left center;opacity:0;animation:ray 2.4s ease-out infinite}
.wi-pic .rays b:nth-child(1){transform:rotate(-38deg)}.wi-pic .rays b:nth-child(2){transform:rotate(-8deg);animation-delay:.08s}.wi-pic .rays b:nth-child(3){transform:rotate(22deg);animation-delay:.16s}
@keyframes ray{0%,55%{opacity:0;clip-path:inset(0 100% 0 0)}65%{opacity:1;clip-path:inset(0 0 0 0)}85%,100%{opacity:0;clip-path:inset(0 0 0 60%)}}
/* hover: everything a little livelier */
.wk-tiles li:hover .wi-pic .ty{animation-duration:.8s}
.wk-tiles li:hover .wi-pic .sp4,.wk-tiles li:hover .wi-pic .fd{animation-duration:1.6s}
@media (prefers-reduced-motion: reduce){.wi-pic i,.wi-pic b{animation:none!important}.wi-pic .sp4,.wi-pic .fd,.wi-pic .rays b{opacity:0}}
/* Project page head: a back button in a slim bar under the header */
.bpv-back{display:flex;align-items:center;padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.back-link{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;text-decoration:none;color:var(--ink)}
.bl-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);transition:background .2s,border-color .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.bl-ico svg{width:16px;height:16px}
.back-link:hover{color:var(--red)}
.back-link:hover .bl-ico{background:var(--red);border-color:var(--red);color:#fff;transform:translateX(-3px)}
.back-link:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:999px}
.bpv{padding-top:clamp(20px,3vw,40px)}
.bpv-h1.mix{margin-top:0!important}
/* the description in the serif, at one comfortable size (works for longer text too) */
.bpv-sum{font-family:var(--serif)!important;font-weight:400;font-size:clamp(20px,1.6vw,24px)!important;line-height:1.45!important;letter-spacing:-.005em;max-width:40ch;text-wrap:pretty}
/* tags: soft tinted chips with a small dot, easy to read */
.bpv-side .tags{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.bpv-side .tags li{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 12px;border:0;border-radius:999px;background:#FCEBED;color:#C4302A;font-size:14px;font-weight:600;letter-spacing:.005em}
.bpv-side .tags li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.bpv-side .tags li:nth-child(2){background:#EEF0F6;color:#2B3352}.bpv-side .tags li:nth-child(2)::before{background:#4A5785}
.bpv-side .tags li:nth-child(3){background:#F1F0EA;color:#3F3B2C}.bpv-side .tags li:nth-child(3)::before{background:#8A7F55}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .bpv-side .tags li{background:rgba(229,48,41,.18);color:#FFC4CD}:root:not([data-theme="light"]) .bpv-side .tags li:nth-child(n+2){background:rgba(255,255,255,.08);color:#E6E6EA}}
:root[data-theme="dark"] .bpv-side .tags li{background:rgba(229,48,41,.18);color:#FFC4CD}
:root[data-theme="dark"] .bpv-side .tags li:nth-child(n+2){background:rgba(255,255,255,.08);color:#E6E6EA}
@media (max-width:900px){.bpv-back{padding-top:10px;padding-bottom:10px}.bpv-sum{font-size:20px!important}}
/* Project page head, tidied: no rule under the back link, the book sits higher */
.bpv-back{border-bottom:0;padding-top:16px;padding-bottom:0}
.bpv{padding-top:clamp(8px,1.4vw,20px)}
/* the description: serif, a calm reading size so longer text still fits */
.bpv-sum{font-size:clamp(17px,1.25vw,19px)!important;line-height:1.55!important;max-width:46ch}
/* tags: the site's own style (as on the project tiles): small caps text, ink only, separated by a thin dot */
.bpv-side .tags{display:flex;flex-wrap:wrap;gap:4px 0;margin:6px 0 0}
.bpv-side .tags li,.bpv-side .tags li:nth-child(n){height:auto;padding:0;background:none!important;color:var(--ink)!important;border:0;border-radius:0;font-size:var(--fs-xs);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.bpv-side .tags li::before,.bpv-side .tags li:nth-child(n)::before{content:none}
.bpv-side .tags li + li::before,.bpv-side .tags li:nth-child(n) + li::before{content:"\00B7";display:inline-block;width:auto;height:auto;margin:0 10px;background:none;border-radius:0;color:var(--ink)}
@media (max-width:900px){.bpv-sum{font-size:18px!important}}
/* Homepage photo strip: a black band behind the photos, with the same gutter above and below as between them */
.is-home .hero .hero-reel{--reel-gap:4px;background:#16161A;gap:var(--reel-gap);padding-top:var(--reel-gap);padding-bottom:var(--reel-gap);box-sizing:content-box}
@media (max-width:767px){.is-home .hero .hero-reel{--reel-gap:4px;padding-top:var(--reel-gap);padding-bottom:var(--reel-gap)}}
@media (max-width:767px){.is-home .hero .hero-reel{padding-left:var(--reel-gap);padding-right:var(--reel-gap);scroll-padding:0 var(--reel-gap)}}
/* Inner pages: the dotted banner, with room between it and the page below */
.page-head.has-banner{margin-bottom:clamp(32px,4vw,56px)}
/* homepage Recent projects: a grid, every project visible */
#homeWork .tiles{grid-auto-flow:row;overflow:visible}
.rc-controls[hidden]{display:none!important}
/* Homepage banner texture: the dotted field (as on the inner banners), brighter; it replaces the grain lines */
.is-home .hero::before{background-image:none}
.hero-tex{position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:calc(100vw - var(--sbw,0px));height:100%;transform:translateX(-50%);display:block;pointer-events:none}
/* the header over the banner lets the texture show through */
.is-home:not(.past-hero) .nav{background:transparent!important;border-bottom-color:rgba(255,255,255,.18)}
@media (prefers-reduced-motion: reduce){.hero-tex{opacity:.9}}
/* Homepage banner: "design" pressed into the red like a letterpress title, no ink, only the edges catch the light */
.is-home .hero{isolation:isolate}
.is-home .hero .press{position:absolute;z-index:-1;right:calc(var(--pad) * -.2);bottom:calc(clamp(200px,22vw,440px) + 4px + clamp(10px,2vw,30px));
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(150px,24vw,400px);line-height:.78;letter-spacing:-.045em;color:#E53029;white-space:nowrap;user-select:none;pointer-events:none;
  text-shadow:-1px -1px 0 rgba(0,0,0,.17),1px 1px 0 rgba(255,255,255,.24),-3px -3px 9px rgba(0,0,0,.08),3px 3px 9px rgba(255,255,255,.09)}
@media (max-width:767px){.is-home .hero .press{font-size:clamp(120px,40vw,200px);right:-.04em;bottom:calc(min(68vw,320px) + 8px + 6px)}}
/* "design" sits low, its descender tucked behind the photo strip, clear of the text and buttons */
.is-home .hero .press{bottom:calc(clamp(200px,22vw,440px) - .14em)}
@media (max-width:767px){.is-home .hero .press{font-size:min(31vw,150px);bottom:calc(min(68vw,320px) + 8px - .16em);right:-.02em}}
/* ===== Header: one solid colour on every page and over every background (white, or near-black in dark mode) ===== */
.is-home:not(.past-hero) .nav{--bg:var(--page-bg,#FFFFFF);--ink:#16161A;--line:rgba(22,22,26,.14);background:var(--bg)!important;color:var(--ink);border-bottom-color:var(--line)!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .is-home:not(.past-hero) .nav{--bg:#17171A;--ink:#F2F1EE;--line:rgba(242,241,238,.14)}}
:root[data-theme="dark"] .is-home:not(.past-hero) .nav{--bg:#17171A;--ink:#F2F1EE;--line:rgba(242,241,238,.14)}
.is-home.docked .wordmark{color:var(--red)}
.nav{background:var(--bg)}
/* ===== Hero: "3× faster with AI" on a deep dark red; View projects is a black button ===== */
.is-home .hero .hero-sub .paint::before{background:#5E0B07}
.is-home .hero .btn-primary{background:#16161A;color:#fff;border-color:#16161A}
.is-home .hero .btn-primary:hover{background:#000;color:#fff}
/* ===== Mobile: a shorter line under the headline ===== */
.hero-sub .hs-short{display:none}
@media (max-width:767px){.hero-sub .hs-long{display:none}.hero-sub .hs-short{display:inline}}
/* ===== Header polish ===== */
/* quick, smooth colour switches (no lag) */
.is-home .wordmark,.wm-anim .wordmark{transition:transform 1.15s cubic-bezier(.65,0,.25,1),color .18s ease}
.is-home .nav{transition:transform .45s cubic-bezier(.2,.8,.2,1),background .18s ease,color .18s ease,border-color .18s ease}
/* crisp name: once it has settled into the header, let the browser redraw it sharply instead of scaling a bitmap */
.is-home.docked.wm-settled .wordmark{will-change:auto;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.brand{text-rendering:geometricPrecision}
/* dark mode: a lighter red for the name in the header, so it reads on the dark bar (6.4:1) */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand,:root:not([data-theme="light"]) .is-home.docked .wordmark{color:#FF6B61}}
:root[data-theme="dark"] .brand,:root[data-theme="dark"] .is-home.docked .wordmark{color:#FF6B61}
/* the homepage shows the moving wordmark in the header; the plain header name stays hidden there in every theme */
.is-home .brand,:root[data-theme="dark"] .is-home .brand{color:transparent!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .is-home .brand{color:transparent!important}}
/* ===== Header timing on the homepage: the white bar slides in as the name arrives, and the name turns red only then ===== */
.is-home.docked .nav{transition-delay:.7s}
.is-home .wordmark,.wm-anim .wordmark{transition:transform 1.15s cubic-bezier(.65,0,.25,1),color .25s ease .85s}
.is-home.docked.wm-settled .wordmark{transition:color .18s ease}
.is-home.docked .nav{transition:transform .45s cubic-bezier(.2,.8,.2,1) .7s,background .18s ease 0s,color .18s ease 0s,border-color .18s ease 0s}
.is-home.docked.wm-settled .nav{transition:transform .45s cubic-bezier(.2,.8,.2,1) 0s,background .18s ease 0s,color .18s ease 0s,border-color .18s ease 0s}
/* Mobile headline: sized to the screen so it sits in three lines (never four or more) */
@media (max-width:767px){.is-home .hero #heroTitle{font-size:min(8.55vw,40px)!important;line-height:1.02}}
@media (max-width:767px){.is-home .hero #heroTitle{font-size:min(calc((100vw - 40px) * .09),40px)!important}}

/* Banner photos: a red angular cut on the top-right corner, with chevrons pulling apart (the frame widens) */
.reel-panel{cursor:pointer}
.reel-corner{position:absolute;z-index:4;top:0;right:0;width:46px;height:46px;background:#E53029;clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none;transition:width .3s ease,height .3s ease}
.reel-corner svg{position:absolute;top:7px;right:6px;width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.reel-panel:hover .reel-corner,.reel-panel.is-wide .reel-corner{width:58px;height:58px}
.reel-panel:hover .reel-corner svg,.reel-panel.is-wide .reel-corner svg{transform:scaleX(1.3)}
@media (min-width:768px){
  .reel-panel{transition:flex-grow .7s cubic-bezier(.2,.8,.2,1)}
  .hero-reel.has-wide .reel-panel{flex-grow:.8}
  .hero-reel .reel-panel.is-wide{flex-grow:2.4}
}
@media (max-width:767px){
  .reel-corner{width:40px;height:40px}.reel-corner svg{top:6px;right:5px;width:15px;height:15px}
  .reel-panel,.reel-panel:nth-child(n){transition:flex-basis .45s cubic-bezier(.2,.8,.2,1)}
  .reel-panel.is-wide,.reel-panel.is-wide:nth-child(n){flex-basis:calc(100% - 8px)}
  .reel-panel.is-wide .reel-corner{width:50px;height:50px}
}
@media (prefers-reduced-motion: reduce){.reel-corner,.reel-corner svg,.reel-panel{transition:none!important}}

/* Professional details: the CV, in the homepage's language (statement, hairline grids, soft cards, a timeline) */
.cv{padding-bottom:0}
.cv-tabs{position:sticky;top:var(--nav-h,64px);z-index:30;background:var(--bg);margin:0 0 clamp(32px,5vw,56px);transition:background .25s}
.cv-tabs ol{list-style:none;margin:0;padding:0;display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.cv-tabs ol::-webkit-scrollbar{display:none}
.cv-tabs a{display:block;padding:14px 0 12px;white-space:nowrap;font-size:var(--fs-base);font-weight:400;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.cv-tabs a[aria-current="true"]{border-bottom-color:var(--red)}
.cv-tabs.stuck{background:var(--red);box-shadow:0 0 0 100vmax var(--red);clip-path:inset(0 -100vmax)}
.cv-tabs.stuck ol{border-bottom-color:transparent}
.cv-tabs.stuck a{color:#fff}
.cv-tabs.stuck a[aria-current="true"]{border-bottom-color:#fff}
.cv-sec{margin:0 0 var(--space-section,120px)}
.cv-head{margin-bottom:clamp(24px,3vw,40px)}
/* summary */
.cv-statement{max-width:30ch;margin:0 0 clamp(32px,4vw,56px);font-family:var(--sans);font-size:clamp(24px,2.8vw,40px);font-weight:400;letter-spacing:-.03em;line-height:1.2}
.cv-facts{list-style:none;margin:0 0 clamp(32px,4vw,56px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cv-facts li{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.cv-facts b{font-weight:500;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.02em;line-height:1.25}
.cv-facts span{font-family:var(--serif);font-style:italic;font-size:var(--fs-base);color:var(--muted)}
.cv-two{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin:0 0 32px}
.cv-two p{margin:0;font-family:var(--serif);font-size:clamp(18px,1.4vw,21px);line-height:1.55}
.cv-actions{display:flex;flex-wrap:wrap;gap:var(--btn-gap,12px)}
/* experience: a timeline */
.cv-time{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cv-time > li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gutter,24px);padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line)}
.cv-when{margin:0;font-size:var(--fs-base);color:var(--muted)}
.is-now .cv-when{color:var(--red);font-weight:500}
.is-now .cv-when::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:10px;vertical-align:1px}
.cv-job h3{margin:0;font-family:var(--sans);font-size:clamp(22px,2vw,30px);font-weight:400;letter-spacing:-.03em;line-height:1.15}
.cv-co{margin:4px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.4vw,21px);color:var(--red)}
.cv-intro{margin:16px 0 0;font-family:var(--serif);font-size:clamp(18px,1.4vw,21px);line-height:1.5}
.cv-job ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.cv-job ul li{position:relative;padding-left:22px;line-height:1.6;max-width:66ch}
.cv-job ul li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1.5px;background:var(--red)}
/* products, education, research: soft cards */
.cv-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cv-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cv-card{background:var(--surface,#F4F4F5);border-radius:20px;padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column}
.cv-card h3{margin:0 0 10px;font-family:var(--sans);font-size:clamp(20px,1.6vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.cv-card > p:not(.cv-area):not(.cv-co):not(.cv-sub){margin:0;line-height:1.6}
.cv-card .cv-co{margin:-4px 0 0}
.cv-area{margin:0 0 8px;font-size:var(--fs-sm);font-weight:500;color:var(--red)}
.cv-logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px}
.cv-logos img{height:34px;width:auto;max-width:110px;object-fit:contain;background:#fff;border-radius:8px;padding:6px 10px;box-sizing:content-box}
.cv-sub{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);line-height:1.7;font-size:var(--fs-sm)}
.cv-sub span:first-child{display:block;font-weight:600;margin-bottom:4px}
.cv-dot{color:var(--red)}
.cv-subhead{margin:clamp(32px,4vw,48px) 0 16px;font-family:var(--sans);font-size:clamp(22px,2vw,28px);font-weight:400;letter-spacing:-.03em}
/* skills: a hairline grid */
.cv-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cv-grid > li{padding:clamp(20px,2.2vw,28px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cv-grid h3{margin:0 0 10px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,1.7vw,26px);letter-spacing:-.01em}
.cv-grid p{margin:0;line-height:1.7}
.cv-note{margin:10px 0 0;font-size:var(--fs-sm);color:var(--muted)}
/* tools: the same wall as the client logos */
.cv-tools + .cv-tools{margin-top:32px}
.cv-tools h3{margin:0 0 12px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,1.7vw,26px)}
.cv-wall{grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0}
.cv-wall li{aspect-ratio:auto;min-height:72px;font-weight:500}
.cv .bio{padding-top:0}
@media (max-width:960px){
  .cv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .cv-tabs{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
  .cv-tabs ol{gap:22px;padding:0 var(--pad)}
  .cv-tabs ol::after{content:"";flex:0 0 1px}
  .cv-statement{font-size:24px;line-height:1.25}
  .cv-facts li{padding:16px 14px}
  .cv-facts b{font-size:17px}
  .cv-two,.cv-cards,.cv-cards-2,.cv-grid{grid-template-columns:1fr}
  .cv-two{gap:16px}
  .cv-time > li{grid-template-columns:1fr;gap:8px}
  .cv-actions{display:grid;grid-template-columns:1fr}
  .cv-actions .btn{width:100%}
  .cv-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-sec{margin-bottom:80px}
}
.cv-card{background:#F4F4F5}
.cv-logos img{background:#fff}
.cv-time{border-top:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cv-card{background:#232327}}
:root[data-theme="dark"] .cv-card{background:#232327}

/* Recent activity: what I learned, and the certificate */
.rc-slides li.rc-contain{background:#F4F4F5;display:grid;place-items:center;padding:6%}
.rc-slides li.rc-contain img{object-fit:contain;filter:none;box-shadow:0 10px 30px rgba(22,22,26,.16)}
.rc-learned{margin:14px 0 0;font-size:var(--fs-base);line-height:1.7;max-width:65ch}
.rc-learned span{display:block;font-weight:600;margin-bottom:2px}
.rc-learned i{font-style:normal;color:var(--red)}
.rc-cert{margin-top:20px;display:inline-flex;align-items:center;gap:10px}
.rc-cert svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cert-lb{position:fixed;inset:0;z-index:700;display:grid;place-items:center;padding:64px 16px 24px;background:rgba(22,22,26,0);transition:background .35s ease}
.cert-lb.on{background:rgba(22,22,26,.94)}
.cert-fig{margin:0;max-width:min(1100px,100%);transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.cert-fig img{display:block;width:100%;height:auto;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);object-fit:contain;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.cert-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;background:#fff;color:#16161A;font-size:26px;line-height:1;opacity:0;transition:opacity .3s ease .15s}
.cert-lb.on .cert-x{opacity:1}
html.cert-open{overflow:hidden}
@media (max-width:767px) and (orientation:portrait){.cert-lb::after{content:"Turn your phone sideways for a closer look";position:absolute;left:0;right:0;bottom:22px;text-align:center;color:rgba(255,255,255,.75);font-size:13px}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rc-slides li.rc-contain{background:#232327}}
:root[data-theme="dark"] .rc-slides li.rc-contain{background:#232327}

/* What I learned: quiet tags, then a red button for the certificate */
.rc-learned-h{margin:18px 0 10px;font-size:var(--fs-xs);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.rc-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rc-tags li{padding:5px 12px;border-radius:999px;background:#F4F4F5;font-size:var(--fs-sm);line-height:1.4;color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rc-tags li{background:#26262B}}
:root[data-theme="dark"] .rc-tags li{background:#26262B}
.rc-cert.btn-primary{background:var(--red);border-color:var(--red);color:#fff;margin-top:22px}
.rc-cert.btn-primary:hover{background:#C42520;border-color:#C42520}
.rc-cert svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.rc-cert:hover svg{transform:scale(1.15)}
@media (max-width:600px){.rc-cert{width:100%;justify-content:center}}

/* Heading word masks: more room inside, and fully open once the words have landed, so no letter is cut */
.rv{padding:.14em .14em .2em 0;margin:-.14em -.14em -.2em 0}
.rv-done .rv{overflow:visible}
/* Scrolling during the opening: the name goes straight to the header, already red */
.is-home.wm-fast .wordmark{transition:transform .45s cubic-bezier(.2,.8,.2,1),color .12s ease!important}
.is-home.wm-fast.docked .wordmark{color:var(--red)}
.is-home.wm-fast.docked .nav{transition:transform .35s cubic-bezier(.2,.8,.2,1) .15s,background .18s ease 0s,color .18s ease 0s,border-color .18s ease 0s!important}

/* Mobile headline: three clean lines, the serif phrase a little larger so it carries the emphasis
     I do my best work
     close to the people
     shaping a product.
   The words stay the same elements (the tune still plays them); only the line breaks change. */
@media (max-width:767px){
  .is-home .hero #heroTitle{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.24em;
    font-size:min(calc((100vw - 40px) * .116),48px)!important;line-height:1.1}
  .is-home .hero #heroTitle .ln,.is-home .hero #heroTitle .ln > span,.is-home .hero #heroTitle .hs{display:contents}
  .is-home .hero #heroTitle .hw{order:5}
  .is-home .hero #heroTitle .hw:is([data-i="0"],[data-i="1"],[data-i="2"],[data-i="3"],[data-i="4"]){order:1}
  .is-home .hero #heroTitle .hw:is([data-i="5"],[data-i="6"],[data-i="7"],[data-i="8"]){order:3}
  .is-home .hero #heroTitle::before{content:"";order:2;flex-basis:100%;height:0}
  .is-home .hero #heroTitle::after{content:"";order:4;flex-basis:100%;height:0}
  .is-home .hero #heroTitle .hw:is([data-i="9"],[data-i="10"],[data-i="11"]){font-size:1.16em;line-height:1.05;margin-top:.06em}
}

/* Films: a black band like a streaming shelf. A big billboard for the featured film, then a row of all four. */
.films-band{background:#16161A;color:#fff;padding:clamp(24px,4vw,48px) 0 clamp(48px,6vw,88px);margin-bottom:var(--space-section,120px)}
.fl-bill,.fl-card{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;text-align:left;cursor:pointer;display:block;box-sizing:border-box;width:100%}
.fl-bill:focus-visible,.fl-card:focus-visible{outline:2px solid #fff;outline-offset:4px}
.fl-bill{position:relative;aspect-ratio:21/9;overflow:hidden;border-radius:16px;background:#000}
.fl-bill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.02);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s}
.fl-bill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,12,.88) 0%,rgba(10,10,12,.55) 42%,rgba(10,10,12,0) 75%)}
.fl-bill:hover img{transform:scale(1.05);filter:grayscale(.2)}
.fl-bill-txt{position:absolute;z-index:2;left:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,52px);max-width:min(460px,70%);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.fl-bill-t{font-family:var(--serif);font-style:italic;font-size:clamp(40px,6vw,88px);line-height:.95;letter-spacing:-.02em}
.fl-kind{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#FF8A82}
.fl-who{font-size:var(--fs-sm,14px);color:rgba(255,255,255,.75)}
.fl-about{font-size:var(--fs-base,16px);line-height:1.5;color:rgba(255,255,255,.92)}
.fl-play{margin-top:10px;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px 0 16px;border-radius:999px;background:#fff;color:#16161A;font-weight:600;font-size:15px;transition:background .2s,color .2s}
.fl-play svg{width:16px;height:16px;fill:currentColor}
.fl-bill:hover .fl-play{background:var(--red);color:#fff}
.fl-row-h{margin:clamp(40px,5vw,64px) 0 20px;font-family:var(--sans);font-weight:400;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em;color:#fff}
.fl-row-h em{font-family:var(--serif);font-style:italic;letter-spacing:-.01em}
.fl-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.fl-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fl-card .fl-thumb{width:100%}
.fl-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#000;margin-bottom:10px}
.fl-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .5s,transform .7s cubic-bezier(.2,.8,.2,1)}
.fl-card:hover .fl-thumb img,.fl-card:focus-visible .fl-thumb img{filter:grayscale(0);transform:scale(1.05)}
.fl-ico{position:absolute;left:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;transition:background .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.fl-ico svg{width:15px;height:15px;fill:#16161A;margin-left:2px}
.fl-card:hover .fl-ico{background:var(--red);transform:scale(1.08)}
.fl-card:hover .fl-ico svg{fill:#fff}
.fl-t{font-family:var(--serif);font-style:italic;font-size:clamp(22px,1.8vw,26px);line-height:1.15;letter-spacing:-.01em}
.fl-card .fl-about{font-size:var(--fs-sm,14px);color:rgba(255,255,255,.75)}
.fl-player{margin:0;width:min(1200px,100%);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s;transform:scale(.96);opacity:0}
.fl-lb.on .fl-player{transform:none;opacity:1}
.fl-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.fl-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fl-player figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-top:14px;color:#fff}
.fl-player figcaption b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px}
.fl-player figcaption span{font-size:14px;color:rgba(255,255,255,.7)}
.fl-lb::after{content:none!important}
@media (max-width:960px){.fl-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .fl-bill{aspect-ratio:4/5}
  .fl-bill::after{background:linear-gradient(0deg,rgba(10,10,12,.92) 0%,rgba(10,10,12,.5) 55%,rgba(10,10,12,0) 85%)}
  .fl-bill-txt{max-width:none;right:20px}
  .fl-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:0 var(--pad);scroll-padding:0 var(--pad)}
  .fl-row::-webkit-scrollbar{display:none}
  .fl-row li{flex:0 0 78%;scroll-snap-align:start}
}
@media (prefers-reduced-motion: reduce){.fl-bill img,.fl-thumb img,.fl-player{transition:none}}
.films-band{width:calc(100vw - var(--sbw,0px));margin-left:calc(50% - (100vw - var(--sbw,0px)) / 2);box-sizing:border-box}

/* "Build with" on the opening screen: italic serif */
.wm-pre{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;font-size:max(.2em,17px)}

/* Project page: the back link sits at the top of the left column, so the book starts right under the header
   and is sized to the screen height: the whole cover is visible without scrolling on any desktop or laptop. */
.bpv-side .bpv-back{display:block;padding:0;margin:0 0 clamp(16px,2.4vh,32px);border:0}
@media (min-width:901px){
  .bpv{min-height:0;align-items:center;padding-top:clamp(16px,2.6vh,28px)!important;padding-bottom:clamp(16px,2.6vh,28px)!important}
  .bpv-side{align-self:center}
  .bc{height:clamp(340px,calc(100vh - var(--nav-h,64px) - clamp(32px,5.2vh,56px)),780px)!important;height:clamp(340px,calc(100svh - var(--nav-h,64px) - clamp(32px,5.2vh,56px)),780px)!important;width:auto!important;max-width:100%;aspect-ratio:4/5}
  .bpv-h1.mix{font-size:clamp(34px,min(4.2vw,7.4vh),72px)!important;margin:0 0 clamp(14px,2.4vh,22px)!important}
}
.pg-caps li p:empty{display:none}

/* Project page: the book a little smaller (about 85% of the screen height that is left under the header) */
@media (min-width:901px){
  .bc{height:clamp(320px,calc((100vh - var(--nav-h,64px)) * .85 - 16px),680px)!important;height:clamp(320px,calc((100svh - var(--nav-h,64px)) * .85 - 16px),680px)!important}
}

/* Text-led books: a typeset chapter opener on the left page */
.pg-open{justify-content:center;background-color:#F4F1EA}
.pg-open-in{max-width:30ch}
.pg-kicker{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#E53029}
.pg-kicker span{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,3.4vw,52px);letter-spacing:0;line-height:1;text-transform:none}
.pg-open h2{font-family:var(--sans);font-weight:400;font-size:clamp(28px,2.6vw,44px);line-height:1.05;letter-spacing:-.035em;margin:0 0 20px}
.pg-open .pg-lead{font-family:var(--serif);font-size:clamp(18px,1.45vw,22px);line-height:1.45;margin:0}
.pg-tp .pg-caps{margin-top:6px}
.pg-tp .pg-caps h3{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.01em;line-height:1.25;margin:0 0 4px}
.pg-tp .pg-caps li{padding-left:16px;border-left:2px solid #E53029}
.pg-tp .pg-caps p{margin:0}
.pg-slot{background:#EEEBE4!important}
.pg-slot span{max-width:26ch;text-align:center;font-size:14px;line-height:1.45;color:#77746C}
.pg-slot span::before{content:"";display:block;width:34px;height:26px;margin:0 auto 12px;border:1.5px solid #A9A59B;border-radius:4px;background:linear-gradient(135deg,transparent 46%,#A9A59B 46%,#A9A59B 54%,transparent 54%)}
.pg-tp .pg-caps h3{font-size:1.14em}
.pg-tp .pg-principle{font-size:1.08em}
.pg-tp .pg-label{font-size:1em}

/* Reader top bar: a close (×) button on phones, a line under the bar, and a clear hint that the chapter tabs scroll */
.rd-exit .ico-x{display:none}
.rd-top .rd-tabs{position:relative}
.rd-tabs-more{display:none}
.rd-tabs.has-more ol{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent calc(100% - 18px));mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent calc(100% - 18px))}
.rd-tabs.has-more.has-less ol{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 64px),transparent calc(100% - 18px));mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 64px),transparent calc(100% - 18px))}
.rd-tabs.has-less:not(.has-more) ol{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px);mask-image:linear-gradient(90deg,transparent 0,#000 28px)}
.rd-tabs.has-more .rd-tabs-more{display:grid;place-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;border:0;padding:0;cursor:pointer;animation:rd-nudge 1.6s ease-in-out 3}
.rd-tabs-more svg{width:16px;height:16px}
@keyframes rd-nudge{0%,100%{transform:translateY(-50%)}50%{transform:translate(4px,-50%)}}
@media (max-width:900px){
  .rd-top{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.16)}
  .rd-exit{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
  .rd-exit span,.rd-exit .ico-min{display:none}
  .rd-exit .ico-x{display:block;width:18px;height:18px}
}
@media (prefers-reduced-motion: reduce){.rd-tabs-more{animation:none!important}}

/* Mobile sanity: never scroll sideways; bigger tap targets in the footer and on small links */
html,body{overflow-x:clip}
@media (max-width:767px){
  .foot-row nav{display:flex;flex-wrap:wrap;gap:4px 20px}
  .foot-row nav a{display:inline-flex;align-items:center;min-height:44px}
  .rc-all{display:inline-flex;align-items:center;min-height:44px}
  .rc-dots button{position:relative}
  .rc-dots button::after{content:"";position:absolute;inset:-14px -3px}
}
/* Project tags: the dot goes after a tag, never at the start of a new line */
.bpv-side .tags li + li::before,.bpv-side .tags li:nth-child(n) + li::before{content:none}
.bpv-side .tags li{white-space:nowrap}
.bpv-side .tags li:not(:last-child)::after{content:"\00B7";margin:0 10px}
@media (max-width:767px){.bpv-side .tags li:not(:last-child)::after{margin:0 8px}}
.bpv-side .tags li:not(:last-child)::after{margin:0 9px 0 5px}

/* Weekend tiles: all four are illustrations now, on the same soft pink as the AI one */
.wi-ill img{object-fit:contain}
.wk-tiles li .wi-art:has(.wi-ill){padding:0;overflow:hidden}
.wk-tiles li .wi-art:has(.wi-ill) .wi-pic{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.wk-tiles li:hover .wi-art:has(.wi-ill) .wi-pic{transform:scale(1.04) rotate(-.6deg)}}

.pg-tp .pg-kicker{margin-bottom:12px}.pg-tp .pg-kicker span{font-size:clamp(28px,2.6vw,40px)}
.pg-tp h2{font-family:var(--sans);font-weight:400;font-size:clamp(24px,2.2vw,34px);line-height:1.08;letter-spacing:-.03em;margin:0 0 14px}
.pg-tp .pg-lead{font-family:var(--serif);margin:0 0 14px}

/* Testimonial window sized to the testimonial: short ones get a compact window and larger type, long ones the full window */
@media (min-width:768px){
  .t-modal[data-size="s"],.t-modal[data-size="m"]{height:fit-content;max-height:calc(100svh - 48px)}
  .t-modal[data-size="s"]{width:min(900px,calc(100vw - 48px))}
  .t-modal[data-size="m"]{width:min(1060px,calc(100vw - 48px))}
  .t-modal[data-size="s"] .t-modal-in,.t-modal[data-size="m"] .t-modal-in{height:auto;max-height:calc(100svh - 48px)}
  .t-modal[data-size="s"] .t-modal-text{display:flex;flex-direction:column;justify-content:center;padding:56px 64px}
  .t-modal[data-size="s"] .t-modal-text blockquote{font-size:clamp(22px,2vw,28px)!important;line-height:1.42!important;letter-spacing:-.01em}
  .t-modal[data-size="m"] .t-modal-text blockquote{font-size:clamp(18px,1.45vw,21px)!important;line-height:1.55!important}
  .t-modal[data-size="m"] .t-modal-text blockquote p,.t-modal[data-size="s"] .t-modal-text blockquote p{max-width:58ch}
}
@media (max-width:767px){
  .t-modal[data-size="s"] .t-modal-text blockquote{font-size:20px;line-height:1.45}
  .t-modal[data-size="m"] .t-modal-text blockquote{font-size:17px;line-height:1.55}
}

/* ===== Professional details, v2: shorter, clearer, with sticky years ===== */
.cv2 .cv-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 0 20px;margin:0 0 4px}
.cv-who{margin:0;display:flex;flex-direction:column;gap:2px}
.cv-who b{font-weight:500;font-size:clamp(20px,1.6vw,24px);letter-spacing:-.02em}
.cv-who span{font-family:var(--serif);font-style:italic;font-size:var(--fs-md);color:var(--muted)}
.cv-btns{display:flex;align-items:center;gap:10px}
.cv-dl{display:inline-flex;align-items:center;gap:10px}
.cv-dl svg{width:18px;height:18px}
.cv-ico{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.cv-ico svg{width:18px;height:18px}
.cv-ico:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cv2 .cv-statement{max-width:34ch;margin-bottom:20px}
.cv-about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);margin:0 0 clamp(28px,3.5vw,44px)}
.cv-about p{margin:0;font-family:var(--serif);font-size:clamp(18px,1.4vw,21px);line-height:1.55}
.cv2 .cv-facts{margin-bottom:0}
/* experience: the years stay in view while you read that role */
.cv-time2{list-style:none;margin:0;padding:0}
.cv-time2 > li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--gutter,24px);padding:clamp(24px,3vw,36px) 0;border-top:1px solid var(--line)}
.cv-yrs-in{position:sticky;top:calc(var(--nav-h,64px) + 72px);display:flex;flex-direction:column;line-height:1}
.cv-yrs b{font-weight:400;font-size:clamp(34px,3.6vw,56px);letter-spacing:-.04em}
.cv-yrs span{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.4vw,36px);color:var(--muted);margin-top:4px}
.cv-yrs span::before{content:"to ";font-size:.6em;color:var(--muted)}
.cv-yrs i{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:12px;color:var(--muted)}
.is-now .cv-yrs b,.is-now .cv-yrs span{color:var(--red)}
.cv2 .cv-job h3{font-size:clamp(22px,1.9vw,28px)}
.cv2 .cv-intro{font-size:clamp(17px,1.3vw,19px)}
.cv2 .cv-job ul li{line-height:1.55}
/* product cards: three lines, then Read more */
.cv-clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0;line-height:1.6}
.cv-card.open .cv-clamp{-webkit-line-clamp:unset;display:block}
.cv-more{margin-top:10px;align-self:flex-start;background:none;border:0;padding:6px 0;font:inherit;font-size:var(--fs-sm);font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer;color:var(--ink)}
/* what I deliver: PRDs first, in red */
.cv-deliver{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:stretch;margin-bottom:clamp(32px,4vw,48px)}
.cv-prd{background:var(--red);color:#fff;border-radius:20px;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;justify-content:flex-end;min-height:200px}
.cv-prd-k{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.cv-prd b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(56px,6vw,88px);line-height:.95;letter-spacing:-.02em;margin:auto 0 10px}
.cv-prd p{margin:0;font-size:var(--fs-md);line-height:1.5;max-width:36ch}
.cv-chips{list-style:none;margin:0;padding:clamp(18px,2vw,26px);display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;background:#F4F4F5;border-radius:20px}
.cv-chips li{padding:9px 16px;border-radius:999px;background:#fff;font-size:var(--fs-sm);font-weight:500;box-shadow:0 0 0 1px var(--line)}
/* education with master's research inside */
.cv-edu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.cv-research{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:14px}
.cv-research-h{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.cv-research b{display:block;font-weight:500;font-size:var(--fs-md);line-height:1.3}
.cv-research span{display:block;font-family:var(--serif);font-style:italic;font-size:var(--fs-sm);color:var(--muted);margin:2px 0 4px}
.cv-research p{margin:0;font-size:var(--fs-sm);line-height:1.55}
/* toolbox: each tool in its own colour */
.cv-tb + .cv-tb{margin-top:22px}
.cv-tb h3{margin:0 0 12px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,1.6vw,24px)}
.cv-tb ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cv-tb li{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,#fff);font-weight:500;font-size:var(--fs-sm);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cv-tb li:hover{transform:translateY(-2px) rotate(-1deg)}
.cv-tl{width:30px;height:30px;border-radius:9px;background:var(--c);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:700;letter-spacing:-.02em}
.cv-tb li[style*="#FFD02F"] .cv-tl{color:#16161A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cv-tb li{background:color-mix(in srgb,var(--c) 22%,#17171A)}:root:not([data-theme="light"]) .cv-chips{background:#232327}:root:not([data-theme="light"]) .cv-chips li{background:#17171A}}
:root[data-theme="dark"] .cv-tb li{background:color-mix(in srgb,var(--c) 22%,#17171A)}
:root[data-theme="dark"] .cv-chips{background:#232327}:root[data-theme="dark"] .cv-chips li{background:#17171A}
.cv2 .bio{margin-top:0}
@media (max-width:960px){.cv-deliver{grid-template-columns:1fr}}
@media (max-width:767px){
  .cv2 .cv-bar{flex-direction:column;align-items:stretch}
  .cv-btns .cv-dl{flex:1;justify-content:center}
  .cv-about,.cv-edu{grid-template-columns:1fr}
  .cv-time2 > li{grid-template-columns:1fr;gap:10px}
  .cv-yrs-in{position:static;flex-direction:row;align-items:baseline;gap:10px}
  .cv-yrs b{font-size:30px}.cv-yrs span{font-size:22px;margin:0}
  .cv-yrs i{margin:0 0 0 auto}
  .cv-prd{min-height:0}
}
@media (max-width:767px){
  .cv-time2 > li{display:block}
  .cv-yrs{position:sticky;top:calc(var(--nav-h,60px) + 48px);z-index:5;background:var(--bg);margin:0 calc(-1 * var(--pad));padding:10px var(--pad) 8px;border-bottom:1px solid var(--line)}
  .cv-yrs-in{position:static}
  .cv-job{padding-top:12px}
}

/* "Jam with me": a longer, clearer button */
.wi-game{display:flex;width:100%;max-width:340px;gap:12px;padding:8px 18px 8px 8px;border-radius:999px;background:#FCEBED;transition:background .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.wi-game::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--red);border-top:2px solid var(--red);transform:rotate(45deg);flex:none}
.wi-game:hover{background:#F9DDE1;transform:translateY(-1px)}
.wi-game .wg-t span{text-decoration:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wi-game{background:rgba(229,48,41,.16)}}
:root[data-theme="dark"] .wi-game{background:rgba(229,48,41,.16)}

.wk-tiles .wk-jam{grid-column:1 / -1;order:5;display:block}
.wk-tiles .wk-jam .wi-game{margin-top:0;max-width:380px}
@media (max-width:767px){.wk-tiles .wk-jam{order:0}.wk-tiles .wk-jam .wi-game{max-width:none}}

/* ===== Recent activity, redesigned: three equal cards, one structure (image, date, title, description, topics, action) ===== */
.rc-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:box-shadow .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.rc-card .rc-media,.rc-card:first-child .rc-media,.rc-card:not(:first-child) .rc-media{aspect-ratio:16/10!important;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line)}
.rc-text{flex:1;display:flex;flex-direction:column;padding:20px 22px 22px}
.rc-date{margin-bottom:6px;color:var(--red)}
.rc-card h3,.rc-card:first-child h3{font-family:var(--serif);font-size:clamp(20px,1.55vw,23px)!important;font-weight:600;line-height:1.25}
.rc-body,.rc-card:not(:first-child) .rc-body{margin-top:8px;font-size:var(--fs-base)!important;line-height:1.6;max-width:none}
.rc-foot2{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.rc-topics{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rc-topics li{padding:4px 11px;border-radius:999px;background:#F4F4F5;font-size:12.5px;font-weight:500;line-height:1.4}
.rc-cert{display:inline-flex;align-items:center;gap:8px;padding:0;margin:0;border:0;background:none;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--red);cursor:pointer}
.rc-cert svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.rc-cert:hover{text-decoration:underline;text-underline-offset:4px}.rc-cert:hover svg{transform:scale(1.15)}
@media (hover:hover){.rc-card:hover{box-shadow:0 18px 40px -24px rgba(22,22,26,.35);transform:translateY(-2px)}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rc-topics li{background:#26262B}}
:root[data-theme="dark"] .rc-topics li{background:#26262B}
@media (min-width:1024px){
  .rc-track{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;column-gap:20px;row-gap:20px;align-items:stretch}
  .rc-card:first-child{grid-row:auto}
}
@media (max-width:600px){.rc-text{padding:16px 18px 18px}.rc-card h3,.rc-card:first-child h3{font-size:20px!important}}
@media (max-width:600px){.rc-cert{width:auto;justify-content:flex-start;margin-top:0}}

/* Book: a picture slot with several screens */
.pg-sl-media{position:relative;overflow:hidden}
.pg-sl-track{list-style:none;margin:0;padding:0;display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pg-sl-track li{flex:0 0 100%;height:100%}
.pg-sl-track .bp-zoom{display:block;width:100%;height:100%;padding:0;border:0;background:#EEEBE4;cursor:zoom-in}
.pg-sl-track img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.pg-sl-nav{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:6px;padding:4px;border-radius:999px;background:rgba(22,22,26,.78);color:#fff;z-index:3}
.pg-sl-b{width:30px;height:30px;border-radius:50%;border:0;background:#fff;color:#16161A;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0 0 2px}
.pg-sl-b:hover{background:var(--red);color:#fff}
.pg-sl-n{font-size:12px;font-weight:600;padding:0 6px;font-variant-numeric:tabular-nums}
.pg-sl .bp-zoom::after{left:12px;right:auto}

/* Project page: "View prototype" thumbnail */
.bpv-proto{position:relative;display:block;width:100%;max-width:420px;margin-top:22px;padding:0;border:0;border-radius:14px;overflow:hidden;cursor:pointer;background:#E9E9EC;aspect-ratio:16/9;text-align:left}
.bpv-proto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;filter:grayscale(1) contrast(.95);transform:scale(1.02);transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.bpv-proto-ov{position:absolute;inset:0;display:flex;align-items:flex-end;gap:12px;padding:16px;background:linear-gradient(180deg,rgba(22,22,26,.15),rgba(22,22,26,.72));color:#fff}
.bpv-proto-ico{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;transition:background .2s}
.bpv-proto-ico svg{width:16px;height:16px;fill:#16161A;margin-left:2px;transition:fill .2s}
.bpv-proto-ov b{display:block;font-weight:500;font-size:18px;letter-spacing:-.01em}
.bpv-proto-ov i{display:block;font-family:var(--serif);font-size:15px;opacity:.85}
.bpv-proto:hover img{transform:scale(1.06);filter:grayscale(.3)}
.bpv-proto:hover .bpv-proto-ico{background:var(--red)}.bpv-proto:hover .bpv-proto-ico svg{fill:#fff}
.bpv-proto:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* the book's tab bar: a Prototype tab after the chapters */
.rd-tabs .rd-tab-proto{margin-left:6px;padding-left:12px;border-left:1px solid rgba(255,255,255,.2)}
.rd-tabs .rd-tab-proto button{color:#fff!important}
/* the prototype viewer */
.proto-lb{position:fixed;inset:0;z-index:800;display:flex;flex-direction:column;background:rgba(22,22,26,.96);opacity:0;transition:opacity .3s ease}
.proto-lb.on{opacity:1}
.proto-top{display:flex;align-items:center;gap:18px;padding:12px 16px 12px 24px;color:#fff}
.proto-top b{font-weight:400;font-size:18px;letter-spacing:-.02em;margin-right:auto}
.proto-top b em{font-family:var(--serif);font-style:italic}
.proto-top a{color:#fff;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px;opacity:.85}
.proto-x{width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#16161A;font-size:24px;line-height:1;cursor:pointer}
.proto-lb iframe{flex:1;width:calc(100% - 32px);margin:0 16px 16px;border:0;border-radius:14px;background:#F4F4F5}
@media (max-width:767px){.proto-top{padding:10px 12px 10px 16px;gap:12px}.proto-top a{display:none}.proto-lb iframe{width:100%;margin:0;border-radius:0}.bpv-proto{max-width:none}}

/* the viewer: a green top bar */
.proto-top{background:#0F3D2E}
.proto-top b em{color:#6AE589}
.bpv-proto-ov{background:linear-gradient(180deg,rgba(15,61,46,.25),rgba(15,61,46,.85))}
.bpv-proto-ico{background:#6AE589}.bpv-proto-ico svg{fill:#0A2A1F}
.bpv-proto:hover .bpv-proto-ico{background:#8BF0A6}.bpv-proto:hover .bpv-proto-ico svg{fill:#0A2A1F}
.bpv-proto-ov i{color:#B8F5C9}


/* Inside cover of the book: "View prototype" (the only green on the page) */
.pg-cover{justify-content:center}
.pg-cover-in{width:100%}
.pg-cover .pg-label{margin-bottom:14px}
.pg-proto-card{position:relative;display:block;width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:16/10;background:#E9E9EC;box-shadow:0 20px 40px -24px rgba(0,0,0,.4)}
.pg-proto-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;filter:grayscale(1);transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.pg-proto-ov{position:absolute;inset:0;display:flex;align-items:flex-end;gap:12px;padding:16px;background:linear-gradient(180deg,rgba(15,61,46,.2),rgba(15,61,46,.86));color:#fff;text-align:left}
.pg-proto-play{width:46px;height:46px;border-radius:50%;background:#6AE589;display:grid;place-items:center;flex:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.pg-proto-play svg{width:16px;height:16px;fill:#0A2A1F;margin-left:2px}
.pg-proto-ov b{display:block;font-family:var(--sans);font-weight:500;font-size:19px;letter-spacing:-.01em}
.pg-proto-ov i{display:block;font-family:var(--serif);font-size:15px;color:#C9F5D6}
.pg-proto-card:hover img{transform:scale(1.04);filter:grayscale(.2)}
.pg-proto-card:hover .pg-proto-play{transform:scale(1.08)}
.pg-proto-card:focus-visible{outline:2px solid #6AE589;outline-offset:3px}
.rd-card .pg-cover{padding-top:52px;padding-bottom:40px}
/* the prototype's own full-screen view: neutral */
.proto-top{background:transparent}
.proto-top b em{color:inherit}
.bk-count,.rd-count{white-space:nowrap;font-variant-numeric:tabular-nums}

.pg-proto-card img{filter:none;object-fit:cover;object-position:center}
.pg-proto-card:hover img{filter:none}
.pg-proto-ov{background:linear-gradient(180deg,rgba(15,61,46,0) 40%,rgba(15,61,46,.82))}

/* Phones: the prototype as a black lightbox of screens */
.pm-lb{position:fixed;inset:0;z-index:800;background:#000;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .25s ease}
.pm-lb.on{opacity:1}
.pm-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#16161A;font-size:26px;line-height:1;z-index:2}
.pm-track{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pm-track::-webkit-scrollbar{display:none}
.pm-track li{flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center;padding:0 12px;box-sizing:border-box}
.pm-track img{width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:8px}
.pm-foot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;color:#fff}
.pm-n{font-size:13px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.6)}.pm-n b{color:#fff;font-weight:600}
.pm-dots{display:flex;gap:6px}
.pm-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:width .25s,background .25s}
.pm-dots i.on{width:18px;border-radius:3px;background:#fff}
.pm-note{position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font-size:13px;color:rgba(255,255,255,.7);padding:0 24px}

/* ===== Projects as books ===== */
.tiles-books{gap:clamp(18px,2vw,28px)}
.tile-book{display:flex;flex-direction:column;min-height:0!important;height:auto;border-radius:0;overflow:visible;background:none!important;box-shadow:none!important;color:var(--ink);text-decoration:none}
.tile-book:hover{box-shadow:none}
.tb-cover{position:relative;aspect-ratio:3/4;border-radius:2px 10px 10px 2px;padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,24px) clamp(18px,1.8vw,24px) clamp(30px,2.6vw,38px);display:flex;flex-direction:column;color:#fff;
  background-color:var(--bk,var(--red));background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"),
  repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 24px 40px -26px rgba(0,0,0,.55);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.tb-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;border-radius:2px 0 0 2px;background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(255,255,255,.07) 60%,rgba(0,0,0,.14))}
.tb-cover::after{content:"";position:absolute;left:16px;top:0;bottom:0;width:1px;background:rgba(0,0,0,.18)}
.tb-kicker{font-family:var(--serif);font-style:italic;font-size:15px;opacity:.9}
.tile-book h3{margin:auto 0 12px!important;min-height:0!important;color:inherit!important;font-family:var(--sans)!important;font-weight:500;font-size:clamp(22px,1.9vw,30px)!important;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.tb-tags{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.tb-sum{margin:16px 0 0!important;min-height:0!important;font-size:var(--fs-sm);line-height:1.5;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tb-read{margin-top:10px;font-size:var(--fs-sm);font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.tb-read::after{content:"\2192";transition:transform .25s}
.tile-book:hover .tb-cover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 1px 1px rgba(0,0,0,.08),0 34px 50px -26px rgba(0,0,0,.6)}
.tile-book:hover .tb-read{color:var(--red)}.tile-book:hover .tb-read::after{transform:translateX(4px)}
.tile-book:focus-visible{outline:2px solid var(--red);outline-offset:6px}
/* a light cover: dark ink, red accents */
.bk-light .tb-cover,.bc.bk-light{color:#16161A}
.bk-light .tb-kicker,.bk-light .tb-tags{color:#C4302A;opacity:1}
.tile-book.bk-light .tb-cover::before{background:linear-gradient(90deg,rgba(229,48,41,.85),rgba(229,48,41,.65))}
/* the project page cover and the opened book take the project's colour */
.bc{background-color:var(--bk,var(--red))!important}
.bc .bc-open{color:var(--bk,var(--red))}
.bc.bk-light .bc-title,.bc.bk-light .bc-kicker{color:#16161A}
.bc.bk-light .bc-open{background:#16161A;color:#fff}
.bc.bk-light::before{background:linear-gradient(90deg,rgba(229,48,41,.85),rgba(229,48,41,.65))}
@media (max-width:1023px){.tiles-books{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tiles-books{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.tile-book h3{font-size:18px!important}.tb-tags{font-size:9.5px}.tb-kicker{font-size:13px}.tb-sum{-webkit-line-clamp:3;font-size:13px}}
.rd.bk-light .bc .bc-title,.rd.bk-light .bc .bc-kicker{color:#16161A}
.rd.bk-light .bc .bc-open{background:#16161A;color:#fff}
.pg-proto-card img{object-position:right top}
/* Homepage order: framework and weekends are their own sections now */
.sec-fw .fw{margin-top:0}
.sec-weekends .wk-strip{margin-top:0}

/* ===== Films, redesigned: white and editorial, one featured film, then the rest ===== */
.fm{padding-bottom:var(--space-section,120px)}
.fm-feature,.fm-card{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.fm-feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,56px);align-items:center;padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.fm-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#16161A}
.fm-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform .7s cubic-bezier(.2,.8,.2,1)}
.fm-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .2s}
.fm-play svg{width:18px;height:18px;fill:#16161A;margin-left:3px;transition:fill .2s}
.fm-thumb-big .fm-play{width:76px;height:76px;margin:-38px 0 0 -38px}.fm-thumb-big .fm-play svg{width:24px;height:24px}
.fm-feature:hover .fm-thumb img,.fm-card:hover .fm-thumb img,.fm-feature:focus-visible .fm-thumb img,.fm-card:focus-visible .fm-thumb img{filter:grayscale(0);transform:scale(1.03)}
.fm-feature:hover .fm-play,.fm-card:hover .fm-play{background:var(--red);transform:scale(1.08)}
.fm-feature:hover .fm-play svg,.fm-card:hover .fm-play svg{fill:#fff}
.fm-feature-txt{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fm-kind{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.fm-title{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2vw,30px);line-height:1.1;letter-spacing:-.01em}
.fm-title-big{font-size:clamp(48px,6vw,96px);line-height:.95}
.fm-about{display:block;font-size:var(--fs-base);line-height:1.55;max-width:42ch}
.fm-feature .fm-about{font-family:var(--serif);font-size:clamp(18px,1.5vw,22px)}
.fm-cta{margin-top:10px;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px 0 18px;border-radius:999px;background:#16161A;color:#fff;font-weight:600;font-size:15px;transition:background .2s}
.fm-cta svg{width:15px;height:15px;fill:currentColor}
.fm-feature:hover .fm-cta{background:var(--red)}
.fm-h{margin:clamp(40px,5vw,64px) 0 clamp(20px,2.4vw,28px);font-family:var(--sans);font-weight:400;font-size:clamp(28px,3vw,44px);letter-spacing:-.035em}
.fm-h em{font-family:var(--serif);font-style:italic;letter-spacing:-.015em}
.fm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.fm-card{display:flex;flex-direction:column;gap:8px}
.fm-card .fm-thumb{margin-bottom:8px}
.fm-card .fm-about{color:var(--ink);opacity:.8;font-size:var(--fs-sm)}
.fm-feature:focus-visible,.fm-card:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:14px}
@media (max-width:900px){.fm-feature{grid-template-columns:1fr}.fm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.fm-grid{grid-template-columns:1fr}.fm-title-big{font-size:52px}.fm-thumb-big .fm-play{width:62px;height:62px;margin:-31px 0 0 -31px}}
@media (prefers-reduced-motion: reduce){.fm-thumb img,.fm-play{transition:none}}

/* ===== Hero: one wide photo instead of five narrow frames ===== */
.is-home .hero .hero-reel.is-one,.hero-reel.is-one{display:block!important;overflow:hidden!important;padding:0!important;gap:0!important;height:clamp(300px,52vh,560px)!important;background:#16161A!important;scroll-snap-type:none!important}
.reel-one{position:relative;width:100%;height:100%}
.reel-one img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:0;z-index:0;transform:scale(1.03)}
.reel-one img.on,.reel-one img.off{animation:reel-drift 10s linear forwards}
.reel-one img.on{opacity:1;z-index:2;transition:opacity 2.4s ease}
.reel-one img.off{opacity:1;z-index:1}
.reel-one-cap{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:64px var(--pad) 20px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6));color:#fff}
.roc-t{font-family:var(--serif);font-size:clamp(15px,1.2vw,18px);line-height:1.35;max-width:46ch}
.roc-n{flex:none;font-size:12.5px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7)}.roc-n b{color:#fff;font-weight:600}
@media (max-width:767px){.is-home .hero .hero-reel.is-one,.hero-reel.is-one{height:62vw!important;min-height:220px}.reel-one-cap{padding:48px 16px 14px}.roc-t{font-size:14px}}
@media (prefers-reduced-motion: reduce){.reel-one img.on{animation:none;transform:none}}

/* Hero photo: thumbnails with titles under it */
.is-home .hero .hero-reel.is-one,.hero-reel.is-one{height:auto!important}
.reel-one{height:clamp(280px,46vh,520px)}
.reel-thumbs{list-style:none;margin:0;padding:12px var(--pad) 14px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;background:#16161A}
.reel-thumbs::-webkit-scrollbar{display:none}
.rt{display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);font:500 13.5px/1.2 var(--sans);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.rt img{width:34px;height:34px;border-radius:50%;object-fit:cover;filter:grayscale(1);flex:none;transition:filter .3s}
.rt:hover{background:rgba(255,255,255,.16);color:#fff}
.rt.on{background:#fff;color:#16161A}.rt.on img{filter:none}
.rt:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:767px){.reel-one{height:62vw;min-height:220px}.reel-thumbs{padding:10px 16px 12px;gap:8px}.rt{font-size:12.5px;padding:4px 12px 4px 4px}.rt img{width:28px;height:28px}}

/* ===== Hero photos, sharp: each photo shown whole at its own shape, never stretched;
   desktop has the event list on the left and the photo on the right ===== */
.is-home .hero .hero-reel.is-one,.hero-reel.is-one{display:grid!important;grid-template-columns:minmax(240px,340px) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,48px)!important;padding:clamp(20px,2.6vw,36px) var(--pad)!important;height:auto!important}
.hero-reel.is-one .reel-one{height:clamp(300px,50vh,480px);background:transparent}
.hero-reel.is-one .reel-one img{object-fit:contain!important;object-position:center!important;transform:none!important;animation:none!important}
.hero-reel.is-one .reel-one img.on{transition:opacity 1.2s ease}
.hero-reel.is-one .reel-one-cap{display:none}
.hero-reel.is-one .reel-thumbs{order:-1;flex-direction:column;gap:4px;padding:0;background:none;overflow:visible}
.hero-reel.is-one .rt{width:100%;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:12px;background:none;color:rgba(255,255,255,.6);white-space:normal;text-align:left}
.hero-reel.is-one .rt img{width:46px;height:46px;border-radius:8px}
.rt-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.rt-t b{font-weight:500;font-size:15px;color:inherit}
.rt-t i{font-family:var(--serif);font-style:normal;font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.55);display:none}
.hero-reel.is-one .rt:hover{background:rgba(255,255,255,.06);color:#fff}
.hero-reel.is-one .rt.on{background:rgba(255,255,255,.1);color:#fff}
.hero-reel.is-one .rt.on .rt-t i{display:block}
.hero-reel.is-one .rt.on img{filter:none}
.hero-reel.is-one .rt.on::before{content:"";width:3px;align-self:stretch;border-radius:3px;background:var(--red);margin:-2px 0 -2px -4px}
@media (max-width:767px){
  .is-home .hero .hero-reel.is-one,.hero-reel.is-one{display:block!important;padding:0!important}
  .hero-reel.is-one .reel-one{height:72vw;min-height:240px;max-height:420px}
  .hero-reel.is-one .reel-one-cap{display:flex;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55))}
  .hero-reel.is-one .reel-thumbs{flex-direction:row;overflow-x:auto;padding:10px 16px 12px;gap:8px;background:#16161A}
  .hero-reel.is-one .rt{width:auto;flex:none;border-radius:999px;padding:4px 12px 4px 4px;background:rgba(255,255,255,.08);white-space:nowrap}
  .hero-reel.is-one .rt img{width:28px;height:28px;border-radius:50%}
  .hero-reel.is-one .rt.on{background:#fff;color:#16161A}
  .hero-reel.is-one .rt.on::before,.hero-reel.is-one .rt.on .rt-t i{display:none}
  .rt-t b{font-size:12.5px}
}

/* ===== Hero photos: an accordion on desktop, a plain carousel on phones ===== */
.is-home .hero .hero-reel.is-acc,.hero-reel.is-acc{display:flex!important;gap:4px!important;padding:4px 0!important;height:clamp(300px,36vw,460px)!important;background:#16161A!important;overflow:hidden!important;grid-template-columns:none!important}
.acc-f{position:relative;flex:1 1 0;min-width:0;padding:0;margin:0;border:0;background:#16161A;overflow:hidden;cursor:pointer;text-align:left;transition:flex-grow .9s cubic-bezier(.2,.8,.2,1)}
.acc-f.on{flex-grow:3.2;cursor:default}
.acc-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.85);transition:filter .7s ease}
.acc-f.on img{filter:none}
.acc-f:hover img{filter:grayscale(.4)}
.acc-cap{position:absolute;left:0;right:0;bottom:0;padding:70px clamp(14px,1.4vw,22px) clamp(14px,1.4vw,20px);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));color:#fff;display:flex;flex-direction:column;gap:6px}
.acc-cap b{font-weight:500;font-size:clamp(16px,1.25vw,19px);letter-spacing:-.01em;line-height:1.2}
.acc-cap i{font-family:var(--serif);font-style:normal;font-size:clamp(19px,1.6vw,24px);line-height:1.25;max-width:32ch;display:none}
.acc-f.on .acc-cap b{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#FFC4CD}
.acc-f.on .acc-cap i{display:block;animation:acc-in .6s ease .25s both}
@keyframes acc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.acc-f:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media (max-width:767px){
  .is-home .hero .hero-reel.is-acc,.hero-reel.is-acc{height:auto!important;overflow-x:auto!important;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 16px!important;gap:8px!important}
  .hero-reel.is-acc::-webkit-scrollbar{display:none}
  .acc-f,.acc-f.on{flex:0 0 86%;height:62vw;max-height:360px;scroll-snap-align:center;border-radius:10px;cursor:default}
  .acc-f img,.acc-f.on img{filter:none}
  .acc-cap{padding:48px 14px 14px}
  .acc-cap b,.acc-f.on .acc-cap b{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#FFC4CD}
  .acc-cap i,.acc-f.on .acc-cap i{display:block;font-size:17px;animation:none}
}
@media (prefers-reduced-motion: reduce){.acc-f{transition:none}}

/* Films: the footer follows the films without a long gap */
.fm{padding-bottom:clamp(32px,4vw,56px)}
.fm + .foot,.fm ~ .foot{margin-top:0;padding-top:clamp(40px,5vw,72px)}

/* Phones: the book reads top to bottom, compact cards, tabs pinned at the top */
@media (max-width:900px){
  .rd-track{position:relative;grid-auto-flow:row!important;grid-auto-columns:auto!important;grid-template-columns:100%!important;overflow-x:hidden!important;overflow-y:auto!important;scroll-snap-type:none!important;gap:12px!important;padding:2px 14px 48px!important;align-content:start}
  .rd-card{scroll-snap-align:none!important;overflow:visible!important;height:auto}
  .rd-card .pg{padding:18px 16px 18px!important}
  .rd-card .pg-open{min-height:0!important;justify-content:flex-start}
  .rd-card .pg-open .pg-kicker span{font-size:30px}
  .rd-card .pg-open h2{font-size:26px;margin-bottom:12px}
  .rd-card .pg-open + .pg-r{border-top:1px solid #ECE8DF}
  .rd-card .pg-cover{padding-top:18px!important;padding-bottom:12px!important}
  .rd-card .pg-split .pg-below{padding:14px 16px 6px!important}
  .rd-bar{display:none!important}
}

/* ===================================================================
   Reading typography for every case study (book pages, phone cards, project page)
   Like a good long-form article: a calm serif body at a moderate size, generous line height,
   a short measure, one rhythm of spacing, and headings that are clear but never shout.
   Children use em, so the page-fit can still scale a whole page down evenly.
   =================================================================== */
.rd .pg{padding:46px clamp(30px,3.2vw,52px) 42px}
.rd .pg-text{font-family:var(--serif);font-size:17px;line-height:1.62;color:#2A2A2E;letter-spacing:.002em;max-width:34em}
.rd .pg-text p{margin:0 0 .85em}
.rd .pg-text p:last-child{margin-bottom:0}
/* labels: small, quiet, consistent */
.rd .pg-label{margin:0 0 .9em;font-family:var(--sans);font-style:normal;font-size:.7em;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#C4302A}
.rd .pg-kicker{margin:0 0 14px;font-size:11.5px;letter-spacing:.09em;gap:10px}
.rd .pg-kicker span{font-size:30px}
/* chapter titles */
.rd .pg-open h2,.rd .pg h2,.rd .pg-tp h2{font-family:var(--sans);font-weight:500;font-size:28px;line-height:1.16;letter-spacing:-.025em;margin:0 0 14px;color:#16161A}
.rd .pg-tp .pg-text h2{font-size:1.5em}
/* the opening line */
.rd .pg-lead{font-family:var(--serif);font-size:18px;line-height:1.55;margin:0 0 .9em;color:#16161A}
.rd .pg-text .pg-lead{font-size:1.06em}
.rd .pg mark{background:linear-gradient(transparent 62%,rgba(229,48,41,.16) 62%)}
/* points with a short heading */
.rd .pg-caps{gap:1em;margin-top:.2em}
.rd .pg-tp .pg-caps li{padding-left:.9em;border-left-width:2px}
.rd .pg-caps h3,.rd .pg-tp .pg-caps h3{font-family:var(--sans);font-weight:600;font-size:.88em;line-height:1.35;letter-spacing:-.005em;margin:0 0 .2em;color:#16161A}
.rd .pg-caps p{margin:0;font-size:.97em;line-height:1.55}
.rd .pg-principle,.rd .pg-tp .pg-principle{margin:1.2em 0 0;font-size:1.04em;line-height:1.5;font-style:italic}
/* captions under pictures */
.rd .pg-cap,.rd .pg-split .pg-cap{font-family:var(--serif);font-size:15px;line-height:1.5;color:#3d3d44}
.rd .pg-split .pg-below{padding:18px clamp(30px,3.2vw,52px) 40px}
.rd .pg-run{font-size:11px;letter-spacing:.04em}
/* phones: the same system, slightly smaller headings */
@media (max-width:900px){
  .rd .rd-card .pg{padding:20px 18px 20px!important}
  .rd .rd-card .pg-text{font-size:17px;line-height:1.65;max-width:none}
  .rd .rd-card .pg-open h2,.rd .rd-card .pg h2{font-size:23px;line-height:1.2}
  .rd .rd-card .pg-lead{font-size:17px}
  .rd .rd-card .pg-kicker span{font-size:26px}
}
/* the project page */
.bpv-h1.mix{font-size:clamp(32px,3.3vw,50px)!important;line-height:1.06!important}
.bpv-sum{font-size:17px!important;line-height:1.6!important;max-width:40ch}
@media (max-width:767px){.bpv-h1.mix{font-size:34px!important}.bpv-sum{font-size:16.5px!important}}

/* ===== Long read (field notes): like a good article ===== */
.ar-progress{position:fixed;left:0;right:0;top:var(--nav-h,64px);height:3px;z-index:40;pointer-events:none}
.ar-progress i{display:block;height:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}
.ar{max-width:700px;margin:0 auto;padding:clamp(28px,4vw,48px) var(--pad) 0}
.ar-back{margin-bottom:clamp(28px,4vw,48px)}
.ar-kicker{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.ar-head h1{margin:0;font-family:var(--sans);font-weight:500;font-size:clamp(36px,4.6vw,56px);line-height:1.04;letter-spacing:-.04em}
.ar-head h1 em{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.56em;line-height:1.2;letter-spacing:-.01em;color:var(--ink);opacity:.8}
.ar-dek{margin:22px 0 0;font-family:var(--serif);font-size:clamp(20px,1.7vw,23px);line-height:1.5;color:var(--ink);opacity:.85}
.ar-by{display:flex;align-items:center;gap:12px;margin:26px 0 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px}
.ar-by b{font-weight:600}.ar-by span{color:var(--muted);opacity:.75}.ar-by span::before{content:"·";margin-right:12px}
.ar-body{margin-top:clamp(32px,4vw,48px);font-family:var(--serif);font-size:clamp(18px,1.4vw,20px);line-height:1.72;color:#242428;letter-spacing:.002em}
.ar-body p{margin:0 0 1.2em}
.ar-body > p:first-child::first-letter{float:left;font-family:var(--serif);font-size:3.6em;line-height:.86;padding:.06em .1em 0 0;color:var(--red)}
.ar-body h2{margin:2.2em 0 .7em;font-family:var(--sans);font-weight:500;font-size:clamp(23px,2vw,28px);line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
.ar-pull{margin:1.8em 0;padding:0 0 0 22px;border-left:3px solid var(--red)}
.ar-pull p{margin:0;font-family:var(--serif);font-style:italic;font-size:1.3em;line-height:1.4;color:var(--ink)}
.ar-qs{list-style:none;margin:0 0 1.4em;padding:0;counter-reset:q;display:grid;gap:.7em}
.ar-qs li{counter-increment:q;position:relative;padding:14px 16px 14px 52px;background:#F4F4F5;border-radius:12px;line-height:1.5}
.ar-qs li::before{content:counter(q);position:absolute;left:16px;top:14px;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font:600 12px/24px var(--sans);text-align:center}
.ar-ask{margin:2.4em 0 0;padding:clamp(22px,3vw,32px);border-radius:16px;background:#16161A;color:#fff}
.ar-ask-k{margin:0 0 .8em!important;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#FFC4CD}
.ar-ask p{margin:0 0 .8em;font-size:1.05em;line-height:1.55}.ar-ask p:last-child{margin-bottom:0}
.ar-foot{margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid var(--line)}
.ar-tags{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ar-tags li{padding:6px 14px;border-radius:999px;background:#F4F4F5;font-size:13px;font-weight:500}
.ar-cta{padding:clamp(22px,3vw,30px);border-radius:16px;border:1px solid var(--line)}
.ar-cta-t{margin:0 0 6px;font-family:var(--sans);font-weight:500;font-size:20px;letter-spacing:-.02em}
.ar-cta p{margin:0 0 18px;font-family:var(--serif);font-size:17px;line-height:1.55}
.ar + .foot{padding-top:clamp(56px,7vw,96px)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ar-body{color:#E6E5E1}:root:not([data-theme="light"]) .ar-qs li,:root:not([data-theme="light"]) .ar-tags li{background:#232327}}
:root[data-theme="dark"] .ar-body{color:#E6E5E1}
:root[data-theme="dark"] .ar-qs li,:root[data-theme="dark"] .ar-tags li{background:#232327}
/* the card's link */
.rc-read{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--red);text-decoration:none}
.rc-read svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.rc-read:hover{text-decoration:underline;text-underline-offset:4px}.rc-read:hover svg{transform:translateX(3px)}

/* Long read, wider and in the site's own grid: title across, a quiet side column, a generous text column */
.ar{max-width:var(--max,1360px);padding:clamp(28px,4vw,48px) var(--pad) 0}
.ar-head{max-width:980px}
.ar-head h1{font-size:clamp(40px,5.6vw,80px);line-height:1;letter-spacing:-.045em}
.ar-head h1 em{font-size:.5em;margin-top:14px}
.ar-dek{max-width:44ch;font-size:clamp(20px,1.8vw,26px)}
.ar-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--gutter,24px);margin-top:clamp(36px,4.5vw,64px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
.ar-side-in{position:sticky;top:calc(var(--nav-h,64px) + 28px);display:flex;flex-direction:column;gap:18px}
.ar-grid .ar-by{margin:0;padding:0;border:0;flex-direction:column;align-items:flex-start;gap:2px}
.ar-grid .ar-by span::before{content:none}
.ar-grid .ar-tags{margin:0;flex-direction:column;align-items:flex-start;gap:6px}
.ar-grid .ar-tags li{background:none;padding:0;border-radius:0;font-size:13px;font-weight:500;color:var(--ink);opacity:.7}
.ar-grid .ar-body{margin-top:0;max-width:820px;font-size:clamp(19px,1.45vw,21px);line-height:1.72}
.ar-body > p:first-child::first-letter{float:none;font-size:inherit;line-height:inherit;padding:0;color:inherit}
.ar-body > p:first-child{font-size:1.12em;line-height:1.6;color:var(--ink)}
.ar-body h2{font-size:clamp(26px,2.4vw,34px);margin:2em 0 .65em}
/* questions: plain lines, no numbers or badges */
.ar-qs{gap:0;border-top:1px solid var(--line);margin:.4em 0 1.4em}
.ar-qs li{padding:16px 0;background:none;border-radius:0;border-bottom:1px solid var(--line)}
.ar-qs li::before{content:none}
.ar-pull{margin:1.6em 0;padding-left:24px}
.ar-pull p{font-size:1.35em}
.ar-foot{max-width:none;margin-left:calc((100% - var(--gutter,24px)) * 3 / 12 + var(--gutter,24px));border-top:0;padding-top:0}
.ar-foot .ar-cta{max-width:820px}
@media (max-width:900px){
  .ar-grid{grid-template-columns:1fr;gap:20px}
  .ar-side-in{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 18px}
  .ar-grid .ar-tags{flex-direction:row;flex-wrap:wrap;gap:6px 14px}
  .ar-foot{margin-left:0}
}
.ar-body p{max-width:none}

/* Long read, balanced: the whole article sits in one very light container, with a single centred reading column */
.ar{max-width:1080px;margin:clamp(20px,3vw,40px) auto 0;padding:clamp(28px,5vw,72px) clamp(20px,5vw,72px) clamp(36px,5vw,64px);background:#FAF9F7;border:1px solid rgba(22,22,26,.07);border-radius:24px;box-sizing:border-box}
.ar-back,.ar-head,.ar-grid,.ar-foot{max-width:760px;margin-left:auto!important;margin-right:auto!important}
.ar-back{margin-bottom:clamp(24px,3vw,40px)}
.ar-head h1{font-size:clamp(36px,4.6vw,64px)}
.ar-dek{max-width:none}
.ar-grid{display:block;margin-top:clamp(24px,3vw,36px);padding-top:18px}
.ar-side-in{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-bottom:clamp(24px,3vw,36px)}
.ar-grid .ar-by{flex-direction:row;align-items:baseline;gap:10px}
.ar-grid .ar-by span::before{content:"·";margin-right:10px}
.ar-grid .ar-tags{flex-direction:row;flex-wrap:wrap;gap:6px 14px}
.ar-grid .ar-body{max-width:none;font-size:clamp(18px,1.35vw,20px)}
.ar-foot{margin-top:clamp(32px,4vw,48px)}
.ar-foot .ar-cta{max-width:none;background:#fff}
.ar-pull{padding-left:20px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ar{background:#1D1D21;border-color:rgba(255,255,255,.06)}:root:not([data-theme="light"]) .ar-foot .ar-cta{background:#17171A}}
:root[data-theme="dark"] .ar{background:#1D1D21;border-color:rgba(255,255,255,.06)}
:root[data-theme="dark"] .ar-foot .ar-cta{background:#17171A}
@media (max-width:767px){.ar{margin:12px 12px 0;border-radius:18px;padding:24px 18px 32px}}

/* ---------- Screen chapters (One-Tap Checkout): screens left, Problem, Solution and numbered notes right ---------- */
.pg-scr{padding:48px clamp(26px,3vw,48px) 40px;gap:0}
.scr-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:4%;position:relative}
.scr-shot{display:block;padding:0;margin:0;border:0;background:none;cursor:zoom-in;min-width:0;min-height:0;max-height:100%}
.scr-shot img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;border:1px solid #ECEBE7!important;border-radius:6px!important;box-shadow:none;background:#fff}
.scr-one .scr-desktop{width:100%}
.scr-one .scr-mobile{height:100%;display:flex;justify-content:center}
.scr-one .scr-mobile img{width:auto;height:100%;max-height:min(100%,640px)}
.scr-pair{align-items:flex-end}
.scr-pair .scr-desktop{flex:0 1 70%}
.scr-pair .scr-mobile{flex:0 1 26%}
.scr-hero{display:block;align-self:center;width:100%;margin:auto 0;padding:0 8% 12% 0;box-sizing:border-box}
.scr-hero .scr-desktop{width:100%}
.scr-hero .scr-mobile{position:absolute;right:0;bottom:0;width:27%}
.scr-hero .scr-mobile img{border-radius:10px!important}
.scr-below{flex:none;padding:16px 0 0}
.scr-below .pg-label{margin:0}
.scr-below .pg-cap{margin:2px 0 0!important;font-size:13px!important;color:#6b6b72!important;font-family:var(--sans)!important}
.pg-ps{margin:0 0 1.1em;display:grid;gap:.7em}
.pg-ps div{display:grid;gap:.15em}
.pg-ps dt{font-family:var(--sans);font-size:.7em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6b6b72}
.pg-ps dd{margin:0}
.pg-notes{list-style:none;margin:0;padding:1em 0 0;border-top:1px solid #ECEBE7;display:grid;gap:.75em;counter-reset:n}
.pg-notes li{display:grid;grid-template-columns:1.5em 1fr;gap:.4em;align-items:baseline}
.pg-notes .pn-n{font-family:var(--sans);font-weight:600;font-size:.85em;color:#E53029;font-variant-numeric:tabular-nums}
.pg-notes p{margin:0;font-family:var(--sans);font-size:.88em;line-height:1.55}
.pg-notes b{font-weight:600;color:#16161A}
.pg-tp .pg-note{margin-top:1.6em;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:#6b6b72}
.bpv-meta{margin:0 0 18px;display:grid;gap:6px;font-family:var(--sans);font-size:14px;line-height:1.4}
.bpv-meta div{display:grid;grid-template-columns:92px 1fr;gap:12px}
.bpv-meta dt{color:#6b6b72}
.bpv-meta dd{margin:0;color:#16161A}
@media (max-width:767px){
  .rd-card .pg-scr{padding:16px 16px 4px!important}
  .rd-card .scr-stage{flex:none}
  .rd-card .scr-one .scr-mobile{height:auto;width:62%}
  .rd-card .scr-one .scr-mobile img{width:100%;height:auto;max-height:none}
  .rd-card .scr-below{padding-top:12px}
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .bpv-meta dd{color:inherit} }
:root[data-theme="dark"] .bpv-meta dd{color:inherit}
.pg-scr{padding-bottom:52px}
.pg-tp .pg-text:has(> .pg-note:only-child){display:flex;flex-direction:column;justify-content:flex-end}
.pg-tp .pg-text > .pg-note:only-child{margin:0;max-width:40ch}
.rd .pg.pg-scr{padding-bottom:56px}
.scr-pair .scr-mobile::after,.scr-hero .scr-mobile::after{display:none!important}
@media (max-width:767px){ .rd .rd-card .pg.pg-scr{padding-bottom:4px!important} .scr-pair .scr-desktop::after,.scr-hero .scr-desktop::after{display:none!important} }
.rd .pg-tp .pg-text:has(> .pg-note:only-child){justify-content:flex-end!important;display:flex;flex-direction:column}
@media (max-width:767px){ .rd-card .scr-below .pg-label{display:none} }
.rd .pg-tp:has(.pg-text > .pg-note:only-child){justify-content:flex-end}
.rd .pg-tp:has(.pg-text > .pg-note:only-child) .pg-text{margin:auto 0 24px!important;flex:none!important;height:auto!important}
.scr-shot img,.scr-hero .scr-mobile img{border-radius:12px!important}
.scr-one .scr-mobile img{max-height:min(100%,844px)}
.scr-hero .scr-mobile{width:24%}
@media (max-width:767px){
  .rd-card .scr-hero{padding:0;display:flex;justify-content:center}
  .rd-card .scr-hero .scr-desktop{display:none}
  .rd-card .scr-hero .scr-mobile{position:static;width:62%}
  .rd-card .scr-pair{flex-direction:column-reverse;align-items:center;gap:16px}
  .rd-card .scr-pair .scr-desktop{width:100%;flex:none}
  .rd-card .scr-pair .scr-mobile{width:62%;flex:none}
  .scr-shot::after{display:none!important}
}
@media (max-width:767px){ .rd-card .scr-hero + .scr-below{display:none} }

/* Flowing books: a stack of three screens as the opening picture */
.pg-split-stack .pg-media.pg-stack{position:relative;background:#EEEBE4;overflow:hidden}
.pg-stack img{position:absolute;width:62%;height:auto;object-fit:contain;border:1px solid #ECEBE7;border-radius:8px!important;background:#fff;box-shadow:0 10px 30px rgba(22,22,26,.10)!important}
.pg-stack .st-0{left:6%;top:9%}
.pg-stack .st-1{left:19%;top:22%;z-index:2}
.pg-stack .st-2{left:32%;top:35%;z-index:3}
.pg-end{background:#FBFAF7}
.pg-split .pg-media.pg-stack img{position:absolute;inset:auto;width:64%;height:auto;max-height:none;object-fit:contain;object-position:top left;box-shadow:0 6px 18px rgba(22,22,26,.08)!important;border:1px solid #E2E0DA;border-radius:6px!important}
.pg-split .pg-stack .st-0{left:5%;top:8%}
.pg-split .pg-stack .st-1{left:18%;top:20%}
.pg-split .pg-stack .st-2{left:31%;top:32%}
.pg-split .pg-media.pg-stack img{right:auto!important;bottom:auto!important;width:60%!important;height:auto!important;position:absolute!important}
.pg-split .pg-stack .st-0{left:6%!important;top:9%!important}
.pg-split .pg-stack .st-1{left:20%!important;top:22%!important;z-index:2}
.pg-split .pg-stack .st-2{left:34%!important;top:35%!important;z-index:3}
.pg-split-stack .pg-media.pg-stack{flex:0 0 60%!important}

/* ---------- Contact ---------- */
.ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;padding-top:clamp(8px,2vw,24px);padding-bottom:clamp(48px,6vw,96px)}
.ct-intro p{margin:0 0 1em;font-family:var(--sans);font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:#3d3d44;max-width:52ch}
.ct-intro .ct-lead{font-family:var(--serif);font-size:clamp(21px,1.8vw,26px);line-height:1.4;color:var(--ink,#16161A);letter-spacing:-.005em}
.ct-list{list-style:none;margin:0;padding:0;border-top:1px solid #E4E3DF}
.ct-row{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:16px;padding:22px 2px;border-bottom:1px solid #E4E3DF;color:inherit;text-decoration:none}
.ct-k{font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#6b6b72}
.ct-v{font-family:var(--sans);font-size:clamp(17px,1.4vw,21px);font-weight:500;letter-spacing:-.01em;overflow-wrap:anywhere}
.ct-go{width:36px;height:36px;border-radius:50%;border:1px solid #E4E3DF;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.ct-go svg{width:16px;height:16px}
.ct-row:hover .ct-go,.ct-row:focus-visible .ct-go{background:#E53029;border-color:#E53029;color:#fff}
.ct-row:hover .ct-v{color:#E53029}
.foot-min h2,.foot-min .foot-cta{display:none}
@media (max-width:860px){
  .ct{grid-template-columns:1fr;gap:28px}
  .ct-row{grid-template-columns:1fr auto;gap:4px 12px;padding:18px 2px}
  .ct-k{grid-column:1}.ct-v{grid-column:1}.ct-go{grid-column:2;grid-row:1/3}
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ct-intro p{color:#C9C9CE} :root:not([data-theme="light"]) .ct-intro .ct-lead{color:#F2F2F3} :root:not([data-theme="light"]) .ct-list,:root:not([data-theme="light"]) .ct-row,:root:not([data-theme="light"]) .ct-go{border-color:#34343A} }
:root[data-theme="dark"] .ct-intro p{color:#C9C9CE} :root[data-theme="dark"] .ct-intro .ct-lead{color:#F2F2F3} :root[data-theme="dark"] .ct-list,:root[data-theme="dark"] .ct-row,:root[data-theme="dark"] .ct-go{border-color:#34343A}
@media (max-width:860px){ .ct-list{order:-1} }

/* ---------- Resume, compact ---------- */
.cv2 .cv-sec{margin-bottom:clamp(48px,5vw,72px)}
.cv2 .cv-head{margin-bottom:clamp(16px,2vw,24px)}
.cv-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cv-mini .cv-card{padding:18px 20px 16px;border-radius:16px;background:#F6F5F2;border:1px solid #EEEDE9;min-height:0}
.cv-mini .cv-area{margin:0 0 6px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#6b6b72;font-family:var(--sans)}
.cv-mini h3{margin:0 0 6px;font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.cv-mini p{margin:0;font-size:14px;line-height:1.5;color:#3d3d44}
.cv-mini .cv-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cv-mini .cv-card.open .cv-clamp{-webkit-line-clamp:unset}
.cv-mini .cv-more{margin-top:8px;font-size:13px}
.cv-chips2{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;background:none!important;border:0!important}
.cv-chips2 li{padding:7px 14px;border-radius:999px;border:1px solid #E4E3DF;background:#fff;font-family:var(--sans);font-size:14px;color:#16161A}
.cv-chips2 .cv-chip-lead{border-color:#16161A;font-weight:600}
.cv2 .cv-subhead{margin:28px 0 12px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6b6b72}
.cv-comp .cv-card p:last-child{font-size:13.5px}
.cv-res{grid-template-columns:repeat(2,minmax(0,1fr))}
.cv2 .cv-edu .cv-card{padding:20px 22px}
.cv2 .cv-sub{font-size:13px}
.cv-tb-flat ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.cv-tb-flat{margin:0}
@media (max-width:860px){
  .cv-mini{grid-template-columns:1fr 1fr}
  .cv-res{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cv-cards.cv-mini,.cv-comp{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .cv-cards.cv-mini>li,.cv-comp>li{flex:0 0 78%;scroll-snap-align:start}
  .cv2 .cv-sec{margin-bottom:44px}
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cv-mini .cv-card{background:#1E1E22;border-color:#2C2C32} :root:not([data-theme="light"]) .cv-mini p{color:#C9C9CE} :root:not([data-theme="light"]) .cv-chips2 li{background:transparent;border-color:#34343A;color:inherit} :root:not([data-theme="light"]) .cv-chips2 .cv-chip-lead{border-color:#F2F2F3} }
:root[data-theme="dark"] .cv-mini .cv-card{background:#1E1E22;border-color:#2C2C32} :root[data-theme="dark"] .cv-mini p{color:#C9C9CE} :root[data-theme="dark"] .cv-chips2 li{background:transparent;border-color:#34343A;color:inherit} :root[data-theme="dark"] .cv-chips2 .cv-chip-lead{border-color:#F2F2F3}
.cv2 .cv-head{padding:0 0 12px!important;margin-bottom:20px!important;min-height:0}
.cv2 .cv-head h2{font-size:clamp(26px,2.4vw,36px)!important;line-height:1.1!important;margin:0!important}
.cv2 .bio-block{padding-bottom:24px}
@media (max-width:600px){ .cv-cards.cv-mini,.cv-comp{margin:0 -20px;padding:0 20px 4px;scroll-padding-left:20px} }

/* A wide picture (the tracking spreadsheet) sits whole on its page, and can be zoomed in the viewer */
.pg-split .pg-media.pg-contain{background:#EFEDE8;display:grid;place-items:center;padding:clamp(14px,2vw,28px)}
.pg-split .pg-media.pg-contain img{position:static;width:100%;height:auto;max-height:100%;object-fit:contain;border:1px solid #E2E0DA;border-radius:6px!important;background:#fff}
.rd-card .pg-split .pg-media.pg-contain{aspect-ratio:auto}
.bk-lb img{cursor:zoom-in}
.bk-lb.zoomed{display:block;overflow:auto;padding:56px 0 0;-webkit-overflow-scrolling:touch}
.bk-lb.zoomed img{max-width:none;max-height:none;width:auto;height:auto;cursor:zoom-out;margin:0 auto;display:block}
.bk-lb.zoomed p{display:none}
.bk-lb.zoomed::before{display:none}
.bk-lb-close{z-index:2}
.bk-lb.zoomed .bk-lb-close{position:fixed}

/* Menu: white, grown out of the button (no red panel over a red button) */
.drawer{background:rgba(10,10,14,.10)}
.balloon{background:#fff;color:#16161A;border:1px solid #E4E3DF;box-shadow:0 24px 50px -24px rgba(22,22,26,.28);padding:0 12px 22px 28px}
.balloon-top{align-items:center}
.close-btn{background:#16161A;color:#fff;width:30px;height:30px}
.close-btn svg{width:14px;height:14px}
.balloon li{border-bottom-color:#ECEBE7}
.balloon a{color:#16161A}
.balloon a:hover{color:#E53029}
.balloon a[aria-current="page"]::after{background:#E53029}
.balloon .menu-note{color:#6b6b72}
.balloon :focus-visible{outline-color:#E53029}
.more-btn[aria-expanded="true"]{visibility:hidden}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .balloon{background:#1E1E22;color:#F2F2F3;border-color:#2C2C32} :root:not([data-theme="light"]) .balloon a{color:#F2F2F3} :root:not([data-theme="light"]) .balloon li{border-bottom-color:#2C2C32} :root:not([data-theme="light"]) .close-btn{background:#F2F2F3;color:#16161A} }
:root[data-theme="dark"] .balloon{background:#1E1E22;color:#F2F2F3;border-color:#2C2C32} :root[data-theme="dark"] .balloon a{color:#F2F2F3} :root[data-theme="dark"] .balloon li{border-bottom-color:#2C2C32} :root[data-theme="dark"] .close-btn{background:#F2F2F3;color:#16161A}

/* Contact line: the hero on the Contact page and the footer everywhere else */
.ct-head h1{font-size:clamp(30px,3.4vw,52px)!important;line-height:1.08!important;max-width:24ch}
.foot .foot-h{font-size:clamp(26px,2.8vw,42px);line-height:1.12;max-width:26ch}
.ct-head .banner h1{font-size:clamp(28px,3vw,46px)!important;line-height:1.12!important;max-width:26ch}

/* Clients: each logo in its own box, white in both themes so every logo sits on the same ground */
.brands{border:0!important;gap:12px}
.brands li,.brands li.logo{border:1px solid #ECEBE7!important;border-radius:14px;background:#fff}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brands li,:root:not([data-theme="light"]) .brands li.logo{background:#fff;border-color:#fff!important;color:#16161A} }
:root[data-theme="dark"] .brands li,:root[data-theme="dark"] .brands li.logo{background:#fff;border-color:#fff!important;color:#16161A}
@media (max-width:600px){ .brands{gap:8px} .brands li,.brands li.logo{border-radius:10px} }

/* Recommendation cards: room between the quote, "Read full testimonial" and the name, and the name sits at the foot of the card */
.home .t-card blockquote{margin-bottom:0}
.home .t-card .t-actions{margin:14px 0 0}
.home .t-card .t-actions:has(.t-more[hidden]){display:none}
.home .t-card .who{margin-top:auto;padding-top:18px;position:relative}
.home .t-card .t-body::after{content:none}
.home .t-card .t-body > .who{margin-top:auto}
.home .t-card .t-body > :nth-last-child(2){margin-bottom:24px}
@media (max-width:900px){
  .home .t-card{display:flex!important;flex-direction:column}
  .home .t-card .t-body{flex:1;padding-right:0}
}
.pg-sl-track img{object-fit:contain!important;object-position:center!important}

/* ---------- Resume v3: crisp, consistent cards, playful decks ---------- */
.cv3 .cv-dl{background:#16161A;color:#fff;border-color:#16161A}
.cv3 .cv-dl:hover{background:#000;color:#fff}
.cv-mail{font-family:var(--sans);font-size:15px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;padding:0 4px}
.cv-mail:hover{color:#E53029}
.cv3 .cv-tabs.stuck{background:var(--bg);box-shadow:0 0 0 100vmax var(--bg),0 1px 0 100vmax transparent;clip-path:inset(0 -100vmax -1px)}
.cv3 .cv-tabs.stuck ol{border-bottom-color:var(--line)}
.cv3 .cv-tabs.stuck a{color:var(--ink)}
.cv3 .cv-tabs.stuck a[aria-current="true"]{border-bottom-color:#E53029}
.cv-lede{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start;margin:0 0 clamp(24px,3vw,36px)}
.cv3 .cv-statement{margin:0;max-width:none;font-size:clamp(24px,2.4vw,34px);line-height:1.22}
.cv3 .cv-about{display:flex;flex-direction:column;gap:12px;margin:0}
.cv3 .cv-about p{font-size:clamp(17px,1.25vw,19px);line-height:1.55;color:#3d3d44}
.cv3 .cv-facts b{font-family:var(--sans);font-weight:500}
.cv3 .cv-facts span{font-family:var(--sans);font-style:normal;font-size:14px;color:#55555c}
.cv3 .cv-intro{margin:12px 0 0;font-family:var(--serif);font-size:18px;line-height:1.5;color:#3d3d44;max-width:60ch}
.cv3 .cv-job ul{margin:14px 0 0;gap:8px}
.cv3 .cv-job ul li{padding-left:18px;font-size:16px;line-height:1.5}
.cv3 .cv-job ul li::before{width:6px;height:6px;border-radius:50%;top:.62em;background:#C9C8C3}
.cv3 .cv-time2 > li{padding:clamp(20px,2.4vw,30px) 0}
/* decks: the index on the left, the shuffle deck on the right */
.cv-deckwrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:start}
.cv-deckwrap .deck{grid-column:auto;padding:10px 34px 46px 0;min-height:0}
.cv-deckwrap .deck-index{margin:0}
.cv-deckwrap .deck .ch{gap:10px;padding:clamp(24px,2.4vw,34px)}
.cv-deckwrap .deck .ch-t{font-size:clamp(24px,2.2vw,32px);line-height:1.1}
.cv-deckwrap .deck .ch p{font-size:17px;line-height:1.6}
.cv-deckwrap .deck .ch .cv-area{margin:0;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#E53029}
/* what I deliver: a plain, even list */
.cv-dlv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.cv-dlv li{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:16px;color:var(--ink)}
.cv3 .cv-subhead{margin:clamp(32px,4vw,48px) 0 16px}
/* education: one card style; master's research stacked inside the master's card */
.cv3 .cv-edu .cv-card{background:#fff;border:1px solid #E4E3DF;border-radius:16px}
.cv-research{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.cv-research ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px}
.cv-research li{display:grid;grid-template-columns:92px 1fr;gap:2px 14px}
.cv-res-k{grid-row:1 / span 2;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6b6b72;padding-top:3px}
.cv-research li b{font-weight:600;font-size:16px}
.cv-research li p{margin:0;font-size:14.5px;line-height:1.5;color:#3d3d44}
@media (max-width:860px){
  .cv-lede,.cv-deckwrap{grid-template-columns:1fr}
  .cv-dlv{grid-template-columns:1fr 1fr}
  .cv-deckwrap .deck-index{order:0;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:0 18px;border:0;scrollbar-width:none;position:relative}
  .cv-deckwrap .deck-index a{border:0;padding:6px 0;font-size:14px;white-space:nowrap}
  .cv-deckwrap .deck{padding:4px 22px 40px 0}
  .cv-research li{grid-template-columns:1fr}
  .cv-res-k{grid-row:auto}
}
@media (max-width:600px){ .cv-dlv{grid-template-columns:1fr} .cv-mail{font-size:14px} }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cv3 .cv-edu .cv-card{background:#1E1E22;border-color:#2C2C32} :root:not([data-theme="light"]) .cv3 .cv-dl{background:#F2F2F3;color:#16161A;border-color:#F2F2F3} :root:not([data-theme="light"]) .cv3 .cv-about p,:root:not([data-theme="light"]) .cv-research li p,:root:not([data-theme="light"]) .cv3 .cv-intro{color:#C9C9CE} :root:not([data-theme="light"]) .cv3 .cv-facts span{color:#B0B0B6} }
:root[data-theme="dark"] .cv3 .cv-edu .cv-card{background:#1E1E22;border-color:#2C2C32} :root[data-theme="dark"] .cv3 .cv-dl{background:#F2F2F3;color:#16161A;border-color:#F2F2F3} :root[data-theme="dark"] .cv3 .cv-about p,:root[data-theme="dark"] .cv-research li p,:root[data-theme="dark"] .cv3 .cv-intro{color:#C9C9CE} :root[data-theme="dark"] .cv3 .cv-facts span{color:#B0B0B6}
.about-cv{margin-top:clamp(20px,2vw,28px);align-self:flex-start}
@media (max-width:767px){ .about-cv{order:4;margin-top:4px} }

/* Projects page: a warm sand banner with dark type */
.banner.banner-sand{background:#EFEBE4;color:#16161A}
.banner.banner-sand h1,.banner.banner-sand .crumb,.banner.banner-sand .crumb a{color:#16161A}
.banner.banner-sand h1 em{color:#16161A}
/* the CRO work in progress */
.cro-strip{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,48px);align-items:center;margin:clamp(40px,5vw,72px) 0 clamp(24px,3vw,40px);padding:clamp(16px,1.6vw,22px);border:1px solid #E4E3DF;border-radius:20px;background:#fff}
.cro-strip img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;display:block}
.cro-k{margin:0 0 10px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6b6b72}
.cro-txt h2{margin:0 0 10px;font-family:var(--sans);font-weight:400;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.03em;line-height:1.15}
.cro-txt p:last-child{margin:0;font-family:var(--serif);font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:#3d3d44;max-width:44ch}
@media (max-width:767px){ .cro-strip{grid-template-columns:1fr} }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cro-strip{background:#1E1E22;border-color:#2C2C32} :root:not([data-theme="light"]) .cro-txt p:last-child{color:#C9C9CE} }
:root[data-theme="dark"] .cro-strip{background:#1E1E22;border-color:#2C2C32} :root[data-theme="dark"] .cro-txt p:last-child{color:#C9C9CE}

/* Book text after a list of points gets a proper gap; points sit a little further from their rule */
.rd .pg-caps{margin-bottom:1.3em}
.rd .pg-caps + p,.rd .pg-caps + blockquote{margin-top:0}
.rd .pg-tp .pg-caps li{padding-left:1.1em}
/* One-Tap Checkout: body text in the serif, like the other books; sans only for small labels */
.pg-ps dd{font-family:var(--serif)}
.pg-notes p{font-family:var(--serif);font-size:.97em;line-height:1.55}
.pg-notes b{font-family:var(--sans);font-size:.92em;font-weight:600}
.scr-below .pg-cap{font-family:var(--serif)!important;font-style:italic;font-size:15px!important}

/* Hero photos: the full caption on every frame, over a dark gradient; a gentle zoom as a frame opens */
.acc-cap{padding:90px clamp(14px,1.4vw,22px) clamp(14px,1.4vw,20px);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55) 45%,rgba(0,0,0,.86))}
.acc-cap i,.acc-f.on .acc-cap i{display:block;font-family:var(--sans);font-style:normal;font-weight:500;font-size:clamp(14px,1.05vw,16px);line-height:1.3;letter-spacing:-.005em;max-width:30ch;animation:none;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.acc-f.on .acc-cap i{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.6vw,24px);line-height:1.25}
.acc-f img{transform:scale(1.06);transition:filter .7s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.acc-f.on img{transform:scale(1)}
@media (max-width:767px){ .acc-cap i,.acc-f.on .acc-cap i{font-family:var(--serif);font-size:17px} .acc-f img{transform:none} }
/* Contact page: a short closing line under the details */
.ct-close{grid-column:1 / -1;margin:clamp(8px,2vw,24px) 0 0;padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--line);font-family:var(--serif);font-size:clamp(20px,1.7vw,26px);line-height:1.4;max-width:40ch}
@media (max-width:860px){ .ct-close{order:3} }
/* Contact page: the closing invitation, set as a proper heading */
.ct-close{margin:clamp(16px,3vw,40px) 0 0;padding-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--line);max-width:28ch;font-family:var(--sans);font-weight:400;font-size:clamp(26px,2.6vw,40px);line-height:1.15;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.ct-close em{font-family:var(--serif);font-style:italic;letter-spacing:-.01em;color:#E53029}
@media (max-width:767px){ .ct-close{font-size:26px} }
@media (max-width:767px){ .about-cv{order:4} .deck-index{order:3} }
.ct{row-gap:clamp(24px,3vw,40px)} .ct-close{margin-top:0;max-width:none} .ct-close{font-size:clamp(26px,2.4vw,38px)} .ct-close{text-wrap:pretty}
.ct-close{max-width:32ch;text-wrap:balance;padding-bottom:clamp(8px,2vw,24px)}

/* Project page: the details use the width they have, beside the book, the same on every project */
@media (min-width:901px){
  .bpv{grid-template-columns:minmax(0,6fr) minmax(0,6fr)!important;gap:clamp(32px,4vw,64px)!important}
  .bpv-side h1{max-width:18ch}
  .bpv-sum{max-width:54ch!important}
  .bpv-meta{max-width:54ch}
  .bpv-book{align-items:center!important}
}

/* Resume fixes: one line under each heading, sticky years that stay readable, pills for what I deliver */
.cv3 .cv-time2 > li:first-child{border-top:0;padding-top:4px}
.cv3 .cv-deckwrap .deck-index{border-top:0}
.cv3 .cv-yrs-in{top:calc(var(--nav-h,64px) + 64px)}
.cv3 .cv-yrs b{font-size:clamp(30px,2.8vw,44px)}
.cv3 .cv-yrs span{font-size:clamp(20px,1.9vw,28px)}
.cv-head2{margin-top:clamp(40px,5vw,64px)!important}
.cv-dlv2{margin:0}
.cv-dlv2 li{font-size:15px;padding:8px 16px}
.cv3 .cv-tb-flat li{font-size:16px;padding:8px 16px 8px 8px;gap:10px}
.cv3 .cv-tb-flat .cv-tl{width:30px;height:30px;font-size:12px}
/* footer: less space above "Happy to connect"; Contact me and LinkedIn side by side */
.foot{padding-top:clamp(40px,5vw,72px)!important}
.ar-cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.cv3 .cv-sec:last-child{margin-bottom:0} .cv3{padding-bottom:0!important;margin-bottom:0!important}

/* Phone hero photos: even margins on every side of the strip, cards snap to the same left edge */
@media (max-width:767px){
  .is-home .hero .hero-reel.is-acc,.hero-reel.is-acc{padding:16px!important;gap:10px!important;scroll-padding-left:16px;scroll-padding-right:16px}
  .acc-f,.acc-f.on{flex:0 0 calc(100% - 44px)!important;scroll-snap-align:start!important;border-radius:12px}
}
/* Dark theme: the black book lifts to a soft charcoal so it doesn't sink into the page */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) [style*="--bk:#16161A"]{--bk:#3A3A42!important} }
:root[data-theme="dark"] [style*="--bk:#16161A"]{--bk:#3A3A42!important}
/* Contact: copy buttons for email and phone */
div.ct-row .ct-v{color:inherit;text-decoration:none}
div.ct-row .ct-v:hover{color:#E53029}
.ct-copy{position:relative;padding:0;background:transparent;color:var(--ink);cursor:pointer}
.ct-copy:hover{background:#16161A;border-color:#16161A;color:#fff}
.ct-done{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:12px;font-weight:600;color:#E53029;opacity:0;transition:opacity .2s;white-space:nowrap;pointer-events:none}
.ct-copy.ok .ct-done{opacity:1}
.ct-row:hover .ct-copy{background:transparent;border-color:#E4E3DF;color:var(--ink)}
.ct-row .ct-copy:hover{background:#16161A;border-color:#16161A;color:#fff}

/* Jam with me: the site's red, not a pale pink */
.cc-jam{background:#E53029!important;color:#fff!important}
.cc-jam:hover{background:#C8231D!important}
.cci-h em,.cci-k,.cci-s,.cc-score b,.cc-end b,.cc-end p b{color:#E53029!important}
.cci-bubbles i:nth-child(3){border-color:#E53029}
.cc-encore{background:#E53029;color:#fff;border-color:#E53029}

/* Design framework: four equal steps in order, joined by arrows; no moving or overlapping cards */
.fw-plain .fw-cards{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:28px!important;counter-reset:none}
.fw-plain .fw-cards li{position:relative;margin:0!important;transform:none!important;rotate:none!important;animation:none!important;z-index:auto!important;background:#fff!important;color:var(--ink)!important;border:1px solid #E4E3DF!important;border-radius:18px!important;box-shadow:none!important;padding:24px 22px!important;transition:border-color .2s}
.fw-plain .fw-cards li *{color:inherit}
.fw-plain .fw-cards li h4 em{color:#E53029!important}
.fw-plain .fw-cards li:hover{border-color:#16161A!important}
.fw-plain .fw-cards li:not(:last-child)::after{content:"→";position:absolute;right:-22px;top:50%;transform:translateY(-50%);font-size:18px;color:#E53029;z-index:2}
.fw-plain .fw-bar{display:none!important}
.fw-plain .fw-note{color:#E53029!important}
.fw-back{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-family:var(--serif);font-style:italic;font-size:18px;color:#3d3d44}
.fw-back svg{width:20px;height:20px;color:#E53029;flex:none}
@media (max-width:860px){
  .fw-plain .fw-cards{grid-template-columns:1fr!important;gap:22px!important}
  .fw-plain .fw-cards li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-22px;transform:translateX(-50%)}
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .fw-plain .fw-cards li{background:#1E1E22!important;border-color:#2C2C32!important} :root:not([data-theme="light"]) .fw-back{color:#C9C9CE} }
:root[data-theme="dark"] .fw-plain .fw-cards li{background:#1E1E22!important;border-color:#2C2C32!important} :root[data-theme="dark"] .fw-back{color:#C9C9CE}
.fw-plain .fw-cards li{overflow:visible!important} .fw-plain .fw-cards li:not(:last-child)::after{display:block!important;width:auto!important;height:auto!important;background:none!important;opacity:1!important;inset:auto;border:0!important}
.fw-plain .fw-cards li:not(:last-child)::after{right:-22px;top:50%} @media (max-width:860px){.fw-plain .fw-cards li:not(:last-child)::after{right:auto;top:auto;left:50%;bottom:-22px}}
.fw-plain .fw-cards li{padding-left:22px!important;margin-left:0!important;margin-top:0!important}

/* Jam with me: a spotlight card that explains itself */
.wk-tiles .wk-jam .wi-game{position:relative;overflow:hidden;display:flex;align-items:center;gap:clamp(16px,2vw,28px);width:100%;max-width:none!important;padding:clamp(18px,2.2vw,28px) clamp(20px,2.6vw,36px);border-radius:24px;background:#16161A!important;color:#fff;transform:none}
.wk-tiles .wk-jam .wi-game::before{content:"";position:absolute;inset:-40% auto auto -10%;width:60%;height:180%;background:radial-gradient(closest-side,rgba(229,48,41,.35),rgba(229,48,41,0));pointer-events:none}
.wk-tiles .wk-jam .wi-game::after{display:none}
.wk-tiles .wk-jam .wg-bub{width:64px;height:64px;background:#E53029;box-shadow:0 0 0 10px rgba(229,48,41,.18)}
.wk-tiles .wk-jam .wg-bub svg{width:24px;height:24px;margin-left:4px}
.wk-tiles .wk-jam .wg-bub i{background:#16161A;border-color:#E53029}
.wk-tiles .wk-jam .wg-bub i:nth-child(2){width:14px;height:14px;right:-10px;top:-8px}
.wk-tiles .wk-jam .wg-bub i:nth-child(3){width:9px;height:9px;right:-18px;top:10px}
.wk-tiles .wk-jam .wg-t{position:relative;gap:6px}
.wk-tiles .wk-jam .wg-t b{font-family:var(--sans);font-style:normal;font-weight:400;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em;color:#fff;line-height:1.05}
.wk-tiles .wk-jam .wg-t span{font-size:clamp(14px,1.1vw,16px);font-weight:400;color:#C9C9CE;text-decoration:none;max-width:40ch}
.wg-go{position:relative;margin-left:auto;flex:none;height:46px;padding:0 24px;border-radius:999px;background:#E53029;color:#fff;display:inline-flex;align-items:center;font-weight:600;font-size:15px;transition:background .2s}
.wk-tiles .wk-jam .wi-game:hover .wg-go{background:#C8231D}
.wk-tiles .wk-jam .wi-game:hover{transform:translateY(-2px)}
@media (max-width:767px){
  .wk-tiles .wk-jam .wi-game{flex-wrap:wrap;padding:22px 20px;border-radius:20px}
  .wk-tiles .wk-jam .wg-bub{width:56px;height:56px}
  .wk-tiles .wk-jam .wg-t{flex:1 1 calc(100% - 80px)}
  .wk-tiles .wk-jam .wg-t b{font-size:26px}
  .wg-go{width:100%;justify-content:center;margin:6px 0 0;height:50px;font-size:16px}
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wk-tiles .wk-jam .wi-game{background:#26262C!important} }
:root[data-theme="dark"] .wk-tiles .wk-jam .wi-game{background:#26262C!important}

/* Resume: just the download; no rule under the section headings; decks simplified on phones */
.cv-bar2{padding:0 0 18px!important;justify-content:flex-start!important}
.cv3 .cv-head{border-bottom:0!important}
.cv3 .cv-head h2{border:0!important}
@media (max-width:860px){
  .cv-deckwrap .deck-index{display:none!important}
  .cv-deckwrap .deck{padding:4px 18px 44px 0!important;margin-top:4px}
  .cv-deckwrap .deck::after{content:"Tap the card to shuffle";right:18px}
  .cv-bar2 .cv-dl{width:100%;justify-content:center}
}
.wk-tiles .wk-jam .wg-t span{max-width:56ch} .wk-tiles .wk-jam .wg-t{padding-left:8px}
.cv-bar2{margin-top:clamp(20px,2.4vw,28px);padding:0!important}
.cv3 .cv-edu .cv-cert{grid-column:auto}
@media (max-width:767px){ .cv-bar2,.cv-bar,.cv-mail,.cv-ico{display:none!important} }

/* Resume: product experience and competencies as plain, even cards (no tabs, no shuffle) */
.cv-plain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cv-plain li{padding:22px 24px;border:1px solid #E4E3DF;border-radius:18px;background:#fff;transition:border-color .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.cv-plain li:hover{border-color:#16161A;transform:translateY(-2px)}
.cv-plain .cv-area{margin:0 0 8px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#E53029}
.cv-plain h3{margin:0 0 8px;font-family:var(--sans);font-weight:500;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.02em;line-height:1.2}
.cv-plain p:last-child{margin:0;font-size:15.5px;line-height:1.55;color:#3d3d44}
.cv-plain-s{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){ .cv-plain,.cv-plain-s{grid-template-columns:1fr;gap:10px} .cv-plain li{padding:18px 18px} }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cv-plain li{background:#1E1E22;border-color:#2C2C32} :root:not([data-theme="light"]) .cv-plain p:last-child{color:#C9C9CE} }
:root[data-theme="dark"] .cv-plain li{background:#1E1E22;border-color:#2C2C32} :root[data-theme="dark"] .cv-plain p:last-child{color:#C9C9CE}

/* Toolbox: quiet grey pills, each with a small round mark in the tool's colour */
.cv3 .cv-tb-flat li,.cv-tb li{background:#F2F1EE!important;color:#16161A;font-weight:500}
.cv3 .cv-tb-flat .cv-tl,.cv-tl{border-radius:50%!important;width:28px!important;height:28px!important;font-size:11px!important}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cv3 .cv-tb-flat li{background:#26262C!important;color:#F2F2F3} }
:root[data-theme="dark"] .cv3 .cv-tb-flat li{background:#26262C!important;color:#F2F2F3}
/* Resume decks on phones: shuffle cards without the tab list or the hint line */
@media (max-width:860px){ .cv-deckwrap .deck::after{content:none!important} .cv-deckwrap .deck{padding-bottom:28px!important} }

/* Design framework (homepage only): the steps move along briskly, and on phones a tapped card lifts clear of the stack */
.fw-cards li{transition-duration:.4s}
@media (max-width:900px){ .fw-cards li.on{z-index:9!important;box-shadow:0 18px 40px -18px rgba(22,22,26,.4)} }