@misoto22/folio 0.16.0 → 0.17.1

package/dist/website-media.css

@@ -18,8 +18,8 @@
 
 .folio-media-detail-page { min-block-size: 100svh; }
 .folio-media-masthead { padding-block: clamp(4.5rem, 8vw, 6.5rem) clamp(1.75rem, 3.5vw, 2.75rem); }
-.folio-media-eyebrow { margin: 0; color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; }
-.folio-media-masthead-title { max-inline-size: 22ch; margin: 0.75rem 0 0; color: var(--foreground); font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 2.875rem); font-weight: 300; letter-spacing: -0.034em; line-height: 1.04; text-wrap: balance; }
+.folio-media-eyebrow { margin: 0; color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.16em * var(--label-tracking-scale)); text-transform: var(--label-case); }
+.folio-media-masthead-title { max-inline-size: 22ch; margin: 0.75rem 0 0; color: var(--foreground); font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 2.875rem); font-weight: var(--display-weight); letter-spacing: -0.034em; line-height: 1.04; text-wrap: balance; }
 .folio-media-description { max-inline-size: 52ch; margin-block: 1.25rem 0; color: var(--foreground-muted); font-size: 1rem; line-height: 1.7; }
 .folio-media-gallery-content { padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(4rem, 9vw, 8rem); }
 .folio-media-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.75rem, 5.5vw, 4.5rem) 1.5rem; margin: 0; padding: 0; list-style: none; }
@@ -33,13 +33,13 @@
 .folio-media-pager-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
 .folio-media-gallery-caption { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; gap: 0.25rem 0.625rem; padding-block-start: 0.875rem; }
 .folio-media-gallery-index,
-.folio-media-gallery-location { overflow: hidden; color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-overflow: ellipsis; white-space: nowrap; }
-.folio-media-gallery-location { grid-column: 2; letter-spacing: 0.14em; }
-.folio-media-gallery-title { display: -webkit-box; overflow: hidden; color: var(--foreground); font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 300; line-height: 1.22; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.folio-media-gallery-location { overflow: hidden; color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.1em * var(--label-tracking-scale)); text-overflow: ellipsis; white-space: nowrap; }
+.folio-media-gallery-location { grid-column: 2; letter-spacing: calc(0.14em * var(--label-tracking-scale)); }
+.folio-media-gallery-title { display: -webkit-box; overflow: hidden; color: var(--foreground); font-family: var(--font-heading); font-size: 0.9375rem; font-weight: var(--display-weight); line-height: 1.22; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .folio-media-gallery-mount { block-size: auto; aspect-ratio: 1; }
 
 .folio-photograph-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 8vw, 7rem); }
-.folio-photograph-feature-title { margin-block: 1rem; color: var(--foreground); font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 4rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.08; }
+.folio-photograph-feature-title { margin-block: 1rem; color: var(--foreground); font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 4rem); font-weight: var(--display-weight); letter-spacing: -0.035em; line-height: 1.08; }
 .folio-photograph-feature-action { margin-block-start: 2rem; }
 .folio-photograph-feature-figure { min-inline-size: 0; margin: 0; }
 .folio-photograph-feature-image img { display: block; inline-size: 100%; block-size: auto; object-fit: contain; }
@@ -48,7 +48,7 @@
 .folio-media-detail { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem); }
 .folio-media-index-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--border-subtle); }
 .folio-media-index-bar > :is(a, button) { min-inline-size: 44.25px; min-block-size: 44.25px; }
-.folio-media-index { color: var(--foreground-muted); font-family: var(--font-mono); font-size: 0.6875rem; font-variant-numeric: tabular-nums; letter-spacing: 0.13em; }
+.folio-media-index { color: var(--foreground-muted); font-family: var(--label-font); font-size: 0.6875rem; font-variant-numeric: tabular-nums; letter-spacing: calc(0.13em * var(--label-tracking-scale)); }
 .folio-media-spread { display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 29vw, 27rem); align-items: start; gap: clamp(1.5rem, 3.5vw, 4.5rem); padding-block: clamp(1.5rem, 3.5vw, 3.75rem); }
 .folio-media-well { display: flex; min-inline-size: 0; align-items: flex-start; }
 .folio-media-frame {
@@ -76,7 +76,7 @@
 .folio-media-metadata > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding-block: 0.6875rem; border-block-end: 1px solid var(--border-subtle); }
 .folio-media-metadata > div:first-child { padding-block-start: 0.6875rem; }
 .folio-media-metadata > div:last-child { padding-block-end: 0.6875rem; border-block-end: 1px solid var(--border-subtle); }
-.folio-media-metadata dt { flex: none; color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; }
+.folio-media-metadata dt { flex: none; color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.14em * var(--label-tracking-scale)); text-transform: var(--label-case); }
 .folio-media-metadata dd { min-inline-size: 0; margin: 0; color: var(--foreground); font-family: var(--font-mono); font-size: 0.78125rem; text-align: end; overflow-wrap: anywhere; }
 .folio-media-light { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-block: 1.1rem; border-block-end: 1px solid var(--border-subtle); }
 .folio-media-light-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; color: var(--foreground-muted); font-family: var(--font-mono); font-size: 0.6875rem; }
