/* ---------- colours: berry wine. swap --accent to #7a3f4a for rosewood ---------- */

:root{
  --bg:#f4f1e8;
  --accent:#5c2438;
  --accent-text:#f7e6e9;
  --photo-border:#f7dfe3;
  --blush:#f0b9c2;
  --beige:#efe4d0;
  --caramel:#c9ab7f;
  --mocha:#7a5c4c;
  --ink:#3b2a1f;
  --field:#fffdf8;
  --serif:Eczar, Georgia, serif;
  --sans:'Work Sans', system-ui, sans-serif;
  --hand:Caveat, cursive;
  --side:80px;
}

*{
  box-sizing:border-box
}

html{
  -webkit-text-size-adjust:100%
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden /* MARGIN FIX: stops sideways scroll caused by the 100vw slideshow */
}

img{
  max-width:100%;
  display:block
}

a{
  color:var(--accent)
}

a:hover{
  color:var(--ink)
}

:focus-visible{
  outline:3px solid var(--blush);
  outline-offset:3px
}

.page{
  max-width:1280px;
  margin:0 auto
}

.m-only{
  display:none
}


/* ---------- header ---------- */

.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:36px var(--side) 0
}

.logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none
}

.logo img{
  display:block;
  width:140px;
  height:auto;
  margin-left:-20px
}

/* Desktop hashtag: visible, NOT clickable */
.tag-desktop{
  display:inline
}

/* Mobile hashtag link: hidden on desktop */
.tag-mobile{
  display:none
}

.header-right{
  display:flex;
  align-items:baseline;
  gap:28px
}

.tag{
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  color:var(--accent)
}

.ig{
  font-size:16px;
  color:var(--mocha);
  text-underline-offset:4px
}


/* ---------- hero ---------- */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto; /* MARGIN FIX: photo column stays inside the right margin */
  gap:64px;
  padding:24px var(--side) 0;
  align-items:start
}

h1{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:58px;
  line-height:1.04;
  letter-spacing:-0.01em
}

.soil{
  margin:16px 0 0;
  font-family:var(--serif);
  font-weight:500;
  font-style:italic;
  font-size:27px;
  line-height:1.2;
  color:var(--accent);
  max-width:560px
}

.category{
  margin:24px 0 24px;
  font-size:18px;
  color:var(--mocha);
  max-width:500px;
  text-align:left;
}


/* ---------- rotating line ---------- */

.rotator{
  margin-top:35px;
}

.rotator .find{
  font-family:var(--serif);
  font-weight:500;
  font-size:29px;
  line-height:1.15;
  color:var(--mocha)
}

.phrase{
  all:unset;
  cursor:pointer;
  display:block;
  min-height:70px;
  max-width:560px;
  font-family:var(--serif);
  font-weight:600;
  font-size:32px;
  line-height:1.12;
  color:var(--accent)
}


/* ---------- forms ---------- */

.signup{
  margin-top:32px
}

.fields{
  display:grid;
  grid-template-columns:180px minmax(150px, 1fr) minmax(150px, 1fr) auto; /* MARGIN FIX: 180 -> 150 so the form can't push past the margin on narrower desktops */
  gap:12px;
  align-items:end;
  width:100%;
  max-width:100%;
}

.name-label,
.email-label{
  min-width:0;
  width:100%;
}

select,
input[type="text"],
input[type="email"]{
  width:100%;
  height:56px;
  font:400 17px var(--sans);
  color:var(--ink);
  border:1.5px solid var(--mocha);
}

select{
  padding:0 16px;
  font-weight:500;
  background:var(--beige);
  border-radius:16px 6px 16px 8px;
}

input[type="text"],
input[type="email"]{
  padding:0 18px;
  background:var(--field);
  border-radius:6px 18px 8px 16px;
}

