/* =================================================================
   MaraJane.com — reference build stylesheet
   Implements web-spec.md. This CSS is the source for the Carrd
   Embed custom-CSS block and the WordPress theme.
   ================================================================= */

/* ---------- Tokens ---------- */
:root{
  --pink-lavender:#FFB3CB; --pink-orchid:#FFB5EE; --pink-pale:#FFC6EF;
  --magenta:#F400A1; --neon:#FF49C1;
  --of-blue:#00AFF0; --of-blue-dark:#0091C9; /* OnlyFans blue — intentional off-palette CTA for recognition */
  --black:#000000; --black-soft:#111111; --charcoal:#2A2A2A;
  --white:#FFFFFF; --white-warm:#FFF8FB; --gray-soft:#F3EEF1;
  --champagne:#F7D7B5; --rose-gold:#C98686; --plum:#4A1237; --berry:#8A185A; --lilac:#D9C3FF;

  /* Google-font approximations first; brand-locked Adobe fonts as fallthrough if a kit is added */
  --font-display:"Fraunces","quincy-cf","Quincy CF",Georgia,"Times New Roman",serif;
  --font-body:"Hanken Grotesk","proxima-nova","Proxima Nova",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --maxw:1100px;
  --gutter:clamp(20px,5vw,40px);
  --sec-pad:clamp(56px,9vw,128px);
  --radius-card:16px; --radius-input:10px; --radius-frame:14px;
  --shadow-soft:0 6px 24px rgba(17,17,17,.06);
  --shadow-lift:0 12px 32px rgba(244,0,161,.14);
  --shadow-blue:0 12px 32px rgba(0,175,240,.30);
  --t:180ms ease;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--white-warm); color:var(--black-soft);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--magenta); outline-offset:2px; border-radius:4px;}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
.narrow{max-width:560px;}
.center{text-align:center; margin-inline:auto;}
.section{padding-block:var(--sec-pad);}
.section-white{background:var(--white);}
.section-pink{background:var(--pink-lavender);}

/* ---------- Typography ---------- */
.display{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.75rem,6vw,5rem); line-height:1.02; letter-spacing:-.02em;
  margin:.1em 0 .35em;
}
.h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,4vw,3rem); line-height:1.08; letter-spacing:-.01em; margin:.1em 0 .4em;
}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.5; max-width:42ch;}
.center .lead{margin-inline:auto;}
.muted{color:#5b5560;}
.eyebrow{
  font-weight:600; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--magenta); margin:0 0 .9em;
}
.eyebrow.dark{color:var(--plum);}
.wordmark{
  font-family:var(--font-display); font-weight:900; letter-spacing:-.03em;
  font-size:1.6rem; color:var(--black-soft); line-height:1;
}
.wordmark-light{color:var(--white); font-size:2rem; margin:0 0 .6em;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.85em 1.5em; border:none; border-radius:999px;
  transition:background var(--t),transform var(--t),box-shadow var(--t);
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-sm{padding:.6em 1.1em; font-size:.875rem;}
.btn-primary{background:var(--magenta); color:var(--white); box-shadow:var(--shadow-lift);}
.btn-primary:hover{background:var(--neon);}
.btn-secondary{background:var(--black); color:var(--white);}
.btn-secondary:hover{background:var(--charcoal);}
.btn-soft{background:var(--pink-lavender); color:var(--black-soft);}
.btn-soft:hover{background:var(--pink-pale);}
.btn-blue{background:var(--of-blue); color:var(--white); box-shadow:var(--shadow-blue);}
.btn-blue:hover{background:var(--of-blue-dark);}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,248,251,.82); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--gray-soft);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding-block:14px;}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(36px,6vw,72px);}
.hero-grid{display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,64px); align-items:center;}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:1.6em;}
.hero-note{font-size:.875rem; color:#6a626d; font-weight:500;}
.hero-media{display:flex; justify-content:center;}
.hero-frame{
  position:relative; max-width:380px; width:100%;
  border-radius:var(--radius-frame); overflow:hidden; box-shadow:var(--shadow-soft);
}
.hero-frame::before{
  /* soft pink offset block behind the image, editorial */
  content:""; position:absolute; inset:auto -18px -18px auto; width:70%; height:70%;
  background:var(--pink-lavender); border-radius:var(--radius-frame); z-index:-1;
}
.hero-media{position:relative;}
.hero-frame img{width:100%; height:auto; object-fit:cover;}

/* ---------- Links hub ---------- */
.link-list{display:flex; flex-direction:column; gap:14px; max-width:480px; margin:2em auto 0;}
.link-btn{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.05em 1.4em; border-radius:999px; font-weight:600;
  transition:transform var(--t),box-shadow var(--t),background var(--t); box-shadow:var(--shadow-soft);
}
.link-btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift);}
.link-label{font-size:1.05rem;}
.link-tag{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:.3em .7em; border-radius:999px; background:rgba(255,255,255,.22);}
.link-sub{font-size:.85rem; opacity:.75; font-weight:500;}
.link-btn-primary{background:var(--magenta); color:var(--white);}
.link-btn-primary:hover{background:var(--neon);}
.link-btn-soft{background:var(--white); color:var(--black-soft); border:1px solid var(--pink-lavender);}
.link-btn-soft:hover{background:var(--white-warm);}
.link-btn-dark{background:var(--black-soft); color:var(--white);}
.link-btn-dark:hover{background:var(--charcoal);}
.link-btn-blue{background:var(--of-blue); color:var(--white);}
.link-btn-blue:hover{background:var(--of-blue-dark);}

