@font-face {
  font-family: "Monocraft";
  src: url("./fonts/Monocraft.ttf") format("truetype");
  font-display: swap;
  font-weight: 400 800;
}

@font-face {
  font-family: "Agustina Regular";
  src: url("./fonts/Agustina.woff") format("woff");
  font-display: swap;
}

/* Colours follow the main site (src/_globalColor.scss): white / #171c28
   backgrounds, #55198b purple accent, #868e96 subtitles. Dark mode is shared
   with the main site through localStorage "isDark". */
:root {
  --crust: #f5f2f4;
  --mantle: #faf8fb;
  --base: #ffffff;
  --card: #faf8fb;
  --card-2: #ffffff;
  --well: #f3eef8;
  --well-strong: #e2d6ef;

  --fg-1: #000000;
  --fg-2: #2b2d33;
  --fg-3: #868e96;
  --fg-4: #a9b0b7;
  --on-accent: #ffffff;

  --accent: #55198b;
  --accent-deep: #3a0f61;
  --accent-soft: #ece3f6;
  --accent-light: #8c43ce;
  --link: #55198b;
  --eyebrow: #8c43ce;
  --on-image-eyebrow: #d9bdff;
  --gold: #df8e1d;
  --gold-deep: #b9740f;
  --gold-soft: #f8ead2;
  --red: #d20f39;
  --teal: #0e76a8;
  --teal-deep: #0a5780;
  --blue: #5865f2;
  --blue-deep: #3c48b8;
  --plum: #645beb;
  --plum-deep: #4840c2;
  --github: #ffffff;
  --github-fg: #1f2933;
  --logo: #0000ee;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.2);
  --lip-accent: 0 5px 0 var(--accent-deep);
  --lip-ink: 0 5px 0 rgba(0, 0, 0, 0.2);
  --bevel-raise: inset 2px 2px 0 rgba(255, 255, 255, 0.6),
    inset -2px -2px 0 rgba(0, 0, 0, 0.06);
  --bevel-strong: inset 2px 2px 0 rgba(255, 255, 255, 0.3),
    inset -2px -2px 0 rgba(0, 0, 0, 0.2);
  --bevel-sunken: inset 2px 2px 0 rgba(0, 0, 0, 0.08),
    inset -2px -2px 0 rgba(255, 255, 255, 0.55);
  --inset-well: inset 0 2px 6px rgba(0, 0, 0, 0.06);

  --font-pixel: "Monocraft", "Lucida Console", Consolas, monospace;
  --font-sans: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Consolas,
    monospace;
  --font-logo: "Agustina Regular", cursive;
  --case-prose-width: 76ch;
  --case-wide-width: 1040px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --crust: #10141e;
  --mantle: #1b2130;
  --base: #171c28;
  --card: #1f2535;
  --card-2: #252c3e;
  --well: #232a3b;
  --well-strong: #333c52;

  --fg-1: #ffffff;
  --fg-2: #d7dae1;
  --fg-3: #9aa1ad;
  --fg-4: #737b88;

  --accent-soft: #33254a;
  --accent-light: #b27ae8;
  --link: #c59bf2;
  --eyebrow: #b27ae8;
  --gold-soft: #3d3120;
  --logo: #ffffff;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.5);
  --lip-ink: 0 5px 0 rgba(0, 0, 0, 0.45);
  --bevel-raise: inset 2px 2px 0 rgba(255, 255, 255, 0.05),
    inset -2px -2px 0 rgba(0, 0, 0, 0.25);
  --bevel-strong: inset 2px 2px 0 rgba(255, 255, 255, 0.18),
    inset -2px -2px 0 rgba(0, 0, 0, 0.3);
  --bevel-sunken: inset 2px 2px 0 rgba(0, 0, 0, 0.3),
    inset -2px -2px 0 rgba(255, 255, 255, 0.04);
  --inset-well: inset 0 2px 6px rgba(0, 0, 0, 0.25);

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--base);
  transition: background-color 0.3s ease, color 0.3s ease;
  color: var(--fg-2);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.overlay-open,
body.lightbox-open {
  overflow: hidden;
}

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

.page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(16px, 4vw, 40px);
  transition: filter 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

main {
  min-height: 40vh;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-pixel);
  color: var(--fg-1);
  margin: 0;
}

h1 {
  font-weight: 800;
}

h2,
h3,
h4 {
  font-weight: 700;
}

