/* --------------------------------------
  Base Reset & Typography - LIGHT MODE
-------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  /* includes padding & border in element's total width-height */
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 115%;  /* larger base (default browser) font size, optional; for Georgia should be between 110% (compact, 17.6px) and 118.75% (luxury, 19px) with 112.5% being 18px (comfortable) */
  overflow-y: scroll;  /* forces scrollbar to prevent layout shift when content height changes */
  scroll-behavior: smooth;  /* smooth scrolling when clicking the arrow */
}

@supports (scrollbar-gutter: stable) {
  html {
    overflow-y: auto;  /* allows auto scrollbars */
    scrollbar-gutter: stable;  /* reserves space for scrollbar to avoid content shift */
  }
}

html, body {
  height: 100%;  /* ensures full-height layout for flex-based wrappers */
  overflow-wrap: break-word;  /* modern syntax for breaking long strings */
  word-wrap: break-word;  /* legacy support */
}

:root { color-scheme: light dark; }  /* site offers both light and dark modes */

body {
  font-family: Georgia, Tahoma, "Segoe UI", ui-sans-serif, Arial, "Trebuchet MS", Verdana, sans-serif;
  background-color: #3D2B1F;  /* fallback color if background image fails to load*/
  background-image: url("images/leather.v251130.jpg");
  background-repeat: repeat;
  background-size: 590px 590px;  /* scaled up, orig img 100px x 100px */
  color: #1C1C1C;  /* body text color */
  line-height: 1.5;  /* for text-heavy sites Georgia 18 px should be around 1.5 (1.45 is min, 1.55 mid, 1.65 max) */
}

h1, h2, h3, h4, h5, h6,
p {
  margin: 0;  /* reset margins for headings and paragraphs */
}

h1, h2, h3, h4, h5, h6 {  /* apply fonts to headings */
  font-family: Georgia, Tahoma, "Segoe UI", ui-sans-serif, Arial, "Trebuchet MS", Verdana, sans-serif;
  color: inherit;  /* use same color as body text */
}

h2.heading-title {
  margin-top: 0.75em;
  margin-bottom: 1.2em;
}

h2.heading-title-centered {
  text-align: center;
  margin-top: 0.75em;
  margin-bottom: 1.2em;
}

h2.quotes-title {
  font-size: clamp(1.2rem, 2.5vw, 1.36rem);  /* smaller than default h2 */
  margin-top: 1.5em;
  margin-bottom: 2.25em;
}

h2.heading-with-subtitle {  /* to match the new override style quotes-title */
  font-variant: small-caps;
  letter-spacing: 0.015em;
  word-spacing: 0.08em;
  font-size: 1.375rem;
  font-weight: normal;
  margin-top: 2.8rem;
  margin-bottom: 0.35rem;
  color: #1C1C1C;
}

.text-column h2.heading-with-subtitle {
  font-variant: small-caps;
  letter-spacing: 0.015em;
  word-spacing: 0.08em;
  font-size: 1.375rem;
  font-weight: normal;
  color: #1C1C1C;
}

h3.subtitle {
  font-variant: small-caps;
  font-size: 0.9em;
  font-weight: normal;
  letter-spacing: 0.01em;
  margin-top: 0;
  margin-bottom: 2.5rem;
  color: #666666;
}

.section-heading {
  font-size: 1.15em;
  letter-spacing: 0.03em;
  word-spacing: 0.1em;
  font-weight: normal;
  font-variant: small-caps;
}

body a {
  color: #0A5F3F;  /* a href hyperlink color for body text; alt: 1E550F, 225F0F, 2F6A2A */
  text-decoration: none; /* no underline on body text links */
}

body a:hover {
  color: #0D7A52;  /* hyperlinks hover color for body text; alt: 0C7A4A, 556B2F, 65842E, 4F8C45 */
}

.link-as-text {
  color: inherit;
  text-decoration: none;
}

.link-as-text:hover {
  text-decoration: none;
}

.quotes-section {
  margin-top: 0;  /* remove default top margin */
  margin-bottom: 1.6em;  /* control spacing after the block */
}

.text-center {
  text-align: center;
}

ul {  /* bulleted lists */
  list-style-position: outside;
  padding-left: 1.75em;
  margin-top: 0.5em;
  padding-right: 1.5em;
}

