:root {
  --ink: #20191c;
  --brand-red: #b7282b;
  --brand-red-dark: #571013;
  --brand-red-mid: #741418;
  --brand-red-light: #d6a0a0;
  --paper-bright: #f2eee7;
  --paper: #f6f3ed;
  --line: #bfa7a7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: Verdana, Arial, sans-serif; background: #111; }
a { color: var(--brand-red-mid); }
a:hover { color: var(--brand-red); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 3px; }

.site {
  min-height: 100vh;
  background-color: #111;
  background-image: radial-gradient(circle at 12px 12px, rgba(255,255,255,.3) 1px, transparent 1.5px), radial-gradient(circle at 36px 30px, rgba(183,40,43,.7) 1px, transparent 1.5px), linear-gradient(135deg, rgba(87,16,19,.5), transparent 45%);
  background-size: 48px 48px, 74px 74px, 100% 100%;
}
.skip-link { position: fixed; top: -80px; left: 12px; z-index: 99; background: #fff; padding: 10px 14px; font-weight: 700; }
.skip-link:focus { top: 12px; }
.topbar { min-height: 58px; padding: 0 max(18px, calc((100vw - 1040px) / 2)); display: flex; align-items: center; gap: 24px; color: #fff; background: linear-gradient(#211d1e, #090909); border-bottom: 3px solid var(--brand-red); box-shadow: 0 3px 0 rgba(0,0,0,.65); }
.wordmark { color: #fff; text-decoration: none; font: 800 24px/1 Arial, sans-serif; letter-spacing: -1.5px; margin-right: auto; }
.wordmark span:first-child { color: #d33438; }
.blink { color: var(--paper-bright); animation: blink 1s steps(1) infinite; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { color: #fff; font-size: 12px; font-weight: 700; padding: 10px; text-decoration: none; border-left: 1px solid rgba(255,255,255,.2); }
.topbar nav a:hover { background: rgba(255,255,255,.12); }
.quiet-button { border: 1px solid #8e272a; background: #1a1516; color: #fff; padding: 8px 10px; font-size: 11px; cursor: pointer; }
.admin-visibility-bar { width: 800px; max-width: calc(100% - 8px); margin: 5px auto 0; padding: 5px 7px; display: flex; align-items: center; gap: 9px; color: #d9cfd0; background: #171313; border: 2px ridge #777; font: 10px Arial, sans-serif; }
.admin-visibility-bar strong { padding: 2px 5px; color: #fff; background: #741418; border: 1px solid #a94b4e; }
.admin-visibility-bar span { margin-right: auto; color: #bfa7a7; }
.admin-visibility-bar a { color: #f1dddd; font-weight: bold; }
.admin-visibility-bar a:hover { color: #fff; }
.announcement { max-width: 1040px; margin: 18px auto 0; padding: 7px 12px; font-size: 11px; color: #f3eeee; text-align: center; background: #3b1013; border: 1px solid var(--brand-red); }
.announcement span { color: #fff; font-weight: 900; }
.page-shell { width: min(1040px, calc(100% - 28px)); margin: 12px auto 28px; display: grid; grid-template-columns: 310px 1fr; gap: 14px; align-items: start; }
.profile-column, .content-column { display: grid; gap: 14px; }
.panel { background: var(--paper); border: 1px solid #7f2023; box-shadow: 3px 3px 0 rgba(0,0,0,.55); }
.panel > h2, .profile-card > h1, .music-player > h2, .services-panel > h2 { margin: 0; padding: 6px 9px; color: #fff; background: linear-gradient(90deg, var(--brand-red-dark), var(--brand-red)); font: 800 13px/1.2 Arial, sans-serif; }
.services-panel ul { margin: 0; padding: 8px 8px 8px 24px; font: 10px/1.5 Arial, sans-serif; }
.services-panel li { margin: 2px 0; }
.profile-card > h1 { font-size: 17px; }
.profile-top { display: grid; grid-template-columns: 125px 1fr; gap: 10px; padding: 12px; }
.avatar { height: 138px; position: relative; display: grid; place-items: center; overflow: hidden; background: #191919; border: 4px ridge #a9393c; }
.profile-facts { margin: 0; font-size: 10px; line-height: 1.6; }
.profile-facts div { margin-bottom: 5px; }
.profile-facts dt { font-weight: 700; color: #6f1518; }
.profile-facts dd { margin: 0; }
.online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #53be3b; box-shadow: 0 0 5px #53be3b; }
.tagline { margin: 0 12px 10px; padding: 7px; text-align: center; font: italic 11px Georgia, serif; color: #571013; background: #eee5e3; border: 1px dashed #8d2023; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); background: #e8e2df; }
.contact-grid a, .contact-grid button { min-height: 34px; padding: 8px; border: 0; border-right: 1px solid #cbbaba; border-bottom: 1px solid #cbbaba; background: transparent; color: #6f1518; text-align: left; text-decoration: none; font-size: 10px; font-weight: 700; cursor: pointer; }
.music-player .now-playing { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 10px; background: #1b1113; color: #f3eeee; }
.now-playing button { width: 32px; height: 32px; color: #1b1113; background: #d8d2ca; border: 2px outset #fff; cursor: pointer; }
.now-playing button:disabled { color: #777; background: #aaa; border-color: #777; cursor: not-allowed; }
.now-playing strong, .now-playing span { display: block; font-size: 10px; }
.now-playing div span { color: #d4bfc1; margin-top: 3px; }
.track-time { color: #d4bfc1; }
.music-player > p { margin: 0; padding: 5px 8px; color: #6f1518; background: #eee5e3; font-size: 9px; text-align: center; }
.visitor-counter { padding: 10px; text-align: center; color: #d9cfd0; background: #0e0c0d; border: 2px ridge #722326; }
.visitor-counter span, .visitor-counter small { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.visitor-counter strong { display: inline-block; margin: 5px; padding: 2px 5px; color: #e34a4e; background: #000; font: 20px monospace; letter-spacing: 3px; border: 1px inset #888; }
.hero { min-height: 250px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.45fr .75fr; color: #fff; background: linear-gradient(125deg, #121011 0%, #2b0d10 52%, #171313 100%); border: 2px solid #9b292c; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.03) 4px); pointer-events: none; }
.hero-copy { z-index: 1; padding: 28px 0 26px 28px; }
.eyebrow { margin: 0 0 10px; color: #e44c50; font: 700 10px monospace; letter-spacing: 1.4px; }
.hero h2 { margin: 0; max-width: 470px; font: 800 clamp(25px, 4vw, 41px)/.98 Arial, sans-serif; letter-spacing: -1.5px; text-shadow: 3px 3px 0 #000; }
.hero-copy > p:not(.eyebrow) { max-width: 500px; font-size: 12px; line-height: 1.6; color: #f1dddd; }
.hero-actions { display: flex; gap: 16px; align-items: center; margin-top: 20px; }
.primary-button { display: inline-block; padding: 10px 14px; color: #fff; background: #a92428; border: 2px outset #df5a5e; box-shadow: 2px 2px 0 #000; font-size: 11px; font-weight: 900; text-decoration: none; cursor: pointer; }
.primary-button:hover { color: #fff; background: #c5363a; }
.text-link { color: #fff; font-size: 11px; font-weight: 700; }
.text-link:hover { color: #e44c50; }
.hero-art { position: relative; min-height: 250px; }
.section-title { display: flex; align-items: center; gap: 10px; padding: 6px 9px; color: #fff; background: linear-gradient(90deg, var(--brand-red-dark), var(--brand-red)); }
.section-title h2 { margin: 0 auto 0 0; font: 800 14px Arial, sans-serif; }
.section-title a, .section-title span { color: #f1dddd; font-size: 9px; }
.post-list { display: grid; gap: 8px; }
.section-empty { margin: 0; padding: 14px; border: 1px dashed #666; color: #bbb; font: 11px Arial, sans-serif; }
.post-card { display: grid; grid-template-columns: 60px 1fr; padding: 12px; gap: 12px; }
.post-card time { display: grid; place-items: center; height: 46px; padding: 5px; text-align: center; color: #fff; background: var(--brand-red-mid); border: 2px outset var(--brand-red-light); font: 800 11px/1.1 Arial, sans-serif; }
.post-card h3 { margin: 0 0 6px; font: 800 16px Arial, sans-serif; }.post-card h3 a { color: var(--brand-red-mid); }.post-card p { margin: 0; color: #514548; font: 11px/1.55 Verdana, sans-serif; }
.post-meta { margin-top: 9px; padding-top: 7px; display: flex; justify-content: space-between; border-top: 1px dotted #c8aaaa; font-size: 9px; color: #6f1518; }
.crew-panel { background: #fff; }.friend-grid { padding: 13px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.friend { text-align: center; font-size: 10px; text-decoration: none; }.friend-avatar { aspect-ratio: 1; margin: auto auto 5px; display: grid; place-items: center; color: #d9cfd0; background: #171313; border: 3px ridge #8f3235; font: bold 28px Georgia, "Times New Roman", serif; text-shadow: none; }.friend strong, .friend small { display: block; }.friend small { margin-top: 3px; font-size: 8px; }.friend small.online { color: #315f38; }.friend small.away { color: #8e5b16; }.friend small.offline { color: #777; }
.guestbook form { padding: 12px; display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 9px; align-items: end; background: #e9e1df; border-bottom: 1px solid #c8aaaa; }
.guestbook label { display: grid; gap: 4px; color: #6f1518; font-size: 9px; font-weight: 700; text-transform: uppercase; }.guestbook input, .guestbook textarea { width: 100%; height: 35px; padding: 7px; resize: none; background: #fff; border: 1px inset #bfa7a7; font-size: 10px; }.guestbook .primary-button { height: 35px; padding: 7px 10px; }
.guest-entries article { display: flex; gap: 9px; padding: 10px 12px; border-bottom: 1px dotted #c8aaaa; }.mini-avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: #741418; border: 2px ridge #c97878; }.guest-entries p { margin: 0; font-size: 10px; line-height: 1.45; }.guest-entries strong { display: block; color: #791b1f; margin-bottom: 2px; }
footer { max-width: 1040px; margin: auto; padding: 16px 4px 28px; display: flex; justify-content: space-between; color: #ae999b; border-top: 1px solid #592326; font-size: 9px; } footer nav { display: flex; gap: 14px; } footer a { color: #d4bfc1; }
.quiet *, .quiet *::before, .quiet *::after { animation: none !important; scroll-behavior: auto !important; }

@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media (max-width: 760px) {
  .topbar { padding: 9px 14px; flex-wrap: wrap; gap: 8px; }.wordmark { width: calc(100% - 115px); }.topbar nav { width: 100%; order: 3; overflow-x: auto; }.topbar nav a { flex: 1; text-align: center; }.quiet-button { margin-left: auto; }
  .announcement { margin: 10px 14px 0; }.page-shell { grid-template-columns: 1fr; }.content-column { order: -1; }.profile-column { grid-template-columns: 1fr 1fr; }.profile-card, .visitor-counter { grid-column: 1 / -1; }
  .hero { grid-template-columns: 1fr; }.hero-copy { padding: 24px; }.hero-art { position: absolute; opacity: .28; right: 0; }.post-card { grid-template-columns: 50px 1fr; }.friend-grid { grid-template-columns: repeat(4, 1fr); }.guestbook form { grid-template-columns: 1fr 1fr; }.guestbook .primary-button { grid-column: 1 / -1; } footer { margin: 0 14px; }
}

.friend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.no-artists { grid-column: 1 / -1; margin: 4px; font: 10px Arial, sans-serif; }
.admin-shell { min-height: 100vh; padding: 12px; color: #111; background: #171313; font: 12px Arial, sans-serif; }
.admin-header, .admin-window, .admin-form, .admin-list { width: min(760px, 100%); margin: 0 auto 8px; padding: 8px; background: #d4d0c8; border: 3px outset #fff; box-shadow: 2px 2px #000; }
.admin-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; color: #fff; background: #741418; }
.admin-header h1, .admin-window h1, .admin-form h2, .admin-list h2 { margin: 0 0 5px; font: bold 14px Arial, sans-serif; }
.admin-header p { margin: 0; }
.admin-header nav { display: flex; gap: 6px; }
.admin-header a { color: #fff; }
.admin-window { margin-top: 15vh; }
.admin-button, .admin-actions button, .admin-list button { display: inline-block; padding: 4px 9px; color: #000; background: #d4d0c8; border: 2px outset #fff; text-decoration: none; cursor: pointer; }
.admin-button:active, .admin-actions button:active, .admin-list button:active { border-style: inset; }
.admin-form { display: grid; gap: 7px; }
.admin-form label { display: grid; gap: 2px; font-weight: 700; }
.admin-form input, .admin-form select { min-width: 0; padding: 4px; background: #fff; border: 2px inset #aaa; }
.admin-form-row { display: grid; grid-template-columns: 1fr 1fr 80px; gap: 7px; }
.admin-form .checkbox-label { display: flex; align-items: center; gap: 5px; }
.admin-actions { display: flex; align-items: center; gap: 6px; }
.admin-list article { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 5px; background: #fff; border: 1px solid #888; }
.admin-list article + article { border-top: 0; }
.admin-list article span { display: block; color: #555; font-size: 10px; }
.admin-artist-image { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; color: #d9cfd0; background: #171313; border: 1px solid #741418; font: bold 20px Georgia, "Times New Roman", serif; }
.admin-artist-image img { width: 100%; height: 100%; object-fit: cover; }
.admin-list-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
@media (max-width: 520px) { .admin-form-row { grid-template-columns: 1fr; }.admin-list article { grid-template-columns: 40px 1fr; }.admin-list-actions { grid-column: 1 / -1; justify-content: flex-start; } }


.staff-role-manager { width: min(980px,100%); margin: 0 auto; }
.staff-role-manager > .admin-toolbar,.staff-role-manager > .admin-form,.staff-role-manager > .admin-list { width: 100%; max-width: none; }
.staff-account-form { padding: 0; overflow: hidden; }
.staff-account-form > header { padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; color: #fff; background: #741418; }
.staff-account-form > header span { font: bold 11px "Courier New",monospace; }.staff-account-form > header h2 { margin: 2px 0 0; color: #fff; }
.staff-form-grid { padding: 11px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.staff-form-grid label { display: grid; gap: 5px; font-weight: bold; }
.staff-form-grid input,.staff-form-grid select { width: 100%; min-height: 38px; padding: 7px; color: #111; background: #fff; border: 2px inset #999; font-size: 16px; }
.staff-role-description { margin: 0 11px; padding: 8px; color: #111; background: #f1dddd; border: 2px inset #aaa; font-weight: bold; }
.staff-account-form > .checkbox-label { margin: 0 11px; display: flex; grid-template-columns: auto 1fr; }
.staff-account-form > .admin-actions { margin: 0 11px 11px; }
.staff-role-guide { margin: 0 0 9px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.staff-role-guide article { padding: 9px; color: #111; background: #d4d0c8; border: 3px outset #fff; box-shadow: 2px 2px #000; }
.staff-role-guide strong { color: #741418; font-size: 14px; }.staff-role-guide p { margin: 4px 0 0; line-height: 1.35; }
.staff-account-list article { grid-template-columns: 44px minmax(0,1fr) auto; padding: 8px; }
.staff-account-list article > div:nth-child(2) { display: grid; gap: 2px; }
.staff-role-pill { width: max-content; margin-top: 2px; padding: 2px 5px; color: #fff !important; background: #741418; border: 1px outset #e27a7d; font: bold 11px "Courier New",monospace; }
.staff-account-list small { color: #555; }
.staff-account-lock { padding: 5px 7px; color: #555; background: #eee; border: 2px inset #aaa; font-weight: bold; }
html[data-color-mode="dark"] .staff-role-guide article { color: #eee8e5; background: #211c1d; border-color: #74575b; }
html[data-color-mode="dark"] .staff-role-guide strong { color: #e46a6e; }
html[data-color-mode="dark"] .staff-role-description,html[data-color-mode="dark"] .staff-account-lock { color: #eee8e5; background: #2b2224; border-color: #74575b; }
html[data-color-mode="dark"] .staff-account-list small { color: #c7b9bb; }
@media (max-width:700px) { .staff-role-guide { grid-template-columns: 1fr; }.staff-form-grid { grid-template-columns: 1fr; }.staff-account-list article { grid-template-columns: 40px minmax(0,1fr); }.staff-account-list .admin-list-actions,.staff-account-lock { grid-column: 1/-1; } }
.blog-page { width: 100%; min-width: 0; min-height: 100vh; padding: 8px 0 20px; overflow-x: hidden; color: #111; background-color: #090909; background-image: linear-gradient(45deg, #16090a 25%, transparent 25%), linear-gradient(-45deg, #16090a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #16090a 75%), linear-gradient(-45deg, transparent 75%, #16090a 75%); background-size: 16px 16px; font: 11px Arial, sans-serif; }
.blog-masthead { width: 760px; max-width: calc(100% - 8px); margin: auto; padding: 8px; overflow: hidden; color: #fff; background: #000; border: 4px ridge #999; text-align: center; }
.blog-logo { color: #fff; font: bold 38px/1 "Times New Roman", serif; text-shadow: 3px 3px #741418; }
.blog-logo span { color: #c42e32; }
.blog-masthead p { margin: 5px; color: #aaa; font: 10px "Courier New", monospace; }
.blog-masthead nav { padding: 4px; background: #741418; border: 2px inset #aaa; }
.blog-masthead nav a { margin: 0 9px; color: #fff; font-weight: bold; }
.blog-marquee { width: 760px; max-width: calc(100% - 8px); margin: 4px auto; padding: 3px; overflow: hidden; color: #e34a4e; background: #000; border: 2px inset #999; white-space: nowrap; font: bold 10px "Courier New", monospace; }
.blog-marquee div { width: max-content; animation: marquee 14s linear infinite; }
.blog-layout { width: 760px; max-width: calc(100% - 8px); min-width: 0; margin: auto; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 5px; align-items: start; }
.blog-layout > *, .blog-sidebar, .blog-entry, .entry-body { min-width: 0; max-width: 100%; }
.blog-sidebar { display: grid; gap: 5px; }
.blog-sidebar section, .blog-entry { background: #eeeae3; border: 3px ridge #aaa; }
.blog-sidebar h2 { margin: 0; padding: 3px 5px; color: #fff; background: #741418; border-bottom: 2px ridge #aaa; font: bold 11px Arial, sans-serif; }
.blog-sidebar p, .blog-sidebar ul { margin: 0; padding: 6px; overflow-wrap: anywhere; }
.blog-sidebar ul { padding-left: 22px; }
.blog-sidebar li { margin-bottom: 4px; }
.blog-sidebar a, .blog-entry a { color: #741418; text-decoration: underline; }
.blog-sidebar .mood { text-align: center; font: bold 14px "Times New Roman", serif; }
.blog-sidebar .mood small { font: 9px Arial, sans-serif; }
.artist-login-panel { padding-bottom: 7px; text-align: center; }
.artist-login-panel p { text-align: left; }
.retro-login-button { display: inline-block; padding: 4px 7px; color: #000 !important; background: #d4d0c8; border: 2px outset #fff; font: bold 9px Arial, sans-serif; text-decoration: none !important; }
.retro-login-button:active { border-style: inset; }
.blog-counter { padding: 6px; color: #fff; background: #000; border: 3px ridge #777; text-align: center; font: 9px Arial, sans-serif; }
.blog-counter strong { display: inline-block; margin-top: 3px; padding: 2px 5px; color: #ff3c41; border: 2px inset #555; font: 16px "Courier New", monospace; letter-spacing: 2px; }
.blog-entry > header { padding: 5px 8px; color: #fff; background: #741418; border-bottom: 3px ridge #aaa; }
.blog-entry h1 { margin: 0; font: bold 20px "Times New Roman", serif; }
.blog-entry > header p { margin: 2px 0 0; font-size: 9px; }
.blog-entry > header a { color: #fff; }
.entry-body { padding: 12px 16px; overflow-wrap: anywhere; font: 13px/1.45 "Times New Roman", serif; }
.entry-body p { margin: 0 0 12px; }
.entry-body .dropcap::first-letter { float: left; margin: -5px 4px -2px 0; color: #941d21; font: bold 45px/1 "Times New Roman", serif; }
.entry-quote { margin: 14px 20px; padding: 8px 12px; color: #741418; background: #ddd5cf; border: 1px dashed #741418; text-align: center; font: italic bold 15px Georgia, serif; }
.entry-body li { margin-bottom: 4px; }
.entry-body .signoff { margin-top: 20px; text-align: right; }
.blog-entry > footer { max-width: 100%; padding: 5px 8px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; overflow-wrap: anywhere; color: #555; background: #d4d0c8; border-top: 2px ridge #aaa; font: 9px Arial, sans-serif; }
.blog-footer { width: 760px; max-width: calc(100% - 8px); margin: 5px auto 0; padding: 6px; display: flex; justify-content: space-between; color: #ccc; border-top: 1px solid #777; font: 9px Arial, sans-serif; }
.blog-footer p { margin: 0; }.blog-footer a { color: #d4bfc1; }
.blog-footer nav { display: flex; gap: 9px; }
.blog-archive-main { min-width: 0; background: #d4d0c8; border: 3px ridge #aaa; }
.archive-heading { padding: 6px 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #fff; background: #741418; border-bottom: 3px ridge #aaa; }
.archive-heading h1 { margin: 0; font: bold 20px "Times New Roman", serif; }
.archive-heading p { margin: 0; font-size: 9px; }
.blog-archive-list { display: grid; gap: 4px; padding: 5px; }
.blog-summary { min-width: 0; padding: 7px 9px; background: #eeeae3; border: 2px ridge #aaa; }
.blog-summary > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.blog-summary h2 { margin: 5px 0 3px; font: bold 18px "Times New Roman", serif; }
.blog-summary h2 a { color: #741418; }
.blog-summary > p { margin: 0 0 7px; font: 12px/1.35 "Times New Roman", serif; }
.blog-summary > footer { width: auto; max-width: none; margin: 0; padding: 4px 0 0; display: flex; color: #555; border-top: 1px dotted #888; font: 9px Arial, sans-serif; text-align: left; }
.blog-summary > footer a { margin-left: auto; color: #741418; }
.blog-tag { display: inline-block; padding: 2px 5px; color: #fff; background: #741418; border: 1px outset #c97878; font: bold 8px Arial, sans-serif; text-transform: uppercase; }
.blog-tag-list a.active { color: #fff; background: #741418; text-decoration: none; }
.blog-empty, .blog-not-found { padding: 18px; background: #eeeae3; border: 3px ridge #aaa; }
.blog-not-found { width: min(520px, calc(100% - 16px)); margin: 12vh auto; text-align: center; }
.blog-post-layout .blog-entry > header { display: block; }
.blog-post-layout .blog-entry > header .blog-tag { margin-bottom: 4px; }
.blog-post-layout .entry-body { min-height: 260px; }
@media (max-width: 620px) { .blog-layout { grid-template-columns: minmax(0, 1fr); }.blog-sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }.blog-counter { grid-column: 1 / -1; }.blog-entry { grid-row: 1; }.blog-masthead nav a { display: inline-block; margin: 2px 5px; }.blog-logo { font-size: clamp(22px, 9vw, 28px); overflow-wrap: anywhere; }.blog-footer { flex-wrap: wrap; gap: 5px; }.entry-quote { margin-inline: 4px; } }
@media (max-width: 360px) { .blog-sidebar { grid-template-columns: minmax(0, 1fr); }.blog-counter { grid-column: auto; }.entry-body { padding: 9px; } }

.artist-portal { min-height: 100vh; padding: 8vh 10px 30px; color: #111; background: #080808; background-image: linear-gradient(45deg, #17090a 25%, transparent 25%), linear-gradient(-45deg, #17090a 25%, transparent 25%); background-size: 14px 14px; font: 11px Arial, sans-serif; }
.artist-login-window, .artist-dashboard { width: min(620px, 100%); margin: auto; background: #d4d0c8; border: 4px outset #aaa; box-shadow: 5px 5px #000; }
.portal-titlebar { padding: 4px 6px; color: #fff; background: #741418; font-weight: bold; }
.portal-body { padding: 14px; text-align: center; }
.portal-body img { width: 150px; max-width: 50%; border: 3px ridge #999; }
.portal-body h1 { margin: 8px 0 5px; font: bold 22px "Times New Roman", serif; }
.portal-body > p { margin: 6px auto 10px; }
.portal-body > a:last-child { display: block; margin-top: 12px; color: #741418; }
.portal-links { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
.portal-links a { color: #741418; }
.portal-links form { margin: 0; }
.portal-links button { padding: 0; color: #741418; background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.account-hub { width: min(680px, 100%); }
.account-access-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 14px 0 8px; text-align: left; }
.account-access-links a { min-height: 82px; padding: 9px; color: #111; background: #f6f4ef; border: 3px outset #fff; text-decoration: none; }
.account-access-links a:active { border-style: inset; }
.account-access-links strong { display: block; margin-bottom: 5px; color: #741418; font: bold 15px "Times New Roman", serif; text-decoration: underline; }
.account-access-links span { display: block; line-height: 1.45; }
.portal-help { padding: 5px; color: #555; background: #eee; border: 1px inset #aaa; font-size: 9px; }
.artist-dashboard > header { padding: 7px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #fff; background: #741418; border-bottom: 3px ridge #aaa; }
.artist-dashboard header span { font-size: 8px; }.artist-dashboard header h1 { margin: 1px 0 0; font: bold 16px "Times New Roman", serif; }
.artist-dashboard nav { display: flex; gap: 8px; }.artist-dashboard nav a { color: #fff; }
.artist-dashboard-grid { padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.artist-dashboard-grid article { padding: 7px; background: #fff; border: 2px inset #999; text-align: center; }
.artist-dashboard-grid h2 { margin: 0; padding: 3px; color: #fff; background: #741418; font: bold 10px Arial, sans-serif; }
.artist-dashboard-grid strong { display: block; margin: 7px; color: #741418; font: bold 24px "Times New Roman", serif; }
.artist-dashboard-grid p { min-height: 26px; font-size: 9px; }.artist-dashboard-grid a { color: #741418; }
.portal-notice { margin: 0 8px 8px; padding: 5px; color: #e34a4e; background: #000; border: 2px inset #777; text-align: center; font: 9px "Courier New", monospace; }
@media (max-width: 540px) { .artist-dashboard > header { align-items: flex-start; flex-direction: column; }.artist-dashboard-grid { grid-template-columns: 1fr; }.artist-dashboard-grid p { min-height: 0; } }

.admin-toolbar { width: min(760px, 100%); margin: 0 auto 8px; padding: 7px; display: flex; align-items: center; justify-content: space-between; background: #d4d0c8; border: 3px outset #fff; }
.homepage-settings { margin-bottom: 8px; }
.latest-release-settings { margin-bottom: 8px; }
.latest-release-settings > label { margin-top: 7px; }
.latest-release-settings small { display: block; margin-top: 3px; color: #444; font-size: 10px; }
.homepage-settings > p { margin: 0 0 7px; }
.homepage-settings fieldset { margin: 0; padding: 7px; border: 2px groove #fff; }
.homepage-settings legend { padding: 0 5px; color: #741418; font-weight: bold; }
.homepage-settings .announcement-fields { grid-template-columns: 150px 1fr; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.admin-help { color: #444; font-size: 10px; }
.add-artist-button { padding: 7px 12px; color: #fff; background: #741418; border: 3px outset #c97878; font-weight: bold; cursor: pointer; }
.blog-manager { width: min(760px, 100%); margin: auto; }
.blog-editor select { padding: 4px; background: #fff; border: 2px inset #aaa; }
.blog-editor textarea { min-height: 70px; resize: vertical; }
.blog-editor .blog-content-input { min-height: 240px; font: 12px/1.4 "Courier New", monospace; }
.blog-editor .blog-meta-fields { grid-template-columns: 1fr 150px 110px; align-items: end; }
.blog-admin-list article { grid-template-columns: 90px minmax(0, 1fr) auto auto auto; }
.admin-post-tag { padding: 4px; color: #fff; background: #741418; border: 2px outset #c97878; text-align: center; font-size: 8px; font-weight: bold; }
.admin-image-preview { width: 78px; height: 78px; margin: 3px 0; object-fit: cover; border: 3px ridge #999; }
.studio-dashboard { width: min(900px, 100%); }
.studio-intro { padding: 7px 9px; display: flex; gap: 8px; color: #111; background: #f1dddd; border-bottom: 3px ridge #aaa; font: 10px Arial, sans-serif; }.studio-intro strong { color: #741418; text-transform: uppercase; }
.studio-content { padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.studio-tool { min-width: 0; padding: 7px; background: #eeeae3; border: 2px inset #999; }
.studio-tool-wide { grid-column: 1 / -1; }
.studio-tool h2 { margin: -7px -7px 7px; padding: 4px 6px; color: #fff; background: #741418; font: bold 11px Arial, sans-serif; }
.studio-tool form { display: grid; gap: 6px; }.studio-tool label { display: grid; gap: 2px; font-weight: bold; }.studio-tool input, .studio-tool textarea, .studio-tool select { min-width: 0; padding: 4px; background: #fff; border: 2px inset #aaa; }.studio-tool textarea { min-height: 100px; resize: vertical; }.studio-tool button { padding: 4px 7px; border: 2px outset #fff; cursor: pointer; }.studio-tool .checkbox-label { display: flex; align-items: center; gap: 4px; }.studio-tool small, .studio-help { color: #555; font: 9px Arial, sans-serif; }.studio-help { margin: 0 0 7px; }
.theme-picker { padding: 7px; border: 2px groove #fff; }.theme-picker legend { padding: 0 4px; color: #741418; font-weight: bold; }.theme-picker > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }.theme-choice { min-width: 0; padding: 5px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 4px; background: #d4d0c8; border: 2px outset #fff; cursor: pointer; }.theme-choice.selected { background: #f1dddd; border-style: inset; outline: 2px solid #741418; }.theme-choice input { grid-row: 1 / 3; }.theme-choice strong { min-width: 0; overflow-wrap: anywhere; }.theme-swatch { height: 10px; grid-column: 1 / -1; border: 1px solid #000; background: linear-gradient(90deg, #171313 0 55%, #741418 55%); }.theme-choice-midnight-purple .theme-swatch { background: linear-gradient(90deg, #100d17 0 55%, #56348b 55%); }.theme-choice-monochrome .theme-swatch { background: linear-gradient(90deg, #050505 0 55%, #777 55%); }.theme-choice-acid-green .theme-swatch { background: linear-gradient(90deg, #071008 0 55%, #247a30 55%); }.theme-choice-deep-blue .theme-swatch { background: linear-gradient(90deg, #081018 0 55%, #1f4c70 55%); }
.decoration-controls { display: grid; grid-template-columns: 1fr 1fr 130px; gap: 6px; align-items: stretch; }.decoration-controls fieldset { min-width: 0; padding: 6px; border: 2px groove #fff; }.decoration-controls legend { color: #741418; font-weight: bold; }.decoration-controls fieldset > div { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }.decoration-controls fieldset label { padding: 4px; display: flex; align-items: center; gap: 3px; background: #d4d0c8; border: 2px outset #fff; cursor: pointer; }.decoration-controls fieldset label.selected { background: #f1dddd; border-style: inset; }.artist-style-preview { --artist-page-bg: #171313; --artist-accent: #741418; margin: 2px 0; padding: 9px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; background-color: var(--artist-page-bg); border: 3px ridge #aaa; text-align: center; }.artist-style-preview strong { color: #fff; font-size: 22px; text-shadow: 2px 2px var(--artist-accent); }.artist-style-preview small { color: #ddd; }.artist-style-preview > span { color: var(--artist-accent-light, #8b282b); font: bold 20px "Segoe UI Symbol", "Noto Sans Symbols", serif; }
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.studio-image-preview { width: 100%; height: 90px; object-fit: cover; border: 2px ridge #999; }.studio-avatar-preview { object-position: center; }
.studio-item { min-width: 0; margin-top: 5px; padding: 5px; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #fff; border: 1px solid #888; }.studio-item > div:first-child { min-width: 0; flex: 1; }.studio-item span { margin-left: 5px; color: #741418; font-size: 8px; }.studio-item audio { width: 100%; height: 28px; display: block; margin-top: 4px; }.studio-item-actions { display: flex; flex-wrap: wrap; gap: 3px; }.gallery-upload-form, .link-form { grid-template-columns: 1fr 1fr auto; align-items: end; }.studio-gallery { margin-top: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }.studio-gallery figure { min-width: 0; margin: 0; padding: 4px; background: #fff; border: 2px inset #999; }.studio-gallery img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; }.studio-gallery figcaption { min-height: 25px; padding: 4px 1px; overflow-wrap: anywhere; font: 9px/1.2 Arial, sans-serif; }
.public-artist-page { --artist-page-bg: #171313; --artist-panel: #eeeae3; --artist-accent: #741418; --artist-accent-light: #a63135; --artist-ink: #111; --artist-link: #741418; width: 760px; max-width: calc(100% - 8px); min-height: 100vh; margin: auto; color: var(--artist-ink); background-color: var(--artist-page-bg); border-inline: 4px ridge #999; font: 11px Arial, sans-serif; }
.artist-theme-midnight-purple { --artist-page-bg: #100d17; --artist-panel: #eeeaf3; --artist-accent: #4f327c; --artist-accent-light: #7652a8; --artist-ink: #17121e; --artist-link: #4f327c; }.artist-theme-monochrome { --artist-page-bg: #090909; --artist-panel: #f2f2f2; --artist-accent: #202020; --artist-accent-light: #777; --artist-ink: #050505; --artist-link: #111; }.artist-theme-acid-green { --artist-page-bg: #071008; --artist-panel: #e6eee5; --artist-accent: #1f6028; --artist-accent-light: #378d44; --artist-ink: #071008; --artist-link: #174b20; }.artist-theme-deep-blue { --artist-page-bg: #081018; --artist-panel: #e4ebf0; --artist-accent: #204866; --artist-accent-light: #3d6f94; --artist-ink: #081018; --artist-link: #173e5c; }
.artist-pattern-checker { background-image: linear-gradient(45deg, rgba(255,255,255,.055) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.055) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.055) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.055) 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; }.artist-pattern-stripes { background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255,255,255,.06) 9px 11px); }.artist-pattern-dots { background-image: radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.5px); background-size: 13px 13px; }
.public-artist-page a { color: var(--artist-link); }.artist-page-header { padding: 5px; display: flex; justify-content: space-between; gap: 8px; color: #fff; background: #000; border-bottom: 3px ridge #999; font-weight: bold; }.artist-page-header a, .artist-admin-bar a { color: var(--artist-accent-light); }
.artist-admin-bar { padding: 5px 7px; color: #fff; background: #315f38; border-bottom: 3px ridge #999; font: bold 10px Arial, sans-serif; }
.artist-banner { width: 100%; max-height: 260px; display: block; object-fit: cover; border-bottom: 3px ridge #999; }
.artist-decoration { padding: 3px 12%; display: flex; justify-content: space-between; color: #fff; background: var(--artist-accent); border-bottom: 3px ridge #999; font: bold 15px "Segoe UI Symbol", "Noto Sans Symbols", "Times New Roman", serif; }
.artist-page-grid { padding: 6px; display: grid; grid-template-columns: 180px 1fr; gap: 6px; }.artist-page-grid > aside { padding: 6px; text-align: center; background: var(--artist-panel); border: 3px ridge #aaa; }.artist-page-avatar { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; color: #fff; background: #191919; border: 3px ridge var(--artist-accent-light); font-size: 48px; }.artist-page-avatar img { width: 100%; height: 100%; object-fit: cover; }.artist-page-grid aside h1 { margin: 6px 0 2px; color: var(--artist-accent); font: bold 20px "Times New Roman", serif; }.artist-page-grid aside p { margin: 2px 0 8px; }.artist-page-tagline { padding: 4px; background: #fff; border: 1px inset #aaa; font: italic 11px/1.25 "Times New Roman", serif; }.artist-page-status { text-transform: uppercase; font-size: 9px; }
.artist-kind-badge { width: fit-content; margin: 3px auto 7px; padding: 2px 7px; display: inline-block; color: #fff; background: var(--artist-accent, #741418); border: 2px outset var(--artist-accent-light, #b05255); text-transform: uppercase; font: bold 9px Arial, sans-serif; letter-spacing: .5px; }
.artist-title-gothic .artist-page-grid aside h1, .artist-title-gothic.artist-style-preview strong { font-family: Georgia, "Times New Roman", serif; letter-spacing: -1px; }.artist-title-classic .artist-page-grid aside h1, .artist-title-classic.artist-style-preview strong { font-family: "Times New Roman", serif; font-style: italic; }.artist-title-typewriter .artist-page-grid aside h1, .artist-title-typewriter.artist-style-preview strong { font-family: "Courier New", monospace; letter-spacing: -1px; }.artist-title-block .artist-page-grid aside h1, .artist-title-block.artist-style-preview strong { font-family: Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.artist-page-content { display: grid; gap: 6px; }.artist-page-content section { background: var(--artist-panel); border: 3px ridge #aaa; }.artist-page-content h2 { margin: 0; padding: 4px 6px; color: #fff; background: var(--artist-accent); font: bold 11px Arial, sans-serif; }.artist-page-content section > p, .artist-page-content section > ul { margin: 0; padding: 8px; }.artist-bio { white-space: pre-wrap; font: 13px/1.4 "Times New Roman", serif; }
.public-gallery { padding: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }.public-gallery figure { min-width: 0; margin: 0; padding: 3px; background: #fff; border: 2px inset #aaa; }.public-gallery img { width: 100%; max-height: 260px; display: block; object-fit: contain; background: #111; }.public-gallery figcaption { padding: 4px 2px 2px; overflow-wrap: anywhere; font: italic 10px/1.2 "Times New Roman", serif; }
.public-track { padding: 6px; border-bottom: 1px dotted #888; }.public-track audio { width: 100%; height: 30px; display: block; margin-top: 4px; }.artist-bottom-links { margin: 0 6px 6px; background: var(--artist-panel); border: 3px ridge #aaa; }.artist-bottom-links h2 { margin: 0; padding: 4px 6px; color: #fff; background: var(--artist-accent); font: bold 11px Arial, sans-serif; }.artist-bottom-links > div { padding: 7px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }.artist-bottom-links a { min-width: 0; padding: 7px 5px; overflow-wrap: anywhere; color: #fff; background: var(--artist-accent); border: 3px outset var(--artist-accent-light); text-align: center; font: bold 10px Arial, sans-serif; text-decoration: none; }.artist-bottom-links a:active { border-style: inset; }.artist-page-footer { padding: 6px; color: #ccc; background: #000; text-align: center; font-size: 8px; }
@media (max-width: 700px) { .theme-picker > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }.studio-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .studio-content { grid-template-columns: 1fr; }.studio-tool-wide { grid-column: 1; }.decoration-controls { grid-template-columns: 1fr; }.artist-page-grid { grid-template-columns: 1fr; }.artist-page-grid > aside { max-width: 240px; margin: auto; }.upload-grid, .gallery-upload-form, .link-form { grid-template-columns: 1fr; }.artist-page-header { align-items: flex-start; flex-direction: column; }.artist-bottom-links > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .settings-grid, .homepage-settings .announcement-fields { grid-template-columns: 1fr; } }

.demo-page { min-height: 100vh; padding: 28px 8px; color: #111; background-color: #090909; background-image: linear-gradient(45deg, #16090a 25%, transparent 25%), linear-gradient(-45deg, #16090a 25%, transparent 25%); background-size: 16px 16px; font: 11px Arial, sans-serif; }
.demo-window { width: 620px; max-width: 100%; margin: auto; background: #d4d0c8; border: 4px ridge #aaa; box-shadow: 6px 6px #000; }
.demo-window > header { padding: 5px 7px; display: flex; justify-content: space-between; color: #fff; background: #741418; font-weight: bold; }
.demo-window > header a { color: #fff; }
.demo-window > header nav { display: flex; gap: 8px; }
.demo-intro { padding: 14px; color: #fff; background: #171313; border-bottom: 3px ridge #aaa; }
.demo-intro h1 { margin: 3px 0 6px; font: bold 30px "Times New Roman", serif; }
.demo-intro p { margin: 4px 0; }
.demo-window form { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-window label { display: grid; gap: 3px; font-weight: bold; }
.demo-window input, .demo-window textarea { min-width: 0; padding: 6px; background: #fff; border: 2px inset #aaa; font: 12px Arial, sans-serif; }
.demo-window textarea { min-height: 90px; resize: vertical; }
.demo-window .wide { grid-column: 1 / -1; }
.demo-file { padding: 7px; background: #eeeae3; border: 2px inset #aaa; }
.demo-honeypot { position: absolute; left: -10000px; }
.demo-result { grid-column: 1 / -1; margin: 0; padding: 7px; border: 2px inset #aaa; font-weight: bold; }
.demo-result.success { color: #16430f; background: #d9f0d5; }
.demo-result.error { color: #741418; background: #f5d8d8; }
.demo-window > footer { width: auto; max-width: none; margin: 0; padding: 7px 10px; color: #555; background: #bbb5ac; border-top: 2px ridge #aaa; text-align: left; }
@media (max-width: 520px) { .demo-window form { grid-template-columns: 1fr; }.demo-window .wide { grid-column: 1; } }
@media (max-width: 620px) { .blog-admin-list article { grid-template-columns: 80px minmax(0, 1fr); }.blog-admin-list article .admin-button, .blog-admin-list article button { grid-row: auto; }.blog-editor .blog-meta-fields { grid-template-columns: 1fr; }.admin-header { align-items: flex-start; flex-direction: column; }.admin-header nav { flex-wrap: wrap; } }

.guestbook-admin-actions { margin-left: auto; align-self: center; display: flex; gap: 4px; }
.guestbook-admin-actions button { padding: 4px 7px; border: 2px outset #bbb; font-size: 9px; cursor: pointer; }
.guestbook-admin-actions .guestbook-delete { color: #fff; background: #741418; }
.confirm-delete { color: #fff !important; background: #8e0808 !important; }
.admin-help { margin: 2px 0 10px; color: #444; }
.demo-inbox .demo-submission { grid-template-columns: 70px minmax(0, 1fr) 120px; align-items: start; margin-bottom: 7px; border-top: 1px solid #888; }
.demo-submission.reviewed { opacity: .78; }
.demo-status { padding: 5px; color: #fff; background: #741418; border: 2px inset #aaa; text-align: center; font-weight: bold; }
.demo-submission.reviewed .demo-status { background: #315f38; }
.demo-details { min-width: 0; }
.demo-details h3, .demo-details p { margin: 0 0 5px; overflow-wrap: anywhere; }
.demo-details h3 { font: bold 16px "Times New Roman", serif; }
.demo-details audio { width: 100%; min-width: 0; }
.demo-copy { padding: 5px; background: #eeeae3; border: 1px inset #aaa; white-space: pre-wrap; }
.demo-actions { display: grid; gap: 5px; }
.demo-actions .admin-button, .demo-actions button { width: 100%; text-align: center; }
@media (max-width: 620px) { .demo-inbox .demo-submission { grid-template-columns: 72px minmax(0, 1fr); }.demo-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .page-shell { width: calc(100% - 18px); }.profile-column { grid-template-columns: 1fr; }.music-player { grid-column: 1; }.hero h2 { font-size: 28px; }.hero-actions { align-items: flex-start; flex-direction: column; }.friend-grid { grid-template-columns: repeat(2, 1fr); }.guestbook form { grid-template-columns: 1fr; }.guestbook .primary-button { grid-column: 1; }.post-meta, footer { flex-direction: column; gap: 8px; }.post-card { padding: 9px; gap: 8px; }
}

/* Visitor color mode */
.theme-toggle {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 100;
  min-height: 32px;
  padding: 5px 9px;
  color: #fff;
  background: #171313;
  border: 3px outset #a6a0a0;
  box-shadow: 2px 2px 0 #000;
  font: bold 10px Arial, sans-serif;
  cursor: pointer;
}
.theme-toggle span { margin-right: 5px; color: #e34a4e; }
.theme-toggle:active { border-style: inset; box-shadow: none; }

[data-color-mode="light"] body { color: #21191b; background: #c8bfb4; }
[data-color-mode="light"] .site {
  background-color: #d8d0c6;
  background-image: linear-gradient(45deg, rgba(87,16,19,.06) 25%, transparent 25%), linear-gradient(-45deg, rgba(87,16,19,.06) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(87,16,19,.06) 75%), linear-gradient(-45deg, transparent 75%, rgba(87,16,19,.06) 75%);
}
[data-color-mode="light"] .blog-page,
[data-color-mode="light"] .artist-portal,
[data-color-mode="light"] .admin-shell,
[data-color-mode="light"] .demo-page,
[data-color-mode="light"] .contact-page {
  background-color: #d8d0c6;
  background-image: linear-gradient(45deg, rgba(87,16,19,.07) 25%, transparent 25%), linear-gradient(-45deg, rgba(87,16,19,.07) 25%, transparent 25%);
}
[data-color-mode="light"] .public-artist-page { --artist-page-bg: #d8d0c6; }
[data-color-mode="light"] .artist-pattern-checker { background-image: linear-gradient(45deg, rgba(87,16,19,.09) 25%, transparent 25%), linear-gradient(-45deg, rgba(87,16,19,.09) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(87,16,19,.09) 75%), linear-gradient(-45deg, transparent 75%, rgba(87,16,19,.09) 75%); }
[data-color-mode="light"] .artist-pattern-stripes { background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(87,16,19,.09) 9px 11px); }
[data-color-mode="light"] .artist-pattern-dots { background-image: radial-gradient(circle, rgba(87,16,19,.22) 1px, transparent 1.5px); }
[data-color-mode="light"] .theme-toggle { color: #111; background: #d4d0c8; border-color: #fff; }
[data-color-mode="light"] .theme-toggle span { color: #741418; }

/* Natural-height Showcase columns keep portrait and landscape work packed together. */
.public-gallery {
  display: block;
  columns: 2 190px;
  column-gap: 7px;
}
.public-gallery figure {
  width: 100%;
  margin: 0 0 7px;
  display: inline-block;
  break-inside: avoid;
  vertical-align: top;
  border-color: var(--gallery-border-color, #b7282b);
}
.public-gallery img { height: auto; max-height: none; object-fit: initial; }
.studio-gallery { display: block; columns: 4 130px; column-gap: 6px; }
.studio-gallery figure { width: 100%; margin: 0 0 6px; display: inline-block; break-inside: avoid; vertical-align: top; }
.studio-gallery img { height: auto; aspect-ratio: auto; object-fit: initial; }

/* Artist-selected Showcase frames */
.gallery-border-double .public-gallery figure,
.studio-gallery.gallery-border-double figure,
.border-sample.gallery-border-double { border: 6px double var(--gallery-border-color, #b7282b); }
.gallery-border-dotted .public-gallery figure,
.studio-gallery.gallery-border-dotted figure,
.border-sample.gallery-border-dotted { border: 5px dotted var(--gallery-border-color, #b7282b); }
.gallery-border-dashed .public-gallery figure,
.studio-gallery.gallery-border-dashed figure,
.border-sample.gallery-border-dashed { border: 5px dashed var(--gallery-border-color, #b7282b); }
.gallery-border-beveled .public-gallery figure,
.studio-gallery.gallery-border-beveled figure,
.border-sample.gallery-border-beveled { border: 7px ridge var(--gallery-border-color, #b7282b); }
.gallery-border-sticker .public-gallery figure,
.studio-gallery.gallery-border-sticker figure,
.border-sample.gallery-border-sticker { border: 7px solid var(--gallery-border-color, #b7282b); box-shadow: 4px 4px 0 #000; }
.gallery-border-none .public-gallery figure,
.studio-gallery.gallery-border-none figure,
.border-sample.gallery-border-none { border: 0; box-shadow: none; }

.image-border-picker { padding: 7px; border: 2px groove #fff; }
.image-border-picker legend { padding: 0 4px; color: #741418; font-weight: bold; }
.image-border-picker > p { margin: 0 0 6px; color: #555; font-size: 9px; }
.image-border-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.image-border-options label { min-width: 0; padding: 5px; display: grid; grid-template-columns: auto 28px minmax(0, 1fr); align-items: center; gap: 5px; background: #d4d0c8; border: 2px outset #fff; cursor: pointer; }
.image-border-options label.selected { background: #f1dddd; border-style: inset; outline: 2px solid #741418; }
.border-sample { width: 25px; height: 25px; display: block; background: #111; }
.border-color-control { width: fit-content; margin-top: 7px; padding: 5px 7px; display: flex !important; align-items: center; gap: 7px !important; background: #d4d0c8; border: 2px outset #fff; }
.border-color-control input { width: 44px; height: 28px; padding: 1px; cursor: pointer; }
.border-color-control span { font: 10px "Courier New", monospace; }

@media (max-width: 600px) {
  .image-border-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-gallery { columns: 2 120px; }
}
@media (max-width: 380px) {
  .image-border-options { grid-template-columns: 1fr; }
  .public-gallery, .studio-gallery { columns: 1; }
  .theme-toggle { right: 5px; bottom: 5px; }
}

/* StarChaser Studios gothic brand layer */
body { background: #111; }
a { color: #831c20; }
.site {
  background-color: #111;
  background-image: radial-gradient(circle at 12px 12px, rgba(255,255,255,.28) 1px, transparent 1.5px), radial-gradient(circle at 36px 30px, rgba(183,40,43,.72) 1px, transparent 1.5px), linear-gradient(135deg, rgba(87,16,19,.24), transparent 45%);
}
.topbar { background: linear-gradient(#211d1e, #090909); border-bottom-color: #a92428; box-shadow: 0 3px 0 rgba(0,0,0,.65); }
.wordmark { font-family: Georgia, "Times New Roman", serif; }
.wordmark span:first-child { color: #d33438; }
.quiet-button { border-color: #8e272a; background: #1a1516; }
.announcement { color: #f3eeee; background: #3b1013; border-color: #b7282b; }
.announcement span { color: #fff; }
.panel { border-color: #7f2023; box-shadow: 3px 3px 0 rgba(0,0,0,.55); }
.avatar { background: #191919; border-color: #a9393c; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.tagline { color: #571013; background: #eee5e3; border-color: #8d2023; }
.contact-grid { background: #e8e2df; }
.contact-grid a, .contact-grid button { color: #6f1518; border-color: #cbbaba; }
.now-playing button { color: #1b1113; background: #d8d2ca; border-color: #fff; }
.hero { background: linear-gradient(125deg, #121011 0%, #2b0d10 52%, #171313 100%); border-color: #9b292c; }
.eyebrow { color: #e44c50; }
.hero h2 { font-family: Georgia, "Times New Roman", serif; text-shadow: 3px 3px 0 #000; }
.hero-art { display: grid; place-items: center; }
.hero-art img { width: min(240px, 100%); aspect-ratio: 1; object-fit: cover; border: 1px solid #7e2023; box-shadow: 0 0 35px rgba(183,40,43,.35); transform: rotate(2deg); }
.primary-button { color: #fff; background: #a92428; border-color: #df5a5e; box-shadow: 2px 2px 0 #000; }
.primary-button:hover { color: #fff; background: #c5363a; }
.post-card h3 { font-family: Georgia, "Times New Roman", serif; }
.post-card h3 a { color: #791b1f; }
.post-card p { color: #514548; }
.friend-avatar { background: #171313; border-color: #8f3235; }
.guestbook form { background: #e9e1df; border-color: #c8aaaa; }
.guest-entries strong { color: #791b1f; }
.visitor-counter { color: #d9cfd0; background: #0e0c0d; border-color: #722326; }
.visitor-counter strong { color: #e34a4e; }
footer { color: #ae999b; border-color: #592326; }
footer a { color: #d4bfc1; }

/* Compact late-1990s layout */
html { scroll-behavior: auto; }
body { font-family: "Times New Roman", Times, serif; font-size: 13px; }
.site {
  background-color: #090909;
  background-image: linear-gradient(45deg, #16090a 25%, transparent 25%), linear-gradient(-45deg, #16090a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #16090a 75%), linear-gradient(-45deg, transparent 75%, #16090a 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.topbar {
  width: 800px;
  max-width: 100%;
  min-height: 36px;
  margin: 0 auto;
  padding: 2px 4px;
  gap: 4px;
  background: #000;
  border: 3px ridge #8a8a8a;
  box-shadow: none;
}
.wordmark { padding: 2px 8px; font: bold 20px/1 "Times New Roman", serif; letter-spacing: 0; text-shadow: 2px 2px #741418; }
.topbar nav { gap: 0; border: 2px inset #777; }
.topbar nav { flex: 1; justify-content: center; min-width: 0; }
.topbar nav a { padding: 5px 6px; color: #fff; background: #741418; border: 0; border-right: 1px solid #d6a0a0; font: bold 10px Arial, sans-serif; text-decoration: underline; white-space: nowrap; }
.topbar .wordmark { flex: 0 0 auto; margin-right: 0; }
.topbar .quiet-button { flex: 0 0 auto; white-space: nowrap; }
.quiet-button { padding: 4px 6px; border: 2px outset #aaa; background: #d4d0c8; color: #000; font: 10px Arial, sans-serif; }
.announcement { width: 800px; max-width: 100%; height: 25px; margin: 5px auto 0; padding: 3px; overflow: hidden; white-space: nowrap; color: #f1dddd; background: #000; border: 2px inset #999; font: bold 11px "Courier New", monospace; text-align: left; }
.announcement-track { width: max-content; animation: marquee 16s linear infinite; }
.announcement span { color: #ff0000; animation: blink .65s steps(1) infinite; }
.page-shell { width: 800px; max-width: calc(100% - 8px); margin: 5px auto 18px; grid-template-columns: 230px 1fr; gap: 5px; }
.profile-column, .content-column { gap: 5px; }
.panel { border: 3px ridge #b7b7b7; box-shadow: none; }
.panel > h2, .profile-card > h1, .music-player > h2, .services-panel > h2, .section-title { padding: 3px 5px; background: #741418; border-bottom: 2px ridge #aaa; font: bold 12px Arial, sans-serif; }
.profile-card > h1 { text-align: center; font-size: 15px; }
.under-construction { padding: 3px; color: #e34a4e; background: #000; text-align: center; font: bold 9px Arial, sans-serif; animation: blink 1.2s steps(1) infinite; }
.profile-top { grid-template-columns: 95px 1fr; gap: 5px; padding: 5px; }
.avatar { height: 102px; border-width: 2px; }
.profile-facts { font: 9px/1.3 Arial, sans-serif; }
.profile-facts div { margin-bottom: 2px; }
.tagline { margin: 2px 5px 5px; padding: 3px; font-size: 10px; }
.contact-grid a, .contact-grid button { min-height: 25px; padding: 4px; color: #741418; font: bold 9px Arial, sans-serif; text-decoration: underline; }
.music-player .now-playing { padding: 5px; }
.now-playing button { width: 25px; height: 23px; padding: 0; }
.visitor-counter { padding: 4px; border-width: 3px; }
.visitor-counter strong { margin: 2px; font-size: 15px; }
.hero { min-height: 188px; grid-template-columns: 1.5fr .7fr; border-width: 3px; background: #171313; }
.hero::before { background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.035) 3px); }
.hero-copy { padding: 12px; }
.eyebrow { margin-bottom: 4px; color: #e34a4e; font-size: 9px; }
.hero h2 { font-size: 26px; line-height: 1; letter-spacing: -1px; }
.hero-copy > p:not(.eyebrow) { margin: 6px 0; font-size: 10px; line-height: 1.35; }
.hero-actions { margin-top: 8px; gap: 9px; }
.primary-button { padding: 5px 8px; border: 2px outset #df5a5e; background: #a92428; color: #fff; box-shadow: none; font: bold 10px Arial, sans-serif; }
.primary-button:hover { background: #c5363a; color: #fff; }
.text-link { color: #f1dddd; font: 10px Arial, sans-serif; }
.hero-art { min-height: 188px; }
.hero-art img { width: 150px; border: 2px ridge #8a8a8a; box-shadow: none; transform: none; image-rendering: auto; }
.section-title h2 { font-size: 12px; }
.section-title a, .section-title span { color: #fff; font-size: 9px; text-decoration: underline; }
.post-list { gap: 3px; }
.post-card { grid-template-columns: 45px 1fr; padding: 5px; gap: 5px; }
.post-card time { height: 36px; padding: 2px; font-size: 9px; }
.post-card h3 { margin-bottom: 2px; font-size: 13px; }
.post-card h3 a { color: #741418; text-decoration: underline; }
.post-card p { font: 10px/1.3 Arial, sans-serif; }
.post-meta { margin-top: 4px; padding-top: 3px; font-size: 8px; }
.friend-grid { padding: 6px; gap: 6px 4px; }
.friend-avatar { border-width: 2px; font-size: 20px; }
.friend strong { color: #741418; text-decoration: underline; font: 10px Arial, sans-serif; }
.guestbook form { padding: 5px; gap: 4px; }
.guestbook input, .guestbook textarea { height: 25px; padding: 3px; border: 2px inset #aaa; font: 10px Arial, sans-serif; }
.guestbook .primary-button { height: 25px; }
.guest-entries article { padding: 5px; gap: 5px; }
.mini-avatar { width: 25px; height: 25px; border-width: 2px; }
.guest-entries p { font: 10px/1.2 Arial, sans-serif; }
footer { width: 800px; max-width: calc(100% - 8px); margin: auto; padding: 6px 2px 18px; flex-wrap: wrap; gap: 5px; color: #ccc; border-top: 1px solid #777; font: 9px Arial, sans-serif; text-align: center; }
footer nav { gap: 7px; }
footer a { color: #d4bfc1; }
@keyframes marquee { to { transform: translateX(-100%); } }

@media (max-width: 760px) {
  .topbar { padding: 4px; }
  .topbar .wordmark { width: calc(100% - 105px); }
  .topbar nav { flex-basis: 100%; justify-content: flex-start; overflow-x: auto; }
  .topbar nav a { flex: 0 0 auto; padding-inline: 8px; }
  .page-shell { grid-template-columns: 1fr; }
  .content-column { order: -1; }
  .profile-column { grid-template-columns: 1fr 1fr; }
  .profile-card, .visitor-counter { grid-column: 1 / -1; }
  .hero { grid-template-columns: 1fr; }
  .hero-art { display: none; }
}

/* Public artist directory */
.artist-hub-site { min-height: 100vh; padding-bottom: 20px; }
.artist-hub-shell { width: 800px; max-width: calc(100% - 8px); margin: 6px auto 16px; }
.artist-hub-window > header { display: flex; justify-content: space-between; padding: 4px 6px; color: #fff; background: #741418; border-bottom: 2px ridge #aaa; font: bold 10px "Courier New", monospace; }
.artist-hub-intro { display: grid; grid-template-columns: 126px 1fr; gap: 12px; align-items: center; padding: 10px; color: #eee; background: #171313; border-bottom: 3px ridge #aaa; }
.artist-hub-intro img { width: 126px; height: 126px; object-fit: cover; border: 3px ridge #b7b7b7; }
.artist-hub-intro h1 { margin: 1px 0 4px; color: #fff; font: bold 34px/1 "Times New Roman", serif; text-shadow: 2px 2px #741418; }
.artist-hub-intro p { margin: 4px 0; font: 11px/1.4 Arial, sans-serif; }
.artist-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 7px; background: #d4d0c8; }
.artist-hub-card { min-width: 0; display: grid; grid-template-columns: 105px minmax(0, 1fr); padding: 5px; color: #111; background: #eeeae3; border: 3px outset #fff; text-decoration: none; }
.artist-hub-card:hover { background: #fff; border-style: inset; }
.artist-hub-image { width: 100px; height: 100px; display: grid; place-items: center; overflow: hidden; color: #d9cfd0; background: #171313; border: 3px ridge #8f3235; font: bold 34px Georgia, "Times New Roman", serif; text-shadow: none; }
.artist-hub-image img { width: 100%; height: 100%; object-fit: cover; }
.artist-hub-copy { min-width: 0; padding: 3px 7px; display: flex; flex-direction: column; align-items: flex-start; }
.artist-hub-copy small { margin-bottom: 5px; padding: 2px 4px; color: #fff; background: #741418; font: bold 8px Arial, sans-serif; }
.artist-hub-labels { margin: 0 0 5px !important; display: flex; flex-wrap: wrap; gap: 3px; color: inherit !important; text-decoration: none !important; }
.artist-hub-labels small { margin: 0; }
.artist-hub-copy strong { max-width: 100%; color: #741418; text-decoration: underline; font: bold 17px "Times New Roman", serif; overflow-wrap: anywhere; }
.artist-hub-copy em { margin-top: 3px; color: #555; font: normal 10px Arial, sans-serif; }
.artist-hub-copy > span { margin-top: auto; color: #741418; font: 10px Arial, sans-serif; text-decoration: underline; }
.artist-hub-empty { grid-column: 1 / -1; margin: 0; padding: 18px; text-align: center; border: 2px inset #aaa; }
.artist-hub-links { padding: 7px; display: flex; justify-content: center; gap: 14px; background: #000; border: 3px ridge #777; font: bold 10px "Courier New", monospace; }
.artist-hub-links a { color: #fff; }

@media (max-width: 620px) {
  .artist-hub-intro { grid-template-columns: 86px 1fr; }
  .artist-hub-intro img { width: 86px; height: 86px; }
  .artist-hub-intro h1 { font-size: 27px; }
  .artist-hub-grid { grid-template-columns: 1fr; }
}

/* Blog writing and writer profiles */
.writer-profile-panel { width: min(760px, 100%); margin: 0 auto 8px; padding: 7px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 9px; color: #111; background: #d4d0c8; border: 3px outset #fff; box-shadow: 2px 2px #000; }
.writer-profile-panel > img { width: 72px; height: 72px; object-fit: cover; background: #111; border: 3px ridge #999; }
.writer-profile-panel h2 { margin: 0 0 3px; color: #fff; background: #741418; padding: 3px 5px; font: bold 11px Arial, sans-serif; }
.writer-profile-panel p { margin: 3px 0 6px; font-size: 10px; }
.writer-profile-panel span { margin-left: 7px; font-size: 10px; }
.writer-photo-button { position: relative; cursor: pointer; }
.writer-photo-button input, .blog-image-upload input, .blog-video-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.account-icon { object-fit: cover; border: 0; }
.blog-manager { width: min(980px, 100%); }
.blog-editor { width: min(980px, 100%); }
.blog-format-toolbar { margin-bottom: -2px; padding: 4px; display: flex; flex-wrap: wrap; gap: 3px; background: #bbb5ac; border: 2px outset #fff; }
.blog-format-toolbar button, .blog-image-upload, .blog-video-upload { min-height: 27px; padding: 4px 8px; color: #000; background: #d4d0c8; border: 2px outset #fff; font: 11px Arial, sans-serif; cursor: pointer; }
.blog-format-toolbar button:active, .blog-image-upload:active, .blog-video-upload:active { border-style: inset; }
.blog-image-upload, .blog-video-upload { position: relative; display: inline-flex; align-items: center; color: #fff; background: #741418; font-weight: bold; }
.blog-editor-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; align-items: stretch; }
.blog-editor-workspace > label { min-width: 0; }
.blog-editor .blog-content-input { height: 430px; min-height: 430px; font: 12px/1.45 "Courier New", monospace; }
.blog-live-preview { min-width: 0; height: 456px; overflow: auto; background: #eeeae3; border: 2px inset #888; }
.blog-live-preview > h3 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 4px 6px; color: #fff; background: #741418; border-bottom: 2px ridge #aaa; font: bold 11px Arial, sans-serif; }
.blog-live-preview .entry-body { min-height: 400px; padding: 10px 12px; }
.preview-placeholder { color: #777; font-style: italic; }
.admin-blog-avatar { width: 42px; height: 42px; object-fit: cover; background: #111; border: 2px ridge #999; }
.post-author-icon { min-width: 0; display: grid; gap: 2px; align-content: start; }
.post-author-icon img { width: 45px; height: 45px; object-fit: cover; background: #111; border: 2px ridge #999; }
.post-card .post-author-icon time { width: 45px; height: auto; min-height: 17px; padding: 2px 1px; }
.post-meta { align-items: center; gap: 6px; }
.post-meta span { color: #555; overflow-wrap: anywhere; }
.blog-author { display: inline-flex !important; align-items: center; gap: 5px; }
.blog-author img { width: 24px; height: 24px; object-fit: cover; background: #111; border: 2px ridge #999; }
.blog-post-byline { margin-top: 5px; display: flex; align-items: center; gap: 7px; }
.blog-post-byline img { width: 42px; height: 42px; object-fit: cover; background: #111; border: 2px ridge #c97878; }
.blog-entry > header .blog-post-byline p { margin: 0; font-size: 9px; }
.entry-body h2 { margin: 17px 0 7px; color: #741418; font: bold 19px "Times New Roman", serif; }
.entry-body h3 { margin: 14px 0 5px; color: #741418; font: bold 16px "Times New Roman", serif; }
.entry-body blockquote { margin: 14px 20px; padding: 8px 12px; color: #741418; background: #ddd5cf; border: 1px dashed #741418; font: italic bold 15px Georgia, serif; }
.entry-body hr { height: 9px; margin: 18px 0; border: 0; background: center / auto 9px repeat-x linear-gradient(90deg, transparent 0 8px, #741418 8px 11px, transparent 11px 16px); }
.entry-body code { padding: 1px 3px; background: #d4d0c8; border: 1px solid #aaa; font: 11px "Courier New", monospace; }
.blog-image { max-width: 100%; margin: 14px auto; text-align: center; }
.blog-image img, .blog-inline-image { display: block; width: auto; max-width: 100%; max-height: 700px; margin: auto; object-fit: contain; border: 3px ridge #999; }
.blog-image figcaption { padding: 4px; color: #555; font: italic 10px Arial, sans-serif; }
.blog-video { max-width: 720px; margin: 14px auto; padding: 5px; color: #111; background: #c6c0b8; border: 4px ridge #888; box-shadow: 3px 3px #111; }
.blog-video-screen { position: relative; display: grid; place-items: center; overflow: hidden; background: #000; border: 3px inset #777; }
.blog-video video { width: 100%; max-height: 72vh; display: block; background: #000; cursor: pointer; }
.blog-video-center-play { position: absolute; width: 74px; height: 40px; color: #fff; background: #741418; border: 4px outset #c97878; font: bold 13px "Courier New", monospace; letter-spacing: 1px; cursor: pointer; }
.blog-video-center-play:active { border-style: inset; }
.blog-video-controls { padding: 5px; display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: 6px; color: #fff; background: #171313; border: 3px outset #666; font: bold 9px "Courier New", monospace; }
.blog-video-controls button { min-width: 74px; padding: 4px 7px; color: #fff; background: #741418; border: 3px outset #b05255; font: bold 9px "Courier New", monospace; cursor: pointer; }
.blog-video-controls button:active { border-style: inset; }
.blog-video-controls input[type="range"] { height: 14px; margin: 0; padding: 0; appearance: none; color-scheme: dark; background: #050505; border: 2px inset #666; cursor: pointer; }
.blog-video-controls input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: #050505; }
.blog-video-controls input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -2px; appearance: none; background: #b7282b; border: 2px outset #d66b6e; border-radius: 0; }
.blog-video-controls input[type="range"]::-moz-range-track { height: 8px; background: #050505; border: 0; }
.blog-video-controls input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; background: #b7282b; border: 2px outset #d66b6e; border-radius: 0; }
.blog-video figcaption { padding: 5px 2px 1px; color: #4a3d3f; font: italic 10px Arial, sans-serif; text-align: center; }
@media (max-width: 520px) { .blog-video-controls { grid-template-columns: auto minmax(60px, 1fr); }.blog-video-controls span { grid-column: 1 / -1; text-align: center; } }

@media (max-width: 760px) {
  .blog-editor-workspace { grid-template-columns: minmax(0, 1fr); }
  .blog-editor .blog-content-input { height: 330px; min-height: 330px; }
  .blog-live-preview { height: auto; min-height: 250px; }
  .post-meta { align-items: flex-start; }
}

/* Navigation spacing */
.topbar { min-height: 44px; padding: 4px 6px; gap: 7px; }
.topbar nav { gap: 3px; padding: 3px; background: #211d1e; border: 2px inset #777; }
.topbar nav a { min-height: 30px; padding: 7px 9px; display: inline-flex; align-items: center; justify-content: center; background: #741418; border: 2px outset #a94b4e; font-size: 10px; line-height: 1; text-align: center; }
.topbar nav a:hover, .topbar nav a:focus-visible { color: #fff; background: #922126; }
.topbar nav a:active, .topbar nav a[aria-current="page"] { background: #571013; border-style: inset; }
.topbar .quiet-button { min-height: 30px; padding: 6px 8px; }
.contact-grid { gap: 1px; padding: 3px; background: #b8b1ad; border-top: 2px ridge #aaa; }
.contact-grid a, .contact-grid button { min-height: 31px; padding: 6px 7px; background: #eeeae3; border: 2px outset #fff; line-height: 1.25; }
.contact-grid a:active, .contact-grid button:active { border-style: inset; }

.admin-header { display: block; padding: 6px; }
.admin-header > div { padding: 1px 2px 6px; }
.admin-header nav { margin: 0; padding: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; background: #d4d0c8; border: 2px inset #888; }
.admin-header nav a, .admin-header nav form button { min-height: 28px; padding: 5px 8px; display: inline-flex; align-items: center; color: #000; background: #d4d0c8; border: 2px outset #fff; font: 10px Arial, sans-serif; text-decoration: none; cursor: pointer; }
.admin-header nav a:active, .admin-header nav form button:active { border-style: inset; }
.admin-header nav form { margin: 0 0 0 auto; }
.admin-actions { flex-wrap: wrap; gap: 5px; padding-top: 3px; }
.admin-actions button { min-height: 29px; }

.blog-masthead { padding: 10px 9px 8px; }
.blog-masthead p { margin: 7px 5px; }
.blog-masthead nav { padding: 5px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; background: #4b0e11; }
.blog-masthead nav a { min-height: 29px; margin: 0; padding: 6px 10px; display: inline-flex; align-items: center; color: #fff; background: #741418; border: 2px outset #b05255; text-decoration: none; }
.blog-masthead nav a:active { border-style: inset; }
.blog-sidebar ul { padding-block: 7px; }
.blog-sidebar li { margin: 0 0 3px; }
.blog-sidebar li a { padding: 3px 4px; display: block; line-height: 1.25; border-bottom: 1px dotted #aaa; }
.blog-footer { padding: 8px; align-items: center; gap: 7px 14px; }
.blog-footer nav, footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 12px; }
.blog-footer nav a, footer nav a { padding: 2px 3px; line-height: 1.35; }

.portal-links { margin-top: 15px; padding: 6px; flex-wrap: wrap; gap: 5px; background: #bbb5ac; border: 2px inset #999; }
.portal-links a { min-width: 92px; padding: 6px 10px; color: #000; background: #d4d0c8; border: 2px outset #fff; text-decoration: none; }
.artist-dashboard > header { padding: 7px; flex-wrap: wrap; align-items: flex-start; }
.artist-dashboard nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.artist-dashboard nav a, .artist-dashboard nav form button { min-height: 27px; padding: 5px 7px; display: inline-flex; align-items: center; color: #000; background: #d4d0c8; border: 2px outset #fff; font: 9px Arial, sans-serif; text-decoration: none; cursor: pointer; }
.artist-dashboard nav a:active, .artist-dashboard nav form button:active { border-style: inset; }
.artist-page-header { padding: 7px; align-items: center; }
.artist-page-header > span { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.artist-page-header a { padding: 4px 7px; display: inline-block; color: #fff; background: var(--artist-accent); border: 2px outset var(--artist-accent-light); text-decoration: none; }
.artist-page-header a:active { border-style: inset; }
.artist-hub-links { padding: 8px; flex-wrap: wrap; gap: 5px; }
.artist-hub-links a { min-height: 29px; padding: 6px 10px; display: inline-flex; align-items: center; color: #fff; background: #741418; border: 2px outset #b05255; text-decoration: none; }
.artist-hub-links a:active { border-style: inset; }
.demo-window > header { padding: 7px; align-items: center; gap: 8px; }
.demo-window > header nav { flex-wrap: wrap; gap: 4px; }
.demo-window > header nav a { padding: 5px 8px; color: #fff; background: #571013; border: 2px outset #b05255; text-decoration: none; }

@media (max-width: 760px) {
  .topbar { padding: 5px; gap: 5px; }
  .topbar .wordmark { width: calc(100% - 112px); padding-inline: 5px; }
  .topbar nav { width: 100%; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; padding: 4px; scrollbar-width: thin; }
  .topbar nav a { flex: 0 0 auto; padding-inline: 11px; }
  .admin-header nav form { margin-left: 0; }
  .artist-dashboard nav { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .blog-masthead nav a { flex: 1 1 calc(50% - 4px); }
  .blog-footer, footer { text-align: left; }
  .blog-footer nav, footer nav { justify-content: flex-start; }
  .artist-page-header { align-items: flex-start; }
  .artist-page-header > span { justify-content: flex-start; }
}

/* Contact page and invisible guestbook spam field */
.guestbook-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.contact-window { width: 650px; }
.contact-address { display: inline-block; margin-top: 7px; padding: 5px 8px; color: #f1dddd; background: #000; border: 2px inset #777; font: bold 11px "Courier New", monospace; }
.contact-form { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.contact-form label { display: grid; gap: 4px; font-weight: bold; }
.contact-form input, .contact-form textarea { min-width: 0; padding: 7px; background: #fff; border: 2px inset #aaa; font: 12px Arial, sans-serif; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form .wide { grid-column: 1 / -1; }
.contact-status { min-height: 15px; margin: 0; color: #315f38; font-weight: bold; }
@media (max-width: 520px) { .contact-form { grid-template-columns: 1fr; }.contact-form .wide { grid-column: 1; } }
.admin-form .artist-blog-access { margin-top: 3px; padding: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 7px; background: #f1dddd; border: 2px inset #aaa; }
.artist-blog-access input { margin-top: 2px; }
.artist-blog-access span, .artist-blog-access small { display: block; }
.artist-blog-access strong { color: #741418; }
.artist-blog-access small { margin-top: 3px; color: #444; font-weight: normal; line-height: 1.35; }

/* Control panel layout */
.admin-shell { padding-bottom: 45px; }
.admin-shell > .admin-header, .admin-start-here, .admin-control-group { width: min(940px, 100%); }
.admin-start-here { margin: 0 auto 12px; padding: 13px; background: #eeeae3; border: 3px outset #fff; box-shadow: 2px 2px #000; }
.admin-start-here h2 { margin: 1px 0 4px; color: #741418; font: bold 20px "Times New Roman", serif; }
.admin-start-here > p:not(.admin-step-label) { margin: 0 0 10px; color: #333; }
.admin-step-label { width: fit-content; margin: 0; padding: 2px 6px; color: #e34a4e; background: #000; font: bold 9px "Courier New", monospace; }
.admin-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.admin-quick-grid a { min-width: 0; min-height: 68px; padding: 8px; display: grid; align-content: center; gap: 3px; color: #000; background: #d4d0c8; border: 3px outset #fff; text-decoration: none; }
.admin-quick-grid a:hover, .admin-quick-grid a:focus-visible { background: #f1dddd; }
.admin-quick-grid a:active { border-style: inset; }
.admin-quick-grid strong { color: #741418; text-decoration: underline; font-size: 12px; }
.admin-quick-grid span { color: #444; font-size: 9px; line-height: 1.3; }
.admin-control-group { margin: 0 auto 12px; padding: 7px; scroll-margin-top: 8px; background: #bdb8af; border: 3px outset #fff; box-shadow: 2px 2px #000; }
.admin-control-group > header { margin: -7px -7px 8px; padding: 7px 9px; display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: #fff; background: #741418; border-bottom: 3px ridge #aaa; }
.admin-control-group > header > span { width: 30px; height: 30px; display: grid; place-items: center; color: #e34a4e; background: #000; border: 2px inset #777; font: bold 11px "Courier New", monospace; }
.admin-control-group > header h2 { margin: 0; font: bold 15px Arial, sans-serif; }
.admin-control-group > header p { margin: 2px 0 0; color: #f1dddd; font-size: 9px; }
.admin-control-group > header a { color: #fff; font-size: 9px; }
.admin-control-group .admin-toolbar, .admin-control-group .admin-form, .admin-control-group .admin-list, .admin-control-group .team-manager { width: 100%; max-width: none; box-shadow: none; }
.admin-control-group .admin-toolbar { margin-bottom: 7px; }
.admin-control-group .admin-list { margin-bottom: 0; }
.admin-control-group .admin-form { padding: 11px; gap: 9px; }
.admin-control-group .admin-form h2 { padding-bottom: 5px; color: #741418; border-bottom: 1px solid #999; }
.admin-control-group .admin-form input, .admin-control-group .admin-form select, .admin-control-group .admin-form textarea { min-height: 30px; padding: 6px; }
.admin-control-group input[type="file"] { min-height: 36px; background: #fff; }
.admin-control-group .admin-actions { margin-top: 3px; padding: 7px; background: #f1dddd; border: 2px inset #aaa; }
.admin-control-group .admin-actions span { color: #315f38; font-weight: bold; }
.admin-control-group button:hover, .admin-control-group .admin-button:hover { background: #fff; }
@media (max-width: 700px) { .admin-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .admin-quick-grid { grid-template-columns: 1fr; }.admin-control-group > header { grid-template-columns: 31px minmax(0, 1fr); }.admin-control-group > header > a { grid-column: 2; }.admin-actions { align-items: flex-start; flex-direction: column; } }

/* Artist profile comments */
.artist-kind-badges { margin: 3px 0 7px; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.artist-kind-badges .artist-kind-badge { margin: 0; }
.artist-comments { margin: 0 6px 6px; color: var(--artist-ink); background: var(--artist-panel); border: 3px ridge #aaa; }
.artist-comments-title { padding: 4px 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #fff; background: var(--artist-accent); border-bottom: 2px ridge #aaa; }
.artist-comments-title h2 { margin: 0; font: bold 11px Arial, sans-serif; }
.artist-comments-title span { font: 9px Arial, sans-serif; }
.artist-comments form { padding: 8px; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px; background: rgba(255,255,255,.35); border-bottom: 2px ridge #aaa; }
.artist-comments form > p { grid-column: 1 / -1; margin: 0; font: italic 11px "Times New Roman", serif; }
.artist-comments label { min-width: 0; display: grid; gap: 3px; font-weight: bold; }
.artist-comments input, .artist-comments textarea { min-width: 0; padding: 6px; color: #111; background: #fff; border: 2px inset #aaa; font: 12px Arial, sans-serif; }
.artist-comments textarea { min-height: 72px; resize: vertical; }
.artist-comment-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.artist-comment-submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.artist-comment-submit button, .artist-comment-actions button { min-height: 30px; padding: 5px 9px; color: #111; background: #d4d0c8; border: 2px outset #fff; font: bold 10px Arial, sans-serif; cursor: pointer; }
.artist-comment-submit button:active, .artist-comment-actions button:active { border-style: inset; }
.artist-comment-submit span { color: var(--artist-accent); font-weight: bold; }
.artist-comment-list article { padding: 7px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; align-items: start; border-bottom: 1px dotted #888; }
.artist-comment-list article:last-child { border-bottom: 0; }
.artist-comment-avatar { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--artist-accent); border: 2px ridge var(--artist-accent-light); }
.artist-comment-list header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.artist-comment-list header strong { color: var(--artist-accent); font: bold 12px "Times New Roman", serif; overflow-wrap: anywhere; }
.artist-comment-list time { color: #666; font-size: 8px; }
.artist-comment-list p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.35 Arial, sans-serif; }
.artist-comment-actions { display: flex; flex-wrap: wrap; gap: 3px; }
.artist-comment-actions .confirm-delete { color: #fff; background: #741418; }
.artist-comments-empty { margin: 0; padding: 14px; color: #555; text-align: center; font-style: italic; }

/* Mobile layout */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, audio { max-width: 100%; }
button, input, textarea, select { max-width: 100%; }

@media (max-width: 760px) {
  .topbar { width: calc(100% - 8px); max-width: none; align-items: center; flex-wrap: wrap; }
  .topbar .wordmark { width: auto; min-width: 0; flex: 1 1 auto; font-size: clamp(17px, 5vw, 20px); }
  .topbar .quiet-button { margin-left: auto; }
  .topbar nav { width: 100%; flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; border: 0; }
  .topbar nav a { min-width: 0; min-height: 36px; padding: 7px 4px; display: grid; place-items: center; border: 1px outset #b05255; text-align: center; white-space: normal; line-height: 1.15; }
  .announcement { width: calc(100% - 8px); }
  .admin-visibility-bar { max-width: calc(100% - 8px); align-items: flex-start; flex-wrap: wrap; }
  .admin-visibility-bar span { width: 100%; margin: 0; overflow-wrap: anywhere; }
  .page-shell, .artist-hub-shell { width: calc(100% - 8px); max-width: none; }
  .post-card, .guest-entries article { min-width: 0; }
  .post-card > div, .guest-entries p { min-width: 0; overflow-wrap: anywhere; }
  .artist-dashboard, .studio-dashboard, .admin-header, .admin-window, .admin-form, .admin-list, .admin-toolbar, .homepage-settings, .writer-profile-panel, .blog-manager, .blog-editor { max-width: 100%; }
  .artist-dashboard nav, .admin-header nav { width: 100%; flex-wrap: wrap; }
  .artist-dashboard nav a, .artist-dashboard nav button, .admin-header nav a, .admin-header nav button { min-height: 32px; display: inline-flex; align-items: center; }
  .studio-intro { align-items: flex-start; flex-direction: column; }
  .studio-item { align-items: stretch; flex-direction: column; }
  .studio-item-actions, .admin-list-actions { width: 100%; }
  .studio-item-actions button, .admin-list-actions a, .admin-list-actions button { min-height: 34px; }
  .demo-window, .contact-window { width: calc(100% - 8px); max-width: none; }
  .demo-window > header, .contact-window > header { align-items: flex-start; flex-wrap: wrap; gap: 7px; }
  .demo-window > header nav, .contact-window > header nav { flex-wrap: wrap; }
  footer { width: calc(100% - 8px); max-width: none; }
}

@media (max-width: 600px) {
  .public-artist-page { width: 100%; max-width: 100%; border-inline-width: 2px; }
  .artist-page-grid { padding: 5px; }
  .artist-page-grid > aside { width: min(100%, 320px); max-width: none; }
  .artist-banner { max-height: 190px; }
  .artist-decoration { padding-inline: 5%; }
  .artist-comments form { grid-template-columns: 1fr; }
  .artist-comments form > p, .artist-comment-submit { grid-column: 1; }
  .artist-comment-list article { grid-template-columns: 32px minmax(0, 1fr); }
  .artist-comment-actions { grid-column: 2; }
  .artist-comment-submit { align-items: flex-start; flex-direction: column; }
  .artist-comment-submit button { width: 100%; }
  .artist-comments input, .artist-comments textarea, .admin-form input, .admin-form select, .studio-tool input, .studio-tool textarea, .studio-tool select, .demo-window input, .demo-window textarea, .contact-form input, .contact-form textarea { font-size: 16px; }
  .artist-hub-window > header { align-items: flex-start; flex-direction: column; }
  .blog-editor-workspace { grid-template-columns: 1fr; }
  .blog-editor .blog-content-input, .blog-live-preview { height: 330px; min-height: 330px; }
}

@media (max-width: 480px) {
  .topbar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar nav a:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-shell { margin-top: 4px; }
  .profile-column { grid-template-columns: 1fr; }
  .hero-copy { padding: 10px; }
  .hero h2 { font-size: clamp(23px, 9vw, 28px); }
  .hero-actions, .hero-actions .primary-button, .hero-actions .text-link { width: 100%; }
  .hero-actions .primary-button, .hero-actions .text-link { min-height: 36px; display: flex; align-items: center; justify-content: center; text-align: center; }
  .friend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .friend { min-width: 0; }
  .friend strong, .friend small { overflow-wrap: anywhere; }
  .public-gallery { grid-template-columns: 1fr; }
  .artist-bottom-links > div { grid-template-columns: 1fr; }
  .artist-hub-intro { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 7px; }
  .artist-hub-intro img { width: 64px; height: 64px; }
  .artist-hub-intro h1 { font-size: 24px; }
  .artist-hub-card { grid-template-columns: 82px minmax(0, 1fr); }
  .artist-hub-image { width: 78px; height: 78px; }
  .artist-hub-copy strong { font-size: 15px; }
  .artist-hub-links { align-items: stretch; flex-direction: column; }
  .artist-hub-links a { justify-content: center; }
  .admin-shell { padding: 6px; }
  .admin-list article { grid-template-columns: 40px minmax(0, 1fr); }
  .admin-list-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; }
  .admin-list-actions a, .admin-list-actions button { width: 100%; text-align: center; }
  .theme-picker > div { grid-template-columns: 1fr; }
  .studio-gallery { grid-template-columns: 1fr; }
  .writer-profile-panel { grid-template-columns: 58px minmax(0, 1fr); }
  .writer-profile-panel > img { width: 54px; height: 54px; }
  .blog-sidebar { grid-template-columns: 1fr; }
  .blog-counter { grid-column: auto; }
  .demo-actions { grid-template-columns: 1fr; }
}

/* Dark mode changes the windows themselves, not only the wallpaper. */
html[data-color-mode="dark"][data-color-mode="dark"] {
  --paper: #191516;
  --paper-bright: #f4eeee;
  --ink: #f0e8e5;
  --line: #65464a;
}
html[data-color-mode="dark"][data-color-mode="dark"] :where(.panel, .crew-panel) {
  color: #f0e8e5;
  background: #191516;
  border-color: #8e272a;
}
html[data-color-mode="dark"][data-color-mode="dark"] .wordmark span { color: #e46a6e; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.blog-page, .admin-shell, .artist-portal, .demo-page, .contact-page) { color: #eee8e5; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.profile-facts dt, .post-meta, .guestbook label, .guest-entries strong, .contact-grid a, .contact-grid button) { color: #e46a6e; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.tagline, .contact-grid, .guestbook form) {
  color: #f0e8e5;
  background: #241b1d;
  border-color: #65464a;
}
html[data-color-mode="dark"][data-color-mode="dark"] .contact-grid { background: #0e0c0d; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.contact-grid a, .contact-grid button) { background: #211a1c; border-color: #65464a; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.post-card p, .post-meta, .guest-entries p, .services-panel li, .profile-facts dd) { color: #d9cbcc; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.post-meta span, .friend small.offline, .friend small.away, .friend small.online) { color: #cfc1c3; }
html[data-color-mode="dark"][data-color-mode="dark"] .post-meta a { color: #e46a6e; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.post-card h3 a, .friend strong, .friend small) { color: #e46a6e; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.guestbook input, .guestbook textarea) {
  color: #f7f2f0;
  background: #0d0b0c;
  border-color: #74575b;
}

html[data-color-mode="dark"][data-color-mode="dark"] :where(.blog-sidebar section, .blog-entry, .blog-summary, .blog-empty, .blog-not-found, .blog-live-preview) {
  color: #eee6e3;
  background: #191516;
  border-color: #6e5558;
}
html[data-color-mode="dark"][data-color-mode="dark"] .blog-archive-main { color: #eee6e3; background: #0f0d0e; border-color: #6e5558; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.blog-summary a, .blog-sidebar a, .blog-entry a, .blog-author, .entry-body h2, .entry-body h3, .entry-body blockquote) { color: #e46a6e; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.blog-summary p, .blog-summary time, .blog-entry > footer) { color: #d4c6c8; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.blog-image figcaption, .blog-video figcaption, .preview-placeholder) { color: #c7b9bb; }
html[data-color-mode="dark"][data-color-mode="dark"] .blog-video { color: #eee8e5; background: #211c1d; border-color: #777; }
html[data-color-mode="dark"][data-color-mode="dark"] .blog-entry > footer { background: #241e20; border-color: #6e5558; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.entry-body code, .entry-quote) { color: #f0e8e5; background: #2a2022; border-color: #a23b3f; }

html[data-color-mode="dark"][data-color-mode="dark"] :where(.admin-header, .admin-window, .admin-form, .admin-list, .admin-toolbar, .admin-start-here, .admin-control-group, .writer-profile-panel) {
  color: #eee8e5;
  background: #211c1d;
  border-color: #777;
}
html[data-color-mode="dark"][data-color-mode="dark"] .admin-header { background: #741418; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.admin-list article, .admin-header nav, .admin-control-group .admin-actions, .admin-form .artist-blog-access) {
  color: #eee8e5;
  background: #171415;
  border-color: #6f5b5e;
}
html[data-color-mode="dark"][data-color-mode="dark"] :where(.admin-button, .admin-actions button, .admin-list button, .admin-header nav a, .admin-header nav form button, .admin-quick-grid a, .blog-format-toolbar button, .blog-image-upload, .blog-video-upload) {
  color: #f4eeee;
  background: #2a2325;
  border-color: #777;
}
html[data-color-mode="dark"][data-color-mode="dark"] :where(.admin-quick-grid a:hover, .admin-quick-grid a:focus-visible, .admin-control-group button:hover, .admin-control-group .admin-button:hover) { color: #fff; background: #3a292c; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.admin-quick-grid span, .admin-list article span, .artist-blog-access small) { color: #c7b9bb; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.admin-start-here > p:not(.admin-step-label), .admin-help, .latest-release-settings small) { color: #d2c5c6; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.admin-control-group .admin-actions span, .contact-status) { color: #8fd19a; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.admin-start-here h2, .admin-quick-grid strong, .admin-control-group .admin-form h2, .artist-blog-access strong, .homepage-settings legend) { color: #e46a6e; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.admin-form input, .admin-form select, .admin-form textarea, .blog-editor select, .blog-editor input, .blog-editor textarea, .admin-control-group input[type="file"]) {
  color: #f7f2f0;
  background: #0d0b0c;
  border-color: #74575b;
}

html[data-color-mode="dark"][data-color-mode="dark"] :where(.artist-login-window, .artist-dashboard, .demo-window, .contact-window) {
  color: #eee8e5;
  background: #211c1d;
  border-color: #777;
}
html[data-color-mode="dark"][data-color-mode="dark"] :where(.artist-dashboard-grid article, .studio-tool, .studio-item, .studio-gallery figure, .demo-file, .demo-copy) {
  color: #eee8e5;
  background: #171415;
  border-color: #6f5b5e;
}
html[data-color-mode="dark"][data-color-mode="dark"] .studio-intro { color: #f0e8e5; background: #2b1b1e; border-color: #6f5b5e; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.studio-intro strong, .artist-dashboard-grid strong, .artist-dashboard-grid a, .studio-item span, .theme-picker legend, .decoration-controls legend, .image-border-picker legend) { color: #e46a6e; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.studio-help, .studio-tool small, .image-border-picker > p, .portal-help) { color: #c7b9bb; }
html[data-color-mode="dark"][data-color-mode="dark"] .portal-help { background: #171415; border-color: #6f5b5e; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.theme-choice, .decoration-controls fieldset label, .image-border-options label, .border-color-control, .portal-links, .portal-links a, .artist-dashboard nav a, .artist-dashboard nav form button) {
  color: #f4eeee;
  background: #2a2325;
  border-color: #777;
}
html[data-color-mode="dark"][data-color-mode="dark"] :where(.theme-choice.selected, .decoration-controls fieldset label.selected, .image-border-options label.selected) { color: #fff; background: #3a292c; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.studio-tool input, .studio-tool textarea, .studio-tool select, .demo-window input, .demo-window textarea, .contact-form input, .contact-form textarea) {
  color: #f7f2f0;
  background: #0d0b0c;
  border-color: #74575b;
}

html[data-color-mode="dark"][data-color-mode="dark"] .artist-hub-grid { background: #0f0d0e; }
html[data-color-mode="dark"][data-color-mode="dark"] .artist-hub-card { color: #eee8e5; background: #191516; border-color: #777; }
html[data-color-mode="dark"][data-color-mode="dark"] .artist-hub-card:hover { color: #fff; background: #2a2022; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.artist-hub-card strong, .artist-hub-card > span > span, .artist-hub-card em) { color: #eee8e5; }

html[data-color-mode="dark"][data-color-mode="dark"] .public-artist-page {
  --artist-panel: #191516;
  --artist-ink: #eee8e5;
  --artist-link: var(--artist-accent-light);
}
html[data-color-mode="dark"][data-color-mode="dark"] :where(.artist-page-tagline, .public-gallery figure) { color: #eee8e5; background: #0f0d0e; border-color: #6f5b5e; }
html[data-color-mode="dark"][data-color-mode="dark"] .artist-page-grid aside h1 { color: var(--artist-accent-light); }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.artist-comments input, .artist-comments textarea) { color: #f7f2f0; background: #0d0b0c; border-color: #74575b; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.artist-comment-list time, .artist-comments-empty) { color: #bcaeb0; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.artist-comment-list header strong, .artist-comment-submit span) { color: var(--artist-accent-light); }
html[data-color-mode="dark"][data-color-mode="dark"] :where(.artist-comment-submit button, .artist-comment-actions button) { color: #f4eeee; background: #2a2325; border-color: #777; }

html[data-color-mode="dark"][data-color-mode="dark"] :where(input::placeholder, textarea::placeholder) { color: #a99699; opacity: 1; }
html[data-color-mode="dark"][data-color-mode="dark"] :where(input, textarea, select) { color-scheme: dark; }

/* Homepage updates share one news window; newest stays at the top. */
.news-panel { overflow: hidden; }
.news-panel .post-list { display: block; }
.news-panel .post-card { margin: 0; background: transparent; border: 0; border-bottom: 1px dotted #8e6e72; box-shadow: none; }
.news-panel .post-card:last-child { border-bottom: 0; }

/* Mailing list */
.newsletter-body { padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr); align-items: end; gap: 9px 18px; background: #ece5e1; }
.newsletter-body strong { color: #741418; font: bold 15px "Times New Roman", serif; }
.newsletter-body p { margin: 4px 0 0; font: 10px/1.4 Arial, sans-serif; }
.newsletter-body form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
.newsletter-body label { grid-column: 1 / -1; color: #6f1518; font: bold 9px Arial, sans-serif; text-transform: uppercase; }
.newsletter-body input[type="email"] { min-width: 0; padding: 6px; background: #fff; border: 2px inset #aaa; font: 11px Arial, sans-serif; }
.newsletter-body .primary-button { min-height: 30px; padding: 5px 9px; }
.newsletter-trap { position: absolute; left: -10000px; width: 1px; height: 1px; }
.newsletter-status { grid-column: 1 / -1; min-height: 14px; color: #315f38; font-weight: bold !important; }
.utility-page { min-height: 100vh; padding: 12vh 12px 40px; background: #111; }
.unsubscribe-window { width: min(520px, 100%); margin: auto; }
.unsubscribe-window .section-title h1 { margin: 0; font: bold 14px Arial, sans-serif; }
.unsubscribe-window > div:last-child { padding: 14px; }
.unsubscribe-form { margin: 12px 0; padding: 10px; background: #e9e1df; border: 2px inset #aaa; }
.admin-delivery-status { width: min(760px, 100%); margin: 0 auto 8px; padding: 10px; border: 3px outset #fff; }
.admin-delivery-status.ready { background: #dce9d9; }.admin-delivery-status.warning { background: #f3dfb7; }
.admin-delivery-status p { margin: 3px 0 0; font-size: 10px; }
.subscriber-list article { grid-template-columns: minmax(0, 1fr) auto auto; }

html[data-color-mode="dark"] .newsletter-body, html[data-color-mode="dark"] .unsubscribe-window > div:last-child { color: #f0e8e5; background: #191516; }
html[data-color-mode="dark"] .newsletter-body strong, html[data-color-mode="dark"] .newsletter-body label { color: #e46a6e; }
html[data-color-mode="dark"] .newsletter-body input[type="email"] { color: #f4eeee; background: #2a2325; border-color: #66595c; }
html[data-color-mode="dark"] .newsletter-status { color: #a8d49f; }

@media (max-width: 600px) {
  .newsletter-body { grid-template-columns: 1fr; }
  .newsletter-body form { grid-template-columns: 1fr; }
  .newsletter-body label { grid-column: 1; }
  .subscriber-list article { grid-template-columns: 1fr; }
}
/* Studio availability and booking */
.availability-page { min-height: 100vh; padding: 10px; color: #111; background-color: #090909; background-image: linear-gradient(45deg,#160b0d 25%,transparent 25%),linear-gradient(-45deg,#160b0d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#160b0d 75%),linear-gradient(-45deg,transparent 75%,#160b0d 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; }
.availability-window { width: min(1120px,100%); margin: auto; background: #d4d0c8; border: 4px ridge #aaa; box-shadow: 5px 5px 0 #000; }
.availability-header { padding: 7px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; color: #fff; background: #741418; border-bottom: 3px ridge #aaa; }
.availability-header span { color: #f0b8ba; font: bold 9px Arial,sans-serif; letter-spacing: .12em; }
.availability-header h1 { margin: 1px 0; font: bold 24px "Times New Roman",serif; }
.availability-header p { margin: 0; font: 10px Arial,sans-serif; }
.availability-header nav { display: flex; flex-wrap: wrap; gap: 4px; }
.availability-header nav a,.calendar-toolbar button,.booking-submit button,.schedule-filters button,.request-actions button { min-height: 28px; padding: 5px 8px; color: #111; background: #d4d0c8; border: 2px outset #fff; font: bold 10px Arial,sans-serif; text-decoration: none; cursor: pointer; }
.availability-header nav a:active,.calendar-toolbar button:active,.booking-submit button:active,.schedule-filters button:active,.request-actions button:active { border-style: inset; }
.availability-layout { padding: 8px; display: grid; grid-template-columns: minmax(0,1.8fr) minmax(280px,.8fr); gap: 8px; }
.calendar-panel,.booking-panel,.booking-request-form { min-width: 0; background: #eee8e4; border: 3px ridge #aaa; }
.calendar-toolbar { padding: 5px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 7px; background: #211d1e; }
.calendar-toolbar h2 { margin: 0; color: #fff; text-align: center; font: bold 17px "Times New Roman",serif; }
.calendar-toolbar button:disabled { color: #777; cursor: not-allowed; }
.calendar-legend { padding: 5px; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 14px; background: #d4d0c8; border-bottom: 2px ridge #aaa; font: 8px Arial,sans-serif; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 4px; }
.calendar-legend i { width: 9px; height: 9px; display: inline-block; border: 1px solid #555; }
.legend-free { background: #edf2e8; }.legend-busy { background: #d89191; }.legend-pending { background: #ead49b; }
.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.calendar-weekdays strong { padding: 4px 1px; color: #fff; background: #741418; border: 1px solid #9f4a4d; text-align: center; font: bold 9px Arial,sans-serif; }
.calendar-days { padding: 3px; gap: 2px; background: #777; }
.calendar-days.loading { opacity: .55; }
.calendar-days > button,.calendar-blank { min-width: 0; min-height: 76px; padding: 4px; display: flex; align-items: flex-start; flex-direction: column; gap: 3px; color: #111; background: #edf2e8; border: 2px outset #fff; text-align: left; cursor: pointer; }
.calendar-blank { background: #bbb; border-color: #aaa; }
.calendar-days > button b { font: bold 16px "Times New Roman",serif; }
.calendar-days > button span { font: bold 7px Arial,sans-serif; }
.calendar-days > button em { width: 100%; margin-top: auto; padding-top: 3px; color: #6a4300; border-top: 1px dotted #8b6b2b; font: normal 7px Arial,sans-serif; }
.calendar-days > button.has-busy { background: #e9c2c2; }
.calendar-days > button.has-pending { box-shadow: inset 0 -5px #d2a83c; }
.calendar-days > button.selected { color: #fff; background: #741418; border-style: inset; outline: 2px solid #211d1e; outline-offset: -4px; }
.calendar-days > button.selected em { color: #ffe7a6; border-color: #e0b955; }
.calendar-days > button:disabled { color: #777; background: #c8c5c0; cursor: not-allowed; box-shadow: none; }
.calendar-privacy-note { margin: 0; padding: 6px; color: #555; background: #e1ddd7; border-top: 2px ridge #aaa; font: italic 9px Arial,sans-serif; }
.selected-day-status { padding: 9px; background: #fff; border-bottom: 2px ridge #aaa; font: 10px Arial,sans-serif; }
.selected-day-status p { margin: 0; }.selected-day-status strong { color: #741418; }
.selected-day-status ul { margin: 5px 0 0; padding-left: 20px; }
.pending-notice { margin-top: 8px !important; padding: 7px; color: #5c3900; background: #f1dda7; border: 2px inset #c4a04c; font-weight: bold !important; }
.package-board { margin: 7px; background: #fff; border: 2px inset #aaa; }
.package-board > h2 { margin: 0; padding: 4px 6px; color: #fff; background: #211d1e; font: bold 11px Arial,sans-serif; }
.package-board > p { margin: 0; padding: 10px; font: italic 10px Arial,sans-serif; }
.package-board article { padding: 7px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; border-bottom: 1px dotted #888; }
.package-board article:last-child { border-bottom: 0; }
.package-board article div { display: grid; }.package-board article strong { color: #741418; font: bold 12px "Times New Roman",serif; }
.package-board article span { color: #555; font: 8px Arial,sans-serif; }.package-board article .package-category { width: max-content; margin: 2px 0; padding: 1px 4px; color: #fff; background: #741418; border: 1px solid #b96568; font-weight: bold; letter-spacing: .04em; }.package-board article > b { color: #315f38; font: bold 12px Arial,sans-serif; }
.package-board article p { grid-column: 1/-1; margin: 3px 0 0; font: 9px/1.35 Arial,sans-serif; }
.booking-open-button { width: calc(100% - 14px); margin: 0 7px 7px; text-align: center; }
.booking-request-form { margin: 0 8px 8px; }
.booking-form-intro { margin: 0; padding: 8px; background: #f2dddd; border-bottom: 2px ridge #aaa; font: 10px Arial,sans-serif; }
.booking-form-grid { padding: 9px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.booking-form-grid label { min-width: 0; display: grid; gap: 3px; color: #6f1518; font: bold 9px Arial,sans-serif; text-transform: uppercase; }
.booking-form-grid input,.booking-form-grid select,.booking-form-grid textarea { width: 100%; min-width: 0; padding: 6px; color: #111; background: #fff; border: 2px inset #aaa; font: 11px Arial,sans-serif; text-transform: none; }
.booking-notes { grid-column: span 2; }.booking-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; }
.booking-submit { padding: 7px 9px; display: flex; gap: 6px; background: #d4d0c8; border-top: 2px ridge #aaa; }
.booking-status { min-height: 26px; margin: 0; padding: 6px 10px; color: #315f38; background: #eee8e4; border-top: 1px solid #999; font: bold 10px Arial,sans-serif; }
/* Administrator schedule */
.schedule-manager { width: min(940px,100%); margin: auto; }
.calendar-connection { margin: 0 0 8px; padding: 9px; border: 3px outset #fff; box-shadow: 2px 2px #000; }
.calendar-connection.connected { background: #dce9d9; }.calendar-connection.disconnected { background: #f3dfb7; }
.calendar-connection p { margin: 3px 0 0; font-size: 10px; }
.schedule-manager .admin-control-group { width: 100%; }
.package-fields { grid-template-columns: 1.4fr 1fr 1fr 1fr 90px; }
.package-form textarea,.schedule-request-editor textarea { width: 100%; padding: 6px; background: #fff; border: 2px inset #aaa; resize: vertical; }
.package-list article { grid-template-columns: 44px minmax(0,1fr) auto; }
.package-list article p { margin: 4px 0 0; font-size: 10px; }
.package-order { display: grid !important; place-items: center; width: 38px; height: 38px; color: #fff !important; background: #741418; border: 2px ridge #c06a6d; font-weight: bold; }
.schedule-filters { padding: 7px; display: flex; flex-wrap: wrap; gap: 5px; background: #d4d0c8; border: 3px outset #fff; }
.schedule-filters button.active { color: #fff; background: #741418; border-style: inset; }
.request-list { padding: 7px; display: grid; gap: 8px; background: #777; border: 3px inset #aaa; }
.booking-request-card { color: #111; background: #fff; border: 3px ridge #aaa; }
.booking-request-card > header { padding: 4px 6px; display: grid; grid-template-columns: auto auto minmax(0,1fr); gap: 8px; align-items: center; color: #fff; background: #211d1e; }
.booking-request-card > header span,.booking-request-card > header strong { font: bold 9px Arial,sans-serif; }
.booking-request-card > header strong { padding: 2px 5px; color: #fff; background: #741418; border: 1px solid #d67c7f; }
.booking-request-card > header time { justify-self: end; font: 9px Arial,sans-serif; }
.request-card-body { padding: 8px; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(220px,.7fr); gap: 10px; }
.request-main h3 { margin: 0 0 4px; color: #741418; font: bold 17px "Times New Roman",serif; }
.request-main p { margin: 3px 0; font-size: 10px; }.request-notes { padding: 7px; white-space: pre-wrap; background: #eee8e4; border: 2px inset #aaa; }
.request-contact { padding: 7px; display: grid; align-content: start; gap: 3px; background: #f2dddd; border: 2px inset #aaa; font: 10px Arial,sans-serif; }
.request-contact a { color: #741418; overflow-wrap: anywhere; }
.request-contact span { margin-top: 4px; color: #555; font-size: 8px; }
.request-sync { padding: 5px 8px; display: flex; flex-wrap: wrap; gap: 5px 12px; color: #555; background: #e1ddd7; border-top: 1px dotted #888; font: 8px Arial,sans-serif; }
.request-sync em { color: #8c1e22; overflow-wrap: anywhere; }
.request-actions { padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; background: #d4d0c8; border-top: 2px ridge #aaa; }
.request-actions .confirm-delete { color: #fff; background: #741418; }
.schedule-editor-backdrop { position: fixed; inset: 0; z-index: 100; padding: 16px; display: grid; place-items: center; background: rgba(0,0,0,.78); overflow-y: auto; }
.schedule-request-editor { width: min(820px,100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.request-edit-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
.schedule-admin-status { position: sticky; bottom: 4px; z-index: 20; min-height: 29px; margin: 7px 0 0; padding: 7px 9px; color: #fff; background: #211d1e; border: 2px ridge #aaa; font: bold 10px Arial,sans-serif; }
html[data-color-mode="dark"] :where(.availability-window,.calendar-panel,.booking-panel,.booking-request-form,.booking-status,.selected-day-status,.package-board,.booking-request-card) { color: #eee8e5; background: #191516; border-color: #74575b; }
html[data-color-mode="dark"] :where(.calendar-privacy-note,.booking-form-intro,.request-sync,.request-actions) { color: #d2c5c6; background: #241e20; border-color: #6e5558; }
html[data-color-mode="dark"] .calendar-days > button { color: #eee8e5; background: #213020; border-color: #777; }
html[data-color-mode="dark"] .calendar-days > button.has-busy { background: #4b292b; }
html[data-color-mode="dark"] .calendar-days > button:disabled { color: #9a8f91; background: #282425; }
html[data-color-mode="dark"] .calendar-days > button.selected { background: #741418; }
html[data-color-mode="dark"] :where(.package-board article strong,.request-main h3,.booking-form-grid label) { color: #e46a6e; }
html[data-color-mode="dark"] :where(.booking-form-grid input,.booking-form-grid select,.booking-form-grid textarea,.package-form textarea,.schedule-request-editor textarea) { color: #f7f2f0; background: #0d0b0c; border-color: #74575b; }
html[data-color-mode="dark"] .request-contact { color: #eee8e5; background: #2b1b1e; border-color: #6f5b5e; }
html[data-color-mode="dark"] .request-contact a { color: #e46a6e; }
@media (max-width:850px) {
  .availability-layout { grid-template-columns: 1fr; }
  .booking-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.8fr); align-items: start; }
  .booking-panel > .section-title,.booking-open-button { grid-column: 1/-1; }
  .package-board { grid-column: 2; grid-row: 2; }
  .selected-day-status { grid-column: 1; grid-row: 2; min-height: 100%; }
  .booking-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .availability-page { padding: 4px; }
  .availability-window { border-width: 2px; box-shadow: none; }
  .availability-header { align-items: flex-start; flex-direction: column; }
  .availability-header h1 { font-size: 21px; }
  .availability-layout { padding: 4px; }
  .calendar-toolbar h2 { font-size: 14px; }
  .calendar-legend { justify-content: flex-start; }
  .calendar-days > button,.calendar-blank { min-height: 59px; padding: 3px 2px; }
  .calendar-days > button b { font-size: 13px; }
  .calendar-days > button span,.calendar-days > button em { font-size: 6px; overflow-wrap: anywhere; }
  .booking-panel { display: block; }
  .booking-form-grid,.package-fields,.request-card-body,.request-edit-fields { grid-template-columns: 1fr; }
  .booking-notes { grid-column: 1; }
  .booking-form-grid input,.booking-form-grid select,.booking-form-grid textarea,.package-form textarea,.schedule-request-editor textarea { font-size: 16px; }
  .booking-request-card > header { grid-template-columns: auto auto; }
  .booking-request-card > header time { grid-column: 1/-1; justify-self: start; }
  .package-list article { grid-template-columns: 40px minmax(0,1fr); }
  .package-list .admin-list-actions { grid-column: 1/-1; }
}

/* Private client projects */
.project-manager,.studio-info-manager { width: min(1100px,100%); margin: 0 auto; font-size: 14px; }
.project-privacy { margin-bottom: 9px; padding: 9px 11px; display: flex; gap: 10px; align-items: center; color: #f8eeee; background: #211d1e; border: 3px ridge #8d7377; box-shadow: 2px 2px #000; }
.project-privacy strong { color: #ff777b; font: bold 12px "Courier New",monospace; letter-spacing: .04em; }
.project-privacy span { font-size: 12px; }
.project-toolbar { margin-bottom: 9px; padding: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #d4d0c8; border: 3px outset #fff; }
.project-toolbar label { display: flex; align-items: center; gap: 6px; font-weight: bold; }
.primary-admin-button,.project-clock-actions button { min-height: 36px; padding: 7px 12px; font-weight: bold; cursor: pointer; }
.new-project-form { width: 100%; max-width: none; margin-bottom: 10px; padding: 0; overflow: hidden; }
.new-project-form > header { padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; color: #fff; background: #741418; }
.new-project-form > header span { font: bold 10px "Courier New",monospace; }.new-project-form > header h2 { margin: 2px 0 0; color: #fff; font-size: 18px; }
.new-project-form > header button { min-height: 30px; }
.project-form-grid,.studio-info-fields { padding: 11px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.project-form-grid label,.studio-info-fields label,.project-overview-form label,.project-song-notes label { display: grid; gap: 5px; font-weight: bold; }
.project-form-grid input,.project-hours-setup input,.studio-info-fields input,.studio-info-fields select,.project-overview-form input,.project-song-notes textarea,.rate-editor textarea { width: 100%; min-width: 0; min-height: 38px; padding: 8px; color: #111; background: #fff; border: 2px inset #999; font: 16px Arial,sans-serif; }
.project-hours-setup { margin: 0 11px 11px; padding: 9px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; border: 2px inset #aaa; }
.project-hours-setup legend,
.project-hours-setup label { display: grid; gap: 5px; font-weight: bold; }
.project-song-setup { margin: 0 11px 11px; padding: 9px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; border: 2px inset #aaa; }

.project-song-setup label { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 5px; }
.project-song-setup label span { text-align: center; font: bold 11px "Courier New",monospace; }
.project-song-setup input { min-width: 0; padding: 7px; font-size: 16px; }
.project-workspace { display: grid; grid-template-columns: minmax(220px,280px) minmax(0,1fr); gap: 10px; align-items: start; }
.project-list-panel,.project-detail { background: #d4d0c8; border: 3px outset #fff; box-shadow: 2px 2px #000; }
.project-list-panel > header { padding: 7px 9px; display: flex; justify-content: space-between; color: #fff; background: #741418; }
.project-list-panel > p { margin: 0; padding: 15px; }
.project-list-panel > button { width: 100%; min-height: 58px; padding: 8px; display: flex; justify-content: space-between; align-items: center; gap: 7px; color: #111; background: #eee; border: 0; border-bottom: 1px solid #999; text-align: left; cursor: pointer; }
.project-list-panel > button:hover,.project-list-panel > button.selected { background: #f3dfe0; }
.project-list-panel > button.selected { box-shadow: inset 5px 0 #741418; }
.project-list-panel > button span { min-width: 0; display: grid; gap: 2px; }.project-list-panel > button strong,.project-list-panel > button small { overflow-wrap: anywhere; }
.project-list-panel > button strong { font-size: 14px; }.project-list-panel > button small { color: #555; font-size: 12px; }
.project-list-panel > button em { flex: 0 0 auto; color: #555; font: normal 10px "Courier New",monospace; }
.clock-running { color: #a50005 !important; font-weight: bold !important; }
.project-empty { padding: 45px 20px; text-align: center; }
.project-titlebar { padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; background: #211d1e; border-bottom: 3px ridge #999; }
.project-titlebar span { color: #ef9a9d; font: bold 10px "Courier New",monospace; }.project-titlebar h2 { margin: 2px 0; font: bold 22px "Times New Roman",serif; }.project-titlebar p { margin: 0; font-size: 12px; }
.project-clock { min-width: 160px; padding: 7px 10px; display: grid; gap: 2px; color: #eee; background: #080707; border: 3px inset #777; text-align: right; }
.project-clock span { color: #e8e8e8; }.project-clock strong { font: bold 24px "Lucida Console","Courier New",monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.project-clock.countdown-good { color: #dfffe5; background: #102f18; border-color: #5a8a63; }.project-clock.countdown-good strong { color: #73e58a; }
.project-clock.countdown-warning { color: #fff8d7; background: #403707; border-color: #a69438; }.project-clock.countdown-warning strong { color: #ffe265; }
.project-clock.countdown-over { color: #ffe3e4; background: #4b0c10; border-color: #b64c51; }.project-clock.countdown-over strong { color: #ff6a70; }
.project-time-board { padding: 10px; display: grid; grid-template-columns: repeat(3,minmax(100px,1fr)) minmax(170px,auto); gap: 8px; background: #bab5ad; border-bottom: 2px ridge #888; }
.project-time-board > div:not(.project-clock-actions) { padding: 7px; display: grid; gap: 3px; color: #000; background: #eee; border: 2px inset #aaa; }
.project-time-board span { color: #000; font: bold 12px "Lucida Console","Courier New",monospace; letter-spacing: .08em; text-transform: uppercase; }.project-time-board strong { color: #000; font: bold 18px "Lucida Console","Courier New",monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; line-height: 1.2; }
.project-time-board .overtime { color: #000; background: #efaeb1 !important; }.project-time-board .overtime span { color: #000; }
.project-clock-actions button { width: 100%; height: 100%; }.start-clock { color: #fff; background: #2d6539; border: 3px outset #9ac2a2; }.stop-clock { color: #fff; background: #8e1419; border: 3px outset #e07a7e; }
.project-clock-grid { padding: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; background: #bab5ad; border-bottom: 2px ridge #888; }
.project-category-clock { min-width: 0; overflow: hidden; color: #111; background: #eee; border: 3px outset #fff; }
.project-category-clock > header { padding: 6px 8px; display: flex; justify-content: space-between; gap: 8px; color: #fff; background: #342d2e; border-bottom: 2px ridge #777; }
.project-category-clock > header strong { font-size: 14px; }.project-category-clock > header span { font: bold 11px "Lucida Console","Courier New",monospace; letter-spacing: .06em; }
.project-category-readout { padding: 8px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.project-category-readout > div { min-width: 0; padding: 7px; display: grid; gap: 4px; color: #000; background: #e8e8e2; border: 2px inset #aaa; }
.project-category-readout span { color: #000; font: bold 11px "Lucida Console","Courier New",monospace; letter-spacing: .06em; text-transform: uppercase; }
.project-category-readout strong { overflow-wrap: anywhere; color: #000; font: bold 17px "Lucida Console","Courier New",monospace; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.project-category-readout .overtime { background: #efaeb1; }
.project-category-clock > button { width: calc(100% - 16px); min-height: 40px; margin: 0 8px 8px; padding: 7px; font-weight: bold; cursor: pointer; }
.project-category-clock > button:disabled { cursor: not-allowed; opacity: .62; }
.project-category-clock.is-running { border-color: #e46a6e; box-shadow: 0 0 0 2px #741418; }
.project-tabs { padding: 6px; display: flex; gap: 4px; background: #888; }
.project-tabs button { min-height: 34px; padding: 7px 11px; background: #d4d0c8; border: 3px outset #fff; font-weight: bold; cursor: pointer; }
.project-tabs button.active { color: #fff; background: #741418; border-style: inset; }
.project-overview-form { padding: 4px 0 0; }.project-overview-form .admin-actions { margin: 0 10px 10px; }
.project-song-notes { padding: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.project-song-notes article { padding: 9px; background: #eee; border: 3px ridge #aaa; }
.project-song-notes article header { margin: -9px -9px 9px; padding: 6px 8px; color: #fff; background: #741418; }.project-song-notes h3 { margin: 2px 0 0; font: bold 17px "Times New Roman",serif; }
.project-song-notes textarea { min-height: 150px; resize: vertical; }.project-song-notes article > button { margin-top: 7px; min-height: 34px; padding: 6px 10px; }
.project-session-list { padding: 10px; display: grid; gap: 6px; }
.project-session-list > p { padding: 15px; background: #eee; border: 2px inset #aaa; }
.project-session-list article { padding: 8px; display: grid; grid-template-columns: 70px minmax(0,1fr) auto; align-items: center; gap: 9px; background: #eee; border: 2px inset #aaa; }
.project-session-list article > span { font: bold 10px "Courier New",monospace; }.project-session-list article div { display: grid; gap: 2px; }.project-session-list article small { color: #555; }.project-session-list article b { font: bold 16px "Courier New",monospace; }
.studio-info-manager .admin-control-group { width: 100%; }.rate-editor { width: 100%; max-width: none; }.rate-editor > label { margin: 0 11px; display: grid; gap: 5px; font-weight: bold; }
.studio-rate-list article { grid-template-columns: minmax(0,1fr) auto; }.studio-rate-list article > div:first-child { display: grid; gap: 3px; }.studio-rate-list article p { margin: 3px 0 0; white-space: pre-wrap; }
html[data-color-mode="dark"] :where(.project-toolbar,.project-list-panel,.project-detail,.new-project-form,.project-song-notes article,.project-session-list article,.project-session-list > p) { color: #eee8e5; background: #191516; border-color: #74575b; }
html[data-color-mode="dark"] :where(.project-list-panel > button) { color: #eee8e5; background: #201b1c; border-color: #5e4a4d; }
html[data-color-mode="dark"] :where(.project-list-panel > button:hover,.project-list-panel > button.selected) { background: #3a292c; }
html[data-color-mode="dark"] :where(.project-form-grid input,.project-hours-setup input,.studio-info-fields input,.studio-info-fields select,.project-overview-form input,.project-song-notes textarea,.rate-editor textarea) { color: #f7f2f0; background: #0d0b0c; border-color: #74575b; }
html[data-color-mode="dark"] .project-time-board { background: #282223; } html[data-color-mode="dark"] .project-tabs { background: #352d2e; }
html[data-color-mode="dark"] .project-clock-grid { background: #282223; }
html[data-color-mode="dark"] .project-category-clock { color: #eee8e5; background: #191516; border-color: #74575b; }
html[data-color-mode="dark"] .project-list-panel > button small,html[data-color-mode="dark"] .project-session-list article small { color: #bdb2b4; }
@media (max-width:760px) {
  .project-workspace { grid-template-columns: 1fr; }
  .project-list-panel { max-height: 260px; overflow-y: auto; }
  .project-titlebar { align-items: stretch; flex-direction: column; }
  .project-clock { width: 100%; text-align: left; }
  .project-time-board { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .project-clock-grid { grid-template-columns: 1fr; }
  .project-hours-setup { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-clock-actions { grid-column: 1/-1; min-height: 48px; }
}
@media (max-width:560px) {
  .project-manager,.studio-info-manager { font-size: 14px; }
  .project-privacy { align-items: flex-start; flex-direction: column; }
  .project-form-grid,.project-hours-setup,.studio-info-fields,.project-song-setup,.project-song-notes,.project-category-readout { grid-template-columns: 1fr; }
  .project-time-board { grid-template-columns: 1fr; }
  .project-clock-actions { grid-column: 1; }
  .project-tabs { display: grid; grid-template-columns: 1fr; }
  .project-tabs button { font-size: 14px; }
  .project-session-list article { grid-template-columns: 60px minmax(0,1fr); }
  .project-session-list article b { grid-column: 2; }
  .studio-rate-list article { grid-template-columns: 1fr; }
}

.intern-project-manager .project-titlebar { grid-template-columns: 1fr; }
.intern-clock-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.intern-song-notes { border-top: 2px ridge #888; }
@media (max-width:760px) { .intern-clock-grid { grid-template-columns: 1fr; } }