p {
  margin: 0 0 0.75rem;
  color: var(--fg-2);
  line-height: 1.65;
}

a {
  color: var(--link);
}

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

code,
.code {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9em;
  background: var(--well);
  color: var(--fg-1);
  padding: 0.08em 0.38em;
  box-shadow: var(--bevel-sunken);
}

.eyebrow {
  font-family: var(--font-pixel);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  color: var(--eyebrow);
  margin: 0 0 0.45rem;
}

.lede {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}

.body {
  font-family: var(--font-sans);
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
}

.icon-github {
  width: 17px;
  height: 17px;
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8'/%3E%3C/svg%3E")
    center/contain no-repeat;
}

.button {
  --button-lip: var(--lip-ink);
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  color: var(--fg-1);
  background: var(--card);
  box-shadow: var(--bevel-strong), var(--button-lip), var(--shadow-sm);
  cursor: pointer;
  text-decoration: none;
  transition: transform 80ms ease, box-shadow 80ms ease,
    background-color 150ms ease, filter 150ms ease;
  user-select: none;
  appearance: none;
  border: none;
}

.button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: var(--bevel-strong), var(--button-lip), var(--shadow);
}

.button:active {
  transform: translateY(4px);
  box-shadow: var(--bevel-strong), 0 1px 0 rgba(47, 49, 66, 0.22),
    var(--shadow-sm);
}

.button:focus-visible,
.chip:focus-visible,
.card:focus-visible,
.lightbox__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--base), 0 0 0 6px var(--accent-light),
    var(--bevel-strong), var(--button-lip, var(--lip-ink)), var(--shadow);
}

.button--solid,
.button--primary {
  --button-lip: var(--lip-accent);
  background: var(--accent);
  color: var(--on-accent);
}

.button--ghost {
  --button-lip: 0 5px 0 var(--well-strong);
  background: var(--well);
  color: var(--fg-1);
}

.button--github,
.button--github-link {
  --button-lip: var(--lip-ink);
  background: var(--github);
  color: var(--github-fg);
}

.button--discord {
  --button-lip: 0 5px 0 var(--blue-deep);
  background: var(--blue);
  color: #ffffff;
}

.button--sm {
  padding: 9px 14px;
  font-size: 0.78rem;
  gap: 7px;
}

/* ---- Site header (same as revqz.me) ---------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
}

.site-header__logo {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.5em;
  line-height: normal;
  text-decoration: none;
  color: var(--fg-1);
  margin-top: 6px;
}

.site-header__logo:hover {
  color: var(--fg-1);
}

.site-header__logo .grey-color {
  color: var(--fg-3);
}

.site-header__logo .logo-name {
  color: var(--logo);
  font-family: var(--font-logo);
  font-weight: bold;
  font-variant-ligatures: no-common-ligatures;
  padding: 0 10px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 15px 20px;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--fg-1);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.site-nav a:hover {
  color: var(--fg-1);
  background-color: var(--well);
}

:root[data-theme="dark"] .site-nav a:hover {
  background-color: var(--accent);
}

.site-nav__toggle {
  padding: 0 0 0 16px;
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  cursor: pointer;
}

.theme-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch__slider {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  background-color: #cccccc;
  transition: background-color 0.4s;
}

.theme-switch__knob {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  background-color: #ffffff;
  transition: transform 0.4s;
}

.theme-switch input:checked + .theme-switch__slider {
  background-color: #2196f3;
}

.theme-switch input:checked + .theme-switch__slider .theme-switch__knob {
  transform: translateX(22px);
}

.theme-switch input:focus-visible + .theme-switch__slider {
  outline: 3px solid var(--accent-light);
  outline-offset: 2px;
}

/* Round social buttons, same as the main site's greeting section. */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.social__link {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.2s ease-in, transform 0.2s ease-in;
}

.social__link:hover {
  color: #ffffff;
  background-color: #000000;
  transform: translateY(-2px);
}

:root[data-theme="dark"] .social__link:hover {
  background-color: #ffffff;
  color: #000000;
}

.social__link:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 3px;
}

.social__link--github {
  background-color: #333333;
}

.social__link--linkedin {
  background-color: #0e76a8;
}

.social__link--email {
  background-color: #ea4335;
}

.social__link--portfolio {
  background-color: #55198b;
}

.social__link--blog {
  background-color: #000000;
}

