@charset "UTF-8";

/* === Design tokens =======================================================
 * Centralised so we can refer to them by name in conversation
 * ("--gap-md" / "--col-left"). Mobile overrides happen inside the @media
 * block at the bottom. */
:root {
  --gap-sm:  8px;
  --gap-md:  16px;
  --gap-lg:  32px;
  --gap-xl:  48px;

  /* Layout: a single small indent step (12px) is reused at every level —
   *   sidebar gap → h2 → +step → article (card) → +step → body
   * so the hierarchy reads as gentle nesting rather than a staircase. */
  --sidebar-end:   308px;       /* #column right edge */
  --indent-gap:    24px;        /* gap between sidebar and main column */
  --indent-step:   12px;        /* one nesting step */
  --col-h2-left:   332px;       /* sidebar-end + indent-gap */
  --col-card-left: 344px;       /* col-h2-left + indent-step */
  --col-body-pad:  12px;        /* indent-step applied inside the card */

  --col-right:     32px;
  --col-max-width: 760px;
  --rule-color:    #e5eaf0;
}

/* modern.css — refinement overlay on top of the original 2011 theme.
 * Loaded after common.css and mobile.css so cascade order alone resolves
 * specificity. Never uses !important.
 *
 * Structure introduced by this file:
 *   main > h2                         — section heading (dark navy band)
 *   main > article.post-card          — one post (title + meta + body)
 *   main > section.archive-year       — year cluster on the archive index
 *   main > section.comments-archive   — comments after a single post
 *   main > nav.post-nav               — prev/next post navigation
 *   main > ul#page                    — pagination
 */

/* === Typography base ===================================================== */

html { font-size: 16px; }
body {
  line-height: 1.85;
  font-feature-settings: "palt" 1;
}

/* Defensive overflow control — many WP-era posts contain unbroken URLs that
 * would otherwise force horizontal scroll. */
main, main * {
  overflow-wrap: anywhere;
  min-width: 0;
}
main img, main video, main iframe {
  max-width: 100%;
  height: auto;
}

/* Tablet / small-desktop banner clamp — theme's #test a has min-width:1072px
 * which overflows on viewports narrower than that. */
@media (max-width: 1071px) {
  #test a {
    min-width: 0;
    width: 100%;
    background-position: center top;
  }
}

/* === Content column shared sizing ======================================== */

/* h2 lives at the shallowest indent; cards and other content blocks live one
 * step deeper. Max-width keeps a common cap on wide screens. */
main > h2 {
  max-width: min(var(--col-max-width), calc(100vw - var(--col-h2-left) - var(--col-right)));
}
:where(
  main > article.post-card,
  main > section.archive-year,
  main > section.comments-archive,
  main > nav.post-nav,
  main > ul#page
) {
  max-width: min(var(--col-max-width), calc(100vw - var(--col-card-left) - var(--col-right)));
}

/* === h2 (section heading band) =========================================== */

h2 {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  line-height: 2.4em;
}
main > h2 {
  /* Top margin matches --gap-md so the breathing room above mirrors the
   * horizontal gap to the sidebar. */
  margin: var(--gap-md) var(--col-right) var(--gap-md) var(--col-h2-left);
}

/* === Post card =========================================================== */

main > article.post-card {
  /* Card indents one step deeper than h2. */
  margin: 0 var(--col-right) 0 var(--col-card-left);
  padding: var(--gap-lg) 0;
  border-bottom: 1px solid var(--rule-color);
}
/* The first card sits right under h2 — its own top padding would push it
 * too far down. Remove it so the first article hugs the section heading. */
main > article.post-card:first-of-type {
  padding-top: 0;
}
main > article.post-card:last-of-type {
  border-bottom: 0;
}

/* Inside a card, every block sits flush — the card itself owns the column
 * margins so theme defaults like `h3 { margin-left: 324px }` are neutralised. */
.post-card > h3,
.post-card > p,
.post-card > div.text {
  margin-left: 0;
  margin-right: 0;
}

.post-card > h3 {
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 var(--gap-sm);
}
.post-card > h3 a {
  position: relative;
  text-decoration: none;
  color: #304153;
}
.post-card > h3 a:hover {
  background: transparent;
  color: #304153;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.post-card > p.category {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #5d6b78;
  border: 0;
  padding: 0;
  margin: 0 0 var(--gap-md);
}
.post-card > p.category span {
  font-weight: 600;
  color: #959da5;
  margin-right: 0.25em;
}
.post-card > p.category a.comment-count {
  display: inline-block;
  margin-left: 0.5em;
  padding: 2px 8px;
  background: #eef1f4;
  border: 1px solid #d6dde3;
  border-radius: 999px;
  font-size: 0.95em;
  text-decoration: none;
}
.post-card > p.category a.comment-count:hover {
  background: #304153;
  color: #fff;
  border-color: #304153;
}

