/* Moiré — Wettbewerbsbeitrag
   Tokens */
:root{
  --paper:      #EDEEE6;
  --paper-2:    #E3E5D9;
  --ink:        #16181B;
  --ink-soft:   #4C5047;
  --line:       #B7BEAA;
  --signal:     #D6401F;
  --signal-tint:#F5DED4;

  --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --measure: 40rem;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ background:var(--paper); }

body{
  margin:0;
  background:var(--paper);
  background-image:
    repeating-linear-gradient(to right, rgba(22,24,27,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, rgba(22,24,27,.05) 0 1px, transparent 1px 28px);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--ink); text-decoration-color:var(--signal); text-decoration-thickness:1.5px; text-underline-offset:3px; }
a:hover{ color:var(--signal); }
code{ font-family:var(--font-mono); font-size:.9em; background:var(--paper-2); padding:.1em .35em; border-radius:2px; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Masthead ---------- */

.masthead{
  max-width:52rem;
  margin:0 auto;
  padding: clamp(2.5rem,6vw,5rem) 1.5rem 2rem;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 1rem;
}

h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.6rem, 8vw, 4.6rem);
  line-height:.98;
  margin:0 0 .6rem;
  letter-spacing:-.01em;
}

.h1-sub{
  display:block;
  font-family:var(--font-body);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.5rem);
  color:var(--ink-soft);
  margin-top:.5rem;
  letter-spacing:0;
}

.lead{
  max-width:34rem;
  font-size:1.08rem;
  color:var(--ink-soft);
  margin:1.4rem 0 0;
}

/* ---------- Instrument ---------- */

.instrument{
  max-width:52rem;
  margin: 1rem auto 0;
  padding: 0 1.5rem 2rem;
}

.rack{ border:0; padding:0; margin:0; position:relative; }

.rack input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.stage{
  position:relative;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line);
}

.grating{
  position:absolute;
  inset:-55%;
  background-image: repeating-linear-gradient(to right, var(--ink) 0 3px, transparent 3px 13px);
  mix-blend-mode:multiply;
  transition: transform .55s cubic-bezier(.22,.7,.2,1);
}

.grating-a{ transform:rotate(0deg); }
.grating-b{ transform:rotate(4deg); }

