/* ============================================================
   PAGE TWO, OPTION C: THE DIRECTORY.

   The third of the three designs Josie compares. Same content, same
   running order, same renderer as the scroller and the deck: the only
   thing that differs is how it is laid out and how you move through it.

   Two ideas, and everything here serves one or the other:

     1. THE RUNNING ORDER IS ALWAYS VISIBLE. A slim index is fixed down
        the left naming all nine sections, and it marks the one you are
        in as you go. You always know how much is left.

     2. EVERYTHING READS DOWN ONE CENTRE AXIS. Nothing splits into a
        left and a right column. Every heading, every lead and every
        short label hangs off the middle of the reading area, so the
        page reads as one document rather than a stack of arrangements.

   The two exceptions to centring are deliberate, and both are cases
   where centring would destroy the thing: the key numbers term sheet
   (a ledger, label left and figure right) and the question deck (a
   question and its control). Both are capped and centred as BLOCKS and
   keep their own internal alignment.

   Grown out of concept 02, The Dossier (c2.css), which had the fixed
   index but ran its reading column left aligned.

   Loaded after base.css. Does NOT load picked.css: this concept owns
   its own hero plate and its own components.
   ============================================================ */

body.rl{
  --measure:900px;
  --pad:clamp(78px,10.5vh,132px);
  /* wide enough that the longest label, Where you could build, stays on
     one line. A wrapped item breaks the even rhythm of the index, which
     is the one thing the index has to get right. */
  --rail:236px;
  --gut:clamp(22px,4vw,56px);
}

/* ---------- the fixed index ---------- */
.rl .lp-rail{ display:block; position:fixed; z-index:60; left:0; top:0;
  width:var(--rail); height:100svh; overflow-y:auto;
  padding:96px clamp(18px,1.6vw,26px) 40px; }
/* a hairline, not a panel: the index should read as a margin note beside
   the page, not as a second column competing with it */
.rl .lp-rail::after{ content:''; position:absolute; top:0; right:0; bottom:0;
  width:1px; background:var(--line2); }
.rl .lp-rail a{ padding:9px 0; font-size:9.5px; letter-spacing:.12em;
  align-items:baseline; gap:11px; }
.rl .lp-rail .rt{ text-wrap:nowrap; }
.rl .lp-rail .rn{ font-family:'Acier',sans-serif; font-size:11px;
  color:var(--warm); opacity:.7; min-width:20px;
  transition:color .18s, opacity .18s; }
/* the active section is marked with colour alone. No bar, no dot, no
   rule down one edge: this is a nav, and the moment it grows an accent
   edge it stops looking like part of the page. */
.rl .lp-rail a.on .rn{ color:var(--beige); opacity:1; }
.rl .lp-rail .rail-top{ margin-bottom:12px; padding-bottom:18px;
  border-bottom:1px solid var(--line2); }

/* clicking an index entry jumps to that section, and the running header
   is fixed over the top of the page, so the landing point has to clear it
   or the kicker ends up underneath the wordmark */
.rl .lp-vert .s{ scroll-margin-top:clamp(58px,7vh,76px); }

.rl .lp-vert{ margin-left:var(--rail); }
/* The footer rule runs the FULL width, under the index as well as the
   reading column, so the page closes on one line rather than a line that
   starts partway across. The wordmark moves left with it and lines up
   with the index above it instead of with the reading column.

   The footer lives INSIDE the reading column, which is already pushed
   right by the rail, so margin alone cannot reach the edge: it has to be
   pulled back by the rail width and given that width back. */
.rl .lp-foot{ margin-left:calc(var(--rail) * -1);
  width:calc(100% + var(--rail));
  padding-left:clamp(18px,1.6vw,26px); }
.rl .lp-hdr{ padding-left:calc(var(--rail) + clamp(18px,2vw,30px)); }
.rl .lp-progress{ left:var(--rail); }

/* ---------- the centre axis ----------
   One rule, applied once, rather than section by section: the reading
   area centres in what is left beside the index, and everything in it
   hangs off that axis. */
.rl .s{ text-align:center; }
.rl .s .inr{ margin-inline:auto; }
.rl .head{ display:flex; flex-direction:column; align-items:center; }
.rl .kick{ justify-content:center; margin-bottom:20px;
  font-size:10.5px; letter-spacing:.3em; }
