@font-face { font-family: 'Anaktoria'; src: url('fonts/Anaktoria.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Miss Fajardose'; src: url('fonts/MissFajardose-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Pretty on the Inside'; src: url('fonts/poti.ttf') format('truetype'); font-display: swap; }

:root {
  /* same palette as the portfolio */
  --pale-pink: #efcad5;
  --pink-deep: #d9a3b5;
  --spanish-gray: #90939a;
  --gray-dark: #4c4f55;
  --paper: #f6f2f0;
  --ink: #1c2120;
  --gray-soft: color-mix(in srgb, var(--spanish-gray) 30%, white);

  --text: 'Anaktoria', Georgia, serif;                /* body */
  --name: 'Miss Fajardose', cursive;                   /* the name and headings */
  --script: 'Miss Fajardose', cursive;                /* buttons */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; padding: 22px 16px 32px;
  background: var(--pale-pink); color: var(--ink);
  font-family: var(--text); font-size: 1rem; line-height: 1.35;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.window {
  position: relative; max-width: 640px; margin: 0 auto; overflow: hidden;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 34px;
}

/* outlines for clipped shapes: the wrapper draws the ink line, the child is cut to the shape */
.shape {
  display: block;
  filter: drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink));
}
.house   > * { clip-path: polygon(50% 0, 100% 15%, 100% 100%, 0 100%, 0 15%); }
.shield  > * { clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); }
.gem     > * { clip-path: polygon(22% 0, 78% 0, 100% 24%, 100% 76%, 78% 100%, 22% 100%, 0 76%, 0 24%); }
.tag     > * { clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%); }
.lozenge > * { clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%); }
.cloud   > * { clip-path: polygon(4% 14%, 14% 0, 86% 0, 96% 14%, 100% 50%, 96% 86%, 86% 100%, 14% 100%, 4% 86%, 0 50%); }

/* title bar */
.bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--gray-soft); border-bottom: 1.5px solid var(--ink);
  font-size: 1.05rem;
}
.brand { font-family: var(--name); font-size: 2.1rem; line-height: 1; }
.bar-icons { display: flex; justify-content: flex-end; gap: 10px; }
.bar-icons .slot { width: 30px; height: 30px; }

/* the name, in Pretty on the Inside */
.hero { text-align: center; padding: 34px 16px 26px; border-bottom: 1.5px solid var(--ink); }
h1 { margin: 0; font-family: var(--name); font-weight: 400; line-height: .95; font-size: clamp(3.6rem, 16vw, 6.4rem); }
h1 span { display: inline-block; }
.sub { margin: 10px 0 0; font-family: var(--script); font-size: 2rem; line-height: 1; rotate: -2deg; }

/* sections */
.block { padding: 30px 24px 0; }
h2 { position: relative; display: inline-block; margin: 0 0 14px; font-family: var(--name); font-size: 3rem; font-weight: 400; line-height: 1; }

/* three cards, three shapes */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cards > li { transition: translate .2s ease; }
.cards > li:hover { translate: 0 -5px; }
.card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%;
  padding: 14px 10px 18px; background: #fff; text-align: center; transition: background .2s ease;
}
.cards > li:hover .card { background: var(--pale-pink); }
.house .card { padding-top: 34px; }
.shield .card { padding-bottom: 38px; }
.gem .card { padding: 24px 14px; }
.card b { font-weight: 400; font-size: 1.1rem; }
.card .icon { width: 100%; max-width: 128px; aspect-ratio: 1; }
.card .cap { font-size: 1rem; display: inline-block; }
.house .cap { rotate: -3deg; }
.shield .cap { rotate: 2deg; }
.gem .cap { rotate: -2deg; }

/* note */
.note { display: flex; align-items: center; gap: 14px; padding: 18px 40px; background: #fff; }
.note p { margin: 0; font-size: 1.05rem; rotate: -1.5deg; }
.portrait { position: relative; flex: none; width: 240px; height: 240px; }
.portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.portrait text { font-family: var(--script); font-size: 29px; fill: var(--ink); }
.avatar { position: absolute; inset: 21%; width: 58%; height: 58%; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ink); }

