/* ========================================================================
   The Levellers — 2026 Hometown Exclusive
   Flyposter / zine-wall signup page
   ======================================================================== */

:root {
  /* colour - lifted from the poster itself */
  --mustard: #e8a21a;
  --mustard-deep: #c87f11;
  --mustard-dark: #3a2408;
  --ink: #141310;
  --ink-soft: #24221e;
  --paper: #f1e4c7;
  --paper-shade: #d8c8a4;
  --blood: #c8301f;
  --pine: #1f6c3c;
  --cobalt: #1a5ab0;
  --tape: #f4e6a8;

  /* fonts */
  --hand: "Sunflower", "Rubik Mono One", system-ui, sans-serif;
  --type: "Special Elite", ui-monospace, "Courier New", monospace;
  --display: "Rubik Mono One", "Sunflower", sans-serif;

  /* rhythm */
  --gutter: clamp(1rem, 4vw, 3rem);
}

/* base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--type);
  color: var(--paper);
  line-height: 1.4;
  background: var(--ink);
  overflow-x: hidden;
  /* tar-paper plywood wall */
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(232,162,26,0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 85%, rgba(200,48,31,0.06) 0%, transparent 50%),
    repeating-linear-gradient(
      92deg,
      rgba(255,255,255,0.015) 0 2px,
      transparent 2px 9px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.25) 0 1px,
      transparent 1px 140px
    ),
    linear-gradient(180deg, #1a1814 0%, #0e0d0b 100%);
  min-height: 100vh;
  width: 100%;
}

a { color: var(--mustard); text-decoration: underline wavy rgba(232,162,26,0.4); text-underline-offset: 3px; }
a:hover { color: var(--paper); }

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

/* grain overlay --------------------------------------------------------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.9  0 0 0 0 0.8  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* wall layout ----------------------------------------------------------- */
.wall {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter) 6rem;
}

/* scrawl ticker — full viewport ---------------------------------------- */
.scrawl {
  width: 100%;
  padding: 0.7rem 0;
  background: var(--mustard);
  color: var(--ink);
  border-bottom: 3px solid var(--ink);
  font-family: var(--type);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  overflow: hidden;
  white-space: nowrap;
  text-transform: uppercase;
  position: relative;
}
.scrawl span {
  display: inline-block;
  animation: ticker 42s linear infinite;
  padding-left: 100%;
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* hero — split: poster | slip ------------------------------------------ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem);
  position: relative;
}
@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 5vw, 3rem);
    justify-items: center;
  }
}

/* the flyposter --------------------------------------------------------- */
.poster {
  position: relative;
  margin: 0;
  justify-self: center;
  align-self: center;
  min-width: 0;
  width: min(100%, 540px);
  transform: rotate(-1.8deg);
  transition: transform 700ms cubic-bezier(0.2, 0.9, 0.2, 1);
  filter: drop-shadow(12px 18px 0 rgba(0,0,0,0.55))
          drop-shadow(0 30px 40px rgba(0,0,0,0.55));
  animation: drop-in 900ms cubic-bezier(0.2, 1.2, 0.3, 1) both;
  cursor: grab;
  z-index: 2;
}
.poster:hover {
  transform: rotate(-0.6deg) translateY(-6px);
}
@media (max-width: 1080px) {
  .poster { margin: 0 auto; width: min(100%, 460px); }
}

.poster__img {
  width: 100%;
  display: block;
  /* paper feel via subtle inner shadow on the png canvas */
}

@keyframes drop-in {
  0%   { transform: translateY(-40vh) rotate(-18deg); opacity: 0; }
  70%  { transform: translateY(10px) rotate(-3deg); opacity: 1; }
  100% { transform: translateY(0) rotate(-1.8deg); }
}

/* masking tape corners */
.tape {
  position: absolute;
  width: 84px; height: 22px;
  background: var(--tape);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(0,0,0,0.06));
  box-shadow: 0 3px 6px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.08);
  opacity: 0.85;
  z-index: 3;
}
.tape::before, .tape::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 6px;
  background: inherit;
}
.tape::before { left: -3px; clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%); }
.tape::after  { right: -3px; clip-path: polygon(0 0, 40% 0, 60% 100%, 0 100%); }

