/**
 * components.css — reusable site-level components: Now, project card, Lab
 * Bento, Notes rows, Featured Article, Connect, footer theme control,
 * buttons, single/archive scaffolding.
 *
 * The Hero and scroll cue live in their own hero.css — this theme authors
 * the Hero markup directly (see template-parts/hero.php), so there's no
 * "add these classes in Elementor" contract to document here anymore.
 *
 * Static visual states only. Pointer-driven / JS-toggled states live in
 * interactions.css.
 */

/* ======================================================================
   01 · Now
   ====================================================================== */

.now {
  display: grid;
  gap: var(--space-16);
  grid-template-columns: 1fr;
}

@media (min-width: 1200px) {
  .now {
    grid-template-columns: 7fr 4fr;
    gap: var(--space-24);
    align-items: start;
  }
}

.now__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: none;
  margin-bottom: var(--space-4);
}

.now__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-yellow);
  animation: sayid-now-pulse var(--motion-ambient) ease-in-out infinite;
}

@keyframes sayid-now-pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.now__statement {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.4;
  max-width: 32ch;
}

.now__link {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--color-purple);
}

.now__signals {
  display: grid;
  gap: var(--space-6);
}

.now__signal dt {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.now__signal dd {
  margin: 0;
  font-size: var(--text-large);
  font-weight: 500;
}

.now__updated {
  margin-top: var(--space-12);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* ======================================================================
   02 · Selected Work
   ====================================================================== */

.section__intro {
  margin-bottom: var(--space-16);
  max-width: var(--editorial-max);
}

.section__title {
  font-size: var(--text-h2);
}

.section__lede {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-large);
  max-width: 46ch;
}

.section__cta {
  display: inline-block;
  margin-top: var(--space-12);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Title + CTA on one row, CTA at the far end of the line — used where the
   "all X" link sits beside the heading instead of below the grid/list. */
.section__intro--row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: none;
}

.section__cta--inline {
  margin-top: 0;
  white-space: nowrap;
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid .project-card--featured { grid-column: 1 / -1; }
}

.work-grid--archive {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .work-grid--archive { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .work-grid--archive { grid-template-columns: repeat(3, 1fr); }
}

.project-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.project-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.project-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface-subtle);
}

.project-card--featured .project-card__media {
  aspect-ratio: 21 / 10;
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-out);
}

.project-card:hover .project-card__media img {
  transform: scale(1.02);
}

.project-card__body {
  padding: var(--space-6) var(--space-6) var(--space-8);
}

.project-card__context {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.project-card__title {
  font-size: var(--text-h3);
}

.project-card--featured .project-card__title {
  font-size: var(--text-h2);
}

.project-card__desc {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

/* ======================================================================
   03 · Lab (Bento)
   ====================================================================== */

.lab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .lab-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The homepage's Lab section specifically: a plain 3-column grid (2 rows
   of 6 smaller cards), not the bento layout — scoped to .section--lab so
   the archive page's .lab-grid.lab-grid--archive (its own 3-col rule,
   below) is unaffected. */
@media (min-width: 1200px) {
  .section--lab .lab-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.section--lab .lab-card__body {
  padding: var(--space-5);
  gap: var(--space-2);
}

.section--lab .lab-card__title {
  font-size: var(--text-body);
}

.section--lab .lab-card__desc {
  font-size: var(--text-small);
}

.lab-grid--archive {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .lab-grid--archive { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .lab-grid--archive { grid-template-columns: repeat(3, 1fr); } }

.lab-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  isolation: isolate;
}

.lab-card__link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.lab-card__body {
  position: relative;
  z-index: 1;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}

.lab-card__status {
  align-self: flex-start;
  font-size: var(--text-small);
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

.lab-card__status[data-status="building"],
.lab-card__status[data-status="beta"] {
  color: var(--color-purple);
}

.lab-card__status[data-status="shipped"] {
  color: #1a7f37;
}

.lab-card__title {
  font-size: var(--text-h3);
}

.lab-card__desc {
  color: var(--color-text-muted);
  margin-top: auto;
}

/* Interactive border layer — base (dormant) state; pointer-driven reveal is
   defined in interactions.css. */
.lab-card__border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  border: 1px solid var(--color-border);
}

/* ======================================================================
   04 · Signature — Design × Code × AI
   ====================================================================== */

/* This section borrows Hero's exact surface tones (--signature-bg mirrors
   --hero-bg's light/dark values) so the two read as one visual family
   instead of the Hero being light and this being a permanently-dark
   "immersive moment" — the rest of the palette just follows the site's
   normal theme-aware tokens. */
.section--signature {
  --signature-bg: #eef1f4;
  --signature-text: var(--color-text);
  --signature-text-muted: var(--color-text-muted);
  --signature-surface: var(--color-surface);
  --signature-line: var(--color-border);
  --signature-line-active: var(--color-yellow);

  background: var(--signature-bg);
  color: var(--signature-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section--signature {
    --signature-bg: #101218;
  }
}

:root[data-theme="dark"] .section--signature {
  --signature-bg: #101218;
}

.signature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-12);
}

