/* M/ reading room · a stable page, one focused surface, original content preserved. */
html{scrollbar-gutter:stable}
html.reader-open{overflow:hidden}
.portfolio-reader{
 --muted:#4e5949;--line:#b6bead;--hairline:1px solid var(--line);
 position:fixed;inset:0;width:min(880px,calc(100% - 64px));height:calc(100dvh - 48px);
 max-width:none;max-height:none;margin:24px 24px 24px auto;padding:0;
 border:1px solid #86917b;border-top:4px solid var(--signal);border-radius:0;
 background:var(--paper);color:var(--ink);box-shadow:0 24px 100px #0006;
 overflow:hidden;overscroll-behavior:contain;color-scheme:light;
}
.portfolio-reader:not([open]){display:none}
.portfolio-reader[open]{display:flex;flex-direction:column}
.portfolio-reader::backdrop{background:#080d0adb;backdrop-filter:blur(5px)}
.portfolio-reader[data-kind=image]{width:min(1240px,calc(100% - 64px))}
.reader-header{display:flex;align-items:start;justify-content:space-between;gap:1.5rem;padding:clamp(1.25rem,3vw,2.5rem);border-bottom:var(--hairline);flex-shrink:0}
.reader-header>div{min-width:0}
.reader-context{display:block;color:#4e5949;font-size:.75rem;letter-spacing:.06em;margin-bottom:.7rem}
.reader-header h2{font:600 clamp(2rem,3.6vw,3.5rem)/1.03 var(--font-display);letter-spacing:-.015em;margin:0;overflow-wrap:break-word}
.reader-close,.reader-back{display:inline-flex;align-items:center;gap:1rem;min-height:44px;border:1px solid #7b8771;background:transparent;color:var(--ink);padding:.5rem .85rem;font:.875rem var(--font-body);flex-shrink:0}
.reader-close span{font:1.5rem/1 var(--font-body)}
.reader-close:hover,.reader-back:hover{background:var(--ink);color:var(--paper)}
.reader-toolbar{padding:.75rem clamp(1.25rem,3vw,2.5rem);border-bottom:var(--hairline)}
.reader-toolbar[hidden]{display:none}
.reader-back{border:0;padding-inline:0}
.reader-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;overflow-anchor:none;scrollbar-gutter:stable;flex:1;padding:clamp(1.25rem,3vw,2.5rem);scroll-padding:1.5rem}
.reader-content{margin:0;min-width:0;border:0}
.reader-prose{font-size:1rem;line-height:1.8}
.reader-prose>div>p{margin:0 0 1.5rem;padding:0 0 1.5rem;border-bottom:var(--hairline);max-width:66ch}
.reader-prose>div>p:last-child{margin-bottom:0;border-bottom:0}
.reader-prose>div>p>strong{display:block;font:600 clamp(1.6rem,2.3vw,2rem)/1.2 var(--font-display);margin-bottom:.65rem}
.reader-prose a:not([class]){text-decoration:underline;text-underline-offset:4px}
.reader-content .data{color:#4e5949}
.reader-content .evidence-figure figcaption{color:var(--muted)}
.reader-content .story-step{min-height:0;opacity:1;display:block;padding:0 0 2rem;margin-bottom:2rem;border-bottom:var(--hairline)}
.reader-content .story-step:last-child{border:0;margin-bottom:0}
.reader-content .story-step h3{font:600 clamp(2.1rem,4vw,3rem)/1.05 var(--font-display);margin:1rem 0}
.reader-content .story-step h3 br{display:none}
.reader-content .story-step>p,.reader-content .story-step .step-small{max-width:64ch}
.reader-content .decision-project-link{color:var(--ink)}
.reader-content .circuit-decisions{grid-template-columns:1fr;gap:2rem;padding:0}
.reader-content .circuit-decisions>section{padding-bottom:2rem;border-bottom:var(--hairline)}
.reader-content .circuit-decisions h4{font-size:2rem;margin:.8rem 0}
.reader-content .circuit-limit{padding:1.5rem 0 0}
.reader-content .papyrus-demo{position:relative;display:block;padding:0;margin-top:1.25rem;height:auto;min-height:0;color:var(--ink);background:var(--paper);border:1px solid #a8b19f;overflow:visible;transform:none;clip-path:none}
.reader-content .demo-interactive{height:auto;display:block}
.reader-content .demo-panel{overflow:visible;min-height:250px}
.reader-content .demo-interactive[hidden]{display:none}
.reader-content .contact-compose-grid{max-width:none;padding:0}
.reader-content .contact-field :is(select,textarea){background:#f5f6f0}
.reader-content .contact-draft-sheet{padding:1.25rem;background:#f5f6f0}
.reader-content .contact-draft-heading h3{font-size:2.5rem}
.portfolio-reader[data-kind=image] .reader-scroll{display:flex}
.reader-image{display:flex;flex-direction:column;gap:1.25rem;flex:1;min-height:0}
.reader-image img{display:block;position:static;width:100%;height:0;min-height:160px;flex:1;object-fit:contain}
.reader-image figcaption{font:.875rem/1.7 var(--font-body);max-width:85ch;color:var(--muted)}
.portfolio-reader :focus-visible{outline:2px solid #a82f0b;outline-offset:4px}
.portfolio-reader #reader-title:focus{outline:none}
.portfolio-reader .reader-scroll:focus-visible{outline-offset:-4px}
/* Launchers have one consistent affordance, independent of the disclosure fallback. */
.project-detail details:has(.reader-trigger){padding:0}
details>.reader-trigger{padding:1rem 0;min-height:64px;align-items:center;font-size:.95rem;line-height:1.5;transition:color 160ms}
details>.reader-trigger>[aria-hidden=true]{display:grid;place-items:center;min-width:36px;min-height:36px;font:1.4rem var(--font-body);color:var(--signal);border:1px solid var(--line);transform:none}
details>.reader-trigger:hover{color:var(--signal)}
.story-notes>.reader-trigger>[aria-hidden=true],.contact-composer>.reader-trigger>[aria-hidden=true]{color:var(--ink);border-color:#75816b}
.story-notes>.reader-trigger:hover,.contact-composer>.reader-trigger:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.reader-image-link{position:relative;cursor:zoom-in}
.reader-image-link:after{content:'Agrandir ↗';position:absolute;right:.65rem;bottom:.65rem;padding:.4rem .65rem;background:#101211e8;color:var(--paper);font:.75rem/1.5 var(--font-body);border:1px solid #69735f}
.case-media .evidence-figure{background:transparent}
.project-detail .project-tags{margin-bottom:1.5rem}
@media(max-width:760px){
 .portfolio-reader,.portfolio-reader[data-kind=image]{width:var(--reader-viewport-width,100vw);height:100dvh;margin:0;border:0;border-top:3px solid var(--signal)}
 .reader-header{gap:.8rem;padding:1.25rem 1rem}
 .reader-header h2{font-size:2rem}
 .reader-context{font-size:.75rem;line-height:1.5;max-width:26ch}
 .reader-close{gap:.5rem;padding:.4rem .65rem}
 .reader-scroll{padding:1.5rem 1rem;scrollbar-gutter:auto}
 .reader-toolbar{padding:.4rem 1rem}
 .reader-prose{font-size:1rem}
 .portfolio-reader[data-kind=image] .reader-scroll{display:block}
 .reader-image img{height:auto;min-height:0;flex:none}
 .reader-content .contact-draft-sheet{padding:1rem}
 .reader-content .demo-masthead{padding:1rem .75rem}
 .reader-content .demo-wordmark{font-size:2.1rem}
 .reader-content .demo-masthead>span:last-child{font-size:.65rem;max-width:8rem}
 .reader-content .demo-example{display:grid;padding:1rem .75rem}
 .reader-content .demo-example select{max-width:100%;width:100%}
 .reader-content .demo-tabs{padding:0 .75rem;gap:.6rem}
 .reader-content .demo-tabs button>strong{font-size:.75rem}
 .reader-content .demo-panel{padding:1rem .75rem}
 .reader-content .demo-sheet h4{font-size:1.85rem}
 .reader-content .demo-actions{padding:.75rem}
 .reader-content .demo-actions button{padding:.6rem;font-size:.8125rem}
 .reader-content .demo-foot{padding:0 .75rem .75rem}
}
@media(prefers-reduced-motion:no-preference){
 html:not([data-motion=reduced]) .portfolio-reader[open]{animation:reader-arrive 220ms var(--ease-out)}
 @keyframes reader-arrive{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
}