/* prisacariurobert.com
   Clean and professional: system font (San Francisco on Apple devices, Inter
   elsewhere), a dark portrait hero, white cards and real screenshots. The
   playful part is Robert's handwriting: notes, arrows and circles in the
   margins that draw themselves as you scroll. Motion is saved for a few
   moments: the name and portrait entrance, screenshots that zoom into their
   project page, and the Sidemates characters.
   Light and dark follow the visitor's OS. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
/* Caveat, cut to one weight (600) and Latin characters for the notes. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: block; src: url("/assets/fonts/caveat-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --fg: #1d1d1f;
  --fg-2: #424245;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.16);
  --accent: #2f5bea;
  --ok: #30d158;
  --ink: #d9471c;          /* Robert's pen */
  --ink-on-dark: #ff9d74;
  --hero: #030404;
  --hero-fg: #f5f5f7;
  --hero-muted: #a1a1a6;
  --panel-base: #ececf0;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px -14px rgba(0, 0, 0, 0.14);
  --shadow-shot: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 28px 56px -26px rgba(0, 0, 0, 0.45);
  --r-card: 28px;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --page: 1120px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --fg: #f5f5f7;
    --fg-2: #d1d1d6;
    --muted: #98989d;
    --line: rgba(255, 255, 255, 0.1);
    --line-2: rgba(255, 255, 255, 0.2);
    --accent: #7d97ff;
    --ink: #ff8f66;
    --panel-base: #2c2c2e;
    --shadow-card: none;
    --shadow-shot: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 28px 56px -26px rgba(0, 0, 0, 0.9);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 8px; }
/* Smooth scrolling starts after load (site.js), so arriving at /#work jumps straight there. */
@media (prefers-reduced-motion: no-preference) { html.smooth { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.55 var(--sans); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.text a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--surface); color: var(--fg); }
.skip:focus { top: 12px; }
.page { width: min(100% - 48px, var(--page)); margin-inline: auto; }

/* Menu: one dark bar floating at the top. The highlight behind the current
   link glides between sections (site.js); without JavaScript the current
   link is simply marked. */
