/* ============================================================
   Crossweave — Marigold system (announcement page)
   Rules carried from the brand explorations: marigold lights ink
   green and never carries small text; ember means alert, nothing
   else; motion 300–500ms, one property family per element, movement
   answers the cursor — nothing loops.

   Responsive approach: fluid space and type via clamp(); the display
   line is sized against its own column (container units) so
   "Spend where it / strengthens." keeps its break at every width.
   ============================================================ */

@property --g {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

:root {
  --ink: #22402F;
  --ink-deep: #16291E;
  --ink-soft: #2E5540;
  --marigold: #F0A81B;
  --ember: #DE4A21;
  --sage: #7C8462;
  --cream: #F3EFE4;
  --warm-white: #FAF8F1;
  --paper: #FBF8F0;
  --parchment: #E9DFC8;
  --sand: #EDE7D6;
  --body: #3d4a3f;
  --muted: #5a6357;
  --faint: #8a917f;
  --stone: #98988e;
  --cream-text: #F7F2E7;
  --mist: #c9cfc0;
  --moss: #9aa78f;

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --line: rgba(34, 64, 47, .15);
  --hairline: rgba(34, 64, 47, .07);
  --card-line: rgba(34, 64, 47, .1);

  /* fluid layout tokens */
  --pad-x: clamp(20px, 5vw, 64px);
  --max-w: 1240px;
  --gap: clamp(32px, 6vw, 80px);
  --block: clamp(36px, 7vw, 88px);
  --rings: clamp(420px, 55vw, 760px);
}

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

html { color-scheme: light; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--marigold);
  outline-offset: 3px;
  border-radius: 4px;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ---- display type ---- */

.accent { color: var(--marigold); }

/* ---- logo ---- */

.logo { display: flex; align-items: center; gap: 9px; flex: none; }

.logo-rings { position: relative; width: 20px; height: 20px; flex: none; }
.logo-rings i { position: absolute; border-radius: 50%; }
.logo-rings i:nth-child(1) { left: 0; top: 1px; width: 17px; height: 17px; border: 1.5px solid var(--ink); }
.logo-rings i:nth-child(2) { left: 3.5px; top: 5px; width: 10px; height: 10px; border: 1.5px solid var(--ink); }
.logo-rings i:nth-child(3) { left: 6.5px; top: 8.5px; width: 4px; height: 4px; background: var(--marigold); }

.logo-word {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  white-space: nowrap;
}

/* ---- nav pill: logo left, one call to action right; sits on the hero surface ---- */

.nav-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(14px, 2vw, 18px) clamp(14px, 3.2vw, 40px) 0;
}

.nav {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 99px;
  box-shadow: 0 2px 10px rgba(34, 64, 47, .05);
  padding: 10px 12px 10px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ---- badge + button ---- */

.badge {
  display: inline-block;
  max-width: 100%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  background: var(--marigold);
  padding: 6px 14px;
  border-radius: 99px;
}

.btn {
  --g: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  border-radius: 99px;
  border: 0;
  padding: 12px 24px;
  cursor: pointer;
  transition: transform .25s, --g .3s;
}
.btn:hover { transform: scale(1.02); --g: 1; }
.btn:disabled { cursor: progress; opacity: .7; transform: none; }

.btn-marigold {
  background: var(--marigold);
  box-shadow: 0 6px 16px rgba(240, 168, 27, .35);
}

.btn-arrow {
  display: inline-block;
  transform: translateX(calc(var(--g) * 3px));
}

.btn-nav {
  width: auto;
  min-height: 0;
  font-size: 12.5px;
  padding: 9px 18px;
  box-shadow: none;
  white-space: nowrap;
}
.btn-nav:hover { transform: scale(1.05); }

/* ============================================================
   HERO
   ============================================================ */

.stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(820px 560px at 92% -10%, rgba(240, 168, 27, .42), rgba(240, 168, 27, 0) 62%),
    radial-gradient(900px 660px at -12% 110%, rgba(124, 132, 98, .26), rgba(124, 132, 98, 0) 60%),
    linear-gradient(var(--cream), var(--warm-white));
}

.hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

/* the rings — one loud arc, faint, scaled to the viewport */
.hero-rings {
  position: absolute;
  width: var(--rings);
  height: var(--rings);
  right: calc(var(--rings) * -0.36);
  top: calc(var(--rings) * -0.5);
  color: var(--ink);
  opacity: .07;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  padding-block: clamp(20px, 4vw, 56px) var(--block);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: var(--gap);
  align-items: center;
}

/* the copy column is a size container so the display line can be
   sized against it (cqi) rather than the viewport */