.tape--tl { top: -10px; left: -14px; transform: rotate(-28deg); }
.tape--tr { top: -8px;  right: -18px; transform: rotate(22deg); }
.tape--bl { bottom: -12px; left: -10px; transform: rotate(18deg); }
.tape--br { bottom: -14px; right: -14px; transform: rotate(-24deg); }

/* punk sticker — the isolated Levellers badge --------------------------- */
.sticker {
  position: absolute;
  right: -28px;
  bottom: -38px;
  width: clamp(90px, 12vw, 140px);
  transform: rotate(12deg);
  z-index: 4;
  filter: drop-shadow(4px 6px 0 rgba(0,0,0,0.45));
  animation: sticker-in 700ms 500ms cubic-bezier(0.2, 1.4, 0.3, 1) both;
  pointer-events: none;
}
.sticker img { width: 100%; }
@keyframes sticker-in {
  0%   { transform: rotate(60deg) scale(0.2); opacity: 0; }
  60%  { transform: rotate(8deg) scale(1.08); opacity: 1; }
  100% { transform: rotate(12deg) scale(1); }
}

/* ========================================================================
   signup slip — side panel attached to the poster
   ======================================================================== */

.slip {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.8rem, 3.5vw, 2.8rem) clamp(1.4rem, 3vw, 2.4rem) clamp(2rem, 3.5vw, 2.8rem);
  margin: 0;
  align-self: center;
  justify-self: center;
  width: 100%;
  min-width: 0;
  max-width: 560px;
  /* torn left edge — as if ripped off the poster.
     perforated top+bottom edges too for a paper-scrap feel. */
  clip-path: polygon(
    /* top edge (mildly torn) */
    0 2%, 3% 0, 8% 2%, 14% 0, 22% 2%, 30% 0, 38% 2%, 46% 0,
    54% 2%, 62% 0, 70% 2%, 78% 0, 86% 2%, 94% 0, 99.5% 1.5%,
    /* right edge (gently uneven) */
    99% 10%, 99.6% 18%, 99% 26%, 99.7% 34%, 99% 42%, 99.6% 50%,
    99% 58%, 99.6% 66%, 99% 74%, 99.6% 82%, 99% 90%, 99.5% 98%,
    /* bottom edge (mildly torn) */
    96% 100%, 90% 98%, 84% 100%, 78% 98%, 72% 100%, 66% 98%, 60% 100%,
    54% 98%, 48% 100%, 42% 98%, 36% 100%, 30% 98%, 24% 100%, 18% 98%,
    12% 100%, 6% 98%, 0 100%,
    /* left edge (torn — slightly jagged) */
    2% 94%, 0 88%, 3% 82%, 1% 76%, 3% 70%, 0 64%, 2% 58%,
    0 52%, 3% 46%, 1% 40%, 3% 34%, 0 28%, 2% 22%, 0 16%, 3% 10%
  );
  box-shadow: 0 30px 50px -20px rgba(0,0,0,0.6);
  background-image:
    radial-gradient(ellipse at 0 0, rgba(152,119,55,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(152,119,55,0.16) 0%, transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.6  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    var(--paper);
  z-index: 1;
}
@media (max-width: 1080px) {
  .slip {
    margin: 0;
    width: 100%;
    max-width: 560px;
  }
}
@media (max-width: 560px) {
  .slip {
    padding: 1.5rem 1.2rem 1.8rem;
  }
}

.slip__head {
  grid-column: 1 / -1;
  text-align: center;
  max-width: 560px;
  margin: 0 auto 1rem;
  position: relative;
}

.slip__stamp {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  padding: 0.45rem 1rem 0.4rem;
  color: var(--blood);
  border: 3px solid var(--blood);
  border-radius: 2px;
  background: transparent;
  transform: rotate(-4deg);
  margin-bottom: 1.2rem;
  opacity: 0.88;
  /* stamped imperfection */
  box-shadow: inset 0 0 20px rgba(200,48,31,0.25);
}

.slip__title {
  font-family: var(--type);
  font-weight: 700; /* Special Elite is single-weight; browser synthesises faux-bold */
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.05;
  margin: 0 0 0.8rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.slip__lede {
  font-family: var(--type);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-soft);
}

/* form ------------------------------------------------------------------ */
.slip__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem 1.4rem;
  max-width: 620px;
  min-width: 0;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 560px) {
  .slip__form { grid-template-columns: minmax(0, 1fr); }
}

