/* VIP Auto Customs · Reviews (reviews.html). Page rules on top of css/home.css, which is linked first.
   An editorial reading page, a magazine's letters spread: the opening and one lead review on the page's one light band
   (warm white #F4F3EF, ink #0B0B0B), the other reviews on the ground in two newspaper columns (one under 768px), the
   calm close. The quotes are the design: no cards, no boxes, no avatars, no stars; only the length varies.
   Contrast on the warm white: labels and captions at 62–66% ink (5.4:1+), body at 80%. On the ground the captions use
   the house --label (58% white). Red, once per screen: the italic word (#E3202A, 120px, fine at that size); the lead's
   2px rule (decorative, drawn in by js/reviews.js once the word has left the screen); the close is the shared .e-close block from home.css (dim label,
   red italic word). Small red type elsewhere uses --red-text #EE2C35 (4.5:1+ on the ground; #E3202A measures 4.4:1). */

:root{--red-text:#EE2C35;--paper:#F4F3EF;--ink:#0B0B0B;--wrap:1440px}

/* no JavaScript (or js/home.js never ran): the nav is ink in the markup, so it stays with the light band instead of
   floating over the dark one */
html:not(.js) .e-nav{position:absolute}

/* ---------------------------------------------------------------- (1)+(2) the light band */
.r-light{--label:rgba(11,11,11,.62);--box:rgba(11,11,11,.5);--hair:rgba(11,11,11,.14);--text:#0B0B0B;
  background:var(--paper);color:var(--ink);padding:0 max(var(--gutter),calc((100vw - var(--wrap)) / 2))}
.r-light ::selection{background:var(--ink);color:var(--paper)}
.r-light :focus-visible{outline-color:var(--ink)}

/* the opening: about 60vh, the type sitting at the foot of it */
.r-hero{display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(var(--screen) * .6);
  padding:calc(var(--nav-h) + clamp(40px,7vh,88px)) 0 clamp(56px,8vh,96px);border-bottom:1px solid var(--hair)}
.r-hero__label{font:600 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label)}
.r-hero__title{margin:26px 0 0 -.04em;font:300 clamp(64px,7vw,120px)/.98 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.025em}
.r-hero__title em{font-style:italic;color:var(--red)}
.r-hero__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:20px 48px;margin-top:clamp(32px,4.6vh,52px)}
.r-hero__line{max-width:46ch;font:300 18px/1.6 var(--sans);color:rgba(11,11,11,.8)}
.r-hero__link{flex:none}

/* the lead: one review set large, a thin red opening rule above it; in the right two thirds on desktop */
.r-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(32px,6vw,120px);
  padding:clamp(72px,11.5vh,128px) 0 clamp(94px,14.5vh,166px)}
.r-lead>*{grid-column:2}
.r-lead__rule{position:relative;display:block;width:64px;height:2px;margin-bottom:clamp(28px,4vh,44px);background:rgba(11,11,11,.12)}
.r-lead__rule::after{content:"";position:absolute;inset:0;background:var(--red);transform-origin:0 50%}
.js .r-lead__rule::after{transform:scaleX(0);transition:transform 1.2s var(--ease)}
.js .r-lead.is-red .r-lead__rule::after{transform:none}
.r-lead__quote p{max-width:30em;font:300 clamp(26px,2.12vw,37px)/1.36 var(--serif);font-variation-settings:'opsz' 36;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.r-lead__by{margin-top:clamp(26px,3.6vh,40px);font:400 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:rgba(11,11,11,.66)}

/* ---------------------------------------------------------------- (3) the letters, on the ground: two newspaper
   columns read top to bottom, left then right, newest first; each a hairline, the quote, name · date */
.r-letters{padding:clamp(104px,15.5vh,176px) max(var(--gutter),calc((100vw - var(--wrap)) / 2)) clamp(64px,9vh,104px)}
.r-letters__label{margin-bottom:clamp(48px,7vh,80px)}
.r-letters__cols{column-count:2;column-gap:clamp(48px,7vw,140px)}
.r-quote{break-inside:avoid;padding:26px 0 clamp(50px,6.6vh,80px);border-top:1px solid var(--hair)}
.r-quote blockquote p{max-width:36em;font:300 clamp(18px,1.32vw,21px)/1.55 var(--serif);font-variation-settings:'opsz' 24;color:var(--text);text-wrap:pretty}
.r-quote figcaption{margin-top:22px;font:400 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label)}

/* ---------------------------------------------------------------- (4) the calm close, on the ground */
.r-close__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 40px;margin-top:40px}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1023px) and (min-width:768px){
  .r-lead{grid-template-columns:1fr}
  .r-lead>*{grid-column:1}
  .r-lead__quote p{max-width:28em}
}

/* ---------------------------------------------------------------- phone */
@media (max-width:767px){
  .r-light{padding:0 20px}
  .r-hero{min-height:calc(var(--screen) * .55);padding:calc(var(--nav-h) + 56px) 0 48px}
  .r-hero__title{font-size:64px}
  .r-hero__foot{flex-direction:column;align-items:flex-start;gap:24px}
  .r-hero__line{font-size:17px}
  .r-lead{grid-template-columns:1fr;padding:64px 0 88px}
  .r-lead>*{grid-column:1}
  .r-lead__quote p{font-size:28px;line-height:1.38}
  .r-letters{padding:88px 20px 48px}
  .r-letters__label{margin-bottom:40px}
  .r-letters__cols{column-count:1}
  .r-quote{padding:24px 0 52px}
  .r-quote blockquote p{font-size:19px}
  .r-close__actions{flex-direction:column;gap:28px}
}

@media (prefers-reduced-motion:reduce){
  .js .r-lead__rule::after{transition:none}
}
@media print{
  .r-light{padding-top:24px}
  .r-hero{min-height:0}
  .r-lead__rule::after{transform:none!important}
  .r-letters__cols{column-count:1}
}