/* ==========================================================
   ENNA MAI - the gravekeeper
   hand-written stylesheet. whimsygoth / storybook-crooked / 2000s
   no frameworks, no build step, no javascript.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400&family=Almendra+SC&family=Griffy&family=Eagle+Lake&display=swap');

:root{
  --f-body:'Almendra','Palatino Linotype',Georgia,serif;
  --f-title:'Griffy','Palatino Linotype',Georgia,serif;
  --f-head:'Eagle Lake','Palatino Linotype',Georgia,serif;
  --f-sc:'Almendra SC','Almendra',Georgia,serif;
  --ink:#17161c;
  --ink2:#1f1e25;
  --stone:#28272d;
  --slate:#45454f;
  --mist:#6b6a78;
  --peri:#9fa4c2;
  --peri-lt:#b1b2c7;
  --string:#94a0ca;
  --lilac:#c3bcdd;
  --blush:#ccaaa9;
  --bone:#eae4d8;
  --cream:#fef8f8;
  --band:#f2e2d3;
  --head1:#eae4f2;
  --head2:#c8c1e0;
  --head3:#a9adc9;
}

*{box-sizing:border-box}

html{background:var(--ink)}

body{
  margin:0;
  padding:24px 14px 70px;
  background-color:var(--ink);
  background-image:linear-gradient(rgba(18,17,22,.66),rgba(18,17,22,.66)),url(img/bg-damask.gif);
  background-attachment:fixed,scroll;
  color:var(--bone);
  font:17px/1.8 var(--f-body);
  letter-spacing:.1px;
}

::selection{background:rgba(195,188,221,.3);color:var(--cream)}

a{color:var(--lilac);text-decoration:none;border-bottom:1px dotted var(--mist)}
a:hover{color:var(--cream);border-bottom-color:var(--lilac);background:rgba(159,164,194,.13)}
a:active{color:var(--blush)}
a.plain,a.plain:hover{border:0;background:none}

img{border:0}
hr{border:0;border-top:1px dotted var(--slate);margin:22px 0}

/* ---------- the shell ---------- */
.shell{
  width:100%;max-width:920px;margin:0 auto;position:relative;
  background:rgba(23,22,28,.94);
  border:1px solid var(--slate);
  box-shadow:0 0 0 1px rgba(159,164,194,.16),0 20px 60px rgba(0,0,0,.7);
}
.lace{height:36px;background:url(img/lace-edge.gif) repeat-x left top;opacity:.62}
.lace.flip{transform:scaleY(-1);opacity:.4}
.stripes{
  height:17px;
  background:url(img/band-lace.gif) repeat-x 50% 50%;
  opacity:.5;
}

/* ---------- header ---------- */
.crest{padding:20px 34px 24px;text-align:center;position:relative}
.crest .kicker{margin:0;font:italic 13.5px/1.6 var(--f-body);color:var(--mist);letter-spacing:2px}
.wordmark{
  margin:.12em 0 .06em;font-family:var(--f-title);font-weight:400;font-size:43px;line-height:1.12;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream);
  text-shadow:0 0 20px rgba(159,164,194,.35);
}
.crest .tag{margin:.2em 0 0;font-family:var(--f-sc);font-size:14.5px;color:var(--peri);letter-spacing:1.6px}
.lamp{
  position:absolute;left:16px;top:8px;width:52px;height:auto;opacity:.9;
  animation:sway 7s ease-in-out infinite;transform-origin:50% 0;
}
.shovel{
  position:absolute;right:20px;top:6px;width:26px;height:auto;opacity:.85;
  transform:rotate(9deg);
}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}

/* ---------- layout ---------- */
.layout{display:flex;align-items:flex-start;gap:0}
.sidebar{
  width:212px;flex:0 0 212px;padding:38px 16px 30px 22px;
  border-right:1px dotted var(--slate);
}
.content{flex:1 1 auto;min-width:0;padding:38px 30px 34px; font-size:15.5px; line-height:1.75}

/* ---------- navigation ---------- */
.navtitle,.boxtitle{
  margin:0 0 8px;font-family:var(--f-sc);font-size:12px;letter-spacing:2.4px;text-transform:none;
  color:var(--mist);border-bottom:1px dotted var(--slate);padding-bottom:5px;
}
.nav{list-style:none;margin:0 0 26px;padding:0}
.nav li{margin:0 0 3px}
.nav a{
  display:block;padding:4px 6px 4px 26px;border:0;
  background:url(img/ico-cross-sm.gif) no-repeat 4px 50%;
  font-size:15px;letter-spacing:.6px;color:var(--bone);
}
.nav a:hover{background-color:rgba(159,164,194,.14);color:var(--cream);padding-left:30px}
.nav a.here{color:var(--lilac);background-color:rgba(159,164,194,.09)}

/* ---------- little sidebar boxes ---------- */
.box{
  margin:0 0 22px;padding:11px 12px;font-size:13.5px;line-height:1.65;
  background:rgba(69,69,79,.28);border:1px solid var(--slate);
  color:var(--peri-lt);
}
.box p{margin:.35em 0}
.box .big{font-size:15px;color:var(--cream)}
.nero{display:block;margin:6px auto 2px;width:64px}
.nero-cap{text-align:center;font-family:var(--f-sc);font-size:12px;color:var(--mist);letter-spacing:1px;margin:0}

