@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&family=DM+Serif+Display:ital@0;1&family=Josefin+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

:root {
  --mint: #c9e8df;
  --mint-deep: #8fbeb2;
  --pink: #f1c8c8;
  --pink-deep: #c98f98;
  --cream: #fffaf7;
  --text: #4f474b;
  --soft-text: #887d81;
  --heading: #8fbeb2;
  --link: #b98793;
  --shadow: rgba(134, 105, 124, 0.13);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

body {
  overflow-x: clip;
  margin: 0;
  padding: 0;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 21px;
  line-height: 1.8;
  color: var(--text);
  background-color: #f5f5f2;
  background-image:
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)),
    url("img/pattern.jpg");
  background-repeat: repeat;
  background-size: 400px auto;
  background-attachment: fixed;
  text-shadow: 0 1px 1px rgba(255,255,255,0.68);
  image-rendering: auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(241,200,200,.20), transparent 28%),
    radial-gradient(circle at 88% 76%, rgba(201,232,223,.22), transparent 30%),
    radial-gradient(circle at 50% 2%, rgba(255,250,247,.72), transparent 34%);
}

img { max-width: 100%; height: auto; }

.page-wrap {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto 42px;
  animation: fadeIn 0.8s ease;
}

.site-header {
  position: relative;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto 30px;
  padding: 0;
  text-align: center;
}

.header-image { position: relative; z-index: 1; }

.site-header img {
  display: block;
  width: 1200px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  opacity: .95;
  transition: opacity .4s ease;
}

.site-header img:hover {
  opacity: 1;
}


/* Navi */
.main-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 40px);
  width: min(1040px, 92%);
  margin: 0 auto 60px;
}

.main-nav a {
  position: relative;
  display: inline-block;
  padding: 10px 22px 9px;
  border-radius: 999px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(.82rem, 1.4vw, .98rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8d747e;
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.54), rgba(255,250,247,.34)),
    radial-gradient(circle at 24% 8%, rgba(241,200,200,.22), transparent 60%);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow:
    0 7px 18px rgba(134,105,124,.055),
    inset 0 -8px 16px rgba(201,232,223,.13);
  text-shadow: 0 1px 0 rgba(255,255,255,.86);
  transition: color .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 8px;
  height: .45em;
  z-index: -1;
  border-radius: 999px 60% 999px 70%;
  background: linear-gradient(90deg, rgba(241,200,200,.18), rgba(201,232,223,.20));
  opacity: .75;
  transition: .35s ease;
}

.main-nav a:hover {
  color: #719f95;
  transform: translateY(-1px);
  background: rgba(255,255,255,.58);
  border-color: rgba(241,200,200,.46);
  box-shadow:
    0 10px 22px rgba(134,105,124,.075),
    0 0 18px rgba(201,232,223,.18),
    inset 0 -8px 16px rgba(241,200,200,.10);
}

.main-nav a:hover::after {
  left: 14px;
  right: 14px;
  background: linear-gradient(90deg, rgba(201,232,223,.28), rgba(241,200,200,.16));
  opacity: .9;
}

.content {
  width: min(1160px, 92%);
  margin: -50px auto 0;
  padding: 0;
}

section {
  max-width: 900px;
  margin: 0 auto 54px;
}

.paper-card,
.intro-box {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  padding: 0;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* lil update box */

.update-box {
	position: relative;
	overflow: hidden;

	width: min(100%, 680px);

	margin: 28px auto;
	padding: 18px 28px;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.74),
			rgba(255,250,247,.58)
		),
		radial-gradient(
			circle at 0% 100%,
			rgba(241,200,200,.18),
			transparent 45%
		),
		radial-gradient(
			circle at 100% 0%,
			rgba(201,232,223,.22),
			transparent 45%
		);

	border: 1px solid rgba(255,255,255,.78);
	border-radius: 22px;

	box-shadow:
		0 10px 28px rgba(134,105,124,.08);

	backdrop-filter: blur(2px);

	text-align: left;
}


/* update rows */

.update-line {
	display: flex;
	align-items: baseline;

	gap: 12px;

	padding: 8px 0;
}

.update-line + .update-line {
	border-top: 1px solid rgba(174,145,159,.12);
}


.update-label {
	min-width: 105px;

	font-size: 10px;
	font-weight: 700;

	letter-spacing: 1.3px;
	text-transform: uppercase;

	color: #aa7f91;
}


.update-content {
	font-size: 13px;
	line-height: 1.6;

	color: #6f6268;
}


.update-content a {
	color: #a46f86;

	text-decoration: none;

	border-bottom: 1px solid rgba(164,111,134,.28);

	transition: .2s ease;
}


.update-content a:hover {
	color: #80566a;

	border-bottom-color: rgba(128,86,106,.55);
}


/* mobile */

@media (max-width: 600px) {

	.update-box {
		width: auto;

		margin: 24px 12px;
		padding: 17px 20px;

		border-radius: 20px;
	}

	.update-line {
		display: block;
	}

	.update-label {
		display: block;

		margin-bottom: 2px;
	}

}

