:root {
  --paper:#f5e7c7;
  --ink:#17120e;
  --red:#d4432f;
  --yellow:#f2b432;
  --blue:#1d5c7d;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Arial Narrow","Franklin Gothic Medium",Arial,sans-serif;
  overflow-x:hidden;
}
body:before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
  background-size:72px 72px,72px 72px;
  mix-blend-mode:multiply;
}
a { color:inherit }
.street-nav {
  position:fixed;
  z-index:20;
  top:18px;
  left:18px;
  right:18px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.street-nav a {
  padding:8px 12px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:0;
  transform:rotate(var(--r, -1deg));
}
.street-nav a:nth-child(2n) { --r:1.5deg; background:var(--red) }
.hero {
  min-height:96vh;
  position:relative;
  display:grid;
  place-items:center;
  padding:92px 28px 42px;
  overflow:hidden;
}
.hero img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.08) contrast(1.02);
}
.hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(245,231,199,.92), rgba(245,231,199,.56) 48%, rgba(245,231,199,.12));
}
.hero-copy {
  position:relative;
  z-index:2;
  width:min(980px,100%);
  margin-right:auto;
}
.label {
  margin:0 0 14px;
  display:inline-block;
  background:var(--yellow);
  padding:5px 9px;
  font-weight:900;
  text-transform:uppercase;
  font-size:13px;
}
h1,h2,h3,p { overflow-wrap:break-word }
h1 {
  margin:0;
  max-width:900px;
  font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;
  font-size:clamp(50px, 8vw, 112px);
  line-height:.9;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:0;
}
.hero-copy p:not(.label) {
  max-width:620px;
  font-size:22px;
  line-height:1.35;
  font-family:Georgia,serif;
}
.cta, button {
  display:inline-flex;
  border:0;
  background:var(--red);
  color:#fff;
  padding:15px 22px;
  min-height:48px;
  align-items:center;
  justify-content:center;
  font-weight:900;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
}
.ticket {
  position:absolute;
  z-index:3;
  right:24px;
  bottom:26px;
  max-width:280px;
  background:var(--blue);
  color:#fff;
  padding:14px 16px;
  font-weight:900;
  transform:rotate(2deg);
}
section { padding:78px clamp(18px,4vw,60px) }
.section-head { max-width:760px; margin-bottom:28px }
h2 {
  margin:0;
  font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;
  font-size:clamp(34px, 5.2vw, 68px);
  line-height:.98;
  text-transform:uppercase;
  font-weight:800;
}
.city-map {
  position:relative;
  min-height:520px;
  border:3px solid var(--ink);
  background:
    linear-gradient(90deg,rgba(245,231,199,.15),rgba(245,231,199,.72)),
    url("assets/hero.png") center 54% / cover no-repeat;
  overflow:hidden;
}
.city-map:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 48%,rgba(245,231,199,.05),rgba(23,18,14,.28));
  pointer-events:none;
}
.city-map button {
  position:absolute;
  left:var(--x);
  top:var(--y);
  background:#fff8df;
  color:var(--ink);
  border:2px solid var(--ink);
  transform:translate(-50%,-50%) rotate(-2deg);
  min-height:38px;
  padding:8px 12px;
}
.route-line {
  position:absolute;
  left:14%;
  top:49%;
  width:66%;
  border-top:5px dashed var(--red);
  transform:rotate(14deg);
  opacity:.9;
}
.fragments {
  display:grid;
  grid-template-columns:minmax(300px, .9fr) 1.1fr;
  gap:34px;
  align-items:start;
}
.photo-note {
  margin:0;
  background:#fff8df;
  padding:14px;
  box-shadow:12px 12px 0 var(--ink);
  transform:rotate(-1deg);
}
.photo-note img, .story-strip img { width:100%; display:block; aspect-ratio:4/5; object-fit:cover }
figcaption {
  margin-top:12px;
  font:18px/1.35 Georgia,serif;
}
.fragment-stack {
  display:grid;
  gap:18px;
}
.fragment-stack article {
  border:4px solid var(--ink);
  padding:20px;
  background:#fff4d2;
  display:grid;
  grid-template-columns:86px 1fr;
  gap:18px;
  align-items:center;
}
.fragment-stack span {
  font-family:Impact,sans-serif;
  font-size:54px;
  color:var(--red);
}
.fragment-stack h3 { margin:0; font-size:30px; text-transform:uppercase }
.fragment-stack p { margin:8px 0 0; font:19px/1.35 Georgia,serif }
.story-strip {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:36px;
  background:var(--ink);
  color:var(--paper);
}
.story-strip dl { display:grid; gap:14px; margin:24px 0 0 }
.story-strip div div, .story-strip dl div {
  border-top:2px solid rgba(245,231,199,.35);
  padding-top:14px;
}
dt { font-weight:900; text-transform:uppercase; color:var(--yellow) }
dd { margin:6px 0 0; font:19px/1.35 Georgia,serif }
.meeting {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:34px;
}
.meeting p { font:21px/1.4 Georgia,serif }
form {
  display:grid;
  gap:12px;
  border:5px solid var(--ink);
  padding:22px;
  background:#fff8df;
}
label {
  display:grid;
  gap:7px;
  font-weight:900;
  text-transform:uppercase;
}
input {
  width:100%;
  border:3px solid var(--ink);
  background:var(--paper);
  padding:14px;
  font:18px Georgia,serif;
}
address { grid-column:1/-1; font-style:normal; font-weight:900 }
@media (max-width:760px) {
  body { width:100%; overflow-x:hidden }
  .street-nav { position:absolute }
  .hero { min-height:auto; place-items:end start; padding-top:118px }
  .hero:after { background:linear-gradient(180deg, rgba(245,231,199,.35), rgba(245,231,199,.94) 58%) }
  .hero img { height:56%; bottom:auto }
  h1 { font-size:clamp(33px, 10.8vw, 44px); line-height:.98; padding-top:210px; overflow-wrap:anywhere }
  h2 { font-size:clamp(28px, 9vw, 39px); line-height:1.02; overflow-wrap:anywhere }
  .hero-copy p:not(.label) { font-size:18px }
  .cta, button { width:100%; text-align:center }
  .ticket { position:relative; right:auto; bottom:auto; margin-top:18px }
  .fragments,.story-strip,.meeting { grid-template-columns:1fr }
  .city-map { min-height:420px }
  .city-map button { transform:translate(0,-50%) rotate(-2deg); max-width:96px; padding:7px 8px; font-size:12px }
  .fragment-stack article { grid-template-columns:64px 1fr }
  .fragment-stack span { font-size:40px }
}