/* Darla Nova: whimsy, but make it tech.
   One main idea per screen. Flat pastels, one plum ink, hand-drawn icons. */

:root {
  --page: #F6F6F8;
  --paper: #FFFFFF;
  --ink: #2A1838;
  --ink-2: #4A4058;
  --muted: #6B6178;
  --star: #D6336F;
  --link: #B0245A;
  --pink: #F2A7C6;   --pink-s: #D07CA2;
  --butter: #F0D27A; --butter-s: #C9A949;
  --sky: #DCEEFB;
  --white: #FBFBFC;  --white-s: #C9D2DE;
  --t-lilac: #C8B8F8;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --pad: max(clamp(20px, 5vw, 64px), calc((100vw - 1180px) / 2));
  --sans: 'Newsreader', Georgia, serif;
  --serif: 'Newsreader', Georgia, serif;
}

@font-face { font-family: 'Super Chips'; src: url('/assets/fonts/super-chips.woff2') format('woff2'); font-display: block; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px;
}
.skip:focus { top: 16px; }

:where(a, button):focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 8px; }

.star { flex: none; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .twinkle { animation: twinkle 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
}
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.84); opacity: .72; } }

/* ---------- keys ---------- */
.key {
  --face: var(--white); --shade: var(--white-s);
  --u: 96px; --r: 0deg; --y: 0px; --s: 1;
  position: relative;
  width: var(--u); height: var(--u);
  border: 0; border-radius: calc(var(--u) * .22);
  background: var(--face);
  padding: calc(var(--u) * .12) calc(var(--u) * .14);
  display: inline-flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  font-family: var(--sans); text-align: left; text-decoration: none; color: var(--ink);
  user-select: none; -webkit-user-select: none; cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 6px 0 var(--shade), 0 14px 20px rgba(42,24,56,.14);
  transform: translateY(var(--y)) rotate(var(--r)) scale(var(--s));
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.key .l { font-size: 12px; line-height: 1; color: var(--ink-2); }
.key .w { font-size: 17px; line-height: 1; font-weight: 500; white-space: nowrap; }
.key.pink   { --face: var(--pink);   --shade: var(--pink-s); }
.key.butter { --face: var(--butter); --shade: var(--butter-s); }
.key.pink   { --face: #F59CC2; --shade: #D46C98; }
.key.butter { --face: #F8D36A; --shade: #D9A93A; }
.key.lilac  { --face: #C4B1F6; --shade: #9682D8; }
.key.mint   { --face: #86D9C2; --shade: #4FB397; }
.key .w { font-weight: 600; letter-spacing: -.01em; }
.key .l { font-weight: 500; }
/* plain captions instead of colored pills */
.meta { display: block; margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.story > .meta, .feature .meta { margin: 0; }
.certs a { color: var(--ink); text-decoration-color: oklch(0 0 0 / .25); text-underline-offset: 4px; }
@media (hover: hover) { .certs a:hover { text-decoration-color: var(--link); } }
.now { display: block; }
.key:active, .key.pressed, .key[aria-pressed="true"] {
  --y: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 2px 0 var(--shade), 0 4px 8px rgba(42,24,56,.12);
}
.key.mini { --u: 64px; width: auto; min-width: 64px; height: 52px; padding: 7px 9px; border-radius: 13px; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 var(--shade); }
.key.mini .l { font-size: 10px; }
.key.mini .w { font-size: 13px; }
.key.mini:active, .key.mini.pressed { --y: 3px; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 1px 0 var(--shade); }
.key.mini[aria-current="page"] { --y: 3px; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 1px 0 var(--shade); }
.key.wide { --u: 96px; width: auto; min-width: 128px; height: 96px; padding: 14px 16px; border-radius: 20px; justify-content: flex-end; }
.key.wide small { font-family: var(--sans); font-size: 12px; color: var(--ink-2); margin-top: 6px; }


/* ---------- top bar ---------- */
.top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px var(--pad) 26px;
}
.home-link { display: inline-flex; align-items: flex-start; gap: 4px; font-size: 22px; letter-spacing: -.02em; text-decoration: none; }
.home-link svg { width: 15px; height: 15px; margin-top: -1px; }
.mini-keys { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- page type ---------- */
.page { padding: 32px var(--pad) 160px; }
.page-title { font-family: var(--serif); font-weight: 400; margin: 0; font-size: clamp(46px, 7vw, 84px); letter-spacing: -.01em; line-height: 1.02; }
.lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-2); max-width: 60ch; margin: 18px 0 0; }
.section { margin-top: 128px; }
.section > h2, .h2 { font-family: var(--serif); font-weight: 400; margin: 0 0 18px; font-size: clamp(28px, 3vw, 36px); letter-spacing: -.01em; line-height: 1.05; }
.h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
.muted { color: var(--muted); }

/* tags: flat stickers */

/* ---------- project list ---------- */
.projects { display: grid; gap: 112px; }
.project { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; text-decoration: none; }
.project h3 { font-family: var(--serif); font-weight: 400; margin: 12px 0 8px; font-size: clamp(24px, 2.2vw, 28px); letter-spacing: -.01em; line-height: 1.1; }
.project p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 42ch; }
.project .more { display: inline-block; margin-top: 14px; color: var(--link); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .project:hover .more { text-decoration: underline; } }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 88px 40px; }
.card { text-decoration: none; display: block; }
.card h3, .card .card-title { font-family: var(--serif); font-weight: 400; margin: 20px 0 6px; font-size: clamp(22px, 2vw, 26px); letter-spacing: -.01em; line-height: 1.15; }
.card p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 48ch; }
.card[hidden], .project[hidden], .projects:not(:has(.project:not([hidden]))) { display: none; }
.project .card-title { margin: 12px 0 8px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }



/* ---------- covers: full-bleed previews, like a window into the project ---------- */
.cover {
  position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden;
  background: var(--ink); isolation: isolate;
}
.cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .08); pointer-events: none; }
.cover img, .cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover video[aria-hidden] { opacity: 0; transition: opacity 200ms cubic-bezier(.2, 0, 0, 1); }
.cover.playing video[aria-hidden] { opacity: 1; }
.cover-word { display: grid; place-items: center; }
.cover .word { font-family: var(--sans); font-weight: 600; font-size: clamp(20px, 2.4vw, 30px); color: #fff; text-align: center; padding: 24px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cover img { transition: transform 200ms var(--ease-out); }
  a:hover .cover img { transform: scale(1.02); }
}
.story .cover { margin-top: 28px; }

