/* ============================================================
   MYNICHEFUND v3 — "Colour arrives" (3 September 2026)
   An additive layer over base.css. Four moments: the hovered work's colour
   washes the paper; the roll call with a work that follows the cursor; the
   work carries over into its own page; the names rise as the loader.
   Everything else stays still. See docs/superpowers/specs/.
   ============================================================ */

/* ---------- 1. colour arrives ---------- */
@property --tint{syntax:"<color>"; inherits:true; initial-value:#F2F2F2}
:root{--tint:#F2F2F2; --wx:50vw; --wy:50vh}
.wash{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(64vw 64vh at var(--wx) var(--wy), var(--tint) 0%, color-mix(in oklab, var(--tint) 55%, transparent) 30%, transparent 72%);
  mix-blend-mode:multiply;
  transition:opacity 750ms cubic-bezier(0.23,1,0.32,1), --tint 750ms cubic-bezier(0.23,1,0.32,1);
}
/* THE COLOUR WASH IS OFF (2026-09-07). Pointing at a work tinted the whole
   page with a colour sampled from it, which read as a stray glow behind the
   campaign. v3.js still samples and still writes --tint and .is-tinted, so
   deleting these three lines brings it back. */
.wash{display:none !important}
html.is-tinted .wash{opacity:0}
html.is-dark-ground .wash{mix-blend-mode:screen}
html.is-dark-ground.is-tinted .wash{opacity:0.5}
main.shell,.bar{position:relative; z-index:1}
/* the + takes the colour */
.edge-toggle i,.edge-toggle i::before,.edge-toggle i::after{transition:background-color 750ms cubic-bezier(0.23,1,0.32,1)}
html.is-tinted .edge-toggle i::before,html.is-tinted .edge-toggle i::after{background:var(--tint)}
html.is-tinted .edge-toggle i{background:transparent}

/* ---------- 2. the roll call ---------- */
.roll{margin-top:var(--s7); padding-left:calc(var(--edge-w) - var(--shell-pad) + var(--s4)); position:relative}
.roll-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--rule)}
.roll-head .display{font-size:clamp(2.4rem, 3.4vw, 4.4rem); line-height:0.95}
.roll-head .micro{color:var(--soft)}
.roll-list{
  list-style:none; margin:var(--s4) 0 0; padding:0;
  columns:6; column-gap:var(--s4); column-rule:1px solid var(--rule);
  font-family:var(--face-ui); font-size:1.3rem; letter-spacing:0.08em; text-transform:uppercase; line-height:2.1;
  color:var(--soft);
}
.roll-list li{break-inside:avoid}
.roll-list a{color:var(--ink); text-decoration:none; position:relative; display:inline-block}
.roll-list a::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(--micro)}
.roll-list a:hover::after,.roll-list a:focus-visible::after,.roll-list a.is-on::after{transform:scaleX(1)}
.roll-list a::before{content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--ink); margin-right:0.6em; vertical-align:middle; transform:translateY(-0.1em)}
.roll-foot{margin-top:var(--s4); display:flex; gap:var(--s4); flex-wrap:wrap; color:var(--soft)}
.roll-more{display:none; font:500 1.3rem/1 var(--face-ui); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--ink); padding:0 0 0.3em; cursor:pointer; margin:var(--s4) 0 var(--s2)}
.roll-more[hidden]{display:none}
/* the work that follows the cursor */
.peek{
  position:fixed; left:0; top:0; z-index:70; width:min(26vw, 34rem); aspect-ratio:4/3; pointer-events:none;
  clip-path:inset(0 0 100% 0); transform:translate(-50%,-50%) rotate(var(--peek-r, 0deg));
  transition:clip-path 620ms cubic-bezier(0.23,1,0.32,1); will-change:transform;
  background:var(--deep);
}
.peek.is-on{clip-path:inset(0 0 0 0)}
.peek img{width:100%; height:100%; object-fit:cover; display:block}
.peek figcaption{position:absolute; left:0; right:0; top:100%; padding-top:0.6rem; font-family:var(--face-ui); font-size:1.1rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink);
  opacity:0; transition:opacity var(--micro) 300ms}
.peek.is-on figcaption{opacity:1}

/* ---------- 3. the work carries over ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:220ms cubic-bezier(0.19,1,0.22,1) both fade-out}
::view-transition-new(root){animation:320ms cubic-bezier(0.19,1,0.22,1) both fade-in}
::view-transition-group(*){animation-duration:620ms; animation-timing-function:cubic-bezier(0.23,1,0.32,1)}
@keyframes fade-out{to{opacity:0}} @keyframes fade-in{from{opacity:0}}
.camp-shot img{view-transition-name:none}

/* ---------- 4. names rising (the loader) ---------- */
.intro-num,.odo{display:none !important}
.intro-roll{font-weight:700; position:relative; height:min(46vh, 42rem); width:min(60vw, 60rem); overflow:hidden; margin:0;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  font-family:var(--face);  text-transform:uppercase;
  font-size:clamp(2.2rem, 4.2vw, 5.2rem); line-height:1.08; letter-spacing:-0.02em; text-align:center;
}
.intro-roll ul{list-style:none; margin:0; padding:0; transform:translateY(0);
  transition:transform 2200ms cubic-bezier(0.23,1,0.32,1)}
.intro.is-rolling .intro-roll ul{transform:translateY(calc(-100% + min(46vh, 42rem)))}
.intro-roll li{padding:0.05em 0; color:var(--ink)}
.intro-roll li.is-name{color:var(--ink)} .intro-roll li:not(.is-name){color:var(--soft)}
.intro.is-named .intro-roll{opacity:0; transition:opacity 240ms cubic-bezier(0.19,1,0.22,1)}
.intro.is-landing .intro-roll{opacity:0 !important}

/* the footer's word gets its own band; the row sits beneath it (was overprinting on artist.html) */
.foot .display{display:block; margin-bottom:var(--s4)}
.foot .foot-row{position:static; margin-top:var(--s3)}

/* ---------- quiet elsewhere ---------- */
.hero-col{transform-origin:top center; animation:draw 1400ms cubic-bezier(0.23,1,0.32,1) 200ms both}
@keyframes draw{from{transform:scaleY(0)}}
.band .art{clip-path:inset(100% 0 0 0); transition:clip-path 900ms cubic-bezier(0.23,1,0.32,1)}
.band.is-in .art{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .hero-col{animation:none} .band .art{clip-path:none} .wash{transition:none} .peek{transition:none}
  .intro-roll ul{transition:none}
  .band .art img,.arch-card img{filter:none !important; transform:none !important}
}
@media (max-width:768px){
  .roll{padding-left:0} .roll-list{columns:2} .peek{display:none} .wash{display:none}
  .roll:not(.is-open) .roll-list li:not(:has(a)){display:none}
  .roll-more{display:inline-block; margin-top:var(--s3)}
  .intro-roll{width:90vw}
}
@media (max-width:1100px) and (min-width:769px){.roll-list{columns:4}}

/* the page for an address that does not exist (404.html, 28 September 2026) */
.nf{min-height:60vh; display:flex; flex-direction:column; justify-content:center; gap:1.2rem; padding:12rem 0 8rem}
.nf-h{margin:0; font-weight:700; font-size:clamp(3.2rem, 6vw, 6.4rem); letter-spacing:-0.02em; line-height:1.05}
.nf-p{margin:0; font-size:1.7rem; line-height:1.5; color:var(--soft)}
.nf-p a{color:var(--ink)}