:root{
--navy:#062b40;
--navy2:#0a4059;
--teal:#147d86;
--gold:#d3b36a;
--cream:#f4f0e6;
--paper:#fbfaf7;
--ink:#122832;
--muted:#65757b;
--line:#dce3df;
--serif:"Playfair Display",Georgia,serif;
--sans:"DM Sans",Arial,sans-serif
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
background:var(--paper);
color:var(--ink);
font:16px/1.7 var(--sans)
}

a{text-decoration:none;color:inherit}

#header{
position:fixed;
z-index:100;
top:0;
left:0;
right:0;
height:86px;
padding:0 5.5vw;
display:flex;
align-items:center;
justify-content:space-between;
color:#fff;
background:linear-gradient(#031c2ddd,transparent);
transition:.25s
}

#header.scrolled{
background:#062b40f7;
box-shadow:0 8px 30px #0003
}

.brand{
display:flex;
flex-direction:column;
line-height:1
}

.brand span{
font-size:9px;
font-weight:700;
letter-spacing:.3em;
color:var(--gold)
}

.brand strong{
font:800 23px/1.05 var(--serif)
}

.brand small{
font-size:7px;
letter-spacing:.18em;
margin-top:5px
}

nav{
display:flex;
align-items:center;
gap:24px;
font-size:12px;
font-weight:700
}

nav a:hover{color:var(--gold)}

.nav-button{
border:1px solid #fff8;
padding:9px 14px
}

#menuButton{
display:none;
background:none;
border:1px solid #fff;
color:#fff;
padding:7px 10px;
font-size:17px
}

.hero{
position:relative;
min-height:100svh;
display:flex;
align-items:center;
color:#fff;
overflow:hidden;
background:var(--navy)
}

.hero-image{
position:absolute;
inset:0;
background:
url("https://mayornick.com/images/nick.jpg")
center/cover no-repeat
}

.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(90deg,#031c2ef4,#062e46b8 45%,#062e4630),
linear-gradient(0deg,#031c2e88,transparent 55%)
}

.hero-content{
position:relative;
z-index:2;
width:89%;
max-width:1180px;
margin:auto;
padding-top:80px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:40px
}

.eyebrow,.section-label{
font-size:10px;
font-weight:700;
letter-spacing:.25em
}

.eyebrow{color:var(--gold)}

h1,h2,h3{font-family:var(--serif)}

h1{
font-size:clamp(54px,7.5vw,100px);
line-height:.96;
letter-spacing:-.03em;
margin:18px 0 25px
}

h1 em,h2 em{
font-style:normal;
color:var(--gold)
}

.hero-intro{
font-size:19px;
max-width:650px;
color:#e2ebed
}

.buttons{
display:flex;
gap:12px;
margin-top:30px
}

.button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:12px 21px;
font-size:11px;
font-weight:700;
letter-spacing:.12em
}

.gold{
background:var(--gold);
color:#172c35
}

.outline{
border:1px solid #fff9;
color:#fff
}

.election-box{
width:220px;
padding:25px;
background:#062b40dd;
border-left:3px solid var(--gold)
}

.election-box span{
font-size:9px;
letter-spacing:.2em
}

.election-box strong{
display:block;
font:700 25px/1.05 var(--serif);
margin:10px 0 15px
}

#countdown{
font-size:11px;
font-weight:700;
color:var(--gold)
}

.hero-bottom{
position:absolute;
z-index:3;
bottom:23px;
left:5.5vw;
right:5.5vw;
display:flex;
justify-content:space-between;
font-size:9px;
letter-spacing:.2em
}

.statement{
background:var(--cream);
padding:115px 7vw
}

.statement-inner{
max-width:950px
}

.section-label{color:var(--teal)}

h2{
font-size:clamp(42px,5vw,68px);
line-height:1.02;
letter-spacing:-.025em;
margin:15px 0 25px
}

.statement h2{
font-size:clamp(40px,5.4vw,72px)
}

.statement p{
max-width:700px;
font-size:18px;
color:var(--muted)
}

.section{
padding:120px 7vw
}

.section-heading{
display:grid;
grid-template-columns:1fr .85fr;
gap:10%;
align-items:end;
margin-bottom:55px
}

