/* =========================================================
   OMIACO
   GLOBAL STYLESHEET
   ========================================================= */

@font-face {
  font-family: "Chomsky";
  src: url("imagens/fonts/Chomsky.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* =========================================================
   VARIABLES
   ========================================================= */piclog-entry
:root {
  --pink: #efa0b4;
  --pink-light: #f7cad5;
  --pink-pale: #fff1f5;

  --lavender: #d9c7ed;
  --baby-blue: #cbddea;
  --sage: #d8dfc7;

  --cream: #f8f1e7;
  --paper: #fffaf7;
  --white: #fffdfd;

  --ink: #292529;
  --grey: #857e82;
  --light-border: #e8d6dc;

  --font-body: Georgia, "Times New Roman", serif;

  /* ✦ NOVA FONT DOS TÍTULOS ✦ */
  --font-title: "chomsky", Georgia, serif;

  --font-small: Verdana, Arial, sans-serif;
}

/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;
  padding: 0;

  color: var(--ink);

  font-family: var(--font-body);

  font-size: 13px;

  background-color: var(--pink-pale);

  background-image:
    url("imagens/backgrounds/grid.png");

  background-repeat: repeat;

}

img {
  max-width: 100%;
}

a {

  color: #c96384;

  text-decoration: none;

  transition: 0.15s ease;

}

a:hover {
  color: var(--ink);
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {

  background: var(--pink-light);

  color: var(--ink);

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #fff7fa;
}

::-webkit-scrollbar-thumb {

  background: #f5aec5;

  border-radius: 10px;

  border: 2px solid #fff7fa;

}


/* =========================================================
   MAIN SITE
   ========================================================= */

.site-wrapper {

  width: 96%;

  max-width: 1200px;

  margin: 25px auto;

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

  position: relative;

  text-align: center;

  padding: 5px 5px 5px;

  margin-bottom: 18px;

  background:
    rgba(255, 250, 252, 0.86);

  border: 1px dashed #caaeb7;

  box-shadow:
    7px 7px 0 rgba(239,160,180,0.35);

}


.site-title,
.site-header h1 {

  margin: 0;

  font-family: var(--font-title);

  font-size:
    clamp(42px, 8vw, 76px);

  font-weight: normal;

  letter-spacing: 3px;

  line-height: 1.1;

  color: #493b42;

}


.site-subtitle,
.site-header p {

  margin: 10px 0 0;

  color: var(--grey);

  font-size: 13px;

  font-style: italic;

  letter-spacing: 1px;

}


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

.top-nav {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 20px;

}


.top-nav a {

  display: inline-block;

  padding: 7px 13px;

  color: var(--ink);




  font-family: var(--font-small);

  font-size: 12px;

  letter-spacing: 0.5px;

}


.top-nav a:hover {

  background: var(--pink-light);

  color: var(--ink);

}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.main-layout {
  display: grid;

  grid-template-columns:
    220px
    minmax(0, 1fr)
    220px;

  gap: 18px;

  align-items: start;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {

  display: flex;

  flex-direction: column;

  gap: 15px;

}


/* =========================================================
   GENERIC BOX
   ========================================================= */

.box {

  position: relative;

  padding: 16px;

  background:
    rgba(255,253,253,0.91);

  border: 1px dashed #c8aeb6;

  box-shadow:
    4px 4px 0 rgba(247,202,213,0.6);

}


.box::before {

  content: "♡";

  position: absolute;

  top: -9px;
  right: 10px;

  padding: 0 5px;

  background: #fff8fa;

  color: #bf6885;

}


.box h2,
.box h3 {

  margin-top: 0;

  font-family: var(--font-title);

  font-weight: normal;

  letter-spacing: 1px;

}


/* =========================================================
   PROFILE
   ========================================================= */

.avatar {

  display: block;

  width: 110px;
  height: 110px;

  object-fit: cover;

  margin: 0 auto 12px;

  border-radius: 50%;

  padding: 4px;

  background: var(--pink-light);

}


.profile-name {

  text-align: center;

  font-size: 17px;

  letter-spacing: 1px;

}


.profile-copy {

  font-size: 12px;

  line-height: 1.7;

  text-align: center;

  color: #625a5e;

}


.tiny-text {

  font-family: var(--font-small);

  font-size: 10px;

  line-height: 1.7;

  color: var(--grey);

  text-align: center;

}


/* =========================================================
   SIDEBAR LINKS
   ========================================================= */

.side-links {

  display: flex;

  flex-direction: column;

  gap: 5px;

}


.side-links a {

  display: block;

  padding: 7px 9px;

  color: var(--ink);

  background:
    rgba(255,241,245,0.85);

  border-bottom:
    1px dotted var(--light-border);

  font-family: var(--font-small);

  font-size: 12px;

}


.side-links a:hover {

  background: var(--pink-light);

  padding-left: 12px;

}


/* =========================================================
   MINI CURRENTLY
   ========================================================= */

.currently-mini {

  font-family: var(--font-small);

  font-size: 11px;

  line-height: 1.7;

}


.currently-mini strong {

  color: #b55f7d;

  font-weight: normal;

}


/* =========================================================
   WEBRING MINI
   ========================================================= */

.fake-webring {

  text-align: center;

  font-family: var(--font-small);

  font-size: 11px;

  line-height: 1.7;

}


.fake-webring-arrows {

  display: flex;

  justify-content: center;

  gap: 14px;

  margin: 8px 0;

}


/* =========================================================
   MAIN WINDOW
   ========================================================= */

.content-window {

  overflow: hidden;

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

  border: 1px dashed #bcaab0;

  box-shadow:
    7px 7px 0 rgba(217,199,237,0.65);

}


.window-title {

  padding: 8px 12px;

  background:
    linear-gradient(
      90deg,
      var(--pink-light),
      var(--lavender),
      var(--baby-blue)
    );

  border-bottom:
    1px dashed #b7a9ae;

  font-family: var(--font-small);

  font-size: 11px;

  letter-spacing: 1px;

}


#mainframe {

  display: block;

  width: 100%;

  height: 800px;

  border: none;

  background: transparent;

}


/* =========================================================
   MARQUEE
   ========================================================= */

.bottom-marquee {

  overflow: hidden;

  margin-top: 18px;

  border: 1px dashed #c5aeb6;

  background: rgba(248,241,231,0.9);

  white-space: nowrap;

}


.marquee-inner {

  display: inline-block;

  min-width: 100%;

  padding: 8px 0;

  animation:
    omiaco-marquee
    22s
    linear
    infinite;

  font-family: var(--font-small);

  font-size: 11px;

  letter-spacing: 2px;

}


@keyframes omiaco-marquee {

  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }

}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

  padding: 18px;

  text-align: center;

  font-family: var(--font-small);

  font-size: 11px;

  color: var(--grey);

}


