/* LANDERS v6 — foundations, records and photo viewer. No remote fonts or media. */
:root {
  --ink: #173d35;
  --green: #214c43;
  --green-deep: #0f2b25;
  --paper: #f5f8f7;
  --wash: #e5ede9;
  --line: #c9d6cd;
  --line-strong: #a9beb1;
  --muted: #53685f;
  --orange: #a8432b;
  --white: #fff;
  --on-green: #f5f8f7;
  --on-green-muted: #d0dfd5;
  --accent-dot: #bf5035;
  --accent-on-dark: #e8a48f;
  --lightbox-bg: #101c18;
  --lightbox-line: #63736b;
  --lightbox-muted: #b7c8bd;
  --sans: "PingFang HK","PingFang TC","Noto Sans TC","Noto Sans CJK TC","Source Han Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --editorial: "Songti TC","Songti SC","Noto Serif TC","Noto Serif CJK TC",serif;
  --display: "Helvetica Neue",Arial,var(--sans);
  --utility: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --header-h: 80px;
  --gutter: clamp(24px,4.4vw,72px);
  --section-space: clamp(80px,8vw,128px);
  --measure: 1440px;
  --fs-body: 17px;
  --fs-caption: 13px;
  --fs-label: 12px;
  --radius-s: 4px;
  --radius-m: 8px;
  --ease: cubic-bezier(.22,.7,.24,1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
}
* {box-sizing: border-box;}
html {scroll-behavior: smooth;scroll-padding-top: calc(var(--header-h) + 20px);}
body {margin: 0;background: var(--paper);color: var(--ink);font-family: var(--sans);font-size: var(--fs-body);-webkit-font-smoothing: antialiased;}
/* Keep the readable static fallback from briefly pulling the footer into view. */
main {min-height: calc(100vh - var(--header-h));min-height: calc(100svh - var(--header-h));}
button,a {-webkit-tap-highlight-color: transparent;}
a {color: inherit;text-decoration: none;}
button {font: inherit;color: inherit;cursor: pointer;border: 0;}
img {display: block;max-width: 100%;height: auto;}
h1,h2,h3,p,figure {margin: 0;}
h1,h2,h3 {font-weight: 600;word-break: keep-all;overflow-wrap: break-word;}
p {line-height: 1.8;}
button:focus-visible,a:focus-visible {outline: 3px solid var(--orange);outline-offset: 6px;}
main:focus,[tabindex="-1"]:focus {outline: none;}
.visually-hidden {position: absolute!important;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;}
.skip {position: fixed;z-index: 200;left: 16px;top: -80px;padding: 12px 16px;background: var(--white);color: var(--ink);}
.skip:focus {top: 12px;}

/* One quiet navigation line; a native link remains the entire action. */
.site-header {height: var(--header-h);padding: 0 var(--gutter);display: flex;align-items: center;justify-content: space-between;background: var(--paper);position: sticky;top: 0;z-index: 10;border-bottom: 1px solid transparent;transition: border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);}
.site-header.is-scrolled {border-bottom-color: var(--line);box-shadow: 0 4px 16px rgb(23 61 53 / 4%);}
.brand {display: flex;align-items: center;gap: 10px;min-height: 44px;}
.brand img {width: 46px;height: 38px;object-fit: contain;}
.brand>span {font: 800 24px/.95 var(--display);letter-spacing: -.04em;}
.brand small {display: block;font: 500 12px/1.7 var(--sans);letter-spacing: 4px;margin-top: 5px;}
.site-header nav {display: flex;align-items: center;gap: 32px;font-size: 14px;font-weight: 600;}
.site-header nav a {display: inline-flex;align-items: center;justify-content: center;min-width: 44px;min-height: 44px;position: relative;}
.site-header nav a:not(.nav-join)::after {content: "";position: absolute;left: 0;right: 0;bottom: 6px;height: 2px;background: var(--ink);transform: scaleX(0);transform-origin: left;transition: transform var(--dur-base) var(--ease);}
.site-header nav a[aria-current]:not(.nav-join)::after,.site-header nav a:not(.nav-join):hover::after {transform: scaleX(1);}
.site-header nav .nav-join {background: var(--ink);color: var(--white);padding: 0 24px;border-radius: 3px;transition: background-color var(--dur-fast) var(--ease);}
.site-header nav .nav-join:hover {background: var(--green-deep);}
.eyebrow {font: 12px/1.5 var(--utility);letter-spacing: .12em;text-transform: uppercase;}
.dot {display: inline-block;width: 7px;height: 7px;border-radius: 50%;background: var(--accent-dot);margin-right: 8px;}

