.studio-arrow {
  display: inline-block;
  position: relative;
  flex: 0 0 .88em;
  width: .88em;
  height: .88em;
  margin-inline-start: .16em;
  vertical-align: -.06em;
  color: currentColor;
}
.studio-arrow::before, .studio-arrow::after {
  content: "";
  position: absolute;
}
.studio-arrow::before {
  width: 83%;
  height: 1.5px;
  background: currentColor;
  top: calc(50% - .75px);
  left: 5%;
}
.studio-arrow::after {
  width: 45%;
  height: 45%;
  right: 15%;
  top: 50%;
  border-top: 1.5px solid;
  border-right: 1.5px solid;
  transform: translateY(-50%) rotate(45deg);
}
.studio-arrow--out { transform: rotate(-45deg); }
.studio-arrow--down { transform: rotate(90deg); }
.text-link > .studio-arrow, .action > .studio-arrow { margin-inline-start: 0; }
.text-link > .studio-arrow { align-self: center; }
.inquiry-form .form-privacy { margin-block: .5rem 0; }

@media (max-width: 720px) {
  .masthead .masthead-inner { min-height: 65px; gap: .55rem; }
  .masthead .studio-logo { width: clamp(70px, 21vw, 94px); }
  .masthead .header-actions { gap: .32rem; }
  .masthead :is(.share-button, .theme-toggle, .mobile-nav summary) {
    min-height: 44px;
    padding-inline: .55rem;
  }
  .masthead .share-button { padding-inline: .7rem; }
  .mobile-nav summary { gap: .42rem; }
  .mobile-nav summary::after {
    content: "";
    width: .4rem;
    height: .4rem;
    border-right: 1.5px solid;
    border-bottom: 1.5px solid;
    transform: translateY(-.12rem) rotate(45deg);
  }
  .mobile-nav[open] summary::after { transform: translateY(.07rem) rotate(225deg); }
  .studio-shell .mobile-nav nav {
    width: min(14rem, calc(100vw - 2rem));
    padding: .3rem .45rem;
    top: calc(100% + .35rem);
  }
  .mobile-nav nav a {
    justify-content: space-between;
    padding: .38rem .6rem;
    gap: .65rem;
  }
  .mobile-nav nav a + a { border-top: 1px solid var(--detail-rule); }
  .mobile-nav nav a::after {
    content: "";
    width: .4rem;
    height: .4rem;
    flex-shrink: 0;
    margin-inline-end: .2rem;
    border-top: 1.5px solid;
    border-right: 1.5px solid;
    transform: rotate(45deg);
    color: var(--accent);
  }
  .mobile-nav nav a[aria-current] {
    background: var(--selected);
    text-decoration: none;
  }
}

