:root {
  color-scheme: light;
  background: #faf6ef;
  color: #302426;
  font: 1rem/1.6 system-ui, sans-serif;
}
body { margin: 0; }
main { max-width: 46rem; margin: auto; padding: 2.5rem 1rem 3rem; }
a { color: #712943; text-underline-offset: .2em; }
.back { display: inline-block; margin-bottom: 1.25rem; }
.eyebrow { color: #712943; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
h1, h2 { font-family: Georgia, serif; line-height: 1.2; }
h1 { font-size: clamp(2rem, 6vw, 3.6rem); margin: .35em 0; }
h2 { font-size: 1.35rem; }
.ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.ideas section { background: #fffdf9; border: 1px solid #e5d8d1; border-radius: 1rem; padding: 0 1rem; }
aside { border-top: 1px solid #e5d8d1; margin-top: 2rem; padding-top: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
button { border: 1px solid #712943; border-radius: .5rem; background: #fffdf9; color: #712943; cursor: pointer; font: inherit; padding: .5rem .8rem; }
button:focus-visible, a:focus-visible { outline: 3px solid #712943; outline-offset: 3px; }
#banner { max-inline-size: 100%; margin: 1rem auto; background: #f3e9e2; overflow: hidden; }
#banner.fixed { max-inline-size: 100vw; position: relative; left: 50%; margin-inline: 0; transform: translateX(-50%); }
#banner.preview { display: grid; place-items: center; text-align: center; }
#sponsored-offer { display: inline-block; margin-block: 1rem; }
.more-ideas { border-top: 1px solid #e5d8d1; margin-top: 2rem; padding-top: 1rem; }
.more-ideas ul { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; padding-left: 1.15rem; }
.more-ideas a[aria-current="page"] { font-weight: 700; }
[hidden] { display: none !important; }