/* ==========================================================================
   TAILS UP

   Everything you need to change the look is in the one block below.
   Change a value, save, push. You never have to touch index.html.
   ========================================================================== */

:root {

  /* ---- COLORS -------------------------------------------------------
     The page is white with big stripes of bright color across it.
     Pick new ones at a place like coolors.co.

     One rule: every stripe color is LIGHT, so dark text goes on it. Swap in
     a dark color and the text on that stripe disappears. */

  --paper: #fdfcf8;   /* the page. a barely-there off white */
  --card:  #ffffff;   /* the box the form sits in           */
  --ink:   #14273d;   /* deep navy. almost all the text     */
  --ink-soft: #55697f;/* small grey-blue text, on white     */
  --ink-mid:  #33475d;/* small text on a bright stripe, where --ink-soft
                         would be too faint to read outside */

  --sun:        #ffd23f;  /* bright yellow stripe   */
  --mint:       #8ae5d3;  /* mint stripe            */
  --sky:        #a5e0f7;  /* light blue stripe      */
  --blue-deep:  #12609b;  /* headings inside the form, links */

  /* The two logo colors. Everything loud on the page uses one of them so the
     page and the logo read as the same thing. Change these and you must also
     change the fills in assets/logo.svg. */
  --coral: #f56244;
  --teal:  #4fc9b4;

  --orange:      var(--coral); /* the button */
  --orange-deep: #c03a1c;      /* the darker coral: focus rings, TBD tags */
  --mint-deep:   #0d7d70;      /* the check marks */

  --field:       #e9f6fc; /* inside the form boxes  */
  --line:        #dbe7ef; /* hairlines              */
  --line-strong: #6d8aa3; /* form box outlines      */

  /* ---- TYPE ---------------------------------------------------------
     Two fonts. Swap the names here and swap the <link> in the HTML files. */

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Karla", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.06rem, 1.00rem + 0.30vw, 1.19rem);
  --step-1:  clamp(1.30rem, 1.18rem + 0.55vw, 1.60rem);
  --step-2:  clamp(1.65rem, 1.40rem + 1.10vw, 2.30rem);
  --step-3:  clamp(2.30rem, 1.70rem + 2.80vw, 3.90rem);

  /* ---- SHAPE --------------------------------------------------------- */

  --radius:   20px;
  --radius-s: 12px;
  --tap:      3rem;          /* nothing tappable is smaller than this */
  --wrap:     37rem;

  /* ---- PAPER GRAIN ----------------------------------------------------
     Set --grain-opacity to 0 to switch the texture off completely.       */

  --grain-opacity: 0.03;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- THE WAVY STRIPE EDGES ---------------------------------------- */

  --wave-top:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V6 Q15 13 30 6 T60 6 T90 6 T120 6 V0 Z' fill='%23000'/%3E%3C/svg%3E");
  --wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 12 V6 Q15 -1 30 6 T60 6 T90 6 T120 6 V12 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The grain sits over everything and ignores the mouse. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background-image: var(--grain);
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 5vw, 2rem);
}

h1, h2, h3, legend {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 0.85em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--orange-deep); }

.muted { color: var(--ink-soft); font-size: var(--step--1); }

/* Visible only when tabbed to. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.1rem;
  border-radius: 0 0 var(--radius-s) 0;
}
.skip:focus { left: 0; }

:where(a, button, input, select, textarea, label.check):focus-visible {
  outline: 3px solid var(--orange-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   The color stripes

   A stripe is a full-width band of bright color with a wavy edge top and
   bottom. Stripes alternate with plain white sections down the page.
   ========================================================================== */

.band, .plain { position: relative; }

.band { padding-block: clamp(2.2rem, 7vw, 3.4rem); }
.plain { padding-block: clamp(2.4rem, 6vw, 3rem); }

.band::before, .band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background: var(--paper);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-size: 120px 12px;
          mask-size: 120px 12px;
}

.band::before {
  top: -1px;
  -webkit-mask-image: var(--wave-top);
          mask-image: var(--wave-top);
}

.band::after {
  bottom: -1px;
  -webkit-mask-image: var(--wave-bottom);
          mask-image: var(--wave-bottom);
}

.band--sun  { background: var(--sun); }
.band--mint { background: var(--mint); }
.band--sky  { background: var(--sky); }

/* Grey-on-bright is hard to read on a phone in daylight. Darken it. */
.band--sun .muted, .band--mint .muted, .band--sky .muted,
.callline__note { color: var(--ink-mid); }

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  padding-top: clamp(3.1rem, 4vw, 4.2rem);
  padding-bottom: clamp(2.6rem, 3vw, 3.4rem);
}

