/* ============================================================
   Young Guns Studio — /programs/ shared style layer.
   Site shell for the hand-authored program pages: header,
   breadcrumb, program sheet, studio gallery + lightbox, pathway
   cards, and the programs hub. The site footer (.og-footer) is
   styled by /main.css, which every program page loads first —
   this sheet only registers the fonts the footer expects.

   Design system: each program page is set as a studio "course
   sheet" — drafting margin frame, folio marks (the pathway is a
   three-sheet sequence), a boxed course-particulars title block,
   and a grade ruler that places the program on the 5–12 scale.
   ============================================================ */

/* display faces (same registrations as the outcome profile pages) */
@font-face{
  font-family:'Cooper Hewitt';font-weight:700;font-style:italic;font-display:swap;
  src:url('/assets/media/assets/nkYS5GLtI8UZeuhvRXx6KQt2so.woff2') format('woff2');
}
@font-face{
  font-family:'Cooper Hewitt';font-weight:600;font-style:normal;font-display:swap;
  src:url('/assets/media/assets/MFMTImrYHNWHzwjEDel1hYu38E.woff2') format('woff2');
}
@font-face{
  font-family:'Cooper Hewitt';font-weight:400;font-style:normal;font-display:swap;
  src:url('/assets/media/assets/QY4y2mZmfQUD8gJdqVxyGENhI.woff2') format('woff2');
}
/* faces the og-footer (styled in /main.css) uses — registered exactly
   as the generated pages register them */
@font-face{font-family:"Cooper Hewitt Bold Italic";src:url("/assets/media/assets/nkYS5GLtI8UZeuhvRXx6KQt2so.woff2");font-style:normal;font-weight:712}
@font-face{font-family:"Cooper Hewitt Bold Italic";src:url("/assets/media/assets/nkYS5GLtI8UZeuhvRXx6KQt2so.woff2");font-display:swap}
@font-face{font-family:"Inter Variable";src:url("/assets/media/assets/7lw0VWkeXrGYJT05oB3DsFy8BaY.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070,U+2074-207E,U+2080-208E,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* the same variable file mapped to 600 so ruler ticks, folios and
   title-block labels get a true wght=600, not synthetic bold */
@font-face{font-family:"Inter Variable";src:url("/assets/media/assets/7lw0VWkeXrGYJT05oB3DsFy8BaY.woff2");font-display:swap;font-style:normal;font-weight:600;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070,U+2074-207E,U+2080-208E,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#0a0c1a;
  --navy-2:#101223;
  --ink:#262a4d;
  --ink-soft:rgba(38,42,77,.72); /* 5.6:1 on white — AA for the small uppercase labels */
  --ink-line:rgba(38,42,77,.16);
  /* --red / --red-deep are declared once, in /main.css :root, which every
     page here loads first — see the brand-token note at the top of that
     file. Only the variants this sheet alone uses live here. */
  --red-bright:#e0607a; /* red labels on the dark ground — 5.2:1 */
  --plum:#55395f;       /* CTA gradient tail (matches the site nav CTA) */
  --steel:#4d7488;
  --paper:#ffffff;
  --panel:#eef0f5;      /* cool paper tint for title-block strips */
  --muted:#b9bdcf;
  --faint:#8b90a8;
  --line:rgba(255,255,255,.12);
  --display:'Cooper Hewitt','Source Sans Pro',Georgia,serif;
  --utility:"Inter Variable",Inter,system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(77,116,136,.18), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(200,40,63,.14), transparent 55%),
    linear-gradient(180deg, var(--navy-2), var(--navy));
  color:var(--paper);
  font-family:var(--display);
  font-weight:400;
  display:flex;flex-direction:column;
  overflow-x:hidden;
}
a{color:inherit}
a:focus-visible{outline:3px solid var(--red);outline-offset:4px;border-radius:2px}

/* ---- Site header ---- */
/* the shared floating pill nav (.og-topnav, styled in /main.css and
   injected by /enhance.js) is this page's header now — main.css also
   hides any generated .yg-w2UcW bar, but these hand-authored pages never
   had one. main's top padding below just reserves room for the pill so
   it doesn't sit on top of the card at load. */

main{
  flex:1;width:100%;max-width:1080px;margin:0 auto;
  padding:112px clamp(18px,4vw,56px) 64px;
}
@media(max-width:1199.98px){
  main{padding-top:92px}
}

/* ---- Breadcrumb ---- */
.crumb{margin:6px 0 18px 4px}
.crumb ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  font-family:var(--utility);font-weight:600;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.crumb li{display:flex;align-items:center}
.crumb li+li::before{content:"/";margin:0 10px;color:var(--muted)}
/* enhance.js's target-size pass (axe: target-size) bumps every <a> under
   24px tall to min-height:24px — the plain-text current-page crumb has no
   <a>, so it never gets bumped, leaving it 8px shorter and out of line with
   its siblings. Give every crumb item the same 24px row up front so the
   fix has nothing to do and all three stay level. */
.crumb a,
.crumb li[aria-current="page"]{
  display:inline-flex;align-items:center;min-height:24px;
}
.crumb a{color:var(--muted);text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .crumb a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
}
.crumb [aria-current="page"],
.crumb li[aria-current="page"]{color:var(--muted)}

/* ---- Program sheet ---- */
.card{
  position:relative;
  background:var(--paper);color:var(--ink);
  border-radius:2px;
  box-shadow:0 2px 0 rgba(0,0,0,.28), 0 28px 56px -20px rgba(0,0,0,.55);
  padding:clamp(28px,4.5vw,56px);
}
/* drafting margin — the light inner frame technical sheets carry */
.card::after{
  content:"";position:absolute;inset:12px;pointer-events:none;
  border:1px solid var(--ink-line);
}
.sheet-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(16px,3vw,40px);
}
.sheet-head>div{min-width:0}
.folio{
  flex:0 0 auto;text-align:right;
  font-family:var(--utility);font-weight:600;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
}
.folio .fol-n{
  display:block;margin-top:6px;
  font-family:var(--display);font-style:italic;font-weight:700;
  font-size:21px;letter-spacing:.04em;color:var(--ink);
}
.folio .fol-n em{font-style:inherit;color:var(--red)}
.stage{
  font-family:var(--display);font-style:italic;font-weight:700;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red);
}
h1{
  font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(32px,5vw,54px);line-height:.98;letter-spacing:-.015em;
  margin-top:8px;
}
.teaser{
  font-weight:600;font-size:clamp(18px,2.5vw,24px);line-height:1.3;
  margin-top:clamp(16px,2.5vw,26px);max-width:27em;
}

