/* Front door only.
 *
 * Layered on top of forms.css, which already carries the color set, the top
 * bar, the hero, the step strip, the card and the note. Only what this one
 * page adds is written here, so the apply and nomination forms cannot be
 * changed by editing it.
 */

/* A shade larger than the forms' hero. This is the only heading on the page
   and it is the first thing a stranger reads; the forms' headings sit above a
   form that explains itself. */
.hero h1{font-size:32px;}
@media(max-width:560px){.hero h1{font-size:25px;}}

/* Section labels. Quieter than a card heading, because these name a group of
   things rather than the thing itself. */
.sec{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate);font-weight:800;margin:30px 0 12px;}
.sec:first-child{margin-top:4px;}

/* --- the two ways in --- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:660px){.doors{grid-template-columns:1fr;}}
.door{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);padding:24px 26px 22px;
  transition:box-shadow .16s,border-color .16s,transform .16s;}
.door:hover{box-shadow:var(--sh-md);border-color:#cfe3f2;transform:translateY(-2px);}
.door:focus-visible{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(39,178,234,.22);}
.door h3{margin:0 0 8px;font-size:19px;line-height:1.25;color:var(--navy);font-weight:700;}
.door p{margin:0 0 18px;font-size:13.5px;line-height:1.62;color:var(--slate);}
/* Pushes the call to action to the bottom, so two cards of unequal text still
   line their buttons up. */
.door .go{margin-top:auto;align-self:flex-start;font-size:13.5px;font-weight:700;
  color:var(--blue);}
.door .go::after{content:" \2192";}
.door:hover .go{color:var(--navy);}

/* The application is the main road through this page, so it is the one card
   that carries the brand gradient along its top edge. */
.door.lead{position:relative;overflow:hidden;border-color:#d3e7f5;}
.door.lead::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--teal));}

/* --- for people who already know where they are going --- */
.also{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:660px){.also{grid-template-columns:1fr;}}
.also a{display:block;text-decoration:none;color:inherit;background:var(--wash);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  transition:background .16s,border-color .16s;}
.also a:hover{background:var(--pale);border-color:#cfe3f2;}
.also a:focus-visible{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(39,178,234,.22);}
.also b{display:block;font-size:13.5px;color:var(--navy);margin:0 0 3px;}
.also span{display:block;font-size:12px;line-height:1.55;color:var(--slate);}

/* --- what the Fellowship is --- */
.about{display:flex;gap:26px;align-items:flex-start;}
.about img{flex:0 0 92px;width:92px;height:auto;}
.about p{margin:0 0 12px;font-size:13.5px;line-height:1.68;color:#33424f;}
.about p:last-child{margin-bottom:0;}
.about b{color:var(--navy);}
@media(max-width:560px){
  .about{flex-direction:column;gap:16px;}
  .about img{flex:none;width:76px;}
}

/* --- foot --- */
footer{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule);
  text-align:center;font-size:11.5px;line-height:1.7;color:var(--slate);}
footer p{margin:0 auto 4px;max-width:60ch;}
footer a{color:var(--blue);}
.partners{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 14px;}
.partners img{height:22px;width:auto;opacity:.55;}
.partners .sep{width:1px;height:16px;background:var(--line);}