.credits {
    font-size: 14px;
    color: #b0b0b0;
    line-height: 1.5;
    letter-spacing: 0.3px;
    margin: 10px 0;
}

blockquote {
    position: relative;
    padding: 35px;
    margin: 35px 0;

    background:
        url(img/paper-texture.jpg),
        linear-gradient(
            135deg,
            #fff7f4,
            #fdfdfd
        );

    border: 1px solid #f5d9d5;
    border-radius: 18px;

    font-family: "EB Garamond", serif;
    font-size: 1.2rem;
    line-height: 1.9;
    color: #656565;

    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;

    box-shadow:
        0 6px 15px rgba(0,0,0,.05);
}

blockquote:before {
    content: "❝";
    position: absolute;
    top: -10px;
    left: 18px;
    font-size: 4.5rem;
    color: #c9ebe3;
}

blockquote::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed #f8cfd2;
    border-radius: 12px;
    pointer-events: none;
}

.quote-author {
    display: block;
    margin-bottom: 10px;
    color: #d99ca5;
    font-size: .9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* abbreviations */

abbr[title] {
    text-decoration: none;
    color: inherit;

    background: linear-gradient(
        to top,
        rgba(201,232,223,.35),
        rgba(241,200,200,.28)
    );

    border-bottom: 2px dotted rgba(111,156,147,.82);

    padding: 0 .18em;
    border-radius: 4px;
}

/* toggle */

.toggle-link {
    display: inline;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 21px;
    font-weight: bold;
    color: #666;
    text-decoration: underline;
    cursor: pointer;
    transition: color .3s ease;
}

.toggle-link:hover {
    color: #d78da6;
}

.toggle-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}

.toggle-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .35s ease, transform .35s ease;
}

.toggle-content.active {
    grid-template-rows: 1fr;
}

.toggle-content.active .toggle-inner {
    opacity: 1;
    transform: translateY(0);
}

/* + paragraphs */


.para-list {
    position: relative;
    padding-left: 42px;
    margin: 1.8rem 0;
}

.para-list::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        rgba(151,184,177,.9),
        rgba(151,184,177,.45)
    );
}

/* heads */
h1 {
  position: relative;
  display: table;
  margin: 0 auto 30px;
  padding: 0 .28em;
  font-family: 'Playfair Display', 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  font-style: italic;
  line-height: .95;
  text-transform: lowercase;
  letter-spacing: .045em;
  color: rgba(255,255,255,.93);
  text-align: center;
  text-shadow:
    0 0 3px rgba(92,82,88,.22),
    0 2px 0 rgba(255,255,255,.45),
    0 0 14px rgba(201,232,223,.28),
    0 0 20px rgba(241,200,200,.22);
}

h1::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 6%;
  bottom: .02em;
  height: .22em;
  z-index: -1;
  border-radius: 60% 999px 70% 999px;
  background: linear-gradient(90deg, rgba(241,200,200,.18), rgba(201,232,223,.24));
}

h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
  margin: 0 0 18px;
}

h3 {
  margin-bottom: 35px;
}

h2 {
  position: relative;
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-style: italic;
  letter-spacing: .03em;
  color: #97b8b1;

  text-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(151,184,177,.15),
    0 2px 4px rgba(151,184,177,.12),
    0 0 6px rgba(201,232,223,.10);
}

/* flower */
h2::before {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);

  background: url("img/flower.png") center/contain no-repeat;

  opacity: .18;
  filter: blur(.5px);
  z-index: -1;
}

h2::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 10%;
  bottom: .1em;
  height: .5em;

  background: rgba(241,200,200,.12);
  border-radius: 999px;

  filter: blur(10px);
  z-index: -1;
}

h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-style: italic;
  letter-spacing: .02em;
  text-align: left;
  color: #c3a6af;

  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(195,166,175,.12),
    0 2px 4px rgba(195,166,175,.08);
}

.asideheader {
  margin-bottom: 12px;
  text-align: left;
  color: #8fbeb2;
}

.asideheader::before {
  content: "♡";
  color: #c98f98;
  margin-right: .45em;
}

p {
  margin: 0 0 20px;
  text-align: justify;
  hyphens: auto;
}

.first {
  font-size: 1.08em;
  line-height: 1.72;
}

/* normal txt links */
a:not(.main-nav a):not(.beloved-section a) {
    position: relative;
    z-index: 1;
    color: #96727a;
    font-weight: 600;
    text-decoration: none;
    padding: 0 .08em;

    background:
        linear-gradient(
            90deg,
            rgba(233,220,226,.35),
            rgba(241,228,223,.30),
            rgba(228,238,233,.25)
        );

    background-repeat: no-repeat;
    background-size: 100% .45em;
    background-position: 0 90%;

    transition: all .4s ease;
}

/* watercolor */
a:not(.main-nav a):not(.beloved-section a)::before {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 0;
    height: .95em;
    z-index: -1;

    background:
        radial-gradient(circle at 12% 60%, rgba(233,220,226,.22), transparent 35%),
        radial-gradient(circle at 40% 35%, rgba(241,228,223,.18), transparent 40%),
        radial-gradient(circle at 75% 55%, rgba(228,238,233,.16), transparent 35%),

        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.025) 0px,
            rgba(255,255,255,.025) 2px,
            transparent 2px,
            transparent 6px
        );

    border-radius:
        42% 58% 46% 54% /
        58% 40% 60% 42%;

    filter: blur(2px);
    opacity: .75;
    mix-blend-mode: multiply;
    pointer-events: none;

    transition: all .4s ease;
}

/* underline */
a:not(.main-nav a):not(.beloved-section a)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .08em;
    height: 2px;

    background:
        repeating-linear-gradient(
            95deg,
            rgba(201,228,220,.75) 0px,
            rgba(201,228,220,.75) 8px,
            rgba(201,228,220,.45) 10px,
            rgba(201,228,220,.45) 14px
        );

    border-radius: 999px;
    opacity: .75;
    transition: all .35s ease;
    pointer-events: none;
}

/* hover */
a:not(.main-nav a):not(.beloved-section a):hover {
    color: #6f9c93;
    background-size: 100% .95em;
    transform: translateY(-1px);
}

a:not(.main-nav a):not(.beloved-section a):hover::before {
    opacity: .95;
    filter: blur(1px);
    transform: scale(1.05);
}

a:not(.main-nav a):not(.beloved-section a):hover::after {
    opacity: .35;
    transform: translateY(1px);
}

/* annotations! */

.annotation {
  display: block;
  margin: .5rem 0 1rem;
  padding-left: .9rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #9a9a9a;
  border-left: 2px solid rgba(190, 190, 190, .35);

  text-align: justify;
  hyphens: auto;
}

.annotation::before {
  content: "✻";
  margin-right: .25rem;
  color: #97b8b1;
}

sup {
  font-size: .65em;
  vertical-align: super;
  color: #97b8b1;
  margin-left: 1px;
}

q {
  position: relative;
  display: inline;
  padding: 0.08em 0.35em;
  color: #6b5b63;
  font-style: italic;
  quotes: "“" "”";

  background: linear-gradient(
    102deg,
    rgba(111, 156, 147, 0.20) 0%,
    rgba(150, 190, 181, 0.16) 35%,
    rgba(169, 112, 126, 0.18) 78%,
    rgba(169, 112, 126, 0.08) 100%
  );

  border-radius: 14px 20px 16px 18px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

q::before,
q::after {
  color: #a9707e;
  opacity: .8;
}

b, strong {
  position: relative;
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  color: #a9707e;
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 .24em;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

b::before, strong::before {
  content: "";
  position: absolute;
  inset: 55% 0 8% 0;
  z-index: -1;
  border-radius: 70% 999px 60% 999px;
  background: rgba(241,200,200,.34);
  transform: rotate(-1deg);
}

i, em {
  position: relative;
  font-family: 'Playfair Display', serif;
  color: #6f9c93;
  font-size: .95em;
  font-style: italic;
  letter-spacing: .03em;
  text-shadow: 0 0 10px rgba(201,232,223,.35);
}

i::after, em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .05em;
  height: .18em;
  border-radius: 999px;
  background: rgba(201,232,223,.36);
  z-index: -1;
}

u {
  text-decoration: none;
  border-bottom: 2px solid rgba(241,200,200,.78);
}

ul {
    list-style: none;
    padding-left: 2.2em;
}

ul li {
    position: relative;
    margin: .7em 0;

    text-align: justify;
    text-justify: inter-word;
}

ul li::before {
    content: "";
    position: absolute;
    left: -2em;
    top: 0.15em;

    width: 22px;
    height: 22px;

    background: url("img/rose-bullet.png") no-repeat center;
    background-size: contain;

    opacity: .45;
}

.smallleftimg {
  float: left;
  width: 86px;
  height: 86px;
  object-fit: cover;
  margin: 6px 18px 10px 0;
  border-radius: 50%;
  padding: 5px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 20px rgba(134,105,124,.12);
}

.soft-divider {
  position: relative;
  width: 70%;
  height: 78px;
  margin: 20px auto 48px;
}

.soft-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,232,223,.62), rgba(241,200,200,.62), rgba(201,232,223,.62), transparent);
}

.soft-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%) rotate(10deg);
  background: url("img/19.png") no-repeat center / contain;
  opacity: .60;
}

.ribbon-divider {
  width: 220px;
  height: 2px;
  margin: 55px auto;
  position: relative;
  background: linear-gradient(
    90deg,
    #c9e8df,
    #f1c8c8,
    #c9e8df
  );
}

.ribbon-divider::before,
.ribbon-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(201,232,223,.8);
  transform: translateY(-50%) rotate(45deg);
}

.ribbon-divider::before {
  left: -25px;
}

