/* ==========================================================================
   Landing page: one block per subject, rendered from data/catalog.js.

   Styled to match the Thoth hub page (jshiriyev.github.io) so this site reads
   as one of its sub-pages: blue/gold on warm paper, a gradient hero, gold
   section rules and lifting cards.

   Everything lives here rather than in base.css, because base.css is shared
   with the cheat sheets and they must keep their own look. This file loads
   after base.css, so the token overrides below win on the landing page only.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Thoth palette */
  --blue:       #1B6CA8;
  --blue-dark:  #145289;
  --gold:       #C9A84C;
  --gold-light: #e8c96a;
  --gold-ink:   #6b5210;

  /* base.css tokens, repainted */
  --bg:            #FAF8F4;
  --bg-soft:       #F5F1E8;
  --bg-code:       #F2EFE7;
  --surface:       #FFFFFF;
  --border:        #E5E0D8;
  --border-strong: #CFC8BB;
  --text:          #1E1E2E;
  --text-soft:     #6B7280;
  --text-faint:    #8A8F9A;
  --accent:        #1B6CA8;
  --accent-soft:   #E8F1FA;

  --radius:   14px;
  --radius-s: 10px;
  --maxw:     1120px;
  --gutter:   24px;
  --content:  1072px;         /* maxw - 2 * gutter */
  --nav-h:    64px;

  /* Side padding that lines a full-width band's content up with .wrap.
     A percentage here resolves against the containing block (the body), so
     unlike 50vw it excludes the scrollbar and cannot overflow. */
  --bleed: max(var(--gutter), calc((100% - var(--content)) / 2));

  --nav-bg:     rgba(255, 255, 255, .92);
  --footer-bg:  #1E1E2E;
  --footer-fg:  rgba(255, 255, 255, .68);
  --notice-bg:  #FFF8E6;
  --card-hover: #F5F1E8;

  --shadow:       0 1px 2px rgba(30, 30, 46, .04), 0 4px 16px rgba(30, 30, 46, .06);
  --shadow-hover: 0 2px 4px rgba(30, 30, 46, .05), 0 12px 28px rgba(30, 30, 46, .10);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-glyph: "Segoe UI Historic", "Noto Sans Egyptian Hieroglyphs", "Aegyptus", serif;
}

/* Dark theme: follow the OS unless the page is pinned to light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --blue:       #6FA8DC;
    --blue-dark:  #8FC0EA;
    --gold:       #D8B85C;
    --gold-light: #EED98A;
    --gold-ink:   #EED98A;

    --bg:            #14161F;
    --bg-soft:       #1A1D28;
    --bg-code:       #1E2230;
    --surface:       #1C1F2B;
    --border:        #2C3040;
    --border-strong: #3D4356;
    --text:          #ECEAE4;
    --text-soft:     #A6ACBA;
    --text-faint:    #858B99;
    --accent:        #6FA8DC;
    --accent-soft:   #1C2C3E;

    --nav-bg:     rgba(20, 22, 31, .92);
    --footer-bg:  #0F1118;
    --footer-fg:  rgba(255, 255, 255, .62);
    --notice-bg:  #2A2413;
    --card-hover: #222634;

    --shadow:       0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .28);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .40), 0 12px 28px rgba(0, 0, 0, .45);
  }
}

/* Explicit dark, via the theme toggle. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --blue:       #6FA8DC;
  --blue-dark:  #8FC0EA;
  --gold:       #D8B85C;
  --gold-light: #EED98A;
  --gold-ink:   #EED98A;

  --bg:            #14161F;
  --bg-soft:       #1A1D28;
  --bg-code:       #1E2230;
  --surface:       #1C1F2B;
  --border:        #2C3040;
  --border-strong: #3D4356;
  --text:          #ECEAE4;
  --text-soft:     #A6ACBA;
  --text-faint:    #858B99;
  --accent:        #6FA8DC;
  --accent-soft:   #1C2C3E;

  --nav-bg:     rgba(20, 22, 31, .92);
  --footer-bg:  #0F1118;
  --footer-fg:  rgba(255, 255, 255, .62);
  --notice-bg:  #2A2413;
  --card-hover: #222634;

  --shadow:       0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .28);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .40), 0 12px 28px rgba(0, 0, 0, .45);
}

html { scroll-behavior: smooth; }

body {
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a:hover { color: var(--blue-dark); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.wrap { max-width: var(--maxw); padding: 0 var(--gutter); }

/* --- Top bar -------------------------------------------------------------- */

