/* Components for ligier.design. Every value comes from tokens.css.
   Layout sizes are rem so they scale with the window (see base.css); anything that
   holds text (text boxes, chips, pills, the Sprout panel) is px so it stays at the Figma size.
   Sections: page shell · nav · hero · work · project card · chip · Sprout panel */

/* ── Page shell ──────────────────────────────────────────────── */
.page { transition: margin-right var(--dur-base) var(--ease); }
.wrap { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-gutter); }

/* ── Nav ─────────────────────────────────────────────────────── */
/* Sticky: stays at the top while the page scrolls under it */
.nav { position: sticky; top: 0; z-index: 20; height: var(--nav-height); background: var(--color-bg); border-bottom: var(--rule) solid var(--color-border-soft); }
.nav-inner {
  max-width: var(--page-max); height: 100%; margin: 0 auto; padding: 0 71px 0 36px; /* fixed — the header never grows */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.nav-logo { font: var(--weight-regular) var(--text-body)/var(--text-body-lh) var(--font-sans); color: var(--color-text); justify-self: start; }
.nav-links { display: flex; gap: 2.5rem; font: var(--weight-regular) var(--text-body)/var(--text-body-lh) var(--font-sans); }
.nav-links a[aria-current="page"] { font-weight: var(--weight-medium); }   /* only the current page is heavier */
.nav-links a { position: relative; color: var(--color-text-subtle); transition: color var(--dur-fast); }
.nav-links a:focus-visible, .nav-links a[aria-current="page"] { color: var(--color-text-strong); }
@media (hover: hover) { .nav-links a:hover { color: var(--color-text-strong); } }
/* Hover language: the green dot (same as the cursor and the case study nav) pops in beside a text link.
   It sits outside the text, so nothing shifts; the current page keeps its dot. */
.nav-links a::before, .contact a::before {
  content: ""; position: absolute; left: -14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--color-accent); opacity: 0; transform: scale(.4); pointer-events: none;
}
/* the dot pops in on hover; the current-page dot moves instantly (Work → Design Process) */
.contact a::before { transition: opacity .25s var(--ease), transform .25s var(--ease); }
.nav-links a:is(:focus-visible, [aria-current="page"])::before, .contact a:focus-visible::before { opacity: 1; transform: none; }
@media (hover: hover) {   /* mouse only: on phones a hover effect makes iOS Safari treat the first tap as a hover (double tap to open) */
  .nav-links a:hover::before { transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .nav-links a:hover::before, .contact a:hover::before { opacity: 1; transform: none; }
}
.nav-sprout { position: relative; justify-self: end; align-self: end; width: 129px; height: 49px; } /* sits on the header line */
.nav-sprout img, .nav-sprout-cv { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* "Ask Sprout" bubble under the gif, tail pointing up at Sprout */
.sprout-bubble {
  position: absolute; top: calc(100% + 0.75rem); right: 0; z-index: 30;
  padding: 8px 14px; background: var(--color-bg); border: var(--rule) solid var(--color-border);
  font: var(--weight-regular) var(--text-small)/1.3 var(--font-mono); color: var(--color-text); white-space: nowrap;
  opacity: 0; transform: translateY(-0.25rem); pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.sprout-bubble::before { /* tail */
  content: ""; position: absolute; bottom: 100%; right: 6.25rem; /* over Sprout's head */
  width: 10px; height: 10px; background: var(--color-bg);
  border-left: var(--rule) solid var(--color-border); border-top: var(--rule) solid var(--color-border);
  transform: translateY(50%) rotate(45deg);
}
.nav-sprout:hover .sprout-bubble, .nav-sprout:focus-visible .sprout-bubble { opacity: 1; transform: none; }
.sprout-bubble { display: none; }   /* replaced by the mint cursor tag (.sprout-pill, site.js); delete this line to bring it back */
.panel-open .sprout-bubble { opacity: 0 !important; }

/* ── Hero ────────────────────────────────────────────────────── */
/* Headline stretches to fill the row, up to a cap that keeps it to two lines.
   The gap to the jobs never changes (100px at 1280, scaling with the layout);
   past the cap (above ~1660px wide) any extra space sits to the right of the jobs. */
.hero {
  display: grid; grid-template-columns: minmax(0, var(--hero-line-max)) auto;
  justify-content: start; align-items: center; column-gap: var(--hero-gap);
  padding-top: var(--section-hero-top); padding-bottom: var(--section-band);
}
.display {
  font: var(--weight-regular) var(--text-display)/var(--text-display-lh) var(--font-serif);
  letter-spacing: var(--text-display-tr); color: var(--color-text);
}
.hero-line { text-wrap: pretty; transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease); } /* min-height is set by home.js to the tallest headline */
.hero-line.is-swapping { opacity: 0; transform: translateY(6px); }

.tabs { display: flex; flex-wrap: wrap; gap: 25px; margin-top: var(--hero-tabs-gap); }
.tab {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start;
  font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-text-subtle); transition: color var(--dur-fast);
}
/* Reserve the bold width so tabs don't shift when one becomes active */
.tab::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: var(--weight-bold); }
@media (hover: hover) { .tab:hover { color: var(--color-text); } }
.tab[aria-selected="true"] { color: var(--color-text); font-weight: var(--weight-bold); }
/* Timer bar: fills under the active tab while the headlines rotate */
.tab-bar {
  position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left center; visibility: hidden;
}
.tabs.is-auto .tab[aria-selected="true"] .tab-bar {
  visibility: visible; animation: tab-timer var(--tab-interval, 5s) linear forwards;
}
.tabs.is-held .tab-bar { animation-play-state: paused !important; }
@keyframes tab-timer { to { transform: scaleX(1); } }

