/*
Theme Name: Íslenskur Texti
Theme URI: https://isltexti.is
Author: ÍSL Texti
Author URI: https://isltexti.is
Description: Pitchfork-stíll theme fyrir íslenska tónlistarsenu. Fréttir, viðtöl, plötudómar og einkunnagjöf notenda. Sérsniðið fyrir isltexti.is.
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: isl-texti
Tags: news, magazine, music, custom-logo, custom-menu, featured-images, threaded-comments
*/

/* =========================================
   ÍSL TEXTI — CUSTOM THEME
   Brand: Red #E30613 / Black #0A0A0A / White #FFFFFF
   Fonts: Helvetica Neue Bold (primary) / Rubik (body)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');

:root {
  --isl-red: #E30613;
  --isl-red-dark: #B30410;
  --isl-black: #0A0A0A;
  --isl-white: #FFFFFF;
  --isl-grey: #1A1A1A;
  --isl-grey-light: #F5F5F5;
  --isl-grey-mid: #888888;
  --font-display: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-body: "Rubik", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--isl-black);
  background: var(--isl-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--isl-red); }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--isl-black);
}

p { margin: 0 0 1em; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================
   HEADER
   ========================================= */
.site-header {
  background: var(--isl-red);
  color: var(--isl-white);
  padding: 18px 0;
  position: relative;
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: start;
}
.site-header__center { justify-self: center; text-align: center; }
.site-header__right {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-self: end;
}
.menu-toggle {
  background: transparent;
  border: 0;
  color: var(--isl-white);
  cursor: pointer;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu-toggle svg { width: 28px; height: 28px; }
.site-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -0.02em;
  color: var(--isl-white);
  line-height: 1;
}
.site-logo img { max-height: 44px; width: auto; display: inline-block; }
.site-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  margin-top: 6px;
  color: var(--isl-white);
  opacity: .95;
}
.utility-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--isl-white);
}
.utility-link:hover { color: var(--isl-black); }
.utility-link--cta {
  background: var(--isl-red, #e30613);
  color: #fff !important;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  transition: background 0.15s ease;
}
.utility-link--cta:hover { background: #c70017; color: #fff !important; }
.search-toggle {
  background: transparent;
  border: 0;
  color: var(--isl-white);
  cursor: pointer;
  padding: 6px;
}
.search-toggle svg { width: 20px; height: 20px; }

/* =========================================
   PRIMARY NAV (BLACK BAR)
   ========================================= */
.primary-nav {
  background: var(--isl-black);
  color: var(--isl-white);
  border-top: 1px solid rgba(255,255,255,.08);
}
.primary-nav__inner {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 40px;
}
.primary-nav li { display: flex; }
.primary-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--isl-white);
  padding: 18px 4px;
  display: inline-block;
  position: relative;
}
.primary-nav a:hover { color: var(--isl-red); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-parent > a {
  color: var(--isl-white);
}
.primary-nav .current-menu-item > a::after,
.primary-nav .current_page_item > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 2px;
  background: var(--isl-red);
}

/* Mobile menu */
@media (max-width: 768px) {
  .primary-nav ul { gap: 20px; flex-wrap: wrap; justify-content: center; padding: 8px 0; }
  .primary-nav a { padding: 8px 4px; font-size: 11px; letter-spacing: 0.14em; }
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-header__right { gap: 12px; }
  .utility-link { display: none; }
  .site-logo { font-size: 26px; }
  .site-logo img { max-height: 32px; }
  .site-tagline { font-size: 9px; }
}

/* =========================================
   HERO / FRONT PAGE
   ========================================= */
.front-page-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin: 32px 0;
}
@media (max-width: 980px) {
  .front-page-grid { grid-template-columns: 1fr; }
}

.hero-feature {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--isl-red) 0%, #8a0410 50%, var(--isl-black) 100%);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  color: var(--isl-white);
  min-height: 420px;
}
.hero-feature__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .35;
  z-index: 0;
}
.hero-feature::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.85) 100%);
  z-index: 1;
}
.hero-feature__top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.hero-feature__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.hero-feature__bottom {
  position: relative;
  z-index: 2;
}
.hero-feature__cat {
  display: inline-block;
  background: var(--isl-red);
  color: var(--isl-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  margin-bottom: 16px;
}
.hero-feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--isl-white);
  margin: 0 0 12px;
  max-width: 90%;
}
.hero-feature__excerpt {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,.9);
  max-width: 80%;
  margin: 0;
}

.sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.side-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  background: transparent;
}
.side-card__img {
  aspect-ratio: 1/1;
  background: var(--isl-grey);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
}
.side-card__body { display: flex; flex-direction: column; justify-content: center; }
.side-card__cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-red);
  margin-bottom: 6px;
}
.side-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: var(--isl-black);
  margin: 0 0 6px;
}
.side-card__meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--isl-grey-mid);
}

/* =========================================
   SECTION DIVIDER
   ========================================= */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 16px;
  border-top: 1px solid #e5e5e5;
  margin-top: 32px;
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-black);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.section-head__title::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--isl-red);
}
.section-head__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--isl-black);
}
.section-head__link:hover { color: var(--isl-red); }

/* =========================================
   RATING BLOCK
   ========================================= */
.rating-block {
  background: var(--isl-black);
  color: var(--isl-white);
  padding: 56px 48px;
  margin: 16px 0 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.rating-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--isl-white);
  margin: 0 0 10px;
}
.rating-block__title em {
  color: var(--isl-red);
  font-style: normal;
}
.rating-block__sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255,255,255,.7);
  margin: 0;
  max-width: 560px;
}
.rating-circle {
  width: 140px;
  height: 140px;
  border: 4px solid var(--isl-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  color: var(--isl-white);
}
@media (max-width: 768px) {
  .rating-block { grid-template-columns: 1fr; padding: 32px 24px; text-align: center; }
  .rating-circle { margin: 0 auto; width: 100px; height: 100px; font-size: 44px; }
}

/* =========================================
   ARCHIVE / CATEGORY GRID
   ========================================= */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 32px 0;
}
@media (max-width: 980px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .archive-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post-card__img {
  aspect-ratio: 4/3;
  background: var(--isl-grey);
  background-size: cover;
  background-position: center;
}
.post-card__cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-red);
}
.post-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--isl-black);
  margin: 0;
}
.post-card__excerpt {
  font-size: 14px;
  color: var(--isl-grey-mid);
  margin: 0;
}

.archive-header {
  padding: 48px 0 24px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 16px;
}
.archive-header h1 {
  font-size: clamp(36px, 5vw, 56px);
  margin: 0;
  letter-spacing: -0.02em;
}
.archive-header__cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-red);
  margin-bottom: 8px;
}

/* =========================================
   SINGLE POST
   ========================================= */
