/* ============================================================
   THE VIEWING ROOM — the gallery after dark
   A black wall with a little warmth in it, and one lamp at a time. The
   lamp's pool is the only thing that shows the wall is there, and the
   plaster's tooth comes up only where the light falls. The sheet stands
   off the wall, so its shadow is real; the paper is lit like paper,
   brightest where the spot is aimed and falling away toward its foot.

   Type is one voice, the display face, small and level. The number is
   struck metal, a letter at a time, like the numerals on a door.
   ============================================================ */
body[data-page="gallery"], body[data-page="work"], .page-gallery, .page-work{ background:#070706; }
html.gv-snap{ scroll-snap-type:y mandatory; }

.gv{ position:relative; color:#F4EFE6; --wall:#070706; --lamp:255,236,210; --px:0; --py:0; --near:0; }
.gv-track{ position:relative; }
.gv-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--wall);
  transition:opacity .5s var(--settle); }
.gv.is-cut .gv-stage{ opacity:0; transition-duration:.32s; }
.gv-marks{ position:absolute; inset:0; pointer-events:none; }
.gv-mark{ position:absolute; left:0; right:0; scroll-snap-align:start; }

.gv-slide{ position:absolute; inset:0; visibility:hidden; --pool:0; --body:0; }
.gv-slide:not(.is-on) a, .gv-slide:not(.is-on) button{ pointer-events:none; }

/* ---------- the lamp on the wall ----------
   A spot has a beam and a spill: the beam is the pool a little larger
   than the sheet, with an edge you can find; the spill is the long, faint
   light the beam throws round itself. */
.gv-pool{ position:absolute; pointer-events:none; border-radius:50%; opacity:var(--pool);
  background:
    radial-gradient(33% 31% at 50% 47%,
      rgba(var(--lamp),.075) 0%, rgba(var(--lamp),.062) 52%, rgba(var(--lamp),.03) 80%, rgba(var(--lamp),0) 100%),
    radial-gradient(closest-side,
      rgba(var(--lamp),.12) 0%, rgba(var(--lamp),.082) 30%, rgba(var(--lamp),.04) 54%,
      rgba(var(--lamp),.013) 78%, rgba(var(--lamp),0) 100%);
  transform:translate3d(calc(var(--px) * 1.4vw), calc(var(--py) * .8vh), 0);
  transition:filter .8s var(--settle); }
.gv-pool::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  background-image:var(--fibre); background-size:180px; opacity:.6;
  -webkit-mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.5) 46%, rgba(0,0,0,0) 86%);
          mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.5) 46%, rgba(0,0,0,0) 86%); }
.gv-slide:has(.gv-plate:hover) .gv-pool{ filter:brightness(1.16); }

/* ---------- the sheet ---------- */
.gv-hang{ position:absolute; margin:0; opacity:var(--body);
  transform:translate3d(0, calc((1 - var(--body)) * 16px), 0);
  translate:0 0; scale:1;
  transition:translate 1.1s var(--settle), scale 1.1s var(--settle); }
.gv-hang.is-away{ visibility:hidden; }
/* the lamp's shadow, soft, and the close one where the paper nearly meets the wall */
.gv-cast{ position:absolute; left:2%; right:2%; top:5%; bottom:-2%; pointer-events:none;
  background:#000; opacity:.6; filter:blur(22px);
  transform:translate3d(calc(var(--px) * -14px + 3px), calc(var(--py) * -7px + 18px), 0);
  transition:opacity var(--t-light) var(--settle); }
.gv-touch{ position:absolute; inset:0; pointer-events:none; background:#000; opacity:.62; filter:blur(3px);
  transform:translate3d(calc(var(--px) * -3px + 1px), calc(var(--py) * -1.5px + 5px), 0); }
