:root {
  color-scheme: light;
  --ink: #3b2416;
  --ink-soft: #65452d;
  --dark: #3a2115;
  --dark-2: #4b2c1c;
  --paper: #efe0bd;
  --paper-2: #f8edcf;
  --paper-3: #d5b982;
  --paper-gold-a: #edd194;
  --paper-gold-b: #dfbe79;
  --paper-gold-c: #cfa760;
  --line: #8c6740;
  --link: #653817;
  --link-hover: #a56b2c;
  --body-grad-a: rgba(255, 253, 244, 0.98);
  --body-grad-b: rgba(229, 220, 199, 0.96);
  --body-base: #f5f0df;
  --background-crease: rgba(118, 93, 55, 0.11);
  --background-speck: rgba(93, 69, 38, 0.15);
  --background-light: rgba(255, 255, 255, 0.44);
  --background-wear: rgba(151, 121, 74, 0.11);
  --background-shadow: rgba(68, 39, 15, 0.32);
  --foreground-shadow: rgba(67, 39, 17, 0.34);
  --side-grad-a: rgba(244, 225, 178, 0.88);
  --side-grad-b: rgba(206, 169, 103, 0.9);
  --paper-highlight: rgba(255, 255, 255, 0.35);
  --field-bg: #fff5d7;
  --panel-fill: rgba(255, 246, 218, 0.46);
  --footer-bg: rgba(239, 224, 189, 0.88);
  --button-bg: #e9d5a5;
  --button-text: #3b2416;
  --wear-mark: rgba(74, 38, 13, 0.2);
  --wear-light: rgba(255, 244, 205, 0.18);
  --wear-edge: rgba(66, 33, 10, 0.24);
  --success: #335e26;
  --error: #8e2c18;
  --shadow: rgba(43, 24, 11, 0.42);
  --bookmark-text: #3b2416;
  --parchment-texture: url("../assets/img/parchment-texture.png");
  --background-papyrus: url("../assets/img/white-papyrus-background.png");
  --page-frame: url("../assets/img/frame.png");
  --bookmark-label: url("../assets/img/bookmark-label.png");
  --menu-background: url("../assets/img/Menue.png");
  --bookmark-shape: inset(0);
  font-family: Georgia, "Times New Roman", serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #3b2416;
  --ink-soft: #65452d;
  --dark: #1b1009;
  --dark-2: #2d1a10;
  --paper: #322014;
  --paper-2: #46301f;
  --paper-3: #21140d;
  --paper-gold-a: #8c6533;
  --paper-gold-b: #654421;
  --paper-gold-c: #432818;
  --line: #8b6139;
  --link: #653817;
  --link-hover: #a56b2c;
  --body-grad-a: rgba(228, 218, 195, 0.96);
  --body-grad-b: rgba(170, 154, 126, 0.94);
  --body-base: #c9b996;
  --background-crease: rgba(45, 29, 13, 0.18);
  --background-speck: rgba(25, 15, 6, 0.22);
  --background-light: rgba(255, 244, 213, 0.14);
  --background-wear: rgba(86, 56, 24, 0.16);
  --background-shadow: rgba(14, 8, 3, 0.46);
  --foreground-shadow: rgba(10, 6, 3, 0.46);
  --side-grad-a: rgba(66, 43, 27, 0.96);
  --side-grad-b: rgba(35, 21, 13, 0.96);
  --paper-highlight: rgba(236, 194, 117, 0.12);
  --field-bg: #fff5d7;
  --panel-fill: rgba(255, 246, 218, 0.46);
  --footer-bg: rgba(38, 24, 15, 0.92);
  --button-bg: #21140d;
  --button-text: #3b2416;
  --wear-mark: rgba(14, 8, 4, 0.3);
  --wear-light: rgba(236, 194, 117, 0.09);
  --wear-edge: rgba(8, 5, 3, 0.3);
  --success: #335e26;
  --error: #8e2c18;
  --bookmark-text: #3b2416;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 24% 16%, var(--background-light) 0 12%, transparent 32%),
    radial-gradient(ellipse at 78% 72%, var(--background-wear) 0 8%, transparent 28%),
    radial-gradient(ellipse at 35% 86%, var(--background-crease) 0 5%, transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(121, 99, 63, 0.08)),
    var(--background-papyrus),
    linear-gradient(180deg, var(--body-grad-a), var(--body-grad-b)),
    var(--body-base);
  background-attachment: fixed;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: auto, auto, auto, 100% 100%, cover, 100% 100%, auto;
  color: var(--bookmark-text);
  font-size: 14px;
  line-height: 1.42;
  position: relative;
}

