:root {
  --spectral-canvas: var(--wp--preset--color--two, #222022);
  --spectral-surface: var(--wp--preset--color--surface, #2a282d);
  --spectral-surface-strong: var(--wp--preset--color--surface-strong, #1b1a1e);
  --spectral-ink: var(--wp--preset--color--one, #ebe2c2);
  --spectral-muted: var(--wp--preset--color--muted-cream, #cfc6aa);
  --spectral-highlight: var(--wp--preset--color--highlight, #b68d68);
  --spectral-border: rgba(235, 226, 194, 0.24);
  --spectral-border-strong: rgba(235, 226, 194, 0.72);
  --spectral-font: var(--wp--preset--font-family--inter, "Inter", sans-serif);
}

body {
  background: var(--spectral-canvas);
  color: var(--spectral-ink);
  font-family: var(--spectral-font);
}

a {
  color: inherit;
  text-decoration-color: var(--spectral-highlight);
  text-underline-offset: 0.16em;
}

.wp-site-blocks,
.editor-styles-wrapper {
  background:
    linear-gradient(90deg, rgba(235, 226, 194, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(235, 226, 194, 0.035) 1px, transparent 1px),
    var(--spectral-canvas);
  background-size: 72px 72px;
}

.spectral-template-shell {
  margin: 0 auto;
  max-width: 1240px;
  padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem);
}

.spectral-template-frame,
.spectral-card,
.spectral-rail,
.spectral-callout,
.spectral-media-frame {
  background: linear-gradient(180deg, rgba(42, 40, 45, 0.96), rgba(27, 26, 30, 0.96));
  border: 2px solid var(--spectral-border);
  border-radius: 0;
  box-shadow: none;
  color: var(--spectral-ink);
}

.spectral-template-frame {
  padding: clamp(1.25rem, 3vw, 2.75rem);
}

.spectral-card,
.spectral-rail,
.spectral-callout {
  padding: clamp(1rem, 2vw, 1.5rem);
}

.spectral-kicker,
.spectral-label,
.spectral-meta {
  color: var(--spectral-muted);
  font-size: clamp(0.72rem, 1vw, 0.84rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.spectral-rule {
  border-top: 2px solid var(--spectral-border-strong);
  margin-block: clamp(1.25rem, 3vw, 2rem);
}

.spectral-grid-two {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
}

.spectral-grid-three {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spectral-list-plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

.spectral-list-plain li {
  border-top: 1px solid var(--spectral-border);
  padding: 0.8rem 0;
}

.spectral-template-frame :where(.wp-block-post-title, h1, h2, h3),
.editor-styles-wrapper :where(.wp-block-post-title, h1, h2, h3) {
  color: var(--spectral-ink);
  letter-spacing: -0.04em;
}

.spectral-template-frame :where(.wp-block-post-content, .wp-block-post-excerpt, p, li),
.spectral-card :where(p, li),
.spectral-rail :where(p, li),
.editor-styles-wrapper :where(.wp-block-post-content, p, li) {
  color: var(--spectral-muted);
}

.spectral-template-frame .wp-block-post-featured-image img,
.spectral-media-frame img,
.spectral-media-frame iframe {
  border: 2px solid var(--spectral-border);
  border-radius: 0;
}

.spectral-template-frame .wp-block-button__link,
.spectral-card .wp-block-button__link,
.spectral-rail .wp-block-button__link {
  background: var(--spectral-ink);
  border: 2px solid var(--spectral-ink);
  border-radius: 0;
  color: var(--spectral-surface-strong);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spectral-template-frame .wp-block-button.is-style-outline .wp-block-button__link,
.spectral-card .wp-block-button.is-style-outline .wp-block-button__link,
.spectral-rail .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--spectral-ink);
}

.spectral-template-frame :where(input, textarea, select) {
  background: var(--spectral-surface-strong);
  border: 2px solid var(--spectral-border);
  border-radius: 0;
  color: var(--spectral-ink);
}

@media (max-width: 860px) {
  .spectral-grid-two,
  .spectral-grid-three {
    grid-template-columns: 1fr;
  }
}