/* =============================================================
   ORTENT · SITE STYLESHEET v2
   Operator's Frame visual system. Used across all pages.
   ============================================================= */

:root {
  --base: #0A0A0A;
  --base-deep: #050505;
  --rule: #1c1c1c;
  --rule-strong: #2a2a2a;
  --paper: #F5F1E8;
  --paper-rule: #c8bfae;
  --paper-rule-soft: #e0d9ca;
  --warm-text: #D8CFBF;
  --warm-mute: #8a8174;
  --slate: #1B2437;
  --slate-mid: #4a5160;
  --slate-mute: #7a6f5e;
  --burnt: #B5703A;
  --burnt-deep: #8F5527;
  --burnt-mute: #6E421E;
  --burnt-light: #D89866;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--base);
  font-family: Inter, system-ui, sans-serif;
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============ NAV ============ */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--burnt-mute);
  border-bottom: 1px solid var(--rule-strong);
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 56px;
  max-width: 1480px;
  margin: 0 auto;
}
.brand {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.05em;
  color: var(--paper);
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.brand .square {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--burnt);
  margin-bottom: 2px;
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--warm-mute);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-links a:hover { color: var(--paper); }
.nav-links a.current {
  color: var(--paper);
  border-bottom-color: var(--burnt);
  font-weight: 600;
}
.nav-links .li {
  color: var(--warm-mute);
  padding: 0;
  border: none;
}
.nav-links .li svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.nav-links .li:hover { color: var(--burnt); }

/* Hamburger toggle (mobile only, hidden by default) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule-strong);
  width: 40px;
  height: 40px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--paper);
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  padding: 110px 56px 90px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #1a1815 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .18;
  pointer-events: none;
  z-index: 1;
}

/* Hero with full-bleed image variant (used on field-guide service pages) */
.hero.hero-image::before { display: none; }
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.85) 35%, rgba(10,10,10,0.4) 60%, rgba(10,10,10,0) 85%);
  z-index: 2;
  pointer-events: none;
}
.hero.hero-image .hero-inner { position: relative; z-index: 3; }
.hero.hero-image h1 { max-width: 720px; }
.hero.hero-image .lede { max-width: 560px; }
@media (max-width: 768px) {
  .hero-overlay {
    background: linear-gradient(180deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.95) 60%, rgba(10,10,10,0.7) 100%);
  }
}
.hero-inner {
  max-width: 1480px;
  margin: 0 auto;
  position: relative;
}
.hero-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--burnt);
  letter-spacing: .16em;
  margin-bottom: 28px;
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--burnt-deep);
  text-transform: uppercase;
}
.hero h1 {
  font-family: Fraunces, serif;
  font-size: 64px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--paper);
  max-width: 1100px;
  font-variation-settings: "opsz" 72;
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--burnt);
  letter-spacing: -0.04em;
}
.hero .lede {
  margin-top: 32px;
  font-family: Inter, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--warm-text);
  max-width: 720px;
  font-weight: 400;
}
.hero .breadcrumbs {
  margin-bottom: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--warm-mute);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero .breadcrumbs a { color: var(--warm-mute); }
.hero .breadcrumbs a:hover { color: var(--burnt); }
.hero .breadcrumbs span { color: var(--burnt); margin: 0 10px; }
.hero .byline {
  margin-top: 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--warm-mute);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.hero .byline .name { color: var(--paper); font-weight: 600; }
.hero .byline .stamp { color: var(--burnt); margin-left: 14px; }
.hero .byline .sep { color: var(--burnt); margin: 0 10px; }

/* ============ PAPER SECTION (general) ============ */
.paper {
  background: var(--paper);
  color: var(--slate);
  padding: 80px 56px 96px;
  position: relative;
}
.paper-inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* ============ BODY (long-form pillar pages) ============ */
.body-wrap {
  background: var(--paper);
  color: var(--slate);
  padding: 80px 56px 96px;
}
.body-inner {
  max-width: 880px;
  margin: 0 auto;
}
.body-inner.wide { max-width: 1120px; }

/* Two-column layout with sticky TOC sidebar */
.body-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
.body-grid .body-inner { max-width: none; margin: 0; }

