/* ===== Base / Background ===== */
:root{
  --bg-image: url('/images/mint-leaves.jpg'); /* static background */
  --maxw: 1100px;
  --card: rgba(249,242,203,.94);
  --ink: #111;
  --ink2:#2b2b2b;
  --brand:#0d5b46;
}


html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  font:16px/1.5 "Josefin Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-image) center/cover fixed no-repeat;
}

/* ===== Nav ===== */
.nav{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 1rem;
  background:#feec88;
  border-bottom:1px solid rgba(0,0,0,.1);
}
.brand{font-weight:800; letter-spacing:.5px}
.menu a{text-transform: uppercase; font-weight: bold; margin-left:1rem; text-decoration:none; color:var(--ink2); font-family: "Notable", sans-serif;}
.menu a:hover{ text-decoration:underline }

/* ===== Tagline ===== */
.tagline{ display:flex; justify-content:center; padding:1rem }
.tagline h1{
  margin:0; padding:.6rem 1rem;
  background:rgba(55,118,90,.85); color:#fff; letter-spacing:1px;
  font-size:clamp(18px,2.6vw,28px);
  border-radius: 8px;
  font-family: "Notable", sans-serif;
  text-align: center;
}

/* ===== Cards ===== */
.cards{
  max-width:var(--maxw);
  margin: 0 auto;
  padding: 1rem;
  display: grid;
  gap: 18px;
}
.card{
  display:grid;
  grid-template-columns: 260px 1fr;
  background:var(--card);
  border-radius:6px;
  overflow:hidden;
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  padding: 1rem;
}

.book .card-publisher {
    background: #1e6c54;
    padding: 10px;
    
}

.record .card-publisher {
    background: #feec88;
    padding: 10px;
}
.card__media img{display:block; width:100%; height:100%; object-fit:cover}
.card__body{padding:16px}
.card__title{margin:0 0 .25rem 0; font-size:28px; line-height:1.2; text-transform: uppercase;font-family: "Notable", sans-serif;}
.card__subtitle{margin-bottom:.75rem; text-transform: uppercase; font-weight: bold;}
.card__desc{margin:.25rem 0 1rem 0}
.card__links{display:flex; flex-wrap:wrap; gap:.5rem}
.btn{
  display:inline-block; padding:.5rem .9rem; border-radius:4px;
  background:#1e6c54; color:#fff; text-decoration:none; font-weight:600;
}
.btn:hover{filter:brightness(1.07)}

.card__logo{
  position:absolute; right:12px; top:12px;
  width:170px; height:auto; max-width:42%;
}

/* ===== Footer ===== */
.footer{ text-align:center; padding:2rem 1rem; color:#feec88; font-weight: bold; text-transform: uppercase; padding: 1rem; background:rgba(55,118,90,.85);letter-spacing:1px; }

/* ===== Modal ===== */
.modal{
  position:fixed; inset:0; background:#f9f2cb;
  display:none; align-items:center; justify-content:center; padding:1rem;
}
.modal[aria-hidden="false"]{ display:flex }
.modal__box{
  max-width:700px; width:min(90vw, 700px);
  background:#fff; border-radius:8px; padding:1rem 1.25rem;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  position: relative;
}
.modal__close{
  appearance:none; border:0; background:transparent; font-size:28px; line-height:1;
  position:absolute;cursor:pointer; top: 8px; right: 8px;
}

/* ===== Responsive ===== */
@media (max-width: 820px){
  .card{
    grid-template-columns: 1fr;
  }
  .card__logo{
    position:static; margin:12px auto 16px auto; display:block;
    width:200px; max-width:60%;
    order:3;
  }

  /* Shrink image proportionally instead of cropping */
  .card__media img {
    max-width: 100%;       /* don’t grow beyond container */
    max-height: 400px;     /* limit height on mobile */
    height: auto;          /* proportional scaling */
    width: auto;           /* prevent stretching */
    margin: 0 auto;        /* optional: center image if narrower */
    display: block;
  }
}