.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}

.board{position:relative;min-height:calc(100vh - 64px);background-color:#b5895a;
  background-image:
    radial-gradient(rgba(90,55,25,.45) 1px,transparent 1.6px),
    radial-gradient(rgba(245,215,165,.4) 1px,transparent 1.7px),
    radial-gradient(rgba(70,40,15,.3) 2px,transparent 2.6px),
    radial-gradient(rgba(225,185,135,.35) 2.5px,transparent 3.2px),
    radial-gradient(rgba(60,35,12,.22) 4px,transparent 5px);
  background-size:7px 7px,11px 13px,23px 19px,31px 37px,53px 47px;
  background-position:0 0,3px 5px,7px 2px,13px 17px,21px 9px}
.board::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(36,180,212,.55) 0%,rgba(79,176,220,.4) 45%,rgba(207,108,228,.55) 100%)}
.board .container{position:relative;max-width:1280px;padding-top:64px;padding-bottom:96px;display:flex;flex-direction:column;gap:48px}
.board h1{text-align:center;color:#F9F6FE;text-shadow:0 2px 12px rgba(12,42,51,.25)}
.board .empty{text-align:center;color:#F9F6FE;font-size:var(--font-size-lg)}

.notes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:48px 40px}
.notes li{display:flex}
.note{position:relative;width:100%;min-height:240px;display:flex;flex-direction:column;gap:12px;text-align:left;border:0;cursor:pointer;font:inherit;color:#2a2a2a;padding:40px 24px 28px;
  background:var(--note,#fff3a3);transform:rotate(var(--rot,0deg));
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 12px 20px -6px rgba(40,20,5,.45);transition:transform .2s ease,box-shadow .2s ease}
.note:hover{transform:rotate(0) scale(1.04);box-shadow:0 1px 1px rgba(0,0,0,.08),0 20px 32px -8px rgba(40,20,5,.5)}
.note:focus-visible{outline:3px solid #F9F6FE;outline-offset:4px}
.note::before{content:"";position:absolute;top:-9px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6c8ff,#cf6ce4 50%,#8a3aa0);box-shadow:2px 5px 5px rgba(30,15,5,.45),inset -2px -3px 4px rgba(0,0,0,.25)}
.notes li:nth-child(even) .note::before{background:radial-gradient(circle at 35% 30%,#bff0fb,#24b4d4 50%,#137a92)}
.notes li:nth-child(4n+1) .note{--note:#fff3a3}
.notes li:nth-child(4n+2) .note{--note:#cdeff7}
.notes li:nth-child(4n+3) .note{--note:#f3d4fa}
.notes li:nth-child(4n+4) .note{--note:#F9F6FE}
.notes li:nth-child(8n+1) .note{--rot:-2deg}
.notes li:nth-child(8n+2) .note{--rot:1.5deg}
.notes li:nth-child(8n+3) .note{--rot:-1deg}
.notes li:nth-child(8n+4) .note{--rot:2.5deg}
.notes li:nth-child(8n+5) .note{--rot:-2.5deg}
.notes li:nth-child(8n+6) .note{--rot:1deg}
.notes li:nth-child(8n+7) .note{--rot:2deg}
.notes li:nth-child(8n+8) .note{--rot:-1.5deg}
.note__title{font-weight:700;font-size:1.25rem;line-height:1.25;text-wrap:pretty}
.note__teaser{font-size:1rem;line-height:1.5;color:#3d3d3d;text-wrap:pretty}
.note__more{margin-top:auto;padding-top:8px;font-size:.875rem;font-weight:700;color:#7a2b8c}
@media (prefers-reduced-motion:reduce){.note{transition:none}.note:hover{transform:rotate(var(--rot,0deg))}}

.post-dialog{width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 64px);border:0;border-radius:var(--radius-lg);padding:0;background:var(--color-surface);color:var(--color-text);box-shadow:0 24px 64px rgba(12,42,51,.35)}
.post-dialog::backdrop{background:rgba(12,42,51,.55)}
.post-dialog__head{position:sticky;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 16px;background:var(--color-surface);border-bottom:4px solid transparent;border-image:linear-gradient(115deg,#24b4d4,#cf6ce4) 1}
.post-dialog__head h2{font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem)}
.post-dialog__close{flex:none;width:44px;height:44px;border:0;border-radius:var(--radius-md);background:var(--color-surface-muted);color:var(--color-text);font-size:1.5rem;line-height:1;cursor:pointer}
.post-dialog__close:hover{background:var(--color-border)}
.post-dialog__body{padding:20px 24px 32px;line-height:1.65}
@media(max-width:767px){.board .container{padding-top:48px;padding-bottom:64px}.notes{gap:40px 24px}}
.rich>*+*{margin-top:12px}
.rich h2{font-size:1.375rem;margin-top:24px}
.rich h3{font-size:1.125rem;margin-top:20px}
.rich ul,.rich ol{padding-left:1.5em;margin-bottom:0}
.rich li+li{margin-top:4px}
.rich blockquote{margin-left:0;margin-right:0;padding-left:16px;border-left:3px solid var(--color-secondary);font-style:italic;color:var(--color-text-muted)}
.rich a{color:#137a92;text-decoration:underline}
.rich a:hover{color:var(--color-secondary)}