/* ==========================================================================
   Indore — Why Indore
   The brand story page. No Figma frame: the layout is derived from the
   homepage, which is this page's closest relative.

   Loads AFTER css/base.css, which carries the faces, tokens, reset, .wrap,
   the display type classes, .capsule / .btn / .cap, .nav, .snav and the
   footer. Nothing new is invented here — every block below is one of the
   homepage's own arrangements with different words in it:

     .whero    the hero, sized to the large viewport   (site.css .hero)
     .wcreed   lead line beside a column of prose      (site.css .intro)
     .wband    full-bleed photograph, poster line,     (site.css .base)
               copy on the scrim, torn edge
     .wrider   contained photo panel beside prose,     (site.css .running)
               mirrored so the picture leads
     .wrefuse  deep plum ground, hairline rows         (site.css .pricing)
     .warrive  the quiet close and the only CTA        — a centred column

   The page carries ONE capsule, at the end. The homepage repeats it in every
   section because every section is a separate pitch; this page is one
   argument read in order, and interrupting it to sell would undercut the
   argument it is making.
   ========================================================================== */


/* ---------- focus ----------
   base.css rings focus in white, which is right over a photograph and
   invisible on the light grounds this page spends most of its length on.
   Those sections turn the ring --primary; the plum section and the two
   photographs keep white, where white is the legible one. base.css says to
   make this override in the page's own sheet, so here it is. */
.wcreed :focus-visible,
.wrider :focus-visible,
.warrive :focus-visible,
.snav :focus-visible,
.footer :focus-visible{outline-color:var(--primary)}


/* ==========================================================================
   01 — Opening
   Full-bleed photograph, the nav over it, the title hung off the bottom-left
   rather than centred: the homepage's hero already owns the centred wordmark,
   and a page that is a read should start with its sentence, not its logo.
   ========================================================================== */
/* ---- the address bar ----
   Sized to 100lvh — the tallest the screen ever gets — so the photograph
   covers the hero whether the browser's address bar is showing or not. With
   100svh the screen grows taller than the block the moment the bar slides
   away and the white section below peeks in at the bottom. The title block is
   then lifted by exactly (100lvh - 100svh) so it comes to rest its usual
   distance above the SMALL viewport's bottom edge and is visible in both
   states. Both units are static, so this resolves once and never animates.
   The first declaration of each pair is the fallback for a browser that has
   neither unit. See .hero in site.css, which this follows. */
.whero{position:relative;background:var(--ink);overflow:hidden;
  min-height:100vh;min-height:100lvh}
.whero__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 24%}
/* dark at both ends: the top so the nav reads over the room's windows, the
   bottom so the title does */
.whero__scrim{position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0) 26%,rgba(0,0,0,0) 44%,rgba(0,0,0,.72))}
.whero__block{position:absolute;left:0;right:0;
  bottom:57px;bottom:calc(57px + 100lvh - 100svh)}
.whero__big{font-size:clamp(42px,12.4vw,178px);color:var(--white)}
.whero__tag{margin-top:24px;font-family:var(--disp);font-weight:500;
  font-size:20px;line-height:1.15;color:var(--white);max-width:780px}
@media (min-width:900px){
  .whero__tag{margin-top:32px;font-size:26px}
}
@media (max-width:899px){
  /* a phone sits the block closer to the bottom edge; the address-bar lift on
     the base rule above is carried through unchanged */
  .whero__block{bottom:28px;bottom:calc(28px + 100lvh - 100svh)}
}


/* ==========================================================================
   02 — The problem
   The homepage's intro: a lead line in the action colour on the left, the
   prose beside it. Same two-column grid, same sizes.
   ========================================================================== */
.wcreed{background:var(--white);padding:72px 0}
.wcreed__grid{display:grid;gap:32px;width:100%;max-width:1232px;margin-inline:auto}
.wcreed__lead{font-family:var(--disp);font-weight:500;font-size:34px;line-height:1.3;
  color:var(--primary)}
.wcreed__body{color:var(--plum70);font-size:18px;line-height:1.28}
.wcreed__body p+p{margin-top:1.25em}
@media (max-width:899px){
  /* keep a readable measure once the two columns stack */
  .wcreed__grid{max-width:640px}
}
@media (min-width:900px){
  .wcreed{padding:128px 0}
  .wcreed__grid{grid-template-columns:repeat(2,minmax(0,600px));justify-content:center;
    align-items:start;gap:32px}
  .wcreed__lead{font-size:56px}
  .wcreed__body{font-size:20px}
}


/* ==========================================================================
   03 — Any ride is a good ride
   The base-ride block: photograph edge to edge, the poster line at the top,
   the copy pushed to the bottom by margin-top:auto, the torn edge into the
   off-white section that follows.
   ========================================================================== */
.wband{position:relative;overflow:hidden;background:var(--ink);
  min-height:clamp(620px,68.96vw,1081px);display:flex;flex-direction:column}
.wband__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 35%}
.wband__scrim{position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.2) 30%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.8))}
.wband__in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(56px,9.26vw,145px) var(--pad) 0}
.wband__head{color:var(--white)}
/* Held to a measure rather than broken by hand. The measure is in em, not
   px, so the line turns in the same place at every size. Measured on the face
   itself, the way the homepage's SVG headings were. In Clash 600 with .d1's
   -0.01em tracking, "Any ride is a" sets 5.76em wide and "a good ride." sets
   5.56em. A 5.65em cap sits midway between the two — too narrow to keep the
   "a" on the first line, wide enough never to break the second — which gives
   "Any ride is / a good ride." at every width, with ~1.7% of slack either
   side for a browser that rounds the advances differently. */