html {
  scroll-padding-top: 24px;
}

body::before {
  background:
    radial-gradient(ellipse at calc(50% + 118px) 46%, var(--background-shadow) 0 19%, transparent 44%),
    radial-gradient(ellipse at calc(50% - 386px) 24%, rgba(92, 61, 28, 0.14) 0 7%, transparent 24%),
    radial-gradient(circle at 18% 74%, var(--background-speck) 0 0.28%, transparent 1.7%),
    radial-gradient(circle at 86% 27%, var(--background-speck) 0 0.3%, transparent 1.6%),
    radial-gradient(circle at 61% 11%, var(--background-light) 0 0.45%, transparent 2.2%),
    linear-gradient(90deg, rgba(86, 63, 34, 0.08), transparent 18% 82%, rgba(86, 63, 34, 0.08));
  content: "";
  inset: 0;
  opacity: 0.72;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

body::after {
  background:
    var(--page-frame),
    var(--page-frame),
    var(--page-frame);
  background-attachment: fixed;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 1000;
}

a {
  color: var(--link);
  text-decoration: underline;
}

a:hover {
  color: var(--link-hover);
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  background:
    linear-gradient(rgba(244, 217, 150, 0.08), rgba(205, 156, 78, 0.08)),
    var(--menu-background);
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  border-radius: 22px;
  filter: drop-shadow(10px 18px 24px var(--foreground-shadow));
  box-shadow: inset 0 0 38px rgba(86, 49, 18, 0.28);
  left: 24px;
  padding: 28px 18px 24px;
  position: fixed;
  top: 18px;
  width: 190px;
  z-index: 1100;
}

.brand {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 18px;
  text-align: center;
  text-decoration: none;
}

.brand img {
  height: 48px;
  width: 48px;
}

.brand span:last-child {
  color: var(--ink);
  font-size: 22px;
  font-variant: small-caps;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 0.95;
  text-shadow: 0 1px #120905;
}

.main-nav {
  border-bottom: 1px solid rgba(84, 50, 26, 0.22);
  border-top: 1px solid rgba(84, 50, 26, 0.22);
  display: block;
  margin-top: 92px;
  padding: 9px 0;
  text-align: center;
}

.main-nav a {
  appearance: none;
  background-image: var(--bookmark-label);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  box-shadow: none;
  clip-path: var(--bookmark-shape);
  color: var(--ink);
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-variant: small-caps;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin: 5px auto;
  max-width: 100%;
  min-width: 132px;
  outline: 0;
  padding: 7px 24px 7px 14px;
  text-decoration: none;
  text-shadow: 0 1px rgba(255, 246, 218, 0.64);
  white-space: nowrap;
}

.main-nav a::before,
.main-nav a::after {
  color: #8d6337;
  content: "";
  padding: 0 5px;
}

.main-nav a[aria-current="page"],
.main-nav a:hover {
  background-image: var(--bookmark-label);
  background-position: center;
  background-size: 100% 100%;
  color: var(--bookmark-text);
  transform: translateX(2px);
}

.header-tools {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 18px;
}

.header-tools button,
.nav-toggle {
  appearance: none;
  background-color: transparent;
  background-image: var(--bookmark-label);
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(100% + 24px) calc(100% + 16px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--bookmark-shape);
  color: var(--bookmark-text);
  cursor: pointer;
  font: bold 13px Arial, Helvetica, sans-serif;
  outline: 0;
  padding: 6px 14px 6px 10px;
}

.main-nav a:focus-visible,
.header-tools button:focus-visible,
.nav-toggle:focus-visible,
.text-links a:focus-visible,
.button--primary:focus-visible,
.button--checkout:focus-visible,
.button--ghost:focus-visible {
  outline: 2px solid rgba(59, 36, 22, 0.68);
  outline-offset: 2px;
}

.header-tools button {
  min-width: 34px;
}

.header-tools .language-toggle {
  align-items: center;
  appearance: none;
  background-color: transparent;
  background-image: var(--bookmark-label);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--bookmark-shape);
  color: var(--bookmark-text);
  cursor: pointer;
  display: inline-flex;
  font: bold 13px Georgia, "Times New Roman", serif;
  font-variant: small-caps;
  height: auto;
  justify-content: center;
  letter-spacing: 0.5px;
  line-height: 1;
  min-width: 38px;
  outline: 0;
  padding: 6px 14px 6px 10px;
  text-shadow: 0 1px rgba(255, 246, 218, 0.64);
  text-decoration: none;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.header-tools .language-toggle:hover {
  color: var(--bookmark-text);
  transform: translateX(2px);
}

.nav-toggle {
  display: none;
}

main {
  margin-left: max(250px, 10vw);
  margin-right: max(96px, 8vw);
  padding-top: clamp(82px, 7vw, 118px);
  position: relative;
  width: auto;
  z-index: 1;
}

.parchment-page,
.page-shell,
.newsletter-panel {
  background:
    radial-gradient(circle at 16% 28%, rgba(104, 64, 24, 0.2), transparent 12%),
    radial-gradient(circle at 72% 18%, rgba(95, 57, 22, 0.13), transparent 14%),
    radial-gradient(circle at 82% 78%, rgba(113, 68, 22, 0.18), transparent 16%),
    linear-gradient(rgba(255, 236, 179, 0.54), rgba(218, 170, 88, 0.34)),
    var(--parchment-texture);
  background-position: center;
  background-size: cover;
  border: 0;
  border-radius: 30px;
  filter: drop-shadow(12px 20px 26px var(--foreground-shadow));
  box-shadow: inset 0 0 42px rgba(86, 49, 18, 0.32);
  margin-top: 18px;
  padding: 30px 40px 34px;
  position: relative;
}

main.page-shell {
  margin-top: clamp(52px, 5.5vw, 86px);
}

.parchment-page::before,
.page-shell::before,
.newsletter-panel::before,
.parchment-page::after,
.page-shell::after,
.newsletter-panel::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.parchment-page::before,
.page-shell::before,
.newsletter-panel::before {
  background:
    radial-gradient(ellipse at 18% 21%, var(--wear-mark) 0 2%, transparent 8%),
    radial-gradient(ellipse at 61% 15%, var(--wear-light) 0 3%, transparent 9%),
    radial-gradient(ellipse at 84% 34%, var(--wear-mark) 0 1.4%, transparent 6%),
    radial-gradient(ellipse at 27% 67%, var(--wear-mark) 0 2.2%, transparent 8%),
    radial-gradient(ellipse at 75% 82%, var(--wear-light) 0 2.5%, transparent 8%),
    radial-gradient(circle at 46% 42%, rgba(82, 47, 18, 0.11) 0 0.35%, transparent 1.6%),
    radial-gradient(circle at 91% 57%, rgba(82, 47, 18, 0.1) 0 0.3%, transparent 1.4%),
    radial-gradient(circle at 13% 83%, rgba(82, 47, 18, 0.1) 0 0.3%, transparent 1.4%),
    linear-gradient(112deg, transparent 0 19%, rgba(88, 51, 19, 0.08) 20%, transparent 22% 62%, rgba(255, 245, 212, 0.1) 64%, transparent 66%);
  mix-blend-mode: multiply;
  opacity: 0.54;
}

@supports not (mix-blend-mode: multiply) {
  .parchment-page::before,
  .page-shell::before,
  .newsletter-panel::before {
    opacity: 0.28;
  }
}

@media (forced-colors: active) {
  body::before,
  body::after,
  .parchment-page::before,
  .page-shell::before,
  .newsletter-panel::before,
  .parchment-page::after,
  .page-shell::after,
  .newsletter-panel::after {
    display: none;
  }
}

.parchment-page::after,
.page-shell::after,
.newsletter-panel::after {
  background:
    radial-gradient(ellipse at 5% 17%, var(--wear-edge) 0 2.5%, transparent 8%),
    radial-gradient(ellipse at 96% 76%, var(--wear-edge) 0 2%, transparent 8%),
    radial-gradient(ellipse at 42% 98%, var(--wear-edge) 0 1.8%, transparent 7%),
    linear-gradient(90deg, var(--wear-edge), transparent 8% 92%, var(--wear-edge)),
    linear-gradient(180deg, var(--wear-edge), transparent 7% 91%, var(--wear-edge));
  opacity: 0.34;
}

.parchment-page > *,
.page-shell > *,
.newsletter-panel > * {
  position: relative;
  z-index: 1;
}

.breadcrumb {
  color: var(--ink-soft);
  font-size: 12px;
  margin-bottom: 8px;
  text-decoration: underline;
}

.chapter-title,
.chronicle-box h2 {
  background-image: var(--bookmark-label);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  clip-path: var(--bookmark-shape);
  color: var(--bookmark-text);
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-variant: small-caps;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  max-width: 100%;
  padding: 8px 30px 8px 16px;
  text-shadow: 0 1px rgba(255, 246, 218, 0.72);
}

.chapter-title {
  font-size: 24px;
}

.welcome-box {
  background: rgba(255, 241, 197, 0.24);
  border: 1px solid rgba(94, 54, 25, 0.3);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(300px, 38%) 1fr;
  margin-bottom: 16px;
  padding: 10px;
}

.welcome-box img {
  border: 1px solid var(--line);
  border-radius: 0;
  clip-path: none;
  filter: sepia(0.12);
  height: auto;
  justify-self: center;
  object-fit: contain;
  width: 100%;
}

.dropcap::first-letter {
  color: var(--link);
  float: left;
  font-size: 42px;
  font-weight: bold;
  line-height: 0.85;
  padding-right: 5px;
}

.text-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 12px;
}

