/* =========================================================================
   THE 66TH, NOTES INDEX. The /blog/ page, loaded after site.css. Behaviour
   in notes.js; the markup comes from _scripts/build-blog-hub.mjs.

   A notebook (October 25, 2026: Liam sent Profound's homepage folder,
   "something of this sort kinda vibe but like our variation", then "Build
   option D, the notebook, into /blog/ instead"). A dark folder with a slanted
   tab per topic; every note is a punched sheet of cream grid paper over a
   second sheet, its title in the display face, its art printed from our
   particle renders (_scripts/sheet-art.mjs). From Profound: the folder, the
   tabs, the punched grid paper and the dithered squares. Ours: the topics as
   tabs, concept 3's paper, ink, warm palette and one easing, the deal on a
   tab change and the lift on hover. The head is site.css's page head, the
   button nav.css's Frame button, the closing panel site.css's .note-cta.
   ========================================================================= */

/* ---- the folder's tabs: a hairline along the top and the slant; the open one joins the folder ---- */
.nb-tabs{position:relative;z-index:1;display:flex;gap:2px;margin-bottom:-1px;overflow-x:auto;scrollbar-width:none}
.nb-tabs::-webkit-scrollbar{display:none}
.nb-tab{all:unset;cursor:pointer;flex:none;display:flex;height:53px}
.nb-tab-in{display:flex;align-items:center;gap:.45em;padding:0 var(--s-2) 0 var(--s-4);border:1px solid var(--line);border-right:0;border-bottom:0;border-radius:14px 0 0 0;font-size:var(--t-7);font-weight:500;color:var(--quiet);white-space:nowrap;transition:color .3s,background-color .3s}
.nb-tab sup{font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;vertical-align:baseline;color:var(--quiet-2)}
.nb-slant{display:block;width:40px;height:53px;flex:none}
.nb-slant-fill{fill:transparent;transition:fill .3s}
.nb-slant-line{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.nb-tab:hover .nb-tab-in{color:var(--ink-2)}
.nb-tab[aria-selected="true"] .nb-tab-in{background:var(--panel);color:var(--ink)}
.nb-tab[aria-selected="true"] .nb-slant-fill{fill:var(--panel)}
.nb-tab:focus-visible .nb-tab-in{outline:1px solid var(--ink);outline-offset:-4px}
/* the other tabs only work with notes.js; without it the folder shows every note under All notes */
.nb:not(.is-ready) .nb-tab[aria-selected="false"]{visibility:hidden}

.nb-folder{position:relative;padding:var(--s-6) var(--s-5) var(--s-5);border:1px solid var(--line);border-radius:0 var(--r-card) var(--r-card) var(--r-card);background:var(--panel)}
.nb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--s-5)}

