/* ============================================================================
   PAGES: /reviews, /fuels, and the 404. Linked by the spokes only, after
   chassis.css and brand-gulfshore.css. Only what those pages add. Header, nav,
   sheets, footer nav and the whole of /order live in chassis.css and are not
   styled here. Tokens, hairlines, type and space all come from the chassis.
   ========================================================================= */

/* --- opening section: clears the fixed header on every spoke ------------- */
.pg-open .wrap{ padding-top:calc(var(--pad-section) + clamp(40px,6vw,64px)); }

/* --- 12-column rail grid, shared by the spokes --------------------------- */
.g12{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
      column-gap:var(--gap-col); align-items:start; }
/* Below 900 every child spans 1/-1, and eleven 28px gaps outrun a 280px
   content box at 320: the twelve tracks go to one. */
@media (max-width:899px){ .g12{ grid-template-columns:minmax(0,1fr); } }

/* ===========================================================================
   /reviews  (catalog)
   ========================================================================= */
.rv-rating{ grid-column:1/5; }
.rv-stars{ margin-top:18px; color:var(--accent); font-size:22px; letter-spacing:.14em; }
.rv-count{ margin-top:14px; font-size:var(--fs-body); line-height:1.5;
  color:var(--text-dim); font-weight:300; }
.rv-links{ margin-top:32px; display:grid; gap:14px; justify-items:start; }
.rv-links .strip__ext{ margin-left:.4em; }
/* The pull sits to the right and starts lower than the number: offset rails. */
.rv-pull{ grid-column:6/13; margin-top:clamp(24px,7vw,112px); }
.rv-pull .attr{ display:block; margin-top:28px; }

.rv-list{ row-gap:clamp(48px,7vw,96px); }
.rv-item{ grid-column:1/9; }
.rv-item:nth-child(even){ grid-column:6/13; }
/* a hairline above every third row only */
.rv-item:nth-child(3n){ border-top:1px solid var(--hairline); padding-top:clamp(40px,5vw,64px); }
.rv-item blockquote{ font-family:var(--font-display); font-weight:300;
  font-size:clamp(20px,2vw,28px); line-height:1.34; letter-spacing:-.005em; max-width:30em; }
.rv-item figcaption{ margin-top:20px; }

@media (max-width:899px){
  .rv-rating,.rv-pull,.rv-item,.rv-item:nth-child(even){ grid-column:1/-1; }
  .rv-pull{ margin-top:clamp(40px,8vw,64px); }
}

/* ===========================================================================
   /fuels  (catalog)
   ========================================================================= */
.fu-lead .wrap{ padding-bottom:clamp(32px,4vw,56px); }
.fu-lede{ margin-top:24px; max-width:560px; }
.fu-body{ padding-inline:var(--gutter); grid-template-rows:repeat(4,auto); }
/* The sticky jump rail spans every row; 100px clears the round-3 header
   (under 80px) by at least 20. */
.fu-rail{ grid-column:1/4; grid-row:1/5; position:sticky; top:100px; align-self:start;
  padding-top:clamp(56px,8vw,120px); }
.fu-rail ol{ display:grid; gap:16px; font-family:var(--font-display); font-size:22px;
  line-height:1.2; }
.fu-rail a{ display:inline-block; color:var(--text-dim); transition:color .25s ease-out; }
.fu-rail a:hover,.fu-rail a:focus-visible{ color:var(--text); }
.fu-rail a:active{ transform:translateY(1px); }
.fu-rail li:nth-child(4){ margin-top:24px; padding-top:24px; border-top:1px solid var(--hairline); }
.fu-fuel,.fu-band{ grid-column:5/13; }
.fu-fuel{ padding-block:clamp(56px,8vw,120px); border-top:1px solid var(--hairline); }
.fu-fuel:nth-child(2){ border-top:0; }
.fu-fuel .kicker{ display:block; margin-top:14px; line-height:1.5; }
.fu-fuel .body{ margin-top:clamp(18px,2vw,24px); }
.fu-cols{ display:grid; gap:clamp(32px,4vw,48px); margin-top:clamp(36px,4vw,56px); }
@media (min-width:700px){ .fu-cols{ grid-template-columns:1fr 1fr; } }
/* One band, mid: bleeds to the right edge and stops at the rail's column. */
.fu-band{ margin-right:calc(-1 * var(--gutter)); }
/* Tanks and the storm statement on the alternate ground: the page's one
   rhythm break, taller and quieter than the fuel sections it follows. */
