@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');

:root {
  --paper:#f5f3ed;
  --ink:#262924;
  --muted:#656861;
  --line:#d8dad2;
  --orange:#bc4929;
  --green:#596b48;
  --radius:14px}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:35px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  line-height:1.65}
a {
  color:inherit;
  text-decoration:none}
button,a {
  -webkit-tap-highlight-color:transparent}
a:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:6px}
img {
  display:block;
  max-width:100%;
  height:auto}
h1,h2,h3,p,figure {
  margin:0}
h1,h2,h3 {
  font-family:Manrope,sans-serif;
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.055em}
.orange {
  color:var(--orange)}
.serif {
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.065em}
.site-header,main,footer {
  max-width:1440px;
  margin:auto}
.site-header {
  padding:25px 6%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line)}
.wordmark {
  font:800 40px/1 Manrope,sans-serif;
  letter-spacing:-4px}
.site-header nav {
  display:flex;
  gap:32px;
  align-items:center;
  font-size:13px}
.site-header nav a:hover,.project-link:hover {
  color:var(--orange)}
.nav-github {
  border:1px solid #babdb4;
  border-radius:30px;
  padding:8px 18px}
.nav-github span {
  margin-left:17px}
.hero {
  padding:55px 6% 0}
.hero-top,.hero-bottom,.hero-foot {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center}
.eyebrow,.project-kicker,.small-note,.hero-foot,.art-foot {
  font-size:11px;
  letter-spacing:.055em}
.eyebrow {
  text-transform:uppercase;
  font-weight:600}
.availability {
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px}
.availability span,.availability-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green)}
h1 {
  font-size:clamp(60px,7.9vw,112px);
  margin:44px 0 35px;
  line-height:1.04;
  letter-spacing:-.067em}
.hero-bottom p {
  font-size:16px;
  line-height:1.65;
  color:var(--muted)}
.round-link {
  display:flex;
  align-items:center;
  gap:23px;
  font-size:13px}
.round-link span {
  border:1px solid #aeb2a5;
  border-radius:50%;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  font-size:20px;
  transition:background .2s}
.round-link:hover span {
  background:#e4e7dc}
.hero-foot {
  margin-top:55px;
  padding:21px 0;
  border-top:1px solid var(--line);
  color:var(--muted)}
.work-section {
  padding:65px 6% 80px}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:32px}
.section-heading h2 {
  font-size:40px;
  margin-top:15px}
.small-note {
  color:var(--muted)}
.project {
  min-width:0}
.featured {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:0;
  background:#ebece5;
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:48px}
.project-art {
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  height:410px}
.featured .project-art {
  height:555px;
  border-radius:0}
.ostinova-art {
  background:#dce3cc}
.art-label {
  position:absolute;
  z-index:2;
  top:27px;
  left:30px;
  right:30px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.02em}
.art-label img {
  border-radius:9px}
.art-label>span:last-child:not(:first-child) {
  margin-left:0}
.art-copy {
  position:absolute;
  top:110px;
  left:32px;
  font:500 31px/1.1 Manrope,sans-serif;
  letter-spacing:-.05em;
  z-index:2}
.phones {
  position:absolute;
  bottom:-65px;
  right:25px;
  display:flex;
  align-items:center;
  gap:17px;
  transform:rotate(-9deg)}
.phone {
  border:5px solid #242622;
  border-radius:29px;
  box-shadow:0 24px 30px #20271e30;
  width:176px;
  height:auto}
.phones .phone-back {
  transform:translateY(30px);
  width:163px}
.phones .phone-front {
  width:190px;
  transform:translateY(-26px)}
.art-foot {
  position:absolute;
  bottom:22px;
  left:30px}
.ostinova-art .art-foot {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  left:24px;
  bottom:28px}
.project-info {
  padding:30px 0 0}
.featured .project-info {
  padding:40px 35px;
  display:flex;
  flex-direction:column;
  justify-content:center}
.project-kicker {
  display:flex;
  justify-content:space-between;
  gap:10px;
  text-transform:uppercase;
  color:var(--muted);
  font-size:10px}
.status:before {
  content:'';
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  margin-right:5px}
.project-info h3 {
  font-size:34px;
  margin:21px 0 11px}
.project-subtitle {
  font-weight:550;
  font-size:16px;
  margin-bottom:12px}
.project-info>p:not(.project-subtitle) {
  font-size:14px;
  color:var(--muted);
  line-height:1.7}
.project-detail {
  border-top:1px solid #cdd1c4;
  margin-top:23px;
  padding-top:17px}
.project-detail>span {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em}
.project-detail p {
  font-size:13px;
  color:var(--muted);
  margin-top:6px}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  padding:0;
  margin:20px 0 23px}
.tags li {
  font-size:10px;
  border:1px solid #c8ccbf;
  border-radius:20px;
  padding:3px 9px}
.project-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #b7bcae;
  padding-bottom:10px;
  font-size:13px;
  font-weight:500}
.project-link span {
  font-size:20px}
