/*
  Garage: a workshop spec sheet. The hero is a drawing sheet on a faint grid, with a title
  block across the top and the bike as Fig. 1, its callouts (Mileage, Next Service, Tires,
  Documents) on leader lines. The body is numbered like a manual: the bikes as index cards,
  service history as a ledger, mods as a parts list with a running total, documents as
  filing rows. Numerals are monospace throughout.
*/

.fp--garage { --line: rgba(244,243,238,0.14); --line-2: rgba(244,243,238,0.26); }

/* ---------- Drawing sheet hero ---------- */

.gsheet { position: relative; isolation: isolate; padding: clamp(110px, 13vh, 160px) 0 clamp(60px, 6vw, 110px); border-bottom: 1px solid var(--line); }
.gsheet__grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }

.gtitle { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 clamp(40px, 4.5vw, 80px); border: 1px solid var(--line-2); background: rgba(12,16,20,0.7); }
.gtitle div { padding: 12px 16px 14px; }
.gtitle div + div { border-left: 1px solid var(--line-2); }
.gtitle dt { font: 700 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--legend-mute); }
.gtitle dd { margin: 8px 0 0; font-size: clamp(1rem, 1.05vw, 1.3rem); font-weight: 700; color: var(--legend); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtitle div:first-child dd { color: var(--signal); }

.gsheet__grid2 { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(40px, 4.5vw, 120px); align-items: center; }
.gsheet h1 { font-size: clamp(2.8rem, 4.8vw, 7.2rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; max-width: 12ch; }
.gsheet__lede { font-size: clamp(1.15rem, 1.25vw, 1.55rem); line-height: 1.55; color: #dcdee2; max-width: 36rem; margin: clamp(22px, 2vw, 34px) 0 clamp(26px, 2.4vw, 40px); }

/* Fig. 1: the bike with its callouts */
.gplate { position: relative; margin: 0; padding: clamp(12px, 1vw, 18px); border: 1px solid var(--line-2); background: rgba(12,16,20,0.7); }
.gplate__img { position: relative; }
.gplate__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gplate__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gplate__lines polyline { fill: none; stroke: var(--legend); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0.85; }
.gdot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--asphalt); box-shadow: inset 0 0 0 2px var(--signal); font: 700 13px/1 var(--mono); color: var(--legend); }
.gcall { list-style: none; margin: 0; padding: 0; }
.gcall li { position: absolute; left: var(--x); top: var(--y); transform: translate(0, -50%); padding: 10px 14px 11px; background: rgba(12,16,20,0.92); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; gap: 4px; min-width: 170px; counter-increment: call; }
.gcall li.gcall--up { transform: translate(-50%, -100%); }
.gcall b { font: 700 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--legend-mute); }
.gcall b::before { content: counter(call) "  "; color: var(--signal); }
.gcall span { white-space: nowrap; font-size: clamp(1rem, 1.05vw, 1.3rem); font-weight: 700; color: var(--legend); }
.gcall small { font-size: 13px; color: var(--legend-dim); }
/* Callouts sit over the image */
.gcall { position: absolute; inset: 0; pointer-events: none; counter-reset: call; }
.gplate__cap { margin: 12px 0 0; display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--legend-mute); }

/* ---------- Numbered sections ---------- */

.gsec { padding: clamp(80px, 7.5vw, 150px) 0; border-bottom: 1px solid var(--line); }
.gsec__no { margin: 0 0 18px; font-size: 14px; letter-spacing: 0.12em; color: var(--signal); }
.gsec__no::after { content: ""; display: inline-block; width: 40px; height: 1px; margin: 0 0 4px 12px; background: var(--line-2); vertical-align: middle; }
.gsec__ic { display: block; width: 34px; height: 34px; color: var(--legend-dim); margin: 0 0 18px; }
.gsec h2 { font-size: clamp(2.1rem, 3vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; max-width: 15ch; margin: 0 0 22px; }
.gsec__head > p:not(.gsec__no), .gshow__copy p:not(.gsec__no) { margin: 0; font-size: clamp(1.05rem, 1.1vw, 1.35rem); line-height: 1.65; color: #cfd2d6; max-width: 42rem; }
.gsec__split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 5vw, 120px); align-items: start; margin-bottom: clamp(40px, 4vw, 70px); }
.gsec__split--wide { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); margin-bottom: 0; }
.gsec__phone .phone { --pw: clamp(220px, 14vw, 300px); }

/* 01: bikes as index cards */
.gswipe__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.8fr); gap: clamp(40px, 5vw, 120px); align-items: start; }
.gbikes__strip { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 6px; }
.gbikes__strip li { width: 36px; height: 3px; background: var(--shoulder); }
.gbikes__strip li.is-on { background: var(--signal); }
.gbikes__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 28px); }
.gbike { position: relative; border: 1px solid var(--line-2); padding: 12px 12px 4px; background: var(--asphalt); }
.gbike img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gbike h3 { margin: 16px 4px 10px; font-size: clamp(1.15rem, 1.25vw, 1.6rem); font-weight: 800; }
.gbike dl { margin: 0; }
.gbike dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); }
.gbike dt { font: 700 11px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--legend-mute); }
.gbike dd { margin: 0; font-weight: 600; color: var(--legend); text-align: right; }
.gbike__tag { position: absolute; top: 22px; left: 22px; margin: 0; padding: 6px 9px 5px; background: var(--asphalt); box-shadow: inset 0 0 0 1px var(--signal); font: 700 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); }

