@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

:root{
  --ink:#15321F;
  --green:#1F5C3D;
  --blue:#2C4A68;
  --terracotta:#A6542D;
  --gold:#8f6a1f;
  --gold-fill:#C99A3B;
  --cream:#FBFAF8;
  --paper:#FFFFFF;
  --muted:#5C6B4A;
  --max:900px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:18px;
  line-height:1.65;
}
h1,h2,h3,.display{
  font-family:'Josefin Sans', sans-serif;
  color:var(--ink);
  font-weight:600;
  line-height:1.15;
  margin:0 0 0.4em;
}
p{margin:0 0 1.1em;}
a{color:var(--terracotta);}
a:hover{color:var(--blue);}
blockquote{
  font-family:'Josefin Sans',sans-serif;
  font-size:24px;
  font-weight:500;
  border-left:4px solid var(--gold-fill);
  padding:4px 24px;
  margin:24px 0;
  color:var(--ink);
}

/* Original three-color frieze (blue/terracotta/gold, 30px squares) — kept here in case we revert:
.frieze{
  height:30px;
  background: repeating-linear-gradient(90deg,
    var(--blue) 0 30px,
    transparent 30px 50px,
    var(--terracotta) 50px 80px,
    transparent 80px 100px,
    var(--gold-fill) 100px 130px,
    transparent 130px 150px);
}
*/
.frieze{
  height:40px;
  background: repeating-linear-gradient(90deg,
    var(--blue) 0 40px,
    transparent 40px 67px,
    var(--terracotta) 67px 107px,
    transparent 107px 134px);
}

.site-top{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--cream);
}

.bar{
  background:var(--terracotta);
  color:var(--cream);
  text-align:center;
  padding:10px;
  font-family:'Josefin Sans',sans-serif;
  font-weight:600;
  letter-spacing:0.5px;
  font-size:18px;
}
.bar a{color:var(--cream);}

header.site{
  display:flex;
  align-items:center;
  padding:24px 6vw;
  border-bottom:3px solid var(--ink);
  flex-wrap:wrap;
  gap:12px;
}
.wordmark{
  font-family:'Josefin Sans',sans-serif;
  font-weight:700;
  font-size:22px;
  color:var(--ink);
  text-decoration:none;
}
/* nav.primary and .nav-group are separate flex children of header.site;
   margin-left:auto on nav.primary pushes both of them, together, to the
   right edge, so they read as one adjacent cluster next to the wordmark */
nav.primary{
  display:flex;
  align-items:center;
  margin-left:auto;
}
nav.primary a{
  margin-left:24px;
  font-family:'Josefin Sans',sans-serif;
  font-weight:500;
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
}
nav.primary a:hover{color:var(--terracotta);}

.nav-group{
  display:flex;
  align-items:center;
}

.nav-cta{
  margin:0 0 0 24px;
  padding:8px 20px;
}
.btn.primary.nav-cta{background:var(--blue);border-color:var(--blue);}
.btn.primary.nav-cta:hover{background:#1F374D;border-color:#1F374D;color:var(--cream);}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:40px;
  border:2px solid var(--ink);
  background:var(--paper);
  padding:0;
  cursor:pointer;
}
.nav-toggle-bars{
  position:relative;
  display:block;
  width:20px;
  height:2px;
  background:var(--ink);
  transition:background .15s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--ink);
  transition:transform .15s ease, top .15s ease;
}
.nav-toggle-bars::before{top:-6px;}
.nav-toggle-bars::after{top:6px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:0;transform:rotate(-45deg);}

main{
  max-width:var(--max);
  margin:0 auto;
  padding:48px 6vw 80px;
}
main.wide{max-width:960px;}

