/* ============================================================
   THE LANDING PAGE — the room, and what follows it.
   10 September 2026.

   WHAT THIS FILE IS. The client asked for the reference's landing page:
   an opening built out of giant type in perspective, a line and two
   buttons held dead centre of it, and a run of full-bleed display
   sections beneath. This is that page, written from the reference's
   SYSTEM — its geometry, its sizes, its rhythm — and not from its code.
   None of the reference's markup, CSS or fonts are used. The typeface is
   GT America, which PRODUCT.md commits to, standing in for the
   reference's three proprietary faces.

   THE SIZES ARE MEASURED, NOT GUESSED. Read off the reference at a
   1440-wide window and written here in the site's own 10px-root rems:

       body copy            16.5px   1.2 leading   weight 500
       feature heading      34.4px   1.0 leading   weight 900  uppercase
       section heading      64.5px   0.9 leading   weight 900  uppercase
       display heading      97.5px   0.9 leading   -0.01em
       full-bleed display  165px     0.9 leading   -0.02em
       button               16px     weight 500    13.5/20.25 padding, pill

   WHAT IS NOT COPIED, AND WHY. The reference sells its own numbers,
   its clients' logos and three case studies. PRODUCT.md forbids
   testimonials, press and invented figures, so those three blocks carry
   Mynichefund's own subject instead — the counts, which are COUNTED
   from campaigns.js at run time rather than typed, the niches, which are
   read from the same file, and the positioning, which is a list of
   things this platform refuses to do.

   THE CAMPAIGN COLUMN IS NOT TOUCHED. lstack.css and lstack.js own it,
   it keeps its place in the flow directly under the room, and there is
   not one rule for it in this file. That was the client's condition.
   ============================================================ */

/* --- THE PALETTE -----------------------------------------------------
   One purple, three accents. The purple is the reference's own value,
   which the client named; the other three are picked to sit beside it at
   the same weight rather than sampled from anywhere. */
.leo{
  --leo-purple:#5E6160;
  --leo-lime:#C9F24E;
  --leo-amber:#FFC933;
  --leo-coral:#FF5D4B;

}

/* The full-bleed sections are wider than .shell's column. 100vw would
   include the scrollbar and hand the page a horizontal scroll of its own,
   so the overflow is clipped at the one element that owns the whole
   width. clip rather than hidden: hidden on a scroll container would
   break `position:sticky` inside the room. */
.leo .shell{overflow-x:clip}
/* A SECTION THAT IS AS WIDE AS THE WINDOW, from inside a column that is not.
   The margins CANCEL .shell's own padding rather than solving for the middle
   of the window: `margin-left:calc(50% - 50vw)` only lands on the window's
   edge when the column is centred in it, and .shell's is not — it carries a
   wide left gutter for the edge strip and a narrow right one, so every
   full-bleed section came out shifted by half the difference. Mirroring the
   two paddings is exact at both widths, and it keeps following .shell when
   the panel pushes the column across.

   THE STRIP IS THEN CLEARED FROM THE INSIDE. It is fixed, sixty pixels wide
   and part of the site, and a section running under it lost the first
   character of every display line. */
.leo-bleed{
  position:relative;
  margin-inline:calc(var(--shell-pad) * -1);
  padding-left:var(--edge-w);
}
/* except the room, which is meant to be the whole window: it is black, the
   strip is black, and the wordmark above it is fixed to the window rather
   than to the column, so the two have to agree about where the middle is. */
.leo-hero{padding-left:0}

/* --- THE BAR ---------------------------------------------------------
   The reference floats its navigation over the opening rather than
   putting it above it, so the room starts at the top of the window. The
   markup is untouched — this is the same .bar every page has, moved and
   recoloured for the one page that has a black stage under it. */
.leo .bar{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding-top:1.8rem; padding-bottom:1.8rem;
  color:var(--ink);
  transition:background var(--speed) var(--easing),
             backdrop-filter var(--speed) var(--easing);
}
/* THE BAR IS EMPTY UNTIL THE NAME LANDS IN IT. Only the house is there while
   the word is still on its way; the links fade up when it arrives, which is
   what makes the arrival mean something rather than just being a resize.
   leo.js sets .is-named at the end of the flight.

   visibility, not just opacity: a link at zero opacity is still a tab stop
   and still takes a click, and there is a whole opening's worth of page
   underneath these. */
.leo .bar-nav,.leo .bar-find,.leo .theme-btn{
  opacity:0; visibility:hidden;
  transition:opacity var(--speed-slow) var(--power3-out),
             visibility 0s linear var(--speed-slow);
}
.leo .bar.is-named .bar-nav,
.leo .bar.is-named .bar-find,
.leo .bar.is-named .theme-btn{
  opacity:1; visibility:visible;
  transition:opacity var(--speed-slow) var(--power3-out), visibility 0s;
}
.leo .bar-home svg{stroke:var(--ink)}
.leo .bar-nav a,.leo .bar-nav .label,.leo .bar-find{color:var(--ink)}
.leo .bar.is-named .bar-nav .label,.leo .bar.is-named .bar-find{opacity:.72}
.leo .bar .label:hover,.leo .bar .label:focus-visible{opacity:1}
.leo .theme-btn i{border-color:var(--ink); background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
/* Once the room is behind you the bar is over the page's own ground, so
   it takes the page's own ink back and lays a sheet of it behind itself.
   leo.js sets .is-past at the foot of the room. */
.leo .bar.is-past{
  color:var(--ink);
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter:blur(12px) saturate(140%);
}
.leo .bar.is-past .bar-home svg{stroke:var(--ink)}
.leo .bar.is-past .bar-nav .label,.leo .bar.is-past .bar-find{color:var(--ink)}
.leo .bar.is-past .theme-btn i{
  border-color:var(--ink); background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);
}

/* --- THE NAME, AND ITS FLIGHT ---------------------------------------
   Three states, one transform, and one number driving it.

       on the ceiling   tipped away, oversized, caps clipped by the top
                        edge — the plane the room's other three faces are
                        drawn on, without being on one
       standing up      as the camera flies down the room the word swings
                        upright and settles at full width across the top
       locked           small, at the bar's own left inset, for the rest
                        of the page

   THE TRANSFORM IS WHAT MOVES, not the layout. The element never leaves
   its fixed box at the top of the window: leo.js writes one
   perspective/translate/rotate/scale string per frame, so the whole
   flight is on the compositor and there is not a single reflow in it.
   This is also why it is one element and not a hand-off between two —
   a hand-off is where the earlier version of this page had its bug.

   transform-origin is the TOP CENTRE. That is what makes rotateX read as
   a ceiling: the far edge of the word drops toward the vanishing point
   while the near edge stays put on the frame. */
.leo-mark{
  position:fixed; top:0; left:0; width:100%; z-index:85;   /* 100%, not 100vw: vw includes the scrollbar */
  transform-origin:50% 0%; will-change:transform;
  text-decoration:none; pointer-events:none;
}
.leo-mark span{
  display:block; text-align:center; white-space:nowrap;
  font-family:var(--face); font-weight:900;
  
  font-size:1px; line-height:.78; letter-spacing:-0.02em;
  text-transform:uppercase;
  /* INK, NOT THE PURPLE. The purple came from the reference, where the name
     is the only colour on a black page. Here it is the one word on a page
     that is already one colour, and setting it in the page's own ink is what
     makes it read as the mark rather than as a highlight. The purple is still
     the accent everywhere else — the buttons, the counts, the tabs. */
  color:var(--ink);
}
/* Once it is in the bar it is a link again. It lands in the MIDDLE of the
   bar rather than at its left inset, so the house keeps the left corner and
   the name keeps the centre slot the bar was already built with. */
.leo-mark.is-locked{pointer-events:auto}
.leo-mark.is-locked span{transition:color var(--speed) var(--easing)}
.leo-mark.is-locked:hover span,.leo-mark.is-locked:focus-visible span{color:var(--ink)}

/* ==============================================================
   THE ROOM
   ============================================================== */

/* THREE WINDOWS OF SCROLL, ONE WINDOW OF PICTURE. The section is tall;
   the stage inside it is one window high and sticks to the top. The
   distance between the two IS the length of the flight, and leo.js reads
   its own progress off exactly that. */
