/* ============================================================================
Yeux Page · paper / ink design system
低饱和 · 纸质感 · 手绘凌乱感 (ref: 卢广仲《鱼仔》cover + Bakemonogatari title)
All colours desaturated graphite-on-paper. Accent = one faint stamp-red only.
========================================================================== */
/* ---- Fonts -----------------------------------------------------------------
Webfonts are loaded via in each page (with
preconnect) instead of CSS @import, so they no longer block this stylesheet.
LXGW WenKai (霞鹜文楷) loads from jsDelivr (reachable in CN); Caveat / Ma Shan
Zheng come from Google Fonts as progressive enhancement. Strong system
fallbacks (楷体/KaiTi) keep the handwritten feel if a CDN is blocked.
For production, self-host these (see design/art-direction.md §Typography). */
:root {
color-scheme: light;
/* paper */
--paper: #d8d3cc;
--paper-hi: #e7e3db;
--paper-lo: #c6c0b6;
--paper-edge: #b4ada1;
/* ink */
--ink: #1b1815;
--ink-soft: #3b352f;
--ink-mute: rgba(27, 24, 21, 0.56);
--ink-faint: rgba(27, 24, 21, 0.30);
--ink-ghost: rgba(27, 24, 21, 0.14);
--line: rgba(27, 24, 21, 0.34);
/* the single restrained accent: faded seal vermilion */
--seal: #8c3a2c;
--seal-soft: rgba(140, 58, 44, 0.72);
/* props */
--tape: rgba(206, 188, 138, 0.46);
--tape-edge: rgba(150, 132, 84, 0.30);
--shadow: 0 16px 34px rgba(46, 39, 31, 0.16);
--shadow-soft: 0 6px 16px rgba(46, 39, 31, 0.12);
/* type */
--font-hand: "LXGW WenKai Screen", "LXGW WenKai", "霞鹜文楷", "楷体", "KaiTi", "STKaiti", serif;
--font-brush: "Ma Shan Zheng", "LXGW WenKai Screen", "STKaiti", "楷体", serif;
--font-en: "Caveat", "Segoe Print", "Bradley Hand ITC", var(--font-hand), cursive;
--maxw: 1080px;
--radius: 3px; /* paper has almost no rounding */
}
/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100vh;
color: var(--ink);
font-family: var(--font-hand);
font-size: 18px;
line-height: 1.95;
letter-spacing: 0.01em;
background-color: var(--paper);
/* faked paper mottle; a real scan can be dropped on .stage / body via art doc */
background-image:
radial-gradient(120% 120% at 50% 30%, var(--paper-hi) 0%, var(--paper) 46%, var(--paper-lo) 100%),
radial-gradient(60% 50% at 18% 12%, rgba(255,255,255,0.22), transparent 60%),
radial-gradient(70% 60% at 82% 88%, rgba(90,78,60,0.10), transparent 60%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
::selection { background: var(--seal-soft); color: var(--paper-hi); }
/* ---- global texture overlays --------------------------------------------- */
/* film grain + paper fibre, fixed over everything, multiply blended. */
.grain {
position: fixed;
inset: 0;
z-index: 80;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.5;
background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 7px),
repeating-linear-gradient(91deg, rgba(20,18,16,0.035) 0 1px, transparent 1px 9px),
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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
background-size: auto, auto, 180px 180px;
animation: grain-shiver 360ms steps(2, end) infinite;
}
/* edge vignette — keeps the page feeling like a lit sheet of paper */
.vignette {
position: fixed;
inset: 0;
z-index: 81;
pointer-events: none;
mix-blend-mode: multiply;
background:
radial-gradient(120% 100% at 50% 46%, transparent 0 56%, rgba(40,34,28,0.16) 84%, rgba(28,23,18,0.30) 100%),
linear-gradient(90deg, rgba(40,34,28,0.14), transparent 10% 90%, rgba(40,34,28,0.14));
}
@keyframes grain-shiver {
0%, 100% { transform: translate3d(0,0,0); opacity: 0.50; }
40% { transform: translate3d(0.2px,-0.18px,0); opacity: 0.56; }
72% { transform: translate3d(-0.16px,0.12px,0);opacity: 0.44; }
}
/* ---- hand-drawn ink helpers ---------------------------------------------- */
/* roughen filter is declared once in an inline