/* Round 6: mock 18 played with, plus the About page rebuilt. Loads after k4.css. Body needs classes "q q6". */

/* ---- header: plain mono text ---- */
.q6-hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:18px 40px;border-bottom:1px solid var(--faint);font:500 13px/1.2 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;background:rgba(255,255,255,.72)}
.q6-hdr .brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;text-decoration:none;color:var(--muted)}.q6-hdr .brand b{color:var(--ink);font-weight:700}
.q6-hdr nav{display:flex;gap:36px}.q6-hdr nav a{padding:6px 0;color:var(--muted);text-decoration:none;transition:color .15s}
.q6-hdr nav a:hover,.q6-hdr nav a:focus-visible{color:var(--orink)}.q6-hdr nav a[aria-current=page]{color:var(--or)}
.q6-hdr .end{display:flex;align-items:center;justify-content:flex-end;gap:26px}
.q6-hdr .ask-link{padding:6px 0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink);cursor:pointer}.q6-hdr .ask-link span{color:var(--or);margin-right:4px}.q6-hdr .ask-link:hover{color:var(--orink)}
.q6-hdr .heart{font-size:22px;color:rgba(27,27,27,.4)}
/* sticky (2026-09-30): the header stays at the top on / and /about. Its #nav wrapper is only as tall as the header, which leaves sticky no room,
   so the wrapper steps out of layout. Page content is isolated so dragged cards (inline z-index that keeps climbing) can't rise above it.
   z 50 sits under the Ask panel (60), lightbox (300), tools-pad card and cursor label (2147483646+) */
:root{--hdr-h:65px}html:has(.q6-hdr){scroll-padding-top:var(--hdr-h)}
div:has(>.q6-hdr){display:contents}
body.q6>main,body.q6>#foot{isolation:isolate}
.q6-hdr{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.94);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);border-bottom-color:transparent;transition:border-color .2s,box-shadow .2s}
.q6-hdr.is-scrolled{border-bottom-color:var(--faint);box-shadow:0 6px 18px -12px rgba(20,30,60,.35)}
/* contact group on the right (replaced the heart, 2026-09-30): LinkedIn icon, email as text, Resume. Light, muted, same mono as the nav */
.q6-hdr .brand{justify-self:start}
.q6-hdr .hc{display:flex;align-items:center;gap:22px;font-weight:400}
.q6-hdr .hc a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted);text-decoration:none;transition:color .15s}
.q6-hdr .hc a:hover,.q6-hdr .hc a:focus-visible{color:var(--orink)}
.q6-hdr .hc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.q6-hdr .hc-m .hc-t{text-transform:none;letter-spacing:.02em}
.q6-hdr .hc-s{display:none}
@media (max-width:1000px){.q6-hdr{padding:16px 24px}.q6-hdr .brand span{display:none}.q6-hdr .hc{gap:16px}}
@media (max-width:900px){.q6-hdr .hc-m .hc-t{display:none}.q6-hdr .hc-s{display:inline}}
/* phones: one compact row (name, nav, contacts); every link gets a 44px tap area */
@media (max-width:760px){
  :root{--hdr-h:52px}
  .q6-hdr{grid-template-columns:auto auto auto;justify-content:space-between;gap:6px;padding:4px 10px;font-size:11px;letter-spacing:.03em}
  .q6-hdr .hc{gap:0}
  .q6-hdr .hc a,.q6-hdr nav a{min-width:44px;min-height:44px;justify-content:center}
  .q6-hdr .hc-m,.q6-hdr .hc-r{padding:0 5px}
  .q6-hdr .brand{min-height:44px;align-items:center}
  .q6-hdr nav{gap:4px}.q6-hdr nav a{display:inline-flex;align-items:center;padding:0}
}
@media (max-width:370px){.q6-hdr{padding:4px 6px;font-size:10px;letter-spacing:.02em;gap:2px}.q6-hdr nav{gap:0}}

