.studio--fashion-boutique { --surface: #f4f2ee; --tone: #252421; --display-font: StudioBodoni; }
.edit-hero { padding: 25px 5% 0; }
.edit-nav { display: flex; justify-content: space-between; gap: 25px; font-size: 9px; letter-spacing: .13em; }
.edit-masthead { font: 24cqw/.9 StudioBodoni; letter-spacing: -.08em; text-align: center; padding: 15px 0 5px; }
.edit-photo { position: relative; height: 430px; }
.edit-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#151711c4,transparent); }
.edit-photo > img { object-position: center 45%; }
.edit-copy { position: absolute; z-index: 1; top: 12%; left: 5%; color: #f8f5ee; }
.edit-copy .s-title { font-size: 6.6cqw; }
.edit-copy .s-button { margin-top: 25px; color: #f8f5ee; border-bottom: 1px solid; background: transparent; padding: 10px 0; }
.edit-rail { display: flex; justify-content: space-between; border-bottom: 1px solid #9e9e96; padding: 25px 0; gap: 25px; font-size: 10px; }
.studio--fashion-boutique .studio-grid article { border: 0; border-left: 1px solid #9e9e96; }
.studio--jewelry { --surface: #30232a; --tone: #e5cca7; --display-font: StudioBodoni; }
.aurel-hero { display: grid; grid-template-columns: 48% 52%; min-height: 850px; }
.aurel-image { position: relative; }
.aurel-image img { position: absolute; inset: 0; object-position: 40% center; }
.aurel-image::after { content: ''; position: absolute; inset: 0; background: #31212b30; }
.aurel-image > span { position: absolute; top: 35px; left: 35px; z-index: 1; color: #fff4db; font-size: 16px; letter-spacing: .2em; }
.aurel-content { padding: 35px 10% 45px; position: relative; }
.aurel-content nav { display: flex; justify-content: flex-end; gap: 35px; font-size: 10px; margin-bottom: 120px; }
.aurel-content .s-title { font-size: 6.3cqw; letter-spacing: -.035em; }
.aurel-content p:not(.s-kicker) { font-size: 13px; margin: 30px 0; }
.aurel-content .s-button { border-bottom: 1px solid; padding: 10px 0; background: transparent; color: inherit; }
.aurel-monogram { position: absolute; bottom: 35px; right: 40px; font: 80px StudioBodoni; opacity: .5; }
.studio--jewelry .studio-body { background: #e5cca7; color: #30232a; padding: 8% 12%; }
.studio--florist { --surface: #f7efc8; --tone: #654c43; --display-font: StudioBodoni; }
.studio--florist .s-brand { font: 33px StudioBodoni; }
.stem-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px 8%; padding: 5% 8% 65px; position: relative; }
.stem-note { font: 40px/.9 StudioScript; transform: rotate(-8deg); grid-column: 1; margin-left: 40px; }
.stem-heading { grid-column: 1; grid-row: 2; }
.stem-heading .s-title { font-size: 7.7cqw; }
.stem-heading p { margin: 25px 0; font-size: 14px; }
.stem-heading .s-button { background: #855666; color: #fff4db; border-radius: 40px; }
.stem-polaroid { grid-column: 2; grid-row: 1 / 3; padding: 15px 15px 20px; background: #fffdf0; transform: rotate(6deg); align-self: center; box-shadow: 0 10px 25px #6e564417; }
.stem-polaroid img { height: 410px; }
.stem-polaroid figcaption { font: 26px StudioScript; text-align: center; padding-top: 15px; }
.stem-flower { position: absolute; top: 7%; left: 43%; font-size: 120px; color: #c77784; z-index: 1; }
.stem-paper { grid-column: 2; width: 75%; padding: 20px; background: #ecd0d1; transform: rotate(-5deg); font-size: 8px; justify-self: end; margin-top: -30px; }
.stem-paper strong { display: block; font: 30px StudioScript; margin: 10px 0; }
.stem-paper a { font-size: 11px; }
.studio--florist .studio-body { background: #ecd0d1; }
.studio--auto-repair { --surface: #252927; --tone: #f0e7d4; --display-font: StudioCondensed; --body-font: StudioMono; }
.gear-utility { display: flex; justify-content: space-between; padding: 10px 5%; background: #e17f40; color: #252927; font-size: 9px; }
.studio--auto-repair .s-brand { font: 35px StudioCondensed; }
.studio--auto-repair .s-brand span { font-size: 22px; }
.gear-hero { padding: 25px 5% 55px; display: grid; grid-template-columns: 1fr 1.2fr .75fr; gap: 3%; align-items: center; }
.gear-head .s-title { font-size: 6.8cqw; line-height: 1; letter-spacing: -.015em; }
.gear-head .s-title em { color: #e17f40; font-style: normal; }
.gear-head .s-button { margin-top: 30px; background: #e17f40; color: #252927; }
.gear-photo { height: 540px; position: relative; }
.gear-photo img { filter: saturate(.5); }
.gear-marker { position: absolute; bottom: 20px; left: 15px; background: #252927; padding: 15px; font-size: 10px; line-height: 1.8; }
.gear-board { border-top: 4px solid #e17f40; padding-top: 25px; }
.gear-board > span { font-size: 8px; }
.gear-board a { display: flex; justify-content: space-between; border-bottom: 1px solid #667167; padding: 25px 0; font-size: 11px; gap: 12px; }
.gear-board p { font-size: 10px; margin-top: 30px; }
.studio--auto-repair .studio-body { background: #e8e1d3; color: #252927; }
.studio--auto-detailing { --surface: #0f1921; --tone: #d6e679; --display-font: StudioSpace; }
.reflect-hero { min-height: 850px; display: flex; flex-direction: column; }
.reflect-background { position: absolute; inset: 0; }
.reflect-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#07121fd4,#07121f20 50%,#07121fe8); }
.reflect-hero .s-nav, .reflect-copy, .reflect-control { position: relative; z-index: 1; }
.reflect-hero .s-nav { color: #e9eeec; }
.reflect-hero .s-brand { font-size: 26px; letter-spacing: .03em; }
.reflect-hero .s-brand span { font-size: 11px; }
.reflect-copy { padding: 5% 6%; }
.reflect-copy .s-title { font-size: 7.3cqw; line-height: 1.1; font-weight: 700; }
.reflect-copy .s-title em { color: #f1f4eb; font-style: normal; }
.reflect-control { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 25px 6% 40px; margin-top: auto; }
.reflect-control > div { max-width: 530px; }
.reflect-control > div > span { font-size: 9px; letter-spacing: .16em; }
.reflect-control .s-choice-copy { color: #e5ece5; }
.studio--auto-detailing .studio-body { background: #172936; }
@container (max-width: 700px) {
  .edit-nav { font-size: 8px; }
  .edit-nav > span { display: none; }
  .edit-masthead { font-size: 31cqw; padding-block: 25px; }
  .edit-photo { height: 450px; }
  .edit-copy { top: 25%; left: 7%; }
  .edit-copy .s-title { font-size: 13cqw; }
  .edit-rail { font-size: 8px; gap: 15px; }
  .aurel-hero { grid-template-columns: 1fr; }
  .aurel-image { height: 380px; }
  .aurel-content { padding: 25px 9% 55px; }
  .aurel-content nav { margin-bottom: 40px; }
  .aurel-content .s-title { font-size: 13cqw; }
  .aurel-monogram { right: 25px; bottom: 25px; font-size: 60px; }
  .stem-hero { grid-template-columns: 1fr; gap: 35px; }
  .stem-note { font-size: 34px; }
  .stem-heading .s-title { font-size: 16cqw; }
  .stem-polaroid { grid-column: 1; grid-row: 3; width: 92%; margin: auto; }
  .stem-polaroid img { height: 320px; }
  .stem-flower { top: 30px; left: auto; right: 5%; font-size: 85px; }
  .stem-paper { grid-column: 1; width: 60%; margin-top: -15px; }
  .gear-utility { font-size: 7px; gap: 20px; }
  .gear-hero { grid-template-columns: 1fr; gap: 35px; padding-inline: 7%; }
  .gear-head .s-title { font-size: 16cqw; }
  .gear-photo { height: 330px; }
  .gear-board a { padding-block: 20px; }
  .reflect-hero { min-height: 850px; }
  .reflect-copy { padding-top: 55px; }
  .reflect-copy .s-title { font-size: 11cqw; }
  .reflect-control { flex-direction: column; align-items: flex-start; padding-top: 80px; }
}