:root {
    --burgundy: #4A0C2C;
    --cream: #F4DDBA;
    --gold: #D47A41;
    --orange: #E98A51;
    --dark-text: #6A2B1A;
    --body-text: #533A2A;
    --white: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background: var(--cream);
    font-family: sans-serif;
    color: var(--body-text);
    -webkit-font-smoothing: antialiased;
}

.page {
    width: 100%;
    padding: 60px;
    position: relative;
}

.page.burgundy {
    background: var(--burgundy);
    color: var(--cream);
}

.page.cream {
    background: var(--cream);
    color: var(--body-text);
  
}

/* -------------------------------------------------------------- */
/* GLOBAL TEXT STYLES */
/* -------------------------------------------------------------- */

.page p,
.page .descriptor,
.page li {
    font-size: 18px;
    line-height: 1.6;
    color: var(--body-text);
    max-width: 680px;
    text-align: justify;
}

.descriptor { opacity: 0.95; }

.page.burgundy p,
.page.burgundy li { color: #f3dcc4; }

.contact-line {
    display: flex;
    align-items: center;     /* vertically centers the icon and text */
    gap: 12px;               /* space between icon and email text */
    margin: 10px 0;
    font-size: 18px;
    color: var(--gold);
    font-weight: bold;
}

.contact-line a {
    color: inherit;          /* inherits the gold color and bold weight */
    text-decoration: none;
}

.icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(214, 37, 202);
    color: black;
    flex-shrink: 0;          /* prevents icon from shrinking */
    object-fit: contain;     /* ensures the image fits nicely inside the circle if needed */
}



/* -------------------------------------------------------------- */
/* PAGE 1 – HERO */
/* -------------------------------------------------------------- */

#page-1 .content.two-col {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.left-col, .right-col { flex: 2; }

.press-title {
    font-family: "Playfair Display", serif;
    font-size: 42px;
    color: #EFCDE7;
    margin-bottom: 6px;
    word-spacing: 1px;
   
}

.press-date {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 60px;
}

.threads-legacy-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Playfair Display",serif;
    color: var(--burgundy);
    line-height: 1;
    padding-top: 30px;
}

.logo-responsive {
    width: 80%;
    max-width: 100%;
    height: auto;
    display: block;
    padding-top: 40px;
}

.thread-text, .legacy-text {
    font-size: 72px;
    margin: 0;
}

.of-script {
    font-family: "Allura, cursive";
    font-size: 120px;
    color: var(--gold);
    margin: -20px 0;
    line-height: 1;
}

.subtitle {
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 12px;
    color: var(--gold);
}

.descriptor {
    font-size: 18px;
    color: var(--dark-text);
}

/* -------------------------------------------------------------- */
/* PAGE 2 – INTRO, VISION, OBJECTIVES */
/* -------------------------------------------------------------- */

#page-2 {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

#page-2 .col {
    width: 32%;
}

#page-2 h2 {
    font-family: "Playfair Display", serif;
    color: var(--dark-text);
    font-size: 26px;
    margin-bottom: 14px;
}

#page-2 p, #page-2 li {
    font-size: 17px;
    line-height: 1.58;
}

#page-2 ul { padding-left: 20px; }

/* -------------------------------------------------------------- */
/* PAGE 3 – WHY PARTNER & D/SPHERE */
/* -------------------------------------------------------------- */

#page-3 .accent {
    font-family:"Playfair Display", serif;
    font-size: 32px;
    color: var(--gold);
    margin-bottom: 18px;
    word-spacing: 2px;
}

#page-3 .two-col {
    display: flex;
    gap: 50px;
}

#page-3 .two-col > div { width: 50%; }

#page-3 ul {
    padding-left: 20px;
    margin-bottom: 20px;
    line-height: 26px;
}

#page-3 p {
    line-height: 26px;
}

/* Page 3 image overrides */
#page-3 { padding: 0; }
#page-3 .page3-wrapper { display: flex; }
#page-3 .page3-image-left img { width: 340px; height: 850px; display: block; }
#page-3 .page3-content { padding: 60px; width: 100%; }

/* -------------------------------------------------------------- */
/* PAGE 4 – SPONSORSHIP TIERS (FULLY RESPONSIVE) */
/* -------------------------------------------------------------- */

#page-4 {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding-right: 40px;
    overflow-x: hidden;
}

.tiers-left {
    flex: 0 0 420px;
    position: relative;
}

.big-of-visual {
    position: absolute;
    top: -20px;
    left: -10px;
    font-family: "Allura, cursive";
    font-size: 220px;
    color: var(--gold);
    opacity: 0.08;
    pointer-events: none;
}

.tiers-heading {
    font-family: "Playfair Display", serif;
    font-size: 44px;
    color: var(--dark-text);
    margin-bottom: 10px;
}

.tiers-sub {
    font-size: 18px;
    max-width: 360px;
}


.tier {
  position: relative;
  padding-left: 90px;
}

.tier-num {
  position: absolute;
  left: -20px;
  top: -18px;
  font-family: "Allura", cursive !important;
  font-size: clamp(64px, 10vw, 130px);
  color: var(--gold);
  opacity: 0.35;
}



.tier h3 {
    font-family: "Playfair Display", serif;
    font-size: 26px;
    color: var(--dark-text);
    margin-bottom: 10px;
}

.tier ul { padding-left: 20px; }

.tiers-right {
    flex: 1;
    min-width: 300px;
}

/* -------------------------------------------------------------- */
/* PAGE 5 – STRATEGIC CATEGORIES */
/* -------------------------------------------------------------- */

#page-5 {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    padding-left: 20px;
}

#page-5 ul {
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

.burgundy-left {
    width: 60%;
}

