create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/src/styles/sections/content.css

@@ -0,0 +1,304 @@
+/* ── 12D · Content & Storytelling ──────────────────────────────────────────
+   Type, spacing and media ratios are owned by the system; start / end
+   everywhere so every layout mirrors in RTL. */
+.nv-content .nv-section-head:has(+ *) { margin-block-end: var(--space-6); }
+
+/* ── 01 rich-text — centred + narrow by default; split 5 / 7 from 1024. */
+.nv-rich-text__inner { display: grid; gap: var(--space-5); max-width: var(--nv-measure, 56ch); margin-inline: auto; }
+.nv-rich-text[data-measure='content'] { --nv-measure: 72ch; }
+.nv-rich-text[data-measure='standard'] { --nv-measure: var(--container-standard); }
+.nv-rich-text[data-align='left'] .nv-rich-text__inner { margin-inline: 0; }
+.nv-rich-text .nv-section-head { margin: 0; }
+.nv-rich-text__body { display: grid; gap: var(--space-5); justify-items: inherit; }
+.nv-rich-text[data-align='center'] .nv-rich-text__body { justify-items: center; }
+.nv-rich-text__prose { font-size: var(--type-body-lg); line-height: var(--leading-loose); color: var(--color-fg-muted); }
+@media (min-width: 1024px) {
+  .nv-rich-text[data-layout='split'] .nv-rich-text__inner { grid-template-columns: 5fr 7fr; gap: var(--space-8); max-width: none; align-items: start; text-align: start; }
+  .nv-rich-text[data-layout='split'] .nv-rich-text__body { justify-items: start; }
+}
+@media (max-width: 639.98px) {
+  .nv-rich-text__button { width: 100%; }
+  /* A centred body over ~3 lines is hard to read: start-aligned on phone. */
+  .nv-rich-text[data-align='center'][data-long] .nv-rich-text__prose { text-align: start; }
+}
+
+/* ── 02 image-with-text — 6 / 6 or 7 / 5 on the 12-column grid, gap 80. */
+.nv-iwt__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-9); align-items: center; }
+.nv-iwt[data-media-width='large'] .nv-iwt__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
+.nv-iwt[data-media='end'] .nv-iwt__media { order: 2; }
+.nv-iwt[data-media='end'][data-media-width='large'] .nv-iwt__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
+/* Legacy left / right render physically (do not mirror in RTL). */
+[dir='rtl'] .nv-iwt[data-physical][data-media='left'] .nv-iwt__media { order: 2; }
+[dir='rtl'] .nv-iwt[data-physical][data-media='right'] .nv-iwt__media { order: 0; }
+.nv-iwt[data-media='none'] .nv-iwt__grid { grid-template-columns: minmax(0, var(--container-content)); justify-content: center; }
+.nv-iwt[data-valign='top'] .nv-iwt__grid { align-items: start; }
+.nv-iwt__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-iwt[data-ratio='square'] .nv-iwt__media { aspect-ratio: 1; }
+.nv-iwt[data-ratio='landscape'] .nv-iwt__media { aspect-ratio: 3 / 2; }
+.nv-iwt__media .nv-hero-media { --nv-media-control-block: var(--space-4); --nv-media-control-inline: var(--space-4); }
+.nv-iwt__copy { display: grid; gap: var(--space-4); justify-items: start; max-width: 480px; }
+.nv-iwt__copy[data-align='center'] { justify-items: center; text-align: center; margin-inline: auto; }
+.nv-iwt__copy .nv-section-head { margin: 0; }
+.nv-iwt__copy .nv-section-head .nv-h2 { font-size: var(--type-h1); line-height: var(--leading-h1); }
+.nv-iwt__body { color: var(--color-fg-muted); font-size: var(--type-body-lg); line-height: var(--leading-loose); }
+.nv-iwt__button { margin-block-start: var(--space-2); }
+/* muted panel (12 radius, 48 padding); overlap slides it 64 over the image. */
+.nv-iwt[data-panel='muted'] .nv-iwt__copy { max-width: none; padding: var(--space-7); border-radius: var(--radius-lg); background: var(--color-bg-muted); }
+@media (min-width: 1024px) {
+  .nv-iwt[data-overlap] .nv-iwt__grid { gap: 0; }
+  .nv-iwt[data-overlap] .nv-iwt__copy { position: relative; z-index: var(--z-raised); margin-inline-start: calc(-1 * var(--space-8)); }
+  .nv-iwt[data-overlap][data-media='end'] .nv-iwt__copy { margin-inline: 0 calc(-1 * var(--space-8)); }
+}
+@media (max-width: 1023.98px) {
+  .nv-iwt__grid, .nv-iwt[data-media-width='large'] .nv-iwt__grid, .nv-iwt[data-media='end'][data-media-width='large'] .nv-iwt__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
+  .nv-iwt .nv-iwt__media, [dir='rtl'] .nv-iwt[data-physical] .nv-iwt__media { order: 0; }
+  .nv-iwt[data-mobile-media='after'] .nv-iwt__media { order: 2; }
+  .nv-iwt__copy { max-width: none; }
+}
+@media (max-width: 639.98px) {
+  .nv-iwt[data-ratio='adapt'] .nv-iwt__media { aspect-ratio: 4 / 5 !important; }
+  .nv-iwt__button { width: 100%; }
+  .nv-iwt[data-panel='muted'] .nv-iwt__copy { padding: var(--space-5); }
+}
+
+/* ── 03 multicolumn — 2–4 points; divider = a hairline above each column. */
+.nv-multicolumn__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--nv-cols), minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
+.nv-multicolumn__item { display: grid; gap: var(--space-4); align-content: start; }
+.nv-multicolumn[data-style='divider'] .nv-multicolumn__item { padding-block-start: var(--space-5); border-block-start: var(--border-subtle); }
+.nv-multicolumn[data-align-text='center'] .nv-multicolumn__item { justify-items: center; text-align: center; }
+/* justify-self: the box has no intrinsic width (its img is absolute), so a start/center-justified item collapsed it to 0 px. */
+.nv-multicolumn__media { justify-self: stretch; position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-multicolumn__list[data-ratio='square'] .nv-multicolumn__media { aspect-ratio: 1; }
+.nv-multicolumn__list[data-ratio='portrait'] .nv-multicolumn__media { aspect-ratio: 4 / 5; }
+.nv-multicolumn__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.nv-multicolumn__text { display: grid; gap: var(--space-2); justify-items: inherit; }
+.nv-multicolumn__title { font-size: var(--type-h4); line-height: var(--leading-h4); font-weight: var(--weight-heading); }
+.nv-multicolumn__body { color: var(--color-fg-muted); }
+.nv-multicolumn__link { margin-block-start: var(--space-2); color: var(--color-fg); font-size: var(--type-body-sm); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset-lg); }
+@media (min-width: 640px) and (max-width: 1023.98px) {
+  .nv-multicolumn__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 639.98px) {
+  /* Image-left rows (1:1 thumbnails) scan faster than tall stacks. */
+  .nv-multicolumn:not([data-mobile-carousel]) .nv-multicolumn__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
+  .nv-multicolumn:not([data-mobile-carousel]) .nv-multicolumn__item[data-has-image] { grid-template-columns: 5.75rem minmax(0, 1fr); align-items: start; text-align: start; justify-items: start; }
+  .nv-multicolumn:not([data-mobile-carousel]) .nv-multicolumn__item[data-has-image] .nv-multicolumn__media { aspect-ratio: 1; }
+  .nv-multicolumn[data-align-text='center'] .nv-multicolumn__item { justify-items: start; text-align: start; }
+  .nv-multicolumn[data-mobile-carousel] .nv-multicolumn__list { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 2 * var(--card-gap-x)) / var(--carousel-peek)); gap: var(--card-gap-x); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
+  .nv-multicolumn[data-mobile-carousel] .nv-multicolumn__item { scroll-snap-align: start; }
+}
+
+/* ── 04 feature-grid-blocks — bento; row heights 160 / 220 / 300. */
+.nv-fgb { --nv-row: 220px; }
+.nv-fgb[data-row='small'] { --nv-row: 160px; }
+.nv-fgb[data-row='large'] { --nv-row: 300px; }
+.nv-fgb__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--nv-cols), minmax(0, 1fr)); grid-auto-rows: minmax(var(--nv-row), auto); gap: var(--space-3); }
+.nv-fgb[data-preset='1+4'] .nv-fgb__grid { grid-template-columns: 2fr 1fr 1fr; }
+.nv-fgb[data-preset='1+2'] .nv-fgb__grid { grid-template-columns: 2fr 1fr; }
+.nv-fgb[data-preset='2+2'] .nv-fgb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.nv-fgb__tile[data-lead] { grid-row: span 2; }
+.nv-fgb__tile { position: relative; isolation: isolate; display: flex; min-width: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-muted); color: var(--color-fg); }
+.nv-fgb__tile[data-bg='primary'] { background: var(--color-bg-inverse); color: var(--color-fg-inverse); }
+.nv-fgb__tile[data-bg='image'] { color: var(--color-fg-inverse); }
+.nv-fgb__tile[data-kind='image'] { background: var(--color-media-bg); }
+.nv-fgb__tile .nv-hero-media { z-index: -1; }
+/* The media sits under the copy, so the copy lets clicks through to the video's
+   pause/play control — except on its own links. */
+.nv-fgb__tile:has(> .nv-hero-media) :is(.nv-fgb__content, .nv-fgb__scrim) { pointer-events: none; }
+.nv-fgb__tile:has(> .nv-hero-media) .nv-fgb__content :is(a, button) { pointer-events: auto; }
+/* Text on an image: the 62% floor from the text edge. */
+.nv-fgb__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(0 0 0 / var(--overlay-text-floor-body)) 0%, rgb(0 0 0 / var(--overlay-text-floor-body)) 30%, rgb(0 0 0 / 0) 75%); }
+.nv-fgb__content { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); width: 100%; padding: var(--space-5); }
+.nv-fgb__tile[data-kind] .nv-fgb__content { justify-content: flex-end; }
+.nv-fgb__tile[data-kind='image'] .nv-fgb__content { padding: 0; }
+.nv-fgb__tile[data-lead] .nv-fgb__content { justify-content: flex-end; padding: var(--space-6); }
+.nv-fgb__text { display: grid; gap: var(--space-1); margin-block-start: auto; }
+.nv-fgb__title { font-size: var(--type-h5); line-height: var(--leading-h5); font-weight: var(--weight-heading); }
+.nv-fgb__tile[data-lead] .nv-fgb__title { font-size: var(--type-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
+.nv-fgb__body { font-size: var(--type-body-sm); opacity: 0.85; }
+.nv-fgb__link { width: fit-content; color: inherit; font-size: var(--type-body-sm); text-decoration: underline; text-underline-offset: var(--underline-offset); }
+@media (min-width: 640px) and (max-width: 1023.98px) {
+  .nv-fgb .nv-fgb__grid, .nv-fgb[data-preset] .nv-fgb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .nv-fgb__tile[data-lead] { grid-column: 1 / -1; grid-row: auto; min-height: calc(var(--nv-row) * 1.5); }
+}
+@media (max-width: 639.98px) {
+  .nv-fgb .nv-fgb__grid, .nv-fgb[data-preset] .nv-fgb__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
+  .nv-fgb__tile { min-height: 9rem; }
+  .nv-fgb__tile[data-lead] { grid-row: auto; min-height: 16rem; }
+}
+
+/* ── 05 feature-highlights — the one-line service strip; 2 × 2 at 390. */
+.nv-highlights__list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(var(--nv-cols), minmax(0, 1fr)); gap: var(--space-5); max-width: var(--nv-measure, none); }
+.nv-highlights[data-measure='narrow'] { --nv-measure: var(--container-narrow); }
+.nv-highlights[data-measure='content'] { --nv-measure: var(--container-content); }
+.nv-highlights__item { display: flex; align-items: flex-start; gap: var(--space-3); }
+.nv-highlights[data-align-text='center'] .nv-highlights__item { flex-direction: column; align-items: center; text-align: center; }
+.nv-highlights__icon { display: inline-grid; place-items: center; flex: none; }
+.nv-highlights[data-icon-style='outline'] .nv-highlights__icon { width: var(--space-7); height: var(--space-7); border-radius: var(--radius-circle); box-shadow: inset 0 0 0 var(--border-width) var(--color-border); }
+.nv-highlights[data-icon-style='filled-circle'] .nv-highlights__icon { width: var(--space-7); height: var(--space-7); border-radius: var(--radius-circle); background: var(--color-bg-muted); }
+.nv-highlights__text { display: grid; gap: var(--space-1); padding-block-start: var(--space-1); }
+.nv-highlights__title { font-size: var(--type-body-sm); font-weight: var(--weight-medium); }
+.nv-highlights__detail { font-size: var(--type-label); color: var(--color-fg-muted); }
+@media (max-width: 639.98px) {
+  .nv-highlights__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+/* ── 06 faq — beside = heading 4 / 12 + list 8 / 12; above < 1024. */
+.nv-faq__grid { display: grid; gap: var(--space-6); }
+.nv-faq[data-layout='above'] .nv-faq__grid { max-width: var(--nv-measure, var(--container-content)); margin-inline: auto; }
+.nv-faq[data-measure='narrow'] { --nv-measure: var(--container-narrow); }
+.nv-faq[data-measure='standard'] { --nv-measure: var(--container-standard); }
+.nv-faq .nv-section-head { margin: 0; }
+.nv-faq__list { border-block-start: var(--border-subtle); }
+@media (min-width: 1024px) {
+  .nv-faq[data-layout='beside'] .nv-faq__grid { grid-template-columns: 4fr 8fr; gap: var(--space-8); align-items: start; }
+}
+
+/* ── 07 collection-links — chips (40 · 44 at 390, pill) or a list with arrows. */
+.nv-links__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.nv-links__list[data-align='center'] { justify-content: center; }
+.nv-links[data-style='chips'] .nv-links__link {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--space-6);
+  padding-block: var(--space-1);
+  padding-inline: var(--space-4);
+  border-radius: var(--radius-pill);
+  box-shadow: inset 0 0 0 var(--border-width) var(--color-border-input);
+  color: var(--color-fg);
+  font-size: var(--type-body-sm);
+  font-weight: var(--weight-medium);
+  text-decoration: none;
+  white-space: nowrap;
+}
+.nv-links[data-style='chips'] .nv-links__link { min-height: 40px; }
+.nv-links[data-style='chips'] .nv-links__link:hover { background: var(--color-bg-muted); }
+.nv-links[data-style='list'] .nv-links__list { display: grid; grid-template-columns: repeat(var(--nv-cols), minmax(0, 1fr)); column-gap: var(--space-6); }
+.nv-links[data-style='list'] .nv-links__link {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-3);
+  padding-block: var(--space-3);
+  border-block-end: var(--border-subtle);
+  color: var(--color-fg);
+  font-size: 1.375rem;
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-h3);
+  text-decoration: none;
+}
+.nv-links[data-size='medium'] .nv-links__link { font-size: 1.125rem; }
+.nv-links__more { margin-block-start: var(--space-4); min-height: var(--touch-target); color: var(--color-fg); font-size: var(--type-body-sm); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset-lg); cursor: pointer; }
+@media (max-width: 639.98px) {
+  /* contain: the strip scrolls; it never sizes the page. */
+  .nv-links[data-style='chips'] .nv-links__list { contain: inline-size; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline-end: calc(-1 * var(--page-gutter)); padding-inline-end: var(--page-gutter); }
+  .nv-links[data-style='chips'] .nv-links__link { min-height: var(--touch-target); }
+  .nv-links[data-style='list'] .nv-links__list { grid-template-columns: minmax(0, 1fr); }
+  .nv-links[data-style='list'] .nv-links__link { font-size: 1.25rem; }
+}
+
+/* ── 08 image-gallery — bento · grid-2x2 · 3-up · carousel; swipe at 390. */
+.nv-gallery-section { --nv-gap: var(--space-3); }
+.nv-gallery-section[data-gap='sm'] { --nv-gap: 6px; }
+.nv-gallery-section__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nv-gap); }
+.nv-gallery-section[data-layout='bento'] .nv-gallery-section__grid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 2.2; }
+.nv-gallery-section[data-layout='bento'] .nv-gallery-section__item:first-child { grid-row: span 2; }
+.nv-gallery-section[data-layout='bento-3'] .nv-gallery-section__grid { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1.8; }
+.nv-gallery-section[data-layout='bento-3'] .nv-gallery-section__item:first-child { grid-row: span 2; }
+.nv-gallery-section:is([data-layout='bento'], [data-layout='bento-3']) .nv-gallery-section__item:nth-child(n + 6) { display: none; }
+.nv-gallery-section:is([data-layout='bento'], [data-layout='bento-3']) :is(.nv-gallery-section__figure, .nv-gallery-section__media) { height: 100%; aspect-ratio: auto !important; }
+.nv-gallery-section[data-layout='grid-2x2'] .nv-gallery-section__grid, .nv-gallery-section[data-layout='two'] .nv-gallery-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.nv-gallery-section[data-layout='3-up'] .nv-gallery-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.nv-gallery-section[data-layout='carousel'] .nv-gallery-section__grid { grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--nv-gap)) / 3.3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
+.nv-gallery-section[data-layout='carousel'] .nv-gallery-section__item { scroll-snap-align: start; }
+.nv-gallery-section__figure { margin: 0; display: grid; gap: var(--space-2); }
+.nv-gallery-section__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-gallery-section[data-ratio='square'] .nv-gallery-section__media { aspect-ratio: 1; }
+.nv-gallery-section[data-ratio='portrait'] .nv-gallery-section__media { aspect-ratio: 4 / 5; }
+.nv-gallery-section[data-ratio='landscape'] .nv-gallery-section__media { aspect-ratio: 3 / 2; }
+.nv-gallery-section__media img, .nv-gallery-section__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.nv-gallery-section__link { display: block; position: absolute; inset: 0; }
+.nv-gallery-section__play.nv-icon-btn { position: absolute; inset: 0; margin: auto; }
+.nv-gallery-section__zoom.nv-icon-btn { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); }
+@media (hover: hover) and (pointer: fine) {
+  .nv-gallery-section__zoom.nv-icon-btn { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
+  .nv-gallery-section__media:hover .nv-gallery-section__zoom.nv-icon-btn, .nv-gallery-section__zoom.nv-icon-btn:focus-visible { opacity: 1; }
+}
+.nv-gallery-section__chip { position: absolute; inset-block-end: var(--space-3); inset-inline-start: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-fg); font-size: var(--type-label); font-weight: var(--weight-medium); max-width: calc(100% - 2 * var(--space-3)); }
+.nv-gallery-section__caption { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-gallery-section__count { display: none; }
+@media (max-width: 639.98px) {
+  /* Swipe with a counter at 390 (every preset). */
+  .nv-gallery-section .nv-gallery-section__grid, .nv-gallery-section[data-layout] .nv-gallery-section__grid {
+    grid-template-columns: none;
+    grid-template-rows: none;
+    grid-auto-flow: column;
+    grid-auto-columns: 85%;
+    contain: inline-size;
+    aspect-ratio: auto;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+  }
+  .nv-gallery-section .nv-gallery-section__item { grid-row: auto !important; display: block !important; scroll-snap-align: start; }
+  .nv-gallery-section:is([data-layout='bento'], [data-layout='bento-3']) :is(.nv-gallery-section__figure) { height: auto; }
+  .nv-gallery-section:is([data-layout='bento'], [data-layout='bento-3']) .nv-gallery-section__media { aspect-ratio: 4 / 5 !important; height: auto; }
+  .nv-gallery-section__count { display: block; margin-block-start: var(--space-3); font-size: var(--type-label); color: var(--color-fg-muted); }
+}
+
+/* ── 09 timeline — an ordered list; horizontal with a line, vertical < 1024. */
+.nv-timeline__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--nv-cols), minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
+.nv-timeline__step { position: relative; display: grid; gap: var(--space-4); align-content: start; }
+.nv-timeline__marker {
+  position: relative;
+  z-index: var(--z-raised);
+  display: inline-grid;
+  place-items: center;
+  width: var(--space-6);
+  height: var(--space-6);
+  border-radius: var(--radius-circle);
+  box-shadow: inset 0 0 0 1.5px var(--color-fg);
+  background: var(--color-bg);
+  font-size: var(--type-label);
+  font-weight: var(--weight-strong);
+}
+.nv-timeline__step[data-first] .nv-timeline__marker { background: var(--color-fg); color: var(--color-bg); }
+.nv-timeline[data-numbering='none'] .nv-timeline__marker { width: var(--space-3); height: var(--space-3); margin: var(--space-2) var(--space-2); }
+/* The connecting line. */
+.nv-timeline[data-layout='horizontal'] .nv-timeline__step:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  inset-block-start: calc(var(--space-6) / 2);
+  inset-inline: calc(var(--space-6) + var(--space-3)) calc(-1 * var(--space-6) + var(--space-3));
+  height: 1px;
+  background: var(--color-border);
+}
+.nv-timeline__text { display: grid; gap: var(--space-2); }
+/* A grid item stretches to its row, which overrides aspect-ratio: pin the height to the ratio. */
+.nv-timeline__img { width: 100%; height: auto; align-self: start; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-media); margin-block-end: var(--space-2); }
+.nv-timeline__label { font-size: var(--type-label); color: var(--color-fg-muted); }
+.nv-timeline__title { font-size: var(--type-h4); line-height: var(--leading-h4); font-weight: var(--weight-heading); }
+.nv-timeline__body { color: var(--color-fg-muted); font-size: var(--type-body-sm); line-height: var(--leading-snug); }
+.nv-timeline[data-layout='vertical'] .nv-timeline__list { grid-template-columns: minmax(0, 1fr); max-width: var(--container-content); gap: var(--space-6); }
+.nv-timeline[data-layout='vertical'] .nv-timeline__step,
+.nv-timeline .nv-timeline__step { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); }
+.nv-timeline[data-layout='horizontal'] .nv-timeline__step { grid-template-columns: minmax(0, 1fr); }
+.nv-timeline[data-layout='vertical'] .nv-timeline__step:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: calc(var(--space-6) / 2);
+  inset-block: calc(var(--space-6) + var(--space-2)) calc(-1 * var(--space-6) + var(--space-2));
+  width: 1px;
+  background: var(--color-border);
+}
+@media (max-width: 1023.98px) {
+  .nv-timeline[data-layout] .nv-timeline__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
+  .nv-timeline[data-layout] .nv-timeline__step { grid-template-columns: auto minmax(0, 1fr); }
+  .nv-timeline[data-layout] .nv-timeline__step:not(:last-child)::before {
+    inset-inline: auto;
+    inset-inline-start: calc(var(--space-6) / 2);
+    inset-block: calc(var(--space-6) + var(--space-2)) calc(-1 * var(--space-6) + var(--space-2));
+    width: 1px;
+    height: auto;
+  }
+}