/* Cover spread: title, people, then the exact companion text. */
.home-hero {max-width: var(--measure);margin: auto;padding: 40px var(--gutter) 48px;}
.hero-topline {margin-bottom: 24px;}
.hero-title {font: 600 clamp(52px,6.1vw,86px)/1.16 var(--editorial);letter-spacing: -.025em;margin: 0 0 32px;text-wrap: balance;}
.hero-grid {display: grid;grid-template-columns: minmax(0,8fr) minmax(260px,4fr);gap: clamp(32px,4vw,64px);align-items: start;}
.hero-photo {min-width: 0;}
.hero-photo>button {display: block;background: transparent;padding: 0;width: 100%;position: relative;}
.hero-photo img {width: 100%;aspect-ratio: 1448/966;object-fit: cover;object-position: 50% 0;border-radius: 4px;}
.hero-photo figcaption {display: flex;align-items: center;justify-content: space-between;gap: 20px;padding-top: 6px;color: var(--muted);font-size: 13px;line-height: 1.65;}
.hero-photo figcaption a {display: inline-flex;align-items: center;min-height: 44px;text-decoration: underline;text-underline-offset: 4px;}
.hero-photo figcaption>span {max-width: 42%;}
.hero-copy {padding-top: 6px;}
.hero-copy .lead {font-size: 18px;line-height: 1.85;max-width: 400px;}
.hero-actions {display: flex;flex-direction: column;align-items: flex-start;gap: 12px;margin-top: 28px;}
.button-primary {display: inline-flex;align-items: center;justify-content: center;gap: 16px;min-height: 48px;padding: 0 25px;background: var(--ink);color: var(--white);font-size: 15px;font-weight: 600;border-radius: 3px;transition: background-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);}
.button-primary:hover {background: var(--green-deep);transform: translateY(-2px);}
.button-primary:active {transform: translateY(0);}
.text-link {display: inline-flex;align-items: center;justify-content: space-between;gap: 24px;min-height: 44px;padding: 10px 0;border-bottom: 1px solid currentColor;font-size: 14px;font-weight: 600;}
.text-link span {transition: transform var(--dur-base) var(--ease);}
.text-link:hover span {transform: translate(3px,-3px);}
.text-link[href="#stories"]:hover span {transform: translateY(4px);}
.hero-support {display: grid;grid-template-columns: 88px 1fr;gap: 16px;align-items: end;margin-top: 40px;padding-top: 24px;border-top: 1px solid var(--line);}
.hero-support img {width: 88px;aspect-ratio: 3/4;object-fit: cover;border-radius: 3px;}
.hero-support p {font-size: 13px;color: var(--muted);line-height: 1.75;}
.hero-baseline {display: flex;justify-content: flex-end;margin-top: 32px;font: 12px/1.7 var(--sans);color: var(--muted);}
.image-open {position: absolute;right: 16px;bottom: 16px;display: flex;align-items: center;justify-content: center;background: var(--paper);color: var(--ink);width: 40px;height: 40px;border-radius: 50%;font: 22px var(--sans);pointer-events: none;transition: transform var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease);}

/* Actual chronological records, composed as four photographic spreads. */
.section-wrap {max-width: var(--measure);margin: auto;padding: var(--section-space) var(--gutter);}
.stories-section {background: var(--wash);}
.section-heading {display: flex;justify-content: space-between;align-items: end;gap: 48px;margin-bottom: 72px;}
.section-heading h2 {font: 600 clamp(36px,4.2vw,60px)/1.25 var(--editorial);letter-spacing: -.02em;margin-top: 18px;}
.section-heading>p {font-size: 14px;color: var(--muted);max-width: 360px;}
.story-grid {display: grid;gap: 96px;}
.story-card {display: grid;grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);gap: clamp(40px,6vw,96px);position: relative;align-items: center;}
.story-card:nth-child(even) {grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);}
.story-card:nth-child(even) .card-image {grid-column: 2;grid-row: 1;}
.story-card:nth-child(even) .card-copy {grid-column: 1;grid-row: 1;}
.story-card h3 a::after {content: "";position: absolute;inset: 0;z-index: 1;}
.story-card:focus-within {outline: 3px solid var(--orange);outline-offset: 12px;border-radius: 4px;}
.story-card h3 a:focus-visible {outline: none;}
.card-image {overflow: hidden;position: relative;border-radius: 4px;background: var(--paper);}
.card-image img {width: 100%;height: auto;aspect-ratio: 4/3;object-fit: cover;transition: transform 400ms var(--ease);}
.story-card[data-story="coffee"] .card-image img {aspect-ratio: 1448/966;object-position: 50% 0;}
.story-card[data-story="citywalk"] .card-image img {object-position: 50% 42%;}
.story-card[data-story="lamma"] .card-image img {object-position: 50% 40%;}
.story-index {display: flex;align-items: baseline;gap: 18px;font: 12px/1.5 var(--utility);letter-spacing: .04em;margin-bottom: 24px;}
.index-number {font: 400 64px/.9 var(--editorial);letter-spacing: -.06em;}
.card-meta {display: flex;flex-wrap: wrap;gap: 6px 20px;font-size: 12px;color: var(--muted);line-height: 1.7;}
.story-card h3 {font-size: clamp(25px,2.4vw,35px);line-height: 1.4;letter-spacing: -.02em;margin: 14px 0;}
.card-copy>p:not(.story-index) {font-size: 16px;color: var(--muted);line-height: 1.85;max-width: 440px;}
.card-bottom {display: flex;justify-content: space-between;align-items: center;gap: 20px;border-bottom: 1px solid var(--line-strong);margin-top: 24px;padding-bottom: 14px;font-size: 13px;}
.card-bottom .arrow {display: flex;align-items: center;justify-content: center;border: 1px solid var(--line-strong);border-radius: 50%;width: 44px;height: 44px;font-size: 23px;transition: background-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);}

/* Long-form pages: generous title measure, then an explicit album landmark. */
.detail {padding-bottom: 64px;}
.detail-top {max-width: var(--measure);margin: auto;padding: 32px var(--gutter) 0;}
.back-link {display: inline-flex;align-items: center;gap: 18px;min-height: 44px;font-size: 14px;margin-bottom: 48px;text-underline-offset: 5px;}
.back-link:hover {text-decoration: underline;}
.detail-intro {display: grid;grid-template-columns: 1.15fr 1fr;gap: 9%;margin-bottom: 48px;align-items: end;}
.detail-title h1 {font: 600 clamp(40px,4.9vw,72px)/1.25 var(--editorial);letter-spacing: -.02em;margin-top: 20px;text-wrap: balance;}
.detail-summary>p {font-size: 17px;color: var(--muted);line-height: 1.85;margin-bottom: 24px;max-width: 600px;}
.detail-facts {display: flex;gap: 20px 32px;flex-wrap: wrap;font-size: 14px;}
.detail-facts span {display: block;color: var(--muted);font-size: 12px;margin-bottom: 6px;}
.detail-cover {max-width: var(--measure);margin: auto;padding: 0 var(--gutter);}
.photo-button {display: block;position: relative;background: transparent;padding: 0;width: 100%;}
.photo-button img {width: 100%;height: auto;object-fit: contain;border-radius: 3px;}
.detail-cover img {max-height: 740px;}
.detail-cover.is-portrait {max-width: 900px;}
.detail-cover.is-portrait img {max-height: min(78vh,760px);}
.photo-caption {display: grid;grid-template-columns: 1fr auto;gap: 16px;font-size: 13px;line-height: 1.7;color: var(--muted);padding-top: 14px;}
.photo-number {font: 12px/1.7 var(--utility);white-space: nowrap;}
.story-body {max-width: 1160px;margin: auto;padding: 80px var(--gutter) 32px;}
.chapter {display: grid;grid-template-columns: minmax(0,1fr) minmax(0,1.6fr);gap: 48px;padding-bottom: 56px;}
.chapter-label {font: 12px/1.6 var(--utility);letter-spacing: .08em;color: var(--orange);margin-bottom: 16px;}
.chapter h2 {font: 600 clamp(28px,2.5vw,36px)/1.45 var(--editorial);letter-spacing: -.01em;}
.chapter>div:last-child {max-width: 600px;}
.chapter p:not(.chapter-label) {font-size: 17px;line-height: 1.9;color: var(--muted);}
.chapter p+p {margin-top: 20px;}
.gallery-heading {display: flex;align-items: center;justify-content: space-between;border-top: 1px solid var(--line-strong);padding: 24px 0;margin-top: 8px;}
.gallery-heading h2 {font: 600 20px var(--sans);}
.gallery-heading>span {font: 12px var(--utility);}
.detail-gallery {display: grid;grid-template-columns: 1fr 1fr;gap: 48px 32px;align-items: start;}
.detail-gallery .photo-button img {max-height: min(82vh,840px);}
.detail-gallery figure:last-child:nth-child(odd) {grid-column: 1/-1;width: min(560px,100%);margin: 16px auto 0;}
.story-note {font-size: 14px;color: var(--muted);border-top: 1px solid var(--line);margin-top: 64px;padding-top: 24px;line-height: 1.8;}
.story-note p+p {margin-top: 10px;}
.story-note strong {font-weight: 600;}
.detail-join {max-width: 1040px;margin: 56px auto 0;padding: 40px;background: var(--wash);display: flex;justify-content: space-between;align-items: center;gap: 32px;flex-wrap: wrap;border-radius: 6px;}
.detail-join h2 {font: 600 32px/1.4 var(--editorial);margin: 12px 0;}
.detail-join p:not(.eyebrow) {font-size: 16px;color: var(--muted);max-width: 520px;text-wrap: balance;}
.detail-join-actions {display: flex;flex-wrap: wrap;align-items: center;gap: 16px 24px;}
.story-pager {max-width: 1160px;margin: 48px auto 0;padding: 0 var(--gutter);display: grid;grid-template-columns: 1fr 1fr;gap: 40px;}
.next-story {display: flex;align-items: center;gap: 20px;min-width: 0;border-top: 1px solid var(--line);padding: 24px 0;}
.next-story p {font: 12px/1.6 var(--sans);margin-bottom: 8px;}
.next-story strong {display: block;font-size: 19px;font-weight: 600;line-height: 1.5;text-wrap: balance;}
.next-story>span {font-size: 28px;}
.prev-story>span {display: none;}
.next-thumb {width: 92px;aspect-ratio: 3/2;object-fit: cover;flex-shrink: 0;border-radius: 3px;}
.next-story>div {flex: 1;min-width: 0;}
.detail-bottom-back {max-width: 1160px;margin: 16px auto 0;padding: 0 var(--gutter);}
.detail-bottom-back .back-link {margin-bottom: 0;}

