/* =====================================================

       BRAND COLORS

    ===================================================== */

 

    :root {

      --navy: #102944;

      --navy-dark: #061827;

      --gold: #c99834;

      --gold-light: #dfb75b;

      --cream: #f7f4ed;

      --white: #ffffff;

      --text: #202934;

      --muted: #646b72;

      --border: #e2ddd3;

    }

 

 

    /* =====================================================

       BASE

    ===================================================== */

 

    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }

 

    html {

      scroll-behavior: smooth;

    }

 

    body {

      font-family: "Poppins", sans-serif;

      color: var(--text);

      background: var(--white);

      line-height: 1.6;

    }

 

    h1,

    h2,

    h3,

    h4 {

       font-family: "Cinzel", serif;

      font-weight: 500;

    }

 

    img {

      width: 100%;

      display: block;

    }

 

    a {

      text-decoration: none;

      color: inherit;

    }

 

    .container {

      width: min(1200px, 92%);

      margin: 0 auto;

    }

 

 

    /* =====================================================

       HERO

    ===================================================== */

 

    .hero {

      background:

        url("./image/banner.png")

        center center / cover no-repeat;

 

      color: var(--white);

      position: relative;

      overflow: hidden;

    }

 

    .hero-inner {

      min-height: 700px;

      display: grid;

      grid-template-columns: 1fr 1fr;

      align-items: center;

      gap: 60px;

      padding: 70px 0;

    }

 

    .hero-logo {

      max-width: 460px;

      margin-bottom: 30px;

    }

 

    .hero-gold-line {

      width: 62px;

      height: 3px;

      background: var(--gold);

      margin-bottom: 25px;

    }

 

.hero h1 {
    font-size: clamp(2.7rem, 5vw, 4.5rem);
    line-height: 48px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    max-width: 650px;
    font-size: 40px;
   
}

 

    .hero h1 span {

      color: var(--gold);

    }

 

    .hero-description {

      font-size: 16px;
      font-weight: 400;

      max-width: 590px;

      color: rgba(255,255,255,.92);

      margin-bottom: 32px;

    }

 

  .submission-status {
    display: inline-flex;
    font-family: "Poppins", sans-serif;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--gold);
    padding: 10px 22px;
    color: var(--gold-light);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 18px;
}

 

    .submission-status span {

      font-size: 1.3rem;

    }

 

    .hero-art {

      display: flex;

      align-items: center;

      justify-content: center;

    }

 

    .hero-art img {

      max-width: 570px;

      object-fit: contain;

      filter: drop-shadow(0 15px 25px rgba(0,0,0,.2));

    }

 

 

    /* =====================================================

       MISSION

    ===================================================== */

 

    .mission {

      background: var(--cream);

      padding: 72px 0;

      text-align: center;

    }

 

  .eyebrow {
    font-family: "Poppins", sans-serif;
    color: var(--gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 12px;
}

 

    .small-divider {

      width: 40px;

      height: 2px;

      background: var(--gold);

      margin: 0 auto 24px;

    }

 

    .mission-statement {
    font-family: "Cinzel", serif;
    color: var(--navy);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.35;
    max-width: 1000px;
    margin: 0 auto;
    font-size: 28px;
    font-weight: 600;
}

 

 

    /* =====================================================

       FOUR VALUES

    ===================================================== */

 

    .values {

      background: var(--cream);

      padding: 10px 0 75px;

    }

 

    .value-grid {

      display: grid;

      grid-template-columns: repeat(4, 1fr);

    }

 

    .value {

      text-align: center;

      padding: 20px 28px;

      border-right: 1px solid #d8d1c5;

    }

 

    .value:last-child {

      border-right: none;

    }

 

  

 

   .value h3 {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--navy-dark);
    margin-bottom: 12px;
}
 

    .value p {

      font-size: .98rem;

      max-width: 230px;

      margin: auto;

    }

 

 

    /* =====================================================

       ABOUT / FEATURED BOOKS

    ===================================================== */

 

    .publisher-section {

      display: grid;

      grid-template-columns: 36% 64%;

      background: #fbfaf7;

    }

 

 

    /* ABOUT PANEL */

 

    .about-panel {

      background:

        linear-gradient(

          180deg,

          var(--navy-dark),

          var(--navy)

        );

 

      color: white;

      padding: 60px 50px;

    }

 

.about-panel h2 {
    font-family: "Poppins", sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 15px;
}
 