.wband__big{font-size:clamp(42px,11.3vw,165px);line-height:.92;color:var(--white);
  max-width:5.65em}
.wband__foot{margin-top:auto;display:flex;flex-direction:column;gap:32px;
  padding-bottom:clamp(64px,10.2vw,160px);color:var(--white)}
.wband__copy{display:flex;flex-direction:column;gap:24px;max-width:560px}
.wband__copy h3{font-size:clamp(26px,2.36vw,37px)}
.wband__copy p{font-size:clamp(17px,1.39vw,22px);line-height:1.25;color:var(--white70)}
.wband__tear{position:absolute;left:0;right:0;bottom:-1px;z-index:3;width:100%;
  height:clamp(24px,4.3vw,67px);line-height:0}
.wband__tear svg{width:100%;height:100%;display:block}
@media (min-width:900px){
  .wband__copy{max-width:min(38.89vw,610px)}
}
@media (max-width:899px){
  /* the proportional height would squeeze to nothing at phone width, so give
     the two text blocks room and darken the lower half of the frame to keep
     the white copy legible over a busy photograph */
  .wband{min-height:760px}
  .wband__scrim{background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.3) 26%,rgba(0,0,0,.86) 64%)}
  .wband__foot{gap:24px}
}


/* ==========================================================================
   04 — Who this is for
   The running section's arrangement, mirrored: the contained photo panel
   leads on the left and the prose sits to its right. Below 900 the heading
   comes first in the source and the picture follows it, which is the order
   it should be read in.
   ========================================================================== */
.wrider{background:var(--surface);padding:72px 0}
.wrider .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:40px}
.wrider__col{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:560px}
.wrider__col h2{font-size:clamp(28px,2.78vw,44px);color:var(--plum)}
.wrider__col .prose{font-size:18px;line-height:1.28;color:var(--plum70)}
.wrider__col .prose p+p{margin-top:1.28em}
.wrider__photo{margin:0;width:min(100%,420px);aspect-ratio:4/5;
  border-radius:12px;overflow:hidden;box-shadow:var(--lift-photo)}
.wrider__photo img{display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 42%}
@media (min-width:900px){
  .wrider{padding:128px 0}
  /* a 450-wide photo panel, a gutter, then a 560-wide text column, written as
     fr units in that ratio so the pair keeps its spacing at any width */
  .wrider .wrap{display:grid;gap:0;align-items:center;
    grid-template-columns:minmax(0,450fr) minmax(0,140fr) minmax(0,560fr) minmax(0,130fr)}
  .wrider__photo{grid-column:1;grid-row:1;width:auto;max-width:none}
  .wrider__col{grid-column:3;grid-row:1;max-width:none}
}


/* ==========================================================================
   05 — What it won't do
   The pricing block's ground and rows: deep plum, a poster heading, then
   hairline-separated rows that go two columns once there is room.
   ========================================================================== */
.wrefuse{background:var(--plum);color:var(--white);padding:72px 0}
.wrefuse__head{display:flex;flex-direction:column;gap:24px}
.wrefuse__head h2{font-size:clamp(40px,8.2vw,124px);color:var(--white)}
/* 40px, not 44, is the floor: "What it won't do." sets 7.99em wide in Clash
   600 at .d1's tracking, so 44px would be 351px and turn "do." onto a line of
   its own inside a 342px phone column. 40px keeps it on one line. */
.wrefuse__head p{font-size:18px;line-height:1.35;color:var(--white70);max-width:var(--measure)}
.wlist{margin-top:40px;border-top:1px solid var(--hair-light)}
.wrow{display:grid;grid-template-columns:1fr;gap:14px;padding:28px 0;
  border-bottom:1px solid var(--hair-light)}
.wrow .name{font-size:clamp(24px,2.36vw,34px);color:var(--white)}
.wrow .desc{font-size:18px;line-height:1.35;color:var(--white70)}
@media (min-width:900px){
  .wrefuse{padding:128px 0}
  .wrefuse__head{gap:36px}
  .wlist{margin-top:56px}
  .wrow{grid-template-columns:minmax(0,440fr) minmax(0,660fr);
    column-gap:clamp(24px,4.86vw,76px);row-gap:0;padding:32px 0}
}


/* ==========================================================================
   06 — The close
   A centred column, one sentence at section-head size, the note under it and
   the page's only capsule. The postscript is the site's small-print register.
   ========================================================================== */
.warrive{background:var(--surface);padding:72px 0 88px;text-align:center}
.warrive .wrap{display:flex;flex-direction:column;align-items:center;gap:32px}
.warrive__line{font-size:clamp(26px,2.9vw,46px);color:var(--plum);max-width:960px}
.warrive__note{font-size:18px;line-height:1.35;color:var(--plum70);max-width:560px}
.warrive__ps{max-width:560px;margin-top:8px}
@media (min-width:900px){
  .warrive{padding:128px 0 144px}
  .warrive .wrap{gap:40px}
}