.fu-alt .wrap{ padding-block:clamp(88px,13vw,190px); }
.fu-tanks-h{ grid-column:1/5; }
.fu-tanks{ grid-column:6/13; }
.fu-storm{ grid-column:6/13; margin-top:clamp(64px,10vw,140px); }
.fu-storm .body{ margin-top:clamp(20px,2.4vw,32px); max-width:var(--measure); }
.fu-close{ grid-column:1/-1; }

@media (max-width:959px){
  .fu-body{ grid-template-rows:none; }
  .fu-rail,.fu-fuel,.fu-band,.fu-tanks-h,.fu-tanks,.fu-storm{ grid-column:1/-1; }
  .fu-rail{ grid-row:auto; position:static; padding-top:0; }
  /* a row of three anchor links under the title */
  .fu-rail ol{ display:flex; flex-wrap:wrap; gap:12px 24px; font-size:17px; }
  .fu-rail li:nth-child(n+4){ display:none; }
  .fu-band{ margin-inline:calc(-1 * var(--gutter)); }
  .fu-tanks{ margin-top:28px; }
  .fu-storm{ margin-top:clamp(56px,10vw,96px); }
}

/* ===========================================================================
   404: one statement, a line, the four links as a type list.
   ========================================================================= */
.nf .wrap{ min-height:calc(100svh - var(--hdr-h)); }
.nf__p{ margin-top:clamp(18px,2vw,24px); max-width:var(--measure); }
.nf__links{ margin-top:clamp(36px,4vw,56px); }
.nf__links a{ display:inline-block; color:var(--text); border-bottom:1px solid var(--underline); transition:border-color .3s ease; }
.nf__links a:hover,.nf__links a:focus-visible{ border-bottom-color:var(--accent); }
.nf__links a:active{ transform:translateY(1px); }

/* --- reduced motion: nothing here moves, nothing to collapse --------------- */
@media (prefers-reduced-motion:reduce){ .fu-rail a,.nf__links a{ transition:none; } }

/* Round 4: fuels additions (from comps/r4-fuels.css) */
/* ROUND 4 additions to /fuels. Folds into the fuels block of pages.css at build. */

/* Public-fact blocks under each fuel: a ruled kicker and short paragraphs. */
.fu-more{ margin-top:clamp(40px,5vw,64px); }
.fu-more + .fu-more{ margin-top:clamp(32px,4vw,48px); }
.fu-more .kicker--rule{ margin-bottom:0; }
.fu-more .list{ margin-top:22px; }
/* Bracketed client questions stay visible in the comp: accent, same measure. */
.fu-client{ color:var(--accent); }

/* Tanks: the monitor paragraph sits under the list, on the list's rail. */
.fu-tanks-more{ grid-column:6/13; margin-top:clamp(32px,4vw,48px); }
.fu-tanks-more .kicker--rule{ margin-bottom:0; }
.fu-tanks-more .body{ margin-top:clamp(18px,2vw,24px); }

/* Storm: the one attributed line, in the display face, under the statement. */
.fu-quote{ margin-top:clamp(28px,3.5vw,44px); max-width:var(--measure); }
.fu-quote blockquote{ font-family:var(--font-display); font-weight:300;
  font-size:var(--fs-quote); line-height:1.4; }
.fu-quote figcaption{ margin-top:14px; }

/* Questions: the home dl, two columns at 960 and up, read down then across.
   Seven rows so the hairlines align across the gap. No third column, ever. */
