/* ==========================================================================
   The Hormone Reset Protocol
   Design system, shared shell (announcement, header, footer) and homepage hero
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /*
     * Cream and Gold, chosen by the client on 2026-08-06 from /color-preview.
     * Taken from her book cover so the site and the playbook read as one brand.
     *
     * The names are deliberately palette-neutral. They were named after teal and
     * sage, which stopped describing anything the moment the palette moved to
     * brown and gold. Naming them by their job means the next change is values
     * only.
     *
     * Every pair below is measured, not chosen by eye. --accent is right on a
     * button and unreadable as small text on cream, which is why --accent-text
     * exists as a separate, deeper gold for anything a person has to read.
     */
    --deep:          #36302A;   /* headers, bands, headings */
    --deep-dark:     #2A251F;   /* footer, and the hover state under --deep */
    --accent:        #C6A769;   /* buttons, rules, icons, graphics */
    --accent-hover:  #B08F4E;   /* button hover, still dark enough for --on-accent */
    --on-accent:     #332C22;   /* text sitting on --accent (5.9:1) */
    --accent-light:  #D9C18E;   /* small accent text on --deep (7.4:1) */
    --accent-text:   #7E5F26;   /* text-safe accent on light surfaces (5.3:1) */
    --surface:       #F6F3EC;
    --accent-soft:   #F0E7D5;
    --white:         #FFFFFF;

    --ink:           #36302A;   /* body copy */
    --ink-muted:     #6B6259;   /* secondary copy */
    --line:          #E4DDD1;
    --line-strong:   #948269;   /* outline-button border, 3.3:1 on --surface */

    /* Type */
    --font-head: "Lora", Georgia, "Times New Roman", serif;
    --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    /* Shell metrics */
    --announce-h: 42px;
    --header-h:   88px;

    /* Layout */
    --wrap:      1240px;
    --gutter:    24px;
    --radius-sm: 4px;
    --radius:    8px;

    /* Warm shadows. A cool teal shadow under a cream page reads grey. */
    --shadow-card: 0 18px 48px rgba(54, 48, 42, .15);
    --shadow-soft: 0 6px 20px rgba(54, 48, 42, .09);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
    overflow-x: hidden;         /* both elements, deliberately */
    max-width: 100%;
}

/* `hidden` on html turns it into a scroll container, which silently breaks
   position: sticky on the header. `clip` prevents the same horizontal overflow
   without that side effect, so it wins wherever it is supported. */
@supports (overflow: clip) {
    html,
    body { overflow-x: clip; }
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--announce-h) + var(--header-h) + 16px);
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg,
picture,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--deep);
    margin: 0 0 .6em;
    letter-spacing: -0.005em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; }

:focus-visible {
    outline: 3px solid var(--accent-text);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--deep);
    color: var(--white);
    padding: 12px 20px;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.eyebrow {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin: 0 0 .9rem;
}

.accent { color: var(--accent-text); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--font-body);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none;
    padding: 1.05rem 1.9rem;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Gold buttons with dark text, which is the version the client picked. The
   outline button borrows the deeper gold so it stays readable on cream, where
   the button gold itself would not be. */
.btn--primary {
    background: var(--accent);
    color: var(--on-accent);
}

.btn--outline {
    background: transparent;
    color: var(--accent-text);
    border-color: var(--line-strong);
}

/* Used on the dark bands, where gold carries further than white. */
.btn--light {
    background: var(--accent);
    color: var(--on-accent);
}

@media (hover: hover) and (pointer: fine) {
    .btn--primary:hover { background: var(--accent-hover); }
    .btn--outline:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
    .btn--light:hover   { background: var(--accent-hover); }
}

/* Quiet text link with rule, used as the restrained secondary action.
   Also applied to <button> elements, so the native chrome is reset here. */
.link-quiet {
    appearance: none;
    background: none;
    border: 0;
    padding: 0 0 3px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--deep);
    text-decoration: none;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 3px;
    transition: border-color .2s ease, color .2s ease;
}

/* The reset gives every svg display:block, which inside an inline link puts the
   icon on its own line and stretches the link to the width of its container.
   Buttons escape it because they are inline-flex; a quiet link needs this. */
.link-quiet .icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -.16em;
    margin-left: .35rem;
}

@media (hover: hover) and (pointer: fine) {
    .link-quiet:hover { color: var(--accent-text); border-color: var(--accent-text); }
}

/* Krystal's founder story, first person and long form. It appears on both the
   homepage and the About page, which load different sheets, so it lives here
   rather than in either one. */
.prose--story {
    margin-inline: auto;
    max-width: 62ch;
}

.prose--story p { margin-bottom: 1.15rem; }

.prose--story p:last-child { margin-bottom: 0; }

.prose--story p:first-child {
    font-size: 1.125rem;
    color: var(--ink);
}

