:root{ --ink:#000000; --ink-2:#141414; --parchment:#f2ebe0; --parchment-dim:rgba(242,235,224,.68); --line:rgba(242,235,224,.14); --gold:#d48b30; --max:1180px; --accent:var(--gold); --glow:rgba(212,139,48,.12); --btn-text:#1a1006; --show-font:'Fraunces'; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--ink); color:var(--parchment); font-family:'Outfit',sans-serif; font-weight:300; line-height:1.6; overflow-x:hidden; min-height:100svh; display:flex;flex-direction:column; } main{flex:1} img{max-width:100%;display:block} a{color:inherit} a:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* per-world themes (set on ) */ .theme--skycadia{--accent:#7fb4ff;--glow:rgba(127,180,255,.14);--show-font:'Cormorant Garamond';--btn-text:#0a1322} .theme--sirens{--accent:#d48b30;--glow:rgba(212,139,48,.16);--show-font:'Rye';--btn-text:#1a1006} .theme--arcanist{--accent:#9b59ff;--glow:rgba(155,89,255,.16);--show-font:'Playfair Display';--btn-text:#140a22} .theme--fallout{--accent:#18ff62;--glow:rgba(24,255,98,.10);--show-font:'Share Tech Mono';--btn-text:#04140a} /* ---------- NAV ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;gap:1.5rem; padding:1.05rem 1.5rem; background:rgba(0,0,0,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .nav__logo img{height:34px;width:auto} .nav__links{display:flex;align-items:center;gap:.25rem;margin-left:auto;list-style:none;flex-wrap:wrap} .nav__links a{ text-decoration:none;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase; padding:.45rem .8rem;border-radius:999px;color:var(--parchment-dim); transition:color .2s,background .2s; font-weight:500; } .nav__links a:hover,.nav__links a:focus-visible{color:var(--parchment);background:rgba(242,235,224,.08)} .nav__links a.is-active{color:var(--ink);background:var(--parchment)} /* ko-fi support link */ .nav__kofi a{color:var(--gold)} .nav__kofi a:hover,.nav__kofi a:focus-visible{color:var(--gold);background:rgba(212,139,48,.14)} /* desktop: centered, larger nav links (mobile keeps the hamburger panel) */ @media (min-width:901px){ .nav__links{ position:absolute;left:50%;transform:translateX(-50%);margin-left:0; gap:.6rem; } .nav__links a,.nav__links .nav__dd-btn{ font-size:.95rem;letter-spacing:.15em; padding:.55rem 1.15rem; } } /* shows dropdown */ .nav__dd{position:relative} /* invisible bridge so the pointer can cross the gap to the menu without it closing */ .nav__dd::after{content:'';position:absolute;top:100%;left:0;right:0;height:.7rem} .nav__dd-btn{ display:flex;align-items:center;gap:.4rem; margin:0;line-height:inherit; background:none;border:0;cursor:pointer;font-family:inherit; text-decoration:none;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase; padding:.45rem .8rem;border-radius:999px;color:var(--parchment-dim); transition:color .2s,background .2s;font-weight:500; } .nav__dd-btn:hover,.nav__dd-btn:focus-visible{color:var(--parchment);background:rgba(242,235,224,.08)} .nav__dd-btn.is-active{color:var(--ink);background:var(--parchment)} .nav__caret{ font-size:0;width:0;height:0; border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor; transition:transform .2s; } .nav__dd.open .nav__caret{transform:rotate(180deg)} .nav__dd-menu{ display:none;list-style:none; position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%); min-width:220px;padding:.4rem; background:rgba(0,0,0,.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line);border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.5); } .nav__dd.open .nav__dd-menu{display:block} @media (min-width:901px){ .nav__dd:hover .nav__dd-menu,.nav__dd:focus-within .nav__dd-menu{display:block} } .nav__dd-menu a{ display:block;white-space:nowrap;border-radius:10px; padding:.6rem .9rem; } /* mobile menu toggle (injected by site.js) */ .nav__toggle{ display:none;margin-left:auto; background:none;border:1px solid var(--line);border-radius:10px; width:42px;height:38px;cursor:pointer; flex-direction:column;align-items:center;justify-content:center;gap:5px; transition:border-color .2s; } .nav__toggle:hover,.nav__toggle:focus-visible{border-color:var(--gold)} .nav__toggle span{ display:block;width:18px;height:2px;border-radius:2px; background:var(--parchment);transition:transform .25s,opacity .25s; } .nav--open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav--open .nav__toggle span:nth-child(2){opacity:0} .nav--open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:900px){ .nav__toggle{display:flex} .nav__links{ display:none; position:absolute;top:100%;left:0;right:0; flex-direction:column;gap:0;margin-left:0; background:rgba(0,0,0,.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding:.4rem 0 .8rem; } .nav--open .nav__links{display:flex} .nav__dd-btn{width:100%;justify-content:flex-start;padding:.85rem 1.6rem;border-radius:0;font-size:.85rem} .nav__dd-menu{ position:static;transform:none;min-width:0; border:0;border-radius:0;box-shadow:none;background:rgba(242,235,224,.03); padding:0 0 .3rem; } .nav__dd-menu a{padding:.7rem 1.6rem .7rem 2.6rem;border-radius:0;white-space:normal} .nav__links a{ display:block;padding:.85rem 1.6rem;border-radius:0; font-size:.85rem; } .nav__links a.is-active{background:rgba(242,235,224,.08);color:var(--gold)} } /* ---------- HOME HERO ---------- */ .hero{ min-height:100svh; display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center;position:relative; padding:7rem 1.5rem 4rem; background: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(155,89,255,.16), transparent 60%), radial-gradient(ellipse 60% 45% at 85% 110%, rgba(212,139,48,.12), transparent 60%), radial-gradient(ellipse 60% 45% at 12% 105%, rgba(24,255,98,.07), transparent 60%), var(--ink); } .hero__stars{position:absolute;inset:0;pointer-events:none;opacity:.55} /* collage hero: hero container matches image aspect (2560:1656) so cover fills edge-to-edge with no crop and no side bars. Mobile media query below overrides the aspect for the vertical carousel. */ .hero--art{ justify-content:flex-end;padding-bottom:4.5rem; aspect-ratio:2560/1656; min-height:100svh; } .hero__art{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;object-position:center center; } .hero--art::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.12) 20%, rgba(0,0,0,.04) 52%, rgba(0,0,0,.68) 82%, var(--ink) 100%); } .hero--art .hero__stars{z-index:2;opacity:.3} .hero--art .hero__blurb{ position:relative;z-index:2; text-shadow:0 2px 16px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.7); } .hero__logo--mobile{display:none} .hero--art .wordmark--hero{display:none} .hero--art .hero__title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* if the collage fails to load, fall back to the glow hero */ .hero--art-failed{justify-content:center} .hero--art-failed::before, .hero--art-failed::after{display:none} .hero--art-failed .hero__logo--mobile, .hero--art-failed .wordmark--hero{display:block} .hero--art-failed .hero__title{position:relative;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal} /* mobile carousel: four vertical show panels, cross-fade with Ken Burns */ .hero__slides{display:none} @media (max-width:760px),(max-aspect-ratio:6/5){ .hero--art{ justify-content:flex-end; padding:5rem 1.25rem 2.5rem; overflow:hidden; /* match image aspect exactly so cover fills edge-to-edge with no crop */ aspect-ratio:9/19.5; min-height:100svh; } .hero__art{display:none} .hero--art::before{display:none} .hero--art::after{ display:block; background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 10%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.9) 86%, var(--ink) 100%); } .hero__slides{ display:block;position:absolute;inset:0;overflow:hidden; background:var(--ink); } .hero__slide{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center center; opacity:0; animation:hero-slide 32s ease-in-out infinite; will-change:opacity; } .hero__slide:nth-child(1){animation-delay:0s} .hero__slide:nth-child(2){animation-delay:-8s} .hero__slide:nth-child(3){animation-delay:-16s} .hero__slide:nth-child(4){animation-delay:-24s} .hero--art .hero__stars{display:none} .hero__logo--mobile{display:none} .hero--art .wordmark--hero{display:block;position:relative;z-index:3} /* hide the gradient tagline on mobile — show art has its own titles */ .hero--art .hero__title{ position:absolute;width:1px;height:1px;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; } .hero--art .hero__blurb{ position:relative;z-index:3; text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 32px rgba(0,0,0,.85); } } @keyframes hero-slide{ 0%,100% { opacity:0 } 6.25%,18.75% { opacity:1 } 25% { opacity:0 } } .hero__logo{width:min(525px,80vw);margin-bottom:2.5rem;position:relative;filter:drop-shadow(0 6px 30px rgba(0,0,0,.5))} .hero h1{ font-family:'Fraunces',serif;font-weight:800; font-size:clamp(2.6rem,8vw,5.6rem); line-height:1.02;letter-spacing:.01em; text-transform:uppercase;position:relative; } .hero h1 .accent{ background:linear-gradient(100deg,#7fb4ff 0%,#d48b30 38%,#9b59ff 70%,#18ff62 105%); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero__blurb{ max-width:620px;margin:1.8rem auto 0;position:relative; font-size:1.06rem;color:var(--parchment-dim); } .hero__blurb strong{color:var(--parchment);font-weight:500} /* ---------- ABOUT STRIP ---------- */ .about{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--ink-2); padding:3.2rem 1.5rem; } .about__inner{max-width:760px;margin:0 auto;text-align:center} .about__eyebrow{ font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold); font-weight:600;margin-bottom:1rem; } .about p{font-size:1.12rem;color:var(--parchment-dim)} .about p em{font-style:normal;color:var(--parchment);font-weight:500} /* ---------- HOME: WORLD CARDS ---------- */ .worlds{padding:5rem 1.5rem 6rem;background:var(--ink)} .worlds__inner{max-width:var(--max);margin:0 auto} .worlds__title{ font-family:'Fraunces',serif;font-weight:800; font-size:clamp(1.8rem,4.5vw,2.8rem);text-align:center;margin-bottom:3rem; } .worlds__blurb{ text-align:center;color:var(--parchment-dim);font-size:1.08rem; max-width:620px;margin:-1.8rem auto 3rem; } .art-credit{ text-align:center;font-size:.78rem;letter-spacing:.06em; color:rgba(242,235,224,.45);margin-top:2.4rem; } .art-credit a,.team-hero__credit a{ color:inherit;text-decoration:underline;text-underline-offset:2px; transition:color .2s; } .art-credit a:hover,.art-credit a:focus-visible, .team-hero__credit a:hover,.team-hero__credit a:focus-visible{color:var(--gold)} .worlds__grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem; } .world-card{ --accent:var(--card-accent);--glow:var(--card-glow); position:relative;display:flex;flex-direction:column;align-items:center;text-align:center; gap:1rem;padding:2.6rem 1.6rem 2.2rem;border-radius:18px; border:1px solid var(--line);text-decoration:none; background: radial-gradient(ellipse 100% 70% at 50% 0%, var(--card-glow), transparent 70%), var(--ink-2); transition:transform .25s,border-color .25s,box-shadow .25s; } .world-card:hover,.world-card:focus-visible{ transform:translateY(-5px);border-color:var(--card-accent); box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px var(--card-accent); } .world-card__logo{height:84px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))} .world-card__tag{ font-size:.7rem;letter-spacing:.26em;text-transform:uppercase; color:var(--card-accent);font-weight:600; } .world-card__blurb{color:var(--parchment-dim);font-size:.92rem;flex:1} .world-card__cta{ margin-top:.4rem; font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600; color:var(--card-accent); border:1px solid var(--card-accent);border-radius:999px;padding:.55rem 1.3rem; transition:background .2s,color .2s; } .world-card:hover .world-card__cta{background:var(--card-accent);color:var(--ink)} .card--skycadia{--card-accent:#7fb4ff;--card-glow:rgba(127,180,255,.14)} .card--sirens{--card-accent:#d48b30;--card-glow:rgba(212,139,48,.16)} .card--arcanist{--card-accent:#9b59ff;--card-glow:rgba(155,89,255,.16)} .card--fallout{--card-accent:#18ff62;--card-glow:rgba(24,255,98,.10)} /* ---------- SHOW PAGE ---------- */ .world{ position:relative; padding:9rem 1.5rem 5rem; background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--glow), transparent 65%), var(--ink); overflow:hidden; } .world__inner{max-width:var(--max);margin:0 auto;position:relative} .world__head{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem;align-items:center;margin-bottom:4rem; } .world__logo{width:min(440px,100%);filter:drop-shadow(0 8px 30px rgba(0,0,0,.55))} .world__tag{ font-size:.74rem;letter-spacing:.3em;text-transform:uppercase; color:var(--accent);font-weight:600;margin-bottom:.9rem; } .world__title-sub{ font-family:var(--show-font),serif; color:var(--accent); font-size:clamp(1.3rem,3vw,1.9rem); margin-bottom:1.1rem;line-height:1.15; } .theme--skycadia .world__title-sub{font-family:'Titan One',sans-serif;font-weight:400;letter-spacing:.02em} .theme--fallout .world__blurb,.theme--fallout .world__tag{font-family:'Share Tech Mono',monospace;letter-spacing:.02em} .world__blurb{color:var(--parchment-dim);font-size:1.04rem;max-width:54ch} .world__ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem} .btn{ display:inline-flex;align-items:center;gap:.5rem; text-decoration:none;font-weight:600;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase; padding:.8rem 1.5rem;border-radius:999px;transition:transform .2s,box-shadow .2s,background .2s,color .2s; } .btn--solid{background:var(--accent);color:var(--btn-text)} .btn--solid:hover,.btn--solid:focus-visible{transform:translateY(-2px);box-shadow:0 8px 26px var(--glow)} .btn--ghost{border:1px solid var(--accent);color:var(--accent)} .btn--ghost:hover,.btn--ghost:focus-visible{background:var(--accent);color:var(--btn-text)} /* cast */ .cast__label{ text-align:center;margin-bottom:2.2rem; font-family:var(--show-font),serif; font-size:clamp(1.4rem,3.4vw,2.1rem);color:var(--parchment); } .cast__label span{color:var(--accent)} .theme--sirens .cast__label{font-family:'Fraunces',serif;font-weight:500} .cast{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.4rem;max-width:1060px;margin:0 auto; } .cast--narrow{max-width:820px} .cast--flow{display:flex;flex-wrap:wrap;justify-content:center} .cast--flow .card{flex:1 1 160px;max-width:218px} .card{text-align:center} .card__frame{ position:relative;aspect-ratio:3/3.6;border-radius:14px;overflow:hidden; background:var(--ink-2); border:1px solid var(--line); transition:border-color .25s,transform .25s,box-shadow .25s; } .card:hover .card__frame,.card:focus-within .card__frame{ border-color:var(--accent);transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px var(--accent); } .card__frame img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center; transition:opacity .35s ease; } .card__frame img.alt{opacity:0;object-fit:contain;object-position:center bottom;background:radial-gradient(ellipse at 50% 30%, var(--glow), var(--ink-2) 75%);padding:.5rem .35rem 0} .card__frame img.alt[src*="gm-logo"]{object-position:center;padding:1.4rem 1rem} .card:hover .card__frame img.alt,.card:focus-within .card__frame img.alt{opacity:1} .card:hover .card__frame img.main,.card:focus-within .card__frame img.main{opacity:0} .card__player{margin-top:.85rem;font-weight:600;font-size:.95rem;letter-spacing:.02em} .card__role{font-size:.82rem;color:var(--accent);letter-spacing:.04em;margin-top:.1rem} /* image fallbacks */ .wordmark{ font-family:'Fraunces',serif;font-weight:800;letter-spacing:.04em; color:var(--accent);line-height:1.05; } .wordmark--nav{font-size:1.05rem;color:var(--parchment);white-space:nowrap} .wordmark--hero{font-size:clamp(1.8rem,5vw,3rem);color:var(--parchment);margin-bottom:2.2rem;text-transform:uppercase} .wordmark--world{ font-family:var(--show-font),serif; font-size:clamp(2rem,5.5vw,3.4rem); text-shadow:0 0 40px var(--glow); } .wordmark--card{font-size:1.3rem;color:var(--card-accent,var(--accent))} .wordmark--footer{font-size:1.4rem;color:var(--parchment);margin-bottom:1.6rem} .card__placeholder{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem; background:radial-gradient(ellipse at 50% 35%, var(--glow), var(--ink-2) 80%); } .card__placeholder .mono{ font-family:var(--show-font),serif; font-size:2.6rem;color:var(--accent);line-height:1; } .card__placeholder svg{width:30px;height:30px;opacity:.5} .card__placeholder svg path{fill:none;stroke:var(--accent);stroke-width:1.4} /* acast player */ .player{max-width:1060px;margin:3.4rem auto 0} .player__label{ text-align:center;margin-bottom:1.4rem; font-family:var(--show-font),serif; font-size:clamp(1.2rem,2.6vw,1.6rem);color:var(--parchment); } .player__label span{color:var(--accent)} .player__frame{ border:1px solid var(--line);border-radius:16px;overflow:hidden; background:rgba(242,235,224,.04); } .player__frame iframe{display:block;width:100%;height:480px;border:0} .player__fallback{text-align:center;font-size:.82rem;color:var(--parchment-dim);margin-top:.8rem} .player__fallback a{color:var(--accent)} /* listen strip */ .listen{ margin-top:3.4rem;padding:1.6rem 2.2rem;border-radius:16px; border:1px solid var(--line); background:rgba(242,235,224,.04); display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap; width:fit-content;max-width:100%;margin-left:auto;margin-right:auto; } .listen__label{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--parchment-dim);font-weight:600;width:100%;text-align:center;margin-bottom:.2rem} .pill{ text-decoration:none;font-size:.82rem;font-weight:500; padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--line);color:var(--parchment-dim); transition:border-color .2s,color .2s,transform .2s; } .pill:hover,.pill:focus-visible{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} /* circular platform logo buttons */ .listen__icons{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;width:100%} .plat{ width:54px;height:54px;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1px solid var(--line);background:rgba(242,235,224,.04); transition:border-color .2s,transform .2s,background .2s; } .plat:hover,.plat:focus-visible{ border-color:var(--accent);transform:translateY(-3px); background:rgba(242,235,224,.08); } .plat img{ width:30px;height:30px;object-fit:contain; /* charcoal-on-white tiles (Amazon) get a rounded crop so they sit cleanly in the circle */ border-radius:7px; } /* ---------- BLOG PAGE ---------- */ .blog{ padding:9rem 1.5rem 5rem; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212,139,48,.10), transparent 65%), var(--ink); } .blog__inner{max-width:760px;margin:0 auto} .blog__eyebrow{ font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold); font-weight:600;margin-bottom:.8rem;text-align:center; } .blog__title{ font-family:'Fraunces',serif;font-weight:800; font-size:clamp(1.8rem,4.5vw,2.8rem);text-align:center;margin-bottom:3rem; } .post{padding:1.8rem 0;border-top:1px solid var(--line)} .post:last-child{border-bottom:1px solid var(--line)} .post__date{ font-size:.74rem;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);font-weight:600;margin-bottom:.5rem; } .post__title{ font-family:'Fraunces',serif;font-weight:600; font-size:1.35rem;line-height:1.25;margin-bottom:.6rem; } .post__body{color:var(--parchment-dim);font-size:.98rem} .post__h{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;color:var(--parchment);margin:1.4rem 0 .6rem} .post__quote{border-left:2px solid var(--gold);padding-left:1rem;margin:1.2rem 0;color:var(--parchment);font-style:italic} .post__body a,.post__quote a{color:var(--gold);text-decoration:underline} .post__body ul,.post__body ol,.post ul,.post ol{color:var(--parchment-dim);font-size:.98rem;margin:0 0 1rem 1.3rem} .post li{margin-bottom:.3rem} .post__figure{margin:1.6rem 0} .post__figure img{width:100%;border-radius:12px;border:1px solid var(--line)} .post__cap{margin-top:.5rem;font-size:.82rem;color:var(--parchment-dim);text-align:center;font-style:italic} .post__video{position:relative;padding-bottom:56.25%;height:0;margin:1.6rem 0;border-radius:12px;overflow:hidden;border:1px solid var(--line)} .post__video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0} .post__link{ display:inline-block;margin-top:.7rem; color:var(--gold);text-decoration:none;font-weight:500;font-size:.88rem;letter-spacing:.04em; } .post__link:hover,.post__link:focus-visible{text-decoration:underline} .blog__empty{text-align:center;color:var(--parchment-dim);padding:2rem 0} .post__title a{color:inherit;text-decoration:none;transition:color .2s} .post__title a:hover,.post__title a:focus-visible{color:var(--gold)} .post-page .post{border:0;padding:0} .post-page .post__title{font-size:clamp(1.7rem,4.5vw,2.4rem);margin-bottom:1rem} .post-page .post__body{font-size:1.05rem} .post-page .post__body + .post__body{margin-top:1rem} .back-link{ display:inline-block;margin-bottom:2.2rem; color:var(--parchment-dim);text-decoration:none;font-size:.82rem; letter-spacing:.12em;text-transform:uppercase;font-weight:500;transition:color .2s; } .back-link:hover,.back-link:focus-visible{color:var(--gold)} /* ---------- EPISODES ---------- */ .episodes{ padding:9rem 1.5rem 5rem; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212,139,48,.12), transparent 65%), var(--ink); } .episodes__inner{max-width:820px;margin:0 auto} .episodes__eyebrow{ font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold); font-weight:600;margin-bottom:.8rem;text-align:center; } .episodes__title{ font-family:'Rye',serif; font-size:clamp(1.9rem,5vw,3rem);text-align:center;margin-bottom:.7rem;color:var(--parchment); } .episodes__sub{text-align:center;color:var(--parchment-dim);margin-bottom:3rem;font-size:1rem} .ep-card{ display:block;text-decoration:none; padding:1.6rem 0;border-top:1px solid var(--line); transition:opacity .2s; } .ep-card:last-child{border-bottom:1px solid var(--line)} .ep-card:hover{opacity:.92} .ep-card__meta{ display:flex;gap:.8rem;align-items:center;flex-wrap:wrap; font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);font-weight:600;margin-bottom:.5rem; } .ep-card__num{ display:inline-block;padding:.15rem .55rem;border-radius:999px; border:1px solid var(--gold);font-size:.66rem; } .ep-card__title{ font-family:'Fraunces',serif;font-weight:600; font-size:1.3rem;line-height:1.25;margin-bottom:.5rem;color:var(--parchment); transition:color .2s; } .ep-card:hover .ep-card__title{color:var(--gold)} .ep-card__excerpt{color:var(--parchment-dim);font-size:.95rem} .ep-card__cta{ display:inline-block;margin-top:.7rem; color:var(--gold);font-weight:500;font-size:.85rem;letter-spacing:.04em; } /* ---------- SINGLE EPISODE ---------- */ .episode{ padding:9rem 1.5rem 5rem; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212,139,48,.12), transparent 65%), var(--ink); } .episode__inner{max-width:760px;margin:0 auto} .episode__back{ display:inline-block;margin-bottom:2.2rem; color:var(--parchment-dim);text-decoration:none;font-size:.82rem; letter-spacing:.12em;text-transform:uppercase;font-weight:500;transition:color .2s; } .episode__back:hover,.episode__back:focus-visible{color:var(--gold)} .episode__meta{ display:flex;gap:.8rem;align-items:center;flex-wrap:wrap; font-size:.74rem;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);font-weight:600;margin-bottom:1rem; } .episode__title{ font-family:'Fraunces',serif;font-weight:800; font-size:clamp(1.7rem,4.5vw,2.6rem);line-height:1.15;margin-bottom:1.6rem; } .episode__player{ border:1px solid var(--line);border-radius:16px;overflow:hidden; background:rgba(242,235,224,.04);margin-bottom:2rem; } .episode__player iframe{display:block;width:100%;height:180px;border:0} .episode__notes{color:var(--parchment-dim);font-size:1.02rem} .episode__notes p{margin-bottom:1rem} .episode__cw{ margin-top:2rem;padding:1.2rem 1.4rem;border-radius:12px; border:1px solid rgba(212,139,48,.3);background:rgba(212,139,48,.06); font-size:.9rem;color:var(--parchment-dim);line-height:1.5; } .episode__cw strong{color:var(--gold);display:block;margin-bottom:.4rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase} /* ---------- TEAM PAGE ---------- */ .team-hero{ position:relative;margin-top:53px;/* clears fixed nav */ overflow:hidden;border-bottom:1px solid var(--line); } .team-hero__art{ display:block;width:100%; height:clamp(300px,48vw,540px);object-fit:cover;object-position:center 30%; filter:saturate(.92) brightness(.85); } .team-hero::before{ content:'';position:absolute;inset:0;pointer-events:none; background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.96) 100%), radial-gradient(ellipse 120% 100% at 50% 100%, transparent 50%, rgba(0,0,0,.5) 100%); } .team-hero__overlay{ position:absolute;left:0;right:0;bottom:2.2rem;text-align:center;padding:0 1.5rem; } .team-hero__overlay .team__eyebrow{margin-bottom:.5rem} .team-hero__overlay .team__title{margin-bottom:0;text-shadow:0 4px 30px rgba(0,0,0,.7)} .team-hero__credit{ position:absolute;right:1rem;bottom:.7rem; font-size:.68rem;letter-spacing:.08em;color:rgba(242,235,224,.55); } .team__eyebrow{ font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold); font-weight:600;text-align:center; } .team__title{ font-family:'Fraunces',serif;font-weight:800; font-size:clamp(1.9rem,5vw,3rem);text-align:center;color:var(--parchment); } .team{ padding:4rem 1.5rem 5rem; background: radial-gradient(ellipse 90% 50% at 50% 100%, rgba(212,139,48,.07), transparent 65%), var(--ink); } .team__inner{max-width:980px;margin:0 auto} .member{ display:grid;grid-template-columns:170px 1fr;gap:1.8rem;align-items:center; padding:1.8rem;border-radius:18px; border:1px solid var(--line); background:var(--ink-2); } .member--feature{ grid-template-columns:240px 1fr;gap:2.4rem;padding:2.4rem; margin-bottom:1.6rem; border-color:rgba(212,139,48,.35); background: radial-gradient(ellipse 90% 100% at 0% 50%, rgba(212,139,48,.08), transparent 60%), var(--ink-2); box-shadow:0 16px 44px rgba(0,0,0,.35); } .team__grid{ display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:stretch; } .team__grid .member{ grid-template-columns:1fr;text-align:center;gap:1.1rem; align-content:start; } .team__grid .member__photo{max-width:180px;margin:0 auto} .member__photo img{ width:100%;aspect-ratio:1/1.08;object-fit:cover;object-position:top center; border-radius:14px;border:1px solid var(--line); } .member--feature .member__photo img{box-shadow:0 12px 30px rgba(0,0,0,.45)} .member__role{ font-size:.7rem;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);font-weight:600;margin-bottom:.35rem; } .member__name{ font-family:'Fraunces',serif;font-weight:800; font-size:clamp(1.3rem,3vw,1.8rem);margin-bottom:.7rem; } .member__bio{color:var(--parchment-dim);font-size:.95rem;margin-bottom:.6rem} .member__bio:last-child{margin-bottom:0} .member__bio--placeholder{font-style:italic;opacity:.5} @media (max-width:760px){ .team__grid{grid-template-columns:1fr} .member--feature{grid-template-columns:1fr;text-align:center;gap:1.2rem;padding:1.8rem} .member--feature .member__photo{max-width:210px;margin:0 auto} } /* ---------- HOME: THE LATEST ---------- */ .latest{ padding:0 1.5rem 6rem;background:var(--ink); } .latest__inner{max-width:var(--max);margin:0 auto} .latest__title{ font-family:'Fraunces',serif;font-weight:800; font-size:clamp(1.8rem,4.5vw,2.8rem);text-align:center;margin-bottom:2.4rem; } .latest__grid{ display:grid;grid-template-columns:1fr 1fr;gap:1.6rem; max-width:920px;margin:0 auto; } .latest-card{ padding:1.8rem;border-radius:18px; border:1px solid var(--line);background:var(--ink-2); display:flex;flex-direction:column;gap:.55rem; transition:border-color .25s,transform .25s; } .latest-card:hover{border-color:var(--gold);transform:translateY(-3px)} .latest-card__eyebrow{ font-size:.68rem;letter-spacing:.24em;text-transform:uppercase; color:var(--gold);font-weight:600; } .latest-card__title{ font-family:'Fraunces',serif;font-weight:600; font-size:1.25rem;line-height:1.25; } .latest-card__title a{color:var(--parchment);text-decoration:none;transition:color .2s} .latest-card__title a:hover,.latest-card__title a:focus-visible{color:var(--gold)} .latest-card__meta{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--parchment-dim);font-weight:500} .latest-card__excerpt{color:var(--parchment-dim);font-size:.93rem;flex:1} .latest-card__cta{ color:var(--gold);text-decoration:none;font-weight:500;font-size:.86rem;letter-spacing:.04em; } .latest-card__cta:hover,.latest-card__cta:focus-visible{text-decoration:underline} .latest-card__loading{color:var(--parchment-dim);font-size:.9rem;font-style:italic} @media (max-width:700px){.latest__grid{grid-template-columns:1fr}} /* ---------- MEDIA / PARTNERSHIP PAGE ---------- */ .media{padding:9rem 1.5rem 5rem;background: radial-gradient(ellipse 80% 50% at 50% -8%, rgba(212,139,48,.14), transparent 60%), radial-gradient(ellipse 55% 40% at 92% 30%, rgba(155,89,255,.10), transparent 60%), radial-gradient(ellipse 55% 40% at 6% 55%, rgba(127,180,255,.09), transparent 60%), radial-gradient(ellipse 60% 45% at 85% 105%, rgba(24,255,98,.06), transparent 60%), var(--ink)} .media__inner{max-width:980px;margin:0 auto} .media__mark{display:block;width:74px;height:74px;border-radius:50%;margin:0 auto 1.3rem;border:1px solid var(--line)} .media__eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:600;text-align:center;margin-bottom:.8rem} .media__title{font-family:'Fraunces',serif;font-weight:800;font-size:clamp(1.9rem,5vw,3rem);text-align:center;margin-bottom:1rem} .media__lede{max-width:640px;margin:0 auto 2rem;text-align:center;color:var(--parchment-dim);font-size:1.05rem;line-height:1.65} .media__cta-row{text-align:center;margin-bottom:3.5rem} .media h2{font-family:'Fraunces',serif;font-weight:800;font-size:clamp(1.4rem,3.4vw,2rem);text-align:center;margin:0 0 1.6rem} .offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:3.5rem} .offer{border:1px solid var(--line);border-radius:16px;background:var(--ink-2);padding:1.4rem 1.2rem} .offer__name{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.5rem} .offer__desc{color:var(--parchment);font-size:.94rem;line-height:1.55} .stats{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;padding:1.8rem 1rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(242,235,224,.03);margin-bottom:3.5rem;text-align:center} .stat__num{font-family:'Fraunces',serif;font-weight:800;font-size:1.9rem;color:var(--gold)} .stat__label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--parchment-dim);margin-top:.3rem} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:3rem} .step{border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.2rem;background:var(--ink-2);font-size:.92rem;color:var(--parchment-dim);line-height:1.55} .step b{color:var(--gold);font-family:'Fraunces',serif;font-size:1.2rem;display:block;margin-bottom:.4rem} .media__contact{text-align:center;color:var(--parchment-dim);font-size:.98rem} .media__contact a{color:var(--gold)} .note-placeholder{color:rgba(242,235,224,.45);font-style:italic;font-size:.82rem;text-align:center;margin-top:.6rem} @media(max-width:760px){.offer-grid,.steps{grid-template-columns:1fr}.stats{gap:1.6rem}} /* scroll reveal */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} /* ---------- FOOTER ---------- */ .footer{padding:4.5rem 1.5rem 3rem;text-align:center;border-top:1px solid var(--line)} .footer__logo{width:200px;margin:0 auto 1.6rem;opacity:.92} .footer__tag{font-family:'Fraunces',serif;font-size:1.25rem;margin-bottom:2rem;color:var(--parchment-dim)} .socials{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.6rem} .socials a{ text-decoration:none;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500; padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--line);color:var(--parchment-dim); transition:border-color .2s,color .2s,transform .2s; } .socials a:hover,.socials a:focus-visible{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)} .footer__legal{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,235,224,.4)} @media (max-width:880px){ .world__head{grid-template-columns:1fr;gap:2rem;text-align:center;margin-bottom:3rem} .world__logo{margin:0 auto} .world__blurb{margin:0 auto} .world__ctas{justify-content:center} .nav{padding:.7rem 1rem;gap:.8rem} .cast{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:1rem} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .hero__slide{animation:none;opacity:0} .hero__slide:nth-child(1){opacity:1;transform:none} *{transition-duration:.01ms !important} }