.btn{
  height:56px;
  padding:0 28px;
  font:500 17px var(--sans);
  border:none;
  border-radius:18px 8px 20px 6px;
  cursor:pointer;
  white-space:nowrap;
  background:var(--accent);
  color:var(--accent-text)
}

.btn:disabled{
  opacity:.6;
  cursor:default
}

.micro{
  margin:12px 0 0;
  font-size:14px;
  color:var(--mocha)
}

.thanks{
  display:none;
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:24px;
  line-height:1.3;
  color:var(--accent)
}

form.done .fields,
form.done .micro{
  display:none
}

form.done .thanks{
  display:block
}

.hidden{
  position:absolute;
  left:-9999px
}


/* ---------- photos ---------- */

.photo{
  border:10px solid var(--photo-border);
  background:var(--beige);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  font-size:14px;
  color:var(--mocha);
  overflow:hidden
}

.photo img{
  width:100%;
  height:100%;
  object-fit:cover
}

.photo:has(img){
  padding:0
}

.hero-photo{
  padding-top:8px
}

.hero-photo .photo{
  width:300px;
  max-width:100%;
  height:360px;
  border-width:10px;
  border-radius:48px 12px 54px 18px;
  transform:rotate(2deg);
  margin-top:-8px;
  font-size:14px
}


/* ---------- moving full-width photo carousel ---------- */

.strip{
  position:relative;
  display:block;
  width:100vw;
  height:72vh;
  min-height:520px;
  margin:48px 0 0 calc((100% - 100vw) / 2);
  padding:0;
  overflow:hidden;
  background:var(--beige)
}

.strip .photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  border:0;
  border-radius:0;
  padding:0;
  opacity:0;
  transform:translateX(100%);
  transition:
    opacity 800ms ease,
    transform 1000ms cubic-bezier(.22,1,.36,1);
  pointer-events:none;
  z-index:0
}

.strip .photo.is-active{
  opacity:1;
  transform:translateX(0);
  z-index:2
}

.strip .photo.is-leaving{
  opacity:0;
  transform:translateX(-100%);
  z-index:1
}

.strip .photo img{
  width:100%;
  height:100%;
  object-fit:cover
}


/* ---------- ways in ---------- */

.ways{
  padding:72px var(--side) 0;
  position:relative
}

h2{
  margin:0 0 36px;
  font-family:var(--serif);
  font-weight:600;
  font-size:48px;
  line-height:1.05
}

.note{
  position:absolute;
  right:var(--side); /* MARGIN FIX: was 100px, now lines up with the right margin */
  top:104px;
  font-family:var(--hand);
  font-weight:500;
  font-size:28px;
  color:var(--accent);
  transform:rotate(-5deg)
}

.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:36px;
  row-gap:32px;
  margin:0;
  padding:0;
  list-style:none
}

.grid li{
  padding-top:18px;
  border-top:1.5px dashed var(--caramel)
}

.grid h3{
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:25px;
  line-height:1.15
}

.grid p{
  margin:6px 0 0;
  font-size:16px;
  color:var(--mocha)
}

.later{
  display:inline-block;
  margin-top:10px;
  font-size:13px;
  color:var(--accent);
  background:var(--photo-border);
  padding:4px 10px;
  border-radius:10px 4px 10px 5px
}


/* ---------- second signup ---------- */

