.back-link[data-astro-cid-mfsbv3p2] {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.15rem .5rem 1rem;
  border-radius: 999px;
  border: 1px solid #a8b89c4d;
  background: #a8b89c12;
  color: #cfe0c4;
  font-family: Lora, Georgia, serif;
  font-size: .82rem;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .25s, border-color .25s, color .25s;
}

.back-link[data-astro-cid-mfsbv3p2]:hover, .back-link[data-astro-cid-mfsbv3p2]:focus-visible {
  background: #a8b89c2e;
  border-color: #a8b89c9e;
  color: #f4ede0;
}

.back-arrow[data-astro-cid-mfsbv3p2] {
  font-size: 1rem;
  line-height: 1;
  transition: transform .25s;
}

.back-link[data-astro-cid-mfsbv3p2]:hover .back-arrow[data-astro-cid-mfsbv3p2], .back-link[data-astro-cid-mfsbv3p2]:focus-visible .back-arrow[data-astro-cid-mfsbv3p2] {
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .back-link[data-astro-cid-mfsbv3p2], .back-arrow[data-astro-cid-mfsbv3p2] {
    transition: none;
  }
}
.logo-edition[data-astro-cid-z4jru4n3] {
  display: block;
  font-family: Lora, Georgia, serif;
  font-style: italic;
  font-size: .72rem;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: #c9bda4;
  margin-bottom: .4rem;
  animation: 1.2s cubic-bezier(.16, 1, .3, 1) .25s both edition-in;
}

.logo-edition[data-astro-cid-z4jru4n3]:before, .logo-edition[data-astro-cid-z4jru4n3]:after {
  content: "—";
  font-style: normal;
  margin: 0 .65em;
  color: #c9bda48c;
}

