/* Millie Bravo: coming soon */
:root {
  --ivory: #fbf8f2; --cream: #f3ece0; --sand: #e8dccb;
  --ink: #141210; --ink-soft: #4a443d; --muted: #8a8073;
  --gold: #b89a5e; --gold-deep: #8a6d38;
  --line: rgba(20,18,16,.12);
  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --gold-metal: linear-gradient(135deg, #f3e3b5 0%, #c9a964 28%, #8f7038 52%, #dcc187 74%, #a8874b 100%);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  background: radial-gradient(120% 90% at 75% 40%, #fffdf8 0%, var(--ivory) 45%, var(--cream) 100%);
  color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 18px; border: 1px solid rgba(184,154,94,.28); pointer-events: none; }
p { margin: 0; }
a { color: inherit; }

.page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px 72px 24px; }
.hero { width: 100%; max-width: 1080px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }

.eyebrow { font-size: 12px; font-weight: 400; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 26px; }
.wordmark { font-family: var(--serif); font-weight: 400; font-size: clamp(60px, 8.4vw, 112px); line-height: .95; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.wordmark em { display: block; font-style: italic; text-transform: none; letter-spacing: .01em; color: var(--gold-deep);
  background: linear-gradient(100deg, #9c7d42 0%, #c9a964 38%, #e0c88f 52%, #b0904f 70%, #8a6d38 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .08em; }
.rule { display: block; width: 64px; height: 1px; background: var(--gold); margin: 34px 0 26px; }
.tagline { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; color: var(--ink); margin: 0 0 28px; max-width: 13em; }
.soon { margin-top: 40px; font-size: 12px; font-weight: 400; letter-spacing: .38em; text-transform: uppercase; color: var(--gold-deep); display: flex; align-items: center; gap: 18px; }
.soon::before, .soon::after { content: ""; height: 1px; width: 40px; background: var(--gold); opacity: .7; }
.soon::before { display: none; }
.collections { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.collections li + li::before { content: "·"; color: var(--gold); margin: 0 .9em 0 .6em; letter-spacing: 0; }

.art { display: flex; justify-content: center; }
.arch { position: relative; width: min(360px, 100%); aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0;
  background: radial-gradient(120% 80% at 50% 30%, #fffaf0 0%, var(--sand) 70%, #d9c7ab 100%);
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(184,154,94,.35), 0 40px 60px -30px rgba(90,66,26,.35); }
.arch::before { content: ""; position: absolute; inset: 12px 12px 0; border: 1px solid rgba(138,109,56,.35); border-bottom: 0; border-radius: 999px 999px 0 0; }
.arch::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, rgba(20,18,16,0), rgba(20,18,16,.08)); }
.arch-glow { position: absolute; width: 74%; aspect-ratio: 1; left: 13%; top: 16%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 65%); }
.ring { position: absolute; border-radius: 50%; }
.ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 12px; background: var(--gold-metal);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ring-a { width: 54%; aspect-ratio: 1; left: 12%; top: 38%; transform: rotate(-18deg); filter: drop-shadow(0 18px 16px rgba(80,58,20,.25)); }
.ring-b { width: 40%; aspect-ratio: 1; left: 47%; top: 30%; transform: rotate(24deg) scaleY(.9); filter: drop-shadow(0 14px 12px rgba(80,58,20,.22)); }
.ring-b::before { padding: 8px; }
.sparkle { position: absolute; width: 13px; height: 13px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.sparkle-1 { left: 72%; top: 25%; } .sparkle-2 { left: 21%; top: 33%; width: 9px; height: 9px; } .sparkle-3 { left: 80%; top: 70%; width: 7px; height: 7px; opacity: .8; }

.foot { text-align: center; padding: 18px 24px 40px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }

/* 404 */
.notfound { text-align: center; }
.notfound .rule { margin: 30px auto 24px; }
.wordmark-sm { font-size: clamp(44px, 6vw, 72px); }
.notfound .tagline { font-size: clamp(22px, 2.4vw, 30px); }
.link { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 6px; }
.link:hover, .link:focus-visible { color: var(--gold-deep); }
:focus-visible { outline: 1px solid var(--gold-deep); outline-offset: 4px; }

@media (max-width: 820px) {
  body::before { inset: 10px; }
  .page { padding: 52px 28px 12px; }
  .hero { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .art { order: -1; }
  .arch { width: min(240px, 66vw); }
  .eyebrow { margin-bottom: 18px; font-size: 11px; }
  .wordmark { font-size: clamp(50px, 15vw, 72px); }
  .rule { margin: 26px auto 20px; }
  .tagline { font-size: 30px; margin: 0 auto 22px; }
  .soon { justify-content: center; margin-top: 30px; font-size: 11px; }
  .soon::before { display: block; }
  .collections { justify-content: center; font-size: 10.5px; letter-spacing: .22em; row-gap: 8px; }
  .foot { padding-bottom: 30px; }
}