/* Military Trailblazer Office Hours: "Trail Command" (design 08B).
   Layered ridgelines and a sign board on posts, olive drab and coyote with
   blaze orange used sparingly. Chakra Petch caps for headings, Figtree for
   body, Barlow Condensed for labels, IBM Plex Mono for dates and times.
   Military details: rivets, star plates, chevron markers, the Summit Tag logo
   (generated by scripts/gen-mark.mjs). One deliberate light look. */
:root {
  --sky-top: #dcdcc6;
  --sky-low: #efe7d1;
  --forest: #2c3118;
  --forest-deep: #1d200f;
  --olive: #4a5129;
  --olive-2: #6d7346;
  --sand: #e8e0c9;
  --cream: #f4eedd;
  --paper: #f7f2e5;
  --card: #fbf8f0;
  --coyote: #b59c70;
  --coyote-lt: #cdb98f;
  --coyote-rim: #8f7a52;
  --orange: #d9561b;
  --orange-dk: #b4430f;
  --black: #141510;
  --ink: #1b1d15;
  --body-ink: #37433c;
  --muted: #555845;
  --line: #d8ceb2;
  --focus: #b4430f;
  /* status colors (calendar pills, form and admin messages) */
  --ok: #3f6a2c; --ok-soft: #e1e8cf;
  --warn: #8a5a0c; --warn-soft: #f4e3bf;
  --off: #66685a; --off-soft: #e7e1cf;
  --err: #a3321c; --err-soft: #f6dcd2;
  /* names the admin page uses */
  --surface: var(--card);
  --accent: var(--orange);
  --bg: var(--paper);
  --f-display: "Chakra Petch", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --max: 1140px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: var(--forest); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 32px; position: relative; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--cream); padding: 8px 12px; z-index: 50; }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* star plate: the recurring section label */
.plate { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 5px; background: var(--olive); color: var(--coyote-lt); font: 700 13px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(205, 185, 143, .32); }
.plate svg { width: 11px; height: 11px; fill: var(--orange); flex: none; }

