/* Divine Uchenna Amakiri — personal landing page
   Design ported by hand from design/code.html (Google Stitch export).
   No framework, no build step. Tokens live on :root. */

/* ---------------------------------------------------------------- tokens */

:root {
  --canvas-1: #ffffff;
  --canvas-2: #ffffff;
  --canvas-3: #ffffff;

  --ink: #171717;
  --ink-soft: #525252;
  --ink-mute: #8a8a85;

  --surface: rgba(255, 255, 255, 0.7);
  --surface-solid: #ffffff;
  --surface-sunk: #f1f1ef;
  --line: rgba(0, 0, 0, 0.08);
  --line-soft: rgba(0, 0, 0, 0.05);

  --glass: rgba(255, 255, 255, 0.68);
  --glass-edge: rgba(255, 255, 255, 0.85);

  --accent: #6d3bf5;
  --accent-ink: #5a2ee0;
  --accent-wash: rgba(109, 59, 245, 0.1);
  --ok: #10b981;

  --invert-bg: #171717;
  --invert-ink: #ffffff;

  --shadow-pill: 0 8px 24px -4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 12px 32px -8px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-lift: 0 24px 48px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);

  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Grotesk", ui-monospace, "SFMono-Regular", monospace;
  --font-name: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --page: 900px;
  /* Work and Stack share one two-column layout: label left, content right */
  --col-label: 110px;
  --col-gap: 36px;
  --col-body: 540px;
  --gutter: 20px;
}

/* Dark: follows the OS unless the visitor picked a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas-1: #18181f;
    --canvas-2: #101015;
    --canvas-3: #09090c;

    --ink: #f5f5f5;
    --ink-soft: #a3a3a3;
    --ink-mute: #6f6f76;

    --surface: rgba(21, 21, 27, 0.8);
    --surface-solid: #16161c;
    --surface-sunk: #0e0e13;
    --line: rgba(255, 255, 255, 0.1);
    --line-soft: rgba(255, 255, 255, 0.07);

    --glass: rgba(22, 22, 28, 0.72);
    --glass-edge: rgba(255, 255, 255, 0.12);

    --accent: #a78bfa;
    --accent-ink: #c4b5fd;
    --accent-wash: rgba(167, 139, 250, 0.14);

    --invert-bg: #ffffff;
    --invert-ink: #16161c;

    --shadow-pill: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-card: 0 12px 32px -8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-lift: 0 28px 56px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.09);
  }
}

:root[data-theme="dark"] {
  --canvas-1: #18181f;
  --canvas-2: #101015;
  --canvas-3: #09090c;

  --ink: #f5f5f5;
  --ink-soft: #a3a3a3;
  --ink-mute: #6f6f76;

  --surface: rgba(21, 21, 27, 0.8);
  --surface-solid: #16161c;
  --surface-sunk: #0e0e13;
  --line: rgba(255, 255, 255, 0.1);
  --line-soft: rgba(255, 255, 255, 0.07);

  --glass: rgba(22, 22, 28, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.12);

  --accent: #a78bfa;
  --accent-ink: #c4b5fd;
  --accent-wash: rgba(167, 139, 250, 0.14);

  --invert-bg: #ffffff;
  --invert-ink: #16161c;

  --shadow-pill: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-card: 0 12px 32px -8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-lift: 0 28px 56px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.09);
}

/* ---------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: 72px;
  background: radial-gradient(circle at 50% 15%, var(--canvas-1) 0%, var(--canvas-2) 60%, var(--canvas-3) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

:focus-visible { outline: none; }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 10px 18px;
  background: var(--invert-bg);
  color: var(--invert-ink);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- top pill */

.topbar {
  position: fixed;
  top: 20px;
  left: 0; right: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}

/* Retro treatment: squared-off corners instead of a capsule, no rule, and the
   same two-layer shadow and VT323 label as the "Visit Flowlyy" button. */
.pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 3px 8px rgba(0, 0, 0, 0.10);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: box-shadow 0.3s ease;
}
.pill:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.14),
    0 5px 14px rgba(0, 0, 0, 0.12);
}
:root[data-theme="dark"] .pill {
  background: rgba(32, 32, 40, 0.88);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] .pill:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill {
    background: rgba(32, 32, 40, 0.88);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  }
  :root:not([data-theme="light"]) .pill:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65); }
}

.pill__icon {
  display: grid;
  place-items: center;
  padding: 3px;
  color: var(--ink-soft);
  border-radius: 3px;
  transition: color 0.2s ease;
}
.pill__icon:hover { color: var(--ink); }
.pill__icon svg { width: 16px; height: 16px; }

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

.pill__rule {
  width: 1px;
  height: 13px;
  background: var(--line);
}

