/* ==========================================================
   BettaDev — deep-water dark
   Palette and rules taken from the "BettaDev studio branding"
   design doc (turn 2). Cream is the text colour, teal is for
   status and links, violet for primary actions, deep violet
   only as a background wash. Never two accents in one element.
   ========================================================== */

:root {
  --ink:        #16121B;  /* page */
  --panel:      #1C1724;  /* cards, inputs */
  --panel-2:    #221B2C;  /* stripe pattern second band */
  --teal:       #34B7AE;  /* status, links, send */
  --violet:     #8A4FC4;  /* primary action */
  --deep:       #5B2A86;  /* background wash only */
  --cream:      #F3E7C6;  /* text */
  --cream-warm: #F6EFDC;  /* text on violet */
  --on-teal:    #12100F;  /* text on teal */

  --c-68: rgba(243, 231, 198, .68);
  --c-60: rgba(243, 231, 198, .60);
  --c-50: rgba(243, 231, 198, .50);
  --c-45: rgba(243, 231, 198, .45);
  --c-35: rgba(243, 231, 198, .35);
  --line: rgba(243, 231, 198, .12);
  --line-2: rgba(243, 231, 198, .22);

  --sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: 44px;          /* section side padding */
  --maxw: 1240px;
  --r: 2px;             /* the whole system is 2px, not rounded */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
::selection { background: var(--violet); color: var(--cream-warm); }

h1, h2, h3 { font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }

/* ---------- layout primitives ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.rule    { border-top: 1px solid var(--line); }
.rule-b  { border-bottom: 1px solid var(--line); }
.sec { padding-block: 60px 68px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cream); color: var(--ink); padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 0; }

/* mono section label — "WHAT I DO", "SELECTED WORK" … */
.label {
  font: 500 11.5px/1.45 var(--mono); /* 1.45, not 1 — these wrap on narrow screens */
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-60);
}
.label-teal { color: var(--teal); }