.hero-band{
  background:var(--terracotta);
  padding:56px 6vw 60px;
}
.hero-inner{
  max-width:760px;
  margin:0 auto;
}
.hero-band h1{font-size:44px;max-width:720px;margin-bottom:0.5em;color:var(--cream);}
.vote-no-big{
  display:block;
  font-size:1.7em;
  margin-top:0.15em;
  letter-spacing:0.01em;
}
.vote-no-tag{
  font-family:'Josefin Sans',sans-serif;
  font-weight:700;
  font-size:1.15em;
  letter-spacing:0.02em;
}
.hero-band p.lede{font-size:21px;color:var(--cream);max-width:640px;}
.lede a.d-divisive,
.lede a.d-discriminatory,
.lede a.d-distraction{
  color:var(--cream);
  font-weight:700;
  text-decoration:none;
  border-bottom:3px solid transparent;
  padding-bottom:1px;
}
.lede a.d-divisive{border-bottom-color:#6E9BC4;}
.lede a.d-discriminatory{border-bottom-color:#D89B7C;}
.lede a.d-distraction{border-bottom-color:var(--gold-fill);}

.hero-band .btn.primary{background:var(--blue);border-color:var(--blue);}
.hero-band .btn.primary:hover{background:#1F374D;border-color:#1F374D;}
.hero-band .btn{border-color:var(--cream);color:var(--cream);}
.hero-band .btn:hover{background:var(--cream);border-color:var(--cream);color:var(--terracotta);}


.btn{
  display:inline-block;
  font-family:'Josefin Sans',sans-serif;
  font-weight:600;
  font-size:15px;
  padding:12px 26px;
  border:2px solid var(--blue);
  color:var(--blue);
  text-decoration:none;
  margin:6px 12px 6px 0;
}
.btn.primary{background:var(--terracotta);border-color:var(--terracotta);color:var(--cream);}
.btn.primary:hover{background:#7A3D20;border-color:#7A3D20;color:var(--cream);}
.btn:hover{background:var(--blue);border-color:var(--blue);color:var(--cream);}

.threeD{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0;
  margin:36px 0;
  border-top:2px solid var(--ink);
  border-left:2px solid var(--ink);
}
.threeD.stack{grid-template-columns:1fr;}
.threeD .card{padding:26px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.threeD .card h3{font-size:24px;margin-bottom:10px;}
.threeD .card.green h3{color:var(--green);}
.threeD .card.blue h3{color:var(--blue);}
.threeD .card.terracotta h3{color:var(--terracotta);}
.threeD .card.gold h3{color:#AC822D;}
.threeD .card a{font-family:'Josefin Sans',sans-serif;font-weight:500;font-size:14px;}

footer.site{
  border-top:3px solid var(--ink);
  padding:28px 6vw;
  font-family:'Josefin Sans',sans-serif;
  font-size:13px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
footer.site a{color:var(--ink);}

.status-note{
  background:var(--paper);
  border-left:4px solid var(--terracotta);
  padding:16px 22px;
  margin:32px 0;
  font-size:16px;
}

section{margin:52px 0;}
[id]{scroll-margin-top:170px;}
section h2{font-size:30px;border-bottom:2px solid var(--gold-fill);padding-bottom:8px;display:inline-block;}

.callout{
  font-family:'Josefin Sans',sans-serif;
  font-weight:600;
  font-size:22px;
  line-height:1.4;
  margin:14px 0 20px;
}
.callout.green{color:var(--green);}
.callout.terracotta{color:var(--terracotta);}
.callout.gold{color:var(--gold);}

table.myths{width:100%;border-collapse:collapse;margin:20px 0;font-size:16px;}
table.myths td{border:1px solid var(--muted);padding:14px;vertical-align:top;}
table.myths td:first-child{font-family:'Josefin Sans',sans-serif;font-weight:600;width:32%;}

.form-embed{
  border:2px solid var(--ink);
  background:var(--paper);
  padding:16px;
  margin:24px 0;
  max-width:640px;
}

img.sign-preview{
  display:block;
  width:100%;
  max-width:420px;
  border:2px solid var(--ink);
  margin:20px 0;
}
.form-embed iframe{
  display:block;
  width:100%;
  border:0;
}

.list-plain{padding-left:0;list-style:none;}
.list-plain li{padding:10px 0;border-bottom:1px solid var(--muted);}

@media (max-width:860px){
  header.site{position:relative;padding:16px 5vw;row-gap:0;}
  .wordmark{flex:1 1 0;min-width:0;font-size:19px;line-height:1.2;}
  /* nav.primary and .nav-group are both direct children of header.site
     (not nested), so nav's width:100% below is relative to the header
     itself and reliably wraps onto its own full-width row when open */
  .nav-group{order:2;margin-left:auto;gap:8px;}
  .nav-cta{margin:0;padding:8px 14px;font-size:14px;}
  .nav-toggle{display:inline-flex;}
  nav.primary{
    display:none;
    order:3;
    width:100%;
    margin-left:0;
    flex-direction:column;
    align-items:stretch;
    margin-top:16px;
    padding-top:12px;
    border-top:2px solid var(--ink);
  }
  nav.primary.open{display:flex;}
  nav.primary a{
    margin-left:0;
    padding:14px 2px;
    font-size:16px;
    border-bottom:1px solid rgba(21,50,31,0.15);
  }
  nav.primary a:last-child{border-bottom:none;}
}

@media (max-width:640px){
  .hero-band{padding:40px 5vw 44px;}
  .hero-band h1{font-size:34px;}
  .hero-band p.lede{font-size:18px;}
  section h2{font-size:26px;}
  blockquote{font-size:20px;padding:4px 16px;}
  .status-note{padding:14px 16px;}
  footer.site{flex-direction:column;gap:14px;}

  table.myths,
  table.myths tbody,
  table.myths tr,
  table.myths td{
    display:block;
    width:100%;
  }
  table.myths tr{margin-bottom:16px;border:1px solid var(--muted);}
  table.myths td{border:none;padding:12px 14px;}
  table.myths td:first-child{
    width:auto;
    background:var(--paper);
    border-bottom:1px solid var(--muted);
  }
}

@media (max-width:400px){
  .hero h1{font-size:32px;}
  .wordmark{font-size:16px;}
  .nav-cta{padding:6px 10px;font-size:13px;}
  .bar{font-size:12px;letter-spacing:0.5px;}
}

@media (max-width:340px){
  .wordmark{font-size:14px;}
}