/* AutoStuhl — Garage catalog + model pages. Extends css/styles.css tokens. */

/* ---------- shared bits ---------- */
.eyebrow{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;color:var(--bronze);display:inline-block}
.container--narrow{max-width:820px}
.linklike{background:none;border:0;color:var(--bronze-hi);cursor:pointer;text-decoration:underline;font:inherit}
.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.in{opacity:1;transform:none}
}
.badge{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ivory-dim);padding:.5em .85em;border:1px solid var(--hairline)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--good{color:#9ec59a} .badge--one{color:var(--bronze-hi)} .badge--warn{color:#d8b45e} .badge--gone{color:#c98a7e}

/* ---------- GARAGE ---------- */
.garage-hero{max-width:var(--container);margin:0 auto;padding:calc(var(--sp-8) + 2rem) var(--gutter) var(--sp-4)}
.garage-hero .lead{color:var(--muted);max-width:52ch;margin-top:var(--sp-2)}
.garage-bar{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.86);backdrop-filter:blur(12px);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;padding:.9rem var(--gutter)}
.gb-search{flex:1 1 260px;min-width:220px}
.gb-search input{width:100%;background:var(--surface);border:1px solid var(--hairline);color:var(--ivory);
  font:inherit;padding:.7rem .9rem;border-radius:2px}
.gb-search input:focus{outline:2px solid var(--bronze);outline-offset:1px}
.gb-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{background:transparent;border:1px solid var(--hairline);color:var(--muted);font:inherit;font-size:.82rem;
  padding:.45rem .8rem;cursor:pointer;border-radius:2px;transition:all .2s var(--ease);white-space:nowrap}
.chip:hover{color:var(--ivory);border-color:var(--bronze)}
.chip.is-on{background:var(--bronze);border-color:var(--bronze);color:#151109;font-weight:500}
.gb-avail{font-size:.85rem;color:var(--muted);display:flex;align-items:center}
.gb-avail label{display:flex;gap:.5rem;align-items:center;cursor:pointer}
.gb-count{font-size:.8rem;color:var(--muted-2);margin-left:auto;font-variant-numeric:tabular-nums}
.garage-body{max-width:var(--container);margin:0 auto;padding:var(--sp-5) var(--gutter) var(--sp-8)}
.mq-group{margin-bottom:var(--sp-7)}
.mq-head{border-bottom:1px solid var(--hairline);padding-bottom:var(--sp-2);margin-bottom:var(--sp-4);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.mq-head h2{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,3rem);letter-spacing:.02em}
.mq-line{color:var(--muted);font-style:italic;font-family:var(--serif);font-size:1.05rem;max-width:42ch;margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-3)}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ivory);background:var(--surface);
  border:1px solid var(--hairline);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.card:hover{border-color:var(--bronze);transform:translateY(-3px)}
.card-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#e9e7e2}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card-media img{transform:scale(1.035)}
.card-badge{position:absolute;left:.7rem;bottom:.7rem;background:rgba(11,11,12,.82);backdrop-filter:blur(6px);
  font-family:var(--sans);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:.4em .7em;border:1px solid var(--hairline)}
.card.is-gone .card-media img{filter:grayscale(.5) brightness(.72)}
.card-body{padding:var(--sp-2) var(--sp-2) var(--sp-3)}
.card-marque{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.card-name{display:block;font-family:var(--serif);font-size:1.25rem;margin-top:.3rem}
.garage-empty{text-align:center;color:var(--muted);padding:var(--sp-6) var(--gutter)}

/* ---------- MODEL PAGE ---------- */
.m-hero{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-5);
  align-items:center;padding:calc(var(--sp-8) + 1rem) var(--gutter) var(--sp-5)}
.mh-media{background:#edece8;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mh-media img{width:100%;height:auto;max-height:78vh;object-fit:contain;display:block}
.mh-copy{max-width:32rem}
.mh-copy .eyebrow{margin-bottom:var(--sp-3)}
.m-hero .display{font-size:clamp(2.4rem,1.3rem+3.4vw,4.1rem);line-height:1.03;margin:.05em 0 .55em;letter-spacing:.004em}
.mh-tag{color:var(--ivory-dim);font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1rem+.6vw,1.5rem);
  line-height:1.4;max-width:26ch;margin:var(--sp-3) 0 var(--sp-4)}
.mh-cta{margin-top:var(--sp-1)}
.m-hero .badge{margin-top:var(--sp-2)}

