/* ============================================================
   Groov-illa · Homepage v5 CSS
   Source: approved Groov-illa_Homepage-5.html
   Scope: homepage only (loaded via _layouts/homepage.njk)
   Changes from approved reference:
     - .wordmark → Boldonse font, normal style, brand spans
     - .wordmark .amp removed (replaced by .brand-hyphen)
     - --olive token added to :root for "illa" brand colour
   All other rules: verbatim from approved file
   ============================================================ */

:root{
  --cream: #FFFFFF;
  --cream-2: #F7F7F7;
  --cream-3: #F0F0F0;
  --ink: #000000;
  --ink-2: #000000;
  --ink-3: #000000;
  --rust: oklch(0.56 0.165 42);
  --rust-deep: oklch(0.45 0.155 38);
  --hair: oklch(0.84 0.014 70);
  --hair-strong: oklch(0.74 0.018 65);
  /* ── NEW: wordmark "illa" brand colour ── */
  --olive: oklch(0.46 0.09 130);

  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --serif-display: "Instrument Serif", "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--cream); color:var(--ink); font-family:var(--sans); font-weight:500; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
body{ font-size:18px; line-height:1.6; font-weight:500; }
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}

.wrap{ max-width:1320px; margin:0 auto; padding:0 40px;}
@media (max-width: 720px){ .wrap{ padding:0 20px;} }

.mono{ font-family: var(--mono); font-weight:500; letter-spacing:.04em; text-transform:uppercase; font-size:11px;}
.rubric{ font-family: var(--mono); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:11px; color:var(--rust); }
.meta{ font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--ink-3); text-transform:uppercase; font-weight:500; }
.serif{ font-family:var(--serif); }
.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--rust); font-weight:600;}
.byline{ font-family:var(--sans); font-style:italic; font-size:13px; color:var(--ink-2);}
.hair{ border:0; border-top:1px solid var(--hair); }

/* =================== TOP BAR =================== */
.topbar{
  border-bottom:1px solid var(--hair);
  font-family:var(--sans);
  background:var(--cream);
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(6px);
}
.topbar .util{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--hair);
}
.topbar .util .date{ font-family:var(--mono); white-space:nowrap;}
.topbar .util .links{ display:flex; gap:22px;}
.topbar .util .links a:hover{ color:var(--rust); }

.masthead{
  display:flex; align-items:center;
  padding-top:20px; padding-bottom:18px;
  gap:0;
}
.masthead-right{
  margin-left:auto;
  display:flex; align-items:center; gap:44px;
  flex-shrink:0;
}
.masthead-nav{ display:flex; align-items:center; gap:28px;}
.masthead-nav a{
  font-size:13px; font-weight:500; letter-spacing:.02em;
  color:var(--ink); position:relative;
}
.masthead-nav a:hover{ color:var(--rust);}
.masthead-util{
  display:flex; align-items:center; gap:22px;
  flex-shrink:0;
}
.masthead-util a{
  font-size:13px; font-weight:500; letter-spacing:.02em;
  color:var(--ink);
}
.masthead-util a:hover{ color:var(--rust);}

/* ── WORDMARK — Boldonse, brand-span treatment ──────────────
   ONLY change from approved design (per client brief).
   .brand-groov = ink  |  .brand-hyphen = rust  |  .brand-illa = olive
   .wordmark .amp rule removed; no other header/footer layout changed.
   ─────────────────────────────────────────────────────────── */
.wordmark{
  font-family:'Boldonse', var(--serif-display);
  font-weight:400;
  font-size:46px;
  line-height:1;
  letter-spacing:.02em;
  font-style:normal;
  color:var(--ink);
  display:inline-block;
  text-decoration:none;
}
.brand-groov{ color:var(--ink); }
.brand-hyphen{ color:var(--rust); }
.brand-illa{ color:var(--olive); }
/* ─────────────────────────────────────────────────────────── */

.search{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--hair-strong); padding:7px 12px; border-radius:999px; font-size:12px; color:var(--ink-3);}
.search svg{ width:13px; height:13px; stroke:var(--ink-3);}

.nav-secondary{
  border-top:1px solid var(--hair);
  display:flex; justify-content:flex-start; gap:34px;
  padding-top:11px; padding-bottom:11px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
}
.nav-secondary a{ color:var(--ink-2); position:relative;}
.nav-secondary a:hover{ color:var(--rust);}
.nav-secondary a.active{ color:var(--ink);}
.nav-secondary a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-12px; height:2px; background:var(--rust);
}

