/* TESSIA — site stylesheet. Values come from the TESSIA design system (tokens.json v1).
   Layout: 12-col editorial container, cream pages, midnight bands for thesis moments. */
:root {
  /* color — Cream theme */
  --surface: #FFF7E6;
  --surface-raised: #FFFCF5;
  --surface-sunken: #F3EAD8;
  --surface-inverse: #1F2152;
  --on-inverse: #FFF7E6;
  --accent-on-inverse: #FF8A6B;
  --ink: #222222;
  --ink-muted: #6B665D;
  --heading: #1F2152;
  --accent: #4F52C7;
  --brand: #6C6FE3;
  --brand-soft: #E7E6FA;
  --action: #FF8A6B;
  --on-action: #222222;
  --action-ink: #A8401F;
  --highlight: #F5C368;
  --line: #E4DACA;
  --line-strong: #8A8274;
  --focus: #4F52C7;
  /* midnight band values (Midnight theme) */
  --mid-raised: #292B66;
  --mid-line: #3A3C7A;
  --mid-muted: #C4C2E6;
  --mid-accent: #AEB0F7;
  --mid-brand: #8B8EF0;
  /* type */
  --font-serif: Fraunces, Georgia, "Times New Roman", serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-pill: 999px;
  --stroke-hair: 1px; --stroke-rule: 1.5px; --stroke-thread: 1.75px;
  --measure: 68ch; --container: 1160px;
  --shadow-paper: 0 18px 40px rgba(31, 33, 82, 0.14);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/1.65 var(--font-sans); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--brand-soft); color: var(--heading); }

.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--space-5)); margin-inline: auto; padding-inline: var(--space-5); }
@media (max-width: 560px) { .wrap { padding-inline: var(--space-4); } }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface-inverse); color: var(--on-inverse); padding: var(--space-3) var(--space-4); z-index: 100; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; color: var(--heading); margin: 0; text-wrap: balance; font-variation-settings: "SOFT" 20; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--brand); }
.display { font-size: clamp(42px, 7.2vw, 80px); line-height: 1.0; letter-spacing: -0.022em; font-variation-settings: "opsz" 144, "SOFT" 20; }
.h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: "opsz" 144, "SOFT" 20; }
.h2 { font-size: clamp(27px, 3.4vw, 34px); line-height: 1.1; letter-spacing: -0.015em; font-variation-settings: "opsz" 96, "SOFT" 20; }
.h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; font-variation-settings: "opsz" 48; }
.statement-text { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.6vw, 27px); line-height: 1.3; letter-spacing: -0.01em; color: var(--heading); font-variation-settings: "opsz" 72; }
.lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--ink); max-width: 58ch; margin: 0; }
.muted { color: var(--ink-muted); }
.small { font-size: 14px; line-height: 1.55; }
.eyebrow { margin: 0; font: 600 11px/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.label { margin: 0; font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.mark { background: linear-gradient(transparent 58%, var(--highlight) 58%, var(--highlight) 90%, transparent 90%); color: inherit; }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-5); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-sm); border: var(--stroke-rule) solid transparent; font: 600 15px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease; text-align: center; }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-secondary { background: transparent; color: var(--heading); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--brand-soft); }
.btn-inverse { background: var(--surface); color: var(--heading); }
.btn-sm { min-height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.btn .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--on-action); opacity: .8; }
.textlink { font-weight: 600; color: var(--accent); text-decoration: none; }
.textlink:hover { text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); border-bottom: var(--stroke-rule) solid var(--heading); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .site-header { background: var(--surface); } }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 68px; }
.wordmark { font-family: var(--font-serif); font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0; font-weight: 600; letter-spacing: -.03em; font-size: 30px; line-height: 1; color: var(--heading); text-decoration: none; }
.wordmark:hover { text-decoration: none; }
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav a:not(.btn) { color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.menu-btn { display: none; background: none; border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-sm); min-height: 40px; padding: 0 var(--space-4); font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--heading); cursor: pointer; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: var(--stroke-rule) solid var(--heading); padding: var(--space-2) var(--space-4) var(--space-5); }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: var(--space-3) 0; border-bottom: var(--stroke-hair) solid var(--line); font-size: 17px; }
  .nav .btn { margin-top: var(--space-4); }
}

