/* Sanka's handmade type and four-colour palette. Fonts ship with the site. */
@font-face{font-family:SankaDisplay;src:url('assets/fonts/DynaPuff-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:SankaDisplay;src:url('assets/fonts/DynaPuff-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--primary-green:#39ad66;--green-ink:#197346;--display:SankaDisplay,'Arial Rounded MT Bold',sans-serif;--body:Arial,Helvetica,sans-serif}
.primary-green{color:var(--primary-green)}
.brand-name{font-family:var(--display);font-weight:700;letter-spacing:-.055em;gap:.015em}
.hero-background h1>.hero-first{font:700 clamp(62px,7.2vw,116px)/1.12 var(--display);letter-spacing:-.055em;margin-bottom:8px}
.hero-background h1>.hero-name-line{font:700 clamp(66px,8.9vw,142px)/1.12 var(--display);letter-spacing:-.055em;gap:.21em;margin-top:0}
.hero-background .hero-name-line .hero-intro,.hero-background .hero-name-line .sanka-name{font:inherit;letter-spacing:inherit;line-height:inherit}
.hero-background .hero-name-line .sanka-name{display:inline-flex;gap:.005em}
.hero-background .hero-intro{display:inline-flex}
.hero-copy{max-width:1000px}
.hero-background h1{margin-bottom:24px}
.hero-background .hero-note p{font-family:var(--body);font-size:clamp(21px,2vw,30px);line-height:1.3;letter-spacing:.01em;max-width:560px}
.hero-highlight{background:linear-gradient(transparent 86%,var(--primary-green) 86%)}
h2,.project-page-title,.project-card h3,.project-process h3{font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:1.12}
h2{font-size:clamp(34px,4.1vw,65px)}
h2 em{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--green-ink)}
.project-card h3{font-size:clamp(20px,1.9vw,29px);gap:12px;align-items:baseline;line-height:1.22}
.project-card h3>.ui-icon{margin-left:auto}
.project-card h3{display:block;position:relative;padding-right:1.15em}
.project-card h3>.ui-icon,.project-card h3>span[aria-hidden=true]{position:absolute;right:0;top:.18em}
.project-page-title{font-size:clamp(50px,8.2vw,126px);line-height:1.12;letter-spacing:-.05em}
.project-lead{font-family:var(--body);font-style:normal;line-height:1.2}
.section-note,.project-card>p{font-family:var(--body);font-size:19px;line-height:1.35}
.header nav{font-family:var(--body);font-size:19px}
.filters button,.load-more,.pill,.project-next{font-family:var(--body);font-size:19px}
.work-title{font-family:var(--body);font-size:19px;font-weight:400;line-height:1.15}
.about-copy h2{font-size:clamp(34px,4.1vw,63px)}
.contact h2{font-size:clamp(48px,7.5vw,114px);line-height:1.12;letter-spacing:-.05em}
.primary-dots i:nth-child(4){background:var(--primary-green)}
.eyebrow{padding-left:46px}
.eyebrow:before{box-shadow:10px 0 var(--primary-yellow),20px 0 var(--primary-blue),30px 0 var(--primary-green)}
.project-card:nth-child(4n+1){--card-color:var(--primary-red)}
.project-card:nth-child(4n+2){--card-color:var(--primary-blue)}
.project-card:nth-child(4n+3){--card-color:var(--green-ink)}
.project-card:nth-child(4n){--card-color:#a37600}
.project-card:hover h3{color:var(--card-color)}
.project-number{background:var(--card-color);color:white}
.project-card:nth-child(4n) .project-number{background:var(--primary-yellow);color:var(--ink)}
.about-tags span:nth-child(3){border-color:var(--primary-green)}
.contact-arrow{background:var(--primary-green);border-color:var(--primary-green)}
.contact-arrow:hover{background:var(--primary-blue);border-color:var(--primary-blue)}
.email-link{border-bottom-color:var(--primary-green)}
.filters button.active{background:var(--green-ink)}
/* Each word remains intact; only the visible letter ink moves. */
.playful-word{display:inline-block;white-space:nowrap}
.playful-letter{display:inline-block;transform-origin:50% 78%;transform:translate3d(var(--letter-x,0px),var(--letter-y,0px),0) rotate(calc(var(--letter-rest,0deg) + var(--letter-turn,0deg))) rotate(var(--letter-pull-angle,0deg)) scale(var(--letter-stretch,1),var(--letter-squash,1)) rotate(calc(0deg - var(--letter-pull-angle,0deg)));will-change:auto}
.clay-type{position:relative;isolation:isolate}
.clay-type.clay-held{z-index:6}
.clay-type .playful-word{touch-action:none}
.clay-type .playful-letter{position:relative;touch-action:none;cursor:grab}
.playful-letter.letter-pressed{filter:brightness(.88)}
.clay-type .letter-held{z-index:5;cursor:grabbing;will-change:transform}
.hero-first .playful-letter,.hero-name-line .playful-letter{--letter-rest:-2deg}
.hero-first .playful-letter:nth-child(2n),.hero-name-line .playful-letter:nth-child(2n){--letter-rest:2.5deg}
.hero-first .playful-letter:nth-child(3n),.hero-name-line .playful-letter:nth-child(3n){--letter-rest:-.5deg}
.hero-name-line .primary-letter:nth-child(2n) .playful-letter{--letter-rest:2.5deg}
.hero-name-line .primary-letter:nth-child(3n) .playful-letter{--letter-rest:-.5deg}
.letter-reactive{overflow:visible}
.clay-hand{position:fixed;left:0;top:0;width:32px;height:40px;pointer-events:none!important;z-index:2147483647;opacity:0;transform:translate3d(-200px,-200px,0);filter:drop-shadow(0 1px 1px rgba(0,0,0,.13));contain:layout style size}
.clay-hand.visible{opacity:1}
.clay-hand canvas{width:100%;height:100%;display:block;pointer-events:none!important}
@media(hover:hover) and (pointer:fine){html.has-clay-cursor,html.has-clay-cursor *{cursor:none!important}html.has-clay-cursor input,html.has-clay-cursor textarea,[contenteditable=true]{cursor:text!important}}
.cursor-sound{display:inline-flex;align-items:center;gap:6px;font:16px/1 var(--body);padding:7px 10px;border:1px solid var(--line);border-radius:24px;white-space:nowrap}
.cursor-sound svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cursor-sound[aria-pressed=true]{color:var(--green-ink);border-color:var(--primary-green)}
@media(max-width:1000px){.hero-background h1>.hero-name-line{font-size:9.7vw}.hero-background h1>.hero-first{font-size:8.3vw}.hero-copy{max-width:90vw}.header nav{gap:20px}.project-card h3{font-size:23px}}
@media(max-width:700px){.hero-background h1>.hero-first{font-size:clamp(48px,13.2vw,83px);line-height:1.15}.hero-background h1>.hero-name-line{font-size:clamp(39px,11.6vw,75px);gap:.19em;letter-spacing:-.06em;margin-top:4px}.hero-background .hero-note p{font-size:22px;max-width:340px}.hero-copy{max-width:100%}.header nav{font-size:17px;gap:10px}.brand-name{font-size:30px}.section-note{font-size:20px}.project-card h3{font-size:27px}.work-title{font-size:18px}.about-copy h2{font-size:36px}.contact h2{font-size:11vw}.project-page-title{font-size:12.2vw}.project-lead{font-size:28px}.single-line-lead{font-size:clamp(12px,3vw,20px)}.clay-hand{display:none!important}}
@media(prefers-reduced-motion:reduce){.playful-letter:not(.letter-held){transform:none!important}.clay-hand{display:none!important}html.has-clay-cursor,html.has-clay-cursor *{cursor:auto!important}}


/* A little more film below the opening, and quieter project typography. */
.hero.hero-background{min-height:calc(var(--hero-viewport-height,100svh) - var(--hero-header-height,83px) + clamp(80px,12svh,150px))}
.project-card h3,.project-page-title,.project-process h3,.project-story h2,.project-pdf h2,.viewer-top h2{font-weight:400;color:#52615a;letter-spacing:-.035em}
.project-page-title{font-size:clamp(42px,7.2vw,112px);line-height:1.18;white-space:nowrap;max-width:100%}
.project-card h3{font-size:clamp(21px,1.9vw,29px)}
.project-lead,.project-lead.single-line-lead{max-width:100%;width:100%;white-space:nowrap;font-size:clamp(11px,2.15vw,36px);line-height:1.35;letter-spacing:0;color:#637068}
.work-title,.project-next{color:#52615a}
.project-asset>span:last-child,.project-facts,.project-process p{color:#58655e}
.project-feature[data-autoplay] .feature-hint{display:none}
@media(max-width:700px){.hero.hero-background{min-height:calc(var(--hero-viewport-height,100svh) - var(--hero-header-height,119px) + 80px)}.project-page-title{font-size:10vw}.project-card h3{font-size:25px}}

/* One expressive title family and the same clean sans serif for every supporting text. */
body,button,input,select,textarea{font-family:var(--body)}
.header nav{font-size:15px;line-height:1.4}
.hero-background .hero-note p{font-family:var(--body);font-size:clamp(17px,1.65vw,24px);line-height:1.5;letter-spacing:0}
.section-note,.project-card>p{font-size:15px;line-height:1.5}
.filters button,.load-more,.pill,.project-next{font-size:15px;line-height:1.4}
.work-title{font-size:15px;line-height:1.4}
.cursor-sound{font-size:12px}
.project-back{font-family:var(--body);font-size:14px;margin-bottom:22px}
.project-page-title{margin:10px 0 10px}
.project-lead,.project-lead.single-line-lead{font-family:var(--body);font-size:clamp(11px,1.8vw,28px);line-height:1.45;margin:0 0 30px}
.letter-reactive,h1,h2,h3,.project-lead{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media(max-width:700px){.header nav{font-size:13px}.section-note,.project-card>p{font-size:15px}.work-title{font-size:14px}.project-back{font-size:13px;margin-bottom:18px}.project-page-title{margin-top:8px;margin-bottom:8px}.project-lead,.project-lead.single-line-lead{margin-bottom:24px}.hero-background .hero-note p{font-size:16px}}