.m-gallery{max-width:var(--container);margin:0 auto;padding:0 var(--gutter) var(--sp-5)}
.mg-strip{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:.6rem;scroll-snap-type:x mandatory}
/* filmstrip: uniform height, natural width — never crops the chair */
.gt{flex:0 0 auto;height:clamp(300px,44vh,480px);padding:0;border:1px solid var(--hairline);background:#edece8;
  cursor:zoom-in;scroll-snap-align:start;overflow:hidden;display:block}
.gt img{height:100%;width:auto;object-fit:contain;display:block}

/* Editorial: one column, one left edge. Headings and body share it, so the
   whole story reads as aligned. A bronze tick above each heading sets rhythm. */
.editorial{max-width:var(--container);margin:0 auto;padding:var(--sp-6) var(--gutter)}
.ed-col{max-width:660px;margin:0 auto}
.ed-p{color:var(--ivory-dim);margin:0 0 1.05em;max-width:none;font-size:1.075rem;line-height:1.78;letter-spacing:.004em}
.ed-col > .ed-p:first-of-type{font-size:1.28rem;line-height:1.68;color:var(--ivory)}   /* lead */
.ed-em{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,1rem+1.9vw,2.05rem);line-height:1.22;
  color:var(--ivory);margin:2.7em 0 .7em;text-wrap:balance;position:relative;padding-top:1.15em}
.ed-em::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--bronze)}
.ed-col > .ed-em:first-child{margin-top:0}
.ed-plate{margin:var(--sp-5) 0;max-width:none}
.ed-plate img{width:100%;display:block;background:#e9e7e2}

.panel-teaser{max-width:var(--container);margin:0 auto;padding:var(--sp-5) var(--gutter);display:grid;
  grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:center}
.pt-media img{width:100%;display:block;background:#e9e7e2}
.pt-copy h3{font-family:var(--serif);font-size:var(--fs-h3);margin:.3em 0 .4em}
.pt-copy p{color:var(--muted);margin-bottom:var(--sp-3)}

.m-specs{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-top:var(--sp-5)}
.spec-ribbon{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline-2)}
.spec{background:var(--ink);padding:var(--sp-4) var(--sp-3)}
.spec .k{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.spec .v{display:block;font-family:var(--serif);color:var(--ivory);margin-top:.55rem;font-size:1.18rem;line-height:1.25}

.reveal-buy{text-align:center;padding:var(--sp-7) 0 var(--sp-6)}
.rb-kick{font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.rb-price{font-family:var(--serif);font-size:clamp(3rem,8vw,5.5rem);line-height:1;margin:.2em 0}
.rb-each{font-size:.3em;color:var(--muted);letter-spacing:.02em;vertical-align:middle}
.rb-opts{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap;margin:var(--sp-3) 0}
.rb-opt{border:1px solid var(--hairline);padding:var(--sp-2) var(--sp-3);min-width:200px}
.rb-opt .ol{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rb-opt .ov{display:block;font-family:var(--serif);font-size:1.6rem;margin-top:.2rem}
.rb-note{color:var(--muted);max-width:48ch;margin:var(--sp-2) auto;font-size:.92rem}
.rb-cta{margin-top:var(--sp-3)}
.rb-legal{color:var(--muted-2);font-size:.76rem;max-width:60ch;margin:var(--sp-4) auto 0;line-height:1.6}
.reveal-buy.commissioned .rb-price{font-size:clamp(2rem,5vw,3.2rem);color:var(--muted)}

.more{border-top:1px solid var(--hairline);padding:var(--sp-6) 0}
.more-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--sp-3)}
.more-head h3{font-family:var(--serif);font-size:var(--fs-h3)}
.more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-3)}
.mini{text-decoration:none;color:var(--ivory)}
.mini-img{display:block;aspect-ratio:4/5;background-size:cover;background-position:center;background-color:#e9e7e2;border:1px solid var(--hairline)}
.mini-name{display:block;font-family:var(--serif);font-size:1.05rem;margin-top:.5rem}
.mini-marque{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin-top:.15rem}

.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);padding:.8rem var(--gutter);background:rgba(11,11,12,.9);backdrop-filter:blur(12px);
  border-top:1px solid var(--hairline);transform:translateY(0);transition:transform .4s var(--ease)}
