/* belladolceetoile.com — site.css
   Personality: elegant & starry. Accent emphasis: GOLD / GOLD-SOFT (most gilded of the family).
   Signature detail: faint gold starfield + arched frames + ritual drawn as a constellation. */
.site-etoile { --accent: var(--gold); --accent-2: var(--gold-soft); }
.star { color: var(--gold); font-size: .9rem; }
.center { text-align: center; }
.actions.center { justify-content: center; }
.small { font-size: .85rem; }
.center-head { justify-content: center; text-align: center; }

/* Hero */
.hero-star { position: relative; overflow: hidden; background: linear-gradient(180deg, transparent 60%, var(--bg) 100%); }
.starfield { position: absolute; inset: 0; pointer-events: none; opacity: .75;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, var(--gold) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 42%, var(--gold-soft) 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 12%, var(--gold) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 63% 30%, var(--gold) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 81% 16%, var(--gold-soft) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 90% 48%, var(--gold) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 7% 62%, var(--gold-soft) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 72% 66%, var(--gold) 50%, transparent 51%);
  background-size: 520px 420px; animation: twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .45; } to { opacity: .9; } }
.hero-star-inner { position: relative; text-align: center; padding: 4.5rem 0 3rem; }
.hero-star-inner .eyebrow { color: var(--gold); font-weight: 600; letter-spacing: .32em; }
.hero-star-inner h1 { font-size: clamp(3.2rem, 9vw, 6.4rem); line-height: .9; margin: 0 auto 1rem; letter-spacing: .01em; }
.hero-star-inner .lead { margin-inline: auto; }
.arch { margin: 3rem auto 0; width: min(440px, 82vw); padding: 10px; border-radius: 240px 240px 22px 22px; border: 1px solid rgba(184, 134, 11, .45); background: var(--card); box-shadow: 0 40px 80px -40px rgba(28, 24, 20, .55); }
.arch img { width: 100%; border-radius: 230px 230px 14px 14px; aspect-ratio: 2 / 3; object-fit: cover; object-position: center top; background: var(--ink-deep); }

/* The four */
.four-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.four { list-style: none; padding: 0; margin: 2rem 0 0; }
.four li { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.four .n { font-family: var(--serif); font-size: 1.4rem; color: var(--gold); text-align: center; position: relative; }
.four .n::before { content: "✦"; display: block; font-size: .7rem; color: var(--gold-soft); }
.four h3 { font-size: 1.7rem; margin: 0 0 .2rem; }
.four p { margin: 0; color: var(--muted); }
.four-photo { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(184, 134, 11, .35); }
.four-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 860px) { .four-grid { grid-template-columns: 1fr; } }

/* Editions */
.editions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; }
.edition { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.edition img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ed-body { padding: 1.4rem 1.5rem 1.6rem; }
.ed-body h3 { font-size: 1.9rem; margin: 0 0 .3rem; }
.ed-body p { margin: 0 0 .4rem; color: var(--muted); }
.ed-night { box-shadow: 0 0 0 1px rgba(184, 134, 11, .4); }
.ed-divider { font-size: 1.6rem; color: var(--gold); }
@media (max-width: 860px) { .editions { grid-template-columns: 1fr; } .ed-divider { text-align: center; } }

/* Constellation (signature) */
.constellation { position: relative; height: 300px; margin-top: 1rem; }
.const-lines { position: absolute; inset: 0 0 80px; width: 100%; height: 220px; }
.const-lines polyline { fill: none; stroke: rgba(232, 200, 114, .45); stroke-width: 1.2; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.cstar { position: absolute; transform: translate(-50%, -12px); text-align: center; width: 180px; }
.cstar i { display: block; width: 18px; height: 18px; margin: 0 auto .7rem; background: var(--gold-soft); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 8px rgba(232, 200, 114, .9)); }
.cstar h3 { font-size: 1.5rem; margin: 0; }
.cstar p { margin: .1rem 0 0; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
.s1 { left: 6%; top: 150px; } .s2 { left: 33%; top: 60px; } .s3 { left: 64%; top: 140px; } .s4 { left: 94%; top: 50px; }
.s1, .s4 { transform: translate(-30%, -12px); } .s4 { transform: translate(-70%, -12px); }
@media (max-width: 760px) {
  .constellation { height: auto; display: grid; gap: 1.6rem; }
  .const-lines { display: none; }
  .cstar { position: static; transform: none !important; width: auto; }
}