/* ==========================================================================
   Take Off Halloween - signup.takeoffofficial.com

   Identity is taken from the client's flyposter, not invented: every colour
   below was sampled out of the supplied artwork (bg.png / logo.png), and the
   display face is Archivo pinned to its widest width as a licence-clean
   stand-in for the designer's Druk Wide (Commercial Type, not licensed to us).

   Structure follows the shared signup engine: aspect-ratio breakpoints rather
   than width-only ones, so squarish desktop windows can't fall through a gap,
   plus a dedicated short-viewport block for landscape phones.
   ========================================================================== */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: "Archivo Exp";
  src: url("/assets/fonts/ArchivoExp.woff2?v=20260907-5") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Var";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260907-5") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* sampled from the artwork - see header note */
  --ink:        #100F0E;   /* page ground, deepest paper black */
  --paper:      #1C1A19;   /* panel ground, the poster's warm black */
  --blood:      #9B131C;   /* the HALLOWEEN script / dates red */
  --blood-hot:  #C8202B;   /* lifted blood, for the top of the button gradient */
  --blood-deep: #6E0D14;   /* shaded blood, for the foot of the gradient */
  --spray:      #C0392F;   /* the aerosol mist red, hover + overspray only */
  --bone:       #EFEDEF;   /* the torn-paper logo white */
  --bone-dim:   #A9A6A4;   /* secondary text */

  /* the field background flattened to one opaque value: a .05 white field over
     a .90 ink panel over the photograph. Needed because :-webkit-autofill
     ignores `background` and only an inset box-shadow can override it, and a
     box-shadow cannot be semi-transparent. */
  --field-flat: #1F1E1D;

  --panel-w: 29.5rem;
  --hair: rgba(239, 237, 239, 0.16);

  --display: "Archivo Exp", "Archivo Var", Helvetica, Arial, sans-serif;
  --body: "Archivo Var", Helvetica, Arial, sans-serif;
}

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

/* `html` carries the base colour, NOT `body`: an opaque body paints over the
   z-index:-1 fixed .bg layer and the artwork disappears entirely. */
html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: transparent;
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* honeypot: display:none, never off-screen. Chrome/Edge autofill treats an
   off-screen field as visible, fills it, and the submit guard then silently
   drops real signups. */
.hp-row { display: none !important; }

img { max-width: 100%; }

/* ---------- background ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--ink);
  background-image: url("/assets/images/bg-mobile-sm.webp?v=20260907-5");
  background-size: cover;
  background-position: 50% 50%;
}
/* A scrim, not a darkening of the asset itself: the artwork keeps its contrast
   for the eye while the form copy stays legible over it at every crop. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16,15,14,.55) 0%, rgba(16,15,14,.18) 34%, rgba(16,15,14,.72) 100%);
}

/* ---------- shell ---------- */
.sheet {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.stage { flex: 1 0 auto; }
.stage__inner {
  width: min(72rem, 100%);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.15rem, 5vw, 2.5rem) 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.25rem);
}

/* ---------- brand column ---------- */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.9rem, 2.6vw, 1.4rem);
  width: 100%;
  text-align: center;
}
.brand__lockup {
  display: block;
  width: min(78vw, 24rem);
  height: auto;
}
/* The fangs are a sprayed stencil panel on the poster, so they keep their own
   black border and read as a strip pasted onto the page. */
.brand__fangs {
  display: block;
  width: min(74vw, 22rem);
  height: auto;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.95);
}
.brand__cta {
  display: block;
  width: min(62vw, 18.5rem);
  height: auto;
  /* the strip is torn white paper - a drop-shadow on its alpha, not a box
     shadow, or the shadow would draw the rectangle rather than the tear */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .75));
}
.brand__line {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(.78rem, 2.7vw, .95rem);
  letter-spacing: .06em;
  color: var(--bone-dim);
  text-transform: uppercase;
}

/* ---------- panel ---------- */
.signup { width: 100%; display: flex; justify-content: center; }
.panel {
  position: relative;
  width: min(var(--panel-w), 100%);
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(46, 24, 26, .55) 0%, rgba(16, 15, 14, .00) 42%),
    rgba(16, 15, 14, .90);
  border: 1px solid rgba(239, 237, 239, .13);
  /* Layered, not one flat blur: a tight contact shadow to seat it on the page,
     a wide ambient one for lift, a blood-tinted bloom so the panel belongs to
     the same lit scene as the artwork, and a hairline top rim. */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .55),
    0 18px 34px -12px rgba(0, 0, 0, .80),
    0 46px 90px -30px rgba(0, 0, 0, .92),
    0 26px 70px -40px rgba(155, 19, 28, .55),
    inset 0 1px 0 rgba(239, 237, 239, .07);
  /* keeps the light layer below from stacking above the country dropdown */
  isolation: isolate;
}
/* Light spilling over the top edge: brightest at the centre, fading to the
   corners, so it reads as illumination rather than a 1px border. Sits UNDER
   the content and never takes pointer events, or it re-breaks the flag menu. */
.panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(239, 237, 239, .05) 18%,
    rgba(200, 32, 43, .75) 50%,
    rgba(239, 237, 239, .05) 82%,
    transparent 100%);
}
.panel__inner {
  position: relative;
  z-index: 1;
  padding: clamp(1.4rem, 4.4vw, 2rem);
}

/* exactly one state visible at a time */
.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

.panel__title {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.7rem, 5.8vw, 2.25rem);
  line-height: .96;
  letter-spacing: -.01em;
  color: var(--bone);
  text-wrap: balance;
  /* Three widening radii rather than a single blur: a tight light core to give
     the letterforms an edge, then the accent thrown progressively wider so the
     type sits in the same lit scene as the artwork. Deliberately applied to the
     WHOLE line - accenting one word is the tell we are trying to avoid. */
  text-shadow:
    0 1px 0 rgba(0, 0, 0, .55),
    0 0 14px rgba(200, 32, 43, .40),
    0 0 34px rgba(155, 19, 28, .32),
    0 0 68px rgba(155, 19, 28, .22);
}
.panel__lede {
  margin: 0 0 1.25rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--bone-dim);
  max-width: 34ch;
}
.panel__hint {
  margin: .9rem 0 0;
  font-size: .82rem;
  color: rgba(169, 166, 164, .8);
}
.panel__success-note {
  margin: 0 0 .75rem;
  font-size: .9rem;
  color: var(--bone-dim);
}
.panel__stamp {
  display: block;
  width: min(100%, 19rem);
  margin: 0 auto 1.1rem;
  height: auto;
}

/* ---------- form ---------- */
.form__row { margin-bottom: .85rem; }
/* labels stay for screen readers; placeholders carry the meaning visually */
.form__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.form__input {
  width: 100%;
  padding: .8rem .85rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hair);
  border-radius: 0;
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.3;
  /* Recessed, plus a dim accent bar on the foot. The bar is an INSET SHADOW,
     never a border-bottom-width: changing a border width on focus reflows the
     field by a pixel and the whole form twitches as you tab through it. */
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, .42),
    inset 0 -2px 0 0 rgba(155, 19, 28, .55);
  transition: border-color .16s ease, background-color .16s ease,
              box-shadow .16s ease;
}
.form__input::placeholder { color: rgba(169, 166, 164, .62); }
.form__input:focus {
  outline: none;
  border-color: rgba(200, 32, 43, .8);
  background: rgba(255, 255, 255, .075);
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, .38),
    inset 0 -2px 0 0 var(--blood-hot),
    0 0 0 1px rgba(200, 32, 43, .45),
    0 6px 22px -6px rgba(200, 32, 43, .55);
}
/* Chrome paints autofilled fields pale lavender and ignores `background`.
   The shadow colour is the flattened opaque stack, not the field's own rgba,
   or an autofilled field would not match the empty one beside it. */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus,
.form__input:-webkit-autofill:active {
  /* The foot bar MUST be repeated here. This rule is !important and
     box-shadow is a single property, so declaring only the fill would drop the
     bar and an autofilled field would stop matching the empty ones beside it. */
  -webkit-box-shadow: 0 0 0 1000px var(--field-flat) inset,
                      inset 0 -2px 0 0 rgba(155, 19, 28, .55) !important;
          box-shadow: 0 0 0 1000px var(--field-flat) inset,
                      inset 0 -2px 0 0 rgba(155, 19, 28, .55) !important;
  -webkit-text-fill-color: var(--bone) !important;
  caret-color: var(--bone);
  transition: background-color 9999s ease-in-out 0s;
}

.form__error {
  margin: .4rem 0 0;
  font-size: .82rem;
  color: #FF6B60;
}
.form__error--global { margin-top: .75rem; }

/* ---------- the night picker -------------------------------------------
   This is where the design spends its boldness. Unselected strips are quiet
   hairline boxes; the chosen one is sprayed blood red with an aerosol bloom
   and a fang mark, and sits very slightly off-square like a pasted strip.
   ---------------------------------------------------------------------- */