.post-card > div.text {
  /* Body indents one step deeper than the card on BOTH sides. */
  font-size: 1rem;
  line-height: 1.85;
  margin: 0;
  padding: 0 var(--col-body-pad);
  border: 0;
}
.post-card > div.text p { margin-top: 1.5em; }
.post-card > div.text p:first-child { margin-top: 0; }
.post-card > div.text img {
  border-radius: 4px;
}

/* Compact variant — category & monthly archive listings show only title +
 * date, no body. Tighter vertical rhythm. */
main > article.post-card--compact {
  padding: var(--gap-md) 0;
}
.post-card--compact > h3 { font-size: 1.05rem; margin-bottom: 4px; }
.post-card--compact > p.category { margin-bottom: 0; }

/* === Archive year cluster (year-grouped index) =========================== */

main > section.archive-year {
  margin: 0 var(--col-right) 0 var(--col-card-left);
  padding: var(--gap-md) 0 var(--gap-lg);
  border-bottom: 1px solid var(--rule-color);
}
main > section.archive-year:last-of-type { border-bottom: 0; }
section.archive-year > h3 {
  margin: 0 0 var(--gap-sm);
  font-size: 1.1rem;
  font-weight: 600;
  background: transparent;
  border: 0;
  padding: 0;
  white-space: normal;
}
section.archive-year > div.text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
}
section.archive-year ul { list-style: none; padding: 0; margin: 0; }
section.archive-year li { padding: 4px 0; }
section.archive-year li small { color: #959da5; margin-right: 0.5em; }

/* === Comments archive (on single post pages) ============================ */

main > section.comments-archive {
  margin: var(--gap-lg) var(--col-right) 0 var(--col-card-left);
  padding: var(--gap-md) 0 var(--gap-lg);
  border-top: 1px solid var(--rule-color);
}
section.comments-archive > h3 {
  margin: 0 0 var(--gap-md);
  font-size: 1rem;
  font-weight: 600;
  background: transparent;
  border: 0;
  padding: 0;
  white-space: normal;
}
section.comments-archive .comment-item {
  margin: 0 0 var(--gap-md);
  padding: var(--gap-sm) 0;
  border-top: 1px solid var(--rule-color);
}
section.comments-archive .comment-item:first-of-type { border-top: 0; padding-top: 0; }
section.comments-archive .comment-item > p.category {
  font-size: 0.8125rem;
  margin: 0 0 var(--gap-sm);
  color: #5d6b78;
  border: 0;
  padding: 0;
}
section.comments-archive .comment-item > div.comment {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444;
}
section.comments-archive .comments-disabled {
  margin: var(--gap-md) 0 0;
  color: #959da5;
  font-size: 0.85rem;
}

/* === Post navigation (prev/next within category) ========================= */

main > nav.post-nav {
  display: flex;
  gap: var(--gap-md);
  margin: var(--gap-md) var(--col-right) 0 var(--col-card-left);
  padding: var(--gap-md) 0;
  border-top: 1px solid var(--rule-color);
  font-size: 0.875rem;
  line-height: 1.45;
}
.post-nav-prev, .post-nav-next { flex: 1 1 50%; min-width: 0; }
.post-nav-next { text-align: right; }
.post-nav .label {
  display: block;
  color: #959da5;
  font-size: 0.75rem;
  margin-bottom: 4px;
  letter-spacing: 0.08em;
}
.post-nav .label.muted { color: #cfd5db; }
.post-nav a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  color: #304153;
  text-decoration: none;
}
.post-nav a:hover { text-decoration: underline; }

/* === Mobile refinements ================================================== */

@media (max-width: 759px) {
  /* On mobile, drop the desktop stepped indent: column spans the full
   * viewport with a uniform 16px inset. The body indent inside the card is
   * kept but reduced so it still reads as a step. */
  :root {
    /* Mobile has less horizontal room — keep h2 and card flush at 16px so
     * the left/right insets stay symmetric. Body still gets a small indent
     * inside the card via --col-body-pad. */
    --col-h2-left: 16px;
    --col-card-left: 16px;
    --col-right: 16px;
    /* --col-body-pad inherits 12px from the default :root rule */
    --col-max-width: none;
  }
  main > h2,
  :where(
    main > article.post-card,
    main > section.archive-year,
    main > section.comments-archive,
    main > nav.post-nav,
    main > ul#page
  ) {
    max-width: none;
  }

  h2 { font-size: 1rem; line-height: 1.4; }
  main > h2 {
    margin: 0 0 var(--gap-md);
    padding: 12px var(--col-h2-left);
  }

  main > article.post-card { padding: var(--gap-md) 0; }
  .post-card > h3 { font-size: 1.2rem; }
  .post-card > div.text { font-size: 1rem; line-height: 1.8; }

  main > section.archive-year { padding: var(--gap-md) 0; }
  main > section.comments-archive { margin-top: var(--gap-md); padding: var(--gap-md) 0; }

  main > nav.post-nav { flex-direction: column; gap: var(--gap-sm); }
  .post-nav-next { text-align: left; }
}