/* ---------- case study ---------- */
.case { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.case-menu { position: sticky; top: 24px; display: grid; gap: 12px; font-size: 18px; }
.case-menu a { text-decoration: none; color: var(--muted); padding: 6px 0; }
.case-menu a.back { color: var(--link); font-weight: 600; font-size: 15px; }
@media (hover: hover) { .case-menu a:hover { color: var(--ink); } }
.story { max-width: 900px; }
.case.solo { display: block; }
.case > .back { display: inline-block; padding: 12px 0; margin-bottom: 16px; color: var(--link); font-weight: 600; font-size: 15px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; }
.gallery img { width: 100%; height: auto; border-radius: 16px; outline: 1px solid oklch(0 0 0 / .1); outline-offset: -1px; }
.facts { display: flex; flex-wrap: wrap; gap: 24px 48px; margin-top: 28px; padding: 26px 32px; background: var(--paper); border-radius: 20px; }
.facts dt { font-size: 14px; font-weight: 700; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-weight: 600; font-size: 18px; }
.facts div { min-width: 120px; }
.story section { margin-top: 88px; scroll-margin-top: 24px; }
.story section h2 { font-family: var(--serif); font-weight: 400; margin: 0 0 14px; font-size: 28px; letter-spacing: -.01em; }
.story ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; font-size: 18px; color: var(--ink-2); max-width: 64ch; }
.story p { font-size: 18px; color: var(--ink-2); max-width: 64ch; margin: 0; }
.links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.links a { font-weight: 600; color: var(--link); }
.text-link { display: inline-block; padding: 12px 0; color: var(--link); font-weight: 600; }
.next { display: block; margin-top: 128px; padding: 24px 32px; border-radius: 20px; background: var(--sky); text-decoration: none; }
.next small { display: block; font-size: 14px; font-weight: 700; color: var(--muted); }
.next span { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.photo { position: relative; }
.things { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin-top: 20px; }
.things img { height: 84px; width: auto; filter: drop-shadow(0 6px 10px rgba(42,24,56,.14)); user-select: none; -webkit-user-select: none; }
/* stickers: drag with a mouse or a finger; a touch that starts on one picks it up instead of scrolling */
.things img { cursor: grab; touch-action: none; -webkit-touch-callout: none; position: relative; transition: scale 150ms ease-out, filter 150ms ease-out; }
.things img.lifted { z-index: 40; scale: 1.08; cursor: grabbing; filter: drop-shadow(0 18px 22px rgba(42,24,56,.24)); }
@media (prefers-reduced-motion: reduce) { .things img { transition: none; } }
@media (max-width: 760px) {
  .things img { height: 76px; }
}
.photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; transform: rotate(-3deg); }
.about-intro .lead { max-width: 54ch; }
.now { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 20px 0 18px; font-size: 17px; color: var(--ink-2); }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plain b { display: block; font-weight: 600; }
.plain span { color: var(--muted); font-size: 15px; }

