/* Lumi Studio — calm, handcrafted, quietly powerful */

:root{
  --bg:#F4F1EB;
  --text:#5E676E;
  --muted: rgba(94,103,110,0.74);
  --sky:#A9BCC8;
  --gold:#CBB27A;
  --night:#2F3A40;

  --surface: rgba(94,103,110,0.06);
  --border: rgba(94,103,110,0.14);
  --shadow: 0 18px 60px rgba(47,58,64,0.14);

  --radius: 22px;
  --max: 1100px;
  --serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.container{max-width:var(--max); margin:0 auto; padding:0 20px}
header.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(244,241,235,0.84);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}
.brand{display:flex; align-items:center; gap:10px; min-width:200px}
.brand-mark{width:28px; height:28px; display:block}
.brand-name{
  font-family: var(--serif);
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
nav ul{list-style:none; display:flex; gap:18px; padding:0; margin:0; flex-wrap:wrap}
nav a{font-size:14px; color: rgba(94,103,110,0.92)}
nav a.active{text-decoration:underline}

.hero{padding:72px 0 44px}
.hero-inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px}
.hero-mark{width:78px; height:78px; margin-bottom:8px}
.h1{
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(28px, 4.4vw, 44px);
  margin:0;
}
.tagline{font-family: var(--serif); font-size: clamp(16px, 2.2vw, 20px); color: rgba(94,103,110,0.92); margin:0}
.subline{max-width: 720px; color: var(--muted); margin-top: 6px}

.cta-row{display:flex; gap:12px; margin-top: 14px; flex-wrap:wrap; justify-content:center}
.btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,0.38);
  padding:10px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 14px;
}
.btn.primary{background: rgba(203,178,122,0.22); border-color: rgba(203,178,122,0.45)}
.btn:hover{text-decoration:none; transform: translateY(-1px)}

.section{padding:44px 0}
.card{
  border:1px solid var(--border);
  background: rgba(255,255,255,0.42);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.grid{display:grid; gap:16px}
.grid.two{grid-template-columns: 1fr}
@media (min-width: 860px){ .grid.two{grid-template-columns: 1fr 1fr} }

.h2{
  font-family: var(--serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 16px;
  margin:0 0 10px 0;
}
.lead{margin:0; color: rgba(94,103,110,0.86)}

.episodes{display:grid; gap:10px; grid-template-columns: 1fr}
@media (min-width: 760px){ .episodes{grid-template-columns: 1fr 1fr} }
.episode{padding:10px 12px; border:1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.46)}
.episode small{display:block; color: var(--muted); margin-bottom: 2px}

.quotes{display:grid; gap:12px}
@media (min-width: 860px){ .quotes{grid-template-columns: repeat(3, 1fr)} }
.quote{padding:14px; border:1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,0.46); color: rgba(94,103,110,0.92)}

footer{padding:34px 0; background: var(--night); color: rgba(244,241,235,0.9)}
footer a{color: rgba(244,241,235,0.92)}
.footer-inner{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap}
.footer-mini{color: rgba(244,241,235,0.72); font-size: 13px}
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-overlay {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
}

.hero-overlay h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.hero-btn {
  background: #ffd84d;
  color: #000;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
}