.field { display: flex; flex-direction: column; }
.field--wide { grid-column: 1 / -1; }

.field label {
  font-family: var(--type);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 0.35rem;
  color: var(--ink-soft);
}
.field .hint {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
  font-size: 0.85em;
}

.field input {
  font-family: var(--type);
  font-size: 1.05rem;
  padding: 0.7rem 0.2rem 0.5rem;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 2px dashed var(--ink);
  outline: none;
  transition: border-color 200ms, background 200ms;
  border-radius: 0;
  -webkit-appearance: none;
}
.field input::placeholder {
  color: rgba(20,19,16,0.35);
  font-style: italic;
}
.field input:focus {
  border-bottom-color: var(--blood);
  background: rgba(200,48,31,0.05);
}
.field input:invalid:not(:placeholder-shown) {
  border-bottom-color: var(--blood);
}

/* consent checkbox ------------------------------------------------------ */
.consent { grid-column: 1 / -1; margin-top: 0.4rem; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-family: var(--type);
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--ink-soft);
  line-height: 1.5;
}
.check input {
  position: absolute;
  opacity: 0; pointer-events: none;
}
.check__box {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  font-size: 18px;
  line-height: 1;
  color: transparent;
  background: transparent;
  margin-top: 2px;
  transition: color 150ms, background 150ms;
}
.check input:checked + .check__box {
  color: var(--blood);
  background: rgba(200,48,31,0.1);
}
.check input:focus-visible + .check__box {
  outline: 3px solid var(--mustard);
  outline-offset: 2px;
}
.check a { color: var(--blood); text-decoration: underline; }

/* submit button — rubber stamp ----------------------------------------- */
.btn {
  grid-column: 1 / -1;
  position: relative;
  margin-top: 0.8rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--type);
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--paper);
  text-transform: uppercase;
  justify-self: center;
  width: auto;
  max-width: 100%;
  isolation: isolate;
  transition: transform 80ms ease;
}
.btn__face,
.btn__back {
  display: block;
  padding: 1.1rem 2.2rem;
  border: 3px solid var(--ink);
  white-space: normal;
  word-break: break-word;
}
.btn__face {
  position: relative;
  z-index: 2;
  background: var(--blood);
  color: var(--paper);
  transform: translate(-4px, -4px);
  transition: transform 120ms ease;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.btn__back {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ink);
  color: var(--ink); /* hidden */
}
.btn:hover .btn__face { transform: translate(-6px, -6px); }
.btn:active .btn__face { transform: translate(0, 0); }
.btn:focus-visible { outline: 3px solid var(--mustard); outline-offset: 4px; }

.slip__note {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0.8rem 0 0;
  font-family: var(--type);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgba(20,19,16,0.55);
  text-transform: uppercase;
}

