/* ============================================================
   style.css — Boxie
   Colour lives entirely in the tokens below. Changing the palette
   is an edit to this block and nothing else.

   PALETTE: Teal (unchanged). Swap for another by replacing the values in
   :root — alternatives are listed at the bottom of this file.
   ============================================================ */

:root {
  --bg:         #0a0e0f;
  --bg-2:       #0e1415;
  --bg-raised:  #121a1b;
  --bg-hover:   #182223;
  --border:     #273435;
  --border-lit: #364749;

  --text:       #f1f5f3;
  --text-dim:   #b5c2bf;
  --text-faint: #94a49f;

  --accent:     #70e0be;
  --accent-2:   #84bdf5;
  --accent-dim: #357965;
  --accent-glow: rgba(112, 224, 190, 0.14);
  --on-accent: #04201c;          /* text on an accent-filled button */

  --max-width: 1160px;
  --measure: 760px;
  --gutter: 22px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, monospace;

  --radius: 16px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:         #fcfcfb;
    --bg-2:       #f6f6f4;
    --bg-raised:  #ffffff;
    --bg-hover:   #fafaf9;
    --border:     #e5e5e1;
    --border-lit: #d4d4cf;

    --text:       #14171a;
    --text-dim:   #525a66;
    --text-faint: #6c737f;

    --accent:     #0c7566;
    --accent-2:   #0369a1;
    --accent-dim: #9fdbd2;
    --accent-glow: rgba(12, 117, 102, 0.08);
    --on-accent: #ffffff;        /* light mode accents are dark, so text flips */
  }
}

/* The same light values again, applied when the visitor picks light by hand.
   The block above only fires when the operating system is set to light, so
   without this the toggle would do nothing on a dark machine. */
:root[data-theme="light"] {
  --bg:         #fcfcfb;
  --bg-2:       #f6f6f4;
  --bg-raised:  #ffffff;
  --bg-hover:   #fafaf9;
  --border:     #e5e5e1;
  --border-lit: #d4d4cf;

  --text:       #14171a;
  --text-dim:   #525a66;
  --text-faint: #6c737f;

  --accent:     #0c7566;
  --accent-2:   #0369a1;
  --accent-dim: #9fdbd2;
  --accent-glow: rgba(12, 117, 102, 0.08);
  --on-accent: #ffffff;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A soft glow behind the hero, and a faint grid over the whole page.
   Both are decoration only and sit behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70rem 40rem at 18% -10%, var(--accent-glow), transparent 60%),
    radial-gradient(50rem 30rem at 95% 8%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 60%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.25;
  mask-image: radial-gradient(60rem 40rem at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(60rem 40rem at 50% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Top menu ---------------------------------------------- */

.topnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.topnav.stuck { border-bottom-color: var(--border); }

.navinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 650;
  font-size: 1.02rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex: none;
}

.brand::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px var(--accent-glow);
}

.navlinks {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.navlinks::-webkit-scrollbar { display: none; }

.navlinks a {
  position: relative;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.88rem;
  white-space: nowrap;
  padding: 0.3rem 0;
  transition: color 0.18s ease;
}

.navlinks a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.navlinks a:hover { color: var(--text); }
.navlinks a.on { color: var(--text); }
.navlinks a.on::after { transform: scaleX(1); }

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

.hero { padding: 16vh 0 9vh; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border-lit);
  background: var(--bg-raised);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  margin-bottom: 1.6rem;
}

.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.hero h1 {
  margin: 0;
  font-size: clamp(3rem, 11vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  background: linear-gradient(170deg, var(--text) 35%, var(--text-faint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .tagline {
  margin: 1.4rem 0 0;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  color: var(--text-dim);
  font-weight: 400;
  max-width: 30ch;
  line-height: 1.45;
}

.rule { display: none; }

/* Stat row */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.8rem;
  margin-top: 3.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--border);
  max-width: 620px;
}

.stat-num {
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}

.stat-label {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: 0.15rem;
}

/* Buttons */
.ctarow { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.6rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border-lit);
  color: var(--text);
  background: var(--bg-raised);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.btn:hover { transform: translateY(-2px); border-color: var(--accent-dim); background: var(--bg-hover); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 600;
}

.btn-primary:hover { background: linear-gradient(135deg, var(--accent), var(--accent-2)); opacity: 0.92; }

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

section { padding: 0 0 7rem; }

h2 {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 2.4rem;
  text-transform: none;
  border: none;
  padding: 0;
}

h2::before {
  content: attr(data-num);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.about p {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: var(--measure);
}

.about strong, .about b { color: var(--text); font-weight: 600; }

/* ---- Capability cards --------------------------------------- */

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
}

.cap {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

.cap:hover {
  border-color: var(--border-lit);
  background: var(--bg-hover);
  transform: translateY(-3px);
}

.cap-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent-glow), transparent);
  border: 1px solid var(--border-lit);
  margin-bottom: 1rem;
  color: var(--accent);
}

.cap-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.cap h3 {
  margin: 0 0 0.9rem;
  font-size: 1.02rem;
  font-weight: 620;
  letter-spacing: -0.015em;
  color: var(--text);
}

.cap ul { margin: 0; padding: 0; list-style: none; }

.cap li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--text-dim);
  font-size: 0.925rem;
  line-height: 1.55;
  margin-bottom: 0.5rem;
}

