/* Design tokens lifted from the live Wix site.
   --sans is a stand-in: the original uses Proxima Nova, which is licensed.
   Swap in the real face via Adobe Fonts and this is the only line that changes. */
:root {
  --serif: "Inknut Antiqua", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --accent: #d93d12;
  --ink: #000;
  --muted: #757575;
  --rule: #e4e4e4;
  --band: #ededed;
  /* bobcat fur; white text on it measures 4.96:1, so it clears AA */
  --fur: #aa5b28;
  --page: 1280px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden;
}

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

a { color: var(--accent); }

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

.site-header {
  height: 101px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 28px;
  background: #fff;
}

.wordmark { text-decoration: none; color: var(--ink); line-height: 1.5; }

.wordmark-name,
.wordmark-kind {
  display: block;
  font-family: var(--serif);
  color: var(--ink);
  white-space: nowrap;
}

.wordmark-name { font-size: 18px; }

/* letter-spaced so the second line optically matches the first */
.wordmark-kind { font-size: 20px; letter-spacing: 0.26em; }

.site-nav { display: flex; align-items: center; gap: 26px; }

.site-nav a {
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a.is-active { color: var(--accent); }

/* ------------------------------------------------------------- home */

.intro { background: var(--band); }

.intro-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 26px 28px;
  display: flex;
  gap: 26px;
  align-items: flex-start;
}

.headshot {
  width: 142px;
  height: 156px;
  object-fit: cover;
  flex: 0 0 auto;
}

.intro-inner p {
  margin: 0;
  font-size: 20px;
  line-height: 1.32;
}

.intro-inner a { text-decoration: underline; }

.page-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 56px;
  text-align: center;
  margin: 58px 0 44px;
}

.tiles {
  max-width: var(--page);
  margin: 0 auto 72px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 28px;
}

.tile { text-decoration: none; color: var(--ink); }

/* The featured tile is a wrapper, not a link, so its Donate can be a sibling
   anchor -- nesting one inside the tile link would be invalid HTML. */
.tile-featured { display: flex; flex-direction: column; }

.tile-main { text-decoration: none; color: inherit; }

.tile-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 16px 0 -6px;
}

.tile-donate {
  align-self: flex-start;
  margin-top: 14px;
  font-size: 13px;
  padding: 8px 20px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
}

.tile-donate:hover { background: var(--ink); color: #fff; }

.tile-featured .tile-main:hover h3 { color: var(--accent); }

.tile img { width: 100%; height: auto; }

.tile h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin: 18px 0 8px;
}

.tile p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------- collection page */

.hero { position: relative; max-width: var(--page); margin: 0 auto; padding: 0 28px; }

.hero img { width: 100%; height: 520px; object-fit: cover; }

