/* =========================================================
   About — Laura Sarmiento
   Colors  #F97A5B coral · #FBBA84 peach · #B1170B title · #732127 wine
   Titles  DM Serif Display · Text Fira Sans
   Designed on a 1440 x 1317 canvas — everything scales with the viewport
   ========================================================= */

:root{
  --u:      0.0694444vw;      /* 1 design px */
  --coral:  #F97A5B;
  --peach:  #FBBA84;
  --title:  #B1170B;
  --wine:   #732127;
  --page-bg:#FFFDFC;

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sub:   "Inclusive Sans", "Helvetica Neue", Arial, sans-serif;
  --text:  "Fira Sans", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--text);
  color:#111;
  background:var(--page-bg);
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
p{ margin:0; }

.ab-sr{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- top ---------- */
.ab-top{ position:relative; line-height:0; }
.ab-top__bg{ width:100%; height:auto; }
.ab-title{ display:none; }

.ab-back{
  position:absolute;
  top:30px; left:40px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  padding:11px 22px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:var(--wine);
  font-family:var(--text);
  font-size:15px; font-weight:500; line-height:1; letter-spacing:.02em;
  text-decoration:none;
  backdrop-filter:blur(4px);
  transition:background .2s ease, transform .2s ease;
}
.ab-back:hover{ background:#fff; transform:translateY(-1px); }
.ab-back:focus-visible{ outline:2px solid var(--wine); outline-offset:3px; }

/* ---------- coral band ---------- */
.ab-band{ position:relative; line-height:0; }
.ab-band__bg{ width:100%; height:auto; }
.ab-band__photo{ display:none; }

.ab-copy{
  position:absolute;
  left:calc(662 * var(--u));
  top:calc(284.5 * var(--u));
  width:calc(736 * var(--u));
  color:#fff;
  font-family:var(--text);
  font-weight:400;
  font-size:calc(20 * var(--u));
  line-height:calc(30 * var(--u));
}
.ab-copy p + p{ margin-top:calc(30 * var(--u)); }
.ab-copy__lead{ font-weight:700; }

/* ---------- call to action ---------- */
.ab-cta{
  height:calc(98 * var(--u));
  background:var(--peach);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ab-cta span{
  font-family:var(--text);
  font-weight:700;
  font-size:calc(43.7 * var(--u));
  line-height:1;
  letter-spacing:calc(0.7 * var(--u));
  text-transform:uppercase;
  color:var(--wine);
}

/* ---------- social ---------- */
.ab-social{ position:relative; line-height:0; }
.ab-social__bg{ width:100%; height:auto; }

.ab-hot{
  position:absolute;
  border-radius:999px;
  z-index:2;
}
.ab-hot::after{
  content:"";
  position:absolute;
  inset:calc(-11 * var(--u));
  border-radius:999px;
  background:rgba(140,28,18,0);
  transition:background .2s ease;
}
.ab-hot:hover::after{ background:rgba(140,28,18,.10); }
.ab-hot:focus-visible{ outline:2px solid #8C1C12; outline-offset:6px; }

.ab-hot--li{ left:calc(572 * var(--u)); top:calc(77 * var(--u)); width:calc(64 * var(--u)); height:calc(64 * var(--u)); }
.ab-hot--ml{ left:calc(685 * var(--u)); top:calc(86 * var(--u)); width:calc(70 * var(--u)); height:calc(45 * var(--u)); }
.ab-hot--ig{ left:calc(804 * var(--u)); top:calc(82 * var(--u)); width:calc(54 * var(--u)); height:calc(54 * var(--u)); border-radius:calc(16 * var(--u)); }

.ab-social .lsx-social{ display:none; }


/* =========================================================
   RESPONSIVE — below 900px the composition becomes a stack
   ========================================================= */
@media (max-width:900px){
  body{
    background-color:var(--page-bg);
    background-image:url("assets/bg-pattern.png");
    background-position:top center;
    background-size:1440px auto;
    background-repeat:repeat;
  }

  /* live heading instead of the wide artwork */
  .ab-top{ padding:78px 24px 0; line-height:normal; }
  .ab-top__bg{ display:none; }
  .ab-title{
    display:block;
    margin:0;
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(54px,15vw,96px);
    line-height:.94;
    color:var(--title);
    text-align:left;
  }
  .ab-title span{ display:inline-block; }
  .ab-title__rule{
    display:inline-block;
    vertical-align:.30em;
    width:min(38vw,190px);
    height:4px;
    margin-left:14px;
    background:var(--title);
  }

  .ab-band{
    line-height:normal;
    background:var(--coral);
    margin-top:34px;
    padding:44px 24px 52px;
    text-align:left;
  }
  .ab-band__bg{ display:none; }
  .ab-band__photo{
    display:block;
    width:min(400px,78%);
    height:auto;
    margin:0 auto 38px;
  }
  .ab-copy{
    position:static;
    width:100%;
    max-width:560px;
    margin:0 auto;
    font-size:17px;
    line-height:26px;
  }
  .ab-copy p + p{ margin-top:26px; }

  .ab-cta{ height:auto; padding:26px 24px; }
  .ab-cta span{
    font-size:clamp(22px,6.4vw,40px);
    letter-spacing:.01em;
    text-align:center;
  }

  .ab-social{ line-height:normal; padding:0; }
  .ab-social__bg{ display:none; }
  .ab-hot{ display:none; }
  .ab-social .lsx-social{ display:flex; padding:54px 24px 64px; margin-top:0; }

  .ab-back{ top:16px; left:16px; font-size:13px; padding:9px 16px 10px; }
}