/* Design ported from aahil-khan.xyz. Bootstrap handles the grid, offcanvas and reboot. */

/* ===== Theme tokens ===== */
:root,
[data-theme="cream"] {
  --canvas-base: #F7F5EE;
  --canvas-grid: rgba(22, 22, 22, .055);
  --surface: #FFFFFF;
  --ink: #161616;
  --ink-muted: rgba(22, 22, 22, .74);
  --ink-subtle: rgba(22, 22, 22, .60);
  /* One highlight color: mint green. --accent is for fills (with --accent-ink
     on top); --accent-text is a deeper mint that stays readable as text on cream.
     --accent-2/3 are kept as aliases so a second color can come back later */
  --accent: #5FE0AE;
  --accent-ink: #0E2A1E;
  --accent-text: #0E8A5E;
  --accent-2: var(--accent);
  --accent-2-ink: var(--accent-ink);
  --accent-3: var(--accent);
  --accent-3-ink: var(--accent-ink);
  --border: #161616;
  color-scheme: light;
}
[data-theme="dark"] {
  /* Catppuccin Mocha, one of the original site's dark themes */
  --canvas-base: #1E1E2E;
  --canvas-grid: rgba(205, 214, 244, .08);
  --surface: #181825;
  --ink: #CDD6F4;
  --ink-muted: #BAC2DE;
  --ink-subtle: #A6ADC8;
  --accent: #94E2C4;
  --accent-ink: #11111B;
  --accent-text: var(--accent);
  --accent-2: var(--accent);
  --accent-2-ink: var(--accent-ink);
  --accent-3: var(--accent);
  --accent-3-ink: var(--accent-ink);
  --border: #CDD6F4;
  color-scheme: dark;
}
:root {
  --bw: 2px;
  --radius-card: 14px;
  --radius-chip: 8px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: var(--canvas-base);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
a { color: inherit; }
a:hover { color: inherit; }

.site {
  --fs-mega: clamp(2.25rem, 10.5vw, 7rem);  /* sized so "CANDELARIO A." fits */
  --fs-display: clamp(1.625rem, 4.2vw, 3.75rem);
  --fs-heading: clamp(1.375rem, 2.6vw, 2.25rem);
  --fs-body: 1.0625rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
  --bar-h: 4rem;
  --shadow-hard: 4px 4px 0 0 var(--border);
  --shadow-hard-lg: 6px 6px 0 0 var(--border);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--canvas-base);
  line-height: 1.65;
  /* Never let anything poke past the screen edge: on phones that lets the page
     drift sideways and makes the fixed top bar shift. (clip, unlike hidden,
     keeps position: sticky working) */
  overflow-x: clip;
}
.site h1, .site h2, .site h3 { letter-spacing: -.02em; margin: 0; font-weight: 700; line-height: 1.05; }
.site p { margin: 0; }
.site ul, .site ol { margin: 0; padding: 0; list-style: none; }
.site img { max-width: 100%; display: block; }
.site :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.site .wrap { width: min(1180px, 100%); padding-inline: var(--gutter); margin-inline: auto; }
.site .eyebrow {
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-subtle);
  align-items: center; gap: .75rem; font-size: .75rem; font-weight: 500; display: flex;
}
.site .eyebrow::after { content: ""; height: var(--bw); background: var(--border); opacity: .18; flex: 1; }