.lead { font-size: 18px; line-height: 1.6; color: var(--c-68); text-wrap: pretty; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 700 14px/1 var(--sans);
  padding: 17px 26px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-violet { background: var(--violet); color: var(--cream-warm); }
.btn-violet:hover { background: #7A42B2; }
.btn-teal   { background: var(--teal); color: var(--on-teal); }
.btn-teal:hover { background: #2AA49B; }
.btn-cream  { background: var(--cream); color: var(--ink); font-size: 12px; padding: 12px 18px; }
.btn-cream:hover { background: #fff; }
.btn-ghost  { border-color: rgba(243,231,198,.3); color: var(--cream); font-weight: 600; padding: 16px 25px; }
.btn-ghost:hover { border-color: var(--cream); background: rgba(243,231,198,.06); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.arrow-link { font: 500 11px/1 var(--mono); color: var(--teal); letter-spacing: .04em; }
.arrow-link:hover { color: var(--cream); }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(22, 18, 27, .9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 20px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { width: 30px; height: 30px; border-radius: 6px; }
.brand span { font: 800 18px/1 var(--sans); letter-spacing: -.02em; color: var(--cream); }

.nav { display: flex; gap: 28px; }
/* :not(.btn) — otherwise these win on specificity and repaint the in-menu
   CTA with mono nav-link colours (cream text on a cream button). */
.nav a:not(.btn) {
  font: 500 11px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-68);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav a:not(.btn):hover { color: var(--cream); }
.nav a:not(.btn)[aria-current="page"] { color: var(--cream); border-bottom-color: var(--teal); }
/* the in-menu CTA is for the mobile drawer only; the header keeps its own */
.nav .btn { display: none; }

.hdr-end { display: flex; align-items: center; gap: 14px; }
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font: 400 10px/1 var(--mono); color: var(--c-50); white-space: nowrap;
}
.status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex: none;
}
.tz { font: 400 10px/1 var(--mono); color: var(--c-50); white-space: nowrap; }

.burger {
  display: none; width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line-2); background: none; border-radius: var(--r);
  align-items: center; justify-content: center; cursor: pointer;
}
.burger i { display: block; width: 16px; height: 1.5px; background: var(--cream); position: relative; }
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--cream);
  transition: transform .22s ease;
}
.burger i::before { top: -5px; } .burger i::after { top: 5px; }
.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i::after  { transform: translateY(-5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(90% 120% at 82% 30%, rgba(138,79,196,.35) 0%, rgba(52,183,174,.14) 42%, rgba(22,18,27,0) 72%);
}
.hero-in { max-width: var(--maxw); margin-inline: auto; padding: 82px var(--pad) 64px; position: relative; }
.hero-copy { position: relative; max-width: 660px; z-index: 2; }
.hero h1 {
  font-size: clamp(52px, 7.4vw, 96px);
  line-height: .9; letter-spacing: -.04em;
  margin-top: 28px;
}
.hero .lead { margin-top: 30px; max-width: 470px; }
.hero .btn-row { margin-top: 40px; }

/* The artwork: screen blend drops the dark plate it was drawn on,
   the radial mask feathers it into the water. */
.fish {
  position: absolute; right: 8px; top: 66px;
  width: 400px; height: 400px;
  opacity: .95;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- stats strip ---------- */
.stats {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat { padding: 24px 22px 28px; border-right: 1px solid var(--line); }
.stat:first-child { padding-left: var(--pad); }
.stat:last-child { padding-right: var(--pad); border-right: 0; }
.stat b { display: block; font: 700 28px/1 var(--sans); color: var(--cream); letter-spacing: -.02em; }
.stat.accent b { color: var(--teal); }
.stat span { display: block; font: 400 10.5px/1.5 var(--mono); color: var(--c-60); margin-top: 8px; }

/* ---------- hairline grid (services, process) ---------- */
.hair {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.hair-3 { grid-template-columns: repeat(3, 1fr); }
.hair-4 { grid-template-columns: repeat(4, 1fr); }
.cell { background: var(--panel); padding: 30px 26px 34px; }
.cell-n { font: 400 11px/1 var(--mono); margin-bottom: 18px; }
.cell h3 { font: 600 20px/1.25 var(--sans); letter-spacing: -.01em; color: var(--cream); }
.cell p { font-size: 13.5px; line-height: 1.65; color: var(--c-68); margin-top: 12px; }
.n-teal { color: var(--teal); } .n-violet { color: var(--violet); } .n-cream { color: var(--cream); }

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 30px;
}

/* ---------- work ---------- */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Fewer cards than three: keep them from stretching to a third of the row.
   Declared before the mobile query so that query still collapses to 1 column. */
.work-2 { grid-template-columns: repeat(2, 1fr); }
.work-item { display: flex; flex-direction: column; gap: 12px; }
.thumb {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, var(--panel) 0 16px, var(--panel-2) 16px 32px);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb span {
  font: 400 10px/1 var(--mono); color: rgba(243,231,198,.4);
  background: var(--panel); padding: 6px 9px;
}
.work-item h3 { font: 600 15px/1.3 var(--sans); letter-spacing: -.01em; color: var(--cream); }
.work-item p { font: 400 11px/1.4 var(--mono); color: var(--c-60); margin-top: 5px; }
/* A prose cell standing in for a card — must come after .work-item p to win. */
.work-note { justify-content: center; }
.work-note p { font: 400 14px/1.6 var(--sans); color: rgba(243,231,198,.7); margin-top: 0; }

/* ---------- about ---------- */
.split { display: grid; grid-template-columns: .85fr 1.15fr; }
.split > * { padding: 60px 40px 64px; }
.split > *:first-child { padding-left: var(--pad); border-right: 1px solid var(--line); }
.split > *:last-child  { padding-right: var(--pad); }
.wash-teal { background: radial-gradient(100% 70% at 10% 100%, rgba(52,183,174,.16) 0%, rgba(22,18,27,0) 70%); }

.facts { display: flex; flex-direction: column; gap: 18px; margin-top: 36px; font: 400 12px/1.5 var(--mono); color: rgba(243,231,198,.7); }
.facts dt { color: rgba(243,231,198,.4); }
.facts dd { margin: 0; }
.facts .teal { color: var(--teal); }

/* ---------- CTA band ---------- */
.band {
  border-top: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(91,42,134,.28) 0%, rgba(22,18,27,0) 60%);
}
.band-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 56px var(--pad) 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.band h2 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.05; }
.band p { font-size: 14.5px; line-height: 1.6; color: var(--c-68); margin-top: 12px; max-width: 46ch; }
.band-end { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.band-end small { font: 400 11px/1 var(--mono); color: var(--c-45); }

/* ---------- brief form ---------- */
.progress { height: 2px; background: var(--line); margin-bottom: 30px; }
.progress i { display: block; height: 2px; background: var(--violet); }

.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.f { display: block; }
.f > label, .f-legend {
  display: block;
  font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-50); margin-bottom: 9px;
}
.f input[type="text"], .f input[type="email"], .f textarea {
  width: 100%;
  background: var(--panel); border: 1px solid rgba(243,231,198,.16);
  border-radius: var(--r);
  padding: 14px;
  font: 400 14px/1.55 var(--sans); color: var(--cream);
  transition: border-color .18s ease;
}
.f textarea { min-height: 92px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: var(--c-35); }
.f input:focus, .f textarea:focus { border-color: var(--teal); }

fieldset { border: 0; padding: 0; margin: 0; }

/* chips — real radio/checkbox inputs, styled */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips label {
  display: inline-block; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 10px 14px;
  font: 600 12px/1 var(--sans); color: rgba(243,231,198,.7);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.chips label:hover { border-color: var(--cream); color: var(--cream); }
.chips input:checked + label {
  background: var(--cream); color: var(--ink); border-color: var(--cream); font-weight: 700;
}
.chips input:focus-visible + label { outline: 2px solid var(--teal); outline-offset: 3px; }

/* square variant used for timeline */
.chips.sq label { border-radius: var(--r); padding: 10px 12px; font-size: 11px; }
.chips.sq input:checked + label { background: var(--violet); color: var(--cream-warm); border-color: var(--violet); }

.f-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; flex-wrap: wrap; }
.f-foot small { font: 400 11px/1.5 var(--mono); color: var(--c-45); text-align: right; }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--line); background: var(--ink); }
.ftr-in { max-width: var(--maxw); margin-inline: auto; padding: 52px var(--pad) 28px; }
.ftr-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.ftr h4 { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-45); margin-bottom: 16px; font-weight: 500; }
.ftr ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ftr li a { font-size: 13px; color: var(--c-60); }
.ftr li a:hover { color: var(--teal); }
.ftr-brand p { font-size: 13px; line-height: 1.6; color: var(--c-50); margin-top: 14px; max-width: 34ch; }
.ftr-bot {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 400 11px/1.5 var(--mono); color: var(--c-45);
}

