@misoto22/folio 0.0.0 → 0.16.0

package/dist/website-evidence.css

@@ -0,0 +1,56 @@
+.folio-evidence-status { display: flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; }
+.folio-evidence-status > span:last-child { min-inline-size: 0; }
+.folio-activity-trace > ul { display: flex; flex-direction: column; gap: .5rem; list-style: none; margin: 0; padding: 0; }
+.folio-activity-trace li { display: flex; align-items: start; gap: .5rem; min-inline-size: 0; }
+.folio-activity-trace li > svg, .folio-activity-trace li > span:first-child { flex-shrink: 0; margin-block-start: .3rem; }
+.folio-activity-trace li[data-state='failed'] > svg { color: var(--danger); }
+.folio-activity-trace li > span { overflow-wrap: anywhere; }
+.folio-activity-trace__summary { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.folio-evidence-panel { min-inline-size: 0; }
+.folio-evidence-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-evidence-panel > header h2 { margin-block-start: .375rem; }
+.folio-evidence-panel > header > .folio-evidence-status { flex-shrink: 0; margin-block-start: .25rem; }
+.folio-evidence-panel > .folio-activity-trace { border-block-end: 1px solid var(--rule); padding-block: .75rem; }
+.folio-evidence-selection { border-block-end: 1px solid var(--rule); padding-block: .75rem; }
+.folio-evidence-selection > div { display: flex; flex-direction: column; margin-block-start: .25rem; }
+.folio-evidence-selection button { inline-size: 100%; justify-content: start; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.folio-evidence-selection button[aria-pressed='true'] { background: var(--stone); color: var(--ink); }
+.folio-evidence-facts { padding-block-start: 1rem; }
+.folio-evidence-disclosure { margin-block-start: 1.5rem; border-block: 1px solid var(--rule); }
+.folio-evidence-disclosure > button { min-block-size: var(--control-h-md); }
+.folio-evidence-query { display: flex; align-items: baseline; min-inline-size: 0; gap: .75rem; border-block-end: 1px solid var(--rule); padding-block: .75rem; }
+.folio-evidence-query > span:first-child, .folio-evidence-query > span:last-child { flex-shrink: 0; }
+.folio-evidence-query > span:nth-child(2) { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.folio-evidence-query > span:last-child { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
+.folio-evidence-stages { list-style: none; margin: 0; padding: 0; }
+.folio-evidence-stage { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; border-block-end: 1px solid var(--rule); padding-block: 1rem; }
+.folio-evidence-stage > span { padding-block-start: .2rem; font-variant-numeric: tabular-nums; }
+.folio-evidence-stage__header, .folio-evidence-stage__description { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
+.folio-evidence-stage__header > p { flex-shrink: 0; }
+.folio-evidence-stage__description { margin-block-start: .25rem; }
+.folio-evidence-stage__description > span:first-child { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.folio-evidence-stage__description > span:last-child { flex-shrink: 0; font-variant-numeric: tabular-nums; }
+.folio-evidence-scores { display: flex; flex-direction: column; gap: .75rem; margin-block-start: .75rem; }
+.folio-evidence-scores > div > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-block-end: .375rem; }
+.folio-evidence-scores > div > div:first-child > span:first-child { min-inline-size: 0; overflow-wrap: anywhere; }
+.folio-evidence-scores > div > div:first-child > span:last-child { flex-shrink: 0; font-variant-numeric: tabular-nums; }
+.folio-signal-figure, .folio-evidence-meter { margin-block-start: .75rem; }
+.folio-signal-figure__bars { display: flex; align-items: end; justify-content: space-between; gap: 1px; block-size: 2.375rem; overflow: hidden; border-block-end: 1px solid var(--rule); }
+.folio-signal-figure__bars > span { inline-size: 3px; flex-shrink: 1; block-size: 3px; opacity: .4; background: var(--ink); }
+.folio-evidence-meter__labels { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-block-start: .5rem; font-variant-numeric: tabular-nums; }
+.folio-evidence-durations { border-block-end: 1px solid var(--rule); padding-block: 1rem; }
+.folio-evidence-durations__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-end: .5rem; font-variant-numeric: tabular-nums; }
+.folio-evidence-durations__bar { display: flex; gap: 1px; block-size: .375rem; overflow: hidden; background: var(--rule); }
+.folio-evidence-durations__bar > span { block-size: 100%; background: var(--ink); }
+.folio-evidence-durations__bar > span:nth-child(3n + 1) { background: var(--stone); }
+.folio-evidence-durations__bar > span:nth-child(3n + 2) { background: var(--ink-3-aa); }
+.folio-evidence-durations__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-block-start: .5rem; }
+.folio-evidence-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-block-start: 1rem; }
+.folio-evidence-summary > div:last-child { text-align: end; }
+@media (prefers-reduced-motion: no-preference) {
+  .folio-signal-figure__bars[data-running] > span { animation: folio-signal-pulse .85s ease-in-out infinite; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .folio-signal-figure__bars[data-running] > span { block-size: .7rem; opacity: .7; }
+}
+@keyframes folio-signal-pulse { 50% { block-size: 2rem; opacity: .85; } }

package/dist/website-media.css

@@ -0,0 +1,227 @@
+/* Website media compositions. Providers supply images, links and map canvases;
+   every surface, measure and responsive relationship belongs to this sheet. */
+.folio-media-container,
+.folio-media-masthead,
+.folio-media-detail,
+.folio-photograph-feature {
+  inline-size: 100%;
+  max-inline-size: var(--w-page);
+  margin-inline: auto;
+  padding-inline: var(--page-pad);
+}
+
+.folio-media-gallery-page,
+.folio-media-detail-page {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.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-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; }
+.folio-media-gallery-item,
+.folio-media-gallery-item figure { min-inline-size: 0; margin: 0; }
+.folio-media-gallery-link { position: relative; display: flex; aspect-ratio: 1; align-items: flex-end; justify-content: center; }
+.folio-media-gallery-link img { display: block; inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; transition: transform var(--duration-fast) var(--ease); }
+.folio-media-gallery-link:hover img { transform: translateY(-2px); }
+.folio-media-gallery-link:focus-visible,
+.folio-media-thumbnail:focus-visible,
+.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-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-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; }
+.folio-photograph-feature-caption { margin-block-start: 0.875rem; color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.6875rem; }
+
+.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-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 {
+  --folio-media-max-block: 76svh;
+  display: block;
+  inline-size: min(100%, calc(var(--folio-media-max-block) * var(--folio-media-aspect, 1.5)));
+  min-block-size: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  cursor: zoom-in;
+}
+.folio-media-frame:hover { background: transparent; }
+.folio-media-frame:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
+.folio-media-frame img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: auto var(--folio-media-aspect, 1.5); object-fit: contain; }
+.folio-media-ledger { display: flex; min-inline-size: 0; flex-direction: column; border-block-start: 1px solid var(--border-color); padding-block-start: 1.25rem; }
+.folio-media-ledger-narrative,
+.folio-media-ledger-data { display: contents; }
+.folio-media-ledger-lead .folio-media-eyebrow { margin-block-end: 0.75rem; }
+.folio-media-detail-title { margin: 0; color: var(--foreground); font-family: var(--font-heading); font-size: var(--fs-title); font-weight: 400; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; }
+.folio-media-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-start: 1.5rem; padding-block-start: 1.125rem; border-block-start: 1px solid var(--border-subtle); }
+.folio-media-metadata { margin-block: 1.75rem 0; border-block-start: 1px solid var(--border-color); }
+.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 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; }
+.folio-media-light-line svg { flex: none; }
+.folio-media-light-detail { color: var(--secondary-text); }
+.folio-media-spread[data-photo-spread='wide'] { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.75rem, 3.5vw, 3rem); }
+.folio-media-spread[data-photo-spread='wide'] .folio-media-well { justify-content: center; }
+.folio-media-spread[data-photo-spread='wide'] .folio-media-frame { --folio-media-max-block: 74svh; }
+.folio-media-spread[data-photo-spread='wide'] .folio-media-ledger { display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 34vw, 29rem); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
+.folio-media-spread[data-photo-spread='wide'] .folio-media-ledger-narrative,
+.folio-media-spread[data-photo-spread='wide'] .folio-media-ledger-data { display: flex; min-inline-size: 0; flex-direction: column; }
+.folio-media-spread[data-photo-spread='wide'] .folio-media-light { margin-block-start: 1.375rem; padding-block-start: 1.375rem; border-block-start: 1px solid var(--border-subtle); border-block-end: 0; }
+.folio-media-spread[data-photo-spread='wide'] .folio-media-metadata { margin-block-start: 0; border-block-start: 0; }
+.folio-media-spread[data-photo-spread='wide'] .folio-media-metadata > div:first-child { padding-block-start: 0.25rem; }
+
+.folio-media-lightbox[role='dialog'] {
+  inset: 0;
+  display: grid;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  max-block-size: none;
+  place-items: center;
+  padding: 3.5rem 1rem 3.75rem;
+  border: 0;
+  border-radius: 0;
+  background: var(--photo-scrim);
+  color: var(--on-dark);
+  transform: none;
+  translate: none;
+  box-shadow: none;
+  backdrop-filter: none;
+  cursor: zoom-out;
+  animation: folio-fade-in var(--duration-fast) var(--ease);
+}
+.folio-media-lightbox-stage { display: flex; justify-content: center; cursor: default; }
+.folio-media-lightbox-stage img { display: block; inline-size: min(calc(100vw - 2rem), calc((100svh - 7.25rem) * var(--folio-media-aspect, 1.5))); block-size: auto; aspect-ratio: auto var(--folio-media-aspect, 1.5); object-fit: contain; }
+.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-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; }
+.folio-media-pager-link[data-direction='previous'] { border-inline-end: 1px solid var(--border-subtle); }
+.folio-media-pager-link[data-direction='next'] { grid-template-columns: minmax(0, 1fr) 4.5rem; padding-inline: 1.5rem 0; }
+.folio-media-pager-copy { min-inline-size: 0; }
+.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-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-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; }
+
+.folio-media-map-section { border-block: 1px solid var(--border-subtle); background: var(--background-elevated); padding-block: clamp(4rem, 10vw, 8rem); }
+.folio-media-anchor { display: block; block-size: 0; scroll-margin-block-start: var(--scroll-offset); pointer-events: none; }
+.folio-media-map-section header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-block-end: clamp(2rem, 5vw, 4rem); padding-block-end: 1.25rem; border-block-end: 1px solid var(--border-subtle); }
+.folio-media-map-section header h2 { margin: 0; color: var(--foreground); font-family: var(--font-heading); font-size: var(--fs-lead); font-weight: 400; letter-spacing: -0.025em; line-height: 1.12; }
+.folio-media-map-section header p { margin: 0; color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.6875rem; text-align: end; }
+.folio-media-map-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); align-items: start; gap: clamp(1rem, 2vw, 1.75rem); }
+.folio-media-map-frame { min-inline-size: 0; }
+.folio-media-map-stage { position: relative; z-index: 0; isolation: isolate; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--background-elevated); }
+.folio-media-map-canvas { inline-size: 100%; block-size: 38.75rem; }
+.folio-media-map-stage > [role='status'] { display: grid; block-size: 38.75rem; place-items: center; padding: 1.5rem; color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.6875rem; text-align: center; }
+.folio-media-map-hint { position: absolute; inset-block-end: 0.875rem; inset-inline-start: 0.875rem; z-index: 2; padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--background-elevated); color: var(--foreground-muted); font-family: var(--font-mono); font-size: 0.625rem; pointer-events: none; }
+.folio-media-map-navigation { position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; background: var(--background); }
+.folio-media-map-preview { display: flex; min-inline-size: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--background); }
+.folio-media-map-preview-image { position: relative; inline-size: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-block-end: 1px solid var(--border-subtle); background: var(--background-elevated); }
+.folio-media-map-preview-image img { object-fit: contain; }
+.folio-media-map-preview-action { position: absolute; inset-block-end: 0.75rem; inset-inline-end: 0.75rem; }
+.folio-media-map-preview-copy { padding: 1.125rem 1.25rem 1.25rem; }
+.folio-media-map-preview-copy h3 { margin: 0; color: var(--foreground); font-family: var(--font-heading); font-size: var(--fs-lead); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; overflow-wrap: anywhere; }
+.folio-media-map-place { margin-block: 0.25rem 0; color: var(--foreground-muted); font-size: 0.875rem; }
+.folio-media-map-coordinates { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-block-start: 0.75rem; color: var(--foreground-muted); font-family: var(--font-mono); font-size: 0.6875rem; }
+.folio-media-map-areas { display: flex; flex-direction: column; margin-block-start: 1rem; padding-block-start: 0.5rem; border-block-start: 1px solid var(--border-subtle); }
+.folio-media-map-area { inline-size: 100%; justify-content: space-between; gap: 0.75rem; padding-inline: 0.25rem; border: 0; border-block-end: 1px solid var(--border-subtle); border-radius: 0; text-align: start; }
+.folio-media-map-area[aria-pressed='true'] { color: var(--foreground); }
+.folio-media-map-area-name { display: flex; align-items: center; gap: 0.6875rem; }
+.folio-media-map-area-name > span { inline-size: 0.4375rem; block-size: 0.4375rem; flex: none; background: currentColor; opacity: 0.55; }
+.folio-media-map-area[aria-pressed='true'] .folio-media-map-area-name > span { opacity: 1; }
+.folio-media-map-area-count { color: var(--secondary-text); font-family: var(--font-mono); font-size: 0.6875rem; }
+.folio-media-map-marker { position: relative; min-inline-size: 44px; min-block-size: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; }
+.folio-media-map-marker:hover { background: transparent; }
+.folio-media-map-marker:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.folio-media-map-pin { position: relative; display: grid; inline-size: 2rem; block-size: 2rem; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--background) 70%, transparent); pointer-events: none; }
+.folio-media-map-pin > span { inline-size: 0.625rem; block-size: 0.625rem; border: 1px solid var(--background); border-radius: var(--radius-pill); background: var(--accent); transition: transform var(--duration-fast) var(--ease); }
+.folio-media-map-pin[data-active] { border-color: var(--accent); }
+.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-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%); }
+.folio-media-map-skeleton { padding-block-end: clamp(4rem, 10vw, 8rem); }
+
+@media (min-width: 768px) {
+  .folio-media-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
+  .folio-media-gallery-link,
+  .folio-media-gallery-mount { aspect-ratio: 4 / 5; }
+  .folio-media-gallery-caption { grid-template-columns: 2.25rem minmax(0, 1fr) auto; column-gap: 0.75rem; }
+  .folio-media-gallery-title { display: block; font-size: 1.03125rem; text-overflow: ellipsis; white-space: nowrap; }
+  .folio-media-gallery-location { grid-column: auto; max-inline-size: 12ch; }
+}
+
+@media (max-width: 939px) {
+  .folio-media-map-grid { grid-template-columns: minmax(0, 1fr); }
+  .folio-media-map-canvas,
+  .folio-media-map-stage > [role='status'] { block-size: 28.75rem; }
+}
+
+@media (max-width: 820px) {
+  .folio-media-detail { padding-block-start: 5.5rem; }
+  .folio-media-spread,
+  .folio-media-spread[data-photo-spread='wide'] .folio-media-ledger { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
+  .folio-media-frame { --folio-media-max-block: 72svh; }
+  .folio-media-spread[data-photo-spread='wide'] .folio-media-ledger-narrative,
+  .folio-media-spread[data-photo-spread='wide'] .folio-media-ledger-data { display: contents; }
+  .folio-media-spread[data-photo-spread='wide'] .folio-media-light { margin-block-start: 0; padding-block-start: 1.1rem; border-block-start: 0; border-block-end: 1px solid var(--border-subtle); }
+  .folio-media-spread[data-photo-spread='wide'] .folio-media-metadata { margin-block-start: 1.75rem; border-block-start: 1px solid var(--border-color); }
+  .folio-media-spread[data-photo-spread='wide'] .folio-media-metadata > div:first-child { padding-block-start: 0.6875rem; }
+  .folio-media-lightbox[role='dialog'] { padding: 4.25rem 0.75rem 3.5rem; }
+  .folio-media-lightbox-stage img { inline-size: min(calc(100vw - 1.5rem), calc((100svh - 7.75rem) * var(--folio-media-aspect, 1.5))); }
+  .folio-media-thumbnail-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .folio-photograph-feature { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (max-width: 640px) {
+  .folio-media-pager { grid-template-columns: minmax(0, 1fr); }
+  .folio-media-pager-link[data-direction='previous'] { padding-inline-end: 0; border-inline-end: 0; border-block-end: 1px solid var(--border-subtle); }
+  .folio-media-pager-link[data-direction='next'] { padding-inline-start: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .folio-media-gallery-link img,
+  .folio-media-map-pin > span { transition: none; }
+  .folio-media-gallery-link:hover img { transform: none; }
+  .folio-media-lightbox[role='dialog'] { animation: none; }
+}
+
+[data-motion='none'] .folio-media-gallery-link img,
+[data-motion='none'] .folio-media-map-pin > span { transition: none; }
+[data-motion='none'] .folio-media-gallery-link:hover img { transform: none; }
+[data-motion='none'] .folio-media-lightbox[role='dialog'] { animation: none; }

package/dist/website-metrics.css

@@ -0,0 +1,15 @@
+.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-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; }
+.folio-metrics-list { margin: 0; }
+.folio-metrics-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: .75rem; border-block-end: 1px solid var(--rule); }
+.folio-metrics-list dt { display: inline-flex; align-items: center; gap: .75rem; min-inline-size: 0; }
+.folio-metrics-list dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.folio-metrics-empty{display:grid;grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);align-items:center;gap:1.5rem;min-block-size:13rem;border-block:1px solid var(--rule);padding:1.25rem 0}.folio-metrics-empty__plot{position:relative;display:flex;align-items:end;gap:.375rem;block-size:6rem;padding:.625rem;border-inline-start:1px solid var(--rule);border-block-end:1px solid var(--rule)}.folio-metrics-empty__plot span{display:block;inline-size:100%;background:var(--rule-2)}.folio-metrics-empty__plot span:nth-child(1){block-size:18%}.folio-metrics-empty__plot span:nth-child(2){block-size:34%}.folio-metrics-empty__plot span:nth-child(3){block-size:23%}.folio-metrics-empty__plot span:nth-child(4){block-size:48%}
+.folio-metric-unit { margin-inline-start: .1875rem; color: var(--ink-3-aa); font-size: var(--fs-item); }
+@media (min-width: 768px) { .folio-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 3.5rem; } }
+@media (max-width: 520px) { .folio-metrics-empty{grid-template-columns:1fr}.folio-metrics-empty__plot{max-inline-size:12rem} }
+@media (min-width: 1100px) { .folio-metrics-grid[data-columns='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }

package/dist/website-music.css

@@ -0,0 +1,27 @@
+.folio-media-row { display: grid; min-block-size: 4.5rem; grid-template-columns: 1.5rem 2.75rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; border-block-end: 1px solid var(--rule); padding-block: .75rem; }
+.folio-media-row__copy { min-inline-size: 0; }
+.folio-media-row__copy a { justify-content: flex-start; max-inline-size: 100%; white-space: normal; text-align: start; }
+.folio-media-row__trailing { min-inline-size: 3.25rem; max-inline-size: 6rem; white-space: nowrap; text-align: end; font-variant-numeric: tabular-nums; }
+.folio-media-preview { position: relative; inline-size: 2.75rem; block-size: 2.75rem; overflow: hidden; padding: 0; }
+.folio-media-preview > img, .folio-media-collection__artwork > img, .folio-media-feature__artwork > img { object-fit: cover; }
+.folio-media-row[data-artwork-shape='circle'] .folio-media-preview { border-radius: var(--radius-pill); }
+.folio-media-preview__control { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); background: var(--paper-2); }
+.folio-media-preview:has(img) .folio-media-preview__control { opacity: 0; transition: opacity var(--duration-fast); }
+.folio-media-preview:hover .folio-media-preview__control, .folio-media-preview:focus-visible .folio-media-preview__control, .folio-media-preview .folio-media-preview__control[data-playing] { opacity: 1; }
+.folio-media-preview--overlay { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 3rem; block-size: 3rem; }
+.folio-media-feature { display: grid; min-block-size: clamp(25rem, 52vw, 39rem); grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 7vw, 6rem); }
+.folio-media-feature__artwork { position: relative; display: grid; aspect-ratio: 1; inline-size: clamp(15rem, 34vw, 26rem); max-inline-size: 100%; place-items: center; overflow: hidden; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--paper); text-align: center; }
+.folio-media-feature__copy { min-inline-size: 0; }
+.folio-media-feature__copy h2 a { font: inherit; line-height: inherit; white-space: normal; text-align: start; }
+.folio-media-feature__progress { display: flex; max-inline-size: 26.25rem; align-items: center; gap: .75rem; font-variant-numeric: tabular-nums; }
+.folio-media-collection { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); border-block-start: 1px solid var(--rule); }
+.folio-media-collection__artwork { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
+.folio-media-collection__copy { display: flex; min-inline-size: 0; flex-direction: column; justify-content: center; padding: 1rem; }
+.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__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)); } }
+@media (prefers-reduced-motion: reduce) { .folio-media-preview__control { transition: none; } }

