:root {
--tsr-ink: #1B1815;
--tsr-paper: #E6DFCD;
--tsr-gold: #AD7F26;
--tsr-gold-dark: #8C6A22;
--tsr-oxblood: #7C2A24;
--tsr-line: rgba(27, 24, 21, 0.18);
--tsr-display: 'Big Shoulders Display', sans-serif;
--tsr-mono: 'IBM Plex Mono', monospace;
--tsr-body: 'IBM Plex Sans', sans-serif;
}
.tsr-review-single { padding-bottom: 3rem; }
.tsr-review-container { max-width: 980px; margin: 0 auto; padding: 0 1.5rem; }
.tsr-review-hero {
display: grid;
grid-template-columns: minmax(220px, 320px) 1fr;
gap: 2.5rem;
align-items: start;
padding: 2.5rem 0 1rem;
}
@media (max-width: 800px) {
.tsr-review-hero { grid-template-columns: 1fr; }
}
.tsr-review-cover { position: relative; }
.tsr-review-cover img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--tsr-ink);
box-shadow: 8px 8px 0 var(--tsr-gold), 0 14px 28px rgba(27,24,21,0.22);
transform: rotate(-1.1deg);
transition: transform 0.3s ease;
}
.tsr-review-cover img:hover { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
.tsr-review-cover img { transition: none; transform: none; }
}
.tsr-eyebrow {
font-family: var(--tsr-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tsr-oxblood);
border: 1px solid var(--tsr-oxblood);
display: inline-block;
padding: 0.3em 0.7em;
border-radius: 2px;
margin-bottom: 0.9em;
}
.tsr-title {
font-family: var(--tsr-display);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.01em;
font-size: clamp(2rem, 4vw, 3.1rem);
line-height: 0.98;
color: var(--tsr-ink);
margin: 0 0 1.5rem;
}
.tsr-review-meta-wrap {
display: flex;
gap: 2rem;
align-items: flex-start;
flex-wrap: wrap;
}
.tsr-meta-card {
flex: 1 1 320px;
background: var(--tsr-paper);
border: 1px solid var(--tsr-line);
border-radius: 4px;
padding: 1.4rem 1.6rem;
}
.tsr-meta-row {
display: flex;
align-items: baseline;
gap: 0.6em;
padding: 0.32em 0;
}
.tsr-meta-row .tsr-meta-label {
font-family: var(--tsr-mono);
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--tsr-ink);
opacity: 0.62;
white-space: nowrap;
}
.tsr-meta-row .tsr-meta-leader {
flex: 1;
border-bottom: 1px dotted var(--tsr-line);
margin-bottom: 0.28em;
min-width: 1em;
}
.tsr-meta-row .tsr-meta-value {
font-family: var(--tsr-body);
font-size: 0.92rem;
color: var(--tsr-ink);
text-align: right;
white-space: nowrap;
}
.tsr-tags { margin-top: 0.9rem; }
.tsr-tag {
display: inline-block;
font-family: var(--tsr-mono);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid var(--tsr-gold);
color: var(--tsr-gold-dark);
padding: 0.28em 0.65em;
border-radius: 2px;
margin: 0 0.4em 0.4em 0;
}
.tsr-discogs-link { margin-top: 1rem; }
.tsr-discogs-link a {
font-family: var(--tsr-mono);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tsr-oxblood);
text-decoration: none;
border-bottom: 1px solid var(--tsr-oxblood);
}
.tsr-discogs-link a:hover { opacity: 0.75; }
.tsr-discogs-link a:focus-visible,
.tsr-tag:focus-visible {
outline: 2px solid var(--tsr-oxblood);
outline-offset: 2px;
}
.tsr-rating-badge {
width: 96px;
height: 96px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--tsr-paper);
border: 3px solid var(--tsr-ink);
box-shadow: inset 0 0 0 6px var(--tsr-gold), 0 6px 16px rgba(27,24,21,0.22);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tsr-rating-badge .tsr-rating-num {
font-family: var(--tsr-mono);
font-size: 1.7rem;
font-weight: 600;
color: var(--tsr-ink);
line-height: 1;
}
.tsr-rating-badge .tsr-rating-max {
font-family: var(--tsr-mono);
font-size: 0.62rem;
letter-spacing: 0.05em;
color: var(--tsr-oxblood);
margin-top: 0.2em;
}
.tsr-review-single .entry-content {
max-width: 68ch;
margin: 2.5rem auto 0;
font-family: var(--tsr-body);
font-size: 1.05rem;
line-height: 1.75;
color: var(--tsr-ink);
}
.tsr-review-single .entry-content > p:first-of-type::first-letter {
font-family: var(--tsr-display);
font-weight: 800;
font-size: 3.4rem;
float: left;
line-height: 0.82;
padding-right: 0.12em;
padding-top: 0.08em;
color: var(--tsr-oxblood);
}
.tsr-tracklist { margin-top: 3rem; }
.tsr-tracklist h2 {
font-family: var(--tsr-display);
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 1.6rem;
display: inline-block;
border-bottom: 3px solid var(--tsr-gold);
padding-bottom: 0.2em;
margin-bottom: 1.4rem;
}
.tsr-tracklist-sides {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2.2rem;
}
.tsr-side-heading {
font-family: var(--tsr-mono);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tsr-oxblood);
border-bottom: 2px solid var(--tsr-ink);
padding-bottom: 0.4em;
margin-bottom: 0.6em;
}
.tsr-side ol { list-style: none; margin: 0; padding: 0; }
.tsr-side li {
display: flex;
gap: 0.7em;
padding: 0.38em 0;
font-family: var(--tsr-body);
font-size: 0.92rem;
color: var(--tsr-ink);
border-bottom: 1px dotted var(--tsr-line);
}
.tsr-side li .tsr-tnum {
font-family: var(--tsr-mono);
font-weight: 600;
color: var(--tsr-gold-dark);
min-width: 1.7em;
} .tsr-home-hero { text-align: center; padding: 3rem 0 2.5rem; }
.tsr-home-title {
font-family: var(--tsr-display);
text-transform: uppercase;
font-weight: 800;
font-size: clamp(2.2rem, 5vw, 3.6rem);
color: var(--tsr-ink);
margin: 0.4em 0 0.3em;
line-height: 0.98;
}
.tsr-home-sub {
font-family: var(--tsr-body);
color: var(--tsr-ink);
opacity: 0.7;
max-width: 560px;
margin: 0 auto 1.6rem;
}
.tsr-home-search {
display: flex;
max-width: 520px;
margin: 0 auto;
border: 1px solid var(--tsr-ink);
border-radius: 4px;
overflow: hidden;
}
.tsr-home-search input[type="text"] {
flex: 1;
border: none;
padding: 0.75em 1em;
font-family: var(--tsr-body);
font-size: 0.95rem;
outline: none;
}
.tsr-home-search button {
border: none;
background: var(--tsr-ink);
color: var(--tsr-paper);
font-family: var(--tsr-mono);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.8rem;
padding: 0 1.4em;
cursor: pointer;
}
.tsr-home-search button:hover { background: var(--tsr-oxblood); }
.tsr-section-heading {
font-family: var(--tsr-display);
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 1.6rem;
border-bottom: 3px solid var(--tsr-gold);
display: inline-block;
padding-bottom: 0.2em;
margin: 2.5rem 0 1.4rem;
}
.tsr-genre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.tsr-genre-card {
display: flex;
flex-direction: column;
gap: 0.3em;
background: var(--tsr-paper);
border: 1px solid var(--tsr-line);
border-radius: 4px;
padding: 1.1em 1.3em;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tsr-genre-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(27,24,21,0.15); }
.tsr-genre-name { font-family: var(--tsr-display); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; color: var(--tsr-ink); }
.tsr-genre-count { font-family: var(--tsr-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--tsr-oxblood); text-transform: uppercase; }
.tsr-record-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.4rem;
}
@media (max-width: 900px) {
.tsr-record-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.tsr-record-grid { grid-template-columns: 1fr; }
}
.tsr-record-card { display: flex; flex-direction: column; gap: 0.4em; text-decoration: none; }
.tsr-record-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--tsr-ink); box-shadow: 5px 5px 0 var(--tsr-gold); }
.tsr-record-title { font-family: var(--tsr-body); font-weight: 600; font-size: 0.95rem; color: var(--tsr-ink); }
.tsr-record-artist { font-family: var(--tsr-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tsr-ink); opacity: 0.65; }
.tsr-home-intro {
max-width: 760px;
margin: 3rem auto;
background: var(--tsr-paper);
border: 1px solid var(--tsr-line);
border-radius: 4px;
padding: 2.2rem 2.4rem;
font-family: var(--tsr-body);
font-size: 1rem;
line-height: 1.9;
color: var(--tsr-ink);
text-align: left;
}
.tsr-home-intro p { margin: 0 0 1.5em; }
.tsr-home-intro p:last-child { margin-bottom: 0; } .tsr-genre-strip {
background: var(--tsr-ink);
border-bottom: 3px solid var(--tsr-gold);
overflow-x: auto;
white-space: nowrap;
}
.tsr-genre-strip-inner {
display: flex;
width: 100%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
gap: 0.6rem;
padding: 0.9rem 1.5rem;
}
.tsr-genre-pill {
font-family: var(--tsr-mono);
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--tsr-paper);
border: 1px solid var(--tsr-gold);
border-radius: 999px;
padding: 0.4em 1em;
text-decoration: none;
flex: 0 0 auto;
transition: background 0.15s ease, color 0.15s ease;
}
.tsr-genre-pill:hover { background: var(--tsr-gold); color: var(--tsr-ink); }
.tsr-genre-pill:focus-visible { outline: 2px solid var(--tsr-gold); outline-offset: 2px; }
.tsr-genre-strip::-webkit-scrollbar { height: 6px; }
.tsr-genre-strip::-webkit-scrollbar-thumb { background: var(--tsr-gold); border-radius: 3px; } .tsr-site-header {
background: var(--tsr-ink);
border-bottom: 3px solid var(--tsr-gold);
}
.tsr-site-header-top {
max-width: 1200px;
margin: 0 auto;
padding: 1.2rem 1.5rem 1rem;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(230, 223, 205, 0.12);
}
.tsr-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.tsr-logo img {
display: block;
height: 60px !important;
width: auto !important;
max-width: none !important;
}
.tsr-logo-text {
font-family: var(--tsr-display);
font-weight: 800;
text-transform: uppercase;
font-size: 1.4rem;
color: var(--tsr-paper);
letter-spacing: 0.02em;
}
.tsr-site-header .tsr-genre-strip {
border-bottom: none;
}
.tsr-section-heading-row {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin: 2.5rem 0 1.4rem;
}
.tsr-section-heading-row .tsr-section-heading { margin: 0; }
.tsr-view-all-link {
font-family: var(--tsr-mono);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tsr-oxblood);
text-decoration: none;
border-bottom: 1px solid var(--tsr-oxblood);
}
.tsr-view-all-link:hover { opacity: 0.75; } .rank-math-breadcrumb {
font-family: var(--tsr-mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tsr-ink);
opacity: 0.6;
margin: 1.5rem 0 0;
}
.rank-math-breadcrumb a { color: var(--tsr-oxblood); text-decoration: none; }
.rank-math-breadcrumb a:hover { text-decoration: underline; } .tsr-related { margin-top: 3rem; } .tsr-top5-card { position: relative; }
.tsr-top5-badge {
position: absolute;
top: -8px;
left: -8px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--tsr-ink);
color: var(--tsr-paper);
border: 2px solid var(--tsr-gold);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--tsr-mono);
font-weight: 700;
font-size: 0.85rem;
z-index: 2;
}