.toc {
  position: sticky;
  top: 96px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
  padding-top: 32px;
  border-top: 2px solid var(--slate);
}
.toc .toc-label {
  font-weight: 600;
  color: var(--burnt-deep);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-size: 10px;
}
.toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}
.toc li {
  counter-increment: toc-counter;
  padding: 0;
  margin: 0;
  border: none;
}
.toc li::before { display: none; }
.toc a {
  display: block;
  padding: 9px 12px 9px 32px;
  color: var(--slate-mid);
  text-decoration: none;
  border-bottom: none;
  border-left: 3px solid var(--paper-rule);
  margin-left: 0;
  position: relative;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 500;
  transition: color .15s, border-color .15s, background-color .15s, padding-left .15s;
}
.toc a::before {
  content: counter(toc-counter, decimal-leading-zero);
  position: absolute;
  left: 12px;
  color: var(--slate-mute);
  font-size: 9px;
  letter-spacing: .12em;
  font-weight: 600;
  top: 12px;
  transition: color .15s;
}
.toc a:hover {
  color: var(--burnt-deep);
  border-left-color: var(--burnt);
  background-color: rgba(181,112,58,0.04);
}
.toc a.active {
  color: var(--slate);
  border-left-color: var(--burnt);
  font-weight: 700;
  background-color: rgba(181,112,58,0.10);
  padding-left: 36px;
}
.toc a.active::before {
  color: var(--burnt);
  left: 14px;
}

@media (max-width: 1024px) {
  /* minmax(0, 1fr) is critical — plain "1fr" lets grid tracks expand beyond
     the parent if content width exceeds it. minmax(0, 1fr) forces the column
     to respect the parent's width, so long content wraps inside the viewport. */
  .body-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .body-grid .body-inner { max-width: 100%; min-width: 0; }
  .toc { position: static; padding-top: 0; border-top: none; border-bottom: 1px solid var(--paper-rule); padding-bottom: 24px; margin-bottom: 24px; }
  .toc ol { display: block; }
  .toc li { display: block; margin-bottom: 6px; }
  .toc a {
    display: block;
    border-left: 3px solid var(--paper-rule);
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 8px 12px 8px 32px;
    font-size: 11px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    margin-right: 0;
  }
  .toc a::before { left: 12px; top: 10px; }
  .toc a:hover, .toc a.active { border-left-color: var(--burnt); }
}

/* ============ FAQ SECTION ============ */
.faq-section {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--paper-rule);
}
.faq-section h2 {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--slate);
  margin: 0 0 32px;
  font-variation-settings: "opsz" 72;
}
details.faq {
  border-bottom: 1px solid var(--paper-rule-soft);
  padding: 20px 0;
}
details.faq:last-of-type { border-bottom: none; }
details.faq summary {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--slate);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-right: 30px;
  position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--burnt);
  width: 18px;
  flex-shrink: 0;
  transition: transform .2s;
}
details.faq[open] summary::before { content: '−'; }
details.faq summary:hover { color: var(--burnt-deep); }
details.faq .faq-body {
  padding: 14px 0 4px 32px;
}
details.faq .faq-body p {
  font-family: Inter, sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--slate-mid);
  margin: 0 0 12px;
  font-weight: 400;
}
details.faq .faq-body p:last-child { margin-bottom: 0; }
details.faq .faq-body a {
  color: var(--burnt-deep);
  border-bottom: 1px solid var(--paper-rule);
}