.gv-edge{ position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,250,240,.24), inset 0 -1px 0 rgba(0,0,0,.26); }
.gv-hang.is-object .gv-touch, .gv-hang.is-object .gv-edge{ display:none; }
.gv-plate{ position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0;
  background:#11100E; overflow:hidden; cursor:zoom-in; }
.gv-plate:focus-visible{ outline:1px solid rgba(244,239,230,.5); outline-offset:6px; }
.gv-img{ display:block; width:100%; height:100%; object-fit:cover; opacity:0; filter:brightness(.9);
  transition:opacity 1.2s var(--settle), filter var(--t-light) var(--settle);
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
.gv-hang.is-ready .gv-img{ opacity:1; }
/* the spot is aimed a little above the middle; the foot of the sheet is in its fall-off */
.gv-fall{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 92% at calc(50% + var(--px) * 16%) calc(26% + var(--py) * 8%),
    rgba(8,7,5,0) 0%, rgba(8,7,5,.06) 44%, rgba(8,7,5,.26) 100%);
  transition:opacity var(--t-light) var(--settle); }
.gv-sheen{ position:absolute; top:0; bottom:0; left:-60%; right:-60%; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(102deg, rgba(var(--lamp),0) 40%, rgba(var(--lamp),.045) 50%, rgba(var(--lamp),0) 60%);
  transform:translate3d(calc(var(--px) * 24%), 0, 0); }
.gv-hang.is-object .gv-fall, .gv-hang.is-object .gv-sheen{ display:none; }

/* ---------- the label ---------- */
.gv-label{ position:absolute; font-family:var(--display); color:#F4EFE6; opacity:var(--body); }
.gv-no{ margin:0 0 12px; font-size:clamp(30px, 2.7vw, 46px); line-height:.92; letter-spacing:-.015em; white-space:nowrap;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)); }
.gv-no, .gv-ch, .gv-rt{ text-shadow:none; }
/* struck nickel, one broad highlight that the lamp moves, not a chrome stripe */
.gv-ch{ display:inline-block; opacity:0; transform:translate3d(0,.3em,0);
  background:linear-gradient(108deg, #5E5A54 0%, #B9B3A8 24%, #F2EDE4 42%, #CFC8BC 54%, #8A847A 72%, #4E4A45 100%);
  background-size:260% 100%; background-position:calc(50% - var(--px) * 40%) 50%;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  transition:opacity .9s var(--settle), transform 1.1s var(--settle);
  transition-delay:calc(var(--i) * 55ms + 180ms); }
.gv-slide.is-on .gv-ch{ opacity:1; transform:none; }
.gv-line{ margin:0; font-size:clamp(15px, 1.08vw, 17px); line-height:1.3; color:rgba(244,239,230,.86); }
.gv-dim{ margin:5px 0 0; font-size:13.5px; line-height:1.45; color:rgba(244,239,230,.52); }
.gv-held{ margin:16px 0 0; font-style:italic; font-size:14px; line-height:1.4; color:rgba(244,239,230,.62); }
.gv-ways{ margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px 20px; }
.gv-way{ font-style:italic; font-size:14px; line-height:1.4; color:rgba(244,239,230,.64);
  padding-bottom:3px; border-bottom:1px solid rgba(244,239,230,.2);
  transition:color var(--t-touch) var(--settle), border-color var(--t-touch) var(--settle); }
.gv-way:hover, .gv-way:focus-visible{ color:#F4EFE6; border-bottom-color:rgba(244,239,230,.62); outline:none; }
.gv-said{ margin:12px 0 0; font-style:italic; font-size:13px; line-height:1.4; color:rgba(244,239,230,.52); }
.gv-said[hidden]{ display:none; }
.gv-dim, .gv-held, .gv-ways, .gv-said{ opacity:0; transform:translate3d(0,8px,0);
  transition:opacity .9s var(--settle), transform 1.1s var(--settle); }
.gv-slide.is-on .gv-dim{ opacity:1; transform:none; transition-delay:.7s; }
.gv-slide.is-on .gv-held{ opacity:1; transform:none; transition-delay:.85s; }
.gv-slide.is-on .gv-ways{ opacity:1; transform:none; transition-delay:1s; }
.gv-slide.is-on .gv-said{ opacity:1; transform:none; transition-delay:1.1s; }

/* one word leaves upward as the next arrives from below */
.gv-pass{ margin:0; }
.gv-pass-live{ position:relative; display:block; height:1.35em; clip-path:inset(0 -60vw 0 -4px); }
.gv-pass-w{ position:absolute; left:0; top:0; white-space:nowrap; opacity:0; transform:translate3d(0,118%,0);
  transition:transform 1.05s var(--settle), opacity .85s var(--settle); }
.gv-pass-w.is-wait{ transition:none; transform:translate3d(0,118%,0); opacity:0; }
.gv-pass-w.is-on{ transform:none; opacity:1; }
.gv-pass-w.is-gone{ transform:translate3d(0,-118%,0); opacity:0; }

/* ---------- a room's name on the wall ---------- */
.gv-room{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; text-align:center;
  padding:0 var(--gutter); }
.gv-room-pool{ position:absolute; left:50%; top:44%; width:min(150vw, 1500px); height:min(110vh, 1000px);
  border-radius:50%; pointer-events:none; opacity:var(--pool);
  background:radial-gradient(closest-side, rgba(var(--lamp),.07), rgba(var(--lamp),.034) 40%, rgba(var(--lamp),.01) 72%, rgba(var(--lamp),0));
  transform:translate3d(calc(-50% + var(--px) * 2vw), calc(-50% + var(--py) * 1.2vh), 0); }
.gv-rt{ position:relative; margin:0; font-size:clamp(46px, calc(var(--room-title) * .74), 140px); line-height:.9; letter-spacing:-.026em;
  padding:0 .04em .06em;
  background:radial-gradient(46% 120% at calc(50% + var(--px) * 30%) calc(40% + var(--py) * 24%),
    #FFFBF3 0%, rgba(244,239,230,.74) 38%, rgba(244,239,230,.3) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.5));
  opacity:var(--body); transform:translate3d(0, calc((1 - var(--body)) * 14px), 0); }
.gv-rx{ position:relative; margin:clamp(24px, 3.6vh, 42px) auto 0; max-width:31em;
  font-family:var(--serif); font-size:clamp(16px, 1.15vw, 18.5px); line-height:1.72; color:rgba(244,239,230,.62);
  opacity:calc(var(--body) * var(--body)); }

/* ---------- the arrival: the name pressed into the wall ---------- */
.gv-open{ position:absolute; inset:0; opacity:var(--body); }
.gv-o-name{ position:absolute; left:50%; top:48%; transform:translate(-50%, -50%); line-height:0; }
.gv-o-name canvas{ display:block; opacity:.82;
  -webkit-mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.86) 24%, rgba(0,0,0,.56) 46%, rgba(0,0,0,.26) 68%, rgba(0,0,0,.08) 86%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.86) 24%, rgba(0,0,0,.56) 46%, rgba(0,0,0,.26) 68%, rgba(0,0,0,.08) 86%, rgba(0,0,0,0) 100%); }