@keyframes edition-in {
  from {
    opacity: 0;
    transform: translateY(10px);
    letter-spacing: .7em;
  }

  to {
    opacity: 1;
    transform: none;
    letter-spacing: .44em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-edition[data-astro-cid-z4jru4n3] {
    animation: none;
  }
}
.site-header[data-astro-cid-z4jru4n3].on-story {
  background: var(--bg, #1e2420);
  position: relative;
  z-index: 2;
}
/* === RESET & BASE === */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
        /* The Classic skin is DARK. It always has been — every page in it sets
           its own #1e2420 ground, and the poetry page (the reference the boss
           calls correct) pairs that ground with cream text.
           It used to say #f7f0dd / #2e2a22 here, and each page then re-declared
           the dark body in its own <style>. Whichever rule won depended on CSS
           order, which differs between the dev server and a production build —
           so the skin rendered DARK in dev and CREAM in production. That is why
           the same page could be unreadable in two opposite ways. Setting it
           once, here, makes the ground deterministic and lets the pages stop
           fighting it. */
        background-color: #1e2420;
        color: #e4ddc8;
        font-family: 'Lora', Georgia, serif;
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
    }


    /* Respect readers who prefer no motion */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
            scroll-behavior: auto !important;
        }
    }

    main { flex: 1; }

    /* The back row sits above whatever the page draws, aligned to the same
       column so it reads as the first thing on the page rather than floating. */
    .back-row {
        max-width: 1100px;
        margin: 0 auto;
        padding: 1.4rem 2rem 0;
    }
    @media (max-width: 640px) {
        .back-row { padding: 1rem 1.25rem 0; }
    }

        ::selection {
        background: #3d5a3c;
        color: #f4ede0;
    }

    /* === CENTERED HEADER === */
    .site-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2.5rem 2rem 0;
        max-width: 1100px;
        width: 100%;
        margin: 0 auto;
    }

    .logo-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        line-height: 1;
        transition: opacity 0.2s;
    }

    .logo-block:hover { opacity: 0.75; }

    .logo {
        font-family: 'Playfair Display', serif;
        font-size: clamp(2.2rem, 5vw, 3.2rem);
        font-weight: 900;
        letter-spacing: 6px;
        color: #ffffff;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
        padding-left: 6px; /* optical balance for letter-spacing */
    }

    .tagline {
        font-family: 'Lora', serif;
        font-style: italic;
        font-size: 0.95rem;
        line-height: 1.5;
        color: #f4ede0; /* Bright cream, same as the logo */
      /* ... keep the rest of the styles ... */
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
        letter-spacing: 0.5px;
        margin-top: 0.6rem;
    }

    /* EVERY Classic page paints its own dark ground — #1e2420, #232e26 or
       #3d5a3c. There is no cream page in this skin. So the wordmark and the
       tagline are cream EVERYWHERE, and the .logo / .tagline defaults above
       already do that.
       REMOVED 2026-10-17: this block used to force `.site-header .logo` to
       #2e2a22 and the tagline to #5f5a4d for every page that did not pass
       `darkGround`. It was written on 2026-10-12 against an assumed cream page
       that does not exist, and it put near-black ink on dark paper across
       seventeen pages — the site name, the tagline and the edition mark all
       vanished. Only index and collections ever passed `darkGround`, which is
       why the front page looked right and everything else did not.
       `darkGround` is now purely documentary: it still adds .on-dark, and
       .on-dark still restates the cream, but nothing depends on it any more. */

    /* Story pages carry their own light / sepia / dark theme, so the header
       follows whichever one is active rather than guessing. */
    .site-header.on-story .logo,
    .site-header.on-story .tagline { color: var(--text, #2e2a22); text-shadow: none; }

    .header-divider {
        width: 100%;
        max-width: 760px;
        height: 1px;
        background: rgba(255, 255, 255, 0.4);
        margin: 1.6rem 0 1.1rem;
    }

    nav {
        display: flex;
        gap: 2.4rem;
        padding-bottom: 1.6rem;
    }

    nav a {
        text-decoration: none;
        color: #ffffff;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
        font-size: 0.95rem;
        letter-spacing: 0.5px;
        transition: color 0.2s;
        position: relative;
    }

    nav a::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 1px;
        background: #ffffff;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
    }

    nav a:hover { color: rgba(255, 255, 255, 0.75); }
    nav a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    /* === FOOTER — cinematic centered brand + side word-rain === */
    .site-footer {
        background: #232e26;
        color: #c8d0bc;
        padding: 0;
        margin-top: 4rem;
        position: relative;
        overflow: hidden;
    }

    .footer-inner.footer-cinematic {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 320px;
        max-width: 100%;
        padding: 4rem 2rem 2rem;
    }

    .footer-center-stack {
        position: relative;
        z-index: 10;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }

    .footer-logo-stretched {
        font-family: 'Playfair Display', serif;
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        font-weight: 900;
        letter-spacing: 0.35em;
        color: #f4ede0;
        padding-left: 0.35em;
        line-height: 1;
    }

    .footer-tagline-centered {
        font-family: 'Lora', serif;
        font-style: italic;
        font-size: clamp(1rem, 2vw, 1.4rem);
        color: #a8b89c;
        letter-spacing: 0.08em;
        margin-bottom: 1.5rem;
    }

        .footer-legal {
        margin-top: 0.8rem; font-size: 0.75rem; color: #8a9478;
    }
    .footer-legal a { color: #a8b89c; text-decoration: none; }
    .footer-legal a:hover { text-decoration: underline; }

    .footer-nav-centered {
        display: flex;
        gap: 2.5rem;
    }

    .footer-nav-centered a {
        font-family: 'Playfair Display', serif;
        font-size: 1.1rem;
        color: #d8d0bc;
        text-decoration: none;
        letter-spacing: 0.05em;
        transition: color 0.3s, transform 0.3s;
    }

    .footer-nav-centered a:hover {
        color: #f4ede0;
        transform: translateY(-2px);
    }

    /* Word-rain columns — left and right of the footer */
    .footer-rain-left,
    .footer-rain-right {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 28%;
        overflow: hidden;
        pointer-events: none;
        z-index: 1;
    }

    .footer-rain-left { left: 0; }
    .footer-rain-right { right: 0; }

    .tw-drop {
        position: absolute;
        top: -30px;
        font-family: 'Lora', serif;
        font-style: italic;
        color: #e4ddc8;
        font-size: 0.95rem;
        white-space: nowrap;
        opacity: 0.9;
        animation: tw-rain-fall linear forwards;
    }

    .tw-drop.is-author {
        color: #a8b89c;
        font-style: normal;
        font-size: 0.72rem;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    @keyframes tw-rain-fall {
        0% { transform: translateY(0) rotate(var(--rot)); opacity: 0; }
        8% { opacity: 0.9; }
        92% { opacity: 0.9; }
        100% { transform: translateY(var(--fall)) rotate(var(--rot)); opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
        .tw-drop { animation: none; opacity: 0; }
    }

    @media (max-width: 768px) {
        .footer-rain-left, .footer-rain-right { width: 18%; }
        .footer-nav-centered { gap: 1.5rem; }
    }

    .footer-fineprint {
        text-align: center;
        font-style: italic;
        font-size: 0.82rem;
        color: #7d8568;
        padding: 2rem;
        border-top: 1px solid #2f3d32;
        letter-spacing: 0.3px;
        position: relative;
        z-index: 10;
        width: 100%;
        margin-top: 2rem;
    }

    /* === MOBILE === */
    @media (max-width: 640px) {
        .site-header { padding: 1.8rem 1.2rem 0; }
        .logo { letter-spacing: 4px; padding-left: 4px; }
        .tagline { font-size: 0.82rem; }
        nav { gap: 1.4rem; flex-wrap: wrap; justify-content: center; }
        nav a { font-size: 0.88rem; }
    }
    .auth-area {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1.2rem;
        margin-top: 0;
        font-size: 0.98rem;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .auth-area a {
       color: #f4ede0; /* Bright cream */
      /* ... keep the rest ... */
        text-decoration: none;
        transition: color 0.2s;
    }

    .auth-area a:hover { color: #a8b89c; }

    .auth-area .auth-signup {
        padding: 0.55rem 1.5rem;
        border: 2px solid rgba(244, 237, 224, 0.55);
        border-radius: 999px;
        transition: all 0.2s;
    }

    .auth-area .auth-signup:hover {
        background: #f4ede0;
        color: #1e2420;
    }

        .auth-hello  {  color :  #a8b89c ;  font-style :  italic ; }
    /* === Notification bell === */
    .notif-wrap  {  position :  relative ;  display :  inline-flex ; }
    .notif-bell  {
      background :  transparent ;  border :  none ;  cursor :  pointer ;
      font-size :  1.1rem ;  position :  relative ;  padding :  0.2rem ;
    }
    .notif-dot  {
      position :  absolute ;  top :  0 ;  right :  0 ;
      width :  8px ;  height :  8px ;  border-radius :  50% ;
      background :  #a85a32 ;  border :  1px solid #1e2420 ;
    }
    .notif-panel  {
      position :  absolute ;  top :  calc(100% + 0.6rem) ;  right :  0 ;
      width :  320px ;  max-height :  420px ;  overflow-y :  auto ;
      background :  #1e2420 ;  border :  1px solid rgba(168,184,156,0.2) ;
      border-radius :  8px ;  box-shadow :  0 10px 30px rgba(0,0,0,0.5) ;
      z-index :  1001 ;
    }
    .notif-head  {
      padding :  0.8rem 1rem ;  font-family :  'Playfair Display', serif ;
      font-size :  0.95rem ;  color :  #f4ede0 ;  border-bottom :  1px solid rgba(228,221,200,0.1) ;
    }
    .notif-item  {
      display :  flex ;  gap :  0.6rem ;  align-items :  flex-start ;
      padding :  0.7rem 1rem ;  text-decoration :  none ;  color :  inherit ;
      border-bottom :  1px solid rgba(228,221,200,0.05) ;
    }
    .notif-item.unread  {  background :  rgba(168,90,50,0.08) ; }
    .notif-item:hover  {  background :  rgba(244,237,224,0.05) ; }
    .notif-icon  {  font-size :  0.95rem ; }
    .notif-text  {  flex :  1 ;  font-size :  0.85rem ;  color :  #d8d0bc ;  line-height :  1.4 ; }
    .notif-time  {  font-size :  0.72rem ;  color :  #7d7560 ;  white-space :  nowrap ; }
    .notif-empty  {  padding :  1.5rem 1rem ;  text-align :  center ;  font-style :  italic ;  color :  #7d7560 ;  font-size :  0.85rem ; }
        /* Search Styles — consolidated (pill) */

        /* Header Layout */
        .header-nav-container {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 2rem;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem 2rem;
    }
    .nav-left, .nav-center, .nav-right {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }
    .nav-left { justify-self: start; }
    .nav-center { justify-self: center; }
    .nav-center a { white-space: nowrap; }
    .nav-right {
      justify-self: end;
      margin-left: 0;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    /* PHONE: PIC1 — Stories/About on same row, Log in/Sign up on next row centered together */
    @media (max-width: 640px) {
      /* The stacked header is three rows tall (search, nav, auth). Kept tight
         on purpose: every pixel here is taken from the hero below it. */
      .header-nav-container { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: 0.55rem 1rem; }
      .nav-left { order: 1; width: 100%; justify-content: center; }
      .nav-left .search-wrapper { width: 90vw; max-width: 280px; }
      .nav-center { order: 2; gap: 1.6rem; }
      .nav-right { order: 3; width: 100%; justify-content: center; }
      .nav-right .auth-area { justify-content: center; width: 100%; gap: 1rem; }
      .header-divider { margin: 0.6rem 0 0.3rem; }
      /* Logged in, the auth row carries SEVEN items: My Shelf, Feed, Digest,
         "Hello, name", the bell, and Log out. At full size on a phone they
         overflow the row and crush into each other, which is what "words
         merging into the background" looked like. Let it wrap, shrink the
         type, and tighten the gaps. */
      .nav-right .auth-area { flex-wrap: wrap; row-gap: 0.35rem; gap: 0.75rem; font-size: 0.82rem; letter-spacing: 0; }
      .nav-right .auth-area a { white-space: nowrap; }
      .auth-hello { font-size: 0.82rem; }
      .notif-panel { width: min(88vw, 300px); right: auto; left: 50%; transform: translateX(-50%); }
      /* The hero was 520px with the default 600px above it. On a 667px phone
         that plus the header is more than a full screen, so the page opened
         with nothing but header and empty hero. Sized to the real viewport
         instead, with a floor so it never collapses to a sliver on very
         short screens. */
      .hero {
        min-height: 0;
        height: 62vh;
        min-height: 340px;
        max-height: 520px;
        margin-top: 0.5rem;
      }
      .hero-overlay { padding: 1.4rem 1.2rem 2.6rem; }
      .scroll-cue { bottom: 0.6rem; }
      .hero-cta { margin-bottom: 0.4rem; }
    }
    /* Very short viewports (landscape phones, small Android) get a smaller
       floor again, so the hero never eats the whole screen. */
    @media (max-width: 640px) and (max-height: 620px) {
      .hero { height: 52vh; min-height: 240px; }
      .hero-overlay { padding: 1rem 1.2rem 2rem; }
    }
    /* --- TABLET (641px to 1024px) ---------------------------------------
       This band was the hole. Phones were handled at 640px and desktop at
       1024px, and everything between was left to fend for itself. An iPad
       portrait is 768px, so it fell straight into the gap with no rules.

       Measured: signed in, the header carries My Shelf, Feed, Digest,
       "Hello, name", the bell and Log out, totalling about 478px, plus the
       centre nav at 127px, the 210px search box and padding - roughly 867px
       of content in a 768px viewport. `.nav-right` is `flex-wrap: nowrap`, so
       it could not reflow and simply overflowed, which is what "all over the
       place" looked like.

       The fix is not to shrink everything; it is to let the header take two
       rows on tablets, which is what the device actually has room for. */
    @media (min-width: 641px) and (max-width: 1024px) {
      .header-nav-container {
        flex-wrap: wrap;
        row-gap: 0.55rem;
        gap: 0.8rem;
        padding: 0.7rem 1rem;
        justify-content: space-between;
      }
      /* Search gets a sensible fixed width instead of the desktop 210px, and
         is allowed to shrink rather than push the row wider. */
      .search-wrapper { width: 180px; min-width: 0; flex: 0 1 180px; }
      .nav-center { gap: 1.2rem; order: 3; }
      /* The auth row is the part that overflows. Let it wrap and drop its type
         a notch; seven items at 0.98rem with 1.2rem gaps is desktop sizing. */
      .nav-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.3rem; gap: 0.8rem; order: 4; }
      .nav-right .auth-area {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.85rem;
        font-size: 0.86rem;
        letter-spacing: 0;
      }
      .auth-hello { font-size: 0.86rem; }
      /* Keep the bell panel on screen: it is anchored right and can otherwise
         hang off the edge when the header wraps. */
      .notif-panel { max-width: min(88vw, 320px); }
    }

    /* Tablet portrait, the tightest case: iPad Mini at 744px and iPad at 768px.
       Below ~820px the nav has to move to its own line rather than fight the
       search box for the first row. */
    @media (min-width: 641px) and (max-width: 820px) {
      .nav-left { flex: 1 1 auto; min-width: 0; }
      .nav-center { width: 100%; justify-content: center; order: 2; }
      .nav-right { width: 100%; justify-content: center; order: 3; }
      .nav-right .auth-area { justify-content: center; font-size: 0.84rem; gap: 0.7rem; }
    }

    .header-nav-container { max-width: 1320px; }
    .nav-right { flex-wrap: nowrap; }
    .nav-right a, .nav-right .notif-wrap { white-space: nowrap; }
    .nav-right .auth-area { gap: 1.2rem; font-size: 0.98rem; }
    .nav-center a {
      color: #f4ede0; /* Bright cream */
      /* ... keep the rest ... */
      text-decoration: none;
      font-size: 0.95rem;
      transition: color 0.2s;
    }
    .nav-center a:hover { color: #a8b89c; }

    /* YouTube-Style Search */
    .search-wrapper {
      display: flex;
      align-items: center;
      background: rgba(244, 237, 224, 0.05);
      border: 1px solid rgba(228, 221, 200, 0.2);
      border-radius: 20px;
      padding: 0.25rem 0.5rem;
      width: 250px;
      transition: border-color 0.2s;
    }
    .search-wrapper:focus-within {
      border-color: #a8b89c;
    }
    #searchInput {
      flex: 1;
      background: transparent;
      border: none;
      color: #f4ede0; /* Bright text when typing */
      /* ... keep the rest ... */
      font-family: inherit;
      font-size: 0.9rem;
      padding: 0.25rem 0.5rem;
      outline: none;
    }

    /* merged — see pill style below */

    /* Dropdown Results (Right below the bar) */
    .nav-left { position: relative; }
    .search-dropdown {
      position: absolute;
      top: calc(100% + 0.5rem); /* Drops right below the search bar */
      left: 0;
      width: 350px;
      background: #1e2420;
      border: 1px solid rgba(168, 184, 156, 0.2);
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      z-index: 1000;
      max-height: 400px;
      overflow-y: auto;
      padding: 0.5rem 0;
    }
    .search-result-item {
      display: block;
      padding: 0.75rem 1rem;
      text-decoration: none;
      color: inherit;
      border-bottom: 1px solid rgba(228, 221, 200, 0.05);
    }
    .search-result-item:hover { background: rgba(244, 237, 224, 0.05); }
    .search-result-item h4 {
      font-family: 'Playfair Display', serif;
      font-size: 1rem;
      color: #f4ede0;
      margin: 0 0 0.2rem 0;
    }
    .search-result-item p {
      font-size: 0.8rem;
      color: #a8b89c;
      margin: 0;
    }
        .search-no-results  {
      color :  #a8b89c ;
      font-style :  italic ;
      padding :  1rem ;
      text-align :  center ;
    }
    .search-writer-item  h4  {  color :  #a8b89c ;  }
    .search-writer-item  p   {  color :  #8a9478 ;  }
    /* --- Search pill = Sign up pill --- */
.search-wrapper {
  background: #3d5a3c;
  border: 1px solid #c8b890;
  border-radius: 999px;
}
#searchInput::placeholder {
  color: #e4ddc8;
}
.nav-search-btn {
  background: transparent;
  border: none;
}
.search-emoji {
  filter: grayscale(1) brightness(2);
}

    /* Auth cluster is JS-injected — global styles (scoped never applied) */
    .notif-bell { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid rgba(228,221,200,0.35); border-radius: 50%; background: transparent; cursor: pointer; color: #e4ddc8; position: relative; transition: border-color 0.2s, color 0.2s; }
    .notif-bell:hover { border-color: #a8b89c; color: #f4ede0; }
    .notif-bell svg { width: 16px; height: 16px; display: block; }