@import url("typography-system.css?v=20260805a");

/* Shared TokyoStays visual language for secondary pages.
   The homepage remains the source of truth and is intentionally untouched. */
.ts-brand-secondary {
  --ink: #111018;
  --ink-soft: #42404b;
  --muted: #8a8690;
  --paper: #fbfaf7;
  --paper-soft: #f2efe8;
  --card: #fff;
  --border: #e7e1d8;
  --line: #e7e1d8;
  --brand: #d93b45;
  --brand-dark: #9f1f2c;
  --brand-soft: #fff1f3;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ts-brand-secondary .wrap {
  width: 100%;
  max-width: 1180px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 28px;
  padding-left: 28px;
}

.ts-brand-secondary h1,
.ts-brand-secondary h2,
.ts-brand-secondary h3 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
}

.ts-brand-secondary .eyebrow {
  color: var(--brand);
  font-family: "SF Mono", ui-monospace, Consolas, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ts-brand-secondary .hero .eyebrow,
.ts-brand-secondary .section-head .eyebrow,
.ts-brand-secondary .diary-lock .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-brand-secondary .hero .eyebrow::before,
.ts-brand-secondary .section-head .eyebrow::before,
.ts-brand-secondary .diary-lock .eyebrow::before {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  content: "";
}

.ts-brand-secondary .diary-lock .eyebrow {
  justify-content: center;
}

.ts-brand-secondary .btn,
.ts-brand-secondary button[type="submit"] {
  border-radius: 6px;
}

.ts-brand-secondary .btn.blue,
.ts-brand-secondary .btn-brand,
.ts-brand-secondary .trip-actions a.primary,
.ts-brand-secondary .his-card a {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.ts-brand-secondary .btn.blue:hover,
.ts-brand-secondary .btn-brand:hover,
.ts-brand-secondary .trip-actions a.primary:hover,
.ts-brand-secondary .his-card a:hover {
  background: var(--brand-dark);
}

.ts-brand-secondary .panel,
.ts-brand-secondary .preview,
.ts-brand-secondary .feed-card,
.ts-brand-secondary .lock-card,
.ts-brand-secondary .booking-planner,
.ts-brand-secondary .his-section,
.ts-brand-secondary .his-card,
.ts-brand-secondary .trip-card,
.ts-brand-secondary .stat,
.ts-brand-secondary .calendar-card,
.ts-brand-secondary .host-steps {
  border-radius: 12px;
}

.ts-brand-secondary footer {
  border-top: 1px solid var(--border);
  background: var(--paper);
  color: var(--muted);
}

@media (max-width: 620px) {
  .ts-brand-secondary .wrap {
    padding-right: 20px;
    padding-left: 20px;
  }
}