/* ==========================================================================
   keebwiki — Twelve reskin
   Theme layer + components. Depends on tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Themes
   Dark is the default everywhere; light is the opt-in reading theme.
   These override the design-system semantic aliases from tokens.css.
   -------------------------------------------------------------------------- */

:root,
[data-theme="dark"] {
  --bg: #14101E;
  --bg-fade: rgba(20, 16, 30, .9);
  --surface: #1C1730;
  --surface-2: #221C38;
  --text: #E7E2F2;
  --muted: rgba(231, 226, 242, .62);
  --muted-strong: rgba(231, 226, 242, .82);
  --kicker: #B8A9E0;
  --sticker-fg: #2A1F45;
  --ink-panel: #241D3A;
  --ink-panel-2: #332853;
  --tile-bg: #221C38;
  --tile-border: rgba(184, 169, 224, .4);
  --hover-soft: rgba(245, 242, 232, .07);
  --stripe: rgba(245, 242, 232, .07);
  --hover-border: #B8A9E0;
  --btn-hover: #5C4A92;
  --plum-deep: #4A3A78;
  --plum-mid: #9B8AD4;
  --text-primary: #E7E2F2;
  --text-heading: #F3EFFC;
  --border-subtle: rgba(245, 242, 232, .13);
  --border-strong: rgba(245, 242, 232, .24);
  --border-inverse: rgba(245, 242, 232, .22);
  --surface-pill-inverse: rgba(245, 242, 232, .07);
  --noise-blend: screen;
  --noise-strength: .045;
  --error: #F2A5C2;
}

[data-theme="light"] {
  --bg: #F5F2E8;
  --bg-fade: rgba(245, 242, 232, .92);
  --surface: #FBF9F1;
  --surface-2: #ffffff;
  --text: #231933;
  --muted: rgba(35, 25, 51, .74);
  --muted-strong: rgba(35, 25, 51, .86);
  --kicker: #3D2E5E;
  --sticker-fg: #3D2E5E;
  --ink-panel: #2A1F45;
  --ink-panel-2: #3D2E5E;
  --tile-bg: #2A1F45;
  --tile-border: rgba(184, 169, 224, .45);
  /* Dark-on-cream tints: the source prototype self-referenced these, which
     computed to a near-white overlay that was invisible on the light page. */
  --hover-soft: rgba(42, 31, 69, .06);
  --stripe: rgba(42, 31, 69, .07);
  --hover-border: #2A1F45;
  --btn-hover: #3D2E5E;
  --plum-deep: #2A1F45;
  --plum-mid: #3D2E5E;
  --text-primary: #231933;
  --text-heading: #2A1F45;
  --border-subtle: rgba(42, 31, 69, .15);
  --border-strong: rgba(42, 31, 69, .25);
  --border-inverse: rgba(245, 242, 232, .3);
  --surface-pill-inverse: rgba(42, 31, 69, .08);
  --noise-blend: multiply;
  --noise-strength: var(--noise-opacity);
  --error: #84294C;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: var(--leading-body-sm);
  position: relative;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--kicker); text-decoration: none; }
a:hover { color: var(--text-heading); }

input,
textarea,
button,
select { font-family: var(--font-mono); }

button,
[role="button"],
.site-nav a,
.site-footer__links a { min-width: 24px; min-height: 24px; }

input::placeholder,
textarea::placeholder { color: var(--muted); }

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

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

/* Film-grain overlay */
.noise {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  mix-blend-mode: var(--noise-blend);
  opacity: var(--noise-strength);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

.page { padding: 56px 0 96px; }
.page--detail { padding: 44px 0 96px; }
.page--login { padding: 80px 0 120px; display: flex; justify-content: center; }

.section { padding: 0 0 96px; }

.grid { display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid--wiki { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
.grid--detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
.grid--community { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

.kicker {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--kicker);
  margin: 0 0 14px;
}
.kicker--sm { font-size: .72rem; margin-bottom: 20px; }
.kicker--pink { color: var(--pink); }

.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--text-heading);
  margin: 0;
}
.dot { color: var(--lav); }

.lede {
  font-family: var(--font-mono);
  font-size: .92rem;
  line-height: var(--leading-body);
  color: var(--muted-strong);
  margin: 18px 0 40px;
  max-width: 64ch;
  text-wrap: pretty;
}

/* SectionHeader — components/layout/SectionHeader.jsx */
.section-header { text-align: left; margin-bottom: 48px; }
.section-header__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--plum-mid);
  margin: 0 0 18px;
}
.section-header__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-h1);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-normal);
  color: var(--text-heading);
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Core components (ported from the DS bundle)
   -------------------------------------------------------------------------- */

