/*
  Coracle design system — complete derivation.
  Every ratio on this site is derived from the hydrogen BEC framework.

  Primary ratio:   B   = π²/8   ≈ 1.2337   (B₁, derived proton constant)
  Inverse:         1/B = 8/π²   ≈ 0.8106
  Fine structure:  α   = 1/137  ≈ 0.00730

  Anchors (absolute scaling factors, pragmatic choices):
    type anchor   = 18px  (body reading size)
    space anchor  = 16px  (spacing base)
    column anchor = 680px (main content max-width)

  All derivations proceed as anchor × B^n. Within each dimensional domain
  every value is anchor × B^n. The anchors themselves do not need to relate
  to each other; each domain is independent.

  Spacing scale (16 × B^n):
    sub-16:  sm10=1.96  sm9=2.42  sm8=2.98  sm7=3.68  sm6=4.54  sm5=5.60
             sm4=6.91   sm3=8.53  sm2=10.52 sm1=12.97
    at/above: s0=16  s1=19.74  s2=24.35  s3=30.04  s4=37.07  s5=45.74
              s6=56.43  s7=69.63  s8=85.92  s9=106.00

  Type scale (18 × B^n):
    tm2=11.83  tm1=14.59  t0=18  t1=22.21  t2=27.40  t3=33.82

  Column widths:
    main=680  narrow=680/B=551.18  ultra=680/B²=446.83

  Line-heights:
    body=2/B=1.621  head=B=1.234  drop-cap=1/B=0.811

  Letter-spacing (caps): B−1 = 0.2337em

  Opacity scale (1/B^n):
    full=1  op-b=0.8106  op-b²=0.6573  op-b³=0.5326
    op-b⁴=0.4316  op-b⁵=0.3498  op-b⁶=0.2834
    hairline=1/B¹⁰=0.1224 (≈ B/10)

  Color ladder:
    Paper anchor #F4EFE4 with paper-shade (paper × 1/B¹⁴ toward ink)
    and paper-bright (paper × 1/B¹⁴ toward white) for soft callouts.

    Marine anchor #1C3448 with three siblings derived as L × B^n at
    fixed hue 208° and saturation 44%:
      marine-deep = L × 1/B  (article titles, deep accents)
      marine      = L        (links, drop caps — anchor)
      marine-mid  = L × B    (secondary accents)
      marine-soft = L × B²   (page-corner trim marks, subtle marine fills)

  Page frame:
    body::before paints four right-angle trim marks at the viewport
    corners, offset by --s1 (16 × B). Marine, low opacity, fixed-position.

  No-compound rule:
    Every visible vertical gap between two elements is produced by a SINGLE
    CSS property (one padding or one margin), never a sum of two scale steps.
*/

:root {
  --paper: #F4EFE4;
  --paper-shade: #ECE6D7;       /* paper × ~1/B¹⁴ toward ink (≈6.5%) — for soft callouts */
  --paper-bright: #F8F4EB;      /* paper × ~1/B¹⁴ toward white (≈3%) — for hover lifts */
  --ink: #1A1A1A;

  /* marine ladder — derived as anchor lightness × B^n at fixed hue (208°) and saturation (44%) */
  --marine-deep: hsl(208, 44%, 15.4%);   /* L × 1/B  (deeper authority — article titles, deep accents) */
  --marine:      #1C3448;                /* anchor — links, drop caps */
  --marine-mid:  hsl(208, 44%, 23.4%);   /* L × B    (secondary accents, hairlines) */
  --marine-soft: hsl(208, 44%, 28.9%);   /* L × B²   (subtle marine fills, page-corner marks) */

  --sm10: 1.96px;
  --sm9:  2.42px;
  --sm8:  2.98px;
  --sm7:  3.68px;
  --sm6:  4.54px;
  --sm5:  5.60px;
  --sm4:  6.91px;
  --sm3:  8.53px;
  --sm2:  10.52px;
  --sm1:  12.97px;

  --s0: 16px;
  --s1: 19.74px;
  --s2: 24.35px;
  --s3: 30.04px;
  --s4: 37.07px;
  --s5: 45.74px;
  --s6: 56.43px;
  --s7: 69.63px;
  --s8: 85.92px;
  --s9: 106.00px;

  --tm2: 11.83px;
  --tm1: 14.59px;
  --t0:  18px;
  --t1:  22.21px;
  --t2:  27.40px;
  --t3:  33.82px;

  --col-main:   680px;
  --col-narrow: 551.18px;
  --col-ultra:  446.83px;

  --lh-body: 1.621;
  --lh-head: 1.234;
  --lh-drop: 0.811;

  --ls-caps: 0.2337em;

  --op-b:   0.8106;
  --op-b2:  0.6573;
  --op-b3:  0.5326;
  --op-b4:  0.4316;
  --op-b5:  0.3498;
  --op-b6:  0.2834;
  --op-hairline: 0.1224;

  --ink-body:    rgba(26, 26, 26, 1);
  --ink-muted:   rgba(26, 26, 26, 0.8106);
  --ink-soft:    rgba(26, 26, 26, 0.5326);
  --ink-faint:   rgba(26, 26, 26, 0.4316);
  --ink-whisper: rgba(26, 26, 26, 0.2834);
  --hairline:    rgba(26, 26, 26, 0.1224);
  --marine-border: rgba(28, 52, 72, 0.3498);

  --stroke-anchor: 2.25px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-size: var(--t0);
  line-height: var(--lh-body);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first last;
}

/* corner trim marks — printer's-proof frame, fixed to viewport.
   Four right-angle marks in the corners via html/body ::before and ::after.
   Each one is a small empty box with two borders forming an "L". */
html::before, html::after,
body::before, body::after {
  content: "";
  position: fixed;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 100;
  opacity: 0.38;
}
html::before {
  top: var(--s1); left: var(--s1);
  border-top: 1px solid var(--marine);
  border-left: 1px solid var(--marine);
}
html::after {
  top: var(--s1); right: var(--s1);
  border-top: 1px solid var(--marine);
  border-right: 1px solid var(--marine);
}
body::before {
  bottom: var(--s1); left: var(--s1);
  border-bottom: 1px solid var(--marine);
  border-left: 1px solid var(--marine);
}
body::after {
  bottom: var(--s1); right: var(--s1);
  border-bottom: 1px solid var(--marine);
  border-right: 1px solid var(--marine);
}

main {
  max-width: var(--col-main);
  margin: 0 auto;
  padding: 0 var(--s2);
}

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

.masthead {
  text-align: center;
  padding: var(--s6) 0 0;
}

.masthead .mark {
  width:  var(--s7);
  height: var(--s7);
  display: block;
  margin: 0 auto var(--s1);
}

.masthead .mark-link {
  display: inline-block;
  line-height: 0;
}

.wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t0);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin: 0;
  padding-left: var(--ls-caps);
}

.wordmark a { color: inherit; text-decoration: none; }

.bullet {
  display: inline-block;
  width:  var(--sm7);
  height: var(--sm7);
  background: var(--ink);
  border-radius: 50%;
  margin: 0 var(--sm3);
  vertical-align: middle;
  transform: translateY(calc(-1 * var(--sm7)));
}

nav {
  margin-top: var(--s2);
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

nav a {
  color: inherit;
  text-decoration: none;
  padding: 0 var(--sm4);
  transition: color 120ms ease;
}
nav a:hover { color: var(--marine); }
nav a[aria-current="page"] { color: var(--marine); }

nav .sep {
  opacity: var(--op-b4);
  padding: 0 var(--sm6);
}

.masthead-rule {
  max-width: var(--col-narrow);
  margin: var(--s5) auto 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* ---------- lede ---------- */

.lede {
  padding: var(--s8) 0 var(--s6);
}

.lede p {
  font-size: var(--t1);
  line-height: var(--lh-body);
  margin: 0 auto;
  max-width: var(--col-narrow);
  text-align: center;
  color: var(--ink-muted);
}

/* ---------- page heading (interior pages) ---------- */

.page-heading {
  padding: var(--s8) 0 var(--s5);
  text-align: center;
}

.page-heading .eyebrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s1);
}

.page-heading h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t3);
  line-height: var(--lh-head);
  margin: 0;
  color: var(--marine-deep);
}

.page-heading .summary {
  font-size: var(--t1);
  line-height: var(--lh-body);
  max-width: var(--col-narrow);
  margin: var(--s2) auto 0;
  color: var(--ink-muted);
}

/* ---------- featured / index of notes ---------- */

.featured {
  padding: var(--s6) 0 var(--s8);
  border-top: 1px solid var(--hairline);
}

.note { margin: 0; }

.note + .note {
  margin-top: var(--s7);
  padding-top: var(--s7);
  border-top: 1px solid var(--hairline);
}

.note-number {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--sm1);
}

.note h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t3);
  line-height: var(--lh-head);
  margin: 0 0 var(--s2);
  color: var(--ink);
}

.note h2 a, .note h3 a { color: inherit; text-decoration: none; }
.note h2 a:hover, .note h3 a:hover { color: var(--marine); }

.note h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t1);
  line-height: var(--lh-head);
  margin: 0 0 var(--s1);
  color: var(--ink);
}

.note-abstract {
  font-size: var(--t0);
  line-height: var(--lh-body);
  margin: 0 0 var(--s1);
  color: var(--ink-muted);
}

.note-primary .note-abstract::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 4.355em;
  line-height: var(--lh-drop);
  float: left;
  padding: var(--sm3) var(--sm1) 0 0;
  color: var(--marine);
}

.note-meta {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm1);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
}

.more {
  text-align: center;
  margin: var(--s6) 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm1);
}

.more a {
  color: var(--marine);
  text-decoration: none;
  border-bottom: 1px solid var(--marine-border);
  padding-bottom: var(--sm10);
  transition: border-color 120ms ease;
}
.more a:hover { border-bottom-color: var(--marine); }

/* ---------- long-form article (research note body) ---------- */

.article-meta {
  text-align: center;
  padding: 0 0 var(--s6);
  border-bottom: 1px solid var(--hairline);
}

.article-meta .kicker {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--sm1);
}

.article-meta h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t3);
  line-height: var(--lh-head);
  margin: 0 0 var(--s2);
  color: var(--marine-deep);
}

.article-meta .byline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm1);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
}

.article-body {
  padding: var(--s6) 0 var(--s8);
  max-width: var(--col-narrow);
  margin: 0 auto;
}

.article-body > .abstract {
  font-size: var(--t1);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  margin: 0 0 var(--s5);
  font-style: italic;
}

.article-body > .abstract::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 4.355em;
  line-height: var(--lh-drop);
  float: left;
  padding: var(--sm3) var(--sm1) 0 0;
  color: var(--marine);
  font-feature-settings: "swsh" 1, "salt" 1;
}

.article-body h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t2);
  line-height: var(--lh-head);
  margin: var(--s5) 0 var(--s2);
  color: var(--ink);
}

.article-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t1);
  line-height: var(--lh-head);
  margin: var(--s4) 0 var(--s1);
  color: var(--ink);
}

.article-body p {
  margin: 0 0 var(--s2);
  color: var(--ink-body);
}

.article-body ul, .article-body ol {
  margin: 0 0 var(--s2);
  padding-left: var(--s2);
  color: var(--ink-body);
}

.article-body li {
  margin: 0 0 var(--sm1);
}

.article-body li::marker {
  color: var(--ink-soft);
}

.article-body figure {
  margin: var(--s4) 0;
}

.article-body figure.figure-wide {
  width: var(--col-main);
  max-width: var(--col-main);
  margin-left: calc((var(--col-narrow) - var(--col-main)) / 2);
  margin-right: calc((var(--col-narrow) - var(--col-main)) / 2);
}

.article-body figcaption {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm1);
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  margin-top: var(--sm1);
}

.article-body blockquote {
  margin: var(--s3) 0;
  padding: 0 var(--s2);
  border-left: 1px solid var(--marine-border);
  color: var(--ink-muted);
  font-style: italic;
}

.article-body code, .article-body kbd {
  font-family: 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  color: var(--marine);
}

.article-body a {
  color: var(--marine);
  text-decoration: none;
  border-bottom: 1px solid var(--marine-border);
  transition: border-color 120ms ease;
}
.article-body a:hover { border-bottom-color: var(--marine); }

.article-body hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--s4) 0;
  max-width: var(--col-ultra);
}

.article-body .pull {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: var(--t1);
  line-height: var(--lh-head);
  color: var(--marine);
  text-align: center;
  margin: var(--s4) 0;
  padding: 0 var(--s3);
}

.article-body .footnote {
  font-size: var(--tm1);
  color: var(--ink-soft);
  margin: var(--s3) 0 0;
}

.article-end {
  text-align: center;
  margin: var(--s5) 0 0;
  color: var(--ink-soft);
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t1);
  letter-spacing: var(--ls-caps);
}

/* ---------- engagements page (lens grid + cta) ---------- */

.section {
  padding: var(--s7) 0 var(--s8);
  border-top: 1px solid var(--hairline);
}

.section h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--t2);
  line-height: var(--lh-head);
  margin: 0 0 var(--s3);
  color: var(--ink);
  text-align: center;
}

.section .section-intro {
  font-size: var(--t0);
  line-height: var(--lh-body);
  max-width: var(--col-narrow);
  margin: 0 auto var(--s5);
  text-align: center;
  color: var(--ink-muted);
}

.lens-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--col-narrow);
  margin: 0 auto;
}

