/* ============================================================
   Connecting Farmers Conference — shared styles
   Brand: deep forest green + cream, gold & rust accents
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Montserrat:wght@400;500;600;700&family=Kaushan+Script&display=swap');

:root{
  --green-900:#0f2e1d;
  --green-800:#173d27;
  --green-700:#1f4d33;
  --green-600:#2b6544;
  --green-400:#5f8c6f;
  --cream:#f7f3e8;
  --cream-2:#efe8d6;
  --paper:#fffdf8;
  --gold:#c8941f;
  --gold-soft:#e2b957;
  --rust:#a4491e;
  --ink:#20281f;
  --muted:#5a6656;
  --line:#ddd4bf;
  --shadow:0 10px 30px rgba(15,46,29,.12);
  --shadow-sm:0 4px 14px rgba(15,46,29,.10);
  --radius:14px;
  --maxw:1140px;

  /* ── Innovative Farmers Network (host brand) ──────────────────
     From the IFN Brand Guideline, July 2026. The event keeps its own
     Connecting Farmers identity so the site still matches the sponsorship
     poster in circulation; these are the host brand's colours.
     ACCESSIBILITY: only Emerald carries body text safely. Shamrock is
     ~3:1 on white (large text / graphics only); Pesto ~1.8:1 and Lemon
     ~1.1:1 are decorative ONLY — never type. The guideline agrees:
     "Body Copy: Use black or white for optimal readability." */
  --ifn-emerald:#006933;
  --ifn-shamrock:#00A451;
  --ifn-pesto:#A4CC3A;
  --ifn-sky:#00ABED;
  --ifn-tomato:#EC4024;
  --ifn-lemon:#FFF000;
  --ifn-white:#F3F5F8;
  --ifn-black:#241F20;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green-700);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;line-height:1.15;color:var(--green-900);font-weight:600;margin:0 0 .4em}

/* Line breaking.
   `balance` evens out the lines of short blocks — headings, leads, captions —
   so you don't get three full lines and a single stranded word.
   `pretty` is the cheaper cousin for longer body copy: it only pulls the last
   line up to avoid a one-word widow. Both are ignored by browsers that don't
   support them, so there's no fallback to write. */
h1,h2,h3,h4{text-wrap:balance}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em;text-wrap:pretty}

/* Italic glyphs lean past their right edge, so an <em> followed by a word
   reads as though the space were missing ("Panels offarmers"). Give the
   slant somewhere to land. */
em{padding-right:.055em}

.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:72px 0}
.section--tight{padding:48px 0}
.center{text-align:center}
.lead{font-size:1.15rem;color:var(--muted);max-width:66ch;text-wrap:balance}
.center .lead{margin-left:auto;margin-right:auto}

.eyebrow{
  font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:.78rem;color:var(--rust);margin:0 0 .5rem;
}

/* ---------- Logo lockup ----------
   Mirrors the sponsorship poster already circulating with sponsors: heavy
   uppercase CONNECTING, brush-script Farmers tucked under it, and the leafy
   branch sweeping off the right. Sizes are driven by custom properties so the
   hero, nav and footer share one component instead of three lookalikes. */
.logo{
  --logo-c:2.6rem;      /* CONNECTING */
  --logo-f:3.1rem;      /* Farmers */
  --logo-ink:var(--green-900);
  --logo-script:var(--green-700);
  --logo-rule:var(--gold);
  display:inline-flex;flex-direction:column;align-items:center;
  line-height:.84;text-align:center;
}
/* The branch is positioned against the type block alone, never the meta line —
   anchoring it to .logo would let it drift down over "September 1–3, 2026". */
