/* Sideways Studio — "One Line". One continuous ink line carries you through the whole site;
   the world is drawn in that line with pencil yellow as the only accent, and the studio's own
   work and characters are the only full colour. Everything in .world is in world units (the
   world is 1000 units tall and scaled to fit the screen). */
:root{
  --paper:#fbf8f1;--paper-2:#f2ede1;--ink:#17181c;--graphite:#62656d;--rule:#e2dccd;
  --pencil:#f6b73c;--pencil-2:#ee8f2d;--eraser:#4a6cf0;
  --mark:"Poppins","Jost",system-ui,sans-serif;--body:"Jost",system-ui,sans-serif;--hand:"Caveat",cursive;
  --ease-back:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.2,.8,.2,1);
  --top:64px;--tl:62px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
button{font:inherit;color:inherit}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:999px}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--top);display:flex;align-items:center;justify-content:space-between;
  padding:max(10px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));pointer-events:none}
.top>*{pointer-events:auto}
.brand{font-family:var(--mark);font-weight:300;font-size:1.15rem;text-decoration:none;display:inline-flex;align-items:baseline;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .5s var(--ease-back)}
.brand svg{width:.6em;height:.66em;margin:0 .02em}
.brand path{fill:var(--ink)}
body.past-intro .brand{opacity:1;transform:none}
.top-r{display:flex;gap:8px}
.pill{text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:.5em 1.05em;background:var(--paper);cursor:pointer;font-weight:500;font-size:.95rem;display:inline-flex;align-items:center;gap:.5em;transition:transform .35s var(--ease-back),background .2s}
.pill:hover{transform:translateY(-2px) rotate(-1.5deg)}
.pill.go{background:var(--pencil)}
.pill.go svg{width:.7em;height:.78em}
.pill.go path{fill:var(--ink)}
.pill.ghost{background:rgba(251,248,241,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pill .short{display:none}
@media (max-width:520px){ .pill{font-size:.85rem;padding:.45em .85em} .pill .long{display:none} .pill .short{display:inline} .brand{font-size:1rem} }
@media (max-width:360px){ .brand{display:none} }

/* ---------- the stage ---------- */
.runway{width:1px;pointer-events:none}
.stage{position:fixed;inset:0;overflow:hidden;z-index:1}
.cam{position:absolute;inset:0;transform-origin:0 0}
.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.world>*{position:absolute}
.sky{position:absolute;inset:0;will-change:transform}
.sky svg{position:absolute;overflow:visible}
.sky path{fill:none;stroke:#cfc8b8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* the line: drawn as it goes; a faint dotted construction line shows where it's heading */
.ln{overflow:visible;pointer-events:none}
.ln .ghost{fill:none;stroke:var(--ink);stroke-opacity:.16;stroke-width:3;stroke-dasharray:1 13;stroke-linecap:round}
.ln .ink{fill:none;stroke:var(--ink);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}

/* the pencil: their own 3D pencil, turning as it writes */
.pen{width:89px;height:150px;left:0;top:0;pointer-events:none;z-index:5;will-change:transform}
.pen i{position:absolute;inset:0;background:url(/media/brand/pencil-sprite.webp) 0 0/801px 1050px no-repeat}
.pen.idle i{animation:bob 1.6s ease-in-out infinite;transform-origin:24% 98%}
@keyframes bob{50%{transform:rotate(-6deg) translateY(-6px)}}

/* the wordmark, written by the pencil */
.word{font-family:var(--mark);font-weight:200;line-height:1;letter-spacing:-.015em;white-space:nowrap;margin:0}
.word .ln1,.word .ln2{display:block}
.word.inline .ln1,.word.inline .ln2{display:inline-block}
.word.inline .ln2{margin-left:.26em}
.word svg{width:.6em;height:.66em;margin:0 .015em;vertical-align:-.02em}
.word path{fill:var(--ink)}
.word .base{display:inline-block;width:0;height:0}
.word .tri{cursor:pointer}
.tag{font-size:30px;line-height:1.35;max-width:640px;color:var(--ink);opacity:0;transform:translateY(16px);transition:opacity .6s .2s,transform .8s .2s var(--ease)}
.tag.on{opacity:1;transform:none}
.tag em{font-style:normal;background:linear-gradient(transparent 62%,rgba(246,183,60,.55) 62%)}

/* things that appear once the line has drawn them */
.pop{opacity:0;transform:scale(.6) translateY(30px);transition:opacity .35s,transform .6s var(--ease-back)}
.pop.on{opacity:1;transform:none}

/* the reel ▷: their logo triangle, drawn big, filled with their work */
.reel{cursor:pointer;background:#000;transition:opacity .4s,transform .7s var(--ease-back),filter .3s}
.reel video,.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel:hover{filter:brightness(1.08)}
.reel-play{width:112px;height:112px;border-radius:50%;background:var(--pencil);border:5px solid var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .5s var(--ease-back);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.reel-play svg{width:40px;height:44px;margin-left:8px}
.reel-play path{fill:var(--ink)}
.reel-play:hover{transform:scale(1.1) rotate(-8deg)}

/* captions live below the ground line, like labels under a film strip */
.cap{width:380px;font-size:26px;line-height:1.25}
.cap b{display:block;font-family:var(--mark);font-weight:500;font-size:30px;letter-spacing:-.01em}
.cap span{color:var(--graphite)}
.cap .hand{font-family:var(--hand);font-size:34px;color:var(--pencil-2);display:block;margin-top:4px}
.cap.center{text-align:center}

/* street: every project is a building drawn by the line; its window plays the work */
.win{border:5px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper-2);cursor:pointer;padding:0;transition:opacity .35s,transform .6s var(--ease-back),box-shadow .3s}
.win video,.win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.win:hover,.win:focus-visible{box-shadow:0 0 0 7px var(--pencil);outline:none}
.win .lit{position:absolute;inset:0;background:var(--pencil);opacity:.9;transition:opacity .5s .15s}
.win.on .lit{opacity:0}
.facade{font-family:var(--mark);font-weight:600;font-size:24px;letter-spacing:.06em;text-transform:uppercase;text-align:center;white-space:nowrap}
.facade.hand{font-family:var(--hand);font-weight:700;font-size:40px;letter-spacing:0;text-transform:none}

/* signposts: once the line has drawn the board, a green street sign flickers on inside it */
.sign{display:grid;place-items:center;align-content:center;gap:4px;text-align:center;color:#fff;font-family:var(--mark);font-weight:600;font-size:38px;line-height:1;letter-spacing:.01em}
.sign::before{content:"";position:absolute;inset:6px;border-radius:7px;background:#1e6e4a;z-index:-1;box-shadow:inset 0 0 0 4px #1e6e4a,inset 0 0 0 7px rgba(255,255,255,.92),0 0 26px rgba(46,160,105,.35)}
.sign small{display:block;padding:0 22px;font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.narrow .sign{font-size:31px}
.narrow .sign small{font-size:14px;padding:0 18px}
.sign.lit{opacity:0}
.sign.lit.on{opacity:1;animation:flicker 1.1s linear both}
@keyframes flicker{0%{opacity:0}8%{opacity:1}12%{opacity:.15}20%{opacity:.95}24%{opacity:.3}34%{opacity:1}40%{opacity:.75}46%,100%{opacity:1}}

/* the last page: say hi */
.page-in{width:560px;text-align:left}
.page-in h2{font-family:var(--mark);font-weight:200;font-size:76px;line-height:.95;margin:0 0 18px;letter-spacing:-.015em}
.page-in h2 b{font-weight:500}
.page-in p{font-size:26px;margin:0 0 26px;color:var(--graphite)}
.page-in .pill{font-size:26px;padding:.5em 1.1em}
.page-in .mail{display:block;margin-top:20px;font-size:24px}

/* the hint */
.hint{position:absolute;left:50%;bottom:calc(var(--tl) + 22px);transform:translateX(-50%);margin:0;font-family:var(--hand);font-weight:700;font-size:1.6rem;color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap;opacity:0;transition:opacity .5s;pointer-events:none}
.hint.on{opacity:1}
.hint svg{width:52px;height:18px;animation:nudge 1.4s ease-in-out infinite}
.hint path{fill:none;stroke:var(--pencil-2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes nudge{50%{transform:translateX(8px)}}
.hint .phone{display:none}
@media (hover:none) and (pointer:coarse){ .hint .phone{display:inline} .hint .desk{display:none} }

/* ---------- the timeline ---------- */
.tl{position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--tl) + env(safe-area-inset-bottom,0px));padding:0 max(14px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(14px,env(safe-area-inset-left,0px));
  display:flex;align-items:center;gap:14px;background:rgba(251,248,241,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1.5px solid var(--ink)}
.tl-frame{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-weight:500;font-size:.9rem;min-width:58px}
.tl-frame svg{width:10px;height:11px}
.tl-frame path{fill:var(--pencil-2)}
.tl-track{position:relative;flex:1;height:100%;cursor:pointer;touch-action:none}
.tl-ruler{position:absolute;left:0;right:0;top:12px;height:10px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 10px);opacity:.25}
.tl-keys{position:absolute;inset:0}
.tl-key{position:absolute;top:6px;transform:translateX(-50%);border:0;background:none;padding:0 2px;cursor:pointer;display:grid;justify-items:center;gap:3px;color:var(--ink)}
.tl-key i{width:12px;height:12px;background:var(--paper);border:1.5px solid var(--ink);transform:rotate(45deg);transition:background .2s,transform .3s var(--ease-back)}
.tl-key span{font-size:.78rem;font-weight:500;white-space:nowrap}
.tl-key.on i{background:var(--pencil);transform:rotate(45deg) scale(1.2)}
.tl-key:hover i{transform:rotate(45deg) scale(1.35)}
.tl-head{position:absolute;top:2px;bottom:6px;width:2px;margin-left:-1px;background:var(--pencil-2);pointer-events:none}
.tl-head i{position:absolute;top:-2px;left:-6px;width:14px;height:10px;background:var(--pencil-2);clip-path:polygon(0 0,100% 0,50% 100%)}
@media (max-width:640px){ .tl-key span{font-size:.72rem} .tl-key:not(.on) span{display:none} .tl-frame{min-width:48px;font-size:.8rem} }

/* ---------- overlays ---------- */
.sheet{position:fixed;inset:0;z-index:60;background:var(--paper);overflow-y:auto;overscroll-behavior:contain}
.sheet[hidden],.play[hidden]{display:none}
.sheet-in{max-width:1200px;margin:0 auto;padding:max(20px,env(safe-area-inset-top,0px)) 20px 60px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--paper);padding:10px 0;z-index:2}
.sheet-head h2{font-family:var(--mark);font-weight:300;font-size:clamp(1.8rem,5vw,3rem);margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px 18px;margin-top:10px}
.g-card{border:0;background:none;padding:0;text-align:left;cursor:pointer}
.g-card .th{aspect-ratio:16/9;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--paper-2);transition:transform .4s var(--ease-back)}
.g-card .th img{width:100%;height:100%;object-fit:cover;display:block}
.g-card:hover .th{transform:translateY(-4px) rotate(-1deg)}
.g-card b{display:block;margin-top:8px;font-family:var(--mark);font-weight:500}
.g-card span{color:var(--graphite);font-size:.92rem}
.x{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .35s var(--ease-back)}
.x:hover{transform:rotate(90deg)}
.play{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px}
.play-back{position:absolute;inset:0;background:rgba(15,16,19,.9)}
.play-card{position:relative;width:min(1100px,100%);display:grid;gap:12px}
.play-box{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;max-height:76vh}
.play-box.vertical{aspect-ratio:9/16;height:min(76vh,800px);width:auto;justify-self:center}
.play-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play-cap{color:#e9e6de;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.play-cap b{font-family:var(--mark);font-weight:500;font-size:1.2rem;color:#fff}
.play-list{display:flex;gap:8px;flex-wrap:wrap}
.play-list button{border:1.5px solid #e9e6de;background:transparent;color:#e9e6de;border-radius:999px;padding:.3em .9em;cursor:pointer}
.play-list button[aria-pressed="true"]{background:var(--pencil);border-color:var(--pencil);color:var(--ink)}
.play>.x{position:absolute;top:max(16px,env(safe-area-inset-top,0px));right:16px}
html.locked,html.locked body{overflow:hidden}

/* ---------- their characters ---------- */
.cast{border:0;background:none;padding:0;cursor:pointer;transform-origin:var(--fx,50%) 100%;-webkit-tap-highlight-color:transparent}
.cast .bod{position:absolute;inset:0;display:block;transform-origin:var(--fx,50%) 100%}
.cast img{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}
.cast img.flip{transform:scaleX(-1)}
/* they pop up out of the ground once the line reaches them */
.rise{opacity:0;transform:scale(1.25,.15);transition:opacity .2s,transform .75s cubic-bezier(.3,1.7,.5,1)}
.rise.on{opacity:1;transform:none}
.cast.on.breathe .bod{animation:breathe 3.4s ease-in-out infinite}
.cast.on.hop .bod{animation:hop 2.6s var(--d,0s) infinite}
.cast.on.bob .bod{animation:float 3.2s ease-in-out infinite}
.cast.on.fly8 .bod{animation:fly8 7s linear infinite}
.cast.peek{clip-path:inset(-90px -70px 0 -70px)} /* only ever shows above the board it hides behind */
.cast.on.peek .bod{animation:peek 5s ease-in-out infinite}
.cast.on.ride .bod{animation:ride .5s ease-in-out infinite alternate}
.cast.on.plane .bod{animation:plane 11s linear infinite}
.cast.launch .bod{transform:translateY(240px)}
.cast.on.launch .bod{animation:launch 2.4s cubic-bezier(.5,0,.2,1) forwards,float 3s 2.4s ease-in-out infinite}
.cast.on.boing .bod{animation:boing .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes breathe{50%{transform:scale(.99,1.03)}}
@keyframes hop{0%,62%,100%{transform:none}70%{transform:scale(1.1,.88)}80%{transform:translateY(-44px) scale(.94,1.08)}90%{transform:scale(1.12,.86)}95%{transform:none}}
@keyframes float{50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes fly8{0%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(-160px,60px) rotate(6deg)}50%{transform:translate(-320px,0) rotate(-4deg)}75%{transform:translate(-160px,-60px) rotate(6deg)}100%{transform:translate(0,0) rotate(-4deg)}}
@keyframes peek{0%,40%,100%{transform:translateY(110%)}55%,85%{transform:none}}
@keyframes ride{to{transform:translateY(-5px) rotate(-1.5deg)}}
@keyframes plane{0%{transform:translate(-200px,40px) rotate(-6deg);opacity:0}8%{opacity:1}50%{transform:translate(700px,-30px) rotate(4deg)}92%{opacity:1}100%{transform:translate(1600px,30px) rotate(-6deg);opacity:0}}
@keyframes launch{0%{transform:translateY(240px) scale(.9,1.1)}20%{transform:translateY(250px) scale(1.12,.86)}100%{transform:translateY(-120px)}}
@keyframes boing{0%{transform:none}30%{transform:translateY(-48px) scale(.92,1.1) rotate(-6deg)}62%{transform:scale(1.14,.86)}100%{transform:none}}
.ctag{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-10px);background:var(--ink);color:var(--paper);font:500 22px/1 var(--body);padding:8px 14px;border-radius:999px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease-back)}
.cast:hover .ctag,.cast:focus-visible .ctag{opacity:1;transform:translate(-50%,-18px)}
.cast:focus-visible{outline:none}
@media (hover:none){ .cast.on .ctag{animation:tag 3.2s 1s} }
@keyframes tag{0%,100%{opacity:0}12%,80%{opacity:1}}

/* the river: blue water with drifting light streaks */
.water{overflow:hidden;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);background:#bfe3f8;transition:opacity .5s,transform .7s var(--ease-back)}
.water i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 40px,rgba(255,255,255,.85) 40px 70px,transparent 70px 130px,rgba(58,159,230,.35) 130px 150px,transparent 150px 200px);background-size:200px 100%;
  mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 14px);-webkit-mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 14px);animation:flow 4s linear infinite}
@keyframes flow{to{background-position:200px 0}}
.water.pop{transform:scaleY(.2);transform-origin:50% 0}
.water.pop.on{transform:none}

/* their storyboard sketch, pinned up beside "How we work" */
.sb-card{border:3px solid var(--ink);background:#fff;padding:10px;border-radius:4px;transform:rotate(-3deg);cursor:pointer;box-shadow:6px 8px 0 rgba(23,24,28,.12)}
.sb-card img{width:100%;height:100%;object-fit:contain;display:block}
.sb-card.pop{transform:rotate(-3deg) scale(.6) translateY(30px)}
.sb-card.pop.on{transform:rotate(-3deg)}
.sb-card:hover{box-shadow:6px 8px 0 var(--pencil)}

/* the last page's folded corner: a flap that folds down once the line has drawn the corner */
.flap{background:var(--paper-2);border:5px solid var(--ink);border-top:0;border-right:0;border-radius:0 0 0 6px;clip-path:polygon(0 0,100% 100%,0 100%);transform-origin:0 0}
.flap.pop{transform:scale(0) translateY(0);opacity:0}
.flap.pop.on{transform:none;opacity:1;transition:transform .5s var(--ease-back),opacity .2s}