/* VARIABLES - Shared */
:root {
--ap-ui-font: 'Fraunces', 'Noto Color Emoji', 'Literata', serif;
--frame-w: clamp(10px, calc(2.36vw - 1.42px), 20px);
--shelf-bg: rgba(var(--bg), 1);
--bookcase-frame: rgba(var(--shelf-mid), 1);
--card-shadow-in: rgba(var(--light), 0.03);
--menu-num: rgba(var(--text), 1);
--shelf-wrap-bg: rgba(var(--bg), 1);
--scroll-track: rgba(2, 2, 2, 1);
--scroll-thumb: rgba(128, 128, 128, 0.5);
--scroll-border: rgba(2, 2, 2, 1);
scrollbar-color: rgba(128 ,128, 128, 0.5) rgba(2, 2, 2, 1);
}

/* VARIABLES - Dark Mode */
:root {
--bg: 2, 2, 2;
--dark: 0, 0, 0;
--light: 255, 255, 255;
--text: 128, 128, 128;
--link: 128, 128, 128;
--shelf-dark: 8, 8, 8;
--shelf-mid: 12, 12, 12;
--shelf-light: 17, 17, 17;
--bookcase-edge: rgba(var(--light), 0.1);
--plaque-bg: radial-gradient(ellipse 200px 80px at 12% 35%, rgba(25, 25, 25, 0.6) 0%, transparent 100%), radial-gradient(ellipse 160px 120px at 85% 65%, rgba(16, 16, 16, 0.5) 0%, transparent 100%), radial-gradient(ellipse 120px 60px at 50% 10%, rgba(21, 21, 21, 0.4) 0%, transparent 100%), radial-gradient(ellipse 100px 80px at 25% 88%, rgba(14, 14, 14, 0.45) 0%, transparent 100%), linear-gradient(162deg, rgba(28, 28, 28, 1) 0%, rgba(16, 16, 16, 1) 12%, rgba(25, 25, 25, 1) 22%, rgba(12, 12, 12, 1) 35%, rgba(23, 23, 23, 1) 48%, rgba(10, 10, 10, 1) 60%, rgba(21, 21, 21, 1) 72%, rgba(12, 12, 12, 1) 85%, rgba(17, 17, 17, 1) 100%);
--plaque-border-top: rgba(48, 48, 48, 1);
--plaque-border-left: rgba(41, 41, 41, 1);
--plaque-border-bottom: rgba(5, 5, 5, 1);
--plaque-border-right: rgba(7, 7, 7, 1);
--plaque-after-bg: radial-gradient(ellipse 30px 16px at 8% 18%, rgba(26, 26, 26, 0.25) 0%, transparent 100%), radial-gradient(ellipse 20px 28px at 88% 72%, rgba(21, 21, 21, 0.20) 0%, transparent 100%), radial-gradient(ellipse 36px 14px at 45% 92%, rgba(25, 25, 25, 0.22) 0%, transparent 100%), radial-gradient(ellipse 16px 24px at 94% 8%, rgba(19, 19, 19, 0.18) 0%, transparent 100%), radial-gradient(ellipse 24px 16px at 32% 55%, rgba(16, 16, 16, 0.15) 0%, transparent 100%);
--plaque-tarnish-bg: radial-gradient(ellipse 60px 30px at 15% 70%, rgba(91, 91, 91, 0.14) 0%, transparent 100%), radial-gradient(ellipse 40px 50px at 82% 20%, rgba(69, 69, 69, 0.16) 0%, transparent 100%), radial-gradient(ellipse 50px 25px at 70% 60%, rgba(84, 84, 84, 0.10) 0%, transparent 100%);
--plaque-edges-bg: radial-gradient(ellipse 220px 90px at 50% 0%, rgba(116, 116, 116, 0.10) 0%, transparent 70%), radial-gradient(ellipse 200px 80px at 50% 100%, rgba(87, 87, 87, 0.08) 0%, transparent 70%);
--plaque-screw-bg: radial-gradient(circle at 38% 35%, rgba(39, 39, 39, 1) 0%, rgba(19, 19, 19, 1) 60%, rgba(12, 12, 12, 1) 100%);
--plaque-text: rgba(17, 17, 17, 1);
--card-grad-1: rgba(var(--shelf-light), 0.8);
--card-grad-2: rgba(var(--shelf-dark), 0.8);
--card-border: rgba(var(--light), 0.08);
--card-shadow-out: rgba(var(--dark), 0.5);
--card-corner: rgba(var(--light), 0.08);
--button-corner: rgba(var(--light), 0.08);
--label-text: rgba(var(--text), 0.8);
--menu-border: rgba(var(--light), 0.08);
--menu-sep: rgba(var(--light), 0.08);
--shelf-wrap-shade: rgba(var(--black), 0.4);
--shelf-wrap-shadow: rgba(var(--black), 0.7);
--shelf-wrap-top: rgba(var(--white), 0.04);
--shelf-wrap-hover-bg: rgba(var(--white), 0.05);
--shelf-title-hover: rgba(var(--white), 1);
--shelf-meta-line-1: rgba(var(--white), 0.07);
--shelf-meta-line-2: rgba(var(--black), 0.45);
--shelf-meta-shadow: rgba(var(--white), 0.04);
--shelf-icon-color: rgba(var(--text), 0.7);
--joined-scrollbar-thumb: rgba(var(--text), 0.35);
--joined-scrollbar-thumb-hover: rgba(var(--text), 0.7);
--footer: var(--white);
}

