:root{
  --ink:#20181b;
  --ink2:#2e2225;
  --paper:#e8ddd1;
  --paper2:#d8c8ba;
  --wine:#70253d;
  --wine2:#8d3b54;
  --rose:#b66b7e;
  --cream:#f4eadf;
  --muted:#75666a;
  --line:#bba69d;
  --shadow:rgba(20,10,13,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(143,53,77,.18), transparent 22%),
    radial-gradient(circle at 90% 80%, rgba(143,53,77,.14), transparent 25%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    #171215;
  font-family:Constantia, "Times New Roman", serif;
  min-height:100vh;
}
body:before, body:after{
  content:"";
  position:fixed; z-index:-1; pointer-events:none;
  width:100%; height:22px; left:0;
  background:
    radial-gradient(circle at 11px 0, transparent 8px, #5c2336 9px 11px, transparent 12px) 0 0/22px 22px repeat-x;
  opacity:.9;
}
body:before{top:0}
body:after{bottom:0; transform:rotate(180deg)}

a{color:inherit}
.site-shell{
  width:min(1120px,94vw);
  margin:38px auto;
  padding:12px;
  background:
    linear-gradient(135deg, transparent 0 5px, #7a2b45 5px 8px, transparent 8px 13px) 0 0/18px 18px,
    #b89e9a;
  border:1px solid #d9c5bc;
  box-shadow:0 0 0 5px #2b2024, 0 0 0 7px #927078, 0 20px 60px var(--shadow);
}
.inner{
  background:
    repeating-linear-gradient(90deg, rgba(80,55,50,.035) 0 1px, transparent 1px 4px),
    var(--paper);
  border:2px solid #4a3639;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.25);
}
header.hero{
  margin:14px;
  padding:22px 26px 18px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.09), transparent 20%),
    linear-gradient(135deg,#20171b,#332126 55%,#6f2942);
  color:#efe3d9;
  border:2px solid #bca8a0;
  outline:1px solid #4a3539;
  position:relative;
  overflow:hidden;
}
.hero .lace{
  position:absolute; inset:0 0 auto; height:18px;
  background:radial-gradient(circle at 9px 9px,#9a4961 0 5px,transparent 6px) 0 0/18px 18px repeat-x;
  opacity:.75;
}
.kicker{letter-spacing:.25em;text-transform:uppercase;font-size:.72rem;color:#d6bbc0}
.site-title{
  font-size:clamp(2.4rem,7vw,5.6rem);
  line-height:.88;
  margin:24px 0 8px;
  letter-spacing:-.045em;
  text-shadow:3px 3px 0 #4f1d2d;
}
.subtitle{font-size:1rem;max-width:650px;color:#e5d6d0}
.nav{
  display:flex; flex-wrap:wrap; gap:7px;
  margin:14px;
  padding:10px;
  background:#2a2023;
  border:3px double #cdb9b0;
  justify-content:center;
}
.nav a{
  text-decoration:none;
  color:#eee2da;
  padding:8px 14px;
  border:1px solid transparent;
  font-size:.93rem;
}
.nav a:hover,.nav a.active{
  border-color:#b87589;
  background:#512536;
}
.layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:18px;
  padding:14px;
}
@media(max-width:760px){.layout{grid-template-columns:1fr}.site-shell{margin:20px auto}.site-title{font-size:3rem}}
.card{
  background:rgba(249,239,228,.7);
  border:2px solid #6e5658;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.28), 4px 5px 0 rgba(68,38,45,.13);
  padding:18px;
  position:relative;
}
.card:before{
  content:"";
  position:absolute; inset:6px;
  border:1px solid #c1aaa0; pointer-events:none;
}
.card>*{position:relative}
.side h2,.content h1,.content h2{
  font-weight:400;
  margin-top:0;
  font-variant:small-caps;
  letter-spacing:.04em;
}
.side h2{font-size:1.5rem}
.content h1{font-size:2.3rem}
.content h2{font-size:1.55rem;color:#6c263d}
.small{font-size:.87rem;color:var(--muted);line-height:1.5}
.rule{height:1px;background:#a9938e;margin:16px 0}
.bio-mini{font-size:.95rem;line-height:1.55}
.stamp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.stamp{
  min-height:72px; display:grid; place-items:center; text-align:center;
  background:#e7d8cc; border:2px dashed #76545d;
  color:#512735; text-decoration:none; padding:8px;
  transform:rotate(-1deg);
}
.stamp:nth-child(even){transform:rotate(1.5deg)}
.stamp:hover{background:#d9c1c5;transform:translateY(-2px) rotate(0)}
.notice{
  background:#eee1d5;
  border-left:5px solid var(--wine);
  padding:12px 14px;
  margin:14px 0;
}
.quote{
  font-size:1.25rem; line-height:1.45; text-align:center;
  font-style:italic; color:#5b3a43;
  padding:12px 30px;
}
.sticker{position:absolute;width:78px;filter:drop-shadow(2px 3px 1px rgba(20,10,13,.35))}
.sticker.moth{right:-18px;top:-28px;transform:rotate(8deg)}
.sticker.rose{left:-28px;bottom:-35px;transform:rotate(-14deg)}
.sticker.heart{right:16px;top:14px;width:62px;transform:rotate(12deg)}
.sticker.candle{right:-5px;bottom:-30px;width:55px;transform:rotate(3deg)}
.sticker.dagger{left:50%;top:-25px;width:130px;transform:translateX(-50%) rotate(-3deg)}
.lace-box{
  border:10px solid transparent;
  border-image:radial-gradient(circle,#7a2b45 0 3px,transparent 4px) 10 round;
  padding:15px;
}
.entry{
  margin:0 0 16px;
  padding:15px 18px;
  background:#eee2d7;
  border:1px solid #9e8782;
  position:relative;
}
.entry .date{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#7a3046}
.entry h3{margin:4px 0 8px;font-size:1.45rem;font-weight:400}
.diary-wrap{position:relative;overflow:hidden}
.diary-track{
  display:flex; width:max-content;
  transition:transform .55s cubic-bezier(.6,-.02,.25,1);
}
.diary-page{
  width:min(690px,calc(100vw - 100px));
  margin-right:18px;
  min-height:480px;
  background:#eee4d9;
  border:2px solid #665053;
  box-shadow:8px 8px 0 rgba(69,39,46,.15);
  padding:30px;
  position:relative;
}
.diary-page:after{
  content:""; position:absolute; inset:11px; border:1px solid #b9a29a; pointer-events:none;
}
.diary-page>*{position:relative}
.page-controls{display:flex;justify-content:center;align-items:center;gap:18px;margin:15px 0}
.arrow{
  width:46px;height:40px;border:2px solid #6c4650;background:#2d2024;color:#eee0d8;
  cursor:pointer;font-family:inherit;font-size:1.25rem;
}
.arrow:hover{background:#70253d}
.page-count{font-size:.85rem;color:#725961}
.photo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
@media(max-width:700px){.photo-grid{grid-template-columns:repeat(2,1fr)}}
.photo{
  aspect-ratio:1; overflow:hidden; background:#35282c; border:7px solid #eee2d5;
  outline:1px solid #796066; box-shadow:3px 4px 0 rgba(61,35,41,.18);
  display:grid;place-items:center;color:#d9c7c0;text-align:center;padding:10px;
}
.photo:nth-child(odd){transform:rotate(-1.2deg)}.photo:nth-child(even){transform:rotate(1deg)}
.photo img{width:100%;height:100%;object-fit:cover}
.interest-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:600px){.interest-list{grid-template-columns:1fr}}
.interest{
  padding:14px;background:#2a2024;color:#e9dbd4;border:1px solid #8c6871;
}
.interest b{color:#dca2b1;font-weight:400}
ul{line-height:1.65}
footer{
  padding:18px;text-align:center;color:#735f64;font-size:.82rem;
}
.music-player{
  border:1px solid #a48c8a;background:#e6d8cc;padding:10px;margin-top:12px;
}
.marquee{
  overflow:hidden;white-space:nowrap;border-top:1px dotted #987f83;border-bottom:1px dotted #987f83;
  padding:7px 0;color:#6d3043;font-size:.85rem;
}
.marquee span{display:inline-block;animation:scroll 16s linear infinite}
@keyframes scroll{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.field{display:block;width:100%;padding:10px;margin:7px 0 12px;border:1px solid #9a8381;background:#f2e7dc;font:inherit;color:var(--ink)}
textarea.field{min-height:130px;resize:vertical}
.button{padding:9px 15px;border:2px solid #62424b;background:#38252b;color:#f1e3db;font-family:inherit;cursor:pointer}
.button:hover{background:#70253d}
.credit{
  font-size:.76rem;text-align:center;margin:10px 14px 0;color:#e3d0cc;
}