/* Subpage styles for pasaderacapital.com (Stepping Stone archive/issues, valuation).
   Depends on styles.css tokens: --green, --green-dark, --green-deep, --olive,
   --stone, --ink, --body, --paper, --paper-alt, --line, --serif, --sans. */

.subpage .site-header { position: sticky; }

.ss-narrow { max-width: 760px; }

/* dark hero shared by subpages */
.ss-hero { padding: 84px 0 72px; position: relative; overflow: hidden; }
.ss-hero h1 { color: #fff; margin-bottom: 1rem; }
.ss-eyebrow-light { color: #dfe8d2; }
.ss-eyebrow-light::before { background: #dfe8d2 !important; }
.ss-lede-light { color: #e8ecdf; font-size: 1.12rem; max-width: 640px; }
.ss-def-light { font-family: var(--serif); color: #c9d6b8; font-size: 1.1rem; margin-top: 1rem; }
.ss-def-light em { color: #fff; }
.ss-hero-links { margin-top: 1.4rem; font-size: 0.9rem; letter-spacing: 0.04em; }
.ss-hero-links a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.4); text-underline-offset: 3px; }
.ss-hero-links a:hover { text-decoration-color: #fff; }

.ss-h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.9rem; }

/* cards */
.ss-card {
  background: var(--paper-alt);
  border-radius: 10px;
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 1.8rem 0 2.2rem;
}
.ss-card .eyebrow { margin-bottom: 0.6rem; }

/* trajectory */
.ss-chips { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin: 0.6rem 0 1.2rem; }
.ss-chip b { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--green-deep); font-weight: 500; }
.ss-chip span { display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive); margin-top: 0.3rem; }
.ss-bars { margin: 0.4rem 0 1.1rem; max-width: 460px; }
.ss-bar { display: grid; grid-template-columns: 82px 1fr 28px; align-items: center; gap: 0.7rem; margin-bottom: 0.45rem; font-size: 0.85rem; color: var(--body); }
.ss-bar-track { display: block; height: 12px; background: rgba(0,0,0,0.05); border-radius: 2px; overflow: hidden; }
.ss-bar-fill { display: block; height: 100%; }
.ss-bar-n { font-weight: 600; color: var(--ink); }
.ss-note { font-size: 0.8rem; color: var(--olive); line-height: 1.55; margin-top: 0.6rem; }

/* takeaways */
.ss-takeaways { list-style: none; counter-reset: tk; padding: 0; margin: 0.4rem 0 2.4rem; }
.ss-takeaways li { counter-increment: tk; position: relative; padding-left: 2.4rem; margin-bottom: 1rem; line-height: 1.6; }
.ss-takeaways li::before {
  content: counter(tk);
  position: absolute; left: 0; top: 0.15rem;
  width: 1.55rem; height: 1.55rem; border-radius: 4px;
  background: var(--green); color: #fff;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.ss-takeaways strong { color: var(--ink); }

/* deals */
.ss-deal { padding: 1.6rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.ss-deal:last-of-type { border-bottom: 0; }
.ss-deal h3 { font-size: 1.35rem; line-height: 1.3; margin: 0.2rem 0 0.4rem; }
.ss-deal h3 a { color: var(--ink); }
.ss-deal h3 a:hover { color: var(--green-dark); }
.ss-meta { font-size: 0.85rem; color: var(--olive); margin-bottom: 0.4rem; }
.ss-terms { font-size: 0.88rem; margin-bottom: 0.9rem; }
.ss-terms span { font-weight: 600; color: var(--green-deep); margin-right: 0.35rem; }
.ss-deal p { margin-bottom: 0.8rem; }
.ss-source a { font-weight: 600; font-size: 0.9rem; }

/* table */
.ss-table-wrap { overflow-x: auto; margin: 0.6rem 0 0.4rem; border: 1px solid var(--line); border-radius: 6px; }
.ss-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ss-table th { text-align: left; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); background: var(--paper-alt); padding: 0.7rem 0.9rem; }
.ss-table td { padding: 0.65rem 0.9rem; border-top: 1px solid var(--line); vertical-align: top; color: var(--body); }
.ss-table td:first-child a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.ss-table td:first-child a:hover { text-decoration-color: var(--green); }

/* pulse */
.ss-pulse { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.ss-pulse li { position: relative; padding-left: 1.2rem; margin-bottom: 0.7rem; line-height: 1.55; font-size: 0.95rem; }
.ss-pulse li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 6px; height: 6px; background: var(--green); transform: rotate(45deg); }
.ss-pulse a { font-weight: 600; }

/* archive */
.ss-issue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; margin-top: 0.8rem; }
.ss-issue-card { display: block; padding: 1.5rem 1.6rem 1.4rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--body); transition: border-color 0.2s, box-shadow 0.2s; }
.ss-issue-card:hover { border-color: var(--green); box-shadow: 0 8px 28px rgba(38,38,31,0.07); }
.ss-issue-card h3 { font-size: 1.3rem; margin: 0.2rem 0 0.6rem; color: var(--ink); }
.ss-issue-card p { font-size: 0.93rem; }
.ss-read { display: inline-block; margin-top: 0.8rem; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--green-dark); }

/* subscribe */
.ss-subscribe { margin-top: 1.2rem; }
.ss-subscribe-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 0.7rem; }
.ss-subscribe input, .ss-subscribe select {
  font-family: var(--sans); font-size: 0.98rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 0.75rem 0.9rem; width: 100%;
}
.ss-subscribe input:focus, .ss-subscribe select:focus { outline: none; border-color: var(--green); }
.ss-subscribe .btn { cursor: pointer; white-space: nowrap; }
.ss-role { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; font-size: 0.85rem; color: var(--olive); }
.ss-role select { max-width: 280px; }
.ss-thanks { min-height: 60vh; display: flex; align-items: center; }

/* valuation */
.val-form { margin-top: 0.4rem; }
.val-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
.val-grid-2 { margin-top: 0.4rem; }
.val-field { display: block; }
.val-field > span { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 0.45rem; }
.val-field > span em { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; font-style: normal; color: var(--olive); font-size: 0.78rem; margin-top: 0.15rem; }
.val-field input, .val-field select {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 0.75rem 0.9rem;
}
.val-field input:focus, .val-field select:focus { outline: none; border-color: var(--green); }
.val-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin: 1.4rem 0 0.4rem; }
.val-actions .btn { cursor: pointer; }
.val-result { margin-top: 2rem; padding: 1.8rem 1.9rem 1.6rem; background: var(--paper-alt); border-radius: 10px; border-left: 4px solid var(--green); }
.val-range { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--green-deep); line-height: 1.1; margin: 0.2rem 0 0.4rem; }
.val-mult { color: var(--body); margin-bottom: 0.4rem; }
.val-caveat { font-size: 0.9rem; color: var(--olive); line-height: 1.55; }
.val-send { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.val-how { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.val-how p { font-size: 0.95rem; color: var(--body); }
.form-note { font-family: var(--sans); font-size: 0.82rem; color: var(--olive); }

@media (max-width: 640px) {
  .ss-hero { padding: 64px 0 56px; }
  .ss-subscribe-row { grid-template-columns: 1fr; }
  .val-grid { grid-template-columns: 1fr; }
  .ss-card { padding: 1.2rem 1.2rem 1rem; }
}