:root{
    --cream:#F7F1E9;
    --cream-2:#F2EBE0;
    --ink:#2A2119;
    --gray:#6E6660;
    --gray-light:#8B837C;
    --gold:#AD8552;
    --gold-soft:#C9A671;
    --border:#E6DCCC;
    --white:#FFFFFF;
  }

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

  body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background:var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{
    font-family:'Playfair Display', Georgia, serif;
    font-weight:800;
    color:var(--ink);
    line-height:1.15;
  }

  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 40px;
  }

  /* ---------- IMAGE PLACEHOLDER SYSTEM ---------- */
  .img-slot{
    position:relative;
    overflow:hidden;
    background:#c9c2b6;
    border-radius:14px;
  }
  .img-slot img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .img-slot .tag{
    position:absolute;
    bottom:14px;
    left:14px;
    background:rgba(30,23,17,0.72);
    color:var(--cream);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.05em;
    text-transform:uppercase;
    padding:7px 12px;
    border-radius:6px;
    backdrop-filter:blur(2px);
  }

  /* ---------- NAV ---------- */
  header.nav{
    border-bottom:1px solid var(--border);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 40px;
    max-width:1180px;
    margin:0 auto;
  }
  .nav-brand{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .logo{
    font-family:'Archivo Black', 'Inter', sans-serif;
    font-weight:400;
    font-size:20px;
    line-height:0.8;
    letter-spacing:-0.01em;
    text-transform:uppercase;
    transform:skewX(-6deg);
    color:var(--ink);
  }
  .artist-credit{
    font-size:12px;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--gray);
    padding-left:16px;
    border-left:1px solid var(--border);
  }
  .artist-credit a{
    color:var(--ink);
    text-decoration:underline;
  }
  .logo-img{
    height:36px;
    width:auto;
    display:block;
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap:36px;
  }
  .nav-links a.link{
    font-size:15px;
    font-weight:500;
    color:var(--ink);
    opacity:0.85;
    text-decoration:none;
  }
  @media (min-width: 861px){
    .nav-links a.link:hover{
      opacity:1;
      text-decoration:underline;
      text-underline-offset:4px;
    }
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:15px;
    padding:13px 26px;
    border-radius:8px;
    border:1.5px solid var(--ink);
    cursor:pointer;
    transition:transform .15s ease, opacity .15s ease;
    white-space:nowrap;
  }
  .btn:hover{ opacity:0.88; }
  .btn-dark{
    background:var(--ink);
    color:var(--cream);
  }
  .btn-outline{
    background:transparent;
    color:var(--ink);
    border-color:var(--ink);
  }
  .btn:disabled{
    opacity:0.6;
    cursor:default;
  }

  /* ---------- APPLY MODAL ---------- */
  .modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(42,33,25,0.55);
    backdrop-filter:blur(2px);
    z-index:100;
    align-items:flex-start;
    justify-content:center;
    padding:64px 20px;
    overflow-y:auto;
  }
  .modal-overlay.open{ display:flex; }
  .modal-card{
    background:var(--cream);
    border-radius:18px;
    max-width:560px;
    width:100%;
    padding:40px;
    position:relative;
    box-shadow:0 24px 60px rgba(42,33,25,0.28);
  }
  .modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1.5px solid var(--border);
    background:transparent;
    color:var(--ink);
    font-size:18px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease;
  }
  .modal-close:hover{ background:var(--cream-2); }
  .modal-card h2{
    font-size:28px;
    font-weight:400;
    margin-bottom:8px;
    padding-right:30px;
  }
  .modal-title-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:8px;
  }
  .modal-title-row h2{
    margin-bottom:0;
  }
  .modal-title-icon{
    width:42px;
    height:42px;
    object-fit:contain;
    flex-shrink:0;
  }
  .modal-card .modal-sub{
    font-size:15px;
    color:var(--gray);
    margin-bottom:28px;
    line-height:1.5;
  }
  .form-group{
    margin-bottom:20px;
  }
  .form-group label{
    display:block;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--ink);
    margin-bottom:7px;
  }
  .form-group .field-hint{
    font-weight:500;
    color:var(--gray-light);
    text-transform:none;
    letter-spacing:0;
  }
  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group textarea{
    width:100%;
    font-family:'Inter', sans-serif;
    font-size:15px;
    color:var(--ink);
    background:var(--white);
    border:1.5px solid var(--border);
    border-radius:8px;
    padding:12px 14px;
    transition:border-color .15s ease;
  }
  .form-group input[type="text"]:focus,
  .form-group input[type="email"]:focus,
  .form-group textarea:focus{
    outline:none;
    border-color:var(--ink);
  }
  .form-group textarea{
    resize:vertical;
    min-height:90px;
  }
  .social-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .social-grid .form-group{ margin-bottom:0; }
  .social-note{
    font-size:12px;
    color:var(--gray-light);
    margin:8px 0 0;
  }
  .form-error{
    display:none;
    font-size:13px;
    color:#B3441E;
    margin-top:8px;
  }
  .form-error.show{ display:block; }
  .modal-submit{
    width:100%;
    margin-top:8px;
  }
  .modal-success-wrap{
    text-align:center;
    padding:20px 0 8px;
  }
  .modal-success-wrap .success-mark{
    width:64px;
    height:64px;
    object-fit:contain;
    display:block;
    margin:0 auto 18px;
  }
  .modal-success-wrap h2{ margin-bottom:10px; }
  .modal-success-wrap p{
    font-size:15px;
    color:var(--gray);
    line-height:1.6;
  }
  .modal-form-wrap.hide, .modal-success-wrap.hide{ display:none; }

  /* ---------- HERO ---------- */
  .hero{
    padding:80px 0 0;
  }
  .hero-inner{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:32px;
    align-items:center;
  }
  .eyebrow{
    font-size:13px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:22px;
  }
  .hero h1{
    font-size:56px;
    margin-bottom:26px;
  }
  .hero p.lede{
    font-size:18px;
    line-height:1.6;
    color:var(--gray);
    max-width:480px;
    margin-bottom:34px;
  }
  .hero-ctas{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .invite-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 14px;
    border-radius:999px;
    background:var(--cream-2);
    border:1px solid var(--border);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--gray);
    white-space:nowrap;
  }
  .invite-badge-arrow{
    color:#D2445E;
    flex-shrink:0;
  }
  .hero-image{
    aspect-ratio:941/741;
    background:transparent;
    border-radius:0;
    width:92%;
    margin:0 auto;
  }
  .hero-image img{
    object-fit:contain;
  }

  /* ---------- STATEMENT IMAGE (full-bleed break) ---------- */
  .statement{
    padding:64px 0 20px;
  }
  .statement-heading{
    text-align:center;
    font-size:38px;
    font-weight:400;
    margin-bottom:10px;
  }
  .marker{
    font-family:'Permanent Marker', cursive;
    font-weight:400;
  }
  .statement-heading .label{
    font-size:33px;
  }
  .statement-image{
    aspect-ratio:2033/774;
    border-radius:18px;
    margin-top:28px;
  }
  .statement-image img{
    object-fit:cover;
  }
  .statement-caption{
    text-align:center;
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-size:16px;
    color:var(--gray);
    margin-top:0;
  }

  /* ---------- ARTIST CREDIT BAR ---------- */
  /* ---------- INVITE STRIP ---------- */
  .invite-strip{
    border-bottom:1px solid var(--border);
    padding:40px 40px;
    text-align:center;
  }
  .invite-strip p{
    max-width:900px;
    margin:0 auto;
    font-size:16px;
    font-weight:800;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink);
  }
  .invite-strip-light{
    font-weight:500;
    font-size:15px;
    color:var(--gray);
  }

  /* ---------- SECTION SHARED ---------- */
  section{
    padding:96px 0;
  }
  .section-head{
    text-align:center;
    max-width:640px;
    margin:0 auto 64px;
  }
  .section-head h2{
    font-size:40px;
    margin-bottom:18px;
  }
  .section-head p{
    font-size:18px;
    color:var(--gray);
    line-height:1.6;
  }

  /* ---------- HOW IT WORKS ---------- */
  .steps{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:32px;
  }
  .step-image{
    aspect-ratio:1/1;
    margin-bottom:22px;
  }
  .step-heading{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
  }
  .step-num{
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:50%;
    background:#D2445E;
    color:var(--white);
    font-family:'Playfair Display', serif;
    font-weight:800;
    font-size:15px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .step h3{
    font-size:19px;
    margin-bottom:0;
  }
  .step p{
    font-size:15px;
    line-height:1.6;
    color:var(--gray);
  }

  /* ---------- CHECKLIST SECTIONS ---------- */
  .check-list{
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .check-item{
    display:flex;
    gap:14px;
    font-size:17px;
    line-height:1.55;
    color:var(--gray);
  }
  .check-item .mark{
    color:var(--gold);
    font-weight:700;
    flex-shrink:0;
    margin-top:2px;
  }
  .eye-mark{
    width:38px;
    height:38px;
    margin-top:-4px;
  }
  .eye-mark img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }

  .check-grid{
    max-width:900px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:60px;
    row-gap:22px;
  }
  .icon-grid{
    grid-auto-flow:column;
    grid-template-rows:repeat(3, auto);
  }

  .section-alt{
    background:var(--cream-2);
  }

  /* ---------- FOR HARDCORE FANS (figure left, bottom-anchored and large) ---------- */
  .fans-section{
    background:#6D8FA8;
    padding-bottom:0;
    overflow:hidden;
  }
  .fans-section .section-head h2{ color:var(--cream); }
  .fans-section .section-head p{ color:#E4EDF2; }
  .fans-section .check-item{ color:#E4EDF2; }
  .fans-section .check-item .mark{ color:var(--gold-soft); }
  .split{
    display:grid;
    grid-template-columns:1.35fr 0.9fr;
    gap:48px;
    align-items:start;
  }
  .split .section-head{
    text-align:left;
    margin:-14px 0 32px;
    max-width:none;
  }
  .split .check-list{ max-width:460px; }
  .split .check-item{ align-items:center; }
  .fans-figure{
    align-self:end;
    display:flex;
    justify-content:center;
  }
  .fans-figure img{
    width:100%;
    max-width:640px;
    height:auto;
    display:block;
    transform:translateY(4px);
  }

  /* ---------- WHY CREATORS (icon checklist) ---------- */
  #why-creators{
    padding-top:44px;
  }
  .icon-grid .check-item{
    align-items:center;
  }
  .icon-mark{
    flex-shrink:0;
    width:64px;
    height:64px;
  }
  .icon-mark img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }

  /* ---------- FINAL CTA ---------- */
  .final-cta{
    text-align:center;
    padding:90px 0 100px;
  }
  .rust-section{
    background:#C86445;
  }
  .rust-section h2{ color:var(--cream); }
  .rust-section.final-cta p{ color:#F6DAD1; }
  .purple-section{
    background:#7B3B66;
  }
  .purple-section h2{ color:var(--cream); }
  .purple-section.final-cta p{ color:#E8D9E2; }
  .gold-section{
    background:var(--ink);
    padding:96px 0;
  }
  .gold-section .section-head{ margin-bottom:0; }
  .gold-section .section-head h2{ color:var(--cream); }
  .gold-section .section-head p{ color:#C9BFB2; }
  .gold-section .section-head h2 .marker{ text-transform:uppercase; color:#7BB6B7; }
  .final-cta-image{
    width:140px;
    aspect-ratio:1/1;
    margin:0 auto 30px;
    transform:rotate(-4deg);
    box-shadow:0 10px 24px rgba(42,33,25,0.18);
  }
  .final-cta h2{
    font-size:38px;
    margin-bottom:18px;
  }
  .final-cta p{
    font-size:17px;
    color:var(--gray);
    margin-bottom:36px;
  }
  .final-cta .hero-ctas{
    justify-content:center;
  }

  /* ---------- FEATURED ARTIST ---------- */
  .featured-artist{
    padding:64px 0 56px;
  }
  .featured-artist-card{
    display:grid;
    grid-template-columns:120px 1fr auto;
    gap:28px;
    align-items:center;
    background:var(--cream-2);
    border:1px solid var(--border);
    border-radius:16px;
    padding:32px 36px;
  }
  .featured-artist-image{
    aspect-ratio:1/1;
    border-radius:10px;
  }
  .featured-artist-eyebrow{
    margin-bottom:8px;
  }
  .featured-artist-eyebrow a{
    color:var(--gold);
    text-decoration:underline;
  }
  .featured-artist-copy h3{
    font-size:22px;
    margin-bottom:8px;
  }
  .featured-artist-copy p{
    font-size:15px;
    color:var(--gray);
    line-height:1.6;
  }
  .featured-artist-btn{
    flex-shrink:0;
    white-space:nowrap;
  }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--border);
    padding:44px 0;
  }
  .footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .footer-email{
    font-size:15px;
    color:var(--gray);
  }
  .footer-email a{
    color:var(--ink);
    font-weight:600;
  }
  .footer-brand{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .footer-note{
    max-width:460px;
    font-size:12px;
    line-height:1.5;
    color:var(--gray-light);
  }

  @media (max-width: 860px){
    .wrap{ padding:0 22px; }
    .nav-inner{ padding:18px 22px; }
    .nav-links{ gap:16px; }
    .nav-links a.link{ display:none; }
    .nav-brand{ flex-direction:column; align-items:flex-start; gap:2px; }
    .artist-credit{ font-size:10px; padding-left:0; border-left:none; }
    .hero{ padding:48px 0 0; }
    .hero-inner{ grid-template-columns:1fr; gap:32px; }
    .hero h1{ font-size:38px; }
    .hero-ctas{ gap:10px; }
    .invite-badge{ padding:7px 10px; gap:5px; font-size:10.5px; letter-spacing:0.02em; }
    .statement-image{ aspect-ratio:2033/774; border-radius:12px; }
    .steps{ grid-template-columns:1fr 1fr; gap:32px; }
    .check-grid{ grid-template-columns:1fr; }
    .icon-grid{ grid-auto-flow:row; grid-template-rows:none; }
    .section-head h2{ font-size:30px; }
    section{ padding:64px 0; }
    .split{ grid-template-columns:1fr; gap:8px; }
    .split .section-head{ text-align:center; margin-top:24px; }
    .split .check-list{ max-width:none; }
    .fans-figure img{ max-width:360px; }
    .fans-section{ padding-bottom:48px; }
    .featured-artist-card{ grid-template-columns:1fr; text-align:center; padding:28px; justify-items:center; }
    .featured-artist-image{ width:120px; }
    .modal-overlay{ padding:0; }
    .modal-card{ border-radius:0; min-height:100vh; padding:32px 22px; }
    .social-grid{ grid-template-columns:1fr; }
    .footer-inner{ flex-direction:column; align-items:flex-start; gap:20px; }
    .footer-brand{ flex-direction:column; align-items:flex-start; gap:12px; }
    .footer-note{ max-width:none; }
  }