/* ============================================================
   72 Rats — site.css
   One stylesheet for every page. Edit colors/type here once.
   ============================================================ */

:root{
	--base:#16292f;        /* deep petrol — pulled from the table */
	--surface:#1d343c;     /* lifted panels */
	--surface-2:#234049;   /* hover surface */
	--bone:#ece5d6;        /* warm off-white text */
	--smoke:#94a6aa;       /* cool muted text */
	--ember:#d6552b;       /* the one accent — burnt orange */
	--ember-dim:#7d3318;   /* scorched edge */
	--line:rgba(236,229,214,.12);
	--line-2:rgba(236,229,214,.24);
	--maxw:1080px;
	--display:"Archivo Black", system-ui, sans-serif;
	--body:"Archivo", system-ui, sans-serif;
	--mono:"Space Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
	margin:0;background:var(--base);color:var(--bone);
	font-family:var(--body);font-size:17px;line-height:1.65;
	-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
	content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.04;
	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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
a{color:var(--bone);text-decoration:none}
a:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
img{max-width:100%;display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:10;background:var(--ember);color:#160b05;padding:8px 14px;font-family:var(--mono);font-size:13px}

.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember);margin:0}

/* ---- masthead (header + page intro over the table) ---- */
.masthead{
	position:relative;
	background:
		linear-gradient(115deg, rgba(15,30,35,.94) 0%, rgba(18,38,44,.78) 48%, rgba(18,38,44,.58) 100%),
		url('../../images/table-masthead.jpg') center/cover no-repeat;
	border-bottom:1px solid var(--line-2);
}
.masthead .eyebrow,.masthead h1{text-shadow:0 2px 18px rgba(8,18,22,.55)}

header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;flex-wrap:wrap}
.wordmark{font-family:var(--display);font-size:24px;letter-spacing:-.01em;text-transform:uppercase;line-height:1}
nav.site ul{list-style:none;display:flex;gap:24px;margin:0;padding:0;flex-wrap:wrap}
nav.site a{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--smoke);padding-bottom:3px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
nav.site a:hover{color:var(--bone)}
nav.site a[aria-current="page"]{color:var(--bone);border-color:var(--ember)}

/* hero (home) */
.hero{padding:64px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-family:var(--display);font-size:clamp(2.7rem,8.5vw,5.6rem);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;margin:14px 0 0}
.hero p.lede{font-size:19px;color:var(--bone);margin:0 0 28px;max-width:34ch}
.hero-art{border:1px solid var(--line-2);background:rgba(10,20,24,.4)}
.hero-art img{width:100%}