.leo-hero{height:300vh; position:relative}
.leo-stage{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden;
  /* ONE GROUND FOR THE WHOLE PAGE. The stage was pinned to #000 in both
     worlds, on the argument that it is a lit room and a room does not
     change colour because the page around it did. That was wrong in
     practice: in the light world it made a black screen that ended on a
     seam and handed over to a white one, and no amount of fading hid the
     fact that the page was two colours. It takes --ground like everything
     else now, so the landing page is black from top to bottom in the dark
     world and paper from top to bottom in the light one — and the switch
     means something on this page instead of half of it. */
  background:var(--ground); color:var(--ink);
}

/* --- THE SCATTER ---
   The work, coming past once the room has opened out. The eight
   positions are the reference's own grid, which is a good scatter; the
   pictures in them are this site's. leo.js writes the transform. */
.leo-scatter{position:absolute; inset:0; z-index:2; pointer-events:none}
/* ONE PICTURE IN THE ARRANGEMENT. Its place and its size are inline
   percentages of the stage, written by leo.js from the grid — so the
   composition is described in one table and not in this file. Absolute
   positioning is what makes those percentages mean anything: without it
   the eight of them stack down the left in source order.

   The corner is in vmin. A 1.2rem radius scaled six times is a 7rem
   radius, which stops reading as a card and starts reading as a blob;
   this one is the same corner on the screen at every size it passes
   through. */
.leo-shot{
  position:absolute; overflow:hidden;
  opacity:0; will-change:transform,opacity;
  border-radius:1.4vmin;
  box-shadow:0 2.4rem 8rem rgba(0,0,0,.55);
}
.leo-shot img{width:100%; height:100%; object-fit:cover; display:block}

/* --- WHAT THE PAGE SAYS ---
   Pinned to the middle of the stage for the whole flight. z-index above
   both the room and the scatter: the type is what the visitor is meant to
   be reading while the rest moves. */
.leo-center{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.4rem; padding:0 var(--s4); text-align:center; pointer-events:none;
}
.leo-center > *{pointer-events:auto}
.leo-h1{
  margin:0; font-family:var(--face); font-weight:900;
  
  font-size:clamp(2.6rem, 4.4vw, 4.4rem); line-height:.93;
  letter-spacing:-0.02em; text-transform:uppercase; color:var(--ink);
}
.leo-h1 span{display:block}

/* --- THE TWO BUTTONS ---
   The reference's pill: 16px at weight 500, 13.5 by 20.25 of padding,
   fully rounded. One filled white, one drawn in a hairline. */
.leo-cta{display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center}
.leo-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.35rem 2.4rem; border-radius:999px; border:1px solid transparent;
  font-family:var(--face-ui); font-size:1.6rem; font-weight:500;
  line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background var(--speed) var(--easing),
             color var(--speed) var(--easing),
             border-color var(--speed) var(--easing),
             transform var(--micro) var(--easing);
}
.leo-btn:active{transform:scale(.96)}
/* The pair reads the same in both worlds because both are written in ink and
   ground rather than in black and white: filled is ink on ground, drawn is
   ground with an ink hairline. */
.leo-btn--fill{background:var(--ink); color:var(--ground)}
.leo-btn--fill:hover,.leo-btn--fill:focus-visible{background:var(--leo-purple); color:#fff}
.leo-btn--line{
  background:transparent; color:var(--ink);
  border-color:color-mix(in srgb, var(--ink) 45%, transparent);
}
.leo-btn--line:hover,.leo-btn--line:focus-visible{
  border-color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent);
}
/* the third one, for the sections below, which sit on the page's ground */
.leo-btn--ghost{
  background:transparent; color:var(--ink);
  border-color:color-mix(in srgb, var(--ink) 30%, transparent);
}
.leo-btn--ghost:hover,.leo-btn--ghost:focus-visible{border-color:var(--ink)}
/* and the filled one, on the page's ground rather than on the stage */
.leo-feat .leo-btn--fill,.leo-end .leo-btn--fill{background:var(--ink); color:var(--ground)}
.leo-feat .leo-btn--fill:hover,.leo-end .leo-btn--fill:hover,
.leo-feat .leo-btn--fill:focus-visible,.leo-end .leo-btn--fill:focus-visible{
  background:var(--leo-purple); color:#fff;
}
.leo-end .leo-btn--line{color:var(--ink); border-color:color-mix(in srgb, var(--ink) 30%, transparent)}
.leo-end .leo-btn--line:hover,.leo-end .leo-btn--line:focus-visible{
  border-color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent);
}

/* the hint at the foot of the stage — a rule that fills downward once */
.leo-scroll{
  position:absolute; left:50%; bottom:3.2rem; z-index:6;
  width:1px; height:5.6rem; background:color-mix(in srgb, var(--ink) 22%, transparent);
  transform:translateX(-50%); overflow:hidden;
}
.leo-scroll i{
  position:absolute; inset:0; background:var(--ink);
  transform:translateY(-100%); animation:leo-drip 2.4s var(--power2-in-out) infinite;
}
@keyframes leo-drip{
  0%{transform:translateY(-100%)}
  55%{transform:translateY(0)}
  100%{transform:translateY(100%)}
}

/* ==============================================================
   THE SECTIONS BELOW — on the page's own ground, in either world
   ============================================================== */

.leo-p{
  font-family:var(--face-ui); font-size:1.65rem; font-weight:500;
  line-height:1.35; color:var(--soft); margin:0;
}
.leo-p--mid{
  max-width:52ch; margin-inline:auto; text-align:center;
  padding-inline:var(--s4);
}
.leo-h2{
  margin:0; font-family:var(--face); font-weight:900;
  
  font-size:clamp(2.6rem, 3.4vw, 3.44rem); line-height:1;
  letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink);
}

/* THE FULL-BLEED DISPLAY LINE. The reference sets these as wide as the
   window will take and lets the last line run short; the size is solved
   from the window rather than clamped, so the line always reaches both
   gutters. --mega-fit is written by leo.js. */
.leo-mega{
  margin:0; padding:0 var(--s4);
  font-family:var(--face); font-weight:900;
  
  font-size:clamp(3.4rem, 6.8vw, 9.75rem); line-height:.88; letter-spacing:-0.02em;
  text-transform:uppercase; text-align:center; color:var(--ink);
  overflow-wrap:normal;
}
.leo-mega[data-tone="purple"]{color:var(--leo-purple)}
.leo-mega[data-tone="lime"]{color:var(--leo-lime)}
.leo-mega[data-tone="amber"]{color:var(--leo-amber)}
.leo-mega[data-tone="coral"]{color:var(--leo-coral)}
/* A single word gets fitted to the window instead of clamped — one word
   that stops short of the gutters reads as an accident, where a wrapped
   sentence that does the same reads as a line break. leo.js writes it. */
.leo-mega--wide{white-space:nowrap; font-size:1px; letter-spacing:-0.02em}
/* On the lime and amber the ink is nearly invisible on white paper, so in
   the light world those two take a dark edge instead of a flat fill —
   same drawing, legible ground. */
:root[data-world="white"] .leo-mega[data-tone="lime"],
:root[data-world="white"] .leo-mega[data-tone="amber"]{
  -webkit-text-stroke:1px var(--ink);
}

/* --- IN NUMBERS --- */
.leo-counts{padding-block:12rem 10rem}
.leo-counts_row{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--s4); padding:0 var(--s4); align-items:end;
}
.leo-count b{
  display:block; font-family:var(--face); font-weight:900;
  
  font-size:clamp(4.8rem, 8vw, 11rem); line-height:.84; letter-spacing:-0.02em;
}
.leo-count:nth-child(1) b{color:var(--leo-purple)}
.leo-count:nth-child(2) b{color:var(--leo-lime)}
.leo-count:nth-child(3) b{color:var(--leo-amber)}
.leo-count:nth-child(4) b{color:var(--leo-coral)}
:root[data-world="white"] .leo-count:nth-child(2) b,
:root[data-world="white"] .leo-count:nth-child(3) b{-webkit-text-stroke:1px var(--ink)}
.leo-count span{
  display:block; margin-top:1rem;
  font-family:var(--face); font-weight:700;
  
  font-size:clamp(1.4rem, 1.6vw, 2rem); line-height:1.05;
  letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink);
}

/* --- WHAT IT IS --- */
.leo-feat{padding-block:2rem 10rem; position:relative}
/* THE WORD IS BEHIND THE PICTURE, NOT ABOVE THE SENTENCE. It is set to the
   right, where the picture is, and the picture is pulled up over its foot —
   which is the reference's arrangement and the reason the word can be this
   size without fighting anything. It was overlapping the text column,
   which is the one place it must not go. */