.band{
  margin:96px var(--side) 0;
  padding:24px 56px;
  background:var(--accent);
  color:var(--accent-text);
  border-radius:56px 18px 64px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.band h2{
  margin:0;
  width:100%;
  max-width:none;
  font-size:36px;
  line-height:1.08;
  text-align:center
}


/* ---------- footer ---------- */

footer{
  padding:56px var(--side) 56px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  color:var(--mocha)
}

footer .tag{
  font-size:20px;
  color:var(--ink)
}
/* ---------- tablet / small laptop (761px to 1200px) ---------- */

@media (min-width:761px) and (max-width:1200px){
  :root{ --side:48px }
  .hero{ grid-template-columns:minmax(0,1fr) }
  .hero-photo,
  .note{ display:none }
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hero .fields{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* ---------- mobile (below 760px) ---------- */

@media (max-width:760px){

  :root{
    --side:22px
  }

  .d-only{
    display:none
  }

  .m-only{
    display:inline
  }

  .site-header{
    padding-top:24px
  }

  .logo{
    width:120px;
    height:46px;
    font-size:12px;
    border-radius:16px 6px 18px 8px
  }

  /* MARGIN FIX: mobile logo lines up with the left margin */
  .logo img{
    width:90px;
    margin-left:-13px
  }

  .tag{
    font-size:17px
  }

  /* Hide plain desktop hashtag */
  .tag-desktop{
    display:none
  }

  /* Show clickable mobile hashtag */
  .tag-mobile{
    display:inline
  }

  /* Hide explicit Instagram link on mobile */
  .ig{
    display:none
  }

  .hero{
    display:block;
    padding-top:32px
  }

  .hero-photo{
    display:none
  }

  h1{
  font-size:30px;
  line-height:1.08;
  text-align:left;
  max-width:340px
}

  .soil{
  margin-top:10px;
  font-size:13px;
  line-height:1.25
}

  .category{
    margin-top:12px;
    font-size:16px
  }

  .rotator{
    margin-top:22px
  }

  .rotator .find{
    font-size:24px
  }

  .phrase{
    font-size:26px;
    line-height:1.15;
    min-height:60px
  }

  .signup{
    margin-top:18px
  }

  .hero .fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:end
}

.hero .fields .btn{
  grid-column:auto;
  width:100%;
  height:50px;
}

  select{
  min-width:0;
  width:100%;
  height:48px;
  padding:0 10px;
  font-size:16px
}

input[type="text"],
input[type="email"]{
  width:100%;
  height:48px;
  font-size:16px;
  padding:0 12px
}

label{
  font-size:12px
}

  .micro{
    font-size:13px
  }


  /* ---------- mobile moving photo carousel ---------- */

  .strip{
  display:block;
  height:42vh;
  min-height:280px;
  margin-top:40px;
  padding:0;
  overflow:hidden;
}

  .strip .photo{
    display:flex;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    border:0;
    border-radius:0;
    padding:0;
    opacity:0;
    transform:translateX(100%);
  }

  .strip .photo.is-active{
    display:flex;
    opacity:1;
    transform:translateX(0);
  }

  .strip .photo.is-leaving{
    display:flex;
    opacity:0;
    transform:translateX(-100%);
  }

  .strip .photo img{
    width:100%;
    height:100%;
    object-fit:cover
  }


  .ways{
  padding:72px var(--side) 0;
  position:relative
}

  h2{
    font-size:30px;
    margin-bottom:18px
  }

  .note{
    display:none
  }

  .grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:10px;
  row-gap:12px;
}

  .grid li{
  padding-top:0;
  border-top:none;
}

  .grid h3{
  display:inline-block;
  margin:0;
  padding:5px 9px;
  font-size:11px;
  line-height:1.15;
  font-weight:500;
  background:var(--beige);
  border-radius:6px 3px 6px 3px;
}

  .grid p{
  margin:7px 0 0;
  font-size:12px;
  line-height:1.35;
}

  .later{
    font-size:12px;
    padding:3px 8px;
    margin-top:6px
  }

 .band{
  margin:64px var(--side) 0;
  padding:22px 18px;
  background:var(--accent);
  color:var(--accent-text);
  border-radius:36px 12px 40px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.band h2{
  margin:0;
  width:100%;
  max-width:none;
  font-size:22px;
  line-height:1.08;
  text-align:center
}

  footer{
    padding-top:32px;
    padding-bottom:32px;
    font-size:13px
  }

  footer .tag{
    font-size:16px
  }

}


/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion:reduce){

  .strip .photo{
    transition:none
  }

}