.mobile-toggle{ display:none; }
/* mobile-search removed from header — search moves to drawer on mobile */
.mobile-search{ display:none; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE HEADER — three tiers
   Priority at every width: 1.Logo  2.Hamburger  3.IT/EN  4.Search
   ══════════════════════════════════════════════════════════════════════

   Tier 1  >1280px   Full desktop   logo 46px · full nav · util right
   Tier 2  1025–1280 Compact        logo 38px · main nav · search only
   Tier 3  ≤1024px   Mobile         logo 30px · hamburger · drawer
   ══════════════════════════════════════════════════════════════════════ */

/* ── TIER 2: COMPACT DESKTOP (1025px – 1280px) ──────────────────────────
   Main nav stays visible. Reference + Newsletter collapse to drawer.
   Search pill remains (it is a <span>, not an <a>, so survives the rule).
   IT/EN stays in topbar; Abbonati + Chi siamo hidden to save space.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1280px){
  /* Topbar: keep IT/EN, drop secondary utility links */
  .topbar .util .links a:not(#hp-lang-toggle){ display:none;}

  /* Wordmark slightly smaller */
  .wordmark{ font-size:40px;}

  /* Tighter internal gaps in right group at compact widths */
  .masthead-right{ gap:28px;}
  .masthead-nav{ gap:20px;}

  /* Util: hide text links (Reference, Newsletter) — search <span> survives */
  .masthead-util a{ display:none;}
}

/* ── TIER 3: MOBILE / TABLET (≤1024px) ──────────────────────────────────
   Nav and util collapse entirely. Priority controls only.
   Logo order:1 left · Hamburger order:2 right.
   IT/EN stays in topbar. Search moves to drawer.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px){
  /* Topbar: keep IT/EN only */
  .topbar .util .links a:not(#hp-lang-toggle){ display:none;}

  /* Masthead */
  .masthead{ padding-top:12px; padding-bottom:12px;}
  .masthead-right{ display:none;}

  /* Logo — left anchor */
  .wordmark{ font-size:30px; order:1; flex-shrink:0; margin-left:0;}

  /* Hamburger — right, pushed by auto margin */
  .mobile-toggle{
    order:2; margin-left:auto;
    display:inline-flex; flex-direction:column; gap:5px;
    padding:8px 0 8px 12px; flex-shrink:0;
  }
  .mobile-toggle span{ width:22px; height:1.5px; background:var(--ink); display:block;}

  /* Nav-secondary: horizontal scroll on mobile */
  .nav-secondary{
    overflow-x:auto; justify-content:flex-start; gap:24px; padding-top:10px; padding-bottom:10px;
    scrollbar-width:none; white-space:nowrap;
  }
  .nav-secondary::-webkit-scrollbar{ display:none;}
}

/* =================== HERO COVER =================== */
.cover{
  padding:44px 0 56px;
  border-bottom:1px solid var(--hair);
}
.cover .issue-line{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:36px; gap:16px;
  padding-top:18px;
  border-top:2px solid var(--ink);
  position:relative;
}
.cover .issue-line::before{
  content:'Groov-illa · Rivista';
  position:absolute; top:-9px; left:0;
  background:var(--cream); padding:0 14px 0 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-2); font-weight:600;
}
.cover .issue-line .l{ display:flex; gap:18px; align-items:baseline; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);}
.cover .issue-line .l .vol{ color:var(--rust);}
.cover .issue-line .r{ font-family:var(--serif); font-style:italic; color:var(--ink-2); font-size:15px;}

.cover-grid{
  display:grid; grid-template-columns: 1.15fr 1fr; gap:64px;
  align-items:end;
}
@media (max-width: 920px){
  .cover-grid{ grid-template-columns: 1fr; gap:32px; align-items:start;}
  .cover{ padding:28px 0 40px;}
}

.cover-text .kicker{ margin-bottom:22px; display:inline-block;}
.cover-text h1{
  font-family:var(--serif-display); font-weight:400;
  font-size: clamp(44px, 7.4vw, 110px);
  line-height: 0.96; letter-spacing:-0.012em;
  margin-bottom:28px; color:var(--ink);
  text-wrap: balance;
}
.cover-text h1 em{ font-style:italic; color:var(--rust-deep); font-weight:400;}
.cover-text .deck{
  font-family:var(--serif); font-size: clamp(16px, 1.45vw, 21px);
  line-height:1.55; color:var(--ink-2); max-width:52ch;
  margin-bottom:32px;
}
.cover-text .byline-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--sans); font-size:13px;
}
.cover-text .byline-row .author{ color:var(--ink); font-weight:600;}
.cover-text .byline-row .sep{ color:var(--hair-strong);}
.cover-text .byline-row .read{ color:var(--ink-3);}
.cover-text .cta-line{
  margin-top:38px; padding-top:24px; border-top:1px solid var(--hair);
  display:flex; gap:32px; flex-wrap:wrap;
}
.cover-text .cta-line a{
  font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  border-bottom:1px solid var(--ink); padding-bottom:3px;
}
.cover-text .cta-line a.rust{ color:var(--rust); border-color:var(--rust);}

.cover-image{
  position:relative;
}
.cover-image .img{
  aspect-ratio: 3/4;
  background: var(--ink);
  position:relative; overflow:hidden;
}
.cover-image .img img{ width:100%; height:100%; object-fit:cover; display:block;}
.cover-image .folio{
  position:absolute; left:0; top:0; right:0;
  padding:14px 16px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:oklch(0.92 0.015 80);
  display:flex; justify-content:space-between; gap:8px;
  background: linear-gradient(180deg, oklch(0.18 0.025 50 / .65), oklch(0.18 0.025 50 / 0));
  pointer-events:none; z-index:3;
}
/* Archive plate number — sits in the corner like a museum tag */
.cover-image .plate-no{
  position:absolute; bottom:14px; left:16px; z-index:3;
  font-family:var(--mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:oklch(0.78 0.02 70);
  padding:5px 9px; border:1px solid oklch(0.78 0.02 70 / .35);
  background:oklch(0.18 0.025 50 / .35);
}
.cover-image .pullquote{
  position:absolute; left:0; right:0; bottom:0;
  padding:44px 24px 22px;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size: clamp(16px, 1.25vw, 19px); line-height:1.4;
  color: oklch(0.94 0.015 80);
  background: linear-gradient(180deg, oklch(0.18 0.025 50 / 0) 0%, oklch(0.12 0.02 50 / .88) 70%);
  pointer-events:none;
  text-wrap: balance; z-index:3;
}
.cover-image .pullquote span{ display:block; font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:oklch(0.78 0.02 70); margin-top:8px;}
.cover-image .caption{
  font-family:var(--sans); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin-top:16px;
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
}
.cover-image .caption .credit{ font-style:italic; text-transform:none; letter-spacing:0; font-family:var(--serif); font-size:13px; color:var(--ink-2); max-width:60%; text-align:right;}

/* =================== EDITORIAL PLACEHOLDER =================== */
/* Keep .ph classes as fallback until real images are added */
.ph{
  width:100%; height:100%;
  background:
    repeating-linear-gradient(135deg,
      oklch(0.36 0.04 50) 0 2px,
      oklch(0.32 0.04 50) 2px 14px),
    oklch(0.34 0.04 50);
  display:flex; align-items:flex-end; padding:18px;
  position:relative; color:oklch(0.92 0.015 80);
  isolation:isolate;
}
/* Archival grain overlay — fine noise via SVG, gives plates a printed feel */
.ph::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0 0.05 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
  mix-blend-mode:overlay; opacity:.55; z-index:0;
}
.ph > *{ position:relative; z-index:1;}
.ph::after{
  content: attr(data-label);
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  background:oklch(0.22 0.025 50 / .65); padding:6px 9px;
  position:relative; z-index:2;
}
.ph.warm{ background:
  repeating-linear-gradient(135deg, oklch(0.55 0.13 45) 0 2px, oklch(0.48 0.13 42) 2px 14px),
  oklch(0.50 0.13 45);
}
.ph.dark{ background:
  repeating-linear-gradient(135deg, oklch(0.20 0.025 50) 0 2px, oklch(0.17 0.025 50) 2px 14px),
  oklch(0.19 0.025 50);
}
.ph.olive-ph{ background:
  repeating-linear-gradient(135deg, oklch(0.42 0.05 110) 0 2px, oklch(0.36 0.05 110) 2px 14px),
  oklch(0.40 0.05 110);
}
.ph.indigo{ background:
  repeating-linear-gradient(135deg, oklch(0.32 0.06 260) 0 2px, oklch(0.27 0.06 260) 2px 14px),
  oklch(0.30 0.06 260);
}
.ph.sand{ background:
  repeating-linear-gradient(135deg, oklch(0.74 0.05 70) 0 2px, oklch(0.68 0.05 70) 2px 14px),
  oklch(0.71 0.05 70); color:var(--ink);}
