/* ============================================================================
   Design tokens, the reset, and the pieces used on more than one page.
   Loaded on every page, before chrome.css and the page's own stylesheet.

   The palette comes from the logo. Everything is a variable here, so a colour
   or a typeface is changed in one place and changes everywhere.
   ============================================================================ */

:root{
  /* Reds. --maroon is the everyday one; --maroon-deep is the darker red the
     buttons and the Give link use. */
  --maroon:#7A1E1E;
  --maroon-deep:#77171B;
  --brown:#533523;
  /* --tan is the small warm label colour. It has two values: the darker one
     reads on white and cream, and the lighter one takes over inside the dark
     grounds below, because no single tan clears 4.5 to 1 on both. */
  --tan:#885A3E;
  --tan-on-dark:#C4906C;

  /* Grounds. --bark is the dark ground most of the page sits on, --bark-soft
     the slightly lighter one behind the next-step rail, --cream the light
     panel, --clay the hero's own ground behind the photograph. */
  --bark:#3A2419;
  --bark-soft:#4A2E20;
  --cream:#F6F1EC;
  --clay:#2A1A12;
  --paper:#FFFFFF;

  /* Type colours. */
  --ink:#1B1717;
  --body:#4A4342;
  --muted:#6B6360;
  --rose:#955656;
  --rose-on-dark:#E8B9B9;

  /* Lines and washes. */
  --line-dark:rgba(27,23,23,.12);
  --line-light:rgba(255,255,255,.25);
  --on-dark:rgba(255,255,255,.72);
  --on-dark-soft:rgba(255,255,255,.6);

  --ease:cubic-bezier(.2,.7,.2,1);

  /* Four typefaces, each with a job. --display is the condensed capitals,
     --serif the headline face on light panels, --sans the reading face, and
     --label the small tracked capitals. */
  --display:'Anton',Impact,sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Instrument Sans',Helvetica,Arial,sans-serif;
  --label:'Montserrat',Helvetica,Arial,sans-serif;

  /* The page gutter, and the narrower one the hero and footer use. */
  --gutter:40px;
  --gutter-wide:44px;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
a{
  color:var(--ink);text-decoration:none;
  transition:color .22s ease,background .22s ease,border-color .22s ease,transform .4s var(--ease);
}
a:hover{color:var(--maroon)}
img{max-width:100%;display:block}
/* A class that sets `display` outranks the browser's own rule for [hidden], so
   anything the scripts hide has to be hidden louder than it is shown. */
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0}
p{margin:0}

/* The site sits on a fixed desktop canvas for now: the design has not been
   drawn for a phone yet, so a narrow window scrolls sideways rather than
   guessing at a layout. See "Still to do" in the README. */
.site-root{min-width:1280px;background:var(--paper);color:var(--ink)}

/* ---------- Small tracked capitals ---------- */
/* The label above a heading. Three sizes, because the design uses three. */
.eyebrow{
  display:block;font-family:var(--label);font-size:11.5px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tan);
}
.eyebrow--wide{font-size:12px;letter-spacing:.28em}
.eyebrow--tight{letter-spacing:.26em}

/* ---------- Buttons ---------- */
/* All four are the same condensed capitals; what differs is the ground they
   are drawn to sit on. */