/* ---------- extras ---------- */
.board-wrap { position: relative; isolation: isolate; margin-top: 32px; }
.board-wrap::before {
  content: ""; position: absolute; inset: -6% -3%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 60% at 16% 38%, #F2A7C6 0%, transparent 70%),
    radial-gradient(34% 55% at 58% 70%, #A9D4F7 0%, transparent 70%),
    radial-gradient(30% 50% at 88% 28%, #C8B8F8 0%, transparent 70%),
    radial-gradient(26% 40% at 40% 12%, #F0D27A 0%, transparent 70%);
  filter: blur(24px); opacity: .32;
}
.board {
  position: relative; height: var(--bh, 400px); border-radius: 28px; overflow: hidden; touch-action: pan-y;
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(42,24,56,.06), 0 18px 40px rgba(42,24,56,.10);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .board { background: rgba(255,255,255,.78); } }
.board-head { position: absolute; left: 32px; top: 26px; pointer-events: none; }
.board-head p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.pin {
  --r: 0deg; --y: 0px; --s: 1;
  position: absolute; left: var(--x); top: var(--top);
  border: 0; background: none; padding: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transform: translateY(var(--y)) rotate(var(--r)) scale(var(--s));
  transition: transform 160ms var(--ease-out);
  filter: drop-shadow(0 10px 14px rgba(42,24,56,.18));
}
.pin img { height: var(--h); width: auto; pointer-events: none; }
/* press feedback: a quick squeeze that answers the touch, then the lift once it moves */
.pin:not(.lifted):active { --s: .96; }
.pin.lifted { --s: 1.06; --y: -4px; cursor: grabbing; z-index: 5; filter: drop-shadow(0 22px 26px rgba(42,24,56,.26)); }
.caption {
  position: absolute; left: 0; top: 0; z-index: 6; margin: 0; max-width: 260px;
  padding: 12px 16px; border-radius: 14px; background: var(--paper); font-size: 16px; line-height: 1.4; color: var(--ink);
  box-shadow: 0 1px 2px rgba(42,24,56,.08), 0 10px 24px rgba(42,24,56,.12);
  transition: opacity 150ms ease-out;
}
.caption:empty { opacity: 0; visibility: hidden; }
.caption .by { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.caption .by a { color: var(--link); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .caption:not(:empty) { animation: caption-in 200ms ease-out; }
}
@keyframes caption-in { from { opacity: 0; transform: translateY(4px); } }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(20px, 3vw, 40px); background: var(--paper); border-radius: 28px; align-items: start; }
.feature img { border-radius: 20px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature .facts { padding: 0; margin-top: 18px; background: none; gap: 16px 32px; }
.feature ul { margin: 14px 0 0; padding-left: 1.2em; color: var(--ink-2); font-size: 17px; display: grid; gap: 6px; }
.small-card { background: var(--paper); border-radius: 22px; padding: 22px 24px 26px; display: grid; gap: 10px; align-content: start; }
.small-card img { border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.small-card h3 { font-family: var(--serif); font-weight: 400; margin: 0; font-size: 21px; letter-spacing: -.01em; line-height: 1.2; }
.small-card p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* ---------- say hi / 404 ---------- */
.hi { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 24px; }
.char { width: 170px; height: auto; display: block; margin: 0 auto; }
.char.squished { transform: scale(1.12, .78); transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .char:not(.squished) { transform-origin: 50% 100%; animation: breathe 3.6s ease-in-out infinite; }
  .char .s-face { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 4.8s infinite; }
}
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.12); animation-timing-function: cubic-bezier(.4, 0, 1, 1); } 96.3% { transform: scaleY(.12); } }
.hi-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin: 36px 0 0; padding: 0; font-size: clamp(20px, 2vw, 24px); font-weight: 600; }
.hi-links a { display: inline-block; padding: 8px 0; color: var(--ink); text-decoration: underline; text-decoration-color: oklch(0 0 0 / .25); text-underline-offset: 6px; transition: text-decoration-color 150ms ease-out, color 150ms ease-out; }
@media (hover: hover) { .hi-links a:hover { color: var(--link); text-decoration-color: currentColor; } }
.hi-email { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; overflow-wrap: anywhere; justify-content: center; gap: 12px; color: var(--muted); font-size: 16px; }
.copy { position: relative; display: inline-grid; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 12px; background: var(--paper); font-weight: 700; font-size: 15px; cursor: pointer; }
.copy span { grid-area: 1 / 1; transition: opacity 300ms cubic-bezier(.2, 0, 0, 1), filter 300ms cubic-bezier(.2, 0, 0, 1); }
.copy .b { opacity: 0; filter: blur(4px); }
.copy.done .a { opacity: 0; filter: blur(4px); }
.copy.done .b { opacity: 1; filter: none; }
@media (hover: hover) { .copy:hover { background: var(--sky); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- footer ---------- */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding: 120px var(--pad) 96px; background: var(--page); border-top: 1px solid oklch(0 0 0 / .08); }
.foot h2 { font-family: var(--serif); font-weight: 400; margin: 0; font-size: clamp(36px, 5vw, 56px); letter-spacing: -.01em; line-height: 1.05; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-weight: 600; }
.foot small { display: block; margin-top: 18px; color: var(--ink-2); }
.switch { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 44px; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 600; cursor: pointer; }
.switch .track { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--ink-2); transition: background-color 150ms ease-out; }
.switch .track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 150ms ease-out; }
.switch[aria-pressed="true"] .track { background: var(--ink); }
.switch[aria-pressed="true"] .track::after { transform: translateX(16px); }
.switch[aria-pressed="false"] .track { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-2); }
.switch[aria-pressed="false"] .track::after { background: var(--ink-2); }

  --s: 1.06; --y: -4px; cursor: grabbing; z-index: 20;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 6px 0 var(--shade), 0 26px 36px rgba(42,24,56,.22);
  transition: box-shadow 160ms var(--ease-out);
}
:where(a, button, .things img) { -webkit-tap-highlight-color: transparent; }
/* below 1000px the board is a tidy grid you press, not a desk you drag on */
@media (max-width: 1000px) {
  .board { height: auto; display: flex; flex-wrap: wrap; gap: 24px; padding: 116px 24px 24px; justify-content: center; align-items: center; }
  .pin { position: static; cursor: pointer; }
  .pin img { height: min(var(--h), 96px); }
  .caption { position: static; flex-basis: 100%; max-width: none; text-align: center; box-shadow: none; }
  .caption:empty { display: none; }
  /* after the first touch the board holds its size and the pins move freely */
  .board.loose { display: block; }
  .board.loose .pin { position: absolute; }
  .board.loose .caption { position: absolute; max-width: min(260px, calc(100% - 32px)); text-align: left; box-shadow: 0 1px 2px rgba(42,24,56,.08), 0 10px 24px rgba(42,24,56,.12); }
}

