/* SHIFTERS — wireframe primitives */
:root{
  --ink:#1a1a1a;
  --ink-soft:#444;
  --ink-faint:#8a8a8a;
  --paper:#f6f3ec;
  --paper-2:#efeadd;
  --line:#1a1a1a;
  --accent:#ffd84d; /* highlighter yellow */
  --accent-ink:#1a1a1a;
  --grid:rgba(0,0,0,.045);
}
html,body{background:#e9e4d6;margin:0;color:var(--ink);}
body{font-family:"Kalam","Patrick Hand",system-ui,sans-serif;}

/* ── sketch primitives ───────────────────────────── */
.sk-paper{
  background:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  color:var(--ink);
  position:relative;
  overflow:hidden;
}
.sk-paper::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow: inset 0 0 80px rgba(0,0,0,.06);
}

.hand{font-family:"Kalam","Patrick Hand",sans-serif;}
.script{font-family:"Caveat","Kalam",cursive;}
.mono{font-family:"Special Elite","Courier New",monospace; letter-spacing:.02em;}

.sk-h1{font-family:"Caveat",cursive;font-weight:700;line-height:.95;letter-spacing:-.01em;}
.sk-h2{font-family:"Caveat",cursive;font-weight:700;line-height:1;}
.sk-eyebrow{font-family:"Special Elite",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
.sk-body{font-family:"Patrick Hand",sans-serif;font-size:15px;line-height:1.35;color:var(--ink-soft);}
.sk-small{font-family:"Patrick Hand",sans-serif;font-size:12px;color:var(--ink-faint);}

/* hand-drawn box */
.sk-box{
  border:2px solid var(--line);
  border-radius: 14px 10px 16px 8px / 8px 16px 10px 14px;
  background:var(--paper);
  position:relative;
}
.sk-box.tilt-l{transform:rotate(-.4deg);}
.sk-box.tilt-r{transform:rotate(.4deg);}
.sk-box.thin{border-width:1.5px;}
.sk-box.dashed{border-style:dashed;}
.sk-box.filled{background:var(--paper-2);}
.sk-box.ink{background:var(--ink);color:var(--paper);}
.sk-box.accent{background:var(--accent);color:var(--accent-ink);}

.sk-hr{
  height:2px;background:var(--line);border-radius:2px;
  clip-path: polygon(0 30%, 4% 60%, 10% 30%, 16% 70%, 22% 30%, 28% 65%, 34% 35%, 40% 60%, 46% 30%, 52% 70%, 58% 35%, 64% 60%, 70% 30%, 76% 65%, 82% 35%, 88% 60%, 94% 30%, 100% 60%, 100% 100%, 0 100%);
}
.sk-divider{display:flex;align-items:center;gap:10px;color:var(--ink-faint);}
.sk-divider::before, .sk-divider::after{content:"";flex:1;height:1.5px;background:var(--ink);opacity:.7;border-radius:2px;}

/* image placeholder */
.sk-img{
  background:
    repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 9px),
    var(--paper-2);
  border:2px solid var(--line);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  font-family:"Special Elite",monospace;font-size:11px;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.1em;
  border-radius: 14px 10px 16px 8px / 8px 16px 10px 14px;
}
.sk-img span{background:var(--paper);padding:3px 8px;border:1.5px dashed var(--ink);}

/* button */
.sk-btn{
  display:inline-flex;align-items:center;gap:8px;
  border:2px solid var(--line);
  padding:8px 18px;
  border-radius: 99px;
  background:var(--paper);
  font-family:"Kalam",sans-serif;font-weight:700;font-size:15px;
  cursor:pointer;
  box-shadow: 3px 3px 0 0 var(--line);
  transition: transform .1s, box-shadow .1s;
}
.sk-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--line);}
.sk-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--line);}
.sk-btn.dark{background:var(--ink);color:var(--paper);}
.sk-btn.accent{background:var(--accent);}
.sk-btn.ghost{background:transparent;box-shadow:none;}

/* arrow scribble */
.sk-arrow{font-family:"Caveat",cursive;color:var(--ink);}

/* highlight underline */
.hl{
  background: linear-gradient(transparent 55%, var(--accent) 55% 92%, transparent 92%);
  padding:0 4px;
}
.hl-soft{
  background: linear-gradient(transparent 70%, var(--accent) 70% 92%, transparent 92%);
}

/* annotation post-it style */
.sk-note{
  background: #fff7c2;
  border:1.5px solid #d8c14a;
  padding:8px 10px;
  font-family:"Caveat",cursive;font-size:18px;line-height:1.05;
  color:#5a4400;
  box-shadow: 3px 4px 0 rgba(0,0,0,.08);
  border-radius: 8px 14px 6px 12px / 12px 8px 14px 6px;
  position:absolute;
  transform: rotate(-3deg);
  z-index: 5;
  pointer-events:none;
  max-width: 200px;
}
.sk-note.r{transform:rotate(2deg);}
.sk-note.r3{transform:rotate(3.5deg);}
.sk-note .arrow{
  position:absolute;font-family:"Caveat",cursive;font-size:22px;color:#5a4400;
}

/* tag / chip */
.sk-chip{
  display:inline-flex;align-items:center;gap:6px;
  border:1.5px solid var(--line);
  padding:2px 10px;border-radius:99px;
  font-family:"Patrick Hand",sans-serif;font-size:13px;
  background:var(--paper);
}
.sk-chip.dark{background:var(--ink);color:var(--paper);}
.sk-chip.accent{background:var(--accent);}

/* scribble check */
.sk-check::before{content:"✓";font-family:"Caveat";font-weight:700;color:var(--ink);margin-right:6px;}

