@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=DM+Mono:wght@400;500&family=Shippori+Mincho:wght@400;600&display=swap');

:root{
  --ink:#0a0708;
  --ink-2:#140a0c;
  --paper:#efe7dd;
  --paper-dim:#c8bdb3;
  --blood:#8a0f16;
  --blood-bright:#c8121b;
  --blood-deep:#4b060a;
  --rose:#e8a0aa;
  --bruise:#3a1418;
  --line:#2b1214;
  --shadow: 0 0 0 1px var(--blood-deep), 0 8px 24px rgba(0,0,0,.6);
  --scan: repeating-linear-gradient(
     to bottom,
     rgba(255,255,255,.02) 0 1px,
     transparent 1px 3px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:'Cormorant Garamond', 'Shippori Mincho', Georgia, serif;
  background:
     radial-gradient(1200px 600px at 50% -100px, #2a0509 0%, transparent 70%),
     radial-gradient(800px 400px at 100% 100%, #1a0407 0%, transparent 60%),
     var(--ink);
  color:var(--paper);
  min-height:100vh;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%238a0f16' stroke='%23efe7dd' stroke-width='1.5'/><circle cx='12' cy='12' r='4' fill='%230a0708'/></svg>") 12 12, auto;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;inset:0;
  background:var(--scan);
  pointer-events:none;
  z-index:200;
  mix-blend-mode:overlay;
  opacity:.6;
}
body::after{
  content:"";
  position:fixed;inset:0;
  background:url("/assets/halftone.png");
  opacity:.05;
  pointer-events:none;
  z-index:199;
  mix-blend-mode:screen;
}

a{color:var(--blood-bright);text-decoration:none;border-bottom:1px dashed var(--blood-deep)}
a:hover{color:var(--rose);background:var(--blood-deep);border-bottom-color:var(--rose)}

::selection{background:var(--blood);color:var(--paper)}

/* -------- Sitewide decorations -------- */
.drapes{
  position:fixed;top:-10px;left:0;right:0;height:240px;
  background:url("images/curtain.png") center top/auto 240px no-repeat;
  pointer-events:none;z-index:180;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.75));
  transform-origin:top center;
  animation:drape-sway 9s ease-in-out infinite alternate;
}
@keyframes drape-sway{0%{transform:scaleX(1)}100%{transform:scaleX(1.02) translateX(-4px)}}
.deco-candelabra{
  position:fixed;bottom:-8px;right:6px;width:130px;height:180px;z-index:170;pointer-events:none;
  background:url("images/candelabra.png") center/contain no-repeat;
  filter:drop-shadow(0 0 22px rgba(200,18,27,.55));
  animation:candle-flicker 2.4s ease-in-out infinite alternate;
  opacity:.92;
}
@keyframes candle-flicker{
  0%{filter:drop-shadow(0 0 16px rgba(200,18,27,.4)) brightness(.98)}
  60%{filter:drop-shadow(0 0 30px rgba(232,160,170,.7)) brightness(1.08)}
  100%{filter:drop-shadow(0 0 22px rgba(200,18,27,.55)) brightness(1)}
}
.deco-bow{
  position:fixed;top:0;right:28px;width:100px;height:160px;z-index:182;
  background:url("images/bow.png") center top/contain no-repeat;
  pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));
  transform-origin:top center;
  animation:bow-swing 6s ease-in-out infinite alternate;
}
@keyframes bow-swing{0%{transform:rotate(-2deg)}100%{transform:rotate(2deg)}}
.deco-cupid{
  position:fixed;bottom:80px;left:-10px;width:120px;height:150px;z-index:170;
  background:url("images/cupid.png") center/contain no-repeat;
  pointer-events:none;opacity:.85;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.55));
  animation:cupid-float 7s ease-in-out infinite alternate;
}
@keyframes cupid-float{
  0%{transform:translateY(0) rotate(-4deg)}
  100%{transform:translateY(-24px) rotate(3deg)}
}
.deco-charms{
  position:fixed;top:0;left:34%;width:80px;height:190px;z-index:181;
  background:url("images/charms.png") center top/contain no-repeat;
  pointer-events:none;transform-origin:top center;opacity:.9;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.6));
  animation:charm-sway 3.6s ease-in-out infinite alternate;
}
@keyframes charm-sway{0%{transform:rotate(-6deg)}100%{transform:rotate(6deg)}}
@media (max-width:820px){
  .deco-candelabra,.deco-cupid,.deco-charms,.deco-bow{display:none}
  .drapes{height:150px;background-size:auto 150px}
}

/* -------- Layout wrapper -------- */
.frame{
  max-width:1200px;
  margin:0 auto;
  padding:24px 16px 80px;
  position:relative;
  z-index:1;
}

