@font-face{font-family:"Caveat";font-weight:500;src:url(/fonts/caveat-medium.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Caveat";font-weight:700;src:url(/fonts/caveat-bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Reenie Beanie";src:url(/fonts/reenie.ttf) format("truetype");font-display:swap}

:root{--ink:#1d2b4f;--ink-soft:#4a587d;--paper:#f4f3ee}
*{box-sizing:border-box}
html{min-height:100%}
body{
  position:relative;overflow-x:hidden;
  margin:0;min-height:100vh;padding:0 0 8vh;
  font-family:"Caveat",cursive;font-weight:500;color:var(--ink);font-size:26px;
  /* the wall: painted plaster */
  background:
    radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.35),transparent 70%),
    url(/img/wall.jpg) 0 0/900px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    #cfcabf;
  background-attachment:fixed;
}
.svg-defs{position:absolute;width:0;height:0}

/* cork pinboard in a wooden frame - spans 90% of screen */
.board{
  width: min(1560px, 90vw);
  position: relative;z-index: 1;
  margin: 32px auto;
  padding: 48px 40px 64px;
  border-radius: 8px;
  border: 18px solid transparent;
  background:
    url(/img/cork.jpg) 0 0/380px auto padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .22 0 0 0 0 .1 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .17 0 0 0 0 .07 0 0 0 3 -1.25'/%3E%3C/filter%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .78 0 0 0 0 .55 0 0 0 3 -1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23b88a58'/%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") padding-box,
    url(/img/frame.jpg) 0 0/520px auto border-box,
    #4d3019;
  outline: 1px solid rgba(0,0,0,.55);
  outline-offset: -1px;
  box-shadow: inset 0 3px 12px rgba(0,0,0,.45), 0 4px 6px rgba(0,0,0,.3), 0 20px 45px rgba(0,0,0,.35);
}

/* Pinboard Desktop Layout */
.board-layout {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 36px;
  width: 100%;
}

/* Main pinned sheet offcentered to the left */
.board-main {
  flex: 0 1 800px;
  max-width: 820px;
  width: 100%;
  margin-left: 2%;
}

/* Side pinned extras on the right */
.board-extras {
  flex: 1 1 290px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 18px;
}

.sheet{filter:drop-shadow(1px 3px 3px rgba(0,0,0,.35)) drop-shadow(0 14px 14px rgba(0,0,0,.22))}
.pin{
  position:absolute;z-index:3;left:50%;top:8px;width:30px;height:39px;margin-left:-15px;
  background:url(/img/pin.png) center/contain no-repeat;
  filter:drop-shadow(2px 4px 3px rgba(0,0,0,.45));
}

