/* youth.css: the Youth Leadership page (L2W, Living To Win, The School of Life). Loaded after v2.css.
   Look (his picks, Oct 2026): the notebook page with the big L2W logo lifts away to the class photo; below it,
   notebook pages taped on her painted dark ground, taped polaroids of the real classes, a sticky-note quote.
   Motion lives in js/youth.js; without it the page is plain and complete. */

body.youth { --paper: #F6EFE2; --ink: #1d1414; --margin-red: rgba(196, 40, 52, .45); --rule-blue: rgba(29, 75, 158, .13); --pen-blue: #1D4B9E; --pen-red: #C42834; }

/* ---------- opening ---------- */
.yo-open { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
.yo-photo { position: absolute; inset: 0; }
.yo-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 32%; }
.yo-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(43, 5, 8, .6), transparent 22%, transparent 38%, rgba(43, 5, 8, .88) 78%, var(--maroon-deep)); }
.yo-photo .in { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 5vw, 64px); z-index: 2; display: grid; gap: 12px; justify-items: start; max-width: 720px; }
.yo-photo h1 { font-size: clamp(56px, 9vw, 132px); line-height: .9; margin: 0; }
.yo-photo .hand { margin: -2px 0 0 4px; }
.yo-photo .lede { margin: 2px 0 6px; }
.yo-photo .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.badge-spot { width: clamp(56px, 6vw, 84px); background: #fff; padding: 5px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); line-height: 0; }
.badge-spot img { width: 100%; height: auto; display: block; }

.yo-sheet, .yo-biglogo { display: none; }
html.yo-opening .yo-sheet { display: block; }
html.yo-opening .yo-biglogo { display: block; }
/* the logo and words wait out of sight until their build starts, so they never show, vanish and come back (his note, 15 Oct) */
html.yo-hold .yo-biglogo, html.yo-hold .yo-sheet .words { visibility: hidden; }
.yo-sheet { position: absolute; inset: 0; z-index: 4; color: var(--ink); background-color: var(--paper);
  background-image: linear-gradient(90deg, transparent 30px, var(--margin-red) 30px, var(--margin-red) 32px, transparent 32px),
                    repeating-linear-gradient(transparent 0 33px, var(--rule-blue) 33px 34px);
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .9); }
.yo-sheet .pad { position: absolute; inset: 96px 20px 30px 50px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.yo-sheet .logo-hole { width: min(56vw, 240px, calc((100svh - 380px) * .58)); aspect-ratio: 958 / 1642; }
.yo-sheet .eb { color: #7a4a4a; display: block; }
.yo-sheet .t { display: block; font: 900 clamp(52px, 8vw, 150px)/.9 var(--serif); margin: 8px 0 4px; }
.yo-sheet .hand { color: var(--pen-red); font-size: clamp(30px, 3vw, 46px); }
.yo-biglogo { position: absolute; z-index: 5; left: 0; top: 0; transform-origin: 0 0; }
.yo-biglogo svg, .yo-biglogo img { display: block; width: 100%; height: auto; }
.yo-biglogo svg { overflow: visible; } /* the runner leaps in from beyond the logo's edge */
.yo-biglogo .plate { position: absolute; inset: -6px; background: #fff; opacity: 0; }
html.yo-opening .badge-spot img { opacity: 0; }
html.yo-paper .nav { color: var(--ink); }
html.yo-paper .nav .mark i { color: #7a4a4a; }
/* failsafe: if the page script never runs, the notebook page fades away by itself after 6 s */
html.yo-opening:not(.yo-run) .yo-sheet, html.yo-opening:not(.yo-run) .yo-biglogo { animation: yo-fail .6s 6s forwards; }
html.yo-opening:not(.yo-run) .badge-spot img { animation: yo-show .3s 6.4s forwards; }
@keyframes yo-fail { to { opacity: 0; visibility: hidden; } }
@keyframes yo-show { to { opacity: 1; } }

@media (min-width: 900px) {
  .yo-sheet .pad { inset: 110px var(--gutter) 60px 110px; flex-direction: row; align-items: center; justify-content: flex-start; gap: clamp(40px, 6vw, 110px); }
  .yo-sheet .logo-hole { width: min(24vw, 330px, calc((100svh - 200px) * .58)); }
}

/* ---------- the desk: her painted ground with notebook pages taped on it ---------- */
.desk { position: relative; padding: clamp(48px, 7vw, 110px) 14px clamp(60px, 8vw, 120px); overflow-x: clip; display: grid; gap: clamp(46px, 7vw, 110px); }
.yo-row { display: grid; gap: 30px; max-width: 1180px; width: 100%; margin: 0 auto; }
@media (min-width: 900px) {
  .desk { padding-left: var(--gutter); padding-right: var(--gutter); }
  .yo-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
  .yo-row.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .yo-row.flip .page { order: 2; }
  .yo-row.wide { grid-template-columns: minmax(0, 1fr); max-width: 1040px; }
}

.page { position: relative; padding: 40px 20px 36px 48px; color: var(--ink); background-color: var(--paper);
  background-image: linear-gradient(90deg, transparent 30px, var(--margin-red) 30px, var(--margin-red) 32px, transparent 32px),
                    repeating-linear-gradient(transparent 0 33px, var(--rule-blue) 33px 34px);
  background-position: 0 6px; box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .9), 0 2px 0 rgba(0, 0, 0, .15); }
.page.tilt-l { rotate: -.6deg; } .page.tilt-r { rotate: .6deg; }
@media (min-width: 900px) { .page { padding: 56px clamp(30px, 4vw, 64px) 50px clamp(70px, 7vw, 96px); background-image: linear-gradient(90deg, transparent 54px, var(--margin-red) 54px, var(--margin-red) 56px, transparent 56px), repeating-linear-gradient(transparent 0 33px, var(--rule-blue) 33px 34px); } .page.tilt-l { rotate: -1deg; } .page.tilt-r { rotate: 1deg; } }
.tape { position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; translate: -50% 0; rotate: -3deg; background: rgba(240, 179, 58, .62); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.page h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1; margin: 0 0 18px; }
.page h2 i { position: relative; white-space: nowrap; }
.scribble-line { position: absolute; left: -2%; width: 104%; bottom: -.22em; height: .32em; overflow: visible; pointer-events: none; }
.scribble-line path { fill: none; stroke: var(--pen-red); stroke-width: 3; stroke-linecap: round; }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 38px; font: 400 clamp(17px, 1.6vw, 21px)/34px var(--serif); }
.ticks li::before { content: "\2713"; position: absolute; left: 2px; top: 0; font: 600 28px/34px var(--hand); color: var(--pen-red); }
html.yo-js .ticks li::before { content: none; }
.ticks .tk { position: absolute; left: 0; top: 6px; width: 26px; height: 22px; overflow: visible; }
.ticks .tk path { fill: none; stroke: var(--pen-red); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.note { font: 600 clamp(25px, 2.4vw, 32px)/1.2 var(--hand); color: var(--pen-blue); margin: 24px 0 0; rotate: -1deg; }
.lead { font: 400 clamp(18px, 1.7vw, 22px)/34px var(--serif); margin: 0 0 14px; }

/* polaroids */
.polaroid { position: relative; margin: 0; background: #fff; padding: 10px 10px 34px; box-shadow: 0 18px 32px -14px rgba(0, 0, 0, .85); }
.polaroid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid.tall img { aspect-ratio: 3 / 4; }
.polaroid::before { content: ""; position: absolute; z-index: 1; top: -12px; left: 50%; width: 86px; height: 26px; translate: -50% 0; rotate: -4deg; background: rgba(240, 179, 58, .6); }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 600 22px/1 var(--hand); color: var(--pen-blue); }
.polaroid.r { rotate: 2deg; } .polaroid.l { rotate: -2.2deg; }
.pins { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; padding: 0 6px; }
.pins .polaroid.tall { margin-top: 22px; }
@media (min-width: 900px) {
  .pins { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .pins .polaroid { width: 78%; }
  .pins .polaroid.r { justify-self: end; }
  .pins .polaroid.tall { width: 58%; margin-top: -40px; justify-self: start; }
  .yo-row.flip .pins .polaroid { width: 92%; justify-self: center; }
  .polaroid { transition: rotate .5s var(--ease), translate .5s var(--ease), box-shadow .5s var(--ease); }
  .polaroid:hover { rotate: 0deg; translate: 0 -8px; box-shadow: 0 30px 44px -16px rgba(0, 0, 0, .9); }
}

/* the photo wall */
.yo-wall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 16px; max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 6px; }
.yo-wall .polaroid:nth-child(3n+1) { rotate: -2.5deg; } .yo-wall .polaroid:nth-child(3n+2) { rotate: 1.8deg; translate: 0 14px; } .yo-wall .polaroid:nth-child(3n) { rotate: -1deg; }
@media (min-width: 900px) { .yo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 40px; padding: 0; } }

/* how it works: index cards */
.cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.cards li { position: relative; background: #fff; padding: 34px 14px 16px; font: 400 15px/1.4 var(--sans); color: #4a3a3a; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .45);
  background-image: linear-gradient(transparent 22px, rgba(196, 40, 52, .5) 22px, rgba(196, 40, 52, .5) 23px, transparent 23px), repeating-linear-gradient(transparent 0 23px, rgba(29, 75, 158, .14) 23px 24px); }
.cards li:nth-child(odd) { rotate: -1deg; } .cards li:nth-child(even) { rotate: 1.2deg; }
.cards b { display: block; font: 700 clamp(22px, 2vw, 27px)/1.05 var(--hand); color: var(--pen-blue); margin-bottom: 4px; }
.cards .num { position: absolute; top: 2px; right: 10px; font: 700 22px/1 var(--hand); color: var(--pen-red); width: 30px; height: 30px; display: grid; place-items: center; }
.cards .num svg { position: absolute; inset: -4px; width: 38px; height: 38px; overflow: visible; }
.cards .num svg path { fill: none; stroke: var(--pen-red); stroke-width: 2; stroke-linecap: round; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .cards li { padding: 40px 18px 22px; font-size: 16px; } }

/* what they learn: a marker over each topic */
.topics { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 18px; }
.topics li { font: 400 clamp(16px, 1.5vw, 19px)/1.35 var(--serif); padding: 5px 0; }
.topics span { background-image: linear-gradient(transparent 62%, rgba(240, 179, 58, .42) 62%, rgba(240, 179, 58, .42) 100%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.and-more { font: 600 26px/1.2 var(--hand); color: var(--pen-blue); margin: 14px 0 0; }
@media (min-width: 900px) { .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 30px; } }

/* the quote on a sticky note */
.yo-quote { display: grid; place-items: center; padding: 10px 0; }
.sticky { position: relative; margin: 0; max-width: 560px; width: calc(100% - 30px); padding: 46px 30px 34px; background: #F7D66B; color: var(--ink); rotate: 1.6deg;
  box-shadow: 0 30px 40px -24px rgba(0, 0, 0, .9); background-image: linear-gradient(170deg, rgba(255, 255, 255, .25), transparent 40%); }
.sticky::before { content: ""; position: absolute; top: -12px; left: 50%; width: 100px; height: 28px; translate: -50% 0; rotate: 3deg; background: rgba(255, 255, 255, .55); }
.sticky p { margin: 0; font: italic 400 clamp(24px, 2.6vw, 34px)/1.3 var(--serif); }
.sticky cite { display: block; margin-top: 16px; font: 600 30px/1 var(--hand); font-style: normal; color: var(--pen-red); }

/* be a part of it */
.yo-join { max-width: 1040px; width: 100%; margin: 0 auto; padding: 0 6px; }
.yo-join h2 { margin: 12px 0 26px; }
.roles { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.roles li { font: 500 16px/1 var(--sans); padding: 13px 18px; border-radius: 999px; border: 1.5px solid rgba(243, 231, 214, .7); }
.wa { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 26px; border-radius: 999px; background: var(--yellow); color: var(--maroon-deep); font: 600 17px/1 var(--sans); text-decoration: none; transition: translate .3s var(--ease), box-shadow .3s var(--ease); }
.wa svg { width: 22px; height: 22px; }
.wa::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); }
.wa.shine::after { animation: yo-shine 1.1s .2s ease-out; }
@keyframes yo-shine { to { left: 130%; } }
.wa:hover { translate: 0 -3px; box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .8); }

@media (prefers-reduced-motion: reduce) {
  .polaroid, .wa { transition: none; }
}

/* ---------- phones: the photos as one scrapbook board (his pick, 11 Oct 2026); a tapped photo pops up ---------- */
.ph-only { display: none; }
.polaroid[role="button"] { cursor: zoom-in; }
.polaroid[role="button"]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
@media (max-width: 699px) {
  #work .pins { display: none; }
  .yo-wall .ph-only { display: block; }
  .yo-wall { display: block; position: relative; height: 154vw; padding: 0; margin-top: -10px; }
  .yo-wall .polaroid { position: absolute; width: 54%; padding: 6px 6px 20px; translate: none; }
  .yo-wall .polaroid img, .yo-wall .polaroid.tall img { aspect-ratio: 4 / 3; }
  .yo-wall .polaroid::before { width: 64px; height: 20px; top: -9px; }
  .yo-wall .polaroid figcaption { font-size: 17px; bottom: 2px; }
  .yo-wall .polaroid:nth-child(1) { left: 1%;  top: 0;      rotate: -6deg; z-index: 2; }
  .yo-wall .polaroid:nth-child(2) { left: 45%; top: 5vw;    rotate: 5deg;  z-index: 3; }
  .yo-wall .polaroid:nth-child(3) { left: 20%; top: 36vw;   rotate: -2deg; z-index: 5; }
  .yo-wall .polaroid:nth-child(4) { left: 46%; top: 59vw;   rotate: 7deg;  z-index: 4; }
  .yo-wall .polaroid:nth-child(5) { left: 0;   top: 68vw;   rotate: -8deg; z-index: 3; }
  .yo-wall .polaroid:nth-child(6) { left: 27%; top: 94vw;   rotate: 3deg;  z-index: 6; }
  .yo-wall .polaroid:nth-child(7) { left: 46%; top: 108vw;  rotate: -4deg; z-index: 2; }
  .yo-wall .polaroid:nth-child(8) { left: 3%;  top: 113vw;  rotate: 6deg;  z-index: 1; }
}
.yo-hint { display: none; }
@media (max-width: 699px) { .yo-hint { display: block; text-align: center; margin: -18px 0 0; font: 600 22px/1 var(--hand); color: var(--yellow); } }

/* the pop-up */
.yo-lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 2, 4, .92); color: var(--cream); }
.yo-lb[open] { display: grid; place-items: center; }
.yo-lb::backdrop { background: transparent; }
.yo-lb figure { position: relative; margin: 0; background: #fff; padding: 10px 10px 38px; max-width: min(92vw, 1100px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); }
.yo-lb img { display: block; max-width: 100%; max-height: 74svh; width: auto; height: auto; }
.yo-lb figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 600 24px/1 var(--hand); color: var(--pen-blue); }
.yo-lb button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(243, 231, 214, .4); background: rgba(43, 5, 8, .6); color: var(--cream); font: 400 24px/1 var(--sans); cursor: pointer; }
.yo-lb .lb-x { top: 14px; right: 14px; font-size: 30px; }
.yo-lb .lb-prev { left: max(12px, calc(50% - 160px)); bottom: 18px; }
.yo-lb .lb-next { right: max(12px, calc(50% - 160px)); bottom: 18px; }
.yo-lb .lb-n { position: absolute; bottom: 34px; left: 50%; translate: -50% 0; font: 500 14px/1 var(--sans); letter-spacing: .14em; color: var(--cream-2); }
@media (min-width: 900px) { .yo-lb .lb-prev { left: 28px; bottom: auto; top: 50%; } .yo-lb .lb-next { right: 28px; bottom: auto; top: 50%; } }