/* =========================================================
   IFRAME PAGES
   ========================================================= */

body.iframe-page {

  margin: 0;

  min-height: 100vh;

  background-color: var(--paper);

}


.inner-page {

  width: 100%;

  max-width: 840px;

  margin: auto;

  padding: 35px 30px;

}


/* =========================================================
   PAGE BACKGROUNDS
   ========================================================= */


/* HOME + ABOUT */

body.bg-pink-paper {

  background-image:
    url("imagens/backgrounds/flecked-lightpink.png");

  background-repeat: repeat;

  background-size:
    512px 512px;

}


/* JOURNAL */

body.bg-lined {

  background-image:
    url("imagens/backgrounds/lined.png");

  background-repeat: repeat;

  background-size:
    565px auto;

}


/* NEIGHBOURHOOD */

body.bg-grid {

  background-image:
    url("imagens/backgrounds/grid.png");

  background-repeat: repeat;

  background-size:
    200px auto;

}


/* =========================================================
   COMMON PAGE ELEMENTS
   ========================================================= */

.page-heading {

  margin: 5px 0 8px;

  text-align: center;

  font-family: var(--font-title);

  font-size: 34px;

  font-weight: normal;

  letter-spacing: 1px;

}


.intro {

  text-align: center;

  font-size: 14px;

  line-height: 1.8;

  color: var(--grey);

}


.tiny-stars {

  text-align: center;

  color: var(--pink);

  letter-spacing: 6px;

  font-size: 12px;

}


.section-title {

  margin: 0 0 18px;

  text-align: center;

  font-family: var(--font-title);

  font-size: 22px;

  font-weight: normal;

  letter-spacing: 1px;

}


.section-intro {

  text-align: center;

  font-size: 12px;

  color: var(--grey);

  font-style: italic;

}


.small-copy {

  font-size: 12px;

  line-height: 1.7;

  color: var(--grey);

}


.center {
  text-align: center;
}


/* =========================================================
   MINI BUTTON
   ========================================================= */

.mini-button {

  display: inline-block;

  padding: 6px 10px;

  background: var(--pink-light);

  border: 1px dashed #b397a0;

  color: var(--ink);

  font-family: var(--font-small);

  font-size: 10px;

}


/* =========================================================
   TAPE IMAGE SYSTEM
   ========================================================= */

.tape-img {

  position: absolute;

  display: block;

  max-width: none;

  width: auto;
  height: auto;

  pointer-events: none;

  z-index: 10;

}


.tape-top {

  top: -15px;
  left: 50%;

  transform:
    translateX(-50%)
    rotate(-3deg);

}


.tape-top-left {

  top: -13px;
  left: 25px;

  transform: rotate(-8deg);

}


