:root {
  --ink: #25231f;
  --paper: #e7d7b9;
  --cream: #f1e3c7;
  --olive: #8c9572;
  --olive-dark: #5f684e;
  --leaf: #384637;
  --rust: #a84f38;
  --mint: #a7d7ce;
  --concrete: #8d7a6e;
  --line: 3px solid var(--ink);
  --shadow: 9px 11px 0 rgba(37, 35, 31, .88);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--olive-dark); }
body {
  margin: 0;
  color: var(--ink);
  background: #b9b089;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  overflow-x: hidden;
}
button, a { font: inherit; }
a { color: inherit; }
::selection { background: var(--rust); color: var(--cream); }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .13;
  background-image:
    radial-gradient(circle at 15% 20%, #000 0 1px, transparent 1.4px),
    radial-gradient(circle at 82% 72%, #fff 0 1px, transparent 1.3px);
  background-size: 10px 11px, 13px 14px;
  mix-blend-mode: multiply;
}

.topbar {
  position: fixed;
  top: 20px;
  left: 50%;
  width: min(1640px, calc(100% - 72px));
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px 12px 12px;
  border: 2px solid rgba(37,35,31,.8);
  border-radius: 19px 16px 22px 14px;
  background: rgba(232,216,185,.83);
  backdrop-filter: blur(12px);
  box-shadow: 4px 5px 0 rgba(37,35,31,.25);
}
.mini-brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900; letter-spacing:-.02em; }
.mini-brand img { width:36px; height:36px; object-fit:contain; }
.topbar nav { display:flex; gap:9px; }
.topbar nav a {
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  letter-spacing:.06em;
  padding:9px 13px;
  border-radius:999px;
  transition: transform .18s ease, background .18s ease;
}
.topbar nav a:hover { background: rgba(37,35,31,.1); transform: translateY(-2px) rotate(-1deg); }

.hero {
  min-height: 1080px;
  height: 100vh;
  min-width: 1160px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--olive);
  border-bottom: var(--line);
}
.hero-bg {
  position:absolute;
  inset:-4%;
  z-index:-4;
  background-image: url('../assets/images/background/park-overlook.png');
  background-size: cover;
  background-position: center bottom;
  will-change: transform;
  filter: saturate(.92) contrast(.98);
}
.hero-haze {
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(90deg, rgba(102,111,82,.24), rgba(222,201,157,.02) 45%, rgba(54,63,48,.12)),
    radial-gradient(circle at 35% 38%, rgba(241,227,199,.28), transparent 33%);
}
.hero-copy {
  position:absolute;
  z-index:5;
  left: clamp(80px, 8vw, 165px);
  top: 170px;
  width: 760px;
  will-change: transform;
}
.kicker,.eyebrow { font-weight:900; letter-spacing:.14em; font-size:14px; }
.kicker { display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.kicker .dot { width:10px; height:10px; background:var(--rust); border:2px solid var(--ink); border-radius:50%; box-shadow:2px 2px 0 var(--ink); }
.hero h1 {
  margin:0;
  width:min-content;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(108px, 8.1vw, 156px);
  line-height:.76;
  letter-spacing:-.055em;
  text-transform:uppercase;
  text-shadow: 4px 4px 0 rgba(241,227,199,.6);
}
.hero h1 span,.hero h1 strong { display:block; font:inherit; }
.hero h1 strong { color:var(--rust); transform: translateX(-4px) rotate(-1deg); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; }
.hero-line { margin:32px 0 26px; max-width:560px; font-size:24px; line-height:1.25; font-weight:900; }
.hero-actions { display:flex; gap:14px; align-items:center; }
.sketch-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:175px;
  padding:15px 20px;
  text-decoration:none;
  color:var(--cream);
  border:3px solid var(--ink);
  border-radius:9px 14px 8px 15px;
  box-shadow:5px 6px 0 var(--ink);
  font-weight:900;
  letter-spacing:.03em;
  transition:transform .15s ease, box-shadow .15s ease;
}
.sketch-btn.dark { background:var(--leaf); }
.sketch-btn.rust { background:var(--rust); }
.sketch-btn:hover { transform:translate(-2px,-3px) rotate(-1deg); box-shadow:8px 9px 0 var(--ink); }
.sketch-btn:active { transform:translate(3px,4px); box-shadow:2px 2px 0 var(--ink); }