/* ---------- banner + header ---------- */
.banner { background: var(--black); color: var(--coyote-lt); text-align: center; font: 600 11px/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; padding: 8px 16px; }
.banner b { color: var(--orange); font-weight: 600; }
.head { background: var(--cream); border-bottom: 1px solid var(--line); }
.head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--forest); min-width: 0; }
.brand .badge { width: 46px; height: 46px; flex: none; }
.brand-text { display: grid; gap: 3px; min-width: 0; }
.brand-text b { font: 600 19px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.brand-text span { font: 700 12px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--orange-dk); }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { font: 700 15px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding: 10px 12px; border-radius: 2px; }
.nav a:hover { background: rgba(74, 81, 41, .1); }
.nav a[aria-current] { background: var(--forest); color: var(--cream); }
.nav .me { font-size: 12px; color: var(--muted); padding: 0 8px; overflow-wrap: anywhere; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px/1 var(--f-body); padding: 14px 20px; border-radius: 3px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.btn-gold { background: var(--orange); color: #fff8ee; }
.btn-gold:hover { background: var(--orange-dk); }
.btn-forest, .btn-solid { background: var(--forest); color: var(--cream); }
.btn-forest:hover, .btn-solid:hover { background: var(--forest-deep); }
.btn-line { border-color: var(--forest); color: var(--forest); background: transparent; }
.btn-line:hover { background: rgba(44, 49, 24, .06); }
.btn-outline { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn-outline:hover { border-color: var(--muted); }
.btn-danger { color: var(--err); border-color: var(--line); background: var(--card); }
.btn-small { font-size: 13px; padding: 8px 12px; }
.btn:disabled { opacity: .55; cursor: default; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(700px 260px at 72% 88%, rgba(217, 86, 27, .13), transparent 70%), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-low) 78%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: end; padding-top: 72px; }
.hero-copy { position: relative; z-index: 1; display: grid; gap: 22px; padding-bottom: 210px; min-width: 0; }
.eyebrow { font: 700 14px/1.2 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--olive); display: flex; align-items: center; gap: 10px; margin: 0; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--orange); flex: none; }
.statement { font: 400 clamp(28px, 3.3vw, 40px)/1.2 var(--f-body); letter-spacing: -.015em; color: var(--forest-deep); max-width: 17em; }
.statement em { font-style: italic; color: var(--olive); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* the name plate on its posts, with the Summit Tag hanging off the corner */
.sign { position: relative; justify-self: center; width: min(100%, 520px); padding-bottom: 150px; }
.board { position: relative; z-index: 1; background: var(--olive); color: var(--cream); padding: 30px 36px 32px; border-radius: 3px; text-align: center; box-shadow: inset 0 0 0 5px var(--forest), inset 0 0 0 7px rgba(205, 185, 143, .32), 0 18px 30px -18px rgba(29, 39, 34, .55); background-image: repeating-linear-gradient(180deg, transparent 0 17px, rgba(0, 0, 0, .07) 17px 18px); }
.board .top { font: 700 13px/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--coyote-lt); display: flex; align-items: center; justify-content: center; gap: 10px; }
.board .top svg { width: 12px; height: 12px; fill: var(--orange); }
.board h1 { font: 600 clamp(36px, 4.6vw, 56px)/1.02 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--cream); margin-top: 14px; }
.board h1 span { display: block; font-weight: 700; color: var(--coyote-lt); }
.board .rule { width: 64px; height: 2px; background: var(--orange); margin: 18px auto 0; }
.posts { position: absolute; left: 0; right: 0; top: 60px; bottom: 0; display: flex; justify-content: space-between; padding-inline: 22%; }
.posts i { width: 18px; background: linear-gradient(90deg, var(--forest), var(--olive) 55%, var(--forest)); border-radius: 2px 2px 0 0; }
.tag-hang { position: absolute; z-index: 3; top: 12px; left: calc(100% - 14px); width: 2px; padding-top: 26px; transform: rotate(9deg); transform-origin: 1px 0; filter: drop-shadow(0 10px 12px rgba(20, 21, 16, .35)); }
.tag-hang::before { content: ""; position: absolute; left: 0; top: -4px; width: 8px; height: 8px; margin-left: -3px; border-radius: 50%; background: #3a3d27; box-shadow: 0 0 0 2px var(--coyote-lt); }
.tag-hang::after { content: ""; position: absolute; left: 0; top: 4px; height: 38px; border-left: 2px dotted #3a3d27; }
.tag-hang svg { display: block; width: 92px; height: 92px; max-width: none; margin-left: -31px; }
.ridges { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; width: 100%; display: block; }
.ridges.back { z-index: 0; }
.ridges.front { z-index: 2; height: 120px; }

/* inner pages: short hero, heading on the sky, ridges below */
.page-hero .wrap { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; padding-top: 64px; padding-bottom: 170px; }
.page-hero .wrap > * { position: relative; z-index: 1; }
.page-hero h1 { font: 600 clamp(36px, 5vw, 60px)/1.02 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--forest); }
.page-hero .lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--body-ink); max-width: 36em; }
.page-hero .lede a { color: inherit; }
.page-hero .ridges.back { height: 180px; }

/* ---------- next session ---------- */
.band-forest { background: var(--forest); color: var(--cream); padding-block: 8px 88px; }
.next-card { position: relative; background: var(--paper); color: var(--ink); border-radius: 4px; border: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); overflow: hidden; }
.rivet { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d9cdb0, #7b6a47 70%); box-shadow: 0 0 0 1px rgba(20, 21, 16, .35); z-index: 1; }
.rivet.tl { left: 10px; top: 10px; } .rivet.tr { right: 10px; top: 10px; } .rivet.bl { left: 10px; bottom: 10px; } .rivet.br { right: 10px; bottom: 10px; }
.next-main { padding: 34px 36px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.next-card .what { font: 600 34px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--forest); overflow-wrap: anywhere; }
.next-card .who { color: var(--muted); overflow-wrap: anywhere; text-wrap: pretty; }
.next-date { display: grid; place-content: center; justify-items: center; padding: 24px 36px; border-left: 1px solid var(--line); background: var(--cream); min-width: 170px; text-align: center; }
.date-dow { font: 700 14px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--orange); }
.date-n { font: 600 72px/.95 var(--f-display); color: var(--forest); font-variant-numeric: tabular-nums; margin-top: 6px; }
.date-my { font: 700 14px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--olive); }
.date-t { font: 500 14px/1 var(--f-mono); color: var(--ink); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); white-space: nowrap; }
.join { padding: 34px 36px; display: grid; gap: 12px; align-content: center; border-left: 1px solid var(--line); }
.join .btn { width: 100%; }
.join small { font-size: 14px; color: var(--muted); }

/* ---------- sections ---------- */
.section { padding-block: 96px; }
.band-sand { background: var(--sand); }
.two { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 80px; }
.col { display: grid; gap: 18px; align-content: start; min-width: 0; }
.col p { color: var(--body-ink); }
.col h2, .cover-head h2, .who-head h2, .callout h2 { font: 600 clamp(30px, 3.4vw, 42px)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--forest); }