/* ---- Grade ruler — where the program sits on the 5–12 scale ---- */
.ruler{
  position:relative;display:flex;
  max-width:600px;margin-top:clamp(24px,3.5vw,34px);
  padding-bottom:15px;
}
.ruler::before{ /* baseline */
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ink-line);
}
.r-g{
  position:relative;flex:1;text-align:center;padding-bottom:12px;
  font-family:var(--utility);font-weight:600;font-size:12px;
  font-feature-settings:"tnum";
  color:rgba(38,42,77,.66); /* 4.7:1 on white — AA for the inactive grade labels */
}
.r-g::after{ /* tick */
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-6px;width:1.5px;height:6px;background:rgba(38,42,77,.3);
}
.r-g.on{color:var(--red);font-weight:600}
.r-band{ /* the program's band — left/width set inline per page */
  position:absolute;bottom:-3px;height:8px;background:var(--red);
}
.r-cap{
  font-family:var(--utility);font-weight:600;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:14px;
}
@media (prefers-reduced-motion:no-preference){
  .r-band{transform-origin:left;animation:yg-band .8s cubic-bezier(.22,.61,.21,1) .35s both}
  @keyframes yg-band{from{transform:scaleX(0)}}
}

/* ---- Sheet body: prose + focus left, title block right ---- */
.sheet-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);
  gap:clamp(28px,4.5vw,56px);
  margin-top:clamp(26px,4vw,40px);
  border-top:1px solid var(--ink-line);
  padding-top:clamp(24px,3.5vw,36px);
}
.intro{font-size:16.5px;line-height:1.65;max-width:58ch}
.intro+.intro{margin-top:14px}
.focus-h{
  font-family:var(--utility);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
  margin-top:clamp(22px,3vw,30px);
}
.focus{list-style:none;margin-top:14px}
.focus li{
  font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.35;
  padding:6px 0 6px 20px;position:relative;
}
.focus li::before{
  content:"";position:absolute;left:0;top:14px;width:7px;height:7px;
  background:var(--red);
}

/* title block — course particulars, set like the spec box on a drawing */
.tblock{border:1px solid rgba(38,42,77,.42);align-self:start}
.tblock h2{
  font-family:var(--utility);font-weight:600;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  background:var(--panel);padding:10px 14px;
  border-bottom:1px solid rgba(38,42,77,.42);
}
.tblock dl{display:block}
.tblock dl>div{
  padding:11px 14px 12px;
  border-bottom:1px solid var(--ink-line);
}
.tblock dl>div:last-child{border-bottom:0}
.tblock dt{
  font-family:var(--utility);font-weight:600;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--steel);
}
.tblock dd{font-size:14.5px;line-height:1.5;margin-top:4px}
.tblock dd ul{list-style:none}
.tblock dd li{padding:1px 0}

