/* WHEELS ON FIRE — article page styles (shared by all Bikepacking parts) */
/* ---------- page-specific: the article ---------- */

/* ---- hero: the film sits behind the title ---- */
.art-hero{position:relative;min-height:92svh;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:stretch;overflow:hidden;background:var(--ink-2)}
.art-hero-media{position:absolute;inset:-8% 0;z-index:0}
.art-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
/* Part one only: this frame has the road coming in from the left and the
   centred crop was cutting it. Pulled to the left edge so the road is whole. */
.art-hero-media.is-left img{object-position:left 45%}
/* Only an even tenth over the frame now. The vignette that used to protect the
   type here is gone with it: the glass panel below does that job, locally and
   without touching the rest of the photograph. */
.art-hero-shade{position:absolute;inset:0;z-index:1;background:rgba(12,10,9,.10)}
.art-hero-content .page-head{text-shadow:0 1px 2px rgba(12,10,9,.55),
  0 0 8px rgba(12,10,9,.45), 0 0 22px rgba(12,10,9,.35), 0 0 60px rgba(12,10,9,.25)}
.art-play{position:relative;z-index:2;width:clamp(78px,9vw,124px);aspect-ratio:1;border-radius:50%;
  background:var(--red);border:0;display:grid;place-items:center;cursor:pointer;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.art-play svg{width:34%;height:34%;fill:var(--cream);margin-left:8%}
.art-play:hover,.art-play:focus-visible{transform:scale(1.1)}
/* title block sits inside the hero, bottom-left over the photo */
.art-hero-content{position:relative;z-index:2;align-self:flex-start;
  padding:0 var(--pad) clamp(30px,5vh,64px);max-width:960px}
/* The breadcrumb and the title are the shared .page-head pair here too, so the
   gap between them is the one defined in page-head.css -- the h1 adds none. */
.art-hero-content h1{font-size:var(--fs-display-col);margin:0}
/* The part number, under the title. Set as red type it was lost against the
   photograph, so it sits on solid ground instead -- white chip, dark grey letters. */
.art-part{align-self:flex-start;display:inline-block;width:max-content;
  font-family:var(--monob);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  background:var(--cream);color:#333333;padding:5px 11px 4px;
  margin-top:clamp(12px,1.8vh,18px)}
/* The credits run as a band of frosted glass across the foot of the hero.
   They are the smallest type on the page and the line that was losing against
   the photograph — the blur flattens whatever is behind them, so legibility
   stops depending on which patch of picture they land on, and a band with a
   top edge reads as a surface rather than as a stain spreading over the image.
   The rest of the hero keeps its own shadow and the plain photograph. */
.art-hero .art-byline{position:relative;z-index:2;margin:0;max-width:none;
  justify-content:flex-start;gap:clamp(14px,2.4vw,38px);
  padding:clamp(12px,1.8vh,17px) var(--pad);
  background:rgba(12,10,9,.16);
  /* A wider blur instead of a darker tint: at 14px a bright patch of sea still
     came through as a bright patch, so the tint had to carry the contrast. At
     30px the neighbourhood it averages is wide enough that the worst spot
     under the band falls from .57 to .31, which buys more than doubling the
     darkness would — and the glass stays light. */
  -webkit-backdrop-filter:blur(30px) saturate(1.06);
  backdrop-filter:blur(30px) saturate(1.06);
  border-top:1px solid rgba(241,237,228,.14);
  color:var(--cream-dim);text-shadow:none}
@supports not (backdrop-filter: blur(4px)){
  .art-hero .art-byline{background:rgba(12,10,9,.58)}
}
.art-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(20px,3vh,30px)}
/* Side by side on a phone too: stacked, these two took a third of the screen.
   They share the row evenly and shed padding and letter-spacing to fit, which
   is cheaper than dropping a line of the hero. */
@media (max-width:640px){
  .art-hero-cta{flex-wrap:nowrap;gap:10px}
  .art-hero-cta .btn{flex:1 1 0;min-width:0;justify-content:center;
    padding:12px 10px;font-size:12px;letter-spacing:.03em;gap:8px;white-space:nowrap}
  .art-hero-cta .btn .arr{width:19px;height:14px}
  .art-hero-cta .btn .ic-play{width:13px;height:13px}
  /* A hairline at half opacity held up next to a full-size button; on the
     smaller phone one it reads as barely there. Thicker and more present,
     so the outline button keeps the weight of the solid one beside it. */
  .art-hero-cta .btn-ghost-c{border-width:1.5px;border-color:rgba(241,237,228,.78)}
}
.art-hero-cta .btn .ic-play{width:15px;height:15px;flex:none;fill:currentColor}
.art-play-cap{position:absolute;z-index:2;bottom:clamp(28px,5vh,54px);left:0;right:0;text-align:center;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--cream-dim)}

/* ---- byline ----
   What is left of an older title block: .art-title, .art-kicker and the h1 that
   went with them are gone, because the story title is set below the hero now and
   its rules live further down. Only the byline survived into the current page. */
.art-byline{display:flex;justify-content:center;gap:clamp(18px,3vw,44px);flex-wrap:wrap;
  margin-top:clamp(26px,4vh,44px);padding-top:clamp(18px,3vh,28px);border-top:1px solid var(--line-d);
  max-width:760px;margin-left:auto;margin-right:auto;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim)}