/* ---------- sections ---------- */
.section { padding-block: var(--space-9); }
.section-tight { padding-block: var(--space-8); }
@media (max-width: 700px) { .section { padding-block: var(--space-8); } .section-tight { padding-block: var(--space-7); } }
.section + .section { border-top: var(--stroke-hair) solid var(--line); }
.sunken { background: var(--surface-sunken); }
.section.sunken, .section.band { border-top: 0; }
.band { background: var(--surface-inverse); color: var(--on-inverse);
  --heading: #FFFCF5; --ink: #FFF7E6; --ink-muted: var(--mid-muted); --accent: var(--mid-accent); --brand: var(--mid-brand);
  --line: var(--mid-line); --line-strong: #7C7FC4; --focus: var(--mid-accent); --surface-raised: var(--mid-raised); --brand-soft: #2E3070; }
.band + .section { border-top: 0; }
.sec-head { display: grid; gap: var(--space-3); max-width: 760px; margin-bottom: var(--space-7); }
.sec-head .lead { margin-top: var(--space-2); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }

/* ---------- hero ---------- */
.hero { padding-block: var(--space-9) var(--space-8); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: end; }
.hero-copy > * + * { margin-top: var(--space-5); }
.hero .lead { max-width: 46ch; }
.hero-meta { font: 400 13px/1.5 var(--font-mono); color: var(--ink-muted); margin: 0; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero { padding-block: var(--space-7) var(--space-7); } }
.page-hero { padding-block: var(--space-8) var(--space-7); border-bottom: var(--stroke-hair) solid var(--line); }
.page-hero > .wrap > * + * { margin-top: var(--space-4); }
.page-hero .lead { max-width: 60ch; }

/* ---------- moments (Sound familiar) ---------- */
.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--stroke-rule) solid var(--heading); }
.moment { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-right: var(--stroke-hair) solid var(--line); }
.moment + .moment { padding-left: var(--space-5); }
.moment:last-child { border-right: 0; }
.moment p { margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: 15px; }
.moment h3 { font-size: 24px; line-height: 1.2; }
@media (max-width: 760px) { .moments { grid-template-columns: minmax(0, 1fr); } .moment, .moment + .moment { padding: var(--space-5) 0; border-right: 0; border-bottom: var(--stroke-hair) solid var(--line); } }

/* ---------- definition ---------- */
.definition { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-7); align-items: start; }
.def-term { font: 600 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-on-inverse); margin: 0; }
.def-body { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.32; font-variation-settings: "opsz" 72; color: var(--heading); }
.def-body + p { margin-top: var(--space-5); max-width: 60ch; color: var(--ink-muted); }
@media (max-width: 760px) { .definition { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }

/* ---------- figures / diagrams ---------- */
.fig { margin: 0; }
.fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fig-scroll svg { min-width: 680px; }
.fig svg { display: block; width: 100%; height: auto; }
.fig-cap { margin: var(--space-3) 0 0; font: 400 12px/1.4 var(--font-mono); color: var(--ink-muted); }
.fig .thread { fill: none; stroke: var(--brand); stroke-width: var(--stroke-thread); stroke-linecap: round; }
.fig .thread-dotted { fill: none; stroke: var(--brand); stroke-width: var(--stroke-thread); stroke-linecap: round; stroke-dasharray: 1 7; }
.fig .base { stroke: var(--line); stroke-width: var(--stroke-hair); }
.fig .box { fill: none; stroke: var(--line-strong); stroke-width: var(--stroke-hair); }
.fig .box-on { fill: var(--surface-inverse); }
.fig .node { fill: var(--brand); }
.fig .node-open { fill: var(--surface); stroke: var(--brand); stroke-width: var(--stroke-thread); }
.fig .node-receive { fill: var(--action); }
.fig .node-mark { fill: var(--highlight); }
.fig .t-label { font: 500 11px var(--font-mono); letter-spacing: .04em; fill: var(--accent); }
.fig .t-name { font: 600 13px var(--font-sans); fill: var(--ink); }
.fig .t-note { font: 400 11.5px var(--font-sans); fill: var(--ink-muted); }
.fig .t-inv { fill: var(--on-inverse); }
.fig .t-inv-label { font: 600 11px var(--font-mono); letter-spacing: .04em; fill: var(--accent-on-inverse); }
.fig .t-head { font: 500 17px var(--font-serif); fill: var(--heading); }
.fig-hero { border-top: var(--stroke-rule) solid var(--heading); padding-top: var(--space-4); }

/* ---------- fronts ---------- */
.fronts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.front { border-top: var(--stroke-rule) solid var(--heading); padding-top: var(--space-4); }
.front > * + * { margin-top: var(--space-3); }
.front .q { font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.35; color: var(--heading); font-variation-settings: "opsz" 48; }
.front ul { margin: var(--space-3) 0 0; padding-left: 1.1em; color: var(--ink-muted); font-size: 15px; }
.front .status { font: 500 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 860px) { .fronts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- cards: product ---------- */
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--space-5); }
.product { background: var(--surface-raised); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.product-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.product h3 { font-size: 22px; line-height: 1.2; font-variation-settings: "opsz" 48; }
.product p { margin: 0; font-size: 15px; line-height: 1.55; }
.product .meta { font: 400 12.5px/1.4 var(--font-mono); color: var(--ink-muted); }
.product-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--line); flex-wrap: wrap; }
.price { font-family: var(--font-serif); font-size: 24px; font-weight: 500; color: var(--heading); }
.tag { display: inline-block; font: 500 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; padding: 6px 8px; border-radius: var(--radius-xs); border: var(--stroke-hair) solid var(--line-strong); color: var(--ink-muted); }
.tag-live { background: var(--highlight); border-color: var(--highlight); color: var(--on-action); }
.product.featured { border-color: var(--heading); border-width: var(--stroke-rule); }