.tape-top-right {

  top: -14px;
  right: 22px;

  transform: rotate(7deg);

}


.tape-bottom-left {

  bottom: -11px;
  left: 30px;

  transform: rotate(5deg);

}


.tape-bottom-right {

  bottom: -10px;
  right: 25px;

  transform: rotate(-5deg);

}


.tape-diagonal {

  top: -8px;
  right: -16px;

  transform: rotate(38deg);

}


.tape-small {
  width: 65px;
}


.tape-medium {
  width: 95px;
}


.tape-large {
  width: 130px;
}


/* =========================================================
   HOME
   ========================================================= */

.home-page {
  max-width: 860px;
}


.home-hero {

  text-align: center;

  margin-bottom: 30px;

}


.home-hero h1 {

  margin: 5px 0 10px;

  font-family: var(--font-title);

  font-size: 36px;

  font-weight: normal;

  letter-spacing: 1px;

}


.home-hero-subtitle {

  font-size: 13px;

  color: var(--grey);

  font-style: italic;

}


.home-note {

  max-width: 650px;

  margin: 18px auto 0;

  font-size: 13px;

  line-height: 1.8;

  color: #625b5f;

}


.home-grid,
.home-two-columns {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 18px;

  margin: 30px 0;

}


.inner-box {

  position: relative;

  padding: 20px;

  border: 1px dashed #c5aeb6;

}


.inner-box h2 {

  margin-top: 0;

  text-align: center;

  font-family: var(--font-title);

  font-size: 20px;

  font-weight: normal;

}


.inner-box-pink {

  background:
    rgba(255,243,247,0.9);

  box-shadow:
    4px 4px 0 var(--pink-light);

}


.inner-box-lilac {

  background:
    rgba(247,242,252,0.9);

  box-shadow:
    4px 4px 0 var(--lavender);

}


.inner-box-blue {

  background:
    rgba(239,247,250,0.9);

  box-shadow:
    4px 4px 0 var(--baby-blue);

}


.inner-box-sage {

  background:
    rgba(242,245,236,0.9);

  box-shadow:
    4px 4px 0 var(--sage);

}


.currently-list {

  margin: 0;
  padding: 0;

  list-style: none;

  font-size: 12px;

  line-height: 1.8;

}


.currently-list strong {

  color: #b45f7d;

  font-weight: normal;

}


.update-date {

  font-family: var(--font-small);

  font-size: 10px;

  color: #ac6980;

  letter-spacing: 1px;

  text-transform: uppercase;

}


.tiny-decoration {

  text-align: center;

  margin-top: 13px;

  color: var(--pink);

  letter-spacing: 5px;

}


/* =========================================================
   HOME JOURNAL PREVIEW
   ========================================================= */

.journal-preview {

  position: relative;

  margin: 40px 0;

  padding: 28px;

  background:
    rgba(255,250,242,0.93);

  border: 1px dashed #b9a7a7;

  box-shadow:
    6px 6px 0 var(--baby-blue);

  transform: rotate(-0.25deg);

}


/* =========================================================
   HOME EXPLORE CARDS
   ========================================================= */

.explore-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 11px;

  margin: 30px 0;

}


.explore-card {

  display: flex;

  min-height: 60px;

  flex-direction: column;

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

  padding: 10px;

  color: var(--ink);

  text-align: center;

  border: none;

  box-shadow:
    3px 3px 0 rgba(130,100,110,0.10);

  font-size: 13px;

}


.explore-card:hover {

  transform: none;

  filter: brightness(0.985);

}


.explore-pink {
  background: #fff1f5;
}

.explore-lilac {
  background: #f3edfa;
}

.explore-blue {
  background: #edf6fa;
}

.explore-sage {
  background: #f1f5eb;
}


/* =========================================================
   HOME BUTTON WALL
   ========================================================= */

.fake-button-wall {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 7px;

  margin: 20px 0;

}


.fake-button {

  width: 88px;
  height: 31px;

  display: flex;

  align-items: center;

  justify-content: center;

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

  font-family: var(--font-small);

  font-size: 10px;

  text-align: center;

}


/* =========================================================
   STATUS TABLE
   ========================================================= */

.status-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 11px;

}


.status-table td {

  padding: 6px 3px;

  border-bottom:
    1px dotted var(--light-border);

}


.status-table td:first-child {

  color: #b25f7b;

}


.home-ending {

  text-align: center;

  margin: 40px 0 10px;

  color: var(--grey);

  font-size: 12px;

}


/* =========================================================
   ABOUT
   ========================================================= */

.about-page {
  max-width: 850px;
}


.about-header {

  text-align: center;

  margin-bottom: 32px;

}


.about-subtitle {

  font-size: 13px;

  font-style: italic;

  color: var(--grey);

}


