/* =========================================================
   1. FONT
========================================================= */

@font-face {
  font-family: "ParanoidRabbit";
  src: url("../assets/Paranoid_Rabbit_erc_tryout_2008.ttf");
}


/* =========================================================
   2. RESET / BASE
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  padding: 18px 10px 30px;
  font-family: "Verdana", "Trebuchet MS", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #241427;
  background-image: url("https://bettysgraphics.neocities.org/images/backgrounds/183.GIF");
  background-color: darkslateblue;
  background-size: 50%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  position: relative;
  color: #7a2f73;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background: #ff7adf;
  transition: width 0.25s ease;
}

a:hover {
  color: #ff4fcf;
}

a:hover::after {
  width: 100%;
}


/* =========================================================
   3. HEADER
========================================================= */

.site-header {
  max-width: 58rem;
  margin: 0 auto 14px;
  text-align: center;
}

.header-inner {
  padding: 6px 8px;
}

.site-header h1 {
  margin: 0 0 6px;
  font-family: "ParanoidRabbit", sans-serif;
  font-size: 2.5rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 2px;
  color: #f7f7ff;
  text-shadow:
    2px 2px 0 rgba(62, 8, 63, 0.35),
    0 0 8px rgba(255, 255, 255, 0.15);
}


/* =========================================================
   4. TOP NAV
========================================================= */

.top-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-nav li {
  margin: 0;
  padding: 0;
}

.top-nav a {
  font-family: "ParanoidRabbit", sans-serif;
  font-size: 1rem;
  letter-spacing: 1px;
  color: #fff6ff;
  text-transform: lowercase;
  text-shadow: 1px 1px 0 rgba(62, 8, 63, 0.45);
}

.top-nav a:hover,
.top-nav a:focus {
  color: #ffb6f0;
}

.top-nav a::after {
  display: none;
}


/* =========================================================
   5. MAIN CONTAINER
========================================================= */

.main-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto 12px;
  padding: 10px 10px 54px;
  overflow: hidden;

  background: linear-gradient(
    to bottom,
    rgba(96, 72, 150, 0.55) 0%,
    rgba(122, 72, 170, 0.48) 45%,
    rgba(70, 45, 120, 0.60) 100%
  );
  border: 2px solid rgba(255, 150, 230, 0.7);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 12px rgba(255, 120, 220, 0.6),
    0 0 22px rgba(200, 120, 255, 0.4),
    0 12px 30px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   6. REUSABLE PAGE LAYOUTS
========================================================= */

.layout-grid {
  display: grid;
  align-items: start;
  gap: 12px;
  width: 100%;
}

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

.layout-three-wide {
  grid-template-columns: 220px minmax(0, 1fr) 220px;
}

.layout-three-tight {
  grid-template-columns: 170px minmax(0, 1fr) 170px;
}

.layout-two {
  grid-template-columns: 220px minmax(0, 1fr);
}

.layout-two-equal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layout-two-wide-left {
  grid-template-columns: 260px minmax(0, 1fr);
}

.layout-two-wide-right {
  grid-template-columns: minmax(0, 1fr) 260px;
}

.layout-single {
  grid-template-columns: minmax(0, 1fr);
}

.full-width-window {
  grid-column: 1 / -1;
}

.left-column,
.center-column,
.right-column {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 16px;
  min-width: 0;
}


/* =========================================================
   7. WINDOW SIZES
========================================================= */

.window-fill {
  width: 100%;
  max-width: none;
}

.window-sm {
  max-width: 220px;
}

.window-md {
  max-width: 320px;
}

.window-lg {
  max-width: 460px;
}

.window-xl {
  max-width: 720px;
}

.window-center {
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   8. WINDOW BASE
========================================================= */

.window {
  position: relative;
  align-self: start;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  background: linear-gradient(
    to bottom,
    #ffc4e9 0%,
    #f29dd8 55%,
    #cc71bb 100%
  ) !important;

  border: 2px solid #ff8dd5 !important;

  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 10px rgba(83, 12, 63, 0.25);
}

.window:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(255, 150, 255, 0.5);
}

