/* ============================================================
   MYNICHEFUND — BASE
   Reset, type roles and every shared component.
   A page may NEVER redefine a component in here. If a screen needs
   something this file lacks, add it here deliberately.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
/* NO SYNTHETIC WEIGHT. Outfit carries a real 100-900 axis, so nothing on
   this page needs a faked one — but this stays as a guard. It is what
   stops the next face, if it is narrower than the design asks for, from
   being smeared into a counterfeit black instead of clamping honestly to
   its own heaviest cut. Chillax needed exactly that; Outfit does not.
   Style synthesis is LEFT ON: Outfit ships roman only, and the handful of
   places that could need an italic are better sheared than silently
   upright. Every <em> and <i> in this site is reset to normal anyway.   */
html{font-size:62.5%; -webkit-text-size-adjust:100%;
  font-synthesis:style small-caps; font-synthesis-weight:none; -webkit-font-synthesis:style}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--face); font-size:1.7rem; line-height:1.35; font-weight:400;
  /* ==========================================================
     WEIGHT IS SET BY font-weight. ONLY BY font-weight.
     Do not reintroduce font-variation-settings to set "wght".

     THE BUG THIS PREVENTS (22-23 Sept 2026): this rule used to say
     font-variation-settings:"wdth" var(--norm),"wght" 400. That property
     is INHERITED and it BEATS font-weight, so every heading that only
     said font-weight:600 — .lp-h, .navx-link, the page titles, the
     accordion questions — inherited 400 and rendered Regular. The site
     had been one weight for weeks; the only type with any body in it was
     the 85 rules that happened to set their own axis. Helvetica hid it
     (no axes, so the property did nothing) and Supreme's Regular is
     heavy enough to pass as a choice; Chillax's monoline Regular at 90px
     reads as a hairline, which is how the client finally saw it.

     Those 85 rules have since been rewritten: each one's "wght" value
     moved onto its own font-weight and the variation declaration was
     deleted, so there is exactly ONE way to ask for a weight and nothing
     can silently outrank it. The "wdth" half went with them — no face in
     this system has a width axis, so it was never doing anything.
     ========================================================== */
  font-variation-settings:normal;
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--macro), color var(--macro);
}
/* THE SPARK ON THE READER'S OWN PLACE — what they have selected, and what
   their keyboard is on. BLACK TYPE ON THE BLUE, not white: measured, white
   on #5C7AEA is 3.87:1 and fails AA for running text, black is 5.43:1 and
   passes. A selection you cannot read is not a flourish.
   The focus ring is 3.87:1 against white and 5.43:1 against black, both
   over the 3:1 a non-text indicator needs. */
::selection{background:var(--spark); color:#000}
/* THE CARET. The narrowest spark on the site and the most personal: it is
   only there while someone is actually typing, which is exactly the moment
   the colour is meant to mark. Costs nothing and cannot fail contrast —
   a caret is not text. */
input,textarea,[contenteditable]{caret-color:var(--spark)}
:focus-visible{outline:2px solid var(--spark); outline-offset:4px}

/* THE SCROLLBAR, straight from the reference — cassettemusic.com paints its
   thumb yellow and nothing else about the bar. It is the one piece of the
   identity that is on every page without being IN the design: on a Mac it
   only appears while you are moving, which is exactly when a colour that
   means "alive" should be there. */
html{scrollbar-color:var(--spark) transparent}
::-webkit-scrollbar{width:.75rem; height:.75rem}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--spark); border-radius:99px;
  border:3px solid var(--ground);   /* keeps the thumb slim inside the track */
}
img{max-width:100%; display:block}
/* padding:0 matters. Without it, buttons keep the user agent's own padding
   (~1px 6px in Chrome) while <a> elements have none — so SEARCH and SORT BY,
   which are buttons, sat indented from ARTISTS / ABOUT / LOG IN, which are
   links. Anything needing padding sets its own below. */
button{font:inherit; color:inherit; background:none; border:none; padding:0;
  text-align:inherit; cursor:pointer}
a{color:inherit; text-decoration:none}

/* --- TYPE ROLES ----------------------------------------------------- */
/* --- TRACKING CEILING: -0.02em ------------------------------------
   No rule in this site sets negative tracking tighter than -0.02em, and
   none should. Outfit's r has a short arm and its t a low crossbar; past
   -0.02em the two fuse into one shape, and "Artists", "Start", "Support"
   and "art" — words this site cannot avoid — stop being readable as
   words. The client caught it on the menu's "Artists". Measured on the
   real words at the real sizes: -0.04 fused, -0.03 touching, -0.025 a
   hairline, -0.02 clean. Uppercase fails later but still fails (CERAMICS
   loses R/A and C/S by -0.035), so one ceiling covers both cases.

   It is a CEILING, not a value: -0.015, -0.01 and -0.005 are all still
   in use where a role wants more air. Only go tighter than -0.02em after
   re-testing, and remember the copy is user-generated — an artist named
   Marta or a niche called Portraiture arrives without warning.
   ------------------------------------------------------------------ */
.mega,.display,.name{
  font-weight:800; 
  text-transform:uppercase; line-height:0.86; letter-spacing:-0.02em; margin:0;
}
.mega{font-size:clamp(3.6rem,9.8vw,17rem); letter-spacing:-0.02em}
.display{font-size:clamp(3.6rem,10vw,14rem)}
.name{font-size:clamp(2.8rem,5.4vw,7.5rem)}

.lead{
  font-size:clamp(2rem,3.4vw,3.4rem); line-height:1.12; max-width:24ch;
  font-weight:500; 
  letter-spacing:-0.02em; margin:0;
}
.body{font-size:1.7rem; max-width:56ch; margin:0}
.label{
  font-size:1.2rem; text-transform:uppercase; letter-spacing:0.14em;
  font-weight:600;  margin:0;
}
.micro{
  font-size:1.1rem; text-transform:uppercase; letter-spacing:0.1em;
  font-weight:500; 
  color:var(--soft); margin:0;
}
.data{
  font-family:var(--face-data); font-weight:500;
  
  font-variant-numeric:tabular-nums;
}

/* --- SHELL ----------------------------------------------------------- */
/* THE PAGE STEPS ASIDE FOR THE PANEL rather than being covered by it.
   This is a LAYOUT change, not a transform — the reference does the same: its
   wrapper never moves, a class narrows the content inside it and the macro
   curve animates the result. The consequence that matters is that the RIGHT
   edge stays put and the left edge comes in, so the artwork narrows in place
   instead of sliding sideways. Measured on the reference: 928 -> 584 with its
   right edge fixed. */
.shell{
  padding:0 var(--shell-pad);
  transition:padding-left var(--macro);
}
body.menu-open .shell{
  padding-left:calc(var(--edge-w) + var(--menu-w) + var(--s4));
}
/* Narrow screens get a narrower gutter. Redefining the TOKEN rather than the
   padding is what keeps .hero-mark's negative margin in step — it reads the
   same variable, so the wordmark still crops exactly on the screen edge. */
@media (max-width:768px){:root{--shell-pad:var(--s3)}}

/* --- NAV -------------------------------------------------------------
   Logotype left, one row of links right, nothing in the middle, and NO rule
   underneath — the bar sits straight on the ground.
   Search used to hold the centre column of a three-column grid. It now sits
   in the link row instead; it is still one word that opens the whole screen,
   it just no longer needs a column of its own to say so.
   The bar keeps its opaque background: it is sticky over a wall of artwork,
   and without the rule that background is the only thing separating the two. */
.bar{
  /* NOT STICKY. The bar belongs to the top of the page and scrolls away with
     it — the wall is the product, and a bar riding down the screen over the
     artwork is a permanent 49px of chrome across work that was given the
     whole width on purpose. The one control that DOES follow you is the edge
     strip, which is where Search and the whole index already live.

     position:relative, not static: the z-index has to keep working, because
     the search hits panel is absolutely positioned inside this bar and must
     paint over the wall beneath it.

     --nav-h is unaffected — sticky and relative both sit in normal flow, so
     .first still subtracts the right height and the wall still starts exactly
     one screen down. */
  /* TRANSPARENT since 2026-09-02: the hero's hairlines start above the bar,
     at the reference's 20px, and must show through it. The search word knocks
     the middle line out with its own ground (.bar-search-q). */
  position:relative; z-index:50; background:transparent;
  /* Three columns, not two. The 1fr sides are what hold the centre slot DEAD
     CENTRE of the bar rather than centred between whatever the two side groups
     happen to contain — the sections on the left are far wider than the links
     on the right, so space-between would push it off. */
  display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:var(--s4);
  /* VERTICAL POSITION MEASURED OFF KICKSTARTER, 2026-09-01, at 1280x800.
     Their .global-nav is a 74px block with padding 24px top / 0 bottom, and
     EVERY item in it — logo, search field, Log in — centres on y=49.
     (It is position:static there too, so it scrolls away, which is what this
     bar now does as well.)

     Matched here on the two things that are actually visible: the block is
     74px tall and this bar's content centres on y=49. The padding is NOT
     copied literally — their 24px top works against 48px-tall buttons, and
     these items are ~28px, so a literal 24px would sit the type at y=38, half
     a line high. The numbers below are solved backwards from y=49 instead.
     RE-MEASURE if the search field's height changes.

     LEFT PADDING IS NOT THEIRS. Kickstarter uses 42px; this has to clear the
     fixed 6rem edge strip, so it stays calc(--edge-w + --s4) = 80px.

     SOLVED, not guessed: the content box measures 24px tall (the search field
     is the tallest item, and the row is baseline-aligned). So
        padding-top + 12 = 49        ->  37px
        37 + 24 + padding-bottom = 74 ->  13px
     A first pass at 35/11 measured height 70, centre 47. These land both. */
  /* RAISED 2026-09-01. Was 3.7rem top / 1.3rem bottom, solved backwards from
     Kickstarter's y=49 centre line (see the note above, which still explains
     the arithmetic). The reference this page is now modelled on sits its
     header much higher — measured on adamclarkecolour.com, the top label's
     cap sits at roughly 2.8% of viewport height, ~20px on a 720px screen.
     2.2rem puts the bar's type at y=22 and its centre at y=33.

     This shortens --nav-h from 74px to ~59px, and .first is sized off
     --nav-h, so the first screen GAINS that 15px automatically. Nothing
     downstream needs touching. */
  padding:2.2rem var(--shell-pad) 1.3rem calc(var(--edge-w) + var(--s4));
  transition:background-color var(--macro), padding-left var(--macro);
}
/* Baseline rather than centre. Kept from when the bar carried links in a second
   cut: box-centring two different faces put their glyphs on different lines.
   The bar is only the wordmark now, but the rule is correct and costs nothing
   if anything text-shaped is ever put back beside it. */
.bar-left,.bar-actions{align-items:baseline}
/* the mobile bar holds an icon button, not text, and an icon has no useful
   baseline — put that one back on the box centre */
@media (max-width:768px){
  .bar{align-items:center}
  .bar-actions{align-items:center}
}
body.menu-open .bar{
  padding-left:calc(var(--edge-w) + var(--menu-w) + var(--s4));
}
.bar-left{display:flex; min-width:0; gap:var(--s4); grid-column:1; align-items:center}
/* SEARCH BESIDE HOME (index.html, 2026-09-02): out of the centre slot, no
   centring slide, text and growth to the right, hits hung off its left edge */
.bar-left .bar-search{translate:none; grid-column:auto; justify-self:start}
.bar-left .bar-search-q{text-align:left; padding-left:0}
.bar-left .bar-hits{left:0; translate:none}

/* THE WORDMARK IN THE CENTRE SLOT (archive.html, 2026-09-02) — where the
   search stands on other pages, and centred on the window the same way */
.bar-brand{
  grid-column:2; justify-self:center; align-self:center; margin:0;
  translate:var(--search-dx, 0px) 0; white-space:nowrap;
}
.bar-brand a{transition:opacity var(--micro)}
.bar-brand a:hover,.bar-brand a:focus-visible{opacity:0.55}

/* (the centre slot took the logo treatment on its own for a day; it is the
   shared .wordmark rule now, so there is nothing to say here) */


/* SEARCH IN THE CAMPAIGNS PAGE'S TITLE LINE — a word after the count, in
   the count's own style; no centring slide, grows to the right, hits hang
   off its left edge */
/* (title-line search rules were here; see .arch-search) */
.bar-actions{grid-column:3; display:flex; gap:var(--s4); justify-content:flex-end}

/* --- WHAT THE PANEL USED TO HOLD (10 Sept 2026) ---------------------
   The main links now sit beside the house at the left, and Search is a word
   at the right. Both are set in .bar-nav's own label style, so the two ends
   of the bar are one typographic system and not two. */
.bar-nav--main ul{gap:var(--s4)}
.bar-find{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit;
}
/* .label carries the size, tracking, weight and hover for both; this only has
   to say that a <button> is not a <a>. */

/* THE CENTRE SLOT holds the mark on every page but the landing page, where
   .leo-mark flies into the same spot and would be a second one. */
.bar-brand a{text-decoration:none}

@media (max-width:768px){
  /* At this width the bar cannot hold three groups. The mark keeps the middle
     — it is the one thing that says which site this is — and the main links
     fold away; every one of them is in the footer, which is the only place a
     phone was ever going to reach them comfortably anyway. */
  .bar-nav--main{display:none}
  .bar-actions{gap:var(--s3)}
  /* the campaigns/about/story links are all in the footer at this width */
}

/* These are the DESKTOP-scope rules. Their mobile counterparts live in the
   max-width:768px block further down — without these, .bar-panel has no
   display:none outside that query and the mobile menu renders on desktop as
   a bulleted list. */
/* THE RAIL — the site's navigation, and the sort control, standing in the
   empty column beside the wall instead of along the top.
   The column was always going to stay empty: BRIEF.md calls that emptiness the
   pacing, and it is wide enough to hold this without touching the work. */
/* --- THE EDGE ---------------------------------------------------------
   A strip down the left of every page carrying one control. It held the whole
   menu, and it was DELETED FROM THE MARKUP on 10 September 2026 — the
   navigation is across the top of every page now.

   *** --edge-w IS ZERO, NOT REMOVED, AND THAT IS THE WHOLE MIGRATION. ***
   A dozen rules across this file are written in terms of it: the bar's left
   padding, .shell's gutter, the hero mark's crop, the footer's inset, the
   menu's own width. Zeroing the token makes every one of them resolve to the
   page having no strip, in one edit, with no chance of missing one. Deleting
   it would have meant finding and rewriting all twelve.

   The rules below no longer match anything — the markup is gone — and are
   left where they are rather than cut out of the middle of a working
   stylesheet. Put a <div class="edge"> back and the strip returns. */
:root{ --edge-w:0rem; --menu-w:min(52rem, calc(100vw - var(--edge-w) - 8rem)); }

.edge{
  position:fixed; left:0; top:0; bottom:0; width:var(--edge-w);
  background:var(--deep); z-index:60;
}
.edge-toggle{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:2.6rem; height:2.6rem;
}
/* the + is two hairlines, so it stays a + at any size and needs no glyph */
.edge-toggle i{
  position:absolute; inset:0;
  transition:rotate var(--macro);
}
.edge-toggle i::before,.edge-toggle i::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--on-deep);
}
.edge-toggle i::before{width:100%; height:1px}
.edge-toggle i::after{width:1px; height:100%}
/* The three angles are lifted from REFERENCE.md: 90 on hover to declare it is
   live, 45 when open so the + reads as a x, 135 on hover while open. */
/* HOVER ONLY, not :focus-visible — fixed 2026-09-02. Closing the panel hands
   focus back to this button, and a focused + that is ALSO turned 90 looks
   exactly like an unturned one, so the next hover had nothing left to turn:
   the + "stopped spinning" after the first open/close. Keyboard focus keeps
   the page-wide outline, which is the signal it needs; the turn is the
   pointer's. */
.edge-toggle:hover i{rotate:90deg}
.edge-toggle[aria-expanded="true"] i{rotate:45deg}
.edge-toggle[aria-expanded="true"]:hover i{rotate:135deg}

/* --- THE PANEL --------------------------------------------------------
   Slides out from behind the edge. Inverted — black ground, white type — so
   it reads as a different place rather than a layer over the wall. */
.menu{
  position:fixed; top:0; bottom:0; left:var(--edge-w);
  width:var(--menu-w);
  background:var(--deep); color:var(--on-deep);
  z-index:55;
  translate:-100% 0;
  transition:translate var(--macro);
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
}
.menu::-webkit-scrollbar{display:none}
.menu.is-open{translate:0 0}
/* NOT visibility. visibility is a discrete property, and a transition to
   `visible` still computes as hidden at progress exactly 0 — the instant the
   class lands — so focus() called then fails silently however hard the style
   is flushed. The panel is closed by being translated off-screen and made
   `inert`, which is the honest statement anyway: it is present but unreachable,
   untabbable and hidden from assistive tech. */
.menu[inert]{pointer-events:none}
/* the panel takes focus itself on pointer opens (site.js) — no ring on it */
.menu:focus,.menu:focus-visible{outline:none}

/* Everything inside the panel inverts to the ground it now sits on.
   .rail-nav is named explicitly: `.rail-nav .label` sets ink at the same
   specificity as `.menu .label` and sits later in this file, so without it
   SEARCH and ARTISTS render black on black — invisible, and silently so. */
.menu .rail-nav .label,
.menu .grp-head,
.menu .grp-list a{color:var(--on-deep)}
.menu .grp-head i::before,.menu .grp-head i::after{background:var(--on-deep)}