.ph.sand::after{ background:oklch(0.96 0.015 80 / .75); color:var(--ink);}
.ph.plum{ background:
  repeating-linear-gradient(135deg, oklch(0.32 0.07 350) 0 2px, oklch(0.27 0.07 350) 2px 14px),
  oklch(0.30 0.07 350);}
.ph.forest{ background:
  repeating-linear-gradient(135deg, oklch(0.36 0.05 160) 0 2px, oklch(0.31 0.05 160) 2px 14px),
  oklch(0.34 0.05 160);}
.ph.reportage{
  background:
    radial-gradient(120% 85% at 50% 30%, oklch(0.60 0.13 45 / .35) 0%, oklch(0.30 0.10 42 / .8) 70%, oklch(0.22 0.07 40 / .95) 100%),
    repeating-linear-gradient(90deg, oklch(0.46 0.12 42) 0 1px, oklch(0.42 0.12 42) 1px 7px),
    oklch(0.42 0.12 42);
  color: oklch(0.96 0.015 80);
}
.ph.reportage::after{ display:none; }
.ph.archive{
  background:
    radial-gradient(110% 80% at 50% 25%, oklch(0.48 0.04 70 / .35) 0%, oklch(0.26 0.03 60 / .85) 75%, oklch(0.18 0.025 55 / .96) 100%),
    repeating-linear-gradient(90deg, oklch(0.36 0.03 70) 0 1px, oklch(0.32 0.03 70) 1px 7px),
    oklch(0.34 0.03 70);
  color: oklch(0.96 0.015 80);
}
.ph.archive::after{ display:none; }
/* Album placeholders — concentric vinyl-groove hint for tactile feel */
.rec-lead .album .ph,
.rev-card .album .ph{
  background-image:
    radial-gradient(circle at 50% 50%,
      transparent 0 30%,
      oklch(0 0 0 / .06) 30.5% 31.5%,
      transparent 31.5% 36%,
      oklch(0 0 0 / .05) 36.5% 37.2%,
      transparent 37.2% 43%,
      oklch(0 0 0 / .04) 43.5% 44%,
      transparent 44% 100%),
    repeating-linear-gradient(135deg,
      oklch(0.20 0.025 50) 0 2px,
      oklch(0.17 0.025 50) 2px 14px),
    oklch(0.19 0.025 50);
}
.rec-lead .album .ph::after,
.rev-card .album .ph::after{ display:none; }
/* Sleeve-spine vertical hint on the left edge of album placeholders */
.rec-lead .album .ph::before,
.rev-card .album .ph::before{
  background-image:
    linear-gradient(90deg,
      oklch(0 0 0 / .14) 0,
      oklch(0 0 0 / 0) 4%,
      oklch(0 0 0 / 0) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0 0.05 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:auto, 220px 220px;
}

/* secondary cover side stories */
.cover-side{
  margin-top:40px;
  display:grid; grid-template-columns: repeat(2, 1fr); gap:32px;
  padding-top:32px; border-top:1px solid var(--hair);
  position:relative;
}
.cover-side::before{
  content:'§ Anche in copertina';
  position:absolute; top:-8px; left:0;
  background:var(--cream); padding:0 14px 0 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-2); font-weight:600;
}
body.en .cover-side::before{ content:'§ Also on the cover'; }
.cover-side .item .kicker{ margin-bottom:8px;}
.cover-side .item h3{
  font-family:var(--serif); font-weight:500; font-size:24px; line-height:1.15; letter-spacing:-.01em;
  margin-bottom:6px;
}
.cover-side .item p{ font-size:15px; color:var(--ink-3); line-height:1.5; font-family:"Source Serif 4",Georgia,serif; font-style:italic;}
@media (max-width: 600px){
  .cover-side{ grid-template-columns: 1fr; gap:0;}
  .cover-side .item{ padding:22px 0; border-top:1px solid var(--hair);}
  .cover-side .item:first-child{ padding-top:0; border-top:0;}
  .cover-side .item h3{ font-size:25px;}
}

/* =================== SECTION HEADER =================== */
.section{ padding:72px 0; border-bottom:1px solid var(--hair);}
@media (max-width:720px){ .section{ padding:44px 0;} }

