/* p11c — ink and paper. Brush lettering, wobbly ink outlines, a cinnabar seal.
   Shared by the homepage and the subpages. Needs the #brush SVG filter from the page. */
:root {
  --paper: #efe3c4;
  --paper-light: #fbf4de;
  --ink: #221a12;
  --ink-dim: #6e5c44;
  --seal: #a8231b;
  --line: #cdb88e;
  --brush-font: "Ma Shan Zheng", "Kaushan Script", cursive;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); }
body {
  min-height: 100vh;
  color: var(--ink);
  font-family: "Kalam", "Noto Serif", Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  padding: 1rem;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(255, 253, 240, 0.75), transparent 55%),
    radial-gradient(ellipse at 88% 92%, rgba(140, 100, 45, 0.18), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}
/* paper fibres */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.55;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.33  0 0 0 0 0.16  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
main { max-width: 780px; margin: 0 auto; padding: 1.5rem 0.5rem 5rem; }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(168, 35, 27, 0.4); }
a:hover { color: var(--seal); border-bottom-color: var(--seal); }
a.card, a.card:hover { border-bottom: 0; }
p, li { margin-bottom: 0.6rem; }
code {
  background: rgba(120, 85, 35, 0.13);
  padding: 0.1em 0.4em;
  font-size: 0.85em;
  word-break: break-all;
}
.back { font-size: 0.9rem; }

/* ---- subpage header ---- */
header { text-align: center; margin: 1rem 0 2.5rem; }
header .name {
  display: inline-block;
  font-family: var(--brush-font);
  font-weight: 400;
  font-size: 4.4rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  transform: rotate(-3deg);
}
.tagline { color: var(--ink-dim); max-width: 520px; margin: 0.5rem auto 0; }
header::after {
  content: "";
  display: block;
  margin: 1rem auto 0;
  width: 220px;
  height: 16px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'><path d='M4 9 C 40 3, 90 13, 150 7 S 240 4, 296 8 C 240 11, 170 9, 120 12 S 30 14, 4 9 Z' fill='%23221a12'/></svg>") center / 100% 100% no-repeat;
  transform: rotate(-1.5deg);
}
h2 {
  display: inline-block;
  margin: 3rem 0 0;
  font-family: var(--brush-font);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  transform: rotate(-1.5deg);
}
h2::after {
  content: "";
  display: block;
  margin: 0.2rem 0 1rem 2px;
  width: 120%;
  height: 12px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 6 C 50 2, 90 9, 150 5 C 200 2, 250 8, 298 4 C 250 7, 200 5, 150 8 C 100 11, 50 7, 2 9 Z' fill='%23a8231b'/></svg>") left / 100% 100% no-repeat;
  transform: rotate(0.6deg);
}

/* ---- ink boxes ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
  margin: 0.4rem 0 1.4rem;
}
.card {
  position: relative;
  isolation: isolate;
  display: block;
  padding: 1.2rem 1.4rem;
  color: var(--ink);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 250, 233, 0.55);
  border: 2.5px solid var(--ink);
  border-radius: 255px 18px 225px 22px / 20px 225px 18px 255px;
  filter: url(#brush);
  transition: border-color 0.2s, transform 0.25s;
}
.card:nth-child(3n)::before { transform: rotate(-1.1deg); border-radius: 30px 225px 20px 255px / 255px 20px 225px 25px; }
.card:nth-child(3n+1)::before { transform: rotate(0.8deg); }
.card:nth-child(3n+2)::before { transform: rotate(-0.5deg) skewX(1deg); }
a.card:hover::before, a.card:focus-visible::before { border-color: var(--seal); transform: rotate(1.4deg) scale(1.015); }
a.card:focus-visible { outline: none; }
.card-icon { font-size: 1.6rem; line-height: 1.2; margin-bottom: 0.2rem; }
.card-title {
  display: inline-block;
  margin-bottom: 0.3rem;
  font-family: var(--brush-font);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--seal);
  transform: rotate(-1deg);
}
.card p { color: var(--ink-dim); font-size: 0.88rem; line-height: 1.45; margin: 0; }
.card strong { color: var(--ink); }

.link-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.3rem 1.6rem;
  margin-bottom: 1.2rem;
}
.link-list a { font-weight: 700; }
.link-list .desc { display: block; color: var(--ink-dim); font-size: 0.82em; line-height: 1.4; }