/* Two rows, the first a FIXED height. That is what holds the index block still:
   with margin-top:auto it was pinned to the bottom of the panel and grew
   upward, so opening a list shoved both headings up the screen. Giving the
   upper half a fixed height means the headings sit at the same y whatever is
   open, and the lists expand downward under them. */
.rail{
  display:grid; grid-template-rows:calc(50vh - var(--s6)) auto;
  align-content:start;
  padding:var(--s6) var(--s5) var(--s6);
  --rail-size:1.6rem;
}
.rail-top{display:flex; flex-direction:column; gap:var(--s4)}

/* THE INDEX BLOCK — two peers side by side, starting at the toggle's own line
   (50vh) and opening downward from there. */
.rail-index{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4);
  align-items:start;
}
/* Doubled class on purpose. `.grp-head` sets the size at the same specificity
   and sits later in this file, so a single .grp-head--big loses to it and the
   heading silently stays 16px. Verified: it did. */
.grp-head.grp-head--big{
  font-size:3.2rem; letter-spacing:0.04em; line-height:1.05;
}
/* Large type wants LESS tracking, not the same: 0.2em is tuned for 16px
   labels and at 32px it pulls the word apart. */
.grp-head.grp-head--big i{width:0.34em; height:0.34em}
.rail-nav ul{list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3)}

/* --- THE PANEL THAT COVERS THE STRIP (index.html, legal.html) ------------
   Read off adamclarkecolour.com on 2026-09-02: its panel does not open
   BESIDE the strip, it opens OVER it — left:0, strip-plus-panel wide, above
   the strip's z-index — so the words start where the + was, and the close
   x sits in a ruled column of the strip's own width on the panel's RIGHT
   edge. The page still steps aside by the same amount as before (edge +
   menu), so nothing else on the page moved. Scoped by class: archive.html
   and artist.html keep the beside-the-strip panel and its + as the close. */
.menu--cover{
  left:0; width:calc(var(--edge-w) + var(--menu-w));
  z-index:65;                              /* over .edge (60) */
}
.menu--cover .panel{
  padding-left:var(--s4);
  padding-right:calc(var(--edge-w) + var(--s4));
}
.menu-x{
  position:absolute; top:0; right:0; bottom:0; width:var(--edge-w);
  border-left:1px solid var(--panel-rule);
}
.menu-close{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:2.6rem; height:2.6rem;
}
.menu-close i{position:absolute; inset:0; rotate:45deg; transition:rotate var(--macro)}
.menu-close i::before,.menu-close i::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--on-deep);
}
.menu-close i::before{width:100%; height:1px}
.menu-close i::after{width:1px; height:100%}
.menu-close:hover i,.menu-close:focus-visible i{rotate:135deg}
@media (max-width:768px){
  .menu--cover .panel{padding-left:var(--s3); padding-right:calc(var(--edge-w) + var(--s3))}
}

/* --- THE PANEL, v2 (index.html, legal.html) ------------------------------
   .rail below is the OLD panel and still serves archive.html and artist.html.

   The shape: a small mark, then the index as two ruled columns, then the big
   links — display type, one per ruled row — pushed to the bottom so the
   panel is full from top to bottom whatever the window's height. Rules are
   --on-deep at 25%: a hairline on black at the same visual weight the
   --rule hairlines have on paper. One colour, hover is opacity, as everywhere. */
.panel{
  /* min-height: the big list sits at the bottom of a short panel, and when
     an opened row makes it taller than the window the panel simply grows
     and .menu scrolls */
  min-height:100%;
  display:flex; flex-direction:column;
  padding:var(--s4) var(--s5) var(--s4) var(--s5);
  --panel-rule:color-mix(in srgb, var(--on-deep) 25%, transparent);
  --panel-dim:color-mix(in srgb, var(--on-deep) 62%, transparent);
}
.panel-mark{color:var(--on-deep); margin:0 0 var(--s4)}

/* the index used to stand here as two scrolling, fading lists; it folded
   into the big list as the Niches and Countries rows on 2026-09-02 */
.panel-big{margin-top:auto; padding-top:var(--s5)}
.panel-big > ul{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--panel-rule)}
.panel-big > ul > li{border-top:1px solid var(--panel-rule)}
/* THE BIG LINK. Display weight and width, sized off the window's HEIGHT so
   five rows and the index fit an 800px window without scrolling, and capped
   where "FOR SUPPORTERS" still fits the panel's 44rem of room on one line. */
.big{
  display:flex; align-items:baseline; gap:0.25em;
  width:100%; padding:0.12em 0 0.14em; margin:0;
  font-size:clamp(2.4rem, 5vh, 3.4rem);
  font-weight:800; 
  text-transform:uppercase; letter-spacing:-0.02em; line-height:0.9;
  color:var(--on-deep); cursor:pointer; list-style:none;
  transition:opacity var(--dim);
}
.big::-webkit-details-marker{display:none}
.big:hover,.big:focus-visible{opacity:0.55}
/* the group marker reuses the site's one glyph: a + that turns into a x */
.big i{
  position:relative; width:0.28em; height:0.28em; flex:none;
  align-self:center; margin-left:0.1em;
  transition:transform var(--macro);
}
.big i::before,.big i::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--on-deep);
}
.big i::before{width:100%; height:1px}
.big i::after{width:1px; height:100%}
.big-grp[open] .big i{transform:rotate(45deg)}
.big-sub{
  list-style:none; margin:0; padding:var(--s2) 0 var(--s4);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s2) var(--s4);
}
/* a page with no wall (legal.html) has nothing to index */
.big-grp:has(.big-sub:empty){display:none}
.big-sub a{
  font-size:1.3rem; text-transform:uppercase; letter-spacing:0.14em; font-weight:600;
  
  color:var(--on-deep); transition:opacity var(--dim);
}
.big-sub a:hover,.big-sub a:focus-visible{opacity:0.55}

@media (max-width:768px){
  .panel{padding:var(--s5) var(--s3) var(--s5) var(--s3)}
  .panel-index{gap:var(--s3)}
  .big{font-size:clamp(2.2rem, 7vw, 3rem)}
  .big-sub{grid-template-columns:1fr}
}

/* --- THE RAIL'S GROUPS ------------------------------------------------
   Collapsible sections, built from <details> so open/closed state, keyboard
   operation and screen-reader semantics come from the browser rather than
   from us. No icons: this site has exactly one glyph in it, the +, and a
   column of pictograms would introduce a second visual language to a page
   made of words and space.
   Hierarchy is carried by SIZE, not colour — everything stays ink, per the
   one-colour-one-contrast rule. */
.rail-groups{display:flex; flex-direction:column; gap:var(--s3)}

.grp-head{
  display:flex; align-items:baseline; gap:var(--s2);
  font-size:var(--rail-size); text-transform:uppercase; letter-spacing:0.2em;
  font-weight:600; 
  color:var(--ink); cursor:pointer; list-style:none; white-space:nowrap;
  transition:opacity var(--micro);
}
.grp-head::-webkit-details-marker{display:none}   /* Safari's own triangle */
.grp-head:hover,.grp-head:focus-visible{opacity:0.55}

/* the marker reuses the bar toggle's idiom: a + that turns 45deg into a x */
.grp-head i{
  position:relative; width:0.5em; height:0.5em; flex:none;
  transition:transform var(--macro);
}
.grp-head i::before,.grp-head i::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:var(--ink);
}
.grp-head i::before{width:100%; height:1px}
.grp-head i::after{width:1px; height:100%}
.grp[open] .grp-head i{transform:rotate(45deg)}

.grp-list{
  list-style:none; margin:var(--s2) 0 var(--s3); padding:0;
  display:flex; flex-direction:column; gap:0.6rem;
}
.grp-list a{
  display:block;
  font-size:1.3rem; text-transform:uppercase; letter-spacing:0.14em;
  font-weight:400; 
  color:var(--ink); transition:opacity var(--micro);
}
.grp-list a:hover,.grp-list a:focus-visible{opacity:0.55}
@media (max-width:900px){ .rail-groups{display:none} }

/* THE BAR IS THE RAIL. It is set exactly like the sort control beneath it —
   same face (--face, the Extended cut, NOT --face-ui), same uppercase, same
   0.2em tracking, same weight, same size — because the links and the sort are
   one object standing in the column, not two.
   ONE COLOUR. No grey-at-rest, no bold-for-current: everything is ink, and
   hover is a drop in opacity, which is how .sort-btn already answers a pointer.
   That keeps the whole bar to one colour and one contrast, per BRIEF.md. */
.rail-nav .label{
  font-size:var(--rail-size);
  text-transform:uppercase; letter-spacing:0.2em; font-weight:600;
  
  color:var(--ink);
  transition:opacity var(--micro);
}
.rail-nav .label:hover,.rail-nav .label:focus-visible{opacity:0.55}
.bar-toggle{display:none; padding:0.8rem; margin:-0.8rem -0.8rem -0.8rem 0}
.bar-toggle svg{width:2.2rem; height:2.2rem; stroke:var(--ink); stroke-width:1; fill:none;
  transition:transform var(--macro)}
.bar-toggle[aria-expanded="true"] svg{transform:rotate(45deg)}
.bar-panel{display:none}
/* THE RAIL IS FURNITURE ON PHONES TOO — fixed 2026-09-01.
   This rule used to be `padding:var(--s3)`, which threw away the left
   clearance the desktop bar carefully keeps (see the note on .bar). The .edge
   strip is `position:fixed; width:6rem; z-index:60` at EVERY width, so with
   10px of padding the first 50px of the bar — "MYNI" of the wordmark — was
   painted over by a black rail. The same omission on .shell put the artwork
   and the footer under it as well; both are corrected here.

   The strip also narrows on phones. 6rem of a 1280px screen is 4.7%; of a
   375px screen it is 16%, and it holds one 44px button. 4.4rem keeps the
   touch target and gives 16px of the content back. */
@media (max-width:768px){
  /* --edge-w was 4.4rem here, to give a narrow screen its sixteen pixels back
     from a strip that held one button. There is no strip; it stays at zero,
     and these two keep their own gutters rather than the strip's. */
  .bar{padding:var(--s3)}
  .shell{padding-left:var(--shell-pad)}
}
/* THE SMALL WORDMARK — one style for every "Mynichefund" that is not the
   landing page's giant mark: the bar's link on archive.html, the panel's
   mark, the footer's mark. Sentence case in the body face at body size, no
   tracking — the plain setting the archive's bar showed once .brand lost its
   uppercase rule, which is the one the user chose (2026-09-02). */
/* THE MARK, WHEREVER IT APPEARS (9 Sept 2026). Every one of these is the
   logo — the bar's centre slot, the panel's head, the footer's sign-off —
   and not one of them is the name inside a sentence. So they are all set
   the way the landing page sets it: uppercase, at the extended width and
   800, which is what "Mynichefund" looks like.

   It used to be sentence case at regular weight, which reads as running
   text and made the mark disappear into whatever was beside it.

   THE SIZE IS SMALLER than the sentence-case version it replaces, not
   larger. Capitals carry more ink per character and this weight is twice
   the old one, so holding 1.7rem would have made every instance shout. The
   tracking is opened from the hero's -0.045em for the same reason: at
   125px that reads as tension, at 14px it reads as a collision. */
.wordmark,.brand,.panel-mark,.foot-mark{
  font-family:var(--face); font-size:1.4rem; line-height:1;
  font-weight:800; 
  text-transform:uppercase; letter-spacing:-0.005em; color:inherit; margin:0;
}
.brand{justify-self:start; white-space:nowrap}

/* .brand is gone from index.html's bar (2026-09-02); the left slot holds .bar-home,
   a house at hairline weight. land() in site.js still handles a .brand if one
   ever returns. align-self:center, not the bar's baseline — an icon has no
   baseline to share and would hang low off one. */
.bar-home{
  grid-column:1; justify-self:start; align-self:center;
  display:block; width:2.2rem; height:2.2rem; color:var(--ink);
  transition:opacity var(--micro);
}
.bar-home svg{
  width:100%; height:100%; overflow:visible;
  fill:none; stroke:currentColor; stroke-width:1; stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.bar-home:hover,.bar-home:focus-visible{opacity:0.55}

/* --- SEARCH IN THE BAR ------------------------------------------------
   Replaced the wordmark in the centre slot on 2026-09-01. A REAL FIELD: you
   type in it and hits open directly beneath. It does not take over the screen.

   NO BOX. One hairline under the type, and nothing else. REFERENCE.md records
   that the grid on the reference site is drawn with 1px borders rather than
   gutters, and every divider here already follows that — the campaign rules,
   the panel groups, the footer. A bordered rounded field would be the single
   boxed control on the entire page and would read as imported app furniture.

   align-self:center, not the bar's own baseline: .bar aligns on the BASELINE
   so the nav links share one line, and a field hung off a text baseline sits
   visibly low because its box is taller than the line inside it.

   Width is a clamp, not a fixed value. The bar's grid is 1fr auto 1fr, so the
   centre column takes what this asks for and the sides split the rest — fixed
   would push the right-hand links off a small laptop, and a full 1fr centre
   would be enormous on a wide one. */
.bar-search{
  position:relative;                       /* the hits panel anchors to this */
  /* THE CENTRE SLOT, on every page. Placed, not auto-placed: index.html has
     a home icon in slot one and archive.html the wordmark, and either way
     this must land in slot two. */
  grid-column:2; justify-self:center;
  /* slid from the bar's centre onto the WINDOW's centre by site.js
     (--search-dx) — half a strip's width to the left, on every page */
  translate:var(--search-dx, 0px) 0;
  display:flex; align-items:baseline; gap:var(--s2);
  /* NO hairline and NO magnifier as of 2026-09-02 — the bare word "Search"
     is the whole control. Hover and focus answer in colour only. */
  color:var(--soft);
  transition:color var(--micro);
}
.bar-search:hover{color:var(--ink)}
/* focus-within, not :focus — the state belongs to the whole field, and the
   thing actually focused is the <input> inside it. */
.bar-search:focus-within{color:var(--ink)}

.bar-search-q{
  /* THE WIDTH OF ITS WORD at rest — measured: "SEARCH" at this size and
     tracking sets 5.9rem wide — and 24rem once you are in it, so what you
     type and the hits beneath have room. Centred in its slot, so it grows
     both ways and stays on the bar's middle. */
  width:7.2rem;                            /* the word (5.9rem) plus the 0.5em of ground each side */
  transition:width var(--micro);
  /* CENTRED TEXT, and NO browser search-field chrome: Safari gives a
     type=search its own padding and indent, which shoved the word off the
     centre its box sits on. appearance:none strips that; text-align keeps
     the word — and what you type — on the bar's middle as the field grows. */
  -webkit-appearance:none; appearance:none; text-align:center;
  /* a sliver of ground behind the word, so the hero's middle hairline —
     which passes right under it — stops at the letters */
  background:var(--ground); border:none; outline:none; padding:0 0.5em; margin:0;
  font-family:var(--face-ui);
  font-size:1.2rem; text-transform:uppercase; letter-spacing:0.14em;
  font-weight:500; color:var(--ink);
}
.bar-search:focus-within .bar-search-q,
.bar-search-q[aria-expanded="true"]{width:24rem}
.bar-search-q::placeholder{color:var(--soft); opacity:1}
/* the UA's own search chrome — the clear "x" and the inset bevel — is the one
   thing that would make this read as a browser widget rather than as part of
   the site. Escape clears it instead, which is handled in site.js. */
.bar-search-q::-webkit-search-cancel-button,
.bar-search-q::-webkit-search-decoration{-webkit-appearance:none; appearance:none}

/* THE HITS. Hairline-bounded, square, no shadow — the reference carries
   exactly one box-shadow in the whole site and this is not the place to spend
   it. It sits ON the ground colour, so the wall never shows through the type. */
.bar-hits{
  /* centred under the field and at least 28rem wide, so it is the same
     panel whether the field is at its resting width or grown */
  position:absolute; top:calc(100% + var(--s2)); left:50%; translate:-50% 0;
  width:max(100%, 28rem); z-index:60;
  background:var(--ground); border:1px solid var(--rule);
}
.bar-hits[hidden]{display:none}
.bar-hits a{
  display:block; padding:var(--s2) var(--s3); text-decoration:none;
  border-top:1px solid var(--rule); color:var(--ink);
  transition:background-color var(--micro), color var(--micro);
}
.bar-hits a:first-child{border-top:none}
/* is-cur is the keyboard cursor and deliberately matches hover exactly, so
   arrowing down and mousing over look like the same thing. */
.bar-hits a:hover,.bar-hits a:focus-visible,.bar-hits a.is-cur{
  background:var(--ink); color:var(--ground); outline:none;
}
.bar-hits .h-name{
  display:block; font-size:1.3rem; text-transform:uppercase;
  letter-spacing:0.08em; font-weight:500;
}
.bar-hits .h-meta{
  display:block; margin-top:0.2rem; font-size:1.1rem; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--soft);
}
.bar-hits a:hover .h-meta,.bar-hits a.is-cur .h-meta,
.bar-hits a:focus-visible .h-meta{color:var(--ground)}
/* the no-match line and the "n of N" tail share the footer's small-print role */
.bar-hits .h-note{
  padding:var(--s2) var(--s3); border-top:1px solid var(--rule);
  font-size:1.1rem; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--soft);
}
.bar-hits .h-note:first-child{border-top:none}

/* Below the bar's own breakpoint the field would crush the side links; the
   panel still carries Search, and "/" still reaches it. */
@media (max-width:900px){ .bar-search{display:none} }