.site-footer {padding: 40px var(--gutter);display: flex;align-items: center;justify-content: space-between;gap: 32px;color: var(--muted);font-size: 13px;line-height: 1.7;border-top: 1px solid var(--line);}
.footer-wordmark {font: 800 24px var(--display);letter-spacing: -.04em;color: var(--ink);}
.footer-wordmark span {display: block;font: 12px/2 var(--sans);letter-spacing: 2px;}
.footer-nav {display: flex;gap: 24px;}
.footer-nav a {min-width: 44px;min-height: 44px;display: inline-flex;align-items: center;justify-content: center;}
.footer-nav a:hover {text-decoration: underline;text-underline-offset: 5px;}
.not-found,.static-fallback {padding: 80px var(--gutter);max-width: 1000px;min-height: 55vh;}
.not-found h1,.static-fallback h1 {font: 600 40px/1.35 var(--editorial);margin-bottom: 24px;}
.not-found-list {list-style: none;margin: 24px 0 0;padding: 0;display: grid;gap: 8px;}
.no-script {padding: 32px var(--gutter);}

/* Progressive enhancement never hides content or replaces native scrolling. */
.arrival-ready {transform: translateY(10px);transition: transform 360ms var(--ease);}
.arrival-ready.is-arrived {transform: none;}
@media(hover:hover) {
  .story-card:hover .card-image img {transform: scale(1.018);}
  .story-card:hover .card-bottom .arrow,.story-card:focus-within .card-bottom .arrow {background: var(--ink);color: var(--paper);transform: translate(2px,-2px);}
  .image-open {opacity: 0;transform: translateY(4px);}
  .photo-button:hover .image-open,.photo-button:focus-visible .image-open,.hero-photo button:hover .image-open,.hero-photo button:focus-visible .image-open {opacity: 1;transform: none;}
}
@media(hover:none) {
  a:active,button:active {opacity: .75;}
}

