:root {
  --black: #050505;
  --white: #f3f3ef;
  --muted: #9a9a94;
  --line: rgba(243,243,239,.18);
  --yellow: #feed00;
  --pad: clamp(24px, 4vw, 72px);
  --max: 1680px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin:0; background:var(--black); color:var(--white); font-family:Roboto, Arial, sans-serif; font-weight:300; }
a { color:inherit; text-decoration:none; }
.site-header { position:fixed; inset:0 0 auto 0; z-index:20; display:flex; justify-content:space-between; align-items:center; min-height:92px; padding:18px var(--pad); color:var(--black); background:rgba(243,243,239,.78); border-bottom:1px solid rgba(5,5,5,.10); -webkit-backdrop-filter:blur(18px) saturate(115%); backdrop-filter:blur(18px) saturate(115%); }
.brand img { display:block; width:74px; height:auto; }
.top-nav { display:flex; gap:clamp(18px,2.2vw,38px); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.top-nav a { opacity:.52; transition:opacity .25s ease; }
.top-nav a:hover,.top-nav a.is-current { opacity:1; }
main,.site-footer { max-width:var(--max); margin:0 auto; }
.intro { min-height:100svh; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:160px var(--pad) 70px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 28px; color:var(--yellow); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(84px,16vw,270px); line-height:.74; letter-spacing:-.075em; font-weight:300; }
.intro-copy { width:min(590px,80vw); margin:48px 0 0 auto; font-size:clamp(20px,2.2vw,38px); line-height:1.12; letter-spacing:-.025em; }
.index-number { position:absolute; left:var(--pad); bottom:74px; font-size:11px; letter-spacing:.16em; color:var(--muted); }
.chapter { padding:90px var(--pad) 130px; border-bottom:1px solid var(--line); }
.chapter-meta,.chapter-copy { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.chapter-meta { margin-bottom:22px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.chapter-visual { position:relative; display:block; height:min(70vw,820px); min-height:480px; overflow:hidden; border:1px solid var(--line); }
.chapter-copy { margin-top:28px; }
.chapter-copy h2 { margin:0 0 8px; font-weight:300; font-size:clamp(38px,5.5vw,96px); line-height:.95; letter-spacing:-.05em; }
.chapter-copy p { margin:0; color:var(--muted); font-size:15px; }
.text-link { margin-top:12px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.text-link span,.detail-links span { display:inline-block; transition:transform .25s ease; }
.text-link:hover span,.detail-links a:hover span { transform:translate(4px,-4px); }
.chapter--plastic .chapter-visual { background:var(--yellow); color:var(--black); }
.visual-word { position:absolute; font-size:clamp(82px,18vw,300px); line-height:.72; letter-spacing:-.09em; font-weight:400; }
.visual-word--one { left:-.03em; top:.08em; }
.visual-word--two { right:.03em; bottom:.02em; }
.visual-mark { position:absolute; left:50%; top:50%; width:18px; height:18px; border:1px solid currentColor; transform:translate(-50%,-50%); }
.chapter--electronic .chapter-visual { background:#0a0a0a; }
.signal-lines { position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 4.8%,rgba(243,243,239,.16) 4.85% 5%,transparent 5.05% 9.8%); transform:perspective(700px) rotateX(58deg) scale(1.35); transform-origin:center 66%; }
.signal-lines::after { content:""; position:absolute; inset:10% 0; background:linear-gradient(90deg,transparent,rgba(243,243,239,.85),transparent); clip-path:polygon(0 52%,8% 49%,15% 57%,23% 31%,31% 68%,42% 44%,51% 53%,61% 24%,70% 76%,81% 43%,91% 55%,100% 48%,100% 52%,91% 58%,81% 47%,70% 80%,61% 28%,51% 57%,42% 48%,31% 72%,23% 35%,15% 61%,8% 53%,0 56%); }
.chapter--wuppertal .chapter-visual { background:#e8e8e2; color:#050505; }
.research-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,0,0,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.14) 1px,transparent 1px); background-size:8.333% 12.5%; }
.research-grid::before { content:""; position:absolute; left:16.66%; top:12.5%; width:50%; height:62.5%; border:1px solid #050505; }
.research-grid::after { content:"02"; position:absolute; right:4%; bottom:1%; font-size:clamp(120px,26vw,420px); line-height:.8; letter-spacing:-.09em; }
.visual-caption { position:absolute; left:24px; bottom:22px; z-index:2; font-size:10px; letter-spacing:.16em; }
.detail { display:grid; grid-template-columns:minmax(240px,.8fr) 1.4fr; gap:8vw; padding:150px var(--pad); border-bottom:1px solid var(--line); }
.detail-head p { margin:0 0 32px; color:var(--yellow); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.detail-head h3 { margin:0; font-weight:300; font-size:clamp(38px,5vw,82px); line-height:.98; letter-spacing:-.045em; }
.detail-body { padding-top:46px; }
.detail-body>p { margin:0; max-width:760px; font-size:clamp(18px,2vw,29px); line-height:1.35; color:#cdcdc8; }

.tidal-embed { margin-top:70px; width:min(500px,100%); border-top:1px solid var(--line); padding-top:20px; }
.tidal-embed iframe { display:block; width:100%; max-width:500px; height:275px; border:0; }

.detail-links { display:flex; flex-wrap:wrap; gap:28px 48px; margin-top:70px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.case-row { margin-top:70px; display:grid; grid-template-columns:.6fr 1fr 1fr; gap:20px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:12px; }
.case-row span { color:var(--muted); }
.site-footer { min-height:58vh; display:grid; grid-template-columns:1fr 1fr 1fr; align-content:end; gap:30px; padding:100px var(--pad) 50px; }
.footer-brand { font-size:clamp(34px,5vw,78px); letter-spacing:-.05em; }
.footer-nav { display:flex; flex-direction:column; gap:10px; font-size:13px; }
.site-footer p { margin:0; text-align:right; color:var(--muted); font-size:12px; }
.chapter-visual::after { content:""; position:absolute; inset:0; border:1px solid transparent; transition:inset .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease; }
.chapter-visual:hover::after { inset:12px; border-color:currentColor; }
@media (pointer:fine) {
  body,a { cursor:none; }
  .custom-cursor { position:fixed; left:0; top:0; width:34px; height:34px; z-index:100; pointer-events:none; opacity:0; will-change:transform; }
  .custom-cursor::before { content:""; position:absolute; inset:8px; border:1px solid #fff; border-radius:50%; transition:transform .28s cubic-bezier(.2,.7,.2,1),border-radius .28s ease; }
  .custom-cursor span { position:absolute; left:50%; top:50%; width:2.5px; height:2.5px; margin:-1.25px; border-radius:50%; background:#fff; }
  .custom-cursor.is-visible { opacity:1; }
  .custom-cursor.is-link::before { transform:scale(1.18); border-radius:2px; }
}
@media (max-width:760px) {
  .tidal-embed iframe { height:275px; }
  .site-header { min-height:76px; padding-top:16px; padding-bottom:16px; }
  .brand img { width:58px; }
  .top-nav a:not(.is-current):not(:last-child) { display:none; }
  .intro { padding-bottom:42px; }
  h1 { font-size:clamp(74px,27vw,145px); }
  .intro-copy { margin:34px 0 0; width:92%; }
  .index-number { display:none; }
  .chapter { padding-top:60px; padding-bottom:90px; }
  .chapter-visual { min-height:420px; height:118vw; }
  .chapter-copy { flex-direction:column; }
  .detail { grid-template-columns:1fr; gap:30px; padding-top:100px; padding-bottom:100px; }
  .detail-body { padding-top:0; }
  .case-row { grid-template-columns:1fr; }
  .site-footer { grid-template-columns:1fr; min-height:70vh; }
  .site-footer p { text-align:left; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }