/* BINOX ORKYN — RITUEL / BRUTALISME LITTERAIRE 2026 */
@font-face {
    font-family: "NAMU1600";
    src: url("../fonts/NAMU-1600.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "NAMU1400";
    src: url("../fonts/NAMU-1400.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "NAMU1750";
    src: url("../fonts/NAMU-1750.woff2") format("woff2");
    font-display: swap;
}

:root {
    --black: #030305;
    --void: #08080b;
    --panel: #0e0e13;
    --ash: #8e8e98;
    --bone: #e9e6df;
    --white: #fbfaf6;
    --red: #701313;
    --red2: #a41f1f;
    --rule: rgba(233,230,223,.13);
    --ruleR: rgba(164,31,31,.55);
    --display: "NAMU1600",Impact,Arial Black,sans-serif;
    --label: "NAMU1400",Arial,sans-serif;
    --heavy: "NAMU1750","NAMU1600",Impact,sans-serif;
    --body: Arial,Helvetica,sans-serif;
    --max: 1280px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important;
}

html {
    scroll-behavior: smooth;
    background: var(--black);
}

body {
    background: var(--black);
    color: var(--bone);
    font-family: var(--body);
    line-height: 1.65;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

::selection {
    background: var(--red);
    color: #fff;
}

:focus-visible {
    outline: 1px solid var(--red2);
    outline-offset: 4px;
}

/* NAV — comme un bandeau technique */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 62px;
    background: rgba(3,3,5,.96);
    border-bottom: 1px solid var(--rule);
    backdrop-filter: blur(12px);
}

.nav-inner {
    height: 100%;
    width: min(var(--max),calc(100% - 32px));
    margin: auto;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 24px;
}

.brand {
    font-family: var(--display);
    font-size: 1rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 7px;
}

.brand-b-svg {
    display: block;
    height: 2rem;
    width: auto;
    flex: 0 0 auto;
}

.brand::after {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--red2);
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.nav-links li {
    height: 100%;
}

.nav-links a {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-left: 1px solid var(--rule);
    font-family: var(--label);
    font-size: .61rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #898992;
    transition: .2s;
}

.nav-links li:last-child a {
    border-right: 1px solid var(--rule);
}

.nav-links a:hover,.nav-links a.active {
    background: #111116;
    color: #fff;
}

.nav-links a.active {
    box-shadow: inset 0 -2px 0 var(--red2);
}

.langs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--label);
    font-size: .61rem;
    letter-spacing: .12em;
    color: #555;
}

.langs .active {
    color: var(--red2);
}

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    width: 38px;
    height: 38px;
    position: relative;
}

.menu-toggle span {
    position: absolute;
    left: 7px;
    width: 24px;
    height: 1px;
    background: #ddd;
}

.menu-toggle span:nth-child(1) {
    top: 11px;
}

.menu-toggle span:nth-child(2) {
    top: 19px;
}

.menu-toggle span:nth-child(3) {
    top: 27px;
}

.menu-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.mobile-panel {
    position: fixed;
    inset: 62px 0 0;
    z-index: 999;
    background: #030305;
    display: none;
    padding: 28px 18px;
    overflow: auto;
}

.mobile-panel.open {
    display: block;
}

.mobile-panel nav a {
    display: grid;
    grid-template-columns: 55px 1fr;
    border-bottom: 1px solid var(--rule);
    padding: 16px 0;
    font-family: var(--display);
    font-size: clamp(2.4rem,11vw,5rem);
    text-transform: uppercase;
    line-height: 1;
}

.mobile-panel nav a span {
    font-family: var(--label);
    font-size: .56rem;
    color: var(--red2);
    letter-spacing: .15em;
    align-self: center;
}

.mobile-langs {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    font-family: var(--label);
    font-size: .72rem;
    letter-spacing: .16em;
    color: #666;
}

.mobile-langs .active {
    color: var(--red2);
}

/* HERO — affiche/rituel plutôt que couverture classique */
.hero {
    min-height: 620px;
    height: calc(100vh - 62px);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    position: relative;
    border-bottom: 1px solid var(--rule);
    background: #050507;
}

.hero-copy,
.hero-media {
    min-width: 0;
}

