/* ============================================================
   written.institute — shared stylesheet (institute.css)
   Everything that appears on more than one page: palette, base,
   utilities, the topbar/mega nav, the text-size control, and the
   site footer (register strip + 618 network bar + legal bar).
   Page-specific rules live in each page's own inline <style>.
   ============================================================ */

:root{
  --paper:#FBFAF6;--plate:#F4F2EB;--ink:#1A1712;--muted:#5F594D;--line:#E3DFD3;
  --rubric:#8F2318;--rubric-soft:#F3E4E0;--guide:rgba(76,110,160,.30);
  --living:#2E6E45;--endangered:#A0670F;--revived:#3A5C9E;--historic:#6A6355;--undeciphered:#8F2318;
  --sans:'Noto Sans',system-ui,sans-serif;--serif:'Noto Serif Display',serif;--mono:'Noto Sans Mono',monospace;
}
/* Default typography one step up (A−/A+ steps from here). No-JS users get this baseline too. */
html{zoom:1.15}
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--rubric)}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--rubric);outline-offset:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rubric)}
.smallprint{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em}
.crumbs{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;padding:20px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--rubric)}

/* ---------- topbar + mega menu ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--ink)}
.topbar-in{max-width:1060px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;min-height:56px;position:relative}
.brand{font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand span{color:var(--rubric);font-style:italic;font-weight:400}
.menutoggle{display:none;border:1px solid var(--line);background:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;color:var(--ink)}
.nav{display:flex;align-items:stretch}
.menu-item>button,.navlink{display:flex;align-items:center;border:none;background:none;text-decoration:none;color:var(--muted);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:0 15px;min-height:56px;border-bottom:3px solid transparent}
.menu-item>button:hover,.navlink:hover{color:var(--ink)}
.menu-item[data-open="true"]>button{color:var(--ink);border-bottom-color:var(--rubric)}
.menu-item>button .caret{margin-left:6px;font-size:9px;color:var(--rubric)}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--ink);box-shadow:0 18px 30px -22px rgba(26,23,18,.35)}
.menu-item{position:static}
.menu-item[data-open="true"] .mega{display:block}
/* open on hover / keyboard focus (desktop) — no click needed */
@media(min-width:841px){.menu-item:hover .mega,.menu-item:focus-within .mega{display:block}}
.mega-in{max-width:1060px;margin:0 auto;padding:22px 20px 26px}
.mega-title{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:14px;display:flex;justify-content:space-between}
/* mega as a quick-link index (navigation, not prose) */
.mega-links{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 28px}
.mega-links .mcol h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:8px;border-bottom:1px solid var(--line);padding-bottom:6px}
.mega-links .mcol a{display:flex;align-items:baseline;font-size:13px;color:var(--ink);text-decoration:none;padding:4px 0}
.mega-links .mcol a:hover{color:var(--rubric)}
.mega-links .mcol a .k{font-family:var(--mono);font-size:10px;color:var(--rubric);flex:none;width:36px}
.mega-links .mcol a.more{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--rubric);margin-top:4px}
/* A− / A+ text-size control */
.textsize{display:flex;align-items:center;gap:3px;padding:0 8px 0 12px}
.textsize button{border:1px solid var(--line);background:var(--paper);color:var(--ink);font-family:var(--serif);cursor:pointer;line-height:1;padding:4px 8px}
.textsize button#tsDown{font-size:11px}
.textsize button#tsUp{font-size:15px}
.textsize button:hover{border-color:var(--rubric);color:var(--rubric)}
@media(max-width:840px){
  .menutoggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--ink);flex-direction:column;align-items:stretch;max-height:calc(100vh - 56px);overflow-y:auto}
  body.nav-open .nav{display:flex}
  .menu-item>button,.navlink{min-height:48px;width:100%;justify-content:space-between;border-bottom:1px solid var(--line)}
  .mega{position:static;box-shadow:none;border-bottom:1px solid var(--line);background:var(--plate)}
  .mega-links{grid-template-columns:1fr}
  .textsize{min-height:48px;width:100%;justify-content:flex-start;gap:6px;padding:8px 15px;border-bottom:1px solid var(--line)}
}
@media(min-width:561px) and (max-width:840px){.mega-links{grid-template-columns:1fr 1fr}}

/* ---------- site footer ---------- */
.sitefooter{border-top:1px solid var(--ink);background:var(--paper)}
.foot-main{display:grid;grid-template-columns:1.5fr 2.4fr;gap:40px;padding:40px 0 34px}
.foot-brand{font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--ink);text-decoration:none;display:inline-block}
.foot-brand span{color:var(--rubric);font-style:italic;font-weight:400}
.foot-tag{color:var(--muted);font-size:13px;max-width:340px;margin:10px 0 12px;line-height:1.5}
.foot-org{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.03em;line-height:1.65}
.foot-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.foot-col{display:flex;flex-direction:column;gap:7px}
.foot-col h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:4px}
.foot-col a{font-size:13px;color:var(--ink);text-decoration:none}
.foot-col a:hover{color:var(--rubric)}
.foot-col .fl{font-family:var(--mono);font-size:10px;color:var(--rubric);display:inline-block;width:24px}
.register-strip{border-top:1px solid var(--ink);background:var(--plate)}
.register-in{max-width:1060px;margin:0 auto;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.register-text{display:flex;flex-direction:column;gap:3px}
.register-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rubric)}
.register-pitch{font-size:13.5px;color:var(--muted)}
.register-form{display:flex;border:1px solid var(--ink);min-width:300px}
.register-form input{flex:1;min-width:0;border:none;background:var(--paper);padding:11px 13px;font-family:var(--mono);font-size:12px;color:var(--ink)}
.register-form input:focus{outline:none;background:var(--plate)}
.register-form button{border:none;border-left:1px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:11px 20px;cursor:pointer}
.register-form button:hover{background:var(--rubric)}
@media(max-width:560px){.register-form{width:100%;min-width:0}}
/* the two bottom rows (network + legal) live in the portable assets/618-network.css */
@media(max-width:840px){.foot-main{grid-template-columns:1fr;gap:26px}.foot-nav{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-nav{grid-template-columns:1fr}}