@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@85..100,400..700&family=Newsreader:opsz,wght@6..72,400..600&display=swap");

/* Alderwork Studio, built on the Alderwork Studio design system.
   Plum is words, teal is wiring. No third accent.
   The threads (threads.js) are the one loud thing; everything else stays quiet:
   flat surfaces, ring elevation instead of shadows, pills, generous space.
   Token names match the design system's tokens.json.

   Motion rules: transform and opacity only, under 300ms for anything the
   visitor triggers, strong ease-out curves, and nothing moves at all for
   people who asked for reduced motion (fades stay, movement goes). */
:root {
  --ground: #E9E5E7;
  --surface: #F6F3F5;
  --halo-ring: #F1EDF0;
  --line: #D3CCD1;
  --ink: #3B2436;
  --ink-quiet: #5E4A58;
  --wire: #8F7C8E;
  --teal: #0E6B6B;
  --teal-deep: #0A5252;
  --on-teal: #F6F3F5;
  --teal-tint: #DCEBEA;

  --thread-teal: #0E6B6B;
  --thread-rose: #C4677D;
  --thread-plum: #3B2436;
  --thread-ochre: #D29A2E;
  --thread-mauve: #8F7C8E;

  --halo: 0 0 0 1px var(--line), 0 0 0 4px var(--halo-ring);
  --press: inset 0 1px 0 0 rgba(255,255,255,.22), 0 1px 2px 0 rgba(59,36,54,.14);

  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 96px;
  --radius-sm: 8px; --radius-md: 18px; --radius-lg: 24px; --radius-pill: 999px;

  /* Motion. Built-in easings are too weak; these have a visible snap. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 160ms;
  --dur-hover: 150ms;
  --dur-reveal: 600ms;

  --content: 44rem;
  --cord: clamp(16rem, 36vw, 32rem);
  --measure: 36rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1E1520;
    --surface: #2A1F29;
    --halo-ring: #251A24;
    --line: #43343F;
    --ink: #EFE8EC;
    --ink-quiet: #B9A8B4;
    --teal: #6FC2BA;
    --teal-deep: #93D6CF;
    --on-teal: #0F2726;
    --teal-tint: #173533;
    --thread-teal: #6FC2BA;
    --thread-rose: #D78A9C;
    --thread-plum: #C9B3C4;
    --thread-ochre: #E0B05A;
    --press: inset 0 1px 0 0 rgba(255,255,255,.28), 0 1px 2px 0 rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

h1, h2, h3 { margin: 0; text-wrap: balance; }

a {
  color: var(--teal);
  text-decoration-thickness: from-font;
  text-underline-offset: .18em;
  transition: color var(--dur-hover) ease;
}

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

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

.skip {
  position: fixed; left: -999px; top: var(--space-4);
  background: var(--ink); color: var(--ground);
  font-family: var(--font-sans);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
}
.skip:focus { left: var(--space-4); z-index: 10; }

/* ---------- The page grid ----------
   gutter | content | threads | gutter. The threads column runs the full
   height of main and the canvas sticks inside it. */

.grid {
  display: grid;
  grid-template-columns:
    minmax(1.5rem, 3fr)
    minmax(0, var(--content))
    var(--cord)
    minmax(0, 1fr);
}
.grid > .content { grid-column: 2; grid-row: 1; min-width: 0; }
.cord { grid-column: 3; grid-row: 1; }

/* ---------- NavCapsule ---------- */

.masthead { padding: var(--space-4) 0 0; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-right: clamp(1.5rem, 4vw, 4rem);
  padding: 10px var(--space-3) 10px var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--halo);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  max-width: none;
  font-family: var(--font-sans);
  font-variation-settings: "wdth" 92;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-pill);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  font-family: var(--font-sans);
  font-variation-settings: "wdth" 92;
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-2) 10px;
  border-radius: var(--radius-pill);
}

.wordmark-glyph { width: 1rem; height: 1rem; flex: none; color: var(--teal); }