.about-profile {

  display: grid;

  grid-template-columns:
    230px 1fr;

  gap: 28px;

  align-items: center;

  margin-bottom: 30px;

}


.about-photo-wrapper {

  position: relative;

  text-align: center;

  transform: rotate(-1deg);

}


.about-photo {

  width: 200px;
  height: 230px;

  object-fit: cover;

  background: var(--pink-light);

  padding: 7px;

  box-shadow:
    7px 7px 0 rgba(247,202,213,.7);

}


.photo-caption {

  position: relative;

  width: 150px;

  margin: -12px auto 0;

  padding: 6px 10px;

  background: var(--cream);

  border: 1px dashed var(--grey);

  font-size: 11px;

  transform: rotate(2deg);

}


.about-bio {

  position: relative;

  padding: 24px;

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

  border: 1px dashed #c3aeb5;

  box-shadow:
    5px 5px 0 var(--lavender);

}


.about-bio::after {

  content: "♡";

  position: absolute;

  right: 13px;
  bottom: 8px;

  color: var(--pink);

  font-size: 24px;

}


.about-bio h2 {

  margin: 10px 0 15px;

  font-family: var(--font-title);

  font-size: 25px;

  font-weight: normal;

}


.about-bio p {

  margin: 0 0 10px;

  font-size: 13px;

  line-height: 1.8;

}


.little-label {

  display: inline-block;

  padding: 4px 8px;

  background: var(--pink-light);

  font-family: var(--font-small);

  font-size: 10px;

}


.signature {

  margin-top: 15px;

  text-align: right;

  font-style: italic;

  color: #b66682;

}


/* =========================================================
   FANCY DIVIDER
   ========================================================= */

.fancy-divider {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  margin: 32px 0;

}


.fancy-divider span {

  width: 100px;

  height: 1px;

  background: var(--light-border);

}


.fancy-divider b {

  color: var(--pink);

  font-weight: normal;

  letter-spacing: 5px;

}


/* =========================================================
   ABOUT FACTS
   ========================================================= */

.about-section {
  margin: 35px 0;
}


.facts-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 10px;

}


.fact-card {

  min-height: 80px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 12px;

  text-align: center;

  border: none;

  box-shadow:
    3px 3px 0 rgba(0,0,0,.07);

  font-size: 13px;

}


.fact-card span {

  display: block;

  margin-bottom: 8px;

  color: #766b70;

  font-family: var(--font-small);

  font-size: 10px;

  text-transform: uppercase;

}


.fact-pink {
  background: #fff0f5;
}

.fact-lilac {
  background: #f3edfb;
}

.fact-blue {
  background: #eef7fa;
}

.fact-sage {
  background: #f1f5eb;
}

.fact-cream {
  background: #fff9ee;
}


/* =========================================================
   ABOUT TWO COLUMNS
   ========================================================= */

.about-two-columns {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 18px;

  margin: 35px 0;

}


.about-list-box {

  position: relative;

  padding: 20px;

  border: 1px dashed #c1adb3;

}


.about-list-box h2 {

  margin-top: 0;

  text-align: center;

  font-family: var(--font-title);

  font-size: 21px;

  font-weight: normal;

}


.about-list-box ul {

  margin: 0;
  padding: 0;

  list-style: none;

}


.about-list-box li {

  padding: 6px 5px;

  border-bottom:
    1px dotted rgba(80,80,80,.15);

  font-size: 13px;

}


.about-list-box li::before {

  content: "✧ ";

  color: #c76b8a;

}


.pink-list {

  background:
    rgba(255,244,247,.9);

  box-shadow:
    5px 5px 0 var(--pink-light);

}


.lilac-list {

  background:
    rgba(247,242,252,.9);

  box-shadow:
    5px 5px 0 var(--lavender);

}


/* =========================================================
   SCRAPBOOK
   ========================================================= */

.scrapbook-section {

  margin: 45px 0;

  padding: 24px;

  background:
    rgba(255,249,244,.9);

  border: 1px dashed #b8afb3;

}


.scrapbook-grid {

  display: grid;

  grid-template-columns:
    repeat(6,1fr);

  gap: 12px;

  align-items: center;

}


.scrap-item {

  padding: 5px;

  background: white;

  box-shadow:
    4px 4px 0 rgba(0,0,0,.08);

}


.scrap-item img {

  display: block;

  width: 100%;

}


.scrap-one {

  grid-column: 1/3;

  transform: rotate(-2deg);

}


.scrap-two {

  grid-column: 3/5;

  transform: rotate(1deg);

}


.scrap-three {

  grid-column: 2/4;

  transform: rotate(2deg);

}


.scrap-four {

  grid-column: 4/7;

  transform: rotate(-1deg);

}