/* ABOUT and LOG IN sit back up here, opposite the wordmark. They take the
   BRAND's size and tracking, not the rail's — they share a line with it, so
   they belong to it. The language is the same as the rail either way: --face
   Extended, uppercase, one colour, hover as a drop in opacity. */
.bar-nav ul{display:flex; gap:var(--s4); list-style:none; margin:0; padding:0;
  align-items:baseline}
.bar-nav .label{
  font-size:1.3rem; text-transform:uppercase; letter-spacing:0.14em; font-weight:600;
  
  color:var(--ink); white-space:nowrap;
  transition:opacity var(--micro);
}
.bar-nav .label:hover,.bar-nav .label:focus-visible{opacity:0.55}

/* BAR DROPDOWNS. The rail can stack an open group underneath its heading; a
   horizontal bar has no room to, so the same group becomes a panel that hangs
   below the word. It kept the box the sort menu used to use rather
   than adding a second dropdown idiom to the site.
   Anchored right: these sit at the right end of the bar, and a left-anchored
   panel would open off the edge of the page. */
.drop{position:relative}
.drop-menu{left:auto; right:0}
/* on the left of the bar they have to open the other way, or they run off it */
.bar-nav--left .drop-menu{left:0; right:auto}
.drop-btn i{
  position:relative; display:inline-block; width:0.5em; height:0.5em;
  margin-left:0.4em; transition:transform var(--macro);
}
.drop-btn i::before,.drop-btn i::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--ink);
}
.drop-btn i::before{width:100%; height:1px}
.drop-btn i::after{width:1px; height:100%}
.drop-btn[aria-expanded="true"] i{transform:rotate(45deg)}

/* --- SEARCH ----------------------------------------------------------
   The bar carries one word. Clicking it — or pressing "/" — opens the whole
   screen, where you type at the scale the surnames are set at. A small field
   in the header would be competing with a page built out of silence and very
   large type; this stops competing and becomes its own moment instead.      */

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* kept for any page that still puts search in the bar on its own */
.searchword{
  font-size:1.2rem; text-transform:uppercase; letter-spacing:0.2em; font-weight:600;
  
  color:var(--ink); transition:opacity var(--micro);
}
.searchword:hover,.searchword:focus-visible{opacity:0.5}

.ovl{
  position:fixed; inset:0; z-index:800; background:var(--ground);
  display:flex; flex-direction:column; padding:var(--s5) var(--s4);
}
.ovl[hidden]{display:none}
@media (max-width:768px){.ovl{padding:var(--s4) var(--s3)}}
.ovl-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s6)}
.ovl input{
  width:100%; background:none; border:none; border-radius:0; appearance:none;
  color:var(--ink); font-family:var(--face); font-weight:700;
  font-size:clamp(3rem,7vw,9rem); line-height:1; letter-spacing:-0.02em;
  text-transform:uppercase; padding:0;
}
.ovl input::placeholder{color:var(--rule)}
.ovl input:focus{outline:none}
.ovl input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}

.ovl-hits{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--rule);
  display:flex; flex-direction:column; overflow-y:auto;
}
.ovl-hits a{
  display:flex; gap:var(--s4); align-items:baseline; justify-content:space-between;
  padding:var(--s3) 0; border-bottom:1px solid var(--rule);
  transition:opacity var(--micro);
}
.ovl-hits a:hover,.ovl-hits a:focus-visible{opacity:0.5}
.ovl-hits .h-name{
  font-size:clamp(2rem,3.6vw,3.4rem); font-weight:700; line-height:1;
  text-transform:uppercase; letter-spacing:-0.02em;
}
.ovl-hits .h-meta{
  font-size:1.2rem; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--soft); white-space:nowrap;
}

@media (max-width:768px){
  /* SEARCH IS THE ONE THING THAT STAYS. This used to hide every label in the
     bar, on the grounds that search lived in the rail and the side panel
     carried its own copy for a phone. The panel was deleted on 10 September
     2026, so hiding the bar's Search word would leave a phone with no way
     into search at all. The two secondary links go; Search does not. */
  .bar-nav,.bar-actions .btn{display:none}
  .bar-toggle{display:block}
  .bar-panel{
    display:block; position:sticky; top:0; z-index:49; background:var(--ground);
    border-bottom:1px solid var(--rule); overflow:hidden;
    max-height:0; transition:max-height var(--macro);
  }
  .bar-panel.is-open{max-height:26rem}
  .bar-panel ul{list-style:none; margin:0; padding:0}
  .bar-panel li{border-top:1px solid var(--rule)}
  .bar-panel li:first-child{border-top:none}
  .bar-panel a{display:block; padding:var(--s3) var(--s3)}
  .bar-panel .label{font-family:var(--face-ui); text-transform:none;
    letter-spacing:0.01em; font-weight:400; font-variation-settings:normal}
}

/* --- SEE MORE -------------------------------------------------------
   The one control for "there is more of this list". It was written in
   v5.css for the wall and lived only there, so the campaigns page could
   not reach it and kept numbered pages instead. It is a shared component,
   so it lives here with the rest of them; v5.css keeps only the one line
   that places it inside the wall's own grid.

   Two parts, because a button on its own is a dead end: the count says how
   far through the list you are, and the button takes you further. The
   button hides itself when there is nothing left rather than sitting there
   disabled. */
.more{display:flex; flex-direction:column; align-items:center; gap:1.4rem; padding:0.6rem 0 0}
.more-count{font-weight:500; margin:0; font-size:1.15rem; letter-spacing:0.14em; text-transform:uppercase;
  
  color:var(--soft); font-variant-numeric:tabular-nums;
}
.more-btn{
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  padding:1.1rem 2.2rem;
  font-size:1.15rem; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:700; 
  cursor:pointer;
  transition:background-color var(--micro), color var(--micro);
}
.more-btn:hover,.more-btn:focus-visible{background:var(--ink); color:var(--ground)}
.more-btn[hidden]{display:none}

/* --- BUTTONS --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:1.4rem 2.4rem; border:1px solid var(--ink);
  text-transform:uppercase; letter-spacing:0.12em; font-size:1.3rem; font-weight:600;
   white-space:nowrap;
  transition:background-color var(--micro), color var(--micro);
}
.btn:hover,.btn:focus-visible{background:var(--ink); color:var(--ground)}
.btn--sm{padding:0.9rem 1.6rem; font-size:1.2rem}
.btn--solid{background:var(--ink); color:var(--ground)}
.btn--solid:hover,.btn--solid:focus-visible{background:transparent; color:var(--ink)}

/* --- THE BAND — every artist gets exactly this --------------------- */
:root{
  --band-art-blur:0;
  /* Pulls the whole campaign in from the right edge. translateX, not a margin:
     a margin would shrink the grid and take the artwork's width down with it,
     which moves and RESIZES. This only moves. */
  /* 0 now the rule is gone — it was the only thing the inset had to leave room
     for. The work sits out at the shell edge. */
  --band-inset:0px;
}
.wall{display:flex; flex-direction:column}
/* Work sits in the right half with its label stacked directly beneath it —
   a wall label. The left half stays empty on purpose: that emptiness is the
   pacing, not wasted space. */
.band{
  display:grid;
  /* var() substitutes the WHOLE token, unit included, so the knob passes
     "1.4fr". Do NOT rewrite this as calc(var(--band-split) * 1fr):
     calc() does not accept fr, the declaration is dropped silently, and the
     grid falls back to auto columns. Verified: CSS.supports() says false. */
  /* 3.18fr = the reference's proportion. Its media is 928px in a 1280 viewport
     (72.5%) with roughly 292px of empty column to its left — so 928/292.
     Held as a RATIO, not a pixel width, so the proportion survives any screen. */
  grid-template-columns:1fr var(--band-split, 3.18fr);
  grid-template-rows:auto auto;
  /* 6.6rem, not --s7's 12rem: the note now reserves 5.4rem inside the band, so
     the two together restore the 12rem of air the wall had before. */
  column-gap:var(--s4); margin-top:var(--band-space, 6.6rem);
  transform:translateX(calc(var(--band-inset, 0px) * -1));
}

/* single column down here, so pulling it left would just push it off-centre */
@media (max-width:768px){ .band{transform:none} }
/* THE RULE BESIDE THE WORK.
   It lives in the band's empty left column, in ROW 1 — the artwork's own row —
   so a grid item's default stretch makes it exactly the height of the photo.
   Nothing measures the image; change the artwork's proportions and the rule
   follows, because it is the same row.

   --band-rule-gap is the distance from the ARTWORK'S left edge, which is the
   number anyone would actually want to set. The grid's own --s4 column gap is
   subtracted here so the token can mean that rather than "distance from the
   invisible column boundary", which is true but useless.

   4rem, brought in from 8rem on 2026-09-01. At 80px the rule read as a mark
   floating in the empty column; at 40px it belongs to the photograph it sits
   beside, which is the job. It is --s5 off the space scale, not a number
   picked to look right.

   --rule, not --soft: this sits beside a photograph and must not compete with
   it. It marks where the work begins; it is not trying to be seen. */
/* THE RULE IS THE METER (2026-09-02). It is still the hairline beside the
   work, still exactly the artwork's height — but it fills from the bottom
   in ink to the funded share, so a glance down the wall reads how each
   campaign is doing without a single bar, pill or percentage badge.
   --funded is 0..1, written by site.js from data-raised / data-goal. The
   gradient's hard stop is the water line. */
.band::before{
  content:"";
  grid-column:1; grid-row:1;
  justify-self:end;
  width:1px;
  margin-right:calc(var(--band-rule-gap, 4rem) - var(--s4) - var(--art-shift, 0px) - var(--art-nudge, 0px));
  /* ONE HAIRLINE AGAIN (2026-09-02). The meter fill read as a line that
     changed thickness — a black hairline beside a grey one looks heavier —
     and with the figures put away it had nothing to explain it. --funded is
     still written by site.js; to bring the meter back, swap this background
     for: linear-gradient(to top, var(--ink) calc(var(--funded,0) * 100%),
     var(--rule) calc(var(--funded,0) * 100%)). */
  background:var(--rule);
}

/* THE FIGURES — UNDER THE FUND BUTTON, and only while the band is live
   (2026-09-02; they stood at the foot of the rule before). Same cell and
   same centring as the button, then pushed down past it: translateY of half
   their own height puts their top on the cell's centre line, and the 3rem
   clears the button. They arrive with the button, on the same triggers, so
   hover shows one thing: the button with its numbers beneath. The rule's
   fill stays visible at rest — that is the wall's quiet read. */
/* NARROWER, NOT SHORTER (2026-09-02). The work used to fill the whole
   column at 16:9 — a letterbox 928px wide on a 1280 screen. It keeps that
   HEIGHT and gives up width to a 4:3 frame: width = column x 9/16 x 4/3 =
   75% of the column, so the height is exactly what it was. The label and the
   note take the same width so "PAINTING" still ends on the photo's edge, and
   the sort control and page numbers above and below end there too. Left edge
   untouched: the hero's first hairline still runs into it. --art-w is the one
   number; the phone keeps 100%, where a column is the screen. */
/* AND ON THE RIGHT, THE D (2026-09-02): the work's right edge is the right
   edge of the giant MYNICHEFUND above it. alignMark() in site.js measures
   that edge and writes two numbers here — --art-inset, how far the column's
   right edge overshoots the D; --art-shift, how far the photo has therefore
   moved right within its column. The rule, the Fund button and the figures
   in the empty column all read --art-shift so they travel with the photo. */
/* --art-nudge slides the whole campaign further right than the D, up to
   --art-inset (which puts its edge on the shell's edge). Asked for
   2026-09-02; set to the full inset, so the work ends where the page does.
   Set it to 0px to sit on the D again. */
/* 75% again (2026-09-03; 55% was tried for a day so a whole campaign fit
   one screen). 4:3, ending on the page's right edge. */
:root{--art-w:75%; --art-inset:0px; --art-shift:0px; --art-nudge:var(--art-inset);
  --band-rule-gap:2rem}   /* rule to photo: 20px, in from 40 (2026-09-02); the Fund button re-centres on its own */
.band .art{grid-column:2; grid-row:1; width:var(--art-w); aspect-ratio:4/3;
  justify-self:end; margin-right:calc(var(--art-inset) - var(--art-nudge))}
.band .band-text{grid-column:2; grid-row:2; width:var(--art-w);
  justify-self:end; margin-right:calc(var(--art-inset) - var(--art-nudge))}

/* THE LABEL BESIDE THE WORK (recomposed 2026-09-02). One block in the empty
   column, TOP-ALIGNED with the photo and LEFT-ALIGNED to the same line the
   bar's home icon and the panel's words stand on — the strip's edge plus one
   gutter. Inside it, in order: the sum in the display cut, the goal and the
   share in small caps, a hairline, the note on a reading measure, then the
   action. Nothing centred, nothing floating: it reads as a museum label
   beside the work, and it lines up with everything else on the page. The
   block stops a gutter short of the rule that stands beside the photo. */
.band .band-side{
  grid-column:1; grid-row:1;
  align-self:start; justify-self:stretch;
  margin-left:calc(var(--edge-w) - var(--shell-pad) + var(--s4));
  margin-right:calc(var(--band-rule-gap, 4rem) + var(--s3) - var(--art-shift, 0px) - var(--art-nudge, 0px));
  max-width:40ch;
  pointer-events:auto;
  display:flex; flex-direction:column; align-items:flex-start;
}
/* PUT AWAY FOR NOW (2026-09-02): the sum and the goal line are still built
   by site.js and still drive the rule's fill; they are just not shown. Delete
   this one rule to bring them back. */
.band .band-fund{display:none}
.band .band-fund{margin:0; text-align:left}
.band .fund-raised{
  margin:0;
  font-family:var(--face); font-variant-numeric:tabular-nums;
  font-size:clamp(2.6rem, 3vw, 3.6rem); line-height:0.95; letter-spacing:-0.02em;
  font-weight:800; 
  color:var(--ink);
}
.band .fund-of{
  margin:0.6rem 0 0;
  font-family:var(--face-ui); font-variant-numeric:tabular-nums;
  font-size:1.1rem; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:500; 
  color:var(--soft); white-space:nowrap;
}
/* (the note is back under the label — see WHAT THE ARTIST WROTE below) */
/* FUND — centred in the empty column, between the strip and the rule that
   stands beside the work (2026-09-02). Same cell as the figures; the left
   margin clears the strip and the right margin reaches exactly to the rule
   (the same sum the rule itself uses), so "centre" means the middle of what
   you see. */
.band .band-donate{
  grid-column:1; grid-row:1;
  justify-self:center; align-self:center;
  margin-left:calc(var(--edge-w) - var(--shell-pad));
  margin-right:calc(var(--band-rule-gap, 4rem) - var(--s4) - var(--art-shift, 0px) - var(--art-nudge, 0px));
  pointer-events:auto; cursor:pointer;
  /* A WORD, NOT A BOX (2026-09-02): the .btn outline and padding are
     dropped here, so it is the site's label type standing alone — ink at
     rest, grey under the pointer, on the colour fade the panel uses. */
  border:none; padding:0; background:transparent;
  font-size:1.3rem; letter-spacing:0.2em;
  color:var(--ink);
  transition:color var(--dim);
  z-index:1;
}
.band .band-donate:hover,
.band .band-donate:focus-visible{color:var(--soft); background:transparent}

/* WHAT COUNTS AS HOVERING THIS BAND.
   The <a> is a grid row spanning the FULL width, empty left column included,
   so it lit up whenever the pointer crossed that empty half — nowhere near the
   work. Only the work and its label are hit targets now; the empty column stays
   inert, which is the entire point of it being empty.
   :hover, pointerenter and clicks all still reach the <a>: hover state and
   events propagate up from whichever child was actually hit, so the link, the
   artwork reveal and the note keep working untouched. */
.band{pointer-events:none}
.band .art,.band .band-text{pointer-events:auto}
@media (max-width:768px){
  :root{--art-w:100%; --art-inset:0px; --art-shift:0px; --art-nudge:0px}
  .band{grid-template-columns:1fr}
  .band .art{aspect-ratio:16/9}
  .band .art,.band .band-text{grid-column:1}
  /* no empty column on a phone — the figures and the button drop beneath
     the label, left-aligned, the figures first */
  .band{grid-template-rows:auto auto auto auto}
  .band .band-side{grid-column:1; grid-row:3; margin:var(--s4) 0 0; max-width:none}
  .band .band-donate{grid-column:1; grid-row:4; justify-self:start; align-self:start; margin:var(--s3) 0 0}
  /* there is no empty column left to stand in — the rule would land on top of
     the artwork it is meant to sit beside */
  .band::before{display:none}
  /* single column: the bridge would lie on top of the photo */
  .band::after{display:none}
}
.band:first-of-type{margin-top:var(--s5)}
@media (max-width:768px){.band{margin-top:var(--s6)}}

/* THE LABEL UNDER THE WORK.
   Spread across the full width of the work instead of stacked down the middle:
   who it is at the left edge, what they do at the right. Pushing the two apart
   is what makes it read as a wall label rather than as a caption. */
.band-text{
  padding-top:var(--band-label-top, 5px);
  transform:translateX(var(--band-label-shift, 0px));
}
@media (max-width:768px){.band-text{padding-top:var(--s3)}}

.band-line{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
}
.band-who{min-width:0}

/* Given name and surname sit on ONE line and read as a full name, but they stay
   SEPARATE ELEMENTS. site.js sorts on .name and would sort by first name if the
   two were merged — and "sorted by surname" is principle 1 of the brief.

   Both halves now carry the SAME weight and the same colour: the full name is
   one object, nothing inside it is emphasised. (They were 400 and 700, which
   read as the surname being highlighted.) Weight is a knob — see dev.js. */