/* OTP step -------------------------------------------------------------- */
[hidden] { display: none !important; }
.slip__otp { padding-top: 0.4rem; }
.field--otp input {
  font-family: var(--display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing: 0.3em;
  text-align: center;
  padding: 0.6rem 0.2rem;
  color: var(--blood);
}
.slip__resend {
  grid-column: 1 / -1;
  text-align: center;
  margin: 1rem 0 0;
  font-family: var(--type);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.linkish {
  background: 0; border: 0; padding: 0;
  font: inherit;
  color: var(--blood);
  text-decoration: underline;
  cursor: pointer;
}
.linkish:disabled { color: rgba(20,19,16,0.4); cursor: default; }
.linkish:hover:not(:disabled) { color: var(--ink); }

/* done state ------------------------------------------------------------ */
.slip__done {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 1rem 0;
  animation: done-in 500ms cubic-bezier(0.2, 1, 0.2, 1);
}
.slip__stamp--done {
  color: var(--pine);
  border-color: var(--pine);
  box-shadow: inset 0 0 20px rgba(31,108,60,0.25);
  transform: rotate(3deg);
}
.slip__done h3 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3rem);
  margin: 0.5rem 0 1rem;
  color: var(--ink);
}
.slip__done p {
  font-family: var(--type);
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0;
}
@keyframes done-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* WhatsApp CTA on the done state --------------------------------------- */
.slip__wa-lede {
  margin-top: 1.4rem !important;
  font-family: var(--type);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.btn--wa {
  display: inline-block;
  margin-top: 0.6rem;
  text-decoration: none;
}
.btn--wa .btn__face {
  background: var(--pine);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.btn--wa .btn__wa-icon {
  width: 1.4em;
  height: 1.4em;
  flex: 0 0 auto;
}

/* on-sale state — slip used as a box-office stub ----------------------- */
.slip__sale {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.1rem;
  max-width: 460px;
  margin: 0 auto;
}
.slip__stamp--onsale {
  color: var(--pine);
  border-color: var(--pine);
  box-shadow: inset 0 0 22px rgba(31,108,60,0.28);
  transform: rotate(-3deg);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
}
.slip__sale .btn {
  grid-column: auto;
  margin-top: 0;
  width: 100%;
  justify-self: stretch;
}
.slip__sale .btn__face,
.slip__sale .btn__back {
  text-align: center;
  padding: 1rem 1.4rem;
}
.btn--alt .btn__face {
  background: var(--cobalt);
}
.tix-vendor {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  opacity: 0.78;
  margin-bottom: 0.2rem;
  font-weight: 400;
}
.tix-fee {
  margin: 0.3rem 0 0;
  text-align: center;
  font-family: var(--type);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(20,19,16,0.55);
  text-transform: uppercase;
}

/* meta strip — supplementary text row under the hero ------------------- */
.meta-strip {
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  max-width: 1080px;
  text-align: center;
  padding: 2rem 1rem 0;
  border-top: 2px dashed rgba(232,162,26,0.35);
}
.meta-strip dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem 3rem;
  margin: 0 0 1.2rem;
}
.meta-strip dl > div { margin: 0; }
.meta-strip dt {
  font-family: var(--type);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mustard);
  margin-bottom: 0.35rem;
}
.meta-strip dd {
  margin: 0;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--paper);
  line-height: 1.1;
}
.meta-strip__tagline {
  margin: 0;
  font-family: var(--type);
  font-size: 0.9rem;
  color: rgba(241,228,199,0.7);
  letter-spacing: 0.05em;
}
.meta-strip__tagline em {
  font-style: italic;
  color: var(--mustard);
}

/* accessibility notice — second flyer pinned to the wall ---------------- */
.notice {
  position: relative;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  max-width: 1080px;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.6rem, 3.5vw, 2.6rem) clamp(2rem, 3.5vw, 2.8rem);
  transform: rotate(0.6deg);
  box-shadow: 0 24px 40px -18px rgba(0,0,0,0.55),
              8px 12px 0 rgba(0,0,0,0.35);
  background-image:
    radial-gradient(ellipse at 100% 0, rgba(152,119,55,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 0 100%, rgba(152,119,55,0.16) 0%, transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.6  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    var(--paper);
  /* mildly torn edges — gentler than the slip so it reads as a calmer notice */
  clip-path: polygon(
    0 1.5%, 6% 0, 14% 1.5%, 24% 0, 34% 1.5%, 44% 0, 54% 1.5%, 64% 0,
    74% 1.5%, 84% 0, 94% 1.5%, 99% 0,
    99.5% 10%, 99% 22%, 99.7% 34%, 99% 46%, 99.7% 58%, 99% 70%,
    99.7% 82%, 99% 94%, 99.5% 99%,
    96% 100%, 88% 98.5%, 78% 100%, 68% 98.5%, 58% 100%, 48% 98.5%,
    38% 100%, 28% 98.5%, 18% 100%, 8% 98.5%, 0 100%,
    1% 92%, 0 80%, 1% 68%, 0 56%, 1% 44%, 0 32%, 1% 20%, 0 8%
  );
}

.notice__head {
  text-align: center;
  margin: 0 auto 1.6rem;
  max-width: 720px;
}
.notice__stamp {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  padding: 0.45rem 1.1rem 0.4rem;
  color: var(--cobalt);
  border: 3px solid var(--cobalt);
  border-radius: 2px;
  background: transparent;
  transform: rotate(2deg);
  margin: 0 0 1rem;
  opacity: 0.9;
  box-shadow: inset 0 0 20px rgba(26,90,176,0.22);
}
.notice__title {
  font-family: var(--type);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.6vw, 1.9rem);
  margin: 0;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.05;
}