.jobs { display: grid; row-gap: 12px; }
/* Each row is a link to that company's project card; titles line up in one column */
.job { display: grid; grid-template-columns: 147px auto; font-size: var(--text-body); line-height: var(--text-body-lh); white-space: nowrap; }
.job-co { color: var(--color-text-strong); }
.job-title { color: var(--color-text-subtle); }

/* Resume / LinkedIn / Email under the jobs */
.contact { display: flex; flex-wrap: wrap; gap: 8px 38px; margin-top: var(--hero-contact-gap); font: var(--weight-regular) var(--text-small)/var(--text-body-lh) var(--font-mono); }
.contact a { position: relative; color: var(--color-text-subtle); transition: color var(--dur-fast); }
.contact a:hover, .contact a:focus-visible { color: var(--color-text); }

/* Desktop: the hero fills the first screen minus a peek of the process band,
   sitting a little above center. The job list is centered on the headline block. */
@media (min-width: 1101px) {
  .hero {
    min-height: calc(100svh - var(--nav-height) - var(--hero-peek)); align-content: center;
    padding-top: var(--space-xl); padding-bottom: var(--section-band);
  }
}

/* ── Work ────────────────────────────────────────────────────── */
.work { padding-top: var(--section-band); padding-bottom: var(--section-end); }
/* nav "Work" link (v2.html#work): land with the heading 40px under the sticky header.
   html already pads scrolling by nav + 24px (base.css), so only the rest is added here. */
.work { scroll-margin-top: calc(16px - var(--section-band)); }
/* big headline switched off (V2_WORK.show.headline): a quiet label starts the section instead */
.work-label { font: var(--weight-regular) var(--text-caption)/20px var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: var(--color-text-muted); }
.work.is-labelled .era-grid.is-flat { margin-top: 24px; }
/* work straight after the hero (V2_HOME.order): the hero's bottom padding is the gap, and the process band follows closer */
main[data-order^="hero work"] .work { padding-top: 0; padding-bottom: var(--section-band); scroll-margin-top: 16px; }
main[data-order^="hero work"] { --hero-peek: 220px; }   /* on load, show the tops of the first two projects under the hero */
/* V2_HOME.heroFill 'half': the hero fills the first screen except for the top half of the first row
   (that row's boxes are 30.75rem tall, so the peek is half of that; the hero's 80px bottom padding sits inside it) */