.leo-feat_word{
  position:relative; z-index:0; margin:0; padding:0 var(--s4);
  font-family:var(--face); font-weight:900;
  
  font-size:16vw; line-height:.8; letter-spacing:-0.02em;
  text-transform:uppercase; text-align:right; pointer-events:none;
}
.leo-feat_word[data-tone="purple"]{color:var(--leo-purple)}
.leo-feat_word[data-tone="lime"]{color:var(--leo-lime)}
.leo-feat_word[data-tone="amber"]{color:var(--leo-amber)}
:root[data-world="white"] .leo-feat_word[data-tone="lime"],
:root[data-world="white"] .leo-feat_word[data-tone="amber"]{-webkit-text-stroke:1px var(--ink)}
.leo-feat_in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:var(--s5); align-items:center; padding:0 var(--s4);
}
.leo-feat_text{display:flex; flex-direction:column; gap:2rem; align-items:flex-start}
.leo-feat_text .leo-p{max-width:42ch}
.leo-feat_media{
  margin:-7vw 0 0; border-radius:1.6rem; overflow:hidden; aspect-ratio:4/3;
  position:relative; z-index:1;
}
.leo-feat_media img{width:100%; height:100%; object-fit:cover; display:block}

/* --- BY NICHE --- */
.leo-niches{padding-block:8rem 10rem}
.leo-tabs{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin:4rem auto 2.4rem; padding:.6rem;
  border-radius:3.2rem; width:fit-content; max-width:min(100%, 108rem);
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.leo-tab{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:1rem 1.8rem; border-radius:999px; color:var(--soft);
  font-family:var(--face-ui); font-size:1.5rem; font-weight:700; line-height:1.1;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.leo-tab:hover{color:var(--ink)}
.leo-tab[aria-selected="true"]{background:var(--leo-purple); color:#fff}
.leo-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(22rem, 20vw, 28rem);
  gap:var(--s3); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4rem var(--s4) 1rem; scrollbar-width:none;
}
.leo-strip::-webkit-scrollbar{display:none}
.leo-tile{
  display:block; text-decoration:none; color:inherit; scroll-snap-align:start;
}
.leo-tile_pic{
  display:block; aspect-ratio:3/4; border-radius:1.4rem; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground));
}
.leo-tile_pic img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--speed-slow) var(--power3-out)}
.leo-tile:hover .leo-tile_pic img{transform:scale(1.04)}
.leo-tile b{
  display:block; margin-top:1.4rem;
  font-family:var(--face); font-weight:700;
  
  font-size:1.8rem; letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink);
}
.leo-tile i{
  display:block; margin-top:.4rem; font-style:normal;
  font-family:var(--face-ui); font-size:1.3rem; color:var(--soft);
}

/* --- THE RULE --- */
.leo-say{padding-block:8rem 10rem}
.leo-say .leo-p--mid{margin-top:3.2rem}
.leo-boxes{
  list-style:none; margin:6rem 0 0; padding:0 var(--s4);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s4);
}
.leo-box{
  border-radius:2.4rem; padding:3.6rem 3rem 4rem;
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background:color-mix(in srgb, var(--ink) 4%, transparent);
  display:flex; flex-direction:column; gap:1.2rem;
}
.leo-box_k{
  font-family:var(--face-data); font-size:1.2rem; letter-spacing:.16em;
  color:var(--leo-purple);
}
.leo-box h3{
  margin:0; font-family:var(--face); font-weight:900;
  
  font-size:2.8rem; line-height:1; letter-spacing:-0.01em;
  text-transform:uppercase; color:var(--ink);
}
.leo-box p{margin:0; font-family:var(--face-ui); font-size:1.55rem;
  line-height:1.4; color:var(--soft)}

/* --- THE ARTISTS --- */
.leo-artists{padding-block:6rem 10rem; overflow:hidden}
.leo-rail_wrap{position:relative; margin-top:4rem}
.leo-rail{
  display:flex; gap:var(--s3); overflow-x:auto; scroll-behavior:smooth;
  padding:0 var(--s4) 1rem; scrollbar-width:none; scroll-snap-type:x mandatory;
}
.leo-rail::-webkit-scrollbar{display:none}
.leo-card{
  flex:0 0 auto; width:clamp(22rem, 22vw, 30rem);
  text-decoration:none; color:inherit; scroll-snap-align:center;
  border-radius:1.8rem; overflow:hidden; position:relative;
  background:color-mix(in srgb, var(--ink) 92%, var(--ground));
}
.leo-card img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block}
.leo-card_say{
  position:absolute; left:0; right:0; bottom:0;
  padding:5rem 2rem 1.8rem;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}
.leo-card_say b{
  display:block; font-family:var(--face); font-weight:700;
  
  font-size:2.25rem; line-height:1.05; letter-spacing:-0.01em;
  text-transform:uppercase; color:var(--leo-coral);
}
.leo-card_say i{
  display:block; margin-top:.3rem; font-style:normal;
  font-family:var(--face-ui); font-size:1.3rem; color:rgba(255,255,255,.72);
}
.leo-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:4.8rem; height:4.8rem; border-radius:999px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background:color-mix(in srgb, var(--ground) 78%, transparent);
  backdrop-filter:blur(8px); color:var(--ink); font-size:1.8rem; line-height:1;
}
.leo-arrow--l{left:1.6rem}
.leo-arrow--r{right:1.6rem}
.leo-arrow:hover{border-color:var(--ink)}

/* --- THE FORK --- */
.leo-end{padding-block:8rem 4rem}
.leo-end .leo-p--mid{margin-top:3.2rem}
.leo-end .leo-cta{margin-top:3.2rem}
.leo-marquee{
  margin-top:8rem; overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:2rem 0;
}
.leo-marquee_in{display:inline-block; animation:leo-run 46s linear infinite}
.leo-marquee span{
  font-family:var(--face); font-weight:700;
  
  font-size:2.2rem; letter-spacing:-0.01em; text-transform:uppercase;
  color:var(--soft); padding:0 1.6rem;
}
.leo-marquee span::after{content:"\00b7"; padding-left:1.6rem; color:var(--leo-purple)}
@keyframes leo-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- THE FOOTER'S NAME --- removed 24 September 2026 (client: "delete the
   big mynichefund there and adjust the page there"). The giant grey name run
   gutter to gutter above the small print is gone; the footer now closes the
   way every other page's does — the columns, then the bottom bar at the
   footer's own --s6 — so the landing page and the rest end alike. The
   object logo in the bar carries the name. */

/* ==============================================================
   NARROWER WINDOWS
   ============================================================== */
@media (max-width:1000px){
  .leo-feat_in{grid-template-columns:1fr; gap:3.2rem}
  .leo-feat_word{font-size:24vw; text-align:left}
  .leo-feat_media{margin-top:-5vw}
  .leo-boxes{grid-template-columns:1fr}
  .leo-counts_row{grid-template-columns:repeat(2, 1fr); row-gap:5rem}
}
@media (max-width:768px){
  /* .shell adds the strip to its own left gutter below 768; the sections
     have to subtract exactly the same thing. */
  .leo-bleed{margin-left:calc((var(--edge-w) + var(--shell-pad)) * -1)}

  /* THE OPENING RUNS ON A PHONE TOO.

     It used to be taken out at this width — the hero went to height:auto,
     the stage stopped being sticky, the work was display:none — so a phone
     arrived on the two buttons with nothing in front of them and nothing
     to scroll through. The whole first window was simply missing on the
     device most people would open this on.

     It is the same runway now, three windows long, only measured in svh:
     the small-viewport unit is the one that does not change when a phone's
     URL bar slides away, so the length of the flight cannot move under the
     reader mid-scroll the way 100vh would.

     The stage keeps the sticky rule it has above — nothing to restate. The
     work gets its own portrait arrangement in leo.js, since eight
     landscape rectangles on a phone are eight tall slivers. */
  .leo-hero{height:300svh}
  .leo-center{padding:0 var(--s3); gap:2rem}
  .leo-scroll{bottom:2.4rem; height:4.4rem}
  .leo-counts{padding-block:8rem 6rem}
  .leo-strip{grid-auto-columns:clamp(18rem, 62vw, 24rem)}
  .leo-tabs{border-radius:2rem}
}

