/* Non-card interface roles. Legacy card tokens and selectors are deliberately frozen. */
.site-shell {
  --ui-header-height: 72px;
  --ui-header-decoration: 6px;
  --ui-anchor-clearance: 20px;
  --ui-anchor-offset: calc(var(--ui-header-height) + var(--ui-header-decoration) + var(--ui-anchor-clearance));
  --ui-page-gutter: var(--pad);
  --ui-reading-gutter: 20px;
  --ui-reading-width: 720px;
  --ui-section-space: 80px;
  --ui-nav-gap: 32px;
  --ui-display: clamp(48px, 5vw, 72px);
  --ui-title: 44px;
  --ui-heading: 28px;
  --ui-subheading: 18px;
  --ui-body: 17px;
  --ui-intro: 18px;
  --ui-caption: 14px;
  --ui-control: 14px;
  --ui-body-leading: 1.9;
  --ui-intro-leading: 1.8;
  --ui-title-leading: 1.35;
  --ui-heading-leading: 1.5;
  --ui-utility-leading: 1.7;
  --ui-title-tracking: -0.02em;
  --ui-copy-gap: 16px;
  --ui-lead-gap: 24px;
  --ui-section-gap: 48px;
  --ui-image-gap: 32px;
  --ui-caption-gap: 8px;
  --ui-action-gap: 8px;
  --ui-control-padding: 16px;
  --ui-control-height: 44px;
  --ui-motion: 180ms;
}

/* One shell on the index, project articles and related studies. */
.site-shell .site-header {
  height: var(--ui-header-height);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding-inline: var(--ui-page-gutter);
}
.site-shell .brand { min-width: var(--ui-control-height); min-height: var(--ui-control-height); }
.site-shell .site-nav { display: flex; gap: var(--ui-nav-gap); }
.site-shell .site-nav a {
  font-family: var(--body);
  font-size: var(--ui-control);
  font-weight: var(--weight-medium);
  line-height: var(--ui-utility-leading);
  letter-spacing: 0;
  min-width: var(--ui-control-height);
  min-height: var(--ui-control-height);
  color: var(--ink);
}
.site-shell .site-nav a::after {
  bottom: var(--space-0-5);
  background: currentColor;
  transition: transform var(--ui-motion) var(--ease-standard);
}
.site-shell .site-nav a[aria-current]::after,
.site-shell .site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-shell .site-nav a:active { color: var(--violet); }

/* The section already owns top padding: subtract it once for native anchor jumps. */
.site-shell .hero { scroll-margin-top: 0; }
.site-shell .journey { scroll-margin-top: calc(var(--ui-anchor-offset) - var(--ui-section-space)); padding-top: var(--ui-section-space); padding-bottom: calc(var(--ui-section-space) / 2); }
.site-shell .inner-court { scroll-margin-top: calc(var(--ui-anchor-offset) - var(--ui-section-space) / 2); }
.site-shell .exit-line { scroll-margin-top: calc(var(--ui-anchor-offset) - var(--space-3)); }
.site-shell #main { scroll-margin-top: var(--ui-anchor-offset); }
.site-shell .project-review :is(.review-section, .review-gallery, .answer-review) { scroll-margin-top: var(--ui-anchor-offset); }

/* Homepage: same approved headline and illustration, with explicit type roles. */
.site-shell .hero {
  padding-top: calc(var(--ui-header-height) + var(--space-6));
  padding-bottom: var(--ui-section-space);
}
.site-shell .hero h1 { font-size: var(--ui-display); }
.site-shell .hero .keep-phrase { max-width: 100%; overflow-wrap: break-word; }
.site-shell :is(.hero-copy, .journey-head, .inner-court) > .eyebrow,
.site-shell .journey-head .eyebrow,
.site-shell .inner-court .eyebrow { margin-bottom: var(--ui-copy-gap); }
.site-shell :is(.journey-head, .inner-court) h2 {
  font-family: var(--display);
  font-size: var(--ui-title);
  font-weight: var(--weight-semibold);
  line-height: var(--ui-title-leading);
  letter-spacing: var(--ui-title-tracking);
  overflow-wrap: break-word;
}
.site-shell .journey-head { max-width: none; }
.site-shell .hero-lead,
.site-shell .belief p,
.site-shell .exit-line p {
  font-family: var(--body);
  font-size: var(--ui-intro);
  font-weight: var(--weight-regular);
  line-height: var(--ui-intro-leading);
  letter-spacing: 0;
}
.site-shell .hero-lead { margin-top: var(--ui-lead-gap); }
.site-shell .hero-actions { gap: var(--space-2); margin-top: var(--ui-lead-gap); }
.site-shell .inner-court.calm-court {
  min-height: 0;
  /* Share the boundary space with .journey instead of stacking two full gaps. */
  padding: calc(var(--ui-section-space) / 2) var(--ui-page-gutter) var(--ui-section-space);
}
.site-shell .inner-court-grid { gap: var(--ui-section-gap); }
.site-shell .belief strong { font-size: var(--ui-caption); line-height: var(--ui-intro-leading); }
.site-shell .exit-line { margin-top: var(--ui-section-gap); }
.site-shell .project-drafts :is(h3, h4) {
  font-family: var(--display);
  font-size: var(--ui-subheading);
  font-weight: var(--weight-semibold);
  line-height: var(--ui-heading-leading);
}
.site-shell .project-drafts p { font-family: var(--body); font-size: var(--ui-intro); line-height: var(--ui-intro-leading); }
.site-shell .project-drafts .draft-status { font-size: var(--ui-caption); line-height: var(--ui-utility-leading); }

