/* Shared public shell. Geometry follows the homepage; values come from Brain tokens. */
/* Preserve page-owned scroll indicators above the shared header (z-index: 100). */
.progress { z-index:120 }
.public-header, .public-footer, .public-where-next, .public-breadcrumbs { box-sizing:border-box; font-family:var(--font-body); color:var(--text-primary); line-height:var(--leading-normal) }
.public-header *, .public-footer *, .public-where-next *, .public-breadcrumbs * { box-sizing:border-box }
.public-header a, .public-footer a, .public-where-next a, .public-breadcrumbs a { color:inherit; text-decoration:none }
.public-header a:focus-visible, .public-footer a:focus-visible, .public-where-next a:focus-visible, .public-breadcrumbs a:focus-visible, .public-explore summary:focus-visible { outline:2px solid var(--text-primary); outline-offset:var(--space-1) }
/* Match the homepage's 1200px outer box less its two 40px inner gutters.
   Keep this shell geometry independent of each page's content tokens. */
.public-header, .public-footer { --public-shell-max:calc(var(--container-max) - var(--space-5) - var(--space-5) - var(--space-4) - var(--space-4)); --public-shell-gutter:clamp(calc(var(--space-4) + var(--space-1)),5vw,calc(var(--space-6) + var(--space-2))) }
.public-header { position:sticky; top:0; z-index:100; width:100%; padding:var(--space-4) var(--public-shell-gutter); background:var(--surface-canvas); transition:background var(--dur-fast) var(--ease-brand), box-shadow var(--dur-fast) var(--ease-brand) }
.public-header[data-transparent] { position:fixed; background:transparent }
.public-header.is-scrolled, .public-header:has(.public-explore[open]) { background:var(--surface-canvas); box-shadow:var(--shadow-sm) }
.public-header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); max-width:var(--public-shell-max); margin-inline:auto }
/* The supplied 1600-wide artwork begins at x=70 (eye centre 200, ring radius 124.25 + half-stroke 5.75).
   Offset its container by that intrinsic inset; never crop or modify the sacred artwork. */
