/* ============================================================
   Still Monday waitlist site: STYLES
   ------------------------------------------------------------
   Brand system:
   - charcoal base, off-white type, restrained red accent
   - heavy condensed display type for headlines
   - distressed workwear tone, not clip art
   Layout is mobile first. Desktop rules sit at the bottom.
   ============================================================ */

/* ---------- Self-hosted fonts ----------
   Files live in /fonts. font-display: swap shows system text right
   away and swaps the brand face in when the file arrives, so nothing
   is invisible while loading. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
}

/* ---------- Brand tokens ---------- */
:root {
  --ink: #15171c;          /* page background, near black */
  --ink-2: #1e2128;        /* card background, one step lighter */
  --ink-3: #2a2e37;        /* borders and dividers */
  --paper: #f4f1ea;        /* off-white type */
  --paper-dim: #b9b5ab;    /* secondary type */
  --red: #d9483b;          /* the one accent color */
  --yellow: #e6b422;       /* used only for the test-mode ribbon */
  --max: 1100px;           /* content width cap */
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset and base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.02;
  margin: 0 0 0.4em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.6rem, 8vw, 4.9rem); }
h2 { font-size: clamp(1.9rem, 6vw, 3rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--max), 100% - 2.5rem); margin-inline: auto; }
.dim { color: var(--paper-dim); }
.eyebrow {
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

/* Visually hidden, still read by screen readers */
.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;
}

/* Skip link: off screen until a keyboard user tabs to it */
.skip {
  position: absolute; left: 1rem; top: -100px;
  background: var(--red); color: #fff;
  padding: 0.6rem 0.9rem; border-radius: 6px;
  font-weight: 700; text-decoration: none; z-index: 10;
}
.skip:focus { top: 1rem; }

/* One visible focus style for every clickable thing.
   :focus-visible means mouse clicks do not show the ring, keyboard does. */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* ---------- Test-mode ribbon (only visible when Kit is not connected) ---------- */
#testmode {
  background: var(--yellow);
  color: #1a1a1a;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  padding: 0.5rem 1rem;
}
#testmode[hidden] { display: none; }

/* ---------- Header ---------- */
header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--ink-3);
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}
/* The Calendar M mark, drawn in CSS so it needs no image file */
.cal-m {
  width: 34px; height: 34px;
  border: 2px solid var(--paper);
  border-radius: 6px;
  position: relative;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 1.15rem;
  padding-top: 5px;
}
.cal-m::before {
  content: "";
  position: absolute; top: -2px; left: -2px; right: -2px;
  height: 8px;
  background: var(--red);
  border-radius: 5px 5px 0 0;
}
.top .btn { font-size: 0.85rem; padding: 0.55rem 0.95rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 6px;
  padding: 0.95rem 1.4rem;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn:hover { background: #c33d31; }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: transparent;
  border: 1px solid var(--ink-3);
  color: var(--paper);
}
.btn.ghost:hover { border-color: var(--paper-dim); }

/* ---------- Hero ----------
   Mobile: copy first, photo under the buttons.
   Desktop (see bottom): two columns, photo fills the right side so
   there is no empty space above the fold. */
.hero { padding: 2.2rem 0 2.5rem; }
/* Phone: one column, natural order = headline, photo, pitch + buttons */
.hero-grid { display: grid; gap: 1.4rem; align-items: center; }
.hero-head .rule { margin-bottom: 0; }
.hero .lede { font-size: 1.2rem; max-width: 40ch; }
.hero .sub { max-width: 52ch; }
.hero .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.4rem; }
.hero .trust { font-size: 0.85rem; margin: 0.9rem 0 0; }
.hero .rule { width: 84px; height: 5px; background: var(--red); margin: 1.2rem 0 1.4rem; }

.hero-photo { margin: 0; position: relative; max-width: 440px; justify-self: center; width: 100%; }
/* On a phone the photo is cropped square and framed on the print so
   the buttons stay close to the top of the page. */
.hero-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-position: 50% 42%;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--ink-3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* Caption sits under the photo like a garment tag, never over the print */
.hero-photo figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--paper-dim);
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.hero-photo .tag {
  background: var(--red); color: #fff;
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 4px;
}

