/* ---------------------------
   POST-IT WALL AESTHETIC CSS
   Neocities-friendly (no :has, no clamp, no svh)
--------------------------- */

/* Palette vars (harmonised pastels) */
:root {
    --bg: #faf7ef;
    /* warm off-white */
    --ink: #2b2b2b;
    --tape: #e7e0d1;

    /* sticky note colours */
    --note-1: #fff6a8;
    /* soft yellow */
    --note-2: #ffd4e5;
    /* blush pink */
    --note-3: #d9f7ff;
    /* sky mint/blue */
    --note-4: #e9d7ff;
    /* lavender */
    --note-5: #dff7d7;
    /* pale green */
    --note-6: #ffe8bf;
    /* peach/cream */

    --shadow: rgba(0, 0, 0, .18);
    --shadow-strong: rgba(0, 0, 0, .25);
}

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

html,
body {
    height: 100%
}

body {
    font-family: "Permanent Marker", "Gill Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.2rem;
    position: relative;
    overflow-x: hidden;
}

/* Global paper texture (CSS-only “noise & fibers”) */
body::before,
body::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    /* subtle paper grain + a faint vertical pattern */
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .015) 0 1px, transparent 1px 2px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .012) 0 2px, transparent 2px 4px);
    mix-blend-mode: multiply;
    opacity: .6;
}

body::after {
    /* random clouding */
    background:
        radial-gradient(1000px 600px at 10% 20%, rgba(0, 0, 0, .03), transparent 60%),
        radial-gradient(900px 500px at 80% 10%, rgba(255, 255, 255, .06), transparent 55%),
        radial-gradient(700px 450px at 50% 90%, rgba(0, 0, 0, .02), transparent 60%);
    opacity: .5;
}

/* Header */
header {
    position: relative;
    z-index: 1;
    margin: 0 0 1rem
}

.site-title {
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: lowercase;
    display: inline-block;
    position: relative;
}

.site-title::before,
.site-title::after {
    content: attr(data-ghost);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: .6;
}

.site-title::before {
    color: #f7d6a1;
    transform: translate(3px, 2px);
}

.site-title::after {
    color: #d7c8ff;
    transform: translate(-2px, -1px);
}

nav {
    margin-top: .4rem;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap
}

nav a {
    text-decoration: none;
    color: #5a4c2e;
    background: #f2ead9;
    border: 1px solid #e1d9c9;
    padding: .3rem .6rem;
    border-radius: .4rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05) inset;
}

nav a:hover {
    background: #efe4cd
}

/* Board grid */
.board {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    margin-top: 1rem;
}

/* Sticky note base */
.note {
    position: relative;
    background: var(--note-1);
    padding: 1rem .9rem 1.1rem;
    border-radius: 6px 10px 14px 10px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow:
        0 10px 18px -6px var(--shadow),
        0 2px 0 rgba(255, 255, 255, .8) inset;
    transform: rotate(-0.6deg);
    transition: transform .18s ease, box-shadow .18s ease;
    isolation: isolate;
    /* keep pseudo-elements contained */
}

