/* ============================================================
   Voices of Compliance + Welcome.

   Two short pages sharing one stylesheet. Neither has enough of
   its own to justify a file, and keeping them together means the
   next small page has somewhere obvious to go.

   vc- classes belong to Voices of Compliance, wl- to Welcome.

   Interior shell comes from css/interior.css.
   ============================================================ */

.phero--voices h1{max-width:16ch}
.phero--voices .phero__lede{max-width:58ch}
.phero--welcome h1{max-width:17ch}
.phero--welcome .phero__lede{max-width:58ch}
/* the help fact is a link to Contact Us, not an address to copy;
   the voices lead is the same treatment over a mailto */
.phero--welcome .phero__facts a,
.phero--voices .phero__facts a{color:inherit;text-decoration:none}
.phero--welcome .phero__facts a b,
.phero--voices .phero__facts a b{border-bottom:1px solid rgba(216,226,238,.4)}
.phero--welcome .phero__facts a:hover b,
.phero--voices .phero__facts a:hover b{border-bottom-color:var(--icpa-accent);color:#FFF}

/* ============================================================
   VOICES OF COMPLIANCE
   ============================================================ */

.vc-story{background:var(--white);padding:62px var(--frame) 66px}
/* ---- The story, across the band -------------------------------
   The bands are full bleed. The first cut of this section put the
   lead photograph full width above a 66ch strip of prose, which read
   as an enormous picture with a narrow box shoved under its left
   corner; capping everything to one 1,080px column only turned that
   into a tidy box shoved against the left edge of a 1,900px band.
   The photograph and the "what the choir does" list now take the
   left-hand track and the prose the right, so the section fills the
   width it is given while the reading measure stays at 66ch. The
   named areas keep the collapse at 900px to one line of CSS. ---- */
.vc-story__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(min(100%,44ch),66ch);
  grid-template-areas:"photo story" "extras story";
  gap:34px 56px;align-items:start;
}
.vc-lead{grid-area:photo}
.vc-story__text{grid-area:story}
.vc-story__aside{grid-area:extras}
.vc-story__text p{
  margin:16px 0 0;font-size:1.0625rem;line-height:1.7;color:var(--ink-body);
}
.vc-story__text p:first-of-type{margin-top:18px}

/* The association's own closing line. Set as a pull quote and not
   as a blockquote with a glyph: the WordPress theme paints a
   FontAwesome quote mark on blockquote, which doubled up on every
   pull quote on the site once these pages were ported. */
/* Scoped through .vc-story__text because the paragraph rule above is
   (0,1,1) and would otherwise win on font-size. */
.vc-story__text .vc-story__quote{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--border-rule);
  font-family:var(--font-display);font-size:1.25rem;line-height:1.45;
  color:var(--icpa-dark-navy);max-width:44ch;
}

