/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* === GLOBAL FONT === */
/* === GLOBAL FONT === */
/* === FONT === */
@font-face {
  font-family: 'HayuFont';
  src: url('https://meowcutie.neocities.org/HayuFont.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === BASE === */
html, body {
  font-family: 'HayuFont', lucida grande, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  background-color: #fff;
  margin: 0;
  padding: 0;
  color: #000;
}

/* === HEADINGS === */
h1, h2, h3 { margin: 0 0 8px 0; }

/* === ACCENTS === */
.white {
  border: 1px solid #FFDDF8;
  padding: 12px;
  margin: 6px 0;
  background-color: #fff;
}

/* === TOP NAV BUTTONS === */
.nav a,
.nav-item {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  color: #FFDDF8;
  text-decoration: none;
  border: 1px solid #FFDDF8;
  padding: 6px 12px;
  margin: 4px;
  transition: all 0.2s ease-in-out;
}
.nav a:hover, .nav-item:hover { background:#FFDDF8; color:#fff; }

/* === GENERIC LAYOUT === */
.outer { max-width: 900px; margin: 0 auto; }
.header { padding: 16px 12px; }
.site-title .subtitle { font-size: 12px; }
.updates { overflow: hidden; height: 14px; margin: 8px 0; }
.main { display: flex; gap: 16px; }
.content { flex: 1; min-width: 0; }
.side { width: 260px; }
.sidebar { width: 100%; height: 600px; border: none; }
.clear { clear: both; }
.yasu { max-width: 100%; height: auto; }

/* === HEADER IMAGE (banner) === */
.header-image {
  width: 100%;
  max-width: 900px;
  height: 220px;
  margin: 10px auto 20px auto;
  border: 1px solid #FFDDF8;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: fadeIn 0.8s ease-in-out;
}

/* === SOFT FADE-IN === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === LINKS / BLOG HELPERS === */
.content a { color:#FFDDF8; text-decoration:none; border-bottom:1px dotted #FFDDF8; }
.content a:hover { opacity:.85; }
hr { border:0; border-top:1px solid #FFDDF8; margin:16px 0; }
.width-50 { max-width:50%; height:auto; display:block; }
.border { border:1px solid #FFDDF8; }
i { font-style:italic; opacity:.9; }

/* === TABLE HELPERS (stuff/about) === */
table { border-collapse: collapse; width: 100%; margin-top: 10px; }
table img { max-width: 100px; border: 1px solid #FFDDF8; border-radius: 4px; }
table td, table th { padding: 6px; vertical-align: top; }
.border-0 td, .border-0 th { border: none; }

/* === ABOUT PAGE === */
.profile-pic { width:200px; height:auto; border-radius:10px; margin-bottom:10px; }
.about-table { width:100%; border-collapse:collapse; margin-top:10px; }
.about-table th { text-align:left; width:120px; color:#FFDDF8; }
.about-table td { padding-left:10px; }

/* === THREE-COLUMN PAGES ONLY === */
.three-col { display: grid !important; grid-template-columns: 200px 1fr 260px; gap: 16px; }

/* side rails */
.rail {
  background:#fff;
  border:1px solid #FFDDF8;
  border-radius:10px;
  padding:10px;
  align-self:start;
  box-shadow:2px 2px 5px rgba(0,0,0,0.05);
}
.rail-title, .panel-box h4 {
  margin:0 0 8px 0;
  padding-bottom:6px;
  border-bottom:1px dashed #FFDDF8;
  font-weight:normal;
  color:#000;
}

/* rail buttons */
.rail-group { display:grid; gap:6px; }
.sb-btn {
  display:block;
  padding:6px 10px;
  border:1px solid #FFDDF8;
  background:#fff;
  color:#000;
  text-decoration:none;
  font-weight:bold;
  text-transform:lowercase;
  transition:.2s ease-in-out;
}
.sb-btn:hover { background:#FFDDF8; color:#fff; }

/* clap box tip */
.clap-box .tip { font-size:10px; opacity:.7; margin-top:6px; }

/* right panel boxes */
.panel-box { border:1px solid #FFDDF8; border-radius:8px; padding:8px; margin-bottom:12px; background:#fff; }
.cliques img { width:90px; margin:4px; border-radius:6px; border:1px solid #FFDDF8; }

/* paw bullets */
.paws { list-style:none; padding-left:0; }
.paws li::before { content:"🐾 "; margin-right:4px; }

/* === INDEX (landing) ONLY — triggered by <body class="landing"> === */
body.landing .container {
  width: 400px;
  margin: 170px auto 0; /* centers the block */
  position: relative;
}
body.landing .hero {
  position: absolute;
  height: 670px;
  top: -130px;
  left: -145px;
  pointer-events: none;
}
body.landing .title { margin-left: 110px; }
body.landing .white {
  border: 1px solid #FFDDF8;
  background: #fff;
  padding: 12px;
  margin: 6px 0;
}
body.landing .banner {
  height: 100px;
  border: 1px solid #FFDDF8;
  background: #666;
  text-align: end;
  padding: 12px;
  background-image: url(img/front_bg.jpg);
  background-position: 1px;
  background-size: cover;
  color: #EEE;
  font-size: 10px;
}
body.landing .nav a {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  color: #FFDDF8;
  text-decoration: none;
  margin-top: 12px;
  border-bottom: 1px dotted #FFDDF8;
}

/* safety: NEVER hide structure globally */