/* One normal document. Revealed sections never disappear or become inert. */
.storybook{position:relative;margin:0 calc(50% - 50vw);width:100vw;overflow:clip;background:var(--sky)}
.story-scene{position:relative;scroll-margin-top:72px;background:var(--sky);--accent:var(--blue)}
.story-inner{position:relative;max-width:1600px;min-height:100svh;padding:100px 6% 30px;margin:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:7%;align-content:center}
.story-copy{position:relative;z-index:2;max-width:650px}.story-copy h1,.story-copy h2{font-size:clamp(42px,5.4vw,82px);font-weight:800;line-height:1.03;letter-spacing:-.06em;margin-bottom:28px;text-wrap:balance}.story-copy p{font-size:clamp(15px,1.35vw,19px);line-height:1.65;max-width:580px}.story-copy .eyebrow{font-size:11px;margin-bottom:23px}.story-copy .actions{margin-top:28px;gap:20px}.story-facts{display:flex;flex-direction:column;gap:4px;font-size:11px;margin-top:24px;opacity:.8}.story-art{position:relative;min-height:350px;align-self:center;max-width:650px}
.thought-wall{padding:48px 35px;background:var(--yellow);border:2px solid var(--ink);transform:rotate(3deg);box-shadow:9px 10px 0 var(--ink)}.thought-wall>span{font-size:18px}.thought-wall b{display:block;font-size:clamp(36px,4.2vw,64px);line-height:1.03;letter-spacing:-.05em;margin:30px 0}.thought-wall i{font-style:normal;font-size:13px}
.scene-mockups,.scene-photo{background:var(--pink)}.format-wall{display:flex;gap:7%;align-items:center;position:relative;padding-bottom:40px}.format-wall figure{width:44%;border:5px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--paper);transform:rotate(-7deg);box-shadow:7px 9px 0 #192c4520}.format-wall figure:nth-child(2){transform:rotate(6deg);border-radius:5px}.format-wall img{width:100%;height:100%;aspect-ratio:9/16;object-fit:cover}.format-wall figure:nth-child(2) img{aspect-ratio:4/5}.format-wall figcaption{font-size:10px;text-align:center;padding:10px}.format-wall small{position:absolute;bottom:0;font-size:10px}
.scene-code{background:var(--ink);color:var(--paper)}.scene-code .story-art{min-height:480px}.code-work{position:relative;overflow:hidden;min-height:480px;border-top:1px solid #fffdf645;border-bottom:1px solid #fffdf645}.code-work pre{height:480px;overflow:auto;font-size:12px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;color:#c3e9e5;padding:22px 8px;margin:0;scrollbar-width:thin}.code-cover{display:none}.scene-code .sterp-line{color:var(--ink)}
.scene-seo,.scene-brand{background:var(--yellow)}.search-map{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr;align-items:center;gap:8px}.search-map a{padding:23px 9px;border:1.5px solid var(--ink);background:var(--paper);border-radius:5px;text-align:center;font-weight:650;font-size:14px;box-shadow:3px 4px 0 var(--ink)}.search-map>span{font-size:25px;transform:rotate(-90deg);text-align:center}.robots-note{margin-top:50px;border-top:1.5px solid var(--ink);padding-top:18px;font-size:13px}.robots-note summary{cursor:pointer;font-weight:650;padding-bottom:15px}.robots-note p{max-width:500px}.robots-note pre{padding:20px 0;font-size:12px}.robots-note a{text-decoration:underline}
.sketch-scene{position:relative;padding:5% 8%;color:var(--blue)}.sketch-scene svg{width:100%;height:auto;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}.ink-guide{opacity:.12}.sketch-scene>span{display:block;font-size:clamp(30px,3.4vw,52px);font-weight:800;letter-spacing:-.05em;margin-top:12px;transform:rotate(-3deg)}.sketch-scene small{display:block;font-size:12px;margin-top:22px}
.project-art{position:relative;transform:rotate(-2deg)}.project-window{overflow:hidden;border-radius:5px;box-shadow:9px 12px 0 #192c4520;max-height:430px}.project-art img{display:block;width:100%;height:auto}.project-art figcaption{font-size:10px;margin-top:22px}.art-brand{transform:rotate(3deg)}.art-brand .project-window{box-shadow:none;max-height:none}.art-brand img{object-fit:contain;max-height:440px}.art-website{transform:none}.art-website .project-window{max-height:370px;border:2px solid var(--ink);border-top-width:18px}.scene-website{background:var(--paper)}
.finish-note{border:2px solid var(--ink);background:var(--yellow);transform:rotate(-5deg);padding:35px;max-width:450px;box-shadow:8px 10px 0 var(--ink)}.finish-note span{font-size:15px}.finish-note b{display:block;font-size:clamp(45px,5.5vw,78px);line-height:.95;letter-spacing:-.06em;margin:24px 0}.finish-note i{font-size:13px;font-style:normal}.contact-context{display:block;flex-basis:100%;font-size:11px}.story-source{grid-column:1/-1;font-size:11px;max-width:730px;margin:10px 0 15px}.story-source a{text-decoration:underline;text-underline-offset:3px}.next-stories{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:15px 28px;font-size:14px;margin-top:10px}.next-stories a{text-decoration:underline;text-underline-offset:5px}
.story-lane{grid-column:1/-1;position:relative;height:230px;margin-top:30px;--stop:18%}.actor-stop{position:absolute;left:var(--stop);bottom:20px;width:1px;height:1px}.sterp-line{position:absolute;left:calc(var(--stop) + 125px);bottom:34px;background:var(--paper);border:1.5px solid var(--ink);border-radius:15px 15px 15px 2px;padding:17px 21px;margin:0;max-width:300px;line-height:1.5;font-size:14px}.sterp-line span{font-size:9px;color:var(--blue);display:block;margin-bottom:6px;font-weight:700;letter-spacing:.07em}.story-actor{display:none}.scene-mockups .story-lane,.scene-brand .story-lane{--stop:60%}.scene-code .story-lane{--stop:63%}.scene-code .sterp-line{left:auto;right:calc(100% - var(--stop) + 110px)}.scene-photo .story-lane{--stop:27%}.scene-website .story-lane{--stop:28%}.scene-finish .story-lane{--stop:35%}
.story-on .story-actor{display:block;position:absolute;left:0;top:0;z-index:5;width:240px;height:260px;pointer-events:none;transform-origin:0 0;will-change:transform}.story-actor svg{width:100%;height:100%;overflow:visible;max-width:none}.story-actor #sleep-marks,.story-actor #notice-mark,.story-actor #sketchbook,.story-actor .mouth-focus,.story-actor .mouth-happy{display:none}.story-actor #eyes{animation:expert-blink 5.7s infinite}.story-actor #face{transform-origin:185px 165px}.story-actor #pencil{opacity:0}.story-actor[data-acting=sketch] #sketchbook{display:block}.story-actor[data-acting=sketch] #pencil{opacity:1}.story-actor[data-acting=sketch] .mouth-friendly{display:none}.story-actor[data-acting=sketch] .mouth-focus{display:block}.story-on .ink-line{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--reveal,0))}
.story-on .format-wall figure{transform:translateY(calc((1 - var(--reveal,0))*60px)) rotate(calc(-7deg + var(--reveal,0)*5deg))}.story-on .format-wall figure:nth-child(2){transform:translateY(calc((1 - var(--reveal,0))*110px)) rotate(calc(6deg - var(--reveal,0)*4deg))}
.story-on .code-cover{display:flex;position:absolute;inset:0;background:var(--sky);color:var(--ink);flex-direction:column;justify-content:center;padding:40px;transform-origin:100% 0;transform:perspective(1200px) rotateX(calc(var(--reveal,0)*105deg));backface-visibility:hidden;pointer-events:none;z-index:2}.code-cover span{font-size:17px}.code-cover b{font-size:clamp(32px,4vw,60px);line-height:1.1;letter-spacing:-.05em;margin:20px 0}.code-cover i{font-size:70px;font-style:normal;align-self:flex-end}
.story-on .search-map a{transform:translateY(calc((1 - var(--reveal,0))*22px))}.story-on .art-brand{transform:rotate(calc(3deg - var(--reveal,0)*3deg))}.story-on .art-photo{transform:rotate(calc(-2deg + var(--reveal,0)*2deg))}.story-on .art-website img{transform:translateY(calc(var(--image-travel,0px)*var(--reveal,0)))}
.story-on .site-header{position:relative;background:var(--paper)}.site-header .brand-logo{width:132px;height:auto}.site-footer{background:var(--ink);color:var(--paper)}.site-footer .brand-logo{width:180px;height:auto}.story-motion{border:0;background:none;color:var(--ink);font-size:13px;padding:8px;min-width:36px;min-height:36px}.story-motion[aria-pressed=true]{text-decoration:line-through}
@media(max-width:900px){.story-inner{column-gap:5%;padding-left:5%;padding-right:5%}.story-copy h1,.story-copy h2{font-size:clamp(36px,5vw,55px)}.story-art{min-height:280px}.story-copy p{font-size:15px}.story-lane{--stop:17%;height:210px}.sterp-line{left:calc(var(--stop) + 100px);max-width:230px;font-size:13px}.scene-mockups .story-lane,.scene-brand .story-lane,.scene-code .story-lane{--stop:50%}.scene-code .sterp-line{right:calc(100% - var(--stop) + 90px)}}
@media(max-width:760px){.story-inner{display:flex;flex-direction:column;min-height:0;padding:64px 6% 28px;gap:0}.story-copy h1,.story-copy h2{font-size:clamp(36px,10vw,57px);margin-bottom:22px;max-width:550px}.story-copy p{font-size:15px;line-height:1.65}.story-copy .eyebrow{margin-bottom:18px;font-size:10px}.story-art{width:100%;max-width:500px;min-height:0;margin-top:45px;align-self:center}.story-facts{font-size:10px;margin-top:20px}.story-copy .actions{margin-top:24px;gap:20px}.story-copy .button{font-size:12px}.thought-wall{padding:30px}.thought-wall b{font-size:38px;margin:24px 0}.thought-wall>span{font-size:15px}.thought-wall i{font-size:11px}.format-wall{padding:12px 3% 35px;gap:10%}.format-wall figure{border-width:4px;max-width:190px}.format-wall figcaption{font-size:9px;padding:7px}.format-wall small{font-size:9px}.scene-code .story-art,.code-work{min-height:380px}.code-work pre{height:380px;font-size:10px}.code-cover{padding:30px}.search-map{gap:4px;grid-template-columns:1fr 18px 1fr 18px 1fr}.search-map a{font-size:12px;padding:18px 5px}.search-map>span{font-size:20px}.robots-note{margin-top:30px}.sketch-scene{padding:0 9%}.sketch-scene>span{font-size:36px}.project-window{max-height:340px}.art-brand img{max-height:360px}.art-website .project-window{max-height:270px}.project-art figcaption{font-size:9px}.finish-note{margin:0 10px;padding:27px}.finish-note b{font-size:55px}.story-lane,.scene-mockups .story-lane,.scene-brand .story-lane,.scene-code .story-lane,.scene-photo .story-lane,.scene-website .story-lane,.scene-finish .story-lane{width:100%;height:185px;flex-shrink:0;margin-top:20px;--stop:19%}.sterp-line,.scene-code .sterp-line{left:calc(var(--stop) + 60px);right:0;bottom:20px;max-width:none;padding:13px 15px;font-size:12px}.story-source{font-size:10px;margin-top:15px}.next-stories{font-size:12px;gap:15px;margin-top:15px}.story-actor{width:150px;height:162.5px}.story-copy .actions{align-items:start}.contact-context{font-size:10px}.site-header .brand-logo{width:116px}}
@media(prefers-reduced-motion:reduce){.story-actor{display:none!important}.code-cover{display:none!important}.ink-line{stroke-dashoffset:0!important}.format-wall figure,.project-art,.art-website img,.search-map a{transform:none!important}}
.story-paused .story-actor{display:none}.story-paused *{animation:none!important}.story-paused .code-cover{display:none}.story-paused .ink-line{stroke-dashoffset:0}.story-on .story-actor{width:240px;height:260px}@media(max-width:760px){.story-on .story-actor{width:150px;height:162.5px}}
/* The actual preceding page surface lifts away, exposing its full-width HTML. */
.scene-code .story-copy{grid-column:1/-1;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0 7%;align-items:center}.scene-code .story-copy .eyebrow{grid-column:1/-1}.scene-code .story-copy h2{font-size:clamp(42px,4.8vw,70px)}.scene-code .story-copy .actions{display:none}.scene-code .story-art{grid-column:1/-1;width:100%;max-width:none;min-height:0;margin-top:28px}.code-work{height:610px;min-height:0;overflow:visible;border:0}.code-work>pre{height:100%;font-size:13px;line-height:1.9;padding:30px 4%;background:#10233a}.story-on .code-cover{padding:0;transform-origin:100% 100%;background:var(--pink);transform:none;overflow:hidden;border:1.5px solid var(--ink);border-radius:4px}.code-cover>.story-inner{min-height:100%;height:100%;padding:5%;grid-template-columns:1fr 1fr;gap:5%;color:var(--ink)}.code-cover .story-copy{display:block;grid-column:auto}.code-cover .story-copy h2{font-size:clamp(30px,4vw,59px)}.code-cover .story-copy p{font-size:15px}.code-cover .story-art{grid-column:auto;align-self:center}.code-cover .format-wall{max-width:500px}.code-cover img{max-height:340px}.code-cover .story-copy .actions{display:none}.scene-code .story-lane{--stop:25%}.scene-code .sterp-line{left:calc(var(--stop) + 130px);right:auto}
@media(max-width:760px){.scene-code .story-copy{display:block}.scene-code .story-copy h2{font-size:42px}.code-work{height:520px}.code-work>pre{font-size:10px}.code-cover>.story-inner{display:flex;padding:25px;gap:20px}.code-cover .story-copy h2{font-size:31px;margin-bottom:15px}.code-cover .story-copy p{font-size:11px;line-height:1.6}.code-cover .story-copy .eyebrow{font-size:8px;margin-bottom:14px}.code-cover .story-art{margin:0}.code-cover img{max-height:230px}.code-cover .format-wall{max-width:270px;margin:auto}.scene-code .story-lane{--stop:19%}.scene-code .sterp-line{left:calc(var(--stop) + 60px);right:0}}
/* Case studies: the work is the main image, with room for its own typography. */
.case-landing .story-scene{background:#f4f2e9}.case-landing .scene-sketch{background:#bce0ee}.case-landing .scene-brand{background:#fce56a}.case-landing .scene-photo{background:#e9e6df}.case-landing .scene-finish{background:#bce0ee}.case-landing .story-inner{max-width:1540px;min-height:0;padding:90px 6% 35px;column-gap:6%}.case-landing .story-copy{grid-column:1/-1;max-width:none;display:grid;grid-template-columns:1.08fr 1fr;column-gap:9%;align-items:center}.case-landing .story-copy .eyebrow{grid-column:1/-1;margin-bottom:22px}.case-landing .story-copy h1,.case-landing .story-copy h2{font-size:clamp(42px,5vw,76px);line-height:1.04;letter-spacing:-.055em;max-width:710px;margin:0}.case-landing .story-copy p{max-width:580px;font-size:17px;line-height:1.7}.case-landing .story-facts{grid-column:1;margin-top:25px;font-size:11px}.case-landing .story-copy .actions{grid-column:2;margin-top:24px}.case-landing .story-copy .actions:empty{display:none}.case-landing .story-art{grid-column:1/-1;width:100%;max-width:none;margin-top:50px;min-height:0}.case-landing .project-art,.story-on .case-landing .project-art{transform:none}.case-landing .project-window{display:block;max-height:none;border:1px solid #192c4528;border-radius:10px;overflow:hidden;box-shadow:0 18px 45px #192c4514;background:var(--paper)}.case-landing .project-window img,.story-on .case-landing .art-website img{width:100%;height:auto;max-height:none;transform:none;object-fit:contain}.shot-bar{display:flex;align-items:center;justify-content:space-between;height:32px;background:#fffdf6;padding:0 15px;font-size:10px;color:var(--ink);border-bottom:1px solid #192c4520}.shot-bar i{font-size:7px;font-style:normal;letter-spacing:3px;color:#192c4560}.shot-bar b{font-size:15px;font-weight:400}.case-landing .project-art figcaption{display:flex;justify-content:space-between;gap:15px;font-size:11px;margin:16px 2px 0}.case-landing .story-lane{height:200px;margin-top:20px;--stop:14%}.case-landing .sterp-line{left:calc(var(--stop) + 125px);max-width:390px}.case-landing .scene-finish .story-art{display:none}.case-landing .scene-finish .story-copy{padding-bottom:25px}.case-landing .scene-finish .story-lane{--stop:35%;height:240px}
@media(max-width:900px) and (min-width:761px){.case-landing .story-copy p{font-size:15px}.case-landing .story-copy h1,.case-landing .story-copy h2{font-size:45px}}
@media(max-width:760px){.case-landing .story-inner{padding:54px 6% 25px}.case-landing .story-copy{display:block}.case-landing .story-copy h1,.case-landing .story-copy h2{font-size:clamp(36px,10vw,54px);margin-bottom:22px}.case-landing .story-copy p{font-size:15px;line-height:1.65}.case-landing .story-facts{font-size:10px;margin-top:22px}.case-landing .story-copy .actions{margin-top:25px}.case-landing .story-art{margin-top:32px}.case-landing .project-window{max-width:390px;margin:auto;border-radius:12px;border-width:3px;background:var(--ink);box-shadow:0 15px 30px #192c4518}.shot-bar{height:28px;font-size:8px}.case-landing .project-art figcaption{font-size:9px;margin-top:15px;flex-wrap:wrap;gap:4px}.case-landing .story-lane,.case-landing .scene-finish .story-lane{--stop:19%;height:185px;margin-top:16px}.case-landing .sterp-line{left:calc(var(--stop) + 60px);max-width:none}.case-landing .scene-finish .story-copy{padding-bottom:0}}
.case-landing .story-art{margin-top:0;z-index:6}.case-landing .story-lane{height:210px;margin:20px 0 0}.case-landing .story-source{margin-top:28px}.case-landing .scene-finish .story-art{display:none}
@media(max-width:760px){.case-landing .story-lane{height:185px;margin-top:18px}.case-landing .story-art{margin-top:0}}
@media(min-width:761px){.case-landing .story-lane{height:280px}}