/* Local Charmers - public site styles. Mobile first; desktop from 900px. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/Montserrat-VariableFont_wght-fadce39c.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #E1DACA;
  --olive: #5A5B3B;
  --gold: #CC922C;
  --ink: #1D1D1B;
  --loading-top: #524F2F;
  --loading-bottom: #E1DBCA;

  --gutter: clamp(26px, 7vw, 48px);
  --radius-card: clamp(14px, 1.2vw + 9px, 24px);
  --header-h: clamp(91px, 3vw + 80px, 104px);
  --focus: 0 0 0 3px var(--ink), 0 0 0 5px var(--gold);

  --fs-eyebrow: clamp(1rem, 0.75rem + 1vw, 1.6rem);
  --fs-display: clamp(2.6rem, 1.5rem + 4.5vw, 4.5rem);
  --fs-lead: clamp(0.9rem, 0.78rem + 0.55vw, 1.25rem);
  --fs-body: clamp(0.85rem, 0.75rem + 0.45vw, 1.2rem);
  --fs-link: clamp(0.8rem, 0.72rem + 0.35vw, 1.05rem);
  --fs-button: clamp(0.75rem, 0.7rem + 0.25vw, 0.95rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  background: var(--olive);
  -webkit-font-smoothing: antialiased;
}
body.theme-cream { background: var(--cream); }
body.theme-loading { background: var(--loading-bottom); }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

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

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--gold); font-weight: 900; text-decoration: none;
}
.skip-link:focus { top: 8px; }

.icon { width: 1em; height: 1em; flex: none; }

/* ---------- Header + menu ---------- */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--cream);
}
.site-header__bar {
  position: relative;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header__logo { display: block; border-radius: 6px; }
.site-header__logo img { width: clamp(72px, 2.6vw + 62px, 84px); height: auto; }
.site-header__menu {
  position: absolute;
  top: 50%;
  right: clamp(20px, 10.7vw, 48px);
  translate: 0 -60%;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
}
.site-header__menu .icon { width: 32px; height: 21px; }
.site-header__menu-close { display: none; }
.site-header__menu[aria-expanded="true"] .site-header__menu-open { display: none; }
.site-header__menu[aria-expanded="true"] .site-header__menu-close { display: block; }

.site-menu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--cream);
  border-top: 1px solid rgb(29 29 27 / 0.12);
  box-shadow: 0 18px 30px rgb(29 29 27 / 0.25);
}
.site-menu[hidden] { display: none; }
.site-menu ul {
  list-style: none;
  margin: 0 auto;
  padding: 8px var(--gutter) 20px;
  max-width: 480px;
  text-align: center;
}
.site-menu a {
  display: block;
  padding: 14px 0;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--olive);
}
.site-menu a:hover { color: var(--gold); }

@media (min-width: 900px) {
  .site-header__menu { right: auto; left: calc(50% + 124px); margin: 0; }
  .site-header__menu .icon { width: 38px; height: 24px; }
}

/* ---------- Main + themes ---------- */

.main, .flow { flex: 1; display: flex; flex-direction: column; }

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(32px, 4vw, 56px);
  text-align: center;
}
.screen[hidden] { display: none; }
.theme-cream .screen, .screen.screen--cream { background: var(--cream); color: var(--olive); }
.screen--olive { background: var(--olive); color: var(--cream); }
.screen--cream { background: var(--cream); color: var(--olive); }

/* ---------- Type ---------- */

