/* =====================================================
   AMEM™ DESIGN SYSTEM
   ─────────────────────────────────────────────────────
   Site Canonical palette · Cormorant Garamond display ·
   Source Serif 4 body · JetBrains Mono technical
   Manifesto-deck compositional energy
   ─────────────────────────────────────────────────────
   Atom Works™, Corp.
   ===================================================== */

:root {
  --blood:        #C8392E;
  --blood-dark:   #9F2A21;
  --blood-soft:   #E89E96;
  --black:        #0A0A0B;
  --black-warm:   #1A1A1A;
  --paper:        #F5F1E8;
  --paper-warm:   #FAF7EC;
  --gold:         #8C6E2A;
  --gold-bright:  #B89614;
  --gray-text:    #A8A39A;
  --gray-faded:   #7A756C;
  --ink:          #1A1A1A;

  --font-display: "Cormorant Garamond", Garamond, "Times New Roman", Georgia, serif;
  --font-body:    "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", "Liberation Mono", "Courier New", monospace;

  --container-max: 1280px;
  --reading-max:   720px;
  --gutter:        max(24px, 4vw);
}

/* ================ RESET ================ */

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

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

body {
  margin: 0;
  background: var(--paper-warm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--blood);
  text-decoration: none;
  transition: color 180ms ease;
}
a:hover { color: var(--blood-dark); }

button { font-family: inherit; }

::selection { background: var(--blood); color: var(--paper-warm); }

/* ================ TYPOGRAPHY ================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--black);
  margin: 0 0 0.5em 0;
}

h1 { font-size: clamp(2.6rem, 5.5vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
h4 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }

p { margin: 0 0 1.1em 0; }

em { font-style: italic; }
strong { font-weight: 700; color: var(--black); }

.lead {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.5;
}

/* ================ LAYOUT PRIMITIVES ================ */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-narrow {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.reading {
  max-width: var(--reading-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(64px, 9vw, 140px) 0;
}

.section--dark {
  background: var(--black);
  color: var(--paper);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark strong {
  color: var(--paper);
}

.section--paper {
  background: var(--paper);
}

/* ================ TAPE STRIPE ================ */

.tape-stripe {
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--black) 0px,
    var(--black) 12px,
    var(--blood) 12px,
    var(--blood) 24px
  );
}

.tape-stripe--inverse {
  background: repeating-linear-gradient(
    -45deg,
    var(--paper) 0px,
    var(--paper) 12px,
    var(--blood) 12px,
    var(--blood) 24px
  );
}

/* ================ EYEBROWS & LABELS ================ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blood);
}

.eyebrow--gold {
  color: var(--gold);
}

.eyebrow--paper {
  color: var(--paper);
}

.label-mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blood);
}

/* ================ SECTION MARK (Roman numeral) ================ */

.section-mark {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-bottom: 1.4em;
}

.section-mark__roman {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  color: var(--blood);
  line-height: 1;
  flex-shrink: 0;
  min-width: 60px;
}

.section-mark__heading {
  font-size: clamp(2rem, 4vw, 3.6rem);
  margin: 0;
}

/* ================ CALLOUT — BLACK MANIFESTO ================ */

.callout-black {
  background: var(--black);
  color: var(--paper);
  padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px);
  margin: clamp(32px, 5vw, 64px) 0;
  border-left: 8px solid var(--blood);
  position: relative;
}

.callout-black .callout-black__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blood);
  margin-bottom: 14px;
  display: block;
}

.callout-black .callout-black__text {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-style: italic;
  line-height: 1.32;
  color: var(--paper);
  font-weight: 400;
}

.callout-black .callout-black__text strong {
  font-weight: 700;
  color: var(--paper);
  font-style: normal;
}

.callout-black .gold-em {
  color: var(--gold-bright);
  font-weight: 700;
}

/* ================ CARD — CREAM ================ */

