/* ==========================================================================
   LeviBath.com - companion article stylesheet
   --------------------------------------------------------------------------
   Canonical source: projects/levibath-techAI/tech/design/companion-article.css
   Reference render: projects/levibath-techAI/tech/design/reference/
   Markup contract:  projects/levibath-techAI/tech/design/COMPANION-ARTICLE-MARKUP.md

   Every rule is scoped under .lb-article, .lb-sitebar, .lb-sitefoot, or .lb-lb
   so nothing here can leak into the WordPress theme or the Bricks builder UI.
   Every custom property is prefixed --lb- for the same reason.

   Do not hand-edit this in Bricks. Edit here, redeploy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --lb-bg: #f6f7f9;
  --lb-bg-sunk: #eceff4;
  --lb-card: #ffffff;
  --lb-fg: #101720;
  --lb-fg-muted: #5a6472;
  --lb-fg-faint: #8a93a1;
  --lb-accent: #0b4fd8;
  --lb-accent-sunk: #e6ecfb;
  --lb-tab: #a8681b;
  --lb-tab-sunk: #f3ebdf;
  --lb-rule: #dde2e9;
  --lb-rule-strong: #c3cad4;
  --lb-code-bg: #11161f;
  --lb-code-fg: #dfe5ef;
  --lb-code-rule: #2a3342;
  --lb-chrome: rgba(246, 247, 249, 0.88);

  --lb-measure: 37rem;
  --lb-rail: 8.5rem;
  --lb-rail-gap: 2.25rem;
  /* Site chrome is wider than the reading column. A header squeezed to the
     article measure wraps its own nav onto three lines. */
  --lb-chrome-width: 72rem;

  --lb-serif: "Sitka Heading", "Iowan Old Style", Charter, "Bitstream Charter", Constantia, Georgia, serif;
  --lb-serif-text: "Sitka Text", Charter, "Bitstream Charter", "Iowan Old Style", Constantia, Georgia, serif;
  --lb-mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", ui-monospace, "Liberation Mono", monospace;
}

/* Dark tokens. Three declarations on purpose:
   - the media query carries the OS preference
   - [data-theme] wins in BOTH directions so the on-page toggle can override
     the OS in either direction, not just one */
@media (prefers-color-scheme: dark) {
  :root {
    --lb-bg: #0c1017;
    --lb-bg-sunk: #141a24;
    --lb-card: #151b26;
    --lb-fg: #e4e9f1;
    --lb-fg-muted: #98a2b1;
    --lb-fg-faint: #737e8d;
    --lb-accent: #7ba5ff;
    --lb-accent-sunk: #16233a;
    --lb-tab: #cf9a48;
    --lb-tab-sunk: #2a2113;
    --lb-rule: #222c3a;
    --lb-rule-strong: #334052;
    --lb-code-bg: #060a10;
    --lb-code-fg: #dfe5ef;
    --lb-code-rule: #1e2735;
    --lb-chrome: rgba(12, 16, 23, 0.88);
  }
}

:root[data-lb-theme="dark"] {
  --lb-bg: #0c1017;
  --lb-bg-sunk: #141a24;
  --lb-card: #151b26;
  --lb-fg: #e4e9f1;
  --lb-fg-muted: #98a2b1;
  --lb-fg-faint: #737e8d;
  --lb-accent: #7ba5ff;
  --lb-accent-sunk: #16233a;
  --lb-tab: #cf9a48;
  --lb-tab-sunk: #2a2113;
  --lb-rule: #222c3a;
  --lb-rule-strong: #334052;
  --lb-code-bg: #060a10;
  --lb-code-fg: #dfe5ef;
  --lb-code-rule: #1e2735;
  --lb-chrome: rgba(12, 16, 23, 0.88);
}

:root[data-lb-theme="light"] {
  --lb-bg: #f6f7f9;
  --lb-bg-sunk: #eceff4;
  --lb-card: #ffffff;
  --lb-fg: #101720;
  --lb-fg-muted: #5a6472;
  --lb-fg-faint: #8a93a1;
  --lb-accent: #0b4fd8;
  --lb-accent-sunk: #e6ecfb;
  --lb-tab: #a8681b;
  --lb-tab-sunk: #f3ebdf;
  --lb-rule: #dde2e9;
  --lb-rule-strong: #c3cad4;
  --lb-code-bg: #11161f;
  --lb-code-fg: #dfe5ef;
  --lb-code-rule: #2a3342;
  --lb-chrome: rgba(246, 247, 249, 0.88);
}