.rl .kick .ch{ font-family:'Acier',sans-serif; font-size:12px;
  color:var(--beige); font-weight:400; }
.rl h2.hl{ font-size:clamp(28px,3.6vw,50px); line-height:1.02;
  max-width:19ch; margin-inline:auto; }
.rl .p{ margin:20px auto 0; font-size:clamp(14.5px,1.3vw,17px);
  line-height:1.65; max-width:58ch; text-align:center; }

/* ---------- HERO. The nameplate, centred on the shopfront ---------- */
.rl .s-hero{ min-height:92svh; justify-content:flex-end;
  padding-bottom:clamp(84px,12.5vh,146px); }
.rl .s-hero .scrimbg{ background:
  linear-gradient(180deg, rgba(10,10,10,.52) 0%, rgba(10,10,10,.34) 40%, rgba(10,10,10,.95) 100%); }
.rl .s-hero .inr{ display:flex; flex-direction:column; align-items:center;
  max-width:min(100%,1020px); }
.rl .s-hero .eyebrow{ margin-bottom:26px; }
/* same weight of black as the scroller's plate (Macca 30 Jul) */
.rl .plate{ border:1px solid rgba(255,255,255,.5); background:rgba(10,10,10,.9);
  padding:clamp(24px,3.2vw,38px) clamp(24px,4.2vw,58px);
  max-width:100%; width:auto; }
.rl .plate h1.hl{ font-size:clamp(26px,4.6vw,58px); line-height:1;
  letter-spacing:.02em; margin-bottom:0; }
/* the wordmark stands in for the heading. The IMAGE carries the centring:
   a display:block image ignores the text-align around it and sits left. */
.rl .plate h1.np-mark{ line-height:0; }
.rl .plate h1.np-mark img{ display:block; margin-inline:auto;
  width:clamp(120px,15vw,204px); height:auto; }
.rl .np-figs{ display:flex; flex-wrap:wrap; justify-content:center;
  margin-top:26px; background:none; border:0; gap:0; }
.rl .np-figs .fig{ background:none; padding:0 clamp(10px,1.7vw,24px);
  text-align:center; }
.rl .np-figs .fig + .fig{ border-left:1px solid rgba(255,255,255,.28); }
.rl .np-figs .fv{ font-size:clamp(18px,2.2vw,28px);
  font-variant-numeric:tabular-nums; }
.rl .np-figs .fl{ margin-top:9px; font-size:9.5px; letter-spacing:.16em; }
.rl .rule{ background:rgba(255,255,255,.28); margin:0; }
.rl .figs-plate + .rule{ margin-top:26px; }
.rl .who{ padding:14px 0; flex-direction:column; align-items:center;
  gap:2px; justify-content:center; }
.rl .wn{ font-family:'Manrope',sans-serif; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--white);
  font-weight:700; line-height:1.6; }
.rl .wr{ font-size:10px; letter-spacing:.2em; color:var(--chalk); opacity:.85; }
.rl .caveat{ margin-top:16px; text-align:center; margin-inline:auto; }
.rl .s-hero .sub{ margin-top:18px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--chalk); font-weight:400;
  line-height:1.9; max-width:min(100%,620px); text-wrap:pretty; }
.rl .s-hero .scroll-cue{ margin-top:16px; }

/* The hero ends on near black, so 01 still does not need a FULL pad on
   top of it, but the cut-down version was too tight (Macca 30 Jul): the
   founders were arriving before the hero had finished. */
.rl [data-sec="founders"]{ padding-top:clamp(82px,10.5vh,138px); }

/* ---------- 01 THE FOUNDERS ----------
   No split. The story, then the film, then the three facts under it. */
.rl [data-type="founders"] .duo{ grid-template-columns:1fr;
  gap:clamp(28px,3.4vw,44px); }
/* the three facts sit ABOVE the film (Macca 30 Jul): the numbers are the
   short answer and the film is the long one, so the short one comes first */
.rl [data-type="founders"] .media .video-ph{ margin-top:0; aspect-ratio:16/8.4; }
/* the real film lands in exactly the frame the poster left behind */
.rl [data-type="founders"] .media video{ aspect-ratio:16/8.4; }
.rl .facts{ grid-template-columns:repeat(3,1fr); }
.rl .fact{ display:block; padding:17px 18px; text-align:center; }
.rl .fact .k{ font-size:10px; letter-spacing:.18em; color:var(--grey); }
.rl .fact .v{ display:block; margin-top:8px; font-size:13.5px;
  color:var(--off); text-align:center; }

/* ---------- 02 WHY REVL. The photograph, then the plate over it ---------- */
.rl [data-type="why"] .fr{ position:relative; overflow:hidden;
  border:1px solid var(--line); aspect-ratio:16/6.4; background:var(--black); }
.rl [data-type="why"] .fr img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.8); }
.rl [data-type="why"] .fr .vg{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 24%, rgba(10,10,10,0) 58%, rgba(10,10,10,.7) 100%),
  linear-gradient(90deg, rgba(10,10,10,.42) 0%, rgba(10,10,10,0) 16%, rgba(10,10,10,0) 84%, rgba(10,10,10,.42) 100%); }
.rl .why-plate{ position:relative; z-index:2; width:min(100%,820px);
  margin:-140px auto 0; background:var(--black);
  border:1px solid rgba(255,255,255,.4); padding:clamp(26px,3vw,40px);
  text-align:center; }
.rl .why-plate .head{ display:flex; flex-direction:column; align-items:center; }
.rl .why-plate h2.hl{ max-width:none; }
.rl .why-plate .body{ margin-top:26px; }
.rl [data-type="why"] .rows-2{ grid-template-columns:1fr 1fr; }
.rl [data-type="why"] .pull{ margin-top:28px; }

/* ---------- 03 THE PARTNERSHIP ----------
   The four teams two by two, the Academy film under them, then what
   building a REVL includes. Nothing beside anything. */
.rl [data-type="support"] .duo{ grid-template-columns:1fr;
  gap:clamp(28px,3.4vw,44px); }
.rl [data-type="support"] .rows{ grid-template-columns:1fr 1fr; }
.rl [data-type="support"] .media .video-ph{ margin-top:0; aspect-ratio:16/7.4; }
/* what building a REVL includes moves INTO the stack, above the film
   (Macca 30 Jul), so the section reads teams, then what you get, then the
   film. The shell does that move; the duo gap handles the spacing. */
.rl [data-type="support"] .incl{ margin-top:0; }

/* short labels centre with the rest; only the ledger and the deck do not */
.rl .row{ padding:19px 18px; text-align:center; }
.rl .rh{ font-size:clamp(14px,1.4vw,17px); line-height:1.15; }
.rl .rd{ margin-top:9px; font-size:12.5px; }

/* ---------- 04 KEY NUMBERS ----------
   A ledger. Capped and centred as a block, flush inside. */
.rl .terms{ max-width:720px; margin-inline:auto; width:100%;
  text-align:left; border-top:1px solid var(--line); }
.rl .tv{ font-size:clamp(19px,2.2vw,28px); }
.rl .flagline{ max-width:58ch; margin:16px auto 0; text-align:center; }

/* ---------- 04 WHAT YOU GET. The anchor (E), Macca 30 Jul ----------
   One studio photograph holding the section down, the six numbered
   beside it. The heading carries the title, so there is no sub-label.

   This is the ONE section on this design that gives up the centre axis,
   which is the rule everything else here runs on. Macca picked it
   knowing that: six bare labels had no weight, and this is what gives
   them some. The heading stays on the axis, so the break is the body
   only and the section still reads as part of the page. ---------- */
.rl [data-type="incl"] .incl{ margin-top:0; }
.rl [data-type="incl"] .body{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,3.6vw,52px); align-items:center;
  margin-top:clamp(34px,4.2vw,52px); }
/* shorter than it was (Macca 30 Jul), same call as the scroller */
.rl .wg-anchor{ position:relative; overflow:hidden;
  border:1px solid var(--line); aspect-ratio:4/3.9; background:var(--black); }
.rl .wg-anchor img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.6); }
.rl [data-type="incl"] .incl-grid{ grid-template-columns:1fr; gap:0;
  max-width:none; margin-inline:0; counter-reset:wg; }