main.is-hero-half { --hero-peek: calc(30.75rem / 2); }
/* V2_HOME.heroFill false: the hero is as tall as its content, so the first row of work shows on the first screen */
@media (min-width: 1101px) {
  main.is-hero-fit .hero { min-height: 0; padding-top: var(--section-hero-top); padding-bottom: 64px; }
}
/* work rows (year rows off): Playground pattern — two cards a row, alternating wide/narrow, 16px gutter */
.work.is-bare .work-head { display: none; }
.work-rows { display: grid; row-gap: 64px; }
.work.is-bare .work-rows { margin-top: 0; }
.work-row { display: flex; align-items: flex-start; gap: 16px; }
.work-row > .project { flex: var(--w) 1 0; min-width: 0; gap: 16px; }
.work-row .card-media { aspect-ratio: auto; height: var(--h); }
.work-row .project-line { margin-top: -6px; }   /* 10px under the title (the card gap is 16px) */
.work-row .project-text .project-line { margin-top: 0; }
/* thumbnails drawn for 4:3: in the shorter rows keep the ScholarRx laptop whole (fit inside the box, centered) */
.work-row .card-media .anki-stage { position: absolute; top: 50%; left: 50%; width: min(100%, var(--h) * 4 / 3); aspect-ratio: 4 / 3; transform: translate(-50%, -50%); }
/* iFIT: its art is a stretched 4:3 drawing, so in a non-4:3 box the dark app panel showed a black block.
   Keep the art 4:3 with breathing room; its own gradient moves to the box so the whole card stays that color. */
.work-row .card-media:has(.thumb-ifit) { background: linear-gradient(150deg, #C8EAE3 0%, #D2E6F8 100%); }
.work-row .card-media .thumb-ifit { inset: auto; top: 50%; left: 50%; width: min(84%, var(--h) * .84 * 4 / 3); aspect-ratio: 4 / 3; transform: translate(-50%, -50%); background: none; }
/* IPSY, ChompShop, Woosh: their 4:3 SVGs letterbox inside non-4:3 boxes, so the corner pieces floated in.
   Cover fills the box (trimming the edges a little) so they bleed off the corners again; base + hover crop the same. */
.work-row .card-media :is(.thumb-cs-bg, .thumb-cs-hov, .thumb-is-bg, .thumb-is-hov, .thumb-wb-bg, .thumb-wb-hov) { object-fit: cover; }
/* the "More on Playground" filler card */
.card-media.more-card { display: grid; align-content: end; gap: 6px; padding: 28px; background: var(--color-bg-subtle); cursor: pointer; transition: background-color .25s var(--ease); }
.card-media.more-card:hover, .card-media.more-card:focus-visible { background: var(--color-accent-tint); }
.more-title { display: block; font: var(--weight-regular) 22px/28px var(--font-serif); color: var(--color-text); }
.more-text { display: block; font: var(--weight-regular) var(--text-caption)/20px var(--font-mono); text-transform: uppercase; color: var(--color-text-muted); }

/* ── Footer (temporary) ── */
.site-footer { border-top: var(--rule) solid var(--color-border-soft); }
main[data-order$="process"] + .site-footer { border-top: 0; }          /* the dark process band already closes the page */
.site-footer-inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 48px; padding-top: 72px; padding-bottom: 48px; }
.site-footer-line { font: var(--weight-regular) var(--text-display)/1.15 var(--font-serif); letter-spacing: -1px; color: var(--color-text); }
.site-footer-links { justify-self: end; margin-top: 0; }
.site-footer-signoff { grid-column: 1 / -1; font: var(--weight-regular) var(--text-caption)/20px var(--font-mono); color: var(--color-text-muted); }
.work-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3xl); }
.work-head .display { max-width: 619px; }
.work-sub { max-width: 469px; text-align: right; font-weight: var(--weight-medium); color: var(--color-text-subtle); }
.era { margin-top: var(--section-era); }
.eras > .era:first-child { margin-top: var(--section-era-first); }
.era-head { display: flex; align-items: center; gap: var(--space-md); font: var(--weight-regular) var(--text-body)/var(--text-body-lh) var(--font-mono); color: var(--color-text-subtle); text-transform: uppercase; }
.era-head::before { content: ""; order: 1; flex: 1; height: var(--rule); background: var(--color-border-soft); }
.era-tagline { order: 2; text-align: right; }
.era-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--card-gap); row-gap: var(--space-2xl); margin-top: var(--section-era-head); }

