:root{--ink:#100b08;--cream:#f3e3c6;--paper:#d9c29b;--gold:#d99b39}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--cream);font-family:Georgia,"Times New Roman",serif}a{color:inherit;text-decoration:none}.site-header{position:absolute;z-index:10;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:24px clamp(22px,5vw,78px);border-bottom:1px solid rgba(243,227,198,.18);background:linear-gradient(to bottom,rgba(10,6,4,.88),transparent)}.brand{display:flex;align-items:center;gap:12px;font-family:Arial,sans-serif;font-size:.8rem;font-weight:800;letter-spacing:.16em}.brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}nav{display:flex;align-items:center;gap:clamp(16px,2.3vw,36px)}nav a{font-family:Arial,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}nav a:hover{color:var(--gold)}.nav-button{border:1px solid var(--gold);padding:12px 17px}.hero{position:relative;min-height:820px;height:100svh;overflow:hidden;display:flex;align-items:center}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% center}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,6,4,.93) 0%,rgba(10,6,4,.63) 34%,rgba(10,6,4,.05) 68%),linear-gradient(0deg,rgba(10,6,4,.86) 0%,transparent 35%,rgba(10,6,4,.25) 100%)}.hero-content{position:relative;z-index:2;width:min(620px,88%);margin-left:clamp(24px,7vw,110px);padding-top:55px}.kicker,.section-mark{color:var(--gold);font-family:Arial,sans-serif;font-size:.73rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase}h1{margin:18px 0 12px;font-size:clamp(5rem,10vw,9.2rem);line-height:.72;letter-spacing:-.065em;text-shadow:0 5px 30px #000}h1 span{color:var(--gold);font-size:.66em;letter-spacing:.02em}.tagline{margin:25px 0 34px;font-size:clamp(1.3rem,2vw,1.75rem);font-style:italic}.hero-actions{display:flex;flex-wrap:wrap;gap:14px}.button{display:inline-block;padding:16px 23px;font-family:Arial,sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--gold);color:var(--ink)}.primary:hover{background:#f0b555}.secondary{border:1px solid rgba(243,227,198,.7);background:rgba(10,6,4,.28)}.disabled{opacity:.55;border:1px solid var(--gold);cursor:not-allowed}.scroll-cue{position:absolute;z-index:2;bottom:26px;left:50%;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateX(-50%);font-family:Arial,sans-serif;font-size:.62rem;letter-spacing:.2em}.scroll-cue b{color:var(--gold);font-size:1.5rem}.section{padding:110px clamp(24px,7vw,110px)}.welcome{text-align:center;background:#160d08}h2{margin:13px 0 22px;font-size:clamp(2.6rem,5vw,5rem);line-height:1.03;letter-spacing:-.035em}h2 em{color:var(--gold);font-weight:400}.lead{max-width:760px;margin:auto;color:var(--paper);font-size:1.18rem;line-height:1.8}.campaigns{background:radial-gradient(circle at 85% 10%,rgba(169,67,34,.16),transparent 30%),var(--ink)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:52px}.section-heading>p{max-width:410px;color:var(--paper);line-height:1.7}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.campaign-card{position:relative;min-height:390px;padding:38px;border:1px solid rgba(217,155,57,.28);background:linear-gradient(145deg,#2d170e,#170d09)}.campaign-card>p:first-of-type{color:var(--gold);font:700 .68rem Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase}.campaign-card h3{margin:50px 0 18px;font-size:2.4rem}.card-number{position:absolute;right:28px;top:22px;color:rgba(217,155,57,.24);font-size:3rem;font-weight:800}.gold-rule{width:44px;height:2px;background:var(--gold)}.card-copy{color:var(--paper);line-height:1.7}.campaign-card a{position:absolute;bottom:34px;color:var(--gold);font:800 .7rem Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase}.dudes{text-align:center;background:#201008}.member-list{max-width:900px;margin:55px auto 0;border-top:1px solid rgba(217,155,57,.3)}.member{display:grid;grid-template-columns:80px 1fr;align-items:center;padding:17px 20px;border-bottom:1px solid rgba(217,155,57,.2);text-align:left}.member span{color:var(--gold);font:700 .68rem Arial,sans-serif;letter-spacing:.15em}.member strong{font-size:1.5rem}.watch{display:flex;align-items:center;justify-content:space-between;gap:60px;background:var(--cream);color:var(--ink)}.watch div{max-width:730px}.watch p:not(.section-mark){font-size:1.1rem;line-height:1.7}.game-night{text-align:center;background:radial-gradient(circle at center,#3c1d0f,var(--ink) 66%)}.game-night p:not(.section-mark){max-width:650px;margin:0 auto 30px;color:var(--paper);line-height:1.7}footer{display:flex;justify-content:space-between;gap:20px;padding:35px clamp(24px,7vw,110px);border-top:1px solid rgba(217,155,57,.25);color:#aa9476;font:.69rem Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}@media(max-width:820px){.site-header{padding:18px 20px}.brand img{width:48px;height:48px}.brand span{display:none}nav a:not(.nav-button){display:none}.hero{min-height:760px}.hero-art{object-position:62% center}.hero-shade{background:linear-gradient(0deg,rgba(10,6,4,.95) 5%,rgba(10,6,4,.38) 74%,rgba(10,6,4,.55))}.hero-content{align-self:end;margin:0 24px 115px;padding:0}h1{font-size:clamp(4.8rem,22vw,7rem)}.section{padding:80px 24px}.section-heading,.watch{flex-direction:column;align-items:flex-start}.card-grid{grid-template-columns:1fr}.campaign-card{min-height:350px}footer{flex-direction:column;text-align:center}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}


/* =========================================================
   OLD DUDES CONTACT SECTION
   ========================================================= */

.contact{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(169,67,34,.18),
            transparent 32%
        ),
        #160d08;

    border-top:1px solid rgba(217,155,57,.18);
    border-bottom:1px solid rgba(217,155,57,.18);
}

.contact-copy{
    max-width:720px;
}

.contact h2{
    margin-bottom:18px;
}

.contact-copy p:not(.section-mark){
    color:var(--paper);
    font-size:1.08rem;
    line-height:1.7;
}

.contact-note{
    opacity:.72;
    font-style:italic;
}

.contact-actions{
    min-width:260px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
}

.contact-email{
    color:var(--gold);

    font-family:Arial,sans-serif;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
}

.contact-email:hover{
    color:#f0b555;
}


@media(max-width:820px){

    .contact{
        flex-direction:column;
        align-items:flex-start;
        gap:30px;
    }

    .contact-actions{
        min-width:0;
    }
}


/* =========================================================
   CAMPAIGN COMING SOON
   ========================================================= */

.campaign-card.coming-soon{
    opacity:.48;
    filter:saturate(.55);
    cursor:default;
}

.campaign-card.coming-soon:hover{
    transform:none;
    border-color:rgba(217,155,57,.28);
}

.campaign-card.coming-soon::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(5,4,3,.10);
    pointer-events:none;
}

.coming-soon-label{
    position:absolute;
    bottom:34px;
    z-index:2;

    color:#8f8069;

    font-family:Arial,sans-serif;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}



/* =========================================================
   WHOLE CARD NAVIGATION
   ========================================================= */

