/* Sixth Street Auto
   The category is a dark hero with a red gradient, a stock mechanic giving a
   thumbs up, "Schedule Service Today", and no prices anywhere. This is a work
   order on a clipboard and a rate board screwed to the wall above the counter.
   The page is a document, not a brochure.

   Type: Khand for display, condensed with squared terminals, which is what shop
   signage and stencils actually look like. Spline Sans for prose and Spline Sans
   Mono for every figure on the board, one superfamily so the data and the words
   agree with each other.
   Palette: shop-floor grey paper, near-black ink, and one red spent only on the
   price column and the single action. The wait deliberately gets no colour of
   its own: it is drawn instead, which is the thing no competitor does. */

:root{
  --paper:#f5f5f3;
  --card:#ffffff;
  --ink:#191919;
  --ink-soft:#6a6a66;
  --line:#d5d5d0;
  --line-soft:#e4e4df;
  --red:#b3261e;
  --red-deep:#8d1d17;
  --bar:#c9c9c3;
  --display:"Khand","Haettenschweiler",Impact,sans-serif;
  --body:"Spline Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hold{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}

h1,h2,h3,.wordmark{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.005em;line-height:1}
h1{font-size:clamp(2.3rem,5.6vw,4rem);margin:0 0 .3em;text-wrap:balance}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:0 0 .35em;text-wrap:balance}
h3{font-size:1.25rem;margin:0 0 .3em}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:1.08rem;color:var(--ink-soft)}

/* ---------- masthead: the shop's sign board ----------
   padding-block only. .hold is on the same element and a padding shorthand here
   would cancel its side gutter. */
.mast{background:var(--ink);color:var(--paper)}
.mast .hold{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 28px;padding-block:2px}
.wordmark{font-size:1.4rem;text-decoration:none;letter-spacing:.06em;display:inline-flex;align-items:center;min-height:44px}
.mast nav{display:flex;flex-wrap:wrap;gap:2px 22px}
.mast nav a{font-size:.94rem;color:#b3b3ae;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.mast nav a:hover{color:var(--paper)}
.mast nav a[aria-current="page"]{color:var(--paper);box-shadow:inset 0 -2px 0 var(--red)}

.strap{background:var(--red);color:#fff}
.strap .hold{padding-block:0;display:flex;flex-wrap:wrap;gap:0 24px;justify-content:space-between;align-items:center}
.strap p{margin:0;max-width:none;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em}
.strap a{color:#fff;font-family:var(--mono);font-size:.82rem;display:inline-flex;align-items:center;min-height:44px}

/* ---------- opening ---------- */
.top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}
.top-photo{min-height:100%}
.top-photo img{width:100%;height:100%;min-height:240px;object-fit:cover}
.top-copy{padding:clamp(28px,4vw,56px) clamp(18px,4vw,48px)}
.top-copy .lede{max-width:46ch}
.top-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6em}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;background:var(--red);color:#fff;border:2px solid var(--red);font:600 1.05rem var(--display);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:10px 26px;cursor:pointer;border-radius:0}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- THE BOARD ----------
   The signature. Every job carries a price and a wait, and the wait is drawn on
   one shared scale so a glance separates the twenty minute jobs from the ones
   that take the afternoon. Published prices are the trust claim; drawing the
   waits is the part that is only possible for a shop willing to commit to them.
   The scale runs 0 to 4 hours and the ticks are labelled, so the bar is a chart
   rather than a decoration. */
.board-wrap{padding-block:clamp(36px,6vw,80px)}
.board-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px 32px;margin-bottom:1.2em}
.board-head p{margin:0;color:var(--ink-soft);font-size:.97rem;max-width:44ch}

.scale{display:grid;grid-template-columns:minmax(0,1fr) 190px 92px;gap:0 clamp(14px,2vw,28px);align-items:end;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.scale .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.scale .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;color:var(--ink-soft)}
.scale .k-price{text-align:right}

