/* ============================================================
   manishelf-cozy.css — cozy handmade repaint of the product page
   Pairs with: redesign/manishelf-cozy.html
   Strategy: override CSS vars + targeted selectors to recolor
   and re-surface the page without touching main style.css.
   ============================================================ */

body.manishelf-page {
  /* Cozy palette — matches redesign/index.html */
  --cream:        #f3ecdd;
  --cream-soft:   #f8f2e4;
  --sheet:        #fbf4df;
  --ink:          #2a1f3d;
  --ink-soft:     #4a3a62;
  --ink-faint:    #8a7a9e;
  --plum:         #6b4a8a;
  --plum-dusk:    #8d6fb0;
  --plum-haze:    #c9b8dd;
  --ember:        #c9765a;
  --ember-warm:   #f2c9a6;

  /* Remap the base system vars to the cozy palette */
  --bg-deep:        #fbefd8;
  --surface:        #fbf4df;
  --surface-raised: #fdf8e6;
  --border:         rgba(107, 74, 138, 0.16);
  --border-hover:   rgba(201, 118, 90, 0.45);
  --text:           var(--ink);
  --text-muted:     var(--ink-soft);
  --text-dim:       var(--ink-faint);
  --accent:         var(--plum);
  --accent-bright:  var(--plum-dusk);
  --accent-glow:    rgba(141, 111, 176, 0.18);
}

/* ---------- Body + gradient + aged-paper stains ---------- */