.prose--story em {
    font-style: italic;
    color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   5. Announcement bar
   -------------------------------------------------------------------------- */
.announce {
    background: var(--deep);
    color: var(--surface);
    min-height: var(--announce-h);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.announce p {
    margin: 0;
    padding: .4rem var(--gutter);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .03em;
}

.announce strong { color: var(--accent-light); font-weight: 700; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .25s ease;
}

/* Lifts off the page once scrolling starts, and tightens slightly */
.site-header.is-stuck {
    box-shadow: 0 6px 22px rgba(11, 80, 99, .09);
}

.site-header__inner {
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: min-height .25s ease;
}

.site-header.is-stuck .site-header__inner { min-height: calc(var(--header-h) - 12px); }

.site-logo img { transition: height .25s ease; }
.site-header.is-stuck .site-logo img { height: 46px; }

/* Logo sits hard left and stays large without inflating header height */
.site-logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
    margin-right: auto;
}

/* Artwork is pre-cropped to its own bounds, so this height is all glyph */
.site-logo img {
    width: auto;
    height: 52px;
}

/* Drawer-only actions; the desktop pair lives in .header-actions */
.site-nav__actions { display: none; }

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
}

/* Scoped to list items only: the drawer's .btn actions must keep their own
   colors, otherwise the solid CTA renders teal text on a teal pill. */
.site-nav ul a {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--deep);
    text-decoration: none;
    white-space: nowrap;
    padding: .35rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color .2s ease;
}

.site-nav ul a.is-current { border-bottom-color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
    .site-nav ul a:hover { border-bottom-color: var(--accent); }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
}

.header-actions .btn {
    padding: .8rem 1.4rem;
    font-size: .875rem;
}

/* Hamburger */
.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.nav-toggle span {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: var(--deep);
    transition: background-color .2s ease;
}

.nav-toggle span::before,
.nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--deep);
    transition: transform .25s ease, top .2s ease;
}

.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--accent-soft);
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* <picture> defaults to auto height and would otherwise stretch past the
   container, breaking both the desktop bleed and the mobile aspect ratio. */
.hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 26%;
}

.hero__inner {
    position: relative;
    z-index: 1;
    /* Full hero plus a peek of the next section inside the first viewport */
    min-height: clamp(480px, calc(100svh - var(--announce-h) - var(--header-h) - 56px), 690px);
    display: flex;
    align-items: center;
    padding-block: 3rem;
}

.hero__card {
    background: var(--surface);
    max-width: 600px;
    padding: 2.75rem 3rem 3rem;
    box-shadow: var(--shadow-card);
}

.hero__card h1 {
    font-size: clamp(2.15rem, 1.4rem + 2.1vw, 2.95rem);
    line-height: 1.12;
    margin-bottom: 1rem;
}

/* Two deliberate lines from tablet up; phones may wrap the first naturally */
.hero__card h1 span {
    display: block;
}

@media (min-width: 721px) {
    .hero__card h1 span { white-space: nowrap; }
}

.hero__lede {
    font-size: 1.0625rem;
    color: var(--ink);
    max-width: 46ch;
    margin-bottom: 2rem;
}

.hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
}

.hero__trust {
    margin-top: 1.9rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--line);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   8. Sticky quiz tab (desktop only)
   -------------------------------------------------------------------------- */
.quiz-tab {
    position: fixed;
    left: 0;
    top: 58%;
    z-index: 55;
    display: none;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: var(--deep);
    color: var(--white);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 1.15rem .6rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}

@media (hover: hover) and (pointer: fine) {
    .quiz-tab:hover { background: var(--deep-dark); }
}

@media (min-width: 1200px) {
    .quiz-tab { display: block; }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
/* A step darker than the closing call to action above it. Both were the same
   teal, which ran the two together into one slab and lost the edge of the CTA. */
.site-footer {
    background: var(--deep-dark);
    color: var(--surface);
    padding-block: 4.5rem 2rem;
}

.site-footer a {
    color: var(--surface);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .site-footer a:not(.footer-logo):hover { color: var(--accent); }
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 3rem 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(247, 244, 236, .18);
}

.footer-brand { min-width: 0; }

.footer-logo {
    display: inline-block;
    line-height: 0;
    margin-bottom: 1.5rem;
}

.footer-logo img {
    width: auto;
    height: 48px;
}

.footer-brand p {
    font-size: .9375rem;
    color: rgba(247, 244, 236, .82);
    max-width: 34ch;
}

/* Social. The whole list is absent until at least one address is set. */
.footer-social {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.4rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(247, 244, 236, .28);
    color: rgba(247, 244, 236, .9);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.footer-social .icon { width: 1.15rem; height: 1.15rem; }

@media (hover: hover) and (pointer: fine) {
    .footer-social a:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--on-accent);
    }
}

.footer-col { min-width: 0; }

.footer-col h2 {
    font-family: var(--font-head);
    font-size: 1.0625rem;
    color: var(--white);
    margin-bottom: 1.1rem;
}

.footer-col ul { list-style: none; }

/* The support address is one long unbreakable word and the columns get narrow
   on tablets, so it has to be allowed to break rather than push the column out. */
.footer-col li { overflow-wrap: anywhere; }

.footer-col li + li { margin-top: .7rem; }

.footer-col a {
    font-size: .9375rem;
    color: rgba(247, 244, 236, .82);
    overflow-wrap: anywhere;
}

