/* Klass.events — the season, driven (klasschauffeur.events)
   Imported from the Claude Design project (Events Calendar + event/occasion pages).
   Warm paper, ink, claret accent, rust for honesty. Newsreader / Caveat / IBM Plex Mono. */

:root{
  --paper:#f7f5f0;
  --ink:#2a2822;
  --mut:#6d6a60;
  --faint:#8a8779;
  --body:#4d4a40;
  --claret:#8a2b3d;
  --rust:#a8542c;
  --pink:#d9a0ac;
  --line:#d5d2c6;
  --dot:#b8b4a4;
  --card:#fdfcf8;
  --shadow:#dcd8ca;
  --darktext:#d8d5ca;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --hand:'Caveat',cursive;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--claret);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
.hand{font-family:var(--hand);color:var(--claret)}
.rot-l1{display:inline-block;transform:rotate(-1deg)}
.rot-l15{display:inline-block;transform:rotate(-1.5deg)}
.rot-l2{display:inline-block;transform:rotate(-2deg)}
.rot-r15{display:inline-block;transform:rotate(1.5deg)}
.rot-r2{display:inline-block;transform:rotate(2deg)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 48px}

/* header */
.evhead{border-bottom:2px solid var(--ink)}
.evhead .in{max-width:var(--wrap);margin:0 auto;padding:20px 48px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.ev-left{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mark{font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.mark:hover{color:var(--ink)}
.mark .dot{color:var(--claret)}
.ev-tag{font-family:var(--hand);font-size:18px;color:var(--claret);transform:rotate(-2deg);display:inline-block}
.ev-nav{display:flex;gap:22px;font-size:14.5px;font-style:italic;color:var(--mut)}
.ev-nav a{color:var(--mut);text-decoration:none}
.ev-nav a:hover{color:var(--ink)}
.ev-nav a.on{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--claret);font-style:normal;font-weight:500}

/* breadcrumb + headline */
.crumb{display:flex;gap:10px;align-items:baseline;font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.04em;padding-top:52px;flex-wrap:wrap}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb .cur{color:var(--claret)}
.post-h1{font-size:50px;line-height:1.11;font-weight:500;margin:14px 0 0;max-width:22ch;text-wrap:pretty}

/* intro grid (calendar + occasion) */
.introgrid{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;margin-top:24px}
.introgrid p{font-size:17px;line-height:1.8;margin:0;color:var(--body);max-width:66ch}
.introgrid .note{font-family:var(--hand);font-size:21px;color:var(--claret)}

/* byline (event page) */
.byline{display:flex;gap:30px;align-items:center;margin-top:26px;flex-wrap:wrap}
.who{display:flex;gap:12px;align-items:center}
.avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;background:repeating-linear-gradient(45deg,#e8e5dc,#e8e5dc 6px,#e0ddd3 6px,#e0ddd3 12px);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:8px;color:var(--faint)}
.who .name{font-size:15.5px;font-weight:600}
.who .visit{font-size:13px;color:var(--mut);font-style:italic}
.byline .bar{height:26px;width:1px;background:var(--line)}
.byline .facts{display:flex;gap:20px;font-family:var(--mono);font-size:11.5px;color:var(--mut);flex-wrap:wrap}

/* status banner */
.statuswrap{padding-top:28px}
.statusbar{border:2px solid var(--claret);background:var(--card);padding:14px 20px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.statusbar.over{border-color:var(--faint)}
.statusbar .sb{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:3px 8px;white-space:nowrap}
.statusbar .sb.now{background:var(--claret);color:var(--paper)}
.statusbar .sb.pre{border:1px solid var(--claret);color:var(--claret);padding:2px 8px}
.statusbar .sb.gone{border:1px solid var(--faint);color:var(--faint);padding:2px 8px}
.statusbar .msg{font-size:15.5px;color:var(--body)}

/* generic ruled section */
.sec{padding-top:44px}
.rule-claret{border-top:3px solid var(--claret);padding-top:16px}
.rule-ink{border-top:2px solid var(--ink);padding-top:16px}
.rule-rust{border-top:3px solid var(--rust);padding-top:16px;max-width:760px}
.sec h2{font-size:22px;font-weight:600;margin:0 0 12px}
.subnote{font-size:15.5px;line-height:1.7;color:var(--mut);font-style:italic;margin:0 0 14px}

/* event detail: shape-of-evening + sidebar */
.eventgrid{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.timeline{display:grid;gap:0;font-size:15.5px;line-height:1.7;color:var(--body)}
.trow{display:grid;grid-template-columns:88px 1fr;gap:18px;padding:11px 0;border-bottom:1px dotted var(--dot)}
.trow:last-child{border-bottom:0}
.ttime{font-family:var(--mono);font-size:12.5px;color:var(--claret);padding-top:2px}
.handnote{font-family:var(--hand);font-size:20px;color:var(--claret);margin-top:12px;transform:rotate(-1.5deg);width:fit-content}
.side{display:grid;gap:24px}
.bootcard{border:2px solid var(--ink);background:var(--card);padding:24px 26px;box-shadow:5px 5px 0 var(--shadow)}
.bootcard .bc-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);margin-bottom:10px}
.bootcard .bc-list{display:grid;gap:9px;font-size:15px;color:var(--body)}
.bootcard .bc-row{display:flex;justify-content:space-between;gap:12px}
.bootcard .tag{font-family:var(--mono);font-size:11px}
.bootcard .tag.yours{color:var(--claret)}
.bootcard .tag.ours{color:var(--faint)}
.bootcard .tag.bring{color:var(--claret)}

/* polaroid */
.polaroid .frame{background:#fff;padding:10px 10px 32px;box-shadow:0 3px 10px rgba(42,40,34,.18)}
.polaroid .ph{height:180px;width:100%;object-fit:cover;background:repeating-linear-gradient(45deg,#e8e5dc,#e8e5dc 10px,#e0ddd3 10px,#e0ddd3 20px);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10.5px;color:var(--faint);text-align:center;padding:0 12px}
.polaroid .cap{font-family:var(--hand);font-size:18px;text-align:center;margin-top:8px;color:var(--body)}
.cap-credit{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--faint);text-align:center;margin-top:4px}

/* how we prepare (3 col) */
.prep3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;font-size:15px;line-height:1.8;color:var(--body)}
.prep3 .plabel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);margin-bottom:6px}
.prep3 p{margin:0}

/* honestly */
.honestly .list{font-size:15.5px;line-height:1.85;color:var(--body);display:grid;gap:12px}
.honestly .list p{margin:0}

/* dark CTA */
.evcta{padding-top:44px}
.evcta .box{background:var(--ink);color:var(--paper);padding:28px 32px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.evcta .kick{font-family:var(--hand);font-size:22px;color:var(--pink);transform:rotate(-1deg);width:fit-content;margin-bottom:4px}
.evcta p{font-size:15.5px;line-height:1.75;margin:0;color:var(--darktext);max-width:64ch}
.evcta p a{color:var(--paper)}
.evcta .ask{border:1px solid var(--mut);padding:14px 22px;font-size:15px;white-space:nowrap;font-style:italic;color:var(--paper);text-decoration:none}
.evcta .ask:hover{background:var(--paper);color:var(--ink)}

/* calendar: coming up */
.calrow{display:grid;grid-template-columns:1fr 200px 170px 130px;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px dotted var(--dot)}
.calrow:last-child{border-bottom:0}
.calrow .ename{font-size:18.5px;font-weight:600;text-decoration:none;color:var(--ink)}
.calrow a.ename:hover{color:var(--claret)}
.calrow .edesc{font-weight:400;font-style:italic;color:var(--mut);font-size:16px}
.calrow .m{font-family:var(--mono);font-size:12px;color:var(--body)}
.calrow .m.place{color:var(--faint)}
.calrow .badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;justify-self:start;white-space:nowrap}
.calrow .badge.now{background:var(--claret);color:var(--paper);padding:3px 8px}
.calrow .badge.soon{border:1px solid var(--claret);color:var(--claret);padding:2px 8px}
.calrow .badge.muted{color:var(--faint);padding:2px 0}

/* calendar: gone for this year */
.pasthead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.pasthead .note{font-family:var(--hand);font-size:19px;color:var(--claret)}
.pastgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;color:var(--faint)}
.pastrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dotted var(--line);font-size:15.5px}
.pastrow a{color:var(--mut);text-decoration:none}
.pastrow a:hover{color:var(--ink)}
.pastrow .np{font-family:var(--mono);font-size:10.5px;align-self:center;white-space:nowrap}
.pastrow.tell{font-style:italic}
.pastrow.tell .np{font-style:normal}
.pastrow.tell .np a{color:var(--claret)}

/* by occasion */
.occhead-note{font-size:15.5px;line-height:1.7;color:var(--mut);font-style:italic;margin:0 0 18px}
.occgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.occ-card{text-decoration:none;color:var(--ink);border:2px solid var(--ink);background:var(--card);padding:16px 18px;box-shadow:4px 4px 0 var(--shadow);display:grid;gap:6px;transition:box-shadow .12s ease,transform .12s ease}
a.occ-card:hover{box-shadow:2px 2px 0 var(--shadow);transform:translate(2px,2px)}
.occ-card .ot{font-size:17.5px;font-weight:600}
.occ-card .ob{font-size:13.5px;line-height:1.55;color:var(--mut)}
.occ-card .op{font-family:var(--mono);font-size:10.5px;color:var(--claret)}
.occ-card .op.soon{color:var(--faint)}

/* occasion page: what we do (2 col) */
.whatdo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 44px;font-size:15.5px;line-height:1.8;color:var(--body)}
.whatdo-grid p{margin:0}
/* occasion prepare timeline */
.prepline .trow{grid-template-columns:130px 1fr}
.prepline .ttime{font-size:12px}
.prephead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.prephead .note{font-family:var(--hand);font-size:20px;color:var(--claret)}