.hero-copy {
    padding: clamp(44px,7vw,110px) clamp(24px,6vw,90px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
}

.hero-code {
    position: absolute;
    top: 32px;
    left: clamp(24px,6vw,90px);
    font-family: var(--label);
    font-size: .58rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #65656d;
}

.hero-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(4.5rem,9vw,10rem);
    line-height: .75;
    text-transform: uppercase;
    letter-spacing: -.045em;
    color: #f2f0ea;
}

.binox-word {
    display: flex;
    align-items: flex-end;
    gap: .02em;
    white-space: nowrap;
}

.binox-b-svg {
    display: block;
    width: auto;
    flex: 0 0 auto;
    object-fit: contain;
}

.binox-b-svg--hero {
    height: .79em;
    width: .58em;
    margin-right: .07em;
    transform: translateY(0.11em) scaleX(1.20);
    transform-origin: left bottom;
}

.hero-title .cut {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233,230,223,.25);
    transform: translateX(.22em);
}

.hero-sub {
    margin-top: 34px;
    max-width: 620px;
    font-family: var(--label);
    font-size: .69rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #8b8b94;
}

.hero-sub strong {
    color: var(--red2);
    font-weight: 400;
}

.hero-media {
    position: relative;
    overflow: hidden;
    border-left: 1px solid var(--rule);
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.72) saturate(.78) contrast(1.16) brightness(.72);
}

.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(112,19,19,.08),rgba(3,3,5,.60));
}

.hero-index {
    position: absolute;
    right: 20px;
    bottom: 18px;
    z-index: 3;
    font-family: var(--display);
    font-size: clamp(7rem,19vw,21rem);
    line-height: .62;
    color: rgba(164,31,31,.11);
    pointer-events: none;
}

.hero-rail {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 9px;
    background: repeating-linear-gradient(90deg,var(--red) 0 6px,transparent 6px 14px);
    opacity: .55;
}

/* ticker / bandeau identitaire de l’index */
.signal {
    border-bottom: 1px solid var(--rule);
    background: #09090c;
    overflow: hidden;
}

.signal-track {
    width: min(var(--max), calc(100% - 44px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 34px);
    padding: 10px 0;
    font-family: var(--label);
    font-size: clamp(.48rem, .62vw, .56rem);
    letter-spacing: clamp(.10em, .18vw, .23em);
    text-transform: uppercase;
    color: #707079;
}

.signal-track span {
    min-width: 0;
    white-space: nowrap;
}

.signal-track b {
    color: var(--red2);
    font-weight: 400;
}

.signal-track span::after {
    content: " /";
    color: #34343b;
    margin-left: clamp(12px, 2vw, 34px);
}

.signal-track span:last-child::after {
    content: none;
}

/* layout */
.section {
    padding: clamp(72px,9vw,130px) 22px;
    border-bottom: 1px solid var(--rule);
}

.section.dark {
    background: #060608;
}

.section.redline {
    box-shadow: inset 3px 0 0 var(--red);
}

.container {
    width: min(var(--max),100%);
    margin: auto;
}

.section-intro {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 60px;
    margin-bottom: 70px;
}

.eyebrow {
    font-family: var(--label);
    font-size: .58rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--red2);
    padding-top: 12px;
}

.section-intro h2 {
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(3rem,6vw,7rem);
    line-height: .88;
    letter-spacing: -.02em;
}

.section-intro p {
    max-width: 740px;
    color: #8d8d97;
    margin-top: 28px;
    font-size: .98rem;
}

.manifest {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.manifest .statement {
    padding: 55px 45px;
    font-family: var(--display);
    font-size: clamp(3rem,6vw,6.8rem);
    line-height: .8;
    text-transform: uppercase;
    border-right: 1px solid var(--rule);
}

.manifest .statement em {
    font-style: normal;
    color: var(--red2);
}

.manifest .copy {
    padding: 55px 45px;
    color: #9a9aa4;
    display: flex;
    align-items: center;
    line-height: 2;
}

.manifest .copy strong {
    display: block;
    color: #e6e3dc;
    font-family: var(--label);
    font-size: .61rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* works — bande verticale / affiches */
.work-stack {
    border-top: 1px solid var(--rule);
}

.work {
    display: grid;
    grid-template-columns: 110px 240px 1fr 70px;
    min-height: 300px;
    border-bottom: 1px solid var(--rule);
    align-items: stretch;
    transition: .2s;
}

.work:hover {
    background: #0b0b0f;
}

.work-num {
    font-family: var(--display);
    font-size: 3rem;
    color: #2d2d34;
    padding: 34px 18px;
    border-right: 1px solid var(--rule);
}

.work-img {
    overflow: hidden;
    border-right: 1px solid var(--rule);
}

.work-img img {
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.25) brightness(.48);
    transition: .5s;
}

.work:hover .work-img img {
    filter: grayscale(.5) contrast(1.18) brightness(.62);
    transform: scale(1.025);
}

.work-copy {
    padding: 40px;
}

.work-type {
    font-family: var(--label);
    font-size: .57rem;
    letter-spacing: .23em;
    text-transform: uppercase;
    color: var(--red2);
}

.work h3 {
    font-family: var(--display);
    font-size: clamp(2.6rem,5vw,6rem);
    font-weight: 400;
    line-height: .86;
    text-transform: uppercase;
    margin: 12px 0 18px;
}

.work p {
    max-width: 720px;
    color: #83838c;
}

.work-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--rule);
    font-size: 2rem;
    color: #484850;
}

