/* Boudoir — creator landing: hero, locked gallery, value props, sticky CTA. */
html{background:#0d0b09;}
html,body{max-width:100%;overflow-x:hidden;}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;padding:0;background:#0d0b09;color:#f6efe4;font-family:'Playfair Display',Georgia,serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:78px;
  background-size:cover !important;background-position:center top !important;}
/* Scrim keeps text readable over an uploaded background photo. */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#0d0b098c 0%,#0d0b09d6 46%,#0d0b09 78%);}
.container{position:relative;z-index:1;width:100%;max-width:none;margin:0;padding:0;}
.row{display:block;}

.column{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;
  max-width:620px;margin:0 auto !important;padding:60px 22px 26px;gap:0;text-align:center;}
.column > #avatar{flex:0 0 auto;align-self:center;}
.column > h1,.column > center,.column > style{flex:0 0 100%;}

#avatar,.rounded-avatar{width:126px;height:126px;border-radius:50%;object-fit:cover;
  border:2px solid #c9a2278c;box-shadow:0 14px 40px rgba(0,0,0,.5);
  min-width:0 !important;max-width:100%;}

h1{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(2.4rem,8.5vw,3.4rem);line-height:1.05;
  margin:18px 0 6px;color:#f6efe4;}
h1::before{content:'— EXCLUSIVE —';display:block;font-family:system-ui,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.34em;color:#c9a227;margin-bottom:13px;}
p,.description-parent,.description-parent p{font-family:'Playfair Display',Georgia,serif;font-style:italic;
  color:#a2947f;font-size:1rem;margin:0 auto;max-width:34ch;}

.button-entrance{flex:0 0 100%;margin-top:11px;}
/* .button.button-custom is included deliberately: brands.css paints the generic
   custom button a fixed navy gradient that belongs to no theme. Branded
   buttons (Instagram, Telegram, …) keep their own colours. */
.button,a.button,.button.button-custom{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:520px;margin:0 auto;padding:16px 22px;border-radius:14px;
  font-weight:700;font-size:16px;text-decoration:none;box-sizing:border-box;
  border:1px solid #a2947f33;background:#221b15;color:#f6efe4;
  transition:transform .18s ease,box-shadow .18s ease;}
.button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.4);}
.button .icon,.button img.icon{width:20px;height:20px;flex:none;}
/* First link is the money CTA.
   NOT :first-of-type — that means first DIV among siblings, and the Page
   Icons row is a div that renders before the buttons, so the CTA silently
   lost its styling as soon as a page had any icons. This matches the first
   .button-entrance regardless of what other elements sit beside it. */
.button-entrance:not(.button-entrance ~ .button-entrance){margin-top:28px;}
.button-entrance:not(.button-entrance ~ .button-entrance) .button{
  background:linear-gradient(180deg,#12d18e,#0aa871);color:#04150e;
  border:0;font-size:17.5px;padding:20px 24px;box-shadow:0 0 42px -8px #12d18e;}

.bd-strip{position:relative;z-index:1;margin:30px auto 0;padding:13px 18px;background:#171310;
  border-top:1px solid #c9a22730;border-bottom:1px solid #c9a22730;text-align:center;
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#a2947f;}
.bd-strip .dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#12d18e;margin-right:10px;vertical-align:middle;}

.bd-sec{position:relative;z-index:1;max-width:620px;margin:0 auto;padding:42px 22px 0;text-align:center;}
.bd-sec h2{font-family:'Playfair Display',Georgia,serif;font-size:1.85rem;font-weight:700;color:#c9a227;margin:0 0 6px;}
.bd-sec .sub{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:#a2947f;font-size:.94rem;margin:0 0 22px;}
/* minmax(0,…) not 1fr: a bare 1fr is minmax(auto,1fr) and will not shrink below
   the content's min-width, so the third column overflows on a 320px phone. */
.bd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.bd-tile{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  background:linear-gradient(150deg,#221b15,#171310);border:1px solid #c9a22738;
  display:flex;align-items:center;justify-content:center;color:#c9a227;}
.bd-tile::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,#f6efe40a 0 8px,transparent 8px 16px);}
.bd-lock{width:30px;height:30px;}
/* Tile holding a real upload: the photo replaces the hatch, and the lock
   shrinks to a corner badge so the teaser still reads as gated. */
.bd-tile--img{background:#171310;}
.bd-tile--img::after{background:linear-gradient(180deg,transparent 55%,#0d0b09b3 100%);}
.bd-tile--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.bd-badge{position:absolute;right:7px;bottom:7px;z-index:2;width:26px;height:26px;border-radius:50%;
  background:#0d0b09c4;border:1px solid #c9a22759;color:#c9a227;
  display:flex;align-items:center;justify-content:center;}
.bd-badge .bd-lock{width:15px;height:15px;}
@media(max-width:420px){.bd-grid{gap:8px;}.bd-lock{width:22px;height:22px;}}

.bd-props{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px;}
.bd-prop{background:#171310;border:1px solid #a2947f26;border-radius:14px;padding:20px 12px;color:#c9a227;min-width:0;}
.bd-prop .ic{width:40px;height:40px;border-radius:11px;margin:0 auto 10px;background:#221b15;
  display:flex;align-items:center;justify-content:center;}
.bd-prop span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#a2947f;line-height:1.35;overflow-wrap:anywhere;}

/* Small phones (iPhone SE / older Androids at 320-360 CSS px). */
@media(max-width:380px){
  .column{padding-left:14px;padding-right:14px;}
  .bd-sec{padding-left:14px;padding-right:14px;}
  .bd-props{gap:8px;}
  .bd-prop{padding:15px 7px;}
  .bd-prop .ic{width:34px;height:34px;margin-bottom:7px;}
  .bd-prop span{font-size:10px;letter-spacing:.06em;}
  .bd-sticky{gap:9px;padding:9px 10px;}
  .bd-sticky .who{font-size:11px;}
  .bd-sticky a{font-size:14px;padding:12px 12px;}
}

.bd-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:11px 14px;background:#0d0b09f0;border-top:1px solid #c9a22738;backdrop-filter:blur(10px);}
.bd-sticky .who{font-size:12px;color:#a2947f;white-space:nowrap;}
.bd-sticky a{flex:1;text-align:center;text-decoration:none;
  background:linear-gradient(180deg,#12d18e,#0aa871);color:#04150e;
  font-weight:800;font-size:15px;padding:13px 18px;border-radius:12px;}
.bd-sticky a img{width:1.05em;height:1.05em;object-fit:contain;vertical-align:-0.16em;margin-right:7px;}
/* Two platforms share the bar: drop the label and make the second one
   secondary, so one offer still reads as the primary call to action. */
.bd-sticky--two a{font-size:13.5px;padding:12px 8px;}
.bd-sticky--two a:last-child{background:#221b15;color:#f6efe4;
  border:1px solid #c9a22759;}

.footer{position:relative;z-index:1;margin-top:36px;text-align:center;font-size:12px;color:#a2947f;}
/* DISPLAY_FOOTER=false leaves the wrapper behind with its margins, so an empty
   footer would reserve blank space. Collapse it only while it has no links, so
   re-enabling them in .env brings the footer back without touching the theme. */
.footer:not(:has(a)){display:none;}
.footer a,.footer-hover{color:#a2947f;text-decoration:none;margin:0 9px;}
.footer a:hover{color:#c9a227;}
hr{border:0;border-top:1px solid #a2947f26;margin:24px 0;}
@media (prefers-reduced-motion:reduce){.button{transition:none;}}