:root[data-theme="dark"] .social__link--blog {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.social__link--discord {
  background-color: #5865f2;
}

.hero {
  padding: clamp(40px, 7vw, 80px) 0 clamp(28px, 4vw, 48px);
}

.hero__text {
  max-width: 960px;
}

.hero .lede {
  color: var(--fg-3);
}

.hero h1 {
  font-size: clamp(2.8rem, 8vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: 0.03em;
  margin: 0 0 20px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.section {
  padding: clamp(24px, 4vw, 40px) 0 96px;
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.section__head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
}

.status {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--fg-3);
  background: var(--well);
  padding: 10px 14px;
  box-shadow: var(--bevel-sunken), var(--inset-well);
}

.status[data-tone="ok"] {
  color: var(--link);
}

.status[data-tone="warn"] {
  color: var(--gold-deep);
}

.status[data-tone="error"] {
  color: var(--red);
}

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--well);
  padding: 14px;
  box-shadow: var(--bevel-sunken), var(--inset-well);
  margin-bottom: 32px;
}

.filter[hidden] {
  display: none;
}

.filter__label {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  margin-right: 4px;
  padding-left: 4px;
}

.chip {
  --c: var(--accent);
  --c-deep: var(--accent-deep);
  --c-soft: var(--accent-soft);
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  padding: 9px 11px 9px 14px;
  background: var(--card);
  color: var(--fg-2);
  cursor: pointer;
  box-shadow: var(--bevel-strong), 0 3px 0 var(--well-strong);
  transition: transform 80ms ease, box-shadow 80ms ease,
    background-color 150ms ease, color 150ms ease;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
}

.chip:hover {
  transform: translateY(-1px);
  color: var(--fg-1);
}

.chip:active {
  transform: translateY(3px);
  box-shadow: var(--bevel-strong), 0 0 0 var(--well-strong);
}

.chip[data-on="true"] {
  background: var(--c);
  color: var(--on-accent);
  box-shadow: var(--bevel-strong), 0 3px 0 var(--c-deep);
}

.chip__count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.74em;
  min-width: 1.5em;
  padding: 2px 5px;
  text-align: center;
  background: var(--c-soft);
  color: var(--c-deep);
}

:root[data-theme="dark"] .chip__count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg-2);
}

.chip[data-on="true"] .chip__count {
  background: rgba(0, 0, 0, 0.24);
  color: #ffffff;
}

.chip:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.chip.c-green {
  --c: var(--accent);
  --c-deep: var(--accent-deep);
  --c-soft: var(--accent-soft);
}

.chip.c-blue {
  --c: var(--blue);
  --c-deep: var(--blue-deep);
  --c-soft: #dfe2fc;
}

.chip.c-gold {
  --c: var(--gold);
  --c-deep: var(--gold-deep);
  --c-soft: var(--gold-soft);
}

.chip.c-teal {
  --c: var(--teal);
  --c-deep: var(--teal-deep);
  --c-soft: #cdeaeb;
}

.chip.c-plum {
  --c: var(--plum);
  --c-deep: var(--plum-deep);
  --c-soft: #e7daf9;
}

.chip--clear {
  background: transparent;
  box-shadow: none;
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chip--clear:hover,
.chip--clear:active {
  color: var(--red);
  transform: none;
  box-shadow: none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
}

.card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: var(--card);
  box-shadow: var(--shadow), 0 5px 0 rgba(47, 49, 66, 0.1);
  transition: transform 140ms ease, box-shadow 140ms ease;
  text-align: left;
  padding: 0;
  width: 100%;
  display: block;
  color: inherit;
  border: none;
  font: inherit;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.28),
    inset -3px -4px 0 rgba(20, 22, 33, 0.3);
}

.card:hover,
.card.is-hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 9px 0 rgba(47, 49, 66, 0.1);
}

/* The card being edited in the admin live preview. */
.card.is-preview {
  outline: 3px dashed var(--accent-light);
  outline-offset: 4px;
}

.card:active {
  transform: translateY(-1px);
}

.card__media {
  position: absolute;
  inset: 0;
}

.card__img,
.card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(
    120% 120% at 30% 20%,
    var(--mono-a, #d9c6f5),
    var(--mono-b, #7b3fc0)
  );
}

.card__mono span {
  font-family: var(--font-pixel);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5rem);
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 3px 0 rgba(47, 49, 66, 0.18);
  letter-spacing: 0.04em;
}