.scrap-note {

  grid-column: 5/7;

  padding: 17px;

  background: var(--pink-light);

  border: 1px dashed #987b84;

  font-size: 12px;

  line-height: 1.6;

  text-align: center;

  transform: rotate(2deg);

}


/* =========================================================
   ABOUT SHRINES
   ========================================================= */

.mini-shrine-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 12px;

}


.mini-shrine {

  min-height: 115px;

  display: flex;

  flex-direction: column;

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

  padding: 12px;

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

  border: none;

  box-shadow:
    4px 4px 0 var(--pink-light);

  color: var(--ink);

}


.mini-shrine:hover {

  background: var(--pink-pale);

  transform: translateY(-2px);

}


.mini-shrine span {

  margin-bottom: 5px;

  font-size: 24px;

}


.mini-shrine strong {

  font-size: 14px;

  font-weight: normal;

}


.mini-shrine small {

  margin-top: 5px;

  font-family: var(--font-small);

  font-size: 10px;

  color: var(--grey);

}


/* =========================================================
   BLOG
   ========================================================= */

.blog-page {
  max-width: 880px;
}


.blog-header {

  text-align: center;

  margin-bottom: 30px;

}


.blog-subtitle {

  font-size: 13px;

  color: var(--grey);

  font-style: italic;

}


.blog-layout {

  display: grid;

  grid-template-columns:
    190px 1fr;

  gap: 20px;

  align-items: start;

}


.blog-sidebar {

  position: sticky;

  top: 10px;

  padding: 15px;

  background:
    rgba(255,244,247,.88);

  border: 1px dashed var(--grey);

  box-shadow:
    4px 4px 0 var(--pink-light);

}


.blog-sidebar-title {

  margin-bottom: 12px;

  padding-bottom: 8px;

  text-align: center;

  font-family: var(--font-title);

  font-size: 19px;

}


.blog-entry-link {

  display: block;

  padding: 8px;

  margin-bottom: 7px;

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

  font-size: 12px;

  line-height: 1.5;

  color: var(--ink);

}


.blog-entry-link span {

  display: block;

  margin-bottom: 2px;

  color: #b66380;

  font-family: var(--font-small);

  font-size: 10px;

  text-transform: uppercase;

}


.blog-entry-link:hover {

  background: var(--pink-light);

}


.blog-sidebar-note {

  text-align: center;

  color: var(--grey);

  font-size: 11px;

  line-height: 1.5;

  font-style: italic;

}


.blog-entry {
  display: none;
}


.blog-entry:target {
  display: block;
}


.blog-entry#3 {
  display: block;
}


.blog-post-area:has(.blog-entry:target)
.blog-entry#3:not(:target) {

  display: none;

}


.journal-paper {

  position: relative;

  min-height: 430px;

  padding: 34px 32px 30px;

  background:
    rgba(255,250,245,.82);

  border: 1px dashed #b8a9aa;

  box-shadow:
    7px 7px 0 rgba(217,199,237,.65);

}


.journal-meta {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding-bottom: 7px;

  margin-bottom: 18px;

  border-bottom:
    1px dotted #c8bab7;

  color: var(--grey);

  font-family: var(--font-small);

  font-size: 10px;

  text-transform: uppercase;

}


.journal-paper h2 {

  margin: 0 0 12px;

  font-family: var(--font-title);

  font-size: 27px;

  font-weight: normal;

}


.journal-status {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 18px;

}


.journal-status span {

  padding: 4px 7px;

  background: var(--pink-pale);

  color: #a85c77;

  font-family: var(--font-small);

  font-size: 10px;

}


.journal-body {

  color: #494246;

  font-size: 14px;

  line-height: 1.9;

}


.journal-body p {

  margin: 0 0 14px;

}


.journal-signature {

  margin-top: 25px;

  text-align: right;

  color: #ba6884;

  font-size: 15px;

  font-style: italic;

}


/* =========================================================
   NEIGHBOURS
   ========================================================= */

.neighbours-page {
  max-width: 860px;
}


.neighbours-header {

  text-align: center;

  margin-bottom: 28px;

}


.neighbours-subtitle {

  color: var(--grey);

  font-size: 13px;

  font-style: italic;

}


.neighbour-intro {

  max-width: 580px;

  margin: 0 auto 32px;

  padding: 18px;

  background:
    rgba(255,245,248,.88);

  border: 1px dashed var(--grey);

  box-shadow:
    4px 4px 0 var(--pink-light);

  text-align: center;

}


.little-house {

  margin-bottom: 5px;

  color: #bd6b87;

  font-size: 28px;

}


.neighbour-section {
  margin: 35px 0;
}


/* =========================================================
   NEIGHBOUR BUTTONS — EXACT ORIGINAL SIZE
   ========================================================= */