@@ -117,7 +117,7 @@
 .folio-media-lightbox-close { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 40%, transparent); }
 .folio-media-lightbox-close:hover { border-color: var(--on-dark); }
 .folio-media-lightbox-close:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }
-.folio-media-lightbox-caption { position: absolute; inset-block-end: 1.25rem; inset-inline: 1.25rem; overflow: hidden; margin: 0; color: var(--on-dark); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
+.folio-media-lightbox-caption { position: absolute; inset-block-end: 1.25rem; inset-inline: 1.25rem; overflow: hidden; margin: 0; color: var(--on-dark); font-family: var(--label-font); font-size: 0.6875rem; letter-spacing: calc(0.13em * var(--label-tracking-scale)); text-transform: var(--label-case); text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
 
 .folio-media-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: clamp(2rem, 4vw, 3.5rem); border-block-start: 1px solid var(--border-color); border-block-end: 1px solid var(--border-subtle); }
 .folio-media-pager-link { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); min-block-size: 44px; align-items: center; gap: 1rem; padding-block: 1.125rem; padding-inline-end: 1.5rem; color: inherit; text-decoration: none; }
@@ -127,10 +127,10 @@
 .folio-media-pager-link[data-direction='next'] .folio-media-pager-copy { text-align: end; }
 .folio-media-pager-image { position: relative; display: block; block-size: 3.25rem; overflow: hidden; background: var(--background-elevated); }
 .folio-media-pager-image img { object-fit: contain; }
-.folio-media-pager-label { display: block; color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; }
-.folio-media-pager-title { display: block; overflow: hidden; margin-block-start: 0.3125rem; color: var(--foreground); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 300; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
+.folio-media-pager-label { display: block; color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.16em * var(--label-tracking-scale)); text-transform: var(--label-case); }
+.folio-media-pager-title { display: block; overflow: hidden; margin-block-start: 0.3125rem; color: var(--foreground); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: var(--display-weight); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
 .folio-media-thumbnails { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); border-block-start: 1px solid var(--border-subtle); }
-.folio-media-thumbnails h2 { margin-block: 0 0.75rem; color: var(--foreground-muted); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; }
+.folio-media-thumbnails h2 { margin-block: 0 0.75rem; color: var(--foreground-muted); font-family: var(--label-font); font-size: 0.6875rem; font-weight: 400; letter-spacing: calc(0.13em * var(--label-tracking-scale)); text-transform: var(--label-case); }
 .folio-media-thumbnail-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.4rem, 1vw, 0.8rem); }
 .folio-media-thumbnail { position: relative; min-inline-size: 44px; min-block-size: 44px; aspect-ratio: 1; overflow: hidden; background: var(--background-elevated); }
 .folio-media-thumbnail img { object-fit: contain; }
@@ -171,7 +171,7 @@
 .folio-media-map-pin[data-active] > span,
 .folio-media-map-marker:hover .folio-media-map-pin > span { transform: scale(1.3); }
 .folio-media-map-frame-compact { display: grid; gap: 0.75rem; margin-block-start: 1.5rem; }
-.folio-media-map-label { color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; }
+.folio-media-map-label { color: var(--secondary-text); font-family: var(--label-font); font-size: 0.625rem; letter-spacing: calc(0.14em * var(--label-tracking-scale)); text-transform: var(--label-case); }
 .folio-media-map-frame-compact .folio-media-map-stage { block-size: 9.375rem; }
 .folio-media-map-frame-compact .folio-media-map-stage img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
 .folio-media-map-frame-compact .folio-media-map-pin { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); }

package/dist/website-metrics.css

@@ -1,6 +1,6 @@
 .folio-metrics-range { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; border-block: 1px solid var(--rule); padding-block: 1rem; margin-block-start: 2rem; }
 .folio-metrics-section { padding-block: clamp(3rem, 6vw, 5rem); }
-.folio-metrics-section__header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; padding-block-end: 1rem; margin-block-end: 1.5rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-metrics-section__header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; padding-block-end: 1rem; margin-block-end: 1.5rem; border-block-end: 1px solid var(--rule-divider); }
 .folio-metrics-panel { min-inline-size: 0; }
 .folio-metrics-panel > header { margin-block-end: 1.25rem; }
 .folio-metrics-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }

package/dist/website-music.css

