@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Gaegu";src:url(fonts/gaegu-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Gaegu";src:url(fonts/gaegu-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
 --paper:#fff;--desk:#f3f4f6;--ink:#202124;--pencil:#5f6168;--accent:#d42a5e;--accent-soft:#fbd7e2;--sticky:#fff1a8;
 --sc-canvas:var(--paper);--sc-surface:#fff;
 --on-ink:#fff;--on-ink-soft:#c4c5ca;--on-ink-faint:#9a9ca3;--on-ink-hand:#d6d7db;--accent-hover:#b9204f;--me-ground:#fffbe6;--talk-ground:#fdf0f4;--sc-ink:var(--ink);--sc-ink-soft:var(--pencil);--sc-accent:var(--accent);--sc-accent-ink:#fff;
 --sc-font-display:"Bricolage Grotesque",system-ui,sans-serif;--sc-font-text:"Geist",system-ui,sans-serif;
 --hand:"Gaegu","Comic Sans MS",cursive;
 --r:14px;--ease:cubic-bezier(.22,1,.36,1);
 --shadow:0 1px 2px hsl(220 10% 20% / .08),0 10px 24px -8px hsl(220 10% 20% / .18);
 --tab-w:44px;
 interpolate-size:allow-keywords;
 /* Paper tooth, drawn by the browser. Strength is the alpha line in each matrix (.62/-.28 grain, .27/-.11 mottle). */
 --tex-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .13 0 0 0 0 .15 .62 0 0 0 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 --tex-mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0078125' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .3 .27 0 0 0 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
 --tex-grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .38 0 0 0 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 --paper-tex:var(--tex-mottle),var(--tex-grain);
}
body{background:var(--paper);background-image:var(--paper-tex);color:var(--ink)}
h1,h2,h3{font-family:var(--sc-font-display);font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:0;text-wrap:balance}
h2{font-size:clamp(2.4rem,1.6rem + 3vw,4.4rem)}
h3{font-size:1.35rem;letter-spacing:-.02em}
p{margin:0}
em{font-style:italic;color:var(--accent);padding-bottom:.06em}
.hand{font-family:var(--hand);font-size:1.45rem;line-height:1.15;color:var(--pencil)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--on-ink);padding:10px 14px;border-radius:10px}
.skip:focus{top:12px}
.doodle{pointer-events:none;user-select:none}
.ch{position:relative;padding:clamp(4rem,8vw,7rem) clamp(1.25rem,5vw,5rem);padding-right:calc(var(--tab-w) + clamp(1.25rem,5vw,5rem))}

/* Buttons: one pill shape, one label per intent. */
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--accent);color:var(--on-ink);font-weight:600;text-decoration:none;border:0;border-radius:999px;padding:.85em 1.5em;cursor:pointer;transition:transform 160ms var(--ease),background-color 160ms var(--ease)}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:scale(.97)}
.link{color:var(--ink);font-weight:600;text-underline-offset:.3em}

/* Chapter tabs: sticky index tabs on the sketchbook's edge. */
.tabs{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:5px}
.tabs a{writing-mode:vertical-rl;font-family:var(--hand);font-size:1.05rem;line-height:1;color:var(--ink);text-decoration:none;background:var(--sc-surface);border:1.5px solid var(--ink);border-right:0;border-radius:10px 0 0 10px;padding:12px 9px;transform:translateX(5px);transition:transform 200ms var(--ease),background-color 200ms var(--ease)}
.tabs a:hover{transform:translateX(0)}
.tabs a[aria-current]{background:var(--accent-soft);font-weight:700;transform:translateX(0)}
.motion-toggle{position:fixed;left:14px;top:14px;z-index:60;font-size:.8rem;background:var(--sc-surface);border:1.5px solid var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer}

