/* Home: the scene, then the inset moment, members' words, the pledge, the close */

/* ---------- the scene (native scroll; the stage is sticky for about two viewports) ---------- */
.scene { position:relative; margin-top:-86px; } /* stage starts under the header */
.stage { position:sticky; top:0; height:100vh; height:100svh; margin-bottom:-100vh; margin-bottom:-100svh; overflow:hidden; pointer-events:none; z-index:0; }
.art { position:absolute; width:100vw; max-width:1800px; aspect-ratio:1672/941; right:-2vw; bottom:-11vh; --d:.9; --f:0; --c:0; }
.layer { position:absolute; inset:0; }
.base {
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--d) * 100% - 3%), transparent calc(var(--d) * 100% + 3%)), url(../img/room-base.webp);
          mask-image: linear-gradient(100deg, #000 calc(var(--d) * 100% - 3%), transparent calc(var(--d) * 100% + 3%)), url(../img/room-base.webp);
  -webkit-mask-size:100% 100%, 100% 100%; mask-size:100% 100%, 100% 100%;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.fire-ink { -webkit-mask-image:url(../img/room-fire.webp); mask-image:url(../img/room-fire.webp); opacity:var(--f); transform-origin:68.8% 53%; transform:scaleY(calc(.4 + var(--f) * .6)); }
.chair { -webkit-mask-image:url(../img/room-chair.webp); mask-image:url(../img/room-chair.webp);  transform-origin:89% 84%;
  transform: translateX(calc((1 - var(--c)) * 2.4%)) rotate(calc((1 - var(--c)) * 7deg)); }
.cup { -webkit-mask-image:url(../img/room-cup.webp); mask-image:url(../img/room-cup.webp); opacity:var(--c); transform:translateY(calc((1 - var(--c)) * -1.2%)); }
/* the room catches: one flat terracotta wash laid by brush (a little off-register), at the lamp and the grate */
.wash { position:absolute; background:var(--tc-200); opacity:.85; mix-blend-mode:var(--wash-blend);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cpath d='M6 22 C 14 6, 40 3, 62 5 C 82 7, 97 14, 95 34 C 93 52, 88 70, 66 76 C 46 80, 22 77, 10 66 C 2 56, 0 36, 6 22 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cpath d='M6 22 C 14 6, 40 3, 62 5 C 82 7, 97 14, 95 34 C 93 52, 88 70, 66 76 C 46 80, 22 77, 10 66 C 2 56, 0 36, 6 22 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0); }
.wash.lamp { left:38%; top:13.5%; width:12.5%; height:15%; transform:rotate(-2deg); }
.wash.fire { left:64.2%; top:40%; width:9.5%; height:15.5%; background:var(--tc-300); opacity:.55;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cpath d='M12 14 C 26 3, 58 2, 80 9 C 96 15, 99 36, 92 54 C 86 70, 64 79, 42 77 C 20 75, 4 64, 3 44 C 2 30, 4 20, 12 14 Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cpath d='M12 14 C 26 3, 58 2, 80 9 C 96 15, 99 36, 92 54 C 86 70, 64 79, 42 77 C 20 75, 4 64, 3 44 C 2 30, 4 20, 12 14 Z'/%3E%3C/svg%3E"); }
/* the giraffe, once: a neck and its markings seen through the window; the head stays out of frame */
.window-view { position:absolute; left:89.8%; top:0; width:12%; height:46%; overflow:hidden; }
.window-view .neck { position:absolute; left:-92%; top:-8%; width:190%; }
.still-block { display:none; }

.panel { position:relative; z-index:1; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:0 var(--gutter); }
.panel .col { width:min(560px, 44vw); }
.p1 { align-items:flex-start; padding-top:clamp(140px, 22vh, 210px); }
.p1 .d1 { max-width:12.5ch; }
.p1 .lead { margin-top:26px; max-width:30em; max-width:36ch; }
.p1 .actions { margin-top:34px; }

.letter { max-width:27em; font-size:18px; line-height:1.7; }
.letter .cap { margin-bottom:18px; }
.letter .salute { font:italic 500 30px/1.2 var(--display); margin-bottom:14px; display:flex; align-items:baseline; gap:8px; }
.letter .dash { width:84px; height:14px; color:var(--ink); align-self:center; transform:translateY(4px); }
.letter .signoff { margin-top:22px; }
.letter .signoff span { display:block; font:italic 500 30px/1.25 var(--display); margin-top:4px; }
.method { max-width:27em; }
.method .d2 { margin-bottom:22px; max-width:14ch; }

/* ---------- moment D, inset ---------- */
.reach { position:relative; z-index:1; display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap:clamp(40px, 7vw, 120px); align-items:start; padding:clamp(120px, 16vh, 180px) var(--gutter) 120px; max-width:1440px; margin:0 auto; background:var(--paper); }
.reach-copy { padding-top:24px; max-width:30em; }
.reach-copy .lead { margin-top:22px; }
.reach-copy .cap { margin-top:18px; }
.reach-act { display:flex; align-items:center; gap:28px; margin-top:28px; flex-wrap:wrap; }

/* ---------- members' words ---------- */
.voices { position:relative; padding:80px var(--gutter) 130px; max-width:1440px; margin:0 auto; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); row-gap:72px; }
.voice { position:relative; z-index:1; }
.voice blockquote { text-indent:-.4em; max-width:22ch; font-size:36px; line-height:1.22; }
.voice figcaption { margin-top:16px; }
.v1 { grid-column:1 / span 6; }
.v2 { grid-column:6 / span 6; }
.voices-note { grid-column:1 / span 6; }