/* ============ BOTTOM LINE ============ */
.bottom-line {
  margin-top: 64px;
  padding: 40px;
  background: #fffdf6;
  border: 1px solid var(--paper-rule);
  border-left: 4px solid var(--burnt);
  border-radius: 2px;
  color: var(--slate);
}
.bottom-line .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--burnt-deep);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.bottom-line h3 {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--slate);
  margin: 0 0 16px;
  font-variation-settings: "opsz" 72;
}
.bottom-line p {
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate-mid);
  margin: 0 0 24px;
  font-weight: 400;
}
.bottom-line .btn {
  background: var(--burnt);
  color: var(--paper);
  /* Shift text up by 2px to compensate for Inter's metrics, which place
     glyph mass slightly below geometric centre. The dark-background CTAs
     don't need this because the offset is invisible on dark; cream makes
     it visible. Leaves .cta-inline .btn untouched. */
  padding: 14px 28px 18px;
}
.bottom-line .btn:hover { background: var(--burnt-deep); color: var(--paper); }
.body-inner h2 {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--slate);
  margin: 64px 0 20px;
  padding-top: 20px;
  border-top: 1px solid var(--paper-rule);
  font-variation-settings: "opsz" 72;
}
.body-inner h2:first-of-type { border-top: none; padding-top: 0; margin-top: 32px; }
.body-inner h3 {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--slate);
  margin: 32px 0 12px;
}
.body-inner h4 {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--burnt-deep);
  margin: 28px 0 10px;
}
.body-inner p {
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate-mid);
  margin: 0 0 18px;
  font-weight: 400;
}
.body-inner p strong { color: var(--slate); font-weight: 600; }
.body-inner .lede {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--slate);
  margin-bottom: 28px;
  font-variation-settings: "opsz" 72;
}
.body-inner .lede em { color: var(--burnt); font-style: italic; }
.body-inner ul, .body-inner ol {
  margin: 0 0 22px 0;
  padding-left: 0;
  list-style: none;
}
.body-inner li {
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate-mid);
  padding: 4px 0 4px 22px;
  position: relative;
  font-weight: 400;
}
.body-inner ul li::before {
  content: '·';
  position: absolute;
  left: 6px;
  color: var(--burnt);
  font-weight: 700;
  font-size: 18px;
  top: 0;
}
.body-inner ol { counter-reset: ol-counter; }
.body-inner ol li { counter-increment: ol-counter; }
.body-inner ol li::before {
  content: counter(ol-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--burnt-deep);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .12em;
  top: 6px;
}
.body-inner ol li { padding-left: 36px; }
.body-inner li strong { color: var(--slate); font-weight: 600; }
.body-inner a {
  color: var(--burnt-deep);
  border-bottom: 1px solid var(--paper-rule);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.body-inner a:hover {
  color: var(--burnt);
  border-bottom-color: var(--burnt);
}

/* ============ TLDR ============ */
.tldr {
  background: #fffdf6;
  border-left: 3px solid var(--burnt);
  padding: 28px 32px;
  margin: 32px 0 40px;
}
.tldr .tldr-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--burnt-deep);
  margin-bottom: 12px;
  display: block;
}
.tldr p {
  font-family: Inter, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
  font-weight: 400;
}

/* ============ INLINE CTA ============ */
.cta-inline {
  background: var(--base);
  color: var(--paper);
  padding: 36px 40px;
  margin: 56px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  border-radius: 2px;
}
.cta-inline p {
  margin: 0;
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--paper);
  max-width: 580px;
  font-variation-settings: "opsz" 72;
}
.cta-inline .btn {
  display: inline-block;
  background: var(--burnt);
  color: var(--paper);
  padding: 16px 28px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
  text-decoration: none;
}
.cta-inline .btn:hover {
  background: var(--burnt-light);
  color: var(--slate);
}

/* ============ TABLE / COMPARISON ============ */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-family: Inter, sans-serif;
}
.compare-table th, .compare-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--paper-rule-soft);
  font-size: 14.5px;
  vertical-align: top;
  color: var(--slate-mid);
}
.compare-table th {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--burnt-deep);
  background: #fffdf6;
  border-bottom: 2px solid var(--paper-rule);
}
.compare-table tr:hover td { background: #fffdf6; }
.compare-table td:first-child { color: var(--slate); font-weight: 600; }

/* ============ GUIDE FIGURE (image with caption) ============ */
.guide-figure {
  margin: 36px 0 28px;
  padding: 0;
}
.guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--paper-rule-soft);
}
.guide-figure figcaption {
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--burnt-deep);
}
.guide-figure figcaption .cap-body {
  display: block;
  margin-top: 6px;
  font-family: Inter, sans-serif;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate-mid);
  line-height: 1.55;
}