ul.elegant {  /* bulleted lists with smaller bullet */
  list-style: none;
  margin-top: 1rem;  /* space above the list */
  margin-right: 0;  /* space to right of list */
  margin-bottom: 0;  /* space below the list */
  margin-left: 0;  /* space to left of list; use padding-left to inset the list, rather than margin */
  padding-left: 1rem;  /* inset the whole list; change to 0 if want bullets flush with left margin */
}
    ul.elegant li {
      position: relative;
      padding-left: 1.1em;  /* space for bullet */
      text-indent: -0.1em;  /* hanging indent */
      line-height: 1.5;
    }
    ul.elegant li::before {
      content: "·";  /* middle dot as bullet symbol */
      position: absolute;
      left: 0;
      top: 0.5em;
      transform: translateY(-50%);
      font-size: 1.25em;  /* slightly larger for typeset feel */
      line-height: 1;
    }
    ul.elegant li.letter-break {  /* spacing between sections of a single ul */
      margin-top: 1.2em;
    }
    @media (max-width: 600px) {
      ul.elegant {
        padding-left: 0.25rem;  /* alt: 0.5rem, 0rem */
      }
    }

.soft-divider {  /* the <hr> horizontal ruled line thingie */
  border: none;
  border-top: 1px solid rgba(60, 40, 20, 0.18);
  margin: 2rem auto;
  width: 100%;
  max-width: 720px;
}

.poem-left-align-indent {  /* no hanging indents */
  margin: 0 0 0 2rem;  /* left indent (top right bottom left) */
  max-width: 60ch;
  text-align: left;
  line-height: 1.5;
}
    /* Collapse the indent on small screens */
    @media (max-width: 600px) {
      .poem-left-align-indent {
        margin-left: 0;  /* remove the indent */
        margin-right: 0;  /* optional: keep it symmetrical */
      }
    }

.poem-left-align-inset {  /* hanging indent, top+bottom spacing, requires <span> for each line but no <br> except btw stanzas */
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 2rem;  /* add margin-right later if right side feels too long/tight, or max-width in ch */
  line-height: 1.5;
}
    .poem-left-align-inset span {
      display: block;
      padding-left: 1.5em;   /* indent for wrapped lines */
      text-indent: -1.5em;   /* first line flush */
    }
    @media (max-width: 600px) {
      .poem-left-align-inset {
        margin-left: 0;
        margin-right: 0; /* optional, for symmetry */
      }
    }

.poem-left-align-center-page {
  max-width: 40ch;  /* keeps the poem narrow and elegant */
  margin: 2rem auto;  /* centers the block */
  text-align: left;  /* ensures poem lines stay left-aligned */
  line-height: 1.5;
}

.poem-centered-text-left-side {
  max-width: 40ch;  /* keeps the poem narrow and elegant */
  margin: 2rem 0 2rem 1rem;  /* to remove indent: margin: 2rem 0; */
  text-align: center;  /* centers each line within the block */
  line-height: 1.5;
}

.poem-centered {
  max-width: 40ch;  /* elegant narrow width */
  margin: 2rem auto;  /* centers the block on the page */
  text-align: center;  /* centers each line within the block */
  line-height: 1.5;
}

