/*
Theme Name: Rook & Moon
Template: twentytwentyfive
Author: Dave Coleman
Description: Dark celestial brand skin for Rook & Moon — black, antique gold, engraved serif, starfield and gilded tarot-card frames. Child of Twenty Twenty-Five.
Version: 2.2
Requires at least: 6.7
Tested up to: 6.8
*/

/* Palette + tokens mirror theme.json so CSS-only touches stay in sync. */
:root {
  --rm-night:        #0a0a0d;
  --rm-surface:      #14141a;
  --rm-moonlight:    #ece6d8;
  --rm-mist:         #a79e8b;
  --rm-mist-dim:     #7d7768;
  --rm-gold:         #c8a24c;
  --rm-gold-bright:  #e6d29b;
  --rm-gold-deep:    #8a6d2c;
  --rm-hairline:     rgba(200,162,76,0.28);
  --rm-hairline-soft:rgba(200,162,76,0.14);
  --rm-foil: linear-gradient(135deg, #8a6d2c 0%, #c8a24c 28%, #f3e7bd 50%, #c8a24c 72%, #8a6d2c 100%);
  --rm-shadow: 0 24px 60px rgba(0,0,0,0.6);
}

html { overflow-x: clip; }
body {
  overflow-x: clip;
  max-width: 100%;
  position: relative;
  background-color: var(--rm-night);
}

/* ---------- Atmosphere: starfield + moon glow + grain (injected in wp_body_open) ---------- */
.rm-sky {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(200,162,76,0.10), transparent 60%),
    radial-gradient(900px 600px at 12% 108%, rgba(120,150,200,0.05), transparent 55%),
    linear-gradient(180deg, #08080b 0%, #0c0c11 40%, #0a0a0d 100%);
}
.rm-stars, .rm-stars::after {
  position: fixed; inset: -50%; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(236,230,216,0.9), transparent),
    radial-gradient(1.2px 1.2px at 75% 18%, rgba(236,230,216,0.7), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(236,230,216,0.6), transparent),
    radial-gradient(1.3px 1.3px at 35% 85%, rgba(236,230,216,0.8), transparent),
    radial-gradient(1px 1px at 88% 55%, rgba(236,230,216,0.5), transparent),
    radial-gradient(1.1px 1.1px at 45% 12%, rgba(236,230,216,0.7), transparent),
    radial-gradient(1px 1px at 8% 60%, rgba(236,230,216,0.5), transparent);
  background-repeat: repeat;
  background-size: 600px 600px;
  animation: rm-drift 240s linear infinite;
  opacity: 0.7;
}
.rm-stars::after { content: ""; background-size: 420px 420px; animation-duration: 360s; animation-direction: reverse; opacity: 0.5; }
@keyframes rm-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-300px, -200px, 0); } }

.rm-twinkle {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(2px 2px at 30% 25%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.6px 1.6px at 50% 40%, rgba(255,255,255,0.85), transparent);
  animation: rm-twinkle 5s ease-in-out infinite;
}
@keyframes rm-twinkle { 0%,100% { opacity: 0.15; } 50% { opacity: 0.5; } }

.rm-grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .rm-stars, .rm-stars::after, .rm-twinkle { animation: none; }
}

/* ---------- Shared brand bits ---------- */
.rm-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem !important;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--rm-gold) !important;
  text-indent: 0.42em;
}

.rm-foil {
  font-family: 'Cinzel', serif;
  background: var(--rm-foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
.rm-foil .amp { font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 400; -webkit-text-fill-color: transparent; }

/* Hairline gold rule under section headings (kept for gallery/about/contact) */
.rm-rule:after {
  content: ""; display: block; width: 64px; height: 1px;
  margin: 0.8rem auto 0;
  background: linear-gradient(90deg, transparent, var(--rm-gold), transparent);
}

/* Moon-phase divider */
.rm-moons { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin: 1.5rem auto; color: var(--rm-gold); }
.rm-moons .line { height: 1px; width: clamp(40px, 12vw, 130px); background: linear-gradient(90deg, transparent, var(--rm-hairline)); }
.rm-moons .line.r { background: linear-gradient(90deg, var(--rm-hairline), transparent); }
.rm-moons .phase { width: 13px; height: 13px; border-radius: 50%; position: relative; flex: none; }
.rm-moons .phase.new  { box-shadow: inset 0 0 0 1px var(--rm-gold); }
.rm-moons .phase.cres { box-shadow: inset 0 0 0 1px var(--rm-gold); background: linear-gradient(90deg, var(--rm-gold) 38%, transparent 38%); }
.rm-moons .phase.half { box-shadow: inset 0 0 0 1px var(--rm-gold); background: linear-gradient(90deg, var(--rm-gold) 50%, transparent 50%); }
.rm-moons .phase.gibb { box-shadow: inset 0 0 0 1px var(--rm-gold); background: linear-gradient(90deg, var(--rm-gold) 70%, transparent 70%); }
.rm-moons .phase.full { background: radial-gradient(circle at 38% 35%, var(--rm-gold-bright), var(--rm-gold) 70%); box-shadow: 0 0 12px rgba(200,162,76,0.5); }
.rm-moons .flip { transform: scaleX(-1); }

/* Buttons (theme.json sets base; these add the foil + glow) */
.wp-block-button__link {
  font-family: 'Cinzel', serif !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.82rem;
  transition: color .35s ease, box-shadow .45s ease, background .45s ease, transform .3s ease;
}
.wp-block-button__link:hover { box-shadow: 0 0 26px rgba(200,162,76,0.45); transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link,
.is-style-outline .wp-block-button__link {
  background: linear-gradient(180deg, rgba(200,162,76,0.08), rgba(200,162,76,0.02));
  color: var(--rm-gold-bright);
  border: 1px solid var(--rm-gold);
}
.is-style-outline .wp-block-button__link:hover { background: var(--rm-gold); color: #1a1509; }

/* Gentle lift on any image */
.wp-block-image img { border-radius: 6px; transition: transform .5s ease, box-shadow .5s ease; }

/* ---------- Tarot-card frame ---------- */
.rm-framed {
  position: relative;
  border: 1px solid var(--rm-hairline);
  padding: clamp(2rem, 5vw, 4rem) !important;
  background: linear-gradient(180deg, rgba(20,20,26,0.7), rgba(10,10,13,0.5));
}
.rm-framed::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  background:
    linear-gradient(var(--rm-gold),var(--rm-gold)) left top,
    linear-gradient(var(--rm-gold),var(--rm-gold)) left top,
    linear-gradient(var(--rm-gold),var(--rm-gold)) right top,
    linear-gradient(var(--rm-gold),var(--rm-gold)) right top,
    linear-gradient(var(--rm-gold),var(--rm-gold)) left bottom,
    linear-gradient(var(--rm-gold),var(--rm-gold)) left bottom,
    linear-gradient(var(--rm-gold),var(--rm-gold)) right bottom,
    linear-gradient(var(--rm-gold),var(--rm-gold)) right bottom;
  background-repeat: no-repeat;
  background-size: 1px 24px, 24px 1px, 1px 24px, 24px 1px, 1px 24px, 24px 1px, 1px 24px, 24px 1px;
}

/* ---------- Hero ---------- */
.rm-hero { padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2rem, 6vw, 4rem) !important; }
.rm-hero-grid { align-items: center; gap: clamp(2rem, 5vw, 5rem) !important; }
.rm-hero-copy .rm-eyebrow { margin-bottom: 0.6rem; }
.rm-hero-title { font-size: clamp(3.2rem, 9vw, 6.4rem) !important; line-height: 0.98 !important; margin: 0 !important; }
.rm-lede { color: var(--rm-mist) !important; font-size: clamp(1.15rem, 2vw, 1.4rem) !important; max-width: 32ch; margin-top: 1.4rem !important; }
.rm-hero-copy .wp-block-buttons { margin-top: 2.2rem; gap: 1rem; }

.rm-emblem { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.rm-emblem .halo { position: absolute; width: 116%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(200,162,76,0.22), transparent 62%); filter: blur(8px); animation: rm-breathe 7s ease-in-out infinite; }
.rm-emblem .ring { position: absolute; width: 94%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--rm-hairline-soft); }
.rm-emblem .ring.r2 { width: 106%; border-style: dashed; border-color: rgba(200,162,76,0.12); animation: rm-spin 90s linear infinite; }
.rm-emblem img { width: min(420px, 82%); border-radius: 50%; position: relative; box-shadow: 0 0 0 1px var(--rm-hairline), 0 30px 80px rgba(0,0,0,0.7); }
@keyframes rm-breathe { 0%,100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes rm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rm-emblem .halo, .rm-emblem .ring.r2 { animation: none; } }

/* ---------- Section heading helper ---------- */
.rm-section-head { text-align: center; }
.rm-section-head h2 { font-size: clamp(2rem, 4.5vw, 3rem); margin-top: 0.8rem; }
.rm-section-head p { color: var(--rm-mist); max-width: 56ch; margin-left: auto; margin-right: auto; }

/* ---------- Collection grid ---------- */
.rm-collection { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4rem; align-items: start; }
.rm-collection > * { margin-block: 0 !important; }
.rm-piece {
  position: relative; overflow: hidden;
  border: 1px solid var(--rm-hairline-soft);
  background: var(--rm-surface);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease;
}
.rm-piece--w3 { grid-column: span 3; }
.rm-piece--w2 { grid-column: span 2; }
.rm-piece-img { margin: 0 !important; }
.rm-piece-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/5; border-radius: 0; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.rm-piece--w3 .rm-piece-img img { aspect-ratio: 16/12; }
.rm-piece::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,13,0) 0%, rgba(10,10,13,0.9) 100%); transition: opacity .5s ease; }
.rm-piece-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.2rem 1.3rem !important; }
.rm-piece-label * { margin: 0 !important; }
.rm-num { font-family: 'Cinzel', serif; font-size: 0.66rem !important; letter-spacing: 0.3em; color: var(--rm-gold) !important; display: block; margin-bottom: 0.35rem !important; }
.rm-piece-label h3 { font-size: 1.15rem !important; color: var(--rm-moonlight) !important; transition: color .4s ease; }
.rm-desc { color: var(--rm-mist) !important; font-size: 0.92rem !important; line-height: 1.5 !important; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s ease, opacity .4s ease, margin .5s ease; }
.rm-piece:hover { transform: translateY(-6px); border-color: var(--rm-hairline); box-shadow: var(--rm-shadow); }
.rm-piece:hover .rm-piece-img img { transform: scale(1.07); }
.rm-piece:hover .rm-piece-label h3 { color: var(--rm-gold-bright) !important; }
.rm-piece:hover .rm-desc { max-height: 100px; opacity: 1; margin-top: 0.5rem !important; }

/* ---------- Maker band ---------- */
.rm-maker .rm-maker-grid { align-items: center; gap: clamp(2rem,5vw,4rem) !important; }
.rm-maker-emblem img { border-radius: 50%; box-shadow: 0 0 0 1px var(--rm-hairline), var(--rm-shadow); }
.rm-maker p { color: var(--rm-mist) !important; }

/* ---------- Closing CTA ---------- */
.rm-closing { text-align: center; }
.rm-closing h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.rm-closing p { color: var(--rm-mist) !important; max-width: 50ch; margin-left: auto; margin-right: auto; }

/* ---------- Header ---------- */
header.wp-block-template-part {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(8,8,11,0.9), rgba(8,8,11,0.55));
  border-bottom: 1px solid var(--rm-hairline-soft);
}
.rm-header { padding: 0.7rem 0 !important; }
.rm-brandmark { align-items: center; gap: 0.7rem !important; }
.rm-brandmark .wp-block-site-logo img { width: 42px !important; height: 42px; border-radius: 50%; box-shadow: 0 0 0 1px var(--rm-hairline); }
.rm-brandmark .wp-block-site-title a {
  font-family: 'Cinzel', serif; letter-spacing: 0.2em; font-size: 0.95rem;
  color: var(--rm-gold-bright); text-transform: uppercase; text-decoration: none;
}
.rm-header .wp-block-navigation { font-family: 'Cinzel', serif; }
.rm-header .wp-block-navigation a { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rm-moonlight); }
.rm-header .wp-block-navigation a:hover { color: var(--rm-gold-bright); }
.rm-header .wp-block-navigation__responsive-container.is-menu-open { background: rgba(8,8,11,0.98); }

/* ---------- Footer ---------- */
footer.wp-block-template-part { border-top: 1px solid var(--rm-hairline-soft); margin-top: 3rem; }
.rm-footer { padding: 3rem 0 3.5rem !important; }
.rm-footer .wp-block-site-title a { font-family: 'Cinzel', serif; letter-spacing: 0.2em; color: var(--rm-gold-bright); text-decoration: none; text-transform: uppercase; font-size: 0.85rem; }
.rm-footer .wp-block-navigation a { font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rm-moonlight); }
.rm-footer .rm-copyright { color: var(--rm-mist-dim) !important; font-size: 0.85rem !important; letter-spacing: 0.04em; }

/* ---------- Reveal on scroll (progressive enhancement; only hides when JS is present) ---------- */
.js .rm-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rm-reveal.rm-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rm-reveal { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
  .rm-hero { padding-top: 1.5rem !important; padding-bottom: 1rem !important; }
  .rm-hero-grid { text-align: center; }
  .rm-hero-grid .rm-hero-emblem { order: -1; margin-bottom: 0.25rem; }
  /* Mobile: full-width logo at its natural 3:2 ratio (shorter than a circle), no ring decoration,
     side edges faded so the landscape image's black bars melt into the starfield. */
  .rm-hero-emblem .rm-emblem { max-width: none; aspect-ratio: auto; }
  .rm-hero-emblem .rm-emblem .halo,
  .rm-hero-emblem .rm-emblem .ring { display: none; }
  .rm-hero-emblem .rm-emblem img {
    width: 100%; max-width: none; border-radius: 0; box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
  .rm-hero-title { font-size: clamp(2.8rem, 15vw, 4rem) !important; }
  .rm-lede { margin-left: auto; margin-right: auto; }
  .rm-hero-copy .wp-block-buttons { justify-content: center; }
  .rm-collection { grid-template-columns: 1fr; }
  .rm-piece--w3, .rm-piece--w2 { grid-column: span 1; }
  .rm-piece-img img, .rm-piece--w3 .rm-piece-img img { aspect-ratio: 4/5; }
  .rm-maker .rm-maker-grid { text-align: center; }
}