:root {
  --bg: #f4f1ea;
  --ink: #1d1b18;
  --muted: #6f6a61;
  --faint: #a7a197;
  --line: #ddd7cb;
  --chip-bg: #ebe6dc;
  --accent: #94764f; /* beige */
  --accent-ink: #ffffff;
  --font-display: "Instrument Serif", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161513;
    --ink: #ece8e1;
    --muted: #a29c92;
    --faint: #6b665e;
    --line: #2e2b27;
    --chip-bg: #24221f;
  }
}
:root[data-theme="dark"] {
  --bg: #161513; --ink: #ece8e1; --muted: #a29c92; --faint: #6b665e; --line: #2e2b27; --chip-bg: #24221f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.75 "Inter", system-ui, sans-serif;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}
/* subtle paper grain */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .35; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 680px);
  gap: 112px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 128px 24px 96px;
}

/* sidebar */
.sidebar {
  position: sticky; top: 128px; align-self: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.nav-link {
  color: var(--muted); text-decoration: none;
  padding: 2px 8px; border-radius: 8px; margin-left: -8px;
  transition: background .2s, color .2s;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.socials { display: flex; gap: 6px; margin-top: 28px; margin-left: -6px; font-size: 12px; }
.socials a { color: var(--faint); text-decoration: none; }
.socials a:hover { color: var(--ink); }
/* old Finder desktop icons: a one-bit 32px icon with its name underneath.
   Your own icons from assets/icons/ replace the generic ones (document, folder, card); brand logos are never redrawn. */
.mac-icon { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 50px; color: var(--muted); }
.mac-icon svg, .mac-icon img { display: block; }
.mac-icon svg { image-rendering: pixelated; }
.mac-icon img { width: 32px; height: 32px; object-fit: contain; }
.mac-icon svg, .mac-icon img {
  filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, .28));
  transition: transform .08s, filter .08s;
}
/* your icon images in black and white, with a hint of warmth so they sit on the cream */
.mac-icon img { filter: grayscale(1) sepia(.12) contrast(1.05) drop-shadow(0 1.5px 1px rgba(0, 0, 0, .28)); }
.mac-icon .ic-paper { fill: color-mix(in srgb, var(--bg) 40%, #fff); stroke: var(--ink); stroke-width: 1; }
.mac-icon .ic-line { fill: none; stroke: var(--ink); stroke-width: 1; }
.mac-icon .ic-ink { fill: var(--ink); }
.mac-icon span { padding: 0 3px; line-height: 15px; }
/* hover presses the icon in, like "say hi": it drops a pixel, darkens and loses its shadow */
.mac-icon:hover svg, .mac-icon:hover img {
  transform: translateY(1px) scale(.96);
  filter: brightness(.82) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
.mac-icon:hover img { filter: grayscale(1) sepia(.12) contrast(1.05) brightness(.82); }
.mac-icon:active svg { filter: brightness(.68); }
.mac-icon:active img { filter: grayscale(1) sepia(.12) contrast(1.05) brightness(.68); }

/* main */
main section { margin-bottom: 64px; }
.hero { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
/* selfie: on desktop an upright photo tops the sidebar, above the nav;
   on phones (where the sidebar becomes a top bar) a small square sits at the end of the name row.
   Both read assets/selfie.jpg; nothing shows until the file exists. */
.side-photo {
  display: block; width: 164px; aspect-ratio: 3 / 4; object-fit: cover;
  margin-left: -8px; /* flush with the nav highlight boxes, and as wide as the icon row */
  border-radius: 6px; margin-bottom: 24px; opacity: 0; transition: opacity .4s;
}
.side-photo.loaded, .selfie.loaded { opacity: 1; }
.selfie { display: none; }
/* short laptop screens: shrink it so the sticky sidebar still fits, socials included */
@media (max-height: 680px) { .side-photo { width: 84px; margin-bottom: 16px; } }
@media (max-width: 760px) {
  .side-photo { display: none; }
  .selfie {
    display: block; width: 25%; max-width: 120px; aspect-ratio: 1; margin-left: auto;
    object-fit: cover; object-position: 50% 38%; border-radius: 8px; opacity: 0; transition: opacity .4s;
  }
}
h1 { font: 400 44px/48px var(--font-display); margin: 0; letter-spacing: -.01em; }
h2 { font-size: 14px; font-weight: 500; color: var(--faint); margin: 0 0 12px; letter-spacing: .01em; }
p { margin: 0 0 12px; color: var(--muted); }
/* the one-line claim at the top: same size, darker, so it reads first */
p.lead { color: var(--ink); }
/* above-the-fold call to action */
.cta { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
/* same pill as the active sidebar link */
.cta-main {
  display: inline-block; padding: 4px 12px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: background .2s, box-shadow .2s;
}
.cta-main:hover {
  background: color-mix(in srgb, var(--accent) 85%, #000);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 50%, transparent);
}
.cta .link { color: var(--muted); }
.cta .link:hover { color: var(--ink); }
/* keep reading lines short, like arsen.wtf (~525px) */
p.lede, .work-note { max-width: 33rem; }
p.lede { margin-bottom: 18px; }
.placeholder { font-style: italic; color: var(--faint); }

.link {
  color: var(--ink);
  text-decoration: none;
  /* underline drawn as a 1px accent line that grows left to right on hover,
     and slides out to the right when the pointer leaves */
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
  padding-bottom: 1px;
  transition: background-size .35s cubic-bezier(.4, 0, .2, 1);
}
.link:hover, .link:focus-visible {
  background-position: 0 100%;
  background-size: 100% 1px;
}

/* text selection: a solid block in the current accent, deepened slightly so white text stays readable */
::selection { background-color: color-mix(in srgb, var(--accent) 76%, #000); color: #fff; }
/* brand names: just ink-coloured emphasis */
.chip { white-space: nowrap; color: var(--ink); }

.chip-logo { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; vertical-align: -3px; margin-right: 5px; box-shadow: 0 0 0 1px var(--line); }

/* rows */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li {
  display: grid; grid-template-columns: 170px 1fr auto; gap: 16px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px dashed var(--line);
}
.row-main { color: var(--ink); }
.row-sub { color: var(--muted); font-size: 14px; }
.row-year { color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* company names link to their x accounts; a small arrow shows on hover */
.row-x { color: var(--ink); text-decoration: none; }
.row-x::after { content: " ↗"; color: var(--faint); font-size: 12px; opacity: 0; transition: opacity .15s; }
.row-x:hover { color: var(--accent); }
.row-x:hover::after { opacity: 1; }
.row-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* expandable row (zerion): same columns as a normal row, opens in place */
.rows > li.row-expand { display: block; padding: 0; position: relative; }
/* the name link floats over the toggle's (invisible) name, so the name goes to x and the rest of the row opens */
.row-x-over { position: absolute; top: 7px; left: 0; z-index: 1; }
.row-main-ghost { visibility: hidden; }
.row-toggle {
  display: grid; grid-template-columns: 170px 1fr auto 14px; gap: 16px; align-items: baseline;
  width: 100%; padding: 7px 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; letter-spacing: inherit;
}
.row-toggle:hover .row-sub { color: var(--ink); }
.row-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.row-chev { width: 7px; height: 7px; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: translateY(-2px) rotate(45deg); transition: transform .25s; justify-self: end; }
.row-toggle[aria-expanded="true"] .row-chev { transform: translateY(1px) rotate(-135deg); }
.row-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.3, .7, .3, 1); }
.row-panel.open { grid-template-rows: 1fr; }
.row-panel-inner { overflow: hidden; min-height: 0; }
.row-panel.open .row-panel-inner { padding-bottom: 14px; }
.steps { list-style: none; margin: 4px 0 14px 186px; padding: 0; font-size: 14px; color: var(--muted); }
.steps li { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.row-desc { margin: 4px 0 0 186px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 30rem; }

/* launches carousel inside the row */
.carousel { margin-left: 186px; }
.carousel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
  font-size: 13px; color: var(--faint); }
.carousel-nav { display: flex; gap: 4px; }
.carousel-nav button {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: none;
  color: var(--ink); cursor: pointer; font: 13px "Inter", sans-serif; transition: border-color .2s, opacity .2s;
}
.carousel-nav button:hover { border-color: var(--accent); }
.carousel-nav button:disabled { opacity: .3; cursor: default; border-color: var(--line); }
.carousel-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: 2px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.launch {
  flex: 0 0 200px; scroll-snap-align: start; display: flex; flex-direction: column;
  padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 45%, #fff);
  position: relative; overflow: hidden; isolation: isolate;
}
/* chain logo (from the zerion api), oversized and cut off by the card's bottom-right corner */
.launch-mark {
  position: absolute; right: -20px; bottom: -20px; z-index: -1;
  width: 80px; height: 80px; border-radius: 50%;
  transform: rotate(-12deg); pointer-events: none; user-select: none;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.launch:hover .launch-mark { transform: rotate(-4deg) scale(1.06); }
.launch:has(.launch-mark) p { margin-bottom: 40px; } /* keep copy clear of the logo */
.launch h3 { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--ink); }
.launch p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; max-width: none; flex: 1; }
.launch .row-year { text-align: left; }
/* the whole card opens its tweet: the heading link stretches over the card */
.launch { transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s; }
.launch:has(.launch-link):hover { transform: translateX(5px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.launch-link { color: inherit; text-decoration: none; }
.launch-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.launch-link:focus-visible { outline: none; }
.launch:has(.launch-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.launch h3 .launch-link::before { content: "↗"; float: right; color: var(--faint); font-size: 12px; opacity: 0; transition: opacity .2s; }
.launch:hover h3 .launch-link::before { opacity: 1; }
.launch-alt { position: relative; z-index: 2; color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.launch-alt:hover { color: var(--accent); text-decoration-color: currentColor; }
.launch-video { object-fit: cover; background: #1f3f8f; }
@media (prefers-reduced-motion: reduce) { .launch { transition: none; } .launch:has(.launch-link):hover { transform: none; } }
@media (max-width: 760px) {
  .row-toggle { grid-template-columns: 1fr auto 14px; }
  .row-toggle .row-sub { grid-column: 1 / -1; grid-row: 2; }
  .steps, .carousel, .row-desc { margin-left: 0; }
  .launch { flex-basis: 170px; }
}
@media (prefers-reduced-motion: reduce) { .row-panel, .row-chev { transition: none; } .carousel-track { scroll-behavior: auto; } }

footer { color: var(--faint); font-size: 13px; }
.work-note { margin-top: 16px; font-size: 14px; }

/* pin board: quiet polaroids on faint dots, in the page's own palette */
/* a masonry grid: short rows that each pin spans enough of (set in pins.js), so photos can take two columns */
.pins {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows: 2px; grid-auto-flow: row dense; column-gap: 18px;
  padding: 18px 4px 0;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 1.2px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.pin {
  position: relative; margin: 0; align-self: start;
  padding: 6px 6px 0; background: color-mix(in srgb, var(--bg) 45%, #fff);
  border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
  transform: rotate(calc(var(--tilt, 0deg) * .45));
  transition: transform .35s cubic-bezier(.3, .7, .3, 1), box-shadow .35s;
}
/* photos are the stars of the board: twice the width of a quote */
.pin-photo { grid-column: span 2; }
.pin:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 24px rgba(0, 0, 0, .07); }
/* a small ink pin */
.pin::before {
  content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.pin-img img { display: block; width: 100%; height: auto; border-radius: 1px; }
.pin figcaption {
  padding: 6px 2px 8px; min-height: 1.1em;
  font: 400 14px/1.2 var(--font-display); color: var(--muted);
}
.pin-quote { padding: 12px 11px 0; }
.pin-orig { margin: 0 0 6px; font-size: 11px; line-height: 1.4; font-style: italic; color: var(--faint); max-width: none; }
.pin-quote blockquote { margin: 0; font: 400 17px/1.25 var(--font-display); color: var(--ink); }
.pin-quote figcaption { font: 11px "Inter", sans-serif; color: var(--faint); padding: 8px 0 10px; }
.pin-note { padding: 11px; }
.pin-note p { margin: 0; color: var(--ink); font: 400 16px/1.25 var(--font-display); }
/* tweet: name and handle, the words, then the date; the card is the link */
a.pin { display: block; color: inherit; text-decoration: none; }
.pin-tweet:not(:has(.pin-missing)) { padding: 11px 11px 0; }
.pin-tweet-head { margin: 0 0 6px; font-size: 11px; line-height: 1.3; color: var(--faint); max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-tweet-head b { font-weight: 500; color: var(--ink); }
.pin-tweet-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); max-width: none; white-space: pre-line; overflow-wrap: anywhere; }
.pin-tweet figcaption { font: 11px "Inter", sans-serif; color: var(--faint); padding: 8px 0 10px; min-height: 0; }
a.pin-tweet:hover figcaption { color: var(--accent); }
.pin-missing {
  display: grid; place-items: center; aspect-ratio: var(--ratio, 1); padding: 8px; text-align: center;
  border: 1px dashed var(--line); color: var(--faint); font-size: 11px; line-height: 1.4;
}
.pin-missing code { font-size: 10px; word-break: break-all; }
/* wide screens: let the board spill into the empty space right of the text column */
@media (min-width: 1180px) {
  .pins { margin-right: max(calc((1000px - 100vw) / 2 + 40px), -260px); }
}
@media (max-width: 760px) {
  .pins { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .pin-quote blockquote { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pin { transition: none; } }


/* pixel cat */
.pet {
  position: fixed; left: 0; top: 0; z-index: 20;
  pointer-events: none; will-change: transform;
}
.pet svg { display: block; overflow: visible; }
/* grab and throw: the pet ignores the pointer, so the cursor is set on the page while over it */
html.pet-grab, html.pet-grab * { cursor: grab !important; }
html.pet-grabbing, html.pet-grabbing * { cursor: grabbing !important; user-select: none; }
.pet.pet-docked, .pet.pet-loose { pointer-events: auto; touch-action: none; }
.pet .pet-eyes { transition: transform .08s; transform-origin: 30px 19px; }
.pet svg.blink .pet-eyes { transform: scaleY(.1); }
/* idle tail: the cat sways slowly, the dog wags */
.pet svg[data-pose="sit"] .pet-tail { animation: pet-sway 2.4s ease-in-out infinite; }
.pet svg[data-kind="dog"][data-pose="sit"] .pet-tail { animation: pet-wag 1.1s ease-in-out infinite; }

@keyframes pet-sway { 50% { transform: rotate(-9deg); } }
@keyframes pet-wag { 50% { transform: rotate(-16deg); } }
@media (prefers-reduced-motion: reduce) { .pet .pet-tail { animation: none !important; } }
.pet-bubble {
  position: absolute; z-index: 21; pointer-events: none;
  font: 500 12px/1 "Inter", sans-serif; transform: translate(-50%, 0);
  animation: pet-float 1.4s ease-out forwards;
}
.pet-bubble { position: fixed; }
.pet-z { color: var(--muted); }
.pet-heart { color: var(--accent); font-size: 15px; animation-duration: .9s; }
@keyframes pet-float {
  from { opacity: 0; transform: translate(-30%, 0); }
  20% { opacity: 1; }
  to { opacity: 0; transform: translate(10%, -26px); }
}
/* cat ◯— dog switch */
.pet-switch {
  position: fixed; left: 16px; bottom: 14px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); border: 0; padding: 5px 8px; cursor: pointer;
  border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 13px "Inter", sans-serif;
}
.pet-switch-label { color: var(--faint); transition: color .2s; }
.pet-switch[aria-checked="false"] .pet-switch-label:first-child,
.pet-switch[aria-checked="true"] .pet-switch-label:last-child { color: var(--ink); }
.pet-switch-track {
  position: relative; width: 30px; height: 17px; border-radius: 999px;
  background: var(--line); transition: background .2s;
}
.pet-switch[aria-checked="true"] .pet-switch-track { background: var(--accent); }
.pet-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .22s cubic-bezier(.3, .7, .3, 1);
}
.pet-switch[aria-checked="true"] .pet-switch-knob { transform: translateX(13px); }
.pet-switch:hover .pet-switch-label { color: var(--muted); }
.pet-switch:hover[aria-checked="false"] .pet-switch-label:first-child,
.pet-switch:hover[aria-checked="true"] .pet-switch-label:last-child { color: var(--ink); }
/* docked (phones): the pet sits at the right end of the pill */
.pet.pet-docked { top: auto; bottom: 13px; }
.pet-switch.pet-docked { padding-right: 46px; }
.pet-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }


/* mobile */
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; gap: 0; padding: 0 16px 96px; }
  .sidebar {
    position: sticky; top: 0; z-index: 2; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    gap: 4px; padding: 12px 0; margin-bottom: 40px; background: var(--bg);
    border-bottom: 1px solid var(--line); scrollbar-width: none;
  }
  .nav-link { margin-left: 0; white-space: nowrap; }
  .socials { display: none; }
  .rows > li { grid-template-columns: 1fr auto; }
  .row-sub { grid-column: 1 / -1; grid-row: 2; }
  h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}