/* ==========================================================================
   Driss Briksine — portfolio
   Ink-black, paper-white, one signal colour. Variable type that moves with the scroll.
   ========================================================================== */

:root {
  --bg: #0b0b0c;
  --bg-2: #131314;
  --bg-3: #1b1b1d;
  --fg: #ece8e1;
  --fg-2: #b8b3aa;
  --muted: #7f7a72;
  --rule: rgba(236, 232, 225, 0.14);
  --rule-2: rgba(236, 232, 225, 0.32);
  --hot: #4570ff;
  --on-hot: #0b0b0c;
  --panel: rgba(19, 19, 20, 0.72);
  --done: #6f6a63;
  --done-node: #8a857d;
  --track: rgba(236, 232, 225, 0.08);

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(16px, 3.2vw, 48px);
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 17px; line-height: 1.5; font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
h2 { font-weight: 700; font-size: clamp(40px, 6.4vw, 104px); line-height: 0.9; letter-spacing: -0.035em; text-transform: uppercase; font-variation-settings: "wdth" 88; }
h2 em, h1 em { font-style: normal; color: var(--hot); }
code { font-family: var(--mono); }
::selection { background: var(--hot); color: var(--on-hot); }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }

.label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-variation-settings: "wdth" 87; color: var(--fg-2); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-variation-settings: "wdth" 87; padding: 5px 9px; border: 1px solid var(--rule-2); border-radius: 999px; color: var(--fg-2); }

.skip { position: absolute; left: 16px; top: -100px; z-index: 300; background: var(--fg); color: var(--bg); padding: 8px 14px; }
.skip:focus { top: 16px; }

/* Film grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient background: two slow glows and a faint drifting dot grid */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg__glow { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
.bg__glow--a { left: -22vmax; top: -28vmax; background: radial-gradient(circle, rgba(69, 112, 255, 0.16), transparent 62%); animation: driftA 40s ease-in-out infinite alternate; }
.bg__glow--b { right: -26vmax; bottom: -32vmax; background: radial-gradient(circle, rgba(90, 209, 255, 0.08), transparent 62%); animation: driftB 52s ease-in-out infinite alternate; }
.bg__grid { position: absolute; inset: -40px; background-image: radial-gradient(circle, var(--fg) 1px, transparent 1.5px); background-size: 40px 40px; opacity: 0.05; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 10%, transparent 80%); mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 10%, transparent 80%); animation: gridPan 90s linear infinite; }
html[data-theme="light"] .bg__glow--a { background: radial-gradient(circle, rgba(42, 82, 224, 0.10), transparent 62%); }
html[data-theme="light"] .bg__glow--b { background: radial-gradient(circle, rgba(42, 160, 224, 0.07), transparent 62%); }
html[data-theme="light"] .bg__grid { opacity: 0.07; }
@keyframes driftA { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18vw, 14vh) scale(1.1); } 100% { transform: translate(6vw, 30vh) scale(0.95); } }
@keyframes driftB { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16vw, -10vh) scale(1.08); } 100% { transform: translate(-4vw, -26vh) scale(1); } }
@keyframes gridPan { to { transform: translate(40px, 40px); } }

.swarm { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
main, .ft { position: relative; z-index: 1; }

/* ---------- Light theme ---------- */
html[data-theme="light"] {
  --bg: #ece8e1; --bg-2: #e3ded5; --bg-3: #d8d2c7;
  --fg: #141312; --fg-2: #3d3a36; --muted: #6f6a63;
  --rule: rgba(20, 19, 18, 0.15); --rule-2: rgba(20, 19, 18, 0.32);
  --hot: #2a52e0; --on-hot: #ffffff;
  --panel: rgba(236, 232, 225, 0.78); --done: #a19b92; --done-node: #8f897f; --track: rgba(20, 19, 18, 0.08);
  color-scheme: light;
}
html { color-scheme: dark; transition: background 0.5s; }
body { transition: background 0.5s, color 0.5s; }
/* The agent stage is always night: the glow only works on black. */
.agents {
  --bg: #0b0b0c; --bg-2: #131314; --bg-3: #1b1b1d; --fg: #ece8e1; --fg-2: #b8b3aa; --muted: #7f7a72;
  --rule: rgba(236, 232, 225, 0.14); --rule-2: rgba(236, 232, 225, 0.32); --hot: #4570ff; --on-hot: #0b0b0c;
  color: var(--fg);
}

/* ---------- Theme switch ---------- */
.theme {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; text-transform: inherit; letter-spacing: inherit;
}
.theme__track { position: relative; display: block; width: 46px; height: 24px; border: 1px solid var(--rule-2); border-radius: 999px; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.theme__dot { position: absolute; top: 2px; left: 2px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--fg); color: var(--bg); transition: transform 0.45s var(--ease-out); }
.theme__dot > span { position: absolute; display: grid; place-items: center; transition: opacity 0.3s, transform 0.45s var(--ease-out); }
.theme svg { width: 11px; height: 11px; fill: currentColor; stroke: currentColor; }
.theme__icon--sun svg, .theme__dot-sun svg { fill: none; stroke-width: 2; stroke-linecap: round; }
.theme__icon--sun circle, .theme__dot-sun circle { fill: currentColor; stroke: none; }
.theme__icon { position: absolute; top: 50%; display: grid; place-items: center; color: var(--muted); transform: translateY(-50%); }
.theme__icon--moon { left: 6px; }
.theme__icon--sun { right: 6px; }
.theme__dot-sun { opacity: 0; transform: rotate(-90deg); }
html[data-theme="light"] .theme__dot-sun { opacity: 1; transform: none; }
html[data-theme="light"] .theme__dot-moon { opacity: 0; transform: rotate(90deg); }
html[data-theme="light"] .theme__dot { transform: translateX(22px); }

/* ---------- Header ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 12px var(--gutter); pointer-events: none; }
.hd__bar {
  pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 0 auto; padding: 8px 8px 8px 10px; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-variation-settings: "wdth" 87;
  transition: background 0.45s, border-color 0.45s, box-shadow 0.45s, max-width 0.6s var(--ease-out), padding 0.45s;
  max-width: 100%;
}
.hd.is-scrolled .hd__bar {
  max-width: 1400px; background: color-mix(in srgb, var(--bg) 74%, transparent); border-color: var(--rule);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 14px 50px -18px rgba(0, 0, 0, 0.55);
}
.hd__brand { display: flex; align-items: center; gap: 10px; flex: none; padding-inline-start: clamp(8px, 1.6vw, 22px); }
.hd__logo { display: flex; flex-direction: column; line-height: 1; }
.hd__code { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 15px; font-weight: 700; font-variation-settings: "wdth" 100; white-space: nowrap; }
.hd__lt, .hd__gt { color: var(--hot); transition: transform 0.4s var(--ease-out); }
.hd__brand:hover .hd__lt { transform: translateX(-3px); }
.hd__brand:hover .hd__gt { transform: translateX(3px); }
.hd__type { font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; font-variation-settings: "wdth" 110; color: var(--fg); }
.hd__type:not(:empty) { margin: 0 0.4em 0 0.2em; }
.hd__caret { width: 0; height: 16px; margin-inline-start: -0.35em; margin-inline-end: 0.35em; background: var(--hot); box-shadow: 0 0 8px var(--hot); opacity: 0; }
.hd__logo.is-typing .hd__caret { width: 8px; opacity: 1; animation: caret 0.8s steps(2, jump-none) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.hd__sub { grid-column: 1 / -1; margin-top: 4px; font-size: 9.5px; color: var(--muted); max-height: 14px; transition: opacity 0.4s, max-height 0.5s var(--ease-out), margin 0.5s; }
.hd.is-hero .hd__sub { opacity: 0; max-height: 0; margin-top: 0; }
.hd__nav { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
.hd__nav a { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 14px; border-radius: 999px; color: var(--fg-2); transition: color 0.3s; }
.hd__nav a i { font-style: normal; font-size: 9px; color: var(--hot); }
.hd__nav a:hover, .hd__nav a.is-active { color: var(--fg); }
.hd__pill { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: color-mix(in srgb, var(--fg) 10%, transparent); border: 1px solid var(--rule); opacity: 0; transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), opacity 0.3s; }
.hd__tools { display: flex; align-items: center; gap: 16px; flex: none; }
.hd__status { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-2); }
.hd__status i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; }
.hd__status i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #3ddc84; animation: ping 2s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.hd__clock { display: inline-flex; align-items: baseline; gap: 5px; color: var(--fg); min-width: 66px; }
.hd__clock small { font-size: 9px; color: var(--muted); }
.hd__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: var(--hot); color: var(--on-hot); font-weight: 700; transition: transform 0.3s var(--ease-out), box-shadow 0.4s; }
.hd__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px var(--hot); }
.hd__cta span { transition: transform 0.4s var(--ease-out); }
.hd__cta:hover span { transform: translateX(3px); }
.hd__menu { display: none; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--fg); font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.hd__menu i { position: relative; width: 14px; height: 8px; }
.hd__menu i::before, .hd__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease-out), top 0.4s var(--ease-out); }
.hd__menu i::before { top: 0; } .hd__menu i::after { top: 6.5px; }
.menu-open .hd__menu i::before { top: 3.25px; transform: rotate(45deg); }
.menu-open .hd__menu i::after { top: 3.25px; transform: rotate(-45deg); }

/* Full-screen menu (phones) */
.menu { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; justify-content: space-between; padding: 110px var(--gutter) 32px; background: var(--bg); clip-path: inset(0 0 100% 0); transition: clip-path 0.6s var(--ease); }
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: clamp(42px, 12vw, 96px); font-weight: 850; line-height: 1; letter-spacing: -0.045em; text-transform: uppercase; font-variation-settings: "wdth" 90; transform: translateY(30px); opacity: 0; transition: transform 0.6s var(--ease-out), opacity 0.4s; }
.menu.is-open .menu__nav a { transform: none; opacity: 1; }
.menu__nav a:nth-child(2) { transition-delay: 0.05s; } .menu__nav a:nth-child(3) { transition-delay: 0.1s; } .menu__nav a:nth-child(4) { transition-delay: 0.15s; } .menu__nav a:nth-child(5) { transition-delay: 0.2s; }
.menu__nav a i { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--hot); letter-spacing: 0; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--fg-2); }
.menu-open body { overflow: hidden; }

/* Header fit levels, set by common.js when the content doesn't fit the bar */
.hd[data-fit="1"] .hd__status,
.hd[data-fit="2"] .hd__status, .hd[data-fit="2"] .hd__clock,
.hd[data-fit="3"] .hd__status, .hd[data-fit="3"] .hd__clock, .hd[data-fit="3"] .hd__nav { display: none; }
.hd[data-fit="3"] .hd__menu { display: inline-flex; }
@media (max-width: 960px) {
  .hd__nav, .hd__clock, .hd__status { display: none; }
  .hd__menu { display: inline-flex; }
}
@media (max-width: 560px) {
  .hd__cta, .hd__id small, .hd__tools > .lang { display: none; }
  .hd__tools { gap: 10px; }
}

/* ---------- Cursor ---------- */
.cursor { display: none; }
html.has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; }
html.has-cursor .cursor::before {
  content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--hot); transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), background 0.3s;
}
html.has-cursor .cursor.is-link::before { width: 46px; height: 46px; background: rgba(69, 112, 255, 0.28); }
html.has-cursor .cursor.is-label::before { width: 92px; height: 92px; background: var(--fg); }
.cursor__label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0.5); opacity: 0; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--bg); white-space: nowrap; transition: opacity 0.25s, transform 0.35s var(--ease-out); }
.cursor.is-label .cursor__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- Page wipe ---------- */
.wipe { position: fixed; inset: 0; z-index: 200; background: var(--hot); pointer-events: none; animation: wipeOut 0.9s 0.05s var(--ease) both; }
.wipe.is-out { animation: wipeIn 0.55s var(--ease) both; }
@keyframes wipeOut { from { transform: translateY(0); } to { transform: translateY(-101%); } }
@keyframes wipeIn { from { transform: translateY(101%); } to { transform: translateY(0); } }