/* ==============================================================
   LESS MOTION
   The flight, the drip and the running names are all decoration. The room
   is still a room — it is simply already at the end of itself, which is
   where the campaigns are.
   ============================================================== */
@media (prefers-reduced-motion: reduce){
  .leo-hero{height:100vh}
  .leo-shot{opacity:1; transform:none}
  .leo-scroll i{animation:none; transform:none}
  .leo-marquee_in{animation:none}
  .leo-tile_pic img{transition:none}
}

/* ============================================================
   THE PANELS — one stage, three things said.

   The opening used to hold a single line and both buttons for the whole
   flight, which meant the only thing the first screen did was show work
   going past. It says something now: the name of the thing, then the rule,
   then how the money works — and only then are you offered the two things
   you can do. Nothing moves house to do it; the room, the wordmark and
   the frame are exactly where they were.

   THEY ARE STACKED, NOT SEQUENCED IN FLOW. One grid cell, three children
   in it, so the box never changes height and nothing below it shifts as
   the message changes. leo.js writes opacity and a small rise per frame
   off the same progress that drives the scatter — a CSS transition would
   fight the scroll instead of following it, so there is none here.
   ============================================================ */
.leo-slides{display:grid; place-items:center; width:100%}
.leo-slide{
  grid-area:1/1; text-align:center; opacity:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:1.8rem;
  will-change:opacity, transform;
  transform:translateY(1.4rem);
  /* LEAVING is quick and plain, so the old line is nearly gone by the time
     the new one starts — two headlines through each other on a photograph
     is a smear */
  transition:opacity .3s var(--power2-in-out), transform .45s var(--power2-in-out);
}
/* a panel already passed leaves upward, one still to come waits below, so
   the text always moves the way the page is going */
.leo-slide.is-before{transform:translateY(-1.4rem)}
/* ARRIVING waits for the old one to clear, then settles in slowly. The
   compositor runs this on its own clock — see panels() in leo.js for why
   the scroll no longer drives it frame by frame. */
.leo-slide.is-on{
  opacity:1; transform:none; pointer-events:auto;
  transition:opacity .6s var(--power3-out) .26s, transform .8s var(--power3-out) .26s;
}
.leo-slide .leo-h1{margin:0}
.leo-slide_say{
  margin:0; max-width:42ch;
  font-family:var(--face-ui); font-size:1.6rem; line-height:1.45;
  color:color-mix(in srgb, var(--ink) 66%, var(--ground));
  text-shadow:0 0 3rem var(--ground), 0 0 8rem var(--ground);
}
/* THE BUTTONS AND THE LINE UNDER THEM, on the same terms as the panels:
   leo.js says when, the transition says how. The hidden state is scoped to
   .is-run, which leo.js sets once it is driving the stage — if the script
   never runs, the buttons are simply there rather than waiting forever for
   a class nobody will add. */
.leo-cta{will-change:opacity, transform}
.leo-stage.is-run .leo-cta,
.leo-stage.is-run .leo-next{
  opacity:0; transform:translateY(1.4rem); pointer-events:none;
  transition:opacity .3s var(--power2-in-out), transform .45s var(--power2-in-out);
}
.leo-stage.is-run .leo-cta.is-on{
  opacity:1; transform:none; pointer-events:auto;
  transition:opacity .6s var(--power3-out) .1s, transform .8s var(--power3-out) .1s;
}
/* a beat behind the buttons: the alternative, not a third thing to weigh */
.leo-stage.is-run .leo-next.is-on{
  opacity:1; transform:none; pointer-events:auto;
  transition:opacity .6s var(--power3-out) .5s, transform .8s var(--power3-out) .5s;
}
.leo-scroll{transition:opacity .4s var(--power2-in-out)}
.leo-scroll.is-off{opacity:0}

/* no script: the first thing said, and the two ways on */
.leo-stage:not(.is-run) .leo-slide[data-slide="0"]{opacity:1; transform:none}
.leo-stage:not(.is-run) .leo-next{opacity:1}

@media (prefers-reduced-motion: reduce){
  /* no flight to read the panels off, so the opening simply states the
     first one and offers the two things you can do */
  .leo-slide{opacity:0 !important; transform:none !important}
  .leo-slide[data-slide="0"]{opacity:1 !important}
  .leo-cta{opacity:1 !important; transform:none !important}
  .leo-slide,.leo-cta,.leo-next,.leo-scroll{transition:none !important}
  .leo-stage.is-run .leo-cta,.leo-stage.is-run .leo-next{pointer-events:auto}
}

/* THE PANELS NEED A GROUND, AND ONLY WHEN THE WORK IS BEHIND THEM.

   At the top of the flight the words sit on empty paper and read fine. By
   the middle the scatter has filled the frame and they are ink on
   photographs — "All or nothing" all but disappeared into somebody's pink
   hoodie. The halo on the type alone was not enough; a picture is not a
   flat ground and a glow only holds against one.

   So: a soft pool of the page's own ground behind the centre, no edge to
   it anywhere, and leo.js fades it in on the SAME number the scatter comes
   in on. At the start there is nothing there, because there is nothing to
   hold back. It is never a box and never a panel — at full strength it is
   still only three quarters of the ground, so the work stays visible
   through it. */
.leo-center::before{
  content:""; position:absolute; inset:-10%; z-index:-1; pointer-events:none;
  opacity:var(--leo-pool, 0);
  background:radial-gradient(52% 42% at 50% 46%,
    color-mix(in srgb, var(--ground) 76%, transparent) 0%,
    color-mix(in srgb, var(--ground) 52%, transparent) 42%,
    transparent 72%);
}

/* --- THE THIRD WAY OUT ------------------------------------------------
   Quieter than the two buttons on purpose. It is not a third choice to
   weigh, it is the answer to "is this the end of the page" — so it is a
   line of small caps and a rule that keeps filling downward, not a pill.
   leo.js brings it in just after the buttons and it stays. */
.leo-next{
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
  margin-top:.6rem; text-decoration:none; color:inherit;
  opacity:0; will-change:opacity, transform;
}
.leo-next_say{
  font-family:var(--face-data); font-size:1.15rem; letter-spacing:.14em;
  text-transform:uppercase; color:color-mix(in srgb, var(--ink) 62%, var(--ground));
  text-shadow:0 0 2.4rem var(--ground), 0 0 6rem var(--ground);
  transition:color var(--speed) var(--easing);
}
.leo-next_say b{font-weight:400; color:var(--ink)}
.leo-next:hover .leo-next_say,.leo-next:focus-visible .leo-next_say{color:var(--ink)}
.leo-next_rule{
  position:relative; display:block; width:1px; height:4.4rem; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 20%, transparent);
}
.leo-next_rule i{
  position:absolute; inset:0; background:var(--ink);
  transform:translateY(-100%); animation:leo-drip 2.4s var(--power2-in-out) infinite;
}
@media (prefers-reduced-motion: reduce){
  .leo-next{opacity:1 !important; transform:none !important}
  .leo-next_rule i{animation:none; transform:none}
}

/* ==============================================================
   THE NEXT CAMPAIGN ARRIVES BEFORE THE ROOM LETS GO

   The column is pulled up into the hero's last stretch, so over the final
   part of the scroll the first card rises into the bottom of the screen
   under "or keep scrolling" and the line shows what it means.

   HOW FAR IS MEASURED, NOT WRITTEN — see peek() in leo.js. It was a fixed
   8rem + 18vh here, which cleared the line on a tall window and ran the
   sort row into it on a shorter one: the line sits a fixed distance below
   the middle of the screen, and 18vh is not a fixed distance from anything.
   leo.js reads where the line ends and stops the column a set gap below it.
   ============================================================== */


/* THE COMPACT BAR ON THE LANDING PAGE (13 September 2026). The floating bar
   keeps its fade-in and its sheet, at the new height. Log in keeps its
   ground-coloured word on the ink pill: the rules above set every nav word
   to ink and dim it, which on the pill would be ink on ink. */
