/* Our own layer on top of Squarespace's stylesheets. */

/* Squarespace hides the header, footer and every section for two seconds on
   load (a "hideContent" animation its script normally cuts short). With no
   Squarespace script that would mean two blank seconds on every visit. */
header, footer, section > .content-wrapper { animation: none !important; }

/* Donate form. Squarespace redraws this form in the browser with its own
   styles; these values match what that redraw shows visitors. Squarespace's
   selectors are long, so these override with !important rather than racing
   them on specificity. */
.donation-form .sqs-donation-block-disclaimer-container { margin: 22px 0 10px !important; font-size: 12px; line-height: 14px; }
.donation-form .sqs-donation-block-disclaimer-text { font-size: 16px !important; line-height: 1.6 !important; letter-spacing: .02em !important; margin: 16px 0 !important; }
.donation-form select { color: inherit !important; margin: 0 !important; }
.donation-form .sqs-donation-block-dropdown-container fieldset { margin: 0 0 20px !important; }
.donation-form .sqs-cover-the-fees fieldset { margin-bottom: 20px !important; padding-bottom: 4px !important; }
.donation-form fieldset.radio { padding-bottom: 4px !important; }

/* Footer. Redesigned at Flex's request: the Squarespace footer left a tall
   empty gap above the sign-up and stranded the copyright far below. Same
   type and colour as the rest of the site, set as one composed band. */
.kf-footer {
  --kf-blue: rgb(35, 97, 255);
  color: var(--kf-blue);
  background: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  border-top: 1px solid currentColor;
}
.kf-footer__inner { max-width: 1500px; margin: 0 auto; padding: 56px 2vw 28px; }
.kf-footer a { color: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.kf-footer p { margin: 0; font-size: 15px; line-height: 1.45; letter-spacing: .01em; }
.kf-footer__label {
  display: block; margin: 0 0 10px !important;
  font-family: "Fragment Mono", monospace; font-size: 12px !important;
  text-transform: uppercase; letter-spacing: .08em !important;
}
.kf-footer__top { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 48px; align-items: end; }
.kf-footer__mark { font-size: 28px !important; line-height: 1.1 !important; letter-spacing: 0 !important; }
.kf-footer__mark a { text-decoration: none; }
.kf-footer__line { margin-top: 10px !important; max-width: 34ch; }
.kf-footer__field { display: flex; gap: 8px; }
.kf-footer__field input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px;
  font: inherit; font-size: 15px; color: inherit;
  border: 1px solid currentColor; border-radius: 6px; background: transparent;
}
.kf-footer__field input::placeholder { color: inherit; opacity: .55; }
.kf-footer__field input:focus { outline: 2px solid currentColor; outline-offset: 1px; }
.kf-footer__field button {
  height: 44px; padding: 0 20px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--kf-blue); color: #fff;
  font-family: "Fragment Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
}
.kf-footer__field button:hover { opacity: .88; }
.kf-footer__field button:disabled { opacity: .5; cursor: default; }
.kf-footer__thanks { margin-top: 10px !important; }
.kf-footer__error { margin-top: 8px !important; font-size: 13px !important; }
.kf-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 32px; margin-top: 48px; }
.kf-footer__col p + p { margin-top: 10px; }
.kf-footer__base { margin-top: 48px; padding-top: 16px; border-top: 1px solid currentColor; }
.kf-footer__base p { font-size: 12px !important; opacity: .8; }

@media (max-width: 767px) {
  .kf-footer__inner { padding: 44px 6vw 24px; }
  .kf-footer__top { grid-template-columns: 1fr; gap: 32px; }
  .kf-footer__mark { font-size: 24px !important; }
  .kf-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; margin-top: 36px; }
  .kf-footer__cols .kf-footer__col:first-child { grid-column: 1 / -1; }
  .kf-footer__base { margin-top: 36px; }
}

/* Lines above and below a section or the footer, set by Kate in the
   editor. Without the attribute the look decides; with it, her choice. */
[data-kf-lines~="above"] { border-top: 1px solid currentColor !important; }
[data-kf-lines]:not([data-kf-lines~="above"]) { border-top: 0 !important; }
[data-kf-lines~="below"] { border-bottom: 1px solid currentColor !important; }
[data-kf-lines]:not([data-kf-lines~="below"]) { border-bottom: 0 !important; }
.kf-footer[data-kf-lines]:not([data-kf-lines~="base"]) .kf-footer__base { border-top: 0 !important; }

