/* ---------- Palette & settings ---------- */
:root {
  --bg-main: #b1a294;
  --bg-dark: #111111;
  --text-dark: #1a1918;
  --text-light: #f5f3f0;
  --accent-red: #800000;
  --accent-gold: #d4af37;
  --font-main: "Georgia", "Times New Roman", serif;

  --ink: #241a14;
  --paper: #f3ead9;
  --taupe: #b1a294;
  --charcoal: #1c1613;
  --rust: #934b2b;
  --rust-dark: #6f3720;
  --wax: #7a2420;
  --wax-dark: #5c1b18;
  --cream-text: #f3ead9;
  --line: rgba(36, 26, 20, .16);

  /* hamburger colour - change here if you want another one */
  --burger-color: #d4af37;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-main);
  color: var(--text-dark);
  font-family: 'Inter', Arial, sans-serif;
  line-height: 1.6;
}
body.menu-locked { overflow: hidden; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

a { color: inherit; text-decoration: none; transition: all .3s ease; font-family: 'Fraunces', Georgia, serif;}

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

/* Headings inside page sections use Fraunces */
.section h1, .section h2, .section h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
}

 /* ---------- Header ---------- */
.site-header {
  background-color: var(--bg-dark);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid var(--accent-red);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px 14px 72px;   /* left room for the hamburger */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-logo {
  color: var(--text-light);
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
  font-weight: 700;
  font-family: var(--font-main);
  line-height: 1.25;
  white-space: nowrap;
}
.brand-sub { color: var(--accent-gold); font-weight: 400; }

.main-nav ul { display: flex; list-style: none; gap: clamp(10px, 1.9vw, 22px); }
.main-nav a { color: var(--text-light); font-weight: 500; font-size: clamp(.74rem, 1.5vw, .95rem); white-space: nowrap; font-family: 'Fraunces', Georgia, serif;}
.main-nav a:hover,
.main-nav a.highlight-link { color: var(--accent-gold); }

/* ---------- Hamburger button ---------- */
.hamburger {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 32px;
  height: 24px;
  margin-top: -12px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 1003;
}
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--burger-color);
  transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
}
.hamb-top    { top: 0; }
.hamb-middle { top: 50%; margin-top: -1.5px; }
.hamb-bottom { bottom: 0; }

.hamburger.is-open .hamb-top    { top: 50%; margin-top: -1.5px; transform: rotate(45deg); }
.hamburger.is-open .hamb-middle { opacity: 0; }
.hamburger.is-open .hamb-bottom { bottom: 50%; margin-bottom: -1.5px; transform: rotate(-45deg); }