.burgundy-left h2 {
    font-family: "Playfair Display", serif;
    font-size: 28px;
    color: var(--gold);
    margin-bottom: 15px;
}

.burgundy-left li {
    font-size: 18px;
    color: #f3dcc4;
}

.pattern-panel {
    width: 40%;
    min-height: 500px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200'%3E%3Ctext x='8' y='120' font-family='Allura' font-size='92' fill='%23D47A41' opacity='0.9'%3Eof%3C/text%3E%3Ctext x='80' y='190' font-family='Allura' font-size='92' fill='%234A0C2C' opacity='0.5'%3Eof%3C/text%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 200px;
}

/* Page 5 image overrides */
#page-5 { padding: 0; }
#page-5 .page5-wrapper { display: flex; width: 100%; }
#page-5 .page5-image-right img { width: 360px; height: 850px; display: block; }
#page-5 .burgundy-left { padding: 60px; width: 100%; }

/* -------------------------------------------------------------- */
/* PAGE 6, 7, 8 – REMAINING PAGES */
/* -------------------------------------------------------------- */

#page-6 h2, #page-7 h2, #page-8 h2 {
    font-family:"Playfair Display", serif;
    font-size: 32px;
    margin-bottom: 20px;
}

#page-6 h2, #page-6 li { color: var(--gold); }
#page-7 h2 { color: var(--dark-text); }
#page-8 h2 { color: var(--dark-text); }

#page-6 li, #page-7 li { font-size: 18px; line-height: 1.6; }
#page-6 ul, #page-7 ul, #page-8 ul { padding-left: 20px; }

#page-8 {
    display: flex;
    gap: 50px;
}

.contact-left { width: 60%; }
.contact-right { width: 40%; display: flex; align-items: flex-end; justify-content: flex-end; }

.footer-logo-lines {
    font-family: "Playfair Display", serif;
    font-size: 60px;
    color: var(--burgundy);
    line-height: 0.9;
}

.footer-logo-lines .logo-of {
    font-family: "Allura, cursive";
    font-size: 85px;
    color: var(--gold);
    display: block;
    margin: -25px 0 -18px;
}

.footer-logo-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
}

/* -------------------------------------------------------------- */
/* RESPONSIVE ADJUSTMENTS */
/* -------------------------------------------------------------- */

@media (max-width: 1100px) {
    .page p, .page .descriptor, .page li {
        font-size: 17px;
        line-height: 1.58;
    }

    #page-2 { flex-direction: column; gap: 25px; }
    #page-2 .col { width: 100%; }

    #page-4 { flex-direction: column; gap: 30px; }
    .tiers-left { flex: none; width: 100%; max-width: 420px; }
    .tiers-right { min-width: auto; }

    #page-8 { flex-direction: column; gap: 20px; }
    .contact-left, .contact-right { width: 100%; }
    .contact-right { justify-content: flex-start; margin-top: 20px; }
    .footer-logo-lines { text-align: left; }

    .footer-logo-img { max-width: 380px; }
}

@media (max-width: 900px) {
    .page {
        padding: 40px 30px;
        overflow-x: hidden;
    }

    .page p, .page .descriptor, .page li {
        font-size: 18px;
        line-height: 1.55;
        text-align: left;
    }

    #page-1 .content.two-col { flex-direction: column; text-align: center; }

    #page-3, #page-3 .page3-wrapper { flex-direction: column; }
    #page-3 .page3-image-left img { display: none; }
    #page-3 .page3-content { padding: 40px 20px; }

    #page-5, #page-5 .page5-wrapper { flex-direction: column-reverse; }
    #page-5 .page5-image-right img { display: none; }
    #page-5 .burgundy-left { padding: 40px 20px; padding-top: 20px; }

    .logo-responsive { display: none; }

    .tier { padding-left: 60px; }
    /* .press-title {
        font-size: 32px;
        padding: 15px;
    }
    .subtitle{
        padding: 15px;
    }
    .descriptor{
         padding: 15px;
    } */
    
}

@media (max-width: 600px) {
    .page p, .page .descriptor, .page li {
        font-size: 18px;
        line-height: 1.5;
    }

    .of-script { font-size: 70px; }
    .press-title {
        font-size: 32px;
        /* padding: 15px; */
    }
    /* .subtitle{
        padding: 15px;
    }
    .descriptor{
         padding: 15px;
    } */
    .tiers-heading { font-size: 34px;  word-spacing: 1px;}
    .pattern-panel { background-size: 130px 150px; }
    .footer-logo-img { max-width: 280px; }
}


/* ===============================
   PAGE 1 – FULL WIDTH DESKTOP
================================ */

@media (min-width: 901px) {
     #page-4 { padding-right: 20px; padding-left: 40px; gap: 24px; }
    #page-1 {
        padding-left: 0;
        padding-right: 0;
    }

    #page-1 .content.two-col {
        max-width: 100%;
        width: 100%;
        padding-left: 80px;
        padding-right: 80px;
    }

    /* Remove text width restriction ONLY on page 1 */
    #page-1 p,
    #page-1 .descriptor {
        max-width: none;
    }

     #page-4 {
        justify-content: center;
    }

    .tiers-right {
        max-width: 760px;
        margin: 0 auto;
    }
    #page-3 .page3-content {
        max-width: 760px;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {
    #page-1 .content.two-col {
        padding-left: 100px;
        padding-right: 10 0px;
    }
    #page-3 .page3-content,
    .tiers-right {
        max-width: 820px;
    }
}


@media (min-width: 1024px) {
  .tier-num {
    left: -40px;
  }
}

@media (min-width: 1440px) {
  .tier-num {
    left: -60px;
  }
}