.band-name{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:var(--band-name-gap, 0.3em);
  /* 2.6rem = the reference's caption line, measured at 26px on a 10px root.
     Flat, not a clamp: the reference does not scale this with the viewport
     either, and matching it was the point. SUPERSEDES the earlier 22px tuning. */
  font-size:var(--band-name-size, 2.6rem);
  line-height:0.95;
}
.band .name,.band .given{
  font-size:inherit; color:var(--ink);
  font-weight:var(--band-name-weight, 700);
  
}
.band .given{
  margin:0; line-height:0.86;
  text-transform:uppercase; letter-spacing:-0.02em;
}

/* the niche holds the right end of the line */
.niche{
  margin:0; font-size:1.4rem; flex:none; white-space:nowrap; text-align:right;
  text-transform:uppercase; letter-spacing:0.2em; font-weight:600;
  
  color:var(--ink);
}
/* the country stays under the name, on the left, with the person it belongs to */
.band-meta{
  display:flex; gap:var(--s3); flex-wrap:wrap;
  justify-content:flex-start; margin-top:var(--s2);
}
/* scoped to the band on purpose — .micro is shared with the footer, the intro
   label and the search hits, and none of those asked to be resized */
.band-meta .micro{font-size:1.4rem}

/* WHAT THE ARTIST WROTE. Closed until the band has your attention, then it
   opens into the empty space that is already between bands.
   It uses the SAME four paths as the artwork reveal — :hover, :focus-visible,
   and .is-live, which site.js sets from pointerenter on fine pointers and from
   an IntersectionObserver on coarse ones — so the picture and the words open
   together instead of on two different triggers.
   grid-template-rows 0fr -> 1fr animates a height the box does not know yet;
   max-height would need a magic number that clips longer notes. */
/* IN FLOW, WITH ITS SPACE PERMANENTLY RESERVED.
   Two failed approaches are recorded here so neither gets tried again:
     1. in flow with auto height — opening added 54px to the band and shoved
        every campaign below it down the page.
     2. position:absolute — nothing moved, but the note then hung ENTIRELY
        outside .band's box (measured: band bottom 643, note top 643). Pointer
        events only still worked through DOM ancestry, which is luck rather than
        design, and a longer note would have overlapped the next campaign.
   The box is always --band-note-reserve tall whether the note is open or shut,
   so the layout cannot move, and it stays inside the band where it belongs.
   Equal reserve on every band is also the brief: identical footprint per artist,
   regardless of how much any one of them wrote. */
.band-note{
  height:var(--band-note-reserve, 5.4rem);
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows var(--macro), opacity var(--macro);
}
/* The gap above the note is drawn INSIDE the paragraph, by ::before, not as
   padding on the paragraph. Padding sits on the grid item's own box, which the
   0fr track does not clip — leave it there and every band carries a 10px
   phantom gap whether the note is open or shut. Measured: it does. */
/* Clamped to the two lines the reserve is sized for. A longer note cannot grow
   the box — it would either be clipped mid-sentence or break the equal
   footprint, and neither is acceptable. The rest belongs on the artist's own
   page: the surface is fixed, the interior is unlimited. */
.band-note > p{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; min-height:0; margin:0; padding:0;
  max-width:var(--band-note-width, 54ch); font-size:var(--band-note-size, 1.5rem); line-height:1.45;
  letter-spacing:0; text-transform:none; color:var(--soft);
}
.band-note > p::before{content:""; display:block; height:var(--s3)}
/* .is-live (set by site.js from the photo and the label) and keyboard
   focus — not :hover, so the figures column cannot open it */
.band:focus-within .band-note,
.band.is-live .band-note{grid-template-rows:1fr; opacity:1}

/* mobile is a later pass, but stop the two ends colliding in the meantime */
@media (max-width:768px){
  .band-line{flex-direction:column; align-items:flex-start; gap:var(--s2)}
  .niche{text-align:left}
}

/* work sits grey and blurred until it has your attention */
/* NOTHING HERE CHANGES SIZE, EVER. The frame does not transform, and the image
   inside it holds ONE scale in both states. Greyscale-and-blurred or full
   colour, the work occupies exactly the same pixels — only the colour moves. */
/* 16/9 and the 5px label gap are lifted from adamclarkecolour.com, measured
   live at 1280: its .clip-container is 928x522, ratio 1.778, with its caption
   starting 5px under the media. */
.art{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--deep)}
/* NO BLUR AT REST. The work sits in greyscale and resolves to full colour;
   nothing else about it moves. --band-art-blur is 0 by default and is still on
   a knob, so blur can be dialled back in without touching this rule.

   scale(1.06) is kept and must stay IDENTICAL in both states — animating it is
   what used to make the photo look like it changed size. It was originally
   there to push blurred edges outside the frame; with blur at 0 that job is
   gone and it now only holds the crop the images have always had. Safe to set
   to 1 if the full uncropped frame is wanted — that will re-frame every photo
   slightly, so it is a deliberate change, not a cleanup. */
/* THE HOVER (2026-09-02). At rest the work sits in greyscale, held very
   slightly enlarged; point at the campaign and it comes up in colour and
   settles to its true size — a breath out, not a zoom in — while the note
   beside it goes from grey to ink and a hairline draws under the niche.
   All on --macro, so the three read as one movement. */
.art img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(100%);
  transform:scale(1.06);
  transition:filter var(--macro), transform var(--macro);
}
/* .is-live, not :hover — site.js sets it from the photo and the label only,
   so the figures column cannot trigger it (2026-09-02) */
.band:focus-within .art img,
.band.is-live .art img{filter:none; transform:scale(1)}
.band:focus-within .band-note,
.band.is-live .band-note{opacity:1}
.band .niche{position:relative}
.band .niche::after{
  content:""; position:absolute; left:0; right:0; bottom:-0.35em; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform var(--macro);
}
.band:focus-within .niche::after,
.band.is-live .niche::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .art img{transition:none; transform:none}
  .band .niche::after{transition:none}
}
.art::after{
  content:""; position:absolute; inset:0; background:var(--ground);
  mix-blend-mode:multiply; opacity:var(--tint, 0.55); pointer-events:none;
  transition:opacity var(--macro);
}
/* (the hover colour reveal was here; the photos are in colour at rest now) */

/* (the tint overlay's hover lift was here; --tint is 0 in the white world,
   so it did nothing — removed 2026-09-02 so nothing on the wall answers
   hover at all) */

/* --- FOOTER ---------------------------------------------------------- */
/* THE PAGES. Mirrors .band's grid and inset exactly as .sort-row does, so
   the numbers end flush with the artwork above and the wall's right edge
   moves them with it. They read as the sort control's twin at the other end
   of the wall: same face, same tracking, same size. The current page is ink,
   the rest --soft, hover brings one up to ink — the one-colour, opacity-only
   language every other control here already speaks. */
.pages{
  display:grid;
  grid-template-columns:1fr var(--band-split, 3.18fr);
  column-gap:var(--s4);
  transform:translateX(calc(var(--band-inset, 0px) * -1));
  margin-top:var(--s6);
}
.pages ul{
  grid-column:2; justify-self:end;
  display:flex; gap:var(--s3); list-style:none; padding:0;
  margin:0 calc(var(--art-inset, 0px) - var(--art-nudge, 0px)) 0 0;   /* ends on the photo's edge */
}
.pages a{
  display:block; padding:0 0.2em;
  font-family:var(--face-data); font-variant-numeric:tabular-nums;
  font-size:var(--rail-size, 1.3rem); letter-spacing:0.2em; font-weight:600;
  
  color:var(--soft); text-decoration:none;
  transition:color var(--micro);
}
.pages a:hover,.pages a:focus-visible,.pages a[aria-current="page"]{color:var(--ink)}
@media (max-width:768px){
  .pages{display:block; transform:none}
  .pages ul{justify-content:center; flex-wrap:wrap}
}

/* "Add your name" left the footer 2026-09-02, so the footer's own top rule
   is the only line here — the row no longer draws a second one beneath it. */
/* --- THE FOOTER ----------------------------------------------------------
   The shape every site has: a brand column, three link columns, a hairline,
   a bottom bar. In this site's language — the grid is drawn with 1px rules,
   the headings are .micro, the links are one colour and answer in opacity.

   padding-left clears the fixed edge strip: on desktop the shell begins under
   it, and the old footer row lost "MYNI" behind the black bar. Same sum
   .hero-mark and .band-donate use; the phone shell already clears it. */
.foot{
  border-top:1px solid var(--rule); margin-top:var(--s5);
  /* + --s4 of breathing room off the strip (2026-09-02): flush against the
     black bar the brand text read as touching it. The whole footer moves,
     so the columns and the bottom bar stay on one left edge. */
  padding:var(--s6) 0 var(--s5) calc(var(--edge-w) - var(--shell-pad) + var(--s4));
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
  column-gap:var(--s5); row-gap:var(--s5);
}
.foot-brand{max-width:44ch; padding-right:var(--s5)}
.foot-mark{margin:0 0 var(--s3)}
.foot-disc{font-weight:400; margin:0 0 var(--s3);
  font-size:1.35rem; line-height:1.55; color:var(--soft);
  
}
.foot-more{
  font-size:1.2rem; text-transform:uppercase; letter-spacing:0.14em; font-weight:600;
  
  color:var(--ink); border-bottom:1px solid currentColor; padding-bottom:0.15em;
  transition:opacity var(--micro);
}
.foot-more:hover,.foot-more:focus-visible{opacity:0.55}
.foot-head{margin:0 0 var(--s3); color:var(--soft)}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7rem}
.foot-col a{font-weight:500; font-size:1.4rem; line-height:1.3; color:var(--ink);
  
  transition:opacity var(--micro);
}
.foot-col a:hover,.foot-col a:focus-visible{opacity:0.55}
/* .foot-row is the OLD footer's row, still used by archive.html and
   artist.html until they get the new footer. */
.foot-row{display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}
.foot-bar{
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  margin-top:var(--s6); padding-top:var(--s3);
  border-top:1px solid var(--rule);
}
.legal a,.prose a{
  color:var(--ink); text-decoration:underline; text-underline-offset:0.2em;
  text-decoration-thickness:1px; transition:opacity var(--micro);
}
.legal a:hover,.prose a:hover{opacity:0.55}
@media (max-width:900px){
  .foot-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .foot-brand{grid-column:1 / -1; padding-right:0}
}
@media (max-width:768px){
  .foot{padding-left:0}
}
@media (max-width:480px){
  .foot-grid{grid-template-columns:1fr}
}

/* --- LEGAL — legal.html ------------------------------------------------
   One page, every notice, each under its own id so the footer's links land on
   the section they name. It takes the wall's grid: the text sits in column
   two, on the artwork's left edge, and the empty column on the left is the
   same pacing every campaign gets. Measure held at 68ch — legal text is read
   line by line and a wider column loses the eye at the return. */
.legal,.prose{
  display:grid;
  grid-template-columns:1fr var(--band-split, 3.18fr);
  column-gap:var(--s4);
  margin-top:var(--s6);
}
.legal > *,.prose > *{grid-column:2}
.legal-head{margin-bottom:var(--s6)}
.legal-head .name{margin-bottom:var(--s3)}
.legal-head .micro{display:block}
.legal-toc ul{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  list-style:none; margin:var(--s4) 0 0; padding:0;
}
.legal-toc a{
  font-size:1.2rem; text-transform:uppercase; letter-spacing:0.14em; font-weight:600;
  
  color:var(--ink); text-decoration:none; transition:opacity var(--micro);
}
.legal-toc a:hover,.legal-toc a:focus-visible{opacity:0.55}
.legal section,.prose section{
  max-width:68ch; padding-top:var(--s4); margin-bottom:var(--s6);
  border-top:1px solid var(--rule);
  /* the bar is not sticky, so a hash jump can land flush; this is breathing
     room for the eye, not clearance for chrome */
  scroll-margin-top:var(--s4);
}
.legal h2,.prose h2{
  margin:0 0 var(--s3);
  font-size:1.2rem; text-transform:uppercase; letter-spacing:0.14em; font-weight:600;
  
}
.legal h3,.prose h3{
  margin:var(--s4) 0 var(--s2);
  font-size:1.5rem; font-weight:600;
  
}
.legal p,.legal li,.prose p,.prose li{font-size:1.5rem; line-height:1.5; margin:0 0 var(--s3)}
.legal ul,.legal ol,.prose ul,.prose ol{margin:0 0 var(--s3); padding-left:1.4em}
.legal li,.prose li{margin-bottom:var(--s2)}
.legal .ph,.prose .ph{color:var(--soft)}
/* the opening line of a prose page: the site's lead cut, one size down */
.prose .lead-line{
  font-size:clamp(1.9rem, 2.6vw, 2.6rem); line-height:1.15; max-width:26ch;
  font-weight:500; 
  letter-spacing:-0.02em; margin:0 0 var(--s4);
}
@media (max-width:768px){
  .legal,.prose{grid-template-columns:1fr}
  .legal > *,.prose > *{grid-column:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms !important; animation-duration:1ms !important}
  /* NOTHING ELSE HERE. There used to be `.art img{filter:grayscale(100%);
     transform:none}` on this line, which stripped the blur and the overscale.
     That is a visual treatment, not motion — reduce-motion asks for less
     movement, not a different design — and because it sits later in this file
     at equal specificity it silently beat the real rule, so anyone with Reduce
     Motion enabled saw the work in flat greyscale with no blur at all.
     Killing the transition duration above is already the whole job. */
}

/* --- SORT ------------------------------------------------------------
   Sits in the empty left half, vertically centred, present the whole way
   down the wall.

   The options are NAME / NICHE / LOCATION — groupings, not rankings.
   Principle 1 of the brief is "no order but the alphabet", and it survives
   these because none of them says who deserves to be seen. The moment
   "most funded" or "trending" appears here, the wall becomes a leaderboard
   and the whole premise of the site is gone. Do not add them. */

/* THE SORT ROW — above the first campaign, ending flush with the artwork.
   It repeats .band's own grid and inset rather than hard-coding a position, so
   it stays locked to the wall's right edge when --band-split or --band-inset
   are changed. Hard-coding a margin here would drift the moment either moved. */
.sort-row{
  display:grid;
  grid-template-columns:1fr var(--band-split, 3.18fr);
  column-gap:var(--s4);
  transform:translateX(calc(var(--band-inset, 0px) * -1));
}
.sort-row .sorter{grid-column:2; grid-row:1; justify-self:end; margin-right:calc(var(--art-inset, 0px) - var(--art-nudge, 0px))}

/* The hairline that used to close the first screen (.sort-row::after) was
   removed 2026-09-02. The sort control now sits on nothing. */
@media (max-width:900px){
  .sort-row{display:block; transform:none; text-align:center; margin-top:var(--s5)}
}

.sorter{
  position:relative;
  opacity:0; visibility:hidden;
  transition:opacity var(--macro), visibility var(--macro);
}
.sorter.is-on{opacity:1; visibility:visible}
.sort-btn{
  color:var(--ink); font-size:var(--rail-size, 1.3rem); text-transform:uppercase;
  letter-spacing:0.2em; font-weight:600;
  
  transition:opacity var(--micro);
}
.sort-btn:hover,.sort-btn:focus-visible{opacity:0.55}
.sort-current{color:var(--soft)}
/* ABC: just a label, not a button, set bigger (client, 22 Sept 2026) */
.sort-abc{margin:0; font-size:2.6rem; cursor:default}
.sort-abc:hover{opacity:1}
/* ABC colours (client, 22 Sept 2026) */
.sort-abc #sortcurrent{color:var(--spark)}

.drop-menu{
  position:absolute; left:0; top:calc(100% + var(--s3)); min-width:16rem;
  background:var(--ground); border:1px solid var(--rule);
  opacity:0; visibility:hidden; transform:translateY(-0.4rem);
  transition:opacity var(--micro), transform var(--micro), visibility var(--micro);
}
.drop-menu.is-open{opacity:1; visibility:visible; transform:translateY(0)}
.drop-menu a{
  display:flex; align-items:center; width:100%; text-align:left;
  padding:var(--s3); border-top:1px solid var(--rule);
  font-size:1.2rem; text-transform:uppercase; letter-spacing:0.14em; font-weight:600;
  
  transition:background-color var(--micro), color var(--micro);
}
.drop-menu a:first-child{border-top:none}
.drop-menu a:hover,.drop-menu a:focus-visible{background:var(--ink); color:var(--ground)}


/* Below 900 there is no empty column to stand in, so the rail drops into the
   flow above the wall. The links are not repeated here — the bar's own panel
   already carries them — so only the sort control shows. */
@media (max-width:900px){
  .rail-nav{display:block}
}

/* --- THE FIRST SCREEN -------------------------------------------------
   Nothing of the wall may be visible on load, on any device. So the block
   above it fills the viewport and the first artist begins one scroll down.

   Measured against 100lvh, the LARGEST viewport state, not 100vh or 100svh:
   on phones the browser chrome collapses as you scroll, the viewport grows,
   and a block sized to the smaller state would let an artwork peek in.

   --nav-h is written by site.js from the real header height, because the
   header is sticky and therefore in flow — its height has to come out of
   the first screen or the rail gets pushed below the fold. */
.first{
  min-height:calc(100vh  - var(--nav-h, 6.4rem));
  min-height:calc(100lvh - var(--nav-h, 6.4rem));
  display:flex; flex-direction:column; justify-content:space-between;
}
.first .opening{flex:1; display:flex; flex-direction:column; justify-content:center}