.neighbours-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 12px;

  padding: 24px 18px;

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

  border: none;

}


.neighbours-grid a {

  display: block;

  width: 88px;
  height: 31px;

  padding: 0;
  margin: 0;

  border: none;

  background: transparent;

  box-shadow: none;

  transform: none;

  line-height: 0;

}


.neighbours-grid a:hover {

  border: none;

  background: transparent;

  box-shadow: none;

  transform: none;

  opacity: 1;

}


.neighbours-grid img {

  display: block;

  width: 88px;
  height: 31px;

  max-width: none;

  padding: 0;
  margin: 0;

  border: none;

  outline: none;

  background: transparent;

  box-shadow: none;

  transform: none;

}


.neighbours-grid img:hover {

  border: none;

  outline: none;

  box-shadow: none;

  transform: none;

  opacity: 1;

}


/* =========================================================
   COOL SITES
   ========================================================= */

.cool-sites-box {

  padding: 22px;

  background:
    rgba(248,243,253,.85);

  border: 1px dashed var(--grey);

  box-shadow:
    5px 5px 0 var(--lavender);

}


.cool-sites-list {

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 10px;

}


.cool-sites-list a {

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-height: 75px;

  padding: 12px;

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

  border: none;

  color: var(--ink);

}


.cool-sites-list a:hover {

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

}


.cool-sites-list span {

  margin-bottom: 5px;

  font-size: 14px;

}


.cool-sites-list small {

  color: var(--grey);

  font-family: var(--font-small);

  font-size: 11px;

  line-height: 1.5;

}


/* =========================================================
   LINK ME
   ========================================================= */

.link-me-box-new {

  position: relative;

  max-width: 660px;

  margin: 45px auto;

  padding: 26px;

  background:
    rgba(248,241,231,.9);

  border: 1px dashed #a99a9f;

  box-shadow:
    6px 6px 0 var(--baby-blue);

  text-align: center;

}


.link-me-box-new h2 {

  margin-top: 4px;

  font-family: var(--font-title);

  font-size: 23px;

  font-weight: normal;

}


.my-button-row {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 14px;

  margin: 18px 0 8px;

}


.my-button-row img {

  display: block;

  width: 88px;
  height: 31px;

  max-width: none;

  margin: 0;
  padding: 0;

  border: none;

  outline: none;

  background: transparent;

  box-shadow: none;

  transform: none;

}


.my-button-row img:hover {

  border: none;

  outline: none;

  background: transparent;

  box-shadow: none;

  transform: none;

  opacity: 1;

}


/* =========================================================
   COPY BUTTON
   ========================================================= */

.copy-button {

  appearance: none;

  padding: 7px 11px;

  background: var(--pink-light);

  border: 1px dashed #9e838c;

  color: var(--ink);

  font-family: var(--font-small);

  font-size: 11px;

  cursor: pointer;

}


.copy-button:hover {

  background: #f8d6df;

}


/* =========================================================
   CODE BOX
   ========================================================= */

.cute-code-box-new {

  width: 100%;

  min-height: 58px;

  padding: 8px;

  resize: vertical;

  background: #fff2f6;

  border: 1px dashed #ca9cac;

  color: #a4516d;

  font-family: monospace;

  font-size: 10px;

  line-height: 1.4;

}


.neighbour-message {

  margin-top: 24px;

  font-size: 12px;

  line-height: 1.6;

}


/* =========================================================
   WEBRING TEASER
   ========================================================= */

.webring-teaser {

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 16px;

  max-width: 580px;

  margin: 40px auto;

  padding: 15px 18px;

  background:
    rgba(239,247,249,.9);

  border: 1px dashed var(--grey);

  box-shadow:
    4px 4px 0 var(--baby-blue);

}


.webring-teaser > span {

  color: #b66c86;

  font-size: 25px;

}


.webring-teaser strong {

  font-size: 13px;

  font-weight: normal;

}


.webring-teaser p {

  margin: 3px 0 0;

  color: var(--grey);

  font-size: 11px;

}