.public-brand { --public-mark-width:calc(var(--space-10) + var(--space-6)); display:inline-flex; flex:none; align-items:center; min-height:44px; min-width:44px; margin-inline-start:calc(var(--public-mark-width) * -70 / 1600) }
.public-brand img { display:block; width:var(--public-mark-width); height:calc(var(--public-mark-width) / 4); max-width:100%; margin:0 }
.public-desktop { display:flex; align-items:center; gap:0; margin-left:auto; padding:var(--space-1) var(--space-4); border:1px solid transparent; border-radius:var(--radius-full) }
/* Preserve the former blog header's 72% canvas and 80% hairline, using canonical colours. */
.public-header[data-transparent]:not(.is-scrolled) .public-desktop { background:color-mix(in srgb, var(--surface-canvas) 72%, transparent); border-color:color-mix(in srgb, var(--border-hairline) 80%, transparent); backdrop-filter:blur(var(--space-4)); -webkit-backdrop-filter:blur(var(--space-4)) }
.public-desktop a, .public-explore summary, .public-menu a, .public-contact { display:flex; align-items:center; min-height:44px; min-width:44px; font-family:var(--font-mono); font-size:var(--text-small); font-weight:var(--weight-regular); letter-spacing:var(--tracking-normal); white-space:nowrap }
/* Equal label gaps: each label owns 8px padding per side, with no minimum-width remainder. */
.public-desktop a { justify-content:center; padding-inline:var(--space-2) }
.public-desktop a:hover, .public-header a[aria-current], .public-footer a:hover, .public-footer a[aria-current="page"] { text-decoration:underline; text-underline-offset:var(--space-1) }
.public-actions { display:flex; align-items:center; gap:var(--space-3); flex:none }
.public-header .public-contact { padding:var(--space-3) var(--space-5); border-radius:var(--radius-full); background:var(--cta-bg); color:var(--cta-text); transition:background var(--dur-fast) var(--ease-brand) }
.public-header .public-contact:hover { background:var(--cta-bg-hover) }
.public-explore { display:none; position:relative }
.public-explore summary { list-style:none; cursor:pointer; gap:var(--space-2) }
.public-explore summary::-webkit-details-marker { display:none }
.public-explore summary span { transition:transform var(--dur-fast) var(--ease-brand) }
.public-explore[open] summary span { transform:rotate(45deg) }
.public-menu { position:absolute; top:calc(100% + var(--space-3)); right:0; display:grid; width:max-content; min-width:calc(var(--space-9) * 2); max-height:calc(100dvh - var(--space-10)); overflow:auto; padding:var(--space-2); background:var(--surface-canvas); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl) }
.public-menu a { padding:var(--space-2) var(--space-3); border-radius:var(--radius-md) }
.public-menu a:hover, .public-menu a[aria-current="page"] { background:var(--surface-raised) }
.public-footer { position:relative; z-index:2; padding:var(--space-8) var(--public-shell-gutter) calc(var(--space-10) + env(safe-area-inset-bottom)); border-top:1px solid var(--border-hairline); background:var(--surface-canvas) }
.public-footer-inner { display:grid; grid-template-columns:2fr repeat(3, 1fr); gap:var(--space-7); max-width:var(--public-shell-max); margin-inline:auto }
.public-signoff p { margin:var(--space-4) 0 var(--space-5); color:var(--text-secondary); font-size:var(--text-body) }
.public-social { display:flex; gap:var(--space-2) }
.public-social a { display:grid; place-items:center; min-width:44px; min-height:44px; border:1px solid var(--border-hairline); border-radius:var(--radius-full) }
.public-social a:hover { background:var(--surface-raised) }
.public-footer-group { display:flex; align-items:flex-start; flex-direction:column; min-width:0 }
.public-footer-group h2, .public-eyebrow { margin:0 0 var(--space-4); font-family:var(--font-mono); font-size:var(--text-eyebrow); font-weight:var(--weight-regular); line-height:var(--leading-normal); text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--text-secondary) }
.public-footer-group a { display:flex; align-items:center; min-height:44px; min-width:44px; font-size:var(--text-body) }
.public-where-next { position:relative; z-index:2; padding:var(--space-8) var(--gutter); margin:0; background:var(--surface-canvas) }
.public-next-inner { max-width:var(--container-max); margin-inline:auto }
.public-next-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5) }
.public-next-card { display:grid; grid-template-columns:1fr auto; gap:var(--space-3) var(--space-5); padding:var(--space-6); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); background:var(--surface-raised); box-shadow:var(--shadow-sm); transition:box-shadow var(--dur-fast) var(--ease-brand) }
.public-next-card:hover { box-shadow:var(--shadow-lg) }
.public-next-card h2 { margin:0; font-size:var(--text-h3); font-weight:var(--weight-display); line-height:var(--leading-snug); letter-spacing:var(--tracking-display) }
.public-next-card p { grid-column:1; margin:0; color:var(--text-secondary); font-size:var(--text-body); line-height:var(--leading-normal) }
.public-next-card > span { grid-column:2; grid-row:1; font-size:var(--text-h4) }
.public-breadcrumbs { max-width:var(--container-max); margin:0 auto var(--space-6) }
.article-hero .public-breadcrumbs { max-width:none; margin-inline:0 }
.public-breadcrumbs ol { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); list-style:none; padding:0; margin:0; font-size:var(--text-small) }
.public-breadcrumbs li { display:flex; align-items:center; gap:var(--space-2); margin:0; color:var(--text-secondary) }
.public-breadcrumbs li + li::before { content:'›' }
.public-breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; justify-content:center; padding-inline:var(--space-2); margin-inline:calc(-1 * var(--space-2)); text-decoration:underline; text-underline-offset:var(--space-1) }
.public-intro a { color:var(--text-primary); text-decoration:underline; text-underline-offset:var(--space-1); text-decoration-thickness:1px }
@media (max-width:1023px) {
  .public-desktop { display:none }
  .public-explore { display:block }
  .public-footer-inner { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6) }
  .public-signoff { grid-column:1 / -1 }
}
@media (max-width:599px) {
  .public-header { padding:var(--space-3) var(--public-shell-gutter) }
  .public-header-inner { gap:var(--space-2) }
  .public-header .public-brand { --public-mark-width:var(--space-10) }
  .public-explore summary, .public-contact { font-size:var(--text-eyebrow) }
  .public-header .public-contact { padding:var(--space-3) }
  .public-menu { position:fixed; top:var(--space-8); left:var(--space-4); right:var(--space-4); width:auto }
  .public-footer-inner { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6) }
  .public-next-grid { grid-template-columns:minmax(0,1fr) }
  .public-next-card { padding:var(--space-5) }
}
@media (prefers-reduced-motion:reduce) {
  .public-header, .public-header .public-contact, .public-explore summary span, .public-next-card { transition:none }
}
.public-articles { max-width:var(--public-shell-max); margin:var(--space-7) auto 0; border-top:1px solid var(--border-hairline); padding-top:var(--space-4) }
.public-articles summary { display:flex; align-items:center; justify-content:space-between; min-height:44px; cursor:pointer; list-style:none; font-family:var(--font-mono); font-size:var(--text-small) }
.public-articles summary::-webkit-details-marker { display:none }
.public-articles nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3) var(--space-6); margin-top:var(--space-4) }
.public-articles a { display:flex; align-items:center; min-height:44px; font-size:var(--text-body) }
.public-articles[open] summary span { transform:rotate(45deg) }
.public-articles summary:focus-visible { outline:2px solid var(--text-primary); outline-offset:var(--space-1) }
@media (max-width:599px) { .public-articles nav { grid-template-columns:minmax(0,1fr) } }