/* ===== Top bar ===== */
.site .bar {
  height: var(--bar-h); z-index: 60; padding-inline: var(--gutter);
  /* Fully see-through at the top of the page; gets its background once you scroll */
  background: transparent;
  border-bottom: var(--bw) solid transparent;
  transition: border-color .24s var(--ease-out), background .24s var(--ease-out);
  align-items: center; gap: 1rem; display: flex; position: fixed; inset: 0 0 auto;
}
.site .bar[data-stuck="1"] {
  border-bottom-color: var(--border); background: color-mix(in srgb, var(--canvas-base) 96%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Menu centered on the bar; the theme button (and burger on phones) sit at the right */
.site .bar { justify-content: flex-end; }
.site .bar nav { gap: .25rem; display: flex; position: absolute; left: 50%; transform: translateX(-50%); }
.site .bar nav a {
  border-radius: var(--radius-chip); color: var(--ink-muted);
  transition: color .18s var(--ease-out), background .18s var(--ease-out);
  padding: .6rem .85rem; font-size: .9375rem; font-weight: 500; text-decoration: none;
}
/* Wide landscape phones show this menu too: shrink it with the short screen */
@media (max-height: 500px) {
  .site .bar nav a { font-size: clamp(.75rem, 3.6vh, .9375rem); padding: .45rem .6rem; }
}
@media (hover: hover) { .site .bar nav a:hover { color: var(--accent-ink); background: var(--accent); } }
/* Current section (set by main.js) */
.site .bar nav a[aria-current] { color: var(--accent-ink); background: var(--accent); }
.drawer a[aria-current] { background: var(--accent); color: var(--accent-ink); }
.site .themepick {
  border: var(--bw) solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
  width: 2.5rem; height: 2.5rem; color: var(--ink); cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
  flex: none; place-items: center; display: grid; padding: 0;
}
/* Lift by half the 3px shadow so button + shadow sit centered in the bar */
.site :is(.themepick, .burger) { top: -1.5px; }
:is(.themepick, .drawer__theme) .i-sun { display: none; }
[data-theme="dark"] :is(.themepick, .drawer__theme) .i-sun { display: block; }
[data-theme="dark"] :is(.themepick, .drawer__theme) .i-moon { display: none; }

.site .burger { display: none; }

/* Drawer (Bootstrap offcanvas, restyled) */
.drawer.offcanvas {
  --bs-offcanvas-width: min(20rem, 82vw);
  --bs-offcanvas-bg: var(--surface);
  --bs-offcanvas-border-width: var(--bw);
  --bs-offcanvas-border-color: var(--border);
  /* The drawer sits outside .site, so --bar-h needs its fallback here */
  padding-top: calc(var(--bar-h, 4rem) + clamp(.25rem, 3vh, 1.25rem));
  z-index: 55; overflow: hidden; border-radius: 0;
}
/* Only the items scroll, below the top bar, so they never slide under the close button */
.drawer__body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: .25rem 1.25rem clamp(.25rem, 3vh, 1.25rem);
}/* Bootstrap moves focus onto the panel when it opens; its focus ring drew a stray
   line beside the left border. The links inside still show their own focus ring */
.drawer.offcanvas:focus, .drawer.offcanvas:focus-visible { outline: none; }
.offcanvas-backdrop { z-index: 54; }
.offcanvas-backdrop.show { opacity: .45; }
.drawer nav { gap: .25rem; display: grid; }
.drawer a {
  /* Sized by screen height too, so all items fit on landscape phones */
  border-radius: var(--radius-chip); min-height: clamp(2.25rem, 10vh, 3.25rem); color: var(--ink);
  align-items: center; gap: .5rem; padding-inline: .9rem; font-size: clamp(.875rem, 4.6vh, 1.125rem); font-weight: 500;
  text-decoration: none; display: flex;
}
/* Theme toggle at the bottom of the drawer, styled like the links, under a thin line */
.drawer__theme {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  margin-top: clamp(.5rem, 2vh, 1rem); padding: clamp(.5rem, 2vh, 1rem) .9rem 0;
  border: 0; border-top: var(--bw) solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 0;
  background: none; color: var(--ink); cursor: pointer; text-align: left;
  font: 500 clamp(.875rem, 4.6vh, 1.125rem) "Space Grotesk", system-ui, sans-serif;
  min-height: clamp(2.25rem, 10vh, 3.25rem);
}
.drawer__theme svg { flex: none; width: 1.1em; height: 1.1em; }
@media (hover: hover) { .drawer__theme:hover { color: var(--accent-text); } }
.drawer__theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 820px) {
  .site .bar { gap: .6rem; }
  .site .bar nav { display: none; }
  /* The theme toggle moves into the menu drawer (pages without a menu, like ai4buzz, keep it) */
  .site .bar:has(.burger) .themepick { display: none; }
  .site .themepick { width: 2.25rem; height: 2.25rem; margin-left: auto; }
  .site .burger { margin-left: auto; }
  .site .burger {
    border: var(--bw) solid var(--border); border-radius: var(--radius-chip); background: var(--surface);
    cursor: pointer; flex: none; align-content: center; gap: 4px; width: 2.25rem; height: 2.25rem;
    padding: 0 7px; display: grid; position: relative; z-index: 61;
  }
  .site .burger span {
    background: var(--ink); height: 2px; border-radius: 2px; display: block;
    transition: transform .26s var(--ease-out), opacity .2s var(--ease-out);
  }
  .site .burger[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
  .site .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .site .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ===== Hero ===== */
.site .hero {
  min-height: 100svh; padding-top: calc(var(--bar-h) + clamp(.5rem, 3vh, 2.5rem));
  flex-direction: column; justify-content: center; padding-bottom: clamp(2rem, 6vh, 4rem);
  display: flex; position: relative; overflow: hidden;
}
.site .hero__grid {
  pointer-events: none; position: absolute; inset: 0; overflow: hidden;
}
/* "Mint aurora": big, heavily blurred mint and aqua glows (CSS only). Each one is an
   oval that roams a wide looping path around the hero, turning, stretching and
   brightening/dimming as it goes. Loops are 8-12s and all different, so the mix keeps changing. */
.site {
  --aurora-o: .8;
  --aurora-2: #4FE8DA;                                         /* aqua */
  --aurora-3: color-mix(in srgb, var(--accent) 50%, #4FE8DA);  /* in between */
}
[data-theme="dark"] .site { --aurora-o: .42; }
[data-theme="dark"] .site .services { background: color-mix(in srgb, var(--accent) 10%, var(--canvas-base)); }
.site .hero__blob {
  position: absolute; border-radius: 50%; filter: blur(clamp(32px, 5vw, 70px));
  opacity: var(--aurora-o); will-change: transform, opacity;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.site .hero__blob--a {
  width: 48vmax; height: 36vmax; right: -14vmax; top: -14vmax;
  background: radial-gradient(ellipse, var(--accent) 0%, transparent 68%);
  animation-name: aurora-a; animation-duration: 10s;
}
.site .hero__blob--b {
  width: 38vmax; height: 26vmax; right: 0; bottom: -12vmax;
  background: radial-gradient(ellipse, var(--aurora-2) 0%, transparent 68%);
  animation-name: aurora-b; animation-duration: 12s;
}
.site .hero__blob--c {
  width: 34vmax; height: 24vmax; left: -12vmax; bottom: -8vmax;
  background: radial-gradient(ellipse, var(--aurora-3) 0%, transparent 68%);
  animation-name: aurora-c; animation-duration: 11s;
}
.site .hero__blob--d {
  width: 28vmax; height: 18vmax; left: -6vmax; top: -10vmax;
  background: radial-gradient(ellipse, var(--aurora-2) 0%, transparent 68%);
  animation-name: aurora-d; animation-duration: 8s;
}
/* Top-right glow: swings down the right side, across the top, and back */
@keyframes aurora-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: var(--aurora-o); }
  20% { transform: translate(-6vw, 30vh) rotate(30deg) scale(1.15); opacity: calc(var(--aurora-o) * 1.2); }
  45% { transform: translate(-30vw, 40vh) rotate(-10deg) scale(.9); opacity: calc(var(--aurora-o) * .8); }
  70% { transform: translate(-40vw, 4vh) rotate(-35deg) scale(1.2); opacity: calc(var(--aurora-o) * 1.1); }
  85% { transform: translate(-16vw, -4vh) rotate(-15deg) scale(1); }
}
/* Bottom-right glow: sweeps along the bottom to the left and up the middle */
@keyframes aurora-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: var(--aurora-o); }
  25% { transform: translate(-30vw, -10vh) rotate(-25deg) scale(1.2); opacity: calc(var(--aurora-o) * 1.2); }
  50% { transform: translate(-58vw, -4vh) rotate(15deg) scale(.9); opacity: calc(var(--aurora-o) * .75); }
  75% { transform: translate(-24vw, -36vh) rotate(35deg) scale(1.1); opacity: calc(var(--aurora-o) * 1.05); }
}
/* Bottom-left glow: climbs the left side, then drifts to the right along the bottom */
@keyframes aurora-c {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: calc(var(--aurora-o) * .85); }
  30% { transform: translate(8vw, -38vh) rotate(40deg) scale(1.15); opacity: calc(var(--aurora-o) * 1.1); }
  55% { transform: translate(30vw, -12vh) rotate(-20deg) scale(1.25); opacity: calc(var(--aurora-o) * .7); }
  80% { transform: translate(46vw, 2vh) rotate(10deg) scale(.95); opacity: calc(var(--aurora-o) * 1); }
}
/* Smaller roaming glow: crosses the top from left to right and back, fading in and out */
@keyframes aurora-d {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  20% { opacity: calc(var(--aurora-o) * .8); }
  50% { transform: translate(70vw, 14vh) rotate(30deg); opacity: calc(var(--aurora-o) * .9); }
  75% { transform: translate(36vw, 30vh) rotate(-20deg); opacity: calc(var(--aurora-o) * .4); }
}
.site .hero__inner { z-index: 1; position: relative; }
/* Big screens: the hero gets more of the width than the sections below, so the name can
   grow with the screen instead of sitting in a narrow column with empty space around it */