.card-cream {
  background: var(--paper);
  border: 1px solid rgba(10, 10, 11, 0.10);
  border-left: 6px solid var(--blood);
  padding: clamp(24px, 3vw, 36px);
  margin: 24px 0;
}

.card-cream--patent {
  border-left-color: var(--gold);
}

/* ================ HEADER ================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper-warm);
  border-bottom: 1px solid rgba(10, 10, 11, 0.08);
  backdrop-filter: blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
  max-width: var(--container-max);
  margin: 0 auto;
  gap: 32px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--black);
}

.site-header__mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.site-header__wordmark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1;
}

.site-header__wordmark .tm {
  font-family: var(--font-mono);
  font-size: 0.55em;
  font-weight: 400;
  color: var(--blood);
  vertical-align: super;
  margin-left: 2px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--black);
  font-weight: 500;
  position: relative;
}

.site-nav a:hover {
  color: var(--blood);
}

.site-nav a.current::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0; right: 0;
  height: 1px;
  background: var(--blood);
}

.site-nav__cta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--paper) !important;
  padding: 11px 18px;
  transition: background 180ms ease;
}

.site-nav__cta:hover {
  background: var(--blood);
  color: var(--paper) !important;
}

/* ================ MOBILE NAV ================ */

.site-nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(10, 10, 11, 0.20);
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  transition: border-color 180ms ease;
}
.site-nav__toggle:hover { border-color: var(--blood); }

.site-nav__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  transition: transform 220ms ease, opacity 180ms ease;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  background: var(--paper-warm);
  border-top: 1px solid rgba(10, 10, 11, 0.10);
  border-bottom: 4px solid var(--blood);
  padding: 0;
}
.mobile-nav[hidden] { display: none !important; }
.mobile-nav.is-open {
  display: block;
  animation: amem-slide-down 220ms ease;
}

@keyframes amem-slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--black);
  padding: 14px 0;
  border-bottom: 1px solid rgba(10, 10, 11, 0.08);
  letter-spacing: -0.01em;
  display: block;
}
.mobile-nav a:hover,
.mobile-nav a:focus { color: var(--blood); }

.mobile-nav__cta {
  margin-top: 16px;
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background: var(--black);
  color: var(--paper) !important;
  padding: 14px 22px !important;
  text-align: center !important;
  border-bottom: none !important;
}
.mobile-nav__cta:hover {
  background: var(--blood);
  color: var(--paper) !important;
}

@media (max-width: 768px) {
  .site-nav { display: none; }
  .site-nav__toggle { display: flex; }
}

/* keep prev rule out for clarity — nav hides at 768px now */

/* ================ HERO ================ */

.hero {
  padding: clamp(72px, 12vw, 180px) 0 clamp(48px, 8vw, 120px) 0;
  position: relative;
  overflow: hidden;
}

.hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.hero__eyebrow {
  margin-bottom: 32px;
}

.hero__title {
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin-bottom: 0.4em;
  max-width: 18ch;
}

.hero__title .accent {
  color: var(--blood);
  font-style: italic;
}

.hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.35;
  color: var(--black-warm);
  max-width: 38ch;
  margin-bottom: 40px;
}

.hero__subtitle .gold-em {
  color: var(--gold);
  font-weight: 700;
  border-bottom: 2px solid var(--gold);
}

.hero__cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.hero__witness-bg {
  position: absolute;
  top: 5%;
  right: -10%;
  width: 60%;
  max-width: 700px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.hero__inner > * { position: relative; z-index: 1; }

/* ================ BUTTONS ================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 180ms ease;
  cursor: pointer;
  border: none;
}

.btn--primary {
  background: var(--black);
  color: var(--paper);
}
.btn--primary:hover {
  background: var(--blood);
  color: var(--paper);
}

.btn--ghost {
  background: transparent;
  color: var(--black);
  border-bottom: 2px solid var(--black);
  padding: 8px 0;
}
.btn--ghost:hover {
  color: var(--blood);
  border-bottom-color: var(--blood);
}

.btn--blood {
  background: var(--blood);
  color: var(--paper);
}
.btn--blood:hover {
  background: var(--blood-dark);
  color: var(--paper);
}

/* ================ STRUCTURAL PROPERTIES ================ */

.properties-block {
  margin: 0;
}

.property-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(10, 10, 11, 0.10);
  align-items: baseline;
}

