/* =========================================================
   LIBRARY OF PHILOSOPHY — BRANCHES PAGE REFINEMENT LAYER

   Load AFTER style.css and home-refine.css:

     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="home-refine.css">
     <link rel="stylesheet" href="branches-refine.css">

   Paragraph typography is intentionally left untouched.
   ========================================================= */


:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gold-line: color-mix(in srgb,
      var(--gold, #b88a44) 22%,
      transparent);
}


/* =========================================================
   1. ANCHOR OFFSET UNDER STICKY NAVBAR
   ========================================================= */

section[id],
.branch {
  scroll-margin-top: 90px;
}

@media (max-width: 1024px) {

  section[id],
  .branch {
    scroll-margin-top: 72px;
  }
}

@media (max-width: 600px) {

  section[id],
  .branch {
    scroll-margin-top: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* =========================================================
   2. SCREEN-READER HELPERS
   ========================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
  z-index: 9999;
  padding: .6rem 1rem;
  border-radius: 6px;
  background: var(--gold, #b88a44);
  color: #14100b;
  font-weight: 600;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold, #b88a44);
  outline-offset: 3px;
  border-radius: 6px;
}


/* =========================================================
   3. READING PROGRESS BAR
   ========================================================= */

.reading-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 9998;

  transform: scaleX(0);
  transform-origin: 0 50%;

  background: linear-gradient(to right,
      color-mix(in srgb,
        var(--gold, #b88a44) 60%,
        transparent),
      var(--gold, #b88a44));
}


/* =========================================================
   5. SECTION RHYTHM & MEASURE
   ========================================================= */

.branch-intro,
.philosophy-tree,
.comparison,
.connection,
.quote {
  padding-block: clamp(2rem, 5vw, 3.6rem);
}

.branch-intro {
  width: min(72ch, 92vw);
  margin-inline: auto;
}

.section-eyebrow {
  display: block;

  margin-bottom: .35rem;

  font-size: .76rem;
  letter-spacing: .2em;

  text-transform: uppercase;

  opacity: .7;
}


/* =========================================================
   6. TREE OF PHILOSOPHY
   ========================================================= */

.tree-intro {
  width: min(68ch, 92vw);
  margin-inline: auto;
}

.tree-box {
  width: min(1000px, 92vw);

  margin-inline: auto;

  padding: clamp(1.2rem, 3vw, 2.2rem);

  border: 1px solid var(--gold-line);
  border-radius: 18px;

  background: color-mix(in srgb,
      #ffffff 4%,
      transparent);
}

.tree-root {
  text-align: center;
  margin-block: 0 1.2rem;
}

.tree-list {
  list-style: none;

  margin: 0;
  padding: 0;

  display: grid;

  gap: .7rem;

  grid-template-columns:
    repeat(auto-fit, minmax(290px, 1fr));
}

.tree-list a {
  display: flex;

  flex-direction: column;

  align-items: stretch;

  justify-content: flex-start;

  gap: 1rem;

  height: 100%;

  padding: 1rem 1.1rem;

  border: 1px solid var(--gold-line);

  border-radius: 14px;

  text-decoration: none;

  transition:
    transform .28s var(--ease-out),
    border-color .28s var(--ease-out),
    background .28s var(--ease-out);
}

.tree-list a:hover,
.tree-list a:focus-visible {
  transform: translateY(-3px);

  border-color: color-mix(in srgb,
      var(--gold, #b88a44) 48%,
      transparent);

  background: color-mix(in srgb,
      var(--gold, #b88a44) 9%,
      transparent);
}

.branch-info {
  flex: 1;

  min-width: 0;

  line-height: 1.5;
}

.read-more {
  flex: 0 0 auto;

  align-self: flex-end;

  margin-top: auto;

  font-size: .72rem;

  letter-spacing: .14em;

  white-space: nowrap;

  opacity: .75;

  transition:
    transform .28s var(--ease-out),
    opacity .28s var(--ease-out);
}

.tree-list a:hover .read-more {
  opacity: 1;

  transform: translateX(3px);
}


/* =========================================================
   7. BRANCH SECTIONS
   ========================================================= */

.branch {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr) minmax(0, 1.15fr);

  align-items: start;

  gap: clamp(1.4rem, 4vw, 3rem);

  width: min(1150px, 92vw);

  margin-inline: auto;

  padding-block: clamp(1.6rem, 4vw, 3rem);
}

.branch.reverse {
  grid-template-columns:
    minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.branch-image {
  margin: 0;

  position: sticky;

  top: clamp(118px, 17vh, 160px);

  border-radius: 18px;

  overflow: hidden;

  box-shadow:
    0 0 0 1px color-mix(in srgb,
      var(--gold, #b88a44) 30%,
      transparent),
    0 18px 40px rgba(0, 0, 0, .32);
}

.branch-image img {
  display: block;

  width: 100%;
  height: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  object-position: center;

  transition:
    transform .6s var(--ease-out);
}

.branch:hover .branch-image img {
  transform: scale(1.035);
}

.branch-content h2 {
  margin-block: 0 .6rem;

  line-height: 1.2;
}

.branch-content h4 {
  margin-block: 1.4rem .5rem;

  font-size: .8rem;

  letter-spacing: .16em;

  text-transform: uppercase;

  opacity: .8;
}


/* Famous philosophers become chips */

.branch-content ul {
  display: flex;

  flex-wrap: wrap;

  gap: .45rem;

  list-style: none;

  padding: 0;

  margin: 0;
}

.branch-content ul li {
  padding: .3rem .78rem;

  font-size: .86rem;

  border: 1px solid color-mix(in srgb,
      var(--gold, #b88a44) 30%,
      transparent);

  border-radius: 999px;

  background: color-mix(in srgb,
      var(--gold, #b88a44) 8%,
      transparent);
}


/* Main Question */

.branch-question {
  margin: 0;

  padding: .7rem 0 .7rem 1.1rem;

  border-inline-start:
    2px solid color-mix(in srgb,
      var(--gold, #b88a44) 55%,
      transparent);

  font-style: italic;
}


/* =========================================================
   8. COMPARISON TABLE
   ========================================================= */

.comparison {
  width: min(1100px, 92vw);

  margin-inline: auto;
}

.table-scroll {
  overflow-x: auto;

  border: 1px solid var(--gold-line);

  border-radius: 16px;

  -webkit-overflow-scrolling: touch;
}

.comparison table {
  width: 100%;

  border-collapse: collapse;

  min-width: 620px;
}

.comparison caption {
  caption-side: bottom;

  padding-top: .8rem;

  font-size: .82rem;

  opacity: .7;
}

.comparison th,
.comparison td {
  padding: .85rem 1rem;

  text-align: left;

  border-bottom:
    1px solid var(--gold-line);

  vertical-align: top;
}

.comparison thead th {
  position: sticky;

  top: 0;

  font-size: .78rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  background: color-mix(in srgb,
      var(--background, #14100b) 92%,
      transparent);
}

.comparison tbody tr {
  transition:
    background .2s var(--ease-out);
}

.comparison tbody tr:hover {
  background: color-mix(in srgb,
      var(--gold, #b88a44) 8%,
      transparent);
}

.comparison tbody tr:last-child td {
  border-bottom: 0;
}


/* =========================================================
   9. QUOTE & CLOSING CTA
   ========================================================= */

.quote {
  width: 100%;

  max-width: none;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
}

.quote blockquote {
  width: min(70ch, 90vw);

  max-width: 70ch;

  margin-left: auto;
  margin-right: auto;

  text-align: center;

  font-style: italic;
}

.connection {
  width: min(72ch, 92vw);

  margin-inline: auto;
}

.cta-button {
  display: inline-block;

  margin-top: 1.4rem;

  padding: .8rem 1.6rem;

  border-radius: 999px;

  border: 1px solid color-mix(in srgb,
      var(--gold, #b88a44) 55%,
      transparent);

  text-decoration: none;

  transition:
    background .25s var(--ease-out),
    transform .25s var(--ease-out);
}

.cta-button:hover,
.cta-button:focus-visible {
  transform: translateY(-2px);

  background: color-mix(in srgb,
      var(--gold, #b88a44) 16%,
      transparent);
}


/* =========================================================
   10. REVEAL ON SCROLL
   ========================================================= */

.js-motion .branch,
.js-motion .tree-box,
.js-motion .comparison,
.js-motion .quote,
.js-motion .connection {
  opacity: 0;

  transform: translateY(18px);

  transition:
    opacity .6s var(--ease-out),
    transform .6s var(--ease-out);
}

.js-motion .is-visible {
  opacity: 1;

  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .js-motion .branch,
  .js-motion .tree-box,
  .js-motion .comparison,
  .js-motion .quote,
  .js-motion .connection {
    opacity: 1;

    transform: none;

    transition: none;
  }
}


/* =========================================================
   11. BRANCH INTRODUCTION WIDTH
   ========================================================= */

.branch-intro {
  width: min(900px, 90vw);

  max-width: 900px;

  margin-left: auto;
  margin-right: auto;
}

.branch-intro p {
  width: 100%;

  max-width: 900px;

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   12. PAGE WIDTH SUPPORT
   ========================================================= */

body.page-wide .branch-intro,
body.page-wide .branch-intro p {
  width: min(calc(900px + var(--wide-extra, 0px)),
      94vw);

  max-width:
    calc(900px + var(--wide-extra, 0px));
}

body.page-wide .tree-intro {
  width: min(calc(68ch + var(--wide-extra, 0px)),
      94vw);
}

body.page-wide .tree-box {
  width: min(calc(1000px + var(--wide-extra, 0px)),
      94vw);
}

body.page-wide .branch,
body.page-wide .branch.reverse {
  width: min(calc(1150px + var(--wide-extra, 0px)),
      94vw);
}

body.page-wide .comparison {
  width: min(calc(1100px + var(--wide-extra, 0px)),
      94vw);
}

body.page-wide .connection {
  width: min(calc(72ch + var(--wide-extra, 0px)),
      94vw);
}

body.page-wide .quote blockquote {
  width: min(calc(70ch + var(--wide-extra, 0px)),
      94vw);

  max-width: none;
}

/* =========================================================
   13. MOBILE BRANCH LAYOUT FIX
   (branches-refine.css loads after style.css and its .branch
   grid-template-columns has no breakpoint, so it was silently
   overriding style.css's mobile stacking rules — this restores
   the stack and kills the sticky-image scroll glitch)
   ========================================================= */

@media (max-width: 1024px) {
  .branch,
  .branch.reverse {
    grid-template-columns: 1fr !important;
  }

  .branch-image {
    position: static !important;   /* kill the sticky pin */
    top: auto !important;
    width: 100%;
    max-width: 100%;
  }

  .branch-image img {
    aspect-ratio: 16 / 9 !important; /* portrait 4/5 looks too tall stacked full-width */
    width: 100%;
    height: 100%;
  }

  .branch-content {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .branch,
  .branch.reverse {
    padding-block: 1.6rem;
  }

  .branch-content h2 {
    text-align: center;
  }

  .branch-content ul {
    justify-content: center;
  }
}