/* ---- hero: no cork-board picture, a bigger exploded view ---- */
.q6 .q-pinpic{display:none}
.q6 .q-lan{margin-top:0}
.q6 .q-lists .note6{margin:-2px 0 8px;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- hero stage: all blueprint (grid + roads, no text), cards on top that can be moved ---- */
.q6-stage{position:relative;height:calc(100vh - var(--hdr-h));min-height:640px;display:flex;align-items:center;justify-content:center;gap:22px;padding:0 24px;overflow:hidden;background:var(--navy)}
.q6-stage .bg{position:absolute;inset:0}.q6-stage .bg .cmap{height:100%;--mbg:var(--navy);--inner:var(--navy);--mpin:var(--navy)}.q6-stage .bg svg{width:100%;height:100%;display:block}
.q6-stage .q6-c{position:relative;left:auto;top:auto;z-index:3;flex:none}
.q6-stage .q-note{width:340px;padding:24px 26px 20px}
.q6-stage .q-note .q-name{font-size:42px}.q6-stage .q-note .q-hl{font-size:19px;margin-top:10px}.q6-stage .q-note .q-st{font-size:12.5px;margin-top:10px}
.q6-stage .q-note .q-soc{margin-top:12px}.q6-stage .q-note .q-next{margin-top:14px;padding-top:12px}.q6-stage .q-note .q-next span{font-size:14px}
.q6-stage .q-xcard{width:clamp(560px,50vw,860px);transform:rotate(var(--r,1deg))}
.q6-stage .q-xcard,.q6-stage .q-xcard .bpp,.q6-stage .q-xcard svg{overflow:visible}
.q6-list{width:300px;background:#fff;border:1px solid var(--faint);padding:18px 20px 8px;box-shadow:0 16px 30px rgba(8,20,70,.3);transform:rotate(var(--r,-1deg))}
.q6-list .lead{font:500 15px/1.4 Inter,sans-serif;margin:0 0 4px}
.q6-list ul{list-style:none;margin:0;padding:0}.q6-list li{display:flex;gap:10px;padding:9px 0;border-top:1px dotted rgba(27,27,27,.38);font:400 13.5px/1.45 Inter,sans-serif;color:rgba(27,27,27,.86)}.q6-list li>span:first-child{color:var(--orink);flex:none}
.q6-askbtn{margin-left:14px;padding:5px 14px;border:1px solid rgba(27,27,27,.3);border-radius:99px;background:rgba(255,255,255,.7);font:500 12px/16px Inter,system-ui,sans-serif;cursor:pointer;color:var(--ink)}.q6-askbtn span{color:var(--or);margin-right:5px}.q6-askbtn:hover{border-color:var(--or);color:var(--orink)}
.q6-stage .q-note .q6-mail{display:inline-block;max-width:100%;margin-top:10px;font:500 15px/1.4 'JetBrains Mono',monospace;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(27,27,27,.35);text-underline-offset:3px;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}.q6-stage .q-note .q6-mail:hover{color:var(--orink);text-decoration-color:currentColor}
@media (max-width:1200px){.q6-stage{flex-wrap:wrap;height:auto;padding:24px}.q6-stage .q-xcard{width:min(100%,860px)}}
@media (max-width:999px){.q6-stage{display:grid;gap:22px;padding:18px}.q6-stage .q6-c{width:auto!important}}
/* the map: exactly one viewport tall */
.q6-mapsec{position:relative;overflow:hidden;background:var(--navy)}.q6-mapsec .cmap{height:100%;--mbg:var(--navy);--inner:var(--navy);--mpin:var(--navy)}.q6-mapsec svg{display:block;width:100%;height:100%}

/* ---- square pills over full-size tiles (2026-09-30): separate small-radius buttons in a row; the active one filled in orange ink (white on #ed3801 is 4.1:1,
   short of AA for 15px text; --orink is 5.7:1), a blue focus ring so it shows on the orange; the grid is 80% of the screen ---- */
.q6 .q-sheet .q-w{max-width:none;width:80vw;padding:0}
.q6-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.q6-tab{padding:10px 18px;border:1px solid #dedede;border-radius:4px;background:transparent;color:var(--muted);font:500 15px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s}
.q6-tab:hover{color:var(--orink);border-color:var(--or)}
.q6-tab[aria-selected=true]{border-color:var(--orink);background:var(--orink);color:#fff}
.q6-tab:focus-visible{outline:2px solid #0e3b8f;outline-offset:2px}
.q6-panel .q-tiles{gap:44px 28px}
.q6-panel .q-tiles.bento{--row:clamp(420px,44vw,820px);grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}.q6-panel .bento .tile .m{aspect-ratio:auto;height:var(--row)}
.q6-panel .bento .tile[data-narrow=true] .q-cap2{flex-direction:column;gap:8px}.q6-panel .bento .tile[data-narrow=true] .meta{text-align:left;max-width:none}
.q6-panel .tile .tg2,.q6-panel .tile.side .meta span{transition:color .15s}.q6-panel .tile[data-id]:hover .tg2,.q6-panel .tile.side:hover .meta span{color:var(--or)}
.q6-panel .q-cap2 .meta .soon{display:inline-block;width:auto;margin-bottom:6px;padding:2px 8px;border:1px solid #c9d0da;border-radius:999px;color:#7a8698;font-size:11px;letter-spacing:.08em}
/* side projects: screenshots are landscape (1.3 to 2:1), so each sits whole on a soft paper panel; scale-down = contain but never upscaled past natural size */
.q6-panel .tile.side .m{background:#f2f0eb;aspect-ratio:4/3}.q6-panel .tile.side .m img{--pad:clamp(10px,2.2vw,22px);inset:var(--pad);width:calc(100% - 2*var(--pad));height:calc(100% - 2*var(--pad));object-fit:scale-down;display:block}
@media (max-width:760px){.q6-panel .q-tiles.bento{grid-template-columns:1fr}.q6-panel .bento .tile{grid-column:auto!important;grid-row:auto!important}.q6-panel .bento .tile .m{height:auto;aspect-ratio:3/4}.q6 .q-sheet .q-w{width:auto;padding:0 18px}.q6-panel .q-tiles{grid-template-columns:1fr}}

/* ---- footer: quote card + keycap ---- */
.q6 .q-foot .ftop{display:grid;grid-template-columns:minmax(0,1.25fr) auto;align-items:center;gap:40px}
.q6 .q-foot .mark{flex-direction:column;align-items:flex-start;gap:0}
.q6 .q-foot .q-wm{margin-left:min(14rem,38vw);padding-bottom:0;font-size:37px;color:#e3edff}
.q6 .q-foot .q-sigsvg{max-width:100%}
.k6-fcol{display:flex;align-items:center;gap:34px}
.k6-fcol #qc{width:300px}
.k6-quote{display:flex;flex-direction:column;gap:10px;width:100%;min-height:220px;padding:18px 21px 16px;border:0;border-radius:20px;background:#f7f2e8;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 34px -14px rgba(3,14,45,.7);color:#14264f;text-align:left;cursor:pointer;transform:rotate(-1.4deg);transition:transform .25s,box-shadow .25s}
.k6-quote:hover,.k6-quote:focus-visible{transform:rotate(0) translateY(-3px);outline:0;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 24px 40px -14px rgba(3,14,45,.8)}
.k6-quote:focus-visible{outline:3px solid #ff8a5c;outline-offset:4px}
.k6-quote .mk{height:30px;color:var(--or);font:600 68px/.9 Fraunces,Georgia,serif}
.k6-quote .tx{flex:1;font:italic 400 22px/1.28 Fraunces,Georgia,serif;letter-spacing:-.01em}.k6-quote .tx.in{animation:k6in .35s ease both}
.k6-quote .ft{display:flex;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid rgba(20,38,79,.22);color:rgba(20,38,79,.75);font:500 10.5px/1.2 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
@keyframes k6in{from{opacity:0;transform:translateY(6px)}}
.q6 .q-foot .facts{font-size:14px;letter-spacing:.02em;color:#fff;margin-top:42px}.q6 .q-foot .facts small{font-size:11px;color:#b4dbff;margin-bottom:6px}
.q6 .q-foot .bar{font-size:13px;letter-spacing:.04em;color:#e3edff}
@media (max-width:1080px){.q6 .q-foot .ftop{grid-template-columns:1fr}.k6-fcol{flex-wrap:wrap}}
/* the keycap: a pasted isometric mechanical key in the site's orange (see app/pf-keycap.css on the real site) */
.k6-keyscale{--z:.88;width:calc(310px*var(--z));height:calc(215px*var(--z));flex:none;display:grid;place-items:center}
.k6-keyscene{perspective:2000px;transform:scale(var(--z))}
.k6-key{--btn-top:#ed3801;--btn-top-pressed:#c22e01;--btn-text:#fff;--btn-border:#b32b01;--btn-border-pressed:#8f2200;--layer-left:#b32b01;--layer-right:#ff6a3d;--btn-shadow:rgba(0,0,0,.1);position:relative;display:block;width:220px;height:140px;transform:rotateX(60deg) rotateZ(-45deg);transform-style:preserve-3d;cursor:pointer;outline:0;text-decoration:none;user-select:none}
.k6-socket{position:absolute;inset:-20px;background:#e4e2e1;border-radius:24px;border:2px solid #fff;box-shadow:0 5px 15px rgba(0,0,0,.05),inset 4px 4px 8px rgba(0,0,0,.12),inset -4px -4px 8px rgba(255,255,255,.8),inset 10px 10px 20px rgba(0,0,0,.04);transform:translateZ(0)}
.k6-ext{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .1s cubic-bezier(.4,0,.2,1);transform:scaleZ(1)}
.k6-layer{position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,var(--layer-left) 50%,var(--layer-right) 50%);box-shadow:inset 0 0 0 1px var(--btn-shadow)}
.k6-top{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:2px solid var(--btn-border);border-radius:12px;background:var(--btn-top);box-shadow:inset 0 0 20px rgba(0,0,0,.03),inset 2px 2px 5px #fff;color:var(--btn-text);font:600 30px/1 Inter,system-ui,sans-serif;letter-spacing:.5px;white-space:nowrap;transition:background .3s,border-color .3s}
.k6-key:hover .k6-top{background:#f44a12}
.k6-key:active .k6-ext{transform:scaleZ(.3)}.k6-key:active .k6-top{background:var(--btn-top-pressed);border-color:var(--btn-border-pressed)}
.k6-key:focus-visible .k6-socket{outline:3px solid #0e3b8f;outline-offset:3px}

/* ---- About v2 ---- */
.q6 .q-lab{margin:0 0 22px;font:400 clamp(28px,2.4vw,36px)/1.15 Fraunces,Georgia,serif;letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.q6 .q-lab::first-letter{text-transform:uppercase}
.q6-h{margin:0;font:400 clamp(28px,2.4vw,36px)/1.15 Fraunces,Georgia,serif;letter-spacing:-.015em;color:var(--ink)}
/* About top (2026-09-30, v2): left = the intro note with the polaroids tossed under it; right = the "tech setups" legal pad (tools + built tools in one list).
   Phones stack intro, setups, polaroids */
.q6-top{display:grid;grid-template-columns:minmax(0,620px) clamp(460px,37vw,540px);grid-template-areas:"intro list" "pols list";grid-template-rows:auto 1fr;justify-content:center;column-gap:clamp(40px,4vw,64px);align-items:start;padding:34px 0 26px}
#intro{grid-area:intro;z-index:1}
#notes{grid-area:list;position:relative;z-index:3}
#notes.has-open{z-index:999}
.q6-top .q6-heros{grid-area:pols}
@media (min-width:1000px){.q6-top .q6-heros{--pw:260px;--dx:196px;margin-top:-48px}}
/* the intro: a clean paper card, a Fraunces greeting over readable body paragraphs */
.q6-intro-card{--r:-.8deg;padding:34px 40px 30px}
@media (min-width:1000px){.q6-intro-card{padding-bottom:66px}}
.q6-intro-card h1{margin:0 0 16px;font:400 clamp(28px,2.4vw,36px)/1.15 Fraunces,Georgia,serif;letter-spacing:-.015em;color:var(--ink)}
.q6-intro-card p{margin:0 0 12px;font:400 17px/1.6 Inter,system-ui,sans-serif;color:rgba(27,27,27,.86)}
.q6-intro-card p:last-child{margin-bottom:0}
@media (max-width:760px){.q6-intro-card{--r:-.4deg;padding:26px 22px 22px}.q6-intro-card h1{font-size:28px}}
.q6-welcome{max-width:700px}
.q6-welcome .frame{aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:var(--navy)}
.q6-welcome .empty{display:grid;height:100%;place-content:center;justify-items:center;gap:16px;color:#cfe0ff;background-image:linear-gradient(rgba(232,241,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(232,241,255,.14) 1px,transparent 1px);background-size:28px 28px}
.q6-welcome .empty i{width:0;height:0;margin-left:8px;border-style:solid;border-width:22px 0 22px 36px;border-color:transparent transparent transparent #fff}
.q6-welcome .empty span{font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.q6-welcome .cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px;margin-top:14px}
.q6-welcome .cap p{margin:0;color:var(--muted);font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.06em}
.q6-pd{position:relative}
.q6-pd,.q6 .q-desk>div{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.q6-pd.mouse{touch-action:auto}.q6-pd.is-dragging{cursor:grabbing}.q6-pd.is-dragging>*{filter:drop-shadow(0 18px 20px rgba(20,30,60,.28))}
.q6-pd a,.q6-pd button{cursor:pointer}
/* desk: the blackjack table is bigger, and nothing sits on the stock buttons */
.q6 .q-desk{height:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;align-items:start;padding:20px 0 40px}.q6 .q-desk>div{position:relative;left:auto;top:auto}
.q6 .q-desk .d1{margin-top:80px}.q6 .q-desk .d2{margin-top:50px}.q6 .q-desk .d3{margin-top:0}.q6 .q-desk .d4{margin-top:70px}
.q6 .q-sl{width:250px}
.q6 .q-bj{width:360px;padding:18px;border-radius:22px;font-size:14px;transform:rotate(-5deg);box-shadow:0 22px 40px rgba(10,50,30,.4),inset 0 0 0 5px rgba(255,255,255,.08)}
.q6 .q-bj .hd{min-height:50px}.q6 .q-bj .chip{width:52px;height:52px;border-width:4px;font-size:14px}.q6 .q-bj .msg{max-width:200px;min-height:40px;font-size:13px}
.q6 .q-bj .who{font-size:12px;margin-top:10px}.q6 .q-bj .hand{gap:8px;min-height:122px;margin:6px 0 10px}
.q6 .q-bj .pc{width:82px;height:118px;border-radius:9px;font-size:19px}.q6 .q-bj .pc .rk{left:8px;top:8px}.q6 .q-bj .pc.face .rk{left:4px;top:4px;padding:3px 4px}.q6 .q-bj .pc .st{right:8px;bottom:6px;font-size:34px}
.q6 .q-bj .pc.down{border-width:4px;background-size:10px 10px}.q6 .q-bj .acts{gap:8px;min-height:36px;margin-top:14px}.q6 .q-bj .q-pill{font-size:13px;padding:6px 16px}
@media (max-width:1420px){.q6 .q-desk{height:auto;display:flex;flex-wrap:wrap;gap:40px 34px;padding:20px 0 30px}.q6 .q-desk>div{position:relative;left:auto!important;top:auto!important;max-width:100%}}
@media (max-width:999px){.q6-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "list" "pols";grid-template-rows:none;gap:40px}.q6 .q-lan{justify-self:center}}
/* hero polaroids (2026-09-30): a pair tossed on the desk, overlapping each other and the intro note's bottom edge,
   painted IN FRONT of the note (z 1). .q6-heros is not a stacking context, so each .q6-hero (what Q.drag moves)
   competes directly with the note and the pad, and a drag's rising z-index lifts it above the other photo. The first photo sits on top.
   Header (z 50) and the tools-pad cards (top layer on <body>) stay above. --pw photo width, --dx/--dy the second photo's offset */
.q6-heros{--pw:280px;--dx:210px;--dy:34px;position:relative;display:grid;justify-self:start;width:calc(var(--pw) + var(--dx));max-width:100%;margin:-20px 0 0 clamp(24px,5vw,80px)}
.q6-hero{position:relative;grid-area:1/1;align-self:start;width:var(--pw);z-index:5}
.q6-hero:nth-child(2){z-index:4;margin:var(--dy) 0 0 var(--dx)}
.q6-hero:nth-child(n+3){z-index:4;margin:calc(var(--dy) / 2) 0 0 calc(var(--dx) / 2)}
.q6-hero-pol{--r:-4deg;margin:0;background:#fff;padding:16px 16px 58px;box-shadow:0 10px 24px rgba(0,0,0,.2);transform:rotate(var(--r))}
.q6-hero:nth-child(2) .q6-hero-pol{--r:5deg}
.q6-hero-pol img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#ddd;pointer-events:none;user-select:none}
.q6-hero-pol figcaption{margin-top:14px;text-align:center;font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.1em;color:#6b6b73}
/* reveal card (Q.tilt): leans toward the cursor on top of its toss angle, glare follows the cursor, the caption fades in on hover */
.q6-tilt{position:relative;transform:perspective(900px) rotate(var(--r,0deg)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.q6-tilt:hover{transition-duration:.15s}
.q6-glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.4),transparent 60%);opacity:0;transition:opacity .2s}
.q6-tilt:hover .q6-glare{opacity:1}
.q6-tilt figcaption{position:absolute;left:16px;right:16px;bottom:20px;margin:0;opacity:0;translate:0 6px;transition:opacity .2s,translate .2s}
.q6-tilt:hover figcaption{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.q6-tilt,.q6-tilt figcaption,.q6-glare{transition:none}}
.q6-hero:has(>.q6-tilt):hover{z-index:900!important}/* the hovered polaroid comes to the top of the pile so its caption isn't under the other one (beats Q.drag's inline z, which counts up from 30; stays under #notes.has-open at 999) */
@media (max-width:999px){.q6-heros{justify-self:center;margin:0 0 30px}}
@media (max-width:760px){.q6-heros{--pw:min(210px,52vw);--dx:calc(var(--pw) * .64);--dy:22px}.q6-hero-pol{padding:10px 10px 36px}}/* the invitation to the side panel */
.q6-invite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:start;padding:30px 34px;border:1px solid var(--faint);background:#fff}
.q6-invite .lede{max-width:30rem;margin:8px 0 0;color:rgba(27,27,27,.7);font:400 16px/1.6 Inter,system-ui,sans-serif}
.q6-invite .qs{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.q6-invite .qs button{width:100%;padding:9px 0;border:0;border-bottom:1px dotted rgba(27,27,27,.4);background:none;color:var(--ink);font:400 17px/1.4 Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
.q6-invite .qs button:last-child{border-bottom:0}.q6-invite .qs button span{margin-right:8px;color:var(--or)}.q6-invite .qs button:hover{color:var(--orink)}
.q6-invite .more{margin-top:18px;padding:0;border:0;background:none;color:var(--orink);font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media (max-width:900px){.q6-invite{grid-template-columns:1fr;gap:22px;padding:24px 22px}}
.q6-topics{margin:26px 0 0;padding-top:14px;border-top:1px dotted rgba(27,27,27,.4);font:400 16px/1.6 Inter,sans-serif;color:var(--muted)}
.q6-topics b{margin-right:14px;font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* ---- Ask me anything: a docked side panel ---- */
.q6-ask{position:fixed;z-index:60;top:0;right:0;bottom:0;display:flex;width:min(430px,100vw);flex-direction:column;background:#fff;border-left:1px solid rgba(27,27,27,.18);box-shadow:-18px 0 40px -22px rgba(20,30,60,.35);color:#1b1b1b;transform:translateX(104%);visibility:hidden;transition:transform .3s cubic-bezier(.3,.9,.3,1),visibility 0s linear .3s}
.q6-ask.open{transform:none;visibility:visible;transition-delay:0s}
.q6-ask header{display:flex;flex:none;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(27,27,27,.14)}
.q6-ask header p{margin:0;font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase}.q6-ask header p span{margin-right:6px;color:var(--or)}
.q6-ask header div{display:flex;gap:4px}.q6-ask header button{display:grid;width:32px;height:32px;place-items:center;border:0;border-radius:8px;background:none;color:rgba(27,27,27,.65);cursor:pointer}.q6-ask header button:hover{background:rgba(27,27,27,.07);color:#1b1b1b}
.q6-ask .body{display:flex;flex:1;flex-direction:column;gap:22px;padding:22px 20px 12px;overflow-y:auto;overscroll-behavior:contain}
.q6-ask .a{font:400 15px/1.6 Inter,system-ui,sans-serif}.q6-ask .a p{margin:0 0 10px}.q6-ask .a p:last-child{margin-bottom:0}
.q6-ask .turn{display:flex;flex-direction:column;gap:14px;animation:k6in .3s ease both}
.q6-ask .q{align-self:flex-end;max-width:86%;margin:0;padding:10px 14px;border-radius:16px 16px 4px 16px;background:#efeeea;font:500 14px/1.45 Inter,system-ui,sans-serif}
.q6-ask .out{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px!important}.q6-ask .out a{color:var(--orink);font:500 13px/1.4 'JetBrains Mono',monospace;text-decoration:underline;text-underline-offset:3px}
.q6-ask .lks{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.q6-ask .lk{padding:0;border:0;background:none;color:rgba(27,27,27,.72);font:400 14px/1.45 Inter,system-ui,sans-serif;text-align:left;cursor:pointer}.q6-ask .lk span{color:var(--or)}.q6-ask .lk:hover{color:var(--orink);text-decoration:underline;text-underline-offset:3px}
.q6-ask form{display:flex;flex:none;gap:8px;margin:0 16px;padding:6px 6px 6px 16px;border:1px solid rgba(27,27,27,.25);border-radius:999px;background:#fff}.q6-ask form:focus-within{border-color:var(--or)}
.q6-ask input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 14px/1 Inter,system-ui,sans-serif}
.q6-ask form button{display:grid;width:34px;height:34px;place-items:center;border:0;border-radius:50%;background:#1b1b1b;color:#fff;cursor:pointer}.q6-ask form button:hover:not(:disabled){background:var(--or)}.q6-ask form button:disabled{background:rgba(27,27,27,.18);cursor:default}
.q6-ask .note{margin:10px 16px 16px;color:rgba(27,27,27,.5);font:500 10.5px/1.4 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase}

/* ---- About intro as a legal pad: pale yellow sheets, blue rules every --l, red double margin, navy gum binding on top ----
   every row (label, lead, items) is exactly one --l tall so the text sits on the rules */
.q-notes.q6-pad{--l:32px;--top:76px;--m:72px;--rule:rgba(40,90,170,.3);--red:rgba(214,58,46,.55);
  max-width:700px;padding:var(--top) 40px calc(var(--l)*1.5) calc(var(--m) + 26px);color:#1f2a44;border-radius:2px 2px 4px 4px;
  background:
    linear-gradient(to right,transparent var(--m),var(--red) var(--m) calc(var(--m) + 1px),transparent calc(var(--m) + 1px) calc(var(--m) + 4px),var(--red) calc(var(--m) + 4px) calc(var(--m) + 5px),transparent calc(var(--m) + 5px)),
    repeating-linear-gradient(to bottom,transparent 0 calc(var(--l) - 1px),var(--rule) calc(var(--l) - 1px) var(--l)) 0 calc(var(--top) - 6px)/100% var(--l),
    linear-gradient(170deg,#fdf8d8,#fbf1c4 70%,#f8ecbb) #fcf5cf;
  box-shadow:0 1px 0 #efe3ad,3px 4px 0 -1px #f7eec6,3px 4px 0 0 #e6d9a2,6px 8px 0 -1px #f3e8bb,6px 8px 0 0 #ddd09a,0 26px 38px -18px rgba(60,45,10,.45),0 6px 14px -6px rgba(60,45,10,.2)}
/* gum binding strip */
.q-notes.q6-pad::before{content:"";position:absolute;left:-2px;right:-2px;top:0;height:40px;border-radius:3px 3px 1px 1px;background:linear-gradient(to bottom,#1a4aa3,#0e3b8f 55%,#0a2f75);box-shadow:0 3px 4px -1px rgba(10,30,80,.35),inset 0 1px 0 rgba(255,255,255,.18)}
/* a scrap of the torn-off sheet caught under the binding */
.q-notes.q6-pad::after{content:"";position:absolute;left:0;right:0;top:40px;height:5px;background:linear-gradient(to bottom,rgba(60,45,10,.12),transparent);pointer-events:none}
.q-notes.q6-pad .k{margin:0;font:500 11px/var(--l) 'JetBrains Mono',monospace;letter-spacing:.16em;color:#0e3b8f}
.q-notes.q6-pad .lead{margin:0;font:400 22px/var(--l) Fraunces,Georgia,serif;letter-spacing:-.01em;color:#16213b}
.q-notes.q6-pad .chk{margin:0;padding:0}
.q-notes.q6-pad .chk li{display:flex;gap:14px;padding:0;border:0;font:400 16.5px/var(--l) Inter,system-ui,sans-serif;color:#1f2a44}
.q-notes.q6-pad .chk i{flex:none;width:17px;height:17px;margin-top:8px;border:1.6px solid #0e3b8f;border-radius:3px;background:rgba(255,255,255,.35)}
.q-notes.q6-pad .chk i::after{left:4px;top:0;width:5px;height:10px;border-color:var(--or)}
.q-notes.q6-pad .ff{margin-top:var(--l)}
.q-notes.q6-pad .ff .chk li{font-size:15.5px}
@media (max-width:760px){.q-notes.q6-pad{--m:34px;--top:72px;padding:var(--top) 16px var(--l) calc(var(--m) + 14px);transform:rotate(-.5deg);margin-right:6px}.q-notes.q6-pad .lead{font-size:21px}.q-notes.q6-pad .chk li{gap:10px}}

/* About desk cards: paper, like the hero note */
.q6-paper{width:100%;background:#fffefb;box-shadow:0 14px 32px rgba(20,30,60,.16);transform:rotate(var(--r,-1deg));color:var(--ink)}
/* Hero: blueprint paper instead of flat navy (fine 32px grid, bold every 160px), bigger card text */
.q6-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(232,241,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(232,241,255,.2) 1px,transparent 1px),linear-gradient(rgba(232,241,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(232,241,255,.07) 1px,transparent 1px);background-size:160px 160px,160px 160px,32px 32px,32px 32px;background-position:-1px -1px}
.q6-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(6,22,70,.35))}
.q6-stage .q-note{width:420px;padding:30px 32px 26px}
.q6-stage .q-note .q-name{font-size:56px}
.q6-stage .q-note .q-hl{font-size:24px;margin-top:14px}
.q6-stage .q-note .q-st{font-size:15px;margin-top:14px}
.q6-stage .q6-list{width:370px;padding:22px 24px 10px}
.q6-stage .q6-list .lead{font-size:18px}
.q6-stage .q6-list li{font-size:16px}
@media (max-width:760px){.q6-stage .q-note,.q6-stage .q6-list{width:auto}.q6-stage .q-note .q-name{font-size:44px}.q6-stage .q-note .q-hl{font-size:21px}}
.q6-stage .q-xcard{width:clamp(460px,36vw,760px)}
.q6-stage .q-note{width:clamp(350px,29vw,440px)}.q6-stage .q6-list{width:clamp(310px,26vw,380px)}

/* ---- phones (2026-09-29 mobile pass) ---- */
/* the hero stacks its cards below 1000px: let it grow past the JS-set window height (inline style) so no card is clipped */
@media (max-width:999px){.q6-stage{height:auto!important;padding-bottom:30px}
  /* the stack diagram's hover note can spill past its card: keep the card above the highlights that follow it */
  .q6-stage .q-xcard{z-index:5}}
/* touch: a swipe that starts on a draggable card still scrolls the page; sideways drags still move / swing it */
@media (hover:none),(pointer:coarse){.q6-pd,.q6 .q-desk>div,.q-pol,.q-lan,.q-card{touch-action:pan-y}}
@media (max-width:760px){
  .q6-tabs{gap:6px}
  .q6-tab{min-height:44px;padding:12px 14px;font-size:14px;white-space:nowrap}
  .q6 .q-foot .q-wm{margin-left:min(14rem,16vw);font-size:32px}
  /* footer on a phone: full-width quote, smaller centered keycap, facts in two columns ("Currently" and "Based in" span both) */
  .q6 .q-foot .ftop{gap:20px}
  .k6-fcol{flex-direction:column;align-items:stretch;gap:8px}.k6-fcol #qc{width:auto}
  .k6-fcol .k6-keyscale{--z:.72;align-self:center}
  .q6 .q-foot .facts{grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:28px}.q6 .q-foot .facts>:nth-child(-n+2){grid-column:1/-1}
  .q-card .tagline{letter-spacing:.12em}
  .q6-stage .q-xcard{transform:rotate(.6deg)}
  .q6 .q-desk{row-gap:34px}.q6 .q-desk>div{margin-top:0!important}
  .q6 #tools{margin-top:44px}
}
/* Larger tile captions */
.q6-panel .q-cap2 .sub{font-size:23px;line-height:1.3}
.q6-panel .q-cap2 .meta{font-size:13.5px}
@media (max-width:760px){.q6-panel .q-cap2 .sub{font-size:20px}.q6-panel .q-cap2 .meta{font-size:12.5px}}
/* Hero at 40px+: cards stack in the left column (highlights offset like pinned paper), diagram on the right */
@media (min-width:1000px){
.q6-stage{height:auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"note xc";align-items:center;align-content:center;column-gap:56px;row-gap:0;padding:72px clamp(24px,4vw,72px) 88px}
.q6-stage .q-note{grid-area:note;width:auto;max-width:660px;padding:40px 44px 34px;justify-self:start}
.q6-stage .q6-list{grid-area:list;width:auto;max-width:600px;margin:-28px 0 0 clamp(60px,8vw,140px);padding:30px 34px 14px;justify-self:start;z-index:4}
.q6-stage .q-xcard{grid-area:xc;width:100%;max-width:760px;align-self:center;justify-self:center}
}
.q6-stage .q-note .q-name{font-size:clamp(56px,5.6vw,84px)}
.q6-stage .q-note .q-hl{font-size:clamp(28px,2.8vw,40px);line-height:1.2;margin-top:18px}
.q6-stage .q-note .q-st{font-size:clamp(16px,1.35vw,20px);margin-top:18px}
/* status + recents are two paragraphs of one muted block; the CTA line sits under them in ink, its link in the site's link style */
.q6-stage .q-note .q-st+.q-st{margin-top:10px}
.q6-stage .q-note .q-cta{margin:14px 0 0;font:500 clamp(16px,1.35vw,20px)/1.5 Inter,system-ui,sans-serif;color:var(--ink)}
.q6-stage .q-note .q-cta a{color:inherit;text-decoration:underline;text-decoration-color:rgba(27,27,27,.35);text-underline-offset:3px;text-decoration-thickness:1.5px}
.q6-stage .q-note .q-cta a:hover,.q6-stage .q-note .q-cta a:focus-visible{color:var(--orink);text-decoration-color:currentColor}
.q6-stage .q-note .q-cta a:focus-visible{outline:2px solid var(--or);outline-offset:2px}
/* experience list under the status line (2026-09-30): company | role ······ year, like a menu. Years in the What's-next label mono, companies in the
   headline's Inter + ink, roles in the status muted; a dotted rule like the one above What's next opens it. On phones the role line drops under the company */
.q6-xl{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px dotted rgba(27,27,27,.4);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:8px;align-items:start}
.q6-xl li{display:contents}
/* role, dotted leader and year: a long role wraps and the year sits on its last baseline. Company and role share a line height so their first lines match */
.q6-xl .rw{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:last baseline;min-width:0}
/* the leader: a zero-width (by margin) dotted line straight after the role's last word, clipped at the role column's edge */
.q6-xl .r{display:block;clip-path:inset(0)}
.q6-xl .has-y .r>span::after{content:'';display:inline-block;width:100vw;margin:0 calc(-100vw - 8px) 0 8px;border-bottom:1px dotted rgba(27,27,27,.35);vertical-align:.3em}
.q6-xl .y{font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--muted)}
.q6-xl .c{font:400 clamp(16px,1.2vw,18px)/calc(clamp(15px,1.1vw,17px)*1.4) Inter,system-ui,sans-serif;color:var(--ink);text-decoration:none;white-space:nowrap}
.q6-xl .c:hover,.q6-xl .c:focus-visible{color:var(--or);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.q6-xl .c:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.q6-xl .r{font:400 clamp(15px,1.1vw,17px)/1.4 Inter,system-ui,sans-serif;color:var(--muted)}
@media (max-width:760px){.q6-xl{grid-template-columns:minmax(0,1fr);row-gap:0}.q6-xl .c{justify-self:start}.q6-xl .rw{margin:1px 0 10px}}
/* the Experience card: the highlights card's paper, tilt and shadow, headed by a small mono label like What's next */
.q6-xp{background:#fff;border:1px solid var(--faint);padding:20px 26px 18px;box-shadow:0 16px 30px rgba(8,20,70,.3);transform:rotate(var(--r,1deg))}
.q6-xp .k{margin:0;font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.q6-xp .q6-xl{margin-top:12px}
/* the CTA's target clears the sticky header when scrolled to */
#tabs{scroll-margin-top:72px}
.q6-stage .q-note .q-next span{font-size:clamp(16px,1.3vw,19px)}
.q6-stage .q6-list .lead{font-size:clamp(24px,2.5vw,36px);line-height:1.2;margin-bottom:8px}
.q6-stage .q6-list li{font-size:clamp(18px,1.95vw,28px);line-height:1.35;padding:14px 0}
@media (min-width:1000px){.q6-stage .q6-list{margin-top:18px}}
/* Hero layer note: HTML over the SVG (no foreignObject, for Safari), so it is sized in CSS px. Its width follows the diagram's scale (k2.js) */
.q6-stage .nt{font-size:17px;line-height:1.25;padding:9px 11px}
.q6-stage .nt small{font-size:8px;margin-bottom:2px}
.q6-stage .nt ul{gap:5px}
@media (max-width:760px){.q6-stage .nt{font-size:11px;padding:6px 7px}.q6-stage .nt small{font-size:6px;margin-bottom:1px}.q6-stage .nt ul{gap:3px}}

/* ---- About top: the legal pad holds "Some fun tech setups I have" (favorite tools + tools she built, one row each) ---- */
.q-notes.q6-tpad .k{text-transform:uppercase}
.q6-tool.plain{cursor:auto}
/* a built tool's short line: a plain sentence on its own ruled line under the name (the favorite tools keep their small caps tag beside the name) */
.q6-tool .r.s{flex-basis:100%;top:0;font:400 14.5px/var(--l) Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:rgba(31,42,68,.78)}
.q6-tool .r.s .pic{margin-left:2px}
.q6-tool .tag{display:inline-block;margin:0 8px 0 0;padding:0 5px;border:1.5px solid #0e3b8f;border-radius:3px;color:#0e3b8f;font:700 11px/1.5 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;vertical-align:4px}
/* the screenshot link: a small dotted-underline text button after the row's short line; the picture drops under it in a paper frame */
.q6-tool .pic{all:unset;display:inline;cursor:pointer;font:500 11.5px/var(--l) 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em;text-transform:none;color:#0e3b8f;text-decoration:underline dotted rgba(14,59,143,.55);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color .15s ease,text-decoration-color .15s ease}
.q6-tool .pic:hover,.q6-tool .pic[aria-expanded="true"]{color:var(--orink);text-decoration-color:var(--or)}
.q6-tool .pic:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:2px}
.q6-tools{list-style:none;margin:0;padding:0}
.q6-tool{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:14px;cursor:pointer}
.q6-tool .nm{font:400 21px/var(--l) Fraunces,Georgia,serif;letter-spacing:-.01em;color:#16213b}
.q6-tool .nm a{color:inherit;text-decoration:underline;text-decoration-color:rgba(14,59,143,.35);text-underline-offset:4px;text-decoration-thickness:1.5px}
.q6-tool .nm a:hover,.q6-tool .nm a:focus-visible{color:#0e3b8f;text-decoration-color:currentColor}
.q6-tool .r{position:relative;top:2px;flex:1 1 12rem;min-width:0;font:500 11.5px/var(--l) 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(31,42,68,.7)}
.q6-tool .nm a:focus-visible,.q6-tcard .go:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.q-notes.q6-tpad .hint{margin:0;font:500 11px/var(--l) 'JetBrains Mono',monospace;letter-spacing:.06em;color:rgba(31,42,68,.6)}
/* the card: a scrap of off-white paper that drops just under the row. It lives on <body> in its own top layer (the pad is tilted and
   draggable, so anything inside it can never paint over later elements); k6.js sets its left/top/width from the row. Only the
   custom cursor (z 2147483647) sits above it */
.q6-tcard{position:fixed;z-index:2147483646;left:0;top:0;width:360px;max-width:calc(100vw - 16px);box-sizing:border-box;padding:18px 20px 16px;background:#fffefb;color:#1b1b1b;cursor:auto;font:400 16px/1.6 Inter,system-ui,sans-serif;
  box-shadow:0 18px 34px -10px rgba(20,30,60,.3),0 2px 6px rgba(20,30,60,.1);transform:translateY(-4px) rotate(-.4deg);opacity:0;visibility:hidden;
  transition:opacity .16s ease,transform .18s cubic-bezier(.3,.9,.3,1),visibility 0s linear .18s}
.q6-tcard.open{opacity:1;visibility:visible;transform:rotate(.8deg);transition-delay:0s}
.q6-tcard p{margin:0;font:400 15.5px/1.5 Inter,system-ui,sans-serif}
.q6-tcard .h{font:400 22px/1.2 Fraunces,Georgia,serif;letter-spacing:-.01em;margin-bottom:10px}
.q6-tcard .k{margin:0;font:500 11px/32px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#0e3b8f}
.q6-tcard .go{display:inline-block;margin-top:14px;color:var(--orink);font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.q6-tcard,.q6-tcard.open{transition:none;transform:rotate(.8deg)}}
@media (max-width:760px){.q6-tool .r{order:2;flex-basis:100%;top:-2px}.q6-tool .nm{font-size:20px}}
/* Hero collage (2026-09-30, context/images/hero-layout-ref-2026-09-30.png): one centred grid cell (max 1440px) holds all four cards, each placed by
   margins (in px / % of the cell's width), so the collage scales as one piece and the cell grows to fit the lowest card. Name card left and
   vertically centred, exactly as wide as its name (--nw follows the name's font clamp); Experience on the right (--xw, wide enough for one-line
   roles); highlights between them, just over the name card's right edge; diagram (--dw, never under the 460px that switches its drawing to
   the narrow geometry) top-right behind everything, Experience just over its bottom margin. Stacking: diagram < name < highlights, Experience.
   A dragged card still comes to front */
@media (min-width:1000px){
.q6-stage{display:grid;grid-template-columns:min(1560px,100%);grid-template-rows:auto;grid-template-areas:none;justify-content:center;align-content:center;gap:0;padding:32px clamp(20px,5vw - 44px,72px) 40px}
.q6-stage .q6-c{grid-area:1/1;justify-self:start;align-self:start;max-width:none;margin:0;--nw:calc(clamp(56px,5.6vw,84px)*5.8 + 60px);--xw:clamp(440px,62.5vw - 330px,620px);--dw:max(470px,34%)}
/* everything under the name stops 36px short of the card's right edge: a blank strip the highlights card can overlap */
.q6-stage .q-note{width:var(--nw);align-self:center;padding:28px 30px 22px;z-index:4}.q6-stage .q-note>:not(.q-name){max-width:calc(100% - 36px)}
.q6-stage .q-note .q-hl{margin-top:12px}.q6-stage .q-note .q-st{margin-top:12px}.q6-stage .q-note .q-soc{margin-top:14px}.q6-stage .q-note .q6-mail{margin-top:8px}.q6-stage .q-note .q-next{margin-top:12px;padding-top:10px}
.q6-stage .q6-list{width:calc(100% - var(--nw) - var(--xw) + 58px);margin:calc(var(--dw)*.63) 0 0 calc(var(--nw) - 44px);padding:18px 22px 6px;z-index:5}
.q6-stage .q-xcard{width:var(--dw);margin-left:calc(100% - var(--xw) - var(--dw)*.45);z-index:2}
.q6-stage .q6-list.q6-c .lead{font-size:clamp(16px,1.15vw,24px)}
.q6-stage .q6-list.q6-c li{padding:5px 0;line-height:1.38}
.q6-stage .q6-xp{width:var(--xw);margin:calc(var(--dw)*.61) 0 0 calc(100% - var(--xw));padding:18px 22px 16px;z-index:5}
.q6-stage .q6-xl{column-gap:14px;row-gap:6px}.q6-stage .q6-xl .c{font-size:clamp(15px,1.1vw,18px)}.q6-stage .q6-xl .r{font-size:clamp(14px,1vw,16px)}
}
/* 1000-1279: too narrow for three columns. Name card top-left, diagram top-right, Experience under the diagram (just over the name card's
   blank right strip), highlights in a second row under the name card, tucked slightly under its bottom edge */
@media (min-width:1000px) and (max-width:1279px){
.q6-stage{grid-template-rows:auto auto}
.q6-stage .q-note{align-self:start;margin-top:24px}
.q6-stage .q-xcard{margin-left:calc(100% - var(--dw))}
.q6-stage .q6-xp{width:calc(100% - var(--nw) + 26px);margin:calc(var(--dw)*.62) 0 0 calc(var(--nw) - 26px)}
.q6-stage .q6-list{grid-area:2/1;width:min(640px,64%);margin:-14px 0 0 6%}
}
/* the diagram's hover note floats over every card: the lit diagram rises above them (and above a dragged card's inline z-index) */
.q6-stage{isolation:isolate}.q6-stage .q-xcard:has(.sx-band.on){z-index:100000!important}
/* phones / narrow: name, highlights, experience, then the diagram */
@media (max-width:999px){.q6-stage .q-note{order:1}.q6-stage .q6-list{order:2}.q6-stage .q6-xp{order:3}.q6-stage .q-xcard{order:4}}
.q6-stage .q6-list .lead{font-size:clamp(20px,1.6vw,24px)}
.q6-stage .q6-list li{font-size:clamp(15px,1.05vw,17px);line-height:1.4;padding:7px 0}
.q6-stage .q6-list a{position:relative;z-index:1}
@media (max-width:999px){.q6-stage .q6-list{margin:0}}
/* About desk (2026-09-29, v4): two cards (Product Trends, free time); "Tools I've Created" moved up under the legal pad. Two centred columns, gently staggered */
@media (min-width:1000px){.q6 .q-desk{display:grid;grid-template-columns:repeat(2,minmax(0,560px));justify-content:center;gap:clamp(40px,5vw,96px)}.q6 .q-desk .d2{margin-top:0}.q6 .q-desk .d4{margin-top:56px}}
#quests li{display:flex;gap:8px}
/* Gallery (2026-09-30): the free-time note is pinned beside the polaroids, a paper card that stays in view while the photos scroll by; stacked above them on narrow screens */
.q6-gal{display:grid;gap:40px}
.q6-gal-note{position:relative;z-index:12;max-width:560px}
#quests li+li{margin-top:8px}
@media (min-width:1000px){.q6-gal{grid-template-columns:minmax(260px,300px) minmax(0,1fr);align-items:start}.q6-gal-note{position:sticky;top:96px}.q6-gal .q-pola{width:100%;height:1500px}}
/* screenshot pop-up frame (Q.picPops): absolutely placed in its card, under its button */
.q6-mpic{position:absolute;z-index:6;left:-10px;width:min(560px,calc(100vw - 24px),calc(70vh * var(--ar,1.87) + 26px));margin-top:6px;padding:12px 12px 14px;background:#fffefb;cursor:auto;
  box-shadow:0 18px 34px -10px rgba(20,30,60,.3),0 2px 6px rgba(20,30,60,.1);translate:var(--dx,0px) 0;transform:translateY(-4px) rotate(-.4deg);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,transform .18s cubic-bezier(.3,.9,.3,1),visibility 0s linear .18s}
.q6-mpic.open{opacity:1;visibility:visible;pointer-events:auto;transform:rotate(-.6deg);transition-delay:0s}
.q6-mpic img{display:block;width:100%;height:auto;border:1px solid rgba(27,27,27,.12)}
@media (prefers-reduced-motion:reduce){.q6-mpic,.q6-mpic.open{transition:none;transform:rotate(-.6deg)}}