@font-face {
  font-family: 'Rat Typewriter';
  src: url('fonts/rat-typewriter.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FeEN';
  src: url('fonts/FeENrm2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FeEN';
  src: url('fonts/FeENit2.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'FeEN Caps';
  src: url('fonts/FeENsc2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #000000;
  --fg: #ffffff;
  --dim: #a8a8a8;
  --dimmer: #666666;
  --display: 'Rat Typewriter', 'Courier New', monospace;
  --title: 'FeEN', 'Rat Typewriter', 'Courier New', monospace;
  --body: 'Times New Roman', Times, serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ background:var(--bg); }

body{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 8px),
    var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
}

::selection{ background:var(--fg); color:var(--bg); }

::-webkit-scrollbar{ width:16px; }
::-webkit-scrollbar-track{ background:#000; border-left:1px solid var(--fg); }
::-webkit-scrollbar-thumb{ background:#000; border:2px solid var(--fg); }
::-webkit-scrollbar-button{ background:#000; border:1px solid var(--fg); height:14px; }

a{ color:var(--fg); }
a:visited{ color:var(--dim); }
a:hover{ color:#000; background:var(--fg); }

/* ---------- marquee ---------- */
.marquee-wrap{
  background:var(--fg);
  color:#000;
  overflow:hidden;
  white-space:nowrap;
  border-bottom:2px double #000;
  font-family:var(--display);
  font-size:0.8rem;
  letter-spacing:0.04em;
  padding:0.4rem 0;
}
.marquee-track{
  display:inline-block;
  padding-left:100%;
  animation: scroll-left 26s linear infinite;
}
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}

/* ---------- page frame ---------- */
.page{
  max-width:960px;
  margin:0 auto;
  padding:1.25rem 1rem 3rem;
}

/* ---------- banner ---------- */
.banner{
  text-align:center;
  padding:2rem 1rem 1.5rem;
  border-bottom:2px double var(--fg);
  margin-bottom:1.5rem;
}
.site-title{
  font-family:var(--title);
  font-size:clamp(2.5rem, 9vw, 4.5rem);
  letter-spacing:0.08em;
  font-weight:normal;
}
.blink-cursor{ animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.tagline{
  font-family:var(--title);
  color:var(--dim);
  margin-top:0.75rem;
  min-height:1.4em;
  font-size:0.95rem;
}
.visitors{
  font-family:var(--display);
  font-size:0.75rem;
  color:var(--dimmer);
  margin-top:0.75rem;
  letter-spacing:0.05em;
}

/* ---------- layout ---------- */
.layout{
  display:grid;
  grid-template-columns:220px 1fr 220px;
  gap:1.25rem;
  align-items:start;
}
@media (max-width:980px){
  .layout{ grid-template-columns:200px 1fr; }
  .sidebar-right{ grid-column:1/-1; flex-direction:row; flex-wrap:wrap; }
  .sidebar-right .win-box{ flex:1 1 220px; }
}
@media (max-width:680px){
  .layout{ grid-template-columns:1fr; }
  .sidebar-right{ grid-column:auto; }
  .sidebar, .sidebar-right{ position:static; }
}

.sidebar{ display:flex; flex-direction:column; gap:1.25rem; position:sticky; top:1rem; align-self:start; }
.sidebar-right{ position:sticky; top:1rem; }
.content{ display:flex; flex-direction:column; gap:1.25rem; }

/* ---------- window box (retro title-bar chrome) ---------- */
.win-box{
  border:2px double var(--fg);
  background:#000;
}
.win-title{
  background:var(--fg);
  color:#000;
  font-family:var(--title);
  font-size:0.8rem;
  letter-spacing:0.05em;
  padding:0.35rem 0.6rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:2px double #000;
}
.win-dots{ font-size:0.75rem; letter-spacing:0.15em; }

.win-text{ padding:0.9rem 1rem; font-size:0.95rem; }
.win-text.small{ font-size:0.8rem; color:var(--dim); padding-top:0; }
.win-box .win-text + .win-text{ padding-top:0; }

/* ---------- nav list ---------- */
.nav-list{ list-style:none; padding:0.75rem 1rem; }
.nav-list li{ padding:0.3rem 0; font-family:var(--display); font-size:0.9rem; }
.nav-list a:hover{ padding:0 0.15em; }

/* ---------- info table ---------- */
.info-table{ width:100%; font-size:0.85rem; }
.info-table td{
  padding:0.4rem 1rem;
  border-bottom:1px solid #333;
  font-family:var(--display);
}
.info-table tr:last-child td{ border-bottom:none; }
.info-table td:first-child{ color:var(--dim); }
.info-table td:last-child{ text-align:right; }

/* ---------- buttons ---------- */
.retro-btn{
  display:block;
  margin:0 1rem 1rem;
  text-align:center;
  border:1px solid var(--fg);
  padding:0.5rem;
  font-family:var(--display);
  font-size:0.8rem;
  text-decoration:none;
}
.blink-slow{ animation: blink 1.6s steps(1) infinite; }

.button-row{
  display:flex;
  gap:0.5rem;
  padding:0.9rem 1rem 0.5rem;
  flex-wrap:wrap;
}
.btn88{
  width:88px; height:31px;
  border:1px solid var(--fg);
  font-family:var(--display);
  font-size:0.55rem;
  line-height:1.15;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--dim);
}

/* ---------- guestbook chat mock ---------- */
.guestbook-link{
  display:block;
  text-decoration:none;
  color:var(--fg);
}
.guestbook-link:hover{ background:transparent; }
.guestbook-link:hover .win-title{ background:#000; color:var(--fg); border-bottom-color:var(--fg); }

.chat-preview{ padding:0.75rem 1rem 0.25rem; }
.chat-line{
  font-size:0.8rem;
  padding:0.4rem 0;
  border-bottom:1px dashed #333;
  color:#ddd;
}
.chat-line:last-child{ border-bottom:none; }
.chat-user{ font-family:var(--display); color:var(--dim); margin-right:0.3em; }

.chat-cta{ padding:0.5rem 1rem 1rem; }

/* ---------- music list ---------- */
.music-list{ list-style:none; padding:0.75rem 1rem 1rem; }
.music-list li{
  font-size:0.8rem;
  padding:0.4rem 0;
  border-bottom:1px dashed #333;
}
.music-list li:last-child{ border-bottom:none; }
.music-track{ display:block; }
.music-artist{ display:block; color:var(--dim); font-size:0.72rem; }

/* ---------- knight image ---------- */
.knight-box{ padding-bottom:0.25rem; }
.knight-img{
  display:block;
  width:100%;
  height:auto;
  filter:grayscale(1) contrast(1.05);
  border-top:2px double var(--fg);
}
/* ---------- galleries ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:1px;
  background:var(--fg);
  border-top:1px solid var(--fg);
}
.gallery .tile{
  position:relative;
  aspect-ratio:1/1;
  background:#000;
  overflow:hidden;
}
.gallery-scrap .tile:nth-child(odd){ transform:rotate(-1deg); }
.gallery-scrap .tile:nth-child(even){ transform:rotate(1deg); }

.tile img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.05);
  transition:filter 0.5s ease;
}
.tile:hover img, .tile:focus-within img{ filter:grayscale(0) contrast(1); }

.tile-caption{
  position:absolute; left:0; right:0; bottom:0;
  font-family:var(--display);
  font-size:0.65rem;
  padding:0.3rem 0.4rem;
  background:rgba(0,0,0,0.85);
  color:var(--fg);
  opacity:0;
  transition:opacity 0.25s ease;
}
.tile:hover .tile-caption, .tile:focus-within .tile-caption{ opacity:1; }

.tile-empty{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display);
  font-size:0.62rem;
  color:var(--dimmer);
  text-align:center;
  padding:0.5rem;
  border:1px dashed var(--dimmer);
}

/* ---------- diary entries ---------- */
.entries{ padding:0.25rem 1rem 1rem; }
.entry{ padding:1rem 0; border-bottom:1px dashed #444; }
.entry:last-child{ border-bottom:none; }
.entry-date{
  font-family:var(--display);
  font-size:0.7rem;
  color:var(--dim);
  margin-bottom:0.35rem;
}
.entry-title{
  font-family:var(--title);
  font-size:1.05rem;
  margin-bottom:0.5rem;
}
.entry-body{ font-size:0.95rem; white-space:pre-line; color:#e2e2e2; }

/* ---------- footer ---------- */
.site-footer{
  text-align:center;
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:2px double var(--fg);
  font-family:var(--display);
  font-size:0.75rem;
  color:var(--dim);
}
.site-footer p{ margin:0.35rem 0; }
.site-footer .small{ color:var(--dimmer); font-size:0.68rem; }

/* ---------- sparkle trail ---------- */
.spark{
  position:fixed;
  pointer-events:none;
  color:var(--fg);
  font-family:var(--display);
  font-size:0.9rem;
  z-index:9999;
  animation: spark-fade 0.7s ease-out forwards;
}
@keyframes spark-fade{
  0%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-14px) scale(0.6); }
}