.logo__type{position:relative;display:inline-flex;flex-direction:column;align-items:center}
.logo__c,.logo__f{position:relative;z-index:1}
.logo__c{
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;
  font-size:var(--logo-c);letter-spacing:.055em;text-indent:.055em;
  text-transform:uppercase;color:var(--logo-ink);
}
.logo__f{
  font-family:'Kaushan Script',cursive;
  font-size:var(--logo-f);color:var(--logo-script);
  /* Kaushan's ascenders (F, l) run tall. Too little clearance here and they
     collide with CONNECTING's baseline, which is what made the lockup hard to
     read at hero size. */
  margin-top:-.06em;padding-right:.08em;
}
/* CONFERENCE | SEPTEMBER 1–3, 2026 */
.logo__meta{
  display:flex;align-items:center;justify-content:center;
  gap:.55em;flex-wrap:wrap;
  margin-top:.62em;
  font-family:'Montserrat',sans-serif;font-weight:700;
  /* These scale off the wordmark, which shrinks on phones — without the floor
     the date line dropped to 8px and the location to 6px. max() keeps them
     readable no matter how small the lockup gets. */
  font-size:max(.8rem, calc(var(--logo-c) * 0.245));
  letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  color:var(--logo-ink);
}
.logo__meta i{font-style:normal;opacity:.45;font-weight:400}
.logo__meta em{font-style:normal;color:var(--rust)}
/* Location line, as on the poster */
.logo__place{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  margin-top:.5em;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:max(.78rem, calc(var(--logo-c) * 0.2));
  letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;
  color:var(--logo-ink);opacity:.85;
}

/* On the dark hero and footer the lockup inverts */
.logo--on-dark{
  --logo-ink:#fff;
  --logo-script:var(--gold-soft);
}
.logo--on-dark .logo__meta em{color:var(--gold-soft)}

/* Hero lockup scales with the viewport */
.logo--hero{--logo-c:clamp(1.95rem,6.2vw,4rem);--logo-f:clamp(2.45rem,7.7vw,4.9rem)}

/* Compact stacked lockup for the sticky header. The branch is dropped below
   860px — at nav scale its leaves turn to mush next to the script. */
.logo--nav{--logo-c:.95rem;--logo-f:1.3rem;padding:8px 0;line-height:.95}
.logo--nav .logo__f{margin-top:.06em}

/* Footer lockup */
.logo--footer{--logo-c:1.3rem;--logo-f:1.78rem}

/* Safety net: the leaf was removed from the markup, but a browser holding
   cached HTML alongside fresh CSS would render the <img> unconstrained at its
   natural size and blow the nav apart. Cheap insurance while the site is being
   reviewed by people with stale copies. Removable once caches have turned over. */
.logo__leaf{display:none !important}

/* The nav lockup is a link — keep the global a:hover underline off it */
a.logo:hover{text-decoration:none}

/* ---------- Host co-brand: Innovative Farmers Network ----------
   The event brand leads; IFN is the host. Kept visually subordinate so the
   site still reads as the same event the sponsorship poster shows. */