html.can-reveal [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); }
html.can-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Home
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: 96px var(--gutter) 22px; }
.hero__top { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero__intro { max-width: 30ch; font-size: clamp(18px, 1.65vw, 25px); line-height: 1.28; letter-spacing: -0.01em; color: var(--fg-2); animation: rise 1.2s 0.5s var(--ease-out) both; }
.hero__intro b { font-weight: 700; color: var(--fg); }
.hero__main { margin-top: auto; padding-top: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 4vw, 64px); }
.hero__name { font-weight: 800; text-transform: uppercase; line-height: 0.8; letter-spacing: -0.03em; font-variation-settings: "wdth" var(--wdth, 125); transform: translateY(var(--shift, 0)); }
.hero__line { display: block; overflow: hidden; padding-bottom: 0.02em; }
.hero__word { display: inline-block; white-space: nowrap; animation: slideUp 1.2s var(--ease-out) both; }
.hero__line + .hero__line .hero__word { animation-delay: 0.12s; }
.hero__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule-2); font-family: var(--mono); font-size: 11px; text-transform: uppercase; font-variation-settings: "wdth" 87; }
.avail { display: inline-flex; align-items: center; gap: 8px; }
.avail i { width: 8px; height: 8px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 12px var(--hot); animation: blink 1.6s steps(2) infinite; }
.hero__scroll span { display: inline-block; animation: bob 1.8s ease-in-out infinite; }


/* Hero status panel */
.hero__tag {
  position: relative; flex: none; width: min(340px, 30vw); margin-bottom: 0.4vw; padding: 16px 18px 14px;
  background: color-mix(in srgb, var(--bg-2) 80%, transparent); backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 11px; font-variation-settings: "wdth" 87;
  animation: rise 1.1s 0.7s var(--ease-out) both;
}
.hero__tag::before, .hero__tag::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--hot); }
.hero__tag::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.hero__tag::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.tag__top { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.tag__top b { font-family: var(--sans); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; font-variation-settings: "wdth" 110; color: var(--fg); }
.tag__top span { margin-inline-start: auto; padding: 2px 7px; border: 1px solid var(--hot); border-radius: 999px; color: var(--hot); font-size: 9.5px; text-transform: uppercase; }
.tag__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 10px var(--hot); }
.tag__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--hot); animation: ping 1.8s var(--ease-out) infinite; }
.tag__rows { margin: 0; }
.tag__rows div { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--rule); }
.tag__rows dt { color: var(--muted); text-transform: uppercase; font-size: 9.5px; padding-top: 1px; }
.tag__rows dd { margin: 0; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag__rows dd b { color: var(--hot); }
.tag__bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 12px; }
.tag__bars i { flex: 1; height: 100%; background: var(--hot); opacity: 0.85; transform-origin: bottom; transform: scaleY(var(--h)); animation: meter 1.3s var(--d) ease-in-out infinite alternate; }
@keyframes meter { from { transform: scaleY(0.12); opacity: 0.35; } to { transform: scaleY(var(--h)); opacity: 0.95; } }

@keyframes slideUp { from { transform: translateY(105%); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes badgeIn { from { transform: scale(0) rotate(-90deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes bob { 50% { transform: translateY(4px); } }

/* ---------- Manifesto ---------- */
.manifesto { padding: 26vh var(--gutter) 30vh; display: grid; grid-template-columns: minmax(140px, 1fr) 4fr; gap: 24px; }
.manifesto__text { font-size: clamp(30px, 4.5vw, 74px); line-height: 1.04; font-weight: 600; letter-spacing: -0.03em; font-variation-settings: "wdth" 92; }
.manifesto__text em { font-style: normal; color: var(--hot); }
.w { opacity: 0.12; transition: opacity 0.35s; }
.w.is-lit { opacity: 1; }

/* ---------- Workflow ---------- */
.flow { position: relative; height: 420vh; }
.flow__anchors { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); pointer-events: none; }
.flow__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr auto; padding: 92px var(--gutter) 28px; column-gap: 40px; }
.flow__head { grid-column: 1; }
.flow__head h2 { margin-top: 16px; font-size: clamp(36px, 5vw, 80px); }
.flow__steps { grid-column: 1; position: relative; align-self: center; min-height: 330px; margin-top: 24px; }
.step { position: absolute; inset: 0; opacity: 0; transform: translateY(40px); pointer-events: none; transition: opacity 0.5s, transform 0.8s var(--ease-out); }
.step.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.1s; }
.step__n { display: block; font-size: clamp(64px, 8vw, 132px); font-weight: 800; line-height: 0.85; letter-spacing: -0.04em; font-variation-settings: "wdth" 62; color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.step__n small { font-size: 0.3em; -webkit-text-stroke: 0; color: var(--hot); vertical-align: top; margin-inline-start: 6px; letter-spacing: 0; }
.step h3 { font-size: clamp(26px, 3vw, 44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1; margin: 18px 0 14px; }
.step p { max-width: 46ch; color: var(--fg-2); font-size: clamp(16px, 1.25vw, 19px); }
.step .tags { margin-top: 20px; }
.flow__fig { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; }
.flow__figlabel { font-family: var(--mono); font-size: 11px; text-transform: uppercase; font-variation-settings: "wdth" 87; }
.flow__figlabel b { color: var(--hot); font-weight: 700; }
.flow__bar { grid-column: 1 / -1; grid-row: 3; align-self: end; height: 2px; background: var(--rule); margin-bottom: 30px; }
.flow__bar span { display: block; height: 100%; background: var(--hot); box-shadow: 0 0 12px var(--hot); transform-origin: left; transform: scaleX(0); }

/* ---------- Agent team (3D) ---------- */
.agents { position: relative; height: 330vh; z-index: 2; }
.agents__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--bg); }
.agents__stage { position: absolute; inset: 0; }
.agents__stage canvas { display: block; width: 100% !important; height: 100% !important; }
.agents__head { position: absolute; top: 92px; left: var(--gutter); pointer-events: none; }
.agents__head h2 { margin-top: 16px; font-size: clamp(38px, 5vw, 84px); }
.agents__caps { position: absolute; left: var(--gutter); bottom: 34px; width: min(440px, calc(100% - var(--gutter) * 2)); min-height: 90px; }
.agents__cap { position: absolute; left: 0; bottom: 0; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.35; color: var(--fg-2); opacity: 0; transform: translateY(16px); transition: opacity 0.5s, transform 0.7s var(--ease-out); }
.agents__cap b { display: block; font-family: var(--mono); font-size: 11px; color: var(--hot); margin-bottom: 8px; font-weight: 400; }
.agents__cap.is-active { opacity: 1; transform: none; }
.agents__key { position: absolute; right: var(--gutter); bottom: 34px; display: flex; gap: 18px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; font-variation-settings: "wdth" 87; color: var(--fg-2); }
.agents__key li { display: inline-flex; align-items: center; gap: 8px; }
.agents__key i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.agents__labels { position: absolute; inset: 0; pointer-events: none; }
.agent-label {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 2px; padding-left: 12px; margin-top: -64px;
  border-left: 1px solid var(--rule-2); font-family: var(--mono); font-variation-settings: "wdth" 87; text-transform: uppercase;
  opacity: 0; transition: opacity 0.4s; will-change: transform; white-space: nowrap;
}
.agents--live .agent-label { opacity: 1; }
.agent-label b { font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; font-variation-settings: "wdth" 100; }
.agent-label span { font-size: 10px; color: var(--muted); }
.agent-label__status { font-style: normal; font-size: 10.5px; color: var(--hot); text-transform: none; }
.agent-label__status::before { content: "● "; animation: blink 1.2s steps(2) infinite; }
.agent-label--me b { color: var(--hot); font-size: 20px; }
.agent-label--pm b { font-size: 15px; }
.agent-label--chip { margin-top: -26px; padding: 3px 7px; border: 1px solid var(--rule-2); border-radius: 999px; background: rgba(11, 11, 12, 0.6); transition: opacity 0.4s, border-color 0.3s, background 0.3s; }
.agent-label--chip b { font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.04em; }
.agent-label--chip.is-hot { border-color: var(--hot); background: var(--hot); color: var(--on-hot); }
.agent-label--ghost b { font-size: 14px; color: #8fa6ff; }
.agents__hud { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--fg-2); }
.agents__hud b { font-family: var(--sans); font-size: 44px; font-weight: 800; color: var(--hot); letter-spacing: -0.04em; line-height: 1; }
.agents__roles { margin-top: 10px; max-width: 34ch; font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
.ft__where a:hover { color: var(--hot); }
.agents--fallback .agents__labels, .agents--fallback .agents__key { display: none; }
.agents__fallback { position: absolute; left: var(--gutter); top: 50%; max-width: 46ch; color: var(--fg-2); }

/* ---------- Toolbelt ---------- */
.tools { position: relative; }
.tools__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 44px; padding: 80px 0 40px; }
.tools__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--gutter); }
.tools__head .label { order: 2; }
.tools__track { display: flex; padding-inline-start: var(--gutter); will-change: transform; }
.tool { flex: none; width: clamp(300px, 29vw, 430px); min-height: min(50vh, 440px); display: flex; flex-direction: column; gap: 16px; padding: 26px 28px 28px; border-inline-start: 1px solid var(--rule-2); background: var(--panel); backdrop-filter: blur(3px); transition: background 0.4s; }
.tool:last-child { border-inline-end: 1px solid var(--rule-2); }
.tool:hover { background: var(--bg-3); }
.tool__n { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tool h3 { font-size: clamp(32px, 3.2vw, 52px); font-weight: 800; line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase; font-variation-settings: "wdth" 80; margin-top: auto; }
.tool p { color: var(--fg-2); font-size: 16px; }
.tool--hot { background: var(--hot); color: var(--on-hot); }
.tool--ml { background: linear-gradient(160deg, color-mix(in srgb, var(--hot) 16%, var(--panel)), var(--panel) 65%); }
.tool--ml h3 { color: var(--fg); }
.tool--cost { background: linear-gradient(160deg, color-mix(in srgb, #3ddc84 14%, var(--panel)), var(--panel) 65%); }
.tool--hot:hover { background: #5b82ff; }
.tool--hot .tool__n, .tool--hot p { color: var(--on-hot); }
.tool--hot .tags li { border-color: rgba(11, 11, 12, 0.4); color: var(--on-hot); }

/* ---------- Services ---------- */
.services { padding: 16vh var(--gutter) 6vh; }
.services__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 7vh; }
.services__head .label { order: 2; }
.services__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.service { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 34px 32px 36px 0; border-bottom: 1px solid var(--rule-2); overflow: hidden; }
.service:nth-child(even) { padding-inline-start: 32px; padding-inline-end: 0; border-inline-start: 1px solid var(--rule-2); }
.service::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px circle at 20% 120%, rgba(69, 112, 255, 0.22), transparent 60%); opacity: 0; transition: opacity 0.5s; }
.service:hover::before { opacity: 1; }
.service__n { font-family: var(--mono); font-size: 11px; color: var(--hot); }
.service h3 { font-size: clamp(30px, 3.4vw, 54px); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; text-transform: uppercase; font-variation-settings: "wdth" 84; transition: font-variation-settings 0.6s var(--ease-out); }
.service:hover h3 { font-variation-settings: "wdth" 110; }
.service p { max-width: 44ch; color: var(--fg-2); }

/* ---------- Marquee ---------- */
.marquee { padding: 14vh 0; overflow: hidden; }
.marquee__row { white-space: nowrap; font-size: clamp(64px, 11vw, 190px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; font-variation-settings: "wdth" 115; will-change: transform; }
.marquee__row span { display: inline-block; padding-inline-start: 4vw; }
.marquee__row i { font-style: normal; color: var(--hot); -webkit-text-stroke: 0; display: inline-block; font-size: 0.7em; vertical-align: 0.12em; }
.marquee__row--outline { color: transparent; -webkit-text-stroke: 1.5px var(--fg); margin-top: -0.06em; transform: translateX(-30%); }
.marquee__row:first-child { transform: translateX(-10%); }

/* ---------- Work index ---------- */
.work { padding: 10vh var(--gutter) 8vh; }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 7vh; }
.work__head .label { order: 2; }
.work__list { border-bottom: 1px solid var(--rule-2); }
.row { position: relative; isolation: isolate; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 90px 48px; align-items: center; gap: 20px; padding: clamp(14px, 2vw, 26px) 0; border-top: 1px solid var(--rule-2); transition: color 0.3s; }
.row::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--hot); transform: scaleY(0); transform-origin: bottom; transition: transform 0.55s var(--ease); }
.row:hover, .row:focus-visible { color: var(--on-hot); }
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); transform-origin: top; }
.row__n, .row__kind, .row__year { font-family: var(--mono); font-size: 11px; text-transform: uppercase; font-variation-settings: "wdth" 87; }
.row__name { font-size: clamp(32px, 5.4vw, 88px); font-weight: 750; line-height: 0.95; letter-spacing: -0.035em; text-transform: uppercase; font-variation-settings: "wdth" 80; transition: font-variation-settings 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.row:hover .row__name { font-variation-settings: "wdth" 112; transform: translateX(12px); }
.row__year { text-align: end; }
.row__arrow { font-size: 28px; text-align: end; transition: transform 0.5s var(--ease-out); }
.row:hover .row__arrow { transform: translateX(6px) rotate(-45deg); }

.preview { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; }
.preview__inner { width: clamp(260px, 24vw, 380px); aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--fg); background: var(--bg-2); transform: translate(-50%, -115%) scale(0.4); opacity: 0; transition: transform 0.5s var(--ease-out), opacity 0.3s; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.preview.is-on .preview__inner { transform: translate(-50%, -115%) scale(1); opacity: 1; }
.preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- Experience: git graph ---------- */
.git { padding: 12vh var(--gutter) 6vh; }
.git__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 24px; margin-bottom: 8vh; }
.git__head .label { grid-column: 2; grid-row: 1; }
.git__head h2 { grid-column: 1; grid-row: 1 / 3; font-variation-settings: "wdth" 70; }
.git__head h2 em { font-family: var(--mono); font-size: 0.55em; font-weight: 400; letter-spacing: -0.04em; text-transform: none; font-variation-settings: "wdth" 80; }
.git__intro { grid-column: 2; max-width: 34ch; color: var(--fg-2); font-size: 15px; }
.git__graph { position: relative; --lanes: 132px; }
.git__svg { position: absolute; left: 0; top: 0; width: var(--lanes); height: 100%; overflow: visible; }
.git__svg path { fill: none; stroke-width: 2; stroke-linecap: round; }
.git__svg .p-main { stroke: var(--fg); }
.git__svg .p-done { stroke: var(--done); }
.git__svg .p-live { stroke: var(--hot); filter: drop-shadow(0 0 6px rgba(69, 112, 255, 0.8)); }
.git__svg .track { stroke: var(--track); }
.git__svg circle { fill: var(--bg); stroke-width: 2; transition: fill 0.3s, r 0.3s; }
.git__svg circle.n-main { stroke: var(--fg); }
.git__svg circle.n-done { stroke: var(--done-node); }
.git__svg circle.n-live { stroke: var(--hot); }
.git__svg circle.is-on.n-main { fill: var(--fg); }
.git__svg circle.is-on.n-done { fill: var(--done-node); }
.git__svg circle.is-on.n-live { fill: var(--hot); }
.git__svg .head-pulse { fill: none; stroke: var(--hot); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: headPulse 1.8s var(--ease-out) infinite; }
.git__svg .playhead { fill: var(--hot); filter: drop-shadow(0 0 8px var(--hot)); }
.git__svg .arrow { fill: var(--hot); }
@keyframes headPulse { from { transform: scale(1); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.git__list { position: relative; }
.git__row { display: grid; grid-template-columns: var(--lanes) 120px minmax(0, 1fr); align-items: start; padding: 22px 0; min-height: 96px; opacity: 0.25; transition: opacity 0.6s; }
.git__row.is-on { opacity: 1; }
.git__row--small { min-height: 64px; padding: 12px 0; }
.git__date { grid-column: 2; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; color: var(--fg-2); padding-top: 4px; font-variation-settings: "wdth" 87; }
.git__card { grid-column: 3; max-width: 760px; transform: translateX(-16px); transition: transform 0.8s var(--ease-out); }
.git__row.is-on .git__card { transform: none; }
.git__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.git__br { padding: 2px 8px; border: 1px solid var(--rule-2); border-radius: 999px; color: var(--fg-2); text-transform: lowercase; }
.git__br--live { border-color: var(--hot); color: var(--hot); }
.git__card h3 { font-size: clamp(22px, 2.5vw, 38px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.git__row--small h3 { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--fg-2); font-variation-settings: "wdth" 87; }
.git__sub { margin-top: 8px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--hot); font-variation-settings: "wdth" 87; }
.git__note { margin-top: 12px; color: var(--fg-2); max-width: 62ch; }
.git__row--head h3 { color: var(--hot); }

/* ---------- Contact ---------- */
.contact { position: relative; min-height: 100svh; padding: 16vh var(--gutter) 10vh; display: flex; flex-direction: column; justify-content: center; }
.contact__big { display: flex; flex-direction: column; margin: 3vh 0 4vh; font-size: clamp(96px, 20vw, 340px); line-height: 0.8; letter-spacing: -0.05em; font-weight: 850; font-variation-settings: "wdth" 125; }
.contact__big span:last-child { align-self: flex-end; }
.contact__big em { color: var(--hot); }
.contact__lead { max-width: 44ch; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.35; color: var(--fg-2); }
.contact__email { position: relative; display: inline-block; align-self: flex-start; overflow: hidden; margin: 5vh 0 5vh; font-size: clamp(26px, 4.2vw, 68px); font-weight: 700; letter-spacing: -0.03em; font-variation-settings: "wdth" 90; border-bottom: 3px solid var(--fg); }
.contact__email span { display: block; transition: transform 0.5s var(--ease), color 0.3s; }
.contact__ok { position: absolute; inset: 0; color: var(--hot); transform: translateY(100%); }
.contact__email:hover .contact__addr { color: var(--hot); }
.contact__email.is-copied .contact__addr { transform: translateY(-100%); }
.contact__email.is-copied .contact__ok { transform: none; }

/* Elsewhere: giant scramble rows */
.links__label { margin-bottom: 18px; }
.links { border-top: 1px solid var(--rule-2); }
.link { position: relative; isolation: isolate; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 56px; align-items: center; gap: 20px; padding: clamp(10px, 1.6vw, 20px) 0; border-bottom: 1px solid var(--rule-2); overflow: hidden; transition: color 0.35s; }
.link::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--fg); transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease); }
.link:hover, .link:focus-visible { color: var(--bg); }
.link:hover::before, .link:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.link__n, .link__handle { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; font-variation-settings: "wdth" 87; }
.link__handle { color: var(--fg-2); transition: color 0.35s, transform 0.6s var(--ease-out); }
.link:hover .link__handle { color: var(--bg); transform: translateX(-10px); }
.link__name { font-size: clamp(40px, 7.5vw, 124px); font-weight: 850; line-height: 0.95; letter-spacing: -0.045em; text-transform: uppercase; font-variation-settings: "wdth" 75; transition: font-variation-settings 0.7s var(--ease-out); white-space: nowrap; }
.link:hover .link__name { font-variation-settings: "wdth" 105; }
.link__arrow { justify-self: end; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid currentColor; font-size: 22px; transition: transform 0.6s var(--ease-out), background 0.3s, color 0.3s; }
.link:hover .link__arrow { transform: rotate(-45deg); background: var(--hot); border-color: var(--hot); color: var(--on-hot); }
.link[download]:hover .link__arrow { transform: translateY(4px); }