/* ============ TESTIMONIAL (partner / client endorsement) ============ */
.testimonial {
  background: #fffdf6;
  border: 1px solid var(--paper-rule);
  border-left: 3px solid var(--burnt);
  border-radius: 4px;
  padding: 32px 36px 28px;
  margin: 28px 0 24px;
  max-width: 820px;
}
.testimonial .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--burnt-deep);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
.testimonial blockquote {
  font-family: Fraunces, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--slate);
  margin: 0 0 22px;
  padding: 0;
  border: none;
  letter-spacing: -0.005em;
}
.testimonial .attribution {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.testimonial .attribution .photo {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-rule-soft);
  display: block;
}
.testimonial .attribution .name-block {
  flex: 1;
  min-width: 0;
}
.testimonial .attribution .name {
  display: block;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--slate);
  letter-spacing: -0.005em;
}
.testimonial .attribution .role {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 13.5px;
  color: var(--slate-mid);
  margin-top: 2px;
}
.testimonial .attribution .source {
  display: block;
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--burnt-deep);
}
.testimonial .attribution .source a {
  color: var(--burnt-deep);
  border-bottom: 1px solid var(--burnt-deep);
  text-decoration: none;
  padding-bottom: 1px;
}
.testimonial .attribution .source a:hover { color: var(--burnt); border-bottom-color: var(--burnt); }
@media (max-width: 768px) {
  .testimonial { padding: 24px 22px 22px; }
  .testimonial blockquote { font-size: 17px; }
  .testimonial .attribution .photo { flex: 0 0 56px; width: 56px; height: 56px; }
}

/* ============ FAQ ============ */
.faq-item {
  border-bottom: 1px solid var(--paper-rule-soft);
  padding: 24px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--slate);
  margin-bottom: 10px;
}
.faq-a {
  font-family: Inter, sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--slate-mid);
  font-weight: 400;
}

/* ============ AUTHOR BLOCK ============ */
.author-block {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: start;
  background: #fffdf6;
  padding: 28px 32px;
  margin: 56px 0 32px;
  border: 1px solid var(--paper-rule);
}
.author-block img {
  width: 100%;
  border-radius: 50%;
  filter: grayscale(1);
}
.author-block .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--burnt-deep);
  margin-bottom: 8px;
}
.author-block h4 {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--slate);
  margin: 0 0 10px;
}
.author-block p {
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--slate-mid);
  margin: 0;
  font-weight: 400;
}

/* ============ RELATED CARDS ============ */
.related {
  background: var(--base);
  color: var(--paper);
  padding: 80px 56px;
  border-bottom: 1px solid var(--rule);
}
.related-inner { max-width: 1480px; margin: 0 auto; }
.related .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--burnt);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--burnt-deep);
  padding-bottom: 10px;
  display: inline-block;
  margin-bottom: 20px;
}
.related h2 {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin-bottom: 40px;
  font-variation-settings: "opsz" 72;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.related-card {
  display: block;
  padding: 32px 28px;
  background: #0c0c0c;
  border: 1px solid var(--rule);
  transition: border-color .2s, transform .2s;
}
.related-card:hover {
  border-color: var(--burnt);
  transform: translateY(-2px);
}
.related-card .strap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--burnt);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
.related-card h3 {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin-bottom: 12px;
}
.related-card p {
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--warm-text);
  font-weight: 400;
  margin-bottom: 18px;
}
.related-card .foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--burnt);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ============ CONTACT BLOCK (dark) ============ */
.contact-section {
  padding: 100px 56px;
  border-bottom: 1px solid var(--rule);
  background: var(--base);
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #1a1815 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .14;
}
.contact-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(0px, calc((100% - 1480px) / 2));
  width: 55%;
  max-width: 1100px;
  background-image: url('/brand-system/photography/clarity-ortent-tablet.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  background-color: var(--base);
  opacity: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 25%, rgba(0,0,0,1) 60%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 25%, rgba(0,0,0,1) 60%);
}
.contact-inner {
  max-width: 1480px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.contact-section .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--burnt);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--burnt-deep);
  padding-bottom: 10px;
  display: inline-block;
  margin-bottom: 28px;
}
.contact-section h2 {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 64px;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--paper);
  font-variation-settings: "opsz" 72;
  margin-bottom: 28px;
  max-width: 800px;
}
.contact-section h2 em {
  font-style: italic;
  color: var(--burnt);
  font-weight: 500;
}
.contact-section p {
  font-family: Inter, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--warm-text);
  max-width: 580px;
  margin-bottom: 32px;
  font-weight: 400;
}
.btn {
  display: inline-block;
  padding: 16px 28px;
  background: var(--burnt);
  color: var(--paper);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background .2s;
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--burnt-light); color: var(--slate); }

