/*
Theme Name: Roger Lemons Board Candidate
Theme URI: https://rogerlemons.com
Author: Blake Lemons
Description: Custom executive board candidate website for Roger W. Lemons.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: roger-lemons-board
*/

:root{
  --paper:#FCFCFB;
  --ink:#16232E;
  --ink-soft:#40525E;
  --slate:#5C6B74;
  --brass:#9A6A3C;
  --brass-deep:#7E5327;
  --line:#E4E2DC;
  --line-dark:#2B3A45;
  --maxw:1080px;
  --textw:66ch;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px;
}

@media(max-width:640px){
  .wrap{
    padding:0 22px;
  }
}

a{
  color:var(--brass-deep);
  text-decoration:none;
}

a:hover{
  color:var(--brass);
  text-decoration:underline;
}

h1,h2,h3{
  font-family:"Spectral",Georgia,serif;
  font-weight:400;
  letter-spacing:-.01em;
}

.label{
  font-family:"IBM Plex Sans",sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--brass);
  margin:0 0 18px;
}


/* HEADER */

header.bar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(252,252,251,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}

.bar .wrap{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  height:64px;
}

.brand{
  font-family:"Spectral",serif;
  font-size:1.15rem;
  font-weight:500;
  color:var(--ink);
}

nav a{
  font-size:.92rem;
  color:var(--ink-soft);
  margin-left:26px;
  font-weight:500;
}

nav a:hover{
  color:var(--brass-deep);
}

@media(max-width:640px){
  nav{
    display:none;
  }
}


/* HERO */

.hero{
  padding:90px 0 70px;
  border-bottom:1px solid var(--line);
}

.hero-grid{
    display:grid;
    grid-template-columns:1.5fr .65fr;
    gap:64px;
    align-items:center;
}

@media(max-width:820px){
  .hero-grid{
    grid-template-columns:1fr;
  }
}

.hero h1{
  font-size:clamp(2.3rem,5vw,3.5rem);
  line-height:1.08;
  margin:.15em 0 .5em;
}

.kicker{
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--brass);
}

.lede{
  font-size:1.18rem;
  color:var(--ink-soft);
  max-width:40ch;
}

.cta{
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  font-weight:600;
  padding:14px 26px;
  border-radius:2px;
}

.cta:hover{
  background:var(--brass-deep);
  color:white;
}

.candidate-name {
  font-size: 36px;
  font-weight: 700;
  margin: 12px 0;
}

/* PHOTO */


.photo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}


/* GENERAL SECTIONS */

section.block{
  padding:78px 0;
  border-bottom:1px solid var(--line);
}

section.block h2{
  font-size:clamp(1.6rem,3vw,2.1rem);
}


/* STATS */

.stats{
  border-bottom:1px solid var(--line);
  padding:44px 0;
}

.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

@media(max-width:820px){
  .stats-row{
    grid-template-columns:repeat(2,1fr);
  }
}

.stat .fig{
  font-family:"Spectral",serif;
  font-size:2.1rem;
  color:var(--brass-deep);
}

.stat .cap{
  color:var(--slate);
}


/* BOARD VALUE */

.bvp{
  padding:88px 0;
  border-bottom:1px solid var(--line);
}

.bvp .statement{
  font-family:"Spectral",serif;
  font-size:clamp(1.4rem,2.8vw,1.95rem);
  line-height:1.4;
  max-width:52ch;
}

/* Board Value heading size */
.bvp .label{
  font-size:1.5rem;
}

/* BIO */

.bio p{
  max-width:var(--textw);
  color:var(--ink-soft);
}

/* Biography heading */
.bio .label{
  font-size:1.5rem;
  color:var(--brass);
}


/* CONTRIBUTION */

/* Contribution heading size */
#contribution .label{
  font-size:1.5rem;
  color:var(--brass);
}

.contrib{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--line);
}

.contrib .cell{
  background:var(--paper);
  padding:30px;
}

@media(max-width:700px){
  .contrib{
    grid-template-columns:1fr;
  }
}


/* EXPERIENCE */

#experience .label{
  font-size:1.5rem;
  color:var(--brass);
}

.roles{
  list-style:none;
  padding:0;
}

.role{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  padding:22px 0;
  border-top:1px solid var(--line);
}

@media(max-width:640px){
  .role{
    grid-template-columns:1fr;
  }
}

.yrs{
  color:var(--brass-deep);
  font-weight:600;
}

.r-title{
  font-family:"Spectral",serif;
  font-size:1.22rem;
}

.r-org{
  color:var(--ink-soft);
}

.r-note{
  color:var(--slate);
}


/* EDUCATION */

#education .label{
  font-size:1.5rem;
  color:var(--brass);
}

.edu{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

/* Keep bullets on degree lines */
.edu ul{
  list-style:disc;
  padding-left:24px;
  margin:0;
}

.edu li{
  padding:7px 0;
  color:var(--ink-soft);
}

/* School names on separate, indented lines */
.edu li span{
  display:block;
  margin-left:24px;
  color:var(--slate);
  font-size:0.9rem;
}

@media(max-width:700px){
  .edu{
    grid-template-columns:1fr;
  }
}

/* CONTACT */

.contact{
  background:var(--ink);
  color:white;
  padding:82px 0;
}

.contact h2{
  color:white;
}

.contact p{
  color:#9FB0BA;
}

.contact-links a{
  color:white;
  margin-right:30px;
}


/* FOOTER */

.foot{
  padding:26px 0;
  color:var(--slate);
  font-size:.82rem;
}

.recognition-title {
  font-size: 24px !important;
}