@charset "utf-8";

/* ===========================================================================
   Golden Experience prize draw — Coca-Cola Europacific Partners
   ---------------------------------------------------------------------------
   Mobile-first. The artwork is designed at 390px; the layout holds that as a
   maximum column width and centres it on anything wider, which is how the
   promotion is intended to be seen.

   Structure
     1. Fonts
     2. Tokens
     3. Reset and base
     4. Utilities
     5. Ticket and panel chrome (the shared "gold ticket" treatment)
     6. Blocks: hero, ticket, entry form, prizes, footer
     7. Preferences: reduced motion, forced colours
   ========================================================================= */

/* ----------------------------------------------------------------- 1. fonts
   Self-hosted, so no request leaves the origin. WOFF is generated from the
   supplied TrueType files by tools/compress-fonts.rb and is roughly half the
   size; the sources live in assets-src/fonts and are not served.

   There is deliberately no TrueType fallback. WOFF has been supported since
   IE9, so a fallback covers nothing anyone still uses — and listing both
   makes Chrome fetch both, which costs 365KB to help no one.

   docs/fonts.md has the WOFF2 step to run on a build box with Brotli, which
   would take roughly another third off again.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("/assets/fonts/BebasNeue-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bebas Neue";
  src: url("/assets/fonts/BebasNeue-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TCCC Unity Text";
  src: url("/assets/fonts/TCCCUnityText-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TCCC Unity Text";
  src: url("/assets/fonts/TCCCUnityText-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- 2. tokens */
:root {
  /* Sampled from the supplied artwork. */
  --cream: #f4efe8;
  --ink: #111111;
  --ink-soft: #4a4a4a;
  --white: #ffffff;

  --gold-deep: #c08f2e;
  --gold-mid: #dfae4c;
  --gold-bright: #fbd475;
  --gold-pale: #f8e6ae;

  --error: #b3261e;
  --success: #1c6b3a;

  --font-display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-text: "TCCC Unity Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* The artwork is drawn at 390px; everything scales from that. */
  --page-width: 390px;
  --gutter: 16px;
  /* The artwork insets the foil panels this far at its 390px design width.
     Expressed relatively so narrow phones do not lose the content to margins. */
  --panel-inset: clamp(18px, 8.7vw, 34px);

  --radius-sm: 2px;
  --notch: 14px;

  --shadow-panel: 0 10px 18px rgb(0 0 0 / 18%);
}


/* -------------------------------------------------------- 3. reset and base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  position: relative;
  margin: 0;
  background-color: var(--cream);
  background-image: url("/assets/img/decor/paper-texture.jpg");
  background-image: image-set(
    url("/assets/img/decor/paper-texture.webp") type("image/webp"),
    url("/assets/img/decor/paper-texture.jpg") type("image/jpeg")
  );
  background-size: 200px;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.45;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid #1a66ff;
  outline-offset: 2px;
}

#main {
  position: relative;
  z-index: 1;
  max-width: var(--page-width);
  margin-inline: auto;
}

/* The confetti layer. Purely decorative, so it sits behind everything and is
   hidden from assistive technology. It is sized to the design column and
   tiles down the page, which keeps it in proportion however tall the content
   turns out to be. */
.decor {
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: 0;
  width: var(--page-width);
  transform: translateX(-50%);
  background-image: url("/assets/img/decor/confetti.png");
  background-image: image-set(
    url("/assets/img/decor/confetti.webp") type("image/webp"),
    url("/assets/img/decor/confetti.png") type("image/png")
  );
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  pointer-events: none;
}

/* ------------------------------------------------------------ 4. utilities */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The spam trap. Kept off screen rather than display:none, because
   display:none is the first thing a form-filling bot learns to skip. */
.no-fill {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 10;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

/* --------------------------------------------- 5. ticket and panel chrome
   Both gold surfaces share: a foil fill, a semicircular notch bitten out of
   each side, a perforation line near the top and bottom edges, and a heavy
   black keyline around the content.
   -------------------------------------------------------------------------- */
.gold-surface {
  position: relative;
  background-color: var(--gold-mid);
  background-image:
    repeating-linear-gradient(
      90deg,
      rgb(255 255 255 / 16%) 0 3px,
      rgb(255 255 255 / 0%) 3px 7px,
      rgb(120 80 10 / 8%) 7px 11px,
      rgb(255 255 255 / 0%) 11px 15px
    ),
    linear-gradient(
      100deg,
      var(--gold-deep) 0%,
      var(--gold-bright) 14%,
      var(--gold-mid) 30%,
      var(--gold-pale) 46%,
      var(--gold-mid) 62%,
      var(--gold-bright) 80%,
      var(--gold-deep) 100%
    );

  /* Bite a notch out of each side. Two radial gradients punch the holes; the
     linear gradient keeps everything else opaque. */
  --notch-mask:
    radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000 100%),
    radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000 100%);
  -webkit-mask-image: var(--notch-mask);
  mask-image: var(--notch-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* The perforation rows sit inside the foil, top and bottom. */
.gold-surface::before,
.gold-surface::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  height: 3px;
  background-image: radial-gradient(circle closest-side, var(--ink) 98%, transparent 100%);
  background-size: 9px 3px;
  background-repeat: repeat-x;
}

.gold-surface::before {
  top: 9px;
}

.gold-surface::after {
  bottom: 9px;
}

/* ------------------------------------------------------------ 6a. hero */
.hero__image {
  width: 100%;
}

/* ---------------------------------------------------------- 6b. ticket */
.ticket {
  margin: -1px 8px 0; /* close the hairline between the hero art and the foil */
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / 22%));
}

.ticket__frame {
  padding: 20px 12px;
}

.ticket__rule {
  border: 3px solid var(--ink);
  border-bottom: 0;
  padding: 10px 10px 0;
}