.site .hero__inner.wrap { width: min(max(1180px, 82vw), 100%); }
/* Phones and tablets in portrait: sit the content slightly above center (the scroll cue stays put) */
@media (orientation: portrait) and (max-width: 1199.98px) {
  .site .hero__inner { margin-bottom: clamp(0px, 4vh, 3rem); }
}
/* Tag line with its trailing line; text and spacing shrink on small screens */
.site .hero__eyebrow {
  max-width: 34rem; margin-bottom: clamp(.6rem, 3.5vh, 2.5rem);
  font-size: clamp(.5625rem, 1.9vw, .75rem); letter-spacing: clamp(.06em, .5vw, .14em);
}
.site .name {
  font-size: var(--fs-mega); letter-spacing: -.045em; text-transform: uppercase; color: var(--ink);
  /* Spacing is relative to the font size, so it scales with the auto-fitted name */
  margin-bottom: clamp(.5rem, 2.5vh, 2rem); line-height: .96;
}
.site .name__line { display: block; overflow: hidden; padding-bottom: .04em; }
/* inline-block so main.js can measure each line and fit the name to the column */
.site .name__line > span { display: inline-block; white-space: nowrap; }
/* Two-line layout (picked by main.js when it makes the name bigger): both surnames on one line */
.site .name--wide { white-space: nowrap; }
.site .name--wide .name__line:nth-child(n+2) { display: inline-block; vertical-align: top; }
.site .headline {
  font-size: var(--fs-display); letter-spacing: -.02em; max-width: 22ch;
  margin-bottom: clamp(1.5rem, 4vh, 2.25rem); font-weight: 500; line-height: 1.12;
}
.site .headline b { font-weight: 700; }

/* Tagline typed out like a terminal command (see main.js).
   The invisible "ghost" copy reserves the full space so nothing shifts while typing. */
.site .term {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Grows with the width, but short screens (phones in landscape) cap it so the name keeps the room */
  font-size: clamp(.75rem, min(.55rem + 1.3vw, 4.2vh), 1.625rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.45;
  max-width: 36ch; display: flex; align-items: flex-start; gap: .65em; margin-bottom: 0;
}
.site .term__prompt { color: var(--accent-text); font-weight: 700; flex: none; }
/* All lines are stacked in the same spot, so the box is as tall as the longest one */
.site .term__body { position: relative; display: grid; min-width: 0; }
.site .term__ghost { grid-area: 1 / 1; }
.site .term__ghost + .term__ghost { visibility: hidden; } /* without JS, only the first line shows */
.site .term b { color: var(--accent-text); font-weight: 700; }
.js .site .term__ghost { visibility: hidden; }
.site .term__typed { position: absolute; inset: 0; }
.site .term__caret {
  display: inline-block; width: .6em; height: 1.15em; margin-left: .1em; vertical-align: -.22em;
  background: var(--accent); animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* Scroll-down cue: a mouse outline with a rolling wheel (a pointing finger on touch screens).
   Hover: mint fill sweeps in from the left (same as every other button). */
.site .scrollcue {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  color: var(--ink); text-decoration: none;
  /* Centered at the bottom of the hero */
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(.5rem, 2.5vh, 1.75rem);
  width: fit-content; margin-inline: auto;
}
/* Leave room under the hero content so the cue never overlaps it */
.site .hero { padding-bottom: calc(clamp(.5rem, 2.5vh, 1.75rem) + clamp(3rem, 11vh, 5.5rem)); }
.site .scrollcue__mouse {
  width: clamp(1.25rem, 4vh, 1.875rem); height: clamp(2rem, 6.5vh, 3rem); border-radius: 999px;
  position: relative; overflow: hidden; isolation: isolate;
  border: var(--bw) solid var(--border); background: var(--surface); color: var(--ink);
  box-shadow: 3px 3px 0 0 var(--border);
  display: flex; justify-content: center; padding-top: clamp(5px, 1vh, 8px);
  transition: color .38s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.site .scrollcue__mouse::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  opacity: 0; transition: opacity .2s ease;
}
.site .scrollcue__wheel {
  width: 3px; height: 9px; border-radius: 2px; background: currentColor;
  animation: cue-wheel 1.8s var(--ease-out) infinite;
}
/* The wheel rolls down and fades, like scrolling (same rhythm as the finger on touch screens) */
@keyframes cue-wheel {
  0%, 20% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(6px); opacity: 0; }
  61% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .site .scrollcue__wheel { animation: none; } }

@media (hover: hover) { .site .scrollcue:hover .scrollcue__mouse { color: var(--accent-ink); } }
@media (hover: hover) { .site .scrollcue:hover .scrollcue__mouse::before { opacity: 1; } }
.site .scrollcue:active .scrollcue__mouse { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--border); }

/* Phones and tablets: a finger in a round button instead of the mouse */
.site .scrollcue__touch { display: none; }
@media (hover: none), (max-width: 991.98px) {
  .site .scrollcue__mouse { display: none; }
  .site .scrollcue__touch {
    display: grid; place-items: center;
    width: clamp(2.5rem, 7vh, 3rem); aspect-ratio: 1; border-radius: .75rem;
    border: var(--bw) solid var(--border); background: var(--surface); color: var(--ink);
    box-shadow: 3px 3px 0 0 var(--border);
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
  }
  .site .scrollcue__touch svg { width: 55%; height: 55%; animation: cue-swipe 1.8s var(--ease-out) infinite; }
  .site .scrollcue:is(:active, .is-pressed) .scrollcue__touch { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--border); }
}
/* The finger slides down and fades out, then reappears at the top, so the motion
   only ever reads as "down" (same rhythm as the mouse wheel on desktop) */
