:root {
  color-scheme: light;
  --cream: #fffaf7;
  --paper: rgba(255, 255, 255, 0.9);
  --peach: #f6a16f;
  --orange: #e38153;
  --pink: #ef8da2;
  --rose: #d0798a;
  --ink: #504643;
  --muted: #7d726e;
  --line: rgba(215, 108, 130, 0.22);
  --shadow: 0 24px 70px rgba(133, 72, 62, 0.15);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Montserrat", sans-serif;
  background:
    radial-gradient(circle at 18% 10%, rgba(246, 161, 111, 0.2), transparent 35%),
    radial-gradient(circle at 85% 82%, rgba(239, 141, 162, 0.18), transparent 32%),
    linear-gradient(145deg, #fffaf7 0%, #fff4f1 50%, #fff9f5 100%);
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(237, 122, 63, 0.12);
  border-radius: 50%;
  content: "";
}

body::before { top: -110px; right: -70px; }
body::after { bottom: -130px; left: -80px; }

.page-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 42px 18px;
}

.profile-card {
  position: relative;
  width: min(100%, 470px);
  padding: 42px 34px 28px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 34px;
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: center;
  backdrop-filter: blur(16px);
}

.home-card {
  overflow: hidden;
  padding: 0 34px 28px;
}

.profile-top {
  margin: 0 -34px 26px;
  padding: 42px 34px 28px;
  background:
    radial-gradient(circle at 18% 5%, rgba(255, 181, 190, 0.28), transparent 45%),
    linear-gradient(135deg, rgba(255, 225, 226, 0.72), rgba(255, 239, 218, 0.62));
}

.profile-top .intro { margin-bottom: 0; }

.portrait-ring,
.mini-portrait-ring {
  display: grid;
  margin: 0 auto;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--peach), var(--pink));
  box-shadow: 0 14px 34px rgba(215, 108, 130, 0.24);
}

.portrait-ring { width: 176px; height: 176px; }
.mini-portrait-ring { width: 110px; height: 110px; }

.portrait,
.mini-portrait {
  display: block;
  border: 5px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}

.portrait { width: 166px; height: 166px; }
.mini-portrait { width: 102px; height: 102px; }

.profile-header { margin-top: 24px; }

.eyebrow {
  margin: 0 0 8px;
  color: var(--rose);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--orange);
  font: 700 clamp(2rem, 9vw, 2.6rem)/1.12 "Playfair Display", serif;
  letter-spacing: -0.035em;
}

.tagline {
  margin: 10px 0 0;
  color: var(--rose);
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 500;
}

.intro {
  margin: 25px auto 26px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.links { display: grid; gap: 12px; }

.link-button {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 18px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--rose);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.link-button:hover,
.link-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(215, 108, 130, 0.17);
  outline: none;
}

.link-button svg,
.empty-catalog svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.link-button .icon-dot { fill: currentColor; stroke: none; }
.link-button--soft { background: #fff1ef; }
.link-button--outline { border-color: var(--line); background: #fff; }
.link-button--primary { color: #fff; background: linear-gradient(135deg, #f4a6b6, #e8879c); }

footer {
  margin-top: 27px;
  color: #ab9f9b;
  font-size: 0.7rem;
}

.catalog-card {
  width: min(100%, 520px);
  padding-top: 76px;
}

.back-link {
  display: inline-flex;
  position: absolute;
  top: 24px;
  left: 28px;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.catalog-card .tagline { margin-bottom: 28px; }

.product-list { display: grid; gap: 13px; text-align: left; }

.product-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 88px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(120, 108, 104, 0.12);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 5px 15px rgba(87, 61, 54, 0.06);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.product-card:hover,
.product-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(232, 135, 156, 0.35);
  box-shadow: 0 10px 24px rgba(133, 72, 62, 0.12);
  outline: none;
}

.product-card img {
  width: 68px;
  height: 68px;
  border-radius: 11px;
  object-fit: cover;
}

.product-copy { display: grid; gap: 7px; min-width: 0; }

.product-copy strong {
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.25;
}

.product-copy > span {
  color: var(--rose);
  font-size: 0.8rem;
  font-weight: 500;
}

.product-arrow {
  color: #c8b6b1;
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 520px) {
  .page-shell { padding: 18px 12px; }
  .profile-card { padding: 34px 22px 24px; border-radius: 26px; }
  .home-card { padding: 0 22px 24px; }
  .profile-top { margin: 0 -22px 24px; padding: 34px 22px 26px; }
  .portrait-ring { width: 154px; height: 154px; }
  .portrait { width: 144px; height: 144px; }
  .intro { font-size: 0.84rem; }
  .back-link { top: 20px; left: 20px; }
  .catalog-card { padding: 68px 17px 22px; }
  .product-card { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; }
  .product-card img { width: 60px; height: 60px; }
  .product-copy strong { font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .link-button { transition: none; }
}