/* The brand: clear, rounded typography and a quiet, playful colour family. */
@font-face{
  font-family:Manrope;
  src:url('assets/fonts/manrope-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}

:root{
  --paper:#f8f7f2;
  --ink:#252940;
  --muted:#626678;
  --line:#dbdce3;
  --blue:#424ab3;
  --lilac:#e8e8f3;
  --butter:#eee2a6;
  --coral:var(--blue);
  --brand-sans:Manrope,Arial,sans-serif;
  --brand-line:#cbd0e1;
  --project-lilac:#e8e6f0;
  --project-sage:#e6ebdf;
  --project-sky:#e3eaf1;
  --project-butter:#eee9d7;
  --radius:16px;
}

body,.case-viewer,sup{font-family:var(--brand-sans)}
body{font-weight:400;letter-spacing:0;line-height:1.6}
button,input,textarea{font-family:inherit}
em{font-weight:450;font-variation-settings:"SOFT" 40,"WONK" 1}
.wordmark{font-weight:750;letter-spacing:-.065em}
.site-footer .wordmark{letter-spacing:-.065em}
.desktop-nav,.header-contact,.pill-button,.project-cta,
.case-image-expand,.case-viewer__actions button{font-weight:550;letter-spacing:0}
.hero-bottom p{letter-spacing:-.025em;font-weight:450}
.section-heading h2,.about-title h2,.helpers-heading h2,
.contact-large h2,.case-intro h2{font-weight:500;letter-spacing:-.045em}
.section-heading h2 em,.about-title h2 em,.helpers-heading h2 em,
.contact-large h2 em,.case-intro h2 em{font-weight:450}
.project h3{font-weight:600;letter-spacing:-.045em}
.project p,.case-lead>p,.case-story p,.case-slide figcaption p,
.about-copy>p:not(.about-lead){letter-spacing:0}
.about-lead{font-weight:450;letter-spacing:-.035em}
.services h3,.case-slide h3,.case-viewer__heading h2{font-weight:550;letter-spacing:-.025em}
.section-index,.project-meta,.gallery-heading,.dialog-top,
.case-viewer__project{font-weight:600;letter-spacing:.065em}
.case-lead dt,.form-field>span{font-weight:550}
.case-lead dd,.form-field input,.form-field textarea{letter-spacing:0}
.menu-links a{font-weight:500;letter-spacing:-.04em}
.contact-note p{font-weight:450;letter-spacing:-.025em}
.next-project small{font-weight:500;letter-spacing:-.03em}
.gallery-status,.dialog-counter{font-variant-numeric:tabular-nums}

/* The dot sweeps across the name, contained within a softly rounded footprint. */
.wordmark{position:relative;isolation:isolate;display:inline-block;overflow:hidden;padding:.16em .22em;margin:-.16em -.22em;border-radius:999px;transition:color .32s ease .08s}
.brand-dot{color:var(--blue)}
.wordmark .dot-orbit{display:none}
.wordmark .dot-core,.wordmark:hover .dot-core{z-index:-1;background:var(--blue);transform:scale(1);transform-origin:center;transition:transform .65s cubic-bezier(.22,1,.36,1)}
.wordmark:is(:focus-visible,.is-wordmark-playing){color:var(--paper)}
.wordmark:is(:focus-visible,.is-wordmark-playing) .dot-core{transform:scale(36)}
@media(hover:hover) and (pointer:fine){
 .wordmark:hover{color:var(--paper)}
 .wordmark:hover .dot-core{transform:scale(36)}
}
@media(prefers-reduced-motion:reduce){
 .wordmark,.wordmark .dot-core{transition:none}
}

/* Case backdrops keep the work's identity while sharing the brand's softness. */
.project-pluis{--project-bg:var(--project-lilac)}
.project-nextuse{--project-bg:var(--project-sage)}
.project-drone{--project-bg:var(--project-sky)}
.project-froggy{--project-bg:var(--project-butter)}
.project-dialog{--case-color:var(--project-lilac)}
.case-nextuse{--case-color:var(--project-sage)}
.case-drone{--case-color:var(--project-sky)}
.case-froggy{--case-color:var(--project-butter)}
.case-gallery{--case-bg:var(--project-lilac)}
#project-nextuse .case-gallery{--case-bg:var(--project-sage)}
#project-drone .case-gallery{--case-bg:var(--project-sky)}
#project-froggy .case-gallery{--case-bg:var(--project-butter)}
.browser-frame,.project-peek,.case-image>img{border-color:#fcfcfa}
.about-copy>p:not(.about-lead),.services>div>span,.services p,
.helpers-hint{color:var(--muted)}
.services,.services>div,.helpers-replay{border-color:var(--brand-line)}
.site-footer:before{background:var(--brand-line)}
.contact-arrow{border-color:#b9bddc}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--muted)}
.project-link{outline-offset:7px}
.project-caption{border-top-color:var(--brand-line)}
.case-visit,.contact-note>a{border-bottom-color:var(--brand-line)}
.project-visual{transition:background .35s var(--ease)}
.form-field>span{line-height:1.5}

@media(max-width:760px){
  html{scroll-padding-top:calc(112px + env(safe-area-inset-top))}
  .project-grid{gap:64px}
  .project-visual,.project-featured .project-visual{aspect-ratio:1.5;border-radius:14px}
  .browser-frame,.project-featured .browser-frame{--frame-y:-50%;top:50%;transform:translateY(var(--frame-y)) rotate(0);border-radius:6px}
  .project p,.project-featured p{font-size:15px;line-height:1.65;max-width:27ch}
  .project-caption,.project-featured .project-caption{column-gap:14px;row-gap:15px;margin-bottom:23px}
  .project-cta,.project-featured .project-cta{gap:8px;font-size:11px}
  .project-open{width:44px;height:44px}
  .about-copy>p:not(.about-lead){font-size:15px;line-height:1.75}
  .services p{font-size:13px;line-height:1.65}
  .services>div{padding-block:24px;row-gap:9px}
  .contact-note>a{min-height:44px;align-items:center}
  .form-field>span{font-size:13px}
  .dialog-top{height:calc(88px + env(safe-area-inset-top));padding-top:calc(12px + env(safe-area-inset-top))}
  .project-meta,.section-index{font-size:11px;letter-spacing:.055em}
  .contact-intro .section-index{font-size:10px}
  .gallery-heading,.case-viewer__project{letter-spacing:.05em}
  .hero-footer,.site-footer{letter-spacing:0}
}

@media print{
  .about-copy>p:not(.about-lead),.services p{color:#444}
  .site-footer:before{background:white}
}