/* =====================================================================
   Land+Living — Wide Stylesheet
   Same 2004–2010 aesthetic, scaled for modern high-resolution displays.
   Max-width 1200px, 320px sidebar, fonts ~2px larger throughout.
   All original class names kept intact (used in stored body HTML).
   ===================================================================== */

/* ── Theme-switch banner ─────────────────────────────────────────────── */
.ll-theme-switch {
  text-align: right;
  padding: 4px 12px;
  background: #f0f0e8;
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
}

.ll-theme-switch a {
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  color: #625E00;
  text-decoration: none;
}

.ll-theme-switch a:hover { text-decoration: underline; }

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ── Base ───────────────────────────────────────────────────────────── */
body {
  background-color: #eeeeee;
  margin: 0;
  padding: 16px 8px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #5e5e5e;
  line-height: 1.5;
}

blockquote {
  font-family: Georgia, serif;
  font-size: 16px;
  color: #5e5e5e;
}

/* ── Site wrapper ───────────────────────────────────────────────────── */
.ll-wrap {
  display: flex;
  justify-content: center;
}

.ll-site {
  width: 100%;
  max-width: 1200px;
  background: #ffffff;
  border: 1px solid #888888;
}

/* ── Header top row ─────────────────────────────────────────────────── */
.ll-header-top {
  display: flex;
  background: #ffffff;
}

.ll-header-banner {
  flex: 1;
}

.ll-header-aside {
  flex-shrink: 0;
  width: 320px;
  background: #999999;
  line-height: 0;
}

.ll-header-aside a {
  display: block;
  line-height: 0;
}

.ll-header-aside img {
  display: block;
  width: 100%;
  aspect-ratio: 254/90;
  object-fit: contain;
  object-position: center center;
}

/* ── Logo bar ───────────────────────────────────────────────────────── */
.ll-logobar {
  background: #625E00;
  line-height: 0;
}

.ll-logobar a { display: block; }

.ll-logobar img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Two-column body ────────────────────────────────────────────────── */
.ll-body {
  display: flex;
  align-items: flex-start;
}