.ribbon-divider::after {
  right: -25px;
}
.heart {
  color: rgba(201,143,152,.75);
  margin-left: 5px;
  font-size: 0.75em;
}

.feature-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feature-links article { text-align: center; }
.feature-links p { color: var(--soft-text); font-size: .98rem; }
.feature-links a { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }

/* Footer */

.site-footer {
  position: relative;
  width: min(860px, 90%);
  margin: 70px auto 34px;
  padding: 22px 30px;
  text-align: center;
  color: #8f868a;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.54), rgba(255,250,247,.38)),
    radial-gradient(circle at 15% 50%, rgba(241,200,200,.20), transparent 38%),
    radial-gradient(circle at 82% 50%, rgba(201,232,223,.25), transparent 42%);
  border: 1px solid rgba(255,255,255,.66);
  box-shadow: 0 12px 32px rgba(134,105,124,.08);
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 16% 50%, rgba(241,200,200,.20), transparent 36%),
    radial-gradient(circle at 84% 50%, rgba(201,232,223,.20), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.28), transparent 48%);
  pointer-events: none;
}

.site-footer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(201,143,152,.07);
  font-size: 4.6rem;
  line-height: 1;
  pointer-events: none;
}

.site-footer p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.site-footer a {
  position: relative;
  z-index: 1;
  color: #7e787b;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .70rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  box-shadow: none;
  transition: .35s ease;
}

.site-footer a:hover {
  color: #8fbeb2;
  letter-spacing: .18em;
  text-shadow: 0 0 10px rgba(201,232,223,.45);
}

.site-footer b,
.site-footer strong {
  position: relative;
  z-index: 1;
  font-size: 1.08em;
  color: #7c7277;
  letter-spacing: .18em;
  font-weight: 700;
}

.site-footer b::before,
.site-footer strong::before {
  background: rgba(241,200,200,.22);
}

.link-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 23px;

	margin-top: 25px;
	margin-bottom: 25px;
}

.link-grid img {
	display: block;

	padding: 6px;

	background: rgba(255, 255, 255, .75);

	border: 1px solid rgba(226, 185, 207, .85);

	outline: 1px dashed rgba(188, 164, 209, .75);
	outline-offset: 4px;

	border-radius: 8px;

	transition:
		border-color .25s ease,
		outline-color .25s ease,
		background .25s ease,
		transform .25s ease;
}

.link-grid img:hover {
	border-color: rgba(176, 202, 222, .95);
	outline-color: rgba(215, 161, 194, .95);

	background: rgba(248, 244, 252, .9);
}

/* pic decs */

.imgframe {
  position: relative;
  display: inline-block;
  overflow: hidden;

  border-radius: 30px;
  padding: 8px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.80),
      rgba(255,250,247,.55)
    ),
    radial-gradient(
      circle at 20% 20%,
      rgba(241,200,200,.28),
      transparent 55%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(201,232,223,.34),
      transparent 60%
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.75),
    0 14px 28px rgba(134,105,124,.12);

  opacity: .82;

  transition: .45s ease;
}

/* frames */

.imgframe img {
  display: block;

  max-width: 100%;
  height: auto;

  border-radius: 24px;

  opacity: .82;

  filter:
    saturate(.92)
    contrast(.98);

  transition: .45s ease;
}

/* rate */

.imgframe.left {
  float: left;
  margin: 10px 28px 18px 0;
}

.imgframe.right {
  float: right;
  margin: 10px 0 18px 28px;
}

/* hover */

.imgframe:hover {
  opacity: 1;

  transform:
    translateY(-4px)
    rotate(-1.5deg);

  box-shadow:
    0 0 0 1px rgba(241,200,200,.60),
    0 20px 36px rgba(134,105,124,.16),
    0 0 25px rgba(201,232,223,.30);
}

.imgframe:nth-of-type(even):hover {
  transform:
    translateY(-4px)
    rotate(1.5deg);
}

.imgframe:hover img {
  opacity: 1;

  transform: scale(1.03);

  filter:
    saturate(1.08)
    contrast(1.02);
}

/* sweep */

.imgframe::after {
  content: "";

  position: absolute;

  top: -60%;
  left: -160%;

  width: 75%;
  height: 240%;

  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255,255,255,.08) 38%,
      rgba(255,255,255,.42) 50%,
      rgba(255,255,255,.08) 62%,
      transparent 80%
    );

  filter: blur(10px);

  transform: rotate(18deg);

  opacity: .7;

  transition: 1.15s ease;

  pointer-events: none;
}

.imgframe:hover::after {
  left: 170%;
}

/* img links */

a.img-soft {
    opacity: .58;
    transition: opacity .8s ease;
}

a.img-soft img {
    transition:
        transform .9s ease,
        filter .9s ease;

    filter:
        brightness(92%)
        saturate(85%);
}

a.img-soft:hover {
    opacity: 1;
}

a.img-soft:hover img {
    transform:
        translateY(-3px)
        scale(1.025)
        rotate(-.8deg);

    filter:
        brightness(110%)
        saturate(110%);
}

