/* Bring Us A Question: "The Population" (chosen by Zelda 2026-10-30 from the explorations; was assets/qopt-population.css).
   One column, drawn once: the title block and the window hang on the window's two edge lines and sit in the middle of
   the screen under the nav. Nothing under the window. Every line in the window hangs on the same two columns. Around it, on a canvas (assets/qopt-population.js), a population of fine
   points gathers as the visitor describes the audience. A bigger window adds void and population, never size. */

.stage.pop-stage{ padding:0; gap:0; }
.panel.qpop{ --w:620px; position:relative; overflow:hidden; border-radius:0; padding:0;
  min-height:calc(100vh - 66px); min-height:calc(100svh - 66px);
  display:flex; align-items:center; justify-content:center; }

/* the population: a ground layer under the whole first screen */
.qpop .pop-cv{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; }

/* the column */
.qpop .comp{ position:relative; z-index:1; width:var(--w); max-width:calc(100vw - 2 * var(--edge)); margin:0 auto;
  padding:clamp(20px, 3.4vh, 40px) 0; display:grid; grid-template-columns:minmax(0,1fr); row-gap:24px; }

/* the title block: the title and the deck on the left edge line, the other way in on the right edge line */
.qpop .head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:24px; }
.qpop .head h1{ grid-column:1; white-space:nowrap; }
.qpop .head .deck{ grid-column:1; margin:8px 0 0; font-size:var(--t-lede); line-height:var(--lh-lede); letter-spacing:var(--ls-lede); color:var(--fg-mid); }
/* the other way in, under the window on its right edge (2026-11-02, Zelda) */
.qpop .aside{ justify-self:end; margin:-10px 0 0; text-align:right;
  font-family:var(--mono); font-weight:300; font-size:var(--t-small); line-height:var(--lh-small); letter-spacing:.02em; color:var(--fg-dim); }
.qpop .aside a{ color:var(--fg-mid); transition:color .25s var(--ease); }
.qpop .aside a:hover{ color:var(--fg); }

/* the window */
.qpop .paper{ position:relative; margin:0; color:#f3f3f1; border-radius:20px; border:0;
  background:rgba(255,255,250,.075);
  backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1);
  padding:28px 32px 24px;
  box-shadow:inset 0 1px 0 rgba(255,255,250,.16), 0 70px 120px -40px rgba(0,0,0,.95), 0 24px 48px -28px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.5); }