/* ---------- legal / long-form pages ---------- */
.page-head { padding: 64px var(--pad) 40px; max-width: var(--maxw); margin-inline: auto; }
.page-head h1 { font-size: clamp(38px, 5.4vw, 60px); margin-top: 22px; }
.page-head .lead { margin-top: 20px; max-width: 62ch; }
.page-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; font: 400 11px/1 var(--mono); color: var(--c-45); }
.page-meta strong { color: var(--cream); font-weight: 500; }

.doc {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--pad) 80px;
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start;
}
.toc { position: sticky; top: 92px; border-left: 1px solid var(--line); padding-left: 18px; }
.toc h2 { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-45); margin-bottom: 14px; font-weight: 500; }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.toc a { font-size: 12.5px; color: var(--c-50); }
.toc a:hover { color: var(--teal); }

.prose { max-width: 74ch; }
.prose section { padding-top: 44px; }
.prose section:first-child { padding-top: 0; }
.prose h2 {
  font: 800 clamp(22px, 2.6vw, 28px)/1.15 var(--sans); letter-spacing: -.025em;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.prose h3 { font: 600 16px/1.3 var(--sans); letter-spacing: -.01em; margin: 28px 0 10px; }
.prose p { font-size: 15px; line-height: 1.7; color: var(--c-68); margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.prose li { font-size: 15px; line-height: 1.65; color: var(--c-68); }
.prose li::marker { color: var(--teal); }
.prose a:not(.btn) { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--cream); font-weight: 600; }
.prose code {
  font: 400 .88em var(--mono); color: var(--teal);
  background: var(--panel); border: 1px solid var(--line); padding: 2px 6px; border-radius: var(--r);
}

.tbl { overflow-x: auto; border: 1px solid var(--line); margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; min-width: 520px; }
th, td { text-align: left; padding: 13px 16px; font-size: 13.5px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); background: rgba(243,231,198,.04); white-space: nowrap; }
td { color: var(--c-68); }
tr:last-child td { border-bottom: 0; }

.note { border-left: 2px solid var(--teal); background: rgba(52,183,174,.07); padding: 16px 20px; margin-bottom: 22px; }
.note.warn { border-left-color: var(--violet); background: rgba(138,79,196,.1); }
.note p:last-child { margin-bottom: 0; }

