/* ============================================================
   KISOP site — shared page styles (the pattern sheet)
   ------------------------------------------------------------
   Minted August 26, 2026 for the her-voice top layer. Every
   class here is lifted from the styles the existing pages
   already carry inline (index.html and the standalone deep
   pages) — same site, fewer copies. New pages link this file
   plus site.css and carry NO inline <style> block:

     <link rel="stylesheet" href="assets/kisop.css">
     <link rel="stylesheet" href="assets/site.css">

   site.css stays the typography system of truth (it loads
   after this file and overrides --serif / --sans with Atkinson
   Hyperlegible Next). Existing pages do not link this file and
   are unaffected by it. To change the look of every page that
   links it, edit this file only.
   ============================================================ */

:root{
  --ink:#232A45; --muted:#5C648A; --paper:#FFFFFF; --sheet:#FFFFFF;
  --blue:#7280BD; --blue-ink:#2B3572; --wash:#E1E6F8; --wash2:#F4F6FD;
  --amber:#5A6410; --amber-wash:#DFEEB8; --line:#C1C9E5; --edge:#828FC0;
  --cream:#EFEAE3; /* matched to the poster's own paper tone */
  --cream-line:#E1DACB;
  --serif: Charter, Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---- base ---- */
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);margin:0;line-height:1.6}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:760px}       /* reading pages: one comfortable column */
a{color:var(--blue-ink)}
h1,h2,h3{font-family:var(--serif);text-wrap:balance;line-height:1.18}
h2{font-size:24px;margin:0 0 10px}
p{max-width:62ch;font-size:15.5px;margin:10px 0}
section{margin:44px 0}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:600;font-family:var(--sans)}
h2.eyebrow{margin:0 0 4px}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue-ink);outline-offset:2px;border-radius:4px}
.btn:focus-visible{outline-offset:3px;border-radius:9px}
.tile:focus-visible{outline-offset:3px;border-radius:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- site header (the top band nav.js draws; identical to the pasted headers) ---- */
.band{background:var(--wash2);border-bottom:1px solid var(--line)}
header.site{display:flex;align-items:center;gap:12px;padding:16px 0 10px}
.wordmark{font-family:var(--serif);font-size:22px;font-weight:700}
.tagline{font-size:12px;color:var(--muted)}
.langs{margin-left:auto;display:flex;gap:2px;border:1px solid var(--line);border-radius:99px;padding:2px;background:#fff}
.langs a,.langs span{font:600 12px var(--sans);padding:5px 12px;border-radius:99px;color:var(--muted);text-decoration:none}
.langs .on{background:var(--blue-ink);color:#fff}
nav.main{display:flex;gap:2px;flex-wrap:wrap;padding:0 0 10px}
nav.main a{font:600 13px var(--sans);color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:7px}
nav.main a.on{background:var(--blue-ink);color:#fff}
nav.main a:hover{color:var(--blue-ink);background:var(--wash)}
nav.main a.on:hover{color:#fff;background:var(--blue-ink)}

/* ---- identity line: the one sentence saying what KISOP is, above the front-door heroes (v3.126, Sep 9, 2026; smaller type + tighter band v3.127; cream band + framed sentence v3.129, her word) ---- */
.identband{background:var(--cream)}   /* same paper as the hero bands; no rule beneath, so the page reads as one */
.identband .wrap{padding-top:18px;padding-bottom:4px}
.identline{font-family:var(--serif);font-size:clamp(15px,1.9vw,17px);line-height:1.45;text-align:center;max-width:64ch;margin:0 auto;color:var(--blue-ink);
  background:rgba(255,255,255,.55);border:1px solid var(--cream-line);border-radius:10px;padding:12px 22px}
@media(max-width:640px){.identband .wrap{padding-top:12px;padding-bottom:2px}.identline{padding:10px 14px}}

/* ---- hero, poster-band style (the front-door opening) ---- */
.heroband{background:var(--cream);border-bottom:1px solid var(--cream-line)}
.heroband .wrap{padding-top:34px;padding-bottom:36px}
.heroband .eyebrow{text-align:center;margin-bottom:10px}
.heroband .ministory{max-width:58ch}
.herolede{font-family:var(--serif);font-weight:400;text-align:center;margin:0 auto 20px;max-width:26ch;font-size:clamp(28px,5vw,42px);line-height:1.22}
.herolede b{color:var(--blue-ink);font-weight:700;display:block}
.herolede i{color:#3D4A94;font-weight:400}
.herocta{max-width:880px;margin:26px auto 0;text-align:center}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.herocta .note{font-size:13px;color:#4E567E;max-width:52ch;margin:14px auto 0}

/* ---- hero, reading-page style (a deep page's opening) ---- */
.hero{margin-top:34px}
.hero h1{font-size:clamp(28px,5vw,38px);margin:10px 0 12px;max-width:22ch}
.lede{font-size:17px;color:var(--muted);max-width:58ch}

/* ---- buttons ---- */
.btn{border:0;border-radius:9px;padding:12px 22px;font:700 15px var(--sans);cursor:pointer;text-decoration:none;display:inline-block;transition:background .15s ease}
.btn.primary{background:var(--blue-ink);color:#fff}
.btn.primary:hover{background:#20295c}
.btn.quiet{background:#fff;border:1px solid var(--cream-line);color:var(--ink);box-shadow:0 1px 3px rgba(76,64,36,.08)}
.btn.quiet:hover{background:var(--wash);border-color:var(--line)}

/* ---- tiles: the link-card grid ---- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 0}
@media(max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{text-align:left;border:1px solid var(--edge);border-radius:12px;background:var(--sheet);padding:15px 16px;cursor:pointer;text-decoration:none;display:block;transition:border-color .15s ease,background .15s ease}
.tile:hover{border-color:var(--blue);background:var(--wash)}
@media (prefers-reduced-motion:no-preference){
  .tile{transition:border-color .15s ease,background .15s ease,transform .15s ease}
  .tile:hover{transform:translateY(-1px)}
}
.tile .t-t{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--blue-ink);display:block}
.tile .t-s{font-size:12.5px;color:var(--muted);margin-top:3px;display:block;line-height:1.45}

/* line-drawn glyphs on tiles, colors drawn from the poster's puzzle pieces */
.glyph{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;background:var(--gw);color:var(--g)}
.glyph svg{display:block}
.g-red{--g:#B5443B;--gw:#F8E9E6}
.g-blue{--g:#2B3572;--gw:#E6EAF7}
.g-olive{--g:#5F7A15;--gw:#ECF1DB}
.g-teal{--g:#177E7C;--gw:#E1F1EF}
.g-gold{--g:#A9770F;--gw:#F7EEDA}
.g-purple{--g:#5E4696;--gw:#EEE9F6}
.g-orange{--g:#BC5F10;--gw:#F9EBDD}

/* ---- panels: bordered cards, alone or in grids ---- */
.panel{border:1px solid var(--line);border-radius:12px;background:var(--sheet);padding:18px 20px 14px}
.panel h3{font-family:var(--serif);font-size:17px;margin:0 0 8px}
.panel p{font-size:14.5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.two{grid-template-columns:1fr}}
.homerow{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin:16px 0 0}
@media(max-width:700px){.homerow{grid-template-columns:1fr}}

/* ---- lists ---- */
.pillars{list-style:none;margin:0;padding:0}
.pillars li{font-size:13.5px;margin-bottom:11px;padding-left:23px;position:relative;line-height:1.5}
.pillars li b{color:var(--blue-ink)}
.pillars li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:3px;background:var(--blue)}
.pillars li:nth-child(1)::before{background:#2B3572}
.pillars li:nth-child(2)::before{background:#1F8F8C}
.pillars li:nth-child(3)::before{background:#D2701E}
.pillars li:nth-child(4)::before{background:#6B8420}
.wn{margin:0;padding-left:2px;list-style:none}
.wn li{font-size:13.5px;margin-bottom:9px;line-height:1.5}
.wn .d{color:var(--amber);font-weight:700;font-size:11px;letter-spacing:.06em;margin-right:6px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- quotes and the honest box ---- */
.story{border-left:3px solid var(--amber);padding:4px 18px;margin:26px 0;font-family:var(--serif);font-size:17px;line-height:1.55;max-width:58ch}
.ministory{border-left:3px solid var(--amber);padding:6px 18px;margin:0;font-family:var(--serif);font-size:17px;line-height:1.55;max-width:64ch}
.honest{border:1.5px solid var(--amber);background:var(--amber-wash);border-radius:8px;padding:14px 18px;max-width:62ch}
.honest p{font-size:14.5px;margin:6px 0}
.factline{display:flex;gap:22px;flex-wrap:wrap;margin:22px 0 0;font-size:13px;color:var(--muted)}
.factline b{color:var(--amber);font-family:var(--serif);font-size:15px}

/* ---- the poster frame ---- */
.posterbox{background:var(--cream);border:1px solid var(--cream-line);border-radius:12px;padding:22px;margin:20px 0}
.poster{display:block;width:100%;max-width:640px;margin:0 auto;height:auto;
  border-radius:12px;border:1px solid rgba(96,84,55,.10);
  box-shadow:0 1px 2px rgba(35,42,69,.05),
             0 10px 28px -6px rgba(76,64,36,.12),
             0 30px 60px -18px rgba(76,64,36,.16)}
.cap{font-size:13px;color:var(--muted);text-align:center;max-width:none;margin:14px 0 0}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);margin-top:46px;padding:24px 0 60px;color:var(--muted);font-size:12.5px}
footer .sigline{font-family:var(--serif);font-size:14px;color:var(--ink);margin-bottom:6px}
footer a{margin-right:14px}
footer .prov{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--blue-ink)}
footer .comp{margin-bottom:10px}
footer .footnote{margin-top:10px}   /* page-specific notes inside the shared footer */

/* ---- small screens ---- */
@media(max-width:640px){
  .heroband .wrap{padding-top:22px;padding-bottom:26px}
  .herolede{font-size:24px;margin-bottom:16px}
  .herocta{margin-top:22px}
}

/* ---- small photographs on the front door (v3.141, Sep 9, 2026): a circle beside the identity line, a square beside each hero paragraph ---- */
.identwrap{display:flex;align-items:center;gap:16px;max-width:760px;margin:0 auto}
.identwrap img{flex:0 0 72px;width:72px;height:72px;border-radius:50%;object-fit:cover}
.identwrap .identline{margin:0}
.minirow{display:flex;gap:18px;align-items:flex-start;max-width:58ch;margin:0 auto 22px}
.minirow img{flex:0 0 132px;width:132px;height:132px;border-radius:12px;object-fit:cover;margin-top:2px}
.minirow .ministory{margin:0;max-width:none;text-align:left}
@media(max-width:640px){.minirow{flex-direction:column;align-items:center}.identwrap{flex-direction:column}}