/* 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 a wide child can push its whole column
     past the viewport instead of shrinking. The case study's parity figures resolved
     to three fixed 180px tracks and forced the page to 637px inside a 375px screen.
     Allowing the items to shrink lets that grid's own auto-fit do its job. */
  .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} }