.ticket__title {
  margin: 8px 0 0;
  padding-block: 8px 10px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
}

.ticket__title-lead {
  display: block;
  font-size: 25px;
}

.ticket__title-main {
  display: block;
  font-size: 42px;
}

.ticket__thanks {
  border: 3px solid var(--ink);
  border-top: 0;
  padding: 9px 10px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

/* ------------------------------------------------------ 6c. entry panel */
.panel {
  margin: 22px var(--panel-inset) 0;
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / 20%));
}

.panel__frame {
  padding: 18px 12px;
}

.panel__title {
  padding: 13px 8px 14px;
  border-top: 3px solid var(--ink);
  border-inline: 3px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.entry-form {
  padding: 0 8px 12px;
  border-bottom: 3px solid var(--ink);
  border-inline: 3px solid var(--ink);
}

/* -------------------------------------------------------------- 6d. fields */
.field {
  margin-bottom: 8px;
}

.field__label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 2px;
}

.field__input {
  width: 100%;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #8a7440;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming the viewport on focus */
  line-height: 1.2;
}

.field__input::placeholder {
  color: #767676;
}

.field__input--select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 14px center, right 8px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.field__input[aria-invalid="true"] {
  border: 2px solid var(--error);
}

.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 7px;
  align-items: start;
  margin: 12px 0 14px;
}

.field__checkbox {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--ink);
  flex: none;
}

.field__check-label {
  font-size: 12px;
  line-height: 1.3;
}

.field__check-label a {
  font-weight: 700;
}

.field--check .field__error {
  grid-column: 1 / -1;
}

.field__error {
  margin-top: 4px;
  padding: 2px 5px;
  background: var(--error);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

.button {
  display: block;
  margin: 0 auto;
  padding: 9px 30px;
  border: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
}

.button:hover {
  background: #2c2c2c;
}

.button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.entry-form__status {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
}

.entry-form__status:empty {
  display: none;
}

.entry-form__status[data-state="error"] {
  padding: 8px 10px;
  background: var(--error);
  color: var(--white);
}

.entry-form__status[data-state="success"] {
  padding: 8px 10px;
  background: var(--success);
  color: var(--white);
}

.entry-form__noscript {
  margin-top: 10px;
  font-size: 12px;
}

/* ------------------------------------------------------------- 6e. prizes */
.prizes {
  margin: 26px var(--panel-inset) 0;
}

.prizes__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 5.6vw, 22px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The rules either side of the heading. */
.prizes__title::before,
.prizes__title::after {
  content: "";
  flex: 1;
  height: 3px;
  background: var(--ink);
}

.prizes__list {
  display: grid;
  gap: 22px;
  margin-top: 18px;
}

.prize {
  background: linear-gradient(
    100deg,
    var(--gold-deep) 0%,
    var(--gold-bright) 18%,
    var(--gold-mid) 38%,
    var(--gold-pale) 52%,
    var(--gold-mid) 68%,
    var(--gold-bright) 84%,
    var(--gold-deep) 100%
  );
  padding: 5px 5px 9px;
  box-shadow: var(--shadow-panel);
}

.prize__image {
  width: 100%;
  aspect-ratio: 800 / 450;
  object-fit: cover;
}

.prize__name {
  margin-top: 8px;
  border: 3px solid var(--ink);
  padding: 7px 8px 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- 6f. footer */
.footer {
  position: relative;
  z-index: 1;
  margin-top: 30px;
  color: #000000;
}

.footer__wave {
  display: block;
  width: 100%;
  height: 34px;
}

.footer__body {
  background: #000000;
  color: var(--white);
  padding: 4px var(--gutter) 30px;
  text-align: center;
}

.footer__logo {
  width: 190px;
  height: auto;
  margin: 0 auto;
}

.footer__drinkaware picture,
.footer__body > picture {
  display: contents;
}

.footer__responsibly {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer__drinkaware {
  display: block;
  width: 130px;
  margin: 6px auto 0;
}

.footer__links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
  font-size: 12px;
}

.footer__trademarks {
  margin-top: 16px;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #d8d8d8;
}

/* --------------------------------------------------------- 7. preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* In forced-colours mode the foil and keylines disappear; give the structure
   back with system colours so the page still reads as a set of panels. */
@media (forced-colors: active) {
  .ticket__frame,
  .panel__frame,
  .prize {
    border: 1px solid CanvasText;
    background: Canvas;
    forced-color-adjust: none;
  }

  .button {
    border: 1px solid ButtonText;
  }
}

/* The confirmation that replaces the form after a successful entry. */
.entry-form__confirmation {
  padding: 22px 16px 26px;
  border-bottom: 3px solid var(--ink);
  border-inline: 3px solid var(--ink);
  text-align: center;
}

.entry-form__preview-note {
  margin-top: 12px;
  padding: 8px 10px;
  border: 2px dashed var(--ink);
  background: rgb(255 255 255 / 45%);
  font-size: 12px;
  line-height: 1.35;
}

.entry-form__confirmation-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ------------------------------------------------------- 8. content pages
   Terms, privacy and the confirmation page share a plain reading layout on
   the same cream stock as the promotion. */
.page {
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 26px var(--gutter) 40px;
}

.page__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.page h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 22px 0 6px;
}

.page p,
.page li {
  font-size: 14px;
  margin-bottom: 10px;
}

.page ul {
  list-style: disc;
  padding-left: 20px;
}

.page__back {
  display: inline-block;
  margin-top: 20px;
  font-weight: 700;
  font-size: 14px;
}

.page__placeholder {
  border: 2px dashed var(--ink);
  padding: 12px 14px;
  font-size: 13px;
  background: rgb(255 255 255 / 45%);
}