/* Resets and global behaviour only. All page layout lives in the markup
   as inline styles — see README "Why the styles are inline". */
*{box-sizing:border-box}
body{margin:0;background:var(--sg-void);color:var(--sg-mist);font-family:var(--sg-font-body);font-weight:300;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:var(--sg-signal-light);transition:color var(--sg-dur-1) var(--sg-ease-out)}
a:hover{color:var(--sg-sprout)}
img{max-width:100%}
input,select,textarea{font-family:var(--sg-font-body)}
input::placeholder,textarea::placeholder{color:var(--sg-muted)}
:focus-visible{outline:2px solid var(--sg-focus);outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sg-focus);outline-offset:1px;border-color:transparent}



/* Responsive: pages are authored at 1240px. These attribute selectors are a
   pragmatic bridge for inline-styled markup — replace with real breakpoints
   if you componentise. Targets: 375 / 768 / 1280. */
@media (max-width:1000px){
  header nav{gap:18px!important;font-size:13px!important}
  section > div[style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:40px!important}
  div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr!important}
  div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important}
  div[style*="border-left:1px solid"]{border-left:0!important;padding-left:0!important}
}
@media (max-width:640px){
  header nav a:not([style*="background"]){display:none}
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  section > div{padding-left:20px!important;padding-right:20px!important}
}