.cap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid var(--accent-dim);
}

/* ---- Projects ----------------------------------------------- */

.feature {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2), transparent 65%) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: transform 0.22s ease;
}

.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(30rem 16rem at 88% 0%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}

a.feature:hover { transform: translateY(-3px); }

.feature-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.feature h3 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.3rem, 3.2vw, 1.75rem);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.feature p {
  margin: 0;
  color: var(--text-dim);
  font-size: 1.02rem;
  max-width: 54ch;
}

.feature-go {
  display: inline-block;
  margin-top: 1.3rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
}

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
}

.card {
  display: block;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

a.card:hover {
  border-color: var(--border-lit);
  background: var(--bg-hover);
  transform: translateY(-3px);
}

a.card:hover h3 { color: var(--accent); }

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 620;
  letter-spacing: -0.015em;
  transition: color 0.18s ease;
}

.card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.93rem;
  line-height: 1.6;
}

.chips { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  border: 1px solid var(--border);
  background: var(--bg-2);
  border-radius: 5px;
  padding: 0.18rem 0.5rem;
}

/* ---- Guides listing ----------------------------------------- */

.postlist { display: flex; flex-direction: column; gap: 0.6rem; }

.postrow {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.postrow:hover {
  border-color: var(--border-lit);
  background: var(--bg-hover);
  transform: translateX(4px);
}
.postrow:hover h3 { color: var(--accent); }

.postrow time {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.postrow h3 {
  margin: 0.35rem 0 0.3rem;
  font-size: 1.08rem;
  font-weight: 620;
  letter-spacing: -0.02em;
  transition: color 0.18s ease;
}

.postrow p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.93rem;
  max-width: 68ch;
  line-height: 1.6;
}

.morelink {
  display: inline-block;
  margin-top: 1.4rem;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.morelink:hover { text-decoration: underline; }

/* ---- Experience timeline ------------------------------------ */

.timeline { border-left: 1px solid var(--border); padding-left: 1.8rem; }

.entry { position: relative; padding-bottom: 2.4rem; }
.entry:last-child { padding-bottom: 0; }

.entry::before {
  content: "";
  position: absolute;
  left: calc(-1.8rem - 4.5px);
  top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--accent-glow);
}

.entry .period {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.entry h3 {
  margin: 0.3rem 0 0.15rem;
  font-size: 1.1rem;
  font-weight: 620;
  letter-spacing: -0.02em;
}

.entry .org { color: var(--text-faint); font-size: 0.9rem; }

.entry p {
  margin: 0.55rem 0 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: var(--measure);
  line-height: 1.65;
}

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

footer {
  border-top: 1px solid var(--border);
  padding: 3rem 0 4.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: baseline;
  justify-content: space-between;
}

footer .links { display: flex; flex-wrap: wrap; gap: 1.6rem; }

footer a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.93rem;
  transition: color 0.15s ease;
}

footer a:hover { color: var(--accent); }

footer .sig {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--text-faint);
}

/* ---- Reveal on scroll --------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cap:hover, a.card:hover, a.feature:hover, .btn:hover, .postrow:hover { transform: none; }
}

/* ---- Project page ------------------------------------------- */

.back {
  display: inline-block;
  margin-top: 2rem;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
}
.back:hover { color: var(--accent); }

.proj-hero { padding: 7vh 0 6vh; }
.proj-hero h1 { font-size: clamp(2.1rem, 6.5vw, 3.4rem); }
.proj-hero .chips { margin-top: 1.7rem; }

/* ---- Gallery ------------------------------------------------ */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
}

.shot {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-raised);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.shot:hover { border-color: var(--accent-dim); transform: translateY(-2px); }

.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Lightbox ----------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }

.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; }

.lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  opacity: 0.6;
  cursor: pointer;
  font-size: 2.6rem;
  line-height: 1;
  padding: 0.6rem 1rem;
  transition: opacity 0.15s ease;
}
.lightbox button:hover { opacity: 1; }

.lb-close { top: 0.6rem; right: 1rem; font-size: 2.2rem; }
.lb-prev  { left: 0.2rem; }
.lb-next  { right: 0.2rem; }

.lb-count {
  position: absolute;
  bottom: 1.3rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---- Prev / next -------------------------------------------- */

.projnav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.7rem;
  margin-bottom: 4rem;
}

.projnav a { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; }
.projnav a:hover { color: var(--accent); }

/* ---- Article ------------------------------------------------ */

.article { padding-bottom: 5rem; max-width: 760px; }

.arthead {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}

.arthead time {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.arthead h1 {
  margin: 0.7rem 0 1rem;
  font-size: clamp(1.9rem, 5.5vw, 2.8rem);
  font-weight: 680;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.scriptdl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: opacity 0.15s ease, transform 0.18s ease;
}
.scriptdl:hover { opacity: 0.92; transform: translateY(-2px); }

.article h2 {
  display: block;
  font-size: 1.32rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 2.9rem 0 0.9rem;
}
.article h2::before { content: none; }

.article h3 { font-size: 1.1rem; margin: 2.1rem 0 0.7rem; font-weight: 620; }

.article p {
  color: var(--text-dim);
  font-size: 1.04rem;
  line-height: 1.78;
  margin: 0 0 1.15rem;
}

.article ul { color: var(--text-dim); padding-left: 1.2rem; margin: 0 0 1.3rem; }
.article li { margin-bottom: 0.5rem; font-size: 1.02rem; line-height: 1.7; }
.article li::marker { color: var(--accent-dim); }

.article a { color: var(--accent); }

.article code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.12em 0.36em;
  color: var(--accent);
}

.article hr { border: none; border-top: 1px solid var(--border); margin: 2.6rem 0; }
.article strong { color: var(--text); font-weight: 600; }

/* ---- Code blocks -------------------------------------------- */

.codeblock {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  margin: 0 0 1.5rem;
  overflow: hidden;
}

.codeblock::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.6rem;
  left: 1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

.codeblock pre { margin: 0; padding: 2.5rem 1.1rem 1.1rem; overflow-x: auto; }

.codeblock code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.855rem;
  line-height: 1.65;
  color: var(--text);
  white-space: pre;
}

.codeblock .copy {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0.24rem 0.6rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.codeblock .copy:hover { color: var(--accent); border-color: var(--accent-dim); }

/* ---- Narrow ------------------------------------------------- */

@media (max-width: 767px) {
  .navinner { height: 3.4rem; gap: 1rem; }
  .navlinks { gap: 1.2rem; }
  .hero { padding: 11vh 0 6vh; }
  section { padding-bottom: 4.5rem; }
  h2 { font-size: 1.35rem; margin-bottom: 1.8rem; }
  .stats { gap: 1.8rem; margin-top: 2.4rem; }
  .stat-num { font-size: 1.6rem; }
  .feature { padding: 1.4rem; }
  .cap { padding: 1.3rem 1.2rem; }
  .postrow { padding: 1.1rem 1.2rem; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
  .lightbox button { font-size: 2rem; }
  body::after { background-size: 44px 44px; }
}

/* ---- Feed row meta (kind badge + date) ---------------------- */

.rowmeta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.15rem;
}

.kind {
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.16rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--border-lit);
  color: var(--text-faint);
}

.kind-project { color: var(--accent); border-color: var(--accent-dim); }
.kind-guide   { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); }

/* Cover photo, when the featured project has one */
.feature-cover {
  margin: -2rem -2rem 1.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-2);
}

.feature-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

a.feature:hover .feature-cover img { transform: scale(1.03); opacity: 1; }

@media (max-width: 767px) {
  .feature-cover { margin: -1.4rem -1.4rem 1.1rem; }
}

/* ---- Latest: uniform card grid ------------------------------
   Every item is the same size. The newest is marked with an accent edge
   rather than made larger, which is what left dead space before. */

.latest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.latest-grid > * { margin: 0; }

