/* 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. */

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}
@media (prefers-reduced-motion:reduce){ .btn{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 */
}
@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} }