/* ============================================
   UnsaidPages — Dark Warm Theme
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg-primary: #07131d;
  --bg-secondary: #0a1a25;
  --bg-card: #0c202b;
  --bg-card-hover: #102b38;
  --bg-bubble-her: rgba(244, 160, 181, 0.1);
  --bg-bubble-him: rgba(88, 166, 255, 0.08);
  --border: #173342;
  --border-light: #244958;
  --text-primary: #e5f7fb;
  --text-secondary: #9ab7c4;
  --text-muted: #668493;
  --accent: #36e4e8;
  --accent-hover: #9afbff;
  --accent-subtle: rgba(54, 228, 232, 0.09);
  --accent-glow: rgba(54, 228, 232, 0.18);
  --dialogue-her: #8bdde8;
  --dialogue-her-dark: rgba(139, 221, 232, 0.12);
  --dialogue-him: #36e4e8;
  --dialogue-him-dark: rgba(54, 228, 232, 0.1);
  --highlight: #9afbff;
  --divider: linear-gradient(90deg, transparent, var(--border-light) 20%, var(--border-light) 80%, transparent);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.4);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --story-font-size: 15px;
}

/* ============================================
   LIGHT THEME
   ============================================ */
[data-theme="light"] {
  --bg-primary: #f2fbfc;
  --bg-secondary: #e5f4f6;
  --bg-card: #ffffff;
  --bg-card-hover: #f6feff;
  --bg-bubble-her: rgba(244, 160, 181, 0.12);
  --bg-bubble-him: rgba(88, 166, 255, 0.1);
  --border: #d0e5e9;
  --border-light: #c2dce1;
  --text-primary: #102630;
  --text-secondary: #496672;
  --text-muted: #708b95;
  --accent: #087f91;
  --accent-hover: #075d6b;
  --accent-subtle: rgba(8, 127, 145, 0.08);
  --accent-glow: rgba(8, 127, 145, 0.13);
  --dialogue-her: #087f91;
  --dialogue-her-dark: rgba(8, 127, 145, 0.1);
  --dialogue-him: #087f91;
  --dialogue-him-dark: rgba(8, 127, 145, 0.08);
  --highlight: #087f91;
  --divider: linear-gradient(90deg, transparent, var(--border-light) 20%, var(--border-light) 80%, transparent);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.1);
}

[data-theme="light"] body::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(196, 146, 46, 0.04) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(196, 114, 138, 0.03) 0%, transparent 50%);
}

[data-theme="light"] .site-header {
  background: rgba(245, 243, 239, 0.9);
}

[data-theme="light"] .chapter-nav {
  background: rgba(245, 243, 239, 0.9);
}

[data-theme="light"] .story-divider.major::after {
  background: var(--bg-primary);
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 15px;
  min-height: 100vh;
}

/* Subtle background texture */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(232, 176, 89, 0.03) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(244, 160, 181, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Layout ---- */
.site-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================
   STICKY HEADER + DROPDOWN
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 40px;
  height: 60px;
}

.header-brand {
  position: relative;
  display: inline-block;
}

.header-brand .brand-link {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color 0.2s;
  cursor: pointer;
  user-select: none;
  padding: 8px 16px;
  display: block;
}

.header-brand .brand-link:hover {
  color: var(--accent-hover);
}

/* Dropdown */
.header-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  min-width: 180px;
  padding: 8px 0;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  transform: translateX(-50%) translateY(10px);
}

/* Show on hover OR when .open class is added (click) */
.header-brand:hover .header-dropdown,
.header-brand .header-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
}

.header-dropdown a {
  display: block;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
}

.header-dropdown a:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

.header-dropdown a.active-page {
  color: var(--accent);
}

/* ---- Content Area ---- */
.content-area {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 40px 80px;
  flex: 1;
}

/* ============================================
   HOME PAGE — Landing
   ============================================ */
.home-header {
  text-align: center;
  margin-bottom: 60px;
}

.home-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3em;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.home-header h1 span {
  color: var(--accent);
}

.home-header p {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Category Cards on Home */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.category-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--dialogue-her));
  opacity: 0;
  transition: opacity 0.3s;
}

.category-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.category-card:hover::before {
  opacity: 1;
}

.category-card .cat-icon {
  font-size: 2.5em;
  margin-bottom: 16px;
  display: block;
}

.category-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6em;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.category-card .cat-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.category-card .cat-count {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 14px;
  border-radius: 20px;
  background: var(--accent-subtle);
  border: 1px solid rgba(232, 176, 89, 0.15);
}

.category-card.coming-soon-card {
  opacity: 0.6;
}

.category-card.coming-soon-card:hover {
  transform: none;
  box-shadow: none;
}

/* ============================================
   STORIES PAGE — Nav Tabs & Story Cards
   ============================================ */

.nav-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.nav-tab {
  padding: 8px 20px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}

.nav-tab:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
  border-color: var(--border-light);
}

.nav-tab.active {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: rgba(232, 176, 89, 0.3);
  box-shadow: 0 0 12px rgba(232, 176, 89, 0.08);
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.story-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  padding: 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.story-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--dialogue-her));
  opacity: 0;
  transition: opacity 0.3s;
}

.story-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
  border-left-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.story-card:hover::before {
  opacity: 1;
}

.story-card .card-genre {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.story-card .tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid rgba(232, 176, 89, 0.15);
}

.story-card .tag.mood {
  background: var(--dialogue-her-dark);
  color: var(--dialogue-her);
  border-color: rgba(244, 160, 181, 0.15);
}

.story-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3em;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.3;
}

.story-card .card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 4px;
}

.story-card .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.story-card .card-lang {
  font-size: 12px;
  color: var(--text-muted);
}

.story-card .read-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

.story-card:hover .read-link {
  gap: 8px;
}

/* Coming soon card */
.story-card.coming-soon {
  opacity: 0.5;
  pointer-events: none;
}

.story-card.coming-soon h3 {
  color: var(--text-muted);
}

/* ============================================
   STORY PAGE
   ============================================ */

/* Chapter Navigation */
.chapter-nav {
  position: sticky;
  top: 60px;
  z-index: 90;
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 12px 40px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chapter-nav::-webkit-scrollbar {
  display: none;
}

.chapter-pill {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: all 0.2s;
  white-space: nowrap;
}

.chapter-pill:hover {
  color: var(--text-primary);
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}

.chapter-pill.active {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: rgba(232, 176, 89, 0.25);
}

/* Story Header */
.story-header {
  text-align: center;
  padding: 60px 40px 40px;
  max-width: 700px;
  margin: 0 auto;
}

.story-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.8em;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.2;
}

.story-meta {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.story-meta .tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid rgba(232, 176, 89, 0.15);
}

.story-tagline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Story Content */
.story-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 40px 80px;
  font-size: var(--story-font-size);
}

/* Chapter headings */
.chapter-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.8em;
  font-weight: 600;
  color: var(--accent);
  margin: 3em 0 1.5em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.chapter-heading:first-child {
  margin-top: 0;
}

/* Narrative text */
.story-content p {
  margin-bottom: 1em;
  color: var(--text-secondary);
  font-size: inherit;
  line-height: 1.8;
}

.story-content p strong {
  color: var(--text-primary);
  font-weight: 600;
}

.story-content p em {
  color: var(--text-muted);
  font-style: italic;
}

/* Highlighted / emotional moments */
.moment {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 16px;
}

.thought {
  font-style: italic;
  color: var(--highlight);
  opacity: 0.85;
}

.emphasis {
  font-family: 'Playfair Display', serif;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  display: block;
  margin: 1.5em 0;
  line-height: 1.5;
}

.emphasis.golden {
  color: var(--accent);
}

/* Section dividers */
.story-divider {
  border: none;
  height: 1px;
  background: var(--divider);
  margin: 2.5em 0;
}

.story-divider.major {
  margin: 3.5em auto;
  width: 60%;
  height: 0;
  border: none;
  background: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-divider.major::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--divider);
}

.story-divider.major::after {
  content: '***';
  position: relative;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 8px;
  background: var(--bg-primary);
  padding: 0 16px;
  z-index: 1;
}

/* ---- Chat Bubbles ---- */
/* Colors, alignment, and border-radius are injected dynamically from character JSON */
.dialogue {
  margin: 1.5em 0;
  display: flex;
  flex-direction: column;
}

.dialogue .speaker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
  padding: 0 14px;
}

.bubble {
  max-width: 75%;
  padding: 14px 20px;
  font-size: inherit;
  line-height: 1.6;
  position: relative;
  animation: bubbleFadeIn 0.3s ease;
}

@keyframes bubbleFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.dialogue .action {
  font-size: 12px;
  font-style: italic;
  color: #777;
  margin-top: 4px;
  max-width: 75%;
  padding-left: 4px;
}
[data-theme="light"] .dialogue .action {
  color: #888;
}

/* ---- Chat PFP + Bubble Row ---- */
.dialogue .msg-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dialogue .pfp {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  flex-grow: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  overflow: hidden;
  margin-top: 2px;
}

.dialogue .pfp:hover {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(232, 176, 89, 0.2);
}

.dialogue .pfp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Unknown character PFP */
.dialogue .pfp.unknown {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-color: var(--border);
}

.dialogue .pfp.unknown::after {
  content: '?';
  font-size: 16px;
}

/* ---- Character Popup Modal ---- */
.char-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.char-popup-overlay.active {
  display: flex;
}

.char-popup {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.char-popup .popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}

