/**
 * Feature pages (2026-10-11): project pages and Constellation posts.
 * A gradient header with the image shown whole (never cropped), a reading
 * column with an "At a glance" sidebar, and "Keep exploring" cards that match
 * the homepage's In the works cards. Built by _oo_dpf_feature_page().
 * Text colours stay at 7:1 or better on the light backgrounds.
 */

.fp { --fp-line: #e3ded6; --fp-soft: #fbfaf7; --fp-warm: #f3f0ea; --fp-ink: #1a1a1a; --fp-body: #2b2b2b; --fp-muted: #595959; }

/* Header */
.fp-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: center;
  margin: .5rem 0 3rem; padding: 2.75rem; border: 1px solid var(--fp-line); border-radius: 16px;
  background: linear-gradient(180deg, var(--fp-warm) 0%, var(--fp-soft) 55%, #fff 100%); }
.fp-hero--text { grid-template-columns: minmax(0, 1fr); }
.fp-hero--text .fp-hero__text { max-width: 46rem; }
.fp-eyebrow { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--fp-muted); margin: 0 0 .8rem; }
.fp-eyebrow a { color: var(--fp-muted); text-decoration: underline; text-underline-offset: 3px; }
.fp-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.1; margin: 0 0 1rem; color: var(--fp-ink); }
.fp-dek { font-size: 1.2rem; line-height: 1.6; color: #404040; margin: 0; }
.fp-actions { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.fp-actions a { display: inline-block; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--fp-ink);
  font-size: .85rem; font-weight: 600; color: var(--fp-ink); text-decoration: none; }
.fp-actions li:first-child a { background: var(--fp-ink); color: #fff; }
.fp-actions a:hover, .fp-actions a:focus { background: #404040; border-color: #404040; color: #fff; }

/* The image is always shown whole: width or height capped, never cropped. */
.fp-media { margin: 0; display: flex; justify-content: center; }
.fp-media img { display: block; max-width: 100%; max-height: 480px; width: auto; height: auto; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.fp-media--logo { background: #fff; border: 1px solid var(--fp-line); border-radius: 12px; padding: 2.25rem; }
.fp-media--logo img { max-height: 260px; box-shadow: none; border-radius: 0; }

/* Body and sidebar */
.fp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3.5rem; align-items: start; }
.fp-layout--single { grid-template-columns: minmax(0, 46rem); }
.fp-body { font-size: 1.05rem; line-height: 1.75; color: var(--fp-body); }
.fp-body > :first-child { margin-top: 0; }
.fp-body p { margin: 0 0 1.2rem; }
.fp-body h2 { font-size: 1.55rem; line-height: 1.25; margin: 2.75rem 0 1rem; padding-top: 1.75rem; border-top: 1px solid var(--fp-line); color: var(--fp-ink); }
.fp-body h3 { font-size: 1.2rem; margin: 2rem 0 .6rem; color: var(--fp-ink); }
.fp-body a { color: var(--fp-ink); text-decoration: underline; text-decoration-color: #b5aa98; text-underline-offset: 3px; }
.fp-body a:hover { text-decoration-color: var(--fp-ink); }
.fp-body ul { list-style: none; padding-left: 0; margin: 0 0 1.4rem; }
.fp-body ul > li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; }
.fp-body ul > li::before { content: ""; position: absolute; left: .2rem; top: .72em; width: 7px; height: 7px; border-radius: 2px; background: #b5aa98; }
.fp-body ol { list-style: none; counter-reset: fp; padding-left: 0; margin: 0 0 1.6rem; }
.fp-body ol > li { counter-increment: fp; position: relative; padding: 1rem 1.2rem 1rem 3.6rem; margin-bottom: .75rem;
  border: 1px solid var(--fp-line); border-radius: 12px; background: var(--fp-soft); }
.fp-body ol > li::before { content: counter(fp); position: absolute; left: 1rem; top: 1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--fp-ink); color: #fff; font-size: .85rem; font-weight: 600; line-height: 1.8rem; text-align: center; }
.fp-body blockquote { margin: 1.8rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--fp-ink); background: var(--fp-soft); font-size: 1.15rem; }
.fp-body table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.8rem; font-size: .95rem; line-height: 1.5; }
.fp-body th { text-align: left; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-muted); background: var(--fp-warm); }
.fp-body th, .fp-body td { padding: .7rem .9rem; border-bottom: 1px solid var(--fp-line); vertical-align: top; }
.fp-body tr:nth-child(even) td { background: var(--fp-soft); }

.fp-aside { position: sticky; top: 110px; }
.fp-card { border: 1px solid var(--fp-line); border-radius: 12px; background: var(--fp-soft); padding: 1.3rem 1.4rem; margin-bottom: 1.25rem; }
.fp-card h2 { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--fp-muted); margin: 0 0 .8rem; }
.fp-card dl { margin: 0; }
.fp-card dt { font-size: .8rem; color: var(--fp-muted); font-weight: 600; }
.fp-card dd { margin: 0 0 .7rem; font-size: .95rem; color: var(--fp-body); }
.fp-card ul { list-style: none; padding: 0; margin: 0; }
.fp-card li { margin: 0; border-top: 1px solid var(--fp-line); }
.fp-card li:first-child { border-top: 0; }
.fp-card li a { display: block; padding: .55rem 0; font-size: .95rem; color: var(--fp-ink); text-decoration: none; }
.fp-card li a:hover, .fp-card li a:focus { text-decoration: underline; }
.fp-card a { color: var(--fp-ink); }

/* Keep exploring */
.fp-related { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--fp-line); }
.fp-related > h2 { font-size: 1.4rem; margin: 0 0 1.5rem; }
.fp-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.fp-tile { display: flex; flex-direction: column; border: 1px solid var(--fp-line); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--fp-warm) 0%, var(--fp-soft) 55%, #fff 100%); transition: box-shadow .2s, border-color .2s; }
.fp-tile:hover { border-color: #cfc8bc; box-shadow: 0 6px 22px rgba(0, 0, 0, .08); }
.fp-tile__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e9e5de; }
.fp-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-tile__body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.fp-tile__kind { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-muted); font-weight: 600; }
.fp-tile__title { font-size: 1.15rem; line-height: 1.3; margin: .35rem 0 .5rem; }
.fp-tile__title a { color: var(--fp-ink); }
.fp-tile__summary { font-size: .92rem; line-height: 1.55; color: #404040; margin: 0; }

@media (max-width: 991px) {
  .fp-hero { grid-template-columns: minmax(0, 1fr); padding: 2rem 1.5rem; gap: 1.75rem; }
  .fp-media img { max-height: 340px; }
  .fp-media--logo { padding: 1.5rem; }
  .fp-media--logo img { max-height: 180px; }
  .fp-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .fp-aside { position: static; }
  .fp-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .fp-hero { padding: 1.5rem 1.1rem; margin-bottom: 2rem; }
  .fp-related__grid { grid-template-columns: minmax(0, 1fr); }
  .fp-body table { display: block; overflow-x: auto; }
}

/* Constellation landing: regions of cards (2026-10-11). */
.fp-hero .fp-dek p { margin: 0 0 .8rem; }
.fp-region { margin: 0 0 3.5rem; scroll-margin-top: 110px; }
.fp-region > h2 { font-size: 1.6rem; margin: 0 0 .4rem; }
.fp-region__intro { font-size: 1rem; line-height: 1.6; color: #404040; margin: 0 0 1.5rem; max-width: 46rem; }
.fp-tile.is-private { border-style: dashed; }
.fp-private { color: #8a1c1c; }
.fp-actions--quiet a { background: transparent !important; color: #1a1a1a !important; }
.fp-tile__media--logo { background: #fff; border-bottom: 1px solid var(--fp-line); }
.fp-tile__media--logo img { object-fit: contain; padding: 1.25rem; }

/* Status pill above the label (e.g. "In development"), from frontmatter status. */
.fp-status { display: inline-block; margin: 0 0 .9rem; padding: .3rem .75rem; border-radius: 999px; background: #1a1a1a; color: #fff;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

/* Feature-page video above the body copy (frontmatter video:). */
.fp-video { margin: 0 0 1.75rem; }
/* The Brailie base theme hides native controls on every <video> (its
   background-video feature: brailie/style.css, video::-webkit-media-controls
   { display: none !important }). Bring them back for this player, as the
   saved-videos player does. */
.fp-video video::-webkit-media-controls { display: flex !important; }
.fp-video video::-webkit-media-controls-enclosure { display: flex !important; }
.fp-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; }