.hero { display: grid; justify-items: center; gap: 0; }
.eyebrow {
  font-weight: 900;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.display {
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.display small { font-size: 0.55em; }
.lead {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-weight: 900;
  font-size: var(--fs-lead);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.body-copy {
  font-size: var(--fs-body);
  line-height: 1.3;
  max-width: 34ch;
  text-wrap: balance;
}
.lead + .body-copy { margin-top: 4px; }

.text-link {
  display: inline-block;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--gold);
  font-weight: 900;
  font-size: var(--fs-link);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.text-link:hover { color: var(--ink); }
.screen--olive .text-link:hover { color: var(--cream); }

/* ---------- Pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  min-height: 44px;
  padding: 0.6em 1.6em;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  font-size: var(--fs-button);
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.pill:hover { filter: brightness(1.12); }
.pill:active { transform: translateY(1px); }
.pill:focus-visible { outline: none; box-shadow: var(--focus); }
.pill--dark { background: var(--ink); color: var(--gold); }
.pill--dark .icon--upload { color: var(--cream); }
.pill--gold { background: var(--gold); color: var(--ink); }
.pill--gold .icon--send { color: var(--cream); }
.pill .icon { width: 2.3em; height: 1.75em; }
.pill .icon--upload { width: 2.6em; height: 1.9em; }
.pill .icon--check-circle, .pill .icon--send { width: 2em; height: 2em; }
.pill[disabled] { opacity: 0.6; cursor: progress; }

.pill-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 3vw, 20px);
  width: min(100%, 360px);
  margin-top: clamp(28px, 4vw, 40px);
}
.pill-row .pill { min-height: clamp(42px, 1vw + 38px, 52px); padding: 0.5em 0.7em; gap: 0.7em; white-space: nowrap; font-size: clamp(0.7rem, 0.5rem + 0.8vw, 0.95rem); }

@media (min-width: 900px) {
  .pill-row { width: auto; grid-template-columns: repeat(2, 12.5rem); }
}

/* ---------- Cards ---------- */

.photo-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  background: var(--cream);
  overflow: hidden;
}
.photo-card > img { width: 100%; height: 100%; object-fit: cover; }
.photo-card__action {
  position: absolute;
  left: 50%;
  bottom: 6.5%;
  translate: -50% 0;
  min-height: clamp(40px, 1vw + 38px, 56px);
  padding-inline: 0.9em 1.5em;
  font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.95rem);
  white-space: nowrap;
}
.photo-card__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  color: var(--olive);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
}
.photo-card__empty .icon { width: 64px; height: 48px; }
.photo-card:has(img[src]) .photo-card__empty,
.photo-card:not(:has(img[src])) > img { display: none; }

/* ---------- Landing ---------- */

.landing { padding-inline: 0; padding-bottom: clamp(32px, 5vw, 40px); }
.landing .hero { padding-inline: var(--gutter); }
.landing .text-link { margin-top: clamp(14px, 2vw, 20px); }
.billboard {
  width: 100%;
  margin: clamp(14px, 2vw, 22px) 0 0;
  aspect-ratio: 1080 / 755;
  overflow: hidden;
}
.billboard img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.landing .pill-row { width: min(100% - 2 * var(--gutter), 360px); margin-block: auto; padding-block: clamp(28px, 8vw, 40px) 8px; }
.theme-cream .body-copy { color: var(--ink); }
@media (max-width: 899px) {
  .billboard img { width: 112.7%; max-width: none; height: auto; margin-top: -15.5%; }
}

@media (min-width: 900px) {
  .billboard {
    width: min(100% - 2 * var(--gutter), 600px);
    aspect-ratio: 828 / 548;
    border-radius: var(--radius-card);
  }
  .landing .pill-row { margin-top: 0; padding-top: 28px; }
  .landing .body-copy { max-width: none; }
}

/* ---------- Confirm ---------- */

.confirm .photo-card { width: min(100%, 440px); margin-top: clamp(40px, 6vw, 44px); }
@media (min-width: 900px) {
  .confirm .photo-card { width: 420px; margin-top: 48px; }
  .confirm .pill-row { grid-template-columns: repeat(2, 10rem); margin-top: 22px; }
  .confirm .pill-row .pill { font-size: 0.68rem; }
}

/* ---------- Details form ---------- */

.details { padding-top: clamp(38px, 6vw, 56px); }
.details .hero { display: none; }
.details__layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 440px);
  text-align: left;
}
.details__photo { display: grid; gap: 12px; justify-items: center; }
.photo-actions {
  color: var(--cream);
  font-size: var(--fs-link);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.photo-actions .text-link { font-size: inherit; padding-inline: 0; }
.details__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; align-content: center; }

.field {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0.55em 0.65em;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--cream);
  color: var(--ink);
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  line-height: 1.2;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}
.field::placeholder { color: var(--olive); opacity: 1; }
.field:focus-visible { outline: none; border-color: var(--gold); }
.field[aria-invalid="true"] { border-color: var(--gold); }

