/* ==========================================================================
   Thinkers at Home
   Single landing page. Mobile first.

   Colour notes, because two of these are not the obvious choice:

   --accent (#C47A1E) is the brand amber. Against the cream background it
   measures 3.28:1, which clears the 3:1 bar for rules, borders and focus
   rings but fails the 4.5:1 bar for body text. So it is used for decoration
   and for button fills, never for small text.

   --accent-text (#9E6117) is a deepened amber used for the small letterspaced
   kickers. It measures 4.84:1 on cream and passes AA at any size.

   Amber buttons carry #1A1A1A text rather than white. White on #C47A1E is
   3.42:1 and fails. Near black on #C47A1E is 5.09:1 and passes.
   ========================================================================== */

:root {
  --bg: #FDFAF6;
  --primary: #2A7E72;
  --primary-dark: #1D5C53;
  --accent: #C47A1E;
  --accent-text: #9E6117;
  --accent-on-dark: #BFD9D3;
  --btn-ink: #1A1A1A;
  --text: #2C2C2C;
  --text-secondary: #6B6B6B;
  --surface: #F0EDE8;
  --border: #E0D8CE;

  --header-h: 58px;
  --wrap: 1120px;
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 8vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 5.4vw, 2.7rem); }
h3 { font-size: clamp(1.5rem, 4.4vw, 2rem); font-weight: 600; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-dark); }

strong { font-weight: 600; }

/* Focus. Amber ring on light ground, cream ring on the green blocks. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}
.section-green :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--bg);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary-dark);
  color: var(--bg);
  padding: 0.75rem 1.1rem;
  z-index: 200;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 900px) {
  .wrap { padding: 0 2rem; }
}

.measure { max-width: 62ch; }

.section { padding: 3.75rem 0; }

@media (min-width: 900px) {
  .section { padding: 6.5rem 0; }
}

/* ---------- recurring devices ---------- */

.kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 0.9rem;
}

.kicker-light { color: var(--accent-on-dark); }

/* Short amber rule beneath main headings. Left aligned, never centred. */
.ruled::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  background: var(--accent);
  margin-top: 1.15rem;
}

.section-head { margin-bottom: 1.75rem; }

@media (min-width: 900px) {
  .section-head { margin-bottom: 2.25rem; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 3px;
  padding: 0.85em 1.5em;
  cursor: pointer;
  min-height: 44px;
  text-align: center;
}

.btn-amber {
  background: var(--accent);
  color: var(--btn-ink);
}

.btn-amber:hover { background: #B06E19; }

.btn-sm {
  font-size: 0.9rem;
  padding: 0.6em 1.05em;
  min-height: 38px;
}

.btn-lg {
  font-size: 1.06rem;
  padding: 0.95em 1.9em;
}

/* On the green block the amber fill only reaches 2.27:1 against the ground,
   under the 3:1 needed to read as a distinct control. The cream ring supplies
   the boundary at 7.45:1. */
.btn-on-green { border-color: var(--bg); }

.cta-row { margin: 2rem 0 0; }

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

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: var(--bg);
  z-index: 100;
  transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--border), 0 4px 14px rgba(44, 44, 44, 0.05);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
}
.brand img { height: 25px; width: auto; }

.btn-tail { display: none; }

@media (min-width: 560px) {
  .brand img { height: 30px; }
  .btn-tail { display: inline; }
}

@media (min-width: 900px) {
  .brand img { height: 36px; }
}

/* ---------- header navigation ---------- */
/*
   Built to take more pages without a redesign. The links are a plain list, so
   adding a page means adding one <li> here and the matching link in the footer
   nav, and nothing in this block needs to change. The same list is a row on
   wide screens and a panel under the header below 900px.

   Measured at the tightest desktop width, 900px: eight items still sit on one
   row without crowding the logo or the button. If it is ever outgrown, raise
   the breakpoint rather than shrinking the type.

   "Join the community" is deliberately NOT in this list. It is the primary
   action and lives in .header-actions as a button, so it stays visually
   distinct from the nav links sitting next to it.
*/

.site-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--primary-dark); }

.site-nav a[aria-current="page"] {
  color: var(--primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* Menu button. Hidden on wide screens, where the row is always visible. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle-bars { position: relative; }

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Narrow: the list becomes a panel under the header. Absolutely positioned so
   opening it never changes the height of the fixed header. */
@media (max-width: 899px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 10px 20px rgba(44, 44, 44, 0.08);
    display: none;

    /* So a long list on a short screen scrolls inside the panel rather than
       running off the bottom with no way to reach the last link. */
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

  .site-nav.is-open { display: block; }

  .site-nav-list { padding: 0.25rem 1.25rem 0.75rem; }

  .site-nav a {
    padding: 0.85rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
  }

  .site-nav li:last-child a { border-bottom: 0; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }

  .site-nav-list {
    display: flex;
    align-items: center;
    gap: 1.6rem;
  }

  .site-nav a { padding: 0.5rem 0; }
  .header-actions { gap: 0.75rem; }
}

/* ---------- 1. hero ---------- */

.hero { padding: 2.5rem 0 0; }

.hero-grid { display: grid; gap: 2.25rem; }

.hero-copy .lede {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin: 1.5rem 0 1.15em;
}

.hero-plate img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 72%;
  border-radius: 2px;
}

@media (min-width: 900px) {
  .hero { padding: 4.5rem 0 1rem; }
  .hero-grid {
    grid-template-columns: 1fr 0.72fr;
    gap: 4rem;
    align-items: center;
  }
  .hero-copy .lede { font-size: 1.3rem; }
  .hero-plate img {
    aspect-ratio: 3 / 4;
    object-position: 50% 62%;
  }
}

/* ---------- 2. the problem ---------- */

.section-problem p { font-size: 1.09rem; }

.statement {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.5rem, 4.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--primary-dark);
  margin: 2rem 0 1.15em;
}

@media (min-width: 900px) {
  .section-problem p { font-size: 1.15rem; }
  .statement { margin: 2.75rem 0 1.15em; }
}

/* ---------- 3. the method ---------- */

.intro {
  font-size: 1.09rem;
  color: var(--text-secondary);
}

.pillars {
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem;
}

.pillar h3 {
  color: var(--primary);
  margin-bottom: 0;
}

.pillar h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin: 0.85rem 0 1.15rem;
}

@media (min-width: 820px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2.5rem;
    margin-top: 3.75rem;
  }
}

/* ---------- 4. video ---------- */

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-standin {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}

.video-standin-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  font-weight: 600;
  color: var(--primary-dark);
  margin: 0 0 0.4rem;
}

.video-standin-note {
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.98rem;
}

/* ---------- 5. the community ---------- */

.section-green {
  background: var(--primary-dark);
  color: var(--bg);
}

.section-green h2 { color: var(--bg); }

.section-green a:not(.btn) { color: var(--bg); }

.cta-note {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: var(--accent-on-dark);
}

.cta-note[hidden] { display: none; }

/* ---------- 6. about ---------- */

.about-grid { display: grid; gap: 2rem; }

.about-photo img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

@media (min-width: 820px) {
  .about-grid {
    grid-template-columns: 0.58fr 1fr;
    gap: 3.5rem;
    align-items: start;
  }
  .about-photo { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ---------- 7. register interest ---------- */

.section-register { border-top: 1px solid var(--border); }

.register-grid { display: grid; gap: 2.5rem; }

.register-plate img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 70%;
  border-radius: 2px;
}

@media (min-width: 900px) {
  .register-grid {
    grid-template-columns: 0.72fr 1fr;
    gap: 4rem;
    align-items: center;
  }
  .register-plate { order: -1; }
  .register-plate img {
    aspect-ratio: 3 / 4;
    object-position: 50% 55%;
  }
}

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

.register-form { margin-top: 2rem; max-width: 26rem; }

.field { margin-bottom: 1.15rem; }

.field label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.field-optional {
  font-weight: 400;
  color: var(--text-secondary);
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  padding: 0.75rem 0.85rem;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 3px;
  min-height: 46px;
}

.field textarea {
  resize: vertical;
  display: block;
}

.field input:hover,
.field textarea:hover { border-color: #CBBFB1; }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #A33A1F; }

.form-error {
  color: #A33A1F;
  font-size: 0.95rem;
  margin: 0 0 1rem;
  font-weight: 500;
}

.form-error[hidden] { display: none; }

.form-thanks {
  margin: 1.5rem 0 0;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: 2px;
  font-weight: 500;
  max-width: 26rem;
}

.form-thanks[hidden] { display: none; }

.micro {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

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

.site-footer {
  background: var(--primary-dark);
  color: var(--bg);
  padding: 3rem 0 2.5rem;
}

.footer-brand img { height: 32px; width: auto; }

.footer-tagline {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin: 1rem 0 0;
  color: var(--bg);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.75rem;
  margin: 1.9rem 0 0;
}

/* Underline drawn with text-decoration rather than a border, so the vertical
   padding below can grow the tap target without pushing the rule off the text. */
.footer-nav a,
.footer-legal a {
  display: inline-block;
  color: var(--bg);
  text-decoration: underline;
  text-decoration-color: rgba(253, 250, 246, 0.4);
  text-underline-offset: 4px;
  padding: 0.6rem 0;
}

.footer-nav a:hover,
.footer-legal a:hover { text-decoration-color: var(--bg); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 2.5rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(253, 250, 246, 0.2);
  font-size: 0.92rem;
  color: var(--bg);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

@media (min-width: 700px) {
  .site-footer { padding: 4rem 0 3rem; }
  .footer-brand img { height: 38px; }
  .footer-legal { justify-content: space-between; }
}

/* ---------- long form pages ---------- */

/* The h1 scale is tuned for the short landing page headline. An article title
   is a sentence, so it is stepped down here to stop it running to five lines
   on a phone. Scoped to .page-article so the hero is untouched. */
.page-article h1 {
  font-size: clamp(1.75rem, 6.4vw, 2.7rem);
}

/* .lede is scoped to .hero-copy on the landing page, so it is restated here
   for article pages that use the same device below the h1. */
.page-article .lede {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
}

/* Dated currency note. Same device as .form-thanks so the page reads as part
   of the same site. */
.last-checked {
  padding: 1rem 1.15rem;
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: 2px;
  font-size: 0.95rem;
  margin: 0 0 1.15em;
}

/* In-article headings sit a step below the landing page h2, which is sized for
   full width sections rather than a 62ch measure. */
.prose h2 {
  margin-top: 3rem;
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
}

.prose h2 + p { margin-top: 1.4rem; }

.page-signoff {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.95rem;
}

@media (min-width: 900px) {
  .page-article .lede { font-size: 1.3rem; }
  .prose h2 { margin-top: 4rem; }
}