/* ---- Registrar's stamp + sheet note ---- */
.badge{
  display:inline-block;margin-top:clamp(22px,3vw,30px);
  font-family:var(--display);font-style:italic;font-weight:700;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red);
  border:2px solid var(--red);border-radius:2px;padding:8px 14px;
  transform:rotate(-1.2deg);
}
.note{
  font-size:16px;line-height:1.6;max-width:60ch;
  margin-top:clamp(20px,3vw,28px);
  border-top:2px solid var(--ink);padding-top:12px;
}
.note .note-tag{
  display:inline-block;margin-right:10px;
  font-family:var(--utility);font-weight:600;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red);
}

@media(max-width:719.98px){
  .sheet-body{grid-template-columns:1fr;gap:26px}
  .tblock{max-width:420px}
}
@media(max-width:560px){
  .sheet-head{flex-direction:column-reverse}
  .folio{text-align:left}
  .folio .fol-n{display:inline;margin:0 0 0 10px;font-size:16px}
  .card::after{inset:8px}
}

/* ---- Studio gallery ---- */
.gallery{margin-top:44px}
.eyebrow{
  font-family:var(--display);font-style:italic;font-weight:700;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;
}
.gallery-note{
  font-size:14.5px;line-height:1.55;color:var(--muted);
  max-width:56ch;margin:-8px 0 18px;
}
.gallery-note a{color:var(--paper);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .gallery-note a:hover{color:var(--red-bright)}
}
.shots{columns:3;column-gap:14px}
.shots figure{break-inside:avoid;margin:0 0 14px}
.shots img{
  display:block;width:100%;height:auto;border-radius:2px;
  border:1px solid var(--line);background:var(--navy);
}
/* lightbox trigger — programs.js wraps each gallery image in one of
   these buttons; with scripts off the images stay plain */
.og-shot{
  display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;border-radius:2px;
}
.og-shot img{transition:border-color .16s ease}
@media (hover:hover) and (pointer:fine){
  .og-shot:hover img{border-color:rgba(255,255,255,.5)}
}
@media (prefers-reduced-motion:reduce){
  .og-shot img{transition:none}
}
@media(max-width:860px){.shots{columns:2}}
@media(max-width:520px){.shots{columns:1}}

/* ---- Lightbox ---- */
html.og-modal-open{overflow:hidden}
.og-lightbox{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,5vw,64px);
  background:rgba(8,10,22,.93);
  animation:og-lb-fade .18s ease;
}
.og-lightbox[hidden]{display:none}
@keyframes og-lb-fade{from{opacity:0}}
.og-lb-img{
  max-width:100%;max-height:calc(100vh - 96px);
  width:auto;height:auto;border-radius:2px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:og-lb-zoom .18s ease;
}
@keyframes og-lb-zoom{from{transform:scale(.96)}}
.og-lb-close,.og-lb-prev,.og-lb-next{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(16,18,40,.75);border:1px solid rgba(255,255,255,.4);color:#fff;
  transition:background .16s ease,border-color .16s ease;
}
@media (hover:hover) and (pointer:fine){
  .og-lb-close:hover,.og-lb-prev:hover,.og-lb-next:hover{
    background:var(--red);border-color:var(--red);
  }
}
.og-lb-close{top:16px;right:16px}
.og-lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.og-lb-next{right:12px;top:50%;transform:translateY(-50%)}
.og-lb-close svg,.og-lb-prev svg,.og-lb-next svg{width:20px;height:20px;display:block}
@media (prefers-reduced-motion:reduce){
  .og-lightbox,.og-lb-img{animation:none}
  .r-band,.pw-bar{animation:none}
}

/* ---- Next steps ---- */
/* .btn itself is defined once in /main.css — this sheet only lays the
   buttons out. */
.actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}