.lpv { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; }
.lpv__card {
  position: absolute; left: 0; top: 0; width: 290px; padding: 18px; border: 1px solid var(--rule-2); background: var(--bg-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform: translate(24px, -50%) scale(0.6) rotate(-6deg); opacity: 0;
  transition: transform 0.55s var(--ease-out), opacity 0.3s;
}
.lpv__card.is-on { transform: translate(24px, -50%) scale(1) rotate(-3deg); opacity: 1; }
.lpv__top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.lpv__top b { color: var(--fg); font-weight: 700; }
.lpv__name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.lpv__line { color: var(--fg-2); font-size: 14px; margin-top: 4px; }
.lpv__small { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 10px; display: flex; align-items: center; gap: 4px; }
.lpv__pill { display: inline-block; margin-top: 14px; padding: 5px 10px; border-radius: 999px; background: var(--hot); color: var(--on-hot); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.lpv__row { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 10px; color: var(--fg-2); }
.lpv__card--linkedin { padding-top: 0; overflow: hidden; }
.lpv__banner { height: 64px; margin: 0 -18px; background: linear-gradient(120deg, var(--hot), #10236e 60%, var(--bg-3)); }
.lpv__avatar { width: 64px; height: 64px; margin: -32px 0 10px; border-radius: 50%; border: 3px solid var(--bg-2); background: var(--fg); color: var(--bg); display: grid; place-items: center; font-weight: 800; font-size: 20px; }
.lpv__card--github { width: 330px; }
.lpv__grid { display: grid; grid-template-columns: repeat(26, 1fr); grid-auto-rows: 9px; gap: 2px; }
.lpv__grid i, .lpv__small i { display: block; border-radius: 2px; background: var(--bg-3); }
.lpv__small i { width: 9px; height: 9px; }
.l1 { background: rgba(69, 112, 255, 0.3) !important; } .l2 { background: rgba(69, 112, 255, 0.55) !important; } .l3 { background: rgba(69, 112, 255, 0.8) !important; } .l4 { background: var(--hot) !important; }
.lpv__card--cv { width: 230px; aspect-ratio: 1 / 1.414; background: var(--fg); color: var(--bg); border: 0; padding: 22px 20px; }
.cv__name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.cv__role { font-size: 10px; color: #555; margin-bottom: 8px; }
.cv__h { margin: 10px 0 5px; font-size: 9px; font-weight: 700; color: var(--hot); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #ccc; padding-bottom: 2px; }
.cv__l { display: block; height: 4px; width: var(--w); background: #c9c4bb; margin: 4px 0; border-radius: 2px; }
.cv__stamp { position: absolute; right: 14px; bottom: 14px; padding: 6px 10px; background: var(--hot); color: var(--on-hot); font-family: var(--mono); font-size: 10px; transform: rotate(-8deg); }

/* ---------- Footer ---------- */
.ft { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 28px; border-top: 1px solid var(--rule-2); margin: 0 var(--gutter); font-family: var(--mono); font-size: 11px; text-transform: uppercase; font-variation-settings: "wdth" 87; color: var(--fg-2); }

/* ==========================================================================
   Project pages
   ========================================================================== */
.pj-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: 96px var(--gutter) 28px; }
.pj-nav { display: flex; justify-content: space-between; align-items: center; }
.pj-back { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; font-variation-settings: "wdth" 87; display: inline-flex; gap: 10px; align-items: center; }
.pj-back span { transition: transform 0.4s var(--ease-out); display: inline-block; }
.pj-back:hover span { transform: translateX(-6px); }
.pj-kind { margin-top: auto; color: var(--hot); }
.pj-title { margin: 18px 0 26px; max-width: 12ch; font-size: clamp(58px, 11vw, 196px); font-weight: 850; line-height: 0.82; letter-spacing: -0.045em; text-transform: uppercase; font-variation-settings: "wdth" 100; }
.pj-title .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.04em; }
.pj-title .ch { display: inline-block; animation: slideUp 1s var(--ease-out) both; }
.pj-tagline { max-width: 34ch; font-size: clamp(20px, 2vw, 30px); line-height: 1.22; letter-spacing: -0.015em; color: var(--fg-2); animation: rise 1s 0.4s var(--ease-out) both; }
.pj-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6vh; border-top: 1px solid var(--rule-2); }
.pj-meta div { padding: 14px 16px 0 0; }
.pj-meta div + div { padding-inline-start: 16px; border-inline-start: 1px solid var(--rule); }
.pj-meta dt { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; color: var(--muted); font-variation-settings: "wdth" 87; }
.pj-meta dd { margin: 6px 0 0; font-size: 16px; font-weight: 500; }

.pj-cover { padding: 0 var(--gutter); }
.pj-cover figure { margin: 0; border: 1px solid var(--rule-2); overflow: hidden; background: var(--bg-2); aspect-ratio: 16 / 9; }
.pj-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform: scale(1.12); transition: transform 1.6s var(--ease-out); }
.pj-cover.is-in img { transform: scale(1); }

/* ---------- Portfolio page ---------- */
.work__all { display: inline-block; margin-top: 28px; }
.wfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.wf { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 18px; border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; color: var(--fg-2); cursor: pointer;
  font: 500 15px/1 var(--sans); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.wf sup { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.wf:hover { border-color: var(--fg); color: var(--fg); }
.wf.is-on { background: var(--hot); border-color: var(--hot); color: var(--on-hot); }
.wf.is-on sup { color: var(--on-hot); opacity: 0.75; }
.wgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); padding: 7vh var(--gutter) 14vh; }
.wcard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--rule-2); border-radius: 16px; overflow: hidden; background: var(--bg-2);
  transition: border-color 0.4s, transform 0.5s var(--ease-out), box-shadow 0.5s; }
.wcard:hover { border-color: color-mix(in srgb, var(--hot) 55%, transparent); transform: translateY(-6px); box-shadow: 0 40px 90px -45px color-mix(in srgb, var(--hot) 55%, transparent); }
.wcard--wide { grid-column: 1 / -1; flex-direction: row; }
.wgrid.is-filtered .wcard--wide { grid-column: auto; flex-direction: column; }
.wcard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0b0c; border-bottom: 1px solid var(--rule); }
.wcard--wide .wcard__media { flex: 1.35; aspect-ratio: auto; min-height: 420px; border-bottom: 0; border-inline-end: 1px solid var(--rule); }
.wgrid.is-filtered .wcard--wide .wcard__media { flex: none; aspect-ratio: 16 / 10; min-height: 0; border-inline-end: 0; border-bottom: 1px solid var(--rule); }
.wcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: left bottom; transition: transform 1.2s var(--ease-out), filter 0.6s; filter: saturate(0.85); }
.wcard:hover .wcard__media img { filter: none; }
.wgrid:not(.will-enter) .wcard:hover .wcard__media img { transform: scale(1.045); }
.wcard__badges { position: absolute; top: 14px; inset-inline-start: 14px; display: flex; gap: 6px; }
.wcard__badge { padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, #0b0b0c 70%, transparent); backdrop-filter: blur(8px); color: #ece8e1;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.wcard__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 32px); flex: 1; }
.wcard--wide .wcard__body { flex: 1; justify-content: center; }
.wcard__meta { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); }
.wcard__meta span:first-child { color: var(--hot); }
.wcard__name { font-size: clamp(30px, 3.4vw, 54px); font-weight: 850; line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; font-variation-settings: "wdth" 82; transition: font-variation-settings 0.6s var(--ease-out); }
.wcard:hover .wcard__name { font-variation-settings: "wdth" 100; }
.wcard__tag { color: var(--fg-2); max-width: 52ch; }
.wcard__tech { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wcard__tech span { padding: 4px 10px; border: 1px solid var(--rule-2); border-radius: 999px; font-family: var(--mono); font-size: 10.5px; color: var(--fg-2); }
.wcard__go { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--hot); }
.wcard__go span { display: inline-block; transition: transform 0.4s var(--ease-out); }
.wcard:hover .wcard__go span { transform: translateX(6px); }
[dir="rtl"] .wcard:hover .wcard__go span { transform: translateX(-6px); }
.wcard[hidden] { display: none; }
/* Bento (thumbnail-only cards, all 16:10) */
.wgrid .wcard { grid-column: span 6; }
.wgrid:not(.is-filtered) .wcard[data-slot="0"] { grid-column: 1 / 9; grid-row: 1 / 3; }
.wgrid:not(.is-filtered) .wcard[data-slot="1"] { grid-column: 9 / 13; grid-row: 1; }
.wgrid:not(.is-filtered) .wcard[data-slot="2"] { grid-column: 9 / 13; grid-row: 2; }
.wgrid:not(.is-filtered) .wcard[data-slot="3"] { grid-column: 1 / 5; grid-row: 3; }
.wgrid:not(.is-filtered) .wcard[data-slot="4"] { grid-column: 1 / 5; grid-row: 4; }
.wgrid:not(.is-filtered) .wcard[data-slot="5"] { grid-column: 5 / 13; grid-row: 3 / 5; }
.wgrid:not(.is-filtered) .wcard[data-slot="6"] { grid-column: 1 / 5; grid-row: 5; }
.wgrid:not(.is-filtered) .wcard[data-slot="7"] { grid-column: 5 / 9; grid-row: 5; }
.wgrid:not(.is-filtered) .wcard[data-slot="8"] { grid-column: 9 / 13; grid-row: 5; }
.wgrid .wcard .wcard__media { flex: 1; aspect-ratio: 16 / 10; height: auto; min-height: 0; border: 0; }
.wgrid:not(.is-filtered) .wcard[data-slot="0"] .wcard__media, .wgrid:not(.is-filtered) .wcard[data-slot="5"] .wcard__media { aspect-ratio: auto; height: 100%; }
.wcard__media img { object-position: left bottom; }
.wcard__go { position: absolute; inset-inline-end: 18px; bottom: 18px; z-index: 2; margin: 0; padding: 9px 14px; border-radius: 999px; background: var(--hot); color: var(--on-hot, #fff);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.45s var(--ease-out); }
.wcard:hover .wcard__go, .wcard:focus-visible .wcard__go { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .wgrid .wcard, .wgrid:not(.is-filtered) .wcard[data-slot] { grid-column: 1 / -1; grid-row: auto; }
  .wgrid:not(.is-filtered) .wcard[data-slot] .wcard__media { aspect-ratio: 16 / 10; height: auto; }
  .wcard__go { opacity: 1; transform: none; }
}
/* Big outlined index on the image */
.wcard__num { position: absolute; top: 6px; inset-inline-end: 18px; z-index: 2; font-weight: 900; font-size: clamp(64px, 7vw, 120px); line-height: 1; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(236, 232, 225, 0.32); font-variation-settings: "wdth" 80; transition: -webkit-text-stroke-color 0.4s, transform 0.6s var(--ease-out); pointer-events: none; }
.wcard:hover .wcard__num { -webkit-text-stroke-color: var(--hot); transform: translateY(-4px); }
/* Tilt + glare after the entrance has played */
.wcard.is-done { animation: none !important; opacity: 1 !important; clip-path: none !important;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)) !important; transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s; }
.wcard.is-done:hover { --lift: -6px; transition: transform 0.12s linear, border-color 0.4s, box-shadow 0.5s; }
.wcard::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.09), transparent 45%); }
.wcard:hover::after { opacity: 1; }
@media (max-width: 900px) {
  .wcard, .wcard--l, .wcard--s, .wcard--t, .wgrid.is-filtered .wcard { grid-column: 1 / -1; }
  .wcard--l .wcard__media, .wcard--s .wcard__media { height: auto; aspect-ratio: 16 / 10; }
}

/* Scroll entrance */
.wgrid { perspective: 1400px; }
.wgrid.will-enter .wcard { opacity: 0; transform: translateY(90px) rotateX(14deg) scale(0.94); transform-origin: 50% 100%; clip-path: inset(18% 0 0 0 round 16px); }
.wgrid.will-enter .wcard.is-in { animation: wcardIn 1.15s cubic-bezier(0.16, 1, 0.3, 1) var(--in, 0ms) both; }
@keyframes wcardIn {
  0% { opacity: 0; transform: translateY(90px) rotateX(14deg) scale(0.94); clip-path: inset(18% 0 0 0 round 16px); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 16px); } }
.wgrid.will-enter .wcard .wcard__media img { transform: scale(1.22); transform-origin: 30% 100%; }
.wgrid.will-enter .wcard.is-in .wcard__media img { transform: scale(1); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--in, 0ms) + 120ms), filter 0.6s; }
.wgrid.will-enter .wcard.is-in:hover .wcard__media img { transform: scale(1.045); transition: transform 0.9s var(--ease-out), filter 0.6s; }
.wgrid.will-enter .wcard__body > * { opacity: 0; transform: translateY(18px); }
.wgrid.will-enter .wcard.is-in .wcard__body > * { animation: wtextIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.wgrid.will-enter .wcard.is-in .wcard__body > :nth-child(1) { animation-delay: calc(var(--in, 0ms) + 380ms); }
.wgrid.will-enter .wcard.is-in .wcard__body > :nth-child(2) { animation-delay: calc(var(--in, 0ms) + 460ms); }
.wgrid.will-enter .wcard.is-in .wcard__body > :nth-child(3) { animation-delay: calc(var(--in, 0ms) + 540ms); }
.wgrid.will-enter .wcard.is-in .wcard__body > :nth-child(4) { animation-delay: calc(var(--in, 0ms) + 620ms); }
.wgrid.will-enter .wcard.is-in .wcard__body > :nth-child(5) { animation-delay: calc(var(--in, 0ms) + 700ms); }
@keyframes wtextIn { to { opacity: 1; transform: none; } }
.wgrid.will-enter .wcard.is-in .wcard__tech span { animation: wchipIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.wgrid.will-enter .wcard.is-in .wcard__tech span:nth-child(1) { animation-delay: calc(var(--in, 0ms) + 640ms); }
.wgrid.will-enter .wcard.is-in .wcard__tech span:nth-child(2) { animation-delay: calc(var(--in, 0ms) + 690ms); }
.wgrid.will-enter .wcard.is-in .wcard__tech span:nth-child(3) { animation-delay: calc(var(--in, 0ms) + 740ms); }
.wgrid.will-enter .wcard.is-in .wcard__tech span:nth-child(4) { animation-delay: calc(var(--in, 0ms) + 790ms); }
@keyframes wchipIn { from { opacity: 0; transform: scale(0.7); } }
/* After the entrance, hover lift still works */
.wgrid.will-enter .wcard.is-in:hover { transform: translateY(-6px); }
.wcard.is-pop { animation: wpop 0.6s var(--ease-out) var(--d, 0ms) both !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) { .wgrid.will-enter .wcard, .wgrid.will-enter .wcard__body > * { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; } }
.wcard.is-pop { animation: wpop 0.6s var(--ease-out) var(--d, 0ms) both; }
@keyframes wpop { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
@media (max-width: 900px) {
  .wgrid { grid-template-columns: 1fr; }
  .wcard--wide { flex-direction: column; }
  .wcard--wide .wcard__media { flex: none; aspect-ratio: 16 / 10; min-height: 0; border-inline-end: 0; border-bottom: 1px solid var(--rule); }
}

/* Project slideshow */
.show { --dir: 1; --gx: 50%; --gy: 30%; position: relative; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); outline: none; perspective: 1600px; }
.show::before { content: ""; position: absolute; inset: 6% 10% 22%; z-index: -1; border-radius: 40px; pointer-events: none;
  background: radial-gradient(60% 60% at var(--gx) var(--gy), color-mix(in srgb, var(--hot) 45%, transparent), transparent 70%); filter: blur(60px); opacity: 0.55; transition: opacity 0.6s; }
.show:hover::before { opacity: 0.85; }
.show__window { position: relative; border: 1px solid var(--rule-2); border-radius: 14px; overflow: hidden; background: var(--bg-2);
  box-shadow: 0 50px 120px -45px rgba(0, 0, 0, 0.85), 0 0 0 1px color-mix(in srgb, var(--hot) 12%, transparent);
  transform-style: preserve-3d; transition: transform 0.6s var(--ease-out); will-change: transform; }
.show__chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--bg-3); }
.show__chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-2); }
.show__chrome i:nth-child(1) { background: #ff5f57; } .show__chrome i:nth-child(2) { background: #febc2e; } .show__chrome i:nth-child(3) { background: #28c840; }
.show__url { margin-inline-start: 14px; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 6%, transparent); font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.show__count { margin-inline-start: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.show__count b { color: var(--fg); font-weight: 500; }
.show__bar { height: 2px; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.show__bar span { display: block; height: 100%; background: var(--hot); box-shadow: 0 0 10px var(--hot); transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .show__bar span { transform-origin: right; }
.show.is-ticking .show__bar span { animation: showBar var(--dur, 5s) linear forwards; }
.show.is-paused .show__bar span, .show.is-paused .show__thumb.is-on .show__fill { animation-play-state: paused; }
@keyframes showBar { to { transform: scaleX(1); } }
.show__stage { position: relative; display: grid; background: #0b0b0c; touch-action: pan-y; overflow: hidden; }
.show__slide { grid-area: 1 / 1; margin: 0; display: grid; place-items: center; visibility: hidden; z-index: 0; }
.show__slide.is-on { visibility: visible; z-index: 2; animation: showIn 0.9s var(--ease-out) both; }
.show__slide.is-out { visibility: visible; z-index: 1; animation: showOut 0.9s var(--ease-out) both; }
@keyframes showIn {
  from { clip-path: polygon(calc(50% + var(--dir) * 70%) -20%, calc(50% + var(--dir) * 130%) -20%, calc(50% + var(--dir) * 110%) 120%, calc(50% + var(--dir) * 50%) 120%); transform: scale(1.06); filter: brightness(1.4); }
  60% { filter: brightness(1.1); }
  to { clip-path: polygon(-30% -20%, 130% -20%, 130% 120%, -30% 120%); transform: scale(1); filter: none; } }
@keyframes showOut { to { transform: scale(0.96) translateX(calc(var(--dir) * -3%)); filter: brightness(0.4); } }
.show__slide img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.show__arrow { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; border: 1px solid var(--rule-2); border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 65%, transparent); backdrop-filter: blur(10px); color: var(--fg); font-size: 18px; cursor: pointer;
  opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.3s var(--ease-out), background 0.3s, color 0.3s; }
.show__arrow--prev { inset-inline-start: 16px; } .show__arrow--next { inset-inline-end: 16px; }
.show:hover .show__arrow, .show:focus-within .show__arrow { opacity: 1; transform: scale(1); }
.show__arrow:hover { background: var(--hot); border-color: var(--hot); color: var(--on-hot); }
[dir="rtl"] .show__arrow { scale: -1 1; }
.show__caption { min-height: 1.6em; margin-top: 16px; text-transform: none; font-size: 13.5px; color: var(--fg-2); }
.show__caption.is-in { animation: capIn 0.6s var(--ease-out) both; }
@keyframes capIn { from { opacity: 0; transform: translateY(10px); } }
.show__thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; }
.show__thumb { position: relative; flex: none; width: 132px; aspect-ratio: 16 / 10; padding: 0; border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; background: #0b0b0c;
  cursor: pointer; opacity: 0.45; filter: grayscale(0.6); transition: opacity 0.35s, filter 0.35s, transform 0.35s var(--ease-out), border-color 0.35s; }
.show__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.show__thumb:hover { opacity: 0.85; filter: none; transform: translateY(-2px); }
.show__thumb.is-on { opacity: 1; filter: none; border-color: color-mix(in srgb, var(--hot) 60%, transparent); transform: translateY(-3px); }
.show__fill { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hot); transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .show__fill { transform-origin: right; }
.show.is-ticking .show__thumb.is-on .show__fill { animation: showBar var(--dur, 5s) linear forwards; }
@media (max-width: 800px) { .show__arrow { opacity: 1; transform: none; width: 38px; height: 38px; margin-top: -19px; } .show__thumb { width: 100px; } .show__url { display: none; } }
@media (prefers-reduced-motion: reduce) { .show__slide.is-on, .show__slide.is-out { animation: none; } .show__window { transform: none !important; } }

.pj-video { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin: 8vh var(--gutter) 0; }
.pj-video__frame { width: min(360px, 70vw); max-height: 80vh; border: 1px solid var(--rule-2); background: #000; overflow: hidden; border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); }
.pj-video__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.pj-video__caption { margin-top: 14px; max-width: 38ch; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; letter-spacing: -0.015em; }
@media (max-width: 800px) { .pj-video { grid-template-columns: 1fr; justify-items: center; } .pj-video__text { justify-self: stretch; } }
.pj-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10vh var(--gutter) 0; border-top: 1px solid var(--rule-2); }
.pj-stats div { padding: 22px 16px 0 0; }
.pj-stats div + div { padding-inline-start: 16px; border-inline-start: 1px solid var(--rule); }
.pj-stats b { display: block; font-size: clamp(56px, 8vw, 128px); font-weight: 850; line-height: 0.85; letter-spacing: -0.05em; font-variation-settings: "wdth" 70; }
.pj-stats span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; font-variation-settings: "wdth" 87; color: var(--fg-2); }

.pj-sec { display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 24px; margin: 0 var(--gutter); padding: 11vh 0; border-top: 1px solid var(--rule-2); }
.pj-sec:first-of-type { margin-top: 12vh; }
.pj-sec > .label { position: sticky; top: 96px; align-self: start; }
.pj-overview p { font-size: clamp(21px, 2.1vw, 32px); line-height: 1.28; letter-spacing: -0.015em; max-width: 34ch; }
.pj-overview p + p { margin-top: 1em; color: var(--fg-2); }
.pj-built li { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--rule); }
.pj-built li:first-child { border-top: 0; padding-top: 0; }
.pj-built .n { font-family: var(--mono); font-size: 11px; color: var(--hot); padding-top: 6px; }
.pj-built h3 { font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.pj-built p { color: var(--fg-2); }

.pj-ai { margin: 0 var(--gutter); padding: clamp(36px, 6vw, 80px); background: var(--hot); color: var(--on-hot); display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 24px; }
.pj-ai .label { color: var(--on-hot); }
.pj-ai h3 { font-size: clamp(34px, 4.6vw, 72px); font-weight: 800; line-height: 0.92; letter-spacing: -0.04em; text-transform: uppercase; font-variation-settings: "wdth" 85; margin-bottom: 34px; }
.pj-ai li { position: relative; padding: 16px 0 16px 40px; border-top: 1px solid rgba(11, 11, 12, 0.3); font-size: clamp(17px, 1.4vw, 21px); }
.pj-ai li::before { content: "✺"; position: absolute; left: 0; top: 14px; font-size: 20px; }

.pj-stack dl { margin: 0; }
.pj-stack div { display: grid; grid-template-columns: minmax(120px, 0.6fr) 2fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.pj-stack div:first-child { border-top: 0; padding-top: 0; }
.pj-stack dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); font-variation-settings: "wdth" 87; }
.pj-stack dd { margin: 0; font-size: clamp(22px, 2.6vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variation-settings: "wdth" 85; }
.chiplist { display: flex; flex-wrap: wrap; gap: 10px; }
.tech { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: 1px solid var(--rule-2); border-radius: 999px; background: color-mix(in srgb, var(--fg) 3%, transparent);
  font-family: var(--sans); font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; letter-spacing: -0.01em; font-variation-settings: "wdth" 100; transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out); }
.tech:hover { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 10%, transparent); transform: translateY(-2px); }
.tech__logo, .tech__glyph { flex: none; width: 20px; height: 20px; }
.tech__logo { background: var(--fg); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: background 0.3s; }
.tech__glyph { fill: currentColor; color: var(--fg-2); }
.tech:hover .tech__logo, .tech:hover .tech__glyph { background-color: var(--hot); color: var(--hot); }
.tech:hover .tech__glyph { background: none; }

