/* Holly Campbell for the RACA Board
   Palette, type and measurements taken from Holly's InDesign artboard
   (1242pt wide). The content column there is 998pt, which is 80.4% of the
   artboard, so the wrap below is the same proportion of a 1392px canvas. */

:root {
  --sand:        #DCD8CC;
  --sand-deep:   #D2CDBF;
  --slate:       #414D5F;
  --slate-dark:  #37414F;
  --crimson:     #B94E5E;
  --crimson-dk:  #A33F4E;
  --gold:        #CBA128;
  --ink:         #1F1E1C;
  --ink-soft:    #4A4843;
  --on-slate:    #EDEAE2;

  --display: "Source Serif 4", "Minion Pro", Georgia, "Times New Roman", serif;
  --text: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --gutter: clamp(1.1rem, 4vw, 2rem);

  /* the six boxes: 28.3% columns, 7.5% gaps, straight off the artboard */
  --box-gap: 7.5%;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.15rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--crimson-dk); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--slate); color: #fff; padding: 0.6rem 1rem; z-index: 50;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  background: var(--sand);
  border-bottom: 1px solid rgba(65, 77, 95, 0.14);
  position: sticky; top: 0; z-index: 40;
}

.masthead-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.95rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  font-family: var(--text);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand-sep { color: var(--ink-soft); }

.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(1rem, 2.6vw, 2.4rem);
}
.nav a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--crimson); }
.nav a.here { color: var(--crimson); border-bottom-color: var(--crimson); }

.menu-button {
  display: none;
  font-family: var(--text);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--crimson);
  background: none; border: 0; padding: 0.25rem; cursor: pointer;
}

.phone-nav { display: none; border-top: 1px solid rgba(65, 77, 95, 0.14); }
.phone-nav ul { list-style: none; margin: 0; padding: 0.5rem var(--gutter) 1rem; }
.phone-nav li { border-bottom: 1px solid rgba(65, 77, 95, 0.12); }
.phone-nav li:last-child { border-bottom: 0; }
.phone-nav a {
  display: block; padding: 0.85rem 0;
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.phone-nav a.here { color: var(--crimson); }

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-button { display: block; }
  .phone-nav { display: block; }
}

/* -------------------------------------------------------------------- hero */

.hero {
  background: var(--slate);
  padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(2rem, 4.5vw, 3.4rem);
  text-align: center;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--gold);
  font-size: clamp(2.5rem, 7.6vw, 5.9rem);
  line-height: 1.05;
  margin: 0 0 clamp(1.8rem, 4vw, 3.2rem);
  letter-spacing: -0.005em;
}

.hero figure { margin: 0; }

/* ------------------------------------------------------------------- bands */

.band-paper { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.band-paper.tight { padding-top: 0; }
.band-tight { padding: 0 0 clamp(1.4rem, 3vw, 2.4rem); }

.band-photo { padding: clamp(1.2rem, 3vw, 2.2rem) 0; }
.band-photo figure { margin: 0; }

.band-slate {
  background: var(--slate);
  color: var(--on-slate);
  padding: clamp(2.4rem, 5.5vw, 4rem) 0;
}

/* ------------------------------------------------------------------- type */

.lead-cap::first-letter { /* reserved, Holly sets no drop cap */ }

.prose p {
  margin: 0 0 1.35rem;
  max-width: none;
}
.prose p:last-child { margin-bottom: 0; }
.prose em { font-style: italic; }
.prose strong { font-weight: 700; }

.prose .opener { font-size: 1.12em; }
.prose .opener .opener-words { font-weight: 500; }

.italic-note { font-style: italic; color: var(--ink-soft); }

.display {
  font-family: var(--display);
  font-weight: 600;
  color: var(--crimson);
  font-size: clamp(2rem, 5.9vw, 4.55rem);
  line-height: 1.1;
  text-align: center;
  margin: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(1.6rem, 3.5vw, 2.6rem);
  letter-spacing: -0.004em;
}
.display em { font-style: italic; }
.display.two-line { line-height: 1.12; }

/* A two-line couplet, centred, each line held on one line of its own.
   Sized down from the other displays so the longer first line clears the
   column without wrapping. Below about 430px it is allowed to wrap rather
   than shrink to an unreadable size. */
.display.couplet {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  font-size: clamp(0.9rem, 4.5vw, 3.45rem);
  line-height: 1.22;
  text-wrap: pretty;
}
.display.couplet span { display: block; }

.rule-head {
  font-family: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.6rem;
}

.centred { text-align: center; }

.statement {
  text-align: center;
  font-weight: 500;
  font-size: clamp(1.02rem, 0.9rem + 0.55vw, 1.3rem);
  line-height: 1.5;
  margin: 0 0 0.6rem;
}
.statement.sub {
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem);
  margin-bottom: 0;
}

