/* Worth the Drive? — Klass travel blog (klasschauffeur.blog)
   Imported from the Claude Design project (Travel Blog Guide).
   Warm paper, ink, forest green + rust accents. Newsreader / Caveat / IBM Plex Mono. */

:root{
  --paper:#f7f5f0;
  --ink:#2a2822;
  --mut:#6d6a60;
  --faint:#8a8779;
  --body:#4d4a40;
  --green:#3d6b3f;
  --rust:#a8542c;
  --greenlight:#9fc4a0;
  --line:#d5d2c6;
  --dot:#b8b4a4;
  --card:#fdfcf8;
  --shadow:#dcd8ca;
  --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(--green);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
.hand{font-family:var(--hand);color:var(--green)}
.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)}

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

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

/* breadcrumb */
.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}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb .cur{color:var(--green)}

/* headline + byline */
.post-h1{font-size:52px;line-height:1.1;font-weight:500;margin:14px 0 0;max-width:20ch;text-wrap:pretty}
.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}

/* hero + verdict */
.herowrap{padding-top:36px}
.hero-grid{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.shot{height:420px;width:100%;object-fit:cover;background:repeating-linear-gradient(45deg,#e8e5dc,#e8e5dc 12px,#e0ddd3 12px,#e0ddd3 24px);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--faint);text-align:center;padding:0 20px}
.shot-cap{font-family:var(--hand);font-size:19px;color:var(--green);margin-top:8px;transform:rotate(-1deg);width:fit-content}
.verdict-card{border:2px solid var(--ink);background:var(--card);padding:24px 26px;box-shadow:5px 5px 0 var(--shadow)}
.vc-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);margin-bottom:8px}
.vc-head{font-size:30px;font-weight:600;line-height:1.15}
.vc-head em{font-weight:400}
.vc-sum{font-size:15px;line-height:1.7;color:var(--body);margin:14px 0 0}
.scores{border-top:1px dotted var(--dot);margin-top:16px;padding-top:14px;display:grid;gap:8px;font-size:14px;color:var(--body)}
.scores .row{display:flex;justify-content:space-between;gap:12px}
.scores .v{font-weight:600}
.scores .v.good{color:var(--green)}
.scores .v.warn{color:var(--rust)}

/* why / why not */
.whywrap{padding-top:48px}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.why{border-top:3px solid var(--green);padding-top:16px}
.whynot{border-top:3px solid var(--rust);padding-top:16px}
.why h2,.whynot h2{font-size:22px;font-weight:600;margin:0 0 12px}
.why .list,.whynot .list{font-size:15.5px;line-height:1.85;color:var(--body);display:grid;gap:12px}
.why .list p,.whynot .list p{margin:0}
.bothnote{font-family:var(--hand);font-size:21px;color:var(--green);margin-top:18px;transform:rotate(-1.5deg);width:fit-content}

/* practical */
.practical{padding-top:48px}
.practical .inner{border-top:2px solid var(--ink);padding-top:18px}
.practical h2{font-size:22px;font-weight:600;margin:0 0 16px}
.pgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;font-size:15px;line-height:1.8;color:var(--body)}
.pcol .plabel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);margin-bottom:6px}
.pcol p{margin:0}

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

/* related */
.related{padding-top:48px}
.related .inner{border-top:2px solid var(--ink);padding-top:18px}
.relhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;gap:16px}
.relhead h2{font-size:22px;font-weight:600;margin:0}
.relhead a{font-size:14.5px;font-style:italic}
.relgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.relcard{text-decoration:none;color:var(--ink);display:block}
.relcard .rphoto{height:150px;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:10px;color:var(--faint);text-align:center;padding:0 12px}
.relcard .rtitle{font-size:17px;font-weight:600;margin-top:10px;line-height:1.35}
.relcard .rverdict{font-size:13.5px;font-style:italic;color:var(--mut);margin-top:3px}
.relcard .soon{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:1px solid #e0ddd3;padding:2px 6px;margin-top:6px;display:inline-block}

/* colophon */
.colophon{padding:48px 0 56px}
.colophon .inner{max-width:var(--wrap);margin:0 auto;padding:20px 48px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;font-size:13.5px;color:var(--mut);font-style:italic;flex-wrap:wrap}
.colophon a{color:var(--mut)}
.colophon a:hover{color:var(--ink)}

/* booking */
.booksec{padding-top:48px}
.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(--green);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(--green)}
@media(max-width:720px){.book-frame-wrap{min-height:560px;height:82vh;box-shadow:3px 3px 0 var(--shadow)}}

/* ── homepage / index specifics ── */
.lede{padding-top:56px}
.lede h1{font-size:46px;line-height:1.1;font-weight:500;margin:0 0 16px;max-width:20ch;text-wrap:pretty}
.lede .stand{font-size:18px;line-height:1.7;color:var(--body);max-width:60ch;margin:0}
.feature{padding-top:44px}
.feature .fcard{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;border:2px solid var(--ink);background:var(--card);box-shadow:6px 6px 0 var(--shadow)}
.feature .fcard .fimg{height:100%;min-height:300px;width:100%;object-fit:cover;background:repeating-linear-gradient(45deg,#e8e5dc,#e8e5dc 12px,#e0ddd3 12px,#e0ddd3 24px)}
.feature .fcard .fbody{padding:32px 34px}
.feature .flabel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);margin-bottom:10px}
.feature .fcard h2{font-size:30px;font-weight:600;line-height:1.15;margin:0 0 12px}
.feature .fcard h2 a{color:var(--ink);text-decoration:none}
.feature .fcard h2 a:hover{color:var(--green)}
.feature .fcard .fverdict{font-size:15px;font-style:italic;color:var(--mut)}
.clusters{padding-top:52px}
.cluster{padding-bottom:34px}
.cluster .chead{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);padding-top:14px;margin-bottom:14px;gap:16px}
.cluster .chead h2{font-size:24px;font-weight:600;margin:0}
.cluster .chead .note{font-family:var(--hand);font-size:17px;color:var(--green)}
.clist{display:grid;gap:2px}
.crow{display:flex;justify-content:space-between;gap:14px;align-items:baseline;border-bottom:1px dotted var(--dot);padding:10px 0}
.crow a{font-size:18px;text-decoration:none}
.crow .name{font-size:18px;color:var(--faint)}
.crow .cv{font-size:14px;font-style:italic;color:var(--mut);text-align:right}
.crow .soon{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:1px solid #e0ddd3;padding:2px 6px}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .why-grid,.pgrid,.relgrid{grid-template-columns:1fr}
  .pgrid{gap:22px}
  .relgrid{gap:22px}
  .feature .fcard{grid-template-columns:1fr}
  .feature .fcard .fimg{min-height:220px}
}
@media(max-width:720px){
  .wrap,.bloghead .in,.colophon .inner{padding-left:22px;padding-right:22px}
  .bloghead .in{flex-direction:column;gap:10px}
  .bh-nav{gap:16px;flex-wrap:wrap}
  .post-h1{font-size:34px}
  .lede h1{font-size:32px}
  .drivecta .box{grid-template-columns:1fr;gap:18px}
  .drivecta .ask{text-align:center}
  .colophon .inner{flex-direction:column;gap:10px}
}