/* Badge — components/core/Badge.jsx */
.badge {
  font-family: var(--font-mono);
  font-size: var(--text-tag);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-inverse);
  color: var(--text-inverse);
  display: inline-block;
  white-space: nowrap;
}
.badge--status {
  font-size: .72rem;
  background: var(--surface-pill-inverse);
  border: 1px solid var(--border-subtle);
  color: var(--text-heading);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-status);
  flex: none;
}

/* Button — components/core/Button.jsx */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  padding: 20px 44px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: transform var(--duration-med) ease,
              background var(--duration-med) ease,
              color var(--duration-med) ease;
}
.btn--primary { background: var(--plum-deep); color: var(--text-inverse); }
.btn--primary:hover { background: var(--plum-mid); color: var(--text-inverse); transform: scale(1.05); }
.btn--ghost {
  background: transparent;
  color: var(--text-heading);
  border: 1.5px solid var(--border-strong);
}
.btn--ghost:hover { transform: scale(1.05); color: var(--text-heading); }

/* Page-level button variants */
.btn-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.btn-pill--solid { background: var(--plum-deep); color: var(--cream); }
.btn-pill--solid:hover { background: var(--btn-hover); color: var(--cream); }
.btn-pill--outline {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--text-heading);
}
.btn-pill--outline:hover { border-color: var(--hover-border); background: var(--hover-soft); color: var(--text-heading); }
.btn-pill--cream {
  font-size: .95rem;
  padding: 20px 40px;
  background: var(--cream);
  color: #2A1F45;
}
.btn-pill--cream:hover { background: var(--lav); color: #2A1F45; }
.btn-pill--sm { font-size: .85rem; padding: 15px 28px; }

/* Sticker — components/core/Sticker.jsx */
.sticker {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: var(--border-w-sticker) solid var(--border-strong);
  background: #fff;
  color: var(--sticker-fg);
  white-space: nowrap;
  display: inline-block;
  transform: rotate(var(--rotate, 0deg));
  transition: transform var(--duration-fast) var(--ease-bounce),
              border-color var(--duration-fast),
              color var(--duration-fast);
}
.sticker:hover {
  transform: rotate(var(--rotate, 0deg)) scale(1.08);
  border-color: var(--plum-deep);
  color: var(--plum-deep);
}
.sticker--pink { color: var(--plum-deep); border-color: var(--pink); }
.sticker--pink:hover { color: var(--plum-deep); }

/* Form controls */
.field {
  padding: 16px 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: .9rem;
  outline: none;
  width: 100%;
}
.field:focus { border-color: var(--hover-border); }
.field--search { padding: 19px 28px; font-size: .95rem; }
.field--area {
  border-radius: var(--radius-card);
  padding: 18px 22px;
  line-height: var(--leading-body);
  resize: vertical;
}

.label { display: flex; flex-direction: column; gap: 9px; }
.label__text {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.searchbar { display: flex; gap: 12px; align-items: center; }
.searchbar .field { flex: 1; min-width: 0; }
.searchbar .btn { height: 60px; padding: 0 44px; line-height: 60px; }

/* Selectable pills — filters and topics */
.pill {
  font-family: var(--font-mono);
  font-size: .82rem;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--text-heading);
  font-weight: 400;
  white-space: nowrap;
}
.pill:hover { border-color: var(--hover-border); }
.pill[aria-pressed="true"] {
  border-color: var(--plum-deep);
  background: var(--plum-deep);
  color: var(--cream);
  font-weight: 700;
}
.pill--topic { font-size: .8rem; padding: 11px 20px; background: var(--surface-2); }
.pill--topic[aria-pressed="true"] { background: var(--plum-deep); }
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   6. Cards & panels
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-lg);
  padding: 28px;
}
.card--pad-lg { padding: 34px; }
.card--dashed { border: 1.5px dashed var(--border-strong); }

