:root{
  --bg: #f4efe6;
  --paper: #f8f4ec;
  --ink: #1f1b18;
  --muted: #6f655b;
  --line: #d8d0c4;
  --line-strong: #b8aa96;
  --accent: #7a2e2a;
  --accent-2: #8b6b2e;
  --card: #fbf8f2;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
}

body{
  font-family: Georgia, "Times New Roman", serif;
  line-height:1.5;
  background-image:
    radial-gradient(rgba(0,0,0,.02) 1px, transparent 1px);
  background-size: 6px 6px;
}

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

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
}

.masthead{
  padding:32px 0 18px;
  text-align:center;
}

.masthead h1{
  margin:0;
  font-size:clamp(2.2rem, 6vw, 4.2rem);
  letter-spacing:.04em;
  font-weight:500;
}

.tagline-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:8px auto 0;
  max-width:760px;
}

.tagline-line{
  height:1px;
  background:var(--line-strong);
  flex:1;
}

.tagline{
  margin:0;
  font-style:italic;
  color:var(--muted);
  white-space:nowrap;
  font-size:1.1rem;
}

.topnav{
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  margin-top:22px;
}

.topnav .nav-inner{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
}

.topnav a{
  padding:14px 18px;
  position:relative;
  color:var(--ink);
}

.topnav a:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:1px;
  height:18px;
  background:var(--line);
  transform:translateY(-50%);
}

.topnav a:hover{
  color:var(--accent);
}

.section{
  padding:36px 0;
}

.section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-align:center;
  margin:0 0 24px;
}

.section-title::before,
.section-title::after{
  content:"";
  height:1px;
  background:var(--line-strong);
  flex:1;
  max-width:320px;
}

.section-title span{
  font-size:clamp(1.5rem, 3vw, 2.2rem);
  font-weight:600;
}

.hero-wrap{
  margin-top:22px;
}

.hero{
  position:relative;
  min-height:430px;
  border:1px solid var(--line-strong);
  background:
    linear-gradient(rgba(244,239,230,.45), rgba(244,239,230,.45)),
    #d8cfc2;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  box-shadow:var(--shadow);
}



.hero-overlay{
  position:absolute;
  inset:auto 24px 24px 24px;
  max-width:680px;
  margin:auto;
  background:rgba(248,244,236,0.95);
  border:1px solid #b79f85;
  padding:28px 32px;
  text-align:center;
  box-shadow:0 14px 32px rgba(0,0,0,0.18);
  left:50%;
  transform:translateX(-50%);
}

.case-kicker{
  margin:0 0 6px;
  color:var(--accent);
  letter-spacing:.08em;
  font-size:.9rem;
  text-transform:uppercase;
}

.case-sub{
  margin:0 0 6px;
  color:var(--muted);
  font-size:1rem;
}

.hero h2{
  margin:0;
  font-size:clamp(2rem, 5vw, 4rem);
  line-height:1.05;
  font-weight:500;
}

.case-no{
  margin:8px 0 10px;
  color:var(--muted);
  font-size:1rem;
}

.case-desc{
  margin:0 auto;
  max-width:42ch;
  font-size:1.15rem;
}

.btn{
  display:inline-block;
  margin-top:16px;
  padding:12px 24px;
  background:#201c19;
  color:#fff;
  border:1px solid #000;
  box-shadow:0 6px 14px rgba(0,0,0,.14);
}

.btn:hover{
  background:var(--accent);
}

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

.card{
  background:var(--card);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  padding:22px;
  text-align:center;
}

.card h3{
  margin:0 0 8px;
  font-size:1.8rem;
  font-weight:500;
}

.card p{
  margin:0 0 14px;
  color:var(--muted);
}

.card .play-link{
  display:inline-block;
  padding:10px 18px;
  border:1px solid var(--line-strong);
  background:#fff;
}

.card .play-link:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.archive-list{
  text-align:center;
  color:var(--muted);
  font-size:1.08rem;
}