.char-popup .popup-close:hover {
  color: var(--text-primary);
}

.char-popup .popup-pfp {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
}

.char-popup .popup-pfp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.char-popup .popup-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.5em;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.char-popup .popup-role {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.char-popup .popup-details {
  text-align: left;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.char-popup .popup-detail {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}

.char-popup .popup-detail .detail-label {
  color: var(--text-muted);
  font-weight: 500;
}

.char-popup .popup-detail .detail-value {
  color: var(--text-primary);
  font-weight: 500;
}

.char-popup .popup-bio {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: left;
}

/* Inline reactions / short lines below bubbles */
.reaction {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0.5em 0 0;
  font-style: italic;
}

/* Lists in story */
.story-content ul {
  list-style: none;
  padding-left: 0;
  margin: 1em 0;
}

.story-content ul li {
  padding-left: 20px;
  position: relative;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.story-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}

/* Story ending */
.story-end {
  text-align: center;
  margin: 4em 0 2em;
  padding: 40px;
}

.story-end .end-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6em;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}

.story-end .end-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- Season Navigation ---- */
.season-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 3em 0 1em;
  padding-top: 2em;
  border-top: 1px solid var(--border);
}

.season-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-lg);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
}

.season-btn.next {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: rgba(232, 176, 89, 0.25);
}

.season-btn.next:hover {
  background: rgba(232, 176, 89, 0.15);
  border-color: var(--accent);
  transform: translateX(4px);
  box-shadow: 0 0 20px rgba(232, 176, 89, 0.1);
  text-decoration: none;
}

.season-btn.prev {
  background: var(--bg-card);
  color: var(--text-secondary);
}

.season-btn.prev:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
  transform: translateX(-4px);
  text-decoration: none;
}

/* ---- Footer ---- */
.site-footer {
  text-align: center;
  padding: 40px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  margin-top: auto;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 250;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
  color: var(--text-secondary);
}

.theme-toggle:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.1);
}

/* ============================================
   STORY CONTROLS BAR (Font Size)
   ============================================ */
.story-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 40px;
  background: rgba(10, 14, 20, 0.6);
  border-bottom: 1px solid var(--border);
}

[data-theme="light"] .story-controls {
  background: rgba(245, 243, 239, 0.6);
}

.font-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

.font-control span {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.font-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
}

.font-btn:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================
   TRANSLATE BUTTON & MODAL
   ============================================ */
.translate-btn {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
}
.translate-btn:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

.translate-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.translate-modal.open {
  display: flex;
}
.translate-modal-content {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 30px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.translate-modal-content h3 {
  color: var(--text-primary);
  margin-bottom: 20px;
  font-size: 18px;
}
.lang-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.lang-option {
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-main);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
}
.lang-option:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}
.lang-option.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 700;
}
.translate-close {
  padding: 8px 20px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}
.translate-close:hover {
  color: var(--text-primary);
}

/* ============================================
   SHARE BUTTONS
   ============================================ */
.share-section {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 40px 20px;
  text-align: center;
  border-top: 1px solid var(--border);
}

.share-section p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
}

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.share-btn.native-share:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
  color: #6366f1;
}

.share-btn.copy:hover {
  background: var(--accent-subtle);
  border-color: rgba(232, 176, 89, 0.3);
  color: var(--accent);
}

.share-btn .copied-msg {
  color: #48c78e;
  font-weight: 600;
}

/* ============================================
   BOOKMARK / CONTINUE READING
   ============================================ */