package/dist/website-portfolio.css

@@ -0,0 +1,94 @@
+  .folio-question-card { padding: 1.5rem; border:1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-2); color: var(--ink); }
+  .folio-question-card-heading { display:flex; align-items:center; gap:.625rem; }
+  .folio-question-card-heading>svg { flex:none; color:var(--ink-3-aa); }
+  .folio-question-card-heading h2 { font-family:var(--sans); font-size:1rem; font-weight:500; line-height:1.5; letter-spacing:normal; }
+  .folio-question-card-heading em { font-style:normal; }
+  .folio-question-card > p { font-family:var(--sans); font-size:.8125rem; line-height:1.8; color:var(--ink-3-aa); }
+  .folio-question-card form { position:relative; background:var(--paper); border:1px solid var(--rule-2); border-radius:var(--radius-md); padding:.375rem; }
+  .folio-question-card form:focus-within { border-color:var(--ink-3-aa); }
+  .folio-question-card form label { position:absolute; inline-size:1px; block-size:1px; clip-path:inset(50%); overflow:hidden; }
+  .folio-question-card form input { border:0; box-shadow:none; background:transparent; font-size:.8125rem; padding-inline:.5rem; }
+  .folio-question-card form>button { min-inline-size:44px; inline-size:44px; min-block-size:44px; block-size:44px; border-radius:var(--radius-sm); }
+  .folio-question-card > p { margin-block: 1rem 1.5rem; }
+  .folio-question-card form { display: flex; gap: .5rem; align-items: end; }
+  .folio-question-card form > :first-child { min-inline-size: 0; flex: 1; }
+  .folio-question-card form > button { flex: none; }
+  .folio-question-card ul { list-style: none; margin: 1.25rem 0 0; padding: 0; }
+  .folio-question-card li button { inline-size: 100%; text-align: start; justify-content: space-between; gap:.75rem; padding-inline:0; font-family:var(--sans); font-size:.8125rem; font-weight:400; color:var(--ink-2); white-space:normal; }
+  .folio-question-card li+li { border-block-start:1px solid var(--rule); }
+  .folio-question-card li button svg { flex:none; color:var(--ink-3-aa); }
+  .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-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-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; }
+  .folio-portfolio-columns > * { min-inline-size: 0; }
+  .folio-portfolio-aside { display: flex; flex-direction: column; gap: 2.5rem; }
+  .folio-portfolio-more { margin-block-start: 2rem; }
+  .folio-portfolio-image { margin: 0; min-inline-size: 0; }
+  .folio-portfolio-image-frame { position: relative; display: block; overflow: hidden; background: var(--paper-2); border-radius: var(--radius-sm); aspect-ratio: 4 / 3; }
+  .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 > [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; }
+  .folio-portfolio-record[data-has-image] { grid-template-columns: 10.5rem minmax(0, 1fr); }
+  .folio-portfolio-record-context { margin-block-end: .6rem; font-family: var(--sans); font-size: .75rem; line-height: 1.7; color: var(--ink-3-aa); }
+  .folio-portfolio-record h2 { font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 1.85rem); }
+  .folio-portfolio-record h2 a { display: inline-flex; align-items: center; min-block-size: var(--control-h-md); text-decoration: none; }
+  .folio-portfolio-record h2 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
+  .folio-portfolio-record-description { margin-block: .85rem 0; max-inline-size: var(--measure-record); line-height: 1.8; font-size: .975rem; color: var(--ink-2); text-wrap: pretty; }
+  .folio-portfolio-record-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-block-start: .65rem; }
+  .folio-portfolio-record-meta > span { font-family: var(--mono); font-size: .7rem; color: var(--ink-3-aa); }
+  .folio-portfolio-list[data-variant='records'] > div { display: flex; flex-direction: column; gap: 2.75rem; }
+  .folio-portfolio-list[data-variant='frames'] > div { display: flex; flex-wrap: wrap; gap: 1.25rem 12px; align-items: start; }
+  .folio-frame-layout-item { min-inline-size: 0; flex: 0 0 calc((100% - 24px)/3); }
+  .folio-frame-layout-item > figure { margin: 0; }
+  .folio-portfolio-list[data-variant='thumbnails'] > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
+  .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 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) {
+    .folio-portfolio-intro { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
+    .folio-portfolio-columns { grid-template-columns: minmax(0, 1fr) 16rem; gap: 2.5rem; }
+    .folio-portfolio-record[data-has-image] { grid-template-columns: 1fr; }
+  }
+  @media (max-width: 767px) {
+    .folio-portfolio-intro, .folio-portfolio-columns { grid-template-columns: 1fr; }
+    .folio-portfolio-intro { padding-block-start: 7rem; }
+    .folio-portfolio-feature { max-inline-size: 32rem; inline-size: 100%; }
+    .folio-portfolio-aside { padding-block-start: 1rem; }
+    .folio-frame-layout-item { flex-basis: calc((100% - 12px)/2); }
+    .folio-portfolio-record[data-has-image] { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); }
+  }
+  @media (max-width: 479px) {
+    .folio-portfolio-record[data-has-image] { grid-template-columns: 1fr; }
+  }
+@media (max-width: 40rem) {
+  .folio-portfolio-index [role='tablist'] { gap: .25rem; }
+  .folio-portfolio-index [role='tab'] {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-inline-size: 0;
+    inline-size: 0;
+    gap: .375rem;
+    padding: .75rem .25rem;
+    font-size: .75rem;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+  .folio-portfolio-index [role='tab'] > span { margin-inline-start: 0; }
+}

package/dist/website-reading.css

@@ -0,0 +1,159 @@
+.folio-detail-masthead,.folio-reading-layout,.folio-record-pager,.folio-reading-figure,.folio-action-band{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
+.folio-detail-masthead{padding-block:.5rem 3rem;color:var(--ink)}
+.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-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[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 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-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>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>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)}
+.folio-record-pager-link{display:flex;align-items:center;gap:1rem;min-height:6rem;padding-block:1.25rem;border-block:1px solid var(--rule);color:var(--ink);text-decoration:none}
+.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-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 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}
+.folio-toc a[aria-current=true]{font-weight:500;color:var(--ink)}
+.folio-toc a:hover{color:var(--ink)}
+.folio-toc a>span{font-family:var(--mono-i18n,var(--font-mono));font-size:.625rem}
+.folio-outline-trigger{position:fixed;inset-inline-start:1.5rem;inset-block-end:1.5rem;z-index:var(--z-sticky,30)}
+.folio-outline-sheet .folio-toc a{min-height:44px}
+.folio-reading-progress{position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-sticky,30);height:2px;pointer-events:none}
+.folio-reading-progress>div{height:100%;background:var(--accent)}
+.folio-author-panel{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1.5rem;border-block:1px solid var(--rule);padding-block:2rem;margin-block-start:3rem}
+.folio-author-avatar{width:4.5rem;height:4.5rem;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius);background:var(--paper-2);font-family:var(--mono-i18n,var(--font-mono))}
+.folio-author-avatar img{width:100%;height:100%;object-fit:cover}
+.folio-author-panel h2{font-family:var(--serif-i18n,var(--font-heading));font-size:var(--fs-item);font-weight:400;margin:0}
+.folio-author-role{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa);margin-block-start:.5rem}
+.folio-author-panel p{font-size:.9375rem;color:var(--ink-2);line-height:1.65;margin-block:1rem}
+.folio-author-links{display:flex;flex-wrap:wrap;gap:1rem}
+.folio-author-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--ink);font-size:.8125rem}
+.folio-reading-figure{margin-block:.5rem 0}
+.folio-reading-figure>div{position:relative;overflow:hidden;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--paper-2)}
+.folio-reading-figure img,.folio-reading-figure video{width:100%;height:100%;object-fit:cover}
+.folio-reading-figure[data-fit=contain] img,.folio-reading-figure[data-fit=contain] video{object-fit:contain}
+.folio-reading-figure figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-block-end:1px solid var(--rule);padding-block:.75rem;font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
+.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 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-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 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)}
+.folio-device-preview{margin:0;width:100%;min-width:0}
+.folio-device-preview>div{border:1px solid var(--rule-hard);overflow:hidden;border-radius:var(--radius-sm);background:var(--paper);box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--ink) 7%,transparent)}
+.folio-browser-bar{display:flex;align-items:center;gap:1rem;background:var(--paper-2);border-block-end:1px solid var(--rule);padding:.6875rem .875rem;font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
+.folio-browser-bar>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.folio-device-screen{position:relative;aspect-ratio:16/10;overflow:hidden}
+.folio-device-screen img{width:100%;height:100%;object-fit:cover}
+.folio-device-preview[data-kind=phone]{max-width:16.625rem}
+.folio-device-preview[data-kind=phone]>div{border-width:.5rem;border-radius:calc(var(--radius) * 1.5)}
+.folio-device-preview[data-kind=phone] .folio-device-screen{aspect-ratio:9/19}
+.folio-device-preview figcaption{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa);margin-block-start:.75rem}
+.folio-command-tabs{min-width:0}
+.folio-command-tabs [role=tablist]{flex-wrap:wrap}
+.folio-command-tabs [role=tabpanel]:not([hidden]){display:grid;gap:.75rem}
+.folio-command-tabs p{font-size:.8125rem;color:var(--ink-2);line-height:1.65;margin:0}
+.folio-command-footer{display:flex;flex-wrap:wrap;gap:.75rem;border-block-start:1px solid var(--rule);padding-block-start:.75rem;margin-block-start:1rem;font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa)}
+.folio-reading-surface{min-width:0;color:var(--ink-2)}
+.folio-reading-surface[data-numbered]{counter-reset:folio-section}
+.folio-reading-surface[data-numbered] h2{counter-increment:folio-section}
+.folio-reading-surface[data-numbered] h2::before{content:counter(folio-section,decimal-leading-zero) ' ';font-family:var(--mono-i18n,var(--font-mono));font-size:.625em;color:var(--ink-3-aa)}
+@media(min-width:1200px){.folio-reading-layout{display:grid;grid-template-columns:minmax(0,var(--w-reading,54rem)) var(--toc-w,12rem);justify-content:space-between;gap:var(--toc-gap,3rem)}.folio-outline-trigger{display:none}}
+@media(max-width:1199px){.folio-reading-layout>.folio-toc{display:none}}
+@media(max-width:760px){.folio-detail-opening[data-aside],.folio-preview-pair[data-mobile]{grid-template-columns:1fr}.folio-preview-pair{justify-items:center}.folio-detail-metabar dl{gap:1.25rem 2rem}.folio-feature-pairs{grid-template-columns:1fr}}
+@media(min-width:760px){.folio-action-band{grid-template-columns:minmax(0,1fr) auto;align-items:end}.folio-action-band__eyebrow{grid-column:1/-1}.folio-action-band__actions{justify-content:flex-end}}
+@media(max-width:640px){.folio-record-pager{grid-template-columns:1fr}.folio-record-pager-link[data-direction=prev]{border-inline-end:0;padding-inline-end:0}.folio-record-pager-link[data-direction=next]{padding-inline-start:0}.folio-author-panel{grid-template-columns:3.25rem minmax(0,1fr);gap:1rem}.folio-author-avatar{width:3.25rem;height:3.25rem}}
+@media print{.folio-toc,.folio-outline-trigger,.folio-reading-progress{display:none}}
+:lang(zh) :is(.folio-detail-masthead h1,.folio-reading-heading h2,.folio-action-band h2){letter-spacing:var(--ls-cjk,normal);line-height:1.35}
+.folio-reading-form{display:grid;gap:1rem;max-width:28rem;margin-block:1rem}
+.folio-reading-form[data-inline]{grid-template-columns:minmax(0,1fr) auto;align-items:end}
+@media(max-width:640px){.folio-reading-form[data-inline]{grid-template-columns:1fr}}
+.folio-architecture-columns{margin-block-start:2rem}
+.folio-architecture-columns>div:first-child{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2rem}
+.folio-architecture-columns>div:first-child>div{display:flex;flex-direction:column}
+.folio-architecture-columns h3{font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;color:var(--ink-3-aa);margin-block:0 .75rem}
+.folio-architecture-node{position:relative;border:1px solid var(--rule-2);border-radius:var(--radius-sm);padding:1rem;margin-block-end:1.5rem}
+.folio-architecture-node+.folio-architecture-node::before{content:'';position:absolute;inset-inline-start:50%;inset-block-start:-1.5rem;height:1.5rem;border-inline-start:1px solid var(--rule-2)}
+.folio-architecture-node strong{display:block;font-size:.875rem;font-weight:400}
+.folio-architecture-node span,.folio-architecture-foundation span{display:block;font-family:var(--mono-i18n,var(--font-mono));font-size:.6875rem;line-height:1.6;margin-block-start:.375rem;color:var(--ink-3-aa)}
+.folio-architecture-columns [data-connected]::after{content:'';display:block;flex:1;min-height:1.5rem;width:1px;margin-inline:auto;margin-block-start:-1.5rem;background:var(--rule-2)}
+.folio-architecture-foundation{background:var(--feature-surface);color:var(--on-feature);padding:1rem;border-radius:var(--radius-sm)}
+.folio-architecture-foundation strong{font-size:.9375rem;font-weight:400}
+.folio-architecture-foundation span{color:inherit;opacity:.8}
+.folio-token-line{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font-family:var(--sans);font-size:.8125rem;line-height:1.5;margin-block:0;color:var(--ink-2)}
+.folio-token-line>ul{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem;list-style:none;padding:0;margin:0}
+.folio-token-line strong{color:var(--ink);font-weight:500}
+.folio-token-icon{display:inline-flex;vertical-align:-.2em;margin-inline-end:.25rem;color:var(--ink-2)}
+.folio-token-separator{margin-inline-end:.75rem;color:var(--rule-2)}
+.folio-token-line:not([data-flow])>ul{gap:.5rem;align-items:center}
+.folio-token-line:not([data-flow]) li{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--paper-2)}
+.folio-token-line:not([data-flow]) .folio-token-separator{display:none}
+.folio-token-line:not([data-flow]) .folio-token-icon{display:flex;flex:none;margin:0}
+.folio-token-line + p{margin-block-start:.75rem}
+.folio-media-playback button{border-radius:50%;inline-size:2.75rem;block-size:2.75rem;box-shadow:0 2px 12px color-mix(in srgb,var(--ink) 12%,transparent)}
+.folio-command-tabs [role=tablist]{display:flex;flex-wrap:nowrap;inline-size:100%;max-inline-size:100%;gap:.25rem;padding:.25rem;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper-2)}
+.folio-command-tabs [role=tab]{flex:1 0 auto;padding:.5rem .75rem;border:0;border-radius:var(--radius-sm);font-size:.8125rem}
+.folio-command-tabs .folio-tabs-list[data-orientation=horizontal][data-measured]::before{top:var(--tab-y);height:var(--tab-height);border-radius:var(--radius-sm);background:var(--paper);box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 7%,transparent)}
+.folio-command-tabs [role=tab]:focus-visible{outline:1px solid var(--rule-2);outline-offset:-3px}
+.folio-command-tabs [role=tab][data-state=active]{background:transparent;box-shadow:none}
+.folio-command-tabs [role=tabpanel]{margin-block-start:0;padding-block-start:1rem;gap:.625rem}
+.folio-command-tabs [role=tabpanel][hidden]{display:none}
+@media(max-width:640px){.folio-architecture-columns>div:first-child{grid-auto-flow:row;gap:1rem}.folio-architecture-columns [data-connected]::after{display:none}}
+.folio-feature-description{color:var(--ink-2);font-size:1rem;line-height:1.7}
+.folio-content-figure{margin-block:2rem;margin-inline:0}
+.folio-content-figure[data-wide]{max-width:64rem;margin-inline:auto}
+.folio-content-figure img{width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--radius-sm)}
+.folio-content-figure figcaption{font-size:.875rem;color:var(--ink-3-aa);margin-block-start:.5rem}
+.folio-reading-surface table{width:100%;table-layout:auto}
+.folio-reading-surface :is(th,td){white-space:normal;overflow-wrap:anywhere}
+.folio-reading-page{min-height:100vh;padding-block:clamp(2.5rem,7vw,5.25rem) 6rem;background:var(--paper);color:var(--ink)}
+.folio-detail-opening:not([data-stacked]){grid-template-columns:minmax(0,1.35fr) minmax(17rem,.65fr);gap:clamp(3rem,7vw,6.5rem)}
+.folio-detail-opening:not([data-stacked])>.folio-detail-dek{margin-block-start:.5rem;max-width:42ch}
+.folio-detail-opening[data-stacked]:not([data-aside]){grid-template-columns:1fr;gap:1.75rem}
+.folio-detail-opening[data-stacked]:not([data-aside])>.folio-detail-dek{margin:0}
+@media(max-width:760px){.folio-detail-opening:not([data-stacked]){grid-template-columns:1fr;gap:1.75rem}}
+.folio-command-snippet pre{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;margin:0;font-family:var(--mono-i18n,var(--font-mono));font-size:.8125rem;line-height:1.7}
+.folio-command-muted{color:var(--ink-3-aa)}
+.folio-command-normal{color:var(--ink-2)}
+.folio-command-strong{color:var(--ink);font-weight:500}