/* Compact editorial system. Radix type pairs; existing Inter and product fonts.
   Decisions: editorial/compact-portfolio-2026-09-14/research.md */
:root {
  --site-measure: 640px;
  --text-body: 1rem;
  --text-support: .875rem;
  --reading-measure: var(--site-measure);
  --reading-title: 1.75rem;
  --reading-section: 1.25rem;
  --reading-body: 1rem;
  --reading-lead: 1rem;
  font-optical-sizing: auto;
  font-kerning: normal;
}
/* One column owns both the story and its evidence. */
.portfolio-home, .article, .article.reading-page, .article.simple-exploration {
  width: min(var(--site-measure), calc(100% - 48px));
  max-width: var(--site-measure);
  padding-inline: 0;
  margin: 40px auto 80px;
}
.portfolio-home { margin-top: 96px; }
.portfolio-home .intro { padding: 0; }
.portfolio-home .intro-inner { max-width: 100%; }
.portfolio-home :is(.work,.explorations,.writing) { width: 100%; max-width: 100%; margin: 56px 0 0; }
.portfolio-home .section-heading { padding: 0; margin: 0 0 16px; }
.portfolio-home .section-intro { max-width: 100%; margin: 0 0 20px; }
.portfolio-home .project-rail { width: 100%; max-width: 100%; padding: 6px 0 16px; scroll-padding-left: 0; }
.portfolio-home .project-card { width: min(var(--card-w), 100%); }
.site-footer { width: min(var(--site-measure), calc(100% - 48px)); margin: 64px auto 48px; }

.intro-inner, .article .prose, .article .lead, .observation-copy > p, .article .study-reading {
  font-size: var(--text-body); font-weight: 400; line-height: 1.5;
  letter-spacing: normal; text-wrap: pretty; overflow-wrap: break-word;
}
.intro-inner > h1, .section-heading, .writing > h2, .lockup-copy > strong, .writing-title {
  font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: normal; text-wrap: balance;
}
.lockup-copy { min-width: 0; font-size: 1rem; line-height: 1.5; letter-spacing: normal; }
.lockup-copy > p, .writing-description, .section-intro, .writing-time,
.site-footer, .essay-end, .article .back, .article .study-reference,
.exploration-references ul, .article .study-material-note {
  font-size: var(--text-support); line-height: 1.4286; letter-spacing: normal;
  text-wrap: pretty; overflow-wrap: break-word;
}
.writing-list a, .site-footer, .essay-end { flex-wrap: wrap; }
.writing-row-copy { flex: 1 1 12rem; }
.site-footer > *, .essay-end > * { min-width: 0; max-width: 100%; }
.intro-inner a, .site-footer a, .essay-end a,
.article :is(.prose,.lead,figcaption,.study-reference,.study-reading,.exploration-references) a {
  text-underline-position: from-font; text-decoration-thickness: from-font; text-decoration-skip-ink: auto;
}