.section-head{
  display:flex; align-items:end; justify-content:space-between; gap:24px;
  margin-bottom:40px;
  border-bottom:1px solid var(--ink); padding-bottom:14px;
}
.section-head .l{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;}
.section-head .num{ font-family:var(--serif-display); font-style:normal; font-weight:400; font-size:clamp(72px,9vw,120px); line-height:.88; letter-spacing:-.04em; color:var(--ink); white-space:nowrap; font-weight:700;}
.section-head h2{
  font-family:var(--serif-display); font-style:italic; font-weight:400;
  font-size:clamp(32px,4vw,64px); line-height:1; letter-spacing:-.008em;
  color:var(--rust); font-weight:700; font-family:var(--serif); margin-top:6px; padding-right:.18em;
}
.section-head .l .sub{ font-family:var(--serif); font-style:italic; color:var(--ink-3); font-size:18px; margin-top:4px;}
.section-head .all{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink); white-space:nowrap;}
.section-head .all:hover{ color:var(--rust);}
@media (max-width:600px){
  .section-head{ flex-wrap:wrap;}
  .section-head .all{ width:100%; padding-top:8px; border-top:1px solid var(--hair);}
}

/* =================== IN EVIDENZA =================== */
.in-evidenza-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:48px;
}
@media (max-width: 920px){ .in-evidenza-grid{ grid-template-columns: 1fr; gap:40px;} }

.ie-main{ position:relative;}
.ie-main .img{ aspect-ratio: 16/10; margin-bottom:24px; position:relative;}
.ie-main .img img{ width:100%; height:100%; object-fit:cover; display:block;}
/* "Lead story" marker — small print-magazine annotation */
.ie-main .lead-mark{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rust); font-weight:600;
}
.ie-main .lead-mark::before{
  content:''; width:28px; height:1px; background:var(--rust);
}
.ie-main .kicker{ margin-bottom:12px;}
.ie-main h3{
  font-family:var(--serif-display); font-weight:400; font-size: clamp(32px,3.6vw,50px);
  line-height:1.02; letter-spacing:-.008em; margin-bottom:16px; text-wrap:balance;
}
.ie-main h3 em{ font-style:italic;}
.ie-main .deck{ font-family:var(--serif); font-size:18px; line-height:1.55; color:var(--ink-2); max-width:58ch; margin-bottom:16px;}
.ie-main .meta-row{ display:flex; gap:12px; color:var(--ink-3);}

.ie-side{
  display:flex; flex-direction:column;
  padding-top:6px;
}
.ie-side::before{
  content:'Anche in questo numero'; display:block;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600;
  padding-bottom:18px; border-bottom:1px solid var(--ink);
  margin-bottom:6px;
}
body.en .ie-side::before{ content:'Also in this issue'; }
.ie-item{
  display:grid; grid-template-columns: 88px 1fr; gap:18px;
  padding:22px 0; border-bottom:1px solid var(--hair);
  align-items:start;
}
.ie-item:last-child{ border-bottom:0;}
.ie-item .img{ aspect-ratio: 1/1; }
.ie-item .img img{ width:100%; height:100%; object-fit:cover; display:block;}
.ie-item .kicker{ font-size:10px; letter-spacing:.18em; margin-bottom:8px; color:var(--ink-3);}
.ie-item h4{ font-family:var(--serif); font-weight:500; font-size:18px; line-height:1.22; letter-spacing:-.005em; margin-bottom:8px;}
.ie-item .meta-row{ font-family:var(--sans); font-size:11px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase;}
.ie-item:hover h4{ color:var(--rust);}
@media (max-width: 460px){
  .ie-item{ grid-template-columns: 76px 1fr; gap:14px; padding:18px 0;}
  .ie-item h4{ font-size:17px;}
}
.ie-main .meta-row{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;}

/* =================== RECENSIONI =================== */
.rec{ }

/* Featured album spotlight — vertical, constrained, object-first */
.rec-lead{
  display:block;
  max-width: 580px;
  margin: 8px auto 80px;
  padding: 40px 0 52px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--hair);
  position:relative;
  text-align: left;
}
/* Cover-stamp marker on the top border */
.rec-lead::before{
  content:'Recensione di copertina';
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--cream); padding:0 18px;
  font-family:var(--mono); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--rust); font-weight:600;
  white-space:nowrap;
}
body.en .rec-lead::before{ content:'Cover review'; }
.rec-lead .spotlight-rubric{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin-bottom: 36px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--rust); font-weight:600;
}
.rec-lead .spotlight-rubric .right{ color: var(--ink-3); letter-spacing: .2em; font-weight:500;}
.rec-lead .album{
  width: 84%;
  max-width: 480px;
  margin: 0 auto 44px;
  aspect-ratio: 1/1;
  position:relative;
  box-shadow:
    0 40px 70px -28px oklch(0.22 0.025 50 / .55),
    0 18px 32px -18px oklch(0.22 0.025 50 / .35),
    0 2px 0 oklch(0.22 0.025 50 / .18),
    inset 0 0 0 1px oklch(0 0 0 / .12);
}
/* Tiny format badge on the album corner — like a 180g LP sticker */
.rec-lead .album .format-tag{
  position:absolute; top:14px; right:14px; z-index:5;
  font-family:var(--mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cream);
  background:var(--rust); padding:5px 9px 4px;
  font-weight:600;
}
.rec-lead .album img{ width:100%; height:100%; object-fit:cover; display:block;}
.rec-lead .album .vinyl{
  position:absolute; right:-8%; top:7%; height:86%; aspect-ratio:1; z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      oklch(0.30 0.02 50) 0 14%,
      oklch(0.14 0.015 50) 14.5% 15.5%,
      oklch(0.20 0.015 50) 15.5% 100%);
  box-shadow: 0 16px 30px -16px oklch(0.10 0.02 50 / .55);
}
.rec-lead .copy{
  max-width: 520px;
  margin: 0 auto;
}
.rec-lead .artist{
  font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--ink-2); margin-bottom:10px;
}
.rec-lead h3{
  font-family:var(--serif-display); font-style:italic; font-weight:400;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.02; letter-spacing:-.006em;
  margin-bottom: 22px;
  text-wrap: balance;
}
.rec-lead .score-row{
  display:flex; align-items:baseline; gap:14px; margin-bottom:24px;
  padding: 16px 0 18px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--hair);
}
.score{
  font-family:var(--serif); font-weight:500; font-size:38px; line-height:1; color:var(--ink);
  letter-spacing:-.02em;
}
.score-row .out{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase;}
.rec-lead .bonm{
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--rust); background: transparent; border: 1px solid var(--rust);
  padding: 4px 7px 3px;
  margin-left:auto;
  align-self:center;
}
.rec-lead .deck{
  font-family:var(--serif); font-size:18px; line-height:1.55; color:var(--ink-2);
  margin-bottom:22px;
}
.rec-lead .credits{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:14px 28px;
  font-size:13px; color:var(--ink); font-family:var(--serif);
  padding-top: 20px; border-top: 1px solid var(--hair);
}
.rec-lead .credits div{ display:flex; flex-direction:column; gap:4px;}
.rec-lead .credits b{
  color:var(--ink-3); font-weight:600;
  font-family:var(--mono); font-size:9px;
  letter-spacing:.22em; text-transform:uppercase;
  padding-bottom:1px;
}

@media (max-width: 600px){
  .rec-lead{ max-width: 100%; margin: 4px 0 48px; padding: 22px 0 36px;}
  .rec-lead .album{ width: 88%; }
  .rec-lead h3{ font-size: clamp(28px, 8vw, 36px);}
  .rec-lead .credits{ grid-template-columns: 1fr 1fr; gap: 10px 20px;}
}

.rec-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:44px 32px;
}
@media (max-width: 1000px){ .rec-grid{ grid-template-columns: repeat(2, 1fr); gap:44px 28px;} }
@media (max-width: 520px){ .rec-grid{ grid-template-columns: repeat(2, 1fr); gap:36px 18px;} }

.rev-card{ display:flex; flex-direction:column; }
.rev-card .album{
  aspect-ratio:1/1; margin-bottom:18px; position:relative;
  box-shadow: 0 18px 36px -22px oklch(0.22 0.025 50 / .45), 0 1px 0 oklch(0.22 0.025 50 / .12);
}
.rev-card .album img{ width:100%; height:100%; object-fit:cover; display:block;}
.rev-card .album .vinyl{
  position:absolute; right:-4%; top:7%; height:86%; aspect-ratio:1; z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      oklch(0.30 0.02 50) 0 14%,
      oklch(0.14 0.015 50) 14.5% 15.5%,
      oklch(0.20 0.015 50) 15.5% 100%);
  box-shadow: 0 10px 24px -14px oklch(0.10 0.02 50 / .6);
}
.rev-card .rev-meta{
  display:flex; align-items:baseline; gap:10px;
  padding:12px 0 10px;
  border-top:1px solid var(--ink);
  margin-bottom:6px;
}
.rev-card .rev-score{
  font-family:var(--serif); font-weight:500; font-size:30px; line-height:1;
  color:var(--ink); letter-spacing:-.02em;
}
.rev-card .rev-out{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);}
.rev-card .rev-bonm{
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--rust); border:1px solid var(--rust); padding:3px 6px 2px;
  margin-left:auto; align-self:center;
}
.rev-card .artist{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); font-weight:600; margin-bottom:6px;}
.rev-card .title{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:24px; line-height:1.12; letter-spacing:-.005em; margin-bottom:10px;}
.rev-card .desc{ font-size:15px; line-height:1.55; color:var(--ink-2); margin-bottom:14px; font-family:"Source Serif 4",Georgia,serif; font-style:italic;}
.rev-card .row{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between; gap:8px; margin-top:auto;}
.rev-card:hover .title{ color:var(--rust);}
.rev-card:hover .album{ box-shadow: 0 22px 44px -22px oklch(0.22 0.025 50 / .55), 0 1px 0 oklch(0.22 0.025 50 / .12);}

/* Mobile: first review card spans full row to preserve editorial hierarchy */
@media (max-width: 520px){
  .rev-card:first-child{ grid-column: 1 / -1; padding-bottom: 28px; border-bottom: 1px solid var(--hair); margin-bottom: 8px;}
  .rev-card:first-child .album{ max-width: 62%; }
  .rev-card:first-child .rev-score{ font-size:38px;}
  .rev-card:first-child .title{ font-size:28px;}
  .rev-card:first-child .desc{ font-size:17px;}
}

/* =================== LUOGHI DEL VINILE =================== */
.luoghi{
  background: var(--cream-2);
}
.luoghi-grid{
  display:grid; grid-template-columns: 1fr 1.3fr; gap:64px; align-items:start;
}
@media (max-width: 920px){ .luoghi-grid{ grid-template-columns:1fr; gap:32px;} .luoghi-feature .img{ aspect-ratio: 16/9;} }

.luoghi-feature{ position:relative;}
.luoghi-feature .img{ aspect-ratio: 4/3;}
.luoghi-feature .img img{ width:100%; height:100%; object-fit:cover; display:block;}
.luoghi-feature .badge{
  position:absolute; left:-12px; bottom:36px;
  background:var(--cream); border:1px solid var(--ink);
  padding:18px 22px 16px; max-width:300px;
}
/* Compass-style location marker */
.luoghi-feature .badge::before{
  content:'⊕'; display:inline-block;
  font-family:var(--mono); font-size:13px; color:var(--rust);
  margin-right:8px; vertical-align:baseline;
}
.luoghi-feature .badge .rubric{ margin-bottom:10px;}
.luoghi-feature .badge h3{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:28px; line-height:1.05; margin-bottom:8px;}
.luoghi-feature .badge .where{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase;}