.paper{
  position:relative;width:min(780px,100%);margin:0 auto;
  padding:64px 56px 90px 104px;background:var(--paper);
  transform:rotate(calc(var(--tilt, .7deg) * -1));   /* app.js lowers --tilt on tall sheets so they don't drift off screen */
  /* hand-cut bottom edge: long straight scissor strokes at slightly different angles, nicked where the blades re-entered */
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 29px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201000%2030%27%20preserveAspectRatio=%27none%27%3E%3Cpolygon%20points=%271000,0%201000,10.0%20875.7,11.5%20878.6,13.7%20874.5,14.7%20744.3,13.2%20747.0,14.9%20743.3,15.4%20591.1,10.5%20594.0,13.4%20589.6,13.7%20519.3,14.5%20520.9,16.3%20518.4,16.6%20396.4,17.8%20398.7,20.3%20395.2,21.2%20293.0,19.8%20296.0,22.6%20291.5,22.5%20188.3,14.3%20191.0,16.4%20186.6,17.1%2016.7,15.4%2018.5,18.2%2015.5,19.3%200,19.9%200,19.9%200,0%27/%3E%3C/svg%3E") bottom/100% 30px no-repeat;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 29px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201000%2030%27%20preserveAspectRatio=%27none%27%3E%3Cpolygon%20points=%271000,0%201000,10.0%20875.7,11.5%20878.6,13.7%20874.5,14.7%20744.3,13.2%20747.0,14.9%20743.3,15.4%20591.1,10.5%20594.0,13.4%20589.6,13.7%20519.3,14.5%20520.9,16.3%20518.4,16.6%20396.4,17.8%20398.7,20.3%20395.2,21.2%20293.0,19.8%20296.0,22.6%20291.5,22.5%20188.3,14.3%20191.0,16.4%20186.6,17.1%2016.7,15.4%2018.5,18.2%2015.5,19.3%200,19.9%200,19.9%200,0%27/%3E%3C/svg%3E") bottom/100% 30px no-repeat;
}
/* faint ruled lines + red margin, warped by the same creases as the ink */
.paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;filter:url(#warp);
  background:
    linear-gradient(90deg,transparent 78px,rgba(190,60,60,.40) 78px 80px,transparent 80px),
    repeating-linear-gradient(180deg,transparent 0 38px,rgba(70,110,170,.30) 38px 40px);
  background-position:0 0,0 22px;
}
.paper>.ink{position:relative;z-index:1}
/* creases + paper grain, multiplied over everything on the sheet */
.paper::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  filter:url(#wrinkles);mix-blend-mode:multiply;
}
/* everything written by hand is warped by the same creases */
.ink{filter:url(#warp)}

h1{
  font-family:"Reenie Beanie",cursive;font-weight:400;font-size:clamp(64px,13vw,104px);
  line-height:.9;margin:0 0 .15em;letter-spacing:.01em;
}
h1 .u{display:block;height:14px;margin-top:6px;width:min(420px,80%)}

.list{list-style:none;margin:30px 0 0;padding:0}
.item{
  position:relative;
  display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:center;
  padding:16px 0 18px;
}
/* every second row flips: text | icon */
.item:nth-child(even){grid-template-columns:1fr 96px}
.item:nth-child(even) .pic{order:2}
.item:nth-child(odd){transform:rotate(.25deg)}
.item:nth-child(even){transform:rotate(-.3deg)}
.pic{
  width:96px;height:96px;border:3px solid var(--ink);border-radius:46% 54% 50% 50%/52% 48% 54% 46%;
  overflow:hidden;background:rgba(29,43,79,.06);display:grid;place-items:center;
}
.pic.none{border:0;background:none;border-radius:0;overflow:visible}
.pic.none img{filter:none;object-fit:contain;width:100%;height:100%;mix-blend-mode:multiply}  /* uploaded icons with a white background blend into the paper */
.pic img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.55) contrast(1.05) sepia(.25)}
.pic svg{width:70%;height:70%}
.who{min-width:0}
.name{font-weight:700;font-size:clamp(34px,6vw,46px);line-height:1;overflow-wrap:anywhere}
.cat-tag{
  /* vertical sticker stuck in the left margin of the row, reading bottom to top */
  position:absolute;left:-88px;top:50%;
  writing-mode:vertical-rl;
  transform:translateY(-50%) rotate(178deg);
  font-family:"Caveat",cursive;
  font-size:clamp(15px,2.5vw,18px);
  font-weight:700;
  line-height:1;
  padding:8px 4px;
  border-radius:4px;
  border:1.5px solid rgba(29,43,79,0.3);
  background:rgba(255,255,255,0.7);
  color:#1d2b4f;
  white-space:nowrap;
  letter-spacing:0.5px;
  box-shadow:1px 1px 3px rgba(0,0,0,0.12);
}
.cat-tag .ci{display:inline-block;transform:rotate(180deg);margin-bottom:4px}
.why{font-size:clamp(22px,4vw,28px);color:var(--ink-soft);line-height:1.05;margin-top:4px;overflow-wrap:anywhere}
.src{display:inline-block;margin-top:2px;font-size:19px;color:var(--ink-soft);text-decoration:underline dotted}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;font-size:28px}
.pager a{color:var(--ink);font-weight:700}
.pager .off{visibility:hidden}
.pager .pg{color:var(--ink-soft);font-size:24px}
.empty{font-size:34px;padding:40px 0;color:var(--ink-soft)}
.foot{margin-top:40px;font-size:22px;color:var(--ink-soft)}
.foot a{color:inherit}

/* the "this time you went too far" note */
.note{padding-top:20px}
.note p{margin:.2em 0;line-height:1.1}
.note .dear{font-size:clamp(34px,7vw,46px)}
.note .big{font-family:"Reenie Beanie",cursive;font-size:clamp(60px,14vw,112px);line-height:.92;margin:.25em 0 .2em}
.note .who-name{display:inline-block;position:relative;font-weight:700}
.note .who-name svg{position:absolute;left:-8%;top:-18%;width:116%;height:140%;overflow:visible}
.note .sign{margin-top:46px;text-align:right;font-size:34px}

/* Pin color variations */
.pin-red { filter: hue-rotate(330deg) drop-shadow(2px 4px 3px rgba(0,0,0,.45)); }
.pin-blue { filter: hue-rotate(180deg) drop-shadow(2px 4px 3px rgba(0,0,0,.45)); }
.pin-yellow { filter: hue-rotate(60deg) drop-shadow(2px 4px 3px rgba(0,0,0,.45)); }
.pin-green { filter: hue-rotate(100deg) drop-shadow(2px 4px 3px rgba(0,0,0,.45)); }

/* Pinned items on corkboard */
.pinned-item {
  position: relative;
  filter: drop-shadow(1px 4px 5px rgba(0,0,0,.38)) drop-shadow(0 10px 14px rgba(0,0,0,.24));
  transition: transform .2s ease;
}
.pinned-item:hover {
  transform: scale(1.02) rotate(0deg) !important;
  z-index: 10;
}

