:root {
      --plum:#54213f;
      --berry:#8f2452;
      --orange:#e65f35;
      --mustard:#e6aa2c;
      --cream:#fff5dc;
      --paper:#f4e6c7;
      --ink:#24191f;
      --white:#fffdf7;
      --teal:#2b6f73;
      --shadow:0 12px 32px rgba(36,25,31,.16);
      --radius:22px;
    }

    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      font-family: Georgia, "Times New Roman", serif;
      color:var(--ink);
      background:linear-gradient(180deg,var(--cream),#fff9ec);
      line-height:1.55;
    }

    a { color:inherit; }
    img { display:block; max-width:100%; }

    .topbar {
      position:sticky;
      top:0;
      z-index:999;
      background:rgba(84,33,63,.97);
      color:#fff;
      border-bottom:5px solid var(--mustard);
      box-shadow:0 4px 18px rgba(0,0,0,.18);
    }

    .nav-wrap {
      max-width:1180px;
      margin:0 auto;
      padding:12px 22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    .brand {
      font-weight:900;
      letter-spacing:.04em;
      text-transform:uppercase;
      white-space:nowrap;
      font-size:1rem;
    }

    nav {
      display:flex;
      flex-wrap:wrap;
      gap:8px 20px;
    }

    nav a {
      text-decoration:none;
      font-family: Georgia, "Times New Roman", serif;
      font-weight:900;
      font-size:.96rem;
    }

    nav a:hover { color:#ffd36f; }

    .hero {
      padding:34px 18px 22px;
      background:
        radial-gradient(circle at 15% 15%, rgba(230,170,44,.20) 0 10%, transparent 10.5%),
        radial-gradient(circle at 88% 74%, rgba(230,95,53,.18) 0 9%, transparent 9.5%),
        linear-gradient(180deg,#fbf2d8 0%, var(--cream) 100%);
    }

    .container {
      max-width:1120px;
      margin:0 auto;
    }

    .hero-art {
      background:#1a1317;
      border-radius:24px;
      padding:12px;
      box-shadow:var(--shadow);
      margin:0 auto 26px;
    }

    .hero-art img {
      border-radius:14px;
      border:3px solid #1a1317;
      width:100%;
      height:auto;
    }

    .hero-copy {
      max-width:840px;
      margin:0 auto;
      text-align:center;
    }

    .eyebrow {
      display:inline-block;
      background:var(--mustard);
      color:var(--plum);
      padding:8px 14px;
      text-transform:uppercase;
      font-weight:900;
      letter-spacing:.14em;
      font-size:.75rem;
      margin-bottom:14px;
      box-shadow:4px 4px 0 var(--ink);
    }

    h1,h2,h3 {
      font-family: Impact, "Arial Black", "Arial Narrow Bold", sans-serif;
      letter-spacing:.015em;
      font-weight:900;
    }

    h1 {
      margin:0;
      color:var(--plum);
      font-size:clamp(2.4rem,6vw,4.8rem);
      line-height:1;
    }

    .tagline {
      margin:14px 0;
      color:var(--berry);
      text-transform:uppercase;
      font-family: Georgia, "Times New Roman", serif;
      font-style:italic;
      font-weight:900;
      letter-spacing:.035em;
    }

    .hero-copy p {
      max-width:720px;
      margin:0 auto;
      font-size:1.06rem;
    }

    .actions {
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:12px;
      margin-top:22px;
    }

    .btn {
      display:inline-block;
      text-decoration:none;
      padding:13px 20px;
      border-radius:999px;
      font-family: Georgia, "Times New Roman", serif;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.045em;
      border:3px solid var(--ink);
      box-shadow:4px 4px 0 var(--ink);
      transition:.15s ease;
    }

    .btn:hover {
      transform:translate(-2px,-2px);
      box-shadow:6px 6px 0 var(--ink);
    }

    .btn.primary {
      background:var(--orange);
      color:#fff;
    }

    .btn.secondary {
      background:#fff;
      color:var(--plum);
    }

    section {
      padding:58px 18px;
    }

    .section-head {
      text-align:center;
      max-width:760px;
      margin:0 auto 28px;
    }

    .section-head .mini {
      display:block;
      margin-bottom:8px;
      color:var(--berry);
      text-transform:uppercase;
      letter-spacing:.15em;
      font-size:.76rem;
      font-weight:900;
    }

    .section-head h2 {
      margin:0;
      color:var(--plum);
      font-size:clamp(2rem,4vw,3.5rem);
      line-height:1.03;
    }

    .section-head p {
      margin:12px auto 0;
      max-width:700px;
      color:#645864;
      font-size:1.03rem;
    }

    .cards {
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:24px;
    }

    .card {
      background:var(--white);
      border:3px solid var(--plum);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .card.full {
      grid-column:1 / -1;
    }

    .card-art {
      display:block;
      background:#1b1418;
      padding:10px;
      text-decoration:none;
    }

    .card-art img {
      width:100%;
      height:auto;
      border-radius:10px;
      border:3px solid #1b1418;
    }

    .card-body {
      padding:22px 22px 24px;
    }

    .card-body h3 {
      margin:0 0 10px;
      color:var(--plum);
      font-size:1.9rem;
      line-height:1.05;
    }

    .meta {
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
      margin:14px 0 18px;
    }

    .pill {
      background:#fff3cc;
      border:2px solid #d8bb6a;
      border-radius:16px;
      padding:10px 12px;
      font-size:.92rem;
    }

    .pill strong {
      display:block;
      font-size:.74rem;
      text-transform:uppercase;
      letter-spacing:.09em;
      color:var(--berry);
      margin-bottom:3px;
    }

    .card-actions {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }

    .two-col {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:24px;
    }

    .info-list {
      margin:12px 0 0;
      padding-left:18px;
    }

    .info-list li { margin:8px 0; }

    .mailing-box {
      max-width:800px;
      margin:0 auto;
      background:var(--berry);
      color:#fff;
      border:8px solid var(--mustard);
      border-radius:30px;
      padding:34px 26px;
      text-align:center;
      box-shadow:var(--shadow);
    }

    .mailing-box h2 {
      margin:0 0 10px;
      color:#fff;
      font-size:clamp(2rem,4vw,3.3rem);
      line-height:1.02;
    }

    .signup {
      display:grid;
      grid-template-columns:1fr auto;
      gap:12px;
      max-width:620px;
      margin:22px auto 0;
    }

    .signup input {
      padding:14px 16px;
      border-radius:999px;
      border:3px solid var(--plum);
      font:inherit;
    }

    .footer {
      background:var(--ink);
      color:#e9dee3;
      text-align:center;
      padding:30px 20px;
      font-size:.92rem;
    }

    .fine {
      margin-top:8px;
      font-size:.82rem;
      opacity:.78;
    }

    .accent-section {
      background:linear-gradient(180deg,var(--paper),#f7edd0);
    }

    @media (max-width: 900px) {
      .cards,
      .two-col,
      .meta {
        grid-template-columns:1fr;
      }

      .nav-wrap {
        flex-direction:column;
        align-items:flex-start;
      }

      .signup {
        grid-template-columns:1fr;
      }
    }