/* The course stops', Field Guide pathways' and audiences' own pages (scripts/site_pages.py). Apteco's colours and
   type: a white Orbit record on the navy field, then plain sections on white and pale grey, with the screens from
   Orbit shown near the size they were captured at (Kyle, 2026-10-24: professional, not playful; the page grows with
   a large monitor; pictures sharp enough to read). Headings and the video stay near the home page's size, so a
   page opens calm rather than shouting (Kyle, 2026-10-24: "so big and in your face it feels like suffocating").
   Proportions (Kyle, 2026-10-24: "squishy, busy... there has to be ratios that the brain likes"):
   - type: each size is the one below times 1.25 (body, --m, --l, --xl), so there are four sizes and a small one;
   - space: every gap is one step (--u: 10px on a laptop, 8px on a phone) times 1, 2, 3, 5, 8 or 13, each about
     1.6 times the last, and a section's gap is always more than twice the biggest gap inside it, so the eye sees
     where one part ends ("even a little more space": the step went from 8px to 10px, the ratios stayed);
   - grid: a section's heading takes the left third and its content the right two thirds, or the content takes
     the left and an aside the right third, so every section starts its text on the same lines;
   - lines of text stop near 65 characters. */
:root{
  --navy:#232C61;--navy-2:#1A2150;--teal:#00A5AA;--teal-ink:#006E72;--teal-2:#005C60;--sky:#4FD1D5;--lav:#C8CCE6;
  --sun:#ECA935;
  --paper:#FFFFFF;--paper-2:#F3F2F8;--paper-3:#E8E6F2;
  --ink:#232C61;--ink-2:#3F4770;
  --sans:'Poppins',system-ui,sans-serif;--display:'Montserrat','Poppins',system-ui,sans-serif;
  --b:clamp(16.5px,.1vw + 16px,18px);--s:clamp(14px,calc(var(--b) * .8),15px);
  --m:calc(var(--b) * 1.25);--l:calc(var(--b) * 1.5625);--xl:calc(var(--b) * 2.4414);
  --u:clamp(8px,.2vw + 7.2px,10px);
  --g1:var(--u);--g2:calc(var(--u) * 2);--g3:calc(var(--u) * 3);--g4:calc(var(--u) * 5);--g5:calc(var(--u) * 8);
  --gap:clamp(72px,5.4vw + 52px,calc(var(--u) * 13));
  --measure:65ch;
  --edge:clamp(16px,3.4vw,72px);--max:1920px;--col:clamp(24px,3vw,64px);
  --vid:960px;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--navy);color:var(--ink);font-family:var(--sans);font-size:var(--b);line-height:1.65}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
a{color:var(--teal-ink);font-weight:600;text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--navy)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.02em;text-wrap:balance}
h2{font-size:var(--l);font-weight:700;line-height:1.15}
h3{font-size:var(--m);font-weight:700;line-height:1.25;letter-spacing:-.01em}
p,li,dd{color:var(--ink);text-wrap:pretty}
b,strong{font-weight:600}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--edge)}
.skip{position:absolute;left:-999px;top:8px;background:var(--sun);color:var(--navy);padding:8px 14px;z-index:99}
.skip:focus{left:8px}

