/* liambohan.com — warm, filmic, mobile-first. Brand: 02-brand/brand.md */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#faf7f2; --card:#fffdf9; --ink:#221c14; --muted:#6b6157;
  --accent:#b4531f; --accent-ink:#8a3c12; --soft:#f3e4d3; --line:#e7ddd0;
  --serif:"EB Garamond", Georgia, serif; --sans:"Inter", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:1.02rem; line-height:1.7}
img{max-width:100%; display:block}
a{color:var(--accent-ink)}
h1,h2,h3,.wordmark{font-family:var(--serif); font-weight:500; line-height:1.15}
h2{font-size:clamp(1.7rem,4.5vw,2.4rem); margin-bottom:.6em}
h3{font-size:1.25rem; margin-bottom:.4em}
.wrap{max-width:960px; margin:0 auto; padding:0 1.1rem}

/* nav */
.nav{position:sticky; top:0; z-index:10; background:rgba(250,247,242,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4rem .9rem; padding-top:.8rem; padding-bottom:.8rem}
.wordmark{letter-spacing:.22em; font-size:1.05rem; text-transform:uppercase; text-decoration:none; color:var(--ink)}
.nav ul{display:flex; gap:1.1rem; list-style:none; font-size:.92rem}
.nav ul a{text-decoration:none; color:var(--muted)}
.nav ul a[aria-current="page"], .nav ul a:hover{color:var(--accent-ink)}

/* hero */
.hero{position:relative; min-height:72vh; display:flex; align-items:flex-end; color:#fdfaf5; isolation:isolate}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(24,16,8,.15) 30%, rgba(24,16,8,.78) 100%)}
.hero .wrap{padding-top:5rem; padding-bottom:2.6rem}
.hero h1{font-size:clamp(2.6rem,9vw,4.6rem); letter-spacing:.14em; text-transform:uppercase}
.hero p.tag{font-family:var(--serif); font-style:italic; font-size:1.15rem; opacity:.92; margin:.4rem 0 1.2rem}

.banner{background:var(--ink); color:#f5eee2; text-align:center; font-size:.95rem; padding:.65rem 1rem}
.banner b{color:#f0c9a6; letter-spacing:.06em}

/* buttons */
.btn{display:inline-block; padding:.72rem 1.5rem; border-radius:999px; text-decoration:none; font-weight:600; font-size:.95rem; border:1.5px solid transparent}
.btn.primary{background:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-ink)}
.btn.ghost{border-color:#fdfaf5; color:#fdfaf5}
.btn.ghost2{border-color:var(--accent); color:var(--accent-ink)}
.btnrow{display:flex; flex-wrap:wrap; gap:.7rem}

/* sections */
section{padding:3.2rem 0}
section.alt{background:var(--soft)}
.grid2{display:grid; gap:2rem}
@media(min-width:720px){.grid2{grid-template-columns:1fr 1fr; align-items:center}}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.4rem}
.muted{color:var(--muted)}
.kicker{font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; margin-bottom:.5rem}

/* music */
.release{display:grid; gap:1rem; margin-bottom:1.6rem}
iframe.spotify{border:0; width:100%; height:152px; border-radius:12px}
.upcoming{border-left:4px solid var(--accent); padding-left:1rem}

/* email form */
.signup form{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem}
.signup input[type=email]{flex:1 1 220px; padding:.7rem .9rem; border:1.5px solid var(--line); border-radius:10px; font:inherit; background:#fff}
.signup button{border:0; cursor:pointer}
.signup .formkit-alert{list-style:none; margin:0; padding:0; flex-basis:100%; font-size:.95rem}
.signup .formkit-alert:empty{display:none}
.signup .formkit-alert-error{color:#a4321a}
.signup .formkit-alert-success{color:var(--accent-ink); font-weight:600}

/* shows */
table.shows{width:100%; border-collapse:collapse; font-size:.98rem}
table.shows td{padding:.75rem .5rem; border-bottom:1px solid var(--line); vertical-align:top}
table.shows td:first-child{white-space:nowrap; color:var(--accent-ink); font-weight:600}

/* epk */
.facts{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.photoraw{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.photoraw img{border-radius:10px; aspect-ratio:4/3; object-fit:cover}

/* links page */
body.linkspage{display:flex; min-height:100vh; align-items:center; justify-content:center; padding:2rem 1rem}
.linkstack{width:100%; max-width:430px; text-align:center}
.linkstack .wordmark{font-size:1.3rem}
.linkstack p.tag{font-family:var(--serif); font-style:italic; color:var(--muted); margin:.5rem 0 1.4rem}
.linkstack a.link{display:block; background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:.9rem; margin-bottom:.7rem; text-decoration:none; color:var(--ink); font-weight:600}
.linkstack a.link:hover{border-color:var(--accent)}
.linkstack a.link.hot{background:var(--accent); border-color:var(--accent); color:#fff}

footer{border-top:1px solid var(--line); padding:2.2rem 0 3rem; font-size:.92rem; color:var(--muted)}
footer .socials{display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:.8rem}
footer a{color:var(--accent-ink)}