.hero h1 {
  position: absolute;
  left: 0; right: 0; bottom: 72px;
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.collection-intro {
  max-width: 520px;
  margin: 46px auto 52px;
  padding: 0 28px;
  font-size: 14px;
  line-height: 1.62;
}

.collection-intro p { margin: 0 0 14px; }

/* Justified gallery, the Pro Gallery layout.

   Each row is a flex line; every photo's flex-grow is its aspect ratio, so the
   widths come out proportional to the aspect ratios and every photo in the row
   lands on the SAME height -- at any container width, with no cropping and no
   JavaScript. flex-basis:0 is what makes the growth purely proportional. */
.grid {
  max-width: var(--page);
  margin: 0 auto 80px;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.grid-row { display: flex; gap: 18px; align-items: flex-start; }

.row-pad { flex-basis: 0; }

.shot {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  display: block;
  line-height: 0;
  flex-basis: 0;
  min-width: 0;
}

.shot img { width: 100%; height: auto; object-fit: cover; transition: opacity 0.18s ease; }

.shot:hover img { opacity: 0.88; }

/* --------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 56px 72px;
}

.lightbox[hidden] { display: none; }

.lb-stage {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }

.lb-side {
  flex: 0 0 300px;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 8px;
}

.lb-side h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.34;
  margin: 0 0 18px;
}

.lb-side p { font-size: 13px; line-height: 1.66; margin: 0 0 13px; }

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  border: 0;
  background: none;
  color: #000;
  cursor: pointer;
  line-height: 1;
}

.lb-close { top: 22px; right: 26px; font-size: 26px; }

.lb-prev,
.lb-next { top: 50%; transform: translateY(-50%); font-size: 46px; padding: 8px 14px; }

.lb-prev { left: 8px; }

/* clear of the 300px caption column + 72px page padding */
.lb-next { right: 376px; }

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

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 34px 28px 46px;
  text-align: center;
}

.copyright { font-size: 12px; color: var(--muted); margin: 0 0 18px; }

.social { display: flex; justify-content: center; gap: 18px; }

.social a { color: var(--muted); }

.social a:hover { color: var(--ink); }

/* ----------------------------------------------------------- mobile */

@media (max-width: 860px) {
  .site-header { height: auto; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 16px; }
  .site-nav { flex-wrap: wrap; gap: 16px; }
  .intro-inner { flex-direction: column; padding: 22px 16px; }
  .intro-inner p { font-size: 17px; }
  .page-title { font-size: 30px; line-height: 1.35; margin: 38px 0 28px; }
  .tiles { grid-template-columns: 1fr; padding: 0 16px; }
  .grid { padding: 0 16px; gap: 14px; }
  .grid-row { flex-direction: column; gap: 14px; }
  .row-pad { display: none; }
  .hero { padding: 0; }
  .hero img { height: 300px; }
  .hero h1 { font-size: 28px; bottom: 34px; }
  .collection-intro { padding: 0 16px; margin: 30px auto 34px; }

  .lightbox { flex-direction: column; padding: 52px 16px 20px; gap: 18px; overflow-y: auto; }
  .lb-stage { flex: 0 0 auto; max-height: 52vh; }
  .lb-side { flex: 0 0 auto; max-height: none; overflow: visible; }
  .lb-prev, .lb-next { top: auto; bottom: 8px; transform: none; font-size: 34px; }
  .lb-next { right: 16px; }
}

/* ------------------------------------------------------ content pages */

.page { max-width: var(--page); margin: 0 auto 80px; padding: 0 28px; }

.page-intro {
  max-width: 640px;
  margin: 0 auto 52px;
  text-align: center;
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
}

.narrow { max-width: 640px; margin: 0 auto; font-size: 15px; line-height: 1.68; }

.narrow p { margin: 0 0 16px; }

.panel { max-width: 640px; margin: 52px auto 0; }

.panel h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.panel p { font-size: 15px; line-height: 1.68; margin: 0 0 14px; }

/* about */

.about-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  max-width: 980px;
  margin: 0 auto;
  align-items: start;
}

.about-portrait { width: 100%; height: auto; }

.about-copy { font-size: 15px; line-height: 1.68; }

.about-copy p { margin: 0 0 16px; }

.about-copy .lead {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  margin-bottom: 22px;
}

.awards, .engagements { margin: 0; padding: 0; list-style: none; }

.awards li, .engagements li {
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.awards li::before, .engagements li::before {
  content: "";
  position: absolute;
  left: 0; top: 18px;
  width: 6px; height: 6px;
  background: var(--accent);
}

/* projects */

.projects { max-width: 900px; margin: 0 auto; display: grid; gap: 46px; }

.project { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; }

.project img { width: 100%; height: auto; }

.project h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 12px;
}

.project p { font-size: 14px; line-height: 1.68; margin: 0; }

/* media */

.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 36px 26px;
  align-items: stretch;
}

.press {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Press art is a mix of logos, portraits and article screenshots, so the tile
   fixes the band height and lets each image sit inside it uncropped. The
   explicit height is required: the <img height> attribute would otherwise win
   over aspect-ratio and give every tile its source image's height. */
.press img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 14px;
}

.press:hover img { border-color: #c9c9c9; }

.press h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.38;
  margin: 15px 0 8px;
  text-wrap: balance;
}

.press p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; flex: 1 1 auto; }

.press-link { font-size: 12px; color: var(--accent); }

.press:hover h2 { color: var(--accent); }

/* newsletter */

.ticks { margin: 0 0 30px; padding: 0; list-style: none; }

.ticks li { font-size: 15px; line-height: 1.6; padding: 8px 0 8px 24px; position: relative; }

.ticks li::before { content: "\2014"; position: absolute; left: 0; color: var(--accent); }

.signup { border-top: 1px solid var(--rule); padding-top: 24px; }

.signup label { display: block; font-size: 13px; margin-bottom: 8px; }

.signup label span { color: var(--accent); }

.signup-row { display: flex; gap: 10px; flex-wrap: wrap; }

.signup input {
  flex: 1 1 220px;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  padding: 11px 13px;
  border: 1px solid #bdbdbd;
  background: #fff;
  color: var(--ink);
}

.signup input:focus-visible,
.signup button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.signup button,
.button {
  font: inherit;
  font-size: 14px;
  padding: 11px 30px;
  border: 0;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.signup button:hover, .button:hover { background: var(--accent); }

.form-note { font-size: 12px; color: var(--muted); margin: 14px 0 0; line-height: 1.6; }

/* cv */

.pdf { width: 100%; height: 820px; margin-top: 34px; border: 1px solid var(--rule); }

@media (max-width: 860px) {
  .page { padding: 0 16px; }
  .about-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-portrait { max-width: 280px; }
  .project { grid-template-columns: 1fr; gap: 16px; }
  .project img { max-width: 260px; }
  .press-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 30px 18px; }
  .press img { height: 130px; }
  .pdf { height: 520px; }
}

/* ------------------------------------------------- documentary film */

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.button-ghost {
  background: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 29px;
}

.button-ghost:hover { background: var(--ink); color: #fff; }

/* film page */

.film { margin-bottom: 80px; }

.film-hero { position: relative; max-width: var(--page); margin: 0 auto; padding: 0 28px; }

.film-hero img { width: 100%; height: 460px; object-fit: cover; }

.film-hero-copy {
  position: absolute;
  left: 0; right: 0; bottom: 52px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

.film-hero-copy .eyebrow { color: #fff; opacity: 0.92; }

.film-hero-copy h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  margin: 0;
}

.logline {
  max-width: 660px;
  margin: 44px auto 30px;
  padding: 0 28px;
  text-align: center;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.58;
  text-wrap: balance;
}

.film .cta-row { justify-content: center; padding: 0 28px; }

.facts {
  max-width: 760px;
  margin: 52px auto 0;
  padding: 26px 28px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-around;
  gap: 24px;
  flex-wrap: wrap;
  text-align: center;
}

.fact-value {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.2;
}

.fact-label { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }

.film-body { max-width: 660px; margin: 0 auto; padding: 0 28px; }

.film-section { margin-top: 42px; }

.film-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  margin: 0 0 14px;
}

.film-section p { font-size: 15px; line-height: 1.72; margin: 0 0 15px; }

.film-still { margin: 46px 0 0; }

.film-still img { width: 100%; height: auto; }

/* signup block */

.signup-block {
  max-width: 660px;
  margin: 62px auto 0;
  padding: 36px 28px;
  background: var(--band);
}

.signup-block h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  margin: 0 0 18px;
}

.signup-block .signup { border-top: 1px solid #dcdcdc; }

.signup-block .signup input { border-color: #b5b5b5; }

.donate-again { font-size: 14px; line-height: 1.6; margin: 20px 0 0; }

@media (max-width: 860px) {
  .teaser-inner { grid-template-columns: 1fr; padding: 28px 16px; gap: 22px; }
  .teaser-inner > img { height: auto; }
  .teaser-copy h2 { font-size: 25px; }
  .film-hero { padding: 0; }
  .film-hero img { height: 300px; }
  .film-hero-copy { bottom: 30px; }
  .film-hero-copy h1 { font-size: 30px; }
  .logline { font-size: 17px; padding: 0 16px; margin: 30px auto 24px; }
  .film .cta-row { padding: 0 16px; }
  .facts { padding: 22px 16px; gap: 18px; }
  .fact { flex: 1 1 40%; }
  .film-body { padding: 0 16px; }
  .signup-block { padding: 28px 16px; }
}

/* hero video on the film page */

.film-hero-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 560px;
  display: block;
  background: #000;
  object-fit: contain;
}

.film-hero-copy {
  transition: opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}

.film-hero-copy.is-playing { opacity: 0; visibility: hidden; }

.hero-hint {
  font-size: 12px;
  letter-spacing: 0.08em;
  margin: 10px 0 0;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .film-hero-copy { transition: none; }
}

/* --------------------------------------------- site-wide promo strip */

/* Fur photo behind the strip, with a tinted scrim over it so white text stays
   legible whatever the photograph is doing underneath. The scrim is heaviest on
   the left, where the words sit, and lightens to the right so the animal shows
   through. The photo itself is set inline by the template. */
.strip {
  background-color: var(--fur);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
  isolation: isolate;
}

.strip.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(58, 29, 12, 0.94) 0%,
    rgba(58, 29, 12, 0.88) 48%,
    rgba(58, 29, 12, 0.60) 100%);
}

