@font-face{font-family:'Archivo Black';src:url('../assets/fonts/archivo-black-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Chivo Mono';src:url('../assets/fonts/chivo-mono-variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
.hero-photo,.carne-photo,.portrait-card{width:min(82%,calc(var(--visual-h) * var(--ratio)));transform:none}
.screen-card{--ratio:2;width:min(94%,calc(var(--visual-h) * var(--ratio)))}
#accueil .media-card>a{background:#171717}
.readout h1{font-size:clamp(44px,6vw,84px);line-height:.98}
.carne-display{font-family:'Archivo Black',sans-serif;font-weight:400}
.carne-mono{font-family:'Chivo Mono',monospace;font-weight:400}
.specimen>.carne-display{font-size:clamp(25px,2.6vw,42px);line-height:1.1;margin:24px 0}
.specimen>.carne-mono{font-size:clamp(22px,2vw,31px);line-height:1.25;margin:26px 0;color:var(--copper)}
.specimen>.alphabet{font-size:11px;line-height:1.6;color:var(--muted);margin:18px 0 0}
@media(min-width:851px){.console-grid{grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);gap:clamp(26px,3vw,42px);width:100%;max-width:min(1390px,calc(var(--visual-h) * 1.35 + 430px));margin-inline:auto}}
/* Keep the actual photograph beside its readout when viewport height shrinks
   it. Spare width belongs outside the composition, not inside empty columns. */
@media(min-width:851px){
 .chapter{--media-ratio:.800286;--reading-gap:clamp(26px,3vw,42px)}
 #accueil{--media-ratio:2}#transmission{--media-ratio:1}
 .console-grid:has(>.visual-well){grid-template-columns:minmax(0,calc(var(--visual-h) * var(--media-ratio))) minmax(280px,380px);gap:var(--reading-gap);max-width:calc(var(--visual-h) * var(--media-ratio) + 380px + var(--reading-gap))}
 .visual-well .media-card{width:100%;max-width:calc(var(--visual-h) * var(--ratio))}
}
@media(min-width:851px) and (max-height:760px){.specimen>.carne-display{font-size:27px;margin:14px 0}.specimen>.carne-mono{font-size:23px;margin:14px 0}.specimen>.alphabet{font-size:10px;margin:12px 0 0}.readout h2{font-size:clamp(26px,2.6vw,37px)}}
@media(max-width:1100px){.specimen-label{flex-wrap:wrap;gap:5px}}
@media(max-width:850px){.hero-photo,.carne-photo,.portrait-card{width:min(85%,calc(var(--visual-h) * var(--ratio)))}.readout h1{font-size:40px}.specimen>.carne-display{font-size:27px}.specimen>.carne-mono{font-size:23px}.stat-grid dt{white-space:normal}}