.window .window-body {
  min-width: 0;
  margin: 0 !important;
  padding: 8px !important;
  background: linear-gradient(
    to bottom,
    #ffc8eb 0%,
    #f3a3db 55%,
    #cf79c0 100%
  ) !important;
}


/* =========================================================
   9. TITLE BAR BASE
========================================================= */

.title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(
    to right,
    #d94bb3 0%,
    #b45cff 45%,
    #ff87d5 100%
  ) !important;
  border-bottom: 1px solid #7e2a72;
}

.title-bar-text {
  min-width: 0;
  color: white !important;
  font-family: "Verdana", "Trebuchet MS", sans-serif;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.2px;
  text-shadow: 1px 1px 0 rgba(81, 8, 60, 0.45);
}

.title-bar-controls {
  display: flex !important;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.title-bar-controls button {
  position: relative;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  padding: 0 !important;
  background: linear-gradient(
    to bottom,
    #ffcdf1 0%,
    #f091da 45%,
    #c35cb8 100%
  ) !important;
  border: 1px solid #ffdff6 !important;
  border-top-color: #fff3fc !important;
  border-left-color: #fff3fc !important;
  border-right-color: #7a3c79 !important;
  border-bottom-color: #7a3c79 !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    1px 1px 2px rgba(60, 0, 60, 0.2);
}

.title-bar-controls button::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: white !important;
  font-weight: bold;
  opacity: 1 !important;
  filter: none !important;
}

.title-bar-controls button[aria-label="Minimize"]::before {
  content: "—";
  font-size: 12px;
  line-height: 1;
}

.title-bar-controls button[aria-label="Maximize"]::before {
  content: "□";
  font-size: 10px;
  line-height: 1;
}

.title-bar-controls button[aria-label="Close"]::before {
  content: "×";
  font-size: 13px;
  line-height: 1;
}


/* =========================================================
   10. TITLE BAR VARIANTS
========================================================= */

.titlebar-main .title-bar {
  min-height: 28px;
  padding: 2px 4px;
}

.titlebar-main .title-bar-text {
  font-size: 0.8rem;
}

.titlebar-main .title-bar-controls button {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
}

.titlebar-side .title-bar {
  min-height: 26px;
  padding: 2px 4px;
}

.titlebar-side .title-bar-text {
  font-size: 0.74rem;
}

.titlebar-side .title-bar-controls button {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}

.titlebar-tight .title-bar {
  min-height: 24px;
  padding: 2px 3px;
}

.titlebar-tight .title-bar-text {
  flex: 1 1 auto;
  overflow: hidden;
  padding-right: 4px;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titlebar-tight .title-bar-controls button {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
}


/* =========================================================
   11. INNER PANELS
========================================================= */

.panel-content,
.side-nav {
  padding: 10px;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 210, 240, 0.48) 48%,
      rgba(205, 255, 250, 0.42) 100%
    ),
    url("https://bettysgraphics.neocities.org/images/backgrounds/178.GIF");
  border: 2px solid #ff59bc;
  border-top-color: #ffb8e7;
  border-left-color: #ffb8e7;
  border-right-color: #95306f;
  border-bottom-color: #95306f;
  border-radius: 4px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 5px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   12. PANEL TYPOGRAPHY
========================================================= */

.panel-content {
  text-align: center;
}

.panel-content h2 {
  display: inline-block;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 6px 14px;
  font-family: "Palatino Linotype", "Book Antiqua", serif;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.3px;
  color: #5a295c;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.35);
  background: linear-gradient(
    to right,
    #ffb6e5 0%,
    #ffe4f6 50%,
    #ffb6e5 100%
  );
  border: 1px solid #cf63a4;
  border-radius: 999px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.5),
    0 2px 4px rgba(120, 40, 100, 0.15);
  transform: rotate(-0.5deg);
}