.luoghi-list{ }
.luoghi-list .lead{
  font-family:var(--serif); font-size:19px; line-height:1.6; color:var(--ink-2);
  padding:18px 0 32px; margin-bottom:32px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--hair);
  max-width:55ch; position:relative;
}
/* Field-report tag */
.luoghi-list .lead::before{
  content:'Field notes';
  position:absolute; top:-9px; left:0;
  background:var(--cream-2); padding:0 12px 0 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rust); font-weight:600;
}
body.en .luoghi-list .lead::before{ content:'Field notes'; }
.luoghi-list .lead em{ font-style:italic;}
.luoghi-list .stops{ display:flex; flex-direction:column;}
.stop{
  display:grid; grid-template-columns: 36px 1fr auto; gap:20px;
  padding:24px 0; border-top:1px solid var(--hair); align-items:baseline;
  transition:padding .2s;
}
.stop:last-child{ border-bottom:1px solid var(--hair);}
.stop .n{ font-family:var(--mono); font-size:12px; color:var(--rust); letter-spacing:.1em;}
.stop .name{ font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:-.005em; line-height:1.2;}
.stop .name .city{ font-family:var(--sans); font-style:normal; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); display:block; margin-top:6px; font-weight:600;}
.stop .desc{ grid-column:2; font-family:var(--serif); font-size:15px; color:var(--ink-2); line-height:1.45; padding-top:8px; max-width:48ch;}
.stop .arrow{ font-family:var(--serif); font-size:24px; color:var(--ink-3);}
.stop:hover .name{ color:var(--rust);}
.stop:hover .arrow{ color:var(--rust); transform:translateX(4px); transition:.2s;}

/* =================== DEEP CUTS =================== */
.deep-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:64px;}
@media (max-width: 1000px){ .deep-grid{ grid-template-columns: 1fr 1fr; gap:44px;} }
@media (max-width: 640px){ .deep-grid{ grid-template-columns: 1fr; gap:40px;} }

.deep-lead{ position:relative;}
.deep-lead .img{ aspect-ratio: 4/3; margin-bottom:28px;}
.deep-lead .img img{ width:100%; height:100%; object-fit:cover; display:block;}
.deep-lead .kicker{ margin-bottom:16px;}
.deep-lead h3{
  font-family:var(--serif-display); font-weight:400; font-style:italic;
  font-size:clamp(26px,2.6vw,36px);
  line-height:1.08; letter-spacing:-.008em; margin-bottom:16px;
}
.deep-lead h3 em{ font-style:italic; color:var(--rust-deep);}
.deep-lead .deck{
  font-family:var(--serif); font-size:18px; color:var(--ink-2); line-height:1.65;
  max-width:44ch; margin-bottom:20px; font-style:italic;
}
.deep-lead .meta-row{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
  padding-top:16px; border-top:1px solid var(--hair);
  display:flex; gap:12px; flex-wrap:wrap;
}
.deep-lead .meta-row span:first-child{ color:var(--ink); font-weight:600;}
.deep-lead:hover h3{ color:var(--rust);}

.deep-col{ display:flex; flex-direction:column; gap:0; }
.deep-item{ padding:24px 0; border-top:1px solid var(--hair);}
.deep-item:first-child{ border-top:0; padding-top:0;}
.deep-item .kicker{ margin-bottom:10px;}
.deep-item h4{
  font-family:var(--serif-display); font-weight:400; font-style:italic;
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.15; letter-spacing:-.005em; margin-bottom:10px;
}
.deep-item h4 em{ font-style:italic; color:var(--rust-deep);}
.deep-item .meta-row{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); display:flex; gap:10px;
}
.deep-item .meta-row span:first-child{ color:var(--ink); font-weight:600;}
.deep-item .meta-row .dot{ color:var(--hair-strong);}
.deep-item:hover h4{ color:var(--rust);}

/* =================== REFERENCE / GUIDE =================== */
.guide-wrap{ background: var(--cream-2);}
.guide-intro{
  display:grid; grid-template-columns: 1fr 1.4fr; gap:48px;
  margin-bottom:48px; padding-bottom:36px;
  border-bottom:1px solid var(--ink);
  align-items:end;
  position:relative;
}
/* "Indice" stamp on the guide section — reference framing */
.guide-intro::before{
  content:'§ Indice delle guide';
  position:absolute; top:-22px; left:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rust); font-weight:600;
}
body.en .guide-intro::before{ content:'§ Guides index'; }
@media (max-width: 720px){ .guide-intro{ grid-template-columns:1fr; gap:18px; margin-bottom:36px; padding-bottom:28px;}}
.guide-intro .l-quote{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2vw,28px); line-height:1.25; color:var(--ink); letter-spacing:-.005em; max-width:24ch;}
.guide-intro .r-note{ font-family:var(--serif); font-size:15px; line-height:1.6; color:var(--ink-2); max-width:52ch;}
.guide-intro .r-note .sig{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--rust); display:block; margin-top:14px;}

.guide-list{
  display:grid; grid-template-columns: repeat(3, 1fr);
  column-gap:0; row-gap:48px;
}
.guide-entry{
  padding:0 36px;
  border-left:1px solid var(--hair);
  display:flex; flex-direction:column;
  position:relative;
}
.guide-entry:nth-child(3n+1){ padding-left:0; border-left:0;}
.guide-entry:nth-child(3n){ padding-right:0;}