.vc-story__aside{
  padding:24px 26px 22px;background:var(--icpa-zone-warm);
  border-radius:var(--radius-md);
}
.vc-story__eyebrow{
  font-size:.8125rem;font-weight:var(--weight-bold);text-transform:uppercase;
  letter-spacing:.12em;color:var(--icpa-accent-on-light);
}
.vc-list{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
@media (min-width:1100px){
  .vc-list{display:block;columns:2;column-gap:44px}
  .vc-list li{break-inside:avoid;margin-bottom:10px}
}
.vc-list li{font-size:1rem;line-height:1.6;color:var(--ink-body)}
.vc-list li::marker{color:var(--icpa-accent-on-light)}

.vc-why{background:var(--icpa-zone-warm);padding:58px var(--frame) 66px}
.vc-why__list{
  margin:28px 0 0;padding:0;list-style:none;max-width:88ch;
}
/* Two columns once the band is wide enough that one would leave half
   of it empty. 88ch is the cap on a single column, not on the set. */
@media (min-width:1200px){
  .vc-why__list{max-width:none;columns:2;column-gap:72px}
  .vc-why__list li{break-inside:avoid}
}
.vc-why__list li{
  padding:16px 0;border-top:1px solid var(--border-rule);
  font-size:1.0625rem;line-height:1.65;color:var(--ink-body);
}
.vc-why__list b{color:var(--icpa-dark-navy);font-weight:var(--weight-semibold)}


/* ---- The photographs ----------------------------------------
   Member snapshots, not commissioned photography. They are shown
   at their own proportions rather than cropped to a grid: the
   choir stands in a line across the frame, and any square crop
   takes people out of the picture. Hence columns rather than a
   grid, which also lets the one portrait shot sit among the
   landscape ones without leaving a hole. ------------------- */

.vc-lead{margin:0}
.vc-lead img{
  display:block;width:100%;height:auto;
  /* The photograph is 2.1:1 and full frame width, which stood over
     600px tall on a desktop and pushed the story off the screen. The
     trim comes off the curtain above and the carpet below. */
  aspect-ratio:2.45/1;object-fit:cover;object-position:50% 44%;
  border-radius:var(--radius-md);
}
.vc-lead figcaption,.vc-shot figcaption{
  margin-top:9px;font-size:.875rem;line-height:1.5;color:var(--ink-meta);
}

/* The sponsor credit. Small and set off from the pull quote above
   it, because it is a thank-you and not part of the story. */
.vc-story__text .vc-sponsor{
  margin-top:18px;font-size:.9375rem;line-height:1.6;color:var(--ink-meta);
}
.vc-sponsor b{color:var(--icpa-dark-navy);font-weight:var(--weight-semibold)}
/* the two sponsors are links out to their own sites; the credit still
   reads as a thank-you, so the name underlines rather than turns blue */
.vc-sponsor a{color:inherit;text-decoration:none}
.vc-sponsor a b{border-bottom:1px solid rgba(11,31,58,.28)}
.vc-sponsor a:hover b{border-bottom-color:var(--icpa-accent);color:var(--icpa-accent)}

.vc-gallery{background:var(--white);padding:58px var(--frame) 70px}
.vc-shots{margin-top:30px;columns:3;column-gap:26px}
.vc-shot{
  margin:0 0 30px;break-inside:avoid;-webkit-column-break-inside:avoid;
}
.vc-shot img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius-md);
}

/* ============================================================
   WELCOME
   ============================================================ */

.wl-first{background:var(--white);padding:62px var(--frame) 68px}

/* ---------- the gate ----------
   Same rules css/resources.css paints for the gate pages, kept local
   the way jobs.css keeps them: this page loads neither that file nor
   anything else it would drag in, and the panel is thirty lines.
   Presentation only. WP-Members does the real blocking. */
.wl-gate{background:var(--white);padding:56px var(--frame) 64px}
.wl.is-member .wl-gate{padding-bottom:0}
.wl-gate .gate{
  padding:26px 28px;border-radius:var(--radius-lg);
  background:var(--zone-light);border:1px solid var(--border-rule);
}
.wl-gate .gate__eyebrow{
  font-size:var(--size-eyebrow);font-weight:var(--weight-bold);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--icpa-accent-on-light);margin-bottom:10px;
}
.wl-gate .gate__h{margin:0 0 10px;font-size:1.25rem;font-weight:var(--weight-bold);color:var(--icpa-dark-navy)}
.wl-gate .gate__body{margin:0;max-width:64ch;font-size:1rem;line-height:1.6;color:var(--text-body)}
.wl-gate .gate__body+.gate__body{margin-top:10px}
.wl-gate .gate__ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* Both states are in the markup and CSS picks one, so with JS off the
   page is correct and closed. The demo button is the only thing that
   comes off on WordPress, where the session is real. */
.wl-gate .gate--open{display:none}
.wl.is-member .gate--locked{display:none}
.wl.is-member .gate--open{display:block}
.wl.is-wp-member .gate__demo{display:none}

/* On a real WordPress session the whole gate band comes off. Telling
   somebody who just signed in that they are signed in is a note about
   the plumbing, not a welcome, and it pushes the pack they came for
   down the page. The band only exists to sell the login to someone
   who has not got one. */
.wl.is-wp-member .wl-gate{display:none}

/* Everything the welcome pack is sits behind the gate: the five first
   steps, what the membership carries, who to ask, and the ways in to
   giving something back. The hero stays open, so a non-member who
   lands here still sees what the page is and where to sign in. */
.wl-gated{display:none}
.wl.is-member .wl-gated{display:block}


/* A real <ol>: these are five things to do in order, and the
   numbers are content rather than decoration. The counter is
   drawn rather than left to ::marker so it can sit in its own
   column beside the text instead of hanging off the first line. */
.wl-steps{
  margin:32px 0 0;padding:0;list-style:none;counter-reset:wlstep;
}

/* Five short steps in one narrow column left two thirds of the frame
   empty. Above the wide breakpoint they run in two columns so the list
   fills the page it is set on. */
@media (min-width:1080px){
  .wl-steps{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:64px;align-items:start;
  }
}
.wl-step{
  counter-increment:wlstep;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px;
  padding:22px 0 24px;border-top:1px solid var(--border-rule);
}
.wl-step::before{
  content:counter(wlstep);
  grid-row:1 / span 3;
  font-family:var(--font-display);font-size:1.5rem;line-height:1.1;
  color:var(--icpa-accent-on-light);font-variant-numeric:tabular-nums;
}
.wl-step__h3{
  margin:0;font-family:var(--font-display);font-size:1.25rem;line-height:1.25;
  color:var(--icpa-dark-navy);
}
.wl-step p{margin:6px 0 0;max-width:60ch;font-size:1.0625rem;line-height:1.65;color:var(--ink-body)}
.wl-step__link{
  display:inline-block;margin-top:10px;justify-self:start;
  font-size:.9375rem;font-weight:var(--weight-semibold);
  color:var(--icpa-navy);text-decoration:none;
}
.wl-step__link:hover{text-decoration:underline}

.wl-what{background:var(--icpa-zone-warm);padding:58px var(--frame) 64px}
.wl-what__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,34ch);
  gap:30px 72px;align-items:start;
}
.wl-what__lede{
  margin:14px 0 0;max-width:84ch;font-size:1.0625rem;line-height:1.7;color:var(--ink-body);
}
.wl-what__ctas{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-top:22px}
.wl-what__aside{
  padding:22px 24px 20px;background:var(--white);
  border:1px solid var(--border-rule);border-radius:var(--radius-md);
}
.wl-what__h3{
  margin:0 0 8px;font-size:1.125rem;font-weight:var(--weight-semibold);
  color:var(--icpa-dark-navy);
}
.wl-what__aside p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-body)}
/* the aside now names two people, so it runs to three paragraphs */
.wl-what__aside p+p{margin-top:12px}
.wl-what__aside p a{color:var(--icpa-navy);text-decoration:none}
.wl-what__aside p a:hover{text-decoration:underline}
.wl-what__link{
  display:block;margin-top:12px;
  font-size:.9375rem;font-weight:var(--weight-semibold);
  color:var(--icpa-navy);text-decoration:none;
}
.wl-what__link:hover{text-decoration:underline}
.wl-what__ctas .wl-what__link{display:inline-block;margin-top:0}

/* ============================================================
   NARROW
   ============================================================ */

@media (max-width:1000px){
  .vc-shots{columns:2}
}

@media (max-width:900px){
  .vc-story__inner,.wl-what__inner{grid-template-columns:minmax(0,1fr)}
  .vc-story__inner{grid-template-areas:"photo" "story" "extras"}
}

@media (max-width:640px){
  .vc-story,.vc-why,.vc-gallery,.wl-first,.wl-what,.wl-gate{padding-left:20px;padding-right:20px}
  .vc-shots{columns:1}
  .vc-story__aside,.wl-what__aside{padding:20px}
  .wl-step{grid-template-columns:auto minmax(0,1fr);gap:4px 16px}
}