/* ---------- 404 ---------- */
.nf { min-height: 74vh; display: grid; place-items: center; text-align: center; padding: 80px var(--pad); }
.nf h1 { font-size: clamp(72px, 14vw, 150px); line-height: .85; letter-spacing: -.05em; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; }
  .split > *:first-child { border-right: 0; border-bottom: 1px solid var(--line); padding-right: var(--pad); }
  .split > *:last-child { padding-left: var(--pad); }
  .doc { grid-template-columns: 1fr; gap: 36px; }
  .toc { position: static; }
}

@media (max-width: 900px) {
  :root { --pad: 24px; }
  .burger { display: inline-flex; }
  .hdr-end .btn-cream, .hdr-end .status, .hdr-end .tz { display: none; }
  .nav {
    /* absolute against the sticky header, so the drawer always sits exactly
       below it whatever the header's measured height turns out to be */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 24px;
    transform: translateY(-110%); opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a:not(.btn) { padding: 15px 0; font-size: 12px; border-bottom: 1px solid var(--line); }
  .nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--line); color: var(--teal); }
  .nav .btn { display: inline-flex; margin-top: 18px; align-self: flex-start; }

  .hero-in { padding: 56px var(--pad) 60px; }
  .fish { position: static; width: min(300px, 74%); height: auto; margin: 0 0 -12px auto; opacity: .9; }
  .hero-copy { max-width: none; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 20px var(--pad) 24px; }
  .stat:nth-child(odd) { padding-left: var(--pad); }
  .stat:nth-child(even) { border-right: 0; padding-right: var(--pad); }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .hair-3, .hair-4, .work { grid-template-columns: 1fr; }
  .band-in { flex-direction: column; align-items: flex-start; }
  .band-end { align-items: flex-start; }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .f-row { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .ftr-grid { grid-template-columns: 1fr; }
  /* The four figures stay in a 2×2 here rather than stacking. Stacked, they
     cost most of a phone screen of scrolling to deliver four short numbers;
     the captions wrap to two lines in a pair instead, which is cheaper. */
  .stat b { font-size: 24px; }
  .stat span { font-size: 10px; }
}

@media (max-width: 360px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ==========================================================================
   AD SLOTS
   --------------------------------------------------------------------------
   Content pages only. The footprint is reserved here, before ads.js runs, so
   an ad filling in never pushes the article down — the slot is already that
   tall while the page is still blank.

   Google's placement policy allows exactly two labels, "Advertisement" or
   "Sponsored Links". The label is the hairline + mono treatment used for every
   other meta line on the site, so an ad reads as part of the page furniture
   rather than something bolted on.
   ========================================================================== */
.ad {
  margin: 44px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0 16px;
}
.ad::before {
  content: "Advertisement";
  display: block;
  font: 400 10px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-35);
  margin-bottom: 12px;
}
.ad-body {
  min-height: 280px;          /* 336×280 and 300×250 both fit without a jump */
  display: grid; place-items: center;
  overflow: hidden;
}
.ad-body .adsbygoogle { width: 100%; }

/* The wide slot under a grid, where a leaderboard fits. */
.ad-wide .ad-body { min-height: 90px; }

/* ?ads=preview — outline the reserved space so the layout can be judged
   before AdSense is switched on. Never visible to a real visitor. */
.ad[data-ad-state="preview"] .ad-body {
  border: 1px dashed var(--line-2);
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(243,231,198,.03) 10px 20px);
}
.ad[data-ad-state="preview"] .ad-body::after {
  content: "reserved ad space";
  font: 400 10px/1 var(--mono); letter-spacing: .1em; color: var(--c-35);
}

/* ==========================================================================
   PROJECT INDEX + PROJECT PAGES
   ========================================================================== */
.crumbs { display: flex; gap: 10px; align-items: center; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-35); }
.crumbs a { color: var(--c-50); }
.crumbs a:hover { color: var(--teal); }
.crumbs span::before { content: "/"; margin-right: 10px; color: var(--c-35); }

.projs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.proj {
  background: var(--panel);
  padding: 26px 26px 30px;
  display: flex; flex-direction: column; gap: 16px;
  transition: background .18s ease;
}
a.proj:hover { background: var(--panel-2); }
.proj .thumb { aspect-ratio: 16 / 10; }
.proj-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.proj h3 { font: 700 21px/1.2 var(--sans); letter-spacing: -.02em; color: var(--cream); }
.proj p { font-size: 13.5px; line-height: 1.65; color: var(--c-60); }
.proj-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 400 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-45); }