/* VARIABLES - Light Mode */
:root.ap-light {
--bg: 235, 217, 173;
--light: 0, 0, 0;
--dark: 255, 255, 255;
--text: 48, 30, 16;
--link: 80, 24, 3;
--shelf-dark: 18, 5, 0;
--shelf-mid: 52, 14, 0;
--shelf-light: 58, 26, 6;
--bookcase-edge: rgba(106, 37, 8, 0.8);
--plaque-bg: radial-gradient(ellipse 200px 80px at 12% 35%, rgba(94, 41, 12, 0.6) 0%, transparent 100%), radial-gradient(ellipse 160px 120px at 85% 65%, rgba(66, 25, 8, 0.5) 0%, transparent 100%), radial-gradient(ellipse 120px 60px at 50% 10%, rgba(80, 32, 9, 0.4) 0%, transparent 100%), radial-gradient(ellipse 100px 80px at 25% 88%, rgba(60, 21, 7, 0.45) 0%, transparent 100%), linear-gradient(162deg, rgba(98, 43, 13, 1) 0%, rgba(66, 25, 8, 1) 12%, rgba(90, 38, 11, 1) 22%, rgba(58, 20, 6, 1) 35%, rgba(82, 34, 9, 1) 48%, rgba(52, 14, 0, 1) 60%, rgba(78, 32, 9, 1) 72%, rgba(58, 20, 6, 1) 85%, rgba(70, 28, 8, 1) 100%);
--plaque-border-top: rgba(96, 44, 14, 1);
--plaque-border-left: rgba(90, 40, 12, 1);
--plaque-border-bottom: rgba(24, 8, 2, 1);
--plaque-border-right: rgba(28, 10, 3, 1);
--plaque-after-bg: radial-gradient(ellipse 30px 16px at 8% 18%, rgba(90, 38, 11, 0.25) 0%, transparent 100%), radial-gradient(ellipse 20px 28px at 88% 72%, rgba(78, 32, 9, 0.20) 0%, transparent 100%), radial-gradient(ellipse 36px 14px at 45% 92%, rgba(86, 36, 10, 0.22) 0%, transparent 100%), radial-gradient(ellipse 16px 24px at 94% 8%, rgba(74, 30, 8, 0.18) 0%, transparent 100%), radial-gradient(ellipse 24px 16px at 32% 55%, rgba(66, 25, 8, 0.15) 0%, transparent 100%);
--plaque-tarnish-bg: radial-gradient(ellipse 60px 30px at 15% 70%, rgba(124, 62, 24, 0.14) 0%, transparent 100%), radial-gradient(ellipse 40px 50px at 82% 20%, rgba(100, 48, 18, 0.16) 0%, transparent 100%), radial-gradient(ellipse 50px 25px at 70% 60%, rgba(118, 57, 22, 0.10) 0%, transparent 100%);
--plaque-edges-bg: radial-gradient(ellipse 220px 90px at 50% 0%, rgba(136, 72, 30, 0.10) 0%, transparent 70%), radial-gradient(ellipse 200px 80px at 50% 100%, rgba(118, 57, 22, 0.08) 0%, transparent 70%);
--plaque-screw-bg: radial-gradient(circle at 38% 35%, rgba(84, 58, 32, 1) 0%, rgba(52, 27, 12, 1) 60%, rgba(26, 12, 6, 1) 100%);
--plaque-text: rgba(80, 33, 10, 1);
--card-grad-1: rgba(224, 209, 170, 1);
--card-grad-2: rgba(209, 187, 141, 1);
--card-border: rgba(var(--light), 0.25);
--card-shadow-out: rgba(var(--light), 0.5);
--card-corner: rgba(var(--light), 0.25);
--button-corner: rgba(var(--light), 0.5);
--label-text: rgba(var(--text), 1);
--menu-border: rgba(var(--light), 0.15);
--menu-sep: rgba(var(--light), 0.15);
--shelf-wrap-shade: rgba(var(--black), 0.10);
--shelf-wrap-shadow: rgba(var(--black), 0.28);
--shelf-wrap-top: rgba(var(--white), 0.10);
--shelf-wrap-hover-bg: rgba(201, 176, 138, 1);
--shelf-title-hover: rgba(15, 5, 0, 1);
--shelf-meta-line-1: rgba(var(--black), 0.14);
--shelf-meta-line-2: rgba(var(--white), 0.18);
--shelf-meta-shadow: rgba(var(--white), 0.10);
--shelf-icon-color: rgba(var(--text), 0.8);
--joined-scrollbar-thumb: rgba(var(--shelf-light), 0.3);
--joined-scrollbar-thumb-hover: rgba(var(--shelf-light), 1);
--footer: var(--bg);
}
:root.ap-light .plaque-prisms { background: linear-gradient(125deg, transparent 0%, transparent 22%, rgba(200, 32, 105, 0.0) 22%, rgba(200, 32, 105, 0.16) 26%, rgba(234, 120, 28, 0.18) 29%, rgba(252, 207, 25, 0.14) 32%, rgba(27, 117, 147, 0.10) 34%, rgba(28, 75, 136, 0.06) 36%, rgba(28, 75, 136, 0.0) 39%, transparent 39%, transparent 61%, rgba(28, 75, 136, 0.0) 61%, rgba(28, 75, 136, 0.10) 64%, rgba(116, 64, 138, 0.20) 66%, rgba(200, 32, 105, 0.18) 69%, rgba(252, 207, 25, 0.10) 72%, rgba(252, 207, 25, 0.0) 76%, transparent 76% ); }

