/* Project reading and support share the discovery page's quiet type hierarchy.
   Flow sheets keep their controls visible while their content scrolls. */
.project-page { max-width: 1280px; }
.project-page .breadcrumb { margin: .75rem 0 1.25rem; min-height: 44px; }
.project-page .back-link { min-height: 44px; font-size: .875rem; }
.project-tools { display: flex; gap: .25rem; }
.project-tools .icon-btn { width: 44px; height: 44px; }
.project-page .project-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: min-content 1fr; grid-template-areas: "visual heading" "visual overview"; gap: 1.25rem 3rem; align-items: start; padding-bottom: 2.75rem; }
.project-page .project-intro { grid-area: heading; }
.project-page .project-intro h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; margin: .625rem 0 .75rem; }
.project-page .project-intro .tagline { font-size: 1.125rem; line-height: 1.5; letter-spacing: -.015em; margin: 0; color: var(--secondary); }
.project-page .project-meta { font-size: .75rem; gap: .5rem .75rem; }
.project-stage { display: inline-flex; align-items: center; gap: .4rem; }
.project-stage .stage-dot { width: 6px; height: 6px; }
.project-page .project-visual { grid-area: visual; margin: 0; }
.project-page .project-visual img { aspect-ratio: 1.08; border-radius: 16px; }
.project-page figcaption { display: flex; flex-wrap: wrap; gap: .375rem .75rem; margin-top: .625rem; font-size: .6875rem; line-height: 1.5; color: var(--muted); }
.project-overview { grid-area: overview; min-width: 0; }
.project-page .project-description { max-width: 52ch; font-size: 1rem; line-height: 1.65; }
.project-engagement { display: grid; gap: .625rem; margin-top: 1.25rem; }
.project-engagement .btn { width: 100%; min-height: 50px; padding: .875rem 1rem; gap: .625rem; border-radius: 12px; font-size: .9375rem; font-weight: 500; line-height: 1.5; text-align: center; }
.project-engagement .btn > span { min-width: 0; }
.project-engagement .btn[aria-pressed="true"] { background: var(--soft-green); border-color: var(--focus); }
.project-facts { margin: 1.25rem 0 0; padding: 0; }
.project-facts > div { display: grid; grid-template-columns: minmax(5.5rem, .8fr) minmax(0, 1.7fr); gap: 1rem; border-top: 1px solid var(--line); padding: .875rem 0; }
.project-facts dt { color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.project-facts dd { font-size: .875rem; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.project-facts dd small { display: inline; margin-left: .5rem; color: var(--muted); font-size: .75rem; }
.project-page .creator-mini { width: 100%; display: flex; text-align: start; padding: .875rem 0; margin: 0; border-top: 1px solid var(--line); gap: .75rem; background: transparent; min-height: 64px; }
.project-page .creator-mini > span:nth-child(2) { flex: 1; min-width: 0; }
.project-page .creator-mini strong { display: block; font-size: .875rem; font-weight: 600; }
.project-page .creator-mini small { font-size: .75rem; line-height: 1.5; margin-top: .125rem; }
.flow-link { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .625rem 0; background: transparent; font-size: .875rem; line-height: 1.5; color: var(--secondary); }
.flow-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.project-page .project-tabs { gap: 2rem; margin-bottom: 0; padding-block: 0; scroll-margin-top: 0; }
.project-page .project-tab { min-height: 52px; font-size: .875rem; padding-block: .875rem; }
.project-page .project-tab.active { font-weight: 600; }
.project-page .detail-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4rem; padding: 2rem 0 3rem; }
.project-page .detail-main h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; margin: 0 0 1rem; }
.project-page .detail-main h3 { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; letter-spacing: -.015em; margin: 0 0 .625rem; }
.project-page .prose { font-size: 1rem; line-height: 1.75; color: var(--secondary); }
.project-section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.project-disclosure { color: var(--muted); font-size: .8125rem; line-height: 1.65; margin: 1rem 0 1.25rem; max-width: 65ch; }
.project-page .detail-main > h2 + .project-disclosure { margin-top: -.375rem; }
.project-page .side-card { background: #eeefe8; border: 0; border-radius: 16px; padding: 1.5rem; margin-bottom: .5rem; }
.project-page .side-card h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin: .5rem 0 .75rem; }
.project-page .side-card p { font-size: .875rem; line-height: 1.65; margin-bottom: 1rem; }
.project-page .side-card .detail-row { font-size: .8125rem; }
.project-page .side-card .btn { margin-top: 1.25rem; font-size: .875rem; }
.project-page .side-card .tiny-note { font-size: .75rem; margin: .875rem 0 0; }
.project-page .report-link { font-size: .75rem; color: var(--muted); width: 100%; }
.project-disclosure-row { border-block-end: 1px solid var(--line); }
.project-disclosure-row > summary { min-height: 52px; padding-block: .875rem; font-size: .875rem; font-weight: 500; line-height: 1.5; }
.project-disclosure-row[open] > summary { margin-bottom: .375rem; }
.project-disclosure-row > p { margin-bottom: 1rem; }
.project-page .creator-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 1.5rem 0; margin: 0; }
.project-page .creator-heading { gap: .75rem; margin-bottom: 1rem; }
.project-page .creator-heading > div { min-width: 0; }
.project-page .creator-heading h3 { font-size: 1.125rem; margin-bottom: .25rem; }
.project-page .creator-heading p { font-size: .8125rem; line-height: 1.5; }
.project-page .avatar.large { width: 44px; height: 44px; font-size: .9375rem; }
.project-page .person-commitment { background: transparent; padding: 0; font-size: .875rem; margin-top: .75rem; }
.project-page .creator-card .project-disclosure-row { border: 0; }
.project-page .creator-card .mini-link { display: inline-flex; min-height: 44px; align-items: center; gap: .375rem; font-size: .875rem; }
.project-page .journey-overview { display: grid; grid-template-columns: 1fr; gap: 0; list-style: none; padding: .5rem 0 1.5rem; margin: 0 0 1.5rem; }
.project-page .journey-step { position: relative; flex-direction: row; gap: .875rem; padding-bottom: 1.25rem; }
.project-page .journey-step:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 13px; top: 28px; bottom: 0; width: 1px; background: #c8cec0; }
.project-page .journey-step:last-child { padding-bottom: 0; }
.project-page .journey-bullet { flex: 0 0 28px; }
.project-page .journey-step strong { font-size: .9375rem; font-weight: 500; }
.project-page .journey-step.current strong { font-weight: 600; }
.project-page .journey-step small { font-size: .75rem; line-height: 1.5; margin-top: .125rem; }
.project-page .timeline-item { margin: 0; padding: 0 0 2rem 1.5rem; }
.project-page .timeline-item h3 { margin: .5rem 0; }
.project-page .timeline-item small { font-size: .75rem; }
.project-page .timeline-item p { font-size: .9375rem; line-height: 1.75; }
.project-page .campaign-summary { border: 0; border-block: 1px solid var(--line); border-radius: 0; background: transparent; padding: 1.25rem 0; margin: 1.5rem 0 0; }
.project-page .campaign-amount { gap: .375rem .75rem; }
.project-page .campaign-amount strong { font-size: 2rem; font-weight: 600; line-height: 1.2; }
.project-page .campaign-amount span { font-size: .8125rem; }
.project-page .campaign-stats { grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: 1rem; margin: 1.25rem 0 1rem; }
.project-page .campaign-stats strong { font-size: 1.125rem; }
.project-page .campaign-stats span { font-size: .75rem; }
.project-page .tiny-note { font-size: .75rem; }
.project-page .funding-facts { margin-top: 0; }
.project-page .funding-facts > div:first-child { border: 0; }
.project-page .budget-list { border: 0; margin: 0 0 1rem; padding: 0; }
.project-page .budget-list .detail-row { font-size: .875rem; }
.project-page .detail-row > * { min-width: 0; overflow-wrap: anywhere; }
.project-page .budget-total { border-bottom: 0; }
.project-page .budget-list strong { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.project-page .project-action-dock { box-shadow: none; }
.project-page .project-action-context strong { font-size: 1rem; }
.project-page .project-action-context > span { font-size: .75rem; line-height: 1.5; }
.project-page .project-primary { font-size: .875rem; border-radius: 12px; }

/* The same reward component is used on campaign pages and in the sheet. */
.project-page .support-rewards, .flow-sheet .support-rewards { display: grid; gap: .75rem; margin: 1rem 0 1.5rem; }
.project-page .support-reward, .flow-sheet .support-reward { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; padding: 1.125rem; border: 1px solid #b5bcae; border-radius: 12px; background: var(--white); text-align: start; width: 100%; min-width: 0; }
.reward-choice-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.support-reward .reward-choice-heading strong { flex: 1 1 9rem; font-size: 1rem; line-height: 1.4; font-weight: 600; }
.support-reward .support-reward-price { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.reward-choice-description { color: var(--muted); font-size: .875rem; line-height: 1.6; }
.reward-choice-link { display: flex; justify-content: space-between; align-items: center; color: var(--secondary); font-size: .8125rem; font-weight: 500; margin-top: .25rem; }
.reward-unavailable .reward-choice-link { color: var(--muted); font-weight: 400; }

.modal-backdrop:has(.flow-sheet) { top: var(--sheet-viewport-top, 0px); bottom: var(--sheet-bottom-inset, 0px); padding: 1.5rem; align-items: center; backdrop-filter: blur(4px); }
.modal.flow-sheet { display: flex; flex-direction: column; width: 520px; max-width: 100%; max-height: min(90dvh, calc(var(--sheet-available-height, 100dvh) - 24px), 850px); padding: 0; overflow: hidden; scrollbar-gutter: auto; border: 0; border-radius: 20px; animation: sheet-in .22s var(--ease-out); }
.flow-toolbar { flex-shrink: 0; min-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: .5rem 1rem .25rem 1.5rem; gap: .5rem; }
.flow-toolbar > span { font-size: .75rem; color: var(--muted); }
.flow-toolbar .modal-close { position: static; width: 44px; height: 44px; min-width: 44px; min-height: 44px; background: #e9ebe3; border-radius: 50%; }
.flow-back { display: inline-flex; gap: .5rem; align-items: center; min-height: 44px; padding: 0; background: transparent; font-size: .875rem; color: var(--secondary); }
.flow-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: .5rem 1.5rem 1.5rem; }
.flow-sheet .flow-heading .eyebrow { font-size: .75rem; margin: 0 0 .5rem; padding: 0; font-weight: 400; }
.flow-sheet .flow-heading h2 { font-size: 1.625rem; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; margin: 0; padding: 0; text-align: start; text-wrap: pretty; overflow-wrap: anywhere; }
.flow-sheet .flow-heading .intro { font-size: .9375rem; line-height: 1.65; margin: .875rem 0 1.25rem; }
.flow-summary { margin: 1.25rem 0; padding: .375rem 0; border-block: 1px solid var(--line); }
.flow-summary > div { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .375rem 1rem; padding: .625rem 0; font-size: .875rem; line-height: 1.6; }
.flow-summary dt { color: var(--muted); flex: 1 1 7rem; }
.flow-summary dd { margin: 0; font-weight: 600; max-width: 100%; font-variant-numeric: tabular-nums; }
.flow-note { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.65; color: var(--muted); }
.flow-risk { margin-top: .75rem; border-bottom: 0; }
.flow-risk > p { font-size: .875rem; line-height: 1.65; color: var(--muted); }
.flow-risk .flow-link { justify-content: flex-start; }
.flow-footer { flex-shrink: 0; padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--line); background: var(--paper); }
.flow-footer .btn { min-height: 50px; padding: .875rem 1rem; font-size: .9375rem; line-height: 1.5; border-radius: 12px; }
.flow-footer .flow-link { width: 100%; margin-top: .375rem; }
.flow-footer-note { font-size: .75rem; line-height: 1.5; text-align: center; color: var(--muted); margin: .5rem 0 0; }
.flow-sheet .field { margin: 1.25rem 0 0; }
.flow-sheet .field label { font-size: .875rem; }
.flow-sheet .field input { min-height: 52px; font-size: 1rem; }
.flow-sheet .field small { font-size: .75rem; }
.flow-check { margin: 1.25rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--ink); cursor: pointer; }
.flow-check input { width: 1.125rem; height: 1.125rem; margin-top: .1875rem; cursor: pointer; }
.flow-sheet .flow-check-field { margin-top: .75rem; }
.flow-sheet .flow-check-field input[aria-invalid="true"] { border-color: #9b3226; }
.flow-check-hint { font-size: .75rem; margin-top: .5rem; }
.flow-sheet .form-error { font-size: .8125rem; margin-block: .5rem; }
.flow-sheet .form-error:empty { display: none; }
.flow-sheet .support-product { gap: .875rem; margin: 1.25rem 0; }
.flow-sheet .support-product img { width: 56px; height: 56px; border-radius: 10px; }
.flow-sheet .support-product strong { font-size: 1rem; font-weight: 600; line-height: 1.5; }
.flow-sheet .support-product span { font-size: .75rem; margin-top: .125rem; }
.flow-success { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--soft-green); color: var(--focus); margin: .25rem 0 1rem; }

/* The platform guide uses the same readable, scrolling sheet as project support. */
.how-steps { display: grid; gap: 1rem; margin: 1.5rem 0; padding-inline-start: 1.5rem; }
.how-steps li { padding-inline-start: .375rem; }
.how-steps li::marker { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.how-steps h3, .how-fees h3, .how-availability h3 { margin: 0 0 .375rem; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.how-steps p, .how-fees > p, .how-availability > p, .how-detail p { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--muted); }
.how-fees, .how-availability { padding-top: 1.25rem; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.how-fees .flow-summary { margin-block: 1rem; border: 0; padding: 0; }
.how-detail { margin-top: 1rem; }
.how-detail > p { margin-bottom: 1rem; }

@media (max-width: 800px) {
  .project-page .project-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "visual" "overview"; gap: 1.25rem; }
  .project-page .project-visual img { aspect-ratio: 1.4; }
  .project-page .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .project-page .project-description { max-width: none; }
}
@media (max-width: 600px) {
  .project-page .breadcrumb { margin: .375rem 0 .625rem; }
  .project-page .project-top { gap: 1.125rem; padding-bottom: 1.5rem; }
  .project-page .project-intro h1 { font-size: 2rem; margin: .5rem 0 .625rem; }
  .project-page .project-intro .tagline { font-size: 1rem; }
  .project-page .project-visual img { aspect-ratio: 1.4; }
  .project-page .project-description { font-size: .9375rem; }
  .project-page .project-facts { margin-top: 1rem; }
  .project-page .project-tabs { display: grid; grid-template-columns: repeat(4, minmax(max-content, 1fr)); gap: 1.25rem; scroll-padding-inline: 20px; }
  .project-page .project-tab { font-size: .8125rem; }
  .project-page .detail-grid { padding-top: 1.5rem; }
  .project-page .side-card { padding: 1.25rem; }
  .project-page .project-action-inner { padding: .75rem 1rem; gap: .75rem; min-height: 0; }
  .project-page .project-action-context strong { font-size: .875rem; }
  .project-page .project-action-context > span { font-size: .6875rem; line-height: 1.45; max-width: none; }
  .project-page .project-primary { padding: .75rem 1rem; min-height: 48px; font-size: .8125rem; }
  .modal-backdrop:has(.flow-sheet) { padding: 0; align-items: flex-end; }
  .modal.flow-sheet { max-width: none; width: 100%; max-height: calc(var(--sheet-available-height, 100dvh) - max(12px, env(safe-area-inset-top, 0px))); border-radius: 20px 20px 0 0; }
  .flow-toolbar { padding-inline: 20px 12px; }
  .flow-content { padding: .5rem 20px 1.25rem; }
  .flow-footer { padding: .875rem 20px max(1rem, env(safe-area-inset-bottom, 0px)); }
  .flow-sheet .support-rewards { margin-bottom: 0; }
}
@media (hover: hover) and (pointer: fine) {
  button.support-reward:hover { border-color: var(--focus); background: #f3f5eb; }
  .project-page .creator-mini:hover { color: var(--focus); }
}
@media (prefers-reduced-motion: reduce) {
  .modal.flow-sheet { animation: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .modal-backdrop:has(.flow-sheet) { backdrop-filter: none; background: rgba(30,35,25,.65); }
}