/* ============ CONTACT FORM ============ */
.contact-form {
  background: rgba(245,241,232,0.04);
  border: 1px solid var(--rule-strong);
  padding: 32px;
  border-radius: 2px;
}
.contact-form .field {
  margin-bottom: 20px;
}
.contact-form label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--burnt);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--rule-strong);
  color: var(--paper);
  font-family: Inter, sans-serif;
  font-size: 15px;
  border-radius: 2px;
  transition: border-color .15s, background-color .15s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--burnt);
  background: rgba(0,0,0,0.6);
}
.contact-form textarea {
  resize: vertical;
  min-height: 110px;
  font-family: Inter, sans-serif;
}
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23B5703A' d='M0 0l6 8 6-8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.contact-form .honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form button.btn {
  width: 100%;
  border: none;
  cursor: pointer;
  margin-top: 8px;
}
.contact-form .form-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--warm-mute);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 16px;
  text-align: center;
}
.contact-form .recaptcha-field {
  margin: 8px 0 24px;
  min-height: 78px;
}
.contact-form .recaptcha-field iframe {
  margin: 0 !important;
}

/* Contact section two-column */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

/* Contact aside (left column on contact.html) */
.contact-aside {
  position: sticky;
  top: 100px;
}
.contact-aside-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--burnt-deep);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--burnt-deep);
}
.contact-aside-h2 {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--slate);
  margin-bottom: 20px;
  font-variation-settings: "opsz" 72;
  max-width: 360px;
}
.contact-aside-p {
  font-family: Inter, sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--slate-mid);
  font-weight: 400;
  max-width: 380px;
}
.contact-aside-divider {
  height: 1px;
  background: var(--paper-rule);
  margin: 36px 0 24px;
}
.contact-aside-channels {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.contact-aside-channels li {
  margin: 0;
  padding: 0;
  border: none;
}
.contact-aside-channels li::before { display: none; }
.contact-aside-channels a {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--paper-rule-soft);
  text-decoration: none;
  color: var(--slate-mid);
  transition: color .15s, border-color .15s;
}
.contact-aside-channels li:last-child a { border-bottom: none; }
.contact-aside-channels a:hover { color: var(--burnt-deep); }
.contact-aside-channels a:hover .badge { background: var(--burnt); color: var(--paper); border-color: var(--burnt); }
.contact-aside-channels a .badge {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 10px;
  color: var(--burnt-deep);
  letter-spacing: .14em;
  border: 1px solid var(--paper-rule);
  padding: 7px 0;
  text-align: center;
  background: #fffdf6;
  transition: background-color .15s, color .15s, border-color .15s;
}
.contact-aside-channels a .text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-aside-channels a .text strong {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--slate);
}
.contact-aside-channels a .text em {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--slate-mute);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-style: normal;
}

/* Contact form head */
.contact-form-head {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--paper-rule);
}
.contact-form-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--burnt-deep);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.contact-form-title {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--slate);
  margin: 0;
  font-variation-settings: "opsz" 72;
}

/* Two-column field row */
.contact-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form .field-row .field { margin-bottom: 20px; }
.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 36px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--warm-mute);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.contact-channels a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
  padding-bottom: 4px;
  width: fit-content;
}
.contact-channels a:hover { color: var(--burnt-light); border-bottom-color: var(--burnt); }
.contact-channels a span {
  font-weight: 600;
  color: var(--burnt);
  border: 1px solid var(--burnt-mute);
  padding: 4px 8px;
  font-size: 11px;
}