.sticky-buy.hide{transform:translateY(120%)}
.sb-name{font-family:var(--serif);font-size:1.05rem}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,6,7,.94);display:flex;align-items:center;justify-content:center;padding:4vw}
.lightbox[hidden]{display:none}
.lightbox img{max-width:94vw;max-height:90vh;object-fit:contain}
.lb-close{position:absolute;top:1.2rem;right:1.6rem;background:none;border:0;color:var(--ivory);font-size:2.4rem;cursor:pointer;line-height:1}

@media (max-width:860px){
  .m-hero{grid-template-columns:1fr;gap:var(--sp-3)}
  .panel-teaser{grid-template-columns:1fr}
  .spec-ribbon{grid-template-columns:repeat(2,1fr)}
}

/* ============ MOTION ============ */
@media (prefers-reduced-motion:no-preference){
  /* model hero: staggered entrance on load */
  .mh-in > *{opacity:0;animation:heroIn .85s var(--ease) forwards}
  .mh-in > *:nth-child(1){animation-delay:.10s}
  .mh-in > *:nth-child(2){animation-delay:.20s}
  .mh-in > *:nth-child(3){animation-delay:.30s}
  .mh-in > *:nth-child(4){animation-delay:.40s}
  .mh-in > *:nth-child(5){animation-delay:.50s}
  .mh-in-media{overflow:hidden}
  .mh-in-media img{animation:mediaIn 1.1s var(--ease) both}
  @keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes mediaIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
  /* marque header underline sweep on reveal */
  .mq-head{position:relative}
  .mq-head::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--bronze);
    transition:width 1s var(--ease) .1s}
  .mq-head.in::after{width:120px}
}
/* card image subtle zoom already set; add a bronze wash on hover */
.card::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(176,141,87,0);transition:box-shadow .35s var(--ease)}
.card{position:relative}
.card:hover::after{box-shadow:inset 0 0 0 1px rgba(176,141,87,.55)}
/* sticky bar slides up on load */
@media (prefers-reduced-motion:no-preference){
  .sticky-buy{animation:barUp .6s var(--ease) .6s both}
  @keyframes barUp{from{transform:translateY(120%)}to{transform:translateY(0)}}
}

/* ============ MOTION v2 — more presence ============ */
@media (prefers-reduced-motion:no-preference){
  .reveal{transform:translateY(26px)}
  .card.reveal{transform:translateY(34px) scale(.985);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .card.reveal.in{transform:none}
  /* card image does a slow settle as the card reveals */
  .card .card-media img{transform:scale(1.08);transition:transform 1.1s var(--ease)}
  .card.reveal.in .card-media img{transform:scale(1)}
  .card:hover .card-media img{transform:scale(1.05)}
  /* marque header slides its title in */
  .mq-head h2{transform:translateX(-14px);opacity:.001;transition:transform .8s var(--ease),opacity .8s var(--ease)}
  .mq-head.in h2{transform:none;opacity:1}
  /* editorial pull-quotes rise a little further for drama */
  .ed-em.reveal{transform:translateY(30px)}
  .ed-em.reveal.in{transform:none}
  /* nav fades down on load */
  .nav{animation:navDown .7s var(--ease) both}
  @keyframes navDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
}

/* --- Garage: "Commission yours" empty-spot card + bottom CTA band --- */
.card--commission .card-media--cc{
  position:relative; aspect-ratio:4/5; display:grid; place-content:center; gap:.6rem;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(176,141,87,.16), transparent 70%),
    repeating-linear-gradient(135deg, rgba(244,241,234,.03) 0 12px, transparent 12px 24px),
    var(--ink-2, #101012);
  border:1px dashed rgba(176,141,87,.5); border-radius:12px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.card--commission:hover .card-media--cc{ border-color:var(--bronze); }
.card--commission .cc-plus{
  font-family:var(--serif); font-size:3.4rem; line-height:.7; color:var(--bronze);
  text-align:center; font-weight:400;
}
.card--commission .cc-kick{
  font:500 .68rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); text-align:center;
}
.card--commission .card-name{ color:var(--bronze-hi); }
.card--commission:hover .card-name{ color:var(--ivory); }

.garage-cta{ padding:clamp(3.5rem,8vw,6rem) 0 clamp(4rem,9vw,7rem); border-top:1px solid var(--hairline); margin-top:var(--sp-6,4rem); }
.garage-cta h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,1.2rem+2.6vw,3.2rem); margin:.5rem 0 .8rem; }
.garage-cta .eyebrow{ color:var(--bronze); }
.garage-cta .btn{ margin-top:1.4rem; }