/* A personal site told like a film. Every section is a row: scroll down to move between rows,
   sideways inside a row to see more (app/ui/public/rails.tsx). Without JS the rows still scroll. */
.cin {
  --bg: #070707; --text: #ece7df; --dim: #9a948a; --amber: #e8b86a; --teal: #6fb7c4; --line: rgb(236 231 223 / 0.14);
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --t2f: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --joj: 'Fraunces', Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --move: 1s cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--bg); color: var(--text); font: 300 1.0625rem/1.7 var(--sans);
}
.cin ::selection { background: var(--amber); color: #111; }
.cin h1, .cin h2, .cin h3 { font-family: var(--serif); font-weight: 400; line-height: 0.98; letter-spacing: -0.01em; }
.cin em { font-style: italic; color: var(--amber); }
.cin a { text-decoration-color: rgb(232 184 106 / 0.5); text-underline-offset: 0.2em; }
.cin-kicker { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); }
.cin-lede { font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 1.3vw, 1.9rem); line-height: 1.35; color: var(--text); max-width: 34ch; }

/* ---------- title intro ---------- */
.cin-intro { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: #000; pointer-events: none; animation: intro-out 0.9s ease 2.1s forwards; }
.cin-intro p { display: grid; justify-items: center; gap: 0.6rem; }
/* The blur filter clips to the box on iPhones, and line-height 1 leaves the Â's accent and the g's tail
   outside it. The padding gives them room; the negative margin keeps the layout where it was. */
.cin-intro span { font: 400 clamp(2rem, 1rem + 4vw, 4rem)/1 var(--serif); letter-spacing: 0.02em; padding-block: 0.2em; margin-block: -0.2em; animation: intro-in 1.4s var(--ease) 0.2s both; }
.cin-intro em { font: 500 0.72rem/1 var(--sans); font-style: normal; letter-spacing: 0.5em; text-transform: uppercase; color: var(--amber); animation: intro-in 1.4s var(--ease) 0.7s both; }
@keyframes intro-in { from { opacity: 0; letter-spacing: 0.3em; filter: blur(10px); } to { opacity: 1; filter: none; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
.cin-skip .cin-intro { display: none; }

/* ---------- cursor ---------- */
.cur { position: fixed; z-index: 1500; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid rgb(236 231 223 / 0.6); pointer-events: none; opacity: 0; display: grid; place-items: center; transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), background 0.3s, border-color 0.3s, opacity 0.3s; mix-blend-mode: difference; }
.cur[data-on='true'] { opacity: 1; }
.cur[data-mode='link'] { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: #fff; }
.cur[data-mode]:not([data-mode='']):not([data-mode='link']) { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: #fff; mix-blend-mode: normal; border-color: #fff; }
.cur-label { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: #111; }

/* ---------- fixed navigation: logo, three links and the language switch ---------- */
.cin-nav { position: fixed; z-index: 60; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem clamp(1rem, 3vw, 2.5rem); color: #fff; background: linear-gradient(rgb(7 7 7 / 0.82), rgb(7 7 7 / 0.55)); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgb(255 255 255 / 0.06); }
.cin-mark { font: 400 1.5rem/1 var(--serif); letter-spacing: 0.04em; text-decoration: none; }
.cin-menu { display: flex; margin-left: auto; gap: clamp(0.9rem, 2.4vw, 2.4rem); }
/* language switch: two flag cards fanned like a hand. Each card (the link) stays put so its hover
   area never moves; only the face inside it moves. Entering the hand gives both cards a jiggle;
   the card under the pointer pops up and stands straight. The current language is ringed. */
.cin-langs { position: relative; flex: none; width: 3.6rem; height: 2.5rem; margin: 0; }
.lang-card { --lean: 8deg; position: absolute; top: 0.3rem; left: 50%; width: 1.4rem; height: 1.95rem; margin-left: -0.7rem; transform-origin: 50% 135%; transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); }
.lang-en { transform: translateX(-0.42rem) rotate(calc(var(--lean) * -1)); }
.lang-pt { transform: translateX(0.42rem) rotate(var(--lean)); }
.lang-card[aria-current] { --lean: 5deg; z-index: 2; }
.lang-face { display: block; width: 100%; height: 100%; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1.5px #0b0b0b; filter: saturate(0.45) brightness(0.85); transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1), filter 0.3s, box-shadow 0.3s; }
.lang-face .flag { display: block; width: 100%; height: 100%; }
.lang-card[aria-current] .lang-face { filter: none; box-shadow: 0 0 0 1.5px #0b0b0b, 0 0 0 3px var(--amber); }
.lang-card:focus-visible { outline: none; }
.lang-card:focus-visible .lang-face { box-shadow: 0 0 0 1.5px #0b0b0b, 0 0 0 3px #fff; }
@media (hover: hover) {
  .cin-langs:hover .lang-face { animation: jiggle 0.6s ease-in-out; }
  .cin-langs:hover .lang-pt .lang-face { animation-delay: 0.08s; }
  .lang-card:hover { z-index: 3; }
  .lang-en:hover .lang-face { transform: translateY(-6px) rotate(var(--lean)) scale(1.08); filter: none; }
  .lang-pt:hover .lang-face { transform: translateY(-6px) rotate(calc(var(--lean) * -1)) scale(1.08); filter: none; }
}
@keyframes jiggle { 30% { translate: 0 -3px; rotate: -4deg; } 60% { translate: 0 0; rotate: 3deg; } }
@media (prefers-reduced-motion: reduce) { .cin-langs:hover .lang-face { animation: none; } }
.cin-menu a { position: relative; text-decoration: none; font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; padding-block: 0.5rem; opacity: 0.62; transition: opacity 0.3s; white-space: nowrap; }
.cin-menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.cin-menu a:hover, .cin-menu a[aria-current] { opacity: 1; }
.cin-menu a[aria-current]::after { transform: scaleX(1); }
.ch-short { display: none; }
@media (max-width: 640px) {
  .ch-long { display: none; }
  .ch-short { display: inline; }
  .cin-menu { gap: 0.95rem; }
  .cin-menu a { font-size: 0.64rem; letter-spacing: 0.14em; }
}

/* ---------- buttons ---------- */
.cin-btn { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.5rem; border-radius: 999px; background: var(--text); color: #0b0b0b; text-decoration: none; font: 600 0.82rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.cin-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -14px rgb(236 231 223 / 0.5); }
.cin-btn span { transition: transform 0.4s var(--ease); }
.cin-btn:hover span { transform: translateX(5px); }
.cin-btn-joj { background: #ee9b6b; }
.cin-soon { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); border: 1px dashed var(--line); border-radius: 999px; padding: 0.8rem 1rem; }

/* "Software engineer · Brazil ✈ Ottawa". rails.tsx sets data-flight: "wait" parks the plane in Brazil
   with no route drawn, "fly" flies it to Ottawa, drawing the dashed route behind it (the mask's dash is
   the arc's length, 70), and Ottawa lights up as it lands. Without JS the plane flies once at 5s; with
   reduced motion it just sits in Ottawa. */
.hi-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; }
.hi-kicker > span:first-child::after { content: '·'; margin-left: 0.9rem; opacity: 0.7; }
.hi-route { display: inline-flex; align-items: center; gap: 0.6rem; }
.hi-flight { width: 4.6rem; height: 1.4rem; overflow: visible; }
.hi-arc { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-dasharray: 2.5 3.5; opacity: 0.6; }
.hi-reveal { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 70 70; }
.hi-plane { fill: currentColor; offset-path: path('M4 18 Q36 -6 68 18'); offset-rotate: auto; offset-distance: 100%; transform: scale(1.2); }
@media (prefers-reduced-motion: no-preference) { html:not(.js-rails) .hi-plane { animation: hi-fly 2.2s cubic-bezier(.45, 0, .2, 1) 5s both; } }
[data-flight='wait'] .hi-plane { offset-distance: 0%; }
[data-flight='wait'] .hi-reveal { stroke-dashoffset: 70; }
[data-flight='fly'] .hi-plane { animation: hi-fly 2.2s cubic-bezier(.45, 0, .2, 1) both; }
[data-flight='fly'] .hi-reveal { animation: hi-trail 2.2s cubic-bezier(.45, 0, .2, 1) both; }
[data-flight='fly'] .hi-to { animation: hi-land 1.8s ease-out 2.05s both; }
@keyframes hi-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes hi-trail { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }
@keyframes hi-land { 20% { color: #fff; text-shadow: 0 0 14px rgb(244 210 142 / 0.95), 0 0 3px rgb(244 210 142 / 0.7); } }
@media (max-width: 720px) { .hi-kicker > span:first-child::after { display: none; } .hi-kicker { flex-direction: column; align-items: start; } }
@keyframes title-in { from { opacity: 0; transform: translateY(40px); letter-spacing: 0.06em; filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- rows: the one pattern every section uses ---------- */
.cin { --gut: clamp(1.25rem, 4vw, 4rem); --row-h: min(62svh, 42rem); --vis: calc(var(--row-h) - 10.5rem); }
.row { position: relative; isolation: isolate; padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(0.5rem, 2vh, 1.25rem); }
.rail { display: flex; align-items: stretch; gap: clamp(0.75rem, 1.4vw, 1.25rem); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding: 0.75rem var(--gut) 1.25rem; scrollbar-width: none; outline: none; }
.rail::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .js-rails .rail { cursor: grab; } }
.rail.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.rail.is-jumping { scroll-snap-type: none; }
.rail.is-dragging > * { pointer-events: none; }
.rail:focus-visible { box-shadow: inset 0 0 0 1px rgb(232 184 106 / 0.6); border-radius: 14px; }
.slide { flex: none; position: relative; min-height: var(--row-h); scroll-snap-align: start; border-radius: 22px; }
/* slides grow into place as they enter the row from the side */
@supports (animation-timeline: view()) {
  .js-rails .slide { animation: slide-in linear both; animation-timeline: view(inline); animation-range: entry 0% entry 70%; }
}
@keyframes slide-in { from { opacity: 0.2; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: none; } }


/* arrows over the row's edges: a big one pulls you to the right, a small one brings you back */
.rail-wrap { position: relative; }
.rail-wrap::after { content: ''; position: absolute; z-index: 4; top: 0; bottom: 0; right: 0; width: clamp(3rem, 9vw, 10rem); background: linear-gradient(to left, rgb(7 7 7 / 0.75), transparent); pointer-events: none; transition: opacity 0.5s; }
[data-at-end] .rail-wrap::after { opacity: 0; }
.rail-arrow { position: absolute; z-index: 5; top: 50%; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 0; cursor: pointer; transform: translateY(-50%); transition: opacity 0.4s, transform 0.5s var(--ease), background 0.3s, color 0.3s; }
.rail-arrow svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rail-next { right: clamp(0.75rem, 2.5vw, 2.5rem); background: var(--text); color: #0b0b0b; box-shadow: 0 0 0 0 rgb(236 231 223 / 0.45), 0 24px 50px -16px rgb(0 0 0 / 0.9); animation: pull 2.6s ease-in-out infinite; }
.rail-next:hover { background: var(--amber); transform: translateY(-50%) scale(1.08); animation-play-state: paused; }
.rail-prev { left: clamp(0.75rem, 2.5vw, 2.5rem); width: 3.2rem; height: 3.2rem; background: rgb(14 14 14 / 0.72); color: var(--text); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rail-prev:hover { border-color: var(--amber); color: var(--amber); }
[data-at-start] .rail-prev, [data-at-end] .rail-next { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.7); }
/* until the row has been moved once, the arrow keeps tugging and glowing */
[data-at-start] .rail-next { animation: pull 2.6s ease-in-out infinite, glow 2.6s ease-out infinite; }
@keyframes pull { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 8px 0; } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgb(236 231 223 / 0.45), 0 24px 50px -16px rgb(0 0 0 / 0.9); } 70%, 100% { box-shadow: 0 0 0 18px rgb(236 231 223 / 0), 0 24px 50px -16px rgb(0 0 0 / 0.9); } }
html:not(.js-rails) .rail-arrow { display: none; }

/* the way down: names the next row, and bobs */
.row-down { display: flex; align-items: center; gap: 0.65rem; width: max-content; margin: 0.35rem auto 0; padding: 0.7rem 1.1rem 0.7rem 1.25rem; border-radius: 999px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.03); color: var(--text); text-decoration: none; font: 500 0.66rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; transition: border-color 0.3s, background 0.3s; }
.row-down span { color: var(--dim); }
.row-down b { font-weight: 600; }
.row-down svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: bob 1.8s ease-in-out infinite; }
.row-down:hover { border-color: rgb(232 184 106 / 0.6); background: rgb(232 184 106 / 0.08); }
@keyframes bob { 50% { transform: translateY(4px); } }

/* ---------- Hi: who I am, then one clip after another (hobbies take turns) ---------- */
.row-hi { --row-h: min(68svh, 46rem); padding-top: clamp(4.75rem, 9vh, 6rem); }
.row-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(80% 70% at 30% 40%, #13171a, #050505); }
.row-bg i { position: absolute; inset: -12%; background: center / cover no-repeat; filter: blur(50px) saturate(1.4) brightness(0.42); opacity: 0; transform: scale(1.08); transition: opacity 1.2s ease; }
.row-bg i.on { opacity: 1; }
.row-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 5 5 / 0.85), rgb(5 5 5 / 0.2) 55%, rgb(5 5 5 / 0.5)), linear-gradient(to top, #070707, transparent 30%); }
.hi { width: min(40rem, 86vw); display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; justify-items: start; gap: 1rem; padding: 0 clamp(0rem, 2vw, 2rem) 0.25rem 0; }
.hi h1 { font-size: clamp(3.2rem, 1.4rem + 6vw, 7.2rem); line-height: 0.9; animation: title-in 2.2s var(--ease) 2.5s both; }
.hi .cin-kicker { animation: fade 1.6s ease 2.7s both; color: #f4d28e; }
.hi-tldr { font: 400 clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem)/1.4 var(--serif); color: #ece6db; max-width: 42ch; animation: fade 1.6s ease 3s both; }
.hi .links { animation: fade 1.6s ease 3.3s both; }
.cin-skip .hi > * { animation-delay: 0.15s !important; }
.clip { --h: calc(var(--row-h) - 2.75rem); height: var(--h); min-height: 0; width: calc(var(--h) * 9 / 16); align-self: flex-start; overflow: hidden; background: #111; box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.95); transition: translate 0.6s var(--ease), scale 0.6s var(--ease), filter 0.5s; }
/* rhythm: up, down, and every fourth clip a little wider */
.clip:nth-child(even) { align-self: flex-end; }
.clip:nth-child(4n+3) { --h: var(--row-h); width: calc(var(--h) * 4 / 5); align-self: center; }
@media (hover: hover) {
  .rail:hover .clip:not(:hover) { filter: brightness(0.62) saturate(0.85); }
  .clip:hover { translate: 0 -6px; scale: 1.015; }
}
/* the first clips deal themselves in after the title */
.row-hi .clip:nth-child(-n+6) { animation: deal 1.4s var(--ease) both; animation-delay: calc(2.9s + var(--d, 0) * 0.13s); }
.row-hi .clip:nth-child(3) { --d: 1; } .row-hi .clip:nth-child(4) { --d: 2; } .row-hi .clip:nth-child(5) { --d: 3; } .row-hi .clip:nth-child(6) { --d: 4; }
.cin-skip .row-hi .clip:nth-child(-n+6) { animation-delay: calc(0.1s + var(--d, 0) * 0.1s); }
@keyframes deal { from { opacity: 0; transform: translateX(18vw) rotate(4deg) scale(0.92); } to { opacity: 1; transform: none; } }
.clip-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.clip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.82), transparent 38%); pointer-events: none; }
.clip-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 0.35rem; padding: 1rem 1.1rem 1.15rem; }
.clip-cat { font: 600 0.6rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: #f4d28e; }
.clip-label { font: 400 clamp(1.15rem, 1rem + 0.4vw, 1.4rem)/1.15 var(--serif); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .clip:hover .clip-video { transform: scale(1.05); } }
/* the full video on Instagram: a small mark in the corner, brighter when the card is hovered */
.clip-ig { position: absolute; z-index: 3; top: 0.7rem; right: 0.7rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #fff; background: rgb(0 0 0 / 0.5); opacity: 0.8; transition: opacity 0.3s, background 0.3s, scale 0.3s var(--ease); }
.clip-ig .social-icon { width: 1.1rem; height: 1.1rem; }
.clip:hover .clip-ig, .clip-ig:focus-visible { opacity: 1; }
.clip-ig:hover { background: linear-gradient(135deg, #f7b24a, #e1306c 60%, #8a3ab9); scale: 1.08; }

/* ---------- intro slides: the first card of every other row ---------- */
.intro { width: min(30rem, 84vw); display: grid; align-content: center; justify-items: start; gap: 1.1rem; padding: 0.5rem 1rem 0.5rem 0; }
.intro h2 { font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.6rem); }
.intro > p:not(.cin-kicker):not(.cap-ctas) { color: #c9c2b6; max-width: 34ch; }
.intro .intro-note { font: italic 400 clamp(1.1rem, 1rem + 0.4vw, 1.35rem)/1.35 var(--serif); color: var(--text); }
.cap-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 0.6rem; }
.row-t2f { background: radial-gradient(60% 60% at 30% 50%, rgb(182 244 107 / 0.06), transparent 70%); }
.row-t2f .cin-kicker { color: #b6f46b; }
.intro-t2f h2 { font: italic 800 clamp(2.8rem, 1.4rem + 3.6vw, 5.2rem)/0.92 var(--t2f); text-transform: uppercase; }
.row-joj { background: radial-gradient(60% 60% at 30% 50%, rgb(238 155 107 / 0.07), transparent 70%); }
.row-joj .cin-kicker { color: #ee9b6b; }
.intro-joj h2, .intro-reel h2 { font: 600 clamp(2.3rem, 1.3rem + 2.8vw, 4.2rem)/1.02 var(--joj); letter-spacing: -0.02em; }
.intro-joj em, .intro-reel em { color: #ee9b6b; font-weight: 500; }
.intro-reel { width: min(24rem, 84vw); }

/* hero cards: text beside a cluster of devices, so the whole product shows before any scrolling.
   --u is the cluster's unit: the row height on wide screens, smaller on phones. */
.intro-wide { --u: var(--row-h); width: auto; max-width: none; grid-template-columns: minmax(0, 25rem) auto; align-items: center; column-gap: clamp(1.5rem, 3vw, 3.5rem); }
.intro-text { display: grid; justify-items: start; gap: 1.1rem; }
.intro-text > p:not(.cin-kicker):not(.cap-ctas) { color: #c9c2b6; max-width: 34ch; }
.intro-text .intro-note { font: italic 400 clamp(1.1rem, 1rem + 0.4vw, 1.35rem)/1.35 var(--serif); color: var(--text); }
.intro-visual { position: relative; height: var(--u); }
.hv-t2f { width: calc(var(--u) * 1.24); }
.hv-joj { width: calc(var(--u) * 1.16); }
.intro-visual { --mx: 0; --my: 0; perspective: 1400px; }
.hv { position: absolute; transform: translate3d(calc(var(--mx) * var(--depth) * 1px), calc(var(--my) * var(--depth) * 0.6px), 0) rotateY(calc(var(--mx) * 8deg)) rotateX(calc(var(--my) * -6deg)); transition: transform 0.6s var(--ease), scale 0.5s var(--ease); }
.hv-laptop { --depth: 8; }
.hv-phone { --depth: 22; }
.hv-watch { --depth: 34; }
/* the device under the mouse comes forward */
@media (hover: hover) { .hv:hover { scale: 1.06; z-index: 6 !important; } }
.hv-laptop { left: 0; top: 9%; width: var(--u); }
.hv-t2f .hv-phone { left: calc(var(--u) * 0.6); bottom: 1%; width: calc(var(--u) * 0.37); z-index: 2; rotate: -3deg; animation: float 7s ease-in-out infinite; }
.hv-t2f .hv-watch { left: calc(var(--u) * 0.98); bottom: 5%; width: calc(var(--u) * 0.26); z-index: 3; rotate: 6deg; animation: float 6s ease-in-out -2s infinite; }
.hv-joj .hv-phone { left: calc(var(--u) * 0.8); bottom: 1%; width: calc(var(--u) * 0.34); z-index: 2; rotate: 3deg; animation: float 7s ease-in-out infinite; }
.intro-wide .hv-laptop { animation: float 9s ease-in-out -4s infinite; }
@keyframes float { 50% { translate: 0 -8px; } }
.hv-t2f::before, .hv-joj::before { content: ''; position: absolute; inset: 10% 5% 0; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.5; }
.hv-t2f::before { background: radial-gradient(closest-side, rgb(182 244 107 / 0.35), transparent); }
.hv-joj::before { background: radial-gradient(closest-side, rgb(238 155 107 / 0.35), transparent); }

/* ---------- cards: a device (or a drawing) over a short caption ---------- */
.card { display: flex; flex-direction: column; width: min(22rem, 84vw); overflow: hidden; background: linear-gradient(170deg, #141414, #0b0b0b 60%); border: 1px solid var(--line); }
.card-visual { position: relative; flex: 1; display: grid; place-items: center; padding: 1.8rem 1.5rem 1.2rem; min-height: 0; }
.card-copy { padding: 0 1.5rem 1.5rem; }
.card-copy h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); margin-bottom: 0.55rem; }
.card-copy p { color: #bdb6aa; font-size: 0.95rem; line-height: 1.55; }
.row-t2f .card-copy h3 { font: italic 800 clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem)/0.95 var(--t2f); text-transform: uppercase; }
.row-joj .card-copy h3 { font: 600 clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem)/1.08 var(--joj); }
.c-dev { width: 100%; }
.card-phone { width: min(84vw, max(17rem, calc(var(--vis) * 0.478 + 4rem))); }
.card-phone .c-dev { width: min(100%, calc(var(--vis) * 0.478)); }
.card-watch { width: min(84vw, max(17rem, calc(var(--vis) * 0.5 + 4rem))); }
.card-watch .c-dev { width: min(100%, calc(var(--vis) * 0.5)); }
.card-ipad { width: min(86vw, calc(var(--vis) * 0.76 + 4rem)); }
.card-ipad .c-dev { width: min(100%, calc(var(--vis) * 0.76)); }
.card-laptop { width: min(88vw, 46rem); }
.card-laptop .c-dev { width: min(86%, calc(var(--vis) * 1.3)); margin-bottom: 1.4rem; }
.card-soon, .card-phones { width: min(86vw, max(20rem, calc(var(--vis) * 0.95 + 4rem))); }
.pair { display: flex; align-items: center; justify-content: center; gap: 8%; width: 100%; }
.card-soon .dev-pixel, .card-phones .c-dev { width: min(44%, calc(var(--vis) * 0.43)); }
.card-soon .dev-wear { width: min(38%, calc(var(--vis) * 0.4)); }
.card-phones .dev-pixel { transform: translateY(6%) rotate(3deg); }
.card-sync { width: min(84vw, 24rem); }
.sync-art { width: 100%; max-height: var(--vis); overflow: visible; }
.sync-line { fill: none; stroke: rgb(182 244 107 / 0.35); stroke-width: 1.5; stroke-dasharray: 4 6; }
.sync-pulse { fill: #b6f46b; filter: drop-shadow(0 0 5px #b6f46b); }
.sync-cloud rect { fill: rgb(182 244 107 / 0.12); stroke: rgb(182 244 107 / 0.55); }
.sync-node rect { fill: #161616; stroke: rgb(236 231 223 / 0.25); }
.sync-art text { fill: #b6f46b; font: 600 9px/1 var(--sans); letter-spacing: 0.18em; text-anchor: middle; }
.sync-node text { fill: #d9d3c8; font-size: 7px; }
.soon-screen { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.5rem; background: radial-gradient(circle at 50% 40%, #1d2a12, #000 70%); color: #fff; text-align: center; }
.soon-screen b { font: italic 800 1.3rem/1 var(--t2f); letter-spacing: 0.02em; }
.soon-screen sup { font-size: 0.6em; }
.soon-screen span { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: #b6f46b; }
.soon-screen small { font: 400 0.6rem/1 var(--sans); color: #8a8a8a; }


/* ---------- Jump Over Jump screens: the real home page, rebuilt so a demo game can play ---------- */
/* the device's screen is the size container, so cqw / cqh below mean "of this screen" */
.dev-screen:has(.jd-screen) { container-type: size; }
.jd-screen { position: absolute; inset: 0; background: #1b1714; color: #f2ebe0; font-family: var(--sans); overflow: hidden; }
.jd-screen header { display: flex; align-items: center; justify-content: space-between; }
.jd-logo { display: flex; align-items: center; gap: 0.35em; margin: 0; font: 600 3cqw/1 var(--joj); letter-spacing: -0.01em; }
.jd-logo span { color: #ee9b6b; }
.jd-logo i { width: 1.15em; height: 0.8em; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff8ec 0 32%, #ee9b6b 34% 60%, #7a4b2c 62%); }
.jd-pill { display: flex; align-items: center; gap: 0.5em; padding: 0.45em 0.9em; border: 1px solid rgb(255 255 255 / 0.18); border-radius: 999px; font: 500 0.95cqw/1 var(--sans); color: #cfc6b8; }
.jd-pill i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #ee9b6b; animation: ping-joj 1.6s ease-out infinite; }
@keyframes ping-joj { from { box-shadow: 0 0 0 0 rgb(238 155 107 / 0.6); } to { box-shadow: 0 0 0 0.6em rgb(238 155 107 / 0); } }
.jd-title { margin: 0; font: 600 7cqw/1.02 var(--joj); letter-spacing: -0.02em; }
.jd-play { display: flex; justify-content: space-between; align-items: center; gap: 2em; width: fit-content; margin: 0; padding: 0.8em 1.1em; border-radius: 0.5em; background: #ee9b6b; color: #1b1714; font: 600 2cqw/1 var(--sans); }
/* the board's column is exactly the board's width, so a longer caption never pushes the headline */
.jd-desktop { display: grid; grid-template-columns: 72cqh minmax(0, 1fr); grid-template-rows: 9cqh minmax(0, 1fr); column-gap: 7cqw; padding: 3cqh 5cqw 4cqh; }
.jd-desktop header { grid-column: 1 / -1; }
.jd-icons { display: flex; gap: 2.4cqw; }
.jd-icons i { width: 1.6cqw; height: 1.6cqw; border: 0.25cqw solid #cfc6b8; border-radius: 30%; opacity: 0.7; }
.jd-stage { display: grid; align-content: start; gap: 2cqh; min-width: 0; }
.jd-desktop .jd-board { height: 72cqh; }
/* the caption line: a pause pill, whose turn it is, what is happening */
.jd-line { display: flex; align-items: center; gap: 0.7em; min-width: 0; margin: 0; font: 400 1.25cqw/1.2 var(--sans); color: #e6ddd0; white-space: nowrap; }
.jd-turn { flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: radial-gradient(circle, #3a332d 0 22%, #f2ebe0 26%); box-shadow: 0 0 0 0.12em #f2ebe0; transition: background 0.3s; }
.jd-turn-black { background: radial-gradient(circle, #f2ebe0 0 18%, #242220 22%); box-shadow: 0 0 0 0.12em #4a4744; }
.jd-line-text { overflow: hidden; text-overflow: ellipsis; }
.jd-phone .jd-line { font-size: 3cqw; white-space: normal; min-height: 2.4em; }
.jd-desktop .jd-copy { align-self: center; display: grid; gap: 5cqh; }
.jd-phone { display: flex; flex-direction: column; gap: 3.2cqh; padding: 12cqh 5.5cqw 5cqh; }
.jd-phone .jd-logo { font-size: 7.2cqw; }
.jd-phone .jd-title { font-size: 9.5cqw; }
.jd-phone .jd-board { width: 100%; flex: none; }
.jd-phone .jd-play { width: 100%; font-size: 4.6cqw; }
/* the board: brown squares, an orange edge on the black side, cream and graphite pieces */
/* tilted like the site's 3D board: the far edge recedes a little */
.jd-board { position: relative; aspect-ratio: 1; border-radius: 1.5%; background: #4a433b; box-shadow: 0 1.1cqmin 0 #2b2622, 0 3cqmin 5cqmin rgb(0 0 0 / 0.55); transform: perspective(250cqmin) rotateX(10deg); transform-origin: 50% 58%; }
.jd-board::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 1.2%; border-radius: 2px; background: #ee9b6b; opacity: 0.75; }
.jd-squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: inherit; overflow: hidden; }
.jd-squares > i { position: relative; transition: background 0.4s; }
.jd-light { background: #51493f; }
.jd-dark { background: #3b352f; }
/* the last route: where the piece left, where it touched down, strongest where it stands */
.jd-squares > [data-route]::after { content: ''; position: absolute; inset: 0; background: #86b56b; opacity: 0.46; }
.jd-squares > [data-route='hop']::after { opacity: 0.38; }
.jd-squares > [data-route='end']::after { opacity: 0.62; }
/* landing dots for the piece being weighed, popping in one after another */
.jd-dot { position: absolute; z-index: 1; inset: 33%; border-radius: 50%; border: 0.4cqmin solid #ee9b6b; animation: dot-pop 0.34s cubic-bezier(0.3, 1.7, 0.5, 1) var(--delay, 0ms) both; }
@keyframes dot-pop { from { transform: scale(0); opacity: 0; } }
.jd-ripple { position: absolute; z-index: 0; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgb(238 155 107 / 0.55), rgb(238 155 107 / 0) 70%); opacity: 0; pointer-events: none; }
.jd-piece { position: absolute; z-index: 2; left: calc(var(--x) * 12.5% + 1.25%); top: calc(var(--y) * 12.5% + 1.25%); width: 10%; aspect-ratio: 1; border-radius: 50%; transition: translate 0.24s cubic-bezier(0.3, 1.5, 0.5, 1), scale 0.24s cubic-bezier(0.3, 1.5, 0.5, 1), filter 0.24s, box-shadow 0.3s; }
.jd-flying { z-index: 4; transition: none; }
.jd-piece::after { content: ''; position: absolute; border-radius: 50%; }
.jd-white { background: radial-gradient(circle at 42% 35%, #fffaf1, #ece3d3 55%, #cdbfa8); box-shadow: 0 0.7cqmin 0 #a99b84, 0 1.4cqmin 2cqmin rgb(0 0 0 / 0.45); }
.jd-white::after { inset: 31%; border: 0.4cqmin solid #3a332d; }
.jd-black { background: radial-gradient(circle at 42% 35%, #4a4744, #262422 60%, #151413); box-shadow: 0 0.7cqmin 0 #0c0b0a, 0 1.4cqmin 2cqmin rgb(0 0 0 / 0.5); }
.jd-black::after { inset: 41%; background: #f2ebe0; }
/* the piece being weighed lifts off the board */
.jd-active { z-index: 3; translate: 0 -9%; scale: 1.06; filter: drop-shadow(0 1.6cqmin 1.2cqmin rgb(0 0 0 / 0.6)); box-shadow: 0 0 0 0.45cqmin #ee9b6b; }

/* ---------- Jump Over Jump detail cards ---------- */
.card-bots { width: min(86vw, 25rem); }
.bots { width: 100%; display: grid; gap: 0.4rem; }
.bots li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.8rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / 0.02); }
.bots b { font: 600 0.95rem/1.2 var(--joj); }
.bots small { grid-column: 1; color: var(--dim); font-size: 0.74rem; line-height: 1.3; }
.bot-level { grid-column: 2; grid-row: 1 / 3; align-self: center; display: flex; gap: 3px; }
.bot-level i { width: 5px; height: 15px; border-radius: 2px; background: rgb(255 255 255 / 0.12); }
.bot-level i.on { background: #ee9b6b; }
.bot-neural { border-color: rgb(238 155 107 / 0.55) !important; background: linear-gradient(90deg, rgb(238 155 107 / 0.14), transparent 70%) !important; }
.card-online { width: min(86vw, max(20rem, calc(var(--vis) * 0.62 + 4rem))); }
.online-art { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.online-art .c-dev { width: min(62%, calc(var(--vis) * 0.47)); }
.room-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.5rem 0.8rem; border-radius: 999px; background: #1d1a17; border: 1px solid rgb(238 155 107 / 0.5); color: #f2ebe0; font: 500 0.72rem/1 var(--sans); white-space: nowrap; box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.9); }
.room-chip b { font-weight: 600; color: #ee9b6b; }
.room-copied { left: 0; top: 16%; animation: float 6s ease-in-out infinite; }
.room-copied i { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #7fc97a; color: #0b0b0b; font-style: normal; font-size: 0.65rem; }
.room-vs { right: 0; bottom: 18%; animation: float 7s ease-in-out -3s infinite; }
.card-ranks { width: min(84vw, 23rem); }
.ranks { width: 100%; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #12100e; display: grid; gap: 0.6rem; }
.ranks-tabs { display: flex; gap: 0.3rem; margin: 0; }
.ranks-tabs span { padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); font: 500 0.7rem/1 var(--sans); color: #cfc6b8; }
.ranks-tabs .on { background: #ee9b6b; border-color: #ee9b6b; color: #1b1714; }
.ranks ol { display: grid; }
.ranks li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.ranks li span { font: italic 400 1.25rem/1 var(--serif); color: #ee9b6b; }
.ranks li small { color: var(--dim); font-size: 0.7rem; letter-spacing: 0.1em; }
.ranks li:not(.ranks-you) { opacity: 0.55; }
.ranks-you { border-radius: 10px; border-bottom-color: transparent !important; background: linear-gradient(90deg, rgb(238 155 107 / 0.2), transparent); animation: you-glow 2.8s ease-in-out infinite; }
.ranks-you b { color: #fff; }
.ranks-you i { font-style: normal; }
@keyframes you-glow { 50% { background-color: rgb(238 155 107 / 0.1); } }
.ranks-points { margin: 0; text-align: center; color: var(--dim); font-size: 0.72rem; letter-spacing: 0.08em; }
.card-learn { width: min(84vw, 22rem); }
.learn-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.learn-chips li { padding: 0.75rem 1.05rem; border-radius: 999px; border: 1px solid rgb(238 155 107 / 0.45); background: rgb(238 155 107 / 0.06); color: #f2d3bd; font: 600 0.82rem/1 var(--sans); }
.learn-chips li:nth-child(odd) { rotate: -3deg; }
.learn-chips li:nth-child(3n) { rotate: 4deg; }

/* ---------- the reel: twelve years of rewrites, inside the Jump Over Jump row ---------- */
.reel-frame { width: min(23rem, 80vw); padding: 2.4rem 1.2rem 2.2rem; background: #0d0c0b; border: 1px solid #1f1c19; border-radius: 6px; display: grid; gap: 0.5rem; align-content: start; }
.reel-frame::before, .reel-frame::after { content: ''; position: absolute; left: 0; right: 0; height: 1.3rem; background: radial-gradient(circle at 50% 50%, #2a2622 0 0.28rem, transparent 0.3rem) 0 50% / 1.6rem 100% repeat-x; }
.reel-frame::before { top: 0.35rem; } .reel-frame::after { bottom: 0.35rem; }
.reel-frame > * { min-width: 0; }
.rf-shot { aspect-ratio: 16 / 10; background: #000; border-radius: 4px; overflow: hidden; display: grid; place-items: center; margin-bottom: 1rem; }
.rf-shot img { width: 100%; height: 100%; object-fit: cover; }
.rf-logo .rf-shot img { object-fit: contain; padding: 12%; background: #f2efe6; }
.rf-neural .rf-shot img { object-position: 0% 50%; }
.rf-code { margin: 0; width: 100%; height: 100%; padding: 1.2rem 1.4rem; font: 400 clamp(0.62rem, 0.5rem + 0.4vw, 0.82rem)/1.55 ui-monospace, 'SF Mono', Menlo, monospace; color: #b6f46b; background: radial-gradient(circle at 30% 20%, #10170b, #050605 70%); white-space: pre; overflow: hidden; }
.rf-term { color: #e9e2d6; letter-spacing: 0.1em; line-height: 1.3; }
.rf-year { font: italic 400 clamp(2.4rem, 2rem + 1.6vw, 3.4rem)/1 var(--serif); color: #ee9b6b; }
.reel-frame h3 { font: 600 1.25rem/1.15 var(--joj); }
.reel-frame p:last-child { color: #a9a296; font-size: 0.95rem; }

/* ---------- Hi: links ---------- */
/* contact links: email as the main button, then a row of equal social tiles (icon over label) */
.links { display: grid; gap: 1.1rem; justify-items: start; margin-top: 0.6rem; }
.foot-links { justify-items: center; }
.link-email { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.4rem; border-radius: 999px; background: var(--amber); color: #111; text-decoration: none; font: 500 1rem/1 var(--sans); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.link-email:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgb(232 184 106 / 0.7); }
.link-email .social-icon { width: 1.35rem; height: 1.35rem; }
.socials { display: grid; grid-template-columns: repeat(6, 5.6rem); gap: 0.6rem; }
.socials a { display: grid; justify-items: center; align-content: center; gap: 0.6rem; height: 5.6rem; border-radius: 18px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.025); color: var(--text); text-decoration: none; font: 500 0.68rem/1 var(--sans); letter-spacing: 0.04em; transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.4s var(--ease); }
.socials a:hover { color: var(--amber); border-color: rgb(232 184 106 / 0.55); background: rgb(232 184 106 / 0.07); transform: translateY(-3px); }
.socials .social-icon { width: 1.75rem; height: 1.75rem; }
.social-icon { flex: none; display: block; }
@media (max-width: 720px) {
  .socials { grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; max-width: 26rem; gap: 0.45rem; }
  .socials a { height: auto; aspect-ratio: 1; border-radius: 16px; }
  .socials span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .socials .social-icon { width: 1.55rem; height: 1.55rem; }
  .link-email { font-size: 0.95rem; }
}

.hi .links { gap: 0.8rem; margin-top: 0.2rem; }
.hi .socials { grid-template-columns: repeat(6, 3.1rem); gap: 0.45rem; }
.hi .socials a { height: 3.1rem; border-radius: 14px; }
.hi .socials span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hi .socials .social-icon { width: 1.35rem; height: 1.35rem; }
.hi .link-email { padding: 0.75rem 1.2rem; font-size: 0.92rem; }

/* ---------- career: one card per company, today first ---------- */
.row-career { background: radial-gradient(60% 60% at 30% 40%, #15110d, var(--bg) 70%); }
.intro-career h2 { font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.8rem); }
/* every job, a tap away: the intro's list slides the row to the one you pick (rails.tsx).
   The names rise in like credits the first time the row is seen, and the last one picked stays lit. */
.career-index { display: grid; gap: 0.7rem; margin-top: 0.5rem; }
/* wider screens: two columns, read down then across, so the list doesn't make the row taller */
@media (min-width: 641px) { .career-index { grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, max-content); column-gap: 2rem; } }
.career-index a { display: inline-block; color: inherit; text-decoration: none; transition: transform 0.5s var(--ease); }
.career-index b { display: block; font: 400 clamp(1.45rem, 1.2rem + 0.6vw, 1.7rem)/1.12 var(--serif); color: #e4ded4; transition: color 0.3s; }
.career-index span { display: block; margin-top: 0.25rem; font: 500 0.66rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.career-index em { font-style: normal; color: var(--amber); }
.career-index i { display: inline-block; width: 6px; height: 6px; margin-left: 0.5rem; vertical-align: 1px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgb(232 184 106 / 0.6); animation: ping-amber 1.8s ease-out infinite; }
.career-index a:hover, .career-index a[data-picked] { transform: translateX(5px); }
.career-index a:hover b, .career-index a[data-picked] b { color: var(--amber); }
.career-index a:focus-visible { outline: 1px solid rgb(232 184 106 / 0.6); outline-offset: 4px; border-radius: 4px; }
.js-rails .career-index:not([data-shown]) li { opacity: 0; }
.career-index[data-shown] li { animation: credit-in 0.9s var(--ease) both; animation-delay: calc(0.15s + var(--i, 0) * 0.07s); }
@keyframes credit-in { from { opacity: 0; transform: translateY(10px); } }
.job { width: min(30rem, 84vw); padding: 1.8rem 1.6rem 1.6rem; background: linear-gradient(170deg, #141210, #0b0b0b 60%); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.job-featured { width: min(52rem, 88vw); border-color: rgb(232 184 106 / 0.45); background: radial-gradient(90% 60% at 0% 0%, rgb(232 184 106 / 0.09), transparent 70%), linear-gradient(170deg, #15120e, #0b0b0b 60%); }
/* one highlight on its own card, below 900px only (shown at the end of this file) */
.job-hl { flex-direction: column; align-items: flex-start; width: min(22rem, 78vw); padding: 1.8rem 1.6rem 1.6rem; border: 1px solid var(--line); background: linear-gradient(170deg, #141210, #0b0b0b 60%); }
.job-hl-featured { border-color: rgb(232 184 106 / 0.28); background: radial-gradient(90% 50% at 0% 0%, rgb(232 184 106 / 0.06), transparent 70%), linear-gradient(170deg, #15120e, #0b0b0b 60%); }
.job h3 { font-size: clamp(2.1rem, 1.4rem + 2vw, 3.2rem); line-height: 0.98; margin-block: 0.8rem 0.6rem; letter-spacing: -0.01em; }
.job-featured h3 { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); }
.job h3 a { text-decoration: none; background: linear-gradient(var(--amber), var(--amber)) 0 92% / 0 2px no-repeat; transition: background-size 0.7s var(--ease); }
.job h3 a:hover { background-size: 100% 2px; }
.job .job-built { font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem); }
.job .job-tech { margin-top: auto; padding-top: 1.3rem; }
.job-years { display: flex; align-items: center; gap: 1rem; font: italic 400 clamp(1.6rem, 1rem + 1.6vw, 2.6rem)/1 var(--serif); color: var(--amber); }
.job-years i { width: clamp(2rem, 4vw, 3.4rem); height: 1px; background: currentColor; opacity: 0.6; }
.film-panel h3 { font-size: clamp(2.8rem, 1.4rem + 4vw, 5.6rem); line-height: 0.95; margin-block: 0.9rem 0.8rem; letter-spacing: -0.02em; }
.film-panel h3 a { text-decoration: none; background: linear-gradient(var(--amber), var(--amber)) 0 92% / 0 2px no-repeat; transition: background-size 0.7s var(--ease); }
.film-panel h3 a:hover { background-size: 100% 2px; }
.job-meta { font: 500 0.72rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.8rem; }
.job-label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.9rem; }
.job-built { font: 400 clamp(1.2rem, 1rem + 0.6vw, 1.55rem)/1.45 var(--serif); color: var(--text); max-width: 42ch; }
.job-empty { color: var(--dim); font-style: italic; }
.job-clients { margin-top: 1.1rem; color: #c9c2b6; font-size: 0.95rem; }
.job-clients span { color: var(--dim); font: 500 0.66rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; margin-right: 0.4rem; }
.job-tech { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.3rem; }
.job-tech li { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.04em; padding: 0.5rem 0.75rem; border-radius: 999px; border: 1px solid var(--line); color: #d9d3c8; background: rgb(255 255 255 / 0.03); }
.job-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid rgb(232 184 106 / 0.5); color: var(--amber); font: 600 0.62rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; }
.job-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgb(232 184 106 / 0.6); animation: ping-amber 1.8s ease-out infinite; }
@keyframes ping-amber { to { box-shadow: 0 0 0 10px rgb(232 184 106 / 0); } }
.job-highlights { display: grid; gap: 0.6rem; margin-top: 1.4rem; max-width: 34rem; }
.job-highlights li { display: grid; gap: 0.2rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / 0.02); }
.job-highlights li.is-empty { border-style: dashed; }
.job-highlights b { font: 400 1.15rem/1.2 var(--serif); }
.job-highlights small { color: var(--dim); font-size: 0.85rem; }
.job-highlights .is-empty b { color: var(--dim); font-style: italic; }

/* ---------- posts: one card per post, newest first ---------- */
.row-posts { --row-h: min(46svh, 27rem); background: radial-gradient(60% 60% at 30% 40%, #101214, var(--bg) 70%); }
.intro-posts h2 { font-size: clamp(2.4rem, 1.3rem + 3vw, 4.2rem); }
.post-card { width: min(19rem, 76vw); }
.post-card > a { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; padding: 1.4rem 1.4rem 1.3rem; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(170deg, #141312, #0b0b0b 60%); color: var(--text); text-decoration: none; transition: border-color 0.3s, translate 0.5s var(--ease), background 0.3s; }
.post-card > a:hover { border-color: rgb(232 184 106 / 0.5); translate: 0 -4px; background: linear-gradient(170deg, #1a1714, #0d0c0b 60%); }
.post-year { font: italic 400 2.6rem/1 var(--serif); color: var(--amber); }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0; font: 500 0.64rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.post-lang { color: #f4d28e; }
.post-card h3 { font: 400 clamp(1.3rem, 1.1rem + 0.5vw, 1.6rem)/1.15 var(--serif); }
.post-excerpt { color: #a9a296; font-size: 0.88rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.post-card .post-tags { margin-top: auto; }
.post-tags li { padding: 0.35rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); color: #d9d3c8; font: 500 0.64rem/1 var(--sans); letter-spacing: 0.04em; }

/* ---------- footer ---------- */
.cin-foot { display: grid; justify-items: center; text-align: center; gap: 1.6rem; padding: clamp(6rem, 14vh, 9rem) 1.5rem 8rem; background: radial-gradient(70% 50% at 50% 0%, rgb(111 183 196 / 0.1), transparent 70%), #050505; }
.cin-foot h2 { font-size: clamp(4rem, 2rem + 9vw, 10rem); }
.foot-links { justify-content: center; }
.cin-fine { font-size: 0.8rem; color: var(--dim); }

/* ---------- film grain ---------- */
.cin::after { content: ''; position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 0.8s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }


@media (max-width: 640px) {
  .cin { --row-h: min(58svh, 32rem); }
  .row-hi { --row-h: min(56svh, 32rem); padding-top: 4.6rem; }
  .rail-arrow { width: 3.2rem; height: 3.2rem; }
  .rail-prev { display: none; }
  .intro { align-content: start; padding-top: 1rem; }
  /* narrower cards so a good slice of the next one always shows */
  .hi, .intro { width: 78vw; }
  .hi .socials { grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
  .intro-wide { --u: min(calc(var(--row-h) * 0.5), 60vw); width: 82vw; grid-template-columns: minmax(0, 1fr); row-gap: 1.2rem; align-content: start; }
  .intro-wide .intro-visual { order: -1; justify-self: center; }
  .intro-wide h2 { font-size: clamp(2.2rem, 1.6rem + 3vw, 3rem) !important; }
  .intro-wide .intro-text > p:not(.cin-kicker):not(.cap-ctas):not(.intro-note) { font-size: 0.95rem; }
  .hi .socials a { height: auto; aspect-ratio: 1; }
  .card, .job, .reel-frame { max-width: 78vw; }
  .row-hi .rail { align-items: flex-end; }
  .job, .job-hl { padding: 1.4rem 1.2rem 1.3rem; }
  .job-meta { margin-bottom: 1.2rem; }
  .job-clients { font-size: 0.86rem; }
  .job-tech { gap: 0.3rem; }
  .job-tech li { padding: 0.4rem 0.6rem; font-size: 0.64rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cin::after { animation: none; }
  .cin-intro { display: none; }
  .js-rails .slide { animation: none; }
  .rail-next, .row-down svg, .row-hi .clip, .hv, .room-chip, .ranks-you, .jd-pill i, .career-index i, .career-index[data-shown] li { animation: none; }
  .js-rails .career-index:not([data-shown]) li { opacity: 1; }
}

/* career highlights: a grid of what I built; on the featured card, two columns */
.job .job-highlights { max-width: none; width: 100%; }
/* the featured card reads in two columns: the story on the left, the highlights on the right */
@media (min-width: 900px) {
  .job-wide:not(.job-featured) { width: min(46rem, 88vw); }
  .job-wide { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 2.2rem; align-content: start; }
  .job-wide > * { grid-column: 1; }
  .job-wide .job-highlights { grid-column: 2; grid-row: 1 / span 7; margin-top: 0; gap: 0.45rem; }
  .job-wide .job-highlights li { padding: 0.7rem 0.9rem; }
  .job-wide .job-highlights small { font-size: 0.8rem; line-height: 1.45; }
}
.job-highlights b a { color: inherit; text-decoration: none; background: linear-gradient(var(--amber), var(--amber)) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease); }
.job-highlights b a:hover { background-size: 100% 1px; }
.job-highlights b a i { font-style: normal; font-size: 0.8em; color: var(--amber); }

/* below 900px each highlight is its own card after its job (home-page.tsx), so the row stays one screen tall */
.job-hl { display: none; }
@media (max-width: 899.98px) {
  .job-wide { width: min(30rem, 84vw); }
  .job-wide .job-highlights { display: none; }
  .job-hl { display: flex; }
}
.job-hl .job-label { margin-bottom: 1.4rem; }
.job-hl-list { display: grid; gap: 1.1rem; width: 100%; }
.job-hl-list > li + li { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.job-hl-list h3 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.1; margin-bottom: 0.45rem; }
.job-hl-n { font-style: italic; font-size: 0.75em; color: var(--amber); }
.job-hl-list p { color: #bdb6aa; font-size: 0.9rem; line-height: 1.55; }
.job-hl-list h3 a { color: inherit; text-decoration: none; background: linear-gradient(var(--amber), var(--amber)) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease); }
.job-hl-list h3 a:hover { background-size: 100% 1px; }
.job-hl-list h3 a i { font-style: normal; font-size: 0.7em; color: var(--amber); }