:root {
  --ink: #28314e;
  --muted: #626a80;
  --paper: #f7f7fa;
  --cream: #e9ecf5;
  --white: #fff;
  --wine: #5968a3;
  --wine-dark: #404f86;
  --sage: #647f78;
  --line: #dce0ec;
  --shadow: 0 12px 36px rgba(56, 66, 108, .08);
  --masthead: #6876b2;
}

.site-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 4px;
}
button { touch-action: manipulation; }
[id] { scroll-margin-top: 20px; }
.site-header { background: linear-gradient(110deg, #7885bb, #626fa9); color: #fff; border: 0; }
.header-inner { width: min(1180px, calc(100% - 48px)); min-height: 100px; justify-content: space-between; }
.brand strong { font: 700 36px/1.35 var(--serif); }
.brand small { color: #f0f1fa; font-size: 15px; }
.header-search { width: 220px; border-color: #c9cfe7; }
.header-search input, .header-search button { color: #fff; }
.header-search input::placeholder { color: #edf0fc; opacity: 1; }
.header-search button { display: grid; place-items: center; padding: 8px; }
.navigation-bar { background: #56649f; }
.main-nav { width: min(1180px, calc(100% - 32px)); min-height: 54px; margin: auto; gap: 0; justify-content: space-between; font-size: 12px; }
.main-nav a { padding: 17px 10px; border-bottom: 3px solid transparent; }
.main-nav a:after { display: none; }
.main-nav a:hover, .main-nav a.active { background: rgba(255, 255, 255, .1); border-bottom-color: #dce0f7; }
.menu-toggle { color: #fff; }
.site-header a:focus-visible, .site-header button:focus-visible, .site-header input:focus-visible { outline-color: #fff; }

/* The latest writing and the author's story share the desktop page.
   On mobile only the short introduction precedes the latest writing. */
.home-page { padding-block: 32px 70px; }
.home-grid {
  display: grid;
  grid-template-columns: 265px minmax(0, 1fr);
  grid-template-rows: max-content max-content 1fr;
  grid-template-areas: "author latest" "biography latest" "sections latest";
  gap: 26px 34px;
  align-items: start;
}
.home-author { grid-area: author; text-align: center; }
.home-author .author-portrait {
  display: block;
  width: 200px;
  height: 238px;
  margin: 0 auto 16px;
  border: 0;
  border-radius: 5px;
  object-fit: cover;
  object-position: center 18%;
  box-shadow: none;
  filter: none;
}
.home-author h1 { margin: 0 0 7px; font: 700 27px/1.5 var(--serif); }
.home-author p { margin: 0 0 8px; font-size: 18px; line-height: 1.8; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--wine); border-color: var(--line); font-size: 12px; }
.text-link .site-icon, .publication-read .site-icon { width: 18px; height: 18px; }
.home-latest { grid-area: latest; min-width: 0; padding-inline-start: 30px; border-inline-start: 1px solid var(--line); }
.journal-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 18px; background: #e8eaf3; border-inline-start: 5px solid #7e89ba; }
.journal-heading h2 { margin: 0; font: 700 30px/1.35 var(--serif); }
.journal-heading > a, .journal-heading > span { display: inline-flex; align-items: center; gap: 8px; color: var(--wine-dark); font: 400 11px/1.7 var(--sans); }
.journal-heading > a .site-icon { width: 16px; height: 16px; }
.text-publication { padding: 24px 6px 20px; border-bottom: 1px solid var(--line); min-width: 0; }
.text-publication h3 { margin: 0 0 6px; font: 700 28px/1.5 var(--serif); overflow-wrap: anywhere; }
.text-publication h3 a:hover { color: var(--wine); }
.publication-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px; color: var(--muted); font: 400 11px/1.8 var(--sans); }
.publication-meta > a { color: var(--wine); }
.publication-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.publication-meta .site-icon { width: 15px; height: 15px; }
.text-publication > p { margin: 12px 0; color: #555f77; font-size: 19px; line-height: 1.95; overflow-wrap: anywhere; }
.publication-read { display: flex; align-items: center; gap: 8px; width: max-content; margin-inline-start: auto; color: var(--wine); font: 500 12px/1.7 var(--sans); }
.publication-read:hover { text-decoration: underline; }
.home-biography { grid-area: biography; background: transparent; }
.sidebar-heading { margin: 0 0 15px; padding-inline-start: 12px; border-inline-start: 4px solid #7e89ba; font: 700 27px/1.5 var(--serif); }
.home-biography h3 { margin: 0 0 10px; font: 600 21px/1.65 var(--serif); }
.home-biography p { margin: 0 0 14px; color: #555f77; font-size: 17px; line-height: 1.95; }
.home-sections { grid-area: sections; }
.home-sections > a:not(.text-link) { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.home-sections > a .site-icon { width: 16px; height: 16px; color: var(--wine); }
.home-sections > a:hover { color: var(--wine); }
.home-sections > .text-link { margin-top: 15px; }
.home-featured { margin-top: 45px; }
.text-featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 35px; }
.site-footer { background: #5c69a2; color: #fff; padding-block: 45px 25px; }
.footer-inner { gap: 20px 40px; }
.footer-inner p { color: #edf0fc; }
.copyright { border-color: #8f9ac5; }
.page-header h1 { font-size: clamp(38px, 5vw, 64px); }
.article-header h1 { font-size: clamp(36px, 4.5vw, 64px); }
.article-header time { display: block; margin-top: 14px; }
.card-image { background: var(--cream); }
.audio-player { background: #56649b; }
.audio-meta span, .audio-player-links { color: #f1f2fa; }
.biography-page .article-image { border-radius: 5px; box-shadow: none; }
.biography-page .article-image img { object-position: center 18%; }

/* The same palette in the authoring area, with familiar controls. */
.admin-body { background: #eef0f7; }
.admin-topbar { background: #5b69a4; }
.admin-sidebar { background: #e0e5f2; color: #35436e; border-inline-end: 1px solid #d1d8eb; }
.admin-sidebar a { display: flex; align-items: center; gap: 9px; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: #cbd3ea; color: #263764; }
.admin-sidebar .site-icon { width: 17px; height: 17px; }
.admin-main { padding: 36px; }
.stats-grid article, .quick-actions a, .form-main, .form-card, .upload-panel, .media-grid article, .login-panel { border-color: var(--line); border-radius: 6px; }
.admin-table th { background: #e9edf6; }
.admin-table th, .admin-table td { border-color: var(--line); }
.primary-button, .secondary-button, .danger-button { border-radius: 4px; min-height: 44px; }
.primary-button:hover { background: var(--wine-dark); }
.secondary-button { border-color: #cdd4e5; color: var(--wine-dark); }
.secondary-button:hover { background: #eef0f8; }
.content-form input, .content-form textarea, .content-form select, .form-card input, .form-card textarea, .upload-panel input, .login-panel input { border-color: #cdd4e5; border-radius: 3px; }
.content-form input:focus, .content-form textarea:focus, .content-form select:focus, .form-card input:focus { box-shadow: 0 0 0 3px #e4e8f5; }
.content-media-card { background: #f5f6fb; border-color: var(--line); border-radius: 4px; }
.admin-audio-preview, .audio-upload-box { border-color: var(--line); }
.form-layout { grid-template-columns: minmax(0, 1fr) 280px; }
.form-main { min-width: 0; }
.login-panel { border-top: 5px solid var(--wine); box-shadow: var(--shadow); }

/* Icon toolbar. Text labels stay available to screen readers and as tooltips. */
.rich-text-editor .editor-toolbar { background: #e9edf6; border-color: #cdd4e5; gap: 7px 0; padding: 9px 6px; border-radius: 5px 5px 0 0; }
.editor-group { display: flex; align-items: center; flex-wrap: nowrap; gap: 3px; padding-inline: 5px; border-inline-end: 1px solid #c8d0e4; }
.editor-group:last-child { border-inline-end: 0; }
.rich-text-editor .editor-toolbar button, .rich-text-editor .editor-toolbar select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 38px;
  min-height: 38px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #35436e;
  box-shadow: none;
}
.rich-text-editor .editor-toolbar .site-icon { width: 20px; height: 20px; pointer-events: none; }
.rich-text-editor .editor-toolbar button:hover, .rich-text-editor .editor-toolbar button:focus-visible, .rich-text-editor .editor-toolbar button.active, .rich-text-editor .editor-toolbar button[aria-pressed="true"] { background: #d4dbef; color: #243566; border-color: #9eaed5; box-shadow: none; }
.rich-text-editor .editor-toolbar select { display: block; width: auto; max-width: 145px; padding: 5px 7px; background: #fff; border-color: #c5cfe5; font: 400 12px/1.5 var(--sans); }
.rich-text-editor .editor-toolbar [data-editor-size] { width: 66px; }
.rich-text-editor .editor-toolbar [data-editor-font] { width: 110px; }
.rich-text-editor .editor-toolbar [data-editor-block] { width: 115px; }
.editor-color-control { position: relative; display: grid !important; place-items: center; width: 36px; height: 38px; margin: 0 !important; border-radius: 4px; color: #35436e; cursor: pointer; }
.editor-color-control:hover { background: #d4dbef; }
.editor-color-control:focus-within { outline: 2px solid var(--wine); outline-offset: 1px; }
.editor-color-control .site-icon { margin-top: -4px; }
.editor-color-preview { position: absolute; bottom: 3px; width: 22px; height: 4px; border-radius: 1px; background: var(--editor-color); }
.rich-text-editor .editor-color-control input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.editor-line-spacing { display: flex !important; align-items: center; gap: 2px; margin: 0 !important; }
.rich-text-editor .editor-toolbar [data-editor-line-height] { width: 66px; }
.rich-text-editor .editor-toolbar :disabled { opacity: .4; cursor: not-allowed; }
.rich-text-editor .rich-editor { border-color: #cdd4e5; border-radius: 0 0 4px 4px; font-size: 20px; line-height: 2; overflow: auto; }
.rich-editor [id^="_mcePaste"], .rich-editor [id^="mcePaste"], .article-body [id^="_mcePaste"], .article-body [id^="mcePaste"] { display: none !important; }
.rich-text-editor .rich-editor:focus { border-color: var(--wine); box-shadow: 0 0 0 2px #e4e8f5; }
.rich-text-editor .rich-editor h4 { font-size: 23px; line-height: 1.5; }
.rich-text-editor .rich-editor ul, .rich-text-editor .rich-editor ol { padding-inline-start: 28px; }
.rich-text-editor .editor-source { color: var(--ink); background: #f7f8fc; border-color: #cdd4e5; }
.editor-status { min-height: 20px; color: var(--wine-dark); font: 400 11px/1.6 var(--sans); margin: 6px 2px 0; }
.editor-status:empty { display: none; }

@media (max-width: 1120px) {
  .header-inner { min-height: 82px; }
  .menu-toggle { align-items: center; margin: 0; margin-inline-start: auto; }
  .menu-toggle .site-icon { width: 26px; height: 26px; }
  .main-nav { position: static; width: 100%; padding: 12px 20px; background: #56649f; border: 0; }
  .main-nav.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0 10px; }
  .main-nav a { padding: 12px; }
  .home-grid { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
  .home-latest { padding-inline-start: 24px; }
  .admin-main { padding: 25px; }
  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .form-side { grid-row: 1; }
}

@media (max-width: 780px) {
  .header-inner { width: calc(100% - 30px); min-height: 72px; gap: 8px; }
  .brand strong { font-size: 27px; }
  .brand small { display: none; }
  .home-page { padding-block: 0 40px; }
  .home-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "author" "latest" "biography" "sections"; gap: 24px; }
  .home-author { display: flex; align-items: center; gap: 17px; text-align: start; padding-block: 18px 0; }
  .home-author .author-portrait { width: 96px; height: 114px; flex: 0 0 96px; margin: 0; }
  .home-author h1 { font-size: 22px; margin-bottom: 4px; }
  .home-author p { font-size: 16px; line-height: 1.7; margin: 0; }
  .home-author .text-link { padding: 5px 0; font-size: 11px; }
  .home-latest { padding: 0; border: 0; }
  .journal-heading { padding: 11px 13px; gap: 8px; }
  .journal-heading h2 { font-size: 27px; }
  .journal-heading > a, .journal-heading > span { font-size: 10px; }
  .text-publication { padding: 19px 2px 17px; }
  .text-publication h3 { font-size: 24px; line-height: 1.5; }
  .publication-meta { font-size: 10px; gap: 5px 10px; }
  .text-publication > p { font-size: 17px; line-height: 1.85; margin-block: 10px; }
  .publication-read { font-size: 11px; }
  .home-biography { padding: 20px; background: #eceef7; border-radius: 4px; }
  .home-biography p { font-size: 17px; }
  .home-sections { padding-top: 6px; }
  .text-featured-grid { grid-template-columns: minmax(0, 1fr); }
  .home-featured { margin-top: 30px; }
  .footer-inner nav { gap: 20px; }
  .article-header { padding-top: 35px; }
  .article-header h1 { font-size: 37px; }
  .admin-topbar { padding-inline: 16px; }
  .admin-brand { font-size: 13px; }
  .admin-main { padding: 22px 14px; }
  .admin-sidebar { padding: 9px; border-inline-end: 0; border-bottom: 1px solid #cdd4e5; }
  .admin-sidebar a { padding: 10px 12px; }
  .form-main, .form-card { padding: 20px 16px; }
  .rich-text-editor .editor-toolbar { position: static; }
  .rich-text-editor .editor-toolbar button, .editor-color-control { width: 38px; height: 40px; }
}

@media (max-width: 380px) {
  .brand strong { font-size: 24px; }
  .home-author .author-portrait { width: 82px; height: 103px; flex-basis: 82px; }
  .home-author { gap: 12px; }
  .home-author h1 { font-size: 20px; }
  .journal-heading > a .site-icon { display: none; }
  .rich-text-editor .editor-group { flex-wrap: wrap; max-width: 100%; }
  .rich-text-editor .editor-toolbar [data-editor-font] { width: 95px; }
  .rich-text-editor .editor-toolbar [data-editor-block] { width: 101px; }
}

@media print {
  .home-page { width: 100%; }
  .home-grid { display: block; }
  .home-author, .home-biography, .home-sections { display: none; }
  .home-latest { border: 0; padding: 0; }
  .journal-heading { background: #fff; }
}