/* ==========================================================
   ClearSkin4u — Base
   Foundational rules scoped to #cs-prof so WordPress chrome
   outside treatment HTML widgets is unaffected.
   Load after tokens.css.
========================================================== */

/* ----- Box model ----- */

#cs-prof,
#cs-prof * {
    box-sizing: border-box;
}

/* ----- Page root shell + page-scoped variables (compatibility) -----
   Existing short names (--green, --cream, …) remain on #cs-prof so
   every current selector keeps working unchanged.
   Values match tokens / the working monolith exactly.
---------------------------------------------------------- */

#cs-prof {
    /* Page-scoped aliases — do not remove until compatibility confirmed */
    --green: #29423b;
    --green-dark: #1d302b;
    --cream: #f5f1eb;
    --cream-dark: #e9e1d7;
    --gold: #9d7848;
    --text: #292b29;
    --muted: #625e58;
    --white: #ffffff;
    --border: rgba(41, 66, 59, .17);
    --shadow: 0 18px 45px rgba(34, 49, 44, .09);

    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--white);
    color: var(--text);
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* ----- Images ----- */

#cs-prof img {
    display: block;
    max-width: 100%;
}

/* ----- Links ----- */

#cs-prof a {
    color: inherit;
    text-decoration: none;
}

/* ----- Buttons (form controls inherit page font) ----- */

#cs-prof button {
    font: inherit;
}

/* ----- Headings ----- */

#cs-prof h1,
#cs-prof h2,
#cs-prof h3 {
    margin-top: 0;
    color: var(--green-dark);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
}

#cs-prof h1 {
    margin-bottom: 16px;
    font-size: clamp(41px, 10.4vw, 68px);
    line-height: .98;
    letter-spacing: -.025em;
}

#cs-prof h2 {
    margin-bottom: 13px;
    font-size: clamp(34px, 8vw, 50px);
    line-height: 1.03;
}

#cs-prof h3 {
    margin-bottom: 7px;
    font-size: 26px;
    line-height: 1.1;
}

/* ----- Paragraphs ----- */

#cs-prof p {
    margin-top: 0;
    color: var(--muted);
}

/* ----- Reduced motion ----- */

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