:root{--navy:#092f47;--navy2:#07344f;--coral:#f35355;--gold:#ffc547;--cream:#f8f4ec;--ink:#092f47}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif;background:var(--cream)}a{color:inherit}a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.skip{position:absolute;left:-9999px;top:10px;z-index:10;background:white;padding:10px}.skip:focus{left:10px}.container{max-width:1140px;margin:auto;padding:0 28px}.site-header{height:82px;display:flex;justify-content:space-between;align-items:center;padding:0 max(28px,calc((100vw - 1140px)/2));background:var(--cream);gap:20px}.wordmark{text-decoration:none;font:900 30px/.8 'Barlow Condensed',sans-serif;letter-spacing:-.5px;white-space:nowrap}.wordmark span,.hero h2 span{color:var(--coral)}.wordmark small{display:block;text-align:center;font:700 12px/1.8 'DM Sans',sans-serif;letter-spacing:4px;margin-top:6px}.site-header nav{display:flex;gap:25px;align-items:center}.site-header nav a{font:800 13px 'Barlow Condensed',sans-serif;letter-spacing:1px;text-decoration:none}.nav-cta{border-bottom:3px solid var(--gold);padding-bottom:5px}.hero{position:relative;background:linear-gradient(105deg,#f8f4ec 40%,#d7e4e7 100%);overflow:hidden}.hero-inner{max-width:1300px;margin:auto;min-height:615px;display:grid;grid-template-columns:52% 48%;align-items:center}.hero-copy{padding:50px 0 60px max(28px,calc((100vw - 1140px)/2));z-index:2}.eyebrow{font-size:13px;letter-spacing:2px;font-weight:700}.hero h1{font:900 clamp(72px,9.2vw,140px)/.78 'Barlow Condensed',sans-serif;letter-spacing:-2px;margin:24px 0 8px;max-width:660px}.hero h1 em{display:block;color:var(--coral);font-style:normal;white-space:nowrap}.scribble{height:12px;width:min(90%,520px);background:var(--gold);transform:rotate(-2deg);border-radius:60% 20% 70% 15%;margin:24px 0 36px}.hero h2{font:800 clamp(32px,4vw,52px) 'Barlow Condensed',sans-serif;margin:0}.hero-sub{font:700 19px 'Barlow Condensed',sans-serif;letter-spacing:6px;margin:6px 0 28px}.btn{display:inline-block;padding:16px 28px;border-radius:40px;text-decoration:none;font-weight:800;text-align:center;transition:transform .2s,filter .2s}.btn:hover{transform:translateY(-3px);filter:brightness(.96)}.btn-coral{background:var(--coral);color:white}.btn-gold{background:var(--gold);color:var(--navy)}.hero-art{align-self:stretch;display:flex;align-items:flex-end;justify-content:center;gap:12px;padding:70px 28px 35px 0}.portrait{width:48%;height:420px;position:relative;border-radius:180px 180px 8px 8px;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 40px #092f4729;overflow:hidden}.portrait-mari{background:linear-gradient(145deg,#ffb5a9,#d84c57)}.portrait-michael{background:linear-gradient(145deg,#fbe0a2,#d59e2d);height:460px}.initial{font:900 260px 'Barlow Condensed',sans-serif;color:#ffffff45}.name-ribbon{position:absolute;bottom:35px;left:-5px;right:-5px;transform:rotate(-5deg);background:var(--coral);color:white;text-align:center;font:900 28px/.9 'Barlow Condensed',sans-serif;padding:14px 5px}.portrait-michael .name-ribbon{background:var(--gold);color:var(--navy);transform:rotate(5deg)}.photo-note{font-size:11px;color:#526572;text-align:right;margin:-24px 30px 12px;position:relative}.ranking{background:var(--navy);color:white;padding:75px 0 82px}.section-heading{font:900 clamp(48px,6vw,76px)/.95 'Barlow Condensed',sans-serif;text-align:center;margin:0 0 22px}.ranking .section-heading span{color:var(--gold)}.intro{max-width:850px;text-align:center;margin:0 auto 40px;font-size:17px;line-height:1.7}.ballot-wrap{display:flex;align-items:center;justify-content:center;gap:35px}.ballot{background:var(--cream);color:var(--navy);width:min(680px,100%);padding:28px;border-radius:8px;box-shadow:8px 12px 0 #031f30;transform:rotate(-1deg)}.ballot-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;line-height:1.4;margin-bottom:16px}.ballot-top strong{font-size:15px}.ballot-stamp{color:#bb4848;border:2px solid #bb4848;padding:5px;font-weight:800;transform:rotate(8deg)}.ballot table{width:100%;border-collapse:collapse;text-align:center}.ballot th,.ballot td{border:1px solid #91a4ac;padding:13px 10px}.ballot thead th{background:#e3e5e2;font-size:13px}.ballot tbody th{text-align:left;font-size:17px}.bubble{display:inline-block;border:2px solid #355a6a;border-radius:50%;width:34px;height:24px}.bubble.filled{background:var(--navy)}.ballot-side{width:165px}.ballot-side strong{display:inline-block;background:var(--coral);font:900 29px 'Barlow Condensed',sans-serif;padding:8px 15px;transform:rotate(-6deg)}.ballot-side p{font-size:15px}.ballot-side span{font-size:70px;color:var(--coral)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}.step{position:relative;background:var(--cream);color:var(--navy);border-radius:8px;padding:34px 28px 30px;min-height:260px}.number{position:absolute;top:16px;left:18px;background:var(--coral);color:white;border-radius:50%;font:900 28px 'Barlow Condensed',sans-serif;width:43px;height:43px;text-align:center;line-height:43px}.step-icon{text-align:center;font:800 58px/1 'Barlow Condensed',sans-serif;min-height:95px;color:var(--navy)}.step p{font-size:17px;line-height:1.4;margin:8px 0 0}.endorsements{display:grid;grid-template-columns:1fr 1fr}.quote{min-height:450px;padding:65px max(30px,calc((100vw - 1140px)/2)) 65px 7vw;position:relative;overflow:hidden}.quote-mari{background:var(--coral);color:white}.quote-michael{background:var(--gold);color:var(--navy);padding-left:6vw;padding-right:7vw}.quote-inner{position:relative;z-index:1;max-width:510px}.quote-label{font:800 21px 'Barlow Condensed',sans-serif;letter-spacing:2px}.quote blockquote{font:700 clamp(24px,2.8vw,36px)/1.24 Georgia,serif;margin:32px 0 24px}.attribution{font:800 19px 'Barlow Condensed',sans-serif;letter-spacing:1px}.quote-watermark{position:absolute;right:-10px;bottom:-140px;font:900 480px 'Barlow Condensed',sans-serif;opacity:.08}.learn{padding:75px 0 85px}.learn .section-heading{color:var(--navy)}.accent-rays{color:var(--coral)}.link-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;text-align:center;margin-top:45px}.link-grid>div:first-child{border-right:1px solid #bac5c9;padding-right:60px}.link-grid h3{font:900 28px 'Barlow Condensed',sans-serif;color:var(--coral);margin:0 0 18px}.link-grid>div:last-child h3{color:#d59e2d}.link-grid .btn{width:100%;max-width:350px}.closing{background:linear-gradient(130deg,#0b3c56,#061e30);color:white;padding:60px 0}.closing .container{display:flex;justify-content:space-between;align-items:center;gap:30px}.closing p{font:900 clamp(38px,5vw,64px)/.95 'Barlow Condensed',sans-serif;margin:0}.closing p span{color:var(--gold)}.closing a{font-weight:800;text-decoration:none;border-bottom:2px solid var(--coral);white-space:nowrap}footer{background:#061f31;color:white;padding:20px 24px;text-align:center;font-size:12px;line-height:1.5}@media(max-width:850px){.site-header nav{gap:14px}.site-header nav a:nth-child(2){display:none}.hero-inner{grid-template-columns:1fr}.hero-copy{padding:55px 28px 20px}.hero h1{font-size:clamp(70px,13vw,110px)}.hero-art{height:350px;padding:0 25px 20px;justify-content:center}.portrait,.portrait-michael{height:310px;max-width:260px}.initial{font-size:170px}.photo-note{margin:0 20px 12px}.ballot-side{display:none}.quote{padding:55px 30px}}@media(max-width:600px){.site-header{height:70px;padding:0 18px}.wordmark{font-size:25px}.wordmark small{font-size:9px}.site-header nav a:not(:last-child){display:none}.hero-copy{padding:40px 20px 20px}.hero h1{font-size:clamp(61px,15vw,95px)}.hero h2{font-size:34px}.hero-sub{font-size:15px;letter-spacing:3px}.hero-art{height:290px}.portrait,.portrait-michael{height:260px}.name-ribbon{font-size:22px}.ranking{padding:55px 0}.container{padding:0 18px}.intro{font-size:15px}.ballot{padding:13px;transform:none}.ballot-top{font-size:10px}.ballot-top strong{font-size:11px}.ballot th,.ballot td{padding:9px 3px}.ballot tbody th{font-size:12px}.ballot thead th{font-size:11px}.bubble{width:26px;height:19px}.steps{grid-template-columns:1fr;margin-top:35px}.step{min-height:0;padding:24px 25px 25px 85px}.step-icon{min-height:0;font-size:40px;text-align:left}.step p{font-size:16px}.endorsements{grid-template-columns:1fr}.quote{min-height:0;padding:45px 28px}.quote blockquote{font-size:27px}.link-grid{grid-template-columns:1fr;gap:35px}.link-grid>div:first-child{border-right:0;padding-right:0}.closing .container{display:block}.closing a{display:inline-block;margin-top:25px}}

.candidate-photo{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}.portrait-mari .candidate-photo{object-position:center 28%}.portrait-michael .candidate-photo{object-position:center 18%}

/* Berkeley skyline: subtle backdrop in the hero, photo finish at the bottom */
.hero{background:linear-gradient(90deg,rgba(248,244,236,.98) 0%,rgba(248,244,236,.94) 31%,rgba(248,244,236,.53) 65%,rgba(248,244,236,.15) 100%),url("berkeley-skyline.jpg") center 46%/cover no-repeat}
.closing{background:linear-gradient(90deg,rgba(6,31,49,.88),rgba(6,31,49,.36)),url("berkeley-skyline.jpg") center 57%/cover no-repeat}
/* Compact portraits below the candidate names in each quote panel */
.endorsements .quote { min-height: 0; padding-bottom: 65px; }
.endorsements .quote-inner { max-width: 560px; }
.endorsements .quote-avatar {
  display: block;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  border: 4px solid rgba(255,255,255,.85);
  box-shadow: 0 5px 16px rgba(0,0,0,.15);
  margin-top: 17px;
}
.endorsements .quote-michael .quote-avatar { border-color: rgba(9,47,71,.25); object-position: center 18%; }
.endorsements .attribution { margin-bottom: 0; }
@media (max-width: 850px) { .endorsements .quote { padding: 48px 30px; } }
@media (max-width: 600px) { .endorsements .quote { padding: 42px 26px; } .endorsements .quote-avatar { width: 84px; height: 84px; } }

/* Hero layout correction: never allow headlines to cover candidate faces. */
.hero-inner { grid-template-columns: minmax(0, 49%) minmax(0, 51%); }
.hero-copy { min-width: 0; padding-right: 18px; position: relative; z-index: 1; }
.hero-art { min-width: 0; position: relative; z-index: 2; }
.hero h1 { max-width: 100%; font-size: clamp(64px, 7.3vw, 108px); line-height: .88; overflow-wrap: normal; }
.hero h1 em { font-size: .76em; letter-spacing: -1.5px; white-space: nowrap; }
.hero h2 { font-size: clamp(30px, 3.1vw, 48px); }
@media (min-width: 851px) and (max-width: 1199px) {
  .hero-inner { grid-template-columns: minmax(0, 48%) minmax(0, 52%); }
  .hero-copy { padding-left: 28px; }
  .hero h1 { font-size: clamp(60px, 7.1vw, 88px); }
  .hero h1 em { font-size: .72em; }
  .hero-art { padding-right: 20px; }
  .name-ribbon { font-size: clamp(19px, 2.2vw, 28px); }
}
@media (max-width: 850px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-right: 28px; }
  .hero h1 { font-size: clamp(65px, 12vw, 105px); }
  .hero h1 em { font-size: .83em; }
}
@media (max-width: 600px) {
  .hero-copy { padding-right: 20px; }
  .hero h1 { font-size: clamp(58px, 13vw, 78px); }
  .hero h1 em { font-size: clamp(42px, 10.3vw, 64px); letter-spacing: -1px; }
}

/* Equal-height hero portraits across all viewport sizes */
.hero-art .portrait,
.hero-art .portrait-michael {
  height: 420px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 290px;
  align-self: flex-end;
}
.hero-art .candidate-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 850px) {
  .hero-art .portrait,
  .hero-art .portrait-michael { height: 310px; }
}
@media (max-width: 600px) {
  .hero-art .portrait,
  .hero-art .portrait-michael { height: 260px; }
}