/* Aesthetics prompts: additions on top of the visual-codes freebie styles */
.aesthetics .shot-proof{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 22px}
.aesthetics .shot-proof figure{margin:0;min-width:0}
.aesthetics .shot-proof img,.aesthetics .shot-proof video{width:100%;display:block;border-radius:12px;border:1px solid #140d0a33;background:#140d0a}
.aesthetics .shot-proof img,.aesthetics .shot-proof video{aspect-ratio:4/3;object-fit:cover}
.aesthetics .shot-proof figcaption{font-size:13px;font-weight:700;color:var(--blue);margin:8px 0 0}
.aesthetics .card-note{margin:0 0 12px;font-size:12px;letter-spacing:.02em;color:var(--lightblue)}
.aesthetics .code-card.long .code-line{max-height:300px;overflow:auto;padding-right:10px;font-size:14px}
.aesthetics .code-card .code-num{font-size:12px}
.aesthetics .setup-list{margin:4px 0 26px;padding-left:20px;color:#4e493f}
.aesthetics .setup-list li{margin:0 0 10px;font-size:16px;line-height:1.6}
.aesthetics .setup-list strong{color:var(--blue)}
.aesthetics #downloads .button{margin-top:6px}
@media(max-width:760px){
  .aesthetics .shot-proof{gap:10px}
  .aesthetics .code-card.long .code-line{max-height:260px}
}
/* the ending: a cobalt download card, then a full-width closing band */
.aesthetics .download-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px;background:var(--blue);color:var(--paper);border-radius:16px;padding:34px 36px;margin:4px 0 96px;position:relative;overflow:hidden}
.aesthetics .download-card:before{content:'';position:absolute;inset:0;background:url('/assets/invideo-sound-design/assets/paper.png') center/800px;mix-blend-mode:screen;opacity:.1;pointer-events:none}
.aesthetics .download-card>*{position:relative}
.aesthetics .file-tile{width:64px;height:80px;border-radius:8px;background:var(--paper);color:var(--blue);display:grid;place-items:end center;padding-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.08em;clip-path:polygon(0 0,72% 0,100% 22%,100% 100%,0 100%)}
.aesthetics .file-tile:after{content:'';position:absolute;top:0;right:0;width:28%;height:22%;background:var(--lightblue)}
.aesthetics .download-card .eyebrow{color:var(--lightblue);margin:0}
.aesthetics .download-card h2{font-size:clamp(26px,3vw,36px);color:var(--paper);margin:10px 0 8px}
.aesthetics .download-card p:not(.eyebrow){margin:0;font-size:15px;line-height:1.6;color:var(--paper);opacity:.9;max-width:430px}
.aesthetics .download-card .button{white-space:nowrap}
@media(max-width:760px){
  .aesthetics .download-card{grid-template-columns:1fr;gap:20px;padding:28px 24px;margin-bottom:70px}
  .aesthetics .download-card .button{width:100%}
  }
/* closing: the challenge band */
.aesthetics .challenge-band{text-align:left;padding:104px 24px 64px}
.aesthetics .challenge-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;position:relative}
.aesthetics .challenge-band .eyebrow{justify-content:flex-start;color:var(--lightblue);margin:0}
.aesthetics .challenge-band h2{font-size:clamp(42px,5.4vw,74px);line-height:.98;letter-spacing:-.055em;color:var(--cream);margin:22px 0 22px;max-width:none}
.aesthetics .challenge-lede{font-size:18px;line-height:1.6;color:#d3c6b9;max-width:500px;margin:0 0 26px}
.aesthetics .challenge-points{list-style:none;padding:0;margin:0 0 34px;display:grid;gap:12px}
.aesthetics .challenge-points li{position:relative;padding-left:32px;font-size:16px;line-height:1.5;color:var(--cream)}
.aesthetics .challenge-points li:before{content:'';position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--blue)}
.aesthetics .challenge-points li:after{content:'';position:absolute;left:7px;top:7px;width:5px;height:9px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.aesthetics .challenge-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.aesthetics .challenge-actions span{font-size:13px;color:#c6b5a6}
.aesthetics .challenge-art{margin:0;position:relative;transform:rotate(2.5deg);background:var(--paper);padding:12px 12px 46px;border-radius:4px;box-shadow:0 24px 60px #0008}
.aesthetics .challenge-art video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;background:#000}
.aesthetics .challenge-sticker{position:absolute;left:-22px;bottom:18px;transform:rotate(-7deg);background:var(--blue);color:var(--paper);font-size:13px;font-weight:700;letter-spacing:.04em;padding:11px 18px;border-radius:99px;box-shadow:0 8px 20px #0006}
.aesthetics .challenge-dates{list-style:none;max-width:1120px;margin:70px auto 0;padding:26px 0 0;border-top:1px solid #f0e6d633;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.aesthetics .challenge-dates li{display:flex;flex-direction:column;gap:4px}
.aesthetics .challenge-dates strong{font-size:15px;color:var(--cream)}
.aesthetics .challenge-dates span{font-size:13px;color:#c6b5a6}
.aesthetics .challenge-dates li:last-child strong{color:var(--lightblue)}
.aesthetics .challenge-band .closing-signature{display:block;margin:72px auto 0}
@media(max-width:900px){
  .aesthetics .challenge-inner{grid-template-columns:1fr;gap:44px}
  .aesthetics .challenge-art{max-width:460px;margin:0 auto 0 8px}
  .aesthetics .challenge-dates{grid-template-columns:1fr 1fr;row-gap:22px}
}
@media(max-width:760px){
  .aesthetics .challenge-band{padding:76px 24px 48px}
  .aesthetics .challenge-lede{font-size:16px}
  .aesthetics .challenge-sticker{left:-8px}
}
.aesthetics .challenge-chips{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-wrap:wrap;gap:8px;max-width:520px}
.aesthetics .challenge-chips li{font-size:13px;font-weight:700;color:var(--paper);background:#f0e6d614;border:1px solid #f0e6d640;border-radius:99px;padding:7px 14px}
.aesthetics .challenge-chips li:first-child{background:var(--blue);border-color:var(--blue)}
/* one card per aesthetic: name, era, the after with the plain before beside it, then the prompt */
.aesthetics .look{padding:34px 0 8px;border-top:1px solid #140d0a1f;scroll-margin-top:24px}
.aesthetics .step-body+.look{border-top:0;padding-top:10px}
.aesthetics .look-head{display:flex;align-items:baseline;gap:12px;margin:0 0 6px}
.aesthetics .look-num{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--lightblue);flex:none}
.aesthetics .look h3{margin:0;font-size:clamp(24px,2.6vw,30px);line-height:1.1;letter-spacing:-.035em;color:var(--blue);min-width:0;overflow-wrap:anywhere}
.aesthetics .look-what{margin:0 0 18px;font-size:16px;line-height:1.6;color:#4e493f}
.aesthetics .look-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);gap:14px;align-items:end;margin:0 0 16px;max-width:460px}
.aesthetics .look-pair figure{margin:0;min-width:0}
.aesthetics .look-pair img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;border:1px solid #140d0a33;background:#140d0a}
.aesthetics .look-pair figcaption{font-size:13px;font-weight:700;color:var(--blue);margin:8px 0 0}
.aesthetics .look-pair .before figcaption{color:var(--muted);font-weight:500}
.aesthetics .look .code-card{margin:0 0 10px}
.aesthetics .look .code-card .prompt-top{margin-bottom:10px}
.aesthetics .look .code-card h3{font-size:16px;color:inherit;letter-spacing:0}
@media(max-width:760px){
  .aesthetics .look{padding-top:28px}
  .aesthetics .look-pair{gap:10px}
  .aesthetics .look-what{font-size:15px}
}
.aesthetics .challenge-art img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:#000}
