/* Shared styles for the generated content pages (skill pages and the starter
   pack). Tokens and header/footer/badge components mirror the landing page
   (server/landing/index.html); keep the two in step. Built pages link this
   file with a content-hash query, so edits reach browsers despite the 7-day
   /landing-assets cache. */

@font-face { font-family: 'Cormorant Fallback'; src: local('Georgia'); size-adjust: 88.5%; }
@font-face { font-family: 'Cormorant Fallback Android'; src: local('Noto Serif'), local('NotoSerif'); size-adjust: 81.8%; }
@font-face { font-family: 'Cinzel Fallback'; font-weight: 700; src: local('Georgia Bold'), local('Georgia-Bold'); size-adjust: 108.9%; }
@font-face { font-family: 'Cinzel Fallback Android'; font-weight: 700; src: local('Noto Serif Bold'), local('NotoSerif-Bold'); size-adjust: 110.7%; }

:root {
  --ink: #0a0b1f;
  --ink-raised: #10112b;
  --line: rgba(204, 172, 104, 0.2);
  --line-strong: rgba(204, 172, 104, 0.42);
  --gold: #ccac68;
  --gold-soft: #e3cc92;
  --gold-bright: #f3c54d;
  --parchment: #efe7d4;
  --text: #d3cde6;
  --muted: #a39fc4;
  --display: 'Cinzel', 'Cinzel Fallback', 'Cinzel Fallback Android', Georgia, serif;
  --serif: 'Cormorant Garamond', 'Cormorant Fallback', 'Cormorant Fallback Android', Georgia, serif;
  --badge-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gutter: 16px;
  --max: 1200px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (min-width: 640px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, iframe { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid rgba(243, 197, 77, 0.9); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 20;
  padding: 10px 16px; border-radius: 6px;
  background: var(--parchment); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1rem; text-decoration: none;
}
.skip-link:focus { top: 12px; }

main { display: block; container: page / inline-size; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  color: var(--parchment);
  letter-spacing: 0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Header and footer: same as the landing page. */
.site-header {
  max-width: var(--max); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--parchment); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em;
}
.brand img { width: 36px; height: 36px; }
.header-nav { display: flex; align-items: center; gap: 8px 20px; }
.header-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.125rem;
}
/* Narrow phones: the breadcrumb under the header already links the starter pack. */
@media (max-width: 479px) { .header-link { display: none; } }
.header-login {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  color: var(--parchment); text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em;
}
.site-footer { border-top: 1px solid var(--line); padding: 36px 0 calc(40px + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; gap: 20px; }
.footer-note { margin: 4px 0 0; color: var(--muted); font-size: 1.0625rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.footer-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 2px; color: var(--muted); text-decoration: none; font-size: 1.0625rem;
}
.legal { margin: 20px 0 0; color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1fr auto; align-items: center; } }

/* Store badges and links: same as the landing page. */
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 20px 8px 16px;
  border-radius: 10px; background: #000; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff;
  text-decoration: none; font-family: var(--badge-font);
}
.store-badge svg { width: 26px; height: 26px; fill: currentColor; flex-shrink: 0; }
.store-badge .badge-lines { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.store-badge .badge-small { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; }
.store-badge .badge-big { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
/* Everyone sees both stores; Android lists Google Play first. */
.is-android .store-badge--play { order: -1; }
/* Narrow screens: the pair shares a row at equal widths, or stacks full width when it can't fit. */
@media (max-width: 599px) {
  .store-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); width: 100%; container-type: inline-size; }
  /* Enlarged text on a tiny screen shrinks the store name rather than spilling past the badge. */
  .store-badge .badge-big { font-size: min(1.25rem, 9cqi); }
  .store-badge { justify-content: center; padding-inline: 12px; }
}
.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--gold-soft); font-weight: 600; font-size: 1.1875rem;
  text-decoration: underline; text-decoration-color: rgba(227, 204, 146, 0.45);
  text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Breadcrumbs */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 1.0625rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.crumbs [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }

/* Page layout: title and article on the left, the skill card pinned beside
   them on wide screens; on phones the card follows the title. */
.page-layout { display: grid; gap: 32px; padding: 16px 0 24px; }
.page-layout > * { min-width: 0; }
.page-intro { container-type: inline-size; }
.nowrap { white-space: nowrap; }