.panel {
  background: var(--ink-panel);
  border-radius: var(--radius-card-lg);
  padding: 48px;
  color: var(--cream);
}
.panel--sm { padding: 28px; }

.panel__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--cream);
  margin: 0 0 14px;
}
.panel__body {
  font-family: var(--font-mono);
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(245, 242, 232, .86);
  margin: 0;
  text-wrap: pretty;
}

.cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.cta-panel__copy { max-width: 52ch; }
.cta-panel__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex: none;
}
.cta-panel__note {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: rgba(245, 242, 232, .6);
}

/* --------------------------------------------------------------------------
   7. Header / nav / footer
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(var(--bg) 78%, var(--bg-fade));
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}
.site-header__brand { display: flex; align-items: center; gap: 16px; }
.site-header__tools {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Keycap wordmark */
.wordmark { display: flex; align-items: center; gap: 4px; }
.wordmark__key {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .7rem;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tile-border);
  border-radius: 5px;
  background: var(--tile-bg);
}
.wordmark__key--lav { color: var(--lav); }
.wordmark__key--pink { color: var(--pink); }
.wordmark__key--blue { color: var(--blue); }
.wordmark__sep {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lav);
  margin: 0 5px;
}
.wordmark-tag {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
}

.theme-toggle {
  flex: none;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-heading);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--hover-border); }

.site-nav { display: flex; align-items: center; gap: 20px; flex: none; }
.site-nav a {
  font-family: var(--font-mono);
  font-size: .86rem;
  letter-spacing: .01em;
  font-weight: 400;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--text-heading); }
.site-nav a[aria-current="page"] {
  font-weight: 700;
  color: var(--text-heading);
  border-bottom-color: var(--lav);
}

.site-footer { border-top: 1px solid var(--border-subtle); }
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 34px;
  padding-bottom: 44px;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--muted);
}
.site-footer__links { display: flex; gap: 22px; }
.site-footer__links a { color: var(--muted-strong); }
.site-footer__links a:hover { color: var(--text-heading); }
.site-footer__inner > span a,
.contact-body a {
  text-decoration: underline;
  text-underline-offset: .16em;
}

/* --------------------------------------------------------------------------
   8. Home
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 104px 0 92px;
  text-align: center;
}
.hero__kicker { margin: 0 0 26px; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--text-heading);
  margin: 0;
  white-space: nowrap;
}
.hero__sub {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--muted-strong);
  margin: 24px auto 40px;
  max-width: 46ch;
  text-wrap: pretty;
}
.hero__search { max-width: 680px; margin: 0 auto; justify-content: center; }
.hero__note {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 22px 0 0;
}
.hero__sticker { position: absolute; z-index: 1; }
.hero__sticker--a { left: 0; top: 52px; }
.hero__sticker--b { right: 0; top: 46px; }
.hero__sticker--c { left: 2%; bottom: 26px; }

/* Featured build cards */
.feature-card {
  background: linear-gradient(160deg, var(--ink-panel-2), var(--ink-panel));
  border-radius: var(--radius-card-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform var(--duration-med) var(--ease-out);
}
.feature-card:hover { transform: translateY(-4px); }
.feature-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.feature-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -.02em;
  color: var(--cream);
  margin: 0;
  white-space: nowrap;
}
.feature-card__by {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--lav);
  white-space: nowrap;
  flex: none;
}
.feature-card__desc {
  font-family: var(--font-mono);
  font-size: .88rem;
  line-height: 1.7;
  color: rgba(245, 242, 232, .9);
  margin: 0;
  text-wrap: pretty;
}
.feature-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--border-inverse);
  margin-top: auto;
}
.feature-card__rating {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: rgba(245, 242, 232, .8);
  white-space: nowrap;
}
.feature-card__rating strong { color: var(--cream); }

.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-row--tight { gap: 6px; }

/* Underlined text link */
.link-underline {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-heading);
  border-bottom: 1px solid var(--lav);
  padding-bottom: 2px;
  white-space: nowrap;
}
.link-underline--cream { color: var(--cream); }
.link-underline--cream:hover { color: var(--lav); }