/* the bar: wordmark, four links, one action */
.bar{background:var(--paper)}
.bar .wrap{display:flex;align-items:center;gap:16px;min-height:68px}
.bar .mark img{height:34px;width:auto}
.bar .product{font-family:var(--display);font-weight:700;font-size:var(--b);color:var(--ink);text-decoration:none;white-space:nowrap}
.bar .product span{color:var(--teal-ink)}
.bar .links{display:flex;gap:4px;margin-left:auto}
.bar .links a{font-size:var(--s);font-weight:500;color:var(--ink);text-decoration:none;padding:8px 12px;white-space:nowrap;transition:background-color .2s}
.bar .links a:hover{background:var(--paper-2)}
.bar .act{background:var(--teal-ink);color:#fff;text-decoration:none;font-size:var(--s);font-weight:600;padding:10px 16px;white-space:nowrap;transition:background-color .2s,transform .15s}
.bar .act:hover{background:var(--navy);color:#fff}
.bar .act.live{background:var(--navy)}
.bar .act.live:hover{background:var(--teal-ink)}
.bar .act:active{transform:translateY(1px)}
/* Tablets and phones (Kyle, 2026-10-24: navigability): the four links move to a row of their own instead of
   disappearing. */
/* Five links and both actions fit one row from about 1400px; below that the first action drops its tail */
@media(max-width:1400px){.bar .act:not(.live) span{display:none}}
@media(max-width:1180px){
  .bar .wrap{flex-wrap:wrap;row-gap:4px;padding-top:8px;padding-bottom:8px}
  .bar .act{margin-left:auto}.bar .act+.act{margin-left:0}.bar .act:not(.live) span{display:none}
  .bar .links{order:3;width:100%;margin-left:-12px;overflow-x:auto;scrollbar-width:none}
  .bar .links a{flex:none;white-space:nowrap}
  .bar .links::-webkit-scrollbar{display:none}
}
@media(max-width:560px){.bar .product{display:none}.bar .act span{display:none}.bar .links a{padding:8px}.bar .links{margin-left:-8px}.bar .wrap{gap:8px}.bar .act{padding:10px 12px}.lede{font-size:var(--b)}}

main.page{background:var(--paper)}

/* the first screen: the thing itself, a white record on the navy field */
.field{background:var(--navy)}
main > section.field{padding-top:clamp(28px,3.6vw,72px)}
.record{--pad:clamp(18px,3.2vw,56px);background:var(--paper);padding:var(--pad) var(--pad) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col)}
.record>*{grid-column:1/-1}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--s);color:var(--ink-2)}
.crumbs li+li::before{content:"\203A";margin-right:10px;color:var(--ink-2)}
.crumbs a{font-weight:500;color:var(--ink-2)}
.crumbs [aria-current]{color:var(--ink)}
.name{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--g1) var(--g3);margin-top:var(--g2)}
h1{font-weight:700;line-height:1.1;letter-spacing:-.025em;font-size:var(--xl)}
h1.h-m{font-size:min(var(--xl),4.6vw)}  /* one size for every title; only a long one steps down on a tablet */
.chip{font-size:var(--b);color:var(--ink-2)}
.chip b{font-family:var(--display);font-weight:800;color:var(--teal-ink)}
.chip span{color:var(--ink-2)}
.lede{font-size:var(--m);line-height:1.45;max-width:46ch;margin-top:var(--g3)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--g2) var(--g4);margin-top:var(--g3)}
@media(max-width:560px){.lede{font-size:var(--b)}}
@media(min-width:1100px){
  .record .lede{grid-column:1/9}
  .record .acts{grid-column:9/13;justify-content:flex-end;align-self:end;margin-top:0}
}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;background:var(--teal-ink);color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;font-size:var(--b);transition:background-color .2s,transform .15s}
.btn:hover{background:var(--navy);color:#fff}
.btn:active{transform:translateY(2px)}
.lnk{font-weight:600}
.lnk::after{content:" \2192";display:inline-block;transition:transform .2s}
.lnk:hover::after{transform:translateX(4px)}

/* the record's tabs, as Orbit sets them, and the picture each one shows */
.tabs{display:flex;margin-top:var(--g4);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 1 0;min-width:150px;padding:12px 16px 14px;text-decoration:none;color:var(--ink);background:var(--paper);position:relative;transition:background-color .2s}
.tab b{display:block;font-family:var(--display);font-weight:700;font-size:var(--b)}
.tab span{display:block;font-size:var(--s);font-weight:400;color:var(--ink-2);line-height:1.4;margin-top:2px}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--paper-3);transition:background-color .2s}
.tab:hover{background:var(--paper-2)}
.tab[aria-selected="true"]{background:var(--paper-2)}
.tab[aria-selected="true"]::after{background:var(--teal-ink)}
.slides{background:var(--paper-2);padding:clamp(16px,2.8vw,40px);margin:var(--g4) calc(-1*var(--pad)) 0}
.tabbed .slides{margin-top:0}
.slide+.slide{margin-top:var(--g4)}
.tabbed .slide+.slide{margin-top:0}
.slide[hidden]{display:none!important}
.snote{font-size:var(--s);color:var(--ink-2);padding:var(--g2) 0 var(--g3);max-width:var(--measure)}
@media(max-width:1000px){
  .tabs{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}
  .tab{min-width:0}
}
@media(max-width:700px){
  .tabs{grid-template-columns:1fr 1fr}
  .tab{padding:12px 14px}
  .tab span{display:none}
}

