/* ==========================================================================
   RAY DOTSON FOR SPRINGDALE CITY COUNCIL
   --------------------------------------------------------------------------
   HOW TO EDIT THIS FILE

   You do not need to be a developer to change the things people usually want
   to change. The two most common edits are:

     1. COLORS   - all of them live in one short list, just below, under
                   "THE CAMPAIGN COLORS". Change a color there and it updates
                   everywhere on the site at once.

     2. TEXT     - words are not in this file. All of the page's words live in
                   index.html. Open that file and edit the text between the
                   angle-bracket tags.

   Everything below the color list is layout and spacing. Each section is
   labelled with a plain-language heading so you can find your way around.

   A NOTE ON THE RED AND THE NAVY: the campaign red is used for filled shapes,
   rules and buttons. It is deliberately never used for text sitting on navy -
   that combination is far too low-contrast to read (about 2:1, where the
   accessibility standard asks for at least 4.5:1). If you need red text, use
   it on the cream background, where the darker "red ink" shade is used.
   ========================================================================== */


/* ==========================================================================
   THE CAMPAIGN COLORS
   These values were sampled directly from the printed yard sign and the
   "Record of Responsibility" poster, so the website matches the print pieces.
   ========================================================================== */

:root {
  --navy:      #0B1E3D;   /* main dark blue - the yard sign bar               */
  --navy-deep: #04122C;   /* a darker blue, used for the footer               */
  --red:       #A80C0C;   /* campaign red - buttons, rules, filled shapes     */
  --red-ink:   #7A1010;   /* a darker red, used when red must be READ as text */
  --cream:     #EFE9E1;   /* the off-white "paper" of the printed pieces      */
  --paper:     #F8F4EE;   /* a lighter paper, behind the endorsement          */
  --ink-soft:  #5A5148;   /* soft brown-grey for captions and small print     */

  /* Supporting values you are unlikely to need to change */
  --white:      #FFFFFF;
  --flag-tint:  #F6E7E4;  /* pale red wash, used only for the TO-DO markers   */
  --rule:       rgba(11, 30, 61, 0.18);
  --rule-light: rgba(239, 233, 225, 0.28);

  /* The red check mark used in the ballot box and beside each priority.
     It echoes the check boxes on the printed campaign graphics. */
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 12.4l4.6 4.6 10.2-10.4' fill='none' stroke='%23A80C0C' stroke-width='3.4'/%3E%3C/svg%3E");

  /* Spacing and width */
  --wrap:        1120px;
  --wrap-narrow: 760px;
  --gutter:      20px;
  --section-pad: 56px;
}


/* ==========================================================================
   THE TWO TYPEFACES

   Oswald        - the tall, narrow, confident face used for headlines. It is
                   the closest open-licensed match to the type on the signs.
   Source Sans 3 - the readable face used for ordinary paragraphs.

   Both are loaded from the /fonts folder on this site rather than from an
   outside company, so no third party can track visitors to this page.

   If the font files are ever missing, the browser falls back to a similar
   font already on the visitor's device and the page still looks correct.
   ========================================================================== */

/* Each family is a single "variable" font file that contains every weight, so
   the whole site needs only two font downloads, about 57KB in total. */

@font-face {
  font-family: 'Oswald';
  src: url('fonts/oswald-variable.woff2') format('woff2');
  font-weight: 200 700;          /* one file covers this whole range */
  font-style: normal;
  font-display: swap;            /* show fallback text immediately, swap when ready */
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/source-sans-3-variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Oswald', 'Bahnschrift Condensed', 'Arial Narrow',
                  'Helvetica Neue Condensed', 'Liberation Sans Narrow', sans-serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'Helvetica Neue', Arial, sans-serif;
}


/* ==========================================================================
   PAGE BASICS
   Body text is set at 17.5px on phones and 18px on larger screens. Please do
   not reduce this - a meaningful share of the people reading this page are
   older voters, and smaller text will lose them.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;   /* stops the sticky bar covering anchor targets */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.62;
}

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