/* Space above and below a section or the footer, set by Kate in the
   editor, separately for computers (d) and phones (m). */
@media (min-width: 768px) {
  html .page-section[data-kf-space~="dt"] { min-height: 0 !important; }
  html .page-section[data-kf-space~="dt"] > .content-wrapper { padding-top: var(--kf-dt) !important; padding-bottom: var(--kf-db) !important; min-height: 0 !important; }
  html .kf-footer[data-kf-space~="dt"] .kf-footer__inner { padding-top: var(--kf-dt) !important; padding-bottom: var(--kf-db) !important; }
  html.kf-flow .page-section[data-kf-space~="dt"] .fluid-engine { padding-top: 0 !important; padding-bottom: 0 !important; }
}
@media (max-width: 767px) {
  html .page-section[data-kf-space~="mt"] { min-height: 0 !important; }
  html .page-section[data-kf-space~="mt"] > .content-wrapper { padding-top: var(--kf-mt) !important; padding-bottom: var(--kf-mb) !important; min-height: 0 !important; }
  html .kf-footer[data-kf-space~="mt"] .kf-footer__inner { padding-top: var(--kf-mt) !important; padding-bottom: var(--kf-mb) !important; }
}

/* A copy of the footer placed in the page as a section: same look, and its
   space set from the section's controls. */
@media (min-width: 768px) {
  html .kf-footer-section[data-kf-space~="dt"] .kf-footer__inner { padding-top: var(--kf-dt) !important; padding-bottom: var(--kf-db) !important; }
}
@media (max-width: 767px) {
  html .kf-footer-section[data-kf-space~="mt"] .kf-footer__inner { padding-top: var(--kf-mt) !important; padding-bottom: var(--kf-mb) !important; }
}

