/* Manu Propria home page (direction D "Annals", approved October 29, 2026; see docs/designs/manu-propria-site.md).
   Loaded only on /. The reel is one rendered video (src/build/reel.py); the motto is live text on top of it. */

/* motto faces, cut down to the motto's letters (built by site.py from website/src/motto-fonts, renamed as the OFL asks) */
@font-face{font-family:"MP Motto 1";src:url(/fonts/motto-1.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"MP Motto 2";src:url(/fonts/motto-2.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"MP Motto 3";src:url(/fonts/motto-3.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"MP Motto 4";src:url(/fonts/motto-4.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"MP Motto 5";src:url(/fonts/motto-5.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"MP Motto 6";src:url(/fonts/motto-6.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"MP Motto 7";src:url(/fonts/motto-7.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"MP Motto 8";src:url(/fonts/motto-8.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"MP Motto 9";src:url(/fonts/motto-9.woff2) format("woff2");font-weight:100 900;font-display:block}
/* stand-in for Paulo's handwritten signature until it is scanned (design task T6) */
@font-face{font-family:"MP Hand";src:url(/fonts/hand.woff2) format("woff2");font-display:swap}

body.home{background:#ECE6DA;--muted:#645D53}   /* the shared muted grey is 4.49:1 on this darker paper; this one is 5.2:1 */

/* ---------- first screen ---------- */
.stage{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#17120c;color:var(--paper)}
.reel,.reel picture,.reel-poster,.reel-video{position:absolute;inset:0;width:100%;height:100%}
.reel-poster,.reel-video{object-fit:cover;max-width:none}
.reel-video{opacity:0;transition:opacity .3s ease-out}
.reel-video.on{opacity:1}
/* the warm dark wash: keeps the motto at 3:1 or better over every frame of the reel (measured October 30, 2026; worst 3.7:1 desktop, 3.4:1 phone) */
.wash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(20,15,10,.66) 0%,rgba(20,15,10,.46) 45%,rgba(0,0,0,.6) 100%)}
.logo{position:absolute;left:32px;top:24px;z-index:5;display:block;border-radius:6px}
.logo img{height:68px;width:auto;filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
.line{position:absolute;left:0;right:0;top:40%;transform:translateY(-50%);z-index:5;text-align:center;padding:0 16px}
.motto-live{font:600 clamp(40px,6vw,96px)/1.02 var(--serif);margin:0;color:var(--paper);text-shadow:0 2px 40px rgba(0,0,0,.45)}
.motto-sub{margin:18px auto 0;max-width:40ch;text-wrap:balance;font:italic 400 clamp(18px,2vw,26px)/1.3 var(--serif);color:var(--paper);text-shadow:0 1px 18px rgba(0,0,0,.5)}   /* the Portuguese home page only (decision 7A) */
.motto-live .w{display:inline-block;white-space:nowrap;text-align:center;vertical-align:top;height:1.02em}   /* width is locked by home.js */
.motto-live .w.settled{animation:settle .35s ease-out}
@keyframes settle{from{transform:translateY(3px);opacity:.85}to{transform:none;opacity:1}}

.card{position:absolute;left:24px;right:24px;bottom:24px;z-index:5;background:#ECE4CF;color:var(--ink);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:26px 34px;min-height:132px}
.card p{margin:0}
.card-l{font:400 19px/1.4 var(--serif)}
.card-l a{display:inline-flex;align-items:center;min-height:44px;font:700 15px var(--sans);text-underline-offset:4px}
.hand{font-family:"MP Hand",cursive;color:#22307a;font-size:30px;line-height:1.05;text-align:center}
.card-r{text-align:right}
.card-r a{font:400 19px var(--serif);text-underline-offset:5px;display:inline-block;padding:10px 0}

@media (max-width:760px){
  .logo{left:16px;top:16px}.logo img{height:52px}
  .line{top:30%}                                   /* the motto sits in the upper third on phones (6B) */
  .card{left:12px;right:12px;bottom:12px;grid-template-columns:1fr auto;gap:12px;padding:16px 18px;min-height:0;align-items:center}
  .card-l{font-size:17px;line-height:1.3}
  .card-l a{min-height:40px;font-size:15px}
  .hand{text-align:right;font-size:21px;line-height:1.1}
  .card-r{display:none}                            /* phones: the email is in the footer (decision 6B) */
}

/* ---------- on scroll: the editorial ---------- */
.ed{max-width:760px;margin:0 auto;padding:96px 20px 40px}
.ed h2{font:600 clamp(32px,4.4vw,52px)/1.12 var(--serif);text-align:center;margin:0 0 18px}
.ed h2 em{font-style:italic;font-weight:400}
.ed h2 sup{font:400 .38em var(--sans);vertical-align:super;margin-left:2px}
.ed h2 sup a{text-decoration:none;color:var(--muted)}
.fn{font:italic 400 19px/1.55 var(--serif);color:#3b3630;max-width:560px;margin:0 auto 64px;text-align:center}
.fn span{font-style:normal;color:var(--muted)}

.pairs{display:grid;gap:28px;max-width:1080px;margin:0 auto;padding:0 20px 80px}
.pair{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid #DDD3C2}
.pair figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;background:#d9cfbd}
.pair figure img,.pair figure video{width:100%;height:100%;object-fit:cover;max-width:none}
.pair .then img{filter:sepia(.35) contrast(1.05)}
.pair .next{display:grid;place-items:center;background:#E7DFCF}
.pair .next span{font:italic 400 22px var(--serif);color:var(--muted)}
.pair figcaption{position:absolute;left:12px;bottom:12px;background:rgba(28,26,23,.78);color:var(--paper);font:700 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px}
.pair .txt{grid-column:1/-1;padding:18px 22px 22px;display:grid;grid-template-columns:1fr 1fr;gap:22px;font-size:16px}
.pair .txt p{margin:0}
.pair .txt b{font-family:var(--serif);font-size:20px;display:block;margin-bottom:4px}
.pair .txt a{white-space:nowrap}   /* keeps "See how →" together */
.ai-note{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
/* phones: each caption follows its own picture (Then, its caption, Now, its caption) instead of both pictures first */
@media (max-width:760px){
  .pair{grid-template-columns:1fr}
  .pair .txt{display:contents}
  .pair .txt p{padding:16px 20px 22px;font-size:16px}
  .pair .then{order:1}.pair .txt p:first-child{order:2}.pair .now{order:3}.pair .txt p:last-child{order:4}
}

.essay{max-width:640px;margin:0 auto;padding:0 20px 80px;font:400 20px/1.7 var(--serif);color:#2a2622}
.essay p:first-child::first-letter{float:left;font:600 92px/.8 var(--serif);padding:8px 10px 0 0;color:var(--ink)}
.essay a{font-family:var(--sans);font-weight:700}
.credits{max-width:760px;margin:0 auto;padding:0 20px 60px;font-size:13px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){.reel-video{display:none}.motto-live .w.settled{animation:none}}