/* a screen from Orbit: never shown wider than it was captured, so its text stays sharp; a whole screen takes the
   whole row, a journey's close-ups sit two to a row */
.slide,.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,600px),1fr));gap:var(--g4) var(--col);align-items:start}
.slide .full,.figs .full{grid-column:1/-1}
.figs .shot:not(:first-child):last-child:nth-child(odd){grid-column:1/-1}  /* an odd close-up out, alone across its row */
.figs{margin-top:var(--g4)}
.fhead{margin-top:var(--g5)}
.fhead+.figs{margin-top:var(--g3)}
.shot{margin:0;min-width:0}
.shot a.im{display:block;cursor:zoom-in;background:var(--paper-2);padding:clamp(8px,1.2vw,24px);transition:background-color .2s}
.shot a.im:hover{background:var(--paper-3)}
.slide .shot a.im{background:none;padding:0}
.shot img{max-width:100%;margin:0 auto}  /* its width attribute holds its place before it loads */
.shot figcaption{font-size:var(--s);line-height:1.65;color:var(--ink-2);padding:var(--g2) 0 0;max-width:72ch}
.shot figcaption b{color:var(--ink);margin-right:4px}
.slide .shot figcaption{font-size:var(--b);color:var(--ink);padding:var(--g2) 0 var(--g1);max-width:var(--measure)}
.shot.tall a.im{max-height:min(80vh,820px);overflow:auto}
.shot.tall img{max-width:100%}  /* never stretched past its own pixels (Kyle, 2026-10-25): a journey shows at the size it was drawn, and scrolls */

/* who is in it: heading and note, then the facts in a row */
main > section{padding-top:var(--gap)}
.intro .ihead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g3) var(--col);align-items:start}
.intro h2{grid-column:1/5}
.intro .note{grid-column:5/13;max-width:var(--measure)}
.intro .note p+p{margin-top:var(--g2)}
.facts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g4) var(--col);margin-top:var(--g4)}
.facts>*{grid-column:span 2}
.facts>:first-child{grid-column:5/span 2}  /* the facts sit under the note, on the same line as the text above */
.facts .f{font-family:var(--display);font-weight:800;font-size:var(--l);line-height:1;color:var(--teal-ink);letter-spacing:-.02em}
.facts .e{font-size:var(--s);color:var(--ink-2);margin-top:var(--g1);max-width:24ch}
.big{font-size:var(--m);line-height:1.45}
@media(max-width:1100px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}.facts>*,.facts>:first-child{grid-column:auto}}
@media(max-width:860px){
  .intro .ihead{grid-template-columns:1fr}
  .intro h2,.intro .note{grid-column:1}
  .facts{grid-template-columns:1fr 1fr;gap:var(--g4) var(--g3)}
}

