/* Each example has its own art direction, including its graphic artwork. */
.hero #visual { min-width: 0; }
.hero { min-height: 680px; }
.editorial { color: #34302b; background: #f4f0e8; }
.editorial .preview { background: #34302b; color: #f4f0e8; }
.editorial header { margin: 0 6%; padding: 27px 0; border-color: #34302b; }
.editorial .brand { font: 600 16px 'DM Sans', sans-serif; letter-spacing: .2em; }
.editorial .hero { padding: 60px 6%; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; }
.editorial .copy { padding: 0; }
.editorial h1 { font: 400 88px/.98 'Cormorant Garamond', Georgia, serif; letter-spacing: -.05em; }
.editorial .copy p { max-width: 365px; font-size: 14px; }
.editorial .button { background: transparent; color: #34302b; border-bottom: 1px solid #34302b; padding: 13px 0; border-radius: 0; }
.editorial .details { border-top: 1px solid #bdb4a6; }
.editorial .contact { background: #34302b; }
.editorial-art { position: relative; min-height: 545px; background: #eae4d8; padding: 30px; overflow: hidden; }
.journal-masthead { display: flex; justify-content: space-between; gap: 15px; font-size: 9px; letter-spacing: .13em; border-top: 1px solid #494237; border-bottom: 1px solid #494237; padding: 13px 0; }
.editorial-word { position: relative; z-index: 1; font: 400 92px/.88 'Cormorant Garamond', Georgia, serif; letter-spacing: -.06em; margin: 56px 0 36px; }
.editorial-rule { width: 42px; height: 1px; background: #494237; }
.journal-bottom { display: flex; justify-content: space-between; gap: 20px; font: 13px/1.6 'Cormorant Garamond', Georgia, serif; padding-top: 22px; position: relative; z-index: 1; }
.editorial-initial { font: italic 310px/.8 'Cormorant Garamond', Georgia, serif; position: absolute; right: 20px; bottom: -22px; color: #d5ccbe; }
.warm { color: #49372d; background: #edf0e3; }
.warm .preview { background: #4c5d48; color: #f9f2df; }
.warm .brand { font-style: italic; color: #49372d; }
.warm header { border-color: #73836b50; }
.warm .hero { background: #e4e9d8; padding: 55px 6%; gap: 7%; }
.warm h1 { font-size: 84px; letter-spacing: -.065em; }
.warm .copy p { color: #58604c; font-size: 15px; }
.warm .button { background: #654834; border-radius: 30px; padding: 17px 30px; }
.warm .details { background: #f5efdf; }
.warm .contact { background: #576b50; }
.warm-art { position: relative; height: 550px; background: #a7b69a; border-radius: 48% 48% 4px 4px; overflow: hidden; }
.warm-arch { position: absolute; inset: 45px 48px 65px; border-radius: 48% 48% 0 0; background: #dce1c8; overflow: hidden; }
.warm-sun { position: absolute; background: #e5c587; width: 112px; height: 112px; border-radius: 50%; top: 42px; right: 35px; }
.hill { position: absolute; width: 600px; height: 380px; border-radius: 50%; transform: rotate(-20deg); }
.hill-back { background: #839574; bottom: -170px; left: -120px; }
.hill-front { background: #536a49; bottom: -250px; left: -60px; transform: rotate(15deg); }
.botanical { position: absolute; width: 3px; height: 205px; background: #69513b; bottom: 12px; left: 100px; transform: rotate(-20deg); transform-origin: bottom; }
.botanical i { position: absolute; width: 65px; height: 27px; background: #69513b; border-radius: 0 90% 0 90%; left: 0; top: 35px; transform: rotate(-38deg); transform-origin: left; }
.botanical i:nth-child(2) { top: 75px; }
.botanical i:nth-child(3) { top: 115px; }
.botanical i:nth-child(4) { top: 65px; left: -64px; transform: rotate(30deg); transform-origin: right; }
.botanical i:nth-child(5) { top: 105px; left: -64px; transform: rotate(30deg); transform-origin: right; }
.warm-label { position: absolute; top: 120px; left: 55px; font: 55px/.98 'Playfair Display', Georgia, serif; letter-spacing: -.06em; color: #49372d; z-index: 2; }
.warm-caption { position: absolute; bottom: 27px; left: 0; right: 0; text-align: center; font-size: 8px; letter-spacing: .14em; color: #35462d; }
.bold { background: #ff90c2; color: #222495; }
.bold .preview { background: #222495; color: #f9efb5; }
.bold .brand { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }
.bold header { border-color: #22249566; }
.bold .hero { background: #ff90c2; grid-template-columns: 1fr 1fr; gap: 5%; padding: 55px 6%; }
.bold .copy { padding: 0; }
.bold h1 { font: 800 90px/.94 'Bricolage Grotesque', sans-serif; letter-spacing: -.07em; }
.bold .copy p { max-width: 375px; font-size: 16px; }
.bold .button { background: #2326bd; color: #fff; border-radius: 30px; transform: rotate(-3deg); }
.bold .details { background: #e2ed5b; color: #242493; }
.bold .contact { background: #2326bd; }
.bold .contact .button { background: #ff90c2; color: #222495; }
.bold-art { height: 550px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; position: relative; transform: rotate(3deg); }
.art-tile { position: relative; overflow: hidden; }
.art-pink { background: #ed3f8d; padding: 25px; color: #61164b; }
.art-pink>span { font: 700 60px/.9 'Bricolage Grotesque', sans-serif; letter-spacing: -.07em; display: block; transform: rotate(-8deg); }
.art-pink em { font: italic 64px/.9 'Playfair Display', serif; }
.art-orange { background: #ff862b; display: grid; place-items: center; }
.art-flower { position: relative; width: 185px; height: 185px; transform: rotate(18deg); }
.art-flower i { background: #d5b8f1; position: absolute; width: 75px; height: 175px; border-radius: 50%; left: 55px; top: 5px; }
.art-flower i:nth-child(2) { transform: rotate(45deg); }
.art-flower i:nth-child(3) { transform: rotate(90deg); }
.art-flower i:nth-child(4) { transform: rotate(135deg); }
.art-flower b { position: absolute; width: 55px; height: 55px; border-radius: 50%; background: #2326bd; top: 65px; left: 65px; }
.art-blue { background: #3034d7; color: #e6ed57; padding: 17px 25px; display: flex; flex-direction: column; justify-content: center; }
.art-blue>span { font: italic 150px/.9 'Playfair Display', serif; letter-spacing: -.09em; transform: rotate(-12deg); }
.art-blue small { font-size: 8px; letter-spacing: .15em; padding-top: 20px; }
.art-check { background: repeating-conic-gradient(#d8c0f2 0% 25%, #f9f0d6 0% 50%) 0 0 / 58px 58px; display: grid; place-items: center; }
.art-orbit { width: 155px; height: 155px; border-radius: 50%; border: 36px solid #ed3f8d; transform: skew(-10deg); box-shadow: 13px 13px 0 #ff862b; }
.art-sticker { position: absolute; top: 43%; left: 34%; border: 2px solid #222495; background: #e2ed5b; color: #222495; padding: 16px 23px; font: 800 22px/.95 'Bricolage Grotesque', sans-serif; border-radius: 50%; transform: rotate(-15deg); }
@media(max-width:1050px) {
  .editorial h1, .warm h1, .bold h1 { font-size: 65px; }
  .editorial-word { font-size: 70px; }
  .art-pink>span, .art-pink em { font-size: 47px; }
  .art-flower { transform: scale(.8); }
  .art-blue>span { font-size: 100px; }
  .art-orbit { width: 115px; height: 115px; border-width: 25px; }
}
@media(max-width:700px) {
  .editorial .hero, .warm .hero, .bold .hero { grid-template-columns: 1fr; gap: 40px; padding: 45px 6%; }
  .editorial h1, .warm h1, .bold h1 { font-size: clamp(48px, 13vw, 72px); }
  .editorial header { margin: 0; padding: 25px 6%; }
  .editorial .brand { font-size: 12px; letter-spacing: .12em; }
  .editorial-art { min-height: 430px; padding: 22px; }
  .editorial-word { font-size: 75px; margin-top: 40px; }
  .editorial-initial { font-size: 210px; }
  .journal-masthead { font-size: 7px; }
  .warm-art { height: 435px; }
  .warm-arch { inset: 35px 35px 60px; }
  .warm-label { font-size: 46px; top: 105px; left: 36px; }
  .warm-sun { width: 90px; height: 90px; right: 16px; top: 30px; }
  .botanical { left: 70px; height: 170px; }
  .bold-art { height: 400px; transform: rotate(1deg); }
  .art-pink { padding: 20px 14px; }
  .art-pink>span, .art-pink em { font-size: clamp(36px, 11vw, 50px); }
  .art-flower { transform: scale(.65); width: 170px; }
  .art-blue { padding: 15px; }
  .art-blue>span { font-size: 100px; }
  .art-orbit { width: 95px; height: 95px; border-width: 23px; }
  .art-sticker { font-size: 17px; padding: 13px 20px; }
}