.signature__intro {
  max-width: 46ch;
}

.signature__eyebrow {
  font-size: var(--text-small);
  color: var(--signature-text-muted);
  margin-bottom: var(--space-3);
}

.signature__title {
  font-size: var(--text-h1);
  max-width: 20ch;
}

.signature__thesis {
  margin-top: var(--space-6);
  font-size: var(--text-large);
  color: var(--signature-text-muted);
}

/* ---------- Venn diagram ----------
   Three solid, distinctly colored circles (طراحی/کد/هوش‌مصنوعی) at partial
   opacity — plain alpha compositing, so overlaps read as a naturally
   blended tint with no reliance on `color-mix()`/`mix-blend-mode` support.
   Each pairwise + the triple overlap is a separately clipped SVG shape
   (see inc/render.php) that gets a stronger highlight on demand via the
   chip buttons. */

.signature-venn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.signature-venn__diagram {
  width: min(100%, 360px);
}

.signature-venn__circle {
  fill: var(--signature-circle-color, var(--color-purple));
  fill-opacity: .78;
}

.signature-venn__circle--design { --signature-circle-color: #5851c0; }
.signature-venn__circle--code { --signature-circle-color: #ffba20; }
.signature-venn__circle--ai { --signature-circle-color: #14c8c8; }

.signature-venn__overlap {
  fill: transparent;
  transition: fill var(--motion-normal) var(--ease-out), fill-opacity var(--motion-normal) var(--ease-out);
}

.signature-venn__overlap.is-active {
  fill: var(--signature-text);
  fill-opacity: .25;
}

.signature-venn__overlap--triple.is-active {
  fill: var(--color-yellow);
  fill-opacity: .55;
}

.signature-venn__label {
  fill: var(--signature-text-muted);
  font-size: 15px;
  font-family: var(--font-family);
}

.signature-venn__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.signature-venn__chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--signature-line);
  background: var(--signature-surface);
  color: var(--signature-text-muted);
  font-size: var(--text-small);
  transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.signature-venn__chip.is-active,
.signature-venn__chip:hover,
.signature-venn__chip:focus-visible {
  color: var(--signature-text);
  border-color: var(--signature-line-active);
}

.signature__relationship {
  margin-top: var(--space-6);
  color: var(--signature-text-muted);
  min-height: 3em;
}

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

  .signature__intro {
    max-width: none;
  }
}

/* ======================================================================
   05 · Latest Notes
   ====================================================================== */

.note-list {
  border-top: 1px solid var(--color-border);
}

.note-row {
  border-bottom: 1px solid var(--color-border);
}

.note-row__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--motion-fast) var(--ease-out);
}

.note-row__link:hover,
.note-row__link:focus-visible {
  background: var(--color-surface-subtle);
}

.note-row__date {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.note-row__title-group {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
  overflow: hidden;
}

.note-row__title {
  font-weight: 500;
  flex: 0 0 auto;
}

/* Filled in on hover by assets/js/note-row-typewriter.js, from the
   data-note-excerpt attribute — empty (and inert) until then. Clipped to
   one line: the JS also stops appending characters once this starts to
   overflow, so it never types past what's actually visible. */
.note-row__excerpt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.note-row__tag {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .note-row__link {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .note-row__date,
  .note-row__tag {
    order: -1;
  }
}

/* ======================================================================
   06 · Articles — compact grid, several small cards rather than one large
   featured card, so multiple posts fit without dominating the page.
   ====================================================================== */

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .article-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.article-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.article-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-subtle);
  overflow: hidden;
}