.ca-strip {
  margin-top:24px;
  width:640px;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:12px;
  padding:11px 11px 11px 17px;
  border:3px solid var(--ink);
  border-radius:14px 10px 16px 9px;
  background:rgba(241,227,199,.88);
  box-shadow:5px 6px 0 rgba(37,35,31,.78);
}
.ca-strip > div { min-width:0; display:flex; align-items:center; gap:13px; }
.ca-label { font-weight:900; background:var(--rust); color:var(--cream); padding:7px 9px; border:2px solid var(--ink); border-radius:7px 5px 8px 4px; }
.ca-strip code,.contract-code-wrap code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:Consolas,"Courier New",monospace; font-weight:800; }
.copy-btn {
  border:2px solid var(--ink);
  background:var(--paper);
  padding:11px 15px;
  font-weight:900;
  cursor:pointer;
  border-radius:8px 6px 10px 6px;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.copy-btn:hover { background:var(--mint); transform:translate(-1px,-2px); box-shadow:5px 5px 0 var(--ink); }
.copy-btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

.character-stage {
  position:absolute;
  z-index:4;
  right:clamp(90px, 8vw, 170px);
  bottom:22px;
  width:650px;
  height:900px;
  display:grid;
  place-items:end center;
  will-change:transform;
}
.hero-character {
  width:610px;
  height:auto;
  display:block;
  transform-origin:50% 85%;
  filter: drop-shadow(15px 18px 0 rgba(37,35,31,.24));
  animation: breathe 4.8s ease-in-out infinite;
  user-select:none;
}
.character-shadow {
  position:absolute;
  width:380px;
  height:52px;
  bottom:54px;
  border-radius:50%;
  background:rgba(34,33,29,.28);
  filter:blur(7px);
  z-index:-1;
  transform:rotate(-2deg);
}
.scribble {
  position:absolute;
  font-family:"Comic Sans MS","Trebuchet MS",sans-serif;
  font-weight:900;
  transform:rotate(-8deg);
  padding:7px 12px;
  border-bottom:3px solid var(--ink);
}
.scribble-one { top:168px; right:-40px; }
.thud-hotspot { position:absolute; inset:120px 50px 80px 50px; opacity:0; cursor:pointer; border:0; }
.stamp {
  position:absolute;
  top:390px;
  right:-45px;
  color:var(--rust);
  border:5px solid var(--rust);
  padding:9px 15px;
  font-family:Impact, sans-serif;
  font-size:48px;
  letter-spacing:.04em;
  transform:rotate(10deg) scale(.3);
  opacity:0;
  pointer-events:none;
}
.stamp.show { animation: stamp .65s cubic-bezier(.2,.9,.2,1) both; }
.corner-note {
  position:absolute;
  left:54px;
  bottom:44px;
  z-index:5;
  transform:rotate(-4deg);
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:4px 5px 0 var(--ink);
  padding:10px 14px;
  font-weight:900;
  font-size:20px;
}
.corner-note small { font-size:11px; letter-spacing:.06em; }
.scroll-note { position:absolute; right:50px; bottom:44px; z-index:5; text-align:center; font-size:11px; letter-spacing:.11em; font-weight:900; }
.scroll-note span { font-size:30px; display:block; animation:bob 1.5s ease-in-out infinite; }

.marquee { background:var(--rust); border-bottom:var(--line); border-top:var(--line); overflow:hidden; }
.marquee-track { width:max-content; display:flex; align-items:center; gap:26px; padding:16px 0; animation:marquee 26s linear infinite; font-weight:900; letter-spacing:.08em; color:var(--cream); }
.marquee-track i { font-style:normal; color:var(--ink); }

.spot {
  min-height:980px;
  padding:130px max(70px, calc((100vw - 1620px)/2));
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:100px;
  align-items:center;
  background:var(--paper);
  border-bottom:var(--line);
  position:relative;
}
.spot::before { content:""; position:absolute; inset:0; background:linear-gradient(transparent 97%,rgba(37,35,31,.08) 97%) 0 0/100% 43px; opacity:.16; pointer-events:none; }
.spot-image { position:relative; transform:rotate(-1.4deg); }
.spot-image img { width:100%; display:block; border:3px solid var(--ink); border-radius:10px 14px 8px 13px; box-shadow:var(--shadow); }
.photo-tag { position:absolute; right:-28px; bottom:-24px; background:var(--cream); border:2px solid var(--ink); padding:10px 14px; font-family:"Comic Sans MS",sans-serif; font-weight:900; transform:rotate(3deg); }
.spot-copy { max-width:590px; }
.eyebrow { color:var(--rust); margin-bottom:16px; }
.spot h2,.rules h2,.postcard h2,.hangout h2,.contract h2 { margin:0 0 24px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(54px,4.5vw,84px); line-height:.93; letter-spacing:-.05em; }
.spot-copy p,.postcard-copy p,.hangout-copy p { font-size:21px; line-height:1.5; max-width:650px; }
.hand-note { margin-top:34px; display:inline-block; background:#f0e2c8; border:2px solid var(--ink); padding:17px 21px; box-shadow:5px 6px 0 var(--ink); transform:rotate(-2deg); font-family:"Comic Sans MS",sans-serif; font-size:18px; font-weight:900; }

.rules {
  min-height:1040px;
  position:relative;
  overflow:hidden;
  padding:125px max(70px, calc((100vw - 1620px)/2)) 130px;
  background:var(--olive-dark);
  color:var(--cream);
  border-bottom:var(--line);
}
.rules::after { content:""; position:absolute; inset:auto -10% -35% auto; width:900px; height:900px; border:3px solid rgba(241,227,199,.16); border-radius:50%; box-shadow:0 0 0 70px rgba(241,227,199,.03),0 0 0 150px rgba(241,227,199,.02); }
.rules .eyebrow { color:#d88a6c; }
.rules-head { max-width:820px; }
.rule-row { position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:80px; padding-right:250px; }
.rule-card { min-height:340px; padding:32px 30px; background:var(--cream); color:var(--ink); border:3px solid var(--ink); box-shadow:8px 9px 0 #25231f; border-radius:17px 10px 15px 12px; transform:rotate(-1deg); transition:transform .18s ease; transform-style:preserve-3d; }
.rule-card:nth-child(2) { transform:rotate(1.2deg) translateY(18px); background:#d9ceb1; }
.rule-card:nth-child(3) { transform:rotate(-.6deg) translateY(-9px); background:#cabf9f; }
.rule-number { display:inline-grid; place-items:center; width:50px; height:50px; border:2px solid var(--ink); border-radius:50%; background:var(--rust); color:var(--cream); font-weight:900; }
.rule-card h3 { font-family:Georgia,serif; font-size:37px; line-height:1; margin:26px 0 18px; letter-spacing:-.04em; }
.rule-card p { font-size:17px; line-height:1.5; }
.rule-character { position:absolute; z-index:4; right:-60px; bottom:-95px; width:520px; filter:drop-shadow(16px 17px 0 rgba(31,30,27,.5)); transform:rotate(3deg); }

.postcard { padding:130px max(70px, calc((100vw - 1620px)/2)); background:#c6bea0; border-bottom:var(--line); }
.postcard-inner { min-height:690px; display:grid; grid-template-columns:.84fr 1.16fr; background:var(--cream); border:3px solid var(--ink); box-shadow:14px 16px 0 rgba(37,35,31,.85); transform:rotate(.5deg); overflow:hidden; }
.postcard-copy { padding:70px 60px; position:relative; background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(37,35,31,.08) 39px 40px); }
.postcard-copy p { max-width:520px; }
.postmark { display:inline-block; margin-top:40px; padding:12px 16px; border:3px double var(--ink); border-radius:50%; font-size:13px; font-weight:900; letter-spacing:.08em; transform:rotate(-9deg); }
.postcard-art { position:relative; overflow:hidden; border-left:3px solid var(--ink); }
.postcard-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:57% 50%; filter:saturate(.9); }
.postcard-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(241,227,199,.18),transparent 35%); }
.postcard-guy { position:absolute; z-index:2; right:4%; bottom:-12%; width:56%; filter:drop-shadow(12px 13px 0 rgba(37,35,31,.26)); }

.hangout {
  min-height:940px;
  padding:120px max(70px, calc((100vw - 1620px)/2));
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:100px;
  align-items:center;
  background:var(--paper);
  border-bottom:var(--line);
}
.hangout-copy p span { font-weight:900; }
.big-links { margin-top:46px; display:grid; gap:14px; max-width:680px; }
.paper-link { display:grid; grid-template-columns:60px 1fr 50px; align-items:center; text-decoration:none; padding:20px 22px; border:3px solid var(--ink); background:var(--cream); box-shadow:6px 7px 0 var(--ink); border-radius:12px 9px 14px 8px; transition:transform .16s ease, background .16s ease; }
.paper-link small { font-weight:900; color:var(--rust); }
.paper-link strong { font-size:26px; }
.paper-link > span { font-size:32px; justify-self:end; }
.paper-link:hover { transform:translate(-3px,-3px) rotate(-.5deg); background:#d8ddbd; }
.hangout-portrait { justify-self:center; }
.portrait-frame { width:470px; height:590px; display:grid; place-items:end center; overflow:hidden; background:var(--olive); border:3px solid var(--ink); border-radius:46% 46% 12px 12px/34% 34% 12px 12px; box-shadow:var(--shadow); }
.portrait-frame img { width:430px; transform:translateY(42px) scale(1.05); filter:drop-shadow(10px 10px 0 rgba(37,35,31,.24)); }
.tiny-caption { margin-top:20px; background:var(--mint); border:2px solid var(--ink); padding:9px 12px; font-family:"Comic Sans MS",sans-serif; font-weight:900; transform:rotate(2deg); text-align:center; box-shadow:3px 4px 0 var(--ink); }

.contract { padding:130px max(70px, calc((100vw - 1620px)/2)) 150px; background:var(--leaf); color:var(--cream); }
.contract-panel { background:var(--rust); border:3px solid var(--ink); box-shadow:13px 15px 0 #1f211d; padding:70px; border-radius:18px 12px 22px 10px; }
.contract .eyebrow { color:#f1d8a9; }
.contract h2 { font-size:90px; }
.contract-code-wrap { display:flex; align-items:stretch; gap:14px; margin-top:45px; }
.contract-code-wrap code { flex:1; min-width:0; display:flex; align-items:center; padding:22px 24px; background:var(--cream); color:var(--ink); border:3px solid var(--ink); border-radius:11px; font-size:19px; box-shadow:5px 6px 0 var(--ink); }
.copy-btn.large { min-width:170px; background:var(--mint); font-size:17px; }
.contract-footer { margin-top:50px; padding-top:26px; border-top:2px dashed rgba(37,35,31,.7); display:flex; justify-content:space-between; gap:20px; font-weight:900; letter-spacing:.05em; }

.toast { position:fixed; left:50%; bottom:36px; z-index:100; transform:translate(-50%,30px) rotate(-2deg); opacity:0; pointer-events:none; background:var(--ink); color:var(--cream); border:2px solid var(--cream); padding:12px 20px; font-weight:900; letter-spacing:.08em; box-shadow:5px 6px 0 rgba(0,0,0,.25); transition:.22s ease; }
.toast.show { opacity:1; transform:translate(-50%,0) rotate(-2deg); }

.reveal { opacity:0; transform:translateY(35px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

@keyframes breathe { 0%,100%{transform:translateY(0) rotate(-.4deg)} 50%{transform:translateY(-12px) rotate(.5deg)} }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
@keyframes marquee { to{transform:translateX(-50%)} }
@keyframes stamp { 0%{opacity:0;transform:rotate(10deg) scale(.3)} 52%{opacity:1;transform:rotate(10deg) scale(1.18)} 75%{transform:rotate(8deg) scale(.96)} 100%{opacity:1;transform:rotate(9deg) scale(1)} }

@media (max-width: 1350px) {
  .hero-copy { left:70px; width:650px; }
  .character-stage { right:45px; width:560px; }
  .hero-character { width:540px; }
  .rule-row { padding-right:190px; }
  .rule-character { width:440px; right:-80px; }
  .spot,.hangout { gap:55px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}