.text-links a {
  appearance: none;
  background-color: transparent;
  background-image: var(--bookmark-label);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--bookmark-shape);
  color: var(--bookmark-text);
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-variant: small-caps;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin: 3px 5px 3px 0;
  max-width: 100%;
  min-height: 34px;
  min-width: 132px;
  outline: 0;
  padding: 7px 24px 7px 14px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(255, 246, 218, 0.64);
  transition:
    color 160ms ease,
    transform 160ms ease;
  white-space: nowrap;
}

.text-links a:hover {
  color: var(--bookmark-text);
  transform: translateX(2px);
}

.chronicle-box {
  margin: 0 0 14px;
}

.chronicle-body {
  background: rgba(255, 241, 197, 0.22);
  border: 1px solid rgba(94, 54, 25, 0.3);
  border-top: 0;
  padding: 12px 14px;
  text-align: justify;
}

.chronicle-body p:last-child {
  margin-bottom: 0;
}

.archive-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chronicle-box--products {
  grid-column: 1 / -1;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

h3 {
  font-size: 15px;
  font-variant: small-caps;
  margin-bottom: 4px;
}

p {
  margin-bottom: 10px;
}

.page-hero {
  margin-bottom: 14px;
  padding-top: clamp(18px, 2.6vw, 38px);
}

.page-hero .eyebrow,
.eyebrow {
  color: var(--ink-soft);
  font-size: 12px;
  font-variant: small-caps;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin: 0 0 5px;
}

.page-hero h1 {
  background-image: var(--bookmark-label);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  clip-path: var(--bookmark-shape);
  color: var(--bookmark-text);
  display: inline-block;
  font-size: 24px;
  font-variant: small-caps;
  margin-bottom: 10px;
  max-width: 100%;
  padding: 8px 30px 8px 16px;
  text-shadow: 0 1px rgba(255, 246, 218, 0.72);
}

.page-hero p:not(.eyebrow) {
  background: rgba(255, 241, 197, 0.22);
  border: 1px solid rgba(94, 54, 25, 0.3);
  padding: 12px;
}

.split-section,
.form-section {
  background: rgba(255, 241, 197, 0.22);
  border: 1px solid rgba(94, 54, 25, 0.3);
  display: grid;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px;
}

.creator-facts {
  background: rgba(255, 241, 197, 0.22);
  border: 1px solid rgba(94, 54, 25, 0.3);
  margin-bottom: 14px;
  padding: 12px;
}

.split-section {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.form-section {
  grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr);
}

.creator-facts h2 {
  font-size: 16px;
  font-variant: small-caps;
  margin-bottom: 10px;
}

.creator-facts dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.creator-facts div {
  border-bottom: 1px dotted var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: 125px 1fr;
  padding-bottom: 8px;
}

.creator-facts div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.creator-facts dt {
  color: var(--ink-soft);
  font-weight: bold;
}

.creator-facts dd {
  margin: 0;
}

.legal-text {
  background: rgba(255, 241, 197, 0.22);
  border: 1px solid rgba(94, 54, 25, 0.3);
  padding: 12px;
  text-align: justify;
}

.legal-text h2 {
  border-bottom: 1px dotted var(--line);
  font-size: 16px;
  font-variant: small-caps;
  margin: 14px 0 8px;
  padding-bottom: 4px;
}

.legal-text h2:first-child {
  margin-top: 0;
}

.legal-details {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
}

.legal-details div {
  display: grid;
  gap: 8px;
  grid-template-columns: 130px 1fr;
}

.legal-details dt {
  color: var(--ink-soft);
  font-weight: bold;
}

.legal-details dd {
  margin: 0;
}

.admin-shell {
  margin-left: auto;
  margin-right: auto;
}

.admin-dashboard.is-hidden {
  display: none !important;
}

.admin-login-panel {
  max-width: 520px;
}

.admin-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-dashboard {
  display: grid;
  gap: 14px;
}

.token-status {
  align-items: center;
  display: flex;
  gap: 10px;
}

.token-status__indicator {
  background: var(--error);
  border: 1px solid rgba(59, 36, 22, 0.45);
  border-radius: 50%;
  flex: 0 0 12px;
  height: 12px;
  width: 12px;
}

.token-status[data-state="success"] .token-status__indicator {
  background: var(--success);
}

.token-status p {
  margin: 2px 0 0;
}

.admin-table {
  overflow-x: auto;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px dotted var(--line);
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--ink-soft);
  font-variant: small-caps;
}