/* --------------------------------------------------------------------------
   2. Theme bridge

   Two things the Bricks theme does that this design has to answer for. Both
   were found live on 2026-07-30 after the first publish looked wrong.

   1. Bricks sets `html { font-size: 62.5% }`, the old 10px-root convention.
      Every rem here was authored against a 16px root, so the whole page
      rendered at 62.5% scale: a 54px headline came out at 34px. Re-anchoring
      the root is a one-line fix and is safe today because the site has no
      Bricks-built chrome depending on the 10px basis. When a Bricks header
      and footer exist, design those in their own units and leave this alone.

   2. The theme paints the page background white and never reads this file's
      tokens. In dark mode that put near-white text on a white page. The
      wrappers below must therefore paint their own ground rather than
      inheriting it.
   -------------------------------------------------------------------------- */

html {
  font-size: 16px;
}

/* The Bricks single-post template prints its own title, byline, tag list, and
   author card above the content. This design supplies a title, kicker, dek,
   and byline of its own, so without this the reader sees the headline twice:
   once in the theme's sans, once in ours, with dead space between them.
   Suppressed rather than deleted, so nothing is lost if this design is ever
   removed and the theme has to stand on its own again. */
body.single .brxe-post-title,
body.single .brxe-post-meta,
body.single .brxe-post-meta-wrapper,
body.single .brxe-post-author,
body.home .brxe-post-title,
body.home .brxe-post-meta {
  display: none;
}

body {
  background: var(--lb-bg);
  color: var(--lb-fg);
  -webkit-text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
   3. Site header
   -------------------------------------------------------------------------- */

.lb-sitebar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--lb-chrome);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lb-rule);
  font-family: var(--lb-mono);
}

.lb-sitebar__inner {
  box-sizing: border-box;
  max-width: var(--lb-chrome-width);
  margin-inline: auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.15rem;
  transition: padding 0.2s ease;
}

.lb-sitebar.is-condensed .lb-sitebar__inner {
  padding-block: 0.5rem;
}

.lb-wordmark {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-fg);
  text-decoration: none;
}

.lb-wordmark:hover {
  color: var(--lb-accent);
}

/* Tagline rides alongside the wordmark on wide screens and drops away on a
   phone, where the nav needs the whole row. */
.lb-sitebar__tagline {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--lb-fg-faint);
}

@media (max-width: 52rem) {
  .lb-sitebar__tagline {
    display: none;
  }
}

.lb-crumbs {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--lb-fg-faint);
  display: flex;
  gap: 0.1rem;
}

.lb-crumbs a {
  color: var(--lb-fg-muted);
  text-decoration: none;
}