/* ---------- home: the fidget keychain ---------- */
.home-hero { min-height:100svh; display:grid; grid-template-rows:1fr auto; padding:clamp(72px, 12vh, 140px) var(--pad) 32px; }
.home-hero .hero-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.home-hero h1 { margin:0; display:flex; align-items:flex-start; gap:.05em; font-weight:700; font-size:clamp(52px, 6vw, 88px); letter-spacing:-.04em; line-height:.95; }
.home-hero h1 .star { width:.26em; height:.26em; margin-top:-.04em; }
.home-hero .intro { margin:22px 0 0; font-size:clamp(18px, 1.6vw, 21px); color:var(--ink-2); max-width:34ch; }
.music { justify-self:center; border:0; background:none; font:inherit; font-size:15px; color:var(--muted); padding:12px 8px; min-height:44px; cursor:pointer; }
.music b { color:var(--ink); font-weight:600; }
/* ---------- the keychain ---------- */
.keychain { --u: clamp(66px, 9vw, 112px); position:relative; margin-top:clamp(40px, 7vh, 72px); display:flex; align-items:flex-start; transform:rotate(-4deg); }
.ring { position:relative; width:calc(var(--u) * .62); height:calc(var(--u) * .62); margin-right:calc(var(--u) * -.08); margin-top:calc(var(--u) * 1.02); flex:none; }
.ring svg { width:100%; height:100%; overflow:visible; }
.charms { position:absolute; left:18%; top:72%; display:flex; gap:calc(var(--u) * .04); }
.charm { display:flex; flex-direction:column; align-items:center; text-decoration:none; transform-origin:50% 0; }
.string { width:2px; height:var(--len); background:linear-gradient(#C9CDD3,#9AA1AA); }
.tag-charm { width:calc(var(--u) * .5); height:calc(var(--u) * .5); border-radius:calc(var(--u) * .14); background:rgba(255,255,255,.78); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95), 0 0 0 1px rgba(42,24,56,.08), 0 8px 14px -6px rgba(42,24,56,.28); display:grid; place-items:center; }
.tag-charm svg { width:72%; height:auto; }
.s-fill { fill:#F7C4DA; } .s-outline, .s-face { fill:var(--ink); }

.kc-body { position:relative; padding:0 calc(var(--u) * .1); }
.units { position:relative; z-index:2; display:flex; gap:calc(var(--u) * .06); }
.unit { position:relative; width:var(--u); height:calc(var(--u) * 1.3); display:block; text-decoration:none; }
.cap { position:absolute; z-index:3; left:4%; right:4%; top:0; height:calc(var(--u) * .76); border-radius:calc(var(--u) * .2) calc(var(--u) * .2) calc(var(--u) * .14) calc(var(--u) * .14);
  background:linear-gradient(180deg, var(--cap-s), color-mix(in oklab, var(--cap-s), #000 8%));
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 calc(var(--u) * .05) calc(var(--u) * .08) -2px rgba(42,24,56,.25);
  transition:transform 110ms cubic-bezier(.2,0,0,1), box-shadow 110ms cubic-bezier(.2,0,0,1); }
.cap-top { position:absolute; left:11%; right:11%; top:6%; height:70%; border-radius:calc(var(--u) * .15);
  background:radial-gradient(120% 90% at 50% 20%, color-mix(in oklab, var(--cap), #fff 45%), var(--cap) 62%);
  box-shadow:inset 0 -3px 6px rgba(42,24,56,.06), inset 0 2px 1px rgba(255,255,255,.7);
  display:grid; place-items:center; }
.lg { font-size:clamp(11px, 1.15vw, 15px); font-weight:600; letter-spacing:-.01em; color:color-mix(in oklab, var(--cap-s), #2A1838 70%); }
.housing { position:absolute; z-index:1; left:16%; right:16%; top:calc(var(--u) * .62); height:calc(var(--u) * .46); border-radius:5px;
  background:linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.85) 45%, rgba(255,255,255,.4)); background-color:rgba(230,226,240,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), inset 0 -6px 8px -4px rgba(42,24,56,.12);
  transition:box-shadow 160ms ease-out, background-color 160ms ease-out; }
.kc-base { position:absolute; z-index:4; left:0; right:0; top:calc(var(--u) * .98); height:calc(var(--u) * .34); border-radius:calc(var(--u) * .06) calc(var(--u) * .06) calc(var(--u) * .12) calc(var(--u) * .12);
  background:linear-gradient(180deg, rgba(255,226,240,.9) 0 22%, rgba(247,170,206,.72) 22%, rgba(236,140,188,.8));
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8), 0 calc(var(--u) * .14) calc(var(--u) * .2) -6px rgba(214,51,111,.35); pointer-events:none; }
.kc-loop { position:absolute; z-index:1; left:calc(var(--u) * -.16); top:calc(var(--u) * 1.04); width:calc(var(--u) * .26); height:calc(var(--u) * .2); border:3px solid #B9BFC7; border-right:0; border-radius:40px 0 0 40px; }

/* press: the cap sinks into the switch and its light comes on */
.unit:active .cap, .unit.pressed .cap { transform:translateY(calc(var(--u) * .07)); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 2px 4px -2px rgba(42,24,56,.3); }
.unit:active .housing, .unit.pressed .housing, .lit .housing { background-color:color-mix(in oklab, var(--led), transparent 30%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 0 calc(var(--u) * .3) calc(var(--u) * .04) var(--led); }
.lit .kc-base { box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8), 0 calc(var(--u) * .14) calc(var(--u) * .28) -4px rgba(214,51,111,.5); }

@media (prefers-reduced-motion: no-preference) {
  .charm { animation:sway 3.8s ease-in-out var(--d) infinite; }
  @keyframes sway { 0%,100% { transform:rotate(calc(var(--a) * -.5)); } 50% { transform:rotate(calc(var(--a) * .5)); } }
}
@media (prefers-reduced-motion: reduce) { .cap { transition:none; } }

/* ---------- the 3D stage ---------- */
.stage { position:relative; width:min(100%, 1040px); height:clamp(300px, 44vw, 520px); margin-top:8px; display:grid; place-items:center; }
.stage .keychain { margin-top:0; }
.kc3d { position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; cursor:grab; opacity:0; transition:opacity 400ms ease-out; }
.has-3d .kc3d { opacity:1; }
/* once 3D is ready, the flat keychain stays only as the keyboard and screen reader menu */
.gl .stage .keychain, .has-3d .keychain { --u: 1px; position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width: 760px) { .stage { height:clamp(280px, 86vw, 380px); } .home-hero { min-height:0; padding:104px var(--pad) 24px; } }


/* the name */
.home-hero h1, .home-link { font-family: 'Super Chips', var(--sans); font-weight: 400; letter-spacing: 0; }

/* ---------- leadership photos: step through them yourself ---------- */
.viewer { position: relative; }
.frames { display: grid; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--page); cursor: pointer; }
.frames img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: 1; transition: opacity 220ms ease-out; }
.frames img.off { opacity: 0; pointer-events: none; }
.viewer::after { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .1); pointer-events: none; }
.viewer-btn { position: absolute; z-index: 2; bottom: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.88); color: var(--ink); cursor: pointer; box-shadow: 0 1px 3px rgba(42,24,56,.18);
  transition: transform 150ms ease-out, background-color 150ms ease-out; }
.viewer-btn.v-prev { right: 58px; } .viewer-btn.v-next { right: 14px; }
.viewer-btn::before { content: ""; position: absolute; inset: -4px; }
.viewer-btn:active { transform: scale(.96); }
@media (hover: hover) { .viewer-btn:hover { background: #fff; } }
.viewer-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .frames img { transition-duration: 120ms; } }

/* ---------- experience: work list ---------- */
.jobs { list-style: none; margin: 0; padding: 0; display: grid; }
.jobs > li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 40px; padding: 28px 0; border-top: 1px solid oklch(0 0 0 / .08); }
.jobs > li:last-child { border-bottom: 1px solid oklch(0 0 0 / .08); }
.jobs .when { color: var(--muted); font-size: 15px; padding-top: 4px; font-variant-numeric: tabular-nums; }
.jobs h3 { font-family: var(--serif); font-weight: 400; margin: 0; font-size: 22px; letter-spacing: -.01em; }
.job-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.job-head .org { margin: 2px 0 0; }
.logo { width: 44px; height: 44px; flex: none; border-radius: 12px; object-fit: cover; outline: 1px solid oklch(0 0 0 / .1); outline-offset: -1px; }
.jobs .org { margin: 2px 0 10px; color: var(--ink-2); font-weight: 600; }
.jobs p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 62ch; }
@media (max-width: 760px) { .jobs > li { grid-template-columns: 1fr; } }

/* ---------- motion: sections ease in once as they enter, presses squeeze a little ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] { opacity: 0; transform: translateY(12px); filter: blur(4px); transition: opacity 300ms cubic-bezier(.2,0,0,1), transform 300ms cubic-bezier(.2,0,0,1), filter 300ms cubic-bezier(.2,0,0,1); }
  .js-reveal [data-reveal][data-late] { transition-delay: 80ms; }
  .js-reveal [data-reveal].in { opacity: 1; transform: none; filter: none; }
  .home-hero h1, .home-hero .intro, .home-hero .descriptors, .home-hero .stage { animation: rise 300ms cubic-bezier(.2,0,0,1) both; }
  .home-hero .intro { animation-delay: 100ms; } .home-hero .descriptors { animation-delay: 200ms; } .home-hero .stage { animation-delay: 300ms; }
  .page > .page-title, .page > .lead, .about-intro > * { animation: rise 300ms cubic-bezier(.2,0,0,1) both; }
  .page > .lead, .about-intro > :nth-child(2) { animation-delay: 80ms; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 0; transition: opacity 300ms ease-out; }
  .js-reveal [data-reveal].in { opacity: 1; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
:where(.copy, .switch, .music, .text-link, .links a):not(:disabled):active { transform: scale(.96); }
:where(.copy, .switch, .music) { transition: transform 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out; }
.card .cover, .project .cover { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .card:hover .cover, .project:hover .cover { transform: translateY(-4px); } }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .project, .about, .feature, .case { grid-template-columns: 1fr; }
  .case-menu { position: static; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 16px; }
  .grid2 { grid-template-columns: 1fr; }
  .photo { max-width: 360px; padding: 0 12px; }
  .photo img { transform: rotate(-2deg); }
  .photo .key { right: 0; }
}
@media (max-width: 760px) {
  .top { flex-direction: column; align-items: flex-start; padding-top: 18px; }
  .mini-keys { justify-content: flex-start; }
  .facts { padding: 20px 22px; gap: 16px 24px; }
  .facts div { min-width: calc(50% - 12px); }
  .section { margin-top: 88px; }
  .projects { gap: 72px; }
  .grid2 { gap: 64px; }
  .story section { margin-top: 64px; }
  .next { margin-top: 88px; }
  .page { padding-bottom: 112px; }
  .foot { padding: 88px var(--pad) 72px; }
}
@media (max-width: 380px) {
  .mini-keys { gap: 7px; }
  .key.mini { --u: 58px; padding: 6px 7px; }
  .key.mini .w { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .key, .pin, .switch .track::after { transition: none !important; }
}

/* ---------- smooth moves between pages: content fades, covers glide to their new spot ---------- */
@view-transition { navigation: auto; }
.top { view-transition-name: top; }
::view-transition-group(*) { animation-duration: 200ms; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 150ms ease-out both; }
  ::view-transition-new(root) { animation: vt-in 200ms cubic-bezier(.2, 0, 0, 1) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0s; }
}