.bookmark-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-lg), 0 0 20px rgba(232, 176, 89, 0.15);
  animation: slideUp 0.4s ease;
  max-width: 90%;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.bookmark-banner span {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.bookmark-banner strong {
  color: var(--accent);
}

.bookmark-btn {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}

.bookmark-btn.continue {
  background: var(--accent);
  color: #0a0e14;
}

.bookmark-btn.continue:hover {
  background: var(--accent-hover);
}

.bookmark-btn.dismiss {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.bookmark-btn.dismiss:hover {
  color: var(--text-primary);
  border-color: var(--border-light);
}

/* ============================================
   CHAPTER PROGRESS DOTS
   ============================================ */
.progress-dots {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-light);
  border: 2px solid var(--border);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.progress-dot.read {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 6px rgba(232, 176, 89, 0.3);
}

.progress-dot.current {
  background: var(--accent);
  border-color: var(--accent-hover);
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(232, 176, 89, 0.4);
}

.progress-dot:hover::after {
  content: attr(data-label);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

/* ============================================
   KEYBOARD NAV HINT
   ============================================ */
.keyboard-hint {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.keyboard-hint:hover {
  opacity: 1;
}

.keyboard-hint kbd {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
}

/* ============================================
   SEARCH (Client-side)
   ============================================ */
.search-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.search-overlay.active {
  display: flex;
}

.search-box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 560px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.search-input-wrap .search-icon {
  font-size: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}

.search-close:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.search-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px 0;
}

.search-result {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover {
  background: var(--accent-subtle);
}

.search-result .result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.search-result .result-match {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.search-result .result-match mark {
  background: rgba(232, 176, 89, 0.25);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 2px;
}

.search-no-result {
  padding: 24px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.search-hint {
  padding: 12px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* Search trigger button (on stories page) */
.search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 24px;
  width: 100%;
  max-width: 400px;
}

.search-trigger:hover {
  border-color: var(--accent);
  color: var(--text-secondary);
}

.search-trigger kbd {
  margin-left: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}

/* ============================================
   COPY QUOTE
   ============================================ */
.quote-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
  z-index: 5;
}

.bubble {
  position: relative;
}

.bubble:hover .quote-copy-btn {
  opacity: 1;
}

.quote-copy-btn:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

.quote-copy-btn.copied {
  color: #48c78e;
  border-color: rgba(72, 199, 142, 0.3);
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .site-header {
    padding: 14px 20px;
    height: 52px;
  }

  .header-brand .brand-link {
    font-size: 18px;
    padding: 6px 12px;
  }

  .content-area {
    padding: 40px 20px 60px;
  }

  .home-header h1 {
    font-size: 2.2em;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stories-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .story-card {
    padding: 24px 20px;
  }

  .theme-toggle {
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .story-controls {
    padding: 6px 16px;
  }

  .progress-dots {
    display: none;
  }

  .keyboard-hint {
    display: none;
  }

  .bookmark-banner {
    bottom: 12px;
    padding: 10px 14px;
    gap: 8px;
  }

  .bookmark-banner span {
    font-size: 12px;
  }

  .share-section {
    padding: 30px 20px 16px;
  }

  .chapter-nav {
    padding: 10px 16px;
    gap: 6px;
    top: 52px;
  }

  .chapter-pill {
    padding: 5px 12px;
    font-size: 12px;
  }

  .story-header {
    padding: 40px 20px 24px;
  }

  .story-title {
    font-size: 2em;
  }

  .story-content {
    padding: 16px 20px 60px;
  }

  .bubble {
    max-width: 88%;
  }

  .chapter-heading {
    font-size: 1.4em;
  }
}

@media (max-width: 480px) {
  .home-header h1 {
    font-size: 1.8em;
  }

  .story-title {
    font-size: 1.7em;
  }

  .bubble {
    max-width: 92%;
    padding: 12px 16px;
    font-size: 14px;
  }

  .story-nav {
    flex-direction: column;
    gap: 12px;
  }

  .story-nav-link {
    padding: 16px 20px;
  }
}

/* ============================================
   READING PROGRESS BAR
   ============================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent);
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ============================================
   PREV/NEXT STORY NAVIGATION
   ============================================ */
.story-nav {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  max-width: 680px;
  margin: 48px auto 32px;
  padding: 0 20px;
}

.story-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 0;
}

.story-nav-link:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.story-nav-link.next {
  text-align: right;
}

.nav-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05em;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   CARD FADE-IN ANIMATION
   ============================================ */
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.story-card {
  animation: cardFadeIn 0.4s ease both;
}

.story-card:nth-child(1) { animation-delay: 0s; }
.story-card:nth-child(2) { animation-delay: 0.08s; }
.story-card:nth-child(3) { animation-delay: 0.16s; }
.story-card:nth-child(4) { animation-delay: 0.24s; }
.story-card:nth-child(5) { animation-delay: 0.32s; }
.story-card:nth-child(6) { animation-delay: 0.4s; }
.story-card:nth-child(7) { animation-delay: 0.48s; }
.story-card:nth-child(8) { animation-delay: 0.56s; }
.story-card:nth-child(9) { animation-delay: 0.64s; }
.story-card:nth-child(10) { animation-delay: 0.72s; }

/* ============================================
   HOMEPAGE HERO FADE-IN
   ============================================ */
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-header {
  animation: heroFadeIn 0.6s ease both;
}

/* ============================================
   READ TIME TAG
   ============================================ */
.read-time {
  background: rgba(232, 176, 89, 0.1);
  color: var(--accent);
  border-color: rgba(232, 176, 89, 0.15);
}

.lang-tag {
  background: rgba(109, 179, 242, 0.1);
  color: #6db3f2;
  border-color: rgba(109, 179, 242, 0.15);
}

.lang-tag.translated {
  background: rgba(72, 199, 142, 0.1);
  color: #48c78e;
  border-color: rgba(72, 199, 142, 0.15);
}

/* ============================================
   MOOD EMOJI
   ============================================ */
.mood-emoji {
  font-size: 0.75em;
  margin-right: 4px;
}

/* ============================================
   STORY COUNT BADGE
   ============================================ */
.story-count {
  font-family: 'Inter', sans-serif;
  font-size: 0.35em;
  font-weight: 600;
  background: var(--accent-subtle);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 8px;
  letter-spacing: 0.5px;
}

/* ============================================
   DESCRIPTION TOGGLE (spoiler-free)
   ============================================ */
.story-card .card-desc {
  max-height: 3.3em;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.story-card .card-desc.expanded {
  max-height: 200px;
}

.desc-toggle {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 12px;
  font-family: 'Inter', sans-serif;
  transition: color 0.2s;
}

.desc-toggle:hover {
  color: var(--accent-hover);
}

/* ============================================
   RECENTLY READ (homepage)
   ============================================ */
.recently-read-section {
  margin-top: 48px;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6em;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.recently-read-list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.recent-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  min-width: 200px;
  transition: all 0.2s ease;
}

.recent-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.recent-title {
  font-family: 'Playfair Display', serif;
  font-size: 1em;
  color: var(--accent);
  white-space: nowrap;
}

.recent-time {
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================
   SCROLL REVEAL ANIMATIONS — Word-by-Word Flow
   ============================================ */

/* Elements start hidden */
.story-content p,
.story-content .dialogue,
.story-content .moment,
.story-content .emphasis,
.story-content .thought,
.story-content hr {
  opacity: 0;
  transform: translateY(8px);
}

/* Parent snaps visible on reveal — words handle their own cascade */
.story-content p.revealed,
.story-content .dialogue.revealed,
.story-content .moment.revealed,
.story-content .emphasis.revealed,
.story-content .thought.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* hr has no words — smooth fade on its own */
.story-content hr {
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.story-content hr.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Word spans — hidden by default, cascade in on parent .revealed */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  transition-delay: calc(var(--i, 0) * 25ms);
}

.revealed .word {
  opacity: 1;
  transform: translateY(0);
}

/* Chapter headings — scale animation, no word split */
.chapter-heading {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.chapter-heading.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Story end block */
.story-end {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.story-end.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Search trigger polish */
.search-trigger {
  transition: all 0.2s ease;
}

.search-trigger:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}


/* ============================================
   TIDEWRITTEN — ABYSSAL GLOW DESIGN SYSTEM
   ============================================ */
:root {
  --bg-primary:#07131d;--bg-secondary:#0a1a25;--bg-card:#0c202b;--bg-card-hover:#102b38;--bg-bubble-her:rgba(139,221,232,.09);--bg-bubble-him:rgba(54,228,232,.07);
  --border:#173342;--border-light:#244958;--text-primary:#e5f7fb;--text-secondary:#9ab7c4;--text-muted:#668493;
  --accent:#36e4e8;--accent-hover:#9afbff;--accent-subtle:rgba(54,228,232,.09);--accent-glow:rgba(54,228,232,.18);
  --dialogue-her:#8bdde8;--dialogue-her-dark:rgba(139,221,232,.12);--dialogue-him:#36e4e8;--dialogue-him-dark:rgba(54,228,232,.1);--highlight:#9afbff;
}
[data-theme="light"]{
  --bg-primary:#f2fbfc;--bg-secondary:#e5f4f6;--bg-card:#fff;--bg-card-hover:#f6feff;--bg-bubble-her:rgba(8,127,145,.08);--bg-bubble-him:rgba(8,127,145,.06);
  --border:#d0e5e9;--border-light:#c2dce1;--text-primary:#102630;--text-secondary:#496672;--text-muted:#708b95;
  --accent:#087f91;--accent-hover:#075d6b;--accent-subtle:rgba(8,127,145,.08);--accent-glow:rgba(8,127,145,.13);
  --dialogue-her:#087f91;--dialogue-her-dark:rgba(8,127,145,.1);--dialogue-him:#087f91;--dialogue-him-dark:rgba(8,127,145,.08);--highlight:#087f91;
}
body{font-family:'DM Sans',Inter,-apple-system,BlinkMacSystemFont,sans-serif;background-image:radial-gradient(ellipse at 12% -10%,rgba(54,228,232,.075),transparent 44%),radial-gradient(ellipse at 90% 35%,rgba(22,114,151,.08),transparent 38%);background-attachment:fixed}
h1,h2,h3,.brand-word,.story-title{font-family:'Manrope','Inter',sans-serif}
a,button{ -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.site-header{height:auto;min-height:76px;padding:14px clamp(18px,5vw,64px);justify-content:space-between;gap:24px;background:rgba(7,19,29,.82);border-bottom:1px solid rgba(54,228,232,.12)}
[data-theme="light"] .site-header{background:rgba(242,251,252,.88)}
.brand-link{display:inline-flex;align-items:center;gap:10px;color:var(--text-primary);text-decoration:none;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:35px;height:35px;border:1px solid rgba(54,228,232,.38);border-radius:12px;color:var(--accent);font-size:25px;line-height:1;background:linear-gradient(145deg,rgba(54,228,232,.12),rgba(54,228,232,.015));box-shadow:0 0 22px rgba(54,228,232,.08)}
.brand-word{font-size:19px;font-weight:800;letter-spacing:-.8px}
.site-nav{display:flex;align-items:center;gap:clamp(14px,3vw,34px)}
.site-nav a{position:relative;color:var(--text-secondary);font-size:13px;font-weight:600;text-decoration:none;transition:color .2s}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--accent)}
.site-nav a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.theme-toggle{position:fixed;right:22px;bottom:22px;z-index:250;width:44px;height:44px;border:1px solid var(--border-light);border-radius:50%;background:var(--bg-card);color:var(--accent);box-shadow:0 8px 28px rgba(0,0,0,.22),0 0 18px var(--accent-glow);cursor:pointer;display:grid;place-items:center}
.theme-toggle-icon{font-size:20px}
.content-area{max-width:1100px;padding:0 clamp(18px,5vw,56px) 76px}
.tide-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:24px;min-height:570px;padding:68px 0 56px;border-bottom:1px solid var(--border);overflow:hidden}
.hero-copy{position:relative;z-index:2;max-width:610px}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase}
.eyebrow-dot,.caption-pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);flex:none}
.tide-hero h1{margin:26px 0 22px;font-size:clamp(42px,6.1vw,76px);font-weight:700;letter-spacing:-.065em;line-height:1.04;color:var(--text-primary)}
.hero-accent{color:var(--accent);text-shadow:0 0 36px rgba(54,228,232,.2)}
.hero-description{max-width:460px;color:var(--text-secondary);font-size:16px;line-height:1.85}
.hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:30px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:48px;padding:0 20px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s}
.button:hover{transform:translateY(-2px)}
.button-primary{color:#042027;background:var(--accent);box-shadow:0 5px 25px rgba(54,228,232,.16)}
.button-primary:hover{background:var(--accent-hover);box-shadow:0 7px 32px rgba(54,228,232,.25)}
.text-link{color:var(--text-secondary);font-size:13px;text-decoration:none}.text-link:hover{color:var(--accent)}
.hero-signature{display:flex;align-items:center;gap:10px;margin-top:44px;color:var(--text-muted);font-size:11px}
.signature-line{width:28px;height:1px;background:var(--accent);opacity:.7}
.hero-atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;display:block;border-radius:50%;filter:blur(2px);opacity:.55}
.orb-one{width:240px;height:240px;right:12%;top:14%;background:radial-gradient(circle at 35% 30%,rgba(154,251,255,.18),rgba(54,228,232,.045) 44%,transparent 72%)}
.orb-two{width:180px;height:180px;left:30%;bottom:0;background:radial-gradient(circle,rgba(24,111,148,.16),transparent 70%)}
.orb-three{width:100px;height:100px;right:0;bottom:15%;background:radial-gradient(circle,rgba(54,228,232,.13),transparent 70%)}
.hero-ripple{position:absolute;width:600px;height:600px;border:1px solid rgba(54,228,232,.08);border-radius:50%;right:-15%;top:0;transform:scaleY(.36) rotate(-18deg)}
.ripple-two{width:440px;height:440px;right:-3%;top:13%;border-color:rgba(54,228,232,.1)}
.hero-art{position:relative;min-height:390px;display:grid;place-items:center;isolation:isolate}
.water-disc{position:relative;width:min(32vw,330px);min-width:220px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,rgba(154,251,255,.9) 0%,rgba(54,228,232,.62) 5%,rgba(16,111,143,.6) 17%,rgba(7,36,55,.9) 42%,rgba(7,19,29,1) 68%);box-shadow:inset -22px -28px 55px rgba(0,0,0,.6),inset 10px 8px 26px rgba(154,251,255,.16),0 0 55px rgba(54,228,232,.1);border:1px solid rgba(154,251,255,.16);animation:water-breathe 7s ease-in-out infinite}
.water-disc::before,.water-disc::after,.water-disc-inner{content:'';position:absolute;inset:9%;border:1px solid rgba(154,251,255,.22);border-radius:48% 52% 55% 45%;transform:rotate(25deg)}
.water-disc::after{inset:17%;transform:rotate(-32deg);border-color:rgba(54,228,232,.24);border-radius:55% 45% 42% 58%}
.water-disc-inner{inset:25%;transform:rotate(58deg);border-color:rgba(154,251,255,.18)}
.disc-glint{position:absolute;left:24%;top:22%;width:24px;height:24px;border-radius:50%;background:#d8ffff;filter:blur(12px);opacity:.7}
.float-note{position:absolute;z-index:3;padding:9px 12px;border:1px solid rgba(54,228,232,.16);border-radius:7px;background:rgba(8,28,40,.72);backdrop-filter:blur(12px);color:#b7edf0;font-family:Georgia,serif;font-size:11px;font-style:italic;letter-spacing:.2px}
.note-one{top:18%;left:0;transform:rotate(-5deg)}.note-two{bottom:20%;right:0;transform:rotate(4deg)}
.hero-art-caption{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;width:max-content;color:var(--text-muted);font-size:10px;letter-spacing:.4px}
.hero-bottom-line{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;color:var(--text-muted);font-size:9px;letter-spacing:1.5px}
@keyframes water-breathe{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.current-section{padding:82px 0 76px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:30px}
.section-heading h2{margin-top:13px;font-size:clamp(30px,4vw,43px);line-height:1.12;letter-spacing:-.05em}
.section-heading h2 span{color:var(--text-secondary);font-weight:500}
.section-intro{max-width:350px;margin-bottom:3px;color:var(--text-secondary);font-size:13px;line-height:1.8}
.collection-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:16px}
.collection-card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-height:310px;padding:24px;border:1px solid var(--border);border-radius:13px;overflow:hidden;background:linear-gradient(145deg,rgba(16,43,56,.85),rgba(9,25,36,.94));text-decoration:none;transition:transform .25s,border-color .25s,box-shadow .25s}
[data-theme="light"] .collection-card{background:linear-gradient(145deg,#fff,#eaf8fa)}
.collection-card:hover{transform:translateY(-4px);border-color:rgba(54,228,232,.38);box-shadow:0 16px 42px rgba(0,0,0,.12),0 0 30px rgba(54,228,232,.055)}
.collection-index{color:var(--text-muted);font-size:9px;letter-spacing:1.8px;font-weight:700}
.collection-symbol{position:absolute;right:23px;top:18px;color:var(--accent);font-size:24px}
.collection-card-bottom{position:relative;z-index:2;max-width:410px}
.collection-icon{display:grid;place-items:center;width:37px;height:37px;margin-bottom:17px;border:1px solid rgba(54,228,232,.25);border-radius:10px;color:var(--accent);background:rgba(54,228,232,.06);font-size:21px}
.collection-card h3{font-size:24px;letter-spacing:-.8px;margin-bottom:8px}.collection-card p{max-width:360px;color:var(--text-secondary);font-size:12px;line-height:1.8}
.collection-count{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:21px;padding-top:15px;border-top:1px solid var(--border);color:var(--accent);font-size:11px;font-weight:700}
.collection-horizon{background:radial-gradient(ellipse at 80% 24%,rgba(54,228,232,.1),transparent 42%),linear-gradient(145deg,rgba(10,31,43,.98),rgba(7,19,29,.98))}
.horizon-orbit{position:absolute;right:-20px;top:36px;width:180px;height:180px;border:1px solid rgba(54,228,232,.14);border-radius:50%;box-shadow:0 0 0 22px rgba(54,228,232,.025),0 0 0 44px rgba(54,228,232,.02)}
.horizon-orbit::before,.horizon-orbit::after{content:'';position:absolute;inset:22px;border:1px solid rgba(54,228,232,.12);border-radius:48% 52% 45% 55%;transform:rotate(45deg)}.horizon-orbit::after{inset:44px;transform:rotate(-30deg)}
.horizon-orbit span{position:absolute;top:27%;left:25%;width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 20px 5px rgba(54,228,232,.35)}
.quote-section{position:relative;padding:50px 24px 48px;margin:0 0 65px;text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:radial-gradient(ellipse at 50% 50%,rgba(54,228,232,.055),transparent 68%)}
.quote-mark{display:block;height:43px;color:var(--accent);font-family:Georgia,serif;font-size:70px;line-height:1;opacity:.8}
.quote-section p{font-family:Georgia,'Times New Roman',serif;font-size:clamp(22px,3.5vw,33px);line-height:1.5;letter-spacing:-.5px}
.quote-section em{color:var(--accent);font-weight:400}
.quote-foot{display:block;margin-top:23px;color:var(--text-muted);font-size:9px;font-weight:700;letter-spacing:2px}
.recent-heading{margin-bottom:22px}.recently-read-list{display:grid;gap:9px}
.recent-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 17px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text-primary);text-decoration:none;transition:border-color .2s,transform .2s}
.recent-item:hover{border-color:var(--accent);transform:translateX(3px)}.recent-title{font-size:13px;font-weight:600}.recent-time{color:var(--text-muted);font-size:11px;white-space:nowrap}
.site-footer{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:24px clamp(18px,5vw,56px);border-top:1px solid var(--border);color:var(--text-muted);font-size:11px;text-align:center}
.site-footer p{margin:0}.site-footer strong{color:var(--text-secondary);font-weight:700}.site-footer a{color:var(--accent);text-decoration:none;margin-left:8px}.footer-wave{color:var(--accent);font-size:20px}
.home-header h1 span,.story-count{color:var(--accent)}
.story-card,.category-card,.recent-item{transition:transform .22s,border-color .22s,background .22s}
.story-card:hover,.category-card:hover{border-color:rgba(54,228,232,.36)!important;box-shadow:0 12px 35px rgba(0,0,0,.14),0 0 26px rgba(54,228,232,.045)}
.tag{border-color:var(--border-light)}
.reading-progress{background:linear-gradient(90deg,#168fa8,#36e4e8,#9afbff);box-shadow:0 0 12px rgba(54,228,232,.35)}
.story-title{letter-spacing:-.035em}
@media(max-width:760px){
 .site-header{min-height:68px;gap:12px}.brand-word{font-size:17px}.brand-mark{width:31px;height:31px}.site-nav{gap:14px}.site-nav a{font-size:11px}
 .tide-hero{grid-template-columns:1fr;min-height:0;padding:64px 0 43px;gap:0}.tide-hero h1{font-size:clamp(43px,10vw,66px)}.hero-description{font-size:14px}
 .hero-art{min-height:290px;margin-top:14px}.water-disc{width:230px;min-width:0}.note-one{left:4%;top:12%}.note-two{right:2%;bottom:18%}.hero-art-caption{bottom:0}.hero-bottom-line{bottom:-1px}
 .current-section{padding:62px 0}.section-heading{align-items:start;flex-direction:column;gap:14px}.section-intro{max-width:520px}
 .collection-grid{grid-template-columns:1fr}.collection-card{min-height:270px}.quote-section{margin-bottom:48px;padding:38px 10px}
 .site-footer{gap:7px;flex-direction:column}.site-footer a{margin:3px 0 0}
}
@media(max-width:420px){.site-header{padding:12px 14px}.site-nav{gap:10px}.site-nav a{font-size:10px}.brand-word{font-size:15px}.brand-mark{width:28px;height:28px}.content-area{padding-left:17px;padding-right:17px}.hero-actions{gap:17px}.button{padding:0 14px}.hero-signature{font-size:10px}.hero-art{min-height:255px}.water-disc{width:195px}.float-note{font-size:9px;padding:7px 8px}.theme-toggle{right:13px;bottom:13px;width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
[data-theme="light"] body{background-image:radial-gradient(ellipse at 12% -10%,rgba(8,127,145,.07),transparent 44%),radial-gradient(ellipse at 90% 35%,rgba(8,127,145,.05),transparent 38%)}


/* ============================================
   TIDEWRITTEN — STORIES LIBRARY REDESIGN
   Premium digital bookshelf · English UI
   ============================================ */
.content-area:has(.stories-hero) { max-width: 1180px; }
.stories-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr);
  align-items: center;
  gap: clamp(22px, 5vw, 68px);
  min-height: 300px;
  margin: 20px 0 30px;
  padding: clamp(30px, 5vw, 58px) clamp(22px, 4vw, 46px);
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(54,228,232,.15);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 80% 45%, rgba(54,228,232,.10), transparent 43%),
    linear-gradient(125deg, rgba(12,32,43,.97), rgba(7,19,29,.97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 18px 54px rgba(0,0,0,.10);
}
[data-theme="light"] .stories-hero {
  background:
    radial-gradient(ellipse at 80% 45%, rgba(8,127,145,.10), transparent 43%),
    linear-gradient(125deg, #ffffff, #eaf8fa);
  border-color: rgba(8,127,145,.18);
}
.stories-hero::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
}
.stories-hero-copy { position: relative; z-index: 2; }
.stories-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px; color: var(--accent);
  font-size: 10px; font-weight: 800; letter-spacing: 2.2px;
}
.stories-eyebrow-dot {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.stories-hero h1 {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  margin: 0 0 9px; color: var(--text-primary);
  font-size: clamp(42px, 6vw, 68px); line-height: 1.04;
  font-weight: 750; letter-spacing: -.065em;
}
.stories-hero .story-count {
  display: inline-grid; place-items: center;
  min-width: 36px; height: 30px; padding: 0 10px;
  margin: 0; border: 1px solid rgba(54,228,232,.22);
  border-radius: 999px; background: rgba(54,228,232,.08);
  font-size: 12px; letter-spacing: .02em; vertical-align: middle;
}
.stories-hero-subtitle {
  margin: 0 0 12px; color: var(--text-primary);
  font-size: clamp(18px, 2.4vw, 24px); font-weight: 650; letter-spacing: -.5px;
}
.stories-hero-description {
  max-width: 470px; margin: 0; color: var(--text-secondary);
  font-size: 14px; line-height: 1.9;
}
.stories-hero-art {
  position: relative; display: grid; place-items: center;
  min-height: 205px; isolation: isolate; overflow: hidden;
}
.stories-orb {
  position: relative; z-index: 1; display: block;
  width: clamp(120px, 17vw, 184px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(211,255,255,.95) 0, rgba(54,228,232,.65) 5%, rgba(16,111,143,.55) 18%, rgba(7,36,55,.94) 48%, rgba(7,19,29,1) 72%);
  border: 1px solid rgba(154,251,255,.25);
  box-shadow: inset -18px -22px 35px rgba(0,0,0,.5), inset 8px 6px 18px rgba(154,251,255,.16), 0 0 42px rgba(54,228,232,.15);
  animation: library-orb-float 7s ease-in-out infinite;
}
.stories-orb::before,.stories-orb::after {
  content: ""; position: absolute; inset: 12%; border: 1px solid rgba(154,251,255,.3);
  border-radius: 43% 57% 51% 49%; transform: rotate(28deg);
}
.stories-orb::after { inset: 24%; border-color: rgba(54,228,232,.35); transform: rotate(-32deg); }
.stories-orbit { position: absolute; width: 210px; height: 210px; border: 1px solid rgba(54,228,232,.13); border-radius: 50%; transform: scaleY(.45) rotate(-22deg); }
.stories-orbit-one { width: 285px; height: 285px; }
.stories-orbit-two { width: 225px; height: 225px; transform: scaleY(.45) rotate(35deg); }
.stories-art-caption {
  position: absolute; bottom: 1px; z-index: 2; color: var(--text-muted);
  font-size: 8px; font-weight: 800; letter-spacing: 2px;
}
@keyframes library-orb-float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(3deg); } }

.search-trigger {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: none; min-height: 52px;
  margin: 0 0 30px; padding: 0 17px;
  border-radius: 10px; border-color: var(--border);
  background: var(--bg-card); color: var(--text-secondary);
  text-align: left; box-shadow: 0 4px 18px rgba(0,0,0,.05);
}
.search-trigger::before { content: "⌕"; color: var(--accent); font-size: 23px; line-height: 1; }
.search-trigger kbd { margin-left: auto; border-radius: 5px; padding: 4px 8px; }
.stories-browse-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 13px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: 1.8px;
}
.stories-browse-label span:last-child {
  color: var(--text-secondary); font-size: 11px; font-weight: 500; letter-spacing: 0;
}
.nav-tabs {
  display: flex; flex-wrap: nowrap; gap: 8px;
  margin: 0 0 28px; padding: 2px 2px 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin; scrollbar-color: var(--border-light) transparent;
}
.nav-tab {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 8px;
  background: transparent; border-color: var(--border);
  font-size: 12px; white-space: nowrap;
}
.nav-tab.active {
  color: #05252a; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(54,228,232,.12);
}
[data-theme="light"] .nav-tab.active { color: #fff; }
.stories-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  align-items: stretch; gap: 16px;
}
.story-card {
  display: flex; flex-direction: column; min-width: 0; min-height: 260px;
  padding: 23px 22px 19px; border: 1px solid var(--border);
  border-radius: 13px; background: linear-gradient(155deg, var(--bg-card), rgba(7,19,29,.2));
}
[data-theme="light"] .story-card { background: linear-gradient(155deg, #fff, #f5fcfd); }
.story-card::before { top: 0; height: 2px; }
.story-card .card-genre { gap: 6px; margin-bottom: 15px; }
.story-card .tag { padding: 4px 8px; font-size: 9px; letter-spacing: .7px; }
.story-card h3 {
  margin: 0 0 11px; color: var(--text-primary);
  font-size: 19px; font-weight: 750; line-height: 1.35; letter-spacing: -.45px;
}
.story-card .card-desc {
  flex: 0 0 auto; max-height: 5.1em; margin-bottom: 5px;
  color: var(--text-secondary); font-size: 13px; line-height: 1.72;
}
.story-card .card-desc.expanded { max-height: 500px; }
.story-card .desc-toggle { align-self: flex-start; margin: 4px 0 17px; font-size: 11px; }
.story-card .card-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.card-lang { color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.read-link { color: var(--accent); font-size: 11px; font-weight: 800; white-space: nowrap; }
.story-card:hover { transform: translateY(-3px); border-color: rgba(54,228,232,.34); }
.story-card.coming-soon { border-style: dashed; opacity: .82; }
.story-card.coming-soon .card-desc { max-height: none; }
.search-overlay { padding: max(10vh, 36px) 16px 24px; overflow-y: auto; }
.search-box { border-radius: 14px; }
.search-result { padding: 14px 18px; }
.search-result:hover { background: var(--bg-card-hover); }

@media (min-width: 761px) {
  .site-header { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
  .site-nav { flex: 1 1 auto; justify-content: center; flex-wrap: wrap; }
  .site-header .theme-toggle {
    position: relative; inset: auto; flex: 0 0 42px; width: 42px; height: 42px;
    z-index: 1; margin: 0; transform: none;
  }
  .site-header .theme-toggle:hover { transform: translateY(-1px); }
}
@media (max-width: 760px) {
  .site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .site-nav { order: 3; width: 100%; flex: 1 0 100%; justify-content: center; flex-wrap: wrap; gap: 12px 20px; }
  .site-header .theme-toggle {
    position: relative; inset: auto; flex: 0 0 38px; width: 38px; height: 38px;
    margin-left: auto; z-index: 1; transform: none;
  }
  .site-header .theme-toggle:hover { transform: translateY(-1px); }
  .stories-hero { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 31px 23px 22px; }
  .stories-hero-art { min-height: 170px; margin-top: 0; }
  .stories-orb { width: 125px; }
  .stories-orbit-one { width: 225px; height: 225px; }
  .stories-orbit-two { width: 180px; height: 180px; }
  .stories-hero h1 { font-size: clamp(40px, 10vw, 56px); }
  .stories-hero-description { font-size: 13px; }
  .stories-browse-label { letter-spacing: 1.2px; }
  .stories-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
}
@media (max-width: 420px) {
  .site-header { padding: 12px 14px; }
  .site-nav { gap: 10px 16px; }
  .site-nav a { font-size: 11px; }
  .stories-hero { margin-top: 13px; padding: 27px 18px 18px; }
  .stories-eyebrow { font-size: 9px; letter-spacing: 1.5px; }
  .stories-hero h1 { font-size: 41px; }
  .stories-hero .story-count { min-width: 30px; height: 25px; font-size: 11px; }
  .search-trigger { min-height: 48px; padding: 0 12px; font-size: 12px; }
  .stories-browse-label { align-items: flex-start; flex-direction: column; gap: 5px; }
  .nav-tab { padding: 7px 12px; font-size: 11px; }
  .stories-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .stories-orb { animation: none; }
}


/* Tidewritten story library — book-cover card redesign */
.stories-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 390px), 1fr));
  gap: 22px;
}
.stories-grid .story-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 23px 22px 20px calc(32% + 24px);
  border-radius: 16px;
  border: 1px solid rgba(106, 210, 221, .16);
  background: linear-gradient(135deg, rgba(10, 28, 42, .98), rgba(8, 17, 30, .98));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
  isolation: isolate;
}
[data-theme="light"] .stories-grid .story-card {
  background: linear-gradient(135deg, #ffffff, #f0f8fa);
  border-color: rgba(22, 123, 139, .16);
}
.stories-grid .story-card::after {
  content: attr(data-cover-title);
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 29%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  padding: 18px 13px 20px;
  overflow: hidden;
  color: rgba(255,255,255,.96);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.35px;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  background:
    radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.28), transparent 30%),
    radial-gradient(ellipse at 10% 75%, rgba(39,231,224,.25), transparent 38%),
    linear-gradient(155deg, #0d6978 0%, #12374f 45%, #111b32 100%);
  border-right: 1px solid rgba(132,235,240,.2);
  box-shadow: inset -10px 0 24px rgba(0,0,0,.12);
  transition: filter .25s ease, width .25s ease;
}
.stories-grid .story-card::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 29%;
  right: auto;
  width: 2px;
  height: auto;
  opacity: .75;
  background: linear-gradient(180deg, transparent, rgba(88,238,232,.65), transparent);
}
.stories-grid .story-card:nth-child(5n + 2)::after {
  background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.25), transparent 32%), linear-gradient(155deg, #77435e, #402c52 52%, #17233d);
}
.stories-grid .story-card:nth-child(5n + 3)::after {
  background: radial-gradient(ellipse at 65% 25%, rgba(255,255,255,.22), transparent 30%), linear-gradient(155deg, #2b7669, #17464e 50%, #14263b);
}
.stories-grid .story-card:nth-child(5n + 4)::after {
  background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.25), transparent 32%), linear-gradient(155deg, #91633c, #5a3b38 52%, #24223b);
}
.stories-grid .story-card:nth-child(5n)::after {
  background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.22), transparent 32%), linear-gradient(155deg, #405b91, #293b63 52%, #151d34);
}
.stories-grid .story-card > * {
  position: relative;
  z-index: 1;
}
.stories-grid .story-card .card-genre { gap: 5px; margin-bottom: 13px; }
.stories-grid .story-card .tag { font-size: 9px; padding: 4px 7px; letter-spacing: .55px; }
.stories-grid .story-card h3 { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.28; margin-bottom: 10px; }
.stories-grid .story-card .mood-emoji { display: none; }
.stories-grid .story-card .card-desc { font-size: 12px; line-height: 1.65; max-height: 5em; }
.stories-grid .story-card .desc-toggle { margin: 5px 0 13px; padding: 0; background: transparent; border: 0; color: var(--accent); cursor: pointer; }
.stories-grid .story-card .card-footer { padding-top: 12px; margin-top: auto; }
.stories-grid .story-card .read-link { letter-spacing: .25px; }
.stories-grid .story-card:hover {
  transform: translateY(-5px);
  border-color: rgba(72, 226, 232, .42);
  box-shadow: 0 20px 44px rgba(0,0,0,.24), 0 0 24px rgba(54,228,232,.07);
}
.stories-grid .story-card:hover::after { filter: brightness(1.16) saturate(1.08); }
@media (max-width: 520px) {
  .stories-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .stories-grid .story-card { min-height: 270px; padding: 19px 15px 17px calc(31% + 16px); }
  .stories-grid .story-card::after { width: 28%; padding: 14px 9px 16px; font-size: 16px; }
  .stories-grid .story-card::before { left: 28%; }
  .stories-grid .story-card h3 { font-size: 17px; }
  .stories-grid .story-card .tag { font-size: 8px; }
}