.single-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 0 64px;
}
.single-article__cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-red);
  margin-bottom: 12px;
}
.single-article__title {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.single-article__lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--isl-grey-mid);
  margin: 0 0 24px;
  font-weight: 400;
}
.single-article__meta {
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--isl-grey-mid);
  padding: 16px 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 32px;
}
.single-article__meta strong { color: var(--isl-black); }
.single-article__hero {
  margin: 0 0 32px;
  background: var(--isl-grey);
}
.single-article__hero img { width: 100%; height: auto; display: block; }
.single-article__body {
  font-size: 18px;
  line-height: 1.75;
  color: var(--isl-black);
}
.single-article__body p { margin: 0 0 1.2em; }
.single-article__body h2 {
  font-size: 32px;
  margin: 1.4em 0 .5em;
}
.single-article__body h3 {
  font-size: 24px;
  margin: 1.2em 0 .4em;
}
.single-article__body blockquote {
  border-left: 4px solid var(--isl-red);
  padding: 8px 0 8px 24px;
  margin: 24px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: var(--isl-black);
}
.single-article__body a { color: var(--isl-red); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
  background: var(--isl-black);
  color: var(--isl-white);
  padding: 56px 0 32px;
  margin-top: 48px;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 768px) { .site-footer__inner { grid-template-columns: 1fr; } }

.site-footer__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--isl-white);
  margin-bottom: 12px;
}
.site-footer__about {
  color: rgba(255,255,255,.7);
  max-width: 420px;
  font-size: 14px;
}
.site-footer h4 {
  color: var(--isl-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 8px; }
.site-footer a { color: rgba(255,255,255,.75); font-size: 14px; }
.site-footer a:hover { color: var(--isl-red); }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,.5);
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 600px) { .site-footer__bottom { flex-direction: column; gap: 12px; } }

/* =========================================
   404 + SEARCH
   ========================================= */
.notfound {
  text-align: center;
  padding: 96px 24px;
}
.notfound h1 {
  font-size: clamp(64px, 12vw, 160px);
  color: var(--isl-red);
  margin: 0;
  line-height: 1;
}
.notfound p { font-size: 18px; color: var(--isl-grey-mid); }

/* =========================================
   FORMS / BUTTONS
   ========================================= */
.btn,
button.wp-element-button,
.wp-block-button__link {
  display: inline-block;
  background: var(--isl-red);
  color: var(--isl-white) !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease;
}
.btn:hover, .wp-block-button__link:hover { background: var(--isl-red-dark); color: var(--isl-white) !important; }

input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #d0d0d0;
  border-radius: 0;
  background: var(--isl-white);
  width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--isl-red); border-color: var(--isl-red); }

/* WordPress alignment helpers */
.alignleft { float: left; margin: 0 24px 12px 0; }
.alignright { float: right; margin: 0 0 12px 24px; }
.aligncenter { display: block; margin: 0 auto 12px; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--isl-grey-mid); margin-top: 6px; }

/* =========================================
   PLATA CARDS — ALBUM RATING UI
   ========================================= */
.rating-block--archive {
  margin: 32px 0 40px;
}
.rating-block--front {
  margin: 0 0 32px;
}
.rating-block--front .rating-circle {
  text-decoration: none;
  transition: transform 0.15s ease;
}
.rating-block--front .rating-circle:hover { transform: scale(1.04); }
.plata-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
  margin: 0 0 48px;
}
@media (max-width: 1100px) { .plata-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .plata-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .plata-grid { grid-template-columns: 1fr; } }

.plata-card {
  background: var(--isl-white);
  border: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
}

.plata-card__cover {
  aspect-ratio: 1/1;
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.plata-card__cover--red {
  background: radial-gradient(circle at 30% 30%, #f0001a 0%, var(--isl-red) 40%, #8a0410 100%);
}
.plata-card__cover--black {
  background: radial-gradient(circle at 30% 30%, #2a2a2a 0%, #181818 50%, var(--isl-black) 100%);
}
.plata-card__placeholder {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,.18);
  text-align: center;
  padding: 0 16px;
  word-break: break-word;
}
.plata-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--isl-red);
  color: var(--isl-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  padding: 6px 10px;
  text-transform: none;
}

.plata-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plata-card__artist {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-grey-mid);
  display: block;
  margin-bottom: 4px;
}
.plata-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--isl-black);
}
.plata-card__title a { color: inherit; }
.plata-card__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--isl-grey-mid);
}

.plata-card__divider {
  height: 1px;
  background: #e5e5e5;
  margin: 0;
}

.plata-card__score-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.plata-card__avg-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--isl-red);
  letter-spacing: -0.02em;
}
.plata-card__avg-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-grey-mid);
  margin-top: 6px;
}
.plata-card__count {
  text-align: right;
}
.plata-card__count-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--isl-black);
  line-height: 1;
}
.plata-card__count-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--isl-grey-mid);
  margin-top: 4px;
}

.plata-card__voter,
.plata-card__voted {
  border-top: 1px solid #e5e5e5;
  padding-top: 16px;
}
.plata-card__voter-label,
.plata-card__voted-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-grey-mid);
  margin-bottom: 12px;
}

.plata-card__slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.plata-card__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: #e5e5e5;
  border-radius: 0;
  outline: none;
  cursor: pointer;
}
.plata-card__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--isl-red);
  border: 2px solid var(--isl-black);
  cursor: pointer;
}
.plata-card__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--isl-red);
  border: 2px solid var(--isl-black);
  cursor: pointer;
  border: 0;
}
.plata-card__slider-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--isl-black, #111);
  background: transparent;
  border: 1.5px solid #e0e0e0;
  padding: 6px 12px;
  min-width: 52px;
  text-align: center;
}

.plata-card__submit {
  width: 100%;
  background: var(--isl-red);
  color: var(--isl-white);
  border: 0;
  padding: 15px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.15s ease;
}
.plata-card__submit:hover { background: var(--isl-red-dark); }
.plata-card__submit:active { opacity: 0.85; }
.plata-card__submit:disabled { opacity: .4; cursor: not-allowed; }

.plata-card__voted-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  color: var(--isl-red);
  line-height: 1;
  margin-bottom: 8px;
}
.plata-card__voted-sub {
  font-size: 12px;
  color: var(--isl-grey-mid);
}

/* =========================================
   PLATA SINGLE — full review page
   ========================================= */
.plata-single {
  padding: 48px 0;
}
.plata-single__hero {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 48px;
  margin-bottom: 48px;
  align-items: start;
}
@media (max-width: 768px) {
  .plata-single__hero { grid-template-columns: 1fr; gap: 24px; }
}

.plata-single__cover {
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 420px;
  background-size: cover;
  background-position: center;
  background-color: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .plata-single__cover { max-width: 320px; margin: 0 auto; }
}

.plata-single__cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-red);
  margin-bottom: 8px;
}
.plata-single__artist {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--isl-black);
  margin-bottom: 4px;
}
.plata-single__title {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.plata-single__meta {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--isl-grey-mid);
  margin-bottom: 32px;
}

.plata-single__score-block {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 24px;
}
.plata-single__score-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid var(--isl-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  color: var(--isl-red);
  flex-shrink: 0;
}
.plata-single__score-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-grey-mid);
  margin-bottom: 4px;
}
.plata-single__score-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--isl-black);
}

.plata-single__voter {
  background: var(--isl-grey-light);
  padding: 24px;
}