/* Feature card sits in one cell like the rest */
.latest-grid .feature {
  height: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.latest-grid .feature h3 { font-size: 1.22rem; }
.latest-grid .feature p { font-size: 0.95rem; max-width: none; }
.latest-grid .feature .feature-go { margin-top: auto; padding-top: 1.2rem; }

.latest-grid .feature .chips { margin-top: 0.9rem; }

/* Rows become cards, matching the feature's shape */
.latest-grid .postrow {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.latest-grid .postrow h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.latest-grid .postrow p { font-size: 0.92rem; }
.latest-grid .postrow:hover { transform: translateY(-3px); }

/* Cover photo sits flush to the card edges */
.latest-grid .feature-cover { margin: -1.5rem -1.5rem 1.2rem; }

@media (max-width: 660px) {
  .latest-grid .feature,
  .latest-grid .postrow { padding: 1.25rem; }
  .latest-grid .feature-cover { margin: -1.25rem -1.25rem 1rem; }
}

/* h2 outside the numbered home-page sections (project pages, guides) has no
   data-num, which left an empty pseudo-element and a phantom indent. */
h2:not([data-num])::before { content: none; }

/* On narrow screens the menu scrolls sideways. A fade at the right edge is
   the only hint that there is more of it - without it the last items look
   cut off rather than scrollable. */
@media (max-width: 767px) {
  .navinner {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
}

/* ============================================================
   Readability pass
   Body copy was rendering at 14.8-15.2px inside cards, and the muted
   tokens measured 3.65:1 against the background - below the 4.5:1 needed
   at those sizes. Sizes up, spacing up, decoration down.
   ============================================================ */

body { font-size: 17px; line-height: 1.7; }

/* Calmer backdrop: the grid was competing with the text over it. */
body::after { opacity: 0.14; background-size: 72px 72px; }

/* --- Headings --------------------------------------------- */

h2 { font-size: 1.75rem; margin-bottom: 2.6rem; }
h2::before { font-size: 0.8rem; }

.cap h3, .card h3, .postrow h3 { font-size: 1.08rem; line-height: 1.4; }

/* --- Body copy -------------------------------------------- */

.about p { font-size: 1.16rem; line-height: 1.75; max-width: 68ch; }

.cap li {
  font-size: 0.99rem;
  line-height: 1.6;
  margin-bottom: 0.62rem;
  padding-left: 1.25rem;
}
.cap li::before { top: 0.66em; }

.cap { padding: 1.7rem 1.6rem; }
.cap h3 { margin-bottom: 1.05rem; }

.card p, .postrow p, .feature p { font-size: 0.99rem; line-height: 1.65; }
.latest-grid .postrow p, .latest-grid .feature p { font-size: 0.97rem; }

.entry p { font-size: 1.02rem; line-height: 1.7; }

/* --- Small text: bigger, and now above 4.5:1 -------------- */

.chip { font-size: 0.76rem; padding: 0.22rem 0.56rem; }
.postrow time, .entry .period, .arthead time { font-size: 0.8rem; }
.stat-label { font-size: 0.88rem; }
.feature-label { font-size: 0.72rem; letter-spacing: 0.13em; }
.kind { font-size: 0.68rem; }
.navlinks a { font-size: 0.92rem; }
.eyebrow { font-size: 0.75rem; }

/* --- Articles: the pages people actually read ------------- */

.article { max-width: 720px; }
.article p { font-size: 1.09rem; line-height: 1.8; margin-bottom: 1.3rem; }
.article li { font-size: 1.07rem; line-height: 1.75; margin-bottom: 0.6rem; }
.article h2 { font-size: 1.42rem; margin: 3.2rem 0 1rem; }
.article h3 { font-size: 1.15rem; }
.codeblock code { font-size: 0.9rem; line-height: 1.7; }

/* --- Rhythm ------------------------------------------------ */

section { padding-bottom: 7.5rem; }
.hero .tagline { font-size: clamp(1.15rem, 2.5vw, 1.5rem); max-width: 32ch; }

@media (max-width: 767px) {
  body { font-size: 16.5px; }
  h2 { font-size: 1.42rem; margin-bottom: 1.9rem; }
  section { padding-bottom: 4.75rem; }
  .about p { font-size: 1.08rem; }
  .article p { font-size: 1.05rem; }
}

/* ---- Guide steps -------------------------------------------- */

.article h2.step {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 3.4rem 0 1.1rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--border);
}

.article h2.step:first-of-type { border-top: none; padding-top: 0; margin-top: 2.2rem; }

.stepnum {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---- Callout ------------------------------------------------ */

.note {
  border-left: 2px solid var(--accent-dim);
  background: var(--bg-raised);
  border-radius: 0 10px 10px 0;
  padding: 0.95rem 1.2rem;
  margin: 0 0 1.4rem;
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.7;
}

.note strong { color: var(--text); }
.note code { font-size: 0.85em; }

/* ---- Table of contents -------------------------------------- */

.toc {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  margin: 0 0 2.6rem;
}

.toc-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-faint);
  margin-bottom: 0.8rem;
}

.toc ol { margin: 0; padding-left: 1.3rem; }
.toc li { margin-bottom: 0.4rem; font-size: 0.96rem; }
.toc li::marker { color: var(--accent); font-family: var(--mono); font-size: 0.85rem; }
.toc a { color: var(--text-dim); text-decoration: none; }
.toc a:hover { color: var(--accent); }

/* ============================================================
   Editorial refresh
   Shared surfaces for the portfolio and a focused reading system
   for the long-form guides.
   ============================================================ */

body::before {
  background:
    radial-gradient(64rem 36rem at 12% -8%, var(--accent-glow), transparent 66%),
    radial-gradient(48rem 30rem at 100% 12%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 66%);
}

body::after {
  opacity: 0.1;
  background-size: 80px 80px;
  mask-image: radial-gradient(68rem 42rem at 50% 0%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(68rem 42rem at 50% 0%, #000 12%, transparent 76%);
}

.topnav {
  border-bottom-color: color-mix(in srgb, var(--border) 75%, transparent);
}

.navinner { height: 4.25rem; }

.brand::before {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  box-shadow: 0 0 18px var(--accent-glow);
}

.navlinks { gap: clamp(1rem, 2vw, 1.75rem); }

.hero { padding-top: clamp(6rem, 15vh, 10rem); }

.hero h1 {
  font-size: clamp(3.3rem, 10vw, 7rem);
  letter-spacing: -0.06em;
}

section { padding-bottom: clamp(5rem, 9vw, 8rem); }

.cap, .card, .postrow, .feature, .shot {
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.13);
}

.cap, .card, .postrow, .shot { border-radius: 18px; }

.cap:hover, .card:hover, .postrow:hover, .shot:hover {
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.2);
}

/* ---- Guide article layout ---------------------------------- */

.article {
  max-width: 1160px;
  padding-bottom: 6rem;
}

.article.guide-article {
  display: grid;
  grid-template-columns: 230px minmax(0, 760px);
  column-gap: clamp(2rem, 5vw, 4.2rem);
  justify-content: center;
  align-items: start;
}

.guide-article > .arthead {
  grid-column: 2;
  grid-row: 1;
  padding: 4.25rem 0 2rem;
  margin-bottom: 2.2rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.guide-article > .arthead::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: min(12rem, 40%);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.article-kicker {
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.article-kicker::before {
  content: "";
  width: 1.35rem;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}

.guide-article .arthead time {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.guide-article .arthead h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.6rem, 5.4vw, 4.45rem);
  letter-spacing: -0.055em;
  line-height: 1.03;
  text-wrap: balance;
  background: linear-gradient(155deg, var(--text) 52%, var(--text-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.guide-article .chips { gap: 0.45rem; margin-top: 1.4rem; }

.guide-article .chip {
  border-radius: 999px;
  padding: 0.32rem 0.72rem;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--bg-raised) 76%, transparent);
}

.guide-article .scriptdl {
  margin-top: 1.5rem;
  min-height: 2.9rem;
  padding: 0.72rem 1.05rem;
  border-radius: 10px;
  color: var(--on-accent);
  box-shadow: 0 8px 28px var(--accent-glow);
}

.guide-article .scriptdl::before {
  content: "↓";
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
}

.guide-sidebar {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 5.6rem;
  align-self: start;
  min-width: 0;
}

.guide-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.1rem 0.2rem;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.18s ease;
}

.guide-back:hover { color: var(--accent); }
.guide-back-arrow { font-size: 1.1rem; }

.guide-sidebar .toc {
  padding: 1.15rem 1rem 1rem;
  margin: 0;
  border-color: color-mix(in srgb, var(--border-lit) 72%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-lit) transparent;
}

.guide-sidebar .toc-label { color: var(--accent); }
.guide-sidebar .toc ol { padding-left: 1.25rem; }
.guide-sidebar .toc li { padding-left: 0.1rem; font-size: 0.84rem; line-height: 1.45; }
.guide-sidebar .toc li::marker { font-size: 0.76rem; }
.guide-sidebar .toc a { display: inline-block; padding: 0.12rem 0; }

.guide-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding-top: 0.1rem;
}

.guide-content > p:first-child {
  color: var(--text);
  font-size: clamp(1.12rem, 1.7vw, 1.3rem);
  line-height: 1.75;
  letter-spacing: -0.012em;
  margin-bottom: 1.35rem;
}

.guide-content > p:nth-child(2) { margin-bottom: 1.5rem; }

.guide-content > h2:not(.step) {
  margin-top: 3.4rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.55rem;
  letter-spacing: -0.035em;
}

.guide-content h2.step {
  margin-top: 3.8rem;
  padding-top: 2rem;
  gap: 1rem;
  font-size: 1.5rem;
  line-height: 1.3;
  border-image: linear-gradient(90deg, var(--border-lit), transparent 80%) 1;
}

.guide-content .stepnum {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--bg-raised)), var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
  color: var(--accent);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 8px 25px rgba(0, 0, 0, 0.16);
}