/* Tablet has its own cover and long-form composition. */
@media(max-width:1050px) {
  :root {--header-h: 72px;--gutter: 32px;--section-space: 80px;}
  .home-hero {padding-top: 40px;}
  .hero-title {font-size: clamp(48px,7.7vw,78px);margin-bottom: 32px;}
  .hero-grid {grid-template-columns: 1fr;gap: 32px;}
  .hero-photo figcaption>span {max-width: none;}
  .hero-copy {display: grid;grid-template-columns: 1fr 1fr;gap: 24px 40px;padding-top: 0;}
  .hero-copy .lead {grid-row: 1/3;font-size: 17px;max-width: 480px;}
  .hero-actions {margin-top: 0;gap: 8px;}
  .hero-support {margin-top: 0;padding-top: 20px;grid-template-columns: 64px 1fr;gap: 14px;}
  .hero-support img {width: 64px;}
  .hero-baseline {margin-top: 24px;}
  .section-heading {gap: 32px;margin-bottom: 56px;}
  .section-heading>p {max-width: 300px;}
  .story-grid {gap: 72px;}
  .story-card,.story-card:nth-child(even) {grid-template-columns: 1fr 1fr;gap: 32px;}
  .index-number {font-size: 52px;}
  .story-index {margin-bottom: 20px;gap: 14px;}
  .story-card h3 {font-size: 27px;}
  .card-copy>p:not(.story-index) {font-size: 16px;}
  .detail-intro {grid-template-columns: 1fr;gap: 28px;}
  .detail-title h1 {font-size: 56px;max-width: 880px;}
  .detail-summary {max-width: 680px;}
  .detail-summary>p {font-size: 17px;}
  .story-body {padding-top: 64px;}
  .chapter {grid-template-columns: 1fr 1.6fr;gap: 32px;}
  .detail-join {margin-right: var(--gutter);margin-left: var(--gutter);}
  .story-pager {grid-template-columns: 1fr;gap: 0;}
  .next-story {gap: 16px;}
  .next-thumb {width: 80px;}
}
@media(max-width:700px) {
  :root {--header-h: 64px;--gutter: 22px;--section-space: 64px;--fs-body: 16px;}
  .brand {gap: 7px;}
  .brand img {width: 30px;height: 28px;}
  .brand>span {font-size: 18px;}
  .brand small {letter-spacing: 2px;margin-top: 4px;}
  .site-header nav {gap: 14px;font-size: 13px;}
  .site-header nav .nav-join {padding: 0 15px;}
  .home-hero {padding: 32px var(--gutter) 40px;}
  .hero-topline {margin-bottom: 20px;}
  .hero-title {font-size: clamp(33px,10.5vw,52px);line-height: 1.24;letter-spacing: -.025em;margin-bottom: 24px;}
  .hero-grid {gap: 24px;}
  .hero-photo figcaption {flex-direction: column;align-items: stretch;gap: 0;font-size: 12px;padding-top: 4px;}
  .hero-copy {display: block;}
  .hero-copy .lead {font-size: 16px;max-width: none;line-height: 1.85;}
  .hero-actions {flex-direction: row;align-items: center;flex-wrap: wrap;gap: 12px 24px;margin-top: 20px;}
  .hero-support,.hero-baseline {display: none;}
  .image-open {width: 36px;height: 36px;right: 12px;bottom: 12px;font-size: 20px;}
  .section-heading {display: block;margin-bottom: 40px;}
  .section-heading h2 {font-size: 36px;line-height: 1.35;margin-top: 16px;}
  .section-heading>p {margin-top: 20px;font-size: 14px;max-width: none;}
  .story-grid {gap: 56px;}
  .story-card,.story-card:nth-child(even) {display: flex;flex-direction: column;align-items: stretch;gap: 24px;}
  .story-index {gap: 14px;margin-bottom: 18px;}
  .index-number {font-size: 46px;}
  .card-meta {font-size: 12px;gap: 4px 16px;}
  .story-card h3 {font-size: 27px;margin: 12px 0;}
  .card-copy>p:not(.story-index) {font-size: 16px;}
  .card-bottom {margin-top: 18px;padding-bottom: 14px;font-size: 13px;}
  .detail {padding-bottom: 40px;}
  .detail-top {padding-top: 24px;}
  .back-link {margin-bottom: 32px;}
  .detail-intro {gap: 24px;margin-bottom: 32px;}
  .detail-title h1 {font-size: 38px;line-height: 1.35;margin-top: 16px;}
  .detail-summary>p {font-size: 16px;margin-bottom: 24px;}
  .detail-facts {gap: 20px 28px;font-size: 14px;}
  .detail-cover.is-portrait {max-width: none;}
  .detail-cover img,.detail-cover.is-portrait img {max-height: none;}
  .photo-caption {grid-template-columns: 1fr;gap: 6px;padding-top: 12px;font-size: 13px;}
  .photo-number {font-size: 12px;}
  .story-body {padding-top: 48px;}
  .chapter {display: block;padding-bottom: 36px;}
  .chapter h2 {font-size: 28px;margin-bottom: 24px;}
  .chapter p:not(.chapter-label) {font-size: 16px;line-height: 1.9;}
  .gallery-heading {padding: 20px 0;margin-top: 0;}
  .gallery-heading h2 {font-size: 19px;}
  .detail-gallery {display: grid;grid-template-columns: 1fr;gap: 32px;}
  .detail-gallery figure:last-child:nth-child(odd) {grid-column: auto;width: 100%;margin: 0;}
  .detail-gallery .photo-button img {max-height: none;}
  .story-note {margin-top: 40px;padding-top: 24px;}
  .detail-join {padding: 28px 24px;margin-top: 32px;gap: 24px;}
  .detail-join h2 {font-size: 29px;}
  .detail-join-actions {gap: 12px 24px;}
  .story-pager {grid-template-columns: 1fr;gap: 0;margin-top: 32px;}
  .next-story strong {font-size: 18px;}
  .next-thumb {width: 84px;}
  .site-footer {display: grid;grid-template-columns: 1fr;gap: 24px;padding-top: 32px;padding-bottom: 32px;}
  .footer-nav {gap: 28px;}
  .footer-wordmark {font-size: 23px;}
}
@media(max-width:359px) {
  .site-header nav {gap: 9px;font-size: 12px;}
  .site-header nav .nav-join {padding: 0 12px;}
  .brand {gap: 5px;}
  .brand>span {font-size: 16px;}
  .brand img {width: 27px;}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior: auto!important;animation-duration: 0s!important;animation-delay: 0s!important;transition-duration: 0s!important;transition-delay: 0s!important;}
  .arrival-ready {transform: none;}
  .button-primary:hover,.story-card:hover .card-image img,.story-card:hover .card-bottom .arrow,.story-card:focus-within .card-bottom .arrow,.text-link:hover span,.text-link[href="#stories"]:hover span {transform: none;}
}
.nowrap {white-space: nowrap;}

