@font-face{font-family:"DM Serif Display";src:url("assets/dm-serif.ttf") format("truetype");font-display:swap}
@font-face{font-family:"DM Sans";src:url("assets/dm-sans.ttf") format("truetype");font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/ibm-plex-mono.ttf") format("truetype");font-display:swap}

:root{
  --paper:#f4eee1;
  --paper-2:#ece3cf;
  --card:#fbf7ec;
  --ink:#201b13;
  --ink-soft:#5c5344;
  --line:#201b13;
  --accent:#b53d12;
  --accent-ink:#fff7ec;
  --moss:#24402f;
  --gold:#e9b44c;
  --radius:18px;
  --shadow:6px 6px 0 var(--line);
  --font-display:"DM Serif Display",Georgia,serif;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.55;
  background-image:radial-gradient(#201b1314 1px,transparent 1px);
  background-size:22px 22px;
}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:10px;z-index:200;transition:top .2s}
.skip:focus{top:12px;color:#fff}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--line)}
.topbar-inner{max-width:1180px;margin:0 auto;padding:.7rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand-mark{width:38px;height:38px;border:2px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--gold);box-shadow:3px 3px 0 var(--line)}
.brand-word{font-family:var(--font-display);font-size:1.45rem;line-height:1}
.brand-sub{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;border-left:2px solid var(--line);padding-left:.6rem;color:var(--ink-soft)}
.topbar-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.date-pill{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:var(--paper);padding:.45rem .8rem;border-radius:999px;display:inline-flex;align-items:center;gap:.5rem}
.date-pill .dot{width:8px;height:8px;border-radius:50%;background:#7ee081;display:inline-block}
.saved-count{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--line);border-radius:999px;padding:.4rem .8rem;background:var(--card)}
.ticker{border-top:2px solid var(--line);background:var(--moss);color:#f4eee1;overflow:hidden;white-space:nowrap;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;padding:.4rem 0}
.ticker-track{display:inline-flex;animation:tick 28s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}

/* hero */
.hero{max-width:1180px;margin:0 auto;padding:2.2rem 1.25rem 1rem}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:start}
.kicker{font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft);display:flex;gap:.6rem;align-items:center;margin:0 0 .8rem}
.kicker-num{background:var(--ink);color:var(--paper);padding:.15rem .55rem;border-radius:6px}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,5vw,4.4rem);line-height:.98;letter-spacing:-.01em;margin:0 0 1rem}
.hero h1 em{font-style:italic;background:linear-gradient(transparent 62%,var(--gold) 62%,var(--gold) 94%,transparent 94%)}
.lede{font-size:1.12rem;max-width:34rem;color:#383226;margin:0 0 1.4rem}
.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.5rem}
.btn{font-family:var(--font-mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--line);border-radius:999px;padding:.75rem 1.2rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;background:var(--card);color:var(--ink);box-shadow:4px 4px 0 var(--line);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--line)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.btn-solid{background:var(--accent);color:#fff;border-color:var(--line)}
.btn-ghost{background:var(--card)}
.hero-facts{display:grid;grid-template-columns:repeat(3,auto);gap:0;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);max-width:34rem}
.hero-facts div{padding:.7rem .9rem}
.hero-facts div+div{border-left:2px solid var(--line)}
.hero-facts dt{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}
.hero-facts dd{margin:.15rem 0 0;font-weight:700;font-size:.92rem}