/* ensure custom pagefind elements do not interfere with formatting and act as inline/span only (no extra formatting for custom search elements) */
pagefind-mytitle,
pagefind-mytxt,
pagefind-mykeywords,
pagefind-myignore {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.search-keywords {
  display: none;
}

/* -----------------------------
  Utility Classes - LIGHT MODE
----------------------------- */
.clearfix::after {  /* apply to any container that holds floated elements */
  content: "";
  display: table;
  clear: both;
}

/* make all custom tags behave like inline text by default */
bigger, .bigger,  /* slightly larger text */
bigger-footer, .bigger-footer,  /* bigger text for footer site title */
smaller, .smaller,  /* slightly smaller text */
soft, .soft,  /* muted text */
highlight, .highlight,  /* accent text */
spread, .spread,  /* slightly more letter spacing */
tight, .tight,  /* slightly less letter spacing */
light, .light,  /* thinner lighter font weight */
medium, .medium,  /* semi-bold font weight */
subtle, .subtle,  /* gentle italic, muted tone */
caps, .caps,  /* uppercase, spaced letters */
whisper, .whisper,  /* small, gray, italic aside */
shout, .shout,  /* bold, uppercase, loud emphasis */
muted, .muted,  /* soft, faded */
accent, .accent {  /* accent color */
  display: inline;
}

/* ===== Text: Size Adjustments ===== */
bigger, .bigger  { font-size: 1.1em; }  /* slightly bigger than surrounding text */
bigger-footer, .bigger-footer  { font-size: 1.1em; letter-spacing: 0.03em; }  /* for footer site title */
smaller, .smaller { font-size: 0.9em; }  /* slightly smaller than surrounding text */

/* ===== Text: Color Emphasis ===== */
soft, .soft  { color: #666666; }  /* muted for de-emphasis */
highlight, .highlight { color: #A92B3A; } /* accent for emphasis */

/* ===== Text: Letter Spacing ===== */
spread, .spread  { letter-spacing: 0.05em; }  /* slightly more space between letters */
tight, .tight  { letter-spacing: -0.02em; } /* slightly less space between letters */

/* ===== Text: Weight Adjustments ===== */
light, .light  { font-weight: 300; }  /* thinner lighter text weight */
medium, .medium  { font-weight: 500; }  /* semi-bold text weight */

/* ===== Text: Style Variations ===== */
subtle, .subtle  { font-style: italic; color: #555555; }  /* gentle italics with muted tone */

caps, .caps  {  /* gentle uppercase with extra spacing */
  text-transform: uppercase; 
  font-size: 0.95em; 
  letter-spacing: 0.08em; 
}

/* ===== Text: Extra Tags ===== */
whisper, .whisper {  /* like quiet aside text */
  font-size: 0.85em; 
  color: #777777; 
  font-style: italic; 
}

shout, .shout  {  /* bold loud emphasis text */
  font-size: 1.1em; 
  font-weight: bold; 
  letter-spacing: 0.01em; 
  text-transform: uppercase; 
}

muted, .muted  { color: #999999; }  /* soft faded text */
accent, .accent  { color: #008B8B; }  /* accent text color for contrast */

br {  /* restores <br> to what it freaking should be: an old-school, no-frills line break! jeezusfuk is modern web design annoying af can we not just go back to simplicity fgs? uggghhh. */
  display: inline;  /* keep it inline, not block */
  margin: 0;  /* no extra spacing */
  padding: 0;  /* no padding */
  line-height: normal;  /* use surrounding text line height */
}

nobr, .nobr {  /* makes <nobr> behave as it does in classic good ol' html, like it freaking should! galdang css, web dev "progress" is bs, let's go back to 1998 */
  white-space: nowrap;
  hyphens: none;
}

b, strong { font-weight: bold; }  /* bold text, restores good ol' <b> */
i, em  { font-style: italic; }  /* italics, so i can use <i> like the good ol' days */
small  { font-size: smaller; }  /* smaller text, <small> */
strike, s, del { text-decoration: line-through; } /* strikethrough text */
u  { text-decoration: underline; } /* underline, <u> */

mark {
  background-color: #FCEFB0;  /* softened background color behind text (highlighting, highlighter) */
  color: inherit;  /* keep surrounding text color */
  padding: 0.1em 0.2em;  /* tiny breathing room */
  border-radius: 0.15em;  /* rounded corners on text highlighting*/
}

small-caps, .small-caps {
  font-variant: small-caps;  /* lowercase shown as small uppercase, <small-caps> */
  letter-spacing: 0.01em;
}

small-title, .small-title {
  font-variant: small-caps;  /* title-like small caps, <small-title> */
  letter-spacing: 0.01em;
}

p.hangingIndent {
  text-indent: -2em;  /* pulls first line left */
  margin: 0 0 0 2em;  /* indents rest of paragraph */
}

.see-also-label,
.see-also-links a {
  font-size: smaller;
  letter-spacing: 0.01em;
  word-spacing: 0.1em;
}

/* --------------------------
  Page Wrapper - LIGHT MODE
-------------------------- */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* full viewport height for sticky footer layout */
}

/* --------------------
  Header - LIGHT MODE
-------------------- */
header {
  background-color: #EFEFED;  /* header background solid color fallback, if background image fails to load */
  background-image: url("images/paper.v251130.jpg");
  background-repeat: repeat;  /* tile the image */
  background-size: 74px 74px;  /* enforce tile size; orig img 74px x 74px */
  background-color: rgba(0,0,0,0.001);  /* subtle dark tint, optional */
  background-blend-mode: multiply;  /* blend tint with image, if tint being used */
  padding: 20px;
  border-bottom: 1px solid #CCCCCC;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);  /* elegant shadow on header */
  border-radius: 0 0 6px 6px;  /* rounded corners on header: top left, top right, bottom right, bottom left */
}

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;  /* allows wrapping on small screens */
  gap: 20px;  /* space between flex items */
}

.logo {
  height: clamp(79px, 14vw, 105px); /* min px, scales with viewport, max px */
  width: auto;
}

@media (max-width: 480px) {
  .logo {
  height: 79px; /* force smaller logo on very small screens */
  }
}

.logo-title {
  text-decoration: none;  /* remove underline from hyperlink */
  color: inherit;  /* keep text color same as surrounding text */
  display: flex;  /* preserve flex layout */
  align-items: center;  /* vertically center logo and text (changes to flex-start on small screens) */
  gap: 15px;  /* keep spacing between logo and text */
}

.logo-title-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* left-align title + tagline */
  text-align: left;  /* text itself left-aligned */
}

.logo-title-text h1 {  /* site title text in header */
  font-family: Georgia, Tahoma, "Segoe UI", ui-sans-serif, Arial, "Trebuchet MS", Verdana, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;  /* spacing between lines when title wraps onto more than 1 line */
  margin-bottom: 0.55rem; /* gap between title and tagline */
  color: #144334;  /* text color of site title in header */
  display: inline-block;  /* needed for transform */
  transform: skewX(0deg); /* give text a gentle tilt, adjust angle as desired, optional (mild italics) e.g. -3deg, -5deg */
  font-variant: small-caps;  /* small caps for elegance */
  letter-spacing: 0.03em;  /* extra spacing between letters */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.125); /* subtle shadow for depth, on header site title text */
}

.logo-title-text sup { /* for TM trademark symbol or superscript text on site title */
  font-family: "Times New Roman", Arial, Verdana, Georgia, ui-sans-serif, sans-serif;
  font-size: 0.435em;  /* smaller than surrounding text */
  font-weight: normal;  /* override bold from h1 */
  color: #888888;  /* superscript (TM) text color */
  vertical-align: super;  /* ensure it sits above baseline */
  margin-left: 3px;  /* add a little spacing between site title and superscript text (TM) */
}

#tagline {
  font-style: italic;
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  line-height: 1.35;
  color: #5E5E5E;  /* text color of tagline in header */
}

/* ------------------------------
  Navigation - LIGHT MODE
------------------------------ */
nav { /* navigation menu at top in header */
  background-color: transparent;
  font-family: Georgia, Verdana, "Segoe UI", Tahoma, "Trebuchet MS", Arial, "Times New Roman", sans-serif; /* nav menu text */
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: flex-end;
  gap: 10px;
  padding:0;
  margin:0;
}

.nav-menu li {
  flex: 0 0 auto;  /* keep items at natural width */
}

.nav-menu a {
  text-decoration: none;  /* remove underline from nav menu hyperlinks */
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  color: #1C1C1C;  /* text color of nav menu hyperlinks */
  padding: 8px 12px;
  background-color: transparent;
  border-radius: 4px;  /* rounded corners on background of nav menu items */
  transition: background 0.3s;  /* smooth hover effect on nav menu */
  letter-spacing: 0.0035em;
}

.nav-menu a:hover {
  background-color: #BBBBBB;
  color: #416133;
}

/* ------------------------------
  Main Content - LIGHT MODE
------------------------------ */
main {
  flex: 1;  /* push footer down */
  display: flex;
  flex-direction: row;
  padding: 20px;
}

.content-wrapper {
  display: flex;
  flex: 1;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;  /* center content horizontally */
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

/* ------------------------------
  Text Column - LIGHT MODE
------------------------------ */
.text-column {
  background-color: #EFEFED;  /* fallback color */
  background-image: url("images/paper.v251130.jpg");
  background-repeat: repeat;  /* tile the image */
  background-size: 74px 74px;  /* enforce tile size */
  padding: 30px 75px 40px 75px;  /* top, right, bottom, left */
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 750px;
  width: 100%;
  /* Elegant shadow */
  box-shadow: 0 0 25px rgba(60, 40, 20, 0.25);
  border-radius: 6px; /* rounded corners */
}

.text-column::after {
  content: "";
  flex-grow: 1;  /* fill remaining space so footer stays at bottom on short pages */
}

.text-column .article-heading {
  margin-top: 0.5em;
  margin-bottom: 0.2em;  /* space before date-byline */
}

.text-column .date,
.text-column .byline {
  font-size: 0.9rem;
  color: #777777;
  margin-bottom: 0.5em;
}

/* -------------------------------------------------------------
  Posts by Date & Lists That Expand+Collapse - LIGHT MODE
--------------------------------------------------------------- */
/* Container spacing */
.link-sections {
  margin: 1.5em 0;  /* slightly reduced */
}

/* Each details block */
.link-sections details {
  margin-bottom: 0.5em;  /* tighter spacing between year groups */
  background-color: #EFEFED;  /* match site background style */
  background-image: url("images/paper.v251130.jpg");
  background-repeat: repeat;  /* tile the image */
  background-size: 74px 74px;  /* enforce tile size */
  padding: 0.4em 0.8em;  /* reduced padding for compactness */
}

/* Summary headings */
.link-sections summary {
  font-weight: bold;
  cursor: pointer;
}

/* Optional: style the default disclosure arrow */
.link-sections summary::-webkit-details-marker {
  color: #666666;
}

/* List inside each section */
.link-sections ul {
  margin: 0.4em 0 0 0;  /* slightly reduced margins and indent */
  padding-left: 1.85em;  /* control bullet-to-text spacing */
  list-style-type: disc;
}

/* Style the bullet itself */
.link-sections li::marker {
  color: #888888;
  font-size: 0.95em;  /* slightly smaller than text */
}

.link-sections li {
  margin-bottom: 0.4em;  /* tighter space between list items */
}

/* Link styling */
.link-sections a {
  display: inline-block;  /* allows date to sit next to link; only as wide as the text */
  vertical-align: top;  /* keeps bullet aligned with first line of text */
  font-weight: 550;
  color: #25514C;
  text-decoration: none;  /* no underline */
}

.link-sections a:hover {
  color: #AE5448;
  text-decoration: none;  /* no underline */
}

/* Inline date after link */
.link-sections .date-inline {
  margin-left: 0.4em;  /* space between link and date */
  font-size: 0.9em;  /* match .desc size */
  font-style: normal;  /* match .desc style */
  color: #1C1C1C;  /* match .desc color */
}

/* Optional description under link */
.link-sections .desc {
  display: block;  /* forces onto its own line */
  margin-left: 0.15em;  /* aligns with link text */
  font-size: 0.9em;  /* slightly smaller */
  font-style: italic;
  color: #555555;  /* muted color */
  line-height: 1.4;  /* tighter line height */
}

/* -------------------------
  In-Article Images - LIGHT MODE
-------------------------- */
img {
  max-width: 100%;
  height: auto;
  border-radius: 6px; /* optional styling */
  display: block;
}

figure {
  display: block;
  margin: 2rem 0;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #666666;
  line-height: 1.4; /* adjust up or down for comfort */
  max-width: 60ch;  /* limit caption width to ~xx characters */
  margin-left: auto; /* centers the caption block if narrower */
  margin-right: auto;
  text-align: center; /* adjust to left/right if needed */
}

/* Plain image centered */
.img-centered {
  display: block;
  margin: 2rem auto;  /* centers horizontally */
  text-align: center;  /* if used on figure */
}

/* Old-school centered img, no extra spacing, rounded corners (border-radius inherited from global img rule) */
.img-classic-center {
  display: block;
  margin: 0 auto;  /* center horizontally, no extra top or bottom space */
  max-width: 100%;  /* responsive */
  height: auto;  /* keep proportions */
}

/* Plain image left-aligned */
.img-left {
  display: block;
  margin: 2rem 0;  /* space above/below */
  text-align: left;
}

/* Plain image right-aligned */
.img-right {
  display: block;
  margin: 2rem 0 2rem auto; /* pushes it to the right */
}

/* Figure with caption centered */
.figure-centered {
  display: flex;
  flex-direction: column;
  align-items: center;  /* centers the image horizontally */
  margin: 2rem auto;
  text-align: center;  /* keeps the caption centered */
  max-width: 100%;
}

.figure-centered img {
  display: block;
  margin: 0 auto;  /* ensures the image itself is centered */
}

/* Figure with caption left-aligned */
.figure-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* explicitly left-aligns the image */
  margin: 2rem 0;
  text-align: left;  /* ensures caption text is left-aligned */
  max-width: 100%;
}

.figure-left img {
  display: block;
  margin: 0;  /* no auto-centering */
}

.figure-left figcaption {
  text-align: left;  /* override global center */
  margin-left: 0;  /* optional: ensure no auto-centering */
  margin-right: 0;
}

.figure-right {
  display: block;
  width: fit-content;  /* shrink to image width */
  margin: 2rem 0 2rem auto;  /* push block to right edge */
  max-width: 100%;  /* don’t overflow the column */
  text-align: center;  /* center caption under image */
}

.figure-right img {
  display: block;
  height: auto;
  max-width: 100%;  /* responsive scaling */
}

.figure-right figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #666666;
  line-height: 1.4;
}