.work:hover .work-arrow {
    color: var(--red2);
}

/* fragments */
.fragments {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 1px;
    background: var(--rule);
}

.fragment {
    background: #08080b;
    padding: 34px;
    min-height: 250px;
    position: relative;
}

.fragment:nth-child(1) {
    grid-column: span 7;
}

.fragment:nth-child(2) {
    grid-column: span 5;
}

.fragment:nth-child(3) {
    grid-column: span 4;
}

.fragment:nth-child(4) {
    grid-column: span 8;
    background:
        linear-gradient(rgba(8,8,11,.72), rgba(8,8,11,.86)),
        url("../images/tissu-sombre.jpg") center / cover no-repeat;
}

.fragment:nth-child(5) {
    grid-column: span 6;
}

.fragment:nth-child(6) {
    grid-column: span 6;
}

.fragment .fnum {
    font-family: var(--label);
    font-size: .55rem;
    letter-spacing: .2em;
    color: var(--red2);
}

.fragment blockquote {
    font-family: var(--display);
    font-size: clamp(1.8rem,3.2vw,3.7rem);
    text-transform: uppercase;
    line-height: 1;
    margin-top: 25px;
}

.fragment p {
    color: #777780;
    margin-top: 20px;
    font-size: .88rem;
}

.fragment::after {
    content: "";
    position: absolute;
    left: 34px;
    bottom: 26px;
    width: 46px;
    height: 1px;
    background: var(--red);
}

/* dissonances / reading */
.dissonance-list {
    border-top: 1px solid var(--rule);
}

.dissonance {
    display: grid;
    grid-template-columns: 120px 1fr 180px;
    gap: 35px;
    padding: 30px 0;
    border-bottom: 1px solid var(--rule);
    align-items: center;
}

.dissonance .code {
    font-family: var(--label);
    font-size: .56rem;
    letter-spacing: .18em;
    color: #56565f;
}

.dissonance h3 {
    font-family: var(--display);
    font-size: clamp(2rem,4vw,4.7rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: .9;
}

.dissonance p {
    color: #797983;
    margin-top: 10px;
}

.dissonance .tag {
    text-align: right;
    font-family: var(--label);
    font-size: .57rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red2);
}

/* manifesto */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1px;
    background: var(--rule);
}

.about-visual,
.about-copy {
    min-width: 0;
}

.about-visual {
    background: #050507;
    min-height: 720px;
    position: sticky;
    top: 62px;
    align-self: start;
    height: calc(100vh - 62px);
    overflow: hidden;
}

.about-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.35) brightness(.38);
}

.about-visual::after {
    content: "BINOX";
    position: absolute;
    left: -.05em;
    bottom: -.12em;
    font-family: var(--display);
    font-size: 13vw;
    color: rgba(164,31,31,.12);
    line-height: 1;
}

.about-copy {
    background: #08080b;
}

/* Duplicate of the Manifeste visual used only on tablet/mobile. */
.about-visual-mobile {
    display: none;
}

.chapter {
    padding: 70px 55px;
    border-bottom: 1px solid var(--rule);
}

.chapter .n {
    font-family: var(--label);
    font-size: .56rem;
    letter-spacing: .22em;
    color: var(--red2);
}