/* ── Project card ────────────────────────────────────────────── */
.project { display: grid; gap: var(--card-title-gap); align-content: start; }
.card-media {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--color-bg-subtle); border-radius: var(--radius-none);
}
.project-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-lg); }
.project-title { max-width: 420px; font-weight: var(--weight-regular); color: var(--color-text); }
.project-status { font: var(--weight-medium) var(--text-body)/1.3 var(--font-mono); color: var(--color-text-subtle); white-space: nowrap; }
/* Tiempos titles + one quiet meta line ("IPSY | Product Designer | 2025") */
.project-title.is-serif { max-width: none; font: var(--weight-regular) 22px/28px var(--font-serif); letter-spacing: -.2px; text-wrap: balance; }
.project-line { margin-top: 0; font: var(--weight-regular) var(--text-caption)/20px var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: var(--color-text-muted); }
/* eras switched off: one continuous grid, spaced like the first era */
.era-grid.is-flat { margin-top: var(--section-era-first); }
.chips { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: calc(var(--card-chips-gap) - var(--card-title-gap)); }

/* Thumbnails were drawn for smaller cards; these sizes match the Figma card. */
.card-media .thumb-ipsy-ai .band { height: 3rem; }
.card-media .thumb-ipsy-ai .band-track { gap: 3rem; padding: 0 1.5rem; }
.card-media .thumb-ipsy-ai .logo { height: 1.75rem; }
.card-media .thumb-ipsy-ai .logo-figma { height: 2.625rem; }
.card-media .thumb-ipsy-ai .ipsy-wordmark { width: 7rem; }

/* "View case study" pill that follows the cursor over a card */
.view-pill {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--color-accent); color: var(--color-accent-ink); border-radius: 4px;   /* same tag as the About caption badge */
  font: var(--weight-regular) var(--text-caption)/20px var(--font-mono); text-transform: uppercase; white-space: nowrap;
  transform: translate(18px, -50%);   /* sits just right of the pointer */
  opacity: 0; transition: opacity .15s;
}
.view-pill.on { opacity: 1; }
/* near the right edge it sits to the left of the pointer instead */
.view-pill.is-left { transform: translate(calc(-100% - 18px), -50%); }
.sprout-pill { z-index: 70; transform: translate(-50%, 24px); }   /* under the cursor, not beside it */
.sprout-pill.is-anchored { transform: translate(-50%, 0); }   /* keyboard focus: centered under Sprout */
/* card text links to the case study too: slight darken + underline on the title */
.project-text { display: grid; gap: 10px; color: inherit; }
.project-text .project-line { margin-top: 0; }

@media (hover: none) { .view-pill { display: none; } }   /* the pill is used on the Playground cards */

/* ── Chip ────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; height: var(--chip-height); padding: 7px 19px 7px 13px;
  border: var(--rule) solid var(--color-border);
  font: var(--weight-medium) var(--text-body)/var(--text-body-lh) var(--font-mono); color: var(--color-text-strong);
  text-transform: uppercase; white-space: nowrap;
}

/* ── Sprout panel ────────────────────────────────────────────── */
.sprout-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: var(--panel-width);
  display: flex; flex-direction: column; background: var(--color-panel-bg);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.sprout-panel:focus { outline: none; }