/* 'fancy' img (opacity tweaks!) */

.fancy-image {
    display: block;
    margin: 0 auto;
    opacity: 0.8;
    filter: grayscale(85%);
    transition: all 0.5s ease;
}

.fancy-image:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.img-right {
    float: right;
    margin: 0 0 .8rem .6rem;
}

.img-left {
    float: left;
    margin: 0 .6rem .8rem 0;
}

.clear {
    clear: both;
}

/* lace imgs */

.lace-frame {
  --lace: url("img/laceborder.png");

  position: relative;
  width: auto;
  aspect-ratio: 1 / 1;
  padding: 42px;
  margin: 0 .6rem;
  border-radius: 50%;

  background:
    radial-gradient(circle, rgba(255,255,255,.96), rgba(241,200,200,.22));

  box-shadow:
    0 18px 38px rgba(73, 54, 62, .24),
    0 6px 14px rgba(111, 156, 147, .18);

  transition:
    transform .35s ease,
    filter .35s ease;
}

.lace-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;

  opacity: .8;

  transition:
    opacity .45s ease,
    filter .45s ease,
    transform .45s ease;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.8),
    0 8px 18px rgba(80, 60, 70, .18);
}

.lace-frame::before {
  content: "";
  position: absolute;
  inset: -18px;
  background-image: var(--lace);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;

  filter:
    drop-shadow(0 8px 8px rgba(80, 60, 70, .22))
    drop-shadow(0 0 8px rgba(255,255,255,.85));
}

.lace-frame:hover {
  transform: translateY(-4px) scale(1.015);
  filter: brightness(1.03);
}

.lace-frame:hover img {
  opacity: 1;
}

.favorite-characters {
    --mint: #dcefe9;
    --mint-light: #f3faf7;
    --pink: #f3dce5;
    --pink-light: #fff7fa;
    --rose: #c99aa9;
    --text: #70656a;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 34px 26px;
    max-width: 850px;
    margin: 40px auto;
    padding: 30px;
}

.fav-card {
    text-align: center;
    position: relative;
}

/* portrait frame */
.fav-frame {
    width: 130px;
    height: 130px;
    margin: 0 auto 15px;
    padding: 7px;
    box-sizing: border-box;
    position: relative;

    background:
        linear-gradient(135deg, var(--mint-light), var(--pink-light));

    border: 1px solid #eadde1;
    border-radius: 15px;

    box-shadow:
        0 4px 14px rgba(132, 108, 116, 0.07),
        inset 0 0 0 3px rgba(255,255,255,.75);
}

/* tiny corners */
.fav-frame::before,
.fav-frame::after {
    position: absolute;
    z-index: 2;
    color: var(--rose);
    background: #fff;
    border: 1px solid #eadde1;
    width: 22px;
    height: 22px;
    line-height: 20px;
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: 12px;
}

.fav-frame::before {
    content: "❀";
    top: -8px;
    left: -8px;
}

.fav-frame::after {
    content: "❀";
    bottom: -8px;
    right: -8px;
}

.fav-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;

    /* fade */
    opacity: 0.65;
    filter: brightness(0.92) saturate(0.75);

    transition:
        opacity 0.35s ease,
        filter 0.35s ease;
}

/* fully visible */
.fav-card:hover .fav-frame img {
    opacity: 1;
    filter: brightness(1) saturate(1);
}

/* text */
.fav-info {
    position: relative;
    padding-top: 4px;
}

.fav-name {
    display: block;

    font-family: "DM Serif Display", Georgia, serif;
    font-size: 15px;
    font-weight: normal;
    letter-spacing: .15px;
    color: #695b61;
}

.fav-source {
    display: block;
    margin-top: 3px;

    font-family: "Crimson Text", Georgia, serif;
    font-size: 12px;
    font-style: italic;
    color: #a08c94;
}

/* delicate lace-ish divider */
.fav-info::after {
    content: "· ୨୧ ·";
    display: block;
    margin-top: 8px;

    font-family: Georgia, serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: #d8b9c3;
}

.fav-card:nth-child(even) .fav-frame {
    background:
        linear-gradient(135deg, var(--pink-light), var(--mint-light));
}

/* hover */
.fav-card {
    transition: transform .25s ease;
}

.fav-card:hover {
    transform: translateY(-3px);
}

.fav-card:hover .fav-frame {
    box-shadow:
        0 7px 18px rgba(132, 108, 116, 0.11),
        inset 0 0 0 3px rgba(255,255,255,.8);
}

/* mobile */
@media (max-width: 500px) {
    .favorite-characters {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 15px;
        padding: 20px 5px;
    }

    .fav-frame {
        width: 115px;
        height: 115px;
    }
}

/* projects */

.project-list {
  max-width: 1000px;
  margin: 5px auto 40px;
}


.project-item {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 46px;
  align-items: start;

  padding: 38px 0;

  border-bottom: 1px solid #eee5e9;
}