/* Pencil line that draws into each chapter. */
.thread{width:min(560px,60%);height:36px;margin:0 0 2.2rem;overflow:visible}
.thread path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .thread path{animation:thread-draw linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
 }
}
@keyframes thread-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* 1. Hello: a title page. */
.hello{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:2rem;padding-top:clamp(2rem,5vw,4rem);overflow:clip}
.hello-hi{margin-bottom:.6rem;transform:rotate(-2deg)}
.hello-arrow{display:inline-block}
.hello h1{font-size:min(clamp(4.6rem,2rem + 8vw,9.5rem),23vw);line-height:.9;letter-spacing:-.055em}
.hello-lead{max-width:30ch;font-size:clamp(1.1rem,1rem + .4vw,1.35rem);margin-top:1.6rem;color:var(--ink)}
.hello-actions{display:flex;gap:1.6rem;align-items:center;margin-top:2rem}
.portrait-scene{position:relative;width:min(100%,540px);aspect-ratio:480/540;justify-self:center}
.paper-sheet{position:absolute;inset:4% 2% 0 6%;background:var(--sticky);border-radius:var(--r);transform:rotate(-3deg);box-shadow:var(--shadow)}
.tape{position:absolute;width:96px;height:28px;background:hsl(0 0% 100% / .62);border:1px solid hsl(220 10% 60% / .25);z-index:2}
.tape-a{top:-12px;left:18%;transform:rotate(-6deg)}
.tape-b{top:-10px;right:14%;transform:rotate(5deg)}
.portrait-plane{position:absolute;inset:0;display:grid;place-items:end center}
.rig{width:100%}
.rig .character{width:100%;height:auto}
.character [fill="var(--accent)"]{fill:var(--accent)}
.character [stroke="var(--accent)"]{stroke:var(--accent)}
.hello-front{position:absolute;inset:0;pointer-events:none}
.hello-front .rays{position:absolute;width:72px;top:6%;right:4%}
.hello-front .spark{position:absolute;width:64px;top:30%;left:-4%}
.hello-front .sprig{position:absolute;width:96px;bottom:2%;right:-6%;transform:rotate(-20deg)}
.hello-btn{position:absolute;left:4%;bottom:30%;font-family:var(--hand);font-size:1.2rem;background:var(--sc-surface);border:1.5px solid var(--ink);border-radius:999px;padding:4px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
@media (hover:hover) and (pointer:fine){.hello-btn:hover,.portrait-scene:has(.character :hover) .hello-btn{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}}
.hello-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.hello-btn:focus-visible{outline:2.5px solid var(--accent);outline-offset:4px}
/* Nudge note: points at the button until the first hello, then leaves for the visit. */
.hello-nudge{position:absolute;left:-3%;bottom:calc(30% + 38px);display:flex;align-items:flex-start;gap:0;font-size:clamp(1.15rem,.9rem + .6vw,1.4rem);line-height:1;color:var(--ink);transform:rotate(-6deg);pointer-events:none;transition:opacity 150ms var(--ease)}
.hello-nudge svg{width:clamp(22px,2vw,30px);margin-top:.5em}
.greeted .hello-nudge{opacity:0}
.portrait-plane .character{pointer-events:none}
.portrait-plane .character *{pointer-events:visiblePainted;cursor:pointer}
.speech{position:absolute;left:4%;bottom:40%;background:var(--sc-surface);border:1.5px solid var(--ink);border-radius:16px 16px 16px 4px;padding:8px 14px;color:var(--ink);opacity:0;transform:translateY(6px) scale(.97);transform-origin:bottom left;transition:opacity 150ms var(--ease),transform 150ms var(--ease);pointer-events:none;min-height:1em}
.speech.open{opacity:1;transform:none;transition-duration:250ms}
.speech:empty{visibility:hidden}
.sticky-note{position:absolute;right:calc(var(--tab-w) + 2%);bottom:9%;width:200px;background:var(--sticky);padding:16px 18px 30px;transform:rotate(4deg);box-shadow:var(--shadow);z-index:3}
.sticky-note .hand{color:var(--ink);font-size:1.25rem}
.note-smile{position:absolute;width:34px;right:12px;bottom:8px}
.hello-place{position:absolute;left:clamp(1.25rem,5vw,5rem);bottom:1.6rem;font-size:.85rem;color:var(--pencil)}

/* 2. Start: authored silence. */
.start{min-height:55svh;display:flex;flex-direction:column;justify-content:center;padding-left:clamp(1.25rem,12vw,14rem)}
.start .hand{margin-bottom:1rem}
.start h2{font-size:clamp(2.6rem,1.6rem + 4vw,5.6rem);max-width:15ch;line-height:1.05}

/* 3. The peak: sketch to site. */
.peak{--sc-p:0;background:var(--desk);padding:0}
.peak-stage{
 --draw:clamp(0,var(--sc-p)/.35,1);
 --fill:clamp(0,(var(--sc-p) - .35)/.2,1);
 --wipe:clamp(0,(var(--sc-p) - .55)/.25,1);
 --settle:clamp(0,(var(--sc-p) - .8)/.15,1);
 display:grid;grid-template-columns:minmax(240px,1fr) auto;align-items:center;gap:clamp(1.5rem,3vw,3rem);padding:0 calc(var(--tab-w) + clamp(1.25rem,4vw,4rem)) 0 clamp(1.25rem,4vw,4rem);background:var(--desk)
}
.peak-head h2{font-size:clamp(2rem,1.4rem + 2vw,3.2rem)}
.peak-steps{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.7rem}
.peak-steps li{display:flex;align-items:center;gap:.7rem;color:color-mix(in oklab,var(--ink) calc(72% + var(--s)*28%),var(--desk))}
.tick{width:22px;height:22px;border:1.8px solid var(--ink);border-radius:6px;position:relative;flex:none}
.tick::after{content:"";position:absolute;inset:3px;background:var(--accent);border-radius:3px;transform:scale(var(--s));transition:transform 120ms linear}
.peak-page{position:relative;margin:0;background:var(--sc-surface);padding:14px;border-radius:var(--r);box-shadow:var(--shadow);transform:rotate(calc((1 - var(--settle))*-1.2deg))}
.peak-frame{position:relative;width:min(62vw,calc((100svh - 220px)*1.6));aspect-ratio:1440/900;overflow:hidden;border-radius:8px;background:var(--sc-surface)}
.peak-shot{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 calc((1 - var(--wipe))*100%) 0 0)}
.sketch{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 0 0 calc(var(--wipe)*100%))}
.sketch .ink{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--draw) - var(--d))/.42,1))}
.sketch .letters text{font-family:var(--sc-font-display);font-weight:700;font-size:150px;fill:color-mix(in oklab,var(--ink) calc(var(--fill)*22%),transparent);stroke:var(--ink);stroke-width:2.2;clip-path:inset(0 calc((1 - clamp(0,(var(--draw) - var(--d))/.5,1))*100%) 0 0)}
.sketch .blocks{fill:color-mix(in oklab,var(--ink) 10%,transparent);opacity:var(--fill)}
.marker{position:absolute;top:-6%;height:112%;width:54px;left:calc(var(--wipe)*100% - 27px);background:var(--accent);opacity:clamp(0,min(var(--wipe),1 - var(--wipe))*12,.5);mix-blend-mode:multiply;transform:rotate(4deg);border-radius:8px}
.peak-page figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;padding:12px 4px 2px;font-size:.92rem;color:var(--pencil);opacity:var(--settle);transform:translateY(calc((1 - var(--settle))*10px))}
.peak-page figcaption a{color:var(--ink);font-weight:600}
/* A keyboard user can reach the caption before the reveal ends; show it while it holds focus. */
.peak-page figcaption:focus-within{opacity:1;transform:none}
.fullview-open{background:none;border:1.5px solid var(--ink);border-radius:999px;padding:.2em .9em;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--ink)}
.fullview-open:active{transform:scale(.97)}
#fullview{border:0;padding:0;background:transparent;max-width:min(1440px,94vw);max-height:94vh;overflow:visible}
#fullview::backdrop{background:hsl(220 10% 12% / .7)}
#fullview img{display:block;width:100%;height:auto;max-height:86vh;object-fit:contain;border-radius:10px;box-shadow:var(--shadow);background:var(--sc-surface)}
#fullview .close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);background:var(--sc-surface);font-size:1.4rem;cursor:pointer}
.fullview-note{color:var(--on-ink);font-size:.85rem;margin-top:.6rem}
.shelf-nav{position:absolute;left:clamp(1.25rem,5vw,5rem);bottom:clamp(1.5rem,6vh,4rem);display:flex;gap:.5rem;z-index:2}
.shelf-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:var(--sc-surface);font-size:1.1rem;cursor:pointer;transition:transform 140ms var(--ease)}
.shelf-nav button:active{transform:scale(.94)}
.demo-tag{font-family:var(--hand);font-size:1.1rem;font-weight:700;color:var(--ink);background:var(--sticky);padding:1px 10px;border-radius:6px;transform:rotate(-2deg)}
.peak-doodle{position:absolute;width:70px;opacity:var(--settle);transform:translate(calc((1 - var(--settle))*var(--fx)),calc((1 - var(--settle))*var(--fy)))}
.pd-0{top:-34px;left:-38px;--fx:-80px;--fy:-60px}
.pd-1{top:22%;right:-52px;--fx:90px;--fy:0px}
.pd-2{bottom:12%;left:-60px;--fx:-90px;--fy:30px}
.pd-3{top:-30px;right:16%;--fx:0px;--fy:-80px;width:52px}
.pd-4{top:38%;left:-74px;width:56px;--fx:-80px;--fy:0px}
.pd-5{bottom:-26px;right:-30px;--fx:60px;--fy:60px}

