@font-face{font-family:Letter;src:url('/assets/special-elite-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
.cv-menu{position:relative;text-align:left;z-index:7}
.cv-menu summary{display:block;list-style:none;padding:10px 0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.cv-menu summary::-webkit-details-marker{display:none}
.cv-menu summary::marker{content:''}
.cv-menu summary:focus-visible,.cv-copy:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.cv-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(330px,calc(100vw - 32px));max-height:calc(100svh - 95px);overflow-y:auto;overscroll-behavior:contain;padding:0 20px;background:#fff;border:1px solid #dce0df;border-radius:3px;box-shadow:0 5px 16px #142b2d12;color:var(--ink);font:16px/1.45 var(--serif);letter-spacing:0}
.masthead nav{position:relative}
.masthead .cv-menu{position:static}
.cv-section{padding:17px 0}
.cv-section+.cv-section{border-top:1px solid #e4e7e5}
.cv-panel .cv-heading{font:17px/1.45 var(--serif);margin:0 0 6px}
.cv-panel a{font:14px/1.5 var(--serif);color:#526965;text-decoration:underline;text-underline-offset:.2em}
.cv-panel a:hover{color:var(--accent)}
.cv-agent-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cv-copy{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 9px;border:1px solid #a8b4b0;border-radius:3px;background:#fff;color:var(--ink);font:13px/1.4 var(--serif);cursor:pointer;white-space:nowrap}
.cv-copy svg{fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.cv-copy:hover{border-color:var(--ink)}
.cv-copy:disabled{opacity:.6;cursor:wait}
.cv-panel .cv-copy-status{font:12px/1.5 var(--serif);margin:7px 0 0;color:var(--muted)}
.cv-panel .cv-copy-status:empty{display:none}
.cv-copy-fallback{display:block;width:100%;height:130px;margin-top:10px;padding:8px;border:1px solid #a8b4b0;background:#fff;color:var(--ink);font:12px/1.5 var(--serif);resize:vertical}
.cv-entry a{color:var(--muted)}
.cv-menu-up .cv-panel{top:auto;bottom:calc(100% + 10px)}
.closing nav{position:relative}
.closing .cv-menu{position:static;font:15px/1.5 var(--serif)}
.closing .cv-panel{left:50%;right:auto;translate:-50% 0}
@media(max-width:650px){.cv-panel{font-size:14px;max-height:calc(100svh - 90px)}.cv-panel .cv-heading{font-size:16px}.cv-section{padding-block:15px}.colophon{align-items:center}}
@media(max-height:500px){.closing .cv-panel{position:fixed;top:80px;bottom:auto;max-height:calc(100svh - 96px)}}
@media print{.cv-menu{display:none!important}}
:root{color-scheme:light;--paper:#fffefa;--ink:#142b2d;--muted:#6e7776;--accent:#173f6b;--serif:Letter,'Courier New',monospace;--body:var(--serif);scroll-snap-type:y mandatory;scroll-behavior:smooth;font-synthesis:none;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em;-webkit-tap-highlight-color:transparent}
a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
[hidden]{display:none!important}
::selection{background:#dbe8f5;color:#173f6b}
img{display:block;width:100%;height:auto}
figure,p,h1{margin:0}
.skip{position:fixed;left:20px;top:12px;z-index:10;background:var(--paper);padding:12px;transform:translateY(-180%)}
.skip:focus{transform:none}
.masthead{position:fixed;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:27px 5.5% 12px;gap:24px;background:var(--paper)}
.wordmark{font:400 24px/1 var(--serif);text-decoration:none}
.masthead nav{display:flex;align-items:center;gap:32px;font:14px/1.4 var(--serif)}
.masthead nav>a{text-decoration:none;padding-block:10px}
.reading-part{position:relative;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;padding:112px 7% 84px}
.hero{max-width:1700px;margin:auto;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);align-items:center;gap:0;padding:110px 5.5% 80px}
.hero-copy{position:relative;z-index:1;min-width:0}
.hero .salutation{font:400 clamp(42px,5vw,72px)/1.2 var(--serif);letter-spacing:-.025em;margin-bottom:24px}
.hero-intro,.hero-answer{font:400 clamp(25px,2.6vw,38px)/1.4 var(--serif);letter-spacing:-.015em}
.hero .paper-art{width:116%;max-width:116%;margin-left:-8%}
.paper-art{margin:0;min-width:0}
.paper-art img{object-fit:contain}
.paper-stage{display:contents}
.paper-art{position:relative}
.hinge-art{display:none;position:absolute;inset:0;perspective:1800px;pointer-events:none}
.paper-rig,.paper-panel{position:absolute;inset:0;transform-style:preserve-3d}
.paper-rig{transform-origin:50% 95%;transform:rotateX(calc(var(--fold,0)*1deg))}
.paper-panel img{width:100%;height:100%;object-fit:contain}
.wing-left{clip-path:polygon(0 0,39% 0,39% 18%,36% 24%,36% 32%,37% 39%,39% 45%,40% 53%,42% 61%,0 64%);transform-origin:40% 57%;transform:rotateY(calc(var(--wing,0)*1deg))}
.wing-right{clip-path:polygon(100% 0,61% 0,61% 18%,64% 24%,64% 32%,63% 39%,61% 45%,60% 53%,58% 61%,70% 61%,72.7% 56.6%,74.7% 54.7%,75.2% 52.7%,77.5% 50.8%,78.8% 48.8%,80.6% 46.9%,81% 44.9%,81.7% 43%,84% 41%,100% 41%);transform-origin:60% 57%;transform:rotateY(calc(var(--wing,0)*-1deg))}
.body-panel{clip-path:polygon(39% 0,61% 0,61% 18%,64% 24%,64% 32%,63% 39%,61% 45%,60% 53%,58% 61%,70% 61%,72.7% 56.6%,74.7% 54.7%,75.2% 52.7%,77.5% 50.8%,78.8% 48.8%,80.6% 46.9%,81% 44.9%,81.7% 43%,84% 41%,100% 41%,100% 100%,0 100%,0 64%,42% 61%,40% 53%,39% 45%,37% 39%,36% 32%,36% 24%,39% 18%)}
[data-paper="coast"] .paper-rig{transform:none}
.land-panel{clip-path:polygon(0 0,100% 0,100% 63%,72% 63%,64% 66%,59% 70%,48% 72%,41% 77%,39% 82%,43% 88%,50% 94%,52% 100%,0 100%);transform-origin:45% 97%;transform:rotateX(calc(var(--land,0)*1deg))}
.sea-panel{clip-path:polygon(100% 63%,72% 63%,64% 66%,59% 70%,48% 72%,41% 77%,39% 82%,43% 88%,50% 94%,52% 100%,100% 100%);transform-origin:76% 97%;transform:rotateX(calc(var(--sea,0)*1deg))}
.has-hinges{display:block!important;max-width:none;padding:0!important;scroll-snap-align:none}
.reading-part.has-hinges{align-content:normal;justify-content:normal}
.has-hinges>.paper-stage{position:sticky;top:0;min-height:100svh;padding:100px 0 60px}
.has-hinges>.hero{display:grid;padding:110px 5.5% 80px}
.has-hinges>.illustrated{display:flex;gap:20px}
.has-hinges .illustrated .opening{font-size:clamp(25px,2.3vw,34px)}
.has-hinges .illustrated .prose p+p{font-size:18px;line-height:1.5;margin-top:14px}
.has-hinges .paper-art>img{opacity:0}
.has-hinges .hinge-art{display:block}
.has-hinges .letter-ink{opacity:clamp(0,calc(var(--typed,10000) - var(--char)),1)}
/* Link decoration follows each revealed word, including touch styling. */
.has-hinges [data-reveal] a{text-decoration-line:none}
.has-hinges [data-reveal] a.contact-link{text-decoration-thickness:auto}
.has-hinges [data-reveal] a .letter-ink{text-decoration-line:underline;text-decoration-color:inherit;text-decoration-style:inherit;text-decoration-thickness:inherit}
.has-hinges .selected-copy .letter-ink{opacity:1}
:root.story-motion{scroll-snap-type:none;overflow-anchor:none}
.prose{max-width:820px;width:100%;margin-inline:auto;font:22px/1.6 var(--body);letter-spacing:0;overflow-wrap:break-word}
.prose p+p{margin-top:1.15em}
.editorial{display:flex;align-items:center}
.editorial .opening{font:400 clamp(27px,2.5vw,36px)/1.45 var(--serif);letter-spacing:-.01em}
.pause .prose{max-width:800px}
.pause .opening{font:400 clamp(33px,3.4vw,48px)/1.35 var(--serif);letter-spacing:-.015em}
.illustrated{display:flex;flex-direction:column;justify-content:center;gap:32px;max-width:none;margin-inline:auto;padding-inline:0}
.illustrated .prose{max-width:1200px;width:89%;margin-left:5.5%;position:relative;z-index:1}
.illustrated .opening{font:400 clamp(28px,2.8vw,40px)/1.4 var(--serif);letter-spacing:-.01em}
.illustrated .prose p+p{font:21px/1.6 var(--serif);letter-spacing:0;margin-top:18px}
.illustrated .paper-art{width:100%;margin-top:auto}
.sf-scene .prose{max-width:1200px}
.sf-scene .opening{font-size:clamp(27px,2.6vw,36px);line-height:1.45}
.story-link{position:relative;color:var(--accent);text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:.16em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.story-link::after{display:none;content:attr(data-caption);position:absolute;box-sizing:border-box;z-index:5;left:var(--caption-left,50%);top:var(--caption-top,calc(100% + 10px));transform:translateX(-50%);width:220px;max-width:calc(100vw - 32px);padding:10px 12px;background:var(--paper);box-shadow:0 3px 16px #29312814;border:1px solid #dcded4;border-radius:3px;color:var(--muted);font:16px/1.4 var(--serif);letter-spacing:0;text-align:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s;white-space:normal}
.story-link:focus::after{display:block;opacity:1;visibility:visible}
@media(hover:hover){.story-link:hover::after{display:block;opacity:1;visibility:visible}}
@media(hover:none){.story-link{text-decoration-style:dotted;text-decoration-thickness:2px}}
.finale{max-width:1450px;margin:auto;display:flex;flex-direction:column;justify-content:center;gap:25px;text-align:center}
.finale-copy{max-width:1000px;margin:auto auto 0;font:clamp(30px,3.3vw,46px)/1.4 var(--serif);letter-spacing:-.015em}
.finale-copy p+p{margin-top:16px}
.finale .paper-art{width:min(650px,85%);margin:0 auto}
.closing{margin-bottom:auto}
.signature{font:400 23px/1.4 var(--serif)}
.closing nav{display:flex;justify-content:center;gap:28px;align-items:center;margin-top:20px;font:15px/1.5 var(--serif)}
.contact-link{color:var(--accent)}
.colophon{display:flex;justify-content:space-between;gap:24px;max-width:1600px;margin:auto;padding:25px 5.5% 70px;color:var(--muted);font:12px/1.5 var(--serif)}
.colophon a{text-decoration:none}
.reading-progress{position:fixed;z-index:4;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:#fffefaed;padding:9px 14px;pointer-events:none}
.reading-position{font:12px/1.4 var(--serif);letter-spacing:.08em;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.progress-track{display:block;width:54px;height:1px;background:#d7d9d0}
.progress-fill{display:block;width:100%;height:100%;background:var(--muted);transform:scaleX(var(--reading-progress,.0588));transform-origin:left}
@media(min-width:651px){.finale .paper-art img{max-height:36svh}}
@media(min-width:1600px){.hero .salutation{font-size:72px}.hero-intro,.hero-answer{font-size:38px}}
@media(max-width:1000px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero .salutation{font-size:clamp(36px,4.8vw,48px)}.hero-intro,.hero-answer{font-size:clamp(23px,2.8vw,30px)}.prose{font-size:21px}.illustrated .opening{font-size:34px}.illustrated .prose p+p{font-size:20px}.sf-scene .opening{font-size:31px}}
@media(max-width:650px){.masthead{padding:21px 7% 12px;gap:12px}.wordmark{font-size:20px}.masthead nav{gap:18px;font-size:12px}.reading-part{padding:100px 8% 80px}.hero{grid-template-columns:1fr;align-content:center;gap:30px;padding:108px 7% 72px}.hero .salutation{font-size:clamp(34px,9vw,50px);margin-bottom:22px}.hero-intro,.hero-answer{font-size:clamp(23px,6vw,29px);line-height:1.45}.hero .paper-art{width:100%;max-width:100%;margin:0}.prose{font-size:19px;line-height:1.65;letter-spacing:0}.editorial .opening{font-size:25px;line-height:1.5}.pause .opening{font-size:31px;line-height:1.4}.illustrated{gap:32px;padding-inline:0}.illustrated .prose{width:86%;margin-left:7%}.illustrated .opening{font-size:28px;line-height:1.4}.illustrated .prose p+p{font-size:18px;line-height:1.6}.illustrated .paper-art{margin-top:auto}.sf-scene .opening{font-size:25px;line-height:1.5}.finale{gap:28px}.finale-copy{font-size:29px;line-height:1.4}.finale .paper-art{width:100%}.closing nav{gap:20px;font-size:14px;flex-wrap:wrap}.signature{font-size:22px}.colophon{padding:24px 8% 80px;font-size:11px;flex-wrap:wrap}.reading-progress{bottom:max(15px,env(safe-area-inset-bottom))}.story-link::after{font-size:14px}}
@media(max-width:370px){.masthead nav{gap:12px;font-size:11px}.wordmark{font-size:18px}.hero .salutation{font-size:34px}.hero-intro,.hero-answer{font-size:23px}.hero{padding-top:100px}.editorial .opening{font-size:24px}.pause .opening{font-size:29px}.illustrated .opening{font-size:25px}.sf-scene .opening{font-size:24px}.finale-copy{font-size:27px}}
@media(max-width:650px){.has-hinges>.hero{display:grid;padding:100px 7% 65px}.has-hinges>.illustrated{padding-top:100px;padding-bottom:65px;gap:24px}.has-hinges .illustrated .opening{font-size:28px}.has-hinges .illustrated .prose p+p{font-size:18px;line-height:1.6;margin-top:18px}}
@media(max-height:600px) and (min-width:651px){.reading-part{padding-top:112px;padding-bottom:65px}.hero{padding-top:105px;padding-bottom:65px}.hero .salutation{font-size:44px}.hero-intro,.hero-answer{font-size:26px}.hero .paper-art{width:100%;max-width:100%;margin:0}.finale .paper-art{width:min(500px,70%)}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto;scroll-snap-type:none}.story-link::after{transition:none}}
@media(prefers-reduced-motion:reduce),print{.has-hinges{height:auto!important}.has-hinges>.paper-stage{position:static;min-height:0}.has-hinges .paper-art>img{opacity:1}.has-hinges .hinge-art{display:none}.has-hinges .letter-ink{opacity:1}}
@media print{:root{scroll-snap-type:none}.masthead,.reading-progress,.colophon,.skip{display:none!important}.reading-part{min-height:0;padding:25px 0;break-inside:avoid}.hero{display:block}.hero .salutation{font-size:50px}.hero-intro,.hero-answer{font-size:30px}.paper-art{max-width:400px!important;margin:25px auto!important}.prose{font-size:15px}.editorial .opening,.illustrated .opening,.pause .opening{font-size:23px}.finale-copy{font-size:34px}.story-link::after{display:none}}

/* The upper white margin is outside the paper silhouette in these 16:9 assets. */
@media screen{
  :root{--paper:#fff;scroll-padding-top:0}
  .reading-progress{background:#ffffffed}
  .reading-part.hero[data-paper]{display:block;max-width:none;padding:0}
  .film-art{width:100%;aspect-ratio:1672/681;overflow:hidden}
  .film-art>img,.paper-film{width:100%;height:100%;object-fit:cover;object-position:center bottom;filter:brightness(1.045)}
  .paper-film{position:absolute;inset:0;opacity:0;pointer-events:none}
  .film-stage,.has-hinges>.paper-stage.film-stage{display:flex!important;flex-direction:column;gap:12px;justify-content:flex-start;max-width:none;margin:0;padding:90px 0 34px!important}
  .has-hinges>.paper-stage.film-stage{height:100svh;min-height:0}
  .film-stage .hero-copy,.film-stage .prose{width:89%;max-width:1200px;margin:0 auto}
  .film-stage .salutation{font-size:clamp(34px,3.2vw,48px);line-height:1.2;margin-bottom:18px}
  .film-stage .hero-intro,.film-stage .hero-answer{font-size:clamp(22px,2.1vw,30px);line-height:1.4}
  .film-stage .prose .opening{font-size:clamp(24px,1.9vw,28px);line-height:1.4}
  .film-stage .prose p+p{font-size:18px;line-height:1.5;margin-top:12px}
  .film-stage .paper-art{width:100%;max-width:none;margin:auto 0 0;flex-shrink:0}
  .has-hinges .paper-film{opacity:1}
  .film-failed .paper-film{display:none}
  .film-static .paper-film{display:none}
  .has-hinges .film-static .has-mobile-film>.film-still{opacity:1}
  .has-hinges .film-failed .paper-art>img,.has-hinges .film-failed .letter-ink{opacity:1}
  .has-hinges:focus-within .letter-ink{opacity:1}
}
@media screen and (min-width:651px) and (max-height:850px){
  .film-stage .prose .opening{font-size:24px}
  .film-stage .prose p+p{font-size:16px;line-height:1.45;margin-top:10px}
}
@media screen and (max-width:650px){
  .film-stage .hero-copy,.film-stage .prose{width:86%}
  .film-stage .prose .opening{font-size:24px}
  .film-stage .prose p+p{font-size:17px}
}
@media screen and (prefers-reduced-motion:reduce){
  .paper-film{display:none}
  .film-art>img{opacity:1!important}
}
@media print{.paper-film{display:none}}

/* A flexible frame keeps the complete new scenery beside varying letter lengths. */
@media screen{
  .reading-part.full-film{max-width:none;padding:0}
  .full-film>.film-stage{min-height:100svh}
  .full-film .film-art{aspect-ratio:var(--film-ratio)}
  .full-film .film-art>img{position:absolute;inset:0}
  .full-film .film-art>img,.full-film .paper-film{object-fit:contain;max-height:none}
  .has-hinges.full-film .film-art{aspect-ratio:auto;flex:1 1 0;min-height:clamp(160px,27svh,280px)}
  .full-film .finale-copy{margin:0 auto;text-align:center}
  .full-film .finale-copy .opening{font-size:clamp(28px,2.6vw,38px)}
  .full-film .closing{margin:0;padding:6px 6% 36px;width:100%}
  .full-film .closing nav{margin-top:8px}
}

/* Keep mobile text and scenery together, with room for the scroll-driven film. */
@media screen and (max-width:820px){
 .film-stage,.has-hinges>.paper-stage.film-stage{justify-content:center;gap:28px;padding:84px 0 60px!important}
 .film-stage .hero-copy,.film-stage .prose{width:calc(100% - 40px);max-width:640px}
 .film-stage .salutation{font-size:clamp(30px,7.5vw,38px);margin-bottom:20px}
 .film-stage .hero-intro,.film-stage .hero-answer{font-size:clamp(20px,5vw,24px);line-height:1.45}
 .film-stage .prose .opening{font-size:clamp(18px,4.6vw,22px);line-height:1.45}
 .film-stage .prose p+p,.has-hinges .film-stage .prose p+p{font-size:16px;line-height:1.5;margin-top:12px}
 .film-stage .paper-art{margin:0;flex:0 0 auto}
 .has-hinges.full-film .film-art{aspect-ratio:var(--film-ratio);min-height:0;flex:0 0 auto}
 .full-film>.film-stage{min-height:0}
 .full-film .finale-copy .opening{font-size:clamp(25px,6.4vw,32px)}
 .full-film .closing{padding:0 20px 12px}
 .full-film .closing nav{font-size:13px;gap:18px}
}
@media screen and (max-width:820px) and (max-height:700px){
 .film-stage,.has-hinges>.paper-stage.film-stage{gap:20px;padding:78px 0 44px!important}
 .film-stage .prose .opening{font-size:16px;line-height:1.45}
 .film-stage .prose p+p,.has-hinges .film-stage .prose p+p{line-height:1.45;margin-top:10px}
}

/* The reply crosses the desktop spread; the letter keeps its reading order. */
@media screen and (min-width:1001px){
 .hero.film-stage .hero-copy{width:80%;max-width:none}
 .hero.film-stage .hero-answer{text-align:right;margin-top:clamp(12px,2svh,32px)}
 .has-hinges>.hero.film-stage .paper-art{width:min(100%,max(640px,calc((100svh - 330px) * var(--film-ratio,1672/681))));margin:auto auto 0}
}

/* Reading beats move across the spread without changing the source or DOM order. */
@media screen and (min-width:1001px){
 .composed{--reading-space:320px}
 .composed .film-stage .prose{width:89%;max-width:none;flex:0 0 auto;font:clamp(20px,1.8vw,28px)/1.45 var(--serif)}
 .composition-medium .film-stage .prose{font-size:clamp(20px,1.7vw,26px)}
 .composition-dense .film-stage .prose{font-size:clamp(18px,1.55vw,24px)}
 .composed .film-stage .prose .opening{font:inherit;letter-spacing:0}
 .composed .film-stage .prose p+p{max-width:88%;margin:16px 0 0 auto;font-size:.88em;line-height:1.5}
 .composed .letter-beat{display:block}
 .composed .letter-beat+.letter-beat{margin-top:clamp(8px,1svh,14px)}
 .composed .beat-left{text-align:left}
 .composed .beat-center{text-align:center}
 .composed .beat-right{text-align:right}
 .composed[data-paper="brittany"]{--reading-space:360px}
 .composed[data-paper="brittany"] .film-stage .prose{width:80%;font-size:clamp(22px,2vw,30px)}
 .composed[data-paper="brittany"] .film-stage .prose p+p{max-width:none;font:inherit;margin-top:20px}
 .composed .film-stage .prose .letter-dialogue{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:baseline}
 .composed .letter-dialogue .letter-beat+.letter-beat{margin-top:0}
 .composed[data-paper="fort-maison"],.composed[data-paper="sawmill"]{--reading-space:480px}
 .has-hinges.composed:not(.full-film) .film-art{width:min(100%,max(640px,calc((100svh - var(--reading-space)) * 1672 / 681)));margin:auto auto 0}
}

.has-mobile-film{aspect-ratio:var(--film-ratio)}
.has-mobile-film>.film-still{display:block;width:100%;height:100%}
.has-mobile-film .film-still img,.has-mobile-film .paper-film{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center bottom;filter:brightness(1.045)}
.has-hinges .has-mobile-film>.film-still{opacity:0}
.film-failed .has-mobile-film>.film-still{opacity:1}
@media screen and (max-width:820px){
 .responsive-film .film-stage .hero-copy,.responsive-film .film-stage .prose{flex:0 0 auto}
 .responsive-film .has-mobile-film{aspect-ratio:var(--mobile-film-ratio);margin:0 auto}
 .has-mobile-film .film-still img,.has-mobile-film .paper-film{object-fit:contain}
 .has-hinges.responsive-film .has-mobile-film{width:100%;aspect-ratio:auto;flex:1 1 0;min-height:180px;margin:0}
}
@media screen and (prefers-reduced-motion:reduce){.has-mobile-film>.film-still{opacity:1!important}}
@media print{.has-mobile-film>.film-still{opacity:1!important}}

@media screen{
 .reading-part[data-paper="fort-maison"]>.film-stage{padding-top:120px!important}
 .has-hinges[data-paper="fort-maison"]>.film-stage{height:auto;min-height:100svh}
 .has-hinges.composed[data-paper="fort-maison"] .film-art{width:100%;aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0;margin:auto 0 0}
}
@media screen and (min-width:1001px){
 .reading-part[data-paper="fort-maison"]>.film-stage{padding-top:106px!important;padding-bottom:20px!important}
 .composed[data-paper="fort-maison"] .film-stage .prose{font-size:clamp(18px,calc((100svh - 100vw * 681 / 1672 - 164px) / 6.75),26px);line-height:1.35}
 .composed[data-paper="fort-maison"] .film-stage .prose p+p{max-width:none;margin:12px 0 0;font:inherit}
 .composed[data-paper="fort-maison"] .film-stage .prose p:last-child{max-width:70%;margin-left:auto;text-align:right}
}
@media screen and (max-width:820px){
 .reading-part[data-paper="fort-maison"]>.film-stage{padding-top:104px!important}
 .has-hinges.composed[data-paper="fort-maison"] .film-art{aspect-ratio:var(--mobile-film-ratio)}
}

#scene-04 .film-still img,#scene-04 .paper-film{object-fit:contain}
@media screen and (max-width:820px){
 #scene-04 .film-stage .prose{font-size:clamp(18px,4.6vw,22px)}
 #scene-04 .film-stage .prose p{font:inherit;line-height:1.6}
 #scene-04 .film-stage .prose p+p{margin-top:24px}
 #scene-04>.film-stage{gap:40px!important}
 #scene-04.has-hinges>.film-stage{height:auto;min-height:100svh;justify-content:flex-start}
 #scene-04 .film-art{width:100%;aspect-ratio:var(--mobile-film-ratio);flex:0 0 auto;min-height:0;margin:0 auto}
 #scene-04.has-hinges .film-art{max-width:calc((100svh - 170px) * var(--mobile-film-ratio))}
 #scene-04 .film-stage .prose p+p .letter-beat:last-child{display:inline-block;max-width:100%}
}
@media screen and (max-width:820px) and (max-height:700px){
 #scene-04 .film-stage .prose{font-size:16px}
}
@media screen and (min-width:651px){
 #scene-04>.film-stage{padding-top:110px!important}
}
@media screen and (min-width:821px) and (max-width:1000px){
 #scene-04 .film-stage .prose{font:400 clamp(24px,1.9vw,28px)/1.4 var(--serif);letter-spacing:-.01em}
 #scene-04 .film-stage .prose p{font:inherit;letter-spacing:inherit}
}
@media screen and (min-width:1001px){
 #scene-04 .film-stage .prose{font-size:clamp(20px,1.85vw,38px)}
 #scene-04 .prose p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 #scene-04 .opening .letter-beat{grid-column:1/-1}
 #scene-04 .letter-beat+.letter-beat{margin-top:0}
 #scene-04 .film-stage .prose p+p{max-width:none;margin:clamp(22px,4svh,50px) 0 0;font:inherit}
}

/* Let the Breton portrait open at full width after the letter. */
@media screen{
 .reading-part[data-paper="brittany"]>.film-stage{padding-top:110px!important;padding-bottom:32px!important;gap:clamp(28px,4svh,48px)!important;justify-content:flex-start}
 .has-hinges[data-paper="brittany"]>.film-stage{height:auto;min-height:100svh}
 .reading-part[data-paper="brittany"] .film-art{margin:0}
 .has-hinges.composed[data-paper="brittany"] .film-art{width:100%;aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0}
 [data-paper="brittany"] .film-still img,[data-paper="brittany"] .paper-film{object-fit:contain}
}
@media screen and (max-width:820px){
 .has-hinges.composed[data-paper="brittany"] .film-art{aspect-ratio:var(--mobile-film-ratio)}
}
@media screen and (min-width:821px){
 .reading-part[data-paper="brittany"]>.film-stage{padding-bottom:16px!important}
}

/* Compensate the portrait's lateral white space as its folds stand up. */
@media screen and (max-width:650px){
 .reading-part[data-paper="brittany"] .film-art.has-mobile-film{--brittany-scale:1.15;aspect-ratio:calc(var(--mobile-film-ratio) / 1.15)}
 .reading-part.has-hinges[data-paper="brittany"] .has-mobile-film{--brittany-scale:calc(1 + .15 * var(--brittany-open,0) * var(--brittany-open,0))}
 [data-paper="brittany"] .has-mobile-film>.film-still,[data-paper="brittany"] .has-mobile-film>.paper-film{position:absolute;inset:auto auto 0 50%;width:calc(100% * var(--brittany-scale));height:calc(100% / 1.15 * var(--brittany-scale));transform:translateX(-50%)}
}

/* The curiosity spread and its following founders page share a quieter rhythm. */
@media screen{
 .static-art.has-hinges .paper-art>img{opacity:1}
 #scene-03>.film-stage,#scene-03-founders>.film-stage{gap:40px!important;justify-content:flex-start}
 #scene-03-founders .film-art>img{filter:none}
}
@media screen and (min-width:1001px){
 #scene-03 .film-stage .prose,#scene-03-founders .film-stage .prose{font-size:clamp(20px,1.85vw,38px)}
 #scene-03 .letter-beat+.letter-beat,#scene-03-founders .letter-beat+.letter-beat{margin-top:clamp(24px,3.7svh,46px)}
}
@media screen and (min-width:651px){
 #scene-03>.film-stage,#scene-03-founders>.film-stage{padding-top:110px!important}
}
@media screen and (max-width:650px){
 #scene-03>.film-stage,#scene-03-founders>.film-stage{padding-top:94px!important}
}
@media screen and (max-width:1000px){
 #scene-03 .film-stage .prose,#scene-03-founders .film-stage .prose{font-size:clamp(18px,4.6vw,22px)}
 #scene-03 .film-stage .prose .opening,#scene-03-founders .film-stage .prose .opening{font:inherit;line-height:1.6}
 #scene-03 .letter-beat{display:block}
 #scene-03 .letter-beat+.letter-beat{font-size:16px;line-height:1.6;margin-top:24px}
 #scene-03-founders .letter-beat{display:block}
 #scene-03-founders .letter-beat+.letter-beat{margin-top:24px}
 #scene-03-founders .letter-beat:last-child{text-align:right}
}

/* PoCodex reads as four beats, with the result tucked to the right. */
@media screen{
 #scene-09.has-hinges>.film-stage{height:auto;min-height:100svh}
 #scene-09.has-hinges .film-art{width:100%;aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0;margin:auto 0 0}
 #scene-09 .film-still img,#scene-09 .paper-film{object-fit:contain}
}
@media screen and (min-width:1001px){
 #scene-09 .film-stage .prose{width:92.5%;font-size:clamp(22px,2.15vw,32px);line-height:1.35}
 #scene-09 .film-stage .prose .opening{max-width:48%;font:inherit;letter-spacing:0}
 #scene-09 .film-stage .prose p+p{max-width:none;margin:14px 0 0;font:inherit}
 #scene-09 .film-stage .prose p:nth-child(3){margin-top:24px}
 #scene-09 .film-stage .prose p:last-child{margin-top:22px;margin-left:auto;text-align:right;max-width:40%}
}
@media screen and (max-width:1000px){
 #scene-09.has-hinges>.film-stage{justify-content:flex-start}
 #scene-09.has-hinges .film-art{margin:0}
 #scene-09 .letter-beat{display:block;text-align:left}
 #scene-09 .letter-beat.beat-right{text-align:right}
 #scene-09 .film-stage .prose p+p{margin-top:18px}
 #scene-09 .film-stage .prose p:last-child{margin-top:22px;margin-right:var(--pocodex-result-inset,.75em)}
}


/* The theatre opens after the letter, keeping its portrait composition intact. */
@media screen{
 #scene-12>.film-stage{padding-top:110px!important;padding-bottom:24px!important}
 #scene-12.has-hinges>.film-stage{height:auto;min-height:100svh}
 #scene-12.has-hinges .film-art{width:100%;aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0;margin:auto 0 0}
 #scene-12 .film-still img,#scene-12 .paper-film{object-fit:contain}
}
@media screen and (min-width:821px){
 #scene-12>.film-stage{gap:32px!important}
 #scene-12.has-hinges .film-art{max-width:calc((100svh - 134px) * var(--film-ratio));margin-left:auto;margin-right:auto}
}
@media screen and (max-width:820px){
 #scene-12.has-hinges .film-art{aspect-ratio:var(--mobile-film-ratio);margin:0}
 #scene-12.has-hinges>.film-stage{justify-content:flex-start}
}
@media screen and (max-width:650px){
 #scene-12>.film-stage{padding-top:100px!important}
}

@media screen and (max-width:820px){
 #scene-09.has-hinges .film-art{aspect-ratio:var(--mobile-film-ratio)}
}

/* The circuit opens at full width after its reading, in either composition. */
@media screen{
 #scene-03-founders.has-hinges>.film-stage{height:auto;min-height:100svh}
 #scene-03-founders .film-art{margin:0}
 #scene-03-founders.has-hinges .film-art{width:100%;aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0}
 #scene-03-founders .film-still img,#scene-03-founders .paper-film{object-fit:contain;filter:none}
}
@media screen and (max-width:820px){
 #scene-03-founders.has-hinges .film-art{aspect-ratio:var(--mobile-film-ratio);margin:0}
}

/* The library keeps its complete paper outline after the reading. */
@media screen{
 #scene-03 .film-still img,#scene-03 .paper-film{object-fit:contain}
}
@media screen and (max-width:820px){
 #scene-03.has-hinges>.film-stage{height:auto;min-height:100svh}
 #scene-03.has-hinges .film-art{width:100%;aspect-ratio:var(--mobile-film-ratio);flex:0 0 auto;min-height:0;margin:0}
}
@media screen and (min-width:821px){
 #scene-03.has-hinges>.film-stage{height:auto;min-height:100svh}
 #scene-03.has-hinges .film-art{width:100%;max-width:calc((100svh - 154px) * var(--film-ratio));aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0;margin:auto auto 0}
}

/* The globe opens after the letter, keeping all four cities in view. */
@media screen{
 #scene-05>.film-stage{padding-top:110px!important;padding-bottom:24px!important}
 #scene-05.has-hinges>.film-stage{height:auto;min-height:100svh}
 #scene-05.has-hinges .film-art{width:100%;aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0;margin:auto 0 0;transform:translateY(var(--cliccc-lift,0px))}
 #scene-05.has-hinges .prose{transform:translateY(var(--cliccc-copy-lift,0px))}
 #scene-05 .film-still img,#scene-05 .paper-film{object-fit:contain;filter:none}
}
@media screen and (min-width:821px){
 #scene-05.has-hinges .film-art{max-width:calc((100svh - 134px) * var(--film-ratio));margin-left:auto;margin-right:auto}
}
@media screen and (max-width:820px){
 #scene-05.has-hinges .film-art{aspect-ratio:var(--mobile-film-ratio);margin:0}
 #scene-05.has-hinges>.film-stage{justify-content:flex-start}
}
@media screen and (max-width:650px){
 #scene-05>.film-stage{padding-top:100px!important}
}

/* Helsinki reveals the complete quay after the letter. */
@media screen{
 #scene-06>.film-stage{padding-top:110px!important;padding-bottom:24px!important}
 #scene-06.has-hinges>.film-stage{height:auto;min-height:100svh}
 #scene-06.has-hinges .film-art{width:100%;aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0;margin:auto 0 0}
 #scene-06 .film-still img,#scene-06 .paper-film{object-fit:contain;filter:none}
}
@media screen and (min-width:821px){
 #scene-06.has-hinges .film-art{max-width:calc((100svh - 134px) * var(--film-ratio));margin-left:auto;margin-right:auto}
}
@media screen and (max-width:820px){
 #scene-06.has-hinges .film-art{aspect-ratio:var(--mobile-film-ratio);margin:0}
 #scene-06.has-hinges>.film-stage{justify-content:flex-start}
}
@media screen and (max-width:650px){
 #scene-06>.film-stage{padding-top:100px!important}
}

/* The ORBIT workshop opens after the letter, with the complete paper scene. */
@media screen{
 #scene-11>.film-stage{padding-top:110px!important;padding-bottom:24px!important}
 #scene-11.has-hinges>.film-stage{height:auto;min-height:100svh}
 #scene-11.has-hinges .film-art{width:100%;aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0;margin:auto 0 0}
 #scene-11 .film-still img,#scene-11 .paper-film{object-fit:contain;filter:none}
}
@media screen and (min-width:821px){
 #scene-11.has-hinges .film-art{max-width:calc((100svh - 134px) * var(--film-ratio));margin-left:auto;margin-right:auto}
}
@media screen and (max-width:820px){
 #scene-11.has-hinges .film-art{aspect-ratio:var(--mobile-film-ratio);margin:0}
 #scene-11.has-hinges>.film-stage{justify-content:flex-start}
}
@media screen and (max-width:650px){
 #scene-11>.film-stage{padding-top:100px!important}
}

/* The portrait sawmill opens after reading, with its complete paper contour. */
@media screen and (max-width:820px){
 #scene-14>.film-stage{padding-top:110px!important;padding-bottom:24px!important}
 #scene-14.has-hinges>.film-stage{height:auto;min-height:100svh;justify-content:flex-start}
 #scene-14.has-hinges .film-art{width:100%;aspect-ratio:var(--mobile-film-ratio);flex:0 0 auto;min-height:0;margin:0}
 #scene-14 .film-still img,#scene-14 .paper-film{object-fit:contain;filter:none}
}
@media screen and (max-width:650px){
 #scene-14>.film-stage{padding-top:100px!important}
}

/* The portrait paddock opens after reading, with its complete paper contour. */
#scene-08 .film-still img,#scene-08 .paper-film{object-fit:contain}
@media screen and (min-width:821px){
 #scene-08>.film-stage{padding-top:110px!important;padding-bottom:24px!important}
 #scene-08.has-hinges>.film-stage{height:auto;min-height:100svh}
 #scene-08.has-hinges .film-art{width:100%;max-width:calc((100svh - 134px) * var(--film-ratio));aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0;margin:auto auto 0}
 #scene-08 .film-still img,#scene-08 .paper-film{filter:none}
}
@media screen and (max-width:820px){
 #scene-08>.film-stage{padding-top:100px!important;padding-bottom:24px!important}
 #scene-08.has-hinges>.film-stage{height:auto;min-height:100svh;justify-content:flex-start}
 #scene-08 .film-art.has-mobile-film{--hackathons-scale:1.06;aspect-ratio:calc(var(--mobile-film-ratio) / 1.06)}
 #scene-08.has-hinges .film-art{--hackathons-scale:calc(1 + .06 * var(--hackathons-open,0));width:100%;aspect-ratio:calc(var(--mobile-film-ratio) / 1.06);flex:0 0 auto;min-height:0;margin:0}
 #scene-08 .has-mobile-film>.film-still,#scene-08 .has-mobile-film>.paper-film{position:absolute;inset:auto auto 0 50%;width:calc(100% * var(--hackathons-scale));height:calc(100% / 1.06 * var(--hackathons-scale));transform:translateX(-50%)}
 #scene-08 .film-still img,#scene-08 .paper-film{object-fit:contain;filter:none}
}
@media screen and (min-width:431px) and (max-width:650px){
 #scene-08>.film-stage{padding-top:80px!important;padding-bottom:16px!important}
}


/* Briques unfolds its portrait modules after reading. */
#scene-13 .film-still img,#scene-13 .paper-film{object-fit:contain;filter:none}
@media screen and (max-width:820px){
  #scene-13>.film-stage{padding-top:110px!important;padding-bottom:24px!important}
  #scene-13.has-hinges>.film-stage{height:auto;min-height:100svh;justify-content:flex-start}
  #scene-13.has-hinges .film-art{width:100%;aspect-ratio:var(--mobile-film-ratio);flex:0 0 auto;min-height:0;margin:0}
  #scene-13 .film-still img,#scene-13 .paper-film{filter:none}
}
@media screen and (max-width:650px){
  #scene-13>.film-stage{padding-top:100px!important}
}

/* ErwanOS keeps its portrait workshop at full width after reading. */
#scene-10 .letter-beat{display:block}
#scene-10 .letter-beat+.letter-beat{margin-top:clamp(16px,2svh,24px)}
#scene-10 .beat-center{text-align:center}
#scene-10 .beat-right{text-align:right}
#scene-10 .beat-center strong{font-weight:700;font-synthesis:weight}
#scene-10 .film-still img,#scene-10 .paper-film{object-fit:contain}
@media screen and (max-width:820px){
  #scene-10>.film-stage{padding-top:100px!important;padding-bottom:24px!important}
  #scene-10.has-hinges>.film-stage{height:auto;min-height:100svh;justify-content:flex-start}
  #scene-10.has-hinges .film-art{width:100%;aspect-ratio:var(--mobile-film-ratio);flex:0 0 auto;min-height:0;margin:0}
  #scene-10 .film-still img,#scene-10 .paper-film{object-fit:contain;filter:none}
}

/* The journey pieces unfold at full mobile width after the letter. */
#scene-15 .film-still img,#scene-15 .paper-film{object-fit:contain;filter:none}
@media screen and (max-width:820px){
  #scene-15>.film-stage{padding-top:100px!important;padding-bottom:24px!important}
  #scene-15.has-hinges>.film-stage{height:auto;min-height:100svh;justify-content:flex-start}
  #scene-15.has-hinges .film-art{width:100%;aspect-ratio:var(--mobile-film-ratio);flex:0 0 auto;min-height:0;margin:0}
  #scene-15 .film-still img,#scene-15 .paper-film{object-fit:contain;filter:none}
}


/* Both supplied Codex films keep their full outline and native paper palette. */
#scene-16 .film-still img,#scene-16 .paper-film{object-fit:contain;filter:none}


/* The supplied portrait finale unfolds above the closing links. */
@media screen and (min-width:821px){
  #scene-17.has-hinges>.film-stage{height:auto;min-height:100svh;justify-content:flex-start}
  #scene-17 .film-art{width:min(100%,max(260px,calc((100svh - 100px) * var(--film-ratio))));aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0;margin:0 auto}
}
@media screen and (min-width:821px){
  #scene-17 .film-still img,#scene-17 .paper-film{object-fit:contain;filter:none}
}
@media screen and (max-width:820px){
  #scene-17>.film-stage{padding-top:100px!important;padding-bottom:24px!important}
  #scene-17.has-hinges>.film-stage{height:auto;min-height:100svh;justify-content:flex-start}
  #scene-17 .film-art.has-mobile-film{max-width:none}
  #scene-17.has-hinges .film-art{width:100%;aspect-ratio:var(--mobile-film-ratio);flex:0 0 auto;min-height:0;margin:0 auto}
  #scene-17 .film-still img,#scene-17 .paper-film{object-fit:contain;filter:none}
}

/* The new desktop sawmill preserves its source palette and complete contour. */
@media screen{
 #scene-14 .film-stage .prose{max-width:1100px;text-align:left}
 #scene-14 .film-stage .prose p+p{max-width:none;margin:20px 0 0;line-height:1.6}
 #scene-14 .letter-beat{display:inline;text-align:left}
}
@media screen and (min-width:821px){
 #scene-14>.film-stage{height:auto!important;min-height:100svh;justify-content:flex-start;gap:28px}
 #scene-14 .film-stage .prose{font:clamp(20px,1.7vw,26px)/1.5 var(--serif)}
 #scene-14 .film-stage .prose .opening{font:inherit;letter-spacing:0}
 #scene-14 .film-stage .prose p+p{font-size:clamp(18px,1.4vw,22px)}
 #scene-14.has-hinges>.film-stage{top:calc(var(--sawmill-shift,0px) * var(--sawmill-stage,0))!important}
 /* Frame-zero exterior margin in the accepted 1920 by 840 desktop film. */
 #scene-14.has-hinges .film-art{width:100%;max-width:calc((100svh - 134px) * var(--film-ratio));aspect-ratio:var(--film-ratio);flex:0 0 auto;min-height:0;margin:auto auto 0;transform:translateY(calc(-100% * 514 / 840 * var(--sawmill-closed,1)))}
 #scene-14 .film-still img,#scene-14 .paper-film{object-fit:contain;filter:none}
}

@media screen and (min-width:821px){
  #scene-10 .film-still img,#scene-10 .paper-film{filter:none}
}

/* The enhanced SF desktop film keeps its paper palette and complete contour. */
@media screen and (min-width:821px){
 #scene-07 .film-still img,#scene-07 .paper-film{object-fit:contain;filter:none}
}

/* The higher definition library film retains its paper colours on desktop. */
@media screen and (min-width:821px){
 #scene-03 .film-still img,#scene-03 .paper-film{object-fit:contain;filter:none}
}

/* The final invitation carries the closing beat of the letter. */
@media screen{
  #scene-17 .finale-copy p+p{font-size:clamp(30px,3vw,44px);line-height:1.3;margin-top:20px;text-wrap:balance}
}
@media screen and (max-width:820px){
  #scene-17 .finale-copy p+p{font-size:clamp(28px,6.8vw,34px);margin-top:16px}
}

/* Keep each short Breton aside together when a line is too narrow. */
@media screen and (max-width:1000px){
  #scene-02 .mobile-phrase{display:inline-block;max-width:100%}
}


/* The Cliccc letter keeps a narrow reading column beside the globe on desktop. */
@media screen {
  #scene-05.letter-layout > .film-stage {
    gap: 24px !important;
    padding: 100px 0 28px !important;
  }
  #scene-05.letter-layout .film-stage .prose {
    width: calc(100% - 40px);
    max-width: 600px;
    margin: 0 auto;
    font: 17px/1.5 var(--serif);
  }
  #scene-05.letter-layout .film-stage .prose p {
    max-width: none;
    margin: 0;
    font: inherit;
    text-align: left;
  }
  #scene-05.letter-layout .film-stage .prose .opening {
    max-width: 340px;
    font-size: 24px;
    line-height: 1.3;
    text-wrap: balance;
  }
  #scene-05.letter-layout .film-stage .prose p + p {
    margin-top: 20px;
  }
  #scene-05.letter-layout .film-stage .prose p:last-child {
    font-size: 16px;
    line-height: 1.5;
  }
  #scene-05.letter-layout .letter-beat {
    display: inline;
    text-align: left;
  }
}

@media screen and (min-width: 1100px) {
  #scene-05.letter-layout > .film-stage {
    display: grid !important;
    grid-template-columns: minmax(340px, 35fr) minmax(0, 65fr);
    align-items: center;
    align-content: center;
    gap: 32px !important;
    padding: 110px 5.5% 64px !important;
  }
  #scene-05.letter-layout.has-hinges > .film-stage {
    height: 100svh;
  }
  #scene-05.letter-layout .film-stage .prose {
    width: 100%;
    max-width: 440px;
    font-size: 20px;
    line-height: 1.5;
  }
  #scene-05.letter-layout .film-stage .prose .opening {
    max-width: 420px;
    font-size: 32px;
    line-height: 1.25;
  }
  #scene-05.letter-layout .film-stage .prose p + p {
    margin-top: 26px;
  }
  #scene-05.letter-layout .film-stage .prose p:last-child {
    font-size: 18px;
  }
  #scene-05.letter-layout .film-stage .film-art,
  #scene-05.letter-layout.has-hinges .film-art {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    aspect-ratio: var(--film-ratio);
    transform: none;
  }
  #scene-05.letter-layout.has-hinges .prose {
    transform: none;
  }
}

