/* Section styling uses the Figma assets. Change content in index.html. */
/* Animated paper must not become a browser scroll anchor while it moves. */
main { overflow:clip; overflow-anchor:none; }
section[id] { scroll-margin-top:30px; }
a { color:inherit; text-underline-offset:4px; }
.nav-preview a { text-decoration:none; }
.nav-preview a:hover { text-decoration:underline; }
.mobile-nav ul { display:grid; gap:12px; margin:0; }
.mobile-nav a { text-decoration:none; display:block; }
.section-width { width:calc(100% - 200px); max-width:1240px; margin-left:auto; margin-right:auto; }
h2 { font-family:'Pixelify Sans',sans-serif; font-size:60px; font-weight:600; line-height:1.15; margin:0; }
h3 { margin:0; }
.svg-fit { display:inline-block; position:relative; vertical-align:middle; max-width:100%; flex-shrink:0; }
.svg-fit > svg { display:block; position:absolute; top:0; left:0; max-width:none; transform-origin:top left; }
.svg-fit img { display:block; position:absolute; top:0; left:0; max-width:none; transform-origin:top left; }
.about-sheet { margin-top:62px; margin-bottom:110px; padding:50px 60px; transform:rotate(1.13deg); background:url('assets/paper-lined.png') left top/100% auto; box-shadow:0 8px 8px #00000040; }
.about-sheet h2 { padding-right:10px; }
.about-copy {   font-weight:400; }
.about-copy p { margin-bottom:15px; }
.about-copy p:last-child { margin:0; }
.works { position:relative; background:linear-gradient(to bottom,transparent 0 80px,white 80px); padding-top:140px; padding-bottom:130px; }
.torn-edge { position:absolute; left:0; width:100%; pointer-events:none; background-image:url('assets/paper-torn.png'); background-size:100% auto; background-repeat:no-repeat; }
.torn-top { top:-7vw; height:19.5vw; background-position:center -6.5vw; }
.works-content { position:relative; z-index:1; }
.works-heading { position:relative; display:inline-block; isolation:isolate; }
.works-heading h2 { position:relative; z-index:1; font-size:80px; font-weight:400; line-height:.9; }
.heading-highlight { position:absolute; left:-187px; top:0; width:866px; height:100%; overflow:hidden; pointer-events:none; z-index:-1; }
.heading-highlight .svg-fit { position:absolute; top:50%; transform:translateY(-50%); width:100% !important; }
.works-intro { max-width:815px;   font-weight:400; margin-top:22px; margin-bottom:0; }
.works-collage { display:grid; grid-template-columns:31% 35% 34%; align-items:start; margin-top:60px; min-height:560px; gap:0; }
.works-collage figure { margin:0; }
.book-slot { position:relative; height:450px; margin-top:80px !important; overflow:hidden; margin-left:-85px !important; }
.book-slot img { position:absolute; width:157.15%; height:138.43%; max-width:none; object-fit:fill; left:-9.67%; top:-20.33%; }
.media-stack { padding-right:25px; }
.television-slot { position:relative; width:100%; aspect-ratio:417/291; }
.tv-screen { position:absolute; left:9.8%; top:3.3%; width:78.17%; height:79.84%; overflow:hidden; }
.tv-screen img { width:126.63%; height:100%; max-width:none; object-fit:fill; }
.tv-frame { position:absolute; left:-1.2%; top:-19.28%; width:100.21%; height:125.05%; overflow:hidden; filter:drop-shadow(0 4px 7px #0005); }
.tv-frame img { position:absolute; left:-15.3%; width:130.61%; height:100%; max-width:none; object-fit:fill; }
.tv-title { position:absolute; left:15.26%; top:40.23%; width:43.08%; }
.tv-title .svg-fit { width:100% !important; }
.browser-slot { position:relative; margin-top:55px !important; aspect-ratio:407.56/313.929; transform:rotate(-5.07deg); filter:drop-shadow(8px 8px 6px #0004); }
.browser-frame { position:absolute; width:100%; height:100%; object-fit:fill; }
.browser-screen { position:absolute; left:2.71%; top:22.94%; width:92.78%; height:67.38%; object-fit:cover; }
.collective-sheet { position:relative; padding:28px 30px; background:url('assets/paper-grid.png') center/cover; transform:rotate(4.93deg); box-shadow:0 4px 8px #0004; font-weight:600; }
.collective-sheet h3 { font-size:32px; line-height:1.3; margin-bottom:24px; }
.collective-sheet ul { margin-bottom:0; }
.collective-sheet li {   margin-bottom:13px; }
.collective-sheet li:last-child { margin:0; }
.reflections { position:relative; background:var(--ink); color:var(--paper); overflow:clip; }
.torn-bottom { top:auto; bottom:-17vw; height:24.5vw; background-position:center -22.64vw; z-index:2; }
.cardboard-overlay { position:absolute; inset:0; background:url('assets/cardboard.png') center/cover; mix-blend-mode:multiply; pointer-events:none; opacity:.8; }
.reflections-inner { display:grid; grid-template-columns:52% 48%; position:relative; padding-top:265px; min-height:924px; }
.reflections-copy { padding-bottom:70px; padding-right:40px; position:relative; z-index:1; }
.reflections h2 { color:var(--lime); font-size:80px; font-weight:400; margin-bottom:40px; line-height:.9; }
.reflections p {   font-weight:400; margin:0 0 26px; }
.reflection-visual { position:relative; min-height:659px; }
.reflection-doodle { position:absolute; left:8%; top:-125px; width:84% !important; }
.reflection-photo { position:absolute; bottom:0; right:-15px; width:100%; aspect-ratio:580.63/447.299; overflow:hidden; }
.reflection-photo img { position:absolute; left:-342.45%; top:-28.18%; width:534.86%; height:990.75%; max-width:none; object-fit:fill; }
.experiences { padding-top:125px; padding-bottom:125px; }
.section-heading { display:flex; align-items:center; margin-bottom:44px; }
.experience-copy { --bs-gutter-x:90px; }
.experience-copy p {  font-weight:400;  margin:0 0 32px; }
.collaborators { margin-top:110px; }
.collaborators h3 { font-family:'Pixelify Sans',sans-serif; font-size:50px; font-weight:600; line-height:1; text-align:center; max-width:760px; margin:0 auto 45px; }
.logo-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px 21px; margin:0; }
.logo-card { aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:white; padding:15px; overflow:hidden; }
.logo-card .svg-fit,.raster-logo { max-width:100%; height:auto; }
.appm-logo { width:139px; max-width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.appm-logo .svg-fit { flex-shrink:1; }
.contact-wrap { padding:80px 24px 135px; }
.contact-sheet { position:relative; max-width:677px; margin:auto; background:var(--ink); color:#e9e8e2; padding:65px 60px 60px; box-shadow:0 4px 7px #0004; }
.contact-paperclip { position:absolute; top:37px; right:-27px; width:194.596px; height:49.734px; overflow:hidden; transform:rotate(-58.87deg); pointer-events:none; z-index:2; }
.contact-paperclip img { position:absolute; top:-106.44%; left:-10.95%; width:121.9%; height:318.02%; max-width:none; }
.contact-sheet h2 { margin-bottom:22px; }
.contact-sheet p {   font-weight:400; margin:0 0 30px; }
.contact-sheet p:last-child { margin:0; }
.contact-email { position:relative; margin:15px -10px 60px; }
.contact-email a { position:relative; z-index:1; display:block; color:var(--ink); text-decoration:none;  font-weight:700;  padding:8px 0; overflow-wrap:anywhere; }
.email-highlight { position:absolute; left:-20px; width:calc(100% + 40px); top:50%; transform:translateY(-50%); }
.email-highlight .svg-fit { width:100% !important; }
.site-footer { width:calc(100% - 50px); max-width:1580px; margin:0 auto 24px; padding:60px 74px 25px; background:url('assets/paper-grid.png') center/cover; box-shadow:0 8px 12px #0004; }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-bottom:40px; }
.footer-brand { display:flex; align-items:center; gap:26px; text-decoration:none; flex-shrink:0; }
.footer-brand .wordmark { width:202px; gap:15px; }
.footer-brand .wordmark span:first-child { font-size:43px; }
.footer-brand .wordmark span:last-child { font-size:39px; }
.footer-doodle { flex:1; min-width:0; }
.footer-doodle .svg-fit { width:100% !important; }
.social-links { display:flex; align-items:center; gap:25px; flex-wrap:wrap; justify-content:flex-end; }
.social-links a { display:block; text-decoration:none; }
.social-links .facebook-link { width:40px; height:40px; }
.facebook-icon { display:block; width:40px; height:40px; background:var(--ink); -webkit-mask:url("assets/facebook.svg") center/contain no-repeat; mask:url("assets/facebook.svg") center/contain no-repeat; }
.footer-rule { height:2px; overflow:hidden; }
.footer-rule img { display:block; max-width:none; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; font-size:16px; margin-top:22px; }
.footer-bottom p { margin:0; }
.motion-settings { margin-top:18px; text-align:right; }
.motion-settings .review-button { font-size:12px; padding:7px 10px; }
body.motion-reduced,body.motion-reduced * { scroll-behavior:auto !important; }
@media(min-width:1600px) { .section-width { max-width:1400px; } }
@media(max-width:1250px) and (min-width:992px) {
 .section-width { width:calc(100% - 140px); }
 .about-sheet { padding:40px; }
 .works-heading h2,.reflections h2 { font-size:65px; }
 .collective-sheet { padding:25px; }.collective-sheet h3 { font-size:26px; }.collective-sheet li {  }
 .reflections p {  }.reflections-inner { min-height:850px; padding-top:220px; }
 .experience-copy { --bs-gutter-x:55px; }.experience-copy p {  }
 .footer-top { flex-wrap:wrap; }.footer-doodle { max-width:40%; }.social-links { gap:18px; }
}
@media(max-width:991px) {
 .section-width { width:calc(100% - 80px); }
 h2 { font-size:48px; }
 .about-sheet { padding:35px 30px; margin-top:65px; margin-bottom:100px; }
 .about-copy {  }
 .works { padding-top:105px; padding-bottom:85px; background:linear-gradient(to bottom,transparent 0 35px,white 35px); }
 .works-heading h2,.reflections h2 { font-size:58px; }
 .heading-highlight { width:690px; left:-130px; }.heading-highlight .svg-fit { width:100% !important; }
 .works-collage { grid-template-columns:45% 55%; gap:30px 0; margin-top:55px; }
 .book-slot { height:370px; margin-left:-65px !important; margin-top:50px !important; }.media-stack { padding-right:0; }
 .collective-sheet { grid-column:1/-1; max-width:560px; width:100%; margin:35px auto 0; transform:rotate(2deg); }
 .collective-sheet h3 { font-size:30px; }
 .reflections-inner { grid-template-columns:1fr; min-height:0; padding-top:180px; }
 .reflections-copy { max-width:640px; padding:0; }.reflections p {  }
 .reflection-visual { width:100%; max-width:580px; height:460px; min-height:0; margin:70px auto 0; }
 .reflection-doodle { top:-35px; width:70% !important; left:20%; }.reflection-photo { width:100%; right:0; }
 .experiences { padding:75px 0; }.section-heading { margin-bottom:45px; }.section-heading .svg-fit { width:48px !important; }
 .experience-copy { --bs-gutter-x:24px; }.experience-copy p {  }
 .collaborators { margin-top:65px; }.collaborators h3 { font-size:39px; }.logo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .contact-wrap { padding:55px 40px 90px; }.contact-sheet { padding:45px 35px; }.contact-email a {  }
 .site-footer { width:calc(100% - 28px); padding:35px 28px 25px; }.footer-top { flex-wrap:wrap; gap:25px; padding-bottom:30px; }.footer-doodle { display:none; }.social-links { justify-content:flex-start; gap:22px; }.footer-bottom { flex-wrap:wrap; font-size:14px; }
}
@media(max-width:575px) {
 .contact-paperclip { width:126px; height:32.203px; top:24px; right:-18px; }
 .section-width { width:calc(100% - 56px); }
 .about-sheet { padding:30px 24px; }.about-sheet h2 { font-size:42px; }.about-copy {  }
 .works-heading h2 { font-size:46px; }.works-intro {  }.heading-highlight { width:550px; left:-120px; }
 .works-collage { grid-template-columns:1fr; }.book-slot { width:calc(100% + 25px); max-width:390px; height:340px; margin:-10px auto 0 !important; }.media-stack { max-width:390px; width:100%; margin:auto; }.collective-sheet { padding:25px; margin-top:40px; }.collective-sheet h3 { font-size:27px; }.collective-sheet li {  }
 .reflections-inner { padding-top:145px; }.reflections h2 { font-size:52px; margin-bottom:30px; }.reflections p {  }.reflection-visual { height:310px; margin-top:30px; }.reflection-doodle { width:76% !important; top:0; }
 .experience-copy p {  }.section-heading { gap:12px; }.section-heading h2 { font-size:39px; }.section-heading .svg-fit { width:38px !important; }
 .collaborators h3 { font-size:32px; margin-bottom:30px; }.logo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.logo-card { padding:15px; }
 .contact-wrap { padding:40px 28px 75px; }.contact-sheet { padding:35px 25px; }.contact-sheet h2 { font-size:44px; }.contact-sheet p {  }.contact-email { margin:10px 0 40px; }.contact-email a {  }.email-highlight { left:-10px; width:calc(100% + 20px); }
 .footer-brand { gap:18px; }.footer-brand .wordmark { width:170px; }.footer-brand .wordmark span:first-child { font-size:36px; }.footer-brand .wordmark span:last-child { font-size:34px; }.footer-brand>img { width:45px; height:auto; }.motion-settings { text-align:left; }
}

/* One body scale for all prose; headings and small footer labels keep their hierarchy. */
.about-copy, .works-intro, .intro-copy p, .reflections p,
.experience-copy p, .collective-sheet li, .contact-sheet p, .contact-email a {
 font-size:var(--body-size);
 line-height:var(--body-leading);
 font-weight:500;
}
.works-intro { position:relative; z-index:1; }
.experience-copy p { margin-bottom:24px; }

/* Keep the email legible on both the green card and its moving lime marker. */
.contact-email a { color:#e9e8e2; }
/* Both visual layers share one coordinate system, even while the card moves. */
.contact-email { --email-bleed:20px; }
.email-reveal { position:absolute; left:calc(-1 * var(--email-bleed)); right:calc(-1 * var(--email-bleed)); top:-70px; bottom:-70px; z-index:2; pointer-events:none; }
.email-reveal .email-highlight { left:0; width:100%; }
.email-ink { position:absolute; top:70px; left:var(--email-bleed); right:var(--email-bleed); padding:8px 0; color:var(--ink); font-size:var(--body-size); line-height:var(--body-leading); font-weight:500; overflow-wrap:anywhere; }
.contact-email:focus-within::after { content:''; position:absolute; inset:0; outline:3px solid #e9e8e2; outline-offset:6px; z-index:3; pointer-events:none; }
@media(max-width:575px) { .contact-email { --email-bleed:10px; } }

/* Mobile polish: keep the address intact and let the marker fit wrapped text. */
.email-user,.email-domain { white-space:nowrap; }
.email-reveal .email-highlight { height:calc(100% - 108px); }
.email-reveal .email-highlight .svg-fit { height:100%; aspect-ratio:auto !important; }
@media(max-width:991px) {
 .mobile-menu { min-height:44px; min-width:60px; }
 .mobile-nav a { min-height:44px; display:flex; align-items:center; }
 .mobile-nav ul { gap:4px; }
}
@media(max-width:575px) {
 .book-slot { height:auto; aspect-ratio:527.188/448.855; }
 .contact-paperclip { width:108px; height:27.603px; top:20px; right:-16px; }
}
@media(max-width:360px) {
 .masthead { gap:18px; }
 .contact-sheet { padding-left:22px; padding-right:22px; }
 .contact-paperclip { width:78px; height:19.936px; top:15px; right:-12px; }
}

/* Keep the native email and its marker text perfectly aligned and centred. */
.contact-email a,.email-ink { text-align:center; }

/* Preserve the supplied Ados et armés composition inside the existing browser artwork. */
.browser-screen { object-fit:contain; background:#15252d; }
.partner-logo { object-fit:contain; max-height:72px; }