.project-portrait {
  width: 266px;

  padding: 7px;

  box-sizing: border-box;

  background: #fffafb;

  border: 1px solid #ead6de;
  border-radius: 22px;

  box-shadow:
    0 3px 14px rgba(150, 120, 135, 0.05),
    0 0 0 4px #f5fbf9,
    0 0 0 5px #d6e8e3;
}


.project-thumb {
    display: block;
    width: 250px;
    height: 250px;

    overflow: hidden;
    border-radius: 15px;

    background: #f4eeee;
}

.project-thumb img {
    display: block;

    width: 250px;
    height: 250px;

    object-fit: cover;

    opacity: 0.8;
    filter: grayscale(85%);

    transition:
        opacity 0.5s ease,
        filter 0.5s ease;
}

.project-thumb img:hover {
    opacity: 1;
    filter: grayscale(0%);
}


.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 7px;
  padding: 9px 7px 2px;

  border-top: 1px solid #eee0e5;
}


/* flower */

.project-flower {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;

  line-height: 1;

  color: #d49aaf;
}


/* since */

.project-label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;

  line-height: 1;

  letter-spacing: 1.3px;
  text-transform: lowercase;

  color: #86aaa3;
}


.project-text {
  min-width: 0;
}


/* heading */

.project-text h2 {
  margin: 2px 0 12px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;

  font-weight: normal;
  line-height: 1.35;
}


/* heading link */

.project-text h2 a {
  color: #c486a2;

  text-decoration: none;

  transition: color 0.4s ease;
}

.project-text h2 a:hover {
  color: #82aaa3;
}


/* paragraph */

.project-text p {
  margin: 0 0 18px;

  font-size: 18px;
  line-height: 1.85;

  color: #746d71;
}

.project-text p:last-child {
  margin-bottom: 0;
}


.project-item:nth-child(even) .project-portrait {
  box-shadow:
    0 3px 14px rgba(150, 120, 135, 0.05),
    0 0 0 4px #fff8fa,
    0 0 0 5px #ead4de;
}

.project-item:nth-child(even) .project-text h2 a {
  color: #82aaa3;
}

.project-item:nth-child(even) .project-text h2 a:hover {
  color: #c486a2;
}

/* mobile tweaaaaks */

@media (max-width: 650px) {

  .project-list {
    margin: 30px auto;
  }

  .project-item {
    grid-template-columns: 1fr;

    gap: 26px;

    padding: 32px 0;
  }

  .project-portrait {
    width: 266px;
    max-width: 100%;
  }

  .project-thumb {
    width: 250px;
    height: 250px;

    max-width: 100%;
  }

  .project-thumb img {
    width: 100%;
    height: 100%;
  }

  .project-text h2 {
    font-size: 19px;
  }

  .project-text p {
    font-size: 14px;
    line-height: 1.8;
  }

}

/* fancybox */
.fancybox-bg {
  background:
    radial-gradient(circle at 20% 20%, rgba(184, 235, 218, .35), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(255, 198, 187, .28), transparent 38%),
    rgba(250, 248, 244, .82);
  backdrop-filter: blur(8px);
}

.fancybox-slide--image {
  padding: 38px;
}

.fancybox-content,
.fancybox-image {
  box-shadow:
    0 18px 45px rgba(98, 139, 125, .28),
}

.fancybox-caption {
    background: transparent !important;
    color: #fff !important;
    text-align: center;
    font-size: 13px;
    letter-spacing: .05em;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.fancybox-caption__body {
    background: none !important;
    border: 0 !important;
    padding: 0;
    color: #fff !important;
}

.fancybox-button {
  background: rgba(255, 247, 242, .82);
  color: #7ca998;
  border-radius: 50%;
  margin: 8px 6px;
  transition: all .25s ease;
  box-shadow: 0 6px 18px rgba(124, 169, 152, .22);
}

.fancybox-button:hover {
  background: #cfeee3;
  color: #d89b94;
  transform: translateY(-2px);
}

.fancybox-navigation .fancybox-button {
  width: 46px;
  height: 46px;
}

.fancybox-progress {
  background: linear-gradient(90deg, #bdebdc, #ffc9c0);
}

.fancybox-thumbs {
  background: rgba(255, 247, 242, .75);
  backdrop-filter: blur(8px);
}

.fancybox-thumbs__list a {
  border-radius: 14px;
  opacity: .7;
  transition: .25s ease;
}

.fancybox-thumbs__list a:before {
  border: 3px solid #bdebdc;
}

.fancybox-thumbs__list a:hover,
.fancybox-thumbs__list a.fancybox-thumbs-active {
  opacity: 1;
}


/* tooltip */
.custom-tooltip {
  position: fixed;
  z-index: 9999;

  max-width: min(300px, calc(100vw - 28px));

  padding: 10px 16px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.94),
      rgba(255,250,247,.88)
    ),

    radial-gradient(
      circle at 20% 20%,
      rgba(241,200,200,.25),
      transparent 55%
    ),

    radial-gradient(
      circle at 80% 80%,
      rgba(201,232,223,.28),
      transparent 60%
    );

  border: 1px solid rgba(255,255,255,.75);

  box-shadow:
    0 8px 22px rgba(134,105,124,.13);

  color: #6f6569;

  font-family:
  'Crimson Text',
  'Noto Serif JP',
  'Hiragino Mincho ProN',
  'Yu Mincho',
  serif;

  font-size: .9rem;

  line-height: 1.45;

  letter-spacing: .02em;

  text-transform: none;

  text-align: center;

  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;

  pointer-events: none;

  opacity: 0;

  transform: translateY(4px);

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.custom-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

/* beloved! */
.beloved-section {
  max-width: 850px;
  margin: 40px auto;
  padding: 35px 20px 50px;
  text-align: center;
  position: relative;
}

/* before */
.beloved-section::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 40px;
}