/* VARIABLES - prefers-light-mode */
@media (prefers-color-scheme: light) {
:root:not(.ap-dark) {
--bg: 235, 217, 173;
--light: 0, 0, 0;
--dark: 255, 255, 255;
--text: 48, 30, 16;
--link: 80, 24, 3;
--shelf-dark: 18, 5, 0;
--shelf-mid: 52, 14, 0;
--shelf-light: 58, 26, 6;
--bookcase-edge: rgba(106, 37, 8, 0.8);
--plaque-bg: radial-gradient(ellipse 200px 80px at 12% 35%, rgba(94, 41, 12, 0.6) 0%, transparent 100%), radial-gradient(ellipse 160px 120px at 85% 65%, rgba(66, 25, 8, 0.5) 0%, transparent 100%), radial-gradient(ellipse 120px 60px at 50% 10%, rgba(80, 32, 9, 0.4) 0%, transparent 100%), radial-gradient(ellipse 100px 80px at 25% 88%, rgba(60, 21, 7, 0.45) 0%, transparent 100%), linear-gradient(162deg, rgba(98, 43, 13, 1) 0%, rgba(66, 25, 8, 1) 12%, rgba(90, 38, 11, 1) 22%, rgba(58, 20, 6, 1) 35%, rgba(82, 34, 9, 1) 48%, rgba(52, 14, 0, 1) 60%, rgba(78, 32, 9, 1) 72%, rgba(58, 20, 6, 1) 85%, rgba(70, 28, 8, 1) 100%);
--plaque-border-top: rgba(96, 44, 14, 1);
--plaque-border-left: rgba(90, 40, 12, 1);
--plaque-border-bottom: rgba(24, 8, 2, 1);
--plaque-border-right: rgba(28, 10, 3, 1);
--plaque-after-bg: radial-gradient(ellipse 30px 16px at 8% 18%, rgba(90, 38, 11, 0.25) 0%, transparent 100%), radial-gradient(ellipse 20px 28px at 88% 72%, rgba(78, 32, 9, 0.20) 0%, transparent 100%), radial-gradient(ellipse 36px 14px at 45% 92%, rgba(86, 36, 10, 0.22) 0%, transparent 100%), radial-gradient(ellipse 16px 24px at 94% 8%, rgba(74, 30, 8, 0.18) 0%, transparent 100%), radial-gradient(ellipse 24px 16px at 32% 55%, rgba(66, 25, 8, 0.15) 0%, transparent 100%);
--plaque-tarnish-bg: radial-gradient(ellipse 60px 30px at 15% 70%, rgba(124, 62, 24, 0.14) 0%, transparent 100%), radial-gradient(ellipse 40px 50px at 82% 20%, rgba(100, 48, 18, 0.16) 0%, transparent 100%), radial-gradient(ellipse 50px 25px at 70% 60%, rgba(118, 57, 22, 0.10) 0%, transparent 100%);
--plaque-edges-bg: radial-gradient(ellipse 220px 90px at 50% 0%, rgba(136, 72, 30, 0.10) 0%, transparent 70%), radial-gradient(ellipse 200px 80px at 50% 100%, rgba(118, 57, 22, 0.08) 0%, transparent 70%);
--plaque-screw-bg: radial-gradient(circle at 38% 35%, rgba(84, 58, 32, 1) 0%, rgba(52, 27, 12, 1) 60%, rgba(26, 12, 6, 1) 100%);
--plaque-text: rgba(80, 33, 10, 1);
--card-grad-1: rgba(224, 209, 170, 1);
--card-grad-2: rgba(209, 187, 141, 1);
--card-border: rgba(var(--light), 0.25);
--card-shadow-out: rgba(var(--light), 0.5);
--card-corner: rgba(var(--light), 0.25);
--button-corner: rgba(var(--light), 0.5);
--label-text: rgba(var(--text), 1);
--menu-border: rgba(var(--light), 0.15);
--menu-sep: rgba(var(--light), 0.15);
--shelf-wrap-shade: rgba(var(--black), 0.10);
--shelf-wrap-shadow: rgba(var(--black), 0.28);
--shelf-wrap-top: rgba(var(--white), 0.10);
--shelf-wrap-hover-bg: rgba(201, 176, 138, 1);
--shelf-title-hover: rgba(15, 5, 0, 1);
--shelf-meta-line-1: rgba(var(--black), 0.14);
--shelf-meta-line-2: rgba(var(--white), 0.18);
--shelf-meta-shadow: rgba(var(--white), 0.10);
--shelf-icon-color: rgba(var(--text), 0.8);
--joined-scrollbar-thumb: rgba(var(--shelf-light), 0.3);
--joined-scrollbar-thumb-hover: rgba(var(--shelf-light), 1);
--footer: var(--bg);
}
:root:not(.ap-dark) .plaque-prisms {  background: linear-gradient(125deg, transparent 0%, transparent 22%, rgba(200, 32, 105, 0.0) 22%, rgba(200, 32, 105, 0.16) 26%, rgba(234, 120, 28, 0.18) 29%, rgba(252, 207, 25, 0.14) 32%, rgba(27, 117, 147, 0.10) 34%, rgba(28, 75, 136, 0.06) 36%, rgba(28, 75, 136, 0.0) 39%, transparent 39%, transparent 61%, rgba(28, 75, 136, 0.0) 61%, rgba(28, 75, 136, 0.10) 64%, rgba(116, 64, 138, 0.20) 66%, rgba(200, 32, 105, 0.18) 69%, rgba(252, 207, 25, 0.10) 72%, rgba(252, 207, 25, 0.0) 76%, transparent 76% ); }
:root:not(.ap-dark) .window img.window-dark { display: none; }
:root:not(.ap-dark) .window img.window-light { display: block; }}

