/* sections */
.section{ margin-top: 34px; }
.section_head{ margin-bottom: 14px; }
.section_head h2{ margin: 0 0 6px 0; }
.section_note{ opacity: .75; font-size: 14px; }

/* hero */
.poetry_hero{ margin-top: 10px; padding: 18px 0 8px; }
.poetry_subtitle{ margin-top: 6px; opacity: .75; }
.poetry_lead{ margin-top: 10px; max-width: 780px; opacity: .9; line-height: 1.45; }
.poetry_actions{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

/* buttons */
.btn{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  text-decoration:none;
}
.btn_ghost{ background: transparent; }

/* cards grids */
.grid_cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.card, .echo_card, .poem_item{
  display:block;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration:none;
}

.card_title{ font-weight: 700; }
.card_meta{ opacity:.7; font-size: 13px; margin-top: 4px; }
.card_desc{ opacity:.85; margin-top: 8px; line-height: 1.35; }

.grid_echo{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.echo_title{ font-weight: 700; }
.echo_meta{ opacity:.7; font-size: 13px; margin-top: 6px; }

/* latest list */
.poem_list{ display:flex; flex-direction:column; gap: 10px; }
.poem_top{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.poem_title{ font-weight: 700; }
.poem_date{ opacity:.7; font-size: 13px; white-space:nowrap; }
.poem_excerpt{ margin-top: 8px; opacity:.9; line-height: 1.4; }
.badge{
  display:inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  opacity:.85;
}

/* poem page */
.poem_header{ margin-top: 10px; }
.poem_h1{ margin-bottom: 8px; }
.poem_meta_line{ display:flex; gap:10px; align-items:center; opacity:.8; }
.poem_body{
  margin-top: 18px;
  max-width: 820px;
  line-height: 1.7;
  font-size: 18px;
  white-space: normal;
}
.poem_nav{
  margin-top: 20px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}
.nav_link{ text-decoration:none; border-bottom:1px solid rgba(0,0,0,.2); }
.breadcrumbs{ margin-top: 6px; opacity:.75; font-size: 13px; }
.breadcrumbs a{ text-decoration:none; }


/* poetry.css */

.poetry_page a { color: inherit; text-decoration: none; }
.poetry_page a:hover { text-decoration: none; }

.poetry_wrap { max-width: 1180px; margin: 0 auto; padding: 14px 16px 34px; }

/* HERO */
.p_hero{
  background: #e9e9e9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

.p_hero_media{
  position: relative;
  aspect-ratio: 16 / 6;
  background: #cfcfcf;
}

.p_hero_media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.95) contrast(.98);
}

.p_hero_overlay{
  position:absolute; inset:0;
  display:flex;
  align-items:flex-end;
  padding: 18px 18px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
  color: #fff;
}

.p_hero_title{ font-size: 36px; font-weight: 800; line-height: 1.08; }
.p_hero_chips{ margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; }

.chip{
  display:inline-flex; align-items:center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 13px;
}

.p_hero_actions{ margin-top: 12px; display:flex; gap:10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
}
.btn_dark{ background:#111; color:#fff; border-color:#111; }
.btn_ghost{ background: transparent; }

/* Top picks row */
.p_top_picks{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){
  .p_top_picks{ grid-template-columns: 1fr; }
}
.pick{
  background: #efefef;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.08);
}
.pick_title{ font-weight: 800; }
.pick_chips{ margin-top: 8px; display:flex; gap:8px; flex-wrap:wrap; }
.chip_light{
  background:#f6f6f6;
  border:1px solid rgba(0,0,0,.12);
  color:#111;
}

/* Sections */
.p_section{ margin-top: 28px; }
.p_section_head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.p_section_title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}
.p_section_meta{ opacity:.65; font-size: 13px; }
.p_arrow{ font-size: 26px; opacity:.6; }

/* Shelf grid */
.shelf{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px){ .shelf{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .shelf{ grid-template-columns: 1fr; } }

.card{
  background:#efefef;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow:hidden;
}
.card_media{ aspect-ratio: 16/10; background:#d8d8d8; }
.card_media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card_body{ padding: 10px 12px 12px; }
.card_title{ font-weight: 800; }
.card_meta{ margin-top: 6px; opacity:.65; font-size: 12px; display:flex; gap:10px; flex-wrap:wrap; }

/* Aphorisms */
.aph_list{ display:flex; flex-direction:column; gap:10px; }
.aph{
  background:#efefef;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.35;
}

/* Echo table */
.echo_table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  background:#efefef;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow:hidden;
}
.echo_table th, .echo_table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: 14px;
}
.echo_table th{ opacity:.7; text-align:left; font-weight:700; background: rgba(255,255,255,.35); }
.echo_table tr:last-child td{ border-bottom:0; }
.echo_num{ width:70px; opacity:.8; }

/* Make poetry content follow the same grid as music (.body_block) */
.poetry_wrap{
  max-width: none;
  margin: 0;
  padding: 0;
}

/* HERO buttons: force readable text (scoped) */
.poetry_page .p_hero_actions{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

.poetry_page .p_hero_actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  letter-spacing:.2px;

  background: rgba(255,255,255,.92);
  color:#111 !important;          /* <- fixes the “blank button” */
  border: 1px solid rgba(255,255,255,.35);
  text-decoration:none;
  user-select:none;
}

.poetry_page .p_hero_actions .btn.btn_dark{
  background: rgba(0,0,0,.55);
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.18);
}
.poetry_page .card_big{ grid-column: span 2; }
@media (max-width: 980px){ .poetry_page .card_big{ grid-column: span 1; } }

.poetry_page .card_media{ position:relative; }
.poetry_page .card_badge{
  position:absolute;
  left:10px; bottom:10px;
  background: rgba(0,0,0,.55);
  color:#fff;
  border-radius:10px;
  padding:6px 8px;
  font-size:12px;
  line-height:1;
}

/* --- Make shelf cards ~2x smaller (poetry home only) --- */
.poetry_page .shelf{
  display:grid;
  grid-template-columns: repeat(6, 1fr); /* was effectively 2–4; this makes cards much smaller */
  gap:12px;
}

@media (max-width: 1100px){
  .poetry_page .shelf{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px){
  .poetry_page .shelf{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .poetry_page .shelf{ grid-template-columns: 1fr; }
}

/* Big image cards should still stand out, but not huge */
.poetry_page .card_big{
  grid-column: span 2; /* keep featured, but smaller relative to 6 columns */
}

/* Reduce media height a bit */
.poetry_page .card_media{
  aspect-ratio: 16 / 9;   /* keeps consistent thumbnail height */
}

/* Tighten card body */
.poetry_page .card_body{
  padding:10px 12px 12px;
}
.poetry_page .card_title{
  font-size:15px;
  line-height:1.15;
}
.poetry_page .card_meta{
  font-size:12px;
}
/* Remove any overlay/watermark layers on card thumbnails (poetry only) */
.poetry_page .card_media::before,
.poetry_page .card_media::after,
.poetry_page .card_media img::before,
.poetry_page .card_media img::after{
  content: none !important;
  display: none !important;
  background: none !important;
}
.poetry_page .card_media{
  position: relative;
  overflow: hidden;
}
.poetry_page .card_media img{
  position: relative;
  z-index: 2;
  display:block;
}
.poetry_page .card_media{
  background-image: none !important;
}

/* Hero video behaves exactly like hero img */
.poetry_page .p_hero_media{
  position:relative;
  overflow:hidden;
}
.poetry_page .p_hero_media img,
.poetry_page .p_hero_media video.hero_vid{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Novinki: show 6 on wide, 5 on normal, 4 on smaller */
.poetry_page .shelf_novinki .card:nth-child(n+7){ display:none; } /* show 6 by default */

@media (max-width: 1200px){
  .poetry_page .shelf_novinki .card:nth-child(n+6){ display:none; } /* show 5 */
}
@media (max-width: 900px){
  .poetry_page .shelf_novinki .card:nth-child(n+5){ display:none; } /* show 4 */
}

.poem_text{ white-space: normal; }

/* Poem typography */
.poetry_page .poem_text{
  margin-top:22px;
  font-size:22px;      /* smaller */
  line-height:1.55;    /* readable */
  letter-spacing:.1px;
  white-space:normal;  /* IMPORTANT: don't use pre-line when using <br> */
  opacity:.88;
}

/* Make <br> feel like your "big" spacing */
.poetry_page .poem_text br{
  display:block;
  content:"";
  margin:12px 0;       /* controls gap between lines */
}

/* Bigger gap for stanza breaks (double <br><br>) */
.poetry_page .poem_text br + br{
  margin-top:26px;     /* stanza gap */
}
/* ===== Media Lightbox (poem page) ===== */
.poetry_page .poem_media{ cursor: zoom-in; }

.media_lb{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.media_lb.is_open{ display:block; }

.media_lb_backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.70);
}

.media_lb_panel{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  box-sizing: border-box;
}

.media_lb_stage{
  width: min(1100px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  background: rgba(20,20,20,.20);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.media_lb_stage img,
.media_lb_stage video{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: contain; /* IMPORTANT: show full art */
  background: #000;
}

.media_lb_close{
  position:absolute;
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 26px;
  line-height: 40px;
  cursor: pointer;
}

@media (max-width: 520px){
  .media_lb_panel{ padding: 14px; }
  .media_lb_stage{
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    border-radius: 14px;
  }
}

.poetry_page .poem_nav{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin:34px 0 10px;
}

.poetry_page .poem_nav_link{
  display:block;
  padding:14px 16px;
  border-radius:16px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.06);
  text-decoration:none;
  color: inherit;
}

.poetry_page .poem_nav_link:hover{
  background: rgba(255,255,255,.55);
}

.poetry_page .poem_nav_dir{
  display:block;
  font-size:12px;
  opacity:.65;
  letter-spacing:.4px;
  text-transform: uppercase;
  margin-bottom:6px;
}

.poetry_page .poem_nav_title{
  display:block;
  font-size:16px;
  font-weight:700;
  line-height:1.15;
  opacity:.9;
}

.poetry_page .poem_nav_link_right{
  text-align:right;
}

@media (max-width: 900px){
  .poetry_page .poem_nav{
    grid-template-columns: 1fr;
  }
  .poetry_page .poem_nav_link_right{
    text-align:left;
  }
}
/* Subtle highlight behind poem body */
.poetry_page .poem_main{
  position: relative;
}

.poetry_page .poem_text{
  background: rgba(255,255,255,.28);   /* tiny highlight */
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 18px;
  padding: 18px 5px;
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}
@media (max-width: 900px){
  .poetry_page .poem_text{
    padding: 14px 16px;
    border-radius: 16px;
  }
}
/* Echo table scroll: ~10 rows visible */
.poetry_page .echo_scroll{
  max-height: 360px;   /* adjust: 10 rows-ish */
  overflow-y: auto;
  border-radius: 14px;
}

/* optional: keep header visible while scrolling */
.poetry_page .echo_table thead th{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.poetry_page .echo_scroll{
  max-height: 360px;   /* ~10 rows; adjust if needed */
  overflow-y: auto;
  border-radius: 14px;
}

.poetry_page .echo_table thead th{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
/* Echo table header: larger text + darker background */
.poetry_page .echo_table thead th{
  position: sticky;
  top: 0;
  z-index: 2;

  background: #1f1f1f;      /* dark header */
  color: #ffffff;           /* white text */

  font-size: 15px;          /* increase letters */
  font-weight: 700;
  letter-spacing: .4px;

  padding: 12px 12px;
  text-transform: uppercase; /* optional; remove if you don’t want */
  border-bottom: 1px solid rgba(255,255,255,.15);
}

/* Keep body rows readable under dark header */
.poetry_page .echo_table tbody td{
  padding: 10px 12px;
}

/* Optional: nicer hover */
.poetry_page .echo_table tbody tr:hover{
  background: rgba(0,0,0,.035);
}

/* Optional: links styling inside table */
.poetry_page .echo_table a{
  text-decoration: none;
}
.poetry_page .echo_table a:hover{
  text-decoration: underline;
}
/* Header stays as we set (dark + larger) */
.poetry_page .echo_table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1f1f1f;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

/* Bigger row height */
.poetry_page .echo_table tbody td{
  padding: 16px 14px;      /* increases row height */
  font-size: 14px;
  vertical-align: middle;
}

/* Make the Echo title (first column link) bigger */
.poetry_page .echo_table tbody td:first-child a{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
  display: inline-block;
  padding: 2px 0;
}

/* Optional: slightly larger numbers for qty/date too */
.poetry_page .echo_table tbody td:nth-child(2),
.poetry_page .echo_table tbody td:nth-child(3){
  font-size: 14.5px;
}

/* Optional: row hover */
.poetry_page .echo_table tbody tr:hover{
  background: rgba(0,0,0,.035);
}

.echo_cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 18px;
}

.echo_col{
  display:flex;
  flex-direction: column;
}

@media (max-width: 900px){
  .echo_cols{ grid-template-columns: 1fr; }
}
/* Echo: force 3 columns on desktop */
.poetry_page .echo_cols{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-top: 18px;
  align-items: start;
  width: 100%;
}

/* Ensure old float rules don’t break columns */
.poetry_page .echo_col{
  float: none !important;
  width: auto !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Items should not force column overflow */
.poetry_page .echo_item{
  display: block;
  min-width: 0;
}

/* Keep 1 column only on small screens */
@media (max-width: 900px){
  .poetry_page .echo_cols{
    grid-template-columns: 1fr !important;
  }
}
/* Center titles */
.poetry_page .echo_item{
  text-align: center;
  border-bottom: none !important;

  padding: 10px 12px;
  border-radius: 12px;

  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}

/* Hover highlight: faint border + soft shadow (no layout shift) */
.poetry_page .echo_item:hover{
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Prevent border from changing layout (optional but recommended) */
.poetry_page .echo_item{
  border: 1px solid transparent;
}
/* Sidebar container */
.echo_side{
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.08);
  position: sticky;
  top: 16px;
  height: fit-content;
}

.echo_side_head{
  font-weight: 900;
  letter-spacing: .3px;
  text-align: center;
  padding: 6px 8px 10px;
}

/* Scroll height ≈ 21 rows */
.echo_side_scroll{
  --row-h: 34px;                 /* tune if needed */
  max-height: calc(21 * var(--row-h));
  overflow-y: auto;
  padding: 6px;
}

/* Echo links in sidebar */
.echo_side_echo{
  display: block;
  text-align: center;
  min-height: var(--row-h);
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease, background-color .18s ease;
}

.echo_side_echo:hover{
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Active Echo */
.echo_side_echo.is_active{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
  font-weight: 900;
}
 .poetry_page .site_main{ max-width:1240px; margin:0 auto; padding:0 16px; box-sizing:border-box; }
    .poetry_page .body_block{ width:100%; float:none; margin-right:0; }

    .poem_layout{
      display:grid;
      grid-template-columns: 260px 1fr 360px; /* left list, poem, right card */
      gap:22px;
      align-items:start;
      margin-top:18px;
    }
    @media (max-width: 1200px){
      .poem_layout{ grid-template-columns: 240px 1fr; }
      .poem_right{ grid-column: 1 / -1; }
    }
    @media (max-width: 900px){
      .poem_layout{ grid-template-columns: 1fr; }
      .poem_left{ display:none; } /* keep it simple for now */
    }

    .poem_title{
      font-size:48px;
      line-height:1.05;
      letter-spacing:1px;
      margin:0;
      opacity:.9;
    }
    .poem_meta{
      display:flex;
      gap:14px;
      align-items:center;
      margin-top:10px;
      opacity:.7;
      font-size:14px;
    }

    .poem_text{
      margin-top:22px;
      font-size:34px;
      line-height:1.35;
      letter-spacing:.2px;
      white-space:pre-line; /* preserves line breaks */
    }

    /* Right panel */
    .poem_card{
      background:#efefef;
      border:1px solid rgba(0,0,0,.05);
      border-radius:18px;
      padding:14px;
    }
    .poem_media{
      border-radius:14px;
      overflow:hidden;
      background:#ddd;
      aspect-ratio: 16 / 10;
      margin-bottom:12px;
    }
    .poem_media img,
    .poem_media video{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .poem_info{
      display:grid;
      gap:10px;
      font-size:14px;
      opacity:.85;
    }
    .poem_info_row{
      display:flex;
      justify-content:space-between;
      gap:10px;
    }
    .poem_info_row span:first-child{ opacity:.65; }

    /* Left list placeholder */
    .side_list{
      background:transparent;
      border-radius:14px;
      padding:6px 0;
    }
    .side_list .side_title{
      font-weight:800;
      letter-spacing:1px;
      opacity:.7;
      margin:0 0 10px 0;
    }
    .side_list a{
      display:block;
      padding:6px 0;
      text-decoration:none;
      opacity:.75;
    }
    .side_list a:hover{ opacity:1; }

    /* 2-column layout wrapper (used on poem page) */
.poetry_page .echo_with_sidebar{
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* Sidebar look (transparent, no white blocks) */
.poetry_page .echo_side{
  border-radius: 16px;
  padding: 0;
  background: transparent;
  border: none;
  position: sticky;
  top: 16px;
  height: fit-content;
}

.poetry_page .echo_side_head{
  font-weight: 900;
  letter-spacing: .3px;
  text-align: center;
  padding: 6px 8px 10px;
}

/* Height ≈ 21 rows */
.poetry_page .echo_side_scroll{
  --row-h: 34px;
  max-height: calc(21 * var(--row-h));
  overflow-y: auto;
  padding: 6px;
}

/* Accordion items */
.poetry_page .echo_acc_item{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  margin-bottom: 10px;
  overflow: hidden;
  background: transparent;
}

.poetry_page .echo_acc_head{
  display:block;
  text-align:center;
  padding: 10px 10px;
  min-height: var(--row-h);
  text-decoration:none;
  color: inherit;
  font-weight: 800;
}

.poetry_page .echo_acc_item:hover .echo_acc_head{
  background: rgba(0,0,0,.03);
}

.poetry_page .echo_acc_body{
  display: none;
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 8px;
  background: transparent;
}

.poetry_page .echo_acc_item.is_open .echo_acc_body,
.poetry_page .echo_acc_item.is_active .echo_acc_body{
  display: block;
}

.poetry_page .echo_acc_title{
  display:block;
  text-align:center;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration:none;
  color: inherit;
  background: transparent;
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.poetry_page .echo_acc_title:hover{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Highlight current poem in sidebar */
.poetry_page .echo_acc_title.is_current_poem{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
  font-weight: 900;
}

/* Responsive */
@media (max-width: 900px){
  .poetry_page .echo_with_sidebar{
    grid-template-columns: 1fr;
  }
  .poetry_page .echo_side{
    position: relative;
    top: auto;
  }
}
.poetry_page .poem_text,
.poetry_page .poem_body,
.poetry_page pre {
  width: 100%;
  max-width: 900px;     /* pick 820–980 to taste */
  margin: 0 auto;
}

/* Add to your <style> section */
.poetry_page .card_media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hide video controls on cards */
.poetry_page .card_media video::-webkit-media-controls {
  display: none !important;
}

/* Different badge for video */
.poetry_page .card_media video + .card_badge {
  background: rgba(0, 0, 0, 0.7);
}