:root{
  --bg:#121011; --bg2:#1b1817; --bg3:#211d1a;
  --ink:#ece4d3; --ink-dim:#a89c88; --ink-faint:#6a5f50;
  --blood:#c81e34; --blood-dim:#7c1522; --blood-text:#e5455d;
  --mustard:#c99a3c;
  --line:rgba(236,228,211,0.14);
  --paper:#e6ddce;
  --font-mark:'Permanent Marker', cursive;
  --font-head:'Archivo Black', 'Arial Black', sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
a{color:var(--mustard);}
a:hover{color:var(--blood-text);}

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto; background:var(--ink); color:var(--bg);
  padding:0.8rem 1.2rem; z-index:100; font-weight:700; text-decoration:none;
}
.skip-link:focus{ left:1rem; top:1rem; }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
video:focus-visible, audio:focus-visible{
  outline:3px solid var(--mustard); outline-offset:2px;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}
img,video,audio{max-width:100%; height:auto; display:block;}

/* ---------- Scroll progress ---------- */
#progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--blood-dim),var(--blood),var(--mustard));
  z-index:50; transition:width 0.08s linear;
}

/* ---------- Hero ---------- */
.hero{
  background: rgba(230, 221, 206, 0.6);
  padding:2.4rem 1.2rem 1.8rem; text-align:center;
  overflow:hidden; position:relative;
}
.hero-imgwrap{ max-width:640px; margin:0 auto; }
.hero-imgwrap img{
  width:100%; margin:0 auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,0.25));
  will-change:transform;
}
.hero p{ max-width:520px; margin:1.1rem auto 0; color:#2a2521; font-size:0.98rem; letter-spacing:0.01em; }
.hero .scrollcue{
  display:inline-block; margin-top:1.3rem; font-family:var(--font-mark);
  color:var(--blood-dim); font-size:1.05rem; transform:rotate(-1.5deg);
}

/* ---------- Reveal-on-scroll (shared) ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal, .card{ opacity:1; transform:none; transition:none; }
  #progress{ transition:none; }
}

/* ---------- Project cards (flyer treatment) ---------- */
main{max-width:820px; margin:0 auto; padding:3rem 1.1rem 1rem;}
.card{
  --tilt:0.3deg;
  position:relative; background:var(--bg2); border:1px solid var(--line);
  padding:2rem 1.9rem; margin:0 0 3.6rem; max-width:100%;
  opacity:0; transform:rotate(var(--tilt)) translateY(30px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.card:nth-of-type(even){ --tilt:-0.3deg; }
.card.is-visible{ opacity:1; transform:rotate(var(--tilt)) translateY(0); }
.card::before{
  content:""; position:absolute; top:-10px; left:28px; width:64px; height:20px;
  background:rgba(230,221,206,0.85); transform:rotate(-3deg); box-shadow:0 2px 4px rgba(0,0,0,0.35);
}
.card:hover{ box-shadow:0 10px 30px rgba(0,0,0,0.35); }
.card h2{
  font-family:var(--font-head); color:var(--blood-text); font-size:clamp(1.5rem,4vw,2rem);
  line-height:1.15; margin:0.2rem 0 0.3rem; letter-spacing:-0.01em;
}
.card h3.sub{ font-family:var(--font-mark); color:var(--ink-dim); font-weight:400; font-size:1.05rem; margin:0 0 1.1rem; }
.card p{ margin:0 0 1rem; max-width:66ch; color:var(--ink); }
.card p:last-of-type{ margin-bottom:0; }
.card .links{ margin-top:1.3rem; display:flex; flex-wrap:wrap; gap:0.7rem; }
.btn{
  display:inline-block; font-family:var(--font-body); font-weight:600; color:var(--bg);
  background:var(--ink); padding:0.6rem 1.05rem; text-decoration:none; border:1px solid var(--ink);
  transition:background 0.2s ease, color 0.2s ease;
}
.btn:hover{ background:var(--blood); border-color:var(--blood); color:var(--ink); }
.btn.alt{ background:transparent; color:var(--ink); }
.btn.alt:hover{ background:var(--ink); color:var(--bg); }

.readout{
  font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size:0.86rem;
  background:var(--bg3); border:1px solid var(--line); padding:0.9rem 1rem; margin:1rem 0 1.2rem;
  color:var(--ink-dim); display:grid; grid-template-columns:auto 1fr; gap:0.25rem 1rem; overflow-x:auto;
}
.readout span.k{ color:var(--mustard); }

/* ---------- Museum gallery (Old Work) ---------- */
.museum{ max-width:none; margin:6rem 0 0; padding:0; }
.museum-intro{ max-width:640px; margin:0 auto 5rem; padding:0 1.3rem; text-align:center; }
.museum-intro h2{
  font-family:var(--font-head); color:var(--blood-text); font-size:clamp(1.8rem,5vw,2.6rem);
  margin:0 0 0.4rem;
}
.museum-intro h3.sub{ font-family:var(--font-mark); color:var(--ink-dim); font-weight:400; font-size:1.1rem; margin:0 0 1.2rem; }
.museum-intro p{ color:var(--ink-dim); max-width:56ch; margin:0 auto; }

.plate{ margin:0 auto 9vh; padding:0 1.3rem; }
.plate figure{ margin:0; }
.plate .frame{
  border:1px solid var(--line); background:#000; overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,0.4); transition:transform 0.4s ease, box-shadow 0.4s ease;
}
.plate .frame:hover{ transform:scale(1.012); box-shadow:0 18px 50px rgba(0,0,0,0.5); }
.plate .frame img,.plate .frame video{ width:100%; display:block; }
.plate figcaption{
  margin-top:0.7rem; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-faint);
}
.plate.variant-center{ max-width:600px; }
.plate.variant-left{ max-width:720px; margin-right:auto; margin-left:1.3rem; }
.plate.variant-right{ max-width:720px; margin-left:auto; margin-right:1.3rem; text-align:right; }
.plate.variant-right figcaption{ text-align:right; }
.plate.variant-wide{ max-width:900px; }
@media(min-width:900px){
  .plate.variant-left{ margin-left:max(1.3rem, calc(50% - 560px)); }
  .plate.variant-right{ margin-right:max(1.3rem, calc(50% - 560px)); }
}
.plate audio{ width:100%; }

.divider{
  max-width:600px; margin:2vh auto 9vh; text-align:center; color:var(--ink-faint);
  font-family:var(--font-mark); letter-spacing:0.2em; font-size:0.95rem;
}

.missing-file{ opacity:0.3; }

footer{ border-top:1px solid var(--line); margin-top:4rem; padding:2.6rem 1.1rem 3rem; text-align:center; }
footer .mark{ font-family:var(--font-mark); color:var(--blood-text); font-size:1.6rem; }
footer p{ color:var(--ink-dim); font-size:0.88rem; max-width:480px; margin:0.8rem auto 0; }
footer .fineprint{ margin-top:1.6rem; font-size:0.76rem; color:#5f574a; }