/* LANDERS v5 — about / join / QR candidate.
 * Merge these rules into their owning base/media sections. Remove the old
 * about/join rules first; this file is not an end-of-file override layer.
 * Global palette, --editorial, --sans, --utility, --gutter and
 * --section-space are supplied by the v5 stylesheet.
 */

.about-section {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  align-items: start;
  gap: clamp(48px,6.4vw,92px);
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}
.about-statement {
  min-width: 0;
}
.about-statement > .eyebrow {
  color: var(--muted);
  font: 12px/1.6 var(--utility);
  letter-spacing: .1em;
}
.about-statement h2 {
  margin: 20px 0 28px;
  font-family: var(--editorial);
  font-size: clamp(36px,3.35vw,48px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
}
.about-statement p {
  max-width: 60ch;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
}
.about-statement .about-focus {
  margin-top: 16px;
}
.about-points {
  min-width: 0;
  padding-top: 56px;
}
.about-point {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.about-point > span {
  padding-top: 3px;
  color: var(--muted);
  font: 12px/1.6 var(--utility);
}
.about-point > div {
  min-width: 0;
}
.about-point h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
}
.about-point p {
  max-width: 44ch;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
}

.join-section {
  --join-muted: #cedbd5;
  --join-line: rgb(245 248 247 / .24);
  --join-card: rgb(245 248 247 / .055);
  padding: var(--section-space) var(--gutter);
  color: var(--paper);
  background: var(--green);
}
.join-inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) 236px;
  align-items: start;
  gap: clamp(40px,6vw,88px);
  max-width: 1320px;
  margin: 0 auto;
}
.join-copy {
  min-width: 0;
}
.join-copy > .eyebrow {
  color: var(--join-muted);
  font: 12px/1.6 var(--utility);
  letter-spacing: .1em;
}
.join-copy h2 {
  margin: 20px 0 28px;
  font-family: var(--editorial);
  font-size: clamp(46px,4vw,56px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--paper);
}
.join-copy > p {
  max-width: 60ch;
  color: var(--join-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
}
.join-copy > .join-tagline {
  margin-bottom: 16px;
  color: var(--paper);
  font-size: 18px;
  line-height: 1.8;
}
.join-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}
.join-section .join-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 48px;
  margin: 0;
  padding: 12px 24px;
  border: 1px solid var(--paper);
  border-radius: 3px;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.join-section .join-button:hover {
  border-color: var(--wash);
  background: var(--wash);
}
.join-copy .join-cta-note {
  color: var(--join-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
}
.join-section a:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 5px;
}
.join-steps {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  margin: 36px 0 0;
  padding: 0;
  list-style-type: decimal;
  list-style-position: outside;
  color: var(--join-muted);
  font-size: 16px;
  line-height: 1.8;
}
.join-steps > li {
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--join-line);
  text-wrap: balance;
}
.join-steps > li::marker {
  color: transparent;
  font-size: 0;
}
.join-steps > li > span {
  display: block;
  text-wrap: balance;
}
.join-steps b {
  display: block;
  margin-bottom: 12px;
  color: var(--paper);
  font: 400 13px/1.6 var(--utility);
}
.join-pact {
  margin-top: 40px;
}
.join-copy .join-pact-title {
  max-width: 60ch;
  margin: 0 0 16px;
  color: var(--paper);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
}
.join-pact > ul:not(.join-pact-confirm) {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.join-pact > ul:not(.join-pact-confirm) > li {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--join-line);
  border-radius: 3px;
  background: var(--join-card);
  color: var(--join-muted);
  font-size: 16px;
  line-height: 1.8;
}
.join-pact > ul:not(.join-pact-confirm) b {
  display: block;
  margin-bottom: 6px;
  color: var(--paper);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}