.panel-content h2::before,
.panel-content h2::after {
  content: "♡";
  margin: 0 6px;
  font-size: 0.8em;
  color: #d85cb0;
}

.panel-content h3 {
  margin: 0 0 8px;
  font-family: "Palatino Linotype", "Book Antiqua", serif;
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
  color: #3b1d41;
}

.panel-content p,
.panel-content li {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
  color: #2a1a2e;
}


/* =========================================================
   13. SHARED SMALL ELEMENTS
========================================================= */

.sidebar-button {
  display: block;
  margin: 12px auto 0;
}

.site-buttons {
  max-width: 58rem;
  margin: 8px auto 0;
  text-align: left;
}

.status {
  margin-top: -10px;
  font-size: 12px;
  text-align: center;
  color: #ffd6f9;
}

.buttons {
  margin-top: 20px;
  text-align: center;
}

.buttons img {
  margin: 2px;
}

.viewer-note,
.series-note,
.year-note,
.thinking-note,
.tags {
  font-size: 0.9rem;
}

.viewer-note,
.series-note,
.year-note,
.thinking-note {
  margin-bottom: 10px;
}

.year-note {
  line-height: 1.35;
}

.thinking-note {
  font-style: italic;
  color: #6f347f;
}

.tags {
  line-height: 1.3;
  letter-spacing: 0.3px;
  color: #a84d93;
}

.series-divider {
  margin: 10px 0 16px;
  text-align: center;
  letter-spacing: 4px;
  color: #ffb6eb;
}

.archive-nav-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 0.95rem;
}

.link-button {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  color: #5a2a5c;
  background: linear-gradient(
    to bottom,
    #ffd6f2,
    #ffb3e6
  );
  border: 1px solid #cf63a4;
  border-radius: 999px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.6),
    0 2px 3px rgba(120,40,100,0.15);
  transition: all 0.2s ease;
}

.link-button::after {
  display: none;
}

.link-button:hover {
  transform: translateY(-1px);
  color: white;
  background: linear-gradient(
    to bottom,
    #b9f0ff,
    #7fd2ff
  );
}


/* =========================================================
   14. HOME PAGE
========================================================= */

.sidebar-window,
.bottom-left-window,
.featured-window,
.upcoming-window,
.guestbook-window,
.content-window {
  width: 100%;
  min-width: 0;
}

.sidebar-window .panel-content,
.bottom-left-window .panel-content,
.upcoming-window .panel-content,
.guestbook-window .panel-content {
  min-height: 150px;
}

.featured-window .panel-content {
  padding: 8px 10px;
  text-align: center;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  justify-content: center;
  justify-items: center;
  align-items: start;
  gap: 18px;
  max-width: 520px;
  margin: 12px auto 0;
}

.featured-item {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  text-align: center;
}

.featured-work-img {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 0 auto 10px;
  border-radius: 4px;
  object-fit: contain;
}

.featured-item:last-child .featured-work-img {
  background: rgba(255, 255, 255, 0.16);
  object-fit: contain;
}

.featured-item figcaption {
  max-width: 220px;
  margin: 0 auto;
  font-family: "Verdana", "Trebuchet MS", sans-serif;
  font-size: 0.82rem;
  line-height: 1.15;
  text-align: center;
  color: #341b38;
}

