/* PrimeFold Tools, look C2-dark (his 2026-11-02 verdict: "I like the darker one better"): black page, white type, Signal Gold on the one seal
   button per page, blue only inside the hero's wisp. General Sans for headings and text (Fontshare, ITF Free Font License),
   IBM Plex Mono for receipts, logs and the ruler (SIL OFL). Layout kept from look C (after monakadesign.online): centred title,
   one idea per screen, a dark "pause" chapter, the receipt card. The hero holds for 0.6 screen while the gold fold gathers out of
   the wisp (tools/fold_engine.js). Reduce applied: the ruler and its running total only; no giant number, no table, no clock.
   2026-11-03 motion pass (looks/SKILLS_REVIEW_MOTION_DESIGN_20261103.md, his picks 1, 2, 4, 5): links fade colour over 150 ms
   (transitions-dev quick token); the seal has a press state (motion-framer whileTap); the scroll hint fades out over the hero's
   runway with a CSS scroll timeline, no script (modern-web-design hero pattern); tiles in a row stagger (fold_engine.js). */
:root{--paper:#000000;--card:#0B0B0B;--ink:#FFFFFF;--grey:#A9A9A9;--line:#242424;--line-2:#161616;--night:#FFFFFF;--night-2:#CFCFCF;--bone:#000000;--bone-2:#3A3A3A;--gold:#FFD900;--gold-2:#FFE552;
--sans:"General Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;--measure:46rem}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body{margin:0}
a{color:var(--ink);text-decoration-color:#9A9A9A;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease-out,text-decoration-color .15s ease-out}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
/* top bar: brand left, three links right */
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:22px 40px 0;font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--grey)}
.hero .top{position:absolute;left:0;right:0;top:0;z-index:4}
.id{text-decoration:none;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.top nav{display:flex;gap:1.6rem;white-space:nowrap}
.top nav a{text-decoration:none;color:var(--grey);padding:.6rem 0;display:inline-block}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
/* hero: a scroll runway of 1.6 screens; the stage stays put while the fold gathers */
.hero{position:relative;height:160vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
canvas#fold{position:absolute;inset:0;width:100%;height:100%;display:block}
.fold-static{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.centre{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:31vh 1.25rem 0}
h1{font-weight:600;font-size:clamp(3rem,7.6vw,6.4rem);line-height:.96;letter-spacing:-.035em;text-wrap:balance}
.h2{margin-top:1.4rem;font-weight:500;font-size:clamp(1.4rem,2.5vw,2.2rem);letter-spacing:-.015em;color:var(--ink);max-width:none}
.line3{margin-top:1.1rem;font-size:.95rem;line-height:1.55;color:var(--grey);max-width:62ch}
.line3.def{margin-top:1.3rem;color:var(--ink);font-size:1.02rem;max-width:40ch}
.line3.def+.line3{margin-top:.5rem}
.rcpt{margin-top:.6rem;font-family:var(--mono);font-size:.74rem;letter-spacing:0;color:var(--grey)}
/* the one gold button: a round seal */
.button{width:126px;height:126px;border-radius:50%;background:var(--gold);color:#000;text-decoration:none;display:grid;place-items:center;text-align:center;font-weight:600;font-size:15px;line-height:1.15;box-shadow:inset 0 0 0 5px var(--gold),inset 0 0 0 6px rgba(0,0,0,.6);transition:transform .25s ease;flex:none}
.button:hover{background:var(--gold-2);color:#000;transform:rotate(-5deg) scale(1.04)}
.hero .button{position:absolute;left:50%;bottom:52px;z-index:4;transform:translateX(-50%)}
.hero .button:hover{transform:translateX(-50%) rotate(-5deg) scale(1.04)}
.button:active{transform:scale(.97);transition-duration:.12s}
.hero .button:active{transform:translateX(-50%) scale(.97)}
.hero .ghost{position:absolute;left:40px;bottom:40px;z-index:4;font-size:12px;letter-spacing:.14em;color:var(--grey)}
.scroll{position:absolute;right:40px;bottom:40px;z-index:4;font-size:12.8px;font-weight:500;letter-spacing:.18em;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){
  @keyframes hint-fade{to{opacity:0}}
  .scroll{animation:hint-fade linear both;animation-timeline:scroll(root);animation-range:0 60vh}
}}
/* sections: one idea per screen; the heading and its first line centred, the evidence left-aligned beneath */
.scene{padding:14vh 0 4vh;max-width:var(--measure);margin:0 auto}
h2{font-weight:600;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.04;letter-spacing:-.03em;text-align:center;text-wrap:balance;margin:0 auto 1.4rem;max-width:18ch}
h3{font-weight:500;font-size:1.3rem;letter-spacing:-.01em;margin:0 0 .6rem}
p{color:var(--grey);max-width:var(--measure)}
p+p{margin-top:.9rem}
.scene>h2+p,.band>h2+p{text-align:center;color:var(--ink);font-size:1.08rem;max-width:40rem;margin:0 auto}
.cap{color:var(--grey);font-size:.9rem;margin-top:.8rem}
.rev{color:var(--grey);font-size:.85rem;margin-top:1.4rem}
/* the pause chapter (after monaka): a black screen with one sentence */
.chapter{background:var(--night);color:var(--bone);padding:22vh 1.25rem;text-align:center;margin-top:14vh}
.chapter h2{color:var(--bone);margin:0 auto;max-width:16ch}
.chapter+.wrap .scene{padding-top:8vh}
/* receipt card; the stop row is the chapter in miniature; receipts and logs in mono */
.card{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1rem 1.2rem 0;margin:1.6rem auto 0;font-size:.95rem;line-height:1.6;max-width:var(--measure);cursor:default;color:var(--ink)}
.card .head{display:flex;justify-content:space-between;gap:1rem;color:var(--grey);font-family:var(--mono);font-size:.78rem;padding-bottom:.6rem;margin-bottom:.7rem;border-bottom:1px solid var(--line)}
.card .head span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .head span:last-child{white-space:nowrap}
.card .line{display:grid;grid-template-columns:4rem 1fr;gap:.9rem;margin:0 0 .5rem;color:var(--ink)}
.card .who{color:var(--grey);font-family:var(--mono);font-size:.78rem;padding-top:.2rem}
.card .txt{min-width:0;overflow-wrap:break-word}
.card .line.log .txt,.card .line.sh .txt,.card .line.kv .txt,.card .line.hash .txt,.card pre.txt,.card code.txt{font-family:var(--mono);font-size:.84rem;color:var(--ink)}
.card .line.sh .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.card .line.kv .txt{overflow-wrap:anywhere}
.card .line.hash .txt{font-size:.76rem}
.card .line.stop{background:var(--night);margin:.9rem -1.2rem 0;padding:.8rem 1.2rem;color:var(--bone);font-weight:400}
.card .line.stop .who{color:var(--bone)} /* the band is white in C2-dark; gold on white fails AA (1.5:1), so the label takes the chapter's ink */
.meter-row{display:grid;grid-template-columns:4rem 1fr auto;gap:.9rem;align-items:center;background:var(--night);margin:0 -1.2rem;padding:0 1.2rem .9rem;font-family:var(--mono);font-size:.78rem;color:var(--bone-2)}
.meter{height:8px;border:1px solid var(--night-2);background:var(--night)}
.meter i{display:block;height:100%;background:var(--gold)}
.mlabel{white-space:nowrap}
.card .txt .c{opacity:0}.card .txt .c.on{opacity:1}
.card pre.txt{margin:0;white-space:pre-wrap}
.nb{white-space:nowrap}
.demo .card{padding-bottom:1rem}
.demo+p{margin-top:1.6rem}
/* tiles (lean pass): one of his fold icons, a title, one short line. The icon is a canvas the fold engine gathers on scroll;
   with JavaScript off the <noscript> SVG stands in. Three across on a desk, one column on a phone. */
.tiles{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem 2rem;margin:2.6rem auto 0;max-width:var(--measure);text-align:center}
.tiles li{display:flex;flex-direction:column;align-items:center}
.ico{width:76px;height:76px;position:relative;flex:none}
.ico canvas{position:absolute;left:-100%;top:-100%;width:300%;height:300%;display:block;pointer-events:none}   /* 3x the icon: room for the scatter and the haze */
.ico svg{width:100%;height:100%;display:block}
.tiles strong,.tiles span,.door h2{position:relative;z-index:1}
.tiles .ico{margin-bottom:1.1rem}
.tiles strong{font-weight:500;color:var(--ink);font-size:1.08rem;line-height:1.3}
.tiles span{color:var(--grey);font-size:.95rem;line-height:1.5;margin-top:.35rem;max-width:24ch}
.tiles .price,.tiles .soon{margin-top:.6rem;max-width:none}
.door .ico{width:64px;height:64px;margin:0 auto 1.2rem}
/* technical drawing */
.drawing{margin:1.8rem auto 0;max-width:var(--measure)}
.drawing svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:4px;background:var(--card)}
/* the claims ruler (from look B): a week per bar, a gold pin, the running total in mono */
.ruler{margin:2.4rem auto 0;max-width:var(--measure)}
.ruler .lab{font-family:var(--mono);font-size:.76rem;color:var(--grey)}
.scrub{position:relative;height:60px;border:1px solid var(--line);border-radius:4px;background:var(--card);display:flex;align-items:flex-end;padding:0 12px 10px;cursor:ew-resize;margin-top:.6rem;touch-action:none}
.scrub i{flex:1;display:block;background:var(--ink);opacity:.22;margin:0 2px;min-height:3px}
.scrub .pin{position:absolute;top:6px;bottom:6px;width:2px;background:var(--gold);left:calc(100% - 13px);pointer-events:none}
.ruler .out{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.7rem;font-family:var(--mono);font-size:.84rem;color:var(--grey)}
.ruler .out b{font-weight:500;font-size:1.6rem;color:var(--ink);font-variant-numeric:tabular-nums}
.ruler .hint,.ruler .def{font-size:.85rem;color:var(--grey);margin-top:.4rem}
/* the shelf and the door */
.band{padding:14vh 0 0;max-width:var(--measure);margin:0 auto}
.shelf .price{color:var(--ink);font-family:var(--mono);font-size:.9rem;white-space:nowrap}
.shelf .soon{color:var(--grey);font-family:var(--mono);font-size:.84rem;white-space:nowrap}
.tiles .soon-link{margin-top:.45rem;max-width:none;font-size:.9rem}
.tiles .soon-link a{color:var(--grey)}
.tiles .soon-link a:hover{color:var(--ink)}
.guarantee{color:var(--grey);font-size:.9rem;line-height:1.5}
.tiles .guarantee{margin-top:.55rem;max-width:26ch}
.item .guarantee{margin-top:.9rem;max-width:52ch}
.more{margin-top:1.1rem;text-align:center}
.ask{margin:1.2rem auto 0;font-size:1.15rem;text-align:center;color:var(--ink)}
/* shelf page */
.hero-plain{padding:10vh 0 0;max-width:var(--measure);margin:0 auto;text-align:center}
.hero-plain h1{font-size:clamp(2.6rem,6vw,5rem)}
.hero-plain .cta{justify-content:center}
.lede{font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--ink);margin:1.2rem auto 0;max-width:40ch}
.item{padding:10vh 0 0;max-width:var(--measure);margin:0 auto}
.item h2{text-align:left;margin:0 0 1rem;max-width:none}
.item h2 .price{font-family:var(--mono);font-weight:400;font-size:.42em;color:var(--grey);letter-spacing:0;margin-left:.7rem;white-space:nowrap}
.item .card{margin-top:1.1rem;padding-bottom:1rem}
.item .link{margin-top:1rem}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:1.6rem}
.cta .button{width:104px;height:104px;font-size:14px}
.ghost{color:var(--ink);font-size:1rem}
.stamp{color:var(--grey);font-size:.85rem;margin-top:.6rem;text-align:center}
/* footer */
footer{padding:14vh 0 4rem;max-width:72rem;margin:0 auto}
footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;color:var(--grey);font-size:.9rem;border-top:1px solid var(--line);padding-top:1.4rem}
footer a{color:var(--grey);text-decoration:none;display:inline-block;padding:.4rem 0}
footer a:hover{color:var(--ink)}
@media (max-width:899px){
  .top{padding:18px 20px 0;flex-direction:column;gap:.1rem;align-items:center}
  .top nav{gap:1.1rem}
  .centre{padding-top:34vh}
  h1{font-size:clamp(2.7rem,13.5vw,4rem)}
  .h2{font-size:1.35rem;margin-top:1.1rem}
  .hero .button{width:108px;height:108px;font-size:14px;bottom:44px}
  .hero .ghost{left:20px;bottom:22px}.scroll{right:20px;bottom:22px}
  .scene{padding:12vh 0 3vh}
  .chapter{padding:16vh 1.25rem;margin-top:12vh}
  .card .head{flex-direction:column;gap:.15rem}.card .head span:first-child{white-space:normal;overflow:visible;text-overflow:clip}
  .meter-row{grid-template-columns:4rem 1fr;row-gap:.35rem}.meter-row .mlabel{grid-column:2;white-space:normal}
  .ruler .out{flex-direction:column;gap:.2rem}
  .band,.item{padding-top:10vh}
  .tiles{grid-template-columns:1fr;gap:2.2rem}
  .hero-plain{padding-top:7vh}
  footer{padding-top:10vh}
}
@media (max-width:599px){.drawing svg{display:none}.drawing .cap{display:none}}
@media (prefers-reduced-motion:reduce){a{transition:none}.button,.button:hover,.button:active,.hero .button:hover,.hero .button:active{transition:none;transform:none}.hero .button,.hero .button:hover,.hero .button:active{transform:translateX(-50%)}.card{cursor:default}}

