/* harmura site-wide styling (root + show index) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&family=Noto+Serif:wght@600;700&display=swap');
:root {
  --bg:#042f2e;
  --accent:#34d399; 
  --accent-hover:#6ee7b7; 
  --fg:#e9e9ee; 
  --muted:#a7a7b3;
  --card: rgb(0 0 0 / 25%);
  --line:#21212a;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&family=Noto+Serif:wght@600;700&display=swap');
* { box-sizing: border-box; }
body {
  margin: 0;
  font-size:16px; line-height:1.5; font-family:'Noto Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial;background: var(--bg);
  color: var(--fg);
}
header, footer {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 24px 20px;
}
header h1 { 
  margin: 0 0 6px; 
  font-size: 24px; 
  line-height:1.2;
  letter-spacing: -.015em;
}
header .desc { margin: 8px 0 0; color: var(--fg); }
.grid {
  max-width: 1000px; margin: 10px auto 40px; padding: 0 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px;
}
.card {
  display: grid; 
  grid-template-columns: 120px 1fr; 
  gap: 14px;
  background: var(--card); 
  border: 1px solid var(--line);
  border-radius: 14px; 
  padding: 14px;
}
.thumb img {
  width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line);
  background: #111;
}
.body h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.25; }
.summary { margin: 0 0 8px; color: var(--muted); }
.meta { margin: 0 0 10px; color: var(--accent); font-size: 14px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline;   color: var(--accent-hover);
}

/* Show index extras */
.show-top { max-width: 1000px; margin: 0 auto; padding: 20px; }
.season-nav { margin: 20px 0; }
.season-nav a { margin-right: 12px; font-weight: 600; }
.episode-list { margin: 0 0 30px; }
.episode { padding: 10px 0; border-bottom: 1px solid var(--line); }
.episode h3 { margin: 0 0 4px; font-size: 16px; }

/* Buttons for RSS / Episodes / Website on the landing cards */
.links { margin-top: 8px; text-align:center;}
.links .btn {
  display:inline-block;
  margin:2px;
  padding: .55em 1.1em;
  border-radius:10px;
  background:#059669;
  color:#fff;
  text-decoration:none;
  border:1px solid #059669;
  font-weight:700;
  line-height:1.2;
  transition:background-color .2s, border-color .2s, transform .15s;
}
.links .btn:hover {
  background:#10b981;
  border-color:#10b981;
  text-decoration:none;
}


/* — Emerald buttons, to reuse anywhere — */
.btn { display:inline-block; padding:.55em 1.1em; border-radius:10px; font-weight:700; text-decoration:none; }
.btn-primary { background:#059669; color:#fff; border:1px solid #059669; }
.btn-primary:hover, .btn-primary:focus { background:#10b981; border-color:#10b981; color:#fff; text-decoration:none; }
.btn-outline { background:transparent; color:var(--accent); border:2px solid var(--accent); }
.btn-outline:hover, .btn-outline:focus { background:rgba(52,211,153,.12); color:var(--accent-hover); text-decoration:none; }


/* Headings = Noto Serif to match Ghost */
h1,h2,h3,h4,h5,h6{font-family:'Noto Serif', Georgia, Cambria, 'Times New Roman', serif; letter-spacing:.2px;}


/* — Site title link on show pages — */
.site-header{
  max-width:1000px;
  margin:0 auto;
  padding:24px 20px;
  text-align:center;
  letter-spacing: .2px;
}
.site-title{
  color:var(--fg) !important;
  text-decoration:none !important;
  font:700 24px/1.2 'Noto Serif', Georgia, Cambria, 'Times New Roman', serif;
  letter-spacing: -.015em;
}
.site-title:hover,.site-title:focus{
  color:var(--fg) !important;
  text-decoration:none !important;
}

/* Match Ghost heading look */
:root{
  --heading-font: "Noto Serif", ui-serif, Georgia, serif;
  --body-font: "Noto Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

/* global font rendering tweaks similar to Ghost */
html {
  font-kerning: normal;
  font-feature-settings: "kern","liga","clig","calt";
  font-optical-sizing: auto;               /* important for variable Noto Serif */
  text-rendering: optimizeLegibility;
}

/* Main big titles (index & show pages) */
h1, .site-hero h1, .index-title, .site-title {
  font-family: var(--heading-font);
  font-weight: 800;                        /* Ghost uses a heavy weight */
  letter-spacing: -0.01em;                 /* subtle tighten like Ghost */
}

/* Make the site title link look like plain text (no color/hover) */
a.site-title {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;                    /* keep it clickable */
}
a.site-title:hover { color: inherit; text-decoration: none; }

/* Show cards (index) — make title look like plain white text */
.grid .card .body h2 a,
.grid .card .body h2 a:visited {
  color: #fff !important;
  text-decoration: none !important;
  border: 0 !important;
}

/* No change on hover/focus — still white, no underline */
.grid .card .body h2 a:hover,
.grid .card .body h2 a:focus {
  color: #fff !important;
  text-decoration: none !important;
  border: 0 !important;
}

/* Meta line (“3 episodes • Latest: …”) as white */
.grid .card .body .meta {
  color: #fff !important;
}

/* Mobile: stack show cards (thumb on top, text below) */
@media (max-width: 480px) {
  .grid {
    padding: 0 5px;
  }
  
  .grid .card {
    grid-template-columns: 1fr !important;   /* one column */
    gap: 12px;
    padding: 14px;
  }

  .grid .card .thumb {
    width: 100%;
    display: block;
    border-radius: 10px;
    overflow: hidden;                        /* keep rounded corners on full-width img */
    aspect-ratio: 1 / 1;                     /* keep square cover space */
  }

  .grid .card .thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;                        /* fill the square nicely */
  }

  .grid .card .body {
    margin-top: 2px;                          /* slight breathing room under image */
  }

  .ep-card { grid-template-columns: 1fr !important; }
  .ep-thumb img { width: 100% !important; height: auto !important; }
}