/* ============================================================
   Steel City Codes - Base
   Reset, typography, shared text patterns, layout primitives,
   accessibility, reveals, reduced motion and print.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--header-h) + var(--s4))}
/* The padding keeps focused content and anchor targets clear of the sticky header. While focus is in the
   header itself it is dropped, so tabbing through the (always visible) header never scrolls the page. */
html:has(.site-header :focus){scroll-padding-top:0}
body{
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.6;font-weight:400;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--gold-soft);color:var(--ink)}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
strong,b{font-weight:600}
/* The reset above also strips what these elements need from the browser: a modal <dialog>
   is centred by its auto margin, and fieldsets keep a border and a min-content width. */
dialog{margin:auto}
fieldset{border:0;min-inline-size:0}
legend{padding:0}

/* One scroll lock for every overlay (mobile menu, message dialog). It goes on <html>:
   with html{overflow-x:clip}, overflow:hidden on <body> does not stop the page scrolling. */
html:is(.scroll-lock,.msg-lock){overflow:hidden}

/* keyboard focus: one ring everywhere */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:4px}

/* ---------- type ---------- */
h1,h2,h3,h4{letter-spacing:-.01em;text-wrap:balance}
h1,h2{font-family:var(--font-display);font-weight:var(--fw-display);line-height:1.06;letter-spacing:-.02em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.005em}
h4{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-body);line-height:1.35}
p{max-width:var(--measure);text-wrap:pretty}
p+p{margin-top:var(--s4)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2);max-width:56ch}
.muted{color:var(--ink-2)}
.meta{color:var(--ink-3);font-size:var(--fs-sm)}
.small{font-size:var(--fs-sm)}

/* Uppercase label: one style for every small category label. Use sparingly. */
.eyebrow,.mobile-group .label,.contact-card dt{display:block;font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow{margin-bottom:var(--s3)}

/* Gold kicker: a short line above or below a title ("Summer, one week"). */
.kicker{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;color:var(--gold-text)}

/* Text links: one gold underline that darkens on hover. Use .link on any inline text link;
   the listed contexts get it without a class. .link-lg is the heavier rule for big serif links. */
.link,.prose a,:is(.hero-alt,.menu-foot,.mobile-contact,.contact-card dd) a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:.18em;transition:text-decoration-color var(--d1) var(--ease),color var(--d1) var(--ease)}
.link:hover,.prose a:hover,:is(.hero-alt,.menu-foot,.mobile-contact,.contact-card dd) a:hover{text-decoration-color:var(--ink)}
.link-lg{text-decoration-thickness:3px;text-underline-offset:.16em}

/* long-form text */
.prose{max-width:var(--wrap-narrow)}
.prose p,.prose li{color:var(--ink-2);font-size:var(--fs-body)}
.prose p strong{color:var(--ink)}
.prose h2{font-size:var(--fs-h2-sm);margin:var(--s8) 0 var(--s4)}
.prose h3{margin:var(--s6) 0 var(--s3)}
.prose ul{list-style:disc;padding-left:1.25em;margin:var(--s4) 0}
.prose ol{list-style:decimal;padding-left:1.25em;margin:var(--s4) 0}
.prose li+li{margin-top:var(--s2)}
.prose hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:calc(var(--wrap-wide) + var(--gutter) * 2)}
.wrap-narrow{max-width:calc(var(--wrap-narrow) + var(--gutter) * 2)}
.section{padding-block:var(--sec)}
.section-sm{padding-block:var(--sec-sm)}
/* Two neighbouring sections on the same background share ONE gap: the second drops its top padding.
   Bands keep their own padding because the background change needs breathing room. */
main > :is(.section,.section-sm):not(.band) + :is(.section,.section-sm):not(.band){padding-top:0}
main > .band + .band{padding-top:0}
/* A page's closing callout (the last .section-sm) always sits one small gap below the content:
   a same-background .section before it gives up its large bottom padding. */
main > .section:not(.band):has(+ .section-sm:last-child:not(.band)){padding-bottom:var(--sec-sm)}
.band{background:var(--bg-2)}

/* section heading block: stacked, never split into two columns */
.sec-head{max-width:60ch;margin-bottom:var(--gap-block)}
.sec-head h2{margin-bottom:var(--s4)}

/* button rows: .row inside cards and callouts, .actions under a hero or a list */
.row{display:flex;gap:var(--s4) var(--s3);flex-wrap:wrap;align-items:center}
.actions{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s6)}
.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}.mt-8{margin-top:var(--s8)}
.mb-6{margin-bottom:var(--s6)}

/* ---------- accessibility utilities ---------- */
.skip-link{position:absolute;left:var(--s4);top:-80px;z-index:var(--z-skip);background:var(--gold);color:var(--on-gold);font-weight:600;padding:var(--s3) var(--s4);border-radius:var(--r-ctl);transition:top var(--d1) var(--ease)}
.skip-link:focus{top:var(--s4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* keeps a number range such as "grades 6-12" from breaking at its hyphen (region pages get it from the generator) */
.nowrap{white-space:nowrap}

/* ---------- motion: reveals (only when JS is present) ---------- */
/* html.js is set by the inline script in the head; main.js reveals content as it scrolls in.
   If main.js never runs, the head script removes html.js again on load, so nothing stays hidden. */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease)}
html.js .reveal.is-visible{opacity:1;transform:none}
html.js .reveal[data-delay="1"]{transition-delay:.08s}
html.js .reveal[data-delay="2"]{transition-delay:.16s}
html.js .reveal[data-delay="3"]{transition-delay:.24s}
/* photos settle in from a slight zoom */
html.js .reveal-img img{transform:scale(1.05);transition:transform 1.1s var(--ease)}
html.js .reveal-img.is-visible img{transform:scale(1)}
/* gold underline that draws itself when its heading appears */
.hl{background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-size:100% .2em;background-position:0 90%;padding:0 .03em}
html.js .hl{background-size:0 .2em;transition:background-size .9s var(--ease) .25s}
html.js .is-visible .hl,html.js .hl.is-visible{background-size:100% .2em}

/* gentle parallax on tall frames. CSS only, no scroll listeners. */
@supports (animation-timeline: view()){
  html.js .parallax img{animation:parallax linear both;animation-timeline:view();scale:1.12}
  @keyframes parallax{from{translate:0 6%}to{translate:0 -6%}}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  html.js .reveal,html.js .reveal-img img{opacity:1;transform:none}
  html.js .hl{background-size:100% .2em}
  html.js .parallax img{animation:none;scale:1}
  /* hover nudges would become jumps */
  .btn:hover,.btn:active,a:hover .photo img,.link-arrow:hover .ic,.region-tile a:hover .ic,.prog:hover h3 .ic{transform:none !important}
}

/* ---------- print: everything visible, no chrome that only works on screen ---------- */
@media print{
  html.js .reveal,html.js .reveal-img img,html.js .hero-copy>*{opacity:1 !important;transform:none !important;animation:none !important}
  html.js .hl{background-size:100% .2em}
  .site-header{position:static;box-shadow:none}
  .skip-link,.mobile-menu,.menu-toggle,.menu,.marquee-controls{display:none !important}
}

/* ---------- phones: stacked buttons share one full width ---------- */
@media (max-width:520px){
  :is(.actions,.callout .row,.error-page .row,.path .row,.program .row)>.btn{flex:1 1 100%;white-space:normal;height:auto;min-height:48px;padding-block:var(--s3);text-align:center;line-height:1.25}
  :is(.actions,.callout .row,.error-page .row,.path .row,.program .row)>.btn-lg{min-height:56px}
  .callout .row{width:100%}
}