/* ==========================================================================
   Amber Goding portfolio: "Cool & savvy" design (selected 2026-11-12).
   Source of truth for the look: docs/design-previews/savvy.html and its
   screenshots. Final logo and favicon are pending (see AGENTS.md).
   ========================================================================== */

/* Fonts: self-hosted, SIL Open Font License (see /fonts/*-OFL.txt) */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display, Latin subset of the variable font. As in the approved
   preview, italics are the browser's oblique rendering of the roman. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/playfair-display-latin.woff2") format("woff2");
}

/* ==========================================================================
   Tokens (Savvy palette)
   ========================================================================== */

:root {
  --ink: #0e0e12;            /* page background */
  --ink-2: #17171d;          /* raised dark surface */
  --bone: #f2ede4;           /* text on dark, light sections */
  --white: #fff;             /* cards on bone */
  --coral: #ff5f45;          /* signature accent (on dark, or as a fill) */
  --coral-dark: #b3321e;     /* coral text on light surfaces (≈5.3:1 on bone) */
  --lilac: #b9a8ff;          /* secondary accent on dark */
  --violet: #5a3fd1;         /* lilac's counterpart on light surfaces */
  --muted: #a9a6b2;          /* secondary text on dark (≈7.9:1) */
  --muted-bone: #55525c;     /* secondary text on bone (≈6.4:1) */
  --line: rgb(242 237 228 / 0.14);
  --line-strong: rgb(242 237 228 / 0.28);

  --display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;

  --gutter: clamp(1rem, 4.5vw, 4rem);
  --max: 92rem;
  --space: clamp(4rem, 8vw, 7.5rem);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 180ms;
  --enter: 520ms;

  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--bone);
  font: 400 1.0625rem/1.6 var(--body);
  overflow-wrap: break-word;
  overflow-x: clip;
}

h1, h2, h3, p, ol, ul, figure, blockquote, dl, dd {
  margin: 0;
}

[hidden] {
  display: none !important;
}

ol[role="list"],
ul[role="list"] {
  list-style: none;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

::selection {
  background: var(--coral);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--lilac);
  outline-offset: 4px;
}

main {
  flex: 1;
}

main:focus {
  outline: none;
}

