/* ============================================================
   Worried About Henry · Plymouth Arena · Sat 17 Oct 2026
   Pre-sale sign-up.

   DESIGN NOTE - "left rail, mask breathes right".
   Both client backgrounds crop the terracotta medallion hard against
   the RIGHT edge. Every piece of UI therefore lives in a left rail and
   .hero reserves a right-hand gutter (--mask-zone) that nothing may
   cross, so the artwork's hero is never covered at any window width.

   The one ornament is the artwork's own outlined pill (PLYMOUTH ARENA /
   PLYMOUTH / WORRIEDABOUTHENRY.COM): outlined pills = secondary actions,
   one filled terracotta pill = the primary action, square corners =
   data entry. Nothing else is decorated.

   Palette + type colours are sampled straight from the supplied PNGs
   (#E58659 and #E4F0EC came back identical from all three).
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --ink:         #0D080A;   /* dominant background pixel, desktop plate   */
  --ink-deep:    #060305;
  --terracotta:  #E58659;   /* exact accent, all three artwork files      */
  --ember:       #A64F21;   /* deep accent, sampled from medallion shadow */
  --mint:        #E4F0EC;   /* exact type colour, line-up art            */
  --mint-dim:    rgba(228, 240, 236, 0.62);
  --mint-faint:  rgba(228, 240, 236, 0.42);
  --rule:        rgba(229, 134, 89, 0.30);  /* the pill outline stroke    */
  --rule-soft:   rgba(228, 240, 236, 0.14);
  --danger:      #FF9C7A;

  --display: "Anton", "Arial Narrow", sans-serif;
  --sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --panel-w:   468px;
  --mask-zone: 0px;         /* widened at the two-column breakpoint       */
  --pad-x:     clamp(18px, 5vw, 56px);
}

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

/* gotcha 16: html carries the base colour so body can stay transparent
   over the fixed .bg layer. An opaque body paints over z-index:-1. */
html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: transparent;
  color: var(--mint);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terracotta); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Background plate ---------- */
/* Client photography, unprocessed: resize only, no tone edits, no scrim
   and no blur (same art director as Cardiff, who removed both there). */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;   /* mobile: medallion sits top-right */
}

/* ---------- Stage ---------- */
.stage {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.hero {
  flex: 1 1 auto;
  display: grid;
  gap: clamp(16px, 2.6vw, 26px);
  align-content: start;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;                /* gotcha 10: auto at EVERY breakpoint */
  padding: clamp(24px, 4.5vw, 52px) var(--pad-x) clamp(28px, 4vw, 48px);
  padding-right: calc(var(--pad-x) + var(--mask-zone));
  grid-template-areas:
    "lockup"
    "lineup"
    "panel"
    "wahurl"
    "partners";
}

/* ---------- Title lockup ---------- */
.lockup { grid-area: lockup; }
.lockup img {
  width: min(100%, 620px);
  height: auto;
}

/* ---------- Line-up art ---------- */
.lineup { grid-area: lineup; }
.lineup img {
  width: min(66%, 240px);
  height: auto;
}

/* ---------- worriedabouthenry.com pill (client artwork) ---------- */
.wahurl {
  grid-area: wahurl;
  display: block;
  width: fit-content;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.wahurl img { width: min(72%, 260px); }
.wahurl:hover { opacity: 0.82; transform: translateY(-1px); }

/* ---------- Partner logos (client artwork) ---------- */
.partners { grid-area: partners; }
.partners img { width: min(86%, 320px); }

/* ============================================================
   PANEL - the sign-up card
   gotcha 5: isolate the stacking context and never lay an absolute
   frame over the children, or the country dropdown becomes unclickable.
   ============================================================ */
.panel {
  grid-area: panel;
  isolation: isolate;
  width: 100%;
  max-width: var(--panel-w);
  margin: 0 auto 0 0;
  padding: clamp(20px, 3.4vw, 30px);
  background: rgba(13, 8, 10, 0.90);   /* legibility without a blur */
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

/* State machine: exactly one wrapper visible. Each wrapper carries its
   own eyebrow + title + lede, or the idle copy shows through. */
.panel__idle, .panel__otp, .panel__success { display: none; }
.panel[data-form-state="idle"]    .panel__idle,
.panel[data-form-state="otp"]     .panel__otp,
.panel[data-form-state="success"] .panel__success { display: block; }

/* The signature: an outlined pill, straight off the artwork. */
.panel__eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 15px 5px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  line-height: 1.2;
}

.panel__title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 2.85rem);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;            /* gotcha 8: never nowrap a display title */
  color: var(--mint);
}
.panel__title em {
  display: block;
  font-style: normal;
  color: var(--terracotta);
}

