/* ==========================================================================
   Nesharim Foundation — Stylesheet
   ==========================================================================
   File:         stylesheet.css
   Project:      nesharimfoundation.org
   Description:  Site-wide styles for the "coming soon" landing page and
                 shared components for the full site build-out.
   Standards:    WCAG 2.2 AA (WAI), semantic HTML5
   Fonts:        Fraunces (display/serif), Karla (body/sans) — Google Fonts
   Last updated: 2026-07-16
   ==========================================================================
   Table of contents
   --------------------------------------------------------------------------
   1. Design tokens (custom properties)
   2. Reset & base
   3. Accessibility utilities (skip link, visually-hidden)
   4. Site header & navigation
   5. Hero
   6. Section defaults & typography
   7. Values grid
   8. Partner listing
   9. Note callout
   10. Contact
   11. Footer
   ========================================================================== */

/* 1. Design tokens
   ========================================================================== */
:root{
  --ink:#14234A;
  --ink-soft:#5A6480;
  --sky:#ECEEF3;
  --thermal:#A88B5C;
  --thermal-pale:#F3EDE1;
  --paper:#FBFAF7;
  --rule:#DBDDE4;
  --measure:34rem;
}

/* 2. Reset & base
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}

/* 3. Accessibility utilities
   ========================================================================== */
/* Visually hidden but available to assistive tech & search engines (WCAG 2.4.1 / 4.1.2) */
.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}

/* Skip link: hidden until keyboard-focused, then jumps above sticky header */
.skip-link{position:absolute;left:0;top:-3rem;background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;z-index:100;text-decoration:none;font-size:.85rem;letter-spacing:.05em;transition:top .2s}
.skip-link:focus{top:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--paper);color:var(--ink);font-family:'Karla',system-ui,sans-serif;font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{width:min(100% - 2.5rem,68rem);margin-inline:auto}

/* 4. Site header & navigation
   ========================================================================== */
header{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:.95rem 0;gap:1rem}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.mark img{height:26px;width:auto;flex:none;display:block}
.mark .name{font-family:'Fraunces',serif;font-weight:600;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1}
nav{display:flex;gap:1.5rem;flex-wrap:wrap}
nav a{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:.25s}
nav a:hover,nav a:focus-visible{color:var(--ink);border-color:var(--thermal)}
:focus-visible{outline:2px solid var(--thermal);outline-offset:3px;border-radius:2px}

/* 5. Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding:8rem 0 7rem;background:linear-gradient(180deg,var(--sky) 0%,var(--paper) 100%);border-bottom:1px solid var(--rule)}
.thermal{position:absolute;inset:0;pointer-events:none;opacity:.3}
.thermal svg{width:100%;height:100%}
.thermal path{fill:none;stroke:var(--thermal);stroke-width:1;stroke-dasharray:5 320;animation:rise 14s linear infinite}
.thermal path:nth-child(2){animation-duration:19s;animation-delay:-4s;stroke-width:.75}
.thermal path:nth-child(3){animation-duration:16s;animation-delay:-9s;opacity:.6}
.thermal path:nth-child(4){animation-duration:22s;animation-delay:-2s;stroke-width:.75;opacity:.5}
@keyframes rise{from{stroke-dashoffset:650}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.thermal{opacity:.16}.thermal path{stroke-dasharray:none}}
.hero .wrap{position:relative;z-index:1}
.lockup{width:min(230px,52vw);height:auto;display:block;margin:0 0 3.2rem;animation:settle 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lockup{animation:none}}
.verse{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--thermal);font-weight:600;margin-bottom:1.8rem}
h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2.4rem,6vw,4.5rem);line-height:1.08;letter-spacing:-.02em;max-width:20ch}
h1 em{font-style:italic;font-weight:400;color:var(--thermal)}
.hero h1 + p{margin-top:1.9rem;font-size:1.075rem}
.divider{width:2.75rem;height:1px;background:var(--rule);margin:2.4rem 0}

/* 6. Section defaults & typography
   ========================================================================== */
section{padding:6rem 0;border-bottom:1px solid var(--rule)}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--thermal);margin-bottom:1.4rem}
h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.2;letter-spacing:-.01em;margin-bottom:1.8rem;max-width:22ch}
h3{font-family:'Fraunces',serif;font-weight:400;font-size:1.2rem;line-height:1.3;margin-bottom:.55rem}
p{max-width:var(--measure);color:var(--ink-soft);font-weight:300}
p + p{margin-top:1.15rem}
.lede{color:var(--ink);font-size:1.075rem}
.split{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:1.5rem}}

/* 7. Values grid
   ========================================================================== */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:1rem}
.values div{padding:2rem 1.8rem 2rem 0;border-top:2px solid var(--ink)}
.values div + div{padding-left:1.8rem;border-left:1px solid var(--rule)}
.values p{font-size:.94rem}
@media(max-width:820px){.values{grid-template-columns:1fr}.values div{padding:1.6rem 0}.values div + div{padding-left:0;border-left:none}}

/* 8. Partner listing
   ========================================================================== */
.partner{display:grid;grid-template-columns:1fr 1.5fr;gap:3rem;padding:2.4rem 0;border-top:1px solid var(--rule)}
.partner:last-of-type{padding-bottom:0}
.partner h3{margin-bottom:.35rem}
.partner .role{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--thermal);font-weight:600}
@media(max-width:820px){.partner{grid-template-columns:1fr;gap:.9rem}}

/* 9. Note callout
   ========================================================================== */
.note{margin-top:3.5rem;padding:1.9rem 2rem;background:var(--thermal-pale);border-left:3px solid var(--thermal)}
.note p{color:var(--ink);max-width:44rem;margin:0}
.note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* 10. Contact
   ========================================================================== */
#contact{border-bottom:none;padding-bottom:4rem}
.mail{display:inline-block;margin-top:1.6rem;font-family:'Fraunces',serif;font-size:clamp(1.25rem,3vw,1.9rem);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--thermal);padding-bottom:.2rem;transition:.25s}
.mail:hover,.mail:focus-visible{color:var(--thermal)}

/* 11. Footer
   ========================================================================== */
footer{padding:2.2rem 0;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--ink-soft)}
footer p{max-width:none}
footer .heb{font-family:'Fraunces',serif;font-style:italic}
footer a{color:var(--ink-soft)}