/* mehditmimi.com home, 2026-11: the May 2026 look (watercolor behind, plain cards in front) with today's content.
   One visual system:
   - buttons are filled and big (52 px, 14 px corners, bold, a shadow): .btn--main (gradient), .btn--alt (surface + 2 px line), brand buttons;
   - links are underlined text;
   - tags and feature pills are small, round, tinted, with no border and no shadow, and never react to the pointer;
   - boxes that only hold content have no border: a surface and a soft shadow (.card). Cards that are links lift on hover. */

/* ---------- Tokens ---------- */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: Georgia, "Times New Roman", Times, serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f7;
  --ink: #0a0a0a;
  --ink-2: #3a3a44;
  --ink-3: #5c5c68;
  --rule: rgba(10, 10, 30, .09);
  --accent: #4f46e5;
  --accent-soft: rgba(79, 70, 229, .45);
  --grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --grad-text: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --grad-btn: linear-gradient(135deg, #4f46e5 0%, #7c3aed 52%, #db2777 100%);
  --btn-glow: rgba(79, 70, 229, .42);
  --btn-line: rgba(79, 70, 229, .32);
  --shadow: 0 1px 2px rgba(20, 16, 50, .05), 0 10px 30px -6px rgba(20, 16, 50, .12);
  --shadow-hover: 0 2px 4px rgba(20, 16, 50, .06), 0 22px 48px -10px rgba(20, 16, 50, .22);
  --shadow-sm: 0 1px 2px rgba(20, 16, 50, .06), 0 3px 10px rgba(20, 16, 50, .07);
  --veil: rgba(255, 255, 255, .86);
  --nav-bg: #ffffff;

  --tag-bg: #eef0ff;   --tag-ink: #3730a3;
  --new-bg: #fdf2f8;   --new-ink: #9d174d;
  --live-bg: #f0fdf4;  --live-ink: #166534;  --live: #16a34a;
  --mute-bg: #f1f1f4;  --mute-ink: #4a4a55;
  --yt-bg: #fff1f1;
  --shot-bg: #eef0f8;

  /* logo colours (WCAG 1.4.11: 3:1 on their tile) */
  --c-java: #e76f00; --c-kotlin: #7f52ff; --c-react: #087ea4; --c-flutter: #02569b; --c-ionic: #3880ff; --c-pwa: #5a0fc8;
  --c-node: #3c873a; --c-html: #e34f26; --c-css: #1572b6; --c-android: #1e8e3e; --c-apple: #3a3a44; --c-web: #4f46e5;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0a0a0f;
  --surface: #15151d;
  --surface-2: #1f1f2b;
  --ink: #f5f5f7;
  --ink-2: #c9c9d3;
  --ink-3: #a1a1ae;
  --rule: rgba(255, 255, 255, .08);
  --accent: #a5b4fc;
  --accent-soft: rgba(165, 180, 252, .45);
  --grad-text: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #f472b6 100%);
  --btn-glow: rgba(99, 102, 241, .45);
  --btn-line: rgba(165, 180, 252, .34);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -8px rgba(0, 0, 0, .6);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 52px -10px rgba(0, 0, 0, .75), 0 0 0 1px rgba(165, 180, 252, .10);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .35);
  --veil: rgba(10, 10, 15, .86);
  --nav-bg: #0a0a0f;

  --tag-bg: rgba(129, 140, 248, .16); --tag-ink: #c7d2fe;
  --new-bg: rgba(244, 114, 182, .16); --new-ink: #fbcfe8;
  --live-bg: rgba(74, 222, 128, .13); --live-ink: #bbf7d0; --live: #4ade80;
  --mute-bg: rgba(255, 255, 255, .08); --mute-ink: #c9c9d3;
  --yt-bg: rgba(255, 40, 40, .10);
  --shot-bg: #0f1017;

  --c-java: #f89b3c; --c-kotlin: #a68bff; --c-react: #61dafb; --c-flutter: #54c5f8; --c-ionic: #6aa1ff; --c-pwa: #b49cff;
  --c-node: #6cc24a; --c-html: #f0643e; --c-css: #3d9be9; --c-android: #3ddc84; --c-apple: #e5e5ea; --c-web: #a5b4fc;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
:root[data-motion="off"] { scroll-behavior: auto; }
body { font: 400 1.0625rem/1.65 var(--sans); color: var(--ink); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: 1rem; transform: translateY(-200%); box-shadow: none !important; z-index: 100; padding: .7rem 1rem; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-weight: 700; }
.skip:focus { transform: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.ico { width: 18px; height: 18px; flex: none; }

/* ---------- The watercolor (js/watercolor.js) ---------- */
#wc { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
#wc.is-on { opacity: 1; }
/* Without WebGL, or on a software renderer: a still watercolor in CSS (painted once, never animated). */
.wc-css body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 8% 18%, rgba(168, 85, 247, .22), transparent 70%),
    radial-gradient(34vmax 28vmax at 92% 12%, rgba(251, 146, 60, .18), transparent 70%),
    radial-gradient(40vmax 30vmax at 85% 85%, rgba(59, 130, 246, .2), transparent 70%),
    radial-gradient(36vmax 26vmax at 10% 88%, rgba(236, 72, 153, .2), transparent 70%);
}
[data-theme="dark"].wc-css body::before { opacity: .8; }

/* A veil: the page colour, softly, under text that sits on the watercolor (never a box: no border, no shape).
   On a phone it is a soft band as wide as the screen, so its edges fall outside the view. From 641 px up it is a
   halo: a radial gradient that is solid under the text and fades to nothing, with no edge, no shadow and no blur filter
   (a blurred rounded box read as a black pill behind every title in dark). Rows that only hold buttons have none.
   Every veil paints in the page's back layer (just above the watercolor canvas, below all content), never in a layer
   of its own: a veil reaches past its text, and on a phone, where sections sit close, it would otherwise wash out the
   first row of the card after it or the last line of the text before it. In that back layer a blur filter would be
   redone by the GPU on every frame (it doubled a scroll hitch at CPU x4), so the band's soft edge is its shadow only. */