p { margin: 0 0 1em; }

a { color: var(--red-ink); }
a:hover { color: var(--red); }

/* A clear, high-visibility focus ring for anyone navigating by keyboard. */
a:focus-visible,
button:focus-visible,
video:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
.ballot a:focus-visible,
.record a:focus-visible,
.contact a:focus-visible,
.sitefooter a:focus-visible,
.siteheader a:focus-visible,
.siteheader button:focus-visible {
  outline-color: var(--cream);
}

/* The "skip to main content" link, visible only when tabbed to. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: var(--cream);
  padding: 12px 18px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Text that screen readers announce but that is not shown on screen. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Width containers */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }


/* ==========================================================================
   SECTION HEADINGS
   Deliberately plain: a headline and a short red rule beneath it. There are no
   small tracked-out labels above headings anywhere on this page.
   ========================================================================== */

.section-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
  padding-bottom: 0.32em;
  border-bottom: 3px solid var(--red);
  color: var(--navy);
}
.section-h--onnavy { color: var(--cream); }

.section-intro {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: 1.8em;
  max-width: 52ch;
}


/* ==========================================================================
   TO-DO MARKERS  (class "needs")
   Nothing on the page uses these at the moment. They are kept so that, if a
   piece of content ever has to be held back, it can be marked with a loud
   red-outlined block that is impossible to miss, and script.js will list it
   in the browser console.
   ========================================================================== */

.needs {
  display: block;
  background: var(--flag-tint);
  border: 2px dashed var(--red);
  border-left-width: 7px;
  color: var(--red-ink);
  padding: 0.85em 1em 0.85em 1.1em;
  margin: 0 0 1.4em;
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 600;
}
.needs::before {
  content: "\2691  STILL NEEDED";     /* a small flag glyph */
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  margin-bottom: 0.35em;
  color: var(--red);
}


/* ==========================================================================
   THE STICKY BAR AT THE TOP OF THE PAGE
   ========================================================================== */

.siteheader {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  border-bottom: 3px solid var(--red);
}
.siteheader__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  min-height: 56px; gap: 0 12px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.22rem; letter-spacing: 0.055em;
  text-transform: uppercase; text-decoration: none;
  color: var(--cream);
}
.wordmark:hover { color: var(--white); }

/* The Menu button, shown on phones only */
.navtoggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--rule-light);
  color: var(--cream); font-family: var(--font-display);
  font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 12px; cursor: pointer;
}
.navtoggle__bars,
.navtoggle__bars::before,
.navtoggle__bars::after {
  display: block; width: 17px; height: 2px; background: var(--cream); content: "";
}
.navtoggle__bars { position: relative; }
.navtoggle__bars::before { position: absolute; top: -5px; }
.navtoggle__bars::after  { position: absolute; top: 5px; }

.sitenav { display: none; width: 100%; }
.sitenav.is-open { display: block; padding-bottom: 12px; }
.sitenav ul { list-style: none; margin: 0; padding: 0; }
.sitenav li + li { border-top: 1px solid var(--rule-light); }
.sitenav a {
  display: block; padding: 13px 2px;
  color: var(--cream); text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.02rem; letter-spacing: 0.045em; text-transform: uppercase;
}
.sitenav a:hover { color: var(--white); }


/* ==========================================================================
   THE HERO - the top of the page, and the one loud moment on the site

   THE HERO GRAPHIC is the yard sign, widened slightly on the right so the
   photo and words sit in the middle (see index.html). It is shown whole: it
   only ever shrinks to fit, at its own shape. Do not add object-fit, filters,
   overlays, rounded corners, opacity or animation to it.
   ========================================================================== */

.hero { background: var(--cream); padding: 0 0 46px; }
.hero__grid { display: flex; flex-direction: column; padding: 0; }