.kicker {
  margin: 0 0 12px;
  font-family: var(--display); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.page-intro h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  font-size: min(clamp(2.25rem, 1.5rem + 3vw, 3.75rem), 14cqi);
  line-height: 1.06;
}
.dek { margin: 18px 0 0; max-width: 30em; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem); line-height: 1.45; }
.byline { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.35; }
.byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 1px var(--line-strong); }
.byline strong { color: var(--parchment); font-weight: 600; }
@container page (min-width: 56rem) {
  /* A fixed card column: an auto track would size to the card's unwrapped text. */
  .page-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "intro card" "article card";
    column-gap: 64px;
    row-gap: 40px;
    padding-top: 32px;
  }
  .page-intro { grid-area: intro; }
  .page-layout > .skill-card { grid-area: card; align-self: start; }
  .page-layout > .prose { grid-area: article; }
}

/* The card stays beside the article only where the whole card fits on screen
   (the tallest is ~805px); on shorter laptops it scrolls with the page. */
@media (min-height: 54rem) {
  @container page (min-width: 56rem) {
    .page-layout > .skill-card { position: sticky; top: 24px; }
  }
}

/* Skill card: the CaliQuest take on the starter pack cards. */
.skill-card {
  position: relative; width: min(100%, 380px); padding: 18px 18px 16px; border-radius: 20px; container-type: inline-size;
  background: radial-gradient(420px 260px at 50% 0%, rgba(120, 88, 190, 0.28), transparent 70%),
    linear-gradient(165deg, #1d1b3c 0%, #111230 55%, #181637 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 160, 0.08), 0 0 0 1px rgba(204, 172, 104, 0.6),
    0 0 0 5px #0d0e24, 0 0 0 6px rgba(204, 172, 104, 0.35), 0 30px 60px -20px rgba(0, 0, 0, 0.85);
}
.skill-card::before, .skill-card::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid #d4af37; pointer-events: none; }
.skill-card::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.skill-card::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.card-kicker { margin: 2px 6px 0; font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 2px 6px 12px; }
.card-name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.75rem; font-size: min(1.75rem, 11cqi); line-height: 1.15; color: var(--parchment); }
.card-ranks {
  font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--parchment); border: 1px solid rgba(204, 172, 104, 0.55); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.card-art { display: block; width: 100%; height: auto; aspect-ratio: 900 / 551; border-radius: 10px; background: #e9dcc0; box-shadow: 0 0 0 1px rgba(204, 172, 104, 0.55); }
.card-moves { margin: 14px 6px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.card-moves h3 { font-size: 1.0625rem; font-size: min(1.0625rem, 7.5cqi); color: var(--gold-soft); letter-spacing: 0.03em; }
.card-moves p { margin: 2px 0 0; font-size: 1.0625rem; line-height: 1.38; }
.card-ladder-title { margin: 16px 6px 0; font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.card-ladder-title + .ladder { margin-top: 8px; }
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr)); gap: 12px 6px; margin: 14px 6px 0; padding: 0; list-style: none; }
.ladder li { position: relative; padding-top: 10px; }
.ladder li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #9d6f20, #d4af37); opacity: var(--o, 1);
}
.ladder b { display: block; font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ladder span { font-weight: 600; font-size: 1.0625rem; color: var(--parchment); }
.card-flavor { margin: 14px 6px 0; padding-top: 12px; border-top: 1px solid var(--line); font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: var(--text); }
.card-credit { margin: 8px 6px 0; font-size: 0.875rem; color: var(--muted); text-align: right; }

/* Article body */
/* The article, card and day cards are size containers: their headings cap to
   them (cqi) so long words like "Foundational" stay whole at 200% text. */
.prose { max-width: 40rem; padding-bottom: 24px; container-type: inline-size; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); font-size: min(clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem), 11cqi); line-height: 1.2; }
.prose h3 { margin-top: 1.8em; font-size: 1.3125rem; font-size: min(1.3125rem, 10cqi); line-height: 1.25; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose > h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 1.25rem; line-height: 1.6; }
.prose strong { color: var(--parchment); font-weight: 600; }
.prose a { color: var(--gold-soft); text-decoration-color: rgba(227, 204, 146, 0.45); text-underline-offset: 4px; }
/* Padding lifts a link-only line to a 44px tap target without moving the text. */
.prose .link-line a { display: inline-block; padding: 6px 0; margin: -6px 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--gold); }
.prose figure { margin: 1.6em 0; }
.prose figure > img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px var(--line-strong); background: #1a1a2a; }
.prose figcaption { margin-top: 8px; font-size: 1rem; color: var(--muted); }
.signoff { margin-top: 2em; color: var(--muted); font-size: 1.125rem; }
.signoff strong { display: block; font-family: var(--display); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }

/* YouTube: a thumbnail until tapped, so pages load no player scripts. */
.video { margin: 1.6em 0; }
.video-frame { position: relative; display: block; overflow: hidden; border-radius: 10px; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px var(--line-strong); }
.video--short .video-frame { width: min(100%, 320px); aspect-ratio: 9 / 16; }
.video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(10, 11, 31, 0.82); box-shadow: 0 0 0 1px rgba(255, 217, 122, 0.72), 0 10px 26px rgba(0, 0, 0, 0.5);
}
.video-play::after {
  content: ""; position: absolute; left: 26px; top: 21px;
  border-left: 18px solid var(--gold-bright); border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.video figcaption { margin-top: 8px; font-size: 1rem; color: var(--muted); }

/* Call-to-action panel */
.app-panel {
  margin: 40px 0 0; padding: 28px 24px; border-radius: 16px; container-type: inline-size;
  background: linear-gradient(180deg, rgba(23, 22, 58, 0.72), rgba(14, 15, 38, 0.72));
  box-shadow: 0 0 0 1px var(--line-strong);
}
.app-panel h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); font-size: min(clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem), 11cqi); line-height: 1.2; }
.app-panel p { margin: 10px 0 0; max-width: 34em; }
.app-panel .facts-line { color: var(--gold-soft); font-weight: 600; font-size: 1.125rem; }
.paths { display: grid; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 1.125rem; }
.paths b { font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-right: 8px; }
.paths a { color: var(--gold-soft); text-underline-offset: 4px; }
.app-panel .cta { margin-top: 22px; }
.app-panel:last-child { margin-bottom: 72px; }

/* Previous / next in the series */
.series-nav { display: grid; gap: 12px; margin: 40px 0 72px; padding-top: 24px; border-top: 1px solid var(--line); }
.series-nav a { display: grid; gap: 2px; min-height: 44px; padding: 8px 0; text-decoration: none; }
.series-nav small { font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.series-nav span { color: var(--parchment); font-weight: 600; font-size: 1.1875rem; }
.series-nav .next { text-align: right; }
@container page (min-width: 40rem) { .series-nav { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.series-nav .all { justify-self: center; color: var(--gold-soft); font-weight: 600; font-size: 1.125rem; text-decoration: underline; text-underline-offset: 5px; display: inline-flex; align-items: center; }

/* Starter pack hub */
.hub-hero { padding: 16px 0 40px; max-width: 46rem; }
.hub-hero h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); font-size: min(clamp(2.25rem, 1.5rem + 3vw, 3.75rem), 12.5cqi); line-height: 1.06; }
.days { display: grid; gap: 20px; margin: 0 0 72px; padding: 0; list-style: none; }
@container page (min-width: 40rem) { .days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (min-width: 64rem) {
  .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Ten days on three columns: the final day takes the whole last row. */
  .days > li:last-child { grid-column: 1 / -1; }
  .days > li:last-child .day-card { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto; align-items: center; }
  .days > li:last-child .day-body { padding: 24px 32px; }
}
.day-card {
  display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 22, 58, 0.72), rgba(14, 15, 38, 0.72));
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow 160ms ease, transform 160ms var(--ease-out);
}
.day-card img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 551; background: #e9dcc0; }
.day-card .day-body { padding: 16px 18px 20px; container-type: inline-size; }
.day-card small { display: block; font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.day-card strong { display: block; margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 1.1875rem; font-size: min(1.1875rem, 8cqi); line-height: 1.25; color: var(--parchment); }
.day-card span { display: block; margin-top: 6px; font-size: 1.0625rem; line-height: 1.4; color: var(--text); }

@media (hover: hover) and (pointer: fine) {
  .header-login:hover { border-color: var(--gold-soft); }
  .header-link:hover, .crumbs a:hover, .footer-links a:hover { color: var(--parchment); }
  .store-badge:hover { border-color: rgba(255, 255, 255, 0.7); }
  .text-link:hover, .series-nav a:hover span { color: var(--parchment); }
  .day-card:hover { box-shadow: 0 0 0 1px var(--gold-soft); transform: translateY(-2px); }
  .video-frame:hover .video-play { box-shadow: 0 0 0 2px var(--gold-bright), 0 10px 26px rgba(0, 0, 0, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .day-card { transition: none; }
}