/* Paatii Neko! project page. Hand-written; site/index.html is generated by tools/release/website.py, which also checks
   that the colour tokens below equal its TOKENS table and that every text pair reaches WCAG AA.
   Scrapbook look in CSS only (paper noise, torn edges, tape, slight rotations, ink rules, 88x31 buttons, notebook
   boxes), adapted from Project Helghast's page by undecuple (MIT): the technique, not its palette. Paper only. */
@font-face { font-family: "Lilita One"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/lilitaone.woff2) format("woff2"); }
@font-face { font-family: "Baloo 2"; font-weight: 400 800; font-style: normal; font-display: swap; src: url(fonts/baloo2.woff2) format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/caveat.woff2) format("woff2"); }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 800; font-style: normal; font-display: swap; src: url(fonts/mplusrounded1c-800.woff2) format("woff2"); }

:root {
  --ink: #231816; --cream: #f9f6d5; --paper: #fffdf0; --mint: #cef3df; --lemon: #ffff56; --tan: #dfc079;
  --brown: #a37340; --pink: #ffb3cd; --sky: #6ab7ff; --sky-pale: #bfe2fb; --lime: #a8c400; --orange: #f07800;
  --link: #7a4f1f; --orange-text: #a84f00; --lime-text: #5c6b00; --sky-text: #1f5f9e; --pink-text: #b3305f;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 .6 0 0 0 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 4 Q6 0.5 12 4 T24 4 T36 4 T48 4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --torn: polygon(0 0, 100% 0, 100% calc(100% - 7px), 97% calc(100% - 2px), 94% calc(100% - 8px), 90% calc(100% - 3px), 86% calc(100% - 7px), 82% 100%, 78% calc(100% - 6px), 73% calc(100% - 2px), 69% calc(100% - 8px), 64% calc(100% - 3px), 60% calc(100% - 7px), 55% 100%, 51% calc(100% - 5px), 46% calc(100% - 2px), 42% calc(100% - 8px), 37% calc(100% - 4px), 33% calc(100% - 7px), 28% 100%, 24% calc(100% - 6px), 19% calc(100% - 2px), 15% calc(100% - 8px), 10% calc(100% - 3px), 6% calc(100% - 6px), 2% calc(100% - 1px), 0 calc(100% - 6px));
  --head: "Lilita One", "Baloo 2", system-ui, sans-serif;
  --body: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Segoe Script", "Comic Sans MS", cursive;
  --jpface: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0; color: var(--ink); background: var(--noise), var(--cream);
  font: 400 1.0625rem/1.55 var(--body); overflow-wrap: anywhere;
}
.wrap { max-width: 60rem; margin: 0 auto; padding: 0 16px 2rem; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { background: var(--lemon); color: var(--ink); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.jp { font-family: var(--jpface); font-weight: 800; }
code { font: .9em ui-monospace, Consolas, monospace; background: var(--mint); padding: 0 .3em; border-radius: 4px; }
.small { font-size: .92rem; }

/* title block */
.hero { padding: 2.2rem 0 1rem; text-align: center; }
.jp-title { margin: 0; font: 800 clamp(2.2rem, 9vw, 4rem)/1.1 var(--jpface); letter-spacing: .04em; transform: rotate(-1deg); }
h1 { margin: 0; font: 400 clamp(2.2rem, 9vw, 4.2rem)/1.05 var(--head); transform: rotate(.6deg); }
.sub { margin: .5rem 0 .3rem; font-weight: 600; }
.unofficial { max-width: 40rem; margin: 0 auto .8rem; font-size: .95rem; }
.stamps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; margin: .6rem 0 1rem; }
.stamp-big {
  display: inline-block; padding: .1em .7em; font: 400 1.5rem/1.3 var(--head); letter-spacing: .06em; text-transform: uppercase;
  background: var(--pink); color: var(--ink); border: 3px solid var(--ink); border-radius: 8px; transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.stamp-small { font: 400 1.7rem/1 var(--hand); background: var(--lemon); padding: .1em .5em; transform: rotate(1.5deg); }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin: 1.2rem 0 0; }
.tabs a { font: 700 .95rem/1.2 var(--body); color: var(--ink); text-decoration: none; padding: 2px 4px; border-bottom: 3px solid var(--ink); }
.tabs a:hover, .tabs a:focus-visible { background: var(--lemon); }

/* 88x31 buttons */
.b88s { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.b88s li { margin: 0; }
.b88 {
  display: flex; flex-direction: column; justify-content: center; align-items: center; width: 88px; height: 31px;
  line-height: 1.05; text-align: center; text-decoration: none; color: var(--ink); border: 2px solid var(--ink);
  border-radius: 3px; box-shadow: 2px 2px 0 var(--ink);
}
.b88 span { font: 600 9.5px/1 var(--body); }
.b88 b { font: 400 12px/1.1 var(--head); letter-spacing: .02em; }
a.b88:hover { background-color: var(--lemon); }
.b-sky { background: var(--sky); } .b-lime { background: var(--lime); } .b-pink { background: var(--pink); }
.b-lemon { background: var(--lemon); } .b-orange { background: var(--orange); }

/* paper cards with a torn bottom edge */
main > .card, .pair > .card { margin: 1.6rem 0; }
.card { position: relative; background: var(--noise), var(--paper); padding: 1.3rem 1.4rem 2rem; }
.torn { clip-path: var(--torn); }
main > .card:nth-of-type(odd) { transform: rotate(-.3deg); }
main > .card:nth-of-type(even) { transform: rotate(.3deg); }
h2 {
  margin: 0 0 .9rem; font: 400 1.8rem/1.15 var(--head); letter-spacing: .01em;
}
h2::after {
  content: ""; display: block; height: 8px; margin-top: 4px; background: var(--ink);
  -webkit-mask: var(--wave) repeat-x 0 0 / 48px 8px; mask: var(--wave) repeat-x 0 0 / 48px 8px;
}
.num {
  display: inline-block; margin-right: .2em; padding: 0 .35em; background: var(--lemon); color: var(--orange-text);
  font: 400 1.3rem/1.3 var(--hand); transform: rotate(-4deg);
}
h3 { margin: 0 0 .3rem; font: 400 1.25rem/1.2 var(--head); color: var(--sky-text); }
p { margin: 0 0 .8rem; }
strong { color: var(--ink); }
em { font-style: italic; }
ul, ol { margin: 0 0 .8rem; padding-left: 1.3rem; }
li { margin: .25em 0; }
.links { list-style: none; padding: 0; }
.links li { padding: .3em 0 .3em 1.4em; position: relative; }
.links li::before { content: "\2192"; position: absolute; left: 0; color: var(--orange-text); font-weight: 700; }

/* notebook boxes: lined paper with a margin rule */
.note, .notebook {
  background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(106, 183, 255, .35) 27px 28px), var(--mint);
}
.note { padding: .8rem 1rem .6rem 2.4rem; margin: 0 0 1rem; border-left: 4px solid var(--pink); border-radius: 4px; }
.notebook { padding-left: 2.8rem; }
.notebook::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.9rem; width: 2px; background: var(--pink); }
.todo { background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(106, 183, 255, .35) 27px 28px), var(--sky-pale); }
.todo ol { list-style: none; padding: 0; }
.todo li { position: relative; padding-left: 2rem; }
.todo li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 1.05rem; height: 1.05rem; border: 2.5px solid var(--ink);
  border-radius: 3px; background: var(--paper);
}
.note.latest { background-color: var(--cream); }
.pair { display: grid; grid-template-columns: 1fr; gap: 0 1.4rem; }
.reqs { display: grid; grid-template-columns: 1fr; gap: 0 1rem; margin-top: 1rem; }

