/* About Greenpoint. The WORLD palette frames the original footage. */
.gps-about-page {
  --about-bg:var(--gps-black); --about-matte:var(--gps-black); --about-ink:var(--gps-white);
  --about-soft:var(--gps-white); --about-line:var(--gps-green); --about-accent:var(--gps-yellow);
  background:var(--about-bg); color:var(--about-ink); padding:46px 0 76px;
  isolation:isolate;
}
.gps-about-page * { box-sizing:border-box; }
.gps-about-page h1,.gps-about-page h2,.gps-about-page h3 { color:var(--about-ink); }
.gps-about-page a { color:inherit; }
.gps-about-page :is(a,button,summary):focus-visible { outline:2px solid var(--about-accent); outline-offset:5px; }
.gps-about-page .about-wrap { max-width:1280px; }
.gps-about-page .about-eyebrow { margin:0 0 16px; color:var(--about-soft); font:600 10px/1.5 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.about-eyebrow > span { display:inline-block; margin:0 9px; color:var(--about-accent); }
.about-intro { display:grid; gap:28px; padding-bottom:34px; }
.gps-about-page .about-intro h1 { font:400 clamp(52px,15.3vw,132px)/.89 var(--display); letter-spacing:-.025em; text-transform:uppercase; }
.about-intro h1 > span { color:var(--about-accent); }
.about-intro__aside { max-width:30ch; }
.about-intro__aside > p { color:var(--about-soft); font-size:15px; line-height:1.6; margin:0 0 12px; }
.about-text-link { display:inline-flex; align-items:center; gap:22px; min-height:44px; font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--about-line); }
.about-text-link:hover { text-decoration-color:currentColor; }
.about-films__bar { border-top:1px solid var(--about-line); display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 0; font-size:10px; font-weight:600; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; }
.about-films__bar > span:last-child { color:var(--about-soft); flex-shrink:0; }
.about-films__bar > span > span { margin:0 6px; }
.about-cinema { display:grid; gap:22px; align-items:start; }
.about-viewer { min-width:0; scroll-margin-top:92px; }
.about-stage { position:relative; overflow:hidden; background:var(--about-matte); aspect-ratio:16/9; border:1px solid var(--gps-green); border-radius:5px; }
.about-viewer[data-shape="portrait"] .about-stage { aspect-ratio:3/4; max-height:520px; max-height:min(520px,calc(100svh - 160px)); min-height:230px; }
.about-poster,.about-player-slot { position:absolute; inset:0; width:100%; height:100%; }
.about-poster { display:block; text-decoration:none; }
.about-poster > img { display:block; width:100%; height:100%; object-fit:contain; }
.about-poster::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.6)); pointer-events:none; }
.about-player-slot iframe { display:block; width:100%; height:100%; border:0; }
.about-play-mark { position:absolute; z-index:1; bottom:18px; left:18px; display:flex; align-items:center; gap:10px; min-height:46px; padding:6px 14px 6px 6px; background:var(--about-ink); color:var(--gps-black); border-radius:3px; font-size:12px; font-weight:700; box-shadow:0 2px 18px #0003; }
.about-play-mark > svg { width:34px; height:34px; padding:7px; background:var(--about-accent); border-radius:2px; }
.about-play-mark > span:last-child { padding-left:10px; border-left:1px solid #0003; font-size:11px; font-variant-numeric:tabular-nums; }
.about-poster:hover .about-play-mark { background:var(--gps-lime); }
.gps-about-page .about-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:19px; }
.gps-about-page .about-caption .about-eyebrow { margin-bottom:6px; font-size:9px; }
.gps-about-page .about-caption h2 { font:400 clamp(26px,6vw,34px)/1.06 var(--display); text-transform:uppercase; letter-spacing:.01em; }
.gps-about-page .about-caption__note { color:var(--about-soft); font-size:12px; line-height:1.5; margin:6px 0 0; }
.about-stop { display:flex; align-items:center; justify-content:center; gap:12px; flex-shrink:0; min-height:44px; padding:6px 10px; font:600 11px/1.3 var(--sans); background:none; border:1px solid var(--about-line); border-radius:3px; color:var(--about-ink); cursor:pointer; }
.about-stop > span { font-size:20px; font-weight:400; }
.about-stop:hover { border-color:var(--about-ink); }
.about-player-help { display:flex; flex-wrap:wrap; align-items:center; gap:0 16px; font-size:11px; line-height:1.5; color:var(--about-soft); }
.about-direct { display:inline-flex; align-items:center; gap:8px; min-height:44px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--about-line); }
.about-direct:hover { color:var(--about-ink); text-decoration-color:currentColor; }
.about-player-message { max-width:36ch; }
.about-chapters { min-width:0; border-top:1px solid var(--about-line); padding-top:10px; }
.about-chapter + .about-chapter { margin-top:17px; }
.gps-about-page .about-chapter h3 { display:flex; align-items:center; gap:13px; margin:0 0 8px; font:600 10px/1.6 var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.about-chapter h3 > span { color:var(--about-accent); font-size:9px; font-variant-numeric:tabular-nums; }
.about-chapter ol { list-style:none; margin:0; padding:0; }
.about-chapter li + li { margin-top:3px; }
.about-clip { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:center; min-height:57px; padding:6px; border:1px solid transparent; border-radius:3px; }
.about-clip[aria-current="true"] { background:var(--gps-green); border-color:var(--gps-yellow); }
.about-clip:hover { background:var(--gps-green); border-color:var(--about-line); }
.about-clip__thumb { position:relative; display:block; width:64px; height:44px; overflow:hidden; background:var(--about-matte); }
.about-clip__thumb img { width:100%; height:100%; object-fit:contain; }
.about-clip__thumb > svg { position:absolute; width:18px; height:18px; bottom:2px; right:2px; padding:3px; color:var(--gps-white); background:#000c; border-radius:50%; }
.about-clip__name { font-size:12px; line-height:1.35; font-weight:600; overflow-wrap:anywhere; }
.about-clip__time { font-size:10px; line-height:1.4; color:var(--about-soft); font-variant-numeric:tabular-nums; }
.about-connect { margin-top:64px; padding-top:36px; border-top:1px solid var(--about-line); }
.about-connect__links { display:grid; margin-top:22px; }
.about-connect__links > a { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:94px; padding:18px 0; border-bottom:1px solid var(--about-line); }
.about-connect__links strong { display:block; font-size:17px; line-height:1.3; font-weight:600; }
.about-connect__links > a > span:first-child > span { display:block; margin-top:5px; font-size:12px; line-height:1.5; color:var(--about-soft); }
.about-connect__links > a > span:last-child { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--about-line); border-radius:50%; font-size:22px; color:var(--about-accent); }
.about-connect__links > a:hover > span:last-child { background:var(--about-accent); color:var(--about-matte); border-color:var(--about-accent); }
.about-elsewhere { display:flex; flex-wrap:wrap; align-items:center; gap:0 22px; margin-top:19px; font-size:11px; }
.about-elsewhere > span { width:100%; color:var(--about-soft); margin-bottom:4px; }
.about-elsewhere a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--about-line); }
.about-elsewhere a:hover { text-decoration-color:currentColor; color:var(--about-accent); }
@media (min-width:600px) {
  .gps-about-page { padding-top:54px; }
  .about-intro { grid-template-columns:minmax(0,1fr) 220px; align-items:end; gap:28px; }
  .gps-about-page .about-intro h1 { font-size:clamp(60px,9.3vw,132px); }
  .about-intro__aside { padding-bottom:2px; }
  .about-cinema { gap:30px; }
  .about-connect__links { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .about-connect__links > a { align-items:flex-start; padding-top:22px; }
  .about-connect__links > a > span:last-child { width:32px; height:32px; flex-shrink:0; font-size:18px; }
  .about-connect__links strong { font-size:15px; }
  .about-elsewhere > span { width:auto; margin:0; }
}
@media (min-width:960px) {
  .gps-about-page { padding-top:64px; padding-bottom:88px; }
  .gps-about-page .about-wrap { padding-inline:32px; }
  .about-intro { grid-template-columns:minmax(0,1fr) 304px; gap:36px; padding-bottom:44px; }
  .about-intro__aside > p { font-size:16px; }
  .about-cinema { grid-template-columns:minmax(0,1fr) 304px; gap:36px; }
  .about-stage,.about-viewer[data-shape="portrait"] .about-stage { aspect-ratio:auto; height:clamp(430px,42vw,550px); min-height:0; max-height:none; }
  .about-play-mark { left:26px; bottom:26px; min-height:52px; font-size:13px; }
  .about-play-mark > svg { width:38px; height:38px; }
  .about-chapters { border-top:0; padding-top:0; }
  .about-chapter + .about-chapter { margin-top:16px; }
  .about-chapter h3 { padding-top:2px; }
  .about-connect__links { margin-top:30px; gap:32px; }
  .about-connect__links strong { font-size:19px; }
  .about-connect__links > a > span:last-child { width:42px; height:42px; font-size:22px; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .about-clip,.about-play-mark,.about-stop,.about-connect__links > a > span:last-child { transition:background-color .18s ease,border-color .18s ease,color .18s ease; }
}
@media (prefers-reduced-motion:reduce) {
  .gps-about-page * { scroll-behavior:auto !important; }
}
@media (max-width:359px) {
  .about-films__bar { font-size:9px; letter-spacing:.08em; gap:9px; }
}

/* A yellow opening, black cinema, and original film colors. */
.gps-about-page .about-intro {
  --about-ink:var(--gps-black); --about-soft:var(--gps-black); --about-line:var(--gps-black); --about-accent:var(--gps-black);
  background:var(--gps-yellow); color:var(--gps-black);
  padding:clamp(22px,3.4vw,44px); margin-bottom:34px; border-radius:4px;
}
.gps-about-page .about-intro h1 > span { color:var(--gps-black); }
.gps-about-page .about-intro :focus-visible { outline-color:var(--gps-black); }
.about-play-mark { background:var(--gps-yellow); }
.about-play-mark > svg { background:var(--gps-black); color:var(--gps-yellow); }
.about-clip[aria-current="true"],.about-clip:hover { --about-soft:var(--gps-white); color:var(--gps-white); }
.gps-about-page .about-connect h2 { color:var(--gps-yellow); }
.about-connect__links > a > span:last-child { background:var(--gps-yellow); color:var(--gps-black); border-color:var(--gps-yellow); }
.about-connect__links > a:hover > span:last-child { background:var(--gps-lime); border-color:var(--gps-lime); }


/* A founder story grounded in original posts, with the farm films up front. */
.gps-about-page .about-intro h1 { font-size:clamp(45px,9.6vw,110px); line-height:.94; overflow-wrap:normal; }
.about-intro__aside { max-width:38ch; }
.about-intro__actions { display:flex; flex-wrap:wrap; column-gap:24px; }
.about-film-intro { display:grid; gap:16px; margin:42px 0 24px; }
.gps-about-page .about-film-intro h2,.gps-about-page .about-story h2,.gps-about-page .about-record h2,.gps-about-page .about-connect h2 { font:400 clamp(36px,7vw,64px)/1.02 var(--display); text-transform:uppercase; letter-spacing:0; color:var(--gps-yellow); margin:0; }
.about-film-intro .about-eyebrow { margin-bottom:10px; }
.about-film-intro > p { max-width:47ch; font-size:14px; line-height:1.65; margin:0; }
#about-films,#about-story { scroll-margin-top:100px; }
.gps-about-page .about-story { display:grid; gap:30px; margin-top:62px; padding-top:38px; border-top:1px solid var(--about-line); }
.about-story__heading { grid-column:1/-1; }
.about-story__body { min-width:0; }
.about-story-chapter + .about-story-chapter { margin-top:36px; padding-top:32px; border-top:1px solid var(--about-line); }
.gps-about-page .about-chapter-date { display:flex; align-items:center; gap:16px; margin:0 0 13px; font:600 10px/1.6 var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--gps-yellow); }
.about-chapter-date > span { color:var(--gps-white); }
.gps-about-page .about-story-chapter h3 { font:400 clamp(29px,5.5vw,38px)/1.08 var(--display); text-transform:uppercase; margin:0 0 17px; color:var(--gps-white); }
.about-story-chapter > p:not(.about-chapter-date) { max-width:62ch; margin:0 0 17px; font-size:15px; line-height:1.8; }
.about-story-chapter > p:last-child { margin-bottom:0; }
.gps-about-page .about-story-emphasis { font-weight:600; color:var(--gps-yellow); }
.about-story__aside { display:grid; gap:28px; align-content:start; min-width:0; }
.about-original-post { --about-ink:var(--gps-black); --about-soft:var(--gps-black); --about-line:var(--gps-black); --about-accent:var(--gps-black); background:var(--gps-yellow); color:var(--gps-black); margin:0; padding:28px 24px; border-radius:4px; }
.about-original-post .about-eyebrow { font-size:9px; }
.gps-about-page .about-original-post blockquote { margin:24px 0 18px; padding:0; border:0; font-style:normal; color:var(--gps-black); }
.gps-about-page .about-original-post blockquote > p { margin:0; font:400 clamp(36px,7vw,48px)/1.04 var(--display); text-transform:uppercase; }
.about-original-post figcaption { font-size:12px; line-height:1.55; margin-bottom:12px; }
.about-original-post :focus-visible { outline-color:var(--gps-black); }
.about-story-film { display:block; min-width:0; text-decoration:none; }
.about-story-film__image { position:relative; display:block; background:var(--gps-black); border:1px solid var(--about-line); border-radius:4px; overflow:hidden; }
.about-story-film__image > img { width:100%; height:auto; max-height:560px; aspect-ratio:9/16; object-fit:contain; display:block; }
.about-story-film .about-play-mark { left:12px; bottom:14px; right:12px; justify-content:space-between; gap:6px; padding-right:10px; font-size:11px; }
.about-story-film .about-play-mark > svg { flex-shrink:0; width:30px; height:30px; }
.about-story-film__caption { display:block; margin-top:11px; font-size:11px; line-height:1.5; }
.about-record { display:grid; gap:24px; margin-top:52px; padding-top:32px; border-top:1px solid var(--about-line); }
.gps-about-page .about-record h2 { font-size:clamp(32px,6vw,44px); }
.about-record p:not(.about-eyebrow) { font-size:13px; line-height:1.7; max-width:44ch; margin:16px 0 0; }
.about-record ol { list-style:none; padding:0; margin:0; }
.about-record li { border-bottom:1px solid var(--about-line); }
.about-record li:first-child { border-top:1px solid var(--about-line); }
.about-record a { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:17px 0; text-decoration:none; }
.about-record small { display:block; text-transform:uppercase; font-size:9px; letter-spacing:.1em; margin-bottom:5px; }
.about-record strong { font-size:14px; font-weight:600; }
.about-record a > span:last-child { font-size:22px; color:var(--gps-yellow); }
.about-record a:hover strong { text-decoration:underline; text-underline-offset:4px; }
.gps-about-page [hidden] { display:none !important; }
@media (min-width:600px) {
  .gps-about-page .about-intro { grid-template-columns:1fr; }
  .gps-about-page .about-intro h1 { font-size:clamp(65px,10.4vw,110px); }
  .about-intro__aside { max-width:62ch; }
  .about-story__aside { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .about-story-film__image > img { max-height:440px; }
}
@media (min-width:960px) {
  .gps-about-page .about-intro { grid-template-columns:minmax(0,1fr) 280px; gap:34px; }
  .gps-about-page .about-intro h1 { font-size:clamp(72px,7vw,96px); }
  .about-intro__aside > p { font-size:15px; }
  .about-film-intro { grid-template-columns:minmax(0,1fr) 304px; gap:36px; align-items:end; margin-top:48px; }
  .about-film-intro > p { font-size:13px; }
  .gps-about-page .about-story { grid-template-columns:minmax(0,1fr) 304px; gap:46px 72px; margin-top:80px; padding-top:48px; }
  .about-story__heading { grid-column:1/-1; }
  .about-story__aside { grid-template-columns:1fr; }
  .about-story-chapter > p:not(.about-chapter-date) { font-size:16px; }
  .about-story-chapter + .about-story-chapter { margin-top:42px; padding-top:36px; }
  .about-record { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:72px; margin-top:72px; padding-top:42px; }
  .about-connect { margin-top:72px; padding-top:42px; }
}