/* ── Main content ───────────────────────────────────────────────────── */
.ll-main {
  flex: 1;
  min-width: 0;
  padding: 20px 20px;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.ll-sidebar {
  flex-shrink: 0;
  width: 320px;
  background: #999999;
}

.ll-sidebar-images { line-height: 0; overflow: hidden; }

.ll-sidebar-images img {
  display: block;
  width: 105%;
  max-width: none;
  height: auto;
}

.ll-sidebar-nav {
  padding: 12px 12px 24px;
  font-style: normal;
}

.ll-search-form {
  margin-bottom: 14px;
}

.ll-search-form input[type="text"] {
  width: 100%;
  margin-bottom: 4px;
}

.ll-sidebar-section {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.ll-sidebar-links {
  margin-top: 6px;
  line-height: 1.9;
}

/* ── Collapsible archive years ──────────────────────────────────────── */

.ll-arch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -12px;
  padding: 5px 12px;
  background: rgba(0,0,0,0.18);
}

.ll-arch-header .aboutSideBarTextBold {
  background: none;
  margin: 0;
  padding: 0;
}

.ll-arch-collapse {
  color: #cccccc;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}

.ll-arch-collapse:hover { color: #ffffff; }
.ll-arch-year {
  margin-bottom: 3px;
}

.ll-arch-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 0;
  user-select: none;
}

.ll-arch-hd:hover .ll-arch-yr { text-decoration: underline; }

.ll-arch-arrow {
  color: #cccccc;
  font-size: 10px;
  flex-shrink: 0;
  line-height: 1;
}

.ll-arch-yr {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 0.04em;
}

.ll-arch-months {
  padding-left: 14px;
  margin-bottom: 4px;
}

.ll-arch-month {
  line-height: 1.9;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.ll-footer {
  padding: 12px;
  text-align: center;
  border-top: 1px solid #e0e0e0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #999999;
}

.ll-footer a {
  color: #999999;
  font-size: 14px;
  text-decoration: none;
}

.ll-footer a:hover {
  color: #5e5e5e;
  text-decoration: underline;
}

/* ── Entry items ────────────────────────────────────────────────────── */
.ll-entry {
  margin-bottom: 10px;
}

.ll-entry-meta {
  margin: 3px 0 5px;
  line-height: 1.6;
}

.ll-entry-author::before { content: ' '; }

.ll-entry-body {
  margin: 8px 0;
}

.ll-entry-body::after {
  content: '';
  display: table;
  clear: both;
}

.ll-entry-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 5px;
}

.ll-entry-footer-right {
  text-align: right;
  white-space: nowrap;
}

.ll-entry-hr {
  border: none;
  border-top: 1px solid #cccccc;
  margin: 12px 0 18px;
}

/* ── Pager ──────────────────────────────────────────────────────────── */
.ll-pager {
  display: flex;
  justify-content: space-between;
  margin: 14px 0 6px;
}

.ll-pager-next { text-align: right; }

/* ── Comments ───────────────────────────────────────────────────────── */
.ll-comments {
  margin-top: 18px;
}

.ll-comment {
  padding: 10px 12px;
  margin-bottom: 8px;
}

.ll-comment-meta {
  margin-bottom: 7px;
  line-height: 1.6;
}


/* =====================================================================
   ORIGINAL CLASS NAMES — preserved verbatim for body content HTML
   ===================================================================== */

/* ── Buttons ─────────────────────────────────────────────────────────── */
.standardsButton {
  border: 1px solid;
  border-color: #ffc8a4 #7d3302 #3f1a01 #ff9a57;
  padding: 2px 8px;
  font: bold 11px/1.4 Verdana, sans-serif;
  color: #ffffff;
  background-color: #ff6600;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
}

.standardsButton:hover { opacity: 0.85; }

/* ── Links ───────────────────────────────────────────────────────────── */
a {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #5e5e5e;
  text-decoration: underline;
}

a:hover {
  color: maroon;
}

/* ── Form elements ───────────────────────────────────────────────────── */
.textbox {
  width: 100%;
  max-width: 300px;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: black;
  padding: 4px;
}

.simpleSearch {
  width: 100%;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: black;
  padding: 4px;
}

.textarea {
  width: 100%;
  max-width: 400px;
  height: 100px;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: black;
}

/* ── Entry typography ────────────────────────────────────────────────── */
.entryHeaderText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: bold;
  color: #5e5e5e;
}

a.entryHeaderText {
  font-size: 19px;
  font-weight: bold;
  color: #5e5e5e;
  text-decoration: none;
}

a.entryHeaderText:hover {
  color: #5e5e5e;
  text-decoration: underline;
}

.entryCategoryDateText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  color: #7a378b;
}

a.entryCategoryDateText {
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  color: #7a378b;
  text-decoration: none;
}

a.entryCategoryDateText:hover {
  color: #7a378b;
  text-decoration: underline;
}

.entryQuickSummaryText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  color: #5e5e5e;
  margin: 4px 0;
}

.entryBodyText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 17px;
  color: #5e5e5e;
  line-height: 1.6;
}

a.entryContinueText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  color: #5e5e5e;
  text-decoration: none;
}

a.entryContinueText:hover {
  color: #5e5e5e;
  text-decoration: underline;
}

/* ── Sidebar text classes ────────────────────────────────────────────── */
.categorySideBarText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 17px;
  color: #ffffff;
  text-decoration: none;
}

a.categorySideBarText {
  color: #ffffff;
  text-decoration: none;
}

a.categorySideBarText:hover {
  color: #7a378b;
  text-decoration: underline;
}

.aboutSideBarTextBoldFocal {
  display: block;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: #7a378b;
  text-decoration: none;
  margin-bottom: 10px;
}

a.aboutSideBarTextBoldFocal {
  color: #7a378b;
  text-decoration: none;
}

a.aboutSideBarTextBoldFocal:hover {
  color: #ffffff;
  text-decoration: underline;
}