section[id] {
  scroll-margin-top: 1rem;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: var(--coral);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Light surfaces: bone background, dark text, darker accents. */
.services,
.section--cream {
  background: var(--bone);
  color: var(--ink);
}

.services :focus-visible,
.section--cream :focus-visible,
.contact :focus-visible,
.contact-page .contact-panel :focus-visible {
  outline-color: var(--ink);
}

.services ::selection,
.section--cream ::selection {
  background: var(--ink);
  color: var(--bone);
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */

.site-header-inner {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  text-decoration: none;
}

.brand-ag {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--bone);
  color: var(--ink);
  font: 700 1.05rem/1 var(--display);
  letter-spacing: -0.04em;
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.brand:hover .brand-ag,
.brand:focus-visible .brand-ag {
  background: var(--coral);
  transform: rotate(-8deg);
}

.brand-name {
  font: 700 1.25rem var(--display);
  letter-spacing: -0.04em;
}

.brand-dot {
  color: var(--coral);
}

.site-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(242 237 228 / 0.04);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.nav-link:hover {
  background: rgb(242 237 228 / 0.08);
  color: var(--bone);
}

.nav-link[aria-current="page"] {
  background: rgb(242 237 228 / 0.12);
  color: var(--bone);
}

.nav-cta,
.nav-cta[aria-current="page"] {
  background: var(--coral);
  color: var(--ink);
}

.nav-cta:hover {
  background: var(--bone);
  color: var(--ink);
}

/* The pill keeps its natural width (as in the approved phone layout). Below
   384px it no longer fits, so it spans the row with tighter padding; every
   link stays visible and each target remains at least 40px tall. */
@media (max-width: 23.99rem) {
  .site-nav {
    width: 100%;
  }

  .site-nav-list {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .site-nav-list li {
    flex: 1 1 auto;
  }

  .nav-link {
    width: 100%;
    padding-inline: 0.55rem;
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   Buttons and links
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.8rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 700 1rem var(--body);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.button-primary {
  background: var(--bone);
  color: var(--ink);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--coral);
  transform: rotate(-2deg) scale(1.03);
}

.button-outline {
  border-color: var(--bone);
  color: var(--bone);
}

.button-outline:hover,
.button-outline:focus-visible {
  border-color: var(--lilac);
  color: var(--lilac);
}

.button-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
  transition: color var(--fast) var(--ease);
}

.button-text span {
  display: inline-block;
  transition: transform var(--fast) var(--ease);
}

.button-text:hover span,
.button-text:focus-visible span {
  transform: translateX(4px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* ==========================================================================
   Shared section typography
   ========================================================================== */

.section {
  padding-block: var(--space);
}

.kicker,
.section-label {
  font: 700 0.875rem/1.5 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}

.section-label span {
  color: var(--lilac);
  margin-right: 0.35rem;
}

.services .kicker,
.section--cream .kicker,
.section--cream .section-label {
  color: var(--coral-dark);
}

.section--cream .section-label span {
  color: var(--violet);
}

.section h2 {
  margin-top: 0.75rem;
  font: 700 clamp(2.4rem, 7vw, 6rem)/0.92 var(--display);
  letter-spacing: -0.055em;
}

.section h2 em {
  color: var(--lilac);
}

.services h2 em,
.section--cream h2 em {
  color: var(--violet);
}

/* Stickers: small rotated tags used as playful details. */
.sticker {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.35);
}

.sticker--1 {
  background: var(--lilac);
  color: var(--ink);
  transform: rotate(6deg);
}

.sticker--2 {
  background: var(--bone);
  color: var(--ink);
  transform: rotate(-4deg);
}

/* ==========================================================================
   Home: hero
   ========================================================================== */

.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}

.hero-title {
  font: 700 clamp(3.2rem, 13vw, 12.5rem)/0.86 var(--display);
  letter-spacing: -0.065em;
}

.hero-title em {
  color: var(--coral);
  letter-spacing: -0.04em;
}

.hero-row {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: end;
}

.hero-intro {
  display: flex;
  gap: 1rem;
  align-items: center;
  max-width: 36rem;
}

.hero-intro img {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  border: 2px solid var(--coral);
}

.hero-intro p {
  color: var(--muted);
}

.hero-intro strong {
  color: var(--bone);
}

@media (min-width: 56rem) {
  .hero-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ==========================================================================
   Home: ticker
   ========================================================================== */

.ticker {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--coral);
  color: var(--ink);
  border-block: 2px solid var(--ink);
  overflow: hidden;
}

.ticker-track {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ticker-move {
  display: flex;
  flex: none;
  gap: 2.5rem;
  padding: 0.9rem 1.25rem;
  font: 700 clamp(1.1rem, 2.4vw, 1.75rem) var(--display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.ticker-move span::after {
  content: "✺";
  margin-left: 2.5rem;
}

.ticker-toggle {
  flex: none;
  margin-right: 0.75rem;
  min-height: 40px;
  padding: 0.3rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 700 0.8125rem var(--body);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.ticker-toggle:hover {
  background: var(--ink);
  color: var(--coral);
}

.ticker :focus-visible {
  outline-color: var(--ink);
}

/* ==========================================================================
   Home: selected work
   ========================================================================== */

.work-list {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.work-item {
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.work-num {
  font: 700 clamp(3.5rem, 8vw, 6.5rem)/0.8 var(--display);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--muted);
  transition: -webkit-text-stroke-color var(--fast) var(--ease);
}

.work-copy {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.chip {
  justify-self: start;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgb(185 168 255 / 0.16);
  color: var(--lilac);
  font-size: 0.875rem;
  font-weight: 700;
}

.work-copy h3 {
  font: 700 clamp(2rem, 4vw, 3.4rem)/0.98 var(--display);
  letter-spacing: -0.045em;
}

.project-link {
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

/* The whole card is one link target, named by the project title. */
.project-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.work-copy p {
  color: var(--muted);
  max-width: 34rem;
}

.work-note {
  font-size: 0.875rem;
}

.work-copy .work-cta {
  color: var(--coral);
  font-weight: 700;
}

.work-cta span {
  display: inline-block;
  transition: transform var(--fast) var(--ease);
}

.work-shot {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  transform: rotate(1.5deg);
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.45);
  transition: transform 450ms var(--ease);
}

.project:nth-child(even) .work-shot {
  transform: rotate(-1.5deg);
}

.work-shot img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: left top;
  transition: transform 600ms var(--ease);
}

.work-item:hover .work-shot,
.work-item:focus-within .work-shot {
  transform: rotate(0deg);
}

.work-item:hover .work-shot img,
.work-item:focus-within .work-shot img {
  transform: scale(1.03);
}

.work-item:hover .project-link,
.work-item:focus-within .project-link {
  color: var(--coral);
}

.work-item:hover .work-cta span,
.work-item:focus-within .work-cta span {
  transform: translateX(6px);
}

.work-item:hover .work-num,
.work-item:focus-within .work-num {
  -webkit-text-stroke-color: var(--coral);
}

.project-link:focus-visible {
  outline: none;
}

.work-item:has(.project-link:focus-visible) {
  outline: 2px solid var(--lilac);
  outline-offset: 8px;
  border-radius: 6px;
}

@media (min-width: 56rem) {
  .work-item {
    grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
  }
}

/* ==========================================================================
   Home: services (light)
   ========================================================================== */

.svc-grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1rem;
}

.svc {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 1.75rem;
  border-radius: 22px;
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.svc:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}

.svc-num {
  font: 700 0.875rem var(--display);
  color: var(--coral-dark);
}

.svc h3 {
  font: 700 1.6rem/1.1 var(--display);
  letter-spacing: -0.03em;
}

.svc p {
  color: var(--muted-bone);
}

.services .button-text {
  margin-top: 2rem;
}

@media (min-width: 56rem) {
  .svc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Home: tech stack and tools
   ========================================================================== */

.stack {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
}

.stack-head {
  display: grid;
  gap: 1rem 3rem;
}

.stack-lede {
  max-width: 30rem;
  color: var(--muted);
}

.stack-ui {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1rem;
}

.stack-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  align-content: start;
}

.stack-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num label" "num count";
  column-gap: 0.75rem;
  align-items: center;
  min-height: 64px;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 20px;
  background: transparent;
  color: var(--bone);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.stack-tab:hover {
  border-color: var(--lilac);
  transform: translateY(-2px);
}

.stack-tab[aria-selected="true"] {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink);
  transform: rotate(-1deg);
}

.stack-tab > * {
  min-width: 0;
}

/* Phones: a compact 2×2 grid, sized so the longest word ("Development")
   fits whole; the narrowest phones stack the groups in one column. */
@media (max-width: 39.99rem) {
  .stack-tab {
    column-gap: 0.6rem;
    padding: 0.8rem;
  }

  .stack-tab-num {
    font-size: 1.25rem;
  }

  .stack-tab-label {
    font-size: 0.9375rem;
  }
}

@media (max-width: 23.4rem) {
  .stack-tabs {
    grid-template-columns: 1fr;
  }
}

.stack-tab-label {
  overflow-wrap: normal;
  hyphens: manual;
}

.stack-tab-num {
  grid-area: num;
  font: 700 1.5rem/1 var(--display);
  letter-spacing: -0.04em;
}

.stack-tab-label {
  grid-area: label;
  font: 700 1rem/1.2 var(--display);
  letter-spacing: -0.01em;
}

.stack-tab-count {
  grid-area: count;
  font-size: 0.8125rem;
  color: var(--muted);
}

.stack-tab[aria-selected="true"] .stack-tab-count {
  color: rgb(14 14 18 / 0.78);
}

.stack-panels {
  display: grid;
  gap: 1rem;
}

.stack-panel {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--ink);
}

.stack-panel-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.stack-panel-num {
  font: 700 clamp(2.5rem, 5vw, 3.75rem)/0.8 var(--display);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--coral);
}

.stack-panel h3 {
  font: 700 clamp(1.75rem, 3.4vw, 2.6rem)/1 var(--display);
  letter-spacing: -0.04em;
}

/* Connected tools: pills linked by short dashed connectors. */
.stack-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.75rem;
}

.stack-tools li {
  display: inline-flex;
  align-items: center;
}

.stack-tools li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--coral);
}

.stack-tools li {
  padding: 0.45rem 0.95rem 0.45rem 0.75rem;
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9375rem;
}

.stack-tools li:not(:last-child) {
  margin-right: 1.5rem;
  position: relative;
}

.stack-tools li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 1.5rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--lilac) 0 4px, transparent 4px 8px);
}