@keyframes cue-swipe {
  0%, 20% { transform: translateY(-3px); opacity: 1; }
  60% { transform: translateY(4px); opacity: 0; }
  61% { transform: translateY(-3px); opacity: 0; }
  100% { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .site .scrollcue__touch svg { animation: none; } }


/* Same layout at every screen size: name + tagline left, profile buttons
   stacked on the right behind a thin line. Everything scales with the screen. */
.site .hero__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: clamp(.75rem, 3vw, 2.5rem);
}
.site .hero__main { min-width: 0; }
.site .hero-links {
  display: flex; flex-direction: column; gap: clamp(.4rem, 1.2vw, .75rem);
  padding: .25rem 0 .25rem clamp(.75rem, 3vw, 2.5rem);
  border-left: var(--bw) solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.site .hero-links a {
  border: var(--bw) solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
  min-height: 2.875rem; padding-inline: 1.1rem; font-weight: 500; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: space-between; gap: .6rem;
  transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.site .hero-links__label { display: inline-flex; align-items: center; gap: .6rem; }
.site .hero-links__icon { width: 1.25em; height: 1.25em; flex: none; }
.site .hero-links__arrow { transition: transform .18s var(--ease-out); }
@media (hover: hover) { .site .hero-links a:hover .hero-links__arrow { transform: translate(2px, -2px); } }

@media (min-width: 992px) { .site { --fs-mega: clamp(3rem, 6.6vw, 5.9rem); } }

/* Hero + ticker together fill the first screen */
.site .fold { min-height: 100svh; display: flex; flex-direction: column; }
.site .fold .hero { min-height: 0; flex: 1; }

/* Scrolling ticker between hero and about */
.site .ticker {
  /* --band: the band color; its edge and About's top border take the same color
     so no line shows above or below it */
  --band: var(--ink);
  background: var(--band); color: var(--canvas-base); border-top: var(--bw) solid var(--band);
  overflow: hidden; padding-block: .9rem;
}
.site .ticker__track { display: flex; width: max-content; animation: ticker 32s linear infinite; }
@media (hover: hover) { .site .ticker:hover .ticker__track { animation-play-state: paused; } }
.site .ticker__group { display: flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; flex: none; }
.site .ticker span {
  font-size: clamp(1.125rem, 2.4vw, 1.625rem); font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
}
.site .ticker i { font-style: normal; color: var(--accent); }
.site .ticker i:nth-of-type(3n+2) { color: var(--accent-3); }
.site .ticker i:nth-of-type(3n) { color: var(--accent-2); }
@keyframes ticker { to { transform: translateX(-50%); } }
/* Dark theme: a deep band (not the pale inverse) so the mint stars glow softly instead of glaring.
   Only colors change; its edge blends into the band exactly like in the light theme. */
[data-theme="dark"] .site .ticker { --band: #313244; color: var(--ink); }
[data-theme="dark"] .site .fold + .about { border-top-color: #313244; }

/* Intro animation (only when JS is running) */
.js .site .name__line > span { transform: translateY(105%); transition: transform .9s var(--ease-out); }
.js .site .intro { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .site.is-in .name__line > span { transform: none; }
.js .site.is-in .intro { opacity: 1; transform: none; }

/* ===== Sections ===== */
/* Sections land exactly under the fixed top bar (no strip of the previous section) */
.site > section { scroll-margin-top: var(--bar-h); padding-block: clamp(4rem, 12vh, 8rem); }
/* Same for direct links to sections that have a top border */
.site > :is(.about, .work, .work[hidden] + section, .services) { scroll-margin-top: calc(var(--bar-h) - var(--bw)); }
.site .section__head { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.site .section__head h2 { font-size: var(--fs-heading); margin-top: .9rem; }
.site .section__head p { color: var(--ink-muted); max-width: var(--measure); margin-top: .85rem; }

.js .site .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .site .reveal.is-visible { opacity: 1; transform: none; }

/* ===== About ===== */
.site .about { background: var(--surface); border-block: var(--bw) solid var(--border); }
.site .about__lede { letter-spacing: -.02em; font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 500; line-height: 1.35; }
.site .about__notes { gap: 1.1rem; margin-top: 1.75rem; display: grid; }
.site .about__notes p { color: var(--ink-muted); max-width: var(--measure); }

/* Square and no wider than the photo itself (319px), so it isn't stretched or cropped */
.site .portrait { position: relative; max-width: min(17rem, 319px); margin-inline: auto; }
.site .portrait__card { aspect-ratio: 1; position: relative; }
.site .portrait__face {
  border: var(--bw) solid var(--border); border-radius: var(--radius-card); background: var(--canvas-base);
  box-shadow: var(--shadow-hard-lg); position: absolute; inset: 0; overflow: hidden;
}
.site .portrait__face img { object-fit: cover; width: 100%; height: 100%; }
.site .portrait__pending { display: none; }
.site .portrait__face--empty {
  background: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--ink) 5%, transparent) 14px 15px), var(--canvas-base);
  place-items: center; display: grid; text-align: center;
}
.site .portrait__face--empty .portrait__pending {
  display: block; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-subtle); padding-inline: 1rem; font-size: .75rem;
}
@media (max-width: 991.98px) { .site .portrait { max-width: min(16rem, 319px); margin-inline: auto; } }

/* ===== Experience (timeline) ===== */
/* Desktop: [year | rail with dot | card]. Phones: the year moves above the card. */
.site .tl {
  --year-w: 6.5rem; --rail-w: 3rem; --dot: 1rem;
  position: relative; display: grid; gap: clamp(1.5rem, 4vh, 2.25rem); max-width: 62rem;
}
/* The vertical line */
.site .tl::before {
  content: ""; position: absolute; top: 1.5rem; bottom: 1.5rem;
  left: calc(var(--year-w) + var(--rail-w) / 2 - var(--bw) / 2); width: var(--bw);
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.site .tl__item {
  display: grid; grid-template-columns: var(--year-w) var(--rail-w) minmax(0, 1fr); align-items: start;
}
.site .tl__year {
  text-align: right; padding-top: 1.15rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.04em; line-height: 1;
}
/* End year: same size as the start year, on the line below in a softer color */
.site .tl__year-end { display: block; margin-top: .15em; color: var(--ink-subtle); }
.site .tl__dot {
  justify-self: center; margin-top: 1.35rem; position: relative; z-index: 1;
  width: var(--dot); height: var(--dot); border-radius: 50%;
  border: var(--bw) solid var(--border); background: var(--surface);
}
/* A role you're in now: filled dot plus a "Now" tag before the title */
.site .tl__item[data-current] .tl__dot {
  background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}
.site .tl__item[data-current] h3::before {
  content: "Now"; display: inline-block; vertical-align: .2em; margin-right: .5rem;
  background: var(--accent); color: var(--accent-ink); border: 1.5px solid var(--border);
  border-radius: var(--radius-pill); padding: .05rem .5rem; font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.site .tl__card {
  border: var(--bw) solid var(--border); border-radius: var(--radius-card); background: var(--surface);
  box-shadow: var(--shadow-hard); padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.site .tl__card h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); letter-spacing: -.015em; line-height: 1.25; }
.site .tl__card h3 span { color: var(--ink-muted); font-weight: 400; }
.site .tl__meta { color: var(--ink-subtle); font-size: .875rem; margin-top: .35rem !important; }
.site .tl__desc { color: var(--ink-muted); max-width: var(--measure); margin-top: .75rem !important; }
.site .tl__desc strong, .site .tl__points strong { color: var(--ink); font-weight: 700; }
.site .tl__points { gap: .5rem; margin-top: .85rem !important; display: grid; }
.site .tl__points li { color: var(--ink-muted); max-width: var(--measure); padding-left: 1.4rem; position: relative; }
.site .tl__points li::before {
  content: ""; background: var(--accent); border: 1.5px solid var(--border);
  width: 8px; height: 8px; position: absolute; top: .62em; left: 0;
}
@media (max-width: 767.98px) {
  .site .tl { --year-w: 0px; --rail-w: 2rem; --dot: 14px; gap: 1.75rem; }
  .site .tl::before { top: 2.5rem; }
  .site .tl__item { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .site .tl__year {
    grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 .5rem;
    font-size: 1.375rem; color: var(--ink-subtle);
  }
  .site .tl__year { color: var(--ink); }
  .site .tl__year-end { display: inline; margin: 0; }
  .site .tl__year-end::before { content: " – "; }
  .site .tl__dot { grid-column: 1; grid-row: 2; margin-top: 1.2rem; }
  .site .tl__card { grid-column: 2; grid-row: 2; }
}

.site .s-chips { flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; display: flex; }
.site .s-chip {
  border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: var(--radius-chip);
  color: var(--ink-muted); padding: .25rem .6rem; font-size: .8125rem;
}

/* ===== Work ===== */
.site .work { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); border-block: var(--bw) solid var(--border); }
/* While Showcase is hidden, Media takes the surface tone so sections keep alternating
   (About surface, Experience canvas, Media surface); top border only, Services draws the line below */
.site .work[hidden] + section { background: var(--surface); border-top: var(--bw) solid var(--border); }
.site .cases { gap: clamp(3.5rem, 10vh, 7rem); display: grid; }
.site .case { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); display: grid; }
@media (min-width: 861px) {
  .site .case:nth-child(2n) { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .site .case:nth-child(2n) .case__shot { order: 2; }
}
/* Screenshot sits in a little browser window, tilted until hovered */
.site .case__shot {
  border: var(--bw) solid var(--border); border-radius: var(--radius-card); background: var(--surface);
  box-shadow: 6px 6px 0 0 var(--border);
  transform: rotate(-1.5deg);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  display: flex; flex-direction: column; position: relative; overflow: hidden; text-decoration: none;
}
.site .case:nth-child(2n) .case__shot {
  transform: rotate(1.5deg);
  box-shadow: 6px 6px 0 0 var(--border);
}
@media (hover: hover) { .site .case .case__shot:hover { transform: rotate(0) translate(-3px, -3px); } }
.site .case__chrome {
  display: flex; align-items: center; gap: 6px; padding: .55rem .75rem;
  border-bottom: var(--bw) solid var(--border); background: color-mix(in srgb, var(--ink) 4%, var(--surface));
}
.site .case__chrome i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--border); flex: none; }
.site .case__chrome i { background: var(--ink); }
.site .case__url {
  margin-left: .5rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-subtle); font-size: .75rem; padding: .1rem .7rem;
}
.site .case__screen { aspect-ratio: 16 / 9; display: block; overflow: hidden; }
.site .case__screen img { object-fit: cover; object-position: top; width: 100%; height: 100%; }
.site .case__screen--none {
  background: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--ink) 5%, transparent) 14px 15px), var(--surface);
  place-items: center; display: grid;
}
.site .case__screen--none span { letter-spacing: -.02em; color: color-mix(in srgb, var(--ink) 26%, transparent); font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 700; }
.site .case__no { letter-spacing: .1em; color: var(--ink-subtle); font-size: .8125rem; }
.site .case h3 { letter-spacing: -.03em; margin-top: .6rem; font-size: clamp(1.875rem, 4vw, 3rem); }
.site .case__tag { color: var(--ink-muted); margin-top: .4rem; font-size: 1.125rem; }
.site .case__lede { color: var(--ink-muted); max-width: 46ch; margin-top: 1.1rem; }
.site .case__award {
  background: var(--accent); width: fit-content; color: var(--accent-ink); border: 1.5px solid var(--border);
  border-radius: var(--radius-chip); align-items: center; gap: .45rem; margin-top: 1.1rem;
  padding: .2rem .55rem; font-size: .8125rem; font-weight: 500; display: flex;
}
.site .case__go {
  border: var(--bw) solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
  min-height: 3rem; box-shadow: 3px 3px 0 0 var(--border); color: var(--ink);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
  align-items: center; gap: .6rem; margin-top: 1.5rem; padding-inline: 1.25rem; font-weight: 500;
  text-decoration: none; display: inline-flex;
}
@media (hover: hover) { .site .case__go:hover { box-shadow: 5px 5px 0 0 var(--border); transform: translate(-2px, -2px); } }
@media (max-width: 860px) {
  .site .case { grid-template-columns: 1fr; }
  .site .case:nth-child(2n) .case__shot { order: 0; }
}