.chapter h2 {
    font-family: var(--display);
    font-size: clamp(2.8rem,5vw,6rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: .9;
    margin: 12px 0 26px;
}

.chapter p {
    color: #96969f;
    line-height: 2;
    margin-bottom: 18px;
}

.chapter .quote {
    font-family: var(--display);
    font-size: clamp(1.8rem,3vw,3rem);
    text-transform: uppercase;
    line-height: 1.05;
    color: #dad7d1;
    border-left: 2px solid var(--red);
    padding-left: 20px;
    margin: 34px 0;
}

/* detail */
.detail-hero {
    height: 72vh;
    min-height: 590px;
}

.detail-hero .hero-title {
    font-size: clamp(3.8rem,7.5vw,8rem);
}

.detail-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 80px;
}

.detail-aside {
    position: sticky;
    top: 95px;
    align-self: start;
    border-top: 2px solid var(--red);
    padding-top: 22px;
}

.detail-aside dl {
    display: grid;
    gap: 18px;
}

.detail-aside dt {
    font-family: var(--label);
    font-size: .54rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #5f5f68;
}

.detail-aside dd {
    color: #b0b0b8;
    font-size: .84rem;
}

.detail-text {
    max-width: 860px;
}

.detail-text .lead {
    font-family: var(--display);
    font-size: clamp(2.7rem,5vw,5.4rem);
    text-transform: uppercase;
    line-height: .93;
    margin-bottom: 50px;
}

.detail-text p {
    font-family: Georgia,serif;
    color: #aaa7a1;
    font-size: 1.04rem;
    line-height: 2;
    margin-bottom: 26px;
}

.excerpt {
    margin: 50px 0;
    padding: 40px;
    border-block: 1px solid var(--rule);
    background: #08080b;
}

.excerpt .label {
    font-family: var(--label);
    font-size: .55rem;
    letter-spacing: .2em;
    color: var(--red2);
    text-transform: uppercase;
}

.excerpt p {
    font-family: var(--display);
    font-size: clamp(1.7rem,3vw,3rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: #dfdcd5;
    margin: 20px 0 0;
}

.back-link {
    display: inline-block;
    margin-top: 36px;
    font-family: var(--label);
    font-size: .59rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #888;
    border-bottom: 1px solid var(--red);
    padding-bottom: 5px;
}

/* utility */
.utility {
    max-width: 900px;
}

.utility h2 {
    font-family: var(--display);
    font-size: clamp(2.4rem,5vw,5rem);
    text-transform: uppercase;
    font-weight: 400;
    margin: 55px 0 18px;
}

.utility h2:first-child {
    margin-top: 0;
}

.utility p,.utility li {
    color: #92929c;
    line-height: 1.9;
}

.utility ul {
    list-style: none;
    border-top: 1px solid var(--rule);
    margin-top: 20px;
}

.utility li {
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
}

.utility a:hover {
    color: var(--red2);
}

/* ==========================================================================
   PONCTUATIONS VISUELLES — MATIÈRES / TEXTURES
   ========================================================================== */
.texture-break {
    position: relative;
    width: 100%;
    height: clamp(220px, 27vw, 320px);
    overflow: hidden;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: #030305;
}

.texture-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(.52) saturate(.55) contrast(1.14);
}

.texture-break::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3,3,5,.42), rgba(3,3,5,.08), rgba(3,3,5,.42));
    pointer-events: none;
}

.manifest-image-break {
    position: relative;
    height: clamp(190px, 22vw, 270px);
    overflow: hidden;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: #030305;
}

.manifest-image-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(.64) saturate(.55) contrast(1.12);
}

.manifest-image-break::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px rgba(3,3,5,.62);
    pointer-events: none;
}

/* footer */
footer {
    background: #020203;
    padding: 65px 22px 18px;
    border-top: 1px solid var(--rule);
}

.footer-inner {
    width: min(var(--max),100%);
    margin: auto;
    display: grid;
    grid-template-columns: 1.4fr .7fr .7fr;
    gap: 70px;
}

.footer-brand {
    font-family: var(--display);
    font-size: 2.7rem;
    text-transform: uppercase;
    line-height: .8;
}

.footer-binox-word {
    display: flex;
    align-items: flex-end;
    gap: .035em;
    white-space: nowrap;
}

.binox-b-svg--footer {
    height: .78em;
    width: .57em;
    margin-right: 0.07em;
    transform: translateY(0.08em) scaleX(1.20);
    transform-origin: left bottom;
}

.footer-tag {
    max-width: 430px;
    color: #686871;
    margin-top: 18px;
    font-size: .84rem;
}

.footer-title {
    font-family: var(--label);
    font-size: .56rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--red2);
    margin-bottom: 17px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin: 7px 0;
}