/* 4. How it was made: a ruled notebook page. */
.making-head{display:grid;gap:1rem;max-width:62ch;margin-bottom:2.5rem}
.making-head p{color:var(--pencil)}
.notebook{background:var(--paper-tex),repeating-linear-gradient(transparent 0 37px,hsl(220 30% 80% / .5) 37px 38px),var(--sc-surface);border:1.5px solid var(--ink);border-radius:var(--r);padding:2rem clamp(1.2rem,4vw,3rem) 2rem clamp(3rem,7vw,5.5rem);position:relative;box-shadow:var(--shadow);max-width:1100px}
.notebook::before{content:"";position:absolute;top:0;bottom:0;left:clamp(2rem,5vw,4rem);border-left:2px solid var(--accent-soft)}
.nb-row{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:1.5rem;padding:1.1rem 0;border-bottom:1px dashed hsl(220 10% 50% / .35)}
.nb-row:last-child{border-bottom:0}
.nb-row h3{display:flex;gap:.5rem;align-items:baseline}
.nb-num{font-size:1.5rem;color:var(--accent)}
.nb-row p{max-width:46ch;color:var(--ink)} /* Geist's "0" is wide: 46ch holds about 68 prose characters per line */

/* 4b. More from the sketchbook: three demo pages taped in after Pearl. */
.more-work{margin-top:clamp(3.5rem,6vw,5.5rem);max-width:1180px}
.more-head{display:grid;gap:.3rem;margin-bottom:2rem}
.more-title{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem)}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.5vw,2.2rem)}
.more-card{position:relative;background:var(--sc-surface);border-radius:var(--r);padding:14px 14px 20px;box-shadow:var(--shadow);display:grid;gap:.5rem;align-content:start;rotate:var(--rot,0deg);transition:rotate 400ms cubic-bezier(.34,3.85,.64,1),translate 400ms cubic-bezier(.34,3.85,.64,1),opacity 500ms var(--ease),transform 500ms var(--ease)}
.more-card:nth-child(1){--rot:-1.4deg}.more-card:nth-child(2){--rot:1deg}.more-card:nth-child(3){--rot:-.6deg}
@media (hover:hover) and (pointer:fine){.more-card:hover{rotate:0deg;translate:0 -4px;transition:rotate 250ms var(--ease),translate 250ms var(--ease),opacity 500ms var(--ease),transform 500ms var(--ease)}}
.more-card .tape-a{top:-12px;left:36%}
.more-shot{border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;aspect-ratio:16/10;margin-bottom:.4rem}
.more-shot img{width:100%;height:100%;object-fit:cover}
.more-card .demo-tag{justify-self:start;font-size:1rem}
.more-card h4{font-family:var(--sc-font-display);font-size:1.4rem;font-weight:700;letter-spacing:-.025em;margin:.1rem 0 0}
.more-kind{font-size:.88rem;color:var(--pencil)}
.more-chips{list-style:none;padding:0;margin:.2rem 0;display:flex;flex-wrap:wrap;gap:.35rem}
.more-chips li{font-size:.78rem;border:1.2px solid var(--pencil);border-radius:999px;padding:.15em .7em;color:var(--ink)}
.work-dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;margin:.4rem 0 .6rem}
.work-dl dt{font-weight:700}
.work-dl dd{margin:0}

