:root {
  --editorial-paper: #f2f0e9;
  --editorial-ink: #181917;
  --editorial-muted: rgba(24,25,23,.62);
  --editorial-rule: rgba(24,25,23,.16);
  --editorial-shell: min(1180px,calc(100vw - 64px));
  --editorial-reading: min(832px,calc(100vw - 48px));
}

html { background: var(--editorial-paper); }
body {
  background: var(--editorial-paper);
  color: var(--editorial-ink);
  font-family: "Instrument Sans",Arial,sans-serif;
}

/* Shared three-region portfolio header. */
.editorial-nav,.lab-nav {
  top: 20px;
  left: max(24px,calc((100vw - 1440px)/2 + 32px));
  right: max(24px,calc((100vw - 1440px)/2 + 32px));
}
.brand,.lab-brand { gap: 12px; color: var(--editorial-ink); }
.brand i,.lab-brand i {
  width: 50px;
  height: 50px;
  background: #dedce8;
  color: var(--editorial-ink);
}
.crumb,.nav-back,.lab-crumb,.lab-back {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border: 1px solid var(--editorial-rule);
  background: rgba(242,240,233,.9);
  color: var(--editorial-ink);
  box-shadow: 0 14px 38px rgba(33,27,48,.08);
  backdrop-filter: blur(14px);
}

/* Calm, mono-inspired editorial openings instead of oversized landing heroes. */
.field-hero,.lab-hero,.article-header,.lab-article-header {
  width: var(--editorial-shell);
  padding: clamp(150px,16vw,210px) 0 clamp(72px,8vw,110px);
  border-bottom: 1px solid var(--editorial-rule);
}
.eyebrow,.lab-kicker,.section-label {
  color: var(--editorial-muted);
  font: 500 10px/1.4 "DM Mono",monospace;
  letter-spacing: .1em;
}
.field-hero h1,.lab-hero h1 {
  max-width: 980px;
  margin: 22px 0 20px;
  font-size: clamp(64px,8.2vw,118px);
  line-height: .9;
  letter-spacing: -.065em;
}
.article-header h1,.lab-article-header h1 {
  max-width: 1040px;
  margin: 22px 0 24px;
  font-size: clamp(48px,5.2vw,76px);
  line-height: .94;
  letter-spacing: -.055em;
}
.field-hero .subtitle,.lab-subtitle,.article-subtitle {
  max-width: 760px;
  color: var(--editorial-ink);
  font-size: clamp(20px,2.1vw,30px);
  line-height: 1.25;
}
.field-intro,.lab-intro {
  max-width: 760px;
  margin-top: 42px;
  color: var(--editorial-muted);
}
.field-intro p,.lab-intro p { font-size: 16px; }

/* Index pages: one continuous archive, without card-on-card presentation. */
.archive,.lab-index { width: var(--editorial-shell); }
.archive { margin-bottom: clamp(96px,10vw,150px); }
.archive-tools,.lab-archive-head {
  margin: 0;
  padding: clamp(54px,6vw,78px) 0 20px;
  border-bottom: 1px solid var(--editorial-rule);
}
.archive-tools h2,.lab-archive-head h2 {
  font-size: clamp(30px,3.3vw,48px);
  letter-spacing: -.04em;
}
.lab-feature {
  grid-template-columns: minmax(0,.9fr) minmax(360px,1.1fr);
  min-height: 0;
  margin: 0;
  padding: clamp(64px,7vw,96px) 0;
  gap: clamp(48px,7vw,96px);
  border: 0;
  border-bottom: 1px solid var(--editorial-rule);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.feature-copy { padding: 0; }
.feature-copy h2 {
  margin: auto 0 20px;
  font-size: clamp(42px,5vw,72px);
  line-height: .98;
}
.feature-photo { min-height: 0; aspect-ratio: 4/3; border-radius: 14px; }
.feature-photo img { min-height: 0; height: 100%; }
.feature-photo span { display: none; }
.lab-cta {
  margin-top: 24px;
  min-height: 46px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(20,20,19,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.46);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 650 13px/1.3 "Instrument Sans",Arial,sans-serif;
  text-decoration: none;
}
.lab-archive { padding: 0 0 clamp(96px,10vw,150px); }
.lab-note-row,.note-row,.event-row {
  grid-template-columns: 176px minmax(0,1fr) 190px;
  gap: clamp(28px,4vw,54px);
  padding: 38px 0;
  background: transparent;
}
.lab-note-row:hover,.lab-note-row:focus-visible,
.note-row:hover,.note-row:focus-visible,.event-row:hover {
  padding-inline: 0;
  background: transparent;
}
.lab-note-main h3,.note-main h2 {
  font-size: clamp(28px,3vw,44px);
  line-height: 1.04;
}
.tags,.lab-tags { display: none; }
.lab-note-preview,.note-preview,.event-preview {
  min-height: 118px;
  height: 118px;
  border-radius: 10px;
}
.event-links { margin-top: 20px; }
.event-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(20,20,19,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.46);
  color: var(--editorial-ink);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-decoration: none;
}