.rl [data-type="incl"] .incitem{ counter-increment:wg; display:grid;
  grid-template-columns:auto 1fr; align-items:baseline; gap:16px;
  text-align:left; padding:clamp(13px,1.6vw,18px) 0;
  border-bottom:1px solid var(--line2);
  font-family:'Acier',sans-serif; text-transform:uppercase;
  color:var(--white); font-size:clamp(14px,1.5vw,19px); line-height:1.1; }
.rl [data-type="incl"] .incitem:first-child{ border-top:1px solid var(--line2); }
.rl [data-type="incl"] .incitem::before{
  content:counter(wg,decimal-leading-zero);
  font-size:11px; color:var(--beige); letter-spacing:.06em; }

/* what building a REVL includes, wherever the content puts it */
.rl .incl-t{ text-align:center; }
.rl .incl-grid{ background:none; border:0; grid-template-columns:repeat(3,1fr);
  gap:0 clamp(20px,2.6vw,36px); max-width:820px; margin-inline:auto; }
.rl .incitem{ background:none; padding:13px 0;
  border-bottom:1px solid var(--line2); text-align:left; font-size:13px; }

/* ---------- 05 FROM THE NETWORK ---------- */
.rl .voices{ grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.rl .vp{ aspect-ratio:1/1; }
.rl .vq{ margin-top:18px; font-size:13px; line-height:1.6; font-weight:300; }
/* white and bold, same call as the scroller (Macca 30 Jul) */
.rl .vn{ margin-top:14px; font-size:11px; letter-spacing:.16em;
  color:var(--white); font-weight:700; }

/* ---------- 06 WHERE YOU COULD BUILD ----------
   The explorer is a real component with its own alignment. It is capped
   and centred as a block and keeps its own insides. */
.rl [data-type="territory"] #tx-root{ max-width:900px; margin-inline:auto;
  text-align:left; }
.rl [data-type="territory"] .tx-crumb{ justify-content:center; }
.rl [data-type="territory"] .tx-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,224px));
  justify-content:center; }
.rl [data-type="territory"] .tx-list{ align-items:stretch; }
.rl [data-type="territory"] .tx-flag{ text-align:center; max-width:70ch;
  margin-inline:auto; }
.rl [data-sec="opportunity"]{ padding-block:clamp(112px,14vh,180px); }

/* ---------- 07 HOW YOU LAUNCH ----------
   Six stages will not read across a 900px measure, so they go three and
   three. The dots keep the sequence without a rule to hang them on. */
.rl .track{ background:none; border:0; gap:clamp(20px,2.6vw,34px);
  grid-template-columns:repeat(3,1fr); max-width:840px; margin-inline:auto; }
.rl .node{ background:none; padding:0; text-align:center; }
.rl .node .dot{ width:11px; height:11px; border-radius:50%;
  border:1px solid var(--beige); background:var(--black);
  margin:0 auto 16px; }
.rl .node.first .dot{ background:rgba(204,203,188,.4); }
.rl .nw{ font-size:10px; letter-spacing:.14em; color:var(--beige); }
.rl .nt{ font-family:'Manrope',sans-serif; text-transform:none;
  font-weight:600; font-size:14px; color:var(--white); margin:8px 0 6px;
  line-height:1.2; }
.rl .nd{ font-size:12px; color:var(--grey); line-height:1.5; }
.rl [data-sec="path"]{ padding-bottom:clamp(112px,14vh,180px); }

/* ---------- 08 BOOK A CALL ----------
   Centred like the rest: what the call covers two by two, then the
   calendar under it on the same axis. */
.rl [data-sec="book"]{ padding-top:clamp(118px,15vh,188px); }
.rl [data-type="book"] .duo{ grid-template-columns:1fr;
  gap:clamp(26px,3.2vw,40px); justify-items:center; }
.rl [data-type="book"] .col-a,
.rl [data-type="book"] .col-b{ width:100%; }
.rl .expect{ max-width:720px; margin-inline:auto; grid-template-columns:1fr 1fr; }
/* ticks back in, same call as the scroller (Macca 30 Jul) */
.rl .bxi{ display:flex; gap:13px; align-items:flex-start; font-size:13.5px;
  padding:15px 18px; text-align:left; }
