/* Ava Cherry — all media remains editable in index.html. No external dependencies. */
:root {
  color-scheme:light;
  --paper:#fbf7f2;
  --ink:#302124;
  --muted:#766a6a;
  --cherry:#9f303f;
  --line:#e8ded7;
  --pink:#edd2d8
}

* {
  box-sizing:border-box
}
body {
  margin:0;
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#efe3df;
  background-image:radial-gradient(ellipse at 12% 5%,#d7e5e9 0,transparent 42%),radial-gradient(ellipse at 93% 30%,#edcad5 0,transparent 47%),radial-gradient(ellipse at 14% 80%,#ddaaa2 0,transparent 48%);
  min-height:100vh;
  padding:38px 20px 48px
}
a {
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
a:focus-visible {
  outline:3px solid #942c40;
  outline-offset:5px
}
a {
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease
}
a:active {
  transform:scale(.985)
}
.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.page {
  max-width:500px;
  margin:auto;
  background:var(--paper);
  border:1px solid #ffffffbd;
  border-radius:34px;
  overflow:hidden;
  box-shadow:0 24px 85px #653b4520,0 3px 12px #653b4510
}
.masthead {
  height:70px;
  padding:0 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.wordmark {
  font-weight:800;
  font-size:22px;
  letter-spacing:-1.4px
}
.wordmark>span {
  font-weight:400
}
.masthead-note {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:8px;
  letter-spacing:1.7px;
  font-weight:650
}
.masthead-note .icon {
  width:23px;
  height:23px;
  color:var(--cherry)
}
.hero {
  margin:0 12px;
  position:relative;
  height:494px;
  border-radius:26px;
  overflow:hidden;
  background:#dfbfc4
}
.media {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,#e7c4cd,#d7abb3)
}
.media img,.media video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  opacity:0;
  transition:opacity .3s
}
.media.is-loaded img,.media.is-loaded video {
  opacity:1
}
.media.is-loaded .placeholder {
  visibility:hidden
}
.placeholder {
  position:absolute;
  inset:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center
}
.media-label {
  position:absolute;
  top:14px;
  right:14px;
  border:1px solid currentColor;
  border-radius:4px;
  padding:5px 7px;
  color:#63434e;
  font-size:7px;
  line-height:1;
  letter-spacing:1.3px;
  font-weight:600;
  opacity:.75
}
.hero-media {
  background:radial-gradient(ellipse at 25% 22%,#f6e3d9,transparent 65%),linear-gradient(145deg,#edcdd6,#cc9d9f 70%,#ab747d)
}
.hero-media:after {
  content:"";
  position:absolute;
  inset:45% 0 0;
  background:linear-gradient(transparent,#3c14276b);
  z-index:2;
  pointer-events:none
}
.hero-monogram {
  position:absolute;
  left:8px;
  top:2px;
  color:#a355656b;
  font:italic 380px/.9 Georgia,serif;
  letter-spacing:-90px;
  transform:rotate(-9deg)
}
.hero-monogram>span {
  display:inline-block;
  transform:translateY(65px)
}
.hero-stamp {
  position:absolute;
  right:28px;
  bottom:152px;
  color:#6e3c48;
  font:italic 36px/.9 Georgia,serif;
  transform:rotate(-10deg);
  text-align:center
}
.hero-eyebrow {
  position:absolute;
  left:22px;
  top:25px;
  z-index:3;
  font-size:9px;
  letter-spacing:2.4px;
  font-weight:650;
  color:#6e4550
}
.hero-profile {
  position:absolute;
  bottom:25px;
  left:22px;
  right:22px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:3;
  color:white
}
.avatar {
  height:60px;
  width:60px;
  border:3px solid #fff9;
  border-radius:50%;
  padding:3px;
  flex-shrink:0
}
.avatar .media {
  border-radius:50%;
  background:#efcbd3
}
.avatar .icon {
  color:#a44757;
  width:29px;
  height:29px
}
.avatar .media-label {
  display:none
}
.name-line {
  display:flex;
  align-items:center;
  gap:7px
}
h1 {
  font-size:31px;
  letter-spacing:-1.2px;
  line-height:1.15;
  margin:0
}
h2 {
  font-size:21px;
  letter-spacing:-.65px;
  margin:0;
  font-weight:700
}
.verified {
  font-size:18px;
  color:#f3ccd6
}
.identity p {
  font-size:12px;
  margin:5px 0 0;
  color:#fffdf6
}
.hero-spark {
  margin-left:auto;
  font-size:38px;
  color:#f3d6ba
}
.profile-intro {
  text-align:center;
  padding:21px 20px 0
}
.profile-intro>p {
  font-size:13px;
  margin:0 0 17px;
  color:var(--muted)
}
.social-icons {
  display:flex;
  justify-content:center;
  gap:10px
}
.social-icons a {
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  background:#fff9
}
.social-icons .icon {
  width:20px;
  height:20px
}
.highlights-section {
  padding:24px 24px 25px;
  border-bottom:1px solid var(--line);
  margin:0 0 25px
}
.highlights {
  display:flex;
  gap:18px;
  overflow:auto;
  scrollbar-width:thin;
  padding:3px 2px 7px
}
.highlight {
  text-align:center;
  flex:1;
  min-width:59px;
  font-size:10px;
  font-weight:550
}
.highlight-ring {
  display:block;
  border:1px solid #c7909b;
  padding:4px;
  border-radius:50%;
  width:64px;
  height:64px;
  margin:0 auto 9px
}
.highlight .media {
  border-radius:50%
}
.highlight .media-label {
  display:none
}
.highlight .icon {
  width:24px;
  height:24px;
  opacity:.75
}
.content {
  padding:0 24px
}
.premium-card {
  position:relative;
  display:block;
  height:226px;
  border-radius:23px;
  overflow:hidden;
  color:#fff
}
.premium-media {
  background:radial-gradient(ellipse at 85% 10%,#c97b8d,transparent 60%),linear-gradient(135deg,#7d273d,#411d2b)
}
.premium-media:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 35%,#30101c9c);
  z-index:2
}
.premium-media .media-label {
  color:#f9d6e0
}
.premium-cherry {
  height:176px;
  width:176px;
  color:#edafbf;
  stroke-width:.55;
  transform:rotate(-18deg) translate(72px,-5px);
  opacity:.5
}
.card-kicker {
  position:absolute;
  top:23px;
  left:22px;
  font-size:8px;
  font-weight:600;
  letter-spacing:2px
}
.premium-copy {
  position:absolute;
  bottom:23px;
  left:22px;
  right:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.premium-copy strong {
  font-size:23px;
  letter-spacing:-.7px;
  display:block
}
.premium-copy small {
  display:block;
  font-size:11px;
  margin-top:7px;
  color:#f3d8df
}
.little-spark {
  color:#f2c8a8;
  font-size:20px
}
.round-arrow {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#ffffff21;
  border:1px solid #ffffff50;
  flex-shrink:0
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px
}
.section-heading>span {
  font-size:7px;
  letter-spacing:1.5px;
  font-weight:600;
  color:var(--muted)
}
.section-heading>.icon {
  width:19px;
  color:var(--cherry)
}
section.featured-section,section.social-section,section.closer-section,section.gallery-section {
  margin-top:32px
}
.featured-card {
  position:relative;
  display:block;
  border-radius:22px;
  overflow:hidden;
  height:250px
}
.featured-media {
  background:linear-gradient(120deg,#deded2,#d3d5c9 60%,#bac6be)
}
.featured-media:after {
  content:"";
  position:absolute;
  inset:60% 0 0;
  background:linear-gradient(transparent,#263c324a);
  z-index:2
}
.feature-art {
  font:52px/.8 Georgia,serif;
  letter-spacing:-3px;
  color:#6d7e6f;
  transform:rotate(-8deg) translate(-54px,-15px)
}
.feature-art em {
  font-size:83px;
  font-weight:normal
}
.feature-play {
  position:absolute;
  right:25px;
  top:92px;
  border:1px solid #687b6b80;
  border-radius:50%;
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  color:#4f6255
}
.feature-play .icon {
  width:17px
}
.featured-copy {
  position:absolute;
  bottom:20px;
  left:20px;
  right:20px;
  color:#fff
}
.featured-copy strong {
  font-size:18px;
  letter-spacing:-.4px;
  display:block
}
.featured-copy>span {
  font-size:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px
}
.featured-copy .icon {
  width:18px;
  height:18px
}
.section-description {
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
  margin:-6px 0 17px
}
.social-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.social-card {
  height:170px;
  position:relative;
  border-radius:20px;
  overflow:hidden
}
.social-card .media {
  background:var(--tile)
}
.social-card .placeholder:before {
  content:"";
  position:absolute;
  width:145px;
  height:145px;
  border:1px solid #ffffff70;
  border-radius:50%;
  right:-25px;
  top:37px;
  box-shadow:0 0 0 24px #ffffff12,0 0 0 49px #ffffff0d
}
.social-card .media:after {
  content:"";
  position:absolute;
  inset:45% 0 0;
  background:linear-gradient(transparent,#22181d7a);
  z-index:2
}
.social-card .media-label {
  top:19px;
  right:10px;
  font-size:6px;
  letter-spacing:.6px;
  border:0;
  padding:3px;
  color:#41303b
}
.platform {
  position:absolute;
  left:13px;
  top:13px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  background:#fff9;
  border-radius:50%;
  color:#402f38
}
.platform .icon {
  width:17px;
  height:17px
}
.social-card-title {
  position:absolute;
  left:15px;
  bottom:16px;
  right:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:16px;
  font-weight:650;
  color:#fff;
  letter-spacing:-.4px
}
.social-card-title .icon {
  width:16px;
  height:16px
}
.tone-1 {
  --tile:linear-gradient(140deg,#e7c2c0,#bd858b);
  background:var(--tile)
}
.tone-2 {
  --tile:linear-gradient(140deg,#cecadf,#8d86a4);
  background:var(--tile)
}
.tone-3 {
  --tile:linear-gradient(140deg,#e9ddbd,#c6b585);
  background:var(--tile)
}
.tone-4 {
  --tile:linear-gradient(140deg,#c6dce1,#8aa9b1);
  background:var(--tile)
}
.tone-5 {
  --tile:linear-gradient(140deg,#d4c7bf,#a89389);
  background:var(--tile)
}
.tone-6 {
  --tile:linear-gradient(140deg,#edc2bd,#c68c89);
  background:var(--tile)
}
.tone-7 {
  --tile:linear-gradient(140deg,#dad5c1,#a3aa92);
  background:var(--tile)
}
.tone-8 {
  --tile:linear-gradient(140deg,#dfc7d4,#b88ea5);
  background:var(--tile)
}
.highlight .media {
  background:var(--tile)
}
.compact-links {
  border-top:1px solid var(--line)
}
.compact-link {
  display:flex;
  align-items:center;
  gap:13px;
  padding:17px 0;
  border-bottom:1px solid var(--line)
}
.link-icon {
  width:42px;
  height:42px;
  background:#f0e5e4;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--cherry)
}
.compact-link strong {
  display:block;
  font-size:13px;
  font-weight:600
}
.compact-link small {
  display:block;
  font-size:10px;
  margin-top:5px;
  color:var(--muted)
}
.compact-link>.icon {
  width:16px;
  height:16px;
  margin-left:auto;
  color:#97858a
}
.gallery {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}
.gallery-item {
  height:114px;
  border-radius:14px;
  overflow:hidden
}
.gallery-item .media {
  background:var(--tile)
}
.gallery .placeholder:before {
  content:"✳";
  font-size:46px;
  font-weight:200;
  color:#ffffff5e
}
.gallery .media-label {
  top:auto;
  bottom:11px;
  right:0;
  left:0;
  text-align:center;
  font-size:6px;
  letter-spacing:.6px;
  border:0;
  padding:0
}
.premium-reminder {
  margin-top:26px;
  padding:17px 18px;
  border-radius:17px;
  background:#f0dce0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#793343;
  font-size:12px;
  font-weight:650
}
.premium-reminder>span {
  display:flex;
  align-items:center;
  gap:10px
}
.premium-reminder>.icon {
  width:18px
}
footer {
  text-align:center;
  padding:36px 24px 27px
}
.footer-signature {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:11px;
  color:var(--muted)
}
.footer-signature>span {
  font:italic 30px Georgia,serif;
  color:var(--cherry);
  letter-spacing:-2px
}
.footer-signature>.icon {
  color:var(--cherry);
  width:21px;
  height:21px;
  margin-left:4px
}
footer nav {
  display:flex;
  justify-content:center;
  margin-top:17px;
  gap:9px
}
footer nav a {
  font-size:10px;
  color:var(--muted);
  min-height:44px;
  min-width:52px;
  display:grid;
  place-items:center
}
footer>p {
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted);
  margin:8px 0 0
}
.route-feedback {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translate(-50%,15px);
  max-width:calc(100% - 32px);
  width:max-content;
  background:#302124;
  color:white;
  border-radius:14px;
  padding:13px 20px;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:10;
  box-shadow:0 5px 25px #30212420
}
.route-feedback.is-visible {
  opacity:1;
  transform:translate(-50%,0)
}

@media(hover:hover) {
  .social-card:hover,.featured-card:hover,.premium-card:hover {
  transform:translateY(-3px);
  box-shadow:0 9px 20px #5832401a
}
.social-icons a:hover {
  background:#f0dce0;
  transform:translateY(-2px)
}
.highlight:hover {
  transform:translateY(-2px)
}
.compact-link:hover {
  background:#f2e9e2
}
.premium-reminder:hover {
  background:#e9cdd4
}
footer a:hover {
  text-decoration:underline
}

}

@media(max-width:540px) {
  body {
  padding:0;
  background:var(--paper)
}
.page {
  border:0;
  border-radius:0;
  box-shadow:none;
  max-width:500px
}
.masthead {
  height:63px;
  padding:0 22px
}
.hero {
  height:480px
}
.content {
  padding:0 22px
}
.highlights-section {
  padding-left:20px;
  padding-right:20px
}
.highlights {
  gap:13px
}
.hero-profile {
  left:19px;
  right:19px
}
h1 {
  font-size:29px
}

}

@media(max-width:380px) {
  .content {
  padding:0 18px
}
.masthead-note {
  font-size:7px;
  letter-spacing:1.2px
}
.hero {
  height:452px
}
.hero-monogram {
  font-size:330px
}
.hero-stamp {
  right:24px;
  bottom:144px;
  font-size:30px
}
.hero-profile {
  gap:9px;
  left:16px;
  right:16px
}
h1 {
  font-size:27px
}
.avatar {
  width:54px;
  height:54px
}
.hero-spark {
  font-size:29px
}
.social-icons {
  gap:8px
}
.social-icons a {
  width:43px;
  height:43px
}
.highlights {
  gap:14px
}
.highlight {
  min-width:55px
}
.highlight-ring {
  width:58px;
  height:58px
}
.social-card {
  height:156px
}
.premium-copy strong {
  font-size:21px
}
.premium-copy {
  left:18px;
  right:18px
}
.gallery-item {
  height:104px
}

}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
  transition:none!important;
  animation:none!important
}

}