.hero__portrait { order: -1; margin: 0 0 26px; }
.hero__portrait img { width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

.hero__text { padding: 0 var(--gutter); }

.hero__h1 { margin: 0 0 0.35em; }
.hero__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.9rem, 15vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--navy);
}
.hero__office {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.12rem, 4.6vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: 0.3em;
}
.hero__ward {
  font-size: 1rem; color: var(--ink-soft);
  margin: 0 0 1.1em; padding-bottom: 1.1em;
  border-bottom: 1px solid var(--rule);
}
.hero__tagline {
  font-size: clamp(1.2rem, 5vw, 1.5rem);
  font-style: italic; font-weight: 600;
  color: var(--red-ink);
  margin: 0 0 1.1em;
}

/* The two dates, side by side, divided by a hairline */
.hero__dates {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 0 0 1.7em;
}
.hero__dates > div + div { border-left: 1px solid var(--rule); padding-left: 18px; }
.hero__dates > div:first-child { padding-right: 14px; }
.hero__dates dt {
  font-family: var(--font-display);
  font-size: 0.84rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__dates dd {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(1.08rem, 4.4vw, 1.3rem);
  line-height: 1.2; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--navy);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* On phones the two buttons stack as one tidy full-width pair. */
@media (max-width: 519px) {
  .hero__actions .btn { flex: 1 1 100%; text-align: center; }
}

/* Buttons */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: 0.075em; text-transform: uppercase;
  padding: 13px 24px; border: 2px solid transparent;
}
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-ink); color: var(--white); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--cream); }
.btn--light { background: var(--cream); color: var(--navy); }
.btn--light:hover { background: var(--white); color: var(--navy); }
.btn--outline-light { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn--outline-light:hover { background: var(--cream); color: var(--navy); }


/* ==========================================================================
   YOUR BALLOT - the voting facts, kept near the top because they are the
   single most-searched thing a stranger wants from this page
   ========================================================================== */

.ballot { background: var(--navy); color: var(--cream); padding: var(--section-pad) 0; }
.ballot__grid { display: grid; gap: 30px; margin-bottom: 34px; }

/* The card is styled to resemble a ballot paper rather than a marketing box. */
.ballot__card {
  background: var(--cream); color: var(--navy);
  border: 1px solid var(--navy-deep);
  padding: 20px;
  align-self: start;
}
.ballot__race {
  font-size: 0.9rem; letter-spacing: 0.03em; color: var(--ink-soft);
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 2px solid var(--navy);
}
.ballot__list { list-style: none; margin: 0; padding: 0; }
.ballot__row { display: flex; align-items: center; gap: 14px; }
.ballot__num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: var(--ink-soft); min-width: 1.1em;
}
.ballot__box {
  width: 30px; height: 30px; flex: 0 0 30px;
  border: 2px solid var(--navy);
  background: var(--white) var(--check) center / 92% no-repeat;
}
.ballot__who {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.45rem, 7vw, 2rem); letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--navy);
}
.ballot__note {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem; color: var(--ink-soft);
}

/* The two key dates */
.keydates { margin: 0; padding: 0; }
.keydates__item { padding: 16px 0; border-top: 1px solid var(--rule-light); }
.keydates__item:last-child { border-bottom: 1px solid var(--rule-light); }
.keydates__item:first-child { padding-top: 0; border-top: none; }
.keydates dt {
  font-family: var(--font-display);
  font-size: 0.88rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--cream); opacity: 0.82; margin-bottom: 3px;
}
.keydates dd {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.22rem; line-height: 1.3; letter-spacing: 0.015em; color: var(--cream);
}
.keydates__item--em dd { font-weight: 700; font-size: 1.4rem; }
.keydates__note {
  display: block; margin-top: 6px;
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.98rem; line-height: 1.5; letter-spacing: 0;
  color: var(--cream); opacity: 0.88;
}