/* ---------- Profession grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.tile {
  text-decoration: none;
  color: inherit;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tile:hover { border-color: var(--paper-dim); transform: translateY(-2px); }
.tile img { aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
.tile .cap { padding: 0.8rem 0.9rem 1rem; }
.tile .cap strong { display: block; font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.03em; text-transform: uppercase; overflow-wrap: anywhere; }
.tile .cap span { color: var(--paper-dim); font-size: 0.9rem; }

/* ---------- Generic section spacing ---------- */
section { padding: 2.6rem 0; border-top: 1px solid var(--ink-3); }
section.hero { border-top: 0; }
section.tight { padding-top: 1.6rem; }

/* ---------- Origin story ---------- */
.story { display: grid; gap: 1.5rem; }
.story img { border-radius: 10px; border: 1px solid var(--ink-3); }
.story blockquote {
  margin: 0 0 1em;
  padding-left: 1rem;
  border-left: 4px solid var(--red);
  font-size: 1.15rem;
}

/* ---------- Honest facts strip ---------- */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.fact {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
  padding: 1rem;
}
.fact b { display: block; font-family: var(--display); font-size: 1.7rem; color: var(--red); line-height: 1; margin-bottom: 0.3rem; }
.fact span { font-size: 0.92rem; color: var(--paper-dim); }

/* ---------- Signup form ---------- */
.signup {
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  padding: 1.6rem 1.3rem;
}
.signup h2 { color: var(--ink); }
.signup .dim { color: #5b5952; }
.field { margin-bottom: 1rem; }
/* fieldset is used for the profession group; strip the browser box */
fieldset.field { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.field label, .field legend { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem; padding: 0; }
.field input[type="email"], .field input[type="text"] {
  width: 100%;
  font: inherit;
  padding: 0.85rem 0.9rem;
  border: 2px solid #cfcbc0;
  border-radius: 8px;
  background: #fff;
}
.field input:focus { outline: none; border-color: var(--ink); }
/* Profession chooser: radio buttons styled as tappable chips */
.chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.chips label {
  display: flex; align-items: center; gap: 0.5rem;
  border: 2px solid #cfcbc0;
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  background: #fff;
  margin: 0;
}
.chips input { accent-color: var(--red); margin: 0; }
.chips label:has(input:checked) { border-color: var(--red); background: #fff4f2; }
.chips label:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 2px; }
.chips .wide { grid-column: 1 / -1; }
#otherWrap[hidden] { display: none; }
.consent { font-size: 0.82rem; color: #5b5952; margin-top: 0.9rem; }
.signup .btn { width: 100%; font-size: 1.05rem; padding: 1rem; }
.signup .btn[disabled] { opacity: 0.6; cursor: wait; }
#formError { color: #a8271b; font-weight: 600; margin-top: 0.7rem; }
#formError[hidden] { display: none; }

/* Thank-you state replaces the form after a successful signup */
#thanks[hidden] { display: none; }
#thanks .share { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
#thanks .share a, #thanks .share button { font-size: 0.9rem; padding: 0.7rem 1rem; }

/* ---------- FAQ ---------- */
details {
  border-top: 1px solid var(--ink-3);
  padding: 0.9rem 0;
}
details:last-of-type { border-bottom: 1px solid var(--ink-3); }
summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--red); font-family: var(--display); font-size: 1.3rem; }
details[open] summary::after { content: "–"; }
details p { margin: 0.7rem 0 0; color: var(--paper-dim); }

/* ---------- Footer ---------- */
footer { padding: 2rem 0 3rem; border-top: 1px solid var(--ink-3); font-size: 0.88rem; color: var(--paper-dim); }
footer .links { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
footer a { text-decoration: none; }
footer a:hover { color: var(--paper); }

/* ---------- Desktop ---------- */
@media (min-width: 760px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .story { grid-template-columns: 1fr 1.2fr; align-items: center; }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .signup { padding: 2.2rem; }
  .chips { grid-template-columns: repeat(4, 1fr); }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
}
@media (min-width: 900px) {
  .hero { padding: 3.2rem 0 3.2rem; }
  /* Laptop: headline and pitch stack in the left column, the photo
     takes the right column across both rows. */
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    /* Four rows: two flexible spacers around the two text rows. The
       photo spans all four, so any spare height (the photo is taller
       than the text) lands in the spacers and the text sits centered
       beside the photo instead of leaving a hole between headline and
       pitch. */
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 3rem;
    row-gap: 0;
  }
  .hero-head  { grid-column: 1; grid-row: 2; }
  .hero-copy  { grid-column: 1; grid-row: 3; }
  .hero-photo { grid-column: 2; grid-row: 1 / span 4; justify-self: end; }
  .hero-photo img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
  .hero-head .rule { margin-bottom: 1.4rem; }
}