@media (max-width: 860px) {
  /* stacked layout puts text over the full width, so scrim it evenly */
  .strip.has-bg::before {
    background: linear-gradient(
      90deg,
      rgba(58, 29, 12, 0.93) 0%,
      rgba(58, 29, 12, 0.86) 100%);
  }
}

.strip[hidden] { display: none; }

.strip-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 10px 52px 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  min-height: 46px;
}

.strip-copy {
  margin: 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  line-height: 1.35;
}

.strip-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.strip-title { font-family: var(--serif); font-size: 15px; color: #fff; }

.strip-text { font-size: 13px; color: rgba(255, 255, 255, 0.92); }

.strip-actions { display: flex; gap: 10px; flex: 0 0 auto; }

.strip-btn {
  font-size: 12.5px;
  line-height: 1;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.strip-btn:hover { background: rgba(255, 255, 255, 0.16); }

.strip-btn-solid { background: #fff; color: var(--fur); border-color: #fff; }

.strip-btn-solid:hover { background: rgba(255, 255, 255, 0.86); color: var(--fur); }

.strip-close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
}

.strip-close:hover { color: #fff; }

.strip-btn:focus-visible,
.strip-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 860px) {
  /* Stack instead of truncating -- the sentence is the point of the strip, so
     it wraps onto its own line rather than being clipped away. */
  .strip-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 40px 12px 16px;
    gap: 10px;
  }
  .strip-copy { gap: 2px 10px; }
  .strip-text { font-size: 12.5px; }
  .strip-actions { width: 100%; }
  .strip-btn { flex: 1 1 auto; text-align: center; padding: 9px 12px; }
  .strip-close { top: 12px; transform: none; }
}

}

/* hero when the teaser is a YouTube embed: heading above, not over, the player */

.film-hero-embed { padding-top: 46px; }

.film-hero-head { text-align: center; margin: 0 0 22px; }

.film-hero-head .eyebrow { color: var(--accent); }

.film-hero-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  margin: 0;
}

iframe.film-hero-media { border: 0; }

@media (max-width: 860px) {
  .film-hero-embed { padding: 30px 16px 0; }
  .film-hero-head h1 { font-size: 28px; }
}

/* Kit's own validation message ("Email address is invalid", ...) */
.form-error { font-size: 13px; line-height: 1.5; color: #a8221a; margin: 10px 0 0; }
.form-error[hidden] { display: none; }

/* team: a photograph beside each person's bio, sorted by first name in the template */

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

.member {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 22px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}

.member:first-child { padding-top: 8px; }

.member img { width: 112px; height: 112px; object-fit: cover; }

.member h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.35;
  margin: 2px 0 8px;
}

.member p { font-size: 14px; line-height: 1.68; margin: 0; }

@media (max-width: 860px) {
  .member { grid-template-columns: 84px 1fr; gap: 16px; padding: 20px 0; }
  .member img { width: 84px; height: 84px; }
  .member h3 { font-size: 16px; }
  .member p { font-size: 13.5px; }
}

/* a hairline and extra air above a section that starts a new topic (the team) */
.film-section-rule { margin-top: 60px; padding-top: 46px; border-top: 1px solid var(--rule); }