.admin-user-form {
  border-bottom: 1px dotted var(--line);
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.admin-user-row {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.admin-user-row__actions {
  display: flex;
  gap: 6px;
}

.admin-form-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-product-form,
.admin-product-edit {
  border-bottom: 1px dotted var(--line);
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.admin-product-languages {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.admin-product-languages fieldset {
  border: 1px dotted var(--line);
  margin: 0;
  min-width: 0;
  padding: 10px;
}

.admin-product-languages legend {
  color: var(--ink-soft);
  font-weight: bold;
  padding: 0 4px;
}

/* ==============================
   Admin improvements
   ============================== */

.admin-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.admin-header__actions {
  display: flex;
  gap: 8px;
}

.admin-header .chapter-title {
  margin: 0;
}

/* Stats cards */
.admin-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  margin-bottom: 18px;
}

.admin-stat-card {
  background-color: transparent;
  background-image: var(--bookmark-label);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  clip-path: var(--bookmark-shape);
  display: flex;
  flex-direction: column;
  padding: 14px 16px 14px 10px;
  text-align: center;
  text-shadow: 0 1px rgba(255, 246, 218, 0.64);
}

.admin-stat-card__value {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
}

.admin-stat-card__label {
  color: var(--ink-soft);
  font-size: 12px;
  font-variant: small-caps;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Tabs */
.admin-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 14px;
  overflow-x: auto;
}

.admin-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.admin-tab:hover {
  color: var(--ink);
}

.admin-tab.is-active {
  border-bottom-color: var(--ink);
  color: var(--ink);
  font-weight: bold;
}

/* Tab content */
.admin-tab-content {
  display: none;
}

.admin-tab-content.is-active {
  display: block;
}

/* Loading spinner */
.admin-loading {
  min-height: 40px;
}

.loading-spinner {
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 16px 0;
}

.spinner {
  animation: spin 0.7s linear infinite;
  border: 2px solid var(--line);
  border-radius: 50%;
  border-top-color: var(--ink);
  height: 18px;
  width: 18px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Data tables */
.data-table {
  border-collapse: collapse;
  font-size: 14px;
  width: 100%;
}

.data-table th,
.data-table td {
  border-bottom: 1px dotted var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: var(--ink-soft);
  font-size: 12px;
  font-variant: small-caps;
  letter-spacing: 0.5px;
}

.data-table tbody tr:hover {
  background: var(--background-crease);
}

.data-table__message {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badges */
.badge {
  border-radius: 3px;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  padding: 3px 6px;
  text-transform: uppercase;
}

.badge--active,
.badge--manual_request,
.badge--checkout_created {
  background: var(--paper-gold-c);
  color: var(--ink);
}

.badge--unsubscribed {
  background: var(--error);
  color: #fff;
}

.badge--paid,
.badge--completed {
  background: var(--success);
  color: #fff;
}

/* Product rows */
.admin-product-row {
  border-bottom: 1px dotted var(--line);
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.admin-product-row__preview {
  align-items: center;
  display: flex;
  gap: 12px;
}

.admin-product-row__thumb {
  border-radius: 3px;
  flex: 0 0 auto;
  height: 60px;
  object-fit: contain;
  width: auto;
}

.admin-product-row__info {
  flex: 1;
  min-width: 0;
}

.admin-product-row__info strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-product-row__id {
  color: var(--ink-soft);
  font-size: 12px;
}

.admin-product-row__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.admin-product-row__edit {
  margin-top: 12px;
}

.admin-product-row__edit.is-hidden {
  display: none;
}

.admin-product-edit {
  background: var(--panel-fill);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px;
}

.admin-product-edit__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.admin-create-panel {
  margin-bottom: 14px;
}

.admin-create-panel summary {
  list-style: none;
}

.admin-create-panel summary::-webkit-details-marker {
  display: none;
}

/* Overview grid */
.admin-overview-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}

.admin-overview-section h3 {
  font-size: 15px;
  margin: 0 0 8px;
}

@media (max-width: 600px) {
  .admin-overview-grid {
    grid-template-columns: 1fr;
  }
}

/* Toast notifications */
.toast-container {
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  left: 50%;
  max-width: 420px;
  pointer-events: none;
  position: fixed;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  z-index: 1000;
}

.toast {
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--shadow);
  font-size: 14px;
  opacity: 0;
  padding: 12px 18px;
  pointer-events: auto;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--info {
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink);
}

.toast--success {
  background: var(--success);
  color: #fff;
}

.toast--error {
  background: var(--error);
  color: #fff;
}

/* Modal / confirm dialog */
.modal-overlay {
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 999;
}

.modal-overlay.is-hidden {
  display: none !important;
}

.modal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 20px var(--shadow);
  max-width: 400px;
  padding: 24px;
  width: calc(100% - 40px);
}

.modal-message {
  font-size: 15px;
  margin: 0 0 18px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: end;
}

/* Admin users read-only note */
.admin-users-note {
  color: var(--ink-soft);
  font-size: 13px;
  margin-bottom: 10px;
}

.admin-users-note code {
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  font-size: 12px;
  padding: 2px 6px;
}

/* Newsletter form */
.admin-newsletter-form textarea {
  min-height: 120px;
  resize: vertical;
}

.admin-emails-textarea {
  width: 100%;
  font-family: monospace;
  font-size: 0.85em;
  padding: 8px;
  border: 1px solid var(--line, #8c6740);
  border-radius: 4px;
  background: var(--field-bg, #fff5d7);
  color: var(--ink, #3b2416);
  resize: vertical;
  margin-top: 8px;
}

/* Admin users create form grid fix */
.admin-user-form .admin-form-grid {
  margin-bottom: 10px;
}

.rules-search form {
  margin-bottom: 12px;
}

.rules-search__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rules-results__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.rules-results__list li {
  border-bottom: 1px dotted var(--line);
  padding-bottom: 8px;
}

.rules-results mark {
  background: #fff0a3;
  color: #2c1a10;
  padding: 0 2px;
}

.rules-results__page {
  display: block;
  font-size: 0.85em;
  color: var(--text-muted, #666);
  margin-bottom: 2px;
}

.portrait-panel {
  border: 1px solid var(--line);
  min-height: 220px;
  overflow: hidden;
}

.portrait-panel img {
  height: 100%;
  object-fit: cover;
}

.timeline,
.product-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.product-grid--full {
  grid-template-columns: 1fr;
}

.product-grid--preview {
  grid-template-columns: 1fr;
}

.product-grid--preview .product-card,
.product-grid--full .product-card {
  align-items: start;
  grid-template-columns: minmax(160px, 240px) 1fr;
}

.product-grid--preview .product-card img,
.product-grid--full .product-card img {
  height: auto;
  object-fit: contain;
  width: 100%;
}

.timeline article,
.product-card,
.faq-category,
details {
  background: rgba(255, 241, 197, 0.22);
  border: 1px solid rgba(94, 54, 25, 0.3);
  padding: 10px;
}

.timeline span {
  color: var(--link);
  font-weight: bold;
}

.product-card {
  display: grid;
  gap: 10px;
  grid-template-columns: 120px 1fr;
}

.product-card img {
  border: 1px solid var(--line);
  height: auto;
  max-height: 180px;
  object-fit: contain;
  width: 100%;
}

.product-card__body {
  min-width: 0;
}

.price-row {
  border-bottom: 1px dotted var(--line);
  border-top: 1px dotted var(--line);
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  padding: 4px 0;
}

table {
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 8px;
  width: 100%;
}

caption {
  color: var(--ink-soft);
  font-weight: bold;
  text-align: left;
}

td {
  border-bottom: 1px dotted var(--line);
  padding: 2px 0;
}

td:last-child {
  text-align: right;
}

.button,
.more-link {
  color: var(--link);
  display: inline-block;
  font-weight: bold;
  text-align: right;
  text-decoration: underline;
}

.button {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
}

.button--primary,
.button--checkout,
.button--ghost {
  appearance: none;
  background-color: transparent;
  background-image: var(--bookmark-label);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--bookmark-shape);
  color: var(--bookmark-text);
  cursor: pointer;
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-variant: small-caps;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin: 3px 5px 3px 0;
  max-width: 100%;
  min-height: 34px;
  min-width: 132px;
  outline: 0;
  padding: 7px 24px 7px 14px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(255, 246, 218, 0.64);
  transition:
    color 160ms ease,
    transform 160ms ease;
  white-space: nowrap;
}

.button--ghost {
  opacity: 0.92;
}

.button--primary:hover,
.button--checkout:hover,
.button--ghost:hover {
  color: var(--bookmark-text);
  transform: translateX(2px);
}

.more-link::before {
  content: "*";
  padding-right: 4px;
}

[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.65;
}

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .site-header,
  .site-footer,
  .button,
  .more-link,
  form {
    display: none !important;
  }

  main,
  .site-footer {
    margin: 0;
    width: auto;
  }

  .parchment-page,
  .page-shell,
  .newsletter-panel,
  .legal-text,
  .chronicle-body {
    background: #fff;
    border: 0;
    box-shadow: none;
    clip-path: none;
    filter: none;
    padding: 0;
  }
}

form {
  display: grid;
  gap: 8px;
}

label {
  color: var(--ink-soft);
  display: grid;
  font-size: 13px;
  font-weight: bold;
  gap: 3px;
}

input,
textarea {
  background: var(--field-bg);
  border: 1px solid #7b5733;
  color: var(--ink);
  font: inherit;
  padding: 6px;
  width: 100%;
}

textarea {
  resize: vertical;
}

.checkbox {
  align-items: start;
  display: grid;
  grid-template-columns: 16px 1fr;
}

.checkbox input {
  width: auto;
}

.form-status {
  background-color: transparent;
  background-image: var(--bookmark-label);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  clip-path: var(--bookmark-shape);
  display: inline-block;
  font: bold 14px Georgia, "Times New Roman", serif;
  font-variant: small-caps;
  letter-spacing: 0.5px;
  margin: 6px 0;
  min-height: 18px;
  padding: 6px 18px 6px 12px;
  text-shadow: 0 1px rgba(255, 246, 218, 0.64);
}

.form-status[data-state="success"] {
  color: var(--success);
}

.form-status[data-state="error"] {
  color: var(--error);
}

.newsletter-panel {
  padding-top: 28px;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-category h2 {
  background-image: var(--bookmark-label);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  clip-path: var(--bookmark-shape);
  color: var(--bookmark-text);
  display: inline-block;
  font-size: 17px;
  font-variant: small-caps;
  margin: 0 0 8px;
  max-width: 100%;
  padding: 7px 28px 7px 14px;
  text-shadow: 0 1px rgba(255, 246, 218, 0.72);
}

.checkout-form {
  border-top: 1px dotted var(--line);
  margin-top: 8px;
  padding-top: 8px;
}

.checkout-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

details {
  margin-bottom: 8px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

.parchment-page,
.page-shell,
.newsletter-panel {
  background: transparent;
  box-shadow: none;
  filter: none;
}

.parchment-page::before,
.page-shell::before,
.newsletter-panel::before,
.parchment-page::after,
.page-shell::after,
.newsletter-panel::after {
  display: none;
}

.welcome-box,
.chronicle-body,
.page-hero p:not(.eyebrow),
.split-section,
.form-section,
.creator-facts,
.legal-text,
.timeline article,
.product-card,
.faq-category,
details {
  background: transparent;
}

.site-footer {
  background: rgba(255, 241, 197, 0.18);
  border-top: 1px dotted rgba(94, 54, 25, 0.45);
  color: var(--ink-soft);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin: 18px max(96px, 8vw) 0 max(250px, 10vw);
  padding: 12px 0 0;
  width: auto;
}

.site-footer p {
  margin: 0;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}