.card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 22, 33, 0) 42%,
    rgba(20, 22, 33, 0.3) 72%,
    rgba(20, 22, 33, 0.72) 100%
  );
  transition: background 220ms ease;
}

.card:hover .card__scrim,
.card.is-hover .card__scrim,
.card:focus-visible .card__scrim {
  background: linear-gradient(
    180deg,
    rgba(20, 22, 33, 0.05) 18%,
    rgba(20, 22, 33, 0.45) 52%,
    rgba(20, 22, 33, 0.9) 100%
  );
}

.card__top {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  z-index: 2;
}

.kind {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 11px;
  color: var(--on-accent);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}

.kind--case {
  background: var(--accent);
  box-shadow: 0 3px 0 var(--accent-deep);
}

.kind--oss {
  background: var(--teal);
  box-shadow: 0 3px 0 var(--teal-deep);
}

.kind--experiment {
  background: var(--gold);
  box-shadow: 0 3px 0 var(--gold-deep);
}

.kind--client {
  background: var(--plum);
  box-shadow: 0 3px 0 var(--plum-deep);
}

.card__year {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.74rem;
  color: #ffffff;
  background: rgba(20, 22, 33, 0.5);
  padding: 5px 9px;
  backdrop-filter: blur(4px);
}

.card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(14px, 1.5vw, 18px);
  z-index: 2;
}

.card__title {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.card__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(6px);
  transition: grid-template-rows 260ms ease, opacity 220ms ease,
    transform 260ms ease;
}

.card__reveal-inner {
  overflow: hidden;
  min-height: 0;
}

.card:hover .card__reveal,
.card.is-hover .card__reveal,
.card:focus-visible .card__reveal {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.card__summary {
  font-family: var(--font-sans);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(248, 249, 251, 0.94);
  margin: 9px 0 10px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 24px;
  overflow: hidden;
}

.tag {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  color: #ffffff;
}

.tag--light {
  background: var(--well);
  color: var(--fg-2);
  backdrop-filter: none;
  box-shadow: var(--bevel-sunken);
}

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 70px 20px;
  color: var(--fg-3);
  font-family: var(--font-mono);
}

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  z-index: 90;
}

.overlay[hidden] {
  display: none;
}

.overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 33, 46, 0.5);
  backdrop-filter: blur(5px);
}

.overlay__panel {
  position: relative;
  width: min(1600px, 96vw);
  height: 95vh;
  background: var(--base);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--well-strong) transparent;
}

.detail__hero {
  position: relative;
  width: 100%;
  height: clamp(280px, 42vh, 440px);
  min-height: 0;
  background: var(
    --hero,
    radial-gradient(120% 120% at 30% 20%, #d9c6f5, #7b3fc0)
  );
  background-size: cover;
  background-position: center;
  padding: clamp(20px, 4vw, 40px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
}

.detail__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail__video[hidden] {
  display: none;
}

.detail__sound {
  position: absolute;
  top: clamp(14px, 2.5vw, 24px);
  right: clamp(14px, 2.5vw, 24px);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  color: #ffffff;
  background: rgba(20, 22, 33, 0.55);
  backdrop-filter: blur(4px);
  box-shadow: var(--bevel-strong), 0 4px 0 rgba(0, 0, 0, 0.35);
  transition: transform 80ms ease, background-color 150ms ease;
}

.detail__sound:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

.detail__sound:active {
  transform: translateY(3px);
  box-shadow: var(--bevel-strong), 0 1px 0 rgba(0, 0, 0, 0.35);
}

.detail__sound:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 2px;
}

.detail__sound[hidden] {
  display: none;
}

.detail__mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 22, 33, 0) 32%,
    rgba(20, 22, 33, 0.8) 100%
  );
  pointer-events: none;
}

.detail__meta {
  position: relative;
  z-index: 1;
  color: #ffffff;
  min-width: 0;
}

.detail__meta .eyebrow {
  margin: 0 0 0.65rem;
  color: var(--on-image-eyebrow);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.detail__hero h3 {
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 1.08;
  color: #ffffff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.detail__actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.detail__actions .button[hidden] {
  display: none;
}

.detail__actions .button {
  min-height: 42px;
}

.detail__layout {
  display: grid;
  grid-template-columns: minmax(0, var(--case-wide-width)) minmax(320px, 380px);
  grid-template-areas: "body side";
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  justify-content: center;
  padding: clamp(28px, 4vw, 48px);
}

.detail__body {
  grid-area: body;
  min-width: 0;
  width: 100%;
  max-width: var(--case-wide-width);
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-2);
}

