/* palimpsesto.css — For Aristoteles Palimpsesto III
   A digital collage for the mad archaeologist/card game poet.
   Layer atop base.css. Warning: Expect glorious chaos.
*/

/* -- PALIMPSESTO ROOT THEME COLORS -- */
:root {
    --bg: repeating-linear-gradient(135deg, #f7eedc 0 2%, #e6e2ce 2% 4%, #f7eedc 4% 6%);
    --bg-alt: #fff8ea;
    --card-bg: #e4ecec;
    --fg: #19161e;
    --accent: #db2861;
    --accent-alt: #284adf;
    --muted: #5b4b41;
    --weird-yellow: #ffe45e;
    --torn-edge: url('data:image/svg+xml;utf8,<svg width="150" height="10" xmlns="http://www.w3.org/2000/svg"><path d="M0,5 Q25,0 50,5 T100,5 T150,5 V10 H0 Z" fill="%23f7eedc"/></svg>');
    --collage-tape: url('data:image/svg+xml;utf8,<svg width="30" height="18" xmlns="http://www.w3.org/2000/svg"><rect width="30" height="18" fill="%23ffe45e" fill-opacity="0.47"/><rect x="6" y="3" width="18" height="12" fill="none" stroke="%235b4b41" stroke-width="2" stroke-dasharray="4,2"/></svg>');
    --collage-shadow: 0 2px 22px #846d5240;
}

/* BACKGROUND COLLAGE TEXTURE */
body, .page-wrap {
    background: var(--bg) fixed !important;
    color: var(--fg);
    font-family: 'IM Fell DW Pica', 'EB Garamond', 'Special Elite', 'Times New Roman', 'Georgia', serif;
    letter-spacing: 0.01em;
    /* Old paper effect */
    background-blend-mode: lighten, overlay;
}

aside {
    background: repeating-linear-gradient(-23deg, #eee4dc 0 9px, #dfdcce 10px 19px, #eee4dc 20px 29px);
    border-right: 2px dashed #db2861;
    font-family: 'Special Elite', 'IM Fell DW Pica', 'Georgia', serif;
    color: #3e2940;
    box-shadow: 12px 0 22px -8px #db286133, inset 0 0 18px #b2a67c11;
    /* Random collage effect: torn tape on edge */
    position: relative;
    z-index: 10;
}
aside::before {
    content: "";
    display: block;
    position: absolute;
    right: -22px; top: 7%;
    width: 30px; height: 44px;
    background: var(--collage-tape) no-repeat center center;
    opacity: 0.82;
    pointer-events: none;
    transform: rotate(7deg);
}

aside ul li a {
    color: #db2861;
    font-family: 'Special Elite', 'IM Fell DW Pica', serif;
    font-weight: 600;
    border-radius: 7px;
    font-size: 0.93em;
    padding-left: 1.3em;
    transition: background 0.17s, color 0.12s;
    border-left: 3.3px double #ffe45e;
    text-shadow: 0 0 6px #fff8;
    letter-spacing: 0.06em;
    box-shadow: 0 2px 0 #ffe45e44 inset;
}
aside ul li a.active,
aside ul li a:hover {
    background: linear-gradient(90deg, #ffe45e66 40%, #db286122 100%);
    color: #284adf;
    font-weight: bold;
    text-decoration: underline wavy #db2861;
    box-shadow: 0 0 8px #db286144;
}

aside ul.sub-links {
    list-style: none;
    padding-left: 1em;
    margin: 0.2em 0 0.4em;
    font-size: 0.85em;
}

aside ul.sub-links li a {
    text-transform: none;
    padding: 0.2em 0 0.2em 1.3em;
}

main {
    background: #fffdf6;
    box-shadow: var(--collage-shadow);
    border-radius: 27px 11px 37px 13px / 21px 21px 19px 29px;
    border: 7px double #e6e2ce;
    border-bottom: none;
    padding-bottom: 2.2em;
    margin-bottom: 1.1em;
    position: relative;
    overflow: visible;
    z-index: 5;
}
main::after {
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    background: var(--torn-edge) repeat-x left bottom;
    position: absolute;
    left: 0; bottom: -17px;
    opacity: 0.9;
    pointer-events: none;
    z-index: 2;
}

h1, h2, h3, h4 {
    font-family: 'IM Fell DW Pica', 'Special Elite', 'EB Garamond', serif;
    color: #db2861;
    letter-spacing: 0.09em;
    text-shadow: 0 2px 4px #ffe45e99, 0 0 7px #ffe45e33;
    margin-top: 1.1em;
    margin-bottom: 0.5em;
}
h1 {
    font-size: 2.45em;
    color: #19161e;
    background: linear-gradient(90deg, #ffe45e 60%, #e4ecec 100%);
    border-bottom: 4px double #db2861;
    display: inline-block;
    padding: 0.13em 0.77em 0.13em 0.22em;
    margin-top: 1.5em;
    box-shadow: 4px 2px 0 #e4ecec77;
    border-radius: 13px 0 16px 0 / 10px 0 7px 0;
}
h2 {
    color: #284adf;
    background: #ffe45e77;
    border-bottom: 2.7px dashed #db2861;
    padding: 0.15em 1.2em 0.15em 0.3em;
    display: inline-block;
    border-radius: 0 0 11px 4px;
}
h3, h4 {
    color: #db2861;
    text-shadow: 0 2px 4px #ffe45e77, 0 0 6px #ffe45e33;
}

button,
input[type="submit"],
input[type="button"] {
    background: linear-gradient(90deg, #ffe45e 20%, #db2861 100%);
    color: #19161e;
    border: 2.5px solid #19161e;
    box-shadow: 0 2px 10px #db286144, 0 2px 3px #ffe45e66 inset;
    font-family: 'Special Elite', 'IM Fell DW Pica', 'Georgia', serif;
    border-radius: 13px 1px 17px 3px / 11px 10px 8px 18px;
    font-weight: bold;
    letter-spacing: 0.09em;
    font-size: 1.11em;
    text-shadow: 0 1px 0 #fff8, 0 0 2px #ffe45e66;
    transition: background 0.15s, box-shadow 0.19s, border 0.17s;
    margin-top: 0.3em;
    margin-bottom: 0.5em;
}
button:hover,
input[type="submit"]:hover {
    background: linear-gradient(90deg, #fff8ea 10%, #284adf 100%);
    color: #db2861;
    border-color: #db2861;
    box-shadow: 0 0 14px #284adf77;
}
button:active,
input[type="submit"]:active {
    background: #db2861;
    color: #ffe45e;
    box-shadow: 0 1px 2px #db286133;
}

input,
textarea,
select {
    background: #fff9f0;
    color: #19161e;
    border: 1.9px dashed #db2861;
    border-radius: 11px 3px 9px 7px / 8px 13px 8px 7px;
    box-shadow: 0 1px 3px #ffe45e22;
    font-family: 'Special Elite', 'IM Fell DW Pica', 'Georgia', serif;
    letter-spacing: 0.02em;
    width: 100%;
    box-sizing: border-box;
}
input:focus,
textarea:focus,
select:focus {
    border-color: #284adf;
    background: #e6e2ce;
    outline: 2px solid #ffe45e;
}

pre, code, pre code {
    background: #e4ecec !important;
    color: #284adf !important;
    font-family: 'Fira Mono', 'Special Elite', 'JetBrains Mono', monospace;
    border-radius: 8px;
    box-shadow: 0 3px 12px #ffe45e77;
    font-size: 1em;
    letter-spacing: 0.03em;
}

.current, .active {
    color: #ffe45e !important;
    background: linear-gradient(90deg, #db2861 55%, #ffe45e 100%);
    box-shadow: 0 0 8px #db286188;
    border-radius: 11px;
    font-weight: bold;
    text-shadow: 0 0 3px #fff, 0 0 6px #ffe45e66;
}

footer {
    background: linear-gradient(90deg, #ffe45e 80%, #db2861 120%);
    color: #19161e;
    border-top: 2.5px solid #db2861;
    font-family: 'IM Fell DW Pica', 'Special Elite', 'Georgia', serif;
    letter-spacing: 0.12em;
    position: relative;
    box-shadow: 0 -1px 18px #db286111;
}

footer::after {
    /* Scrawled poetry torn-paper edge */
    content: "";
    display: block;
    width: 100%;
    height: 20px;
    background: var(--torn-edge) repeat-x left bottom;
    opacity: 0.7;
    margin-top: 0.4em;
    pointer-events: none;
}

::-webkit-scrollbar-thumb {
    background: #db2861;
    border-radius: 7px;
}
::-webkit-scrollbar-track {
    background: #ffe45e;
}

.help-entry {
    background: #e4ecec;
    border: 2.4px dashed #db2861;
    box-shadow: 0 2px 11px #ffe45e77;
    border-radius: 13px 3px 11px 9px;
    font-family: 'Special Elite', 'IM Fell DW Pica', 'Georgia', serif;
}
.help-entry .doc {
    background: #ffe45e;
    color: #284adf;
    border-left: 4.2px solid #db2861;
}
.help-entry pre, .help-entry pre code.python {
    background: #fff9e2;
    color: #db2861;
    box-shadow: 0 1px 3px #ffe45e55;
}
.help-entry a {
    color: #db2861;
    text-shadow: 0 0 4px #ffe45e99;
    border-bottom: 1.7px dotted #284adf;
}
.help-entry a:hover {
    background: #ffe45e55;
    color: #284adf;
    border-bottom: 2.3px double #db2861;
}

aside img[src*="qr"] {
    border-radius: 14px 1px 9px 19px;
    border: 3px dotted #db2861;
    box-shadow: 0 0 23px #ffe45e99, 0 0 6px #db2861aa;
    background: #fff8ea;
    padding: 7px;
    margin-bottom: 2.1em;
}

main {
    /* Collage-tape corners */
    box-shadow:
      0 0 0 13px #e4ecec,
      8px -8px 0 0 #ffe45e inset,
      var(--collage-shadow);
    position: relative;
}
main::before {
    content: "";
    display: block;
    position: absolute;
    left: 1.4em; top: -18px;
    width: 39px; height: 18px;
    background: var(--collage-tape) no-repeat left top;
    opacity: 0.66;
    z-index: 10;
}

hr {
    border: none;
    border-top: 3px dashed #db2861;
    margin: 2em 0 1.2em 0;
    opacity: 0.82;
}

code {
    background: #ffe45e;
    color: #284adf;
    border-radius: 4px;
    border: 1.2px dashed #db2861;
    font-family: 'Fira Mono', 'Special Elite', monospace;
    font-size: 0.98em;
}

textarea.help {
    background: #fff9e0;
    color: #19161e;
    border: 2.2px dashed #db2861;
    font-family: 'Special Elite', 'IM Fell DW Pica', 'Georgia', serif;
    letter-spacing: 0.02em;
}

@media (max-width: 650px) {
    main { border-radius: 0; box-shadow: none; padding: 0.5em; }
    aside { padding: 1em 0.5em; }
}

.collage-tilt-left  { transform: rotate(-2.8deg); }
.collage-tilt-right { transform: rotate(2.4deg); }
.collage-tilt-slight { transform: rotate(1deg);}
.collage-tilt-hard { transform: rotate(-4deg);}
.help-entry:nth-child(2n) { transform: rotate(-1.2deg);}
.help-entry:nth-child(3n) { transform: rotate(1.8deg);}
aside ul li:nth-child(2n) a { transform: rotate(-2deg);}
aside ul li:nth-child(3n) a { transform: rotate(2deg);}


/* Font import suggestion for local dev: 
   Use these from Google Fonts or serve locally for max effect:
   @import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica:ital,wght@0,400;0,700;1,400&family=Special+Elite&display=swap');
*/

