/* =========================================================================
   Concept B — Paddock Light
   Inspire Connections and Pathways
   Landscape-led and editorial, built around full-width photography.
   Cool overcast palette.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  --cloud:      #F0F1ED;  /* page background                               */
  --cloud-deep: #E4E6E0;  /* rules and fills                               */
  --eucalypt:   #5E7358;  /* primary, headings and small fields, 4.5:1     */
  --eucalypt-d: #47593F;  /* eucalypt for small text and hover              */
  --bark:       #2C2F2B;  /* body text and footer                           */
  --bark-70:    #5A5E58;  /* secondary text, 5.8:1 on cloud                 */
  --slate:      #7E95A3;  /* secondary accent                               */
  --slate-tint: #DDE4E9;  /* safety panel background                        */
  --slate-deep: #446072;  /* slate at text weight, 5.9:1 on cloud           */
  --lichen:     #9AA648;  /* call-to-action accent                         */
  --lichen-d:   #879242;  /* lichen, pressed                                */
  --rule:       rgba(44, 47, 43, 0.15);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-caption: 0.9375rem;                          /* 15px, captions        */
  --t-small:   1rem;                               /* 16px, interface       */
  --t-body:    1.125rem;                           /* 18px                  */
  --t-lead:    1.375rem;                           /* 22px                  */
  --t-h3:      1.5rem;                             /* 24px                  */
  --t-h2:      clamp(2rem, 4vw, 3rem);             /* 32 → 48px             */
  --t-h1:      clamp(2.25rem, 5.2vw, 4rem);        /* 36 → 64px             */
  --t-quote:   clamp(2rem, 5vw, 3.75rem);          /* 32 → 60px             */

  --column: 680px;       /* the measured text column                        */
  --wrap: 1280px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cloud);
  color: var(--bark);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.72;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: var(--serif); font-weight: 300; line-height: 1.14;
  letter-spacing: -0.005em; text-wrap: balance; margin: 0;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); color: var(--eucalypt); margin-bottom: 0.6em; }
h3 { font-size: var(--t-h3); font-weight: 400; line-height: 1.25; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; }
a { color: var(--eucalypt-d); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bark); }

:focus-visible { outline: 3px solid var(--slate-deep); outline-offset: 3px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--bark); color: var(--cloud); padding: 12px 20px; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- Layout: single measured column, wide margins ---------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 32px; }
.column {
  max-width: var(--column);
  margin-inline: auto;
  padding-inline: 32px;
}
/* On wide screens the column sits left of centre. */
@media (min-width: 1100px) {
  .column { margin-left: max(96px, calc((100vw - var(--wrap)) / 2 + 96px)); margin-right: 0; }
}
.section { padding-block: 104px; }
.section + .section,
.band + .section { padding-top: 0; }  /* the band's bottom margin already spaces the next section */

/* ---------- Header ---------- */
/* Sits over the hero, reversed. Not sticky. */
.site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 12; }
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 92px;
}
.wordmark { text-decoration: none; color: var(--cloud); display: inline-block; }
.wordmark__text { display: block; line-height: 1.12; }
.wordmark__l1 { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.wordmark__l2 { display: block; font-family: var(--serif); font-size: 1.0625rem; font-weight: 400;
  opacity: 0.86; }
.site-nav ul { list-style: none; display: flex; gap: 30px; }
.site-nav a { color: var(--cloud); font-size: var(--t-small); text-decoration: none;
  padding-bottom: 4px; border-bottom: 1px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--lichen); color: var(--cloud); }
.site-head :focus-visible { outline-color: var(--cloud); }

/* ---------- Hero: full bleed, 70vh, darkened lower third ---------- */
.hero { position: relative; height: 70vh; min-height: 520px; max-height: 820px;
  display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media .ph { height: 100%; width: 100%; aspect-ratio: auto; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(20, 24, 20, 0.36) 0%,
    rgba(20, 24, 20, 0.18) 34%,
    rgba(20, 24, 20, 0.62) 74%,
    rgba(20, 24, 20, 0.80) 100%);
}
.hero__content { position: relative; width: 100%; padding-bottom: 64px; color: var(--cloud); }
.hero__entity {
  font-size: var(--t-small); letter-spacing: 0.03em; margin-bottom: 18px;
  color: rgba(240, 241, 237, 0.9);
}
.hero h1 { color: var(--cloud); max-width: 17ch; margin-bottom: 34px; }
/* Hero fades up once on load. Disabled under reduced motion. */
.hero__content > .wrap > * { animation: rise 760ms cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.hero__content > .wrap > :nth-child(2) { animation-delay: 90ms; }
.hero__content > .wrap > :nth-child(3) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons: softly rounded, filled, restrained hover ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-block; border-radius: 6px;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 500; line-height: 1.2;
  padding: 15px 28px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn--solid { background: var(--lichen); color: var(--bark); }
.btn--solid:hover { background: var(--lichen-d); color: var(--bark); }
.btn--solid:active { background: #78823A; }
.btn--ghost { background: transparent; color: var(--cloud); border-color: rgba(240,241,237,0.6); }
.btn--ghost:hover { background: rgba(240, 241, 237, 0.14); color: var(--cloud);
  border-color: var(--cloud); }
/* On light sections the ghost button reverses to bark. */
.section .btn--ghost { color: var(--bark); border-color: rgba(44, 47, 43, 0.4); }
.section .btn--ghost:hover { background: rgba(44, 47, 43, 0.06); border-color: var(--bark); }

/* ---------- Prose ---------- */
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--bark); margin-bottom: 1.1em; }
.section p { max-width: 66ch; }

/* ---------- Mission pull-quote ---------- */
.section--mission .column:first-child { margin-bottom: 0; }
.pullquote {
  margin: 72px 0 76px;
  padding-inline: 32px;
  max-width: 1000px;
}
@media (min-width: 1100px) {
  .pullquote { margin-left: max(96px, calc((100vw - var(--wrap)) / 2 + 96px)); }
}
.pullquote p {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--t-quote); line-height: 1.16; letter-spacing: -0.015em;
  color: var(--eucalypt); max-width: 18ch; margin: 0;
  text-wrap: balance;
}

/* ---------- Full-bleed image bands ---------- */
.band { margin: 0 0 104px; }
.band .ph { aspect-ratio: 3 / 1; }
.band figcaption {
  max-width: var(--column); margin-inline: auto; padding: 16px 32px 0;
  font-size: var(--t-caption); line-height: 1.55; color: var(--bark-70);
}
@media (min-width: 1100px) {
  .band figcaption { margin-left: max(96px, calc((100vw - var(--wrap)) / 2 + 96px));
    margin-right: 0; }
}

/* ---------- Image placeholders ---------- */
.ph {
  background: var(--cloud-deep);
  border: 1px dashed rgba(44, 47, 43, 0.3);
  display: grid; place-items: center; padding: 32px; text-align: left;
}
.ph__body { max-width: 46ch; }
.ph__label { font-size: var(--t-caption); color: var(--slate-deep); margin-bottom: 10px; }
.ph__subject { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1.2;
  margin-bottom: 12px; color: var(--bark); }
.ph__spec { list-style: none; font-size: var(--t-caption); line-height: 1.55; color: var(--bark-70); }
.ph__spec li { padding-left: 18px; position: relative; }
.ph__spec li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 10px;
  height: 1px; background: var(--slate); }
/* Hero placeholder, only used if the photo is removed. Dark, with its copy set high
   so it clears the header and the headline. */
.hero .ph { background: #3F4A42; border-color: rgba(240, 241, 237, 0.34);
  place-items: start; padding: 116px 32px 32px; }
.hero .ph__subject { color: var(--cloud); }
.hero .ph__label, .hero .ph__spec { color: rgba(240, 241, 237, 0.82); }
.hero .ph__spec li::before { background: rgba(240, 241, 237, 0.5); }

/* ---------- Six points ---------- */
.points { margin-top: 44px; }
.point { padding-top: 30px; margin-top: 30px; border-top: 1px solid var(--rule); }
.point:first-child { margin-top: 0; }
.point h3 { color: var(--eucalypt); margin-bottom: 10px; }
.point p { font-size: var(--t-small); line-height: 1.65; color: var(--bark-70); }

/* ---------- Programs ---------- */
.program-list { margin-top: 12px; }
.program { padding-top: 36px; margin-top: 36px; border-top: 1px solid rgba(44, 47, 43, 0.28); }
.program h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); color: var(--eucalypt);
  margin-bottom: 14px; }
.program > p { max-width: 60ch; }
.program__meta {
  font-size: var(--t-caption); line-height: 1.6; color: var(--bark-70);
  margin-bottom: 0.5em; padding-left: 96px; text-indent: -96px;
}
.program__meta span {
  display: inline-block; width: 84px; margin-right: 12px; text-indent: 0;
  color: var(--slate-deep);
}

/* ---------- Safety panel ---------- */
.panel {
  background: var(--slate-tint);
  padding-block: 76px;
  border-top: 1px solid rgba(68, 96, 114, 0.22);
  border-bottom: 1px solid rgba(68, 96, 114, 0.22);
}
.panel h2 { color: var(--slate-deep); }
.panel__part { margin-top: 34px; padding-top: 26px;
  border-top: 1px solid rgba(68, 96, 114, 0.25); }
.panel__part h3 { color: var(--slate-deep); margin-bottom: 10px; font-size: 1.3125rem; }
.panel__part p { font-size: var(--t-small); line-height: 1.68; }

/* ---------- Governance ---------- */
.entities { margin: 36px 0 34px; display: grid; gap: 34px; }
@media (min-width: 760px) { .entities { grid-template-columns: 1fr 1fr; gap: 40px; } }
.entity { padding-top: 24px; border-top: 2px solid var(--eucalypt); }
.entity__kind { font-size: var(--t-caption); color: var(--slate-deep); margin-bottom: 6px; }
.entity h3 { color: var(--eucalypt); font-size: 1.3125rem; margin-bottom: 12px; }
.entity p { font-size: var(--t-small); line-height: 1.65; color: var(--bark-70); }

/* ---------- Get involved ---------- */
.routes { margin: 36px 0 56px; display: grid; gap: 30px; }
@media (min-width: 700px) { .routes { grid-template-columns: 1fr 1fr; gap: 34px 40px; } }
.route { padding-top: 20px; border-top: 1px solid var(--rule); }
.route h3 { font-size: 1.25rem; color: var(--eucalypt); margin-bottom: 8px; }
.route p { font-size: var(--t-small); line-height: 1.6; color: var(--bark-70); }

.h-form { margin-bottom: 26px; color: var(--eucalypt); }
.field-row { display: grid; gap: 0 20px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: var(--t-small); font-weight: 500; margin-bottom: 7px; }
.opt { font-weight: 400; color: var(--bark-70); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: var(--t-body); color: var(--bark);
  background: #FFFFFF; border: 1px solid rgba(44, 47, 43, 0.28);
  border-radius: 6px; padding: 13px 15px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate-deep); }
.field textarea { resize: vertical; }

.direct { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }
.direct h3 { color: var(--eucalypt); font-size: 1.25rem; margin-bottom: 14px; }
.direct p { font-size: var(--t-small); line-height: 1.8; }
.note { font-size: var(--t-caption); color: var(--bark-70); margin-top: 18px; }

/* ---------- Placeholders awaiting client input ---------- */
.tbc { font-size: var(--t-small); color: var(--bark-70); margin-top: 30px;
  padding-left: 20px; border-left: 3px solid var(--slate); }
.tbc strong { color: var(--slate-deep); font-weight: 500; }
.tbc-inline { font-size: var(--t-caption); color: var(--slate-deep); white-space: nowrap; }

/* ---------- Footer ---------- */
.site-foot { background: var(--bark); color: var(--cloud); padding-block: 80px 40px; }
.site-foot a { color: var(--cloud); }
.site-foot a:hover { color: #C3CE7A; }
.site-foot :focus-visible { outline-color: #C3CE7A; }
.site-foot__grid { display: grid; gap: 44px; }
@media (min-width: 900px) {
  .site-foot__grid { grid-template-columns: 1.5fr 1.1fr 0.7fr; gap: 56px; }
}
.wordmark--foot { color: var(--cloud); }
.acknowledgement { font-size: var(--t-caption); line-height: 1.68; margin-top: 22px;
  color: rgba(240, 241, 237, 0.82); max-width: 44ch; }
.h-foot { font-family: var(--sans); font-size: var(--t-small); font-weight: 500;
  color: #C3CE7A; margin-bottom: 14px; }
.site-foot p, .site-foot li { font-size: var(--t-caption); line-height: 1.7; }
.site-foot__nav ul { list-style: none; }
.site-foot__nav li { margin-bottom: 7px; }
.site-foot .tbc-inline { color: #C3CE7A; }
.site-foot__legal { margin-top: 56px; padding-top: 22px;
  border-top: 1px solid rgba(240, 241, 237, 0.22); color: rgba(240, 241, 237, 0.7); }

/* Photography */
.ph.is-photo { position: relative; padding: 0; border: 0; background: none; overflow: hidden; }
.ph.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Link back to the concept overview (presentation only, not part of the site) ---------- */
.concept-back {
  position: fixed; left: 16px; bottom: 16px; z-index: 30;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600; line-height: 1;
  padding: 11px 16px; border-radius: 999px;
  background: #1B1E20; color: #FFFFFF; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.concept-back:hover { background: #000000; color: #FFFFFF; }
.concept-back:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 0; box-shadow: 0 0 0 6px #1B1E20; }
@media print { .concept-back { display: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .column, .pullquote, .band figcaption { margin-inline: auto; }
}
@media (max-width: 860px) {
  .site-nav { display: none; } /* footer carries the section list */
  .section { padding-block: 76px; }
  .band { margin-bottom: 76px; }
  .hero { height: auto; min-height: 0; max-height: none; }
  .hero__media { position: relative; }
  .hero__media .ph { aspect-ratio: 4 / 3; height: auto; padding: 26px; place-items: center; }
  .hero__scrim { display: none; }
  /* Below the fold the hero text moves out from under the image, so the
     positioning line never depends on the photograph behind it. */
  .hero { display: block; background: var(--bark); }
  .hero__content { padding: 40px 0 52px; }
  .site-head { position: relative; background: var(--bark); }
}
@media (max-width: 620px) {
  :root { --t-body: 1.0625rem; --t-lead: 1.25rem; }
  .wrap { padding-inline: 22px; }
  .column { padding-inline: 22px; }
  .band figcaption { padding-inline: 22px; }
  .pullquote { padding-inline: 22px; margin-block: 52px; }
  .section { padding-block: 60px; }
  .band { margin-bottom: 60px; }
  .band .ph { aspect-ratio: 3 / 2; }
  .ph { padding: 22px; }
  .actions .btn { flex: 1 1 100%; text-align: center; }
  .program__meta { padding-left: 0; text-indent: 0; }
  .program__meta span { display: block; width: auto; margin: 0 0 2px; }
  .site-head__inner { min-height: 74px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__content > .wrap > * { animation: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-head, .skip, form { display: none; }
  body { background: #fff; font-size: 11pt; }
  .hero { height: auto; background: #fff; }
  .hero h1, .hero__entity { color: #000; }
  .hero__scrim { display: none; }
  .section { padding-block: 20pt; }
  .site-foot { background: #fff; color: #000; }
  .site-foot a, .wordmark--foot { color: #000; }
}