/* "Princess Irulan's Leaf" ??parchment design, warm paper, ruled lines, crimson margin rule */
:root{
--paper: #efe4c6;
--paper-hi: #f4ebd2;
--paper-lo: #e7daba;
--ink: #221a13;
--ink-soft: #443728;
--mute: #8a7a5e;
--mute-faint: #b6a685;
--rule: rgba(34,26,19,.10);
--rule-strong: rgba(34,26,19,.22);
--line: rgba(120,95,60,.20);
--margin-rule: #9a3a30;
--link: #6b2e25;
--link-wash: rgba(154,58,48,.06);
--stamp: #8c352b;
--gold: #8a6a2c;
/* Text colors when rendering on the dark BG (masthead floats above the card). */
--bg-ink: rgba(240, 236, 228, 0.92);
--bg-mute: rgba(240, 236, 228, 0.55);
--bg-faint: rgba(240, 236, 228, 0.32);
--serif: 'Iowan Old Style','Palatino Linotype',Palatino,'Hoefler Text','Times New Roman',serif;
--sans: 'Inter','Helvetica Neue',-apple-system,'Segoe UI',sans-serif;
--mono: ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;
/* Raster system — Müller-Brockmann ideals.
Vertical rhythm strictly on the --grid baseline. Horizontal rails are
whole multiples of --grid so margins/gutters resolve without
fractional pixels. Type scale below is a ~1.4 modular scale aligned
to half-grid (14px) line-heights. */
--grid: 28px;
--grid-half: 14px;
--grid-quarter: 7px;
--rail-left: 140px; /* 5 × grid */
--rail-right: 84px; /* 3 × grid */
--margin-x: 112px; /* 4 × grid */
--rail-w: 224px; /* 8 × grid */
--container-w: min(1176px, 96vw); /* 42 × grid */
/* Modular type scale (1.4 ratio, anchored on body 17.5/28). */
--t-xs: 11px; /* utility/captions, lh 14 */
--t-sm: 13px; /* labels, lh 14 */
--t-md: 17.5px; /* body, lh 28 */
--t-lg: 24px; /* subhead, lh 28 */
--t-xl: 36px; /* masthead logo, lh 42 */
--t-2xl: 48px; /* article h1, lh 56 */
--t-3xl: 56px; /* list-intro h1, lh 56 */
--t-4xl: 84px; /* display, lh 84 */
}
*{box-sizing:border-box}
html,body{
margin:0;padding:0;
color:var(--ink);
font-family:var(--serif);
font-variant-numeric:tabular-nums oldstyle-nums;
}
/* Background cycler */
.bg-layer{
position:fixed;inset:0;z-index:0;
background-color:#000;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
/* Linear easing on opacity reads as a smoother crossfade than ease-in-out
for two overlapping opaque images — the perceptual luminance stays
constant through the middle of the transition instead of dipping. */
transition:opacity 1.4s linear;
/* Promote each layer to its own GPU compositor surface so the crossfade
doesn't repaint the rasterized image every frame, and so the surfaces
don't share the main thread with .book paint work. */
transform:translateZ(0);
backface-visibility:hidden;
will-change:opacity;
contain:strict;
}
.bg-layer.active{opacity:1}
.bg-layer.next{opacity:0}
.bg-dim{
position:fixed;inset:0;z-index:1;
background:
radial-gradient(60% 50% at 50% 30%, rgba(0,0,0,0.08), transparent 70%),
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.42) 100%);
pointer-events:none;
}
/* Body — warm dark fallback behind the cycler.
Substantial top padding (45vh) lets the sheet sit almost at the bottom of
the fold; scroll-up reveals the photo with the understated hero floating
in the upper half. */
body{
min-height:100vh;
position:relative;
background:
radial-gradient(70% 60% at 20% 10%, rgba(120,90,60,.16), transparent 70%),
radial-gradient(60% 50% at 90% 90%, rgba(50,70,90,.12), transparent 70%),
linear-gradient(180deg, #1a1612 0%, #0a0a0b 100%);
/* Grid-aligned: 28px horizontal, 4× grid bottom rhythm. */
padding:45vh var(--grid) calc(var(--grid)*4);
}
/* Leaf — the layout container that wraps masthead + book.
Provides the positioning context for the absolutely-placed waifu. */
.leaf{
position:relative;
width:var(--container-w);
margin:0 auto;
display:flex;
flex-direction:column;
gap:18px;
}
/* Masthead — floats on the BG above the card. Order:
.masthead-hero: understated centered title with fleurons and tagline
.masthead-util: thin utility strip (back link, folio info, theme toggle)
— sits right above the card, "adhering" to it
Strong text shadows so everything reads on the photo BG. */
.masthead{
position:relative;z-index:4;
display:flex;
flex-direction:column;
gap:24px;
padding:0 12px;
border-bottom:none;
color:var(--bg-ink, rgba(240,236,228,0.92));
}
/* Utility strip — sits just above the card, like a brass nameplate.
Higher contrast than before: solid bg-ink, deep shadow under each element. */
.masthead .masthead-util{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:nowrap;
margin-top:-6px; /* tighten to the box */
margin-bottom:-12px; /* visually "sit on" the card top edge */
padding:0 4px;
font-family:var(--serif);font-size:13px;
color:var(--bg-ink);
text-shadow:0 1px 6px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.55);
}
.masthead .home-link{
display:inline-flex;align-items:center;gap:8px;
color:var(--bg-ink);text-decoration:none;
font-family:var(--serif);font-style:italic;font-size:13px;
letter-spacing:.06em;
white-space:nowrap;
/* Shift right of the waifu (which extends ~120px past the book's left edge
and pokes up into the masthead area) so they never overlap. */
margin-left:140px;
/* Bilateral ellipse spotlight — same idiom as the logo, scaled down. */
text-shadow:
-90px 0 140px rgba(0,0,0,0.95),
90px 0 140px rgba(0,0,0,0.95),
0 0 48px rgba(0,0,0,0.95),
0 0 200px rgba(0,0,0,0.65);
}
.masthead .home-link:hover{color:#fff}
.masthead .home-link .arrow{
color:var(--margin-rule);font-size:16px;line-height:1;
font-style:normal;font-weight:600;
transition:transform .15s;
text-shadow:0 0 14px rgba(170,55,45,0.9), 0 1px 4px rgba(0,0,0,0.6);
}
.masthead .home-link:hover .arrow{transform:translateX(-3px)}
/* Folio strip on the right side — single clean inline row */
.masthead .folio{
display:inline-flex;align-items:center;gap:14px;
font-family:var(--serif);font-style:italic;font-size:13px;
letter-spacing:.04em;color:var(--bg-ink);
text-transform:none;
white-space:nowrap;
/* Bilateral ellipse spotlight — mirrors the home-link on the right side. */
text-shadow:
-90px 0 140px rgba(0,0,0,0.95),
90px 0 140px rgba(0,0,0,0.95),
0 0 48px rgba(0,0,0,0.95),
0 0 200px rgba(0,0,0,0.65);
}
.masthead .folio .label-folio{
font-family:var(--serif);font-style:italic;font-size:13px;
color:var(--bg-mute);
}
.masthead .folio .label-folio .folio-name{
font-family:var(--serif);font-style:italic;font-weight:600;
color:var(--bg-ink);font-size:13px;margin-left:5px;
letter-spacing:.02em;
}
.masthead .folio .theme-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;
font-family:var(--serif);font-size:16px;letter-spacing:0;
text-transform:none;font-style:normal;
color:var(--margin-rule);text-decoration:none;
border-radius:50%;
background:rgba(0,0,0,0.25);
border:1px solid rgba(170,55,45,0.45);
text-shadow:0 0 10px rgba(170,55,45,0.8);
transition:background .12s,border-color .12s,color .12s;
margin:0;padding:0;
}
.masthead .folio .theme-toggle:hover{
background:rgba(170,55,45,0.30);
border-color:rgba(170,55,45,0.80);
color:#fff;
}
.masthead .folio .tool .mark{color:var(--margin-rule);font-family:var(--mono);font-size:11px}
/* Hero — understated centered title with strong shadow for legibility on BG */
.masthead .masthead-hero{
display:flex;flex-direction:column;align-items:center;gap:14px;
text-align:center;
padding:0;
/* Always-fires fade-in. Replays on SPA innerHTML swap because new
elements re-trigger their animations. No scroll-timeline override —
it could leave the hero stuck at low opacity. */
animation: heroPanIn 1.2s cubic-bezier(0.2, 0.65, 0.3, 1) 0.05s both;
}
@keyframes heroPanIn {
from { opacity: 0; transform: translateY(-16px); letter-spacing: 0.05em; }
to { opacity: 1; transform: translateY(0); letter-spacing: normal; }
}
.masthead .logo-ornament{
color:var(--margin-rule);
font-size:12px;letter-spacing:.55em;
text-shadow:
0 0 18px rgba(170,55,45,0.80),
0 2px 6px rgba(0,0,0,0.6);
user-select:none;
margin:0;
}
.masthead .logo{
margin:0;
font-family:var(--serif);font-weight:500;
font-size:36px;line-height:1.1;letter-spacing:.005em;
color:var(--bg-ink);
/* Spotlight stack — two opaque elliptical pools flanking the text, a tight
core for the lit-letter edge, and a deep ambient pool that bleeds across
the BG. Reads as if the title is on a stage under twin overhead spots. */
text-shadow:
-180px 0 240px rgba(0,0,0,1),
180px 0 240px rgba(0,0,0,1),
0 0 84px rgba(0,0,0,1),
0 0 360px rgba(0,0,0,0.85);
}
.masthead .logo .the{
font-style:italic;font-weight:400;
color:var(--bg-mute);font-size:.62em;
letter-spacing:.04em;margin-right:.2em;
vertical-align:.14em;
}
.masthead .tagline{
margin:0;
font-family:var(--serif);font-style:italic;font-weight:400;
font-size:13px;letter-spacing:.22em;text-transform:uppercase;
color:var(--bg-ink);
text-shadow:
0 1px 4px rgba(0,0,0,0.85),
0 2px 12px rgba(0,0,0,0.55);
}
/* The italic suffix after "Folio"/"Trash"/etc. — like "Folio overgrowth-hypothesis" */
.masthead .folio .folio-name{
font-family:var(--serif);font-style:italic;font-weight:500;
letter-spacing:.02em;text-transform:none;color:var(--bg-ink);
font-size:13px;margin-left:6px;
}
.masthead .folio .label-folio{
display:inline-flex;align-items:baseline;gap:2px;
}
.masthead .folio .theme-toggle{
margin-left:8px;padding:4px 8px;
font-family:var(--serif);font-size:13px;letter-spacing:0;
text-transform:none;color:var(--margin-rule);text-decoration:none;
border-radius:2px;
}
.masthead .folio .theme-toggle:hover{background:var(--link-wash)}
/* Legacy hero ??hidden */
.hero,.site-title-link,.site-title,.site-subtitle{display:none}
/* Book card ??parchment sheet */
.book{
position:relative;z-index:3;
width:var(--container-w);
margin:0 auto;
isolation:isolate;
transform:translateZ(0);
/* contain:layout style isolates layout/style recalcs without clipping
overflow — the waifu lives outside the book box (left:-72px top:-24px)
and needs to remain visible. The compositor layer from translateZ +
isolation already does most of the paint-isolation work; without
mix-blend-mode the paint cost is low enough that we don't need
contain:paint. */
contain:layout style;
background:
radial-gradient(120% 90% at 0% 0%, var(--paper-hi), transparent 55%),
radial-gradient(120% 90% at 100% 100%, var(--paper-lo), transparent 55%),
linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
color:var(--ink);
border-radius:2px;
box-shadow:
0 1px 0 rgba(255,255,255,.05) inset,
0 0 0 1px rgba(0,0,0,.30),
0 30px 70px -20px rgba(0,0,0,.7),
0 4px 14px rgba(0,0,0,.42);
}
.book::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
/* Was: opacity:.6 + mix-blend-mode:multiply — the blend was the single
largest cause of paint stutter during scroll (blend modes force the
compositor to re-rasterize). Without the blend the noise reads slightly
lighter, so opacity is reduced to keep the perceived grain density
similar. */
opacity:.32;
}
.book::after{
content:"";position:absolute;
left:20px;right:20px;top:20px;bottom:20px;
border:1px solid var(--rule);
pointer-events:none;border-radius:1px;
}
.book.loading{
filter:blur(2px);
pointer-events:none;
transition:filter .2s ease-in;
}
.book.loading::after{
/* Maroon loading bar anchored at the top-left corner of the content-view
(the sheet fills the book, so .book top:0 left:0 == content-view top-
left). Bar grows from a single pixel at left:0 to the full width, then
fades — repeats while the SPA fetch is in flight. */
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:var(--margin-rule);
transform:scaleX(0);transform-origin:0 50%;
animation:loadgrow 1.2s cubic-bezier(.2,.7,.3,1) infinite;
border:none;border-radius:0;
box-shadow:0 0 12px var(--margin-rule);
}
@keyframes loadgrow{
0% { transform:scaleX(0); opacity:1 }
70% { transform:scaleX(1); opacity:1 }
100% { transform:scaleX(1); opacity:0 }
}
/* Waifu — sits at the upper-left of the book card, mostly above it so she
overlaps the masthead area (which now floats on the BG above the card)
and her feet just kiss the card's top edge. Right edge clears the title's
rail-left:132 column with a 12px margin. */
.waifu{
position:absolute;
left:-60px;top:-220px;
width:180px;height:auto;
z-index:5;
pointer-events:none;
filter:drop-shadow(0 8px 18px rgba(0,0,0,.4));
}
.waifu-detector{
/* Match the waifu image's bounding box so clicks elsewhere don't trigger emoji */
position:absolute;
left:-60px;top:-220px;
width:180px;height:307px;
z-index:7;
cursor:pointer;
}
/* Sheet (file view) — three-column raster: content / gutter / rail.
Padding, gap and rail width are exact grid multiples. */
.sheet{
position:relative;z-index:1;
padding:calc(var(--grid)*3) var(--rail-right) calc(var(--grid)*3) var(--rail-left);
display:grid;
grid-template-columns:minmax(0, 62ch) minmax(var(--grid), 1fr) var(--rail-w);
gap:0 var(--grid);align-items:start;
}
.sheet::before{
content:"";position:absolute;
left:var(--margin-x);top:calc(var(--grid)*2);bottom:calc(var(--grid)*2);
width:1px;background:var(--margin-rule);opacity:.6;
}
/* List sheet — two-column raster: content / rail. */
.list-sheet{
position:relative;z-index:1;
padding:calc(var(--grid)*3) var(--rail-right) calc(var(--grid)*3) var(--rail-left);
display:grid;
grid-template-columns:minmax(0, 1fr) var(--rail-w);
gap:0 var(--grid);align-items:start;
}
.list-sheet::before{
content:"";position:absolute;
left:var(--margin-x);top:calc(var(--grid)*2);bottom:calc(var(--grid)*2);
width:1px;background:var(--margin-rule);opacity:.6;
}
/* Right rule ??hidden in parchment (margin rule replaces it) */
.right-rule{display:none}
.list-col{grid-column:1 / 2;min-width:0}
/* Path crumb */
.path{
grid-column:1 / 2;
font-family:var(--serif);font-style:italic;font-size:14px;line-height:var(--grid);
color:var(--mute);margin:0 0 var(--grid);
}
.path a{
color:var(--mute);text-decoration:none;
border-bottom:1px solid transparent;
transition:color .12s,border-color .12s;
}
.path a:hover{color:var(--ink);border-bottom-color:var(--margin-rule)}
.path .sep{color:var(--mute-faint);margin:0 .35em;font-style:normal}
.path .cur{color:var(--ink);font-style:normal;font-weight:500}
/* Title — on the modular scale, line-height locked to 2× grid baseline. */
.title{
grid-column:1 / 2;
font-family:var(--serif);font-weight:700;
font-size:var(--t-2xl);line-height:calc(var(--grid)*2);
letter-spacing:-.018em;
margin:0 0 var(--grid);color:var(--ink);
}
.title .small{
display:block;
font-family:var(--serif);font-style:italic;font-weight:400;
font-size:14px;line-height:var(--grid);letter-spacing:.04em;
color:var(--mute);margin-bottom:var(--grid-half);
}
/* Reading body ??ruled lines */
.content,.content-body{
grid-column:1 / 2;
max-width:62ch;
font-size:17.5px;line-height:var(--grid);color:var(--ink);
background-image:repeating-linear-gradient(
to bottom,
transparent 0, transparent 27px,
var(--line) 27px, var(--line) 28px
);
}
.content>*:first-child,.content-body>*:first-child{margin-top:0}
.content p,.content-body p{margin:0 0 var(--grid);background:transparent}
.content p.lead,.content-body p.lead{
font-size:18px;line-height:var(--grid);color:var(--ink-soft);
font-style:italic;margin:0 0 var(--grid);text-align:left;
}
.content p.lead::before,.content-body p.lead::before{
content:"\00B6";color:var(--margin-rule);font-style:normal;margin-right:4px;
}
/* Drop cap — applied by applyDropCap() in PHP, which picks the first prose
paragraph (skipping -led metadata) or honors an explicit `^^` marker
in the source. Only paragraphs tagged .opens render with the cap. */
.content-body > p.opens::first-letter,
.content > p.opens::first-letter{
float:left;
font-family:var(--serif);font-weight:700;
font-size:84px;line-height:56px;
padding:8px 12px 0 0;
color:var(--margin-rule);
}
.content-body > p.opens::first-line,
.content > p.opens::first-line{
font-variant-caps:all-small-caps;letter-spacing:.04em;
}
.content h2,.content-body h2{
font-family:var(--serif);font-weight:700;font-size:22px;line-height:var(--grid);
margin:56px 0 var(--grid);letter-spacing:-.005em;
background:var(--paper);padding:0 4px;
display:flex;align-items:baseline;gap:14px;
}
.content h2 .num,.content-body h2 .num{
color:var(--margin-rule);font-family:var(--serif);font-style:italic;font-weight:400;
font-size:18px;letter-spacing:.04em;min-width:2.6em;
}
.content h3,.content-body h3{
font-family:var(--sans);font-size:11px;line-height:var(--grid);font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
margin:var(--grid) 0 0;
background:var(--paper);padding:0 4px;
}
.content h1,.content-body h1{
font-family:var(--serif);font-weight:700;
font-size:28px;line-height:36px;margin:56px 0 var(--grid);letter-spacing:-.012em;
background:var(--paper);padding:0 4px;
}
.content h4,.content-body h4{
font-family:var(--serif);font-weight:700;font-size:17px;
margin:var(--grid) 0 8px;background:var(--paper);padding:0 4px;
}
/* Fleuron section break */
.content hr.break,.content-body hr.break{
border:none;text-align:center;color:var(--margin-rule);font-size:18px;
letter-spacing:.6em;line-height:var(--grid);margin:var(--grid) 0;
background:var(--paper);user-select:none;
}
.content-body hr{
border:none;border-top:1px solid var(--rule);
margin:var(--grid) 0;
}
.content a,.content-body a{
color:var(--link);text-decoration:none;
border-bottom:1px solid rgba(154,58,48,.4);
}
.content a:hover,.content-body a:hover{
border-bottom-color:var(--margin-rule);background:var(--link-wash);
}
.content em,.content-body em{font-style:italic}
.content strong,.content-body strong{font-weight:700}
.content code,.content-body code{
font-family:var(--mono);font-size:13.5px;
background:rgba(34,26,19,.06);padding:1px 5px;border-radius:2px;
}
.content-body ul,.content-body ol{margin:0 0 var(--grid) 1.4em}
.content-body li{margin-bottom:6px}
.content-body blockquote{
margin:0 0 var(--grid);padding:0 0 0 18px;
border-left:2px solid var(--margin-rule);color:var(--ink-soft);font-style:italic;
}
.content-body table{
width:100%;border-collapse:collapse;margin:0 0 var(--grid);font-size:15px;
}
.content-body th,.content-body td{
padding:8px 12px;border-bottom:1px solid var(--rule);text-align:left;
}
.content-body th{
font-family:var(--sans);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--mute);font-weight:600;
border-bottom-color:var(--rule-strong);
}
.content-body pre{
background:rgba(34,26,19,.06);border:1px solid var(--rule);
padding:14px 18px;border-radius:3px;
font-family:var(--mono);font-size:13.5px;line-height:20px;
overflow-x:auto;margin:0 0 var(--grid);
}
.content-body pre code{background:transparent;padding:0;border-radius:0}
.content-body pre.plaintext-body{
white-space:pre-wrap;word-wrap:break-word;
}
.content-body sub,.content-body sup{font-size:0.78em;line-height:0}
.content-body .frac{display:inline-flex;flex-direction:column;vertical-align:middle;font-size:0.95em}
.content-body .frac-n{border-bottom:1px solid currentColor;padding:0 0.25em}
.content-body .frac-d{padding:0 0.25em}
.content-sandbox{
width:100%;border:0;background:transparent;display:block;margin:0;
height:auto;min-height:0;overflow:hidden;
}
.content-body:has(.content-sandbox){
max-width:none;
grid-column:1 / 3;
}
.ref-link{
color:var(--link);text-decoration:none;
border-bottom:1px dashed rgba(154,58,48,.4);
}
.ref-link:hover{color:var(--margin-rule);border-bottom-style:solid}
/* Meta / right rail */
.meta{
grid-column:3 / 4;grid-row:1 / span 7;
margin-top:4px;
font-family:var(--serif);font-size:13px;line-height:20px;color:var(--ink-soft);
position:sticky;top:24px;align-self:start;
overflow:visible;
scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent;
}
.meta::-webkit-scrollbar{width:4px}
.meta::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:2px}
.meta::-webkit-scrollbar-track{background:transparent}
.list-meta{
grid-column:2 / 3;
margin-top:4px;font-family:var(--serif);
position:sticky;top:24px;align-self:start;
overflow:visible;
scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent;
}
.list-meta::-webkit-scrollbar{width:4px}
.list-meta::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:2px}
.list-meta::-webkit-scrollbar-track{background:transparent}
/* Tools */
.tools{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
padding:0 0 14px;margin:0 0 14px;
border-bottom:1px solid var(--rule);
}
.tool,.edit-btn,.history-link,.back-btn,.new-btn{
display:inline-flex;align-items:baseline;gap:6px;
padding:7px 12px;
font-family:var(--serif);font-size:12px;letter-spacing:.16em;
text-transform:uppercase;font-weight:600;
color:var(--ink-soft);text-decoration:none;cursor:pointer;
border-radius:3px;
background:rgba(239,228,198,0.7);
border:1px solid var(--rule);
transition:background .12s,color .12s,border-color .12s;
}
.tool:hover,.edit-btn:hover,.history-link:hover,.back-btn:hover,.new-btn:hover{
background:var(--paper-hi);color:var(--ink);border-color:var(--rule-strong);
}
.tool .mark{color:var(--margin-rule);font-family:var(--mono);font-size:11px}
.tool.primary{background:var(--paper-hi)}
.new-btn.edit-only{display:none}
.edit-btn-toggle.active,
.history-link.active,
.tool.active{
background:var(--link-wash);color:var(--margin-rule);border-color:rgba(154,58,48,.30);
}
body.edit-mode .new-btn.edit-only{display:inline-flex}
/* Panels */
.panel{
padding:var(--grid-half) 0;
border-top:1px solid var(--rule);
}
.panel:last-child{border-bottom:1px solid var(--rule)}
.panel h4{
margin:0 0 var(--grid-half);
font-family:var(--sans);font-size:10px;letter-spacing:.20em;
text-transform:uppercase;color:var(--mute);font-weight:600;
display:flex;align-items:baseline;justify-content:space-between;gap:var(--grid-half);
}
.panel h4 .count{
font-family:var(--mono);font-size:10px;color:var(--margin-rule);font-weight:600;
letter-spacing:.04em;
}
.panel.info dl{
margin:0;display:grid;grid-template-columns:auto 1fr;
gap:var(--grid-quarter) var(--grid-half);
align-items:baseline;
}
.panel.info dt{
margin:0;font-family:var(--sans);font-size:9.5px;letter-spacing:.20em;
text-transform:uppercase;color:var(--mute);font-weight:600;
text-align:right;line-height:21px;
}
.panel.info dd{
margin:0;font-family:var(--serif);font-size:13px;color:var(--ink);
font-variant-numeric:tabular-nums;line-height:21px;
}
.panel.info dd .mono{
font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-soft);
}
.panel.info dd .em{color:var(--margin-rule);font-weight:600}
.panel.info dd .stamp,
.meta .stamp{
display:inline-block;margin-top:6px;padding:4px 10px;
border:1px solid var(--stamp);color:var(--stamp);
font-family:var(--sans);font-size:10px;font-weight:600;
letter-spacing:.20em;text-transform:uppercase;
border-radius:1px;transform:rotate(-1.5deg);
}
/* General meta dt/dd (without .panel.info wrapper) — baseline-grid spaced */
.meta dt{
margin:0 0 var(--grid-quarter);font-family:var(--sans);font-size:10px;letter-spacing:.20em;
text-transform:uppercase;color:var(--mute);font-weight:600;
}
.meta dd{
margin:0 0 var(--grid-half);font-family:var(--serif);font-size:13px;color:var(--ink);
font-variant-numeric:tabular-nums;line-height:21px;
}
.meta dd:last-child{margin-bottom:0}
.meta dd .v{color:var(--ink);font-weight:600;font-family:var(--serif)}
.meta dd .v-abs{display:block;color:var(--mute);font-family:var(--mono);
font-size:11px;letter-spacing:.02em;margin-top:2px}
.meta dd a{color:var(--link);text-decoration:none;
border-bottom:1px solid rgba(154,58,48,.30)}
.meta dd a:hover{border-bottom-color:var(--margin-rule)}
/* Drop cap toggle button */
.dropcap-btn .mark{font-family:var(--serif);font-weight:700;font-size:16px}
.list-meta .panel.featured{
padding:14px 0 16px;margin:0 0 4px;
border-top:1px solid var(--rule-strong);
border-bottom:1px solid var(--rule-strong);
}
.list-meta .panel.featured h4{
font-family:var(--serif);font-style:italic;font-weight:500;
font-size:16px;letter-spacing:.02em;text-transform:none;
color:var(--ink);margin:0 0 10px;
}
.list-meta .panel.featured h4 .count{
font-family:var(--mono);font-size:10.5px;color:var(--margin-rule);
font-weight:600;letter-spacing:.04em;font-style:normal;
}
.list-meta .panel.featured ul{list-style:none;padding:0;margin:0}
.list-meta .panel.featured li{
display:flex;align-items:baseline;gap:10px;padding:6px 0;
}
.list-meta .panel.featured li+li{border-top:1px dotted var(--rule)}
.list-meta .panel.featured li a{
font-size:13.5px;line-height:20px;font-family:var(--serif);
color:var(--ink);text-decoration:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
}
.list-meta .panel.featured li a:hover{color:var(--margin-rule)}
.list-meta .panel.featured li .when{
font-family:var(--sans);font-size:10px;font-weight:500;color:var(--mute);
min-width:6ch;letter-spacing:.06em;
}
.parts-jump{list-style:none;padding:0;margin:0}
.parts-jump li{display:flex;align-items:baseline;gap:10px;padding:5px 0}
.parts-jump li+li{border-top:1px dotted var(--rule)}
.list-meta .stats{font-size:13px;line-height:22px;color:var(--ink-soft);margin:0}
.list-meta .stats .n{font-family:var(--mono);color:var(--ink);font-weight:600;
font-variant-numeric:tabular-nums lining-nums;font-size:14px;margin-right:4px}
.parts-jump a{
font-family:var(--serif);font-size:13.5px;color:var(--ink);text-decoration:none;
display:flex;align-items:baseline;gap:8px;flex:1;
}
.parts-jump a:hover{color:var(--margin-rule)}
.parts-jump li .count{
font-family:var(--mono);font-size:10px;color:var(--mute-faint);letter-spacing:.04em;
}
ul.refs{list-style:none;padding:0;margin:0}
ul.refs li{margin:0 0 4px;font-family:var(--serif);font-size:13px;display:flex;align-items:baseline;gap:8px}
ul.refs li .arr{font-family:var(--mono);font-size:11px;color:var(--margin-rule);flex-shrink:0}
ul.refs a{
color:var(--link);text-decoration:none;
border-bottom:1px solid rgba(154,58,48,.3);
}
ul.refs a:hover{border-bottom-color:var(--margin-rule)}
ol.revlog{
list-style:none;padding:0;margin:0;
font-family:var(--serif);font-size:12.5px;line-height:18px;
}
ol.revlog li{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:5px 0}
ol.revlog li+li{border-top:1px dotted var(--rule)}
ol.revlog .rev{
font-family:var(--serif);font-size:13px;font-weight:700;
color:var(--margin-rule);min-width:3ch;
}
/* Folder + file rows */
/* Swiss-grid folder numbering — auto-counter on every folder block other
than Root. Renders as "01", "02"… in the margin, in monospace, matching
Müller-Brockmann's column registration style. */
.list-col{counter-reset:folder-num}
/* Only top-level folders increment the section counter. Depth-1+ subfolders
use the "↳" prefix (defined later) and must not consume counter values,
otherwise depth-0 folders after a nested group skip numbers. */
.list-col .folder.dir-depth-0:not(#root){counter-increment:folder-num}
.list-col .folder.dir-depth-0:not(#root) .folder-head .dir-label::before{
content:counter(folder-num, decimal-leading-zero);
display:inline-block;
margin-right:14px;
font-family:var(--mono);font-style:normal;font-weight:500;
font-size:11px;letter-spacing:.16em;color:var(--mute);
vertical-align:.18em;
}
.list-intro{margin-bottom:calc(var(--grid)*2)}
.list-intro .kicker{
font-family:var(--serif);font-style:italic;font-size:13px;
letter-spacing:.04em;color:var(--mute);margin-bottom:var(--grid-half);
}
.list-intro h1{
font-family:var(--serif);font-weight:700;
font-size:56px;line-height:56px;letter-spacing:-.022em;
margin:0 0 14px;color:var(--ink);
}
.list-intro .sub{
font-style:italic;color:var(--ink-soft);margin:0;
font-size:var(--t-md);line-height:var(--grid);
}
.list-intro .ornament{
color:var(--margin-rule);font-size:18px;letter-spacing:.5em;
margin:var(--grid) 0 0;
}
.folder,.dir-heading-group{
margin-bottom:var(--grid);
scroll-margin-top:var(--grid);
}
.folder-head,.dir-heading{
display:flex;align-items:baseline;justify-content:space-between;
padding:var(--grid-quarter) 0 var(--grid-quarter);margin-bottom:0;
border-bottom:1px solid var(--rule-strong);
font-family:var(--serif);
cursor:pointer;user-select:none;
}
/* Chevron toggle on every folder head — rotates when collapsed */
.folder-head .dir-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:1.4em;height:1.4em;margin-right:8px;flex-shrink:0;
color:var(--mute);font-family:var(--sans);font-size:12px;
transition:transform .18s ease;
transform-origin:center;
}
.folder.collapsed > .folder-head .dir-toggle{transform:rotate(-90deg)}
.folder.collapsed > .folder-head{border-bottom-color:var(--rule)}
/* Collapse: hide every direct child of .folder except the head */
.folder.collapsed > :not(.folder-head){display:none}
.folder.collapsed{margin-bottom:calc(var(--grid) * .5)}
/* Don't toggle when clicking links/buttons inside the head */
.folder-head a,.folder-head button{cursor:pointer}
.folder-head .name,.dir-heading .dir-label{
display:flex;align-items:baseline;gap:14px;
font-size:15px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
color:var(--ink);text-decoration:none;
}
.folder-head .name:hover,.dir-heading .dir-label:hover{color:var(--link)}
.folder-head .name .roman{
color:var(--margin-rule);font-family:var(--serif);font-style:italic;
font-weight:400;letter-spacing:.04em;text-transform:none;font-size:16px;
min-width:2.4em;
}
.folder-head .count{
font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--mute);font-weight:500;
}
.dir-heading.root-heading .dir-label{letter-spacing:.12em}
.dir-heading:first-child{margin-top:0}
.dir-actions{display:none}
body.edit-mode .dir-actions{display:inline-flex;gap:6px}
.dir-action{
background:transparent;border:1px solid var(--rule);
color:var(--ink-soft);
font-family:var(--sans);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;font-weight:600;
padding:3px 8px;border-radius:2px;cursor:pointer;
}
.dir-action:hover{background:var(--paper-hi);color:var(--ink);border-color:var(--rule-strong)}
.dir-action.danger:hover{background:var(--link-wash);color:var(--margin-rule);border-color:rgba(154,58,48,.30)}
.row{
position:relative;
display:grid;grid-template-columns:auto 1fr auto auto;
align-items:baseline;gap:var(--grid-quarter);
padding:var(--grid-quarter) 0;
text-decoration:none;color:var(--ink);
font-family:var(--serif);
transition:color .12s,transform .12s;
will-change:transform;
}
.file-row{
position:relative;
display:flex;align-items:baseline;gap:var(--grid-quarter);
padding:var(--grid-quarter) 0;
font-family:var(--serif);
transition:color .12s,transform .12s;
will-change:transform;
}
.row+.row,.file-row+.file-row{border-top:1px dotted var(--rule)}
/* Side-movement hover — translateX is layout-safe (no reflow, GPU-composited)
and reliably nudges every child including .file-name to the right. */
.row:hover,.file-row:hover{color:var(--link);transform:translateX(6px)}
.file-row .row-link{
display:grid;
grid-template-columns:auto 1fr auto auto;
align-items:baseline;
gap:10px;flex:1;min-width:0;
text-decoration:none;color:inherit;
}
.row .bullet,.file-row .bullet{
color:var(--mute-faint);font-size:14px;line-height:var(--grid);min-width:14px;
}
.row:hover .bullet,.file-row:hover .bullet{color:var(--margin-rule)}
.row .name,.file-row .file-name{
font-size:16.5px;line-height:var(--grid);
display:flex;align-items:baseline;gap:6px;min-width:0;
color:var(--ink);font-weight:500;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.row .name .ext,.file-row .file-name .ext{
font-family:var(--serif);font-style:italic;color:var(--mute-faint);font-size:13px;
}
.row .when,.file-row .file-date{
font-family:var(--sans);font-size:10.5px;font-weight:500;color:var(--mute);
letter-spacing:.06em;min-width:7ch;text-align:right;
}
.row .size,.file-row .file-size{
font-family:var(--mono);font-size:10.5px;color:var(--mute-faint);
min-width:6ch;text-align:right;font-variant-numeric:tabular-nums;
}
.file-row .row-actions{display:none;flex-shrink:0;gap:4px}
body.edit-mode .file-row .row-actions{display:inline-flex}
.row.empty,.dir-empty{
color:var(--mute-faint);font-style:italic;
pointer-events:none;padding:9px 0;
font-family:var(--serif);font-size:14px;
}
.drag-handle{
position:absolute;left:-22px;top:50%;transform:translateY(-50%);
width:16px;height:16px;
cursor:grab;opacity:0;transition:opacity .15s;
color:var(--mute);
display:none;
}
body.edit-mode .drag-handle{display:block}
body.edit-mode .file-row:hover .drag-handle{opacity:1}
.file-row.dragging{opacity:0.45}
.dir-heading.drop-active{background:var(--link-wash)}
.file-action{
background:transparent;border:1px solid var(--rule);
color:var(--ink-soft);
font-family:var(--sans);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;font-weight:600;
padding:3px 8px;border-radius:2px;cursor:pointer;
}
.file-action:hover{background:var(--paper-hi);color:var(--ink);border-color:var(--rule-strong)}
.file-action.danger:hover{background:var(--link-wash);color:var(--margin-rule);border-color:rgba(154,58,48,.30)}
/* Editor */
#content-view.sheet,#content-view.list-sheet{display:grid}
/* Editor pane lives inside the sheet's content column so the right rail
(tools, metadata, refs) stays visible while editing. Hidden until
.sheet.is-editing is set. */
#editor-view.editor-pane{
grid-column:1 / 2;
max-width:var(--content-w);
display:none;
}
.sheet.is-editing > .content-body{display:none}
.sheet.is-editing > #editor-view.editor-pane{display:block}
/* History panel keeps the side-pane layout pattern */
#editor-view:not(.editor-pane){padding:32px var(--rail-right) 32px var(--rail-left)}
.editor-wrap{
position:relative;
font-family:var(--mono);
font-size:14px;line-height:22px;
}
/* Mirror + textarea share IDENTICAL box metrics so drag-select highlights
the exact same characters the user sees painted by the mirror. */
#editor-mirror,#editor-textarea{
box-sizing:border-box;
width:100%;
margin:0;padding:14px 18px;
font-family:var(--mono);font-size:14px;line-height:22px;
letter-spacing:0;word-spacing:0;tab-size:4;
font-variant-numeric:normal;font-feature-settings:normal;font-kerning:normal;
white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;word-break:normal;
border:1px solid var(--rule-strong);border-radius:3px;
text-align:left;text-indent:0;
}
#editor-mirror{
position:absolute;inset:0;
color:var(--ink);background:var(--paper-hi);
pointer-events:none;
overflow:hidden;
}
#editor-textarea{
position:relative;display:block;
min-height:480px;
color:transparent;caret-color:var(--ink);
background:transparent;
border-color:transparent;
resize:none;
outline:none;
overflow:hidden;
}
#editor-textarea::selection{background:rgba(154,58,48,.32);color:transparent}
.editor-mirror-diff-new{background:rgba(58,110,42,.16)}
.editor-actions{margin-top:18px;display:flex;gap:8px}
/* Save / Cancel live in the right-rail tools — themed as tool buttons */
.tool.btn-save{
background:var(--margin-rule);color:rgba(255,255,255,.96);
border:1px solid var(--margin-rule);
box-shadow:0 1px 3px rgba(0,0,0,0.18), 0 0 12px var(--crimson-glow, transparent);
transition:background .12s,transform .08s,box-shadow .12s,color .12s,border-color .12s;
}
.tool.btn-save .mark{color:rgba(255,255,255,.85)}
.tool.btn-save:hover{
background:#6b2e25;color:#fff;border-color:#6b2e25;
box-shadow:0 2px 6px rgba(0,0,0,0.25), 0 0 18px var(--crimson-glow, transparent);
transform:translateY(-1px);
}
.tool.btn-save:active{transform:translateY(0)}
.tool.btn-cancel{
background:transparent;color:var(--ink-soft);
border:1px solid var(--rule-strong);
}
.tool.btn-cancel:hover{
background:rgba(0,0,0,0.04);color:var(--ink);
border-color:var(--ink-soft);
}
/* Edit/Save/Cancel toggle visibility based on .is-editing state */
.edit-only-edit{display:none}
.sheet.is-editing .edit-only-view{display:none}
.sheet.is-editing .edit-only-edit{display:inline-flex}
/* Toast */
.toast{
position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);
background:rgba(20,16,12,.94);color:rgba(240,236,228,.92);
padding:12px 22px;border-radius:3px;
font-family:var(--sans);font-size:13px;letter-spacing:.04em;
z-index:100;
opacity:0;transition:opacity .25s,transform .25s;
pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:#3d6b3d}
.toast.err{background:var(--margin-rule)}
.float-emoji{
position:fixed;pointer-events:none;
font-size:28px;z-index:99;
user-select:none;
animation:floatUp 2.2s ease-out forwards;
}
@keyframes floatUp{
0%{transform:translateY(0) scale(0.6);opacity:0}
20%{opacity:1;transform:translateY(-30px) scale(1.1)}
100%{transform:translateY(-220px) scale(1);opacity:0}
}
/* History panel — lives inside .meta rail, compact two-line revision rows */
.meta .history-panel,
#history-panel.history-panel{
padding:14px 0;
border-top:1px solid var(--rule);
}
.history-heading{
font-family:var(--serif);font-style:italic;font-weight:500;
font-size:15px;letter-spacing:.02em;color:var(--ink);
margin:0 0 12px;
}
.history-row{
display:grid;
grid-template-columns:1fr auto;
gap:2px 8px;align-items:baseline;
padding:8px 0;border-bottom:1px dotted var(--rule);
font-family:var(--serif);
}
.history-row .h-ts{
grid-column:1 / -1;
color:var(--mute);
font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
min-width:0;
}
.history-row .h-op{
font-weight:600;color:var(--ink);font-size:11px;
text-transform:uppercase;letter-spacing:.14em;
font-family:var(--sans);
}
.history-row .h-size{
color:var(--mute-faint);font-family:var(--mono);font-size:10.5px;
margin-left:6px;
}
.history-row .h-actions{
justify-self:end;display:flex;gap:4px;flex-wrap:wrap;
}
.history-row .h-tag{
display:inline-block;padding:1px 6px;
border:1px solid var(--margin-rule);color:var(--margin-rule);
font-family:var(--sans);font-size:9px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;
border-radius:1px;
}
.history-row-current{background:rgba(154,58,48,0.03)}
.history-rev-link{
background:transparent;border:1px solid var(--rule);
color:var(--ink-soft);
font-family:var(--sans);font-size:9.5px;letter-spacing:.10em;
text-transform:uppercase;font-weight:600;
padding:2px 6px;border-radius:2px;cursor:pointer;text-decoration:none;
}
.history-rev-link:hover{background:rgba(0,0,0,0.04);color:var(--ink);border-color:var(--rule-strong)}
.history-rev-link.danger:hover{background:var(--link-wash);color:var(--margin-rule);border-color:rgba(154,58,48,.30)}
.diff-block{
grid-column:1 / -1;
font-family:var(--mono);font-size:11px;line-height:16px;
background:rgba(34,26,19,.06);padding:10px 12px;border-radius:3px;
border:1px solid var(--rule);
white-space:pre-wrap;word-wrap:break-word;
overflow-x:auto;margin:6px 0 0;
max-height:300px;overflow-y:auto;
}
.diff-add{color:#2a6e2a;background:rgba(42,110,42,.06)}
.diff-del{color:var(--margin-rule);background:rgba(154,58,48,.06)}
.diff-hdr{color:#4a6ada}
.diff-context{color:var(--mute)}
/* Trash */
.trash-item{
display:grid;
grid-template-columns:1fr auto auto auto;
gap:14px;padding:9px 0;border-bottom:1px dotted var(--rule);
font-family:var(--serif);font-size:14px;align-items:baseline;
}
.trash-item-name{color:var(--ink);font-weight:500}
.trash-item-path{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.02em}
.trash-item-date{font-family:var(--sans);font-size:10.5px;color:var(--mute);letter-spacing:.06em}
.trash-item-actions{display:flex;gap:6px}
/* Image admin */
.image-admin-toolbar{
display:flex;align-items:center;gap:14px;
padding:14px 0;
border-bottom:1px solid var(--rule);
margin-bottom:18px;
}
.image-count-badge{
font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.04em;
}
.image-upload-btn{
display:inline-flex;align-items:baseline;gap:6px;
padding:7px 12px;
font-family:var(--serif);font-size:12px;letter-spacing:.16em;
text-transform:uppercase;font-weight:600;
color:var(--ink-soft);cursor:pointer;
background:var(--paper-hi);border:1px solid var(--rule);border-radius:3px;
}
.image-upload-btn:hover{background:var(--paper)}
.image-max-hint{font-family:var(--sans);font-size:10.5px;color:var(--mute);letter-spacing:.04em}
.bg-cycler-bar{display:flex;align-items:center;gap:8px;padding:8px 0;margin-bottom:14px}
.bg-cycler-bar .file-action{padding:4px 10px}
.bg-cycler-label{
font-family:var(--sans);font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--mute);
}
.bg-cycler-pos{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.image-grid{
display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:18px;
}
.image-card{
border:1px solid var(--rule);border-radius:3px;
background:var(--paper-hi);overflow:hidden;transition:border-color .15s;
}
.image-card:hover{border-color:var(--rule-strong)}
.image-card-thumb{display:block;width:100%;aspect-ratio:16/10;overflow:hidden}
.image-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.image-card-info{padding:8px 12px}
.image-card-name{
display:block;font-family:var(--serif);font-size:13px;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.image-card-meta{
display:block;font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:2px;
}
.image-card-actions{padding:0 12px 10px;display:flex;gap:6px}
/* Responsive */
@media (max-width:900px){
:root{--rail-left:80px;--rail-right:48px;--margin-x:56px}
body{padding:18vh 16px 80px}
.masthead .logo{font-size:30px}
.masthead .tagline{font-size:12px;letter-spacing:.18em}
.masthead{gap:22px}
.masthead .home-link{margin-left:110px}
.waifu{width:140px;left:-50px;top:-150px}
.masthead{padding:22px 28px 18px;grid-template-columns:1fr auto;gap:12px}
.masthead .ornament{display:none}
.sheet,.list-sheet{
grid-template-columns:1fr;
gap:32px;
padding:48px var(--rail-right) 56px var(--rail-left);
}
.sheet::before,.list-sheet::before{top:32px;bottom:32px}
.meta,.list-meta{
grid-column:1 / -1;grid-row:auto;margin-top:0;max-width:480px;
position:static;max-height:none;overflow-y:visible;
}
.title{font-size:32px;line-height:40px}
.list-intro h1{font-size:36px;line-height:44px}
.content,.content-body{font-size:17px}
.book::after{left:12px;right:12px;top:12px;bottom:12px}
#editor-view,#history-panel{padding:32px var(--rail-right) 32px var(--rail-left)}
}
@media (max-width:540px){
:root{--rail-left:56px;--rail-right:28px;--margin-x:36px}
body{padding:14vh 8px 64px}
.masthead .logo{font-size:24px;letter-spacing:0}
.masthead .tagline{font-size:11px;letter-spacing:.16em}
.masthead .masthead-util{font-size:11px;flex-wrap:wrap;gap:8px}
.masthead .home-link{font-size:12px;margin-left:80px}
.masthead .folio{font-size:12px;gap:10px}
.masthead{gap:16px;padding:0 8px}
.waifu{width:100px;left:-40px;top:-120px}
.masthead{padding:18px 20px 14px}
.masthead .home{font-size:12px;letter-spacing:.16em}
.masthead .folio .tool{padding:5px 8px;font-size:11px}
.masthead .folio .label-folio{display:none}
.sheet,.list-sheet{padding:40px var(--rail-right) 48px var(--rail-left)}
.sheet::before,.list-sheet::before{top:24px;bottom:24px;left:24px}
.title{font-size:26px;line-height:34px}
.list-intro h1{font-size:28px;line-height:36px}
.content,.content-body{font-size:16.5px}
#editor-view,#history-panel{padding:24px var(--rail-right) 24px var(--rail-left)}
}
/* ================================================================
"Ridulian Crystal" theme ??glass pane, dark ground, floating masthead
================================================================ */
[data-theme="crystal"] {
--paper-lit: rgba(248, 250, 251, 0.97);
--paper-bright: rgba(242, 246, 248, 0.93);
--paper-mid: rgba(228, 234, 238, 0.82);
--paper-soft: rgba(196, 206, 214, 0.52);
--paper-edge: rgba(160, 172, 182, 0.22);
--paper-fill: rgba(232, 236, 238, 0.62);
--edge-bright: rgba(255, 255, 255, 0.80);
--edge-deep: rgba(8, 10, 14, 0.34);
--prism-cool: rgba(204, 222, 240, 0.48);
--prism-warm: rgba(232, 220, 212, 0.28);
--ink: #161616;
--ink-soft: #383838;
--mute: rgba(36, 36, 40, 0.72);
--mute-faint: rgba(36, 36, 40, 0.48);
--rule: rgba(20, 20, 26, 0.12);
--rule-strong: rgba(20, 20, 26, 0.22);
--margin-rule: #8a2e26;
--crimson-glow: rgba(170, 55, 45, 0.20);
--ember-glow: rgba(105, 70, 90, 0.24);
--link: #6e2820;
--link-wash: rgba(138, 49, 40, 0.06);
--stamp: #8a2e26;
--gold: #8a6a2c;
--bg-ink: rgba(240, 236, 228, 0.92);
--bg-mute: rgba(240, 236, 228, 0.55);
--bg-faint: rgba(240, 236, 228, 0.32);
--grid: 28px;
--grid-half: 14px;
--grid-quarter: 7px;
/* Crystal raster: same grid multiples as parchment for consistent rhythm. */
--rail-left: 140px; /* 5 × grid */
--rail-right: 84px; /* 3 × grid */
--margin-x: 112px; /* 4 × grid */
--content-w: 68ch;
--rail-w: 224px; /* 8 × grid */
--container-w: min(1260px, 98vw); /* 45 × grid */
}
[data-theme="crystal"] body {
display: flex; flex-direction: column; gap: calc(var(--grid)*3); align-items: center;
background:
radial-gradient(70% 60% at 20% 10%, rgba(120,90,60,.16), transparent 70%),
radial-gradient(60% 50% at 90% 90%, rgba(50,70,90,.12), transparent 70%),
linear-gradient(180deg, #1a1612 0%, #0a0a0b 100%);
/* Grid-aligned vertical rhythm: 1.5×, 1×, 4× grid. */
padding: calc(var(--grid)*1.5) var(--grid) calc(var(--grid)*4);
}
[data-theme="crystal"] .bg-dim {
background:
radial-gradient(60% 50% at 50% 30%, rgba(0,0,0,0.04), transparent 70%),
linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%);
}
/* ?�?� Crystal book card: glass pane, no grain, no inner frame ?�?� */
[data-theme="crystal"] .book {
margin-top: 0;
border-radius: 5px;
background:
linear-gradient(180deg,
rgba(255,255,255,0.30) 0%,
rgba(255,255,255,0.10) 7%,
transparent 22%),
linear-gradient(90deg,
rgba(255,255,255,0.12) 0%,
rgba(255,255,255,0.02) 8%,
transparent 18%,
transparent 82%,
rgba(255,255,255,0.02) 92%,
rgba(255,255,255,0.10) 100%),
radial-gradient(165% 140% at 38% 30%,
var(--paper-lit) 0%,
var(--paper-bright) 28%,
var(--paper-mid) 58%,
var(--paper-soft) 84%,
var(--paper-edge) 100%),
radial-gradient(95% 80% at 50% 96%,
var(--paper-fill), transparent 78%);
box-shadow:
0 44px 110px -24px rgba(0,0,0,.85),
0 12px 32px rgba(0,0,0,.55),
0 0 0 1px rgba(0,0,0,.35);
border: 1px solid rgba(220,228,232,.18);
}
[data-theme="crystal"] .book::before { display: none; }
[data-theme="crystal"] .book::after { display: none; }
/* ?�?� Crystal masthead: floats outside the card, light text on dark BG ?�?� */
/* Crystal theme inherits the masthead structure (hero + util) from the default.
Only swap in cool-toned glow on the ornament line. */
[data-theme="crystal"] .masthead .logo-ornament {
text-shadow: 0 0 22px rgba(170,55,45,0.6), 0 0 40px rgba(160,180,210,0.20);
}
[data-theme="crystal"] .masthead .logo {
/* Crystal spotlight: same bilateral stage spots, with a faint cool halo. */
text-shadow:
-180px 0 240px rgba(0,0,0,1),
180px 0 240px rgba(0,0,0,1),
0 0 84px rgba(0,0,0,1),
0 0 360px rgba(0,0,0,0.85),
0 0 56px rgba(180,205,230,0.20);
}
/* ?�?� Crystal sheet grid: 3-column raster on grid multiples ?�?� */
[data-theme="crystal"] .sheet {
grid-template-columns: minmax(0, var(--content-w)) minmax(var(--grid), 1fr) var(--rail-w);
gap: 0 var(--grid);
padding: calc(var(--grid)*2.5) var(--rail-right) calc(var(--grid)*2.5) var(--rail-left);
}
[data-theme="crystal"] .sheet::before {
left: var(--margin-x); top: calc(var(--grid)*1.5); bottom: calc(var(--grid)*1.5);
width: 1px; background: var(--margin-rule); opacity: .6;
box-shadow: 0 0 6px var(--crimson-glow);
}
[data-theme="crystal"] .list-sheet {
grid-template-columns: minmax(0, 1fr) minmax(var(--grid), 1fr) var(--rail-w);
gap: 0 var(--grid);
padding: calc(var(--grid)*2.5) var(--rail-right) calc(var(--grid)*2.5) var(--rail-left);
}
[data-theme="crystal"] .list-sheet::before {
left: var(--margin-x); top: calc(var(--grid)*1.5); bottom: calc(var(--grid)*1.5);
width: 1px; background: var(--margin-rule); opacity: .6;
box-shadow: 0 0 6px var(--crimson-glow);
}
/* Right rule visible in crystal — grid-aligned margins */
[data-theme="crystal"] .right-rule {
display: block;
grid-column: 2 / 3; grid-row: 1 / -1;
align-self: stretch; justify-self: center;
width: 1px; background: var(--rule-strong);
margin: calc(var(--grid)*1.5) 0;
}
/* ?�?� Crystal content: no notebook ruling ?�?� */
[data-theme="crystal"] .content,
[data-theme="crystal"] .content-body {
background-image: none;
max-width: var(--content-w);
font-size: 17.5px; line-height: var(--grid);
letter-spacing: .003em;
}
/* ?�?� Crystal path crumb ?�?� */
[data-theme="crystal"] .path {
font-family: var(--sans); font-size: 10.5px; font-style: normal;
letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
[data-theme="crystal"] .path .cur { font-weight: 600; }
/* ?�?� Crystal title ?�?� */
[data-theme="crystal"] .title {
font-size: var(--t-2xl); line-height: calc(var(--grid)*2); letter-spacing: -.018em;
margin: 0 0 calc(var(--grid-half) + var(--grid));
}
/* ?�?� Crystal headings ?�?� */
[data-theme="crystal"] .content h2,
[data-theme="crystal"] .content-body h2 {
background: transparent; padding: 0;
font-size: 22px; margin: 56px 0 var(--grid);
}
[data-theme="crystal"] .content h3,
[data-theme="crystal"] .content-body h3 {
background: transparent; padding: 0;
font-family: var(--sans); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--mute); font-weight: 600;
}
[data-theme="crystal"] .content h1,
[data-theme="crystal"] .content-body h1 {
background: transparent; padding: 0;
}
[data-theme="crystal"] .content h4,
[data-theme="crystal"] .content-body h4 {
background: transparent; padding: 0;
}
[data-theme="crystal"] .content-body blockquote {
border-left-color: var(--margin-rule);
}
/* ?�?� Crystal lead paragraph ?�?� */
[data-theme="crystal"] .content p.lead,
[data-theme="crystal"] .content-body p.lead {
font-size: 18px; line-height: var(--grid); color: var(--ink-soft);
font-style: italic; margin: 0 0 var(--grid);
}
[data-theme="crystal"] .content p.lead::before,
[data-theme="crystal"] .content-body p.lead::before {
content: "\2767"; color: var(--margin-rule); font-style: normal;
margin-right: 4px; text-shadow: 0 0 8px var(--crimson-glow);
}
/* ?�?� Crystal drop caps ?�?� */
[data-theme="crystal"] .content-body > p.opens::first-letter,
[data-theme="crystal"] .content > p.opens::first-letter {
font-size: 76px; line-height: 56px; padding: 6px 12px 0 0;
color: var(--margin-rule);
text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 14px var(--crimson-glow);
}
/* ?�?� Crystal links ?�?� */
[data-theme="crystal"] .content a,
[data-theme="crystal"] .content-body a {
color: var(--link); border-bottom: 1px solid rgba(110,40,32,.45);
}
[data-theme="crystal"] .content a:hover,
[data-theme="crystal"] .content-body a:hover {
border-bottom-color: var(--margin-rule); background: var(--link-wash);
}
[data-theme="crystal"] .ref-link {
color: var(--link); border-bottom: 1px dashed rgba(110,40,32,.40);
}
[data-theme="crystal"] .ref-link:hover { border-bottom-style: solid; }
/* ?�?� Crystal code ?�?� */
[data-theme="crystal"] .content code,
[data-theme="crystal"] .content-body code {
background: rgba(34,26,19,.08);
}
/* ?�?� Crystal hr.break ?�?� */
[data-theme="crystal"] .content hr.break,
[data-theme="crystal"] .content-body hr.break {
background: var(--rule-strong); width: 48px; height: 1px;
font-size: inherit; letter-spacing: inherit; color: inherit;
}
/* ?�?� Crystal meta rail ?�?� */
[data-theme="crystal"] .meta {
grid-column: 3 / 4; grid-row: 1 / span 7;
margin-top: 0;
font-family: var(--serif); font-size: 13px; line-height: 20px;
}
[data-theme="crystal"] .list-meta {
grid-column: 3 / 4;
margin-top: 0;
}
/* ?�?� Crystal tools ?�?� */
[data-theme="crystal"] .tools {
gap: 4px;
}
[data-theme="crystal"] .tool,
[data-theme="crystal"] .edit-btn,
[data-theme="crystal"] .history-link,
[data-theme="crystal"] .back-btn,
[data-theme="crystal"] .new-btn {
padding: 7px 12px;
font-family: var(--serif); font-size: 12px; letter-spacing: .16em;
background: rgba(255,255,255,.40);
border: 1px solid var(--rule);
border-radius: 3px;
color: var(--ink-soft);
}
[data-theme="crystal"] .tool:hover,
[data-theme="crystal"] .edit-btn:hover,
[data-theme="crystal"] .history-link:hover,
[data-theme="crystal"] .back-btn:hover,
[data-theme="crystal"] .new-btn:hover {
background: rgba(255,255,255,.60); color: var(--ink);
border-color: var(--rule-strong);
}
[data-theme="crystal"] .tool .mark { color: var(--margin-rule); }
[data-theme="crystal"] .tool.primary { background: rgba(255,255,255,.45); }
[data-theme="crystal"] .new-btn.edit-only { display: none; }
/* ?�?� Crystal panels ?�?� */
[data-theme="crystal"] .panel h4 .count {
color: var(--margin-rule); text-shadow: 0 0 6px var(--crimson-glow);
}
[data-theme="crystal"] .panel.info dd .em { color: var(--margin-rule); }
[data-theme="crystal"] .panel.info dd .stamp,
[data-theme="crystal"] .meta .stamp {
border-color: var(--margin-rule); color: var(--margin-rule);
text-shadow: 0 0 8px var(--crimson-glow);
}
[data-theme="crystal"] .meta dt { color: var(--mute); }
[data-theme="crystal"] .meta dd .v { color: var(--ink); }
[data-theme="crystal"] .meta dd .v-abs { color: var(--mute); }
[data-theme="crystal"] .meta dd a { color: var(--link); }
[data-theme="crystal"] .meta dd a:hover { border-bottom-color: var(--margin-rule); }
/* ?�?� Crystal featured panel (recently amended) ?�?� */
[data-theme="crystal"] .list-meta .panel.featured {
border-top-color: var(--rule-strong);
border-bottom-color: var(--rule-strong);
}
[data-theme="crystal"] .list-meta .panel.featured h4 {
font-family: var(--serif); font-style: italic; font-weight: 500;
font-size: 16px; text-transform: none; color: var(--ink);
}
[data-theme="crystal"] .list-meta .panel.featured h4 .count {
color: var(--margin-rule); text-shadow: 0 0 6px var(--crimson-glow);
}
[data-theme="crystal"] .list-meta .panel.featured li a:hover { color: var(--margin-rule); }
/* ?�?� Crystal parts jump ?�?� */
[data-theme="crystal"] .parts-jump a:hover { color: var(--margin-rule); }
[data-theme="crystal"] .list-meta .stats { color: var(--ink-soft); }
[data-theme="crystal"] .list-meta .stats .n { color: var(--ink); }
[data-theme="crystal"] .list-meta .tools { border-bottom-color: var(--rule); }
[data-theme="crystal"] .list-meta .tools .tool { background: rgba(255,255,255,.40); }
/* ?�?� Crystal refs ?�?� */
[data-theme="crystal"] ul.refs li .arr { color: var(--margin-rule); }
[data-theme="crystal"] ul.refs a { border-bottom-color: rgba(110,40,32,.32); }
[data-theme="crystal"] ul.refs a:hover { border-bottom-color: var(--margin-rule); }
/* ?�?� Crystal revlog ?�?� */
[data-theme="crystal"] ol.revlog .rev {
color: var(--margin-rule); font-weight: 700;
text-shadow: 0 0 6px var(--crimson-glow);
}
/* ?�?� Crystal list-intro ?�?� */
[data-theme="crystal"] .list-intro { margin-bottom: 56px; }
[data-theme="crystal"] .list-intro h1 {
font-size: 56px; line-height: 56px; letter-spacing: -.022em;
margin: 0 0 14px;
}
[data-theme="crystal"] .list-intro .sub {
font-style: italic; color: var(--ink-soft); margin: 0;
font-size: 16px; line-height: 24px;
}
[data-theme="crystal"] .list-intro .kicker {
font-family: var(--serif); font-style: italic; font-size: 14px;
letter-spacing: .04em; color: var(--mute); margin-bottom: 12px;
}
[data-theme="crystal"] .list-intro .ornament {
color: var(--margin-rule); font-size: 18px; letter-spacing: .5em;
margin: var(--grid) 0 0;
}
/* ?�?� Crystal folder headings ?�?� */
[data-theme="crystal"] .folder-head .name,
[data-theme="crystal"] .dir-heading .dir-label {
font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
}
[data-theme="crystal"] .folder-head .name .roman {
color: var(--margin-rule); font-weight: 700;
letter-spacing: .18em; font-size: 15px; font-style: normal;
text-shadow: 0 0 6px var(--crimson-glow);
}
[data-theme="crystal"] .folder-head .count {
font-family: var(--sans); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: var(--mute); font-weight: 500;
}
/* ?�?� Crystal file rows ?�?� */
[data-theme="crystal"] .row {
padding: 5px 0;
transition: color .12s, transform .12s;
will-change: transform;
}
[data-theme="crystal"] .file-row {
padding: 5px 0;
transition: color .12s, transform .12s;
will-change: transform;
}
[data-theme="crystal"] .row .name,
[data-theme="crystal"] .file-row .file-name {
font-size: 15.5px; line-height: 24px;
}
[data-theme="crystal"] .row .name .ext,
[data-theme="crystal"] .file-row .file-name .ext {
font-family: var(--mono); color: var(--mute-faint); font-size: 11px;
}
[data-theme="crystal"] .row .when,
[data-theme="crystal"] .file-row .file-date {
font-family: var(--sans); font-size: 10.5px; font-weight: 500; color: var(--mute);
}
[data-theme="crystal"] .row .size,
[data-theme="crystal"] .file-row .file-size {
font-family: var(--mono); font-size: 10.5px; color: var(--mute-faint);
}
[data-theme="crystal"] .row .bullet { color: var(--mute-faint); font-size: 13px; }
[data-theme="crystal"] .row:hover .bullet,
[data-theme="crystal"] .file-row:hover .bullet { color: var(--margin-rule); }
[data-theme="crystal"] .row:hover,
[data-theme="crystal"] .file-row:hover { color: var(--link); transform: translateX(6px); }
/* ?�?� Crystal file actions ?�?� */
[data-theme="crystal"] .file-action {
background: transparent; border: 1px solid var(--rule);
color: var(--ink-soft);
}
[data-theme="crystal"] .file-action:hover {
background: rgba(255,255,255,.60); color: var(--ink);
border-color: var(--rule-strong);
}
[data-theme="crystal"] .file-action.danger:hover {
background: var(--link-wash); color: var(--margin-rule);
border-color: rgba(138,46,38,.30);
}
/* ?�?� Crystal dir actions ?�?� */
[data-theme="crystal"] .dir-action {
background: transparent; border: 1px solid var(--rule);
color: var(--ink-soft);
}
[data-theme="crystal"] .dir-action:hover {
background: rgba(255,255,255,.60); color: var(--ink);
border-color: var(--rule-strong);
}
[data-theme="crystal"] .dir-action.danger:hover {
background: var(--link-wash); color: var(--margin-rule);
border-color: rgba(138,46,38,.30);
}
/* ?�?� Crystal editor ?�?� */
[data-theme="crystal"] #editor-mirror {
background: rgba(255,255,255,.40);
}
[data-theme="crystal"] .tool.btn-save {
background: var(--margin-rule); color: rgba(255,255,255,.96);
border-color: var(--margin-rule);
}
[data-theme="crystal"] .tool.btn-save:hover {
background: #6b2e25; color: #fff; border-color: #6b2e25;
}
[data-theme="crystal"] .tool.btn-save .mark { color: rgba(255,255,255,.85); }
[data-theme="crystal"] .tool.btn-cancel {
background: rgba(255,255,255,.30); color: var(--ink-soft);
border-color: var(--rule-strong);
}
[data-theme="crystal"] .tool.btn-cancel:hover {
background: rgba(255,255,255,.60); color: var(--ink);
border-color: var(--ink-soft);
}
/* ?�?� Crystal history ?�?� */
[data-theme="crystal"] .history-row .h-tag {
border-color: var(--margin-rule); color: var(--margin-rule);
}
[data-theme="crystal"] .history-rev-link:hover { background: rgba(255,255,255,.60); }
[data-theme="crystal"] .history-rev-link.danger:hover {
background: var(--link-wash); color: var(--margin-rule);
border-color: rgba(138,46,38,.30);
}
/* ?�?� Crystal image admin ?�?� */
[data-theme="crystal"] .image-upload-btn { background: rgba(255,255,255,.40); }
[data-theme="crystal"] .image-upload-btn:hover { background: rgba(255,255,255,.60); }
[data-theme="crystal"] .image-card { background: rgba(255,255,255,.40); }
/* ?�?� Crystal toast ?�?� */
[data-theme="crystal"] .toast.err { background: var(--margin-rule); }
/* Crystal waifu — same positioning approach: mostly above, clears the title. */
[data-theme="crystal"] .waifu {
left: -60px; top: -180px;
width: 180px;
filter: drop-shadow(0 12px 24px rgba(0,0,0,.55));
}
/* ?�?� Crystal loading bar — same grow-from-top-left treatment ?�?� */
[data-theme="crystal"] .book.loading::after {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: var(--margin-rule);
transform: scaleX(0); transform-origin: 0 50%;
animation: loadgrow 1.2s cubic-bezier(.2,.7,.3,1) infinite;
border: none; border-radius: 0;
box-shadow: 0 0 14px var(--crimson-glow, var(--margin-rule));
}
/* ?�?� Crystal responsive ?�?� */
/* Crystal iframe sandbox: span content + gutter for side-by-side layouts */
[data-theme="crystal"] .content-body:has(.content-sandbox) {
max-width: none;
grid-column: 1 / 3;
}
@media (max-width: 900px) {
[data-theme="crystal"] {
--rail-left: 80px; --rail-right: 48px; --margin-x: 56px; --rail-w: 0;
}
[data-theme="crystal"] body {
padding: 32px 16px 80px; gap: 64px;
}
[data-theme="crystal"] .waifu { width: 140px; left: -50px; top: -150px; }
[data-theme="crystal"] .sheet,
[data-theme="crystal"] .list-sheet {
grid-template-columns: 1fr;
gap: 32px;
padding: 48px var(--rail-right) 56px var(--rail-left);
}
[data-theme="crystal"] .sheet::before,
[data-theme="crystal"] .list-sheet::before { top: 32px; bottom: 32px; }
[data-theme="crystal"] .right-rule { display: none; }
[data-theme="crystal"] .meta,
[data-theme="crystal"] .list-meta {
grid-column: 1 / -1; grid-row: auto; margin-top: 0;
max-width: 480px; position: static;
}
[data-theme="crystal"] .title { font-size: 30px; line-height: 40px; }
[data-theme="crystal"] .list-intro h1 { font-size: 36px; line-height: 44px; }
[data-theme="crystal"] .content,
[data-theme="crystal"] .content-body { font-size: 17px; }
}
@media (max-width: 540px) {
[data-theme="crystal"] {
--rail-left: 56px; --rail-right: 28px; --margin-x: 36px;
}
[data-theme="crystal"] body { padding: 16px 8px 64px; gap: 48px; }
[data-theme="crystal"] .waifu { width: 100px; left: -40px; top: -120px; }
/* Crystal masthead inherits default responsive sizing */
[data-theme="crystal"] .sheet,
[data-theme="crystal"] .list-sheet {
padding: 40px var(--rail-right) 48px var(--rail-left);
}
[data-theme="crystal"] .sheet::before,
[data-theme="crystal"] .list-sheet::before { top: 24px; bottom: 24px; }
[data-theme="crystal"] .title { font-size: 26px; line-height: 34px; }
[data-theme="crystal"] .list-intro h1 { font-size: 28px; line-height: 36px; }
[data-theme="crystal"] .content,
[data-theme="crystal"] .content-body { font-size: 16.5px; }
}
/* ── Nested-folder indentation ───────────────────────────── */
.list-col .folder.dir-depth-1 {
margin-left: 2.4em;
padding-left: 1.2em;
border-left: 1px dotted var(--rule);
}
.list-col .folder.dir-depth-2 {
margin-left: 4.8em;
padding-left: 1.2em;
border-left: 1px dotted var(--rule);
}
.list-col .folder.dir-depth-1 .folder-head .dir-label::before,
.list-col .folder.dir-depth-2 .folder-head .dir-label::before {
content: "↳ ";
opacity: 0.55;
margin-right: 0.1em;
}
/* ── Parent-only section headers ──────────────────────────────
A folder that has nested subfolders but no direct files of its own
(e.g. "5. Industry" containing only 5.1, 5.2, …). Rendered as a
pure section header — no "(empty)" placeholder, count shows the
number of subsections, and the heading reads slightly heavier than
a leaf-folder heading so the hierarchy is legible at a glance.
Distinction is by weight + letter-spacing, not color, matching the
rest of the parchment palette. */
.list-col .folder.folder-parent-only > .folder-head{
border-bottom-width:2px;
padding-bottom:calc(var(--grid-quarter) + 2px);
}
.list-col .folder.folder-parent-only > .folder-head .dir-label{
font-size:16px;letter-spacing:.22em;
}
.list-col .folder.folder-parent-only{
margin-bottom:calc(var(--grid) * .5);
}
.parts-jump li.parts-depth-1 {
padding-left: 1.4em;
font-size: 0.95em;
}
.parts-jump li.parts-depth-1 a::before {
content: "↳ ";
opacity: 0.55;
}
.parts-jump li.parts-depth-2 {
padding-left: 2.8em;
font-size: 0.9em;
opacity: 0.88;
}
.parts-jump li.parts-depth-2 a::before {
content: "↳ ";
opacity: 0.55;
}