/* status pill — teal = live, violet = in progress, hairline = planned */
.pill { display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border: 1px solid var(--line-2); color: var(--c-50); border-radius: var(--r); white-space: nowrap; }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.pill-live { color: var(--teal); border-color: rgba(52,183,174,.4); }
.pill-beta { color: var(--violet); border-color: rgba(138,79,196,.45); }

/* the "more coming" tile — a prose cell standing in for a card */
.proj-empty { background: var(--panel); padding: 26px; display: grid; align-content: center; gap: 14px; }
.proj-empty p { font-size: 14px; line-height: 1.65; color: var(--c-60); }

/* key/value strip at the top of a project page */
.kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 34px; }
.kv > div { background: var(--panel); padding: 18px 20px 20px; }
.kv dt { font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-35); }
.kv dd { margin: 10px 0 0; font: 500 13px/1.4 var(--sans); color: var(--cream); }

/* screenshot row on a project page */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 6px; }
.shots .thumb { aspect-ratio: 9 / 16; }

/* ==========================================================================
   NOTES (writing)
   ========================================================================== */
.notes { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.note-row {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 28px; align-items: baseline;
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
  transition: background .18s ease;
}
.note-row:hover { background: rgba(243,231,198,.03); }
.note-row time, .note-row .rt { font: 400 10px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-35); }
.note-row h3 { font: 700 20px/1.3 var(--sans); letter-spacing: -.02em; color: var(--cream); }
.note-row p { font-size: 13.5px; line-height: 1.6; color: var(--c-60); margin-top: 8px; max-width: 62ch; }
.note-row:hover h3 { color: var(--teal); }

/* byline under an article title */
.byline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-45); }
.byline strong { color: var(--c-60); font-weight: 500; }

@media (max-width: 900px) {
  .projs, .kv { grid-template-columns: 1fr; }
  .shots { grid-template-columns: repeat(2, 1fr); }
  .kv > div { padding: 16px 20px 18px; }
  .note-row { grid-template-columns: 1fr; gap: 8px; }
  .note-row .rt { order: 3; }
  .ad { margin: 32px 0; }
  .ad-body { min-height: 250px; }   /* 300×250 is the mobile workhorse */
}

/* ---------- code blocks (notes) ----------
   A <pre><code> pair would otherwise inherit the inline-code chip treatment —
   teal text in a bordered pill — which falls apart over several lines. Reset
   the inner <code> and let the <pre> carry the panel. */
.prose pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--violet);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 20px;
  overflow-x: auto;
}
.prose pre code {
  background: none; border: 0; padding: 0; border-radius: 0;
  font: 400 12.5px/1.7 var(--mono);
  color: var(--c-68);
  white-space: pre;
}

/* inline <code> outside .prose — project cards, notes list */
code {
  font: 400 .88em var(--mono); color: var(--teal);
}

/* ==========================================================================
   MOTION
   --------------------------------------------------------------------------
   Two rules only, and both are opt-in enhancements: the hero settles on load,
   and sections lift as they enter the viewport. The scroll-linked half rides
   on `animation-timeline: view()`, which needs no JavaScript and no observer —
   where it is unsupported the @supports block never applies and everything is
   simply visible from the start. That failure mode is the important part: no
   script on this site is allowed to be the reason content cannot be read.
   ========================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes surface { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: .95; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: settle .75s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-copy > *:nth-child(1) { animation-delay: .04s; }
  .hero-copy > *:nth-child(2) { animation-delay: .12s; }
  .hero-copy > *:nth-child(3) { animation-delay: .20s; }
  .hero-copy > *:nth-child(4) { animation-delay: .28s; }
  .fish { animation: surface 1.1s cubic-bezier(.16, 1, .3, 1) both; }

  @supports (animation-timeline: view()) {
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 4% cover 24%; }
    /* Staggering inside a grid: each cell enters a beat after the one before. */
    .rise-stagger > * { animation: rise linear both; animation-timeline: view(); }
    .rise-stagger > *:nth-child(1) { animation-range: entry 2% cover 20%; }
    .rise-stagger > *:nth-child(2) { animation-range: entry 5% cover 23%; }
    .rise-stagger > *:nth-child(3) { animation-range: entry 8% cover 26%; }
    .rise-stagger > *:nth-child(4) { animation-range: entry 11% cover 29%; }
  }
}

/* ==========================================================================
   ARTWORK TILES
   --------------------------------------------------------------------------
   .thumb keeps its striped placeholder for slots that are genuinely waiting on
   a screenshot. .thumb-art is the opposite: a finished tile that holds a piece
   of drawn artwork over the deep-water wash, used where a real screenshot does
   not exist and a striped box would read as an unfinished site.
   ========================================================================== */