/* ---------- positioning ---------- */
.home-hero .intro { margin-top:24px; max-width:36ch; font-size:clamp(20px, 2vw, 25px); line-height:1.4; color:var(--ink-2); text-wrap:balance; }
.descriptors { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 24px; margin:18px 0 0; padding:0; color:var(--muted); font-size:15px; font-weight:600; }
.grid2 > .card.wide { grid-column:1 / -1; }
.card.wide .cover { aspect-ratio:16 / 8; }
.builds { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px; margin-top:12px; }
.builds h3 { font-family: var(--serif); font-weight: 400; margin:0 0 8px; font-size:22px; letter-spacing: -.01em; }
.builds p { margin:0; color:var(--ink-2); font-size:17px; max-width:34ch; }
.build-links { display:flex; flex-direction:column; align-items:flex-start; margin-top:10px !important; }
.build-links a { color:var(--link); font-weight:600; padding:6px 0; }
.work-group { margin-top:96px; }
.work-group:first-of-type { margin-top:72px; }
.stack { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 24px; color:var(--ink-2); }
.about-pins { margin-top:96px; }
@media (max-width: 1000px) { .builds { grid-template-columns:1fr; gap:36px; } }
@media (max-width: 760px) { .card.wide .cover { aspect-ratio:16 / 10; } }
.home-hero ~ .page.section { padding-bottom:0; }
.home-hero ~ .page.section:last-of-type { padding-bottom:160px; }
@media (max-width: 760px) { .home-hero ~ .page.section:last-of-type { padding-bottom:112px; } }
.story ul.stack { display:flex; flex-wrap:wrap; gap:8px 24px; padding-left:0; list-style:none; }