/* --- THE HERO ---------------------------------------------------------
   Modelled on adamclarkecolour.com, whose first screen was read out of the
   live DOM rather than off a screenshot: its hero is columns carrying
   `border-left:1px #1E1E1E`, each running the full height of the screen,
   a small label at the top of each hugging its line, and the logotype sitting
   on the bottom, overrunning its own column and crossing the lines.

   THE LINES ARE NOT DECORATION — THEY ARE THE WALL'S OWN GRID.
   A .band down the page is `1fr var(--band-split,3.18fr)` with a --s4 gap,
   which puts the left edge of every artwork at 25.1% of the shell. This grid
   is declared with the SAME two values, so the first hairline lands exactly on
   that edge and continues, uninterrupted, as the left edge of every piece of
   work below it. Move --band-split (there is a dev slider on it) and the hero
   follows on its own. That is the whole reason the columns are not hardcoded
   percentages.

   Three lines, four columns: the wall's empty pacing column, then its work
   column cut into equal thirds.                                           */
.hero{
  flex:1; min-height:0;
  display:grid;
  grid-template-columns:1fr var(--band-split, 3.18fr);
  /* ONE ROW. There used to be three — air, then quote, then mark — because the
     block hung off the bottom edge and the pieces were separate items. They
     are one object now and it is centred, so the extra tracks had nothing in
     them. Keeping them was actively harmful: align-self:center centres an item
     in its own GRID AREA, and with the block parked in row 3 that area was a
     content-height strip at the foot of the screen. The block measured 228px
     below the hero's centre and the two lines ran 1.5px off the bottom of the
     window. With a single 1fr row the area IS the first screen and centred
     means centred. */
  grid-template-rows:1fr;
  column-gap:var(--s4);
}

/* The three lined columns. They span EVERY row — that is what lets the mark,
   which lives in the last row, cross them rather than start beneath them. */
.hero-main{
  grid-column:2; grid-row:1 / -1;
  display:grid; grid-template-columns:repeat(3, 1fr);
  min-width:0;
}
/* No column-gap in here on purpose: these three are subdivisions of one
   column, and the hairline IS the division. A gutter would say they are
   separate columns that happen to sit near each other. */
.hero-col{
  grid-row:1 / -1;
  /* NOT --rule. That token is for dividers INSIDE content — at #B5B5B5 on this
     paper it measures 2.1:1, which is right for separating two paragraphs and
     far too quiet to be the structure of a whole screen. The reference draws
     these at #1E1E1E on its red, near-maximum contrast, because they are the
     composition rather than a division within it. --soft lands at 5.1:1: a line
     you read as built, still clearly lighter than the type it carries. */
  border-left:var(--line-weight, 1px) solid var(--soft);
  padding:0 var(--s3);
  /* THE REFERENCE'S HEIGHT, EXACTLY (adamclarkecolour.com, measured
     2026-09-02 at 1280x800): its columns run from y=20 to y=780 — one 20px
     inset top and bottom, full window otherwise. This grid starts under the
     bar, so the top margin reaches back up over it (the bar is transparent)
     to 20px, and the bottom margin stops 20px short of the first screen's
     end, which is the window's. */
  margin-top:calc(var(--line-inset, 20px) - var(--nav-h, 6.4rem));
  margin-bottom:var(--line-inset, 20px);
  /* the columns are a drawn grid, not a surface — clicks fall through to
     whatever is actually beneath them */
  pointer-events:none;
}
.hero-col > *{pointer-events:auto}
.hero-col:nth-of-type(1){grid-column:1}
.hero-col:nth-of-type(2){grid-column:2}
.hero-col:nth-of-type(3){grid-column:3}

/* The labels hug the top of their line, as they do on the reference. --s1 of
   optical lift so the cap-height sits level with the top of the rule rather
   than a leading's worth below it. */
/* THE LIVE-EDIT HOOKS. Each is `var(--token, <the real value>)` — the same
   shape the band knobs use. The fallback is the design; the token only exists
   once the dev panel has written one.
   The tagline and rule-list hooks went with their elements on 2026-09-01. */

/* --- THE BLOCK: the name and the two lines, as one object ---------------
   These were three separate grid items pushed into place by hand, and by hand
   is exactly why they drifted — the two small lines finished 2.5px out of
   level with each other and overlapping by 103px. Nothing is nudged now. The
   block is one grid item, the pair is one flex row inside it, and the only
   numbers left are how far the block sits off the bottom and the gap between
   the name and the lines. */
.hero-block{
  grid-column:1 / -1; grid-row:1;
  /* CENTRED IN THE FIRST SCREEN. It used to hang off the bottom edge and get
     hauled back up by a -300px translate, which is a number standing in for a
     position. align-self does the same job by saying what is meant, and it
     holds however tall the window is. --mark-y is a nudge from centre now, so
     its resting value is 0. */
  align-self:center;
  transform:translateY(var(--mark-y, 0px));
}

/* The pair shares the wordmark's box — the rail on the left, the screen edge
   on the right — so the row inside can be sized as a fraction of it. */
/* THE PAIR SITS IN THE COLUMNS, not against the wordmark.
   They were hung off the name's right edge, which straddled the hairlines and
   read as two phrases floating near a rule rather than in it. Each one now
   occupies one of the columns the hairlines actually draw: "fund your art"
   between the second rule and the third, "find your niche" between the third
   and the right edge.

   That means this grid must be the SAME grid as .hero-main — the identical
   1fr/--band-split pair with the identical gap — so the two agree by
   construction and not by two sets of numbers that have to be kept level.
   Move --band-split and the rules and the lines travel together. */
.hero-pair{
  margin-top:var(--pair-gap, 5.2vw);
  display:grid;
  grid-template-columns:1fr var(--band-split, 3.18fr);
  column-gap:var(--s4);
}
/* EXACTLY AS WIDE AS THE WORD. The wordmark is --mark-fill of this same box,
   centred in it; so a row at --mark-fill of 100%, also centred, has precisely
   the wordmark's left and right edges. space-between then drops one line under
   each end of the name — at 1024, at 1920, at any width, with no number to
   keep in step. Change --mark-fill and this follows on its own. */
.hero-pair-in{
  grid-column:2;
  /* the same three equal columns .hero-main is cut into — the hairlines are
     these columns' left borders, so a line placed in one starts at a rule */
  display:grid; grid-template-columns:repeat(3, 1fr);
  /* one grid row, so the two are level by construction rather than by two
     matching offsets. This is what stopped them drifting apart by hand. */
  align-items:baseline;
}
/* align-items:baseline on the row is what holds the two level — not a matched
   pair of offsets. They were set by hand at 29px and 27px, which is wheel
   jitter rather than a decision, so they share one size. */
/* CENTRED BETWEEN ITS TWO RULES. They used to hang 10px off the left-hand
   rule; centring reads as the line belonging to the column rather than being
   parked against its edge.
   justify-self, NOT text-align. A stretched grid item centres the words but
   leaves the whole column clickable, and these are links now — a quarter of
   the screen that silently navigates is a trap. This shrinks the box to the
   words, so the hit area is the words. */
.hero-line{grid-row:1; justify-self:center; position:relative}

/* THE HOVER IS A HAIRLINE, because that is this page's whole vocabulary — the
   grid is drawn in 1px rules, so the link answers in one. It grows from the
   left on the shared --micro curve. currentColor, so it needs no palette of
   its own and follows the ink in any world. */
.hero-line::after{
  content:""; position:absolute; left:0; right:0; bottom:-0.3em; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--micro);
}
.hero-line:hover::after,
.hero-line:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .hero-line::after{transition:none}
}
.hero-line:nth-of-type(1){grid-column:2}   /* between rules two and three */
.hero-line:nth-of-type(2){grid-column:3}   /* between rule three and the edge */
.hero-line{
  margin:0;
  /* SIZED TO FIT ITS COLUMN, not typed once and left.
     Each line now lives inside one of the three columns, and that column is
     roughly a quarter of the page — 309px at 1280 but only 193px at 820.
     A flat 28px overflowed there and both lines wrapped to two, which broke
     the single row they are supposed to read as (measured: 66px tall instead
     of 31). "find your niche" sets about 7.9x its font-size wide, so the
     column can carry roughly 2.2vw; the clamp holds the 28px that was chosen
     by hand on anything 1273px and wider, and gives way below that rather
     than wrapping. */
  font-size:var(--line-size, clamp(1.6rem, 2.2vw, 2.8rem));
  font-weight:500; 
  letter-spacing:-0.02em; line-height:1.12; text-transform:none;
}

/* THE MARK ------------------------------------------------------------
   Full bleed, and deliberately WIDER than the screen: the outer stems of the
   M and the D run off both edges. Eleven characters cannot reach a three-letter
   monogram's scale inside the page, so the mark is allowed to leave it — and
   a name that does not fit the space it was given is the argument the line
   above it is making.

   --shell-pad is cancelled as a negative margin, so this box measures exactly
   the viewport width and the crop happens ON the screen edge. `overflow:clip`
   rather than `hidden`: clip does not create a scroll container, so the
   overflowing glyphs cannot produce a horizontal scrollbar.

   The <span> must stay. It is inline-block, so its box is the GLYPHS and not
   the clip window — text-align:center on the parent then overhangs it evenly
   on both sides, and land() in site.js measures that box to fly the loader's
   wordmark into this one. A display:block span would report the window's
   width instead and land the flight at the wrong size. */
.hero-mark{
  /* WHERE THE TWO CROPS HAPPEN, and why they are not the same number.
     RIGHT: the screen edge — cancel the shell gutter, -20px.
     LEFT:  the EDGE STRIP, not the screen. That fixed dark rail is permanent
     furniture at z-index 60 and paints over anything in flow, so a mark run to
     x=0 does not bleed off the page, it disappears behind a black bar — one
     soft crop and one hard one, which reads as a mistake. The true canvas
     starts where the strip ends, so the mark starts there too and BOTH ends
     are cut by something solid. +40px is (--edge-w - --shell-pad); both
     operands are tokens, so the strip can be re-widened without this breaking. */
  margin-left:calc(var(--edge-w) - var(--shell-pad));
  margin-right:calc(var(--shell-pad) * -1);
  /* CLIP SIDEWAYS ONLY. A plain `overflow:clip` also cropped the BOTTOM:
     the round letters (C, U, O) overshoot the baseline by 3.5px at this size
     and the line box, at 0.76, is 1.6px shorter than the ink. Measured — the
     C and the U were losing the very base of their curve, which reads as a
     rendering fault rather than as a crop. `clip` is the one overflow value
     that may be mixed with `visible` on the other axis (hidden or auto would
     silently coerce this to auto and give the page a scrollbar). */
  overflow-x:clip; overflow-y:visible;
  /* The resting position and all vertical travel belong to .hero-block now.
     That is precisely what keeps the two small lines locked to the name: they
     are inside the thing that moves, so they cannot be left behind. */
  /* --mark-fill is a multiple of THIS box, so the span below is sized in cqw
     rather than vw. It matters when the panel opens: the shell steps aside,
     this box narrows, and the mark rescales to keep the same crop instead of
     staying viewport-sized and losing another two letters. */
  container-type:inline-size;
  /* all capitals, no descenders: the mark can sit hard on the bottom edge of
     the screen with no optical gap underneath it. */
  line-height:0.76;
}
.hero-mark span{
  display:inline-block; white-space:nowrap;
  /* CENTRED BY TRANSFORM, NOT text-align. An inline-block wider than an
     overflow:clip parent does not honour text-align:center — the engine
     clamps the overflow to the start edge, so the word bled off the right
     only and sat flush left. Measured: span.left 0, span.right 1510 in a
     1280 box. left:50% + translateX(-50%) is geometry rather than alignment
     and overhangs both ends equally. Verified: 145px lost per side at 1.18.  */
  position:relative; left:50%;
  /* --mark-x slides the word within the fixed crop window, so nudging right
     reveals more of the M and loses more of the D. That is the useful control;
     moving the window itself is not. */
  transform:translateX(calc(-50% + var(--mark-x)));
  /* solved, never typed: fill x box width / measured width-per-em. Both
     operands live in tokens.css and --mark-fill is the only one to touch. */
  font-size:calc(var(--mark-fill) * 100cqw / var(--mark-ratio));
  font-weight:900; 
  letter-spacing:-0.02em; text-transform:uppercase;
  margin:0;
}

/* NARROW SCREENS. The word is long and a phone is not wide, so one line of it
   is small however it is set — cropping harder does not fix that, it just
   costs letters. The mark goes to a near-flush fill instead and the hero
   drops to a single lined column, because three columns inside 375px are
   90px each and a label does not fit in one. */
@media (max-width:768px){
  /* 1.00 — edge to edge and NOT cropped, matching the desktop decision. It was
     1.06 back when the mark deliberately bled off both sides; the design no
     longer does that anywhere, and a phone is too narrow to give away letters.
     1.00 is the largest the word can be while staying whole. */
  /* --mark-x back to 0 here. On a phone the rail is 12% of the width and the
     word already fills its box exactly, so shifting it half a rail to the left
     would not centre it — it would slice 22px off the M. Canvas-centred is the
     only centre available at this size. */
  :root{--mark-fill:1; --mark-x:0px}
  .hero{grid-template-columns:1fr; column-gap:0}

  /* THE LINES GO AWAY, and that is the point rather than a concession.
     They exist to state the wall's grid; below 768px .band collapses to a
     single column and there is no grid left for them to state. Three rules
     across 305px would be 100px columns drawn around a proportion the page
     no longer uses — decoration, which is what they were built not to be.
     There is no longer anything in them to keep either. */
  .hero-main{display:none}

  /* THE PAIR STACKS. Held apart by space-between they would sit at the two
     ends of a ~305px row, which is two words marooned either side of a gap
     rather than a pair. Stacked and left-aligned they read as two lines, and
     the baseline rule that keeps them level on desktop is simply not needed
     once they are on separate lines. */
  .hero-pair{grid-template-columns:1fr; column-gap:0}
  /* --s3, not --s1. Stacked at 18px the two lines sat with no gap between
     them at all, and the hover rule sits 0.3em BELOW its text — it would have
     drawn straight through the ascenders of the line underneath. The gap has
     to clear the underline, not just the type. */
  .hero-pair-in{grid-column:1; grid-template-columns:1fr; row-gap:var(--s3)}
  /* stacked and left-aligned here, so they hang off the mark's edge rather
     than centring in a column that no longer exists */
  .hero-line,
  .hero-line:nth-of-type(1),
  .hero-line:nth-of-type(2){grid-column:1; grid-row:auto; justify-self:start}

  /* .shell already reserves the rail at this width, so these only have to
     cancel the gutter to reach it — not step over it as on desktop. */
  .hero-mark,
  .hero-pair{margin-left:calc(var(--shell-pad) * -1)}
}

/* ============================================================
   THE ARCHIVE — archive.html
   Measured off adamclarkecolour.com/archive at 1280x800, read out of the
   live DOM rather than off a screenshot:
       name top left, category list top right behind a 1px rule, both at y=20
       the grid does not start until y=400 — half the screen of nothing
       three columns, cards 399 wide at x = 70 / 469 / 869, no gutter
       each figure: border-left 1px #1E1E1E, padding 0 20px 0 5px, mb 60px
       image 16:9 (377x204), figcaption padding-top 5px
       title 12px bold uppercase / credits 12px regular / category 10px right
   Those proportions are kept. The VALUES are this site's own tokens, because
   a page that borrowed another site's greys would stop being this site.
   ============================================================ */

/* THE RAIL HAS TO BE RESERVED HERE.
   .shell pads the page by --shell-pad and no more, which is fine on the home
   page because the wall's first column is deliberately empty — nothing is
   under the rail to lose. The archive fills all three columns, so its first
   card started at x=20 with a 60px black bar painted over it: "EVA BARTOŠ"
   read as "BARTOŠ".

   As a margin on the archive's own blocks rather than padding on .shell,
   because `body.menu-open .shell` carries the same specificity and would have
   fought a .shell.arch rule for the panel's step-aside. 60px puts the content
   at x=80 — the same left edge the bar's wordmark uses. */
/* the whole two-column block clears the fixed edge strip; the pieces
   inside it no longer each carry their own inset */
.arch-layout{
  margin-left:calc(var(--edge-w) + var(--s4) - var(--shell-pad));
}
@media (max-width:768px){
  /* .shell already reserves the rail at this width — see the mobile block
     further up — so reserving it twice would indent the page off its gutter */
  .arch-layout{margin-left:0}
}

/* --- HEADER ---------------------------------------------------------
   REBUILT 9 Sept 2026. What was here: a display word alone, eighty pixels
   of nothing, then one row carrying three unrelated objects — a count at
   micro size, a search field absolutely positioned to the middle of the
   WINDOW rather than to its own row, and the two openers. Two type sizes
   in the whole header, 72px and 11px, with nothing between them.

   What it is now: a masthead of two things at two weights, the alphabet as
   the page's own control, and a row of two objects that each start where a
   row starts. The dead gap is gone; the space that remains is between the
   bands and is doing work. */
/* --- THE TWO COLUMNS ------------------------------------------------
   The filters stand open in a rail down the left and the work sits to the
   right of them (9 Sept 2026). They were a drawer behind a "Filter by"
   button before this. A faceted filter is something you read WHILE you
   look — a count beside a word is only worth anything next to the grid it
   describes — and a drawer made you close it to find out whether the
   choice had been any good. */
.arch-layout{
  display:grid;
  grid-template-columns:24rem minmax(0,1fr);
  gap:var(--s5);
  align-items:start;
  padding-top:var(--s5);
}