.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px}
.music-art {
  background:#dddce8}
.music-art .art-label {
  justify-content:space-between}
.music-phones {
  display:flex;
  gap:23px;
  position:absolute;
  top:95px;
  left:50%;
  transform:translateX(-50%) rotate(-8deg)}
.music-phones .phone {
  width:170px;
  max-width:none}
.music-phones .phone+img {
  transform:translateY(40px)}
.audiology-art {
  background:#e8c9ac}
.audiology-art .art-label {
  justify-content:space-between}
.browser-frame {
  position:absolute;
  left:35px;
  right:-100px;
  top:102px;
  background:white;
  border-radius:9px;
  box-shadow:0 22px 35px #774c3230;
  overflow:hidden;
  transform:rotate(-5deg)}
.browser-bar {
  height:25px;
  background:#f7f7f5;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 9px}
.browser-bar i {
  width:5px;
  height:5px;
  background:#d6d6d1;
  border-radius:50%}
.browser-bar span {
  font-size:7px;
  margin-left:50px;
  color:#666}
.browser-frame img {
  width:100%;
  height:auto}
.studio-row {
  margin-top:55px;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  gap:22px;
  align-items:center}
.studio-symbol {
  width:64px;
  height:64px;
  border-radius:14px;
  background:#e7ded0;
  display:grid;
  place-items:center;
  font:600 34px Georgia;
  color:var(--orange)}
.studio-row .eyebrow {
  font-size:9px;
  color:var(--muted)}
.studio-row h3 {
  font-size:22px;
  margin:5px 0}
.studio-row p {
  font-size:12px;
  color:var(--muted)}
.studio-arrow {
  margin-left:auto;
  font-size:30px}
.studio-row:hover h3 {
  color:var(--orange)}
.about-section {
  border-top:1px solid var(--line);
  padding:75px 6%;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:65px}
.about-section h2 {
  font-size:48px;
  margin-top:27px}
.about-lead {
  font-size:21px;
  line-height:1.5;
  margin-bottom:22px}
.about-copy>p:not(.about-lead) {
  color:var(--muted);
  font-size:14px}
.skills {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin:32px 0}
.skills h3 {
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  letter-spacing:0;
  margin-bottom:10px;
  font-weight:600}
.skills p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9}
.about-copy .source-note {
  border-top:1px solid var(--line);
  padding-top:20px;
  font-size:12px!important}
.contact-section {
  margin:10px 6% 60px;
  padding:58px 30px 62px;
  text-align:center;
  border-radius:var(--radius);
  background:#e8eadf}
.contact-section .eyebrow {
  font-size:10px}
.availability-dot {
  margin-right:7px}
.contact-section h2 {
  font-size:clamp(42px,5.8vw,72px);
  margin:26px 0 32px}
.button {
  display:inline-flex;
  align-items:center;
  gap:40px;
  background:var(--ink);
  color:var(--paper);
  border-radius:40px;
  padding:13px 22px;
  font-size:12px}
.button:hover {
  background:var(--orange)}
footer {
  padding:0 6% 28px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  font-size:11px}
footer>a:first-child {
  font-size:15px;
  font-weight:600}
footer>span {
  color:var(--muted)}
.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  background:var(--ink);
  color:white;
  padding:12px 20px;
  z-index:10}
.skip-link:focus {
  top:10px}
.final-section {
  padding:100px 6%;
  max-width:1000px}
.final-section h1 {
  margin:20px 0}
.final-section .button {
  margin-top:25px}

@media(min-width:1400px) {
  .phones {
  right:50px}
.phones .phone-front {
  width:210px}
.phones .phone-back {
  width:180px}
}

@media(max-width:1000px) {
  .featured {
  grid-template-columns:1fr 1fr}
.featured .project-info {
  padding:28px}
.featured .project-art {
  height:580px}
.phones {
  right:-20px;
  bottom:-25px}
.phones .phone-back {
  width:145px}
.phones .phone-front {
  width:165px}
.art-copy {
  font-size:27px}
.project-art {
  height:350px}
.music-phones .phone {
  width:140px}
.music-phones {
  gap:14px}
.about-section {
  gap:35px}
.about-section h2 {
  font-size:40px}
.small-note {
  max-width:130px;
  text-align:right}
}

@media(max-width:700px) {
  .site-header {
  padding:20px 6%}
.wordmark {
  font-size:34px}
.site-header nav {
  gap:17px;
  font-size:11px}
.nav-github {
  padding:6px 12px}
.nav-github span {
  margin-left:5px}
.hero {
  padding-top:35px}
.hero-top {
  align-items:flex-start;
  flex-direction:column;
  gap:12px}
.eyebrow {
  font-size:10px}
h1 {
  font-size:clamp(52px,10.2vw,74px);
  margin:34px 0 26px}
.hero-bottom {
  align-items:flex-start;
  flex-direction:column;
  gap:24px}
.hero-bottom p {
  font-size:14px}
.hero-foot {
  margin-top:33px;
  font-size:9px}
.round-link {
  font-size:12px}
.round-link span {
  width:36px;
  height:36px}
.work-section {
  padding-top:45px;
  padding-bottom:45px}
.section-heading h2 {
  font-size:31px}
.small-note {
  display:none}
.featured {
  display:block;
  margin-bottom:35px}
.featured .project-art {
  height:440px}
.featured .project-info {
  padding:27px 23px}
.phones {
  right:28px;
  bottom:-120px}
.phones .phone-front {
  width:172px}
.phones .phone-back {
  width:150px}
.art-copy {
  top:93px;
  font-size:25px}
.project-grid {
  grid-template-columns:1fr;
  gap:38px}
.project-art {
  height:380px}
.music-phones .phone {
  width:160px}
.project-info h3 {
  font-size:31px}
.project-info {
  padding-top:22px}
.project-detail {
  margin-top:17px}
.studio-row {
  margin-top:38px}
.about-section {
  grid-template-columns:1fr;
  padding-top:45px;
  padding-bottom:45px;
  gap:28px}
.about-section h2 {
  font-size:41px;
  margin-top:20px}
.about-lead {
  font-size:19px}
.contact-section {
  padding:43px 20px;
  margin-bottom:35px}
.contact-section .eyebrow {
  font-size:8px}
.contact-section h2 {
  font-size:43px}
footer {
  flex-wrap:wrap;
  font-size:10px}
footer>span {
  order:3;
  width:100%}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
* {
  transition:none!important}
}