/* wireframe page wrapper */
.wf{padding:0;}
.wf .section{padding:36px 48px;}

/* squiggle */
.sk-squiggle{
  height:8px;width:100%;
  background:
   radial-gradient(circle at 4px 4px, var(--line) 1.5px, transparent 2px) 0 0/14px 8px;
  opacity:.6;
}

/* dotted line */
.sk-dotted{border-top:2px dotted var(--line);}

/* event row */
.event-row{display:grid;grid-template-columns: 90px 1fr auto auto;gap:16px;align-items:center;padding:14px 16px;border-bottom:1.5px dashed var(--line);cursor:pointer;}
.event-row:hover{background:var(--paper-2);}
.event-row .date{font-family:"Caveat",cursive;font-size:28px;line-height:1;}
.event-row .name{font-family:"Kalam";font-weight:700;font-size:18px;}
.event-row .meta{font-family:"Patrick Hand";font-size:13px;color:var(--ink-soft);}
.event-row.open{background:var(--paper-2);}

/* modal */
.event-modal-backdrop{
  position:fixed;inset:0;background:rgba(20,18,10,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:24px;
}
.event-modal{
  background:var(--paper);
  border:2.5px solid var(--line);
  border-radius: 18px 14px 22px 12px / 12px 22px 14px 18px;
  width:min(720px, 100%);max-height:90vh;overflow:auto;
  box-shadow: 8px 10px 0 rgba(0,0,0,.18);
  position:relative;
}

/* labels with ruler ticks */
.ruler{
  position:relative;border-bottom:1.5px solid var(--line);height:14px;
}
.ruler::after{
  content:"";position:absolute;inset:auto 0 0 0;height:6px;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 16px 100%;
}

/* annotated arrow drawn with svg helper handled in JSX */
.no-anno .sk-note{display:none;}
.no-anno .anno{display:none;}

/* ── horizontal carousel (timeline + formats) ──────────────────── */
.sk-carousel{
  display:flex;gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:16px;
  padding:14px 16px 18px;
  scrollbar-width:thin;
  scrollbar-color: var(--ink) transparent;
}
.sk-carousel::-webkit-scrollbar{height:10px;}
.sk-carousel::-webkit-scrollbar-track{
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 6px);
  margin: 0 16px;
}
.sk-carousel::-webkit-scrollbar-thumb{
  background:var(--ink);border-radius:6px;border:2px solid var(--paper-2);
}
.sk-carousel > *{scroll-snap-align:start;flex:0 0 auto;}

/* timeline carousel card */
.tl-card{
  width:200px;
  border-left:2px dashed var(--line);
  padding:2px 14px 4px;
  text-decoration:none;
  color:inherit;
  display:block;
  transition: background .15s;
}
.tl-card:first-child{border-left:none;padding-left:6px;}
.tl-card:hover{ background: var(--paper); }
.tl-card:hover .tl-link{ color: var(--ink); transform: translate(1px,-1px); }
.tl-link{ color: var(--ink-faint); font-size:16px; transition: color .15s, transform .15s; }

/* format carousel card */
.fmt-card{
  width:230px;
  display:flex;flex-direction:column;
  border:2px solid var(--line);
  background:var(--paper);
  border-radius: 14px 10px 16px 8px / 8px 16px 10px 14px;
  overflow:hidden;
}
.fmt-card:nth-child(odd){transform:rotate(-.3deg);}
.fmt-card:nth-child(even){transform:rotate(.3deg);}

/* carousel nav arrows */
.car-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:4px;padding:0 4px;
}
.car-arrow{
  width:38px;height:38px;border-radius:99px;
  border:2px solid var(--line);
  background:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Caveat",cursive;font-size:24px;line-height:1;
  cursor:pointer;
  box-shadow: 3px 3px 0 0 var(--line);
}
.car-arrow:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--line);}
.car-arrow:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--line);}
.car-hint{
  font-family:"Patrick Hand",sans-serif;font-size:13px;color:var(--ink-faint);
  display:flex;align-items:center;gap:8px;
}

/* ── cities marquee ───────────────────────────────────────────── */
.cities-marquee{
  overflow:hidden;
  border-top:2px dashed var(--line);
  border-bottom:2px dashed var(--line);
  background:var(--paper-2);
  position:relative;
}
.cities-track{
  display:flex;gap:48px;
  animation: cities-scroll 38s linear infinite;
  padding:14px 0;
  width:max-content;
}
.cities-track .city{
  font-family:"Caveat",cursive;font-weight:700;font-size:32px;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:48px;
}
.cities-track .city::after{
  content:"✦";color:var(--accent-ink);background:var(--accent);
  width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:99px;font-size:14px;
}
@keyframes cities-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ── inline email capture ─────────────────────────────────────── */
.sk-email{
  display:flex;gap:0;align-items:stretch;
  border:2px solid var(--line);
  border-radius:99px;
  background:var(--paper);
  overflow:hidden;
  box-shadow: 3px 3px 0 0 var(--line);
  max-width:480px;
}
.sk-email input{
  flex:1;border:none;outline:none;background:transparent;
  font-family:"Patrick Hand",sans-serif;font-size:15px;
  padding:10px 18px;color:var(--ink);
}
.sk-email input::placeholder{color:var(--ink-faint);font-style:italic;}
.sk-email button{
  border:none;border-left:2px solid var(--line);
  background:var(--ink);color:var(--paper);
  font-family:"Kalam",sans-serif;font-weight:700;font-size:14px;
  padding:0 22px;cursor:pointer;letter-spacing:.02em;
}
.sk-email button:hover{background:#000;}