.field-error {
  margin: 2px 0 6px;
  color: var(--gold);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.field-error[hidden] { display: none; }
.form-alert {
  padding: 12px 14px;
  border: 2px solid var(--gold);
  color: var(--cream);
  font-size: 0.9rem;
}
.form-alert strong { color: var(--gold); text-transform: uppercase; letter-spacing: 0.03em; }
.form-alert ul { margin: 6px 0 0; padding-left: 1.1em; }

/* Traits dropdown */
.traits { position: relative; }
.traits__toggle { justify-content: space-between; gap: 12px; cursor: pointer; color: var(--olive); }
.traits__toggle.has-value { color: var(--ink); }
.traits__toggle .icon { width: 30px; height: 16px; color: var(--olive); transition: rotate 0.15s ease; }
.traits__toggle[aria-expanded="true"] .icon { rotate: 180deg; }
.traits__toggle.field { font-size: 14px; }
.traits__summary { overflow-wrap: anywhere; }
.traits__panel {
  position: absolute;
  z-index: 10;
  left: 0; right: 0; top: calc(100% + 2px);
  margin: 0;
  padding: 10px 12px 12px;
  border: 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 16px 28px rgb(29 29 27 / 0.35);
}
.traits__panel[hidden] { display: none; }
.traits__status { font-size: 0.8rem; color: var(--olive); padding: 2px 4px 8px; }
.traits__options { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.traits__option {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 4px;
  font-size: 0.85rem; line-height: 1.15; cursor: pointer;
}
.traits__option:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.traits__done { margin-top: 10px; width: 100%; min-height: 40px; }

/* Custom checkbox: square outline with a gold X */
.check { position: relative; display: inline-grid; flex: none; }
.check input {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer;
}
.check__box {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 1.5px solid currentColor;
  color: inherit;
  font-size: 15px; line-height: 1;
}
.check__box::after { content: "X"; color: var(--gold); font-weight: 400; visibility: hidden; }
.check input:checked + .check__box::after { visibility: visible; }
.check input:focus-visible + .check__box { outline: 3px solid var(--gold); outline-offset: 2px; }
.traits__option .check__box { color: var(--olive); }

.consent {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 14px;
  margin-top: 10px;
  color: var(--cream);
}
.consent__items { display: grid; gap: 8px; }
.consent__item { display: flex; gap: 10px; align-items: flex-start; font-size: 0.66rem; line-height: 1.3; }
.consent__item a { color: var(--gold); }
.consent__item label { cursor: pointer; }
.send { min-width: 92px; min-height: 44px; padding-inline: 1.5em; font-size: 0.95rem; background: var(--ink); color: var(--gold); }

@media (min-width: 900px) {
  .details { padding-top: 56px; }
  .details .hero { display: grid; margin-bottom: clamp(48px, 7vw, 110px); }
  .details__layout {
    width: min(100%, 820px);
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
  }
  .details__fields { padding-top: 12%; }
  .details__photo { gap: 18px; }
  .field { min-height: 40px; font-size: 15px; }
  .consent__item { font-size: 0.6rem; }
}

/* ---------- Loading ---------- */

.loading {
  background: linear-gradient(to bottom, var(--loading-top) 0%, #8a8870 38%, var(--loading-bottom) 100%);
  color: var(--cream);
  padding-bottom: 0;
  overflow: hidden;
}
.loader {
  width: clamp(76px, 2.8vw + 66px, 118px);
  aspect-ratio: 1;
  color: var(--cream);
  margin-top: clamp(0px, 1vw, 12px);
}
.loader svg { width: 100%; height: 100%; animation: bones-spin 1.4s steps(4, jump-none) infinite; }
@keyframes bones-spin { to { rotate: 135deg; } }
@media (prefers-reduced-motion: reduce) {
  .loader svg { animation: none; }
}
.loading__message {
  margin-top: clamp(20px, 3vw, 28px);
  min-height: 1.3em;
  font-weight: 900;
  font-size: clamp(0.85rem, 0.72rem + 0.6vw, 1.25rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
}
.loading__message.is-fading { opacity: 0; }
.loading__photo {
  flex: 1 0 auto;
  display: flex;
  width: min(84%, 460px);
  min-height: min(105vw, 460px);
  margin-top: clamp(28px, 5vw, 40px);
}
.loading__photo img {
  width: 100%; height: auto; flex: 1;
  object-fit: cover;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
@media (min-width: 900px) {
  .loading__photo { width: 400px; min-height: 420px; }
}

/* ---------- Result (preview / rejected / failed) ---------- */

.result { padding-top: clamp(30px, 4vw, 64px); }
.result .display { font-size: clamp(2.55rem, 1.4rem + 4.6vw, 4.6rem); }
.result .body-copy { margin-top: clamp(10px, 1.5vw, 16px); max-width: 36ch; }
.result__share-lead {
  margin-top: clamp(26px, 5vw, 36px);
  font-weight: 900;
  font-size: clamp(0.85rem, 0.72rem + 0.5vw, 1.05rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 24ch;
  text-wrap: balance;
}
.result .photo-card { width: min(100%, 440px); margin-top: clamp(16px, 2vw, 22px); background: var(--olive); }
.result .photo-card > img { object-position: 50% 22%; }
.result__actions { margin-top: clamp(20px, 3vw, 28px); }
.result__actions form { display: inline; }
.result__actions .pill { min-width: 200px; min-height: 48px; }
.result .text-link { font-size: clamp(0.8rem, 0.7rem + 0.4vw, 1rem); }

@media (min-width: 900px) {
  .result .body-copy { max-width: 38ch; }
  .result__share-lead { max-width: none; }
  .result .photo-card { width: 440px; }
}

/* ---------- Gallery ---------- */

.gallery { padding-top: clamp(48px, 7vw, 56px); }
.gallery .display small { display: block; font-size: 0.45em; margin-top: 0.12em; }
.gallery__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 3vw, 22px) clamp(14px, 4.8vw, 26px);
  width: min(100%, 460px);
  margin: clamp(30px, 5vw, 30px) 0 0;
  padding: 0;
}
.thumb { display: grid; gap: 7px; justify-items: center; text-decoration: none; color: var(--gold); }
.thumb__img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--cream);
  border-radius: 4px;
  background: var(--cream);
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.thumb__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.thumb__caption {
  font-weight: 900;
  font-size: clamp(0.62rem, 0.58rem + 0.2vw, 0.72rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.thumb__caption .title-name, .thumb__caption .title-place { display: block; }
.thumb__caption small { font-size: 0.72em; }
.title-place--link { text-decoration: underline; text-decoration-thickness: 0.1em; text-underline-offset: 0.15em; }
.thumb:hover, .thumb:focus-visible { color: var(--cream); outline: none; }
.thumb:hover .thumb__img, .thumb:focus-visible .thumb__img { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.gallery__more { margin-top: clamp(22px, 4vw, 30px); display: grid; place-items: center; width: 48px; height: 40px; color: var(--cream); border-radius: 6px; }
.gallery__more .icon { width: 28px; height: 16px; }
.gallery__more:hover { color: var(--gold); }
.gallery__empty { margin-top: 36px; display: grid; gap: 14px; justify-items: center; }

/* ---------- Charmer detail ---------- */

.detail { padding-top: clamp(26px, 4vw, 48px); padding-bottom: clamp(24px, 3vw, 40px); }
.detail .display { font-size: clamp(2.6rem, 1.3rem + 5vw, 4.8rem); }
.detail .display .title-name, .detail .display .title-place { display: block; }
.detail .display small { font-size: 0.55em; }
.detail__tagline {
  margin-top: clamp(14px, 2vw, 20px);
  max-width: 34ch;
  color: var(--gold);
  font-weight: 900;
  font-size: clamp(0.88rem, 0.78rem + 0.5vw, 1.2rem);
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}
.detail__image {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 0;
  margin-top: clamp(24px, 4vw, 32px);
}
.detail__image img { width: min(100%, 560px); max-height: min(62vh, 620px); object-fit: contain; object-position: 50% 100%; }
.detail__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100%, 560px);
  margin-top: clamp(12px, 2vw, 20px);
}
.detail__nav > :first-child { justify-self: start; }
.detail__nav > :last-child { justify-self: end; }
.detail__nav .text-link { font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.1rem); }
.detail__nav .is-disabled { visibility: hidden; }

@media (min-width: 900px) {
  .detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: ". image" "title image" "tagline image" "nav image" ". image";
    column-gap: clamp(32px, 4vw, 72px);
    justify-items: center;
    max-width: 1280px;
    margin-inline: auto;
    padding-bottom: 0;
  }
  .detail .display { grid-area: title; }
  .detail__tagline { grid-area: tagline; }
  .detail__nav { grid-area: nav; margin-top: clamp(28px, 4vw, 48px); width: min(100%, 460px); }
  .detail__image { grid-area: image; margin-top: 0; align-self: end; }
  .detail__image img { max-height: calc(100dvh - var(--header-h) - 40px); width: min(100%, 520px); }
}