.footer-bottom {
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 2rem;
    font-size: .8125rem;
    color: rgba(247, 244, 236, .72);
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    list-style: none;
}

.footer-disclaimer {
    margin-top: 2rem;
    font-size: .8125rem;
    line-height: 1.65;
    color: rgba(247, 244, 236, .66);
    max-width: 90ch;
}

/* --------------------------------------------------------------------------
   10. Mobile sticky buy bar
   -------------------------------------------------------------------------- */
.buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 58;
    display: none;
    background: var(--deep);
    padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(11, 80, 99, .18);
}

.buy-bar .btn { width: 100%; }

/* ==========================================================================
   11. Responsive
   ========================================================================== */

/* Tablet / small desktop -------------------------------------------------- */
/* Six nav items plus both header buttons need about 1370px. Below that the
   outline button is dropped and the nav tightens, and below the next breakpoint
   the whole lot moves into the drawer. */
@media (max-width: 1365px) {
    .site-nav ul { gap: 1.3rem; }
    .site-nav a { font-size: .875rem; }
    .header-actions .btn--outline { display: none; }
    .hero__card { max-width: 545px; padding: 2.5rem 2.5rem 2.75rem; }
}

/* Mobile nav breakpoint --------------------------------------------------- */
@media (max-width: 1120px) {
    :root { --header-h: 76px; }

    .nav-toggle { display: flex; }
    .header-actions { display: none; }

    .site-nav {
        position: fixed;
        inset: calc(var(--announce-h) + var(--header-h)) 0 0 0;
        background: var(--surface);
        padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .28s ease, visibility .28s ease;
    }

    .site-nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .site-nav ul {
        display: block;
        list-style: none;
    }

    /* Base state is fully visible: never reveal label text on hover only */
    .site-nav ul a {
        display: block;
        padding: 1.05rem 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--deep);
        opacity: 1;
        visibility: visible;
        white-space: normal;
        border-bottom: 1px solid var(--line);
    }

    .site-nav ul li:last-child a { border-bottom: 0; }

    .site-nav__actions {
        display: flex;
        flex-direction: column;
        gap: .85rem;
        margin-top: 2rem;
    }

    .site-logo img { height: 44px; }

    .site-nav__actions .btn { width: 100%; }

    body.nav-open { overflow: hidden; }
}

/* Phone ------------------------------------------------------------------- */
@media (max-width: 720px) {
    :root { --gutter: 22px; }

    body { padding-bottom: 84px; }   /* clears the sticky buy bar */
    .buy-bar { display: block; }

    /* Hero becomes image-over-card, so no text sits on photography */
    .hero { background: var(--surface); }

    .hero__media {
        position: relative;
        inset: auto;
        aspect-ratio: 6 / 5;
        max-height: 46vh;
    }

    .hero__media img { object-position: 60% 22%; }

    .hero__inner {
        min-height: 0;
        padding-block: 0 3rem;
        display: block;
    }

    .hero__card {
        max-width: none;
        margin-top: -34px;
        padding: 2.25rem 1.75rem 2.5rem;
        box-shadow: 0 -10px 30px rgba(11, 80, 99, .1);
    }

    .hero__card h1 { font-size: clamp(1.95rem, 1.2rem + 4vw, 2.5rem); }

    .hero__lede { font-size: 1rem; margin-bottom: 1.75rem; }

    .hero__actions { gap: 1.15rem; }
    .hero__actions .btn { width: 100%; }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   12. Motion
   Only applies once motion.js has confirmed support, so no-JS shows everything.
   ========================================================================== */
.motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity .55s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
        transform .55s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.motion-ready [data-reveal="in"] {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Images inside linked cards lift very slightly on pointer devices */
@media (hover: hover) and (pointer: fine) {
    .type-card--link,
    .lever,
    .module { transition: transform .25s ease, box-shadow .25s ease; }

    .type-card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
}

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .motion-ready [data-reveal] { opacity: 1; transform: none; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Build credit, sitting in the gap between the copyright and the legal links so
   the bottom row is balanced instead of empty in the middle. */
.footer-credit {
    margin: 0;
    font-size: .8125rem;
    color: rgba(247, 244, 236, .66);
}

.footer-credit a {
    color: rgba(247, 244, 236, .86);
    text-decoration: none;
    border-bottom: 1px solid rgba(112, 191, 168, .5);
    padding-bottom: 1px;
}

@media (hover: hover) and (pointer: fine) {
    .footer-credit a:hover { color: var(--accent); border-bottom-color: var(--accent); }
}

/* The reCAPTCHA checkbox.
   Google's widget is a fixed 304px wide iframe and will not shrink, so on a
   320px phone it pushes the page sideways. Scaling from the left keeps it
   inside the form without touching anything Google renders. */
.recaptcha-field { margin: 1.25rem 0; }

@media (max-width: 360px) {
    .recaptcha-field {
        transform: scale(.85);
        transform-origin: left top;
        /* Reclaim the height the scale leaves behind. */
        margin-bottom: .6rem;
    }
}