@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=Noto+Serif+Display:wght@200;300;400&display=swap");

:root {
  --ink: #17191d;
  --paper: #f2efea;
  --rose: #ef7184;
  --display: "Noto Serif Display", Georgia, serif;
  --sans: "Manrope", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
.coming-soon { position: relative; min-height: 100svh; overflow: hidden; background: var(--paper); }
.product-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.soft-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(242,239,234,.99) 0%, rgba(242,239,234,.95) 30%, rgba(242,239,234,.72) 45%, rgba(242,239,234,.12) 68%, transparent 82%); }
.page-shell { position: relative; z-index: 1; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(28px,4vw,68px) clamp(28px,5vw,92px) clamp(22px,3vw,48px); }
.brand { width: clamp(250px,20vw,355px); }
.brand-logo { position:relative; width:100%; aspect-ratio:1330/319; }
.brand-logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.brand-logo-black { filter:brightness(0); }
.brand-logo-heart { clip-path:inset(0 74% 69% 18%); }
.brand-tagline { margin-top: 12px; width:100%; padding-left:0; color: rgba(23,25,29,.6); font-size: .58rem; font-weight: 500; letter-spacing: .3em; text-align:center; text-transform: uppercase; }
.intro { align-self: center; width: min(34vw,590px); margin-top: -2vh; }
.eyebrow, .social-label, .page-footer { font-size: .66rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.eyebrow { margin: 0; color: rgba(23,25,29,.72); font-size:1.32rem; line-height:1; letter-spacing:.22em; }
.accent-line { display: block; width: 64px; height: 1px; margin: 20px 0 28px; background: var(--rose); }
.intro h1 { margin: 0; font-family: var(--display); font-size: clamp(3.25rem,4.3vw,5rem); font-weight: 200; line-height: .98; letter-spacing: -.045em; }
.lead { max-width: 470px; margin: 22px 0 0; color: rgba(23,25,29,.74); font-size: clamp(.9rem,1vw,1.05rem); font-weight: 300; line-height: 1.65; }
.social { margin-top: clamp(38px,5vh,64px); }
.social-label { display: block; margin-bottom: 16px; color: rgba(23,25,29,.58); }
.social-links { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.social-links a { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid rgba(23,25,29,.28); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.social-icon { display:block; width:18px; height:18px; flex:0 0 18px; }
.external-arrow { margin-left:1px; }
.page-footer { justify-self:end; align-self:end; color:rgba(23,25,29,.78); font-size:.56rem; text-shadow:0 1px 10px rgba(242,239,234,.95); }

@media (max-width:1100px) and (orientation:landscape) {
  .intro { width: min(42vw,520px); }
  .soft-overlay { background: linear-gradient(90deg,rgba(242,239,234,.98),rgba(242,239,234,.82) 45%,transparent 77%); }
}

@media (max-width:900px), (orientation:portrait) and (max-width:1100px) {
  .product-backdrop { top:auto; bottom:0; height:49%; object-position:58% 58%; }
  .soft-overlay { background: linear-gradient(180deg,var(--paper) 0%,var(--paper) 47%,rgba(242,239,234,.72) 55%,transparent 70%); }
  .page-shell { padding:26px 24px 22px; }
  .brand { width:clamp(250px,44vw,340px); }
  .brand-tagline { margin-top:10px; font-size:.5rem; }
  .intro { align-self:start; width:min(100%,620px); margin-top:clamp(58px,9vh,96px); }
  .accent-line { margin:16px 0 22px; }
  .intro h1 { font-size:clamp(2.8rem,9vw,5.2rem); }
  .lead { max-width:520px; margin-top:16px; }
  .social { margin-top:28px; }
  .page-footer { color:rgba(23,25,29,.82); }
}

@media (max-width:480px) {
  .page-shell { padding:22px 20px 18px; }
  .brand { width:240px; }
  .intro { margin-top:52px; }
  .intro h1 { max-width:330px; font-size:clamp(2.65rem,12vw,3.45rem); }
  .lead { max-width:330px; font-size:.86rem; line-height:1.55; }
  .social-links { gap:12px 24px; }
  .social-links a { font-size:.62rem; }
  .social-icon { width:17px; height:17px; flex-basis:17px; }
  .product-backdrop { height:47%; object-position:60% 58%; }
}