/* status */
.status { margin: 0 0 1rem; border-top: 2px solid var(--ink); }
.status > div { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 2px 16px; padding: 8px 0; border-bottom: 1.5px dashed var(--ink); }
.status dt { font-weight: 700; }
.status dd { margin: 0; }
.counts { line-height: 2; }
.st { display: inline-block; padding: 0 .6em; border: 2px solid var(--ink); border-radius: 999px; font-size: .85rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.st-ok { background: var(--lime); } .st-part { background: var(--lemon); } .st-no { background: var(--pink); }
.st-unk { background: var(--sky-pale); } .st-na { background: var(--tan); }

/* photos taped in */
.gallery { display: grid; grid-template-columns: 1fr; gap: 28px 24px; margin: 1.6rem 0 1rem; padding: 0 .4rem; }
figure { margin: 0; }
.taped { position: relative; background: var(--paper); padding: 10px 10px 8px; box-shadow: 0 2px 0 rgba(35, 24, 22, .5), 3px 5px 10px rgba(35, 24, 22, .25); }
.taped:nth-child(odd) { transform: rotate(-.8deg); }
.taped:nth-child(even) { transform: rotate(.6deg); }
.taped::before, .taped::after {
  content: ""; position: absolute; width: 82px; height: 24px; top: -12px; background: rgba(223, 192, 121, .88);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 3px, transparent 3px 7px);
  clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%);
}
.taped::before { left: 14px; transform: rotate(-6deg); }
.taped::after { right: 14px; transform: rotate(5deg); }
.taped img { display: block; width: 100%; height: auto; background: var(--mint); }
figcaption { padding: 8px 6px 0; font: 400 1.3rem/1.15 var(--hand); }

/* footer */
footer { margin-top: 1.6rem; text-align: center; font-size: .95rem; }

@media (min-width: 40rem) {
  .gallery, .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pair > .card { margin: 0; }
  .pair { margin: 1.6rem 0; }
}
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .card { padding: 1rem 1rem 1.8rem; }
  .notebook { padding-left: 2.4rem; }
  .notebook::before { left: 1.5rem; }
  .status > div { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }