/* ==========================================================
   RAALIV — Botanical Art Studio
   Luxury Scandinavian Style
========================================================== */


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


:root {

  --cream:#F7F3EC;
  --paper:#EFE8DC;
  --stone:#D3C8B8;
  --clay:#A58B72;
  --brown:#6D5B4C;
  --ink:#181410;
  --dark:#12100D;

  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", Arial, sans-serif;

}



html {
  scroll-behavior:smooth;
}



body {

  background:var(--cream);
  color:var(--ink);

  font-family:var(--sans);

  -webkit-font-smoothing:antialiased;

}



img {

  display:block;
  width:100%;

}




/* ======================
   NAV
====================== */


.nav {

 position:fixed;

 top:0;
 left:0;
 right:0;

 padding:32px 6vw;

 display:flex;

 justify-content:space-between;

 align-items:center;

 z-index:100;

 background:rgba(247,243,236,.85);

 backdrop-filter:blur(12px);

}



.logo {

 font-family:var(--serif);

 font-size:28px;

 letter-spacing:.12em;

 color:var(--ink);

 text-decoration:none;

}



.nav-links {

 display:flex;

 gap:35px;

}


.nav-links a {

 font-size:11px;

 letter-spacing:.18em;

 text-transform:uppercase;

 color:var(--brown);

 text-decoration:none;

}




/* ======================
 HERO
====================== */


.hero {

 min-height:100vh;

 display:grid;

 grid-template-columns:1fr 1fr;

 align-items:center;

 gap:6vw;

 padding:150px 7vw 80px;

}



.hero-image img {

 object-fit:cover;

}



.hero-content {

 max-width:600px;

}



.eyebrow {

 font-size:11px;

 letter-spacing:.25em;

 text-transform:uppercase;

 color:var(--clay);

 margin-bottom:30px;

}



h1 {

 font-family:var(--serif);

 font-weight:300;

 font-size:clamp(45px,5vw,75px);

 line-height:1.05;

 margin-bottom:35px;

}



.hero-copy {

 color:var(--brown);

 font-size:18px;

 line-height:1.9;

 max-width:480px;

 margin-bottom:45px;

}



.button {

 display:inline-block;

 padding:18px 42px;

 background:var(--ink);

 color:white;

 text-decoration:none;

 font-size:11px;

 letter-spacing:.22em;

 text-transform:uppercase;

 transition:.3s;

}


.button:hover {

 background:var(--clay);

}





/* ======================
 COLLECTION
====================== */


.collection {

 padding:120px 7vw;

}

/* ======================
   COLLECTION PREVIEW
====================== */


.collection-preview {

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:90px;

    align-items:center;

    margin-top:40px;

}



.collection-image {

    position:relative;

}



.collection-image::after {

    content:"";

    position:absolute;

    inset:25px -25px -25px 25px;

    border:1px solid var(--stone);

    z-index:-1;

}



.collection-image img {


    object-fit:cover;

}



.collection-text {

    max-width:450px;

}



.collection-text h3 {

    font-family:var(--serif);

    font-weight:300;

    font-size:clamp(36px,3vw,52px);

    line-height:1.15;

    margin-bottom:35px;

}



.collection-text p {

    color:var(--brown);

    font-size:17px;

    line-height:1.9;

    margin-bottom:25px;

}



.collection-text span {

    display:block;

    margin-top:45px;

    padding-top:25px;

    border-top:1px solid var(--stone);

    color:var(--clay);

    font-size:11px;

    letter-spacing:.25em;

    text-transform:uppercase;

}




/* subtle luxury hover */

.collection-image img {

    transition:transform .8s ease;

}


.collection-image:hover img {

    transform:scale(1.02);

}

.section-header {

 max-width:650px;

 margin-bottom:70px;

}



h2 {

 font-family:var(--serif);

 font-weight:300;

 font-size:clamp(38px,4vw,60px);

 line-height:1.15;

 margin-bottom:25px;

}



.section-header p:last-child {

 color:var(--brown);

 line-height:1.8;

 font-size:17px;

}

/* ======================
 MANIFESTO
====================== */