@media screen and (max-width: 1099px) {
  #scene-05.letter-layout.has-hinges > .film-stage {
    justify-content: flex-start;
  }
  #scene-05.letter-layout .film-stage .film-art {
    margin-top: 0;
  }
}

/* Validated Articles and Briques paragraphs keep the letter's readable spacing. */
@media screen {
  #scene-12 .film-stage .prose p,
  #scene-13 .film-stage .prose p {max-width:none;margin:0;font:inherit;text-align:left}
  #scene-12 .film-stage .prose p + p,
  #scene-13 .film-stage .prose p + p {margin-top:24px}
  #scene-12 .film-stage .prose .article-note {font-size:.86em;line-height:1.5}
}
@media screen {
  #scene-12.has-hinges .film-art {transform:translateY(var(--articles-lift,0px))}
}
@media screen and (min-width:1001px) {
  #scene-12.has-hinges .film-art {width:76%;max-width:1100px}
  #scene-12 .film-stage .prose,
  #scene-13 .film-stage .prose {font-size:clamp(20px,1.7vw,26px);line-height:1.45}
  #scene-12 .film-stage .prose p + p {margin-top:clamp(26px,4svh,40px)}
  #scene-13 .film-stage .prose .briques-detail {max-width:94%;margin:28px 0 0 auto;text-align:right}
}
@media screen and (max-width:820px) {
  #scene-12 .film-stage .prose,
  #scene-13 .film-stage .prose {font-size:clamp(18px,4.6vw,22px);line-height:1.45}
}
@media screen and (max-width:820px) and (max-height:700px) {
  #scene-12 .film-stage .prose,
  #scene-13 .film-stage .prose {font-size:16px}
}