/* ---------- Buttons ----------
   Colour changes on hover, a 3% press on :active so the button visibly
   answers the click. Hover is only wired up for devices that can hover;
   on touch it would stick after a tap. */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-variation-settings: "wdth" 96;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 15px var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    background-color var(--dur-hover) ease,
    color var(--dur-hover) ease,
    border-color var(--dur-hover) ease,
    transform var(--dur-press) var(--ease-out);
}
.button:active { transform: scale(0.97); }
.button .icon { transition: transform 200ms var(--ease-out); }

.button-primary { background: var(--teal); color: var(--on-teal); box-shadow: var(--press); }
.button-ghost { background: transparent; color: var(--ink); border-color: var(--ink); padding: 13.5px 22px; }
.button-sm { font-size: .9375rem; padding: 9px var(--space-4); }
.button-ghost.button-sm { padding: 8px 14px; }

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--teal-deep); }
  .button-primary:hover { background: var(--teal-deep); color: var(--on-teal); }
  .button-ghost:hover { background: var(--surface); color: var(--ink); }
  /* The outbound arrow nudges toward its corner. */
  .nav .button:hover .icon { transform: translate(1px, -1px); }
  .nav-links a:hover, .wordmark:hover, .footer-links a:hover { color: var(--teal); }
}

/* ---------- The threads ---------- */

.cord-stick { position: sticky; top: 0; height: 100vh; height: 100dvh; }
.threads-canvas { display: block; width: 100%; height: 100%; }

/* ---------- Sections ---------- */

.band { padding: var(--space-9) clamp(1.5rem, 4vw, 4rem) 0 0; }

.hero {
  padding-top: var(--space-8);
  min-height: calc(100vh - 6rem);
  min-height: calc(100dvh - 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h2 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-6);
}

h3 {
  font-family: var(--font-sans);
  font-variation-settings: "wdth" 92;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-2);
}

/* ---------- Captions ----------
   Archivo caption: the kicker over the headline, the dates on the scenes,
   the note under the hero buttons. */

.kicker {
  font-family: var(--font-sans);
  font-variation-settings: "wdth" 92;
  font-weight: 500;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--ink-quiet);
  margin: 0 0 var(--space-5);
}

.quiet { color: var(--ink-quiet); }

/* ---------- Hero ---------- */

.hero h1 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  max-width: 15ch;
  margin-bottom: var(--space-5);
}

.lede { font-size: 1.3125rem; line-height: 1.55; max-width: 32rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }
.hero-note { margin: var(--space-6) 0 0; }

/* The hero settles in once per page load: headline, lede, buttons, each a
   beat behind the last. Pure CSS, so it still runs without JavaScript. */

@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.hero > * {
  animation: settle var(--dur-reveal) var(--ease-out) both;
}
.hero > :nth-child(2) { animation-delay: 70ms; }
.hero > :nth-child(3) { animation-delay: 140ms; }
.hero > :nth-child(4) { animation-delay: 210ms; }
.hero > :nth-child(5) { animation-delay: 280ms; }

/* ---------- Scroll reveals ----------
   Cards and steps rise 10px as they come into view, 50ms apart. Only when
   JavaScript is there to flip them on; otherwise they're simply visible. */

.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: 50ms; }
.js .reveal:nth-child(3) { transition-delay: 100ms; }
.js .reveal:nth-child(4) { transition-delay: 150ms; }

/* ---------- Sound familiar: three scenes ---------- */

.scenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.scene { border-top: 1px solid var(--line); padding-top: var(--space-4); min-width: 0; }
.scene .kicker { margin-bottom: var(--space-2); }
.scene p:last-child { margin: 0; }
.familiar .quiet { margin: 0; }

/* ---------- What I do: cards ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-5);
}

.work-item {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--halo);
  padding: var(--space-5);
  min-width: 0;
}
.work-item p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-quiet); }
.icon-title {
  width: 22px; height: 22px;
  vertical-align: -4px;
  margin-right: 10px;
  color: var(--ink);
}

/* ---------- How it works: one teal rail ---------- */

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; max-width: var(--content); }

.steps li { counter-increment: step; position: relative; padding: 0 0 var(--space-7) 52px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: ""; position: absolute; left: 9px; top: 30px; bottom: 0;
  width: 2px; background: var(--teal);
}
.steps li:last-child::before { display: none; }
.steps li::after {
  content: counter(step); position: absolute; left: 0; top: 0;
  font-family: var(--font-sans); font-variation-settings: "wdth" 92;
  font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: var(--teal);
}
.steps p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-quiet); }

/* ---------- Why alder ---------- */

.why p:last-child { margin-bottom: 0; }
.why .lede { margin-bottom: var(--space-5); }

/* ---------- Is this for you: two plain lists ---------- */

.fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-6) var(--space-7);
}
.fit-col { min-width: 0; }
.fit-col h3 { margin-bottom: var(--space-4); }
.fit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.fit-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.fit-list .icon { width: 22px; height: 22px; margin-top: 4px; }
.fit-yes .icon { color: var(--teal); }
.fit-no { color: var(--ink-quiet); }
.fit-no .icon { color: var(--wire); }

/* ---------- Contact ---------- */

.contact { min-height: 70vh; padding-bottom: var(--space-9); }

.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: var(--space-5) 0 0; max-width: none; }

.email {
  font-family: var(--font-sans);
  font-variation-settings: "wdth" 88;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration-thickness: 2px;
  text-underline-offset: .12em;
  overflow-wrap: anywhere;
}

/* Copy button: the label and icon swap to "Copied" through a short blur,
   so it reads as one button changing state rather than two swapping. */

.copy-email .button-content {
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: filter 200ms ease, opacity 200ms ease;
}
.copy-email.is-swapping .button-content { filter: blur(2px); opacity: .6; }
.copy-email .icon-check { display: none; }
.copy-email[data-state="copied"] .icon-copy { display: none; }
.copy-email[data-state="copied"] .icon-check { display: block; }
.button.copy-email[data-state="copied"],
.button.copy-email[data-state="copied"]:hover { color: var(--teal); border-color: var(--teal); background: var(--teal-tint); }

/* ---------- Footer ---------- */

footer {
  padding: var(--space-6) 0 var(--space-7);
  border-top: 1px solid var(--line);
  color: var(--ink-quiet);
  font-size: 1rem;
  line-height: 1.6;
}
footer p { margin: 0 0 var(--space-2); max-width: 46rem; }
footer p:last-child { margin-bottom: 0; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4) var(--space-7); padding-right: clamp(1.5rem, 4vw, 4rem); }
.footer-copy { flex: 1 1 24rem; min-width: 0; }
.footer-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  font-family: var(--font-sans); font-variation-settings: "wdth" 92;
  font-weight: 500; font-size: .9375rem; line-height: 1.2;
}
.footer-links a { color: var(--ink); text-decoration: none; display: inline-block; padding: var(--space-1) 0; }

/* ---------- Narrow screens ----------
   The threads become a band across the top that stays while the page scrolls
   under it; they run left to right and comb out the same way. */

@media (max-width: 52rem) {
  .grid { display: block; }
  .grid > .content { width: min(100% - 2rem, var(--content)); margin-inline: auto; }
  .nav { margin-right: 0; }
  .nav-links { display: none; }
  .footer-inner { padding-right: 0; }
  .footer-links { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

  .cord {
    position: sticky; top: 0; z-index: 2;
    height: 22vh; height: 22dvh;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
  }
  .cord-stick { position: static; height: 100%; }

  .band { padding: var(--space-8) 0 0; }
  .hero { min-height: 0; display: block; padding-top: var(--space-6); }
  .hero-note { display: none; }
  .hero h1 { max-width: 14ch; }
  h2 { font-size: 1.75rem; }
  .lede { font-size: 1.1875rem; }
  .contact { padding-bottom: var(--space-8); }
}

/* ---------- Reduced motion ----------
   Fades stay, movement goes. The threads hold still (threads.js checks the
   same query) and the column stops sticking. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .button .icon { transition: none; }
  .button:active { transform: none; }
  .hero > * { animation: fade 300ms ease both; animation-delay: 0ms; }
  .js .reveal { transform: none; transition: opacity 300ms ease; transition-delay: 0ms; }
  .cord, .cord-stick { position: static; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 68rem) and (min-width: 52.01rem) {
  .nav-links { display: none; }
}