/* Mother Comet — "engraved plate" design (original artwork and styles). */
:root { --scarlet: #c8323a; }

/* ---- Engraved art (light lines on black, like scratchboard) ------------- */
.mc-art { display: block; width: 100%; height: 100%; color: var(--ink); }
.mc-a-sky { fill: var(--bg); }
.mc-a-skyline { stroke: var(--ink); stroke-width: .35; opacity: .07; }
.mc-a-paper, .mc-a-paperfill, .mc-a-ink { fill: var(--ink); }
.mc-a-paperline { fill: none; stroke: var(--ink); stroke-linecap: round; opacity: .85; }
.mc-a-scarlet { fill: none; stroke: var(--scarlet); stroke-linecap: round; }
.mc-a-scarletfill { fill: var(--scarlet); }
.mc-a-ring { fill: none; stroke: var(--ink); stroke-width: .7; opacity: .7; }
.mc-a-ringink { fill: none; stroke: var(--ink); stroke-width: .8; }
.mc-a-building { fill: var(--bg); stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; }
.mc-a-window { fill: none; stroke: var(--ink); stroke-width: .45; opacity: .7; }
.mc-a-hatch { fill: url(#mc-hatch); }
.mc-a-hatchline { stroke: var(--ink); stroke-width: .5; opacity: .55; }
.mc-a-glass { fill: var(--ink); opacity: .05; }
.mc-a-ray { stroke: var(--ink); stroke-width: .4; opacity: .18; }
.mc-a-pane { fill: none; stroke: var(--ink); stroke-width: .6; opacity: .45; }
.mc-a-domeedge { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.mc-a-domeedge2 { fill: none; stroke: var(--ink); stroke-width: .6; opacity: .6; }
.mc-a-glint { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: .35; }
.mc-a-base { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.mc-a-line { fill: none; stroke: var(--ink); stroke-width: .6; }
.mc-a-ground { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.mc-a-groundflat { fill: var(--bg); }
.mc-a-frame { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .5; }
.mc-a-flute { stroke: var(--ink); stroke-width: .35; opacity: .55; }
.mc-a-win { stroke: var(--ink); stroke-width: .35; opacity: .45; }
.mc-a-rib { fill: none; stroke: var(--ink); stroke-width: 1.1; opacity: .85; }
.mc-a-ring2 { fill: none; stroke: var(--ink); stroke-width: .7; opacity: .6; }
.mc-a-tri { fill: none; stroke: var(--ink); stroke-width: .45; opacity: .4; }
.mc-a-mount { fill: var(--bg); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.mc-a-road { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 5 3; opacity: .8; }
.mc-a-rock { fill: var(--bg); stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.mc-a-frame2 { fill: none; stroke: var(--ink); stroke-width: .5; opacity: .35; }

/* Motion: twinkling stars, glowing comet, layered parallax, etched reveal. */
.mc-tw { animation: pv-twinkle 4.8s ease-in-out infinite; }
.mc-tw2 { animation-duration: 6.2s; animation-delay: -2s; }
.mc-tw3 { animation-duration: 3.6s; animation-delay: -1s; }
.mc-comet { animation: pv-drift 14s ease-in-out infinite; transform-box: fill-box; }
.mc-cglow { animation: pv-glow 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mc-l { transform: translate(calc(var(--mx, 0) * var(--d, 0) * -1px), calc(var(--my, 0) * var(--d, 0) * -.6px)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pv-etch { animation: pv-etch 2.6s cubic-bezier(.65,.05,.25,1) .1s both; }
@keyframes pv-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes pv-glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes pv-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, 6px); } }
@keyframes pv-etch { from { clip-path: circle(0% at 65% 55%); } to { clip-path: circle(150% at 65% 55%); } }
@keyframes pv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---- Hero ------------------------------------------------------------------ */
.pv-hero { position: relative; min-height: min(86vh, 860px); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.pv-hero-art { position: absolute; inset: 0; }
.pv-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 34%, rgba(0,0,0,0) 62%); pointer-events: none; }
.pv-hero-copy { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 90px 80px 110px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.pv-hero-copy > * { max-width: 520px; }
.pv-rise { animation: pv-rise 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(1.2s + var(--i, 0) * .12s); }
.pv-logo { width: 92px; height: 92px; object-fit: contain; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); padding: 6px; }
.pv-kicker { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-dim); }
.pv-center { justify-content: center; }
.pv-h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 5vw, 60px); line-height: 1.12; margin: 0; color: var(--ink); }
.pv-intro { font-size: 15px; line-height: 1.75; color: var(--ink-dim); }
.pv-intro p { margin: 0 0 12px; }
.pv-intro b { color: var(--ink); font-weight: 500; }
.pv-btn { display: inline-block; padding: 15px 28px; border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: rgba(0,0,0,.4); }
.pv-btn-solid { background: var(--ink); color: var(--bg-deep); }
.pv-link { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink); border-bottom: 1px solid var(--ink); }
.pv-plate-cap { position: absolute; z-index: 1; right: 28px; bottom: 18px; margin: 0; font-family: var(--font-display); font-size: 14px; letter-spacing: .08em; color: var(--ink-dim); text-shadow: 0 0 8px #000; }

/* ---- Sections -------------------------------------------------------------- */
.pv-sec { padding: clamp(80px, 10vw, 130px) 0; border-bottom: 1px solid var(--line); }
.pv-wrap { max-width: 1240px; margin: 0 auto; padding: 0 80px; box-sizing: border-box; }
.pv-reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.pv-reveal.pv-in { opacity: 1; transform: none; }

.pv-debut { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 100px); align-items: start; }
.pv-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 6vw, 72px); line-height: 1; margin: 18px 0 0; color: var(--ink); }
.pv-sub { margin-top: 10px; font-family: var(--font-display); font-size: 14px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-dim); }
.pv-by { margin-top: 14px; font-size: 16px; color: var(--ink-dim); }
.pv-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pv-tags span { padding: 6px 14px; border: 1px solid var(--line); border-radius: 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.pv-story { margin-top: 34px; max-width: 620px; }
.pv-story p { margin: 0 0 18px; font-family: var(--font-display); font-size: 20px; line-height: 1.7; color: var(--ink-dim); }
.pv-drop::first-letter { float: left; font-size: 4.6em; line-height: .82; padding: .06em .12em 0 0; color: var(--ink); font-weight: 500; }
.pv-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 30px; }

.pv-cover { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pv-cover-frame { position: relative; width: 100%; max-width: 360px; border: 1px solid var(--line); }
.pv-cover-frame img { display: block; width: 100%; height: auto; }
.pv-cover-frame > span { position: absolute; width: 16px; height: 16px; border: 0 solid var(--ink-dim); }
.pv-cover-frame > span:nth-child(1) { top: -9px; left: -9px; border-top-width: 1px; border-left-width: 1px; }
.pv-cover-frame > span:nth-child(2) { top: -9px; right: -9px; border-top-width: 1px; border-right-width: 1px; }
.pv-cover-frame > span:nth-child(3) { bottom: -9px; left: -9px; border-bottom-width: 1px; border-left-width: 1px; }
.pv-cover-frame > span:nth-child(4) { bottom: -9px; right: -9px; border-bottom-width: 1px; border-right-width: 1px; }
.pv-cover figcaption { font-family: var(--font-display); font-size: 14px; letter-spacing: .08em; color: var(--ink-dim); }

.pv-excerpt { text-align: center; }
.pv-qlead { margin: 26px auto 0; max-width: 640px; font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.6; color: var(--ink-dim); }
.pv-quote { margin: 18px auto 0; max-width: 820px; font-family: var(--font-display); font-style: italic; font-size: clamp(30px, 4vw, 48px); line-height: 1.3; color: var(--ink); }
.mc-ornament { display: block; width: 220px; margin: 30px auto 0; }
.mc-o-line { stroke: var(--line); stroke-width: 1; fill: none; }
.mc-o-trail { stroke: var(--scarlet); stroke-width: 1; fill: none; stroke-linecap: round; }
.mc-o-star { fill: var(--ink); }
.pv-qby { margin: 18px 0 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }

.pv-band { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.pv-band-art { position: absolute; inset: 0; }
.pv-band-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.65)); }
.pv-band-in { position: relative; z-index: 1; padding-top: 150px; padding-bottom: 140px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.pv-cd { display: flex; flex-wrap: wrap; gap: 36px; }
.pv-cd[hidden] { display: none; }
.pv-cd div { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 72px; }
.pv-cd span { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 5vw, 58px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-cd small { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-dim); }
.pv-cdnote { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }

.pv-colophon { text-align: center; }
.pv-coltitle { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: .4em; text-transform: uppercase; color: var(--ink); }
.pv-colbook { margin: 26px 0 0; font-family: var(--font-display); font-size: 28px; line-height: 1.4; color: var(--ink); }
.pv-colbook span { font-size: 18px; font-style: italic; color: var(--ink-dim); }
.pv-coldl { margin: 34px auto 0; max-width: 520px; display: grid; gap: 10px; }
.pv-coldl div { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; font-size: 14px; }
.pv-coldl dt { text-align: right; font-family: var(--font-display); font-style: italic; color: var(--ink-dim); }
.pv-coldl dd { margin: 0; text-align: left; color: var(--ink); }
.pv-colpub { margin: 34px 0 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-dim); }

@media (max-width: 860px) {
  .pv-hero { min-height: 0; align-items: flex-end; }
  .pv-hero-art { bottom: auto; height: max(62vw, 300px); overflow: hidden; }
  .pv-hero-art .mc-hero-art { position: absolute; top: 0; right: -10%; width: auto; height: 100%; aspect-ratio: 1600 / 860; }
  .pv-hero-shade { background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 40vw, #000 max(62vw, 300px)); }
  .pv-hero-copy { padding: calc(max(62vw, 300px) + 44px) 24px 70px; }
  .pv-plate-cap { top: calc(max(62vw, 300px) + 10px); bottom: auto; left: 24px; right: 24px; font-size: 12px; }
  .pv-wrap { padding: 0 24px; }
  .pv-debut { grid-template-columns: 1fr; }
  .pv-cover { order: -1; }
  .pv-cover-frame { max-width: 260px; }
  .pv-story p { font-size: 18px; }
  .pv-band-in { padding: 120px 24px 120px; }
  .pv-cd { gap: 14px; }
  .pv-cd div { min-width: 60px; }
  .pv-cd span { font-size: 34px; }
  .pv-coldl div { grid-template-columns: 1fr; gap: 2px; }
  .pv-coldl dt, .pv-coldl dd { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tw, .mc-comet, .mc-cglow, .pv-etch, .pv-rise { animation: none !important; }
  .mc-l { transition: none; }
  .pv-reveal { opacity: 1; transform: none; transition: none; }
}

/* Countdown band: meteor shower over a single dome */
.mc-band-halo { fill: url(#mc-band-halo); color: var(--ink); animation: pv-glow 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mc-band-art { color: var(--ink); }
.mc-met-move { opacity: 0; animation: pv-fall var(--t, 3.5s) linear var(--dl, 0s) infinite; }
.mc-met-red .mc-met-move { animation-name: pv-fall-red; }
@keyframes pv-fall {
  0% { opacity: 0; transform: translate(0, 0); }
  4% { opacity: 1; }
  40% { opacity: 0; transform: translate(-620px, 358px); }
  100% { opacity: 0; transform: translate(-620px, 358px); }
}
@keyframes pv-fall-red {
  0% { opacity: 0; transform: translate(0, 0); }
  3% { opacity: 1; }
  24% { opacity: 0; transform: translate(-760px, 439px); }
  100% { opacity: 0; transform: translate(-760px, 439px); }
}
@media (prefers-reduced-motion: reduce) { .mc-met-move { animation: none !important; opacity: .7; } .mc-band-halo { animation: none !important; } }