.sticker-hero {
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  gap: clamp(28px, 4.6vw, 67px);
  padding-block: clamp(49px, 7vw, 100px) clamp(48px, 6.6vw, 90px);
}

.sticker-hero .kicker {
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid #f0d6ee;
  border-radius: 999px;
  background: #fae9f7;
  letter-spacing: .073em;
}

.sticker-hero .dot { background: #a74799; }

.sticker-hero h1 {
  margin-block: 17px 18px;
  font-size: clamp(2.8rem, 5.35vw, 5.2rem);
  letter-spacing: -.063em;
  text-wrap: initial;
}

.sticker-hero h1 em { color: #922b81; font-style: normal; }
.sticker-hero .lead { max-width: 36ch; }
.sticker-actions { gap: 10px; margin-top: 23px; }

.sticker-actions .button {
  min-height: 51px;
  padding-inline: clamp(12px, 1.55vw, 19px);
  font-size: .93rem;
  border: 1px solid transparent;
}

.sticker-actions .create-button { background: #862573; box-shadow: 0 5px 0 #621756; }
.sticker-actions .store { background: #fff; border-color: #e8d4e3; color: var(--ink); }
.sticker-actions .store:hover { background: #f9eaf5; filter: none; }

.sticker-hero .platform {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 18px;
  font-size: .79rem;
}

.sticker-hero .platform span { display: inline-flex; align-items: center; gap: 6px; }
.sticker-hero .platform span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #a64493; }

.promo-film {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #63405d;
  border-radius: 26px;
  background: #321b32;
  color: #fff2fb;
  padding: 9px;
  box-shadow: 0 16px 40px #65305b31, 0 0 0 7px #f5d9ef;
}

.promo-film-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #2a172e;
}

.sticker-film-video { display: block; width: 100%; height: 100%; object-fit: contain; }
.sticker-film-video:focus-visible { outline-color: #fff; outline-offset: -4px; }

.promo-film-cover {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3%;
  background: radial-gradient(ellipse at 49% 47%, #985394, #542c60 62%, #361b41);
}

.promo-film-cover img { width: 31%; height: auto; filter: drop-shadow(0 12px 12px #1b082e74); }
.promo-film-cover img:first-child { transform: translate(8%, 8%) rotate(-12deg); }
.promo-film-cover img:nth-child(2) { z-index: 1; transform: scale(1.17); }
.promo-film-cover img:last-child { transform: translate(-8%, 9%) rotate(11deg); }

.promo-film figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 11px 5px 3px;
  font-size: .84rem;
}

.promo-film figcaption span { color: #f0cfe7; }

.sticker-modes { padding-top: 0; }
.sticker-modes .section-title h2 { text-wrap: initial; }
.sticker-modes .section-title > p:last-child { margin-top: 8px; color: var(--muted); line-height: 1.5; }

.sticker-examples {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sticker-example {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid #efdae9;
  border-radius: 23px;
  padding: 9px;
}

.sticker-art {
  height: clamp(154px, 18vw, 256px);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f0e0fc;
}

.sticker-art-pack {
  position: relative;
  grid-template-columns: .82fr 1.18fr;
  align-items: stretch;
  gap: 9px;
  padding: 9px;
  background: #f6dff4;
}

.sticker-original {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.sticker-original img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 41%; }

.sticker-original span, .sticker-photo-pair div span {
  position: absolute;
  bottom: 7px;
  left: 7px;
  border-radius: 20px;
  padding: 4px 8px;
  color: #fff;
  background: #2c192bea;
  font-size: .7rem;
  font-weight: 700;
}

.sticker-pack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  background: #fff8ff;
  border-radius: 10px;
  padding: 4px;
}

.sticker-pack img { width: 100%; height: 100%; object-fit: contain; }
.sticker-art-meme, .sticker-art-caricature { display: block; }
.sticker-art-meme { background: #e7dcf8; }
.sticker-art-caricature { background: #ffe6be; }
.sticker-art-meme img, .sticker-art-caricature img { width: 100%; height: 100%; object-fit: contain; }

.sticker-example-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 14px 10px 10px; }
.sticker-example-copy h3 { font-size: clamp(1.03rem, 1.55vw, 1.32rem); text-wrap: initial; }
.sticker-example-copy p { margin: 5px 0 12px; color: var(--muted); font-size: .91rem; line-height: 1.45; }
.sticker-example-copy .quiet-link { margin-top: auto; padding-block: 4px; }

.sticker-photo-lab {
  display: grid;
  grid-template-columns: minmax(220px, .77fr) minmax(0, 1.23fr);
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(19px, 3.8vw, 44px);
  border-radius: 26px;
  background: #f1e8fb;
  border: 1px solid #ebddf7;
}

.sticker-photo-intro h2, .sticker-bottom h2 {
  margin-block: 9px 11px;
  font-size: clamp(1.85rem, 3.05vw, 3.2rem);
  letter-spacing: -.046em;
  line-height: 1.07;
  text-wrap: initial;
}

.sticker-photo-intro > p:last-child { color: var(--muted); line-height: 1.55; max-width: 39ch; }
.sticker-photo-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sticker-photo-option { display: block; padding: 7px; border-radius: 16px; background: #fff; text-decoration: none; }
a.sticker-photo-option:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.sticker-photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; overflow: hidden; border-radius: 10px; }
.sticker-photo-pair div { position: relative; min-width: 0; background: #e4d8ed; }
.sticker-photo-pair img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.sticker-photo-link { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 9px 4px 3px; color: #722164; font-size: .9rem; }

.sticker-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-bottom: 55px;
  padding: clamp(20px, 3.8vw, 40px);
  border-radius: 24px;
  background: #f8e6f5;
}

.sticker-bottom h2 { margin: 0; }
.sticker-bottom .actions { margin-top: 0; }

.sticker-journal { padding-top: 12px; }
.sticker-home-journal { padding-block: 46px; }
.sticker-journal.index { padding-top: clamp(28px, 6vw, 78px); }

.sticker-blog-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(185px, 26vw, 305px);
  gap: clamp(20px, 4vw, 54px);
  align-items: center;
  padding: clamp(18px, 3.6vw, 44px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper);
}

.sticker-blog-copy h1, .sticker-blog-copy h2 {
  margin-block: 9px 12px;
  font-size: clamp(2rem, 4.1vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.052em;
}

.sticker-blog-copy .lead { max-width: 45ch; }
.sticker-blog-copy .quiet-link { display: inline-block; margin-top: 16px; }
.sticker-blog-intro img { width: 100%; height: auto; border-radius: 17px; }
.sticker-journal .post-list { margin-top: 16px; }
.sticker-journal .post-card { background: #f5eafb; }

@media (max-width: 790px) {
  .sticker-hero { grid-template-columns: 1fr; gap: 30px; }
  .sticker-hero h1 { max-width: none; }
  .sticker-art { height: clamp(120px, 25vw, 215px); }
  .sticker-photo-lab { grid-template-columns: 1fr; }
  .sticker-photo-pair img { aspect-ratio: 1; }
}

@media (max-width: 620px) {
  .sticker-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sticker-example-pack { grid-column: 1 / -1; }
  .sticker-art-pack { height: clamp(160px, 51vw, 238px); }
  .sticker-art-meme, .sticker-art-caricature { height: auto; aspect-ratio: 1; }
  .sticker-example-copy { padding: 9px 4px 5px; }
}

@media (max-width: 520px) {
  .sticker-hero { padding-block: 39px 38px; }
  .sticker-hero h1 { font-size: clamp(2.25rem, 10vw, 3.4rem); margin-block: 14px; }
  .sticker-hero .kicker { font-size: .7rem; }
  .sticker-hero .platform { gap: 3px 12px; }
  .sticker-actions .button { min-height: 45px; padding-inline: 10px; gap: 5px; font-size: .84rem; }
  .promo-film { border-radius: 20px; padding: 6px; box-shadow: 0 8px 24px #65305b27, 0 0 0 4px #f5d9ef; }
  .promo-film-frame { border-radius: 13px; }
  .promo-film figcaption { font-size: .76rem; padding-block: 8px 3px; }
  .sticker-example { padding: 6px; border-radius: 16px; }
  .sticker-art { border-radius: 11px; }
  .sticker-example-copy .quiet-link { font-size: .82rem; }
  .sticker-photo-lab { padding: 14px; }
  .sticker-photo-options { gap: 6px; }
  .sticker-photo-option { padding: 5px; }
  .sticker-photo-pair div span { left: 3px; bottom: 3px; padding: 3px 5px; font-size: .61rem; }
  .sticker-photo-link { font-size: .78rem; }
  .sticker-blog-intro { grid-template-columns: 1fr; }
  .sticker-blog-intro img { width: min(100%, 265px); justify-self: center; }
}

@media (max-width: 365px) {
  .bar nav .nav-studio { display: none; }
}