.stack-usage {
  max-width: 44rem;
  color: var(--muted);
}

.stack-projects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.stack-projects > span {
  margin-right: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.stack-projects a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgb(185 168 255 / 0.5);
  border-radius: 999px;
  color: var(--lilac);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.stack-projects a:hover {
  background: var(--lilac);
  color: var(--ink);
}

/* "Tools I build with": deliberately styled apart from the stack. */
.build-tools {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1.5px dashed rgb(185 168 255 / 0.55);
  border-radius: 22px;
}

.build-tools h3 {
  font: 700 1.25rem var(--display);
  letter-spacing: -0.02em;
}

.build-tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.build-tools-list li {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgb(185 168 255 / 0.16);
  color: var(--lilac);
  font-weight: 700;
  font-size: 0.9375rem;
}

.build-tools p {
  max-width: 50rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

@media (min-width: 56rem) {
  .stack-head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
  }

  .stack-ui.is-tabbed {
    grid-template-columns: minmax(15rem, 0.75fr) minmax(0, 1.6fr);
    gap: 1.5rem;
    align-items: start;
  }

  .stack-ui.is-tabbed .stack-tabs {
    grid-template-columns: 1fr;
  }

  .build-tools {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1.5rem;
  }
}

/* ==========================================================================
   Home: about
   ========================================================================== */

.about-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about-photo {
  position: relative;
  width: min(100%, 30rem);
}

.about-photo img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 28px;
}

.about-photo .sticker {
  position: absolute;
  right: 0.75rem;
  bottom: 1.25rem;
}

.about-copy h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1;
}

.about-quote {
  margin-top: 1.5rem;
  font: italic 500 clamp(1.6rem, 3.4vw, 2.6rem)/1.2 var(--serif);
}

.about-quote span {
  color: var(--coral);
}

.about-body {
  margin-top: 1.25rem;
  max-width: 34rem;
  color: var(--muted);
}

.about-copy .button-text {
  margin-top: 1rem;
  color: var(--coral);
}

@media (min-width: 56rem) {
  .about-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* ==========================================================================
   Contact invitation (coral)
   ========================================================================== */

.contact {
  background: var(--coral);
  color: var(--ink);
}

.contact .kicker,
.contact .section-label,
.contact .section-label span {
  color: var(--ink);
}

.contact-title {
  font-size: clamp(3rem, 12vw, 11rem) !important;
  line-height: 0.88 !important;
}

.contact .contact-title em {
  color: var(--ink);
}

.contact-row {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: end;
}

.contact-row p {
  max-width: 34rem;
  font-size: 1.125rem;
}

.contact-cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bone);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.contact-cta span {
  display: inline-block;
  transition: transform var(--fast) var(--ease);
}

.contact-cta:hover,
.contact-cta:focus-visible {
  background: #2a2a33;
  transform: rotate(-2deg) scale(1.03);
}

.contact-cta:hover span,
.contact-cta:focus-visible span {
  transform: translateX(4px);
}

@media (min-width: 56rem) {
  .contact-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer-inner {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.5rem;
}

.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  text-underline-offset: 0.25em;
  transition: color var(--fast) var(--ease);
}