.neighbours-ending {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 12px;

  margin: 35px 0 10px;

  color: var(--grey);

  font-size: 11px;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */
/* =========================================================
   MAIN 3-COLUMN LAYOUT
   ========================================================= */

.main-layout {
  display: grid;

  grid-template-columns:
    220px
    minmax(0, 1fr)
    220px;

  grid-template-areas:
    "left main right";

  gap: 18px;

  align-items: start;
}


/* LEFT */

.sidebar-left {
  grid-area: left;

  display: flex;
  flex-direction: column;
  gap: 15px;
}


/* MAIN */

.content-window {
  grid-area: main;

  min-width: 0;
}


/* RIGHT */

.sidebar-right {
  grid-area: right;

  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (max-width: 950px) {

  .main-layout {
    grid-template-columns:
      190px
      minmax(0, 1fr);

    grid-template-areas:
      "left main";
  }

  .sidebar-right {
    display: none;
  }

}


@media (max-width: 650px) {

  .main-layout {
    grid-template-columns: 1fr;

    grid-template-areas:
      "left"
      "main";
  }

  .sidebar-left {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

}
/* =========================================================
   TAPE SYSTEM
   ========================================================= */

.tape {
  position: absolute;
  display: block;

  width: auto;
  height: auto;

  max-width: none;

  pointer-events: none;

  z-index: 10;
}


/* ---------- POSITIONS ---------- */

.tape-top {
  top: -14px;
  left: 50%;

  transform:
    translateX(-50%);
}

.tape-top-left {
  top: -12px;
  left: 22px;
}

.tape-top-right {
  top: -12px;
  right: 22px;
}

.tape-bottom {
  bottom: -14px;
  left: 50%;

  transform:
    translateX(-50%);
}

.tape-bottom-left {
  bottom: -12px;
  left: 22px;
}

.tape-bottom-right {
  bottom: -12px;
  right: 22px;
}


/* ---------- ROTATION ---------- */

.tape-tilt-left {
  rotate: -7deg;
}

.tape-tilt-right {
  rotate: 7deg;
}

.tape-tilt-more-left {
  rotate: -15deg;
}

.tape-tilt-more-right {
  rotate: 15deg;
}


/* ---------- SIZES ---------- */

.tape-xs {
  width: 45px;
}

.tape-small {
  width: 65px;
}

.tape-medium {
  width: 90px;
}

.tape-large {
  width: 120px;
}

.tape-xl {
  width: 150px;
}


/* ---------- TAPE FILES ---------- */

.tape-one{
  content: url("imagens/tapes/tape1.png");
}

.tape-two {
  content: url("imagens/tapes/tape2.png");
}

.tape-three {
  content: url("imagens/tapes/tape3.png");
}

.tape-four {
  content: url("imagens/tapes/tape4.png");
}

.tape-five {
  content: url("imagens/tapes/tape5.png");
}


/* =========================================================
   RIGHT SIDEBAR
   ========================================================= */

.sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 15px;
}


.sidebar-right .box {
  text-align: center;
}


.sidebar-right .box h3 {
  margin: 0 0 12px;

  font-family: var(--font-title);
  font-size: 19px;
  font-weight: normal;
}


.right-status p {
  margin: 8px 0;

  font-size: 12px;
  line-height: 1.6;
}


.right-status strong {
  color: #b75f7d;
  font-weight: normal;
}


.right-sidebar-copy {
  font-size: 12px;
  line-height: 1.7;

  color: var(--grey);
}


/* little treasure */

.sidebar-treasure-image {
  display: block;

  width: 100%;
  max-width: 150px;

  margin: 10px auto;

  padding: 5px;

  background: white;

  box-shadow:
    4px 4px 0 var(--pink-light);

  transform: rotate(1deg);
}


/* guestbook */

.right-guestbook {
  background:
    rgba(255, 241, 245, 0.92);
}


/* stamp */

.stamp-box {
  background:
    rgba(248, 243, 253, 0.92);
}


.stamp-placeholder {
  display: flex;

  width: 80px;
  height: 80px;

  margin: 12px auto;

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

  background: var(--pink-light);

  font-size: 28px;

  transform: rotate(-2deg);
}

/* =========================================================
   PIC LOG
   ========================================================= */

.piclog-page {
  width: min(100% - 32px, 720px);

  margin: 0 auto;
  padding: 32px 0 70px;
}


/* HEADER */

.piclog-header {
  text-align: center;

  margin-bottom: 45px;
}


.piclog-symbol {
  margin-bottom: 4px;

  color: #ba7891;

  font-size: 18px;
}


.piclog-header .page-heading {
  margin: 0;

  font-family: var(--font-title);
  font-size: 42px;
  font-weight: normal;

  color: var(--ink);
}


.piclog-header p {
  max-width: 430px;

  margin: 8px auto 0;

  color: var(--grey);

  font-size: 13px;
  line-height: 1.7;
}


.piclog-divider {
  margin-top: 18px;

  color: #c497a7;

  font-size: 12px;
}



/* =========================================================
   ENTRIES
   ========================================================= */

.piclog-entry {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 55px;
}



/* PHOTO */

.piclog-photo {
  position: relative;

  width: 50px;

  padding:
    9px
    9px
    28px;

  background: #fffdfb;

  box-shadow:
    0 3px 12px rgba(72, 54, 63, 0.12);

  transition:
    transform 0.2s ease;
}


.piclog-photo > img:not(.tape) {
  display: block;

  width: 50%;
  height: auto;

  object-fit: cover;
}


/* subtle handmade rotation */

.piclog-photo.rotate-left {
  transform: rotate(-0.8deg);
}


.piclog-photo.rotate-right {
  transform: rotate(0.8deg);
}


.piclog-photo:hover {
  transform:
    rotate(0deg)
    translateY(-2px);
}



/* =========================================================
   DATE + DESCRIPTION
   ========================================================= */

.piclog-info {
  width: min(100%, 490px);

  margin-top: 17px;

  text-align: left;
}


.piclog-info time {
  display: inline-block;

  margin-bottom: 6px;

  font-family: var(--font-small);
  font-size: 11px;

  letter-spacing: 1px;

  color: #ac7186;
}


.piclog-info p {
  margin: 0;

  color: var(--ink);

  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.75;
}



/* tiny separator between entries */

.piclog-entry::after {
  content: "♡";

  display: block;

  margin-top: 30px;

  color: #d49aae;

  font-size: 12px;
}



/* =========================================================
   END
   ========================================================= */

.piclog-end {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-top: 15px;

  color: var(--grey);

  text-align: center;
}


.piclog-end p {
  margin: 0;

  font-family: var(--font-small);
  font-size: 11px;
}


.piclog-end span {
  color: var(--pink);
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .piclog-page {
    width: min(100% - 20px, 720px);

    padding-top: 22px;
  }


  .piclog-header .page-heading {
    font-size: 36px;
  }


  .piclog-entry {
    margin-bottom: 45px;
  }


  .piclog-info {
    padding: 0 5px;
  }

}
/* =========================================================
   EXPLORE HUB
   ========================================================= */

.explore-page {
  width: min(100% - 30px, 900px);
  margin: 0 auto;
  padding: 30px 0 60px;
}


/* HEADER */

.explore-header {
  text-align: center;
  margin-bottom: 35px;
}


.explore-symbol {
  color: #b7758d;
  font-size: 16px;
  margin-bottom: 4px;
}


.explore-header .page-heading {
  margin: 0;

  font-family: var(--font-title);
  font-size: 42px;
  font-weight: normal;
}


.explore-header p {
  margin: 7px auto 0;

  max-width: 450px;

  font-size: 13px;
  line-height: 1.7;

  color: var(--grey);
}


.explore-divider {
  margin-top: 16px;

  color: #c79aaa;
  font-size: 11px;
}



/* =========================================================
   GRID
   ========================================================= */

.explore-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 22px;
}



/* =========================================================
   CARD
   ========================================================= */

.explore-card {
  overflow: hidden;

  background:
    rgba(255, 253, 253, 0.88);

  border:
    1px dashed #d9bfc8;

  box-shadow:
    3px 4px 0 rgba(239, 160, 180, 0.12);

  transition:
    transform 0.15s ease;
}


.explore-card:nth-child(odd) {
  transform: rotate(-0.25deg);
}


.explore-card:nth-child(even) {
  transform: rotate(0.25deg);
}


.explore-card:hover {
  transform:
    translateY(-2px)
    rotate(0deg);
}



/* IMAGE */

.explore-card-image {
  position: relative;

  height: 160px;

  overflow: hidden;

  background: var(--pink-pale);
}


.explore-card-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.25s ease;
}