.art-byline b{color:var(--cream);font-weight:400}
/* ---- the read ----
   One column, held to a comfortable measure. The lede is set larger and
   in the condensed face so the eye has somewhere to land first. */
/* The story's title, sitting between the hero and the read. Centred over the
   column and closed with the red rule the rest of the article uses. */
.art-title{max-width:74ch;margin:0 auto;padding:clamp(44px,7vh,90px) var(--pad) 0;text-align:center}
.art-title h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  line-height:.95;font-size:clamp(30px,4.4vw,56px);color:var(--cream);padding-bottom:clamp(20px,3vh,30px);
  border-bottom:1px solid var(--red)}
/* the lede follows the title directly, so it does not need its own big gap */
.art-title + .art-body .art-lede{margin-top:clamp(28px,4vh,48px)}

.art-body{max-width:74ch;margin:0 auto;padding:0 var(--pad) clamp(40px,7vh,90px)}
/* Top gap so the read does not butt straight up against the hero
   now that the title lives inside the hero. */
/* Scoped past .art-body p, which is a class plus an element and so was beating
   a bare .art-lede on specificity — the lede had been rendering at the body's
   15.5px all along, whatever this rule asked for. */
.art-body .art-lede{margin-top:clamp(44px,7vh,90px);font-family:var(--med);
  font-size:clamp(22px,3vw,38px);line-height:1.28;
  color:var(--cream);margin-bottom:clamp(30px,5vh,54px)}
.art-body p{font-size:17px;line-height:1.7;color:rgba(241,237,228,.78);margin-bottom:20px}
/* The article has no section titles. Its only headings are the pulled lines,
   which is also the outline the old site had: h1 the series, h2 the story, h3
   the lines lifted out of the read. So there is no bare h3 rule here — a h3 in
   this article IS a quote, and .pull below styles it. */

/* The emphasised passages. They take the live site's h3 level and its text, but
   our own voice for it: the heavy display face in caps, which is the treatment
   the client picked out of the proposal. */
.pull{margin:clamp(34px,5vh,60px) 0;padding-left:clamp(18px,2.4vw,30px);border-left:2px solid var(--red);
  font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(18px,2.1vw,26px);line-height:1.12;color:var(--cream)}
/* A step down from the title above it, so a pulled line reads as a quote
   lifted out of the column rather than as another heading. */
/* ---- full-bleed photographs between passages ---- */
.art-figure{margin:clamp(40px,7vh,90px) 0}
.art-figure img{width:100%;object-fit:cover;aspect-ratio:16/9}
.art-figure figcaption{padding:14px var(--pad) 0;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-dim);text-align:center}
/* One under the other, each at its own shape. Side by side they had to be
   forced to a shared 4/5 and object-fit cropped whatever did not fit — one
   photograph lost its sky, the other lost the bike. Stacked, nothing is cut. */
.art-pair{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.4vw,18px)}
.art-pair img{aspect-ratio:auto;height:auto;object-fit:contain}

/* ---- gallery ---- */
/* The photographs run as a slideshow, not a block of squares — one island at a
   time, read across. Same bleed and snapping as the tour rails. */
.gal-rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,34vw,460px);
  gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 var(--pad) 4px;margin:0 calc(var(--pad) * -1);scroll-padding-inline:var(--pad)}
.gal-rail::-webkit-scrollbar{display:none}
.gal-rail button{scroll-snap-align:start}
@media (max-width:900px){.gal-rail{grid-auto-columns:clamp(240px,78vw,380px)}}
.gal-rail button{position:relative;display:block;padding:0;border:0;background:var(--ink-2);cursor:pointer;
  overflow:hidden;aspect-ratio:4/3}
.gal-rail img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.gal-rail button:hover img,.gal-rail button:focus-visible img{transform:scale(1.06);opacity:.82}
.gal-rail button::after{content:'';position:absolute;inset:0;border:1px solid transparent;transition:border-color .25s ease}
.gal-rail button:hover::after,.gal-rail button:focus-visible::after{border-color:var(--red)}

/* ---- part navigation ---- */
.parts{border-top:1px solid var(--line-d);padding:clamp(34px,5vh,60px) var(--pad)}
.parts-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
/* Four stacked buttons eat most of a phone screen. Side by side in a rail they
   read as one control, and the row cut off at the edge says it scrolls. The
   bleed matches the other rails so the first chip starts on the measure. */
@media (max-width:860px){
  .parts-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x proximity;
    padding:0 var(--pad) 2px;margin:18px calc(var(--pad) * -1) 0;
    scroll-padding-inline:var(--pad)}
  .parts-row::-webkit-scrollbar{display:none}
  .parts-row a,.parts-row span{white-space:nowrap;flex:none;scroll-snap-align:start}
}
.parts-row a,.parts-row span{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line-d);padding:10px 18px;transition:border-color .25s ease,color .25s ease,background-color .25s ease}
.parts-row a:hover{border-color:var(--cream);color:var(--cream)}
.parts-row .on{background:var(--red);border-color:var(--red);color:var(--cream)}
/* Parts 2-4 are not built yet — saying so beats a dead link that looks broken. */
.parts-row .soon{opacity:.4;color:var(--cream-dim)}

/* the lightbox lives in assets/lightbox.css, shared with the tour galleries */