.campaign-card.whole-card-link{
    cursor:pointer;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.campaign-card.whole-card-link:hover{
    transform:translateY(-4px);
    border-color:rgba(217,155,57,.62);
    background:linear-gradient(145deg,#3a1d10,#1c0f09);
}

.campaign-card.whole-card-link:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:4px;
}



/* =========================================================
   PHONE PORTRAIT OPTIMIZATION
   Keeps desktop + landscape behavior unchanged.
   ========================================================= */

@media (max-width:600px) and (orientation:portrait){

    /*
       Header
    */
    .site-header{
        padding:16px 18px;
    }

    .brand img{
        width:46px;
        height:46px;
    }

    .nav-button{
        padding:11px 15px;
        font-size:.66rem;
        letter-spacing:.11em;
    }


    /*
       Homepage hero
    */
    .hero{
        min-height:100svh;
        height:auto;
        align-items:flex-end;
    }

    /*
       Portrait crop:
       keeps the central table/person composition visible
       without pushing everything too far to one side.
    */
    .hero-art{
        object-position:56% center;
    }

    /*
       Slightly stronger lower gradient improves type readability
       without hiding the artwork.
    */
    .hero-shade{
        background:
            linear-gradient(
                0deg,
                rgba(10,6,4,.97) 0%,
                rgba(10,6,4,.76) 35%,
                rgba(10,6,4,.25) 72%,
                rgba(10,6,4,.52) 100%
            );
    }

    .hero-content{
        width:auto;
        max-width:none;

        margin:
            0
            22px
            105px;

        padding:0;
    }

    .kicker{
        max-width:360px;
        font-size:.65rem;
        line-height:1.45;
        letter-spacing:.18em;
    }

    /*
       Main fix:
       current mobile rule allows the title to get enormous.
    */
    h1{
        margin:14px 0 15px;

        font-size:
            clamp(
                3.65rem,
                17vw,
                5.3rem
            );

        line-height:.78;
        letter-spacing:-.055em;
    }

    h1 span{
        font-size:.62em;
    }

    .tagline{
        margin:18px 0 25px;

        font-size:
            clamp(
                1.15rem,
                5vw,
                1.45rem
            );

        line-height:1.35;
    }

    .hero-actions{
        display:grid;
        grid-template-columns:1fr;
        gap:11px;
        width:100%;
        max-width:375px;
    }

    .hero-actions .button{
        width:100%;
        padding:15px 18px;
        text-align:center;
    }

    .scroll-cue{
        bottom:22px;
        gap:4px;
        font-size:.57rem;
    }

    .scroll-cue b{
        font-size:1.25rem;
    }


    /*
       General homepage sections
    */
    .section{
        padding:
            65px
            21px;
    }

    h2{
        font-size:
            clamp(
                2.25rem,
                11vw,
                3.5rem
            );
    }

    .lead{
        font-size:1.04rem;
        line-height:1.7;
    }

    .campaign-card{
        min-height:320px;
        padding:30px 26px;
    }

    .campaign-card h3{
        margin-top:42px;
        font-size:2rem;
    }

    .member{
        grid-template-columns:58px 1fr;
        padding:15px 12px;
    }

    .member strong{
        font-size:1.3rem;
    }

    footer{
        padding:
            30px
            20px;
    }
}


/* =========================================================
   MOBILE NAV MENU
   ========================================================= */

.mobile-menu-toggle{
    display:none;
}

@media(max-width:820px){

    .mobile-menu-toggle{
        display:block;

        margin-left:auto;

        padding:11px 15px;

        border:1px solid var(--gold);
        background:rgba(10,6,4,.45);
        color:var(--cream);

        font-family:Arial,sans-serif;
        font-size:.67rem;
        font-weight:800;
        letter-spacing:.13em;
        text-transform:uppercase;

        cursor:pointer;
    }

    .site-header{
        flex-wrap:wrap;
    }

    .site-header nav{
        display:none;

        width:100%;
        margin-top:14px;

        flex-direction:column;
        align-items:stretch;
        gap:0;

        border:1px solid rgba(217,155,57,.35);
        background:rgba(16,11,8,.97);

        box-shadow:0 14px 30px rgba(0,0,0,.35);
    }

    .site-header nav.mobile-open{
        display:flex;
    }

    .site-header nav a,
    .site-header nav a:not(.nav-button){
        display:block;

        width:100%;

        padding:14px 16px;

        border-bottom:1px solid rgba(217,155,57,.15);

        font-size:.68rem;
        letter-spacing:.12em;

        text-align:left;
    }

    .site-header nav .nav-button{
        border:0;
        border-top:1px solid rgba(217,155,57,.35);
        background:rgba(217,155,57,.10);
        color:var(--gold);
    }

    .site-header nav a:last-child{
        border-bottom:0;
    }
}

/* =========================================================
   HOMEPAGE — READABLE STORY CALLOUT
   ========================================================= */

.homepage-story-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 1.5rem 0 2rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(218, 163, 54, 0.58);
  background:
    linear-gradient(
      110deg,
      rgba(91, 28, 15, 0.72),
      rgba(14, 15, 17, 0.95) 68%
    );
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.26);
}

.homepage-story-callout-copy {
  max-width: 48rem;
}

.homepage-story-callout .section-mark {
  margin-bottom: 0.45rem;
}

.homepage-story-callout h3 {
  margin: 0;
  color: #f1ead9;
  font-size: clamp(1.55rem, 2.4vw, 2.4rem);
  line-height: 1.05;
}

.homepage-story-callout h3 em {
  color: #d9a336;
  font-weight: inherit;
}

.homepage-story-callout-copy > p:last-child {
  max-width: 44rem;
  margin: 0.7rem 0 0;
  color: rgba(241, 234, 217, 0.82);
  line-height: 1.6;
}

.homepage-story-callout .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .homepage-story-callout {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.15rem;
    padding: 1.15rem;
  }

  .homepage-story-callout .button {
    width: 100%;
    text-align: center;
    white-space: normal;
  }
}