/* Algie's Records (public): the magazine — one visual theme per dossier (colours, title face, background).
   Adapted from the private site's dossiers.css. Fonts: /static/fonts/magazine-fonts.css (self-hosted). */

.mag, .mag-teaser {
  --m-bg: #141318; --m-ink: #F4F3F7; --m-soft: #B9B4C2; --m-accent: #FF528F; --m-accent2: #E26D5C;
  --m-card: rgba(255, 255, 255, .05); --m-line: rgba(255, 255, 255, .14);
  --m-title: "Syne", sans-serif; --m-text: "Inter", sans-serif;
  --m-backdrop: none;
}

/* ---------- themes ---------- */
.theme-prog {              /* epic, Roger Dean skies: deep indigo to teal, gold */
  --m-bg: #0D1330; --m-ink: #F2EEDF; --m-soft: #C3C6D8; --m-accent: #E8B84A; --m-accent2: #5FC2BA;
  --m-title: "Cinzel", serif;
  --m-backdrop: radial-gradient(ellipse at 20% 0%, rgba(95, 194, 186, .35), transparent 55%),
                radial-gradient(ellipse at 90% 30%, rgba(232, 184, 74, .18), transparent 50%),
                linear-gradient(180deg, #0D1330, #101A3F 60%, #0D1330);
}
.theme-psyche {            /* light show: liquid colours, swirling title */
  --m-bg: #1A0B2E; --m-ink: #FFF4E0; --m-soft: #F2C9F5; --m-accent: #FF7A00; --m-accent2: #B8FF3C;
  --m-title: "Monoton", cursive;
  --m-backdrop: repeating-radial-gradient(circle at 30% 20%, rgba(255, 122, 0, .10) 0 18px, rgba(184, 255, 60, .06) 18px 36px, rgba(255, 64, 200, .09) 36px 54px),
                conic-gradient(from 210deg at 70% 40%, #2B0F4A, #4A0F3E, #0F2E4A, #2B0F4A);
}
.theme-canterbury {        /* pastoral, whimsical: paper, moss green, italic serif */
  --m-bg: #F3ECDC; --m-ink: #2B261C; --m-soft: #5C5444; --m-accent: #3F6B3A; --m-accent2: #B5652A;
  --m-card: rgba(63, 107, 58, .07); --m-line: rgba(43, 38, 28, .18);
  --m-title: "Playfair Display", serif; --m-text: "Lora", serif;
  --m-backdrop: radial-gradient(circle at 10% 10%, rgba(181, 101, 42, .10), transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(63, 107, 58, .12), transparent 45%);
}
.theme-orchestra {         /* concert hall: black, gold, staff lines */
  --m-bg: #0B0A08; --m-ink: #F1E9D8; --m-soft: #C9BFA8; --m-accent: #D4AF37; --m-accent2: #9B2335;
  --m-title: "Cormorant Garamond", serif; --m-text: "Cormorant Garamond", serif;
  --m-backdrop: repeating-linear-gradient(180deg, transparent 0 22px, rgba(212, 175, 55, .07) 22px 23px),
                radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, .16), transparent 60%);
}
.theme-opera {             /* theatre: red velvet curtains, gold, poster face */
  --m-bg: #2A0507; --m-ink: #FBEFD9; --m-soft: #E9C9A8; --m-accent: #F0C04A; --m-accent2: #FF6F59;
  --m-title: "Abril Fatface", serif;
  --m-backdrop: repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 14px, rgba(255, 255, 255, .03) 14px 28px),
                linear-gradient(180deg, #4A080C, #2A0507 70%);
}
.theme-y1973 {             /* 1973: brown, mustard, orange stripes and the prism */
  --m-bg: #2B1A10; --m-ink: #FFF1D6; --m-soft: #F0CF98; --m-accent: #F6A21C; --m-accent2: #D2491F;
  --m-title: "Righteous", cursive;
  --m-backdrop: linear-gradient(180deg, #2B1A10 0 70%, transparent),
                repeating-linear-gradient(180deg, #8C3B12 0 10px, #D2491F 10px 20px, #F6A21C 20px 30px, #F2D16B 30px 40px, #2B1A10 40px 52px);
}
.theme-voices {            /* voices: dusk rose and lilac, elegant serif */
  --m-bg: #1E1426; --m-ink: #FBEFF4; --m-soft: #DCC6DA; --m-accent: #F39BB8; --m-accent2: #B9A2F0;
  --m-title: "DM Serif Display", serif;
  --m-backdrop: radial-gradient(ellipse at 80% 0%, rgba(243, 155, 184, .28), transparent 55%),
                radial-gradient(ellipse at 0% 60%, rgba(185, 162, 240, .20), transparent 55%);
}

.theme-covers {            /* gallery: white walls, black frames, pop colours */
  --m-bg: #F7F5F0; --m-ink: #161514; --m-soft: #55524C; --m-accent: #E0301E; --m-accent2: #1E5BE0;
  --m-card: rgba(0, 0, 0, .04); --m-line: rgba(0, 0, 0, .16);
  --m-title: "Bebas Neue", sans-serif;
  --m-backdrop: linear-gradient(90deg, rgba(224, 48, 30, .10) 0 8px, transparent 8px),
                radial-gradient(circle at 92% 8%, rgba(30, 91, 224, .12), transparent 30%),
                radial-gradient(circle at 6% 90%, rgba(247, 201, 30, .18), transparent 30%);
}
.theme-covers .mag-hero h1, .theme-covers .mag-teaser-title { letter-spacing: .02em; }
.theme-covers .mag-covers img { border: 6px solid #fff; box-shadow: 0 0 0 1px #161514, 0 8px 18px rgba(0, 0, 0, .25); }
.theme-floyd {             /* the prism: black, white beam, spectrum */
  --m-bg: #050507; --m-ink: #F2F2F2; --m-soft: #B4B4BC; --m-accent: #E8E8E8; --m-accent2: #FF3B30;
  --m-title: "Space Grotesk", sans-serif;
  --m-backdrop: linear-gradient(160deg, transparent 0 62%, rgba(255, 59, 48, .25) 62% 64%, rgba(255, 149, 0, .25) 64% 66%,
                rgba(255, 214, 10, .25) 66% 68%, rgba(52, 199, 89, .25) 68% 70%, rgba(10, 132, 255, .25) 70% 72%,
                rgba(175, 82, 222, .25) 72% 74%, transparent 74%),
                linear-gradient(20deg, transparent 0 40%, rgba(255, 255, 255, .10) 40% 41%, transparent 41%);
}
.theme-floyd .mag-hero h1, .theme-floyd .mag-teaser-title { font-weight: 700; letter-spacing: -.01em; }
.theme-floyd .mag-chapter h2 { font-weight: 700; }

/* ---------- article ---------- */
.mag { background-color: var(--m-bg); background-image: var(--m-backdrop); color: var(--m-ink); font-family: var(--m-text);
       flex: 1; padding: 2.5rem var(--gutter) 3rem; }
.mag a { color: var(--m-accent); }
.mag-kicker { font: 700 .78rem var(--font-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent); margin: 0; }
.mag-kicker a { color: inherit; text-decoration: none; }
.mag-hero { max-width: 72rem; margin: 0 auto; }
.mag-hero h1 { font-family: var(--m-title); font-weight: 400; font-size: clamp(2.3rem, 6.4vw, 4.8rem); line-height: 1.02;
               margin: .6rem 0 1rem; color: var(--m-ink); max-width: 18ch; }
.theme-prog .mag-hero h1, .theme-orchestra .mag-hero h1 { font-weight: 600; letter-spacing: .02em; }
.theme-canterbury .mag-hero h1 { font-style: italic; font-weight: 700; }
.theme-psyche .mag-hero h1 { color: var(--m-accent); text-shadow: 3px 3px 0 #FF40C8, 6px 6px 0 rgba(184, 255, 60, .55); }
.theme-y1973 .mag-hero h1 { color: var(--m-accent); text-shadow: 3px 3px 0 var(--m-accent2); }
.mag-standfirst { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; color: var(--m-soft); max-width: 46rem; margin: 0 0 1rem; }
.mag-meta { font: 600 .9rem var(--font-ui, sans-serif); color: var(--m-soft); }
.mag-play { display: inline-block; padding: .35rem .9rem; border-radius: 999px; background: var(--m-accent); color: var(--m-bg) !important;
            text-decoration: none; font: 700 .9rem var(--font-ui, sans-serif); }
.mag-covers { display: flex; gap: .5rem; margin: 1.5rem 0 0; overflow: hidden; }
.mag-covers img { width: clamp(4rem, 9vw, 6.5rem); aspect-ratio: 1; object-fit: cover; border-radius: 6px;
                  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transform: rotate(-2deg); }
.mag-covers img:nth-child(even) { transform: rotate(2.5deg) translateY(6px); }

.mag-body { max-width: 72rem; margin-left: auto; margin-right: auto; display: grid; gap: 2.5rem; margin-top: 2.5rem; }
@media (min-width: 1000px) { .mag-body { grid-template-columns: minmax(0, 1fr) 16rem; } }
.mag-text { max-width: 44rem; }
.mag-chapter h2 { font-family: var(--m-title); font-weight: 400; font-size: 1.9rem; margin: 2.2rem 0 .8rem; color: var(--m-accent); }
.theme-canterbury .mag-chapter h2 { font-style: italic; font-weight: 700; }
.mag .prose { font-size: 1.08rem; line-height: 1.7; color: var(--m-ink); }
.mag .prose a { color: var(--m-accent); }
.dropcap > p:first-child::first-letter { float: left; font-family: var(--m-title); font-size: 3.6em; line-height: .85;
                                          margin: .08em .1em 0 0; color: var(--m-accent); }
.mag-quote { margin: 2rem 0; padding: 1rem 0 1rem 1.2rem; border-left: 4px solid var(--m-accent2); }
.mag-quote p { font-family: var(--m-title); font-size: 1.6rem; line-height: 1.25; margin: 0; color: var(--m-ink); }
.mag-quote cite { display: block; margin-top: .5rem; font: 600 .85rem var(--font-ui, sans-serif); color: var(--m-soft); font-style: normal; }

.mag-track { margin: 1.1rem 0 0; padding: .9rem; border-radius: 10px; background: var(--m-card); border: 1px solid var(--m-line); }
.mag-track-head { display: grid; grid-template-columns: auto 3.6rem 1fr; gap: .8rem; align-items: center; text-decoration: none; color: var(--m-ink) !important; }
.mag-num { font: 800 1.4rem var(--m-title); color: var(--m-accent); min-width: 2ch; }
.mag-track-head img { width: 3.6rem; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.mag-track-id strong { display: block; font: 700 1.05rem var(--font-ui, sans-serif); }
.mag-track-id span { color: var(--m-soft); font-size: .9rem; }
.mag-track p { margin: .6rem 0 0; line-height: 1.55; color: var(--m-ink); }
.mag-link { margin: .5rem 0 0 1.3rem; padding-left: .9rem; border-left: 2px dashed var(--m-accent2); color: var(--m-soft);
            font-style: italic; line-height: 1.5; }
.mag-link span { font-style: normal; color: var(--m-accent2); margin-right: .2rem; }

.mag-side { align-self: start; }
@media (min-width: 1000px) { .mag-side { position: sticky; top: calc(5rem + env(safe-area-inset-top)); } }
.mag-side h2 { font: 700 .78rem var(--font-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent); }
.mag-side ol { padding-left: 1.3rem; margin: .6rem 0 1rem; font-size: .92rem; line-height: 1.35; }
.mag-side li { margin-bottom: .45rem; }
.mag-side li a { color: var(--m-ink); text-decoration: none; font-weight: 600; }
.mag-side li span { display: block; color: var(--m-soft); font-size: .82rem; }
.mag-more a { color: var(--m-accent); }

/* ---------- index and home teaser ---------- */
.mag-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); margin: 1rem 0 2rem; }
.mag-teaser { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; border-radius: 14px; text-decoration: none;
              background-color: var(--m-bg); background-image: var(--m-backdrop); color: var(--m-ink); min-height: 14rem; border: 1px solid var(--m-line); }
.mag-teaser-title { font-family: var(--m-title); font-weight: 400; font-size: 1.9rem; line-height: 1.08; color: var(--m-ink); }
.theme-psyche .mag-teaser-title, .theme-y1973 .mag-teaser-title { color: var(--m-accent); }
.theme-canterbury .mag-teaser-title { font-style: italic; font-weight: 700; }
.mag-teaser-text { color: var(--m-soft); line-height: 1.45; font-family: var(--m-text); }
.mag-teaser .mag-meta { margin-top: auto; }
.mag-teaser:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }

/* Monoton's space is almost nil: "Du psychédélisme au space rock" read as one word */
.theme-psyche .mag-teaser-title, .theme-psyche .mag-hero h1, .theme-psyche h2 { word-spacing: .35em; }
/* Cormorant Garamond runs small and thin: a size and a weight up so the orchestra dossier reads on a phone */
.mag.theme-orchestra, .theme-orchestra .mag { font-size: 1.2em; font-weight: 500; }
.theme-orchestra .mag-teaser-text { font-size: 1.15em; font-weight: 500; }
.theme-orchestra .mag-standfirst { color: var(--m-ink); }


/* the playlist link (Spotify, a plain link: no embedded player) */
.mag-listen { margin: 1rem 0 0; }
.mag-listen small { display: block; margin-top: .35rem; color: var(--m-soft); font: 500 .78rem var(--font-ui); }
.mag-sources { margin-top: 2.5rem; font-size: .85rem; color: var(--m-soft); }
.mag-sources ul { padding-left: 1.1rem; }
.mag-sources a { color: var(--m-soft); word-break: break-word; }
/* the site's prose colours must follow the theme (light themes: Canterbury, covers) */
.mag .prose p, .mag .prose li, .mag .prose td, .mag .prose th { color: var(--m-ink); }
.mag .prose strong { color: var(--m-ink); }