/* georgewen.com — single stylesheet (v2)
   Type: Source Serif 4 (name, headings, prose, dates) + Source Sans 3 (labels, UI).
   Scale: 1.25 (major third). Layout: label column + content column at >= 60em. */

:root {
  --paper: #F5F2EA;
  --paper-2: #ECE7DC;
  --ink: #1C1B18;
  --body: #33312C;
  --muted: #5F5B53;
  --link: #1F3A5F;
  --field: #7D776A;
  --rule: #D6CFC1;
  --contour: #1C1B18;
  --contour-alpha: 0.06;

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

  --measure: 38rem;     /* ~66ch of Source Serif at 18px */
  --lab: 11rem;         /* label column */
  --colgap: 3.5rem;
  --gutter: 1rem;
  --section: 3.5rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14130F;
    --paper-2: #1C1B17;
    --ink: #EDE9E0;
    --body: #D6D1C6;
    --muted: #A29D92;
    --link: #A9BEDB;
    --field: #77726A;
    --rule: #38352E;
    --contour: #EDE9E0;
    --contour-alpha: 0.05;
  }
}

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

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

body {
  position: relative;
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--serif);
  font-size: 1.0625rem;          /* 17px mobile */
  line-height: 1.55;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  hyphens: manual;
  text-align: left;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

@media (min-width: 48em) {
  body { font-size: 1.125rem; }  /* 18px desktop */
  :root { --gutter: 2rem; --section: 4.5rem; }
}

/* ---------- Layout ---------- */

.wrap {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.row {
  margin-top: var(--section);
  padding-top: 0.875rem;
  border-top: 1px solid var(--rule);
}

@media (min-width: 60em) {
  .wrap { max-width: calc(var(--lab) + var(--colgap) + var(--measure) + 2 * var(--gutter)); }
  .row,
  .col-full {
    display: grid;
    grid-template-columns: var(--lab) minmax(0, var(--measure));
    column-gap: var(--colgap);
    align-items: start;
  }
  .row > .label { grid-column: 1; grid-row: 1; }
  .row > .col { grid-column: 2; grid-row: 1; min-width: 0; }
  .row > .col-full { grid-column: 1 / -1; grid-row: 1; }
  .col-full > * { grid-column: 2; }
  .col-full > .note-list { grid-column: 1 / -1; }
}

/* ---------- Links & focus ---------- */

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 0.5rem 0.75rem;
  background: var(--paper);
  color: var(--link);
  font-family: var(--sans);
  font-size: 0.9375rem;
  z-index: 10;
}
.skip:focus { top: 0.75rem; }

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

/* ---------- Section labels: small caps on a hairline ---------- */

.label {
  margin: 0 0 1.25rem;
  font-family: var(--sans);
  font-size: 0.75rem;            /* 12px */
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 60em) { .label { margin-bottom: 0; padding-top: 0.2rem; } }

/* ---------- Header ---------- */

.site-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  padding-top: 0.75rem;
}
.site-header.is-home { justify-content: flex-end; }

.wordmark {
  margin: 0;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.wordmark a { display: inline-block; padding: 0.6rem 0; color: inherit; text-decoration: none; }
.wordmark a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.site-nav ul {
  display: flex;
  margin: 0 -0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.9375rem;
}
.site-nav a {
  display: inline-block;
  min-width: 2.75rem;
  padding: 0.7rem 0.5rem;
  text-align: center;
  color: var(--body);
}
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration-thickness: 2px; }

/* ---------- Home intro + contour texture ---------- */

body.home::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 30rem;
  background: var(--contour);
  opacity: var(--contour-alpha);
  pointer-events: none;
  -webkit-mask-image: url("/assets/contour.svg"), linear-gradient(to bottom, #000 45%, transparent 100%);
  -webkit-mask-size: cover, 100% 100%;
  -webkit-mask-position: 70% 0, 0 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: url("/assets/contour.svg"), linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-size: cover, 100% 100%;
  mask-position: 70% 0, 0 0;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}
@media (min-width: 60em) { body.home::before { height: 34rem; } }

.intro { padding-top: 3.5rem; padding-bottom: 0.5rem; }
@media (min-width: 48em) { .intro { padding-top: 6rem; } }

.name {
  margin: 0;
  font-size: 2.441em;            /* 41px mobile, 44px desktop */
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
}
@media (min-width: 60em) { .name { font-size: 3.052em; } }  /* 55px */

.intro-line {
  margin: 1.25rem 0 0;
  font-size: 1.25em;
  line-height: 1.42;
  color: var(--body);
}

.intro-welcome {
  margin: 0.75rem 0 0;
  font-size: 0.9375em;
  line-height: 1.55;
  color: var(--muted);
}

.intro-place {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------- The Friction Index masthead ---------- */

.row:has(> .col > .masthead),
.row:has(> .col-full > .masthead) { border-top-color: transparent; }

.masthead {
  position: relative;
  padding-top: 0.875rem;
  margin-bottom: 1.75rem;
}
.masthead::before {             /* double hairline, newspaper-masthead style */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.masthead-name {
  margin: 0;
  font-size: 1.563em;            /* 28px */
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.masthead.is-big .masthead-name { font-size: 2.441em; line-height: 1.05; }
.masthead.is-big { padding-top: 1.25rem; margin-bottom: 0; }

.masthead-line {
  margin: 0.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
}

/* On rows that open with a masthead, the double rule replaces the hairline
   and the label aligns with the masthead name. */
@media (min-width: 60em) {
  .row:has(.masthead) > .label { padding-top: 1.35rem; }
  .row:has(.masthead.is-big) > .label { padding-top: 1.9rem; }
}

/* ---------- Note lists ---------- */

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

.note-item {
  position: relative;
  padding: 1.125rem 0 1.25rem;
  border-top: 1px solid var(--rule);
}
.note-item:first-child { border-top: 0; padding-top: 0.25rem; }

.note-item time,
.note-meta time {
  display: block;
  font-family: var(--serif);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.note-title {
  margin: 0.125rem 0 0;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.note-title a { color: var(--ink); text-decoration-color: var(--rule); }
.note-title a::after {           /* whole row is the tap target */
  content: "";
  position: absolute;
  inset: 0;
}
.note-item:hover .note-title a { color: var(--link); text-decoration-color: currentColor; }
.note-title a:focus-visible { outline: none; }
.note-item:has(a:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }

.note-item.is-latest .note-title { font-size: 1.375em; line-height: 1.2; }

.note-list .dek {
  margin: 0.375rem 0 0;
  max-width: 34em;
  color: var(--muted);
  font-size: 0.9375em;
  line-height: 1.5;
}

@media (min-width: 60em) {
  .note-item {
    display: grid;
    grid-template-columns: var(--lab) minmax(0, var(--measure));
    column-gap: var(--colgap);
    align-items: baseline;
    border-top: 0;
  }
  .note-item .note-text { position: relative; }
  .note-item .note-text::before {  /* hairline only across the content column */
    content: "";
    position: absolute;
    top: -1.125rem;
    left: 0;
    right: 0;
    border-top: 1px solid var(--rule);
  }
  .note-item:first-child .note-text::before { content: none; }
  .note-item time { padding-top: 0.15rem; }
  .note-title { margin-top: 0; }
}

.more,
.back {
  margin: 0.75rem 0 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
}
.more a,
.back a { display: inline-block; min-width: 2.75rem; padding: 0.7rem 0; }

/* ---------- Ventures (logos) ---------- */

.ventures {
  display: grid;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) {
  .ventures { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

.logo-link {
  display: inline-flex;
  align-items: center;
  height: 2.75rem;              /* shared box: >= 44px tap target, equal baselines; doubles as clear space */
  line-height: 0;
}
.logo-link img { display: block; width: auto; max-width: none; }

/* Optical match: Stablepath's heavy, wide caps read ~15% larger than Marram's
   light serif caps, so caps are set 14px (Marram) / 12px (Stablepath).
   Marram uses a viewBox-cropped copy carrying exactly its official clear space
   (1/4 symbol height = 24 units on every side; artwork untouched).
   Stablepath gets padding equal to its clear space (cap-stone height). Both inks
   then start --logo-inset from the column edge, and the venture text is padded
   to match, so nothing relies on negative margins. */
:root { --logo-inset: 0.48rem; }
.logo-marram img     { height: 2.875rem; }                     /* 46 x 164px; cap 14px; ink 149px wide */
.logo-stablepath img { height: 1.92rem; padding-left: 0.3rem; box-sizing: content-box; } /* 31 x 227px; cap 12px */
.venture-line,
.venture-site { padding-left: var(--logo-inset); }

.venture-line {
  margin: 1rem 0 0;
  font-size: 0.9375em;
  line-height: 1.5;
}

.venture-site {
  margin: 0.125rem 0 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
}
.venture-site a { display: inline-block; padding: 0.65rem 0; }

.in-development {
  margin-top: 2rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- About ---------- */

.record {
  margin: 1.75rem 0 0;
  max-width: 26em;
  font-size: 1.25em;
  line-height: 1.4;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.record::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin-bottom: 0.875rem;
  background: var(--ink);
}

/* ---------- Subscribe ---------- */

.subscribe {
  margin-top: 2.5rem;
  padding: 1.5rem var(--gutter) 1.75rem;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  background: var(--paper-2);
}
@media (min-width: 48em) {
  .subscribe { padding: 1.75rem 2rem 2rem; margin-left: -2rem; margin-right: -2rem; }
}
@media (min-width: 60em) {   /* in the two-column layout the panel starts exactly at the content column */
  .subscribe { margin-left: 0; margin-right: 0; }
}
.row-sub { margin-top: 2.5rem; border-top: 0; padding-top: 0; }
.row-sub .subscribe { margin-top: 0; }

.subscribe-title {
  margin: 0 0 0.375rem;
  font-size: 1.125em;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}

.subscribe > p { font-size: 0.9375em; }
.subscribe form { margin-top: 1.25rem; }

.subscribe label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.field-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.subscribe input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--field);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.subscribe input[type="email"]::placeholder { color: var(--muted); opacity: 1; }
.subscribe input[type="email"]:focus-visible { outline-offset: 2px; }

.subscribe button {
  flex: 0 0 auto;
  height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.subscribe button:hover { background: var(--link); border-color: var(--link); }

.consent {
  margin: 0.75rem 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 22em) { .subscribe button { flex: 1 1 100%; } }

/* ---------- Contact ---------- */

.contact-links {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 1rem;
}
.contact-links a { display: inline-block; padding: 0.625rem 0; }

/* ---------- Inner page tops (notes index, 404) ---------- */

.page-top { margin-top: 2.5rem; }
@media (min-width: 48em) { .page-top { margin-top: 4rem; } }
.page-top + .row { margin-top: 2.5rem; border-top: 0; }

.page-title {
  margin: 0;
  font-size: 1.953em;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}
.page-top .intro { margin-top: 0.75rem; }

@media (min-width: 60em) {
  .col-offset { grid-column: 2; }
  .row:not(.page-top):has(> .col-offset:only-child) { border-top: 0; padding-top: 0; }
}
.row:has(> .col-offset:only-child) { margin-top: 1.5rem; border-top: 0; padding-top: 0; }

/* ---------- Note page ---------- */

.note-head { margin-top: 2.5rem; border-top: 0; padding-top: 0; }
@media (min-width: 48em) { .note-head { margin-top: 4rem; } }

.note-meta { margin-bottom: 1rem; }
.masthead-mini {
  display: inline-block;
  padding: 0.7rem 0;
  margin-top: -0.7rem;
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-decoration-color: var(--rule);
}
.masthead-mini:hover { color: var(--link); text-decoration-color: currentColor; }
.note-meta time { margin-top: 0; font-family: var(--serif); letter-spacing: 0; text-transform: none; font-weight: 400; }
@media (min-width: 60em) {
  .note-meta { margin-bottom: 0; padding-top: 0.55rem; }
  .note-meta time { margin-top: 0.125rem; }
}

.note-head h1 {
  margin: 0;
  font-size: 1.953em;            /* 35px desktop */
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.note-head .dek {
  margin: 0.875rem 0 0;
  font-size: 1.25em;
  line-height: 1.42;
  color: var(--muted);
}

.note-head + .row { margin-top: 2.25rem; padding-top: 2rem; border-top: 0; }
.note-head + .row .prose { position: relative; }
.note-head + .row .prose::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 0;
  width: 2.5rem;
  border-top: 1px solid var(--ink);
}

/* Justified body with hyphenation from 30em up; last line flush left.
   Below 30em the measure (~40ch) is too short to justify without rivers,
   so phones get flush left with the same hyphenation. */
.prose {
  line-height: 1.6;
  text-align: left;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-lines: 2;
  word-spacing: -0.01em;
  text-wrap: pretty;
}
.prose p { margin-bottom: 1.1em; }

@media (min-width: 30em) {
  .prose {
    text-align: justify;
    text-align-last: left;
    text-wrap: wrap;               /* 'pretty' re-balances last lines and loosened justified ones */
    hyphenate-limit-chars: 5 2 2;
    word-spacing: -0.02em;
  }
}
.nohy { -webkit-hyphens: manual; hyphens: manual; }

/* Pull quote: copy paragraphs that start with "> ". */
.pull {
  margin: 2rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.pull p {
  margin: 0;
  font-size: 1.25em;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
}

/* Exhibit slot: one small chart per note. Empty => not rendered. */
.exhibit {
  margin: 2.25rem 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--ink);
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.exhibit:empty { display: none; }
.exhibit-art { color: var(--ink); }
.exhibit-art svg { display: block; width: 100%; height: auto; }
.exhibit figcaption {
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}
.exhibit-caption { margin: 0; }
.exhibit-title { font-weight: 600; color: var(--ink); }
.exhibit-source { margin: 0.25rem 0 0; font-size: 0.8125rem; }

/* In-prose lists (hyphen-bullet style) — flush left, not justified. */
.prose-list {
  margin: -0.4em 0 1.1em;
  padding: 0;
  list-style: none;
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.prose-list li {
  position: relative;
  padding-left: 1.25em;
}
.prose-list li + li { margin-top: 0.25em; }
.prose-list li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--muted);
}
.prose strong { font-weight: 600; color: var(--ink); }

/* Exhibit theming: attributes carry light-mode hex as fallback; these classes
   override them per theme (CSS beats presentation attributes in every engine). */
.exhibit-art svg { font-size: var(--exhibit-fs); }
.exhibit-art .x-ink     { fill: var(--ink); }
.exhibit-art .x-muted   { fill: var(--muted); }
.exhibit-art .x-link    { fill: var(--link); }
.exhibit-art .x-field   { fill: var(--field); }
.exhibit-art .x-s-ink   { stroke: var(--ink); }
.exhibit-art .x-s-link  { stroke: var(--link); }
.exhibit-art .x-s-paper { stroke: var(--paper); }
/* Label size in viewBox units (640 wide). Phones: 25 -> >= 11.2px at 320px. */
.exhibit-art { --exhibit-fs: 25px; }
@media (min-width: 30em) { .exhibit-art { --exhibit-fs: 19px; } }
@media (min-width: 48em) { .exhibit-art { --exhibit-fs: 15px; } }

/* Sources, end of note. */
.sources {
  margin-top: 2.5rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.sources-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sources ul { margin: 0; padding: 0; list-style: none; }
.sources li + li { margin-top: 0.5rem; }
.sources a { color: var(--muted); overflow-wrap: anywhere; }

/* Quiet "illustrative figures" line. */
.prose .illustrative {
  margin-top: -0.35em;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.5;
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
  color: var(--muted);
}

.note + .row { margin-top: 1.25rem; border-top: 0; padding-top: 0; }

/* ---------- Footer ---------- */

.site-footer { margin-top: var(--section); padding-bottom: 3rem; }

.footer-grid {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 60em) {
  .footer-grid {
    display: grid;
    grid-template-columns: var(--lab) minmax(0, var(--measure));
    column-gap: var(--colgap);
  }
}

.footer-mark { margin: 0; line-height: 0; }
.footer-mark a {
  display: inline-block;
  padding: 0.7rem 0;
  margin-top: -0.7rem;
  color: var(--ink);
}
.monogram { display: block; width: 3rem; height: auto; }
.footer-mark a:hover { color: var(--link); }

.footer-text {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
}
.footer-text p { margin: 0 0 0.375rem; max-width: 40em; }
.footer-text a { display: inline-block; min-width: 2.75rem; padding: 0.75rem 0; margin-top: -0.5rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Justified home body text (George, Nov 7): intro, welcome, ventures, About, contact, subscribe pitch.
   Flush left below 30em where the measure is too short to justify cleanly. */
.intro-line, .intro-welcome, .venture-line, .jtext, .subscribe .pitch, .sub-pitch, .masthead-line, .note-list .dek {
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
}
@media (min-width: 30em) {
  .intro-line, .intro-welcome, .venture-line, .jtext, .subscribe .pitch, .sub-pitch {
    text-align: justify; text-align-last: left; text-wrap: wrap;
  }
}