/* Shivonne Dubarry - the design system.

   COLOUR: one family. A clay-madder brand colour and its deep step (the
   footer's night), warm neutrals tinted from the same hue (paper, surface,
   line, muted, ink), and a quiet clay tint for the rare panel that asks for
   attention. Roughly: paper 60, ink and surface 30, brand 10. Values come
   from the look's palette (site.js) as --chime-*; the few extra steps are
   below.

   TYPE: Nunito Sans throughout, on a 1.25 scale - 0.8, 1, 1.125 (body),
   1.25, 1.56, 1.95, 2.44, 3.05rem - weights 400, 600, 700, 800.

   SPACE: 4px steps - 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 6rem.

   COMPONENTS: two buttons (primary: brand fill; secondary: a line), one
   choice (a line, the chosen one ringed in brand), one surface, one radius
   (6px), plain hairline rules, and one deep band (the footer). Scoped to
   #app so it comes after the framework's own sheet. */

@font-face { font-family: "Nunito Sans"; src: url("fonts/NunitoSans-normal.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/NunitoSans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---- tokens ---- */
html, body { margin: 0; background: #fbf5ef; }
html { scroll-padding-top: 1.5rem; }
@media (prefers-color-scheme: dark) { html, body { background: #15110d; } }
#app {
  --font: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --tint: #f8ebe3; --night: #371910; --night-ink: #fbf5ef;
  --radius: 6px; --measure: 40rem; --wide: 70rem;
  --step--1: 0.8rem; --step-0: 1rem; --body: 1.125rem; --step-1: 1.25rem; --step-2: 1.56rem; --step-3: 1.95rem; --step-4: 2.44rem; --step-5: 3.05rem;
  min-height: 100vh;
}
@media (prefers-color-scheme: dark) { #app { --tint: #291d17; --night: #0d0806; --night-ink: #f1eae3; } }

/* ---- the page ---- */
#app.chime-look { font-family: var(--font); font-size: var(--step-0); color: var(--chime-ink); }
#app .chime-app { max-width: var(--wide); padding: 0 clamp(1rem, 4vw, 2rem); gap: 0; }
#app .chime-stack { padding-block: 3rem 5rem; }
#app .chime-screen { gap: 6rem; }
#app .chime-text { overflow: visible; white-space: normal; }
#app .chime-divider { border: 0; height: 1px; background: var(--chime-edge); margin: 0; }

/* ---- type ---- */
#app .MastheadWords { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--chime-ink); }
#app .Headline, #app .PageTitle { font-size: clamp(var(--step-4), 5vw, var(--step-5)); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
#app .SectionTitle { font-size: clamp(var(--step-3), 3.5vw, var(--step-4)); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; max-width: 40rem; }
#app .Subhead, #app .StepTitle { font-size: var(--step-1); font-weight: 700; line-height: 1.3; }
#app .Lead { font-size: var(--step-1); line-height: 1.6; color: var(--chime-ink-soft); max-width: 36rem; }
#app .Body { font-size: var(--body); line-height: 1.75; max-width: var(--measure); }
#app .Kicker, #app .FooterLabel, #app .SummaryLabel, #app .Discipline { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chime-ink-soft); }
#app .Disciplines, #app .SmallPrint, #app .Footer { font-size: var(--step--1); line-height: 1.55; color: var(--chime-ink-soft); }
#app .SmallPrint { max-width: var(--measure); }

/* ---- the two buttons ---- */
#app .chime-pressable { border-radius: var(--radius); }
#app .chime-pressable.PrimaryButton {
  background: var(--chime-accent); color: var(--chime-ground); border: 1px solid var(--chime-accent);
  min-height: 2.75rem; padding: 0.5rem 1.25rem; font-size: var(--step-0); font-weight: 700; }
#app .chime-pressable.PrimaryButton:hover { background: var(--chime-accent-2); border-color: var(--chime-accent-2); }
#app .chime-pressable.PrimaryButton .Face, #app .chime-pressable.PrimaryButton .Reason { color: inherit; }
#app .chime-pressable.PrimaryButton .Reason { font-size: var(--step--1); font-weight: 400; }
#app .chime-pressable.PrimaryButton[aria-disabled="true"] { opacity: 0.7; }
#app .chime-pressable.SecondaryButton, #app .chime-hyperlink.SecondaryButton {
  background: transparent; color: var(--chime-ink); border: 1px solid var(--chime-edge); border-radius: var(--radius);
  min-height: 2.75rem; padding: 0.5rem 1.25rem; font-size: var(--step-0); font-weight: 600; text-decoration: none; align-items: center; }
#app .chime-pressable.SecondaryButton:hover, #app .chime-hyperlink.SecondaryButton:hover { border-color: var(--chime-ink); }
#app .chime-pressable:focus-visible, #app .chime-hyperlink:focus-visible { outline: 2px solid var(--chime-accent); outline-offset: 2px; }

/* ---- the choice: a line, the chosen one ringed in brand ---- */
#app .chime-pressable.Choice { background: transparent; color: var(--chime-ink); border: 1px solid var(--chime-edge); min-height: 2.75rem; padding: 0.5rem 1rem; font-weight: 600; }
#app .chime-pressable.Choice:hover { border-color: var(--chime-ink); }
#app .chime-pressable.Choice.chime-current { border: 2px solid var(--chime-accent); padding: calc(0.5rem - 1px) calc(1rem - 1px); background: var(--tint); cursor: default; }
#app .chime-pressable.Choice[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; border-style: dashed; }

/* ---- the header ---- */
#app .Header { gap: 0; padding-top: 2rem; }
#app .MastRow { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; padding-bottom: 1.5rem; }
#app .Brand { gap: 0.25rem; }
#app .chime-pressable.Masthead { background: none; border: 0; padding: 0; min-height: 0; color: inherit; text-align: left; border-radius: 0; }
#app .chime-pressable.Masthead[aria-disabled="true"] { opacity: 1; cursor: default; }
#app .Nav { gap: 0.5rem 1.5rem; align-items: center; flex-wrap: wrap; }
#app .chime-hyperlink.NavLink { color: var(--chime-ink); text-decoration: none; min-height: 2.75rem; }
#app .NavWords { font-weight: 600; }
#app .chime-hyperlink.NavLink:hover .NavWords { color: var(--chime-accent); }
#app .Nav .chime-pressable.PrimaryButton[aria-disabled="true"] { display: none; }

/* ---- sections ---- */
#app .Section { gap: 2rem; }
#app .SectionHead { gap: 0.5rem; }

/* the opening */
#app .chime-surface.Hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 0; background: none; }
#app .HeroText { gap: 1.5rem; }
#app .Actions { gap: 0.75rem; flex-wrap: wrap; }
#app .HeroImage, #app .Portrait { width: 100%; object-fit: cover; border-radius: var(--radius); background: var(--chime-raised); display: block; }
#app .HeroImage { aspect-ratio: 4 / 3; }
@media (max-width: 760px) { #app .chime-surface.Hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* who she works with */
#app .Areas { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)) !important; }
#app .chime-surface.Area { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; background: var(--chime-raised); border-radius: var(--radius); }
#app .AreaName { font-size: var(--step-1); font-weight: 700; line-height: 1.3; }
#app .AreaText { font-size: var(--step-0); line-height: 1.6; color: var(--chime-ink-soft); }

/* about */
#app .chime-surface.AboutGrid { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, var(--measure)); gap: 3rem; padding: 0; align-items: start; background: none; }
#app .Portrait { aspect-ratio: 4 / 5; }
#app .AboutText { gap: 1.25rem; }
#app .Disciplines.Row { gap: 0 1rem; flex-wrap: wrap; }
#app .AboutText .Subhead { margin-top: 0.75rem; }
@media (max-width: 760px) { #app .chime-surface.AboutGrid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } #app .Portrait { max-width: 16rem; } }

/* how she works */
#app .Steps { gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
#app .Step { flex: 1 1 14rem; gap: 0.5rem; padding-top: 1rem; border-top: 2px solid var(--chime-accent); }
#app .StepNumber { font-size: var(--step-2); font-weight: 800; color: var(--chime-accent); line-height: 1; }
#app .StepName { font-size: var(--step-1); font-weight: 700; }
#app .StepText { font-size: var(--step-0); line-height: 1.6; color: var(--chime-ink-soft); }

/* fees */
#app .Fees { gap: 0; max-width: 48rem; }
#app .Fee { gap: 0.5rem 2rem; align-items: baseline; padding: 1.25rem 0; border-top: 1px solid var(--chime-edge); flex-wrap: wrap; }
#app .Fee:last-child { border-bottom: 1px solid var(--chime-edge); }
#app .FeeWords { gap: 0.25rem; min-width: 14rem; }
#app .FeeName { font-size: var(--step-1); font-weight: 700; }
#app .FeeText { font-size: var(--step-0); color: var(--chime-ink-soft); }
#app .FeeLength { color: var(--chime-ink-soft); }
#app .FeeAmount { font-weight: 700; }

/* questions */
#app .Questions { gap: 0; max-width: 48rem; }
#app .QuestionItem { gap: 0; border-top: 1px solid var(--chime-edge); }
#app .QuestionItem:last-child { border-bottom: 1px solid var(--chime-edge); }
#app .chime-pressable.Question { width: 100%; justify-content: space-between; gap: 1.5rem; background: none; border: 0; border-radius: 0; padding: 1.1rem 0; min-height: 3rem; color: var(--chime-ink); }
#app .chime-pressable.Question:hover .QuestionWords { color: var(--chime-accent); }
#app .QuestionWords { font-size: var(--step-1); font-weight: 600; line-height: 1.4; }
#app .QuestionMark { font-size: var(--step-2); font-weight: 400; line-height: 1; color: var(--chime-accent); flex: none; }
#app .Answer { font-size: var(--body); line-height: 1.7; color: var(--chime-ink-soft); padding: 0 0 1.25rem; max-width: var(--measure); }

/* the closing invitation */
#app .chime-surface.Invitation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: 2.5rem; background: var(--tint); border-radius: var(--radius); }
#app .InvitationText { gap: 0.5rem; flex: 1 1 20rem; }
#app .InvitationTitle { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }

/* ---- booking ---- */
#app .Booking { gap: 2rem; }
#app .BookingHead { gap: 0.75rem; }
#app .Stepper { gap: 0.5rem; flex-wrap: wrap; }
#app .StepMark { flex: 1 1 8rem; padding-top: 0.6rem; border-top: 3px solid var(--chime-edge); font-size: var(--step--1); font-weight: 700; color: var(--chime-ink-soft); }
#app .StepMark.Done { border-top-color: var(--chime-accent); }
#app .StepMark.Now { border-top-color: var(--chime-accent); color: var(--chime-ink); }
#app .chime-surface.BookingGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: 3rem; align-items: start; padding: 0; background: none; }
@media (max-width: 820px) { #app .chime-surface.BookingGrid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
#app .BookingMain { gap: 2rem; }
#app .StepBody { gap: 1.25rem; }
#app .StepActions { gap: 0.75rem; flex-wrap: wrap; align-items: flex-start; padding-top: 1.5rem; border-top: 1px solid var(--chime-edge); }
#app .BookingAside { gap: 1rem; padding: 1.5rem; background: var(--chime-raised); border-radius: var(--radius); }

#app .Choices { gap: 0.75rem; }
#app .chime-pressable.SessionChoice { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 1rem 1.25rem; }
#app .chime-pressable.SessionChoice.chime-current { padding: calc(1rem - 1px) calc(1.25rem - 1px); }
#app .ChoiceName { font-size: var(--step-1); font-weight: 700; }
#app .ChoiceDetail { font-size: var(--step-0); font-weight: 400; color: var(--chime-ink-soft); }

#app .Days { gap: 0.5rem; }
#app .chime-pressable.DayChoice { flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0.5rem 0.25rem; text-align: center; }
#app .chime-pressable.DayChoice.chime-current { padding: calc(0.5rem - 1px) calc(0.25rem - 1px); }
#app .DayName, #app .DayMonth { font-size: var(--step--1); font-weight: 600; color: var(--chime-ink-soft); }
#app .DayNumber { font-size: var(--step-1); font-weight: 800; line-height: 1.2; }
#app .DayTimes { gap: 0.75rem; }
#app .DaysAndTimes, #app .Trouble { gap: 1rem; align-items: flex-start; }
#app .DaysAndTimes { align-items: stretch; }
#app .Problem { color: var(--chime-warn); font-weight: 600; }
#app .Times { gap: 0.5rem; flex-wrap: wrap; }
#app .chime-pressable.TimeChoice { min-width: 6rem; justify-content: center; }

#app .Details { gap: 1.25rem; max-width: 30rem; }
#app .chime-field-holder { gap: 0.35rem; }
#app .chime-field-label, #app .FieldLabel { font-size: var(--step--1); font-weight: 700; color: var(--chime-ink); }
#app .chime-field { border-radius: var(--radius); background: var(--chime-ground); border-color: var(--chime-edge); min-height: 2.75rem; }

#app .Summary { gap: 0; }
#app .SummaryRow { gap: 0.15rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--chime-edge); flex-wrap: wrap; align-items: baseline; }
#app .SummaryRow:first-child { border-top: 0; padding-top: 0; }
#app .SummaryLabel { flex: 0 0 5rem; }
#app .SummaryValue { flex: 1 1 10rem; font-weight: 600; }
#app .Summary.Check { max-width: 34rem; }
#app .CheckStep { gap: 1.5rem; }
#app .chime-surface.Notice { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.25rem 1.5rem; background: var(--tint); border-radius: var(--radius); }
#app .NoticeTitle { font-weight: 700; }

/* ---- the footer: the page's one deep band ---- */
#app .FooterBlock { gap: 2rem; padding-block: 3rem; background: var(--night); color: var(--night-ink); box-shadow: 0 0 0 100vmax var(--night); clip-path: inset(0 -100vmax); }
#app .FooterBlock .Footer, #app .FooterBlock .FooterLabel { color: var(--night-ink); opacity: 0.8; }
#app .FooterGrid { gap: 2rem 3rem; flex-wrap: wrap; align-items: flex-start; }
#app .FooterColumn { flex: 1 1 14rem; gap: 0.5rem; }
#app .FooterName { font-size: var(--step-1); font-weight: 800; color: var(--night-ink); }
#app .chime-hyperlink.FooterLink { color: var(--night-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
#app .CrisisNote { gap: 0.35rem; padding: 1rem 1.25rem; border: 1px solid color-mix(in srgb, var(--night-ink) 30%, transparent); border-radius: var(--radius); max-width: 48rem; }
#app .FooterBlock .Footer.Crisis { opacity: 1; font-size: var(--step-0); }