.veil { position: relative; }
.veil::before { content: ""; position: absolute; inset: -1.5rem -1rem; z-index: -1; pointer-events: none; border-radius: 32px; background: var(--veil); box-shadow: 0 0 48px 22px var(--veil); }
@media (min-width: 641px) {
  .veil::before { inset: -2.5rem -5rem; border-radius: 50%; box-shadow: none; filter: none;
    background: radial-gradient(closest-side, var(--veil) 58%, color-mix(in srgb, var(--veil) 45%, transparent) 80%, transparent 100%); }
  .hero__text.veil::before { inset: -3.5rem -6rem;
    background: radial-gradient(closest-side, var(--veil) 66%, color-mix(in srgb, var(--veil) 45%, transparent) 84%, transparent 100%); }
}
/* the halos and the turning glows (portrait, Vivace) never widen the page on a phone */
main { overflow-x: clip; }

/* ---------- Header ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--nav-bg); transition: box-shadow .3s ease; }
.bar.is-scrolled { box-shadow: 0 1px 0 var(--rule), 0 8px 24px -12px rgba(0, 0, 0, .18); }
.bar__in { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 750; font-size: 1.06rem; letter-spacing: -.01em; }
.brand img { width: 44px; height: 28px; }
.bar__nav { display: flex; gap: clamp(1rem, 2.4vw, 2.1rem); margin: 0 auto; }
.bar__nav a { position: relative; padding: .5rem 0; color: var(--ink-2); font-weight: 560; font-size: .97rem; text-decoration: none; transition: color .2s; }
.bar__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.bar__nav a:hover, .bar__nav a[aria-current] { color: var(--ink); }
.bar__nav a:hover::after, .bar__nav a[aria-current]::after { transform: scaleX(1); }
.bar__ctl { display: flex; align-items: center; gap: .6rem; }
.ctl { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink); cursor: pointer; transition: background-color .2s; }
.ctl:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--accent) 12%); }
.ctl svg { width: 20px; height: 20px; flex: none; }
/* the pause button names what it pauses wherever the header has room (the word stays its accessible name) */
.ctl__label { display: none; font: 650 .92rem/1 var(--sans); }
@media (min-width: 1000px) { #motion { padding: 0 .85rem 0 .7rem; } #motion .ctl__label { display: inline; } }
.ctl .i-off, [data-motion="off"] .ctl .i-on { display: none; }
[data-motion="off"] .ctl .i-off { display: inline; }
.ctl--menu { display: none; }
.switch { position: relative; width: 62px; height: 34px; border: 0; border-radius: 999px; padding: 0; cursor: pointer; background: #e7e7f0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); transition: background-color .3s; }
[data-theme="dark"] .switch { background: #2a2a3a; }
.switch__knob { position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #b45309; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), background-color .3s, color .3s; }
[data-theme="dark"] .switch__knob { transform: translateX(28px); background: var(--grad-btn); color: #fff; }
.switch__knob svg { width: 16px; height: 16px; }
.switch .i-moon, [data-theme="dark"] .switch .i-sun { display: none; }
[data-theme="dark"] .switch .i-moon { display: inline; }

/* ---------- Buttons, links, tags ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: .8rem 1.55rem;
  border: 2px solid transparent; border-radius: 14px; font: 700 1rem/1.2 var(--sans); letter-spacing: .005em; text-decoration: none;
  cursor: pointer; transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s, background-color .25s;
}
.btn--main { background: var(--grad-btn); color: #fff; box-shadow: 0 8px 20px -6px var(--btn-glow); }
.btn--alt { background: var(--surface); color: var(--ink); border-color: var(--btn-line); box-shadow: var(--shadow-sm); }
.btn--node { background: linear-gradient(135deg, #15803d, #166534); color: #fff; box-shadow: 0 8px 20px -6px rgba(22, 101, 52, .5); }
.btn--yt { background: #e00000; color: #fff; min-height: 46px; padding: .6rem 1.2rem; box-shadow: 0 8px 18px -8px rgba(224, 0, 0, .55); }
.btn:hover, a.card:hover .btn { transform: translateY(-2px); }
.btn--main:hover, a.card:hover .btn--main { box-shadow: 0 14px 28px -8px var(--btn-glow); }
.btn--alt:hover { border-color: var(--accent); }
.btn .ico { transition: transform .25s; }
.btn:hover .ico, a.card:hover .btn .ico { transform: translateX(3px); }
.ico--fill { width: 16px; height: 16px; }
.link, .news a, .course__now a, .yt__text a, .contact__mail, .pubs a.doi {
  color: var(--accent); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--accent-soft);
}
.link { display: inline-flex; align-items: center; gap: .35rem; }
.link:hover, .news a:hover, .course__now a:hover, .yt__text a:hover, .contact__mail:hover, .pubs a.doi:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.link .ico, .news .ico { width: 16px; height: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag { display: inline-flex; align-items: center; gap: .4rem; height: 26px; padding: 0 .7rem; border-radius: 999px; background: var(--tag-bg); color: var(--tag-ink); font: 650 .8rem/1 var(--sans); white-space: nowrap; }
.tag--new { background: var(--new-bg); color: var(--new-ink); }
.tag--live, .tag--green { background: var(--live-bg); color: var(--live-ink); }
.live { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--live); }
[data-motion="on"] .tag--live .live::after, [data-motion="on"] .course__now .live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--live); opacity: 0; animation: ping 2.4s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(.5); opacity: .7; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
/* feature list: plain text with an icon, like the Vivace offers (no chip, so nothing looks like a filter) */
.feats { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.feat { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-2); font: 600 .9rem/1.3 var(--sans); }
.feat svg { width: 15px; height: 15px; color: var(--accent); }
.pg--node .feat svg { color: var(--c-node); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); }
:where(a.card) { display: block; }
a.card { color: inherit; text-decoration: none; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
a.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
/* dark cards keep their edge where the watercolor is dark too (part of the shadow, not a border) */
[data-theme="dark"] .card { box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .05); }
[data-theme="dark"] a.card:hover { box-shadow: var(--shadow-hover); }
/* a whole-card link ends with an arrow, so it reads as a link at rest (phones never hover) */
.go { flex: none; align-self: center; margin-left: auto; width: 20px; height: 20px; color: var(--accent); transition: transform .25s; }
a.card:hover .go { transform: translateX(3px); }

/* ---------- Logos ---------- */
.logos { display: flex; flex-wrap: wrap; gap: .5rem; }
.lg-tile { --lc: var(--c-web); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--lc) 11%, var(--surface)); }
.lg-tile--lg { width: 56px; height: 56px; border-radius: 15px; }
.lg-tile--xl { width: 72px; height: 72px; border-radius: 18px; }
.lg { width: 24px; height: 24px; fill: var(--lc); color: var(--lc); }
.lg-tile--lg .lg { width: 30px; height: 30px; }
.lg-tile--xl .lg { width: 40px; height: 40px; }
.lg--web { fill: none; stroke: var(--lc); }
.lg-tile:has(.lg--java) { --lc: var(--c-java); }
.lg-tile:has(.lg--kotlin) { --lc: var(--c-kotlin); }
.lg-tile:has(.lg--react) { --lc: var(--c-react); }
.lg-tile:has(.lg--flutter) { --lc: var(--c-flutter); }
.lg-tile:has(.lg--ionic) { --lc: var(--c-ionic); }
.lg-tile:has(.lg--pwa) { --lc: var(--c-pwa); }
.lg-tile:has(.lg--node) { --lc: var(--c-node); }
.lg-tile:has(.lg--html) { --lc: var(--c-html); }
.lg-tile:has(.lg--css) { --lc: var(--c-css); }
.lg-tile:has(.lg--js) { --lc: #d4b106; }
/* bare logos (course cards) carry their own colour */
.lg--java { --lc: var(--c-java); } .lg--kotlin { --lc: var(--c-kotlin); } .lg--react { --lc: var(--c-react); } .lg--flutter { --lc: var(--c-flutter); }
.lg--ionic { --lc: var(--c-ionic); } .lg--pwa { --lc: var(--c-pwa); } .lg--node { --lc: var(--c-node); } .lg--web { --lc: var(--c-web); }

/* ---------- Hero ---------- */
.hero { min-height: min(100svh, 980px); display: flex; align-items: center; padding: 7rem 0 4rem; }
.hero__in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; width: 100%; }
.hero__visual { position: relative; justify-self: center; width: min(460px, 100%); aspect-ratio: 1; padding: 6%; }
.portrait { position: relative; isolation: isolate; width: 100%; height: 100%; border-radius: 50%; padding: 5px; background: linear-gradient(#0c1626, #0c1626) content-box, var(--grad); box-shadow: 0 0 34px rgba(99, 102, 241, .38); }
.portrait::before { content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, #6366f1, #8b5cf6 25%, #ec4899 50%, #06b6d4 75%, #6366f1); filter: blur(16px); opacity: .75; }
[data-motion="on"] .portrait::before { animation: spin 14s linear infinite; }
.portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #0c1626; }
/* (the disc under the photo stays night blue while it loads: the ring's gradient only fills the 5 px rim) */
.portrait img { transition: opacity .5s ease; }
.portrait img.is-wait { opacity: 0; transition: none; }
.glyph { position: absolute; z-index: 1; font: 800 1.7rem/1 var(--sans); pointer-events: none; user-select: none; opacity: .8; }
.glyph.g2, .glyph.g4, .glyph.g5 { font: 700 1.45rem/1 var(--mono); }
.g1 { left: 2%; top: 4%; color: #f97316; }
.g2 { right: 0; top: 9%; color: #6366f1; }
.g3 { left: 0; bottom: 14%; color: #ec4899; }
.g4 { right: -2%; bottom: 22%; color: #8b5cf6; }
.g5 { left: -3%; top: 44%; color: #06b6d4; }
.g6 { right: 22%; bottom: -1%; color: #f59e0b; }
[data-motion="on"] .glyph { animation: drift 7s ease-in-out infinite; }
[data-motion="on"] .g2 { animation-delay: -1.2s; } [data-motion="on"] .g3 { animation-delay: -2.4s; } [data-motion="on"] .g4 { animation-delay: -3.6s; } [data-motion="on"] .g5 { animation-delay: -4.8s; } [data-motion="on"] .g6 { animation-delay: -6s; }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(0); opacity: .45; } 50% { transform: translateY(-14px) rotate(-6deg); opacity: .9; } }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__text { display: grid; gap: 1.25rem; justify-items: start; }
.news { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; font-size: .98rem; }
.news a { display: inline-flex; align-items: center; gap: .35rem; }
.hero__title { display: grid; gap: .35rem; }
.hero__hello { font: 700 1.3rem/1.2 var(--sans); color: var(--ink-2); }
.hero__name { font: 700 clamp(3rem, 6.6vw, 5rem)/1.02 var(--display); letter-spacing: -.015em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.hero__roles { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font: 600 1.25rem/1.4 var(--sans); color: var(--ink); }
.hero__roles .dot { color: var(--accent); }
.hero__lede { max-width: 34em; font-size: 1.15rem; line-height: 1.7; color: var(--ink-2); }
.hero .actions { margin-top: .6rem; }

/* ---------- Sections ---------- */
.sec { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.sec--tight { padding-top: clamp(2rem, 4vw, 3rem); }
.sec__head { max-width: 780px; margin: 0 auto clamp(2.25rem, 4vw, 3.25rem); text-align: center; }
.sec__title { display: flex; align-items: center; justify-content: center; gap: .9rem; font: 700 clamp(2rem, 4.2vw, 3rem)/1.15 var(--display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.sec__icon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--grad); color: #fff; box-shadow: 0 10px 22px -8px rgba(99, 102, 241, .6); }
.sec__icon svg { width: 26px; height: 26px; }
.sec__sub { margin-top: .9rem; font-size: 1.15rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.sec__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.6rem; width: fit-content; max-width: 100%; margin: 2.75rem auto 0; }
.sub-head { width: fit-content; margin: 3.5rem auto 1.5rem; font: 700 1.4rem/1.3 var(--sans); text-align: center; }

/* ---------- Films ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); padding: 14px; }
.shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--shot-bg); }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
a.card:hover .shot img { transform: scale(1.035); }
/* Nothing sits on the film art: the length is one small play pill in the card's text. */
.film__len { display: inline-flex; align-items: center; gap: .3rem; height: 24px; padding: 0 .6rem 0 .5rem; border-radius: 999px; background: var(--tag-bg); color: var(--tag-ink); font: 700 .78rem/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.film__len svg { width: 11px; height: 11px; flex: none; }
.tags .film__len { height: 26px; font-size: .8rem; }
.feature__body { display: grid; gap: 1rem; justify-items: start; padding: 1rem clamp(.5rem, 2vw, 1.5rem) 1rem 0; }
.feature__title { font: 750 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.feature__sub { color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; }
.feature .btn { margin-top: .4rem; }
.films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.film { height: 100%; padding: 10px; display: flex; flex-direction: column; }
.film__body { display: grid; gap: .3rem; padding: .85rem .55rem .6rem; }
.film__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; color: var(--ink-3); font: 600 .85rem/1.3 var(--sans); }
.film__title { color: var(--ink); font: 700 1.06rem/1.38 var(--sans); text-wrap: pretty; }
/* "In production" is an empty slot, not a sixth film: no surface, no shadow, a dashed outline */
.film--next { border-radius: 24px; background: var(--veil); border: 2px dashed color-mix(in srgb, var(--ink-3) 35%, transparent); }
.shot--next { display: grid; place-items: center; background: transparent; }
.next__logos { display: flex; gap: 1.1rem; }
.next__logos .lg { width: 40px; height: 40px; }
.lg--android { fill: var(--c-android); }
.lg--apple { fill: var(--c-apple); }

/* ---------- Courses ---------- */
.courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.course { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1rem; padding: 2.1rem 2rem 2rem; }
.course::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--bar); }
.course--mobile { --bar: linear-gradient(90deg, #2563eb, #06b6d4); }
.course--js { --bar: linear-gradient(90deg, #eab308, #22c55e); }
.course--web { --bar: var(--grad); }
/* the logos, bare, then their names in one line (a beginner does not know the Ionic or PWA mark) */
.course__top { display: grid; gap: .55rem; }
.course__logos { display: flex; flex-wrap: nowrap; align-items: center; gap: .65rem; min-height: 30px; }
.course__logos .lg { width: 28px; height: 28px; }
.course__logos .lg--web { width: 30px; height: 30px; }
.course__stack { color: var(--ink-3); font: 600 .85rem/1.45 var(--sans); text-wrap: balance; }
.course__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; margin-top: .2rem; color: var(--ink-3); font-size: .88rem; font-weight: 600; }
.course__kicker + .course__title { margin-top: -.35rem; }
.course__title { font: 750 1.5rem/1.25 var(--sans); letter-spacing: -.012em; color: var(--ink); }
.course__sub { color: var(--ink-2); line-height: 1.6; }
.course__now { display: flex; align-items: baseline; gap: .65rem; color: var(--ink-2); font-size: .97rem; line-height: 1.5; text-wrap: balance; }
.course__now .live { transform: translateY(-1px); }
/* one button per card, all on the same line */
.course .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Tools ---------- */
.pgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.pg { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: 2.25rem; }
.pg::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #8b5cf6, #6366f1); background-size: 200% 100%; }
.pg--node::before { background-image: linear-gradient(90deg, #22c55e, #10b981, #14b8a6, #10b981, #22c55e); }
.pg__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; width: 100%; margin-bottom: .5rem; }
.pg__title { font: 800 clamp(1.7rem, 2.8vw, 2.05rem)/1.15 var(--sans); letter-spacing: -.02em; background: linear-gradient(135deg, var(--ink) 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg--node .pg__title { background-image: linear-gradient(135deg, var(--ink) 30%, var(--c-node)); }
.pg__kicker { margin-top: -.5rem; color: var(--accent); font: 650 1.05rem/1.3 var(--sans); }
.pg--node .pg__kicker { color: var(--live-ink); }
:root:not([data-theme="dark"]) .pg--node .pg__kicker { color: #15803d; }
.pg__sub { color: var(--ink-2); font-size: 1.05rem; line-height: 1.65; }
.pg .btn { margin-top: .6rem; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.mini { height: 100%; display: flex; align-items: flex-start; gap: 1rem; padding: 1.4rem; }
.mini__icon { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; }
.mini__icon svg { width: 24px; height: 24px; }
.mini__icon--pdf { background: color-mix(in srgb, #e11d48 12%, var(--surface)); color: #e11d48; }
.mini__icon--img { background: color-mix(in srgb, #0891b2 12%, var(--surface)); color: #0891b2; }
.mini__icon--dev { background: color-mix(in srgb, #7c3aed 12%, var(--surface)); color: #7c3aed; }
[data-theme="dark"] .mini__icon--pdf { color: #fb7185; } [data-theme="dark"] .mini__icon--img { color: #22d3ee; } [data-theme="dark"] .mini__icon--dev { color: #a78bfa; }
.mini__body { display: grid; gap: .3rem; }
.mini__title { display: flex; align-items: center; gap: .55rem; color: var(--ink); font: 700 1.1rem/1.3 var(--sans); }
.mini__title .tag { height: 22px; padding: 0 .55rem; font-size: .75rem; }
.mini__sub { color: var(--ink-2); font-size: .95rem; line-height: 1.55; }

/* ---------- Research ---------- */
/* one strip of three figures (not three boxes that look like the link cards) */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 780px; margin: 0 auto; padding: .35rem 0; }
.stat { display: flex; flex-direction: column-reverse; align-items: center; gap: .3rem; padding: 1.15rem 1rem; text-align: center; }
.stat + .stat { border-left: 1px solid var(--rule); }
.stat dt { color: var(--ink-3); font-weight: 600; font-size: .95rem; }
.stat dd { font: 800 clamp(2rem, 4vw, 2.6rem)/1.05 var(--sans); letter-spacing: -.02em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.seg-wrap { display: flex; justify-content: center; margin: 2.25rem 0 1.5rem; }
.seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.seg button { min-height: 42px; padding: 0 1.1rem; border: 0; border-radius: 11px; background: transparent; color: var(--ink-2); font-weight: 650; font-size: .95rem; cursor: pointer; transition: background-color .2s, color .2s; }
.seg button:hover { color: var(--ink); background: var(--surface-2); }
.seg button[aria-pressed="true"] { background: var(--grad-btn); color: #fff; }
.seg b { margin-left: .3rem; font-weight: 700; opacity: .75; }
/* on the pressed button the count is white on the violet-pink gradient: faded it fell to 3.9:1, full it keeps 4.6:1 or more */
.seg button[aria-pressed="true"] b { opacity: 1; }
.pubs { max-width: 980px; margin: 0 auto; padding: .4rem 0; }
.pubs li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem clamp(1.1rem, 3vw, 1.9rem); }
.pubs li + li { border-top: 1px solid var(--rule); }
.pubs li[hidden] { display: none; }
.pubs__y { padding-top: .1rem; color: var(--ink-3); font: 700 .95rem/1.5 var(--sans); }
.pubs li > div > a { color: var(--ink); font-weight: 650; font-size: 1.05rem; line-height: 1.45; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--accent-soft); }
.pubs li > div > a:hover { color: var(--accent); text-decoration-color: currentColor; }
.pubs__m { margin-top: .35rem; color: var(--ink-3); font-size: .88rem; line-height: 1.5; }
.pubs__a { margin-top: .15rem; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.pubs__a b { color: var(--ink); }

/* ---------- Archive ---------- */
.arch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.arch__card { height: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.5rem; }
.arch__body { display: grid; gap: .35rem; }
.arch__t { color: var(--ink); font: 700 1.1rem/1.3 var(--sans); }
.arch__m { color: var(--ink-3); font-size: .93rem; line-height: 1.5; }

/* ---------- Music: Vivace ---------- */
.spot { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); padding: clamp(1.6rem, 4.5vw, 3.75rem); }
.spot__body { display: grid; gap: 1.2rem; justify-items: start; }
.spot__label { display: inline-flex; align-items: center; height: 28px; padding: 0 .8rem; border-radius: 999px; background: var(--tag-bg); color: var(--tag-ink); font: 650 .85rem/1 var(--sans); }
.spot__title { margin-top: -.2rem; font: 700 clamp(2.4rem, 5vw, 3.4rem)/1.08 var(--display); letter-spacing: -.015em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.spot__tag { margin-top: -.4rem; color: var(--ink); font: 650 1.2rem/1.5 var(--sans); }
.spot__text { color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; max-width: 38em; }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; width: 100%; }
.offers li { display: flex; align-items: center; gap: .7rem; color: var(--ink); font-weight: 600; font-size: .98rem; }
.offers svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--tag-bg); color: var(--accent); }
.yt { display: flex; gap: 1.1rem; align-items: flex-start; width: 100%; padding: 1.35rem 1.4rem; border-radius: 18px; background: var(--yt-bg); }
.yt__logo { flex: none; width: 46px; height: 46px; color: #ff0000; }
.yt__body { display: grid; gap: .5rem; justify-items: start; }
.yt__title { color: var(--ink); font: 750 1.1rem/1.3 var(--sans); }
.yt__text { color: var(--ink-2); font-size: .97rem; line-height: 1.55; }
:root:not([data-theme="dark"]) .yt__text a { color: #4338ca; }
.yt .btn { margin-top: .3rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; width: 100%; }
.facts dt { color: var(--ink-3); font-weight: 700; font-size: .86rem; }
.facts dd { color: var(--ink-2); font-size: .97rem; line-height: 1.5; }
.spot__visual { display: grid; place-items: center; }
.vlogo { position: relative; isolation: isolate; width: min(440px, 100%); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06); }
[data-theme="dark"] .vlogo { box-shadow: 0 22px 50px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(165, 180, 252, .16); }
/* the disc itself, above its glow. Light: May's recipe, pale and opaque, with a soft rim the glow shows through.
   Dark: a night-blue record (May's translucent dark disc let the warm glow fill it and went muddy brown): opaque, faint
   grooves around a quiet centre under the logo, two soft light wedges, a rim light on top; all painted once, static. */
.vlogo::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 237, 242, 1) 0%, rgba(228, 230, 237, .98) 30%, rgba(220, 223, 232, .92) 50%, rgba(210, 215, 225, .7) 80%, transparent 100%); }
[data-theme="dark"] .vlogo::before {
  background:
    conic-gradient(from 25deg, transparent 0deg, rgba(196, 181, 253, .10) 28deg, transparent 58deg, transparent 180deg, rgba(125, 211, 252, .08) 208deg, transparent 238deg),
    radial-gradient(circle, #1a1d48 0%, #181a42 40%, rgba(24, 26, 66, 0) 56%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0) 0 2.2px, rgba(255, 255, 255, .045) 2.2px 3.2px),
    radial-gradient(circle at 50% 38%, #1d2050 0%, #131536 58%, #0b0c22 100%);
  box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(165, 180, 252, .12), inset 0 -24px 48px rgba(0, 0, 0, .35); }
/* The glow: one soft centred gradient just past the disc (painted once, no filter, no hard edge); it breathes on the
   compositor (scale and opacity), as May's halo did. Light: May's fire (amber and pink). Dark: a rim of the logo's own
   colours, each near where it sits in the logo (amber and orange on top, rose right, blue and cyan below, violet and pink
   left), with no muddy mix between neighbours; a radial mask fades it out past the record. */
.vlogo__glow { position: absolute; inset: -7%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(245, 158, 11, .36) 0%, rgba(236, 72, 153, .3) 60%, rgba(245, 158, 11, .24) 84%, rgba(245, 158, 11, 0) 100%); }
[data-theme="dark"] .vlogo__glow { inset: -10%;
  background: conic-gradient(#f59e0b 0deg, #f97316 40deg, #f43f5e 85deg, #a855f7 120deg, #3b82f6 150deg, #06b6d4 180deg, #3b82f6 210deg, #8b5cf6 245deg, #ec4899 290deg, #f43f5e 325deg, #f59e0b 360deg);
  -webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, .58) var(--ring-0, 82%), rgba(0, 0, 0, .26) var(--ring-1, 90%), transparent 100%);
  mask-image: radial-gradient(closest-side, rgba(0, 0, 0, .58) var(--ring-0, 82%), rgba(0, 0, 0, .26) var(--ring-1, 90%), transparent 100%); }
.vlogo__wave, .vlogo__clef { position: absolute; left: 2.5%; top: 2.5%; width: 95%; height: 95%; object-fit: contain; }
.vlogo__wave { will-change: transform; }
.vlogo__clef { filter: drop-shadow(0 4px 10px rgba(30, 20, 60, .22)); }
/* The entrance (js adds .is-ready when both images are decoded, then .is-on when the disc is on screen). */
[data-motion="on"] .vlogo:not(.is-on) .vlogo__wave, [data-motion="on"] .vlogo:not(.is-on) .vlogo__clef, [data-motion="on"] .vlogo:not(.is-on) .vlogo__glow { opacity: .001; }
[data-motion="on"] .vlogo.is-on .vlogo__wave { animation: wave-in 1.15s cubic-bezier(.16, 1, .3, 1) both, wave-breathe 7s ease-in-out 1.3s infinite; }
[data-motion="on"] .vlogo.is-on .vlogo__clef { animation: clef-in 1.35s cubic-bezier(.34, 1.45, .64, 1) .32s both; }
[data-motion="on"] .vlogo.is-on .vlogo__glow { animation: glow-in 1.2s ease-out both, glow-breathe 6s ease-in-out 1.2s infinite; }
@keyframes glow-breathe { 50% { transform: scale(1.05); opacity: .8; } }
@keyframes wave-in { from { opacity: 0; transform: scale(1.4) rotate(10deg); } to { opacity: 1; transform: none; } }
@keyframes clef-in { from { opacity: 0; transform: scale(.25) rotate(-110deg); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes glow-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes wave-breathe { 50% { transform: scale(1.035) rotate(-1.5deg); } }

/* ---------- Contact ---------- */
.contact { max-width: 780px; margin: 0 auto; padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center; }
.contact__label { color: var(--ink-3); font-weight: 650; font-size: .92rem; }
.contact__mail { display: inline-block; margin-top: .3rem; font-size: clamp(1.3rem, 3.6vw, 1.9rem); font-weight: 750; letter-spacing: -.01em; overflow-wrap: anywhere; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1.6rem; margin-top: 1.75rem; }
.socials a { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 600; font-size: .98rem; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--accent-soft); }
.socials a:hover { color: var(--accent); text-decoration-color: currentColor; }
.socials svg { width: 20px; height: 20px; color: var(--ink-2); }

/* ---------- Footer ---------- */
.foot { margin-top: 2rem; padding: 3rem 0 2.2rem; background: var(--surface); box-shadow: 0 -1px 0 var(--rule); }
.foot__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: start; }
.foot__brand p { margin-top: .6rem; color: var(--ink-3); font-size: .95rem; }
.foot__cols { display: flex; gap: 3.5rem; }
.foot__h { margin-bottom: .6rem; color: var(--ink); font-weight: 700; font-size: .95rem; }
.foot__cols li + li { margin-top: .35rem; }
.foot__cols a { color: var(--ink-2); font-size: .95rem; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s, color .2s; }
.foot__cols a:hover { color: var(--accent); text-decoration-color: currentColor; }
.foot__c { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: .88rem; }

/* ---------- Reveal on scroll (motion on only) ---------- */
/* translate, not transform: the hover lift (transform) keeps working during and after the reveal; a card of a row waits
   its turn (--rv-d, set by js: 0, 70, 140, 210 ms) for the reveal only, never for its hover */
[data-motion="on"] .rv { opacity: 0; translate: 0 18px; }
[data-motion="on"] .rv.is-in { opacity: 1; translate: none; transition: opacity .7s ease var(--rv-d, 0s), translate .8s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s), transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
/* one reveal per layout: card by card in a grid; on a phone the films row and the two list cards come in whole
   (a card swiped into view never fades in late, a list card never shows up empty) */
@media (min-width: 641px) { [data-motion="on"] :is(.films, .minis, .arch).rv { opacity: 1; translate: none; } }
@media (max-width: 640px) { [data-motion="on"] :is(.film, .mini, .arch__card).rv { opacity: 1; translate: none; } }

/* ---------- Motion off: nothing drifts, nothing lifts ---------- */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; }
[data-motion="off"] a.card:hover, [data-motion="off"] .btn:hover, [data-motion="off"] a.card:hover .btn,
[data-motion="off"] a.card:hover .shot img, [data-motion="off"] a.card:hover .go, [data-motion="off"] .btn:hover .ico { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) *, html:not([data-motion="on"]) *::before { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
/* Courses: three columns while a card has room for its button on one line; then two, with the web card across
   the row laid out in two columns (so it is not half empty); then one centred column. */
@media (max-width: 1179px) {
  .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course--web { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 1rem 2.5rem; }
  .course--web > .course__top { grid-area: 1 / 1; }
  .course--web > .course__kicker { grid-area: 2 / 1; }
  .course--web > .course__title { grid-area: 3 / 1; }
  .course--web > .course__sub { grid-area: 1 / 2 / 3 / 3; align-self: end; }
  .course--web > .btn { grid-area: 3 / 2; align-self: center; justify-self: start; margin-top: 0; }
}
@media (max-width: 859px) {
  .courses { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin: 0 auto; }
  .course--web { display: flex; }
}
@media (max-width: 1080px) {
  .films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .minis, .arch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spot { grid-template-columns: minmax(0, 1fr); }
  .spot__visual { order: -1; }
  .vlogo { width: min(360px, 82%); }
  /* one column: the disc sits above the text, so the dark rim stays as close as the light glow (inside the card, off the label) */
  [data-theme="dark"] .vlogo__glow { inset: -7%; --ring-0: 87%; --ring-1: 93%; }
}
@media (max-width: 860px) {
  .bar__nav { display: none; position: absolute; top: 76px; left: 1rem; right: 1rem; flex-direction: column; gap: 0; margin: 0; padding: .6rem; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-hover); }
  .bar__nav.is-open { display: flex; }
  .bar__nav a { padding: .85rem 1rem; border-radius: 12px; font-size: 1.05rem; }
  .bar__nav a::after { display: none; }
  .bar__nav a[aria-current] { background: var(--surface-2); }
  .bar__ctl { margin-left: auto; }
  .ctl--menu { display: inline-flex; }
  .hero { min-height: 0; padding: 6.5rem 0 3rem; }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero__visual { width: min(330px, 80vw); }
  .hero__text { justify-items: center; text-align: center; }
  .hero__roles, .news, .hero .actions { justify-content: center; }
  .feature { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .feature__body { padding: .5rem .75rem 1rem; }
  .pgs { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the same content in fewer screens (13.2 screens at 390 x 844 before): tighter sections, the section icon
   beside its title, the older films in one row that scrolls sideways, the 24 tools and the archive as one list card
   each (like the publications), the year on the publication's type line, the YouTube box in two rows. */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .sec { padding: 1.9rem 0; }
  .sec--tight { padding-top: 1.1rem; }
  .sec__head { margin-bottom: 1.25rem; }
  /* the icon flows at the start of the title, so a title on two lines stays centred with its icon */
  .sec__title { display: block; font-size: 1.85rem; }
  .sec__icon { display: inline-grid; width: 40px; height: 40px; margin-right: .6rem; vertical-align: middle; position: relative; top: -.1em; border-radius: 12px; box-shadow: 0 8px 18px -8px rgba(99, 102, 241, .6); }
  .sec__icon svg { width: 21px; height: 21px; }
  .sec__sub { margin-top: .5rem; font-size: 1rem; line-height: 1.5; }
  .sec__cta { margin-top: 1.5rem; gap: .75rem; }
  .sub-head { margin: 1.75rem auto .9rem; font-size: 1.25rem; }
  .actions { gap: .75rem; }
  /* hero: the main button on the first screen (390 x 844 and 360 x 740) */
  .hero { padding: 5.25rem 0 1.9rem; }
  .hero__in { gap: 1.1rem; }
  .hero__visual { width: min(200px, 50vw); padding: 4%; }
  .hero__text { gap: .9rem; }
  .hero__roles { flex-direction: column; gap: .15rem; }
  .hero__roles .dot { display: none; }
  /* films: the latest one big, the others in one row that scrolls sideways, edge to edge, the next card cut by the
     screen edge so the row reads as more to swipe */
  .feature__body { gap: .7rem; padding: .3rem .6rem .7rem; }
  .feature__sub { font-size: 1rem; line-height: 1.55; }
  .feature .btn { margin-top: .15rem; }
  .films { --gut: clamp(1rem, 4vw, 2rem); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(70%, 270px); gap: .75rem;
    margin: .5rem calc(-1 * var(--gut)) 0; padding: 10px var(--gut) 20px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink-3) 40%, transparent) transparent; }
  .films > li { scroll-snap-align: start; }
  .films + .sec__cta { margin-top: .5rem; }
  .film { padding: 7px; border-radius: 18px; }
  .film .shot { border-radius: 12px; }
  .film__body { padding: .6rem .45rem .45rem; }
  .film__meta { gap: .25rem .5rem; font-size: .8rem; }
  .film__len { height: 22px; padding: 0 .5rem 0 .42rem; font-size: .74rem; }
  .film__title { font-size: .98rem; line-height: 1.35; }
  .film--next { border-radius: 18px; }
  .next__logos { gap: .8rem; }
  .next__logos .lg { width: 32px; height: 32px; }
  /* courses and playgrounds */
  .courses { gap: 1rem; }
  .course { gap: .65rem; padding: 1.3rem 1.2rem 1.25rem; }
  .course__kicker { margin-top: 0; }
  .course__kicker + .course__title { margin-top: -.2rem; }
  .course__title { font-size: 1.35rem; }
  .course__sub { line-height: 1.55; }
  .pgs { gap: 1rem; }
  .pg { gap: .65rem; padding: 1.3rem 1.2rem 1.25rem; }
  .pg__top { margin-bottom: 0; }
  .lg-tile--lg { width: 46px; height: 46px; border-radius: 13px; }
  .lg-tile--lg .lg { width: 25px; height: 25px; }
  .lg-tile--xl { width: 54px; height: 54px; border-radius: 15px; }
  .lg-tile--xl .lg { width: 30px; height: 30px; }
  .pg__kicker { margin-top: -.4rem; font-size: 1rem; }
  .pg__sub { font-size: 1rem; line-height: 1.55; }
  .feats { gap: .4rem .95rem; }
  .feat { font-size: .87rem; }
  .pg .btn { margin-top: .3rem; }
  /* the 24 tools and the archive: one card, one row per link (each row still ends with its arrow) */
  .minis, .arch { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
  [data-theme="dark"] .minis, [data-theme="dark"] .arch { box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .05); }
  .minis > li + li, .arch > li + li { border-top: 1px solid var(--rule); }
  :root :is(.minis, .arch) a.card, :root :is(.minis, .arch) a.card:hover { border-radius: 0; box-shadow: none; transform: none; }
  :root :is(.minis, .arch) a.card:hover { background: var(--surface-2); }
  :is(.minis, .arch) a.card:focus-visible { outline-offset: -3px; border-radius: 0; }
  .mini { gap: .85rem; padding: 1rem 1.1rem; }
  .mini__icon { width: 40px; height: 40px; border-radius: 12px; }
  .mini__icon svg { width: 21px; height: 21px; }
  .mini__body { gap: .2rem; }
  .mini__title { font-size: 1.04rem; }
  .mini__sub { font-size: .92rem; line-height: 1.5; }
  .arch__card { padding: .9rem 1.1rem; }
  .arch__body { gap: .15rem; }
  .arch__t { font-size: 1.02rem; }
  .arch__m { font-size: .88rem; line-height: 1.45; }
  /* research: a slimmer strip of figures and filter, the year on the type line */
  .stats { padding: .1rem 0; }
  .stat { gap: .15rem; padding: .7rem .4rem; }
  .stat dt { font-size: .82rem; }
  .stat dd { font-size: 1.65rem; }
  .seg-wrap { margin: 1rem 0 .9rem; }
  .seg button { min-height: 40px; padding: 0 .9rem; }
  .pubs { padding: .1rem 0; }
  .pubs li { grid-template-columns: auto minmax(0, 1fr); gap: 0 .4rem; padding: 1rem 1.15rem; }
  .pubs li > div { display: contents; }
  .pubs li > div > a { grid-area: 1 / 1 / 2 / 3; font-size: 1rem; }
  .pubs__y { grid-area: 2 / 1; margin-top: .3rem; padding-top: 0; font: 700 .86rem/1.5 var(--sans); }
  .pubs__y::after { content: " ·"; }
  .pubs__m { grid-area: 2 / 2; margin-top: .3rem; font-size: .86rem; }
  .pubs__a { grid-area: 3 / 1 / 4 / 3; font-size: .88rem; }
  .sec__cta.veil { margin-top: 1.25rem; }
  /* music */
  .spot { gap: 1.5rem; padding: 1.6rem 1.2rem 1.4rem; }
  .vlogo { width: min(232px, 74%); }
  .spot__body { gap: .85rem; }
  .spot__tag { margin-top: -.25rem; font-size: 1.08rem; }
  .spot__text { font-size: 1rem; line-height: 1.6; }
  .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .8rem; }
  .offers li { gap: .5rem; font-size: .9rem; line-height: 1.3; }
  .offers svg { width: 30px; height: 30px; padding: 7px; }
  .yt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem .7rem; padding: .9rem 1rem 1rem; }
  .yt__body { display: contents; }
  .yt__logo { width: 34px; height: 34px; }
  .yt__text, .yt .btn { grid-column: 1 / -1; }
  .yt__text { font-size: .94rem; line-height: 1.5; }
  .yt .btn { margin-top: .1rem; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .facts dd { line-height: 1.45; }
  /* contact and footer */
  .contact { padding: 1.4rem 1.2rem 1.5rem; }
  .socials { gap: .75rem 1.3rem; margin-top: 1.2rem; }
  .foot { margin-top: 0; padding: 1.75rem 0 1.4rem; }
  .foot__in { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .foot__cols { gap: 2.5rem; }
  .foot__c { padding-top: 1rem; }
  .brand span { display: none; }
  .btn { width: 100%; }
  .actions, .sec__cta { width: 100%; }
}
/* small phones (360): the longest button label stays on one line */
@media (max-width: 400px) {
  .course, .pg { padding-inline: 1.05rem; }
  .btn { padding-inline: 1rem; }
}
/* the narrowest phones (320): still one line per button */
@media (max-width: 340px) {
  .course, .pg { padding-inline: .8rem; }
  .btn { gap: .4rem; padding-inline: .6rem; font-size: .95rem; }
}