/* 5. The person: Polaroids. */
.me{background:var(--sc-surface)be6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.me,.talk{row-gap:0}
.me .thread{grid-column:1/-1}
.me-copy{display:grid;gap:1.1rem;max-width:52ch}
.me-copy h2{margin-bottom:.3rem}
/* Honesty slip: a taped scrap of paper, its opening line underlined by hand. */
.me-honest{position:relative;background:var(--paper-tex),var(--sc-surface);padding:1.3rem 1.3rem 1.1rem;border-radius:4px;box-shadow:var(--shadow);rotate:-1deg}
.me-honest::before{content:"";position:absolute;top:-12px;left:22px;width:84px;height:24px;background:hsl(0 0% 100% / .62);border:1px solid hsl(220 10% 60% / .25);rotate:-5deg}
.me-honest strong{padding-bottom:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 4c3-3 6-3 9 0s6 3 9 0 4-2 6-1' fill='none' stroke='%23d42a5e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom/18px 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.polaroids{position:relative;height:clamp(380px,40vw,520px)}
.polaroid{position:absolute;width:clamp(170px,17vw,240px);margin:0;background:var(--sc-surface);padding:12px 12px 14px;box-shadow:var(--shadow)}
.polaroid img,.polaroid .art-fallback{width:100%;aspect-ratio:1;object-fit:cover;background:var(--desk)}
.polaroid .art-fallback{padding:22%}
/* Caption sits under the photo and grows the strip, so a wrapped line never covers the picture. */
.polaroid figcaption{margin-top:10px;padding-left:2px;line-height:1.1;min-height:2.2em;color:var(--ink)}
.p-0{left:0;top:12%;rotate:-6deg}
.p-1{left:37%;top:0;rotate:4deg;z-index:2}
.p-2{left:62%;top:50%;rotate:-2deg;z-index:1}

/* 6. What I can build for you. */
.build h2{margin-bottom:2.4rem}
.offer{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:auto auto;gap:1.2rem;max-width:1100px}
.offer-card{position:relative;background:var(--sc-surface);border:1.5px solid var(--ink);border-radius:var(--r);padding:1.6rem;display:grid;gap:.8rem;align-content:start;overflow:hidden}
.offer-lead{grid-row:1/3;background:var(--sticky);padding:2.2rem;gap:1.1rem}
.offer-lead h3{font-size:clamp(2rem,1.5rem + 1.6vw,3rem)}
.offer-lead ul{margin:0;padding-left:1.1rem;display:grid;gap:.3rem}
.offer-lead .btn{justify-self:start;margin-top:.6rem}
.offer-card:not(.offer-lead){padding-right:5.5rem}
.offer-doodle{position:absolute;width:64px;right:16px;top:16px;opacity:.85}
.offer-lead .offer-doodle{width:90px}

/* 7. The shelf: a pan rail. */
.shelf{padding:0;background:var(--desk)}
.shelf-stage{display:flex;align-items:center;overflow:hidden;background:var(--desk)}
.shelf-rail{display:flex;gap:28px;align-items:stretch;padding:0 clamp(1.25rem,5vw,5rem);will-change:transform}
.shelf-intro,.shelf-end{flex:none;width:340px;display:grid;align-content:center;gap:.8rem}
.shelf-intro p:last-child,.shelf-end p:last-child{color:var(--pencil)}
.shelf-end{width:260px}
.shelf-card{flex:none;width:290px;position:relative;background:var(--sc-surface);border-radius:var(--r);padding:14px 14px 18px;box-shadow:var(--shadow);display:grid;gap:.45rem;align-content:start}
.shelf-art{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--desk);display:grid;place-items:center;margin-bottom:.4rem}
.shelf-art img{width:100%;height:100%;object-fit:cover}
.shelf-art .art-fallback{width:40%}
.shelf-type{font-size:.78rem;color:var(--pencil)}
.shelf-card h3{font-size:1.15rem}
.shelf-status{font-size:.8rem;font-weight:600;color:var(--accent)}
.shelf-open{justify-self:start;margin-top:.3rem;background:none;border:1.5px solid var(--ink);border-radius:999px;padding:.35em 1em;cursor:pointer;font-size:.88rem}
.more-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.3rem}
.more-actions .shelf-open{margin-top:0}
/* Visit site: the filled main action beside the outlined Details / Full view pills. */
.visit-link{display:inline-block;background:var(--ink);color:var(--on-ink);border:1.5px solid var(--ink);border-radius:999px;padding:.35em 1em;font-size:.88rem;font-weight:600;text-decoration:none;transition:transform 160ms var(--ease)}
.visit-link:active{transform:scale(.97)}
.visit-link:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
.peak-page figcaption .visit-link{color:var(--on-ink);padding:.2em .9em;font-size:.85rem}
.shelf-secret{position:absolute;width:46px;top:-14px;right:-12px;transform:scale(0) rotate(-30deg);transition:transform 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){.shelf-card:hover .shelf-secret{transform:scale(1) rotate(0);transition:transform 250ms cubic-bezier(.34,1.36,.64,1)}}
.shelf-card:focus-within .shelf-secret{transform:scale(1) rotate(0);transition:transform 250ms cubic-bezier(.34,1.36,.64,1)}