/* what happens: the journey's moments, read left to right, each under a bar in the timeline */
.moments .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:start}
.moments .wrap>*{grid-column:1/-1}
.moments .wrap>h2{grid-column:1/5}
.moments .wrap>h2+.mnote{grid-column:5/13;margin-top:0}
@media(max-width:860px){.moments .wrap>h2,.moments .wrap>h2+.mnote{grid-column:1/-1}.moments .wrap>h2+.mnote{margin-top:var(--g3)}}
.mnote{max-width:var(--measure);margin-top:var(--g3)}
.mnote p+p{margin-top:var(--g2)}
.row{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--g4) var(--col);margin-top:var(--g4)}
.row li{position:relative;padding-top:var(--g3)}
.row li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal-ink)}
.row .when{font-family:var(--display);font-weight:700;font-size:var(--m);line-height:1.25}
.row .ch{margin:var(--g1) 0 var(--g2);color:var(--teal-ink);font-size:var(--s);font-weight:600;line-height:1.2}
.rules{margin:var(--g4) 0 0 20px;max-width:var(--measure)}
.rules li+li{margin-top:var(--g1)}
.mvid{max-width:var(--vid);margin-top:var(--g4)}
@media(min-width:1100px){.row{grid-template-columns:repeat(var(--c,4),minmax(0,1fr))}}
@media(max-width:860px){.row{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.row{grid-template-columns:1fr}}

/* a list on a grey band: its heading on the left, the list beside it, a picture across the band */
.band{background:var(--paper-2);padding-bottom:var(--gap);margin-top:var(--gap)}
.band.plain{background:var(--paper)}
.band+.band{margin-top:0}
.band .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g4) var(--col);align-items:start}
.bhead{grid-column:1/5}
.blist{grid-column:5/13}
.band .figs{grid-column:1/-1;margin-top:0}
.band .shot a.im{background:var(--paper)}
.band.plain .shot a.im{background:var(--paper-2)}
.bnote{margin-top:var(--g2);color:var(--ink);max-width:40ch}
.bfoot{margin-top:var(--g3)}
.grp+.grp{margin-top:var(--g4)}
.grp h3{margin-bottom:var(--g2)}
.menu{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:0 var(--col)}
.menu li{display:grid;grid-template-columns:1fr auto;gap:var(--g1) var(--g3);padding:var(--g2) 0;align-content:start}
.menu .nm{font-size:var(--b);font-weight:600}
.menu .nm a{color:var(--ink);text-decoration-color:var(--teal)}
.menu .nm a:hover{color:var(--teal-ink)}
.menu .pr{font-family:var(--display);font-weight:700;font-size:var(--b);text-align:right;font-variant-numeric:tabular-nums;color:var(--teal-ink)}
.menu .ds{grid-column:1/-1;font-size:var(--b);color:var(--ink);max-width:var(--measure)}
.menu .home{display:block;color:var(--teal-2);font-weight:600;margin-top:var(--g1)}
@media(max-width:960px){.bhead,.blist{grid-column:1/-1}}

/* questions: the heading on the left, each question opening to its answer */
.drawer .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g4) var(--col);align-items:start}
.drawer h2{grid-column:1/5}
.qs{grid-column:5/13;display:grid;gap:var(--g1)}
.qa{background:var(--paper-2);transition:background-color .2s}
.qa[open]{background:var(--paper-3)}
.qa summary{list-style:none;cursor:pointer;padding:var(--g3)}
.qa summary::-webkit-details-marker{display:none}
.qa .q{display:block;font-family:var(--display);font-weight:700;font-size:var(--b);line-height:1.4;padding-right:var(--g4);position:relative}
.qa .q::after{content:"+";position:absolute;right:0;top:-4px;font-size:24px;font-weight:600;color:var(--teal-ink);transition:transform .25s}
.qa[open] .q::after{transform:rotate(45deg)}
.qa summary:hover .q{color:var(--teal-2)}
.qa .ans{padding:0 var(--g3) var(--g3);max-width:var(--measure)}
.qa .ans p+p{margin-top:var(--g2)}
.qa .opts{margin:0 0 var(--g2) 20px}
.qa .ansl{font-weight:500}
@media(max-width:960px){.drawer h2,.qs{grid-column:1/-1}}
@media(max-width:700px){.qa summary{padding:var(--g2) 20px}.qa .ans{padding:0 20px var(--g3)}}

/* the invitation to act: a white panel on the navy field */
.reply{background:var(--navy);margin-top:var(--gap);padding-bottom:var(--gap)}
main > section.reply{padding-top:var(--gap)}
.band+.reply{margin-top:0}
.reply .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g4) var(--col);align-items:start}
.rside{grid-column:1/5}
.rside p{color:var(--lav);font-size:var(--m);line-height:1.45;max-width:30ch}
.rcard{grid-column:5/13;background:var(--paper);padding:clamp(24px,3.2vw,64px)}
.rcard h2{font-size:var(--l)}
.rcard>p{margin-top:var(--g2);max-width:var(--measure)}
.rbtn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 var(--g3);margin-top:var(--g3);background:var(--teal-ink);color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;transition:background-color .2s,transform .15s}
.rbtn:hover{background:var(--navy);color:#fff}
.rbtn:active{transform:translateY(2px)}
.rl{list-style:none;margin-top:var(--g4);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--g2) var(--col);font-size:var(--s)}
@media(max-width:860px){
  .reply .wrap{grid-template-columns:1fr}
  .rside,.rcard{grid-column:1}
}