.about-panel p {
    font-size: 16px;
    margin-bottom: 10px;
    font-family: 'Poppins';
    font-weight: 400;
}
 

    .closed-box {

      margin-top: 30px;

      border: 1px solid var(--gold);

      padding: 17px 20px;

      text-align: center;

      color: var(--gold-light);

      text-transform: uppercase;

      letter-spacing: 1px;

      font-weight: 700;

      font-size: .94rem;

    }

 

 

    /* BOOK PANEL */

 

    .books-panel {

      padding: 58px 45px 55px;

    }

 

  .books-panel-title {
    font-family: "Poppins", sans-serif;
    text-align: center;
    color: var(--navy-dark);
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 36px;
}
 

    .book-grid {

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 26px;

      align-items: start;

    }

 

    .book {

      text-align: center;

    }

 

    .book-link {

      display: block;

    }

 

    .book-cover {

      overflow: hidden;

      margin-bottom: 18px;

      background: white;

      box-shadow:

        0 7px 18px rgba(0,0,0,.15),

        0 2px 5px rgba(0,0,0,.08);

 

      transition: transform .22s ease, box-shadow .22s ease;

    }

 

  .book-cover img {
    width: 100%;
    /* aspect-ratio: 2 / 3; */
    /* object-fit: cover; */
}

 

    .book-link:hover .book-cover {

      transform: translateY(-5px);

      box-shadow: 0 13px 28px rgba(0,0,0,.2);

    }

 

 .book h3 {
    font-family: "Poppins", sans-serif;
    color: var(--navy-dark);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 5px;
}

 

    .book p {

      font-size: .92rem;

      color: #555;

    }

 

 

    /* =====================================================

       CLOSING SECTION

    ===================================================== */

 

    .closing {

      display: grid;

      grid-template-columns: 25% 50% 25%;

      min-height: 260px;

      background: var(--navy-dark);

      color: white;

    }

 

    .closing-image {

      height: 100%;

      overflow: hidden;

    }

 

    .closing-image img {

      height: 100%;

      object-fit: cover;

    }

 

    .closing-message {

      background:

        linear-gradient(

          135deg,

          var(--navy-dark),

          var(--navy)

        );

 

      display: flex;

      flex-direction: column;

      justify-content: center;

      text-align: center;

      padding: 45px;

    }

 

    .closing-message h2 {

      color: var(--gold-light);

      font-size: 2.1rem;

      margin-bottom: 8px;

    }

 

    .closing-divider {

      width: 42px;

      height: 2px;

      background: var(--gold);

      margin: 8px auto 18px;

    }

 

    .closing-message p {

      font-size: 1.2rem;

      max-width: 570px;

      margin: 0 auto;

    }

 

 

    /* =====================================================

       FOOTER

    ===================================================== */

 

    footer {

      background: #071a2c;

      color: white;

      padding: 25px 0;

    }

 

  .footer-inner {
    display: block;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.footer-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.footer-ul ul li {
    display: inline-block;
    margin-left: 40px;
}

.copyright {
    text-align: right;
    margin: 30px 0 0;
}

.footer-ul ul li {
    display: inline-block;
    margin-left: 20px;
    color: var(--gold);
}

.footer-ul ul li a{
    color: #fff !important;
}

.submission-status svg {
    font-size: 35px;
}
 

    .footer-logo {

      width: 190px;

    }

 

    .copyright {

      color: rgba(255,255,255,.7);

      font-size: .92rem;

    }

 

 

    /* =====================================================

       RESPONSIVE

    ===================================================== */

 

    @media (max-width: 1000px) {

 

      .hero-inner {

        grid-template-columns: 1fr;

        text-align: center;

      }

 

      .hero-logo {

        margin-left: auto;

        margin-right: auto;

      }

 

      .hero-gold-line {

        margin-left: auto;

        margin-right: auto;

      }

 

      .hero-description {

        margin-left: auto;

        margin-right: auto;

      }

 

      .value-grid {

        grid-template-columns: repeat(2, 1fr);

      }

 

      .value {

        border-right: none;

        margin-bottom: 30px;

      }

 

      .publisher-section {

        grid-template-columns: 1fr;

      }

 

      .book-grid {

        grid-template-columns: repeat(2, 1fr);

      }

 

      .closing {

        grid-template-columns: 1fr;

      }

 

      .closing-image {

        max-height: 280px;

      }

    }

 

 

    @media (max-width: 600px) {

 

      .hero-inner {

        min-height: auto;

      }

 

      .hero h1 {

        font-size: 2.6rem;

      }

 

      .value-grid,

      .book-grid {

        grid-template-columns: 1fr;

      }

 

      .about-panel,

      .books-panel {

        padding: 42px 25px;

      }

 

      .book {

        max-width: 300px;

        margin: 0 auto;

      }

 

      .footer-inner {

        flex-direction: column;

        text-align: center;

      }

 

    }


.value-icon {
    text-align: center;
}

.value-icon img {
    width: 100px;
    margin: auto;
}


.pressbooks .book {
    height: 100%;
}

.pressbooks .book-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}