/* Rethinking Our Future | Website Design Standard v2.0
   Source: approved About Rethinking Our Future v2.0 Final HTML.
   Keep this stylesheet alongside ROF_Master_HTML_Template_v2.0.html.
   The first content section has no upper divider; the masthead provides it.
*/

:root {
      color-scheme: light;
      --canvas: #f6f5f0;
      --paper: #ffffff;
      --ink: #27343a;
      --ink-soft: #4d5b5e;
      --ink-muted: #647072;
      --accent: #286b66;
      --accent-dark: #1e514d;
      --accent-pale: #eef6f2;
      --rule: #dde6e0;
      --serif: Georgia, 'Times New Roman', serif;
      --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 17px/1.76 var(--sans); -webkit-font-smoothing: antialiased; }
    .page { max-width: 1050px; margin: clamp(18px, 4vw, 60px) auto; background: var(--paper); border: 1px solid #e6e9e4; border-radius: 18px; box-shadow: 0 12px 48px rgba(31, 47, 44, .045); overflow: hidden; }
    .masthead { padding: clamp(38px, 7vw, 83px) clamp(24px, 8vw, 106px) clamp(32px, 5.5vw, 66px); text-align: center; background: linear-gradient(155deg, #f8fbf8 0%, #fff 72%); border-bottom: 1px solid var(--rule); }
    .eyebrow { font: 650 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .19em; color: var(--accent); margin: 0 0 16px; }
    h1 { max-width: 760px; margin: 0 auto 12px; font: 400 clamp(2.25rem, 5vw, 3.45rem)/1.13 var(--serif); letter-spacing: -.03em; color: #21383b; text-wrap: balance; }
    .subtitle { margin: 0; color: var(--ink-muted); font: italic 400 clamp(1.02rem, 2.3vw, 1.28rem)/1.5 var(--serif); }
    .rule { width: 56px; height: 2px; margin: 30px auto 0; background: var(--accent); opacity: .7; }
    main { max-width: 780px; margin: auto; padding: clamp(28px, 5vw, 62px) clamp(24px, 5.5vw, 64px) 70px; }
    p { margin: 0 0 1.2em; }
    strong { font-weight: 680; }
    em { font-style: italic; }
    .lead { font: 500 clamp(1.35rem, 2.9vw, 1.8rem)/1.4 var(--serif); color: var(--accent-dark); margin-bottom: 1.2em; }
    .opening { padding-bottom: 8px; }
    .question { font: 500 clamp(1.15rem, 2.1vw, 1.34rem)/1.55 var(--serif); color: var(--accent-dark); margin: 1.65em 0 1.1em; text-wrap: pretty; }
    section.story-section { margin-top: clamp(20px, 3vw, 28px); }
    main > section.story-section:first-child { margin-top: 0; }
    h2 { margin: 0 0 18px; padding-top: 15px; border-top: 1px solid var(--rule); color: #264b49; font: 500 clamp(1.45rem, 3vw, 1.78rem)/1.35 var(--serif); letter-spacing: -.01em; }
    .emphasis-line { color: var(--accent-dark); font-weight: 630; }
    .compass { margin: 26px 0 12px; padding: 23px 26px; border-left: 3px solid var(--accent); background: var(--accent-pale); border-radius: 0 9px 9px 0; }
    .compass p { font: 500 clamp(1.12rem, 2.15vw, 1.35rem)/1.57 var(--serif); color: #244a46; margin: 0; }
    .conclusion { margin-top: 38px; }
    .signature-line { font: 500 clamp(1.1rem, 2.1vw, 1.28rem)/1.55 var(--serif); color: var(--accent-dark); margin: 1.5em 0; }
    .final-invite { font: 600 clamp(1.2rem, 2.3vw, 1.45rem)/1.55 var(--serif); color: var(--accent-dark); }
    .footer-area { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 60px; }
    .footer-panel { padding: 24px 25px; border: 1px solid var(--rule); background: #fbfcfa; border-radius: 12px; }
    .footer-panel h2 { font: 500 1.28rem/1.4 var(--serif); margin: 0 0 12px; padding: 0; border: 0; }
    .footer-panel p { color: var(--ink-soft); font-size: .93rem; line-height: 1.7; margin: 0 0 18px; }
    a { color: var(--accent-dark); text-underline-offset: 4px; }
    a:hover { color: #123b37; }
    a:focus-visible { outline: 3px solid #6ab5a9; outline-offset: 4px; border-radius: 3px; }
    .link-action { font-size: .92rem; font-weight: 650; text-decoration-thickness: 1px; }
    .site-footer { margin-top: 48px; border-top: 1px solid var(--rule); padding-top: 22px; font-size: .78rem; color: var(--ink-muted); text-align: center; }
    @media (max-width: 700px) { .page { margin: 0; border: none; border-radius: 0; box-shadow: none; } .footer-area { grid-template-columns: 1fr; gap: 16px; } main { padding-bottom: 45px; } body { font-size: 16.5px; line-height: 1.73; } .compass { padding: 20px 21px; } }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    @media print { body { background: white; font-size: 11pt; } .page { margin: 0; max-width: none; box-shadow: none; border: none; } .masthead { padding: 24pt 0; } main { max-width: none; padding: 18pt 0; } section { break-inside: avoid-page; } .footer-area { display: block; } .footer-panel { margin: 16pt 0; } }
  
    /* ROF standard: subscription, action, and related-reading components. */
    .signup-form { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
    .signup-form input { flex:1 1 200px; min-width:0; padding:12px 13px; font:inherit; font-size:.92rem; color:var(--ink); border:1px solid #bfcfc7; border-radius:7px; background:#fff; }
    .signup-form input:focus-visible { outline:3px solid #a1ccc1; outline-offset:2px; }
    .action-button { border:0; border-radius:7px; padding:11px 18px; background:var(--accent-dark); color:white; font:650 .92rem/1.4 var(--sans); }
    .action-button[disabled] { opacity:.67; cursor:not-allowed; }
    .action-link-placeholder { display:inline-block; padding:10px 15px; border:1px solid var(--accent); border-radius:7px; font-size:.92rem; font-weight:650; color:var(--accent-dark); background:white; }
    .implementation-note { margin:12px 0 0 !important; font-size:.74rem !important; color:var(--ink-muted) !important; }
    .footer-area.triple { grid-template-columns:1fr 1fr; }
    .footer-panel.related { grid-column:1 / -1; }
    @media (max-width:700px) { .footer-area.triple { grid-template-columns:1fr; } .footer-panel.related { grid-column:auto; } }
    @media print { .footer-area.triple {display:block;} .action-button {color:#333; background:#eee;} }

    /* Approved first-section spacing: tighten the transition from the page masthead
       to the first section, without changing spacing between later sections. */
    .page > .masthead { padding-bottom: clamp(18px, 2vw, 26px); }
    .page > .masthead + main { padding-top: 18px; }
    /* Header already has a rule: omit the duplicate rule on the first content heading. */
    main > section.story-section:first-child > h2 { border-top: none; }