.hero-copy {
  container-type: inline-size;
  min-width: 0;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 500;
  /* three deliberate lines; the longest ("and resilience map") is 8.03em in
     Spectral, so 12cqi of the copy column keeps every line intact at every
     width. First declaration is the fallback where cqi is unsupported. */
  font-size: clamp(34px, 5vw, 72px);
  font-size: clamp(34px, 12cqi, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: clamp(16px, 2.5vw, 24px);
}
.hero-title em { font-style: normal; }

.hero-sub {
  font-size: clamp(15px, 1vw + 11px, 17px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  margin-top: clamp(16px, 2.5vw, 24px);
}
.hero-sub-2 { margin-top: 12px; }

.hero-form { min-width: 0; }

/* ---- partners strip ---- */

.partners {
  list-style: none;
  margin: clamp(26px, 3.5vw, 36px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px clamp(24px, 3vw, 40px);
}

.partner {
  display: flex;
  align-items: center;
  padding-right: clamp(24px, 3vw, 40px);
  border-right: 1px solid var(--line);
}
.partner:last-child { padding-right: 0; border-right: 0; }

.partner-logo {
  display: inline-flex;
  align-items: center;
  height: 48px;
}
.partner-logo img { display: block; width: auto; }
.partner-logo img[alt="Paper Giant"] { height: 26px; }
.partner-logo img[alt="Wyndham City Council"] { height: 48px; }

/* ---- form card ---- */

.form-card {
  container-type: inline-size;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(34, 64, 47, .16);
  overflow: hidden;
}

.form-card-head {
  min-height: 40px;
  border-bottom: 1px solid #ecdfc4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
}

.mini-rings { position: relative; width: 13px; height: 13px; flex: none; }
.mini-rings i { position: absolute; border-radius: 50%; }
.mini-rings i:nth-child(1) { left: 0; top: 1px; width: 11px; height: 11px; border: 1.5px solid var(--ink); }
.mini-rings i:nth-child(2) { left: 3px; top: 4px; width: 5px; height: 5px; background: var(--marigold); }

.form-card-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

.form {
  padding: clamp(18px, 2.5vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .opt { color: var(--stone); font-weight: 400; margin-left: 4px; }

.field input {
  width: 100%;
  min-height: 46px;
  font-family: var(--sans);
  font-size: 16px; /* ≥16px so iOS doesn't zoom on focus */
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid rgba(34, 64, 47, .22);
  border-radius: 10px;
  padding: 10px 13px;
  transition: border-color .3s, box-shadow .3s;
}
.field input:hover { border-color: rgba(34, 64, 47, .4); }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(240, 168, 27, .35); }
.field input[aria-invalid="true"] { border-color: var(--ember); }

.field-error, .form-error {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ember);
}
.form-error a { text-decoration: underline; }

.form .btn { margin-top: 4px; }

.form-note {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--faint);
}

/* wide card (stacked layout on tablets): fields two-up, button beside the last field */
@container (min-width: 560px) {
  .form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    align-items: end;
  }
  .form .btn { margin-top: 0; }
  .form-error, .form-note { grid-column: 1 / -1; }
}

/* honeypot — off-screen, never shown */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- success state ---- */

.joined {
  display: none;
  padding: clamp(22px, 3vw, 28px) clamp(18px, 2.5vw, 22px);
}
.joined:focus { outline: none; }

.plus-mark { display: block; width: 15px; height: 15px; position: relative; }
.plus-mark::before, .plus-mark::after { content: ""; position: absolute; background: var(--marigold); }
.plus-mark::before { left: 0; top: 6px; width: 15px; height: 3px; }
.plus-mark::after { left: 6px; top: 0; width: 3px; height: 15px; }

.joined-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2vw + 12px, 26px);
  line-height: 1.2;
  color: var(--ink);
  margin-top: 14px;
  text-wrap: balance;
}

.joined-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 10px;
}
.joined-sub a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* JS path: .is-joined on the card. No-JS path: the API redirects to /#joined. */
.form-card.is-joined .form,
.form-card:has(#joined:target) .form { display: none; }
.form-card.is-joined .joined,
#joined:target { display: block; }

/* ============================================================
   FOOTER — the dark band
   ============================================================ */

.site-foot { background: var(--ink-deep); }

.foot-bar {
  padding-block: clamp(18px, 2.5vw, 24px);
  display: flex;
  align-items: center;
  gap: 16px 26px;
  flex-wrap: wrap;
}

.foot-logo .logo-rings { width: 16px; height: 16px; }
.foot-logo .logo-rings i:nth-child(1) { left: 0; top: 1px; width: 13px; height: 13px; border-color: var(--parchment); }
.foot-logo .logo-rings i:nth-child(2) { left: 3px; top: 4px; width: 7px; height: 7px; border: 1.5px solid var(--parchment); background: none; }
.foot-logo .logo-rings i:nth-child(3) { display: none; }
.foot-logo .logo-word { font-size: 14px; color: var(--cream-text); }

.foot-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--moss);
}
.foot-links a, .foot-links span { display: inline-block; padding: 8px 0; }
.foot-links a { transition: color .3s; }
.foot-links a:hover { color: var(--parchment); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* stacked layout: copy above the form card */
@media (max-width: 940px) {
  .hero { align-items: flex-start; }
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 6vw, 44px);
  }
  .hero-copy { max-width: 720px; }
  .hero-form { max-width: 720px; }
}

/* phones */
@media (max-width: 560px) {
  .foot-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .foot-links { margin-left: 0; }
}

/* narrow phones: tighter pill */
@media (max-width: 360px) {
  .nav { padding: 8px 8px 8px 16px; }
  .btn-nav { font-size: 12px; padding: 8px 14px; }
}

/* short landscape viewports: don't spend height on padding */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-inner { padding-block: 16px 28px; }
  .nav-shell { padding-top: 10px; }
  .hero-title { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}