/* Polaroid photo (links to Donnie's list) */
.pinned-polaroid {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: #fff;
  padding: 12px 12px 16px;
  border-radius: 2px;
  transform: rotate(3.2deg);
  max-width: 280px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.06);
}
.polaroid-img {
  width: 100%;
  height: 180px;
  background: #f7f6f1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.22);
}
.polaroid-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.polaroid-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(179,38,30,0.92);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.polaroid-caption {
  font-family: "Caveat", cursive;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin-top: 10px;
  line-height: 1.1;
}

/* Yellow Post-it memo */
.pinned-postit {
  background: #fdfd86;
  background: linear-gradient(135deg, #ffff99 0%, #f7f379 100%);
  padding: 24px 20px 20px;
  /* hangs from the pin in its top-right corner, so the left side sags */
  transform: rotate(-6deg);
  transform-origin: 100% 0;
  max-width: 270px;
  clip-path: polygon(0 0, 100% 0, 100% 99%, 88% 100%, 0 99.5%);
}
.pinned-postit .pin { left: auto; right: 10px; top: 4px; margin-left: 0; }
.pinned-postit-title {
  font-family: "Reenie Beanie", cursive;
  font-size: 34px;
  color: #b3261e;
  margin: 0 0 4px;
  line-height: 1;
}
.pinned-postit-body {
  font-family: "Caveat", cursive;
  font-size: 21px;
  line-height: 1.25;
  color: #1a1a1a;
  margin: 0;
}

/* Torn notebook scrap */
.pinned-scrap {
  background: #fbf9f4;
  padding: 20px 22px 24px;
  transform: rotate(2.2deg);
  max-width: 290px;
  clip-path: polygon(
    0 0, 100% 1%, 99.2% 96%,
    92% 98.5%, 85% 97%, 76% 99%, 68% 97.5%, 58% 99%, 48% 97%, 38% 99%, 28% 97.5%, 18% 99%, 8% 97%, 0 98%
  );
  background-image: repeating-linear-gradient(180deg, transparent 0 28px, rgba(70,110,170,.22) 28px 30px);
}
.pinned-scrap-text {
  font-family: "Caveat", cursive;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.grudge-tally {
  letter-spacing: 3px;
  font-size: 20px;
  color: #b3261e;
  font-weight: 700;
}

@media (max-width: 960px) {
  .board { width: 94vw; padding: 32px 20px 48px; border-width: 14px; margin: 24px auto; }
  .board-layout { display: block; }
  .board-main { margin: 0 auto; max-width: 100%; }
  .board-extras { display: none; max-width: none; flex-direction: column; align-items: center; gap: 28px; padding-top: 32px; }
  .board.few .board-extras { display: flex; }
}

@media (max-width:560px){
  .paper{padding:44px 20px 70px 56px}
  .board{padding:26px 12px 36px;border-width:10px;width:96vw;margin:16px auto;}
  .item{grid-template-columns:72px 1fr;gap:14px}
  .item:nth-child(even){grid-template-columns:1fr 72px}
  .pic{width:72px;height:72px}
  .cat-tag{left:-48px}
}

/* Top Navigation Bar */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: #141c2e;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  z-index: 10000;
  font-family: "Caveat", cursive;
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Hand Drawn Logo */
.topbar-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fffca6;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: transform 0.15s ease, color 0.15s ease;
  user-select: none;
}
.topbar-logo:hover {
  transform: scale(1.04) rotate(-1deg);
  color: #fff;
}
.topbar-logo-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));   /* white disc with navy line art */
}
.topbar-logo-text {
  font-weight: 700;
}

/* Menu details / summary container */
.topbar-menu {
  display: flex;
  align-items: center;
}