/* Ledger tables */
.gtable { overflow-x: auto; }
.gtable table { width: 100%; border-collapse: collapse; font-size: clamp(0.98rem, 1vw, 1.2rem); }
.gtable caption { caption-side: top; text-align: left; padding: 0 0 14px; font: 700 13px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--legend); }
.gtable caption span { margin-left: 14px; color: var(--legend-mute); }
.gtable th { padding: 12px 18px 12px 0; text-align: left; font: 700 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--legend-mute); border-top: 2px solid var(--line-2); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.gtable td { padding: clamp(14px, 1.2vw, 20px) 18px clamp(14px, 1.2vw, 20px) 0; border-bottom: 1px solid var(--line); color: var(--legend); vertical-align: baseline; }
.gtable td:nth-child(2) { font-weight: 700; }
.gtable .num { color: var(--legend-dim); white-space: nowrap; }
.gtable .r { text-align: right; }
.gtable th:last-child, .gtable td:last-child { padding-right: 0; }
.gsigned { color: var(--signal); font-weight: 600; }
.gtable__recall td { color: var(--legend-dim) !important; }
.gparts td:first-child { width: 4rem; }
.gparts tfoot td { padding-top: 18px; border-bottom: 0; border-top: 2px solid var(--line-2); font-weight: 800; color: var(--legend); }
.gparts tfoot td.num { color: var(--signal); font-size: 1.25em; }

/* 04: filing rows */
.gfile { border-top: 2px solid var(--line-2); }
.gfile__head { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 0; font: 700 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--legend-mute); border-bottom: 1px solid var(--line-2); }
.gfile__head svg { width: 16px; height: 16px; color: var(--signal); }
.gfile ul { list-style: none; margin: 0; padding: 0; }
.gfile li { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 9rem; gap: 18px; align-items: center; padding: clamp(14px, 1.2vw, 20px) 0; border-bottom: 1px solid var(--line); }
.gfile__tab { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 6px 6px 0 0; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; color: var(--legend-dim); }
.gfile b { font-size: clamp(1.02rem, 1.05vw, 1.25rem); color: var(--legend); }
.gfile span.num { color: var(--legend-dim); }
.gfile em { font: 700 11px/1 var(--mono); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); text-align: right; }

/* 05 and 06: builds and community garages */
.gshow { border-bottom: 0; }
.gshow__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) auto; gap: clamp(36px, 4vw, 100px); align-items: center; }
.gshow__photo { margin: 0; padding: 12px; border: 1px solid var(--line-2); }
.gshow__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gshow__copy section + section { margin-top: clamp(40px, 4vw, 70px); padding-top: clamp(40px, 4vw, 70px); border-top: 1px solid var(--line); }
.gshow__phone .phone { --pw: clamp(220px, 13vw, 290px); }

/* ---------- Narrower screens ---------- */

@media (max-width: 1500px) {
  .gtitle div:nth-child(2) { display: none; }
  .gtitle { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gtitle div:nth-child(3) { border-left: 1px solid var(--line-2); }
  .gshow__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .gshow__phone { display: none; }
}

@media (max-width: 1200px) {
  .gsheet__grid2 { grid-template-columns: minmax(0, 1fr); }
  .gswipe__grid, .gsec__split--wide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .gtitle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gtitle div { border-left: 0 !important; border-top: 1px solid var(--line-2); }
  .gtitle div:nth-child(-n+2) { border-top: 0; }
  .gtitle div:nth-child(2) { display: block; }
  .gtitle div:nth-child(odd) { border-right: 1px solid var(--line-2); }
  /* Callouts drop below the figure as a numbered list */
  .gplate__lines { display: none; }
  .gcall { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 12px; background: var(--line-2); box-shadow: 0 0 0 1px var(--line-2); }
  .gcall li, .gcall li.gcall--up { position: static; transform: none; min-width: 0; background: var(--asphalt); box-shadow: none; }
  .gbikes__row { grid-template-columns: repeat(3, minmax(240px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .gbike { scroll-snap-align: start; }
  .gsec__split { grid-template-columns: minmax(0, 1fr); }
  .gsec__phone .phone { --pw: min(56vw, 240px); }
  .gshow__grid { grid-template-columns: minmax(0, 1fr); }
  .gtable table { min-width: 620px; }
  .gfile li { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; }
  .gfile li span.num, .gfile li em { grid-column: 2; text-align: left; }
  .gfile li em:empty { display: none; }
  .gfile__tab { grid-row: span 3; align-self: start; }
}

@media (max-width: 600px) {
  .gcall { grid-template-columns: minmax(0, 1fr); }
  .gdot { width: 24px; height: 24px; font-size: 12px; }
}