/* ============================================================
   THE HOUSE IN DAYLIGHT — materials and light
   Every surface is sized in metres: --r is the raster of the plane in
   px per metre, so calc(var(--r) * 0.6px) is sixty centimetres on any
   wall, whatever its resolution.

   Light comes from one sun, high and to the front-left, and from the
   roof lights inside. The works never take the sun: it lands on floors
   and on bare stone only.
   ============================================================ */
.pv{ position:relative; display:block;
  --pv-ink:#16150F; --pv-ink2:rgba(22,21,15,.66); --pv-ink3:rgba(22,21,15,.42);
  --pv-plaster:#F6F4EF; --pv-stone:#E6DED0; --pv-floor:#E7E2D8; }
.pv-view{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:#E9E6DF; contain:layout paint; }
.pv-space{ position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d; transform-origin:0 0; }
.pv-g{ position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d; }
.pv-pl{ position:absolute; left:0; top:0; display:block; box-sizing:border-box; transform-origin:0 0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.pv.is-off *{ animation-play-state:paused !important; }

/* ---------- at infinity: sky, cloud, sea ---------- */
.pv-far{ position:absolute; inset:0; overflow:hidden; pointer-events:none; --late:0; }
.pv-far-in{ position:absolute; left:-150%; width:400%; top:-100%; height:300%; }
.pv-sky{ position:absolute; left:0; right:0; top:0; height:50.2%; }
.pv-sky.is-day{ background:linear-gradient(180deg,
  #7A9BB0 0%, #8EADC0 16%, #B0C4CF 28%, #D0D8D8 40%, #E4E6E0 46%, #EEECE6 49.2%, #E8E4DC 50%); }
.pv-sky.is-late{ opacity:var(--late); background:linear-gradient(180deg,
  #8A96A4 0%, #B0A89C 18%, #D4C2A8 32%, #E8D0A8 42%, #F0D8B0 47%, #F4E0C0 49.2%, #EDE0C8 50%); }
.pv-sun{ position:absolute; left:28%; top:6%; width:34%; height:40%;
  background:radial-gradient(closest-side, rgba(255,252,240,.85), rgba(255,250,236,.32) 38%, rgba(255,250,236,0) 100%); }

/* clouds: turbulence, stretched along the wind, drifting */
.pv-clouds{ position:absolute; left:0; width:100%; pointer-events:none; background-repeat:repeat-x;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); }
.pv-clouds.is-high{ top:14%; height:22%; opacity:.72; background-size:2400px 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0019 0.0085' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 3.4 -1.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  animation:pv-drift 520s linear infinite; }
.pv-clouds.is-low{ top:30%; height:16%; opacity:.86; background-size:3000px 100%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3000' height='500'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0024 0.011' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .995  0 0 0 0 .985  0 0 0 3.8 -1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3000' height='500'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0024 0.011' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .70  0 0 0 0 .73  0 0 0 0 .77  0 0 0 3.8 -1.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-position:0 0, 0 9px;
  animation:pv-drift-b 380s linear infinite; }
@keyframes pv-drift{ from{ background-position:0 0; } to{ background-position:-2400px 0; } }
@keyframes pv-drift-b{ from{ background-position:0 0, 0 9px; } to{ background-position:-3000px 0, -3000px 9px; } }

/* the sea: level, pale, holding the light near the horizon */
.pv-sea{ position:absolute; left:0; right:0; top:50%; bottom:0; overflow:hidden;
  background:linear-gradient(180deg, #D9DCD6 0%, #C3CBC8 1.4%, #AEBBBA 5%, #9DADAE 14%, #93A3A5 40%, #8E9FA1 100%); }
.pv-sea-glint{ position:absolute; left:0; right:0; top:0; height:22%;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,0) 0 5px, rgba(255,255,255,.16) 5px 6px, rgba(255,255,255,0) 6px 13px);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent);
          mask-image:linear-gradient(180deg, #000, transparent);
  animation:pv-glint 7s ease-in-out infinite alternate; }
@keyframes pv-glint{ from{ opacity:.55; transform:translateY(0); } to{ opacity:1; transform:translateY(3px); } }
.pv-land{ position:absolute; top:calc(50% - 26px); height:27px; background-repeat:no-repeat; background-size:100% 100%; }
.pv-land.is-a{ left:34.5%; width:10%; opacity:.62;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C60 22 120 12 210 9 C300 6 360 14 450 12 C560 9 640 2 740 5 C830 8 900 20 1000 30Z' fill='%23A9B1AD'/%3E%3C/svg%3E"); }
.pv-land.is-b{ left:56.5%; width:7%; opacity:.42; top:calc(50% - 15px); height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C120 20 220 8 380 6 C520 4 640 10 760 14 C860 18 930 24 1000 30Z' fill='%23A9B1AD'/%3E%3C/svg%3E"); }

/* ---------- stone, outside ---------- */
.pv-stone{ background-color:var(--pv-stone);
  background-image:
    var(--gx-trowel),
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 calc(var(--r)*.794px), rgba(104,86,58,.06) calc(var(--r)*.794px) calc(var(--r)*.8px)),
    linear-gradient(180deg, rgba(255,251,240,.55) 0%, rgba(255,251,240,0) 44%, rgba(70,58,38,.10) 100%);
  background-size:calc(var(--r)*3.4px) calc(var(--r)*3.4px), 100% 100%, 100% 100%; }
.pv-facade{ background-color:#E4D8C4; }
.pv-stone.is-sun{ background-color:#F1E7D5; }
.pv-stone.is-shade{ background-color:#CFCBC2; }
.pv-stone.is-front{ background-color:#E9E1D2; }
/* the reveals: one side takes the sun, the other and the head do not */
.pv-reveal{ background-color:#D2CCC1;
  background-image:linear-gradient(90deg, rgba(40,32,20,.10), rgba(40,32,20,0) 60%); }
.pv-reveal.is-r{ background-color:#EEE6D7; background-image:linear-gradient(270deg, rgba(40,32,20,.06), rgba(40,32,20,0) 60%); }
.pv-reveal.is-top{ background-color:#BDB7AB; background-image:none; }
.pv-sill{ background:#DCD5C7; }
.pv-inscr{ display:flex; align-items:center; justify-content:center; }
.pv-inscr span{ font-family:var(--display); font-size:calc(var(--r)*.19px); line-height:1; letter-spacing:.42em; margin-right:-.42em;
  text-transform:uppercase; color:rgba(92,78,54,.62);
  text-shadow:0 1px 0 rgba(255,252,244,.85), 0 -1px 0 rgba(64,50,28,.30); }

/* paving outside: large slabs, the joints barely there */
.pv-court-floor{ background-color:#E4DCCC;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 calc(var(--r)*1.194px), rgba(92,76,50,.10) calc(var(--r)*1.194px) calc(var(--r)*1.2px)),
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 calc(var(--r)*.794px), rgba(92,76,50,.10) calc(var(--r)*.794px) calc(var(--r)*.8px)),
    linear-gradient(180deg, #EFE8DA 0%, #E6DECF 50%, #DDD4C3 100%); }
.pv-court-floor.is-in{ background-color:#E1D9C9; }
.pv-court-floor.is-terrace{ background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 calc(var(--r)*1.194px), rgba(92,76,50,.09) calc(var(--r)*1.194px) calc(var(--r)*1.2px)),
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 calc(var(--r)*.794px), rgba(92,76,50,.09) calc(var(--r)*.794px) calc(var(--r)*.8px)),
    linear-gradient(180deg, #F2E8D6 0%, #E8DECC 60%, #DED3C0 100%); }
.pv-edge{ background:linear-gradient(180deg, #D8CFBF, #BDB3A2); }
.pv-coping{ background-color:#E8E0D0;
  background-image:linear-gradient(180deg, #F4EEE2 0%, #E4DCCB 55%, #D6CDBB 100%); }
.pv-coping.is-sun{ background-color:#F3EADA;
  background-image:linear-gradient(180deg, #FFF8EC 0%, #F0E6D4 60%, #E2D6C2 100%); }

/* the shade a garden wall lays on the paving */
.pv-wallshadow{ background:linear-gradient(90deg, rgba(58,52,44,.20) 0%, rgba(58,52,44,.14) 62%, rgba(58,52,44,0) 100%); }

/* clouds pass over the ground as well as the sky */
.pv-cloudshade{ overflow:hidden; pointer-events:none; }
.pv-cloudshade::before{ content:""; position:absolute; left:-50%; top:-50%; width:200%; height:200%;
  background:
    radial-gradient(22% 16% at 30% 40%, rgba(60,56,48,.16), rgba(60,56,48,0) 100%),
    radial-gradient(18% 22% at 68% 62%, rgba(60,56,48,.13), rgba(60,56,48,0) 100%),
    radial-gradient(26% 14% at 52% 18%, rgba(60,56,48,.10), rgba(60,56,48,0) 100%);
  animation:pv-shadowdrift 64s linear infinite; }
.pv-cloudshade.is-in::before{ animation-duration:48s; animation-delay:-20s; }
@keyframes pv-shadowdrift{ from{ transform:translate3d(-25%, 8%, 0); } to{ transform:translate3d(25%, -8%, 0); } }

/* ---------- water: it holds the sky, and nothing else ---------- */
.pv-water{ overflow:hidden;
  background:linear-gradient(180deg, #D5DBD8 0%, #BCC7C6 22%, #A2B2B4 60%, #8FA0A3 100%);
  box-shadow:0 0 0 calc(var(--r)*.14px) #E9E2D4, 0 0 0 calc(var(--r)*.15px) rgba(92,76,50,.2), inset 0 calc(var(--r)*.05px) calc(var(--r)*.08px) rgba(40,48,50,.28); }
.pv-ripple{ position:absolute; left:-20%; top:-40%; width:140%; height:180%;
  background:repeating-linear-gradient(176deg, rgba(255,255,255,0) 0 calc(var(--r)*.16px), rgba(255,255,255,.20) calc(var(--r)*.17px), rgba(255,255,255,0) calc(var(--r)*.19px) calc(var(--r)*.34px));
  animation:pv-ripple 11s linear infinite; }
.pv-ripple.is-b{ opacity:.6; transform:rotate(7deg);
  background:repeating-linear-gradient(183deg, rgba(255,255,255,0) 0 calc(var(--r)*.22px), rgba(240,246,246,.18) calc(var(--r)*.23px), rgba(255,255,255,0) calc(var(--r)*.25px) calc(var(--r)*.46px));
  animation:pv-ripple-b 17s linear infinite; }
@keyframes pv-ripple{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0, calc(var(--r)*.34px), 0); } }
@keyframes pv-ripple-b{ from{ transform:rotate(7deg) translate3d(0,0,0); } to{ transform:rotate(7deg) translate3d(0, calc(var(--r)*.46px), 0); } }

/* the light the pool throws on the wall above it */
.pv-caustic{ overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg, #000 0%, rgba(0,0,0,.7) 45%, transparent 100%);
          mask-image:linear-gradient(0deg, #000 0%, rgba(0,0,0,.7) 45%, transparent 100%); }
.pv-caustic i{ position:absolute; left:-30%; top:-30%; width:160%; height:160%; background-size:calc(var(--r)*1.6px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.02' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .99  0 0 0 0 .94  -2.6 -2.6 -2.6 0 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"); }
.pv-caustic-a{ opacity:.34; animation:pv-caus-a 13s ease-in-out infinite alternate; }
.pv-caustic-b{ opacity:.22; transform:scaleX(-1); animation:pv-caus-b 17s ease-in-out infinite alternate; }
@keyframes pv-caus-a{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(calc(var(--r)*.5px), calc(var(--r)*-.12px), 0); } }
@keyframes pv-caus-b{ from{ transform:scaleX(-1) translate3d(0,0,0); } to{ transform:scaleX(-1) translate3d(calc(var(--r)*.42px), calc(var(--r)*.1px), 0); } }

/* ---------- inside: plaster, the roof light, the floor ---------- */
.pv-plaster{ background-color:var(--pv-plaster);
  background-image:
    var(--gx-trowel),
    /* the shadow gap at the foot of the wall */
    linear-gradient(0deg, rgba(48,40,26,.42) 0, rgba(48,40,26,.42) calc(var(--r)*.014px), rgba(48,40,26,.07) calc(var(--r)*.016px), rgba(48,40,26,0) calc(var(--r)*.7px)),
    /* the wash off the roof light, strongest where the wall meets the ceiling */
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 22%, rgba(255,255,255,0) 48%, rgba(60,50,32,.05) 100%);
  background-size:calc(var(--r)*3.2px) calc(var(--r)*3.2px), 100% 100%, 100% 100%; }
.pv-plaster.is-l{ background-color:#F3F1EC; }
.pv-plaster.is-r{ background-color:#F7F5F0; }
.pv-plaster.is-end{ background-color:#F2F0EA; }
.pv-plaster.is-back{ background-color:#EFEDE7; }
.pv-ceil{ background-color:#EEEBE5; }
.pv-ceil.is-l{ background-image:linear-gradient(90deg, rgba(60,50,32,.10), rgba(255,255,255,.4) 100%); }
.pv-ceil.is-r{ background-image:linear-gradient(270deg, rgba(60,50,32,.10), rgba(255,255,255,.4) 100%); }
.pv-lantern-side{ background:linear-gradient(0deg, #FFFFFF 0%, #FAF9F5 60%, #F1EFE9 100%); }
.pv-lantern{ background-color:#FFFFFF;
  background-image:
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 calc(var(--r)*1.47px), rgba(150,140,120,.30) calc(var(--r)*1.47px) calc(var(--r)*1.5px)),
    linear-gradient(90deg, rgba(210,204,190,.5), rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(210,204,190,.5)); }
.pv-floor{ background-color:var(--pv-floor);
  background-image:
    var(--gx-trowel),
    linear-gradient(90deg, rgba(60,50,32,.09) 0%, rgba(60,50,32,0) 16%, rgba(255,255,255,.26) 50%, rgba(60,50,32,0) 84%, rgba(60,50,32,.09) 100%);
  background-size:calc(var(--r)*2.4px) calc(var(--r)*2.4px), 100% 100%; }
/* where the sun actually lands */
.pv-sunpool{ pointer-events:none;
  background:linear-gradient(90deg, rgba(255,247,226,0) 0%, rgba(255,247,226,.62) 22%, rgba(255,249,234,.70) 50%, rgba(255,247,226,.62) 78%, rgba(255,247,226,0) 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.pv-sunlit{ animation:pv-cloudpass 29s ease-in-out infinite; }
@keyframes pv-cloudpass{ 0%, 58%, 100%{ opacity:1; } 70%{ opacity:.5; } 80%{ opacity:.58; } }
.pv-shaft{ pointer-events:none; opacity:.9;
  clip-path:polygon(18% 0%, 50% 0%, 100% 100%, 36% 100%);
  background:linear-gradient(180deg, rgba(255,252,242,.20) 0%, rgba(255,250,236,.07) 55%, rgba(255,250,236,0) 100%);
  animation:pv-shaft 29s ease-in-out infinite; animation-delay:calc(var(--d, 0) * -1s); }
@keyframes pv-shaft{ 0%, 58%, 100%{ opacity:.9; } 70%{ opacity:.25; } 80%{ opacity:.4; } }

/* ---------- the room's own words ---------- */
.pv-text{ display:flex; flex-direction:column; justify-content:center; color:var(--pv-ink); cursor:pointer; outline:none; }
.pv-text-t{ margin:0 0 calc(var(--r)*.07px); font-size:calc(var(--r)*.28px); line-height:.92; letter-spacing:-.01em; font-weight:400; }
.pv-text-p{ margin:0; max-width:21em; font-family:var(--display); font-size:calc(var(--r)*.052px); line-height:1.34; color:rgba(22,21,15,.74); }

/* ---------- the works ---------- */
.pv-work{ color:var(--pv-ink); text-decoration:none; cursor:pointer; outline:none; }
.pv-work:focus-visible{ outline:6px solid rgba(22,21,15,.4); outline-offset:34px; }
.pv-work .gx-frame{ --mould:36px; width:100%; height:100%; opacity:1; transform:none; transition:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset, 1px 0 0 rgba(255,255,255,.13) inset,
    0 -1px 0 rgba(0,0,0,.60) inset, -1px 0 0 rgba(0,0,0,.45) inset,
    0 3px 3px rgba(42,36,22,.20), 0 22px 30px -16px rgba(42,36,22,.34), 0 70px 90px -50px rgba(42,36,22,.30); }
.pv-work .gx-mat{ height:100%; box-sizing:border-box; padding:70px; }
.pv-work .gw-hung{ width:100%; height:100%; margin:0; }
.pv-work .gw-hung::before{ inset:-6px; border-width:6px; }
.pv-work .mu-img{ display:block; width:100%; height:100%; object-fit:contain; }
.pv-work .mu-photo{ width:100%; height:100%; background:#1A1915;
  box-shadow:0 2px 2px rgba(42,36,22,.22), 0 26px 36px -20px rgba(42,36,22,.36); }
.pv-work .mu-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.pv-work .mu-obj{ margin:0; width:100%; height:100%; }
.pv-work .mu-obj img{ display:block; width:100%; height:100%; object-fit:contain; }
/* the placard on the wall, at its real size */
.pv-work .mu-label{ position:absolute; left:calc(100% + 64px); bottom:0; width:200px; color:#2A271F; font-family:var(--display); }
.pv-work .mu-label *{ margin:0; }
.pv-work .mu-l-no{ font-size:30px; line-height:1; margin-bottom:8px; font-weight:400; }
.pv-work .mu-l-line, .pv-work .mu-l-dim, .pv-work .mu-l-held{ font-size:15px; line-height:1.36; color:rgba(42,39,31,.72); }
.pv-work .mu-label a{ color:inherit; text-decoration:none; }
.pv-work .mu-label .gx-way{ display:none; }
.pv.is-near .pv-work .mu-label{ opacity:0; }
.pv.is-near .pv-work:not(.is-near){ opacity:.22; }

/* ---------- the eye ---------- */
.pv-bloom, .pv-shade, .pv-warm{ position:absolute; inset:0; pointer-events:none; }
.pv-bloom{ opacity:1;
  background:
    radial-gradient(70% 60% at 26% 8%, rgba(255,253,245,.34), rgba(255,253,245,0) 70%),
    linear-gradient(180deg, rgba(255,255,252,.10), rgba(255,255,252,.02)); }
.pv-shade{ opacity:0;
  background:radial-gradient(120% 100% at 50% 44%, rgba(40,34,24,0) 48%, rgba(40,34,24,.10) 80%, rgba(40,34,24,.20) 100%); }
.pv-warm{ opacity:0;
  background:
    radial-gradient(90% 70% at 22% 20%, rgba(255,196,128,.16), rgba(255,196,128,0) 70%),
    linear-gradient(180deg, rgba(255,214,160,.07), rgba(255,184,120,.10)); }

/* ---------- the way in ---------- */
.pv-intro{ position:absolute; left:0; right:0; top:15vh; z-index:4; display:grid; justify-items:center; text-align:center;
  pointer-events:none; color:var(--pv-ink); }
.pv-intro > *{ margin:0; opacity:0; transform:translateY(16px); transition:opacity 1.4s var(--ease), transform 1.8s var(--ease); }
.pv.is-born .pv-intro > *{ opacity:1; transform:none; }
.pv.is-born .pv-intro > :nth-child(1){ transition-delay:.5s; }
.pv.is-born .pv-intro > :nth-child(2){ transition-delay:.8s; }
.pv.is-born .pv-intro > :nth-child(3){ transition-delay:1.5s; }
.pv.is-born .pv-intro > :nth-child(4){ transition-delay:1.75s; }
.pv-i-house{ font-family:var(--display); font-size:12px; letter-spacing:.5em; margin-right:-.5em !important; text-transform:uppercase; color:rgba(22,21,15,.56); }
.pv-i-name{ font-size:clamp(96px, 13.5vw, 232px); line-height:.86; letter-spacing:-.022em; font-weight:400; margin:.14em 0 .2em !important;
  color:#1A1914; text-shadow:0 1px 0 rgba(255,255,255,.35); }
.pv-i-l{ font-family:var(--display); font-size:clamp(16px, 1.3vw, 19px); color:rgba(22,21,15,.70); }
.pv-i-l.is-count{ margin-top:.3em !important; font-size:clamp(14px, 1.1vw, 16px); color:rgba(22,21,15,.46); font-style:italic; }
.pv.is-near .pv-intro{ opacity:0 !important; }

/* which room you are in, quietly */
.pv-where{ position:absolute; left:clamp(18px, 2.4vw, 40px); bottom:clamp(20px, 3.4vh, 38px); z-index:4; margin:0;
  font-family:var(--display); font-style:italic; font-size:17px; color:rgba(22,21,15,.56);
  opacity:0; transform:translateY(8px); transition:opacity .9s var(--ease), transform 1.1s var(--ease); pointer-events:none; }
.pv-where.is-on{ opacity:1; transform:none; }
.pv.is-near .pv-where{ opacity:0; }

/* ---------- the facts, set on the wall beside the work ---------- */
.pv-card{ position:absolute; z-index:5; right:clamp(40px, 8vw, 150px); top:50%; transform:translateY(-50%);
  width:min(32vw, 440px); display:grid; gap:0; color:var(--pv-ink); pointer-events:none; }
.pv.is-card .pv-card{ pointer-events:auto; }
.pv-card > *{ margin:0; }
.pv-rise{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.pv.is-card .pv-rise{ opacity:1; transform:none;
  transition:opacity 1.1s var(--ease), transform 1.3s var(--ease); transition-delay:calc(var(--i, 0) * 95ms + 120ms); }
.pv-c-kick{ font-family:var(--display); font-style:italic; font-size:16px; color:var(--pv-ink3); margin-bottom:18px !important; }
.pv-c-no{ font-size:clamp(58px, 5.6vw, 96px); line-height:.9; letter-spacing:-.01em; font-weight:400; margin-bottom:22px !important; }
.pv-c-line{ font-family:var(--display); font-size:clamp(18px, 1.45vw, 22px); line-height:1.3; }
.pv-c-dim{ font-family:var(--display); font-size:15px; line-height:1.45; color:var(--pv-ink2); margin-top:6px !important; }
.pv-c-held{ font-family:var(--display); font-style:italic; font-size:16px; color:var(--pv-ink2); margin-top:26px !important; }
.pv-c-go{ position:relative; justify-self:start; margin-top:34px !important; padding-bottom:9px;
  font-family:var(--display); font-size:clamp(26px, 2.2vw, 34px); line-height:1; color:var(--pv-ink); text-decoration:none; }
.pv-c-go::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(22,21,15,.2); }
.pv-c-go::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--pv-ink);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .9s var(--ease); z-index:1; }
.pv-c-go:hover::before, .pv-c-go:focus-visible::before{ transform:scaleX(1); }
.pv-c-rec{ justify-self:start; margin-top:16px !important; font-family:var(--display); font-style:italic; font-size:15px;
  color:var(--pv-ink2); text-decoration:none; border-bottom:1px solid rgba(22,21,15,.14); padding-bottom:2px; transition:border-color .5s var(--ease), color .5s var(--ease); }
.pv-c-rec:hover{ color:var(--pv-ink); border-bottom-color:rgba(22,21,15,.5); }
.pv-c-q{ display:flex; gap:22px; margin-top:44px !important; }
.pv-q{ appearance:none; background:none; border:0; padding:0 0 3px; cursor:pointer; font-family:var(--display); font-style:italic;
  font-size:15px; color:var(--pv-ink3); border-bottom:1px solid transparent; transition:color .5s var(--ease), border-color .5s var(--ease); }
.pv-q:hover, .pv-q:focus-visible{ color:var(--pv-ink); border-bottom-color:rgba(22,21,15,.3); outline:none; }