/* Style picker for the intake wizard's "Estilo visual" step (solicitar.html).
   Each card holds a miniature mockup of one design direction from
   src/worker/pipeline/designDirection.ts -- a sample local business of the
   kind the direction suits, drawn in plain HTML/CSS with that direction's
   fonts, palette and hero composition. Mockups are sized in em
   off a container-relative base, so the same markup renders as a card
   thumbnail and, larger, in the "ver maior" dialog. */

/* ---- Picker chrome (uses the site's tokens from styles.css) ---- */

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 0.4rem;
}

.style-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  overflow: hidden;
}

.style-card:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.style-card:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

label.style-pick {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.style-pick .sp-frame { border-bottom: 1px solid var(--color-border); }
.style-name { font-weight: 600; font-size: 0.92rem; padding: 0.65rem 0.85rem 0; }
.style-blurb { font-size: 0.8rem; color: var(--color-muted); padding: 0 0.85rem; }

.style-suggested {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 99px;
  background: rgba(var(--color-accent-rgb), 0.12);
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: 0.1em;
}

.style-card:has(input:checked) .style-name::after {
  content: " — escolhido";
  font-weight: 400;
  color: var(--color-accent);
}

button.style-zoom {
  align-self: flex-start;
  margin: 0.3rem 0.85rem 0.8rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.style-card.style-auto { grid-column: 1 / -1; }
.style-auto label.style-pick { padding: 0.85rem 0.95rem; }
.style-auto .style-name, .style-auto .style-blurb { padding: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.style-dialog {
  /* The 4:3 preview plus ~18rem of text and buttons must fit the viewport height. */
  width: min(760px, calc(100vw - 2rem), calc((100dvh - 18rem) * 4 / 3));
  min-width: min(320px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-ink);
}
.style-dialog::backdrop { background: rgb(0 0 0 / 0.55); }
.style-dialog-body { padding: 1.1rem 1.25rem 1.25rem; }
.style-dialog h3 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.style-dialog p { margin: 0 0 0.5rem; font-size: 0.9rem; max-width: 62ch; }
.style-dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }
.style-dialog-actions button.primary { margin-left: 0; }

/* ---- Mockup frame ---- */

.sp-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  container-type: inline-size;
  overflow: hidden;
}

/* 100cqi = 40em, so every size below is a fraction of the frame width. */
.sp {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.6em 2em;
  font-size: 2.5cqi;
  line-height: 1.2;
}
.sp * { margin: 0; }
.sp h3, .sp p, .sp blockquote { font-weight: inherit; }

/* Body copy is drawn as bars: at thumbnail size it reads as texture. */
.sp .ln {
  display: block;
  width: var(--w, 100%);
  height: 0.42em;
  margin-top: 0.55em;
  border-radius: 0.21em;
  background: currentColor;
  opacity: 0.22;
}

.sp-nav { display: flex; align-items: center; gap: 1.4em; font-size: 0.95em; }
.sp-nav b { margin-right: auto; }
.sp-nav span { display: block; width: 3.2em; height: 0.4em; border-radius: 0.2em; background: currentColor; opacity: 0.4; }

/* ---- Luxo escuro ---- */

.sp--dark-luxe {
  background: #13261f;
  color: #ece4d3;
  font-family: "Jost", sans-serif;
  font-weight: 300;
  align-items: center;
  text-align: center;
}
.sp--dark-luxe::before {
  content: "";
  position: absolute;
  inset: 1.2em;
  border: 1px solid rgb(200 176 122 / 0.55);
  pointer-events: none;
}
.sp--dark-luxe .sp-nav { width: 100%; justify-content: center; }
.sp--dark-luxe .sp-nav b { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: 1.15em; letter-spacing: 0.08em; }
.sp--dark-luxe .sp-nav span { width: 2.4em; opacity: 0.3; }
.sp--dark-luxe .dl-title {
  margin-top: 0.45em;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: 6.2em;
  line-height: 0.95;
}
.sp--dark-luxe .dl-sub { margin-top: 1em; font-size: 0.95em; letter-spacing: 0.12em; color: #c8b07a; }
.sp--dark-luxe .dl-line { flex: 1; width: 1px; margin-top: 1.6em; background: linear-gradient(#c8b07a, transparent); }

/* ---- Aconchegante e natural (organic) ---- */

.sp--organic { background: #e4e9dd; color: #2c3a2e; font-family: "DM Sans", sans-serif; }
.sp--organic .sp-nav b { font-family: "DM Serif Display", serif; font-weight: 400; font-size: 1.2em; }
.sp--organic .or-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5em; align-items: center; margin-top: 1.8em; }
.sp--organic .or-title { font-family: "DM Serif Display", serif; font-size: 4.6em; line-height: 0.98; }
.sp--organic .or-pill {
  display: inline-block;
  margin-top: 1.2em;
  padding: 0.7em 1.5em;
  border-radius: 99em;
  background: #2c3a2e;
  color: #e4e9dd;
  font-size: 0.9em;
  font-weight: 500;
}
.sp--organic .or-art { position: relative; height: 16em; }
.sp--organic .or-blob {
  position: absolute;
  inset: 1.5em -1em -0.5em 1.5em;
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  background: #d8a596;
}
.sp--organic .or-arch {
  position: absolute;
  inset: 0 1.8em 0.8em 0;
  border-radius: 99em 99em 1.5em 1.5em;
  background: linear-gradient(160deg, #b5c49f, #6d7f5c);
}
.sp--organic .or-wave { position: absolute; left: 0; right: 0; bottom: 0; height: 5em; background: #cfd9c2; border-radius: 60% 40% 0 0 / 2.2em 1.6em 0 0; }

/* ---- Pop ousado ---- */

.sp--bold-pop { background: #ffdcc8; color: #1f1b3a; font-family: "Instrument Sans", sans-serif; }
.sp--bold-pop .sp-nav b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; }
.sp--bold-pop .nb-block {
  position: relative;
  margin-top: 1.3em;
  padding: 1.1em 1.2em 1.3em;
  border: 2px solid #1f1b3a;
  background: #b9a8ff;
}
.sp--bold-pop .nb-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 6.4em;
  line-height: 0.84;
  letter-spacing: -0.04em;
}
.sp--bold-pop .nb-btn {
  display: inline-block;
  margin-top: 1.2em;
  padding: 0.6em 1.2em;
  border: 2px solid #1f1b3a;
  background: #fff;
  box-shadow: 0.35em 0.35em 0 #1f1b3a;
  font-weight: 600;
  font-size: 0.95em;
}
.sp--bold-pop .nb-seal {
  position: absolute;
  right: -0.9em;
  top: -1.6em;
  width: 7em;
  height: 7em;
  display: grid;
  place-items: center;
  border: 2px solid #1f1b3a;
  border-radius: 50%;
  background: #2f9e6e;
  color: #fff;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 0.95em;
  line-height: 1;
  text-align: center;
  transform: rotate(-12deg);
}
.sp--bold-pop .nb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-top: 1.2em; }
.sp--bold-pop .nb-row div { border: 2px solid #1f1b3a; background: #fff6ee; padding: 0.4em 0.8em 0.8em; }

/* ---- Retrô ensolarado ---- */

.sp--retro-sunny { background: #d8e6ec; color: #2b2320; font-family: "Outfit", sans-serif; }
.sp--retro-sunny .sp-nav b { font-family: "Gloock", serif; font-weight: 400; font-size: 1.15em; }
.sp--retro-sunny .rm-title {
  position: relative;
  z-index: 1;
  margin-top: 0.25em;
  font-family: "Gloock", serif;
  font-size: 5.6em;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.sp--retro-sunny .rm-sub { position: relative; z-index: 1; margin-top: 1em; width: 15em; }
.sp--retro-sunny .rm-sun {
  position: absolute;
  left: 50%;
  bottom: -9em;
  width: 18em;
  height: 18em;
  border-radius: 50%;
  background: #e3a72f;
}
.sp--retro-sunny .rm-rings {
  position: absolute;
  right: -5em;
  bottom: -5em;
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background: #d8e6ec;
  box-shadow:
    0 0 0 1.4em #d0602f,
    0 0 0 2.4em #d8e6ec,
    0 0 0 3.8em #e3a72f,
    0 0 0 4.8em #d8e6ec,
    0 0 0 6.2em #6f7a36;
}

/* ---- Vitrine moderna ---- */

.sp--storefront { background: #f4f4f2; color: #111; font-family: "Manrope", sans-serif; }
.sp--storefront .ga-name { font-family: "Syne", sans-serif; font-weight: 800; font-size: 1em; }
.sp--storefront .ga-mosaic {
  flex: 1;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  grid-template-rows: 1fr 0.7fr;
  grid-template-areas:
    "a b c"
    "a d c";
  gap: 1.1em 1.3em;
  margin-top: 1.2em;
}
.sp--storefront figure { display: flex; flex-direction: column; min-height: 0; }
.sp--storefront figure i { flex: 1; min-height: 0; }
.sp--storefront figcaption { margin-top: 0.4em; font-size: 0.72em; line-height: 1.3; }
.sp--storefront figcaption b { font-weight: 600; }
.sp--storefront .ga-a { grid-area: a; }
.sp--storefront .ga-a i { background: linear-gradient(160deg, #c9a27e, #6b4a33); }
.sp--storefront .ga-b { grid-area: b; }
.sp--storefront .ga-b i { background: #2f4f6f; }
.sp--storefront .ga-c { grid-area: c; padding-top: 2.5em; }
.sp--storefront .ga-c i { background: linear-gradient(200deg, #e7ddcf, #b6a489); }
.sp--storefront .ga-d { grid-area: d; }
.sp--storefront .ga-d i { background: #b54a32; }

/* ---- Cantina clássica ---- */

.sp--cantina { background: #fbf3ef; color: #2a1b17; font-family: "Source Sans 3", sans-serif; align-items: center; text-align: center; }
.sp--cantina::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.1em;
  background: repeating-conic-gradient(#7b1e24 0 25%, transparent 0 50%) 0 0 / 1.1em 1.1em;
}
.sp--cantina .sp-nav { width: 100%; margin-top: 0.4em; }
.sp--cantina .sp-nav b { font-family: "Playfair Display", serif; font-weight: 700; }
.sp--cantina .ct-sprig { width: 5em; height: 1.6em; margin-top: 1.2em; }
.sp--cantina .ct-kicker { font-family: "Playfair Display", serif; font-style: italic; font-size: 1.5em; color: #5d6b2f; }
.sp--cantina .ct-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 4.4em; line-height: 0.95; color: #7b1e24; }
.sp--cantina .ct-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.3em; width: 100%; margin-top: 1.4em; flex: 1; }
.sp--cantina .ct-photo { border-radius: 0.4em; background: radial-gradient(circle at 50% 45%, #f0c36b 0 18%, #c8452b 19% 34%, #f3e1b5 35% 44%, #8a4b2a 45%); }
.sp--cantina .ct-menu { border: 1px solid #7b1e24; outline: 1px solid #7b1e24; outline-offset: -0.35em; padding: 1em 1.2em; text-align: left; }
.sp--cantina .ct-menu b { display: block; font-family: "Playfair Display", serif; font-style: italic; font-size: 1.15em; color: #7b1e24; margin-bottom: 0.3em; }
.sp--cantina .ct-item { display: flex; align-items: baseline; gap: 0.4em; margin-top: 0.55em; font-size: 0.85em; font-weight: 600; }
.sp--cantina .ct-item::after { content: ""; flex: 1; border-bottom: 1px dotted #7b1e24; opacity: 0.5; }

/* ---- Oficina robusta ---- */

.sp--workshop { background: #1d2024; color: #f2f2f2; font-family: "Barlow", sans-serif; }
.sp--workshop .sp-nav b { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 1.2em; text-transform: uppercase; }
.sp--workshop .sp-nav b::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.4em; background: #ffc21a; vertical-align: -0.05em; }
.sp--workshop .wk-photo {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 5.2em;
  width: 48%;
  background: linear-gradient(160deg, #6b7178, #2c3035 70%);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}
.sp--workshop .wk-title {
  position: relative;
  margin-top: 0.35em;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 5.6em;
  line-height: 0.88;
  text-transform: uppercase;
}
.sp--workshop .wk-sub { position: relative; margin-top: 0.8em; font-size: 1em; color: #c9ccd0; width: 16em; }
.sp--workshop .wk-btn {
  position: relative;
  align-self: flex-start;
  margin-top: 1.1em;
  padding: 0.7em 1.2em;
  background: #ffc21a;
  color: #1d2024;
  font-weight: 600;
  font-size: 0.95em;
}
.sp--workshop .wk-stripes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.2em;
  height: 1em;
  background: repeating-linear-gradient(-45deg, #ffc21a 0 0.8em, #1d2024 0.8em 1.6em);
}
.sp--workshop .wk-services {
  position: absolute;
  left: 2em;
  right: 2em;
  bottom: 0;
  height: 4.2em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  padding-top: 0.9em;
}
.sp--workshop .wk-services span { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.05em; text-transform: uppercase; border-top: 2px solid #ffc21a; padding-top: 0.4em; }

/* ---- Neon noturno ---- */

.sp--neon-night {
  background: radial-gradient(ellipse at 50% 30%, #1d0b2e, #07060d 70%);
  color: #f4ecff;
  font-family: "Manrope", sans-serif;
  align-items: center;
  text-align: center;
}
.sp--neon-night .sp-nav { width: 100%; }
.sp--neon-night .sp-nav b { font-family: "Righteous", sans-serif; font-weight: 400; }
.sp--neon-night .nn-title {
  margin-top: 0.4em;
  font-family: "Righteous", sans-serif;
  font-size: 5.8em;
  line-height: 1;
  color: #ffe3f3;
  text-shadow: 0 0 0.05em #fff, 0 0 0.12em #ff3fa4, 0 0 0.3em #ff3fa4, 0 0 0.6em #ff3fa4;
  transform: rotate(-4deg);
}
.sp--neon-night .nn-sub { margin-top: 0.9em; font-size: 1em; color: #2de2e6; text-shadow: 0 0 0.4em #2de2e6; }
.sp--neon-night .nn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9em; width: 100%; margin-top: 1.4em; flex: 1; }
.sp--neon-night .nn-grid i { border: 1px solid #2de2e6; box-shadow: 0 0 0.6em rgb(45 226 230 / 0.6); background: linear-gradient(160deg, #3a1757, #120a1c); }
.sp--neon-night .nn-grid i:nth-child(2) { background: linear-gradient(200deg, #6b1747, #150912); }
.sp--neon-night .nn-marquee {
  width: calc(100% + 4em);
  margin: 1.2em -2em -1.6em;
  padding: 0.5em 0;
  border-top: 1px solid rgb(255 63 164 / 0.6);
  color: #ff3fa4;
  font-family: "Righteous", sans-serif;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 0.08em;
}

/* ---- Tropical vibrante ---- */

.sp--tropical { background: #ffeec2; color: #3d1d5c; font-family: "Nunito", sans-serif; }
.sp--tropical .sp-nav b { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.2em; }
.sp--tropical .tp-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1em; align-items: center; margin-top: 1.4em; }
.sp--tropical .tp-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 4.8em; line-height: 0.9; }
.sp--tropical .tp-btn { display: inline-block; margin-top: 1.1em; padding: 0.6em 1.3em; border-radius: 99em; background: #ff5a7a; color: #fff; font-weight: 700; font-size: 0.95em; }
.sp--tropical .tp-art { position: relative; height: 15em; }
.sp--tropical .tp-circle { position: absolute; inset: 1em 0.5em 0 1em; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #a45bd6, #5b2a86 60%, #3d1d5c); }
.sp--tropical .tp-leaf { position: absolute; width: 5em; height: 2.3em; border-radius: 0 100% 0 100%; background: #1f9d55; }
.sp--tropical .tp-leaf.l1 { left: -0.5em; top: 0.5em; transform: rotate(-30deg); }
.sp--tropical .tp-leaf.l2 { right: -1.5em; bottom: 1em; transform: rotate(150deg); background: #2bb36a; }
.sp--tropical .tp-sticker {
  position: absolute;
  right: 0.5em;
  top: -0.5em;
  width: 5.4em;
  height: 5.4em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffd23f;
  color: #3d1d5c;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 0.9em;
  line-height: 1;
  text-align: center;
  transform: rotate(10deg);
}
.sp--tropical .tp-wave { position: absolute; left: 0; bottom: 0; width: 100%; height: 5.5em; }

/* ---- Profissional confiável ---- */

.sp--trusted-pro { background: #f4f8f9; color: #12303a; font-family: "Manrope", sans-serif; }
.sp--trusted-pro .sp-nav b { font-weight: 800; }
.sp--trusted-pro .sp-nav b::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.4em; border-radius: 0.3em; background: #0f5c6e; vertical-align: -0.1em; }
.sp--trusted-pro .tr-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.6em; align-items: center; margin-top: 1.8em; }
.sp--trusted-pro .tr-title { font-weight: 800; font-size: 3.3em; line-height: 1.02; letter-spacing: -0.02em; }
.sp--trusted-pro .tr-btns { display: flex; gap: 0.6em; margin-top: 1.2em; font-size: 0.9em; font-weight: 600; }
.sp--trusted-pro .tr-btns span { padding: 0.65em 1em; border-radius: 0.5em; border: 1.5px solid #0f5c6e; color: #0f5c6e; }
.sp--trusted-pro .tr-btns span:first-child { background: #0f5c6e; color: #fff; }
.sp--trusted-pro .tr-art { position: relative; height: 14em; }
.sp--trusted-pro .tr-art::before { content: ""; position: absolute; inset: 1.2em -0.8em -0.8em 1.2em; border-radius: 1em; background: #d4eaee; }
.sp--trusted-pro .tr-photo { position: absolute; inset: 0; border-radius: 1em; background: linear-gradient(160deg, #b9d3da, #5f8c98); }
.sp--trusted-pro .tr-badge {
  position: absolute;
  left: -1.2em;
  bottom: 1.2em;
  padding: 0.5em 0.8em;
  border-radius: 0.6em;
  background: #fff;
  box-shadow: 0 0.2em 0.8em rgb(18 48 58 / 0.12);
  font-size: 0.85em;
  font-weight: 700;
}
.sp--trusted-pro .tr-badge i { font-style: normal; color: #e0a526; }
.sp--trusted-pro .tr-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; margin-top: auto; }
.sp--trusted-pro .tr-services div { display: flex; align-items: center; gap: 0.6em; padding: 0.7em 0.8em; border: 1px solid #d3e0e3; border-radius: 0.6em; background: #fff; font-size: 0.85em; font-weight: 600; }
.sp--trusted-pro .tr-services div::before { content: ""; width: 1.4em; height: 1.4em; flex: none; border-radius: 50%; background: #d4eaee; border: 1.5px solid #0f5c6e; }

/* ---- Energia esportiva ---- */

.sp--sport { background: #0e0e0e; color: #fff; font-family: "Archivo", sans-serif; }
.sp--sport .sp-nav b { font-weight: 900; font-style: italic; text-transform: uppercase; }
.sp--sport .sg-ghost {
  position: absolute;
  left: 1em;
  top: 3.2em;
  font-weight: 900;
  font-style: italic;
  font-size: 11em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgb(255 255 255 / 0.18);
  text-transform: uppercase;
  white-space: nowrap;
}
.sp--sport .sg-slash { position: absolute; right: -4em; top: 0; bottom: 0; width: 24em; background: #c6ff1a; transform: skewX(-14deg); }
.sp--sport .sg-photo { position: absolute; right: 1em; top: 4.5em; bottom: 3em; width: 17em; background: linear-gradient(170deg, #555, #1a1a1a); transform: skewX(-14deg); }
.sp--sport .sg-title {
  position: relative;
  margin-top: auto;
  font-weight: 900;
  font-style: italic;
  font-size: 6.4em;
  line-height: 0.86;
  text-transform: uppercase;
}
.sp--sport .sg-btn {
  position: relative;
  align-self: flex-start;
  margin-top: 1em;
  padding: 0.7em 1.4em;
  background: #c6ff1a;
  color: #0e0e0e;
  font-weight: 700;
  font-size: 0.95em;
  clip-path: polygon(0.7em 0, 100% 0, calc(100% - 0.7em) 100%, 0 100%);
}

/* ---- Artesanal de bairro ---- */

.sp--craft { background: #cfae82; color: #211a16; font-family: "Karla", sans-serif; padding: 0; }
.sp--craft .cr-top { position: relative; height: 14em; background: linear-gradient(180deg, #2a211c, #4a3426); color: #f1e4cf; padding: 1.6em 2em; }
.sp--craft .cr-top .sp-nav b { font-family: "Zilla Slab", serif; font-weight: 700; font-size: 1.15em; }
.sp--craft .cr-emblem {
  position: absolute;
  left: 50%;
  bottom: -4.6em;
  width: 10em;
  height: 10em;
  margin-left: -5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #a8322b;
  color: #f7ead5;
  box-shadow: 0 0 0 0.3em #cfae82, 0 0 0 0.45em #211a16;
  text-align: center;
  font-family: "Zilla Slab", serif;
}
.sp--craft .cr-emblem::before { content: ""; position: absolute; inset: 0.5em; border: 1px dashed rgb(247 234 213 / 0.7); border-radius: 50%; }
.sp--craft .cr-emblem b { font-weight: 700; font-size: 2em; line-height: 0.9; }
.sp--craft .cr-emblem small { margin-top: 0.4em; font-size: 0.75em; letter-spacing: 0.2em; }
.sp--craft .cr-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 11em; padding: 1.2em 2em; }
.sp--craft .cr-body h4 { font-family: "Zilla Slab", serif; font-weight: 700; font-size: 1.5em; }
.sp--craft .cr-item { display: flex; align-items: baseline; gap: 0.4em; margin-top: 0.55em; font-size: 0.85em; font-weight: 600; }
.sp--craft .cr-item::after { content: ""; flex: 1; border-bottom: 1px solid #211a16; opacity: 0.35; }