.panel__lede {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mint-dim);
}
.panel__lede strong { color: var(--mint); font-weight: 600; }

/* gotcha 7: scope state paragraphs so they can't out-specify the eyebrow */
.panel__success p:not(.panel__eyebrow) {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mint-dim);
}
.panel__success-note {
  padding: 11px 14px;
  border-left: 2px solid var(--terracotta);
  background: rgba(229, 134, 89, 0.09);
  color: var(--mint) !important;
  font-size: 14px;
}

/* ============================================================
   FORM
   ============================================================ */
/* gotcha 2: display:none ONLY. Off-screen positioning gets autofilled by
   Chrome/Edge, which silently blocks real signups. */
.form__honeypot { display: none !important; }

.form__row { position: relative; margin-bottom: 14px; }

/* Labels are sr-only, not display:none - placeholders carry the meaning
   visually, labels stay for screen readers. */
.form__label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Square corners = data entry (pills are for actions). */
.form__input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 16px;               /* 16px min or iOS zooms on focus */
  line-height: 1.3;
  color: var(--mint);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  transition: border-color 0.18s ease, background 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.form__input::placeholder { color: var(--mint-faint); }
.form__input:hover { border-color: rgba(228, 240, 236, 0.26); }
.form__input:focus {
  outline: none;
  border-color: var(--terracotta);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(229, 134, 89, 0.16);
}
.form__input--otp {
  font-family: var(--display);
  font-size: 1.75rem;
  letter-spacing: 0.42em;
  text-align: center;
  padding: 14px 10px 12px;
  text-indent: 0.42em;           /* recentre against the trailing tracking */
}

.form__error {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--danger);
}
.form__error--global { margin-top: 12px; text-align: center; }

/* Consent tick */
.form__row--check { margin: 16px 0 20px; }
.form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mint-dim);
}
.form__check input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--terracotta);
  cursor: pointer;
  flex: none;
}
.form__check a { color: var(--terracotta); text-underline-offset: 2px; }

/* ---------- Buttons: the filled pill is the one solid moment ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  font-family: var(--sans);
  font-weight: 700;
  /* gotcha 26: shrink type before an uppercase tracked label can wrap */
  white-space: nowrap;
  font-size: clamp(0.8rem, 3.4vw, 0.94rem);
  letter-spacing: clamp(0.04em, 0.4vw, 0.1em);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn--primary {
  color: var(--ink);
  background: var(--terracotta);
  box-shadow: 0 8px 26px rgba(229, 134, 89, 0.24);
}
.btn--primary:hover:not(:disabled) {
  background: #F09A70;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(229, 134, 89, 0.34);
}
.btn:disabled { opacity: 0.62; cursor: progress; transform: none; }
.btn__arrow { font-size: 1.05em; line-height: 1; }

/* Outlined pill = secondary action (WhatsApp) */
.btn--ghost {
  color: var(--mint);
  background: transparent;
  border-color: var(--rule);
  margin-top: 12px;
}
.btn--ghost:hover { border-color: var(--terracotta); background: rgba(229, 134, 89, 0.09); }
.btn--ghost svg { width: 17px; height: 17px; flex: none; }

.form__resend {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--mint-faint);
}
.form__resend-btn {
  padding: 4px 12px 3px;
  font: inherit;
  font-weight: 600;
  color: var(--terracotta);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
}
.form__resend-btn:hover:not(:disabled) { background: rgba(229, 134, 89, 0.1); }
.form__resend-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- App download block ---------- */
.appcta {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
}
.appcta__hook {
  margin: 0 0 7px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.16rem;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--mint);
}
.appcta__hook em { font-style: normal; color: var(--terracotta); }
.appcta__copy {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mint-dim);
}
.appcta__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.appcta__badge { display: block; transition: opacity 0.2s ease, transform 0.2s ease; }
.appcta__badge img { height: 40px; width: auto; }
.appcta__badge:hover { opacity: 0.85; transform: translateY(-1px); }

/* ============================================================
   FOOTER - full-width bar (basslayerz pattern)
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px var(--pad-x) 26px;
  background: rgba(6, 3, 5, 0.62);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.foot__left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot__legal {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--mint-faint);
}
.foot__legal a { color: var(--mint-faint); text-decoration: none; }
.foot__legal a:hover { color: var(--terracotta); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mint-faint);
  text-decoration: none;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--terracotta); color: var(--mint); }
.site-built img { display: block; opacity: 0.9; }

/* ============================================================
   INTL-TEL-INPUT v25 - dropdown + search box
   ============================================================ */