/* Logo and tagline ride on one row so the form starts higher up the phone.
   That is the whole point of the page — keep it that way. */
.intro {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 3.5vw, 1.6rem);
  margin-bottom: 1.1rem;
}

.brand { margin: 0; flex: none; }

.brand__logo {
  display: block;
  width: clamp(5.6rem, 26vw, 9rem);
  height: auto;
}

.brand--small { text-align: center; }
.brand--small .brand__logo {
  display: inline-block;
  vertical-align: top;
  width: clamp(6rem, 26vw, 8.5rem);
}

.tagline {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-size: clamp(1.16rem, 1.02rem + 0.75vw, 1.65rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.facts {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: var(--step--1);
}

/* Two columns, so a value that wraps stays lined up under itself instead of
   sliding back under its label. */
.facts li {
  display: grid;
  grid-template-columns: 4.4em 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.facts__k {
  font-weight: 800;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.82em;
}

.callline { font-size: var(--step--1); margin: 0; }
.callline__num {
  display: inline-block;
  font-weight: 800;
  font-size: var(--step-0);
  line-height: 2.6rem;
  color: var(--ink);
}
.callline__note { white-space: nowrap; }

/* ==========================================================================
   The form card
   ========================================================================== */

/* The yellow stripe the form sits on. The white card floating on it is what
   pulls the eye to the form. */
/* Extra top padding because the wavy edge eats the first 12px of the stripe. */
.formband {
  padding-top: clamp(1.9rem, 6vw, 2.8rem);
  padding-bottom: clamp(1.5rem, 5vw, 2.6rem);
}

.card {
  max-width: var(--wrap);
  margin: clamp(1.6rem, 5vw, 2.5rem) auto;
  padding: clamp(1.25rem, 5vw, 2rem);
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 rgba(20, 39, 61, 0.16);
}

.formband .card { margin-block: 0; }

/* On a phone, pull the card in tight so the yellow reads as a frame instead
   of eating the screen. */
@media (max-width: 30rem) {
  .formband { padding-inline: 0.8rem; }
  .card {
    margin-inline: 0.8rem;
    padding: 1.1rem;
    border-radius: 16px;
    box-shadow: 0 6px 0 rgba(20, 39, 61, 0.16);
  }
  .formband .card { margin-inline: 0; }   /* the stripe already gutters it */
}

.card__title { font-size: var(--step-2); }

.card__lede {
  color: var(--ink-soft);
  font-size: var(--step--1);
  margin: 0.5rem 0 1.5rem;
}

fieldset {
  border: 0;
  border-top: 3px dotted var(--line);
  margin: 0 0 3rem;
  padding: 0;
}
fieldset:first-of-type { border-top: 0; padding-top: 0; }

legend {
  font-size: var(--step-1);
  padding: 0 0.5em 0 0;
  color: var(--ink);
}

.field { margin-top: 1.05rem; }

label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.opt {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

input[type="text"], input[type="tel"], input[type="email"],
input[type="date"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.2rem 0.8rem;
  font: inherit;
  font-size: 1rem;              /* 16px minimum, or iOS zooms on focus */
  color: var(--ink);
  background: var(--field);
  border: 0 solid var(--line-strong);
  border-radius: var(--radius-s);
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; }

input::placeholder, textarea::placeholder { color: #7e93a5; }

:where(input, select, textarea):hover { border-color: var(--blue-deep); }

:where(input, select, textarea):focus {
  outline: none;
  background: #fff;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(245, 98, 68, 0.3);
}

/* Only scolds you after you have actually typed something and moved on. */
:where(input, select, textarea):user-invalid {
  border-color: #c0341f;
  background: #fdf0ed;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2314273d' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.6rem;
}

input[type="date"] { min-height: var(--tap); }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; }

/* Start and end date sit side by side. They only stack on the very narrowest
   phones, where a date input would get squeezed too tight to read. */
.row { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 21rem) { .row { grid-template-columns: 1fr; } }

/* Two dates on one line is tight. Trim the padding and the picker button so
   the date and the calendar icon stop crowding each other. */
.row input[type="date"] { padding-inline: 0.45rem; }

.row input[type="date"]::-webkit-calendar-picker-indicator {
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  margin-inline-start: 0.1rem;
}

.field--narrow { max-width: 16rem; }

.hint {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
}
.hint--legend { margin: 0.5rem 0 0; }

.nights {
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.9rem;
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 800;
  text-align: center;
}

/* ---- checkbox chips ---- */

.fieldset--checks legend + .hint { margin-bottom: 0.9rem; }

.checks {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* Smaller type and tighter padding fit more pills per row, which is where the
   real vertical saving is. 2.75rem keeps them at 44px — the floor for
   something you tap one-handed standing on a porch. */
.check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  font-size: var(--step--1);
  font-weight: 700;
  background: var(--field);
  border: 0 solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.check:hover { border-color: var(--blue-deep); }
.check:active { transform: scale(0.96); }

.check input {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin: 0;
  accent-color: var(--mint-deep);
  cursor: pointer;
}

.check:has(input:checked) {
  background: var(--mint);
  border-color: var(--mint-deep);
}

.check:has(input:focus-visible) {
  outline: 3px solid var(--orange-deep);
  outline-offset: 3px;
}

/* ---- honeypot: hidden from people, visible to the robots ---- */

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

/* ---- button ---- */

.btn {
  display: block;
  width: 100%;
  min-height: 3.5rem;
  margin-top: 0.5rem;
  padding: 0.9rem 1.4rem;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: var(--step-1);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  background: var(--orange);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}

.btn:hover { background: #ff7d63; }

.btn:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--ink);
}

.btn:disabled { background: var(--line); cursor: default; }

/* The quieter button, on the thank-you and not-found pages. */
.btn--sun {
  display: inline-block;
  width: auto;
  text-decoration: none;
  color: var(--ink);
  background: var(--sun);
}
.btn--sun:hover { background: #ffe27a; color: var(--ink); }

.fineprint {
  margin: 1rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}

/* ==========================================================================
   Sections below the form
   ========================================================================== */

.band h2, .plain h2 { font-size: var(--step-2); margin-bottom: 0.8rem; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.ticks li {
  position: relative;
  padding-left: 2.2rem;
  line-height: 1.4;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--ink);
  border-radius: 999px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 88% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 88% no-repeat;
}

.plain .ticks li::before { background: var(--mint-deep); }

.rates { margin: 0 0 0.9rem; display: grid; gap: 0; }

.rates > div {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-bottom: 3px dotted rgba(20, 39, 61, 0.28);
}

.rates dt { font-weight: 700; }

.rates dd {
  margin: 0 0 0 auto;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 800;
  font-size: var(--step-1);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  padding: 2.4rem 0 3rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  text-align: center;
}
.foot .wrap { display: grid; justify-items: center; gap: 0.6rem; }
.foot__logo { width: 5rem; height: auto; opacity: 0.85; }

/* ==========================================================================
   Thank-you page
   ========================================================================== */

.card--thanks { text-align: left; }
.card--thanks .btn--sun { margin-top: 0.5rem; }

.thanks__mark {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 0 1rem;
  color: var(--ink);
  background: var(--mint);
  border: 3px solid var(--ink);
  border-radius: 999px;
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
.thanks__mark svg { width: 55%; height: 55%; }

@keyframes pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: none; }
}

.thanks__lede {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  margin: 0.6rem 0 1.5rem;
}

.steps {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 1.1rem;
}

.steps li {
  position: relative;
  counter-increment: step;
  padding-left: 3.2rem;
  line-height: 1.45;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.15em;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
  background: var(--sun);
  border: 3px solid var(--ink);
  border-radius: 999px;
}

.steps strong { display: block; }

/* ==========================================================================
   The TBD marker. Nothing with this class should survive to launch.
   ========================================================================== */

.tbd {
  display: inline-block;
  padding: 0 0.3em;
  background: #fff;
  border-bottom: 3px dashed var(--orange-deep);
  border-radius: 4px;
  color: var(--ink);
}

.tbd::after {
  content: "TBD";
  margin-left: 0.4em;
  padding: 0.05em 0.45em;
  vertical-align: 0.15em;
  font-family: var(--font-body);
  font-size: 0.6em;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--orange-deep);
  border-radius: 999px;
}

/* ==========================================================================
   Load-in. One staggered reveal, then it leaves you alone.
   ========================================================================== */

.reveal {
  animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

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

/* ==========================================================================
   Print. Someone will print this and stick it on the fridge.
   ========================================================================== */

@media print {
  body::after, .skip, .btn { display: none; }
  body { background: #fff; }
  .band::before, .band::after { display: none; }
  .band { background: #fff; }
  .card { border: 1px solid #999; box-shadow: none; }
}