/* The guides on 90n.ai/guides in 90n's look. Each guide keeps its own markup and stylesheet
   (Polar Bear's design system: navy, cream, marigold, Fraunces); this file, loaded after it,
   turns it into 90n's: a night ground throughout, gold accents, cream text, Fraunces only for
   display headings and big numerals, Inter for everything else. */
:root{
  --n-night:#110A2C; --n-night-2:#1C1248; --n-night-3:#2C1A62;
  --n-joy:#FFD84A; --n-gold:#FFE7B0; --n-star:#FFF3DC; --n-muted:#B5ABD6; --n-dim:#8E84B5;
  --n-line:rgba(255,243,220,.12); --n-glass:rgba(255,255,255,.045);

  /* the guides' own tokens, remapped */
  --navy:var(--n-night);
  --black:var(--n-star);
  --off-white:var(--n-night);
  --cream-band:var(--n-night-2);
  --cream-rule:var(--n-line);
  --accent:var(--n-line);
  --grey-400:var(--n-dim); --grey-500:var(--n-dim); --grey-600:var(--n-muted);
  --ink-body:var(--n-muted);
  --marigold:var(--n-joy);
  --cta-yellow-hi:var(--n-joy); --cta-yellow-lo:#F5C93A;
  --shadow-card:none;
  --mono:var(--n90-text,'Inter',system-ui,sans-serif);
  /* the Review Season guide's names for the same things */
  --bg:var(--n-night); --fg:var(--n-star); --fg-muted:var(--n-muted); --fg-subtle:var(--n-dim);
  --border:var(--n-line); --font-mono:var(--n90-text,'Inter',system-ui,sans-serif);
}
html,body{background:var(--n-night)}
body{color:var(--n-muted)}
::selection{background:var(--n-joy);color:var(--n-night)}

