/* =========  Library Catalogue  ========= */

:root{
  --lib-blue: #0A4F6A;      /* banner color */
  --ink: #0a0a0a;
  --divider: #d9d9d9;
  --accent: #C55242;        /* terracotta gear color */
  --script: #5FA8D1;        /* light blue script word */
}

/* Layout container */
.container{ max-width: 1800px; margin: 0 auto; padding: 0 2rem; }

/* --- HERO STRIP --- */
.libcat-hero{
  background: var(--lib-blue);
  color: #fff;
  border-bottom: 1px solid #000;       /* site rhythm */
}

.libcat-title{
  margin: 0;
  padding: 2.25rem 0 .5rem;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* small arch icon after the title */
.libcat-title .lib-icon{
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.libcat-title .lib-icon img{
  width: 18px;          /* adjust to taste (your mock is ~18–20px) */
  height: auto;
  display: block;
}

/* sub-headline on the blue strip */
.libcat-sub{
  margin: .35rem 0 2rem;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.45;
  color: #fff;          /* <- was black; should be white on the blue banner */
  max-width: 90ch;
}

/* --- TWO PANEL GRID --- */
.libcat-grid{
  background:#fff;
  border-top:1px solid #000;
}
.libcat-grid-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;                              /* seam is a divider line */
  position: relative;
}

/* center divider */
.libcat-grid-inner::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:50%;
  width:1px;
  background: var(--divider);
  transform: translateX(-0.5px);
  pointer-events: none;
}

/* cards are huge, centered, fully clickable */
.libcat-card{
  text-decoration:none;
  color: var(--ink);
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5.25rem) 1rem;
  min-height: 520px;
  position: relative;
  outline-offset: 4px;
}
.libcat-card:hover{ background: #fafafa; }
.libcat-card:focus-visible{ outline: 3px solid #0D9AA4; }

/* icon */
.libcat-icon{
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  line-height: 0;
}
.libcat-icon img{
  width: clamp(160px, 26vw, 240px);
  height: auto;
  display:block;
}

/* title + script word */
.libcat-card-title{
  margin: 0;
  text-align: left;
  display: grid;
  gap:.25rem;
  align-items: start;
}
.libcat-card-title > span{
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.libcat-script{
  font-style: italic;                 /* swap to your handwritten font if needed */
  font-size: clamp(1.6rem, 4.6vw, 3.6rem);
  line-height: 1;
  color: var(--script);
  font-weight: 500;
  letter-spacing: .02em;
}

/* seam at grid bottom */
.libcat-grid .container{
  border-bottom: 1px solid #000;
}

/* --- Responsive --- */
@media (max-width: 900px){
  .libcat-grid-inner{
    grid-template-columns: 1fr;
  }
  .libcat-grid-inner::before{ display:none; }
  .libcat-card{ min-height: 420px; padding: 3rem 1.25rem; }
  .libcat-sub{ max-width: 80ch; }
}