/* Shared article scale includes nested evidence paragraphs, lists and quotations. */
.site-shell .project-review {
  width: calc(100% - var(--ui-reading-gutter) * 2);
  max-width: var(--ui-reading-width);
  padding-top: calc(var(--ui-header-height) + var(--space-6));
  padding-bottom: var(--ui-section-space);
  font-family: var(--body);
  font-size: var(--ui-body);
  font-weight: var(--weight-regular);
  line-height: var(--ui-body-leading);
  letter-spacing: 0;
  overflow-wrap: break-word;
}
.site-shell .review-header { padding-bottom: 0; border-bottom: 0; }
.site-shell .review-header h1 {
  margin-top: var(--ui-copy-gap);
  font-family: var(--display);
  font-size: var(--ui-title);
  font-weight: var(--weight-semibold);
  line-height: var(--ui-title-leading);
  letter-spacing: var(--ui-title-tracking);
}
.site-shell .project-review h2 {
  font-family: var(--display);
  font-size: var(--ui-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--ui-heading-leading);
  letter-spacing: 0;
}
.site-shell .project-review h3 {
  font-family: var(--display);
  font-size: var(--ui-subheading);
  font-weight: var(--weight-semibold);
  line-height: var(--ui-heading-leading);
  letter-spacing: 0;
}
.site-shell .project-review :is(p, li, blockquote, dt, dd, .case-table, .score-table) {
  font-family: var(--body);
  font-size: var(--ui-body);
  font-weight: var(--weight-regular);
  line-height: var(--ui-body-leading);
  letter-spacing: 0;
  color: var(--ink);
}
.site-shell .project-review p { margin-block: var(--ui-copy-gap) 0; }
.site-shell .project-review :is(strong, dt) { font-weight: var(--weight-semibold); }
.site-shell .project-review .review-lead { margin-top: var(--ui-lead-gap); }
.site-shell .review-section { padding-top: 0; margin-top: var(--ui-section-gap); }
.site-shell .project-review .review-post-meta { margin: 0; }
.site-shell .project-review :is(.review-sequence, .review-notes, .case-checks) { margin-top: var(--ui-copy-gap); }
.site-shell .review-sequence { padding-left: var(--space-3); }
.site-shell .review-sequence li { padding-left: 0; }
.site-shell .review-sequence li + li { margin-top: var(--ui-copy-gap); }
.site-shell .project-review blockquote,
.site-shell .review-notes {
  padding: 0 0 0 var(--ui-copy-gap);
  border-left: var(--stroke-focus) solid var(--line);
  background: transparent;
}
.site-shell .project-review blockquote p:first-child { margin-top: 0; }
.site-shell .review-note h3 { margin-bottom: var(--ui-copy-gap); }
.site-shell .review-note p { margin-top: 0; }
.site-shell .answer-review-excerpt p + p { margin-top: var(--ui-copy-gap); }
.site-shell .answer-review + .answer-review { margin-top: var(--ui-section-gap); padding-top: 0; border-top: 0; }
.site-shell .answer-review-header p { margin: 0; }
.site-shell .project-review .scenario-group-heading p { margin: 0; }
.site-shell .project-review .case-table p { margin-top: var(--space-1); }
.site-shell .project-review .case-table p:first-child { margin-top: 0; }

/* Caption text is separate from the 44px action row; public URLs stay the same. */
.site-shell .project-review .project-artifact,
.site-shell .project-review .review-gallery { margin-top: var(--ui-image-gap); }
.site-shell .project-review .artifact-gallery .project-artifact { margin-top: 0; }
/* Opt-in for tall source-page captures; existing image and card framing stays fixed. */
.site-shell .project-review .project-artifact.is-natural .artifact-frame img { aspect-ratio: var(--artifact-ratio, auto); height: auto; }
.site-shell .project-review .project-artifact figcaption { margin-top: var(--ui-caption-gap); }
.site-shell .project-review .artifact-actions { display: flex; flex-wrap: wrap; margin-top: var(--ui-action-gap); }
.site-shell .project-review :is(figcaption, caption, .review-post-meta, .evidence-source, .case-path, .scenario-count, .scenario-group-heading p, .case-mobile-label, .score-rules small) {
  font-family: var(--body);
  font-size: var(--ui-caption);
  font-weight: var(--weight-regular);
  line-height: var(--ui-utility-leading);
  letter-spacing: 0;
  color: var(--tile-soft);
}
.site-shell .project-review .review-post-meta time { font-family: var(--mono); }