.pill__link {
  padding: 1px 3px;
  color: var(--ink-soft);
  font-family: "VT323", ui-monospace, monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.pill__link:hover { color: var(--ink); }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 180px var(--gutter) 0;
  text-align: center;
}

.hero__id,
.hero__id { display: grid; justify-items: center; gap: 18px; }

.avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
}
:root[data-theme="dark"] .avatar {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avatar {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
  }
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.avatar--sm { width: 56px; height: 56px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.avatar--lg { width: 112px; height: 112px; }

/* Upload avatar: the whole circle is a label for a hidden file input. */
.avatar--upload {
  position: relative;
  display: block;
  cursor: pointer;
  transition: transform 0.18s ease;
}
.avatar--upload:hover { transform: scale(1.03); }
.avatar--upload:focus-within { outline: none; }
.avatar__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.avatar__hint svg { width: 26px; height: 26px; }
.avatar--upload:hover .avatar__hint,
.avatar--upload:focus-within .avatar__hint { opacity: 1; }

.hero__name {
  font-family: var(--font-name);
  /* the name is the hero's focal point now, so it scales with the viewport;
     tracking tightens as it grows, since 0.16em sprawls at display sizes */
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  /* 600 in a proportional sans reads at about the weight 500 did in mono */
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: none;
  text-wrap: balance;
  color: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
.btn svg { width: 15px; height: 15px; }
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--invert-bg);
  color: var(--invert-ink);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35);
}
.btn--primary:hover { opacity: 0.88; }

/* ---------------------------------------------------------------- work */

.work,
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: calc(var(--col-body) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 96px var(--gutter) 0;
}

@media (min-width: 900px) {
  .work,
  .about { padding-top: 112px; }
}

/* ---------------------------------------------------------------- cta buttons
   Matched to the supplied reference: 2px grey rule, soft 6px corner,
   near-white fill, pixel uppercase label. */

.btn--primary {
  --cta-bg: #fdfcfc;
  --cta-ink: #2e2d2d;
  --cta-line: #7f7f7f;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  border: 2px solid var(--cta-line);
  border-radius: 6px;
  background: var(--cta-bg);
  color: var(--cta-ink);
  /* VT323 is a true bitmap face — it carries a small cap height for its em,
     so it runs larger than a normal label would at the same optical size. */
  font-family: "VT323", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.btn--primary:hover {
  border-color: var(--cta-ink);
  color: #000000;
  background: #ffffff;
  opacity: 1;
}

:root[data-theme="dark"] .btn--primary {
  --cta-bg: #17171c;
  --cta-ink: #e8e8e8;
  --cta-line: #6f6f76;
}
:root[data-theme="dark"] .btn--primary:hover {
  border-color: #e8e8e8;
  color: #ffffff;
  background: #1f1f26;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary {
    --cta-bg: #17171c;
    --cta-ink: #e8e8e8;
    --cta-line: #6f6f76;
  }
  :root:not([data-theme="light"]) .btn--primary:hover {
    border-color: #e8e8e8;
    color: #ffffff;
    background: #1f1f26;
  }
}

/* ---------------------------------------------------------------- dock */

.dock-wrap {
  display: flex;
  justify-content: center;
  padding: 40px var(--gutter) 0;
}

/* Just the logos: no bar, no tiles. Plain grey marks that darken on hover. */
.dock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
}

.dock__group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dock__item { position: relative; }

.sq {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: none;
  color: var(--ink-mute);
  transition: transform 0.2s ease, color 0.2s ease;
}
.sq svg { width: 24px; height: 24px; }
.sq:hover,
.sq:focus-visible { color: var(--ink); transform: translateY(-2px); }
.sq:active { transform: translateY(0); }
.sq:focus-visible { outline: none; }

/* The Flowlyy mark is an <img>, so it is turned grey with a filter rather than a
   fill, and goes to full ink on hover. */
.sq--flowlyy img {
  width: 26px;
  height: 26px;
  filter: brightness(0);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.sq--flowlyy:hover img,
.sq--flowlyy:focus-visible img { opacity: 1; }
:root[data-theme="dark"] .sq--flowlyy img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sq--flowlyy img { filter: brightness(0) invert(1); }
}

.tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--invert-bg);
  color: var(--invert-ink);
  font-family: "VT323", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dock__item:hover .tip,
.sq:focus-visible + .tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  top: 76px;
  left: 50%;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--invert-bg);
  color: var(--invert-ink);
  font-family: var(--mono);
  font-size: 11px;
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translate(-50%, -10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

/* ---------------------------------------------------------------- breakpoints */

@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .hero { padding-top: 210px; }
  .dock__group { gap: 6px; }
}

@media (max-width: 380px) {
  .sq { width: 36px; height: 36px; }
  .sq svg { width: 20px; height: 20px; }
  .sq--flowlyy img { width: 22px; height: 22px; }
  .dock { gap: 3px; }
  .dock__group { gap: 3px; }
}

}

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

