/* Balmer Works — page-level styles.
   Design tokens and the component classes (.btn, .tag, .blueprint) come from tokens.css.
   Everything else is written inline on the elements; only what inline styles cannot
   express lives here: custom properties, media queries, and interaction states. */

/* iOS Safari inflates text inside wide blocks unless this is set, which pushes body
   copy past its own container: the rules above each list item stay put while the words
   run over them. The previous build set it and this export dropped it. Keep it. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--color-accent-900)}
a{color:var(--color-accent-700);text-decoration:none}
a:not(.btn):hover{color:var(--color-accent-900)}

/* Ground. Both pages run .site.white: white ground, tinted sections a step off it. */
.site{--ground:var(--color-bg);--tint:var(--color-bg);--warm:var(--color-accent);--warm-deep:var(--color-accent-700)}
.site.white{--ground:#ffffff;--tint:var(--color-neutral-100);--warm:oklch(0.78 0.11 62);--warm-deep:oklch(0.48 0.10 55)}
.page-case .site.white{--tint:var(--color-bg)}
.site.white .tinted{background:var(--tint)}
.rail{padding-top:4px}

/* Buttons. 2px radius is a deliberate exception to the design system's square corners.
   Color change only on hover: no lift, no scale, no shadow. */
.btn{white-space:nowrap;flex:none;font-size:16px;font-weight:400;letter-spacing:.01em;padding:12px 22px;border-radius:2px;transition:background-color .15s ease,border-color .15s ease}
#top .btn,#talk .btn{font-size:18px;font-weight:400;padding:11px 22px}
.btn-primary:hover{background:var(--color-accent-700);border-color:var(--color-accent-700)}
.btn-primary:active{background:var(--color-accent-900);border-color:var(--color-accent-900)}
#top .btn-secondary:hover,#talk .btn-secondary:hover{background:color-mix(in srgb,#E9EEF2 12%,transparent);border-color:rgba(233,238,242,.85) !important}
/* The header slides out of the way on narrow screens while scrolling down; see scripts/header.js. */
header{transition:transform .25s ease}
@media (prefers-reduced-motion:reduce){ .btn,header{transition:none} }

/* Header CTA on the home page. header.js writes its two states (ghost over the hero, solid once the
   hero's own button has scrolled away) as inline styles, so the hover has to outrank them. The ghost
   state's inline style says "transparent", the solid state's says "accent". */
#nav-cta[style*="transparent"]:hover{background:color-mix(in srgb,#E9EEF2 12%,transparent) !important;border-color:rgba(233,238,242,.85) !important}
#nav-cta[style*="accent"]:hover{background:var(--color-accent-700) !important;border-color:var(--color-accent-700) !important}

/* Links on the dark grounds */
header nav a:not(.btn){color:var(--color-accent-200)}
header nav a:not(.btn):hover{color:#fff}
#talk a:not(.btn){color:var(--color-accent-200)}
#talk a:not(.btn):hover{color:#fff}

/* Responsive. The !important beats the inline grid definitions on the elements. */
@media (max-width:960px){
  .two,.three,.hero-pair{grid-template-columns:minmax(0,1fr) !important}
  .rail{padding-top:0;margin-bottom:-22px}   /* rail becomes an eyebrow above the heading */
  /* Grid items default to min-width:auto, so any of them can refuse to shrink below its
     content and push the whole column past the viewport. This bites at two depths on the
     case study: the parity figures grid, and the numbered articles, which are items of an
     inner grid used only for its 88px gap. Applying it to the whole subtree rather than to
     direct children covers both, and is a no-op on ordinary block boxes. Anyone reading a
     page zoomed in has a narrower layout viewport than the phone's own width, which is how
     this surfaced: 300px on a device that reports 390px. */
  .two *, .three *{min-width:0}
}
@media (max-width:960px){
  /* Arrival figures go 2-up rather than collapsing, and take a per-image aspect ratio
     so the handwriting and highlighter the captions promise stay in frame. */
  .arrive{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .arrive img{height:auto !important}
  .arrive .doc{aspect-ratio:3/4}
  .arrive .wide{aspect-ratio:4/3}
}
@media (max-width:860px){ .navlinks{display:none !important} }
@media (max-width:640px){ .hero-copy{grid-template-columns:minmax(0,1fr) !important} }
@media (max-width:560px){ .arrive{grid-template-columns:minmax(0,1fr) !important} .arrive figure{max-width:380px} }
@media (max-width:520px){ .bio-sig{grid-template-columns:minmax(0,1fr) !important} }

/* Keep linked sections clear of the sticky header. */
section[id]{scroll-margin-top:88px}
#top{scroll-margin-top:0}