.thumb-art {
  position: relative;
  background:
    radial-gradient(120% 120% at 78% 18%, rgba(138, 79, 196, .30) 0%, rgba(52, 183, 174, .12) 46%, rgba(22, 18, 27, 0) 76%),
    var(--panel);
  display: block;
  overflow: hidden;
}
.thumb-art svg { width: 100%; height: 100%; display: block; }
.thumb-art::after {
  /* a hairline vignette, so the tile has an edge without a second border */
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(243, 231, 198, .06);
  pointer-events: none;
}
.work-item .thumb, .work-item .thumb-art, .proj .thumb, .proj .thumb-art { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.work-item:hover .thumb-art, a.proj:hover .thumb-art { transform: translateY(-3px); }
.work-item:hover h3 { color: var(--teal); }

/* the tan pieces themselves — filled from the palette, never two accents deep */
.tan-teal   { fill: var(--teal); }
.tan-violet { fill: var(--violet); }
.tan-cream  { fill: var(--cream); }
.tan-line   { fill: none; stroke: rgba(243, 231, 198, .22); stroke-width: .06; }

/* ==========================================================================
   DEVICE FRAME
   --------------------------------------------------------------------------
   A phone-shaped holder for real screenshots. Drop an <img> inside and it is
   cropped to the screen; leave it empty and the frame states plainly that the
   shot is still to come, rather than pretending otherwise.
   ========================================================================== */
.devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 30px 0 8px; }
.device {
  position: relative;
  aspect-ratio: 9 / 19.5;
  padding: 7px;
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(243, 231, 198, .10) 0%, rgba(243, 231, 198, .02) 38%, rgba(22, 18, 27, 0) 70%), var(--panel);
}
.device-screen {
  width: 100%; height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  display: grid; place-items: center;
}
.device-screen img { width: 100%; height: 100%; object-fit: cover; }
.device-screen span {
  font: 400 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-35); text-align: center; padding: 0 14px;
}
.device::before {
  /* the speaker slot — the one detail that makes the frame read as a phone */
  content: ""; position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 4px; border-radius: 3px;
  background: rgba(22, 18, 27, .9);
  z-index: 2;
}
.device-cap { margin-top: 12px; font: 400 10px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-50); }

/* ==========================================================================
   ENGAGEMENT — the shapes of work, and what they cost
   ========================================================================== */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tier { background: var(--panel); padding: 32px 28px 34px; display: flex; flex-direction: column; }
.tier-lead { background: radial-gradient(120% 90% at 90% 0%, rgba(138, 79, 196, .16) 0%, rgba(28, 23, 36, 0) 62%), var(--panel); }
.tier h3 { font: 700 24px/1.15 var(--sans); letter-spacing: -.025em; color: var(--cream); margin-top: 16px; }
.tier > p { font-size: 13.5px; line-height: 1.65; color: var(--c-60); margin-top: 12px; }
.tier-price {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  font: 700 26px/1 var(--sans); letter-spacing: -.02em; color: var(--cream);
}
.tier-price small { display: block; margin-top: 9px; font: 400 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-45); }
.tier-lead .tier-price { color: var(--teal); }
.incl { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 11px; }
.incl li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--c-68); }
.incl li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 1px; background: var(--teal); }
.incl li.out { color: var(--c-35); }
.incl li.out::before { background: var(--c-35); }
/* The foot takes the slack, not the button — otherwise a longer .incl list in
   one tier pushes its call to action out of line with the other two. */
.tier-foot { margin-top: auto; padding-top: 26px; }

/* ==========================================================================
   CASE STUDY
   --------------------------------------------------------------------------
   .pull is the one place a sentence is allowed to be large on its own.
   .decisions is a numbered argument: the call, then why it went that way.
   ========================================================================== */
.pull {
  margin: 40px 0;
  padding: 6px 0 6px 26px;
  border-left: 2px solid var(--violet);
  font: 600 clamp(19px, 2.3vw, 25px)/1.35 var(--sans);
  letter-spacing: -.02em;
  color: var(--cream);
  text-wrap: balance;
}
.pull cite { display: block; margin-top: 14px; font: 400 10px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-45); font-style: normal; }