.lb-crumbs a:hover {
  color: var(--lb-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lb-sitenav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lb-sitenav a {
  color: var(--lb-fg-muted);
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
}

.lb-sitenav a:hover {
  color: var(--lb-fg);
  border-bottom-color: var(--lb-accent);
}

.lb-sitenav a.is-cta {
  color: var(--lb-bg);
  background: var(--lb-accent);
  border: 0;
  padding: 0.4rem 0.8rem;
  font-weight: 700;
}

.lb-sitenav a.is-cta:hover {
  filter: brightness(1.12);
}

.lb-themebtn {
  font-family: var(--lb-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-fg-muted);
  background: transparent;
  border: 1px solid var(--lb-rule-strong);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lb-themebtn:hover {
  color: var(--lb-fg);
  border-color: var(--lb-accent);
}

/* Half-filled dot. Reads as a theme control without depending on hue,
   which matters because Levi is colorblind. */
.lb-themebtn::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: linear-gradient(to right, currentColor 0 50%, transparent 50% 100%);
}

@media (max-width: 34rem) {
  .lb-sitenav {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   4. Article shell and the rail geometry
   -------------------------------------------------------------------------- */

.lb-article {
  font-family: var(--lb-serif-text);
  font-size: 1.1875rem;
  line-height: 1.68;
  color: var(--lb-fg);
  background: var(--lb-bg);
  padding: 0 1.5rem 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 3.25rem;
}

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

/* Reset the theme's own vertical rhythm. Layout owns spacing here, via
   flex/grid gap, so stray theme margins cannot double or collapse. */
.lb-article h1,
.lb-article h2,
.lb-article h3,
.lb-article p,
.lb-article ul,
.lb-article ol,
.lb-article li,
.lb-article figure,
.lb-article figcaption,
.lb-article blockquote,
.lb-article pre {
  margin: 0;
  padding: 0;
}

.lb-band {
  width: 100%;
  max-width: var(--lb-measure);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-content: start;
}

@media (min-width: 64rem) {
  .lb-band {
    max-width: calc(var(--lb-rail) + var(--lb-rail-gap) + var(--lb-measure));
    grid-template-columns: var(--lb-rail) minmax(0, var(--lb-measure));
    column-gap: var(--lb-rail-gap);
  }
  .lb-band > * {
    grid-column: 2;
  }
  /* Higher specificity than .lb-band > * on purpose, so the rail keeps
     column 1 regardless of source order. */
  .lb-band > .lb-rail {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    padding-top: 0.75rem;
  }
}

.lb-rail {
  font-family: var(--lb-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lb-fg-faint);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. Article header
   -------------------------------------------------------------------------- */

.lb-head {
  padding-top: 3.25rem;
  gap: 0.9rem;
}

.lb-head .lb-byline {
  margin-top: 1.1rem;
}

.lb-tab {
  justify-self: start;
  background: var(--lb-tab-sunk);
  color: var(--lb-tab);
  font-family: var(--lb-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 1.5rem 0.4rem 0.9rem;
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 100%, 0 100%);
}

.lb-article h1 {
  font-family: var(--lb-serif);
  font-size: clamp(2.1rem, 6.4vw, 3.05rem);
  line-height: 1.07;
  letter-spacing: -0.018em;
  font-weight: 600;
  text-wrap: balance;
}

.lb-dek {
  font-family: var(--lb-serif-text);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--lb-fg-muted);
  text-wrap: pretty;
}

.lb-byline {
  border-top: 1px solid var(--lb-rule);
  border-bottom: 1px solid var(--lb-rule);
  padding: 0.85rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  font-family: var(--lb-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--lb-fg-muted);
}

.lb-byline strong {
  color: var(--lb-fg);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Prose
   -------------------------------------------------------------------------- */

.lb-article h2 {
  font-family: var(--lb-serif);
  font-size: clamp(1.5rem, 4.6vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  font-weight: 600;
  text-wrap: balance;
}

.lb-article p {
  text-wrap: pretty;
}

.lb-lede {
  font-size: 1.3125rem;
  line-height: 1.58;
}

.lb-article a {
  color: var(--lb-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.lb-article a:hover {
  text-decoration-thickness: 2px;
}

.lb-article :focus-visible,
.lb-sitebar :focus-visible,
.lb-sitefoot :focus-visible,
.lb-lb :focus-visible {
  outline: 2px solid var(--lb-accent);
  outline-offset: 3px;
}

.lb-article code {
  font-family: var(--lb-mono);
  font-size: 0.875em;
  background: var(--lb-accent-sunk);
  color: var(--lb-fg);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   7. Editorial devices
   -------------------------------------------------------------------------- */

/* The hinge: one quote per article, the line the whole piece turns on. */
.lb-hinge {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  border-left: 3px solid var(--lb-accent);
  padding: 0.25rem 0 0.25rem 1.5rem;
}

.lb-hinge__label {
  font-family: var(--lb-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lb-accent);
}

.lb-hinge__q {
  font-family: var(--lb-serif);
  font-size: clamp(1.5rem, 5vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  font-weight: 600;
  text-wrap: balance;
}

/* A beat: a single sentence promoted to display type. Use sparingly. */
.lb-beat {
  font-family: var(--lb-serif);
  font-size: clamp(1.3rem, 4.2vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--lb-fg);
  text-wrap: balance;
  padding: 0.5rem 0;
}

/* A question list. The marker is a question mark because the items are
   literally questions; it is not decoration. */
.lb-questions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  background: var(--lb-bg-sunk);
  border: 1px solid var(--lb-rule);
  padding: 0.4rem 0;
}

.lb-questions li {
  display: flex;
  gap: 0.85rem;
  padding: 0.5rem 1.15rem;
  font-family: var(--lb-serif-text);
  line-height: 1.45;
}

.lb-questions li::before {
  content: "?";
  font-family: var(--lb-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--lb-accent);
  flex: none;
  line-height: 1.55;
}

/* A caveat box: the things a reader must know before acting. */
.lb-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--lb-rule);
  background: var(--lb-card);
  padding: 1.15rem 1.35rem;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.lb-box__label {
  font-family: var(--lb-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lb-fg-muted);
}

/* --------------------------------------------------------------------------
   8. File cards
   A code block drawn as an actual file, with a manila tab carrying the name.
   -------------------------------------------------------------------------- */

.lb-file {
  display: flex;
  flex-direction: column;
}

.lb-file__tab {
  align-self: start;
  background: var(--lb-code-bg);
  color: var(--lb-tab);
  font-family: var(--lb-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.45rem 1.5rem 0.4rem 0.9rem;
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 100%, 0 100%);
}

.lb-file__body {
  background: var(--lb-code-bg);
  border-top: 1px solid var(--lb-code-rule);
  overflow-x: auto;
  padding: 1.15rem 1.25rem;
}

.lb-file__body pre {
  font-family: var(--lb-mono);
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--lb-code-fg);
  white-space: pre;
}

.lb-file__body code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  color: inherit;
  padding: 0;
}

.lb-file__body .lb-key {
  color: var(--lb-tab);
}

/* --------------------------------------------------------------------------
   9. Figures and click-to-zoom
   -------------------------------------------------------------------------- */

.lb-article figure {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.lb-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--lb-rule);
  background: var(--lb-bg-sunk);
  cursor: zoom-in;
  position: relative;
}

.lb-zoom:hover {
  border-color: var(--lb-accent);
}

.lb-article figure img {
  display: block;
  width: 100%;
  height: auto;
}

.lb-zoom__hint {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  font-family: var(--lb-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e9edf4;
  background: rgba(9, 13, 20, 0.72);
  padding: 0.3rem 0.55rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.lb-zoom:hover .lb-zoom__hint,
.lb-zoom:focus-visible .lb-zoom__hint {
  opacity: 1;
}

.lb-article figcaption {
  font-family: var(--lb-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--lb-fg-muted);
  padding-left: 0.75rem;
  border-left: 2px solid var(--lb-rule-strong);
}

/* --------------------------------------------------------------------------
   10. Closing blocks
   -------------------------------------------------------------------------- */

.lb-watch {
  border-top: 2px solid var(--lb-fg);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lb-watch__label {
  font-family: var(--lb-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lb-fg-muted);
}

.lb-watch__title {
  font-family: var(--lb-serif);
  font-size: clamp(1.35rem, 4.4vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 600;
  text-wrap: balance;
}

.lb-watch__title a {
  color: var(--lb-fg);
  text-decoration-color: var(--lb-accent);
  text-decoration-thickness: 2px;
}

.lb-watch__title a:hover {
  color: var(--lb-accent);
}

.lb-watch p {
  color: var(--lb-fg-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.lb-next {
  display: grid;
  gap: 1px;
  background: var(--lb-rule);
  border: 1px solid var(--lb-rule);
}

@media (min-width: 40rem) {
  .lb-next {
    grid-template-columns: 1fr 1fr;
  }
}

.lb-next__item {
  background: var(--lb-card);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-decoration: none;
}

.lb-next__item:hover {
  background: var(--lb-accent-sunk);
}

.lb-next__kicker {
  font-family: var(--lb-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lb-fg-faint);
}

.lb-next__title {
  font-family: var(--lb-serif);
  font-size: 1.1875rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--lb-fg);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   11. Site footer
   A directory listing of the site. This is the one place the retro-computing
   accent is allowed to be literal, and it doubles as real navigation.
   -------------------------------------------------------------------------- */

.lb-sitefoot {
  border-top: 1px solid var(--lb-rule);
  background: var(--lb-bg-sunk);
  padding: 3rem 1.5rem 3.5rem;
  color: var(--lb-fg);
}

.lb-sitefoot__inner {
  box-sizing: border-box;
  max-width: calc(var(--lb-rail) + var(--lb-rail-gap) + var(--lb-measure));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.lb-dir {
  font-family: var(--lb-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.lb-dir__head {
  color: var(--lb-fg-faint);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--lb-rule-strong);
  padding-bottom: 0.6rem;
  margin: 0;
}

.lb-dir__rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.lb-dir__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem 1.5rem;
}

@media (min-width: 40rem) {
  .lb-dir__row {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.lb-dir__row a {
  color: var(--lb-fg);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--lb-rule-strong);
  padding-bottom: 1px;
  justify-self: start;
}

.lb-dir__row a:hover {
  color: var(--lb-accent);
  border-bottom-color: var(--lb-accent);
}

.lb-dir__row span {
  color: var(--lb-fg-muted);
}

.lb-signoff {
  border-top: 1px solid var(--lb-rule-strong);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lb-signoff__thesis {
  font-family: var(--lb-serif);
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin: 0;
}

.lb-signoff__meta {
  font-family: var(--lb-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--lb-fg-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. Lightbox
   -------------------------------------------------------------------------- */

.lb-lb[hidden] {
  display: none;
}

.lb-lb {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(6, 9, 14, 0.94);
  display: flex;
  flex-direction: column;
  padding: 3.25rem 1rem 1rem;
  gap: 0.9rem;
}

.lb-lb__stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
}

.lb-lb__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  cursor: zoom-in;
}

.lb-lb.is-actual .lb-lb__stage {
  place-items: start;
}

.lb-lb.is-actual .lb-lb__img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

.lb-lb__cap {
  font-family: var(--lb-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: #aab4c2;
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  flex: none;
}

.lb-lb__close {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-family: var(--lb-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e9edf4;
  background: transparent;
  border: 1px solid rgba(233, 237, 244, 0.35);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}

.lb-lb__close:hover {
  border-color: #e9edf4;
}

.lb-lb__scale {
  position: absolute;
  top: 0.85rem;
  left: 1rem;
  font-family: var(--lb-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b96a5;
}

/* --------------------------------------------------------------------------
   13. Motion
   -------------------------------------------------------------------------- */

.lb-head > * {
  animation: lb-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.lb-head > .lb-tab { animation-delay: 0.02s; }
.lb-head > h1 { animation-delay: 0.08s; }
.lb-head > .lb-dek { animation-delay: 0.16s; }
.lb-head > .lb-byline { animation-delay: 0.24s; }

@keyframes lb-rise {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-head > * { animation: none; }
  .lb-sitebar__inner { transition: none; }
  .lb-zoom__hint { transition: none; }
}
/* ==========================================================================
   LeviBath.com - home page additions
   Loads on top of companion-article.css. Reuses its tokens; adds nothing new
   to the palette or the type scale.
   ========================================================================== */

.lb-home {
  font-family: var(--lb-serif-text);
  font-size: 1.1875rem;
  line-height: 1.68;
  color: var(--lb-fg);
  background: var(--lb-bg);
  padding: 0 1.5rem 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 3.25rem;
}

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

.lb-home h1,
.lb-home p,
.lb-home span,
.lb-home img {
  margin: 0;
}

/* ---- hero ---------------------------------------------------------- */

.lb-hero {
  width: 100%;
  max-width: calc(var(--lb-rail) + var(--lb-rail-gap) + var(--lb-measure));
  margin-inline: auto;
  padding-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.lb-hero__title {
  font-family: var(--lb-serif);
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
  max-width: 18ch;
}

.lb-hero__dek {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--lb-fg-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.lb-hero__by {
  font-family: var(--lb-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lb-fg-faint);
  border-top: 1px solid var(--lb-rule);
  padding-top: 0.9rem;
  width: 100%;
}

/* ---- shared band, mirrors the article's rail geometry --------------- */

.lb-home-band {
  width: 100%;
  max-width: var(--lb-measure);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 64rem) {
  .lb-home-band {
    max-width: calc(var(--lb-rail) + var(--lb-rail-gap) + var(--lb-measure));
    grid-template-columns: var(--lb-rail) minmax(0, var(--lb-measure));
    column-gap: var(--lb-rail-gap);
  }
  .lb-home-band > * {
    grid-column: 2;
  }
  .lb-home-band > .lb-rail {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    padding-top: 0.4rem;
  }
}

/* ---- featured article ----------------------------------------------- */

.lb-feature {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--lb-rule);
  background: var(--lb-card);
  padding: 1.15rem;
}

.lb-feature:hover {
  border-color: var(--lb-accent);
}

.lb-feature__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--lb-rule);
  margin-bottom: 0.35rem;
}

.lb-feature__kicker {
  font-family: var(--lb-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lb-fg-faint);
}

.lb-feature__title {
  font-family: var(--lb-serif);
  font-size: clamp(1.4rem, 4.4vw, 1.8rem);
  line-height: 1.18;
  letter-spacing: -0.014em;
  font-weight: 600;
  text-wrap: balance;
}

.lb-feature__dek {
  color: var(--lb-fg-muted);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.lb-feature__cta {
  font-family: var(--lb-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lb-accent);
  margin-top: 0.25rem;
}

.lb-feature:hover .lb-feature__cta {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ---- plain copy block ----------------------------------------------- */

.lb-home-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lb-home-copy p {
  text-wrap: pretty;
}