.footer-links a {
    font-size: .83rem;
    color: #898992;
}

.footer-bottom {
    width: min(var(--max),100%);
    margin: 55px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.copyright {
    font-size: .65rem;
    color: #4f4f57;
}

.back-top {
    font-family: var(--label);
    font-size: .57rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--red);
    padding-bottom: 4px;
    color: #999;
}

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: .65s;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width:980px) {
    .nav-links a {
        padding: 0 10px;
        font-size: .55rem;
    }

    .hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    }

    .section-intro {
        grid-template-columns: 130px 1fr;
    }

    .manifest {
        grid-template-columns: 1fr;
    }

    .manifest .statement {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }

    .work {
        grid-template-columns: 80px 190px 1fr 55px;
    }

    .about-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-grid > .about-visual {
        display: none;
    }

    .about-visual-mobile {
        display: block;
        position: relative;
        top: auto;
        width: 100%;
        height: clamp(360px, 55vw, 540px);
        min-height: 0;
    }

    .chapter {
        padding: 55px 38px;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .footer-inner>div:first-child {
        grid-column: 1/-1;
    }
}

@media (max-width:760px) {
    .site-nav {
        height: 58px;
    }

    .nav-inner {
        grid-template-columns: auto 1fr auto;
    }

    .nav-links,.langs {
        display: none;
    }

    .menu-toggle {
        display: block;
        justify-self: end;
    }

    .mobile-panel {
        inset: 58px 0 0;
    }

    .hero {
        height: auto;
        min-height: 650px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 260px;
    }

    .hero-copy {
        padding: 80px 20px 42px;
    }

    .hero-code {
        left: 20px;
        top: 24px;
    }

    .hero-title {
        font-size: clamp(3.4rem,15vw,5.8rem);
    }

    .hero-media {
        border-left: 0;
        border-top: 1px solid var(--rule);
    }

    .hero-index {
        font-size: 42vw;
    }

    .section {
        padding: 72px 16px;
    }

    .section-intro {
        display: block;
        margin-bottom: 42px;
    }

    .eyebrow {
        display: block;
        margin-bottom: 16px;
    }

    .section-intro p {
        margin-top: 20px;
    }

    .manifest .statement,.manifest .copy {
        padding: 38px 24px;
    }

    .work {
        grid-template-columns: 56px 105px 1fr;
        min-height: 220px;
    }

    .work-arrow {
        display: none;
    }

    .work-num {
        font-size: 1.9rem;
        padding: 22px 10px;
    }

    .work-copy {
        padding: 24px 18px;
    }

    .work h3 {
        font-size: clamp(2rem,9vw,3.6rem);
    }

    .work p {
        font-size: .82rem;
    }

    .fragments {
        display: block;
        background: none;
    }

    .fragment {
        border-bottom: 1px solid var(--rule);
        min-height: 220px;
    }

    .dissonance {
        grid-template-columns: 70px 1fr;
        gap: 18px;
    }

    .dissonance .tag {
        grid-column: 2;
        text-align: left;
    }

    .about-grid {
        display: block;
        background: none;
    }

    .about-visual {
        position: relative;
        top: auto;
        height: 420px;
        min-height: 420px;
    }

    .chapter {
        padding: 55px 22px;
    }

    .detail-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .detail-aside {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-inner>div:first-child {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .back-top {
        align-self: flex-end;
    }
}

@media (max-width:430px) {
    .hero {
        min-height: 610px;
        grid-template-rows: 1fr 220px;
    }

    .hero-title {
        font-size: 14vw;
    }

    .work {
        grid-template-columns: 46px 90px 1fr;
    }

    .work-num {
        font-size: 1.45rem;
    }

    .work-copy {
        padding: 20px 14px;
    }

    .work-type {
        font-size: .49rem;
    }

    .work h3 {
        font-size: clamp(1.75rem,7.6vw,2.65rem);
    }

    .work p {
        display: none;
    }

    .detail-aside {
        grid-template-columns: 1fr;
    }

    .fragment {
        padding: 28px 22px;
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   SIGNAL DE L'INDEX — RESPONSIVE TABLETTE / MOBILE
   ========================================================================== */
@media (max-width: 760px) {
    .signal {
        overflow: hidden;
    }

    .signal-track {
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 0;
        white-space: normal;
    }

    .signal-track span {
        min-width: 0;
        padding: 11px 16px;
        line-height: 1.45;
        border-right: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        overflow-wrap: anywhere;
    }

    .signal-track span:nth-child(even) {
        border-right: 0;
    }

    .signal-track span:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .signal-track span::after {
        content: none;
        margin-left: 0;
    }
}

/* ==========================================================================
   PETITS MOBILES ≤ 399 PX — TYPOGRAPHIE ET SIGNAL RESPONSIFS
   ========================================================================== */
@media (max-width: 399px) {
    .hero-title {
        font-size: 12vw;
        line-height: .80;
        letter-spacing: -.03em;
    }

    .detail-hero .hero-title {
        font-size: 11vw;
    }

    .hero-title .cut {
        transform: translateX(.08em);
    }

    .mobile-panel nav a {
        font-size: clamp(1.85rem, 9vw, 2.8rem);
        grid-template-columns: 42px 1fr;
    }

    .section-intro h2 {
        font-size: clamp(2rem, 9.5vw, 3.2rem);
        line-height: .94;}

    .manifest .statement {
        font-size: clamp(2.35rem, 12vw, 3.8rem);}

    .work h3 {
        font-size: clamp(1.55rem, 7.3vw, 2.35rem);
        line-height: .90;}

    .fragment blockquote {
        font-size: clamp(1.4rem, 7.5vw, 2.2rem);}

    .dissonance h3 {
        font-size: clamp(1.55rem, 7.8vw, 2.5rem);
        line-height: .92;}

    .chapter h2 {
        font-size: clamp(1.95rem, 9.5vw, 3rem);}

    .detail-text .lead {
        font-size: clamp(1.9rem, 9vw, 3rem);}

    .excerpt p {
        font-size: clamp(1.35rem, 7vw, 2.1rem);}

    .utility h2 {
        font-size: clamp(1.8rem, 9vw, 2.9rem);}

    /* Le signal de l'index devient une colonne lisible sans perdre le langage graphique. */
    .signal-track {
        grid-template-columns: 1fr;
        font-size: .51rem;
        letter-spacing: .16em;
    }

    .signal-track span {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
        padding: 10px 14px;
    }

    .signal-track span:last-child {
        border-bottom: 0;
    }
}

/* INDEX keeps the original, deliberately very dark hero treatment. */
.home-hero .hero-media img {
    filter: grayscale(1) contrast(1.35) brightness(.38);
}

/* MANIFESTE — preserve the red matter and use the custom Asimovian B in the watermark. */
.manifest-page .about-visual img {
    filter: grayscale(.28) saturate(.78) contrast(1.16) brightness(.68);
}

.about-visual::after {
    content: none !important;
}

.about-watermark {
    position: absolute;
    left: -.05em;
    bottom: -.12em;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    font-family: var(--display);
    font-size: 13vw;
    line-height: 1;
    color: rgba(164,31,31,.14);
    pointer-events: none;
}

.about-watermark-b {
    display: block;
    width: .58em;
    height: .79em;
    margin-right: .07em;
    transform: translateY(-0.02em) scaleX(1.20);
    transform-origin: left bottom;
    color: rgba(164,31,31,.14);
    flex: 0 0 auto;
    overflow: visible;
}

.dissonance-list > a.dissonance {
    color: inherit;
    text-decoration: none;
    transition: background .2s, transform .2s;
}

.dissonance-list > a.dissonance:hover {
    background: #0b0b0f;
}

.dissonance-list > a.dissonance:hover h3,
.dissonance-list > a.dissonance:hover .tag {
    color: var(--red2);
}

/*

/* ==========================================================================
   TYPOGRAPHIE RESPONSIVE — RETOURS À LA LIGNE ET CÉSURE
   - Tous les H1 restent toujours sur des mots entiers : aucune coupure interne.
   - FR / EN / PL : les grands titres reviennent à la ligne uniquement entre les mots.
   - DE : la césure automatique reste autorisée pour les titres secondaires,
          mais jamais pour les H1.
   ========================================================================== */

/* Base commune : aucune coupure arbitraire au milieu d'un mot. */
.hero-title,
.section-intro h2,
.manifest .statement,
.work h3,
.fragment blockquote,
.dissonance h3,
.chapter h2,
.detail-text .lead,
.excerpt p,
.utility h2 {
    max-width: 100%;
    min-width: 0;
    word-break: normal;
    overflow-wrap: normal;
}

/* H1 — toutes langues, allemand compris :
   retour à la ligne uniquement entre des mots complets. */
.hero-title {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}

/* FR / EN / PL — pas de césure sur les grands titres. */
html:not([lang="de"]) .section-intro h2,
html:not([lang="de"]) .manifest .statement,
html:not([lang="de"]) .work h3,
html:not([lang="de"]) .fragment blockquote,
html:not([lang="de"]) .dissonance h3,
html:not([lang="de"]) .chapter h2,
html:not([lang="de"]) .detail-text .lead,
html:not([lang="de"]) .excerpt p,
html:not([lang="de"]) .utility h2 {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

/* Allemand — césure linguistique uniquement pour les titres secondaires. */
html[lang="de"] .section-intro h2,
html[lang="de"] .manifest .statement,
html[lang="de"] .work h3,
html[lang="de"] .fragment blockquote,
html[lang="de"] .dissonance h3,
html[lang="de"] .chapter h2,
html[lang="de"] .detail-text .lead,
html[lang="de"] .excerpt p,
html[lang="de"] .utility h2 {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    hyphenate-character: "-";
    overflow-wrap: normal;
    word-break: normal;
}

/* Allemand : réduction discrète des grands titres pour les mots composés. */
html[lang="de"] .section-intro h2 {
    font-size: clamp(2.7rem, 5.2vw, 6.2rem);
}

html[lang="de"] .work h3 {
    font-size: clamp(2.35rem, 4.5vw, 5.2rem);
}

html[lang="de"] .dissonance h3 {
    font-size: clamp(1.9rem, 3.6vw, 4.2rem);
}

html[lang="de"] .chapter h2 {
    font-size: clamp(2.5rem, 4.5vw, 5.3rem);
}

html[lang="de"] .detail-text .lead {
    font-size: clamp(2.4rem, 4.5vw, 4.9rem);
}

html[lang="de"] .utility h2 {
    font-size: clamp(2.2rem, 4.5vw, 4.6rem);
}

@media (max-width: 760px) {
    html[lang="de"] .section-intro h2,
    html[lang="de"] .chapter h2,
    html[lang="de"] .detail-text .lead,
    html[lang="de"] .utility h2 {
        font-size: clamp(1.8rem, 8vw, 3rem);
        line-height: .94;
    }

    html[lang="de"] .work h3,
    html[lang="de"] .dissonance h3 {
        font-size: clamp(1.6rem, 7.4vw, 2.7rem);
        line-height: .92;
    }
}

@media (max-width: 399px) {
    html[lang="de"] .section-intro h2,
    html[lang="de"] .chapter h2,
    html[lang="de"] .detail-text .lead,
    html[lang="de"] .utility h2 {
        font-size: clamp(1.65rem, 7.6vw, 2.65rem);
    }
}

/* ==========================================================================
   FINITIONS RESPONSIVES — 320 PX / COHÉRENCE MULTILINGUE
   ========================================================================== */

/* L'énoncé de l'index a désormais la même échelle dans les quatre langues
   (échelle précédemment utilisée par la version allemande). */
@media (max-width: 760px) {
    .manifest .statement {
        font-size: clamp(1.8rem, 8vw, 3rem);
        line-height: .94;
    }
}

@media (max-width: 399px) {
    .manifest .statement {
        font-size: clamp(1.65rem, 7.6vw, 2.65rem);
    }

    /* Titres de romans : un peu plus compacts sur les très petits écrans. */
    .work h3 {
        font-size: clamp(1.35rem, 6.5vw, 2.1rem);
        line-height: .92;
    }

    /* Le long titre de la page Fragments polonaise reste dans le cadre. */
    .fragments-page .section-intro h2 {
        font-size: clamp(1.55rem, 7.2vw, 2.25rem);
        line-height: .95;
    }

    /* Manifeste : titres de positions légèrement réduits à 320–399 px. */
    .manifest-page .chapter h2 {
        font-size: clamp(1.65rem, 8vw, 2.55rem);
        line-height: .94;
    }

    /* Pages Cali / Limerence PL : introduction sous les métadonnées plus compacte. */
    .compact-lead-page .detail-text .lead {
        font-size: clamp(1.55rem, 7.5vw, 2.45rem);
        line-height: .96;
    }
}

@media (max-width: 360px) {
    /* Empêche BINOX ORKYN de toucher / dépasser le bord dans le footer. */
    .footer-brand {
        font-size: 2.15rem;
    }
}