.join-pact > ul + .join-pact-title {
  margin-top: 28px;
  margin-bottom: 12px;
}
.join-pact .join-pact-confirm {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 8px;
  max-width: 60ch;
  margin: 0;
  padding: 0 0 0 1.25em;
  list-style: disc outside;
  color: var(--join-muted);
  font-size: 16px;
  line-height: 1.8;
}
.join-pact .join-pact-confirm > li {
  text-wrap: balance;
  padding-left: 3px;
}
.join-pact .join-pact-confirm > li::marker {
  color: var(--join-muted);
  font-size: .75em;
}
.join-qr {
  align-self: start;
  justify-self: end;
  width: 100%;
  max-width: 236px;
  margin-top: 40px;
  padding: 28px 28px 12px;
  border: 1px solid rgb(23 61 53 / .12);
  border-radius: 3px;
  color: var(--ink);
  background: var(--paper);
}
.join-qr img {
  width: 180px;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.join-qr p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
}
.join-qr a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.join-qr a:hover {
  color: var(--orange);
}
.join-qr a:focus-visible {
  outline-color: var(--green);
  outline-offset: 3px;
}

@media (max-width: 1050px) {
  .about-section {
    grid-template-columns: minmax(0,1fr);
    gap: 40px;
  }
  .about-statement h2 {
    font-size: 44px;
  }
  .about-points {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 24px;
    padding-top: 0;
  }
  .about-point {
    grid-template-columns: minmax(0,1fr);
    align-content: start;
    gap: 12px;
    padding: 20px 0 0;
  }
  .about-point > span {
    padding-top: 0;
  }
  .about-point h3 {
    font-size: 18px;
  }
  .join-inner {
    grid-template-columns: minmax(0,1fr);
    gap: 36px;
  }
  .join-copy h2 {
    font-size: 48px;
  }
  .join-qr {
    display: grid;
    grid-template-columns: 160px minmax(0,1fr);
    align-items: center;
    gap: 4px 24px;
    justify-self: start;
    max-width: 620px;
    margin-top: 0;
    padding: 20px 24px;
  }
  .join-qr img {
    grid-row: 1 / span 2;
    width: 160px;
  }
  .join-qr p {
    align-self: end;
    margin-top: 0;
    text-align: left;
  }
  .join-qr a {
    align-self: start;
    justify-content: flex-start;
    width: fit-content;
    margin-top: 0;
    text-align: left;
  }
}

@media (max-width: 700px) {
  .about-section {
    gap: 32px;
  }
  .about-statement h2 {
    margin: 16px 0 24px;
    font-size: clamp(30px,8.7vw,38px);
  }
  .about-points {
    grid-template-columns: minmax(0,1fr);
    gap: 0;
  }
  .about-point {
    grid-template-columns: 24px minmax(0,1fr);
    gap: 16px;
    padding: 20px 0;
  }
  .about-point > span {
    padding-top: 3px;
  }
  .join-inner {
    gap: 32px;
  }
  .join-copy h2 {
    margin: 16px 0 24px;
    font-size: clamp(30px,8.7vw,38px);
    line-height: 1.3;
  }
  .join-copy > p {
    font-size: 16px;
  }
  .join-copy > .join-tagline {
    font-size: 18px;
  }
  .join-cta {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
  }
  .join-steps {
    grid-template-columns: minmax(0,1fr);
    gap: 0;
    margin-top: 32px;
  }
  .join-steps > li {
    position: relative;
    padding: 16px 0 16px 44px;
  }
  .join-steps b {
    position: absolute;
    top: 18px;
    left: 0;
    width: 36px;
    margin: 0;
  }
  .join-pact {
    margin-top: 24px;
  }
  .join-pact > ul:not(.join-pact-confirm) {
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
  }
  .join-pact > ul:not(.join-pact-confirm) > li {
    padding: 16px;
  }
  .join-qr {
    display: block;
    justify-self: start;
    max-width: 280px;
    padding: 24px 24px 12px;
  }
  .join-qr p {
    margin-top: 16px;
    text-align: center;
  }
  .join-qr a {
    justify-content: center;
    width: 100%;
    margin-top: 4px;
    text-align: center;
  }
}