.rl .bxi::before{ content:''; flex:0 0 auto; width:5px; height:10px;
  margin-top:4px; border-right:1px solid var(--beige);
  border-bottom:1px solid var(--beige); transform:rotate(45deg); }
.rl .bk-inline{ max-width:460px; margin-inline:auto; text-align:left; }
/* the same softened join the scroller uses: the top of this section
   carries a little of 07's flat page black so the seam does not land */
.rl [data-type="book"] .scrimbg{ background:
  linear-gradient(180deg, var(--black) 0%, rgba(10,10,10,.88) 9%, rgba(10,10,10,0) 26%),
  linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.6) 45%, rgba(10,10,10,.92) 100%); }

/* ---------- 09 THE BUSINESS QUESTIONS ----------
   A question and its control. Capped and centred as a block, flush
   inside, because a centred question next to a centred plus is unusable. */
.rl [data-type="faq"] .qdeck{ text-align:left; max-width:820px;
  margin-inline:auto; gap:0; border-top:1px solid var(--line2); }
.rl .qcard{ border:0; border-bottom:1px solid var(--line2); border-radius:0;
  background:none; }
.rl .qcard.open{ background:none; }

/* ---------- responsive ----------
   Under 1000px the index has nowhere to stand, so it lies down: a slim
   strip under the header that scrolls sideways and still marks where you
   are. The strip scrolls inside itself, so the page never does. */
@media (max-width:1000px){
  .rl .lp-rail{ top:auto; bottom:0; left:0; right:0; width:auto; height:auto;
    display:flex; gap:0; overflow-x:auto; overflow-y:hidden;
    padding:0 var(--gut); background:rgba(10,10,10,.94);
    backdrop-filter:blur(6px); border-top:1px solid var(--line2);
    padding-bottom:env(safe-area-inset-bottom); }
  .rl .lp-rail::after{ display:none; }
  .rl .lp-rail a{ flex:0 0 auto; padding:13px 13px; white-space:nowrap; gap:8px; }
  .rl .lp-rail .rail-top{ margin-bottom:0; padding-bottom:13px;
    border-bottom:0; }
  .rl .lp-vert{ margin-left:0; }
  /* no index beside it on a phone, so nothing to pull back from */
  .rl .lp-foot{ margin-left:0; width:auto; padding-left:var(--gut); }
  .rl .lp-hdr{ padding-left:var(--gut); }
  .rl .lp-progress{ left:0; }
  /* the strip sits over the foot, so the page needs to end above it */
  .rl .lp-foot{ padding-bottom:calc(44px + 48px); }

  .rl [data-type="incl"] .body{ grid-template-columns:1fr; }
  .rl .wg-anchor{ aspect-ratio:16/9; }

  .rl [data-type="why"] .fr{ aspect-ratio:16/9; }
  .rl .why-plate{ margin-top:-90px; }
  .rl .track{ grid-template-columns:1fr 1fr; }
  .rl .voices{ grid-template-columns:1fr; }
  .rl .vp{ aspect-ratio:16/10; }
}
@media (max-width:760px){
  /* the community photograph is the point of 02, and a 16:6.4 band on a
     phone is a sliver the plate then covers. It goes portrait. */
  .rl [data-type="why"] .fr{ aspect-ratio:4/3; }
  .rl .why-plate{ margin-top:-48px; width:calc(100% - 24px); }
  .rl [data-type="why"] .rows-2{ grid-template-columns:1fr; }
  .rl [data-type="support"] .rows{ grid-template-columns:1fr; }
  .rl .facts{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .rl .track{ grid-template-columns:1fr; }
  .rl .incl-grid{ grid-template-columns:1fr; max-width:none; }
  .rl .expect{ grid-template-columns:1fr; }
  .rl .np-figs{ display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(16px,3vw,22px) 0; }
  .rl .np-figs .fig + .fig{ border-left:0; }
  .rl .np-figs .fig:nth-child(even){
    border-left:1px solid rgba(255,255,255,.28); }
  .rl .plate{ padding:24px 18px; }
  .rl .p{ font-size:15px; }
  .rl .fact{ display:flex; justify-content:space-between;
    align-items:baseline; gap:16px; padding:13px 16px; text-align:left; }
  .rl .fact .v{ text-align:right; margin-top:0; }
}