/* -------------------------------------------------------------- the lists */

ol.facts { margin: 0; padding: 0; list-style: none; counter-reset: fact; }
ol.facts > li {
  counter-increment: fact;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.5rem;
}
ol.facts > li::before {
  content: counter(fact) ".";
  position: absolute; left: 0; top: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
ol.facts > li:last-child { margin-bottom: 0; }

ul.points { margin: 0; padding: 0; list-style: none; }
ul.points > li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 1.5rem;
}
ul.points > li::before {
  content: "\2022";
  position: absolute; left: 0.25rem; top: -0.05rem;
  color: var(--ink);
}
ul.points > li:last-child { margin-bottom: 0; }

.amount { font-weight: 700; }

.competencies {
  list-style: none; margin: 0 0 clamp(1.8rem, 4vw, 2.8rem); padding: 0;
  text-align: center;
}
.competencies li {
  font-weight: 700;
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem);
  line-height: 2.1;
}

.vote-intro {
  text-align: center;
  font-style: italic;
  font-weight: 500;
  color: var(--crimson);
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.14rem);
  margin: 0 0 1rem;
}

.vote-lines { margin: 0; }
.vote-lines p {
  text-align: center;
  margin: 0 0 0.75rem;
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.08rem);
}
.vote-lines p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- six boxes */

.boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--box-gap);
  row-gap: clamp(1.6rem, 3.5vw, 2.6rem);
}

.box {
  background: var(--slate);
  color: var(--on-slate);
  text-decoration: none;
  padding: clamp(1.4rem, 2.2vw, 1.9rem) clamp(1.3rem, 2vw, 1.75rem) clamp(1.5rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  transition: background 140ms ease, transform 140ms ease;
}
.box:hover, .box:focus-visible {
  background: var(--slate-dark);
  transform: translateY(-2px);
}
.box:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.box-head {
  font-family: var(--text);
  font-weight: 700;
  color: var(--crimson);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.3;
  margin: 0 0 0.9rem;
}
.box-num { font-variant-numeric: tabular-nums; }
.box-dash { color: var(--on-slate); font-weight: 400; }

.box-body {
  margin: 0 0 1.4rem;
  font-size: 0.97rem;
  line-height: 1.5;
  flex: 1;
}

.box-link {
  margin: 0;
  color: var(--crimson);
  font-size: 0.97rem;
}
.box:hover .box-link { color: #D4707E; }

@media (max-width: 880px) {
  .boxes { grid-template-columns: repeat(2, 1fr); column-gap: 5%; }
}
@media (max-width: 560px) {
  .boxes { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- sign off */

.signoff { padding: clamp(1.5rem, 3.5vw, 2.6rem) 0 clamp(2.4rem, 5vw, 3.6rem); }

.signoff-grid {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}

.signoff-portrait img {
  width: 100%;
  filter: grayscale(1);
}

.signoff-words p { margin: 0 0 1.1rem; }
.signoff-sig { margin: 1.4rem 0 0.8rem !important; }
.signoff-sig img { width: 158px; height: auto; opacity: 0.9; }
.signoff-name { font-weight: 500; margin-bottom: 0 !important; }
.signoff-name a { color: var(--crimson); text-decoration: none; }
.signoff-name a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .signoff-grid { grid-template-columns: 1fr; }
  .signoff-portrait { max-width: 170px; }
}

/* ------------------------------------------------------------- vote band */

.vote-band {
  background: var(--slate);
  color: var(--on-slate);
  padding: clamp(2rem, 4.5vw, 3rem) 0;
}
.vote-head {
  font-family: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.1rem;
}
.vote-band p { margin: 0 0 1.2rem; max-width: 70em; }
.vote-contacts { list-style: none; margin: 0; padding: 0; }
.vote-contacts li {
  position: relative; padding-left: 1.7rem; margin-bottom: 0.4rem;
  font-size: 0.95rem;
}
.vote-contacts li::before {
  content: "\2022"; position: absolute; left: 0.25rem;
}
.vote-band a { color: var(--gold); }

/* --------------------------------------------------------- authorisation */

.authorisation {
  background: var(--sand-deep);
  padding: 1.5rem 0;
}
.authorisation p {
  margin: 0;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* -------------------------------------------- pages still being written */

.pending {
  border: 1px solid rgba(65, 77, 95, 0.2);
  background: rgba(255, 255, 255, 0.35);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  text-align: center;
}
.pending-lead {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  color: var(--crimson);
  margin: 0 0 0.9rem;
}
.pending p { margin: 0 0 0.8rem; }
.pending-back { font-weight: 500; }

.chapter {
  padding: clamp(2rem, 4.5vw, 3.2rem) 0;
  border-top: 1px solid rgba(65, 77, 95, 0.16);
}
.chapter:first-of-type { border-top: 0; }
.chapter-head {
  font-family: var(--display);
  font-weight: 600;
  color: var(--crimson);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 1.2rem;
  scroll-margin-top: 6rem;
}
.chapter-num { font-variant-numeric: tabular-nums; }
.chapter-blurb { margin: 0 0 0.9rem; font-size: 1.06em; }
.chapter-pending { margin: 0; color: var(--ink-soft); font-style: italic; }
.chapter p:last-child { margin-bottom: 0; }

/* anchors land clear of the sticky masthead */
[id] { scroll-margin-top: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

.display.small {
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem);
  margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
}

.page-head { padding: clamp(1.6rem, 4vw, 2.6rem) 0 0; }
.page-head .display { margin-top: 0; }

/* the phone panel stays shut until the Menu button opens it: the hidden
   attribute must beat the display:block the media query sets */
.phone-nav[hidden] { display: none; }

@media (max-width: 520px) {
  .brand-role { display: none; }
  .brand { font-size: 0.74rem; letter-spacing: 0.04em; }
  .masthead-inner { gap: 0.75rem; }
}

/* ------------------------------------------------- long reading pages
   The Who am I page, and the chapter pages to come. Holly sets these in
   her document as: a bronze kicker, a serif section head, a slightly
   larger serif lead paragraph under it, bold run-in labels on each point,
   and photographs in matched-height pairs with small italic captions. */

.kicker {
  font-family: var(--text);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.4rem;
}
.page-head .kicker { text-align: center; margin-bottom: 0.9rem; }

.page-sub {
  font-family: var(--display);
  font-style: italic;
  text-align: center;
  color: var(--ink-soft);
  font-size: clamp(1rem, 0.92rem + 0.5vw, 1.25rem);
  margin: 0;
}

.section-head {
  font-family: var(--display);
  font-weight: 600;
  color: var(--crimson);
  font-size: clamp(2.05rem, 1.6rem + 2.1vw, 3.25rem);
  line-height: 1.12;
  margin: 0 0 1.1rem;
}
.section-head + .kicker { margin-top: -0.4rem; }

/* A kicker set in ink rather than bronze, for the standfirst that sits
   directly under a section head and wants to read as a statement. */
.kicker-ink {
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(0.88rem, 0.8rem + 0.3vw, 1.02rem);
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.prose .lead {
  font-family: var(--display);
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.55;
}

.run-in { font-weight: 700; color: var(--slate-dark); }

/* Her two pull quotes, set the way she sets them: centred, italic, in the
   deep red, each sentence on its own line. */
.pull {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  color: var(--crimson-dk);
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2.1rem);
  line-height: 1.3;
}
.pull p { margin: 0 0 0.5rem; max-width: 24em; margin-inline: auto; text-wrap: balance; }
.pull p:last-child { margin-bottom: 0; }

/* The roof signage, letterspaced rather than typed with gaps so it reads
   properly aloud and copies cleanly. */
.signage {
  text-align: center;
  font-family: var(--display);
  font-size: clamp(0.78rem, 0.6rem + 0.95vw, 1.3rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 1.8rem 0 1.8rem !important;
}

/* ------------------------------------------------------------ figures */

.fig { margin: clamp(1.6rem, 3.5vw, 2.4rem) 0; }
.fig img { width: 100%; }

.fig figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
}

.fig-mid { max-width: 760px; margin-inline: auto; }

/* A pair sits on one line at matched height, exactly as Holly lays them
   out. Giving each figure a flex-grow of its own aspect ratio against a
   zero basis makes the widths proportional to the ratios, which is the
   same thing as making the heights equal. */
.pair {
  display: flex;
  gap: clamp(0.8rem, 2.2vw, 1.5rem);
  align-items: flex-start;
  margin: clamp(1.6rem, 3.5vw, 2.4rem) 0;
}
.pair .fig { flex: var(--ar) 1 0; min-width: 0; margin: 0; }

.quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 2.2vw, 1.5rem);
  align-items: end;
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 0;
}
.quad .fig { margin: 0; }

@media (max-width: 620px) {
  .pair { display: block; }
  .pair .fig { margin: 0 0 1.4rem; }
  .pair .fig:last-child { margin-bottom: 0; }
  .quad { grid-template-columns: repeat(2, 1fr); }
}