.home-shell {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.side-sticker {
  position: absolute;
  z-index: 1;
  opacity: 0.96;
  pointer-events: none;
}

.sticker-left {
  top: 260px;
  left: -125px;
  width: 92px;
  transform: rotate(-15deg);
}

.sticker-right {
  top: 40px;
  right: -118px;
  width: 82px;
  transform: rotate(14deg);
}

.corner-rabbit {
  position: absolute;
  right: 18px;
  bottom: 10px;
  z-index: 3;
  width: 95px;
  pointer-events: none;
}

.upcoming-window .title-bar,
.guestbook-window .title-bar {
  min-height: 26px;
  padding: 2px 4px;
}

.upcoming-window .title-bar-text,
.guestbook-window .title-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding-right: 4px;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upcoming-window .title-bar-controls,
.guestbook-window .title-bar-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.upcoming-window .title-bar-controls button,
.guestbook-window .title-bar-controls button {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
}

.upcoming-window .panel-content,
.guestbook-window .panel-content {
  padding: 8px;
}

.upcoming-window .panel-content h2,
.guestbook-window .panel-content h2 {
  display: inline-block;
  max-width: 100%;
  margin: 0 auto 10px;
  padding: 5px 10px;
  font-size: 0.95rem;
  line-height: 1.1;
}

.upcoming-window .panel-content h2::before,
.upcoming-window .panel-content h2::after,
.guestbook-window .panel-content h2::before,
.guestbook-window .panel-content h2::after {
  margin: 0 4px;
}


/* =========================================================
   15. PORTFOLIO HUB PAGE
========================================================= */

.portfolio-menu-window .panel-content,
.portfolio-menu-window,
.portfolio-menu-window .window-body {
  position: relative;
  overflow: visible;
}

.portfolio-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  justify-items: center;
  gap: 28px 24px;
  max-width: 620px;
  margin: 18px auto 10px;
}

.portfolio-folder {
  position: relative;
  display: block;
  width: 180px;
  height: 210px;
  text-decoration: none;
  transform-origin: center bottom;
  transition: transform 0.22s ease;
}

.portfolio-folder::after {
  display: none;
}

.folder-front {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "ParanoidRabbit", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: #fff5ff;
  text-shadow: 1px 1px 0 rgba(62, 8, 63, 0.35);
  clip-path: polygon(
    0% 12%,
    40% 12%,
    65% 22%,
    100% 22%,
    100% 100%,
    0% 100%
  );
  background: linear-gradient(
    to bottom,
    #ffc1ea 0%,
    #d36ee3 42%,
    #8e4fd2 100%
  );
  border: 2px solid #ffd6f2;
  border-top-color: #fff0fb;
  border-left-color: #fff0fb;
  border-right-color: #6c2d96;
  border-bottom-color: #6c2d96;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.4),
    1px 1px 4px rgba(75,15,67,0.25);
  transition: all 0.25s ease;
}

.folder-front::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.35),
    rgba(255,255,255,0)
  );
  pointer-events: none;
}

.side-preview {
  position: absolute;
  top: 42px;
  left: 50%;
  z-index: 1;
  width: 108px;
  height: 134px;
  margin-left: -54px;
  overflow: hidden;
  opacity: 0;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    #fffafc 0%,
    #fbe8f4 100%
  );
  border: 1px solid rgba(120, 50, 110, 0.18);
  box-shadow:
    0 8px 18px rgba(40, 10, 50, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.08);
  transition: transform 0.32s ease, opacity 0.22s ease;
}

.side-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("https://www.transparenttextures.com/patterns/paper-fibers.png");
  opacity: 0.25;
}

.side-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-1 {
  transform: translateY(24px) rotate(-3deg) scale(0.98);
}

.preview-2 {
  transform: translateY(20px) rotate(1deg) scale(0.99);
}

.preview-3 {
  transform: translateY(26px) rotate(4deg) scale(0.97);
}

.portfolio-folder:hover,
.portfolio-folder:focus {
  transform: rotate(-1deg) translateY(-2px);
}

.portfolio-folder:nth-child(odd):hover,
.portfolio-folder:nth-child(odd):focus {
  transform: rotate(-1.5deg) translateY(-2px);
}

.portfolio-folder:nth-child(even):hover,
.portfolio-folder:nth-child(even):focus {
  transform: rotate(1.2deg) translateY(-2px);
}

.vertical-folder:hover .preview-1,
.vertical-folder:focus .preview-1 {
  opacity: 1;
  transform: translateY(-34px) rotate(-10deg);
}

