@font-face {
  font-family: Studio;
  src: url("fonts/studio-regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Studio Semibold";
  src: url("fonts/studio-semibold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Trade Gothic";
  src: url("fonts/trade-gothic.woff2") format("woff2");
  font-display: swap;
}
:root {
  --ink: #313139;
  --body: #414145;
  --paper: #fff;
  --edge: 40px;
  --header-edge: 60px;
  --head-height: 160px;
  --heading-font: "Studio Semibold", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 20px/1.3 Studio, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,p,ul,figure { margin: 0; }
h1,h2,h3 { color: var(--ink); font-family: var(--heading-font); font-weight: 500; line-height: 1.2; }
a { color: inherit; text-underline-offset: .13em; }
a:hover { text-decoration-thickness: .1em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: #dbd7d2; color: #000; }
.sr-only,.skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { position: fixed; z-index: 10; left: 1rem; top: 1rem; padding: .5rem; background: white; }
.page { padding-inline: var(--edge); }
.prose p + p,.prose h3 + p { margin-top: 1.3em; }
#content { scroll-margin-top: var(--head-height); }

.site-header {
  position: fixed; z-index: 5; inset: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--header-edge); height: var(--head-height);
  background: var(--paper);
}
.site-header.compact { height: 140px; }
.brand { z-index: 2; flex: none; color: var(--ink); }
.brand a { display: block; }
.brand img { width: 400px; }
.tagline { margin: 10px 0 10px 10px; }
.desktop-nav { display: flex; gap: clamp(22px,5vw,64px); align-items: center; }
.site-header nav a { color: var(--ink); font: 26px/1 var(--heading-font); text-decoration: none; white-space: nowrap; }
.site-header nav a:hover,.site-header nav a:focus-visible { text-decoration: underline; }
.mobile-nav { display: none; }
.mobile-nav:not([open]) nav { display:none; }

.home { padding-top: var(--head-height); padding-bottom: 60px; }
.home h1 { position: relative; top: .035em; text-align: center; font: 500 10.2vw/1.29 "Trade Gothic", Impact, sans-serif; }
.home-intro,.home-outro { font-size: 30px; }
.home-intro { margin: 45px 0 80px; }
.home > img { width: min(100%,1500px); margin-inline: auto; }
.home-outro { margin-top: 64px; }
.home-outro p + p { margin-top: 10px; }

.about { padding-top: 246px; padding-bottom: 276px; }
.about h1,.about h2 { font-size: 46px; letter-spacing: .5px; }
.story,.person { margin-left: calc((100% + 20px)/6); }
.story { margin-top: 40px; margin-bottom: 105px; }
.person { display: grid; grid-template-columns: calc((100% + 20px)/5 - 20px) 1fr; column-gap: 20px; }
.portrait { margin-top: 40px; }
.biography { margin-top: 30px; }
.biography h3 { color: var(--body); font: bold 22px/1 Studio, Arial, sans-serif; }
.person-links { grid-column: 1/-1; padding-top: 36px; }
.person-links .social-links { justify-content: center; font-size: 16px; gap: 30px; }
.person-links .social-links img { width: 18px; height: 18px; margin-right: 8px; }

.services { padding-top: 220px; padding-bottom: 104px; }
.services h2,.portfolio h1 { font-size: 26px; letter-spacing: .5px; }
.service-section > div { padding-inline: calc((100% + 20px)/12); }
.service-section + .service-section { margin-top: 40px; }
.service-section:nth-of-type(3) { margin-top: 100px; }
.studio-photos { display: flex; margin: 100px -10px 0; align-items: flex-start; }
.studio-photos img { width: calc(100% * 5/12 - 20px); margin-inline: 10px; }
.studio-photos img + img { width: calc(25% - 20px); margin-top: 40px; margin-left: calc(100%/6 + 10px); }
.service-lists { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 80px -10px 0; }
.service-lists section { padding-inline: 10px; }
.service-lists ul { margin: 10px 0 0 calc((100% + 20px)/12); padding-left: 30px; width: calc((100% + 20px)*5/6 - 20px); }
.service-lists section + section ul { margin-left: calc((100% + 20px)/6); }
.service-lists li + li { margin-top: 10px; }

.portfolio { padding-top: 220px; padding-bottom: 20px; }
.portfolio h1 { margin-bottom: 63px; }
.portfolio-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-inline: -10px; }
.work-column { min-width: 0; }
.work-column:first-child { padding-top: 60px; }
.work { --size: 4; --shift: 0; --gap: 0px; --textgap: 0px; padding-top: var(--gap); }
.work-art,.work-copy {
  margin-left: calc(var(--shift)*100%/12);
  width: min(calc(var(--size)*100%/6),calc((12 - var(--shift))*100%/12));
  padding-inline: 10px;
}
.work-art img { width: 100%; }
.work-copy { margin-top: var(--textgap); }
.memories-of-machines,.departure-tapes { display: flex; align-items: flex-start; }
.memories-of-machines .work-copy,.departure-tapes .work-copy { flex: 0 0 calc(100%/3); }
.memories-of-machines .work-art,.departure-tapes .work-art { flex: 0 0 calc(200%/3); }
.memories-of-machines .work-copy { order: -1; margin-top: 60px; }
.memories-of-machines .work-art { margin-top: 40px; }
.words-tel { --shift:1; --gap:80px; }
.tweetify-it { --shift:2; --gap:120px; --textgap:20px; }
.music-videos { --shift:1; --size:5; --gap:100px; }
.music-videos .work-copy { --shift:2; --size:4; }
.the-skies { --size:5; --gap:120px; --textgap:20px; }
.nosound-website { --shift:3; --gap:20px; --textgap:20px; }
.nosound-website .work-copy { --size:5; }
.copy-forge { --shift:1; --gap:40px; }
.audioshapes { --shift:1; --size:5; --gap:20px; }
.departure-tapes { --gap:160px; }
.departure-tapes .work-copy { margin-top: 20px; }
.career-website { --gap:140px; --size:5; --textgap:20px; }
.career-website .work-art { width:100%; }
.this-night { --shift:3; --gap:140px; }
.giancarlo-website { --size:5; --gap:140px; --textgap:20px; }

.contact-page { display: grid; grid-template-rows: 1fr auto; min-height: 100svh; }
.contact { padding-top: 210px; }
.contact h1 { font-size: 66px; text-align: center; }
.contact-column { width: calc((100% + 20px)/2 - 20px); margin: 40px auto 0; }
.contact-intro { text-align: center; }
.contact-intro a { color: var(--ink); }

.site-footer { padding: 40px var(--header-edge); color: #28282e; }
.social-links { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; padding: 0; align-items: center; }
.social-links a { display: inline-flex; align-items: baseline; gap: .15em; text-decoration: none; }
.social-links a:hover { text-decoration: underline; }
.social-links img { width: auto; height: .9em; align-self: center; opacity: .84; }
.site-footer .social-links { font-size: 24px; line-height: 1.1; }
.site-footer > p { margin-top: 40px; font-size: 12px; }

@media (min-width: 1081px) and (max-width: 1200px) {
  .brand img { width: 32vw; }
  .desktop-nav { gap: 3vw; }
  .site-header nav a { font-size: 23px; }
}
@media (min-width: 768px) and (max-width: 1080px) {
  .memories-of-machines,.departure-tapes { display:block; }
  .memories-of-machines .work-art,.memories-of-machines .work-copy,
  .departure-tapes .work-art,.departure-tapes .work-copy { width:100%; }
  .memories-of-machines .work-art { margin-top:0; }
  .memories-of-machines .work-copy { margin-top:20px; }
}
@media (max-width: 1080px) {
  :root { --head-height:80px; --header-edge:20px; }
  .site-header.compact { height:var(--head-height); }
  .brand img { width:200px; }
  .tagline,.desktop-nav { display:none; }
  .mobile-nav { display:block; }
  .mobile-nav summary {
    position:relative; z-index:2; display:grid; place-items:center;
    width:44px; height:44px; margin-right:-14px; list-style:none; cursor:pointer;
  }
  .mobile-nav summary::-webkit-details-marker { display:none; }
  .mobile-nav summary svg { width:16px; height:16px; fill:var(--ink); }
  .mobile-nav summary rect { transform-origin:center; }
  .mobile-nav[open] summary rect:first-child { transform: translateY(165px) rotate(45deg); transform-origin:50% 6.6%; }
  .mobile-nav[open] summary rect:nth-child(2) { opacity:0; }
  .mobile-nav[open] summary rect:last-child { transform: translateY(-165px) rotate(-45deg); transform-origin:50% 93.4%; }
  .mobile-nav nav { position:fixed; z-index:1; inset:0; display:grid; place-content:center; justify-items:start;
    gap:50px; padding:80px 20px clamp(80px,23vh,200px); background:var(--paper); overflow:auto; }
  .site-header .mobile-nav a { font-size:20px; line-height:1.1; }
  body:has(.mobile-nav[open]) { overflow:hidden; }
}
@media (max-width: 767px) {
  :root { --edge:20px; }
  body { font-size:16px; }
  .home { padding-top:100px; padding-bottom:50px; }
  .home-intro,.home-outro { font-size:inherit; }
  .home-intro { margin:20px 0 40px; }
  .home-outro { margin-top:24px; }
  .about { padding-top:131px; padding-bottom:125px; }
  .about h1,.about h2 { font-size:28px; }
  .story,.person { margin-left:0; }
  .story { margin-top:20px; margin-bottom:61px; }
  .person { display:block; }
  .portrait { margin-top:30px; }
  .biography { margin-top:20px; }
  .biography h3 { font-size:16px; }
  .person-links { padding-top:70px; }
  .person-links .social-links { font-size:14px; gap:20px; }
  .person-links .social-links img { width:14px; height:14px; margin-right:4px; }
  .services { padding-top:120px; padding-bottom:84px; }
  .services h2,.portfolio h1 { font-size:20px; }
  .service-section > div { padding:0; }
  .service-section + .service-section { margin-top:20px; }
  .service-section:nth-of-type(3) { margin-top:50px; }
  .studio-photos { display:block; margin:50px 0 0; }
  .studio-photos img,.studio-photos img + img { margin:0; width:100%; }
  .service-lists { display:block; margin:50px 0 0; }
  .service-lists section { padding:0; }
  .service-lists section + section { margin-top:100px; }
  .service-lists ul,.service-lists section + section ul { width:auto; margin-left:0; }
  .portfolio { padding-top:110px; padding-bottom:60px; }
  .portfolio h1 { margin-bottom:50px; }
  .portfolio-columns { display:block; }
  .work-column:first-child { padding-top:0; }
  .work-column + .work-column { margin-top:60px; }
  .work { padding-top:calc(var(--gap)/2); }
  .work-copy { margin-top:calc(var(--textgap)/2); }
  .memories-of-machines,.departure-tapes { display:block; }
  .memories-of-machines .work-art,.memories-of-machines .work-copy,
  .portfolio-columns > :not(:first-child) :is(.work-art,.work-copy) { width:100%; margin-left:0; }
  .memories-of-machines .work-art { margin-top:0; }
  .memories-of-machines .work-copy { margin-top:20px; }
  .nosound-website { padding-top:0; }
  .nosound-website .work-art img { width:calc(100% - min(120px,30vw)); }
  .departure-tapes .work-copy { margin-top:20px; }
  .contact { padding-top:100px; }
  .contact h1 { font-size:32px; }
  .contact-column { width:100%; margin-top:20px; }
  .site-footer { padding-block:20px; display:flex; align-items:center; gap:10px; }
  .site-footer nav { flex:0 1 58%; }
  .site-footer .social-links { font-size:20px; column-gap:10px; row-gap:0; }
  .site-footer > p { margin:0; flex:1; }
}
@media (max-width: 365px) {
  .person-links .social-links { gap:12px; }
}