/* Matthew Braner portfolio — shared globals. Palette and rules per handoff-notes.md:
   two tones only (#08080a/#0c0c0e bg, #ecece8/#b6b6b0/#8a8a84 ink, green oklch(0.84 0.17 142)). */
html { background: #08080a; }
body { margin: 0; background: #08080a; color: #ecece8; font-family: 'Archivo', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
* { box-sizing: border-box; }
a { color: #ecece8; text-decoration: none; }
a:hover { color: oklch(0.84 0.17 142); }
::selection { background: oklch(0.84 0.17 142); color: #08080a; }

@keyframes mbmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mbdrawrl { from { clip-path: inset(-45% -35% -45% 135%); } to { clip-path: inset(-45% -35% -45% -35%); } }
@keyframes mbdrawlr { from { clip-path: inset(-45% 135% -45% -35%); } to { clip-path: inset(-45% -35% -45% -35%); } }
@keyframes mbsweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mbblink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }

/* --- responsive: the fixed rail becomes a top strip, then disappears --- */
@media (max-width: 1100px) {
  nav[data-railnav] { position: static !important; transform: none !important; width: auto !important;
    flex-direction: row !important; flex-wrap: wrap; gap: 14px 20px !important;
    padding: 96px 32px 0 !important; }
  nav[data-railnav] a { color: #8a8a84 !important; }
  nav[data-railnav] [data-raillabel] { opacity: 1 !important; transform: none !important; }
  main { padding-left: 32px !important; padding-right: 32px !important; }
  main > section:first-of-type { padding-top: 40px !important; }
}
@media (max-width: 760px) {
  [data-menu-panel] { display: none !important; }
  header > div:last-child { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px !important; }
  header { padding: 16px 20px 26px !important; font-size: 10px !important; }
  header > div:last-child { gap: 14px !important; }
  nav[data-railnav] { display: none !important; }
  main { padding-left: 20px !important; padding-right: 20px !important; }
  main > section { padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-mobilestack] { grid-template-columns: 1fr !important; }
  [data-mobilescroll] { overflow-x: auto !important; }
  /* hero kicker / section header mono rows: allow wrapping — several have more
     fixed-width text than a phone viewport (inline styles set no flex-wrap).
     Both attribute forms are needed: the authored `display:flex;...` and the
     browser-serialized `display: flex; ...` (any JS write to el.style rewrites
     the attribute with spaces — the reveal wiring does this to every kicker) */
  main div[style^="display:flex;align-items:center;gap:18px"],
  main div[style^="display: flex; align-items: center; gap: 18px"],
  main div[style^="display:flex;align-items:baseline;gap:18px"],
  main div[style^="display: flex; align-items: baseline; gap: 18px"] { flex-wrap: wrap; row-gap: 12px; }
  /* hero kickers carry short crumbs — wrap them as whole units, not mid-phrase
     (section headers keep internal wrapping: their annotations are sentences) */
  main div[style^="display:flex;align-items:center;gap:18px"] > *,
  main div[style^="display: flex; align-items: center; gap: 18px"] > * { white-space: nowrap; }
}
/* --- honour reduced-motion preferences --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}