/* Proven v4 lightbox: image containment, focus, viewport geometry. */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  background: var(--lightbox-bg);
  color: var(--paper);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  z-index: 100;
  overscroll-behavior: contain;
}

.lightbox[data-open] {
  display: grid;
  flex-direction: column;
  grid-template-rows: 70px minmax(0,1fr) auto;
  animation: lb-in 160ms var(--ease);
}

.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 70px;
  padding: 0 4%;
  font: var(--fs-caption) var(--utility);
  width: 100%;
  min-width: 0;
  gap: 20px;
}

.lightbox-close {
  background: transparent;
  color: inherit;
  padding: 10px 0;
  font: 13px var(--sans);
  display: flex;
  gap: 24px;
  align-items: center;
  flex-shrink: 0;
}

.lightbox :focus-visible {
  outline-color: var(--on-green);
}

.lightbox-close span {
  font-size: 29px;
}

.lightbox-stage {
  display: block;
  grid-template-columns: 65px minmax(0,1fr) 65px;
  align-items: center;
  gap: 18px;
  padding: 0;
  flex: 1;
  min-height: 0;
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.lightbox-stage>img {
  height: 100%;
  max-height: 100%;
  width: 100%;
  object-fit: contain;
  min-height: 0;
  position: absolute;
  inset: 0;
  padding: 0 84px;
}

.lightbox-image {
  transition: opacity 160ms var(--ease);
}

.lightbox[data-open] .lightbox-image {
  animation: lb-photo-in var(--dur-base) var(--ease);
}

.lightbox-stage>button {
  background: transparent;
  color: inherit;
  border: 1px solid var(--lightbox-line);
  border-radius: 50%;
  height: 48px;
  width: 48px;
  font-size: 24px;
  position: absolute;
  top: calc(50% - 24px);
  z-index: 1;
}

.lightbox-next {
  justify-self: end;
  right: 3%;
}

.lightbox-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 20px;
  padding: 18px 8% 28px;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.7;
  min-width: 0;
  width: 100%;
}

.lightbox-bottom p {
  line-height: 1.6;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lightbox-bottom #lightbox-credit {
  font-size: 12px;
  color: var(--lightbox-muted);
  grid-column: 1;
  grid-row: 2;
}

.lightbox-original {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  text-decoration: underline;
  text-underline-offset: 5px;
  font-size: var(--fs-caption);
  line-height: 1.6;
}

.lightbox-bar>span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lightbox-prev {
  left: 3%;
}

.lightbox[hidden] {
  display: none!important;
}

@keyframes lb-in {
  from {opacity:0}
}

@keyframes lb-photo-in {
  from {transform:scale(.98)}
  to {transform:scale(1)}
}

@media(hover:hover) {
.lightbox-stage>button:hover {
    border-color: var(--paper);
  }
}

@media(max-width:720px) {
.lightbox-bar {
    height: 62px;
    padding: 0 20px;
  }
.lightbox-stage {
    grid-template-columns: 1fr;
    position: relative;
    padding: 0;
    gap: 0;
  }
.lightbox-stage>img {
    grid-row: 1;
    grid-column: 1;
    padding: 0 12px;
  }
.lightbox-stage>button {
    position: absolute;
    bottom: 10px;
    width: 44px;
    height: 44px;
    font-size: 20px;
    background: color-mix(in srgb,var(--lightbox-bg) 87%,transparent);
    top: auto;
  }
.lightbox-prev {
    left: 20px;
  }
.lightbox-next {
    right: 20px;
  }
.lightbox-bottom {
    padding: 17px 20px 25px;
    gap: 8px 15px;
    font-size: 13px;
  }
.lightbox-close {
    gap: 16px;
  }
.lightbox-close span {
    font-size: 25px;
  }
.lightbox[data-open] {
    grid-template-rows: 62px minmax(0,1fr) auto;
  }
}

@media(max-height:500px) and (orientation:landscape) {
.lightbox[data-open] {grid-template-rows:44px minmax(0,1fr) auto}
.lightbox-bar {height:44px}
.lightbox-bottom {padding:6px 20px 8px}
.lightbox-close {
    height: 44px;
    min-height: 44px;
    padding: 0;
  }
}