.notice__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  max-width: 940px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .notice__grid { grid-template-columns: 1fr; }
}

.notice__card {
  position: relative;
  padding-top: 0.2rem;
}
.notice__card + .notice__card {
  border-left: 2px dashed rgba(20,19,16,0.18);
  padding-left: clamp(1.4rem, 3vw, 2.6rem);
}
@media (max-width: 720px) {
  .notice__card + .notice__card {
    border-left: 0;
    border-top: 2px dashed rgba(20,19,16,0.18);
    padding-left: 0;
    padding-top: 1.4rem;
    margin-top: 0.4rem;
  }
}

.notice__sub {
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blood);
  margin: 0 0 0.7rem;
  line-height: 1.2;
}

.notice__card p {
  font-family: var(--type);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-soft);
}
.notice__card a {
  color: var(--blood);
  text-decoration: underline wavy rgba(200,48,31,0.4);
  text-underline-offset: 3px;
  word-break: break-word;
}
.notice__card a:hover { color: var(--ink); }
.notice__card strong {
  color: var(--ink);
  font-weight: 700;
}

/* credits --------------------------------------------------------------- */
.creds {
  margin: 4rem auto 0;
  text-align: center;
  max-width: 860px;
  padding-top: 2rem;
  position: relative;
}
.creds::before {
  content: "";
  display: block;
  margin: 0 auto 2rem;
  width: 90%;
  max-width: 640px;
  height: 2px;
  background-image: linear-gradient(90deg, var(--mustard) 0 8px, transparent 8px 20px);
  background-size: 20px 2px;
  background-repeat: repeat-x;
  opacity: 0.5;
}
.creds__line {
  font-family: var(--type);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: rgba(241,228,199,0.7);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}
.creds__url {
  font-family: var(--hand);
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--mustard);
  margin: 0 0 1rem;
  letter-spacing: 0.02em;
}
.creds__nav {
  font-family: var(--type);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.creds__nav a { color: rgba(241,228,199,0.7); margin: 0 0.5rem; }
.creds__nav a:hover { color: var(--mustard); }

/* intl-tel-input overrides — match the paper-slip aesthetic ------------ */
.iti { width: 100%; display: block; }
.iti__tel-input { width: 100%; }
.iti--separate-dial-code .iti__selected-dial-code { color: var(--ink); font-family: var(--type); }
.iti__country-list {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: var(--type);
  color: var(--ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}
.iti__country.iti__highlight { background: rgba(200,48,31,0.15); }
.iti__country:hover { background: rgba(232,162,26,0.2); }
.iti--separate-dial-code .iti__selected-flag {
  background: rgba(20,19,16,0.05);
  border-right: 2px dashed var(--ink);
}
.iti--separate-dial-code .iti__selected-flag:hover,
.iti--separate-dial-code .iti__selected-flag:focus-visible {
  background: rgba(200,48,31,0.08);
}
.field .iti + .form__error { font-size: 0.8rem; color: var(--blood); margin-top: 0.35rem; font-family: var(--type); }

/* reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scrawl span { animation: none; padding-left: 0; }
}