@omega.js/extension 0.1.0

package/dist/assets/themes/classy/css/marketing/_content.scss

@@ -0,0 +1,1328 @@
+// Classy v2 content surfaces — the shared vocabulary for every default page
+// beyond home/pricing: page heroes, long-form prose, timelines, post cards,
+// person cards, the hairline facts row, and pagination. Ink on paper,
+// hairlines, serif display; motion rides data-omega-* attributes.
+
+// ── Page hero — the content-page opener (lighter than the home hero) ────────
+.omega-page-hero {
+  text-align: center;
+
+  .omega-micro {
+    display: block;
+    margin-bottom: 0.875rem;
+  }
+
+  h1 {
+    margin-inline: auto;
+    margin-bottom: 0;
+    max-width: 22ch;
+    color: var(--omega-ink);
+  }
+
+  .omega-page-hero__sub {
+    max-width: 40rem;
+    margin: 1.125rem auto 0;
+    font-size: 1.03125rem;
+    line-height: 1.6;
+    color: var(--omega-ink-muted);
+  }
+
+  .omega-page-hero__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-top: 1.75rem;
+  }
+}
+
+// ── Prose — long-form reading (blog posts, legal documents, bios) ───────────
+.omega-prose {
+  font-size: 0.9375rem;
+  line-height: 1.75;
+  color: var(--omega-ink-muted);
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--omega-font-display);
+    color: var(--omega-ink);
+    letter-spacing: -0.02em;
+    margin-top: 2.25em;
+    margin-bottom: 0.625em;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h2 {
+    font-size: 1.4375rem;
+    padding-bottom: 0.4375rem;
+    border-bottom: 1px solid var(--omega-line);
+  }
+
+  h3 {
+    font-size: 1.1875rem;
+  }
+
+  h4 {
+    font-size: 1.0625rem;
+  }
+
+  p, ul, ol {
+    margin-bottom: 1.125em;
+  }
+
+  li {
+    margin-bottom: 0.375em;
+  }
+
+  strong {
+    color: var(--omega-ink);
+    font-weight: 600;
+  }
+
+  a {
+    text-decoration: underline;
+    text-decoration-color: color-mix(in srgb, var(--omega-accent) 40%, transparent);
+    text-underline-offset: 0.15em;
+
+    &:hover {
+      text-decoration-color: var(--omega-accent);
+    }
+  }
+
+  hr {
+    margin-block: 2rem;
+    border: 0;
+    border-top: 1px solid var(--omega-line);
+    opacity: 1;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border: 1px solid var(--omega-line);
+    border-radius: var(--omega-radius-l);
+  }
+
+  table {
+    width: 100%;
+    margin-bottom: 1.25em;
+    font-size: 0.875rem;
+
+    th {
+      font-size: 0.6875rem;
+      font-weight: 650;
+      letter-spacing: 0.09em;
+      text-transform: uppercase;
+      color: var(--omega-ink-faint);
+      text-align: start;
+      padding: 0.5rem 0.75rem;
+      border-bottom: 1px solid var(--omega-line-strong);
+    }
+
+    td {
+      padding: 0.5rem 0.75rem;
+      border-bottom: 1px solid var(--omega-line);
+    }
+  }
+}
+
+// ── Timeline — hairline spine + serif year markers (about page) ─────────────
+.omega-timeline {
+  position: relative;
+  max-width: 40rem;
+  margin-inline: auto;
+  padding-inline-start: 2rem;
+  border-inline-start: 1px solid var(--omega-line-strong);
+
+  .omega-timeline__item {
+    position: relative;
+    padding-bottom: 2.25rem;
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+    // The spine dot
+    &::before {
+      content: '';
+      position: absolute;
+      inset-inline-start: -2rem;
+      top: 0.5rem;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      background: var(--omega-surface);
+      border: 2px solid var(--omega-ink);
+      transform: translateX(-50%);
+
+      [dir='rtl'] & {
+        transform: translateX(50%);
+      }
+    }
+  }
+
+  .omega-timeline__year {
+    font-family: var(--omega-font-marketing);
+    font-size: 1.375rem;
+    font-weight: 560;
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+    color: var(--omega-ink);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .omega-timeline__title {
+    margin-top: 0.25rem;
+    font-size: 0.9375rem;
+    font-weight: 650;
+    color: var(--omega-ink);
+  }
+
+  .omega-timeline__desc {
+    margin: 0.25rem 0 0;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    color: var(--omega-ink-muted);
+  }
+}
+
+// ── Post card — the blog grid unit ───────────────────────────────────────────
+// UNBOXED (bronn pattern): a rounded media panel, then a mono meta line,
+// serif title, and short excerpt breathing on the page — no card chrome.
+.omega-post-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .omega-post-card__media {
+    display: block;
+    aspect-ratio: 16 / 10;
+    overflow: hidden;
+    background: var(--omega-surface-2);
+    border: 1px solid var(--omega-line);
+    border-radius: var(--omega-radius-l);
+    transition: border-color var(--omega-speed) var(--omega-ease);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    // No-media posts (post.image: false) — designed pattern panel: dotgrid
+    // ground + an oversized serif monogram from the category/title
+    &.omega-post-card__media--pattern {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-decoration: none;
+    }
+  }
+
+  &:hover .omega-post-card__media {
+    border-color: var(--omega-line-strong);
+  }
+
+  .omega-post-card__monogram {
+    font-family: var(--omega-font-marketing);
+    font-size: 3.25rem;
+    font-weight: 550;
+    font-style: italic;
+    line-height: 1;
+    color: var(--omega-ink-faint);
+    transition: color var(--omega-speed) var(--omega-ease);
+  }
+
+  &:hover .omega-post-card__monogram {
+    color: var(--omega-ink-muted);
+  }
+
+  .omega-post-card__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    gap: 0.5rem;
+    padding: 1rem 0.125rem 0;
+  }
+
+  .omega-post-card__title {
+    margin: 0;
+    font-family: var(--omega-font-marketing);
+    font-size: 1.1875rem;
+    font-weight: 550;
+    letter-spacing: -0.015em;
+    line-height: 1.25;
+
+    a {
+      color: var(--omega-ink);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--omega-accent);
+      }
+    }
+  }
+
+  .omega-post-card__excerpt {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    margin: 0;
+    font-size: 0.84375rem;
+    line-height: 1.6;
+    color: var(--omega-ink-muted);
+  }
+}
+
+// Mono meta line: CATEGORY · DATE (post cards, featured lead, post
+// breadcrumbs, taxonomy mastheads) — root-scoped, reused everywhere
+.omega-post-card__eyebrow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-family: var(--omega-font-mono);
+  font-size: 0.71875rem;
+  letter-spacing: 0.02em;
+  color: var(--omega-ink-faint);
+
+  a {
+    color: var(--omega-ink-muted);
+    text-decoration: none;
+    transition: color var(--omega-speed) var(--omega-ease);
+
+    &:hover {
+      color: var(--omega-accent);
+    }
+  }
+}
+
+// Standalone small avatar (post-page bylines) — kept out of the grid card
+.omega-post-card__avatar {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  border: 1px solid var(--omega-line);
+  overflow: hidden;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  // Author-less posts — neutral mark instead of a broken avatar
+  &.omega-post-card__avatar--fallback {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--omega-surface-2);
+    color: var(--omega-ink-faint);
+  }
+}
+
+// ── Person card — editorial portrait tile (team grid) ───────────────────────
+.omega-person {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+  overflow: hidden;
+  transition: border-color var(--omega-speed) var(--omega-ease), transform var(--omega-speed) var(--omega-ease);
+
+  &:hover {
+    border-color: var(--omega-line-strong);
+    transform: translateY(-2px);
+  }
+
+  // 4:5 portrait — quiet grayscale until you meet them
+  .omega-person__portrait {
+    display: block;
+    aspect-ratio: 4 / 5;
+    background: var(--omega-surface-2);
+    border-bottom: 1px solid var(--omega-line);
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      filter: grayscale(1);
+      transition: filter 0.35s var(--omega-ease);
+    }
+  }
+
+  &:hover .omega-person__portrait img {
+    filter: none;
+  }
+
+  .omega-person__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    padding: 1.25rem 1.375rem 1.375rem;
+  }
+
+  .omega-person__name {
+    margin: 0;
+    font-family: var(--omega-font-marketing);
+    font-size: 1.25rem;
+    font-weight: 550;
+    letter-spacing: -0.015em;
+
+    a {
+      color: var(--omega-ink);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--omega-accent);
+      }
+    }
+  }
+
+  .omega-person__role {
+    margin-top: 0.375rem;
+  }
+
+  .omega-person__desc {
+    margin: 0.75rem 0 0;
+    font-size: 0.84375rem;
+    line-height: 1.6;
+    color: var(--omega-ink-muted);
+  }
+
+  .omega-person__links {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: auto;
+    padding-top: 1rem;
+  }
+}
+
+// Standalone circular avatar (quote attributions, author boxes, member hero)
+.omega-person__avatar {
+  border-radius: 50%;
+  border: 1px solid var(--omega-line-strong);
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+// Small round icon-link (person socials, share rows)
+.omega-icon-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.125rem;
+  height: 2.125rem;
+  border-radius: 50%;
+  color: var(--omega-ink-muted);
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  transition: color var(--omega-speed) var(--omega-ease), border-color var(--omega-speed) var(--omega-ease);
+
+  &:hover {
+    color: var(--omega-ink);
+    border-color: var(--omega-line-strong);
+  }
+
+  svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+}
+
+// ── Facts row — hairline-divided columns (member details, quick stats) ──────
+.omega-facts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+  overflow: hidden;
+
+  @media (min-width: 992px) {
+    grid-template-columns: repeat(var(--omega-facts-cols, 4), minmax(0, 1fr));
+  }
+
+  .omega-facts__item {
+    padding: 1.125rem 1.25rem;
+    border-top: 1px solid var(--omega-line);
+    border-inline-start: 1px solid var(--omega-line);
+
+    // Kill the outer edges the grid creates
+    &:nth-child(2n + 1) {
+      border-inline-start: 0;
+    }
+
+    &:nth-child(-n + 2) {
+      border-top: 0;
+    }
+
+    @media (min-width: 992px) {
+      border-top: 0;
+
+      &:nth-child(2n + 1) {
+        border-inline-start: 1px solid var(--omega-line);
+      }
+
+      &:first-child {
+        border-inline-start: 0;
+      }
+    }
+  }
+
+  .omega-facts__label {
+    display: block;
+    margin-bottom: 0.25rem;
+  }
+
+  .omega-facts__value {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--omega-ink);
+    overflow-wrap: anywhere;
+
+    // Big serif numerals (about-hero rail, stat panels)
+    &.omega-facts__value--num {
+      font-family: var(--omega-font-marketing);
+      font-size: 1.5rem;
+      font-weight: 550;
+      letter-spacing: -0.02em;
+      line-height: 1.15;
+    }
+  }
+
+  .omega-facts__sub {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    color: var(--omega-ink-faint);
+  }
+}
+
+// ── Pagination — hairline segmented control ──────────────────────────────────
+.pagination {
+  --bs-pagination-color: var(--omega-ink-muted);
+  --bs-pagination-bg: var(--omega-surface);
+  --bs-pagination-border-color: var(--omega-line);
+  --bs-pagination-hover-color: var(--omega-ink);
+  --bs-pagination-hover-bg: var(--omega-surface-2);
+  --bs-pagination-hover-border-color: var(--omega-line);
+  --bs-pagination-focus-color: var(--omega-ink);
+  --bs-pagination-focus-bg: var(--omega-surface-2);
+  --bs-pagination-active-color: var(--omega-ground);
+  --bs-pagination-active-bg: var(--omega-ink);
+  --bs-pagination-active-border-color: var(--omega-ink);
+  --bs-pagination-disabled-color: var(--omega-ink-faint);
+  --bs-pagination-disabled-bg: var(--omega-surface);
+  --bs-pagination-disabled-border-color: var(--omega-line);
+
+  .page-link {
+    font-size: 0.84375rem;
+    font-weight: 550;
+  }
+}
+
+// ── Chip cloud — category/tag clusters ───────────────────────────────────────
+.omega-chip-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+
+  a {
+    text-decoration: none;
+    transition: border-color var(--omega-speed) var(--omega-ease), color var(--omega-speed) var(--omega-ease);
+
+    &:hover {
+      color: var(--omega-ink);
+      border-color: var(--omega-line-strong);
+    }
+  }
+}
+
+// ── Blog search — the hairline search pill ───────────────────────────────────
+.omega-blog-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: min(100%, 26rem);
+  padding: 0.375rem 0.375rem 0.375rem 0.875rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: 50rem;
+
+  &:focus-within {
+    border-color: var(--omega-line-strong);
+  }
+
+  .omega-blog-search__icon {
+    color: var(--omega-ink-faint);
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .omega-blog-search__input {
+    flex: 1 1 auto;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    font-size: 0.875rem;
+    color: var(--omega-ink);
+
+    &::placeholder {
+      color: var(--omega-ink-faint);
+    }
+  }
+}
+
+// ── Hero split — asymmetric page opener: statement + side rail ──────────────
+.omega-hero-split {
+  display: grid;
+  gap: 2.5rem;
+  align-items: start;
+
+  @media (min-width: 992px) {
+    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+    gap: 4rem;
+  }
+
+  .omega-hero-split__sub {
+    max-width: 36rem;
+    margin: 1.25rem 0 0;
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    color: var(--omega-ink-muted);
+  }
+}
+
+// ── Photo lead — the picture-first page opener (about hero with an image) ───
+// Narrow: the photo on top, the words beneath it inside the same frame (a
+// scrim can't hold a headline over a phone-sized crop). Wide: the words ride
+// the picture on a bottom scrim, and the scrim REMAPS the ink tokens for its
+// own scope — a photograph looks the same in both modes, so light ink over it
+// is correct in both, and the masthead keeps reading var(--omega-ink).
+.omega-photo-lead {
+  position: relative;
+  margin: 0;
+  overflow: hidden;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-xl);
+  box-shadow: var(--omega-shadow-2);
+
+  .omega-photo-lead__img {
+    display: block;
+    width: 100%;
+    // The ratio is reserved before the lazy swap — no layout shift
+    aspect-ratio: 3 / 2;
+    object-fit: cover;
+    object-position: center;
+
+    @media (min-width: 768px) {
+      aspect-ratio: 16 / 9;
+    }
+  }
+
+  .omega-photo-lead__words {
+    padding: 1.5rem 1.25rem 1.75rem;
+
+    @media (min-width: 768px) {
+      --omega-ink: #f7f7f6;
+      --omega-ink-muted: rgb(247 247 246 / 88%);
+      --omega-ink-faint: rgb(247 247 246 / 74%);
+
+      // Bootstrap's heading/body bridges resolve at :root, so the scrim
+      // re-points them at its own ink or an h1 would stay theme-dark
+      --bs-body-color: var(--omega-ink);
+      --bs-emphasis-color: var(--omega-ink);
+      --bs-heading-color: var(--omega-ink);
+
+      position: absolute;
+      inset-inline: 0;
+      bottom: 0;
+      padding: 9rem 3rem 2.5rem;
+      color: var(--omega-ink);
+      background: linear-gradient(to top, rgb(8 8 9 / 92%) 0%, rgb(8 8 9 / 78%) 34%, rgb(8 8 9 / 38%) 68%, rgb(8 8 9 / 0%) 100%);
+    }
+  }
+
+  .omega-photo-lead__sub {
+    max-width: 46ch;
+    margin: 1rem 0 0;
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    color: var(--omega-ink-muted);
+  }
+}
+
+// The facts rail under the photo lead (the split layout keeps it beside)
+.omega-photo-lead__facts {
+  margin-top: 1.5rem;
+}
+
+// A picture-led opener needs nav clearance, not the statement band's runway:
+// the photo IS the breathing room, so the first screenful stays image + words
+main > section.omega-photo-lead-band:first-of-type {
+  padding-top: 6rem;
+
+  @media (min-width: 992px) {
+    padding-top: 7rem;
+  }
+}
+
+// ── Aside photo — a picture at the head of a duo aside (about letter) ───────
+.omega-aside-photo {
+  margin: 1.25rem 0 0;
+  overflow: hidden;
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+  background: var(--omega-surface-2);
+
+  img {
+    display: block;
+    width: 100%;
+    aspect-ratio: 3 / 2;
+    object-fit: cover;
+  }
+}
+
+// ── Duo — generic asymmetric section: label/head column + body column ───────
+// Column split overridable per use: style="--omega-duo-cols: 5fr 7fr;"
+.omega-duo {
+  display: grid;
+  gap: 2rem;
+
+  @media (min-width: 992px) {
+    grid-template-columns: var(--omega-duo-cols, minmax(0, 4fr) minmax(0, 8fr));
+    gap: 4rem;
+  }
+
+  .omega-duo__aside {
+    @media (min-width: 992px) {
+      position: sticky;
+      top: 6rem;
+      align-self: start;
+    }
+  }
+}
+
+// ── Statement — editorial letter text (big serif, italic emphasis) ──────────
+.omega-statement {
+  margin: 0;
+  font-family: var(--omega-font-marketing);
+  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
+  font-weight: 480;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  color: var(--omega-ink);
+
+  em {
+    font-style: italic;
+    color: inherit;
+  }
+
+  + .omega-statement {
+    margin-top: 1.5rem;
+  }
+}
+
+// ── Numbered list — editorial values/principles (serif index numerals) ──────
+.omega-numbered {
+  display: grid;
+  gap: 0 3rem;
+
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .omega-numbered__item {
+    padding: 1.5rem 0 1.625rem;
+    border-top: 1px solid var(--omega-line);
+  }
+
+  .omega-numbered__index {
+    display: block;
+    margin-bottom: 0.875rem;
+    font-family: var(--omega-font-marketing);
+    font-style: italic;
+    font-size: 1.375rem;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--omega-ink-faint);
+  }
+
+  .omega-numbered__title {
+    margin-bottom: 0.375rem;
+    font-size: 0.984375rem;
+    font-weight: 650;
+    letter-spacing: -0.01em;
+    color: var(--omega-ink);
+  }
+
+  .omega-numbered__desc {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.65;
+    color: var(--omega-ink-muted);
+  }
+}
+
+// ── Channel rows — contact methods / support routes ─────────────────────────
+.omega-channel {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1.25rem 0;
+  border-top: 1px solid var(--omega-line);
+  text-decoration: none;
+
+  &:last-child {
+    border-bottom: 1px solid var(--omega-line);
+  }
+
+  .omega-channel__body {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .omega-channel__title {
+    margin-bottom: 0.125rem;
+    font-size: 0.9375rem;
+    font-weight: 650;
+    letter-spacing: -0.01em;
+    color: var(--omega-ink);
+  }
+
+  .omega-channel__desc {
+    margin: 0;
+    font-size: 0.84375rem;
+    line-height: 1.55;
+    color: var(--omega-ink-muted);
+  }
+
+  .omega-channel__arrow {
+    align-self: center;
+    color: var(--omega-ink-faint);
+    transition: color var(--omega-speed) var(--omega-ease), transform var(--omega-speed) var(--omega-ease);
+  }
+
+  @media (hover: hover) {
+    &:hover .omega-channel__arrow {
+      color: var(--omega-ink);
+      transform: translateX(3px);
+    }
+
+    &:hover .omega-channel__title {
+      color: var(--omega-accent);
+    }
+  }
+}
+
+// ── Masthead — section opener with actions on the same baseline ─────────────
+.omega-masthead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1.5rem 2.5rem;
+
+  .omega-masthead__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+  }
+}
+
+// ── Tab rail — underline tabs (blog categories, filters) ────────────────────
+.omega-tabs {
+  display: flex;
+  gap: 1.5rem;
+  border-bottom: 1px solid var(--omega-line);
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  a {
+    padding: 0.625rem 0.125rem;
+    margin-bottom: -1px;
+    font-size: 0.875rem;
+    font-weight: 550;
+    white-space: nowrap;
+    color: var(--omega-ink-muted);
+    text-decoration: none;
+    border-bottom: 2px solid transparent;
+    transition: color var(--omega-speed) var(--omega-ease), border-color var(--omega-speed) var(--omega-ease);
+
+    &:hover {
+      color: var(--omega-ink);
+    }
+
+    &.active {
+      color: var(--omega-ink);
+      border-bottom-color: var(--omega-ink);
+    }
+  }
+}
+
+// ── Row list — hairline-divided single-line rows (bronn "what we offer") ────
+.omega-rowlist {
+  .omega-rowlist__item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.375rem 2rem;
+    padding: 1.125rem 0.125rem;
+    border-bottom: 1px solid var(--omega-line);
+    font-size: 0.9375rem;
+    color: var(--omega-ink);
+
+    &:first-child {
+      border-top: 1px solid var(--omega-line);
+    }
+  }
+
+  // Linked rows (category indexes, offer lists)
+  a.omega-rowlist__item {
+    font-weight: 600;
+    text-decoration: none;
+    transition: color var(--omega-speed) var(--omega-ease);
+
+    &:hover {
+      color: var(--omega-accent);
+
+      .omega-rowlist__meta,
+      .omega-rowlist__desc {
+        color: var(--omega-ink-muted);
+      }
+    }
+  }
+
+  // The row's secondary line (#563: a competitor's own description) — under
+  // the title, in the row's first cell, never picking up the link weight.
+  .omega-rowlist__desc {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    color: var(--omega-ink-muted);
+    transition: color var(--omega-speed) var(--omega-ease);
+  }
+
+  .omega-rowlist__meta {
+    flex-shrink: 0;
+    font-size: 0.78125rem;
+    color: var(--omega-ink-faint);
+    transition: color var(--omega-speed) var(--omega-ease);
+  }
+}
+
+// ── Fragments — small believable product objects for page compositions ──────
+// (bronn hero pattern: a journal-entry card + a reviewer chip, overlapped)
+.omega-fragment {
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+  box-shadow: var(--omega-shadow-2);
+  padding: 1rem 1.125rem;
+
+  .omega-fragment__label {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+
+  .omega-fragment__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    padding: 0.4375rem 0;
+    border-top: 1px solid var(--omega-line);
+    font-size: 0.8125rem;
+    color: var(--omega-ink-muted);
+
+    strong {
+      font-weight: 600;
+      color: var(--omega-ink);
+    }
+
+    .omega-fragment__num {
+      font-family: var(--omega-font-mono);
+      font-size: 0.78125rem;
+      color: var(--omega-ink);
+    }
+  }
+}
+
+// Conversation rows inside a fragment (support-chat objects)
+.omega-fragment__msg {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.5625rem 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--omega-ink-muted);
+
+  strong {
+    font-weight: 600;
+    color: var(--omega-ink);
+  }
+
+  .omega-fragment__msg-mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-top: 0.0625rem;
+    border-radius: 50%;
+    background: var(--omega-surface-2);
+    border: 1px solid var(--omega-line);
+    color: var(--omega-ink-faint);
+
+    svg {
+      width: 0.625rem;
+      height: 0.625rem;
+    }
+  }
+
+  + .omega-fragment__msg {
+    border-top: 1px solid var(--omega-line);
+  }
+}
+
+// Typing indicator (inside a fragment conversation) — three dots pulsing in
+// sequence; reduced-motion holds them steady.
+.omega-typing {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding-block: 0.375rem;
+
+  > span {
+    width: 0.3125rem;
+    height: 0.3125rem;
+    border-radius: 50%;
+    background: var(--omega-ink-faint);
+    animation: omega-typing 1.2s var(--omega-ease) infinite;
+
+    &:nth-child(2) {
+      animation-delay: 0.15s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.3s;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    > span {
+      animation: none;
+    }
+  }
+}
+
+@keyframes omega-typing {
+  0%,
+  60%,
+  100% {
+    opacity: 0.35;
+    transform: none;
+  }
+
+  30% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+// Small floating status chip (pairs with a fragment card)
+.omega-fragment-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5625rem 0.8125rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-m);
+  box-shadow: var(--omega-shadow-2);
+  font-size: 0.78125rem;
+  font-weight: 600;
+  color: var(--omega-ink);
+
+  .omega-fragment-chip__sub {
+    font-weight: 500;
+    color: var(--omega-ink-faint);
+  }
+}
+
+// ── Featured post — the magazine lead (blog index, page 1), unboxed ─────────
+.omega-featured-post {
+  display: grid;
+  gap: 1.25rem 2.5rem;
+
+  @media (min-width: 992px) {
+    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+    align-items: center;
+  }
+
+  .omega-featured-post__media {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // Pin the width to the grid track: with aspect-ratio + min-height and an
+    // auto width, the media derives its width from its height (22rem × 16/9 =
+    // 39.1rem) and spills past the 7fr track, painting under the text column
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    background: var(--omega-surface-2);
+    border: 1px solid var(--omega-line);
+    border-radius: var(--omega-radius-xl);
+    overflow: hidden;
+    text-decoration: none;
+    transition: border-color var(--omega-speed) var(--omega-ease);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    @media (min-width: 992px) {
+      min-height: 22rem;
+    }
+  }
+
+  &:hover .omega-featured-post__media {
+    border-color: var(--omega-line-strong);
+  }
+
+  .omega-featured-post__monogram {
+    font-family: var(--omega-font-marketing);
+    font-style: italic;
+    font-size: 5.5rem;
+    font-weight: 550;
+    line-height: 1;
+    color: var(--omega-ink-faint);
+    transition: color var(--omega-speed) var(--omega-ease);
+  }
+
+  &:hover .omega-featured-post__monogram {
+    color: var(--omega-ink-muted);
+  }
+
+  .omega-featured-post__body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.875rem;
+    padding: 0 0.125rem;
+  }
+
+  .omega-featured-post__title {
+    margin: 0;
+    font-family: var(--omega-font-marketing);
+    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
+    font-weight: 550;
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+
+    a {
+      color: var(--omega-ink);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--omega-accent);
+      }
+    }
+  }
+
+  .omega-featured-post__desc {
+    margin: 0;
+    font-size: 0.9375rem;
+    line-height: 1.65;
+    color: var(--omega-ink-muted);
+  }
+
+  .omega-featured-post__meta {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    margin-top: 0.375rem;
+    font-size: 0.78125rem;
+    color: var(--omega-ink-faint);
+  }
+}
+
+// ── Band — one wide hairline row (enterprise, platform rows, promo strips) ──
+.omega-band {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.25rem 2rem;
+  padding: 1.5rem 1.75rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+
+  .omega-band__body {
+    flex: 1 1 22rem;
+    min-width: 0;
+  }
+
+  .omega-band__title {
+    margin-bottom: 0.25rem;
+    font-size: 1rem;
+    font-weight: 650;
+    letter-spacing: -0.01em;
+    color: var(--omega-ink);
+  }
+
+  .omega-band__desc {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    color: var(--omega-ink-muted);
+  }
+
+  // Feature list reads ACROSS the row (the band is wide, not tall) — the
+  // enterprise row's short proof list
+  .omega-band__features {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem 1.5rem;
+    margin: 0.875rem 0 0;
+    padding: 0;
+    list-style: none;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--omega-ink-muted);
+
+    // The bullet's check is `.omega-feature-check` — one home in
+    // core/css/core/_utilities.scss, shared with the plan cards above and the
+    // account page's change-plan modal.
+    li {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    .cursor-help {
+      text-decoration-color: var(--omega-ink-faint) !important;
+      text-underline-offset: 0.1875em;
+    }
+  }
+
+  .omega-band__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+  }
+}
+
+// The enterprise tier wears the band under the price cards — a touch roomier
+// than a promo strip, and its name reads at plan-name size
+.omega-band--enterprise {
+  padding: 1.75rem;
+  gap: 1.25rem 2.5rem;
+
+  .omega-band__title {
+    font-size: 1.1875rem;
+  }
+}
+
+// ── Form panel — the hairline container every long form sits in ─────────────
+.omega-form-panel {
+  padding: 1.75rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-xl);
+
+  @media (min-width: 768px) {
+    padding: 2.25rem;
+  }
+}
+
+// Ad units carry NO theme chrome: the card inside the frame owns bg, border
+// and radius, so a theme radius here only clips the card's own corners.
+
+// ============================================
+// Photo band — the about page's life-in-pictures collage: one wide tile
+// (lazy @bg) + supporting stills (lazy responsive @srcset), captions as
+// glassy micro pills.
+// ============================================
+.omega-photo-band {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+
+  @media (min-width: 992px) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25rem;
+  }
+
+  .omega-photo-band__tile {
+    position: relative;
+    margin: 0;
+    height: 16rem;
+    overflow: hidden;
+    background-color: var(--omega-surface-2);
+    background-size: cover; // the @bg tile paints here on lazy-load
+    background-position: center;
+    border: 1px solid var(--omega-line);
+    border-radius: var(--omega-radius-l);
+
+    @media (min-width: 992px) {
+      height: 19rem;
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    &.omega-photo-band__tile--wide {
+      @media (min-width: 992px) {
+        grid-column: span 2;
+        height: 22rem;
+      }
+    }
+  }
+
+  .omega-photo-band__caption {
+    position: absolute;
+    left: 0.875rem;
+    bottom: 0.875rem;
+    padding: 0.25rem 0.625rem;
+    font-size: 0.6875rem;
+    font-weight: 650;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #f5f5f4;
+    background: rgba(17, 18, 19, 0.55);
+    backdrop-filter: blur(6px);
+    border-radius: var(--omega-radius-pill, 50rem);
+  }
+}