.pj-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pj-gallery figure { margin: 0; }
.pj-gallery figure:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.pj-gallery img { width: 100%; border: 1px solid var(--rule-2); }
.pj-gallery figcaption { margin-top: 10px; }
.pj-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pj-links a { display: inline-block; padding: 12px 20px; border: 1px solid var(--rule-2); border-radius: 999px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.pj-links a:hover { background: var(--fg); color: var(--bg); }

.pj-next { position: relative; isolation: isolate; display: block; margin: 12vh var(--gutter) 0; padding: 7vh 0 8vh; border-top: 1px solid var(--rule-2); transition: color 0.4s; }
.pj-next::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--hot); transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--ease); }
.pj-next:hover { color: var(--on-hot); }
.pj-next:hover .label { color: var(--on-hot); }
.pj-next:hover::before { transform: scaleY(1); }
.pj-next__name { display: block; margin-top: 14px; font-size: clamp(54px, 10vw, 170px); font-weight: 850; line-height: 0.85; letter-spacing: -0.045em; text-transform: uppercase; font-variation-settings: "wdth" 80; transition: font-variation-settings 0.7s var(--ease-out); }
.pj-next:hover .pj-next__name { font-variation-settings: "wdth" 120; }


/* ==========================================================================
   Shared bits for contact, booking and legal pages
   ========================================================================== */
.ft__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ft__nav a:hover { color: var(--hot); }