/* ---------- the close: one column, one button ---------- */
.close { padding:20px var(--gutter) 140px; max-width:1440px; margin:0 auto; }
.close-copy { max-width:620px; }
.close .coats { width:220px; aspect-ratio:2/3; margin:0 0 40px -18px;
  -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 98%), url(../img/coats-hook.webp); mask-image:linear-gradient(180deg, #000 72%, transparent 98%), url(../img/coats-hook.webp);
  -webkit-mask-size:100% 100%, 100% 100%; mask-size:100% 100%, 100% 100%; -webkit-mask-composite:source-in; mask-composite:intersect; }
.close .lead { margin:20px 0 32px; max-width:34em; }
.inline { text-decoration:underline; text-decoration-color:var(--wash); text-decoration-thickness:2px; text-underline-offset:4px; }

/* ---------- phone: designed at 400 ---------- */
@media (max-width: 760px) {
  /* phone: no sticky stage. The scene appears twice in its own block: as drawn, then lit, after the method */
  .scene { margin-top:0; }
  .stage { display:none; }
  .still-block { display:block; position:relative; height:300px; overflow:hidden; margin:8px 0 24px;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 44px); mask-image:linear-gradient(180deg, transparent 0, #000 44px); }
  .art.still { width:170vw; right:-4vw; bottom:-20px; }
  .art.still.unlit { --d:1.2; --f:0; --c:0; }
  .art.still.lit { --d:1.2; --f:1; --c:1; }
  .panel { min-height:0; display:block; padding-top:0; }
  .panel .col { width:100%; }
  .p1 { padding-top:44px; }
  .p1 .lead { margin-top:20px; }
  .p1 .actions { margin-top:26px; gap:6px 24px; }
  .p2, .p3 { padding-top:40px; padding-bottom:32px; }
  .letter.rise, .method.rise { opacity:1; transform:none; }
  .letter, .method { font-size:16.5px; }
  .letter .salute, .letter .signoff span { font-size:26px; }
  .reach { grid-template-columns:minmax(0,1fr); gap:28px; padding:72px var(--gutter) 80px; }
  .reach-copy { padding-top:0; }
  .voices { grid-template-columns:minmax(0,1fr); padding:56px var(--gutter) 96px; row-gap:48px; }
  .v1, .v2, .voices-note { grid-column:1; }
  .v2 { padding-left:12%; }
  .voice blockquote { font-size:28px; max-width:15ch; }
  .close { padding:0 var(--gutter) 100px; }
  .close .coats { width:160px; margin-bottom:40px; }
}
@media (prefers-reduced-motion: reduce) {
  .art { --d:1.2 !important; --f:1 !important; --c:1 !important; }
}