.qpop .grp{ display:grid; padding:0 0 16px; }
.qpop .glabel{ font-family:var(--mono); font-size:var(--t-label); font-weight:300; line-height:var(--lh-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:rgba(255,255,250,.42); transition:color .5s var(--ease); }
.qpop .grp:focus-within .glabel{ color:rgba(255,255,250,.74); }
.qpop .lines{ display:grid; gap:0 26px; }
.qpop .lines.two{ grid-template-columns:1fr 1fr; align-items:start; }
.qpop .lines.two.dec{ grid-template-columns:1fr 1fr; }   /* one pair of columns for the whole window (2026-10-30) */
.qpop .f{ position:relative; }
.qpop .f input, .qpop .f select, .qpop .f textarea{
  display:block; appearance:none; -webkit-appearance:none; width:100%; background:transparent; color:#f3f3f1; border:0; border-radius:0;
  border-bottom:1px solid rgba(255,255,250,.2); padding:10px 0 8px; height:40px; font:inherit; font-size:var(--t-body); line-height:1.4; letter-spacing:-.01em; outline:none;
  transition:border-color .5s var(--ease), color .5s var(--ease); }
.qpop .f:hover input, .qpop .f:hover select, .qpop .f:hover textarea{ border-bottom-color:rgba(255,255,250,.32); }
.qpop .f.done input, .qpop .f.done select, .qpop .f.done textarea{ border-bottom-color:rgba(255,255,250,.4); }
.qpop .f input:focus, .qpop .f select:focus, .qpop .f textarea:focus{ border-bottom-color:#fff; }
.qpop .f input::placeholder, .qpop .f textarea::placeholder{ color:rgba(255,255,250,.42); opacity:1; }
.qpop .f textarea{ min-height:40px; resize:none; overflow:hidden; transition:border-color .5s var(--ease), height .32s var(--ease); }
.qpop .f.sel::after{ content:""; position:absolute; right:6px; top:15px; width:7px; height:7px; border-right:1.2px solid rgba(255,255,250,.6); border-bottom:1.2px solid rgba(255,255,250,.6); transform:rotate(45deg); pointer-events:none; }
.qpop .f select{ padding-right:24px; cursor:pointer; text-overflow:ellipsis; }
.qpop .f select.empty{ color:rgba(255,255,250,.42); }
.qpop .f select option{ color:#f3f3f1; background:#0b0b0c; }
.qpop .f.small input{ font-size:var(--t-small); color:rgba(255,255,250,.8); }
.qpop .f .err{ position:absolute; right:0; top:-13px; font-family:var(--mono); font-size:var(--t-micro); color:#8a8bff; display:none; }
.qpop .f.error input, .qpop .f.error select, .qpop .f.error textarea{ border-bottom-color:var(--blue); }
.qpop .f.error .err{ display:block; }

/* the audience as one sentence on the window's two columns (2026-10-30, Zelda: the lines must align with the others so the window
   groups at a glance): each word stands inside its own line, at the column's start, and the choice follows it on that line.
   The line belongs to the pair (word and field), so hover, done, focus and error draw on it. */
.qpop .aud{ display:grid; grid-template-columns:1fr 1fr; column-gap:26px; row-gap:0; }
.qpop .aud .ap{ display:flex; align-items:stretch; min-width:0; border-bottom:1px solid rgba(255,255,250,.2); transition:border-color .5s var(--ease); }
.qpop .aud .aw{ display:flex; align-items:center; flex:none; height:40px; padding-right:10px; font-size:var(--t-body); color:rgba(255,255,250,.62); white-space:nowrap; }
.qpop .aud .f{ flex:1; min-width:0; }
.qpop .aud .f select, .qpop .aud .f input{ border-bottom:0; }
.qpop .aud .ap:hover{ border-bottom-color:rgba(255,255,250,.32); }
.qpop .aud .ap:has(.f.done){ border-bottom-color:rgba(255,255,250,.4); }
.qpop .aud .ap:focus-within{ border-bottom-color:#fff; }
.qpop .aud .ap:has(.f.error){ border-bottom-color:var(--blue); }
.qpop .aud .f .err{ top:13px; right:26px; }   /* inside its own line, before the fold mark: the rows sit flush, so above would be the row before */

/* the foot of the window: the send, alone on the right edge line */
.qpop .pfoot{ display:flex; align-items:center; justify-content:flex-end; gap:28px; padding-top:8px; }
.qpop .send{ flex:none; font:500 var(--t-ui)/1 var(--sans); letter-spacing:-.01em; padding:12px 18px 12px 20px; border-radius:999px; cursor:pointer;
  --p:0; color:#0c0c0c; background:hsl(60 3% calc(70% + 14% * var(--p))); border:1px solid transparent;
  display:inline-flex; align-items:center; gap:12px; transition:background .5s var(--ease), color .5s var(--ease), border-color .7s var(--ease); }
.qpop .send svg{ width:15px; height:15px; transition:transform .5s var(--ease); }
.qpop .send:hover{ background:hsl(60 3% calc(76% + 14% * var(--p))); }
.qpop .send.live{ color:#000; background:#f3f3f1; border-color:#f3f3f1; }
.qpop .send.live:hover{ background:#fff; border-color:#fff; }
.qpop .send.live:hover svg{ transform:translate(1px,-1px); }
.qpop .send:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }


/* short laptop windows: the same column, a tighter rhythm, the send in view */
@media (max-height:780px){
  .qpop .comp{ row-gap:18px; padding:14px 0; }
  .qpop .paper{ padding:22px 30px 18px; }
  .qpop .grp{ padding-bottom:11px; }
  .qpop .f input, .qpop .f select, .qpop .f textarea{ height:38px; padding:9px 0 7px; }
  .qpop .f textarea{ min-height:38px; }
  .qpop .aud .aw{ height:38px; }
  .qpop .f.sel::after{ top:14px; }
  .qpop .pfoot{ padding-top:6px; }
  .qpop .send{ padding:11px 17px 11px 19px; }
}

@media (max-width:760px){
  .panel.qpop{ --w:100%; }
  .qpop .comp{ padding:28px 0 40px; }
  .qpop .head{ grid-template-columns:1fr; }
  .qpop .head h1{ white-space:normal; }
  .qpop .lines.two, .qpop .lines.two.dec{ grid-template-columns:1fr; }
  .qpop .aud{ grid-template-columns:minmax(0,1fr); }
  .qpop .pfoot{ flex-direction:column; align-items:stretch; }
  .qpop .send{ justify-content:center; min-height:48px; }
  .qpop .f input, .qpop .f select, .qpop .f textarea, .qpop .f.small input, .qpop .msb{ font-size:16px; }
}

/* the age, a multiple choice (2026-10-30, Zelda): a button on the line shows the chosen range in words, a glass list picks */
.qpop .f.ms{ position:relative; }
.qpop .f.ms select{ display:none; }   /* the form's own field, multiple: the button and the list stand for it */
.qpop .msb{ display:block; width:100%; height:40px; margin:0; padding:10px 24px 8px 0; text-align:left; background:transparent; border:0; border-radius:0; color:#f3f3f1;
  font:inherit; font-size:var(--t-body); line-height:1.4; letter-spacing:-.01em; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; outline:none; }
.qpop .msb.empty{ color:rgba(255,255,250,.42); }
.qpop .f.ms::after, .qpop .f.cb::after{ transition:transform .4s var(--ease), top .4s var(--ease); }
.qpop .f.ms.open::after, .qpop .f.cb.open::after{ transform:rotate(225deg); top:18px; }
.qpop .msl{ position:absolute; z-index:30; left:-12px; top:calc(100% + 6px); min-width:calc(100% + 24px); margin:0; padding:6px; list-style:none; border-radius:14px;
  background:rgba(26,26,25,.9); backdrop-filter:blur(24px) saturate(1.2); -webkit-backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,250,.14), 0 40px 80px -30px rgba(0,0,0,.95), 0 10px 30px -12px rgba(0,0,0,.8);
  font-size:var(--t-body); line-height:1.3; letter-spacing:-.01em; animation:msl-in .32s var(--ease); }
.qpop .msl[hidden]{ display:none; }
@keyframes msl-in{ from{ opacity:0; transform:translateY(-4px); } }
.qpop .msl.up{ top:auto; bottom:calc(100% + 6px); }
.qpop .msl li{ position:relative; padding:8px 14px 8px 32px; border-radius:9px; color:#cfcfcb; cursor:pointer; white-space:nowrap; }
.qpop .msl li:hover, .qpop .msl li.act{ background:rgba(255,255,250,.08); color:#f3f3f1; }
.qpop .msl li::before{ content:""; position:absolute; left:12px; top:13px; width:10px; height:10px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(255,255,250,.36); transition:background .25s var(--ease); }
.qpop .msl li[aria-selected="true"]{ color:#f3f3f1; }
.qpop .msl li[aria-selected="true"]::before{ background:#f3f3f1; box-shadow:none; }
.qpop .msl li.all{ margin-top:4px; }
/* other: picked, it opens a place for the visitor's own words (2026-10-30, Zelda) */
.qpop .msl li .oth{ display:none; }
.qpop .msl li.other[aria-selected="true"] .oth{ display:block; width:100%; margin:8px 0 2px; padding:4px 0 5px; background:transparent; border:0; border-bottom:1px solid rgba(255,255,250,.3); border-radius:0;
  color:#F2E6C9; font:inherit; outline:none; }
.qpop .msl li.other[aria-selected="true"] .oth:focus{ border-bottom-color:#fff; }
.qpop .msl li.other[aria-selected="true"] .oth::placeholder{ color:rgba(255,255,250,.42); }
.qpop .msl li.other[aria-selected="true"] .oth{ min-width:118px; }
.qpop .f.cb .msl li.other{ color:rgba(255,255,250,.62); margin-top:4px; }
.qpop .f.cb .msl li.other::after{ content:""; position:absolute; left:12px; right:12px; top:-3px; height:1px; background:rgba(255,255,250,.08); }
.qpop .f .oth-line, .qpop .f .oth-back{ display:none; }
.qpop .f.writing select{ display:none; }
.qpop .f.writing .oth-line{ display:block; padding-right:26px; }
.qpop .f.writing .oth-back{ display:block; position:absolute; right:0; top:0; width:30px; height:40px; padding:0; border:0; background:transparent; cursor:pointer; }
.qpop .f.writing::after{ transform:rotate(135deg); top:16px; }   /* the fold mark turns to point back to the list */
.qpop .msl.cols:not([hidden]){ display:grid; grid-template-columns:auto auto; grid-template-rows:repeat(6, auto); grid-auto-flow:column; column-gap:2px; align-items:start; }   /* a box sits on its option's first line, never stretched by a neighbour */   /* twelve markets read down, then across */
/* who: a line to write on, the suggestions under it; a suggestion carries a dot when it is what the line says */
.qpop .f.cb input{ padding-right:24px; text-overflow:ellipsis; }
.qpop .f.cb .msl li{ padding-left:30px; }
.qpop .f.cb .msl li::before{ width:5px; height:5px; top:15.5px; left:13px; border-radius:50%; box-shadow:none; background:transparent; }
.qpop .f.cb .msl li[aria-selected="true"]::before{ background:#f3f3f1; }
.qpop .msl li.all::after{ content:""; position:absolute; left:12px; right:12px; top:-3px; height:1px; background:rgba(255,255,250,.08); }

/* after the send: the letter's own close (the page script). The photographed glassine envelope (2336 by 1744 canvas, flap open)
   in two layers with the card between them; the flap, cut from the back layer at the fold, folds down over the card. JS sizes and
   places them; the window sits over them until it condenses. */
.qpop .scene{ position:relative; perspective:1800px; }
.qpop .scene > .paper{ z-index:5; }
.qpop .scene.sealing .paper{ pointer-events:none; }
.qpop .layer{ position:absolute; left:0; top:0; width:100px; height:100px; background:center/100% 100% no-repeat; opacity:0; visibility:hidden; pointer-events:none; transform-style:preserve-3d; }
.qpop .layer.lback{ z-index:1; background-image:url(tex/envelope-back.png); filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.qpop .layer.lfront{ z-index:3; background-image:url(tex/envelope-pocket.png); }
.qpop .layer.lflap{ z-index:1; background-image:url(tex/envelope-back.png); background-position:0 0; background-repeat:no-repeat; }
.qpop .qcard{ position:absolute; left:0; top:0; width:100px; height:70px; z-index:2; opacity:0; visibility:hidden; pointer-events:none; container-type:inline-size;
  background:linear-gradient(90deg,#efefef,#e5e5e5); transform-origin:50% 50%; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; }
.qpop .qcard .q, .qpop .qclone{ font-family:var(--sans); font-weight:400; line-height:1.4; letter-spacing:-.01em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:break-word; }
.qpop .qcard .q{ font-size:4.3cqw; color:#2b2b2b; margin:0 7.5cqw 2.4cqw; max-width:85cqw; opacity:0; }
.qpop .qclone{ position:absolute; left:0; top:0; z-index:6; pointer-events:none; transform-origin:0 0; color:#f3f3f1; }
.qpop .qcard .who{ font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:300; font-size:3.6cqw; letter-spacing:.01em; color:#333; padding:0 0 7.5cqw 7.5cqw; white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .qpop .layer, .qpop .qcard, .qpop .msl{ transition:none!important; animation:none!important; } }
.qpop .q-sent{ position:absolute; z-index:2; left:0; right:0; bottom:clamp(40px, 9vh, 96px); margin:0; display:flex; flex-direction:column; align-items:center; gap:18px;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:300; font-size:var(--t-body); color:var(--fg-mid); opacity:0; visibility:hidden; }
.qpop .q-sent .sent-home{ display:flex; align-items:center; gap:10px; padding:11px 20px; border-radius:999px; border:1px solid rgba(255,255,250,.28); color:var(--fg); text-decoration:none;
  font-family:var(--sans); font-weight:500; font-size:13.5px; letter-spacing:-.005em; transition:background .3s var(--ease), border-color .3s var(--ease); }
.qpop .q-sent .sent-home:hover{ background:rgba(255,255,250,.08); border-color:rgba(255,255,250,.5); }
.qpop .q-sent .sent-home svg{ width:12px; height:12px; } .qpop .q-sent .sent-home svg path{ fill:currentColor; }

/* Submission feedback uses the existing footer; an empty status takes no space. */
.qpop .submit-status{ margin:0; font-size:var(--t-small); line-height:1.5; color:var(--fg-mid); }
.qpop .submit-status:empty, .qpop .form-trap{ display:none; }
.qpop .send:disabled{ cursor:wait; opacity:.65; }