/* Hamburger 3-lines icon */
.topbar-toggle {
  display: none;
  cursor: pointer;
  outline: none;
  list-style: none;
  padding: 8px;
  user-select: none;
}
.topbar-toggle::-webkit-details-marker,
.topbar-toggle::marker {
  display: none;
}
.topbar-toggle .bar {
  display: block;
  width: 22px;
  height: 2.5px;
  background: #fffca6;
  margin: 4px 0;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.topbar-toggle:hover .bar {
  background: #fff;
}

/* Links row */
.topbar-links {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-link {
  color: #e2e8f0;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.topbar-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.topbar-link.active {
  color: #fffca6;
  background: rgba(255, 252, 166, 0.12);
}
.topbar-btn-login {
  color: #fffca6;
  border: 1.5px solid rgba(255, 252, 166, 0.4);
  border-radius: 12px 16px 14px 18px;
  padding: 2px 14px;
}
.topbar-btn-login:hover {
  background: rgba(255, 252, 166, 0.15);
  color: #fff;
}
.topbar-btn-register {
  background: #8b1814;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.2);
  padding: 2px 14px;
  border-radius: 14px 18px 12px 16px;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
}
.topbar-btn-register:hover {
  background: #a8201a;
  color: #fff;
  transform: scale(1.03);
}
.topbar-user {
  font-size: 19px;
  color: #fffca6;
  padding: 2px 8px;
}

/* login | register */
.topbar-links .ico{width:28px;height:28px;margin-right:6px;flex:none;filter:brightness(0) invert(1)}  /* line art -> white on the dark bar */
.topbar-links .topbar-link{display:inline-flex;align-items:center}
.topbar-sep{width:1px;height:20px;background:rgba(255,255,255,.28)}
.topbar-links .topbar-btn-login,.topbar-links .topbar-btn-register{
  background:none;border:0;box-shadow:none;border-radius:6px;padding:4px 12px;color:#e2e8f0;transform:none}
.topbar-links .topbar-btn-login:hover,.topbar-links .topbar-btn-register:hover{background:rgba(255,255,255,.1);color:#fff;transform:none}

/* DESKTOP VIEW: logo/title LEFT, login | register RIGHT */
@media (min-width: 769px) {
  body { padding-top: 48px; }
  .topbar-toggle { display: none !important; }
  .topbar-links { display: flex !important; }
  .topbar-donnie { display: none !important; }  /* desktop has the polaroid sticker */
  /* newer browsers hide closed <details> content separately; keep the links visible */
  .topbar-menu::details-content { content-visibility: visible; display: contents; }
}

/* MOBILE VIEW: logo only on LEFT, hamburger on RIGHT */
@media (max-width: 768px) {
  body {
    padding-top: 48px;
  }
  .topbar-logo { font-size: 22px; }
  .topbar-logo-text { display: none; }
  .topbar-logo-icon { width: 38px; height: 38px; }
  .topbar-menu { position: relative; }
  .topbar-sep { display: none; }
  .topbar-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  .topbar-menu:not([open]) .topbar-links {
    display: none !important;
  }
  .topbar-menu[open] .topbar-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 44px;
    right: -10px;
    width: 200px;
    background: #141c2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 0 8px 8px;
    padding: 12px;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 10001;
  }
  .topbar-menu[open] .topbar-link {
    justify-content: center;
    text-align: center;
    padding: 8px;
  }
  .topbar-menu[open] .topbar-toggle .bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .topbar-menu[open] .topbar-toggle .bar:nth-child(2) {
    opacity: 0;
  }
  .topbar-menu[open] .topbar-toggle .bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }
}

/* Disclaimer on the wall */
.disclaimer{
  /* full-width bar at the very bottom, like the top bar: #141c2e at 70% opacity (30% transparent) */
  width:100%;margin:auto 0 0;padding:14px 3% 8px;text-align:center;
  background:rgba(20,28,46,.7);border-top:2px solid rgba(255,255,255,.08);box-shadow:0 -2px 12px rgba(0,0,0,.35);
  font-size:18px;line-height:1.3;color:#e2e8f0;
}
.disclaimer .lead{font-size:24px;font-weight:700;color:#fffca6;margin:0 0 4px}
.disclaimer a{color:#fffca6;text-decoration:underline;text-decoration-thickness:2px}
.disclaimer p{margin:0 0 8px}
.footer-sites{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px;margin-top:6px;padding:10px 0 4px;border-top:1px solid rgba(255,255,255,.14);font-size:20px}
.footer-sites a{color:#e2e8f0;text-decoration:none;white-space:nowrap}
.footer-sites a:hover{color:#fffca6;text-decoration:underline}
.footer-sites img{width:24px;height:16px;margin-right:8px;vertical-align:-2px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.footer-sites .sep{color:rgba(255,255,255,.4)}
body.home{display:flex;flex-direction:column;padding-bottom:0}

/* Spray-paint graffiti on the wall, half hidden behind the board */
.wall{position:relative;padding-bottom:150px}
.wall .board{margin:32px auto 0}
.wall-graphs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gf{position:absolute;height:auto;overflow:visible;opacity:.92;mix-blend-mode:multiply}
.gf-1{left:5%;bottom:0;width:460px;transform:rotate(-3deg)}
.gf-2{left:42%;bottom:-14px;width:250px;transform:rotate(4deg)}
.gf-3{right:6%;bottom:0;width:430px;transform:rotate(2deg)}
.gf-4{left:-70px;top:240px;width:220px;transform:rotate(-8deg)}
.gf-5{right:-80px;top:420px;width:230px;transform:rotate(7deg)}
@media (max-width:700px){.wall-graphs{display:none}.wall{padding-bottom:40px}}