/* 8. Questions. */
.questions h2{margin-bottom:2rem}
.faq{max-width:820px;border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1.5px solid var(--ink)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem .2rem;font-weight:600;font-size:1.12rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.plus{width:16px;height:16px;position:relative;flex:none}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--ink);transition:transform 250ms var(--ease)}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size 250ms var(--ease),content-visibility 250ms allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details p{padding:0 .2rem 1.2rem;max-width:62ch;color:var(--pencil)}

/* 9. Let's talk: the contact game. */
.talk{background:var(--talk-ground);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.talk .thread{grid-column:1/-1}
.talk-hint{margin:.6rem 0 1.4rem}
.picks{border:0;padding:0;margin:0 0 1.4rem;display:flex;flex-wrap:wrap;gap:.6rem}
.pick{position:relative;display:inline-flex;align-items:center;gap:.55rem;background:var(--sc-surface);border:1.5px solid var(--ink);border-radius:999px;padding:.55em 1.1em .55em .7em;cursor:pointer;font-weight:600;transition:transform 140ms var(--ease)}
.pick:active{transform:scale(.97)}
.pick input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.pick:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.box{width:22px;height:22px;border:1.8px solid var(--ink);border-radius:6px;display:grid;place-items:center;transition:background-color 160ms var(--ease)}
.box svg{width:16px;fill:none;stroke:var(--on-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 220ms var(--ease) 80ms}
.pick:has(input:checked){background:var(--accent-soft)}
.pick:has(input:checked) .box{background:var(--accent);border-color:var(--accent)}
.pick:has(input:checked) .box svg{stroke-dashoffset:0}
.scene-paper{position:relative;aspect-ratio:16/10;background:var(--paper-tex),repeating-linear-gradient(90deg,transparent 0 31px,hsl(220 30% 85% / .4) 31px 32px),var(--sc-surface);border:1.5px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.scene-item{position:absolute;width:30%;clip-path:inset(0 100% 0 0);transition:clip-path 500ms var(--ease)}
.scene-item.on{clip-path:inset(0 0 0 0)}
.pick-art{width:100%;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pick-img{width:70%;margin:auto}
.si-website{left:5%;top:8%}
.si-content{left:36%;top:12%;width:24%}
.si-automation{left:6%;bottom:6%;width:22%}
/* "Just saying hi": the mini character answers. Pops from the tail instead of wiping. */
.si-hi{right:30%;bottom:22%;width:auto;max-width:46%;clip-path:none;opacity:0;transform:scale(.6);transform-origin:bottom right;transition:opacity 150ms var(--ease),transform 150ms var(--ease)}
.si-hi.on{opacity:1;transform:none;transition:opacity 250ms var(--ease),transform 500ms cubic-bezier(.34,1.36,.64,1)}
.mini-speech{position:relative;background:var(--sc-surface);border:1.5px solid var(--ink);border-radius:14px;padding:6px 12px;color:var(--ink);font-size:clamp(1.05rem,.85rem + .5vw,1.3rem);line-height:1.1;text-wrap:balance;max-width:15ch}
/* Tail pointing right at the character: ink triangle with a white one inside. */
.mini-speech::before,.mini-speech::after{content:"";position:absolute;top:50%;border-style:solid;border-color:transparent}
.mini-speech::before{right:-11px;margin-top:-7px;border-width:7px 0 7px 11px;border-left-color:var(--ink)}
.mini-speech::after{right:-8px;margin-top:-5px;border-width:5px 0 5px 8px;border-left-color:var(--sc-surface)}
.scene-empty{position:absolute;left:6%;top:42%;transition:opacity 150ms var(--ease)}
.scene.has-picks .scene-empty{opacity:0}
.mini-scene{position:absolute;right:3%;bottom:-2px;width:30%}
.talk-form{display:grid;gap:.45rem;background:var(--sc-surface);border:1.5px solid var(--ink);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow);transition:box-shadow 300ms var(--ease)}
.talk-form.ready{box-shadow:6px 6px 0 var(--accent)}
.talk-form label{font-weight:600;font-size:.92rem;margin-top:.5rem}
.talk-form input,.talk-form textarea{border:1.5px solid var(--pencil);border-radius:10px;padding:.7em .8em;background:var(--sc-surface);color:var(--ink)}
.talk-form input:focus-visible,.talk-form textarea:focus-visible{border-color:var(--ink)}
.talk-form [aria-invalid]{border-color:var(--accent)}
.field-help{font-size:.82rem;color:var(--pencil);margin:.4rem 0 .6rem}
.talk-form .btn{justify-self:start}
.form-status{font-size:.9rem;min-height:1.4em;color:var(--ink)}
.connect{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.connect-toggle{font-family:var(--hand);font-size:1.3rem;background:var(--sc-surface);border:1.5px solid var(--ink);border-radius:999px;padding:.2em 1em;cursor:pointer}
.connect-toggle span{display:inline-block;transition:transform 250ms var(--ease)}
.connect.open .connect-toggle span{transform:rotate(45deg)}
.connect-list{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0}
.connect-list li{opacity:0;transform:translateY(6px) scale(.97);visibility:hidden;transition:opacity 150ms var(--ease),transform 150ms var(--ease),visibility 0s 150ms}
.connect.open .connect-list li{opacity:1;transform:none;visibility:visible;transition:opacity 250ms var(--ease) calc(var(--i)*40ms),transform 250ms var(--ease) calc(var(--i)*40ms),visibility 0s calc(var(--i)*40ms)}
.connect-list a,.connect-list .soon{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);background:var(--sc-surface);border:1.5px dashed var(--ink);border-radius:12px;padding:.4em .8em;font-size:.92rem}
.connect-list .soon{color:var(--pencil);border-color:var(--pencil)}
.connect-list svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.connect-list small{color:var(--pencil)}

/* 10. Footer. */
.foot{background:var(--ink);background-image:var(--tex-grain-light);color:var(--on-ink);padding:3.5rem clamp(1.25rem,5vw,5rem) 2rem calc(clamp(1.25rem,5vw,5rem));padding-right:calc(var(--tab-w) + clamp(1.25rem,5vw,5rem));display:grid;grid-template-columns:1fr 1.4fr;gap:2rem}
.foot-name{font-family:var(--sc-font-display);font-size:2.4rem;font-weight:700;letter-spacing:-.04em}
.foot .hand{color:var(--on-ink-hand)}
.foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-content:start}
.foot nav a{color:var(--on-ink)}
.foot .connect-toggle{background:transparent;color:var(--on-ink);border-color:var(--on-ink)}
.foot .connect-list a,.foot .connect-list .soon{background:transparent;color:var(--on-ink);border-color:var(--on-ink)}
.foot .connect-list .soon,.foot .connect-list small{color:var(--on-ink-soft);border-color:var(--on-ink-faint)}
.foot-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;border-top:1px solid var(--pencil);padding-top:1.4rem;font-size:.85rem;color:var(--on-ink-soft)}
.foot-bottom a{color:var(--on-ink)}
.foot-note{background:none;border:0;color:var(--on-ink);text-decoration:underline;text-underline-offset:.25em;cursor:pointer;padding:0;font-size:.85rem}

/* Content dialog (shared with the doodle revision). */
#content-dialog{max-width:min(560px,92vw);border:1.5px solid var(--ink);border-radius:var(--r);padding:2rem;color:var(--ink)}
#content-dialog::backdrop{background:hsl(220 10% 12% / .45)}
#content-dialog .close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:1.6rem;cursor:pointer}
#content-dialog h2{font-size:1.8rem;margin:.3rem 0 .6rem}
#content-dialog article{display:grid;gap:.6rem;margin-bottom:1.2rem}
#content-dialog article[hidden]{display:none}
#content-dialog .resource-type{font-size:.8rem;color:var(--pencil)}
#content-dialog .resource-status{font-weight:600;color:var(--accent);font-size:.85rem}
#content-dialog .button{background:var(--accent);color:var(--on-ink);border:0;border-radius:999px;padding:.7em 1.3em;cursor:pointer;font-weight:600}

/* Pause motion / reduced motion: a settled reading layout. */
.motion-paused .peak{--sc-p:1!important;height:auto!important}
.motion-paused .peak-stage{position:relative!important;height:auto!important;padding-block:5rem}
.motion-paused .shelf{height:auto!important}
.motion-paused .shelf-stage{position:relative!important;height:auto!important;overflow-x:auto;padding-block:4rem}
.motion-paused .shelf-rail{transform:none!important;padding-right:calc(var(--tab-w) + 3rem)}
.motion-paused [data-sc-parallax]{transform:none!important}
.motion-paused [data-sc-reveal]{clip-path:none!important}
.motion-paused [data-sc-kinetic] *,.motion-paused [data-sc-cue]{opacity:1!important;transform:none!important}
.motion-paused .thread path{animation:none!important;stroke-dashoffset:0}
.motion-paused *{scroll-behavior:auto!important}
.motion-paused .hello-nudge,.motion-paused .scene-item,.motion-paused .si-hi,.motion-paused .connect-list li,.motion-paused .connect.open .connect-list li,.motion-paused .more-card{transition:none}

/* Narrow screens. */
@media (max-width:820px){
 :root{--tab-w:0px}
 .tabs{top:auto;bottom:0;left:0;right:0;transform:none;flex-direction:row;overflow-x:auto;background:var(--sc-surface);border-top:1.5px solid var(--ink);gap:0;padding:4px 6px}
 .tabs a{writing-mode:horizontal-tb;border:0;border-radius:8px;transform:none;padding:8px 10px;white-space:nowrap}
 .motion-toggle{bottom:auto;top:10px;left:auto;right:10px}
 .hello{grid-template-columns:1fr;padding-top:4.5rem}
 .hello-arrow{rotate:90deg}
 .start{min-height:0}
 .portrait-scene{width:min(88%,380px)}
 .sticky-note{position:relative;right:auto;bottom:auto;justify-self:end;margin-top:-3rem}
 .hello-place{position:static}
 .peak-stage{grid-template-columns:1fr;align-content:center;gap:1rem}
 .peak-steps{grid-template-columns:repeat(3,auto);gap:.6rem;font-size:1.05rem}
 .peak-frame{width:calc(100vw - 2.5rem - 28px)}
 .peak-doodle{width:40px}
 .nb-row{grid-template-columns:1fr;gap:.4rem}
 .more-grid{grid-template-columns:1fr}
 .me,.talk{grid-template-columns:1fr}
 .polaroids{height:auto;display:flex;justify-content:center;padding:1.2rem 0}
 .polaroid{position:relative;left:auto;top:auto;flex:none;width:min(34%,200px);padding:8px 8px 10px}
 .polaroid+.polaroid{margin-left:-2%}
 .p-2{z-index:3}
 .polaroid figcaption{margin-top:8px;font-size:clamp(.95rem,.8rem + .6vw,1.15rem)}
 .offer{grid-template-columns:1fr}
 .offer-lead{grid-row:auto}
 .shelf-intro{width:260px}
 .shelf-card{width:240px}
 .foot{grid-template-columns:1fr;padding-bottom:5rem}
}

/* Touch: every control gets a 44px tap row; the look stays the same. */
@media (max-width:820px),(pointer:coarse){
 .tabs a,.shelf-open,.visit-link,.fullview-open,.motion-toggle,.hello-actions .link,.hello-btn,.peak-page figcaption a,.foot nav a,.foot-bottom a,.foot-note{display:inline-flex;align-items:center;min-height:44px}
 .foot nav{gap:0 1.2rem}
}

/* Paper tooth. Last in the file so it layers over each ground's own background shorthand. */
.peak,.peak-stage,.me,.shelf,.shelf-stage,.talk,.paper-sheet,.sticky-note,.polaroid,.offer-lead,.peak-page,.more-card{background-image:var(--paper-tex)}