/* ===== Education / awards / writing ===== */
.site .cred {
  height: 100%; border: var(--bw) solid var(--border); border-radius: var(--radius-card); background: var(--surface);
  box-shadow: var(--shadow-hard); padding: clamp(1.25rem, 3vw, 1.75rem);
}
.site .cred h3 { letter-spacing: .14em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 1.1rem; font-size: .75rem; font-weight: 500; }
.site .cred li + li { border-top: 1.5px solid color-mix(in srgb, var(--ink) 14%, transparent); margin-top: 1rem; padding-top: 1rem; }
.site .cred b { letter-spacing: -.01em; font-weight: 700; display: block; }
.site .cred span { color: var(--ink-subtle); font-size: .9375rem; display: block; }
.site .cred a { text-decoration: none; }
.site .cred a b { text-decoration: underline; text-decoration-color: var(--accent-2); text-underline-offset: 3px; text-decoration-thickness: 3px; }

/* ===== Services (numbered list) ===== */
/* A soft mint wash, so the page ends on the brand color */
.site .services {
  background: color-mix(in srgb, var(--accent) 14%, var(--canvas-base));
  border-top: var(--bw) solid var(--border);
}
.site .svc-list { border-bottom: var(--bw) solid var(--border); }
.site .svc {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 1.75rem) 1rem;
  border-top: var(--bw) solid var(--border); position: relative; isolation: isolate;
}
/* Color wipe from the left on hover */
.site .svc::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--c) 16%, var(--surface));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
@media (hover: hover) { .site .svc:hover::before { transform: scaleX(1); } }
.site .svc__no {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: color-mix(in srgb, var(--ink) 22%, transparent); transition: color .3s var(--ease-out), transform .3s var(--ease-out);
}
@media (hover: hover) { .site .svc:hover .svc__no { color: var(--ink); transform: translateX(4px); } }
.site .svc__main h3 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); letter-spacing: -.03em; }
.site .svc__main p { color: var(--ink-muted); margin-top: .35rem; max-width: 44ch; }
.site .svc__tags { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.site .svc__tags .s-chip { background: var(--surface); }
@media (max-width: 860px) {
  .site .svc { grid-template-columns: 3rem minmax(0, 1fr); align-items: start; padding-inline: .5rem; }
  .site .svc__tags { grid-column: 2; justify-content: flex-start; }
}

.site .svc-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(2rem, 5vh, 3rem);
}
.site .svc-cta p { font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; }
.site .svc-cta a {
  background: var(--accent); color: var(--accent-ink); border: var(--bw) solid var(--border);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-hard); min-height: 3.25rem; padding-inline: 1.4rem;
  display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; text-decoration: none;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