/* page-head (inner pages) */
.page-head{padding:52px 0 46px;max-width:760px}
.page-head h1{font-family:var(--display);font-size:clamp(1.7rem,6.5vw,3.8rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;margin:12px 0 0;overflow-wrap:break-word}
.hero h1,.block h2,.track h3,.rel h3,.mix h2{overflow-wrap:break-word}
.page-head h1.brand{text-transform:none;font-size:clamp(1.5rem,7vw,3.4rem)}
.page-head p{color:var(--bone);margin:18px 0 0;font-size:19px}

/* the signature scorch rule */
.scorch{width:84px;height:5px;margin:26px 0 22px;background:var(--ember);box-shadow:10px 0 0 -1px var(--ember-dim),22px 0 0 -2px var(--ember-dim)}

/* buttons */
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:12px 20px;border:1px solid var(--line-2);transition:background .15s,border-color .15s,color .15s}
.btn.primary{background:var(--ember);border-color:var(--ember);color:#160b05}
.btn.primary:hover{background:#e9682f;border-color:#e9682f}
.btn.ghost{background:rgba(12,24,28,.35)}
.btn.ghost:hover{border-color:var(--bone)}

/* ---- generic section ---- */
section.block{padding:56px 0;border-top:1px solid var(--line)}
section.block.first{border-top:0}
.block h2{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.4rem);text-transform:uppercase;letter-spacing:-.01em;line-height:1;margin:8px 0 0}
.block .lead{color:var(--smoke);max-width:62ch;margin:18px 0 0}

/* journal / substack */
.journal-grid{display:grid;grid-template-columns:1fr 480px;gap:40px;align-items:start;margin-top:32px}
.substack-frame{border:1px solid var(--line-2);background:#fff;width:480px;max-width:100%;height:320px}
.substack-frame iframe{width:100%;height:100%;border:0;display:block}

/* release art + streaming */
.release-grid{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start;margin-top:28px}
.release-art{border:1px solid var(--line-2);background:rgba(10,20,24,.4);align-self:start}
.release-art img{width:100%}
.streams{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.streams a{font-family:var(--mono);font-size:13px;letter-spacing:.03em;padding:10px 16px;border:1px solid var(--line-2);color:var(--smoke);transition:color .15s,border-color .15s,background .15s}
.streams a:hover{color:var(--bone);border-color:var(--bone);background:var(--surface)}
.note{font-family:var(--mono);font-size:12.5px;color:var(--smoke);margin-top:20px}
.note a{color:var(--ember);border-bottom:1px solid transparent}
.note a:hover{border-color:var(--ember)}

/* signposts */
.signposts p{font-size:19px;max-width:54ch;margin:22px 0 0}
.signposts .names{color:var(--ember)}

/* doorway cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.card{border:1px solid var(--line);background:var(--surface);padding:26px;transition:border-color .15s,background .15s}
.card:hover{border-color:var(--line-2);background:var(--surface-2)}
.card .eyebrow{margin-bottom:10px}
.card h3{font-family:var(--body);font-weight:600;font-size:20px;margin:0 0 8px}
.card p{color:var(--smoke);margin:0 0 16px}
.card .go{font-family:var(--mono);font-size:13px;color:var(--bone)}
.card .go::after{content:" \2192";color:var(--ember)}

/* ---- tracklist (song flow) ---- */
.tracklist{margin-top:32px;border-top:1px solid var(--line)}
.track{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.track .num{font-family:var(--mono);font-size:15px;color:var(--ember);padding-top:4px}
.track h3{font-family:var(--display);text-transform:uppercase;font-size:20px;letter-spacing:-.01em;margin:0 0 8px}
.track p{margin:0;color:var(--smoke);max-width:60ch}

/* ---- image gallery ---- */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.gallery img{width:100%;border:1px solid var(--line-2)}

/* ---- prose (one-sheet, bio, etc.) ---- */
.prose{max-width:68ch;margin-top:24px}
.prose h3{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin:34px 0 12px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:var(--smoke)}
.prose li{margin:4px 0}
.prose b{color:var(--bone)}
blockquote{margin:0 0 18px;padding:14px 20px;border-left:3px solid var(--ember);background:var(--surface);color:var(--bone)}
blockquote cite{display:block;margin-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--smoke);font-style:normal}
.stations{columns:2;column-gap:32px;font-size:15px;color:var(--smoke);margin-top:6px}
.stations div{break-inside:avoid;margin-bottom:6px}
.stations b{color:var(--bone)}

/* ---- alias releases (grahamcrackerbox) ---- */
.rel{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start;padding:36px 0;border-top:1px solid var(--line)}
.rel .art{border:1px solid var(--line-2)}
.rel h3{font-family:var(--display);text-transform:uppercase;font-size:22px;letter-spacing:-.01em;margin:0 0 12px}
.rel p{color:var(--smoke);margin:0 0 18px;max-width:54ch}
.rel iframe{border:0;width:300px;max-width:100%}

/* ---- mixes (standalone page) ---- */
.topbar{border-bottom:1px solid var(--line-2);background:var(--surface)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 24px}
.topbar .home{font-family:var(--mono);font-size:13px;color:var(--smoke);transition:color .15s}
.topbar .home:hover{color:var(--ember)}
.mix-intro{padding:48px 0 8px}
.mix-intro p{color:var(--smoke);max-width:64ch}
.mix-index{columns:3;column-gap:24px;margin-top:22px;font-family:var(--mono);font-size:13px}
.mix-index a{display:block;color:var(--smoke);padding:4px 0;break-inside:avoid;transition:color .15s}
.mix-index a:hover{color:var(--ember)}
.mix{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start;padding:34px 0;border-top:1px solid var(--line)}
.mix .art{border:1px solid var(--line-2)}
.mix h2{font-family:var(--display);text-transform:uppercase;font-size:21px;letter-spacing:-.01em;margin:0 0 6px;scroll-margin-top:80px}
.mix h2 a.dl{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ember);text-transform:none;border:1px solid var(--ember);padding:3px 9px;margin-left:8px;white-space:nowrap}
.mix h2 a.dl:hover{background:var(--ember);color:#160b05}
.mix .story{color:var(--bone);margin:0 0 12px}
.mix .artists{color:var(--smoke);font-size:15px;line-height:1.6}
.mix .artists b{color:var(--bone);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px}

/* ---- footer ---- */
footer.site{border-top:1px solid var(--line);padding:40px 0 56px}
footer.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.social{display:flex;gap:22px;flex-wrap:wrap}
.social a{font-family:var(--mono);font-size:13px;color:var(--smoke);transition:color .15s}
.social a:hover{color:var(--ember)}
.copyright{font-family:var(--mono);font-size:12px;color:var(--smoke)}

/* ---- extras ---- */
.aside{margin-top:40px;color:var(--smoke)}
.aside h3{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin:0 0 8px}
.aside h3 a{color:var(--ember)}
.signoff{display:flex;align-items:center;gap:16px;margin-top:36px;color:var(--smoke)}
.signoff img{width:64px;height:auto;border:1px solid var(--line)}

/* ---- responsive ---- */
@media (max-width:820px){
	.hero-grid{grid-template-columns:1fr;gap:32px}
	.hero{padding:44px 0 48px}
	.hero-art{order:-1;max-width:360px}
	.journal-grid{grid-template-columns:1fr}
	.substack-frame{width:100%}
	.release-grid{grid-template-columns:1fr;gap:24px}
	.release-art{max-width:320px}
	.cards{grid-template-columns:1fr}
	.gallery{grid-template-columns:1fr}
	.rel{grid-template-columns:1fr;gap:20px}
	.rel .art{max-width:260px}
	.mix{grid-template-columns:1fr;gap:18px}
	.mix .art{max-width:220px}
	.mix-index{columns:2}
	.stations{columns:1}
}
@media (max-width:600px){
	body{font-size:18px;line-height:1.62}
	.block .lead,.signposts p,.page-head p,.hero p.lede{font-size:18px}
	.mix .artists,.stations,.track p,.card p,.rel p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}