/* What we cover */
.cover { padding-bottom: 24px; }
.cover-head { display: grid; gap: 14px; justify-items: start; margin-bottom: 36px; }
.cover-lede { font: 400 clamp(19px, 1.9vw, 22px)/1.45 var(--f-body); color: var(--forest); }
.cover-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cover-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px 26px 28px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--olive); border-radius: 4px; min-width: 0; }
.cover-card::before { content: ""; position: absolute; right: 22px; top: 24px; width: 14px; height: 12px; background: var(--orange); clip-path: polygon(0 45%, 50% 0, 100% 45%, 100% 75%, 50% 30%, 0 75%); }
.cover-card h3 { font: 600 22px/1.2 var(--f-display); color: var(--ink); padding-right: 30px; }
.cover-card p { color: var(--body-ink); font-size: 16px; }

/* Who we are: heading over four dog tags */
.who { display: grid; gap: 40px; }
.who-head { display: grid; gap: 18px; justify-items: start; }
.hosts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.host { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 30px 22px 24px; background: linear-gradient(135deg, #dccba4, var(--coyote-lt) 55%, #bca57a); border: 1.5px solid var(--coyote-rim); border-radius: 16px; box-shadow: 0 12px 22px -16px rgba(20, 21, 16, .55); min-width: 0; }
.host::before { content: ""; position: absolute; left: 50%; top: 13px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--black); opacity: .8; }
.host::after { content: ""; position: absolute; right: -1.5px; top: 50%; margin-top: -9px; width: 10px; height: 18px; background: var(--paper); border: 1.5px solid var(--coyote-rim); border-right: 0; border-radius: 10px 0 0 10px; }
.host img { width: 84px; height: 84px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--forest); display: block; }
.host-text { min-width: 0; display: grid; gap: 2px; justify-items: center; }
.host h3 { font: 700 20px/1.1 var(--f-label); text-transform: uppercase; letter-spacing: .06em; color: var(--black); }
.host p { line-height: 1.35; }
.host .vet { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 6px; padding: 3px 7px 2px; background: var(--olive); color: var(--cream); font: 700 11px/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase; border-radius: 2px; }
.host .vet svg { width: 9px; height: 9px; fill: var(--orange); flex: none; }
.host .pos { font-size: 14px; font-weight: 600; color: var(--ink); }
.host .co { font-size: 13.5px; color: #4d4f3d; }
a.host { color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
a.host:hover { transform: translateY(-3px); box-shadow: 0 18px 26px -16px rgba(20, 21, 16, .6); }
.host .in { position: absolute; right: 18px; top: 14px; width: 18px; height: 18px; fill: none; stroke: var(--forest); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
a.host:hover .in { opacity: 1; stroke: var(--orange-dk); }

/* Get involved */
.links { display: grid; gap: 12px; align-content: start; }
.link { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--paper); border-radius: 3px; text-decoration: none; color: var(--ink); border-left: 5px solid var(--olive); box-shadow: 0 1px 0 rgba(74, 81, 41, .14); }
.link:nth-child(2) { border-left-color: var(--coyote); }
.link:nth-child(3) { border-left-color: var(--orange); }
.link:hover { background: var(--card); }
.link svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--forest); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.link span { display: grid; flex: 1; min-width: 0; }
.link b { font: 600 18px/1.2 var(--f-display); }
.link small { color: var(--muted); font-size: 15px; }
.link i { font: 700 18px/1 var(--f-body); color: var(--orange); }

/* Partners: three cards, logo plate on top */
.partners-sec { padding-top: 0; }
.p-head { display: grid; gap: 14px; justify-items: start; margin-bottom: 36px; }
.p-head h2 { font: 600 clamp(30px, 3.4vw, 42px)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--forest); }
.p-head p { font: 400 clamp(19px, 1.9vw, 22px)/1.45 var(--f-body); color: var(--forest); }
.p-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.p-card { display: grid; grid-template-rows: auto 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; min-width: 0; }
.p-logo { display: grid; place-items: center; aspect-ratio: 16 / 7; padding: 18px; background: #fff; border-bottom: 1px solid var(--line); min-width: 0; }
.p-logo img { display: block; max-height: 96px; max-width: 100%; width: auto; height: auto; }
.p-logo img.round { border-radius: 50%; }
.p-logo img.square { border-radius: 4px; }
.p-body { display: grid; gap: 8px; align-content: start; padding: 22px 24px 24px; min-width: 0; }
.p-body h3 { font: 600 22px/1.2 var(--f-display); color: var(--ink); }
.p-body p { color: var(--body-ink); font-size: 16px; }
.p-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px; }
.p-links a { font: 700 15px/1.3 var(--f-body); text-decoration: none; }
.p-links a::after { content: " \2192"; color: var(--orange); }
.p-links a:hover { text-decoration: underline; }
.p-foot { margin-top: 24px; color: var(--muted); font-size: 15px; }

