/* v3f skin: v3 on the foundation, on v1's dark ground (Michael, 2026-10-02).
   framed works hung with a cast shadow, the wall label on the wall below the
   work, a frosted top bar. the hero is Full. */
:root{
  --ink:#0a0a0b; --ink-2:#121214; --paper:#e9e5df; --paper-dim:#cfc9c1;
  --rule:rgba(233,229,223,.12);
}
body.v3f{background:var(--ink-2); color:var(--paper)}
.v3f .top::before{
  height:100%; background:rgba(18,18,20,.64);
  -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15);
  border-bottom:1px solid rgba(233,229,223,.08);
}
.v3f .top .t-name, .v3f .top .t-nav{color:var(--paper)}
.v3f .top__link:hover{border-bottom-color:var(--paper)}
/* hero type sits on the photograph, so it takes light type and a low shade */
/* ---------- contrast over photographs, 2026-10-02 ----------
   measured, not assumed: text was hidden, the photo behind it sampled, and the
   light end (95th percentile) of those pixels compared with the text color.
   heroes were failing (as low as 1.7:1). a gradient behind the copy only: dark
   at the foot where the copy sits, gone by three quarters up, so the top of the
   photograph stays as shot. */
.v3f .f-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* halfway between the old 55%-high shade and the full scrim (Michael, 2026-10-03) */
  background:linear-gradient(to top, rgba(10,10,11,.74) 0%, rgba(10,10,11,.54) 25%,
    rgba(10,10,11,.46) 38%, rgba(10,10,11,.23) 56%, rgba(10,10,11,0) 76%);
}
.v3f .f-hero .t-h1, .v3f .f-hero .t-intro, .v3f .f-hero .t-meta{color:#f3efe8}
/* works hang on the wall; the two Full frames are the room, not works */
.v3f .f-frame--L, .v3f .f-frame--M, .v3f .f-frame--S{
  box-shadow:0 1px 2px rgba(0,0,0,.35), 0 28px 56px -22px rgba(0,0,0,.7); background-color:#1b1b1e;
}
.v3f .f-fig .tag{
  position:static; margin:var(--gap-block) 0 0 auto; width:min(300px,100%);
  background:#e9e5df; color:#1d1c1a;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -8px rgba(0,0,0,.5);
}
/* type on olive: #0d0c0b measures 5.1:1 (charcoal was 4.43, under WCAG AA 4.5) */
.v3f .seg__opt:has(input:checked){color:#0d0c0b}
.v3f .choice input:checked + span:hover{color:#0d0c0b}
.v3f button:hover{color:#0d0c0b}
.v3f footer a{color:var(--paper-dim)}
.v3f footer a:hover{color:var(--paper)}

/* ---------- On Process as a layered collage (Michael asked for a different
   layout for this pair, 2026-10-02). the raw beads hang small at the left;
   the palette hangs larger, lower and in front, over the raw beads' corner.
   the copy sits under the raw beads on the left rail, beside the palette. ---------- */
.v3f .f-b .f-pair{display:contents}
.v3f .f-collage__back{grid-column:1 / span 6; grid-row:1; z-index:1}
.v3f .f-collage__front{grid-column:5 / span 8; grid-row:1 / span 2; margin-top:12%; z-index:2;
  box-shadow:0 2px 4px rgba(0,0,0,.4), 0 40px 80px -24px rgba(0,0,0,.85)}
.v3f .f-b .f-copy{grid-column:1 / span 4; grid-row:2; margin-top:var(--gap-frame)}
@media (max-width:899px){
  .v3f .f-collage__back{grid-column:1 / -1; width:78%}
  .v3f .f-collage__front{grid-column:1 / -1; grid-row:2; width:86%; margin:calc(-1 * var(--s6)) 0 0 auto}
  .v3f .f-b .f-copy{grid-column:1 / -1; grid-row:3}
}

/* ---------- the top fade, clean (Michael, 2026-10-03) ----------
   one ease-in-out curve from the top of the screen to its end, no hold and no extra
   stops: the old version held full strength through the name, then dropped steeply,
   which read as a line under the name. it ends as far below the name as the name sits
   below the top of the screen (the bar's own top padding: 24 phones, 32 desktop). */
.v3f .top::before{height:100%; border-bottom:0;   /* the bar already pads 24 below the name */
  background:rgba(18,18,20,.64);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,0.983) 8.3%, rgba(0,0,0,0.933) 16.7%, rgba(0,0,0,0.854) 25.0%, rgba(0,0,0,0.750) 33.3%, rgba(0,0,0,0.629) 41.7%, rgba(0,0,0,0.500) 50.0%, rgba(0,0,0,0.371) 58.3%, rgba(0,0,0,0.250) 66.7%, rgba(0,0,0,0.146) 75.0%, rgba(0,0,0,0.067) 83.3%, rgba(0,0,0,0.017) 91.7%, rgba(0,0,0,0.000) 100.0%); mask-image:linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,0.983) 8.3%, rgba(0,0,0,0.933) 16.7%, rgba(0,0,0,0.854) 25.0%, rgba(0,0,0,0.750) 33.3%, rgba(0,0,0,0.629) 41.7%, rgba(0,0,0,0.500) 50.0%, rgba(0,0,0,0.371) 58.3%, rgba(0,0,0,0.250) 66.7%, rgba(0,0,0,0.146) 75.0%, rgba(0,0,0,0.067) 83.3%, rgba(0,0,0,0.017) 91.7%, rgba(0,0,0,0.000) 100.0%)}