.instrument:has(#a0:checked)  .grating-b{ transform:rotate(0deg); }
.instrument:has(#a1:checked)  .grating-b{ transform:rotate(1deg); }
.instrument:has(#a2:checked)  .grating-b{ transform:rotate(2deg); }
.instrument:has(#a4:checked)  .grating-b{ transform:rotate(4deg); }
.instrument:has(#a8:checked)  .grating-b{ transform:rotate(8deg); }
.instrument:has(#a16:checked) .grating-b{ transform:rotate(16deg); }

.segmented{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.9rem;
}

.segmented label{
  font-family:var(--font-mono);
  font-size:.85rem;
  padding:.5rem .9rem;
  min-width:2.75rem;
  text-align:center;
  border:1px solid var(--line);
  color:var(--ink-soft);
  cursor:pointer;
  user-select:none;
  transition:background-color .15s, border-color .15s, color .15s;
}

.segmented label:hover{ border-color:var(--ink-soft); color:var(--ink); }

.instrument:has(#a0:checked)  label[for="a0"],
.instrument:has(#a1:checked)  label[for="a1"],
.instrument:has(#a2:checked)  label[for="a2"],
.instrument:has(#a4:checked)  label[for="a4"],
.instrument:has(#a8:checked)  label[for="a8"],
.instrument:has(#a16:checked) label[for="a16"]{
  background:var(--signal-tint);
  border-color:var(--signal);
  color:var(--ink);
}

.instrument:has(#a0:focus-visible)  label[for="a0"],
.instrument:has(#a1:focus-visible)  label[for="a1"],
.instrument:has(#a2:focus-visible)  label[for="a2"],
.instrument:has(#a4:focus-visible)  label[for="a4"],
.instrument:has(#a8:focus-visible)  label[for="a8"],
.instrument:has(#a16:focus-visible) label[for="a16"]{
  outline:2px solid var(--signal);
  outline-offset:2px;
}

.readout{
  margin-top:.85rem;
  font-family:var(--font-mono);
  font-size:.92rem;
  min-height:1.4em;
}

.readout p{ display:none; margin:0; }
.instrument:has(#a0:checked)  .readout p[data-for="a0"],
.instrument:has(#a1:checked)  .readout p[data-for="a1"],
.instrument:has(#a2:checked)  .readout p[data-for="a2"],
.instrument:has(#a4:checked)  .readout p[data-for="a4"],
.instrument:has(#a8:checked)  .readout p[data-for="a8"],
.instrument:has(#a16:checked) .readout p[data-for="a16"]{
  display:block;
}

.caption{
  margin-top:1rem;
  font-size:.88rem;
  color:var(--ink-soft);
  max-width:36rem;
}

/* ---------- Body sections ---------- */

main{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 1.5rem;
}

.block{
  padding: 2.6rem 0;
  border-top:1px solid var(--line);
}

.block h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.7rem;
  margin:.2rem 0 1rem;
}

.block p{ margin:0 0 1rem; }
.block p:last-child{ margin-bottom:0; }

.formula{
  font-family:var(--font-mono);
  font-size:1.25rem;
  padding:1rem 1.1rem;
  background:var(--paper-2);
  border-left:3px solid var(--signal);
  margin:1.2rem 0;
}

.formula var{ font-style:italic; font-weight:500; }

.footnote{
  margin-top:1.4rem;
  font-size:.88rem;
  color:var(--ink-soft);
  border-top:1px dashed var(--line);
  padding-top:1rem;
}

/* small static swatches inside the Mechanik section */

.swatch-row{
  display:flex;
  gap:.9rem;
  margin: 1.1rem 0;
}

.swatch{
  position:relative;
  width:6.5rem;
  height:6.5rem;
  overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line);
  flex:0 0 auto;
}

.swatch-grating{ position:absolute; inset:-55%; }
.swatch-a{ transform:rotate(0deg); }
.swatch-b0{ transform:rotate(0deg); }
.swatch-b-angled{ transform:rotate(9deg); }

/* Anwendung: list with tiny grating markers instead of icons */

.cases{
  list-style:none;
  margin:1.2rem 0 0;
  padding:0;
  display:grid;
  gap:1.1rem;
}

.cases li{
  display:grid;
  grid-template-columns:2.75rem 1fr;
  gap:.9rem;
  align-items:start;
}

.case-swatch{
  position:relative;
  display:block;
  width:2.75rem;
  height:2.75rem;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper-2);
  margin-top:.15rem;
}

.case-a{ position:absolute; inset:-55%; transform:rotate(0deg); }
.case-b{ position:absolute; inset:-55%; transform:rotate(7deg); }

.cases p{ margin:0; }

/* ---------- Rechenschaftsbericht ---------- */

.statement{
  max-width:var(--measure);
  margin: 1rem auto 0;
  padding: 2.6rem 1.5rem 1rem;
  border-top:1px solid var(--line);
}

.statement-grid{
  display:grid;
  gap:1.6rem;
  grid-template-columns:repeat(3, 1fr);
  margin-top:1.1rem;
}

.statement h3{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink-soft);
  margin:0 0 .5rem;
}

.statement p{
  font-size:.94rem;
  margin:0;
}

@media (max-width: 40rem){
  .statement-grid{ grid-template-columns:1fr; }
}

/* ---------- Footer ---------- */

.colophon{
  max-width:var(--measure);
  margin:0 auto;
  padding: 1.6rem 1.5rem 3rem;
  font-size:.82rem;
  color:var(--ink-soft);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  .grating{ transition:none; }
  .segmented label{ transition:none; }
}

/* ---------- Small screens ---------- */

@media (max-width: 26rem){
  .stage{ aspect-ratio: 4 / 5; }
  .segmented label{ flex:1 1 auto; }
}