@@ -20,7 +20,7 @@
 .folio-media-collection__copy h3 a { font: inherit; white-space: normal; text-align: start; }
 .folio-media-collection__metadata { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
 .folio-music-section { min-inline-size: 0; }
-.folio-music-section__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-music-section__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-divider); }
 .folio-music-section__collections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); }
 @media (min-width: 640px) { .folio-media-row { gap: 1rem; }.folio-media-collection { grid-template-columns: 9rem minmax(0, 1fr); }.folio-media-collection__copy { padding-inline: 1.5rem; } }
 @media (min-width: 768px) { .folio-media-feature { grid-template-columns: minmax(15rem, 5fr) minmax(0, 7fr); }.folio-music-section__collections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

package/dist/website-portfolio.css

@@ -20,11 +20,11 @@
   .folio-portfolio-intro { max-inline-size: var(--w-page); margin-inline: auto; padding: clamp(7.5rem, 11vw, 10rem) var(--page-pad) clamp(3rem, 7vw, 5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .85fr); align-items: stretch; gap: clamp(3rem, 7vw, 7rem); }
   .folio-portfolio-intro-copy { display: flex; flex-direction: column; align-items: start; }
   .folio-portfolio-byline { display: flex; align-items: center; gap: 1.25rem; }
-  .folio-portfolio-byline h1 { font-weight: 300; font-size: clamp(2.7rem, 5vw, 4rem); }
+  .folio-portfolio-byline h1 { font-weight: var(--display-weight); font-size: clamp(2.7rem, 5vw, 4rem); }
   .folio-portfolio-monogram { display: grid; place-items: center; inline-size: 44px; block-size: 44px; flex: none; border: 1px solid var(--rule); border-radius: var(--radius-pill); color: var(--ink-3-aa); font-family: var(--mono); font-size: .7rem; }
   .folio-portfolio-biography { max-inline-size: 35em; margin-block-start: 2rem; font-size: 1.05rem; line-height: 1.85; color: var(--ink-2); text-wrap: pretty; }
   .folio-portfolio-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-block: 1.5rem 3rem; }
-  .folio-portfolio-intro blockquote { margin: auto 0 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--rule); inline-size: 100%; font-family: var(--serif); font-size: 1.125rem; line-height: 1.7; color: var(--ink-3-aa); }
+  .folio-portfolio-intro blockquote { margin: auto 0 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--rule); inline-size: 100%; font-family: var(--font-heading); font-size: 1.125rem; line-height: 1.7; color: var(--ink-3-aa); }
   .folio-portfolio-feature { min-inline-size: 0; }
   .folio-portfolio-index { max-inline-size: var(--w-page); margin-inline: auto; padding: 1rem var(--page-pad) clamp(5rem, 9vw, 8rem); }
   .folio-portfolio-columns { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(3rem, 5vw, 5rem); align-items: start; padding-block-start: 1.5rem; }
@@ -36,7 +36,7 @@
   .folio-portfolio-image-frame img { object-fit: cover; }
   .folio-portfolio-image[data-size='feature'] .folio-portfolio-image-frame { aspect-ratio: 1; }
   .folio-portfolio-image[data-size='thumbnail'] .folio-portfolio-image-frame { aspect-ratio: 3 / 2; }
-  .folio-portfolio-image figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; padding-block-start: .625rem; color: var(--ink); font-family: var(--serif); font-size: .9375rem; line-height: 1.4; }
+  .folio-portfolio-image figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; padding-block-start: .625rem; color: var(--ink); font-family: var(--font-heading); font-size: .9375rem; line-height: 1.4; }
   .folio-portfolio-image figcaption > [aria-hidden] { font-family: var(--mono); font-size: .7rem; color: var(--ink-3-aa); }
   .folio-portfolio-image figcaption small { flex-basis:100%; margin-inline-start:0; text-align:start; color: var(--ink-3-aa); font-family: var(--sans); font-size: .75rem; }
   .folio-portfolio-record { display: grid; gap: 1.5rem; }
@@ -56,7 +56,7 @@
   .folio-portfolio-list > h2, .folio-portfolio-categories h2 { margin: 0 0 1rem; font-family: var(--sans); font-size: .85rem; color: var(--ink-3-aa); font-weight: 500; }
   .folio-portfolio-categories dl { margin: 0; }
   .folio-portfolio-categories dl > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-block-end: 1px solid var(--rule); padding-block: .35rem; }
-  .folio-portfolio-categories dt { font-family: var(--serif); font-size: 1.125rem; }
+  .folio-portfolio-categories dt { font-family: var(--font-heading); font-size: 1.125rem; }
   .folio-portfolio-categories dt a { display: flex; align-items: center; min-block-size: 44px; }
   .folio-portfolio-categories dd { margin: 0; font-family: var(--mono); font-size: .75rem; color: var(--ink-3-aa); }
   @media (max-width: 1023px) {

package/dist/website-reading.css

@@ -3,31 +3,31 @@
 .folio-detail-masthead[data-width=fill],.folio-reading-figure[data-width=fill]{padding-inline:0;max-width:none}
 .folio-detail-back{margin-block-end:clamp(2rem,5vw,3rem)}
 .folio-detail-back a{display:inline-flex;align-items:center;min-height:44px;gap:.5rem;color:var(--ink-3-aa);font-size:.875rem;text-decoration:none}
-.folio-detail-context{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa);letter-spacing:.12em;margin-block:0 1.25rem}
+.folio-detail-context{font-family:var(--mono-i18n,var(--label-font));font-size:.6875rem;color:var(--ink-3-aa);letter-spacing:calc(.12em * var(--label-tracking-scale));margin-block:0 1.25rem}
 .folio-detail-opening{display:grid;gap:2.5rem}
 .folio-detail-opening[data-aside]{grid-template-columns:minmax(0,1fr) minmax(19rem,26rem);gap:clamp(3rem,7vw,6rem)}
 .folio-detail-opening>div{min-width:0}
-.folio-detail-masthead h1{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-title);font-weight:300;line-height:1.05;letter-spacing:-.032em;text-wrap:balance;margin:0}
+.folio-detail-masthead h1{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-title);font-weight:var(--display-weight);line-height:1.05;letter-spacing:-.032em;text-wrap:balance;margin:0}
 .folio-detail-masthead[data-display] h1{font-size:clamp(2.5rem,7vw,5.5rem)}
 .folio-detail-dek{max-width:64ch;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.65;color:var(--ink-2);margin-block:1.75rem 0;text-wrap:pretty}
 .folio-detail-metabar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 2.5rem;border-block:1px solid var(--rule);padding-block:1.25rem;margin-block-start:clamp(2rem,4vw,3rem)}
 .folio-detail-metabar dl{display:flex;flex-wrap:wrap;gap:1.25rem 2.75rem;margin:0;min-width:0}
-.folio-detail-metabar dt{font-family:var(--mono-i18n,var(--font-mono));font-size:.625rem;letter-spacing:.12em;color:var(--ink-3-aa)}
+.folio-detail-metabar dt{font-family:var(--mono-i18n,var(--label-font));font-size:.625rem;letter-spacing:calc(.12em * var(--label-tracking-scale));color:var(--ink-3-aa)}
 .folio-detail-metabar dd{display:flex;align-items:center;gap:.5rem;margin:.375rem 0 0;font-size:.9375rem}
 .folio-detail-actions{display:flex;flex-wrap:wrap;gap:.625rem;margin-inline-start:auto}
 .folio-reading-layout{padding-block-start:clamp(2.75rem,5vw,4rem)}
 .folio-reading-body{min-width:0}
 .folio-reading-section{padding-block-start:clamp(3rem,7vw,5.5rem);scroll-margin-block-start:var(--scroll-offset,6rem)}
 .folio-reading-section[data-compact]{padding-block-start:2rem}
-.folio-reading-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;border-block-end:1px solid var(--rule-hard);padding-block-end:1rem;margin-block-end:1.75rem}
+.folio-reading-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;border-block-end:1px solid var(--rule-divider);padding-block-end:1rem;margin-block-end:1.75rem}
 .folio-reading-section[data-seamless] .folio-reading-heading{margin-block-end:0}
 .folio-reading-heading:has(+ .folio-reference-rows, + .folio-feature-pairs){margin-block-end:0}
 .folio-reading-heading + :is(.folio-reference-rows,.folio-feature-pairs){border-block-start:0}
 .folio-reading-heading:has(+ .folio-figure-band){margin-block-end:1.25rem;padding-block-end:0;border-block-end:0}
-.folio-reading-heading h2{margin:0;font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:300;line-height:1.1;letter-spacing:-.028em}
+.folio-reading-heading h2{margin:0;font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:var(--display-weight);line-height:1.1;letter-spacing:-.028em}
 .folio-reading-heading>span{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
 .folio-reading-lead{font-size:1.0625rem;line-height:1.75;color:var(--ink-2);margin-block:0 2rem}
-.folio-reading-lede>p:first-child{font-family:var(--serif-i18n,var(--font-heading));font-weight:300;font-size:var(--fs-lead);line-height:1.28;letter-spacing:-.01em;margin:0}
+.folio-reading-lede>p:first-child{font-family:var(--serif-i18n,var(--font-heading));font-weight:var(--display-weight);font-size:var(--fs-lead);line-height:1.28;letter-spacing:-.01em;margin:0}
 .folio-reading-lede>p:first-child>span{color:var(--ink-3-aa)}
 .folio-reading-lede>p+p{font-size:1.0625rem;line-height:1.7;color:var(--ink-2);margin-block-start:1.5rem}
 .folio-record-pager{display:grid;grid-template-columns:1fr 1fr;margin-block-start:clamp(3.5rem,7vw,5rem)}
@@ -35,12 +35,12 @@
 .folio-record-pager-link[data-direction=prev]{border-inline-end:1px solid var(--rule);padding-inline-end:1.5rem}
 .folio-record-pager-link[data-direction=next]{text-align:end;justify-content:end;padding-inline-start:1.5rem}
 .folio-record-pager-direction{display:block;font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
-.folio-record-pager strong{display:block;margin-block-start:.5rem;font-family:var(--serif-i18n,var(--font-heading));font-weight:300;font-size:var(--fs-item);line-height:1.25}
+.folio-record-pager strong{display:block;margin-block-start:.5rem;font-family:var(--serif-i18n,var(--font-heading));font-weight:var(--display-weight);font-size:var(--fs-item);line-height:1.25}
 .folio-record-pager-media{position:relative;width:4.5rem;height:3rem;overflow:hidden}
 .folio-record-pager-media img{width:100%;height:100%;object-fit:cover}
 .folio-toc{color:var(--ink-3-aa)}
 .folio-toc>div{position:sticky;inset-block-start:7rem}
-.folio-toc p{font-family:var(--mono-i18n,var(--font-mono));font-size:.625rem;letter-spacing:.12em;margin-block:0 1rem}
+.folio-toc p{font-family:var(--mono-i18n,var(--label-font));font-size:.625rem;letter-spacing:calc(.12em * var(--label-tracking-scale));margin-block:0 1rem}
 .folio-toc ul{list-style:none;margin:0;padding:0;border-inline-start:1px solid var(--rule)}
 .folio-toc ul ul{border:0;padding-inline-start:1rem}
 .folio-toc a{display:flex;align-items:baseline;gap:.625rem;min-height:2rem;padding:.375rem .5rem .375rem 1rem;color:inherit;font-size:.8125rem;line-height:1.5;text-decoration:none}
@@ -67,16 +67,16 @@
 .folio-media-playback{position:relative;width:100%;height:100%}
 .folio-media-playback video{display:block;width:100%;height:100%;object-fit:cover}
 .folio-media-playback button{position:absolute;inset-inline-end:.75rem;inset-block-end:.75rem;background:var(--paper)}
-.folio-action-band{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;border-block:1px solid var(--rule-hard);padding-block:clamp(2.5rem,6vw,4.5rem);margin-block-start:clamp(3.5rem,8vw,6rem)}
-.folio-action-band__eyebrow{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;letter-spacing:.1em;color:var(--ink-3-aa)}
-.folio-action-band h2{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:300;line-height:1.15;margin:0;text-wrap:balance}
+.folio-action-band{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;border-block:1px solid var(--rule-divider);padding-block:clamp(2.5rem,6vw,4.5rem);margin-block-start:clamp(3.5rem,8vw,6rem)}
+.folio-action-band__eyebrow{font-family:var(--mono-i18n,var(--label-font));font-size:.6875rem;letter-spacing:calc(.1em * var(--label-tracking-scale));color:var(--ink-3-aa)}
+.folio-action-band h2{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-lead);font-weight:var(--display-weight);line-height:1.15;margin:0;text-wrap:balance}
 .folio-action-band p{max-width:46ch;color:var(--ink-3-aa);line-height:1.7;margin:1rem 0 0}
 .folio-action-band__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
-.folio-feature-pairs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem);border-block-start:1px solid var(--rule-hard)}
+.folio-feature-pairs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem);border-block-start:1px solid var(--rule-divider)}
 .folio-reading-section[data-seamless] .folio-feature-pairs{border-block-start:0}
 .folio-feature-pairs>div{padding-block:clamp(1.5rem,3vw,2rem);border-block-end:1px solid var(--rule)}
 .folio-feature-pairs span{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
-.folio-feature-pairs h3{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-item);font-weight:300;line-height:1.2;margin-block:0 .75rem}
+.folio-feature-pairs h3{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-item);font-weight:var(--display-weight);line-height:1.2;margin-block:0 .75rem}
 .folio-feature-pairs p{color:var(--ink-2);font-size:1rem;line-height:1.7;margin:0}
 .folio-preview-pair{display:grid;gap:2rem;align-items:end;padding-block-start:1.75rem}
 .folio-preview-pair[data-mobile]{grid-template-columns:minmax(0,1fr) minmax(13.5rem,.3fr)}

package/dist/website-recovery.css

@@ -6,7 +6,7 @@
 .folio-loading-intro { display: grid; align-items: end; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(4.5rem, 9vw, 7rem) clamp(2.75rem, 5vw, 4.5rem); }
 .folio-loading-records, .folio-loading-gallery, .folio-loading-metrics { padding-block-end: clamp(4rem, 9vw, 8rem); }
 .folio-loading-records__row { display: grid; gap: 1rem 2.25rem; border-block-end: 1px solid var(--rule); padding-block: 2rem; }
-.folio-loading-records__row:first-child { border-block-start: 1px solid var(--rule-hard); }
+.folio-loading-records__row:first-child { border-block-start: 1px solid var(--rule-divider); }
 .folio-loading-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
 .folio-loading-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .75rem; }
 .folio-loading-media { border-block: 1px solid var(--rule); background: var(--paper-2); }

package/dist/website-shell.css

@@ -19,7 +19,7 @@
   }
   .folio-site-navigation[data-overlay]::before { content: ''; position: absolute; inset: 0 0 -3rem; z-index: -1; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--photo-scrim) 45%, transparent), transparent); }
   .folio-site-navigation-inner { max-inline-size: var(--w-page); padding-inline: var(--page-pad); margin-inline: auto; min-block-size: 4.25rem; display: flex; align-items: center; gap: 2rem; }
-  .folio-site-wordmark { font-family: var(--serif); font-size: 1.4rem; letter-spacing: -.025em; white-space: nowrap; }
+  .folio-site-wordmark { font-family: var(--font-heading); font-size: 1.4rem; letter-spacing: -.025em; white-space: nowrap; }
   .folio-site-wordmark a { display: inline-flex; align-items: center; min-block-size: 44px; }
   .folio-site-navigation-desktop { margin-inline-start: auto; }
   .folio-site-navigation-desktop ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.6rem; }

package/dist/website-timeline.css

@@ -1,5 +1,5 @@
 .folio-record-section { scroll-margin-block-start: var(--scroll-offset); }
-.folio-record-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-record-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-divider); }
 .folio-career-record { display: grid; gap: 1rem; border-block-end: 1px solid var(--rule); padding-block: clamp(2rem, 3.5vw, 3rem); }
 .folio-career-record__dates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; }
 .folio-career-record__dates dl, .folio-career-record__dates dd { margin: 0; }
@@ -18,7 +18,7 @@
 .folio-profile-figure__image { overflow: hidden; border-radius: var(--radius); }
 .folio-profile-figure__image img { display: block; inline-size: 100%; block-size: auto; }
 .folio-profile-skills__group { display: grid; gap: 1rem; border-block-end: 1px solid var(--rule); padding-block: 1.5rem; }
-.folio-profile-skills__group:first-child { border-block-start: 1px solid var(--rule-hard); }
+.folio-profile-skills__group:first-child { border-block-start: 1px solid var(--rule-divider); }
 .folio-profile-skills__items { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none; margin: 0; padding: 0; }
 .folio-profile-skills__items > li { display: inline-flex; align-items: center; gap: .5rem; }
 .folio-profile-skill__icon { display: inline-flex; }
@@ -29,7 +29,7 @@
 [data-mode='dark'] .folio-profile-skill__icon[data-invert]:not([data-has-dark]) img { filter: invert(1); }
 .folio-profile-interests { display: grid; gap: 2rem; }
 .folio-profile-interests article { border-block-start: 1px solid var(--rule); padding-block-start: 1.5rem; }
-.folio-timeline { border-block-start: 1px solid var(--rule-hard); }
+.folio-timeline { border-block-start: 1px solid var(--rule-divider); }
 .folio-timeline__item { min-inline-size: 0; }
 @media (min-width: 768px) {
   .folio-career-record { grid-template-columns: 11rem minmax(0, 1fr) 4rem; column-gap: clamp(2rem, 4vw, 3.5rem); }

package/dist/website-workbench.css

@@ -0,0 +1,162 @@
+/*
+ * Workbench compositions.
+ *
+ * One grid for the whole page: 12 columns with a 24px gutter inside the page
+ * width. A section's heading takes columns 1–4 and its content an 8-column
+ * subgrid on columns 5–12, so every list, card and caption on the page shares
+ * the same vertical lines. Colour, rules and type come from the theme axes;
+ * the Workbench preset is `linen` + `ember` + `grotesk` + `quiet`, but these
+ * compositions read only roles and work under any preset.
+ */
+@layer components {
+  .folio-wb-section,
+  .folio-wb-hero {
+    --wb-gap: 24px;
+    max-inline-size: var(--w-page);
+    margin-inline: auto;
+    padding-inline: var(--page-pad);
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    column-gap: var(--wb-gap);
+  }
+
+  /* ─── Section ─────────────────────────────────────────────────────────── */
+  .folio-wb-section { margin-block-start: 7.5rem; }
+  .folio-wb-section:last-child { margin-block-end: 7.5rem; }
+  .folio-wb-section::before { content: ''; grid-column: 1 / -1; border-block-start: 1px solid var(--rule); margin-block-end: 2rem; }
+  .folio-wb-section-head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 1rem; padding-inline-end: 1.5rem; }
+  .folio-wb-section-body { grid-column: 5 / -1; min-inline-size: 0; }
+  .folio-wb-heading { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }
+  .folio-wb-heading-lead { color: var(--ink-3-aa); }
+  .folio-wb-section-action a,
+  .folio-wb-link { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--accent-on-muted); text-decoration: none; font-size: .9375rem; }
+  .folio-wb-section-action a:hover,
+  .folio-wb-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
+
+  /* ─── Hero ────────────────────────────────────────────────────────────── */
+  .folio-wb-hero { padding-block-start: clamp(4rem, 8vw, 6rem); row-gap: 3rem; align-items: end; }
+  .folio-wb-hero-copy { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 1.75rem; }
+  .folio-wb-hero-statement { font-size: clamp(1.5rem, 2.2vw, 1.75rem); line-height: 1.3; }
+  .folio-wb-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
+  .folio-wb-hero-stats { grid-column: 10 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wb-gap); margin: 0; align-self: end; }
+  .folio-wb-hero-stats > div { display: flex; flex-direction: column-reverse; gap: .125rem; }
+  .folio-wb-hero-stats dd { margin: 0; font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
+  .folio-wb-hero-stats dt { font-size: .8125rem; color: var(--ink-3-aa); }
+  .folio-wb-hero-figure { grid-column: 1 / -1; }
+
+  /* ─── Figure ──────────────────────────────────────────────────────────── */
+  .folio-wb-figure { margin: 0; }
+  .folio-wb-figure-frame { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); aspect-ratio: 3 / 2; }
+  .folio-wb-figure[data-ratio='wide'] .folio-wb-figure-frame { aspect-ratio: 16 / 9; }
+  .folio-wb-figure[data-ratio='portrait'] .folio-wb-figure-frame { aspect-ratio: 4 / 5; }
+  .folio-wb-figure[data-ratio='panorama'] .folio-wb-figure-frame { aspect-ratio: 3 / 1; }
+  .folio-wb-figure-frame img,
+  .folio-wb-mosaic-frame img,
+  .folio-wb-card-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--slow) var(--ease); }
+  .folio-wb-figure figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: .75rem; font-size: .8125rem; color: var(--ink-3-aa); }
+
+  /* ─── Tools ───────────────────────────────────────────────────────────── */
+  .folio-wb-tools { max-inline-size: var(--w-page); margin: 4.5rem auto 0; padding-inline: var(--page-pad); }
+  .folio-wb-tools-label { margin: 0 0 1.25rem; text-align: center; font-size: .8125rem; color: var(--ink-3-aa); }
+  .folio-wb-tools ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
+  .folio-wb-tools li { display: grid; place-items: center; block-size: 4rem; border-radius: var(--radius); background: var(--paper-2); color: var(--ink-3-aa); transition: color var(--mid) var(--ease), background-color var(--mid) var(--ease); }
+  .folio-wb-tools li:hover { color: var(--ink); background: var(--stone); }
+  .folio-wb-tools li svg { inline-size: 1.375rem; block-size: 1.375rem; }
+
+  /* ─── Cards ───────────────────────────────────────────────────────────── */
+  .folio-wb-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 24px; }
+  .folio-wb-card { position: relative; display: flex; flex-direction: column; gap: .375rem; }
+  .folio-wb-card-cover { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin-block-end: .625rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); transition: border-color var(--mid) var(--ease), translate var(--mid) var(--ease); }
+  .folio-wb-card-title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 1rem; line-height: 1.4; color: var(--ink); }
+  .folio-wb-card-title a { display: inline-flex; align-items: center; min-block-size: 44px; color: inherit; text-decoration: none; }
+  .folio-wb-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
+  .folio-wb-card:has(a:focus-visible) .folio-wb-card-cover { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
+  .folio-wb-card-description,
+  .folio-wb-card-meta { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3-aa); }
+  .folio-wb-card-meta { font-size: .8125rem; }
+  .folio-wb-card:hover .folio-wb-card-cover { translate: 0 -2px; border-color: var(--rule-2); }
+  .folio-wb-card:hover .folio-wb-card-cover img,
+  .folio-wb-figure:hover .folio-wb-figure-frame img,
+  .folio-wb-mosaic-frame:hover img { scale: 1.02; }
+  .folio-wb-tile { display: grid; align-items: end; block-size: 100%; padding: 1.25rem; color: var(--paper); background-color: var(--ink); background-image: linear-gradient(color-mix(in srgb, var(--paper) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--paper) 10%, transparent) 1px, transparent 1px); background-size: 24px 24px; }
+  .folio-wb-tile span { font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; }
+
+  /* ─── Entries ─────────────────────────────────────────────────────────── */
+  .folio-wb-entries { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; row-gap: 2rem; }
+  .folio-wb-entries > ul { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+  .folio-wb-entries[data-has-featured] > ul { grid-column: 5 / -1; }
+  .folio-wb-entries > ul > li + li { border-block-start: 1px solid var(--rule); }
+  .folio-wb-entries > ul > li { padding-block: 1.25rem; }
+  .folio-wb-entries > ul > li:first-child { padding-block-start: 0; }
+  .folio-wb-entry-featured { grid-column: 1 / span 4; position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius); background-color: var(--paper-2); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.625rem - 1px), var(--rule) calc(1.625rem - 1px) 1.625rem); transition: border-color var(--mid) var(--ease), translate var(--mid) var(--ease); }
+  .folio-wb-entry-featured:hover { translate: 0 -2px; border-color: var(--rule-2); }
+  .folio-wb-entry-featured h3 { margin: 0 0 auto; font-family: var(--font-heading); font-weight: 400; font-size: 1.375rem; line-height: 1.3; color: var(--ink); }
+  .folio-wb-entry-featured p { margin: 0; font-size: .9375rem; line-height: 1.625rem; color: var(--ink-2); }
+  .folio-wb-entry-featured h3 a::after { content: ''; position: absolute; inset: 0; }
+  .folio-wb-entry h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 1rem; line-height: 1.4; }
+  .folio-wb-entry h3 a,
+  .folio-wb-entry-featured h3 a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink); text-decoration: none; }
+  .folio-wb-entry h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
+  .folio-wb-entry-date { margin: 0 0 .25rem; font-size: .8125rem; color: var(--ink-3-aa); }
+  .folio-wb-entry-excerpt { margin: .375rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3-aa); }
+  .folio-wb-entry-meta { margin: .375rem 0 0; font-size: .8125rem; color: var(--ink-3-aa); }
+
+  /* ─── Chronology ──────────────────────────────────────────────────────── */
+  .folio-wb-chronology { margin: 0; }
+  .folio-wb-chronology ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
+  .folio-wb-chronology li p { margin: 0 0 .375rem; font-size: .8125rem; line-height: 1.4; color: var(--ink); white-space: nowrap; }
+  .folio-wb-chronology li[data-align='start'] p { margin-inline-start: var(--start); }
+  .folio-wb-chronology li[data-align='end'] p { text-align: end; padding-inline-end: calc(100% - var(--end)); }
+  .folio-wb-chronology-org { color: var(--ink-3-aa); }
+  .folio-wb-chronology-now { color: var(--accent-on-muted); }
+  .folio-wb-chronology-bar { display: block; margin-inline-start: var(--start); block-size: .5rem; inline-size: calc(var(--end) - var(--start)); min-inline-size: .75rem; border-radius: var(--radius-pill); }
+  .folio-wb-chronology li[data-kind='role'] .folio-wb-chronology-bar { background: var(--stone); }
+  .folio-wb-chronology li[data-kind='study'] .folio-wb-chronology-bar { box-shadow: inset 0 0 0 1px var(--rule-2); }
+  .folio-wb-chronology li[data-current] .folio-wb-chronology-bar { background: linear-gradient(90deg, var(--ink) calc(100% - .5rem), var(--accent) 0); }
+  .folio-wb-chronology-axis { display: flex; overflow: hidden; margin-block-start: 1.5rem; border-block-start: 1px solid var(--rule-2); }
+  .folio-wb-chronology-axis span { flex: 1; min-inline-size: 0; white-space: nowrap; padding: .5rem 0 0 .375rem; border-inline-start: 1px solid var(--rule); font-size: .8125rem; color: var(--ink-3-aa); font-variant-numeric: tabular-nums; }
+
+  /* ─── Mosaic ──────────────────────────────────────────────────────────── */
+  .folio-wb-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 24px; }
+  .folio-wb-mosaic-lead { grid-row: span 2; margin: 0; display: flex; flex-direction: column; }
+  .folio-wb-mosaic-lead .folio-wb-mosaic-frame { flex: 1; }
+  .folio-wb-mosaic-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); aspect-ratio: 4 / 5; }
+  .folio-wb-mosaic-lead .folio-wb-mosaic-frame { aspect-ratio: auto; min-block-size: 100%; }
+  .folio-wb-mosaic-frame > a { position: absolute; inset: 0; display: block; }
+  .folio-wb-mosaic-lead figcaption { margin-block-start: .75rem; font-size: .8125rem; color: var(--ink-3-aa); }
+
+  /* ─── Contact ─────────────────────────────────────────────────────────── */
+  .folio-wb-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
+  .folio-wb-contact-address a { display: inline-flex; align-items: center; min-block-size: 44px; font-size: clamp(1.25rem, 2vw, 1.625rem); color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: var(--rule-2); transition: text-decoration-color var(--mid) var(--ease); }
+  .folio-wb-contact-address a:hover { text-decoration-color: var(--ink); }
+
+
+  /* ─── Reveal ──────────────────────────────────────────────────────────── */
+  .folio-wb-reveal[data-reveal] { transition: opacity calc(var(--slow) * 1.2) var(--ease), translate calc(var(--slow) * 1.2) var(--ease); }
+  .folio-wb-reveal[data-reveal='hidden'] { opacity: 0; translate: 0 12px; }
+
+  .folio-wb-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+  /* ─── Narrow screens ──────────────────────────────────────────────────── */
+  @media (max-width: 47.5rem) {
+    .folio-wb-section { margin-block-start: 5rem; }
+    .folio-wb-section-head,
+    .folio-wb-section-body,
+    .folio-wb-hero-copy,
+    .folio-wb-hero-stats { grid-column: 1 / -1; }
+    .folio-wb-section-head { margin-block-end: 2rem; padding-inline-end: 0; }
+    .folio-wb-tools ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
+    .folio-wb-card-grid { grid-template-columns: minmax(0, 1fr); }
+    .folio-wb-entries > ul,
+    .folio-wb-entries[data-has-featured] > ul,
+    .folio-wb-entry-featured { grid-column: 1 / -1; }
+    .folio-wb-mosaic { grid-template-columns: 1fr 1fr; }
+    .folio-wb-mosaic-lead { grid-column: 1 / -1; grid-row: auto; }
+    .folio-wb-mosaic-lead .folio-wb-mosaic-frame { aspect-ratio: 4 / 5; }
+    .folio-wb-chronology li p { white-space: normal; }
+    /* A long career puts a dozen years on a phone-width axis; every other
+       label keeps them legible without pushing the page sideways. */
+    .folio-wb-chronology-axis span:nth-child(even) { color: transparent; }
+  }
+}
+

package/dist/website.css

@@ -23,3 +23,4 @@
 @import './website-conversation.css';
 @import './website-evidence.css';
 @import './website-controls.css';
+@import './website-workbench.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@misoto22/folio",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "private": false,
   "description": "Monochrome design system — CSS tokens and accessible React primitives",
   "license": "MIT",

package/skills/folio-design/rules/tokens.md

@@ -63,12 +63,14 @@ not just `:root`. An unset axis is the default.
 | Attribute | Values | Unset means |
 | --- | --- | --- |
 | `data-mode` | `light` `dark` | follows the app |
-| `data-accent` | `clay` `cobalt` `forest` `moss` `plum` | ink |
-| `data-surface` | `warm` `cool` `glass` | paper |
+| `data-accent` | `clay` `cobalt` `ember` `forest` `moss` `plum` | ink |
+| `data-action` | `ink` | accent |
+| `data-surface` | `warm` `cool` `glass` `linen` | paper |
 | `data-radius` | `sharp` `round` | the default ladder |
 | `data-rules` | `quiet` `firm` | hairline |
 | `data-type` | `grotesk` `bookish` | editorial |
 | `data-motion` | `still` `snappy` | calm |
+| `data-voice` | `quiet` | display |
 | `data-density` | `compact` | comfortable |
 
 ```tsx