.leo .bar{padding-top:.8rem; padding-bottom:.8rem}
.leo .bar .bar-actions .bar-nav li:last-child .label,
.leo .bar.is-named .bar-actions .bar-nav li:last-child .label,
.leo .bar.is-past .bar-actions .bar-nav li:last-child .label{color:var(--ground); opacity:1}
.leo .bar .bar-actions .bar-nav li:last-child .label:hover,
.leo .bar .bar-actions .bar-nav li:last-child .label:focus-visible{color:#fff}


/* ============================================================
   AFTER THE WALL (13 September 2026)
   The profile page's panels — a whisper of ink over the ground, rounded
   at 2.8rem — holding the numbers, how it works, the niche browser, the
   questions and the closing ask. The landing page's four colours stay on
   the numbers only; everything else is ink, soft and the one purple on
   hover, as on the rest of the site.
   ============================================================ */
/* one column, pinned to the page's width: left to size itself, the column
   grew to the niche strip's full row of tiles and ran every panel off a
   phone's screen */
.lp{display:grid; grid-template-columns:minmax(0, 1fr); gap:1.6rem; max-width:132rem; margin:9.6rem auto 0;
  position:relative}   /* the thread below is measured against this box */
.lp-panel{min-width:0; position:relative; z-index:1}   /* content over the thread */

/* THE DRAWN BORDER — one line threading the four panels, drawn by the
   page's own scroll. leo.js builds the path and scrubs stroke-dashoffset;
   everything here is only how it looks. See the long note in leo.js.

   FULL BLEED, not the container's width: left/right are pulled to the
   window edges with the 50%/50vw trick, because the panels have no side
   padding and a vertical drawn at the container's edge would run through
   the left edge of every paragraph.

   vector-effect keeps the stroke exactly 1px while the viewBox is stretched
   to the section stack's height — without it a non-uniform scale would
   render the horizontals and the verticals at different thicknesses. */
.lp-thread{
  position:absolute; top:0; bottom:0;
  left:calc(50% - 50vw); right:calc(50% - 50vw);
  width:100vw; height:100%;
  pointer-events:none; z-index:0; overflow:visible;
}
/* THE BUS. It shares the thread's coordinate box exactly — same top, same
   full-bleed left — so leo.js can hand it a point straight off the path with
   no conversion. translate(-50%,-50%) after the point centres it on the line
   rather than hanging it off the corner.

   It fades in on .is-on, which leo.js sets only once the model has actually
   loaded: a model-viewer with nothing in it is a blank square, and a blank
   square sliding down the page is worse than no bus at all. */
.lp-bus{
  position:absolute; top:0; left:calc(50% - 50vw);
  /* an explicit height, not aspect-ratio: model-viewer's own :host rule sets
     a default height and wins, so the box came out 70 wide by 150 tall */
  width:clamp(6.4rem, 8vw, 11rem); height:clamp(6.4rem, 8vw, 11rem);
  /* BEHIND THE WORDS, with the thread (z-index 0) and under .lp-panel (1).
     The drops run in the page's outer margin, which is 5px wide on a phone —
     no bus fits there, so on a drop it has to come inboard over the reading
     column. Above the text it covered a heading; below it, the type draws
     over the bus and stays perfectly legible while the bus passes behind.
     The panels have no fill any more, so nothing else hides it. */
  z-index:0; pointer-events:none;
  opacity:0; transition:opacity .5s var(--easing);
  --poster-color:transparent; background:transparent;
}
.lp-bus.is-on{opacity:1}
model-viewer.lp-bus::part(default-progress-bar){display:none}
@media (prefers-reduced-motion:reduce){.lp-bus{display:none}}

.lp-thread path{
  fill:none; stroke:var(--rule); stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-linecap:square; stroke-linejoin:miter;
}
/* NO PANEL FILL (23 Sept 2026, client: "i dont like this big bubbles
   (background) everywhere ... however the small ones that are used for
   'log in' 'support' i like those"). The tinted rounded box is gone; the
   padding that shaped it stays as VERTICAL rhythm only, so the content
   now aligns to the page grid instead of sitting inset inside a card.
   Pills and buttons keep their fills — those were never the complaint. */
/* THE LINES WENT (23 September 2026, same day they arrived). A hairline at
   the head of every section was the specimen-sheet reading of the reference;
   the client tried it and preferred the page without: "we liked it more
   without the lines". The sections are told apart by their headings and
   their air, which is what they were doing between the fills going and the
   lines arriving. Do not put them back without being asked. */
.lp-panel{
  margin:0; padding:clamp(2.4rem, 4vw, 5.6rem) 0; color:var(--ink);
}
.lp-head{margin:0 0 clamp(2.4rem, 3.2vw, 4rem)}
.lp-head--row{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.lp-k{
  margin:0 0 1.2rem; font-family:var(--face-ui); font-weight:700; font-size:1.2rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--soft);
}
.lp-h{
  margin:0; max-width:20ch; font-family:var(--face-ui); font-weight:600;
  font-size:clamp(3rem, 4.4vw, 5.6rem); line-height:1.02; letter-spacing:-0.02em; text-wrap:balance;
}
.lp-p{
  margin:1.6rem 0 0; max-width:52ch; font-family:var(--face-ui);
  font-size:1.7rem; line-height:1.5; letter-spacing:-0.011em; color:var(--soft);
}
.lp-p a,.lp-q p a,.lp-small a{color:var(--ink); text-underline-offset:.2em}

/* ---- the numbers ---- */
.lp-nums_row{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2.4rem}
.lp-nums .leo-count{display:flex; flex-direction:column; gap:1.2rem; min-width:0}
.lp-nums .leo-count b{
  display:block; font-size:clamp(5.2rem, 7.2vw, 9.6rem); line-height:.9; letter-spacing:-0.02em;
}
.lp-nums .leo-count span{
  display:block; font-family:var(--face-ui); font-size:1.3rem; font-weight:600; line-height:1.35;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}

/* ---- how it works ---- */
.lp-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.2rem}
.lp-step{padding:clamp(2rem, 2.4vw, 3.2rem) 0}   /* card fill removed with .lp-panel above */
/* THE THREE WORDS HEAD THE THREE COLUMNS (24 September 2026). Each word is
   its step's h3, at the size the trio heading had, and the step's own title
   drops to a bold line beneath it. The eyebrow is the section's heading now,
   so the gap under it is the eyebrow's own 1.2rem — the words are the
   heading line, and they sit where a heading would. */
.lp-head--trio{margin-bottom:0}
.lp-steps--trio .lp-step{padding-top:0}
/* PASSION / INSPIRE / CONTRIBUTE IN CAPS (24 September 2026, client, after
   leonardo.ai's headlines): Outfit 900 — the weight of the wordmark —
   uppercase on a 0.9 leading. Sized off each column's own width (cqi), not
   the window's: CONTRIBUTE, the longest, is 6.35em wide in these caps, so
   15cqi holds it at 95% of its column at every width and it never runs into
   the next one. All three columns are equal, so all three words come out the
   same size. Was: 600, sentence case, clamp(3.2rem, 3.9vw, 5rem). */
/* NOT IN CAPS ANY MORE (25 September 2026, client: "make these 3 not all
   caps"). Written as they are in the markup — Passion, Inspire, Contribute —
   at the same weight and size. */
.lp-steps--trio .lp-step{container-type:inline-size}
.lp-step .lp-step_w{
  margin:0; font-family:var(--face); font-weight:900;
  font-size:clamp(2.8rem, 15cqi, 8rem); line-height:.9; letter-spacing:-0.02em; color:var(--ink);
}
.lp-step .lp-step_t{
  margin:1.8rem 0 0; font-family:var(--face-ui); font-weight:600;
  font-size:2rem; line-height:1.2; letter-spacing:-0.02em; color:var(--ink);
}
/* THREE LINES EACH (24 September 2026, client: "3 line each of these instead
   of 2"). The three texts are 75, 101 and 117 characters long, so no single
   measure makes all three wrap to three lines — measured at 15.5px, the
   widths that give exactly three are 182-256px, 252-340px and 268-388px, and
   those ranges do not overlap. Each gets its own, set well inside its range
   so a browser's slightly different font metrics cannot tip it to two or
   four, and balanced so the three lines come out even rather than two full
   and a short one.

   THESE WIDTHS BELONG TO THIS COPY. Change a sentence and its measure has to
   be found again. Desktop only: below 900px the columns become a list and
   the text runs the width of the screen. */
