/* Chiron Studio skin for the shared reading session at /li-ang/reading/.
   Loaded after session.css, equinox-ui.css and season-launch.css. Mirrors /li-ang/ (li-ang.css). */
html:root,
html body.chiron-reading {
  --cs-cream: #fffcf5;
  --cs-beige: #f4efe8;
  --cs-cocoa: #332726;
  --cs-cocoa-2: #54403a;
  --cs-muted: #766b65;
  --cs-line: #dcd3c9;
  --cs-font: Inter, "UNHIDDEN Sans", "Helvetica Neue", Arial, sans-serif;
  --cs-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --cs-pad: clamp(20px, 5vw, 72px);
  --page: var(--cs-cream);
  --surface: #fff;
  --surface-muted: var(--cs-beige);
  --ink: var(--cs-cocoa);
  --muted: var(--cs-muted);
  --line: rgba(51, 39, 38, .16);
  --accent: var(--cs-cocoa);
  --accent-dark: var(--cs-cocoa-2);
  --accent-wash: var(--cs-beige);
  --focus: #896a59;
  --serif: var(--cs-font);
  --sans: var(--cs-font);
}
@font-face {
  font-family: Inter;
  src: url("/assets/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
body.chiron-reading {
  background: var(--cs-cream);
  color: var(--cs-cocoa);
  font-family: var(--cs-font);
  -webkit-font-smoothing: antialiased;
}
.chiron-reading :focus-visible { outline: 2px solid #896a59; outline-offset: 3px; }
.chiron-reading h1,
.chiron-reading h2,
.chiron-reading h3 { font-family: var(--cs-font); font-weight: 450; letter-spacing: -.035em; color: var(--cs-cocoa); }
.chiron-reading .reading-label,
.chiron-reading .cs-kicker { font-family: var(--cs-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

/* Skip link */
.cs-skip { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 12px 16px; background: var(--cs-cream); color: var(--cs-cocoa); border-radius: 8px; transform: translateY(-150%); transition: transform .2s; }
.cs-skip:focus { transform: none; }

/* Navigation: the /li-ang/ bar in its cream state (no image header on this page). */
.cs-nav { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; gap: 20px; padding: 22px var(--cs-pad); background: var(--cs-cream); color: var(--cs-cocoa); box-shadow: 0 1px 0 #33272613; font-family: var(--cs-font); transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.cs-nav.is-scrolled { background: var(--cs-cream); color: var(--cs-cocoa); box-shadow: 0 1px 0 #33272613; }
.cs-logo { display: block; margin-right: auto; color: inherit; line-height: 0; }
.cs-logo svg { display: block; width: auto; height: 16px; }
.cs-nav nav { display: flex; gap: 30px; margin-right: 16px; font-size: 14px; }
.cs-nav nav a { color: inherit; text-decoration: none; opacity: .88; }
.cs-nav nav a:hover { opacity: 1; }
.chiron-reading .cs-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; border: 1px solid var(--cs-cocoa); border-radius: 8px; padding: 10px 15px; background: var(--cs-cocoa); color: var(--cs-cream); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.chiron-reading .cs-nav.is-scrolled .cs-btn { border-color: var(--cs-cocoa); background: var(--cs-cocoa); color: var(--cs-cream); }
.cs-btn:hover { opacity: .86; }


/* Intake and reading surface */
.chiron-reading .app-shell { width: min(calc(100% - 40px), 1180px); padding: clamp(118px, 15vh, 150px) 0 clamp(64px, 10vh, 110px); }
.chiron-reading .intake-panel { max-width: 780px; border: 1px solid var(--cs-line); border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -40px rgba(51,39,38,.35); }
.chiron-reading .intake-panel h1 { margin: 12px 0 14px; font-size: clamp(34px, 4.6vw, 48px); line-height: 1.04; letter-spacing: -.045em; }
.chiron-reading .intake-intro { color: var(--cs-muted); }
.chiron-reading label, .chiron-reading legend { color: var(--cs-cocoa); }
.chiron-reading .field-hint, .chiron-reading .form-status { color: var(--cs-muted); }
.chiron-reading :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { border: 1px solid var(--cs-line); border-radius: 8px; background: var(--cs-cream); color: var(--cs-cocoa); font-family: var(--cs-font); }
.chiron-reading :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { border-color: var(--cs-cocoa); outline: none; box-shadow: 0 0 0 3px rgba(137,106,89,.22); }
.chiron-reading :is(input[type=checkbox], input[type=radio]) { accent-color: var(--cs-cocoa); }
.chiron-reading .place-suggestions { border-radius: 8px; border-color: var(--cs-line); }
.chiron-reading a { color: inherit; }

/* Buttons: 8px radius, cocoa on cream, as on /li-ang/. */
.chiron-reading .button,
.chiron-reading #checkoutButton,
.chiron-reading .teaser-check-buttons button { border-radius: 8px; font-family: var(--cs-font); font-weight: 600; letter-spacing: 0; }
.chiron-reading .button-primary,
.chiron-reading #checkoutButton { border: 1px solid var(--cs-cocoa); background: var(--cs-cocoa); color: var(--cs-cream); }
.chiron-reading .button-primary:hover:not(:disabled) { border-color: var(--cs-cocoa-2); background: var(--cs-cocoa-2); }
.chiron-reading .button-secondary { border: 1px solid var(--cs-cocoa); background: transparent; color: var(--cs-cocoa); }
.chiron-reading .button-secondary:hover:not(:disabled) { background: var(--cs-beige); }

/* Reading cards pick up the warm palette through the shared tokens; soften the hard edges. */
.chiron-reading :is(.remedy-card, .remedy-card-combined, .birth-receipt, .radar-card) { border-radius: 12px; }
.chiron-reading .month-timeline-now { background: var(--cs-cocoa); }

/* Footer: the Studio footer from the homepage. */
.cs-foot { overflow: hidden; padding: clamp(70px, 12vh, 120px) var(--cs-pad) 0; background: #000; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.cs-foot-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 120px); margin-bottom: clamp(40px, 7vh, 80px); }
.cs-slogan { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -.01em; line-height: 1.05; text-transform: uppercase; }
.cs-foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cs-foot-cols nav { display: grid; align-content: start; gap: 16px; font-size: 14px; line-height: 1.3; }
.cs-foot-cols p { margin: 0 0 6px; color: #fff; font-size: 14px; }
.cs-foot-cols a { width: max-content; color: #aaa; text-decoration: none; text-transform: uppercase; transition: color .2s; }
.cs-foot-cols a:hover { color: #fff; }
.cs-foot-note { margin: 0 0 clamp(28px, 5vh, 48px); color: #8c8c8c; font-size: 12px; line-height: 1.6; }
.cs-foot-logo { overflow: hidden; aspect-ratio: 1432 / 124; color: #fff; }
.cs-foot-logo svg { display: block; width: 100%; height: auto; }

/* Analytics consent banner in the Chiron palette. */
.chiron-reading .unhidden-analytics-consent { border-radius: 12px; background: var(--cs-cocoa); color: var(--cs-cream); font-family: var(--cs-font); }
.chiron-reading .unhidden-analytics-consent button { border-radius: 8px; font-family: var(--cs-font); }

@media (max-width: 1000px) {
  .cs-nav nav { display: none; }
  .cs-foot-top { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cs-nav { padding: 14px 20px; }
  .cs-logo svg { height: 13px; }
  .cs-btn { min-height: 39px; padding: 8px 11px; font-size: 12px; }
  .chiron-reading .app-shell { padding-top: 96px; }
  .chiron-reading .app-shell { width: calc(100% - 24px); }
  .chiron-reading .intake-panel { padding: 26px 18px; border-radius: 12px; }
  .cs-foot-cols { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
}

/* Small form details */
.chiron-reading .place-suggestions:empty { display: none; }
.chiron-reading select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23332726' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }

/* Keep the Li Ang journey footer consistent with the Studio homepage. */
.cs-foot-cols { grid-template-columns:repeat(4,1fr); gap:24px; }
.cs-foot-cols .mono.dim { font-family:inherit; }
@media(max-width:700px){.cs-foot-cols { grid-template-columns:repeat(2,1fr); }}