.board{list-style:none;margin:0;padding:0}
.board>li{border-bottom:1px solid var(--line)}
.board details>summary{
  display:grid;grid-template-columns:minmax(0,1fr) 190px 92px;gap:4px clamp(14px,2vw,28px);
  align-items:center;padding:14px 0;cursor:pointer;list-style:none;
}
.board details>summary::-webkit-details-marker{display:none}
.board details>summary:hover .job{color:var(--red)}
.job{font-family:var(--display);font-weight:600;font-size:1.32rem;text-transform:uppercase;line-height:1.05;display:flex;align-items:baseline;gap:8px}
.job::before{content:"+";font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);font-weight:400;transform:translateY(-1px)}
.board details[open]>summary .job::before{content:"\2212"}
.wait{display:flex;flex-direction:column;gap:4px;min-width:0}
.track{display:block;height:10px;background:var(--bar);position:relative}
.track i{display:block;height:100%;background:var(--ink)}
.track::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0 24.6%,rgba(245,245,243,.85) 24.6% 25%)}
.mins{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.price{font-family:var(--mono);font-weight:500;font-size:1.05rem;color:var(--red);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.detail{padding:0 0 18px;max-width:64ch}
.detail p{margin:0;color:var(--ink-soft);font-size:1rem}
.board-foot{margin:1.6em 0 0;color:var(--ink-soft);font-size:.97rem;max-width:64ch}

/* ---------- plain rows ---------- */
.facts{padding-block:clamp(36px,6vw,80px);border-top:1px solid var(--line)}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3vw,44px)}
.fact h3{margin-bottom:.3em}
.fact p{margin:0;color:var(--ink-soft);font-size:1rem}

/* ---------- prose ---------- */
.page-head{padding-block:clamp(32px,5vw,72px) clamp(14px,2vw,26px)}
.page-body{padding-bottom:clamp(40px,7vw,96px)}
.page-body h2{margin-top:1.6em}
.page-body h2:first-child{margin-top:0}
.rule{border:0;border-top:1px solid var(--line);margin:clamp(26px,4vw,44px) 0}
.narrow{max-width:64ch}

.crew{list-style:none;margin:0;padding:0}
.crew li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:4px clamp(20px,4vw,56px);padding:18px 0;border-bottom:1px solid var(--line-soft)}
.crew li:first-child{border-top:1px solid var(--line)}
.crew .who{font-family:var(--display);font-weight:600;font-size:1.3rem;text-transform:uppercase;line-height:1.05}
.crew .role{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.crew p{margin:0;color:var(--ink-soft);font-size:1rem;max-width:56ch}

/* ---------- form ---------- */
.book-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.form{display:grid;gap:15px;background:var(--card);border:1px solid var(--line);padding:clamp(20px,3vw,28px)}
.f{margin:0}
.form label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.form input,.form textarea,.form select{width:100%;font:400 1rem/1.5 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:0;padding:12px 13px}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.form-status{margin:0;color:var(--red);font-size:.96rem}

/* ---------- foot ---------- */
.foot{background:var(--ink);color:#b3b3ae;padding-block:clamp(30px,5vw,56px)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px clamp(24px,5vw,64px)}
.foot b{display:block;font-family:var(--display);font-size:1.1rem;text-transform:uppercase;color:var(--paper);margin-bottom:8px;letter-spacing:.04em}
.foot p{margin:0 0 .35em;font-size:.94rem;max-width:none}
.foot a{color:#f0a49e}

@media (max-width:900px){
  .top{grid-template-columns:1fr}
  .top-photo img{height:clamp(180px,34vw,300px);min-height:0}
  .book-grid{grid-template-columns:1fr}
  .crew li{grid-template-columns:1fr}
}
@media (max-width:620px){
  /* The board reflows rather than scrolling sideways: job and price on the top
     line, the drawn wait underneath at full width, where the bar is still a
     comparison because every row uses the same scale. */
  .scale{grid-template-columns:1fr auto;gap:0 16px}
  .scale .k-wait{display:none}
  .scale .ticks{display:none}
  /* Place all three explicitly. Letting .wait span the full row and relying on
     auto-placement pushed the price onto a third row of its own, so every row
     was job, then bar, then a lonely right-aligned number. */
  .board details>summary{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:13px 0}
  .job{grid-area:1/1/2/2}
  .price{grid-area:1/2/2/3}
  .wait{grid-area:2/1/3/3}
  .job{font-size:1.18rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}