/* FELLINO — "Atelier für Fellnasen". Reference: yumo paper brand — grain,
   Fredoka display, Archivo utility, sand/cream/orange/ink, hand-drawn
   radii. Disciplined: prints sit STRAIGHT in the grid and tilt only on
   hover; ink borders 2px; one orange. */
@font-face { font-family: 'Fredoka'; src: url("../fonts/Fredoka-Medium.17684ec77828.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url("../fonts/Fredoka-SemiBold.4eab3e31a951.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url("../fonts/Archivo-Regular.396fdf2a3950.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url("../fonts/Archivo-Bold.79672df0a8f6.ttf"); font-weight: 700; font-display: swap; }

/* paper tooth over everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.26; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, footer.brandfoot { position: relative; z-index: 1; }
header.site { position: sticky; z-index: 70; }

body { line-height: 1.6; }
h1, h2, h3 { font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
h1 em, h2 em { font-style: normal; color: #E85D1F; }
.kicker { font-family: 'Archivo', sans-serif; font-weight: 700; color: #5F5747; }

/* ── header + strip ────────────────────────────────────────────────── */
header.site { border-bottom: 2px solid #171310; }
header.site .cart-link { font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.2em; border: 2px solid #171310;
  border-radius: 18px 14px 16px 12px / 14px 18px 12px 16px; padding: 0.4rem 1rem;
  background: #FBF4E4; }
.service-strip { --strip-bg: #171310; --strip-text: #F0E6D2;
  font-family: 'Archivo', sans-serif; font-weight: 700; }

/* ── CTA: the hand-drawn orange ────────────────────────────────────── */
.btn-cta {
  background: #E85D1F; color: #FFF8EC; border: 2px solid #171310;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.04rem;
  text-transform: none; letter-spacing: 0.01em; padding: 0.95rem 1.8rem;
  border-radius: 26px 20px 24px 18px / 20px 26px 18px 24px;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), border-radius 0.35s ease;
}
.btn-cta:hover { transform: translate(-1px, -2px) rotate(-0.5deg);
  border-radius: 20px 26px 18px 24px / 26px 20px 24px 18px; }

/* ── hero: print pinned to the paper ───────────────────────────────── */
.hero { padding-top: 3.2rem; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); }
.hero img { border: 2px solid #171310; border-radius: 6px;
  box-shadow: 6px 7px 0 rgba(23,19,16,0.25); transform: rotate(1deg); }

/* ── cards: prints, straight in the grid, tilt on hover ────────────── */
.product-card img, .product-card .card-abstract {
  border-radius: 6px; border: 2px solid #171310;
  box-shadow: 4px 5px 0 rgba(23,19,16,0.22);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease;
}
.product-card:hover img, .product-card:hover .card-abstract {
  transform: rotate(-1deg) translateY(-3px); box-shadow: 6px 8px 0 rgba(23,19,16,0.26); }
.product-card strong { font-family: 'Fredoka', sans-serif; font-size: 1.08rem; }
.product-card em { font-family: 'Archivo', sans-serif; font-size: 0.8rem; }
.card-price { font-family: 'Archivo', sans-serif; font-weight: 700; }
.card-pct { color: #E85D1F; font-weight: 700; }
.badge { background: #171310; color: #FBF4E4;
  border-radius: 12px 9px 11px 8px / 9px 12px 8px 11px;
  font-family: 'Archivo', sans-serif; font-weight: 700; }
.product-card .example-tag { background: rgba(251,244,228,0.92); color: #5F5747;
  border: 1px solid #171310; }

/* ── band: cream paper sheet ───────────────────────────────────────── */
.band { --tile-scrim: rgba(23, 19, 16, 0.72); }
.step3 { border-top: 2px solid #E85D1F; }

/* ── reviews: index cards ──────────────────────────────────────────── */
.review-card { background: #FBF4E4; border: 2px solid #171310;
  border-radius: 10px 8px 9px 7px / 8px 10px 7px 9px;
  box-shadow: 3px 4px 0 rgba(23,19,16,0.18); }
.review-stars { color: #E85D1F; }

/* ── configurator surfaces ─────────────────────────────────────────── */
.tile { border: 2px solid #171310; border-radius: 14px 10px 12px 9px / 10px 14px 9px 12px; background: #FBF4E4; }
.tile.active { background: #E85D1F; color: #FFF8EC; }
.tile small { opacity: 0.75; }
.field input, .field select, .field textarea { border: 2px solid #171310; background: #FBF4E4;
  border-radius: 12px 9px 11px 8px / 9px 12px 8px 11px; font-family: 'Archivo', sans-serif; }
.dropzone { border: 3px dashed #171310; background: #FBF4E4;
  border-radius: 24px 18px 22px 16px / 18px 24px 16px 22px; }
.style-card { border: 2px solid #171310; background: #FBF4E4;
  border-radius: 14px 10px 12px 9px / 10px 14px 9px 12px; font-family: 'Fredoka', sans-serif; }
.style-card.active { background: #E85D1F; color: #FFF8EC; }
.qa-note { border: 2px solid #171310; background: #FBF4E4;
  border-radius: 12px 9px 11px 8px / 9px 12px 8px 11px; }
.buy-bar { border-top: 2px solid #171310; }
.intro-badge { border: 2px solid #E85D1F; border-radius: 10px 8px 9px 7px / 8px 10px 7px 9px; }

.room-grid img { border: 2px solid #171310; border-radius: 6px;
  box-shadow: 6px 7px 0 rgba(23,19,16,0.25); }
.examples-grid img { border: 2px solid #171310; border-radius: 6px;
  box-shadow: 4px 5px 0 rgba(23,19,16,0.22); }

footer.brandfoot { background: #E3D5BB; border-top: 2px solid #171310; }
.pay-badges span { border: 2px solid #171310; border-radius: 10px 8px 9px 7px / 8px 10px 7px 9px;
  background: #FBF4E4; color: #171310; font-family: 'Archivo', sans-serif; font-weight: 700; }