/* Paper texture on each note */
.note {
    position: relative;
    padding: 1rem .9rem 1.1rem;
    border-radius: 6px 10px 14px 10px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow:
      0 10px 18px -6px rgba(0,0,0,.18),
      0 2px 0 rgba(255,255,255,.8) inset;
    transform: rotate(-0.6deg);
    transition: transform .18s ease, box-shadow .18s ease;
    isolation: isolate;
  }
  
  /* Category-specific sticky colours */
  .note[data-tags~="book"]  { background: #fff6a8; } /* soft yellow */
  .note[data-tags~="film"]  { background: #ffd4e5; } /* blush pink */
  .note[data-tags~="art"]   { background: #e9d7ff; } /* lavender */
  .note[data-tags~="tv"]    { background: #d9f7ff; } /* sky blue */
  .note[data-tags~="other"] { background: #dff7d7; } /* pale green */
  
  /* Optional: for multi-category notes, pick the first tag colour — CSS will apply the first matching rule in the file */
  
  /* Paper texture still applies */
  .note::after {
    content:"";
    position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 1px, transparent 1px 2px),
      radial-gradient(220px 160px at 20% 15%, rgba(255,255,255,.35), transparent 60%),
      radial-gradient(240px 180px at 80% 90%, rgba(0,0,0,.04), transparent 70%);
    mix-blend-mode:multiply; opacity:.6;
  }
  
  /* Washi tape at top */
  .note::before {
    content:"";
    position:absolute; left:50%; top:-12px; width:68px; height:22px;
    transform: translateX(-50%) rotate(-2deg);
    background:
      repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 6px, rgba(255,255,255,.06) 6px 12px),
      linear-gradient(#efe9da, var(--tape));
    border:1px solid rgba(0,0,0,.05);
    border-radius:4px;
    box-shadow: 0 4px 6px -2px rgba(0,0,0,.25);
    opacity:.95;
  }
  
  /* Hover lift */
  .note:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow:
      0 14px 22px -6px rgba(0,0,0,.25),
      0 2px 0 rgba(255,255,255,.85) inset;
  }

/* Title + vibe pill */
.note h2 {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.25rem;
    margin: 0 0 .35rem 0;
    font-weight: normal;
    /* handwriting fonts look better without bold */
    line-height: 1.2;
}

.vibe {
    display: inline-block;
    font-family: 'Reenie Beanie', cursive;
    /* lighter scribble font */
    font-size: 1.3rem;
    font-weight: normal;
    color: #2b2b2b;
    /* background: linear-gradient(90deg, rgba(255, 255, 0, 0.7) 0%, rgba(255, 230, 100, 0.7) 100%);
    padding: .18rem .5rem .12rem;
    border-radius: 6px;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
    border: 1px solid rgba(0, 0, 0, .08);
    transform: rotate(-1deg); */
    /* text-shadow: 
    0 0 1px rgba(0,0,0,0.15),
    0 0 2px rgba(255,255,0,0.5); */
}

/* Body text spacing */
.note p {
    margin: .5rem 0;
}

/* “Random” harmonious colours via nth-child cycle (no JS) */
.note:nth-child(6n+1) {
    background: var(--note-1);
}

.note:nth-child(6n+2) {
    background: var(--note-2);
}

.note:nth-child(6n+3) {
    background: var(--note-3);
}

.note:nth-child(6n+4) {
    background: var(--note-4);
}

.note:nth-child(6n+5) {
    background: var(--note-5);
}

.note:nth-child(6n+6) {
    background: var(--note-6);
}

/* Slightly different tilts for variety */
.note:nth-child(4n+1) {
    transform: rotate(-1.2deg);
}

.note:nth-child(4n+2) {
    transform: rotate(.8deg);
}

.note:nth-child(4n+3) {
    transform: rotate(-.3deg);
}

.note:nth-child(4n+4) {
    transform: rotate(1.4deg);
}

/* Buttons instead of links */
/* Chip bar */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: .8rem 0 1.2rem;
  }
  
  /* Mini post-it chips (buttons) */
  .chips .chip {
    position: relative;
    appearance: none;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff7c2;                /* default soft yellow */
    padding: .45rem .7rem .38rem;
    border-radius: 6px 10px 8px 10px;
    box-shadow:
      0 2px 0 rgba(255,255,255,.9) inset,
      0 6px 10px -6px rgba(0,0,0,.28);
    transform: rotate(-1deg);
    cursor: pointer;
    user-select: none;
  
    /* handwritten */
    font-family: 'Permanent Marker', 'Reenie Beanie', cursive;
    font-size: 0.98rem;
    color: #2b2b2b;
    line-height: 1;
  
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    outline: none;
    z-index: 0;
  }
  
  /* Paper texture on chip */
  .chips .chip::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 2px),
      radial-gradient(140px 90px at 20% 15%, rgba(255,255,255,.35), transparent 60%),
      radial-gradient(160px 110px at 80% 90%, rgba(0,0,0,.04), transparent 70%);
    mix-blend-mode: multiply;
    opacity: .7;
  }
  
  /* Tiny washi tape tab */
  .chips .chip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    width: 38px; height: 16px;
    transform: translateX(-50%) rotate(-2deg);
    background:
      repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 6px, rgba(255,255,255,.06) 6px 12px),
      linear-gradient(#efe9da, #e7e0d1);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 4px;
    box-shadow: 0 3px 6px -3px rgba(0,0,0,.25);
    opacity: .95;
    z-index: -1;
  }
  
  /* Hover/active states */
  .chips .chip:hover {
    transform: rotate(0deg) translateY(-1px);
    box-shadow:
      0 2px 0 rgba(255,255,255,.95) inset,
      0 10px 14px -8px rgba(0,0,0,.35);
  }
  .chips .chip.is-active {
    background: #ffe396;                 /* highlighter-y */
    border-color: #e0c45f;
    transform: rotate(0.4deg) translateY(-1px);
  }
  
  /* Keyboard focus */
  .chips .chip:focus-visible {
    box-shadow:
      0 0 0 2px #2b2b2b inset,
      0 8px 12px -8px rgba(0,0,0,.35);
  }
  
  /* Tag-specific colours (harmonised pastels) */
  .chips .chip[data-tag="book"]  { background: #fff6a8; } /* yellow */
  .chips .chip[data-tag="film"]  { background: #ffd4e5; } /* blush pink */
  .chips .chip[data-tag="art"]   { background: #e9d7ff; } /* lavender */
  .chips .chip[data-tag="tv"]    { background: #d9f7ff; } /* sky blue */
  .chips .chip[data-tag="other"] { background: #dff7d7; } /* pale green */
  
  /* Slight per-chip wobble so they don't align too perfectly */
  .chips .chip:nth-child(5n+1) { transform: rotate(-1.2deg); }
  .chips .chip:nth-child(5n+2) { transform: rotate(0.8deg);  }
  .chips .chip:nth-child(5n+3) { transform: rotate(-0.4deg); }
  .chips .chip:nth-child(5n+4) { transform: rotate(1.2deg);  }
    
  /* Hidden helper class for filtered-out notes */
  .note.is-hidden { display:none; }
  
/* Mobile tweaks */
@media (max-width: 680px) {
    body {
        padding: 1.2rem .9rem;
    }

    .board {
        gap: 16px;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .site-title {
        font-size: 1.9rem;
    }
}

/* Selection colour */
::selection {
    background: #ffe396;
    color: #2b2b2b
}

::-moz-selection {
    background: #ffe396;
    color: #2b2b2b
}