.explore-card:hover .explore-card-image img {
  transform: scale(1.025);
}



/* CONTENT */

.explore-card-content {
  padding:
    17px
    18px
    19px;
}


.explore-card-content h2 {
  margin:
    0
    0
    7px;

  font-family: var(--font-title);
  font-size: 23px;
  font-weight: normal;

  color: var(--ink);
}


.explore-card-content p {
  min-height: 58px;

  margin:
    0
    0
    14px;

  color: var(--grey);

  font-size: 12px;
  line-height: 1.7;
}



/* VER MAIS */

.explore-more {
  display: inline-block;

  padding:
    6px
    11px;

  font-family: var(--font-small);
  font-size: 11px;

  text-decoration: none;

  color: #8c536b;

  background:
    var(--pink-pale);

  border:
    1px dashed #d7b7c2;
}


.explore-more:hover {
  background:
    var(--pink-light);

  color: var(--ink);
}



/* END */

.explore-end {
  margin-top: 38px;

  text-align: center;

  color: #a47c8b;

  font-family: var(--font-small);
  font-size: 11px;
}



/* =========================================================
   EXPLORE LINK IN SIDEBAR
   ========================================================= */

.sidebar-heading-link {
  color: inherit;
  text-decoration: none;
}


.sidebar-heading-link:hover {
  color: #b75f7d;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .explore-grid {
    grid-template-columns: 1fr;
  }


  .explore-card-image {
    height: 190px;
  }


  .explore-card-content p {
    min-height: auto;
  }

}