/* colophon */
.colophon{padding:48px 0 56px}
.colophon .inner{max-width:var(--wrap);margin:0 auto;padding:20px 48px 0;border-top:1px solid var(--shadow);display:flex;justify-content:space-between;gap:24px;font-size:13.5px;color:var(--mut);font-style:italic;flex-wrap:wrap}
.colophon .stamp{font-family:var(--mono);font-size:10.5px;font-style:normal;color:var(--faint)}
.colophon a{color:var(--mut)}

/* booking */
.booksec{padding-top:44px}
.bookline{font-size:15.5px;line-height:1.7;color:var(--body);max-width:66ch;margin:0 0 18px}
.book-frame-wrap{width:100%;max-width:900px;height:72vh;min-height:640px;border:2px solid var(--ink);background:#fff;overflow:hidden;box-shadow:5px 5px 0 var(--shadow);margin-top:16px}
.book-frame{width:100%;height:100%;border:0;display:block}
.book-collapse{max-width:900px}
.book-open{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:14px;font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--ink);padding:13px 24px;border:2px solid var(--ink);background:var(--card);box-shadow:4px 4px 0 var(--shadow);transition:box-shadow .12s ease,transform .12s ease}
.book-open::-webkit-details-marker{display:none}
.book-open::marker{content:""}
.book-open:hover{box-shadow:2px 2px 0 var(--shadow);transform:translate(2px,2px)}
.bo-plus{color:var(--claret);font-size:1.3em;line-height:1;transition:transform .2s ease}
.book-collapse[open] .bo-plus{transform:rotate(45deg)}
.bookcontact{margin-top:14px;font-size:14.5px;color:var(--mut)}
.bookcontact a{color:var(--claret)}
@media(max-width:640px){.book-frame-wrap{min-height:560px;height:82vh;box-shadow:3px 3px 0 var(--shadow)}}

@media(max-width:900px){
  .introgrid,.eventgrid{grid-template-columns:1fr;gap:28px}
  .prep3,.whatdo-grid,.pastgrid{grid-template-columns:1fr;gap:22px}
  .occgrid{grid-template-columns:1fr 1fr}
  .calrow{grid-template-columns:1fr;gap:4px}
  .calrow .badge{justify-self:start;margin-top:2px}
}
@media(max-width:640px){
  .wrap,.evhead .in,.colophon .inner{padding-left:22px;padding-right:22px}
  .evhead .in{flex-direction:column;gap:10px}
  .ev-nav{gap:16px;flex-wrap:wrap}
  .post-h1{font-size:33px}
  .occgrid{grid-template-columns:1fr}
  .evcta .box{grid-template-columns:1fr;gap:18px}
  .colophon .inner{flex-direction:column;gap:10px}
}