/* ===== Link library (filterable grid) ===== */
.site .lib-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
/* Phones: one row you swipe sideways (like app category tabs) instead of wrapping.
   It runs edge to edge, with room under it for the buttons' shadow. Each edge fades out
   while there's more to swipe that way (--fade-l / --fade-r are set by main.js) */
@media (max-width: 767.98px) {
  .site .lib-filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter);
    --fade-l: 0px; --fade-r: 2.5rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  }
  .site .lib-filters::-webkit-scrollbar { display: none; }
  .site .lib-filter { flex: none; }
}
.site .lib-filter {
  border: var(--bw) solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
  color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer;
  min-height: 2.625rem; padding-inline: 1rem; display: inline-flex; align-items: center; gap: .5rem;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
}
.site .lib-filter__count {
  font-size: .75rem; font-variant-numeric: tabular-nums; min-width: 1.4rem; height: 1.4rem; padding-inline: .3rem;
  border-radius: var(--radius-pill); display: inline-grid; place-items: center;
  /* Soft mint with deep-mint number; turns white once the pill itself is mint */
  background: color-mix(in srgb, var(--accent) 32%, var(--surface)); color: var(--accent-text); font-weight: 700;
  transition: background .38s var(--ease-out), color .38s var(--ease-out);
}
.site .lib-filter[aria-pressed="true"] .lib-filter__count { background: var(--surface); }
@media (hover: hover) { .site .lib-filter:hover .lib-filter__count { background: var(--surface); } }

/* Cards sit in a sideways-scrolling row: 3 visible on desktop, 2 on tablet, 1+ on phones */
.site .lib-grid {
  --lib-gap: 1.25rem;
  display: flex; gap: var(--lib-gap); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  /* Room for the hover lift (-3px) and hard shadow (+7px), which the scroll area would otherwise clip */
  padding: 12px 16px 18px 12px; margin: -12px -16px -4px -12px;
  scroll-padding-inline: 12px;
}
.site .lib-grid::-webkit-scrollbar { display: none; }
.site .lib-grid:focus-visible { outline-offset: 6px; }
.site .lib-item { flex: 0 0 calc((100% - 2 * var(--lib-gap)) / 3); scroll-snap-align: start; min-width: 0; }
@media (max-width: 991.98px) { .site .lib-item { flex-basis: calc((100% - var(--lib-gap)) / 2); } }
@media (max-width: 575.98px) { .site .lib-item { flex-basis: 86%; } }
/* Phones: the row runs to the screen edges, so the next card slides off the real edge
   instead of being cut at the page margin. Cards still line up with the text when at rest */
@media (max-width: 767.98px) {
  .site .lib-grid {
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

.site .lib-nav { display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.site .lib-nav__btn {
  border: var(--bw) solid var(--border); background: var(--surface); color: var(--ink);
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: inherit; font-weight: 700; cursor: pointer;
  transition: background .18s var(--ease-out), transform .18s var(--ease-out), opacity .18s;
}
.site .lib-nav__btn:disabled { opacity: .35; cursor: default; }
/* The bar is 6px, but the padding gives a taller area to grab and drag (see main.js) */
.site .lib-nav__track {
  flex: 1; height: 6px; padding-block: 9px; box-sizing: content-box; margin-left: .5rem;
  border-radius: 999px; position: relative; overflow: hidden; background-clip: content-box;
  background-color: color-mix(in srgb, var(--ink) 10%, transparent);
  cursor: grab; touch-action: none;
}
.site .lib-nav__track.is-dragging { cursor: grabbing; }
.site .lib-nav__thumb {
  position: absolute; top: 9px; bottom: 9px; left: 0; border-radius: 999px; background: var(--ink);
  width: var(--thumb-w, 30%); transform: translateX(var(--thumb-x, 0));
  transition: top .15s var(--ease-out), bottom .15s var(--ease-out), background .15s var(--ease-out);
}
@media (hover: hover) { .site .lib-nav__track:hover .lib-nav__thumb { top: 7px; bottom: 7px; } }
.site .lib-nav__track.is-dragging .lib-nav__thumb { top: 7px; bottom: 7px; background: var(--accent-text); }
.site .lib-grid.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }

.site .lib-item { animation: libIn .4s var(--ease-out) both; }
@keyframes libIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.site .lib-card {
  height: 100%; display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: var(--ink);
  border: var(--bw) solid var(--border); border-radius: var(--radius-card); background: var(--surface);
  box-shadow: var(--shadow-hard); padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.site .lib-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.site .lib-tag {
  border: 1.5px solid var(--border); border-radius: var(--radius-chip); padding: .1rem .55rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink);
}
/* Text scales with the screen, steps down for long titles (--title-scale, set in main.js),
   and wraps long words or URLs instead of overflowing the card */
.site .lib-card { overflow-wrap: anywhere; hyphens: auto; }
.site .lib-card__title {
  font-size: calc(clamp(1rem, .9rem + .45vw, 1.25rem) * var(--title-scale, 1));
  letter-spacing: -.01em; line-height: 1.3; text-wrap: pretty;
}
.site .lib-card__src { color: var(--ink-subtle); font-size: clamp(.875rem, .82rem + .2vw, .9375rem); line-height: 1.45; }
/* "Read more" is a standard button (styled with the others at the end of the file);
   it is the card's only link, the card itself isn't clickable */
.site .lib-card__go {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ===== Contact ===== */
.site .closer {
  background: color-mix(in srgb, var(--ink) 14%, var(--canvas-base)); border-top: var(--bw) solid var(--border);
  padding-block: clamp(5rem, 16vh, 10rem); position: relative; overflow: hidden;
}
.site .closer__field {
  pointer-events: none; will-change: transform;
  background:
    radial-gradient(circle 38vw at 8% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    radial-gradient(circle 30vw at 88% 76%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 58%);
  position: absolute; inset: -20% 0;
}
.site .closer__inner { z-index: 1; position: relative; }
.site .closer h2 { letter-spacing: -.04em; font-size: clamp(2.5rem, 8vw, 6rem); line-height: .95; }
.site .closer p { color: var(--ink-muted); max-width: 48ch; margin-top: 1.5rem; font-size: 1.125rem; }
.site .closer__mail {
  letter-spacing: -.02em; border: 0; border-bottom: 3px solid var(--accent); word-break: break-word; margin-top: 2.5rem;
  padding: 0 0 .25rem; font: inherit; font-size: clamp(1.125rem, 3.2vw, 2rem); font-weight: 500;
  background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: .6rem;
  text-align: left; transition: border-color .2s var(--ease-out);
}
.site .closer__mail:hover { border-bottom-color: var(--accent-2); }
.site .closer__copy {
  font-size: .55em; border: 1.5px solid var(--border); border-radius: var(--radius-chip); background: var(--surface);
  width: 1.9em; height: 1.9em; display: grid; place-items: center; flex: none;
  transition: background .2s var(--ease-out);
}
.site .closer__mail:hover .closer__copy { background: var(--accent-3); color: var(--accent-3-ink); }

/* Toast */
.site .toast {
  position: fixed; left: 50%; bottom: clamp(1rem, 4vw, 2rem); z-index: 90;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  background: var(--accent-3); color: var(--accent-3-ink); border: var(--bw) solid var(--border);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-hard); padding: .6rem 1.2rem; font-weight: 700;
}
.site .toast[data-on="1"] { opacity: 1; transform: translate(-50%, 0); }
.site .closer__links { flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; display: flex; }
.site .closer__links a {
  border: var(--bw) solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
  min-height: 2.875rem; transition: background .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
  align-items: center; gap: .4rem; padding-inline: 1.1rem; font-weight: 500; text-decoration: none; display: inline-flex;
}
.site .closer__links a:hover { background: var(--ink); color: var(--canvas-base); border-color: var(--ink); }

/* ===== Back to top + footer ===== */
.site .totop {
  z-index: 50; /* under the phone menu and its dimmed backdrop (54/55) */
  border: var(--bw) solid var(--border); background: var(--surface); width: 3rem; height: 3rem;
  color: var(--ink); box-shadow: var(--shadow-hard); opacity: 0; pointer-events: none;
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out), background .18s var(--ease-out);
  border-radius: 50%; place-items: center; font-size: 1.125rem; text-decoration: none; display: grid;
  position: fixed; bottom: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); transform: translateY(10px);
}
.site[data-far="1"] .totop { opacity: 1; pointer-events: auto; transform: none; }

/* Same dark strip as the band under the hero, so it bookends the page */
.site .foot {
  --band: var(--ink);
  background: var(--band); color: color-mix(in srgb, var(--canvas-base) 70%, transparent);
  border-top: var(--bw) solid var(--band); padding-block: 2rem; font-size: .9375rem;
}
[data-theme="dark"] .site .foot { --band: #313244; color: var(--ink-muted); }
.site .foot .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; }
.site .foot__name { color: var(--canvas-base); font-weight: 500; }
[data-theme="dark"] .site .foot__name { color: var(--ink); }
.site .foot__credit { font-size: .8125rem; }
.site .foot__credit a { color: var(--ink); text-underline-offset: 3px; text-decoration: underline; }

/* ===== Scrollbar ===== */
/* Base size grows with the screen (about 15px on phones, 16-17px on tablets, 18px on desktop).
   Text, buttons, icons and spacing are in rem/em, so they all scale with it. */
html { font-size: clamp(.9375rem, .875rem + .3vw, 1.125rem); scrollbar-gutter: stable; scroll-behavior: smooth; }
/* Phone browsers (Safari after rotating, Chrome's "font boosting", in-app browsers) may
   enlarge text blocks on their own; this keeps text at the sizes set here */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.themepick svg { width: 1.125rem; height: 1.125rem; }
html::-webkit-scrollbar { width: 14px; }
html::-webkit-scrollbar-track { background: color-mix(in srgb, var(--ink) 8%, var(--canvas-base)); }
html::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 62%, transparent); background-clip: content-box;
  border: 4px solid #0000; border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover { background: var(--ink); background-clip: content-box; }

/* ===== Small phones ===== */
@media (max-width: 560px) {
  .site {
    --fs-body: 1rem; --fs-mega: clamp(2.25rem, 10.5vw, 7rem);
    --fs-display: clamp(1.375rem, 5.2vw, 3.75rem); --fs-heading: clamp(1.25rem, 5.4vw, 2.25rem);
    line-height: 1.55;
  }
  .site > section { padding-block: clamp(3rem, 8vh, 5rem); }
  .site .section__head { margin-bottom: 1.75rem; }
  .site .about__lede { font-size: 1.1875rem; }
  .site .about__notes { margin-top: 1.25rem; }
  .site .s-tool { gap: .5rem; padding: .3rem .7rem .3rem .3rem; font-size: .875rem; }
  .site .s-tool img { border-radius: 5px; width: 24px; height: 24px; padding: 3px; }
  .site .s-tool--text { padding-inline: .7rem; }
  .site .case h3 { font-size: 1.625rem; }
  .site .case__tag { font-size: 1rem; }
  .site .case__go { min-height: 2.75rem; margin-top: 1.25rem; font-size: .9375rem; }
  .site .cases { gap: 2.75rem; }
  .site .closer { padding-block: 4rem; }
  .site .closer h2 { font-size: 2.25rem; }
  .site .closer p { font-size: 1rem; }
  .site .closer__mail { margin-top: 1.75rem; font-size: 1.0625rem; }
  .site .closer__links { gap: .5rem; margin-top: 1.75rem; }
  .site .closer__links a { min-height: 2.625rem; padding-inline: .9rem; font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .site .reveal, .js .site .intro { opacity: 1; transform: none; }
  .js .site .name__line > span { transform: none; }
}

/* ===== Standard button =====
   Every button shares one look: white background, dark text, 2px border,
   pill shape (round when icon-only), a small hard shadow, and the same hover:
   the mint fill fades in and the label turns dark.
   Kept last in the file so it wins over each button's own older styles. */
.site :is(.hero-links a, .svc-cta a, .lib-filter, .lib-nav__btn, .themepick, .burger, .totop) {
  background: var(--surface); color: var(--ink);
  border: var(--bw) solid var(--border); border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 0 var(--border);
  font-family: inherit; text-decoration: none; cursor: pointer;
  isolation: isolate; overflow: hidden;
  transition: color .2s ease, opacity .26s var(--ease-out),
    transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
/* Text buttons: one height, padding and type size */
.site :is(.hero-links a, .svc-cta a, .lib-filter) {
  min-height: 3rem; padding-inline: 1.25rem; font-size: 1rem; font-weight: 500;
}
.site :is(.hero-links a, .svc-cta a, .lib-filter, .lib-nav__btn, .themepick, .burger) { position: relative; }

/* The hover fill: a plain fade, no sweep */
.site :is(.hero-links a, .svc-cta a, .lib-filter, .lib-nav__btn, .themepick, .burger, .totop)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  opacity: 0; transition: opacity .2s ease;
}
/* Only on devices with a real mouse: phones keep :hover "stuck" after a tap,
   which left the burger filled after the menu closed */
@media (hover: hover) {
  .site :is(.hero-links a, .svc-cta a, .lib-filter, .lib-nav__btn:not(:disabled), .themepick, .burger, .totop):hover { color: var(--accent-ink); }
  .site :is(.hero-links a, .svc-cta a, .lib-filter, .lib-nav__btn:not(:disabled), .themepick, .burger, .totop):hover::before { opacity: 1; }
}
.site .burger span { background: currentColor; }

/* Press (.is-pressed is added by main.js so quick taps on phones show it too) */
.site :is(.hero-links a, .svc-cta a, .lib-filter, .lib-nav__btn:not(:disabled), .themepick, .burger, .totop):is(:active, .is-pressed) {
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--border);
}