.vertical-folder:hover .preview-2,
.vertical-folder:focus .preview-2 {
  opacity: 1;
  transform: translateY(-52px) rotate(0deg);
}

.vertical-folder:hover .preview-3,
.vertical-folder:focus .preview-3 {
  opacity: 1;
  transform: translateY(-28px) rotate(9deg);
}

.folder-empty .side-preview {
  display: none;
}

.folder-empty:hover,
.folder-empty:focus {
  transform: rotate(1.5deg) translateY(-2px);
}

.folder-empty .folder-front {
  opacity: 0.92;
}

.preview-transparent {
  padding: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
}

.folder-sketchbook .side-preview {
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

.folder-sketchbook .side-preview::after {
  display: none;
}

.folder-sketchbook .side-preview img {
  padding: 0;
  background: transparent;
  filter: none;
  object-fit: contain;
}

.painter-guy {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  width: 70px;
  pointer-events: none;
  transform: rotate(4deg);
}


/* =========================================================
   16. YEAR PORTFOLIO PAGE
========================================================= */

.year-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.year-info-window {
  flex: 0 0 28%;
  min-width: 0;
}

.year-context-window {
  flex: 1 1 68%;
  min-width: 0;
  box-shadow: 0 0 18px rgba(255, 150, 240, 0.35);
}

.year-gallery-window {
  flex: 1 1 100%;
}

.year-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.small-grid {
  grid-template-columns: repeat(3, 1fr);
}

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

.year-grid img {
  display: block;
  width: 100%;
  border-radius: 4px;
}

.art-card {
  margin: 0;
  padding: 8px;
  background: rgba(255, 240, 250, 0.22);
  border: 1px solid #ffb8e7;
  border-radius: 6px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.35),
    0 2px 6px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.art-card:hover {
  transform: translateY(-3px) rotate(-0.5deg);
  box-shadow:
    0 0 12px rgba(255, 150, 240, 0.35),
    0 5px 12px rgba(0,0,0,0.22);
}

.art-card img:hover {
  cursor: zoom-in;
}

.art-card figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.25;
  text-align: center;
}


/* =========================================================
   17. SKETCHBOOKS HUB PAGE
========================================================= */

.sketchbooks-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.sketchbooks-info-window {
  flex: 0 0 58%;
  min-width: 0;
}

.sketchbooks-note-window {
  flex: 0 0 39%;
  min-width: 0;
}

.sketchbooks-archive-window,
.sketchbooks-intro-window,
.sketchbooks-gallery-window {
  flex: 1 1 100%;
}

.sketchbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 10px;
}

.sketchbook-card {
  margin: 0;
  padding: 8px;
  text-align: center;
  background: rgba(255, 245, 252, 0.25);
  border: 1px solid #ffb8e7;
  border-radius: 6px;
}

.sketchbook-card img {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  border-radius: 4px;
}

.sketchbook-card a:hover img,
.sketchbook-card a:focus img {
  transform: rotate(-1deg) translateY(-2px);
  transition: 0.2s ease;
}

.sketchbook-card figcaption {
  font-size: 0.9rem;
  line-height: 1.2;
}

.scrapbook-board {
  position: relative;
  min-height: 900px;
  overflow: hidden;
}

.scrapbook-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0)
  );
  pointer-events: none;
}

.scrapbook-item {
  position: absolute;
  display: block;
  width: 38%;
  text-align: center;
  text-decoration: none;
  color: #2b1630;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.scrapbook-item img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.28));
}

.scrapbook-item span {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  font-size: 0.9rem;
  background: rgba(255, 220, 245, 0.72);
  border: 1px solid #ffb8e7;
  border-radius: 999px;
}

.scrapbook-item:hover,
.scrapbook-item:focus {
  transform: scale(1.03) rotate(-1deg);
  filter: brightness(1.03);
}