.iti { width: 100%; display: block; }
.iti__tel-input, .iti input[type="tel"] { width: 100%; }

/* gotcha 19: until the vendor stylesheet lands the list paints open */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti--separate-dial-code .iti__selected-country,
.iti__selected-country {
  background: transparent;
  border-radius: 6px 0 0 6px;
}
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(255, 255, 255, 0.05); }
.iti__selected-dial-code { color: var(--mint); font-size: 15px; }
.iti__arrow { border-top-color: var(--mint-faint); }
.iti__arrow--up { border-bottom-color: var(--mint-faint); }

.iti__dropdown-content {
  background: #140E11;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.iti__search-input {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--mint);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
}
.iti__search-input::placeholder { color: var(--mint-faint); }
.iti__search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-bottom-color: var(--terracotta);
}
.iti__country-list {
  max-height: 248px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.iti__country-list::-webkit-scrollbar { width: 8px; }
.iti__country-list::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 999px;
}
.iti__country {
  padding: 9px 14px;
  font-size: 14px;
  color: var(--mint-dim);
}
.iti__country.iti__highlight,
.iti__country:hover {
  background: rgba(229, 134, 89, 0.14);
  color: var(--mint);
}
.iti__country-name { color: inherit; }
.iti__dial-code { color: var(--mint-faint); }
.iti__divider { border-bottom-color: var(--rule-soft); }

/* ============================================================
   LEGAL PAGE
   ============================================================ */
.legal-wrap { background: var(--ink); }
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 56px) var(--pad-x) 72px;
}
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--mint);
  text-decoration: none;
  font-size: 12.5px;
}
.legal__back:hover { background: rgba(229, 134, 89, 0.1); }
.legal__back-arrow { display: flex; width: 15px; height: 15px; color: var(--terracotta); }
.legal__back-arrow svg { width: 100%; height: 100%; }
.legal__back-label { display: inline-flex; gap: 5px; }
.legal__back-text { color: var(--mint-faint); }
.legal__back-brand { font-weight: 700; letter-spacing: 0.02em; }
.legal h1 {
  margin: 0 0 26px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--terracotta);
}
.legal h2 {
  margin: 30px 0 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.legal p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--mint-dim);
}
.legal strong { color: var(--mint); }
.legal__meta {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  font-size: 12.5px;
  color: var(--mint-faint);
}

/* ============================================================
   RESPONSIVE
   gotcha 20: use an aspect-ratio threshold, not width alone, or
   squarish desktop windows fall in a gap between treatments.
   ============================================================ */
/* Two-column needs panel(360) + lineup(200) + gap(26) = 586px of content,
   PLUS the reserved medallion gutter and page padding. At 1100x900 the real
   gutter is ~363px, leaving 649px for a layout needing ~714px, so the panel
   still collapsed. Threshold is 1250px; below it the stacked flow runs
   instead (gotcha 20: no window may fall between two treatments). */
@media (min-width: 1250px) and (min-aspect-ratio: 7/10) {
  /* The medallion starts at 71.7% of the desktop plate's width (measured),
     so it always eats the right 28.3% of the RENDERED image. With
     object-fit:cover the rendered width is max(viewport width, viewport
     height x 1.424) — hence max(30vw, 43vh) rather than a vw clamp, which
     undershoots on squarish windows where the plate is cropped sideways. */
  :root {
    --mask-zone: max(30vw, 43vh);
    --pad-x: clamp(24px, 4vw, 120px);
  }

  /* --mask-zone is viewport-relative because the medallion is positioned
     against the VIEWPORT. So .hero must span the viewport too: capping it
     at 1560px and centring it meant a 2880px screen still reserved an
     864px gutter inside a 1560px box, leaving ~584px for a layout needing
     ~900px and collapsing the panel to a sliver. Anchor left instead —
     which is the "left rail" idea anyway — and let the gutter line up
     with where the medallion really is. */
  .hero { max-width: none; margin: 0; }

  .bg img { object-position: right center; }  /* desktop: medallion right */

  .hero {
    align-content: center;
    column-gap: clamp(26px, 3.6vw, 54px);
    grid-template-columns: minmax(220px, 340px) minmax(0, var(--panel-w));
    grid-template-areas:
      "lockup   lockup"
      "lineup   panel"
      "wahurl   panel"
      "partners partners";
    justify-content: start;
  }
  .lockup   { margin-bottom: clamp(6px, 1.4vw, 18px); }
  .lockup img { width: min(100%, 760px); }
  .lineup   { align-self: start; }
  .lineup img { width: min(100%, 300px); }
  .wahurl   { align-self: start; }
  .wahurl img { width: min(100%, 250px); }
  .partners { margin-top: clamp(8px, 1.6vw, 20px); }
  .partners img { width: min(100%, 300px); }
  .panel    { margin: 0; align-self: start; }
}