.aboutSideBarText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 17px;
  color: #ffffff;
  text-decoration: none;
}

a.aboutSideBarText {
  color: #ffffff;
  text-decoration: none;
}

a.aboutSideBarText:hover {
  color: #7a378b;
  text-decoration: underline;
}

.aboutSideBarTextBold {
  display: block;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 0.06em;
  margin: 0 -12px 0;
  padding: 5px 12px;
  background: rgba(0,0,0,0.18);
}

.categoryCountText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: #ffffff;
}

.categoryNameText {
  display: inline-block;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: bold;
  color: white;
  background-color: #5e5e5e;
  padding: 3px 10px;
  margin-bottom: 14px;
}

/* ── Comments typography ─────────────────────────────────────────────── */
.commentSectionHeader {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #5e5e5e;
  background-color: #aaaaaa;
  padding: 5px 10px;
  margin-bottom: 7px;
}

.commentHeaderText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #5e5e5e;
}

.commentText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #5e5e5e;
}

a.commentText { text-decoration: none; }
a.commentText:hover { text-decoration: underline; }

.commentBodyText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #5e5e5e;
  line-height: 1.55;
  margin: 7px 0 5px;
}

.commentItemBorder {
  border: 1px solid #bbbbbb;
  background-color: #eeeeee;
  border-radius: 2px;
}

.commentAltItemBorder {
  border: 1px solid #bbbbbb;
  background-color: #e4e4e4;
  border-radius: 2px;
}

.commentBackToTopText,
a.commentBackToTopText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #5e5e5e;
  text-decoration: none;
}

a.commentBackToTopText:hover { text-decoration: underline; }

/* ── Search ──────────────────────────────────────────────────────────── */
.searchHeaderText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: red;
}

.searchHighlight {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 17px;
  background-color: yellow;
  color: black;
}

.searchResult {
  padding: 7px 0;
  border-bottom: 1px dotted #cccccc;
}

.searchResultDate {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-style: italic;
  color: #7a378b;
}

/* ── Clippings ───────────────────────────────────────────────────────── */

/* Inline clippings header bar — replaces clippings.jpg */
.ll-clip-wrap {
  width: 100%;
  margin: 8px 0 10px;
}

.ll-clip-header {
  background: #888888;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.ll-clip-scissors {
  color: #625E00;
  font-size: 28px;
  margin-right: 10px;
  line-height: 1;
  display: inline-block;
  transform: scaleX(-1);
}

.ll-clip-label {
  font-family: 'Courier New', Courier, monospace;
  font-size: 22px;
  color: #e0e0e0;
  letter-spacing: 0.2em;
}

.parentClipped { position: static; }

.clippedPanel {
  max-height: 500px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #eeeeee;
  border: 1px solid #cccccc;
  padding: 4px;
}

.clippingHeader {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 13pt;
  color: #660000;
}

a.clippingHeader {
  color: #660000;
  text-decoration: none;
}

a.clippingHeader:hover { text-decoration: underline; }
a.clippingHeader:visited { color: #660000; text-decoration: none; }

.clippingDesc {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13pt;
  color: #660000;
}

.clippingByline {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  color: #660000;
  font-style: italic;
}

/* ── Clippings pills ────────────────────────────────────────────────── */
.ll-clip-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.ll-clip-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #5e5e5e;
  background: #e8e8e8;
  text-decoration: none;
  border: 1px solid #cccccc;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ll-clip-pill:hover,
.ll-clip-pill-active {
  background: #7a378b;
  color: #ffffff;
  border-color: #7a378b;
  text-decoration: none;
}

.clippedSpacing {
  line-height: 18px;
  padding: 18px 0;
  border-bottom: 1px dotted #cccccc;
}

.clipTab { cursor: pointer; }

/* ── Miscellaneous ───────────────────────────────────────────────────── */
.validationText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: red;
}

.emailPostbackMessage {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: red;
}

/* Float handling for inline images inside post bodies */
img[align="right"] { float: right; margin: 0 0 12px 16px; }
img[align="left"]  { float: left;  margin: 0 16px 12px 0; }

/* =====================================================================
   ENTRY BODY EMBEDDED HTML
   Normalises the 2004-2010 raw HTML stored in the JSON entries.
   Scoped to .ll-entry-body to avoid bleeding into sidebar/nav.
   ===================================================================== */

.ll-entry-body blockquote {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  color: #5e5e5e;
  border-left: 3px solid #7a378b;
  background: #f8f8f6;
  margin: 14px 0 14px 0;
  padding: 10px 16px;
  line-height: 1.7;
}

.ll-entry-body p {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #5e5e5e;
  line-height: 1.65;
  margin: 0 0 10px;
}

.ll-entry-body ul,
.ll-entry-body ol {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #5e5e5e;
  margin: 6px 0 10px 28px;
  padding: 0;
  line-height: 1.7;
}

.ll-entry-body li {
  margin-bottom: 4px;
}

/* Override old <font face="..."> tags */
.ll-entry-body font {
  font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

.ll-entry-body hr {
  border: none;
  border-top: 1px solid #cccccc;
  margin: 12px 0;
}

/* Tables — prevent overflow, inherit font */
.ll-entry-body table {
  max-width: 100%;
  border-collapse: collapse;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #5e5e5e;
}

.ll-entry-body td,
.ll-entry-body th {
  padding: 4px 8px;
  vertical-align: top;
}

/* Responsive embedded media */
.ll-entry-body iframe,
.ll-entry-body embed,
.ll-entry-body object {
  max-width: 100%;
  display: block;
  margin: 8px 0;
}

/* Minor inline elements */
.ll-entry-body small { font-size: 0.8em; }
.ll-entry-body sup   { font-size: 0.75em; vertical-align: super; line-height: 0; }
.ll-entry-body sub   { font-size: 0.75em; vertical-align: sub;   line-height: 0; }
.ll-entry-body strike,
.ll-entry-body s,
.ll-entry-body del   { color: #999999; }


/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* ── Sidebar toggle (hidden on desktop) ────────────────────────────── */
@media (min-width: 901px) {
  .ll-sidebar-toggle { display: none; }
  .ll-sidebar-drawer { display: block !important; }
}

/* ── Tablet  (≤ 900px) ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  body {
    padding: 0;
    font-size: 18px;
  }

  .ll-site {
    border-left: none;
    border-right: none;
    border-top: none;
  }

  .ll-header-aside { display: none; }

  .ll-body         { flex-direction: column; }
  .ll-main         { width: 100%; order: 2; padding: 16px 14px; }
  .ll-sidebar      { width: 100%; order: 1; }

  .ll-sidebar-toggle {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: #5a5228;
    color: #f0ead6;
    border: none;
    text-align: left;
    font-size: 15px;
    font-family: inherit;
    letter-spacing: 0.05em;
    cursor: pointer;
  }
  .ll-sidebar-toggle:hover { background: #6b6130; }

  .ll-sidebar-drawer { display: none; }
  .ll-sidebar--open .ll-sidebar-drawer { display: block; }

  .ll-sidebar-images { display: none; }

  .ll-sidebar-nav { padding: 14px; }

  .ll-sidebar-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    line-height: 1.7;
  }

  .clippedPanel { height: 400px; }
}

/* ── Mobile  (≤ 540px) ─────────────────────────────────────────────── */
@media (max-width: 540px) {
  .ll-main { padding: 14px 12px; }

  .entryHeaderText,
  a.entryHeaderText { font-size: 20px; }

  .entryBodyText { font-size: 18px; }

  .ll-entry-footer {
    flex-direction: column;
    gap: 4px;
  }

  .ll-entry-footer-right {
    text-align: left;
    white-space: normal;
  }

  .categoryNameText { font-size: 18px; }

  .commentBodyText { font-size: 18px; }

  .clippedPanel { height: 340px; }

  img[align="right"],
  img[align="left"] {
    float: none;
    display: block;
    margin: 10px 0;
  }
}