.detail__body > :where(h1, h2, h3, h4, p, ul, ol, blockquote) {
  max-width: var(--case-prose-width);
}

.detail__side {
  grid-area: side;
  position: sticky;
  top: 24px;
  display: grid;
  gap: 22px;
}

.side-card {
  background: var(--card);
  padding: 22px;
  box-shadow: var(--bevel-raise), var(--shadow-sm);
}

.side-card__label {
  font-family: var(--font-pixel);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  color: var(--eyebrow);
  margin: 0 0 12px;
}

.side-card .body {
  font-size: 0.96rem;
}

.stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cs-links {
  display: grid;
  gap: 10px;
}

.detail__side .button {
  width: 100%;
}

.kv-list {
  margin: 16px 0 0;
  padding: 0;
}

.kv {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kv + .kv {
  margin-top: 14px;
}

.kv dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}

.kv dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--fg-1);
}

.detail__body h1,
.detail__body h2,
.detail__body h3,
.detail__body h4 {
  font-family: var(--font-pixel);
  color: var(--fg-1);
}

.detail__body h1 {
  font-size: clamp(2.1rem, 2vw + 1.5rem, 2.6rem);
  line-height: 1.08;
  margin: 2.25rem 0 0.9rem;
}

.detail__body h2 {
  font-size: clamp(1.35rem, 1.1vw + 1.1rem, 1.5rem);
  line-height: 1.15;
  margin: 2.4rem 0 0.8rem;
}

.detail__body h3 {
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.15rem);
  line-height: 1.2;
  margin: 1.95rem 0 0.7rem;
}

.detail__body p,
.detail__body ul,
.detail__body ol,
.detail__body blockquote {
  margin: 0 0 1rem;
  color: var(--fg-2);
}

.detail__body ul,
.detail__body ol {
  padding-left: 1.4rem;
}

.detail__body li + li {
  margin-top: 0.45rem;
}

.detail__body blockquote {
  background: var(--card);
  padding: 18px 20px 18px 24px;
  box-shadow: inset 5px 0 0 var(--accent-light), var(--bevel-raise),
    var(--shadow-sm);
}

.detail__body .table-wrapper {
  margin: 1.1rem 0;
  overflow-x: auto;
  box-shadow: var(--bevel-raise), var(--shadow-sm);
}

.detail__body table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
  background: var(--card);
}

.detail__body th,
.detail__body td {
  padding: 0.75rem 0.85rem;
  color: var(--fg-2);
  text-align: left;
  box-shadow: inset 0 -2px 0 var(--well);
}

.detail__body thead th {
  background: var(--well);
  color: var(--fg-1);
  font-weight: 700;
}

.detail__body tbody tr:nth-child(even) td {
  background: var(--base);
}

.detail__body pre {
  background: var(--well);
  box-shadow: var(--bevel-sunken), var(--inset-well);
  padding: 1rem;
  overflow-x: auto;
}

.detail__body pre code {
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.detail__body img,
.detail__body video {
  max-width: 100%;
  display: block;
  margin: 1rem auto;
  box-shadow: var(--bevel-strong), var(--shadow);
}

.detail__body a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 600;
  word-break: break-word;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 1rem 0 1.5rem;
  width: 100%;
}

.gallery figure {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--bevel-raise), var(--shadow);
  background: var(--card);
}

.gallery img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  box-shadow: none;
}

.hover-caption {
  position: relative;
  overflow: hidden;
}

.hover-caption figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.45rem 0.65rem;
  background: linear-gradient(
    180deg,
    rgba(20, 22, 33, 0) 0%,
    rgba(20, 22, 33, 0.82) 100%
  );
  color: #f8f9fb;
  font-size: 0.92rem;
  line-height: 1.3;
  font-family: var(--font-pixel);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.hover-caption:hover figcaption,
.hover-caption:focus-within figcaption {
  opacity: 1;
  transform: translateY(0);
}

.gallery--single {
  grid-template-columns: minmax(0, 1fr);
}

.gallery--captioned figure {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gallery--captioned img,
.gallery--captioned video {
  width: 100%;
  height: auto;
  margin: 0;
  box-shadow: none;
  background: #11131c;
}

.gallery--captioned:not(.gallery--ui) img,
.gallery--captioned video {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.gallery--ui img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--well);
}

