:root{
  --bg:        #f5f8fc;   /* light blueish background */
  --ring-1:    #1e3a8a;   /* darkest blue (front ring) */
  --ring-2:    #3b82f6;   /* medium blue (middle ring) */
  --ring-3:    #93c5fd;   /* lightest blue (back ring) */
  --text:      #1f2937;   /* dark gray text */
  --muted:     #4b5563;   /* muted gray */
  --accent:    #2563eb;   /* button + name highlight blue */
  --btn-text:  #ffffff;   /* white text on button */
}

/* ====== LAYOUT ====== */
.author-hero{
  background: var(--bg);
  padding: clamp(48px, 6vw, 80px) 24px;
  height:100%;
}
.author-container{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr; 
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

/* ====== LEFT SIDE: photo + concentric rings ====== */
.author-visual{
 position: relative;
    aspect-ratio: 1.05 / 1;
    min-height: 420px;
}
.rings{
    position: absolute;
    inset: 0;
    display: grid
;
    place-items: center;
    pointer-events: none;
    aspect-ratio: 1;
    /* top: 21rem; */
    width: 51rem;
    height: 39rem;
    left: -24rem;
    top: -4rem;
}
.ring{
  position: absolute;
  border-radius: 999px;
}
.ring-1{ width: 68%; height: 68%; background: var(--ring-1); }
.ring-2{ width: 88%; height: 88%; background: var(--ring-2); }
.ring-3{ width: 110%; height: 110%; background: var(--ring-3); }

.author-photo{
     position: absolute;
    right: 3rem;
    margin: -19rem 0rem;
    min-width: 45rem;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 1.18));
}

/* ====== RIGHT SIDE: text ====== */
.author-copy{
   color: var(--muted);
    margin: 0 0 .7rem 0;
    font-size: large;
    width: 53rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.eyebrow{
      display: inline-block;
    font-size: 1rem;
    font-weight: 100;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #ffffff;
    background: #000000;
    border-radius: 10rem;
    width: 14rem;
    font-family: "Norwester", sans-serif, -apple-system, Segoe UI, Roboto, 'Norwester', sans-serif;
    padding: 0rem 1.5rem;
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .12);
    cursor: pointer;
    margin: 1rem 0rem;
    margin-top: 0rem;
}
.eyebrow:hover{
background:black;
box-shadow: 0 10px 18px  var(--muted);
color: #ffffff;
}
.author-name{
  margin: 0 0 .9rem 0;
  font-size: clamp(2rem, 3.4vw, 4rem);
  font-weight: 800;
  letter-spacing: .03em;
  font-family: "Norwester", sans-serif, -apple-system, Segoe UI, Roboto, 'Norwester', sans-serif;
  line-height: 1.05;
  color: var(--accent);
}
.lead{
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0 0 .7rem 0;
  font-family: "Norwester", sans-serif, -apple-system, Segoe UI, Roboto, 'Norwester', sans-serif;
}
.author-copy p{
       color: var(--muted);
    margin: 0 0 .7rem 0;
    font-size: x-large;
    width: 59rem;
    font-family: "Norwester", sans-serif, -apple-system, Segoe UI, Roboto, 'Norwester', sans-serif;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* Read More button */
.cta{
margin: 0rem 0rem;
    /* padding: 1.85rem 3.2rem; */
    padding: 0.85rem 2.2rem;
    background: var(--accent);
    color: var(--btn-text);
    font-weight: 100;
    font-size: 2rem;
    border-radius: 46px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .12);
    font-family: "Norwester", sans-serif, -apple-system, Segoe UI, Roboto, 'Norwester', sans-serif;
}
.cta:hover{ 
  background: #000000;
   box-shadow: 0 22px 25px rgba(0, 89, 255, 0.3);
   transform: translateY(-3px) scale(1.05);
   }
.cta:active{ transform: translateY(0); opacity: .9; }


  .highlights {
    display: inline-block;
    padding: 0.3rem 0.5em;
    font-weight: 100;
    font-size: 0.8rem;
    border-radius: 8px;
    background: #ff4e00;
    color: #fff;
    margin-bottom: 0rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Norwester", sans-serif, -apple-system, Segoe UI, Roboto, "Norwester", sans-serif;
}
.highlights:hover{
  background-color: black;
  box-shadow: 0 10px 18px #ff4e00;
}
/* ====== RESPONSIVE ====== */
@media (max-width: 980px){
  .author-container{ grid-template-columns: 1fr; }
  .author-visual{ min-height: 360px; margin-bottom: 4px; }
  .author-photo{ left: 4%; transform: translateX(-50%); width: auto; height: 100%; }
  .rings .ring-3{ width: 120%; height: 120%; }
}
/* ====== RESPONSIVE AUTHOR SECTION ====== */
@media (max-width: 980px) {
  .author-container {
    grid-template-columns: 1fr;   /* stack columns */
    text-align: center;
  }

  .author-visual {
    min-height: 300px;
    margin-bottom: 2rem;
  }

  .author-photo {
               position: relative;
        margin: 1rem;
        min-width: auto;
        max-width: 326px;
        margin: 1rem 1rem;
        height: auto;
        right: auto;
        transform: none;
    
  }

  .rings {
    width: 100%;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
  }

  .author-copy {
width: 100%;
        margin: 47px auto;
  }

  .author-copy p {
    width: 100%;
    font-size: 1rem;
    margin: 1rem 0;
  }

  .author-name {
    font-size: 1.8rem;
  }

  .cta {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    display: inline-block;
    margin-top: 1rem;
  }
}

@media (max-width: 600px) {
  .author-name {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .eyebrow {
    font-size: 0.85rem;
    width: auto;
    padding: 0.3rem 0.8rem;
  }

  .author-copy p {
    font-size: 0.9rem;
  }
}