/*
 * Cast Your Pour — ballot styles.
 *
 * Typefaces are the ones the Garrison Brothers theme already loads
 * (GB Font, GB San Serif Condensed, GB Serif Text), so nothing extra is
 * fetched here. Colours are sampled from the live site: black ground,
 * #CF552E accent. Each expression carries its own wax colour, set inline
 * from the database.
 */

.gb-cyp {
  --gb-ink: #ffffff;
  --gb-ground: #000000;
  --gb-surface: #0d0d0d;
  --gb-line: #262626;
  --gb-line-soft: #1e1e1e;
  /* Both of these were lifted halfway to white on 24 Sep: the small print
     was legible on a bright desktop panel and not on anything else. Anything
     secondary should use these rather than a hex, so the next adjustment is
     one line and not thirty. */
  --gb-muted: #cdd0d2;  /* was #9ba1a5 */
  --gb-dim: #b7babc;    /* was #6e7478 */
  --gb-accent: #cf552e;

  --gb-display: "GB Font", Georgia, serif;
  --gb-cond: "GB San Serif Condensed", "Helvetica Neue", Arial, sans-serif;
  --gb-serif: "GB Serif Text", Georgia, serif;

  background: var(--gb-ground);
  color: var(--gb-ink);
  font-family: var(--gb-cond);
  padding: 0 0 36px;
  margin: 0;
  box-sizing: border-box;
}

/* One gutter for every band on the page. */
.gb-cyp__masthead,
.gb-cyp__hero,
.gb-cyp__how,
.gb-cyp__prize,
.gb-cyp__ballot-section,
.gb-cyp__close,
.gb-cyp__legal { padding-inline: 20px; max-width: 1240px; margin-inline: auto; }
@media (min-width: 900px) {
  .gb-cyp__masthead,
  .gb-cyp__hero,
  .gb-cyp__how,
  .gb-cyp__prize,
  .gb-cyp__ballot-section,
  .gb-cyp__close,
  .gb-cyp__legal { padding-inline: 48px; }
}

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

.gb-cyp__masthead {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 20px; border-bottom: 1px solid var(--gb-line-soft);
}
.gb-cyp__logo { height: 30px; width: auto; filter: brightness(0) invert(1); }
@media (min-width: 900px) { .gb-cyp__logo { height: 38px; } }
.gb-cyp__range {
  font-weight: 700; font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gb-accent);
}

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

.gb-cyp__hero { padding-block: 34px 0; text-align: center; }

.gb-cyp__display {
  font-family: var(--gb-display);
  font-size: clamp(38px, 8vw, 82px);
  line-height: .98; margin: 0; font-weight: 400; color: var(--gb-ink);
  text-wrap: balance;
}
.gb-cyp__display--md { font-size: clamp(26px, 4.4vw, 42px); }
.gb-cyp__display--sm { font-size: clamp(20px, 3vw, 26px); }

.gb-cyp__lede {
  font-family: var(--gb-serif);
  font-size: clamp(15px, 2.2vw, 22px);
  line-height: 1.5; color: #c9cdcf;
  /* 30em broke this mid-clause, after "One vote". At 42em balance lands the
     break on the sentence boundary after "day." instead. */
  margin: 14px auto 0; max-width: 42em;
  /* Three short sentences rag badly on a phone, stranding "day." on its own
     line. Balance evens the lines out without pinning a width. */
  text-wrap: balance;
}

.gb-cyp__family { position: relative; margin-top: 18px; overflow: hidden; }
.gb-cyp__family-img { width: 160%; max-width: none; height: auto; display: block; margin-inline: -30%; }
@media (min-width: 760px) { .gb-cyp__family-img { width: 100%; margin-inline: 0; } }
.gb-cyp__family-fade {
  position: absolute; inset-inline: 0; bottom: 0; height: 46%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--gb-ground) 78%);
}

.gb-cyp__hero-cta { margin-top: -6px; position: relative; z-index: 2; }

