/* Humble Crew Auto Spa — the journal
   Jesse's build write-ups are the only long-form reading on this site, so this
   sheet does one thing the service pages never have to: hold a measured column
   of prose at a size someone will actually read. Body copy is 18–19px, the
   column stops at 72ch, and the photography breaks out past it so the reading
   width never becomes the picture width.
   Everything else — ground, ramp, masthead, footer — is inherited. */

/* ── index — composition: baseline-programs (ruled rows, no numerals) ──── */
/* `.lp main > section` in landing.css is (0,1,2) and silently out-ranks a bare
   `.jr` (0,1,0) on padding-block — the third time this build has lost a layout
   to specificity rather than to order. Match it. */
.lp main > section.jr{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  /* The index has no full-bleed hero for the fixed masthead to sit over, so
     the first row needs real clearance under it. The bar measures 87px at
     1512, 104px once the links wrap at 1100 and 97px on a phone — 118px keeps
     the eyebrow clear at every one of them. */
  padding:calc(var(--sp-6) + 118px) clamp(var(--sp-5),4vw,var(--sp-8)) clamp(var(--sp-8),7vw,var(--sp-10))}
.jr__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5);
  flex-wrap:wrap;color:var(--ink-faint);text-transform:uppercase;
  letter-spacing:var(--tracking-label);padding-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
.jr__h1{margin:clamp(var(--sp-6),3.4vw,var(--sp-7)) 0 0;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-display);
  font-size:clamp(34px,min(6.4vw,calc(12svh / var(--z))),96px);line-height:1;max-width:14ch;text-wrap:balance}
.jr__lead{margin:clamp(var(--sp-5),2.4vw,var(--sp-6)) 0 0;max-width:56ch;
  font-size:clamp(18.5px,1.395vw,22px);line-height:1.62;color:var(--ink)}

.jr__list{list-style:none;margin:clamp(var(--sp-7),4vw,var(--sp-9)) 0 0;padding:0;
  border-top:1px solid var(--line)}
.jr__row{border-bottom:1px solid var(--line)}
.jr__link{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));align-items:center;
  padding:clamp(var(--sp-5),2.6vw,var(--sp-7)) 0;position:relative;
  transition:padding-inline .5s cubic-bezier(.22,1,.36,1)}
.jr__link::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--brand-sweep);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.jr__link:hover::after,.jr__link:focus-visible::after{transform:scaleX(1)}
.jr__meta{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  color:var(--ink-faint);text-transform:uppercase;letter-spacing:var(--tracking-label)}
.jr__title{margin:var(--sp-4) 0 0;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:-.004em;line-height:1.06;
  font-size:clamp(22px,2.5vw,40px);max-width:20ch;text-wrap:balance}
.jr__dek{margin:var(--sp-4) 0 0;max-width:58ch;font-size:clamp(17.5px,1.221vw,19.5px);
  line-height:1.6;color:var(--ink)}
.jr__thumb{position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);aspect-ratio:16/10;background:#000}
.jr__thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1),filter .6s ease;
  filter:saturate(.78) contrast(1.06)}
.jr__link:hover .jr__thumb img,.jr__link:focus-visible .jr__thumb img{
  transform:scale(1.045);filter:saturate(1) contrast(1.08)}

/* ── article ──────────────────────────────────────────────────────────── */
.post__hero{position:relative;min-height:clamp(420px,calc(74svh / var(--z)),760px);display:grid;
  grid-template-rows:1fr auto;overflow:hidden;
  padding:calc(var(--sp-8) + 62px) clamp(var(--sp-5),4vw,var(--sp-8)) clamp(var(--sp-6),3.4vw,var(--sp-7))}
.post__heroimg{position:absolute;inset:0;z-index:0}
.post__heroimg img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.7) contrast(1.1) brightness(.86)}
.post__heroimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.28) 34%,
    rgba(0,0,0,.62) 72%,var(--bg) 99%)}
.post__heroin{position:relative;z-index:1;align-self:end;max-width:1560px;
  width:100%;margin:0 auto}
.post__kicker{color:var(--ink-faint);text-transform:uppercase;
  letter-spacing:var(--tracking-label);margin:0}
.post__h1{margin:var(--sp-5) 0 0;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tracking-display);
  font-size:clamp(30px,min(5.4vw,calc(10svh / var(--z))),84px);line-height:1.02;max-width:18ch;
  text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.72)}
.post__by{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  margin:clamp(var(--sp-5),2.4vw,var(--sp-6)) 0 0;padding-top:var(--sp-5);
  border-top:1px solid var(--line);color:var(--ink-muted);
  text-transform:uppercase;letter-spacing:var(--tracking-label)}
.post__by b{font-weight:600;color:var(--ink)}
.post__by i{font-style:normal;color:var(--ink-faint)}

.post__body{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:clamp(var(--sp-7),5vw,var(--sp-9)) clamp(var(--sp-5),4vw,var(--sp-8))}
.post__col{max-width:72ch;margin:0 auto}
.post__col > *{margin-inline:auto}
.post__col p{margin:0 0 var(--sp-5);font-size:clamp(18.5px,1.33vw,20.5px);
  line-height:1.74;color:var(--ink);letter-spacing:-.003em}
.post__col h2{margin:clamp(var(--sp-7),4vw,var(--sp-8)) 0 var(--sp-5);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,2.5vw,40px);line-height:1.08;letter-spacing:-.004em;
  padding-top:var(--sp-5);border-top:1px solid var(--line);text-wrap:balance}
.post__col h3{margin:clamp(var(--sp-6),3vw,var(--sp-7)) 0 var(--sp-4);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20.5px,1.766vw,27.5px);line-height:1.2;color:var(--ink);text-wrap:balance}
.post__col ul{margin:0 0 var(--sp-5);padding:0;list-style:none}
.post__col li{position:relative;padding-left:26px;margin:0 0 var(--sp-4);
  font-size:clamp(18.5px,1.33vw,20.5px);line-height:1.66;color:var(--ink)}
.post__col li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;
  background:var(--brand-sweep)}
.post__col a{color:var(--accent-quiet);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.post__col a:hover{color:#fff}

/* photography breaks out past the reading column, never sits inside it */
.post__fig{margin:clamp(var(--sp-6),3.4vw,var(--sp-8)) auto;
  width:min(1180px,100%);max-width:none}
.post__fig img{display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid var(--line);background:#000}
.post__gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px);margin:clamp(var(--sp-6),3.4vw,var(--sp-8)) auto;
  width:min(1180px,100%)}
.post__gal img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--line);background:#000}

/* ── close of the article ─────────────────────────────────────────────── */
.post__cta{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:0 clamp(var(--sp-5),4vw,var(--sp-8)) clamp(var(--sp-7),4vw,var(--sp-8))}
.post__ctain{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(var(--sp-5),3vw,var(--sp-7));flex-wrap:wrap;
  padding:clamp(var(--sp-6),3vw,var(--sp-7));border:1px solid var(--line);
  border-radius:var(--radius);background:linear-gradient(150deg,rgba(255,255,255,.05),transparent 46%),var(--surface)}
.post__ctah{margin:0;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;font-size:clamp(21px,2.1vw,34px);line-height:1.08;max-width:18ch}
.post__ctap{margin:var(--sp-4) 0 0;font-size:clamp(17.5px,1.221vw,19.5px);
  line-height:1.6;color:var(--ink);max-width:44ch}

.post__pager{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:0 clamp(var(--sp-5),4vw,var(--sp-8)) clamp(var(--sp-8),6vw,var(--sp-10));
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--sp-5),2.4vw,var(--sp-6));
  border-top:1px solid var(--line);padding-top:clamp(var(--sp-6),3vw,var(--sp-7))}
.post__pg{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.post__pg--next{text-align:right;align-items:flex-end}
.post__pglab{color:var(--ink-faint);text-transform:uppercase;letter-spacing:var(--tracking-label)}
.post__pgt{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17.5px,1.635vw,24px);line-height:1.16;color:var(--ink);
  transition:color .3s ease}
.post__pg a:hover .post__pgt{color:var(--accent-quiet)}

/* ── phone ────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .jr__link{grid-template-columns:1fr;gap:var(--sp-5)}
  .jr__thumb{order:-1;aspect-ratio:16/9}
  .jr__title{font-size:clamp(21px,5.6vw,30px);max-width:none}
  .jr__dek{font-size:18px}
  .post__hero{min-height:clamp(380px,calc(62svh / var(--z)),620px)}
  .post__h1{font-size:clamp(26px,7.4vw,44px);max-width:none}
  .post__col p,.post__col li{font-size:18.5px;line-height:1.68}
  .post__gal{grid-template-columns:1fr}
  .post__ctain{flex-direction:column;align-items:flex-start}
  .post__pager{grid-template-columns:1fr;gap:var(--sp-5)}
  .post__pg--next{text-align:left;align-items:flex-start}
}