/* About (Daylight, Task 34): the hero with a three-photo collage, how we think, the launch film ("Cendavo in 20 seconds",
   played by reel.js with a Pause/Play button, a progress bar and chapters), how we build, who it is for and the closing
   band. Loaded only on /about/. */
.ab-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.ab-hero-copy{grid-column:1/7}
.ab-photos{grid-column:8/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));gap:12px;aspect-ratio:1/1}
/* Task 44: the collage the glass C stands in for (and everyone without WebGL sees) has soft, feathered edges, the same
   radial falloff as the photos behind the C, never a hard rectangle. */
.ab-photos .photo{border-radius:16px;-webkit-mask-image:radial-gradient(farthest-corner at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(farthest-corner at 50% 50%,#000 60%,transparent 100%)}
.ab-p1{grid-column:1/9;grid-row:1/7}
.ab-p3{grid-column:9/13;grid-row:3/7}
.ab-p2{grid-column:4/13;grid-row:7/13}
.think{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 24px;align-items:start}
.think-a{grid-column:1/5}
.think-a .photo{margin-top:36px;aspect-ratio:4/4.6}
.think-list{grid-column:6/13;list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.think-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px 32px;padding:28px 0;border-bottom:1px solid var(--line-2)}
.think-list h3{margin:0;font:760 clamp(1.4rem,1rem + 1vw,2rem)/1.02 var(--font-display);font-stretch:86%;letter-spacing:-.02em}
.think-list p{margin:0;color:var(--ink-2)}
/* The launch film: full width on wide screens, the vertical cut in a 9:16 frame at 640px and below (the same width at
   which reel.js swaps the source), so the swap never shifts the layout. */
.film{padding:clamp(72px,8vw,120px) 0 clamp(56px,6vw,88px)}
.film-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(28px,3vw,44px)}
.film-head .h2{font-size:clamp(2.6rem,1rem + 5vw,6.2rem);font-stretch:80%}
.film-head p{max-width:34ch;margin:0;color:var(--ink-2)}
.film-fig{margin:0}
.film-frame{position:relative;width:min(100%,calc((100svh - 120px) * 16 / 9));aspect-ratio:16/9;margin-inline:auto;overflow:hidden;background:var(--ink)}
.film-video{display:block;width:100%;height:100%;object-fit:cover}
/* Task 44: the control sits below the film (after it in the markup, in the page flow), so it never covers the film's own
   lines of text at its foot. */
.film-ui{position:relative;display:flex;align-items:center;gap:14px;width:min(calc(100% - 2 * var(--gut)),760px);margin:16px auto 0;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:var(--shadow-2)}
.reel-play{display:inline-flex;flex:none;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:650 .9375rem/1 var(--font-display)}
.reel-play::before{content:"";width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.reel-play.is-playing::before{width:9px;height:11px;border:0;border-inline:3px solid currentColor}
.reel-play:hover{background:var(--ink-2)}
.reel-track{position:relative;flex:1;height:3px;overflow:hidden;border-radius:3px;background:rgba(14,14,13,.12)}
.reel-fill{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.reel-time{color:var(--ink-2);font:500 .8125rem/1 var(--font-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.film-cap{max-width:var(--max);margin:0 auto;padding:14px var(--gut) 0;color:var(--ink-2);font-size:.9375rem}
.cap-note{color:var(--mute)}
.film-chapters{list-style:none;max-width:var(--max);margin:20px auto 0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 16px}
.film-chapters button{display:grid;gap:6px;width:100%;min-height:64px;padding:14px 0 16px;border:0;border-top:2px solid var(--line-2);background:none;color:var(--mute);text-align:left;font:600 .9375rem/1.2 var(--font-display);font-stretch:96%}
.film-chapters button:hover,.film-chapters button[aria-current="true"]{color:var(--ink)}
.film-chapters button[aria-current="true"]{border-top-color:var(--amber)}
.film-chapters .t{font:500 .8125rem/1 var(--font-text);font-variant-numeric:tabular-nums}
.build{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 24px}
.build-head{grid-column:1/5}
.build-head p{max-width:34ch;margin:18px 0 0;color:var(--ink-2)}
.build-list{grid-column:6/13;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.build-list li{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--ink)}
.build-list b{font:740 1.1875rem/1.2 var(--font-display);font-stretch:92%}
.build-list span{color:var(--ink-2);font-size:1rem}
.promise{grid-column:6/13;max-width:none;margin:0;padding:24px 28px;border-radius:18px;background:var(--warm);color:var(--ink-2)}
.promise .ulink{color:var(--ink)}
.who-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.who-head .h2{grid-column:1/8}
.who-head p{grid-column:9/13;margin:0;color:var(--ink-2)}
.who-row{list-style:none;margin:clamp(36px,5vw,64px) auto 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.who-row figure{margin:0}
.who-row .photo{aspect-ratio:3/4.2;border-radius:14px}
.who-row li:nth-child(even){margin-top:48px}
.who-row figcaption{margin-top:12px;font:700 1rem/1.2 var(--font-display);font-stretch:96%}
@media(max-width:1023px){
.ab-hero-copy,.ab-photos{grid-column:1/-1}
.ab-photos{max-width:560px;margin-top:40px}
}
@media(max-width:960px){
.think-a,.think-list,.build-head,.build-list,.promise,.who-head .h2,.who-head p{grid-column:1/-1}
.think-a .photo{aspect-ratio:16/9}
.who-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.who-row li:nth-child(even){margin-top:32px}
.who-row li:last-child{grid-column:1/-1}
.who-row li:last-child .photo{aspect-ratio:16/9}
}
@media(max-width:860px){
.film-chapters{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
.think-list li,.build-list{grid-template-columns:minmax(0,1fr)}
.film-frame{width:min(calc(100% - 2 * var(--gut)),calc(78svh * 9 / 16));aspect-ratio:9/16;border-radius:20px}
.film-ui{width:min(calc(100% - 24px),calc(78svh * 9 / 16))}
.reel-time{display:none}
.film-cap{text-align:center}
}