.hostmark{
  display:inline-flex;align-items:center;gap:.7rem;min-height:44px;
  font-family:'Montserrat',sans-serif;
  text-decoration:none;
}
.hostmark:hover{text-decoration:none}
.hostmark__label{
  /* .62rem rendered at 9.9px on a phone, below the 12px floor we hold
     everywhere else. Most visitors are on a phone, so it gets a floor too. */
  font-size:max(.7rem, 11px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;line-height:1.3;
}
.hostmark img{width:var(--hostmark-w,150px);height:auto}

/* Header: sits beside the event lockup, separated by a hairline */
.nav__brands{display:flex;align-items:center;gap:22px;min-width:0}
.nav__brands .hostmark{--hostmark-w:118px;padding-left:22px;border-left:1px solid var(--line)}
@media(max-width:1040px){.nav__brands .hostmark{display:none}}

/* Footer sits on deep green — use the inverted lockup */
.site-footer .hostmark{--hostmark-w:190px;margin-top:16px}
.site-footer .hostmark__label{color:#9fb29c}

/* Presented-by strip under the hero */
.presented{
  background:var(--ifn-emerald);color:#fff;
  padding:14px 0;text-align:center;
}
.presented__inner{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:0 22px;
}
.presented .hostmark{--hostmark-w:200px}
.presented .hostmark__label{color:rgba(255,255,255,.82)}
.presented__note{
  font-size:.9rem;color:rgba(255,255,255,.9);margin:0;max-width:44ch;text-align:left;
}
@media(max-width:640px){.presented__note{text-align:center}}


/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-weight:600;font-family:'Montserrat',sans-serif;
  padding:.8rem 1.5rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:.18s ease;font-size:1rem;text-align:center;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--primary{background:var(--gold);color:var(--green-900)}
.btn--primary:hover{background:var(--gold-soft)}
.btn--dark{background:var(--green-800);color:#fff}
.btn--dark:hover{background:var(--green-700)}
.btn--ghost{border-color:var(--green-700);color:var(--green-800);background:transparent}
.btn--ghost:hover{background:var(--green-800);color:#fff}
.btn--lg{padding:1rem 2rem;font-size:1.08rem}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(247,243,232,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;max-width:var(--maxw);margin:0 auto}
.nav__links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav__links a{
  padding:.45rem .7rem;border-radius:8px;color:var(--green-800);font-weight:500;font-size:.95rem;
}
.nav__links a:hover{background:var(--cream-2);text-decoration:none}
.nav__links a.active{color:var(--rust)}
.nav__cta{margin-left:6px}
/* 44px minimum — this is the primary navigation control on a phone and it was
   rendering as a 28px tap target. */
.nav__toggle{
  display:none;background:none;border:0;font-size:1.6rem;color:var(--green-800);
  cursor:pointer;line-height:1;min-width:44px;min-height:44px;
  align-items:center;justify-content:center;padding:0;margin:-4px;
}

@media(max-width:860px){
  .nav__toggle{display:flex}
  .nav__links{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;background:var(--cream);border-bottom:1px solid var(--line);
    padding:10px 16px 16px;gap:2px;
  }
  .nav__links.open{display:flex}
  .nav__links a{padding:.7rem .6rem}
  .nav__cta{margin:8px 0 0}
}

/* ---------- Hero ---------- */
/* The scrim is lighter at the top (illustration reads) and heavier lower down
   where the tagline and buttons sit, so the artwork shows without costing
   contrast on the white type. */
.hero{position:relative;color:#fff;text-align:center;overflow:hidden;
  background:linear-gradient(rgba(15,46,29,.44),rgba(15,46,29,.62) 55%,rgba(15,46,29,.66)),
    url('assets/hero.svg') center/cover no-repeat, var(--green-800);
}
.hero__inner{max-width:820px;margin:0 auto;padding:96px 22px 88px}
.hero__meta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:1.2rem 0 1.8rem;font-weight:600}
.hero__pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:.5rem 1rem;border-radius:999px;font-size:.98rem}
/* Links on dark backgrounds inherit the surrounding colour — the default green
   would be invisible against the hero and the media-band caption. */
.hero__pill a,.media-band__caption a,.presented a,.pullquote a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hero__pill a:hover,.media-band__caption a:hover{color:var(--gold-soft)}
.hero__tag{font-size:1.15rem;color:#f4efe1;max-width:60ch;margin:0 auto 1.8rem;text-wrap:balance}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Pillars ---------- */

/* ---------- Generic cards / grids ---------- */
.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
/* Cards sit at the top of their row instead of stretching to match the tallest.
   A speaker with no biography beside one with a long paragraph was otherwise
   left with a large empty panel below the name. */
.grid--3{align-items:start}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid--3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid--3,.grid--2{grid-template-columns:1fr}}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.card__body{padding:22px}

/* ---------- Bands ---------- */
.band{background:var(--green-800);color:#f4efe1}
.band h2{color:#fff}
.band .lead{color:#d9e4d5}
.band--cream{background:var(--cream-2);color:var(--ink)}
.band--cream h2{color:var(--green-900)}

/* ---------- Facts strip ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.fact__n{font-family:'Fraunces',serif;font-size:2rem;color:var(--gold-soft);font-weight:600;display:block}
.band--cream .fact__n{color:var(--rust)}
.fact__l{font-size:.95rem;opacity:.9}
@media(max-width:720px){.facts{grid-template-columns:1fr 1fr}}

/* ---------- Highlights list ---------- */
.hl{display:flex;gap:16px;align-items:flex-start}
.hl__mark{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--cream-2);color:var(--green-700);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.hl h3{font-size:1.12rem;margin-bottom:.2em}
.hl p{color:var(--muted);margin:0;text-wrap:balance}

/* ---------- Speakers ---------- */
/* height:auto, not 100%: with align-items:start the row no longer stretches
   its items, and a card with no biography should end where its text ends. */
.speaker{display:flex;flex-direction:column;height:auto}
.speaker__photo{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--green-700),var(--green-600));color:#fff;font-family:'Fraunces',serif;font-size:2.6rem;font-weight:600}
/* A supplied photo fills the square; the gradient and initials stay as the
   fallback for everyone whose photo has not come in yet. */
.speaker__photo img{width:100%;height:100%;object-fit:cover;display:block}
.speaker__body{padding:20px;flex:1;display:flex;flex-direction:column}
.speaker__name{font-family:'Fraunces',serif;font-size:1.2rem;color:var(--green-900);margin:0 0 2px}
.speaker__farm{color:var(--rust);font-weight:600;font-size:.92rem;margin-bottom:10px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tag{background:var(--cream-2);color:var(--green-800);font-size:.76rem;font-weight:600;padding:.25rem .6rem;border-radius:999px}
.speaker__bio{color:var(--muted);font-size:.94rem;margin:0}

/* Funder credit. Quiet by design — it is an attribution, not a message, so it
   sits below the speakers without competing with the call to action after it. */
.funding-credit{
  max-width:78ch;margin:0 auto;text-align:center;
  font-size:.88rem;color:var(--muted);font-style:italic;
  padding-top:6px;border-top:1px solid var(--line);
}

/* ---------- Agenda timeline ---------- */
.day-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin:0 0 4px}
.day-head h3{font-size:1.6rem;margin:0}
.day-head .date{color:var(--rust);font-weight:700}
.day-route{color:var(--muted);font-style:italic;margin:0 0 18px}
.tl{border-left:3px solid var(--line);margin-left:8px;padding-left:0}
.tl__item{position:relative;padding:0 0 22px 26px}
.tl__item::before{content:"";position:absolute;left:-9px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--gold);border:3px solid var(--cream)}
.tl__time{font-weight:700;color:var(--green-800);font-size:.95rem}
.tl__title{font-weight:600;color:var(--ink)}
.tl__desc{color:var(--muted);font-size:.95rem;text-wrap:balance}
.tl__item--tour::before{background:var(--green-600)}
.tl__item--social::before{background:var(--rust)}

/* Facilitator / participant lists inside an agenda item. Indented and lighter
   than the description above them so a long panel roster reads as supporting
   detail rather than as more prose. */
.panel{margin-top:.55rem}
.panel__role{
  margin:.5rem 0 .15rem;font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-800);
}
.panel__list{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.93rem}
.panel__list li{margin:.15rem 0}
/* Each Thursday participant is a farmer paired with their Living Labs lead.
   The connector is set quieter so the two names stay legible as a pair. */
.panel__pair{color:var(--green-600);font-weight:600;font-size:.85em;padding:0 .15em}

/* The whole Wednesday evening is one sold-out ticketed programme. Flagged as a
   band rather than a timed item, because it applies to the three items that
   follow it rather than to a slot of its own. */
.tl__item--soldout{padding-bottom:14px}
.tl__item--soldout::before{background:var(--rust);opacity:.45}
.tl__item--soldout .tl__title{
  color:var(--rust);font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
}
/* Legend on the left, day jump-links on the right. Stacks on narrow screens. */
.legend-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px 24px;flex-wrap:wrap;margin:6px 0 26px;
}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}

/* Day navigation. On a phone this is the fastest way to reach the day you
   care about, instead of scrolling the whole schedule. */
.daynav{display:flex;gap:8px;flex-wrap:wrap}
.daynav a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.4rem .9rem;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);
  color:var(--green-800);font-weight:600;font-size:.88rem;
  white-space:nowrap;transition:.18s ease;
}
.daynav a:hover{background:var(--green-800);border-color:var(--green-800);color:#fff;text-decoration:none}
/* The sticky header would otherwise cover the heading we jump to */
.day-head{scroll-margin-top:96px}

@media(max-width:760px){
  .legend-row{justify-content:flex-start}
  /* one scrollable row rather than a wrapped block that shoves the schedule down */
  .daynav{
    width:100%;flex-wrap:nowrap;overflow-x:auto;
    padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .daynav::-webkit-scrollbar{display:none}
  .daynav a{flex:0 0 auto}
}
@media(max-width:420px){
  /* drop the theme word, keep the day: "Wed 2" rather than "Wed 2 · Profit" */
  .daynav a span{display:none}
}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}

/* ---------- Sponsors ---------- */
.tier{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm);height:100%;display:flex;flex-direction:column}
.tier__head{padding:18px 20px;color:#fff}
.tier__head .price{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600}
.tier__head .name{font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.85rem;opacity:.95}
.tier--platinum .tier__head{background:var(--green-900)}
.tier--gold .tier__head{background:var(--gold)}
.tier--gold .tier__head *{color:var(--green-900)}
.tier--silver .tier__head{background:#7c8a80}
.tier--bronze .tier__head{background:var(--rust)}
.tier__body{padding:18px 20px;flex:1}
.tier__body ul{margin:0;padding-left:1.1em}
.tier__body li{margin-bottom:.4em;color:var(--muted);font-size:.94rem;text-wrap:balance}
/* The level card has to close the sale on its own, so the button lives in the
   card next to the price rather than at the bottom of the page. */
.tier__body{display:flex;flex-direction:column}
.tier__body ul{flex:1}
.tier__choose{width:100%;margin-top:16px;border:0;font:inherit;font-weight:700;cursor:pointer}

/* Tighter pairing inside a form, where the default 22px grid gap fights the
   18px field rhythm. */
.grid--tight{gap:0 18px}
@media(max-width:640px){.grid--tight{gap:0}}

.field input[type=file]{
  width:100%;padding:.6rem .7rem;font:inherit;font-size:1rem;
  background:var(--cream);border:1px dashed var(--line);border-radius:10px;cursor:pointer;
}
.field input[type=file]::file-selector-button{
  font:inherit;font-weight:600;margin-right:12px;padding:.4rem .8rem;cursor:pointer;
  border:0;border-radius:8px;background:var(--green-800);color:#fff;
}
.form-error{
  margin:12px 0 0;padding:.7rem .85rem;border-radius:10px;font-size:.94rem;
  background:#fdeceb;border:1px solid #e7b7b2;color:#8c2d22;
}
/* Off-screen rather than display:none, so bots that skip hidden fields
   still fill it in. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sponsor-wall{display:grid;gap:16px}
.tier-label{font-family:'Fraunces',serif;font-size:1.15rem;color:var(--green-800);margin:14px 0 2px}

/* Sponsor recognition card: logo panel plus a one or two sentence bio.
   The mark falls back to the sponsor's name set in type until a real logo
   file arrives, so the layout is never waiting on an asset. */
/* One card per row, full container width, matching the Platinum profile card
   above so every sponsor sits on the same footprint regardless of how much
   artwork or copy they have. */
.sponsor-cards{display:grid;grid-template-columns:1fr;gap:16px}
.sponsor-card{
  display:flex;gap:20px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px 20px;
}
/* A logo lockup with a tagline needs real width. At the old 116px the
   'Investments. Insurance. Advice.' line rendered a few pixels tall and was
   unreadable, which read as a bad logo rather than a small one. */
.sponsor-card__mark{
  flex:0 0 340px;min-height:84px;display:flex;align-items:center;justify-content:center;
  padding:6px;
}
/* Cap BOTH dimensions. With width alone, a wide wordmark stretched to the full
   panel while a square mark stayed small, so logos that cost the same money
   carried very different visual weight. */
.sponsor-card__mark img{max-width:240px;max-height:70px;width:auto;height:auto;object-fit:contain}
@media(max-width:520px){
  /* Side by side leaves the bio too narrow to read on a phone. */
  .sponsor-card{flex-direction:column;align-items:flex-start;gap:14px}
  .sponsor-card__mark{flex:0 0 auto;width:100%;min-height:0;justify-content:flex-start}
  .sponsor-card__mark img{max-height:60px}
}
.sponsor-card__mark span{
  font-family:'Fraunces',serif;font-weight:600;color:var(--green-800);
  font-size:.95rem;text-align:center;line-height:1.15;
}
.sponsor-card h3{margin:0 0 3px;font-size:1.05rem}
.sponsor-card p{margin:0;color:var(--muted);font-size:.93rem;text-wrap:pretty}

/* ---------- Event partners ---------- */
.partner-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;margin:30px auto 0;max-width:820px;
}
/* White rather than --paper: the PEI mark is supplied as an opaque
   white-background JPEG, and on the warm paper tone its edges would show as a
   pale rectangle. White seats both marks — one opaque, one transparent — with
   no visible plate. */
.partner-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:26px 24px;text-align:center;
}
/* A fixed-height panel is what gives two logos of different proportions equal
   visual weight; contain keeps each at its own aspect ratio rather than
   stretching either to fit. */
.partner-card__mark{
  height:132px;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.partner-card__mark img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Stand-in until the supplied logo file is in assets/partners/. Deliberately
   plain so an unfinished card is obvious rather than looking intentional. */
.partner-card__pending{
  font-family:'Fraunces',Georgia,serif;color:var(--green-800);
  font-size:1.05rem;text-align:center;line-height:1.2;opacity:.55;
}
.partner-card h3{
  margin:0;font-size:1rem;color:var(--green-800);text-wrap:balance;
}
@media(max-width:560px){
  .partner-card__mark{height:110px}
}

/* Some sponsor artwork is a full block, logo plus the local office's contact
   details, rather than a bare mark. At the standard 200px panel that text
   renders around 7px tall and is unreadable, so the card takes the full row
   and the panel gets real height. */
/* The Co-operators artwork is a full block, logo over the local office
   details, so it needs more height than a bare mark to stay readable. */
.sponsor-card__mark--block img{max-width:100%;max-height:200px}
@media(max-width:760px){
  .sponsor-card__mark--block{flex:0 0 auto;width:100%}
  .sponsor-card__mark--block img{max-height:none;width:100%}
}

/* ---------- Speakers map ----------
   Where people are travelling from, so the national scope reads at a glance
   before anyone starts on the bios. Regenerate with
   scripts/build-canada-map.py after changing which provinces are pinned. */
.cmap-wrap{max-width:860px;margin:30px auto 0}
.cmap{width:100%;height:auto;display:block}
.cmap__land path{
  /* A soft sage, not a brand token: it has to sit distinctly on both the
     cream band behind it and the paper background if the section moves. */
  fill:#e3ece0;stroke:var(--green-800);
  stroke-width:1.4;stroke-linejoin:round;
}
.cmap__halo{fill:var(--rust);opacity:.16}
.cmap__dot{fill:var(--rust);stroke:var(--paper);stroke-width:2}
.cmap__leader{stroke:var(--muted);stroke-width:1.1;stroke-dasharray:3 4;opacity:.7}
.cmap__pin--host .cmap__dot{fill:var(--gold)}
.cmap__pin--host .cmap__halo{fill:var(--gold)}
.cmap__label{
  font-family:'Montserrat',system-ui,sans-serif;font-weight:700;font-size:15px;
  fill:var(--green-900);
}
.cmap__note{
  font-family:'Montserrat',system-ui,sans-serif;font-weight:400;font-size:12.5px;
  fill:var(--muted);
}
@media(max-width:620px){
  .cmap__label{font-size:19px}
  .cmap__note{font-size:16px}
}

/* Speaker links are shown as readable text rather than bare 'here' links,
   so it is obvious where each one goes before anyone taps it. */
.speaker__links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 0}
.speaker__links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9rem;font-weight:600;color:var(--green-700);
  text-decoration:underline;text-underline-offset:3px;
}
.speaker__links a::before{content:"↗";margin-right:6px;opacity:.7;text-decoration:none}