/* the rail travels with the grid rather than scrolling away from it; it
   takes its own scrollbar if the lists outgrow the window */
.arch-side{
  position:sticky; top:var(--s4); align-self:start;
  max-height:calc(100vh - var(--s5));
  overflow-y:auto; padding-right:var(--s3);
}
.arch-side-h{
  margin:0 0 var(--s4);
  font-size:1.5rem; font-weight:700;
  
  color:var(--ink);
}
.arch-fgroup{
  border:0; margin:0 0 var(--s4); padding:0 0 var(--s4); min-width:0;
  border-bottom:1px solid var(--rule);
}
.arch-fgroup:last-of-type{border-bottom:0}
.arch-fgroup legend{
  padding:0 0 var(--s3);
  font-size:1.1rem; text-transform:uppercase; letter-spacing:0.14em;
  font-weight:600; 
  color:var(--soft);
}

/* --- THE HEADER ROW -------------------------------------------------
   The page's name and its count on the left, the search in the middle,
   the sort on the right. The name used to be in the display cut at 78px,
   which made the word "campaigns" the largest thing on a page of them. */
.arch-head{
  display:flex; align-items:center; gap:var(--s3) var(--s4); flex-wrap:wrap;
  border-bottom:1px solid var(--rule);
  padding-bottom:var(--s3); margin-bottom:var(--s4);
}
.arch-headline{display:flex; align-items:baseline; gap:var(--s3); min-width:0}
.arch-title{
  margin:0; font-size:1.9rem; line-height:1;
  text-transform:uppercase; letter-spacing:-0.01em;
  font-weight:800; 
  white-space:nowrap;
}
.arch-count{margin:0; font-variant-numeric:tabular-nums; white-space:nowrap}
/* the search takes the middle and the slack; the sort sits at the end */
.arch-search{
  position:static; translate:none; margin:0 auto;
  align-items:baseline; gap:0.15em; width:auto;
}
.arch-search .bar-search-q{
  flex:none; text-align:left; padding:0; width:8rem;
  border:none; border-bottom:1px solid var(--rule); color:var(--ink);
  transition:width var(--macro), border-color var(--micro);
}
.arch-search .bar-search-q::placeholder{color:var(--soft)}
.arch-search:focus-within .bar-search-q,
.arch-search .bar-search-q[aria-expanded="true"]{
  width:min(30rem, 30vw); border-bottom-color:var(--ink);
}
.arch-search .bar-hits{left:0; translate:none; z-index:40}

.arch-sort{display:inline-flex; align-items:center; gap:0.8em; flex:none}
.arch-sort-k{
  font-size:1.2rem; text-transform:uppercase; letter-spacing:0.14em;
  font-weight:600; 
  color:var(--soft);
}
/* a real <select>: sort is one-of-six, which is what a select is for — it
   opens on the keyboard, takes type-to-select, and is the native wheel on
   a phone. The chevron is drawn because the UA's own cannot be styled. */
.arch-select{position:relative; display:inline-flex; align-items:center}
.arch-select select{
  -webkit-appearance:none; appearance:none;
  border:1px solid var(--rule); background:transparent; color:var(--ink);
  font-family:var(--face); font-size:1.2rem;
  text-transform:uppercase; letter-spacing:0.14em;
  font-weight:600; 
  padding:0.8rem 3rem 0.8rem 1.2rem;
  border-radius:0; cursor:pointer;
  transition:border-color var(--micro);
}
.arch-select select:hover,.arch-select select:focus-visible{border-color:var(--ink)}
/* the dropdown itself is the OS's, so it needs the colours spelled out */
.arch-select option{background:var(--deep); color:var(--on-deep)}
.arch-select i{position:absolute; right:1.2rem; width:0.8em; height:0.8em; pointer-events:none}
.arch-select i::before,.arch-select i::after{
  content:""; position:absolute; top:35%; width:55%; height:1px; background:var(--ink);
}
.arch-select i::before{left:0; transform:rotate(45deg)}
.arch-select i::after{right:0; transform:rotate(-45deg)}

/* --- AN OPTION IS A ROW --------------------------------------------- */
.arch-fopts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.2rem}
.arch-fopts--tall{max-height:22rem; overflow-y:auto}
/* the whole row is the label, so the hit target is the rail's width */
.arch-fopt{
  display:flex; align-items:center; gap:0.9rem;
  padding:0.45rem 0.2rem; cursor:pointer;
  font-size:1.3rem; line-height:1.2; color:var(--ink);
  transition:opacity var(--micro);
}
.arch-fopt:hover{opacity:0.7}
.arch-fopt input{
  -webkit-appearance:none; appearance:none; flex:none; margin:0;
  width:1.5rem; height:1.5rem;
  border:1px solid var(--rule); background:transparent;
  position:relative; cursor:pointer;
}
.arch-fopt input[type="radio"]{border-radius:50%}
.arch-fopt input:checked{background:var(--ink); border-color:var(--ink)}
/* the tick is two strokes, drawn — the site owns no icon set */
.arch-fopt input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:0.42rem; top:0.16rem;
  width:0.4rem; height:0.75rem;
  border:solid var(--ground); border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}
.arch-fopt input[type="radio"]:checked::after{
  content:""; position:absolute; inset:0.35rem; border-radius:50%; background:var(--ground);
}
.arch-fopt input:focus-visible{outline:2px solid var(--spark); outline-offset:2px}
.arch-fopt-t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* the count is the promise: how many you get if you tick this */
.arch-fopt-n{
  flex:none; font-family:var(--face-ui); font-variant-numeric:tabular-nums;
  font-size:1.1rem; color:var(--soft);
}
/* an option that would empty the page is shown, and shown to be empty */
.arch-fopt.is-empty{opacity:0.38}
.arch-fopt.is-empty input{cursor:not-allowed}

.arch-fq{
  width:100%; margin:0 0 var(--s2);
  border:1px solid var(--rule); background:transparent; color:var(--ink);
  font-family:var(--face); font-size:1.2rem;
  padding:0.7rem 0.9rem; border-radius:0;
}
.arch-fq::placeholder{color:var(--soft)}
.arch-fq:focus{outline:none; border-color:var(--ink)}

.arch-pfoot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap;
  border-top:1px solid var(--rule); padding-top:var(--s3);
}
.arch-clear{
  font-size:1.2rem; text-transform:uppercase; letter-spacing:0.14em;
  font-weight:600; 
  color:var(--soft); border-bottom:1px solid currentColor; padding-bottom:0.2rem;
  transition:color var(--micro);
}
.arch-clear:hover,.arch-clear:focus-visible{color:var(--ink)}

/* the rail folds above the grid before it gets too narrow to read */
@media (max-width:1000px){
  .arch-layout{grid-template-columns:1fr; gap:var(--s4)}
  .arch-side{position:static; max-height:none; overflow:visible; padding-right:0;
             border-bottom:1px solid var(--rule); padding-bottom:var(--s4)}
  .arch-fopts--tall{max-height:16rem}
}
@media (max-width:640px){
  .arch-head{gap:var(--s3)}
  .arch-search{margin:0}
  .arch-headline{width:100%}
}

/* --- THE GRID -------------------------------------------------------
   FIVE ACROSS, BARE, WITH A PANEL ON HOVER (9 Sept 2026, client direction).

   The grid is thumbnails on a field with a lot of air: no captions, no
   figures, nothing under the work at rest. Point at one and a dark panel
   drops beneath it carrying the name and the whole record.

   TWO OF THIS SITE'S STANDING RULES ARE SUSPENDED HERE, on instruction, and
   DESIGN.md's "Confirmed rejections" is out of date for this page as a
   result: corners are rounded, and the panel floats over what is under it.
   They were listed as rejections because the site draws in hairlines and
   never lifted anything off the page; that still holds everywhere else, so
   keep the exception on this grid rather than letting it spread.

   What did NOT change is the palette: the panel is --deep, the same
   near-black as the edge strip and the side panel, so the one new surface
   on the page is made of a material the site already owns. */
.arch-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  /* ONE VALUE, BOTH WAYS. It was clamp(4rem,6vw,8rem) down and
     clamp(2rem,3vw,4rem) across — 80px between rows against 40px between
     columns at 1440, so the grid read as five separate columns rather than
     as a field. An even gutter on the site's own spacing step lets the
     thumbnails sit as one block. */
  gap:var(--s4);
}
@media (max-width:880px) { .arch-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:620px) { .arch-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:420px) { .arch-grid{grid-template-columns:1fr} }

/* --- THE TILE -------------------------------------------------------
   Each campaign is a panel a shade off the page, bordered a shade off
   that. Both are written as mixes of the ink into the ground rather than
   as hex values, so the whole card follows whichever world the page is
   set in — it survived white, then black, then white again on that basis.

   2.5% and 7% are small on purpose: the tile has to separate from the
   page without becoming a box drawn around a photograph. */
.arch-card{
  display:block; position:relative;
  background:color-mix(in srgb, var(--ink) 2.5%, var(--ground));
  border:1px solid color-mix(in srgb, var(--ink) 7%, var(--ground));
  border-radius:4px;
  padding:clamp(1.4rem, 1.6vw, 2.2rem);
  transition:background-color var(--micro), border-color var(--micro),
             transform var(--micro);
}
.arch-card[hidden]{display:none}
.arch-fig{margin:0}

/* --- THE WORK, UNDER GLASS ------------------------------------------
   A film over the photograph, not a filter on it: everything below is
   drawn on ::after, so the image itself is never touched — no filter, no
   opacity, no blend applied to the artist's own colour.

   Three things make it read as glass rather than as a grey wash:
   a diagonal sheen that is strongest in the top-left corner and gone by
   the middle; a hairline of light along the very top edge, which is what
   an actual pane catches; and a barely-there darkening at the foot, which
   is what gives the surface a thickness instead of a tint.

   The numbers are deliberately low — 22% at the brightest point of the
   sheen and 6% at the foot. Anything heavier stops being a surface the
   work sits under and starts being a haze the work sits behind. */
.arch-art{
  position:relative; overflow:hidden;
  border-radius:2px;
  background:color-mix(in srgb, var(--ink) 6%, var(--ground));
  /* the pane's own edge, and the lift that takes it off the tile */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.16),
    0 1px 2px rgba(0,0,0,0.07),
    0 6px 14px -6px rgba(0,0,0,0.10);
  transition:box-shadow var(--macro), transform var(--macro);
}
/* 16:9, not 4:3 (9 Sept 2026). object-fit:cover means the frame is a crop,
   not a squeeze — the photographs are not distorted by this, they are cut
   tighter top and bottom. That is worth saying because the works on this
   page are portrait-ish sculpture and paintings, and a wider frame takes
   more off them; if any campaign starts losing its subject, the answer is
   object-position on that card, never a different ratio for one of them.
   Every artist gets the same frame. */
.arch-art img{
  width:100%; aspect-ratio:16 / 9; object-fit:cover; display:block;
  transition:transform var(--macro);
}
.arch-art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(148deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.10) 18%,
      rgba(255,255,255,0.00) 42%),
    linear-gradient(to top,
      rgba(0,0,0,0.06) 0%,
      rgba(0,0,0,0.00) 30%);
  transition:opacity var(--macro);
}

/* THE PERSPECTIVE, AND IT IS ONE DEGREE. Pointing at a card tips it a
   degree off the flat and lifts it two pixels; the sheen fades back as it
   turns, the way a real surface loses its highlight when it moves out of
   the light. Any more and a grid of thirty of them is a carnival. */