/* Call for presenters */
.callout { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--olive) 0%, var(--forest) 100%); color: var(--cream); border-radius: 4px; padding: 56px 56px 120px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; }
.callout .plate { background: var(--orange); color: #fff8ee; box-shadow: none; }
.callout h2 { color: var(--cream); margin-top: 14px; }
.callout p { color: #d8d2bb; margin-top: 10px; max-width: 46ch; }
.callout .btn { position: relative; z-index: 1; }
.callout .ridges { height: 110px; }

/* ---------- calendar ---------- */
.cal { display: grid; gap: 44px; }
.month { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; align-items: start; }
.month h2 { position: sticky; top: 24px; font: 700 40px/.95 var(--f-display); color: var(--forest); margin: 0; display: grid; gap: 6px; }
.month h2 small { font: 600 12px/1 var(--f-mono); letter-spacing: .16em; color: var(--muted); }
.month ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px 20px 14px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; position: relative; }
.row.talk { border-color: var(--olive-2); box-shadow: 0 10px 20px -16px rgba(20, 21, 16, .5); }
.row.talk::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 3px 3px 0; background: var(--olive); }
.row.next { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.row.off { background: transparent; border-style: dashed; }
.date { display: grid; justify-items: center; gap: 3px; padding: 8px 0; line-height: 1; font-family: var(--f-mono); font-variant-numeric: tabular-nums; border-radius: 3px; background: var(--sand); }
.row.talk .date { background: var(--olive); color: var(--cream); }
.row.talk .date .dow, .row.talk .date .mon { color: var(--coyote-lt); }
.date .dow { font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.date .day { font: 700 30px/1 var(--f-display); }
.date .mon { font-size: 10px; letter-spacing: .14em; color: var(--orange-dk); }
.row .main { min-width: 0; display: grid; gap: 3px; }
.row .topic { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; line-height: 1.35; }
.row .topic.quiet { font-weight: 600; color: var(--muted); font-size: 16px; }
.row .sub { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.row a.sub { color: var(--forest); }
.next-flag { font: 700 12px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--orange-dk); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag-chip { font: 600 12px/1 var(--f-body); padding: 5px 8px; border-radius: 2px; background: var(--warn-soft); color: var(--warn); }
.pill { font: 700 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; padding: 7px 10px; border-radius: 2px; white-space: nowrap; }
.s-talk { background: var(--olive); color: var(--cream); }
.s-qa { background: var(--off-soft); color: var(--off); }
.s-off { color: var(--off); border: 1px dashed var(--coyote); }
.s-pending { background: var(--warn-soft); color: var(--warn); }
.s-declined { background: var(--off-soft); color: var(--off); }

/* ---------- forms (Present page, admin) ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--olive); border-radius: 4px; padding: 32px; box-shadow: 0 16px 30px -24px rgba(20, 21, 16, .45); }
#thanks { display: grid; gap: 14px; }
.thanks-h { font: 600 32px/1.1 var(--f-display); text-transform: uppercase; color: var(--forest); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.field.wide { grid-column: 1 / -1; }
label, .label { font: 700 13px/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }
.hint { font-size: 13px; color: var(--muted); }
input, select, textarea { font: 16px/1.4 var(--f-body); color: var(--ink); background: var(--paper); border: 1px solid #c9bd9b; border-radius: 3px; padding: 11px 13px; width: 100%; }
input::placeholder, textarea::placeholder { color: #8b8a74; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(74, 81, 41, .2); background: #fff; }
textarea { min-height: 128px; resize: vertical; }
#notes { min-height: 84px; }
.req { color: var(--orange-dk); }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span { display: inline-block; font: 500 13px/1 var(--f-mono); padding: 9px 12px; border: 1px solid #c9bd9b; border-radius: 2px; cursor: pointer; background: var(--paper); font-variant-numeric: tabular-nums; }
.chip-check span:hover { border-color: var(--olive); }
.chip-check input:checked + span { background: var(--olive); color: var(--cream); border-color: var(--olive); }
.chip-check input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.msg { padding: 12px 14px; border-radius: 3px; margin-bottom: 20px; }
.msg.err { background: var(--err-soft); color: var(--err); }
.msg.ok { background: var(--ok-soft); color: var(--ok); }
.guide { display: grid; gap: 32px; }
.guide > div { display: grid; gap: 12px; }
.guide h3 { font: 600 20px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--forest); }
.guide ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.guide ul li { position: relative; padding-left: 24px; color: var(--body-ink); }
.guide ul li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 10px; background: var(--orange); clip-path: polygon(0 45%, 50% 0, 100% 45%, 100% 75%, 50% 30%, 0 75%); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 16px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
.steps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font: 700 26px/1 var(--f-display); color: var(--orange); }
.steps span { color: var(--muted); font-size: 15px; }

/* ---------- footer ---------- */
.foot { background: var(--forest-deep); color: #c9c3ab; font-size: 15px; position: relative; }
.foot .ridges { position: relative; height: 70px; background: var(--paper); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-block: 36px 32px; }
.foot-brand { display: flex; gap: 16px; align-items: flex-start; }
.foot-brand .badge { width: 56px; height: 56px; flex: none; }
.foot-brand b { display: block; font: 600 20px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--cream); }
.foot-brand p { margin-top: 8px; max-width: 40ch; }
.foot nav { display: grid; gap: 8px; align-content: start; }
.foot nav .lbl { font: 700 13px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; }
.foot a { color: var(--cream); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.fine { border-top: 1px solid rgba(246, 240, 228, .12); padding-block: 18px 26px; font-size: 13px; color: #9a957c; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 3px; font-size: 14px; max-width: calc(100% - 32px); z-index: 40; }
.admin-main { padding-top: 40px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap, .two, .form-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { padding-bottom: 170px; }
  .sign { order: -1; padding-bottom: 0; width: calc(100% - 34px); justify-self: start; }
  .posts { display: none; }
  .ridges.back { height: 150px; }
  .ridges.front { height: 64px; }
  .page-hero .wrap { padding-bottom: 130px; }
  .page-hero .ridges.back { height: 130px; }
  /* the tag hangs in the space beside the narrowed sign */
  .tag-hang { left: calc(100% - 10px); top: 10px; padding-top: 18px; transform: rotate(8deg); }
  .tag-hang svg { width: 60px; height: 60px; margin-left: -20px; }
  .tag-hang::after { height: 26px; }
  .next-card { grid-template-columns: minmax(0, 1fr) auto; }
  .join { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .cover-grid { grid-template-columns: 1fr; }
  .hosts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-grid { grid-template-columns: 1fr; }
  .p-card { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: none; }
  .p-card .p-logo { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .callout { grid-template-columns: 1fr; }
  .month { grid-template-columns: 1fr; gap: 14px; }
  .month h2 { position: static; display: flex; align-items: baseline; gap: 12px; font-size: 32px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 16px; }
  .bn-time { display: none; }
  .brand-text b { font-size: 15px; }
  .brand-text span { display: none; }
  .brand .badge { width: 38px; height: 38px; }
  .nav a { padding: 9px 7px; font-size: 13px; letter-spacing: .08em; }
  .hero .wrap { padding-top: 36px; }
  .page-hero .wrap { padding-top: 40px; }
  .board { padding: 24px 18px 26px; }
  .next-main, .join { padding: 26px 20px; }
  .next-date { padding: 20px; min-width: 112px; }
  .date-n { font-size: 56px; }
  .section { padding-block: 64px; }
  .cover { padding-bottom: 8px; }
  /* hosts: one landscape tag per row (hole on the left) */
  .hosts { grid-template-columns: 1fr; }
  .host { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; padding: 16px 24px 16px 32px; }
  .host::before { left: 12px; top: 50%; margin: -4px 0 0; }
  .host img { width: 72px; height: 72px; margin-top: 2px; }
  .host-text { justify-items: start; }
  .p-card { grid-template-columns: 1fr; }
  .p-card .p-logo { aspect-ratio: 16 / 6; border-right: 0; border-bottom: 1px solid var(--line); }
  .p-logo img { max-height: 80px; }
  .callout { padding: 36px 22px 100px; }
  .fields { grid-template-columns: 1fr; }
  .card { padding: 22px 18px; }
  .row { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding-right: 14px; }
  .row .side { grid-column: 2; }
  .date .day { font-size: 26px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .nav a, .link, .chip-check span { transition: background-color .15s, border-color .15s, color .15s; }
}