/* ---------- 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;
  /* width / height of banner.jpg. If the banner looks cropped or has a gap,
     put the real pixel size of your image here. */
  --banner-ratio: 1602 / 531;
}

/* ---------- 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: .88rem;
  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 is swapped for the .mobile-banner <img>.
   ========================================================================== */
.hero-section {
  position: relative;
  display: grid;
  background: var(--bg-main);
  --cta-size: clamp(.85rem, 2.2vw, 1.8rem);
}
/* the picture lives in its own grid cell and keeps the banner's proportions */
.hero-section::before {
  content: "";
  grid-area: 1 / 1;
  aspect-ratio: var(--banner-ratio);
  background: url('img/landing/banner.jpg') center top / cover no-repeat;
}

.mobile-banner { display: none; }

.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: the portrait banner-mobile.jpg replaces the wide picture */
@media (max-width: 500px) {
  .hero-section { --cta-size: clamp(1rem, 5.4vw, 1.7rem); }
  .hero-section::before { display: none; }
  .hero-section .mobile-banner { display: block; grid-area: 1 / 1; }
  .mobile-banner img { width: 100%; height: auto; }
  .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: 560px;
  margin: 8px auto 0;
  font-size: .85rem;
  color: #4a3c33;
}
.section-lead-light { color: #d8c9b6; }

/* ---------- Authors / Music ---------- */
.authors-grid {
  max-width: 1000px;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 30px;
  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: 70ch; font-size: .87rem; }

.check-list { list-style: none; margin: 14px 0 0; display: grid; gap: 2px; }
.check-list li { padding-left: 20px; position: relative; font-size: .84rem; }
.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; }
.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; }

.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(.72rem, 1.9vw, .83rem); }
  .check-list           { margin-top: 10px; }
  .check-list li        { font-size: clamp(.7rem, 1.85vw, .8rem); padding-left: 16px; }
  .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: 10px 16px; }
  .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%; }
}

/* ---------- 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) {
  .authors-grid {
    grid-template-columns: minmax(0, 300px) fit-content(520px);
    justify-content: center;
    column-gap: 28px;
  }
  .authors-grid-reverse {
    grid-template-columns: fit-content(520px) minmax(0, 300px);
  }
  .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; }