.desktop-page { display: none; }

.mobile-page {
  width: min(100%, var(--cjb-shell-phone));
  min-height: 100svh;
  margin: 0 auto;
  padding: max(var(--cjb-space-4), env(safe-area-inset-top)) var(--cjb-page-gutter)
    max(var(--cjb-space-7), env(safe-area-inset-bottom));
}

.mobile-nav,
.desktop-nav {
  display: flex;
  min-height: var(--cjb-touch-min);
  align-items: center;
  justify-content: space-between;
  gap: var(--cjb-space-4);
  border-bottom: 1px solid var(--cjb-hairline);
}

.mobile-brand,
.desktop-brand {
  display: grid;
  gap: 1px;
}

.mobile-brand strong,
.desktop-brand strong {
  color: var(--cjb-ink-strong);
  font-family: var(--cjb-font-story);
  font-size: var(--cjb-text-17);
  font-weight: 500;
  letter-spacing: .18em;
}

.mobile-brand span,
.desktop-brand span,
.mobile-step,
.desktop-phase {
  color: var(--cjb-ink-muted);
  font-family: var(--cjb-font-ui);
  font-size: var(--cjb-text-10);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mobile-hero {
  padding: var(--cjb-space-7) 0 var(--cjb-space-5);
}

.mobile-kicker,
.desktop-eyebrow {
  margin: 0 0 var(--cjb-space-3);
  color: var(--cjb-copper);
  font-family: var(--cjb-font-ui);
  font-size: var(--cjb-text-11);
  letter-spacing: .14em;
}

.mobile-hero h1,
.desktop-copy h1 {
  max-width: 12em;
  margin: 0;
  color: var(--cjb-ink-strong);
  font-size: clamp(var(--cjb-title-28), 8.4vw, var(--cjb-title-40));
  font-weight: 500;
  letter-spacing: .02em;
  line-height: var(--cjb-leading-title);
  text-wrap: balance;
}

.mobile-lead,
.desktop-lead {
  margin: var(--cjb-space-4) 0 0;
  color: var(--cjb-ink);
  font-size: var(--cjb-text-15);
  line-height: var(--cjb-leading-body);
}

.mobile-curve,
.desktop-curve {
  margin-top: var(--cjb-space-5);
  padding-block: var(--cjb-space-2);
  border-block: 1px solid var(--cjb-hairline);
}

.mobile-curve svg,
.desktop-curve svg {
  display: block;
  width: 100%;
  height: auto;
}

.mobile-curve-line,
.desktop-curve-line {
  fill: none;
  stroke: var(--cjb-ink-faint);
  stroke-width: 2;
}

.mobile-curve-dot,
.desktop-curve-dot {
  fill: var(--cjb-paper-raised);
  stroke: var(--cjb-copper);
  stroke-width: 2;
}

.mobile-cards,
.desktop-cards {
  display: grid;
  gap: var(--cjb-space-4);
}

.mobile-card,
.desktop-card {
  display: grid;
  color: inherit;
  text-decoration: none;
}

.desktop-card.cjb-button {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.mobile-card {
  grid-template-columns: 88px minmax(0, 1fr);
}

.mobile-thumb,
.desktop-thumb {
  display: block;
  overflow: hidden;
  min-height: 112px;
  border: 1px solid var(--cjb-hairline);
  background-color: var(--cjb-paper-deep);
}

.mobile-thumb img,
.desktop-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.35) sepia(.18) saturate(.68);
}

.mobile-content.cjb-paper-sheet,
.desktop-content.cjb-paper-sheet {
  padding: var(--cjb-space-4);
  border-left: 0;
  box-shadow: none;
}

.mobile-meta,
.desktop-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cjb-space-2);
  color: var(--cjb-ink-muted);
  font-family: var(--cjb-font-ui);
  font-size: var(--cjb-text-10);
  letter-spacing: .08em;
}

.mobile-tag,
.desktop-tag {
  color: var(--cjb-copper-pressed);
}