.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card__body {
  padding: var(--space-4) var(--space-4) var(--space-6);
}

.article-card__title {
  font-size: var(--text-large);
}

.article-card__title a {
  text-decoration: none;
}

.article-card__excerpt {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.article-card__meta {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* ======================================================================
   07 · Connect
   ====================================================================== */

.connect {
  text-align: center;
  max-width: 40rem;
}

.connect__title {
  font-size: var(--text-h1);
}

.connect__sub {
  margin-top: var(--space-2);
  font-size: var(--text-h3);
  color: var(--color-text-muted);
}

.connect__support {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
}

.connect__actions {
  margin-top: var(--space-12);
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ======================================================================
   Buttons
   ====================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
  transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.btn--primary {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn--primary:hover { transform: translateY(-1px); }

.btn--ghost {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
}

.btn--ghost:hover {
  background: var(--color-surface-subtle);
}

.btn--dark {
  background: #1b1d29;
  color: #fff;
}

.btn--dark:hover { transform: translateY(-1px); }

.btn--accent {
  background: var(--color-purple);
  color: #fff;
}

.btn--accent:hover { transform: translateY(-1px); }

.btn:hover,
.btn:focus-visible,
.btn:active {
  background: var(--color-yellow);
  color: #fff;
}

/* ======================================================================
   Site header / nav (shared between .site-header and .home-hero__nav)
   ====================================================================== */

.site-header {
  background: var(--color-bg);
  padding-block: clamp(16px, 3vh, 24px);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.site-nav__list li {
  position: relative;
}

.site-nav__list a {
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text);
}

/* Same specificity as the global `a:hover` in base.css (one class + `a`
   vs. `a` + `:hover`), so without this the unconditional color above
   would win the cascade tie by source order and hover would never show. */
.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--color-yellow);
}

.site-nav__list .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: var(--space-1);
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

/* Dropdown submenu — WordPress nests a plain `.sub-menu` <ul> inside the
   parent <li>; without this it just flows inline in normal document order
   instead of appearing as a dropdown. */
.site-nav__list .sub-menu {
  position: absolute;
  inset-inline-start: 0;
  /* No gap between the link and this box: the parent's :hover state only
     survives while the pointer stays over the parent <li> or one of its
     descendants, so a `margin-top` here would open a dead zone the mouse
     has to cross in mid-air — leaving it before ever reaching the
     dropdown, which is what was closing the menu while moving toward it. */
  inset-block-start: 100%;
  z-index: var(--z-header);
  min-width: 180px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              visibility var(--motion-fast);
}

.site-nav__list .sub-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus-visible {
  background: var(--color-surface-subtle);
}

/* `.is-open` is the touch path: on a device with no real hover, nav.js
   turns the first tap on a parent item into an open instead of a
   navigation, so nested items stay reachable. */
.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu,
.site-nav__list .menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Order for all three of these (.site-nav__menu, .site-nav__mark,
   .site-nav__switch-slot) comes from an inline `order` style, set from
   Appearance → Customize → هدر — see template-parts/site-nav.php. */
.site-nav__switch-slot {
  display: flex;
  align-items: center;
}

.site-nav__mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}

.site-nav__mark-label {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.site-nav__mark-role {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--color-border);
}

@media (max-width: 600px) {
  .site-nav__mark-role {
    display: none;
  }
}

.site-nav__mark-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 700;
  font-size: var(--text-small);
}

@media (max-width: 767px) {
  .site-nav__list {
    gap: var(--space-4);
  }
}

/* ======================================================================
   Site footer
   ====================================================================== */