/* On small screens, ensure images never overflow */
@media (max-width: 600px) {
  img {
  max-width: 100%;
  height: auto;
  }

  figure {
  margin: 1.5rem 0;
  }

  figcaption {
  font-size: 0.8rem;
  }

  /* Responsive override for right-aligned figures */
  .figure-right {
  margin: 1.5rem auto;  /* center the figure on small screens */
  }
}

/* ------------------------------
  Post Meta & Extras - LIGHT MODE
------------------------------ */
.post-extra {
  margin-top: 2.5em;
  border-top: 1px solid #ddd;
  font-size: 0.9rem;
  color: #777777;
  line-height: 1.5;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

.post-meta {
  font-size: 0.85em;  /* slightly smaller */
  color: #666666;  /* muted */
  text-align: center;  /* centered */
  font-style: italic;  /* elegant italics */
  margin-top: 2em;
  margin-bottom: 0.55em;
/* hidden for now */ /* border-top: 1px solid #CCCCCC; */ /* thin divider line */
}

.post-meta::before {
  content: "═══ ❖ ═══";  /* flourish divider */
  display: block;
  color: #666666;  /* softer color for divider */
  font-style: normal;  /* override italics */
  margin-bottom: 1.1em;
}

.post-meta p {
  margin: 0.25em 0;  /* margin-top and margin-bottom, margin-left and margin-right */
}

/* ------------------------------
  FAQ SECTION - LIGHT MODE
------------------------------ */
.faq-section {
  margin: 3.3rem 0;  /* more space above and below the whole block */
  padding: 2.2rem 0;  /* more internal breathing room */
  border-top: 2px solid rgba(60,40,20,0.25);
  border-bottom: 2px solid rgba(60,40,20,0.25);
  color: inherit;  /* ensures all text uses the site's body color */
}

.faq-heading {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 1.3rem;
  margin-top: 0;  /* avoid double spacing from parent padding */
  margin-bottom: 2.2rem;  /* more space under the heading */
  font-weight: normal;
  color: inherit;  /* inherits body text color */
}

/* Each Q&A pair */
.faq-item {
  margin-bottom: 2.5rem;  /* space between entries */
}

/* Hanging indent for Q and A lines */
.faq-line {
  margin: 0.4rem 0;
  padding-left: 1.6rem;
  text-indent: -1.6rem;
  line-height: 1.55;
  color: inherit;  /* Q&A text inherits body color */
}

/* Q: and A: labels */
.faq-label {
  font-variant: small-caps;
  letter-spacing: 0.03em;
  margin-right: 0.4rem;
  color: inherit;  /* inherits body text color */
}

/* ------------------------------
  Page Title Heading Override - LIGHT MODE
------------------------------ */
.text-column h2.quotes-title {  /* new small caps quotes pages page title headings */
  font-variant: small-caps;
  letter-spacing: 0.015em;
  word-spacing: 0.08em;
  font-size: 1.375rem;
  margin-top: 2.8rem;
  margin-bottom: 3.2rem;
  font-weight: normal;
  color: #1C1C1C;  /* same as body text for now */
}

/* ------------------------------
  What's New Page - LIGHT MODE
------------------------------ */
.updates-title {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  margin-bottom: 2.4rem;
}

.updates-intro {
  margin-bottom: 3rem;
}

.updates-year h3 {
  font-size: 1.2rem;
  font-weight: normal;
  margin: 2.8rem 0 1.2rem;
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

/* list container */
.updates-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.updates-list li {
  padding: 0.15rem 0;  /* spacing between list items */
  line-height: 1.5;  /* spacing between lines within a single wrapped item */

/* hanging indent */
  padding-left: 1.2rem;  /* adjust to taste */
  text-indent: -1.2rem;  /* same value as padding-left but negative */
}

/* bullet */
.update-bullet {
  color: inherit;  /* same color as body text */
  margin-right: 0.15rem;  /* spacing between bullet and item */
}

/* link text */
.updates-list a {
  text-decoration: none;
  /* inherits your normal green link color */
}

/* faded date */
.update-date {
  color: #7F7F7F;  /* date text color */
  font-size: 0.85em;  /* slightly smaller than link text */
  margin-left: 0.4rem;  /* spacing between item and date */
  white-space: nowrap;  /* keeps "Mmm dd" together */
  flex-shrink: 0; /* prevents date from squeezing upward */
}

/* ------------------------------
  Back to Top Arrow - LIGHT MODE
------------------------------ */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  /* Respect iPhone safe area */
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;  /* good tap target */
  height: 44px;
  border-radius: 999px;  /* circular button */
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  background: #EFEFED;
  color: #144334;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  border: 1px solid #ccc;
}

.back-to-top:hover {  /* optional hover style */
  background: #e3e3e3;
  outline: none;
}

/* ------------------------------
  Footer - LIGHT MODE
------------------------------ */
footer {
  background-color: #EFEFED;  /* fallback color */
  background-image: url("images/paper.v251130.jpg");
  background-repeat: repeat;  /* tile the image */
  background-size: 74px 74px;  /* enforce tile size */
  background-color: rgba(60,40,20,0.07);  /* subtle dark tint */
  background-blend-mode: multiply;  /* blend tint with image */
  text-align: center;
  padding: 20px;
  margin-top: auto;  /* push footer to bottom when content is short */
  font-family: Georgia, "Segoe UI", "Times New Roman", Times, serif;  /* font stack */
  color: #1C1C1C;  /* match body text color */
  max-width: none;  /* full-width footer */
  width: 100%;  /* responsive scaling; full width of viewport */
  margin-left: 0;  /* no centering */
  margin-right: 0; /* no centering */
  /* Elegant shadow and rounded corners */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  border-radius: 6px 6px 0 0;  /* top left, top right, bottom right, bottom left */
/* NOTE: to put footer back to matching width of main body:
  max-width: 715px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px; */
}

footer p {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.footer a {
  text-decoration: none;
  color: inherit;
}

.footer a:hover {
  color: #4A6A4F;
}

/* ------------------------------
  Responsive Design
------------------------------ */
@media (max-width: 900px) {
  /* Stack header elements vertically and left-align them */
  .header-flex {
  flex-direction: column;
  align-items: flex-start;  /* left-align header block */
  gap: 10px;
  }

  /* Let nav-menu keep its horizontal flex-wrap behavior */
  .nav-menu {
  margin-top: 10px; /* optional spacing */
  /* no flex-direction: column */
  /* no align-items override */
  }

  .nav-menu a {
  /* remove width: 100% so they don’t stretch and stack */
  text-align: left;
  }

  /* Stack main content and sidebar vertically */
  .content-wrapper {
  flex-direction: column;
  align-items: center;
  gap: 20px;  /* consistent vertical spacing between stacked items */
  }

  /* Sidebar matches text column width and is centered */
  .text-column,
  .sidebar {
  width: 100%;
  max-width: 750px;  /* match .text-column max-width */
  margin: 0 auto;  /* center horizontally, no extra top margin */
  border-radius: 4px;
  padding: 30px 40px; /* unified padding for equal “card” look */
  }
}

@media (max-width: 600px) {
  main {
  padding: 20px 0;  /* remove the 20px inset on small screens */
  }
}
@media (max-width: 600px) {  /* fine tuning for above */
  main {
    padding-top: 10px;
  }
}

@media (max-width: 600px) {
  .content-wrapper {
  max-width: none;  /* remove the 1024px cap on small screens */
  width: 100%;  /* span full viewport on small screens */
  margin: 0;  /* no auto-centering */
  }

  .text-column,
  .sidebar {
  max-width: none;
  border-radius: 4px;
  margin: 0;
  padding: 20px 28px; /* lighter padding for small screens */
  }
}

@media (max-width: 900px) and (min-width: 601px) {
  .text-column,
  .sidebar  {
  max-width: 90%;  /* wider than desktop but not full bleed */
  margin: 0 auto;  /* keep centered */
  border-radius: 4px; /* subtle rounded corners */
  }
}

@media (max-width: 600px) {
  .text-column {
    padding-top: 14px;
  }
}

@media (max-width: 600px) {
  .text-column h2.quotes-title {  /* on mobile and smaller screens: spacing between top of paper background and page title heading (margin-top) and spacing between bottom of page title heading and first quote (margin-bottom) */
    margin-top: 2.1rem;
    margin-bottom: 2.85rem;
  }
}

@media (min-width: 901px) {
    nav {
        padding-right: 30px;  /* padding to right of top nav menu, on larger screens */
    }
    header {
        padding-left: 40px;  /* padding to left of logo (logo-title/header-flex), on larger screens */
    }
}

@media (max-width: 600px) {
  header {
    padding-top: 13px;
    padding-bottom: 13px;
  }
}

/* ------------------------------
  DARK MODE DESIGN
------------------------------ */
@media (prefers-color-scheme: dark) {

  /* ===============================
     GLOBAL DARK MODE BACKGROUND + TEXT
     =============================== */
  body {
    background-color: #11100E;
    color: #B4A897;  /* Goldilocks warm parchment taupe A89B8A (most balanced); a touch lighter B4A897, BEB19F, AD9F8E, B0A392; soft sepia kindle warm higher contrast with a touch of golden glow A89D8F (most warmth and atmosphere); sensitive-eyes brown-gray lowest-glare A69B88 (maximum comfort); goldilocks but a little more brown A79B89; goldilocks but a little more brown lighter A89C8B; goldilocks but a little more brown darker A79A87; subdued parchment sepia A79A88; overall brighter C7BBAA; overall much brighter light sandy beige B3A895; darker golden olive taupe a bit heavy and yellowish A0937C */
  }

  p {
    color: inherit;  /* paragraphs inherit body text color */
  }

  body, header, footer, .text-column {
    background-image: none !important;  /* suppress background images in dark mode */
  }

  .soft-divider {
    border-top: 1px solid rgba(200, 190, 170, 0.18);
  }

  mark {
    background-color: #6B5A3A;  /* sepia wash highlighting for dark mode */
    color: #F0E8D8;  /* body text color underneath the highlighting in dark mode */
  }

  /* ===============================
     BODY LINKS - DARK MODE
     =============================== */
  body a {  /* DARK MODE body text links */
    color: #8EA77A;  /* alt: 7E8F6E */
    text-decoration: none;  /* no underline */
  }

  body a:hover {  /* DARK MODE body text links hover style */
    color: #A4C18F;  /* alt: 9BAF84 */
  }

.link-as-text:hover {
  text-decoration: none;
}

  /* ===============================
     HEADINGS - DARK MODE
     =============================== */
  h1, h2, h3 {
    color: #B6A792;  /* warm parchment highlight */
  }

  .text-column h2.quotes-title {color: #B4A897;}  /* new elegant small caps quotes pages title heading */

  .text-column h2.heading-with-subtitle { color: #B4A897; /* same as quotes-title */ }

  h3.subtitle {
    color: #958978;  /* faded ink (post-meta tone) */
  }

  figcaption {
    color: #958978;  /* matches post-meta */
  }

  /* ===============================
     POST META - DARK MODE
     =============================== */
  .post-meta {
    color: #958978;  /* bottom of page meta data in DARK MODE */
  }

  .post-meta::before {
    color: #958978;  /* flourish divider before meta data, in DARK MODE */
  }

  /* ===============================
     NAVIGATION - DARK MODE
     =============================== */
  nav {
    background-color: transparent;  /* DARK MODE nav background color */
  }

  .nav-menu a {
    color: #C7BBA8;
  }

  .nav-menu a:hover {
    background-color: #2C322A;  /* subtle hover background */
    color: #8FA77A;
  }

  @media (hover: none) {  /* removes hover menu color from DARK MODE on mobile */
    .nav-menu a:hover {
      background-color: transparent;
    }
  }

  /* ===============================
     MAIN CONTENT WRAPPERS - DARK MODE
     =============================== */
  .main, .content, .article, .text-column {
    background-color: transparent;  /* keep column blending with body in DARK MODE */
  }

  /* ===============================
     HEADER - DARK MODE
     =============================== */
  header {
    background-color: #1A1613;  /* DARK MODE header background color */
    background-image: none;  /* suppress header background image in DARK MODE */
    border-bottom: 1px solid #2E3A2C;  /* DARK MODE line at bottom of header section */
    box-shadow: 0 0 20px rgba(255,255,255,0.1);  /* DARK MODE header box shadow */
  }

  .logo-title-text h1 {
    color: #CBB892;  /* DARK MODE site title in header */
    text-shadow: 1px 1px 2px rgba(255,255,255,0.15);  /* DARK MODE subtle glow on text of header site title */
  }

  #tagline {
    color: #A8977F;
  }

  .logo-title-text sup {
    color: #9C8D77;  /* DARK MODE site title superscript TM text color */
  }

  /* ===============================
     FAQ Section - DARK MODE
     =============================== */
  .faq-section {
    border-top: 2px solid rgba(255,255,255,0.15);
    border-bottom: 2px solid rgba(255,255,255,0.15);
  }

  /* ===============================
     What's New Page - DARK MODE
     =============================== */
  .update-date {color: #b0b0b0;}

  /* ===============================
     FOOTER - DARK MODE
     =============================== */
  footer {
    background-color: #1A1613;  /* DARK MODE footer background color */
    background-image: none;  /* DARK MODE background image suppressed in footer */
    color: #A8977F;  /* DARK MODE text color in footer */
    border-top: 1px solid #2E3A2C;  /* DARK MODE line at top of footer section */
    box-shadow: 0 0 20px rgba(255,255,255,0.1);  /* DARK MODE footer box shadow */
  }

  .footer a {
    color: #B7A896;  /* DARK MODE text color of hyperlinks in footer */
  }

  .footer a:hover {
    color: #7E8F6E;  /* DARK MODE text hover color of hyperlinks in footer */
  }

  /* ===============================
     BACK TO TOP BUTTON - DARK MODE
     =============================== */
  .back-to-top {
    background: #1A1613;  /* DARK MODE background color of back to top arrow circle */
    color: #D3C7B4;  /* back to top arrow color in DARK MODE */
    border: 1px solid #556B2F;  /* DARK MODE outline width style color around circle of back to top arrow */
    box-shadow: 0 2px 10px rgba(255,255,255,0.1);  /* DARK MODE back to top arrow box shadow */
  }

  .back-to-top:hover {
    background: #556B2F;  /* DARK MODE back to top arrow background styling hover */
    color: #D3C7B4;  /* DARK MODE back to top arrow styling hover */
    outline: none;  /* DARK MODE back to top arrow outline in hover */
  }

  @media (hover: none) {  /* Mobile override: remove hover effects in DARK MODE */
    .back-to-top:hover {
      background: #1A1613;  /* reset to default */
      color: #D3C7B4;
      border-color: #556B2F;
    }
  }

}

/* leave one blank line at end of file, below this comment, because tech is freaking weird */