/* =============================================================================
   HERITAGE — the garage
   Saved roads and the bikes you ride. Device-local for now; the page says so.
   ========================================================================== */
.g-head{background:var(--black);color:var(--white);padding:40px 0 34px}
.g-head h1{margin:0 0 9px;font-size:clamp(28px,4.4vw,46px);font-weight:900;
  letter-spacing:-.022em;text-transform:uppercase;line-height:.98}
.g-head p{margin:0;font-size:14.5px;line-height:1.55;color:#C9C9C9;max-width:62ch}
.g-head b{color:var(--orange)}

.g-sec{padding:38px 0 0}
.g-sec:last-of-type{padding-bottom:56px}
.g-h{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.g-h h2{margin:0;font-size:13px;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;white-space:nowrap}
.g-h::after{content:"";flex:1;height:1px;background:var(--rule)}
.g-h span{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--steel);
  text-transform:uppercase;white-space:nowrap}

.g-empty{margin:0;font-size:14px;line-height:1.6;color:var(--steel);max-width:62ch}
.g-empty a{color:var(--orange);font-weight:700}

.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:18px}
.g-card{border:1px solid var(--rule);background:var(--white);display:flex;
  flex-direction:column}
.g-media{display:block;aspect-ratio:16/9;background:var(--black);overflow:hidden}
.g-media img{width:100%;height:100%;object-fit:cover;display:block}
.g-media--shape{display:grid;place-items:center;padding:9px}
.g-media--shape svg{width:auto;height:100%;max-width:100%}
.g-media--shape path{fill:none;stroke:var(--orange);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.g-cb{padding:14px 15px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.g-where{margin:0;font-size:9.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel)}
.g-cb h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-.012em;line-height:1.24}
.g-cb h3 a:hover{color:var(--orange)}
.g-figs{margin:0;font-size:12px;color:var(--steel);font-variant-numeric:tabular-nums}
.g-figs b{color:var(--ink);font-weight:800}
.g-rm{margin-top:auto;align-self:flex-start;border:1px solid var(--rule);
  background:var(--white);color:var(--steel);font:inherit;font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:7px 11px;cursor:pointer}
.g-rm:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}

.g-bikes{list-style:none;margin:0 0 20px;padding:0;border:1px solid var(--rule);
  max-width:620px}
.g-bikes li{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 15px;border-bottom:1px solid var(--rule)}
.g-bikes li:last-child{border-bottom:0}
.g-bikes b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.g-bikes i{display:block;font-style:normal;font-size:11.5px;color:var(--steel);margin-top:2px}
.g-bikes button{width:28px;height:28px;border:1px solid var(--rule);background:var(--white);
  cursor:pointer;font-size:15px;line-height:1;color:var(--ink);flex:none}
.g-bikes button:hover{background:var(--black);color:var(--white);border-color:var(--black)}

.g-form{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;max-width:760px}
.g-form label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
.g-form input{border:1px solid var(--ink);padding:9px 10px;font:inherit;font-size:14px;
  background:var(--white);color:var(--ink);width:150px}
.g-form input[name=year]{width:86px}
.g-form button{border:1px solid var(--orange);background:var(--orange);color:#fff;
  font:inherit;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 16px;cursor:pointer}
.g-form button:hover{background:var(--orange-dk);border-color:var(--orange-dk)}

.g-foot{margin:30px 0 0;padding:16px 18px;background:var(--stone);
  border-left:3px solid var(--orange);max-width:72ch}
.g-foot p{margin:0 0 9px;font-size:12.5px;line-height:1.6;color:var(--steel)}
.g-foot p:last-child{margin:0}
.g-foot b{color:var(--ink)}
#g-clear{border:1px solid var(--rule);background:var(--white);color:var(--steel);
  font:inherit;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:8px 12px;cursor:pointer;margin-top:12px}
#g-clear:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}

/* the save control, wherever it appears */
.savebtn{border:1px solid var(--ink);background:var(--white);color:var(--ink);font:inherit;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 16px;cursor:pointer}
.savebtn:hover{background:var(--ink);color:var(--white)}
.savebtn[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}