/* ===== Fonts (Typekit / Adobe Fonts) — same CDN as the main site ===== */
@font-face{font-family:"athelas";src:url("https://use.typekit.net/af/adf251/00000000000000000000d834/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/adf251/00000000000000000000d834/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/adf251/00000000000000000000d834/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"athelas";src:url("https://use.typekit.net/af/a358fc/00000000000000000000d836/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/a358fc/00000000000000000000d836/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/a358fc/00000000000000000000d836/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");font-display:swap;font-style:normal;font-weight:700}
@font-face{font-family:"open-sans";src:url("https://use.typekit.net/af/827015/000000000000000000011c3b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/827015/000000000000000000011c3b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/827015/000000000000000000011c3b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"open-sans";src:url("https://use.typekit.net/af/2553b3/000000000000000000011c34/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/2553b3/000000000000000000011c34/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/2553b3/000000000000000000011c34/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");font-display:swap;font-style:normal;font-weight:700}

/* ===== Reset ===== */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"open-sans",sans-serif;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}

/* ===== Header: centered logo only ===== */
.site-header{
  background:#fff;
  padding:22px 16px;
  text-align:center;
  flex:0 0 auto;
}
.site-logo{display:inline-block;height:60px;width:auto}

/* ===== Hero: full-bleed background, split into two columns ===== */
.hero{
  position:relative;
  flex:1 1 auto;
  display:flex;
  align-items:flex-start;
  background:url("sbod_background_v2.jpg") center / cover no-repeat;
}

/* Left column: empty, lets the background show through */
.hero-left{flex:1 1 50%}

/* Right column wrapper */
.hero-right{flex:1 1 45%}

/* ===== Translucent message block, content aligned to top ===== */
.card{
  background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  padding:64px 6vw;
  box-shadow:-12px 0 40px rgba(0,0,0,0.18);
}
.card h1{
  color:#3f321e;
  font-family:"athelas",serif;
  font-size:55px;
  font-weight:700;
  line-height:52px;
  letter-spacing:-1.3px;
  margin:0 0 22px;
}
.card p{
  color:#13171a;
  font-size:17px;
  line-height:26px;
  margin:0 0 18px;
}
.card p a{color:#3f321e;text-decoration:none}

/* ===== Gold pill button (mirrors the site's .goldpill) ===== */
.goldpill{
  display:inline-block;
  margin-top:8px;
  border:0;
  border-radius:50px;
  padding:.7rem 2rem;
  font-family:"open-sans",sans-serif;
  font-size:1.1em;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  background:#3f321e;
}

/* ===== Tablet / iPad: shrink the left column so the block breathes ===== */
@media (min-width:768px) and (max-width:1024px){
  .hero-left{flex:0 0 30%}
  .hero-right{flex:1 1 70%}
}

/* ===== Mobile: hide the empty left column; block takes full width ===== */
@media (max-width:767.98px){
  .hero-left{display:none}
  .hero-right{flex:1 1 100%}
  .card{
    padding:10px 26px;
    background:rgba(255,255,255,0.85);
    box-shadow:none;
  }
  .card h1{font-size:40px;line-height:38px}
  .card p{font-size:14px;line-height:22px}
  .site-logo{height:46px}
}