/* liambohan.com — "golden hour": warm near-black, filmic grain, amber at dusk.
   Direction B, chosen Jul 16. 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;1,500&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#191309; --card:#221a10; --ink:#f2e7d3; --muted:#a3947c;
  --accent:#dfa14f; --accent-ink:#e7b46b; --soft:#1f170c; --line:#332818;
  --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}
body::after{content:""; position:fixed; inset:0; z-index:2147483647; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
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; font-style:italic}
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(23,17,8,.9); 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:.26em; 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)}

/* hero */
.hero{position:relative; min-height:72vh; display:flex; align-items:flex-end; color:#f6efe2; isolation:isolate}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; object-position:90% center}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; object-position:50% 30%}
@media (prefers-reduced-motion: reduce){.hero video{display:none}}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(25,19,9,.16) 25%, rgba(25,19,9,.94) 100%)}
.hero .wrap{padding-top:5rem; padding-bottom:2.6rem}
.hero h1{font-size:clamp(2.6rem,9vw,4.6rem); letter-spacing:.16em; text-transform:uppercase}
.hero p.tag{font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2.6vw,1.5rem); opacity:.95; margin:.4rem 0 1.2rem}

.banner{background:transparent; border-top:1px solid rgba(223,161,79,.45); border-bottom:1px solid rgba(223,161,79,.45); color:var(--accent); text-align:center; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; padding:.6rem 1rem}
.banner b{color:inherit; font-weight:600; letter-spacing:inherit}

/* buttons */
.btn{display:inline-block; padding:.7rem 1.3rem; border-radius:2px; text-decoration:none; font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; border:1px solid transparent; transition:background .25s ease, color .25s ease}
.btn.primary{background:transparent; border-color:var(--accent); color:var(--accent)}
.btn.primary:hover{background:var(--accent); color:#1c1408}
.btn.ghost{border-color:#f6efe2; color:#f6efe2}
.btn.ghost:hover{background:rgba(246,239,226,.12)}
.btn.ghost2{border-color:var(--accent); color:var(--accent)}
.btn.ghost2:hover{background:var(--accent); color:#1c1408}
.btnrow{display:flex; flex-wrap:wrap; gap:.7rem}

/* sections */
section{padding:3.4rem 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:3px; padding:1.4rem}
.muted{color:var(--muted)}
.kicker{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); 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:8px}
.upcoming{border-left:2px 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:1px solid rgba(223,161,79,.4); border-radius:2px; font:inherit; background:rgba(246,238,226,.06); color:var(--ink)}
.signup input[type=email]::placeholder{color:var(--muted)}
.signup input[type=email]:focus{outline:1px solid var(--accent); outline-offset:1px}
.signup button{border:1px solid var(--accent); 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:#e08a6a}
.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); 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:4px; 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:1px solid var(--line); border-radius:4px; 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:#1c1408}

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)}