@media (min-width: 1280px) and (min-aspect-ratio: 7/10) {
  .hero { grid-template-columns: minmax(260px, 380px) minmax(0, var(--panel-w)); }
  .lockup img { width: min(100%, 860px); }
}

/* Landscape phones (gotcha 27): desktop-ish aspect, almost no height.
   Placed AFTER the desktop blocks so it wins at equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 560px) {
  /* Trimmed to the medallion's real bright core rather than its glow: at
     844x390 the plate scales by width, so the core starts at 71.7% = 605px
     and 24vw = 202px lands the panel's right edge just short of it. The
     earlier 32vw was over-reserved and stole the width that the line-up
     needs to stay legible. */
  :root { --mask-zone: max(24vw, 36vh); }

  .bg img { object-position: right center; }

  .hero {
    align-content: start;
    align-items: start;
    min-height: 0;
    row-gap: 10px;
    column-gap: clamp(14px, 2.2vw, 26px);
    padding-top: 16px;
    padding-bottom: 16px;
    grid-template-columns: minmax(150px, 200px) minmax(0, 360px);
    grid-template-areas:
      "lockup   lockup"
      "lineup   panel"
      "wahurl   panel"
      "partners panel";
  }
  .lockup { margin-bottom: 2px; min-height: 0; }  /* never inherit the portrait medallion reserve */
  .lockup img   { width: min(100%, 540px); }
  .lineup img   { width: min(100%, 200px); }   /* no max-height: it crushed a portrait image to ~91px wide */
  .wahurl img   { width: min(100%, 190px); }
  .partners     { margin-top: 6px; }
  .partners img { width: min(100%, 210px); }

  /* A rotated phone has ~390px of height and the full idle panel needs
     ~490px, which buried the CTA below the fold. Everything below is about
     getting eyebrow -> title -> email -> phone -> consent -> button into
     one screen. The idle lede goes entirely: in this layout the lockup
     already states the event, date and venue and the line-up sits directly
     beside the panel, so it was the one genuinely redundant block. It is
     kept in the OTP and success states, where it carries instructions. */
  .panel { padding: 14px 16px; }
  .panel__eyebrow { margin-bottom: 8px; padding: 5px 12px 4px; font-size: 10px; }
  /* line-height 0.94 is fine at 2.85rem but collides at 1.3rem */
  .panel__title { font-size: 1.3rem; line-height: 1.04; margin-bottom: 10px; }
  .panel__idle .panel__lede { display: none; }
  .panel__otp .panel__lede,
  .panel__success p:not(.panel__eyebrow) { margin-bottom: 12px; font-size: 12.5px; }

  .form__row { margin-bottom: 10px; }
  .form__input { padding: 10px 12px; }
  .form__row--check { margin: 10px 0 11px; }
  .form__check { font-size: 11.5px; line-height: 1.45; }
  .btn { padding: 11px 18px; }

  .appcta { margin-top: 14px; padding-top: 12px; }
  .appcta__badge img { height: 34px; }
  .foot { padding-top: 12px; padding-bottom: 14px; }
}

/* Portrait phones */
@media (max-width: 899px) {
  .hero { justify-items: start; }
  .panel { margin: 4px auto 0 0; }   /* gotcha 10: keep auto in the mix */

  /* The client's mobile plate is 2160x5185 and puts the medallion across
     the upper band: rows 14.3%-50.1%, cols 46.3%-100% (measured), so on a
     phone the line-up does sit over the medallion's left flank.
     An earlier build reserved that band (min-height on .lockup) to clear
     it. Adam read the result as "huge empty space, line up in wrong place"
     and it pushed the line-up below the fold, so the reserve is gone by
     decision: the line-up sits directly under the lockup and the medallion
     stays a backdrop behind it. Do not reintroduce it. */
}
@media (max-width: 560px) {
  /* Line-up deliberately small on phones: it is a tall block and every
     pixel it gives back is a pixel of the sign-up box above the fold. */
  .hero         { gap: clamp(12px, 2.4vw, 18px); }
  .lineup img   { width: min(62%, 205px); }
  .wahurl img   { width: min(58%, 185px); }
  .partners img { width: min(68%, 215px); }
  .appcta__badge img { height: 36px; }
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.iti__selected-country:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}