/* Wiki teaser */
.teaser {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.teaser__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--text-heading);
  margin: 0;
}
.teaser__body {
  font-family: var(--font-mono);
  font-size: .9rem;
  line-height: var(--leading-body);
  color: var(--muted-strong);
  margin: 0;
  max-width: 44ch;
  text-wrap: pretty;
}
.teaser__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }

.tile-stack { display: flex; flex-direction: column; gap: 12px; }
.tile {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.tile:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.tile__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-heading);
}
.tile__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
  margin-top: 6px;
}
.tile__arrow { font-family: var(--font-mono); font-size: 1.1rem; }
.tile__arrow--lav { color: var(--lav); }
.tile__arrow--pink { color: var(--pink); }
.tile__arrow--blue { color: var(--blue); }

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.section-head-row .section-header { margin-bottom: 48px; }
.section-head-row__link { margin-bottom: 52px; }

/* --------------------------------------------------------------------------
   9. Build cards (recent + archive grid)
   -------------------------------------------------------------------------- */

.build-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.build-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.build-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--text-heading);
  margin: 0;
}
.build-card__media { position: relative; }
.build-card__date {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  /* sits on top of the blueprint keys, so it needs its own opaque backdrop */
  background: rgba(26, 19, 46, .86);
  backdrop-filter: blur(2px);
  border: 1px solid var(--border-inverse);
  color: var(--cream);
}
.build-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.build-card__by { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); }
.build-card__link {
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 700;
  color: var(--text-heading);
}
.build-card__cta {
  margin-top: auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  padding: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-heading);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.build-card__cta:hover { background: var(--plum-deep); color: var(--cream); }

/* --------------------------------------------------------------------------
   10. Builds archive
   -------------------------------------------------------------------------- */

.archive__meta {
  font-family: var(--font-mono);
  font-size: .86rem;
  color: var(--muted);
  margin: 14px 0 32px;
}
.sort-btn {
  font-family: var(--font-mono);
  font-size: .85rem;
  padding: 19px 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--text-heading);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.sort-btn:hover { border-color: var(--hover-border); }

.result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--muted);
}
.result-bar strong { color: var(--text); }
.result-bar .is-filter { color: var(--kicker); }

.empty-state {
  grid-column: 1 / -1;
  padding: 56px 24px;
  text-align: center;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-card);
  font-family: var(--font-mono);
  font-size: .86rem;
  color: var(--muted);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 16px 0 40px;
  border-top: 1px solid var(--border-subtle);
}
.page-btn {
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-heading);
  cursor: pointer;
}
.page-btn--num { padding: 12px 20px; }
.page-btn[aria-current="page"] {
  font-weight: 700;
  border: none;
  background: var(--plum-deep);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   11. Build detail
   -------------------------------------------------------------------------- */

.crumbs {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  margin: 0 0 22px;
}
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; }

.detail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.detail-head__meta {
  font-family: var(--font-mono);
  font-size: .86rem;
  color: var(--muted);
  margin: 14px 0 0;
}
.detail-head__meta strong { color: var(--text); }
.detail-head__actions { display: flex; gap: 10px; align-items: center; }

.share-btn {
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  color: var(--text-heading);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.share-btn:hover { border-color: var(--hover-border); }

.detail-hero { position: relative; margin: 32px 0 40px; }
.detail-hero__sticker { position: absolute; right: 26px; top: -14px; }

.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.spec-row__k { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); white-space: nowrap; }
.spec-row__v {
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}
.spec-note { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); margin: 20px 0 0; }

.notes__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  color: var(--text-heading);
  margin: 0 0 16px;
}
.notes__p {
  font-family: var(--font-mono);
  font-size: .86rem;
  line-height: 1.8;
  color: var(--muted-strong);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.notes__mods {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.sound-panel { display: flex; flex-direction: column; gap: 22px; }
.meter__head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: rgba(245, 242, 232, .9);
  margin-bottom: 8px;
}
.meter__head strong { font-weight: 700; color: var(--cream); }
.meter__track {
  height: 6px;
  border-radius: 100px;
  background: rgba(245, 242, 232, .14);
  overflow: hidden;
}
.meter__fill { height: 100%; border-radius: 100px; }
.sound-panel__foot { padding-top: 18px; border-top: 1px solid var(--border-inverse); }
.sound-panel__text {
  font-family: var(--font-mono);
  font-size: .84rem;
  line-height: 1.7;
  color: rgba(245, 242, 232, .88);
  margin: 0 0 16px;
  text-wrap: pretty;
}

.gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.gallery-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -.03em;
  color: var(--text-heading);
  margin: 0;
}
.gallery-head__note {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  margin: 0;
  max-width: 44ch;
  text-align: right;
  text-wrap: pretty;
}

