@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Outfit:wght@400;500;600;700;800;900&display=swap');

html[data-theme="tost"] {
  --font-body: Outfit, Arial, sans-serif;
  --font-display: Outfit, Arial, sans-serif;
  --font-numeric: Outfit, Arial, sans-serif;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}
html[data-theme="tost"] body {
  background: #fff5df;
  font-family: Outfit, Arial, sans-serif;
}
html[data-theme="tost"] .site-header nav a {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}
html[data-theme="tost"] .site-header nav a[data-nav="discord"] {
  color: #3d210c;
  background: #f3ae26;
  border-radius: 9px;
}
main:has(> .preview-hero) {
  max-width: none;
  padding: 0;
  width: 100%;
}
.preview-hero {
  --gutter: max(28px, calc((100% - 1200px) / 2));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 650px;
  display: flex;
  align-items: center;
  padding: 80px var(--gutter);
  background: radial-gradient(circle at 82% 28%, #aa5c13, #74340d 24%, #4a2209 58%, #331505);
  color: #fff6e4;
}
.preview-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .17;
  background: radial-gradient(#ffd66e 1px, transparent 1.5px) 0 0 / 28px 28px;
}
.preview-toast {
  position: absolute;
  z-index: -1;
  width: min(550px, 52vw);
  right: max(0px, calc((100% - 1440px) / 2));
  bottom: -85px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 24px 24px #2e110a);
}
.preview-copy { width: min(700px, 65%); }
.preview-logo { width: 230px; filter: drop-shadow(0 6px 0 #3c1805); }
.preview-eyebrow {
  margin: 22px 0 12px;
  color: #ffc64d;
  font: 500 12px/1.3 'DM Mono', monospace;
  letter-spacing: 1.8px;
}
.preview-hero h1 {
  margin: 0;
  color: inherit;
  font: 800 clamp(44px, 6.4vw, 86px)/.95 Outfit, Arial, sans-serif;
  letter-spacing: -.045em;
  text-transform: none;
}
.preview-hero h1 em { color: #ffd063; font-style: normal; }
.preview-lead { max-width: 460px; color: #ffe5af; font-size: 18px; line-height: 1.5; }
.preview-ip, .preview-actions, .preview-status { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.preview-ip {
  width: fit-content;
  margin-top: 30px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7e8;
  color: #47200a;
  box-shadow: 0 7px 0 #bd6814;
}
.preview-ip span { color: #a05721; font: 500 10px 'DM Mono', monospace; }
.preview-ip strong { overflow-wrap: anywhere; font-size: 18px; }
.preview-actions { margin-top: 30px; }
.preview-actions > a { color: #fff8df; font-weight: 800; }
html[data-theme="tost"] .preview-actions > .btn { background: #efa726; color: #41200a; }
.preview-status {
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  border: 1px solid #af641c;
  background: #4e240c;
  border-radius: 10px;
  padding: 12px 15px;
}
.preview-status small { color: #ffe3a4; }
.preview-bar {
  background: #efa726;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 45px;
  padding: 20px 28px;
  font-weight: 700;
}
.preview-bar a { color: #48220c; }
html[data-theme="tost"] .preview-sections,
main:has(> .preview-hero) > .section {
  width: min(1200px, calc(100% - 56px));
  margin-inline: auto;
}
html[data-theme="tost"] .preview-sections { display: block; padding: 0; }
.preview-community {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
  position: static;
  margin-top: 32px;
}
.preview-community #top { order: -1; }
html[data-theme="tost"] .preview-sections .shop-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
html[data-theme="tost"] .section-head h2 { font-size: clamp(28px, 4vw, 42px); text-transform: none; }
html[data-theme="tost"] :is(h1, h2, h3, h4) { text-transform: none; }
html[data-theme="tost"] .hero-side .widget > h3 {
  color: #fff5df;
  background: #6e310a;
}
.preview-creators {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}
.preview-creator { overflow: hidden; border-radius: 14px; }
.preview-creator > div {
  min-height: 135px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #d46b17, #5d2309);
}
.preview-creator img { width: 64px; image-rendering: pixelated; }
.preview-creator h3 { padding: 16px; margin: 0; }
html[data-theme="tost"] .preview-recruit {
  padding: 45px clamp(24px, 6vw, 100px);
  margin-block: 36px;
  border-radius: 16px;
  color: #fff8e7;
  background: linear-gradient(110deg, #57240a, #9b4d0d);
}
.preview-recruit h2 { color: inherit; font-size: clamp(30px, 5vw, 42px); }

@media (max-width: 760px) {
  .preview-hero { min-height: 650px; padding-block: 48px 110px; }
  .preview-copy { width: 100%; }
  .preview-toast { opacity: .24; right: -145px; width: 500px; }
  .preview-status { left: var(--gutter); right: auto; }
  html[data-theme="tost"] .preview-sections,
  main:has(> .preview-hero) > .section { width: calc(100% - 36px); }
}