.gv-o-flat{ font-size:clamp(64px, 11vw, 168px); line-height:1; color:#F4EFE6; white-space:nowrap; }
.gv-o-house, .gv-o-line{ z-index:1; }
.gv-o-house{ position:absolute; left:0; right:0; top:calc(48% - clamp(70px, 7.6vw, 108px)); margin:0; padding-left:.5em;
  text-align:center; font-family:var(--display); font-size:11px; letter-spacing:.5em; text-transform:uppercase;
  color:rgba(244,239,230,.44); }
.gv-o-line{ position:absolute; left:0; right:0; top:calc(48% + clamp(50px, 5.6vw, 84px)); margin:0;
  text-align:center; font-family:var(--display); font-style:italic; font-size:clamp(14px, 1.15vw, 17px);
  color:rgba(244,239,230,.42); }
.gv-o-cue{ position:absolute; left:50%; bottom:clamp(26px, 5vh, 56px); width:1px; height:52px; margin-left:-.5px;
  background:linear-gradient(180deg, rgba(244,239,230,0), rgba(244,239,230,.46));
  transform-origin:50% 0; animation:gv-cue 2.6s var(--settle) 1.1s both; }
@keyframes gv-cue{ from{ transform:scaleY(0); opacity:0; } to{ transform:scaleY(1); opacity:1; } }

/* ---------- the last door ---------- */
.gv-end{ position:absolute; inset:0; display:grid; place-items:center; opacity:var(--body); }
.gv-door-spill{ position:absolute; left:50%; top:46%; width:min(80vw, 820px); height:min(96vh, 960px);
  transform:translate(-50%, -50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--lamp),.05), rgba(var(--lamp),.016) 55%, rgba(var(--lamp),0));
  opacity:calc(.6 + var(--near) * .4); }
.gv-door{ position:relative; display:grid; justify-items:center; gap:clamp(22px, 3.6vh, 36px);
  margin:0; padding:0; border:0; background:none; color:inherit; cursor:pointer; }