/* ---- a note: its sheet on a second sheet, each laid a little crooked ---- */
.nb-sheet{display:block;color:inherit}
.nb-sheet[hidden]{display:none}
.nb-sheet:nth-child(3n+1){--tilt:-.7deg;--under:rotate(-1.5deg) translate(6px,8px)}
.nb-sheet:nth-child(3n+2){--tilt:.45deg;--under:rotate(1.3deg) translate(-6px,8px)}
.nb-sheet:nth-child(3n){--tilt:-.3deg;--under:rotate(-1deg) translate(5px,9px)}
.nb-pile{position:relative}
.nb-pile::before{content:"";position:absolute;inset:0;border-radius:2px;background:#DDD9D0;transform:var(--under);transition:transform .8s var(--ease);box-shadow:0 14px 34px -16px rgba(0,0,0,.8)}
.nb-paper{position:relative;overflow:hidden;aspect-ratio:3 / 4;padding:11% 8% 8% 17%;border-radius:2px;color:var(--paper-ink);
  background-color:var(--paper);
  background-image:linear-gradient(rgba(23,23,23,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(23,23,23,.07) 1px,transparent 1px);
  background-size:16px 16px;background-position:-1px -1px;
  transform:rotate(var(--tilt));transition:transform .8s var(--ease);
  box-shadow:0 1px 0 rgba(0,0,0,.25),0 26px 50px -26px rgba(0,0,0,.85)}
/* the paper's grain, the same noise as the closing panel's */
.nb-paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}
/* five punched holes, the folder showing through */
.nb-paper::after{content:"";position:absolute;left:5.5%;top:7%;bottom:7%;width:12px;pointer-events:none;
  background-image:radial-gradient(circle,var(--panel) 0 4.5px,transparent 5px),radial-gradient(circle,var(--panel) 0 4.5px,transparent 5px),radial-gradient(circle,var(--panel) 0 4.5px,transparent 5px),radial-gradient(circle,var(--panel) 0 4.5px,transparent 5px),radial-gradient(circle,var(--panel) 0 4.5px,transparent 5px);
  background-size:12px 12px;background-repeat:no-repeat;background-position:0 0,0 25%,0 50%,0 75%,0 100%}
.nb-art{position:relative;display:block;width:100%;height:auto;transition:transform 1s var(--ease)}
.nb-paper h3{position:relative;margin-top:var(--s-4);font-family:var(--font-display);font-weight:200;font-size:var(--t-6);letter-spacing:-.015em;line-height:1.2;color:var(--paper-ink);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.nb-cap{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s-3);margin-top:var(--s-4);font-size:var(--t-7);color:var(--quiet)}
.nb-cap span:first-child{color:var(--ink-2)}
/* on hover the sheet straightens and lifts off the one under it */
.nb-sheet:hover .nb-paper{transform:rotate(0deg) translateY(-10px)}
.nb-sheet:hover .nb-pile::before{transform:rotate(-3.4deg) translate(10px,12px)}
.nb-sheet:hover .nb-art{transform:scale(1.03)}
.nb-sheet:focus-visible{outline:1px solid var(--ink);outline-offset:8px}
.nb-more{display:flex;width:max-content;margin:var(--s-6) auto 0}
.nb-more[hidden]{display:none}
/* a tab dealt: its sheets drop onto the desk one after another */
@keyframes nb-deal{from{opacity:0;transform:translateY(-30px) rotate(4deg)}to{opacity:1;transform:none}}
.nb-sheet.is-dealt{animation:nb-deal .9s var(--ease) backwards}

/* ---- the closing panel, in its own bay ---- */
.nt-close{padding:var(--bay) 0 var(--s-5)}
.nt-close .note-cta{margin:0}

/* ---- arrival: the head rises in ---- */
@keyframes nt-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.page-head h1{animation:nt-up 1.2s var(--ease) backwards}
.page-head .stand{animation:nt-up 1.2s var(--ease) .12s backwards}

@media (max-width:900px){
  .nb-folder{padding:var(--s-5) var(--s-4) var(--s-4)}
  .nb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
  .nb-sheet:nth-child(n){--tilt:-.5deg;--under:rotate(-1.3deg) translate(5px,7px)}
  .nb-sheet:nth-child(2n){--tilt:.4deg;--under:rotate(1.2deg) translate(-5px,7px)}
}
@media (max-width:560px){
  /* on a phone the sheets run as a row you swipe */
  .nb-folder{padding:var(--s-4) 0}
  .nb-grid{display:flex;gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s-2) var(--s-5) var(--s-4);scrollbar-width:none}
  .nb-grid::-webkit-scrollbar{display:none}
  .nb-sheet{flex:0 0 78%;scroll-snap-align:center}
  .nb-more{margin-top:var(--s-3)}
  .nb-tab-in{padding-left:var(--s-3)}
}
@media (prefers-reduced-motion:reduce){
  .page-head h1,.page-head .stand,.nb-sheet.is-dealt{animation:none}
  .nb-paper,.nb-pile::before,.nb-art{transition:none}
}