.orb{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;
  background:var(--lilac);box-shadow:0 0 8px var(--lilac);animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{background:#c3bcdd;box-shadow:0 0 8px #c3bcdd}
  40%{background:#ccaaa9;box-shadow:0 0 8px #ccaaa9}
  70%{background:#28272d;box-shadow:0 0 6px #45454f}}

.blink{animation:blink 1.15s step-end infinite;color:var(--blush)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ---------- headings ---------- */
h2{
  margin:0 0 18px;font-family:var(--f-head);font-weight:400;font-size:24px;line-height:1.25;color:var(--head1);
  letter-spacing:.03em;padding-bottom:8px;border-bottom:1px solid var(--slate);
}
h2 .mark{display:inline-block;width:34px;height:17px;margin-right:0;vertical-align:1px;background:url(img/ico-cross-sm.gif) no-repeat 50% 50%;color:transparent;text-indent:-999em;overflow:hidden}
h3{
  margin:30px 0 8px;font-family:var(--f-head);font-weight:400;font-size:24px;letter-spacing:.02em;
  color:var(--head2);
  padding-left:42px;background:url(img/ico-cage.gif) no-repeat 11px 50%;
}
h3.hg,h3.ky{background-image:url(img/ico-key.gif);padding-left:42px;background-position:0 50%}
h3.cr{background-image:url(img/ico-crown.gif);padding-left:42px;background-position:8px 50%}
h3.bf{background-image:url(img/ico-butterfly.gif);padding-left:42px;background-position:7px 50%}
h4{margin:20px 0 5px;font-family:var(--f-head);font-weight:400;font-size:18px;letter-spacing:.02em;
  color:var(--head3)}
p{margin:0 0 1.1em}
.lead{font-size:17px;color:var(--cream)}
.small{font-size:13px;color:var(--mist)}
em{color:var(--peri-lt)}
strong{color:var(--cream);font-weight:400;letter-spacing:.5px}
blockquote{
  margin:18px 0;padding:2px 0 2px 18px;border-left:3px solid var(--slate);
  font-style:italic;color:var(--peri-lt);
}

/* ---------- divider ---------- */
.div{height:19px;margin:26px 0;background:url(img/div-lily-lilac.gif) no-repeat 50% 50%;opacity:.85}
.div.pale{background-image:url(img/div-lily-pale.gif);opacity:.5}

/* ---------- crooked cards ---------- */
.card{
  margin:0 0 22px;padding:16px 20px;
  background:rgba(40,39,45,.75);border:1px solid var(--slate);
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
}
.card:nth-of-type(even){transform:rotate(.35deg)}
.card:nth-of-type(odd){transform:rotate(-.3deg)}
.card h3{margin-top:0}

.notice{
  padding:10px 14px;margin:0 0 22px;font-size:13.5px;
  background:rgba(148,160,202,.1);border:1px dashed var(--peri);color:var(--peri-lt);
}

/* ---------- lists ---------- */
ul.dots{list-style:none;margin:0 0 1.2em;padding:0}
ul.dots li{padding:3px 0 3px 24px;background:url(img/ico-cross-sm.gif) no-repeat 0 9px}
ol.rules{margin:0 0 1.2em;padding-left:24px}
ol.rules li{margin-bottom:.5em}

/* ---------- data table ---------- */
table.sheet{border-collapse:collapse;width:100%;font-size:14px;margin:0 0 18px}
table.sheet th,table.sheet td{
  padding:7px 10px;border-bottom:1px dotted var(--slate);text-align:left;vertical-align:top;
}
table.sheet th{
  width:33%;font-family:var(--f-sc);font-weight:400;letter-spacing:1.5px;text-transform:none;
  font-size:12.5px;color:var(--mist);
}
table.sheet td{color:var(--bone)}
table.sheet tr:hover td{background:rgba(159,164,194,.07)}

/* ---------- palette ---------- */
.palette{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.palette li{width:98px;font-size:12px;line-height:1.45;color:var(--mist);text-align:center}
.palette .chip{
  display:block;height:44px;margin-bottom:4px;border:1px solid var(--slate);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
.palette code{display:block;color:var(--peri-lt);font:11px/1.4 "Courier New",monospace}

/* ---------- gallery frames ---------- */
.frames{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 18px;padding:0;list-style:none}
.frames li{
  width:172px;padding:9px 9px 6px;background:rgba(69,69,79,.3);
  border:1px solid var(--slate);box-shadow:3px 3px 0 rgba(0,0,0,.4);
}
.frames li:nth-child(3n+1){transform:rotate(-1.1deg)}
.frames li:nth-child(3n+2){transform:rotate(.8deg)}
.frames li:nth-child(3n){transform:rotate(-.4deg)}
.frames li:hover{border-color:var(--peri);transform:rotate(0) scale(1.02)}
.frames .plate{
  display:flex;align-items:center;justify-content:center;
  height:152px;margin-bottom:7px;background:rgba(23,22,28,.8);
  border:1px dotted var(--slate);
}
.frames .plate img{max-width:100%;max-height:150px;display:block}
.frames .plate .empty{font-family:var(--f-sc);font-size:12.5px;color:var(--mist);letter-spacing:1.2px;text-align:center;padding:0 8px}
.frames .cap{font-size:12.5px;line-height:1.5;color:var(--peri-lt);text-align:center}
.frames .cap span{display:block;color:var(--mist);font-size:12px}

/* ---------- portrait ---------- */
.portrait{
  float:right;width:186px;margin:0 0 16px 20px;padding:8px 8px 5px;
  background:rgba(69,69,79,.32);border:1px solid var(--slate);
  box-shadow:4px 4px 0 rgba(0,0,0,.45);transform:rotate(1.2deg);
}
.portrait img{width:100%;display:block;border:1px solid var(--stone)}
.portrait figcaption{font-family:var(--f-sc);font-size:12.5px;letter-spacing:1.4px;color:var(--mist);text-align:center;padding-top:5px}

/* ---------- diary ---------- */
.entry{
  margin:0 0 26px;padding:16px 20px 12px;
  background:rgba(31,30,37,.85);
  border:1px solid var(--slate);border-left:4px solid var(--peri);
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
}
.entry:nth-of-type(even){transform:rotate(.3deg);border-left-color:var(--blush)}
.entry:nth-of-type(odd){transform:rotate(-.25deg)}
.entry .stamp{
  margin:0 0 8px;font:12.5px/1.5 var(--f-sc);letter-spacing:1.6px;
  color:var(--mist);text-transform:uppercase;
}
.entry .stamp b{color:var(--peri-lt);font-weight:400}
.entry p:last-child{margin-bottom:.4em}
.entry .sung{font-style:italic;color:var(--blush)}

/* ---------- updates ---------- */
dl.log{margin:0 0 18px;font-size:14px}
dl.log dt{
  font:12.5px/1.6 var(--f-sc);letter-spacing:1.4px;color:var(--peri);
  margin-top:12px;
}
dl.log dd{margin:0;padding:0 0 6px 0;border-bottom:1px dotted var(--slate);color:var(--bone)}

/* ---------- buttons / banners ---------- */
.buttons{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding:0;list-style:none}
.buttons li{
  width:88px;height:31px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--slate);background:rgba(69,69,79,.3);
  font-family:var(--f-sc);font-size:11px;letter-spacing:1px;color:var(--mist);text-align:center;line-height:1.2;
}
pre.code{
  margin:0 0 18px;padding:12px 14px;overflow-x:auto;
  background:rgba(23,22,28,.9);border:1px solid var(--slate);
  font:11.5px/1.65 "Courier New",monospace;color:var(--peri-lt);white-space:pre-wrap;word-break:break-word;
}

/* ---------- footer ---------- */
.foot{
  padding:16px 30px 20px;border-top:1px dotted var(--slate);
  font-size:13.5px;line-height:1.8;color:var(--mist);text-align:center;letter-spacing:.4px;
}
.foot a{color:var(--peri)}
.foot .rune{display:block;width:81px;height:17px;margin:0 auto 8px;background:url(img/ico-cross-sm.gif) repeat-x 50% 50%;background-size:27px 17px;color:transparent;text-indent:-999em;overflow:hidden;opacity:.55}

/* ---------- responsive ---------- */
@media (max-width:740px){
  body{padding:12px 8px 50px}
  .layout{display:block}
  .sidebar{width:auto;flex:none;border-right:0;border-bottom:1px dotted var(--slate);padding:26px 20px 22px}
  .content{padding:26px 20px 28px}
.wordmark{font-size:30px;letter-spacing:.1em}
  .lamp{width:40px;left:8px}
  .shovel{display:none}
  .portrait{float:none;width:auto;max-width:230px;margin:0 auto 18px;transform:rotate(0)}
  .nav{display:flex;flex-wrap:wrap;gap:2px}
  .nav li{width:calc(50% - 2px)}
}

/* ---------- final polish ---------- */
html{scroll-behavior:smooth}
a:focus-visible,.nav a:focus-visible{outline:1px dotted var(--lilac);outline-offset:2px}
.frames li,.portrait,.buttons li,.nav a,.card{transition:transform .25s ease,border-color .25s ease,background-color .25s ease}
.portrait:hover{transform:rotate(0) scale(1.02);border-color:var(--peri)}
.buttons li:hover{border-color:var(--peri);color:var(--peri-lt);background:rgba(159,164,194,.12)}
.card:hover{border-color:var(--mist)}
table.sheet th{white-space:nowrap}
.shell:before{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.55)}
.content,.sidebar{position:relative;z-index:1}
.crest,.foot{position:relative;z-index:1}
@media (max-width:420px){.palette li{width:calc(50% - 4px)}.frames li{width:100%}}

/* ---------- row of stones ---------- */
.stones{text-align:center;margin:0 0 26px;line-height:1}
.stones img{margin:0 14px;opacity:.9;vertical-align:bottom}
.stones img:nth-child(1){transform:rotate(-3deg)}
.stones img:nth-child(2){transform:rotate(1.5deg)}
.stones img:nth-child(3){transform:rotate(4deg) scale(.86);opacity:.6}

/* ---------- lace corner on diary entries (ACROSS+ lace set) ---------- */
.entry{position:relative}
.entry::after{content:"";position:absolute;top:0;right:0;width:36px;height:36px;background:url(img/lace-corner.gif) no-repeat 0 0;opacity:.4;pointer-events:none;transform:scaleX(-1)}

/* orb ring */
.orb{box-shadow:0 0 0 1px rgba(159,164,194,.45)}