.panel-open .sprout-panel { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease); }
.panel-open .page { margin-right: var(--panel-width); }
/* quiet header: small gray Geist label, room before the scrolling chat (which fades out under it) */
.sp-head { display: flex; justify-content: space-between; align-items: center; padding: 29px 25px 20px; }
.sp-name { font: var(--weight-regular) var(--text-caption)/20px var(--font-sans); color: var(--color-text-subtle); }
.sp-privacy { padding: 8px 16px 0; font: var(--weight-regular) var(--text-caption)/18px var(--font-sans); color: var(--color-text-subtle); }
.sp-new { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; margin-right: 12px; opacity: .75; transition: opacity var(--dur-fast), transform .3s var(--ease); }   /* refresh icon: clears the chat */
.sp-new img { width: 16px; height: 16px; }
.sp-new:hover, .sp-new:focus-visible { opacity: 1; transform: rotate(-30deg); }
.sp-new[hidden] { display: none; }
.sp-close { display: grid; place-items: center; width: 24px; height: 24px; margin-right: -4px; }
.sp-close img { width: 16px; height: 16px; }
.sp-body { margin-top: auto; padding: 0 16px; }
/* welcome: pixel Sprout, greeting, intro, then a 2x2 grid of topic cards */
.sp-hello { display: block; width: 34px; height: 30px; margin-left: 2px; image-rendering: pixelated; }
.sp-title { margin-top: 10px; font: var(--weight-regular) var(--text-title)/28px var(--font-serif); color: var(--color-text); }
.sp-intro { margin-top: 4px; font: var(--weight-regular) var(--text-small)/22px var(--font-sans); color: var(--color-text-muted); text-wrap: balance; }
.sp-questions { display: grid; gap: 1px; }
.sp-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; list-style: none; }   /* pills hug one-line labels; two to a row when they fit, otherwise one */
.sp-topics .sp-topic {
  align-items: center; gap: 6px; width: auto; padding: 9px 11px; white-space: nowrap; border: var(--rule) solid rgba(134, 208, 168, .5); border-radius: 6px; background: var(--color-bg);
  font: var(--weight-regular) var(--text-small)/20px var(--font-sans); color: var(--color-accent-strong);
}
.sp-topics .sp-topic svg { flex: none; width: 16px; height: 16px; }
.sp-topics .sp-topic:hover, .sp-topics .sp-topic:focus-visible { background: var(--color-accent-tint); }
.sp-q {
  display: flex; align-items: center; gap: 2px; width: 100%; padding: 7px 16px; border-radius: 4px;
  font-size: var(--text-small); color: var(--color-text-muted); text-align: left; transition: background var(--dur-fast), color var(--dur-fast);
}
.sp-q img { width: 16px; height: 16px; transform: scaleX(-1); }
.sp-q .ic-on { display: none; }
.sp-q:hover, .sp-q:focus-visible { background: var(--color-accent-tint); color: var(--color-accent-strong); }
.sp-q:hover .ic-off, .sp-q:focus-visible .ic-off { display: none; }
.sp-q:hover .ic-on, .sp-q:focus-visible .ic-on { display: block; }
.sp-form {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs);
  margin: 32px 15px 20px; height: 49px; padding: 0 18px 0 17px;
  background: var(--color-bg); border: var(--rule) solid var(--color-border-faint);
}
.sp-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: var(--weight-regular) var(--text-small)/1 var(--font-sans); color: var(--color-text); }
.sp-input::placeholder { color: var(--color-text-subtle); }
.sp-send, .sp-send img { width: 20px; height: 20px; }
/* chat log: fills the panel and scrolls; messages sit at the bottom until they overflow */
.sp-log { display: none; list-style: none; margin: 0; }
.is-chatting .sp-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-top: 24px;
  -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px); }   /* text fades out before it reaches the header */
