/* Charter Black — journal styles
   Palette is fixed: two blacks, two whites, one yellow accent.
   Butter is an ACCENT ONLY. It never carries a ground or body text. */

:root {
  --ebony: #14110D;
  --butter: #F2DFA0;
  --paper: #FAFAF8;
  --charcoal: #2F2D2A;
  --smoke: #A2988A;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ebony);
  color: var(--paper);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.label {
  font-family: 'Courier Prime', monospace;
  text-transform: lowercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--smoke);
}

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

.masthead {
  border-bottom: 1px solid var(--charcoal);
  padding: 28px 0;
}
.masthead .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.monogram {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--butter);
  text-decoration: none;
}
.masthead nav {
  font-family: 'Courier Prime', monospace;
  text-transform: lowercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
}
.masthead nav a {
  color: var(--smoke);
  text-decoration: none;
  transition: color 0.2s;
}
.masthead nav a:hover,
.masthead nav a[aria-current="page"] { color: var(--paper); }

/* ---- shared type ---- */

h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.1rem, 5.4vw, 3.1rem);
  line-height: 1.14;
  color: var(--paper);
  letter-spacing: -0.01em;
}

h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  line-height: 1.25;
  color: var(--paper);
  margin: 0 0 18px;
}

h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  color: var(--paper);
  margin: 40px 0 14px;
}

p { margin: 0 0 22px; }

a { color: var(--butter); }

strong { color: var(--paper); font-weight: 500; }

hr {
  border: 0;
  border-top: 1px solid var(--charcoal);
  margin: 64px 0;
}

/* ---- journal index ---- */

.index-head { padding: 88px 0 56px; }
.index-head h1 { margin: 14px 0 20px; }
.index-head .standfirst {
  color: var(--smoke);
  max-width: 54ch;
  font-size: 1.125rem;
}

.entries { padding-bottom: 40px; }

.entry {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--charcoal);
  padding: 36px 0;
  transition: border-color 0.2s;
}
.entry:hover { border-color: var(--smoke); }
.entry:hover .entry-title { color: var(--butter); }

.entry-meta {
  font-family: 'Courier Prime', monospace;
  text-transform: lowercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--smoke);
  margin-bottom: 14px;
}
.entry-title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 3.4vw, 1.95rem);
  line-height: 1.22;
  color: var(--paper);
  margin-bottom: 12px;
  transition: color 0.2s;
}
.entry-dek {
  color: var(--smoke);
  max-width: 58ch;
  margin: 0;
}
.entry-more {
  font-family: 'Courier Prime', monospace;
  text-transform: lowercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--butter);
  margin-top: 16px;
}

.empty {
  border-top: 1px solid var(--charcoal);
  padding: 36px 0 0;
  color: var(--smoke);
  font-size: 0.95rem;
}

/* ---- article ---- */

.article-head {
  padding: 72px 0 8px;
  border-bottom: 1px solid var(--charcoal);
}
.article-head .kicker {
  font-family: 'Courier Prime', monospace;
  text-transform: lowercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  color: var(--butter);
  margin-bottom: 18px;
}
.article-head h1 { margin-bottom: 18px; }
.article-head .dek {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--smoke);
  max-width: 52ch;
  margin-bottom: 28px;
}
.byline {
  font-family: 'Courier Prime', monospace;
  text-transform: lowercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--smoke);
  padding-bottom: 30px;
}

article { padding: 48px 0 0; }

.section-num {
  font-family: 'Courier Prime', monospace;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: var(--butter);
  text-transform: lowercase;
  display: block;
  margin-bottom: 10px;
}

section { margin-bottom: 8px; }

ul, ol { margin: 0 0 22px; padding-left: 1.15rem; }
li { margin-bottom: 10px; }
li::marker { color: var(--smoke); }

/* ---- disclaimer + callouts ---- */

.disclaimer {
  border: 1px solid var(--charcoal);
  padding: 20px 22px;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--smoke);
  margin-bottom: 40px;
}
.disclaimer strong { color: var(--smoke); font-weight: 500; }

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

/* ---- tables ---- */

