@font-face{font-family:Inter;src:url("assets/fonts/inter-400.woff2?v=8909904a") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/inter-700.woff2?v=6f56409f") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("assets/fonts/source-serif-4-400.woff2?v=02194deb") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--ink:#10241d;--paper:#f2eee4;--white:#fffdf8;--acid:#d6ff3f;--muted:#a7b5ad;--line:#c9cec8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}.doc-head{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:3rem 1fr auto;gap:1rem;align-items:center;padding:.9rem clamp(1rem,3vw,3rem);background:rgba(242,238,228,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.doc-head .back{font-size:1.5rem;text-decoration:none}.doc-head div span,.doc-head .index{display:block;font-size:.62rem;font-weight:700;letter-spacing:.13em;color:#607268}.doc-head strong{display:block;margin-top:.12rem;font-size:.84rem;letter-spacing:.08em}
main{overflow:hidden}.hero{min-height:76vh;padding:clamp(4rem,10vw,9rem) clamp(1rem,7vw,8rem);display:flex;flex-direction:column;justify-content:center}.kicker,.label{font-size:.67rem;font-weight:700;letter-spacing:.15em}.hero h1,.chapter h2{font-family:"Source Serif 4",Georgia,serif;font-weight:400;letter-spacing:-.045em}.hero h1{max-width:13ch;margin:.7rem 0 1.4rem;font-size:clamp(3.2rem,8vw,8.4rem);line-height:.88}.intro{max-width:38rem;margin:0 0 3rem;font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.35}.formula{display:flex;flex-wrap:wrap;gap:.65rem 1rem;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.08em}.formula i{color:#708078;font-style:normal}
.chapter{min-height:78vh;display:grid;grid-template-columns:5rem minmax(18rem,.72fr) minmax(20rem,1.28fr);gap:clamp(1rem,4vw,5rem);align-items:center;padding:clamp(3rem,7vw,7rem) clamp(1rem,5vw,6rem);border-top:1px solid var(--line)}
.chapter.dark{background:var(--panel-dark,var(--ink));color:var(--white);border-color:rgba(255,255,255,.14)}.num{align-self:start;font-size:clamp(2rem,4vw,4rem);font-weight:700;letter-spacing:-.05em;color:var(--acid)}.chapter-copy{max-width:40rem}.label{margin:0 0 .7rem;color:#6b7d73}.dark .label{color:#b4c3bb}.chapter h2{margin:0 0 1.4rem;font-size:clamp(2.5rem,5vw,5.5rem);line-height:.94}.chapter-copy>p:not(.label):not(.rule):not(.small){font-size:clamp(1rem,1.3vw,1.22rem);line-height:1.55;max-width:38ch}.small{font-size:.86rem;line-height:1.5;color:#bdcbc4}.anchor{margin:0;min-width:0}.anchor img{display:block;width:100%;max-height:64vh;object-fit:contain;background:#071510}.anchor figcaption{margin-top:.55rem;font-size:.68rem;color:#6d7a74}
.evidence{display:grid;grid-template-columns:1.25fr .8fr .8fr;gap:.45rem;height:min(56vh,38rem)}.evidence img{width:100%;height:100%;object-fit:cover;min-width:0}.relations{display:grid;grid-template-columns:1fr auto 1fr;gap:.55rem .8rem;margin:2rem 0;font-size:.75rem;font-weight:700;letter-spacing:.09em}.relations b{color:var(--acid)}
.swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}.swatches div{min-height:13rem;padding:1rem;display:flex;flex-direction:column;justify-content:flex-end;background:var(--c);border:1px solid rgba(16,36,29,.16)}.swatches div:first-child{color:#fff}.swatches div:last-child{color:#10241d}.swatches b{font-size:1rem}.swatches span{font-size:.65rem;letter-spacing:.11em;margin-top:.25rem}.rule{margin-top:2rem;font-size:.72rem;line-height:1.8;letter-spacing:.12em}.rule strong{color:#799400}
.type-specimens{display:grid;gap:.7rem}.type-specimens>div{padding:1.5rem;border:1px solid rgba(255,255,255,.17)}.type-specimens span{font-size:.62rem;letter-spacing:.12em;color:#aebdb5}.type-specimens strong{display:block;margin:.6rem 0;font-size:clamp(2.4rem,5vw,5.5rem);line-height:.9}.serif-sample strong{font-family:"Source Serif 4",Georgia,serif;font-weight:400}.sans-sample strong{font-family:Inter,Arial,sans-serif}.type-specimens p,.type-relation small{font-size:.65rem;letter-spacing:.12em;color:#aebdb5}.type-relation{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center}.type-relation i{font-style:normal;color:var(--acid);font-size:2rem}.type-relation small{grid-column:1/4}
.marks{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}.marks div{padding:1.25rem;border-top:1px solid #87958e}.marks dt{font-size:clamp(1.6rem,3vw,3rem);font-weight:700}.marks dd{margin:.5rem 0 0;font-size:.78rem;line-height:1.4;color:#66756d}
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}.media-grid a{min-height:9rem;padding:1.2rem;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;border:1px solid rgba(214,255,63,.38);transition:.2s}.media-grid a:hover{background:rgba(214,255,63,.09);border-color:var(--acid)}.media-grid b{color:var(--acid);font-size:.78rem;letter-spacing:.08em}.media-grid span{margin-top:.3rem;font-size:.72rem;color:#bdcbc4}
.closing{min-height:70vh}.return{display:inline-flex;gap:.8rem;margin-top:2rem;padding-bottom:.3rem;text-decoration:none;border-bottom:2px solid var(--ink);font-size:.72rem;font-weight:700;letter-spacing:.1em}
footer{display:flex;justify-content:space-between;padding:1.2rem clamp(1rem,5vw,6rem);background:var(--panel-dark,var(--ink));color:#b8c6bf;font-size:.62rem;letter-spacing:.1em}
@media(max-width:820px){.doc-head{grid-template-columns:2rem 1fr auto;padding:.75rem}.doc-head div span{display:none}.hero{min-height:auto;padding:5rem 1rem 4rem}.hero h1{font-size:clamp(3rem,14vw,5.5rem)}.formula{gap:.5rem}.chapter{min-height:auto;grid-template-columns:1fr;padding:3.5rem 1rem;gap:1.4rem}.num{font-size:2.2rem}.chapter h2{font-size:clamp(2.6rem,12vw,4.3rem);max-width:12ch}.evidence{height:auto;grid-template-columns:1fr 1fr}.evidence img{height:auto;max-height:50vh;object-fit:contain;background:#071510}.evidence img:first-child{grid-column:1/3}.swatches,.marks,.media-grid{grid-template-columns:1fr 1fr}.swatches div{min-height:9rem}.type-relation{grid-template-columns:1fr auto 1fr!important}.anchor img{max-height:none}footer{gap:1rem;flex-wrap:wrap}}
@media(max-width:420px){.swatches,.marks,.media-grid{grid-template-columns:1fr}.doc-head .index{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.media-grid a{transition:none}}

/* ============================================================
   v1.83 — INDEX / APERTURE
   The chapter number is not a decorative neon mark anymore.
   It becomes a recurring "aperture": deep green field + acid index.
   The circle subtly echoes the opening in the wall from the first observation.
   ============================================================ */

.num{
  width:clamp(4.4rem,5.2vw,5.6rem);
  height:clamp(4.4rem,5.2vw,5.6rem);
  display:grid;
  place-items:center;
  align-self:start;
  border-radius:50%;
  background:#071510;
  border:1px solid rgba(214,255,63,.28);
  color:var(--acid);
  font-family:Inter,Arial,sans-serif;
  font-size:clamp(1.65rem,2.35vw,2.45rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}

/* Same object on dark chapters: visible through tonal contrast, not inversion. */
.chapter.dark .num{
  background:#071510;
  border-color:rgba(214,255,63,.34);
}

/* Keep the marker editorial, not button-like. */
.num::selection{
  background:var(--acid);
  color:#071510;
}

@media(max-width:820px){
  .num{
    width:3.5rem;
    height:3.5rem;
    font-size:1.42rem;
    border-width:1px;
  }
}


/* ============================================================
   v1.84 — COHERENT PROJECT DOCUMENTATION
   The documentation is no longer a sequence of separate notes.
   It exposes one continuous thread from irritation to synthesis.
   ============================================================ */

.hero{
  min-height:calc(100svh - 4.2rem);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(24rem,.95fr);
  grid-template-rows:1fr auto;
  gap:clamp(2rem,5vw,6rem);
  align-items:center;
  padding:clamp(3rem,7vw,6.5rem) clamp(1.2rem,5vw,6rem) 2rem;
}
.hero-copy{max-width:48rem;align-self:center}
.hero h1{
  max-width:10.5ch;
  margin:.75rem 0 1.5rem;
  font-size:clamp(3.4rem,6.7vw,7.4rem);
  line-height:.9;
}
.hero .intro{
  max-width:36rem;
  margin-bottom:2rem;
  font-size:clamp(1.1rem,1.55vw,1.45rem);
  line-height:1.43;
}
.hero-thesis{
  margin:0;
  max-width:31rem;
  padding:1.15rem 1.25rem 1.2rem;
  border-left:4px solid var(--acid);
  background:rgba(16,36,29,.055);
}
.hero-thesis span{
  display:block;
  margin-bottom:.45rem;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
}
.hero-thesis strong{
  display:block;
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.7rem,2.5vw,2.65rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.035em;
}
.hero-thesis small{
  display:block;
  margin-top:.7rem;
  max-width:36ch;
  font-size:.76rem;
  line-height:1.45;
  color:#607269;
}

.project-map{
  position:relative;
  width:min(100%,40rem);
  aspect-ratio:1/1;
  justify-self:end;
  align-self:center;
  border:1px solid rgba(16,36,29,.16);
  border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(214,255,63,.09) 0 16%, transparent 16.5%),
    radial-gradient(circle at center, transparent 0 42%, rgba(16,36,29,.08) 42.5% 43%, transparent 43.5%);
}
.map-label{
  position:absolute;
  top:7%;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.14em;
  white-space:nowrap;
  color:#607269;
}
.map-core{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:7.2rem;height:7.2rem;
  display:grid;place-items:center;
  border-radius:50%;
  background:#071510;
  color:var(--acid);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.14em;
  z-index:3;
}
.map-node{
  position:absolute;
  z-index:3;
  min-width:7.2rem;
  max-width:9rem;
  padding:.55rem .7rem;
  background:var(--paper);
  border:1px solid rgba(16,36,29,.18);
}
.map-node b{display:block;font-size:.68rem;letter-spacing:.1em}
.map-node span{display:block;margin-top:.2rem;font-size:.6rem;line-height:1.25;color:#64756c}
.n1{left:7%;top:13%}.n2{right:5%;top:12%}.n3{right:1%;top:40%}.n4{right:6%;bottom:13%}
.n5{left:40%;bottom:1%}.n6{left:5%;bottom:12%}.n7{left:-1%;top:42%}
.map-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.map-lines line{stroke:#809087;stroke-width:.45;stroke-dasharray:1.8 2.1}
.map-note{
  position:absolute;
  left:50%;bottom:-4.3rem;
  transform:translateX(-50%);
  width:82%;
  margin:0;
  text-align:center;
  font-size:.68rem;
  line-height:1.4;
  color:#64756c;
}

.thread{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.55rem .8rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.thread a{
  text-decoration:none;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.11em;
}
.thread i{font-style:normal;color:#7a8981}
.thread a:hover,.thread a:focus-visible{color:#708c00}

/* Every chapter now reads as one part of a system, not an isolated slide. */
.chapter{
  position:relative;
  min-height:72vh;
}
.chapter::after{
  content:"";
  position:absolute;
  left:calc(clamp(1rem,5vw,6rem) + 2.15rem);
  top:7rem;
  bottom:-7rem;
  width:1px;
  background:linear-gradient(to bottom,rgba(214,255,63,.38),rgba(16,36,29,.06));
  pointer-events:none;
}
.chapter.dark::after{
  background:linear-gradient(to bottom,rgba(214,255,63,.42),rgba(255,255,255,.06));
}
.closing::after{display:none}

/* Slightly more editorial density so wide screens don't feel abandoned. */
.chapter{
  grid-template-columns:5rem minmax(19rem,.8fr) minmax(25rem,1.2fr);
  gap:clamp(1.5rem,4vw,4.5rem);
}
.chapter-copy{max-width:43rem}
.chapter-copy>p:not(.label):not(.rule):not(.small){
  max-width:42ch;
}

@media(max-width:1100px){
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(21rem,.82fr);
    gap:2.4rem;
  }
  .project-map{width:min(100%,32rem)}
  .map-node{min-width:6.2rem}
}

@media(max-width:820px){
  .hero{
    display:block;
    min-height:auto;
    padding:4.5rem 1rem 2.6rem;
  }
  .hero h1{max-width:11ch}
  .project-map{
    width:min(92vw,34rem);
    margin:3rem auto 5.2rem;
  }
  .thread{
    margin-top:1.5rem;
    padding-top:1.2rem;
    justify-content:flex-start;
  }
  .chapter::after{display:none}
  .chapter{grid-template-columns:1fr}
}

@media(max-width:480px){
  .project-map{
    border-radius:1.4rem;
    aspect-ratio:auto;
    padding:4.5rem 1rem 1rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
  }
  .map-core{
    top:1rem;
    width:auto;height:auto;
    padding:.7rem 1rem;
    border-radius:999px;
  }
  .map-label{top:.6rem;left:1rem;transform:none}
  .map-node{
    position:static;
    min-width:0;
    max-width:none;
  }
  .map-lines{display:none}
  .map-note{
    position:static;
    transform:none;
    width:auto;
    grid-column:1 / -1;
    margin-top:.4rem;
    text-align:left;
  }
}


/* ============================================================
   v1.85 — CLOSING THE CYCLE / RESPONSIVE DOCUMENTATION
   The final chapter visually closes the project loop and links
   back to the Umwelt card on the portfolio home page.
   ============================================================ */

/* Fluid documentation scale: width and height both influence density. */
:root{
  --doc-x:clamp(1rem,5vw,6rem);
  --doc-y:clamp(2.8rem,6.2vw,6.5rem);
}

.chapter{
  padding:var(--doc-y) var(--doc-x);
  min-height:max(36rem,calc(100svh - 4rem));
}

/* The last chapter uses all three grid columns intentionally. */
.closing{
  min-height:max(38rem,calc(100svh - 4rem));
  grid-template-columns:5rem minmax(20rem,.82fr) minmax(25rem,1.18fr);
  align-items:center;
  background:
    radial-gradient(circle at 78% 46%,rgba(214,255,63,.055),transparent 28%),
    var(--paper);
}
.closing .num{align-self:start}
.closing-copy{max-width:41rem}
.closing h2{
  max-width:12ch;
  font-size:clamp(2.65rem,4.35vw,5.05rem);
  line-height:.95;
}
.closing-copy>p:not(.label):not(.small){max-width:39ch}
.closing .small{max-width:45ch;color:#66756d}

.closing-loop{
  width:min(100%,46rem);
  justify-self:end;
  display:grid;
  grid-template-rows:minmax(17rem,1fr) auto;
  min-height:min(67vh,43rem);
  border:1px solid rgba(16,36,29,.18);
  background:#071510;
  color:var(--white);
  overflow:hidden;
}
.loop-image{
  position:relative;
  min-height:0;
  margin:0;
  overflow:hidden;
  background:#071510;
}
.loop-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(7,21,16,.56));
  pointer-events:none;
}
.loop-image img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 58%;
  filter:saturate(.82) contrast(1.03);
}
.loop-image figcaption{
  position:absolute;
  z-index:2;
  left:1rem;bottom:.85rem;
  margin:0;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.76);
}
.loop-system{
  padding:1.15rem 1.25rem 1.3rem;
  border-top:1px solid rgba(214,255,63,.26);
}
.loop-system>p{
  margin:0 0 .8rem;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  color:#aebdb5;
}
.loop-flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.42rem .58rem;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.095em;
}
.loop-flow i{font-style:normal;color:#839189}
.loop-flow strong{color:var(--acid);font-weight:700}
.loop-system blockquote{
  margin:1rem 0 0;
  padding:.82rem .95rem;
  border-left:3px solid var(--acid);
  background:rgba(214,255,63,.07);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.15rem,1.65vw,1.55rem);
  line-height:1.12;
}

.return{
  margin-top:1.5rem;
  gap:.65rem;
  border-bottom:1px solid var(--ink);
  transition:gap .18s ease,border-color .18s ease;
}
.return:hover,.return:focus-visible{gap:1rem;border-color:#6f8b00}

/* Wide but low laptop screens: reduce vertical pressure, never crop content. */
@media(min-width:821px) and (max-height:820px){
  :root{--doc-y:clamp(2rem,4.2vh,3rem)}
  .chapter{min-height:auto}
  .chapter h2{font-size:clamp(2.3rem,3.8vw,4.25rem)}
  .chapter-copy>p:not(.label):not(.rule):not(.small){font-size:clamp(.94rem,1.05vw,1.08rem);line-height:1.48}
  .closing{min-height:auto;grid-template-columns:4.5rem minmax(20rem,.88fr) minmax(23rem,1.12fr)}
  .closing h2{font-size:clamp(2.35rem,3.65vw,4.15rem)}
  .closing-loop{min-height:31rem;max-height:calc(100svh - 7rem)}
  .loop-system{padding:.85rem 1rem 1rem}
}

/* Medium desktop/tablet: keep composition balanced instead of squeezing columns. */
@media(min-width:821px) and (max-width:1180px){
  .chapter,.closing{grid-template-columns:4.2rem minmax(18rem,.95fr) minmax(21rem,1.05fr);gap:clamp(1.2rem,2.7vw,2.4rem)}
  .closing-loop{min-height:min(61vh,37rem)}
  .closing h2{font-size:clamp(2.45rem,4vw,4rem)}
}

/* Mobile becomes a deliberate reading sequence, not a compressed desktop layout. */
@media(max-width:820px){
  :root{--doc-x:1rem;--doc-y:3rem}
  .chapter,.closing{
    min-height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:1.25rem;
    padding:var(--doc-y) var(--doc-x);
  }
  .closing .num{grid-row:1}
  .closing-copy{grid-row:2;max-width:none}
  .closing h2{max-width:12ch;font-size:clamp(2.55rem,11.5vw,4.1rem)}
  .closing-loop{
    grid-row:3;
    width:100%;
    min-height:0;
    grid-template-rows:auto auto;
  }
  .loop-image{aspect-ratio:4/3;min-height:0}
  .loop-image img{object-position:center 60%}
  .loop-system{padding:1rem}
  .return{
    min-height:44px;
    align-items:center;
    margin-top:1.1rem;
    padding:.65rem 0 .5rem;
    font-size:.7rem;
  }
}

@media(max-width:480px){
  .closing h2{font-size:clamp(2.35rem,12vw,3.5rem)}
  .loop-image{aspect-ratio:1/1}
  .loop-flow{gap:.36rem .45rem;font-size:.61rem}
  .loop-system blockquote{font-size:1.14rem}
}


/* ============================================================
   v1.87 — MOBILE PROJECT MAP FIX
   On mobile the BLICK core becomes part of the layout flow,
   not an absolutely-positioned badge over the section label.
   ============================================================ */

@media(max-width:820px){
  .project-map{
    position:relative;
    width:min(92vw,34rem);
    margin:3rem auto 5.2rem;
    padding-top:4.8rem;
  }

  .map-label{
    top:1.05rem;
    left:1.15rem;
    transform:none;
    white-space:normal;
    max-width:65%;
    line-height:1.25;
  }

  .map-core{
    top:1rem;
    right:1rem;
    left:auto;
    transform:none;
    width:auto;
    height:auto;
    min-width:6.4rem;
    padding:.72rem 1.05rem;
    border-radius:999px;
    font-size:.92rem;
    letter-spacing:.13em;
  }
}

@media(max-width:480px){
  .project-map{
    border-radius:1.4rem;
    aspect-ratio:auto;
    padding:5.2rem 1rem 1rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
  }

  .map-label{
    top:1rem;
    left:1rem;
    max-width:52%;
    font-size:.56rem;
  }

  .map-core{
    top:.75rem;
    right:.85rem;
    left:auto;
    transform:none;
    min-width:5.8rem;
    padding:.66rem .95rem;
    font-size:.84rem;
  }

  .map-node{
    position:static;
    min-width:0;
    max-width:none;
  }

  .map-lines{display:none}

  .map-note{
    position:static;
    transform:none;
    width:auto;
    grid-column:1 / -1;
    margin-top:.45rem;
    text-align:left;
  }
}

/* Extra-small phones: keep label and BLICK on separate visual columns. */
@media(max-width:360px){
  .project-map{
    padding-top:5.7rem;
  }
  .map-label{
    max-width:48%;
    font-size:.52rem;
  }
  .map-core{
    min-width:5.2rem;
    padding:.58rem .82rem;
    font-size:.78rem;
  }
}


/* v1.88 — DOKUMENTATION ALS METHODE */
.theory-note{
  margin-top:1.35rem;padding:1rem 1.05rem 1.05rem;
  border-top:1px solid rgba(214,255,63,.45);
  border-bottom:1px solid rgba(214,255,63,.18);
  background:rgba(214,255,63,.045)
}
.theory-note>span{
  display:block;margin-bottom:.55rem;color:var(--acid);
  font-size:.6rem;font-weight:700;letter-spacing:.14em
}
.theory-note p{
  margin:.35rem 0;max-width:46ch;font-size:.74rem;line-height:1.45;color:#bdcbc4
}
.theory-note a{
  display:inline-block;margin-top:.7rem;padding-bottom:.2rem;color:var(--acid);
  text-decoration:none;border-bottom:1px solid rgba(214,255,63,.55);
  font-size:.62rem;font-weight:700;letter-spacing:.1em
}
.closing-line{
  margin-top:1.5rem!important;padding-left:1rem;border-left:4px solid var(--acid);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.35rem,2vw,2rem)!important;line-height:1.18!important;max-width:30ch!important
}
.closing-line strong{font-weight:400;color:var(--ink)}
@media(max-width:820px){
  .theory-note{margin-top:1rem;padding:.9rem}
  .theory-note p{font-size:.72rem}
  .closing-line{font-size:1.45rem!important}
  .thread{gap:.45rem .6rem}
  .thread a{font-size:.59rem}
}


/* v1.89 — theory is integrated as a hinge, not an academic appendix */
.theory-note .theory-source{
  color:#eef2ec;
  padding-bottom:.7rem;
  margin-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.1)
}
.theory-note .theory-transfer{
  margin-top:.75rem;
  color:#e8eee9
}
.theory-note .theory-transfer b{
  color:var(--acid);
  font-weight:700
}
.method-bridge{
  margin:0 0 .75rem;
  font-family:"Inter",Arial,sans-serif!important;
  font-size:.6rem!important;
  font-weight:700;
  line-height:1.2!important;
  letter-spacing:.14em;
  color:var(--acid)!important
}
@media(max-width:820px){
  .theory-note .theory-source{padding-bottom:.6rem;margin-bottom:.6rem}
  .theory-note .theory-transfer{margin-top:.65rem}
  .method-bridge{font-size:.56rem!important;letter-spacing:.11em}
}


/* ============================================================
   v1.90 — EXPERIENCE, NOT EXPLANATION
   The final state demonstrates contextual change instead of
   merely describing it. Media receive distinct methodological verbs.
   ============================================================ */
.media-verb{
  display:block;
  margin-top:.28rem;
  color:var(--acid);
  font-style:normal;
  font-size:.54rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.14em
}
.perception-loop{
  width:min(100%,42rem);
  margin:1.65rem 0 1.15rem;
  display:grid;
  grid-template-columns:1fr minmax(8rem,1.25fr) 1fr;
  align-items:center;
  gap:.85rem
}
.loop-state{
  min-width:0;
  padding:.85rem .9rem;
  border:1px solid rgba(214,255,63,.26);
  background:rgba(214,255,63,.035)
}
.loop-state span{
  display:block;
  margin-bottom:.3rem;
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.13em;
  opacity:.62
}
.loop-state b{
  display:block;
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.15rem,1.8vw,1.65rem);
  font-weight:400;
  line-height:1
}
.loop-before{opacity:.68}
.loop-after{
  border-color:rgba(214,255,63,.68);
  background:rgba(214,255,63,.07)
}
.loop-after b{color:#4d6157}
.loop-axis{
  display:flex;
  align-items:center;
  gap:.55rem;
  color:#4d6157;
  font-size:.48rem;
  font-weight:700;
  letter-spacing:.11em;
  white-space:nowrap
}
.loop-axis i{
  display:block;
  flex:1;
  height:1px;
  background:rgba(214,255,63,.38)
}
.closing-sub{
  max-width:42ch!important;
  margin-top:.8rem!important;
  font-size:.76rem!important;
  line-height:1.45!important;
  opacity:.72
}
@media(max-width:620px){
  .perception-loop{
    grid-template-columns:1fr;
    gap:.45rem;
    margin:1.25rem 0 1rem
  }
  .loop-axis{
    min-height:2rem;
    justify-content:center
  }
  .loop-axis i{max-width:3.5rem}
  .loop-state{padding:.78rem .82rem}
  .loop-state b{font-size:1.25rem}
  .closing-line{margin-top:1.1rem!important}
}


/* ============================================================
   v1.92 — ATTENTION AS METHOD
   Oliveros is used as a lens for attention, not retroactively
   claimed as the project's theory. Compact counterpoint to Verwoert.
   ============================================================ */
.attention-node{
  position:relative;
  width:min(100%,52rem);
  margin:clamp(1.5rem,3vw,2.7rem) 0;
  padding:clamp(1.15rem,2.2vw,1.7rem);
  border:1px solid rgba(9,42,32,.18);
  background:rgba(9,42,32,.035)
}
.attention-node::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--acid)
}
.attention-kicker{
  margin-bottom:.9rem;
  font-size:.57rem;
  font-weight:700;
  letter-spacing:.15em
}
.attention-flow{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.48rem;
  margin-bottom:1rem;
  font-size:clamp(.88rem,1.4vw,1.05rem);
  font-weight:700;
  letter-spacing:.08em
}
.attention-flow i{
  color:var(--acid);
  font-style:normal
}
.attention-flow strong{
  padding:.28rem .48rem;
  background:var(--panel-dark,var(--ink));
  color:var(--acid);
  font-weight:700
}
.attention-node>p{
  max-width:58ch!important;
  margin:0!important;
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(.96rem,1.35vw,1.12rem)!important;
  line-height:1.48!important
}
.attention-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin-top:1.15rem;
  background:rgba(9,42,32,.14);
  border:1px solid rgba(9,42,32,.14)
}
.attention-pair>div{
  padding:.72rem .8rem;
  background:var(--paper)
}
.attention-pair b,.attention-pair span{display:block}
.attention-pair b{
  margin-bottom:.22rem;
  font-size:.58rem;
  letter-spacing:.13em
}
.attention-pair span{
  font-size:.72rem;
  opacity:.68
}
@media(max-width:620px){
  .attention-node{
    margin:1.25rem 0;
    padding:1rem .9rem 1rem 1rem
  }
  .attention-flow{
    gap:.34rem;
    font-size:.76rem;
    letter-spacing:.045em
  }
  .attention-flow strong{padding:.22rem .35rem}
  .attention-pair{grid-template-columns:1fr}
}

/* v1.93 — documentation as physical form. The zine is a method reference,
   not a new theoretical authority: the same material is re-related by folding. */
.zine-sequence{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin:1.4rem 0;font-size:.68rem;font-weight:700;letter-spacing:.1em}.zine-sequence i{font-style:normal;color:var(--acid)}.zine-sequence strong{background:var(--panel-dark,var(--ink));color:var(--acid);padding:.48rem .7rem;border-radius:999px}.method-link{display:inline-grid;gap:.28rem;margin-top:.25rem;padding:.85rem 1rem;border:1px solid currentColor;text-decoration:none;font-size:.66rem;letter-spacing:.08em}.method-link span{font-weight:400;letter-spacing:.02em;color:#66766e}.method-link:hover,.method-link:focus-visible{background:var(--panel-dark,var(--ink));color:var(--acid)}.method-link:hover span,.method-link:focus-visible span{color:inherit}.zine-object{align-self:center;min-width:0}.zine-sheet{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #9ca79f;aspect-ratio:1.42;background:var(--paper);color:var(--ink);transform:rotate(-1.1deg);box-shadow:0 1.2rem 3rem rgba(5,18,14,.12)}.zine-sheet span{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(.55rem,1.4vw,1.1rem);border-right:1px solid #c6ccc6;border-bottom:1px solid #c6ccc6;font-size:.62rem;letter-spacing:.09em;min-width:0}.zine-sheet span:nth-child(4n){border-right:0}.zine-sheet span:nth-child(n+5){border-bottom:0;transform:rotate(180deg)}.zine-sheet b{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1rem,2.2vw,2.2rem);font-weight:400;letter-spacing:-.03em}.zine-sheet span:first-child{background:var(--acid)}.zine-object>p{margin:.9rem 0 0;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-align:right;color:#6b7d73}
@media(max-width:820px){.zine-sequence{gap:.42rem .5rem}.zine-sequence i{font-size:.6rem}.method-link{display:grid;width:100%;box-sizing:border-box}.zine-object{margin-top:.4rem}.zine-sheet{transform:none;aspect-ratio:1.15}.zine-sheet span{padding:.48rem;font-size:.52rem}.zine-sheet b{font-size:clamp(.8rem,4vw,1.2rem)}.zine-object>p{text-align:left}}


/* ============================================================
   v1.97 — DOCUMENTATION REPAIR
   Fixes production/CSP swatches, dark-theory contrast and the
   cramped three-column state on medium desktop widths.
   ============================================================ */
html{scroll-padding-top:4.4rem}
main{overflow-x:clip}
.chapter{scroll-margin-top:4.4rem}

/* Palette: use classes, not CSP-blocked inline custom properties. */
#farbe{min-height:68vh}
#farbe .chapter-copy{max-width:35rem}
#farbe h2{
  max-width:15ch;
  font-size:clamp(2.7rem,3.65vw,4.55rem);
  line-height:.96
}
#farbe .swatches{
  width:min(100%,52rem);
  justify-self:start;
  gap:.65rem
}
#farbe .swatches .swatch{min-height:10.5rem}
#farbe .swatches .swatch--ink{background:#10241d;color:#fffdf8}
#farbe .swatches .swatch--paper{background:#f2eee4;color:#10241d}
#farbe .swatches .swatch--white{background:#fffdf8;color:#10241d}
#farbe .swatches .swatch--acid{background:#d6ff3f;color:#10241d}

/* The attention/theory material is a quiet editorial hinge, not two stacked cards. */
.chapter.dark .attention-node{
  border:0;
  background:transparent;
  padding:1.05rem 0 0 1.45rem;
  margin:1.45rem 0 1.15rem
}
.chapter.dark .attention-node::before{width:2px}
.chapter.dark .attention-flow strong{
  background:var(--acid);
  color:var(--ink)
}
.chapter.dark .attention-pair{
  gap:.5rem;
  background:transparent;
  border:0;
  margin-top:1rem
}
.chapter.dark .attention-pair>div{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  color:var(--white)
}
.chapter.dark .attention-pair b{color:var(--white)}
.chapter.dark .attention-pair span{color:#bdcbc4;opacity:1}
.chapter.dark .theory-note{
  margin-top:1.2rem;
  padding:1rem 0 0;
  background:transparent;
  border-top:1px solid rgba(214,255,63,.34);
  border-bottom:0
}
.chapter.dark .theory-note p{max-width:52ch}

/* Medium desktop: don't force text and visual evidence into three narrow columns. */
@media(min-width:821px) and (max-width:1280px){
  .chapter:not(.closing){
    min-height:auto;
    grid-template-columns:4.2rem minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:1.25rem clamp(1.5rem,3vw,2.6rem);
    align-items:start;
    padding-top:clamp(3rem,5.5vw,4.5rem);
    padding-bottom:clamp(3rem,5.5vw,4.5rem)
  }
  .chapter:not(.closing)>.num{grid-column:1;grid-row:1}
  .chapter:not(.closing)>.chapter-copy{grid-column:2;grid-row:1;max-width:48rem}
  .chapter:not(.closing)>:nth-child(n+3){grid-column:2;grid-row:2;width:100%}
  .chapter:not(.closing)::after{display:none}
  .evidence{
    height:auto;
    grid-template-columns:1.25fr .9fr .9fr;
    max-width:62rem
  }
  .evidence img{height:auto;aspect-ratio:4/3;object-fit:cover}
  .anchor{max-width:58rem}
  .anchor img{max-height:62vh}
  #farbe .swatches{max-width:58rem}
  #farbe h2{max-width:16ch}
}

@media(max-width:820px){
  #farbe{min-height:auto}
  #farbe h2{font-size:clamp(2.45rem,10.8vw,3.9rem)}
  #farbe .swatches .swatch{min-height:8rem}
  .chapter.dark .attention-node{padding-left:1rem}
  .chapter.dark .theory-note{padding-top:.85rem}
}

/* v1.120-pigment-accessibility-cleanup — own artistic intervention: crisp vector studies, readable as a contact sheet */
.intervention-doc-link{display:inline-flex;flex-direction:column;gap:.25rem;margin-top:1.4rem;padding:.9rem 0;text-decoration:none;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.intervention-doc-link b{font-size:.72rem;letter-spacing:.1em}.intervention-doc-link span{font-size:.68rem;color:#65756d}
.intervention-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-self:center}
.intervention-preview figure{margin:0;min-width:0;background:rgba(255,253,248,.62);border:1px solid rgba(16,36,29,.15)}
.intervention-preview img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#f2eee4}
.intervention-preview figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.55rem .65rem .65rem;border-top:1px solid rgba(16,36,29,.12)}
.intervention-preview figcaption b{font-size:.61rem;letter-spacing:.1em;color:var(--ink)}
.intervention-preview figcaption span{font-size:.6rem;line-height:1.25;color:#65756d;text-align:right}
.intervention-preview .system-preview{grid-column:1/-1}
.intervention-preview .system-preview img{aspect-ratio:16/7.4}
@media(max-width:1280px) and (min-width:821px){.intervention-doc .intervention-preview{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.6rem}.intervention-preview .system-preview{grid-column:1/-1}}
@media(max-width:820px){.intervention-preview{grid-template-columns:1fr}.intervention-preview .system-preview{grid-column:auto}.intervention-preview .system-preview img{aspect-ratio:16/10}.intervention-preview figcaption{align-items:flex-start;flex-direction:column}.intervention-preview figcaption span{text-align:left}}

/* v1.148 WIDE READING COMPOSITION */
@media(min-width:1600px){
  .doc-head,.kicker,.label,.thread a,.thread i{font-size:clamp(.7rem,.43vw,.88rem)}
  .chapter-copy>p:not(.label):not(.rule):not(.small){font-size:clamp(1.05rem,.78vw,1.28rem)}
  .anchor figcaption{font-size:clamp(.7rem,.42vw,.86rem)}
}
@media(min-width:2200px){
  :root{--doc-x:clamp(5rem,8vw,14rem);--doc-y:clamp(5rem,6vw,9rem)}
  .hero{grid-template-columns:minmax(38rem,.95fr) minmax(48rem,1.05fr);gap:clamp(5rem,8vw,12rem)}
  .hero-copy{max-width:60rem}.hero h1{max-width:11ch;font-size:clamp(5.4rem,6.2vw,9.4rem)}
  .hero .intro{max-width:43rem;font-size:clamp(1.35rem,1.18vw,1.8rem)}.project-map{width:min(100%,56rem)}
  .chapter{grid-template-columns:clamp(5rem,6vw,8rem) minmax(30rem,.82fr) minmax(42rem,1.18fr);gap:clamp(3.5rem,5vw,8rem)}
  .chapter h2{font-size:clamp(4rem,4.7vw,7rem)}.anchor{max-width:72rem;justify-self:end}
  .closing{grid-template-columns:clamp(5rem,6vw,8rem) minmax(33rem,.88fr) minmax(48rem,1.12fr)}
  .closing-copy{max-width:50rem}.closing h2{font-size:clamp(4.8rem,5vw,7.7rem)}
  .closing-loop{width:min(100%,66rem);min-height:min(78vh,58rem)}
  .closing-loop .loop-system{padding:clamp(1.3rem,1.4vw,2.1rem)}.loop-system blockquote{font-size:clamp(1.45rem,1.45vw,2.1rem)}
}

@media(min-width:2200px){html{font-size:clamp(17px,.78vw,21px)}}
/* v1.120-pigment-accessibility-cleanup — photographic intervention preview: natural ratio, no crop */
.intervention-preview img,.intervention-preview .system-preview img{display:block;width:100%;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;background:#f2eee4}

/* v1.120-pigment-accessibility-cleanup — intervention as process evidence, not decorative cards */
.intervention-preview{gap:1.15rem}
.intervention-preview figure{background:transparent;border:0;border-top:1px solid rgba(16,36,29,.18);padding-top:.65rem}
.intervention-preview img,.intervention-preview .system-preview img{display:block;width:100%;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;background:#ebe5da;box-shadow:0 .25rem .9rem rgba(16,36,29,.05)}
.intervention-preview figcaption{padding:.55rem 0 0;border-top:0}
.intervention-preview .system-preview{border-top:2px solid var(--ink);padding-top:.8rem}
.intervention-preview .system-preview figcaption b{color:#6f8c00}

/* Dunkle Darstellung. Das Grün der Untersuchung bleibt der Grundton,
   nur die Richtung kehrt sich um. Flächen und Schrift sind getrennt. */
[data-theme="dark"] {
  --paper: #0e1a15;
  --ink: #e9efe9;
  --panel-dark: #10241d;
  --panel-bright: #16241e;
  --muted: #93a69c;
  --line: #2b3b34;
}

/* ─────────────────────────────────────────────────────────────
   Schrift auf der Signalfarbe bleibt in beiden Darstellungen dunkel.
   --ink ist im dunklen Thema hell; ohne diese Regel verschwindet
   jede Beschriftung auf dem Acid-Grund. Vollständig erzeugt aus
   allen Stellen, die diesen Grund setzen.
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .num::selection { color: #101010; }
[data-theme="dark"] .attention-node::before { color: #101010; }
[data-theme="dark"] .zine-sheet span:first-child { color: #101010; }
[data-theme="dark"] #farbe .swatches .swatch--acid { color: #101010; }
[data-theme="dark"] .chapter.dark .attention-flow strong { color: #101010; }
[data-theme="dark"] .loop-after b,
[data-theme="dark"] .loop-axis { color: var(--acid); }

/* Die Kopfzeile trägt einen fest notierten hellen Grund. */
[data-theme="dark"] .doc-head { background: rgba(14,26,21,.94); }

/* ─────────────────────────────────────────────────────────────
   Der Projektfaden. Seine Ringe, Kästchen und Ränder waren mit
   dunkler Tinte fest notiert, deshalb verschwanden sie im dunklen
   Thema restlos: die Konstellation stand ohne ihre Kreise da.
   Jede Fläche bekommt hier ihr helles Gegenstück.
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .project-map {
  border-color: rgba(233,239,233,.14);
  background:
    radial-gradient(circle at center, rgba(214,255,63,.10) 0 16%, transparent 16.5%),
    radial-gradient(circle at center, transparent 0 42%, rgba(233,239,233,.10) 42.5% 43%, transparent 43.5%);
}
[data-theme="dark"] .map-core {
  background: #071510;
  box-shadow: 0 0 0 1px rgba(214,255,63,.34);
}
[data-theme="dark"] .map-node {
  background: var(--panel-bright);
  border-color: rgba(233,239,233,.15);
}
[data-theme="dark"] .map-node span,
[data-theme="dark"] .map-label,
[data-theme="dark"] .map-note { color: var(--muted); }
[data-theme="dark"] .map-lines line { stroke: #7d8d84; }

/* Dieselbe Ursache wie beim Projektfaden: Rahmen und Fuellungen mit dunkler
   Tinte fest notiert. Im dunklen Thema stehen die Farbfelder, die Bildrahmen
   und die Schlussflaeche ohne Kante da. Gemessen: 1.37 hell gegen 1.02
   dunkel, also praktisch nicht vorhanden. */
[data-theme="dark"] .swatches div { border-color: rgba(233,239,233,.16); }
[data-theme="dark"] .closing-loop { border-color: rgba(233,239,233,.16); }
[data-theme="dark"] .hero-thesis { background: rgba(233,239,233,.05); }
[data-theme="dark"] .intervention-preview figure { border-top-color: rgba(233,239,233,.18); }

/* ─────────────────────────────────────────────────────────────
   Die dunklen Abschnitte. Im hellen Entwurf sind sie fast schwarze
   Flaechen auf Papier und geben der Seite ihren Wechsel. Im dunklen
   Thema lagen sie auf dem Grund auf, gemessen 1.05 bis 1.10, also
   praktisch verschwunden. Eine Flaeche behaelt hier ihre Rolle und
   kehrt nur die Richtung um: heller als der Grund statt dunkler.
   Zwei Stufen, in beiden Themen dieselbe Ordnung.
   Grund #0e1a15 -> Flaeche #232f2a (1.28) -> Karte #313d38 (1.23).
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] { --panel-dark: #232f2a; }
[data-theme="dark"] .num,
[data-theme="dark"] .closing-loop,
[data-theme="dark"] .loop-image,
[data-theme="dark"] .anchor img { background: #232f2a; }
[data-theme="dark"] .chapter.dark .num { background: #313d38; }