/* sections: the night sky, with the 90n glow at the top of the page */
/* one ground for the whole page, as on the skill pack pages: no band where the hero ends */
html body{background:radial-gradient(60% 520px at 50% 0,rgba(255,214,140,.08) 0%,transparent 70%) no-repeat,radial-gradient(70% 600px at 85% 300px,rgba(120,60,180,.28) 0%,transparent 70%) no-repeat,linear-gradient(180deg,#110A2C 0%,#1C1248 520px,#110A2C 1100px) no-repeat,#110A2C}
.hero,.section,.review-season-guide-wrapper{background:transparent!important}
.cta,.use-ai{background:linear-gradient(180deg,var(--n-night) 0%,var(--n-night-2) 100%)}
.hero h1,.cta-title,.ua-copy h2{color:var(--n-star)}
.hero h1 .for{color:var(--n-gold);text-shadow:0 0 30px rgba(255,220,150,.35)}

/* headings and strong text that were navy on cream */
.title,.subtitle,p.body strong,.pullquote p,.subsection .sub-label,.statcard .s-num,.statcard .s-title,
.qcard .q-bubble p,.checklist .cl-title,.colo-author .a-name,.modal h3,.modal label,.takeaways-card h2,
.faq h2,.faq-item h3,.toc-close,.toc-list a:hover .toc-title{color:var(--n-star)}
.toc-title{color:var(--n-muted)}

/* cards: 90n glass instead of white */
.statcard,.qcard,.checklist,.takeaways-card{background:var(--n-glass);border:1px solid var(--n-line);box-shadow:none}
.brightline{background:var(--n-night-2);border:1px solid rgba(255,216,74,.25);box-shadow:none}
.modal{background:var(--n-night-2);border:1px solid var(--n-line)}
.modal input{background:rgba(255,255,255,.06);color:var(--n-star);border-color:var(--n-line)}
.modal .m-submit,.toc-download{background:var(--n-joy);color:var(--n-night)}
.modal .m-copy{background:transparent;color:var(--n-star);border-color:var(--n-line)}
.toc-panel{background:var(--n-night-2);border-left:1px solid var(--n-line)}
.toc-btn{background:var(--n-night-2);border:1px solid var(--n-line)}
.ua-q,.ua-a{background:var(--n-glass);color:var(--n-star);border:1px solid var(--n-line)}
.ua-q{background:rgba(255,231,176,.1);border-color:rgba(255,231,176,.3)}
.ua-a p{color:var(--n-muted)}
.ua-btn{background:rgba(255,255,255,.04);color:var(--n-star);border:1px solid rgba(255,243,220,.2)}
.ua-btn:hover{border-color:rgba(255,231,176,.5);background:rgba(255,231,176,.08)}
.colo-author .a-head img{border-color:var(--n-line)}

/* type: Fraunces for display headings and big numerals only; small titles in Inter */
.fr-mid,.fr-italic,.subtitle,.statcard .s-title,.checklist .cl-title,.colo-author .a-name,.toc-title,
.qcard .q-bubble p,.faq-item h3,.takeaways-card h2,.modal h3,.subsection .sub-label,.pullquote p,
.toc-panel-title,.toc-list-h,.fv-mid{
  font-family:var(--n90-text,'Inter',system-ui,sans-serif)!important;font-variation-settings:normal!important;font-style:normal;letter-spacing:-.01em
}
.subtitle,.statcard .s-title,.checklist .cl-title,.colo-author .a-name,.faq-item h3,.takeaways-card h2,.modal h3,.subsection .sub-label{font-weight:600}
.pullquote p{font-weight:500}
.pullquote p em,.brightline p em{font-family:var(--n90-text,'Inter',system-ui,sans-serif);font-style:italic;font-variation-settings:normal;color:var(--n-gold)}
.mono-label,.eyebrow,.kick,.s-kick,.q-kick,.bl-label,.cl-g-title,.m-eyebrow,.hero-meta,.cta-secondary,.ex-label,.s-src,.q-note,.cl-note,.a-note{letter-spacing:.18em}

/* the 90n nav itself is /90n/nav-embed.css; the guides' floating contents button sits under it */
.toc-btn{top:96px!important}
.hero{padding-top:110px}
@media (max-width:680px){
  .toc-btn{top:84px!important}
}

/* generated from the guides' own stylesheets: text that was navy or dark ink on cream */
html body .cal-name,
html body .cell.dim,
html body .checklist .cl-title,
html body .colo-author .a-name,
html body .colophon a,
html body .content-col a,
html body .content-col h3,
html body .dm-cell.month,
html body .dm-cell.title,
html body .dm-title,
html body .example-meta h5,
html body .faq h2,
html body .faq-item h3,
html body .if-bar-name,
html body .if-h,
html body .if-pair b,
html body .link-inline,
html body .matrix-heading,
html body .modal .m-copy,
html body .modal h3,
html body .modal label,
html body .modal-actions .btn-secondary,
html body .modal-close,
html body .modal-description code,
html body .modal-description.highlight,
html body .modal-input,
html body .modal-title,
html body .oh-axis span.peak,
html body .oh-level,
html body .oh-name-h,
html body .oh-stats b,
html body .pb-card-title,
html body .pb-h1,
html body .pb-h2,
html body .pb-h3,
html body .pullquote p,
html body .qcard .q-bubble p,
html body .sm-chip b,
html body .sm-chip em,
html body .statcard .s-num,
html body .statcard .s-title,
html body .subhead,
html body .subsection .sub-label,
html body .subsection-head,
html body .subtitle,
html body .takeaways-card h2,
html body .title,
html body .toc-close,
html body .toc-list a,
html body .toc-list a:hover .toc-title,
html body .toc-panel-title,
html body .ua-a,
html body .ua-a p,
html body .ua-btn,
html body .ua-q,
html body p.body em,
html body p.body strong{color:var(--n-star)}
/* and surfaces that were white or cream */
html body .cal-month,
html body .cal-month--quiet,
html body .checklist,
html body .colophon,
html body .dmatrix,
html body .erastrip,
html body .img-placeholder,
html body .informal,
html body .matrix,
html body .modal,
html body .modal .m-copy,
html body .modal input,
html body .oh-thead,
html body .org-health,
html body .qcard,
html body .qcard .q-bubble,
html body .responsibility,html body .cycle-step,
html body .skillmap,
html body .statcard,
html body .takeaways-card,
html body .toc-panel,
html body .ua-a,
html body .ua-btn,
html body .ua-q,
html body body{background:var(--n-glass);border-color:var(--n-line)}
/* and text that was translucent navy */
html body .cal-dow,
html body .cal-month--quiet,
html body .cal-month--quiet .cal-day,
html body .cal-month--quiet .cal-dow,
html body .cal-month--quiet .cal-name,
html body .cal-month--quiet .cal-name .tag,
html body .cal-month--quiet .cal-note,
html body .cell.ellipsis,
html body .colophon-inner,
html body .example-meta .label,
html body .eyebrow,
html body .if-eyebrow,
html body .if-pairs-eyebrow,
html body .if-stat-l,
html body .img-placeholder,
html body .matrix-row.ellipsis-row .cell,
html body .matrix-row.ellipsis-row .cell.dim,
html body .modal-eyebrow,
html body .modal-input-label,
html body .modal-input::placeholder,
html body .oh-axis span,
html body .oh-eyebrow,
html body .oh-pill--ghost,
html body .oh-stats,
html body .oh-th,
html body .pb-eyebrow,
html body .pb-meta,
html body .sm-eyebrow,
html body .sm-legend,
html body .toc-list-sub,
html body .toc-panel-head .label{color:var(--n-dim)}

/* type, everywhere in a guide: Fraunces for h1 and h2 headings and big numerals, Inter for the rest */
html body *:not(h1):not(h1 *):not(h2):not(h2 *):not(.num):not(.fr-numeral):not(.fv-numeral):not(.toc-num):not(.toc-list-num):not(.s-num):not(svg):not(svg *){
  font-family:var(--n90-text,'Inter',system-ui,sans-serif)!important;font-variation-settings:normal!important}
html body .takeaways-card h2,html body .faq h2{font-family:var(--n90-text,'Inter',system-ui,sans-serif)!important;font-weight:600}
/* buttons on yellow keep dark text */
html body .cta-link,html body .hero-cta-btn,html body .m-dl{color:var(--n-night)!important}

/* the inline call to action sits between a guide's sections: give it the reading column's width */
body > .cta90-inline,.review-season-guide-wrapper > .cta90-inline{width:calc(100% - 48px);max-width:720px;margin:56px auto}

/* no floating contents button or panel on the guides */
.toc-btn,.toc-overlay,.toc-panel{display:none!important}