.nav { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; pointer-events: none; view-transition-name: nav; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100% - 24px, var(--page) + 24px); height: 52px; margin-inline: auto; padding: 0 8px; border-radius: 999px; background: rgba(22, 22, 24, 0.84); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 32px -14px rgba(0, 0, 0, 0.55); pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; color: #f5f5f7; font-size: 15px; font-weight: 600; border-radius: 999px; }
.brand:hover { text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.nav ul { position: relative; display: flex; align-items: center; gap: 2px; font-size: 14px; }
.nav ul a { position: relative; z-index: 1; display: block; padding: 8px 14px; border-radius: 999px; color: #c7c7cc; transition: color 0.2s; }
.nav ul a:hover, .nav ul a.is-active { color: #fff; text-decoration: none; }
html:not(.js) .nav ul a.is-active { background: rgba(255, 255, 255, 0.14); }
.nav ul::before { content: ""; position: absolute; left: 0; top: 0; width: var(--w, 0px); height: 100%; border-radius: 999px; background: rgba(255, 255, 255, 0.14); opacity: var(--o, 0); transform: translateX(var(--x, 0px)); pointer-events: none; }
.nav ul.glide::before { transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.5, 1), width 0.5s cubic-bezier(0.3, 1.2, 0.5, 1), opacity 0.25s ease; }
.nav ul .cv { margin-left: 6px; background: #f5f5f7; color: #1d1d1f; font-weight: 500; }
.nav ul .cv:hover { background: #fff; color: #000; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: 16px; font-weight: 500; transition: transform 0.2s, background 0.2s; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn-light { background: #f5f5f7; color: #1d1d1f; }
.btn-light:hover { background: #fff; }
.btn-ghost { color: inherit; box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost-dark { color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.btn-ghost-dark:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }

/* Hero */
.hero { padding-top: 64px; background: var(--hero); color: var(--hero-fg); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 40px; align-items: end; min-height: 600px; }
.hero-copy { align-self: center; padding: 72px 0; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); font-size: 14px; color: #d1d1d6; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.2); }
.hero h1 { margin-top: 22px; font-size: clamp(46px, 7.4vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.hero-line { margin-top: 14px; font-size: clamp(22px, 2.7vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; color: #c7c7cc; }
.hero-intro { margin-top: 20px; max-width: 34em; color: var(--hero-muted); }
.hero .actions { margin-top: 32px; }
.portrait { justify-self: end; width: min(100%, 470px); }
.portrait img { width: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.highlights a { display: block; padding: 26px 24px 30px 0; color: inherit; }
.highlights li + li a { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.highlights a:hover { text-decoration: none; }
.highlights strong { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.highlights a > span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--hero-muted); }
.highlights a:hover strong { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Sections */
.section { padding: 96px 0 0; }
.section:last-of-type { padding-bottom: 96px; }
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.section-head p { margin-top: 8px; color: var(--muted); font-size: 18px; }
.card-surface { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); }

/* Screenshots: rounded corners and a soft shadow, no frame */
.shot { position: relative; z-index: 1; border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-shot); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.shot img { width: 100%; }

/* Now: Sidemates */
.feature { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; padding: 56px; overflow: hidden; background: linear-gradient(140deg, color-mix(in srgb, var(--tint) 13%, var(--surface)) 0%, var(--surface) 55%); }
.label-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--muted); }
.label-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tint); }
.feature h3 { margin-top: 10px; font-size: clamp(34px, 4.4vw, 48px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.feature .sub { margin-top: 6px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-2); }
.feature .text { margin-top: 16px; color: var(--fg-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips li { padding: 5px 12px; border-radius: 999px; font-size: 13.5px; color: var(--fg-2); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.feature .actions { margin-top: 26px; }
.feature .source { margin-top: 16px; font-size: 15px; }
.feature-media { position: relative; padding-top: 26px; }
.crew { position: absolute; top: 26px; right: 30px; z-index: 0; display: flex; gap: 4px; transform: translateY(-74%); }
.mate { position: relative; display: block; width: 50px; height: 50px; cursor: pointer; transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.mate svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mate .look { transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform 0.15s ease-out; }
.mate .eyes { transform-box: fill-box; transform-origin: center; }
.feature:hover .mate { transform: translateY(-10px); }
.feature:hover .mate:nth-child(2) { transition-delay: 0.06s; }
.feature:hover .mate:nth-child(3) { transition-delay: 0.12s; }
.mate::after { content: attr(data-hi); position: absolute; left: 50%; bottom: calc(100% + 6px); padding: 5px 11px; border-radius: 12px; background: var(--surface); color: var(--fg); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px var(--line), 0 8px 20px -8px rgba(0, 0, 0, 0.3); opacity: 0; transform: translate(-50%, 6px) scale(0.6); transform-origin: 50% 100%; pointer-events: none; }
.feature:hover .shot { transform: translateY(-3px); }

/* Showcases */
.showcases { display: grid; gap: 28px; }
.feature, .showcase, .grid3 .card { scroll-margin-top: 96px; }
.showcase { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); overflow: hidden; color: inherit; }
.showcase:hover { text-decoration: none; }
.showcase:nth-child(even) .sc-media { order: 2; }
.sc-media { padding: 44px; background: color-mix(in srgb, var(--tint) 22%, var(--panel-base)); display: flex; align-items: center; }
.sc-media .shot { width: 100%; }
.showcase:hover .shot { transform: translateY(-4px) scale(1.01); }
.sc-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.sc-kicker { font-size: 14px; font-weight: 500; color: var(--muted); }
.sc-copy h3 { margin-top: 6px; font-size: clamp(28px, 3vw, 34px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.sc-copy p { margin-top: 10px; color: var(--fg-2); }
.sc-points { margin-top: 16px; display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
.sc-points li { position: relative; padding-left: 16px; }
.sc-points li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--tint); }
.more { margin-top: 22px; font-weight: 500; color: var(--accent); }
.more::after { content: " \2192"; display: inline-block; transition: transform 0.2s; }
.showcase:hover .more::after { transform: translateX(4px); }

/* More projects */
.subhead { margin: 56px 0 18px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; overflow: hidden; color: inherit; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-card); transition: transform 0.25s; }
.card:hover { text-decoration: none; transform: translateY(-4px); }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--line); }
.card-body { padding: 18px 20px 22px; }
.card h3, .card h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.card p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* Experience */
.exp { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr); gap: 40px; padding: 48px; }
.exp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.exp-head h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.exp-head .org { color: var(--muted); font-size: 17px; margin-top: 2px; }
.date { color: var(--muted); white-space: nowrap; }
.bullets { margin-top: 18px; display: grid; gap: 10px; }
.bullets li { position: relative; padding-left: 20px; color: var(--fg-2); }
.bullets li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.exp .chips { margin-top: 22px; }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px; border-radius: 22px; background: var(--hero); color: var(--hero-fg); }
.quote p { font-size: 22px; line-height: 1.4; font-weight: 600; letter-spacing: -0.02em; }
.quote p::before { content: "\201C"; display: block; font-size: 60px; line-height: 0.6; color: #6e6e73; margin-bottom: 14px; }
.quote cite { font-style: normal; font-size: 14.5px; color: var(--hero-muted); }

/* Education + skills */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.two > div { padding: 40px; }
.two h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 18px; }
.edu + .edu { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.edu strong { display: block; font-weight: 600; }
.edu span { display: block; color: var(--muted); font-size: 15.5px; margin-top: 2px; }
.facts { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 18px; font-size: 15.5px; }
.facts dt { color: var(--muted); }
.facts dd { color: var(--fg-2); }

/* Contact */
.contact { text-align: center; padding: 64px 32px; }
.contact h2 { font-size: clamp(34px, 5vw, 52px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.contact p { margin: 14px auto 0; max-width: 34em; color: var(--muted); font-size: 18px; }
.contact .email { display: inline-block; max-width: 100%; margin-top: 26px; font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.contact .actions { justify-content: center; margin-top: 26px; }

/* Footer */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 32px 0 48px; margin-top: 64px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--fg); }

/* Project pages */
.p-top { padding-top: 108px; }
.back { font-size: 15px; }
.p-head { max-width: 760px; margin-top: 18px; }
.p-head h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.p-head .kicker { margin-top: 10px; font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; letter-spacing: -0.02em; color: var(--muted); }
.p-head .lead { margin-top: 20px; font-size: 19px; line-height: 1.6; color: var(--fg-2); }
.p-facts { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 26px; }
.p-facts dt { font-size: 13px; color: var(--muted); }
.p-facts dd { font-size: 15.5px; font-weight: 500; }
.p-head .actions { margin-top: 26px; }
.media-panel { margin-top: 48px; padding: clamp(20px, 4vw, 52px); border-radius: var(--r-card); background: color-mix(in srgb, var(--tint) 20%, var(--panel-base)); }
.media-panel figure img, .media-panel figure video { width: auto; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 12px; box-shadow: var(--shadow-shot); }
.media-panel figcaption, .gallery figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }
.js [data-zoom] { cursor: zoom-in; }
.p-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.p-body > section { padding: 36px 40px; }
.p-body > section.wide { grid-column: 1 / -1; }
.p-body h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; }
.p-body p { color: var(--fg-2); }
.gallery { display: grid; gap: 20px; margin-top: 20px; }
.gallery figure { padding: clamp(18px, 3vw, 40px); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.gallery img, .gallery video { width: auto; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 10px; }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.pager .card-body span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 2px; }
dialog.lightbox { width: min(96vw, 1400px); max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.lightbox img { width: 100%; max-height: 90vh; object-fit: contain; border-radius: 10px; cursor: zoom-out; }
dialog.lightbox form { position: absolute; right: 0; top: -48px; margin: 0; }
dialog.lightbox button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 1.4rem; cursor: pointer; }
.notfound { padding: 160px 0 80px; text-align: center; }
.notfound h1 { font-size: clamp(36px, 5vw, 52px); font-weight: 700; letter-spacing: -0.035em; }
.notfound p { margin-top: 12px; color: var(--muted); }
.notfound .actions { justify-content: center; margin-top: 26px; }

/* ------------------------------------------------------------------
   Robert's notes: handwritten words, arrows, circles and underlines
   ("notes" in data/site.json). The words come from data-note.
   ------------------------------------------------------------------ */
.note { --d: 0.35s; position: absolute; z-index: 3; color: var(--ink); font: 600 25px/0.95 "Caveat", "Bradley Hand", "Segoe Print", cursive; letter-spacing: 0; white-space: pre; pointer-events: none; }
.note::after { content: attr(data-note); display: block; transform: rotate(var(--tilt, -4deg)); }
.doodle { position: absolute; overflow: visible; color: var(--ink); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.note .doodle { color: inherit; }
.doodle path { stroke-dasharray: 1; }
.doodle-curl { width: 70px; height: 47px; }
.doodle-short { width: 48px; height: 21px; }
.doodle-down { width: 36px; height: 42px; }
.marked, .circled { --d: 0.35s; position: relative; }
.marked { white-space: nowrap; }
.marked .doodle { left: -2%; bottom: -0.32em; width: 104%; height: 0.4em; }
.circled { display: inline-block; line-height: 1.15; }
.circled .doodle { left: -30%; top: -24%; width: 160%; height: 146%; stroke-width: 2.2; }
.hero .note, .hero .doodle { color: var(--ink-on-dark); }

.portrait { position: relative; }
.note-portrait { left: -6%; top: 14%; font-size: 29px; --tilt: -8deg; }
.note-portrait .doodle { left: calc(100% - 30px); top: 26px; width: 80px; height: 54px; }
.feature-media .note-crew { right: 246px; top: -38px; --tilt: -3deg; }
.note-crew .doodle { left: calc(100% + 4px); top: 16px; }
.section-head { position: relative; }
.note-work { left: calc(100% + 40px); top: 30px; --tilt: 4deg; }
.note-work .doodle { left: 2px; top: calc(100% + 8px); width: 40px; height: 56px; }
.quote { position: relative; }
.note-quote { left: 10px; top: -40px; --tilt: -3deg; }
.note-quote .doodle { left: calc(100% - 8px); top: 10px; width: 52px; height: 35px; }
.note-dutch { position: relative; display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; vertical-align: -0.12em; font-size: 22px; --tilt: -2deg; }
.note-dutch .doodle { position: static; width: 32px; height: 14px; transform: scaleX(-1); }
.email-line { position: relative; display: inline-block; margin-top: 26px; }
.contact .email { margin-top: 0; }
.note-email { right: calc(100% + 66px); top: -12px; text-align: right; --tilt: -6deg; }
.note-email .doodle { left: calc(100% + 8px); top: 18px; }
.os-link { position: relative; }
.note-os { right: 28px; bottom: calc(100% + 10px); --tilt: -4deg; }
.note-os .doodle { left: calc(100% - 4px); top: 8px; width: 30px; height: 35px; }
.media-wrap { position: relative; margin-top: 48px; }
.media-wrap .media-panel { margin-top: 0; }
.note-zoom { right: 6%; top: -40px; --tilt: 3deg; }
.note-zoom .doodle { right: calc(100% + 2px); top: 10px; }
.notfound .actions { position: relative; display: inline-flex; }
.note-notFound { right: calc(100% + 62px); top: -14px; --tilt: -5deg; }
.note-notFound .doodle { left: calc(100% + 6px); top: 16px; }

@media (prefers-color-scheme: dark) {
  .hero { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .quote { background: #2c2c2e; }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .portrait { order: -1; justify-self: start; width: 210px; margin-top: 36px; }
  .hero-copy { padding: 18px 0 56px; }
  .feature, .showcase, .exp { grid-template-columns: 1fr; }
  .feature { padding: 40px; gap: 36px; }
  .showcase:nth-child(even) .sc-media { order: 0; }
  .sc-media { padding: 32px; }
  .sc-copy { padding: 32px 36px 40px; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two, .p-body { grid-template-columns: 1fr; }
  .note-work { display: none; }
  .note-portrait { left: calc(100% - 18px); top: 30%; font-size: 25px; white-space: normal; width: 6.2em; --tilt: -6deg; }
  .note-portrait .doodle { left: -34px; top: 34px; width: 46px; height: 31px; transform: scaleX(-1) rotate(24deg); }
}
@media (max-width: 640px) {
  .page { width: min(100% - 32px, var(--page)); }
  .nav { top: 8px; }
  .nav-bar { width: calc(100% - 16px); height: 48px; padding: 0 6px; }
  .brand img { width: 36px; height: 36px; }
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav ul a { padding: 7px 11px; }
  .nav .optional-wide { display: none; }
  .hero { padding-top: 56px; }
  .p-top { padding-top: 92px; }
  .highlights { grid-template-columns: 1fr; }
  .highlights a, .highlights li + li a { padding: 16px 0; border-left: 0; }
  .highlights li + li a { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .section { padding-top: 72px; }
  .feature, .exp, .two > div { padding: 28px 24px; }
  .contact { padding: 48px 20px; }
  .contact .email { font-size: min(22px, 5.3vw); }
  .sc-media { padding: 22px; }
  .sc-copy { padding: 26px 24px 32px; }
  .grid3, .pager { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 10px; }
  .p-body > section { padding: 28px 24px; }
  .note { font-size: 22px; }
  .note-portrait { font-size: 22px; }
  .feature-media { padding-top: 48px; }
  .crew { top: 48px; right: 12px; }
  .feature-media .note-crew { right: auto; left: 0; top: -2px; }
  .note-email { right: 0; top: calc(100% + 8px); white-space: normal; --tilt: -3deg; }
  .note-email .doodle { left: -42px; top: -14px; transform: scaleX(-1) rotate(-28deg); }
  .contact .actions { margin-top: 52px; }
  .note-os { display: none; }
  .notfound .actions { margin-top: 64px; }
  .note-notFound { right: auto; left: 0; top: auto; bottom: calc(100% + 14px); }
  .note-notFound .doodle { left: 30px; top: 22px; transform: rotate(60deg); }
}
@media (max-width: 360px) {
  .nav .optional { display: none; }
  .portrait { width: 180px; }
  .note-portrait { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .nav, .skip, .pager, .crew, .note, .doodle { display: none !important; }
  .hero { padding-top: 0; background: #fff; color: #000; }
  .p-top { padding-top: 0; }
  body { background: #fff; }
}

/* ------------------------------------------------------------------
   Page transitions: a screenshot on the home page zooms into its project
   page, and back (Chrome, Edge, Safari 18.2+).
   ------------------------------------------------------------------ */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(root) { animation: 0.25s ease both vt-out; }
::view-transition-new(root) { animation: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: scale(0.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* ------------------------------------------------------------------
   Entrances and small moments of play. Everything here is skipped for
   visitors who ask for reduced motion, and content is never hidden
   without JavaScript (the .js class is set by an inline script).
   ------------------------------------------------------------------ */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes word { from { opacity: 0; transform: translateY(0.5em) rotate(3deg); filter: blur(8px); } }
@keyframes develop { from { opacity: 0; transform: scale(1.06); filter: blur(12px) saturate(0.3); } }
@keyframes reveal { from { opacity: 0; translate: 0 28px; } }
@keyframes settle { from { opacity: 0.4; transform: scale(0.95); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(0.1); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(48, 209, 88, 0); } }
@keyframes bubble { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.6); } 12%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -4px) scale(0.95); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px) rotate(-6deg); } 60% { transform: translateY(0) rotate(3deg); } }
@keyframes failsafe { to { opacity: 1; } }
@keyframes write { from { clip-path: inset(-30% 100% -30% -10%); } to { clip-path: inset(-30% -10% -30% -10%); } }
@keyframes draw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes failsafe-draw { to { opacity: 1; } }
@keyframes failsafe-write { to { clip-path: inset(-30% -10% -30% -10%); } }

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--d, 0s); }
  .hero h1 .w { display: inline-block; animation: word 1s cubic-bezier(0.2, 0.85, 0.25, 1) both; animation-delay: var(--d, 0s); }
  .portrait.develop img { animation: develop 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; }
  .pill::before { animation: ping 2.6s ease-out 1.2s infinite; }
  .btn:active { transform: scale(0.96); }
  .mate .eyes { animation: blink 5.6s infinite; }
  .mate:nth-child(2) .eyes { animation-duration: 6.4s; animation-delay: 1.8s; }
  .mate:nth-child(3) .eyes { animation-duration: 4.9s; animation-delay: 3.2s; }
  .mate.hi { animation: hop 0.6s cubic-bezier(0.3, 0, 0.3, 1); }
  .mate.hi::after { animation: bubble 1.9s ease both; }
  .card img { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .card:hover img { transform: scale(1.04); }

  /* Scroll reveals: blocks rise into place and their screenshots settle in.
     site.js adds .reveals once it is watching the scroll; if it never runs,
     the failsafe shows everything after 3.5s. */
  .js [data-reveal]:not(.in) { opacity: 0; animation: failsafe 0.01s 3.5s forwards; }
  .reveals [data-reveal]:not(.in) { animation: none; }
  [data-reveal].in { animation: reveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 80ms) backwards; }
  [data-reveal].in .shot, [data-reveal].in.card img { animation: settle 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 80ms + 0.1s) backwards; }
  /* Arriving through a page transition, what is on screen is simply there,
     so the screenshot has somewhere to land. */
  .arriving [data-reveal], .arriving [data-reveal]:not(.in), [data-reveal].in.instant { opacity: 1; animation: none; }
  .arriving [data-reveal] .shot, .arriving [data-reveal].card img, [data-reveal].instant .shot, [data-reveal].instant.card img { animation: none; }

  /* Notes: the words are written left to right, then the arrow or circle is
     drawn. Same rules as the reveals: they wait for the scroll once site.js
     runs, the failsafe draws them after 3.5s if it never does, and they are
     simply there when a page transition lands. */
  .js:not(.arriving) .note[data-draw]:not(.in)::after { clip-path: inset(-30% 100% -30% -10%); }
  .js:not(.arriving) [data-draw]:not(.in) .doodle path { opacity: 0; }
  .js .note[data-draw]:not(.in)::after { animation: failsafe-write 0.01s 3.5s forwards; }
  .js [data-draw]:not(.in) .doodle path { animation: failsafe-draw 0.01s 3.5s forwards; }
  .reveals .note[data-draw]:not(.in)::after, .reveals [data-draw]:not(.in) .doodle path { animation: none; }
  .note[data-draw].in:not(.instant)::after { animation: write var(--wd, 0.7s) cubic-bezier(0.3, 0.1, 0.5, 1) var(--d) backwards; }
  [data-draw].in:not(.instant) .doodle path { animation: draw 0.6s cubic-bezier(0.45, 0.05, 0.4, 1) calc(var(--d) + var(--wd, 0s) * 0.85) backwards; }
  [data-draw].in:not(.instant) .doodle path + path { animation-delay: calc(var(--d) + var(--wd, 0s) * 0.85 + 0.35s); animation-duration: 0.25s; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .mate { cursor: default; }
}