.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: center; background: var(--surface-raised); border: var(--stroke-rule) solid var(--heading); border-radius: var(--radius-md); padding: var(--space-7); }
.feature > div > * + * { margin-top: var(--space-4); }
.feature ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.feature li { padding-left: 1.4em; position: relative; }
.feature li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
@media (max-width: 860px) { .feature { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); } }

/* ---------- brief paper ---------- */
.papers { position: relative; min-height: 360px; overflow: hidden; padding-block: 24px; display: flex; justify-content: center; align-items: center; }
.brief { background: #FFFFFF; color: #222; width: min(260px, 70%); aspect-ratio: 8.5 / 11; border-radius: var(--radius-xs); padding: 18px; box-shadow: var(--shadow-paper); border: var(--stroke-hair) solid var(--line); }
.brief + .brief { position: absolute; transform: translate(42%, 8%) rotate(3deg); }
.brief:first-child { transform: translate(-18%, -4%) rotate(-2deg); }
.brief-top { font: 600 9px/1.3 var(--font-mono); letter-spacing: .06em; color: #4F52C7; text-transform: uppercase; }
.brief h4 { margin: 12px 0 4px; font-size: 17px; line-height: 1.1; color: #1F2152; }
.brief .sub { font-size: 10px; color: #6B665D; margin: 0 0 8px; line-height: 1.3; }
.brief-label { margin: 9px 0 4px; font: 600 8px/1.2 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: #3E3B36; }
.brief-field { height: 16px; border: var(--stroke-hair) solid #CFC4B1; border-radius: var(--radius-xs); background: #FFFCF5; margin-bottom: 4px; }
.brief-field.tall { height: 30px; }
@media (max-width: 560px) { .papers { min-height: 300px; } }

/* ---------- statement / principles ---------- */
.statement { margin: 0; padding-top: var(--space-5); border-top: var(--stroke-hair) solid var(--line-strong); max-width: 780px; }
.statement p { margin: 0; font-family: var(--font-serif); font-variation-settings: "opsz" 96, "SOFT" 20; font-weight: 500; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.015em; color: var(--heading); }
.statement p em { color: var(--brand); }
.statement cite { display: block; margin-top: var(--space-4); font: 500 12px/1.4 var(--font-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); }
.principle { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-top: var(--stroke-hair) solid var(--line); }
.principle-num { font: 500 12px/1.9 var(--font-mono); color: var(--accent); }
.principle h3 { font-size: 21px; line-height: 1.25; font-variation-settings: "opsz" 48; }
.principle p { margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
@media (max-width: 760px) { .principles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- lists & tables ---------- */
.rule-list { list-style: none; margin: 0; padding: 0; border-top: var(--stroke-rule) solid var(--heading); }
.rule-list li { display: grid; grid-template-columns: minmax(120px, 3fr) minmax(0, 9fr); gap: var(--space-5); padding: var(--space-4) 0; border-bottom: var(--stroke-hair) solid var(--line); }
.rule-list li > :first-child { font: 500 12px/1.7 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.rule-list strong { color: var(--heading); font-family: var(--font-serif); font-weight: 500; font-size: 19px; display: block; line-height: 1.3; }
.rule-list li p { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: 15px; }
@media (max-width: 600px) { .rule-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
.table-wrap { overflow-x: auto; border-top: var(--stroke-rule) solid var(--heading); }
table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 15px; }
th { text-align: left; font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); padding: var(--space-4) var(--space-4) var(--space-3) 0; border-bottom: var(--stroke-hair) solid var(--line-strong); vertical-align: bottom; }
td { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--stroke-hair) solid var(--line); vertical-align: top; }
td:first-child { font-family: var(--font-serif); font-size: 18px; color: var(--heading); line-height: 1.3; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.steps li { counter-increment: s; border-top: var(--stroke-rule) solid var(--heading); padding-top: var(--space-4); }
.steps li::before { content: "[ STEP " counter(s) " ]"; display: block; font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--accent); margin-bottom: var(--space-3); }
.steps h3 { font-size: 22px; }
.steps p { margin: var(--space-2) 0 0; color: var(--ink-muted); font-size: 15px; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.ways { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ways li { font: 500 13px/1 var(--font-mono); padding: 10px 12px; border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-xs); color: var(--ink); }
.ways li:last-child { border-style: dashed; color: var(--ink-muted); }
.ways li span { color: var(--accent); margin-right: 6px; }
.note { font-size: 14px; color: var(--ink-muted); border-left: 0; padding: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-sm); max-width: 70ch; }
.band .note { background: var(--mid-raised); }
.wont { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: var(--stroke-rule) solid var(--heading); }
.wont li { padding: var(--space-4) 0; border-bottom: var(--stroke-hair) solid var(--line); font-family: var(--font-serif); font-size: 21px; line-height: 1.3; color: var(--heading); }
.wont li::before { content: "×"; font-family: var(--font-mono); font-size: 14px; color: var(--action-ink); margin-right: var(--space-3); }
.band .wont li::before { color: var(--accent-on-inverse); }

/* ---------- journal ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.post-card { border-top: var(--stroke-rule) solid var(--heading); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.post-card :is(h2, h3) { font-size: 23px; line-height: 1.2; }
.post-card :is(h2, h3) a { color: var(--heading); text-decoration: none; }
.post-card :is(h2, h3) a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.post-card p { margin: 0; color: var(--ink-muted); font-size: 15px; }
.post-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font: 400 12px/1.4 var(--font-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-muted); }
.post-meta .pillar { color: var(--accent); }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .posts { grid-template-columns: minmax(0, 1fr); } }
.posts-list .post-card { border-top: var(--stroke-hair) solid var(--line); }
.posts-list .post-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); border-top: var(--stroke-rule) solid var(--heading); padding-top: var(--space-5); }
.posts-list .post-card:first-child :is(h2, h3) { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.08; }
.posts-list .post-card:first-child p { font-size: 17px; }
@media (max-width: 760px) { .posts-list .post-card:first-child { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }

.article-head { padding-block: var(--space-8) var(--space-6); }
.article-head .wrap > * + * { margin-top: var(--space-4); }
.article-head h1 { max-width: 22ch; }
.article-head .lead { max-width: 56ch; color: var(--ink-muted); }
.article { padding-bottom: var(--space-9); }
.article-body { max-width: var(--measure); font-size: 18px; line-height: 1.7; border-top: var(--stroke-rule) solid var(--heading); padding-top: var(--space-6); }
.article-body > * { margin: 0; }
.article-body > * + * { margin-top: 1.1em; }
.article-body h2 { font-size: 28px; line-height: 1.15; margin-top: 1.8em; letter-spacing: -.01em; font-variation-settings: "opsz" 96; }
.article-body h3 { font-size: 22px; margin-top: 1.5em; }
.article-body ul, .article-body ol { padding-left: 1.2em; }
.article-body li + li { margin-top: .4em; }
.article-body blockquote { margin-block: 1.6em; padding: var(--space-5) 0; border-top: var(--stroke-hair) solid var(--line-strong); border-bottom: var(--stroke-hair) solid var(--line-strong); font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1.3; color: var(--heading); font-variation-settings: "opsz" 72; }
.article-body blockquote p { margin: 0; }
.article-body strong { color: var(--heading); }
.article-body img { border-radius: var(--radius-sm); }
.article-foot { max-width: var(--measure); margin-top: var(--space-7); padding: var(--space-6); background: var(--surface-inverse); color: var(--on-inverse); border-radius: var(--radius-md); }
.article-foot > * + * { margin-top: var(--space-4); }
.article-foot h2 { color: #FFFCF5; font-size: 26px; line-height: 1.2; }
.article-foot .eyebrow { color: var(--accent-on-inverse); }

/* ---------- footer ---------- */
.site-footer { background: var(--surface-inverse); color: var(--on-inverse); padding-block: var(--space-8) var(--space-6); }
.site-footer a { color: var(--on-inverse); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--space-7); }
.footer-grid .wordmark { color: #FFF7E6; font-size: 40px; }
.footer-grid p { margin: var(--space-4) 0 0; color: var(--mid-muted); max-width: 42ch; font-size: 15px; }
.footer-grid h2 { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-on-inverse); margin-bottom: var(--space-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 15px; }
.footer-base { margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--stroke-hair) solid var(--mid-line); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: 13px; color: var(--mid-muted); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }

/* ---------- final CTA band ---------- */
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-6); align-items: end; }
.cta-band .display { font-size: clamp(34px, 5vw, 58px); line-height: 1.04; }
.cta-band .label { color: var(--accent-on-inverse); margin-bottom: var(--space-4); }
.cta-band .aside > * + * { margin-top: var(--space-4); }
.cta-band .aside p { margin: 0; color: var(--mid-muted); }
@media (max-width: 760px) { .cta-band .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- photos ---------- */
.photo { margin: 0; min-width: 0; }
.photo picture, .photo img { display: block; width: 100%; height: auto; max-width: 100%; }
.photo img { border-radius: var(--radius-xs); background: var(--surface-sunken); }
.photo-wide img { aspect-ratio: 2 / 1; object-fit: cover; object-position: 62% 60%; }
.photo-tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.photo-strip { padding-block: var(--space-7) 0; }
.photo-strip + .section { border-top: 0; }
.photo-head { margin-bottom: var(--space-7); align-items: end; }
.photo-head .sec-head { margin-bottom: 0; }
@media (max-width: 600px) { .photo-wide img { aspect-ratio: 3 / 2; } }
.photo-cover { margin-bottom: var(--space-6); max-width: 960px; }
.photo-cover img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 30% 50%; }
.card-cover { display: block; }
.card-cover img { aspect-ratio: 3 / 2; object-fit: cover; }
.posts-list .post-card.has-cover:first-child { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-rows: auto 1fr; align-content: start; }
.posts-list .post-card.has-cover:first-child .card-cover { grid-row: span 2; }
@media (max-width: 760px) { .posts-list .post-card.has-cover:first-child { grid-template-columns: minmax(0, 1fr); } .posts-list .post-card.has-cover:first-child .card-cover { grid-row: auto; } }

/* ---------- method fronts: colors + tags (TESSIA design system, front-* tokens) ---------- */
:root {
  --front-plan: #F5C368; --front-plan-soft: #FBEBC8; --front-plan-ink: #8A5A0B;
  --front-organize: #9DBFA6; --front-organize-soft: #E2EDE4; --front-organize-ink: #3D6A4C;
  --front-distribute: #6C6FE3; --front-distribute-soft: #E7E6FA; --front-distribute-ink: #4F52C7;
  --front-foundation: #1F2152; --front-foundation-soft: #E9E8F2; --front-foundation-ink: #1F2152;
}
.ftag { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ftag-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; }
.ftag-plan { color: var(--front-plan-ink); } .ftag-plan .ftag-dot { background: var(--front-plan); }
.ftag-organize { color: var(--front-organize-ink); } .ftag-organize .ftag-dot { background: var(--front-organize); }
.ftag-distribute { color: var(--front-distribute-ink); } .ftag-distribute .ftag-dot { background: var(--front-distribute); }
.ftag-foundation { color: var(--front-foundation-ink); } .ftag-foundation .ftag-dot { background: var(--front-foundation); }
.front-plan { border-top-color: var(--front-plan); border-top-width: 4px; }
.front-organize { border-top-color: var(--front-organize); border-top-width: 4px; }
.front-distribute { border-top-color: var(--front-distribute); border-top-width: 4px; }
.fronts-home { margin-top: var(--space-6); }
.fronts-home .front > * + * { margin-top: var(--space-2); }

/* threads diagram */
.fig-threads svg { min-width: 720px; }
.fig .review-band { fill: var(--surface-sunken); }
.fig .review-edge { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 5; }
.fig .th { fill: none; stroke-width: 5; stroke-linecap: round; }
.fig .th-plan { stroke: var(--front-plan); } .fig .th-organize { stroke: var(--front-organize); } .fig .th-distribute { stroke: var(--front-distribute); }
.fig .n-plan { fill: var(--front-plan); } .fig .n-organize { fill: var(--front-organize); } .fig .n-distribute { fill: var(--front-distribute); }
.fig .n-outcome { fill: var(--surface-inverse); }
.fig .t-front { font: 500 11px var(--font-mono); letter-spacing: .06em; }
.fig .t-plan { fill: var(--front-plan-ink); } .fig .t-organize { fill: var(--front-organize-ink); } .fig .t-distribute { fill: var(--front-distribute-ink); }
.fig .t-big { font: 500 20px var(--font-serif); fill: var(--heading); }

/* hero photo */
.photo-hero img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 72% 55%; }
.hero-grid { align-items: center; }

/* SPD band: who it happens to */
.cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-4); }
.case { border-top: var(--stroke-hair) solid var(--mid-line); padding-top: var(--space-4); }
.case h3 { font-size: 21px; line-height: 1.2; color: #FFFCF5; }
.case p { margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.55; color: var(--mid-muted); }
@media (max-width: 900px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cases { grid-template-columns: minmax(0, 1fr); } }

/* ---------- journal cards with cover on top ---------- */
.post-card.has-cover .card-cover img { aspect-ratio: 3 / 2; object-fit: cover; }
.product-top .ftags { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); }
.label.muted-label { color: var(--ink-muted); }
.label.on-dark { color: var(--accent-on-inverse); }
.ftag-on-dark { color: var(--mid-accent); } .ftag-on-dark .ftag-dot { background: var(--on-inverse); }

/* ---------- method: pillars ---------- */
.pillars { display: grid; gap: var(--space-4); }
.pillar-roof { background: var(--surface-inverse); color: var(--on-inverse); border-radius: var(--radius-xs); padding: var(--space-4) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: baseline; justify-content: space-between; }
.roof-text { font-family: var(--font-serif); font-size: clamp(19px, 2.2vw, 24px); }
.pillar-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fcol { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); border-top: 6px solid; }
.fcol .q { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.35; color: var(--heading); }
.fcol ul { margin: 0; padding-left: 1.1em; font-size: 15px; line-height: 1.5; }
.fcol li + li { margin-top: var(--space-1); }
.fcol-plan { background: var(--front-plan-soft); border-color: var(--front-plan); }
.fcol-organize { background: var(--front-organize-soft); border-color: var(--front-organize); }
.fcol-distribute { background: var(--front-distribute-soft); border-color: var(--front-distribute); }
.pillar-review { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: center; }
.pillar-review > span { border-top: 1.75px dashed var(--line-strong); }
.pillar-review .label { color: var(--ink-muted); text-align: center; }
.pillar-base { border: var(--stroke-rule) solid var(--heading); border-radius: var(--radius-xs); padding: var(--space-4) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; color: var(--heading); font-size: 15px; }
@media (max-width: 860px) { .pillar-cols { grid-template-columns: minmax(0, 1fr); } .pillar-review { grid-template-columns: minmax(0, 1fr); } .pillar-review > span { display: none; } }