/* -------- Header -------- */
.site-header{
  position:relative;
  padding:36px 24px 28px;
  border:1px solid var(--blood-deep);
  background: url("/assets/header2.jpg") center 58%/cover;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.site-header::before{
  content:"";
  position:absolute;inset:0;
  background:url("/assets/newsprint.png") center/cover;
  opacity:.08;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.site-header::after{
  content:"夢は静かに、心に咲く。";
  position:absolute;
  top:12px;right:18px;
  font-family:'Shippori Mincho',serif;
  writing-mode:vertical-rl;
  color:var(--paper-dim);
  opacity:.5;
  font-size:12px;
  letter-spacing:.4em;
}

.brand{
  display:flex;align-items:center;gap:22px;
  position:relative;z-index:2;
}
.brand-mark{
  width:78px;height:78px;flex:0 0 78px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--blood);
  box-shadow:0 0 0 4px var(--ink), 0 0 24px var(--blood);
  background:#111;
}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05) saturate(.9)}
.brand-text h1{
  margin:0;
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-style:italic;
  font-size:44px;
  letter-spacing:.02em;
  color:var(--paper);
  text-shadow:2px 2px 0 var(--blood-deep), 0 0 30px rgba(200,18,27,.35);
}
.brand-text h1 .amp{color:var(--blood-bright);font-style:normal}
.brand-text .tag{
  margin:4px 0 0;
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.blink{animation:blink 1.1s steps(2,end) infinite;color:var(--blood-bright)}
@keyframes blink{50%{opacity:0}}

/* -------- Nav -------- */
.site-nav{
  margin-top:14px;
  border:1px solid var(--blood-deep);
  background:var(--ink-2);
  padding:0;
  display:flex;flex-wrap:wrap;
  box-shadow:var(--shadow);
}
.site-nav a{
  flex:1 1 auto;
  text-align:center;
  padding:10px 14px;
  font-family:'DM Mono',monospace;
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--paper);
  border:none;
  border-right:1px solid var(--blood-deep);
  background:transparent;
  transition:background .15s;
}
.site-nav a:last-child{border-right:none}
.site-nav a:hover,
.site-nav a.is-active{
  background:var(--blood-deep);
  color:var(--rose);
}
.site-nav a.is-active::before{content:"❥ "}


/* -------- layout grids -------- */
.grid{
  display:grid;
  gap:18px;
  margin-top:5px;
}
.grid.cols-2{grid-template-columns:2fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  .brand-text h1{font-size:34px}
  .site-header::after{display:none}
}

/* -------- panels -------- */
.panel{
  position:relative;
  background:
     linear-gradient(180deg, rgba(20,10,12,.9), rgba(10,7,8,.95)),
     var(--ink-2);
  border:1px solid var(--blood-deep);
  box-shadow:var(--shadow);
  padding:0;
}
.clearpanel{
  position:relative;
  padding:0;
}

.panel::before,.panel::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none}
.panel::before{top:-1px;left:-1px;border-top:2px solid var(--blood-bright);border-left:2px solid var(--blood-bright)}
.panel::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--blood-bright);border-right:2px solid var(--blood-bright)}

/* variant: v-frame — heavy blood-red frame */
.panel.v-frame{
  border:none;
  box-shadow:
     0 0 0 4px #2a0509,
     0 0 0 6px var(--blood),
     0 0 0 10px #1a0407,
     0 12px 30px rgba(0,0,0,.7);
}
.panel.v-frame::before,.panel.v-frame::after{display:none}

/* variant: v-torn — tilted, dashed */
.panel.v-torn{border:1px dashed var(--blood-bright);transform:rotate(-.4deg)}
.panel.v-torn:hover{transform:rotate(0)}

/* variant: v-tape — a piece of "tape" up top */
.panel.v-tape{margin-top:16px}
.panel.v-tape > .tape{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:100px;height:22px;
  background:linear-gradient(180deg, rgba(232,160,170,.55), rgba(232,160,170,.22));
  border-left:1px dashed rgba(0,0,0,.4);border-right:1px dashed rgba(0,0,0,.4);
  border-radius:2px;z-index:3;
}

/*blood panel*/

.panel.v-blood{
  box-shadow:0 0 30px rgba(200,18,27,.35), inset 0 0 40px rgba(200,18,27,.15);
}
.panel.v-blood::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:18px;
  background:url("https://file.garden/aAdIXYazImdyc4Ee/Divs/reddiv.gif") repeat-x top/auto 18px;
  border:none;width:auto;pointer-events:none;
}
.panel.v-blood::after{display:none}

/*blood panel v2*/

.panel.v-blood2{
  border:2px solid var(--blood-bright);
  background:linear-gradient(180deg, rgba(138,15,22,.35), rgba(10,7,8,.95));
  box-shadow:0 0 30px rgba(200,18,27,.35), inset 0 0 40px rgba(200,18,27,.15);
}
.panel.v-blood2::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:18px;
  background:url("https://file.garden/aAdIXYazImdyc4Ee/Divs/reddiv.gif") repeat-x top/auto 18px;
  border:none;width:auto;pointer-events:none;
}
.panel.v-blood2::after{display:none}

/* rose color panel */
.panel.v-rose{
  border:3px double var(--rose);
  background:radial-gradient(500px 220px at 50% 0%, rgba(232,160,170,.15), transparent 70%), var(--ink-2);
  box-shadow:0 0 0 6px var(--ink), 0 0 24px rgba(232,160,170,.25);
}