.footer-top:hover {
  color: var(--bone);
}

/* ==========================================================================
   Inner pages: shared introduction
   ========================================================================== */

.page-hero,
.contact-page {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--space);
}

.page-title,
.contact-page-title {
  margin-top: 1rem;
  max-width: 15ch;
  font: 700 clamp(2.75rem, 9vw, 7.5rem)/0.9 var(--display);
  letter-spacing: -0.06em;
}

.page-title em,
.contact-page-title em {
  color: var(--coral);
  letter-spacing: -0.03em;
}

.page-lede,
.contact-page-lede {
  max-width: 40rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.page-note,
.contact-page-note {
  max-width: 40rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.page-hero .hero-actions {
  margin-top: 2rem;
}

/* ==========================================================================
   Services page
   ========================================================================== */

.page-toc {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-toc ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.page-toc a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.page-toc a:hover {
  border-color: var(--coral);
  background: var(--coral);
  color: var(--ink);
}

.page-toc-number {
  color: var(--lilac);
  font: 700 0.9375rem var(--display);
}

.page-toc a:hover .page-toc-number {
  color: var(--ink);
}

.service-detail {
  border-top: 1px solid var(--line);
}

.service-detail-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.service-detail-intro h2 {
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
}

.service-detail-summary {
  max-width: 30rem;
  margin-top: 1.25rem;
  font: 500 italic clamp(1.4rem, 2.4vw, 1.9rem)/1.25 var(--serif);
}

.service-detail-blocks {
  max-width: 30rem;
  margin-top: 1.25rem;
  color: var(--muted);
}

.service-detail-blocks strong {
  color: var(--bone);
}

.service-detail-intro .button-text {
  margin-top: 1rem;
  color: var(--coral);
}

.service-detail-body {
  display: grid;
  gap: 1rem;
}

.detail-group {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--ink-2);
}

.detail-group h3,
.example-card h3 {
  font: 700 1.3rem/1.2 var(--display);
  letter-spacing: -0.02em;
}

.detail-group ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  color: var(--muted);
}

.detail-group li + li {
  margin-top: 0.4rem;
}

.detail-group li::marker {
  color: var(--coral);
}

.example-card {
  padding: 1.5rem;
  border: 1.5px dashed rgb(185 168 255 / 0.55);
  border-radius: 22px;
}

.example-label {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgb(185 168 255 / 0.16);
  color: var(--lilac);
  font-size: 0.8125rem;
  font-weight: 700;
}

.example-card p:not(.example-label) {
  margin-top: 0.6rem;
  color: var(--muted);
}

/* Process and workflow steps: white cards on bone, as on the homepage. */
.principles {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.principles li {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.5rem;
  border-radius: 22px;
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

.principle-number {
  font: 700 0.875rem var(--display);
  color: var(--coral-dark);
}

.principles h3 {
  font: 700 1.35rem/1.15 var(--display);
  letter-spacing: -0.02em;
}

.principles p {
  color: var(--muted-bone);
}

@media (min-width: 56rem) {
  .service-detail-layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  .process-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .process-steps--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-hero-layout {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

.about-title {
  max-width: 14ch;
  font-size: clamp(2.4rem, 1rem + 5vw, 6rem);
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.profile-links .button-text {
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--bone);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.profile-links .button-text:hover,
.profile-links .button-text:focus-visible {
  border-color: var(--lilac);
  color: var(--lilac);
}

.about-portrait {
  position: relative;
  width: min(100%, 28rem);
}

.about-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 28px;
}

.about-story {
  border-top: 1px solid var(--line);
}

.story-grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1rem;
}

.story-card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--ink-2);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.story-card:hover {
  border-color: rgb(255 95 69 / 0.6);
  transform: translateY(-3px);
}

.story-num {
  font: 700 clamp(2.5rem, 5vw, 3.5rem)/0.8 var(--display);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--coral);
}

.story-card h3 {
  font: 700 1.6rem/1.1 var(--display);
  letter-spacing: -0.03em;
}

.story-card p {
  color: var(--muted);
  font-size: 1.0625rem;
}

@media (min-width: 56rem) {
  .story-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about-approach-layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.about-approach .kicker {
  color: var(--coral-dark);
}

.about-approach-copy {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
  color: var(--muted-bone);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

@media (min-width: 56rem) {
  .about-hero-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  .about-portrait {
    justify-self: end;
  }

  .about-approach-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    column-gap: clamp(3rem, 6vw, 6rem);
  }
}

/* ==========================================================================
   Case studies
   ========================================================================== */

/* Lower minimum than other titles so single-word names such as
   "HuntSomewhere" fit at 320px without breaking mid-word. */
.project-title {
  max-width: 12ch;
  font-size: clamp(2.25rem, 8vw, 7rem);
}

.project-facts {
  display: grid;
  gap: 1rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}

.project-facts div {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--ink-2);
}

.project-facts dt {
  color: var(--coral);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-facts dd {
  color: var(--muted);
}

.project-section {
  border-top: 1px solid var(--line);
}

.project-section-layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.project-section h2,
.project-workflow h2,
.project-scope h2 {
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
}

/* Headings in the narrower two-column intro scale less steeply. */
.project-section-layout h2 {
  font-size: clamp(2.2rem, 4vw, 4rem);
}

.project-prose {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.2rem);
}

.project-section .project-prose {
  color: var(--muted);
}

.project-prose h3,
.decision h3 {
  font: 700 1.3rem/1.2 var(--display);
  letter-spacing: -0.02em;
  color: var(--bone);
}

.project-prose h3 {
  margin-top: 1rem;
}

.project-review .project-prose {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.project-figure {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}

.project-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--ink-2);
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.35);
}