.gv-door:focus-visible{ outline:none; }
.gv-slit{ display:block; width:calc(2px + var(--near) * 4px); height:min(50vh, 500px);
  background:linear-gradient(180deg, rgba(255,240,218,0) 0%, rgba(255,240,218,.9) 14%, #FFF6E8 50%, rgba(255,240,218,.9) 86%, rgba(255,240,218,0) 100%);
  transition:width .3s var(--settle); }
.gv-door:hover .gv-slit, .gv-door:focus-visible .gv-slit{ width:8px; transition-duration:.9s; }
.gv-door-w{ font-family:var(--display); font-style:italic; font-size:17px; line-height:1.3; color:rgba(244,239,230,.6);
  padding-bottom:3px; border-bottom:1px solid rgba(244,239,230,.2);
  transition:color .4s var(--settle), border-color .4s var(--settle); }
.gv-door:hover .gv-door-w, .gv-door:focus-visible .gv-door-w{ color:#F4EFE6; border-bottom-color:rgba(244,239,230,.6); }
.gv-comm{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(22px, 4.6vh, 46px); margin:0;
  text-align:center; font-family:var(--serif); font-size:14px; line-height:1.5; color:rgba(244,239,230,.42); }
.gv-comm a{ color:rgba(244,239,230,.66); border-bottom:1px solid rgba(244,239,230,.2); transition:color .4s var(--settle); }
.gv-comm a:hover, .gv-comm a:focus-visible{ color:#F4EFE6; outline:none; }
.gv-none{ min-height:100vh; display:grid; place-items:center; font-family:var(--display); font-style:italic; color:rgba(244,239,230,.5); }

/* ---------- the slides, on a light table ---------- */
.gv-strip{ position:fixed; left:50%; bottom:clamp(16px, 2.6vh, 28px); z-index:40; display:flex; align-items:flex-end; gap:7px;
  opacity:0; visibility:hidden; transform:translate3d(-50%, 12px, 0); pointer-events:none;
  transition:opacity .9s var(--settle), transform 1s var(--settle), visibility 0s linear .9s; }
.gv.is-walking .gv-strip{ opacity:1; visibility:visible; transform:translate3d(-50%, 0, 0); pointer-events:auto; transition-delay:0s; }
.gv.is-close .gv-strip, .gv.is-asking .gv-strip{ opacity:0; visibility:hidden; pointer-events:none; transition-delay:0s, 0s, .9s; }
.gv-th{ position:relative; display:block; margin:0; padding:8px 0 7px; border:0; background:none; cursor:pointer;
  opacity:.24; transition:opacity .5s var(--settle); }
.gv-th.is-turn{ margin-left:14px; }
.gv-th:hover, .gv-th:focus-visible{ opacity:.72; outline:none; }
.gv-th.is-on{ opacity:.95; }
.gv-th::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(244,239,230,.55);
  transform:scaleX(0); transition:transform .7s var(--settle); }
.gv-th.is-on::after{ transform:none; }
.gv-th-c{ display:block; background:#1A1815; }
.gv-th-no{ position:absolute; left:50%; bottom:calc(100% + 6px); transform:translate3d(-50%, 4px, 0); white-space:nowrap; pointer-events:none;
  font-family:var(--display); font-style:italic; font-size:12.5px; color:rgba(244,239,230,.72); opacity:0;
  transition:opacity .35s var(--settle), transform .5s var(--settle); }
.gv-th:hover .gv-th-no, .gv-th:focus-visible .gv-th-no{ opacity:1; transform:translate3d(-50%, 0, 0); }

/* ---------- closer ---------- */
.gv-closer{ position:fixed; inset:0; z-index:80; background:rgba(6,6,5,0); cursor:zoom-out;
  transition:background .7s var(--settle); }
.gv-closer.is-on{ background:rgba(6,6,5,.97); }
.gv-closer:focus{ outline:none; }
.gv-closer-img{ position:absolute; display:block; max-width:none; transform-origin:0 0; filter:brightness(.94);
  transition:transform .9s var(--settle), opacity .26s var(--settle);
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
.gv-closer-cap{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(14px, 2.6vh, 28px); margin:0;
  text-align:center; font-family:var(--display); font-style:italic; font-size:14px; color:rgba(244,239,230,.5);
  opacity:0; transition:opacity .6s var(--settle); }
.gv-closer.is-on .gv-closer-cap{ opacity:1; transition-delay:.4s; }

/* ---------- asking: the room answers ----------
   The lamp is drawn in until only the sheet and the air round it are lit;
   the rest of the wall goes to night. The label gives way, the strip and
   the house's own words go quiet, and a card is laid in the light's edge. */
.gv-gather{ position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(var(--gw, 30vw) var(--gh, 40vh) at var(--gx, 50%) var(--gy, 50%),
    rgba(var(--lamp),.05) 0%, rgba(var(--lamp),.032) 52%, rgba(3,3,2,0) 70%,
    rgba(3,3,2,.5) 88%, rgba(3,3,2,.76) 100%);
  transition:opacity var(--t-light) var(--settle); }
.gv-slide.is-ask .gv-gather{ opacity:1; }
.gv-scrim{ position:absolute; inset:0; z-index:2; display:none; }
.gv-slide.is-ask .gv-scrim{ display:block; }
.gv-slide.is-ask .gv-hang{ translate:var(--ask-x, 0px) var(--ask-y, 0px); scale:var(--ask-k, 1); }
.gv-slide.is-ask .gv-img{ filter:brightness(.97); }
.gv-slide.is-ask .gv-fall{ opacity:.45; }
.gv-slide.is-ask .gv-cast{ opacity:.72; }
.gv-label-in{ transition:opacity var(--t-state) var(--settle), translate var(--t-settle) var(--settle); }
.gv-slide.is-ask .gv-label-in{ opacity:0; translate:0 -6px; pointer-events:none; }
html.is-overlaid.gv-asking{ overflow:visible; }
html.gv-asking #nav{ opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t-state) var(--settle), visibility 0s linear var(--t-state); }
html.gv-asking #nav-wake{ pointer-events:none; }

/* the card: cotton cardstock in the edge of the lamp, lit from the sheet's side */
.gv-ask{ position:absolute; z-index:3; opacity:0; visibility:hidden;
  translate:0 var(--arrive-rise); filter:blur(var(--arrive-blur));
  transition:opacity var(--t-state) var(--settle), translate var(--t-state) var(--settle),
    filter var(--t-state) var(--settle), visibility 0s linear var(--t-state); }
.gv-slide.is-ask .gv-ask{ opacity:1; visibility:visible; translate:0 0; filter:none;
  transition-duration:var(--t-settle), 1.1s, var(--t-settle), 0s; transition-delay:.24s, .24s, .24s, 0s; }
.gv-ask-cast{ position:absolute; left:3%; right:3%; top:7%; bottom:-1%; pointer-events:none;
  background:#000; opacity:.62; filter:blur(16px);
  transform:translate3d(calc(var(--px) * -10px + 2px), calc(var(--py) * -5px + 12px), 0); }
.gv-q{ position:relative; padding:clamp(22px, 2vw, 30px) clamp(22px, 2vw, 30px) clamp(16px, 1.6vw, 22px);
  font-family:var(--display); color:var(--ink); background-color:#E9E3D8;
  background-image:linear-gradient(164deg, rgba(255,253,248,.36) 0%, rgba(255,253,248,0) 44%, rgba(52,42,28,.045) 100%), var(--fibre);
  background-size:auto, 220px;
  box-shadow:inset 0 1px 0 rgba(255,253,248,.72), inset 0 -1px 0 rgba(52,42,28,.18); }
.gv-q:focus{ outline:none; }
.gv-q ::selection{ background:var(--select); color:var(--paper); }

/* its facts, set small as a label is set */
.gv-q-label{ margin:0 0 clamp(18px, 2.4vh, 26px); padding-right:52px; }
.gv-q-no{ margin:0; font-size:clamp(21px, 1.6vw, 26px); line-height:1; letter-spacing:-.01em; text-shadow:none; }
.gv-q-what{ margin:9px 0 0; font-size:14.5px; line-height:1.35; color:rgba(26,24,20,.76); }
.gv-q-dim{ margin:2px 0 0; font-size:13px; line-height:1.4; color:rgba(26,24,20,.54); }

/* three lines to write on: a hairline each, drawn as the card is laid */
.gv-q-body{ position:relative; }
.gv-q-form{ display:grid; gap:clamp(10px, 1.5vh, 15px);
  transition:opacity var(--t-state) var(--settle), visibility 0s linear 0s; }
.gv-q-f{ position:relative; margin:0; display:grid; gap:1px; }
.gv-q-f::before, .gv-q-f::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:var(--hair);
  pointer-events:none; transform-origin:0 50%; transform:scaleX(0); }
.gv-q-f::before{ background:rgba(26,24,20,.2); transition:transform 1.1s var(--settle); }
.gv-q-f::after{ background:var(--ink); transition:transform var(--t-state) var(--settle); }
.gv-slide.is-ask .gv-q-f::before{ transform:none; transition-delay:calc(.5s + var(--k, 0) * 80ms); }
.gv-q-f:focus-within::after{ transform:none; }
.gv-q-f:has([aria-invalid="true"])::before{ background:rgba(var(--safe-rgb), .78); }
.gv-q-l{ font-style:italic; font-size:13px; line-height:1.3; color:rgba(26,24,20,.56); cursor:text; }
.gv-q input, .gv-q textarea{ display:block; width:100%; margin:0; padding:2px 0 7px; border:0; border-radius:0;
  background:transparent; box-shadow:none; outline:none; -webkit-appearance:none; appearance:none;
  font:16px/1.35 var(--display); color:var(--ink); caret-color:var(--ink); }
.gv-q textarea{ resize:none; min-height:calc(2.7em + 9px); }
.gv-q input:-webkit-autofill{ -webkit-text-fill-color:var(--ink); transition:background-color 99999s linear 0s; }
.gv-q-foot{ margin:4px 0 0; display:flex; justify-content:flex-end; }
.gv-q-send, .gv-q-close{ margin:0; padding:0 0 3px; border:0; border-radius:0; background:none; cursor:pointer;
  font-family:var(--display); font-style:italic; line-height:1.3;
  border-bottom:var(--hair) solid rgba(26,24,20,.3);
  transition:color var(--t-touch) var(--settle), border-color var(--t-touch) var(--settle); }
.gv-q-send{ font-size:16px; color:var(--ink); }
.gv-q-close{ position:absolute; top:clamp(20px, 1.9vw, 28px); right:clamp(22px, 2vw, 30px);
  font-size:13px; color:rgba(26,24,20,.52); border-bottom-color:transparent; }
.gv-q-send:hover, .gv-q-send:focus-visible{ border-bottom-color:var(--ink); outline:none; }
.gv-q-close:hover, .gv-q-close:focus-visible{ color:var(--ink); border-bottom-color:rgba(26,24,20,.42); outline:none; }
.gv-q-state{ margin:10px 0 0; min-height:1.4em; font-style:italic; font-size:13.5px; line-height:1.4; color:rgba(26,24,20,.62); }

/* the card arrives first; then its words, one after another */
.gv-q-label > *, .gv-q-f, .gv-q-foot, .gv-q-close{ opacity:0; translate:0 6px;
  transition:opacity var(--t-settle) var(--settle), translate var(--t-settle) var(--settle); }
.gv-slide.is-ask .gv-q-label > *, .gv-slide.is-ask .gv-q-f, .gv-slide.is-ask .gv-q-foot, .gv-slide.is-ask .gv-q-close{
  opacity:1; translate:0 0; transition-delay:calc(.42s + var(--k, 0) * 70ms); }

/* said: the lines go, and one line takes their place */
.gv-q.is-said .gv-q-form{ opacity:0; visibility:hidden; transition-delay:0s, var(--t-state); }
.gv-q.is-said .gv-q-state{ position:absolute; inset:0; margin:0; display:flex; align-items:center;
  font-size:16px; color:rgba(26,24,20,.74); animation:gv-said var(--t-settle) var(--settle) .3s both; }
@keyframes gv-said{
  from{ opacity:0; translate:0 var(--arrive-rise); filter:blur(var(--arrive-blur)); }
  to{ opacity:1; translate:0 0; filter:none; } }

@media (max-width:759px){
  .gv-no{ font-size:clamp(30px, 9vw, 40px); margin-bottom:10px; }
  .gv-line{ font-size:16px; }
  .gv-ways{ margin-top:14px; }
  .gv-cast{ filter:blur(12px); }
  .gv-rx{ font-size:16px; line-height:1.65; }
  .gv-strip{ display:none; }
  .gv-q{ padding:20px 20px 14px; }
  .gv-q-label{ margin-bottom:16px; }
  .gv-q-close{ top:20px; right:20px; }
  .gv-q-form{ gap:8px; }
  .gv-ask-cast{ filter:blur(12px); }
}

@media (prefers-reduced-motion:reduce){
  .gv *, .gv *::before, .gv *::after{ transition:none !important; animation:none !important; }
  .gv-ch, .gv-dim, .gv-held, .gv-ways, .gv-said{ opacity:1; transform:none; }
}