/* variant: v-parchment — off-cream page */
.panel.v-parchment{
  background:
     radial-gradient(600px 300px at 20% 0%, rgba(239,231,221,.98), rgba(232,220,205,.95) 60%, rgba(220,205,185,.92)),
     var(--paper);
  color:#1a0709;
  border:1px solid #6b3a2a;
  box-shadow:0 12px 30px rgba(0,0,0,.6), inset 0 0 60px rgba(107,58,42,.25);
}
.panel.v-parchment .panel-head{
  background:linear-gradient(90deg, #6b3a2a, transparent 80%);
  color:#faf3ea;border-bottom:1px dashed #6b3a2a;
}
.panel.v-parchment a{color:var(--blood);border-bottom-color:var(--blood-deep)}

.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;
  background:linear-gradient(90deg, var(--blood-deep), transparent 80%);
  border-bottom:1px solid var(--blood-deep);
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--rose);
}
.panel-head .dots{color:var(--blood-bright);letter-spacing:2px}
.panel-body{padding:18px}

/* shared keyframes */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}



/* -------- buttons -------- */
.btn{
  display:inline-block;
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  padding:5px 10px;
  background:var(--blood-deep);
  color:var(--paper);
  border:1px solid var(--blood);
  border-bottom-color:var(--blood-bright);
  cursor:pointer;
  transition:transform .1s, background .15s;
}
.btn:hover{background:var(--blood);color:var(--paper);transform:translate(-1px,-1px)}
.btn:active{transform:translate(1px,1px)}

/* -------- marquee -------- */
.marquee{
  overflow:hidden;
}
.marquee-track{
  display:inline-block;
  white-space:nowrap;
  animation:scroll 25s infinite alternate;
}
.marquee-track span{margin:0 32px;color:var(--paper-dim)}
.marquee-track b{color:var(--blood-bright);font-weight:400}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-78%))}
}


/* -------- Comments (shared) -------- */
.comment{
  border-top:1px dashed var(--blood-deep);padding:10px 0;
  font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--paper);
}
.comment:first-child{border-top:none}
.comment .who{color:var(--blood-bright);font-weight:600;font-style:italic;margin-right:6px}
.comment .when{color:var(--paper-dim);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.15em}


/* -------- About-style dl (shared) -------- */
.dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.dl dt{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blood-bright)}
.dl dd{margin:0;color:var(--paper)}


/* -------- footer -------- */
.site-foot{
  margin-top:18px;
  padding:16px;
  border:1px solid var(--blood-deep);
  background:var(--ink-2);
  display:flex;justify-content:space-between;align-items:center;
  font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:.25em;
  color:var(--paper-dim);
  flex-wrap:wrap;gap:8px;
}
.site-foot .eye{
  width:22px;height:22px;background:url("/assets/eyes.jpg") center/contain no-repeat;
  display:inline-block;vertical-align:middle;margin-right:6px;
}


/* -------- cursor trail -------- */
.trail{
  position:fixed;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle, var(--blood-bright), transparent 70%);
  pointer-events:none;z-index:9999;mix-blend-mode:screen;
  transform:translate(-50%,-50%);
}


/* -------- glitch on hover -------- */
.glitch:hover{animation:glitch .35s steps(2,end) 1}
@keyframes glitch{
  0%{text-shadow:2px 0 var(--blood-bright), -2px 0 #22e0ff}
  50%{text-shadow:-2px 0 var(--blood-bright), 2px 0 #22e0ff}
  100%{text-shadow:none}
}

/* -------- Left sticker -------- */
.left-sticker{
  position:fixed;top:20px;left:20px;width:200px;height:600px;
  background:url("/assets/miloo.png") center/cover;
  transition:transform .1s;
}
@media (max-width:820px){.watcher{display:none}}

/* -------- Utility -------- */
.center{text-align:center}
.small{font-size:12px;color:var(--paper-dim)}
.divider{
  height:14px;margin:18px 0;
  background:url("/assets/eyes.jpg") repeat-x center/auto 14px;
  opacity:.7;
}

/* -------- Shared form controls (used on guestbook + journal composer) -------- */
.field{display:grid;gap:6px}
.field label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--paper-dim)}
.field input,.field textarea{
  background:var(--ink);color:var(--paper);border:1px solid var(--blood-deep);
  padding:10px 12px;font-family:'DM Mono',monospace;font-size:13px;
}
.field input:focus,.field textarea:focus{outline:1px solid var(--blood-bright)}
.field textarea{min-height:100px;resize:vertical}


/* -------- keychain -------- */
.keychain{
  position:relative;
  z-index:5;
  transform-origin: top center;
  animation: keychain-sway 3.2s ease-in-out infinite, keychain-sparkle 2.4s ease-in-out infinite;
}
@keyframes keychain-sway{
  0%,100%{transform:rotate(-6deg)}
  50%{transform:rotate(6deg)}
}
@keyframes keychain-sparkle{
  0%,100%{filter:drop-shadow(0 0 2px rgba(255,255,255,.3)) drop-shadow(0 0 0px var(--rose))}
  30%{filter:drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 2px var(--rose))}
}