.fu-faq .wrap{ padding-block:clamp(72px,10vw,150px); }
.fu-faq dl{ display:grid; grid-template-columns:1fr; }
.fu-faq .qa dd{ max-width:none; }
.fu-faq .qa .attr{ display:inline-block; margin-left:10px; }
.fu-qa-quote{ display:block; margin-top:14px; }
.fu-faq .fu-close{ margin-top:clamp(48px,6vw,80px); }
@media (min-width:960px){
  .fu-faq dl{ grid-template-columns:1fr 1fr; grid-auto-flow:column;
    grid-template-rows:repeat(7,auto); column-gap:clamp(48px,6vw,96px); }
  .fu-faq .qa:nth-child(7){ border-bottom:1px solid var(--hairline); }
}
@media (max-width:959px){
  .fu-tanks-more{ grid-column:1/-1; }
}

/* Round 4: story page (from comps/r4-story.css) */
/* ============================================================================
   r4-story.css: what /story adds on top of chassis.css, brand-gulfshore.css and
   pages.css (the reviews block, reused as is). Comp only; folds into pages.css
   as the story block at build. Tokens, hairlines, type and space all come from
   the chassis.
   ========================================================================= */

/* --- masthead: the statement on the left rail, the lede right and lower ---- */
.st-h1{ grid-column:1/12; }
.st-lede{ grid-column:7/13; margin-top:clamp(28px,4vw,56px); }

/* --- the plate: the whole frame, viewport wide, its own aspect ------------
   No scrim, no copy, never object-fit:cover. The section has no .wrap, so the
   figure runs gutter to gutter with nothing in the way. Air above and below. */
.st-plate-sec{ padding-block:clamp(24px,4vw,56px) clamp(48px,7vw,104px); }
.st-plate img{ display:block; width:100%; height:auto; }

/* --- the story: three passages on the third rail ------------------------- */
.st-story .g12{ row-gap:clamp(56px,8vw,120px); }
.st-passage{ grid-column:4/11; }
.st-passage + .st-passage{ padding-top:clamp(40px,5vw,64px); border-top:1px solid var(--hairline); }
.st-passage .body{ margin-top:clamp(18px,2vw,24px); max-width:var(--measure); }
.st-q{ margin-top:clamp(24px,3vw,36px); }
.st-q + .st-q{ margin-top:clamp(20px,2.4vw,28px); }
.st-q blockquote{ font-family:var(--font-display); font-weight:300;
  font-size:clamp(20px,2vw,28px); line-height:1.34; letter-spacing:-.005em; max-width:30em; }
.st-q figcaption{ margin-top:16px; }
/* What we do not know, in the open. Accent so it never passes for copy. */
.st-bracket{ margin-top:clamp(24px,3vw,36px); font-size:var(--fs-body-sm); line-height:1.5;
  color:var(--accent); font-weight:400; }
/* The owners' photo slot: an empty hairline box beside the first passage. */
.st-slot{ grid-column:1/4; grid-row:1; aspect-ratio:3/4; border:1px solid var(--hairline);
  display:grid; place-items:center; padding:24px; text-align:center; }
.st-slot figcaption{ font-size:var(--fs-body-sm); line-height:1.5; color:var(--accent); font-weight:400; }

/* --- reviews masthead anchor: land under the fixed header, not behind it -- */
#reviews{ scroll-margin-top:calc(var(--hdr-h) + 24px); }

/* --- mid band: the driver at the door, contained on the rail -------------
   1080 wide, so it never upscales: nine columns at 1440 is 970px. Not a bleed. */
.st-mid-sec .wrap{ padding-block:clamp(40px,6vw,88px); }
.st-mid{ grid-column:3/12; max-width:1080px; overflow:hidden; }
.st-mid img{ display:block; width:100%; height:auto; }

@media (max-width:959px){
  .st-h1,.st-lede,.st-passage,.st-slot,.st-mid{ grid-column:1/-1; }
  .st-lede{ margin-top:clamp(24px,6vw,40px); }
  .st-slot{ grid-row:auto; aspect-ratio:4/3; max-height:320px; }
}