.ballot__links { margin: 0 0 0.7em; font-size: 0.98rem; }
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { border-top: 1px solid var(--rule-light); }
.linklist li:last-child { border-bottom: 1px solid var(--rule-light); }
.linklist a {
  display: block; padding: 12px 0;
  color: var(--cream); text-decoration: none;
}
.linklist__title {
  display: block; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.linklist__title::after { content: " \2192"; }
.linklist__src { display: block; font-size: 0.9rem; opacity: 0.78; }
.linklist a:hover .linklist__title { color: var(--white); }


/* ==========================================================================
   THE VIDEO SLOT  (the section is switched off in index.html until the video
   exists - see "Adding the video" in README.md)
   The 16:9 space is reserved so that the page does not jump around when the
   video loads.
   ========================================================================== */

.videosec { background: var(--cream); padding: var(--section-pad) 0; }

.videoslot {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--navy-deep);
  margin-bottom: 22px;
}
.videoslot__video { width: 100%; height: 100%; display: block; object-fit: cover; }


/* ==========================================================================
   WHERE HE STANDS - the centrepiece of the page
   Four priorities, each marked with the red check from the campaign
   graphics. One column on phones, two by two on larger screens.
   ========================================================================== */

.stands { background: var(--cream); padding: var(--section-pad) 0; }
.issues { display: grid; gap: 34px; }
.issue p { margin: 0; }
.issue__h {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 5.2vw, 1.55rem); line-height: 1.15;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 0.6em;
}
.issue__h::before {
  content: ""; flex: 0 0 26px; height: 26px; margin-top: 0.02em;
  border: 2px solid var(--navy);
  background: var(--white) var(--check) center / 92% no-repeat;
}


/* ==========================================================================
   THE ENDORSEMENT - one quotation, set large and given room to breathe
   ========================================================================== */

.endorse {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: var(--section-pad) 0;
  text-align: center;
}
.endorse__figure { margin: 0; }
.endorse__quote { margin: 0; }
.endorse__quote::before {
  content: "\201C";                 /* a large decorative opening quote mark */
  display: block; height: 0.5em;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6.4rem; line-height: 0.9;
  color: var(--red);
}
.endorse__quote p {
  margin: 0;
  font-size: clamp(1.28rem, 4.6vw, 1.72rem);
  line-height: 1.42; font-weight: 500;
  color: var(--navy);
}
.endorse__by { margin-top: 28px; }
.endorse__by::before {
  content: ""; display: block;
  width: 44px; height: 3px; margin: 0 auto 16px;
  background: var(--red);
}
.endorse__name {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.32rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--navy);
}
.endorse__role {
  display: block; margin-top: 2px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--red-ink);
}
.endorse__past {
  list-style: none; margin: 8px 0 0; padding: 0;
  font-size: 0.98rem; line-height: 1.5; color: var(--ink-soft);
}
.endorse__note { margin: 22px 0 0; font-size: 0.85rem; color: var(--ink-soft); }


/* ==========================================================================
   HIS RECORD - the bond committee service, and Ray's account of 1993
   ========================================================================== */

.record { background: var(--navy); color: var(--cream); padding: var(--section-pad) 0; }
.record__grid { display: flex; flex-direction: column; gap: 28px; }
.record__lead {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 5vw, 1.6rem); letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--cream); margin: 0 0 0.7em;
}
.record__points { list-style: none; margin: 1.6em 0 0; padding: 0; }
.record__points li { padding: 16px 0; border-top: 1px solid var(--rule-light); }
.record__points li:last-child { border-bottom: 1px solid var(--rule-light); }
.record__points h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.06rem; letter-spacing: 0.07em; text-transform: uppercase;
  margin: 0 0 0.2em; color: var(--cream);
}
.record__points p { margin: 0; color: var(--cream); opacity: 0.92; }
.record__portrait img { width: 100%; max-width: 420px; }