.gb-cyp__cta {
  display: inline-block; padding: 19px 44px; background: var(--gb-accent);
  color: #fff; font-family: var(--gb-cond); font-weight: 700; font-size: 15px;
  letter-spacing: 2.8px; text-transform: uppercase; text-decoration: none;
  min-height: 56px;
}
.gb-cyp__cta:hover { background: #e4703f; color: #fff; }
.gb-cyp__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* --- how it works ----------------------------------------------------- */

.gb-cyp__how { padding-block: 44px 0; }
.gb-cyp__eyebrow--center { text-align: center; display: block; margin: 0 0 22px; }

.gb-cyp__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 26px; grid-template-columns: 1fr;
}
@media (min-width: 760px) { .gb-cyp__steps { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; } }
.gb-cyp__steps li { border-top: 2px solid #c6a25a; padding-top: 15px; }
.gb-cyp__num { font-family: var(--gb-display); font-size: 32px; color: #c6a25a; line-height: 1; display: block; }
.gb-cyp__steps h3 {
  font-family: var(--gb-cond); font-weight: 700; font-size: 15px; letter-spacing: 1.8px;
  text-transform: uppercase; margin: 10px 0 0; color: var(--gb-ink);
}
.gb-cyp__steps p { font-family: var(--gb-serif); font-size: 15.5px; line-height: 1.55; color: var(--gb-muted); margin: 8px 0 0; }

/* --- the prize -------------------------------------------------------- */

.gb-cyp__prize { margin-top: 44px; }
.gb-cyp__prize {
  border: 1px solid var(--gb-accent);
  display: grid; grid-template-columns: 1fr; gap: 0;
  max-width: 1144px; padding: 0 !important;
}
@media (min-width: 860px) { .gb-cyp__prize { grid-template-columns: 1fr 300px; } }
.gb-cyp__prize-body { padding: 28px 24px 30px; }
@media (min-width: 860px) { .gb-cyp__prize-body { padding: 30px 34px 32px; } }
.gb-cyp__tag {
  display: inline-block; background: var(--gb-accent); color: #fff;
  padding: 6px 12px; font-weight: 700; font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase;
}
.gb-cyp__prize-body h2 { margin: 16px 0 0; }
.gb-cyp__prize-body p { font-family: var(--gb-serif); font-size: 16.5px; line-height: 1.55; color: #c9cdcf; margin: 12px 0 0; max-width: 34em; }
.gb-cyp__prize-body strong { color: #c6a25a; }

.gb-cyp__stats {
  margin: 0; padding: 24px; display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr); border-top: 1px solid #2a2a2a;
}
@media (min-width: 860px) {
  .gb-cyp__stats { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid #2a2a2a; align-content: center; padding: 30px 28px; }
}
.gb-cyp__stats dt { font-family: var(--gb-display); font-size: clamp(28px, 4vw, 44px); color: var(--gb-accent); line-height: 1; }
.gb-cyp__stats dd {
  margin: 4px 0 0; font-weight: 700; font-size: 10.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gb-muted);
}

/* --- ballot band + close ---------------------------------------------- */

.gb-cyp__ballot-section { padding-block: 46px 0; scroll-margin-top: 20px; }
.gb-cyp__close { padding-block: 40px 0; text-align: center; }
.gb-cyp__close .gb-cyp__foot { margin-top: 6px; }

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

/* --- loading + notices ------------------------------------------------ */

.gb-cyp__loading {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 48px 0;
  color: var(--gb-muted);
  font-size: 15px;
}

.gb-cyp__spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--gb-line);
  border-top-color: var(--gb-accent);
  border-radius: 50%;
  animation: gb-cyp-spin 0.8s linear infinite;
}
@keyframes gb-cyp-spin { to { transform: rotate(360deg); } }

.gb-cyp__note {
  border: 1px solid var(--gb-line);
  padding: 16px;
  font-family: var(--gb-serif);
  color: var(--gb-muted);
  font-size: 15px;
  line-height: 1.5;
}

.gb-cyp__error {
  border-left: 3px solid var(--gb-accent);
  background: #170b07;
  padding: 13px 16px;
  font-family: var(--gb-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: #f0d9d0;
  margin: 0 0 18px;
}

/* --- header ----------------------------------------------------------- */

.gb-cyp__head { text-align: center; margin-bottom: 22px; }
.gb-cyp__head .gb-cyp__title { font-size: clamp(26px, 4.4vw, 40px); }

.gb-cyp__eyebrow {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gb-accent);
  text-transform: uppercase;
}

.gb-cyp__title {
  font-family: var(--gb-display);
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1;
  margin: 12px 0 0;
  color: var(--gb-ink);
  font-weight: 400;
  text-wrap: balance;
}

.gb-cyp__sub {
  font-family: var(--gb-serif);
  font-size: clamp(14px, 2.4vw, 17px);
  line-height: 1.5;
  color: var(--gb-muted);
  margin: 10px auto 0;
  max-width: 34em;
}

/* --- ballot grid ------------------------------------------------------ */

.gb-cyp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
  padding: 0;
  border: 0;
}
@media (min-width: 620px)  { .gb-cyp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 920px)  { .gb-cyp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1160px) { .gb-cyp__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.gb-cyp__legend {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The real radio sits under the card so keyboard and screen readers get
   proper semantics; the card is its label. */
.gb-cyp__card { position: relative; display: block; }

.gb-cyp__card input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}

.gb-cyp__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: var(--gb-surface);
  border: 1px solid var(--gb-line);
  padding: 13px 8px 14px;
  cursor: pointer;
  min-height: 100%;
  transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}