.item-a { top: 20px; left: 3%; transform: rotate(-2deg); }
.item-b { top: 60px; right: 4%; transform: rotate(2deg); }
.item-c { top: 430px; left: 7%; transform: rotate(1deg); }
.item-d { top: 500px; right: 8%; transform: rotate(-2deg); }

.item-a:hover { transform: rotate(-3deg) scale(1.03); }
.item-b:hover { transform: rotate(1deg) scale(1.03); }
.item-c:hover { transform: rotate(0deg) scale(1.03); }
.item-d:hover { transform: rotate(-3deg) scale(1.03); }


/* =========================================================
   18. SINGLE SKETCHBOOK PAGE
========================================================= */

.sketchbook-page,
.sketchbook-single-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.sketchbook-info-window,
.sketchbook-viewer-window {
  flex: 1 1 100%;
}

.sketchbook-viewer-window .panel-content {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 240, 248, 0.80) 100%
  );
}

.sketchbook-pages {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0 2px;
}

.sketchbook-spread {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  transform-origin: center top;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.sketchbook-spread + .sketchbook-spread {
  margin-top: -10px;
}

.sketchbook-spread img {
  position: relative;
  z-index: 1;
  display: block;
  width: 84%;
  max-width: 820px;
  height: auto;
  background: transparent;
}

.sketchbook-spread::before {
  content: "";
  position: absolute;
  top: -14px;
  z-index: 3;
  width: 120px;
  height: 42px;
  pointer-events: none;
  background-image: url("../images/ui/tape.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.22s ease;
}

.spread-1,
.spread-3,
.spread-5,
.spread-7,
.spread-9 {
  transform: rotate(-1.2deg);
}

.spread-1 img,
.spread-3 img,
.spread-5 img,
.spread-7 img,
.spread-9 img {
  margin-right: auto;
  margin-left: 4%;
}

.spread-1::before,
.spread-3::before,
.spread-5::before,
.spread-7::before,
.spread-9::before {
  left: 18%;
  transform: rotate(-7deg);
  background-position: right center;
}

.spread-2,
.spread-4,
.spread-6,
.spread-8 {
  transform: rotate(1.2deg);
}

.spread-2 img,
.spread-4 img,
.spread-6 img,
.spread-8 img {
  margin-right: 4%;
  margin-left: auto;
}

.spread-2::before,
.spread-4::before,
.spread-6::before,
.spread-8::before {
  top: -3px;
  right: 18%;
  transform: rotate(8deg);
  background-position: left center;
}

.spread-1:hover,
.spread-3:hover,
.spread-5:hover,
.spread-7:hover,
.spread-9:hover {
  transform: rotate(-1.2deg) scale(1.015) translateY(-4px);
  filter: brightness(1.02);
}

.spread-2:hover,
.spread-4:hover,
.spread-6:hover,
.spread-8:hover {
  transform: rotate(1.2deg) scale(1.015) translateY(-4px);
  filter: brightness(1.02);
}

.sketchbook-spread:hover::before {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

.spread-1:hover::before,
.spread-3:hover::before,
.spread-5:hover::before,
.spread-7:hover::before,
.spread-9:hover::before {
  background-image: url("../images/ui/taperight.png");
  transform: rotate(-10deg) translateY(-2px);
}

.spread-2:hover::before,
.spread-4:hover::before,
.spread-6:hover::before,
.spread-8:hover::before {
  background-image: url("../images/ui/tapeleft.png");
  transform: rotate(11deg) translateY(-2px);
}


/* =========================================================
   19. ABOUT PAGE
========================================================= */

.about-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.about-image {
  display: block;
  width: 100%;
  border-radius: 4px;
}

.about-page .panel-content p {
  line-height: 1.35;
}


/* =========================================================
   20. CV / CONTACT PAGE
========================================================= */

.cv-page,
.contact-page {
  width: 100%;
}

.cv-sidebar-window,
.cv-main-window,
.cv-side-window,
.contact-info-window,
.contact-main-window,
.contact-side-window {
  width: 100%;
  min-width: 0;
}

.cv-main-window .panel-content h3 {
  margin-top: 18px;
}

.cv-main-window .panel-content p {
  margin-bottom: 14px;
  line-height: 1.5;
}

.contact-main-window .panel-content {
  min-height: 260px;
}


/* =========================================================
   21. FOOTER
========================================================= */

footer {
  max-width: 900px;
  margin: 30px auto 20px;
  padding: 12px 16px;
  text-align: center;
  background: rgba(255, 210, 240, 0.25);
  border: 2px solid #f3a6d6;
  border-radius: 12px;
  backdrop-filter: blur(6px);
  box-shadow:
    0 4px 18px rgba(60, 10, 70, 0.35),
    inset 0 0 0 1px rgba(255,255,255,0.2);
}

footer p {
  margin: 6px 0;
  font-size: 0.8rem;
  color: #4a214a;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

footer a {
  color: #a84d93;
  font-weight: 500;
  text-decoration: none;
}

footer a::after {
  display: none;
}

footer a:hover {
  color: #ff6fd8;
  text-shadow: 0 0 6px rgba(255, 150, 240, 0.6);
}

footer .last-updated {
  display: inline-block;
  margin: 8px 0;
  padding: 4px 12px;
  font-size: 0.75rem;
  background: linear-gradient(
    to bottom,
    #ffd6f2,
    #ffb3e6
  );
  border: 1px solid #cf63a4;
  border-radius: 999px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.5),
    0 2px 4px rgba(120,40,100,0.2);
}

.footer-credit {
  font-size: 0.7rem;
  opacity: 0.6;
}


/* =========================================================
   22. UNDER CONSTRUCTION
========================================================= */

.construction-window {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.construction-content {
  text-align: center;
}

.construction-content p {
  margin-bottom: 0;
  font-size: 0.95rem;
  text-align: center;
}

.construction-content h2 {
  margin-bottom: 10px;
}

.construction-window-main {
  width: 100%;
  max-width: 520px;
  margin: 40px auto;
}

.construction-window-main .construction-content {
  padding: 18px 14px;
  text-align: center;
}

.construction-window-main .construction-content p {
  text-align: center;
}


/* =========================================================
   23. RESPONSIVE
========================================================= */

@media (max-width: 1150px) {
  .layout-three {
    grid-template-columns: 170px minmax(0, 1fr) 170px;
  }

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

  .featured-grid {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    max-width: 440px;
  }

  .featured-item,
  .featured-work-img,
  .featured-item figcaption {
    max-width: 180px;
  }
}

@media (max-width: 980px) {
  .layout-three,
  .layout-three-wide,
  .layout-three-tight {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .right-column {
    grid-column: 2;
    grid-row: 2;
  }

  .full-width-window {
    grid-column: 1 / -1;
  }

  .sticker-left,
  .sticker-right {
    display: none;
  }
}

@media (max-width: 900px) {
  .main-container {
    padding-bottom: 70px;
  }

  .layout-three,
  .layout-three-wide,
  .layout-three-tight,
  .layout-two,
  .layout-two-equal,
  .layout-two-wide-left,
  .layout-two-wide-right,
  .layout-single {
    grid-template-columns: 1fr;
  }

  .left-column,
  .center-column,
  .right-column,
  .full-width-window {
    grid-column: auto;
    grid-row: auto;
  }

  .featured-grid {
    grid-template-columns: 1fr;
    max-width: 260px;
  }

  .featured-item,
  .featured-work-img {
    max-width: 220px;
  }

  .corner-rabbit {
    width: 74px;
  }
}

@media (max-width: 780px) {
  .portfolio-menu-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-folder {
    width: 200px;
  }
}

@media (max-width: 760px) {
  .site-header h1 {
    font-size: 2rem;
  }

  .top-nav ul {
    gap: 10px;
  }

  .top-nav a {
    font-size: 0.95rem;
  }
}