.closed-tag {
  padding: 3px 6px;
  color: var(--cjb-ink-muted);
  background: var(--cjb-neutral-bg);
  border: 1px solid var(--cjb-line);
  border-radius: var(--cjb-radius-control);
}

.mobile-card h2,
.desktop-card h2 {
  margin: var(--cjb-space-2) 0 0;
  color: var(--cjb-ink-strong);
  font-size: var(--cjb-title-20);
  font-weight: 500;
  line-height: var(--cjb-leading-title);
}

.mobile-card p,
.desktop-card p {
  margin: var(--cjb-space-2) 0 0;
  color: var(--cjb-ink);
  font-size: var(--cjb-text-17);
  line-height: var(--cjb-leading-body);
}

.mobile-action,
.desktop-action {
  display: flex;
  min-height: var(--cjb-touch-min);
  align-items: center;
  justify-content: space-between;
  gap: var(--cjb-space-3);
  margin-top: var(--cjb-space-3);
  color: var(--cjb-copper-pressed);
  border-top: 1px solid var(--cjb-hairline);
  font-family: var(--cjb-font-ui);
  font-size: var(--cjb-text-13);
  font-weight: 600;
}

.mobile-card[href]:hover .mobile-content,
.desktop-card[href]:hover .desktop-content {
  background: var(--cjb-paper);
  border-color: var(--cjb-line-strong);
}

.mobile-card[href]:focus-visible,
.desktop-card[href]:focus-visible {
  outline: 3px solid var(--cjb-focus);
  outline-offset: 4px;
}

.mobile-arrow,
.desktop-arrow {
  font-size: var(--cjb-title-20);
}

.unavailable {
  opacity: .58;
  cursor: not-allowed;
}

.unavailable .mobile-action,
.unavailable .desktop-action {
  color: var(--cjb-ink-faint);
}

.mobile-foot,
.desktop-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cjb-space-3);
  margin-top: var(--cjb-space-6);
  color: var(--cjb-ink-muted);
  font-family: var(--cjb-font-ui);
  font-size: var(--cjb-text-10);
  letter-spacing: .08em;
}

.mobile-foot span + span::before,
.desktop-notes span + span::before {
  content: "·";
  margin-right: var(--cjb-space-3);
  color: var(--cjb-copper);
}

@media (max-width: 390px) {
  .mobile-page { padding-inline: var(--cjb-space-4); }
  .mobile-hero { padding-top: var(--cjb-space-6); }
  .mobile-card { grid-template-columns: 76px minmax(0, 1fr); }
  .mobile-content.cjb-paper-sheet { padding: var(--cjb-space-3); }
}

@media (max-width: 320px) {
  .mobile-page { padding-inline: var(--cjb-space-3); }
  .mobile-card { grid-template-columns: 68px minmax(0, 1fr); }
  .mobile-step { max-width: 8em; text-align: right; }
}

@media (min-width: 760px) {
  .mobile-page { display: none; }

  .desktop-page {
    display: block;
    width: min(100%, var(--cjb-container-poster));
    min-height: 100svh;
    margin: 0 auto;
    padding: max(var(--cjb-space-5), env(safe-area-inset-top)) var(--cjb-page-gutter)
      max(var(--cjb-space-8), env(safe-area-inset-bottom));
  }

  .desktop-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    gap: var(--cjb-space-8);
    align-items: start;
    padding-top: var(--cjb-space-8);
  }

  .desktop-copy {
    position: sticky;
    top: var(--cjb-space-6);
  }

  .desktop-copy h1 { font-size: var(--cjb-title-40); }
  .desktop-lead { max-width: 31em; }

  .desktop-card {
    grid-template-columns: 138px minmax(0, 1fr);
    grid-template-areas:
      "thumb content"
      "thumb action";
  }

  .desktop-thumb { grid-area: thumb; min-height: 192px; }
  .desktop-content { grid-area: content; }
  .desktop-action {
    grid-area: action;
    margin: 0;
    padding: 0 var(--cjb-space-4);
    border: 1px solid var(--cjb-hairline);
    border-top: 0;
    background: var(--cjb-paper-raised);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-card,
  .desktop-card { scroll-behavior: auto; }
}