.guide-entry .gnum{
  font-family:var(--serif-display); font-style:italic; font-weight:400;
  font-size:68px; line-height:.85; color:var(--rust);
  letter-spacing:-.04em; margin-bottom:18px;
  padding-bottom:12px; border-bottom:1px solid var(--hair);
}
.guide-entry .gmeta{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); display:flex; gap:10px; margin-bottom:14px;}
.guide-entry .gmeta .dot{ color:var(--hair-strong);}
.guide-entry .gmeta .level{ color:var(--ink);}
.guide-entry h3{
  font-family:var(--serif); font-weight:500; font-size:25px; line-height:1.18; letter-spacing:-.005em;
  margin-bottom:12px;
}
.guide-entry h3 em{ font-style:italic;}
.guide-entry .ex{ font-family:var(--serif); font-size:16px; color:var(--ink-2); line-height:1.55;}
.guide-entry .foot{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--hair);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase;
  display:flex; justify-content:space-between; gap:10px;
}
.guide-entry .foot .read{ color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px;}
.guide-entry:hover h3{ color:var(--rust);}
.guide-entry:hover .foot .read{ color:var(--rust); border-color:var(--rust);}

@media (max-width: 900px){
  .guide-list{ grid-template-columns: repeat(2, 1fr);}
  .guide-entry{ padding:0 28px; border-left:1px solid var(--hair);}
  .guide-entry:nth-child(3n+1){ padding-left:28px; border-left:1px solid var(--hair);}
  .guide-entry:nth-child(3n){ padding-right:28px;}
  .guide-entry:nth-child(2n+1){ padding-left:0; border-left:0;}
  .guide-entry:nth-child(2n){ padding-right:0;}
}
@media (max-width: 560px){
  .guide-list{ grid-template-columns: 1fr; row-gap:36px;}
  .guide-entry{ padding:0 0 32px 0; border-left:0; border-bottom:1px solid var(--hair);}
  .guide-entry:last-child{ border-bottom:0; padding-bottom:0;}
  .guide-entry:nth-child(2n+1), .guide-entry:nth-child(3n+1), .guide-entry:nth-child(3n), .guide-entry:nth-child(2n){
    padding-left:0; padding-right:0; border-left:0;
  }
  .guide-entry .gnum{ font-size:48px;}
}

/* =================== SCELTE DELLA REDAZIONE =================== */
.scelte{
  display:grid; grid-template-columns: 1fr 1.8fr; gap:64px; align-items:start;
}
@media (max-width:920px){ .scelte{ grid-template-columns: 1fr; gap:32px;}}
.scelte .l h2{
  font-family:var(--serif-display); font-weight:400; font-size:clamp(40px,5vw,72px); line-height:0.96; letter-spacing:-.008em; margin-bottom:18px;
}
.scelte .l h2 em{ font-style:italic; color:var(--rust-deep);}
.scelte .l p{ font-family:var(--serif); font-size:18px; color:var(--ink-2); line-height:1.6; max-width:36ch; margin-bottom:18px;}
.scelte .l .by{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600;}

.editor-list{ list-style:none;}
.editor-list li{
  display:grid; grid-template-columns: 32px 1fr auto auto; gap:24px;
  padding:22px 0; border-top:1px solid var(--hair); align-items:center;
}
.editor-list li:last-child{ border-bottom:1px solid var(--hair);}
.editor-list .n{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--rust);}
.editor-list .who{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink-3); display:block; margin-top:4px;}
.editor-list .title{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:23px; line-height:1.2; letter-spacing:-.005em;}
.editor-list .title em{ font-style:italic;}
.editor-list .cat{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);}
.editor-list .yr{ font-family:var(--mono); font-size:13px; color:var(--ink); letter-spacing:.05em;}
.editor-list li:hover .title{ color:var(--rust);}
@media (max-width: 560px){
  .editor-list li{ grid-template-columns: 28px 1fr; gap:14px;}
  .editor-list .cat, .editor-list .yr{ grid-column:2; font-size:10px;}
}

/* =================== ACCESSORI (Oggetti) =================== */
.objects-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:start;
}
@media (max-width: 920px){ .objects-grid{ grid-template-columns:1fr; gap:36px;}}

.object-feature{ display:grid; grid-template-columns: 0.85fr 1fr; gap:24px; align-items:start;}
@media (max-width: 460px){ .object-feature{ grid-template-columns: 1fr; gap:18px;}}
.object-feature .img-wrap{
  aspect-ratio:1/1; background:var(--cream-2);
  display:flex; align-items:center; justify-content:center; padding:22px;
}
.object-feature .img-wrap .ph{ width:78%; height:78%;}
.object-feature .img-wrap .ph::after{ display:none;}
.object-feature .img-wrap img{ width:78%; height:78%; object-fit:contain;}
.object-feature .copy{ padding-top:2px;}
.object-feature .obj-num{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--rust); display:inline-block; margin-bottom:12px; white-space:nowrap;}
.object-feature h3{ font-family:var(--serif); font-style:italic; font-weight:500; font-size: clamp(19px, 1.8vw, 23px); line-height:1.18; letter-spacing:-.005em; margin-bottom:10px;}
.object-feature p{ font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--ink-2); margin-bottom:16px; max-width:36ch;}
.object-feature .obj-foot{ display:flex; align-items:baseline; gap:18px; padding-top:12px; border-top:1px solid var(--hair); }
.object-feature .obj-price{ font-family:var(--serif); font-size:18px; color:var(--ink); letter-spacing:-.005em; white-space:nowrap;}
.object-feature .obj-link{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; margin-left:auto; white-space:nowrap;}
.object-feature .obj-link:hover{ color:var(--rust); border-color:var(--rust);}