.table-scroll {
  overflow-x: auto;
  margin: 0 0 32px;
  -webkit-overflow-scrolling: touch;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 0.9rem;
}
caption {
  text-align: left;
  font-family: 'Courier Prime', monospace;
  text-transform: lowercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--smoke);
  padding-bottom: 12px;
}
th, td {
  border-bottom: 1px solid var(--charcoal);
  padding: 12px 14px 12px 0;
  text-align: left;
  vertical-align: top;
}
thead th {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--smoke);
  border-bottom-color: var(--smoke);
}
tbody th {
  font-weight: 400;
  color: var(--paper);
}
tbody tr:last-child td,
tbody tr:last-child th { border-bottom: none; }
tr.total th, tr.total td {
  color: var(--paper);
  font-weight: 500;
  border-top: 1px solid var(--smoke);
}

/* ---- flowchart ---- */

.flow {
  overflow-x: auto;
  border: 1px solid var(--charcoal);
  padding: 24px;
  margin: 0 0 32px;
}
.flow pre {
  font-family: 'Courier Prime', monospace;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--smoke);
  white-space: pre;
}
.flow pre b { color: var(--butter); font-weight: 700; }

/* ---- glossary ---- */

.glossary { border-top: 1px solid var(--charcoal); margin-top: 8px; }
.glossary div {
  border-bottom: 1px solid var(--charcoal);
  padding: 16px 0;
}
.glossary dt {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--paper);
  margin-bottom: 4px;
}
.glossary dd {
  margin: 0;
  color: var(--smoke);
  font-size: 0.95rem;
}

/* ---- end-of-article signup ---- */

.endcap {
  border-top: 1px solid var(--charcoal);
  margin-top: 64px;
  padding: 56px 0 8px;
}
.endcap h2 { margin-bottom: 14px; }
.endcap p { color: var(--smoke); max-width: 50ch; }

form.notify {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
form.notify input[type="email"] {
  flex: 1 1 280px;
  background: transparent;
  border: 1px solid var(--charcoal);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  padding: 16px 18px;
  outline: none;
  transition: border-color 0.2s;
}
form.notify input[type="email"]::placeholder { color: var(--smoke); }
form.notify input[type="email"]:focus { border-color: var(--butter); }
form.notify button {
  background: var(--butter);
  color: var(--ebony);
  border: none;
  font-family: 'Courier Prime', monospace;
  text-transform: lowercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 16px 32px;
  cursor: pointer;
  transition: opacity 0.2s;
}
form.notify button:hover { opacity: 0.88; }
.success {
  display: none;
  margin-top: 26px;
  border: 1px solid var(--butter);
  padding: 20px 24px;
  color: var(--butter);
  font-size: 0.95rem;
}

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

footer {
  border-top: 1px solid var(--charcoal);
  margin-top: 72px;
  padding: 40px 0 64px;
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
}
.signoff {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--butter);
  font-size: 1rem;
}
footer .legal {
  font-size: 0.72rem;
  color: var(--smoke);
  max-width: 46ch;
  margin: 0;
}

@media (max-width: 600px) {
  .article-head { padding-top: 48px; }
  .index-head { padding: 56px 0 40px; }
  .callout { padding: 20px; }
}

/* =========================================================
   Inverted bands — paper ground, ebony type.
   The page alternates so a long read has a pulse instead of
   one unbroken dark column. Rules that still hold inside a
   band: butter never carries text on a light ground, so it
   appears only as a solid block with ebony type on it, and
   the muted voice becomes charcoal rather than smoke.
   ========================================================= */

.invert {
  background: var(--paper);
  color: var(--ebony);
}
.band {
  padding: 76px 0;
  margin: 72px 0;
}
.invert h1,
.invert h2,
.invert h3,
.invert .entry-title,
.invert strong,
.invert tbody th,
.invert dt { color: var(--ebony); }

.invert p,
.invert li,
.invert dd,
.invert .standfirst,
.invert .entry-dek { color: var(--charcoal); }

.invert li::marker { color: var(--smoke); }

.invert .label,
.invert .section-num,
.invert .entry-meta,
.invert caption,
.invert .byline { color: var(--charcoal); opacity: 0.75; }

.invert a { color: var(--ebony); }

/* rules and tables on paper */
.invert hr,
.invert .entry,
.invert .glossary,
.invert .glossary div { border-color: rgba(20, 17, 13, 0.14); }

.invert th,
.invert td { border-bottom-color: rgba(20, 17, 13, 0.14); }
.invert thead th {
  color: var(--charcoal);
  border-bottom-color: rgba(20, 17, 13, 0.45);
}
.invert tr.total th,
.invert tr.total td {
  color: var(--ebony);
  border-top-color: rgba(20, 17, 13, 0.45);
}

.invert .flow { border-color: rgba(20, 17, 13, 0.18); }
.invert .flow pre { color: var(--charcoal); }
.invert .flow pre b {
  color: var(--ebony);
  background: var(--butter);
  padding: 1px 5px;
}

/* form inside a band */
.invert form.notify input[type="email"] {
  border-color: rgba(20, 17, 13, 0.25);
  color: var(--ebony);
}
.invert form.notify input[type="email"]::placeholder { color: var(--smoke); }
.invert form.notify input[type="email"]:focus { border-color: var(--ebony); }
.invert .success {
  border-color: var(--ebony);
  color: var(--ebony);
}

/* ---- callouts become paper cards with a butter tab ---- */

.callout {
  background: var(--paper);
  border-left: none;
  padding: 30px 32px 28px;
  margin: 44px 0;
}
.callout .callout-title {
  display: inline-block;
  font-family: 'Courier Prime', monospace;
  font-style: normal;
  text-transform: lowercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--butter);
  color: var(--ebony);
  padding: 7px 13px;
  margin-bottom: 18px;
}
.callout p { color: var(--charcoal); }
.callout p strong { color: var(--ebony); }

/* ---- endcap sits in a band, so drop the dark-mode rule ---- */

.endcap.invert {
  border-top: none;
  margin-top: 0;
  padding: 76px 0 80px;
}

@media (max-width: 600px) {
  .band { padding: 56px 0; margin: 56px 0; }
  .endcap.invert { padding: 56px 0 60px; }
  .callout { padding: 24px 22px; }
}

/* =========================================================
   Weighting toward paper.
   The reading column is now a light ground: long-form is
   easier to read on paper, and the brand still opens and
   closes in ebony. Dark is kept for the masthead, the
   article hero, the callouts, one punctuation band, and
   the footer, so ebony reads as the frame rather than the
   whole page.
   ========================================================= */

article.invert {
  padding: 72px 0 76px;
}
article.invert + .invert.band,
.invert.band + article.invert { margin-top: 0; }

/* the paper column runs continuously into the side-by-side band */
.invert.band { margin: 0; }

/* dark punctuation band inside a light page */
.dark {
  background: var(--ebony);
  color: var(--paper);
  padding: 76px 0;
}
.dark h2, .dark h3, .dark strong, .dark tbody th { color: var(--paper); }
.dark p, .dark li, .dark dd { color: var(--smoke); }
.dark .section-num { color: var(--butter); }
.dark .flow { border-color: var(--charcoal); }
.dark .flow pre { color: var(--smoke); }
.dark .flow pre b { color: var(--ebony); background: var(--butter); padding: 1px 5px; }

/* ---- callouts become the dark note on a light page ---- */

.callout {
  background: var(--ebony);
  color: var(--paper);
  padding: 30px 32px 28px;
  margin: 44px 0;
}
.callout p { color: var(--smoke); }
.callout p strong { color: var(--paper); }
.callout .callout-title {
  background: var(--butter);
  color: var(--ebony);
}

/* ---- disclaimer reads on paper ---- */

.invert .disclaimer {
  border-color: rgba(20, 17, 13, 0.16);
  color: var(--charcoal);
}
.invert .disclaimer strong { color: var(--ebony); }

/* ---- journal index entries on paper ---- */

.entries.invert { padding: 8px 0 72px; }
.invert .entry { border-top-color: rgba(20, 17, 13, 0.14); }
.invert .entry:hover { border-top-color: var(--ebony); }
.invert .entry:hover .entry-title { color: var(--charcoal); }
.invert .entry-more { color: var(--charcoal); }
.invert .empty {
  border-top-color: rgba(20, 17, 13, 0.14);
  color: var(--charcoal);
}

@media (max-width: 600px) {
  article.invert { padding: 48px 0 52px; }
  .dark { padding: 56px 0; }
}

/* paper endcap meets the ebony footer directly, no dead strip between */
.endcap.invert + footer {
  margin-top: 0;
  border-top: none;
  padding-top: 48px;
}