:root{
  --ink:#171717; --paper:#f3eee4; --red:#a43b2f; --gold:#c89b4a;
  --blue:#324e68; --muted:#706b63; --white:#fffaf0;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Georgia,serif;background:var(--paper);color:var(--ink)}
body{overflow-x:hidden}
button{font:inherit}
.app{min-height:100vh;position:relative}
header{
  padding:18px 24px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:2px solid var(--ink);background:rgba(243,238,228,.92);position:sticky;top:0;z-index:10
}
.brand{font-weight:bold;letter-spacing:.12em;font-size:.85rem}
.ods{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}
main{max-width:1180px;margin:auto;padding:30px 20px 70px}
.screen{display:none;animation:fade .45s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero{min-height:72vh;display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
h1{font-size:clamp(3.5rem,9vw,8rem);line-height:.78;margin:0 0 22px;text-transform:uppercase;letter-spacing:-.06em}
h2{font-size:clamp(2rem,5vw,4rem);line-height:.9;margin:10px 0 18px}
h3{font-size:1.5rem;margin:0 0 10px}
.kicker{font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--red);font-weight:bold}
.lead{font-size:1.25rem;line-height:1.5;max-width:600px}
.note{color:var(--muted);font-size:.95rem;line-height:1.5}
.btn{
  border:2px solid var(--ink);background:var(--ink);color:var(--paper);padding:13px 20px;
  cursor:pointer;text-transform:uppercase;letter-spacing:.08em;font:bold .75rem Arial,sans-serif;
  transition:.2s;margin:6px 6px 6px 0
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--red)}
.btn.alt{background:transparent;color:var(--ink)}
.art{
  min-height:430px;border:2px solid var(--ink);position:relative;overflow:hidden;background:#e7dfd0;
  box-shadow:12px 12px 0 var(--ink)
}
.art:before,.art:after{content:"";position:absolute;border-radius:50%;filter:blur(1px)}
.art:before{width:290px;height:290px;background:var(--red);right:-50px;top:30px;mix-blend-mode:multiply}
.art:after{width:240px;height:240px;background:var(--gold);left:30px;bottom:-90px;mix-blend-mode:multiply}
.line{position:absolute;background:var(--ink);height:3px;width:120%;left:-10%;transform:rotate(-17deg);top:48%}
.word{position:absolute;font:bold 5rem Arial,sans-serif;letter-spacing:-.08em;opacity:.13;transform:rotate(-90deg);right:-40px;bottom:70px}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.card{border:1.5px solid var(--ink);padding:18px;background:rgba(255,250,240,.45)}
.card strong{display:block;font-family:Arial,sans-serif;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px}
.scenario{display:grid;grid-template-columns:1.15fr .85fr;gap:25px}
.scene{
  min-height:480px;border:2px solid var(--ink);background:#d8d0c2;position:relative;overflow:hidden;
}
.scene .street{position:absolute;left:0;right:0;bottom:0;height:32%;background:#343434;transform:skewY(-5deg);transform-origin:left}
.building{position:absolute;bottom:27%;width:18%;background:#eee4d2;border:2px solid var(--ink)}
.b1{height:47%;left:7%}.b2{height:62%;left:30%;background:#b9c0bb}.b3{height:38%;right:9%;background:#e2b77d}
.person{position:absolute;width:58px;height:125px;bottom:27%;left:53%;transition:.6s}
.head{width:42px;height:42px;border-radius:50%;background:#9a6d4e;border:2px solid var(--ink);margin:auto}
.body{width:50px;height:72px;background:var(--blue);border:2px solid var(--ink);margin:auto;border-radius:18px 18px 4px 4px}
.person2{left:70%;transform:scale(.8);filter:grayscale(.3)}
.bubble{position:absolute;left:14%;top:10%;max-width:65%;padding:14px;border:2px solid var(--ink);background:var(--white);font-style:italic}
.choices{display:grid;gap:10px;margin-top:15px}
.choice{
  padding:15px;border:2px solid var(--ink);background:transparent;text-align:left;cursor:pointer;
  transition:.2s;font-family:Arial,sans-serif
}
.choice:hover{background:var(--ink);color:var(--paper)}
.progress{height:10px;border:1px solid var(--ink);margin:12px 0 24px}
.progress span{display:block;height:100%;background:var(--red);width:33%;transition:.4s}
.final-art{
  min-height:410px;border:2px solid var(--ink);position:relative;overflow:hidden;background:#111;
  display:flex;align-items:center;justify-content:center
}
canvas{display:block;width:100%;height:100%}
.reflection{max-width:780px;margin:28px auto;font-size:1.35rem;line-height:1.55;text-align:center}
.tag{display:inline-block;border:1px solid var(--ink);padding:5px 8px;margin:3px;font:11px Arial,sans-serif;text-transform:uppercase}
footer{border-top:2px solid var(--ink);padding:18px 20px;display:flex;justify-content:space-between;font:11px Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:800px){
  .hero,.scenario{grid-template-columns:1fr}
  .hero{padding-top:20px}
  .info-grid{grid-template-columns:1fr}
  .art{min-height:320px}
  .scene{min-height:400px}
  header{padding:14px}
}