.decisions { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 26px 0 20px; }
.decision { background: var(--panel); padding: 24px 26px 28px; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 20px; }
.decision-n { font: 400 11px/1.6 var(--mono); letter-spacing: .12em; color: var(--teal); }
.decision h3 { font: 600 17px/1.3 var(--sans); letter-spacing: -.015em; color: var(--cream); margin: 0 0 10px; }
.decision p { font-size: 13.5px; line-height: 1.7; color: var(--c-60); margin: 0; }
.decision p + p { margin-top: 10px; }

/* ==========================================================================
   CRAFT PASS — small refinements that only register in aggregate
   ========================================================================== */
/* Arrow links move their arrow, not the whole label. */
.arrow-link { display: inline-flex; align-items: center; gap: 7px; }
.arrow-link::after { content: "→"; transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.arrow-link:hover::after { transform: translateX(4px); }

/* Nav links get a rule that grows from the left rather than blinking on. */
.nav a:not(.btn) { position: relative; border-bottom-color: transparent; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--teal); transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(.16, 1, .3, 1);
}
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }

/* Cards lift a hair off the hairline grid on hover. */
.cell { transition: background .2s ease; }
.hair a.cell:hover, .cell:hover { background: var(--panel-2); }

/* Buttons: a softer, more expensive press than a flat colour swap. */
.btn { position: relative; overflow: hidden; }
.btn-violet:hover, .btn-teal:hover { transform: translateY(-1px); }
.btn-violet, .btn-teal { box-shadow: 0 1px 0 rgba(22, 18, 27, .25); }

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; }
  .devices { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .decision { grid-template-columns: 1fr; gap: 10px; }
  .pull { padding-left: 18px; margin: 30px 0; }
}

/* ==========================================================================
   HIERARCHY PASS
   --------------------------------------------------------------------------
   The page used to run one layout six times over: a mono label, a link, and a
   row of equal bordered boxes. Everything carried the same weight, so nothing
   read as important. These three components split the page into three tiers.

     .feature  — tier 1. The work. One thing, large, in colour.
     .cols     — tier 2. Services, as open editorial columns, not cards.
     .track    — tier 3. Process, as a timeline; a line states sequence far
                 better than four boxes of equal size ever did.

   The old .hair / .cell grid is deliberately left in place: the studio block
   and the other pages still use it, and it is right for those.
   ========================================================================== */

/* ---------- tier 1: the feature ---------- */
.feature {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(70% 90% at 74% 8%, rgba(138, 79, 196, .22) 0%, rgba(22, 18, 27, 0) 68%),
    radial-gradient(60% 80% at 6% 96%, rgba(52, 183, 174, .13) 0%, rgba(22, 18, 27, 0) 70%);
}
.feature-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 64px var(--pad) 72px;
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 72px; align-items: center;
}
.feature-copy h2 {
  font-size: clamp(34px, 4.6vw, 52px);
  letter-spacing: -.035em;
  margin-top: 22px;
  text-wrap: balance;
}
.feature-copy .lead { margin-top: 22px; max-width: 52ch; }

/* The meta line: platform, year, role — mono, so it reads as a spec, not prose. */
.feature-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font: 400 11px/1.5 var(--mono); color: var(--c-60);
}
.feature-meta b { color: var(--cream); font-weight: 400; }
.feature-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }

/* The frame is the largest object on the page after the headline, so it gets a
   deeper radius and a cast shadow the small .device grid does not need. */
.device-xl {
  border-radius: 34px; padding: 9px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), 0 2px 0 rgba(243, 231, 198, .05);
}
.device-xl .device-screen { border-radius: 26px; }
.device-xl::before { top: 19px; width: 30%; }
.feature-art { position: relative; }
.feature-art .device { margin-inline: auto; max-width: 300px; }

/* ---------- tier 2: open columns ---------- */
.cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  margin-top: 30px;
}
.col { padding: 32px 34px 4px 0; border-right: 1px solid var(--line); }
.col + .col { padding-left: 34px; }
.col:last-child { border-right: 0; padding-right: 0; }
/* The number is the only place the palette gets to be loud at this size. */
.col-n { font: 800 40px/1 var(--sans); letter-spacing: -.04em; }
.col h3 { font: 600 20px/1.25 var(--sans); letter-spacing: -.015em; color: var(--cream); margin-top: 18px; }
.col p { font-size: 13.5px; line-height: 1.7; color: var(--c-68); margin-top: 12px; }