.is-chatting .sp-hello, .is-chatting .sp-title, .is-chatting .sp-intro, .is-chatting .sp-questions { display: none; }
.is-chatting .sp-log { display: flex; flex-direction: column; gap: 16px; margin-top: auto; padding: 0 9px; }
.sp-msg { max-width: 88%; font-size: var(--text-small); line-height: 1.55; color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-user { align-self: flex-end; padding: 8px 14px; border-radius: 4px; background: var(--color-accent-tint); color: var(--color-accent-strong); }
.sp-bot { align-self: flex-start; white-space: normal; }
.sp-bot p + p, .sp-bot p + ul, .sp-bot ul + p { margin-top: 6px; }
.sp-bot ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; list-style: disc; }
.sp-bot li::marker { color: var(--color-accent); }
/* case study cards under Sprout's answer: thumbnail, homepage title, meta; mint on hover */
.sp-cards { display: grid; gap: 8px; align-self: stretch; margin-top: -6px; }
.sp-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border: var(--rule) solid rgba(134, 208, 168, .35); border-radius: 4px; background: rgba(134, 208, 168, .12); color: var(--color-text); transition: background var(--dur-fast), border-color var(--dur-fast); }
.sp-card img { width: 96px; height: 72px; border-radius: 3px; object-fit: cover; transition: transform .35s var(--ease); }
.sp-card { overflow: hidden; }
.sp-card-text { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.sp-card-title { font: var(--weight-regular) 16px/21px var(--font-serif); transition: color var(--dur-fast); }
.sp-card-lock { justify-self: start; white-space: nowrap; padding: 2px 6px; border-radius: 4px; background: var(--color-bg); font: var(--weight-regular) var(--text-caption)/18px var(--font-mono); text-transform: uppercase; color: var(--color-text-subtle); }
.sp-card:hover, .sp-card:focus-visible { background: var(--color-accent-tint); border-color: var(--color-accent); }
.sp-card:hover .sp-card-title, .sp-card:focus-visible .sp-card-title { color: var(--color-accent-strong); }
.sp-card:hover img, .sp-card:focus-visible img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .sp-card img { transition: none; } .sp-card:hover img { transform: none; } }
/* contact tags under an answer that points to Leslie: the site's mint mono tags */
.sp-contacts { display: flex; flex-wrap: wrap; gap: 8px; align-self: stretch; margin-top: -6px; }
.sp-contact { display: inline-flex; align-items: center; padding: 6px 10px; border: var(--rule) solid rgba(134, 208, 168, .6); border-radius: 4px; background: var(--color-bg);
  font: var(--weight-regular) var(--text-caption)/18px var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: var(--color-accent-strong); transition: background var(--dur-fast); }
.sp-contact:hover, .sp-contact:focus-visible { background: var(--color-accent-tint); }
/* follow-up questions under Sprout's answer: same buttons as the starter questions */
.sp-follow { display: grid; gap: 1px; align-self: stretch; }
/* streaming answer: each word fades in (whole words only, so nothing jumps between lines) */
.sp-w { opacity: 0; transition: opacity .28s ease-out; }
.sp-w.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sp-w { opacity: 1; transition: none; } }
/* loading: three mint leaves turning in a circle, each brightening as it comes around, beside a plant pun */
.sp-loading { display: flex; align-items: center; gap: 10px; }
.sp-leaves { position: relative; width: 24px; height: 24px; flex: none; animation: sp-spin 1.4s linear infinite; }
.sp-leaves i { position: absolute; left: 50%; top: 50%; width: 9px; height: 5px; margin: -2.5px 0 0 -4.5px; border-radius: 9px 0 9px 0; background: var(--color-accent); animation: sp-leaf 1.4s ease-in-out infinite; }
.sp-leaves i:nth-child(1) { transform: rotate(0deg) translateY(-7px) rotate(35deg); }
.sp-leaves i:nth-child(2) { transform: rotate(120deg) translateY(-7px) rotate(35deg); animation-delay: .47s; }
.sp-leaves i:nth-child(3) { transform: rotate(240deg) translateY(-7px) rotate(35deg); animation-delay: .93s; }
.sp-loading-text { color: var(--color-text-subtle); }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-leaf { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sp-leaves, .sp-leaves i { animation: none; } }
@keyframes sp-think { to { width: 1.2em; } }
.sp-note { min-height: 18px; margin-top: 8px; padding: 0 16px; font-size: var(--text-caption); color: var(--color-text-subtle); }

