/* User-provided editorial photography, blended with the existing sage palette. */
:root { --paper:#f2f5ed; --ink:#263d30; --muted:#74846f; --line:#dce4d6; --green:#2e4434; --cream:#edf1e7; }
body {
  background-color:var(--paper);
  background-image:linear-gradient(180deg,rgb(242 245 237 / 93%),rgb(242 245 237 / 98%) 75%),url('/assets/styleyourfit-background.webp');
  background-position:center,center 20%; background-size:cover; background-attachment:fixed;
}
.topbar { gap:28px; background:rgb(248 250 244 / 95%); border-bottom-color:#d6e0ce; }
.wordmark { font-family:'Manrope',Arial,sans-serif; font-size:29px; letter-spacing:-1.6px; font-weight:800; white-space:nowrap; }
.wordmark { display:inline-flex; align-items:center; gap:9px; line-height:1; }
.wordmark .brand-name { font:inherit; margin:0; vertical-align:baseline; letter-spacing:inherit; }
.wordmark .brand-mark { display:block; width:36px; height:50px; margin:0; overflow:hidden; flex-shrink:0; line-height:0; }
.wordmark .brand-mark img { display:block; width:64px; height:64px; max-width:none; transform:translate(-14px,-7px); mix-blend-mode:multiply; }
.wordmark .wordmark-accent { font:inherit; font-weight:400; color:#617c52; vertical-align:baseline; display:inline; margin:0; letter-spacing:inherit; }
.topbar nav { gap:18px; }
.nav { color:#71806b; }
.topbar .nav.active { color:#263d30; font-weight:600; }
.topbar .nav.active:after { background:#3d5c37; height:3px; }
.header-note { color:#647b56; }
.auth-button { background:#f8faf4; }
#studioPage > .intro {
  position:relative; isolation:isolate; min-height:300px; margin:28px 0 24px; padding:34px 36px;
  border:1px solid #d4dfca; border-radius:14px; background-color:#e6eddd;
  background-image:linear-gradient(90deg,#edf2e7 0%,rgb(237 242 231 / 98%) 36%,rgb(237 242 231 / 83%) 51%,rgb(225 236 210 / 15%) 78%,rgb(46 68 52 / 7%) 100%),url('/assets/styleyourfit-background.webp');
  background-size:cover,56% auto; background-position:center,right 12%; background-repeat:no-repeat;
  box-shadow:0 12px 32px rgb(35 57 34 / 5%);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:24px;
}
#studioPage > .intro > div { max-width:55%; }
#studioPage > .intro .eyebrow { color:#526d43; }
#studioPage > .intro h1 { font-size:clamp(35px,3.7vw,54px); }
#studioPage > .intro h1 em { color:#58774a; }
#studioPage > .intro p:not(.eyebrow) { color:#52664b; line-height:1.7; }
#studioPage > .intro .intro-actions { padding-top:0; }
#studioPage > .intro .button.light { background:rgb(249 251 245 / 91%); border-color:#c7d4bd; }
.workspace { box-shadow:0 14px 40px rgb(35 57 34 / 5%); border-color:#d6e0ce; }
.layers-panel { background:#f7faf2; }
.products-panel { background:#fcfdf9; }
.canvas-panel,.outfit-canvas { background-color:#eef2e8; }
.zone-icon { background:#e6eddd; color:#506b42; }
.layer.active { background:#eaf1e0; border-color:#839b70; }
.layer-tip { color:#6b805e; }
.outfit-summary { background:rgb(248 250 244 / 92%); }
.saved-section { border-color:var(--line); }
.button.dark { box-shadow:0 3px 10px rgb(31 56 35 / 10%); }
footer { background:rgb(247 250 242 / 96%); }
@media(max-width:1150px) {
  .topbar { gap:18px; }
  .topbar .wordmark { font-size:25px; }
  .topbar nav { gap:12px; }
}
@media(max-width:850px) {
  .topbar { height:auto; min-height:82px; flex-wrap:wrap; padding-top:16px; padding-bottom:0; gap:12px; }
  .topbar nav { order:3; width:100%; height:43px; overflow-x:auto; gap:24px; }
  .topbar .auth-actions { margin-left:auto; }
  .topbar nav .nav { flex-shrink:0; white-space:nowrap; }
  #studioPage > .intro { margin-top:20px; min-height:300px; padding:28px; background-size:cover,65% auto; background-position:center,right 8%; }
  #studioPage > .intro > div { max-width:65%; }
  #studioPage > .intro .intro-actions { max-width:none; }
}
@media(max-width:520px) {
  body { background-attachment:scroll; }
  .topbar { padding-left:5%; padding-right:5%; }
  .topbar .wordmark { font-size:25px; }
  .topbar .wordmark .brand-mark { width:30px; height:42px; }
  .topbar .wordmark .brand-mark img { width:54px; height:54px; transform:translate(-12px,-6px); }
  .topbar nav { gap:22px; }
  #studioPage > .intro {
    min-height:375px; padding:26px 20px 22px; margin:18px 0; gap:22px; justify-content:flex-end;
    background-image:linear-gradient(0deg,#edf2e7 0%,rgb(237 242 231 / 97%) 22%,rgb(237 242 231 / 91%) 43%,rgb(237 242 231 / 29%) 75%,rgb(237 242 231 / 8%) 100%),url('/assets/styleyourfit-background.webp');
    background-size:cover,100% auto; background-position:center,center 12%;
  }
  #studioPage > .intro > div { max-width:100%; }
  #studioPage > .intro .eyebrow { font-size:8px; letter-spacing:1.5px; }
  #studioPage > .intro h1 { font-size:35px; margin-bottom:10px; }
  #studioPage > .intro p:not(.eyebrow) { font-size:12px; }
  #studioPage > .intro .intro-actions { flex-wrap:wrap; gap:8px; width:100%; }
  #studioPage > .intro .button { padding:12px 10px; font-size:10px; }
  #studioPage > .intro .button span { margin-left:5px; }
}