/* ===========================================================================
   Advocacy v2 — shared styles ("Promptless" design: white page, oxblood ink,
   Cormorant Garamond). Values are taken from the design files
   (About / Privacy / Promptless Journey standalone exports).
   Load after the Google Fonts link:
   https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap
   =========================================================================== */

:root {
    --ink: #4a0c12;          /* headings, primary text */
    --accent: #a0152b;       /* italic second lines, § marks, highlights */
    --body: #6e5256;         /* paragraphs */
    --muted: #7d676b;        /* small labels, footer links */
    --button: #5a1f2a;       /* pill button border/text */
    --rule: rgba(74, 12, 18, .14);
    --quote-mark: #e2c7cb;
    --paper: #f8f2e8;
    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --gutter: 8vw;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); }
body {
    font-family: var(--serif);
    font-weight: 500;          /* body text; headings use 400 */
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--ink); color: #fff; }
img { max-width: 100%; }

/* ---------- Header: logo top-left ---------- */
.v2-header {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 2em;
    padding: 4.5vh var(--gutter) 0;
}
.v2-logo { display: block; line-height: 0; }
.v2-logo img { display: block; width: clamp(86px, 7vw, 120px); height: auto; }

/* ---------- Small spaced labels ("01 experience", "contents") ---------- */
.v2-label {
    font-size: clamp(11px, .95vw, 14px);
    font-weight: 500;
    letter-spacing: .3em;
    color: var(--muted);
}

/* ---------- Pill button ("Request a demo") ---------- */
.v2-pill {
    box-sizing: content-box; /* the design sizes the pill without a border-box reset (~66px tall) */
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px;
    padding: .62em 2.3em;
    border: 1px solid var(--button);
    border-radius: 999px;
    font-family: var(--serif);
    font-size: clamp(12px, 1.05vw, 16px);
    font-weight:500;
    letter-spacing: .3em;
    text-indent: .3em;
    color: var(--button);
    background: transparent;
    cursor: pointer;
    transition: background 300ms ease, color 300ms ease;
}
.v2-pill:hover, .v2-pill:focus-visible { background: var(--button); color: var(--paper); }
.v2-pill--small { min-height: 40px; padding: .5em 1.9em; font-size: clamp(10px, .8vw, 13px); }

/* ---------- Headings: roman first line, italic accent second line ---------- */
.v2-h1 {
    margin: 0;
    font-size: clamp(46px, 6.4vw, 110px);
    font-weight:400; line-height: 1; letter-spacing: -.012em;
    color: var(--ink);
}
.v2-h2 {
    margin: 0;
    font-size: clamp(36px, 4.3vw, 72px);
    font-weight:400; line-height: 1.04; letter-spacing: -.01em;
    color: var(--ink);
}
.v2-h1 > span, .v2-h2 > span { display: block; }
.v2-em, .v2-h1 .v2-em, .v2-h2 .v2-em { font-style: italic; color: var(--accent); }

.v2-lede {
    margin: 0; max-width: 31em;
    font-size: clamp(18px, 1.45vw, 24px); line-height: 1.55;
    color: var(--body); text-wrap: pretty;
}
.v2-body {
    font-size: clamp(17px, 1.3vw, 22px); line-height: 1.62;
    color: var(--body); text-wrap: pretty;
}
.v2-body p { margin: 0; }

/* ---------- Section marker: italic § + label ---------- */
.v2-marker { display: flex; align-items: center; gap: .8em; }
.v2-marker .glyph { font-size: clamp(26px, 2.2vw, 36px); font-style: italic; line-height: 1; color: var(--accent); }

/* ---------- Chapter break: rule — § I. — rule ---------- */
.v2-break { display: flex; align-items: center; gap: 2em; width: 100%; }
.v2-break::before, .v2-break::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.v2-break span { font-size: clamp(12px, 1vw, 15px); letter-spacing: .3em; padding-left: .3em; color: var(--muted); }

/* ---------- Cards with a hairline on top ---------- */
.v2-card { display: flex; flex-direction: column; gap: 1em; padding-top: 2em; border-top: 1px solid var(--rule); }

/* ---------- Footer: small spaced links at the page corners ---------- */
.v2-footer {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 2em;
    padding: 0 calc(var(--gutter) - .4em) calc(5vh - .6em);
}
.v2-footer nav { display: flex; gap: 1.2em; }
.v2-footer a, .v2-foot-link {
    padding: .6em .4em;
    font-size: clamp(10px, 1.1vw, 16px);
    letter-spacing: .22em;
    color: var(--muted);
    transition: color 250ms ease;
}
.v2-footer a:hover, .v2-foot-link:hover { color: var(--ink); }

/* ---------- Inline text links (privacy email etc.) ---------- */
.v2-link {
    color: var(--ink);
    text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: .2em; text-decoration-color: rgba(160, 21, 43, .45);
    transition: color 250ms ease;
}
.v2-link:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}