/* The site (2026-10-26, the "quiet" round): the index is a column of short marks, one per project; a project's mark
   opens into one mark per picture; the words wait behind a "+". Used by index.html and project.html (see quiet.js). */
  :root{
    --paper:#ffffff;
    --ink:#0f1216;
    --rule:#d8d6d1;
    --mute:#7b7d80;
    --faint:#b9bbbe;
    --plate:#f1f0ed;
    --live:var(--ink);
    --font:"Archivo","Helvetica Neue",Arial,sans-serif;
    --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
    --gut:clamp(1rem,4vw,2.5rem);
  }
  *{box-sizing:border-box}
  html{-webkit-tap-highlight-color:transparent}
  ::selection{background:rgba(15,18,22,.12)}
  html,body{margin:0;padding:0}
  body{
    background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.4;
    -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
  :focus-visible{outline:2px solid var(--live);outline-offset:3px}
  img{display:block}

  /* ---------- top bar and wordmark, as on the live site ---------- */
  .bar{
    display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem var(--gut);
    font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
  }
  .bar nav{display:flex;align-items:center;gap:1.25rem}
  .bar a:hover{color:var(--live)}
  .gv-mark{display:block;width:230px;font-family:'Archivo',sans-serif;font-weight:300;font-size:14px;color:var(--ink);text-decoration:none;text-transform:none;letter-spacing:0}
  .gv-mark__line{display:flex;justify-content:space-between;line-height:1}
  .gv-mark__gap{flex:0 0 .8em}
  .gv-mark__line + .gv-mark__line > span:first-child{margin-left:.047em}
  .gv-mark__line + .gv-mark__line > span:last-child{margin-right:.046em}
  .gv-mark__flip{display:inline-block;transform:scaleX(-1);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .gv-mark:hover .gv-mark__flip,.gv-mark:focus-visible .gv-mark__flip{transform:scaleX(1)}
  main{flex:1;display:flex;flex-direction:column;min-height:0}
  .n{font-family:var(--mono);font-size:.66rem;font-weight:400;letter-spacing:.04em;color:var(--mute)}
  .k{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
  .plate{background:var(--plate);display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
  .p-stage{position:relative;min-height:0}
  .p-layer{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;display:flex;align-items:flex-end;justify-content:flex-start}
  .p-layer.on{opacity:1}
  .p-layer img{max-width:100%;max-height:100%;width:auto;height:auto;cursor:pointer;pointer-events:none}
  .p-layer.on img,.p-layer.on .plate{pointer-events:auto}
  .p-layer .plate{height:100%;max-width:100%;aspect-ratio:3/2;cursor:pointer}
  /* =================== quiet (&l=quiet): the third round, fewest words ===================
     the index is a column of short marks, one per project, grouped by space alone (no Built / Unbuilt / Research);
     only the project shown has its name beside its mark; inside a project its mark opens into one small mark per
     picture, and the words wait behind a "+" */
  body.l-quiet{height:100vh;overflow:hidden}
  .qt{flex:1;display:grid;grid-template-columns:minmax(11rem,16rem) 1fr;gap:clamp(1.5rem,4vw,4rem);padding:clamp(1rem,3vh,2rem) var(--gut) 1rem;min-height:0}
  .qt-ticks{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:0}
  .qk{display:flex;align-items:center;gap:.9rem;height:1.25rem;color:var(--ink)}
  .qk i{flex:none;display:block;width:.9rem;height:1px;background:var(--faint);transition:width .55s cubic-bezier(.2,.7,.2,1),background .3s}
  .qk i::after{content:"";display:block;height:100%;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  .qk:hover i{width:1.6rem;background:var(--ink)}
  .qk.cur i{width:3rem;height:2px;background:var(--rule)}
  .qk span{font-weight:800;font-size:clamp(1rem,1.2vw,1.15rem);letter-spacing:-.02em;white-space:nowrap;opacity:0;transform:translateX(-.35rem);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
  .qk.cur span,.qk:hover span{opacity:1;transform:none}
  .qt-ticks:hover .qk.cur:not(:hover) span{opacity:0}
  .qp .qt-ticks:hover .qk.cur:not(:hover) span{opacity:1}
  .qk.gs{margin-top:1.3rem}
  .qk.qa{margin-top:1.9rem}
  .qk.qa i{width:auto;height:auto;background:none;font-style:normal;font-family:var(--mono);font-size:.8rem;line-height:1;color:var(--faint)}
  .qk.qa i::after{display:none}
  .qk.qa span{font-weight:300;color:var(--mute)}
  .qk.qa:hover i{color:var(--ink)}
  .qt-stage{min-height:0}
  .qt-stage .p-layer{align-items:center;background:var(--paper);transition:opacity 1.1s ease}
  /* inside a project: under the open mark, one mark per picture; the "+" beside the name holds the words */
  .qp .qk.cur i{background:var(--ink)}
  .qp .qk.cur span{pointer-events:auto}
  .qp-subs{display:flex;flex-direction:column;padding:.45rem 0 .7rem}
  .qs{display:flex;align-items:center;height:1.05rem;padding-left:1.2rem}
  .qs i{display:block;width:.6rem;height:1px;background:var(--faint);transition:width .5s cubic-bezier(.2,.7,.2,1),background .3s}
  .qs:hover i{width:1.1rem;background:var(--ink)}
  .qs.cur i{width:1.8rem;background:var(--ink)}
  .qp-plus{font-family:var(--mono);font-size:.95rem;line-height:1;color:var(--mute);padding:.2rem .3rem;margin-left:.25rem;transition:transform .4s ease,color .3s}
  .qp-plus:hover,.qp.open .qp-plus{color:var(--ink)}
  .qp.open .qp-plus{transform:rotate(45deg)}
  .qp .qt-stage{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M4 14h19M17 8l6 6-6 6' fill='none' stroke='%230f1216' stroke-width='1.2'/%3E%3C/svg%3E") 14 14,e-resize}
  .qp .qt-stage.back{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M24 14H5M11 8l-6 6 6 6' fill='none' stroke='%230f1216' stroke-width='1.2'/%3E%3C/svg%3E") 14 14,w-resize}
  .qp .qt-stage img{cursor:inherit}
  .qp-card{position:absolute;left:0;top:0;bottom:0;width:min(30rem,100%);overflow-y:auto;scrollbar-width:none;background:var(--paper);padding:0 2rem 0 0;opacity:0;transform:translateX(-.8rem);transition:opacity .45s ease,transform .45s ease;pointer-events:none;z-index:3;cursor:auto}
  .qp-card::-webkit-scrollbar{display:none}
  .qp.open .qp-card{opacity:1;transform:none;pointer-events:auto}
  .qp-card .k{display:block;margin-bottom:1.2rem}
  .qp-card .cr p{margin:0 0 .2rem;font-weight:300;font-size:.86rem}
  .qp-card .cr b{font-weight:800}
  .qp-card .tx{margin-top:1.3rem}
  .qp-card .tx p{margin:0 0 .9rem;font-weight:300;font-size:.92rem;line-height:1.55}
  .qp-card .tx p.lede{font-weight:400;font-size:1rem;line-height:1.45}
  /* where the words open (&d=), once the "+" is pressed; either way the pictures keep going while the words are open
     (wheel, keys, a click on the picture, the small marks), and only the × or Esc closes them:
     He kept beside (2026-10-26); fold stays reachable by address.
     fold    the picture closes quickly into one thin line (the intro played backwards), the line rises to the name, the
             words hang under it and the picture opens again out of a line beside them
     beside  the picture steps right; the words stand in the space it leaves, starting on the name's line
     (on a phone the words always come up in the floating card) */
  .qp-card .meta .k{display:block;margin-bottom:1.2rem}
  .qd-fold .qp-card,.qd-beside .qp-card{top:var(--ny,0px);width:21rem;padding:0;transform:none;transition:opacity .4s ease}
  .qd-fold .qp-card{padding-top:1.2rem}
  .qd-fold .qp-card .tx p,.qd-beside .qp-card .tx p{font-size:.88rem}
  .qd-fold.open .qp-card{opacity:0;pointer-events:none}
  .qd-fold.open.shown .qp-card{opacity:1;pointer-events:auto}
  .qd-rule{position:absolute;height:1px;background:var(--ink);opacity:0;z-index:4;pointer-events:none;transition:top .4s cubic-bezier(.65,0,.2,1),left .4s cubic-bezier(.65,0,.2,1),width .4s cubic-bezier(.65,0,.2,1),opacity .3s ease}
  .qd-fold .qt-stage img{transition:clip-path .4s cubic-bezier(.7,0,.2,1)}
  .qd-fold.shown .qt-stage .p-layer{left:24rem}
  .qd-beside .qt-stage .p-layer{transition:opacity 1.1s ease,left .7s cubic-bezier(.2,.7,.2,1)}
  .qd-beside .qp-card{left:var(--cx,0px);width:var(--cw,21rem)}
  .qd-beside.open .qt-stage .p-layer{left:var(--px,24rem)}
  @media (max-width:700px){
    body.l-quiet{height:auto;min-height:100svh;overflow:auto}
    .qt{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:1.6rem;padding-bottom:2rem}
    .qt-stage{order:-1;height:76vw}
    .qt-stage .p-layer{align-items:flex-end}
    .qt-ticks{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:0;padding-bottom:2.4rem}
    .qk{flex-direction:column-reverse;justify-content:flex-start;height:auto;padding:0 .45rem;gap:0}
    .qk i,.qk:hover i{width:1px;height:.9rem}
    .qk.cur i{width:2px;height:2.2rem}
    .qk i::after{width:100%;height:100%;transform:scaleY(var(--p,0));transform-origin:bottom}
    .qk span{position:absolute;left:.45rem;top:calc(100% - 1.6rem);transform:none}
    .qk:hover:not(.cur) span{opacity:0}
    .qt-ticks:hover .qk.cur:not(:hover) span{opacity:1}
    .qk.gs{margin:0 0 0 .9rem}
    .qk.qa{margin:0 0 0 .9rem}
    .qk.qa i{height:auto;width:auto}
    .qk.qa span{display:none}
    .qp-subs{flex-direction:row;align-items:flex-end;padding:0 .3rem}
    .qs{height:auto;padding:0 .22rem}
    .qs i,.qs:hover i{width:1px;height:.55rem}
    .qs.cur i{width:1px;height:1.3rem}
    .qp .qk.cur span{display:flex;align-items:baseline;gap:.5rem}
    .qp .qp-card{position:fixed;left:var(--gut);right:var(--gut);top:auto;bottom:1rem;width:auto;height:auto;max-height:70svh;overflow-y:auto;padding:1.2rem;box-shadow:0 10px 40px rgba(15,18,22,.12)}
  }
  /* the quiet intro (see quietIntro): everything starts hidden, then comes in step by step */
  .qi .gv-mark{opacity:0;transition:opacity .9s ease}
  .qi.qi-name-in .gv-mark{opacity:1}
  .qi:not(.qi-name-in) .gv-mark,.qi:not(.qi-pic-in) .qt-stage{transition:none}
  .qi .qt-ticks > .qk i{width:0;transition:width .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),background .3s}
  .qi .qt-ticks > .qk.qa i{opacity:0;transition:opacity .6s ease .75s}
  .qi.qi-marks-in .qt-ticks > .qk i{width:.9rem}
  .qi.qi-marks-in .qt-ticks > .qk.cur i{width:3rem}
  .qi.qi-marks-in .qt-ticks > .qk.qa i{width:auto;opacity:1}
  .qi .qt-ticks .qk span{opacity:0}
  .qi.qi-name-in .qt-ticks .qk.cur span{opacity:1;transform:none}
  .qi .qt-stage{opacity:0;transition:opacity 1.2s ease}
  .qi.qi-pic-in .qt-stage{opacity:1}
  .qi.qi-line .qt-stage{transition:none}
  .qi-rule{position:absolute;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;z-index:4;transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .9s ease}
  .qi-line-in .qi-rule{transform:scaleX(1)}
  .qi-open .qi-rule{opacity:0}
  @media (max-width:700px){
    .qi .qt-ticks > .qk i{width:1px;height:0;transition:height .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
    .qi.qi-marks-in .qt-ticks > .qk i{width:1px;height:.9rem}
    .qi.qi-marks-in .qt-ticks > .qk.cur i{width:2px;height:2.2rem}
  }
  /* the name keeps its full size on every screen (his note, 2026-10-26: shrunk on phones it read smaller than the
     project title); 230px still fits a 320px phone inside the gutters */

/* the picture in the middle of the space right of the marks (home and projects; 2026-10-26, for wide screens) */
.qt-stage .p-layer{justify-content:center}
/* inside a project: a little smaller than the space, with a caption under it */
.qp .qt-stage .p-layer{padding:3vh 4%}
.qf{margin:0;height:100%;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.qf img{display:block;max-width:100%;max-height:calc(100% - 2.6rem);width:auto;height:auto;cursor:inherit;pointer-events:auto}
.qf figcaption{margin-top:.8rem;max-width:100%;text-align:center;line-height:1.3}
.qf .plate{height:calc(100% - 2.6rem);aspect-ratio:3/2;max-width:100%}
@media (max-width:700px){ .qp .qt-stage .p-layer{padding:0} .qf figcaption{margin-top:.5rem} }

/* home trial ?home=roll (see buildRoll in quiet.js): the page scrolls, the pictures come down it one by one, left,
   right or near the middle, each opening as it arrives; the marks stay put */
body.l-quiet.qh-roll{height:auto;overflow:visible}
.qh-roll .bar{position:fixed;top:0;left:0;z-index:5}
.qh-roll .qt{align-items:start;padding-top:0}
.qh-roll .qt-ticks{position:sticky;top:0;height:100vh}
.qr-flow{padding:22vh 0 40vh;min-width:0;display:flex;flex-direction:column}
.qr-row{display:flex;align-items:flex-start}
.qr-row.l{justify-content:flex-start}
.qr-row.r{justify-content:flex-end}
.qr-row.m{justify-content:center}
.qr-row.two{justify-content:space-between;padding:0 6% 0 2%}
.qr-fig{margin:0;cursor:pointer;flex:none}
.qr-fig img{display:block;width:100%;height:auto}
.qr-par{will-change:transform}
.qr-fig{transform:translateY(8vh);transition:transform 1.6s cubic-bezier(.16,.8,.2,1)}
.qr-fig.in{transform:none}
.in-unveil .qr-fig img,.in-drift .qr-fig img{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1)}
.in-unveil .qr-fig.in img,.in-drift .qr-fig.in img{clip-path:inset(0 0 0 0)}
.in-rise .qr-fig{opacity:0;transition:opacity 1.3s ease,transform 1.6s cubic-bezier(.16,.8,.2,1)}
.in-rise .qr-fig.in{opacity:1}
.qr-end{height:1px}
@media (max-width:700px){
  .qh-roll .bar{position:static}
  .qh-roll .qt{display:flex;flex-direction:column;gap:0;padding-bottom:0}
  .qh-roll .qt-ticks{order:2;position:sticky;top:auto;bottom:0;height:auto;align-self:stretch;margin:0 calc(-1 * var(--gut));background:var(--paper);padding:1rem var(--gut) 2.4rem;z-index:4}
  .qr-flow{padding:4vh 0 20vh}
  .qr-row.two{padding:0}
  .qr-fig{width:min(86%, 100%) !important;margin:0 !important}
  .qr-row.two .qr-fig{width:47% !important}
  .qr-row.two .qr-fig + .qr-fig{margin-top:10vh !important}
}

/* ?home=roll, one at a time (buildRollOne): only one picture on the screen; a scroll fades it out as it rises away and
   the next opens out of its bottom edge somewhere else */
.qo-stage{position:relative;min-height:0;overflow:hidden}
.qo-fig{position:absolute;margin:0;cursor:pointer;transform:translateY(7vh);transition:transform 1.5s cubic-bezier(.16,.8,.2,1)}
.qo-fig.from-up{transform:translateY(-7vh)}
.qo-fig img{display:block;width:100%;height:auto}
.in-unveil .qo-fig img{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.in-unveil .qo-fig.from-up img{clip-path:inset(0 0 100% 0)}
.in-rise .qo-fig{opacity:0;transition:opacity 1.2s ease,transform 1.5s cubic-bezier(.16,.8,.2,1)}
.qo-fig.in{transform:none;opacity:1}
.in-unveil .qo-fig.in img{clip-path:inset(0 0 0 0)}
.qo-fig.out{opacity:0;transition:opacity .7s ease,transform 1s cubic-bezier(.5,0,.2,1);pointer-events:none}
.qo-fig.out.up{transform:translateY(-6vh)}
.qo-fig.out.down{transform:translateY(6vh)}
@media (max-width:700px){
  body.l-quiet.qh-one{height:100svh;overflow:hidden}
  .qh-one .qt-stage,.qh-one .qo-stage{order:-1;height:auto;flex:1}
  .qh-one .qt{display:flex;flex-direction:column;padding-bottom:0}
  .qh-one .qo-stage{touch-action:none}
}
.in-unveil .qo-fig.out img{clip-path:inset(0 0 0 0)}
/* flipping through (a long scroll): the pictures pass quickly, like records */
.qo-flip .qo-fig{transition-duration:.45s}
.qo-flip.in-unveil .qo-fig img{transition-duration:.35s}
.qo-flip.in-rise .qo-fig{transition-duration:.3s,.45s}
.qo-flip .qo-fig.out{transition-duration:.2s,.3s}
.qo-flip.l-quiet{transition-duration:.35s}
.qo-flip.tk-tilt .qk:not(.qa) i{transition-duration:.35s,.4s,.2s}
.qp .qt-stage.none,.qp .qt-stage.none img{cursor:default}
/* beside: the words stand centred top to bottom in the space, wherever the name is (his note, 2026-10-26); when they
   are longer than the space they start at the top and scroll */
.qd-beside .qp-card{top:0;display:flex;flex-direction:column}
.qd-beside .qp-card > :first-child{margin-top:auto}
.qd-beside .qp-card > :last-child{margin-bottom:auto}
@media (max-width:700px){ .qp.qd-beside .qp-card{top:auto;display:block} .qd-beside .qp-card > :first-child{margin-top:0} }

/* About in the quiet style (about.html, buildAbout in quiet.js): his words where a project's words stand, the GCV mark
   where the picture would be; "Get in touch +" turns the mark into the form */
.qab{--ring:#c9c6c0}
.qk.qa.cur span{color:var(--ink);font-weight:800;opacity:1;transform:none}
.qk.qa.cur i{color:var(--ink)}
.qab-room{position:relative;min-height:0;display:grid;grid-template-columns:21rem 1fr;gap:clamp(2rem,5vw,5rem)}
.qab-words{align-self:center;max-height:100%;overflow-y:auto;scrollbar-width:none}
.qab-words::-webkit-scrollbar{display:none}
.qab-words .k{margin:0 0 1.2rem}
.qab-words h1{margin:0 0 .5rem;font-weight:800;font-size:clamp(1rem,1.2vw,1.15rem);letter-spacing:-.02em;line-height:1.25}
.qab-words .med{margin:0 0 1.3rem;font-weight:300;font-size:.92rem;line-height:1.45}
.qab-words .text{margin:0;font-weight:300;font-size:.88rem;line-height:1.55}
.qab-side{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.qab-mark{margin:0;width:min(46vh,70%);aspect-ratio:1;transform-origin:center;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.qab-mark canvas{display:block;width:100%;height:100%}
.qab-touch{margin-top:2.2rem;display:flex;align-items:center;gap:.2rem;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);transition:color .3s}
.qab-touch:hover{color:var(--ink)}
.qab-touch .qp-plus{font-size:.95rem}
.qab.open .qab-touch .qp-plus{transform:rotate(45deg);color:var(--ink)}
/* open (desktop, placed by buildAbout): the mark steps left, smaller if it has to; a topic word stands beside each of its
   three right-hand stitches (top right, right, bottom right: picked in ink, the others faint); the fields to their right */
.qab-mark{position:relative;z-index:1}
.qab-desk{position:absolute;inset:0;pointer-events:none}
.qab-desk .choices{display:contents}
.qab-desk .choice,.qab-fields{position:absolute;left:0;top:0;opacity:0;transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .7s ease,color .2s}
.qab.open .qab-desk .choice,.qab.open .qab-fields{opacity:1;pointer-events:auto}
.qab-fields{width:15.5rem}
.qab-desk .choice{padding:.2rem 0;font:300 .95rem/1.2 var(--font);color:var(--mute);white-space:nowrap}
.qab-desk .choice:hover,.qab-desk .choice:focus-visible{color:var(--ink)}
.qab-desk .choice[aria-pressed="true"]{color:var(--ink);font-weight:800}
.qab-touch{position:relative;z-index:1;transition:color .3s,transform .9s cubic-bezier(.65,0,.35,1)}
.qab-desk .fields{margin:0}
.qab-desk .field{display:block;margin-bottom:1.1rem}
.qab-desk .field .k{display:block}
.qab-desk .field input,.qab-desk .field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:.35rem 0 .45rem;font:300 .95rem/1.3 var(--font);color:var(--ink);caret-color:var(--ink);outline:none;transition:border-color .2s}
.qab-desk .field textarea{resize:none;min-height:3.4rem}
.qab-desk .field input::placeholder,.qab-desk .field textarea::placeholder{color:var(--faint)}
.qab-desk .field input:focus,.qab-desk .field textarea:focus{border-bottom-color:var(--ink)}
.qab-desk .field input[aria-invalid="true"]{border-bottom-color:var(--ink)}
.qab-desk .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qab-desk .send{position:relative;display:inline-flex;align-items:center;gap:.6rem;margin-top:.4rem;padding:.55rem 0;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);transition:color .2s}
.qab-desk .send:hover:not(:disabled),.qab-desk .send:focus-visible{color:var(--ink)}
.qab-desk .send .arrow{width:22px;height:10px;fill:none;stroke:currentColor;stroke-width:1.1}
.qab-desk .send:disabled{opacity:.4;cursor:default}
.qab-desk .send__label{transition:opacity .2s ease}
.qab-desk .send__logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;opacity:0;line-height:0;color:var(--mute);transition:opacity .2s ease;pointer-events:none}
.qab-desk .send__logo .ring{stroke:var(--mute);stroke-dasharray:100;stroke-dashoffset:0}
.qab-desk .send__logo .st{stroke:currentColor;transition:opacity .25s ease}
.qab-desk .send.loading .send__label,.qab-desk .send.loading .arrow{opacity:0}
.qab-desk .send.loading .send__logo{opacity:1;color:var(--ink)}
.qab-desk .send.loading .st{opacity:0}
.qab-desk .send.loading .st.on{opacity:1}
.qab-desk .send.loading:disabled{opacity:1}
.qab-desk .status{margin:.6rem 0 0;min-height:1.2em}
.qab-desk .status.error{color:var(--ink)}
.qab-desk .done{display:none}
.qab-desk .done h2{margin:0;font-weight:800;font-size:clamp(1.2rem,1.6vw,1.5rem);letter-spacing:-.02em}
.qab-desk .done p{margin:.6rem 0 0;font-weight:300;color:var(--mute)}
.qab-desk.sent .choice,.qab-desk.sent .details{display:none}
.qab-desk.sent .done{display:block}
@media (max-width:700px){
  .qab{display:flex;flex-direction:column;gap:1.8rem}
  .qab .qt-ticks{order:-1;padding-bottom:2.4rem}
  .qab-room{grid-template-columns:1fr;gap:2.4rem}
  .qab-words{overflow:visible;max-height:none}
  .qab-mark{width:min(48vw,14rem)}
  .qab-desk{position:static;width:100%;display:none;pointer-events:auto}
  .qab.open .qab-desk{display:block;margin-top:1.6rem}
  .qab-desk .choices{display:flex;gap:1.4rem;margin-bottom:1.6rem}
  .qab-desk .choice,.qab-fields{position:static;opacity:1;transform:none !important}
  .qab-fields{width:100%}
  .qab-touch{order:2}
  .qab-side{padding-bottom:3rem}
}
@media (max-width:700px){ .qab .qk.qa.cur span{display:block} }
.qab-words{transition:opacity .6s ease}
.qab.open.full .qab-words{opacity:0;pointer-events:none}
.qab-mark{pointer-events:none}
/* "Get in touch" a short step under the ring itself (the ring is about two thirds of the mark's square) */
.qab-touch{margin-top:calc(2rem - min(46vh,70%) * .15)}
@media (max-width:700px){ .qab-touch{margin-top:calc(1.6rem - min(48vw,14rem) * .15)} }

/* test (2026-10-26): from a home picture into its project without a reload (into() in quiet.js): the picture flies
   from its place on the home to its place in the project; the home fades out under it and the project fades in */
.q-fly{position:fixed;z-index:60;margin:0;pointer-events:none;transform-origin:0 0;will-change:transform}
.q-fly.go{transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
.q-old{position:fixed;z-index:50;pointer-events:none;transition:opacity .55s ease}
.q-old.out{opacity:0}
.q-old.soft{transition:opacity .6s ease}
.q-old > .qt{height:100%}
main{transition:opacity .7s ease .35s}
main.q-away{opacity:0;transition:none}

/* the project's pictures: two small arrows at the sides in place of the arrow-shaped pointer */
.qp .qt-stage,.qp .qt-stage.back,.qp .qt-stage img{cursor:default}
.qp .qt-stage img{cursor:pointer}
/* up and down (test, &nav= in quiet.js): the pictures go by vertically. chev: a thin chevron centred over the picture
   area and one under it; hint: "Scroll" over a short line drawing down, under the picture, until the first step */
.qv{position:absolute;left:0;right:0;margin:0 auto;z-index:2;width:4rem;height:2rem;display:flex;align-items:center;justify-content:center;color:var(--faint);transition:color .25s,opacity .4s,left .7s cubic-bezier(.2,.7,.2,1)}
.qv svg{display:block;fill:none;stroke:currentColor;stroke-width:1;overflow:visible}
.qv:hover,.qv:focus-visible{color:var(--ink)}
.qv.up{top:-.6rem}
.qv.dn{bottom:-.9rem}
.qv.off{opacity:0;pointer-events:none}
.qd-beside.open .qv{left:var(--px,24rem)}
.qnav-chev .qt-stage .p-layer{padding-top:calc(3vh + 1.4rem);padding-bottom:calc(3vh + 1.4rem)}
.qv-hint{position:absolute;left:0;right:0;bottom:-1rem;margin:0 auto;width:6rem;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--mute);transition:opacity .6s ease,left .7s cubic-bezier(.2,.7,.2,1)}
.qv-hint i{display:block;width:1px;height:1.6rem;background:currentColor;transform-origin:top;animation:qv-draw 2.4s cubic-bezier(.7,0,.2,1) infinite}
@keyframes qv-draw{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.qv-hint:hover{color:var(--ink)}
.qv-hint.off{opacity:0;pointer-events:none}
.qd-beside.open .qv-hint{left:var(--px,24rem)}
.qp.qnav-hint .qt-stage .p-layer{padding-bottom:calc(3vh + 2.6rem)}
@media (max-width:700px){ .qv{display:none} .qv-hint{display:none} }

/* phone project pages stand like the home (his note, 2026-10-26: "in mobile version is inconsistent"): one screen tall,
   the picture centred in the space above, the marks and the name at the foot in the same place as on the home */
@media (max-width:700px){
  body.l-quiet.qh-proj{height:100svh;overflow:hidden}
  .qh-proj .qp.qt{display:flex;flex-direction:column;padding-bottom:0}
  .qh-proj .qp .qt-stage{order:-1;height:auto;flex:1;min-height:0}
  .qh-proj .qp .qt-stage .p-layer{align-items:center}
}

/* a dark project (projects.js "dark: true", trial 2026-10-29): the page eases into night while it is shown.
   Only the ground, words and marks change; pictures keep their own colours and drawings their own white */
body.l-quiet{transition:background-color 1.1s ease,color 1.1s ease}
body.q-night{--paper:#0c0c0e;--ink:#ecebe7;--rule:#3b3b3e;--mute:#8e8e8c;--faint:#4c4c4f;--plate:#1a1a1c;--live:#ecebe7}
body.q-night ::selection{background:rgba(236,235,231,.18)}
body.q-night .qo-fig img[src$=".svg"],body.q-night .qo-fig img[src$=".png"],body.q-night .p-layer img[src$=".svg"],body.q-night .p-layer img[src$=".png"]{background:#fff}

/* trial ?tick= (2026-10-29): other systems for the ticks. sign: a length of its own per project; tilt: leaning on a
   diagonal, the current one straight; dot: dots, the current one stretched into the line */
.tk-sign .qk:not(.qa) i{width:var(--len)}
.tk-sign .qk:not(.qa):hover i{width:calc(var(--len) + .5rem)}
.tk-sign .qk.cur:not(.qa) i{width:calc(var(--len) + 2.2rem);height:1px;background:var(--rule)}
/* tilt, like the arm of a record player: above the current tick they lean up, below it they lean down, it lies flat */
.tk-tilt .qk:not(.qa) i{transform:rotate(-34deg);transform-origin:left center;transition:width .55s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),background .3s}
.tk-tilt .qk.cur ~ .qk:not(.qa) i{transform:rotate(34deg)}
.tk-tilt .qk:not(.qa):hover i{transform:rotate(-14deg)}
.tk-tilt .qk.cur ~ .qk:not(.qa):hover i{transform:rotate(14deg)}
.tk-tilt .qk.cur:not(.qa) i{transform:none}
/* fan: the lean grows with the distance from the current tick (--d, set by quiet.js) */
.tk-fan .qk:not(.qa) i,.tk-fan .qk.cur ~ .qk:not(.qa) i{transform:rotate(calc(var(--d,0) * 11deg))}
.tk-fan .qk:not(.qa):hover i,.tk-fan .qk.cur ~ .qk:not(.qa):hover i{transform:rotate(calc(var(--d,0) * 5deg))}
.tk-fan .qk.cur:not(.qa) i{transform:none}
.tk-dot .qk:not(.qa) i{width:4px;height:4px;border-radius:2px;transition:width .6s cubic-bezier(.2,.7,.2,1),height .3s,background .3s,border-radius .3s}
.tk-dot .qk:not(.qa):hover i{width:4px;background:var(--ink)}
.tk-dot .qk.cur:not(.qa) i{width:3rem;height:2px;border-radius:1px}
.tk-dot .qk:not(.qa) i::after{border-radius:inherit}
@media (max-width:700px){
  .tk-sign .qk:not(.qa) i,.tk-sign .qk:not(.qa):hover i{width:1px;height:var(--len)}
  .tk-sign .qk.cur:not(.qa) i{width:1px;height:calc(var(--len) + 1.3rem)}
  .tk-tilt .qk:not(.qa) i{transform:rotate(-30deg);transform-origin:bottom center}
  .tk-tilt .qk.cur ~ .qk:not(.qa) i{transform:rotate(30deg)}
  .tk-tilt .qk:not(.qa):hover i{transform:rotate(-12deg)}
  .tk-tilt .qk.cur ~ .qk:not(.qa):hover i{transform:rotate(12deg)}
  .tk-fan .qk:not(.qa) i,.tk-fan .qk.cur ~ .qk:not(.qa) i{transform:rotate(calc(var(--d,0) * 9deg))}
  .tk-dot .qk:not(.qa) i,.tk-dot .qk:not(.qa):hover i{width:4px;height:4px}
  .tk-dot .qk.cur:not(.qa) i{width:2px;height:2.2rem}
}

/* trial ?words=label|lede|mono: how the project words behind the "+" are set (his words unchanged) */
.wd-label .qp-card .cr p{display:grid;grid-template-columns:5.6rem 1fr;align-items:baseline;margin:0 0 .3rem;font-size:.84rem;font-weight:300}
.wd-label .qp-card .cr b{font-family:var(--mono);font-weight:400;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.wd-label .qp-card .tx{margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.wd-label .qp-card .tx p{font-size:.84rem;line-height:1.62;font-weight:300;margin-bottom:1rem}
.wd-label .qp-card .tx p.lede{font-size:1.02rem;line-height:1.45;font-weight:400}
.wd-lede .qp-card .cr p{display:inline;margin:0;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:400}
.wd-lede .qp-card .cr b{display:none}
.wd-lede .qp-card .cr p + p::before{content:"/";margin:0 .15em 0 .55em;color:var(--faint)}
.wd-lede .qp-card .meta .k{margin-bottom:.5rem}
.wd-lede .qp-card .tx{margin-top:2rem}
.wd-lede .qp-card .tx p{font-size:.8rem;line-height:1.7;font-weight:300}
.wd-lede .qp-card .tx p:first-child{font-size:1.1rem;line-height:1.38;font-weight:300;letter-spacing:-.012em;margin-bottom:1.6rem}
.wd-mono .qp-card .cr p{font-family:var(--mono);font-size:.7rem;font-weight:400;margin:0 0 .25rem}
.wd-mono .qp-card .cr b{font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-right:.3em}
.wd-mono .qp-card .tx p{font-family:var(--mono);font-size:.74rem;line-height:1.75;font-weight:400;letter-spacing:-.01em}
.wd-mono .qp-card .tx p.lede{font-weight:500}
.wd-plain .qp-card .cr{display:none}
.wd-plain .qp-card .tx{margin-top:1.4rem}
.wd-plain .qp-card .tx p{font-size:.92rem;line-height:1.6;font-weight:300;margin-bottom:1.1rem}
.wd-first .qp-card .tx p{font-size:.84rem;line-height:1.62;font-weight:300;color:var(--mute)}
.wd-first .qp-card .tx p .s1{color:var(--ink);font-weight:400}
/* minimal credits (his note, 2026-10-29: "something more minimalist" than his reference): bare (only the values, small
   and grey, no names), line (the values on one small grey line), tail (the credits after his paragraphs, small and grey) */
.wd-bare .qp-card .cr b,.wd-line .qp-card .cr b{display:none}
.wd-bare .qp-card .cr p{margin:0 0 .15rem;font-size:.8rem;font-weight:300;color:var(--mute)}
.wd-line .qp-card .cr p{display:inline;margin:0;font-size:.8rem;font-weight:300;color:var(--mute)}
.wd-line .qp-card .cr p + p::before{content:"\00B7";margin:0 .5em;color:var(--faint)}
.wd-bare .qp-card .tx,.wd-line .qp-card .tx{margin-top:1.6rem}
.wd-tail .qp-card .cr{margin-top:.6rem}
.wd-tail .qp-card .cr p{margin:0 0 .15rem;font-size:.76rem;font-weight:300;color:var(--mute)}
.wd-tail .qp-card .cr b{font-weight:300;color:var(--faint);margin-right:.5em}
.wd-bare .qp-card .tx p,.wd-line .qp-card .tx p,.wd-tail .qp-card .tx p{font-size:.84rem;line-height:1.62;font-weight:300}
/* mix (his pick): label's credits (names in small grey mono capitals, values beside them) over first's text (the first
   sentence of each paragraph in full ink, the rest grey) */
.wd-mix .qp-card .cr p{display:grid;grid-template-columns:5.6rem 1fr;align-items:baseline;margin:0 0 .3rem;font-size:.84rem;font-weight:300}
.wd-mix .qp-card .cr b{font-family:var(--mono);font-weight:400;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.wd-mix .qp-card .tx{margin-top:1.6rem}
.wd-mix .qp-card .tx p{font-size:.84rem;line-height:1.62;font-weight:300;color:var(--mute)}
.wd-mix .qp-card .tx p .s1{color:var(--ink);font-weight:400}

/* under (mockup, 2026-10-29): + turns the column of lines round until the project is at the top (the ones above go
   round to the bottom), and the words open softly under the name, right of the lines. The picture stays exactly as it is */
@media (min-width:701px){
  .qu-ghost{position:absolute;margin:0;pointer-events:none}
  .qd-under .qt-ticks.qu-top{justify-content:flex-start}
  .qd-under .qt-stage .p-layer{transition:opacity 1.1s ease,transform 1s cubic-bezier(.45,.05,.2,1)}
  .qd-under.open .qt-stage .p-layer{transform:translateX(var(--sh,0px))}
  .qd-under .qp-card{left:var(--cx,0px);width:var(--cw,18rem);top:var(--ny,0px);bottom:0;padding:0 0 2rem;transform:translateY(.9rem);
    transition:opacity .35s ease,transform .45s ease}
  .qd-under.open .qp-card{transform:none;transition:opacity 1s cubic-bezier(.4,0,.2,1) .3s,transform 1.3s cubic-bezier(.16,1,.3,1) .3s}
  .qd-under .qp-card .tx p{font-size:.84rem}
  .qd-under.open.hv-top .qt-ticks{z-index:5}
  .qd-under.open.hv-top .qk:not(.cur) span{background:var(--paper);padding:.15rem .6rem .15rem 0;margin-right:-.6rem;box-shadow:.9rem 0 1rem -.2rem var(--paper)}
  .qd-under.open.hv-none .qk:not(.cur):not(.qa) span{display:none}
}

/* trial ?back=sheet|sleeve|crate|strip: a project's side B, all its pictures at once; the record turns over to it */
.qs-x{display:flex;align-items:center;height:1.05rem;margin-top:.35rem;padding:0 0 0 1.2rem;line-height:0}
.qs-x svg{display:block;fill:none;stroke:var(--faint);stroke-width:1;transition:stroke .3s,fill .3s}
.qs-x .h{fill:var(--faint);stroke:none;transition:fill .3s}
.qs-x:hover svg{stroke:var(--ink)}
.qs-x:hover .h{fill:var(--ink)}
.qb-show .qs-x svg{stroke:var(--ink)}
.qb-show .qs-ring .o,.qb-show .qs-square .o{fill:var(--ink)}
.qs-x .d{fill:var(--faint);stroke:none;transition:fill .3s}
.qs-x:hover .d,.qb-show .qs-x .d{fill:var(--ink)}
.qs-sleeve .o{fill:var(--paper)}
.qs-sleeve .r{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.qs-sleeve:hover .r,.qb-show .qs-sleeve .r{transform:translateX(2px)}
.qb-show .qs-half .o{fill:var(--ink)}
.qb-show .qs-ring .h,.qb-show .qs-square .h{fill:var(--paper)}
.qb-show .qp-subs .qs i{background:var(--faint);width:.6rem}
/* stack family: each line moves on its own */
.qs-x path{transform-box:fill-box;transition:transform .55s cubic-bezier(.2,.7,.2,1),stroke .3s}
.qs-turn path{transform-origin:center}
.qb-show .qs-turn path{transform:translate(var(--x),var(--y)) rotate(90deg) scaleX(.8)}
.qs-turn:hover:not(:focus-visible) path{transition-delay:calc(var(--i) * 40ms)}
.qs-lean path{transform-origin:50% 100%;transform:rotate(22deg)}
.qs-lean:hover path{transform:rotate(14deg)}
.qb-show .qs-lean path{transform:none}
.qb-show .qs-spread path{transform:translateX(calc(var(--i) * 1.5px))}
.qs-spread:hover path{transform:translateX(calc(var(--i) * .5px))}
.qs-stack path,.qs-stack2 path,.qs-stack4 path,.qs-stackl path{transition:transform .5s cubic-bezier(.2,.7,.2,1),stroke .3s}
.qs-stack:hover path,.qs-stack4:hover path{transform:translateX(calc(var(--i) * -.6px))}
.qs-stackl:hover path{transform:translateX(calc(var(--i) * .6px))}
.qb-show .qs-stack path,.qb-show .qs-stack4 path{transform:translateX(calc(var(--i) * -4px))}
.qb-show .qs-stackl path{transform:translateX(calc(var(--i) * 4px))}
.qb-show .qs-stack2 path{transform:translateX(calc(var(--i) * -10px))}
@media (max-width:700px){ .qs-x{margin:0 0 0 .35rem;padding:0;height:auto;align-self:flex-end} }
/* to side B and back (his note 2026-11-01: no "wall turning"): nothing turns; the picture on show glides to (or from)
   its place on the sheet while the sheet fades in (or out) round it and the picture's own layer fades */
.qb-show .qt-stage .p-layer.on{opacity:0;pointer-events:none;transition:opacity .35s ease}
.qb-show .qt-stage .p-layer.on img{pointer-events:none}
.qb{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease;overflow:hidden}
.qb-show .qb{opacity:1;pointer-events:auto;transition:opacity .55s ease .08s}
.qb-pick .qt-stage .p-layer{transition:none!important}
.qb-fly{position:fixed;z-index:60;margin:0;pointer-events:none;transform-origin:0 0;object-fit:contain;transition:transform .75s cubic-bezier(.3,0,.15,1)}
.q-night .qb-fly.dr{background:#fff}
.qb-show .qt-stage{cursor:default}
.qb-box{position:absolute;inset:0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.qb-f{position:absolute;margin:0;cursor:pointer;transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.qb-f img{display:block;width:100%;height:100%;object-fit:contain}
.q-night .qb-f.dr img{background:#fff}
.qb-sleeve .qb-f{outline:1px solid var(--rule);outline-offset:0}
.qb-sleeve .qb-f img{padding:7%;box-sizing:border-box}
.qb-sleeve .qb-f .k{position:absolute;left:0;top:100%;margin-top:.45rem;line-height:1}
.qb-crate .qb-f{transform-origin:left center;transform:perspective(2400px) rotateY(58deg);box-shadow:0 0 0 1px var(--paper)}
.qb-crate .qb-f:hover{transform:perspective(2400px) rotateY(0deg) translateY(-3%);z-index:99!important}

/* one vertical line (&bmark=line|grow, default line): the ticks go, all the pictures come */
.qs-line i,.qs-grow i{display:block;width:1px;height:.8rem;background:var(--faint);transform-origin:50% 100%;transition:background .3s,transform .6s cubic-bezier(.2,.7,.2,1)}
.qs-line:hover i,.qs-grow:hover i,.qb-show .qs-line i,.qb-show .qs-grow i{background:var(--ink)}
.bm-line .qs,.bm-grow .qs{transition:opacity .35s ease,height .55s cubic-bezier(.2,.7,.2,1)}
.qb-show .bm-line .qs,.qb-show .bm-grow .qs{opacity:0;pointer-events:none}
.qb-show .bm-line .qs-line i{transform:translateY(var(--u,0))}
.qb-show .bm-grow .qs-grow i{transform:scaleY(var(--g,1))}
.qb-ret .bm-line .qs,.qb-ret .bm-grow .qs{transition-delay:.15s}
@media (max-width:700px){
  .qs-line i,.qs-grow i{height:.55rem}
  .qb-show .bm-line .qs-line i{transform:none}
  .qb-show .bm-grow .qs-grow i{transform:scaleY(2.4)}
}

/* walk-through notes: a short note with each picture, quiet grey, small; gone while the words or side B show */
.qn{margin:0;font-size:.8rem;line-height:1.5;color:var(--mute);font-weight:400;text-align:left;opacity:0;animation:qn-in .8s ease .5s forwards}
@keyframes qn-in{to{opacity:1}}
.qn-side{position:absolute;left:0;top:0;pointer-events:none}
.qt.open .qn,.qb-show .qn{opacity:0!important;animation:none;transition:opacity .3s}
.qp .qt-ticks{z-index:3}
.qt.open .qt-stage .p-layer{translate:none!important}
.qc-move .qt-stage .p-layer{transition:opacity 1.1s ease,left .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1)}
.qf-low img{max-height:calc(100% - 5.2rem)}
@media (max-width:700px){ .qn{font-size:.75rem} }