/* ── Smaller screens (not redesigned yet; desktop first) ─────── */
@media (max-width: 1100px) {
  .panel-open .page { margin-right: 0; }
  .site-footer-inner { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 40px; }
  .work-row { flex-direction: column; gap: 40px; }   /* stacked cards: clear space between one card's meta line and the next image */
  .work-row > .project { width: 100%; }
  .work-row .card-media { height: auto; aspect-ratio: 4 / 3; }
  .more-card { aspect-ratio: auto; min-height: 160px; }
  .site-footer-links { justify-self: start; }
  .sprout-panel { box-shadow: -12px 0 40px rgba(0, 0, 0, .08); }
  .hero { grid-template-columns: 1fr; row-gap: var(--space-xl); }
}
@media (max-width: 900px) {
  .nav { height: auto; }
  .nav-inner { grid-template-columns: 1fr auto; row-gap: 14px; padding: 18px var(--page-gutter) 12px; }
  .nav-links { grid-column: 1 / -1; grid-row: 2; gap: 24px; overflow-x: auto; font-size: var(--text-caption); white-space: nowrap; scrollbar-width: none; }
  /* one line: smaller text, even spacing; very narrow phones scroll it sideways instead of wrapping.
     The padding gives the timer bar and the 44px tap areas room inside the scroll box. */
  .tabs { flex-wrap: nowrap; justify-content: space-between; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 12px; margin-top: calc(var(--hero-tabs-gap) - 12px); }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; font-size: var(--text-small); }
  /* medium (not bold) for the active tab here: bold, and the space reserved for it, pushed the row past a phone's width.
     Medium is close enough to regular that the row doesn't visibly shift. */
  .tab[aria-selected="true"] { font-weight: var(--weight-medium); }
  .tab::after { display: none; }
  .hero { row-gap: 48px; }   /* job list sits apart from the headline and tabs */
  .nav-sprout { width: 96px; height: 36px; }
  .sprout-bubble { display: none; }
  .hero { padding-top: 40px; padding-bottom: 40px; }
  .job { font-size: 14px; white-space: normal; }
  .work { padding-top: 56px; scroll-margin-top: -56px; }
  .work-head { flex-direction: column; gap: var(--space-md); }
  .work-sub { text-align: left; }
  .era { margin-top: 72px; }
  .era-head { flex-wrap: wrap; row-gap: 6px; font-size: var(--text-caption); }
  .era-head::before { display: none; }
  .era-tagline { flex-basis: 100%; text-align: left; }
  .era-grid { grid-template-columns: 1fr; }
  .chip { font-size: var(--text-caption); height: 32px; }
  .sprout-panel { width: 100%; }
}
@media (max-width: 389px) {   /* 14px links can't share one line under 390px: let them wrap instead of clipping ABOUT */
  .nav-links { flex-wrap: wrap; row-gap: 6px; overflow: visible; white-space: normal; }
  .nav-links a { white-space: nowrap; }
}


/* ── Touch screens ── */
@media (pointer: coarse) {
  /* Apple's 44px tap targets, without changing how anything looks: an invisible area around each small link */
  .nav-logo, .nav-links a, .tab, .contact a, .cs-back, .cs-nav-list a, .cs-nav-name { position: relative; }
  /* tabs use ::before (their ::after reserves the bold width) */
  .nav-logo::after, .nav-links a::after, .tab::before, .contact a::after, .cs-back::after, .cs-nav-list a::after, .cs-nav-name::after {
    content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%);
  }
  .tab::before { left: -3px; right: -3px; }   /* tabs can be 6px apart on phones */
  .tab:first-child::before { left: 0; } .tab:last-child::before { right: 0; }   /* don't stretch the scrollable row */
  /* no hover on touch: only the current page keeps its dot (hover dots used to stick after a tap) */
  .nav-links a:not([aria-current="page"])::before, .contact a::before { display: none; }
}
@media (pointer: coarse) and (max-width: 900px) {
  /* the link row scrolls sideways, which clips anything outside it: pad it so the tap areas and the dot (left of the link) fit inside */
  .nav-links { padding: 12px 0 12px 14px; margin: -12px 0 -12px -14px; }
}