/* ---------- tier 3: the timeline ---------- */
.track {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative; margin-top: 38px;
}
/* The rule runs behind the dots and stops at the last one rather than the edge. */
.track::before {
  content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--violet) 62%, var(--line) 100%);
  opacity: .5;
}
.step { position: relative; padding: 26px 30px 0 0; }
.step::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 5px var(--ink);
}
.step:nth-child(3)::before { background: var(--violet); }
.step:nth-child(4)::before { background: var(--cream); }
.step-w { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-60); }
.step h3 { font: 600 18px/1.25 var(--sans); letter-spacing: -.015em; color: var(--cream); margin-top: 14px; }
.step p { font-size: 13px; line-height: 1.7; color: var(--c-68); margin-top: 10px; }

/* ---------- the CTA band, given an edge ----------
   The old 90deg wash faded violet into the page background and read as dirt
   rather than colour. Containing it in a panel with a defined top rule lets
   the same violet read as deliberate. */
.band {
  border-top: 1px solid var(--line-2);
  background:
    radial-gradient(80% 180% at 12% 0%, rgba(138, 79, 196, .30) 0%, rgba(22, 18, 27, 0) 62%),
    var(--panel);
}
.band h2 { letter-spacing: -.03em; }

@media (max-width: 1080px) {
  .feature-in { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; }
}

@media (max-width: 900px) {
  .feature-in {
    grid-template-columns: 1fr; gap: 44px;
    padding-block: 48px 56px;
  }
  /* Copy first on a phone: the frame is the reward, not the entry point. */
  .feature-art { order: 2; }
  .feature-copy { order: 1; }
  .feature-art .device { max-width: 232px; }

  /* Label and its side link stop competing for one line and stack instead —
     on a phone they were each wrapping to two lines side by side. */
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }

  .cols { grid-template-columns: 1fr; }
  .col { padding: 26px 0 26px; border-right: 0; border-bottom: 1px solid var(--line); }
  .col + .col { padding-left: 0; }
  .col:last-child { border-bottom: 0; }

  .track { grid-template-columns: 1fr; margin-top: 30px; }
  /* Vertical run: the rule turns into the left spine the dots sit on. */
  .track::before { top: 4px; bottom: 4px; left: 4px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, var(--teal) 0%, var(--violet) 62%, var(--line) 100%); }
  .step { padding: 0 0 30px 28px; }
  .step:last-child { padding-bottom: 0; }
  .step::before { top: 0; left: 0; }
  .step h3 { margin-top: 10px; }
}

/* ==========================================================================
   DRAWN UI — the Tagot screen inside the feature frame
   --------------------------------------------------------------------------
   There is no product screenshot yet, and a striped placeholder on the one
   tile that has to sell the studio is worse than no tile at all. So the screen
   is drawn: a real layout, at real proportions, in the studio's own palette.
   Replace the whole <svg> with an <img> the day a capture exists — nothing
   else in the feature depends on it.

   Every value comes from the palette, so the screen stays in step with the
   rest of the site if the tokens ever move.
   ========================================================================== */
.ui-bg      { fill: var(--ink); }
.ui-panel   { fill: var(--panel); }
.ui-panel-2 { fill: var(--panel-2); }
.ui-cream   { fill: var(--cream); }
.ui-dim     { fill: var(--cream); opacity: .45; }
.ui-faint   { fill: var(--cream); opacity: .16; }
.ui-teal    { fill: var(--teal); }
.ui-violet  { fill: var(--violet); }
.ui-hair    { fill: none; stroke: var(--cream); stroke-opacity: .14; stroke-width: 1; }
/* The unsolved outline: dashed, so it reads as a target rather than a shape. */
.ui-target  { fill: none; stroke: var(--cream); stroke-opacity: .28; stroke-width: 1.25; stroke-dasharray: 4 4; }
.ui-guide   { fill: none; stroke: var(--cream); stroke-opacity: .10; stroke-width: 1; }
.ui-label   { font: 500 9px/1 var(--mono); letter-spacing: .12em; fill: var(--cream); fill-opacity: .5; }
.ui-time    { font: 600 12px/1 var(--sans); fill: var(--cream); }
.ui-title   { font: 800 25px/1 var(--sans); letter-spacing: -.03em; fill: var(--cream); }
.ui-count   { font: 500 10px/1 var(--mono); fill: var(--teal); }
.ui-btn-t   { font: 700 11px/1 var(--sans); fill: var(--on-teal); }
.ui-meta    { font: 400 9.5px/1 var(--mono); fill: var(--cream); fill-opacity: .55; }