/* Ray's own account of the Chamber of Commerce funding in 1993 */
.story {
  display: grid; gap: 26px;
  margin-top: 54px; padding-top: 50px;
  border-top: 1px solid var(--rule-light);
}
.story__photo { margin: 0; }
.story__photo img { width: 100%; max-width: 806px; }
.story__photo figcaption { margin-top: 10px; font-size: 0.92rem; opacity: 0.78; }
.story__h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 4.8vw, 1.62rem); line-height: 1.18;
  letter-spacing: 0.015em; text-transform: uppercase;
  color: var(--cream); margin: 0 0 0.9em;
}
.story__text p { color: var(--cream); }
.story__close {
  margin: 1.5em 0 0.8em; padding-left: 14px;
  border-left: 4px solid var(--red);
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.24rem; line-height: 1.3; letter-spacing: 0.03em;
  text-transform: uppercase;
}
.story__sign {
  margin: 0;
  font-family: var(--font-display); font-size: 0.95rem;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85;
}
.story__sign::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 26px; height: 2px; margin-right: 10px;
  background: var(--cream); opacity: 0.6;
}

/* The note clarifying that naming people is not a claim of endorsement. */
.record__disclaim {
  font-size: 0.9rem; line-height: 1.5;
  color: var(--cream); opacity: 0.72;
  border-left: 3px solid var(--rule-light);
  padding-left: 14px; margin: 46px 0 0; max-width: 72ch;
}


/* ==========================================================================
   ABOUT RAY - biography and the photograph with his wife, Lesa
   ========================================================================== */

.about { background: var(--cream); padding: var(--section-pad) 0; }
.about__grid { display: flex; flex-direction: column; gap: 26px; }
.about__facts { list-style: none; margin: 0 0 1.6em; padding: 0; }
.about__facts li {
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1rem, 4.4vw, 1.1rem); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--navy);
}
.about__facts li:first-child { border-top: 1px solid var(--rule); }

/* The photograph has a near-black studio background, so it sits on a navy
   panel and is faded softly into it at the edges rather than being cut out. */
