/* Replace the repeated hexagram background with a simple Moroccan arch motif. */
[style*="rotate(45 23 23)"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M14 36V23C14 16 19 11 23 9C27 11 32 16 32 23V36' fill='none' stroke='%232E369914' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M18 36V24C18 19 21 16 23 15C25 16 28 19 28 24V36' fill='none' stroke='%232E369914' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 46px 46px !important;
}

[style*="%23D99A2B"][style*="rotate(45 22 22)"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M13 35V22C13 15 18 10 22 8C26 10 31 15 31 22V35' fill='none' stroke='%23D99A2B' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M17 35V24C17 19 20 16 22 15C24 16 27 19 27 24V35' fill='none' stroke='%23E9DFCB' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 44px 44px !important;
}

[style*="%23C2603C66"][style*="rotate(45 22 22)"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M13 35V22C13 15 18 10 22 8C26 10 31 15 31 22V35' fill='none' stroke='%23C2603C66' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M17 35V24C17 19 20 16 22 15C24 16 27 19 27 24V35' fill='none' stroke='%23C2603C44' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 44px 44px !important;
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  header > div {
    padding: 10px 16px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Hamburger toggle button — hidden by default, shown on mobile */
  #nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Nav hidden by default; drops down as overlay when .nav-open is toggled */
  nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    background: rgba(243, 237, 223, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid #E4D9C4 !important;
    box-shadow: 0 12px 30px -12px rgba(36, 31, 26, 0.18) !important;
    z-index: 200 !important;
    padding: 4px 0 8px !important;
    max-width: 100% !important;
    font-size: 12px !important;
  }

  nav.nav-open {
    display: flex !important;
  }

  nav a {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 12px 20px !important;
  }

  nav a + a {
    border-top: 1px solid #E4D9C4 !important;
  }

  main section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* Content padding — source (no space) and React/CSSOM (space + 0px) variants */
  [style*="padding:0 28px"],
  [style*="padding: 0 28px"],
  [style*="padding: 0px 28px"],
  [style*="padding:22px 28px"],
  [style*="padding: 22px 28px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Collapse explicit multi-column grids.
     Source files: no space after colon.
     React/CSSOM output: space after colon — values starting with a digit cover
     all the fr-based layouts; 0.x covers the 0.9fr case. */
  [style*="grid-template-columns:1.4fr 1fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns: 1"],
  [style*="grid-template-columns: 0"] {
    grid-template-columns: 1fr !important;
  }

  /* Auto-fit grids — source and React/CSSOM variants */
  [style*="display:grid"][style*="minmax(250px,1fr)"],
  [style*="display:grid"][style*="minmax(240px,1fr)"],
  [style*="display:grid"][style*="minmax(220px,1fr)"],
  [style*="display: grid"][style*="minmax(250px,1fr)"],
  [style*="display: grid"][style*="minmax(240px,1fr)"],
  [style*="display: grid"][style*="minmax(220px,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Large-padding cards — source and React/CSSOM variants */
  div[style*="padding:44px"],
  div[style*="padding: 44px"],
  div[style*="padding:40px"],
  div[style*="padding: 40px"],
  div[style*="padding:36px"],
  div[style*="padding: 36px"],
  div[style*="padding:34px"],
  div[style*="padding: 34px"],
  div[style*="padding:32px"],
  div[style*="padding: 32px"],
  div[style*="padding:30px"],
  div[style*="padding: 30px"],
  div[style*="padding:28px"],
  div[style*="padding: 28px"],
  div[style*="padding:26px"],
  div[style*="padding: 26px"],
  a[style*="padding:28px"],
  a[style*="padding: 28px"] {
    padding: 24px !important;
  }

  /* Portrait figures */
  figure[style*="width:240px"],
  figure[style*="width: 240px"] {
    width: min(240px, 100%) !important;
  }

  /* Date / info rows that should stack vertically — source and React/CSSOM */
  [style*="justify-content:space-between"][style*="gap:16px"][style*="padding:"],
  [style*="justify-content: space-between"][style*="gap: 16px"][style*="padding:"],
  [style*="justify-content: space-between"][style*="gap: 16px"][style*="padding: "] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Nowrap text — source and React/CSSOM */
  [style*="white-space:nowrap"],
  [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  a[style*="white-space:nowrap"],
  a[style*="white-space: nowrap"] {
    width: 100% !important;
    text-align: center !important;
  }

  /* Inline date spans that should become block — source and React/CSSOM */
  span[style*="margin-left:10px"],
  span[style*="margin-left: 10px"] {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
  }

  /* Side borders inside collapsed grids — source and React/CSSOM */
  [style*="border-left:1px solid #E4D9C4"],
  [style*="border-left: 1px solid #E4D9C4"],
  [style*="border-left: 1px solid rgb(228"],
  [style*="border-right:1px solid #ECE2CE"],
  [style*="border-right: 1px solid #ECE2CE"],
  [style*="border-right: 1px solid rgb(236"] {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid #E4D9C4 !important;
  }

  /* Min-height reductions — source and React/CSSOM */
  [style*="min-height:520px"],
  [style*="min-height: 520px"] {
    min-height: 360px !important;
  }

  [style*="min-height:320px"],
  [style*="min-height: 320px"],
  [style*="min-height:300px"],
  [style*="min-height: 300px"] {
    min-height: 220px !important;
  }

  /* Wide tables */
  table[style*="min-width:520px"],
  table[style*="min-width: 520px"] {
    min-width: 440px !important;
  }
}

@media (max-width: 420px) {
  h1 {
    overflow-wrap: anywhere;
  }

  [style*="font-size:18px"],
  [style*="font-size: 18px"] {
    font-size: 16px !important;
  }

  [style*="font-size:17px"],
  [style*="font-size: 17px"] {
    font-size: 15.5px !important;
  }
}