/* FONTS */
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: normal; font-weight: 100; src: url('../fonts/fraunces-v38-latin_latin-ext-100.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: italic; font-weight: 100; src: url('../fonts/fraunces-v38-latin_latin-ext-100italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: normal; font-weight: 200; src: url('../fonts/fraunces-v38-latin_latin-ext-200.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: italic; font-weight: 200; src: url('../fonts/fraunces-v38-latin_latin-ext-200italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: normal; font-weight: 300; src: url('../fonts/fraunces-v38-latin_latin-ext-300.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: italic; font-weight: 300; src: url('../fonts/fraunces-v38-latin_latin-ext-300italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: normal; font-weight: 400; src: url('../fonts/fraunces-v38-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: italic; font-weight: 400; src: url('../fonts/fraunces-v38-latin_latin-ext-italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: normal; font-weight: 500; src: url('../fonts/fraunces-v38-latin_latin-ext-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: italic; font-weight: 500; src: url('../fonts/fraunces-v38-latin_latin-ext-500italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: normal; font-weight: 600; src: url('../fonts/fraunces-v38-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: italic; font-weight: 600; src: url('../fonts/fraunces-v38-latin_latin-ext-600italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: normal; font-weight: 700; src: url('../fonts/fraunces-v38-latin_latin-ext-700.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: italic; font-weight: 700; src: url('../fonts/fraunces-v38-latin_latin-ext-700italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: normal; font-weight: 800; src: url('../fonts/fraunces-v38-latin_latin-ext-800.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: italic; font-weight: 800; src: url('../fonts/fraunces-v38-latin_latin-ext-800italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: normal; font-weight: 900; src: url('../fonts/fraunces-v38-latin_latin-ext-900.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Fraunces'; font-style: italic; font-weight: 900; src: url('../fonts/fraunces-v38-latin_latin-ext-900italic.woff2') format('woff2'); }

/* BODY */
:target { scroll-margin-top: 45px; }
body { background: rgba(var(--black), 1) url('../img/bg.png') fixed repeat; color: rgba(var(--text), 1); font-family: var(--ap-ui-font); font-size: 16px; font-weight: 400; line-height: 1.4; margin: 3vh calc(42px + 2.5vw) 0 calc(42px + 0.5vw); padding-top: 45px; text-align: center; }

/* BODY - Links */
a { color: rgba(var(--link), 1); font-style: italic; font-weight: 600;  transition: all 0.3s linear; }
a:hover { color: rgba(var(--light), 1); transition: all 0.3s linear; }

/* BODY - Headings */
h2 { display: block; color: var(--label-text); font-size: 0.7rem; letter-spacing: 0.22em; margin-bottom: 12px; text-transform: uppercase; }

/* BODY - Buttons */
.btn { display: inline-flex; justify-content: center; align-items: center;  gap: 5px; background: linear-gradient(180deg, rgba(var(--shelf-light), 1) 0%, rgba(var(--shelf-mid), 1) 55%, rgba(var(--shelf-dark), 1) 100%); border-bottom: 1px solid rgba(var(--black), 0.6); border-left: 1px solid rgba(var(--white), 0.03); border-radius: 3px; border-right: 1px solid rgba(var(--black), 0.4); border-top: 1px solid rgba(var(--white), 0.08); box-shadow: 0 6px 14px -5px rgba(var(--black), 0.75), inset 0 1px 0 rgba(var(--white), 0.06); color: rgba(var(--footer), 0.5); cursor: pointer; font-family: var(--ap-ui-font); font-size: 0.85rem; font-weight: 600; font-style: italic; letter-spacing: 0.08em; overflow: hidden; padding: 11px 26px; position: relative; text-decoration: none; text-transform: uppercase; transition: all 0.3s linear; }
.btn::after { background: linear-gradient(225deg, var(--button-corner) 50%, transparent 50%); border-radius: 0 3px 0 0; content: ''; height: 16px; opacity: 0; position: absolute; right: 0; top: 0; transition: opacity 0.3s linear; width: 16px; }
.btn:hover { color: rgba(var(--footer), 0.7); transform: translate(1px, 1px); }
.btn:hover::after { opacity: 1; }
.btn i { color: rgba(var(--footer), 0.2); }

/* BODY - Details */
details summary { color: var(--label-text); cursor: pointer; font-size: 0.7rem; letter-spacing: 0.22em; list-style: none; text-transform: uppercase; }
details > summary:hover { cursor: pointer; }
details summary::marker, details.notes summary::-webkit-details-marker { display: none; }
details summary::before { content: "\2b"; font: var(--fa-font-sharp-light); font-size: 0.7rem; padding-right: 10px; }
details[open] summary::before { content: "\2d"; }
details[open] summary { margin-bottom: 1rem; }

/* BODY - Etc */
.empty { font-size: 1rem; }

/* STRUCTURE */
.library { margin: 0 auto; max-width: 1050px; }
.bookcase { background: rgba(var(--bg), 1); border-left: var(--frame-w) solid var(--bookcase-frame); border-right: var(--frame-w) solid var(--bookcase-frame); border-radius: 0; box-shadow: 1px 0 0 var(--bookcase-edge), -1px 0 0 var(--bookcase-edge), inset 0 0 0 2px rgba(var(--black), 1), inset 0 0 36px rgba(var(--black), 1); margin: 0 auto; max-width: 1048px; overflow: hidden; position: relative; text-align: left; }

/* HEADER */
.window img { display: block; aspect-ratio: 1047 / 568; height: auto; width: 100%; }
.window img.window-light { display: none; }
:root.ap-light .window img.window-dark { display: none; }
:root.ap-light .window img.window-light { display: block; }
.crown { background: var(--shelf-bg); position: relative; padding: 24px 34px 26px; }
.crown::after { content: ''; display: block; background: linear-gradient(180deg, rgba(var(--shelf-light), 1) 0%, rgba(var(--shelf-mid), 1) 55%, rgba(var(--shelf-dark), 1) 100%); border-top: 2px solid rgba(var(--white), 0.03); box-shadow: inset 0 1px 0 rgba(var(--white), 0.06), 0 9px 12px -5px rgba(var(--black),0.75); height: 24px; position: absolute; bottom: 0; left: 0; right: 0; }

/* HEADER - Plaque */
.plaque-wrap { display: flex; align-items: center; justify-content: center; }
.plaque-frame { display: contents; }
.plaque { display: inline-flex; align-items: center; justify-content: center; background: var(--plaque-bg); border-top: 2px solid var(--plaque-border-top); border-left: 2px solid var(--plaque-border-left); border-bottom: 3px solid var(--plaque-border-bottom); border-right: 2px solid var(--plaque-border-right); border-radius: 3px; box-shadow: 0 6px 28px rgba(var(--black), 0.85), 0 2px 6px  rgba(var(--black), 0.6), inset 0  5px 7px -4px rgba(var(--black), 0.55), inset 0 -5px 7px -4px rgba(var(--black), 0.45), inset  5px 0 7px -4px rgba(var(--black), 0.40), inset -5px 0 7px -4px rgba(var(--black), 0.40), inset 0 1px 0 rgba(var(--white), 0.06); overflow: hidden; padding: 20px 46px; position: relative; width: 100%; }
.plaque::before { content: ''; border-top: 1px solid rgba(var(--black), 0.55); border-left: 1px solid rgba(var(--black), 0.45); border-bottom: 1px solid rgba(var(--white), 0.05); border-right: 1px solid rgba(var(--white), 0.06); border-radius: 2px; inset: 8px; position: absolute; z-index: 1; }
.plaque::after { content: ''; background: var(--plaque-after-bg); inset: 0; mix-blend-mode: multiply; position: absolute; z-index: 2; }
.plaque-groove { background: repeating-linear-gradient(180deg, transparent 0px, transparent 2px, rgba(var(--black), 0.10) 2px, rgba(var(--black), 0.10) 3px); inset: 0; opacity: 0.5; position: absolute; z-index: 6; }
.plaque-prisms { background: linear-gradient(125deg, transparent 0%, transparent 24%, rgba(200,32,105,0.0) 24%, rgba(200,32,105,0.05) 27%, rgba(234,120,28,0.06) 29%, rgba(252,207,25,0.04) 31%, rgba(27,117,147,0.03) 33%, rgba(28,75,136,0.02) 35%, rgba(28,75,136,0.0) 38%, transparent 38%, transparent 62%, rgba(28,75,136,0.0) 62%, rgba(28,75,136,0.04) 65%, rgba(116,64,138,0.07) 67%, rgba(200,32,105,0.06) 69%, rgba(252,207,25,0.02) 71%, rgba(252,207,25,0.0) 74%, transparent 74%); filter: blur(10px); inset: -60px; mix-blend-mode: screen opacity: 1; position: absolute; z-index: 5; }
.plaque-tarnishing { background: var(--plaque-tarnish-bg); inset: 0; mix-blend-mode: multiply; pointer-events: none; position: absolute; z-index: 7; }
.plaque-edges { background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(var(--black), 0.40) 100%), var(--plaque-edges-bg); inset: 0; position: absolute; z-index: 8; }
.plaque-screw { background: var(--plaque-screw-bg); border-radius: 50%; box-shadow: 0 1px 3px rgba(var(--black), 0.9), inset 0 1px 2px rgba(var(--white), 0.06), inset 0 -1px 2px rgba(var(--black), 0.8); flex-shrink: 0; height: 12px; position: absolute; top: 50%; transform: translateY(-50%); width: 12px; z-index: 3; }
.plaque-screw-left { left: 22px; }
.plaque-screw-right { right: 22px; }
.plaque-text { color: var(--plaque-text); font-family: 'Fraunces', 'Literata', serif; font-size: clamp(17.6px, 0.8rem + 1.5vw, 32px) !important; font-size-adjust: none; font-weight: 600; letter-spacing: 0.08em; margin: 0; position: relative; text-align: center; text-shadow: -1px -1px 0 rgba(var(--white), 0.07), -1px 0 0 rgba(var(--white), 0.04), 1px 1px 0 rgba(var(--black), 0.9), 1px 0 0 rgba(var(--black), 0.7), 2px 3px 4px rgba(var(--black), 0.55); text-transform: uppercase; z-index: 4; }

/* HEADER - Welcome */
.welcome { display: flex; gap: 1rem; flex-wrap: wrap; }
.blurb, .info, details { background: linear-gradient(160deg, var(--card-grad-1) 0%, var(--card-grad-2) 100%); border: 1px solid var(--card-border); border-radius: 3px; box-shadow: inset 0 1px 0 var(--card-shadow-in), 0 2px 14px var(--card-shadow-out); margin-bottom: 18px; padding: 20px 24px 22px; position: relative;}
.blurb::before, .info::before, details::before { content: ''; background: linear-gradient(225deg, var(--card-corner) 50%, transparent 50%); border-radius: 0 3px 0 0; height: 22px; position: absolute; top: 0; right: 0; width: 22px; }
.blurb p, .info p, .notes p { color: rgba(var(--text), 1); font-size: 1rem; font-weight: 400; line-height: 1.8; }
.blurb p + p, .info p + p, .notes p + p { margin-top: 12px; }
.blurb { flex: 1; }
.info { max-width: 33%; }

/* MENU */
.menu { display: flex; flex-wrap: wrap; gap: 5px 12px; border-top: 1px solid var(--menu-border); border-bottom: 1px solid var(--menu-border); line-height: 1.8; margin-bottom: 20px; padding: 12px 4px; }
.menu a { display: inline-flex; align-items: center; color: rgba(var(--link), 1); font-size: 1rem; font-style: italic; letter-spacing: 0.04em; text-decoration: none; transition: all 0.3s linear; white-space: nowrap; }
.menu a:hover { color: rgba(var(--light), 1); transition: all 0.3s linear; }
.menu .num { color: var(--menu-num); font-size: 0.75rem; font-style: normal; font-weight: 300; margin-right: 5px; }
.menu .sep { color: var(--menu-sep); font-style: normal; user-select: none; }

/* SHELVES */
.shelf { position: relative; }
.shelf::after { content: ''; display: block; background: linear-gradient(180deg, rgba(var(--shelf-light), 1) 0%, rgba(var(--shelf-mid), 1) 55%, rgba(var(--shelf-dark), 1) 100%); border-top: 2px solid rgba(var(--white), 0.03); box-shadow: inset 0 1px 0 rgba(var(--white), 0.06), 0 9px 12px -5px rgba(var(--black),0.75); height: 24px; position: relative; z-index: 3; }
.shelves .shelf:last-child::after { display: none; }
.shelf-wrap { display: flex; flex-direction: row; align-items: stretch; background: linear-gradient(180deg, var(--shelf-wrap-shade) 0%, transparent 14%, transparent 86%, var(--shelf-wrap-shade) 100%), var(--shelf-wrap-bg); box-shadow: inset 22px 0 30px -26px var(--shelf-wrap-shadow), inset -22px 0 30px -26px var(--shelf-wrap-shadow); color: inherit; height: 8.125rem; overflow: hidden; position: relative; scroll-margin-top: 65px; text-decoration: none; transition: all 0.3s linear; }
.shelf-wrap::before { content: ''; background: var(--shelf-wrap-top); height: 1px; position: absolute; top: 0; left: 0; right: 0; }
.shelf-wrap:hover { background: linear-gradient(180deg, var(--shelf-wrap-shade) 0%, transparent 14%, transparent 86%, var(--shelf-wrap-shade) 100%), var(--shelf-wrap-hover-bg); transition: all 0.3s linear; }
.shelf-wrap:hover .shelf-title { color: var(--shelf-title-hover); }
.shelf-meta { display: flex; flex: 0 0 340px; align-items: center; gap: 16px; padding: 0 24px 0 30px; position: relative; }
.shelf-meta::after { content: ''; background: linear-gradient(90deg, var(--shelf-meta-line-1), var(--shelf-meta-line-2)); box-shadow: 1px 0 0 var(--shelf-meta-shadow); position: absolute; top: 10px; bottom: 10px; right: 0; width: 3px; }
a.shelf-meta { color: rgba(var(--text), 1); font-style: normal; font-weight: normal; letter-spacing: 0; text-decoration: none; }
.shelf-icon { color: var(--shelf-icon-color); font-size: clamp(20px, 1.6rem, 30px); flex-shrink: 0; text-align: center; width: 50px; }
.shelf-text { flex: 1; }
.shelf-title { font-size: clamp(20px, 1.6rem, 30px); font-weight: 400; letter-spacing: 0.01em; line-height: 1.2; transition: all 0.3s linear; }
.shelf-desc { color: rgba(var(--text), 0.8); font-size: clamp(13px, 1rem, 20px); font-style: italic; line-height: 1.4; margin-top: 4px; }
.books { display: flex; flex: 1; flex-direction: row; align-items: flex-end; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 0 20px 4px 12px; }
.book { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 2px 3px 3px 2px; box-shadow: inset -3px 0 6px rgba(var(--black), 0.35), 1px 0 0 rgba(var(--white), 0.07); cursor: pointer;  font-style: normal; font-weight: normal; height: 6.875rem; letter-spacing: 0;position: relative; text-decoration: none; transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease; width: 1.875rem; }
.book:hover { box-shadow: inset -3px 0 6px rgba(var(--black), 0.35), 3px 0 12px rgba(var(--black), 0.55); filter: brightness(1.35); transform: translateY(-7px) scaleX(1.05); transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease; z-index: 2; }
.book span { display: block; color: rgba(232, 220, 200, 0.75); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; max-height: 92%; overflow: hidden; padding: 0 2px; pointer-events: none; text-overflow: ellipsis; transform: rotate(180deg); user-select: none; white-space: nowrap; writing-mode: vertical-rl; }
.book.void { background: linear-gradient(160deg, rgba(40, 40, 40, 1), rgba(21, 21, 21, 1)) !important; color: rgba(240, 233, 220, 0.92)!important; }
.book:nth-child(12n+1) { background: linear-gradient(160deg, rgba(178, 50, 96, 1), rgba(126, 34, 66, 1)); }
.book:nth-child(12n+2) { background: linear-gradient(160deg, rgba(154, 44, 38, 1), rgba(108, 32, 26, 1)); }
.book:nth-child(12n+3) { background: linear-gradient(160deg, rgba(184, 98, 26, 1), rgba(130, 66, 18, 1)); }
.book:nth-child(12n+4) { background: linear-gradient(160deg, rgba(188, 132, 22, 1), rgba(132, 90, 16, 1)); }
.book:nth-child(12n+5) { background: linear-gradient(160deg, rgba(182, 151, 24, 1), rgba(128, 102, 16, 1)); }
.book:nth-child(12n+6) { background: linear-gradient(160deg, rgba(132, 148, 32, 1), rgba(90, 102, 22, 1)); }
.book:nth-child(12n+7) { background: linear-gradient(160deg, rgba(56, 124, 52, 1), rgba(38, 86, 38, 1)); }
.book:nth-child(12n+8) { background: linear-gradient(160deg, rgba(44, 112, 86, 1), rgba(30, 78, 60, 1)); }
.book:nth-child(12n+9) { background: linear-gradient(160deg, rgba(38, 98, 124, 1), rgba(26, 68, 86, 1)); }
.book:nth-child(12n+10) { background: linear-gradient(160deg, rgba(40, 62, 112, 1), rgba(28, 44, 78, 1)); }
.book:nth-child(12n+11) { background: linear-gradient(160deg, rgba(76, 52, 108, 1), rgba(52, 36, 76, 1)); }
.book:nth-child(12n+12) { background: linear-gradient(160deg, rgba(114, 50, 110, 1), rgba(80, 34, 76, 1)); }
.book:nth-child(12n+3) span, .book:nth-child(12n+4) span, .book:nth-child(12n+5) span, .book:nth-child(12n+6) span { color: rgba(18, 14, 8, 0.92); }
.book.void span { color: rgba(240, 233, 220, 0.92)!important; }

/* JOINED */
.joined-wrap { align-items: stretch; height: auto; min-height: 8.125rem; }
.joined-panels { align-items: stretch; display: flex; flex: 1; flex-direction: row; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 12px 20px 12px 12px; }
.joined-panel { background: linear-gradient(160deg, var(--card-grad-1) 0%, var(--card-grad-2) 100%); border: 1px solid var(--card-border); border-radius: 3px; box-shadow: inset 0 1px 0 var(--card-shadow-in), 0 2px 14px var(--card-shadow-out); flex: 1 1 0; min-width: 200px; padding: 14px 18px 16px; position: relative; }
.joined-panel::before { background: linear-gradient(225deg, var(--card-corner) 50%, transparent 50%); border-radius: 0 3px 0 0; content: ''; height: 20px; position: absolute; right: 0; top: 0; width: 20px; }
.joined-panel .welcome-label { margin-bottom: 8px; }
.joined-scroll { font-size: 0.95rem; max-height: 5.6rem; overflow-x: hidden; overflow-y: auto; padding-right: 6px; scrollbar-color: var(--joined-scrollbar-thumb) transparent; scrollbar-width: thin; }
.joined-scroll::-webkit-scrollbar { width: 6px; }
.joined-scroll::-webkit-scrollbar-track { background: transparent!important; border: none!important; }
.joined-scroll::-webkit-scrollbar-thumb { background: var(--joined-scrollbar-thumb)!important; border: none!important; border-radius: 3px; box-shadow: none!important; }
.joined-scroll::-webkit-scrollbar-thumb:hover { background: var(--joined-scrollbar-thumb-hover)!important; }
.joined-scroll::-webkit-scrollbar-corner { background: transparent!important; }
.joined-scroll a { font-style: normal; text-decoration: none; }
.joined-scroll.rings, .joined-scroll.cliques, #adhdring { text-align: center!important; }
.joined-scroll .ring, .joined-scroll hr { border: 0; border-bottom: 1px solid var(--card-border); margin-bottom: 5px; padding-bottom: 5px; }

/* PAGES */
.page-intro { margin-bottom: 20px; }
.page-intro p, .oops p { color: rgba(var(--text), 1); font-size: 1rem; font-weight: 400; line-height: 1.8; }
.page-intro p + p, .oops p + p { margin-top: 12px; }
.oops { padding: 24px 34px 26px; }
.oops ul { font-size: 1rem; line-height: 1.8; margin-left: 1.5rem; }
.empty { font-size: 1rem; }

/* PAGES - Sitemap */
.sitemap { background: linear-gradient(180deg, var(--shelf-wrap-shade) 0%, transparent 14%, transparent 86%, var(--shelf-wrap-shade) 100%), var(--shelf-wrap-bg); box-shadow: inset 22px 0 30px -26px var(--shelf-wrap-shadow), inset -22px 0 30px -26px var(--shelf-wrap-shadow); padding: 24px 34px 26px; }
.sitemap ul { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sitemap li a { background: linear-gradient(160deg, var(--card-grad-1) 0%, var(--card-grad-2) 100%); border: 1px solid var(--card-border); border-left: 5px solid var(--card-border); border-radius: 3px; box-shadow: inset 0 1px 0 var(--card-shadow-in), 0 2px 14px var(--card-shadow-out); display: block; padding: 14px 22px; text-decoration: none; transition: all 0.3s linear; }
.sitemap li a:hover { background: linear-gradient(160deg, var(--card-grad-2) 0%, var(--card-grad-1) 100%); transition: all 0.3s linear; }
.sitemap li a:hover .item > div:first-child { color: var(--shelf-title-hover); transition: all 0.3s linear; }
.sitemap .item { align-items: center; display: flex; gap: 10px; }
.sitemap .item > div:first-child { color: rgba(var(--text), 1); flex: 0 0 auto; font-size: 1.3rem; font-weight: 500; letter-spacing: 0.01em; transition: all 0.3s linear; }
.sitemap .item .sep { border-bottom: 1px dashed var(--menu-sep); flex: 1; height: 0; margin: 0 4px; }
.sitemap .item i { color: var(--sm-color); flex: 0 0 auto; font-size: 1rem; text-align: center; width: 20px; }
.sitemap .desc { color: rgba(var(--text), 0.8); font-size: 0.9rem; font-style: italic; line-height: 1.4; margin-top: 6px; }
.sitemap li a.ne .item > div:first-child::after { content: " ↗"; font-style: normal; }
.sitemap-divider { text-align: center; margin-top: 12px; }

/* PAGES - Update Log */
.updates { display: flex; flex-direction: column; gap: 20px; background: linear-gradient(180deg, var(--shelf-wrap-shade) 0%, transparent 14%, transparent 86%, var(--shelf-wrap-shade) 100%), var(--shelf-wrap-bg); box-shadow: inset 22px 0 30px -26px var(--shelf-wrap-shadow), inset -22px 0 30px -26px var(--shelf-wrap-shadow); padding: 24px 34px 26px; }
.update-entry { background: linear-gradient(160deg, var(--card-grad-1) 0%, var(--card-grad-2) 100%); border: 1px solid var(--card-border); border-radius: 3px; box-shadow: inset 0 1px 0 var(--card-shadow-in), 0 2px 14px var(--card-shadow-out); display: flex; gap: 20px; padding: 18px 24px; position: relative; }
.update-entry::before { background: linear-gradient(225deg, var(--card-corner) 50%, transparent 50%); border-radius: 0 3px 0 0; content: ''; height: 20px; position: absolute; right: 0; top: 0; width: 20px; }
.update-date { align-items: center; border-right: 1px solid var(--card-border); color: rgba(var(--text), 1); display: flex; flex: 0 0 130px; flex-direction: column; font-weight: 600; justify-content: center; letter-spacing: 0.04em; padding-right: 20px; text-align: center; }
.update-date .day { font-size: 1.8rem; line-height: 1; }
.update-date .month-year { font-size: 0.75rem; font-style: italic; letter-spacing: 0.12em; margin-top: 4px; text-transform: uppercase; }
.update-body { flex: 1; }
.update-body ul { list-style: none; margin: 0; padding: 0; }
.update-body li { color: rgba(var(--text), 1); font-size: 0.95rem; line-height: 1.7; padding-left: 16px; position: relative; }
.update-body li::before { color: var(--card-border); content: '·'; left: 0; position: absolute; }

/* PAGES - Guestbook */
.guestbook { background: linear-gradient(180deg, var(--shelf-wrap-shade) 0%, transparent 14%, transparent 86%, var(--shelf-wrap-shade) 100%), var(--shelf-wrap-bg); box-shadow: inset 22px 0 30px -26px var(--shelf-wrap-shadow), inset -22px 0 30px -26px var(--shelf-wrap-shadow); padding: 24px 34px 26px; }
.guestbook-sign { background: linear-gradient(160deg, var(--card-grad-1) 0%, var(--card-grad-2) 100%); border: 1px solid var(--card-border); border-radius: 3px; box-shadow: inset 0 1px 0 var(--card-shadow-in), 0 2px 14px var(--card-shadow-out); padding: 20px 24px 22px; position: relative; }
.guestbook-sign::before { background: linear-gradient(225deg, var(--card-corner) 50%, transparent 50%); border-radius: 0 3px 0 0; content: ''; height: 22px; position: absolute; right: 0; top: 0; width: 22px; }
.guestbook-entries { display: flex; flex-direction: column; gap: 20px; margin: 20px 0 22px 0; }
.guestbook-entries .q { background: linear-gradient(160deg, var(--card-grad-1) 0%, var(--card-grad-2) 100%); border: 1px solid var(--card-border); border-left: 5px solid var(--card-corner); border-radius: 3px; box-shadow: inset 0 1px 0 var(--card-shadow-in), 0 2px 14px var(--card-shadow-out); color: rgba(var(--text), 1); font-size: 1rem; line-height: 1.7; padding: 16px 24px; position: relative; }
.guestbook-entries .q::before { content: ''; background: linear-gradient(225deg, var(--card-corner) 50%, transparent 50%); border-radius: 0 3px 0 0; height: 20px; position: absolute; right: 0; top: 0; width: 20px; }
.guestbook-entries .en { align-items: baseline; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-bottom: 8px; }
.guestbook-entries .en .signed, .guestbook-entries .en .date { color: var(--label-text); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap }
.guestbook-entries .en .name { font-size: 1.15rem; font-style: italic; font-weight: 600; letter-spacing: 0; text-transform: initial; }
.guestbook-entries .en .name a { text-decoration: none; }
.guestbook-entries .an { background: rgba(var(--bg), 1); border: 1px solid var(--card-border); border-radius: 3px; padding: 3px 7px; margin-top: 10px; }

/* PAGES - Search */
.search { background: linear-gradient(180deg, var(--shelf-wrap-shade) 0%, transparent 14%, transparent 86%, var(--shelf-wrap-shade) 100%), var(--shelf-wrap-bg); box-shadow: inset 22px 0 30px -26px var(--shelf-wrap-shadow), inset -22px 0 30px -26px var(--shelf-wrap-shadow); padding: 24px 34px 26px; }
.searchform form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 1rem; }
.searchform input[type="text"] { flex: 1; }
.search span { font-size: 0.8rem; }

/* NAVIGATION */
.page-navi { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; font-size: 0.8rem; margin: 10px 0; }
.page-navi a { background: var(--card-grad-2); border: 1px solid var(--card-border); border-radius: 2px; font-style: normal; padding: 2px 7px; text-decoration: none; }
.page-navi a:hover { background: var(--card-grad-1); }
.page-navi i { font-size: 0.55rem; }
.page-navi-ellipsis { padding: 2px 7px; }
.page-navi-current { background: var(--card-grad-1); border: 1px solid var(--card-border); border-radius: 2px; font-weight: 700; padding: 2px 7px; }

/* FORMS */
form p { margin-bottom: 18px; }
form p:last-of-type { margin-bottom: 0; }
form input[type="text"], form input[type="url"], form textarea { background: rgba(var(--bg), 0.35); border: 1px solid var(--menu-border); border-radius: 3px; color: rgba(var(--text), 1); font-family: 'Fraunces', 'Literata', serif; font-size: 0.95rem; font-weight: 400; padding: 10px 14px; transition: border-color 0.3s linear, background 0.3s linear; width: 100%; }
form textarea { line-height: 1.5; min-height: 100px; resize: vertical; }
form input[type="text"]::placeholder, form input[type="url"]::placeholder, form textarea::placeholder { color: rgba(var(--text), 0.5); font-style: italic; }
form input[type="text"]:hover, form input[type="url"]:hover, form textarea:hover { border-color: rgba(var(--light), 0.3); }
form input[type="text"]:focus, form input[type="url"]:focus, form textarea:focus { background: rgba(var(--bg), 0.55); border-color: rgba(var(--link), 0.6); outline: none; }
.form-message, .form-errors, .field-error { font-size: 1rem!important; padding-bottom: 1rem; }
.field-error { display: block; }

/* FOOTER */
.base { display: flex; justify-content: space-between; align-items: center; background: rgba(var(--shelf-mid), 1); box-shadow: inset 3px 0 0 rgba(var(--black), 0.35), inset -3px 0 0 rgba(var(--black), 0.35), inset 0 1px 0 rgba(var(--white), 0.06); color: rgba(var(--footer), 0.5); font-size: clamp(12px, 0.8rem, 18px);  height: 6vh; padding: 0 30px; position: relative; }
.base a { color: rgba(var(--footer), 0.5); font-style: normal; font-weight: normal; letter-spacing: 0; text-decoration: none; transition: all 0.3s linear; }
.base a:hover { color: rgba(var(--footer), 0.9); transition: all 0.3s linear; }

/* ACCESSIBILITY - Tab */
.ap-trigger { background: radial-gradient(ellipse 200px 80px at 12% 35%, rgba(13, 13, 13, 0.6) 0%, transparent 100%), radial-gradient(ellipse 160px 120px at 85% 65%, rgba(8, 8, 8, 0.5) 0%, transparent 100%), radial-gradient(ellipse 120px 60px at 50% 10%, rgba(11, 11, 11, 0.4) 0%, transparent 100%), radial-gradient(ellipse 100px 80px at 25% 88%, rgba(7, 7, 7, 0.45) 0%, transparent 100%), linear-gradient(162deg, rgba(15, 15, 15, 1) 0%, rgba(8, 8, 8, 1) 12%, rgba(13, 13, 13, 1) 22%, rgba(6, 6, 6, 1) 35%, rgba(12, 12, 12, 1) 48%, rgba(5, 5, 5, 1) 60%, rgba(11, 11, 11, 1) 72%, rgba(6, 6, 6, 1) 85%, rgba(9, 9, 9, 1) 100%); border: none; border-radius: 0 3px 3px 0; box-shadow: inset 0 4px 6px -4px rgba(0, 0, 0, 0.55), inset 0 -4px 6px -4px rgba(0, 0, 0, 0.45), inset 4px 0 6px -4px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 28px rgba(0, 0, 0, 0.85); clip-path: none; color: rgba(128, 128, 128, 1); }
.ap-trigger::before { content: ''; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-left: 1px solid rgba(0, 0, 0, 0.45); border-radius: 1px; border-right: 1px solid rgba(255, 255, 255, 0.06); border-top: 1px solid rgba(0, 0, 0, 0.55);inset: 5px; pointer-events: none; position: absolute; z-index: 1; }
.ap-trigger:hover { filter: brightness(1.5); }
.ap-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ap-trigger i { color: rgba(128, 128, 128, 1); opacity: 0.85; position: relative; z-index: 2; }
.ap-trigger-label { color: rgba(128, 128, 128,1); font-family: var(--ap-ui-font); position: relative; z-index: 2; }

/* ACCESSIBILITY - Fonts */
:root.ap-font-sans body *:not(i):not([class*="fa-"]):not(.plaque-text), :root.ap-font-serif body *:not(i):not([class*="fa-"]):not(.plaque-text), :root.ap-font-mono body *:not(i):not([class*="fa-"]):not(.plaque-text) {font-family: var(--ap-font-family) !important; }
.ap-font-sans { font-size-adjust: 0.52; }
.ap-font-serif { font-size-adjust: 0.5; }
.ap-font-mono { font-size-adjust: 0.48; }

/* ACCESSIBILITY - Reduced Motion */
:root.ap-reduced-motion .book:hover { transform: none; transition: filter 0.18s ease, box-shadow 0.18s ease; }
:root.ap-reduced-motion .btn:hover { transform: none; }

/* RESPONSIVITY */
@media (max-width: 960px) {
.welcome { flex-direction: column; }
.info { max-width: 100%; }
.shelf-wrap { flex-direction: column; height: auto; align-items: center; }
.shelf-meta { flex: 0 0 auto; width: 100%; padding: 16px 24px 12px 24px; flex-direction: row; align-items: center; justify-content: center; text-align: left; }
.shelf-text { flex: 0 1 auto; }
.shelf-meta::after { top: auto; left: 10px; right: 10px; bottom: 0; width: auto; height: 3px; background: repeating-linear-gradient(180deg, transparent 0px, transparent 1px, var(--shelf-meta-line-1) 1px, var(--shelf-meta-line-2) 2px); box-shadow: 0 1px 0 var(--shelf-meta-shadow); }
.books { justify-content: center; padding: 8px 20px 12px 20px; }
.joined-panels { overflow-x: visible; padding: 12px 20px 12px 20px; width: 100%; }
.joined-panel { flex: 1 1 0; min-width: 0; }}
@media (max-width: 690px) {
.joined-panels  { flex-direction: column; }
.update-entry { flex-direction: column; gap: 8px; }
.update-date { border-right: none; border-bottom: 1px solid var(--card-border); flex: 0 0 0; flex-direction: row; gap: 8px; padding: 0 0 10px 0; }
.searchform form { flex-direction: column; }}