:root {
    /* The 5 anchors */
    --white:   #FFFFFF;
    --gray:    #E5E5E5;   /* light neutral for pills, borders, surfaces */
    --orange:  #FCA311;   /* accent / CTA */
    --navy:    #14213D;   /* primary brand / dark sections */
    --black:   #000000;   /* deepest dark / problem section */

    /* Tonal variations derived strictly from the 5 anchors */
    --gray-soft:   #F2F2F2;   /* halfway between white & gray, for subtle surfaces */
    --gray-strong: #C7C7C7;   /* darker gray, used for muted text on light bg */

    --orange-strong: #E08F00; /* darker orange for hover */
    --orange-soft:   #FEE7B6; /* lightened orange for tints (10% mix) */

    --navy-strong: #0D1729;   /* darker navy for elevation/contrast on navy bg */
    --navy-soft:   #1F3057;   /* lighter navy for hover / cards on navy bg */
    --navy-mute:   #4A5878;   /* muted navy for body text on dark surfaces */

    /* Semantic aliases — mapped onto the 5-color palette */
    --bg:           var(--white);
    --surface:      var(--white);
    --surface-alt:  var(--gray);
    --border:       var(--gray);
    --border-soft:  var(--gray-soft);

    --text:         var(--black);
    --text-muted:   #595959;          /* tinted black for body copy */
    --text-faint:   #8A8A8A;          /* lightest readable gray */

    /* Backwards-compatible aliases (existing CSS uses these names) */
    --cream:    var(--gray);
    --cream-2:  var(--gray-strong);
    --ink-900:  var(--black);
    --ink-700:  #2B2B2B;
    --ink-500:  #595959;
    --ink-300:  #8A8A8A;
    --ink-200:  var(--gray);
    --ink-100:  var(--gray-soft);

    /* Brand scale — all derived from the single navy anchor */
    --brand-900: #0D1729;
    --brand-800: var(--navy);
    --brand-700: #1F3057;
    --brand-600: #2B3F6E;
    --brand-500: var(--navy);
    --brand-300: #4A5878;

    /* Orange scale */
    --orange-500: var(--orange);
    --orange-600: var(--orange-strong);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --container: 1200px;
  }

.brochure-card {
    background: var(--white);
    border: 1px solid var(--gray);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .brochure-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15,23,42,0.10);
  }
  
   .brochure-img {
    position: relative;
    display: grid; place-items: center;
    color: rgba(255,255,255,0.6);
    border-radius: var(--radius-lg);
    margin: 14px;
    overflow: hidden;
  }
  /*.brochure-img {*/
  /*  aspect-ratio: 4 / 3;*/
  /*  background: linear-gradient(135deg, #1F3057, #14213D);*/
  /*  position: relative;*/
  /*  display: grid; place-items: center;*/
  /*  color: rgba(255,255,255,0.6);*/
  /*  border-radius: var(--radius-lg);*/
  /*  margin: 14px;*/
  /*  overflow: hidden;*/
  /*}*/
  /*.brochure-img::after {*/
  /*  content: '';*/
  /*  position: absolute; inset: 0;*/
  /*  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.04) 18px 19px);*/
  /*  pointer-events: none;*/
  /*}*/
  .brochure-img .ph { position: relative; z-index: 1; text-align: center; }
  .brochure-img .ph-icon {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
  }
  .brochure-img .ph-label,
  .brochure-img .ph-sub {
    color: rgba(255,255,255,0.6);
  }

  /* "Best Seller" style top-left badge */
  .brochure-badge {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.04em;
  }
  .brochure-badge svg { width: 12px; height: 12px; stroke-width: 2; }

  /* Top-right circular university crest */
  .brochure-crest {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--white);
    display: grid; place-items: center;
    color: var(--navy);
    box-shadow: 0 2px 8px rgba(0,0,0,0.20);
  }
  .brochure-crest svg { width: 22px; height: 22px; }

  /* Card body */
  .brochure-body {
    padding: 6px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
  }
  .brochure-body h3 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    color: var(--ink-900);
    letter-spacing: -0.01em;
    line-height: 1.3;
    min-height: calc(1.3em * 2);    /* reserve 2 lines so all titles align */
  }
  /*.brochure-tagline {*/
  /*  font-size: 1px;*/
  /*  color: var(--ink-300);*/
  /*  margin: 0px 0 0;*/
  /*}*/
  .brochure-body p {
    font-size: 25px;
    color: var(--ink-500);
    line-height: 1.55;
    /*margin: 12px 0 18px;*/
    flex: 1;
  }
  .brochure-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    gap: 12px;
    flex-wrap: wrap;
  }
  .brochure-edition {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--gray);
    border-radius: 999px;
    font-size: 23px;
    font-weight: 600;
    color: var(--ink-900);
  }
  .brochure-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 28px 8px 28px;
    background: var(--black);
    color: white;
    border-radius: 999px;
    font-size: 25px;
    font-weight: 500;
    transition: background-color .2s ease, transform .2s ease, padding .2s ease;
  }
  .brochure-download:hover {
    background: var(--brand-800);
    transform: translateY(-1px);
    padding-left: 22px;
  }
  .brochure-download .arrow-circle {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--white);
    color: var(--black);
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
  }
  .brochure-download:hover .arrow-circle {
    transform: rotate(8deg);
  }
  .brochure-download .arrow-circle svg {
    width: 14px; height: 14px;
    stroke-width: 2.4;
  }