/* Thank-you box shown when Stripe sends a donor back (site.js thankDonor). */
.kf-thanks {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .45);
}
.kf-thanks__card {
  width: min(460px, 100%); box-sizing: border-box;
  padding: 36px 32px 28px; text-align: center;
  background: hsl(var(--white-hsl, 0, 0%, 100%));
  color: hsl(var(--black-hsl, 0, 0%, 0%));
  font-family: var(--body-font-font-family, sans-serif);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.kf-thanks .kf-thanks__card h2 {
  margin: 0 0 14px; font-size: 32px; line-height: 1.15; color: hsl(var(--accent-hsl, 225, 85%, 55%));
  font-family: var(--heading-font-font-family, inherit);
}
.kf-thanks .kf-thanks__card p { margin: 0 0 12px; font-size: 17px; line-height: 1.5; }
.kf-thanks .kf-thanks__card .kf-thanks__small { font-size: 13px; opacity: .7; }
.kf-thanks__close {
  margin-top: 12px; padding: 10px 28px; border: 0; cursor: pointer;
  background: hsl(var(--accent-hsl, 225, 85%, 55%));
  color: hsl(var(--white-hsl, 0, 0%, 100%));
  font: 14px/1 var(--meta-font-font-family, inherit); letter-spacing: .08em; text-transform: uppercase;
}

/* "Enter the Archive" beside the site title (added in lib/render.js). Same
   treatment as the Mill Race Explorers Club's Shaw Claw link: heavy condensed
   caps, a bright fill with a black outline and a hard drop shadow. */
.kf-archive-link {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 800; font-size: 28px;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  color: #FF7A1A !important; text-decoration: none !important;
  -webkit-text-stroke: 1.2px #000; paint-order: stroke fill;
  text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0, 0, 0, .55);
  transition: color .2s, transform .2s;
}
.kf-archive-link:hover, .kf-archive-link:focus-visible { color: #FFA000 !important; transform: rotate(-2deg) scale(1.04); }
/* Out of the header's flex row so the nav keeps its own layout. A script in
   lib/render.js centres it between the title and the first nav link, and
   shrinks or hides it when that gap is too narrow. */
.header-display-desktop .header-title-nav-wrapper { position: relative; }
.header-display-desktop .kf-archive-link { position: absolute; left: 0; top: 50%; translate: 0 -50%; visibility: hidden; }
/* Phones, home page only: under the site name, inside its title block so it
   centres on the name exactly (Squarespace offsets that block to balance the
   menu button). Every other page keeps the plain phone header. */
.header-display-mobile .kf-archive-link { display: none; }
body.homepage .header-display-mobile .kf-archive-link { display: block; margin: 8px 0 2px; font-size: 22px; text-align: center;
  max-height: 40px; transition: max-height .25s ease, margin .25s ease, opacity .2s ease, color .2s, transform .2s; }
/* Folded once you scroll into the page (site.js foldArchiveLink); back at the top it returns. */
html.kf-scrolled body.homepage .header-display-mobile .kf-archive-link { max-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.header-menu-nav-item .kf-archive-link { margin-left: 5vw; font-size: 40px; }

/* The archive film section (lib/archive-film.js makes it; it is stored in the
   page's content so Kate can edit its words, move or delete it). */
.page-section.kfh { --kfh-blue: hsl(var(--accent-hsl, 223.09, 100%, 56.86%)); background: var(--kfh-blue); color: #fff;
  display: block !important; min-height: 0 !important; padding: 0 !important;
  font-family: var(--body-font-font-family, "Helvetica Neue", Arial, sans-serif); }
/* First on the page it clears the fixed header; anywhere else it doesn't.
   --kf-header-h, because Squarespace zeroes --header-height inside sections. */
html body #page .region > section.page-section.kfh:first-child { padding-top: var(--kf-header-h, 80px) !important; }
.kfh p, .kfh h2 { color: inherit !important; }
.kfh *, .kfh *::before, .kfh *::after { box-sizing: border-box; }
.kfh__stage { background: #fff; }
.kfh__film { position: relative; margin: 0 auto; aspect-ratio: 16 / 9; background: #fff; overflow: hidden;
  width: min(100%, max(320px, calc(100svh - var(--kf-header-h, 80px) - 200px)) * 16 / 9); }
.kfh__film video { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.kfh__band { max-width: 1500px; margin: 0 auto; padding: 28px 4vw 32px; display: flex; flex-wrap: wrap; gap: 20px 48px;
  align-items: center; justify-content: space-between; }
.kfh__eyebrow { margin: 0 0 10px; font-size: 13px; font-family: var(--meta-font-font-family, "Fragment Mono", monospace);
  text-transform: uppercase; letter-spacing: .08em; }
.kfh h2.kfh__title { margin: 0; color: inherit; font-family: var(--heading-font-font-family, inherit); font-weight: 400;
  font-size: clamp(32px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -.01em; }
.kfh__line { margin: 12px 0 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; max-width: 46ch; }
.kfh__btn { display: inline-block; border: 0; cursor: pointer; border-radius: 999px; padding: 20px 44px; font-size: 15px;
  background: #fff; color: var(--kfh-blue); white-space: nowrap; transition: transform .2s;
  font-family: var(--meta-font-font-family, "Fragment Mono", monospace); text-transform: uppercase; letter-spacing: .08em; }
.kfh__btn:hover { transform: scale(1.04); }
.kfh__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 760px) {
  .kfh__band { padding: 28px 16px 32px; }
  .kfh__btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .kfh__film video { display: none; } .kfh__film { background: #fff url(/media/kesey-archive-preview.jpg) center / contain no-repeat; } }

/* The Donate modal lib/render.js adds to any page with a Donate button. */
.kfp-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .45); }
.kfp-modal[hidden] { display: none; }
.kfp-modal__card { position: relative; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 44px 40px 32px; background: hsl(var(--white-hsl, 0, 0%, 100%)); color: hsl(var(--accent-hsl, 223, 100%, 57%));
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.kfp-modal__card h2 { font-family: var(--heading-font-font-family, inherit); margin: 0 0 6px; font-size: 32px; line-height: 1.15; color: inherit; }
.kfp-modal__card > p { margin: 0 0 26px; font-size: 18px; line-height: 1.4; }
.kfp-modal__close { position: absolute; top: 14px; right: 14px; border: 0; background: none; color: inherit; cursor: pointer; font-size: 12px; padding: 8px;
  font-family: var(--meta-font-font-family, "Fragment Mono", monospace); text-transform: uppercase; letter-spacing: .08em; }
.kfp-modal__close:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.kfp-modal .sqs-block { padding: 0 !important; }
html.kfp-locked { overflow: hidden; }
@media (max-width: 760px) { .kfp-modal__card { padding: 40px 20px 24px; } }

/* The Kesey Farm party (site.js party()): click "The work is ongoing." */
.kfh__title { cursor: pointer; transition: transform .2s; }
html:not([data-kf-edit]) .kfh__title:hover { transform: rotate(-1deg); }
html[data-kf-edit] .kfh__title { cursor: text; }
.kf-party .page-section.kfh { background: linear-gradient(115deg, #2361FF, #e7345b, #ee583b, #FFD400, #98ca45, #0801f5, #2361FF);
  background-size: 400% 400%; animation: kfOil 3s linear infinite; }
.kf-party .kfh__film video { animation: kfTrip 2.4s linear infinite; }
.kf-party__ch { display: inline-block; animation: kfWave .9s ease-in-out infinite; animation-delay: calc(var(--i) * -.06s);
  -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 #000; }
.kf-star { position: fixed; z-index: 9999; pointer-events: none; line-height: 1; -webkit-text-stroke: 1px #000; }
.kf-bus { position: fixed; z-index: 9998; left: 0; bottom: 12px; width: clamp(220px, 30vw, 420px); pointer-events: none;
  animation: kfDrive 7s cubic-bezier(.45,.05,.55,.95) forwards; }
.kf-bus svg { display: block; width: 100%; height: auto; animation: kfBob .35s ease-in-out infinite alternate; overflow: visible; }
.kf-bus__wheel { transform-box: fill-box; transform-origin: center; animation: kfSpin .5s linear infinite; }
.kf-bus__puff { position: absolute; left: 0; bottom: 18%; font-size: 26px; color: #FFD400; -webkit-text-stroke: 1px #000; opacity: 0;
  animation: kfPuff 1.2s ease-out infinite; }
.kf-bus__puff:nth-of-type(2) { animation-delay: .4s; color: #e7345b; }
.kf-bus__puff:nth-of-type(3) { animation-delay: .8s; color: #98ca45; }
@keyframes kfOil { to { background-position: 400% 0; } }
@keyframes kfTrip { 0% { filter: hue-rotate(0deg) saturate(1.8) contrast(1.1); } 100% { filter: hue-rotate(360deg) saturate(1.8) contrast(1.1); } }
@keyframes kfWave { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-.18em) rotate(-4deg); } }
@keyframes kfDrive { from { transform: translateX(-110%); } to { transform: translateX(calc(100vw + 10%)); } }
@keyframes kfBob { to { transform: translateY(-4px) rotate(-.6deg); } }
@keyframes kfSpin { to { transform: rotate(360deg); } }
@keyframes kfPuff { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(-60px, -50px) scale(1.4) rotate(-90deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .kf-party .page-section.kfh { animation: none; background: #e7345b; }
  .kf-party .kfh__film video { animation: none; }
}

/* Background colour Kate picks for a section or the footer in the editor
   (Color in the section bar). It covers any background photo. */
html .page-section[data-kf-bg], html .page-section[data-kf-bg] > .section-border > .section-background,
html footer[data-kf-bg], html footer[data-kf-bg] .kf-footer__inner { background: var(--kf-bg) !important; }
html .page-section[data-kf-bg] > .section-border > .section-background > * { display: none !important; }

/* Text colour Kate picks for a section or the footer (Color in the section
   bar). Buttons and form fields keep their own colours so they stay legible
   on their own backgrounds; the party's letters keep their Day-Glo. */
html .page-section[data-kf-ink], html footer[data-kf-ink],
html .page-section[data-kf-ink] *:not(button, button *, input, select, textarea, option, [class*="button-element"], [class*="button-element"] *, .kf-party__ch, .kfp-modal *),
html footer[data-kf-ink] *:not(button, button *, input, select, textarea, option, [class*="button-element"], [class*="button-element"] *) { color: var(--kf-ink) !important; }
html .page-section[data-kf-ink] :is(input, textarea, select), html footer[data-kf-ink] :is(input, textarea, select) { border-color: var(--kf-ink) !important; }

/* Jumps to a section (the About, Projects… links) stop just below the fixed
   header instead of under it; site.js sets the height. */
html { scroll-padding-top: calc(var(--kf-scroll-pad, 80px) + 16px); }