/* ============================================================================
   Helpful Resources for Seniors — tokens + self-hosted faces
   (hrs-theme, Stitch pick "F · Warm Horizon", 2026-10-20)
   Loaded first; main.css reads the --color-* / --font-size-* bridge below,
   hrs.css reads the --hr-* tokens.
   ========================================================================= */

/* --- Faces: Epilogue (variable 500–800) for headlines, nav, labels and UI;
       IBM Plex Serif 400 / 400 italic / 600 for reading text. latin +
       latin-ext, downloaded from Google Fonts css2 2026-10-20. ------------ */
@font-face {
    font-family: 'Epilogue';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../fonts/epilogue-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Epilogue';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../fonts/epilogue-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-serif-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-serif-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-serif-400-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-serif-400-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-serif-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-serif-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;
    /* --- Palette: alabaster ground, ONE teal for everything interactive, the
       compass logo's amber for rules, top borders and cream panels only.
       Amber as text or button fill uses --hr-amber-ink (5.85:1 on white).
       WCAG: #0E675F on #FFFFFF 6.72 · on #FAF9F5 6.38 · on #FEF7EC 6.32 ·
       #566361 on #FAF9F5 5.94 · on #EFF5F3 5.67 · #9A520F on #FEF7EC 5.50 ·
       #FFFFFF on #9A520F 5.85 · #C5DAD6 on #134E4A 6.49 · #F0B062 on #134E4A 5.00 */
    --hr-ground:      #FAF9F5;   /* page */
    --hr-panel:       #FFFFFF;   /* cards, lead body, sidebar boxes */
    --hr-sage:        #EFF5F3;   /* alternating topic bands, callouts */
    --hr-sage-rule:   #DEE9E6;
    --hr-cream:       #FEF7EC;   /* guides rail, newsletter, contents box */
    --hr-cream-rule:  #F0E3CF;
    --hr-rule:        #E5E3DC;   /* hairlines */
    --hr-ink:         #1D2726;   /* text + headlines */
    --hr-meta:        #566361;
    --hr-teal:        #0E675F;   /* links, buttons, active nav */
    --hr-teal-dark:   #084B45;
    --hr-teal-subtle: #E6F0EE;
    --hr-amber:       #D67F24;   /* decorative only: rules, dots, top borders */
    --hr-amber-ink:   #9A520F;   /* amber text + the newsletter button */
    --hr-amber-dark:  #7D420B;
    --hr-amber-soft:  #FDF3E7;
    --hr-footer:      #134E4A;
    --hr-on-footer:   #FFFFFF;
    --hr-on-footer-meta: #C5DAD6;
    --hr-on-footer-head: #F0B062;

    /* --- Type ---------------------------------------------------------------- */
    --hr-display: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --hr-text:    'IBM Plex Serif', Georgia, 'Times New Roman', serif;
    --hr-size-body: clamp(1.0625rem, 1.01rem + 0.3vw, 1.1875rem);   /* 17–19px */
    --hr-lh-body:   1.75;
    --hr-lh-head:   1.2;
    --hr-title: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);   /* article + archive H1, capped 44px */
    --hr-h2:    clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
    --hr-h3:    clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --hr-label: 0.75rem;

    /* --- Shape & metrics ------------------------------------------------------ */
    --hr-radius:    12px;   /* cards, panels, photos */
    --hr-radius-sm: 8px;    /* buttons, fields, thumbs */
    --hr-page-max:  1280px;
    --hr-sidebar:   320px;
    --hr-side-gap:  2.5rem;
    --hr-gutter:    clamp(1rem, 3vw, 2rem);
    --hr-shadow:    0 1px 3px rgba(29, 39, 38, 0.07);

    /* --- Bridge to main.css (do not restyle main.css) ------------------------- */
    --font-size-body-min: 1.0625rem;
    --font-size-body-max: 1.1875rem;
    --font-size-body-fluid: calc(1.01rem + 0.3vw);
    --font-size-h1-min: 2rem;
    --font-size-h1-max: 2.75rem;
    --font-size-h1-fluid: calc(1.5rem + 1.8vw);
    --font-size-h2-min: 1.5rem;
    --font-size-h2-max: 1.875rem;
    --font-size-h2-fluid: calc(1.3rem + 0.8vw);
    --font-size-h3-min: 1.25rem;
    --font-size-h3-max: 1.5rem;
    --font-size-h3-fluid: calc(1.15rem + 0.4vw);
    --font-size-h4-min: 1.125rem;
    --font-size-h4-max: 1.25rem;
    --font-size-h4-fluid: calc(1.08rem + 0.2vw);
    --font-size-h5-min: 1.0625rem;
    --font-size-h5-max: 1.125rem;
    --font-size-h5-fluid: calc(1rem + 0.2vw);
    --font-size-h6-min: 1rem;
    --font-size-h6-max: 1.0625rem;
    --font-size-h6-fluid: calc(0.96rem + 0.12vw);
    --line-height-body: 1.75;
    --line-height-heading: 1.2;
    --color-primary: #0E675F;
    --color-primary-hover: #084B45;
    --color-heading: #1D2726;
    --color-accent: #0E675F;
    --color-text-dark: #1D2726;
    --color-text-medium: #566361;
    --color-text-light: #566361;
    --color-background: #FAF9F5;
    --color-background-light: #FFFFFF;
    --color-background-tint: #FEF7EC;
    --color-border: #E5E3DC;
    --color-border-soft: #E5E3DC;
    --color-footer-bg: #134E4A;
    --color-error: #B42318;
    --color-warning: #8A5A00;
    --font-family-display: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-family-body: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
    --font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 12px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --content-max: 780px;
    --page-max: 1280px;
    --color-border-light: #E5E3DC;
    --color-footer-border: #084B45;
    --color-footer-text: #FFFFFF;
    --color-copyright: #C5DAD6;
    --color-facebook: #0E675F; --color-facebook-hover: #084B45;
    --color-twitter: #0E675F; --color-twitter-hover: #084B45;
    --color-pinterest: #0E675F; --color-pinterest-hover: #084B45;
    --color-linkedin: #0E675F; --color-linkedin-hover: #084B45;
    --color-error-bg: #F9E3E0; --color-error-text: #8A1C12;
    --color-warning-bg: #F6EBD2; --color-warning-text: #6B4600;
    --font-primary: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
    --font-heading: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}