/* ---------- showcase: real screenshots, framed ---------- */
.shows { display: grid; gap: clamp(72px, 9vw, 128px); margin-top: 40px; }
.show { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; text-decoration: none; color: inherit; }
.show[data-flip] .mock { order: 2; }
.show-text h3 { font-family: var(--serif); font-weight: 400; margin: 0; font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -.01em; line-height: 1; }
.show-line { margin: 16px 0 14px; font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 30ch; text-wrap: pretty; }
.show-tools { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.show .text-link { margin-top: 18px; }

.mock { --tone: var(--pink); position: relative; aspect-ratio: 16 / 11; border-radius: 28px; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: color-mix(in oklch, var(--tone) 38%, var(--page)); }
.mock.pink { --tone: var(--pink); } .mock.lilac { --tone: var(--t-lilac); }
.mock::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 110%, color-mix(in oklch, var(--tone) 70%, transparent), transparent 70%); }
.mock-window { box-shadow: 0 1px 2px oklch(0.25 0.05 310 / .08), 0 12px 24px -8px oklch(0.25 0.05 310 / .18), 0 40px 60px -24px oklch(0.25 0.05 310 / .22); }
.mock-window { width: 84%; border-radius: 14px; background: var(--paper); overflow: hidden; transform: rotate(-1.5deg); }
.show[data-flip] .mock-window { transform: rotate(1.5deg); }
.mock-bar { display: flex; gap: 6px; padding: 10px 12px; background: oklch(0.97 0.005 300); border-bottom: 1px solid oklch(0 0 0 / .06); }
.mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: oklch(0 0 0 / .12); }
.mock-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.mock-screen img, .mock-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mock-screen video[aria-hidden] { opacity: 0; transition: opacity 200ms cubic-bezier(.2, 0, 0, 1); }
.mock-window.playing video[aria-hidden] { opacity: 1; }
.mock-window { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .show:hover .mock-window { transform: translateY(-8px) rotate(0deg); }
  .show:hover .text-link { text-decoration-color: currentColor; }
}
.story .mock { margin-top: 28px; }
.story .mock-window { transform: none; }
.story .mock-screen video { object-fit: contain; background: var(--ink); }

