/* Slabtown Cycles — site styles
   Palette: ink #141110 · paper #ece4d1 · cream #f5efe2 · stamp red #a0331f · gold #c7a267
   Type:    Archivo Black (display), Fraunces (editorial), Inter (body), JetBrains Mono (meta)
*/
:root{
  --ink:#141110;
  --ink-2:#2b2622;
  --paper:#ece4d1;
  --cream:#f5efe2;
  --rule:#141110;
  --muted:#6b6358;
  --muted-2:#8a7d63;
  --stamp:#a0331f;
  --gold:#c7a267;
  --gold-2:#b38a4a;
  --ok:#3f6a3a;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);
  font-family:"Inter","Helvetica Neue",Helvetica,system-ui,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;cursor:pointer}

body.mobile-drawer-open{overflow:hidden}

.mono{font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em}
.display{font-family:"Archivo Black","Helvetica Neue",Impact,sans-serif;
  letter-spacing:-.035em;line-height:.86}
.serif{font-family:"Fraunces","Times New Roman",serif}
.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.rule{border:0;border-top:1.5px solid var(--rule);margin:0}
.rule-thin{border:0;border-top:1px solid rgba(20,17,16,.18);margin:0}

/* layout */
.wrap{max-width:1440px;margin:0 auto;padding:0 48px}
.bleed{width:100%}

/* top bar — sits above nav */
.topbar{
  background:var(--ink);color:#d6cdb8;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
  padding-top:10px;padding-bottom:10px;gap:24px;flex-wrap:wrap}
.topbar .wrap > div{min-width:0}
.topbar a:hover{color:var(--gold)}
.topbar .pulse{display:inline-block;width:7px;height:7px;border-radius:99px;background:var(--gold);margin-right:8px;vertical-align:middle}

/* nav */
.nav{background:var(--cream);border-bottom:1.5px solid var(--ink);position:sticky;top:0;z-index:20}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;padding-bottom:18px;gap:24px}
.nav .mark{display:flex;align-items:center;gap:14px}
.nav .mark:hover{text-decoration:none}
.nav .mark, .nav .mark .wm{min-width:0}
.nav .mark .wm{font-family:"Archivo Black",sans-serif;font-size:22px;letter-spacing:-.03em;line-height:1}
.nav .mark .wm small{display:block;font-family:"JetBrains Mono",monospace;font-size:9px;
  letter-spacing:.2em;color:var(--muted);font-weight:400;margin-top:4px;text-transform:uppercase}

/* brand badge (real mark derived from shop signage) */
.mark-badge{background:var(--ink);color:var(--paper);
  padding:6px 10px 8px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1}