.object-list{ list-style:none; display:flex; flex-direction:column;}
.object-list li{
  display:grid; grid-template-columns: 52px 1fr auto; gap:18px; align-items:center;
  padding:14px 0; border-top:1px solid var(--hair);
}
.object-list li:last-child{ border-bottom:1px solid var(--hair);}
.object-list .thumb{ aspect-ratio:1/1; background:var(--cream-2); padding:6px; display:flex; align-items:center; justify-content:center;}
.object-list .thumb .ph{ width:80%; height:80%;}
.object-list .thumb .ph::after{ display:none;}
.object-list .thumb img{ width:80%; height:80%; object-fit:contain;}
.object-list .obj-num{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:3px;}
.object-list h4{ font-family:var(--serif); font-weight:500; font-size:15px; line-height:1.2; letter-spacing:-.005em;}
.object-list .obj-price{ font-family:var(--mono); font-size:12px; color:var(--ink); letter-spacing:.02em;}
.object-list li:hover h4{ color:var(--rust);}

/* =================== NEWSLETTER =================== */
.news{
  background: var(--ink);
  color: var(--cream);
  padding:72px 0;
  border-bottom: 1px solid var(--ink);
  position:relative;
}
.news .wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:80px; align-items:center;}
@media (max-width: 920px){ .news .wrap{ grid-template-columns:1fr; gap:32px;} .news{ padding:56px 0;}}
.news .kicker{ color:var(--rust); margin-bottom:16px;}
.news h2{ font-family:var(--serif-display); font-weight:400; font-size:clamp(40px,5vw,70px); line-height:0.96; letter-spacing:-.008em; margin-bottom:18px;}
.news h2 em{ font-style:italic;}
.news .deck{ font-family:var(--serif); font-size:19px; line-height:1.55; color:oklch(0.85 0.018 75); max-width:42ch;}
.news form{ display:flex; flex-direction:column; gap:14px;}
.news .row{ display:flex; gap:0; border:1px solid oklch(0.55 0.02 60); }
.news input[type=email]{
  flex:1; background:transparent; border:0; color:var(--cream); padding:18px 20px; font-family:var(--sans); font-size:15px; outline:none;
}
.news input[type=email]::placeholder{ color:oklch(0.65 0.02 60);}
.news button{
  background:var(--rust); color:var(--cream); padding:18px 28px;
  font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
}
.news button:hover{ background:var(--rust-deep);}
.news .checks{ display:flex; gap:18px; flex-wrap:wrap; color:oklch(0.78 0.018 75); font-size:12px; letter-spacing:.04em;}
.news .checks label{ display:flex; align-items:center; gap:8px; cursor:pointer;}
.news .checks input{ accent-color:var(--rust);}
.news .fine{ font-family:var(--serif); font-style:italic; font-size:16px; color:oklch(0.7 0.018 75); margin-top:10px; max-width:48ch;}
.news .ok{ font-family:var(--serif); font-style:italic; color:var(--rust); display:none;}
.news.subscribed .ok{ display:block;}
.news.subscribed form .row, .news.subscribed .checks, .news.subscribed .fine{ display:none;}

/* =================== FOOTER =================== */
footer{ background:var(--cream); padding:64px 0 28px;}
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--hair);}
@media (max-width: 920px){ .foot-grid{ grid-template-columns: 1fr 1fr; gap:32px;}}
@media (max-width: 480px){ .foot-grid{ grid-template-columns: 1fr;}}

.foot-brand .wordmark{ font-size:36px; margin-bottom:14px; display:inline-block; white-space:nowrap;}
.foot-brand p{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink-2); max-width:32ch; line-height:1.5;}
.foot-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--rust); margin-bottom:14px;}
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:9px;}
.foot-col li a{ font-family:var(--sans); font-size:13px; color:var(--ink-2);}
.foot-col li a:hover{ color:var(--rust);}

.colophon{ display:flex; justify-content:space-between; gap:14px; padding-top:24px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); flex-wrap:wrap;}
.colophon a{ color:var(--ink-3); }
.colophon a:hover{ color:var(--rust);}

/* Misc */
.divider{ border-top:1px solid var(--hair); margin: 0; }
.tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);}
.tag::before{ content:''; width:5px; height:5px; background:var(--rust); display:inline-block;}

/* =================== MOBILE DRAWER =================== */
.drawer{ position:fixed; inset:0; background:var(--cream); z-index:100; transform:translateX(-100%); transition:.3s; padding:24px 24px; display:flex; flex-direction:column; gap:16px;}
.drawer.open{ transform:translateX(0);}
.drawer .head{ display:flex; justify-content:space-between; align-items:center;}
.drawer .head button{ font-size:22px;}
.drawer nav{ display:flex; flex-direction:column; gap:14px; margin-top:24px;}
.drawer nav a{ font-family:var(--serif); font-size:28px; letter-spacing:-.01em;}
.drawer nav a em{ font-style:italic; color:var(--rust);}
/* Secondary controls row — search + IT/EN — sits below the main nav */
.drawer-secondary{
  display:flex; align-items:center; gap:24px;
  padding:18px 0 0;
  border-top:1px solid var(--hair);
  margin-top:4px;
}
.drawer-secondary a{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:8px;
}
.drawer-secondary a:hover{ color:var(--rust);}
.drawer-secondary a[data-drawer-lang]{
  margin-left:auto;  /* pushes IT/EN to the right */
  color:var(--ink); font-weight:600;
}
.drawer .util{ margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);}

/* =================== MAIN WRAPPER =================== */
/* homepage <main> has no visual effect — sections handle own layout */
main{ display:contents; }

/* ============================================================
   ADDITIONS — externalized from inline locations
   (preserve exact visual output — no design changes)
   ============================================================ */

/* Footer brand wordmark: block-level so it sits on its own line */
.foot-brand-wm{
  display:block;
  margin-bottom:14px;
  font-size:36px;
  white-space:nowrap;
}

/* Drawer header — replaces inline style="" attributes on .wordmark and #dclose */
.drawer .head .wordmark{
  font-size:26px;
  letter-spacing:.01em;
}
.drawer .head #dclose{
  font-size:28px;
  line-height:1;
  padding:4px 8px;
}