/* The header call to action is Reach out. */
.masthead .cv-menu summary{text-decoration:none}.masthead nav>a{text-decoration:underline;text-underline-offset:.2em}
/* Short labels on phones so the header and the closing links stay on one line. */
.label-short{display:none}@media(max-width:650px){.label-long{display:none}.label-short{display:inline}}
/* Ask an AI about me: one clean list of assistants, each row fully clickable. */
.ai-panel{width:min(250px,calc(100vw - 32px))}.ai-links{list-style:none;margin:0;padding:0;display:grid;gap:2px}.cv-panel .ai-links a{display:flex;align-items:center;gap:12px;padding:8px 10px;margin-inline:-10px;border-radius:3px;color:var(--ink);text-decoration:none;font-size:15px}.cv-panel .ai-links a:hover,.cv-panel .ai-links a:focus-visible{background:#f3f1ea;color:var(--accent)}.ai-links svg{width:18px;height:18px;flex:none;fill:currentColor}.cv-panel .ai-note{margin:0;padding-block:12px 14px;border-top:1px solid #e4e7e5;font:12px/1.5 var(--serif);color:var(--muted)}/* At the end of the story the list rises from the bottom of the screen, always fully visible. */
.closing .ai-menu-down .cv-panel{position:fixed;top:auto;bottom:max(16px,env(safe-area-inset-bottom));left:50%;right:auto;translate:-50% 0;z-index:30;box-shadow:0 -6px 28px #142b2d24;animation:ai-rise .22s ease-out}@keyframes ai-rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.closing .ai-menu-down .cv-panel{animation:none}}
/* The progress counter steps aside while the bottom list is open. */
body:has(.ai-menu-down[open]) .reading-progress{visibility:hidden}
/* The name stays in the page outline; the visible name is the wordmark under the spotlight. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}