.hero-collage{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:180px 150px;gap:.7rem}
.ph{margin:0;border:2px solid var(--line);border-radius:14px;overflow:hidden;position:relative;background:#ddd;box-shadow:var(--shadow)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}
.ph figcaption{position:absolute;left:8px;bottom:8px;background:#201b13ee;color:#f4eee1;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;padding:.25rem .55rem;border-radius:999px}
.ph-a{grid-column:1/-1;grid-row:1}
.ph-a img{object-position:center 60%}
.ph-b img{object-position:center 40%}
.hero-stamp{position:absolute;right:-14px;top:-22px;width:96px;height:96px;background:var(--accent);color:#fff;border:2px solid var(--line);border-radius:50%;display:grid;place-items:center;text-align:center;font-family:var(--font-display);font-size:1.3rem;line-height:1;transform:rotate(10deg);box-shadow:4px 4px 0 var(--line)}
.hero-stamp span{transform:rotate(-6deg)}

/* browse */
.browse{max-width:1180px;margin:0 auto;padding:1.5rem 1.25rem}
.browse-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;border-top:2px solid var(--line);padding-top:1.5rem}
.browse-head h2{font-family:var(--font-display);font-weight:400;font-size:2.4rem;margin:.2rem 0 .3rem}
.results-line{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin:0}
.day-pills{display:flex;gap:.5rem;flex-wrap:wrap}
.pill{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--line);background:var(--card);border-radius:999px;padding:.55rem 1rem;cursor:pointer;box-shadow:3px 3px 0 var(--line)}
.pill.is-active{background:var(--ink);color:var(--paper)}

.toolbar{display:grid;grid-template-columns:1.4fr .8fr auto;gap:.7rem;margin:1.2rem 0 .8rem;align-items:end}
.field{display:grid;gap:.35rem}
.field label{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.field-search{position:relative}
.field-icon{position:absolute;left:.9rem;bottom:.85rem;color:var(--ink-soft);pointer-events:none}
.field input[type="search"]{width:100%;border:2px solid var(--line);border-radius:999px;background:var(--card);padding:.85rem 1rem .85rem 2.6rem;font:inherit;box-shadow:4px 4px 0 var(--line)}
.field select{width:100%;border:2px solid var(--line);border-radius:999px;background:var(--card);padding:.85rem 1rem;font:inherit;box-shadow:4px 4px 0 var(--line);appearance:auto}
.btn-shortlist{background:var(--card);white-space:nowrap}
.btn-shortlist[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.btn-shortlist[aria-pressed="true"] .heart svg path{fill:var(--gold);stroke:var(--gold)}
.count-badge{background:var(--accent);color:#fff;border:2px solid var(--line);border-radius:999px;min-width:1.7rem;height:1.7rem;display:inline-grid;place-items:center;font-size:.75rem;padding:0 .3rem}
.active-note{font-family:var(--font-mono);font-size:.76rem;background:#fff3c4;border:2px dashed var(--line);border-radius:12px;padding:.6rem .9rem;margin:.4rem 0 .8rem}

/* list */
.list{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.6rem}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .16s}
.card:hover{transform:translateY(-3px)}
.card-media{position:relative;height:170px;overflow:hidden;border-bottom:2px solid var(--line)}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.saved-ribbon{position:absolute;top:10px;right:10px;background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;padding:.3rem .65rem;border-radius:999px;border:2px solid var(--paper)}
.card-top{position:absolute;left:10px;top:10px;display:flex;gap:.4rem}
.chip{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;padding:.32rem .65rem;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink)}
.chip[data-cat="Art"]{background:#e3d3ff}
.chip[data-cat="Film"]{background:#cfe0ff}
.chip[data-cat="Food"]{background:#ffe0b8}
.chip[data-cat="Literature"]{background:#c9ecdf}
.chip[data-cat="Music"]{background:#ffd0dd}
.chip[data-cat="Outdoors"]{background:#cde8c4}
.chip[data-cat="Walks"]{background:#f3e2a4}
.price-tag{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;padding:.32rem .65rem;border-radius:999px;border:2px solid var(--line);background:var(--ink);color:var(--paper)}
.card-body{padding:1rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card-day{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700}
.card h3{font-family:var(--font-display);font-weight:400;font-size:1.45rem;line-height:1.05;margin:0}
.card p.sum{margin:0;color:#453d2e;font-size:.94rem}
.card-meta{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:.35rem .8rem;margin:0}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-top:2px dashed #201b1333;padding-top:.7rem}
.venue-mini{font-size:.8rem;color:var(--ink-soft)}
.open-btn{font-family:var(--font-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--line);background:var(--gold);border-radius:999px;padding:.5rem .95rem;cursor:pointer;box-shadow:3px 3px 0 var(--line)}
.open-btn:hover{background:#ffcf6b}

/* empty */
.empty{border:2px dashed var(--line);border-radius:var(--radius);background:var(--card);padding:2.5rem 1.5rem;text-align:center;box-shadow:var(--shadow)}
.empty[hidden]{display:none}
.empty-star{font-size:2rem;margin:0}
.empty h3{font-family:var(--font-display);font-weight:400;font-size:1.8rem;margin:.4rem 0}
.empty p{color:var(--ink-soft)}

/* notes */
.notes{border-top:2px solid var(--line);margin-top:2rem;background:var(--paper-2)}
.notes-grid{max-width:1180px;margin:0 auto;padding:2rem 1.25rem;display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem}
.notes h2{font-family:var(--font-display);font-weight:400;font-size:2rem;margin:.2rem 0 1rem}
.steps{margin:0;padding-left:1.2rem;display:grid;gap:.7rem}
.fineprint{border:2px solid var(--line);border-radius:14px;background:var(--card);padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.fineprint h3{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;margin:0 0 .6rem}
.fineprint ul{margin:0;padding-left:1.1rem;font-size:.9rem;color:#453d2e;display:grid;gap:.5rem}

.footer{border-top:2px solid var(--line);padding:1.2rem;text-align:center;background:var(--ink);color:var(--paper)}
.footer p{margin:.2rem 0}
.footer-small{font-family:var(--font-mono);font-size:.7rem;opacity:.75}

/* detail overlay */
.overlay{position:fixed;inset:0;z-index:100;background:#201b13b8;display:grid;place-items:center;padding:1rem;overflow:auto}
.overlay[hidden]{display:none}
.detail-shell{position:relative;width:min(880px,100%);margin:auto}
.detail-shell article{background:var(--card);border:3px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:10px 10px 0 #000;display:grid;grid-template-columns:.9fr 1.1fr;max-height:calc(100vh - 3rem)}
.detail-media{position:relative;min-height:100%;border-right:3px solid var(--line);background:#ddd}
.detail-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-media .chip{position:absolute;left:14px;top:14px}
.detail-body{padding:1.4rem 1.4rem 1.2rem;overflow:auto}
.detail-kicker{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:700;margin:0 0 .4rem}
.detail-body h2{font-family:var(--font-display);font-weight:400;font-size:2rem;line-height:1.02;margin:0 0 .5rem}
.detail-summary{font-size:1rem;color:#383226;margin:0 0 .8rem}
.detail-facts{margin:0 0 .9rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.detail-facts div{padding:.55rem .7rem;background:#fff8}
.detail-facts div:nth-child(odd){border-right:2px solid var(--line)}
.detail-facts dt{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
.detail-facts dd{margin:.1rem 0 0;font-weight:700;font-size:.88rem}
.detail-prose{font-size:.95rem;color:#2e2820;display:grid;gap:.6rem;margin-bottom:1rem}
.detail-prose p{margin:0}
.detail-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.detail-x{position:absolute;top:-14px;right:-10px;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:var(--paper);font-size:1.1rem;cursor:pointer;box-shadow:3px 3px 0 var(--line)}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-collage{grid-template-rows:200px 140px}
  .hero-stamp{right:8px}
  .list{grid-template-columns:repeat(2,1fr)}
  .toolbar{grid-template-columns:1fr 1fr}
  .btn-shortlist{grid-column:1/-1;justify-content:center}
  .detail-shell article{grid-template-columns:1fr;max-height:calc(100vh - 2rem)}
  .detail-media{min-height:220px;border-right:0;border-bottom:3px solid var(--line)}
  .detail-media img{position:relative;height:220px}
  .notes-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .topbar-inner{flex-direction:column;align-items:flex-start}
  .brand-sub{display:none}
  .list{grid-template-columns:1fr}
  .toolbar{grid-template-columns:1fr}
  .hero-facts{grid-template-columns:1fr}
  .hero-facts div+div{border-left:0;border-top:2px solid var(--line)}
  .browse-head h2{font-size:2rem}
  .detail-body h2{font-size:1.6rem}
  .detail-facts{grid-template-columns:1fr}
  .detail-facts div:nth-child(odd){border-right:0;border-bottom:2px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ticker-track{animation:none}
}