.shot {
  height: 100%;
  min-height: 190px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
}
.shot__label {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kicker);
}
.shot--plain { background: repeating-linear-gradient(45deg, var(--stripe) 0 10px, transparent 10px 20px); }
.shot--lav { background: repeating-linear-gradient(45deg, rgba(184, 169, 224, .18) 0 10px, transparent 10px 20px); }
.shot--pink { background: repeating-linear-gradient(45deg, rgba(232, 168, 192, .2) 0 10px, transparent 10px 20px); }
.shot--blue { background: repeating-linear-gradient(45deg, rgba(168, 200, 232, .22) 0 10px, transparent 10px 20px); }
.shot--blueprint {
  min-height: 190px;
  border: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ink-panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 0;
}
.shot--upload {
  min-height: 190px;
  border: 1.5px dashed var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
}
.shot--upload span { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); text-wrap: pretty; }
.shot--upload .btn-pill { font-size: .82rem; padding: 14px 26px; }

/* --------------------------------------------------------------------------
   12. Wiki
   -------------------------------------------------------------------------- */

.wiki-hero { border-bottom: 1px solid var(--border-subtle); }
.wiki-hero__inner { padding: 84px 0 76px; text-align: center; }
.wiki-hero__kicker { margin: 0 0 24px; }
.wiki-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--text-heading);
  margin: 0 auto;
  max-width: 22ch;
}
.wiki-hero__sub {
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--muted-strong);
  margin: 22px auto 36px;
  max-width: 52ch;
  text-wrap: pretty;
}
.wiki-hero__search { max-width: 640px; margin: 0 auto; justify-content: center; }

.wiki-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.wiki-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.wiki-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  color: var(--text-heading);
  margin: 0;
}
.wiki-card__desc {
  font-family: var(--font-mono);
  font-size: .85rem;
  line-height: var(--leading-body);
  color: var(--muted-strong);
  margin: 0;
  text-wrap: pretty;
}
.wiki-card__links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
  padding-top: 6px;
}
.wiki-card__links a { font-family: var(--font-mono); font-size: .82rem; color: var(--kicker); }
.wiki-card__links a:hover { color: var(--text-heading); }

.wiki-list {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
}
.wiki-list__row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-out);
}
.wiki-list__row:last-child { border-bottom: none; }
.wiki-list__row:hover { background: rgba(184, 169, 224, .12); }
.wiki-list__title { font-family: var(--font-mono); font-size: .9rem; color: var(--text); flex: 1; }
.wiki-list__when { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); white-space: nowrap; }

.tag-pill {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: #231933;
  white-space: nowrap;
  font-weight: 700;
}
.tag-pill--modding { background: var(--lav); }
.tag-pill--beginner { background: var(--blue); }
.tag-pill--glossary { background: var(--pink); }

.wiki-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 40px;
  background: var(--ink-panel);
  border-radius: var(--radius-card-lg);
  padding: 36px 40px;
}
.wiki-submit h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  color: var(--cream);
  margin: 0 0 10px;
}

/* --------------------------------------------------------------------------
   13. Community
   -------------------------------------------------------------------------- */

.form__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--text-heading);
  margin: 0 0 26px;
}
.form__names { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form__group { margin-bottom: 18px; }
.form__group-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 11px;
}
.form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.form__note {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--muted);
  max-width: 34ch;
  text-wrap: pretty;
}
.form__status {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--kicker);
  margin: 18px 0 0;
}
.error-summary {
  border: 1.5px solid var(--pink);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin-bottom: 24px;
  color: var(--text-heading);
}
.error-summary p { margin: 0 0 8px; font-weight: 700; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: underline; }
.field-error { color: var(--error); font-size: .76rem; overflow-wrap: anywhere; }
.field[aria-invalid="true"] { border-color: var(--error); }
.upload-progress { margin: 14px 0 0; padding-left: 20px; color: var(--muted); overflow-wrap: anywhere; }
.link-button { border: 0; padding: 4px; background: transparent; color: var(--kicker); text-decoration: underline; cursor: pointer; }
.skeleton { min-height: 230px; border-radius: var(--radius-card); background: linear-gradient(90deg, var(--surface) 20%, var(--surface-2) 45%, var(--surface) 70%); background-size: 200% 100%; animation: skeleton 1.4s linear infinite; }
@keyframes skeleton { to { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   Account / submission
   -------------------------------------------------------------------------- */

.submit-head,
.profile-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 34px;
}
.submit-head .lede,
.profile-head .lede { margin-bottom: 0; }
.submit-card { max-width: 860px; }
.submit-section {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  padding: 28px 0 0;
  margin: 0 0 30px;
  min-inline-size: 0;
}
.submit-section:first-child { border-top: 0; padding-top: 0; }
.submit-section__title {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kicker);
  padding: 0 12px 0 0;
}
.submit-section__title small { color: var(--muted); font-size: .7em; }
.submit-section > .form__note { margin: 0 0 20px; }
.submit-section--photos { margin-bottom: 4px; }

.profile-gate { max-width: 680px; margin: 30px auto; }
.profile-gate .lede { margin-bottom: 28px; }
.profile-head__actions { display: flex; align-items: center; gap: 14px; flex: none; }
.profile-summary {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 30px;
  margin-bottom: 58px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.profile-summary__identity { display: flex; flex-direction: column; gap: 6px; }
.profile-summary__handle { font-family: var(--font-display); font-size: 1.25rem; color: var(--text-heading); }
.profile-summary__email,
.profile-summary__since { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.profile-summary__email,
.profile-build__meta,
.moderation-card__meta { overflow-wrap: anywhere; word-break: break-word; }
.profile-stats { display: flex; gap: 28px; align-items: center; }
.profile-stats div { display: flex; flex-direction: column; gap: 4px; min-width: 64px; }
.profile-stats strong { font-family: var(--font-display); color: var(--text-heading); font-size: 1.5rem; }
.profile-stats span { font-family: var(--font-mono); color: var(--muted); font-size: .72rem; }
.profile-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.profile-group { min-width: 0; }
.profile-group .section-header { margin-bottom: 20px; }
.profile-group .section-header h2 { font-size: 1.1rem; }
.profile-build { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--border-subtle); }
.profile-build__name { font-family: var(--font-display); font-size: .92rem; color: var(--text-heading); margin: 0 0 5px; }
.profile-build__meta,
.profile-build__private { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); margin: 0; }
.profile-build__link { font-family: var(--font-mono); color: var(--kicker); font-size: .75rem; white-space: nowrap; }
.profile-build__link:hover { color: var(--text-heading); }

.contact-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cream);
  margin: 0 0 10px;
}
.contact-body {
  font-family: var(--font-mono);
  font-size: .85rem;
  line-height: 1.7;
  color: rgba(245, 242, 232, .86);
  margin: 0 0 16px;
}
.card .contact-title { color: var(--text-heading); }
.card .contact-body { color: var(--muted-strong); }
.contact-mail {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  color: var(--cream);
  border-bottom: 1px solid var(--lav);
  padding-bottom: 3px;
}
.contact-mail:hover { color: var(--lav); }

.link-rows { display: flex; flex-direction: column; gap: 10px; }
.link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.link-row:hover { border-color: var(--hover-border); }
.link-row span:first-child { font-family: var(--font-mono); font-size: .85rem; color: var(--text); }

.updates-list { display: flex; flex-direction: column; gap: 0; }
.update-item { padding: 16px 0; border-top: 1px solid var(--border-subtle); }
.update-item:first-child { padding-top: 4px; border-top: 0; }
.update-item:last-child { padding-bottom: 0; }
.update-item time {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--kicker);
}
.update-item h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: .92rem;
  color: var(--text-heading);
}
.update-item p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--muted-strong);
}

.suggest-card { display: flex; flex-direction: column; gap: 14px; }
.suggest-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-heading);
  margin: 0;
}
.suggest-card p {
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.7;
  color: var(--muted-strong);
  margin: 0;
  text-wrap: pretty;
}
.suggest-card .btn-pill { align-self: flex-start; }