body.manishelf-page {
  background:
    radial-gradient(ellipse 460px 300px at 78% 14%, rgba(188, 118, 78, 0.16), transparent 68%),
    radial-gradient(ellipse 340px 240px at 14% 30%, rgba(188, 118, 78, 0.12), transparent 70%),
    radial-gradient(ellipse 500px 340px at 68% 58%, rgba(170, 110, 70, 0.10), transparent 70%),
    radial-gradient(ellipse 300px 220px at 20% 76%, rgba(170, 110, 70, 0.09), transparent 72%),
    radial-gradient(circle 160px at 52% 44%, rgba(150, 95, 60, 0.07), transparent 75%),
    radial-gradient(circle 130px at 88% 88%, rgba(150, 95, 60, 0.08), transparent 75%),
    linear-gradient(to bottom,
      #e3b58a 0%, #e8bc92 6%, #efcaa8 14%, #f4d6bc 24%,
      #f8e2ca 36%, #fbecd6 50%, #fdf2e0 66%,
      #fef7ea 82%, #fffaf1 100%) !important;
  /* Scroll-attached instead of fixed — see note in index-cozy.css.
     Fixed attachment + complex gradients = Safari paint jitter on
     upward scroll. */
  background-attachment: scroll !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  overflow-x: clip !important;
  overscroll-behavior: none !important;
  max-width: 100vw !important;
}
html:has(body.manishelf-page) {
  overflow-x: clip !important;
  /* Suppress Chrome's pull-to-refresh indicator and match the top of the
     body gradient so the iOS rubber-band / Android elastic-scroll area
     stays warm cream instead of flashing white. */
  overscroll-behavior: none !important;
  background-color: #e3b58a !important;
}

@media (prefers-color-scheme: dark) {
  html:has(body.manishelf-page) {
    background-color: #0f0718 !important;
  }
}

body.manishelf-page .mani-ambient { display: none !important; }

/* ---------- Topbar ---------- */

body.manishelf-page .mani-topbar {
  border-bottom: 1px dashed rgba(107, 74, 138, 0.25) !important;
}
body.manishelf-page .topbar-mark {
  color: var(--ember) !important;
}
body.manishelf-page .topbar-mark .dot {
  background: var(--ember) !important;
  box-shadow: 0 0 10px rgba(201, 118, 90, 0.45) !important;
}
body.manishelf-page .topbar-nav a {
  color: var(--ink) !important;
}
body.manishelf-page .topbar-nav a:hover {
  color: var(--ember) !important;
}
body.manishelf-page .topbar-nav a::after {
  background: var(--ember) !important;
}

/* ---------- Hero ---------- */

body.manishelf-page .mani-hero {
  color: var(--ink) !important;
}
body.manishelf-page .mani-title,
body.manishelf-page .mani-title * {
  color: var(--ink) !important;
  text-shadow: none !important;
  font-size: clamp(44px, 7vw, 84px) !important;
  letter-spacing: -0.02em !important;
}
body.manishelf-page .hero-titleblock {
  margin: 0 0 24px !important;
  --icon-w: clamp(44px, 5vw, 60px) !important;
}
body.manishelf-page .mani-hero {
  padding-top: clamp(16px, 3vh, 32px) !important;
}
body.manishelf-page .mani-subtitle {
  margin-bottom: 18px !important;
}
body.manishelf-page .mani-desc {
  margin-bottom: 24px !important;
}
body.manishelf-page .mani-title .m-1 {
  color: var(--ember) !important;
}
body.manishelf-page .mani-subtitle {
  color: var(--ink) !important;
}
body.manishelf-page .mani-subtitle em {
  color: var(--ember) !important;
  font-style: italic !important;
  font-weight: 700 !important;
}
body.manishelf-page .mani-desc {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

/* ---------- App icon softness ---------- */
body.manishelf-page .mani-icon {
  filter: drop-shadow(0 6px 14px rgba(107, 74, 138, 0.18)) !important;
}

/* ---------- MAS "App Store" badge ---------- */

body.manishelf-page .mas-badge {
  background: transparent !important;
  border: 1.5px solid var(--ember) !important;
  color: var(--ember) !important;
  box-shadow: 0 2px 0 rgba(201, 118, 90, 0.10) !important;
}
body.manishelf-page .mas-badge:hover {
  background: var(--ember) !important;
  color: var(--cream) !important;
  box-shadow: 0 6px 18px rgba(201, 118, 90, 0.28) !important;
}
body.manishelf-page .mas-badge .mas-apple { color: inherit !important; }
body.manishelf-page .mas-large,
body.manishelf-page .mas-small { color: inherit !important; }

/* ---------- Converge section (MacBook stage) ---------- */

body.manishelf-page .converge-section {
  background: transparent !important;
}

/* Thumb strip — warm cards */
body.manishelf-page .thumb-item {
  border-radius: 10px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 6px 16px rgba(42, 31, 61, 0.15) !important;
}
body.manishelf-page .thumb-label {
  background: linear-gradient(transparent, rgba(42, 31, 61, 0.55)) !important;
  color: var(--cream) !important;
}
body.manishelf-page .scroll-chevron {
  color: var(--ember) !important;
  opacity: 0.7 !important;
}

/* Keep the original photo MacBook composite, sized to match the features section */
body.manishelf-page .macbook-wrapper {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* ---------- Feature showcase tiles — notebook paper cards ---------- */

body.manishelf-page .feature-showcase {
  background: transparent !important;
}
/* Sticky-note feature tiles — pinned at top, peeled/curling away at the bottom */
body.manishelf-page .showcase-tile {
  background: #fff3b8 !important;
  border: none !important;
  border-radius: 1px !important;
  padding: clamp(24px, 3vw, 40px) !important;
  /* Top edge kisses the wall (almost no shadow). Bottom edge curls outward
     so the cast shadow grows dramatically toward the bottom. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 2px -2px rgba(42, 31, 61, 0.12),
    0 22px 22px -14px rgba(42, 31, 61, 0.35),
    0 38px 32px -22px rgba(42, 31, 61, 0.30) !important;
  position: relative !important;
  transform: rotate(-1deg);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
/* Soft cast-shadow below the peeled bottom edge — widens downward */
body.manishelf-page .showcase-tile::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -22px;
  height: 30px;
  background: radial-gradient(ellipse at center top,
    rgba(42, 31, 61, 0.30) 0%,
    rgba(42, 31, 61, 0.16) 40%,
    transparent 75%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}
/* Adhesive strip at top — a slightly darker shade of the sticky's own color. */
body.manishelf-page .showcase-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8%;
  pointer-events: none;
  background: linear-gradient(to bottom, currentColor, transparent);
  opacity: 0;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(1)::before {
  background: linear-gradient(to bottom, #fcd76a, rgba(252, 215, 106, 0));
  opacity: 1;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(2)::before {
  background: linear-gradient(to bottom, #f7b294, rgba(247, 178, 148, 0));
  opacity: 1;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(3)::before {
  background: linear-gradient(to bottom, #c8b0e2, rgba(200, 176, 226, 0));
  opacity: 1;
}
body.manishelf-page .feature-showcase .showcase-tile:nth-child(4)::before {
  background: linear-gradient(to bottom, #a8d7b7, rgba(168, 215, 183, 0));
  opacity: 1;
}
body.manishelf-page .showcase-tile:hover {
  transform: rotate(-1deg) translateY(-3px);
}

/* Alternate colors — cozy pastel set */
body.manishelf-page .feature-showcase .showcase-tile:nth-child(1) { background: #ffe88a !important; transform: rotate(-1.2deg); }
body.manishelf-page .feature-showcase .showcase-tile:nth-child(1):hover { transform: rotate(-1.2deg) translateY(-3px); }

body.manishelf-page .feature-showcase .showcase-tile:nth-child(2) { background: #ffc8b0 !important; transform: rotate(1deg); }
body.manishelf-page .feature-showcase .showcase-tile:nth-child(2):hover { transform: rotate(1deg) translateY(-3px); }

body.manishelf-page .feature-showcase .showcase-tile:nth-child(3) { background: #d9c6ed !important; transform: rotate(-0.8deg); }
body.manishelf-page .feature-showcase .showcase-tile:nth-child(3):hover { transform: rotate(-0.8deg) translateY(-3px); }

body.manishelf-page .feature-showcase .showcase-tile:nth-child(4) { background: #c4e6d0 !important; transform: rotate(1.3deg); }
body.manishelf-page .feature-showcase .showcase-tile:nth-child(4):hover { transform: rotate(1.3deg) translateY(-3px); }

/* Feature headings — higher specificity to beat inline HTML's accent-bright rule */
body.manishelf-page .feature-showcase .showcase-text h3,
body.manishelf-page .feature-showcase .showcase-text h3 em {
  color: var(--ink) !important;
}
body.manishelf-page .showcase-text p {
  color: var(--ink) !important;
}
body.manishelf-page .converge-pin .converge-hint {
  color: var(--ink) !important;
  margin-top: 75px !important;
}
body.manishelf-page .converge-pin .converge-hint em {
  color: var(--ember) !important;
}

/* Hover video frames */
body.manishelf-page .hover-video-wrap {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 10px 28px rgba(42, 31, 61, 0.18) !important;
  border: 1px solid rgba(107, 74, 138, 0.12) !important;
}
body.manishelf-page .hover-play-hint {
  background: rgba(42, 31, 61, 0.35) !important;
  color: var(--cream) !important;
  backdrop-filter: blur(3px) !important;
}

/* ---------- Checklist / Why / FAQ sections ---------- */

body.manishelf-page .checklist-section,
body.manishelf-page .why-section,
body.manishelf-page .faq-section,
body.manishelf-page .support-section,
body.manishelf-page .features-section {
  background: transparent !important;
}

body.manishelf-page .checklist-section h3,
body.manishelf-page .faq-section h3,
body.manishelf-page .why-section h3,
body.manishelf-page .features-section h3,
body.manishelf-page .compare-section h3,
body.manishelf-page .support-section h3 {
  color: var(--ink) !important;
}

body.manishelf-page .checklist-item {
  color: var(--ink) !important;
  border-bottom: 1px dashed rgba(107, 74, 138, 0.14) !important;
}
body.manishelf-page .checklist-item .check {
  color: var(--ember) !important;
  background: transparent !important;
}
body.manishelf-page .why-label {
  color: var(--ember) !important;
}
body.manishelf-page .why-card,
body.manishelf-page .feature-card,
body.manishelf-page .faq-item {
  background: var(--cream-soft) !important;
  border: 1px solid rgba(107, 74, 138, 0.14) !important;
  border-radius: 6px !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 6px rgba(42, 31, 61, 0.06) !important;
}
body.manishelf-page .why-card h4,
body.manishelf-page .feature-card h4 {
  color: var(--ink) !important;
}
body.manishelf-page .why-card p,
body.manishelf-page .feature-card p,
body.manishelf-page .faq-item p,
body.manishelf-page .support-section .support-desc,
body.manishelf-page .support-section .support-link,
body.manishelf-page .contact-note {
  color: var(--ink) !important;
}

body.manishelf-page .faq-item summary {
  color: var(--ink) !important;
}
body.manishelf-page .faq-item summary::after {
  color: var(--ember) !important;
}

/* ---------- Compare strip ---------- */
body.manishelf-page .compare-label {
  color: var(--ember) !important;
}

/* ---------- Contact / Support links ---------- */
body.manishelf-page .support-section .support-link {
  background: transparent !important;
  border: 1.5px solid var(--ember) !important;
  color: var(--ember) !important;
}
body.manishelf-page .support-section .support-link:hover {
  background: var(--ember) !important;
  color: var(--cream) !important;
}
body.manishelf-page .contact-address {
  color: var(--ink) !important;
}

/* ---------- Footer ---------- */
body.manishelf-page .mani-footer,
body.manishelf-page footer {
  color: var(--ember) !important;
  border-top: 1px dashed rgba(107, 74, 138, 0.22) !important;
}
body.manishelf-page footer a,
body.manishelf-page .mani-footer a {
  color: var(--ember) !important;
}

/* ---------- Generic link tint ---------- */
body.manishelf-page a {
  color: var(--ember);
}
body.manishelf-page a:hover {
  color: var(--plum);
}

/* ============================================================
   DARK MODE — cozy purple night
   ============================================================ */

@media (prefers-color-scheme: dark) {
  body.manishelf-page {
    --cream:        #f3ecdd;
    --cream-soft:   #f7f0e2;
    --sheet:        #2a1f3d;
    --ink:          #f3ecdd;
    --ink-soft:     #d8c9ec;
    --ink-faint:    #9e8cb8;
    --plum:         #c9b8dd;
    --plum-dusk:    #a98ec9;
    --plum-haze:    #3a2a52;
    --ember:        #e89878;
    --ember-warm:   #c9765a;

    --bg-deep:        #1a1128;
    --surface:        #2a1f3d;
    --surface-raised: #342851;
    --border:         rgba(201, 184, 221, 0.14);
    --border-hover:   rgba(232, 152, 120, 0.45);
    --text:           var(--ink);
    --text-muted:     var(--ink-soft);
    --text-dim:       var(--ink-faint);
    --accent:         var(--plum);
    --accent-bright:  var(--plum-dusk);
    --accent-glow:    rgba(169, 142, 201, 0.22);
  }

  body.manishelf-page {
    background:
      radial-gradient(ellipse 500px 340px at 78% 14%, rgba(169, 142, 201, 0.18), transparent 70%),
      radial-gradient(ellipse 420px 280px at 14% 30%, rgba(232, 152, 120, 0.10), transparent 70%),
      radial-gradient(ellipse 500px 340px at 68% 58%, rgba(141, 111, 176, 0.14), transparent 70%),
      radial-gradient(ellipse 300px 220px at 20% 76%, rgba(232, 152, 120, 0.08), transparent 72%),
      radial-gradient(circle 160px at 52% 44%, rgba(169, 142, 201, 0.10), transparent 78%),
      radial-gradient(circle 130px at 88% 88%, rgba(169, 142, 201, 0.12), transparent 75%),
      linear-gradient(to bottom,
        #0f0718 0%,
        #15102a 8%,
        #1c1538 18%,
        #241c46 32%,
        #2a2150 50%,
        #2f2558 70%,
        #342a5e 100%) !important;
    color: var(--ink) !important;
  }

  /* Sticky notes in dark mode — deep jewel tones */
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(1) { background: #7d5f2a !important; }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(2) { background: #72442a !important; }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(3) { background: #4e3972 !important; }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(4) { background: #2f5a42 !important; }
  body.manishelf-page .showcase-tile {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.12) inset,
      0 2px 2px -2px rgba(0, 0, 0, 0.4),
      0 22px 22px -14px rgba(0, 0, 0, 0.6),
      0 38px 32px -22px rgba(0, 0, 0, 0.5) !important;
  }
  body.manishelf-page .showcase-tile::after {
    background: radial-gradient(ellipse at center top,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.28) 40%,
      transparent 75%) !important;
  }
  /* Dark-mode sticky top strips — darker shade of each jewel tone */
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(1)::before {
    background: linear-gradient(to bottom, #5d441c, rgba(93, 68, 28, 0)) !important;
  }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(2)::before {
    background: linear-gradient(to bottom, #55301d, rgba(85, 48, 29, 0)) !important;
  }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(3)::before {
    background: linear-gradient(to bottom, #372855, rgba(55, 40, 85, 0)) !important;
  }
  body.manishelf-page .feature-showcase .showcase-tile:nth-child(4)::before {
    background: linear-gradient(to bottom, #1f4130, rgba(31, 65, 48, 0)) !important;
  }
  /* On dark stickies, force text colors to dark plum so they read like ink on paper.
     Higher specificity so inline HTML and later .showcase-text p rule can't undo it. */
  body.manishelf-page .feature-showcase .showcase-text h3,
  body.manishelf-page .feature-showcase .showcase-text h3 em {
    color: #fef3d9 !important;
  }
  body.manishelf-page .feature-showcase .showcase-text p {
    color: #f0e4cf !important;
  }

  body.manishelf-page .why-card,
  body.manishelf-page .feature-card,
  body.manishelf-page .faq-item {
    background: #2a1f3d !important;
    border: 1px solid rgba(201, 184, 221, 0.12) !important;
    color: var(--ink) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  }

  /* Titles stay warm-light (plum-dusk is light purple on dark) — except sticky feature tiles which need dark text */
  body.manishelf-page .mani-title,
  body.manishelf-page .mani-title *,
  body.manishelf-page .checklist-section h3,
  body.manishelf-page .faq-section h3,
  body.manishelf-page .why-section h3,
  body.manishelf-page .features-section h3,
  body.manishelf-page .compare-section h3,
  body.manishelf-page .support-section h3,
  body.manishelf-page .converge-hint,
  body.manishelf-page .why-card h4,
  body.manishelf-page .feature-card h4,
  body.manishelf-page .contact-address {
    color: var(--plum-dusk) !important;
  }

  /* Subtitle / body copy — cream for readability */
  body.manishelf-page .mani-subtitle,
  body.manishelf-page .showcase-text p,
  body.manishelf-page .why-card p,
  body.manishelf-page .feature-card p,
  body.manishelf-page .faq-item p,
  body.manishelf-page .faq-item summary,
  body.manishelf-page .checklist-item,
  body.manishelf-page .mani-desc,
  body.manishelf-page .support-section .support-desc,
  body.manishelf-page .contact-note {
    color: var(--ink) !important;
  }

  body.manishelf-page .mani-subtitle em,
  body.manishelf-page .converge-hint em,
  body.manishelf-page .checklist-item .check,
  body.manishelf-page .why-label,
  body.manishelf-page .compare-label,
  body.manishelf-page .topbar-mark,
  body.manishelf-page .topbar-nav a:hover,
  body.manishelf-page .topbar-nav a::after,
  body.manishelf-page .faq-item summary::after,
  body.manishelf-page footer,
  body.manishelf-page .mani-footer,
  body.manishelf-page a {
    color: var(--ember) !important;
  }

  body.manishelf-page .topbar-mark .dot {
    background: var(--ember) !important;
    box-shadow: 0 0 10px rgba(232, 152, 120, 0.55) !important;
  }

  /* Accents in dark mode */
  body.manishelf-page .mani-title .m-1 {
    color: #fef3d9 !important;
  }
  body.manishelf-page .mani-subtitle em,
  body.manishelf-page .converge-pin .converge-hint em {
    color: var(--ember) !important;
  }

  /* Ember-outlined buttons on dark */
  body.manishelf-page .mas-badge,
  body.manishelf-page .support-section .support-link {
    background: transparent !important;
    border: 1.5px solid var(--ember) !important;
    color: var(--ember) !important;
  }
  body.manishelf-page .mas-badge:hover,
  body.manishelf-page .support-section .support-link:hover {
    background: var(--ember) !important;
    color: var(--bg-deep) !important;
  }

  /* Washi tapes on dark — slightly glowy */
  body.manishelf-page .showcase-tile::before {
    background: linear-gradient(180deg,
      rgba(169, 142, 201, 0.85),
      rgba(141, 111, 176, 0.72)) !important;
  }
  body.manishelf-page .showcase-tile.reverse::before {
    background: linear-gradient(180deg,
      rgba(232, 152, 120, 0.88),
      rgba(201, 118, 90, 0.72)) !important;
  }

  /* Dashed dividers */
  body.manishelf-page .mani-topbar { border-bottom-color: rgba(201, 184, 221, 0.20) !important; }
  body.manishelf-page .mani-footer,
  body.manishelf-page footer { border-top-color: rgba(201, 184, 221, 0.18) !important; }
  body.manishelf-page .checklist-item { border-bottom-color: rgba(201, 184, 221, 0.12) !important; }
}

/* ============================================================
   UNIFIED HEADER — matches the homepage style across all pages
   ============================================================ */

body.manishelf-page .site-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  margin-bottom: clamp(20px, 3vh, 36px) !important;
}
body.manishelf-page .site-top .mark {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: var(--ink) !important;
}
body.manishelf-page .site-top .mark-word {
  font-family: 'Caveat', 'Bradley Hand', cursive !important;
  font-size: 30px !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.manishelf-page .site-top .site-nav {
  font-family: 'Caveat', 'Bradley Hand', cursive !important;
  font-size: 26px !important;
  color: var(--ink-soft) !important;
  display: inline-flex !important;
  gap: 10px !important;
  align-items: baseline !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.manishelf-page .site-top .site-nav a {
  text-decoration: none !important;
  position: relative !important;
  padding: 0 2px !important;
  color: var(--ink-soft) !important;
  transition: color .2s !important;
  font-family: 'Caveat', 'Bradley Hand', cursive !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.manishelf-page .site-top .site-nav a::after {
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0; bottom: -2px !important;
  height: 2px !important;
  background: var(--ember) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1) !important;
  border-radius: 2px !important;
}
body.manishelf-page .site-top .site-nav a:hover { color: var(--ink) !important; }
body.manishelf-page .site-top .site-nav a:hover::after { transform: scaleX(1) !important; }
body.manishelf-page .site-top .site-nav a.is-active { color: var(--ember) !important; }
body.manishelf-page .site-top .site-nav a.is-active::after { transform: scaleX(1) !important; }
body.manishelf-page .site-top .nav-sep { color: var(--ink-faint) !important; }

@media (max-width: 560px) {
  body.manishelf-page .site-top {
    flex-wrap: wrap !important;
    gap: 10px !important;
    position: relative !important;
  }
  body.manishelf-page .site-top .mark-word { font-size: 26px !important; }
  body.manishelf-page .site-top .site-nav,
  body.manishelf-page .site-top .site-nav a { font-size: 22px !important; }

  /* iPhone header: pin the Contact link to the top-right, on the same
     row as the oitoana mark. The rest of the nav wraps below. */
  body.manishelf-page .site-top .site-nav a[href*="contact"] {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
  }
  /* Drop the nav separator that precedes the now-detached Contact link
     so the remaining items (journal · manishelf · help · ...) don't end
     with a dangling middot. */
  body.manishelf-page .site-top .site-nav .nav-sep:nth-last-child(2) {
    display: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  body.manishelf-page .site-top {
    border-bottom: 0 !important;
  }
  body.manishelf-page .site-top .mark-word { color: var(--ink) !important; }
  body.manishelf-page .site-top .site-nav,
  body.manishelf-page .site-top .site-nav a { color: var(--ink-soft) !important; }
  body.manishelf-page .site-top .site-nav a:hover { color: var(--ink) !important; }
  body.manishelf-page .site-top .site-nav a.is-active { color: var(--ember) !important; }
}

/* Mobile: swap oitoana mark to "home" link */
@media (max-width: 560px) {
  body.manishelf-page .site-top .mark-word { font-size: 0 !important; line-height: 1 !important; }
  body.manishelf-page .site-top .mark-word::before {
    content: 'home' !important;
    font-family: 'Caveat', 'Bradley Hand', cursive !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: var(--ink) !important;
    font-weight: 400 !important;
  }
  body.manishelf-page .desk-only { display: none !important; }
}