@media (max-width: 600px) {
  .studio-shell {
    --card-padding: .82rem;
    --section-space: 1.65rem;
  }

  /* Keep hero artwork near the heading and give the description the full reading width. */
  .studio-shell :is(.editorial-intro, .contact-intro, .about-profile, .studio-photo-intro) {
    padding-block: 1.1rem .9rem;
    gap: .65rem;
  }
  .studio-shell .editorial-intro { grid-template-columns: minmax(0, 1fr); }
  .studio-shell :is(.editorial-intro, .contact-intro, .about-profile, .studio-photo-intro) h1 {
    font-size: clamp(2.65rem, 10.8vw, 4rem);
    line-height: .97;
    max-inline-size: none;
    text-wrap: balance;
  }
  .studio-shell .editorial-intro h1 em { white-space: nowrap; }
  .studio-shell :is(.editorial-intro, .contact-intro, .studio-photo-intro) .intro-aside {
    margin-block: .65rem 0;
    padding-block-end: 0;
  }
  .studio-shell :is(.editorial-intro, .contact-intro, .studio-photo-intro) .intro-aside p,
  .studio-shell .about-profile .studio-profile-copy p:not(.kicker) {
    max-inline-size: none;
    font-size: .97rem;
    line-height: 1.48;
  }
  .studio-shell .editorial-intro::before {
    inset: .1rem 0 auto 34%;
    height: clamp(6.2rem, 30vw, 10.4rem);
    mask-image: linear-gradient(90deg, transparent 4%, #000 62%),
      linear-gradient(180deg, #000 44%, transparent 100%);
    mask-composite: intersect;
    opacity: .42;
  }
  :root[data-theme="dark"] .studio-shell .editorial-intro::before { opacity: .29; }
  .home-intro .intro-actions { gap: .2rem .85rem; margin-block-start: .72rem; }
  .intro-actions :is(.text-link, .action), .about-profile .text-link { min-block-size: 44px; }

  .project-stage .feature-selector button {
    min-block-size: 49px;
    padding: .42rem .52rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    column-gap: .2rem;
  }
  .project-stage .feature-selector button strong { line-height: 1.2; font-size: .83rem; }
  .project-stage .feature-selector button small {
    grid-column: 1 / -1;
    margin-block-start: .15rem;
    font-size: .7rem;
  }
  .project-stage .feature-selector button[aria-pressed="true"]::after {
    content: "";
    grid-area: 1 / 2;
    align-self: center;
    width: .32rem;
    height: .32rem;
    background: currentColor;
    border-radius: 50%;
  }
  .studio-shell .project-stage .feature-copy { gap: .42rem; padding: var(--card-padding); }
  .project-stage .feature-copy h2 { text-wrap: balance; }
  .project-stage .feature-copy > p:not(.kicker) { max-inline-size: none; }
  .project-stage .feature-copy > .format-label { align-self: start; }
  .project-stage .feature-copy .feature-price { gap: .22rem .5rem; margin-block-start: .12rem; }
  .feature-price .text-link { min-block-size: 36px; align-items: center; }
  .feature-visual figcaption { gap: .25rem .55rem; }
  .feature-visual figcaption .text-link { min-block-size: 32px; align-items: center; }

  .studio-shell .portfolio-copy { padding: .68rem var(--card-padding) .35rem; }
  .studio-shell .portfolio-copy h2 { margin-block: .22rem .26rem; text-wrap: balance; }
  .portfolio-copy > p:not(.kicker) { margin-block-end: .42rem; }
  .studio-shell .portfolio-image--capture { aspect-ratio: 2.22; }
  .studio-shell .portfolio-image--capture img { object-position: center top; }
  .portfolio-copy .tile-meta {
    border-top: 1px solid var(--detail-rule);
    align-items: center;
    gap: 0 .5rem;
  }
  .portfolio-copy .tile-meta .text-link { align-items: center; min-block-size: 40px; }
  .portfolio-copy .format-label { border: 0; padding: 0; }
  .studio-shell .portfolio-detail {
    grid-template-columns: minmax(0, 39%) minmax(0, 1fr);
    gap: .62rem;
    padding: .5rem var(--card-padding);
  }
  .portfolio-detail > span { display: flex; align-items: center; gap: .35rem; justify-content: space-between; }

  .concept-collection + .concept-collection { margin-block-start: 1.05rem; }
  .concept-collection-header {
    margin-block-end: .5rem;
    padding-block-end: .25rem;
    border-block-end: 1px solid var(--detail-rule);
    gap: .05rem .6rem;
  }
  .concept-collection-header h3::after { display: none; }
  .concept-collection-header .text-link { min-block-size: 36px; align-items: center; }
  .studio-shell .concept-card-copy { padding: .5rem .58rem; }
  .concept-card-title { line-height: 1.06; text-wrap: pretty; }
  .concept-card-copy .tile-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .22rem;
    padding-block-start: .2rem;
  }
  .concept-card-copy .tile-meta .format-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .3rem;
    text-align: start;
    margin-inline-start: 0;
    border-block-start: 1px solid var(--detail-rule);
    border-block-end: 0;
    padding-block: .25rem 0;
  }
  .concept-card-copy .format-label::after {
    content: "";
    width: .34rem;
    height: .34rem;
    flex: 0 0 .34rem;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: rotate(45deg);
  }

  .about-profile .studio-profile-copy h1 { margin-block-end: .56rem; }
  .about-profile .studio-profile-copy .text-link { margin-block-start: .25rem; align-items: center; }
  .about-profile .about-photo img { aspect-ratio: 1.95; }
  .about-background, .about-approach { padding-block: .85rem 1rem; }
  .about-background-grid { margin-block-start: .55rem; }
  .about-background-grid article { padding: .68rem var(--card-padding); }
  .about-approach h2 { text-wrap: balance; }

  .studio-shell .contact-intro .intro-aside { margin-block-start: 0; }
  .studio-shell .inquiry-layout { gap: .72rem; }
  .studio-shell .inquiry-form .form-note { margin-block: .28rem .6rem; }
  .studio-shell .inquiry-form .form-privacy { margin-block: .35rem 0; }
  .studio-shell .form-fields { gap: .55rem .72rem; margin-block-end: .65rem; }
  .studio-shell .form-fields :is(input, select, textarea) {
    background: color-mix(in srgb, var(--panel) 62%, var(--selected));
    margin-block-start: .18rem;
    font-weight: 400;
  }
  .form-fields :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
  .studio-shell .inquiry-aside .inquiry-aside-copy { padding: var(--card-padding); }
  .studio-shell .inquiry-aside::after { content: none; }
  .studio-shell .inquiry-aside .inquiry-links { margin-block-start: .42rem; padding-block-start: .25rem; gap: 0; }
  .inquiry-aside-copy .text-link { min-block-size: 40px; width: 100%; justify-content: space-between; align-items: center; }
  .studio-shell .inquiry-aside-art { min-height: 0; aspect-ratio: 3.65; }

  .studio-shell .footer-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-block-size: 0;
    gap: .35rem .7rem;
    padding-block: .55rem .42rem;
  }
  .studio-shell .footer-inner > .text-link {
    grid-area: 1 / 2;
    align-self: center;
    min-block-size: 44px;
    align-items: center;
  }
  .studio-shell .footer-inner nav {
    grid-column: 1 / -1;
    border-top: 1px solid var(--detail-rule);
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 .45rem;
  }
  .studio-shell .footer-inner nav a { display: flex; align-items: center; min-block-size: 40px; }
}

@media (max-width: 355px) {
  .project-stage .feature-selector button strong { font-size: .78rem; }
  .portfolio-copy .tile-meta .format-label { font-size: .58rem; }
}

@media (max-width: 340px) {
  .masthead :is(.share-button, .theme-toggle, .mobile-nav summary) { padding-inline: .45rem; }
}