.home {
  --text: #272e29; --text-dim: #586158; --copper: #93502f;
  --paper: #f7f4ed; --green: #304c3d; --line: #d9ddd2;
  background: radial-gradient(ellipse at 88% 8%, #e9eddf 0, transparent 38%), var(--paper);
  color: var(--text); padding: 0 5vw; font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.home-shell { max-width: 1180px; margin: auto; }
.home a { color: inherit; }
.home a:focus-visible { outline: 3px solid #93502f; outline-offset: 6px; }
.home-header { display: flex; align-items: center; justify-content: space-between; padding: 30px 0; border-bottom: 1px solid var(--line); gap: 24px; }
.home .masthead { padding: 0; }
.home-header nav { display: flex; gap: 30px; font-size: 13px; }
.home-header nav a, .home-footer a { text-decoration: none; }
.home-header nav a:hover, .home-footer a:hover { text-decoration: underline; }
.hero { position: relative; padding: 76px 0 60px; overflow: hidden; }
.eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 6px; height: 6px; background: #387450; border-radius: 50%; display: inline-block; flex: none; }
.home h1 { position: relative; z-index: 1; font-size: clamp(48px, 7.6vw, 94px); letter-spacing: -.055em; line-height: 1.04; max-width: 950px; margin: 25px 0 30px; }
.home h1 em { color: var(--green); font-weight: 400; }
.hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: 32px; position: relative; z-index: 1; }
.hero-bottom p { max-width: 470px; font-size: 16px; margin: 0; line-height: 1.8; }
.browse-link { display: flex; align-items: center; gap: 22px; white-space: nowrap; font-size: 13px; text-decoration: none; border-bottom: 1px solid #9da999; padding-bottom: 9px; }
.hero-orbit { position: absolute; width: 245px; height: 245px; right: 5%; top: 22px; opacity: .24; transform: rotate(-25deg); }
.hero-orbit span { position: absolute; inset: 0; border: 1px solid #6b8866; border-radius: 50%; }
.hero-orbit span:nth-child(2) { inset: 20px 60px; }
.hero-orbit span:nth-child(3) { inset: 60px 20px; }
.hero-orbit i { position: absolute; inset: 0; display: grid; place-items: center; font: italic 100px var(--serif); color: #67825c; }
.collection { scroll-margin-top: 24px; }
.section-label { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding: 22px 0; gap: 16px; }
.home .section-label h2 { font-family: inherit; text-transform: uppercase; letter-spacing: .16em; font-size: 10px; margin: 0; }
.home h2::before { display: none; }
.section-label > span { font: italic 14px var(--serif); color: var(--text-dim); }
.app-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.app-card { grid-column: span 3; display: flex; flex-direction: column; border: 1px solid rgba(39,46,41,.08); border-radius: 18px; padding: 30px; text-decoration: none; overflow: hidden; position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.app-card:hover { transform: translateY(-5px); box-shadow: 0 18px 32px -22px #334b3d66; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-icon { border-radius: 14px; box-shadow: 0 5px 14px #26392b16; }
.badge { display: flex; align-items: center; gap: 7px; font-size: 10px; padding: 7px 11px; border: 1px solid #334b3d22; border-radius: 30px; background: #ffffff44; }
.sizes-card { background: #e4edda; }
.mira-card { background: radial-gradient(ellipse at 88% 40%, #e7d7ec, transparent 65%), #f4eaf3; }
.fit-visual, .mira-visual { height: 225px; display: grid; place-items: center; position: relative; margin: 12px 0; }
.measure-line { position: absolute; top: 50%; width: 130%; height: 49px; background: repeating-linear-gradient(90deg, #49644555 0 1px, transparent 1px 12px); border-block: 1px solid #49644555; transform: rotate(-12deg); }
.size-ticket { position: relative; background: #f9faf2; padding: 22px 28px; box-shadow: 0 12px 35px #455c3320; transform: rotate(-5deg); border-radius: 5px; color: #344633; width: min(100%, 290px); }
.size-ticket small { font: 8px var(--mono); letter-spacing: .15em; display: block; }
.size-ticket > div { display: flex; justify-content: space-between; gap: 15px; padding: 17px 0; margin-bottom: 13px; border-bottom: 1px dashed #a9b39c; }
.size-ticket span { font: 9px var(--mono); }
.size-ticket b { display: block; font: 40px var(--serif); margin-top: 5px; }
.mira-icon { width: 58px; height: 58px; border-radius: 14px; background: #fff8f0; color: #955b59; display: grid; place-items: center; font: italic 36px var(--serif); box-shadow: 0 5px 14px #57302b12; }
.mira-ring { width: 178px; height: 178px; border: 2px solid #b3767028; border-top: 4px solid #b56864; border-right: 4px solid #b56864; border-radius: 50%; display: grid; place-items: center; transform: rotate(-25deg); }
.mira-ring > span { font: italic 38px var(--serif); transform: rotate(25deg); text-align: center; color: #6d4140; }
.mira-ring i { display: block; font-size: 14px; margin-top: 8px; }
.mira-caption { font: 8px var(--mono); letter-spacing: .19em; color: #835651; }
.card-copy { display: flex; flex-direction: column; flex: 1; }
.app-category { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
.home h3 { font: 400 clamp(28px, 3.5vw, 41px)/1.12 var(--serif); letter-spacing: -.035em; margin: 0 0 17px; }
.card-copy > p:not(.app-category) { font-size: 13px; line-height: 1.8; max-width: 39ch; margin-bottom: 24px; }
.card-link { display: flex; justify-content: space-between; border-top: 1px solid #334b3d25; padding-top: 17px; margin-top: auto; font-size: 12px; font-weight: 600; }
.small-card { grid-column: span 2; padding: 26px; }
.small-card .card-top { margin-bottom: 37px; }
.small-card h3 { font-size: clamp(26px, 2.7vw, 33px); }
.small-arrow { font-size: 22px; opacity: .45; }
.sunshine-card { background: radial-gradient(circle at 100% 0, #ffe196, transparent 70%), #f3ebd6; }
.bestkept-card { background: radial-gradient(circle at 100% 0, #d1dce3, transparent 70%), #e6ebed; }
.buildshot-card { background: radial-gradient(circle at 100% 0, #e4c4a4, transparent 70%), #efe3d8; }
.studio-note { padding: 88px 0; max-width: 660px; margin: auto; text-align: center; }
.studio-note .eyebrow { max-width: none; }
.home .studio-note h2 { font-size: clamp(30px, 4vw, 43px); line-height: 1.18; letter-spacing: -.025em; margin: 20px 0; }
.studio-note > p:not(.eyebrow) { font-size: 14px; margin: 0 auto 24px; max-width: 51ch; }
.studio-note > a { font-size: 12px; text-underline-offset: 5px; }
.home-footer { border-top: 1px solid var(--line); padding: 27px 0 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.home-footer > span { font: italic 13px var(--serif); color: var(--text-dim); }
.home-footer nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; font-size: 10px; color: var(--text-dim); }
@media (max-width: 760px) {
  .hero { padding: 52px 0 40px; }
  .hero-orbit { right: -100px; top: 12px; opacity: .14; }
  .hero-bottom { flex-direction: column; align-items: start; gap: 22px; }
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .app-card { grid-column: span 1; padding: 22px; }
  .small-card:last-child { grid-column: 1 / -1; }
  .badge { font-size: 9px; padding: 5px 8px; }
  .card-top { flex-wrap: wrap; }
  .size-ticket { padding: 17px; }
  .size-ticket b { font-size: 31px; }
  .home-footer nav { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  .home-header nav { gap: 17px; font-size: 11px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .12em; }
  .section-label > span { font-size: 11px; }
  .app-grid { grid-template-columns: 1fr; }
  .app-card { padding: 25px; }
  .card-top { flex-wrap: nowrap; }
  .home h3 { font-size: 35px; }
  .small-card h3 { font-size: 31px; }
  .fit-visual, .mira-visual { height: 210px; }
  .studio-note { padding: 65px 0; }
}
@media (prefers-reduced-motion: reduce) { .app-card { transition: none; } .app-card:hover { transform: none; } }

.month-moods { height: 225px; position: relative; margin: 12px 0; isolation: isolate; }
.mood-print { position: absolute; width: 30%; padding: 6px 6px 8px; background: #fffcf5; border-radius: 2px; box-shadow: 0 7px 16px #293e4720; }
.mood-print > span { display: block; text-align: center; color: #526061; font: italic 11px var(--serif); margin-top: 5px; }
.mood-scene { aspect-ratio: 1.25; overflow: hidden; position: relative; }
.mood-scene i { position: absolute; display: block; }
.mood-slow { left: 3%; top: 12px; transform: rotate(-12deg); }
.mood-away { left: 29%; top: 0; transform: rotate(7deg); z-index: 1; }
.mood-night { left: 57%; top: 17px; transform: rotate(16deg); }
.mood-us { left: 39%; top: 85px; transform: rotate(-7deg); z-index: 2; }
.mood-slow .mood-scene { background: repeating-linear-gradient(110deg, transparent 0 24px, #f7deb877 25px 36px), #d7b59a; }
.coffee { width: 40%; height: 45%; background: radial-gradient(ellipse, #70503a 0 48%, #f5e6cc 51% 68%, #b8967566 70%); border-radius: 50%; top: 28%; left: 30%; box-shadow: 5px 9px 9px #61452c30; }
.coffee::after { content: ''; position: absolute; right: -13%; top: 35%; width: 22%; height: 25%; border: 3px solid #f5e6cc; border-radius: 50%; }
.mood-away .mood-scene { background: radial-gradient(circle at 73% 25%, #fff1be 0 10%, transparent 11%), linear-gradient(#b4d5d5 60%, #698b78 61%); }
.mountain { inset: 25% -10% -10%; background: #466b62; clip-path: polygon(0 100%, 40% 0, 70% 65%, 85% 35%, 100% 100%); }
.mood-night .mood-scene { background: radial-gradient(circle at 20% 24%, #fff1c8 0 1px, transparent 2px), radial-gradient(circle at 76% 40%, #fff1c8 0 1px, transparent 2px), radial-gradient(circle at 38% 69%, #fff1c8 0 1px, transparent 2px), linear-gradient(#303e59, #79667b); }
.moon { width: 26%; aspect-ratio: 1; left: 43%; top: 17%; border-radius: 50%; box-shadow: -6px 4px 0 0 #f9dfb1; }
.mood-us .mood-scene { background: radial-gradient(circle at 75% 22%, #ffdf9a 0 13%, transparent 14%), linear-gradient(#e9a68a 60%, #b47b6d 61%); }
.together { width: 24%; height: 42%; bottom: -5%; left: 29%; border-radius: 45% 45% 0 0; background: #546863; box-shadow: 24px 5px 0 #775555; transform: rotate(-5deg); }
.together::before { content: ''; position: absolute; width: 68%; aspect-ratio: 1; border-radius: 50%; background: #546863; left: 16%; top: -44%; box-shadow: 24px 5px 0 #775555; }
.month-caption { position: absolute; bottom: 0; width: 100%; text-align: center; color: #526061; font: 8px var(--mono); letter-spacing: .13em; }
.bestkept-card:not(.small-card) > .card-top { margin-bottom: 37px; }
@media (min-width: 521px) and (max-width: 760px) { .mood-print { width: 38%; } .mood-slow { left: 0; } .mood-away { left: 28%; } .mood-night { left: 58%; } .mood-us { left: 32%; top: 95px; } }

.mood-print > span b { display: block; margin-bottom: 3px; font: 600 9px "Avenir Next", Avenir, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.month-moods { height: 250px; }
.mood-us { top: 105px; }

.app-card.bestkept-card, .app-card.sunshine-card { row-gap: 0; }
.app-card.bestkept-card > .card-top, .app-card.sunshine-card > .card-top { margin-bottom: 0; }
.app-card.bestkept-card > .card-copy, .app-card.sunshine-card > .card-copy { margin-top: 0; padding-top: 37px; }

.mira-access { background: #6d4140; color: #fff8f0; border-color: #6d4140; font-weight: 600; }

.home .studio-note h2 { max-width: none; width: 100%; margin-inline: auto; }
.studio-note { text-align: center; }

.mira-gem { width: 208px; height: 208px; filter: drop-shadow(0 0 12px #fffcf3aa); }
@media (prefers-reduced-motion: no-preference) {
  .mira-gem { animation: mira-gem-breathe 6s ease-in-out infinite; }
  @keyframes mira-gem-breathe { 0%, 100% { transform: scale(.96) rotate(-2deg); } 50% { transform: scale(1.03) rotate(2deg); } }
}