/* ---------- method: diagnosis router ---------- */
.router { border-top: var(--stroke-rule) solid var(--heading); }
.route { display: grid; grid-template-columns: 160px minmax(0, 1fr) 40px minmax(240px, 320px); gap: var(--space-5); align-items: center; padding: var(--space-5) 0; border-bottom: var(--stroke-hair) solid var(--line); }
.route-q { margin: 0; font-family: var(--font-serif); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.25; color: var(--heading); }
.route-arrow { font-size: 26px; color: var(--line-strong); text-align: center; }
.move { border-radius: var(--radius-xs); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.move-t { margin: 0; font-family: var(--font-serif); font-size: 22px; }
.move-s { margin: 0; font: 400 12px/1.4 var(--font-mono); }
.move-distribute { background: var(--front-distribute-soft); color: var(--heading); } .move-distribute .move-s { color: var(--front-distribute-ink); }
.move-foundation { background: var(--surface-inverse); color: var(--on-inverse); } .move-foundation .move-s { color: var(--mid-muted); }
@media (max-width: 860px) { .route { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .route-arrow { display: none; } }

/* ---------- method: network tree ---------- */
.tree { display: grid; grid-template-columns: minmax(0, 5fr) 72px minmax(0, 6fr); column-gap: var(--space-4); align-items: center; }
.tree-q { border: var(--stroke-rule) solid var(--heading); border-radius: var(--radius-xs); padding: var(--space-4) var(--space-5); background: var(--surface-raised); font-family: var(--font-serif); font-size: 21px; line-height: 1.25; color: var(--heading); }
.tree-no { font: 500 12px/1 var(--font-mono); letter-spacing: .05em; color: var(--ink-muted); text-align: center; }
.tree-yes { grid-column: 1 / -1; height: 52px; display: flex; align-items: center; padding-left: 28px; }
.tree-yes span { border-left: var(--stroke-rule) solid var(--heading); padding: 16px 0 16px 12px; font: 500 12px/1 var(--font-mono); letter-spacing: .05em; color: var(--ink-muted); }
.tree-out { border-radius: var(--radius-xs); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.tree-out h3 { font-size: 21px; line-height: 1.2; }
.tree-out p { margin: 0; font-size: 15px; line-height: 1.5; }
.tree-type { font: 500 11px/1 var(--font-mono); letter-spacing: .06em; }
.out-foundation { background: var(--surface-inverse); color: var(--on-inverse); }
.out-foundation h3 { color: #FFFCF5; } .out-foundation p { color: var(--mid-muted); } .out-foundation .tree-type { color: var(--mid-accent); }
.out-distribute { background: var(--front-distribute-soft); } .out-distribute .tree-type { color: var(--front-distribute-ink); }
.tree-last { grid-column: 1 / 2; }
@media (max-width: 860px) {
  .tree { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .tree-no { text-align: left; } .tree-last { grid-column: auto; } .tree-yes { height: auto; padding-left: 0; }
}

/* ---------- method: five reasons + moving up ---------- */
.reasons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.reason { background: var(--surface-raised); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-xs); padding: var(--space-4); }
.reason p { margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.45; }
.moveup { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 48px minmax(0, 1fr); gap: var(--space-2); align-items: stretch; margin-top: var(--space-3); }
.lv { border-radius: var(--radius-xs); padding: var(--space-4); font-family: var(--font-serif); font-size: 20px; display: flex; flex-direction: column; gap: var(--space-1); }
.lv span { font: 400 12px/1.3 var(--font-mono); }
.lv-1 { background: var(--front-distribute-soft); color: var(--heading); } .lv-1 span { color: var(--front-distribute-ink); }
.lv-2 { background: #C9CAF4; color: var(--heading); }
.lv-3 { background: var(--front-distribute-ink); color: #FFFFFF; } .lv-3 span { color: var(--front-distribute-soft); }
.lv-4 { background: var(--surface-inverse); color: var(--on-inverse); } .lv-4 span { color: var(--mid-muted); }
.lv-arrow, .lv-or { align-self: center; text-align: center; color: var(--line-strong); font-size: 22px; }
.lv-or { font: 500 11px/1 var(--font-mono); color: var(--ink-muted); }
@media (max-width: 900px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } .moveup { grid-template-columns: minmax(0, 1fr); } .lv-arrow { transform: rotate(90deg); } }

/* ---------- method: ladder (segmented) ---------- */
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.rung { padding: var(--space-4); min-height: 132px; display: flex; flex-direction: column; gap: var(--space-2); }
.rung h3 { font-size: 20px; line-height: 1.2; }
.rung p { margin: 0; font-size: 14px; line-height: 1.45; }
.rung-0 { background: var(--surface-raised); border: 1.5px dashed var(--front-distribute); }
.rung-0 .label, .rung-1 .label { color: var(--front-distribute-ink); } .rung-0 p { color: var(--ink-muted); }
.rung-1 { background: var(--front-distribute-soft); }
.rung-2 { background: #C9CAF4; } .rung-2 .label { color: var(--heading); }
.rung-3 { background: var(--front-distribute-ink); } .rung-3 h3, .rung-3 p { color: #FFFFFF; } .rung-3 .label { color: var(--front-distribute-soft); }
.rung-4 { background: var(--surface-inverse); } .rung-4 h3 { color: var(--on-inverse); } .rung-4 p { color: var(--mid-muted); } .rung-4 .label { color: var(--accent-on-inverse); }
.ladder-axis { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); font: 400 12px/1.3 var(--font-mono); color: var(--ink-muted); }
@media (max-width: 860px) { .ladder { grid-template-columns: minmax(0, 1fr); } .rung { min-height: 0; } }

/* ---------- method: seven ways out ---------- */
.ways-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) 24px minmax(0, 1fr); gap: var(--space-2); }
.way { border-radius: var(--radius-xs); padding: var(--space-4); min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); }
.way span { font: 500 12px/1 var(--font-mono); }
.way p { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.2; }
.way-1 { background: #1F2152; } .way-2 { background: #2E3070; } .way-3 { background: #3E4190; } .way-4 { background: #4F52C7; }
.way-1 p, .way-2 p, .way-3 p, .way-4 p { color: #FFF7E6; } .way-1 span, .way-2 span { color: var(--accent-on-inverse); } .way-3 span, .way-4 span { color: #FFF7E6; }
.way-5 { background: #C9CAF4; } .way-6 { background: var(--front-distribute-soft); } .way-5 p, .way-6 p, .way-5 span, .way-6 span { color: var(--heading); }
.way-7 { grid-column: 8; border: 1.5px dashed var(--line-strong); } .way-7 p { color: var(--heading); } .way-7 span { color: var(--ink-muted); }
.ways-note { font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; padding-top: var(--space-3); }
.ways-note-a { grid-column: 1 / span 6; border-top: var(--stroke-rule) solid var(--heading); color: var(--heading); }
.ways-note-b { grid-column: 8; border-top: 1.5px dashed var(--line-strong); color: var(--ink-muted); }
@media (max-width: 900px) {
  .ways-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .way-7, .ways-note-a, .ways-note-b { grid-column: auto; } .way { min-height: 96px; }
  .ways-note-a { grid-column: 1 / -1; order: -1; border-top: 0; padding-top: 0; } .ways-note-b { display: none; }
}

/* ---------- how we design: what left you ---------- */
.left-you { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); margin-top: var(--space-7); background: var(--surface-raised); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); }
.lane-block { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.lane-title-a { color: var(--action-ink); } .lane-title-b { color: var(--accent); }
.lane { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.ln { font: 500 11px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.ln-none { font: 400 13px/1 var(--font-mono); color: var(--ink-muted); }
.blks { display: flex; flex-wrap: wrap; gap: 4px; }
.blk { width: 40px; height: 26px; border-radius: var(--radius-xs); box-sizing: border-box; }
.blk-thin { width: 26px; }
.blk-you { background: var(--surface-inverse); }
.blk-gone { border: 1.5px dashed var(--line-strong); }
.blk-organize { background: var(--front-organize); }
.blk-distribute { background: var(--front-distribute); }
.blk-receive { background: var(--action); }
.lane-cap { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.lane-note { grid-column: 1 / -1; margin: 0; font: 400 12px/1 var(--font-mono); color: var(--ink-muted); }
@media (max-width: 760px) { .left-you { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); gap: var(--space-6); } .lane { grid-template-columns: 110px minmax(0, 1fr); } }

/* ---------- how we design: limits with what we do ---------- */
.wont li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-2); font-size: inherit; }
.wont li::before { grid-row: 1 / span 2; margin: 6px 0 0; }
.wont-t { margin: 0; font-family: var(--font-serif); font-size: 21px; line-height: 1.3; color: var(--heading); }
.wont-d { margin: var(--space-2) 0 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--mid-muted); }
.photo-fcol { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-2); }
.photo-fcol img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }