/* ==========================================================================
   Swarochish Chekuri
   Editorial technologist. Warm ivory ground, almost black ink, one cobalt.
   System stacks only. No webfonts. No JavaScript.

   CONTRAST RATIOS (measured against the ground each colour sits on)

   LIGHT MODE, ground #FBF8F2 (relative luminance 0.9127)
     ink        #1A1A18 on ground  15.7:1  AAA body, AAA large
     muted      #4A4842 on ground   8.0:1  AAA body
     cobalt     #12408C on ground   9.0:1  AAA body
     rule       #DDD5C6 on ground   1.3:1  decorative only, not text
     ink on cobalt fill  #FBF8F2 on #12408C   9.0:1  AAA

   DARK MODE, ground #1C1B19 (relative luminance 0.0103)
     ink        #EDE8DE on ground  14.3:1  AAA body, AAA large
     muted      #ADA79B on ground   7.3:1  AAA body
     cobalt     #8FB4F2 on ground   8.2:1  AAA body
     rule       #38352F on ground   1.4:1  decorative only, not text

   All body copy exceeds the 7:1 AAA threshold in both modes.
   ========================================================================== */

:root {
  --ground: #FBF8F2;
  --ground-sunk: #F4F0E6;
  --ink: #1A1A18;
  --muted: #4A4842;
  --cobalt: #12408C;
  --cobalt-wash: #E8EEF8;
  --rule: #DDD5C6;
  --rule-strong: #C6BCA8;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 34rem;
  --measure-wide: 46rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1C1B19;
    --ground-sunk: #232220;
    --ink: #EDE8DE;
    --muted: #ADA79B;
    --cobalt: #8FB4F2;
    --cobalt-wash: #232934;
    --rule: #38352F;
    --rule-strong: #4C483F;
  }
}

:root[data-theme="dark"] {
  --ground: #1C1B19;
  --ground-sunk: #232220;
  --ink: #EDE8DE;
  --muted: #ADA79B;
  --cobalt: #8FB4F2;
  --cobalt-wash: #232934;
  --rule: #38352F;
  --rule-strong: #4C483F;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 40em) {
  body { font-size: 1.125rem; }
}

/* ---------- skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--cobalt);
  color: var(--ground);
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}

.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ---------- focus ring ---------- */

:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- links ---------- */

a {
  color: var(--cobalt);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover { text-decoration-thickness: 2px; }

/* ---------- shell ---------- */

.shell {
  width: 100%;
  max-width: 66rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- navigation ---------- */

.nav {
  border-bottom: 1px solid var(--rule);
}

.nav--foot {
  border-bottom: 0;
  border-top: 1px solid var(--rule);
  margin-top: 4.5rem;
}

.nav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: baseline;
  padding: 1.1rem 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.nav__inner a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
}

.nav__inner a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule-strong);
}

.nav__inner a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--cobalt);
}

.nav__sig {
  margin-right: auto;
  font-family: var(--serif);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted);
}

/* ---------- masthead ---------- */

.masthead {
  padding: clamp(3rem, 9vw, 6.5rem) 0 0;
}

.masthead__name {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 0.6rem;
  font-weight: 400;
}

.masthead__meta {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 2.4rem;
}

/* ---------- generic page head ---------- */

.pagehead {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 0;
  max-width: var(--measure-wide);
}

.pagehead__kicker {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 5.4vw, 2.85rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  font-weight: 400;
  margin: 0 0 1rem;
}

.pagehead__lede {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: var(--measure);
  margin: 0;
}

@media (min-width: 40em) {
  .pagehead__lede { font-size: 1.15rem; }
}

/* ---------- sections ---------- */

section { margin: 0; }

.band {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--rule);
}

.band--first { border-top: 0; }

.band__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.6rem;
  display: block;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  line-height: 1.22;
  font-weight: 400;
  letter-spacing: -0.008em;
  margin: 0 0 0.85rem;
}

h3 {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.3;
  font-weight: 400;
  margin: 0 0 0.6rem;
}

h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

p {
  max-width: var(--measure);
  margin: 0 0 1.15rem;
}

p:last-child { margin-bottom: 0; }

.wide { max-width: var(--measure-wide); }

/* ---------- the tension block on the homepage ---------- */

.position {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 26ch;
  margin: 0 0 1.5rem;
}

.position-extended {
  max-width: var(--measure);
  color: var(--muted);
  margin: 0 0 3rem;
}

.tension {
  border-left: 2px solid var(--cobalt);
  padding: 0.3rem 0 0.3rem 1.5rem;
  max-width: var(--measure);
  margin: 0 0 1.25rem;
}

.tension__number {
  font-family: var(--mono);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--cobalt);
  display: block;
  margin-bottom: 0.45rem;
}

.tension p { margin-bottom: 0.7rem; }
.tension p:last-child { margin-bottom: 0; }

/* ---------- currently ---------- */

.currently p {
  max-width: var(--measure);
  margin: 0 0 0.85rem;
}

.currently p:last-child { margin-bottom: 0; }

.currently__state {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  line-height: 1.35;
  color: var(--ink);
}

.currently__ask {
  border-top: 1px solid var(--rule);
  padding-top: 0.95rem;
  margin-top: 1.15rem;
}

/* ---------- the stack ---------- */

.layers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.25rem;
}

.layer {
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
}

.layer__index {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.75rem;
}

.layer__question {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3.2vw, 1.5rem);
  line-height: 1.28;
  font-weight: 400;
  letter-spacing: -0.006em;
  margin: 0 0 0.85rem;
  max-width: 30ch;
}

.layer__body { color: var(--muted); }

.layer__body strong {
  font-weight: 400;
  color: var(--ink);
}

.layer__tag {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--cobalt);
  display: inline-block;
  margin-top: 0.5rem;
}

/* ---------- simultaneity note ---------- */

.simultaneity {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--muted);
  border: 1px dashed var(--rule-strong);
  padding: 1.1rem 1.25rem;
  max-width: var(--measure-wide);
  margin-top: 2.5rem;
}

.simultaneity p { max-width: none; margin-bottom: 0.6rem; }
.simultaneity p:last-child { margin-bottom: 0; }

/* ---------- question list ---------- */

.qlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
}

.qlist li {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}

.qlist__q {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.32;
  margin: 0 0 0.4rem;
  max-width: 36ch;
}

.qlist__note {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 0;
}

/* ---------- questions page article ---------- */

.question h2 {
  font-size: clamp(1.3rem, 3.4vw, 1.65rem);
  max-width: 32ch;
}

.related {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.related li::before {
  content: "\2192\00a0";
  color: var(--muted);
}

/* ---------- work chapters ---------- */

.chapter {
  border-top: 1px solid var(--rule);
  padding: clamp(2.2rem, 5vw, 3.4rem) 0;
}

.chapter__num {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cobalt);
  display: block;
  margin-bottom: 0.9rem;
}

.chapter h2 {
  font-size: clamp(1.45rem, 4vw, 2rem);
  max-width: 28ch;
}

.chapter__dek {
  color: var(--muted);
  max-width: var(--measure);
  margin-bottom: 1.6rem;
}

.spec {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0;
  margin: 1.6rem 0;
  max-width: var(--measure-wide);
}

.spec ol {
  margin: 0;
  padding-left: 1.4rem;
}

.spec li { margin-bottom: 0.4rem; }
.spec li:last-child { margin-bottom: 0; }

.headline-fact {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.8vw, 1.75rem);
  line-height: 1.28;
  color: var(--ink);
  border-left: 2px solid var(--cobalt);
  padding-left: 1.4rem;
  margin: 1.8rem 0;
  max-width: 26ch;
}

/* ---------- thinking depths ---------- */

.depth {
  border-top: 1px solid var(--rule);
  padding: 2.2rem 0;
}

.progression {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--muted);
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  max-width: var(--measure-wide);
}

.progression li {
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0;
  display: grid;
  gap: 0.15rem 1rem;
}

@media (min-width: 40em) {
  .progression li { grid-template-columns: 9rem 1fr; }
}

.progression b {
  color: var(--cobalt);
  font-weight: 400;
}

.entry {
  border-top: 1px solid var(--rule);
  padding: 1.2rem 0;
  max-width: var(--measure-wide);
}

.entry__kind {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.entry h3 { margin: 0.3rem 0 0.35rem; }

.entry p {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 0;
}

/* ---------- essay, immersive ---------- */

.essay {
  max-width: 38rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 0;
}

.essay__meta {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

.essay h1 {
  font-size: clamp(1.9rem, 5.6vw, 3rem);
  line-height: 1.12;
  margin-bottom: 1.4rem;
}

.essay__standfirst {
  font-size: 1.15rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 2.6rem;
  max-width: none;
}

.essay__body {
  font-size: 1.125rem;
  line-height: 1.72;
}

@media (min-width: 40em) {
  .essay__body { font-size: 1.1875rem; }
}

.essay__body p { max-width: none; }

.essay__body h2 {
  font-size: 1.45rem;
  margin: 2.6rem 0 1rem;
  max-width: none;
}

.essay__body h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  border-top: 2px solid var(--cobalt);
  margin-bottom: 1.1rem;
}

.pull {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.34;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.4rem 0;
  margin: 2.2rem 0;
}

.steps {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--muted);
  background: var(--ground-sunk);
  border: 1px solid var(--rule);
  padding: 1.2rem 1.4rem;
  margin: 1.9rem 0;
}

.steps ol { margin: 0; padding-left: 1.3rem; }
.steps li { margin-bottom: 0.3rem; }
.steps li:last-child { margin-bottom: 0; }

/* ---------- about ---------- */

.contact {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 2;
}

/* ---------- footer ---------- */

.foot {
  padding: 2rem 0 3.5rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.foot p { max-width: none; margin: 0 0 0.35rem; }

/* ---------- CSS only hover reveal, no script ---------- */

.reveal { position: relative; }

.reveal__more {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 260ms ease, opacity 260ms ease;
}

.reveal:hover .reveal__more,
.reveal:focus-within .reveal__more {
  max-height: 22rem;
  opacity: 1;
}

.reveal__hint {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- reduced motion removes motion entirely ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal__more {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }
}

/* ---------- narrow screens, 375px floor ---------- */

@media (max-width: 24em) {
  .nav__inner { font-size: 0.75rem; gap: 0.4rem 1rem; }
  .nav__sig { width: 100%; margin-bottom: 0.2rem; }
  .headline-fact,
  .tension { padding-left: 1rem; }
}


/* ---------- working papers: tables, byline, contents ---------- */

.byline {
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 2rem;
}

.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.6rem;
}

.tablewrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tablewrap th,
.tablewrap td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}

.tablewrap th {
  font-weight: 600;
  border-bottom-width: 2px;
}

.tablewrap tr:last-child td { border-bottom: none; }

.toc { margin: 0; padding-left: 1.3rem; }
.toc li { margin-bottom: 0.35rem; }


/* ---------- what I am building now ---------- */

.now { margin: 0 0 1.6rem; }

@media (min-width: 42em) {
  .now {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 1rem 1.6rem;
    align-items: baseline;
  }
}

.now dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--cobalt);
  margin-top: 0.9rem;
}

@media (min-width: 42em) { .now dt { margin-top: 0; } }

.now dd { margin: 0.25rem 0 0; max-width: var(--measure); }
@media (min-width: 42em) { .now dd { margin-top: 0; } }

.now__lead {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.7rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}

.lately {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  max-width: var(--measure-wide);
}

@media (min-width: 46em) {
  .lately { grid-template-columns: 1fr 1fr; gap: 0.3rem 1.8rem; }
}

.lately li {
  font-size: 0.9375rem;
  color: var(--ink);
  padding-left: 0.95rem;
  position: relative;
}

.lately li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 1px;
  background: var(--cobalt);
}


/* ---------- section lede, status lines ---------- */

.section-lede {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 3.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}