.site-footer {
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* One row: the copyright line sits at the DOM/visual start (site is RTL,
   so that's the right edge), the nav links + socials group sits at the
   end (left edge) — see footer.php. */
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-signature {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.footer-links-group {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.footer-links {
  display: flex;
  align-items: center;
}

/* wp_nav_menu()'s own <ul> (menu_class="footer-links__list") — see
   sayid_footer_nav() in inc/template-tags.php. */
.footer-links__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a {
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-yellow);
}

.footer-icons__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-icons__social a {
  display: flex;
  color: var(--color-text-muted);
}

.footer-icons__social a:hover,
.footer-icons__social a:focus-visible {
  color: var(--color-yellow);
}

@media (max-width: 600px) {
  .footer-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links-group {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* ======================================================================
   Theme switch (header control, sits next to the logo mark)
   ====================================================================== */

.theme-switch {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  z-index: var(--z-theme-switch);
}

.theme-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.theme-switch__btn[aria-pressed="true"] {
  background: var(--color-surface-subtle);
  color: var(--color-text);
  font-weight: 500;
}

/* ======================================================================
   Single / archive scaffolding (Notes, Lab, Projects, Topic)
   ====================================================================== */

.archive__header {
  margin-bottom: var(--space-16);
}

.archive__eyebrow {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.archive__title {
  font-size: var(--text-h1);
}

.archive__lede {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-large);
  max-width: 46ch;
}

.archive-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-12);
}

.archive-tabs__item {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: none;
}

.archive-tabs__item:hover,
.archive-tabs__item:focus-visible {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.archive-tabs__item.is-active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.archive__pagination {
  margin-top: var(--space-16);
}

.archive__empty {
  color: var(--color-text-muted);
}

.prose {
  max-width: var(--editorial-max);
  font-size: var(--text-body);
}

.prose > * + * {
  margin-top: var(--space-6);
}

.prose h2 { font-size: var(--text-h3); margin-top: var(--space-12); }
.prose h3 { font-size: var(--text-large); margin-top: var(--space-8); }
.prose img { border-radius: var(--radius-md); }
.prose a { text-decoration-color: var(--color-border-strong); }

.single-note__header,
.single-lab__header,
.single-project__header {
  margin-bottom: var(--space-12);
}

.single-note__back,
.single-lab__back,
.single-project__back {
  display: inline-block;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--space-6);
}

.single-note__date {
  display: block;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.single-note__title,
.single-lab__title,
.single-project__title {
  font-size: var(--text-h1);
  margin-top: var(--space-2);
}

.single-project__lede {
  margin-top: var(--space-4);
  font-size: var(--text-large);
  color: var(--color-text-muted);
}

.single-note__tags {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.single-note__tags a {
  font-size: var(--text-small);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text-muted);
}

.single-note__tags a:hover,
.single-note__tags a:focus-visible {
  color: var(--color-yellow);
  border-color: var(--color-yellow);
}

.single-note__cover,
.single-lab__cover,
.single-project__cover {
  margin: var(--space-8) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.single-note__source {
  margin-top: var(--space-8);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.single-lab__meta,
.single-project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.single-lab__meta dt,
.single-project__meta dt {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.single-lab__meta dd,
.single-project__meta dd {
  margin: 0;
  font-weight: 500;
}

.single-lab__links {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.single-project__block {
  max-width: var(--editorial-max);
  margin-top: var(--space-16);
}

.single-project__gallery {
  margin-top: var(--space-16);
  display: grid;
  gap: var(--space-4);
}

/* ======================================================================
   Related content rail
   ====================================================================== */

.related-content {
  margin-top: var(--space-24);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
}

.related-content__title {
  font-size: var(--text-h3);
  margin-bottom: var(--space-6);
}

.related-content__list {
  display: grid;
  gap: var(--space-3);
}

.related-content__item a {
  display: flex;
  gap: var(--space-3);
  text-decoration: none;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.related-content__type {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  min-width: 6ch;
}

.related-content__label {
  font-weight: 500;
}

/* ======================================================================
   Contact form
   ====================================================================== */

.contact-channels {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-8);
  color: var(--color-text-muted);
}

.contact-channels a {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-channels a:hover,
.contact-channels a:focus-visible {
  color: var(--color-yellow);
}

.contact-form__honeypot {
  position: absolute;
  inset-inline-start: -9999px;
}

.contact-form label {
  font-size: var(--text-small);
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  margin-top: var(--space-1);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-body);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.notice {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid;
}

.notice-success {
  background: color-mix(in srgb, #1a7f37 12%, var(--color-surface));
  border-color: #1a7f37;
}

.notice-error {
  background: color-mix(in srgb, #d1242f 12%, var(--color-surface));
  border-color: #d1242f;
}