package/templates/nova/src/styles/sections/editorial.css

@@ -0,0 +1,131 @@
+/* ── 12E · Editorial & Long-form ──────────────────────────────────────────── */
+
+/* Long-form header (page / article): title 48 → 32 at the text measure. */
+.nv-longhead { display: grid; gap: var(--space-4); width: 100%; max-width: var(--container-narrow); margin-inline: auto; margin-block-end: var(--space-7); }
+.nv-longhead[data-measure='content'] { max-width: var(--container-content); }
+.nv-longhead[data-measure='standard'] { max-width: var(--container-standard); }
+.nv-longhead[data-align='center'] { text-align: center; justify-items: center; }
+.nv-longhead__title { font-size: var(--type-h1); line-height: 1.08; letter-spacing: var(--tracking-h1); font-weight: var(--weight-heading); text-wrap: balance; }
+.nv-longhead__title[data-size='small'] { font-size: var(--type-h2); line-height: var(--leading-h2); }
+.nv-longhead__title[data-size='medium'] { font-size: clamp(1.75rem, calc(1.75rem + (100vw - 24.375rem) * 0.01893), 2.5rem); }
+.nv-root :lang(th) .nv-longhead__title, .nv-root:lang(th) .nv-longhead__title, .nv-root[dir='rtl'] .nv-longhead__title { letter-spacing: 0; line-height: var(--leading-h3); }
+
+/* ── 02 article-body */
+.nv-article__back { display: none; }
+.nv-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-article__meta > span + span::before { content: '·'; margin-inline-end: var(--space-3); }
+.nv-article__tag { display: inline-flex; align-items: center; min-height: var(--space-6); padding-inline: var(--space-3); border-radius: var(--radius-pill); background: var(--color-bg-muted); color: var(--color-fg); font-weight: var(--weight-medium); text-decoration: none; }
+.nv-article__standfirst { font-size: 1.1875rem; line-height: 1.5; color: var(--color-fg-muted); }
+.nv-article__author { display: flex; align-items: center; gap: var(--space-3); font-size: var(--type-body-sm); }
+.nv-article__author > span:last-child { display: grid; }
+.nv-article__author-name { font-weight: var(--weight-medium); }
+.nv-article__author-meta { color: var(--color-fg-muted); }
+.nv-article__monogram { display: inline-grid; place-items: center; flex: none; width: var(--touch-target); height: var(--touch-target); border-radius: var(--radius-circle); background: var(--color-bg-muted); font-size: var(--type-label); font-weight: var(--weight-strong); }
+.nv-article__image { margin: 0 auto var(--space-7); max-width: var(--container-content); aspect-ratio: 16 / 9; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-article__image img { width: 100%; height: 100%; object-fit: cover; }
+.nv-article__hero { margin-block-end: var(--space-6); }
+.nv-article__hero .nv-media-frame { --nv-hero-h: var(--hero-height-medium); border-radius: var(--radius-media); }
+.nv-article__hero .nv-longhead { margin-block: var(--space-5) 0; }
+.nv-article__hero .nv-media-frame .nv-longhead { max-width: var(--container-narrow); margin: 0; }
+.nv-article__body { position: relative; }
+.nv-article__contents { max-width: var(--container-narrow); margin: 0 auto var(--space-6); font-size: var(--type-body-sm); }
+.nv-article__contents summary { min-height: var(--touch-target); display: flex; align-items: center; font-weight: var(--weight-medium); cursor: pointer; }
+.nv-article__contents ol { display: grid; gap: var(--space-2); padding-inline-start: var(--space-5); color: var(--color-fg-muted); }
+.nv-article__contents a { display: inline-flex; align-items: center; min-block-size: 24px; color: inherit; }
+@media (min-width: 1280px) {
+  /* Beside the text, sticky, when there is room. */
+  .nv-article__body[data-contents] .nv-article__contents { position: absolute; inset-inline-start: 0; inset-block: 0; width: 13rem; margin: 0; }
+  .nv-article__body[data-contents] .nv-article__contents details { position: sticky; top: var(--space-6); }
+}
+.nv-article__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: var(--container-narrow); margin: var(--space-7) auto 0; padding-block-start: var(--space-5); border-block-start: var(--border-subtle); }
+.nv-article__foot[data-measure='content'] { max-width: var(--container-content); }
+.nv-article__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.nv-article__tags a { display: inline-flex; align-items: center; min-height: var(--space-6); padding-inline: var(--space-3); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--border-width) var(--color-border-input); color: var(--color-fg); font-size: var(--type-body-sm); text-decoration: none; }
+@media (max-width: 639.98px) {
+  .nv-article__back { display: block; margin-block-end: var(--space-4); }
+  .nv-article__image { margin-inline: calc(-1 * var(--page-gutter)); max-width: none; aspect-ratio: 4 / 3; border-radius: 0; }
+  .nv-article__hero .nv-media-frame { border-radius: 0; margin-inline: calc(-1 * var(--page-gutter)); }
+  .nv-article__contents details:not([open]) ol { display: none; }
+  .nv-article__tags a { min-height: var(--touch-target); }
+}
+
+/* ── 03 blog-posts — card grid; the lead is split 7 / 5 or an overlay. */
+.nv-blog__tags { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.nv-blog__tag { min-height: 40px; padding-inline: var(--space-4); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--border-width) var(--color-border-input); color: var(--color-fg); font-size: var(--type-body-sm); font-weight: var(--weight-medium); cursor: pointer; }
+.nv-blog__tag[aria-pressed='true'] { background: var(--color-fg); color: var(--color-bg); box-shadow: none; }
+.nv-blog__lead { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-7); align-items: center; padding-block: var(--space-5) var(--space-6); margin-block-end: var(--space-6); border-block: var(--border-subtle); }
+.nv-blog__lead[data-no-image] { grid-template-columns: minmax(0, 1fr); }
+.nv-blog__lead[data-style='overlay'] { display: block; padding: 0; border: 0; }
+.nv-blog__lead[data-style='overlay'] .nv-media-frame { --nv-hero-h: 420px; border-radius: var(--radius-media); }
+.nv-blog__lead-media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-blog__lead-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.nv-blog__lead-text { display: grid; gap: var(--space-3); }
+.nv-blog__lead-title { font-size: var(--type-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-weight: var(--weight-heading); text-wrap: balance; }
+.nv-blog__lead-excerpt { color: var(--color-fg-muted); }
+.nv-blog__read { font-size: var(--type-body-sm); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset-lg); }
+.nv-blog__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--nv-blog-cols, 3), minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
+.nv-blog[data-columns='2'] { --nv-blog-cols: 2; }
+.nv-blog[data-columns='4'] { --nv-blog-cols: 4; }
+.nv-blog__pages { display: flex; justify-content: center; margin-block-start: var(--space-7); }
+.nv-blog__empty { max-width: var(--container-narrow); margin-inline: auto; padding-block: var(--space-7); text-align: center; color: var(--color-fg-muted); }
+@media (max-width: 1023.98px) {
+  .nv-blog__grid { --nv-blog-cols: 2; }
+  .nv-blog__lead { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
+}
+@media (max-width: 639.98px) {
+  .nv-blog__tags { contain: inline-size; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
+  .nv-blog__tag { min-height: var(--touch-target); white-space: nowrap; }
+  .nv-blog__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
+  .nv-blog__lead { border: 0; padding: 0; }
+  .nv-blog__lead[data-style='overlay'] .nv-media-frame { aspect-ratio: 4 / 5; }
+  .nv-blog__lead-title { font-size: var(--type-h3); }
+}
+
+/* ── 04 team-founders */
+.nv-team__founder { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: center; }
+.nv-team[data-media='end'] .nv-team__founder .nv-person__portrait { order: 2; }
+.nv-team__founder-text { display: grid; gap: var(--space-2); max-width: 34rem; }
+.nv-team__eyebrow { font-size: var(--type-body-sm); color: var(--color-fg-muted); margin-block-end: var(--space-3); }
+.nv-team__quote { margin: 0 0 var(--space-4); font-size: var(--type-h2); line-height: 1.3; letter-spacing: var(--tracking-h2); font-weight: var(--weight-heading); text-wrap: balance; }
+.nv-person__portrait { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-media); overflow: hidden; background: var(--color-bg-muted); }
+.nv-person__portrait[data-shape='square'] { aspect-ratio: 1; }
+.nv-person__portrait[data-shape='circle'] { aspect-ratio: 1; border-radius: var(--radius-circle); }
+.nv-person__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
+.nv-person__initials { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-fg-muted); font-size: var(--type-h3); font-weight: var(--weight-medium); }
+.nv-person__name { font-size: var(--type-body); font-weight: var(--weight-medium); }
+.nv-person__role { font-size: 0.78125rem; color: var(--color-fg-muted); }
+.nv-person__bio { font-size: var(--type-body-sm); color: var(--color-fg-muted); margin-block-start: var(--space-3); }
+.nv-person__link { margin-block-start: var(--space-3); color: var(--color-fg); font-size: var(--type-body-sm); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset-lg); justify-self: start; }
+.nv-team__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--nv-cols), minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
+.nv-person { display: grid; gap: var(--space-3); align-content: start; }
+.nv-person__text { display: grid; gap: var(--space-1); }
+.nv-team[data-layout='list'] .nv-team__list { gap: 0 var(--space-6); }
+.nv-team[data-layout='list'] .nv-person { grid-template-columns: var(--touch-target) minmax(0, 1fr); align-items: center; gap: var(--space-4); padding-block: var(--space-3); border-block-end: var(--border-subtle); }
+.nv-team[data-layout='list'] .nv-person__initials { font-size: var(--type-label); }
+@media (max-width: 1023.98px) {
+  .nv-team__founder { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
+  .nv-team[data-media='end'] .nv-team__founder .nv-person__portrait { order: 0; }
+  .nv-team__quote { font-size: var(--type-h3); }
+}
+@media (max-width: 639.98px) {
+  .nv-team__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .nv-team[data-layout='list'] .nv-team__list { grid-template-columns: minmax(0, 1fr); }
+}
+
+/* ── 05 before-after — heading beside (end / start) or the comparison full width. */
+.nv-before-after__grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-8); align-items: center; }
+.nv-before-after .nv-section-head { margin: 0; }
+.nv-before-after[data-media='start'] .nv-before-after__media { order: -1; }
+.nv-before-after[data-media='start'] .nv-before-after__grid { grid-template-columns: 8fr 4fr; }
+.nv-before-after[data-media='full'] .nv-before-after__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
+.nv-before-after[data-media='full'] .nv-before-after__media { max-width: var(--container-content); width: 100%; margin-inline: auto; }
+.nv-before-after__media { min-width: 0; }
+.nv-before-after__list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; contain: inline-size; }
+.nv-before-after__list > li { scroll-snap-align: start; }
+.nv-before-after__figure { margin: 0; display: grid; gap: var(--space-3); }
+.nv-before-after__caption { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-before-after__count { margin-block-start: var(--space-3); font-size: var(--type-label); color: var(--color-fg-muted); }
+@media (max-width: 1023.98px) {
+  .nv-before-after__grid, .nv-before-after[data-media] .nv-before-after__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
+  .nv-before-after[data-media] .nv-before-after__media { order: 0; }
+}