/* Selected filter stays filled so you can see which one is on */
.site .lib-filter[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.site .lib-nav__btn:disabled { box-shadow: none; }

/* "Read more" in Media & press cards: same button look, a bit smaller */
.site .lib-card__go {
  position: relative; background: var(--surface); color: var(--ink);
  border: var(--bw) solid var(--border); border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 0 var(--border); isolation: isolate; overflow: hidden;
  min-height: 2.5rem; padding-inline: 1.1rem; margin-top: auto;
  font-size: .9375rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: color .2s ease, transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.site .lib-card__go:is(:active, .is-pressed) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--border); }
.site .lib-card__go::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  opacity: 0; transition: opacity .2s ease;
}
@media (hover: hover) {
  .site .lib-card__go:hover { color: var(--accent-ink); }
  .site .lib-card__go:hover::before { opacity: 1; }
}
.site .lib-card__go { gap: .5rem; }
.site .lib-card__arrow { transition: transform .18s var(--ease-out); }
@media (hover: hover) { .site .lib-card__go:hover .lib-card__arrow { transform: translate(2px, -2px); } }

/* ===== Hero scales with the screen (same layout on phones, tablets and desktop) =====
   Kept last so it wins over the standard button sizes above. */
/* Everything in the hero is sized from the name, so it all keeps the same proportions
   at any screen size. main.js sets:
     --hu      the name's font size (as big as the width and height allow)
     --spread  extra air between the parts, so the content fills tall screens too
   The values here are the no-JS fallback. */
.site .hero { --hu: clamp(2.25rem, 9vw, 6rem); --spread: 0px; }
.site .hero__eyebrow {
  font-size: clamp(.6875rem, calc(var(--hu) * .12), 1.5rem);
  margin-bottom: calc(var(--hu) * .3 + var(--spread));
}
.site .name { margin-bottom: calc(var(--hu) * .2 + var(--spread)); }
.site .term { font-size: clamp(.8125rem, calc(var(--hu) * .25), 3.5rem); }
.site .hero-links a {
  font-size: clamp(.9375rem, calc(var(--hu) * .17), 2.25rem);
  min-height: 2.9em; padding-inline: 1.15em; gap: .6em;
}
.site .ticker { padding-block: clamp(.5rem, 1.6vh, .9rem); }
.site .ticker span { font-size: clamp(.95rem, 2.4vw, 1.625rem); }
/* Very short screens (phones in landscape): a smaller, tighter cue so it still fits under the name */
@media (max-height: 420px) {
  .site .scrollcue { bottom: .6rem; gap: .2rem; }
  .site .scrollcue__touch { width: 1.875rem; }
  .site .scrollcue__mouse { width: 1.25rem; height: 1.875rem; }
  /* Less air above the content, more below it, so the cue has room on both sides */
  .site .hero { padding-top: calc(var(--bar-h) + .25rem); padding-bottom: 4.25rem; }
}
/* The shortest phones in landscape: a slimmer top bar buys the room the cue needs */
@media (max-height: 340px) {
  .site { --bar-h: 3.25rem; }
  /* Wide but very short (e.g. iPhone Safari in landscape, ~850x280): the profile buttons
     size by width, so they'd grow too tall here. Size them by height instead */
  .site .hero-links { gap: .4rem; }
  .site .hero-links a { min-height: 2.25rem; padding-inline: .9rem; font-size: .8125rem; }
  .site .hero__eyebrow { margin-bottom: .5rem; }
  /* Let the tagline use the width (2 lines instead of 3) so the name keeps its height */
  .site .term { max-width: 56ch; font-size: .75rem; }
  .site .name { margin-bottom: .4rem; }
}
@media (max-height: 310px) {
  .site .scrollcue { bottom: .4rem; }
  .site .hero { padding-bottom: 3.5rem; }
}
/* Tiny landscape (e.g. iPhone SE with Safari's bars, ~570x260): trim the bar, the space
   under the cue and the ticker so the whole first screen still fits */
@media (max-height: 280px) {
  .site { --bar-h: 2.875rem; }
  .site .hero { padding-bottom: 3.1rem; }
  .site .ticker { padding-block: .35rem; }
}
/* Phones and tablets in portrait: stack the buttons under the name and tagline, side by
   side, with a full-width line above them; the tag line gets a matching full-width divider.
   With the buttons out of the way, the name gets the full width. */
@media (orientation: portrait) and (max-width: 1199.98px) {
  .site .hero__layout { grid-template-columns: minmax(0, 1fr); }
  .site .hero-links {
    flex-direction: row; gap: .5rem; margin-top: calc(var(--hu) * .3 + var(--spread));
    padding: calc(var(--hu) * .25) 0 0; border-left: 0;
    border-top: var(--bw) solid color-mix(in srgb, var(--ink) 18%, transparent);
  }
  /* Sized to their content (same width as each other), with the arrow next to the label
     instead of pushed to the far edge */
  .site .hero-links a { flex: 0 0 auto; min-width: 10.4em; justify-content: center; }
  .site .hero__eyebrow {
    position: relative; max-width: none; padding-bottom: calc(var(--hu) * .25); letter-spacing: .1em;
  }
  .site .hero__eyebrow::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; opacity: 1;
    height: var(--bw); background: color-mix(in srgb, var(--ink) 18%, transparent);
  }
  /* Everything centered horizontally */
  .site .hero__inner { text-align: center; }
  .site .hero__eyebrow, .site .term { margin-inline: auto; }
  .site .hero__eyebrow { justify-content: center; }
  .site .term { justify-content: center; }
  .site .hero-links { justify-content: center; }
  /* The $ moves inside the text so it sits right before the first word */
  .site .term__prompt { display: none; }
  .site :is(.term__ghost, .term__typed)::before {
    content: "$\00a0\00a0"; color: var(--accent-text); font-weight: 700;
  }
}
@media (orientation: portrait) and (max-width: 767.98px) {
  /* Services: "Have something in mind?" and its button stacked and centered */
  .site .svc-cta { flex-direction: column; justify-content: center; text-align: center; }
  .site .svc-cta p { margin-bottom: 0; }
  /* Media & press: progress slider on top (full width), arrows centered underneath */
  .site .lib-nav { flex-wrap: wrap; justify-content: center; row-gap: 1rem; }
  .site .lib-nav__track { order: -1; flex: 1 0 100%; margin-left: 0; }
}