/* pills are buttons: Miss Fajardose */
.pills { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.pill {
  display: block; padding: 4px 38px 6px 22px; background: #fff; font-family: var(--script); font-size: 2.5rem; line-height: 1;
  transition: background .2s ease;
}
.pill:hover { background: var(--pale-pink); }
.arrow { width: 84px; height: 60px; margin-left: auto; }

.star-me { left: 30%; top: -24px; width: 30px; height: 30px; }

/* little handwritten asides */
.whisper { position: absolute; z-index: 3; margin: 0; font-family: var(--script); font-size: 2.1rem; line-height: 1; pointer-events: none; }
.w1 { left: 6%; top: 18.5%; width: 21%; rotate: -4deg; }
.thanks { margin: -34px 0 56px; text-align: center; font-family: var(--script); font-size: 2.1rem; line-height: 1; rotate: -2deg; }

.discord { left: 56%; top: -10px; width: 88px; height: 60px; }

.notewrap { position: relative; }
.angel-dog { left: 57%; top: 5%; width: 118px; height: 80px; }
.angel-cat { left: 66%; top: 66%; width: 112px; height: 72px; }

/* send button */
.send-wrap { position: relative; width: min(300px, calc(100% - 48px)); margin: 40px auto 64px; }
.send {
  display: block; padding: 8px 34px 10px; background: var(--gray-soft); text-align: center;
  font-family: var(--script); font-size: 3rem; line-height: 1; transition: background .2s ease;
}
.send:hover { background: var(--pale-pink); }
.cursor { position: absolute; right: -22px; bottom: -26px; width: 64px; height: 64px; }

/* decoration */
.deco { position: absolute; z-index: 2; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.deco.dragging { cursor: grabbing; z-index: 8; filter: drop-shadow(0 6px 6px rgba(28, 33, 32, .25)); }
.hint { margin: 8px 0 0; font-size: .85rem; font-style: italic; }
.star { width: 38px; height: 38px; }
.note-l { left: 8%; top: 11%; width: 40px; height: 72px; }
.dancer { right: 4%; top: 11%; width: 110px; height: 136px; }
.cat-bl { left: 4%; bottom: 2%; width: 100px; height: 130px; }
.cat-br { right: 4%; bottom: 2%; width: 92px; height: 92px; }


.s2 { right: 3%; top: 2.6%; rotate: 14deg; }
.s3 { left: 1.5%; top: 31%; rotate: -12deg; scale: .8; }
.s4 { right: 2%; top: 37%; rotate: 20deg; scale: .9; }
.s5 { left: 7%; bottom: 17%; rotate: -8deg; scale: 1.1; }
.s6 { right: 30%; bottom: 7%; rotate: 10deg; }

/* a slot is an empty box until its picture exists in assets/ */
.slot { display: block; }
.slot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.awaiting {
  display: grid; place-items: center; width: 100%; height: 100%; min-height: 100%; padding: 2px; overflow: hidden;
  border: 1px dashed var(--ink); background: #fff; color: var(--ink);
  font: 400 .5rem/1.1 Arial, sans-serif; text-align: center; overflow-wrap: anywhere;
}
.deco .awaiting { opacity: .75; }
.bar-icons .awaiting { font-size: .3rem; }

@media (max-width: 480px) {
  .block { padding: 26px 14px 0; }
  .cards { gap: 8px; }
  .card { padding: 10px 4px 14px; gap: 6px; }
  .house .card { padding-top: 24px; }
  .shield .card { padding-bottom: 28px; }
  .gem .card { padding: 18px 8px; }
  .card .cap { font-size: .8rem; }
  .note { padding: 16px 20px; gap: 6px; }
  .portrait { width: 170px; height: 170px; }
  .portrait text { font-size: 28px; }
    .note p { font-size: .88rem; }
  .w1 { display: none; }
  .star { width: 28px; height: 28px; }
  .bar { grid-template-columns: 1fr auto; }
  .brand { display: none; }
  .date { font-size: .9rem; }
  .bar-icons .slot { width: 26px; height: 26px; }
  .hint { max-width: 205px; margin: 8px auto 0; }
  .sub { font-size: 1.75rem; }
  .dancer { width: 62px; height: 76px; right: 1%; top: 17.5%; }
  .note-l { left: 2%; top: 9.5%; width: 26px; height: 48px; }
        .cat-br { width: 64px; height: 64px; right: 3%; bottom: 1.5%; }
  .cat-bl { width: 66px; height: 86px; }
    .thanks { font-size: 1.8rem; margin-top: -30px; }
  h2 { font-size: 2.4rem; }
  .pills { margin-bottom: 52px; }
  .discord { left: 39%; top: calc(100% + 6px); width: 72px; height: 48px; }
          .pills { gap: 8px; }
  .s3 { top: 27%; }
  .s4 { top: 31%; }
  .angel-dog { left: auto; right: 4%; top: 3%; width: 72px; height: 48px; }
  .angel-cat { left: auto; right: 4%; top: auto; bottom: 4%; width: 76px; height: 48px; }
  .pill { font-size: 2.1rem; padding: 3px 30px 5px 16px; }
  .arrow { width: 60px; height: 44px; }
    .bar { padding: 10px 12px; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cards > li, .card, .pill, .send { transition: none; }
}