/* =========================
   THEME (inverse grayscale)
   dark paper + light ink
   ========================= */

:root{
  --bg: #1b1b1b;
  --panel: #242424;               /* boxes / inputs / buttons */
  --text: #f2f2f2;
  --muted: rgba(242,242,242,.72);
  --line: rgba(242,242,242,.16);

  /* layout */
  --page-max: 1120px;
  --gutter: 18px;

  /* horizontal cards (podcast rows) */
  --card-w: 240px;
  --card-radius: 14px;
  --row-gap: 12px;

  /* clips column */
  --clips-col-w: 182px;           /* right column width */
  --clips-gap: 10px;
  --clips-title-h: 54px;          /* title clamp area */
  --clips-visible: 2.35;          /* show ~2 cards + peek */
}

/* =========================
   Base / reset
   ========================= */

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
  overscroll-behavior-y: auto;
}

main{
  max-width: var(--page-max);
  margin: 22px auto;
  padding: 0 18px;
}

p{ color: var(--muted); margin: 0 0 10px; }

h1, h2{
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:visited{ color: var(--text); }

hr, .tight-hr{
  border: none;
  border-top: 1px solid var(--line);
  margin: 10px 0;
}

/* =========================
   Nav + buttons
   ========================= */

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.nav .dot{ opacity: .5; }

.btn,
button{
  display: inline-block;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  min-height: 42px;
}

.btn{ text-decoration: none; }

.btn:hover,
button:hover{ background: rgba(255,255,255,.06); }

.icon-btn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  padding: 0;
}

/* =========================
   Shared cards (podcast + clips)
   ========================= */

.card{
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--panel);
  padding: 0;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
}

.thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play{
  position: absolute;
  inset: auto 8px 8px auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.25);
}

.card-title{
  padding: 9px 9px 10px;
  font-weight: 650;
  font-size: 13px;
  color: var(--text);
  line-height: 1.25;
}

/* =========================
   Podcast page layout
   Left: rows, Right: clips
   ========================= */

.podcast-title{ margin: 0 0 6px; }



.lede{
  margin: 4px 0 10px;
  color: var(--muted);
  max-width: 70ch;
}

.podcast-cta-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* ONE grid only */
.podcast-topgrid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--clips-col-w);
  gap: var(--gutter);
  align-items: stretch;
}

/* critical: stops left side from blowing up the grid */
.top-left{ min-width: 0; }

.top-right{
  width: var(--clips-col-w);
  justify-self: end;
  align-self: stretch;

  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Step B: keep the clips header + status from stretching */
.top-right .row-head,
.top-right .status{
  flex: 0 0 auto;
}


.row-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}

.row-controls{
  display:flex;
  gap:10px;
  margin: 0;
}

.status{
  min-height: 16px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
}

.row-block{ margin: 10px 0 12px; }
.row-block--tight{ margin: 8px 0 10px; }

/* Horizontal rows */
.row{
  display:flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--row-gap);
  padding: 6px 2px 10px;

  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  scroll-padding-right: 2px;

  max-width: 100%;
  width: 100%;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}


.row > .card{
  width: var(--card-w);
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.row::-webkit-scrollbar{ height: 10px; }
.row::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}

/* =========================
   Clips column (vertical)
   ========================= */

/* compute viewport height so you see ~2 cards + peek */
/* Clips "window" */
.clips-viewport{
  flex: 1 1 0;          /* ✅ takes remaining height */
  min-height: 0;        /* ✅ allows overflow scrolling */
  overflow: hidden;     /* window hides overflow */
  border-radius: var(--card-radius);
}

.clips-rail{
  height: 100%;
  min-height: 0;
  overflow-y: auto;     /* ✅ actual scroll container */
  overflow-x: hidden;

  display: flex;
  flex-direction: column;
  gap: var(--clips-gap);
  padding: 2px;

  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scrollbar-width: thin;
  overscroll-behavior-y: none;
}

.clips-rail::-webkit-scrollbar{ width: 10px; }
.clips-rail::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}

.clips-rail .card{
  width: 100%;
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.clips-rail .thumb{ aspect-ratio: 9 / 16; }

.clips-rail .card-title{
  font-size: 12px;
  line-height: 1.2;
  max-height: var(--clips-title-h);
  overflow: hidden;
}

/* =========================
   Contact form (dark fields)
   ========================= */
/* Used by the mailto-based form on /contact/. */

input[type="email"],
input[type="text"],
textarea{
  width: 100%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 12px;
  font: inherit;
  outline: none;
}

input::placeholder,
textarea::placeholder{
  color: rgba(242,242,242,.45);
}

input:focus,
textarea:focus{
  border-color: rgba(242,242,242,.32);
}

/* =========================
   Modal player
   ========================= */
/* Shared by the podcast page to overlay YouTube videos without navigation. */

.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 50;
}
.modal.open{ display: block; }

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
}

.modal-card{
  position: relative;
  width: min(1000px, 92vw);
  margin: 6vh auto 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}

.modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}
.modal-close:hover{ background: rgba(255,255,255,.06); }

.player-wrap{
  margin-top: 36px;
  aspect-ratio: 16 / 9;
}
.player-wrap iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

.reader-wrap{
  margin-top: 36px;
  height: 70vh;
}

.reader-wrap iframe{
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  background: #111;
}

/* =========================
   Writing page preview strip
   ========================= */

.preview-wrap{
  margin: 12px 0 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
}

.preview-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.preview-title{
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.preview-link{
  font-size: 0.9rem;
  text-decoration: none;
}

.preview-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.preview-card{
  display: grid;
  gap: 6px;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: var(--panel);
}

.preview-card img{
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.preview-page{
  font-size: 0.75rem;
  color: var(--muted);
}

.preview-card--cta{
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 220px;
}

.preview-arrow{
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
}

.substack-carousel{
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
}

.substack-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.substack-title{
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.substack-controls{
  display: flex;
  gap: 8px;
}

.substack-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.substack-entry{
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  text-decoration: none;
  scroll-snap-align: start;
}

.substack-entry__title{
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
}

.substack-entry__meta{
  color: var(--muted);
  font-size: 0.8rem;
}

/* =========================
   Mobile
   Stack columns; clips become horizontal swipe
   ========================= */
/* Keeps the podcast layout readable on smaller screens. */

@media (max-width: 900px){
  :root{
    --clips-col-w: 100%;
    --card-w: min(78vw, 300px);
  }

  main,
  .ebook-page{
    margin: 14px auto;
    padding: 0 14px;
  }

  h1{
    font-size: clamp(1.45rem, 6.2vw, 1.9rem);
    line-height: 1.15;
  }

  h2{
    font-size: clamp(1.1rem, 5.1vw, 1.35rem);
    line-height: 1.2;
  }

  p{
    font-size: 0.97rem;
  }

  .row-head{
    align-items: flex-start;
    gap: 8px;
  }

  .row-title{
    font-size: 1rem;
    margin: 0;
  }

  .row-controls{
    flex-shrink: 0;
  }

  .status{
    font-size: 12px;
  }

  .podcast-topgrid{
    grid-template-columns: 1fr;
  }

  .podcast-page,
  .podcast-page .top-left,
  .podcast-page .top-right,
  .podcast-page .podcast-topgrid,
  .podcast-page .row-block,
  .podcast-page .row-head,
  .podcast-page .row,
  .podcast-page .clips-viewport,
  .podcast-page .clips-rail{
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .podcast-page{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    overscroll-behavior-y: none;
    max-width: 100%;
    padding-bottom: 12px;
  }

  .podcast-page .podcast-title,
  .podcast-page .lede,
  .podcast-page .row-title,
  .podcast-page .card-title,
  .podcast-page .status,
  .podcast-page .nav a{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .podcast-page .row-head{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 8px;
  }

  .podcast-page .row-title{
    flex: 1 1 220px;
    min-width: 0;
    white-space: normal;
  }

  .podcast-page .row-controls{
    flex: 0 0 auto;
    margin-left: 0;
    justify-self: end;
  }

  .podcast-page .row{
    scroll-snap-type: x proximity;
    scroll-padding-right: 10px;
  }

  .podcast-page .clips-rail .card-title{
    max-height: none;
    overflow: visible;
  }

  .top-right{
    width: 100%;
    justify-self: stretch;
    align-self: auto;
    display: block;
  }

  .clips-viewport{
    height: auto;
    overflow: visible;
    flex: 0 0 auto;
    min-height: auto;
  }

  .clips-rail{
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding: 6px 2px 10px;
    scroll-padding-right: 10px;
    width: 100%;
    overscroll-behavior-x: contain;
  }

  .clips-rail .card{
    width: min(52vw, 220px);
    scroll-snap-align: start;
  }

  .preview-head,
  .substack-head{
    align-items: flex-start;
    flex-direction: column;
  }

  .substack-track{
    grid-auto-columns: minmax(78vw, 1fr);
  }

  .modal-card{
    width: min(100vw - 18px, 1000px);
    margin-top: 3vh;
    padding: 12px;
    border-radius: 14px;
  }

  .modal-close{
    width: 40px;
    height: 40px;
  }

  .player-wrap,
  .reader-wrap{
    margin-top: 32px;
  }

  .reader-wrap{
    height: 72vh;
  }
}
/* =========================
   Relative Momentum ebook viewer
   ========================= */
/* Styles for the two-page spread + controls on /pages/writing/relative-momentum/. */

.ebook-page{
  max-width: var(--page-max);
  margin: 22px auto;
  padding: 0 18px;
}

.ebook-page .nav{
  margin-bottom: 18px;
}

.ebook-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 20px;
}

.ebook-title{
  margin: 0 0 6px;
}

.ebook-sub{
  margin: 0;
  color: var(--muted);
}

.ebook-controls{
  display: flex;
  align-items: center;
  gap: 10px;
}

.ebook-meta{
  min-width: 140px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.spread{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}

.page{
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page img{
  width: 100%;
  height: auto;
  max-height: calc(100vh - 320px);
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

/* Make it feel like paper on dark background */
.page{
  background: rgba(255,255,255,.02);
}

.ebook-hint{
  margin-top: 10px;
  color: var(--muted);
}

/* Mobile: single page */
@media (max-width: 900px){
  .ebook-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .spread{
    grid-template-columns: 1fr;
  }

  .page img{
    max-height: calc(100vh - 300px);
  }
}

@media (max-width: 600px){
  .nav{
    gap: 8px;
  }

  .nav .dot{
    display: none;
  }

  .btn,
  button{
    width: 100%;
    justify-content: center;
  }

  .icon-btn{
    width: 40px;
    min-width: 40px;
  }

  .row-controls .icon-btn,
  .substack-controls .icon-btn{
    width: 38px;
    min-width: 38px;
  }

  .preview-grid{
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  .preview-card{
    min-width: min(60vw, 220px);
    scroll-snap-align: start;
  }
}

/* Lightbox */
/* High-resolution page preview overlay for the ebook viewer. */
.lightbox{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 80;
}

.lightbox.open{
  display: block;
}

.lightbox-bg{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
}

.lightbox-card{
  position: relative;
  width: min(1100px, 95vw);
  margin: 5vh auto 0;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.lightbox-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.lightbox-card img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  margin-top: 46px;
}
/* ===== Relative Momentum viewer: FIX stacking + size ===== */

/* 1) Keep controls ABOVE the pages (fix "buttons behind pages") */
.viewer-controls,
.ebook-head,
.loading-indicator {
  position: relative;
  z-index: 10;
}

/* 2) Ensure the spread sits below controls and doesn't overlap */
.spread {
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

/* 3) Hard cap page height so full pages fit on first load */
:root{
  --page-max-height: min(70vh, 680px);
}

/* If your page containers are .page-frame (your earlier version) */
.page-frame{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* If your page containers are .page (your newer CSS section) */
.page{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Apply the max-height to images in either structure */
.page-frame img,
.page img{
  max-height: var(--page-max-height);
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================
   Media pages (Spincline + Photography + Admin)
   ========================= */

.media-section{ margin: 14px 0 20px; }
.media-card{
  width: min(340px, 82vw);
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
}
.media-card-media{ width: 100%; aspect-ratio: 16/9; background: #121212; }
.media-card-media img,
.media-card-media video{ width: 100%; height: 100%; object-fit: cover; display:block; }
.media-card-body{ padding: 10px; }
.media-card-title{ margin: 0 0 6px; font-size: 15px; }
.media-card-description{ margin: 0; font-size: 14px; color: var(--muted); }

.masonry-grid{
  --row-unit: 8px;
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(1, minmax(0,1fr));
  grid-auto-rows: var(--row-unit);
}
@media (min-width: 680px){ .masonry-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }}
@media (min-width: 980px){ .masonry-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }}
@media (min-width: 1280px){ .masonry-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }}

.masonry-tile{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background: var(--panel); }
.masonry-media{ width:100%; background:#121212; display:block; }
.masonry-media img{ width:100%; height:auto; display:block; }
.masonry-caption{ padding:10px; }

.admin-grid{ display:grid; gap:14px; }
.upload-controls{ margin-bottom: 10px; }
.upload-file{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background: var(--panel);
  transform: translateY(6px);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}
.upload-file.visible{ transform: translateY(0); opacity: 1; }
.upload-row{ display:flex; gap:12px; align-items:flex-start; }
.upload-file-meta{ flex:1; min-width: 0; }
.upload-file-meta h3{ margin:0 0 6px; font-size: 1rem; overflow-wrap:anywhere; }
.upload-thumb{ width:72px; height:72px; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#121212; }
.upload-thumb--generic{ display:grid; place-items:center; font-size:24px; }
.upload-fields{ margin-top:10px; }
.upload-file progress{ width:100%; }
.upload-meta{ display:grid; gap:8px; }
.upload-meta input,
.upload-meta textarea,
.upload-meta select,
.upload-meta button{ background:#181818; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:8px; }
.upload-meta button{ cursor:pointer; }
.upload-meta button:disabled{ opacity:.6; cursor:not-allowed; }
.upload-actions-bottom{ margin-top:14px; }
.small-note{ font-size:13px; color:var(--muted); }

.admin-links,
.hidden-pages-grid{
  display:grid;
  gap:14px;
  margin-top:14px;
}

.admin-link-card,
.hidden-page-card{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  padding:14px;
}

.admin-link-card{
  text-decoration:none;
  display:block;
}

.admin-link-card h2,
.hidden-page-card h2{
  margin:0 0 6px;
  font-size:1.1rem;
}

.admin-link-card p,
.hidden-page-card p{
  margin:0 0 8px;
}

.hidden-page-card code{
  word-break:break-word;
}