/* Shared layout and seasonal styling. Set the default in js/theme-config.js. */
:root { --season-accent: #f0ab68; --season-focus: #95551f; }
html { scroll-behavior: smooth; }
body { min-width: 280px; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid var(--season-focus); outline-offset: 4px; }
button { font: inherit; }
#main { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-left: 250px; min-height: 100vh; overflow: visible; }
#main .page { position: relative; inset: auto; width: 100%; overflow: visible; min-height: 100vh; }
#sidebar { z-index: 30; }
#sidebar-wrapper { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #675343 transparent; }
#profile #profile-photo { height: auto; }
#navigation a { display: block; position: relative; text-decoration: none; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 10px 18px; background: #ffe4bd; color: #19151a; border-radius: 6px; }
.skip-link:focus { top: 12px; }
.season-controls { padding: 0 22px 20px; }
html[data-theme-switch="disabled"] .season-controls { display: none !important; }
.season-picker-label { display: block; margin: 0 0 7px; color: #cbbcae; font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.season-picker { width: 100%; padding: 10px 11px; border: 1px solid #66533f; border-radius: 8px; background: #30292e; color: #f6e5d2; font: inherit; font-size: 13px; cursor: pointer; }
.season-picker:hover { border-color: #d5a06f; }
.seasonal-tagline, .seasonal-caption, .haunt-decorations, .main-pumpkin, .main-tree, .christmas-decorations, .portrait-holly, .gift-icon, .ghost-trigger, .ghost-note { display: none; }
html:not(.js-enabled) [data-needs-js] { display: none; }
.menu-backdrop { position: fixed; inset: 0; z-index: 35; border: 0; background: rgba(8, 7, 13, .68); cursor: pointer; }
.mobilemenu { display: none; }

/* Midnight, old paper, and a little candlelight. */
html:is([data-theme="halloween"], [data-theme="christmas"]) { color-scheme: dark; --season-focus: #ffd19d; }
html:is([data-theme="halloween"], [data-theme="christmas"]) body { background: #121017; color: #ded8df; font-size: 16px; line-height: 1.75; }
html:is([data-theme="halloween"], [data-theme="christmas"]) body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 100% 0%, rgba(92, 49, 110, .16), transparent 55%), radial-gradient(ellipse at 20% 100%, rgba(128, 64, 28, .07), transparent 50%); }
html:is([data-theme="halloween"], [data-theme="christmas"]) #sidebar { width: 294px; background: linear-gradient(160deg, #211924 0%, #151218 58%, #1e1718 100%); border-right: 1px solid #3b2d36; box-shadow: 8px 0 50px rgba(0, 0, 0, .14); }
html:is([data-theme="halloween"], [data-theme="christmas"]) #profile { padding: 29px 18px 19px; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #profile .bg { background: none; padding: 0; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #profile #profile-photo { display: block; width: 208px; height: 247px; object-fit: cover; object-position: center 36%; margin: 0 auto; border-radius: 92px 92px 12px 12px; border: 1px solid #a46b3d; outline: 5px solid rgba(228, 153, 83, .045); box-shadow: 0 0 32px rgba(220, 118, 34, .12); }
html:is([data-theme="halloween"], [data-theme="christmas"]) #profile .title h2 { margin: 20px 0 9px; color: #faeee0; font-family: 'IM Fell English', Georgia, serif; font-size: 29px; line-height: 1.12; font-weight: 400; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #profile .title h2 b { font-weight: 400; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #profile .title h3 { margin: 0 0 4px; color: #c6b7c6; font-size: 13px; line-height: 1.6; font-weight: 400; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #profile .title h3 b { font-weight: 400; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .seasonal-tagline { display: block; margin: 15px auto 0; max-width: 224px; color: #d7ac84; font-size: 12px; font-style: italic; line-height: 1.6; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .season-controls { padding: 0 28px 22px; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #navigation { padding: 0 16px 28px; }
html:is([data-theme="halloween"], [data-theme="christmas"]) ul#navigation > li { margin: 3px 0; border: 1px solid transparent !important; border-radius: 7px; background: transparent !important; }
html:is([data-theme="halloween"], [data-theme="christmas"]) ul#navigation > li > a { min-height: 45px; color: #beb0bf; font-size: 14px; }
html:is([data-theme="halloween"], [data-theme="christmas"]) ul#navigation li .fa { width: 44px; color: #9b849c; font-size: 18px; }
html:is([data-theme="halloween"], [data-theme="christmas"]) ul#navigation li .text { margin-left: 44px; padding-left: 5px; box-shadow: none; }
html:is([data-theme="halloween"], [data-theme="christmas"]) ul#navigation li:hover { background: #251c26 !important; }
html:is([data-theme="halloween"], [data-theme="christmas"]) ul#navigation li.currentmenu { border-color: #51382d !important; background: linear-gradient(90deg, rgba(205, 122, 58, .13), rgba(205, 122, 58, .03)) !important; font-weight: 400; }
html:is([data-theme="halloween"], [data-theme="christmas"]) ul#navigation li.currentmenu a, html:is([data-theme="halloween"], [data-theme="christmas"]) ul#navigation li.currentmenu .fa { color: #f1b479; }
html:is([data-theme="halloween"], [data-theme="christmas"]) ul#navigation li.currentmenu a::after { content: ""; position: absolute; width: 17px; height: 17px; right: 12px; top: 14px; background: url('../assets/halloween/pumpkin.svg') center / contain no-repeat; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #main { margin-left: 294px; background: transparent; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #main .page, html:is([data-theme="halloween"], [data-theme="christmas"]) .section { background: transparent; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .section { padding: 0; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .section-container { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 47px 64px 88px 158px; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #main h3 { position: relative; margin: 30px 0 16px; padding: 0 0 13px; border-bottom: 1px solid #44303a; font-family: 'IM Fell English', Georgia, serif; font-size: 30px; font-weight: 400; line-height: 1.3; letter-spacing: -.01em; color: #f6e7d6; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #main h3:first-child { margin-top: 0; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #main h3 > .label { display: inline; padding: 0; border: 0; border-radius: 0; background: transparent !important; color: inherit; font-size: inherit; font-weight: 400; white-space: normal; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #main h3::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 46px; height: 1px; background: #cb8b52; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #main a { color: #efa96c; text-decoration: none; text-underline-offset: 3px; overflow-wrap: anywhere; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #main a:hover, html:is([data-theme="halloween"], [data-theme="christmas"]) #main a:focus { color: #ffe0b6; text-decoration: underline; }
html:is([data-theme="halloween"], [data-theme="christmas"]) #main b, html:is([data-theme="halloween"], [data-theme="christmas"]) #main strong { color: #f0e4db; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .table { border-color: #332a36; margin-bottom: 32px; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .table > tbody > tr > td, html:is([data-theme="halloween"], [data-theme="christmas"]) .table > tbody > tr > th, html:is([data-theme="halloween"], [data-theme="christmas"]) .table > tr > td { padding: 15px 0; border-color: #332a36; line-height: 1.8; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .table > tbody > tr > td + td, html:is([data-theme="halloween"], [data-theme="christmas"]) .table > tr > td + td { padding-left: 16px; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .table tr:first-child > td { border-top: 0; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .table .label { display: inline-block; padding: 5px 7px; background: #302331 !important; border: 1px solid #59404f; color: #f2c896; border-radius: 4px; font-size: 11px; line-height: 1.3; font-weight: 400; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .seasonal-caption { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: #b59e91; font-size: 11px; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .seasonal-caption::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: #e6a267; box-shadow: 0 0 12px rgba(232, 153, 79, .45); }

/* Quiet decorations sit in the margins and never intercept a click. */
html:is([data-theme="halloween"], [data-theme="christmas"]) .main-pumpkin { display: block; position: fixed; left: 302px; bottom: 12px; width: 132px; height: 148px; z-index: 10; pointer-events: none; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .haunt-decorations { display: block; position: fixed; inset: 0; overflow: hidden; z-index: 5; pointer-events: none; }
.corner-web { position: absolute; top: 0; right: 0; width: 170px; height: 170px; opacity: .2; }
.margin-bat { position: absolute; width: 38px; height: 20px; opacity: .2; animation: bat-drift 8s ease-in-out infinite alternate; }
.bat-one { top: 35px; right: 91px; transform: rotate(-13deg); }
.bat-two { top: 82px; right: 39px; width: 24px; opacity: .13; animation-delay: -4s; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .ghost-trigger { display: grid; place-items: center; position: fixed; right: 22px; bottom: 22px; z-index: 45; width: 45px; height: 45px; padding: 9px; border: 1px solid #594456; border-radius: 50%; background: #241c2a; color: #d1bfdf; cursor: pointer; box-shadow: 0 5px 25px rgba(0, 0, 0, .25); transition: transform .2s, border-color .2s; }
.ghost-trigger svg { width: 24px; height: 24px; }
.ghost-trigger:hover { transform: translateY(-3px); border-color: #bd936f; }
html:is([data-theme="halloween"], [data-theme="christmas"]) .ghost-note { display: block; position: fixed; right: 22px; bottom: 80px; z-index: 45; max-width: min(290px, calc(100vw - 40px)); padding: 21px 36px 20px 22px; border: 1px solid #76523e; border-radius: 12px 12px 4px 12px; background: #2b202a; color: #f9e7ce; box-shadow: 0 8px 38px rgba(0, 0, 0, .3); font-family: 'IM Fell English', Georgia, serif; font-size: 21px; line-height: 1.45; }
.ghost-close { position: absolute; right: 7px; top: 6px; padding: 2px 7px; border: 0; background: transparent; color: #d9bda6; font-family: sans-serif; font-size: 21px; cursor: pointer; }
@keyframes bat-drift { from { translate: 0 0; } to { translate: 3px 6px; } }

@media (min-width: 992px) { .menu-backdrop { display: none !important; } }
@media (max-width: 1199px) and (min-width: 992px) {
  html:is([data-theme="halloween"], [data-theme="christmas"]) .section-container { padding-left: 142px; padding-right: 40px; }
  html:is([data-theme="halloween"], [data-theme="christmas"]) .main-pumpkin { left: 302px; width: 116px; height: 130px; }
}
@media (max-width: 991px) {
  #sidebar, html:is([data-theme="halloween"], [data-theme="christmas"]) #sidebar { width: min(294px, calc(100vw - 52px)); transform: translateX(-102%); transition: transform .22s ease; z-index: 40; }
  html.menu-is-open #sidebar { transform: translateX(0); }
  html.menu-is-open body { overflow: hidden; }
  #main, html:is([data-theme="halloween"], [data-theme="christmas"]) #main { margin-left: 0; left: auto; right: auto; }
  #main .section-container { padding-top: 80px; }
  html:is([data-theme="halloween"], [data-theme="christmas"]) .section-container { padding: 82px 28px 178px; }
  html:is([data-theme="halloween"], [data-theme="christmas"]) .main-pumpkin { position: absolute; left: 18px; bottom: 12px; width: 120px; height: 135px; }
  .mobilemenu { display: grid; place-items: center; position: fixed; top: 15px; left: 16px; z-index: 50; width: 42px; height: 42px; padding: 0; border: 1px solid #6b5443; border-radius: 9px; background: #29232b; color: #f4d6b8; box-shadow: 0 2px 12px rgba(0,0,0,.15); }
  .mobilemenu:hover, .mobilemenu:focus { color: #fff2dd; text-decoration: none; }
  .mobilemenu .fa { font-size: 21px; }
  .corner-web { width: 130px; height: 130px; opacity: .15; }
  html:not(.js-enabled) #sidebar { position: relative; width: 100%; max-width: none; transform: none; }
  html:not(.js-enabled) #sidebar-wrapper { height: auto; }
  html:not(.js-enabled) .mobilemenu { display: none; }
}
@media (max-width: 480px) {
  html:is([data-theme="halloween"], [data-theme="christmas"]) body { font-size: 15px; }
  html:is([data-theme="halloween"], [data-theme="christmas"]) .section-container { padding-left: 18px; padding-right: 18px; }
  html:is([data-theme="halloween"], [data-theme="christmas"]) #main h3 { font-size: 28px; }
  html:is([data-theme="halloween"], [data-theme="christmas"]) .table > tbody > tr > td + td, html:is([data-theme="halloween"], [data-theme="christmas"]) .table > tr > td + td { padding-left: 10px; }
  .ghost-trigger { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  #sidebar, .season-controls, .haunt-decorations, .main-pumpkin, .ghost-trigger, .ghost-note, .mobilemenu, .menu-backdrop, .seasonal-caption { display: none !important; }
  #main, html:is([data-theme="halloween"], [data-theme="christmas"]) #main { margin: 0; }
  html:is([data-theme="halloween"], [data-theme="christmas"]) body, html:is([data-theme="halloween"], [data-theme="christmas"]) #main .page { background: white; color: black; }
  html:is([data-theme="halloween"], [data-theme="christmas"]) #main a, html:is([data-theme="halloween"], [data-theme="christmas"]) #main b, html:is([data-theme="halloween"], [data-theme="christmas"]) #main strong, html:is([data-theme="halloween"], [data-theme="christmas"]) #main h3 { color: black; }
  html:is([data-theme="halloween"], [data-theme="christmas"]) .section-container { padding: 0; max-width: none; }
  html:is([data-theme="halloween"], [data-theme="christmas"]) .table .label { background: white !important; color: black; border-color: #777; }
}