.arch-card:hover,.arch-card:focus-within{
  background:color-mix(in srgb, var(--ink) 4%, var(--ground));
  border-color:color-mix(in srgb, var(--ink) 12%, var(--ground));
  transform:translateY(-2px);
  /* THE CAPTION WAS DISAPPEARING BEHIND THE NEXT ROW, and the transform on
     the line above is why. A transform makes a stacking context, so the
     caption's own z-index was sealed inside this card and could not reach
     over anything outside it; the card itself, at z-index auto, painted in
     DOM order — under every card that comes after it.

     The z-index has to be HERE, on the element that makes the context, not
     on the caption. Raising the caption further would have done nothing. */
  z-index:30;
}
.arch-card:hover .arch-art,.arch-card:focus-within .arch-art{
  transform:perspective(900px) rotateX(1deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 0 0 1px rgba(255,255,255,0.20),
    0 2px 4px rgba(0,0,0,0.08),
    0 14px 26px -10px rgba(0,0,0,0.16);
}
.arch-card:hover .arch-art::after,
.arch-card:focus-within .arch-art::after{opacity:0.55}
.arch-card:hover .arch-art img,
.arch-card:focus-within .arch-art img{transform:scale(1.02)}

/* --- THE CAPTION, ON HOVER, UNDER THE WORK --------------------------
   It was permanent under every picture for a day. Back behind a pointer
   now, and drawn OUT of the flow so revealing it moves nothing: the tile
   keeps the height of its photograph, the row below stays where it is,
   and the caption crosses over it.

   It is the tile continued downward, not a separate card — same fill, same
   border, its top edge shared with the tile's bottom, and only the lower
   two corners rounded. -1px left and right so its rules sit ON the tile's
   rather than beside them. */
.arch-cap{
  position:absolute; top:100%; left:-1px; right:-1px;
  z-index:20;
  background:color-mix(in srgb, var(--ink) 4%, var(--ground));
  border:1px solid color-mix(in srgb, var(--ink) 12%, var(--ground));
  border-top:0; border-radius:0 0 4px 4px;
  padding:1.2rem clamp(1.4rem, 1.6vw, 2.2rem) 1.4rem;
  opacity:0; visibility:hidden;
  transition:opacity var(--micro), visibility var(--micro);
}
.arch-card:hover .arch-cap,
.arch-card:focus-within .arch-cap{opacity:1; visibility:visible}
/* the tile gives up its bottom edge while the caption is out, so the two
   read as one box rather than two stacked ones */
.arch-card:hover,.arch-card:focus-within{
  border-bottom-color:transparent; border-radius:4px 4px 0 0;
}
.arch-line{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); margin:0 0 0.5rem;
}
.arch-cardname{
  font-size:1.25rem; line-height:1.2;
  text-transform:uppercase; letter-spacing:0.04em;
  font-weight:700; 
  color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.arch-niche{font-weight:500; flex:none; font-size:1.1rem; text-transform:uppercase; letter-spacing:0.1em;
  
  color:var(--soft); white-space:nowrap;
}
/* sentence case and clamped: it is a sentence, and a long one must not
   make its card taller than the rest of the row */
.arch-note{
  margin:0 0 0.6rem; font-size:1.25rem; line-height:1.45;
  letter-spacing:0; text-transform:none; color:var(--soft);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.arch-meta{
  margin:0; font-family:var(--face-ui); font-variant-numeric:tabular-nums;
  font-size:1.05rem; letter-spacing:0.04em; line-height:1.3;
  color:var(--soft);
}
.arch-card.is-funded .arch-meta{color:var(--ink)}

/* NO HOVER FALLBACK IS NEEDED ANY MORE. Everything a campaign says is in
   the caption at rest, so a touch screen loses nothing but the tilt — the
   @media (hover:none) block that used to unpack a floating panel here went
   with the panel. Reduced motion gives up the tilt too and keeps the
   glass, which is a surface rather than a movement. */
@media (prefers-reduced-motion:reduce){
  .arch-card,.arch-art,.arch-art img,.arch-art::after{transition:none}
  .arch-card:hover,.arch-card:focus-within{transform:none}
  .arch-card:hover .arch-art,.arch-card:focus-within .arch-art{transform:none}
  .arch-card:hover .arch-art img,
  .arch-card:focus-within .arch-art img{transform:none}
}

/* THE FOOT OF THE GRID. This held page numbers in the display cut — a row
   of 1 2 3 at 72px. They are gone (9 Sept 2026): the collection now grows
   in place, the same way the wall does, so this slot carries the shared
   .more control instead. Numbering a list that is only ever read forwards
   made the reader do bookkeeping the page could do for them. */
.arch-pages{padding-top:var(--s6)}
.arch-pages:empty{display:none}

/* --- NARROWER --------------------------------------------------------
   Nothing left here. The two rules that lived in this block adjusted the
   filter drawer and its openers, and both went with the drawer when the
   filters moved into the standing rail. The grid's column counts and the
   rail's fold are declared beside the things they govern. */


/* --- THE STUDIO OBJECTS ----------------------------------------------
   Moved out of v5.css on 9 Sept 2026, when the campaigns page was asked
   for the same background the landing page has. v5 is the landing page's
   layer alone; this is a component two pages share, so it lives here with
   the rest of them. cuts.js builds the markup.

   Fixed, so the page slides over it and the objects read as sitting
   behind the site. z-index 0 with the content at 1. */
.page-cuts{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  opacity:1;
}
.page-cuts img{
  position:absolute; left:var(--x); top:var(--y); width:var(--w);
  height:auto; transform:rotate(var(--r,0deg));
}
/* the content has to be given a layer of its own, or it paints underneath */
main.shell,.bar,.arch-head{position:relative; z-index:1}
@media (prefers-reduced-motion:reduce){ .page-cuts{opacity:.3} }
/* a phone has no room to spare behind the work */
@media (max-width:768px){ .page-cuts{display:none} }


/* --- LIGHT / DARK SWITCH ---------------------------------------------
   DESIGN.md rules out "glyph iconography beyond the + drawn from two
   hairlines", so this is not a sun and a moon. It is a circle at the same
   1px weight as every rule on the site, half of it inked — the oldest mark
   there is for contrast, and drawn rather than imported.

   IT SHOWS THE STATE, NOT THE ACTION. The filled half is on the left in
   light and swaps to the right in dark, so the mark itself changes when
   you press it. The word for what it does is in the title attribute and in
   an sr-only span that theme.js keeps in step; aria-pressed carries the
   state properly for anyone not looking at it. */
.bar-actions{align-items:center}
.theme-btn{
  display:inline-flex; align-items:center; align-self:center; flex:none;
  color:var(--ink); cursor:pointer;
  transition:opacity var(--micro);
}
.theme-btn:hover,.theme-btn:focus-visible{opacity:0.55}
.theme-btn i{
  display:block; width:1.4rem; height:1.4rem;
  border:1px solid currentColor; border-radius:50%;
  background:linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
  transition:background var(--micro);
}
:root[data-theme="dark"] .theme-btn i{
  background:linear-gradient(90deg, transparent 0 50%, currentColor 50% 100%);
}


/* --- THE LIGHT GROUND ------------------------------------------------
   #FFFFFF, and it belongs to every page.

   tokens.css's white world is #F2F2F2 — the site's paper, two steps off
   white, and its comment records that the value was chosen deliberately.
   That is left alone. But the landing page has been on pure white since
   v5 forced it there, and each page asked to "match the landing page"
   since has been pinned to #FFFFFF one at a time. This is that decision
   made once, in the one file every page loads, instead of in v5.css where
   only the landing page could see it.

   Scoped to the light world, so dark mode takes its ground from
   tokens.css like everything else. */
:root[data-world="white"]{ --ground:#FFFFFF; }

/* the note a not-yet link shows (site.js, "NOT YET") — the site's pill, at
   the foot of the screen, in ink on ground inverted */
.mnf-soon{
  position:fixed; left:50%; bottom:calc(2rem + env(safe-area-inset-bottom, 0px)); z-index:900;
  margin:0; max-width:min(90vw, 44rem); padding:1.2rem 2rem; border-radius:99px;
  background:var(--ink); color:var(--ground); text-align:center;
  font-family:var(--face-ui, inherit); font-size:1.4rem; line-height:1.35;
  opacity:0; pointer-events:none; transform:translate(-50%, .8rem);
  transition:opacity .3s ease, transform .3s ease;
}
.mnf-soon.is-on{opacity:1; transform:translate(-50%, 0)}
@media (prefers-reduced-motion:reduce){ .mnf-soon{transition:none} }

/* ============================================================
   THE TOP BAR — ONE SIZE, AND THE NAME ABOVE IT (client, 12 September 2026:
   "the top bar everything should be one size except for mynichefund, that
   stays the same size on all pages, and is slightly bigger than the rest").

   MEASURED FIRST: the bar was not one size. Campaigns, About, Our story,
   For artists and Log in were all 13px, but SEARCH was 12px — it takes the
   plain .label class while the others take .bar-nav .label, and the two
   rules had drifted a pixel apart. At +0.14em tracking that pixel also made
   Search's letter-spacing 1.68px against everyone else's 1.82px, so it read
   as a slightly different voice rather than a slightly smaller one.

   Everything in the bar is now 1.3rem. The name is 1.6rem — clearly the
   biggest thing up there without becoming a headline.

   THE NAME IS THE SAME ON EVERY PAGE by construction: .bar-brand carries no
   size of its own, so one rule sets it for the landing, a campaign, About,
   Our story, Legal and a profile alike. All campaigns is the exception and
   always was — it has no top bar at all, it has the filter rail.

   Scoped to .bar-brand and not to .wordmark, so the footer mark and the
   panel mark keep the size they were drawn at.
   ============================================================ */
.bar .label,
.bar-nav .label,
.bar-find{
  font-size:1.3rem; letter-spacing:0.14em; font-weight:500;
}
.bar-brand.wordmark{ font-size:1.6rem; }


/* ============================================================
   THE BAR, COMPACT (client, 13 September 2026: "the text seems too dragged
   out like 4:3 and the bar is too big for it").

   What stretched it was the pairing: every word in the bar was the Extended
   cut, in capitals, tracked out to 0.14em. Any one of the three reads as
   wide; all three at once read as type pulled sideways. The words now use
   the UI face at its normal width, in sentence case with the tracking
   closed, and the bar comes down from 64px to 48px around them. The
   wordmark in the centre keeps its own setting — it is the logo, not a
   link — and Log in becomes the site's filled pill, the one thing in the
   bar that asks to be pressed.
   ============================================================ */
.bar{align-items:center; padding-top:.8rem; padding-bottom:.8rem; min-height:4.8rem; box-sizing:border-box}
.bar-left,.bar-actions{align-items:center}
.bar-left{gap:2.6rem}
.bar-nav ul,.bar-nav--main ul{align-items:center; gap:2.2rem}
.bar-actions{gap:2rem}
.bar-home{width:2rem; height:2rem}
.bar-nav .label,.bar .bar-find{
  font-family:var(--face-ui); font-size:1.4rem; font-weight:500; line-height:1;
  font-variation-settings:normal; text-transform:none; letter-spacing:-0.005em;
}
.bar-actions .bar-nav li:last-child .label{
  display:inline-flex; align-items:center; height:3.2rem; padding:0 1.5rem; border-radius:999px;
  background:var(--ink); color:var(--ground); opacity:1;
  transition:background var(--micro), color var(--micro);
}
/* the pill answers the pointer the way every pill on the site does: the
   landing page's purple, not a drop in opacity */
.bar-actions .bar-nav li:last-child .label:hover,
.bar-actions .bar-nav li:last-child .label:focus-visible{background:#6E60EE; color:#fff; opacity:1}
.bar-actions .bar-nav li:last-child .label:focus-visible{outline:2px solid var(--ink); outline-offset:2px}


/* ============================================================
   THE PHONE BAR AND ITS MENU (13 September 2026) — see menu.js.
   Above 768px the menu button, the second Log in and the sheet are never
   shown, so the desktop bar is untouched.
   ============================================================ */
.bar-burger,.bar-login{display:none}
.bar-menu[hidden]{display:none}

@media (max-width:768px){
  .bar{grid-template-columns:1fr auto 1fr; padding:.8rem var(--s3); min-height:5.6rem}
  .bar .bar-home,.bar .bar-nav,.bar .bar-find,.bar .theme-btn{display:none}
  .bar-left{grid-column:1; justify-self:start}
  .bar-actions{grid-column:3; justify-self:end}

  .bar-burger{
    display:grid; align-content:center; justify-items:start; gap:.5rem;
    width:4.4rem; height:4.4rem; margin-left:-1rem; padding:0 1rem; border:0; background:none;
    color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .bar-burger i{display:block; width:2.2rem; height:1.5px; border-radius:2px; background:currentColor}
  .bar-burger i:nth-child(2){width:1.6rem}
  .bar-burger:focus-visible{outline:2px solid var(--ink); outline-offset:-4px; border-radius:1rem}

  .bar-login{
    display:inline-flex; align-items:center; height:3.6rem; padding:0 1.6rem; border-radius:999px;
    background:var(--ink); color:var(--ground); text-decoration:none; white-space:nowrap;
    font-family:var(--face-ui); font-size:1.4rem; font-weight:600; line-height:1;
    -webkit-tap-highlight-color:transparent;
    transition:background var(--micro), color var(--micro);
  }
  .bar-login:hover,.bar-login:focus-visible{background:#6E60EE; color:#fff; outline:none}

  /* the sheet: the whole screen, the page's own ground, the bar repeated at
     its head so the close button sits exactly where the menu button was */
  .bar-menu{
    position:fixed; inset:0; z-index:300; display:flex; flex-direction:column;
    padding:.8rem var(--s3) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
    background:var(--ground); color:var(--ink); overflow-y:auto; overscroll-behavior:contain;
    opacity:0; transform:translateY(-1.2rem);
    transition:opacity .28s var(--easing), transform .36s var(--power3-out);
  }
  .bar-menu.is-on{opacity:1; transform:none}
  html.menu-is-open,html.menu-is-open body{overflow:hidden}
  .bar-menu_top{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:4rem}
  .bar-menu_close{
    position:relative; justify-self:start; width:4.4rem; height:4.4rem; margin-left:-1rem;
    border:0; background:none; color:var(--ink); cursor:pointer;
  }
  .bar-menu_close i{position:absolute; left:1rem; top:50%; width:2.2rem; height:1.5px; border-radius:2px; background:currentColor}
  .bar-menu_close i:first-child{transform:rotate(45deg)}
  .bar-menu_close i:last-child{transform:rotate(-45deg)}
  .bar-menu_close:focus-visible{outline:2px solid var(--ink); outline-offset:-4px; border-radius:1rem}
  .bar-menu_mark{color:var(--ink); text-decoration:none}

  .bar-menu_nav ul{list-style:none; margin:var(--s5) 0 0; padding:0}
  .bar-menu_nav li{border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}
  .bar-menu_nav a{
    display:flex; align-items:center; justify-content:space-between; padding:1.8rem 0;
    color:var(--ink); text-decoration:none;
    font-family:var(--face-ui); font-size:2.8rem; font-weight:600; letter-spacing:-0.02em; line-height:1;
  }
  .bar-menu_nav a i{
    width:1rem; height:1rem; margin-right:.4rem;
    border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg);
    opacity:.35; transition:opacity var(--micro), transform var(--micro);
  }
  .bar-menu_nav a:active i,.bar-menu_nav a:focus-visible i{opacity:1; transform:translateX(.3rem) rotate(45deg)}
  .bar-menu_nav a:focus-visible{outline:none; color:#6E60EE}
  .bar-menu_nav a[aria-current="page"]{color:var(--soft)}

  .bar-menu_tools{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:var(--s4)}
  .bar-menu_tool{
    display:inline-flex; align-items:center; gap:1rem; height:4.8rem; padding:0 2rem; border:0; border-radius:999px;
    background:color-mix(in srgb, var(--ink) 8%, var(--ground)); color:var(--ink); cursor:pointer;
    font-family:var(--face-ui); font-size:1.5rem; font-weight:600;
  }
  .bar-menu_tool:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
  .bar-menu_tool svg{width:1.6rem; height:1.6rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
  .bar-menu_dot{
    width:1.5rem; height:1.5rem; border-radius:50%; border:1.5px solid currentColor;
    background:linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
  }
  .bar-menu_tool[aria-pressed="true"] .bar-menu_dot{background:linear-gradient(90deg, transparent 0 50%, currentColor 50% 100%)}

  /* the landing page's floating bar: its name flies into the centre slot,
     and its links wait for that; the menu button and Log in do not wait */
  .leo .bar-burger,.leo .bar-login{opacity:1; visibility:visible}
  .leo .bar .bar-login{color:var(--ground)}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){
  .bar-menu{transition:none; transform:none}
}


/* THE BAR, A STEP UP (client, 13 September 2026: "make the top bar slightly
   bigger"). Desktop only — the phone bar keeps its own sizes above. */
@media (min-width:769px){
  .bar{min-height:5.6rem}
  .bar-left{gap:3rem}
  .bar-nav ul,.bar-nav--main ul{gap:2.6rem}
  .bar-actions{gap:2.4rem}
  .bar-home{width:2.2rem; height:2.2rem}
  .bar-nav .label,.bar .bar-find{font-size:1.5rem}
  .bar-brand.wordmark,.bar .wordmark{font-size:1.5rem}
  .theme-btn i{width:1.6rem; height:1.6rem}
  .bar-actions .bar-nav li:last-child .label{height:3.6rem; padding:0 1.7rem}
}


/* ============================================================
   THE BAR AFTER DESIGN.CASH.APP (13 September 2026) — see menu.js.
   Sizes follow the reference's own code: nav words ~17px, 12px between a
   word and its chevron (13 x 8, at half opacity), 30px between items and
   40px on a wide screen; the wordmark in full ink, the groups in the grey.
   ============================================================ */
.navx_chev{width:1.3rem; height:.8rem; flex:none; fill:none; stroke:currentColor; stroke-width:2; opacity:.5;
  transition:transform var(--speed) var(--power3-out)}
.navx-panel[hidden],.navx-scrim[hidden]{display:none}

@media (min-width:769px){
  html.has-navx .bar .bar-nav,
  html.has-navx .bar .bar-find,
  html.has-navx .bar .theme-btn{display:none}
  html.has-navx .bar-actions{gap:3rem; align-items:center}
  .bar .bar-brand.wordmark{font-size:1.7rem}

  .navx_list{display:flex; align-items:center; gap:3rem; list-style:none; margin:0; padding:0}
  .navx_item{
    display:inline-flex; align-items:center; gap:1.2rem; height:4rem; padding:0; border:0; background:none; cursor:pointer;
    font-family:var(--face-ui); font-size:1.7rem; font-weight:500; letter-spacing:-0.01em; line-height:1;
    color:color-mix(in srgb, var(--ink) 58%, var(--ground)); white-space:nowrap;
    transition:color var(--micro);
  }
  .navx_item:hover,.navx_item[aria-expanded="true"]{color:var(--ink)}
  .navx_item:focus-visible{color:var(--ink); outline:2px solid var(--ink); outline-offset:4px; border-radius:.6rem}
  .navx_item[aria-expanded="true"] .navx_chev{transform:rotate(180deg); opacity:1}

  .bar-login{
    display:inline-flex; align-items:center; height:3.6rem; padding:0 1.7rem; border-radius:999px;
    background:var(--ink); color:var(--ground); text-decoration:none; white-space:nowrap;
    font-family:var(--face-ui); font-size:1.5rem; font-weight:600; line-height:1;
    transition:background var(--micro), color var(--micro);
  }
  .bar-login:hover,.bar-login:focus-visible{background:#6E60EE; color:#fff; outline:none}

  /* the landing page: the groups and Log in arrive with the name, like its links did */
  .leo .bar .navx,.leo .bar .bar-login{
    opacity:0; visibility:hidden;
    transition:opacity var(--speed-slow) var(--power3-out), visibility 0s linear var(--speed-slow);
  }
  .leo .bar.is-named .navx,.leo .bar.is-named .bar-login{
    opacity:1; visibility:visible; transition:opacity var(--speed-slow) var(--power3-out), visibility 0s;
  }
  .leo .bar .bar-login{color:var(--ground)}
  .leo .bar .bar-login:hover{color:#fff}
}
@media (min-width:1280px){
  .navx_list{gap:4rem}
  html.has-navx .bar-actions{gap:4rem}
}

/* ---- the panel under the bar ---- */
.navx-scrim{
  position:fixed; left:0; right:0; bottom:0; top:var(--navx-top, 5.6rem); z-index:240;
  background:color-mix(in srgb, var(--ground) 55%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .3s var(--easing);
}
.navx-scrim.is-on{opacity:1}
.navx-panel{
  position:fixed; left:0; right:0; top:var(--navx-top, 5.6rem); z-index:250;
  padding:clamp(3.2rem, 4vw, 5.6rem) var(--shell-pad) 2.4rem;
  background:var(--ground); color:var(--ink);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  opacity:0; transform:translateY(-1rem);
  transition:opacity .28s var(--easing), transform .45s var(--power3-out);
}
.navx-panel.is-on{opacity:1; transform:none}
.navx-panel_in{max-width:132rem; margin:0 auto}
.navx-links{list-style:none; margin:0; padding:0; display:grid; gap:.6rem; justify-items:start}
.navx-link{
  display:inline-block; text-decoration:none;
  font-family:var(--face-ui); font-weight:600; font-size:clamp(3.6rem, 4.4vw, 6.4rem);
  line-height:1.05; letter-spacing:-0.02em;
  color:color-mix(in srgb, var(--ink) 40%, var(--ground));
  transition:color var(--micro), transform .45s var(--power3-out);
}
.navx-link:hover,.navx-link:focus-visible,.navx-link[aria-current="page"]{color:var(--ink)}
.navx-link:hover,.navx-link:focus-visible{transform:translateX(.8rem); outline:none}
.navx-tools{
  list-style:none; max-width:132rem; margin:clamp(3.2rem, 4vw, 4.8rem) auto 0; padding:1.6rem 0 0;
  border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.6rem;
}
.navx-tool{
  display:flex; flex-direction:column; gap:.2rem; padding:0; border:0; background:none; cursor:pointer;
  text-align:left; text-decoration:none; color:var(--ink);
  font-family:var(--face-ui); font-size:1.4rem; font-weight:600; line-height:1.25;
  transition:opacity var(--micro);
}
.navx-tool_sub{color:var(--soft); font-weight:500}
.navx-tool:hover{opacity:.6}
.navx-tool:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:.4rem}

@media (max-width:768px){
  .bar .navx,.navx-panel,.navx-scrim{display:none !important}
  /* the sheet, as Cash App's mobile accordion */
  .bar-menu_acc{margin-top:var(--s5); border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}
  .bar-menu_group{border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}
  .bar-menu_toggler{
    display:flex; width:100%; align-items:center; justify-content:space-between; padding:2rem 0;
    border:0; background:none; color:var(--ink); cursor:pointer; text-align:left;
    font-family:var(--face-ui); font-size:2.8rem; font-weight:600; letter-spacing:-0.02em; line-height:1;
  }
  .bar-menu_toggler .navx_chev{width:1.5rem; height:.95rem}
  .bar-menu_toggler[aria-expanded="true"] .navx_chev{transform:rotate(180deg); opacity:1}
  .bar-menu_toggler:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:.6rem}
  .bar-menu_content[hidden]{display:none}
  .bar-menu_content ul{list-style:none; margin:0; padding:0 0 2.2rem; display:grid; gap:1.4rem}
  .bar-menu_content a{
    color:var(--soft); text-decoration:none;
    font-family:var(--face-ui); font-size:2rem; font-weight:500; letter-spacing:-0.02em; line-height:1.1;
  }
  .bar-menu_content a[aria-current="page"],.bar-menu_content a:focus-visible{color:var(--ink); outline:none}
  .bar-menu_foot{list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2rem 1.6rem}
  .bar-menu_foot .navx-tool{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .navx-panel,.navx-scrim,.navx-link,.navx_chev{transition:none}
  .navx-panel{transform:none}
}


/* THE PHONE SHEET IN THE DROPDOWN'S DESIGN (13 September 2026) */
@media (max-width:768px){
  .bar-menu_tabs{
    display:flex; flex-wrap:wrap; gap:.4rem 2.4rem; margin:var(--s4) 0 0; padding-bottom:1.2rem;
    border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  }
  .bar-menu .navx_item{
    display:inline-flex; align-items:center; gap:1rem; height:4.4rem; padding:0; border:0; background:none; cursor:pointer;
    font-family:var(--face-ui); font-size:1.7rem; font-weight:500; letter-spacing:-0.01em; line-height:1; white-space:nowrap;
    color:color-mix(in srgb, var(--ink) 58%, var(--ground)); -webkit-tap-highlight-color:transparent;
  }
  .bar-menu .navx_item[aria-selected="true"]{color:var(--ink)}
  .bar-menu .navx_item[aria-selected="true"] .navx_chev{transform:rotate(180deg); opacity:1}
  .bar-menu .navx_item:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:.6rem}
  .bar-menu_panel{padding:3.2rem 0 0}
  .bar-menu_panel[hidden]{display:none}
  .bar-menu .navx-link{font-size:clamp(3.2rem, 10.5vw, 4.6rem)}
  .bar-menu .navx-link:hover,.bar-menu .navx-link:focus-visible{transform:none}
  .bar-menu_foot.navx-tools{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2rem 1.6rem; margin:3.2rem 0 0}
}

/* ============================================================
   LOGGED IN (13 September 2026). The Log in pill becomes a round button
   with the person's picture, or the first letter of their name, and opens
   a small menu: who is logged in, their profile, Edit profile, Log out.
   Same place in the bar at every width.
   ============================================================ */
.bar-me{
  display:inline-grid; place-items:center; flex:none; width:3.6rem; height:3.6rem; padding:0; border:0; border-radius:50%;
  overflow:hidden; cursor:pointer; background:var(--ink); color:var(--ground);
  font-family:var(--face-ui); font-size:1.5rem; font-weight:600; line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow var(--micro);
}
.bar-me img{display:block; width:100%; height:100%; object-fit:cover}
.bar-me:hover,.bar-me[aria-expanded="true"]{box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 20%, transparent)}
.bar-me:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.bar-me_menu{
  position:fixed; z-index:320; min-width:24rem; max-width:calc(100vw - 1.6rem); box-sizing:border-box;
  padding:.6rem; border-radius:2rem; background:var(--ground); color:var(--ink);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent),
             0 1.6rem 4.8rem -.8rem color-mix(in srgb, #000 24%, transparent);
}
.bar-me_menu[hidden]{display:none}
.bar-me_who{padding:1rem 1.2rem 1.2rem; margin-bottom:.4rem; border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.bar-me_who b{display:block; font-family:var(--face-ui); font-size:1.5rem; font-weight:600; line-height:1.3}
.bar-me_who span{
  display:block; max-width:28rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--face-ui); font-size:1.3rem; font-weight:500; line-height:1.35; color:var(--soft);
}
.bar-me_item{
  display:flex; width:100%; box-sizing:border-box; padding:1.1rem 1.2rem; border:0; border-radius:1.4rem;
  background:none; color:var(--ink); text-align:left; text-decoration:none; cursor:pointer;
  font-family:var(--face-ui); font-size:1.45rem; font-weight:500; line-height:1.2;
}
.bar-me_item:hover,.bar-me_item:focus-visible{background:color-mix(in srgb, var(--ink) 8%, var(--ground)); outline:none}
@media (min-width:769px){
  .leo .bar .bar-me{opacity:0; visibility:hidden; transition:opacity var(--speed-slow) var(--power3-out), visibility 0s linear var(--speed-slow)}
  .leo .bar.is-named .bar-me{opacity:1; visibility:visible; transition:opacity var(--speed-slow) var(--power3-out), visibility 0s}
}

/* ============================================================
   SEARCH, IN THE TOP BAR'S HAND (client, 13 September 2026: "the search is
   still from the old design"). The whole screen, as before, but set the way
   the dropdown panels are: the UI face in sentence case, a large field that
   stays grey until you type, a round close button, and results as rows —
   the campaign's photograph, the name, niche and country under it — that
   take a grey ground when pointed at or reached with the arrow keys.
   ============================================================ */
.ovl{padding:0; font-family:var(--face-ui); color:var(--ink)}
@media (max-width:768px){.ovl{padding:0}}
.ovl-in{
  display:flex; flex-direction:column; width:100%; max-width:132rem; height:100%;
  margin:0 auto; padding:0 var(--shell-pad); box-sizing:border-box;
}
.ovl .ovl-top{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:1.6rem;
  min-height:5.6rem; margin:0; padding:.8rem 0; box-sizing:border-box;
}
.ovl-count{margin:0; font-size:1.5rem; font-weight:500; color:var(--soft); font-variant-numeric:tabular-nums}
.ovl-close{
  display:grid; place-items:center; width:4.4rem; height:4.4rem; padding:0; border:0; border-radius:50%;
  cursor:pointer; background:color-mix(in srgb, var(--ink) 8%, var(--ground)); color:var(--ink);
  transition:background var(--speed) var(--easing);
}
.ovl-close svg{width:1.6rem; height:1.6rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.ovl-close:hover{background:color-mix(in srgb, var(--ink) 14%, var(--ground))}
.ovl-close:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.ovl-field{
  flex:none; display:flex; align-items:center; gap:clamp(1.2rem, 2vw, 2.4rem);
  margin-top:clamp(2.4rem, 7vh, 7.2rem); padding-bottom:clamp(1.6rem, 2.4vh, 2.4rem);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.ovl-glass{
  flex:none; width:clamp(2.4rem, 3.4vw, 4.4rem); height:clamp(2.4rem, 3.4vw, 4.4rem);
  fill:none; stroke:color-mix(in srgb, var(--ink) 38%, var(--ground)); stroke-width:1.5; stroke-linecap:round;
}
.ovl .ovl-field input{
  flex:1; min-width:0; width:auto; margin:0; padding:0; border:0; border-radius:0; background:none;
  -webkit-appearance:none; appearance:none; color:var(--ink); caret-color:var(--spark);
  font-family:var(--face-ui); font-weight:600; font-size:clamp(3.2rem, 6vw, 6.4rem);
  line-height:1.1; letter-spacing:-0.02em; text-transform:none; font-variation-settings:normal;
}
.ovl .ovl-field input::placeholder{color:color-mix(in srgb, var(--ink) 30%, var(--ground)); opacity:1}
.ovl-hint{flex:none; margin:1.6rem 0 0; font-size:1.5rem; font-weight:500; color:var(--soft)}
.ovl-hint[hidden]{display:none}
.ovl .ovl-hits{
  flex:1; min-height:0; display:flex; flex-direction:column; gap:.2rem;
  margin:1.6rem -1.2rem 0; padding:0 0 4rem; border:0;
  overflow-y:auto; overscroll-behavior:contain;
}
.ovl .ovl-hits a{
  display:grid; grid-template-columns:5.6rem minmax(0, 1fr) auto; align-items:center; gap:1.6rem;
  padding:1rem 1.2rem; border:0; border-radius:1.6rem; color:var(--ink); text-decoration:none;
  transition:background var(--speed) var(--easing);
}
.ovl .ovl-hits a:hover,.ovl .ovl-hits a:focus-visible{background:color-mix(in srgb, var(--ink) 8%, var(--ground)); opacity:1; outline:none}
.ovl .h-pic{display:block; width:5.6rem; height:5.6rem; border-radius:1.2rem; overflow:hidden; background:color-mix(in srgb, var(--ink) 8%, var(--ground))}
.ovl .h-pic img{display:block; width:100%; height:100%; object-fit:cover}
.ovl .h-t{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.ovl .ovl-hits .h-name{
  font-size:clamp(1.8rem, 2vw, 2.2rem); font-weight:600; line-height:1.2; letter-spacing:-0.015em;
  text-transform:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ovl .ovl-hits .h-meta{
  font-size:1.4rem; font-weight:500; line-height:1.3; letter-spacing:0; text-transform:none;
  color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ovl .h-go{
  width:1.6rem; height:1.6rem; fill:none; stroke:var(--soft); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--speed) var(--power3-out), stroke var(--speed) var(--easing);
}
.ovl .ovl-hits a:hover .h-go,.ovl .ovl-hits a:focus-visible .h-go{stroke:var(--ink); transform:translateX(.3rem)}
.ovl-none{margin:1.6rem 1.2rem 0; font-size:1.6rem; font-weight:500; color:var(--soft)}
@media (max-width:768px){
  .ovl .ovl-hits a{grid-template-columns:4.8rem minmax(0, 1fr) auto; gap:1.2rem}
  .ovl .h-pic{width:4.8rem; height:4.8rem; border-radius:1rem}
}
@media (prefers-reduced-motion:reduce){
  .ovl-close,.ovl .ovl-hits a,.ovl .h-go{transition:none}
}

/* ============================================================
   THE FOOTER, IN THE SAME HAND (13 September 2026). The four columns stay;
   the spaced capitals go. Headings are the grey sentence-case labels of the
   dropdown panels, links are the UI face at reading size, the disclaimer
   link is an underlined phrase, and the bottom bar is plain small print.
   The wordmark keeps its own setting: it is the logo.
   ============================================================ */
.foot{font-family:var(--face-ui)}
.foot .foot-mark{font-size:1.7rem; margin-bottom:1.2rem}
.foot .foot-disc{
  font-family:var(--face-ui); font-size:1.45rem; font-weight:400; line-height:1.55;
  letter-spacing:0; font-variation-settings:normal; color:var(--soft);
}
.foot .foot-more{
  font-family:var(--face-ui); font-size:1.5rem; font-weight:600; letter-spacing:0;
  text-transform:none; font-variation-settings:normal; color:var(--ink);
  border-bottom:0; padding:0;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.28em;
  text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent);
  transition:text-decoration-color var(--speed) var(--easing);
}
.foot .foot-more:hover,.foot .foot-more:focus-visible{opacity:1; text-decoration-color:var(--ink)}
.foot .foot-head{
  margin:0 0 1.6rem; font-family:var(--face-ui); font-size:1.4rem; font-weight:500;
  letter-spacing:0; text-transform:none; font-variation-settings:normal; color:var(--soft);
}
.foot .foot-col ul{gap:1.1rem}
.foot .foot-col a{
  font-family:var(--face-ui); font-size:1.6rem; font-weight:500; line-height:1.3;
  letter-spacing:-0.005em; font-variation-settings:normal; color:var(--ink);
}
.foot .foot-col a:hover,.foot .foot-col a:focus-visible{opacity:.6}
.foot .foot-bar p,.foot .foot-bar .micro{
  font-family:var(--face-ui); font-size:1.3rem; font-weight:500; letter-spacing:0;
  text-transform:none; font-variation-settings:normal; color:var(--soft);
}

/* ============================================================
   THE READING PAGES IN THE NEW HAND — Legal, About, Our story (client,
   13 September 2026: "you didn't change the sections, they look exactly
   like the old ones").

   Same words, set the way the rest of the site now is. The title is the UI
   face in sentence case at the size of the Log in heading, with its line
   under it in grey; section headings are large sentence-case type rather
   than spaced capitals; the text is the UI face at reading size in one
   column. Legal's contents are a row of the grey pills from All campaigns,
   held at the top of the window while the page is read, the section on
   screen filled in ink. Bracketed placeholders sit in a faint grey tag so
   they cannot be mistaken for the operator's real details.
   ============================================================ */
.legal,.prose{
  display:block; max-width:132rem; margin:0 auto;
  padding-top:clamp(4rem, 9vh, 9.6rem); font-family:var(--face-ui);
}
.legal > *,.prose > *{grid-column:auto}
.legal-head{max-width:80rem; margin:0 0 clamp(3.2rem, 6vh, 6.4rem)}
.legal-head .name{
  margin:0; font-family:var(--face-ui); font-weight:600; font-variation-settings:normal;
  text-transform:none; font-size:clamp(4.4rem, 7vw, 7.2rem); line-height:1; letter-spacing:-0.02em;
}
.legal-head .micro{
  display:block; margin-top:1.4rem;
  font-family:var(--face-ui); font-size:1.6rem; font-weight:500; line-height:1.4;
  letter-spacing:0; text-transform:none; font-variation-settings:normal; color:var(--soft);
}

.legal-toc{
  position:sticky; top:0; z-index:20;
  margin:0 calc(-1 * var(--shell-pad)) clamp(3.2rem, 6vh, 6.4rem);
  padding:1.2rem var(--shell-pad); background:var(--ground);
}
.legal-toc ul{
  display:flex; flex-wrap:nowrap; gap:.8rem; margin:0; padding:0; list-style:none;
  overflow-x:auto; scrollbar-width:none;
}
.legal-toc ul::-webkit-scrollbar{display:none}
.legal-toc li{flex:none}
.legal-toc a{
  display:inline-flex; align-items:center; height:4rem; padding:0 1.6rem; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground)); color:var(--ink); text-decoration:none;
  font-family:var(--face-ui); font-size:1.45rem; font-weight:500; letter-spacing:0;
  text-transform:none; font-variation-settings:normal; white-space:nowrap;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.legal-toc a:hover{opacity:1; background:color-mix(in srgb, var(--ink) 14%, var(--ground))}
.legal-toc a:focus-visible{opacity:1; outline:2px solid var(--ink); outline-offset:2px}
.legal-toc a.is-current{background:var(--ink); color:var(--ground)}

.legal section,.prose section{
  max-width:72rem; margin:0 0 clamp(5.6rem, 9vh, 8.8rem); padding:0; border-top:0;
  scroll-margin-top:9.6rem;
}
.legal h2,.prose h2{
  margin:0 0 2rem; font-family:var(--face-ui); font-size:clamp(2.6rem, 3.2vw, 3.6rem);
  font-weight:600; line-height:1.1; letter-spacing:-0.02em; text-transform:none;
  font-variation-settings:normal; color:var(--ink); text-wrap:balance;
}
.legal h3,.prose h3{
  margin:3.6rem 0 1.2rem; font-family:var(--face-ui); font-size:1.9rem; font-weight:600;
  line-height:1.25; letter-spacing:-0.01em; font-variation-settings:normal; color:var(--ink);
}
.legal p,.legal li,.prose p,.prose li{
  margin:0 0 1.6rem; font-family:var(--face-ui); font-size:1.7rem; font-weight:400; line-height:1.6;
  letter-spacing:-0.005em; font-variation-settings:normal;
  color:color-mix(in srgb, var(--ink) 86%, var(--ground)); text-wrap:pretty;
}
.legal ul,.legal ol,.prose ul,.prose ol{margin:0 0 2rem; padding-left:1.2em}
.legal li,.prose li{margin-bottom:1rem; padding-left:.3em}
.legal li::marker,.prose li::marker{color:var(--soft)}
.legal strong,.prose strong{font-weight:600; color:var(--ink)}
.legal a,.prose a{
  color:var(--ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.24em;
  text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent);
  transition:text-decoration-color var(--speed) var(--easing);
}
.legal a:hover,.prose a:hover{opacity:1; text-decoration-color:var(--ink)}
.legal .ph,.prose .ph{
  color:var(--soft); background:color-mix(in srgb, var(--ink) 7%, var(--ground));
  border-radius:.6rem; padding:.05em .35em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.prose .lead-line{
  max-width:24ch; margin:0 0 2.8rem; font-family:var(--face-ui);
  font-size:clamp(2.6rem, 3.4vw, 4rem); font-weight:600; line-height:1.15; letter-spacing:-0.02em;
  font-variation-settings:normal; color:var(--ink); text-wrap:balance;
}
@media (max-width:768px){
  .legal-head .name{font-size:clamp(4rem, 12vw, 5.2rem)}
  .legal p,.legal li,.prose p,.prose li{font-size:1.6rem}
  .legal-toc a{height:3.8rem; padding:0 1.4rem; font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .legal-toc a,.legal a,.prose a{transition:none}
}
/* the contents row is not article text: no underline, no list indent */
.legal .legal-toc ul{margin:0; padding:0}
.legal .legal-toc li{margin:0; padding:0; font-size:inherit; line-height:1}
.legal .legal-toc li::marker{content:none}
.legal .legal-toc a{text-decoration:none}

/* A WORD LONGER THAN ITS LINE BREAKS instead of running off the page
   (22 September 2026: a POV typed without spaces ran out of its panel) */
body{overflow-wrap:break-word}

/* PHONES ZOOM INTO A FIELD SET UNDER 16px when it is tapped, and the page
   stays zoomed and shifted afterwards (found 22 September 2026). Every
   field a finger can type in is at least 16px on a touch screen. */
@media (hover:none) and (pointer:coarse){
  #cgq,#cpfield,#spfield,#ovlq{font-size:1.6rem}
}

/* NO RUBBER BAND (22 September 2026). On an iPhone a swipe past the top or
   the foot of a page bounced the whole page, the fixed bar and its name
   with it — "mynichefund in the top bar is moving a little on the slide". */
html,body{overscroll-behavior:none}