.property-row:last-child { border-bottom: none; }

.property-row__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--blood);
  line-height: 1;
  text-align: right;
}

.property-row__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}

.property-row__text {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}

@media (max-width: 700px) {
  .property-row { grid-template-columns: 60px 1fr; gap: 18px; }
  .property-row__num { font-size: 2rem; }
}

/* ================ USE CASE BLOCKS ================ */

.use-case {
  background: var(--paper);
  border: 1px solid rgba(10, 10, 11, 0.10);
  border-top: 3px solid var(--blood);
  padding: clamp(24px, 3vw, 40px);
  margin: 24px 0;
}

.use-case__header {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(10, 10, 11, 0.10);
  flex-wrap: wrap;
}

.use-case__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--blood);
  line-height: 1;
}

.use-case__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.005em;
  flex-grow: 1;
  margin: 0;
}

.use-case__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
}

.use-case__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

.use-case__cell {
  border-top: 1px solid rgba(10, 10, 11, 0.12);
  padding-top: 14px;
}

.use-case__cell-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--blood);
  margin-bottom: 10px;
  text-transform: uppercase;
  display: block;
}

.use-case__cell-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}

@media (max-width: 800px) {
  .use-case__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ================ NEGATIVE-SPACE BLOCK ("WHAT WE DO NOT DO") ================ */

.negative-space {
  background: var(--black);
  color: var(--paper);
  padding: clamp(64px, 9vw, 120px) 0;
  position: relative;
}

.negative-space__title {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  color: var(--paper);
  margin-bottom: 1em;
  max-width: 14ch;
}

.negative-space__title .accent {
  color: var(--blood);
  font-style: italic;
}

.negative-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 48px;
}

.negative-item {
  border-left: 3px solid var(--blood);
  padding-left: 18px;
}

.negative-item__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold-bright);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.negative-item__text {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--paper);
}

.negative-item__text strong {
  color: var(--paper);
  font-weight: 700;
}

@media (max-width: 800px) {
  .negative-list { grid-template-columns: 1fr; gap: 28px; }
}

/* ================ AUDIENCE LANDING TEMPLATE ================ */

.audience-hero {
  padding: clamp(72px, 10vw, 140px) 0 clamp(48px, 7vw, 96px);
}

.audience-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blood);
  margin-bottom: 28px;
}

.audience-hero__title {
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.98;
  margin-bottom: 0.4em;
  max-width: 16ch;
}

.audience-hero__title .accent {
  color: var(--blood);
  font-style: italic;
}

.audience-hero__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  max-width: 42ch;
  color: var(--black-warm);
}

/* Audience selector grid (Home page) */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: clamp(40px, 6vw, 80px) 0;
}

.audience-card {
  background: var(--paper);
  border: 1px solid rgba(10, 10, 11, 0.10);
  border-top: 3px solid var(--blood);
  padding: clamp(20px, 2.4vw, 32px);
  text-decoration: none;
  color: var(--ink);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  display: block;
}

.audience-card:hover {
  transform: translateY(-3px);
  border-top-color: var(--blood-dark);
  box-shadow: 0 8px 24px rgba(10, 10, 11, 0.10);
}

.audience-card__roman {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--blood);
  font-size: 1.2rem;
  display: block;
  margin-bottom: 6px;
}

.audience-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.audience-card__lede {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 16px;
}

.audience-card__cta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--blood);
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .audience-grid { grid-template-columns: 1fr; }
}

/* ================ STAKES / DOES / PRODUCES BLOCK ================ */