.nights {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
  min-width: 0;   /* fieldsets carry a min-content floor that breaks grids */
}
.nights__legend {
  padding: 0;
  margin-bottom: .15rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--bone-dim);
  text-transform: uppercase;
}
.nights__hint {
  margin: 0 0 .55rem;
  font-size: .78rem;
  color: rgba(169, 166, 164, .78);
}
.night { display: block; position: relative; }
.night + .night { margin-top: .45rem; }
/* kept focusable - never display:none, or the group drops out of tab order */
.night input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.night__face {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .72rem .9rem;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--hair);
  cursor: pointer;
  /* recessed at rest, so picking one reads as it coming forward */
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .38);
  transition: background .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.night__when {
  flex: 0 0 auto;
  font-family: var(--display);
  font-weight: 900;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--bone);
  text-transform: uppercase;
}
.night__where {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: .84rem;
  color: var(--blood);
  transition: color .2s ease;
}
.night__fang {
  flex: 0 0 auto;
  width: 1.15rem; height: auto;
  fill: var(--bone);
  opacity: 0;
  transform: translateY(-3px) scale(.8);
  transition: opacity .2s ease, transform .2s ease;
}
@media (hover: hover) {
  .night:hover .night__face {
    border-color: rgba(200, 32, 43, .6);
    background: rgba(192, 57, 47, .12);
    box-shadow:
      inset 0 2px 6px rgba(0, 0, 0, .3),
      0 6px 18px -10px rgba(200, 32, 43, .7);
  }
}
.night input:focus-visible + .night__face {
  outline: 2px solid var(--bone);
  outline-offset: 2px;
}
.night input:checked + .night__face {
  /* lit from above like the button, so a picked night reads as raised paper */
  background: linear-gradient(180deg,
    var(--blood-hot) 0%,
    var(--blood) 55%,
    var(--blood-deep) 100%);
  border-color: var(--blood-hot);
  transform: rotate(-.5deg) translateY(-1px);
  /* aerosol overspray, done as box-shadow so nothing new enters the stacking
     context and covers the intl-tel country dropdown */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -2px 0 rgba(0, 0, 0, .28),
    0 0 0 1px rgba(200, 32, 43, .5),
    0 0 32px -2px rgba(200, 32, 43, .55),
    0 16px 32px -16px rgba(0, 0, 0, .92);
}
.night input:checked + .night__face .night__where { color: var(--bone); }
.night input:checked + .night__face .night__fang {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- consent ---------- */
.form__row--check { margin-top: 1rem; }
.form__check {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--bone-dim);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  -webkit-appearance: none;
          appearance: none;
  width: 1.15rem; height: 1.15rem;
  margin: .1rem 0 0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(239, 237, 239, .28);
  border-radius: 0;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 82% 82%;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.form__check input:hover { border-color: rgba(200, 32, 43, .7); }
.form__check input:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.form__check input:checked {
  background-color: var(--blood);
  border-color: var(--blood-hot);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 0 16px -3px rgba(200, 32, 43, .8);
  /* %23 for the '#' - an unencoded hash truncates the data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23EFEDEF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.6l3.1 3.1 6.5-7.4'/%3E%3C/svg%3E");
}
.form__check a { color: var(--bone); text-underline-offset: 2px; }
.form__check a:hover { color: var(--spray); }

/* ---------- button ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: 1.1rem;
  padding: .9rem 1rem;
  border: 0;
  border-radius: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(.85rem, 3.2vw, 1rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn--primary {
  /* Light falls down the face: hot at the lip, base through the middle, deep at
     the foot. Contrast is checked against the DARKEST band (--blood-deep
     #6E0D14), not the base colour - bone on that is ~9:1. */
  background: linear-gradient(180deg,
    var(--blood-hot) 0%,
    var(--blood) 52%,
    var(--blood-deep) 100%);
  color: var(--bone);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 0 rgba(0, 0, 0, .32),
    0 2px 4px rgba(0, 0, 0, .5),
    0 14px 30px -12px rgba(155, 19, 28, .85),
    0 0 34px -10px rgba(200, 32, 43, .5);
  transform: translateY(0);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #D82733 0%, var(--blood-hot) 52%, #7E0F17 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -2px 0 rgba(0, 0, 0, .32),
    0 3px 6px rgba(0, 0, 0, .5),
    0 18px 38px -12px rgba(155, 19, 28, .95),
    0 0 44px -8px rgba(200, 32, 43, .6);
}
.btn--primary:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 4px 12px -6px rgba(155, 19, 28, .7);
}
.btn--primary:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

/* ---------- footer ---------- */
.foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1rem;
  padding: 1rem clamp(1.15rem, 5vw, 2.5rem) 1.25rem;
  font-size: .75rem;
  color: rgba(169, 166, 164, .75);
}
.foot__left { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; }
.foot__legal { margin: 0; }
.foot__legal a { color: inherit; }
.foot__legal a:hover, .site-built a:hover { color: var(--bone); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: inherit;
  text-decoration: none;
}
.site-built img { display: block; }

/* ---------- intl-tel-input ---------- */
/* The vendor stylesheet owns the hidden state of the dropdown; until it loads
   the full country list paints open. */
.iti__dropdown-content.iti__hide { display: none !important; }
.iti { width: 100%; display: block; }
/* ~63px clears the flag + dial code. Anything at or above 80px breaks
   320-390px viewports. app.js re-measures this at runtime. */
.iti input.form__input { padding-left: calc(52px + 0.7rem); }
.iti__country-container { z-index: 3; }
.iti__dropdown-content {
  background: var(--paper);
  border: 1px solid var(--hair);
  color: var(--bone);
}
.iti__country-list { background: var(--paper); }
.iti__country.iti__highlight { background: rgba(155, 19, 28, .35); }
.iti__country:hover { background: rgba(155, 19, 28, .28); }
/* Keep the vendor's reserved horizontal padding: a shorthand here wipes the
   30px/28px that clear the absolutely positioned search icon and clear button,
   and the magnifier lands on top of the word "Search". */
.iti__search-input {
  padding: 9px 30px 9px 32px;
  background: rgba(255, 255, 255, .05);
  color: var(--bone);
  border: 0;
  border-bottom: 1px solid var(--hair);
}

/* ==========================================================================
   Two-column layout. Gated on aspect ratio AND width so squarish desktop
   windows (~570-900px) can't fall into a gap between phone and desktop rules.
   ========================================================================== */
@media (min-aspect-ratio: 7/10) and (min-width: 768px) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260907-5"); }
  .bg::after {
    background:
      linear-gradient(90deg, rgba(16,15,14,.30) 0%, rgba(16,15,14,.10) 42%, rgba(16,15,14,.78) 100%),
      linear-gradient(180deg, rgba(16,15,14,.42) 0%, rgba(16,15,14,.12) 40%, rgba(16,15,14,.62) 100%);
  }
  .stage {
    display: flex;
    align-items: center;
    min-height: 100svh;
  }
  .stage__inner {
    /* the panel track is DEFINITE, never `auto`: an `fr` sibling next to an
       `auto` track sized from a percentage width has no basis to resolve
       against and collapses to its own padding */
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding-block: 3rem;
  }
  /* The artwork stack shares ONE width box, sized to the widest element (the
     lockup), and everything inside it centres on a single axis. Without the
     box, `align-items: flex-start` ragged the narrower fangs band and the
     SIGN UP NOW strip against the left edge of a much wider 1fr track, and
     `align-self: center` alone would have centred them in that whole track -
     pushing them right of the lockup rather than under it. */
  .brand {
    width: min(34vw, 27rem);
    align-items: center;
    text-align: center;
  }
  .brand__lockup { width: 100%; }
  .brand__fangs  { width: min(94%, 24rem); }
  .brand__cta    { width: min(76%, 18.5rem); }
  .panel { width: 100%; }
}

@media (min-aspect-ratio: 7/10) and (min-width: 1501px) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260907-5"); }
}

@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/bg-mobile.webp?v=20260907-5"); }
}

/* ==========================================================================
   Landscape phones are a first-class layout, not an afterthought. A rotated
   phone (844x390, 932x430, 667x375) satisfies the width and aspect conditions
   above but has almost no height, so the desktop block's 100svh grid renders
   cramped. Placed AFTER the desktop blocks so it wins at equal specificity.
   ========================================================================== */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage { align-items: flex-start; min-height: 0; }
  .stage__inner {
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    align-items: start;
    gap: clamp(1.25rem, 3vw, 2rem);
    padding-block: 1.1rem;
    min-height: 0;
  }
  .brand { gap: .6rem; width: min(30vw, 15rem); align-items: center; }
  .brand__lockup { width: 100%; max-height: calc(100svh - 210px); object-fit: contain; }
  .brand__fangs  { width: min(94%, 13rem); }
  .brand__cta    { width: min(76%, 11rem); }
  .brand__cta {
  display: block;
  width: min(62vw, 18.5rem);
  height: auto;
  /* the strip is torn white paper - a drop-shadow on its alpha, not a box
     shadow, or the shadow would draw the rectangle rather than the tear */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .75));
}
.brand__line { font-size: .72rem; }
  .panel__inner { padding: .9rem 1rem; }
  .panel__title { font-size: 1.3rem; margin-bottom: .3rem; }
  .panel__lede { margin-bottom: .7rem; font-size: .85rem; }
  .form__row { margin-bottom: .5rem; }
  .form__input { padding: .6rem .75rem; font-size: .95rem; }
  .nights { margin-bottom: .6rem; }
  .night + .night { margin-top: .3rem; }
  .night__face { padding: .45rem .7rem; }
  .btn { margin-top: .7rem; padding: .7rem 1rem; }
  .panel__stamp { width: min(100%, 13rem); margin-bottom: .6rem; }
}

/* very narrow phones */
@media (max-width: 360px) {
  .panel__inner { padding: 1rem .9rem; }
  .night__face { gap: .45rem; padding: .55rem .6rem; }
  .night__when { font-size: .86rem; }
  .night__where { font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .night input:checked + .night__face { transform: none; }
}