/* Funding note. Deliberately quiet: this conference is farmer-led first, and
   the program tie-in is practical help, not the headline. */
.fund-note{
  max-width:820px;margin:0 auto;padding:26px 28px;
  background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--green-600);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.fund-note h3{margin:0 0 .5em;font-size:1.15rem}
.fund-note p{color:var(--muted);font-size:.96rem;margin:0 0 .7em;text-wrap:balance}
.fund-note strong{color:var(--green-800)}
.fund-note__list{margin:0 0 .8em;padding-left:1.15em;color:var(--muted);font-size:.95rem}
.fund-note__list li{margin-bottom:.35em;text-wrap:pretty}
.fund-note__ask{margin-bottom:0;font-size:.92rem}

/* Who a sponsor reaches. Three plain columns, no cards: this sits inside a
   page whose job is to be short. */
.reach{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
@media(max-width:760px){.reach{grid-template-columns:1fr;gap:20px}}
.reach__item{text-align:center}
.reach__icon{
  width:52px;height:52px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--green-800);font-size:1.4rem;
}
.reach__item h3{color:var(--green-800);margin-bottom:.3em}
.reach__item p{color:var(--muted);margin:0;text-wrap:balance}


/* ---------- Sponsor profile ----------
   Reusable: logo panel on the left, story on the right. Drop in another
   .sponsor-profile per sponsor as their copy and logos are confirmed. */
.sponsor-profile{
  display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:32px;
}
.sponsor-profile__mark{
  display:flex;align-items:center;justify-content:center;
  padding:24px 18px;min-height:140px;
}
/* The stacked lockup is near-square, unlike the wide wordmark it replaced,
   so it needs less width to read at the same visual weight. */
.sponsor-profile__mark img{width:100%;height:auto;max-width:240px}
.sponsor-profile__tier{
  font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .35rem;
}
.sponsor-profile h3{font-size:1.45rem;margin-bottom:.15em}
.sponsor-profile__role{color:var(--rust);font-weight:600;font-size:.95rem;margin:0 0 1rem}
.sponsor-profile p{color:var(--muted);margin:0 0 .9em}
.sponsor-profile p:last-child{margin-bottom:0}
.sponsor-profile__link{font-weight:600}
/* The link at the foot of the profile is the horizontal bird lockup rather
   than a text URL. Padding keeps the tap target at 44px, since the artwork
   itself is only about 32px tall. */
.sponsor-profile__link--mark{
  display:inline-flex;align-items:center;min-height:44px;padding:6px 0;
  text-decoration:none;
}
.sponsor-profile__link--mark img{width:190px;height:auto;display:block}
.sponsor-profile__link--mark:hover{opacity:.8}
@media(max-width:760px){
  .sponsor-profile{grid-template-columns:1fr;gap:22px;padding:24px}
  .sponsor-profile__mark{min-height:0;padding:22px}
}

/* ---------- Forms ---------- */
.form-wrap{max-width:720px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;margin-bottom:6px;color:var(--green-900)}
.field .req{color:var(--rust)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;padding:.75rem .85rem;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold-soft);border-color:var(--gold)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
@media(max-width:600px){.checks{grid-template-columns:1fr}}
.check{display:flex;gap:9px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;cursor:pointer;font-size:.95rem}
.check input{margin-top:.15rem;width:20px;height:20px;flex:0 0 auto;accent-color:var(--green-600)}
/* An option that exists but is no longer available. Shown rather than removed
   so the reader can see what the event includes and that it is closed, instead
   of wondering whether it was ever offered. */
.check--gone{opacity:.5;cursor:not-allowed;background:var(--cream-2)}
.check--gone input{cursor:not-allowed}
.check--gone .tagx{display:block;font-size:.78rem;font-weight:600;color:var(--rust);letter-spacing:.02em;margin-top:2px}
.form-note{font-size:.86rem;color:var(--muted)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:600px){.two-col{grid-template-columns:1fr}}
.dev-note{background:#fff8e6;border:1px dashed var(--gold);border-radius:10px;padding:12px 14px;font-size:.86rem;color:#6b5312;margin-bottom:22px}

/* ---------- Info blocks ---------- */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:760px){.info-grid{grid-template-columns:1fr}}
.info-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.info-card h3{color:var(--green-800)}
.info-card .meta{color:var(--muted);font-size:.95rem;margin:0}
/* .meta has no bottom margin, so a note following it would sit flush against
   the last line and read as part of the same paragraph. Match the 10px gap
   used between the other paragraphs in the card. */
.info-card .form-note{margin-top:10px}

/* ---------- Media: page banner, figures, galleries ---------- */
/* Illustrations are placeholders for real photography. To swap one in,
   replace the file in assets/ (or point the <img src> at a photo) — the
   aspect ratio and cropping are handled here, not in the markup. */
.media-band{position:relative;overflow:hidden;background:var(--green-800)}
.media-band img{width:100%;height:clamp(240px,38vw,420px);object-fit:cover}
.media-band__caption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 22px 20px;
  background:linear-gradient(transparent,rgba(15,46,29,.82));color:#f4efe1;
}
/* The caption names the bridge, so bias the crop upward to keep the horizon
   in frame at narrow widths instead of centring on bare soil. */
.media-band--horizon img{object-position:center 30%}
/* The sunset sky is the whole point of this frame, so hold it in the crop
   rather than centring on sand. */
.media-band--sky img{object-position:center 42%}
.media-band__caption .inner{max-width:var(--maxw);margin:0 auto}
.media-band__caption p{margin:0;font-size:.95rem;color:#d9e4d5}
.media-band__caption strong{color:#fff;font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600}

.figure{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.figure img{width:100%;height:210px;object-fit:cover}
.figure figcaption{padding:14px 16px;font-size:.93rem;color:var(--muted);flex:1;text-wrap:pretty}
.figure figcaption b{display:block;color:var(--green-800);font-family:'Fraunces',serif;font-size:1.02rem;font-weight:600;margin-bottom:2px}

.gallery{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.gallery--4{grid-template-columns:repeat(4,1fr)}
.gallery--4 .figure img{height:180px}
@media(max-width:900px){.gallery,.gallery--4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gallery,.gallery--4{grid-template-columns:1fr}}

/* Image beside text */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.split img{width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
/* A logo is not a photograph. The card treatment above (radius, shadow and a
   forced min-height with object-fit:cover) draws a rectangle around the
   transparent space, which reads as a box cropping the mark. */
.split img.split__mark{
  width:auto;height:auto;min-height:0;object-fit:contain;
  border-radius:0;box-shadow:none;background:none;
}
@media(max-width:760px){.split{grid-template-columns:1fr}.split img{min-height:220px}}

/* ---------- Pull quote ----------
   Emily's focus group latched onto this line, so it gets its own full-width
   band rather than sitting inside body copy. Display serif, two lines, and a
   lot of air — editorial, not decorative. */
.pullquote{background:var(--green-900);color:#fff;text-align:center;padding:72px 22px}
.pullquote p{
  font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.06;
  margin:0 auto;max-width:16ch;
  font-size:clamp(2.1rem,6vw,4.2rem);
}
.pullquote .punch{display:block;color:var(--gold-soft)}

/* Photo-backed variant. The overlay is deliberately heavy: the quote is the
   point, the field is atmosphere. Text sits above it via z-index so contrast
   never depends on which part of the photo happens to be behind a letter. */
.pullquote--photo{
  position:relative;isolation:isolate;
  background-image:url('assets/photos/pei-rye-harvest.jpg');
  background-size:cover;background-position:center 60%;
  padding-block:96px;
}
.pullquote--photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,34,22,.86),rgba(11,34,22,.74) 45%,rgba(11,34,22,.9));
}
.pullquote--photo p{position:relative;text-shadow:0 2px 18px rgba(0,0,0,.45)}
@media(max-width:600px){
  .pullquote{padding:52px 22px}
  .pullquote--photo{padding-block:68px;background-attachment:scroll}
}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--green-900),var(--green-700));color:#fff;text-align:center;border-radius:var(--radius);padding:48px 28px;box-shadow:var(--shadow)}
.cta-band h2{color:#fff}
.cta-band p{color:#d9e4d5;max-width:560px;margin:0 auto 1.5rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-900);color:#c8d6c6;padding:48px 0 30px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr}}
.site-footer h3{color:#fff;font-family:'Montserrat',sans-serif;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.site-footer a{color:#c8d6c6}
.site-footer a:hover{color:#fff}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:2px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:18px;font-size:.85rem;color:#9fb29c;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack>*+*{margin-top:14px}
.divider{height:1px;background:var(--line);border:0;margin:0}