.gb-cyp__card:hover .gb-cyp__face { border-color: #4a4a4a; }
.gb-cyp__card input:focus-visible + .gb-cyp__face {
  outline: 3px solid var(--gb-accent);
  outline-offset: 2px;
}

/* Selection is never colour alone: the border thickens, a tick appears,
   and the word SELECTED replaces the prompt. */
.gb-cyp__card input:checked + .gb-cyp__face {
  border-width: 2px;
  border-color: var(--gb-wax, var(--gb-accent));
  background: #16130f;
  transform: translateY(-2px);
}

.gb-cyp__bottle {
  height: 124px;
  width: auto;
  display: block;
  object-fit: contain;
}
.gb-cyp__bottle--placeholder {
  height: 124px; width: 46px;
  border: 1px dashed var(--gb-line);
  display: block;
}

.gb-cyp__name {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  color: #d6dadc;
}
.gb-cyp__card input:checked + .gb-cyp__face .gb-cyp__name { color: var(--gb-ink); }

.gb-cyp__hint {
  /* Was a hard 9px. Uppercase and letterspaced at that size is unreadable on a
     phone, which is the device most of this campaign will be voted on. Floors
     at 10px and grows with the viewport like everything else here. */
  font-size: clamp(10px, 0.25vw + 9.2px, 11.5px);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gb-dim);
}
.gb-cyp__card input:checked + .gb-cyp__face .gb-cyp__hint {
  color: var(--gb-wax, var(--gb-accent));
  font-weight: 700;
}

.gb-cyp__tick {
  position: absolute;
  top: 8px; right: 8px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--gb-wax, var(--gb-accent));
  color: #000;
  font-size: 12px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gb-cyp__card input:checked + .gb-cyp__face .gb-cyp__tick { display: flex; }

/* --- submit ----------------------------------------------------------- */

.gb-cyp__submit-wrap {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--gb-ground) 38%);
  padding: 22px 0 10px;
  margin-top: 18px;
  z-index: 3;
}

.gb-cyp__submit {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 18px 20px;
  background: var(--gb-accent);
  color: #fff;
  font-family: var(--gb-cond);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}
.gb-cyp__submit:disabled { opacity: .38; cursor: not-allowed; }
.gb-cyp__submit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.gb-cyp__foot {
  text-align: center;
  font-family: var(--gb-serif);
  font-size: clamp(13.5px, 1.25vw, 15.5px);
  color: var(--gb-dim);
  margin: 10px 0 0;
}

/* --- confirmation ----------------------------------------------------- */

.gb-cyp__confirm { text-align: center; padding: 8px 0 0; }

.gb-cyp__seal {
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 2px solid var(--gb-wax, var(--gb-accent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--gb-wax, var(--gb-accent));
  animation: gb-cyp-thump .5s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes gb-cyp-thump {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

.gb-cyp__standings { margin: 22px auto 0; max-width: 520px; text-align: left; }

.gb-cyp__standings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--gb-line);
  padding-bottom: 8px;
}
.gb-cyp__standings-head b {
  font-size: 10px; letter-spacing: 2.8px; text-transform: uppercase; color: var(--gb-accent);
}
.gb-cyp__asof { font-family: var(--gb-serif); font-size: clamp(12px, 1.05vw, 13px); color: var(--gb-dim); }

.gb-cyp__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--gb-line-soft);
}
.gb-cyp__rank { font-family: var(--gb-display); font-size: 20px; width: 24px; color: var(--gb-dim); }
.gb-cyp__row--mine .gb-cyp__rank { color: var(--gb-wax, var(--gb-accent)); }
.gb-cyp__row-name { flex-grow: 1; font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase; color: #d6dadc; }
.gb-cyp__row--mine .gb-cyp__row-name { color: var(--gb-ink); font-weight: 700; }
.gb-cyp__yours {
  /* Same reason as .gb-cyp__hint: this is the badge that tells somebody which
     row is theirs, so it is the last thing that should be too small to read. */
  font-size: clamp(10px, 0.25vw + 9.2px, 11.5px);
  font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  background: var(--gb-wax, var(--gb-accent)); color: #000; padding: 3px 7px;
}

.gb-cyp__share { margin-top: 26px; }
.gb-cyp__share h3 {
  font-family: var(--gb-display); font-size: 24px; margin: 0 0 6px; color: var(--gb-ink); font-weight: 400;
}
.gb-cyp__buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.gb-cyp__btn {
  min-height: 48px;
  padding: 14px 22px;
  font-family: var(--gb-cond); font-weight: 700; font-size: 12px; letter-spacing: 1.8px;
  text-transform: uppercase; cursor: pointer;
  background: var(--gb-accent); color: #fff; border: 0;
}
.gb-cyp__btn--ghost { background: transparent; color: var(--gb-ink); border: 1px solid #4a4a4a; }
.gb-cyp__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.gb-cyp__legal {
  font-family: var(--gb-serif);
  font-size: clamp(12px, 1.05vw, 13.5px);
  line-height: 1.6;
  color: #aaadaf;
  text-align: center;
  margin: 26px auto 0;
  max-width: 62em;
}
.gb-cyp__legal a { color: var(--gb-accent); }

@media (prefers-reduced-motion: reduce) {
  .gb-cyp *, .gb-cyp *::before, .gb-cyp *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------------------------------------------------------------------------
 * Theme override guard.
 *
 * The Garrison Brothers theme styles bare `button` and `a` elements with
 * enough specificity to beat a single class, which silently collapsed the
 * vote button to an inline-block pill. Anything interactive is re-asserted
 * here at element+class specificity, scoped to .gb-cyp so nothing leaks out
 * into the rest of the site.
 * ------------------------------------------------------------------------- */

.gb-cyp button.gb-cyp__submit {
  display: block;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  min-height: 60px;
  padding: 19px 24px;
  background: var(--gb-accent);
  color: #fff;
  font-family: var(--gb-cond);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.gb-cyp button.gb-cyp__submit:hover:not(:disabled) { background: #e4703f; color: #fff; }
.gb-cyp button.gb-cyp__submit:disabled { opacity: .38; cursor: not-allowed; background: var(--gb-accent); }

.gb-cyp a.gb-cyp__cta {
  display: inline-block;
  min-height: 0;
  padding: 20px 46px;
  background: var(--gb-accent);
  color: #fff;
  font-family: var(--gb-cond);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 0;
}
.gb-cyp a.gb-cyp__cta:hover { background: #e4703f; color: #fff; text-decoration: none; }

.gb-cyp button.gb-cyp__btn {
  min-height: 52px;
  padding: 16px 26px;
  font-family: var(--gb-cond);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  border-radius: 0;
  background: var(--gb-accent);
  color: #fff;
  border: 0;
  cursor: pointer;
}
.gb-cyp button.gb-cyp__btn--ghost { background: transparent; color: var(--gb-ink); border: 1px solid #4a4a4a; }
.gb-cyp button.gb-cyp__btn:disabled { opacity: .4; cursor: not-allowed; }

/* The theme also puts a list marker and margins on ol/li. */
.gb-cyp ol.gb-cyp__steps { list-style: none; margin: 0; padding: 0; }
.gb-cyp ol.gb-cyp__steps > li { margin: 0; padding-left: 0; list-style: none; }
.gb-cyp ol.gb-cyp__steps > li::before,
.gb-cyp ol.gb-cyp__steps > li::marker { content: none; }

/* And a default fieldset border/padding. */
.gb-cyp fieldset.gb-cyp__grid { border: 0; margin: 0; padding: 0; min-inline-size: 0; }

/* ---------------------------------------------------------------------------
 * Confirmation screen
 * ------------------------------------------------------------------------- */

.gb-cyp__recorded {
  display: inline-block;
  background: var(--gb-accent);
  color: #fff;
  padding: 7px 14px;
  font-weight: 700; font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase;
  margin-bottom: 22px;
}

.gb-cyp__confirm .gb-cyp__seal { margin-bottom: 4px; }
.gb-cyp__confirm .gb-cyp__title { margin: 12px 0 0; }

/* what you picked */
.gb-cyp__picked {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin: 26px auto 0; max-width: 520px; text-align: left;
  border-top: 1px solid var(--gb-line); border-bottom: 1px solid var(--gb-line);
  padding: 20px 0;
}
.gb-cyp__picked-bottle { height: 148px; width: auto; display: block; flex-shrink: 0; }
.gb-cyp__picked-name {
  font-family: var(--gb-display); font-size: clamp(20px, 3.4vw, 28px);
  line-height: 1.06; margin: 7px 0 0; color: var(--gb-wax, var(--gb-ink));
}
.gb-cyp__picked-line {
  font-family: var(--gb-serif); font-style: italic; font-size: 15px;
  color: var(--gb-muted); margin: 8px 0 0;
}
@media (max-width: 460px) {
  .gb-cyp__picked { gap: 16px; }
  .gb-cyp__picked-bottle { height: 112px; }
}

.gb-cyp__foot--left { text-align: left; margin-top: 12px; }

/* share + enter + tomorrow */
.gb-cyp__share, .gb-cyp__enter, .gb-cyp__tomorrow {
  max-width: 520px; margin-inline: auto;
}
.gb-cyp__share { margin-top: 30px; }

.gb-cyp__enter {
  margin-top: 30px; border: 1px solid var(--gb-line); padding: 20px; text-align: left;
}
.gb-cyp__enter p {
  font-family: var(--gb-serif); font-size: 15px; line-height: 1.5;
  color: #c9cdcf; margin: 9px 0 14px;
}

.gb-cyp__tomorrow {
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--gb-line);
}
.gb-cyp__tomorrow [data-countdown] {
  color: var(--gb-wax, var(--gb-accent));
  font-variant-numeric: tabular-nums;
}

.gb-cyp__title:focus { outline: none; }
.gb-cyp__title:focus-visible { outline: 3px solid var(--gb-accent); outline-offset: 4px; }

/* The preview badge, so nobody mistakes an out-of-window admin vote for a real one. */
.gb-cyp__preview {
  display: block; border: 1px dashed #c6a25a; color: #c6a25a;
  padding: 9px 14px; margin: 0 auto 20px; max-width: 520px;
  font-weight: 700; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Sweepstakes entry form
 * ------------------------------------------------------------------------- */

.gb-cyp__form { margin-top: 16px; text-align: left; }

.gb-cyp__field { margin: 0 0 14px; }
.gb-cyp__field label {
  display: block; font-weight: 700; font-size: 11.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gb-ink); margin-bottom: 6px;
}
.gb-cyp .gb-cyp__field input,
.gb-cyp .gb-cyp__field select {
  width: 100%; min-height: 52px; padding: 14px 14px;
  background: #0d0d0d; color: var(--gb-ink);
  border: 1px solid #3a3a3a; border-radius: 0;
  font-family: var(--gb-serif); font-size: 16px; /* 16px stops iOS zooming on focus */
  box-sizing: border-box;
}
.gb-cyp .gb-cyp__field input:focus-visible,
.gb-cyp .gb-cyp__field select:focus-visible {
  outline: 3px solid var(--gb-accent); outline-offset: 2px; border-color: var(--gb-accent);
}
.gb-cyp .gb-cyp__field input::placeholder { color: #afafaf; }

.gb-cyp__check { margin: 0 0 11px; }
.gb-cyp__check label {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--gb-serif); font-size: 14.5px; line-height: 1.45; color: #c9cdcf;
  cursor: pointer;
}
.gb-cyp .gb-cyp__check input[type="checkbox"] {
  /* A 44px touch target without a 44px box: pad the hit area, keep the mark small. */
  width: 20px; height: 20px; margin: 0; flex-shrink: 0;
  accent-color: var(--gb-accent);
}
.gb-cyp__check--optional label span {
  display: block; font-size: clamp(13px, 1.15vw, 14px); color: var(--gb-dim); margin-top: 2px;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.gb-cyp__hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.gb-cyp__form-error {
  border-left: 3px solid var(--gb-accent); background: #170b07;
  padding: 11px 14px; margin: 4px 0 14px;
  font-family: var(--gb-serif); font-size: 14px; line-height: 1.45; color: #f0d9d0;
}

.gb-cyp .gb-cyp__form button.gb-cyp__btn { width: 100%; margin-top: 4px; }

.gb-cyp__enter p { font-family: var(--gb-serif); font-size: 15px; line-height: 1.5; color: #c9cdcf; }
.gb-cyp__enter strong { color: var(--gb-wax, var(--gb-accent)); }

/* --- standings: top three, expandable ---------------------------------- */

.gb-cyp__more {
  display: block; width: 100%; margin-top: 12px; padding: 13px 16px;
  background: transparent; color: var(--gb-ink);
  border: 1px solid #3a3a3a; border-radius: 0; cursor: pointer;
  font-family: var(--gb-cond); font-weight: 700; font-size: 11.5px;
  letter-spacing: 2px; text-transform: uppercase; min-height: 46px;
}
/*
 * Written again at element+class specificity, because the theme styles bare
 * <button> and was winning: "Show all 12" rendered in the theme's pink
 * (#cc3366) at 16px instead of white at 11.5px — 4.2:1 on black, below AA,
 * and a colour that appears nowhere else in this campaign. Same trap the
 * vote button and the referral controls already fell into.
 */
.gb-cyp button.gb-cyp__more {
  background: transparent; color: var(--gb-ink);
  border: 1px solid #3a3a3a; border-radius: 0;
  font-family: var(--gb-cond); font-weight: 700; font-size: 11.5px;
  letter-spacing: 2px; text-transform: uppercase;
}
.gb-cyp button.gb-cyp__more:hover { border-color: var(--gb-accent); color: var(--gb-accent); }
.gb-cyp__more:focus-visible { outline: 3px solid var(--gb-accent); outline-offset: 2px; }

.gb-cyp__standing-note {
  font-family: var(--gb-serif); font-size: 14px; color: var(--gb-muted);
  margin: 12px 0 0; padding-top: 11px; border-top: 1px dashed #2a2a2a;
}
.gb-cyp__standing-note strong { color: var(--gb-wax, var(--gb-accent)); }

/* The theme pads inline links, which left a gap before the full stop. */
.gb-cyp a.gb-cyp__inline-link { padding: 0; margin: 0; }

/* Date now sits under the headline rather than in a masthead. */
.gb-cyp p.gb-cyp__range {
  font-family: var(--gb-cond);
  font-weight: 700; font-size: 12px; letter-spacing: 3.4px;
  text-transform: uppercase; color: var(--gb-accent);
  margin: 14px 0 0; text-align: center;
}
.gb-cyp__hero { padding-block: 40px 0; }

/* --- referrals: bring a friend ----------------------------------------- */

/*
 * Sits inside the "you are entered" panel, separated by a rule rather than a
 * second box. It is a continuation of the same thought — you have N entries,
 * here is how to get one more — not a new offer.
 */
.gb-cyp__refer {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gb-line);
}
.gb-cyp__refer h3 {
  font-family: var(--gb-display); font-size: 24px; line-height: 1.05;
  font-weight: 400; color: var(--gb-ink); margin: 0;
}
.gb-cyp .gb-cyp__refer p.gb-cyp__sub {
  font-family: var(--gb-serif); font-size: 15px; line-height: 1.5;
  color: var(--gb-muted); margin: 7px 0 14px; text-align: left;
}
.gb-cyp__refer .gb-cyp__sub strong { color: var(--gb-ink); }

/* ---------------------------------------------------------------- link box

   Its own panel rather than an icon in the share row above. The row posts a
   picture; this hands somebody a link, and a link wants to be read before it
   is pasted. The border and the tinted ground are what separate the two jobs
   visually, so neither reads as a continuation of the other. */
/* No border and no tint. The link belongs to the same panel as the invitation
   form above it, separated by the word "or" rather than boxed off from it —
   boxing it made two features out of one. */
.gb-cyp__sharelink { margin: 0; }

/* The "or" between sending an invitation and sharing a link. */
.gb-cyp .gb-cyp__or {
  margin: 18px 0 16px; text-align: center;
  font-family: var(--gb-cond); font-weight: 700;
  font-size: clamp(12px, .25vw + 11.2px, 14px);
  letter-spacing: 3px; text-transform: uppercase; color: var(--gb-ink);
}
.gb-cyp__sharelink label {
  display: block; font-weight: 700;
  font-size: clamp(10px, .25vw + 9.2px, 11.5px); letter-spacing: 2px;
  text-transform: uppercase; color: var(--gb-muted); margin-bottom: 6px;
}
.gb-cyp__sharelink-row { display: flex; gap: 8px; align-items: stretch; }

.gb-cyp .gb-cyp__sharelink-row input {
  flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 14px;
  background: #0d0d0d; color: var(--gb-ink);
  border: 1px solid #3a3a3a; border-radius: 0;
  font-family: var(--gb-serif); font-size: 16px; /* 16px stops iOS zooming on focus */
  box-sizing: border-box;
  /* The link is longer than the field on every phone. Ellipsis would hide the
     token, which is the part somebody proofreads before pasting. */
  text-overflow: ellipsis;
}
.gb-cyp .gb-cyp__sharelink-row input:focus-visible {
  outline: 3px solid var(--gb-accent); outline-offset: 2px; border-color: var(--gb-accent);
}
.gb-cyp .gb-cyp__sharelink-row button.gb-cyp__btn--copy {
  flex: 0 0 auto; width: auto; margin-top: 0; padding: 14px 20px;
  white-space: nowrap;
}

/* Narrow phones: the field and the button stop fighting over one line. */
@media (max-width: 400px) {
  .gb-cyp__sharelink-row { flex-direction: column; }
  .gb-cyp .gb-cyp__sharelink-row button.gb-cyp__btn--copy { width: 100%; }
}

/* The running count. Three facts, and the middle one is the one that pays. */
.gb-cyp p.gb-cyp__tally {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--gb-cond); font-weight: 700;
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gb-dim); margin: 0 0 14px;
  padding: 10px 12px; border: 1px dashed #2a2a2a;
}
.gb-cyp p.gb-cyp__tally strong { color: var(--gb-accent); }

.gb-cyp__field label span {
  font-weight: 400; letter-spacing: 1px; text-transform: none;
  color: var(--gb-muted); font-family: var(--gb-serif); font-size: 12.5px;
}

/*
 * "+ Add another" is a text control, not a second call to action. Written at
 * element+class specificity inside .gb-cyp because the theme styles bare
 * <button> and otherwise renders this as a bordered pink pill sitting directly
 * above the real submit button — two competing CTAs, one of them off-palette.
 */
.gb-cyp button.gb-cyp__addrow,
.gb-cyp .gb-cyp__form button.gb-cyp__addrow {
  display: inline-block; width: auto; min-height: 0;
  background: none; background-color: transparent;
  border: 0; border-radius: 0; box-shadow: none;
  padding: 6px 0 14px; margin: 0; cursor: pointer;
  font-family: var(--gb-cond); font-weight: 700; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gb-accent); text-decoration: underline; text-underline-offset: 4px;
}
.gb-cyp button.gb-cyp__addrow:hover { color: var(--gb-ink); }
.gb-cyp button.gb-cyp__addrow:focus-visible { outline: 3px solid var(--gb-accent); outline-offset: 2px; }
.gb-cyp button.gb-cyp__addrow[hidden] { display: none; }

.gb-cyp__form-ok {
  border-left: 3px solid #5f9464; background: #0b150c;
  padding: 11px 14px; margin: 4px 0 14px;
  font-family: var(--gb-serif); font-size: 14px; line-height: 1.45; color: #cfe3d1;
}

/*
 * Theme override guard, same reason as the vote button: the GB theme styles
 * bare form controls and would otherwise turn these into inline pills.
 */
.gb-cyp .gb-cyp__form--ref input[type="text"],
.gb-cyp .gb-cyp__form--ref input[type="email"] {
  width: 100%; display: block; min-height: 52px;
  background: #0d0d0d; color: var(--gb-ink);
  border: 1px solid #3a3a3a; border-radius: 0;
  font-family: var(--gb-serif); font-size: 16px; box-sizing: border-box;
}

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

/*
 * The line that does the work. Set in the display face between the headline
 * and the explanation, because it is the joke and it needs room to land —
 * dropped into the body copy it reads as just another sentence.
 */
.gb-cyp p.gb-cyp__tagline {
  font-family: var(--gb-display);
  font-size: clamp(21px, 3.4vw, 34px);
  line-height: 1.12; font-weight: 400; color: var(--gb-ink);
  /* 18em split this onto two balanced lines and broke it after "where",
     which is the hinge of the sentence. 26em lets it hold one line on a
     desktop and still wrap where it likes on anything narrower. */
  margin: 18px auto 0; max-width: 26em;
  text-wrap: balance; text-align: center;
}

/*
 * One phrase of admin copy.
 *
 * inline-block is doing the work: the browser will not break INSIDE one of
 * these while it fits, so a line break typed in the admin becomes a preferred
 * break point rather than a forced one. On a desktop they sit on one line; on
 * a phone they stack at the points somebody chose.
 */
.gb-cyp__phrase { display: inline-block; }

/* The second paragraph steps back: it is instruction, not proposition. */
.gb-cyp p.gb-cyp__lede--sm {
  font-size: clamp(14.5px, 1.8vw, 17px);
  color: var(--gb-muted);
  margin-top: 12px; max-width: 34em;
}

/*
 * The share row.
 *
 * One row of circular buttons — post it, copy it, download it — replacing two
 * download buttons, a rule, and three text buttons that between them took
 * more height than the standings.
 *
 * Solid white on the black ground, which is the inverse of the reference but
 * the same idea: the glyph carries the meaning and the label under it removes
 * the guesswork. Written at element+class specificity throughout because the
 * theme styles bare <button> and would otherwise make every one of these a
 * pink pill.
 */
/*
 * A grid with a stated number of columns, not a wrapping flex row.
 *
 * Flex wraps greedily: at 460px it put five buttons on one line and left
 * "Feed post" stranded underneath on its own, which reads as a mistake. Fixed
 * cell widths only moved the width at which that happens. Six columns, or
 * three when there is not room, is balanced at every width by construction
 * rather than by being tuned to one.
 */
.gb-cyp__sharerow {
  display: grid; grid-template-columns: repeat(5, 1fr);
  justify-items: center; gap: 18px 8px; margin: 22px 0 0;
}

.gb-cyp__sharecell {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: 100%; min-width: 0;
}

.gb-cyp .gb-cyp__sharecell button.gb-cyp__circle {
  width: 62px; height: 62px; padding: 0; margin: 0; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--gb-ink); color: #000;
  border: 0; border-radius: 50%; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
.gb-cyp .gb-cyp__sharecell button.gb-cyp__circle svg {
  width: 26px; height: 26px; display: block;
}
.gb-cyp .gb-cyp__sharecell button.gb-cyp__circle:hover {
  background: var(--gb-accent); color: #fff;
  transform: translateY(-2px);
}
.gb-cyp .gb-cyp__sharecell button.gb-cyp__circle:focus-visible {
  outline: 3px solid var(--gb-accent); outline-offset: 3px;
}
/* Disabled only while the artwork is still being fetched, so it reads as
   "not yet" rather than "not allowed". */
.gb-cyp .gb-cyp__sharecell button.gb-cyp__circle:disabled {
  opacity: .32; cursor: default; transform: none; background: var(--gb-ink);
}
.gb-cyp .gb-cyp__sharecell button.gb-cyp__circle.is-done {
  background: #5f9464; color: #fff;
}

.gb-cyp__sharelabel {
  font-family: var(--gb-cond); font-weight: 700;
  font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gb-muted); text-align: center; line-height: 1.25;
}

/* A label for a screen reader, since the glyph alone is not a name. */
.gb-cyp__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Below about 560px six columns squeeze the circles narrower than they are
   tall. Three and three instead. */
@media (max-width: 560px) {
  .gb-cyp__sharerow { grid-template-columns: repeat(3, 1fr); gap: 20px 8px; }
}

@media (max-width: 400px) {
  .gb-cyp .gb-cyp__sharecell button.gb-cyp__circle { width: 54px; height: 54px; }
  .gb-cyp .gb-cyp__sharecell button.gb-cyp__circle svg { width: 23px; height: 23px; }
  .gb-cyp__sharelabel { font-size: 10.5px; letter-spacing: .8px; }
}