/* ---------- Side menu ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 1001;
}
#wrapper.toggled .overlay { opacity: 1; visibility: visible; }

#sidebar-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: min(300px, 85vw);
  height: 100%;
  overflow-y: auto;
  padding: 72px 0 24px;
  background: var(--bg-dark);
  border-right: 2px solid var(--accent-red);
  transform: translateX(-100%);
  transition: transform .3s ease;
}
#wrapper.toggled #sidebar-wrapper { transform: translateX(0); }

.sidebar-nav { list-style: none; }
.sidebar-nav li { list-style: none; }
.sidebar-nav a {
  display: block;
  padding: 6px 26px;
  color: var(--text-light);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 1.35;
  border-bottom: 1px solid #262626;
}
.sidebar-nav a:hover { color: var(--accent-gold); background: #1a1a1a; }

.menu2-list > a.menu-toggle::after {
  content: "+";
  float: right;
  color: var(--accent-gold);
  font-weight: 700;
}
.menu2-list.open > a.menu-toggle::after { content: "\2013"; }

.menu2-drop {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  background: #181818;
  transition: max-height .3s ease;
}
.menu2-list.open .menu2-drop { max-height: 600px; }
.menu2-drop a { padding-left: 44px; font-size: .95rem; letter-spacing: .02em; color: #d8c9b6; }

/* ========== Buttons & links ===================== */
.btn {
  display: inline-block;
  padding: 9px 17px;
  border-radius: 6px;
  border: 2px solid transparent;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: .85rem;
  text-align: center;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-wax  { background: var(--wax);  color: var(--cream-text); }
.btn-wax:hover  { background: var(--wax-dark); }
.btn-rust { background: var(--rust); color: #fff; }
.btn-rust:hover { background: var(--rust-dark); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }

.btn-group { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 20px; }
.btn-group.center { justify-content: center; }

.text-link {
  display: inline-block;
  color: var(--rust);
  font-weight: 600;
  font-size: .90rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: 'Fraunces', Georgia, serif;
}
.text-link:hover { color: var(--rust-dark); }
.text-link-light { color: var(--paper); }
.text-link-light:hover { color: #fff; }

/* ==========================================================================
   Hero banner
   The hero box keeps the banner's proportions, and all text sizes are in vw,
   so the text shrinks together with the picture and always stays on it.
   Under 500px the <picture> in the HTML swaps in banner-mobile.jpg.
   ========================================================================== */
.hero-section {
  position: relative;
  display: grid;
  background: var(--bg-main);
  --cta-size: clamp(.85rem, 2.2vw, 1.8rem);
}
/* the banner <picture> in index.html sits in its own grid cell,
   with the text laid over it in the same cell */
.hero-picture { grid-area: 1 / 1; display: block; }
.hero-picture img { display: block; width: 100%; height: auto; }

.hero-container {
  grid-area: 1 / 1;
  align-self: center;
  width: 100%;
  padding: 0 20px 0 clamp(14px, 2.5vw, 48px);
}

.hero-text-content {
  background: transparent;
  max-width: min(480px, 42vw);
  text-align: left;
}

.hero-text-content h1 {
  font-family: var(--font-main);
  font-size: clamp(1.1rem, 4.4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 1px;
  color: #000;
  margin-bottom: clamp(6px, 1.4vw, 20px);
  text-shadow: 0 0 10px rgba(255, 255, 255, .4);
}

.hero-subtext {
  font-family: var(--font-main);
  font-size: clamp(.72rem, 1.6vw, 1.25rem);
  font-weight: 500;
  line-height: 1.3;
  color: #111;
  margin-bottom: clamp(6px, 1.6vw, 25px);
}

.hero-link-btn {
  font-family: var(--font-main);
  font-size: var(--cta-size);
  font-weight: 700;
  color: var(--accent-red);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero-link-btn:hover { color: #a00000; }

/* ---- 700px and below: title + link stay ON the picture, the sentence moves under it */
@media (max-width: 700px) {
  .hero-section { --cta-size: clamp(.95rem, 3.4vw, 1.5rem); }
  .hero-container, .hero-text-content { display: contents; }

  .hero-text-content h1 {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: start;
    font-size: clamp(1.1rem, 5vw, 2.2rem);
    margin: 0 16px calc(var(--cta-size) * 1.3 + clamp(18px, 4vw, 28px)) clamp(14px, 4vw, 28px);
  }
  .hero-cta {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: start;
    margin: 0 0 clamp(10px, 2.4vw, 18px) clamp(14px, 4vw, 28px);
  }
  .hero-link-btn { display: inline-block; line-height: 1.3; }
  .hero-subtext {
    grid-area: 2 / 1;
    max-width: none;
    margin: 0;
    padding: 14px 18px 18px;
    text-align: center;
    font-size: clamp(.9rem, 2.6vw, 1.1rem);
  }
}

/* ---- 500px and below: text sizes for the portrait picture (the HTML swaps the image) */
@media (max-width: 500px) {
  .hero-section { --cta-size: clamp(1rem, 5.4vw, 1.7rem); }
  .hero-text-content h1 { font-size: clamp(1.5rem, 7.4vw, 2.4rem); }
  .hero-subtext { font-size: clamp(.95rem, 3.8vw, 1.15rem); }
}

/* =======Breadcrumbs (own styling - the strip under the banner)============== */
.breadcrumb-nav {
  background: var(--rust-dark);
  padding: 3px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .25);
}
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  font-family: 'Fraunces', Georgia, serif;;
  font-size: .95rem;
  line-height: 1.3;
}
.breadcrumb-item { list-style: none; color: #fff; }
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  display: inline-block;
  padding: 0 14px;
  color: #fff;
}
.breadcrumb-item.active { color: #ff8a3d; }
.breadcrumb-item a { color: #fff; text-decoration: none; }
.breadcrumb-item a:hover { color: var(--accent-gold); text-decoration: underline; }

/* ===========  Sections   ============= */
.section { padding: 36px 20px; }
.section-paper { background: var(--paper); }
.section-taupe { background: var(--taupe); }
.section-dark  { background: var(--charcoal); color: var(--cream-text); }
.section-dark p { color: var(--cream-text); }

.section-title {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  text-align: center;
  max-width: 90%;
  margin: 0 auto;
  white-space: nowrap;
}
.section-title-light { color: var(--cream-text); }

.section-lead {
  text-align: center;
  max-width: 700px;
  margin: 2px auto 0;
  font-size: .99rem;
  color: #4a3c33;
}
.section-lead-light { color: #d8c9b6; }

/* ---------- Authors / Music ---------- */
.authors-grid {
  max-width: 1000px;
  margin: 5px auto 0;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 50px;
  align-items: center;
}
.authors-grid-reverse { grid-template-columns: 1.1fr .9fr; }
.authors-grid-reverse .authors-copy  { order: 1; }
.authors-grid-reverse .authors-image { order: 2; }

.authors-image img {
  max-width: 300px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(28, 22, 19, .16);
}
.authors-title {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  white-space: nowrap;
  margin-bottom: 4px;
}
.authors-copy p { max-width: 90ch; font-size: .99rem; line-height: 1.20; }

.check-list { list-style: none; margin: 14px 0 0; display: grid; gap: 2px; }
.check-list li { padding-left: 20px; position: relative; font-size: .99rem; }
.check-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
}

.check-list a {
  color: #800000;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.check-list a:hover { color: #de6868; }

.authors-ctas { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.authors-ctas .text-link{font-size: 15px; color: #800000;}
.authors-ctas .text-link:hover{color: #e58f8f;}
.music-section .btn { margin-top: 16px; }
.music-section .authors-image img { margin-left: auto; }

/* ---------- Trust strip ---------- */
.trust-strip { text-align: center; }
.trust-quote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  max-width: 560px;
  margin: 0 auto;
  color: #e9dcc9;
  padding: 0 24px;
}
.trust-strip a:hover {color: #de6868}
.trust-agency a:hover {color: #de6868}
.trust-divider { width: 40px; height: 1px; background: rgba(243, 234, 217, .3); margin: 18px auto; }
.trust-agency { max-width: 520px; margin: 0 auto; font-size: .83rem; color: #d8c9b6; }

/* ---------- Prints ---------- */
.prints-strip {
  max-width: 1000px;
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
  gap: 35px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.prints-strip img {
  height: 180px;
  width: auto;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.prints-note { max-width: 640px; margin: 22px auto 0; text-align: center; font-size: .87rem; color: #191410; }
.prints-links { margin: 22px auto 0; max-width: 720px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--rust)}
.prints-links a{color: darkred;}

/* =========  Contact form   =============== */
.form-container { width: 100%; max-width: 560px; margin: 0 auto; }
.section-title-light { width: auto; max-width: 500px; margin: 0 auto; text-align: center; }
.section-lead-light  { width: auto; max-width: 500px; margin: 10px auto 15px; text-align: center; }

.contact-form { margin-top: 6px; }
.form-group { margin-bottom: 14px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: .95rem;
  color: var(--cream-text);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(243, 234, 217, .28);
  border-radius: 6px;
  resize: vertical;
}
.contact-form ::placeholder { color: #b9a995; opacity: 1; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, .25);
}
.submit-btn {
  display: inline-block;
  padding: 11px 26px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--cream-text);
  background: var(--wax);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.submit-btn:hover { background: var(--wax-dark); }
.submit-btn:disabled { opacity: .6; cursor: default; }

#form-message { margin-top: 14px; font-size: .9rem; text-align: center; }
#form-message.success { color: #9fd69f; }
#form-message.error   { color: #ff9b8f; }

/* ==========================================================================
   Gallery grid
   ========================================================================== */
.gallery-grid {
  max-width: 860px;
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.gallery-card { background: #fffaf1; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.gallery-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.gallery-card h3 { font-size: .9rem; text-align: center; margin: 8px auto 2px; }
.gallery-card h3 a { color: var(--ink); }
.gallery-card h3 a:hover { color: var(--accent-red); }
.gallery-card p { font-size: .76rem; text-align: center; margin: 0 5px 8px; color: #5c4c40; }

/* ==========================================================================
   Footer - colours are set directly on every element so they can never
   end up dark-on-dark.
   ========================================================================== */
.site-footer {
  background-color: var(--bg-dark);
  color: #f5f3f0;
  padding: 40px 0 20px;
  border-top: 2px solid var(--accent-red);
}
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.site-footer .footer-brand h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #f5f3f0;
  margin: 0 0 4px;
}
.site-footer .footer-brand p { color: #d8c9b6; font-size: .95rem; margin: 0; }
.site-footer a { color: #f5f3f0; }
.site-footer .footer-brand p {
  color: #d8c9b6;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  margin: 0;
}

.social-links { display: flex; gap: 15px; }
.social-links img { width: 24px; height: 24px; filter: invert(1); }

.footer-bottom {
  text-align: center;
  border-top: 1px solid #333;
  padding-top: 20px;
}
.site-footer .footer-bottom p { color: #b5b5b5; font-size: .85rem; margin: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
  .section-title, .authors-title { white-space: normal; }
}

/* ---------- 860px: tablets ---------- */
@media (max-width: 860px) {
  .section { padding: 30px 16px; }

  /* authors + music stay side by side: same layout, smaller type */
  .authors-grid         { grid-template-columns: .85fr 1.15fr; gap: 20px; }
  .authors-grid-reverse { grid-template-columns: 1.15fr .85fr; }
  .authors-title        { font-size: clamp(.95rem, 2.6vw, 1.25rem); }
  .authors-copy p       { font-size: clamp(.90rem, 1.9vw, .83rem); }
  .check-list           { margin-top: 10px; }
  .check-list li        { font-size: clamp(.7rem, 1.85vw, .8rem); padding-left: 16px; }
  .check-list li { font-size: .90rem; }
  .check-list li::before { width: 6px; height: 6px; }
  .authors-ctas         { margin-top: 12px; gap: 10px; }
  .authors-copy .btn    { font-size: clamp(.7rem, 1.8vw, .82rem); padding: 8px 13px; }
  .authors-copy .text-link { font-size: clamp(.7rem, 1.8vw, .82rem); }
  .music-section .btn   { margin-top: 12px; }

  .prints-strip { flex-wrap: wrap; overflow-x: visible; gap: 14px; }
  .prints-strip img { height: 140px; }

  .footer-content { flex-direction: column; text-align: center; justify-content: center; }
  .social-links { justify-content: center; }
}

/* ---------- 800px: header menu + gallery ---------- */
@media (max-width: 800px) {
  /* the side menu holds every link, so hide the horizontal one */
  .main-nav { display: none; }
  .nav-container { justify-content: center; text-align: center; padding: 12px 60px; }
  .brand-logo { font-size: 1.15rem; }

  /* gallery cards keep their size and simply re-flow / centre */
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, 172px);
    justify-content: center;
    gap: 12px;
  }
}

/* ---------- 700px ---------- */
@media (max-width: 700px) {
  .breadcrumb-nav { padding: 1px 16px;}
  .breadcrumb-nav li{font-size: 12px; }
  .btn { padding: 11px 18px; }
  .prints-strip img { height: auto; width: calc(50% - 7px); max-width: 200px; }
  .prints-links { flex-direction: column; align-items: center; gap: 10px; }
  .trust-quote { padding: 0 8px; }
  .section-title, .authors-title { white-space: normal; }
  .section-title-light, .section-lead-light { max-width: 100%; }
  .authors-ctas .text-link {font-size: 14px;}
}

/* ---------- 600px: authors + music finally stack (image first, centred) ---------- */
@media (max-width: 600px) {
  .authors-grid, .authors-grid-reverse { grid-template-columns: 1fr; gap: 20px; }
  .authors-grid .authors-image,
  .authors-grid-reverse .authors-image { order: 1; }
  .authors-grid .authors-copy,
  .authors-grid-reverse .authors-copy { order: 2; }
  .authors-image img,
  .music-section .authors-image img { margin: 0 auto; max-width: 260px; }
  .authors-title { font-size: 1.15rem; }
  .authors-copy p { font-size: .92rem; }
  .check-list li { font-size: .9rem; padding-left: 20px; }
  .authors-copy .btn { font-size: .85rem; padding: 11px 18px; }
  .authors-copy .text-link { font-size: .88rem; }
  .authors-ctas { flex-direction: column; align-items: flex-start; }
}

/* ---------- 480px ---------- */
@media (max-width: 480px) {
  .brand-logo { font-size: 1.02rem; }
  .btn-group { flex-direction: column; }
  .site-footer .footer-bottom p { font-size: .78rem; }
}


/* ==========================================================================
   TWEAKS (round 4) - kept at the very end so they win over earlier rules
   ========================================================================== */

/* Titles (everything except the hero and the titles on dark sections)
   use the same colour as the buttons. Swap to var(--rust) if you prefer. */
:root { --title-color: var(--wax); }
.authors-title,
.section:not(.section-dark) .section-title,
.gallery-card h3 a { color: var(--title-color); }
.gallery-card h3 a:hover { color: var(--wax-dark); }

/* 700px and below: no sentence under the banner at all; prints = 3 per row */
@media (max-width: 700px) {
  .hero-subtext { display: none; }

  .prints-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: visible;
    gap: 10px;
  }
  .prints-strip img {
    width: calc((100% - 20px) / 3);
    max-width: none;
    height: auto;
  }
}

/* 600px and below: titles and buttons (not the hero) are centred */
@media (max-width: 600px) {
  .authors-title { text-align: center; }
  .authors-ctas { align-items: center; justify-content: center; text-align: center; }
  .music-section .authors-copy .btn {
    display: block;
    width: fit-content;
    margin: 16px auto 0;
  }
  .submit-btn { display: block; margin: 0 auto; }
}

/* prints: 3 per row, then 2, then 1 */
@media (max-width: 420px) {
  .prints-strip img { width: calc((100% - 10px) / 2); }
}
@media (max-width: 300px) {
  .prints-strip img { width: 100%; }
}

/* narrow phones: brand name shrinks so it never touches the hamburger */
@media (max-width: 480px) {
  .brand-logo { font-size: clamp(.6rem, calc((100vw - 124px) / 14.5), 1.02rem); }
}


/* ==========================================================================
   Authors + Music: image and text sit close together; any extra width
   goes to the outside left/right margins instead of the gap between them.
   (Below 600px the sections stack, as before.)
   ========================================================================== */
@media (min-width: 601px) {
  /* columns keep the 300 : 520 proportion, so the picture shrinks
     together with the text instead of being squeezed to nothing */
  .authors-grid {
    max-width: 848px;
    grid-template-columns: minmax(0, 300fr) minmax(0, 520fr);
    justify-content: center;
    column-gap: 28px;
  }
  .authors-grid-reverse {
    grid-template-columns: minmax(0, 520fr) minmax(0, 300fr);
  }
  /* AUTHORS section only: distance between picture and text.
     (the music section keeps column-gap: 28px from the rule above) */
  .authors-section .authors-grid {
    /* the gap is fluid: it shrinks with the window (6vw), between 16px and 90px.
       Change the 90px to set the gap on wide screens. */
    --authors-gap: clamp(16px, 6vw, 90px);
    column-gap: var(--authors-gap);
    max-width: calc(900px + var(--authors-gap));   /* 300 + 520 + gap */
  }
  .authors-image img,
  .music-section .authors-image img { margin-left: 0; margin-right: 0; }
}


/* ==========================================================================
   Prints strip: images keep their size (140px high) and the row simply
   shows fewer of them as the screen gets narrower: 3 at 700px, then 2, then 1.
   ========================================================================== */
@media (max-width: 700px) {
  .prints-strip {
    display: flex;
    flex-wrap: wrap;            /* anything that no longer fits drops to a hidden 2nd row */
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    gap: 14px;
    height: 146px;
    overflow: hidden;
    padding-bottom: 6px;
  }
  .prints-strip img {
    height: 140px;
    width: auto;
    max-width: none;
    flex-shrink: 0;
  }
  .prints-strip img:nth-child(4) { display: none; }   /* 3 images */
}
@media (max-width: 560px) {
  .prints-strip img:nth-child(3) { display: none; }   /* 2 images */
}
@media (max-width: 380px) {
  .prints-strip img:nth-child(2) { display: none; }   /* 1 image */
}


/* ==========================================================================
   Side menu: links scale down smoothly below 400px
   ========================================================================== */
@media (max-width: 400px) {
  #sidebar-wrapper { width: min(300px, 82vw); padding-top: 64px; }
  .sidebar-nav a {
    font-size: clamp(.8rem, 4.2vw, 1.05rem);
    padding: clamp(9px, 3vw, 13px) clamp(16px, 5vw, 26px);
  }
  .menu2-drop a {
    font-size: clamp(.74rem, 3.7vw, .95rem);
    padding-left: clamp(30px, 9vw, 44px);
  }
}


/* In-page links: stop the sticky header from covering the section title */
section[id], #contact-form { scroll-margin-top: 76px; }




/* ==========================================================================
   BOOK COVER DESIGN PAGE (book-cover-design.html)
   Everything below is only used by that page.
   ========================================================================== */

/* ---------- Hero variant for this page (original look) ----------
   white centred title, white sentence at the top, orange link in a
   black-outlined pill, social icons in a column on the left.
   Everything is sized in vw so it scales together with the picture. */
.hero-bc .hero-container,
.hero-bc .hero-text-content { display: block; }
.hero-bc .hero-container { grid-area: 1 / 1; position: relative; padding: 0; align-self: stretch; }
.hero-bc .hero-text-content {
  position: relative;
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-bc .hero-subtext {
  display: block;
  position: absolute;
  top: clamp(6px, 2vw, 26px);
  left: 0; right: 0;
  margin: 0;
  padding: 0 12%;
  grid-area: auto;
  font-size: clamp(.55rem, 1.7vw, 1.3rem);
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
.hero-bc .hero-text-content h1 {
  grid-area: auto;
  align-self: center;
  justify-self: auto;
  margin: 0 0 clamp(8px, 2vw, 26px);
  font-size: clamp(1.05rem, 3vw, 3.6rem);
  line-height: 1.4;
  margin-left: -50px;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}
.hero-bc .hero-cta { grid-area: auto; align-self: center; justify-self: auto; margin: 0; }
.hero-bc .hero-link-btn {
  display: inline-block;
  font-size: clamp(.7rem, 2.1vw, 1.5rem);
  color: #ff8a3d;
  text-decoration: none;
  line-height: 1.2;
  padding: .4em 1.3em;
  border: 2px solid #000;
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
}
.hero-bc .hero-link-btn:hover { color: #ffb070; background: rgba(0, 0, 0, .55); }

.hero-social {
  position: absolute;
  left: clamp(6px, 1.6vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.5vw, 18px);
  z-index: 2;
}
.hero-social img {
  width: clamp(16px, 2.4vw, 28px);
  height: clamp(16px, 2.4vw, 28px);
  filter: invert(1);
}
.hero-social a:hover { opacity: .7; }

@media (max-width: 500px) {
  .hero-bc .hero-subtext { display: none; }
  .hero-bc .hero-text-content h1 { font-size: clamp(1.2rem, 6.6vw, 2rem); }
  .hero-bc .hero-link-btn { font-size: clamp(.8rem, 3.6vw, 1.1rem); }
}

/* ---------- Text blocks (centred, elegant serif) ---------- */
.bc-text { max-width: 900px; margin: 0 auto; }
.bc-text p {max-width: 900px; margin-top: 6px; font-size: 1.1rem; line-height: 1.3; color: #0d0a09; text-align: center; }
.bc-text .section-title { margin-bottom: 4px; }

.bc-text a, .bc-card a, .bc-list a {
  color: #800000;
  font-family: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bc-text a:hover, .bc-card a:hover, .bc-list a:hover { color: #de6868; }
/* buttons keep their own colours */
.bc-text a.btn-wax, .bc-text a.btn-wax:hover { color: var(--paper); text-decoration: none; font-family: 'Fraunces', Georgia, serif; }

/* bullet list: tight lines */
.bc-list { margin-top: 10px; gap: 0; }
.bc-list + .bc-list { margin-top: 4px; }
.bc-list li { font-size: 1.1rem; line-height: 1.45; padding-top: 1px; padding-bottom: 1px;}
.bc-list li::before { top: .62em; }

.bc-cta { margin-top: 20px; text-align: center; font-size: 1rem;}
.bc-cta a{ font-size: .90rem;}

/* ---------- Premade cover examples ---------- */
.bc-covers {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(14px, 3vw, 32px);
  max-width: 900px;
  margin: 0 auto;
}
.bc-covers img {
  height: clamp(190px, 31vw, 300px);
  width: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(28, 22, 19, .16);
}
.bc-cover-single { display: none; }
.bc-cover-single img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(28, 22, 19, .16);
}
.bc-covers + .bc-cover-single + .bc-text,
.bc-covers + .bc-text { margin-top: 22px; }
.bc-cover-single + .bc-text { margin-top: 22px; }

@media (max-width: 600px) {
  .bc-covers { display: none; }
  .bc-cover-single { display: block; }
}

/* ---------- Commissions / charges / AI: one background colour, no box ---------- */
.bc-wrap { max-width: 900px; margin: 0 auto;}
.bc-card { margin-top: 22px; }
.section .bc-card-cont p{color: black;}
.bc-card h3 {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  text-align: center;
  text-decoration: underline;
  margin-bottom: 4px;
  color: var(--title-color);
}
.bc-card p {
  margin-top: 14px;
  font-family: var(--font-main);
  font-size: 1.1rem;
  line-height: 1.3;
  color: #2b211b;
  text-align: center;
  text-indent: 2.5em;
}
.bc-card p.bc-attention,
.bc-card p.bc-label { text-indent: 0; }
.bc-card .check-list { margin-top: 10px; }
.bc-card .check-list li { font-family: var(--font-main); }
.bc-label { font-weight: 700; }
.bc-attention { color: var(--wax); }
.bc-attention small { font-size: .85rem; }

.bc-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 24px 0 4px;
}
.bc-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 10px;	
}

/* ---------- Contact form title---------- */
.bc-form-title { white-space: normal; max-width: 560px; margin-bottom: 16px; font-size: 1.2rem; }
 
/* ---------- Bookmarks + advertising examples ---------- */
.bc-bookmark { max-width: 500px; margin: 22px auto 0; }
.bc-bookmark img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(28, 22, 19, .16);
}
.bc-ads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 22px auto 0;
  align-items: start;
}
.bc-ads img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(28, 22, 19, .16);
}
@media (max-width: 700px) {
  .bc-ads { grid-template-columns: 1fr; max-width: 420px; gap: 16px; }
}

/* ---------- Footer: two small lines at the bottom ---------- */
.site-footer .footer-bottom p + p { margin-top: 4px; }

/* in-page anchors on cards must clear the sticky header */
article[id] { scroll-margin-top: 76px; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .bc-card p { text-indent: 1.5em; }
}

/* ---------- Facebook line---------- */
.bc-fb { max-width: none; font-size: min(1.1rem, 1.9vw); white-space: nowrap; color: #070504; }
.bc-fb-link { font-size: min(1rem, 2vw); }
.prints-links .bc-fb-link { color: darkred; }
/* on phones one line would be unreadably small, so it wraps there */
@media (max-width: 700px) {
  .bc-fb { white-space: normal; font-size: .90rem; }
  .bc-fb-link { font-size: .90rem; }
}

/* ---------- Elegant serif for the main text (both pages) ---------- */
.authors-copy p, .check-list li, .prints-note, .section-lead,
.trust-agency, .bc-text p, .bc-card p { font-family: var(--font-main); }
.authors-copy p a, .check-list a { font-family: inherit; }


/* ==========================================================================
   Book cover page tweaks (round 5)
   ========================================================================== */
/* title-only strip */
.section-strip { padding: 22px 20px; }
/* cards that continue a text block in the next coloured section */
.bc-card-cont { margin-top: 0; }
/* darker text on the light paper background */
.section-paper .bc-card p,
.section-paper .bc-card li { color: #140e0a; }
/* red bold heading line inside a card paragraph */
.bc-card p.bc-red-title { text-indent: 0; color: var(--wax); }
.bc-card p.bc-red-title strong { color: var(--wax); }

/* ==========================================================================
   Book cover page hero (round 6)
   Text block on the left part of the banner: sentence top-left, title centred
   inside the block, wide pill button at the bottom. Everything is sized in %
   and vw, so it scales together with the picture.
   ========================================================================== */
.hero-bc .hero-text-content {
  position: static;            /* sentence + button are placed against the banner */
  width: 40%;
  margin-left: 4%;             /* room for the social icons on the left */
  padding: 6.2% 0 0;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.hero-bc .hero-text-content h1 {
  align-self: center;
  margin: 0;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
  font-size: clamp(1.05rem, 3vw, 6rem);
}
.hero-bc .hero-subtext {
  left: 4%;
  right: auto;
  top: 1.2%;
  max-width: 60%;
  padding: 0;
  text-align: left;
  font-size: clamp(.55rem, 1.9vw, 3rem);
}
.hero-bc .hero-cta {
  position: absolute;
  left: 4%;
  bottom: 9%;
  width: 40%;
  margin: 0;
  align-self: auto;
}
.hero-bc .hero-link-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-main);
  font-weight: 400;
  font-size: clamp(.8rem, 2.6vw, 4rem);
  padding: .22em 0;
}

/* phones (the HTML swaps in the portrait banner): same layout as the home page -
   title + button sit ON the picture (bottom-left), the sentence goes under it */
@media (max-width: 500px) {
  .hero-bc { --bc-cta: clamp(.9rem, 4.2vw, 1.4rem); }
  .hero-bc .hero-container,
  .hero-bc .hero-text-content { display: contents; }

  .hero-bc .hero-text-content h1 {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: start;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    font-size: clamp(1.1rem, 5vw, 2.2rem);
    margin: 0 16px calc(var(--bc-cta) * 1.6 + 4px + clamp(18px, 4.4vw, 32px)) clamp(14px, 4vw, 28px);
    text-shadow: 0 0 3px #000, 0 0 3px #000, 0 2px 10px rgba(0, 0, 0, .65);
  }
  .hero-bc .hero-cta {
    grid-area: 1 / 1;
    position: static;
    width: auto;
    align-self: end;
    justify-self: start;
    margin: 0 0 clamp(10px, 2.4vw, 18px) clamp(14px, 4vw, 28px);
  }
  .hero-bc .hero-link-btn {
    display: inline-block;
    width: auto;
    padding: .15em 1em;
    font-weight: 400;
    font-size: var(--bc-cta);
  }
  .hero-bc .hero-subtext {
    display: block;
    position: static;
    grid-area: 2 / 1;
    max-width: none;
    margin: 0;
    padding: 14px 18px 18px;
    text-align: center;
    color: #111;
    text-shadow: none;
    font-size: clamp(.95rem, 3.8vw, 1.15rem);
  }
}