.stakes-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: clamp(32px, 4vw, 64px) 0;
}

.stakes-cell {
  border-top: 3px solid var(--blood);
  padding-top: 18px;
}

.stakes-cell__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--blood);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}

.stakes-cell__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}

.stakes-cell__text {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
}

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

/* ================ FOOTER ================ */

.site-footer {
  background: var(--black);
  color: var(--paper);
  padding: 72px 0 24px;
  margin-top: 0;
  border-top: 4px solid var(--blood);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
  max-width: var(--container-max);
  padding: 0 var(--gutter);
  margin-left: auto;
  margin-right: auto;
}

.site-footer__brand-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--paper);
  margin-bottom: 12px;
}

.site-footer__brand-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--blood-soft);
  margin-bottom: 16px;
}

.site-footer__address {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--gray-text);
  line-height: 1.7;
}

.site-footer__column-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blood);
  margin-bottom: 18px;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li {
  margin-bottom: 10px;
}

.site-footer a {
  color: var(--paper);
  font-size: 0.95rem;
}

.site-footer a:hover {
  color: var(--blood);
}

.site-footer__bottom {
  border-top: 1px solid rgba(245, 241, 232, 0.15);
  padding: 24px var(--gutter) 0;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--gray-text);
}

.site-footer__bottom .legal {
  font-style: italic;
  font-family: var(--font-display);
  letter-spacing: 0;
  font-size: 0.8rem;
  color: var(--blood-soft);
}

@media (max-width: 800px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 32px; }
}

/* ================ CONTACT FORM ================ */

.contact-form {
  display: grid;
  gap: 24px;
  max-width: 640px;
}

.contact-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--blood);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(10, 10, 11, 0.20);
  background: var(--paper-warm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 180ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--blood);
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
  font-family: var(--font-body);
}

/* ================ CONTAINERS — WRITING ================ */

.writing-list {
  display: grid;
  gap: 32px;
  max-width: 880px;
  margin: 0 auto;
}

.writing-card {
  border-top: 3px solid var(--blood);
  padding: 24px 0;
}

.writing-card__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--gray-faded);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.writing-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 12px;
}

.writing-card__title a {
  color: var(--black);
}

.writing-card__title a:hover {
  color: var(--blood);
}

.writing-card__excerpt {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 16px;
}

.writing-card__cta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--blood);
  text-transform: uppercase;
}

/* ================ SINGLE WRITING ================ */

.single-writing {
  padding: 64px 0;
}

.single-writing .reading {
  max-width: 720px;
}

.single-writing h1 {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  margin-bottom: 0.6em;
}

.single-writing .meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--blood);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.single-writing .entry-content p {
  font-size: 1.1rem;
  line-height: 1.65;
  margin-bottom: 1.2em;
}

.single-writing .entry-content h2 {
  font-size: 2rem;
  margin-top: 1.6em;
  border-bottom: 1px solid var(--blood);
  padding-bottom: 0.3em;
}

.single-writing .entry-content h3 {
  font-style: italic;
  color: var(--blood-dark);
  font-size: 1.4rem;
  margin-top: 1.4em;
}

.single-writing .entry-content blockquote {
  border-left: 4px solid var(--blood);
  padding: 0 0 0 24px;
  margin: 1.5em 0;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--black-warm);
}

/* ================ UTILITY ================ */

.gold-em {
  color: var(--gold);
  font-style: italic;
  font-weight: 700;
  border-bottom: 1.5px solid var(--gold);
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.divider-blood {
  border: none;
  height: 2px;
  background: var(--blood);
  margin: clamp(32px, 5vw, 64px) 0;
  max-width: 80px;
}

.divider-gold {
  border: none;
  height: 1px;
  background: var(--gold);
  margin: clamp(24px, 3vw, 40px) 0;
  max-width: 120px;
}

/* ================ ACCESSIBILITY ================ */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--blood);
  outline-offset: 3px;
}

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