.section-heading>p{
color:var(--muted);
font-size:16px;
margin:0
}

.record{
background:#fff
}

.record-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:var(--line);
border:1px solid var(--line)
}

.record-card{
background:#fff;
padding:35px 28px;
min-height:330px;
display:flex;
flex-direction:column;
border-top:3px solid transparent;
transition:.2s
}

.record-card:hover{
border-top-color:var(--teal);
transform:translateY(-3px)
}

.record-card>span{
color:var(--gold);
font-weight:700;
font-size:11px
}

.record-card h3{
font-size:29px;
line-height:1.1;
margin:25px 0 10px
}

.record-card p{
color:var(--muted);
font-size:14px
}

.record-card a{
margin-top:auto;
color:var(--teal);
font-size:11px;
font-weight:700
}

.dark-card{
background:var(--navy);
color:#fff
}

.dark-card p{color:#cbd8dc}
.dark-card a{color:var(--gold)}

.priorities{
display:grid;
grid-template-columns:1fr 1fr;
background:var(--navy);
color:#fff
}

.priority-photo{
min-height:700px;
background:
linear-gradient(#062b4040,#062b4066),
url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1600&q=85")
center/cover
}

.priority-content{
padding:110px 9vw
}

.priority-content .section-label{color:var(--gold)}

.priority-content .large{
font-size:18px;
color:#cbd8dc
}

.priority-list{margin-top:45px}

.priority-list>div{
display:grid;
grid-template-columns:40px 1fr;
gap:12px;
padding:19px 0;
border-top:1px solid #fff2
}

.priority-list b{color:var(--gold)}

.priority-list p{
font-size:14px;
color:#cbd8dc;
margin:0
}

.priority-list strong{color:#fff}

.issues{
background:#f7f9f7
}

.issue-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px
}

.issue-grid article{
background:#fff;
padding:32px 27px;
min-height:300px;
border:1px solid #e0e6e3;
display:flex;
flex-direction:column;
transition:.2s
}

.issue-grid article:hover{
transform:translateY(-3px);
box-shadow:0 18px 45px #062b4012
}

.issue-grid span{
font-size:9px;
letter-spacing:.18em;
font-weight:700;
color:var(--teal)
}

.issue-grid h3{
font-size:28px;
line-height:1.1;
margin:16px 0 10px
}

.issue-grid p{
font-size:14px;
color:var(--muted)
}

.issue-grid a{
margin-top:auto;
font-size:11px;
font-weight:700;
color:var(--teal)
}

.city{
background:var(--cream)
}

.city-grid{
display:grid;
grid-template-columns:1.4fr .8fr .8fr;
grid-template-rows:300px 300px;
gap:5px
}

.city-card{
position:relative;
display:flex;
align-items:flex-end;
overflow:hidden;
color:#fff;
background-position:center;
background-size:cover
}

.city-card:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(transparent 25%,#031d2ed9)
}

.city-card>div{
position:relative;
z-index:2;
padding:28px
}

.city-card span{
font-size:9px;
letter-spacing:.2em;
color:var(--gold);
font-weight:700
}

.city-card h3{
font-size:29px;
line-height:1;
margin:5px 0
}

.city-card p{
font-size:12px;
margin:8px 0 0
}

.coast{
grid-row:span 2;
background-image:
url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=1300&q=85")
}

.butterfly{
background-image:
url("https://images.unsplash.com/photo-1473448912268-2022ce9509d8?auto=format&fit=crop&w=900&q=85")
}

.pinos{
background-image:
url("https://images.unsplash.com/photo-1494783367193-149034c05e8f?auto=format&fit=crop&w=900&q=85")
}

.downtown{
grid-column:2/4;
background-image:
url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1100&q=85")
}

.about{
display:grid;
grid-template-columns:1fr .9fr;
gap:9%;
align-items:center;
background:#fff
}

.about-photo{
min-height:650px;
background:
linear-gradient(0deg,#062b40aa,transparent 50%),
url("https://mayornick.com/images/nick.jpg")
center/cover
}

.about-caption{
padding:0 0 30px 30px;
height:100%;
display:flex;
flex-direction:column;
justify-content:flex-end;
color:#fff
}

.about-caption span{
font-size:10px;
letter-spacing:.2em;
color:var(--gold)
}

.about-caption strong{
font:700 25px var(--serif)
}

.large{
font-size:18px
}

.about>div:last-child>p:not(.section-label){
color:var(--muted)
}

.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
border-top:1px solid var(--line);
padding-top:25px;
margin-top:35px
}

.stats strong{
display:block;
font:700 28px var(--serif);
color:var(--navy)
}

.stats span{
font-size:9px;
letter-spacing:.1em;
color:var(--muted)
}

.quote{
background:var(--teal);
color:#fff;
text-align:center;
padding:120px 7vw
}

.quote>span{
font:700 70px var(--serif);
color:var(--gold);
line-height:.4
}

blockquote{
max-width:900px;
margin:15px auto 20px;
font:600 clamp(35px,5vw,60px)/1.15 var(--serif)
}

.quote p{
font-size:10px;
letter-spacing:.2em
}

.updates{
background:#fff
}

.updates-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}

.updates-grid article{
padding:30px;
background:#f5f7f5;
border-top:3px solid var(--teal);
min-height:270px;
display:flex;
flex-direction:column
}

.updates-grid span{
font-size:9px;
letter-spacing:.18em;
font-weight:700;
color:var(--teal)
}

.updates-grid h3{
font-size:28px;
margin:15px 0 10px
}

.updates-grid p{
font-size:14px;
color:var(--muted)
}

.updates-grid a{
margin-top:auto;
font-size:11px;
font-weight:700;
color:var(--teal)
}

.involved{
padding:120px 7vw;
text-align:center;
color:#fff;
background:
linear-gradient(90deg,#05263aee,#062b40d9),
url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=2200&q=85")
center/cover
}

.involved{
max-width:none
}

.involved .section-label{color:var(--gold)}

.involved p:not(.section-label){
font-size:18px;
color:#d5e0e3
}

.involved .buttons{
justify-content:center
}

footer{
background:#031d2d;
color:#c9d5d9;
padding:50px 7vw 30px
}

.footer-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:30px
}

.footer-links{
display:flex;
gap:25px;
font-size:12px
}

.footer-links a:hover{color:var(--gold)}

.legal{
border-top:1px solid #fff2;
margin-top:40px;
padding-top:20px;
color:#81959e;
font-size:9px
}

.legal strong{color:#b7c5ca}

@media(max-width:900px){

nav{display:none}

nav.open{
display:flex;
position:absolute;
top:86px;
left:0;
right:0;
background:var(--navy);
padding:15px 6vw 25px;
flex-direction:column;
gap:0
}

nav.open a{padding:11px 0}

#menuButton{display:block}

.hero-content{
align-items:flex-start;
flex-direction:column
}

.election-box{width:210px}

.section-heading{
grid-template-columns:1fr
}

.record-grid{
grid-template-columns:1fr 1fr
}

.priorities,.about{
grid-template-columns:1fr
}

.priority-photo{min-height:430px}

.priority-content{
padding:85px 7vw
}

.issue-grid{
grid-template-columns:1fr 1fr
}

.city-grid{
grid-template-columns:1fr 1fr;
grid-template-rows:320px 250px 250px
}

.coast{
grid-column:1/3;
grid-row:auto
}

.downtown{
grid-column:auto
}

.updates-grid{
grid-template-columns:1fr 1fr
}

}

@media(max-width:580px){

#header{
height:75px;
padding:0 5vw
}

.brand strong{font-size:19px}

.hero-content{
padding-top:100px
}

h1{font-size:53px}

.hero-intro{font-size:16px}

.buttons{
flex-direction:column;
align-items:stretch
}

.button{text-align:center}

.section,
.statement{
padding:80px 6vw
}

h2{font-size:43px}

.record-grid,
.issue-grid,
.updates-grid{
grid-template-columns:1fr
}

.city-grid{
display:block
}

.city-card{
min-height:330px;
margin-bottom:5px
}

.about-photo{
min-height:480px
}

.stats{
grid-template-columns:1fr
}

.quote,
.involved{
padding:85px 6vw
}

.footer-top{
align-items:flex-start;
flex-direction:column
}

.footer-links{
flex-wrap:wrap
}

}