/* ============================================================
   Groov-illa · deepcut-v5.css
   Basato su Longform_Template.html approvato.
   Font: Spectral (body) + IBM Plex Sans Condensed + IBM Plex Mono
   ============================================================ */

/* ── Token propri della rubrica Deep Cuts ─────────────────── */
.dc-page{
  --paper:       #efe5d1;
  --paper-tint:  #e6d9bd;
  --ink:         #1f1a14;
  --ink-soft:    #4a3d35;
  --ink-faint:   #6b5f55;
  --rule:        rgba(31,26,20,.16);
  --rule-strong: rgba(31,26,20,.32);
  --accent:      #c2531c;
  --accent-soft: #d9b378;
  --highlight:   #f7eccd;
  --dc-serif:    "Spectral","Iowan Old Style",Georgia,"Times New Roman",serif;
  --dc-sans:     "IBM Plex Sans Condensed","Helvetica Neue",Arial,sans-serif;
  --dc-mono:     "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --measure:     38em;
  --measure-wide:56em;
  background: var(--cream);
  overflow-x: hidden;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.dc-crumbs{
  max-width:1320px; margin:0 auto;
  padding:28px 40px 0;
  font-family:var(--dc-sans); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.dc-crumbs a{ color:var(--ink-faint); transition:color .2s; }
.dc-crumbs a:hover{ color:var(--accent); }
.dc-crumbs .sep{ opacity:.5; }

/* ── Title block ──────────────────────────────────────────── */
.dc-title-block{
  max-width:1100px; margin:0 auto;
  padding:48px 40px 56px;
}
.dc-eyebrow{
  font-family:var(--dc-sans); font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; gap:14px; align-items:center;
}
.dc-eyebrow::before{
  content:""; display:inline-block; width:24px; height:1px; background:var(--accent);
}
.dc-eyebrow .meta-tags{ color:var(--ink-soft); }
.dc-eyebrow .meta-tags::before{ content:"·"; margin:0 10px; color:var(--ink-faint); }

.dc-headline{
  font-family:var(--dc-serif); font-weight:500;
  font-size:clamp(48px,6.4vw,92px);
  line-height:.98; letter-spacing:-.022em;
  margin:22px 0 28px; color:var(--ink);
  max-width:14ch; text-wrap:balance;
}
.dc-headline em{ font-style:italic; font-weight:400; color:var(--accent); }

.dc-dek{
  font-family:var(--dc-serif); font-style:italic; font-weight:300;
  font-size:clamp(20px,2vw,26px); line-height:1.4;
  color:var(--ink-soft); max-width:32ch;
  text-wrap:pretty; margin:0 0 36px;
}

.dc-byline{
  display:flex; gap:28px; align-items:center; flex-wrap:wrap;
  font-family:var(--dc-sans); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.dc-byline .author{ color:var(--ink); }
.dc-byline .dot{
  width:3px; height:3px; border-radius:50%; background:var(--ink-faint);
}

/* ── Hero image ───────────────────────────────────────────── */
.dc-hero-wrap{
  max-width:1320px; margin:0 auto; padding:0 40px;
}
.dc-hero-frame{
  width:100%; aspect-ratio:21/9;
  overflow:hidden; position:relative;
}
@media(max-width:720px){ .dc-hero-frame{ aspect-ratio:16/9; } }
.dc-hero-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.dc-hero-cap{
  max-width:1320px; margin:14px auto 0; padding:0 40px;
  font-family:var(--dc-sans); font-size:12.5px; color:var(--ink-soft);
  letter-spacing:.01em; display:flex; justify-content:space-between; gap:24px;
}
.dc-hero-cap em{ font-style:italic; color:var(--ink); }
.dc-hero-cap .credit{
  font-family:var(--dc-sans); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}

/* ── Corpo articolo ───────────────────────────────────────── */
main.dc-article{ overflow: hidden;
  width: 100%;
  font-family:var(--dc-serif); font-size:19.5px; line-height:1.62;
  font-feature-settings:"liga","kern","onum";
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
}

/* Reading column — questo è il container che governa la larghezza */
.dc-reading-col{
  max-width: 680px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 96px clamp(24px, 5vw, 64px) 64px;
  box-sizing: border-box;
}

.dc-article p{ margin:0 0 1.2em; text-wrap:pretty; hyphens:auto; -webkit-hyphens:auto; }
.dc-article p + p{ text-indent:1.4em; }
.dc-article > p:first-of-type{ text-indent:0; }

/* Drop cap sul primo paragrafo (classe .lede) */
.dc-article .lede::first-letter{
  font-family:var(--dc-serif); font-weight:600;
  font-size:5.2em; line-height:.88;
  float:left; padding:.05em .12em 0 0;
  color:var(--ink); margin-bottom:-.08em;
}
.dc-article .lede{ font-size:1.05em; color:var(--ink); }

/* Section head: eyebrow + h2 + hairline */
.dc-article .section-head{ margin:64px 0 26px; padding-top:6px; }
/* Reset del flex layout di homepage-v5.css che allinea kicker e h2 sulla stessa riga */
.dc-article .section-head{ display:block; }
.dc-article .section-head .kicker{
  font-family:var(--dc-sans); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.dc-article .section-head .kicker::before{
  content:""; width:18px; height:1px; background:var(--accent);
}
.dc-article .section-head h2{
  font-family:var(--dc-serif); font-weight:500;
  font-size:clamp(28px,3.2vw,38px); line-height:1.1; letter-spacing:-.012em;
  margin:0 0 14px; color:var(--ink); text-wrap:balance;
  text-align:left;
}
.dc-article .section-head h2 em{ font-style:italic; color:var(--accent); font-weight:500; }
.dc-article .section-head .rule{ height:1px; background:var(--rule); margin-top:14px; }

/* h3 */
.dc-article h3{
  font-family:var(--dc-serif); font-weight:600; font-size:22px;
  line-height:1.25; color:var(--ink); margin:40px 0 12px; letter-spacing:-.005em;
}

/* Pull quote centrata */
.dc-article blockquote.pull{
  margin:56px 0; padding:0; border:0;
  font-family:var(--dc-serif); font-style:italic; font-weight:400;
  font-size:clamp(26px,3vw,34px); line-height:1.25; color:var(--ink);
  text-wrap:balance; position:relative; text-align:center;
}
.dc-article blockquote.pull::before{
  content:"\201C"; position:absolute; top:-.45em; left:50%;
  transform:translateX(-50%);
  font-family:var(--dc-serif); font-style:normal; font-weight:600;
  font-size:1.6em; color:var(--accent); line-height:1;
}
.dc-article blockquote.pull .attribution{
  display:block; margin-top:18px;
  font-family:var(--dc-sans); font-style:normal; font-size:11px;
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* Pull quote laterale */
.dc-article blockquote.aside{
  margin:28px 0;
  padding:14px 0 14px 18px; border-left:2px solid var(--accent);
  font-family:var(--dc-serif); font-style:italic; font-size:18px;
  line-height:1.35; color:var(--ink-soft); text-wrap:pretty;
}

/* Influenze */
.dc-article .influences{ margin:32px 0 40px; border-top:1px solid var(--rule); }
.dc-article .influences .row{
  display:grid; grid-template-columns:10ch 1fr; gap:24px;
  padding:18px 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
.dc-article .influences .who{
  font-family:var(--dc-serif); font-weight:600; font-size:20px;
  color:var(--ink); letter-spacing:-.005em;
}
.dc-article .influences .what{
  font-family:var(--dc-serif); font-style:italic; font-weight:400;
  color:var(--ink-soft); line-height:1.4; font-size:17px;
}

/* Mark / inline links */
.dc-article mark{
  background:linear-gradient(transparent 62%,var(--highlight) 62%);
  color:inherit; padding:0 .05em;
}
.dc-article a.inline{
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:100% 1px; background-repeat:no-repeat;
  background-position:0 92%; transition:background-size .25s ease,color .25s ease;
}
.dc-article a.inline:hover{ color:var(--accent); background-size:100% 2px; }
.dc-article em{ color:var(--ink); }
.dc-article strong{ font-weight:600; }

/* ── Buy section ──────────────────────────────────────────── */
.dc-buy{
  max-width:var(--measure-wide); margin:80px auto 0;
  padding:56px 40px 80px; border-top:1px solid var(--rule);
}
.dc-buy .label{
  font-family:var(--dc-sans); font-size:11px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent);
  margin-bottom:18px;
}
.dc-buy h2{
  font-family:var(--dc-serif); font-weight:500;
  font-size:clamp(30px,3.4vw,42px); line-height:1.05; letter-spacing:-.015em;
  margin:0 0 36px; max-width:18ch; color:var(--ink);
}
.dc-buy-card{
  display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start;
}
.dc-buy-cover{
  width:100%; aspect-ratio:1/1; overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.15),0 18px 36px -16px rgba(31,26,20,.25);
}
.dc-buy-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.dc-buy-album-title{
  font-family:var(--dc-serif); font-weight:600; font-size:24px;
  line-height:1.15; margin:0 0 4px; letter-spacing:-.005em; color:var(--ink);
}
.dc-buy-album-artist{
  font-family:var(--dc-serif); font-style:italic; font-weight:400;
  font-size:18px; color:var(--ink-soft); margin:0 0 22px;
}
.dc-buy-pressing{
  margin:0 0 28px; padding:18px 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.dc-buy-pressing dt{
  font-family:var(--dc-sans); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:6px;
}
.dc-buy-pressing dd{
  margin:0; font-family:var(--dc-serif); font-weight:500;
  font-size:16px; color:var(--ink); line-height:1.3;
}
.dc-buy-pressing dd em{
  font-style:italic; color:var(--ink-soft); font-weight:400;
  display:block; font-size:13px; margin-top:2px;
}
.dc-buy-links{ display:flex; flex-direction:column; gap:0; margin:0; }
.dc-buy-link{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--rule);
  font-family:var(--dc-sans); font-size:13px; letter-spacing:.04em;
  color:var(--ink); transition:color .2s ease; text-decoration:none;
}
.dc-buy-link:hover{ color:var(--accent); }
.dc-buy-link .name{ font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:11.5px; }
.dc-buy-link .where{ color:var(--ink-soft); font-style:italic; font-size:13px; }
.dc-buy-link .arrow{ font-family:var(--dc-serif); font-size:18px; color:var(--ink-faint); transition:transform .25s ease,color .2s ease; }
.dc-buy-link:hover .arrow{ transform:translateX(4px); color:var(--accent); }

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:980px){
  .dc-article blockquote.aside{ float:none; width:auto; margin:28px 0; }
  .dc-article blockquote.pull{ margin-left:0; margin-right:0; }
}
@media(max-width:720px){
  .dc-crumbs,.dc-title-block,.dc-hero-wrap,.dc-hero-cap{ padding-left:20px; padding-right:20px; }
  .dc-title-block{ padding-top:32px; padding-bottom:36px; }
  .dc-reading-col{ padding-top:56px; padding-bottom:40px; }
  .dc-article blockquote.pull{ margin:40px 0; }
  .dc-article .lede::first-letter{ font-size:4.5em; }
  .dc-buy{ padding:40px 20px 56px; }
  .dc-buy-card{ grid-template-columns:1fr; gap:24px; }
  .dc-buy-cover{ max-width:280px; }
  .dc-buy-pressing{ grid-template-columns:1fr 1fr; gap:18px; }
}