.chapter__status,
.layer__status {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 0.9rem;
}

/* ---------- the one diagram ---------- */

.diagram {
  margin: 1.8rem 0 1.6rem;
  padding: 0;
  max-width: var(--measure-wide);
  overflow-x: auto;
}

.diagram svg {
  width: 100%;
  min-width: 30rem;
  height: auto;
  display: block;
}

.diagram .d-stage rect {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1;
}

.diagram .d-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  fill: var(--ink);
}

.diagram .d-note {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  fill: var(--muted);
}

.diagram .d-line path {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 1.25;
}

.diagram .d-line path.d-base {
  stroke: var(--rule-strong);
  stroke-dasharray: 3 4;
}

.diagram marker path { fill: var(--cobalt); stroke: none; }


/* ---------- recurring ideas list ---------- */

.ideas {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  max-width: var(--measure);
}

@media (min-width: 40em) {
  .ideas { grid-template-columns: 1fr 1fr; gap: 0.3rem 1.6rem; }
}

.ideas li {
  font-family: var(--sans);
  font-size: 0.9375rem;
  padding-left: 0.95rem;
  position: relative;
}

.ideas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 1px;
  background: var(--cobalt);
}


.now__q {
  display: block;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--cobalt);
  margin-bottom: 0.4rem;
}

.now__status {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 0.55rem;
}


.currently__earlier {
  font-size: 0.9375rem;
  color: var(--muted);
  margin-top: 1.4rem;
}


.note__date {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: -0.35rem 0 0.7rem;
}


.research__lead {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.6rem 0 0.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
}

.research__note { color: var(--muted); font-size: 0.9375rem; margin-bottom: 1.4rem; }

.changelog {
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}

.changelog h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
}

.changelog p { font-size: 0.9375rem; color: var(--muted); }

.changelog ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.changelog li {
  padding-left: 0.95rem;
  position: relative;
  margin-bottom: 0.5rem;
}

.changelog li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 1px;
  background: var(--rule-strong);
}


/* ==========================================================================
   VISUAL GRAMMARS
   Four information shapes, not one. Essays stay editorial prose; the other
   three get their own rhythm so the site stops reading as one long document.
   ========================================================================== */

/* GRAMMAR 2 — Questions as indexed research cards with state in the margin */

.question {
  border-top: 1px solid var(--rule);
  padding: 2.2rem 0 2.4rem;
  position: relative;
}

@media (min-width: 56em) {
  .question { padding-left: 9rem; }
  .question__index,
  .question .state {
    position: absolute;
    left: 0;
    width: 7.5rem;
  }
  .question__index { top: 2.35rem; }
  .question .state  { top: 4.1rem; }
}

.question__index {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.state {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cobalt);
  border: 1px solid var(--cobalt);
  padding: 0.1rem 0.45rem;
  margin-bottom: 0.9rem;
}

.state--answered {
  color: var(--muted);
  border-color: var(--rule-strong);
}

.question__sub {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.5rem 0 0.5rem;
}

/* GRAMMAR 3 — Notes as a dense notebook list, hung numerals, tight leading.
   Single source of truth: the earlier grid-based .note block was removed. */

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

.note {
  border-top: 1px solid var(--rule);
  padding: 1.6rem 0 1.7rem;
  position: relative;
  max-width: var(--measure-wide);
}

.note__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--cobalt);
  margin-bottom: 0.5rem;
}

@media (min-width: 48em) {
  .note { padding-left: 4.5rem; }
  .note__n {
    position: absolute;
    left: 0;
    top: 1.72rem;
    margin-bottom: 0;
  }
}

.note__title {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.28;
  font-weight: 400;
  margin: 0 0 0.15rem;
}

.note__body p {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 0.7rem;
  max-width: var(--measure);
}

.note__body p:last-child { margin-bottom: 0; }

/* GRAMMAR 4 — Current work as a restrained ledger */

.currently {
  border-left: 2px solid var(--cobalt);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
  padding: 0.2rem 0 0.2rem 1.6rem;
}