/* --------------------------------------------------------------------------
   14. Login
   -------------------------------------------------------------------------- */

.login { width: 100%; max-width: 520px; position: relative; }
.login__sticker { position: absolute; left: -46px; top: -18px; z-index: 1; }
.login__card { padding: 40px; }
.login__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  letter-spacing: -.035em;
  color: var(--text-heading);
  margin: 0;
}
.login__sub {
  font-family: var(--font-mono);
  font-size: .88rem;
  color: var(--muted-strong);
  margin: 14px 0 30px;
  text-wrap: pretty;
}
.login__oauth {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  padding: 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--text-heading);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.login__oauth:hover { border-color: var(--hover-border); background: var(--hover-soft); }
.login__divider { display: flex; align-items: center; gap: 14px; margin: 26px 0; }
.login__divider span:first-child,
.login__divider span:last-child { flex: 1; height: 1px; background: var(--border-subtle); }
.login__divider em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .76rem;
  color: var(--muted);
}
.login__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.login__alt {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--kicker);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 0 2px;
  background: transparent;
  cursor: pointer;
}
.login .label { margin-bottom: 18px; }
.login .label--last { margin-bottom: 28px; }

/* --------------------------------------------------------------------------
   15. Themes page — side-by-side theme specimens
   -------------------------------------------------------------------------- */

.spec {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  color: var(--text);
}
.spec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.spec__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.025em;
  color: var(--text-heading);
  margin: 0;
}
.spec__role {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kicker);
  white-space: nowrap;
}
.spec__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.spec__nav .wordmark { gap: 3px; }
.spec__nav .wordmark__key { font-size: .6rem; width: 18px; height: 18px; border-radius: 4px; }
.spec__nav .wordmark__sep { width: 5px; height: 5px; margin: 0 4px; }
.spec__links { display: flex; gap: 13px; font-family: var(--font-mono); font-size: .74rem; }
.spec__links span { color: var(--muted); }
.spec__links .is-active {
  color: var(--text-heading);
  font-weight: 700;
  border-bottom: 2px solid var(--lav);
  padding-bottom: 2px;
}
.spec__search { display: flex; gap: 10px; }
.spec__search .field { flex: 1; min-width: 0; padding: 14px 20px; font-size: .84rem; }
.spec__search-field { color: var(--kicker); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec__search-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--plum-deep);
  color: var(--cream);
  white-space: nowrap;
}
.spec__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.spec__pill {
  font-family: var(--font-mono);
  font-size: .75rem;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  color: var(--text-heading);
}
.spec__pill.is-on {
  border-color: var(--plum-deep);
  background: var(--plum-deep);
  color: var(--cream);
  font-weight: 700;
}
.spec__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.spec__mini {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.spec__mini h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: -.02em;
  color: var(--text-heading);
  margin: 0;
}
.spec__mini-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
}
.spec__mini-foot strong { font-weight: 700; color: var(--text-heading); }
.spec__sound {
  background: var(--ink-panel);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.spec__sound .kicker { font-size: .66rem; margin: 0; }
.spec__sound .meter__head { font-size: .72rem; margin-bottom: 7px; }
.spec__sound p {
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.65;
  color: rgba(245, 242, 232, .86);
  margin: auto 0 0;
  text-wrap: pretty;
}
.spec__article {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 20px 22px;
}
.spec__article .kicker { font-size: .66rem; margin: 0 0 10px; }
.spec__article h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--text-heading);
  margin: 0 0 10px;
}
.spec__article p {
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.85;
  color: var(--muted-strong);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.spec__article-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.spec__article-foot span:last-child {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   16. Blueprint (KeebBlueprint component)
   -------------------------------------------------------------------------- */

.blueprint {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.blueprint__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(245, 242, 232, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 242, 232, .055) 1px, transparent 1px);
  background-size: 13px 13px;
}
.blueprint__tick { position: absolute; width: 9px; height: 9px; }
.blueprint__tick--tl { left: 7px; top: 7px; }
.blueprint__tick--br { right: 7px; bottom: 7px; }
.blueprint__rows {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 3px;
}
.blueprint__row { display: flex; width: 100%; }
.blueprint__key { border-radius: 3px; box-sizing: border-box; }
.blueprint__caption {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245, 242, 232, .68);
  white-space: nowrap;
  overflow: hidden;
}
.blueprint__caption span:first-child { flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; }
.blueprint__caption span:last-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