.article > header { margin: 32px 0 0; }
.article > header > h1, .article > header .article-lockup h1 {
  margin: 0; font-size: var(--reading-title); font-weight: 600; line-height: 1.2857;
  letter-spacing: normal; text-wrap: balance; overflow-wrap: break-word;
}
.article > header .article-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.article > header .article-lockup > div { min-width: 0; }
.article > header .article-lockup .lockup-icon { width: 32px; height: 32px; flex: none; }
.article > header > .lead, .article .case-summary > .lead { margin-top: 16px; font-size: 1rem; line-height: 1.5; }
.article > header > .essay-kicker { margin-bottom: 8px; font-size: .875rem; line-height: 1.4286; }
.article > header > .essay-byline { margin-top: 16px; font-size: .875rem; line-height: 1.4286; }
.article > section, .article > section:first-of-type { margin-top: 40px; }
.article > section > h2, .article .observation-copy > h2 {
  margin: 0 0 8px; font-size: var(--reading-section); font-weight: 500;
  line-height: 1.4; letter-spacing: normal; text-wrap: balance; overflow-wrap: break-word;
}
.article .prose > h3, .article .observation-copy > h3 {
  margin: 24px 0 8px; font-size: 1rem; font-weight: 500; line-height: 1.5;
  letter-spacing: normal; text-wrap: balance;
}
.article .prose > h3:first-child { margin-top: 0; }
.article .prose > p + p { margin-top: 16px; }
.article .prose:empty { display: none; }
.article > header, .article > section, .article > section > :is(h2,.prose),
.article :is(.case-opening,.case-evidence,.interactive-figure,.essay-image,.article-figure,.live-journey-figure),
.article > :is(.article-references,.essay-end,.article-end) {
  width: 100%; max-width: var(--site-measure); min-width: 0; margin-inline: 0;
}
.article :is(.case-evidence,.interactive-figure,.essay-image,.article-figure,.live-journey-figure) {
  position: relative; left: auto; transform: none; margin-block: 32px;
}
.article figure > :is(img,video,iframe), .article .study-canvas { max-width: 100%; }
.article figure > img { height: auto; }
.article :is(.case-evidence,.interactive-figure,.essay-image,.article-figure,.live-journey-figure) > figcaption {
  width: 100%; max-width: 100%; margin: 12px 0 0; padding: 0;
  font-size: .875rem; font-weight: 400; line-height: 1.4286;
  letter-spacing: normal; text-wrap: pretty; overflow-wrap: break-word;
}
.article > .case-masthead { display: block; }
.case-summary { min-width: 0; }
.case-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 20px 0 0; }
.case-facts > div { min-width: 0; max-width: 100%; }
.case-facts dt { margin-bottom: 4px; color: var(--muted); font-size: .875rem; line-height: 1.4286; }
.case-facts dd { margin: 0; color: var(--ink); font-size: .875rem; line-height: 1.4286; overflow-wrap: break-word; }
.article .case-action { margin-top: 12px; font-size: .875rem; line-height: 1.4286; }
.case-action a { display: inline-block; min-height: 44px; padding-block: 12px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.article .case-opening { margin-top: 16px; }
.article .case-quote { margin: 24px 0; padding-inline-start: 16px; border-inline-start: 2px solid var(--line); }
.article .case-quote > p { font-size: 1rem; line-height: 1.5; }
.article .case-quote-attribution { margin-top: 8px; font-size: .875rem; line-height: 1.4286; }
.article .case-code { max-width: 100%; margin: 24px 0; padding: 16px; font-size: .8125rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
.article > .article-references { margin-top: 40px; }
.article > .article-references > h2 { font-size: 1rem; line-height: 1.5; }
.article > :is(.essay-end,.article-end) { margin-top: 48px; }
.study-app-menu .study-menu-item { line-height: 1.5; }
.study-app-menu .study-menu-item > span:not(.study-menu-check) { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 767px) {
  :root { --reading-title: 1.5rem; }
  .portfolio-home { margin-top: 56px; }
  .article, .article.reading-page, .article.simple-exploration { margin-block: 24px 64px; }
  .article > header > h1, .article > header .article-lockup h1 { line-height: 1.25; }
  .article > header .article-lockup { align-items: flex-start; }
  .article > section, .article > section:first-of-type { margin-top: 32px; }
}

/* Case studies: two brief statements, then the product. */
.article.case-study.reading-page > section { margin-top: 24px; }
.article.case-study.reading-page > section > h2 {
  font-size: .875rem; font-weight: 500; line-height: 1.5;
  letter-spacing: normal; margin-bottom: 4px;
}
.article.case-study.reading-page > header > h1,
.article.case-study.reading-page > header .article-lockup h1 {
  font-size: 1.25rem; font-weight: 550; line-height: 1.35;
  letter-spacing: normal; color: var(--ink);
}
.article.case-study.reading-page .prose > h3 {
  font-size: 1rem; font-weight: 500; line-height: 1.45;
  letter-spacing: normal; color: var(--ink);
}
.article.case-study.reading-page .prose,
.article.case-study.reading-page .lead {
  font-size: .875rem; font-weight: 400; line-height: 1.5;
  letter-spacing: normal; color: #68686d;
}
.article.case-study.reading-page > .wallet-product-gallery { margin-top: 32px; }
.article.case-study.reading-page > section > h2 { font-size: 1rem; line-height: 1.45; margin-bottom: 6px; }

/* Case metadata follows About; full product captures keep their own ratio. */
.article.case-study.reading-page > .case-about {
  width: 100%; max-width: var(--site-measure); min-width: 0; margin: 12px 0 0;
}
.case-facts .case-team-member { display: block; }
.article.case-study.reading-page .case-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 24px;
  margin: 24px 0 0;
}
.article.case-study.reading-page .case-facts dt,
.article.case-study.reading-page .case-facts dd {
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.article.case-study.reading-page .case-facts dt { font-weight: 500; color: var(--ink); }
.article.case-study.reading-page .case-facts dd { font-weight: 400; color: #68686d; }
.article.case-study.reading-page > .wallet-product-gallery { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 480px) {
  .article.case-study.reading-page .case-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}