/* Home contact CTAs */
.contact__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 10vh; }
.cta { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 6px 18px; align-items: center; padding: 26px 28px; border: 1px solid var(--rule-2); transition: color 0.4s, border-color 0.4s; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hot); transform: translateY(101%); transition: transform 0.55s var(--ease); }
.cta:hover { color: var(--on-hot); border-color: var(--hot); }
.cta:hover::before { transform: none; }
.cta__k { grid-row: 1 / 3; font-family: var(--mono); font-size: 11px; opacity: 0.7; }
.cta__t { font-size: clamp(26px, 2.8vw, 44px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; text-transform: uppercase; font-variation-settings: "wdth" 85; transition: font-variation-settings 0.6s var(--ease-out); }
.cta:hover .cta__t { font-variation-settings: "wdth" 110; }
.cta__d { grid-column: 2; font-family: var(--mono); font-size: 11px; text-transform: uppercase; opacity: 0.75; font-variation-settings: "wdth" 87; }
.cta__a { grid-column: 3; grid-row: 1 / 3; font-size: 30px; transition: transform 0.5s var(--ease-out); }
.cta:hover .cta__a { transform: translateX(6px) rotate(-45deg); }

/* Page hero */
.ph { padding: 132px var(--gutter) 9vh; border-bottom: 1px solid var(--rule-2); margin: 0 0 0; }
.ph__title { margin: 22px 0 26px; font-size: clamp(64px, 13vw, 220px); font-weight: 850; line-height: 0.82; letter-spacing: -0.05em; text-transform: uppercase; font-variation-settings: "wdth" 110; animation: rise 1s var(--ease-out) both; }
.ph__lead { max-width: 40ch; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.3; color: var(--fg-2); animation: rise 1s 0.2s var(--ease-out) both; }
.ph--small .ph__title { font-size: clamp(48px, 8vw, 132px); font-variation-settings: "wdth" 95; }

/* Contact form */
.cform { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 80px); padding: 8vh var(--gutter) 12vh; }
.cform__form { transition: opacity 0.5s; }
.cform__form.is-done { display: none; }
.cform__done p { font-size: clamp(28px, 3.4vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 28px; max-width: 18ch; }
.cf { margin: 0 0 44px; padding: 0; border: 0; min-width: 0; }
.cf legend { display: flex; align-items: baseline; gap: 14px; padding: 0; margin-bottom: 18px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.025em; }
.cf legend span { font-family: var(--mono); font-size: 11px; color: var(--hot); font-weight: 400; letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 11px 18px; border: 1px solid var(--rule-2); border-radius: 999px; font-size: 15px; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out); }
.chip:hover span { border-color: var(--fg); }
.chip input:checked + span { background: var(--hot); border-color: var(--hot); color: var(--on-hot); }
.chip input:focus-visible + span { outline: 2px solid var(--hot); outline-offset: 3px; }
.chip input:checked + span::before { content: "✓ "; }
.cform textarea, .field input {
  width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0; background: transparent; color: var(--fg);
  font: 400 clamp(18px, 1.6vw, 22px) / 1.4 var(--sans); outline: none; resize: vertical; transition: border-color 0.3s;
}
.cform textarea:focus, .field input:focus { border-bottom-color: var(--hot); }
.cform textarea::placeholder { color: var(--muted); }
.cf__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.field span { display: block; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; color: var(--muted); font-variation-settings: "wdth" 87; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf__consent { display: flex; gap: 12px; align-items: flex-start; max-width: 60ch; color: var(--fg-2); font-size: 14px; margin-bottom: 30px; cursor: pointer; }
.cf__consent input { margin-top: 3px; accent-color: var(--hot); width: 16px; height: 16px; flex: none; }
.cf__consent a, .cf__error a { text-decoration: underline; text-underline-offset: 3px; }
.cf__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cf__submit {
  display: inline-flex; align-items: center; gap: 14px; padding: 20px 30px; border: 0; border-radius: 999px; background: var(--hot); color: var(--on-hot); cursor: pointer;
  font: 800 clamp(18px, 1.6vw, 22px) / 1 var(--sans); text-transform: uppercase; letter-spacing: -0.01em; font-variation-settings: "wdth" 100;
  transition: transform 0.3s var(--ease-out), box-shadow 0.4s, font-variation-settings 0.5s var(--ease-out);
}
.cf__submit:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -12px var(--hot); font-variation-settings: "wdth" 120; }
.cf__submit:disabled { opacity: 0.6; cursor: wait; }
.cf__error { color: var(--hot); font-size: 15px; max-width: 46ch; }

/* Live ticket */
.ticket { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 24px; }
.ticket__card { position: relative; overflow: hidden; padding: 22px; border: 1px solid var(--rule-2); background: var(--bg-2); font-family: var(--mono); font-size: 12px; font-variation-settings: "wdth" 87; }
.ticket__top { display: flex; justify-content: space-between; align-items: center; }
.ticket__top b { font-size: 15px; }
.ticket__status { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rule-2); text-transform: uppercase; font-size: 10px; }
.ticket__card.is-sent .ticket__status { background: var(--hot); border-color: var(--hot); color: var(--on-hot); }
.ticket__bar { height: 2px; background: var(--rule); margin: 16px 0 18px; }
.ticket__bar span { display: block; height: 100%; background: var(--hot); transform-origin: left; transform: scaleX(0); transition: transform 0.5s var(--ease-out); }
.ticket dl { margin: 0; }
.ticket dl div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--rule); }
.ticket dt { color: var(--muted); text-transform: uppercase; font-size: 10px; padding-top: 2px; }
.ticket dd { margin: 0; color: var(--fg); word-break: break-word; }
.ticket dd.is-empty { color: var(--muted); }
.ticket__brief dd { font-family: var(--sans); font-size: 14px; line-height: 1.45; font-variation-settings: "wdth" 100; }
.ticket__route { margin-top: 16px; color: var(--fg-2); }
.ticket__route b { color: var(--hot); }
.ticket__stamp { position: absolute; right: 18px; top: 46%; padding: 8px 16px; border: 3px solid var(--hot); color: var(--hot); font-size: 22px; font-weight: 700; text-transform: uppercase; transform: rotate(-12deg) scale(2.2); opacity: 0; transition: transform 0.45s var(--ease-out), opacity 0.3s; }
.ticket__card.is-sent .ticket__stamp { transform: rotate(-12deg) scale(1); opacity: 1; }
.ticket__alt { display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.ticket__alt a { width: fit-content; border-bottom: 1px solid var(--rule-2); transition: color 0.3s, border-color 0.3s; }
.ticket__alt a:hover { color: var(--hot); border-color: var(--hot); }

/* Booking */
.calls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 8vh var(--gutter) 5vh; }
.call {
  display: flex; flex-direction: column; gap: 12px; padding: 26px; text-align: start; cursor: pointer;
  border: 1px solid var(--rule-2); background: transparent; color: var(--fg); font: inherit;
  transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.4s var(--ease-out);
}
.call:hover { border-color: var(--fg); transform: translateY(-3px); }
.call[aria-pressed="true"] { background: var(--hot); border-color: var(--hot); color: var(--on-hot); }
.call__time { font-family: var(--mono); font-size: 11px; text-transform: uppercase; opacity: 0.8; }
.call h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; text-transform: uppercase; font-variation-settings: "wdth" 85; }
.call p { font-size: 15px; opacity: 0.85; }
.booking { padding: 0 var(--gutter) 12vh; }
.booking__frame { border: 1px solid var(--rule-2); background: #fff; }
.booking__frame iframe { display: block; width: 100%; height: min(820px, 90vh); border: 0; }
.booking__fallback { padding: clamp(28px, 5vw, 64px); border: 1px dashed var(--rule-2); }
.booking__big { font-size: clamp(26px, 3vw, 46px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; max-width: 22ch; margin-bottom: 30px; }
.booking__note { margin-top: 16px; }
.booking__note a { text-decoration: underline; text-underline-offset: 3px; }

/* Single call card */
.call-one { padding: 8vh var(--gutter) 5vh; }
.call-one__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 48px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--hot); background: color-mix(in srgb, var(--hot) 8%, transparent); }
.call-one__card .call__time, .call-one__card h3, .call-one__card > p { grid-column: 1; }
.call-one__card h3 { font-size: clamp(28px, 3vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; text-transform: uppercase; font-variation-settings: "wdth" 85; }
.call-one__card > p { color: var(--fg-2); }
.call-one__list { grid-column: 2; grid-row: 1 / span 3; display: grid; gap: 12px; align-content: center; }
.call-one__list li { position: relative; padding-inline-start: 26px; font-size: 17px; }
.call-one__list li::before { content: "✺"; position: absolute; left: 0; color: var(--hot); }
@media (max-width: 900px) { .call-one__card { grid-template-columns: 1fr; } .call-one__list { grid-column: 1; grid-row: auto; margin-top: 12px; } }

/* Legal */
.legal { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 32px; padding: 8vh var(--gutter) 12vh; }
.legal__nav { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 10px; }
.legal__nav .label { margin-bottom: 6px; }
.legal__nav a { font-size: 18px; color: var(--fg-2); width: fit-content; }
.legal__nav a:hover, .legal__nav a[aria-current="page"] { color: var(--hot); }
.legal__nav a[aria-current="page"]::before { content: "→ "; }
.prose { max-width: 68ch; }
.prose h2 { margin: 48px 0 14px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; text-transform: none; font-variation-settings: "wdth" 100; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 24px 0 8px; font-family: var(--mono); font-size: 12px; font-weight: 400; text-transform: uppercase; color: var(--hot); font-variation-settings: "wdth" 87; }
.prose p { color: var(--fg-2); margin: 0 0 14px; }
.prose a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.prose__dl { margin: 0; }
.prose__dl div { display: grid; grid-template-columns: minmax(160px, 0.8fr) 2fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.prose__dl dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.prose__dl dd { margin: 0; }
mark.todo { background: rgba(255, 200, 0, 0.18); color: inherit; padding: 0 4px; border: 1px dashed rgba(255, 200, 0, 0.7); border-radius: 3px; }

@media (max-width: 1000px) {
  .cform { grid-template-columns: 1fr; }
  .ticket { position: static; }
  .calls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .ph { padding-top: 100px; }
  .contact__cta { grid-template-columns: 1fr; }
  .calls { grid-template-columns: 1fr; }
  .cf__row { grid-template-columns: 1fr; }
  .legal { grid-template-columns: 1fr; }
  .legal__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
  .legal__nav .label { width: 100%; }
  .prose__dl div { grid-template-columns: 1fr; gap: 4px; }
}


/* ==========================================================================
   Blog
   ========================================================================== */
/* Homepage teaser */
.notes { padding: 12vh var(--gutter) 4vh; }
.notes__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 24px; margin-bottom: 6vh; }
.notes__head .label { grid-column: 1 / -1; }
.notes__all { font-family: var(--mono); font-size: 12px; text-transform: uppercase; border-bottom: 1px solid var(--rule-2); padding-bottom: 4px; transition: color 0.3s, border-color 0.3s; }
.notes__all:hover { color: var(--hot); border-color: var(--hot); }
.notes__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.note { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 30px 0; border-inline-end: 1px solid var(--rule-2); overflow: hidden; }
.note:last-child { border-inline-end: 0; }
.note + .note { padding-inline-start: 28px; }
.note::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at 30% 120%, color-mix(in srgb, var(--hot) 22%, transparent), transparent 65%); opacity: 0; transition: opacity 0.5s; }
.note:hover::before { opacity: 1; }
.note__meta { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); font-variation-settings: "wdth" 87; }
.note__title { font-size: clamp(22px, 2.1vw, 32px); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; transition: color 0.3s; }
.note:hover .note__title { color: var(--hot); }
.note__desc { color: var(--fg-2); font-size: 15px; }
.note__go { margin-top: auto; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--hot); }
.note__go span { display: inline-block; transition: transform 0.4s var(--ease-out); }
.note:hover .note__go span { transform: translateX(5px); }

/* Blog index */
.blog { padding: 6vh var(--gutter) 12vh; }
.blog__list { border-top: 1px solid var(--rule-2); }
.post-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 48px; align-items: center; gap: 24px; padding: clamp(18px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--rule-2); transition: color 0.35s; }
.post-row::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--hot); transform: scaleY(0); transform-origin: bottom; transition: transform 0.55s var(--ease); }
.post-row:hover { color: var(--on-hot); }
.post-row:hover::before { transform: scaleY(1); transform-origin: top; }
.post-row__n { font-family: var(--mono); font-size: 11px; }
.post-row__main { display: flex; flex-direction: column; gap: 8px; }
.post-row__title { font-size: clamp(24px, 3.2vw, 50px); font-weight: 750; line-height: 1; letter-spacing: -0.03em; font-variation-settings: "wdth" 90; transition: font-variation-settings 0.6s var(--ease-out); }
.post-row:hover .post-row__title { font-variation-settings: "wdth" 105; }
.post-row__desc { max-width: 70ch; color: var(--fg-2); font-size: 15px; transition: color 0.35s; }
.post-row:hover .post-row__desc { color: var(--on-hot); }
.post-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; white-space: nowrap; font-variation-settings: "wdth" 87; }
.post-row:hover .row__arrow { transform: translateX(6px) rotate(-45deg); }

/* Article */
.post__hero { padding: 132px var(--gutter) 7vh; border-bottom: 1px solid var(--rule-2); }
.post__meta { margin: 34px 0 16px; }
.post__title { max-width: 18ch; font-size: clamp(42px, 6.4vw, 104px); font-weight: 850; line-height: 0.92; letter-spacing: -0.045em; font-variation-settings: "wdth" 92; animation: rise 1s var(--ease-out) both; }
.post__lead { max-width: 52ch; margin: 26px 0 24px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; color: var(--fg-2); }
.post__layout { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 40px; padding: 8vh var(--gutter); }
.post__toc { position: sticky; top: 100px; align-self: start; }
.post__toc ol { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; counter-reset: toc; }
.post__toc a { display: block; color: var(--fg-2); font-size: 14px; line-height: 1.35; transition: color 0.3s; }
.post__toc a:hover { color: var(--hot); }
.post__body { max-width: 70ch; font-size: 18.5px; line-height: 1.65; }
.post__body p { color: var(--fg-2); margin-bottom: 20px; }
.post__body strong { color: var(--fg); }
.post__body h2 { margin: 56px 0 16px; scroll-margin-top: 100px; }
.post__body h3 { scroll-margin-top: 100px; }
.post__body ul, .post__body ol { margin: 0 0 22px; padding-inline-start: 0; display: grid; gap: 10px; }
.post__body ul li, .post__body ol li { position: relative; padding-inline-start: 30px; color: var(--fg-2); list-style: none; }
.post__body ul li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 12px; height: 2px; background: var(--hot); }
.post__body ol { counter-reset: li; }
.post__body ol li { counter-increment: li; }
.post__body ol li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 0.2em; font-family: var(--mono); font-size: 12px; color: var(--hot); }
.post__body code { font-size: 0.88em; padding: 2px 6px; border-radius: 4px; background: var(--bg-3); color: var(--fg); }
.post__body pre { overflow-x: auto; padding: 18px; border: 1px solid var(--rule-2); background: var(--bg-2); font-size: 14px; }
.post__body pre code { padding: 0; background: none; }
.post__body blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-inline-start: 3px solid var(--hot); font-size: 1.15em; }
.post__body blockquote p { color: var(--fg); }
.post__author { margin: 0 var(--gutter); padding: clamp(28px, 4vw, 48px); border: 1px solid var(--rule-2); display: grid; gap: 14px; justify-items: start; max-width: 860px; }
.post__author-name { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.03em; }
.post__author p:not(.label):not(.post__author-name) { color: var(--fg-2); max-width: 56ch; }
.post__more { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10vh var(--gutter) 0; padding-bottom: 6vh; }
.post__next { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--rule-2); transition: border-color 0.3s, background 0.3s; }
.post__next span:last-child { font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.post__next:hover { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 8%, transparent); }
.post__next--r { text-align: end; align-items: flex-end; }

@media (max-width: 1000px) {
  .notes__list { grid-template-columns: 1fr; }
  .note, .note + .note { padding: 26px 0; border-inline-end: 0; border-bottom: 1px solid var(--rule-2); }
  .post__layout { grid-template-columns: 1fr; }
  .post__toc { position: static; }
  .post-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .post-row__n, .post-row__meta { display: none; }
}
@media (max-width: 800px) {
  .post__hero { padding-top: 100px; }
  .post__more { grid-template-columns: 1fr; }
  .post__body { font-size: 17px; }
}

/* ---------- Portrait: blue duotone, true black-and-white on hover ---------- */
.portrait { position: relative; z-index: 2; flex: none; width: clamp(170px, 15vw, 230px); margin: 0 4vw 0 0; transform: rotate(3deg); transition: transform 0.6s var(--ease-out); }
.portrait:hover { transform: rotate(0deg) scale(1.03); }
.portrait__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--hot); border: 1px solid var(--rule-2); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); }
.portrait__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(1.02); mix-blend-mode: multiply; transition: mix-blend-mode 0s, filter 0.5s, transform 1.2s var(--ease-out); }
.portrait__img::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(11, 11, 12, 0.35) 0.8px, transparent 1.2px); background-size: 4px 4px; mix-blend-mode: multiply; transition: opacity 0.5s; pointer-events: none; }
.portrait:hover .portrait__img img { mix-blend-mode: normal; filter: grayscale(1) contrast(1.05); transform: scale(1.04); }
.portrait:hover .portrait__img::after { opacity: 0; }
.portrait figcaption { margin-top: 12px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; color: var(--fg-2); font-variation-settings: "wdth" 87; line-height: 1.5; }
.portrait figcaption b { color: var(--hot); font-weight: 700; }
.avatar { display: inline-block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-inline-end: 16px; border: 2px solid var(--hot); filter: grayscale(1); }
.avatar--xs { width: 22px; height: 22px; margin-inline-end: 8px; border-width: 1px; vertical-align: -6px; }
@media (max-width: 1000px) {
}

/* ---------- Under the hood ---------- */
.hood { padding: 10vh var(--gutter) 14vh; }
.hood__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-rows: auto 1fr; gap: 16px 48px; align-items: end; margin-bottom: 7vh; }
.hood__head .label { grid-column: 1 / -1; }
.hood__lead { color: var(--fg-2); font-size: clamp(17px, 1.4vw, 20px); max-width: 52ch; }
/* Exploded layer stack (pinned while scrolling) */
.hood__scroll { position: relative; height: 380vh; }
.hood__pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 4vw; }
.hood__stack { position: relative; height: min(78vh, 680px); perspective: 1800px; }
.hlayer { position: absolute; left: 50%; top: 50%; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
  --gap: calc(52px + var(--x, 0) * 58px); --lift: 0px; transform: translateY(calc((var(--i) - 1.5) * var(--gap) + var(--lift))); transition: transform 0.9s var(--ease-out); }
.hlayer__plane { position: absolute; left: 0; top: 0; width: min(25vw, 330px); aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(60deg) rotateZ(-42deg); transform-style: preserve-3d;
  border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); transition: border-color 0.5s, box-shadow 0.6s, opacity 0.5s, background 0.5s; overflow: hidden; }
.hlayer__plane { color: color-mix(in srgb, var(--fg) 42%, transparent); --node: var(--bg-2); }
.hlayer__plane svg { position: absolute; inset: 9%; width: 82%; height: 82%; overflow: visible; transition: color 0.5s; }
.hlayer__tag { position: absolute; left: calc(min(25vw, 330px) * 0.74); top: -12px; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); transition: color 0.4s, transform 0.6s var(--ease-out); }
.hlayer__tag b { color: var(--fg-2); font-weight: 500; font-size: 12px; }
.hlayer__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hlayer__tag::before { content: ""; position: absolute; right: calc(100% + 10px); top: 50%; width: 28px; height: 1px; background: currentColor; opacity: 0.5; }
[dir="rtl"] .hlayer__tag { left: auto; right: calc(min(25vw, 330px) * 0.74); }
[dir="rtl"] .hlayer__tag::before { right: auto; left: calc(100% + 10px); }
.hood[data-active] .hlayer:not(.is-on) .hlayer__plane { opacity: 0.45; }
.hlayer.is-on { --lift: -26px; }
.hlayer.is-on .hlayer__plane { color: var(--hot); --node: color-mix(in srgb, var(--hot) 10%, var(--bg-2)); border-color: var(--hot); background: color-mix(in srgb, var(--hot) 10%, var(--bg-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hot) 40%, transparent), 0 0 90px -10px color-mix(in srgb, var(--hot) 70%, transparent), 0 50px 90px -30px rgba(0, 0, 0, 0.8); }
.hlayer.is-on .hlayer__tag { color: var(--hot); transform: translateX(8px); }
.hlayer.is-on .hlayer__tag b { color: var(--hot); }
.hlayer:focus-visible .hlayer__plane { outline: 2px solid var(--hot); outline-offset: 4px; }
.hood__panels { position: relative; height: min(64vh, 560px); }
.hpanel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; opacity: 0; transform: translateY(30px); pointer-events: none; transition: opacity 0.5s, transform 0.7s var(--ease-out); }
.hpanel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hpanel__n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.hpanel__n b { color: var(--hot); font-weight: 600; font-size: 13px; }
.hpanel h3 { font-size: clamp(38px, 4.6vw, 76px); font-weight: 850; line-height: 0.92; letter-spacing: -0.045em; text-transform: uppercase; font-variation-settings: "wdth" 80; }
.hpanel__skills { font-family: var(--mono); font-size: 13px; line-height: 2; color: var(--fg); font-variation-settings: "wdth" 87; padding-inline-start: 14px; border-inline-start: 2px solid var(--hot); }
.hpanel__proof { position: relative; padding: 18px 20px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 4%, transparent); border: 1px solid var(--rule-2); color: var(--fg-2); font-size: 16px; line-height: 1.55; max-width: 54ch; }
.hpanel__proof span { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hot); }
.hood__ticks { position: absolute; left: 0; bottom: 0; display: flex; gap: 8px; }
[dir="rtl"] .hood__ticks { left: auto; right: 0; }
.hood__ticks i { width: 34px; height: 3px; border-radius: 3px; background: var(--rule-2); transition: background 0.4s; }
.hood[data-active="0"] .hood__ticks i:nth-child(-n+1), .hood[data-active="1"] .hood__ticks i:nth-child(-n+2),
.hood[data-active="2"] .hood__ticks i:nth-child(-n+3), .hood[data-active="3"] .hood__ticks i { background: var(--hot); }
@media (max-width: 900px) {
  .hood__head { grid-template-columns: 1fr; }
  .hood__scroll { height: auto; }
  .hood__pin { position: static; height: auto; display: block; }
  .hood__stack { display: none; }
  .hood__panels { height: auto; display: flex; flex-direction: column; gap: 46px; }
  .hpanel { position: static; opacity: 1; transform: none; pointer-events: auto; }
  .hood__ticks { display: none; }
}

/* ---------- What I do: three pillars ---------- */
.pillars { display: grid; grid-template-columns: 1fr 1.35fr 1fr; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.pillar { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 34px 30px 36px; border-inline-end: 1px solid var(--rule-2); }
.pillar:first-child { padding-inline-start: 0; }
.pillar:last-child { border-inline-end: 0; padding-inline-end: 0; }
.pillar__n { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--hot); }
.pillar h3 { font-size: clamp(28px, 3vw, 48px); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; text-transform: uppercase; font-variation-settings: "wdth" 84; }
.pillar p { color: var(--fg-2); }
.pillar .tags { margin-top: auto; }
.pillar--hot { background: var(--hot); color: var(--on-hot); border-inline-end-color: transparent; }
.pillar--hot .pillar__n, .pillar--hot p { color: var(--on-hot); }
.pillar--hot .tags li { border-color: color-mix(in srgb, var(--on-hot) 40%, transparent); color: var(--on-hot); }
.specialties { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 28px; margin-top: 28px; }
.specialties ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.specialties li { font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.01em; }
.specialties li::before { content: "✺ "; color: var(--hot); font-size: 0.8em; }
@media (max-width: 1000px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar:first-child, .pillar:last-child { padding: 28px 0; border-inline-end: 0; border-bottom: 1px solid var(--rule-2); }
  .pillar--hot { padding: 28px 20px !important; margin: 0 -4px; }
}

.contact__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.contact__row--mail { align-items: center; margin: 5vh 0 5vh; }
.contact__row--mail .contact__email { margin: 0; }
@media (max-width: 800px) {
  .contact__row { flex-direction: column; gap: 28px; }
  .portrait { width: 190px; margin: 0; transform: rotate(-2deg); }
}