.lens-list li {
  margin: 0;
  padding: var(--s3) 0;
}

.lens-list li + li {
  border-top: 1px solid var(--hairline);
}

.lens-name {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: var(--t1);
  color: var(--ink);
  margin: 0 0 var(--sm1);
}

.lens-desc {
  font-size: var(--t0);
  color: var(--ink-muted);
  margin: 0;
}

.lens-domains {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm1);
  font-style: italic;
  color: var(--ink-soft);
  margin: var(--sm1) 0 0;
}

.engagement-shape {
  max-width: var(--col-narrow);
  margin: 0 auto;
}

.engagement-shape dl {
  margin: 0;
}

.engagement-shape dt {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--sm2);
}

.engagement-shape dd {
  margin: 0 0 var(--s3);
  font-size: var(--t0);
  color: var(--ink-body);
}

.engagement-shape dd:last-child {
  margin-bottom: 0;
}

/* ---------- inquire intake ---------- */

.inquire-intake {
  max-width: var(--col-narrow);
  margin: 0 auto;
  text-align: center;
}

.inquire-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--sm2);
}

.inquire-address {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t2);
  font-weight: 400;
  margin: 0 0 var(--s6);
  letter-spacing: -0.005em;
}

.inquire-address a {
  color: var(--marine);
  text-decoration: none;
  border-bottom: 1px solid var(--marine-border);
  padding-bottom: var(--sm9);
  transition: border-color 120ms ease;
}

.inquire-address a:hover {
  border-bottom-color: var(--marine);
}

.inquire-notes {
  text-align: left;
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
}

.inquire-notes-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s2);
}

.inquire-notes ul {
  margin: 0 0 var(--s3);
  padding-left: var(--s3);
  list-style: none;
}

.inquire-notes li {
  position: relative;
  margin: 0 0 var(--sm2);
  color: var(--ink-body);
}

.inquire-notes li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s2));
  top: calc(var(--sm4) + 0.35em);
  width: var(--sm6);
  height: 1px;
  background: var(--marine);
  opacity: 0.55;
}

.inquire-notes-after {
  margin: 0;
  font-size: var(--tm1);
  font-style: italic;
  color: var(--ink-soft);
}

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

footer {
  text-align: center;
  padding: var(--s6) 0 var(--s7);
  border-top: 1px solid var(--hairline);
  margin-top: 0;
}

footer p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.bullet-small {
  display: inline-block;
  width:  var(--sm10);
  height: var(--sm10);
  background: var(--ink-faint);
  border-radius: 50%;
  margin: 0 var(--sm2);
  vertical-align: middle;
  transform: translateY(calc(-1 * var(--sm10)));
}

/* ---------- defensive-publication footer (reusable across notes) ---------- */

.defensive-footer {
  margin: var(--s5) 0 0;
  padding: var(--s4);
  background: var(--paper-shade);
  border-left: 3px solid var(--marine-deep);
  font-size: var(--tm1);
  line-height: var(--lh-body);
  color: var(--ink-body);
}

.defensive-footer h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--tm2);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--marine-deep);
  font-style: normal;
  margin: 0 0 var(--s2);
}

.defensive-footer p {
  margin: 0 0 var(--s1);
}

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

.defensive-footer a {
  color: var(--marine);
  text-decoration: none;
  border-bottom: 1px solid var(--marine-border);
  transition: border-color 120ms ease;
}

.defensive-footer a:hover { border-bottom-color: var(--marine); }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  main { padding: 0 var(--s1); }
  .masthead { padding: var(--s4) 0 0; }
  .masthead .mark { width: var(--s6); height: var(--s6); margin-bottom: var(--s0); }
  .wordmark { font-size: var(--tm1); }
  nav { font-size: var(--tm2); }
  nav .sep { padding: 0 var(--sm5); }
  .lede { padding: var(--s6) 0 var(--s5); }
  .lede p { font-size: var(--s1); }
  .page-heading { padding: var(--s6) 0 var(--s4); }
  .page-heading h1 { font-size: var(--t2); }
  .page-heading .summary { font-size: var(--t0); }
  .article-meta h1 { font-size: var(--t2); }
  .article-body > .abstract { font-size: var(--t0); }
  .article-body > .abstract::first-letter { font-size: 3.53em; }
  .article-body h2 { font-size: var(--t1); }
  .article-body figure.figure-wide {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .note h2 { font-size: var(--t2); }
  .note h3 { font-size: var(--s1); }
  .note-primary .note-abstract::first-letter { font-size: 3.53em; }
  .section h2 { font-size: var(--t1); }
}