/* the way on */
.onward{padding-bottom:var(--gap)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--g2)}
.pn a{display:block;background:var(--paper-2);padding:var(--g3);text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:var(--m);line-height:1.3;transition:background-color .2s}
.pn a:hover{background:var(--paper-3)}
.pn a span{display:block;font-family:var(--sans);font-size:var(--s);font-weight:500;color:var(--teal-ink);margin-bottom:var(--g1)}
.pn .next{grid-column:2;text-align:right;background:var(--navy);color:#fff}
.pn .next span{color:var(--sky)}
.pn .next:hover{background:var(--teal-ink)}
.pn .next:hover span{color:#fff}
.more{margin-top:var(--g5)}
.more ul{list-style:none;columns:4 280px;column-gap:var(--col);margin-top:var(--g3)}
.more li{break-inside:avoid;padding:var(--g1) 0;font-size:var(--b)}
.more li a{font-weight:500}
.more .here{font-weight:700}
.more p{margin-top:var(--g3)}
@media(max-width:700px){.pn{grid-template-columns:1fr}.pn .next{grid-column:1}}

/* a pathway: what it reads, beside the audience it finds; what flows back, beside its video */
.split .wrap,.learnband .wrap,.lesson .wrap,.turn .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g4) var(--col);align-items:start}
.sl,.ll,.lmain,.tl{grid-column:1/8}
.sr,.lr,.tr{grid-column:9/13}  /* an aside takes the right third, on the line the headings' text starts on below */
.lside{grid-column:8/13}       /* a course stop's video needs the extra column to stay readable */
.split .figs,.learnband .figs,.lesson .figs,.learnband .fhead,.lesson .fhead{grid-column:1/-1}
.learnband .fhead,.lesson .fhead{margin-top:var(--g4)}
.learnband .fhead+.figs,.lesson .fhead+.figs{margin-top:0}
.learnband .wrap:has(.lr .vidslot:empty):not(:has(.lr .proof)) .ll{grid-column:1/-1}
.learnband .wrap:has(.lr .vidslot:empty):not(:has(.lr .proof)) .lr{display:none}
.learnband .wrap:not(:has(.lr)) .ll{grid-column:1/-1}
.lr .proof{margin-top:var(--g3)}
.lr .vidslot:empty+template+.proof,.lr>.proof:first-child{margin-top:0}
.ins{list-style:none;margin-top:var(--g3);max-width:var(--measure)}
.split .wrap:has(.sr:empty) .sl{grid-column:1/-1}  /* no audience beside the list: the list takes the row, in two columns */
.split .wrap:has(.sr:empty) .sr{display:none}
.split .wrap:has(.sr:empty) .ins{max-width:none;columns:2 420px;column-gap:var(--col)}
.ins li{break-inside:avoid}
.ins li{padding:var(--g2) 0 0;font-size:var(--b)}
.ins li:first-child{padding-top:0}
.ins li b{color:var(--ink)}
.ins li a{text-decoration:none}
.ins li a:hover b{color:var(--teal-ink)}
.mod{margin-top:var(--g2)}
.audcard{background:var(--paper-2);padding:clamp(24px,2.4vw,40px)}
.audcard h3 a{color:var(--ink);text-decoration-color:var(--teal);display:inline-block;padding:2px 0}
.audcard p{margin-top:var(--g2)}
.learnband .ll .big{margin-top:var(--g3);max-width:var(--measure)}
.learnband p+p{margin-top:var(--g2)}
.proof{background:var(--paper-2);padding:var(--g3);margin-top:var(--g3);max-width:var(--measure)}
.video{margin:0;background:var(--navy)}
.slide .video{grid-column:1/-1;width:min(100%,var(--vid));margin:0 auto}  /* the pathway's own video, not the whole width */
.vid{position:relative;aspect-ratio:16/9;background:var(--navy-2)}
.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{color:var(--lav);font-size:var(--s);padding:var(--g2)}
.vidslot:empty{display:none}
@media(max-width:860px){
  .split .wrap,.learnband .wrap,.lesson .wrap,.turn .wrap{grid-template-columns:1fr}
  .sl,.ll,.lmain,.tl,.sr,.lr,.lside,.tr{grid-column:1}
}