/* --------------------------------------------------------------------------
   17. Responsive
   The source prototype is a fixed desktop canvas; these are the breakpoints
   that carry it down to tablet and phone.
   -------------------------------------------------------------------------- */

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

@media (max-width: 900px) {
  .wrap { padding: 0 28px; }
  .grid--2,
  .grid--wiki,
  .grid--community { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 72px 0 64px; }
  .hero__title { white-space: normal; }
  .hero__sticker { display: none; }
  .cta-panel { flex-direction: column; align-items: flex-start; gap: 28px; }
  .cta-panel__action { align-items: flex-start; }
  .panel { padding: 32px; }
  .wiki-submit { flex-direction: column; align-items: flex-start; }
  .gallery-head { flex-direction: column; align-items: flex-start; }
  .gallery-head__note { text-align: left; }
  .login__sticker { position: static; display: block; margin-bottom: 16px; }
  .profile-groups { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .site-header__inner { padding-top: 14px; padding-bottom: 14px; flex-direction: column; align-items: stretch; }
  .site-header__brand { width: 100%; }
  .wordmark-tag { display: none; }
  .site-header__tools { width: 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .site-nav { width: 100%; gap: 10px 14px; flex-wrap: wrap; }
  .site-nav a { font-size: .8rem; padding: 4px 0; }
  .searchbar { flex-wrap: wrap; }
  .searchbar .field { flex: 1 1 100%; }
  .searchbar .btn,
  .sort-btn { flex: 1; }
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .section-head-row { flex-direction: column; align-items: flex-start; gap: 0; }
  .section-head-row .section-header { margin-bottom: 20px; }
  .section-head-row__link { margin-bottom: 28px; }
  .result-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .form__names { grid-template-columns: 1fr; }
  .form__foot { flex-direction: column; align-items: flex-start; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__links { flex-wrap: wrap; }
  .submit-head,
  .profile-head { align-items: flex-start; flex-direction: column; }
  .profile-head__actions { flex-wrap: wrap; }
  .profile-summary { flex-direction: column; padding: 22px; }
  .profile-stats { justify-content: space-between; }
  .detail-hero__sticker { right: 10px; }
  .card { padding: 22px; }
  .card--pad-lg,
  .login__card { padding: 24px; }
}

@media (max-width: 520px) {
  .wrap { padding: 0 18px; }
  .wordmark__key { width: 19px; height: 19px; font-size: .62rem; }
  .btn { padding: 18px 28px; font-size: .9rem; }
  .searchbar .btn { padding: 0 24px; }
  .site-nav { justify-content: space-between; gap: 6px 10px; }
  .site-nav a { font-size: .75rem; }
  .form__foot .btn,
  .profile-head__actions,
  .profile-head__actions .btn { width: 100%; }
  .profile-summary { gap: 20px; }
  .profile-summary__identity { width: 100%; }
  .profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 10px; }
  .profile-stats div { min-width: 0; text-align: center; }
  .spec { padding: 16px; }
  .spec__head,
  .spec__nav,
  .spec__search,
  .spec__article-foot { flex-direction: column; align-items: stretch; }
  .spec__role { white-space: normal; }
  .spec__links { flex-wrap: wrap; }
  .spec__search button { width: 100%; }
  .spec__pair { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .feature-card:hover,
  .build-card:hover,
  .tile:hover,
  .wiki-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Backend-connected additions
   -------------------------------------------------------------------------- */
.login__modes { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px; }
.login__modes .pill { cursor:pointer; }
.shot--photo { overflow:hidden; padding:0; background:var(--deep); }
.shot--photo img { display:block; width:100%; height:100%; min-height:180px; object-fit:cover; }
.label small { color:var(--muted); font:inherit; text-transform:none; }
.moderation-section { margin-top:64px; }
.moderation-card { display:flex; flex-direction:column; gap:10px; }
.moderation-card__title { margin:0; font-family:var(--font-display); font-size:1.15rem; }
.moderation-card__meta { color:var(--muted); font-size:.85rem; }
.moderation-card__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:16px; }