/* ---------- home: experience with a photo, a little about me ---------- */
.hl { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hl-photo { display: grid; gap: 12px; text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 600; }
.hl-photo img { width: 100%; height: auto; border-radius: 22px; transform: rotate(1.5deg); outline: 1px solid oklch(0 0 0 / .1); outline-offset: -1px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .hl-photo:hover img { transform: rotate(0deg) translateY(-4px); } }
.hello { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.hello .lead { max-width: 46ch; }
.hello .photo img { max-width: 360px; }
@media (max-width: 900px) {
  .show, .hl, .hello { grid-template-columns: 1fr; }
  .show[data-flip] .mock { order: 0; }
  .hl-photo { max-width: 640px; }
  .hello .photo img { max-width: 280px; }
}
@media (max-width: 520px) { .mock { aspect-ratio: 4 / 3.4; border-radius: 22px; } .mock-window { width: 90%; } }
.show[data-flip] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 900px) { .show[data-flip] { grid-template-columns: 1fr; } }
/* home experience: a short peek, one line per role */
.peek { list-style: none; margin: 0; padding: 0; display: grid; }
.peek li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid oklch(0 0 0 / .08); }
.peek li:last-child { border-bottom: 1px solid oklch(0 0 0 / .08); }
.peek h3 { font-family: var(--serif); font-weight: 400; margin: 0; font-size: 18px; letter-spacing: -.01em; line-height: 1.25; }
.peek p { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }
.peek .when { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl { align-items: center; }
@media (max-width: 520px) { .peek li { grid-template-columns: 40px minmax(0, 1fr); } .peek .logo { width: 40px; height: 40px; } .peek .when { grid-column: 2; margin-top: -10px; } }
.job-head .meta { white-space: normal; min-width: 0; }
.feature .job-head .logo { width: 44px; height: 44px; aspect-ratio: 1; border-radius: 12px; }
.show .cover { border-radius: 28px; }
.show[data-flip] .cover { order: 2; }
@media (max-width: 900px) { .show[data-flip] .cover { order: 0; } }

/* ---------- home toggles: music and play mode ---------- */
.toggles { justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }

/* ---------- a little about me: a medium landscape photo ---------- */
.hello .photo img { width: 100%; max-width: 440px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; }
@media (max-width: 900px) { .hello .photo img { max-width: 360px; } }

/* ---------- feeling native on phones ---------- */
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], .unit, .charm { touch-action: manipulation; }
button, .key, .unit, .charm, .viewer-btn { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.frames { touch-action: pan-y; }

/* ---------- her own lowercase voice on the about page ---------- */
.lower { text-transform: none; }
.page-title.lower { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -.01em; text-wrap: balance; }
.known { max-width: 760px; margin: 112px 0 0; }
.known-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.known-list li { font-size: 18px; line-height: 1.55; color: var(--ink-2); padding-left: 20px; position: relative; text-wrap: pretty; }
.known-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--link); opacity: .5; }
.known-list b { color: var(--ink); font-weight: 700; }
.lower-note { margin: 28px 0 0; font-size: 18px; color: var(--muted); }

/* home peek heading */
.me-h { font-family: var(--serif); font-weight: 400; margin: 0 0 14px; font-size: clamp(38px, 4.6vw, 60px); letter-spacing: -.01em; line-height: 1; }

/* first screen: name, keyboard and toggles all fit */
@media (min-width: 761px) {
  .home-hero { height:100svh; min-height:600px; grid-template-rows:minmax(0, 1fr) auto; padding-top:clamp(48px, 8vh, 96px); padding-bottom:12px; }
  .home-hero .hero-inner { min-height:0; }
  .home-hero .stage { flex:1 1 0; height:auto; min-height:240px; max-height:520px; }
}