, so it is on every route rather than only the front page. Laid out along the line rather than stacked, because down here it is a footer readout and not a panel. */ .qt-dock-foot{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap; margin:0 0 20px;padding-top:0;border-top:0} @media(max-width:600px){.qt-dock-foot{gap:12px}} /* The cover's ground, so the reveal reads as part of the press rather than over it. */ .qt-press .rv{color:var(--ink)} .qt-press .rv-value{color:var(--ink)} .qt-press .rv-tag{color:var(--moss)} .qt-presence{margin-top:22px;font:500 11.5px/1.7 'Geist Mono',monospace;color:var(--faint)} .qt-presence b{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--moss);margin-right:7px;vertical-align:middle} /* ---------- interior routes reuse the shared section renderer ---------- */ .qt-page{padding:64px 0 0} .qt-page .section-intro{font-family:Newsreader,Georgia,serif;font-size:21px;line-height:1.62;color:var(--soft);max-width:var(--measure-tight);margin:0 0 34px} .qt-page .tag{font:500 11.5px/1.55 'Geist Mono',monospace;padding:3px 7px;border:1px solid var(--rule);color:var(--soft)} .qt-page ul:not(.tag-list){padding-left:20px;color:var(--soft);font-size:16.5px;line-height:1.78;margin:0;max-width:var(--measure)} .qt-page ul:not(.tag-list) li+li{margin-top:8px} .qt-page .source-note{font:500 13px/1.72 'Geist Mono',monospace;color:var(--faint);border-top:1px solid var(--rule-soft);padding-top:13px;margin-top:18px;max-width:var(--measure)} .qt-page .notice{font:500 13px/1.78 'Geist Mono',monospace;color:var(--soft);background:var(--paper2);padding:14px 16px;margin-bottom:24px;max-width:var(--measure)} .qt-page .skill-group{margin-bottom:26px} .qt-page .btn{min-height:42px;padding:10px 15px;border:1px solid var(--rule);display:inline-flex;align-items:center;gap:8px;font:500 12.5px 'Geist Mono',monospace;letter-spacing:.05em;text-transform:uppercase} .qt-page .btn:hover{border-color:var(--moss);color:var(--moss)} .qt-page .btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)} .qt-page .btn.primary:hover{color:var(--paper);opacity:.86} .qt-page .actions{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0} .qt-page details{padding:16px 0;border-bottom:1px solid var(--rule-soft)} .qt-page summary{font-size:16.5px;cursor:pointer;min-height:44px;line-height:1.7} .qt-page .resource-row{padding:16px 0;border-top:1px solid var(--rule-soft);display:flex;justify-content:space-between;gap:20px} .qt-page .resource-row:hover{color:var(--moss)} .qt-page .resource-row small{display:block;font:500 11.5px 'Geist Mono',monospace;color:var(--faint);margin-top:4px} .qt-page .empty-mark{font:44px/1 'Geist Mono',monospace;color:var(--rule);margin-bottom:18px} .qt-page .text-link{font:500 12.5px 'Geist Mono',monospace;letter-spacing:.05em} /* ---------- the moth: an engraving, and the light it wants ---------- Flat ink on paper, hatched in the negative with the paper colour. No glow on the moth itself — the page has none to give. The lamp is the single exception, and that is the point: it is the only lit thing on the sheet. */ .qt-pet{color:var(--ink)} .qt-pet .qt-moth-wing path{fill:var(--ink)} .qt-pet .mj-pet-bubble{background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:0; font-family:Newsreader,Georgia,serif;font-size:14px;line-height:1.45} .qt-ink-dot{position:fixed;width:5px;height:5px;border-radius:50%;background:var(--ink);z-index:19; pointer-events:none;animation:qt-ink 4.5s ease-out forwards} @keyframes qt-ink{0%{opacity:.5;transform:scale(.4)}20%{opacity:.34;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}} .qt-lamp{position:fixed;z-index:18;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%; background:#ffc23d;box-shadow:0 0 14px 5px #ffb00099,0 0 40px 14px #ffb00040;pointer-events:none; animation:qt-lamp-in 1.1s cubic-bezier(.2,.9,.2,1) both,qt-lamp-pulse 1.9s ease-in-out 1.1s infinite} /* The bloom, and a ring that opens out of it — the page has no other light, so this is the one thing on the sheet that moves and glows. */ .qt-lamp::before{content:"";position:absolute;inset:-46px;border-radius:50%; background:radial-gradient(circle,#ffb00055 0%,#ffb00022 38%,transparent 68%); animation:qt-lamp-breathe 1.9s ease-in-out infinite} .qt-lamp::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid #ffb000; animation:qt-lamp-ring 1.9s cubic-bezier(.2,.6,.3,1) infinite} .qt-lamp-out{animation:qt-lamp-out .6s ease-in forwards} @keyframes qt-lamp-in{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.5)}100%{opacity:1;transform:scale(1)}} @keyframes qt-lamp-pulse{0%,100%{transform:scale(1);box-shadow:0 0 14px 5px #ffb00099,0 0 40px 14px #ffb00040} 50%{transform:scale(1.16);box-shadow:0 0 20px 8px #ffb000cc,0 0 60px 22px #ffb00055}} @keyframes qt-lamp-breathe{0%,100%{opacity:.75}50%{opacity:1}} @keyframes qt-lamp-ring{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(4.6)}} @keyframes qt-lamp-out{to{opacity:0;transform:scale(.3)}} .qt-pet-toggle{font:500 12px/1.6 'Geist Mono',monospace;letter-spacing:.085em;text-transform:uppercase; color:var(--faint);border-bottom:1px solid var(--rule);padding-bottom:2px} .qt-pet-toggle:hover{color:var(--ink);border-color:var(--moss)} /* ---------- colophon ---------- */ .qt-colophon{border-top:1px solid var(--rule);padding:44px 0 60px} .qt-colophon-grid{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:200px minmax(0,660px);gap:0 44px} .qt-more{display:flex;flex-wrap:wrap;gap:10px 22px;padding-bottom:26px;margin-bottom:22px;border-bottom:1px solid var(--rule-soft)} .qt-more a{font:500 12.5px/1.2 'Geist Mono',monospace;letter-spacing:.03em;color:var(--faint);padding:4px 0} .qt-more a:hover{color:var(--ink)} .qt-more a[aria-current=page]{color:var(--moss)} .qt-colophon p{font-family:Newsreader,Georgia,serif;font-size:17.5px;line-height:1.66;color:var(--soft);max-width:var(--measure)} .qt-colophon-links{display:flex;flex-wrap:wrap;gap:20px;margin:0} .qt-colophon-links a{font:500 11.5px 'Geist Mono',monospace;letter-spacing:.06em;color:var(--faint);border-bottom:1px solid var(--rule);padding-bottom:3px} .qt-colophon-links a:hover{color:var(--ink);border-color:var(--moss)} /* ---------- motion: rules draw, headings unmask. No content-shift entry. ---------- */ @keyframes qt-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes qt-unmask{from{clip-path:inset(0 0 105% 0)}to{clip-path:inset(0 0 -8% 0)}} /* Reveal is opt-in from the script: without JavaScript every block is simply visible. */ .qt[data-reveal] .qt-block{opacity:0;transform:translateY(8px); transition:opacity .38s cubic-bezier(.2,0,0,1),transform .38s cubic-bezier(.2,0,0,1)} .qt[data-reveal] .qt-block::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--rule); transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,0,0,1) .05s} .qt-block{position:relative;scroll-margin-top:88px} .qt[data-reveal] .qt-block.is-in{opacity:1;transform:none} .qt[data-reveal] .qt-block.is-in::before{transform:scaleX(1)} .qt-display{animation:qt-unmask .58s cubic-bezier(.2,0,0,1) both} @media(prefers-reduced-motion:reduce){ .qt-display{animation:none} .qt[data-reveal] .qt-block{opacity:1;transform:none;transition:none} .qt[data-reveal] .qt-block::before{transform:scaleX(1);transition:none} } /* ---------- responsive ---------- */ /* ---------- contents: a sticky index in the right gutter ---------- */ /* The index sat in the leftover space to the right of the 1180px sheet, which only exists above 1280px — so it vanished on exactly the laptop widths most people read this on (a maximised 1366 window is 1351 after the scrollbar; 1280 is 1265). Narrowing it to 168px and letting it sit closer to the sheet buys the whole 1100–1280 band. */ .qt-contents{position:fixed;top:96px;right:max(14px,calc(50vw - 590px + 14px));width:168px;z-index:30; max-height:calc(100vh - 160px);overflow:auto;overscroll-behavior:contain} .qt-contents[hidden]{display:none} .qt-contents .toc-label{font:500 11.5px/1.7 'Geist Mono',monospace;color:var(--faint);letter-spacing:.09em; text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--rule-soft)} .qt-contents .toc-list{padding-top:6px} .qt-contents .toc-list a{display:flex;align-items:flex-start;gap:8px;min-height:26px; font:500 11.5px/1.6 'Geist Mono',monospace;letter-spacing:.05em;text-transform:uppercase; color:var(--faint);padding:6px 0 6px 10px;margin-left:-10px;border-left:1px solid transparent; transition:color .2s,border-color .2s} .qt-contents .toc-list a:hover{color:var(--ink)} .qt-contents .toc-list a.is-current{color:var(--moss);border-left-color:var(--moss)} .qt-contents .toc-index{font-size:11px} /* ---------- 'go to' opens the palette ---------- */ .qt-go{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;border:1px solid var(--rule); border-radius:3px;font:500 12.5px 'Geist Mono',monospace;letter-spacing:.04em;color:var(--faint)} .qt-go:hover{color:var(--ink);border-color:var(--faint)} .qt-go kbd{font:500 11px 'Geist Mono',monospace;padding:3px 5px;border:1px solid var(--rule);border-radius:3px;color:var(--faint)} /* Below 1280 there is genuinely no room for a labelled rail beside a 1180px sheet — the grid needs 904px of its own, so reserving 190px more would push the sheet off centre, and a centred document that stops being centred to make room for its own furniture has its priorities backwards. The index does not need the room: it collapses to its section numbers, floats over the gutter, and opens to the full list on hover or focus. Nothing in the layout moves, and the reader keeps the index down to 1024. */ @media(max-width:1279px) and (min-width:1025px){ .qt-contents{right:12px;width:34px;background:color-mix(in srgb,var(--paper) 92%,transparent); border:1px solid transparent;padding:8px 6px;transition:width .22s cubic-bezier(.2,0,0,1), background-color .22s,border-color .22s,box-shadow .22s;overflow:hidden} .qt-contents .toc-label{opacity:0;white-space:nowrap;transition:opacity .18s} .qt-contents .toc-text{display:none} .qt-contents .toc-list a{padding-left:4px;margin-left:0;justify-content:center} .qt-contents:hover,.qt-contents:focus-within{width:184px;padding:10px 12px; background:var(--paper);border-color:var(--rule-soft); box-shadow:-8px 0 28px color-mix(in srgb,var(--ink) 7%,transparent)} .qt-contents:hover .toc-label,.qt-contents:focus-within .toc-label{opacity:1} .qt-contents:hover .toc-text,.qt-contents:focus-within .toc-text{display:inline} .qt-contents:hover .toc-list a,.qt-contents:focus-within .toc-list a{padding-left:10px;margin-left:-10px;justify-content:flex-start} /* Collapsed, the current section is the only thing that has to read at a glance. */ .qt-contents .toc-list a.is-current .toc-index{color:var(--moss);font-weight:600} } @media(prefers-reduced-motion:reduce){.qt-contents,.qt-contents .toc-label{transition:none}} /* At 1024 and below the measure becomes 1fr and fills the block, so there is no gutter left to float over and the bar's Contents menu is the way in. */ @media(max-width:1024px){.qt-contents{display:none}} @media(max-width:1024px){ .qt-block,.qt-colophon-grid{grid-template-columns:150px minmax(0,1fr);gap:0 28px} } @media(max-width:760px){ .qt-bar-inner{flex-wrap:wrap;gap:10px;padding:10px 20px} .qt .qt-menu{display:block;font-size:11.5px;font-weight:500;font-family:'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border:1px solid var(--rule);padding:10px 12px;min-height:44px;margin-left:auto} .qt-links{display:none;order:3;width:100%;flex-direction:column;justify-content:flex-start;border-top:1px solid var(--rule-soft);padding-top:6px} .qt-links.open{display:flex} .qt-links a{padding:12px 4px;min-height:44px;display:flex;align-items:center;font-size:12px} .qt-links a[aria-current=page]::after{left:4px;right:auto;width:18px} .qt-tools{order:2} .qt-sheet{padding:0 20px 70px} .qt-block,.qt-colophon-grid{grid-template-columns:minmax(0,1fr);gap:14px;padding:36px 0} /* No margin column and no hover down here, so the summary is set under the row — the only place a phone can put it, and previously the one place it never appeared. */ .qt-preview{display:none} .qt-entry-body{display:block} .qt-entry:hover,.qt-entry:focus-visible{padding-left:0} /* The number kept its default order while the name and category were reordered around it, so it wrapped onto a line of its own above the title. It belongs beside it. */ .qt-entry-head{flex-wrap:wrap;gap:2px 10px;align-items:baseline} .qt-entry-num{order:1} .qt-entry-cat{order:2;flex:1} .qt-entry-name{flex:1 1 100%;order:3;font-size:19px;margin-top:2px} .qt-entry-summary{font-size:15.5px;margin-top:8px} .qt-colophon-grid{padding:0 20px} .qt-hero{padding-top:34px} .qt-portrait{max-width:168px} .qt-row{grid-template-columns:70px 1fr;gap:12px} } /* ========================================================================== The press — Quarto's entrance, route transitions and re-typeset refresh. The page underneath is fully rendered and readable from the first frame; this only covers it. See prototypes/shared/stage.js and doc/motion-plan.md. ========================================================================== */ .qt-press{position:fixed;inset:0;z-index:90;background:var(--paper2); display:grid;grid-auto-flow:row;place-content:center;justify-items:center;gap:34px; transition:opacity .5s ease} .qt-press[data-state="done"]{opacity:0;pointer-events:none} /* ---------- the fold ---------------------------------------------------------- A quarto is a sheet folded twice: four leaves, eight pages. The entrance performs exactly that, and every step of it is one continuous transform. The version before this printed rows of text one at a time, which is a slideshow rather than a motion, and that is what made it feel inert however long it ran. Two leaves fold over a face. The face carries the creases, and the creases outlive the folds: what is left when the leaves lift is the grid of the page underneath. */ .qt-fold-stage{position:relative;height:min(62vh,640px);aspect-ratio:1/1.294; perspective:1600px;perspective-origin:50% 45%; transform:scale(.965);opacity:0; transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .7s ease} .qt-press[data-step="in"] .qt-fold-stage, .qt-press[data-step="fold-1"] .qt-fold-stage, .qt-press[data-step="fold-2"] .qt-fold-stage{transform:scale(1);opacity:1} /* The folded block sits smaller and centred, the way a gathered quarto would. */ .qt-press[data-step="gathered"] .qt-fold-stage{transform:scale(.88);opacity:1; transition:transform 1s cubic-bezier(.32,.9,.3,1)} /* Then it opens outward into the page and dissolves into it. */ .qt-press[data-step="read"] .qt-fold-stage{transform:scale(1.32);opacity:0; transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .55s ease} .qt-press[data-step="open"] .qt-fold-stage, .qt-press[data-step="out"] .qt-fold-stage{transform:scale(1.9);opacity:0; transition:transform 1.15s cubic-bezier(.5,0,.2,1),opacity .85s ease .2s} .qt-fold-sheet{position:absolute;inset:0;transform-style:preserve-3d} .qt-fold-face{position:absolute;inset:0;background:var(--paper); border:1px solid var(--rule-soft); box-shadow:0 26px 60px -34px #12140f4d,0 4px 14px -8px #12140f26;overflow:hidden} /* The creases, drawn before the folds and still there afterwards. */ .qt-crease{position:absolute;background:var(--rule);opacity:0} .qt-crease-h{left:0;right:0;top:50%;height:1px;transform-origin:left;transform:scaleX(0); transition:transform .75s cubic-bezier(.2,0,0,1),opacity .4s ease} .qt-crease-v{top:0;bottom:0;left:50%;width:1px;transform-origin:top;transform:scaleY(0); transition:transform .75s cubic-bezier(.2,0,0,1),opacity .4s ease} .qt-press[data-step="fold-1"] .qt-crease-h,.qt-press[data-step="fold-2"] .qt-crease-h, .qt-press[data-step="gathered"] .qt-crease-h, .qt-press[data-step="read"] .qt-crease-h, .qt-press[data-step="open"] .qt-crease-h{opacity:.95;transform:scaleX(1)} .qt-press[data-step="fold-2"] .qt-crease-v,.qt-press[data-step="gathered"] .qt-crease-v, .qt-press[data-step="read"] .qt-crease-v,.qt-press[data-step="open"] .qt-crease-v{opacity:.95;transform:scaleY(1)} /* Faint text-block rules, so the sheet reads as a page rather than a blank card. */ .qt-fold-rule{position:absolute;left:12%;height:1px;background:var(--rule-soft); transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,0,0,1)} .qt-fold-rule-1{top:22%;right:20%} .qt-fold-rule-2{top:30%;right:34%} .qt-fold-rule-3{top:70%;right:26%} .qt-press[data-step="in"] .qt-fold-rule,.qt-press[data-step="fold-1"] .qt-fold-rule, .qt-press[data-step="fold-2"] .qt-fold-rule,.qt-press[data-step="gathered"] .qt-fold-rule, .qt-press[data-step="open"] .qt-fold-rule{transform:scaleX(1)} .qt-press[data-step="in"] .qt-fold-rule-2{transition-delay:.12s} .qt-press[data-step="in"] .qt-fold-rule-3{transition-delay:.24s} /* The leaves: each is a half of the sheet rotating over the face on its crease. */ /* A leaf is the same paper seen from the front; its back is the reverse of the sheet, so it sits a shade darker and carries the shadow it casts on what is underneath. */ .qt-leaf{position:absolute;background:var(--paper);border:1px solid var(--rule-soft); backface-visibility:hidden;box-shadow:0 16px 40px -20px #12140f5c} .qt-leaf-bottom{left:0;right:0;top:50%;bottom:0;transform-origin:50% 0; transform:rotateX(0deg);transition:transform 1.15s cubic-bezier(.62,.02,.24,1)} .qt-leaf-right{top:0;bottom:0;left:50%;right:0;transform-origin:0 50%; transform:rotateY(0deg);transition:transform 1.15s cubic-bezier(.62,.02,.24,1)} .qt-press[data-step="fold-1"] .qt-leaf-bottom,.qt-press[data-step="fold-2"] .qt-leaf-bottom, .qt-press[data-step="gathered"] .qt-leaf-bottom{transform:rotateX(-180deg)} .qt-press[data-step="fold-2"] .qt-leaf-right, .qt-press[data-step="gathered"] .qt-leaf-right{transform:rotateY(180deg)} /* Opening lifts the leaves away rather than unfolding them back, so the motion keeps going in one direction instead of rewinding itself. */ .qt-press[data-step="open"] .qt-leaf-bottom,.qt-press[data-step="out"] .qt-leaf-bottom{ transform:rotateX(-92deg);opacity:0; transition:transform .95s cubic-bezier(.5,0,.2,1),opacity .6s ease .25s} .qt-press[data-step="open"] .qt-leaf-right,.qt-press[data-step="out"] .qt-leaf-right{ transform:rotateY(92deg);opacity:0; transition:transform .95s cubic-bezier(.5,0,.2,1),opacity .6s ease .25s} /* The caption names each state, crossfading in place so nothing jumps. */ .qt-fold-caption{position:relative;margin:0;width:min(90vw,420px);height:1.6em; text-align:center;pointer-events:none} .qt-fold-caption span{position:absolute;left:0;right:0; font:500 12px/1.6 'Geist Mono',monospace;letter-spacing:.2em;text-transform:uppercase; color:var(--faint);opacity:0;transform:translateY(4px); transition:opacity .5s ease,transform .5s cubic-bezier(.2,0,0,1)} .qt-press[data-step="in"] [data-fold="0"], .qt-press[data-step="fold-1"] [data-fold="1"], .qt-press[data-step="fold-2"] [data-fold="2"], .qt-press[data-step="gathered"] [data-fold="3"]{opacity:1;transform:none} /* The rule that becomes the page's own top bar, drawn at the real bar height. */ .qt-press-bar{position:absolute;left:0;right:0;top:var(--bar-h,60px);height:1px;background:var(--rule); transform:scaleX(0);transform-origin:left; transition:transform 1.05s cubic-bezier(.2,0,0,1)} .qt-press[data-step="gathered"] .qt-press-bar,.qt-press[data-step="read"] .qt-press-bar,.qt-press[data-step="open"] .qt-press-bar, .qt-press[data-step="out"] .qt-press-bar{transform:scaleX(1)} /* The name, already in register with the hero, so the cover lifting does not move it. */ /* Placed on the hero's own box — left edge, width and all — so the name does not move, rewrap or realign when the cover goes. */ .qt-press-name{position:absolute;left:var(--press-left,0px);top:var(--press-top,120px); width:var(--press-width,auto);overflow:hidden} .qt-press-name span{display:block;text-align:left;color:var(--ink); /* Fallback only: publishRegister copies the hero's computed type over these as soon as there is a hero to measure. */ font-family:'Geist Mono',monospace;font-weight:500; font-size:clamp(38px,7.2vw,72px);line-height:.98;text-transform:lowercase; letter-spacing:-.03em; opacity:0;transform:translateY(.42em); transition:opacity .7s ease .35s,transform .9s cubic-bezier(.2,1,.3,1) .35s} .qt-press[data-step="open"] .qt-press-name span, .qt-press[data-step="out"] .qt-press-name span{opacity:1;transform:none} @media(max-width:760px){ .qt-fold-stage{height:auto;width:min(72vw,300px);max-height:56vh} .qt-fold-caption{top:calc(50% + min(48vw,220px) + 34px)} .qt-press{align-content:center} .qt-press-name{position:static;width:auto;padding-top:0;margin-top:34px} .qt-press-name span{text-align:center} .qt-press-name span{font-size:clamp(28px,9vw,44px)} } @media(prefers-reduced-motion:reduce){.qt-press{display:none}} /* The entrance meter, in the cover's own vocabulary. */ .qt-press .mj-stage-track{background:var(--rule-soft);height:1px} .qt-press .mj-stage-track i{background:var(--moss)} .qt-press .mj-stage-skip{font:500 11.5px/1 'Geist Mono',monospace;letter-spacing:.14em; text-transform:uppercase;color:var(--faint)} /* The caption belongs to the fold, so it leaves with it. */ .qt-press[data-step="read"] .qt-fold-caption span{opacity:0} /* The reveal takes the stage the sheet just left. It is absolutely placed rather than laid out in the press's grid, because the grid is sized around the fold and would shove the name off centre for the cut that follows. */ .qt-press .rv{position:absolute;inset:0;display:grid;place-items:center;z-index:6} .qt-press .rv-inner{width:min(560px,86vw)}