.archive-list a{
  color:var(--ink);
}

.archive-list a:hover{
  color:var(--accent);
}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}

.panel{
  background:transparent;
  border-top:1px solid var(--line-strong);
  padding-top:18px;
  text-align:center;
}

.panel h3{
  margin:0 0 12px;
  font-size:2rem;
  font-weight:500;
}

.panel ul{
  margin:0;
  padding:0;
  list-style:none;
}

.panel li{
  padding:7px 0;
  color:var(--muted);
}

.panel li a{
  color:var(--ink);
}

.panel li a:hover{
  color:var(--accent);
}

.member-box{
  text-align:center;
  padding:28px 18px 10px;
}

.member-box h3{
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:500;
  margin:0 0 10px;
}

.member-box p{
  color:var(--muted);
  max-width:42ch;
  margin:0 auto 14px;
  font-size:1.08rem;
}

.footer-space{
  height:30px;
}

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

  .two-col{
    grid-template-columns:1fr;
  }

  .hero{
    min-height:360px;
  }

  .hero-overlay{
    inset:auto 16px 16px 16px;
    width:calc(100% - 32px);
    transform:none;
    left:16px;
  }
}

@media (max-width: 560px){
  .masthead{
    padding-top:22px;
  }

  .topnav a{
    padding:12px 14px;
  }

  .hero{
    min-height:320px;
  }

  .hero-overlay{
    padding:18px;
  }

  .case-desc{
    font-size:1rem;
  }

  .card h3,
  .panel h3{
    font-size:1.5rem;
  }
}
       
/* ================================
   BUTTON SYSTEM — EDITORIAL STYLE
================================ */

/* Primary button (hero) */
.btn-primary {
    display: inline-block;
    padding: 12px 28px;

    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #f4efe6;
    background: #2a2118;

    border: 1px solid #1a140f;

    text-decoration: none;

    /* subtle engraved feel */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 2px 4px rgba(0,0,0,0.15);

    transition: all 0.2s ease;
}

/* Hover — refined, not flashy */
.btn-primary:hover {
    background: #3a2e22;
    border-color: #000;

    transform: translateY(-1px);
}

/* Secondary buttons (cards) */
.btn-primary {
    display: inline-block;
    padding: 13px 30px;

    font-size: 14px; /* slightly larger */
    font-weight: 600;

    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #ffffff;
    background: #2a2118;

    border: 1px solid #000;

    text-decoration: none;

    box-shadow:
        0 2px 6px rgba(0,0,0,0.2);

    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: #3a2e22;
}

.card a:hover {
    background: #e8dcc2;
    border-color: #8e7a52;
}

/* Hover state */
.card a:hover {
    background: #e8dcc2;
    border-color: #8e7a52;
}
/* ================================
   EDITORIAL DIVIDERS
================================ */

/* Section heading container */
.section-title {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
    font-weight: 600;

    margin: 50px 0 30px;
    position: relative;
}

/* Lines on each side */
.section-title::before,
.section-title::after {
    content: "";
    flex: 1;
    height: 1px;

    background: linear-gradient(
        to right,
        transparent,
        #bfae8c,
        transparent
    );

    margin: 0 20px;
}

/* Slight tone refinement for text */
.section-title span {
    color: #2c2418;
}


/* =========================
   Footer
========================= */
/* =========================
   Footer (FIXED CLICKABLE)
========================= */
.site-footer{
  position: relative;
  z-index: 10;
  margin-top: 60px;
  padding: 30px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: transparent;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.footer-left{
  font-size:12px;
  color:#6b6257;
}

.footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  position: relative;
  z-index: 11;
}

.footer-links a{
  text-decoration:none;
  font-size:12px;
  color:var(--muted);
  border-bottom:1px solid transparent;
  pointer-events: auto;
}

.footer-links a:hover{
  border-bottom:1px solid var(--accent);
  color:var(--accent);
}