.beloved-section h2 {
  margin-bottom: 0;
}

.beloved-section h3 {
  margin-top: -6px;
  margin-bottom: 28px;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-style: italic;
  color: #c3a6af;
}

/* grid */
.beloved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 26px;
  max-width: 620px;
  margin: 0 auto;
  justify-items: center;
}

/* item */
.beloved-item {
  text-align: center;
}

/* avatars */
.beloved-item a {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(241, 200, 200, .25);

  box-shadow:
    0 0 0 6px rgba(255,255,255,.65),
    0 0 0 7px rgba(241,200,200,.35),
    0 10px 22px rgba(134,105,124,.12);

  transition: .35s ease;
}

.beloved-item a:hover {
  transform: translateY(-6px) scale(1.04);
  background: rgba(201, 232, 223, .28);

  box-shadow:
    0 0 0 6px rgba(255,255,255,.75),
    0 0 0 7px rgba(201,232,223,.45),
    0 14px 26px rgba(134,105,124,.15);
}

.beloved-item img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* heart */
.beloved-item .heart {
  display: block;
  margin-top: 8px;
  color: rgba(201,143,152,.45);
  font-size: .9rem;
}

/* grid fanlist */

.fanlisting-grid {
    display: grid;

    grid-template-columns: repeat(2, 360px);
    justify-content: center;

    gap: 42px 40px;

    max-width: 1000px;

    margin: 0;

    padding-top: 40px;
    padding-bottom: 50px;
}


.fanlisting-item {
    width: 360px;

    background: #ffffff;

    border: 1px solid #eadde2;
    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 5px 20px rgba(120, 95, 108, 0.06),
        0 0 0 4px #f6fbf9;
}


.fanlisting-image {
    padding: 18px 20px 17px;

    background: #ffffff;
}


/* image container */

.fanlisting-thumb {
    display: block;

    width: 320px;
    height: 200px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 15px;

    background: #f5f1f3;
}


/* actual image */

.fanlisting-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.8;
    filter: grayscale(85%);

    transition:
        opacity 0.5s ease,
        filter 0.5s ease;
}


/* hover */

.fanlisting-thumb:hover img {
    opacity: 1;
    filter: grayscale(0%);
}


.fanlisting-caption {
    position: relative;

    padding: 24px 28px 28px;

    box-sizing: border-box;

    text-align: left;

    background: #ffffff;

    border-top: 1px solid #eee1e6;
}


/* symb */

.fanlisting-caption::before {
    content: "✦";

    position: absolute;

    top: -9px;
    left: 50%;

    transform: translateX(-50%);

    padding: 0 10px;

    background: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;

    color: #d29ab1;
}


.fanlisting-title {
    margin: 0 0 7px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;

    font-weight: normal;
    font-style: italic;

    line-height: 1.4;
}


.fanlisting-title a {
    color: #bd7f9c;

    text-decoration: none;

    transition: color 0.35s ease;
}


.fanlisting-title a:hover {
    color: #7fa89f;
}


.fanlisting-info {
    margin: 0 0 13px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;

    line-height: 1.5;

    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #87a9a2;
}


.fanlisting-description {
    margin: 0;

    font-size: 15px;
    line-height: 1.75;

    color: #81777c;
}


.fanlisting-item:nth-child(even) {
    box-shadow:
        0 5px 20px rgba(120, 95, 108, 0.06),
        0 0 0 4px #fff7fa;
}


.fanlisting-item:nth-child(even) .fanlisting-caption::before {
    color: #83aaa2;
}


.fanlisting-item:nth-child(even) .fanlisting-title a {
    color: #7fa89f;
}


.fanlisting-item:nth-child(even) .fanlisting-title a:hover {
    color: #bd7f9c;
}


.fanlisting-item:nth-child(even) .fanlisting-info {
    color: #c28ba4;
}



@media (max-width: 780px) {

    .fanlisting-grid {
        grid-template-columns: 360px;

        gap: 36px;

        padding-top: 60px;
        padding-bottom: 80px;
    }

}

/* responsive tweaks */

