/* Shared design-system styles for the site's content pages.
   Mirrors the tokens defined inline in index.html so the landing pages stay
   visually identical without duplicating the whole stylesheet each time. */

html { scroll-behavior: smooth; font-size: 17px; }
body { background-color: #1A1917; }
::selection { background: #CBAB94; color: #1A1917; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(8,7,6,0.35) 100%);
}

.glass {
  background: rgba(26, 25, 23, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.hair { border-color: #3A3529; }

.underline-grow {
  background-image: linear-gradient(#CBAB94, #CBAB94);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.6s cubic-bezier(0.16,1,0.3,1);
}
.underline-grow:hover { background-size: 100% 1px; }

.num { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

.h-hero { font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem); line-height: 1.18; letter-spacing: -0.01em; }
.h-sec  { font-size: clamp(1.7rem, 2vw + 1rem, 2.35rem); line-height: 1.26; }
.h-sub  { font-size: clamp(1.15rem, 0.6vw + 1rem, 1.35rem); line-height: 1.4; }

.soften {
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), background 0.6s ease, box-shadow 0.6s ease;
}
.soften:hover {
  transform: translateY(-3px);
  background: radial-gradient(420px circle at 50% 50%, rgba(203,171,148,0.08), transparent 65%);
  box-shadow: 0 20px 60px -20px rgba(203,171,148,0.18);
}

/* Display comes from the Tailwind classes on each element, so `hidden` still works. */
.magnetic { will-change: transform; }

.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.14), transparent);
  transform: skewX(-18deg); transition: left 0.9s ease;
}
.shine:hover::after { left: 130%; }

.orb { position: absolute; border-radius: 9999px; filter: blur(140px); pointer-events: none; }

/* Long-form body copy inside the landing pages */
.prose-cl p { color: #BDB8A9; line-height: 1.75; }
.prose-cl p + p { margin-top: 1.1rem; }
.prose-cl strong { color: #F2EFE7; font-weight: 500; }
.prose-cl a { color: #CBAB94; text-decoration: underline; text-underline-offset: 3px; }
.prose-cl a:hover { color: #DCC3B1; }

/* Blog article typography */
.prose-article { font-size: 1.06rem; }
.prose-article h2 {
  font-family: Fraunces, serif; color: #F2EFE7; font-weight: 400;
  font-size: clamp(1.45rem, 1.2vw + 1rem, 1.85rem); line-height: 1.3; margin: 3rem 0 1.1rem;
}
.prose-article h3 {
  font-family: Fraunces, serif; color: #F2EFE7; font-weight: 400;
  font-size: 1.22rem; line-height: 1.4; margin: 2.1rem 0 0.8rem;
}
.prose-article > :first-child { margin-top: 0; }
.prose-article ul, .prose-article ol { color: #BDB8A9; line-height: 1.75; margin: 1.1rem 0; padding-left: 1.4rem; }
.prose-article ul { list-style: disc; }
.prose-article ol { list-style: decimal; }
.prose-article li + li { margin-top: 0.55rem; }
.prose-article li::marker { color: #CBAB94; }
.prose-article h2 + p, .prose-article h3 + p, .prose-article ul + p, .prose-article ol + p { margin-top: 0; }
.prose-article blockquote { border-left: 2px solid #CBAB94; padding-left: 1.25rem; margin: 1.6rem 0; font-family: Fraunces, serif; font-style: italic; }
.prose-cl .callout {
  border: 1px solid rgba(203,171,148,0.35); border-radius: 20px; background: #211F1B;
  padding: 1.5rem 1.75rem; margin: 2.25rem 0;
}
.prose-cl .callout p { color: #F2EFE7; }

/* Native disclosure styling for the FAQ blocks */
details.faq { border-bottom: 1px solid #3A3529; }
details.faq summary {
  cursor: pointer; list-style: none; padding: 1.35rem 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  color: #F2EFE7; font-family: Fraunces, serif; font-size: 1.12rem; line-height: 1.45;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; color: #CBAB94; font-family: "Instrument Sans", sans-serif;
  font-size: 1.4rem; line-height: 1; flex: none; transition: transform 0.3s ease;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq-body { padding-bottom: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .glow-breathe { animation: none !important; }
  html { scroll-behavior: auto; }
}