/* Natalia Rogon - portfolio. Values measured from the original Framer build at 1440px; tokens from the brand style guide. */
/* =========================================================================================
   DESIGN TOKENS: everything you are likely to tweak lives here.
   Change a value and every rule that uses it follows. Add ?tweak to any page URL for a live
   panel that edits these in the browser and copies the result back as CSS.
   ========================================================================================= */
:root {
  /* colour */
  --ink: #1e1e1e;
  --paper: #fff;
  --muted: #5a6271;
  --tag: #8a919b;
  --panel: #eef0f6;
  --line: #e7e8ea;
  --lilac: #e5daf6;        /* accent rotation: lilac > green > pink > peach */
  --green: #cfffb2;
  --pink: #ffc9c9;
  --peach: #fedca6;
  --cyan: #99eeff;

  /* layout + shape */
  --g-edge: clamp(16px, 2.2222vw, 32px);  /* logo, menu button, clock, LI / CV: exempt from the content margin */
  --g: 50px;                                /* page margin, left and right (never below 50px, at any screen size) */
  --content-max: 1120px;                    /* width of every home-page section below the hero (excluding the footer) */
  --head-gap: 48px;                         /* every section heading to its content (32px on phones) */
  --radius: 24px;                           /* cards & surfaces */
  --radius-nested: 15px;                    /* media inside cards */

  /* hero (desktop) */
  --hero-title-size: 81px;
  --hero-lead-size: 32px;
  --hero-lead-gap: 7px;                    /* name > tagline */
  --hero-sub-gap: 22px;                     /* tagline > role row */
  --hero-gap: 72px; /* equal space: logo to intro row, and headline to carousel */
  --hero-links-gap: 1px;                   /* LI / CV to carousel */

  /* carousel tiles */
  --tile-w: 181px;
  --tile-h: 520px;
  --tile-gap: 10px;
  --tile-corner: 80px;

  /* project cards */
  --card-ratio: 595 / 633;                  /* card shape (width / height) */
  --card-radius: 24px;
  --card-gap: 15px;                         /* gap between cards */
  --card-title-size: clamp(24px, 2.45vw, 35px);

  /* type */
  --sans: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Chivo Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- fonts: the same files the Framer site served (self-hosted, so the letterforms match exactly) ----------
   Inter Display = the display-optimised Inter that carries nearly all text; Inter Variable = the hero name only. */
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-display-400.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-display-500.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-display-700.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/inter-display-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/inter-display-500-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: italic; font-weight: 700; font-display: swap; src: url(fonts/inter-display-700-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-variable.woff2) format("woff2"); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.32 var(--sans); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd, blockquote { margin: 0; padding: 0; font-weight: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.wrap { padding-left: var(--g); padding-right: var(--g); max-width: 1600px; margin-left: auto; margin-right: auto; }

/* type scale */
.h-page { font-size: clamp(42px, 4.867vw, 70.08px); line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.h-sec { font-size: clamp(38px, 4.1667vw, 60px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.eyebrow, .eyebrow-sm { font-size: 15px; letter-spacing: 0; }
.num, .idx, .clock { font-family: var(--mono); }

/* ---------- header + menu ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; height: 80px; z-index: 60; pointer-events: none; }
.site-header > * { pointer-events: auto; }
/* as in Framer: once scrolled, a full-width 80px bar, white at 50% with a 10px backdrop blur */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.site-header.is-scrolled::before { opacity: 1; }
.logo { position: absolute; left: var(--g-edge); top: 0; width: 118px; height: 80px; overflow: hidden; display: block; }
.logo img { position: absolute; top: -12px; left: 0; width: 118px; max-width: none; height: auto; }
.menu-btn { position: absolute; right: var(--g-edge); top: 24px; width: 32px; height: 32px; background: none; border: 0; padding: 0; cursor: pointer; }
.menu-btn span { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--ink); border-radius: 2px; transition: transform .5s cubic-bezier(.65, 0, .2, 1); }
.menu-btn span:first-child { transform: translateY(-4px); }
.menu-btn span:last-child { transform: translateY(4px); }
.menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.site-header.menu-open::before { opacity: 0; }
.menu-scrim { display: none; }
.menu { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 100vh; height: 100dvh; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); padding: 140px var(--g) 28px; display: flex; flex-direction: column; justify-content: space-between; transform: translateY(-101%); transition: transform .55s cubic-bezier(.7, 0, .2, 1), visibility 0s .55s; visibility: hidden; }
.menu.open { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
.menu ul { display: grid; gap: 20px; }
.menu li { position: relative; }
.menu li a { display: flex; align-items: baseline; }
.menu li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 1.5px; background: var(--ink); transform: scaleX(.7); opacity: 0; transform-origin: left; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s; pointer-events: none; }
.menu li:hover::after, .menu li:focus-within::after { transform: scaleX(1); opacity: 1; }
.menu .idx { width: 68px; flex: none; font-family: var(--sans); font-size: 15px; }
.menu .lbl { font-size: clamp(40px, 4.1667vw, 60px); line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; transition: color .2s; }
.menu-foot { display: flex; justify-content: flex-end; align-items: flex-end; }
.menu-mail { font-size: clamp(22px, 2.2222vw, 32px); font-weight: 500; letter-spacing: -0.01em; }
.links { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.links span { color: var(--muted); line-height: 1; }

/* ---------- home hero ---------- */
main { padding-top: 0; }
.hero { position: relative; padding-top: 55px; padding-bottom: 32px; overflow: hidden; }
.hero-in { padding: calc(var(--hero-gap) + 4px) var(--g) var(--hero-gap); margin-top: 0; margin-bottom: 0; text-align: left; } /* 55px hero padding + 346px = carousel starts at 401px */
/* hero, statement left (Claude Design A): id row, big two-tone headline, availability + CV top right */
.hero-id { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px; text-align: left; }
.portrait { flex: none; width: 71px; height: 48px; border-radius: 999px; background: #e9e3d3 url(img/portrait.jpg) 50% 38% / cover no-repeat; }
.hero-id-t { display: flex; flex-direction: column; gap: 2px; }
.hero-id-t b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.hero-id-t small { font-size: 14px; color: var(--muted); }
.hero-lead { max-width: 1100px; margin: 0; font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11"; font-size: clamp(30px, calc(18.6px + 3.43vw), 68px); line-height: 1.02; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.hero-lead .dim { color: #8c8c8c; }
.hero-meta { position: absolute; top: 24px; right: calc(var(--g-edge) + 32px + 28px); height: 32px; display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 500; z-index: 2; }
.hero-cv { display: inline-flex; align-items: center; gap: 6px; }
.hero-cv:hover { color: var(--muted); }
.avail .short { display: none; }
.clock { position: absolute; left: var(--g-edge); top: 260px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; }
.hero-links { justify-content: flex-end; padding: 0 var(--g-edge); margin: 0 0 var(--hero-links-gap); } /* LI / CV sits with the carousel: right-aligned, then the gap below */
.marquee { margin-top: 0; padding-left: var(--tile-gap); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } /* tiles fade to white at both edges */
.track { display: flex; width: max-content; animation: scroll 140s linear infinite; } /* four sets: the first two are one loop, so it never runs out on wide screens */
.track > * { margin-right: var(--tile-gap); } /* margins, not gap, so every set is exactly the same width and the loop is seamless */
.tile { position: relative; flex: none; width: var(--tile-w); height: var(--tile-h); overflow: hidden; background: var(--lilac); }
.tile.a { border-radius: var(--tile-corner) 0; }
.tile.b { border-radius: 0 var(--tile-corner); }
.tile.green { background: var(--green); } .tile.pink { background: var(--pink); } .tile.peach { background: var(--peach); } .tile.cyan { background: var(--cyan); }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; }
@keyframes scroll { to { transform: translateX(-50%); } }
.statement { padding: 130px var(--g); text-align: center; }
.statement h2 { max-width: 640px; margin: 0 auto; font-size: clamp(28px, 3.3333vw, 48px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.js .statement .w { color: #c3c6cc; transition: color .25s; }

/* ---------- section scaffolding ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: var(--head-gap); }
.more { display: inline-flex; align-items: center; gap: 8px; font-size: 17.6px; font-weight: 500; letter-spacing: -0.02em; }
.more .chev { transition: transform .2s; }
.more:hover .chev { transform: translateX(4px); }
.more-left { margin-top: 40px; }
.projects { padding-top: 0; }
.wrap.projects, .skills-sec, .recs-sec, .dispatch { margin-bottom: 0; }
.skills-sec { margin-top: 147px; }
.recs-sec { margin-top: 72px; text-align: center; }
.dispatch { margin-top: 162px; }
.h-sec.center { margin-top: 12px; }

.pcards { display: block; }
.tags { display: flex; flex-wrap: wrap; gap: 8px 5px; }
.tags li { background: var(--tag); color: #fff; padding: 6px 10px; border-radius: 20px; font-size: 12px; line-height: 16px; font-weight: 500; }

/* ---------- skills ---------- */
.skills { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 calc(var(--g) * -1); padding: 0 var(--g); }
.skills::-webkit-scrollbar { display: none; }
.skill { position: relative; flex: 0 0 min(450px, 86vw); height: 500px; padding: 40px; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; scroll-snap-align: start; }
.skill.lilac { background: var(--lilac); } .skill.green { background: var(--green); } .skill.pink { background: var(--pink); } .skill.peach { background: var(--peach); }
.skill .num { font-size: 16px; }
.skill > img { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; transform: translate(-50%, -58%); }
.skill-text h3 { font-size: 15px; font-weight: 400; line-height: 20px; }
.skill-text p { margin-top: 10px; max-width: 300px; font-size: 14.08px; line-height: 1.406; }

/* ---------- recommendations ---------- */
.recs { margin-top: var(--head-gap); text-align: left; }
.rec { position: sticky; top: 100px; display: grid; grid-template-columns: 1fr 1fr; height: 748px; margin-bottom: 32px; border-radius: 32px; overflow: hidden; background: var(--panel); }
.rec-img img { width: 100%; height: 100%; object-fit: cover; }
.rec-text { padding: 56px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.rec blockquote { font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; font-weight: 500; max-width: 576px; }
.rec figcaption { margin-top: 96px; display: flex; flex-direction: column; gap: 8px; }
.rec figcaption b { font-size: 16px; font-weight: 500; }
.rec figcaption span { font-size: 17.6px; color: var(--muted); }

/* ---------- blog cards ---------- */

/* ---------- footer ---------- */
.site-footer { position: relative; margin: 48px var(--g) 20px; padding: 48px 48px 36px; background: var(--panel); border-radius: 36px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.foot-name { margin: 0; font-size: clamp(30px, 3.2vw, 46px); line-height: 1; letter-spacing: -0.035em; font-weight: 500; }
.foot-role, .foot-h, .snap dt { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.foot-role { margin: 14px 0 0; color: #7a5ac8; font-weight: 500; }
.foot-lead { margin: 28px 0 0; max-width: 420px; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -0.01em; color: var(--muted); }
.foot-lead .ink { color: var(--ink); }
.snap { margin: 40px 0 0; display: grid; gap: 14px; }
.foot-h.snap-h { margin: 40px 0 0; color: #7a5ac8; }
.snap div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: baseline; }
.snap dt { color: var(--muted); } .snap dd { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.foot-h { margin: 0 0 22px; color: var(--muted); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.foot-col a { display: inline-flex; align-items: baseline; gap: 10px; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; transition: color .2s; }
.foot-col a:hover { color: var(--muted); }
.foot-col a .idx { font-size: 11px; color: var(--muted); }
.foot-col .flock { display: inline-flex; margin-left: 6px; color: var(--muted); }
.foot-row { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(30, 30, 30, .1); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.btn, .totop { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; height: 52px; padding: 0 6px 0 22px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; transition: background .25s, color .25s; }
.btn i, .totop i { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .25s, color .25s; }
.btn i svg { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.btn:hover i svg { transform: rotate(45deg); } /* up-right arrow turns to point right, same as the card buttons */
.btn:hover i svg:has(.mv-down), .totop:hover i svg { transform: none; }
.btn:hover .mv-down, .totop:hover .mv-up { animation: arrowSlide .6s cubic-bezier(.22, 1, .36, 1); }
.totop:hover .mv-up { animation-name: arrowSlideUp; }
@keyframes arrowSlide { 0% { transform: none; opacity: 1; } 45% { transform: translateY(7px); opacity: 0; } 46% { transform: translateY(-7px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes arrowSlideUp { 0% { transform: none; opacity: 1; } 45% { transform: translateY(-7px); opacity: 0; } 46% { transform: translateY(7px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .btn i svg, .mv-down, .mv-up { animation: none !important; transition: none; } }
.btn.ghost { background: transparent; color: var(--ink); border-color: rgba(30, 30, 30, .25); }
.btn.ghost i { background: var(--ink); color: #fff; }
.btn.ghost:hover { border-color: var(--ink); }
.menu-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.copy { font-size: 15px; }

/* ---------- page heads ---------- */
.page-head { padding-top: 88px; }
.center-head { text-align: center; }
.sub { margin: 15px auto 0; max-width: 340px; font-size: 18.08px; line-height: 1.4; color: var(--muted); }
.center-head + .wrap { margin-top: var(--head-gap); }

/* about */
.about-top { padding-top: 106px; display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 668px); justify-content: space-between; align-items: start; }
.about-text { display: flex; flex-direction: column; gap: 20px; }
.about-text .h-page { margin-bottom: calc(var(--head-gap) - 20px); } /* the column already has a 20px gap */
.about-text p { font-size: 17.6px; line-height: 1.5; color: var(--muted); }
.about-text .links { margin-top: 0; }
.about-img { margin-top: 29px; }
.about-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; }

/* contact */
.contact-head { padding-top: 144px; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 48px; border-bottom: 1px solid var(--line); max-width: none; }
.contact-head, .contact-grid { max-width: 1600px; }
.contact-head > div { max-width: 520px; }
.eyebrow-sm { font-size: 14px; margin-bottom: 14px; }
.contact-grid { padding-top: 40px; display: grid; grid-template-columns: 1fr 500px; gap: 40px; align-items: start; padding-bottom: 120px; }
.big-mail { position: relative; justify-self: start; font-size: clamp(22px, 2.2222vw, 32px); font-weight: 500; letter-spacing: -0.01em; padding-bottom: 16px; }
.big-mail::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 1.5px; background: var(--ink); transition: width .3s; }
.big-mail:hover::after { width: 100%; }
.form { display: flex; flex-direction: column; gap: 35px; }
.form h2 { font-size: 14.08px; font-weight: 500; margin-bottom: -15px; }
.form label { display: flex; flex-direction: column; gap: 12px; font-size: 14.08px; font-weight: 500; }
.form input, .form textarea { width: 100%; font: 400 13px/1.4 var(--sans); color: var(--ink); padding: 14px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(30, 30, 30, .04); resize: vertical; }
.form input { height: 48px; }
.form textarea { min-height: 116px; }
.form ::placeholder { color: #8a919b; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.send { height: 52px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .08em; cursor: pointer; transition: opacity .2s; }
.send:hover { opacity: .85; }
.hp { position: absolute; left: -9999px; }
.form-status { font-size: 14px; min-height: 1.3em; margin-top: -15px; }

/* ---------- case study ---------- */
.case { padding-top: 120px; display: grid; grid-template-columns: 480px minmax(0, 824px); column-gap: 72px; justify-content: space-between; align-items: start; }
.case-side { position: sticky; top: 61px; padding-top: 39px; }
.back { display: inline-flex; align-items: center; gap: 10px; font-size: 14.08px; font-weight: 500; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }
.back-chev { transform: rotate(180deg); }
.case-side .h-sec { margin-top: 24px; }
.facts { margin-top: 34px; display: grid; gap: 30px; }
.facts .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.facts dt { font-size: 12px; color: var(--muted); padding-top: 3px; }
.facts dd { font-size: 14.08px; text-align: right; }
.facts .tags { justify-content: flex-end; max-width: 350px; }
.hero-fig img { width: 100%; aspect-ratio: 824 / 450; object-fit: cover; border-radius: 12px; }
.lede { margin-top: 56px; font-size: 17.6px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.case .prose { margin-top: 52px; }
.prose > * + * { margin-top: 20px; }
.prose p, .prose li { font-size: 15px; line-height: 1.32; }
.prose h2 { font-size: clamp(30px, 3.3333vw, 48px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.case .prose > h2:not(:first-child) { margin-top: 132px; }
.prose h3.subhead { margin-top: 40px; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }
.prose h3.subhead strong { font-weight: 700; }
.prose ul { padding-left: 18px; list-style: disc; }
.prose ol { padding-left: 18px; list-style: decimal; }
.prose li > ul, .prose li > ol { margin-top: 0; }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose figure { margin-top: 40px; }
.prose figure + * { margin-top: 40px; }
.prose figure img, .prose figure video { width: 100%; height: auto; }
.more-projects { margin-top: 160px; }
.more-projects .h-sec { margin-bottom: var(--head-gap); }

/* ---------- blog post ---------- */
.post { max-width: 800px; margin: 0 auto; padding: 186px var(--g) 0; }
.post .back { position: relative; left: 24px; }
.post .back .chev { position: absolute; left: -24px; }
.post .h-page { margin-top: 28px; }
.post .hero-fig { margin-top: 40px; }
.post .hero-fig img { aspect-ratio: 800 / 333; border-radius: 32px; }
.post-date { display: block; margin-top: 24px; font-size: 15px; }
.post .prose { margin-top: 40px; }
.post .prose p, .post .prose li { font-size: 17.6px; line-height: 1.5; color: var(--muted); }
.post .prose h2 { color: var(--ink); margin-top: 86px; }
.post .prose h3 { margin-top: 40px; font-size: clamp(24px, 2.2222vw, 32px); line-height: 1.1; letter-spacing: -0.01em; font-weight: 500; color: var(--ink); }
.post .prose h2 + h3 { margin-top: 40px; }
.post .prose p:has(> em:only-child) { margin-top: 40px; }
.post .prose p.num { margin-top: 40px; font-size: 14px; }
.post .prose p.num + p { margin-top: 14px; }
.post .prose strong { color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .case { grid-template-columns: 1fr; padding-top: 100px; }
  .case-side { position: static; padding-top: 0; margin-bottom: 40px; }
  .case-side .h-sec { font-size: clamp(34px, 7vw, 56px); }
  .about-top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 800px) {
  .rec { position: relative; top: auto; grid-template-columns: 1fr; height: auto; }
  .rec-img { aspect-ratio: 1; }
  .rec-text { padding: 28px 24px 36px; }
  .rec blockquote { font-size: 22px; }
  .rec figcaption { margin-top: 32px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .clock { display: none; }
  .hero-links { position: static; justify-content: center; margin-top: 22px; margin-bottom: 28px; font-size: 16px; }
  .hero-links a { padding: 6px 4px; }
  .marquee { margin-top: 0; }
  .tile { width: 140px; height: 400px; }
  .statement { padding: 80px var(--g); }
  .skills-sec { margin-top: 90px; } .dispatch { margin-top: 100px; }
  :root { --head-gap: 32px; }
  .site-footer { padding: 32px 24px 24px; border-radius: 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-id { grid-column: 1 / -1; }
  .foot-row { margin-top: 36px; }
  .post { padding-top: 130px; }
  .prose figure { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* ---------- hello: closing contact card ---------- */
.hello { margin-top: 140px; }
.hello-card { position: relative; isolation: isolate; display: grid; place-items: center; height: clamp(500px, 46vw, 680px); border-radius: var(--radius); overflow: hidden; background: #0b0908; color: #fff; }
.hello-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: saturate(.92) brightness(.62); }
.hello-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 95% at 50% 58%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%), linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .6)); }
.hello-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 0 24px; text-align: center; }

/* liquid-glass bar: blurred backdrop, inner highlights, and a soft light that follows the pointer */
.glass { --mx: 50%; --my: 0%; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; padding: 7px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .17); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -10px 18px rgba(255, 255, 255, .03), 0 18px 44px rgba(0, 0, 0, .38); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(140px 70px at var(--mx) var(--my), rgba(255, 255, 255, .32), transparent 70%); mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s; }
.glass:hover::before { opacity: 1; }
.glass a, .glass button { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.glass a:hover, .glass button:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.glass :focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.glass .icon-btn { width: 40px; height: 40px; padding: 0; margin-left: 4px; background: rgba(255, 255, 255, .1); }
.glass .icon-btn svg + svg, .glass .icon-btn.done svg:first-child { display: none; }
.glass .icon-btn.done svg + svg { display: block; }
.js .glass { opacity: 0; transform: translateY(10px) scale(.98); }
.js .hello.on .glass { opacity: 1; transform: none; }

/* the name behaves like selected text */
.sel-name { position: relative; display: inline-block; font-size: clamp(30px, 8.2vw, 116px); font-weight: 500; line-height: 1.08; letter-spacing: -0.04em; color: rgba(255, 255, 255, .8); -webkit-user-select: none; user-select: none; }
.sel-chars { position: relative; z-index: 1; white-space: pre; cursor: text; }
.sel-box, .handle { position: absolute; top: 7%; bottom: 3%; left: 0; }
.sel-box { z-index: 0; width: 0; background: rgba(207, 255, 178, .42); border-radius: 3px; pointer-events: none; }
.handle { z-index: 2; width: 2px; margin-left: -1px; background: var(--green); cursor: ew-resize; touch-action: none; opacity: 0; transition: opacity .25s; }
.handle::before { content: ""; position: absolute; inset: -6px -16px; }
.handle::after { content: ""; position: absolute; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px rgba(255, 255, 255, .0); }
.handle.start::after { top: -9px; }
.handle.end::after { bottom: -9px; }
.hello.sel-on .handle { opacity: 1; }
.hello:not(.sel-on) .sel-box { display: none; }
.hello-sub { font-size: 17px; letter-spacing: -0.01em; color: rgba(255, 255, 255, .62); }
.hello-status { min-height: 1.3em; margin-top: -14px; font-size: 13px; color: rgba(255, 255, 255, .72); }

@media (max-width: 800px) {
  .hello { margin-top: 90px; }
  .hello-card { height: 520px; }
  .glass a { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .glass { transition: none; } }
/* still frame under the footage: shown until the video paints, and for reduced-motion / no-autoplay cases */
.hello-card::before { content: ""; position: absolute; inset: 0; z-index: -3; background: url(img/hello-poster.jpg) 50% 60% / cover no-repeat; filter: saturate(.92) brightness(.62); }

/* ---------- progressive blur along the bottom of the window (as on the Framer original) ----------
   eight stacked backdrop blurs, each masked to its own band, so the content softens gradually as it nears the fold */
.edge-blur { position: fixed; left: 0; right: 0; bottom: 0; height: min(180px, 22vh); z-index: 30; pointer-events: none; transition: opacity .35s; }
.edge-blur.hide { opacity: 0; }
.edge-blur i { position: absolute; inset: 0; -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b)); -webkit-mask-image: var(--m); mask-image: var(--m); }
.edge-blur i:nth-child(1) { --b: 0.234375px; --m: linear-gradient(rgba(0,0,0,0) 0%, #000 12.5%, #000 25%, rgba(0,0,0,0) 37.5%); }
.edge-blur i:nth-child(2) { --b: 0.46875px; --m: linear-gradient(rgba(0,0,0,0) 12.5%, #000 25%, #000 37.5%, rgba(0,0,0,0) 50%); }
.edge-blur i:nth-child(3) { --b: 0.9375px; --m: linear-gradient(rgba(0,0,0,0) 25%, #000 37.5%, #000 50%, rgba(0,0,0,0) 62.5%); }
.edge-blur i:nth-child(4) { --b: 1.875px; --m: linear-gradient(rgba(0,0,0,0) 37.5%, #000 50%, #000 62.5%, rgba(0,0,0,0) 75%); }
.edge-blur i:nth-child(5) { --b: 3.75px; --m: linear-gradient(rgba(0,0,0,0) 50%, #000 62.5%, #000 75%, rgba(0,0,0,0) 87.5%); }
.edge-blur i:nth-child(6) { --b: 7.5px; --m: linear-gradient(rgba(0,0,0,0) 62.5%, #000 75%, #000 87.5%, rgba(0,0,0,0) 100%); }
.edge-blur i:nth-child(7) { --b: 15.0px; --m: linear-gradient(rgba(0,0,0,0) 75%, #000 87.5%, #000 100%, rgba(0,0,0,0) 112.5%); }
.edge-blur i:nth-child(8) { --b: 30.0px; --m: linear-gradient(rgba(0,0,0,0) 87.5%, #000 100%, #000 112.5%, rgba(0,0,0,0) 125%); }
html.smooth { scroll-behavior: auto !important; }

/* ---------- hero tagline: each phrase is painted in with one of the brand accents (echoes the name-selection sweep in the contact card) ---------- */
.hl { --c: var(--lilac); padding: .03em .3em; margin: 0 -.05em; border-radius: .36em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(var(--c), var(--c)) 0 0 / 100% 100% no-repeat; }
.hl-green { --c: var(--green); }
.hl-pink { --c: var(--pink); }
.js .hl { background-size: 0% 100%; animation: paint .95s cubic-bezier(.2, .7, .2, 1) .35s forwards; }
.js .hl-green { animation-delay: .62s; }
.js .hl-pink { animation-delay: .89s; }
@keyframes paint { to { background-size: 100% 100%; } }

/* role + availability row */
.hero-sub .role { letter-spacing: .01em; }
.avail { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 12px; border-radius: 999px; background: var(--green); color: var(--ink); font-weight: 500; letter-spacing: -0.005em; }
.avail i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #1e7a3a; }
.avail i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(47, 191, 107, .55); animation: ping 2.6s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.55); opacity: 1; } 75%, 100% { transform: scale(1.5); opacity: 0; } }
@media (max-width: 800px) {
  .hero-id { margin-bottom: 22px; gap: 12px; }
  .portrait { width: 59px; height: 40px; }
  .hero-id-t b { font-size: 15px; } .hero-id-t small { font-size: 13px; }
  .hero-meta { right: calc(var(--g-edge) + 32px + 12px); gap: 12px; font-size: 14px; }
  .avail { padding: 7px 12px; font-size: 12px; white-space: nowrap; }
  .avail .full { display: none; } .avail .short { display: inline; }
  .marquee { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hl { animation: none; background-size: 100% 100%; }
  .avail i::after { animation: none; opacity: 0; }
}

/* ---------- Latest projects: header, cards, closing call to action ---------- */
.eyebrow-mono { margin-bottom: 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.2; letter-spacing: .01em; color: var(--muted); }
.projects .sec-head-rich { margin-top: 0; }

.ico { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }


@media (max-width: 800px) {
  .projects .sec-head-rich { margin-top: 0; }
}

/* the headline wraps on its own (balanced), no forced break */
.hero-lead .lb { display: none; }


/* ---------- Latest projects: image-first cards (two-column grid, text over the image) ---------- */
.pcards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); }
.pcard { position: relative; isolation: isolate; display: block; aspect-ratio: var(--card-ratio); border-radius: var(--card-radius); overflow: hidden; background: #14151a; color: #fff; }
.pcard-img { position: absolute; inset: 0; z-index: -2; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.22, 1, .36, 1); }
.pcard:hover .pcard-img img { transform: scale(1.045); }
.pcard-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(12, 13, 12, .01) 32%, rgba(12, 13, 12, .86)), linear-gradient(90deg, rgba(12, 13, 12, .3), rgba(0, 0, 0, 0) 72%); }
.pbadge { position: absolute; top: 24px; left: 24px; display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 13px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: -0.005em; text-transform: none; }
.pbadge img { height: 11px; width: auto; }
.pcard-body { position: absolute; left: 32px; right: 96px; bottom: 32px; }
.plabel { font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; text-transform: none; color: rgba(255, 255, 255, .7); }
.pcard h3 { margin-top: 12px; font-size: var(--card-title-size); line-height: 1.06; letter-spacing: -0.035em; font-weight: 500; text-wrap: balance; }
.pdesc { margin-top: 14px; max-width: 440px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .78); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.parrow { position: absolute; right: 24px; bottom: 24px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: var(--ink); border: 1px solid rgba(255, 255, 255, .18); color: #fff; transition: transform .5s cubic-bezier(.22, 1, .36, 1), background .3s, color .3s; }
.pcard:hover .parrow { background: #fff; color: var(--ink); transform: rotate(45deg); }
.pcard:focus-visible { outline-offset: 4px; }

/* the closing tile: same footprint, quiet and light */
.pcard-more { display: flex; flex-direction: column; justify-content: space-between; padding: 32px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.pcard-more .plabel { color: var(--muted); }
.pcard-more h3 { margin-top: 0; max-width: 9em; color: var(--ink); }
.pcard-more .parrow { right: 24px; bottom: 24px; }
.pcard-more:hover .parrow { background: var(--ink); color: #fff; }
.pcard-more-body { display: grid; gap: 14px; }
.projects + .skills-sec { margin-top: 120px; }

@media (max-width: 1000px) {
  .pcard-body { left: 24px; right: 84px; bottom: 24px; }
  .pbadge { top: 18px; left: 18px; }
  .parrow { right: 18px; bottom: 18px; width: 42px; height: 42px; }
}
@media (max-width: 760px) {
  .pcards { grid-template-columns: 1fr; gap: 20px; }
  .pcard { aspect-ratio: 4 / 5; }
  .pcard-body { left: 22px; right: 76px; bottom: 22px; }
  .pdesc { -webkit-line-clamp: 3; }
  .pcard-more { aspect-ratio: auto; min-height: 220px; }
  .projects + .skills-sec { margin-top: 80px; }
}
/* the Projects page: three cards, the last one spans the full width */
.pcards.on-page .pcard:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 1224 / 560; }
@media (max-width: 760px) { .pcards.on-page .pcard:last-child:nth-child(odd) { aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .pcard-img img, .parrow { transition: none; } }

/* ---------- project card hover (modelled on the reference): description unfolds, text drifts up, arrow widens into a labelled pill ---------- */
.pdesc { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(0); transition: max-height .32s cubic-bezier(.22, 1, .36, 1), margin-top .32s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, transform .32s cubic-bezier(.22, 1, .36, 1); }
.pcard:is(:hover, :focus-visible) .pdesc { max-height: 4.4em; margin-top: 14px; opacity: 1; transform: translateY(-5px); }
.pcard-img img { transition-duration: .65s; }
.pcard:is(:hover, :focus-visible) .pcard-img img { transform: scale(1.065); }

.parrow { width: auto; min-width: 46px; height: 46px; padding: 0 15px; gap: 0; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: background .22s, color .22s, box-shadow .22s; }
.plink { display: block; max-width: 0; margin-right: 0; overflow: hidden; opacity: 0; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; transition: max-width .42s cubic-bezier(.22, 1, .36, 1), margin-right .42s cubic-bezier(.22, 1, .36, 1), opacity .22s ease; }
.pcard:is(:hover, :focus-visible) .parrow { transform: none; background: #fff; color: var(--ink); box-shadow: 0 8px 26px rgba(0, 0, 0, .25); }
.pcard:is(:hover, :focus-visible) .plink { max-width: 140px; margin-right: 10px; opacity: 1; }
.pcard-more:is(:hover, :focus-visible) .parrow { background: var(--ink); color: #fff; box-shadow: none; }

/* no hover on touch screens: keep the description visible and the arrow compact */
@media (hover: none) {
  .pdesc { max-height: 4.4em; margin-top: 12px; opacity: 1; }
  .pcard:hover .pcard-img img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pdesc, .plink, .parrow { transition: none; }
  .pcard:is(:hover, :focus-visible) .pcard-img img { transform: none; }
}


/* arrow twist (same easing and angle as the "View all" button above the section) */

/* narrow cards: the pill can't sit beside the description, so the text block lifts above the button row on hover */
.pcard { container-type: inline-size; }
.pcard-body { transition: bottom .32s cubic-bezier(.22, 1, .36, 1); }
@container (max-width: 639px) {
  .pcard:is(:hover, :focus-visible) .pcard-body { bottom: 84px; }
}
@media (hover: none) { .pcard-body { transition: none; } }
@media (prefers-reduced-motion: reduce) { .pcard-body, .parrow svg { transition: none; } }

/* card button = the "View all" button: at rest a black circle with the arrow; on hover it grows into a white bordered pill,
   label on the left, black arrow circle on the right, and the circle twists 45deg */
.parrow { height: 46px; min-width: 46px; padding: 0; gap: 0; background: transparent; border: 1px solid transparent; box-shadow: none; color: var(--ink); overflow: hidden; border-radius: 999px; transition: background .25s, border-color .25s, padding .42s cubic-bezier(.22, 1, .36, 1), box-shadow .25s; }
.pico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: width .42s cubic-bezier(.22, 1, .36, 1), height .42s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.pcard:is(:hover, :focus-visible) .parrow { background: #fff; border-color: var(--line); padding: 0 7px 0 18px; box-shadow: 0 8px 26px rgba(0, 0, 0, .22); transform: none; }
.pcard:is(:hover, :focus-visible) .pico { width: 30px; height: 30px; transform: rotate(45deg); box-shadow: none; }
.pcard:is(:hover, :focus-visible) .plink { max-width: 150px; margin-right: 12px; opacity: 1; color: var(--ink); }
.plink { font-size: 15px; letter-spacing: -0.01em; }
.pcard-more:is(:hover, :focus-visible) .parrow { background: #fff; color: var(--ink); box-shadow: 0 8px 26px rgba(30, 30, 30, .08); }
@media (prefers-reduced-motion: reduce) { .parrow, .pico { transition: none; } }

/* "Password protected" label (top-left of a locked project card) */
.pbadge.lock { gap: 8px; padding: 0 14px 0 12px; background: rgba(25, 31, 69, .82); color: #fff; border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pbadge.lock svg { flex: none; }

/* ---------- blog cards: same family as the project cards (pastel tile, pill, big title, unfolding excerpt, morphing arrow) ---------- */
.bcard { --c: var(--lilac); background: var(--c); color: var(--ink); aspect-ratio: 595 / 520; transition: background .5s ease; }
.bcard .pbadge { background: rgba(255, 255, 255, .88); }
.bmeta { position: absolute; top: 31px; right: 28px; font-size: 13px; font-weight: 500; color: rgba(30, 30, 30, .6); }
.bcard .plabel { color: rgba(30, 30, 30, .6); }
.bcard .pdesc { color: rgba(30, 30, 30, .72); }
.bcard h3 { letter-spacing: -0.04em; }
/* the graphic: the arch tile from the hero carousel, in a deeper shade of the card colour; its corners swap on hover */
.barch { position: absolute; z-index: -1; right: 8%; top: 92px; width: 30%; height: 44%; background: color-mix(in srgb, var(--c) 86%, #1e1e1e); border-radius: 80px 0; transition: border-radius .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1); }
.bcard:is(:hover, :focus-visible) .barch { border-radius: 0 80px; transform: translateY(-8px) rotate(-3deg); }
.bcard .parrow { box-shadow: none; }
.bcard:is(:hover, :focus-visible) .parrow { box-shadow: 0 8px 26px rgba(30, 30, 30, .14); }
@media (max-width: 1000px) { .bmeta { top: 25px; right: 22px; } .bcard { aspect-ratio: 1 / 1; } .barch { top: 76px; height: 28%; } }
@media (max-width: 760px) { .bcard { aspect-ratio: 1 / 1.1; } .barch { top: 62px; border-radius: 56px 0; } .bcard:is(:hover, :focus-visible) .barch { border-radius: 0 56px; } }
@media (prefers-reduced-motion: reduce) { .barch { transition: none; } }

/* ---------- how I work (home page): a sketch on a card turns into a shipped screen as you scroll ----------
   The section is a tall track with a sticky stage; assets/main.js maps scroll progress onto the card.
   Without JS (or with reduced motion) it shows the finished card and all four principles. */
.process { margin-top: 147px; }
.projects + .process { margin-top: 120px; }
.process-track { position: relative; height: 420vh; }
.process-stage { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; padding: 104px 0 calc(min(180px, 22vh) + 24px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); grid-template-rows: minmax(0, 1fr); gap: 64px; } /* one row exactly the height of the content box, so nothing can run under the bottom blur */
.process-copy { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.process-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.process-sub { max-width: 320px; font-size: 17.6px; line-height: 1.5; color: var(--muted); }
.process-list { display: flex; flex-direction: column; gap: 22px; }
.process-item { display: flex; gap: 20px; align-items: baseline; color: var(--ink); transition: color .35s ease; }
.js .process-item { color: #c3c6cc; }
.js .process-item.is-on, .js .process-item.is-done { color: var(--ink); }
.process-item .num { flex: none; width: 72px; font-size: 15px; }
.process-item h3 { font-size: clamp(22px, 1.8056vw, 26px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; }
.process-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s cubic-bezier(.2, .8, .2, 1), opacity .4s ease; }
.process-body > p { min-height: 0; overflow: hidden; max-width: 420px; padding-top: 10px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.js .process-item:not(.is-on) .process-body { grid-template-rows: 0fr; opacity: 0; }

.process-panel { min-width: 0; min-height: 0; border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; overflow: hidden; }
.process-fit { --s: 1; flex: none; width: calc(520px * var(--s)); height: calc(600px * var(--s)); }
.process-card { position: relative; width: 520px; height: 600px; box-sizing: border-box; background: var(--paper); border: 1.5px solid var(--paper); border-radius: var(--radius); overflow: hidden; transform-origin: 0 0; transform: scale(var(--s)); }
.process-card i, .process-card span { display: block; font-style: normal; }
.pc { position: absolute; box-sizing: border-box; border: 1.5px solid transparent; }
.pc-title { left: 40px; top: 48px; width: 260px; height: 24px; border-radius: 12px; background: var(--ink); }
.pc-media { left: 40px; top: 100px; width: 440px; height: 220px; border-radius: var(--radius-nested); background: var(--lilac); }
.pc-line { left: 40px; top: 350px; width: 400px; height: 14px; border-radius: 7px; background: #d9dbe0; }
.pc-line2 { left: 40px; top: 376px; width: 300px; height: 14px; border-radius: 7px; background: #d9dbe0; }
.pc-chip { left: 40px; top: 422px; width: 130px; height: 40px; border-radius: 20px; background: var(--green); }
.pc-chip2 { left: 182px; top: 422px; width: 130px; height: 40px; border-radius: 20px; background: var(--pink); }
.process-card .pc-btn { left: 40px; top: 512px; width: 440px; height: 56px; border-radius: 28px; background: var(--ink); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.pc-grid { position: absolute; inset: 0; opacity: 0; background-image: repeating-linear-gradient(90deg, var(--lilac) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, var(--lilac) 0 1px, transparent 1px 40px); }
.process-card .pc-live { position: absolute; left: 392px; top: 44px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--green); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.process-card .pc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.pc-ring { position: absolute; left: 228px; top: 518px; width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ink); opacity: 0; }
.pc-cursor { position: absolute; left: 250px; top: 538px; opacity: 0; transform-origin: 2px 2px; }
.process-stages { position: relative; flex: none; width: 100%; height: 20px; font-family: var(--mono); font-size: 15px; }
.process-stages span { position: absolute; left: 0; right: 0; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.process-stages span.is-past { transform: translateY(-10px); }
.process-stages span.is-on { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .process-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 800px) {
  .process { margin-top: 90px; }
  .projects + .process { margin-top: 80px; }
  .process-track { height: 380vh; }
  .process-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 20px; padding-top: 84px; }
  .process-copy { gap: 18px; }
  .process-head { gap: 0; }
  .process-head .process-sub, .process-head .more { display: none; }
  .process-head .h-sec br { display: none; }
  .js .process-item:not(.is-on) { display: none; }
  .process-item .num { width: auto; }
  .process-panel { border-radius: 24px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-track { height: auto; }
  .process-stage { position: relative; height: auto; padding-bottom: 0; }
  .process-panel { padding: 48px 24px; }
  .js .process-item, .js .process-item:not(.is-on) { color: var(--ink); display: flex; }
  .js .process-item:not(.is-on) .process-body { grid-template-rows: 1fr; opacity: 1; }
  .process-item, .process-body, .process-stages span { transition: none; }
}

/* phones: the card button is always open and spans the card (inside the card padding), as on hover */
@media (max-width: 800px) {
  .pcard .parrow { left: 24px; right: 24px; width: auto; justify-content: space-between; flex-direction: row; background: #fff; border-color: var(--line); padding: 0 7px 0 18px; box-shadow: 0 8px 26px rgba(0, 0, 0, .22); color: var(--ink); }
  .pcard .plink { max-width: none; margin-right: 12px; opacity: 1; color: var(--ink); }
  .pcard .pico { width: 30px; height: 30px; transform: rotate(45deg); box-shadow: none; }
  .bcard .parrow { box-shadow: 0 8px 26px rgba(30, 30, 30, .14); }
  .pcard .pcard-body, .pcard:is(:hover, :focus-visible) .pcard-body { right: 24px; bottom: 88px; }
}
@media (max-width: 560px) { .pcard .parrow { left: 18px; right: 18px; } .pcard .pcard-body, .pcard:is(:hover, :focus-visible) .pcard-body { left: 22px; right: 22px; bottom: 82px; } }

/* hovering the intro row: a small liquid-glass pill, same material as the contact bar, hints it opens LinkedIn */
.hero-id { position: relative; }
.id-peek { --mx: 50%; --my: 0%; position: absolute; left: calc(100% - 48px); bottom: calc(100% + 6px); z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; white-space: nowrap; color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1; background: linear-gradient(180deg, rgba(60, 64, 80, .82), rgba(30, 32, 44, .88)); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 34px rgba(20, 22, 40, .28); opacity: 0; transform: translateY(6px) scale(.97); transform-origin: 0 100%; pointer-events: none; transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.id-peek::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; } /* hover bridge: the pointer can cross the gap without losing the pill */
.id-peek::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120px 60px at var(--mx) var(--my), rgba(255, 255, 255, .3), transparent 70%); mix-blend-mode: soft-light; }
.pk-in { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #0a66c2; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -0.03em; }
.pk-t { padding: 0 8px 0 6px; }
.pk-go { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; }
@media (hover: hover) {
  .hero-id:hover .id-peek, .hero-id:focus-visible .id-peek { opacity: 1; transform: none; pointer-events: auto; }
  .hero-id:hover .portrait, .hero-id:focus-visible .portrait { box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(30, 30, 30, .25); }
}
.portrait { transition: box-shadow .3s; }
@media (hover: none) { .id-peek { display: none; } }

/* hero heading + paragraph from Claude Design frame C: centred "Hi, I'm Natalia (portrait)." then one sentence */
.hero-in { text-align: center; }
.hero-hi { margin: 0 auto; max-width: 1080px; font-family: var(--sans); font-weight: 600; font-size: clamp(32px, 4.1667vw, 60px); line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; }
.hero-hi .hero-id { display: inline-block; margin: 0 .04em 0 .2em; vertical-align: -0.12em; }
.hero-hi .portrait { display: block; width: 1.69em; height: 1.03em; }
.hero-p { margin: 20px auto 0; max-width: 720px; font-size: clamp(16px, 1.4583vw, 21px); line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
@media (max-width: 800px) {
  .hero-hi .portrait { width: 1.5em; height: .92em; }
}

/* hero type rhythm matched to the reference: lighter heading, tighter leading, roomier gap to the sentence */
.hero-hi { font-weight: 400; line-height: 1.05; letter-spacing: -0.035em; font-size: clamp(34px, 4.375vw, 63px); }
.hero-hi .hero-id { margin: 0 .08em 0 .16em; }
.hero-hi .portrait { width: 1.5em; height: 1em; }
.hero-p { margin-top: 44px; max-width: 440px; font-weight: 400; line-height: 1.4; letter-spacing: 0; }
@media (max-width: 800px) {
  .hero-hi .portrait { width: 1.4em; height: .92em; }
  .hero-p { margin-top: 28px; }
}

/* text selection in the brand green; ink text on it stays readable even over the dark cards (about 15:1) */
::selection { background: var(--green); color: var(--ink); text-shadow: none; }
::-moz-selection { background: var(--green); color: var(--ink); text-shadow: none; }

/* hero heading from Claude Design C1 (editorial condensed): small light "HI, I'M" over a large condensed serif "NATALIA (portrait)." */
.hero-hi { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: none; font-weight: 400; line-height: 1; letter-spacing: normal; text-wrap: initial; }
.hi-a { font-family: "Hanken Grotesk", var(--sans); font-weight: 300; font-size: calc(25.6px + 2.667vw); line-height: 1; letter-spacing: -0.025em; text-transform: uppercase; }
.hi-b { font-family: "Libre Caslon Condensed", Georgia, "Times New Roman", serif; font-weight: 400; font-size: calc(32px + 7.8vw); line-height: .95; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; }
.hero-hi .hero-id { margin: 0 .05em 0 .16em; vertical-align: baseline; }
.hero-hi .portrait { width: 1.05em; height: .7em; }
.hero-p { margin-top: 34px; max-width: 600px; font-size: 22px; line-height: 1.6; color: #3d3d3d; text-wrap: balance; }
@media (max-width: 800px) {
  .hero-hi .portrait { width: 1.05em; height: .7em; }
  .hero-p { margin-top: 26px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
}

/* ---------- blog post: tinted header card (same colour, arch and labels as the blog cards), prose, then the next article ---------- */
.post { max-width: 1040px; }
.post .back { left: 0; }
.post .back .chev { display: none; }
.post-head { --c: var(--lilac); margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: stretch; min-height: 440px; padding: 48px; border-radius: var(--radius); background: var(--c); color: var(--ink); }
.post-head-text { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-width: 0; }
.post-head .plabel { margin: 0; color: rgba(30, 30, 30, .6); }
.post-title { margin: 0; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 500; text-wrap: balance; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.post-meta li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 13.5px; font-weight: 500; line-height: 1; }
.post-arch { position: relative; align-self: end; justify-self: end; width: min(100%, 360px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 120px 0; background: color-mix(in srgb, var(--c) 86%, #1e1e1e); transition: border-radius .75s cubic-bezier(.22, 1, .36, 1); }
.post-arch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-head:hover .post-arch { border-radius: 0 120px; }
.post .prose { max-width: 720px; margin: 64px auto 0; }
.post .prose > :first-child { margin-top: 0; }
.post-next { margin-top: 140px; }
.post-next .h-sec { margin-bottom: var(--head-gap); }
.post-next .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) {
  .post-head { grid-template-columns: 1fr; padding: 28px 24px; min-height: 0; gap: 32px; }
  .post-arch { justify-self: stretch; width: 100%; aspect-ratio: 16 / 6; border-radius: 56px 0; }
  .post-head:hover .post-arch { border-radius: 0 56px; }
  .post .prose { margin-top: 44px; }
  .post-next { margin-top: 96px; }
  .post-next .pcards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .post-arch { transition: none; } }

/* small phones: footer columns stack so nothing is squeezed; the button never wraps */
.totop { white-space: nowrap; }
.foot-grid > * { min-width: 0; }
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .foot-row .totop { width: 100%; justify-content: space-between; }
}

/* hero heading from Claude Design C9 (Inter Display): regular "Hi, I'm", then a very heavy "Natalia" with the portrait and a full stop */
.hero-hi { gap: 0; font-family: "Inter Variable", var(--sans); font-variation-settings: "opsz" 32; }
.hi-a { font-family: inherit; font-weight: 400; font-size: calc(29.1px + 2.286vw); line-height: 1.1; letter-spacing: -0.035em; text-transform: none; }
.hi-b { font-family: inherit; font-weight: 600; font-size: calc(38.5px + 7.05vw); line-height: 1; letter-spacing: -0.053em; text-transform: none; color: #3d3d3d; }
.hi-n { font-weight: 900; color: #353535; letter-spacing: -0.046em; }
.hero-p { margin-top: 30px; max-width: 580px; font-size: calc(16.5px + .381vw); line-height: 1.5; letter-spacing: -0.01em; text-transform: none; color: #3d3d3d; }
@media (max-width: 800px) { .hero-p { margin-top: 22px; text-transform: none; letter-spacing: -0.01em; color: #3d3d3d; font-size: calc(16.5px + .381vw); } }

/* optical 30px between the baseline of "Natalia" and the cap height of the sentence: the margin is what is left after the
   name's line-box below the baseline (.136em) and the sentence's own half-leading */
.hero-p, .hero-hi + .hero-p { margin-top: max(0px, calc(26.8px - .959vw)); }
@media (max-width: 800px) { .hero-p, .hero-hi + .hero-p { margin-top: max(0px, calc(26.8px - .959vw)); } }

/* the timestamp sits 60px above the carousel, whatever the hero height is */
.clock { top: auto; bottom: calc(32px + var(--tile-h) + 60px); }

/* how I work: same heading and card-title sizes as the rest of the page, the quote as intro, content centred in the pinned frame */
.process-stage { padding-top: 96px; padding-bottom: calc(min(180px, 22vh) + 16px); }
.process-copy { justify-content: center; gap: var(--head-gap); }
.process-head { gap: 20px; }
.process-item h3 { font-size: var(--card-title-size); line-height: 1.06; letter-spacing: -0.035em; font-weight: 500; }
.process-panel { justify-content: center; }

/* how I work, as set in Claude Design board E: panel 96px from the top and 100vh - 174px tall (726px at 900), top-aligned copy,
   step titles start as small faded h5 (26px) and grow to the 48px h2 size when their step comes into frame */
.process-panel { align-self: start; height: calc(100vh - 174px); height: calc(100svh - 174px); box-sizing: border-box; padding-bottom: max(0px, calc(min(180px, 22vh) - 78px + 12px)); }
.process-item h3 { font-size: 26px; line-height: 1.06; transition: font-size .55s cubic-bezier(.2, .8, .2, 1), color .35s ease; }
.js .process-item.is-on h3, .js .process-item.is-done h3 { font-size: clamp(26px, 3.3333vw, 48px); } /* once a step has come into frame it keeps the large size */
.process-list { transition: zoom .5s cubic-bezier(.2, .8, .2, 1); }
/* large screens with room: a step's description stays open after it has been reached (set by main.js) */
.js .process.keep-desc .process-item.is-done .process-body { grid-template-rows: 1fr; opacity: 1; }
.js .process.is-exiting.is-exiting .process-item.is-on .process-body, .js .process.is-exiting.is-exiting .process-item.is-done .process-body { grid-template-rows: 0fr; opacity: 0; }
.process.m-small .process-item h3 { font-size: 26px !important; }
.process.m-big .process-item h3 { font-size: clamp(26px, 3.3333vw, 48px) !important; }
.process.m-nt *, .process.m-small *, .process.m-big * { transition: none !important; }
@media (max-width: 800px) {
  .process-panel { align-self: stretch; height: auto; padding-bottom: 0; }
  .process-item h3, .js .process-item.is-on h3, .js .process-item.is-done h3 { font-size: var(--card-title-size); }
}
@media (prefers-reduced-motion: reduce) { .process-item h3 { transition: none; } }

/* recommendations: smaller, more proportional cards, with a portrait that frames the face instead of filling half the card */
.rec { max-width: 1040px; margin-left: auto; margin-right: auto; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); height: 500px; }
.rec-text { padding: 48px 56px; }
.rec blockquote { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; max-width: 520px; }
.rec figcaption { margin-top: 56px; }
.rec-img img { object-position: 50% 25%; }
@media (max-width: 800px) {
  .rec { max-width: none; grid-template-columns: 1fr; height: auto; }
  .rec-img { aspect-ratio: 4 / 3; }
  .rec-text { padding: 28px 24px 32px; }
  .rec blockquote { font-size: 20px; }
  .rec figcaption { margin-top: 28px; }
}

/* one content width for everything on the home page from "Latest projects" down to the contact card (footer excluded) */
.home .projects, .home .process, .home .recs-sec, .home .dispatch, .home .hello, .home .logos { max-width: calc(var(--content-max) + 2 * var(--g)); }
.home .rec { max-width: none; }
.home .process-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; }

/* how I work: the grey panel ends above the blur strip, so the card and its label sit in the true centre of it; descriptions scale with the titles */
.process-panel { height: calc(100vh - 96px - min(180px, 22vh) - 16px); height: calc(100svh - 96px - min(180px, 22vh) - 16px); padding-bottom: 0; justify-content: center; }
.process-body > p { max-width: 480px; font-size: clamp(16px, 1.3889vw, 20px); line-height: 1.45; }
@media (max-width: 800px) {
  .process-panel { height: auto; }
  .process-body > p { font-size: 16px; }
}

/* how I work: one fixed set of sizes for every step (the look step 002 had: 41px titles, 17px descriptions at 1440px) */
.js .process-item.is-on h3, .js .process-item.is-done h3 { font-size: clamp(24px, 2.8195vw, 40.6px); }
.process-body > p { font-size: clamp(15px, 1.1749vw, 16.9px); }
@media (max-width: 800px) {
  .js .process-item.is-on h3, .js .process-item.is-done h3 { font-size: var(--card-title-size); }
  .process-body > p { font-size: 16px; }
}

/* tighter rhythm so the finished list (four large titles, one open description) clears the blur strip at 900px tall */
@media (min-width: 801px) {
  .process-copy { gap: 32px; }
  .process-head { gap: 14px; }
  .process-list { gap: 16px; }
}

/* the stage label under the card ( Sketch ) ... ( Shipped ) in the site font, not the mono */
.process-stages { font-family: var(--sans); font-size: 16px; letter-spacing: -0.01em; }

/* how I work: the title is anchored to the top of the frame (it no longer drifts up as steps open), and the finished list fits the
   frame height, which is also the grey panel's height */
.process-copy { justify-content: flex-start; }
.process-head { flex: none; }
.js .process-item.is-on h3, .js .process-item.is-done h3 { font-size: clamp(24px, 2.6389vw, 38px); }
.process-body > p { font-size: clamp(15px, 1.1111vw, 16px); }
@media (max-width: 800px) {
  .js .process-item.is-on h3, .js .process-item.is-done h3 { font-size: var(--card-title-size); }
  .process-body > p { font-size: 16px; }
}

/* the LinkedIn pill sits inside the big heading: reset everything it would inherit from it (letter-spacing was collapsing the text) */
.id-peek { font-family: var(--sans); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: 0; text-transform: none; font-variation-settings: normal; -webkit-text-fill-color: currentColor; }
.id-peek .pk-in { font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em; font-size: 14px; }
.id-peek .pk-t, .id-peek .pk-go { letter-spacing: 0; font-weight: 500; font-size: 14px; }
.id-peek svg { width: 14px; height: 14px; flex: none; }

/* menu button: a "+" at rest; opening splits it into two parallel lines (the vertical bar turns flat and slides down) */
.menu-btn span { transition: transform .55s cubic-bezier(.65, 0, .2, 1); }
.menu-btn span:first-child { transform: translateY(0) rotate(0deg); }
.menu-btn span:last-child { transform: translateY(0) rotate(90deg); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(-4px) rotate(0deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(4px) rotate(0deg); }

/* menu button, final: "+" at rest, two horizontal lines on hover, an X while the menu is open (one transform recipe, so every change is smooth) */
.menu-btn span { transition: transform .5s cubic-bezier(.65, 0, .2, 1); }
.menu-btn span:first-child { transform: translate(0, 0) rotate(0deg); }
.menu-btn span:last-child { transform: translate(0, 0) rotate(90deg); }
.menu-btn:hover span:first-child, .menu-btn:focus-visible span:first-child { transform: translate(0, -4px) rotate(0deg); }
.menu-btn:hover span:last-child, .menu-btn:focus-visible span:last-child { transform: translate(0, 4px) rotate(0deg); }
.menu-btn[aria-expanded="true"] span:first-child, .menu-btn[aria-expanded="true"]:hover span:first-child { transform: translate(0, 0) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child, .menu-btn[aria-expanded="true"]:hover span:last-child { transform: translate(0, 0) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-btn span { transition: none; } }

/* client logos: one row of single-colour marks that drifts slowly, faded at both ends (after the Bungee reference) */
.home .statement { padding-bottom: 56px; }
.logos { margin-top: 0; margin-bottom: 120px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 11%, #000 85%, transparent); }
.logos-track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: logoDrift 70s linear infinite; }
.logo-item { flex: none; margin-right: 80px; display: flex; align-items: center; }
.logo-i { display: block; height: var(--lh); aspect-ratio: var(--ar); background: var(--muted); opacity: .85; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
@keyframes logoDrift { to { transform: translateX(-50%); } }
@media (max-width: 800px) {
  .logo-item { margin-right: 52px; }
  .logo-i { height: calc(var(--lh) * .8); }
  .logos { margin-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .logos-track { animation: none; } }

/* the logo row is as wide as the statement above it (as in the reference), centred */
.home .logos { max-width: calc(640px + 2 * var(--g)); }
@media (max-width: 800px) { .home .logos { max-width: none; } }

/* logo row: grab and drag, with a custom cursor (variants: pill, dot, portrait, mono) */
.logos { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.logos.is-dragging { cursor: grabbing; }
.logos.has-cursor, .logos.has-cursor * { cursor: none; }
.logos-track { will-change: transform; }
.logo-cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .2s; }
.logo-cursor.on { opacity: 1; }
.logo-cursor > * { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; transform: translate(-50%, -50%) scale(1); transition: transform .3s cubic-bezier(.2, .8, .2, 1); white-space: nowrap; color: #fff; }
.logos.is-dragging ~ .logo-cursor > *, body:has(.logos.is-dragging) .logo-cursor > * { transform: translate(-50%, -50%) scale(.86); }
.lc-pill { height: 40px; padding: 0 14px; border-radius: 999px; background: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; box-shadow: 0 10px 28px rgba(30, 30, 30, .25); }
.lc-pill b { font-weight: 500; }
.lc-portrait { padding: 0 12px; gap: 10px; }
.lc-portrait i { width: 46px; height: 28px; border-radius: 999px; background: #e9e3d3 url(img/portrait.jpg) 50% 38% / cover no-repeat; }
.lc-dot { width: 76px; height: 76px; justify-content: center; gap: 14px; border-radius: 50%; background: #fff; color: var(--ink); mix-blend-mode: difference; }
.lc-mono { font-family: var(--mono); font-size: 14px; letter-spacing: -0.02em; color: var(--ink); padding: 8px 12px; background: var(--green); border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .logo-cursor > * { transition: none; } }

/* "move" cursor: a dark disc with four arrows that draw themselves once as the pointer enters the row (no loop) */
.lc-move { width: 60px; height: 60px; justify-content: center; border-radius: 50%; background: var(--ink); box-shadow: 0 10px 28px rgba(30, 30, 30, .25); }
.lc-move svg { width: 26px; height: 26px; }
.lc-move path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.logo-cursor.play .lc-move path.a { animation: lcDraw .5s cubic-bezier(.2, .8, .2, 1) both; }
.logo-cursor.play .lc-move path.h { animation: lcDraw .3s cubic-bezier(.2, .8, .2, 1) .32s both; }
.logo-cursor.play .lc-move svg { animation: lcPop .55s cubic-bezier(.2, 1.3, .3, 1) both; }
@keyframes lcDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lcPop { from { transform: scale(.5); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lc-move path { stroke-dashoffset: 0; } .logo-cursor.play .lc-move path, .logo-cursor.play .lc-move svg { animation: none; } }

/* slimmer icon in the same glass as the LinkedIn pill and contact bar; each arrow draws out of the centre, together, once */
.lc-move { width: 46px; height: 46px; background: linear-gradient(180deg, rgba(60, 64, 80, .82), rgba(30, 32, 44, .88)); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 28px rgba(20, 22, 40, .28); color: rgba(255, 255, 255, .9); }
.lc-move svg { width: 22px; height: 22px; }
.logo-cursor.play .lc-move path, .logo-cursor.play .lc-move path.a, .logo-cursor.play .lc-move path.h { animation: lcDraw .5s cubic-bezier(.2, .8, .2, 1) both; }
.logo-cursor.play .lc-move svg { animation: none; }

/* more see-through: the row's logos show faintly behind the glass disc */
.lc-move { background: linear-gradient(180deg, rgba(70, 74, 92, .46), rgba(30, 32, 44, .54)); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); border-color: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 10px 26px rgba(20, 22, 40, .16); }

/* the glass disc is only there to introduce the icon: it pops in with the arrows, then melts away and leaves them on their own */
.lc-move { position: relative; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: rgba(255, 255, 255, .92); }
.lc-move::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, rgba(70, 74, 92, .46), rgba(30, 32, 44, .54)); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 10px 26px rgba(20, 22, 40, .16); }
.lc-move svg { position: relative; }
.logo-cursor.play .lc-move::before { animation: lcDiscIn .35s cubic-bezier(.2, .9, .3, 1.2) both, lcDiscOut .5s cubic-bezier(.5, 0, .75, 0) 1.1s forwards; }
.logo-cursor.play .lc-move { animation: lcInk .45s ease 1.1s forwards; }
@keyframes lcDiscIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes lcDiscOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.4); } }
@keyframes lcInk { from { color: rgba(255, 255, 255, .92); } to { color: #1e1e1e; } }
@media (prefers-reduced-motion: reduce) { .lc-move::before { display: none; } .lc-move { color: #1e1e1e; } .logo-cursor.play .lc-move { animation: none; } }

/* final drag cursor: just a left / right arrow, no disc; the line grows out of the centre and the two heads follow, once */
.lc-move { width: auto; height: auto; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); animation: none !important; }
.lc-move::before { display: none !important; content: none; }
.lc-move svg { width: 40px; height: 24px; }
.lc-move path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.logo-cursor.play .lc-move path.s { animation: lcDraw .38s cubic-bezier(.2, .8, .2, 1) both; }
.logo-cursor.play .lc-move path.t { animation: lcDraw .22s cubic-bezier(.2, .8, .2, 1) .26s both; }
@media (prefers-reduced-motion: reduce) { .lc-move path { stroke-dashoffset: 0; } .logo-cursor.play .lc-move path.s, .logo-cursor.play .lc-move path.t { animation: none; } }

/* ---------- entrance animation (after the Bungee template) ---------- */
.rv-on .rv-text .rv-w { display: inline-block; opacity: 0.001; transform: translateY(20px); transition: opacity var(--rv-word, 800ms) cubic-bezier(.22, .7, .3, 1), transform var(--rv-word, 800ms) cubic-bezier(.22, .7, .3, 1); will-change: transform; }
.rv-on .rv-text.rv-in .rv-w { opacity: 1; transform: none; }
.rv-on .rv-block { opacity: 0; transform: translateY(-40px); transition: opacity var(--rv-block, 1100ms) ease, transform var(--rv-block, 1100ms) ease; will-change: transform; }
.rv-on .rv-block.rv-in { opacity: 1; transform: none; }
/* once finished, drop the hints so hover and sticky behaviour is untouched */
.rv-on .rv-block.rv-in, .rv-on .rv-text.rv-in .rv-w { will-change: auto; }
.rv-on .hero-id.rv-w { display: inline-block; }


/* how I work on tablets and phones: the desktop two-column frame is too tight, so (as originally designed) it stacks: the current step on top,
   the card below, both inside one pinned screen */
@media (min-width: 801px) and (max-width: 1000px) {
  .home .process-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .process-panel { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 800px) {
  .home .process-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 20px; padding-top: 84px; padding-bottom: calc(min(180px, 22vh) + 16px); }
  .process-copy { justify-content: flex-start; gap: 14px; }
  .process-head { gap: 0; }
  .process-head .process-sub, .process-head .more { display: none; }
  .js .process-item:not(.is-on) { display: none; }
  .js .process-item:not(.is-on) .process-body { grid-template-rows: 0fr; opacity: 0; }
  .process-item .num { width: auto; }
  .process-panel { align-self: stretch; height: auto; min-height: 0; padding: 0; border-radius: 24px; gap: 14px; }
  .process-body > p { max-width: none; font-size: 16px; }
  .process-list { zoom: 1 !important; }
}

/* carousel videos: larger than their tile and offset, so each tile shows the same focused crop as on the Framer site */
.tile video.crop { position: absolute; max-width: none; object-fit: cover; }

/* every heading sits the same distance (--head-gap) above its content, in "How I work" too */
@media (min-width: 801px) {
  .process-copy { gap: var(--head-gap); }
  .process-head { gap: 20px; }
}
@media (min-width: 801px) {
  .process-head .more { display: none; } /* the "About Me" link makes the pinned frame too tall for the shared heading gap; the menu and footer link there */
}

/* the size-measuring state must use the same large size as the real one, or the list is judged too tall and needlessly shrunk */
.process.m-big .process-item h3 { font-size: clamp(24px, 2.6389vw, 38px) !important; }
@media (max-width: 800px) { .process.m-big .process-item h3 { font-size: var(--card-title-size) !important; } }

/* hero heading in regular weight (the name was 600 / 900) */
.hi-a, .hi-b, .hi-n { font-weight: 400; }
.hi-b, .hi-n { font-weight: 500; }
.hi-b, .hi-n { font-weight: 700; }

/* the "See all projects" tile uses the same text block as the project cards: bottom-left, description on hover, same lift on narrow cards */
.pcard-more { display: block; padding: 0; }
.pcard-more .pcard-body { color: var(--ink); }
.pcard-more h3 { margin-top: 0; max-width: 9em; }
.pcard-more .pdesc { color: var(--muted); }
.pcard-more { border: 0; box-shadow: inset 0 0 0 1px var(--line); } /* same outline without shifting the text by the border width */

/* more air after "How I work" before the recommendations (it was 72px) */
.recs-sec { margin-top: 160px; }
@media (max-width: 800px) { .recs-sec { margin-top: 100px; } .process-head .h-sec br { display: none; } }

/* the two-line heading is taller, so the intro goes wider (two lines) and sits a little closer, keeping the finished list at full size */
@media (min-width: 801px) {
  .process-head { gap: 12px; }
  .process-head .h-sec { line-height: 1.04; }
  .process-sub { max-width: 430px; }
}
.hi-b, .hi-n { font-weight: 600; }

/* the big name gets lighter as the screen gets larger: it looks heavier the bigger it is */
@media (min-width: 1100px) { .hi-b, .hi-n { font-weight: 500; } }
@media (min-width: 1600px) { .hi-b, .hi-n { font-weight: 450; } }

/* "How I / work." stays on two lines at every width, like the other section headings */
.process-head .h-sec br { display: inline !important; }

/* phones: 50px between the "How I work." heading and the current step */
@media (max-width: 800px) { .process-copy { gap: 50px; } }

/* phones and small tablets: the same 84px above the heading and below the card (the card ends 84px above the blur strip), and 30px
   between the heading and the current step */
@media (max-width: 800px) {
  .home .process-stage { padding-top: 84px; padding-bottom: calc(min(180px, 22vh) + 84px); }
  .process-copy { gap: 30px; }
}

/* phones: 48px between the logo bar (64px) and the heading, and 48px between the card and the bottom of the screen */
@media (max-width: 800px) {
  .home .process-stage { padding-top: calc(64px + 48px); padding-bottom: 48px; }
}

/* recommendations on phones and tablets: the cards stack as you scroll, like on desktop (each pins under the logo bar and the next slides over it) */
@media (max-width: 800px) {
  .rec { position: sticky; top: 84px; }
  .rec-img { aspect-ratio: 4 / 3; }
  .recs { padding-bottom: 8px; }
}

/* ---- "How I work" on every phone and tablet size ----
   Portrait phones of any height: spacing, heading and text scale with the screen height so the card never gets squeezed or cut. */
@media (max-width: 800px) {
  .home .process-stage { padding-top: calc(64px + clamp(12px, 3.6vh, 48px)); padding-bottom: clamp(12px, 3.6vh, 48px); }
  .process-copy { gap: clamp(12px, 3.55vh, 30px); }
  .process-head .h-sec { font-size: clamp(30px, min(9.6vw, 6.6vh), 48px); }
  .process-item h3, .js .process-item.is-on h3, .js .process-item.is-done h3 { font-size: clamp(20px, min(6.4vw, 3.9vh), 30px); }
  .process-body > p { font-size: clamp(13px, 2.1vh, 16px); line-height: 1.4; padding-top: 6px; }
  .process-panel { min-height: 0; }
}
/* short landscape screens: no pinned screen at all, the steps and the finished card sit one after the other */
@media (max-width: 1000px) and (max-height: 520px) {
  .process-track { height: auto !important; }
  .home .process-stage { position: relative; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; gap: 32px; padding: 32px 0 0; }
  .process-copy { gap: 20px; }
  .process-head .h-sec { font-size: 34px; }
  .js .process-item, .js .process-item:not(.is-on) { display: flex !important; color: var(--ink); }
  .js .process-item h3 { font-size: 22px !important; }
  .js .process-item:not(.is-on) .process-body, .js .process-item .process-body { grid-template-rows: 1fr !important; opacity: 1 !important; }
  .process-body > p { font-size: 14px; }
  .process-list { zoom: 1 !important; }
  .home .process-panel { align-self: start; height: auto; padding: 32px 24px; }
  .edge-blur { display: none; }
}
@media (max-width: 800px) and (max-height: 640px) {
  .process-body > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* very short phones: two lines of description, so the card keeps its room */
}


/* contact card + footer read as one unit: the card makes the invitation (name, "let's connect", the three ways to reach me),
   the footer underneath is the map (career snapshot, pages, case studies). Same width, same corner radius, a small gap. */
.site-footer { max-width: var(--content-max); width: calc(100% - 2 * var(--g)); margin-left: auto; margin-right: auto; border-radius: var(--radius); }
.home .hello { margin-bottom: 12px; }
.home .site-footer { margin-top: 0; }
.home .foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.home .site-footer .snap { margin-top: 22px; }
.hello-sub { max-width: 440px; margin: 0 auto; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.hello-sub span { color: #fff; }
@media (max-width: 600px) { .home .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* one content width on every page: the same 1120px column (plus the 50px margins) the home page uses */
.wrap { max-width: calc(var(--content-max) + 2 * var(--g)); }
.post { max-width: calc(var(--content-max) + 2 * var(--g)); } /* article header card lines up with the column; the text below stays in its narrower reading width */

/* back links: the same up-right arrow as the buttons, mirrored to point left; on hover it turns from up-left to left */
.back .back-arr { display: inline-grid; place-items: center; }
.back .back-arr svg { transform: scaleX(-1) rotate(0deg); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.back:hover { text-decoration: none; }
.back:hover .back-arr svg { transform: scaleX(-1) rotate(45deg); }
.post .back { left: 0; }
@media (prefers-reduced-motion: reduce) { .back .back-arr svg { transition: none; } }

/* ---------- case study: "On this page" list and reading progress in the sticky sidebar ---------- */
.case-toc { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(30, 30, 30, .1); display: flex; flex-direction: column; }
.toc-label { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.case-toc a { display: flex; align-items: center; gap: 14px; padding: 6px 0; font-size: 14.08px; color: var(--muted); transition: color .2s; }
.case-toc a span { font-family: var(--mono); font-size: 12px; opacity: .8; }
.case-toc a i { margin-left: auto; height: 1px; width: 0; background: var(--ink); transition: width .25s cubic-bezier(.22, 1, .36, 1); }
.case-toc a:hover { color: var(--ink); }
.case-toc a.on { color: var(--ink); font-weight: 500; }
.case-toc a.on i { width: 24px; }
.case-progress { margin-top: 24px; height: 3px; border-radius: 2px; background: rgba(30, 30, 30, .1); overflow: hidden; }
.case-progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--ink); border-radius: 2px; }
.case .prose h2[id] { scroll-margin-top: 110px; }
@media (max-width: 1100px) { .case-toc, .case-progress { display: none; } }
.case-side .facts { margin-top: 28px; gap: 22px; }
.case-toc { margin-top: 24px; padding-top: 16px; }
.case-toc a { padding: 3px 0; }
.case-progress { margin-top: 16px; }

/* case study sidebar: label above the title and optional stat tiles */
.case-label { margin: 24px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.case-label + .h-sec { margin-top: 14px; }
.case-stats { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); }
.case-stats .stat { padding: 16px; border-radius: var(--radius-nested); background: var(--lilac); display: flex; flex-direction: column; gap: 2px; }
.case-stats b { font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.case-stats span { font-size: 13px; line-height: 1.3; }

/* ---------- case study sidebar, as in the design: back link, mono label, title, facts, "On this page", progress ---------- */
.case-side { display: flex; flex-direction: column; gap: 28px; }
.case-side > * { margin: 0; }
.case-label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.case-side .h-sec { margin-top: -14px; }
.case-facts { display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; row-gap: 8px; padding-top: 18px; border-top: 1px solid rgba(30, 30, 30, .1); font-size: 14px; }
.case-facts dt { color: var(--muted); }
.case-facts dd { margin: 0; line-height: 1.55; min-height: 1.55em; }
.case-toc { margin-top: 0; padding-top: 16px; }
.toc-label { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.case-toc a { gap: 12px; padding: 7px 0; font-size: 14px; }
.case-toc a span { font-size: 14px; color: #8A8A96; opacity: 1; }
.case-toc a.on span { color: #4338CA; }
.case-toc a i { background: #4338CA; }
.case-progress { margin-top: 0; background: rgba(30, 30, 30, .1); }
.case-progress i { background: #4338CA; }
.case-side .h-sec { margin-top: 0; font-size: clamp(34px, 3.05vw, 44px); line-height: 1.05; }
@media (min-width: 1101px) { .case-side { z-index: 31; } } /* the sticky sidebar stays crisp above the bottom blur */
.case-label { font-family: inherit; font-size: 14px; letter-spacing: .06em; }

/* ---------- case study content, as in the design: numbered section label, takeaway heading, 640px text column ---------- */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/geist-latin.woff2) format("woff2"); }
.case-label, .toc-label, .case-toc a span, .cs-eyebrow, .next-project em { font-family: "Geist", var(--sans, "Inter Display", system-ui, sans-serif); }
.case .prose { margin-top: 72px; display: flex; flex-direction: column; gap: 96px; }
.case .prose > * + * { margin-top: 0; }
.cs-sec { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 110px; }
.cs-sec > * { margin: 0; }
.cs-sec > :not(figure):not(.cs-eyebrow) { max-width: 640px; }
.cs-sec > figure { margin-top: 12px; }
.cs-eyebrow { font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: #4338CA; display: flex; gap: 8px; }
.cs-title { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; }
.case .prose .cs-sec p, .case .prose .cs-sec li { font-size: 16px; line-height: 1.6; color: #3D3D47; }
.case .prose .cs-sec ul, .case .prose .cs-sec ol { line-height: 1.7; }
.case .prose .cs-sec li { line-height: 1.7; }
.case .prose .cs-sec h3.subhead { margin: 8px 0 0; font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: 0; }
.case .prose .cs-sec h3.subhead strong { font-weight: 500; }
.cs-sec blockquote { border-top: 1px solid var(--ink); padding-top: 20px; font-size: 20px; line-height: 1.4; }
.next-project { margin-top: 96px; max-width: 640px; padding-top: 24px; border-top: 1px solid rgba(30, 30, 30, .1); display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.next-project span { display: block; }
.next-project em { display: block; font-style: normal; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.next-project b { display: block; margin-top: 4px; font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.next-project i { flex: none; display: grid; }
.next-project i svg { transform: rotate(45deg); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.next-project:hover i svg { transform: translateX(4px) rotate(45deg); }
.case .prose .cs-eyebrow { font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: .08em; }
.case .prose .cs-title { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; }

/* ---------- award label on project tiles, and screenshot placeholders in case studies ---------- */
.pbadge.award { gap: 8px; padding: 0 14px 0 11px; }
.pbadge.award svg { flex: none; }
.cs-sec figure.ph { width: 100%; aspect-ratio: 824 / 460; border-radius: 12px; background: var(--lilac); display: grid; place-items: center; padding: 24px; text-align: center; }
.cs-sec figure.ph span { font-size: 14px; color: rgba(30, 30, 30, .6); }

/* project tile label: [logo] Company name */
.plabel.co { display: flex; align-items: center; gap: 10px; min-height: 22px; font-size: 15px; font-weight: 500; color: #fff; }
.plabel.co .co-icon { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; flex: none; }
.plabel.co .co-word { height: 18px; width: auto; max-width: 150px; filter: brightness(0) invert(1); opacity: .92; }
.plabel.co .co-icon { width: 24px; height: 24px; border-radius: 7px; object-fit: contain; }
.plabel.co .co-icon.tile { background: #fff; padding: 3px; }
.pbadge.award { border: 1px solid rgba(30, 30, 30, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.case-facts dd a { text-decoration: underline; text-decoration-color: rgba(30, 30, 30, .3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.case-facts dd a:hover { text-decoration-color: currentColor; }
/* footer without the case studies column */
@media (min-width: 801px) {
  .foot-grid { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
  .home .foot-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.plabel.co { line-height: 1.25; }
.plabel.co .co-icon { flex: none; }

/* sidebar: 16px above and below each grey line, and between the list and the progress bar */
.case-facts { margin-top: -12px; padding-top: 16px; row-gap: 8px; }
.case-toc { margin-top: -12px; padding-top: 16px; }
.case-toc a:last-child { padding-bottom: 0; }
.case-progress { margin-top: -12px; }
.case-facts, .case-toc { padding-top: 15px; } /* plus the 1px line = 16px */
.case-facts { margin-top: 0; padding-top: 18px; } /* first grey line keeps its original spacing: 28px above, 18px below */
.cs-sec blockquote footer { margin-top: 12px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.cs-sec blockquote p { font-size: 20px; line-height: 1.4; color: var(--ink); }
.case .prose .cs-sec blockquote p { font-size: 20px; line-height: 1.4; color: var(--ink); }
.case .prose .cs-sec blockquote footer { font-size: 13px; color: var(--muted); }
/* thumbnails drawn on a flat background: on the tall phone tiles show the whole picture instead of cropping its sides */
@media (max-width: 760px) { .pcard-img.fit img { object-fit: contain; object-position: 50% 28%; } }

/* ---------- blog posts as a list ---------- */
.blog-list { border-top: 1px solid rgba(30, 30, 30, .12); }
.brow { position: relative; isolation: isolate; display: grid; grid-template-columns: 56px minmax(0, 1fr) 210px 48px; column-gap: 24px; align-items: center; padding: 36px 0; border-bottom: 1px solid rgba(30, 30, 30, .12); color: var(--ink); }
.brow::before { content: ""; position: absolute; inset: -1px -24px; z-index: -1; border-radius: var(--radius); background: var(--c); opacity: 0; transition: opacity .35s ease; }
.brow:is(:hover, :focus-visible)::before { opacity: 1; }
.brow:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.bnum { font-family: var(--mono); font-size: 14px; color: var(--muted); }
.btext { min-width: 0; }
.brow h3 { margin: 0; font-size: clamp(26px, 2.9vw, 40px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; }
.bdesc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 12px; max-width: 62ch; font-size: 15px; line-height: 1.4; color: var(--muted); }
.brow:is(:hover, :focus-visible) .bdesc { color: rgba(30, 30, 30, .75); }
.bmeta2 { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; text-align: right; font-size: 14px; color: var(--muted); }
.bmeta2 .bcat { color: var(--ink); font-weight: 500; }
.barrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(30, 30, 30, .25); transition: background .3s, color .3s, border-color .3s; }
.barrow svg { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.brow:is(:hover, :focus-visible) .barrow { background: var(--ink); border-color: var(--ink); color: #fff; }
.brow:is(:hover, :focus-visible) .barrow svg { transform: rotate(45deg); }
@media (max-width: 900px) {
  .brow { grid-template-columns: minmax(0, 1fr) 48px; grid-template-areas: "text arrow" "meta arrow"; row-gap: 14px; padding: 28px 0; }
  .bnum { display: none; }
  .btext { grid-area: text; }
  .bmeta2 { grid-area: meta; flex-direction: row; gap: 10px; align-items: baseline; text-align: left; }
  .barrow { grid-area: arrow; align-self: start; }
  .brow::before { inset: -1px -12px; }
}
@media (prefers-reduced-motion: reduce) { .brow::before, .barrow, .barrow svg { transition: none; } }
.bmeta2 .bcat { white-space: nowrap; }
@media (max-width: 900px) { .bmeta2 { flex-wrap: wrap; column-gap: 10px; row-gap: 2px; } }

/* 404 page */
.nf { padding-top: 180px; padding-bottom: 80px; }
.nf-code { margin: 0 0 12px; font-family: var(--mono); font-size: 14px; letter-spacing: .08em; color: var(--muted); }
.nf-links { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }