/* AI: The Musical — standalone page styles.
   Self-contained and independent from the main anotherology.com site, so this
   page can be restyled on its own. Fonts load via <link> in index.html. */

:root{ --font-display:'Cinzel'; --font-body:'Montserrat'; }
*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.characters{padding:120px 9vw;background:#171512}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#4a433a;margin-top:54px}.character-grid article{background:#171512;min-height:270px;padding:34px 30px;display:flex;flex-direction:column}.character-grid p{font-size:10px;letter-spacing:.17em;color:var(--gold);margin:0}.character-grid h3{font:34px/1 Georgia,serif;letter-spacing:-.045em;margin:36px 0 16px}.character-grid span{font-size:14px;line-height:1.55;color:#aaa398}@media(max-width:720px){.characters{padding:85px 7vw}.character-grid{grid-template-columns:1fr}}

:root { --ink:#070707; --paper:#f0ece3; --gold:#e5bc65; --muted:#a69f94; }
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif} a{color:inherit;text-decoration:none}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5vw;position:absolute;z-index:4;top:0;width:100%;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.brand{font-weight:700;letter-spacing:.12em}.brand span{font-family:Georgia,serif;font-size:27px;font-weight:400;letter-spacing:-.07em}.brand i{color:var(--gold);font-size:24px;font-style:normal}.navlinks{display:flex;gap:31px;color:#cfc9bf}.nav-cta{border-bottom:1px solid var(--gold);padding-bottom:5px}.nav-cta span{color:var(--gold);font-size:16px}.hero{min-height:760px;height:100vh;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 85% 100% at 47% 52%,#281a10 0%,#100d0a 36%,#070707 72%)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.52),transparent 54%,rgba(0,0,0,.5));z-index:-1}.grain{position:absolute;inset:0;opacity:.18;background-image:radial-gradient(#fff 0.7px,transparent .7px);background-size:6px 6px;mix-blend-mode:soft-light}.hero-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9.8%,rgba(229,188,101,.12) 10%,transparent 10.15%),linear-gradient(0deg,transparent 0 49.8%,rgba(229,188,101,.22) 50%,transparent 50.2%);mask-image:radial-gradient(circle at 55% 48%,black 0 19%,transparent 59%)}.orb{position:absolute;border-radius:50%;filter:blur(1px);z-index:-1}.orb-one{width:450px;height:450px;left:53%;top:23%;background:radial-gradient(circle at 30% 28%,#ffdca2 0 3%,#c27826 19%,#63340e 44%,transparent 70%);box-shadow:0 0 130px #c7751c88}.orb-two{width:700px;height:700px;left:41%;top:8%;border:1px solid #e8b76533;box-shadow:inset 0 0 100px #dda13c22;transform:rotate(30deg) scaleY(.38)}.hero-copy{position:absolute;z-index:2;left:12vw;top:27%;max-width:860px}.eyebrow,.section-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:bold}.hero h1{margin:17px 0 22px;font-size:clamp(55px,7.45vw,118px);line-height:.86;letter-spacing:-.07em;font-weight:700}.hero h1 span,.hero h1 em{display:block}.hero h1 em,h2 em{font-family:Georgia,serif;font-weight:400;color:var(--gold);letter-spacing:-.06em}.hero-text{max-width:420px;color:#d2cbc0;line-height:1.6;font-size:16px}.hero-actions{display:flex;gap:26px;align-items:center;margin-top:36px}.button{display:inline-flex;gap:30px;align-items:center;padding:15px 19px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:bold}.gold{background:var(--gold);color:#17120c}.gold b{font-size:18px}.text{padding-left:0}.play{font-size:10px;color:var(--gold)}.hero-footer{position:absolute;bottom:32px;left:5.5vw;right:5.5vw;display:flex;justify-content:space-between;color:#969087;font-size:10px;letter-spacing:.15em}.manifesto{padding:145px 9vw 130px;background:var(--paper);color:#141210}.section-label{margin:0}.section-label span{color:#847b6f;margin-left:12px}.manifesto-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:8vw;align-items:end;margin-top:62px}.manifesto h2,.watcher-copy h2,.watch-card h2{font-size:clamp(40px,5.2vw,76px);line-height:.93;letter-spacing:-.065em;margin:0}.manifesto-copy{font-size:17px;line-height:1.65;color:#554e47}.manifesto-copy p{margin:0 0 24px}.timebar{display:flex;align-items:center;gap:23px;margin-top:106px;color:#777066;font-size:10px;letter-spacing:.15em}.timebar div{flex:1;display:flex;gap:6px;align-items:center}.timebar i{height:1px;background:#786d60;display:block;flex:1}.timebar i:nth-child(1){opacity:.2}.timebar i:nth-child(2){opacity:.38}.timebar i:nth-child(3){opacity:.55}.timebar i:nth-child(4){opacity:.75}.timebar i:nth-child(5){background:var(--gold);height:3px}.chapters{padding:132px 9vw;background:#10100f}.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:56px}.section-head>p:last-child{color:var(--muted);max-width:310px;line-height:1.5;font-size:14px}.chapter{display:grid;grid-template-columns:75px 1.1fr 1fr 30px;gap:20px;align-items:center;border-top:1px solid #3b3935;padding:24px 0;transition:.25s}.chapter:last-child{border-bottom:1px solid #3b3935}.chapter:hover{padding-left:14px;background:#181714}.chapter-number{font:22px Georgia,serif;color:var(--gold)}.chapter-title p{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 5px}.chapter h3{font-size:24px;margin:0;letter-spacing:-.035em}.chapter-description{color:#aaa398;font-size:14px;line-height:1.45;margin:0}.arrow{font-size:23px;color:var(--gold)}.watchers{min-height:690px;display:grid;grid-template-columns:1fr 1fr;background:#ebe5da;color:#18140f}.watcher-visual{position:relative;min-height:600px;background:#21170d;display:grid;place-items:center;overflow:hidden}.rings i{position:absolute;left:50%;top:50%;border:1px solid #dba64e77;border-radius:50%;transform:translate(-50%,-50%)}.rings i:nth-child(1){width:220px;height:220px}.rings i:nth-child(2){width:420px;height:420px}.rings i:nth-child(3){width:660px;height:660px}.core{width:115px;height:115px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fbd484,#a45c19 55%,#3f210b);box-shadow:0 0 54px #e3a544b3;font:44px Georgia,serif;color:#17120d;z-index:2}.twelve span{position:absolute;left:calc(50% - 5px);top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:#f4cc75;box-shadow:0 0 10px #e6b557;transform:rotate(calc(var(--i)*30deg)) translateY(-210px)}.watcher-copy{padding:13vw 9vw 8vw}.watcher-copy>p:not(.section-label){color:#5b544b;line-height:1.65;max-width:390px;margin:30px 0}.watcher-names{display:flex;flex-wrap:wrap;gap:8px}.watcher-names span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;border:1px solid #b6aa99;padding:7px 9px}.watch{padding:110px 9vw;background:#0c0c0b}.watch-card{padding:84px 8%;position:relative;overflow:hidden;background:linear-gradient(115deg,#2d1d0e,#15110e 58%,#0e0e0d);border:1px solid #6a5232}.watch-card:after{content:"";position:absolute;width:380px;height:380px;border:1px solid #daab5688;border-radius:50%;right:-80px;top:-170px;box-shadow:0 0 100px #c9802f44}.watch-card h2{position:relative;z-index:1;color:#f0ece3;margin:21px 0 35px}.watch-card .button{position:relative;z-index:1}footer{display:grid;grid-template-columns:1fr 1fr auto;gap:30px;padding:37px 5.5vw;color:#938b80;font-size:11px;border-top:1px solid #2e2d29;align-items:center}footer p{margin:0}@media(max-width:720px){.topbar{padding:0 7vw}.navlinks{display:none}.nav-cta{font-size:9px}.hero{min-height:700px}.hero-copy{left:7vw;right:7vw;top:25%}.hero h1{font-size:54px}.hero-footer{left:7vw;right:7vw;font-size:8px}.manifesto,.chapters{padding:85px 7vw}.manifesto-grid,.watchers{grid-template-columns:1fr}.manifesto-grid{margin-top:38px;gap:35px}.timebar{margin-top:65px}.section-head{display:block}.chapter{grid-template-columns:45px 1fr 20px;padding:20px 0}.chapter-description{display:none}.watcher-visual{min-height:440px}.watcher-copy{padding:75px 7vw}.watch{padding:70px 7vw}.watch-card{padding:55px 8%}footer{grid-template-columns:1fr;padding:30px 7vw;gap:12px}.orb-one{left:30%;top:29%;width:370px;height:370px}}

/* ============================================================================
   ANOTHEROLOGY THEME + POLISH
   Brand alignment with anotherology.com: Cinzel + Montserrat, the gold palette,
   the hero gradient/glow, and layout rhythm refinements. Layered last so it
   overrides the base rules above without editing them.
   Fonts arrive as CSS variables from next/font (see app/layout.tsx):
     --font-display = Cinzel   --font-body = Montserrat
   ============================================================================ */

:root{
  --ink:#000;
  --paper:#f1ebdd;          /* warm ivory for the light sections */
  --gold:#D4AF37;           /* main brand gold */
  --muted:#8c8674;
  /* hero gold gradient stops (top -> bottom) */
  --g1:#FBF3DA; --g2:#F2D28A; --g3:#D4AF37; --g4:#B8860B;
}

/* ---- Typography ------------------------------------------------------------ */
body{ font-family:var(--font-body),Montserrat,sans-serif; font-weight:300; letter-spacing:.01em; }

.brand span{ font-family:var(--font-display),Cinzel,serif; font-weight:600; letter-spacing:.02em; font-size:25px; }
.eyebrow,.section-label,.chapter-title p,.character-grid p{ font-family:var(--font-body),Montserrat,sans-serif; font-weight:600; }
.button,.navlinks,.watcher-names span{ font-family:var(--font-body),Montserrat,sans-serif; font-weight:600; }

/* Serif display type -> Cinzel, with tracking relaxed to suit a serif */
.hero h1,
.manifesto h2,.watcher-copy h2,.watch-card h2,
.chapter h3,.character-grid h3,
.chapter-number,.core,h2 em{
  font-family:var(--font-display),Cinzel,serif;
}
.manifesto h2,.watcher-copy h2,.watch-card h2{ font-weight:700; letter-spacing:0; line-height:1.0; }
.chapter h3{ font-weight:600; letter-spacing:.005em; font-size:23px; }
.character-grid h3{ font-weight:600; letter-spacing:.005em; }
h2 em{ font-style:normal; color:var(--gold); }   /* Cinzel has no true italic */

/* ---- Signature hero: Cinzel headline with gold gradient + glow ------------- */
.hero{ background:radial-gradient(ellipse 85% 100% at 47% 52%,#2a2010 0%,#0d0b08 40%,#000 74%); }
.hero h1{
  font-weight:700; letter-spacing:.004em; line-height:.92;
  background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 38%,var(--g3) 62%,var(--g4) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 30px rgba(212,175,55,.38));
}
.hero h1 em{ font-style:normal; -webkit-text-fill-color:transparent; color:transparent; }
.hero-lines{ background:repeating-linear-gradient(90deg,transparent 0 9.8%,rgba(212,175,55,.12) 10%,transparent 10.15%),linear-gradient(0deg,transparent 0 49.8%,rgba(212,175,55,.22) 50%,transparent 50.2%); }

/* Warm accents onto the brand gold */
.orb-one{ background:radial-gradient(circle at 30% 28%,#ffe6b0 0 3%,#d4af37 19%,#7a5511 44%,transparent 70%); box-shadow:0 0 130px rgba(212,175,55,.5); }
.orb-two{ border-color:rgba(212,175,55,.22); box-shadow:inset 0 0 100px rgba(212,175,55,.14); }

/* ---- Rhythm / spacing polish ---------------------------------------------- */
.manifesto{ padding:160px 9vw 140px; background:var(--paper); color:#161310; }
.manifesto-copy{ color:#4b453c; }
.chapters{ padding:150px 9vw; }
.section-head{ margin-bottom:64px; }
.characters{ padding:140px 9vw; }
.watch{ padding:130px 9vw; }

/* Chapter list: calmer dividers, gold numerals, roomier rows */
.chapter{ border-top-color:rgba(212,175,55,.16); padding:26px 0; }
.chapter:last-child{ border-bottom-color:rgba(212,175,55,.16); }
.chapter:hover{ background:#15140f; }
.chapter-number{ font-size:21px; color:var(--gold); }
.chapter-title p{ color:var(--gold); opacity:.85; }

/* Watchers visual + light section on brand gold */
.watchers{ background:var(--paper); color:#161310; }
.watcher-copy>p:not(.section-label){ color:#4b453c; }
.watcher-visual{ background:radial-gradient(circle at 50% 46%,#241a0c,#140d06 70%); }
.rings i{ border-color:rgba(212,175,55,.42); }
.core{ background:radial-gradient(circle,#f7dd9a,#b8860b 55%,#5c440c); box-shadow:0 0 60px rgba(212,175,55,.6); color:#17120d; font-weight:700; }
.twelve span{ background:#f2d28a; box-shadow:0 0 12px rgba(212,175,55,.8); }
.watcher-names span{ border-color:#b9ad97; }

/* Closing CTA card */
.watch-card{ background:linear-gradient(115deg,#2c1f0d,#15110e 58%,#0e0e0d); border-color:rgba(212,175,55,.4); }
.watch-card:after{ border-color:rgba(212,175,55,.5); box-shadow:0 0 100px rgba(212,175,55,.28); }

@media(max-width:720px){
  .manifesto,.chapters,.characters,.watch{ padding-left:7vw; padding-right:7vw; }
  .manifesto{ padding-top:95px; padding-bottom:90px; }
}