/* ==========================================================================
   Into Action Group — intoactiongroup.com
   Shared stylesheet for the main page and the event pages.

   Design tokens are deliberately identical to conference.intoactiongroup.com
   so the two sites read as one organisation. Palette sampled from the official
   logo artwork in Marketing/Logos.
   ========================================================================== */

:root {
  --navy: #073a4d;
  --navy-900: #04222e;
  --navy-700: #0a4d66;
  --navy-600: #0d6180;
  --teal: #118587;
  --teal-600: #0e6e70;
  --teal-100: #e3f2f2;
  --gold: #f1b73e;
  --gold-600: #d99c1c;
  --gold-100: #fdf3dd;

  --ink: #10242e;
  --body: #3d5560;
  --muted: #6b8391;
  --line: #dce6ea;
  --bg: #ffffff;
  --bg-soft: #f5f9fa;
  --bg-cream: #fbf8f1;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  --wrap: 1120px;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(7, 58, 77, 0.06), 0 8px 28px rgba(7, 58, 77, 0.08);
  --shadow-lg: 0 2px 6px rgba(7, 58, 77, 0.08), 0 24px 60px rgba(7, 58, 77, 0.16);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 600;
  margin: 0 0 0.6em;
  /* Serif descenders sit below the em box; without this they clip against
     tight line-heights and overflow containers. */
  line-height: 1.25;
  padding-bottom: 0.14em;
}
h1 { font-size: clamp(2.4rem, 1.7rem + 3vw, 3.9rem); line-height: 1.15; }
h2 { font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.75rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.15rem; }

a { color: var(--teal-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

img { max-width: 100%; height: auto; }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.narrow { max-width: 760px; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 0.9rem;
}
.lede { font-size: 1.15rem; color: var(--body); }

section { padding-block: clamp(4rem, 2.5rem + 6vw, 7rem); }

/* ---------- buttons ---------- */

.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--navy-900);
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.95rem 1.85rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease;
}
.btn:hover { background: var(--gold-600); color: var(--navy-900); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--lg { font-size: 1.1rem; padding: 1.2rem 2.5rem; }
.btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn--navy { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--navy:hover { background: var(--navy-700); color: #fff; }

/* ---------- header ---------- */

/* The logo's wordmark is a dark slate that measures 1.61:1 on the navy and
   7.16:1 on cream, so the header is light. The navy spotlight directly below
   supplies the contrast the header used to. */
.site-header {
  background: var(--bg-cream);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
}
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.brand img { width: 196px; height: auto; display: block; }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  color: var(--navy);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
}
.nav a:hover { color: var(--teal-600); }
/* The call to action keeps dark text on gold for contrast. */
.nav .btn { color: #000; padding: 0.7rem 1.35rem; font-size: 0.9rem; }
.nav .btn:hover { color: #000; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .brand img { width: 156px; }
}

/* ---------- conference spotlight (hero) ---------- */

.spotlight {
  background:
    radial-gradient(1200px 520px at 78% 12%, rgba(17, 133, 135, 0.4), transparent 62%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
}
.spotlight .wrap {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 980px) {
  .spotlight .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4.5rem; }
}

.spotlight-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(241, 183, 62, 0.16);
  border: 1px solid rgba(241, 183, 62, 0.45);
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1.6rem;
}

.spotlight h1 { color: #fff; margin-bottom: 0.3em; }
.spotlight h1 .script {
  display: block;
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
  font-size: 0.38em;
  line-height: 1.35;
  /* Italic serif leans past its box on both axes. */
  padding-bottom: 0.2em;
  padding-right: 0.08em;
  margin-top: 0.4em;
  letter-spacing: 0;
}
.spotlight-sub {
  font-size: 1.16rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 46ch;
}

.spotlight-meta {
  display: grid;
  gap: 1.25rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  margin: 2.1rem 0 2.4rem;
  padding: 0;
}
.spotlight-meta dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}
.spotlight-meta dd { margin: 0; font-size: 1.02rem; color: #fff; }

.spotlight-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.spotlight-note {
  margin: 1.4rem 0 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.68);
}

/* Poster-style card standing in for the conference on the right. */
.spotlight-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 2.4rem 2rem;
  text-align: center;
  backdrop-filter: blur(2px);
}
.mark-disc {
  display: grid;
  place-items: center;
  width: 172px;
  height: 172px;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.spotlight-card .mark-disc img { width: 132px; height: auto; margin: 0; }
@media (max-width: 480px) {
  .mark-disc { width: 148px; height: 148px; }
  .spotlight-card .mark-disc img { width: 112px; }
}
.spotlight-card .year {
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 1;
  color: #fff;
  display: block;
  padding-bottom: 0.06em;
}
.spotlight-card .where {
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0.6rem 0 1.6rem;
}
.spotlight-card hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 1.6rem 0;
}
.spotlight-card .price {
  font-family: var(--serif);
  font-size: 2.6rem;
  color: var(--gold);
  display: block;
  line-height: 1.1;
  padding-bottom: 0.06em;
}
.spotlight-card .price-sub {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0.2rem 0 0;
}

/* ---------- history band ---------- */

.history {
  background: var(--bg-cream);
  border-block: 1px solid var(--line);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}
.history ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  text-align: center;
}
.history li { position: relative; min-width: 0; }
.history li + li::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--line);
}
.history .mark { color: var(--gold); font-size: 1.3rem; display: block; margin-bottom: 0.55rem; }
.history strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.25;
  padding-bottom: 0.1em;
}
.history span.sub { font-size: 1rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 760px) { .history li + li::before { display: none; } }

/* ---------- about ---------- */

.about { background: var(--bg); }

.pillars {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 3.25rem;
}
.pillar {
  min-width: 0;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
}
.pillar h3 { margin-bottom: 0.5rem; }
.pillar p { margin: 0; font-size: 0.98rem; }

.values {
  list-style: none;
  margin: 3.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.values li {
  min-width: 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
}
.values .num {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--teal);
  flex: 0 0 auto;
  line-height: 1.5;
}
.values strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 1.08rem; }
.values span { font-size: 0.95rem; }

/* ---------- quote ---------- */

.quote {
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.quote .mark {
  font-family: var(--serif);
  font-size: 4.5rem;
  color: var(--gold);
  display: block;
  /* A 4.5rem quote glyph needs its full line box — squeezing the line-height
     to pull the blockquote closer crops the mark instead. Tighten with margin. */
  line-height: 1;
  padding-bottom: 0.12em;
  margin-bottom: 0.75rem;
}
.quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  line-height: 1.5;
  color: #fff;
  padding-bottom: 0.1em;
}
.quote cite {
  display: block;
  margin-top: 1.75rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- events ---------- */

.events { background: var(--bg-soft); }

.event-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 3rem;
}

.event-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.event-date {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.7rem;
}
.event-card h3 { margin-bottom: 0.6rem; font-size: 1.24rem; }
.event-card p { font-size: 0.97rem; margin-bottom: 1.4rem; }
.event-card .where {
  font-size: 0.87rem;
  color: var(--muted);
  margin: 0 0 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
/* Pin the link to the bottom so cards of differing text length still align. */
.event-card .more { margin-top: auto; }
.event-card .more a {
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.event-card .more a::after { content: " \2192"; }
.event-card .more a:hover { text-decoration: underline; }

/* The upcoming conference gets the emphasis treatment. */
.event-card--feature {
  background: var(--navy);
  border-color: var(--navy);
  color: rgba(255, 255, 255, 0.82);
}
.event-card--feature h3 { color: #fff; }
.event-card--feature .event-date { color: var(--gold); }
.event-card--feature .where { color: rgba(255, 255, 255, 0.6); border-top-color: rgba(255, 255, 255, 0.2); }
.event-card--feature .more a { color: var(--gold); }

.event-flag {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-900);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* ---------- event detail pages ---------- */

.event-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 5vw, 5rem);
}
.event-hero .eyebrow { color: var(--gold); }
.event-hero h1 { color: #fff; font-size: clamp(2rem, 1.5rem + 2.3vw, 3.1rem); }
.event-hero .standfirst {
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 62ch;
  margin-bottom: 0;
}
.crumb {
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
}
.crumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.crumb a:hover { color: var(--gold); }

.event-facts {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 2rem;
}
.event-facts li { min-width: 0; }
.event-facts dt,
.event-facts .label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.event-facts .value { color: #fff; font-size: 1rem; }

.event-body { background: var(--bg); }
.event-body h2 { margin-top: 0; }
.event-body h3 { margin-top: 2.5rem; }

.agenda { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.agenda li {
  display: grid;
  gap: 0.35rem 1.5rem;
  grid-template-columns: 1fr;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) {
  .agenda li { grid-template-columns: 150px minmax(0, 1fr); }
}
.agenda .time {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
  padding-top: 0.15rem;
}
.agenda .what { min-width: 0; color: var(--ink); }

.takeaways { margin: 1.5rem 0 0; padding-left: 1.25rem; }
.takeaways li { margin-bottom: 0.85rem; }
.takeaways strong { color: var(--navy); }

.pull {
  background: var(--bg-cream);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 1.6rem 1.8rem;
  margin: 2.5rem 0;
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--navy);
  line-height: 1.55;
}
.pull p:last-child { margin-bottom: 0; }

.event-nav {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding-block: 3rem;
}
.event-nav .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }

/* ---------- contact-list signup ---------- */
/* Posts to subscribe.php in this docroot, which proxies to Hostinger Reach.
   Reach's own endpoint sends no CORS headers, so a browser cannot call it
   directly. Same proxy and same form id as the conference site, so both feed
   one contact list. */

.updates {
  background: var(--teal);
  color: #fff;
  text-align: center;
}
.updates h2 { color: #fff; }
.updates .lede { color: rgba(255, 255, 255, 0.9); }

.signup { margin-top: 2.5rem; text-align: left; }

/* display:none removes it from layout entirely — an off-screen or clipped
   wrapper still lays its children out at full width and overflows. */
.signup-hp { display: none; }

.signup-grid {
  display: grid;
  gap: 1.1rem 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .signup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* E-mail is the only required field — give it the full row. */
  .signup-field:nth-child(3) { grid-column: 1 / -1; }
}

.signup-field { min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.signup-field label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.signup-field .req { color: var(--gold); }
.signup-field input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.signup-field input:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(241, 183, 62, 0.55);
}
.signup-field input[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.signup-submit { margin-top: 1.75rem; }
.signup-submit[disabled] { opacity: 0.65; cursor: progress; }

.signup-note { margin: 1rem 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.78); }

.signup-msg {
  margin: 1.25rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
.signup-msg.is-ok {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
  font-weight: 600;
}

/* ---------- contact ---------- */

.contact { background: var(--bg-cream); }

.contact-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 3rem;
}
.contact-card {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
}
.contact-card h3 { margin-bottom: 0.6rem; }
.contact-card p { font-size: 0.98rem; }
.contact-card ul { margin: 0 0 1.4rem; padding-left: 1.15rem; font-size: 0.97rem; }
.contact-card li { margin-bottom: 0.4rem; }
.contact-card .mail {
  font-family: var(--serif);
  font-size: 1.18rem;
  word-break: break-word;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.65);
  padding-block: 4rem 2.5rem;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-grid > div { min-width: 0; }
/* The footer is navy and the logo is drawn for light backgrounds, so it sits
   on a cream plate rather than being recoloured. */
.footer-logo {
  display: inline-block;
  background: var(--bg-cream);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.1rem;
  line-height: 0;
}
.site-footer .footer-logo img { display: block; width: 190px; height: auto; margin: 0; }
.site-footer h4 {
  color: #fff;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }

.colophon { padding-top: 2rem; font-size: 0.84rem; }
.colophon p { margin: 0 0 0.75rem; }
.anon-note { color: rgba(255, 255, 255, 0.5); max-width: 70ch; }