/* Form on paper variant */
.contact-form.on-paper {
  background: #fffdf6;
  border-color: var(--paper-rule);
}
.contact-form.on-paper label { color: var(--burnt-deep); }
.contact-form.on-paper input,
.contact-form.on-paper textarea,
.contact-form.on-paper select {
  background: #fff;
  border-color: var(--paper-rule);
  color: var(--slate);
}
.contact-form.on-paper input:focus,
.contact-form.on-paper textarea:focus,
.contact-form.on-paper select:focus {
  border-color: var(--burnt);
  background: #fff;
}
.contact-form.on-paper .form-note { color: var(--slate-mute); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-aside { position: static; }
  .contact-form .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============ FOOTER ============ */
footer.site-footer {
  padding: 56px 56px 32px;
  background: var(--base-deep);
  color: var(--warm-mute);
  border-top: 1px solid var(--rule);
}
.foot-container { max-width: 1480px; margin: 0 auto; }
.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.foot-row .strap {
  font-family: Fraunces, serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
  color: var(--burnt);
  letter-spacing: -0.01em;
  text-transform: none;
}
.foot-legal-text {
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--warm-mute);
  margin-bottom: 24px;
  max-width: 1500px;
  font-weight: 400;
}
.foot-legal-text strong { color: var(--warm-text); font-weight: 500; }
.foot-links, .foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 16px;
}
.foot-links a, .foot-legal a {
  color: var(--warm-mute);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.foot-links a:hover, .foot-legal a:hover { color: var(--burnt); border-bottom-color: var(--burnt); }
.foot-legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .hero h1 { font-size: 50px; }
  .contact-section h2 { font-size: 50px; }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* Mobile: clip body horizontally so nothing escapes the viewport.
     overflow-x: clip is preferred over hidden — clip doesn't establish a
     scroll context, so internal scrollers (e.g. wide tables with their own
     overflow-x: auto) continue to work. Older Safari falls back to hidden,
     which has the same external behaviour for our case. */
  html, body { overflow-x: clip; max-width: 100%; }
  @supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
  }
  body { width: 100%; }
  .body-wrap, .body-grid, .body-inner, section { max-width: 100%; }
  img, video { max-width: 100%; height: auto; }
  pre, code { max-width: 100%; overflow-x: auto; }
  /* Long URLs and unbreakable strings must wrap inside body text */
  .body-inner a { word-break: break-word; overflow-wrap: break-word; }
  /* Hero byline: long monospaced line should wrap on small screens */
  .hero .byline { line-height: 1.7; }
  .hero .byline .stamp { display: inline-block; margin-left: 0; margin-top: 6px; }
  .nav-inner, .hero, .body-wrap, .related, .contact-section, footer.site-footer { padding-left: 24px; padding-right: 24px; }
  /* Hamburger menu */
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--base);
    border-bottom: 1px solid var(--rule-strong);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
    align-items: stretch;
    box-sizing: border-box;
    z-index: 60;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
    color: var(--paper);
  }
  .nav-links a:last-of-type { border-bottom: none; }
  .nav-links a.li { padding-top: 18px; }
  .nav-links a.li svg { width: 22px; height: 22px; }
  .hero { padding: 64px 24px 56px; }
  .hero h1 { font-size: 36px; }
  .hero .lede { font-size: 16px; }
  .body-wrap { padding: 56px 24px 64px; }
  .body-inner h2 { font-size: 26px; }
  .body-inner h3 { font-size: 19px; }
  .contact-section { padding: 64px 24px; }
  .contact-section::after { width: 100%; opacity: 0.18; }
  .contact-section h2 { font-size: 38px; }
  .author-block { grid-template-columns: 80px 1fr; padding: 20px 22px; }
  .cta-inline { padding: 28px 24px; flex-direction: column; align-items: flex-start; }
  .cta-inline p { font-size: 18px; }
  /* Long button labels must wrap inside the dark CTA box, not overflow it */
  .cta-inline .btn {
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
    line-height: 1.3;
  }
  /* Tables: allow horizontal scroll INSIDE the table, never blow out the page */
  .compare-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .compare-table th, .compare-table td { padding: 10px 10px; font-size: 13px; white-space: normal; min-width: 120px; }
  .compare-table td:first-child, .compare-table th:first-child { min-width: 100px; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}