.mark-badge .mb-text{font-family:"Archivo Black",sans-serif;font-size:10px;letter-spacing:.04em;text-align:center;line-height:1.05}
.mb-stripe{display:flex;height:5px;width:42px;transform:skewX(-22deg)}
.mb-stripe i{flex:1}
.mb-stripe i:nth-child(1){background:#1E7FC9}
.mb-stripe i:nth-child(2){background:#D93A2B}
.mb-stripe i:nth-child(3){background:#F5C518}
.mb-stripe i:nth-child(4){background:#3FA347}
.mb-stripe.lg{width:120px;height:10px;margin-top:14px}

/* thin 4-color bar under the nav */
.nav::after{content:"";display:block;height:4px;background:
  linear-gradient(90deg,
    #1E7FC9 0 25%, #D93A2B 25% 50%, #F5C518 50% 75%, #3FA347 75% 100%);}

.footer-mark{display:flex;flex-direction:column;align-items:flex-start}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
.nav li a{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.nav li.future span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted-2);opacity:.8}
.nav li a.active{border-bottom:2px solid var(--ink);padding-bottom:2px}
.nav .cta{background:var(--ink);color:var(--paper);padding:12px 18px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border:none}
.nav .cta:hover{background:var(--stamp);text-decoration:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;
  padding:16px 22px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;border:none;
  font-family:inherit;transition:transform .1s ease, background .15s ease;}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--stamp)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--gold);color:var(--ink)}

/* stamp (e-bike notice) */
.stamp{
  display:inline-flex;align-items:center;justify-content:center;
  width:150px;height:150px;border-radius:99px;
  border:2.5px solid var(--stamp);color:var(--stamp);
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;text-align:center;line-height:1.15;
  transform:rotate(-8deg);
}

/* section headers */
.sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:28px 0;border-top:1.5px solid var(--ink);border-bottom:1px solid rgba(20,17,16,.22);
  margin-bottom:40px}
.sect-head h2{margin:0;font-family:"Archivo Black",sans-serif;font-size:52px;
  letter-spacing:-.035em;line-height:.9}
.sect-head .idx{font-family:"JetBrains Mono",monospace;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.sect-head .desc{max-width:380px;color:var(--ink-2);font-size:15px;line-height:1.5}

/* footer */
.footer{background:var(--ink);color:#d6cdb8;margin-top:80px;padding:56px 0 28px}
.footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer h4{margin:0 0 14px;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500}
.footer p, .footer a{font-size:14px;line-height:1.6}
.footer .wm{font-family:"Archivo Black",sans-serif;font-size:40px;letter-spacing:-.04em;color:var(--paper);line-height:.9}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer .bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:18px;
  display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8a8471}

/* reusable blocks */
.kicker-bar{display:flex;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(20,17,16,.2)}
.dot{width:7px;height:7px;border-radius:99px;background:var(--gold)}

/* image treatments */
.img-frame{border:1.5px solid var(--ink);overflow:hidden;background:#1a1714}
.img-frame img{width:100%;height:100%;object-fit:cover;display:block}
.img-cap{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-top:10px}

/* helper bars */
.tag{display:inline-block;padding:4px 10px;border:1px solid var(--ink);
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase}
.tag-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.tag-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* prose */
.prose p{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:65ch;margin:0 0 1em}
.prose h3{font-family:"Fraunces",serif;font-size:28px;font-weight:500;letter-spacing:-.02em;margin:1.6em 0 .4em}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.field input, .field textarea, .field select{
  background:transparent;border:0;border-bottom:1.5px solid var(--ink);
  padding:10px 0;font:inherit;font-size:16px;color:var(--ink);outline:none;
}
.field input:focus, .field textarea:focus{border-color:var(--stamp)}

.ph-notice{max-width:100%;white-space:normal;line-height:1.4;flex-wrap:wrap !important}

/* details toggle rows */
details.row{border-bottom:1px solid rgba(20,17,16,.2);padding:22px 0}
details.row summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  justify-content:space-between;gap:24px}
details.row summary::-webkit-details-marker{display:none}
details.row .idx{font-family:"JetBrains Mono",monospace;font-size:11px;
  letter-spacing:.22em;color:var(--muted);text-transform:uppercase}
details.row .title{font-family:"Fraunces",serif;font-size:32px;letter-spacing:-.02em;flex:1;font-weight:500}
details.row .plus{font-family:"JetBrains Mono",monospace;font-size:20px;color:var(--muted)}
details.row[open] .plus{transform:rotate(45deg)}
details.row .body{padding-top:18px;display:grid;grid-template-columns:1fr 1.3fr;gap:40px}
details.row .body p{margin:0 0 .8em;color:var(--ink-2);line-height:1.6}

/* decorative vertical-text rail */
.rail{position:absolute;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted)}

.mobile-drawer-backdrop,
.mobile-drawer-toggle,
.mobile-drawer-panel{display:none}

.mobile-drawer-backdrop{
  position:fixed;inset:0;background:rgba(20,17,16,.42);backdrop-filter:blur(6px);z-index:58;
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}

.mobile-drawer-backdrop.is-visible{opacity:1;pointer-events:auto}

.mobile-drawer-toggle{
  position:fixed;bottom:94px;z-index:60;border:0;
  background:rgba(20,17,16,.92);color:var(--paper);padding:12px 8px;border-radius:16px;
  border:1px solid rgba(236,228,209,.12);box-shadow:0 16px 36px rgba(20,17,16,.24);align-items:center;gap:6px;opacity:.94;
}

.mobile-drawer-toggle:hover{opacity:1}

.mobile-drawer-toggle-left{left:6px;padding-left:5px}
.mobile-drawer-toggle-right{right:6px;padding-right:5px;background:rgba(199,162,103,.96);color:var(--ink)}
.mobile-drawer-toggle-right .mobile-drawer-toggle-arrow{color:var(--ink)}

.mobile-drawer-toggle-label{
  font-family:"JetBrains Mono",monospace;font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  writing-mode:vertical-rl;text-orientation:mixed;
}

.mobile-drawer-toggle-arrow{font-size:14px;line-height:1;color:var(--gold)}

.mobile-drawer-panel{
  position:fixed;top:50%;transform:translateY(-50%);width:min(250px,78vw);max-height:min(72vh,560px);
  background:rgba(20,17,16,.96);color:var(--paper);z-index:61;border:1px solid rgba(236,228,209,.14);
  box-shadow:0 28px 60px rgba(20,17,16,.34);padding:18px 16px 16px;overflow:auto;
  transition:transform .26s ease,opacity .26s ease;opacity:0;pointer-events:none;
}

.mobile-drawer-panel-left{left:0;border-top-right-radius:28px;border-bottom-right-radius:28px;transform:translate(-100%, -50%)}
.mobile-drawer-panel-right{right:0;border-top-left-radius:28px;border-bottom-left-radius:28px;transform:translate(100%, -50%)}
.mobile-drawer-panel.is-open{opacity:1;pointer-events:auto}
.mobile-drawer-panel-left.is-open{transform:translate(0, -50%)}
.mobile-drawer-panel-right.is-open{transform:translate(0, -50%)}

.mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.mobile-drawer-kicker{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.mobile-drawer-close{border:0;background:transparent;color:var(--paper);font-size:28px;line-height:1;padding:0 2px}
.mobile-drawer-links{display:flex;flex-direction:column;gap:10px}

.mobile-drawer-social-link,
.mobile-drawer-nav-item,
.mobile-drawer-book{
  text-decoration:none !important;
}

.mobile-drawer-social-link{
  display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:16px;
  background:rgba(245,239,226,.06);font-weight:600;
}

.mobile-drawer-social-icon{
  width:40px;height:40px;border-radius:999px;background:rgba(245,239,226,.1);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}

.mobile-drawer-social-icon svg{width:20px;height:20px}

.mobile-drawer-nav-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 12px;border-radius:16px;
  background:rgba(245,239,226,.06);font-weight:700;letter-spacing:.04em;
}

.mobile-drawer-nav-item strong{font-size:15px}

.mobile-drawer-nav-item.is-active{background:var(--gold);color:var(--ink)}

.mobile-drawer-nav-item-future{
  flex-direction:column;align-items:flex-start;gap:3px;color:#d6cdb8;background:rgba(245,239,226,.04);
}

.mobile-drawer-nav-item-future small{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}

.mobile-drawer-book{
  margin-top:6px;display:flex;align-items:center;justify-content:center;padding:14px 12px;border-radius:16px;
  background:var(--gold);color:var(--ink);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:11px;
}

@media (max-width:900px){
  .wrap{padding:0 20px}
  .topbar{display:none}
  .topbar .wrap{align-items:flex-start;padding-top:8px;padding-bottom:8px;gap:8px}
  .topbar .wrap > div{width:100%}
  .topbar .wrap > div:last-child{display:flex;gap:12px;row-gap:8px;flex-wrap:wrap}
  .topbar .wrap > div:last-child a:nth-child(n+3){display:none}
  .nav .wrap{gap:12px;flex-wrap:nowrap;justify-content:center;min-height:78px}
  .nav .mark{width:auto;max-width:calc(100% - 96px);gap:12px}
  .nav .mark .wm{font-size:18px}
  .nav .mark .wm small{font-size:8px;letter-spacing:.12em}
  .nav ul{display:none}
  .nav .cta{display:none}
  .btn{width:100%;justify-content:center}
  .mobile-drawer-backdrop,
  .mobile-drawer-toggle,
  .mobile-drawer-panel{display:block}
  .hero-grid > *, .ph-grid > *, .feat > *, .feat-alt > *, .notice .wrap > *, .visit .wrap > *, .svc-row > *, .compat-col, .footer .wrap > *{min-width:0 !important}
  .ph-grid{gap:24px !important}
  .card-top{flex-direction:column !important;align-items:flex-start !important;gap:8px !important}
  .hero-left{padding:28px 20px !important}
  .hero-wm{font-size:clamp(78px, 24vw, 110px) !important;line-height:.88}
  .hero-tag{font-size:18px !important;max-width:none}
  .hero-tag br{display:none}
  .hero-info{grid-template-columns:1fr !important;gap:16px !important}
  .hero-stamp{top:16px !important;right:16px !important;padding:10px !important}
  .hero-photo-meta,.hero-geo{font-size:8px !important;letter-spacing:.12em !important}
  .svc-index-grid{grid-template-columns:1fr !important}
  .ph-side,.ph-side p,.ph-notice{width:100% !important;max-width:100% !important}
  .ph-side p{overflow-wrap:anywhere !important}
  .ph-notice{display:block !important;font-size:10px !important;letter-spacing:.1em !important;padding:10px 12px !important}
  .notice .display{font-size:clamp(42px, 12vw, 60px) !important;line-height:.92}
  .visit .display{font-size:clamp(52px, 14vw, 76px) !important;line-height:.92}
  .visit .wrap{gap:28px !important}
  .visit-left > div[style*='display:flex']{display:grid !important;grid-template-columns:1fr !important;gap:12px !important}
  .hrs-grid{grid-template-columns:minmax(0,1fr) auto !important;gap:10px 14px !important}
  .ph-side p,.svc-content p,.feat-copy p,.notice p{max-width:none !important}
  .post-h1{font-size:clamp(40px, 11vw, 54px) !important;line-height:.96}
  .stepper{grid-template-columns:1fr !important}
  .sect-head{flex-direction:column;align-items:flex-start;gap:14px}
  .footer .wrap{grid-template-columns:1fr 1fr}
  .footer .bottom{flex-direction:column;align-items:flex-start;gap:8px}
  details.row .body{grid-template-columns:1fr}
  .sect-head h2{font-size:36px}
  .ph-h{font-size:clamp(46px, 12vw, 64px) !important;line-height:.95;letter-spacing:-.02em !important}
}

@media (max-width:640px){
  .wrap{padding:0 16px}
  .nav .mark .wm{font-size:16px}
  .nav .mark .wm small{font-size:7px;letter-spacing:.1em}
  .nav .mark{max-width:calc(100% - 88px)}
  .topbar .wrap > div:last-child a:nth-child(2){display:none}
  .footer .wrap{grid-template-columns:1fr}
  .stamp{width:120px;height:120px;font-size:9px}
  .mobile-drawer-toggle{padding:10px 7px;bottom:82px}
  .mobile-drawer-panel{width:min(230px,78vw)}
}