@media (min-width:901px){
  .lp-steps--trio .lp-step>p:not(.lp-step_t){text-wrap:balance}
  .lp-steps--trio .lp-step:nth-child(1)>p:not(.lp-step_t){max-width:15.2em}
  .lp-steps--trio .lp-step:nth-child(2)>p:not(.lp-step_t){max-width:18.1em}
  .lp-steps--trio .lp-step:nth-child(3)>p:not(.lp-step_t){max-width:19.4em}

  /* ALL THREE SET LEFT (25 September 2026, client: "line up the border for
     passion, inspire, contribution, so the text is starting on the left
     margin everywhere"). Was left, centred and flush right (24 September):
     now each column's word, title and text start on that column's left
     edge. */
}
.lp-step h3{margin:2.4rem 0 0; font-family:var(--face-ui); font-weight:600; font-size:2.2rem; line-height:1.15; letter-spacing:-0.02em}
.lp-step p{margin:1rem 0 0; font-family:var(--face-ui); font-size:1.55rem; line-height:1.5; color:var(--soft)}

/* ---- the niche browser ---- */
.lp-gridbtn{
  display:inline-flex; align-items:center; gap:1rem; flex:none;
  height:4.4rem; padding:0 2rem 0 1.6rem; border-radius:1.6rem;
  background:color-mix(in srgb, var(--ink) 11%, var(--ground)); color:var(--ink); text-decoration:none;
  font-family:var(--face-ui); font-size:1.3rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.lp-gridbtn:hover,.lp-gridbtn:focus-visible{background:var(--ink); color:var(--ground); outline:none}
.lp-gridbtn i{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:.3rem; width:1.5rem; height:1.5rem}
.lp-gridbtn i s{display:block; background:currentColor; border-radius:.2rem}
.lp-tabs{display:flex; flex-wrap:wrap; gap:.8rem}
.lp-tabs .leo-tab{
  display:inline-flex; align-items:center; height:4rem; padding:0 1.6rem; margin:0;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--ground); color:var(--ink);
  font-family:var(--face-ui); font-size:1.4rem; font-weight:500; letter-spacing:0; text-transform:none;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.lp-tabs .leo-tab:hover{background:color-mix(in srgb, var(--ink) 10%, var(--ground)); color:var(--ink)}
.lp-tabs .leo-tab[aria-selected="true"]{background:var(--ink); color:var(--ground)}
.lp-tabs .leo-tab:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.lp-say{margin:2rem 0 0; font-family:var(--face-ui); font-size:1.4rem; color:var(--soft)}
.lp-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(18rem, 22vw, 26rem); gap:1.2rem;
  margin:2rem 0 0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:.4rem;
}
.lp-strip::-webkit-scrollbar{display:none}
.lp-strip .leo-tile{display:flex; flex-direction:column; min-width:0; margin:0; scroll-snap-align:start; color:var(--ink); text-decoration:none}
.lp-strip .leo-tile_pic{display:block; width:auto; height:auto; aspect-ratio:3 / 4; overflow:hidden; border-radius:2rem; margin:0 0 1.2rem;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground))}
.lp-strip .leo-tile_pic img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--speed-slow) var(--power3-out)}
.lp-strip .leo-tile:hover .leo-tile_pic img{transform:scale(1.04)}
.lp-strip .leo-tile b{display:block; margin:0; font-family:var(--face-ui); font-size:1.6rem; font-weight:600; letter-spacing:-0.01em; text-transform:none; line-height:1.25}
.lp-strip .leo-tile i{display:block; margin:.3rem 0 0; font-style:normal; font-family:var(--face-ui); font-size:1.15rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--soft)}

/* ---- questions: Cash App's accordion ---- */
/* ONE COLUMN, LIKE EVERY OTHER SECTION (24 September 2026, client: "can all
   of the 3 have the same border starting from left to right"). The heading
   used to sit in a left column with the questions beside it, so their rules
   began halfway across the page, at 663px on a 1440 screen, while the
   headings above them started at 60. Now the heading stacks over the list,
   with the same head margin the other sections use, and every rule runs from
   the left edge to the right. The answers keep their 54ch measure, so a full
   width row never turns into a full width paragraph. */