.topbar {
  height: var(--nav-h);
  gap: 8px;
  padding: 0 var(--bleed);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  z-index: 100;
}

.topbar__home {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.topbar__home span { color: var(--gold); }
.topbar__home:hover { color: var(--text); }

/* Nav pills, in place of base.css's outlined buttons. */
.topbar .btn {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: .95rem;
  font-weight: 600;
  transition: color .15s, background-color .15s;
}
.topbar .btn:hover {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 88px var(--bleed) 68px;
  background: linear-gradient(135deg, #336DAA 0%, #1D4070 100%);
  color: #fff;
  text-align: center;
}

/* Decorative watermark, carried over from the hub page. */
.hero::before {
  content: "\13080";
  position: absolute;
  top: -.095em;
  right: 4%;
  font-family: var(--font-glyph);
  font-size: clamp(9rem, 13vw, 15rem);
  font-style: normal;
  line-height: 1;
  color: #fff;
  opacity: .08;
  pointer-events: none;
  user-select: none;
}

.hero > * { position: relative; }

.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.025em;
}
.hero h1 .accent { display: block; margin-top: .4em; color: var(--gold-light); }

.hero p {
  margin: 0 auto;
  max-width: 580px;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, .86);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 2.6rem;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.stat__n {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.stat__l {
  font-size: .78rem;
  color: rgba(255, 255, 255, .72);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* --- Subject sections ----------------------------------------------------- */

.subject { position: relative; padding: 56px 0; }

/* The hub page's gradient rule, as a divider above every subject. */
.subject::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 15%, var(--gold) 50%, var(--border) 85%, transparent);
}

.subject__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.subject__n {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

.subject__head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.015em;
}
.subject__head h2::before {
  content: "";
  width: 6px;
  height: 1.05em;
  border-radius: 3px;
  background: var(--gold);
  flex-shrink: 0;
}

.subject__blurb {
  margin: 10px 0 0;
  max-width: 720px;
  color: var(--text-soft);
  font-size: 1.05rem;
}

/* --- Sheet cards ---------------------------------------------------------- */

.sheets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 20px;
  margin-top: 28px;
}

.sheet-card {
  position: relative;
  display: block;
  padding: 22px 22px 22px 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: inherit;
  transition: transform .18s, box-shadow .18s, background-color .15s;
}
.sheet-card::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 30px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.sheet-card:hover {
  transform: translateY(-2px);
  background: var(--card-hover);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

.sheet-card__t { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
/* Non-breaking space, so the arrow never wraps onto a line of its own. */
.sheet-card__t::after { content: "\00A0\2197"; color: var(--text-faint); font-weight: 400; }
.sheet-card:hover .sheet-card__t { color: var(--blue); }

.sheet-card__b { margin: 8px 0 0; color: var(--text-soft); font-size: .95rem; line-height: 1.5; }

/* --- Empty subject -------------------------------------------------------- */

.soon {
  margin: 28px 0 0;
  padding: 18px 20px;
  border: 2px dashed var(--gold);
  border-radius: 12px;
  background: var(--notice-bg);
  color: var(--gold-ink);
  font-size: 1rem;
}
.soon code {
  padding: 1px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold-ink);
}

/* --- Badges --------------------------------------------------------------- */

.tag {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-soft);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.tag--accent { border-color: transparent; background: var(--accent-soft); color: var(--blue-dark); }

/* --- Footer --------------------------------------------------------------- */

.foot {
  max-width: none;
  margin: 0;
  padding: 40px var(--bleed);
  border-top: 0;
  background: var(--footer-bg);
  color: var(--footer-fg);
  font-size: .95rem;
  text-align: center;
}
.foot a { color: var(--gold-light); }
.foot a:hover { color: #fff; text-decoration: underline; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 720px) {
  .hero { padding-top: 72px; padding-bottom: 64px; }
  .subject { padding: 40px 0; }
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .topbar { gap: 0; }
  .topbar__home { font-size: 1.1rem; }
  .topbar .btn { padding: 7px 9px; font-size: .88rem; }
  .sheets { grid-template-columns: 1fr; }
  .sheet-card { padding: 18px 18px 18px 36px; }
  .sheet-card::before { left: 18px; top: 26px; }
}