/* ---------- Gallery ---------- */
.section-head{margin-bottom:clamp(28px,4vw,48px);}
.grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr);
}
.tile{
  padding:0; border:none; background:var(--gray-soft);
  border-radius:var(--radius-card); overflow:hidden; aspect-ratio:4/5;
  box-shadow:var(--shadow-soft); transition:transform var(--t),box-shadow var(--t);
}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform 400ms ease;}
.tile:hover{box-shadow:var(--shadow-lift);}
.tile:hover img{transform:scale(1.04);}
.gallery-note{margin-top:clamp(20px,3vw,32px); font-weight:500;}

/* ---------- Newsletter ---------- */
.section-pink .lead.dark,.section-pink .eyebrow.dark{color:var(--plum);}
.signup{max-width:480px; margin:1.8em auto 0; text-align:left;}
.signup-row{display:flex; gap:10px; flex-wrap:wrap;}
.signup input[type=email]{
  flex:1 1 220px; min-width:0;
  padding:.95em 1.1em; border:1px solid var(--gray-soft); border-radius:var(--radius-input);
  background:var(--white); color:var(--black-soft); font-size:1rem;
}
.signup input[type=email]:focus{outline:none; border-color:var(--magenta); box-shadow:0 0 0 3px rgba(244,0,161,.15);}
.signup .btn-secondary{flex:0 0 auto;}
.consent{display:flex; align-items:flex-start; gap:.6em; margin-top:1em; font-size:.85rem; color:var(--plum);}
.consent input{margin-top:.2em; accent-color:var(--magenta);}
.form-msg{min-height:1.2em; margin:.8em 0 0; font-size:.9rem; font-weight:600; color:var(--plum);}

/* ---------- Footer ---------- */
.site-footer{background:var(--black); color:var(--white); padding-block:clamp(48px,7vw,80px);}
.footer-links{margin:.2em 0 1.4em; font-weight:600;}
.footer-links a{color:var(--pink-pale); transition:color var(--t);}
.footer-links a:hover{color:var(--neon);}
.footer-fine{font-size:.85rem; color:#b9b2bb; max-width:52ch; margin:.5em auto; line-height:1.5;}
.footer-fine a{color:#d9c3ff; text-decoration:underline;}
.muted-light{color:#857e88;}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center;
  background:rgba(10,6,12,.92); padding:24px;
}
.lightbox.open{display:flex;}
.lb-img{max-width:min(92vw,900px); max-height:88vh; width:auto; height:auto;
  border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lb-close,.lb-nav{
  position:absolute; background:rgba(255,255,255,.08); color:var(--white);
  border:1px solid rgba(255,255,255,.18); border-radius:999px;
  width:52px; height:52px; font-size:1.8rem; line-height:1; display:flex;
  align-items:center; justify-content:center; transition:background var(--t),transform var(--t);
}
.lb-close:hover,.lb-nav:hover{background:var(--magenta); border-color:var(--magenta);}
.lb-close{top:20px; right:20px; font-size:2rem;}
.lb-nav{top:50%; transform:translateY(-50%);}
.lb-prev{left:16px;} .lb-next{right:16px;}

/* ---------- Responsive ---------- */
@media (min-width:768px){
  .hero-grid{grid-template-columns:1.05fr .95fr;}
  .hero-copy{padding-right:8px;}
  .hero-frame{max-width:420px;}
  .grid{grid-template-columns:repeat(3,1fr); gap:18px;}
  .grid-4{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:420px){
  .lb-nav{width:44px; height:44px;}
  .link-btn{padding:.95em 1.2em;}
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
  .tile:hover img{transform:none;}
}