/* Hallmark · v2.0.0 · theme: custom · shape: router · hero: short headline over four route links with photos · nav: wordmark, one Workshops link, all sections behind a button on every width · footer: dark mast with sections · signature: the four doors */
/* Hallmark · pre-emit critique: P5 H4 E4 S4 R4 V5 · weakest: H, four equal doors compete; the learner door comes first and the learner route holds the only primary form */

.bar { background: var(--c-blue-deep); position: relative; z-index: 5; }
.bar .wordmark { color: var(--c-on-blue); }
.bar__inner { display: flex; align-items: center; gap: var(--s-3); min-height: 4.25rem; }
.bar__inner .wordmark { margin-right: auto; }
.bar__cta { color: var(--c-on-blue); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); }
.bar__cta:hover, .bar__cta[aria-current="page"] { color: var(--c-on-blue); text-decoration: underline; }
.bar :focus-visible { outline-color: var(--c-focus-on-dark); }
.bar .menu-toggle { background: transparent; color: var(--c-on-blue); border-color: var(--c-on-blue); }
.js .bar .menu-toggle { display: inline-flex; align-items: center; }
.bar__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-1); }
.bar__nav li { margin: 0; }
.bar__nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); color: var(--c-on-blue); font-weight: 700; text-decoration: none; }
.bar__nav a[aria-current="page"] { text-decoration: underline; }
.js .bar__nav { display: none; position: absolute; right: 0; top: 100%; width: min(100%, 22rem); background: var(--c-blue-deep); padding: var(--s-2) var(--s-4) var(--s-4); box-shadow: 0 16px 32px var(--c-shadow); }
.js .bar__nav.is-open { display: block; }
.js .bar__nav ul { flex-direction: column; }
.js .bar__nav a { width: 100%; border-bottom: 1px solid var(--c-blue); }
.bar__nav { flex-basis: 100%; }
.js .bar__nav { flex-basis: auto; }

.doors-hero { padding-block: var(--s-6) var(--s-7); background: var(--c-blue-soft); }
.doors-hero h1 { max-width: 18ch; font-size: var(--t-3xl); }
.doors { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.door { margin: 0; max-width: none; }
.door__link { display: grid; height: 100%; background: var(--c-paper); border: 2px solid var(--c-blue-line); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: var(--c-ink); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.door__link:hover { border-color: var(--c-blue); transform: translateY(-2px); color: var(--c-ink); }
.door--learn .door__link { border-color: var(--c-blue); }
.door__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.door__text { display: grid; gap: var(--s-2); padding: var(--s-4); align-content: start; }
.door__title { font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg); line-height: 1.15; color: var(--c-blue-ink); }
.door__desc { font-size: var(--t-sm); color: var(--c-muted); }

.route { padding-block: var(--s-8); scroll-margin-top: var(--s-4); }
.route--alt { background: var(--c-paper-2); }
.route__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.route h2 { max-width: 20ch; }
.route__photo { margin: var(--s-4) 0; max-width: 30rem; }
.route__photo img { border-radius: var(--r-sm); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.route__photo--tall img { aspect-ratio: 4 / 5; }
.route__action { display: grid; gap: var(--s-4); padding: var(--s-5); border: 2px solid var(--c-blue); border-radius: var(--r-md); background: var(--c-paper); }
.plain-list { padding-left: 1.1rem; }
.about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-7); }

.ws-top { background: var(--c-blue-soft); }
.audience-switch { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.audience-switch li { margin: 0; }
.audience-switch a { display: inline-flex; min-height: var(--tap); align-items: center; padding: 0 var(--s-4); border: 2px solid var(--c-blue); border-radius: var(--r-pill); background: var(--c-paper); font-weight: 700; text-decoration: none; }
.ws-status { padding: var(--s-5); background: var(--c-paper); border-radius: var(--r-md); border: 1px solid var(--c-blue-line); }
.ws-status p:last-child { margin: var(--s-2) 0 0; }
.ws-skills { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.ws-skill { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--s-4); align-items: start; margin: 0; max-width: none; }
.ws-skill__img, .ws-skill .skill-noimage { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-sm); }
.ws-skill .skill-noimage { padding: var(--s-3); }
.ws-skill .skill-noimage strong { font-size: var(--t-base); }
.ws-skill h3 { font-size: var(--t-lg); margin-bottom: var(--s-1); }
.ws-skill p { margin: 0; font-size: var(--t-sm); }
.narrow { max-width: 46rem; }
.roles { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.roles li { margin: 0; border-top: 1px solid var(--c-rule); padding-top: var(--s-3); }
.roles h3 { font-size: var(--t-lg); margin-bottom: var(--s-1); }
.roles p { margin: 0; }

@media (max-width: 64rem) {
  .doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 52rem) {
  .route__grid, .about { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .route__action { padding: var(--s-4); }
}
@media (max-width: 40rem) {
  .doors-hero { padding-top: var(--s-5); }
  .doors { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .door__link { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
  .door__img { aspect-ratio: auto; height: 100%; min-height: 6.5rem; }
  .door__text { padding: var(--s-3); gap: var(--s-1); }
  .door__title { font-size: var(--t-base); }
  .bar__cta { display: none; }
}