.plata-single__review {
  max-width: 760px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.75;
  color: var(--isl-black);
}
.plata-single__review p { margin: 0 0 1.2em; }
.plata-single__review h2 { font-size: 28px; margin: 1.4em 0 .5em; }
.plata-single__review blockquote {
  border-left: 4px solid var(--isl-red);
  padding: 8px 0 8px 24px;
  margin: 24px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 32px 0;
}
.pagination a, .pagination span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  border: 1px solid #d0d0d0;
  color: var(--isl-black);
}
.pagination .current { background: var(--isl-red); color: var(--isl-white); border-color: var(--isl-red); }
.pagination a:hover { border-color: var(--isl-red); color: var(--isl-red); }

/* ---------------------------------------
 * Plata filter bar (search + sort) — editorial style
 * Heavy top + bottom rules, no box, vertical dividers between fields,
 * single red CTA. Matches the rest of the magazine layout.
 * --------------------------------------- */
.plata-filterbar {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  background: var(--isl-black, #111);
  border: 0;
  padding: 10px;
  margin: 28px 0 24px;
  gap: 10px;
}
.plata-filterbar__search {
  position: relative;
  flex: 1 1 320px;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 0;
  padding: 0 16px;
  min-height: 48px;
}
.plata-filterbar__icon {
  position: static;
  width: 18px;
  height: 18px;
  color: var(--isl-black, #111);
  flex-shrink: 0;
}
.plata-filterbar__input {
  border: 0;
  outline: 0;
  padding: 0;
  width: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  background: transparent;
  color: var(--isl-black, #111);
}
.plata-filterbar__input::placeholder {
  color: #a8a8a8;
  font-weight: 400;
  font-style: italic;
}
.plata-filterbar__sort {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 0;
  padding: 0 16px;
  min-height: 48px;
}
.plata-filterbar__sort-label {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #777;
}
.plata-filterbar__sort select {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 14px;
  padding: 0 22px 0 0;
  cursor: pointer;
  color: var(--isl-black, #111);
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 6px top 55%, right 2px top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.plata-filterbar__btn {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--isl-red);
  color: #fff;
  border: 0;
  padding: 0 26px;
  min-height: 48px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.plata-filterbar__btn:hover { background: #c70017; }
.plata-filterbar__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #b5b5b5;
  padding: 0 16px;
  min-height: 48px;
  text-decoration: none;
}
.plata-filterbar__reset:hover { color: #fff; }
.plata-search-summary {
  margin: 4px 0 20px;
  font-size: 15px;
  color: var(--isl-grey-mid, #666);
}
.plata-search-summary strong { color: var(--isl-black, #111); }

/* ---------------------------------------
 * Login banner inside voter slot
 * --------------------------------------- */
.plata-card__login {
  background: #fff;
  border: 1px solid #e8e8e8;
  padding: 20px 18px;
  text-align: center;
}
.plata-card__login-msg {
  font-size: 14px;
  color: var(--isl-grey-mid, #666);
  margin-bottom: 14px;
  line-height: 1.5;
}
.plata-card__login-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.plata-card__login-register {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #999;
  text-decoration: none;
  padding: 8px 4px;
}
.plata-card__login-register:hover { color: var(--isl-black, #111); }

/* ---------------------------------------
 * Review textarea inside voter
 * --------------------------------------- */
.plata-card__review {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid #e0e0e0;
  background: transparent;
  padding: 8px 0 10px;
  font: 400 15px/1.55 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--isl-black, #111);
  margin-top: 6px;
  margin-bottom: 14px;
  resize: vertical;
  min-height: 80px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}
.plata-card__review:focus { border-bottom-color: var(--isl-black, #111); }

.plata-single__voter-wrap { margin-top: 8px; }

/* ─────────────────────────────────────────────────
 * Album link button — service-coloured, with icon
 * ───────────────────────────────────────────────── */
.album-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--svc, #111);
  color: #fff !important;
  text-decoration: none;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 22px;
  margin: 16px 0 18px;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.album-link:hover { filter: brightness(1.1); transform: translateY(-1px); }
.album-link__icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.album-link__icon svg { width: 100%; height: 100%; }
.album-link__label { line-height: 1; }
.album-link__arrow {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 14px;
  margin-left: 4px;
  opacity: 0.8;
}

/* ─────────────────────────────────────────────────
 * Genre filter chips (above plata grid)
 * ───────────────────────────────────────────────── */
.plata-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.plata-genres__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--isl-black, #111);
  border: 1.5px solid var(--isl-black, #111);
  padding: 8px 14px;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.plata-genres__chip:hover {
  background: var(--isl-black, #111);
  color: #fff;
}
.plata-genres__chip.is-active {
  background: var(--isl-red, #e30613);
  border-color: var(--isl-red, #e30613);
  color: #fff;
}
.plata-genres__chip.is-active:hover {
  background: #c70017;
}
.plata-genres__count {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────
 * Tracklist (on single plata page — sits under cover in left column)
 * ───────────────────────────────────────────────── */
.plata-single__left {
  display: flex;
  flex-direction: column;
}
.plata-tracklist {
  margin: 28px 0 0;
  border-top: 2px solid var(--isl-black, #111);
  padding-top: 18px;
}
.plata-tracklist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.plata-tracklist__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--isl-black, #111);
}
.plata-tracklist__meta {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-grey-mid, #777);
}
.plata-tracklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.plata-tracklist__row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s ease;
}
.plata-tracklist__row:hover {
  background: var(--isl-grey-light, #f9f9f9);
}
.plata-tracklist__row:last-child {
  border-bottom: 0;
}
.plata-tracklist__num {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 14px;
  color: var(--isl-grey-mid, #aaa);
  text-align: center;
}
.plata-tracklist__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--isl-black, #111);
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.plata-tracklist__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.plata-tracklist__name a:hover {
  color: var(--isl-red, #e30613);
  border-bottom-color: var(--isl-red, #e30613);
}
.plata-tracklist__explicit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #888;
  color: #fff;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.plata-tracklist__feat {
  color: var(--isl-grey-mid, #888);
  font-weight: 400;
  font-size: 13px;
  font-style: italic;
}
.plata-tracklist__time {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 600;
  font-size: 13px;
  color: var(--isl-grey-mid, #888);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .plata-tracklist__row { grid-template-columns: 28px 1fr auto; padding: 10px 2px; }
  .plata-tracklist__name { font-size: 14px; }
}

/* ─────────────────────────────────────────────────
 * Lag brotið niður — card + single page
 * ───────────────────────────────────────────────── */
.lag-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .lag-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .lag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .lag-grid { grid-template-columns: 1fr; } }

.lag-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.lag-card__thumb {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: #111 center/cover no-repeat;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.lag-card__thumb:hover { transform: translateY(-2px); }
.lag-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 50%);
  z-index: 1;
}
.lag-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #fff;
  opacity: 0.92;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.lag-card__play svg {
  width: 56px;
  height: 56px;
  background: rgba(227,6,19,0.92);
  border-radius: 50%;
  padding: 12px;
  box-sizing: content-box;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.lag-card__thumb:hover .lag-card__play { transform: scale(1.05); }
.lag-card__body {
  padding: 14px 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.lag-card__artist {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-grey-mid, #888);
}
.lag-card__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  margin: 2px 0 0;
  color: var(--isl-black, #111);
}
.lag-card__title a { color: inherit; text-decoration: none; }
.lag-card__title a:hover { color: var(--isl-red, #e30613); }
.lag-card__meta { font-size: 12px; color: var(--isl-grey-mid, #888); margin-top: 4px; }

/* Single lag page */
.lag-single { padding: 32px 0 56px; }
.lag-single__hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  margin-bottom: 36px;
  align-items: start;
}
@media (max-width: 900px) {
  .lag-single__hero { grid-template-columns: 1fr; gap: 24px; }
}
.lag-single__player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.lag-single__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lag-single__fallback {
  padding: 80px 20px;
  background: var(--isl-grey-light, #f7f7f7);
  text-align: center;
  color: var(--isl-grey-mid, #888);
}
.lag-single__cat {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--isl-red, #e30613);
  margin-bottom: 8px;
}
.lag-single__artist {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--isl-grey-mid, #555);
  margin-bottom: 6px;
}
.lag-single__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  color: var(--isl-black, #111);
}
.lag-single__meta { color: var(--isl-grey-mid, #777); font-size: 14px; margin-bottom: 14px; }
.lag-single__share {
  margin-top: 18px;
  font-size: 13px;
  color: var(--isl-grey-mid, #777);
  border-top: 1px solid #eee;
  padding-top: 14px;
}
.lag-single__share strong { color: var(--isl-black, #111); }
.lag-single__breakdown {
  max-width: 760px;
  margin: 8px auto 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--isl-black, #222);
}
.lag-single__breakdown p { margin: 0 0 1em; }
.lag-single__breakdown blockquote {
  border-left: 4px solid var(--isl-red, #e30613);
  padding: 8px 0 8px 20px;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  margin: 24px 0;
}

/* ─────────────────────────────────────────────────
 * ÍSL Texti Plus — badge, paywall, /plus/ page
 * ───────────────────────────────────────────────── */
.plus-badge {
  display: inline-block;
  background: var(--isl-red, #e30613);
  color: #fff;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  padding: 2px 6px;
  vertical-align: middle;
  margin-left: 4px;
  border-radius: 2px;
}
.plus-badge--sm { font-size: 8.5px; padding: 1px 5px; }
.plus-badge--lg { font-size: 14px; padding: 6px 14px; letter-spacing: 0.22em; }

/* Paywall on premium posts */
.plus-paywall-fade {
  height: 80px;
  margin-top: -80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 90%);
  position: relative;
  z-index: 1;
}
.plus-paywall {
  background: var(--isl-grey-light, #f7f7f7);
  border-top: 4px solid var(--isl-red, #e30613);
  padding: 36px 32px 32px;
  margin: 12px 0 32px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.plus-paywall__badge {
  display: inline-block;
  background: var(--isl-red, #e30613);
  color: #fff;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.plus-paywall__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--isl-black, #111);
}
.plus-paywall__title em { font-style: normal; color: var(--isl-red, #e30613); }
.plus-paywall__sub {
  font-size: 15px;
  color: var(--isl-grey-mid, #555);
  margin: 0 auto 18px;
  max-width: 480px;
  line-height: 1.5;
}
.plus-paywall__perks {
  list-style: none;
  margin: 0 auto 20px;
  padding: 0;
  font-size: 14px;
  color: var(--isl-black, #222);
  max-width: 360px;
  text-align: left;
}
.plus-paywall__perks li { padding: 4px 0; }
.plus-paywall__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.plus-paywall__btn {
  display: inline-block;
  background: var(--isl-red, #e30613);
  color: #fff;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 28px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.plus-paywall__btn:hover { background: #c70017; }
.plus-paywall__login { font-size: 13px; color: var(--isl-grey-mid, #777); text-decoration: none; }
.plus-paywall__login:hover { color: var(--isl-red, #e30613); }

/* /plus/ page */
.plus-page { padding: 48px 0 80px; }
.plus-hero {
  text-align: center;
  padding: 48px 20px;
  background: var(--isl-black, #111);
  color: #fff;
  margin-bottom: 48px;
}
.plus-hero__badge {
  display: inline-block;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--isl-red, #e30613);
  margin-bottom: 12px;
}
.plus-hero__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 90px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: #fff;
}
.plus-hero__title em { color: var(--isl-red, #e30613); font-style: normal; }
.plus-hero__sub {
  font-size: 17px;
  line-height: 1.55;
  color: #c9c9c9;
  margin: 0 auto 28px;
  max-width: 560px;
}
.plus-hero__price {
  font-family: var(--font-display, 'Helvetica Neue');
  margin: 0 0 18px;
}
.plus-hero__price-num {
  font-weight: 800;
  font-size: 48px;
  color: #fff;
  letter-spacing: -0.01em;
}
.plus-hero__price-unit {
  font-weight: 600;
  font-size: 18px;
  color: #888;
  margin-left: 6px;
}
.plus-hero__cta {
  display: inline-block;
  background: var(--isl-red, #e30613);
  color: #fff;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 18px 32px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.plus-hero__cta:hover { background: #c70017; transform: translateY(-1px); }
.plus-hero__note { font-size: 12px; color: #888; margin: 14px auto 0; max-width: 380px; line-height: 1.5; }
.plus-hero__active {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 20px 32px;
  color: #c9c9c9;
}
.plus-hero__active p { margin: 0; font-size: 14px; }
.plus-hero__active strong { color: #fff; }

/* Benefits grid */
.plus-benefits { padding: 0 16px; }
.plus-benefits__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 28px;
  text-align: center;
  margin: 0 0 32px;
  color: var(--isl-black, #111);
}
.plus-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .plus-benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .plus-benefits__grid { grid-template-columns: 1fr; } }
.plus-benefit {
  border-top: 2px solid var(--isl-black, #111);
  padding: 22px 4px 0;
}
.plus-benefit__num {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 14px;
  color: var(--isl-red, #e30613);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.plus-benefit__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--isl-black, #111);
}
.plus-benefit p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--isl-grey-mid, #555);
  margin: 0;
}

/* Final CTA band */
.plus-cta-band {
  margin: 56px 0 0;
  padding: 48px 20px;
  background: var(--isl-red, #e30613);
  color: #fff;
  text-align: center;
}
.plus-cta-band__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 36px;
  margin: 0 0 24px;
}
.plus-cta-band .plus-hero__cta {
  background: #111;
}
.plus-cta-band .plus-hero__cta:hover { background: #000; }

@media (max-width: 600px) {
  .plus-hero__title { font-size: 60px; }
  .plus-hero__sub { font-size: 15px; }
  .plus-hero__price-num { font-size: 38px; }
  .plus-cta-band__title { font-size: 26px; }
  .plus-paywall__title { font-size: 22px; }
}

/* ---------------------------------------
 * Reviews list
 * --------------------------------------- */
.plata-reviews {
  max-width: 760px;
  margin: 48px auto 0;
  border-top: 2px solid var(--isl-black, #111);
  padding-top: 28px;
}
.plata-reviews__header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}
.plata-reviews__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--isl-black, #111);
}
.plata-reviews__count {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 13px;
  background: var(--isl-red);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
}
.plata-reviews__empty {
  color: var(--isl-grey-mid, #666);
  font-size: 15px;
  font-style: italic;
}
.plata-reviews__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.plata-review {
  background: var(--isl-grey-light, #f7f7f7);
  border: 1px solid #ececec;
  padding: 18px 20px;
}
.plata-review__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.plata-review__avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  flex-shrink: 0;
}
.plata-review__who {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.plata-review__author {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 15px;
  color: var(--isl-black, #111);
}
.plata-review__when {
  font-size: 12px;
  color: var(--isl-grey-mid, #888);
  margin-top: 2px;
}
.plata-review__score {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--isl-red);
  color: var(--isl-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 16px;
}
.plata-review__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--isl-black, #222);
}
.plata-review__body p { margin: 0 0 0.6em; }
.plata-review__body p:last-child { margin: 0; }

/* Mobile tweaks */
@media (max-width: 700px) {
  .plata-filterbar {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    gap: 8px;
  }
  .plata-filterbar__search,
  .plata-filterbar__sort,
  .plata-filterbar__reset {
    flex: 1 1 100%;
    border: 0;
  }
  .plata-filterbar__btn {
    flex: 1 1 100%;
  }
  .plata-reviews { padding-top: 20px; margin-top: 32px; }
}

/* ---------------------------------------
 * Top 9 ranked grid (front page) — forced 3 × 3
 * --------------------------------------- */
.plata-grid--ranked {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
@media (max-width: 900px) {
  .plata-grid--ranked { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .plata-grid--ranked { grid-template-columns: 1fr; }
}
.plata-rank-wrap {
  position: relative;
}
.plata-rank-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--isl-black, #111);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  border: 2px solid #fff;
  pointer-events: none;
}
/* Highlight top 3 */
.plata-rank-wrap[data-rank="1"] .plata-rank-badge {
  background: var(--isl-red, #e30613);
  width: 52px;
  height: 52px;
  font-size: 22px;
  top: -14px;
  left: -14px;
}
.plata-rank-wrap[data-rank="2"] .plata-rank-badge,
.plata-rank-wrap[data-rank="3"] .plata-rank-badge {
  background: var(--isl-red, #e30613);
}

.plata-empty-msg {
  text-align: center;
  padding: 40px 0;
  color: var(--isl-grey-mid, #666);
  font-size: 16px;
}
.plata-empty-msg a {
  color: var(--isl-red, #e30613);
  font-weight: 700;
  text-decoration: none;
}
.plata-empty-msg a:hover { text-decoration: underline; }

/* ---------------------------------------
 * Voter blocks (Letterboxd-style: rating + review separately editable)
 * --------------------------------------- */
.plata-voter-block,
.plata-review-block {
  background: #fff;
  border: 1px solid #e8e8e8;
  padding: 18px 20px 16px;
  margin-bottom: 12px;
}
.plata-review-block textarea.plata-card__review {
  margin: 8px 0 14px;
  border: 0;
  border-bottom: 1.5px solid #e0e0e0;
  background: transparent;
  outline: 0;
  resize: vertical;
  width: 100%;
  padding: 8px 0;
  font-family: var(--font-body), Georgia, serif;
  font-size: 15px;
  color: var(--isl-black, #111);
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.plata-review-block textarea.plata-card__review:focus {
  border-bottom-color: var(--isl-black, #111);
}
.plata-card__submit--alt {
  background: var(--isl-black, #111);
  letter-spacing: 0.22em;
  transition: background 0.2s ease, opacity 0.15s ease;
}
.plata-card__submit--alt:hover {
  background: #2a2a2a;
}
.plata-voter-block__status {
  font-size: 13px;
  margin-top: 10px;
  font-weight: 600;
  min-height: 18px;
  line-height: 1.3;
}
.plata-voter-block__status.is-ok  { color: #0a8a3a; }
.plata-voter-block__status.is-err { color: var(--isl-red, #e30613); }

/* ─────────────────────────────────────────────────
 * Front-page hub: dark hero with intro + album of the week + stats
 * ───────────────────────────────────────────────── */
.hero-hub {
  background: #0d0d0d;
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 0.9fr;
  gap: 0;
  margin: 24px 0 40px;
  padding: 0;
  overflow: hidden;
}
.hero-hub__intro,
.hero-hub__feature,
.hero-hub__stats {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}
.hero-hub__intro {
  border-right: 1px solid #1f1f1f;
  justify-content: center;
}
.hero-hub__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 38px;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.hero-hub__title em {
  font-style: normal;
  color: var(--isl-red, #e30613);
}
.hero-hub__sub {
  font-size: 15px;
  line-height: 1.55;
  color: #b9b9b9;
  margin: 0 0 24px;
  max-width: 380px;
}
.hero-hub__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-hub__cta {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 22px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hero-hub__cta--solid {
  background: var(--isl-red, #e30613);
  color: #fff;
  border: 2px solid var(--isl-red, #e30613);
}
.hero-hub__cta--solid:hover { background: #c70017; border-color: #c70017; }
.hero-hub__cta--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid #3a3a3a;
}
.hero-hub__cta--ghost:hover { border-color: #fff; }

/* Featured album in hero */
.hero-hub__feature {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: center;
  border-right: 1px solid #1f1f1f;
}
.hero-hub__feature-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  position: relative;
}
.hero-hub__feature-cover-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 56px;
  color: #4a4a4a;
}
.hero-hub__feature-info { display: flex; flex-direction: column; gap: 4px; }
.hero-hub__feature-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--isl-red, #e30613);
  color: #fff;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 10px;
  margin-bottom: 6px;
}
.hero-hub__feature-artist {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #b9b9b9;
}
.hero-hub__feature-title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 6px;
}
.hero-hub__feature-title a { color: #fff; text-decoration: none; }
.hero-hub__feature-title a:hover { color: var(--isl-red, #e30613); }
.hero-hub__feature-meta {
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
}
.hero-hub__feature-genre {
  font-size: 13px;
  color: var(--isl-red, #e30613);
  font-weight: 600;
  margin-bottom: 14px;
}
.hero-hub__feature-score-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.hero-hub__feature-score {
  width: 72px;
  height: 72px;
  border: 3px solid var(--isl-red, #e30613);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 26px;
  color: var(--isl-red, #e30613);
  flex-shrink: 0;
}
.hero-hub__feature-vote-count { font-size: 13px; color: #888; }
.hero-hub__feature-link {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.hero-hub__feature-link:hover { color: var(--isl-red, #e30613); }

/* Stats column */
.hero-hub__stats {
  gap: 28px;
  justify-content: center;
}
.hero-hub__stat {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-hub__stat-icon {
  width: 28px;
  height: 28px;
  color: #6a6a6a;
  flex-shrink: 0;
}
.hero-hub__stat-num {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 28px;
  color: var(--isl-red, #e30613);
  line-height: 1;
}
.hero-hub__stat-label {
  font-size: 12px;
  color: #b9b9b9;
  margin-top: 2px;
  line-height: 1.3;
}

/* Mobile/tablet stacking for hero */
@media (max-width: 1100px) {
  .hero-hub { grid-template-columns: 1fr; }
  .hero-hub__intro,
  .hero-hub__feature,
  .hero-hub__stats {
    border-right: 0;
    border-bottom: 1px solid #1f1f1f;
  }
  .hero-hub__stats:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  .hero-hub__feature { grid-template-columns: 1fr; }
  .hero-hub__title { font-size: 30px; }
  .hero-hub__feature-title { font-size: 24px; }
}

/* ─────────────────────────────────────────────────
 * Top-5 horizontal album grid on front page
 * ───────────────────────────────────────────────── */
.plata-grid--top5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-bottom: 40px;
  margin-top: 16px;
}
@media (max-width: 1100px) { .plata-grid--top5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .plata-grid--top5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .plata-grid--top5 { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────
 * Three columns: reviews / popular / activity
 * ───────────────────────────────────────────────── */
.hub-cols {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1fr;
  gap: 36px;
  margin: 16px 0 56px;
}
@media (max-width: 1000px) { .hub-cols { grid-template-columns: 1fr; gap: 28px; } }
.hub-col__head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--isl-black, #111);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.hub-col__bullet {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--isl-red, #e30613);
  flex-shrink: 0;
}
.hub-col__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
  color: var(--isl-black, #111);
}
.hub-empty { color: #888; font-size: 14px; padding: 12px 0; }

/* Reviews list */
.hub-reviews { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.hub-review {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}
.hub-review:last-child { border-bottom: 0; padding-bottom: 0; }
.hub-review__thumb {
  display: block;
  width: 64px;
  height: 64px;
  background: #e8e8e8 center/cover no-repeat;
  flex-shrink: 0;
}
.hub-review__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hub-review__head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.hub-review__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 15px;
  color: var(--isl-black, #111);
  text-decoration: none;
  line-height: 1.2;
}
.hub-review__title:hover { color: var(--isl-red, #e30613); }
.hub-review__artist { color: #888; font-weight: 500; }
.hub-review__score {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  color: var(--isl-red, #e30613);
  font-size: 16px;
  flex-shrink: 0;
}
.hub-review__excerpt {
  font-size: 13px;
  line-height: 1.45;
  color: #444;
  margin: 2px 0 4px;
  font-style: italic;
}
.hub-review__meta { font-size: 11px; color: #888; }
.hub-review__meta strong { color: var(--isl-black, #111); font-weight: 700; }

/* Popular list */
.hub-popular { list-style: none; margin: 0; padding: 0; counter-reset: pop; }
.hub-popular__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.hub-popular__row:last-child { border-bottom: 0; }
.hub-popular__num {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  color: #c5c5c5;
  font-size: 18px;
}
.hub-popular__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 600;
  font-size: 14px;
  color: var(--isl-black, #111);
  text-decoration: none;
  line-height: 1.3;
}
.hub-popular__title:hover { color: var(--isl-red, #e30613); }
.hub-popular__artist { color: #888; font-weight: 500; }
.hub-popular__score {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 14px;
  color: var(--isl-red, #e30613);
}

/* Activity feed */
.hub-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hub-activity__row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.hub-activity__row:last-child { border-bottom: 0; padding-bottom: 0; }
.hub-activity__avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
}
.hub-activity__body { min-width: 0; }
.hub-activity__line {
  font-size: 13px;
  line-height: 1.45;
  color: #333;
}
.hub-activity__line strong { color: var(--isl-black, #111); font-weight: 700; }
.hub-activity__line a {
  color: var(--isl-black, #111);
  text-decoration: none;
  font-weight: 600;
}
.hub-activity__line a:hover { color: var(--isl-red, #e30613); }
.hub-activity__score { color: var(--isl-red, #e30613); font-weight: 800; }
.hub-activity__meta { font-size: 11px; color: #888; margin-top: 2px; display: block; }
.hub-activity__seeall {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--isl-black, #111);
  color: #fff;
  padding: 10px 14px;
  text-decoration: none;
}
.hub-activity__seeall:hover { background: var(--isl-red, #e30613); }

/* ─────────────────────────────────────────────────
 * News strip — hero feature with overlaid title + sidebar of side cards
 * ───────────────────────────────────────────────── */
.front-news-strip {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 16px;
  margin: 20px 0 28px;
}
@media (max-width: 900px) { .front-news-strip { grid-template-columns: 1fr; } }

.front-news-strip__hero {
  position: relative;
  display: block;
  background: var(--isl-black, #111);
  min-height: 460px;
  overflow: hidden;
}

.front-news-strip__hero-img {
  position: absolute;
  inset: 0;
  display: block;
  background: #222 center/cover no-repeat;
  z-index: 1;
}
.front-news-strip__hero-img::after {
  /* Dark gradient overlay so text reads */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 75%);
  z-index: 1;
}
.front-news-strip__cat {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--isl-red, #e30613);
  color: #fff;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  z-index: 3;
}
.front-news-strip__hero-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 32px 36px 30px;
  min-height: 460px;
  color: #fff;
  /* Let clicks pass through body to the underlying image link */
  pointer-events: none;
}
.front-news-strip__hero-body a,
.front-news-strip__hero-body button { pointer-events: auto; }
.front-news-strip__cat-link {
  display: inline-block;
  align-self: flex-start;
  color: var(--isl-red, #e30613);
  background: rgba(0,0,0,0.4);
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 5px 10px;
  margin-bottom: 4px;
}
.front-news-strip__hero-title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0;
  color: #fff;
  max-width: 760px;
}
.front-news-strip__hero-title a { color: inherit; text-decoration: none; }
.front-news-strip__hero-title a:hover { color: #ffd8dc; }
.front-news-strip__hero-excerpt {
  font-size: 14.5px;
  line-height: 1.5;
  color: #e3e3e3;
  margin: 0;
  max-width: 560px;
}
.front-news-strip__hero-meta {
  font-size: 11px;
  color: #c9c9c9;
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* Side cards stack — editorial layout, NO bg fill, thin separators */
.front-news-strip__side {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-content: space-between;
}
.front-news-strip__side-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: center;
  background: transparent;
  padding: 14px 0;
  border-top: 1px solid #e6e6e6;
  flex: 1;
  min-height: 0;
}
.front-news-strip__side-card:first-child {
  border-top: 0;
  padding-top: 0;
}
.front-news-strip__side-card:last-child { padding-bottom: 0; }
.front-news-strip__side-img {
  display: block;
  width: 140px;
  height: 140px;
  background: #eaeaea center/cover no-repeat;
  flex-shrink: 0;
}
.front-news-strip__side-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.front-news-strip__side-cat {
  display: inline-block;
  align-self: flex-start;
  color: var(--isl-red, #e30613);
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.front-news-strip__side-title {
  margin: 0;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
}
.front-news-strip__side-title a { color: var(--isl-black, #111); text-decoration: none; }
.front-news-strip__side-title a:hover { color: var(--isl-red, #e30613); }
.front-news-strip__side-meta { font-size: 12px; color: #888; }

/* ─────────────────────────────────────────────────
 * Plata card — symmetric heights in grid rows
 * ───────────────────────────────────────────────── */
.plata-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plata-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.plata-card__meta-top {
  display: flex;
  flex-direction: column;
  /* Reserve consistent vertical space so titles of varying length don't break alignment.
     ~2 lines for title + artist + sub */
}
.plata-card__title {
  /* Reserve space for up to 3 lines so all cards align */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.2;
}
.plata-card__divider,
.plata-card__score-row {
  margin-top: auto;
}
.plata-card__score-row {
  margin-top: 12px;
}
/* When divider is present, only it gets auto margin so the score sits below */
.plata-card__body > .plata-card__divider { margin-top: auto; }
.plata-card__body > .plata-card__divider + .plata-card__score-row { margin-top: 12px; }

/* ─────────────────────────────────────────────────
 * Auth pages (/innskra/, /nyskra/) — split-panel
 * ───────────────────────────────────────────────── */

/* Hide site chrome when body has .is-auth */
.is-auth .site-header,
.is-auth .primary-nav,
.is-auth .site-footer { display: none !important; }
.is-auth .container { max-width: none; padding: 0; margin: 0; }

/* ── Split layout ── */
.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* ── Left: brand panel ── */
.auth-split__brand {
  background: var(--isl-black, #111);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 52px 56px;
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
}
.auth-split__logo {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  display: block;
}
.auth-split__brand-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-split__headline {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}
.auth-split__sub {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.45);
  margin: 0;
}
.auth-split__badge {
  font-family: var(--font-display, 'Helvetica Neue');
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
}

/* ── Right: form panel ── */
.auth-split__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 56px;
  box-sizing: border-box;
}
.auth-split__inner {
  width: 100%;
  max-width: 400px;
}
.auth-split__eyebrow {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--isl-red, #e30613);
  margin-bottom: 10px;
}
.auth-split__title {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--isl-black, #111);
  margin: 0 0 36px;
}

/* ── Alert / error ── */
.auth-alert {
  background: #fff0f1;
  border-left: 3px solid var(--isl-red, #e30613);
  color: var(--isl-red, #e30613);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
}

/* ── Form ── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.auth-field__label {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #aaa;
}
.auth-field__input {
  border: 0;
  border-bottom: 1.5px solid #ddd;
  background: transparent;
  outline: 0;
  padding: 8px 0 12px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--isl-black, #111);
  transition: border-color 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}
.auth-field__input:focus { border-bottom-color: var(--isl-black, #111); }
.auth-field__hint {
  font-size: 12px;
  color: #bbb;
  margin-top: 2px;
}
.auth-field--check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: -8px;
  font-size: 13px;
  color: #888;
  cursor: pointer;
}
.auth-field--check input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--isl-black, #111);
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* ── Submit ── */
.auth-btn {
  margin-top: 4px;
  background: var(--isl-black, #111);
  color: #fff;
  border: 0;
  width: 100%;
  padding: 18px 24px;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.15s ease;
}
.auth-btn:hover { background: #2a2a2a; }
.auth-btn:active { opacity: 0.85; }

/* ── Switch link ── */
.auth-switch {
  margin-top: 30px;
  font-size: 14px;
  color: #999;
}
.auth-switch a {
  color: var(--isl-black, #111);
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}
.auth-switch a:hover { color: var(--isl-red, #e30613); }

/* ── Mobile: stack vertically ── */
@media (max-width: 768px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-split__brand {
    position: relative;
    height: auto;
    padding: 36px 28px 32px;
  }
  .auth-split__headline { font-size: 28px; }
  .auth-split__badge { display: none; }
  .auth-split__panel { padding: 44px 28px 72px; }
  .auth-split__title { font-size: 30px; margin-bottom: 28px; }
  .auth-field__input { font-size: 16px; }
}

/* ─────────────────────────────────────────────────
 * Mobile drawer
 * ───────────────────────────────────────────────── */
.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.site-drawer[hidden] { display: none; }
.site-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.site-drawer__panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 86%;
  max-width: 360px;
  background: var(--isl-black, #111);
  color: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform 0.26s cubic-bezier(.2,.7,.2,1);
  pointer-events: auto;
  box-shadow: 0 0 32px rgba(0,0,0,0.3);
}
.site-drawer.is-open .site-drawer__backdrop { opacity: 1; pointer-events: auto; }
.site-drawer.is-open .site-drawer__panel { transform: translateX(0); }
.site-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #232323;
}
.site-drawer__brand {
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 16px;
  color: #fff;
}
.site-drawer__close {
  background: transparent;
  border: 0;
  color: #fff;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-drawer__close svg { width: 22px; height: 22px; }
.site-drawer__nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.site-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.site-drawer__nav li { border-bottom: 1px solid #1f1f1f; }
.site-drawer__nav a {
  display: block;
  padding: 16px 22px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-drawer__nav a:hover { background: #1a1a1a; color: var(--isl-red, #e30613); }
.site-drawer__foot {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #232323;
}
.site-drawer__user { font-size: 13px; color: #b9b9b9; margin-bottom: 6px; }
.site-drawer__user strong { color: #fff; }
.site-drawer__cta {
  display: block;
  text-align: center;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 20px;
}
.site-drawer__cta--solid {
  background: var(--isl-red, #e30613);
  color: #fff;
}
.site-drawer__cta--solid:hover { background: #c70017; }
.site-drawer__cta--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #444;
}
.site-drawer__cta--ghost:hover { border-color: #fff; }

/* lock body scroll when overlay is open */
html.is-overlay-open, html.is-overlay-open body { overflow: hidden; }

/* ─────────────────────────────────────────────────
 * Search overlay (slides down from top)
 * ───────────────────────────────────────────────── */
.site-search {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}
.site-search[hidden] { display: none; }
.site-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.site-search__panel {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--isl-black, #111);
  padding: 18px 24px;
  transform: translateY(-100%);
  transition: transform 0.24s cubic-bezier(.2,.7,.2,1);
  pointer-events: auto;
}
.site-search.is-open .site-search__backdrop { opacity: 1; pointer-events: auto; }
.site-search.is-open .site-search__panel { transform: translateY(0); }
.site-search__form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
  background: #fff;
  padding: 0 16px;
  min-height: 52px;
}
.site-search__icon { width: 20px; height: 20px; color: var(--isl-black, #111); flex-shrink: 0; }
.site-search__input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  padding: 8px 0;
  min-width: 0;
}
.site-search__input::placeholder { color: #a8a8a8; font-style: italic; font-weight: 400; }
.site-search__submit {
  background: var(--isl-red, #e30613);
  color: #fff;
  border: 0;
  font-family: var(--font-display, 'Helvetica Neue');
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0 22px;
  min-height: 44px;
  cursor: pointer;
}
.site-search__submit:hover { background: #c70017; }
.site-search__close {
  background: transparent;
  border: 0;
  color: var(--isl-black, #111);
  width: 36px;
  height: 36px;
  cursor: pointer;
  flex-shrink: 0;
}
.site-search__close svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .site-search__panel { padding: 12px; }
  .site-search__form { padding: 0 10px; min-height: 48px; }
  .site-search__input { font-size: 16px; }
  .site-search__submit { display: none; }
}

/* ─────────────────────────────────────────────────
 * COMPREHENSIVE MOBILE PASS (under 768px)
 * ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header: compact */
  .site-header { padding: 0; }
  .site-header__inner { padding: 10px 14px; min-height: 56px; }
  .site-logo { font-size: 22px !important; letter-spacing: 0.04em; }
  .site-tagline { font-size: 9px !important; letter-spacing: 0.18em; margin-top: 2px; }
  .menu-toggle, .search-toggle { width: 38px; height: 38px; padding: 0; }
  .menu-toggle svg, .search-toggle svg { width: 22px; height: 22px; }

  /* Hide utility links on small screens — drawer covers them */
  .utility-link--hide-mobile { display: none; }
  .utility-menu li:not(.is-mobile) { display: none; }

  /* Primary nav: hide on mobile (drawer replaces it) */
  .primary-nav { display: none; }

  /* Container side padding tighter */
  .container { padding-left: 14px; padding-right: 14px; }

  /* Front page news strip: hero shorter on mobile, side cards back to fixed-height row */
  .front-news-strip { gap: 12px; margin: 14px 0 24px; }
  .front-news-strip__hero { min-height: 260px; }
  .front-news-strip__hero-body { padding: 18px 18px 18px; min-height: 260px; }
  .front-news-strip__hero-title { font-size: 22px; }
  .front-news-strip__hero-excerpt { font-size: 13px; }
  .front-news-strip__side-card { grid-template-columns: 96px 1fr; min-height: 78px; flex: 0 0 auto; }
  .front-news-strip__side-img { min-height: 78px; }
  .front-news-strip__side-body { padding: 10px 12px 10px 0; }
  .front-news-strip__side-title { font-size: 13px; }

  /* Section headings smaller */
  .section-head__title { font-size: 18px; }
  .section-head__link { font-size: 11px; }

  /* Plata single page tighter */
  .plata-single { padding: 24px 0; }
  .plata-single__hero { gap: 20px; margin-bottom: 28px; }
  .plata-single__cover { max-width: 280px; margin: 0 auto; }
  .plata-single__title { font-size: 28px !important; }
  .plata-single__artist { font-size: 14px !important; }
  .plata-single__score-block { padding: 16px 0; }
  .plata-single__score-circle { width: 88px; height: 88px; font-size: 32px; }
  .plata-single__review { font-size: 16px; }
  .plata-reviews { margin-top: 28px; padding-top: 20px; }
  .plata-reviews__title { font-size: 18px; }

  /* Plata cards on archive: smaller */
  .plata-card__title { font-size: 16px; }
  .plata-card__artist { font-size: 11px; letter-spacing: 0.2em; }
  .plata-card__avg-num { font-size: 26px; }

  /* 3-column hub stacks (already does at 1000px) — tighten further */
  .hub-cols { gap: 24px; margin: 8px 0 32px; }
  .hub-col__title { font-size: 12px; }

  /* Auth pages tighter */
  .auth-page { padding: 24px 14px 56px; }
  .auth-card__title { font-size: 26px; }
}

@media (max-width: 480px) {
  .site-header__inner { padding: 8px 12px; min-height: 52px; }
  .site-logo { font-size: 20px !important; }
  .site-tagline { display: none; }
  .container { padding-left: 12px; padding-right: 12px; }
  .front-news-strip__hero { min-height: 220px; }
  .front-news-strip__hero-body { min-height: 220px; padding: 16px; }
  .front-news-strip__hero-title { font-size: 20px; }
  .plata-single__title { font-size: 24px !important; }
  .plata-single__cover { max-width: 100%; }
  .plata-single__score-circle { width: 72px; height: 72px; font-size: 28px; }
  .section-head__title { font-size: 16px; letter-spacing: 0.04em; }
}

/* ============================================================
   UPPÁHALDS LAG — compact dropdown in right column
   Lives between GEFÐU EINKUNN and SKRIFAÐU DÓM blocks
   ============================================================ */

/* Dropdown wrapper — positioned so the list can overflow */
.plata-fav__block { position: relative; }
.plata-fav__wrap  { position: relative; margin-bottom: 12px; }

/* Trigger button — looks like a custom select */
.plata-fav__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid #d8d8d8;
  cursor: pointer;
  font-family: var(--font-display, 'Helvetica Neue');
  font-size: 13px;
  text-align: left;
  transition: border-color 0.15s;
}
.plata-fav__trigger:hover { border-color: var(--isl-black, #111); }
.plata-fav__trigger[aria-expanded="true"] {
  border-color: var(--isl-black, #111);
  border-bottom-color: transparent;
}

.plata-fav__chosen {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.plata-fav__chosen--ph { color: #aaa; font-weight: 400; }

.plata-fav__chevron {
  flex-shrink: 0;
  color: #999;
  transition: transform 0.15s;
}
.plata-fav__trigger[aria-expanded="true"] .plata-fav__chevron { transform: rotate(180deg); }

/* Dropdown list */
.plata-fav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 300;
  background: #fff;
  border: 1px solid var(--isl-black, #111);
  border-top: none;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 2px 0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.plata-fav__dropdown[hidden] { display: none; }

.plata-fav__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
  transition: background 0.08s;
}
.plata-fav__opt:last-child { border-bottom: none; }
.plata-fav__opt:hover { background: #f6f6f6; }
.plata-fav__opt.is-selected { background: #f6f6f6; }

.plata-fav__opt-no {
  font-family: var(--font-display, 'Helvetica Neue');
  font-size: 11px;
  color: #ccc;
  width: 16px;
  text-align: right;
  flex-shrink: 0;
}
.plata-fav__opt.is-selected .plata-fav__opt-no { color: var(--isl-red, #e30613); }

.plata-fav__opt-name {
  font-family: var(--font-display, 'Helvetica Neue');
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}

.plata-fav__opt-check {
  color: var(--isl-red, #e30613);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.1s;
}
.plata-fav__opt.is-selected .plata-fav__opt-check { opacity: 1; }

/* Submit button — full width, same red style */
.plata-fav__submit { width: 100%; }

/* ── Top 5 compact list ────────────────────────────────────── */
.plata-fav__top5 { margin-top: 14px; padding-top: 14px; border-top: 1px solid #ececec; }
.plata-fav__top5[hidden] { display: none; }

.plata-fav__top5-label {
  font-family: var(--font-display, 'Helvetica Neue');
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #bbb;
  margin: 0 0 10px;
}

.plata-fav__top5-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.plata-fav__top5-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display, 'Helvetica Neue');
  font-size: 12px;
}
.plata-fav__top5-rank {
  font-size: 10px;
  color: #ccc;
  width: 12px;
  text-align: right;
  flex-shrink: 0;
}
.plata-fav__top5-row.is-top .plata-fav__top5-rank { color: var(--isl-red, #e30613); }
.plata-fav__top5-name {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plata-fav__top5-row.is-top .plata-fav__top5-name { font-weight: 700; }
.plata-fav__top5-row.is-mine .plata-fav__top5-name { color: var(--isl-red, #e30613); }
.plata-fav__top5-pct {
  font-size: 11px;
  font-weight: 700;
  color: #bbb;
  flex-shrink: 0;
}
.plata-fav__top5-row.is-top .plata-fav__top5-pct { color: var(--isl-black, #111); }