@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ivory:#fcf9f6;
  --paper:#fffefd;
  --blush:#f6eeeb;
  --rose:#cf8c93;
  --rose-dark:#be747e;
  --ink:#1f1f1f;
  --charcoal:#5a5552;
  --line:#ddd2ca;
  --soft:#f4efec;
  --font-heading:"Cormorant Garamond",Georgia,serif;
  --font-body:"Inter",Arial,sans-serif;
}

* { box-sizing:border-box; }

html { min-height:100%; }

body {
  min-height:100vh;
  margin:0;
  background:color-mix(in srgb, var(--blush) 78%, #f7eeee);
  color:var(--ink);
  font-family:var(--font-body);
}

button,
a { -webkit-tap-highlight-color:transparent; }

button:focus-visible,
a:focus-visible {
  outline:2px solid var(--rose);
  outline-offset:3px;
}

.link-shell {
  min-height:100vh;
  padding:20px 20px clamp(34px, 6vw, 72px);
}

.link-page {
  width:min(620px, 100%);
  margin:0 auto;
  padding:clamp(36px, 5.5vw, 56px) clamp(24px, 5vw, 48px) clamp(30px, 5vw, 46px);
  border:1px solid color-mix(in srgb, var(--rose) 22%, transparent);
  border-radius:22px;
  background:var(--ivory);
  box-shadow:0 22px 60px rgba(91, 58, 60, .10);
  padding-top: 10px;
}

.brand-wordmark {
  display:grid;
  align-items:center;
  justify-content:center;
  gap:.22em;
  margin-bottom:22px;
  color:var(--ink);
  font-family:var(--font-heading);
  
}
.brand-wordmark img {
  width:100%;
  height:auto;
  max-height: 40px;
}

.brand-style,
.brand-kayla {
  font-size:clamp(30px, 7vw, 44px);
  font-weight:500;
}

.brand-with {
  color:var(--rose-dark);
  font-size:clamp(17px, 4vw, 23px);
  font-style:italic;
  font-weight:500;
}

.profile-header {
  text-align:center;
}

.profile-header h1,
.contact-block h2 {
  margin:0;
  font-family:var(--font-heading);
  font-weight:500;
  letter-spacing:-.025em;
}

.profile-header h1 {
  font-size:clamp(40px, 8vw, 54px);
  line-height:1;
  margin-bottom: 12px;
}

.portrait-wrap {
  display:flex;
  justify-content:center;
  margin:24px 0 22px;
}

.portrait-placeholder {
  display:grid;
  width:min(230px, 68vw);
  aspect-ratio:1 / 1;
  place-items:center;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--rose) 32%, transparent);
  border-radius:50%;
  background:color-mix(in srgb, var(--blush) 72%, white);
  color:var(--rose-dark);
  font-family:var(--font-heading);
  font-size:22px;
}

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

.pink-divider {
  width: 90%;
  height: 1px;
  margin: 0 auto 30px;
  background: color-mix(in srgb, var(--rose) 50%, transparent);
}

.profile-subtitle {
  margin:0;
  color:var(--charcoal);
  font-size:14px;
  font-weight:500;
  line-height:1.6;
  padding-bottom: 28px;
}

.social-row {
  display:flex;
  min-height:42px;
  margin-top:16px;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.social-link,
.social-disabled {
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border:1px solid color-mix(in srgb, var(--rose) 42%, transparent);
  border-radius:50%;
  background:color-mix(in srgb, var(--blush) 68%, white);
  color:var(--rose-dark);
}

.social-link {
  text-decoration:none;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.social-link:hover {
  transform:translateY(-2px);
  border-color:var(--rose);
  background:var(--blush);
}

.social-disabled {
  opacity:1;
}

.social-link svg,
.social-disabled svg {
  width:19px;
  height:19px;
   color: var(--rose-dark);
  fill: var(--rose-dark);
  stroke: var(--rose-dark);
}

.contact-block {
  margin-top:24px;
  padding:22px 18px;
  border:1px solid color-mix(in srgb, var(--rose) 28%, transparent);
  border-radius:12px;
  background:var(--paper);
  text-align:center;
}

.contact-block h2 {
  font-size:27px;
  line-height:1.05;
}

.contact-block > p {
  margin:5px 0 0;
  color:var(--charcoal);
  font-size:13px;
}

.contact-lines {
  display:grid;
  margin-top:13px;
  gap:6px;
}

.contact-lines a,
.contact-lines span {
  color:var(--charcoal);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}

.contact-lines a:hover { text-decoration:underline; }

.primary-links {
  display:grid;
  margin-top:24px;
  gap:12px;
}

.link-pill {
  display:flex;
  min-height:52px;
  width:100%;
  padding:12px 20px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--rose-dark);
  border-radius:999px;
  background:transparent;
  color:black;
  font-family:var(--font-heading);
  font-size:19px;
  font-weight:1000;
  line-height:1.1;
  text-align:center;
  text-decoration:none;
  transition:background .18s ease, transform .18s ease;
}

.link-pill:hover {
  transform:translateY(-2px);
  background:var(--blush);
}

button.link-pill {
  cursor:not-allowed;
  opacity:.48;
}

@media (max-width:640px) {
  .link-shell {
    padding:14px 10px 24px;
  }

  .link-page {
    padding:30px 18px 24px;
    border-radius:16px;
  }

  .portrait-placeholder {
    width:min(210px, 64vw);
  }

  .contact-block {
    padding:20px 14px;
  }

  .link-pill {
    min-height:50px;
    padding-inline:16px;
    font-size:18px;
  }
}