/* A reading page: numbered problems, quiet rules, and expandable prose. */
/* The column, top edge, title and lede are the mission page's own
   (main.mission, .mission-text in site.css), without its wing scales. Only
   the list below is this page's. */
.problems-heading{margin-bottom:clamp(44px,5vw,76px)}
.problem-list{list-style:none;margin:0;padding:0}
.problem-list>li{margin:0;padding:0;border-bottom:1px solid var(--line)}
.problem-list>li:first-child{border-top:1px solid var(--line)}
.problem-list details{scroll-margin-top:32px}
.problem-list summary{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 20px;
  align-items:start;
  column-gap:20px;
  padding:24px 0;
  cursor:pointer;
  list-style:none;
}
.problem-list summary::-webkit-details-marker{display:none}
.problem-list summary::marker{content:""}
.problem-list summary:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.problem-list summary h2{
  margin:0;
  font:300 clamp(23px,2.4vw,29px)/1.22 var(--sans);
  letter-spacing:-.015em;
  transition:color .16s ease;
}
.problem-list summary:hover h2{color:var(--accent)}
.problem-number{padding-top:6px;color:var(--mut);font:12px/1.5 var(--mono)}
.problem-toggle{position:relative;width:20px;height:20px;margin-top:6px;color:var(--mut)}
.problem-toggle::before,.problem-toggle::after{content:"";position:absolute;inset:9px 4px auto;height:1px;background:currentColor}
.problem-toggle::after{transform:rotate(90deg);transition:transform .18s ease}
.problem-list details[open] .problem-toggle::after{transform:rotate(0)}
.problem-list details[open] .problem-number{color:var(--accent)}
.problem-content{padding:0 0 30px 60px;color:#bdbdbd;font-size:inherit;line-height:inherit}
.problem-content p{margin:0 0 20px}
.problem-content p:last-child{margin-bottom:0}
.problem-content .problem-achievement{color:var(--ink)}
.problem-content a{text-underline-offset:.2em;text-decoration-thickness:1px}
.problem-content a:hover{color:var(--ink)}

/* The two program tiles after the list: site.css's .tile at its phone shape,
   two across the column, one above the other on a phone, without the zoom. main.mission's link
   rule (inherit colour, underline, fade on hover) would otherwise reach them. */
.challenge-programs{margin-top:clamp(56px,6vw,96px)}
.challenge-programs .tiles{flex-direction:row;gap:clamp(14px,1.6vw,24px);padding:0}
.challenge-programs .tile-slot{flex:1 1 0;min-width:0}
.challenge-programs .tile{aspect-ratio:4 / 5;line-height:1.5;text-decoration:none}
/* No zoom-in here: the homepage's scroll-driven rise felt forced at this size. */
.challenge-programs .tile{animation:none;transform:none}
.challenge-programs .tile:hover{opacity:1}
.challenge-programs .tile--dark{color:var(--ink)}
.challenge-programs .tile--light{color:#222222}
.challenge-programs .tile-text{max-width:100%}
@media(max-width:560px){
  .challenge-programs .tiles{flex-direction:column;gap:clamp(24px,6vw,40px)}
}

/* The homepage's way in, from J's "homepage CTA" comp (2660px canvas, a 2x
   capture of a 1220px window): a full-bleed band 27.25vw tall after the
   partners, the scale photograph filling it. The comp shows the photo at ~30%
   over the charcoal; that is baked into problems-cta-*.jpg, so nothing here
   dims it. Headline Haas 55 at ~31.5px, link Plex Mono caps at the footer's
   size, 25px apart, both white and centred. */
.home-problems{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;place-items:center;
  min-height:clamp(300px,27.25vw,640px);
  padding:clamp(56px,5vw,96px) var(--gutter-band);
  background:var(--band);color:#ffffff;text-align:center;
}
.home-problems-bg{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  object-fit:cover;object-position:50% 59%; /* the comp's slice of the frame */
}
.home-problems h2{
  margin:0;
  font-size:clamp(26px,2.52vw,43px);font-weight:400;
  line-height:1.2;letter-spacing:0;text-wrap:balance;
}
.home-problems-link{
  margin:clamp(16px,2.05vw,32px) 0 0;
  font-family:var(--mono);font-size:var(--fs-body);font-weight:400;
  letter-spacing:0;line-height:1.5;text-transform:uppercase;
}
.home-problems-link a{color:inherit;text-decoration:none;transition:opacity .25s ease}
/* Stretch the link over the whole band. */
.home-problems-link a::after{content:"";position:absolute;inset:0}
.home-problems-link a:hover{opacity:.7}
.home-problems:has(a:focus-visible){outline:2px solid #ffffff;outline-offset:-6px}
/* Drawn, not typed: the Latin-1 Plex Mono subset has no U+2197 (as on /crops). */
.home-problems .link-arrow{
  display:inline-block;width:.7em;height:.7em;margin-left:.45em;vertical-align:baseline;
  fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:square;
}
@media(max-width:600px){
  .problem-list summary{grid-template-columns:24px minmax(0,1fr) 16px;column-gap:12px;padding-block:22px}
  .problem-number{padding-top:4px}
  .problem-toggle{width:16px;height:16px;margin-top:5px}
  .problem-toggle::before,.problem-toggle::after{inset:7px 2px auto}
  .problem-content{padding:0 0 28px 36px}
}
@media print{
  .page-problems .masthead,.page-problems>footer{display:none}
  .page-problems{background:white;color:black}
  main.mission.problems-page{padding:0;max-width:none}
  .problem-content,.problem-content .problem-achievement,.problems-intro{color:black}
  .problem-list details::details-content{content-visibility:visible}
  .problem-content{display:block!important}
}