/* New Paltz Parents for Mindful Tech - shared stylesheet for the draft home pages.
   Softer, narrative-first direction (per Joanna). Edit colors/fonts here once. */
:root{
  --paper:#faf8f3; --panel:#ffffff; --ink:#1d211e; --muted:#5d645c;
  --green:#1f4d3a; --green-d:#143427; --accent:#b9772b; --accent-soft:#f1e7d4;
  --line:#e7e2d6; --maxw:920px;
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --cond:"Arial Narrow","Helvetica Neue Condensed","Roboto Condensed",Impact,var(--sans);
  --logo:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif; /* Joanna's wordmark: standard-width bold grotesque, not condensed */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.2;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0 0 .5em}
h3{font-size:1.2rem;margin:0 0 .35em}
p{margin:0 0 1.1em}
a{color:var(--green)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--green);color:#fff;padding:10px 14px;z-index:60}

/* ---- header: logo wordmark (Joanna's bold condensed caps, angled banner) ---- */
header.site{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(140%) blur(6px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:var(--maxw);margin:0 auto;padding:14px 22px;flex-wrap:wrap}
.brand{display:inline-block;text-decoration:none;color:var(--ink)}
/* Logo: Joanna's wordmark, npdf_logo.png (640x136, transparent). Sized by height
   so the header stays stable; the source is ~3x the display size so it stays crisp
   on retina. Original hand-built CSS banner removed 2026-08-16. */
.brand .mark{display:block;height:44px;width:auto}
@media(min-width:700px){.brand .mark{height:54px}}

nav.cats{display:flex;gap:20px;flex-wrap:wrap}
nav.cats a{text-decoration:none;color:var(--ink);font:600 15px/1 var(--sans)}
nav.cats a:hover{color:var(--green)}
nav.cats a.act{color:var(--green)}

/* ---- narrative sections ---- */
main{padding:0 0 40px}
section{padding:clamp(34px,5vw,62px) 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.lede{font-size:1.22rem;line-height:1.6;color:var(--ink)}
.prose{max-width:64ch}
.eyebrow{font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .9em}
.soft{background:var(--panel)}
.quietlink{font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent-soft)}
.quietlink:hover{border-bottom-color:var(--accent)}

/* one quiet call to act (Version B) */
.act-quiet{display:inline-block;font:600 16px/1 var(--sans);color:#fff;background:var(--green);
  text-decoration:none;border-radius:999px;padding:13px 26px;border:1.5px solid var(--green)}
.act-quiet:hover{background:var(--green-d);color:#fff}

/* ---- District's Answers juxtaposition ---- */
.answers-intro{max-width:64ch;color:var(--muted)}
.answer-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 22px;align-items:stretch}
@media(max-width:720px){.answer-row{grid-template-columns:1fr}}
.col{border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.col .tag{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;display:block}
.admin{background:var(--panel)}
.admin .tag{color:var(--muted)}
.admin .q{font-size:13.5px;color:var(--muted);margin:0 0 6px}
.admin blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--green-d);
  border-left:3px solid var(--line);padding-left:14px}
.parent{background:var(--accent-soft);border-color:#e7d6b6}
.parent .tag{color:#8a5a18}
.parent .slot{color:#6a4a18;font-size:15px}
.placeholder{border:1.5px dashed #cdb589;border-radius:8px;padding:12px 14px;color:#8a6a2e;font-size:14px;background:#fbf4e4}

/* ---- footer ---- */
footer{background:var(--green);color:#dcebe2;margin-top:30px}
footer .wrap{padding:34px 22px}
footer a{color:#fff}
footer .disc{font-size:12.5px;color:#a7c6b6;margin-top:12px;max-width:74ch}
.muted{color:var(--muted)} .small{font-size:14px}
/* PRIVATE-ONLY group edit links (strip all .editlink for the public build) */
.editlink{display:inline-block;font:600 12px/1 var(--sans);color:#8a5a18;background:var(--accent-soft);
  border:1px dashed #cdb589;border-radius:6px;padding:3px 9px;text-decoration:none;margin-left:6px;vertical-align:middle}
.editlink:hover{background:#fbf4e4}
.privbar{background:#2b2b2b;color:#eee;font:600 13px/1.4 var(--sans);text-align:center;padding:8px 14px}
.privbar a{color:#ffd9a8}
/* mantra / claim-and-response rows */
.mantra{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0 0 14px;background:var(--panel)}
.mantra .claim{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--green-d);margin:0 0 8px}
.mantra .resp{color:var(--ink);margin:0}
.note{background:var(--accent-soft);border-radius:10px;padding:14px 16px;font-size:14.5px;color:#6a4a18}

/* ---- Grade callout on the home page (2026-08-23) ----
   Moved below About so a general visitor doesn't land on a 6th-grade-only
   message. Because it is no longer the first thing on the page it is drawn as
   a bordered aside rather than a background stripe, which keeps it visible
   without taking a whole section slot in the alternating layout. */
.callout-box{
  background:var(--accent-soft);
  border:1px solid #e7d6b6;
  border-left:4px solid var(--accent);
  border-radius:12px;
  padding:24px 28px;
}
.callout-box h2{margin-top:0}
.callout-box p:last-of-type{margin-bottom:0}
.callout-box .btn-row{margin-top:16px}
@media(max-width:640px){.callout-box{padding:20px 18px}}


/* Pull quote on each story (2026-08-23). One sentence lifted verbatim from the
   story below it, so the section can be skimmed in a few seconds on a phone.
   Parent feedback was that eight identical blocks of body text read as a wall. */
.story .pull{
  font-family:var(--serif);
  font-size:20.5px;
  line-height:1.35;
  font-weight:600;
  color:var(--green);
  margin:0 0 14px;
}
@media(min-width:700px){.story .pull{font-size:22.5px}}

/* ---- Our Stories: parent submissions, excerpted ---- */
.story{
  margin:0 0 22px;
  padding:18px 22px;
  background:var(--panel);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:10px;
}
.story p{
  margin:0 0 .7em;
  font-family:var(--serif);
  font-size:17.5px;
  line-height:1.65;
}
.story cite{
  display:block;
  font-style:normal;
  font-size:14px;
  color:var(--muted);
  letter-spacing:.02em;
}
.story cite::before{content:"— "}

/* ============================================================
   MOBILE + LAYOUT FIXES  (2026-08-16)
   Most visitors will arrive from a texted link on a phone.
   ============================================================ */

/* Long email addresses (loehlermarx@newpaltz.k12.ny.us is 30 chars) were able to
   force horizontal scrolling on narrow screens. Let them break. */
body{overflow-wrap:break-word}
.prose a,.story,.card,.linklist li{overflow-wrap:break-word;word-break:break-word}

/* .grid2 was used on the petition page but never defined, so the sign-up card
   never sat beside the text. Two columns when there is room, stacked when not. */
.grid2{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:820px){.grid2{grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}}

/* Header on small screens: the logo, six nav links and the button wrapped to
   three rows, and because the header is sticky that permanently ate the screen.
   Tighten it, and let it scroll away on phones. */
@media(max-width:640px){
  header.site{position:static}
  .bar{padding:12px 18px;gap:10px}
  nav.cats{gap:14px;order:3;width:100%}
  nav.cats a{font-size:14px}
  .brand .mark{height:38px}
}

/* Comfortable tap targets */
nav.cats a,.act-quiet{display:inline-block;padding:6px 0;min-height:34px}
.act-quiet{padding-left:14px;padding-right:14px}