/* ============================================
   TIDEWRITTEN HOMEPAGE — SOFT FLOATING REFRESH
   Scoped to .home-redesign so reading pages stay unchanged.
   ============================================ */
.home-redesign{--home-glow:rgba(54,228,232,.12);position:relative;isolation:isolate;overflow:hidden;padding-bottom:38px}
.home-redesign a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.home-redesign .home-eyebrow{display:flex;align-items:center;gap:9px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.home-redesign .home-eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);flex:none}
.home-redesign em{font-style:normal;color:var(--accent)}
.float-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:clamp(20px,4vw,54px);min-height:590px;padding:68px 0 65px;border-bottom:1px solid var(--border)}
.float-field{position:absolute;z-index:-1;inset:-5% -7% 0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 78% 38%,rgba(54,228,232,.055),transparent 42%),radial-gradient(ellipse at 18% 82%,rgba(26,109,143,.08),transparent 40%)}
.float-orb{position:absolute;display:block;border-radius:50%;filter:blur(1px);animation:home-orb-drift 12s ease-in-out infinite}
.orb-a{width:290px;height:290px;right:10%;top:6%;background:radial-gradient(circle at 35% 30%,rgba(154,251,255,.19),rgba(54,228,232,.035) 52%,transparent 72%)}
.orb-b{width:210px;height:210px;left:20%;bottom:-8%;background:radial-gradient(circle,rgba(24,111,148,.14),transparent 70%);animation-delay:-4s}
.orb-c{width:130px;height:130px;right:0;bottom:18%;background:radial-gradient(circle,rgba(54,228,232,.12),transparent 70%);animation-delay:-7s}
.float-ring{position:absolute;display:block;width:540px;height:540px;right:-8%;top:4%;border:1px solid rgba(54,228,232,.09);border-radius:50%;transform:scaleY(.48) rotate(-22deg)}
.ring-b{width:410px;height:410px;right:1%;top:17%;border-color:rgba(54,228,232,.11);transform:scaleY(.52) rotate(28deg)}
.float-speck{position:absolute;color:var(--accent);opacity:.65;font-size:23px;animation:home-speck-drift 7s ease-in-out infinite}
.speck-a{right:19%;top:16%}.speck-b{left:45%;bottom:16%;font-size:42px;animation-delay:-2s}.speck-c{right:5%;top:58%;font-size:18px;animation-delay:-4s}
.float-hero-copy{position:relative;z-index:2;max-width:590px}
.float-hero h1{margin:24px 0 21px;font-size:clamp(42px,6vw,76px);font-weight:700;letter-spacing:-.065em;line-height:1.04;color:var(--text-primary)}
.float-hero h1 em{text-shadow:0 0 34px rgba(54,228,232,.2)}
.home-lede{max-width:460px;color:var(--text-secondary);font-size:15px;line-height:1.9}
.home-buttons{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:29px}
.home-button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:47px;padding:0 19px;border:1px solid var(--border-light);border-radius:999px;text-decoration:none;font-size:12px;font-weight:700;transition:transform .25s,border-color .25s,box-shadow .25s,background .25s}
.home-button:hover{transform:translateY(-3px)}
.home-button-primary{background:var(--accent);border-color:var(--accent);color:#052027;box-shadow:0 7px 24px rgba(54,228,232,.12)}
.home-button-primary:hover{box-shadow:0 10px 30px rgba(54,228,232,.22)}
.home-button-quiet{color:var(--text-primary);background:rgba(12,32,43,.3)}
.home-button-quiet:hover{border-color:var(--accent)}
.home-whisper{display:flex;align-items:center;gap:10px;margin-top:31px;color:var(--text-muted);font-size:10px;letter-spacing:.2px}
.whisper-line{width:29px;height:1px;background:var(--accent);opacity:.65}
.float-hero-art{position:relative;display:grid;place-items:center;min-height:390px;isolation:isolate}
.float-water{position:relative;width:min(32vw,330px);min-width:220px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 27%,rgba(154,251,255,.83) 0%,rgba(54,228,232,.48) 5%,rgba(16,111,143,.48) 17%,rgba(7,36,55,.88) 44%,var(--bg-primary) 70%);border:1px solid rgba(154,251,255,.17);box-shadow:inset -22px -28px 55px rgba(0,0,0,.36),inset 10px 8px 26px rgba(154,251,255,.14),0 0 55px rgba(54,228,232,.08);animation:home-water-float 8s ease-in-out infinite}
.float-water:before{content:"";position:absolute;inset:-8%;border:1px solid rgba(54,228,232,.12);border-radius:48% 52% 55% 45%;transform:rotate(26deg)}
.float-water:after{content:"";position:absolute;inset:-16%;border:1px solid rgba(54,228,232,.07);border-radius:52% 48% 44% 56%;transform:rotate(-22deg)}
.water-layer{position:absolute;inset:10%;border:1px solid rgba(154,251,255,.23);border-radius:48% 52% 55% 45%;transform:rotate(25deg);animation:home-layer-turn 22s linear infinite}
.layer-two{inset:19%;border-color:rgba(54,228,232,.24);border-radius:55% 45% 42% 58%;transform:rotate(-32deg);animation-duration:29s;animation-direction:reverse}
.layer-three{inset:29%;border-color:rgba(154,251,255,.17);transform:rotate(58deg);animation-duration:36s}
.water-light{position:absolute;left:23%;top:22%;width:25px;height:25px;border-radius:50%;background:#d8ffff;filter:blur(12px);opacity:.7}
.float-label{position:absolute;z-index:3;padding:9px 12px;border:1px solid rgba(54,228,232,.17);border-radius:999px;background:color-mix(in srgb,var(--bg-secondary) 82%,transparent);backdrop-filter:blur(12px);color:var(--text-secondary);font-family:Georgia,serif;font-size:11px;font-style:italic;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.label-top{top:17%;left:0;transform:rotate(-5deg);animation:home-tag-float 7s ease-in-out infinite}
.label-bottom{bottom:17%;right:-2%;transform:rotate(4deg);animation:home-tag-float 8s ease-in-out -3s infinite}
.float-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.65;box-shadow:0 0 16px var(--accent);animation:home-speck-drift 6s ease-in-out infinite}
.dot-one{top:16%;right:22%}.dot-two{bottom:24%;left:13%;width:5px;height:5px;animation-delay:-2s}.dot-three{top:42%;right:5%;width:4px;height:4px;animation-delay:-4s}
.art-caption{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;color:var(--text-muted);font-size:10px}
.art-caption>span{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.hero-scroll-cue{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:9px;letter-spacing:1.7px}
.hero-scroll-cue>span:first-child{color:var(--accent)}
.scroll-line{display:block;width:35px;height:1px;background:var(--border-light)}
.home-section{padding:76px 0 67px}
.home-section-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:27px}
.home-section-heading h2{margin-top:12px;font-size:clamp(29px,4vw,43px);line-height:1.12;letter-spacing:-.05em}
.home-section-heading>p{max-width:330px;margin-bottom:3px;color:var(--text-secondary);font-size:13px;line-height:1.8}
.float-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;align-items:stretch}
.float-story-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;min-height:385px;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:linear-gradient(155deg,var(--bg-card),var(--bg-secondary));text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.055);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.float-story-card:nth-child(2){transform:translateY(12px)}
.float-story-card:hover{transform:translateY(-6px);border-color:rgba(54,228,232,.42);box-shadow:0 18px 38px rgba(0,0,0,.13),0 0 25px rgba(54,228,232,.045)}
.float-story-card:nth-child(2):hover{transform:translateY(5px)}
.story-card-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 18px 0;color:var(--text-muted);font-size:9px;letter-spacing:1.5px;font-weight:700}
.story-card-arrow{color:var(--accent);font-size:19px;transition:transform .25s}
.float-story-card:hover .story-card-arrow{transform:translate(2px,-2px)}
.story-art{position:relative;display:block;height:150px;margin:4px 14px 0;overflow:hidden;border-radius:13px;background:radial-gradient(ellipse at 50% 110%,rgba(54,228,232,.11),transparent 64%)}
.bird-art{background:radial-gradient(ellipse at 50% 100%,rgba(62,128,151,.2),transparent 60%),linear-gradient(150deg,rgba(10,36,51,.2),rgba(7,19,29,.05))}
.bird-moon{position:absolute;width:68px;height:68px;right:24%;top:21px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#d6ffff,rgba(54,228,232,.3) 45%,rgba(54,228,232,.02) 72%);box-shadow:0 0 40px rgba(54,228,232,.13);animation:home-water-float 7s ease-in-out infinite}
.bird-orbit{position:absolute;width:180px;height:85px;left:50%;top:37px;border:1px solid rgba(54,228,232,.2);border-radius:50%;transform:translateX(-50%) rotate(-17deg)}
.bird-horizon{position:absolute;left:-10%;right:-10%;bottom:-42px;height:90px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,rgba(31,92,111,.22),rgba(7,19,29,.05));border-top:1px solid rgba(54,228,232,.16)}
.bird-star{position:absolute;color:var(--accent);opacity:.7}.star-one{top:25px;left:24%}.star-two{top:74px;right:17%;font-size:13px}
.prismat-art{background:radial-gradient(ellipse at 50% 50%,rgba(97,119,218,.12),transparent 63%)}
.prism-core{position:absolute;width:67px;height:67px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);border:1px solid rgba(154,251,255,.62);background:linear-gradient(135deg,rgba(154,251,255,.18),rgba(54,228,232,.025));box-shadow:0 0 30px rgba(54,228,232,.12);animation:home-core-pulse 6s ease-in-out infinite}
.prism-core:after{content:"";position:absolute;inset:11px;border:1px solid rgba(154,251,255,.3)}
.prism-orbit{position:absolute;width:140px;height:70px;left:50%;top:50%;border:1px solid rgba(54,228,232,.2);border-radius:50%;transform:translate(-50%,-50%) rotate(28deg)}
.orbit-two{width:175px;height:95px;transform:translate(-50%,-50%) rotate(-36deg);border-color:rgba(130,143,233,.22)}
.prism-star{position:absolute;top:25px;right:25%;color:#aab8ff}
.unsent-art{background:radial-gradient(ellipse at 50% 70%,rgba(211,147,172,.12),transparent 62%)}
.letter{position:absolute;width:80px;height:57px;left:50%;top:44px;border:1px solid rgba(154,251,255,.25);border-radius:5px;background:linear-gradient(145deg,rgba(20,54,68,.9),rgba(8,27,39,.9));box-shadow:0 10px 24px rgba(0,0,0,.12)}
.letter-back{transform:translateX(-36%) rotate(-13deg);opacity:.65}
.letter-front{display:grid;place-items:center;transform:translateX(-58%) rotate(7deg);font-family:Georgia,serif;font-size:25px;color:var(--accent);animation:home-water-float 8s ease-in-out infinite}
.letter-glow{position:absolute;width:120px;height:80px;left:50%;top:35px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(54,228,232,.11),transparent 70%)}
.unsent-star{position:absolute;top:21px;right:25%;color:var(--accent);font-size:13px}
.story-card-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:15px 19px 20px}
.story-type{color:var(--accent);font-size:9px;letter-spacing:1.2px;font-weight:700}
.story-card-copy strong{display:block;margin-top:8px;font-size:19px;line-height:1.28;letter-spacing:-.5px;color:var(--text-primary)}
.story-summary{display:block;margin-top:9px;color:var(--text-secondary);font-size:12px;line-height:1.75}
.story-card-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:auto;padding-top:19px;color:var(--text-primary);font-size:11px;font-weight:700}
.story-card-cta span{color:var(--accent);font-size:17px;transition:transform .25s}
.float-story-card:hover .story-card-cta span{transform:translateX(4px)}
.library-float-bar{position:relative;display:flex;align-items:center;gap:17px;margin-top:34px;padding:21px 23px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(100deg,var(--bg-secondary),var(--bg-card));box-shadow:0 10px 28px rgba(0,0,0,.04)}
.library-float-icon{display:grid;place-items:center;flex:none;width:45px;height:45px;border:1px solid rgba(54,228,232,.24);border-radius:14px;color:var(--accent);font-size:25px;background:var(--accent-subtle)}
.library-float-bar>div{flex:1}
.library-float-bar strong{font-size:13px}
.library-float-bar p{margin-top:3px;color:var(--text-secondary);font-size:11px;line-height:1.6}
.library-float-bar>a{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap}
.library-float-bar>a:hover{text-decoration:underline}
.home-quote{position:relative;isolation:isolate;overflow:hidden;margin:5px 0 57px;padding:50px 20px 45px;text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:radial-gradient(ellipse at 50% 50%,rgba(54,228,232,.05),transparent 68%)}
.home-quote-mark{display:block;height:42px;color:var(--accent);font-family:Georgia,serif;font-size:68px;line-height:1;opacity:.75}
.home-quote p{position:relative;z-index:1;font-family:Georgia,'Times New Roman',serif;font-size:clamp(22px,3.5vw,33px);line-height:1.5;letter-spacing:-.5px}
.home-quote p em{color:var(--accent)}
.home-quote-foot{display:block;margin-top:21px;color:var(--text-muted);font-size:9px;font-weight:700;letter-spacing:2px}
.quote-orb{position:absolute;z-index:-1;display:block;border-radius:50%;border:1px solid rgba(54,228,232,.12);animation:home-orb-drift 10s ease-in-out infinite}
.quote-orb-one{width:180px;height:180px;left:9%;top:10%;transform:scaleY(.7)}
.quote-orb-two{width:110px;height:110px;right:14%;bottom:-14%;border-color:rgba(54,228,232,.08);animation-delay:-3s}
.home-recent{padding:0 0 56px}
.home-recent .recently-read-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.home-recent .recent-item{min-width:0;border-radius:13px;background:var(--bg-card);padding:15px 18px}
.home-end-card{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:30px;overflow:hidden;margin:8px 0 12px;padding:clamp(25px,4vw,43px);border:1px solid var(--border);border-radius:21px;background:radial-gradient(ellipse at 90% 0%,rgba(54,228,232,.08),transparent 40%),var(--bg-secondary)}
.home-end-card h2{margin:12px 0;font-size:clamp(26px,3.7vw,38px);line-height:1.14;letter-spacing:-.05em}
.home-end-card>div:first-of-type>p:last-child{max-width:480px;color:var(--text-secondary);font-size:12px;line-height:1.8}
.home-end-links{position:relative;z-index:1;display:grid;gap:10px;min-width:175px}
.home-end-links a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 14px;border:1px solid var(--border-light);border-radius:999px;color:var(--text-primary);font-size:11px;font-weight:600;text-decoration:none;transition:border-color .2s,transform .2s}
.home-end-links a span{color:var(--accent)}
.home-end-links a:hover{border-color:var(--accent);transform:translateX(3px)}
.end-orb{position:absolute;z-index:-1;display:block;width:170px;height:170px;border-radius:50%;border:1px solid rgba(54,228,232,.1);right:22%;top:-55%;animation:home-orb-drift 11s ease-in-out infinite}
.end-orb-two{width:95px;height:95px;right:12%;top:auto;bottom:-48%;animation-delay:-5s}
@keyframes home-water-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes home-orb-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8px,-15px,0) scale(1.035)}}
@keyframes home-speck-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(10deg)}}
@keyframes home-tag-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes home-layer-turn{from{rotate:0deg}to{rotate:360deg}}
@keyframes home-core-pulse{0%,100%{opacity:.75;scale:1}50%{opacity:1;scale:1.07}}
@media(max-width:900px){
 .float-hero{min-height:510px;gap:18px}.float-hero h1{font-size:clamp(40px,6vw,61px)}.float-water{width:min(31vw,280px);min-width:190px}.float-story-grid{gap:12px}.float-story-card{min-height:400px}.story-card-copy{padding:14px 15px 18px}.story-card-copy strong{font-size:17px}.story-summary{font-size:11px}.label-top{left:-3%}.label-bottom{right:-6%}
}
@media(max-width:680px){
 .float-hero{grid-template-columns:1fr;gap:0;padding:53px 0 55px;min-height:0}.float-hero-copy{max-width:100%}.float-hero h1{font-size:clamp(42px,11vw,62px);margin-top:20px}.home-lede{font-size:14px;max-width:520px}.float-hero-art{min-height:310px;margin-top:12px}.float-water{width:220px;min-width:0}.float-ring{right:-24%;top:6%;width:420px;height:420px}.ring-b{right:-10%;top:18%;width:320px;height:320px}.label-top{left:5%;top:14%}.label-bottom{right:2%;bottom:14%}.art-caption{bottom:0}.hero-scroll-cue{bottom:0}
 .home-section{padding:58px 0 50px}.home-section-heading{display:block}.home-section-heading>p{margin-top:14px;max-width:520px}.float-story-grid{grid-template-columns:1fr;gap:15px}.float-story-card,.float-story-card:nth-child(2){min-height:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;column-gap:0;transform:none}.float-story-card:hover,.float-story-card:nth-child(2):hover{transform:translateY(-3px)}.story-card-top{grid-column:1/-1;padding-bottom:5px}.story-art{grid-column:1;grid-row:2;height:150px;margin:0 0 14px 12px;align-self:center}.story-card-copy{grid-column:2;grid-row:2;padding:10px 15px 17px 13px}.story-card-copy strong{font-size:17px}.story-summary{font-size:11px}.story-card-cta{padding-top:14px}.library-float-bar{align-items:flex-start;flex-wrap:wrap;padding:18px}.library-float-bar>div{flex:1 1 calc(100% - 65px)}.library-float-bar>a{margin-left:62px}.home-quote{margin-bottom:43px;padding:42px 12px 38px}.home-recent .recently-read-list{grid-template-columns:1fr}.home-end-card{display:block}.home-end-links{margin-top:23px;max-width:320px}.end-orb{right:3%}
}
@media(max-width:420px){
 .home-redesign{margin-left:-2px;margin-right:-2px}.float-hero{padding-top:40px}.float-hero h1{font-size:41px}.home-buttons{gap:9px}.home-button{padding:0 14px;min-height:44px;font-size:11px}.home-whisper{font-size:9px;line-height:1.6}.float-hero-art{min-height:275px}.float-water{width:190px}.float-label{font-size:9px;padding:8px 10px}.label-top{left:0}.label-bottom{right:-1%}.float-story-card,.float-story-card:nth-child(2){grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}.story-art{height:125px}.story-card-top{font-size:8px}.story-card-copy{padding:7px 11px 14px 10px}.story-type{font-size:8px;letter-spacing:.7px}.story-card-copy strong{font-size:15px}.story-summary{font-size:10px;line-height:1.6}.story-card-cta{font-size:10px;padding-top:11px}.library-float-bar>a{margin-left:0}.home-quote p{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
 .home-redesign *, .home-redesign *::before, .home-redesign *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}


/* ============================================
   HOMEPAGE STORY ROTATOR + BOTTOM SPACING FIX
   ============================================ */
.content-area:has(.home-redesign){max-width:1240px;padding-top:0;padding-bottom:72px}
.home-redesign{overflow:visible;padding-bottom:8px}
.home-redesign .start-section{padding-top:64px;padding-bottom:54px}
.random-story-stage{position:relative;min-height:265px;overflow:hidden;border:1px solid var(--border);border-radius:22px;background:linear-gradient(115deg,var(--bg-secondary),var(--bg-card));isolation:isolate}
.random-story-stage:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 82% 30%,rgba(54,228,232,.1),transparent 42%),radial-gradient(ellipse at 8% 100%,rgba(54,130,166,.1),transparent 44%);pointer-events:none}
.random-story-card{position:relative;display:grid;grid-template-columns:minmax(180px,.72fr) minmax(0,1.28fr);align-items:stretch;min-height:265px;color:var(--text-primary);text-decoration:none;transition:opacity .42s ease,transform .42s ease}
.random-story-card:focus-visible{outline:2px solid var(--accent);outline-offset:-5px;border-radius:22px}
.random-story-card.story-leave-left{opacity:0;transform:translateX(-42px)}
.random-story-card.story-enter-right{opacity:0;transform:translateX(42px)}
.random-story-art{position:relative;display:block;min-height:265px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 50%,rgba(54,228,232,.18),transparent 65%),linear-gradient(145deg,#102c3b,#081824)}
.random-story-art:before,.random-story-art:after{content:"";position:absolute;pointer-events:none;border:1px solid rgba(154,251,255,.2);border-radius:50%;width:210px;height:210px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-24deg)}
.random-story-art:after{width:155px;height:155px;transform:translate(-50%,-50%) rotate(35deg);border-color:rgba(154,251,255,.12)}
.random-art-orb{position:absolute;width:60px;height:60px;top:24%;right:24%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(226,255,252,.95),rgba(54,228,232,.2) 62%,transparent 74%);box-shadow:0 0 45px rgba(54,228,232,.16);animation:home-water-float 7s ease-in-out infinite}
.random-art-ring{position:absolute;width:170px;height:80px;left:50%;top:52%;border:1px solid rgba(154,251,255,.3);border-radius:50%;transform:translate(-50%,-50%) rotate(-25deg)}
.random-art-line{position:absolute;left:8%;right:8%;bottom:24%;height:1px;background:linear-gradient(90deg,transparent,rgba(154,251,255,.55),transparent)}
.random-story-art.art-sunset{background:radial-gradient(ellipse at 70% 28%,rgba(255,198,151,.23),transparent 30%),linear-gradient(145deg,#26314d,#8d596d 66%,#162b3b)}
.random-story-art.art-sunset .random-art-orb{background:radial-gradient(circle at 35% 30%,#ffe5bd,rgba(255,178,143,.16) 65%,transparent 75%);box-shadow:0 0 45px rgba(255,194,150,.18)}
.random-story-art.art-letter{background:radial-gradient(ellipse at 50% 80%,rgba(211,147,172,.18),transparent 62%),linear-gradient(145deg,#10283d,#314f62)}
.random-story-art.art-letter .random-art-orb{width:68px;height:48px;top:40%;right:auto;left:50%;border:1px solid rgba(213,246,242,.58);border-radius:5px;background:linear-gradient(145deg,rgba(154,251,255,.15),rgba(8,27,39,.8));transform:translate(-50%,-50%) rotate(-8deg)}
.random-story-art.art-face{background:radial-gradient(ellipse at 52% 48%,rgba(211,177,184,.2),transparent 32%),linear-gradient(135deg,#202b43,#72596e 65%,#b68b8a)}
.random-story-art.art-face .random-art-orb{width:34px;height:58px;right:calc(50% - 17px);top:32%;border-radius:48% 48% 42% 42%;border:1px solid rgba(250,224,208,.72);background:rgba(250,224,208,.12)}
.random-story-art.art-horizon{background:linear-gradient(145deg,#29475a,#78949a 52%,#d1b49c)}
.random-story-art.art-horizon .random-art-orb{background:radial-gradient(circle,#ffe1b7,rgba(255,222,175,.12) 68%,transparent 75%)}
.random-story-art.art-stars{background:radial-gradient(ellipse at 50% 100%,rgba(89,191,195,.2),transparent 48%),linear-gradient(135deg,#101d35,#25465c)}
.random-story-art.art-stars .random-art-orb{width:5px;height:5px;top:25%;right:22%;background:#9be7df;box-shadow:-130px 32px 0 #9be7df,-78px -8px 0 rgba(155,231,223,.6),-35px 56px 0 rgba(155,231,223,.8),18px 46px 0 rgba(155,231,223,.45)}
.random-story-art.art-orbit{background:linear-gradient(135deg,#183c49,#345e65 50%,#182a43)}
.random-story-art.art-orbit .random-art-orb{width:85px;height:85px;right:calc(50% - 42px);top:calc(50% - 42px);border:1px solid rgba(218,241,228,.6);background:transparent;box-shadow:inset 0 0 0 12px rgba(218,241,228,.04),0 0 30px rgba(128,219,200,.13)}
.random-story-art.art-prism{background:radial-gradient(ellipse at 50% 50%,rgba(135,116,255,.25),transparent 40%),linear-gradient(135deg,#10172f,#38285d 60%,#122c49)}
.random-story-art.art-prism .random-art-orb{width:54px;height:54px;right:calc(50% - 27px);top:calc(50% - 27px);border-radius:5px;background:linear-gradient(135deg,#d4c8ff,#7edff3 55%,#8067d7);clip-path:polygon(50% 0,100% 35%,82% 100%,20% 86%,0 30%);box-shadow:0 0 35px rgba(157,143,255,.4)}
.random-story-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(25px,4vw,48px);min-width:0}
.random-story-kicker{color:var(--accent);font-size:9px;font-weight:700;letter-spacing:1.7px;line-height:1.6}
.random-story-copy strong{display:block;max-width:650px;margin-top:13px;font-size:clamp(23px,3.4vw,39px);font-weight:700;letter-spacing:-.045em;line-height:1.18;overflow-wrap:anywhere}
.random-story-summary{display:block;max-width:520px;margin-top:13px;color:var(--text-secondary);font-size:13px;line-height:1.85}
.random-story-cta{display:flex;align-items:center;gap:10px;margin-top:23px;color:var(--text-primary);font-size:11px;font-weight:700}
.random-story-cta span{color:var(--accent);font-size:18px;transition:transform .2s}
.random-story-card:hover .random-story-cta span{transform:translate(3px,-2px)}
.random-story-index{position:absolute;right:20px;top:17px;color:var(--text-muted);font-size:10px;letter-spacing:1.5px}
.random-story-controls{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:13px;color:var(--text-muted);font-size:10px}
.random-story-controls>span{display:flex;align-items:center;gap:8px}
.random-live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.random-story-controls button{border:1px solid var(--border-light);border-radius:999px;background:transparent;color:var(--text-primary);padding:9px 14px;font:inherit;font-weight:700;cursor:pointer;transition:border-color .2s,transform .2s}
.random-story-controls button:hover{border-color:var(--accent);transform:translateY(-1px)}
.home-redesign .library-float-bar{margin-top:25px}
.site-footer{position:relative;z-index:2;flex-wrap:wrap;row-gap:12px}
@media(max-width:680px){
 .content-area:has(.home-redesign){padding-top:0;padding-bottom:50px}
 .home-redesign .start-section{padding-top:45px}
 .random-story-stage,.random-story-card{min-height:0}
 .random-story-card{grid-template-columns:1fr;grid-template-rows:155px auto}
 .random-story-art{min-height:155px}
 .random-story-copy{padding:22px 20px 25px}
 .random-story-copy strong{font-size:clamp(23px,7vw,32px);padding-right:5px}
 .random-story-summary{font-size:12px}
 .random-story-index{top:12px;right:13px}
}
@media(max-width:420px){
 .random-story-card{grid-template-rows:135px auto}
 .random-story-art{min-height:135px}
 .random-story-copy{padding:19px 17px 22px}
 .random-story-controls{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
 .random-story-card{transition:none}
 .random-art-orb{animation:none}
}