.gallery--captioned figcaption,
.gallery--captioned .hover-caption figcaption {
  position: static;
  inset: auto;
  flex: 1;
  padding: 0.75rem 0.85rem;
  background: var(--card);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.gallery--captioned .hover-caption:hover figcaption,
.gallery--captioned .hover-caption:focus-within figcaption {
  opacity: 1;
  transform: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 22, 33, 0.78);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__frame {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  margin: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: 92vh;
  display: block;
  box-shadow: var(--bevel-strong), var(--shadow-lg),
    6px 6px 0 rgba(15, 17, 22, 0.6);
}

.lightbox__close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  background: var(--well);
  color: var(--fg-1);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  font-family: var(--font-pixel);
  box-shadow: var(--bevel-strong), var(--lip-ink), var(--shadow-sm);
  border: none;
}

.lightbox__caption {
  margin-top: 0.5rem;
  text-align: center;
  color: #e6e9ef;
  font-size: 0.95rem;
}

.lightbox__close:hover {
  background: var(--accent);
  color: var(--on-accent);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

.overlay__panel.is-opening {
  animation: slideUp 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.overlay__panel.is-closing {
  animation: slideDown 320ms cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

.overlay-blur .page {
  filter: blur(4px);
}

.footer {
  padding: 40px 0 56px;
}

.footer__inner {
  background: var(--card);
  box-shadow: var(--bevel-raise), var(--shadow-sm);
  padding: 32px clamp(20px, 4vw, 40px);
}

.footer__inner p {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fg-3);
  margin: 0;
}

@media (max-width: 1000px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "side"
      "body";
  }

  .detail__side {
    position: static;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding: 12px 0;
  }

  .site-nav li:not(.site-nav__toggle) {
    display: none;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .button {
    width: 100%;
  }

  .detail__hero {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
  }

  .detail__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 699px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

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

  .overlay__panel {
    width: 100vw;
    height: 96vh;
  }

  .detail__layout {
    padding: 24px 18px 36px;
  }
}

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

  html {
    scroll-behavior: auto;
  }
}

/* ---- Project gallery (showcase.js), modelled on soulstudios.com ---------- */

.detail__gallery {
  padding: clamp(28px, 4vw, 48px) 0 0;
}

.detail__gallery[hidden] {
  display: none;
}

.showcase {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  aspect-ratio: 2.8 / 1;
  /* Horizontal swipes flip the gallery; vertical ones still scroll. */
  touch-action: pan-y;
}

.showcase__slide {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  background: var(--well);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase__slide:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 4px;
}

.showcase__slide img,
.showcase__slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  box-shadow: none;
}

/* The side slides fade out towards the page edge. */
.showcase__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
}

.showcase__slide[data-fade="left"] .showcase__fade {
  display: block;
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--base) 95%, transparent),
    transparent 70%
  );
}

.showcase__slide[data-fade="right"] .showcase__fade {
  display: block;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--base) 95%, transparent),
    transparent 70%
  );
}

.showcase__nav {
  position: absolute;
  top: 47.5%;
  left: 0;
  right: 0;
  z-index: 5;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 2%;
  pointer-events: none;
}

.showcase__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  color: #ffffff;
  background: #3d6bf5;
  transition: filter 150ms ease;
}

.showcase__arrow--prev {
  transform: rotate(15deg);
}

.showcase__arrow--next {
  transform: rotate(-15deg);
}

.showcase__arrow:hover {
  filter: brightness(1.25);
}

.showcase__arrow:active {
  filter: brightness(0.95);
}

.showcase__arrow:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 3px;
}

@media (min-width: 48em) {
  .showcase__nav {
    padding-inline: 5%;
  }

  .showcase__arrow {
    width: 64px;
    height: 64px;
  }
}

@media (min-width: 62em) {
  .showcase__nav {
    padding-inline: 7%;
  }
}

.showcase-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease;
}

.showcase-lightbox.is-open {
  opacity: 1;
}

.showcase-lightbox__frame {
  position: relative;
  width: min(90vw, calc(80vh * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 0 15px;
  overflow: hidden;
  transform: translateY(-20px);
  transition: transform 200ms ease;
}

.showcase-lightbox.is-open .showcase-lightbox__frame {
  transform: translateY(0);
}

.showcase-lightbox__frame img,
.showcase-lightbox__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.showcase-lightbox__frame video {
  cursor: default;
}

body.showcase-lightbox-open {
  overflow: hidden;
}