.guide-content .note {
  padding: 1rem 1.2rem;
  margin: 1.4rem 0 1.6rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 7%, var(--bg-raised)), var(--bg-raised) 65%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.guide-content .codeblock {
  margin: 1rem 0 1.7rem;
  border-radius: 13px;
  border-color: color-mix(in srgb, var(--border-lit) 75%, transparent);
  background: linear-gradient(145deg, var(--bg-2), color-mix(in srgb, var(--bg-raised) 76%, var(--bg)));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14), inset 0 1px rgba(255, 255, 255, 0.025);
}

/* The three window dots below run from 0.95rem to just under 3rem, so the
   language label has to start clear of them or the last dot sits on top of
   the first letter. */
.guide-content .codeblock::before {
  left: 3.5rem;
  top: 0.82rem;
  color: var(--accent);
  letter-spacing: 0.09em;
}

.guide-content .codeblock::after {
  content: "";
  position: absolute;
  top: 0.95rem;
  left: 0.95rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0.78rem 0 var(--accent-2), 1.56rem 0 color-mix(in srgb, var(--text-faint) 70%, transparent);
  opacity: 0.7;
}

.guide-content .codeblock pre { padding-top: 2.85rem; }

.guide-content .codeblock .copy {
  top: 0.58rem;
  right: 0.65rem;
  padding: 0.32rem 0.68rem;
  border-radius: 7px;
  color: var(--text-dim);
}

.guide-content .codeblock .copy:focus-visible,
.guide-content .toc a:focus-visible,
.guide-back:focus-visible,
.scriptdl:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- Guide library ----------------------------------------- */

.article.guide-index {
  display: block;
  max-width: 980px;
  padding-top: 1.5rem;
}

.guide-index > .arthead {
  padding: clamp(4rem, 9vw, 7rem) 0 2.1rem;
  margin-bottom: 1.6rem;
  border: 0;
}

.guide-index .arthead h1 {
  margin: 0;
  font-size: clamp(3.8rem, 10vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.07em;
  background: linear-gradient(160deg, var(--text) 46%, var(--text-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.guide-index-summary {
  margin: 1.2rem 0 0;
  max-width: 48ch;
  color: var(--text-dim);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.65;
}

.guide-library-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  margin-bottom: 1rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-library-meta strong { color: var(--accent); font-size: 1rem; }
.guide-library-mark { color: var(--text-faint); text-align: right; }

.guide-index .postlist,
.latest-list { gap: 0.9rem; }

.guide-index .postrow,
.latest-list .postrow {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) 2rem;
  align-items: start;
  gap: 1.25rem;
  padding: 1.6rem 1.65rem;
  border-color: var(--border);
  border-radius: 18px;
  background:
    radial-gradient(38rem 15rem at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 65%),
    linear-gradient(145deg, color-mix(in srgb, var(--bg-raised) 92%, transparent), color-mix(in srgb, var(--bg-2) 90%, transparent));
}

.guide-index .postrow:hover,
.latest-list .postrow:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  transform: translateY(-3px);
}

.guide-number {
  padding-top: 0.1rem;
  color: color-mix(in srgb, var(--accent) 80%, var(--text-faint));
  font-family: var(--mono);
  font-size: 2.3rem;
  font-weight: 400;
  letter-spacing: -0.12em;
  line-height: 1;
  opacity: 0.82;
}

.guide-card-copy { display: flex; flex-direction: column; min-width: 0; }

.guide-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.guide-type {
  padding: 0.2rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guide-card-meta time {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.guide-card-title {
  color: var(--text);
  font-size: clamp(1.16rem, 2vw, 1.42rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.035em;
  text-wrap: balance;
  transition: color 0.18s ease;
}

.guide-index .postrow:hover .guide-card-title,
.latest-list .postrow:hover .guide-card-title { color: var(--accent); }

.guide-card-desc {
  display: block;
  max-width: 70ch;
  margin-top: 0.55rem;
  color: var(--text-dim);
  font-size: 0.97rem;
  line-height: 1.7;
}

.guide-index .postrow .chips,
.latest-list .postrow .chips { margin-top: 0.95rem; }
.guide-index .postrow .chip,
.latest-list .postrow .chip { border-radius: 999px; padding: 0.24rem 0.62rem; }

.guide-card-read {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 600;
}

.guide-card-arrow {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-lit);
  border-radius: 50%;
  color: var(--text-dim);
  font-size: 1.1rem;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.guide-index .postrow:hover .guide-card-arrow,
.latest-list .postrow:hover .guide-card-arrow {
  color: var(--accent);
  border-color: var(--accent-dim);
  transform: translate(2px, -2px);
}

@media (max-width: 1100px) {
  .article.guide-article {
    display: block;
    max-width: 820px;
  }

  .guide-article > .arthead { padding-top: 3.5rem; }
  .guide-sidebar { position: static; margin: 0 0 2rem; }
  .guide-sidebar .toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .guide-content { padding-top: 0; }
}

@media (max-width: 767px) {
  :root { --gutter: 18px; }
  .navinner { height: 3.8rem; }
  .hero { padding-top: 5.5rem; }
  .article.guide-article { padding-top: 0.4rem; }
  .guide-article > .arthead { padding: 2.5rem 0 1.6rem; margin-bottom: 1.5rem; }
  .guide-article .arthead h1 { font-size: clamp(2.6rem, 12vw, 4.1rem); }
  .guide-sidebar .toc { padding: 1rem; }
  .guide-sidebar .toc ol { grid-template-columns: 1fr; }
  .guide-content > p:first-child { font-size: 1.12rem; }
  .guide-content h2.step { margin-top: 2.9rem; padding-top: 1.7rem; font-size: 1.3rem; }
  .guide-content .codeblock pre { padding-right: 0.8rem; padding-left: 0.8rem; }
  .guide-content .codeblock code { font-size: 0.82rem; }
  .article.guide-index { padding-top: 0; }
  .guide-index > .arthead { padding: 4.5rem 0 1.8rem; }
  .guide-index .postrow { grid-template-columns: 2.7rem minmax(0, 1fr) 1.75rem; gap: 0.8rem; padding: 1.2rem 1rem; }
  .guide-number { font-size: 1.8rem; }
  .guide-card-meta { gap: 0.55rem; }
  .guide-card-desc { font-size: 0.93rem; }
  .guide-card-arrow { width: 1.75rem; height: 1.75rem; }
}

@media (max-width: 520px) {
  .guide-library-meta { align-items: flex-start; flex-direction: column; gap: 0.3rem; }
  .guide-library-mark { text-align: left; }
  .guide-index .postrow { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .guide-card-arrow { display: none; }
}

/* The home feed reuses the guides-index card, so the old grid rules for it
   are gone. Only the feature card (shown when the newest item has a cover
   photo) keeps its own treatment. */
.latest-list { display: flex; flex-direction: column; }
#latest .feature { margin-bottom: 0.9rem; }

@media (max-width: 640px) {
  .latest-list .postrow { grid-template-columns: 3rem minmax(0, 1fr); }
  .latest-list .guide-card-arrow { display: none; }
}

/* ---- Figures in guides -------------------------------------- */

.shot-figure {
  margin: 0 0 1.6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-2);
}

.shot-figure img { display: block; width: 100%; height: auto; }

.shot-figure figcaption {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Two figures side by side when there is room. */
.figure-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.figure-pair .shot-figure { margin-bottom: 0; }

/* ---- Enquiry block ------------------------------------------ */

.enquiry {
  margin: 3rem 0 1rem;
  padding: 1.8rem;
  border: 1px solid var(--border-lit);
  border-radius: var(--radius);
  background:
    radial-gradient(34rem 14rem at 100% 0%, var(--accent-glow), transparent 68%),
    var(--bg-raised);
}

.enquiry h2 { margin: 0 0 0.7rem; font-size: 1.25rem; }
.enquiry p { margin: 0 0 0.6rem; font-size: 1rem; }
.enquiry p:last-child { margin-bottom: 0; }

/* ============================================================
   Alternative palettes

   To switch, replace the matching values in :root at the top of this
   file (and the light-mode block below it). Nothing else needs to
   change - every colour on the site comes from these tokens.

   ---- Indigo (current) ----------------------------------------
   --bg #0c0e1a  --bg-2 #121524  --bg-raised #171b2e  --bg-hover #1e2338
   --border #272d45  --border-lit #3a4266
   --accent #8b7cf6  --accent-2 #38d6f0  --accent-dim #4c3fa8
   --accent-glow rgba(139, 124, 246, 0.18)  --on-accent #0b0a1f

   ---- Teal (the original) -------------------------------------
   --bg #0a0e0f  --bg-2 #0e1415  --bg-raised #121a1b  --bg-hover #182223
   --border #273435  --border-lit #364749
   --accent #70e0be  --accent-2 #84bdf5  --accent-dim #357965
   --accent-glow rgba(112, 224, 190, 0.14)  --on-accent #04201c

   ---- Ember (warm, orange on brown-black) ---------------------
   --bg #120d0b  --bg-2 #1a1210  --bg-raised #211815  --bg-hover #2b201b
   --border #3a2b24  --border-lit #4f3a30
   --accent #ff9d5c  --accent-2 #ffd166  --accent-dim #8a4f2a
   --accent-glow rgba(255, 157, 92, 0.16)  --on-accent #221006

   ---- Ocean (blue, cooler and calmer) -------------------------
   --bg #070f18  --bg-2 #0c1723  --bg-raised #101e2d  --bg-hover #16273a
   --border #1f3346  --border-lit #2d4861
   --accent #38bdf8  --accent-2 #5eead4  --accent-dim #1c5a7a
   --accent-glow rgba(56, 189, 248, 0.16)  --on-accent #04161f

   Check contrast after any swap: muted text on the background should
   stay at or above 4.5:1.
   ============================================================ */

/* ---- Theme toggle ------------------------------------------- */

.themetoggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-left: 0.4rem;
  padding: 0;
  border: 1px solid var(--border-lit);
  border-radius: 8px;
  background: var(--bg-raised);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.themetoggle:hover { color: var(--accent); border-color: var(--accent-dim); background: var(--bg-hover); }

.themetoggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* Show the sun in dark mode (click for light) and the moon in light mode. */
.themetoggle .i-sun  { display: none; }
.themetoggle .i-moon { display: block; }
:root[data-theme="dark"] .themetoggle .i-sun,
:root:not([data-theme="light"]) .themetoggle .i-sun { display: block; }
:root[data-theme="dark"] .themetoggle .i-moon,
:root:not([data-theme="light"]) .themetoggle .i-moon { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .themetoggle .i-sun { display: none; }
  :root:not([data-theme="dark"]) .themetoggle .i-moon { display: block; }
}
:root[data-theme="light"] .themetoggle .i-sun { display: none; }
:root[data-theme="light"] .themetoggle .i-moon { display: block; }
:root[data-theme="dark"] .themetoggle .i-sun { display: block; }
:root[data-theme="dark"] .themetoggle .i-moon { display: none; }

/* Nav links and the theme toggle share a row; only the links scroll. */
.navrow { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.navrow .navlinks { min-width: 0; }

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

.contact-wrap { max-width: 720px; }

.contact-intro {
  margin: 0 0 1.8rem;
  color: var(--text-dim);
  font-size: 1.08rem;
  line-height: 1.7;
}

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

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }

.field { display: grid; gap: 0.4rem; min-width: 0; }

.field label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border-lit);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

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

.field input:hover,
.field textarea:hover { border-color: var(--accent-dim); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   fields they can tell are hidden that way. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.captcha { min-height: 78px; }

.contact-form .btn { justify-self: start; cursor: pointer; font-size: 0.95rem; }
.contact-form .btn:disabled { opacity: 0.55; cursor: progress; transform: none; }

.form-status { min-height: 1.5rem; font-size: 0.95rem; line-height: 1.5; }
.form-status.ok  { color: var(--accent); }
.form-status.bad { color: #f87171; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .form-status.bad { color: #b91c1c; }
}
:root[data-theme="light"] .form-status.bad { color: #b91c1c; }

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
}