/* a course stop */
.prose{margin-top:var(--g3);max-width:var(--measure)}
.prose p,.prose ul,.prose ol{margin-top:var(--g2)}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:var(--g1)}
.prose table{width:100%;border-collapse:collapse;margin-top:var(--g2);font-size:var(--s);display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--paper-3);padding:var(--g1) var(--g2);text-align:left;vertical-align:top}
.prose th{font-family:var(--display);background:var(--paper-2)}
.lmain h3{margin-top:var(--g4)}
.paths{list-style:none;margin-top:var(--g2)}
.paths li{padding:var(--g1) 0}
.ask,.orin{background:var(--paper-2);padding:var(--g3);margin-top:var(--g3)}
.lside .vidslot:empty+.ask,.lside>.ask:first-child{margin-top:0}
.ask .say{font-family:var(--display);font-weight:700;font-size:var(--m);line-height:1.3;margin:var(--g1) 0}
.orin{margin-top:0}
.orin p{margin-top:var(--g1)}
.steps{margin:var(--g3) 0 0 24px;max-width:var(--measure)}
.steps li{padding:var(--g1) 0 var(--g1) 6px;font-size:var(--b)}
.steps li::marker{font-family:var(--display);font-weight:800;color:var(--teal-ink)}
.why .big{font-family:var(--display);font-weight:700;font-size:var(--m);line-height:1.35;max-width:40ch;margin-top:var(--g3);letter-spacing:-.01em}
.tailor{font-size:var(--s);margin-top:var(--g2)}
.star{color:#9a5f05;font-weight:700}

/* the footer, on the navy field */
.back{background:var(--navy);padding:var(--gap) 0 var(--g4)}
.back .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g4) var(--col)}
.sign{grid-column:1/8}
.sign .s1{font-family:var(--display);font-weight:700;font-size:var(--l);line-height:1.2;letter-spacing:-.02em;margin-bottom:var(--g2);color:#fff;text-wrap:balance}
.sign p{font-size:var(--s);color:var(--lav);max-width:72ch}
.addr{grid-column:9/13;display:grid;grid-template-columns:1fr 1fr;gap:var(--g2) var(--col);align-content:start}
.addr a{font-size:var(--b);font-weight:500;color:#fff;text-decoration-color:var(--teal)}
.addr a:hover{color:var(--sky)}
.imprint{grid-column:1/-1;font-size:var(--s);color:var(--lav)}
.imprint a{font-weight:500;color:var(--lav)}
.imprint a:hover{color:#fff}
@media(max-width:860px){.sign,.addr{grid-column:1/-1}}

/* motion: each part rises in once; the first picture settles; nothing moves for people who ask for less */
.js .rise{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rise.in{opacity:1;transform:none}
.slides .slide:first-child .shot:first-child a.im{animation:settle 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes settle{from{opacity:.4;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .js .rise{opacity:1;transform:none}
}
@media print{.bar,.reply,.pn,.video{display:none}.js .rise{opacity:1;transform:none}.slide[hidden]{display:block!important}}

@media(max-width:560px){.name h1[style]{font-size:var(--h1p)}}

/* Mission Resources (scripts/site_resources.py): the hub's search inside its record, each resource's Request link,
   and the request form, set as the invitation panel is (.reply): a white panel on the navy field, its note in the
   left third. Every gap is a step of --u, as above. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.find{margin-top:var(--g4);padding:var(--g3) 0 var(--g4);border-top:4px solid var(--paper-3)}
.find input[type=search]{width:100%;min-height:56px;padding:0 var(--g2);font:500 var(--m)/1.2 var(--sans);color:var(--ink);background:var(--paper-2);border:2px solid var(--paper-3);border-radius:0;-webkit-appearance:none;appearance:none}
.find input[type=search]:focus{outline:none;border-color:var(--teal-ink);background:var(--paper)}
.find input[type=search]::placeholder{color:var(--ink-2);opacity:.75}
.tchips{display:flex;flex-wrap:wrap;gap:var(--g1);margin-top:var(--g2)}
.tchip{font:600 var(--s)/1 var(--sans);color:var(--ink);background:var(--paper);border:2px solid var(--paper-3);padding:var(--g1) var(--g2);cursor:pointer;transition:background-color .2s,border-color .2s}
.tchip span{font-family:var(--display);font-weight:800;color:var(--teal-ink);margin-left:4px}
.tchip:hover{border-color:var(--teal)}
.tchip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.tchip[aria-pressed="true"] span{color:var(--sky)}
.count{font-size:var(--s);color:var(--ink-2);margin-top:var(--g2)}
.none{max-width:var(--max);margin:0 auto;padding:var(--gap) var(--edge) 0;font-size:var(--m)}
/* the hub's lists: one band per kind, closer together than other pages' sections (the list is long and searched),
   still more than twice the biggest gap inside a band */
.band.cat{padding-top:var(--g5);padding-bottom:var(--g5)}
main > section.band.cat{padding-top:var(--g5)}
.field+.none+.band.cat{margin-top:var(--g4)}
.band.cat .blist{display:grid;gap:var(--g4)}
.band.cat .grp+.grp{margin-top:0}
@media(min-width:961px){.band.cat .bhead{position:sticky;top:var(--g3)}}
.menu.cat li{grid-template-columns:1fr auto}
.menu.cat .rq{grid-column:1/-1}
.menu.cat li[hidden],.band.cat[hidden],.band.cat .grp[hidden]{display:none}
.req{font-size:var(--s);font-weight:600}
.req::after{content:" \2192";display:inline-block;transition:transform .2s}
.req:hover::after{transform:translateX(4px)}
.btn.req{font-size:var(--b)}
.btn.req::after{content:none}
.reqs{background:var(--navy);margin-top:var(--gap);padding-bottom:var(--gap)}
main > section.reqs{padding-top:var(--gap)}
.reqs .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g4) var(--col);align-items:start}
.rqside{grid-column:1/5}
.rqside h2{color:#fff}
.rqside p{color:var(--lav);font-size:var(--m);line-height:1.45;max-width:30ch;margin-top:var(--g2)}
.rqside p.small{font-size:var(--s)}
.rqside a{color:#fff}
.rqform,.rqdone{grid-column:5/13;background:var(--paper);padding:clamp(24px,3.2vw,64px)}
.rqform{display:grid;grid-template-columns:1fr 1fr;gap:var(--g3)}
.rqform .f{display:grid;gap:var(--g1);min-width:0;align-content:start}
.rqform .full{grid-column:1/-1}
.rqform .f>span,.rqform legend{font-family:var(--display);font-weight:700;font-size:var(--s);color:var(--ink)}
.rqform .f>span i{font-family:var(--sans);font-style:normal;font-weight:500;color:var(--ink-2);margin-left:var(--g1)}
.rqform input:not([type=radio]),.rqform select,.rqform textarea{width:100%;min-height:52px;padding:var(--g1) var(--g2);font:400 var(--b)/1.4 var(--sans);color:var(--ink);background:var(--paper-2);border:2px solid var(--paper-3);border-radius:0}
.rqform textarea{resize:vertical;min-height:calc(var(--u) * 10)}
.rqform input:focus,.rqform select:focus,.rqform textarea:focus{outline:none;border-color:var(--teal-ink);background:var(--paper)}
.rqform .kind{border:0;display:flex;flex-wrap:wrap;gap:var(--g1) var(--g3);align-items:center}
.rqform .kind legend{width:100%;margin-bottom:var(--g1)}
.rqform .kind label{display:flex;gap:var(--g1);align-items:center;font-weight:500;cursor:pointer}
.rqform .kind input{width:20px;height:20px;accent-color:var(--teal-ink)}
.rqform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rqform .send{display:flex;flex-wrap:wrap;align-items:center;gap:var(--g2) var(--g3)}
.rqform .send .rbtn{margin-top:0;border:0;cursor:pointer;font-size:var(--b)}
.rqform .send .rbtn[disabled]{opacity:.6;cursor:wait}
.rqstatus{font-weight:500;max-width:var(--measure)}
.rqstatus.bad{color:#9b1c1c}
.rqdone h3{font-size:var(--l)}
.rqdone p{margin-top:var(--g2);max-width:var(--measure)}
.reqs .flash{outline:4px solid var(--sun);outline-offset:4px;transition:outline-color 1.2s}
@media(max-width:860px){.reqs .wrap{grid-template-columns:1fr}.rqside,.rqform,.rqdone{grid-column:1}}
@media(max-width:560px){.rqform{grid-template-columns:1fr}.rqform .f{grid-column:1}}
@media print{.reqs,.find{display:none}}