.btn{
  display:inline-block;font-family:var(--display);font-size:15px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:0;
}
.btn--solid{padding:17px 30px;background:var(--maroon-deep);color:#fff}
.btn--solid:hover{background:var(--brown);color:#fff}
.btn--outline{padding:16px 28px;border:2px solid var(--maroon-deep);color:var(--maroon-deep)}
.btn--outline:hover{background:var(--maroon-deep);color:#fff}
.btn--on-photo{padding:18px 32px;background:var(--maroon);color:#fff}
.btn--on-photo:hover{background:#fff;color:var(--maroon)}

/* ---------- Skip link ---------- */
/* Off screen until a keyboard reaches it, then the first thing on the page.
   It jumps past the menu. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--maroon);
  color:#fff;padding:.7rem 1.2rem;font-family:var(--label);font-size:13px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.skip-link:focus{left:0}

/* ---------- Editable lists ---------- */
/* The visual editor needs one element wrapping the items of a list it can
   reorder. Where nothing already wraps them, this does, and display:contents
   keeps it out of the layout so the items sit in their parent's grid or flex
   row exactly as before. */
.edit-list{display:contents}

/* ---------- Entrance animations ---------- */
/* These run once on load, on the header and the hero. Everything further down
   the page is revealed on scroll by js/main.js instead. */
@keyframes fbcUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fbcDrop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
@keyframes fbcFade{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes fbcMask{from{opacity:0;transform:translateY(28px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

/* Anything scrolled into view starts hidden and is moved into place by
   js/main.js. The html.motion class is added by js/motion.js in <head>: with
   JavaScript off it never appears, so nothing is ever hidden and the whole page
   is simply there. See "Motion" in the README. */
html.motion [data-reveal]{opacity:0}
/* Once an element has arrived, js/main.js takes its inline styles back off so
   the element is left exactly as the stylesheet drew it. Without this rule it
   would fall straight back to the hidden state above. */
html.motion [data-reveal][data-reveal-done]{opacity:1}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-parallax]{transform:none!important}
}
/* The same again for the accessibility panel's Stop Animations switch, which
   the panel writes onto <html>: it stops the motion itself, and these say what
   each thing looks like at rest, so no reveal is left hidden. They override
   the inline styles js/main.js sets, so the script needs no change. */
html[data-a11y-stop-anim] *{animation:none!important;transition:none!important;scroll-behavior:auto}
html[data-a11y-stop-anim] [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
html[data-a11y-stop-anim] [data-parallax]{transform:none!important}

/* ---------- Where a photograph is looked at ---------- */
/* A photograph is cropped to its box, so which part of it survives the crop is
   a decision per picture. It cannot be an inline style, because the security
   policy refuses those, so it is a short ladder of classes instead. */
.focus-20{object-position:center 20%}
.focus-25{object-position:center 25%}
.focus-28{object-position:center 28%}
.focus-30{object-position:center 30%}
.focus-35{object-position:center 35%}
.focus-38{object-position:center 38%}
.focus-40{object-position:center 40%}
.focus-45{object-position:center 45%}
.focus-50{object-position:center 50%}
.focus-55{object-position:center 55%}
.focus-60{object-position:center 60%}
.focus-65{object-position:center 65%}
.focus-70{object-position:center 70%}

/* ============================================================================
   Sections used on more than one page.

   The home page is built from pieces drawn only for it, and those live in
   css/pages/index.css. Everything below is the language the other five pages
   share: the opener they all start on, the grounds a section can sit on, the
   headings, and the handful of panels that appear on two pages or more.
   ============================================================================ */

/* ---------- The opener every page but the home page starts on ---------- */
/* The header sits on this same dark band, which is why .page-top in chrome.css
   and this share a ground. */
.page-hero{background:var(--clay);color:#fff;padding:24px var(--gutter-wide) 92px}
.page-hero__title{
  margin-top:18px;font-family:var(--display);font-size:82px;font-weight:400;
  line-height:.9;letter-spacing:-.02em;text-transform:uppercase;color:#fff;max-width:18ch;
}
.page-hero__lede{
  margin-top:24px;font-size:18px;line-height:1.66;color:var(--on-dark);
  max-width:56ch;text-wrap:pretty;
}

/* ---------- Grounds a section can sit on ---------- */
.section{padding:96px var(--gutter)}
.section--tight{padding-top:64px}
.section--cream{background:var(--cream)}
.section--bark{background:var(--bark);color:#fff}
.page-top,.page-hero,.section--bark,.cta,.verse,.steps,.rus,.sermon-card__art{--tan:var(--tan-on-dark)}
.section--paper{background:var(--paper)}

/* ---------- Headings inside a section ---------- */
.section-head{margin-bottom:46px;max-width:62ch}
.section-head--centre{margin-left:auto;margin-right:auto;text-align:center}
.section-title{
  margin-top:18px;font-family:var(--serif);font-size:48px;font-weight:700;
  line-height:1.08;color:var(--ink);text-wrap:pretty;
}
.section--bark .section-title{color:#fff}
/* The condensed capitals, for a heading that should shout rather than speak. */
.section-title--display{
  font-family:var(--display);font-size:64px;font-weight:400;line-height:.9;
  letter-spacing:-.02em;text-transform:uppercase;
}
.section-lede{margin-top:20px;font-size:17.5px;line-height:1.68;color:var(--body);text-wrap:pretty}
.section--bark .section-lede{color:var(--on-dark)}
.section-note{margin-top:18px;font-size:16px;line-height:1.7;color:var(--muted)}
.section-note p + p{margin-top:14px}
.section-note a{color:var(--maroon);font-weight:600}
.section-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* The photograph beside a block of words. Without a shape of its own it would
   draw at whatever size the file happens to be, so the column decides. */
.split__photo{width:100%;aspect-ratio:4/3;object-fit:cover}

/* Two columns, words on one side and something else on the other. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split--top{align-items:start}
.split--wide-left{grid-template-columns:1.15fr .85fr}

/* ---------- The verse band ---------- */
.verse{--rose:var(--rose-on-dark);background:var(--maroon);color:#fff;text-align:center;padding:110px var(--gutter)}
.verse blockquote{
  margin:0 auto;font-family:var(--serif);font-size:46px;font-weight:700;
  font-style:italic;line-height:1.16;max-width:22ch;text-wrap:pretty;
}
.verse cite{
  display:block;margin-top:26px;font-style:normal;font-family:var(--label);
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);
}

/* ---------- The closing panel ---------- */
.cta{background:var(--bark);color:#fff;padding:0}
.cta__inner{
  display:flex;align-items:center;justify-content:space-between;gap:48px;
  padding:78px var(--gutter);
}
.cta__title{font-family:var(--display);font-size:64px;line-height:.92;text-transform:uppercase;max-width:16ch}
.cta__text{margin-top:16px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.72);max-width:46ch}

/* ---------- A list of practical details ---------- */
.details{margin-top:34px}
.detail{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line-dark)}
.detail:last-child{border-bottom:0}
.detail__label{
  padding-top:4px;font-family:var(--label);font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tan);
}
.detail__value{font-size:17px;line-height:1.6;color:var(--ink)}
.detail__value--quiet{font-weight:400;color:var(--body)}
a.detail__value{color:var(--maroon);font-weight:600}

/* ---------- A card with boxes to type in ---------- */
/* None of these send anything yet; see "Still to do" in the README. */
.form-card{background:var(--cream);padding:44px 40px;border-top:5px solid var(--tan)}
.form-card__title{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1.1;color:var(--ink)}
.form-card__note{margin-top:10px;font-size:15px;line-height:1.6;color:var(--body)}
.field{margin-top:12px}
.field input,.field select,.field textarea{
  width:100%;padding:15px;border:1px solid rgba(27,23,23,.18);background:#fff;
  color:var(--ink);font-family:var(--sans);font-size:15px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--maroon);border-color:var(--maroon)}
.btn--block{display:block;width:100%;margin-top:16px;text-align:center}
.form-card__footnote{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center}