/* WEND — Weekend Bulletin
   Visual thesis: A city kiosk-poster meets editorial timetable.
   Warm paper, ink black, acid yellow + vermilion signals.
   Signature: thick ink borders, ticket perforation, rotated category tabs.
*/

@font-face{
  font-family:'Oswald';
  src: url('assets/oswald.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
}
@font-face{
  font-family:'Space Grotesk';
  src: url('assets/space-grotesk.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src: url('assets/ibm-plex-mono.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family:'DM Serif Display';
  src: url('assets/dm-serif.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family:'Literata';
  src: url('assets/literata.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}
@font-face{
  font-family:'DM Sans';
  src: url('assets/dm-sans.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}

:root{
  --bg: #FFF9E6;
  --paper: #FFFBF0;
  --ink: #0E0F0C;
  --line: #0E0F0C;
  --muted: #6F6D66;
  --muted-2: #9A9993;
  --card: #FFFFFF;
  --acid: #FFE600;
  --acid-2: #EBFF08;
  --verm: #FF2E12;
  --mint: #C8F5B8;
  --sky: #B6BFFF;
  --peach: #FFC599;
  --sand: #F2EBD6;
  --radius: 16px;
  --radius-lg: 22px;
  --border: 1.8px solid var(--ink);
  --border-thick: 2.2px solid var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --max: 1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button, input, select{font:inherit}
:focus-visible{
  outline: 2.5px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}

/* skip */
.skip-link{
  position:absolute; left:-9999px; top:8px;
  background:var(--acid); color:var(--ink);
  padding:8px 14px; border:var(--border); border-radius:999px;
  text-decoration:none; font-weight:700; z-index:10;
}
.skip-link:focus{left:12px}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  background: rgba(255,251,240,0.92);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: var(--border);
}
.topbar-inner{
  max-width: var(--max);
  margin:0 auto;
  padding: 12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.brand-mark{
  font-family:'Oswald', sans-serif;
  font-weight:700; letter-spacing:0.02em; font-size:28px; line-height:1;
  border: var(--border-thick); padding:4px 10px 5px; border-radius: 10px;
  background: var(--ink); color: var(--bg);
  transform: rotate(-0.6deg);
}
.brand-dot{color: var(--verm); font-size:13px; margin-left:-2px}
.brand-sub{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.02em;
  background: var(--card); border: var(--border); padding:6px 10px; border-radius:999px;
}
.top-nav{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.top-meta{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted);
  background: var(--sand); border:1px solid #E8DFC2; padding:6px 10px; border-radius:999px;
}
.chip-link{
  text-decoration:none; font-weight:700; font-size:13px;
  background: var(--acid); border: var(--border); padding:7px 14px; border-radius:999px;
  box-shadow: 2px 2px 0 var(--ink);
}
.chip-link:hover{transform: translateY(-1px)}

/* Hero */
.hero{
  max-width: var(--max);
  margin:0 auto;
  padding: 28px 20px 0;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.9fr;
  gap: 28px;
  align-items:start;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px; margin:0 0 14px; color:var(--muted);
}
.eyebrow-dot{width:8px; height:8px; background:var(--verm); border-radius:999px; display:inline-block}
.hero-title{
  font-family:'Oswald', sans-serif;
  font-size: clamp(42px, 7vw, 84px);
  line-height:0.9; letter-spacing:-0.02em; margin:0;
  text-transform:uppercase;
}
.hero-line{display:block}
.hero-italic{
  font-family:'DM Serif Display', serif;
  text-transform:none; font-style:italic; font-weight:400;
  letter-spacing:-0.03em; font-size: 0.98em;
  background: linear-gradient(90deg, var(--acid) 0%, var(--acid) 100%);
  background-repeat:no-repeat; background-size: 100% 0.36em; background-position: 0 0.82em;
  display:inline-block; padding-right:6px;
}
.lede{
  font-family:'Literata', serif;
  font-size: 18px; line-height:1.6; color:#1a1a16; max-width: 56ch;
  margin: 14px 0 18px;
}
.hero-actions{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:stretch}
.hero-note{
  background: var(--card); border: var(--border); border-radius:16px; padding:14px 14px 12px;
  box-shadow: var(--shadow);
  font-size:13px; line-height:1.55;
}
.hero-note strong{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  background: var(--ink); color:var(--bg); padding:3px 7px; border-radius:999px; display:inline-block; margin-bottom:8px;
}
.hero-cards-mini{display:grid; gap:10px}
.mini-ticket{
  background: var(--ink); color:var(--bg); border-radius:14px; padding:12px 14px;
  border: var(--border); position:relative; overflow:hidden;
}
.mini-ticket span{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.05em; opacity:0.85; display:block}
.mini-ticket strong{font-family:'Oswald', sans-serif; font-size:16px; text-transform:uppercase; letter-spacing:0.02em; display:block; margin:4px 0}
.mini-ticket.alt{background: var(--acid); color:var(--ink)}
.mini-ticket::after{
  content:""; position:absolute; right:14px; top:50%; width:18px; height:18px;
  border:2px dashed currentColor; border-radius:999px; opacity:0.5; transform:translateY(-50%);
}

.hero-visual{display:grid; gap:14px}
.collage{
  display:grid; grid-template-columns: 1.2fr 0.55fr; gap:10px;
  border: var(--border-thick); border-radius:18px; padding:10px; background: var(--card);
  box-shadow: var(--shadow); transform: rotate(0.4deg);
}
.collage-main{position:relative; border-radius:12px; overflow:hidden; border: var(--border)}
.collage-main img{width:100%; height:260px; object-fit:cover; filter: saturate(1.05) contrast(1.05)}
.collage-label{
  position:absolute; bottom:10px; left:10px;
  background: var(--acid); border: var(--border); padding:4px 8px; border-radius:999px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600;
}
.collage-strip{display:grid; gap:10px}
.strip-img{border: var(--border); border-radius:12px; overflow:hidden; height:79px; background:var(--sand)}
.strip-img img{width:100%; height:100%; object-fit:cover}
.timetable{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
.time-col{
  background: var(--card); border: var(--border); border-radius:16px; padding:14px 12px; box-shadow: 3px 3px 0 var(--ink);
}
.time-col h2{
  font-family:'Oswald', sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:0.06em;
  margin:0 0 10px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px dashed #D9D7CE; padding-bottom:8px;
}
.time-col h2 span{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); background:var(--sand); padding:2px 7px; border-radius:999px; text-transform:none; letter-spacing:0}
.time-col ul{list-style:none; padding:0; margin:0; display:grid; gap:7px}
.time-col li{
  display:grid; grid-template-columns: 46px 1fr auto; gap:8px; align-items:baseline;
  font-size:13px; line-height:1.3;
}
.time-col li i{
  font-style:normal; font-family:'IBM Plex Mono', monospace; font-size:11px;
  background:var(--ink); color:var(--bg); padding:2px 6px; border-radius:999px; text-align:center;
}
.time-col li em{
  font-style:normal; font-family:'IBM Plex Mono', monospace; font-size:11px;
  background: var(--sand); border:1px solid #E8DFC2; padding:2px 6px; border-radius:999px; color:var(--ink);
}
.hero-rule{
  height:1px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px);
  opacity:0.2; margin: 20px 0 0;
}

/* Controls */
.controls-wrap{
  position:sticky; top:59px; z-index:30;
  background: var(--bg);
  border-top: var(--border); border-bottom: var(--border);
  margin-top: 18px;
}
.controls{
  max-width: var(--max); margin:0 auto; padding: 12px 20px;
  display:grid; grid-template-columns: 1.4fr 0.9fr auto; gap:12px; align-items:end;
}
.control{display:grid; gap:6px}
.control-label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); font-weight:600;
}
.input-shell, .select-shell{
  display:flex; align-items:center; gap:8px;
  background: var(--card); border: var(--border); border-radius: 12px; padding: 8px 12px;
  box-shadow: 2px 2px 0 var(--ink);
}
.input-shell:focus-within, .select-shell:focus-within{box-shadow: 3px 3px 0 var(--ink); background:#FFFFE8}
.input-shell svg{opacity:0.7; flex:none}
.input-shell input{
  border:none; outline:none; width:100%; background:transparent;
  font-size:14px; font-weight:500;
}
.input-shell input::placeholder{color:var(--muted-2)}
.select-shell select{
  border:none; outline:none; width:100%; background:transparent; font-size:14px; font-weight:600; cursor:pointer;
}
.control-actions{display:flex; align-items:center; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.btn{
  border: var(--border); border-radius:999px; padding:10px 16px; font-weight:700; font-size:13px; cursor:pointer;
  background: var(--card); box-shadow: 2px 2px 0 var(--ink); transition: transform 120ms, box-shadow 120ms, background 120ms;
}
.btn:hover{transform: translateY(-1px); box-shadow: 3px 3px 0 var(--ink)}
.btn:active{transform: translateY(0); box-shadow: 1px 1px 0 var(--ink)}
.btn-primary{background: var(--ink); color:var(--bg)}
.btn-toggle{
  display:flex; align-items:center; gap:8px; background: var(--card);
}
.btn-toggle[aria-pressed="true"]{background: var(--ink); color:var(--bg)}
.toggle-dot{width:10px; height:10px; border-radius:999px; background: var(--verm); border:1.5px solid var(--ink); display:inline-block}
.btn-toggle[aria-pressed="true"] .toggle-dot{background: var(--acid)}
.count-chip{
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600;
  background: var(--acid); border: var(--border); padding:8px 12px; border-radius:999px;
  box-shadow: 2px 2px 0 var(--ink);
}

/* Main */
.main{max-width: var(--max); margin:0 auto; padding: 18px 20px 40px}
.section-intro{margin: 18px 0 14px; display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.kicker{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--verm); font-weight:700; margin:0 0 6px;
}
.section-intro h2{
  font-family:'Oswald', sans-serif; font-size:30px; line-height:0.95; text-transform:uppercase; letter-spacing:-0.02em; margin:0;
}
.section-intro h2::after{
  content:""; display:block; width:72px; height:6px; background: var(--acid); border:1px solid var(--ink); border-radius:999px; margin-top:8px;
}
.sub{font-family:'Literata', serif; font-size:14px; color:var(--muted); max-width:32ch; margin:0; line-height:1.5}

.grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:14px;
}
@media (max-width: 980px){ .grid{grid-template-columns: repeat(2,1fr)} .hero-grid{grid-template-columns:1fr} .hero-actions{grid-template-columns:1fr} .controls{grid-template-columns:1fr 1fr} .control-actions{grid-column:1/-1; justify-content:flex-start} }
@media (max-width: 640px){ .grid{grid-template-columns:1fr} .brand-sub{display:none} .timetable{grid-template-columns:1fr} }

/* Card */
.card{
  background: var(--card); border: var(--border-thick); border-radius: var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; position:relative; box-shadow: var(--shadow);
  transition: transform 180ms, box-shadow 180ms;
}
.card:hover{transform: translateY(-2px) rotate(0.15deg); box-shadow: 6px 6px 0 var(--ink)}
.card-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-bottom: 1.5px dashed #D6D3C8; background: var(--paper);
}
.cat-pill{
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px; border:1.5px solid var(--ink); display:inline-flex; align-items:center; gap:6px;
}
.cat-dot{width:8px; height:8px; border-radius:999px; border:1px solid var(--ink); display:inline-block}
.price-pill{
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700;
  background: var(--ink); color:var(--bg); padding:5px 8px; border-radius:999px; border:1px solid var(--ink);
}
.price-pill.free{background: var(--acid); color:var(--ink)}

.card-media{
  position:relative; height:168px; overflow:hidden; background: var(--sand); border-bottom: var(--border);
}
.card-media img{width:100%; height:100%; object-fit:cover; transition: transform 400ms}
.card:hover .card-media img{transform: scale(1.04)}
.date-badge{
  position:absolute; left:10px; top:10px;
  background: var(--card); border: var(--border); border-radius:12px; padding:6px 9px;
  display:grid; gap:1px; text-align:center; min-width:56px; box-shadow: 2px 2px 0 var(--ink);
}
.date-badge .dow{font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:700}
.date-badge .day{font-family:'Oswald', sans-serif; font-size:18px; line-height:1; text-transform:uppercase}
.date-badge .mon{font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:700}
.time-badge{
  position:absolute; right:10px; bottom:10px;
  background: var(--ink); color:var(--bg); border:1px solid var(--ink); border-radius:999px; padding:5px 10px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; display:flex; align-items:center; gap:6px;
}
.time-badge i{font-style:normal; width:6px; height:6px; background:var(--acid); border-radius:999px; display:inline-block}

.card-body{padding:12px 14px 12px; display:grid; gap:8px; flex:1}
.card-title{
  font-family:'Oswald', sans-serif; font-size:20px; line-height:0.95; text-transform:uppercase; letter-spacing:-0.01em; margin:0;
}
.card-summary{
  font-family:'Literata', serif; font-size:13.5px; line-height:1.55; color:#23231E; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.meta-row{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:2px;
}
.meta-pill{
  font-family:'IBM Plex Mono', monospace; font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid #E8DFC2; background: var(--sand);
  display:inline-flex; align-items:center; gap:6px;
}
.meta-pill.venue{font-weight:700; background:var(--card); border-color: var(--ink)}
.card-actions{
  display:flex; gap:8px; padding:12px 14px; border-top:1px solid #E9E6D9; background: #FFFEFB; align-items:center; justify-content:space-between;
}
.btn-open{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  background: var(--acid); font-weight:800; letter-spacing:0.02em; text-transform:uppercase; font-size:12.5px;
}
.btn-open:hover{background: var(--acid-2)}
.save-hint{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted)}
.save-hint.saved{color:var(--verm); font-weight:700}

/* Empty */
.empty{
  margin-top:16px; border: var(--border-thick); border-radius:18px; background: var(--card); box-shadow: var(--shadow); padding:24px;
}
.empty-inner{max-width:560px}
.empty-title{font-family:'Oswald', sans-serif; font-size:24px; text-transform:uppercase; margin:0}
.empty-body{font-family:'Literata', serif; color:var(--muted); margin:6px 0 14px}
.empty-hint{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted-2); margin-top:10px}

/* Overlay / Detail */
.overlay{
  position:fixed; inset:0; z-index:60;
  background: rgba(14,15,12,0.42); backdrop-filter: blur(6px);
  display:grid; place-items:center; padding:18px;
}
.overlay[hidden]{display:none}
.detail{
  width:min(860px, 100%); max-height: 92vh; overflow:auto;
  background: var(--paper); border: var(--border-thick); border-radius: 22px; box-shadow: 8px 8px 0 var(--ink);
  position:relative;
}
.detail-head{
  position:sticky; top:0; z-index:2;
  background: var(--paper); border-bottom: var(--border); padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.detail-head-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.detail-kicker{
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  background: var(--ink); color:var(--bg); padding:5px 10px; border-radius:999px; border:1px solid var(--ink);
}
.detail-subtitle{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted)}
.detail-close{
  width:38px; height:38px; border-radius:999px; display:grid; place-items:center;
  background: var(--card); border: var(--border); box-shadow: 2px 2px 0 var(--ink); cursor:pointer; font-weight:800;
}
.detail-hero{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:0; border-bottom: var(--border);
}
.detail-media{position:relative; background:var(--sand); min-height: 280px; overflow:hidden}
.detail-media img{width:100%; height:100%; min-height:280px; object-fit:cover}
.detail-media-caption{
  position:absolute; left:12px; bottom:12px; background: var(--acid); border:var(--border); padding:5px 9px; border-radius:999px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700;
}
.detail-title-wrap{padding:18px 18px 16px; display:grid; gap:12px; background: var(--card)}
.detail-title{
  font-family:'Oswald', sans-serif; font-size: clamp(26px, 4vw, 38px); line-height:0.95; text-transform:uppercase; letter-spacing:-0.02em; margin:0;
}
.detail-title em{font-family:'DM Serif Display', serif; text-transform:none; font-style:italic; font-weight:400; background: var(--acid); padding:0 4px}
.detail-summary{font-family:'Literata', serif; font-size:15px; line-height:1.6; margin:0; color:#1e1e1b}
.detail-facts{
  display:grid; grid-template-columns: repeat(2,1fr); gap:10px; padding:14px; background: var(--paper);
}
.fact{
  background: var(--card); border: var(--border); border-radius:14px; padding:12px;
}
.fact-label{font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 4px}
.fact-value{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:13px; margin:0}
.fact-value.muted{color:var(--muted)}
.detail-body{
  padding:16px 18px; background: var(--card); border-top:1px dashed #D9D7CE;
}
.detail-body p{font-family:'Literata', serif; font-size:15px; line-height:1.7; margin:0 0 12px; color:#1e1e1b}
.detail-actions{
  display:flex; flex-wrap:wrap; gap:10px; padding:16px 18px; border-top: var(--border); background: var(--paper);
  position:sticky; bottom:0;
}
.btn-save{
  display:inline-flex; align-items:center; gap:8px; font-weight:800; text-transform:uppercase; letter-spacing:0.02em;
}
.btn-save[aria-pressed="true"]{background: var(--verm); color:white; border-color: var(--ink)}
.btn-save svg{width:16px; height:16px}
.btn-ghost{background: var(--card)}
@media (max-width:720px){
  .detail-hero{grid-template-columns:1fr}
  .detail-media{min-height:220px}
  .detail-facts{grid-template-columns:1fr}
  .overlay{padding:10px; align-items:end}
  .detail{max-height:94vh; width:100%; border-radius:18px}
}

/* Footer */
.footer{
  border-top: var(--border-thick); background: var(--ink); color: var(--bg); margin-top:20px;
}
.footer-grid{
  max-width: var(--max); margin:0 auto; padding:28px 20px; display:grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap:20px;
}
.brand-footer{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.brand-footer .brand-mark{background: var(--bg); color:var(--ink); border-color: var(--bg); font-size:20px}
.footer-text{font-size:13px; line-height:1.6; color:#D8D7CC; margin:0 0 8px; max-width:42ch}
.footer-text.small{font-family:'IBM Plex Mono', monospace; font-size:11px; opacity:0.8}
.footer-text a{color: var(--acid); text-underline-offset:3px}
.footer-meta h3{font-family:'Oswald', sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:0.06em; margin:0 0 8px; color:var(--bg)}
.footer-meta ul{list-style:none; padding:0; margin:0; display:grid; gap:6px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:#D8D7CC}
.footer-stamp{
  margin-top:12px; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  border:1px dashed #3a3932; padding:6px 8px; border-radius:8px; display:inline-block; color:#D8D7CC;
}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr} }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; animation:none !important; transition:none !important}
}

/* Category color mapping */
.cat-Art{background:#FF3B1F; color:white}
.cat-Film{background:#9AA6FF; color:var(--ink)}
.cat-Food{background:#FFB800; color:var(--ink)}
.cat-Literature{background:#FFE600; color:var(--ink)}
.cat-Music{background:#C6F5B8; color:var(--ink)}
.cat-Outdoors{background:#9FE870; color:var(--ink)}
.cat-Walks{background:#FF8A5B; color:var(--ink)}