/* ---- Pathway cards (other programs) ---- */
.more{margin-top:48px}
.cards{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pcard{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:2px;padding:12px;
  transition:border-color .16s ease, transform .16s ease, background .16s ease;
}
@media (hover:hover) and (pointer:fine){
  .pcard:hover{border-color:rgba(255,255,255,.42);transform:translateY(-2px);background:rgba(255,255,255,.07)}
}
@media (prefers-reduced-motion:reduce){
  .pcard{transition:none}
  .pcard:hover{transform:none}
}
.pcard-photo{flex:0 0 auto;width:78px;height:66px;border-radius:2px;overflow:hidden;background:var(--navy)}
.pcard-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pcard-body{display:flex;flex-direction:column;min-width:0}
.pcard-name{font-family:var(--display);font-style:italic;font-weight:700;font-size:17px;color:var(--paper);line-height:1.1}
.pcard-stage{font-family:var(--display);font-style:italic;font-weight:700;font-size:12px;color:var(--red-bright);letter-spacing:.04em;margin-top:2px}
.pcard-grades{font-family:var(--utility);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.3;margin-top:6px}

/* ---- Programs hub ---- */
.hub-head{margin:10px 4px clamp(26px,4vw,40px)}
.hub-head .stage{color:var(--red-bright)} /* the accent red reads 5.2:1 here on the dark ground */
.hub-head .lede{
  font-size:clamp(16.5px,2vw,19px);line-height:1.6;color:var(--muted);
  max-width:56ch;margin-top:16px;
}

/* pathway diagram — the three grade bands on one shared 5–12 scale */
.pathway{
  margin:0 4px clamp(30px,4.5vw,44px);
  max-width:760px;
}
/* column-gap is 0 on purpose and declared so it reads that way: the eight
   1fr tracks are one continuous grade 5-12 scale, and the bars have to butt
   their neighbours and line up under the scale labels. Only the rows are
   spaced. */
.pw-grid{
  display:grid;grid-template-columns:minmax(120px,170px) repeat(8,1fr);
  align-items:center;row-gap:13px;column-gap:0;
}
.pw-scale{display:contents}
.pw-scale span{
  font-family:var(--utility);font-weight:600;font-size:11.5px;
  font-feature-settings:"tnum";
  text-align:center;color:var(--faint);padding-bottom:6px;
}
.pw-scale .pw-corner{
  grid-column:1;text-align:left;
  letter-spacing:.18em;text-transform:uppercase;font-size:10px;color:var(--faint);
}
.pw-name{
  grid-column:1;padding-right:16px;
  font-family:var(--display);font-style:italic;font-weight:700;font-size:14.5px;
  color:var(--paper);text-decoration:none;line-height:1.15;
  display:inline-flex;align-items:center;min-height:24px;
}
@media (hover:hover) and (pointer:fine){
  a.pw-name:hover{color:var(--red-bright)}
}
.pw-bar{
  height:13px;background:var(--red);border-radius:1px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
}
@media (prefers-reduced-motion:no-preference){
  .pw-bar{transform-origin:left;animation:yg-band .7s cubic-bezier(.22,.61,.21,1) both}
  .pw-bar.pw-b2{animation-delay:.12s}
  .pw-bar.pw-b3{animation-delay:.24s}
}
.pw-cap{
  margin-top:14px;
  font-family:var(--utility);font-weight:600;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
@media(max-width:560px){
  .pw-grid{grid-template-columns:minmax(88px,110px) repeat(8,1fr)}
  .pw-name{font-size:12.5px;padding-right:10px}
}

.tiers{list-style:none;display:flex;flex-direction:column;gap:clamp(18px,3vw,28px)}
.tier{
  position:relative;
  display:grid;grid-template-columns:minmax(240px,400px) 1fr;
  background:var(--paper);color:var(--ink);
  border-radius:2px;overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.28), 0 28px 56px -20px rgba(0,0,0,.55);
}
.tier-media{display:block;position:relative;min-height:230px;background:var(--navy)}
.tier-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease,filter .3s ease}
/* the tier image is a link to the program page and gave no feedback at all
   (issue #89). .tier is overflow:hidden, so a small push clips cleanly. */
@media (hover:hover) and (pointer:fine){
  .tier-media:hover img{transform:scale(1.03);filter:brightness(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .tier-media img{transition:none}
  .tier-media:hover img{transform:none}
}
.tier-body{position:relative;padding:clamp(22px,3.5vw,40px)}
.tier-folio{
  position:absolute;top:clamp(22px,3.5vw,40px);right:clamp(22px,3.5vw,40px);
  font-family:var(--utility);font-weight:600;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
}
.tier h2{
  font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(24px,3.2vw,34px);line-height:1.05;letter-spacing:-.01em;
  margin-top:6px;
}
.tier h2 a{text-decoration:none;transition:color .16s ease}
@media (hover:hover) and (pointer:fine){
  .tier h2 a:hover{color:var(--red)}
}
.grades{
  display:inline-block;margin-top:10px;
  font-family:var(--utility);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}
.tier-teaser{
  font-weight:600;font-size:clamp(16.5px,1.9vw,19px);line-height:1.4;
  margin-top:14px;max-width:34em;
}
.tier-meta{
  font-family:var(--utility);font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--steel);margin-top:12px;
}
.tier-go{margin-top:20px}
.tier-go .btn{padding:12px 24px;min-height:44px;font-size:15px}
@media(max-width:719.98px){
  .tier{grid-template-columns:1fr}
  .tier-media{min-height:0;aspect-ratio:16/9}
}