/* Long-form pages follow a single reading stream, like the reference page. */
.article-intro,.article-summary {
  max-width: 832px;
  color: var(--editorial-muted);
  font-size: clamp(18px,1.7vw,23px);
  line-height: 1.5;
}
.article-meta {
  max-width: 1000px;
  margin-top: 46px;
  border-color: var(--editorial-rule);
}
.article-meta div { padding: 16px 12px; }
.article-hero,.article-hero-media { margin-bottom: clamp(64px,8vw,100px); }
.article-hero-media img { border-radius: 12px; }
.article-layout,.lab-article-layout {
  width: var(--editorial-reading);
  display: block;
  margin: auto;
}
.toc,.lab-toc { display: none; }
.article-section,.lab-section { padding: clamp(56px,7vw,86px) 0; }
.article-section > h2,.lab-section > h2 {
  max-width: 832px;
  margin-bottom: 34px;
  font-size: clamp(38px,4.5vw,64px);
  line-height: 1;
}
.reading { max-width: 760px; }
.reading p,.reading li { color: rgba(24,25,23,.72); }
.compare,.framework-grid,.risk-grid,.principle-grid,.lite-principles,.credits {
  background: transparent;
  border-color: var(--editorial-rule);
}
.compare > div,.framework-step,.risk-grid > div,.principle-grid div,.lite-principles article,.credits div {
  background: transparent;
}
.key-takeaway,.observed,.context-panel,.workflow,.progression div,.related {
  border-color: var(--editorial-rule);
  background: rgba(255,255,255,.34);
}
.back-top { display: none; }
.site-footer,.lab-footer {
  width: var(--editorial-shell);
  padding: 40px 0 56px;
  border-color: var(--editorial-rule);
  color: var(--editorial-muted);
}

@media (max-width: 900px) {
  .lab-feature { grid-template-columns: 1fr; }
  .lab-note-row,.note-row,.event-row { grid-template-columns: 140px 1fr; }
  .lab-note-preview,.note-preview,.event-preview { grid-column: 2; }
}

@media (max-width: 620px) {
  :root {
    --editorial-shell: calc(100vw - 32px);
    --editorial-reading: calc(100vw - 32px);
  }
  .editorial-nav,.lab-nav { left: 12px; right: 12px; }
  .field-hero,.lab-hero,.article-header,.lab-article-header { padding-top: 126px; }
  .field-hero h1,.lab-hero h1 { font-size: clamp(58px,20vw,78px); }
  .article-header h1,.lab-article-header h1 { font-size: clamp(43px,13vw,58px); }
  .field-intro,.lab-intro { margin-top: 32px; }
  .lab-feature { padding: 54px 0; gap: 30px; }
  .feature-photo { aspect-ratio: 16/11; }
  .lab-note-row,.note-row,.event-row { grid-template-columns: 1fr; gap: 18px; }
  .lab-note-preview,.note-preview,.event-preview { grid-column: 1; width: 100%; }
  .article-meta { grid-template-columns: 1fr 1fr; }
  .article-meta div { border-bottom: 1px solid var(--editorial-rule); }
  .article-section,.lab-section { padding: 54px 0; }
}

@media (max-width: 380px) {
  .article-meta { grid-template-columns: 1fr; }
}