.project-figure figcaption {
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.section--cream .project-figure img {
  border-color: rgb(14 14 18 / 0.2);
  box-shadow: 8px 8px 0 var(--ink);
}

.section--cream .project-figure figcaption {
  color: var(--muted-bone);
}

.figure-flag {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--lilac);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section--cream .figure-flag {
  background: var(--ink);
  color: var(--bone);
}

.project-figures {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

/* Tall phone captures stay at phone width until they get their own column. */
.project-figure--phone {
  max-width: 22rem;
}

.decision-grid {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.decision {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--ink-2);
}

.decision p {
  margin-top: 0.6rem;
  color: var(--muted);
}

.scope-grid {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.scope-grid .detail-group {
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

.section--cream .detail-group ul {
  color: var(--muted-bone);
}

.section--cream .detail-group li::marker {
  color: var(--coral-dark);
}

.scope-note {
  max-width: 46rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--muted-bone);
  font-size: 0.9375rem;
}

.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tech-list li {
  display: grid;
  gap: 0.15rem;
  flex: 1 1 16rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--ink-2);
}

.tech-list strong {
  color: var(--bone);
}

.tech-list span {
  font-size: 0.9375rem;
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
}

.project-links .button-text {
  color: var(--coral);
}

@media (min-width: 48rem) {
  .project-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .decision-grid,
  .scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56rem) {
  .project-section-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  .project-figures {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  .project-figure--phone {
    max-width: none;
  }
}

/* ==========================================================================
   Contact page and form
   ========================================================================== */

.contact-page-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

.contact-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 28px;
  background: var(--bone);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--coral);
}

.contact-panel h2 {
  font: 700 clamp(1.5rem, 3vw, 2rem)/1.15 var(--display);
  letter-spacing: -0.03em;
}

.contact-panel p {
  color: var(--muted-bone);
}

.contact-panel .button-text {
  color: var(--coral-dark);
}

.contact-form {
  display: grid;
  gap: 1.25rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-weight: 700;
  color: var(--ink);
}

.field-hint {
  font-size: 0.9375rem;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgb(90 63 209 / 0.3);
}

.field textarea {
  min-height: 10rem;
  resize: vertical;
}

.field--error input,
.field--error textarea {
  border-color: var(--coral-dark);
}

.contact-panel .field-error {
  color: var(--coral-dark);
  font-weight: 700;
}

.form-errors,
.form-alert {
  padding: 1rem 1.25rem;
  border: 2px solid var(--coral-dark);
  border-radius: 16px;
  background: #fff4f1;
  color: var(--ink);
}

.form-errors h2 {
  font-size: 1.15rem;
}

.form-errors ul {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
}

.form-errors a {
  color: var(--coral-dark);
  font-weight: 700;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.contact-panel .button-primary {
  background: var(--ink);
  color: var(--bone);
}

.contact-panel .button-primary:hover,
.contact-panel .button-primary:focus-visible {
  background: var(--coral);
  color: var(--ink);
}

.contact-panel .button-primary[aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.form-status {
  color: var(--muted-bone);
}

.form-privacy {
  font-size: 0.9375rem;
}

.form-success,
.form-unavailable {
  display: grid;
  gap: 0.75rem;
}

.form-success h2:focus {
  outline: none;
}

/* The honeypot stays out of view and out of the accessibility tree. */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 56rem) {
  .contact-page-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ==========================================================================
   Error pages
   ========================================================================== */

.error-page {
  padding-block: clamp(4rem, 12vw, 8rem);
}

.error-page .section-label {
  margin-bottom: 1rem;
}

.error-page h1 {
  max-width: 14ch;
  font: 700 clamp(2.75rem, 9vw, 7rem)/0.9 var(--display);
  letter-spacing: -0.06em;
}

.error-page p:not(.section-label) {
  max-width: 34rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 1.125rem;
}

.error-page .button {
  margin-top: 2rem;
}

/* ==========================================================================
   Motion. Everything below runs only when the visitor allows motion.
   Content is visible by default; site.js adds .motion-ready before any
   reveal can hide anything.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Staggered hero entrance (short travel, ~0.5s each). */
  .hero .stickers li,
  .hero-title,
  .hero-intro,
  .hero-actions,
  .page-hero .section-label,
  .page-hero h1,
  .page-hero .page-lede,
  .contact-page-intro > * {
    animation: rise var(--enter) var(--ease) both;
  }

  /* Stickers pop in with `scale`, leaving their tilt (transform) intact. */
  .hero .stickers .sticker--1 { animation-name: pop; animation-delay: 380ms; }
  .hero .stickers .sticker--2 { animation-name: pop; animation-delay: 460ms; }
  .hero-title,
  .page-hero h1,
  .contact-page-intro > :nth-child(2) { animation-delay: 60ms; }
  .hero-intro,
  .page-hero .page-lede,
  .contact-page-intro > :nth-child(3) { animation-delay: 160ms; }
  .hero-actions,
  .contact-page-intro > :nth-child(n+4) { animation-delay: 240ms; }

  /* Scroll reveals. */
  .motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--enter) ease, transform var(--enter) var(--ease);
  }

  .motion-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Ticker: moves only once site.js has enabled its visible pause control
     (.is-live), so it is never in motion without a way to stop it. */
  .ticker.is-live .ticker-move {
    animation: ticker 28s linear infinite;
  }

  .ticker:hover .ticker-move,
  .ticker:focus-within .ticker-move,
  .ticker.is-paused .ticker-move {
    animation-play-state: paused;
  }

  /* Technology panel change. */
  .stack-panel.is-entering {
    animation: panel-in 380ms var(--ease) both;
  }

  .stack-panel.is-entering .stack-tools li {
    animation: chip-in 300ms var(--ease) both;
    animation-delay: calc(80ms + var(--i, 0) * 40ms);
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes pop {
  from { opacity: 0; scale: 0.7; }
  to { opacity: 1; scale: 1; }
}

@keyframes ticker {
  to { transform: translateX(-100%); }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes chip-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  /* The ticker is static, so its pause control is not needed. */
  .ticker-toggle {
    display: none !important;
  }

  .button-primary:hover,
  .button-primary:focus-visible,
  .contact-cta:hover,
  .contact-cta:focus-visible {
    transform: none;
  }
}