/*
 *
 * style.css for TheSharkPond.com by Scott Bilker
 *
 * Version  1.0: 06/10/26: Created site style sheet.
 * Version  2.0: 06/10/26: Updated for Version 2 site structure.
 *
*/

:root {
   --navy: #152332;
   --deep-blue: #24384d;
   --steel: #557184;
   --parchment: #f4efe3;
   --paper: #fffdf7;
   --gold: #b28a45;
   --brown: #5b4630;
   --muted: #6f746f;
   --line: #d8cbb3;
}

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   background: var(--parchment);
   color: var(--navy);
   font-family: Georgia, 'Times New Roman', serif;
   line-height: 1.6;
}

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

a:hover {
   text-decoration: underline;
}

.wrap {
   max-width: 1120px;
   margin: 0 auto;
   padding: 0 22px;
}

.site-header {
   background: var(--navy);
   border-bottom: 4px solid var(--gold);
}

.nav-wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding-top: 18px;
   padding-bottom: 18px;
}

.logo {
   color: var(--paper);
   font-size: 1.45rem;
   font-weight: bold;
   letter-spacing: .04em;
   text-transform: uppercase;
}

.site-nav {
   display: flex;
   gap: 18px;
   flex-wrap: wrap;
   justify-content: flex-end;
}

.site-nav a {
   color: var(--paper);
   font-size: .95rem;
}

.hero {
   padding: 55px 0 45px;
   background:
      linear-gradient(90deg, rgba(21,35,50,.96), rgba(36,56,77,.88)),
      url('/images/thesharkpond.jpg') center/cover no-repeat;
   color: var(--paper);
}

.hero-grid {
   display: grid;
   grid-template-columns: 330px 1fr;
   gap: 44px;
   align-items: center;
}

.cover {
   width: 100%;
   border: 8px solid rgba(255,255,255,.25);
   box-shadow: 0 18px 42px rgba(0,0,0,.35);
}

.eyebrow {
   color: var(--gold);
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: .85rem;
   font-weight: bold;
}

h1 {
   font-size: 3.1rem;
   line-height: 1.05;
   margin: 10px 0 18px;
}

h2 {
   font-size: 2rem;
   line-height: 1.2;
   margin: 0 0 20px;
}

h3 {
   margin-top: 0;
}

.lede {
   font-size: 1.25rem;
   max-width: 760px;
}

.button-row {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   margin-top: 25px;
}

.button {
   display: inline-block;
   padding: 12px 18px;
   background: var(--gold);
   color: var(--navy);
   font-weight: bold;
   border-radius: 4px;
   border: 1px solid var(--gold);
}

.button.secondary {
   background: transparent;
   color: var(--paper);
   border-color: var(--paper);
}

.section {
   padding: 48px 0;
}

.box {
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 30px;
   box-shadow: 0 10px 24px rgba(21,35,50,.08);
}

.grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 32px;
}

.author-card {
   display: grid;
   grid-template-columns: 185px 1fr;
   gap: 24px;
   align-items: center;
}

.author-photo {
   width: 100%;
   border-radius: 6px;
   border: 5px solid var(--paper);
   box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.signup {
   background: var(--deep-blue);
   color: var(--paper);
}

.signup input,
.signup textarea,
.contact-form input,
.contact-form textarea {
   width: 100%;
   padding: 13px;
   border: 1px solid var(--line);
   border-radius: 4px;
   font-family: Arial, sans-serif;
   font-size: 1rem;
   margin-bottom: 12px;
}

.signup .button,
.contact-form .button {
   cursor: pointer;
   font-family: Georgia, 'Times New Roman', serif;
}

.small-note {
   font-size: .88rem;
   color: var(--muted);
}

.signup .small-note {
   color: #d9dedc;
}

.page-title {
   padding: 46px 0;
   background: var(--deep-blue);
   color: var(--paper);
   border-bottom: 4px solid var(--gold);
}

.content {
   max-width: 860px;
}

.media-list li {
   margin-bottom: 9px;
}

.site-footer {
   background: var(--navy);
   color: var(--paper);
   padding: 38px 0 0;
   margin-top: 40px;
}

.site-footer a {
   color: var(--paper);
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 24px;
}

.copyright {
   margin-top: 24px;
   padding: 18px;
   border-top: 1px solid rgba(255,255,255,.15);
   text-align: center;
   font-size: .9rem;
   color: #d7d0c0;
}

.alert {
   padding: 14px;
   background: #fff3cd;
   border: 1px solid #e5c76b;
   border-radius: 4px;
}

@media (max-width: 800px) {
   .nav-wrap,
   .hero-grid,
   .grid-2,
   .author-card,
   .footer-grid {
      grid-template-columns: 1fr;
      display: grid;
   }

   .site-nav {
      justify-content: flex-start;
   }

   h1 {
      font-size: 2.25rem;
   }
}