.manifesto {

 background:var(--dark);

 color:white;

 padding:140px 7vw;

 text-align:center;

}



.manifesto-inner {

 max-width:800px;

 margin:auto;

}



.manifesto h2 {

 font-size:clamp(45px,5vw,75px);

}



.manifesto p {

 color:rgba(255,255,255,.65);

 font-size:18px;

 line-height:2;

}





/* ======================
 PROCESS
====================== */


.process {

 padding:130px 7vw;

}



.steps {

 display:grid;

 grid-template-columns:repeat(4,1fr);

 gap:35px;

}



.steps div {

 border-top:1px solid var(--stone);

 padding-top:30px;

}



.steps h3 {

 font-family:var(--serif);

 font-size:35px;

 font-weight:300;

 margin-bottom:25px;

}



.steps p {

 color:var(--brown);

 line-height:1.8;

}





/* ======================
 STORY
====================== */


.story {

 background:var(--paper);

 padding:130px 7vw;

}



.story-grid {

 display:grid;

 grid-template-columns:1fr 1fr;

 gap:80px;

}



.story p {

 color:var(--brown);

 font-size:18px;

 line-height:2;

 margin-bottom:25px;

}





/* ======================
 RELEASE
====================== */


.release {

 padding:130px 7vw;

 text-align:center;

}



.release p {

 color:var(--brown);

 font-size:18px;

 margin-bottom:45px;

}





/* ======================
 WAITLIST
====================== */


.waitlist {

 background:var(--dark);

 color:white;

 padding:120px 7vw;

 text-align:center;

}



.waitlist p {

 color:rgba(255,255,255,.6);

 margin-bottom:40px;

}



#waitlist-form {

 max-width:550px;

 margin:auto;

 display:flex;

}



#waitlist-form input {

 flex:1;

 padding:18px;

 background:white;

 border:none;

 font-size:14px;

}



#waitlist-form button {

 padding:18px 35px;

 border:none;

 background:var(--clay);

 color:white;

 text-transform:uppercase;

 letter-spacing:.15em;

 font-size:11px;

}





/* ======================
 FOOTER
====================== */


footer {

 background:var(--dark);

 color:white;

 border-top:1px solid rgba(255,255,255,.1);

 padding:40px 7vw;

 display:flex;

 justify-content:space-between;

}


footer div {

 font-family:var(--serif);

 letter-spacing:.15em;

}



footer p {

 font-size:11px;

 letter-spacing:.2em;

 text-transform:uppercase;

 opacity:.5;

}





/* ======================
 MOBILE
====================== */

@media(max-width:900px){


.collection-preview {

    grid-template-columns:1fr;

    gap:60px;

}



.collection-image::after {

    inset:15px -15px -15px 15px;

}



.collection-text {

    max-width:none;

}



}

@media(max-width:900px){


.nav-links {

 display:none;

}



.hero {

 grid-template-columns:1fr;

 padding-top:120px;

}



.hero-image {

 order:-1;

}



.hero-image img {

 height:55vh;

}



.products {

 grid-template-columns:1fr;

}



.steps {

 grid-template-columns:1fr;

}



.story-grid {

 grid-template-columns:1fr;

 gap:40px;

}



#waitlist-form {

 flex-direction:column;

}



#waitlist-form button {

 margin-top:10px;

}



footer {

 flex-direction:column;

 gap:20px;

}


}
.availability {

    margin-top:45px;
    padding-top:0;
    border-top:none;

}


.availability p {

    font-size:11px;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--clay);
    margin-bottom:15px;

}


.availability strong {

    font-family:var(--serif);
    font-weight:400;
    font-size:32px;
    color:var(--ink);

}

/* ======================
   SOCIAL
====================== */


.social {

    background:var(--paper);

    padding:120px 7vw;

    text-align:center;

}



.social-inner {

    max-width:700px;

    margin:auto;

}



.social h2 {

    margin-bottom:25px;

}



.social p:not(.eyebrow) {

    color:var(--brown);

    font-size:18px;

    line-height:1.9;

    margin-bottom:40px;

}