.lp-faq{display:block}
.lp-qs{border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.lp-q{border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.lp-q summary{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:2.2rem 0; cursor:pointer; list-style:none;
  font-family:var(--face-ui); font-size:clamp(1.7rem, 1.6vw, 2rem); font-weight:600; letter-spacing:-0.015em; line-height:1.3;
}
.lp-q summary::-webkit-details-marker{display:none}
.lp-q summary:focus-visible{outline:2px solid var(--ink); outline-offset:4px; border-radius:.6rem}
/* the plus, drawn from two hairlines, turns to a cross when open */
.lp-q summary i{
  position:relative; flex:none; width:3.6rem; height:3.6rem; border-radius:50%;
  background:var(--ground); transition:transform var(--speed) var(--power3-out), background var(--speed) var(--easing);
}
.lp-q summary i::before,.lp-q summary i::after{
  content:""; position:absolute; left:50%; top:50%; width:1.3rem; height:1.5px; border-radius:2px;
  background:var(--ink); transform:translate(-50%, -50%);
}
.lp-q summary i::after{transform:translate(-50%, -50%) rotate(90deg)}
/* OPEN, so it takes the spark — the reference does the same with its team
   accordion. The strokes stay ground-coloured, so it reads as a white cross
   on a blue disc. See --spark in tokens.css. */
.lp-q[open] summary i{transform:rotate(45deg); background:var(--spark)}
.lp-q[open] summary i::before,.lp-q[open] summary i::after{background:var(--ground)}
.lp-q summary:hover i{background:color-mix(in srgb, var(--ink) 12%, var(--ground))}
.lp-q[open] summary:hover i{background:var(--spark)}
.lp-q p{
  margin:-.6rem 0 2.4rem; max-width:54ch; font-family:var(--face-ui);
  font-size:1.6rem; line-height:1.55; color:var(--soft);
  animation:lp-open .45s var(--power3-out);
}
@keyframes lp-open{from{opacity:0; transform:translateY(-.6rem)}}

/* ---- the last panel: words left, a fan of the wall's photographs right ---- */
.lp-end{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  gap:clamp(2.4rem, 4vw, 6.4rem); align-items:center; overflow:hidden;
}
.lp-end .lp-h{margin:0; max-width:14ch}
.lp-end .lp-p{margin:1.6rem 0 0}
/* ============================================================
   THE CLOSING ASK, RE-SET 23 September 2026 (client: "delete the bubbles
   from these two and make them all caps, also space the whole thing
   differently, use more of the page ... get inspired from the cassette
   website code").

   NO PILLS. cassettemusic.com's footer does the same thing: its calls to
   action are uppercase words with a small arrow and nothing drawn around
   them. A pill is a box that says "this is a control"; at the end of a page
   that has just made its case, the words can carry that themselves.

   HIERARCHY WITHOUT SHAPE. The two used to be told apart by a filled pill
   against an outlined one. With no shapes left, the primary takes the
   page's ink and the secondary takes --soft: the difference is tone, not
   furniture, and it survives at any size.

   THE ARROW IS AN ADDITION the client did not ask for, and it is here for
   one reason — with the box gone and the case gone to capitals, two short
   labels side by side can read as headings rather than as things you can
   press. The site already speaks this way ("MORE CAMPAIGNS ->" in the
   foot), and so does the reference. It is one ::after; delete it and the
   layout does not move.
   ============================================================ */
.lp-btns{display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(2.8rem, 5vw, 6.4rem); margin-top:clamp(4.8rem, 7vw, 8rem)}
.lp-btn{
  display:inline-flex; align-items:center; gap:.8rem;
  height:auto; padding:0; border:0; border-radius:0; background:none;
  font-family:var(--face-ui); font-size:clamp(1.3rem, 1.5vw, 1.6rem); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  transition:color var(--speed) var(--easing);
}
.lp-btn::after{content:"\2192"; font-size:1.1em; line-height:1; transition:transform var(--speed) var(--easing)}
.lp-btn--fill{color:var(--ink)}
.lp-btn--line{color:var(--soft)}
.lp-btn:hover,.lp-btn:focus-visible{
  background:none; border:0; color:var(--ink); outline:none;
  text-decoration:underline; text-underline-offset:.55em; text-decoration-thickness:1px;
}
.lp-btn:hover::after,.lp-btn:focus-visible::after{transform:translateX(.3rem)}

/* the fan: the front card upright, the two behind it smaller, turned away
   and veiled a step, as the card stack holds the cards waiting behind */
.lp-fan{position:relative; height:clamp(30rem, 30vw, 40rem)}
.lp-fan_card{
  position:absolute; left:50%; top:50%;
  width:clamp(17rem, 17vw, 22rem); aspect-ratio:3 / 4; overflow:hidden; border-radius:2rem;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground));
  box-shadow:0 1.8rem 4.4rem color-mix(in srgb, #000 16%, transparent);
  transition:transform .7s var(--power3-out);
}
.lp-fan_card img{display:block; width:100%; height:100%; object-fit:cover}
.lp-fan_card::after{content:""; position:absolute; inset:0; background:var(--ground); opacity:0; pointer-events:none}
.lp-fan_card:nth-child(1){z-index:1; transform:translate(-112%, -50%) rotate(-9deg) scale(.86)}
.lp-fan_card:nth-child(3){z-index:1; transform:translate(12%, -50%) rotate(9deg) scale(.86)}
.lp-fan_card:nth-child(2){z-index:2; transform:translate(-50%, -52%)}
.lp-fan_card:nth-child(1)::after,.lp-fan_card:nth-child(3)::after{opacity:.15}
.lp-end:hover .lp-fan_card:nth-child(1){transform:translate(-124%, -50%) rotate(-12deg) scale(.86)}
.lp-end:hover .lp-fan_card:nth-child(3){transform:translate(24%, -50%) rotate(12deg) scale(.86)}
.lp-end:hover .lp-fan_card:nth-child(2){transform:translate(-50%, -55%)}

/* ---- the small print ---- */
.lp-small{
  margin:2.4rem auto 0; max-width:72ch; text-align:center;
  font-family:var(--face-ui); font-size:1.25rem; line-height:1.55; color:var(--soft);
}

@media (max-width:900px){
  .lp-end{grid-template-columns:minmax(0, 1fr)}
  .lp-fan{height:30rem}
  .lp-nums_row{grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:3.2rem}
  .lp-steps{grid-template-columns:minmax(0, 1fr)}
  /* stacked, each word needs air above it except the first */
  .lp-steps--trio .lp-step+.lp-step{padding-top:clamp(2.4rem, 6vw, 4rem)}
}
@media (max-width:600px){
  /* the fan fits the phone's panel: smaller cards, so the two behind stay
     inside its rounded edge instead of being cut by it */
  .lp-fan{height:26rem}
  .lp-fan_card{width:13.5rem}
  .lp{margin-top:6.4rem; gap:1.2rem}
  /* THE PHONE'S OWN PANEL RADIUS WENT 23 September 2026 with the fills. It
     survived the first sweep because that sweep looked for rules carrying a
     background AND a radius, and this one only ever carried the radius — so
     on a phone the section rule still curved up at both ends like the top of
     a card that was no longer there. Sweep on EITHER property, not both. */
  .lp-strip{grid-auto-columns:clamp(16rem, 58vw, 22rem)}
  .lp-head--row{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .lp-q p{animation:none}
  .lp-q summary i,.lp-strip .leo-tile_pic img,.lp-btn,.lp-gridbtn,.lp-tabs .leo-tab,.lp-fan_card{transition:none}
}


/* THE LAST PANEL, CENTRED AND WITHOUT PHOTOGRAPHS (13 September 2026) */
/* MORE OF THE PAGE (23 September 2026). The section was a heading, a line
   and two pills stacked tight inside a seventh of the window; the client
   asked for it to be spaced "differently, use more of the page". So the
   padding roughly doubles, the heading is no longer capped at 18ch and runs
   nearly twice the size of the ones above it — this is the last thing on the
   page and the only one asking for something, so it is allowed to be the
   biggest — and the air under it grows with it rather than staying at a flat
   1.6rem. Every value is a clamp on vw, so the phone gets the same
   proportions and not the desktop's absolute gaps. */
.lp-end{display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-block:clamp(9.6rem, 15vw, 19rem)}
.lp-end .lp-end_t{display:flex; flex-direction:column; align-items:center}
.lp-end .lp-h{
  margin:0 auto; max-width:none;
  font-size:clamp(3.6rem, 7.6vw, 9.6rem); line-height:.96;
}
.lp-end .lp-p{
  margin:clamp(2.4rem, 3.4vw, 4rem) auto 0;
  /* 56ch, not 36: at 36 the line broke after "everyone" and left "else."
     alone on a line of its own. The sentence is 52 characters, so a 56ch
     measure holds it on ONE line on a laptop and balance splits it evenly
     when the screen is too narrow for that. */
  max-width:56ch; text-wrap:balance;
  font-size:clamp(1.6rem, 1.9vw, 2.2rem);
}
.lp-end .lp-btns{justify-content:center}
.lp-fan{display:none}

/* no panel behind the closing ask — it sits on the page's own ground (13
   September 2026). Since 23 September no panel has a fill or a radius at
   all, so this says nothing the base rule does not; it is kept as the record
   that this one was first, and it still carries the section line above it. */
.lp-panel.lp-end{background:none; border-radius:0}

/* THE METAL (25 September 2026, client: these three headings "the same tone
   as mynichefund logo, like metalic"; then "not 3d"). The logo's objects sit
   around a mid grey (median 121/255, from 24 in the shadows to 220 on the
   highlights), so the letters are filled with that range as a band per line —
   light at the top, the dark seam just under the middle, light again at the
   foot — with fine tarnish (img/grain.webp) over it.
   THE GRAIN IS A PICTURE, NOT A FILTER. It was an SVG feTurbulence filter,
   and on letters this size the browser re-ran it on every frame of the scroll
   from this section down — the page went "super laggy" (client, same day). A
   tile is painted once. */
.lp-step .lp-step_w,#lpnicheh,#lpfaqh{
  background:url(img/grain.webp) 0 0 / 128px 128px repeat,
    linear-gradient(180deg,#c9cbca 0%,#9a9d9c 34%,#5c5f5e 52%,#6f7271 64%,#b3b5b4 100%) 0 0 / 100% 1lh repeat-y;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
/* BRIGHT SILVER, LIKE THE ENDS OF THE C (25 September 2026, client: "a
   different chrome color for these 3 sections ... more like this, its the
   endings of the letter C"). The C of the logo is a magnet whose two ends
   are near-white metal — measured 205-243 in the light, pitted with grey
   flecks, darker only at the edges. So: a pale silver band, and the pits
   (img/pits.webp) instead of the fine grain.
   On black the letters are that near-white silver itself. On white paper
   near-white letters would vanish, so there the same pitted silver is set a
   few steps deeper — still far lighter than the grey it replaced. */
.lp-step .lp-step_w,#lpnicheh,#lpfaqh{
  background:url(img/pits.webp) 0 0 / 128px 128px repeat,
    linear-gradient(180deg,#d9dad9 0%,#bfc1c0 30%,#8e9190 52%,#a9abaa 68%,#cfd0cf 100%) 0 0 / 100% 1lh repeat-y;
  -webkit-background-clip:text; background-clip:text;
}
/* on black it is the C's own near-white silver */
:root[data-world="black"] .lp-step .lp-step_w,
:root[data-world="black"] #lpnicheh,:root[data-world="black"] #lpfaqh{
  background:url(img/pits.webp) 0 0 / 128px 128px repeat,
    linear-gradient(180deg,#f5f5f4 0%,#e4e5e4 30%,#c3c5c4 52%,#d6d7d6 68%,#eeeeed 100%) 0 0 / 100% 1lh repeat-y;
  -webkit-background-clip:text; background-clip:text;
}

/* THE LAST LINE ON A TYPEWRITER (25 September 2026) — see index.html.
   Special Elite has one weight; it is set as it comes, sentence case, the
   three lines held where the client had them and free to wrap on a phone.
   Smaller than the Outfit it first replaced (that was 7.6vw, 9.6rem). */
@font-face{font-family:"Special Elite"; src:url("font/special-elite/SpecialElite-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Special Elite"; src:url("font/special-elite/SpecialElite-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
.lp-end .lp-h--tw{
  font-family:"Special Elite", "Courier New", monospace; font-weight:400;
  font-size:clamp(3rem, 5vw, 6.8rem); line-height:1.12; letter-spacing:0;
  text-wrap:balance;
}
@media (max-width:600px){
  .lp-end .lp-h--tw br{display:none}
  .lp-end .lp-h--tw{font-size:clamp(2.6rem, 8.4vw, 3.6rem)}
}

/* THE THREE WORDS IN A THIN FACE (25 September 2026, client: "change the
   passion, inspire, contribute to a different thin font, i really like the
   pearls"). Pearls (alifiagraphic) is paid and capitals only, and these
   words are not in capitals, so the client chose the closest free face from
   a side-by-side: Montserrat Thin — wide, round, a hairline. SIL OFL, self-
   hosted, latin only (the three words are fixed English). The silver above
   is kept; the thin stroke keeps its own spacing rather than the -0.02em
   the heavy weight needed. */
@font-face{font-family:"Montserrat"; src:url("font/montserrat/Montserrat-100-latin.woff2") format("woff2");
  font-weight:100; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
.lp-step .lp-step_w{font-family:"Montserrat", var(--face); font-weight:100; letter-spacing:0}
/* and the two silver section headings with them (same day, client: "change
   the find your niche here and frequently asked questions to that thinner
   font as well") */
#lpnicheh,#lpfaqh{font-family:"Montserrat", var(--face); font-weight:100; letter-spacing:0; max-width:none}
/* ONE LINE ON A PHONE (25 September 2026, client: "slightly smaller so that
   on the phone version frequently asked questions can all fit in one line
   ... both the same size"). In Montserrat Thin that line is 13.4 times its
   size wide; set to the screen's width over 13.8, it fits with a little to
   spare on every phone, and never grows past the 3rem it was. Find your
   niche takes the same size. Desktop is unchanged.
   (An overlap of EXPLORE / QUESTIONS across a larger title was tried the
   same day and reverted at the client's word — "revert thats not good".) */
@media (max-width:700px){
  #lpnicheh,#lpfaqh{font-size:min(3rem, calc((100vw - 2.4rem) / 13.8))}
}

/* HANKEN GROTESK THIN INSTEAD (25 September 2026). Two signature faces were
   tried on these five titles (Babylonica, then WindSong) and taken off —
   client: "take away the handwriting and find a very minimalist thin font
   more like the previous one"; from eight minimal thin faces beside
   Montserrat the client chose Hanken Grotesk: a plain, quiet grotesk at its
   hairline. SIL OFL, self-hosted, latin only; the silver stays. Montserrat's
   @font-face above is left in place and no longer asked for. */
@font-face{font-family:"Hanken Grotesk"; src:url("font/hanken/HankenGrotesk-100-latin.woff2") format("woff2");
  font-weight:100; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
.lp-step .lp-step_w,#lpnicheh,#lpfaqh{font-family:"Hanken Grotesk", var(--face); font-weight:100}
/* Frequently asked questions is 11.8 times its size in Hanken Grotesk
   (Montserrat's 13.4), so the phone's one-line rule divides by 12.2 — at a
   390px phone that is the full 3rem again. */
@media (max-width:700px){
  #lpnicheh,#lpfaqh{font-size:min(3rem, calc((100vw - 2.4rem) / 12.2))}
}
/* THE LAST LINE IN THE SAME THIN FACE (25 September 2026, client: "can we
   also make this text into the same font as the other thin ones"). Special
   Elite gives way to Hanken Grotesk Thin; its colour, size and three lines
   stay as they were. */
.lp-end .lp-h--tw{font-family:"Hanken Grotesk", var(--face); font-weight:100}
/* "BEGIN HERE" IN THE FIRST SCREEN'S LINE (25 September 2026, client: "can
   begin here at the bottom of the page ... be in this font", pointing at
   "A HOME OF ARTISTS SUPPORT" — fs.css .fs-corner--c: Outfit 900, capitals,
   .01em, ink). Its size and place stay as they were. */
.lp-end .lp-p{font-family:var(--face); font-weight:900; text-transform:uppercase; letter-spacing:.01em; color:var(--ink)}
/* INSPIRE IN THE MIDDLE, THE SAME SPACE EITHER SIDE (25 September 2026,
   client: "the passion, inspire, and contributions isnt centered. can you
   make it so the spaces between are the same and inspire is in the middle
   of the page"). Three equal columns put each word at the left of its
   third, so Inspire sat left of centre and the gaps followed the words'
   lengths. Now the middle column is Inspire's own width and exactly
   centred; Passion ends a fixed gap before it and Contribute starts the
   same gap after it. Each column is as wide as its WORD — the text under
   it keeps its own measure and is not counted (the negative margin), so
   the gaps are measured between the words. The words are sized off the
   whole row now (4.9% of it is what 15% of a third was).
   FROM 1100px: narrower than that there is not room for two equal gaps AND
   the text under Inspire (it is wider than the word and runs into
   Contribute's) — between 900 and 1100px the three equal columns stay, and
   below 900px they are a list as before. */
@media (min-width:1100px){
  /* the gap: 15% of the row, but never so narrow that Inspire's text
     (~25rem, wider than its word) meets Contribute's, and never so wide that
     Contribute's text (~30rem) runs off the right */
  .lp-steps--trio{container-type:inline-size; grid-template-columns:1fr auto 1fr; column-gap:clamp(calc(28rem - 14cqi), 15cqi, calc(43cqi - 30rem))}
  .lp-steps--trio .lp-step{container-type:normal; width:max-content; min-width:0}
  .lp-steps--trio .lp-step:nth-child(1){justify-self:end}
  .lp-steps--trio .lp-step:nth-child(2){justify-self:center}
  .lp-steps--trio .lp-step:nth-child(3){justify-self:start}
  .lp-steps--trio .lp-step .lp-step_w{font-size:clamp(2.8rem, 4.9cqi, 8rem)}
  .lp-steps--trio .lp-step>p{margin-inline-end:-100vw}
  /* PASSION ON THE LEFT MARGIN, CONTRIBUTE ON THE RIGHT, INSPIRE IN THE
     MIDDLE (same day, client: "passion should still start the edge of the
     ... margin so its lined up with the page. but still make inspire be
     center of the page and contribute be spaced out evenly from those two";
     then, told equal gaps would push Contribute ~80px off the page, chose
     "Contribute ends at the right margin"). The outer words sit on the
     margins, Inspire stays exactly centred; the gap before Contribute is
     the smaller by however much longer Contribute is than Passion. (A
     shift of the whole row 4% left, the step before this, is gone.)
     Contribute's text is held to its word's width so it can never run past
     the right margin; the gap between columns is no longer needed. */
  .lp-steps--trio{column-gap:0}
  .lp-steps--trio .lp-step:nth-child(1){justify-self:start}
  .lp-steps--trio .lp-step:nth-child(3){justify-self:end}
  .lp-steps--trio .lp-step:nth-child(3)>p{margin-inline-end:0; contain:inline-size}
  .lp-steps--trio .lp-step:nth-child(3)>p:not(.lp-step_t){max-width:none}
  /* INSPIRE A LITTLE LEFT OF CENTRE, FOR BALANCE (same day, client: "can i
     try an attempt to just slightly move inspire to the left which would
     make it uneven but maybe visually more balanced"). Contribute is longer
     than Passion, so with Inspire dead centre the gap after it was the
     smaller by the difference (about 6.2% of the row). Moving Inspire left
     by half of that — 3.1% of the row, ~40px on a laptop — makes the two
     gaps equal. It moves as a picture (translate), so nothing else shifts. */
  /* then "slightly less to the left" (same day): 2% of the row, ~26px on a
     laptop — two thirds of the way from centre to equal gaps */
  /* and "very slightly less" twice more: 1.2% of the row, ~16px on a laptop */
  .lp-steps--trio .lp-step:nth-child(2){translate:-1.2cqi 0}
}
/* "BEGIN HERE", TYPED BY THE SCROLL (25 September 2026 — see index.html).
   Set as the first screen's line under the name (.cin-said: the mono face,
   capitals, .14em, in the soft grey), a step larger here so it holds under
   the big line. The hidden full words hold the line's width; the typed part
   and the caret lie over them from the left. The caret is "See more"'s:
   there only while the line is part-written. Without the script, or under
   reduced motion, the words simply show. */
.lp-end .lp-p--type{
  font-family:var(--face-data); font-weight:400; font-size:clamp(1.3rem, 1.4vw, 1.7rem);
  letter-spacing:.14em; text-transform:uppercase; color:var(--soft); line-height:1.4;
}
.lp-type{position:relative; display:inline-block; white-space:nowrap}
.lp-type_t{position:absolute; left:0; top:0}
.lp-type_c{
  position:absolute; top:.15em; width:1px; height:1.1em; background:currentColor; display:none;
}
.lp-type.is-live .lp-type_g{visibility:hidden}
.lp-type.is-part .lp-type_c{display:block}