/* STAGE candidate: the trace canvas sits behind everything; the page's blocks stack above it */
#trace{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body>*:not(#trace){position:relative;z-index:1}

/* the failure log (stage candidate; class faillog, since the replay card already has a .log line): a strip of ledger cards that slides with the page scroll.
   Desktop with scroll-driven animations: the section is a 260vh runway, the strip is pinned and travels its own width.
   Otherwise (phones, old browsers, reduced motion): a strip you scroll sideways yourself, or one column on a phone. */
.faillog{position:relative;padding:14vh 0 4vh}
.faillog .pin{max-width:none;padding:0 1.25rem}
.faillog h2{max-width:22ch}
.log-body{text-align:center;max-width:var(--measure);margin:0 auto;color:var(--grey)}
.ledger{margin:2.2rem 0 0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:.5rem}
.ledger-track{list-style:none;margin:0;padding:0 max(1.25rem,calc((100vw - var(--measure))/2));display:flex;align-items:flex-start;gap:1rem;width:max-content}
.ledger-track li{width:24rem;flex:none;display:flex}
.ledger-track blockquote{margin:0;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1rem 1.2rem;font-size:.9rem;line-height:1.5;color:var(--ink);display:flex;flex-direction:column;gap:.5rem}
.ledger-track .when{font-family:var(--mono);font-size:.74rem;color:var(--grey)}
.ledger-track strong{font-weight:500;font-size:1.02rem;line-height:1.3}
.ledger-track p{margin:0;color:var(--grey);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}   /* long entries are clamped here; 'Full entry' opens the ledger */
.ledger-track code{font-family:var(--mono);font-size:.84em;color:var(--ink)}
.ledger-track em{font-style:normal;color:var(--ink)}
.ledger-track .more{font-size:.8rem;color:var(--grey);margin-top:.2rem}
.ledger-track .k{display:inline-block;font-family:var(--mono);font-size:.7rem;color:var(--gold);margin-right:.6rem;letter-spacing:.06em;text-transform:uppercase}
.ledger-track .who{font-family:var(--mono);font-size:.72rem;color:var(--grey);margin-top:auto}
.log-cap{text-align:center;max-width:var(--measure);margin:1.6rem auto 0}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){
  .faillog{height:180vh;padding:0;view-timeline-name:--log;view-timeline-axis:block}
  .faillog .pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .ledger{overflow:hidden}
  @keyframes ledger-run{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 100%))}}
  .ledger-track{animation:ledger-run linear both;animation-timeline:--log;animation-range:cover 12% cover 88%}
}}
@media (max-width:899px){.ledger{overflow:visible}.ledger-track{width:auto;flex-direction:column;padding:0}.ledger-track li{width:auto}}