@media (max-width: 420px) {

    .fanlisting-grid {
        grid-template-columns: minmax(0, 1fr);

        padding-top: 45px;
        padding-bottom: 65px;
    }

    .fanlisting-item {
        width: 100%;
    }

    .fanlisting-image {
        padding-left: 15px;
        padding-right: 15px;
    }

    .fanlisting-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 8 / 5;
    }

}

/* unrealized projects yikes... */


.future-stars {
	display: grid;

	grid-template-columns: repeat(auto-fit, 170px);

	justify-content: center;
	align-items: start;
        
        gap: 38px 45px;
	width: 100%;
	margin: 38px auto;
}

.future-star {
	width: 170px;

	text-align: center;

	cursor: default;
}

.future-avatar {
	position: relative;

	width: 150px;
	height: 150px;

	margin: 0 auto 16px;
	padding: 5px;

	border-radius: 50%;

	background:
		linear-gradient(
			135deg,
			#efb8d0 0%,
			#f8dce7 32%,
			#f7eee9 50%,
			#d8eadb 72%,
			#bcdcc8 100%
		);

	box-shadow:
		0 5px 16px rgba(111, 83, 105, 0.12),
		0 0 0 1px rgba(255, 255, 255, 0.90);

	transition:
		transform 0.4s ease,
		box-shadow 0.4s ease;
}

.future-avatar::before {
	content: "";

	position: absolute;

	inset: -7px;

	border: 1px solid rgba(201, 150, 177, 0.30);
	border-radius: 50%;

	pointer-events: none;

	transition:
		border-color 0.4s ease,
		transform 0.4s ease;
}

.future-avatar::after {
	content: "✦";

	position: absolute;

	top: 2px;
	right: -2px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 22px;
	height: 22px;

	border-radius: 50%;

	background: rgba(255, 255, 255, 0.96);

	color: #c98fad;

	font-size: 10px;
	line-height: 1;

	box-shadow:
		0 3px 9px rgba(117, 88, 108, 0.14);

	z-index: 3;

	transition:
		transform 0.4s ease,
		color 0.4s ease;
}

.future-avatar img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	border-radius: 50%;

	/* opacity!! */
	filter: grayscale(100%);
	opacity: 0.64;

	transition:
		filter 0.55s ease,
		opacity 0.55s ease,
		transform 0.55s ease;
}


.future-name {
	color: #765f6d;

	font-size: 15px;
	font-weight: 600;

	line-height: 1.45;

	letter-spacing: 0.055em;

	transition:
		color 0.35s ease;
}


.future-status {
	margin-top: 4px;

	color: #b18fa2;

	font-size: 10px;
	font-style: italic;

	line-height: 1.4;

	letter-spacing: 0.08em;

	text-transform: lowercase;

	opacity: 0.78;

	transition:
		color 0.35s ease,
		opacity 0.35s ease;
}


.future-star:hover .future-avatar {
	transform: translateY(-4px);

	box-shadow:
		0 9px 22px rgba(122, 90, 112, 0.17),
		0 0 0 1px rgba(255, 255, 255, 0.95);
}


/* mint */

.future-star:hover .future-avatar::before {
	border-color: rgba(145, 190, 159, 0.58);

	transform: scale(1.045);
}


/* star moving */

.future-star:hover .future-avatar::after {
	color: #91b99d;

	transform: rotate(90deg) scale(1.08);
}


/* full opacityy */

.future-star:hover .future-avatar img {
	filter: grayscale(0%);
	opacity: 1;

	transform: scale(1.025);
}


/* names */

.future-star:hover .future-name {
	color: #ad688e;
}


/* hover */

.future-star:hover .future-status {
	color: #84a98e;
	opacity: 1;
}


/* resp. tweakies */

@media (max-width: 600px) {

	.future-stars {
		grid-template-columns: repeat(auto-fit, 145px);

		gap: 30px 16px;

		margin: 30px auto;
	}

	.future-star {
		width: 145px;
	}

	.future-avatar {
		width: 125px;
		height: 125px;
	}

}


/* general xx */


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* responsive tweaks */

@media (max-width: 820px) {
  body { font-size: 18px; background-size: 230px auto; }
  .split-section, .feature-links { grid-template-columns: 1fr; }
  .main-nav { gap: 18px; margin-bottom: 42px; }
}

@media (max-width: 620px) {
  .beloved-section table,
  .beloved-section tbody,
  .beloved-section tr,
  .beloved-section td { display: block; }
  .beloved-section td { margin: 0 0 18px; }
}

@media (max-width: 520px) {
  .content { width: 92%; }
  .main-nav { gap: 14px 20px; }
}

@media (max-width: 700px) {
  .site-footer {
    width: min(860px, 92%);
    padding: 18px 22px;
    font-size: .78rem;
  }

  .site-footer::after {
    font-size: 3.8rem;
  }
}


@media (max-width: 760px) {
  .soft-note::before, aside::before {
    left: 8px;
    width: 90px;
  }

  .soft-note::after, aside::after {
    right: 8px;
    width: 82px;
  }
}