/* ============================================================
   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,.62);
  --ink-line:rgba(38,42,77,.16);
  --red:#c8283f;        /* site accent — 5.5:1 on white */
  --red-deep:#a82135;   /* hover state of the accent */
  --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}
.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,.42);
}
.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}
.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:hover img{border-color:rgba(255,255,255,.5)}
@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;
}
.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 ---- */
.actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.btn{
  font-family:var(--display);font-weight:600;font-size:15.5px;text-decoration:none;
  padding:14px 28px;border-radius:999px;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
  min-height:48px;display:inline-flex;align-items:center;
}
.btn.primary{background:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn.ghost{border:1.5px solid rgba(255,255,255,.28);color:var(--paper)}
.btn.ghost:hover{border-color:rgba(255,255,255,.6);transform:translateY(-2px)}

/* ---- 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;
}
.pcard:hover{border-color:rgba(255,255,255,.42);transform:translateY(-2px);background:rgba(255,255,255,.07)}
.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;
}
.pw-grid{
  display:grid;grid-template-columns:minmax(120px,170px) repeat(8,1fr);
  align-items:center;row-gap:13px;
}
.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;
}
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}
.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}
.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}
}