/* the line (stage candidate): the diagram rides a 200vh runway, pinned while the belt runs; a plain figure under reduced motion */
.convey{position:relative;max-width:none;margin:1.8rem 0 0}
.convey .pin{max-width:var(--measure);margin:0 auto}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .convey{height:150vh}
  .convey .pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
}
@media (min-width:600px) and (max-width:899px) and (prefers-reduced-motion:no-preference){
  .convey{height:150vh}
  .convey .pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
}
@media (max-width:599px){.convey{height:auto;margin:0}.convey .pin{position:static;height:auto}}   /* the drawing is hidden under 600 px (an earlier call), so no runway there */

/* adopters (stage candidate): three named changes, no counts; the sentence, then one link */
.facts{gap:2rem 2rem}
.facts li{align-items:center}
.facts strong{font-weight:400;color:var(--ink);font-size:1.02rem;line-height:1.45;max-width:28ch}
.facts span{margin-top:.6rem}
.adopt-cap{text-align:center;margin-top:1.6rem}
/* the six (2026-11-03): phones see four ledger cards and a line to the rest; desktops see the strip and not the line */
.log-more{display:none;text-align:center;max-width:var(--measure);margin:1.2rem auto 0}
@media (max-width:899px){.ledger-track li:nth-child(n+5){display:none}.log-more{display:block}}
/* the tools page stage (2026-11-03): same hero, shorter runway; its title is the page's h1 */
.hero.short{height:135vh}
.hero.short h1{font-size:clamp(2.6rem,6vw,5rem)}
.hero.short .h2{color:var(--grey);font-weight:400;font-size:clamp(1.1rem,1.6vw,1.35rem)}
@media (max-width:899px){.hero.short{height:125vh}}
/* kit points (2026-11-03): one point per line, the verb or the claim in ink, the rest grey */
.points{list-style:none;margin:.9rem 0 0;padding:0;max-width:var(--measure)}
.points li{padding:.45rem 0;border-top:1px solid var(--line-2);color:var(--grey);line-height:1.5}
.points li:first-child{border-top:0}
.points strong{font-weight:500;color:var(--ink)}