/* ---------- Scroll rail (replaces the native scrollbar on desktop) ---------- */
.rail { display: none; }
html.has-rail { scrollbar-width: none; }
html.has-rail::-webkit-scrollbar, html.has-rail body::-webkit-scrollbar { display: none; }
html.has-rail .rail { display: block; position: fixed; z-index: 120; right: 0; top: 84px; bottom: 28px; width: 30px; cursor: pointer; touch-action: none; }
.rail__track { position: absolute; right: 14px; top: 0; bottom: 0; width: 1px; background: var(--rule-2); transition: width 0.3s, right 0.3s; }
.rail:hover .rail__track, .rail.is-drag .rail__track { width: 3px; right: 13px; }
.rail__fill { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: linear-gradient(var(--hot), color-mix(in srgb, var(--hot) 70%, #5ad1ff)); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 8px var(--hot); }
.rail__head { position: absolute; right: 10px; top: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 25%, transparent), 0 0 14px var(--hot); transition: transform 0.25s var(--ease-out); }
.rail:hover .rail__head, .rail.is-drag .rail__head { transform: scale(1.35); }
.rail__pct { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--bg) 80%, transparent); font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--hot); opacity: 0; white-space: nowrap; transition: opacity 0.3s; font-variation-settings: "wdth" 87; }
.rail.is-moving .rail__pct, .rail.is-drag .rail__pct { opacity: 1; }
.rail:hover:not(.is-drag) .rail__pct { opacity: 0; }
.rail__tick { position: absolute; right: 7px; width: 15px; height: 15px; margin-top: -7.5px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.rail__tick::before { content: ""; width: 7px; height: 1px; background: var(--fg-2); transition: width 0.3s, background 0.3s; }
.rail__tick.is-passed::before { background: var(--hot); }
.rail__tick.is-active::before { width: 13px; height: 2px; background: var(--hot); }
.rail__tick span { position: absolute; right: 22px; padding: 4px 9px; border: 1px solid var(--rule-2); border-radius: 999px; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); font-family: var(--mono); font-size: 10px; text-transform: uppercase; white-space: nowrap; color: var(--fg); opacity: 0; transform: translateX(6px); transition: opacity 0.25s, transform 0.35s var(--ease-out); pointer-events: none; font-variation-settings: "wdth" 87; }
.rail:hover .rail__tick span { opacity: 0.55; transform: none; }
.rail .rail__tick:hover span, .rail .rail__tick.is-active span { opacity: 1; transform: none; }
.rail:not(:hover) .rail__tick.is-active span { opacity: 0; }

/* ---------- Language switcher ---------- */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--rule-2); border-radius: 999px; }
.lang a { min-width: 28px; padding: 5px 7px; border-radius: 999px; text-align: center; font-size: 10px; line-height: 1; color: var(--fg-2); transition: color 0.25s, background 0.25s; }
.lang a:hover { color: var(--fg); }
.lang a[aria-current] { background: var(--fg); color: var(--bg); }
.lang a[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--sans); font-size: 12px; font-weight: 600; text-transform: none; }
.lang--menu { order: -1; width: fit-content; margin-bottom: 6px; }
.lang--menu a { min-width: 44px; padding: 9px 12px; font-size: 13px; }
.lang--menu a[lang="ar"] { font-size: 15px; }

/* ---------- Arabic: typography and right-to-left ---------- */
html[lang="ar"] { --sans: "Archivo", "IBM Plex Sans Arabic", "Segoe UI", sans-serif; --mono: "Martian Mono", "IBM Plex Sans Arabic", ui-monospace, monospace; }
html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: 0 !important; }
html[lang="ar"] :is(h2, h3, .ph__title, .post__title, .pj-title, .manifesto__text, .contact__big, .row__name, .pj-next__name, .cta__t, .tool h3, .hpanel h3, .pillar h3, .service h3, .call h3, .call-one__card h3, .step h3, .menu__nav a, .post-row__title, .note__title) { line-height: 1.25; }
html[lang="ar"] .contact__big { line-height: 1.05; }
html[lang="ar"] .label, html[lang="ar"] .tags li { font-size: 12px; }
html[lang="ar"] .hero__name, html[lang="ar"] .hd__code { direction: ltr; }
/* Shorthand paddings that sit next to a divider */
[dir="rtl"] .service { padding: 34px 0 36px 32px; }
[dir="rtl"] .service:nth-child(even) { padding: 34px 32px 36px 0; }
[dir="rtl"] .note { padding: 28px 0 30px 28px; }
/* Bullets drawn with ::before */
[dir="rtl"] :is(.post__body ul li, .post__body ol li, .call-one__list li, .pj-ai li, .card__points li)::before { left: auto; right: 0; }
[dir="rtl"] .post__body ul li::before { right: 4px; }
[dir="rtl"] .pj-ai li { padding: 16px 40px 16px 0; }
/* Things that scroll sideways keep a left-to-right track */
[dir="rtl"] .tools__track, [dir="rtl"] .marquee, [dir="rtl"] .models__row, [dir="rtl"] .git__graph { direction: ltr; }
[dir="rtl"] .tool, [dir="rtl"] .git__card, [dir="rtl"] .git__date { direction: rtl; text-align: right; }
[dir="rtl"] .git__card { transform: translateX(16px); }
[dir="rtl"] .git__row.is-on .git__card { transform: none; }
/* Arrows and nudges that point "forward" */
[dir="rtl"] .row:hover .row__name { transform: translateX(-12px); }
[dir="rtl"] .row:hover .row__arrow, [dir="rtl"] .post-row:hover .row__arrow { transform: translateX(-6px) rotate(45deg); }
[dir="rtl"] .cta:hover .cta__a, [dir="rtl"] .note:hover .note__go span { transform: translateX(-5px); }
[dir="rtl"] .pj-back:hover span { transform: translateX(6px); }
[dir="rtl"] .link:hover .link__handle { transform: translateX(10px); }
[dir="rtl"] .hd__cta:hover span { transform: translateX(-3px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .row { grid-template-columns: 40px minmax(0, 1fr) 36px; }
  .row__kind, .row__year { display: none; }
  .pj-built li { grid-template-columns: 40px minmax(0, 1fr); }
  .pj-built p { grid-column: 2; }
  .link { grid-template-columns: 40px minmax(0, 1fr) 52px; }
  .link__handle { display: none; }
  .git__row { grid-template-columns: var(--lanes) minmax(0, 1fr); }
  .git__date { grid-column: 2; padding-top: 0; margin-bottom: 6px; }
  .git__card { grid-column: 2; }
}

@media (max-width: 800px) {
  body { font-size: 16px; }
  .hero { padding-top: 76px; }
  .hero__main { flex-direction: column; align-items: stretch; gap: 22px; }
  .hero__tag { width: auto; margin: 0; }
  .manifesto { grid-template-columns: 1fr; padding: 18vh var(--gutter) 22vh; }

  .flow { height: 400vh; }
  .flow__sticky { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; padding-top: 74px; }
  .flow__head h2 { font-size: clamp(32px, 9vw, 48px); margin-top: 10px; }
  .flow__steps { align-self: start; min-height: 280px; margin-top: 18px; }
  .step__n { font-size: 52px; }
  .step h3 { margin: 10px 0 8px; }
  .step p { font-size: 15px; }
  .step .tags { margin-top: 12px; }
  .flow__fig { grid-column: 1; grid-row: 4; }
  .flow__bar { grid-row: 4; }

  .agents { height: 260vh; }
  .agents__head { top: 74px; }
  .agents__head h2 { font-size: clamp(32px, 10vw, 52px); }
  .agents__caps { bottom: 64px; }
  .agents__key { left: var(--gutter); right: auto; bottom: 24px; gap: 12px; font-size: 9.5px; }
  .agent-label { margin-top: -50px; padding-left: 8px; }
  .agent-label b { font-size: 13px; }
  .agent-label span { display: none; }
  .agent-label__status { font-size: 9px; }

  .tools__sticky { position: static; height: auto; padding: 12vh 0 4vh; gap: 28px; }
  .tools__head, .services__head, .work__head { flex-direction: column; align-items: flex-start; }
  .tools__head .label, .services__head .label, .work__head .label { order: 0; }
  .tools__track { flex-direction: column; padding: 0 var(--gutter); }
  .tool { width: auto; min-height: 0; border-inline-start: 0; border-top: 1px solid var(--rule-2); padding: 22px 0 26px; background: transparent; backdrop-filter: none; }
  .tool:last-child { border-inline-end: 0; border-bottom: 1px solid var(--rule-2); }
  .tool--hot { background: var(--hot); padding: 22px 18px 26px; margin: 0 -18px; }
  .tool h3 { margin-top: 8px; }

  .services__list { grid-template-columns: 1fr; }
  .service, .service:nth-child(even) { padding: 28px 0 30px; border-inline-start: 0; }

  .row__arrow { font-size: 22px; }
  .git__head { grid-template-columns: 1fr; }
  .git__head .label, .git__head h2, .git__intro { grid-column: 1; grid-row: auto; }
  .git__graph { --lanes: 84px; }
  .contact__big { font-size: 19.5vw; }
  .link__name { font-size: 12vw; }
  .link__arrow { width: 40px; height: 40px; font-size: 18px; }
  .ft { flex-direction: column; }

  .pj-hero { padding-top: 76px; }
  .pj-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-meta div:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .pj-meta div:nth-child(n+3) { margin-top: 14px; }
  .pj-stats { grid-template-columns: 1fr; }
  .pj-stats div + div { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--rule); margin-top: 18px; }
  .pj-sec, .pj-ai { grid-template-columns: 1fr; }
  .pj-sec > .label { position: static; }
  .pj-stack div { grid-template-columns: 1fr; gap: 6px; }
  .pj-gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .wipe { display: none; }
  .git__row { opacity: 1; }
}
.service--hot h3 { color: var(--hot); }
.service--hot::before { opacity: 0.6; }

@media (max-width: 800px) {
  .agents__roles { display: none; }
  .agents__hud b { font-size: 34px; }
  .agent-label--chip { margin-top: -20px; padding: 2px 6px; }
  .agent-label--chip b { font-size: 8.5px; }
  .agent-label--pm b { font-size: 12px; }
  .agent-label--me b { font-size: 15px; }
}

/* ---------- Brand logos (monochrome masks that follow the theme) ---------- */
.lg { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.14em; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.lg--tag { margin-inline-end: 7px; color: var(--hot); transition: opacity 0.3s; }
.tool__logos { display: inline-flex; gap: 8px; margin-inline-start: 14px; font-size: 18px; color: var(--fg); vertical-align: middle; }
.tool--hot .tool__logos { color: var(--on-hot); }
.agent-label__engine { display: inline-flex; align-items: center; gap: 5px; }
.agent-label__engine .lg { font-size: 12px; color: var(--fg); }

/* Logo wall */
.models { padding: 9vh 0 4vh; overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.models__label { padding: 0 var(--gutter); margin-bottom: 26px; }
.models__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.models__row + .models__row { margin-top: 14px; }
.models__track { display: flex; width: max-content; animation: models 46s linear infinite; }
.models__row--rev .models__track { animation-direction: reverse; animation-duration: 54s; }
.models:hover .models__track { animation-play-state: paused; }
@keyframes models { to { transform: translateX(-50%); } }
.logo { display: inline-flex; align-items: center; gap: 14px; padding: 14px 34px; margin-inline-end: 10px; border: 1px solid var(--rule); border-radius: 999px; color: var(--fg-2); white-space: nowrap; transition: color 0.35s, border-color 0.35s, background 0.35s; }
.logo b { font-size: clamp(18px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.02em; font-variation-settings: "wdth" 95; }
.logo__mark { position: relative; display: grid; place-items: center; width: 30px; height: 30px; font-size: 28px; }
.logo__mark .lg { transition: opacity 0.35s, transform 0.5s var(--ease-out); }
.logo__color { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(0.8); transition: opacity 0.35s, transform 0.5s var(--ease-out); }
.logo:hover { color: var(--fg); border-color: var(--rule-2); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.logo:hover .logo__color { opacity: 1; transform: scale(1); }
.logo:hover .logo__mark .lg { transform: scale(1.1); }
.logo:hover .logo__color ~ .lg, .logo:hover .logo__mark:has(.logo__color) .lg { opacity: 0; }
@media (max-width: 800px) { .logo { padding: 10px 22px; } .logo__mark { width: 24px; height: 24px; font-size: 22px; } }