/* ---------------------------------------------------------------- stack
   Tools I use. Same hairline-grid look as the cards; logos are inline SVG in
   currentColor so they stay grey and follow the theme. */

.stack {
  --st-canvas: #ffffff;
  --st-line: #e2e2de;
  --st-logo: #6b6b67;
  --st-mute: #8e8e8a;
  --st-ink: #171717;
  --st-hover: #f6f6f4;
  --st-mono: "JetBrains Mono", ui-monospace, monospace;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: calc(var(--col-body) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 72px var(--gutter) 0;
}

:root[data-theme="dark"] .stack {
  --st-canvas: #0d0d11;
  --st-line: rgba(255, 255, 255, 0.14);
  --st-logo: #9a9aa2;
  --st-mute: #7c7c84;
  --st-ink: #f5f5f5;
  --st-hover: #16161c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stack {
    --st-canvas: #0d0d11;
    --st-line: rgba(255, 255, 255, 0.14);
    --st-logo: #9a9aa2;
    --st-mute: #7c7c84;
    --st-ink: #f5f5f5;
    --st-hover: #16161c;
    }
}

.stack__label {
  padding-top: 4px;
  font-family: var(--st-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st-mute);
}

.stack__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* each tool is its own rounded tile and links to the tool's real site */
.stack__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 100px;
  padding: 16px 6px;
  border: 1px solid var(--st-line);
  border-radius: 16px;
  background: var(--st-canvas);
  color: var(--st-logo);
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}
.stack__link:hover,
.stack__link:focus-visible {
  background: var(--st-hover);
  color: var(--st-ink);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.stack__link:focus-visible { outline: none; }
.stack__link svg { width: 28px; height: 28px; flex: none; }

.stack__name {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: inherit;
  text-align: center;
}

@media (min-width: 900px) {
  .stack { padding-top: 96px; }
  .stack__link { min-height: 110px; }
  .stack__link svg { width: 30px; height: 30px; }
}

/* room above the floating dock */

/* ---------------------------------------------------------------- location
   Small mono line under the name. Same label look as the card numbers. */

.hero__geo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin-top: -6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------------------------------------------------------------- work, as writing
   Plain headings and paragraphs, no boxes. Reuses the page's existing type. */

.write {
  display: grid;
  gap: 40px;
}

.write__heading {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.write__body {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.write--soon .write__heading,
.write--soon .write__body { color: var(--ink-mute); }

/* On dark a black drop shadow disappears, so the stack tiles use a deeper one. */
:root[data-theme="dark"] .stack__link {
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stack__link {
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stack__link:hover { transform: none; }
}

/* The Flowlyy block is one clickable tile: icon on the left, title and a short
   line on the right. Thin border, no shadow. The whole thing links out. */

.write__link {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-solid);
  color: inherit;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}
.write__link:hover,
.write__link:focus-visible {
  background: var(--surface-sunk);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.write__link:focus-visible { outline: none; }

.write__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--surface-sunk);
}
.write__icon img { width: 24px; height: 24px; filter: brightness(0); }
:root[data-theme="dark"] .write__icon img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .write__icon img { filter: brightness(0) invert(1); }
}

.write__text { display: block; min-width: 0; }
.write__text .write__heading,
.write__text .write__body { display: block; }
.write__text .write__body { margin-top: 4px; }

/* On dark a black drop shadow disappears, so the Flowlyy tile uses a deeper one. */
:root[data-theme="dark"] .write__link {
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .write__link {
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .write__link:hover { transform: none; }
}

/* "Work" label: same type as the "Stack" label. */
.write__label {
  padding-top: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8e8e8a;
}
:root[data-theme="dark"] .write__label { color: #7c7c84; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .write__label { color: #7c7c84; }
}

/* Work and Stack: content is centred on the page. On wide screens the label hangs
   in the left margin (an empty column of the same width on the right keeps the
   content dead centre); on narrow screens it sits above the content. */
.write__label,
.stack__label { margin-bottom: 14px; padding-top: 0; }

@media (min-width: 860px) {
  .work,
  .about,
  .stack {
    grid-template-columns: var(--col-label) minmax(0, 1fr) var(--col-label);
    column-gap: var(--col-gap);
    max-width: calc(var(--col-body) + 2 * (var(--col-label) + var(--col-gap)) + 2 * var(--gutter));
  }
  .write__label,
  .stack__label { margin-bottom: 0; padding-top: 4px; }
}

/* breathing room under the last section */
.stack { padding-bottom: 96px; }

/* About, as writing: a few short paragraphs. */
.write__prose { display: grid; gap: 14px; }
.write__prose .write__body { margin-top: 0; }