/* Two button treatments, inline text links, and explicit non-color states. */
.site-shell :is(.action-link, .resume-link, .viewer-toolbar button, .viewer-toolbar a) {
  min-height: var(--ui-control-height);
  padding: var(--space-1) var(--ui-control-padding);
  font-family: var(--body);
  font-size: var(--ui-control);
  font-weight: var(--weight-medium);
  line-height: var(--ui-utility-leading);
  letter-spacing: 0;
  border-width: var(--stroke-border);
  border-style: solid;
  text-decoration: none;
  transition: color var(--ui-motion) var(--ease-standard), background-color var(--ui-motion) var(--ease-standard), border-color var(--ui-motion) var(--ease-standard);
}
.site-shell .action-link:hover { transform: none; background: var(--wall-bright); }
.site-shell .action-link.primary:hover { color: var(--wall-bright); background: var(--tile); }
.site-shell :is(.action-link, .resume-link, .viewer-toolbar button, .viewer-toolbar a):active { text-decoration: underline; text-underline-offset: var(--space-0-5); }
.site-shell .viewer-toolbar :is(button, a):hover { border-color: var(--ink); background: var(--wall); }
.site-shell .viewer-toolbar button[aria-pressed="true"] { background: var(--ink); color: var(--wall-bright); text-decoration: underline; text-underline-offset: var(--space-0-5); }
.site-shell .project-review a:not(.artifact-frame) {
  color: var(--violet);
  text-decoration: underline;
  text-decoration-thickness: var(--stroke-border);
  text-underline-offset: var(--space-0-5);
  transition: color var(--ui-motion) var(--ease-standard), text-decoration-color var(--ui-motion) var(--ease-standard);
}
.site-shell .project-review a:not(.artifact-frame):hover { color: var(--ink); text-decoration-thickness: var(--stroke-focus); }
.site-shell .project-review a:not(.artifact-frame):active { text-decoration-style: double; }
.site-shell :is(.artifact-actions, .review-actions, .review-download) a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-control-height);
  font-family: var(--body);
  font-size: var(--ui-control);
  font-weight: var(--weight-medium);
  line-height: var(--ui-utility-leading);
  letter-spacing: 0;
}
.site-shell .review-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.site-shell .project-review summary {
  font-family: var(--body);
  font-size: var(--ui-control);
  font-weight: var(--weight-medium);
  line-height: var(--ui-utility-leading);
  transition: background-color var(--ui-motion) var(--ease-standard), color var(--ui-motion) var(--ease-standard);
}
.site-shell .project-review details[open] > summary { text-decoration: underline; text-underline-offset: var(--space-0-5); }
.site-shell .project-review summary:active { color: var(--violet); }
.site-shell :is(.site-header, .hero, .inner-court, .project-review, .project-next, .image-viewer) :focus-visible {
  outline: var(--stroke-focus) solid currentColor;
  outline-offset: var(--space-0-5);
}
.site-shell .viewer-message { font-family: var(--body); font-size: var(--ui-caption); line-height: var(--ui-utility-leading); color: var(--tile-soft); overflow-wrap: anywhere; }

.site-shell .project-next {
  padding: var(--space-3) var(--ui-page-gutter);
  gap: var(--space-2) var(--space-4);
}
.site-shell .project-next a {
  font-family: var(--body);
  font-size: var(--ui-control);
  font-weight: var(--weight-medium);
  line-height: var(--ui-utility-leading);
  letter-spacing: 0;
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: var(--space-0-5);
  transition: color var(--ui-motion) var(--ease-standard);
}
.site-shell .project-next a:hover { color: var(--ink); }
.site-shell .project-next a:active { text-decoration-style: double; }
.site-shell .site-footer {
  padding-inline: var(--ui-page-gutter);
  gap: var(--space-2) var(--space-4);
  flex-wrap: wrap;
  font-family: var(--body);
  font-size: var(--ui-caption);
  line-height: var(--ui-utility-leading);
  letter-spacing: 0;
  text-transform: none;
}
.site-shell .footer-signature { font-family: var(--mono); font-size: var(--text-micro); letter-spacing: .1em; text-transform: uppercase; }
.site-shell .footer-version { margin: 0; }
.site-shell .footer-version span { font-family: var(--mono); }
.project-page.site-shell .site-footer { background: var(--wall); color: var(--tile-soft); border-top-color: var(--line); }

@media (max-width: 820px) {
  .site-shell {
    --ui-header-height: 64px;
    --ui-nav-gap: 8px;
    --ui-display: 40px;
    --ui-title: 32px;
    --ui-heading: 24px;
    --ui-body: 16px;
    --ui-intro: 16px;
    --ui-section-space: 64px;
    --ui-image-gap: 24px;
  }
  .site-shell .hero { padding-top: calc(var(--ui-header-height) + var(--space-5)); }
  .site-shell .inner-court-grid { grid-template-columns: minmax(0, 1fr); }
  .site-shell .exit-line { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .site-shell .project-next { flex-direction: column; align-items: flex-start; }
  .site-shell .site-footer { flex-direction: column; align-items: flex-start; }
}