.about__photo { margin: 0; }
.about__photo picture {
  display: block; background: var(--navy-deep); padding: 0; max-width: 420px;
}
.about__photo img {
  width: 100%;
  -webkit-mask-image: radial-gradient(115% 92% at 50% 42%, #000 62%, transparent 100%);
          mask-image: radial-gradient(115% 92% at 50% 42%, #000 62%, transparent 100%);
}
.about__photo figcaption {
  margin-top: 12px; max-width: 420px;
  font-size: 0.95rem; color: var(--ink-soft);
}


/* ==========================================================================
   HOW TO VOTE - three numbered steps
   ========================================================================== */

.howto { background: var(--cream); padding: var(--section-pad) 0; border-top: 1px solid var(--rule); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; }
.step {
  counter-increment: step;
  padding: 24px 0; border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step::before {
  content: counter(step);
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.6rem; line-height: 1;
  color: var(--red-ink);
}
.step h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.22rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 0.5em;
}
.step p:last-child { margin-bottom: 0; }
.link-out {
  display: inline-block; font-weight: 600;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.link-out::after { content: " \2192"; }


/* ==========================================================================
   GET IN TOUCH
   ========================================================================== */

.contact { background: var(--navy); color: var(--cream); padding: var(--section-pad) 0; }
.contact .section-h { margin-bottom: 0.9em; }
.contact__grid { display: grid; gap: 30px; }
.contact__item { padding-top: 18px; border-top: 1px solid var(--rule-light); }
.contact__label {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 0.88rem; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.82;
}
.contact__phone {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 10vw, 2.9rem); line-height: 1.1; letter-spacing: 0.02em;
}
.contact__phone a { color: var(--cream); text-decoration: none; }
.contact__phone a:hover { color: var(--white); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.contact__note { margin: 0 0 18px; font-size: 1.08rem; }

/* A computer with a mouse usually cannot send a text message, so the
   "Text for a yard sign" button only appears on phones and tablets. The
   number itself is always shown. */
@media (hover: hover) and (pointer: fine) {
  .contact__sms { display: none; }
}


/* ==========================================================================
   FOOTER - carries the sponsor line Arkansas asks political ads to show
   ========================================================================== */

.sitefooter { background: var(--navy-deep); color: var(--cream); padding: 34px 0 44px; }
.sitefooter__disclaimer {
  display: inline-block; margin: 0 0 1.1em; padding: 6px 12px;
  border: 1px solid var(--rule-light);
  font-family: var(--font-display); font-size: 0.95rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.sitefooter__meta { margin: 0; font-size: 0.9rem; opacity: 0.75; }


/* ==========================================================================
   ONE MOMENT OF MOTION
   The hero text rises gently once, when the page first loads. The photograph
   itself never animates. Nothing else on the page animates on scroll, and
   anyone who has asked their device to reduce motion sees no animation at
   all - and no smooth scrolling either.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .hero__text > * { animation: rise 0.62s cubic-bezier(0.22, 0.68, 0.36, 1) both; }
  .hero__text > *:nth-child(2) { animation-delay: 0.06s; }
  .hero__text > *:nth-child(3) { animation-delay: 0.12s; }
  .hero__text > *:nth-child(4) { animation-delay: 0.18s; }
  .hero__text > *:nth-child(5) { animation-delay: 0.24s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ==========================================================================
   LARGER SCREENS
   The phone layout above is the real design. Everything from here down simply
   adapts it to tablets and desktops.
   ========================================================================== */

@media (min-width: 700px) {
  :root { --section-pad: 76px; --gutter: 28px; }
  body { font-size: 18px; }

  .ballot__card { padding: 30px 32px; }
  .about__grid, .record__grid { flex-direction: row; align-items: flex-start; gap: 42px; }
  .about__text, .record__text { flex: 1 1 58%; }
  .about__photo, .record__portrait { flex: 0 0 34%; }
  .record__portrait img, .about__photo picture, .about__photo figcaption { max-width: none; }

  .issues { grid-template-columns: 1fr 1fr; gap: 46px 52px; }
  .contact__grid { grid-template-columns: 1fr 1fr; gap: 52px; }
}

@media (min-width: 900px) {
  html { scroll-padding-top: 80px; }

  /* The Menu button disappears and the links sit in a row. */
  .navtoggle { display: none; }
  .sitenav { display: block; width: auto; }
  .sitenav ul { display: flex; align-items: center; gap: 26px; }
  .sitenav li + li { border-top: none; }
  .sitenav a { padding: 18px 0; font-size: 0.96rem; }
  .sitenav .sitenav__cta a {
    padding: 8px 16px; background: var(--red); color: var(--white);
  }
  .sitenav .sitenav__cta a:hover { background: var(--red-ink); }

  .siteheader__inner { min-height: 64px; }
  .wordmark { font-size: 1.34rem; }

  /* Hero becomes two columns: words on the left, photograph on the right. */
  .hero { padding: 0 0 72px; }
  .hero__grid {
    flex-direction: row; align-items: center; gap: 46px;
    padding: 58px var(--gutter) 0;
  }
  .hero__text { flex: 1 1 52%; padding: 0; }
  .hero__portrait { order: 0; flex: 1 1 46%; margin: 0; }
  .hero__name { font-size: clamp(4rem, 6.6vw, 6rem); }

  /* Ballot card on the left, dates on the right. */
  .ballot__grid { grid-template-columns: 1fr 1fr; gap: 56px; }

  /* Photograph on the left, Ray's account on the right. The photograph
     stays in view while the account is read. */
  .story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 52px; align-items: start; }
  .story__photo { position: sticky; top: 100px; }
  .about__photo { position: sticky; top: 100px; }

  /* The three voting steps sit side by side. */
  .steps { grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
  .step { border-bottom: 1px solid var(--rule); }
}

@media (min-width: 1100px) {
  .hero__name { font-size: 6.2rem; }
}