/* Programs: mustard line. Each program is a bill pasted on the wall with its departure board beside it. */

.programs { display: grid; gap: clamp(64px, 8vw, 128px); margin-top: clamp(36px, 4vw, 56px); }
.program { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px clamp(40px, 7vw, 120px); align-items: center; }
.program--flip .program__bill { order: 2; }
.program__bill { transform: rotate(var(--tilt)); max-width: 560px; }
.program--flip .program__bill { justify-self: end; }
.program__bill .bill::after { content: ""; position: absolute; left: 50%; top: -34px; width: 72px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: rgb(230 220 196 / .85); box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.program__kind { display: flex; justify-content: space-between; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--ink-soft); font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mid); }
.program__title { margin: 0 0 16px; font: 800 clamp(1.488rem, 2.48vw, 2.418rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; text-wrap: balance; color: var(--p); }
.program--summit .program__title { color: var(--ink-soft); }
.program__body { margin: 0; font: 400 1rem/1.6 var(--f-body); color: var(--ink-mid); }
.program__foot { margin: 22px 0 0; font: 500 12.8px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: #3a3530; }
.program--summit .bill::before { /* the headliner gets the gold stamp */
  content: "Flagship"; position: absolute; right: -6px; top: -14px; padding: 8px 12px; transform: rotate(8deg); background: var(--gold); color: #000; font: 500 12.8px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 4px 10px rgb(0 0 0 / .3); }

/* the departure board: who, how often, what it costs */
.program__info { display: grid; gap: 28px; justify-items: start; }
.board { margin: 0; display: grid; width: 100%; max-width: 440px; border: 2px solid var(--cream); }
.board > div { display: grid; grid-template-columns: 7.5rem 1fr; align-items: stretch; border-top: 2px solid var(--cream); }
.board > div:first-child { border-top: 0; }
.board dt { padding: 12px 14px; background: var(--p); color: var(--on, #000); font: 500 12px/1.3 var(--f-label); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; }
.board dd { margin: 0; padding: 12px 16px; font: 800 clamp(.868rem, 1.24vw, 1.178rem)/1.1 var(--f-label); letter-spacing: .01em; text-transform: uppercase; color: var(--cream); }
.program__info .link-arrow { color: var(--p-ink); }
.program__info .link-arrow:hover { color: var(--cream); }
@media (max-width: 860px) {
  .program { grid-template-columns: minmax(0, 1fr); }
  .program--flip .program__bill { order: 0; justify-self: start; }
}

/* events */
.events__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.event { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 16px clamp(20px, 3vw, 48px); align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.event__date { margin: 0; }
.event__date time { display: grid; justify-items: center; padding: 10px 0 8px; border: 2px solid var(--cream); }
.event__mon, .event__dow { font: 500 13px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-soft); }
.event__mon { color: #000; background: var(--line); align-self: stretch; text-align: center; margin: -10px 0 6px; padding: 6px 0; }
.event__day { font: 800 1.736rem/1 var(--f-label); color: var(--cream); }
.event__title { font: 800 clamp(.93rem, 1.488vw, 1.364rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; color: var(--cream); }
.event__where { margin: 6px 0 0; font: 400 .95rem/1.5 var(--f-body); color: var(--cream-soft); }
.event__pill { display: inline-block; padding: 9px 18px; border: 1px solid rgb(241 233 216 / .4); font: 500 12.8px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
@media (max-width: 640px) { .event { grid-template-columns: 5rem minmax(0, 1fr); } .event__act { grid-column: 2; } }

.events__empty { max-width: 640px; transform: rotate(-.8deg); }
.events__empty-title { margin: 0 0 12px; font: 800 clamp(1.24rem, 2.108vw, 1.86rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; color: var(--ink-soft); }
.events__empty-body { margin: 0 0 24px; font: 400 1rem/1.6 var(--f-body); color: var(--ink-mid); max-width: 48ch; }

/* schools & partners: two doors, each with its own paint */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 3vw, 44px); }
.door { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: 18px; justify-items: start; padding: clamp(32px, 4vw, 56px); background: var(--black-2); border-top: 10px solid var(--d); }
.door::before { content: ""; position: absolute; right: -25%; bottom: -55%; width: 80%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, var(--d), transparent); opacity: .3; }
.door__title { font: 800 clamp(1.24rem, 2.108vw, 1.922rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; color: var(--cream); text-wrap: balance; }
.door .btn { margin-top: 8px; }
@media (max-width: 760px) { .doors { grid-template-columns: minmax(0, 1fr); } }

/* newsletter */
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.news .stop { margin-bottom: 18px; }
.news__tag { display: inline-block; }
@media (max-width: 860px) { .news { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .board > div { grid-template-columns: 5.2rem minmax(0, 1fr); } .board dd { font-size: .775rem; } }

/* each door stands on a photograph */
.door__photo { position: absolute; inset: 0; z-index: -2; }
.door__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .3; }
.door__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 18 15 / .92) 30%, rgb(20 18 15 / .55)); }
.door__photo .halftone { z-index: 1; opacity: .3; }

/* storytime: a photo from the series itself */
.program__photo { position: relative; margin: 0; width: min(320px, 100%); aspect-ratio: 1; overflow: hidden; transform: rotate(calc(var(--tilt, 0deg) * -1)); box-shadow: 0 16px 28px rgb(0 0 0 / .45); }
.program__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(1) brightness(1.12); }
.program__photo::after { content: ""; position: absolute; inset: 0; background: var(--p); mix-blend-mode: color; opacity: .45; pointer-events: none; }
.program__photo .halftone { opacity: .3; z-index: 1; }