/* Hallmark · genre: editorial · macrostructure: Long Document · nav: N6 · footer: Ft6
 * theme: custom · vibe: "warm archival tactile restrained editorial" · paper: oklch(92% 0.035 74) · accent: oklch(47% 0.12 36)
 * display: Newsreader · body: Source Serif 4 · axes: light / roman-serif / warm
 * enrichment: tier-A layered paper and media surfaces · studied: no · context: explicit
 * contrast: pass (40-41) · slop: pass (1-57) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (34, 49-57) · icons: pass (30)
 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */

body { background-color: var(--color-paper); background-image: repeating-linear-gradient(0deg, transparent 0, transparent 3px, var(--color-grain) 4px); }
.keep-pack-bar { border-block: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-muted); }
.keep-pack-bar .pack-brand { align-items: baseline; }
.keep-pack-bar .pack-brand strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.keep-pack-bar .pack-links a:last-child { border-bottom: var(--rule-hair) solid var(--color-ink); color: var(--color-ink); }

.keep-hero { padding-block: var(--space-2xl) var(--space-4xl); }
.keep-hero-mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-lg); padding-block: var(--space-md); border-block: var(--rule-strong) double var(--color-rule); color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.keep-hero-mast strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; }
.keep-hero-mast span:last-child { text-align: right; }
.keep-hero-lede { width: min(100%, 67rem); display: grid; gap: var(--space-lg); margin: var(--space-4xl) auto var(--space-3xl); }
.keep-hero-lede h1 { max-width: 12ch; font-size: var(--text-display); font-weight: 400; letter-spacing: -0.045em; line-height: 1; }
.keep-hero-lede > p:last-child { max-width: 42rem; margin-inline-start: auto; color: var(--color-muted); font-size: var(--text-md); }
.keep-hero-artifact { width: min(100%, 76rem); min-height: 39rem; position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr); gap: var(--space-xl); margin-inline: auto; padding: var(--space-xl); background: var(--color-paper-2); box-shadow: var(--space-sm) var(--space-lg) var(--space-2xl) var(--color-shadow); transform: rotate(-0.45deg); }
.artifact-photo { min-height: 33rem; position: relative; overflow: clip; background: var(--color-media); }
.artifact-photo::before { content: ""; position: absolute; width: 58%; height: 120%; top: -12%; right: -15%; transform: rotate(12deg); background: var(--color-paper-deep); opacity: 0.64; }
.artifact-photo span { position: absolute; width: 26%; height: 64%; right: 14%; bottom: 0; background: var(--color-paper-3); }
.artifact-photo i { position: absolute; width: 47%; height: 13%; left: 9%; bottom: 12%; border-top: var(--rule-strong) solid var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-paper-2); }
.artifact-photo b { position: absolute; left: var(--space-lg); top: var(--space-lg); color: var(--color-paper-2); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; }
.keep-hero-artifact > figcaption { align-self: center; display: grid; gap: var(--space-lg); padding: var(--space-lg); }
.keep-hero-artifact figcaption small { color: var(--color-accent); font-family: var(--font-label); }
.keep-hero-artifact h2 { font-size: var(--text-3xl); font-weight: 400; letter-spacing: -0.035em; line-height: 1.08; }
.keep-hero-artifact figcaption p { color: var(--color-muted); font-size: var(--text-md); }
.keep-hero-artifact figcaption footer { display: grid; gap: var(--space-xs); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.artifact-tab { position: absolute; right: calc(var(--space-xl) * -1); top: 22%; padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-label); font-size: var(--text-xs); transform: rotate(2deg); }
.keep-hero-close { max-width: 60ch; margin: var(--space-3xl) auto 0; color: var(--color-muted); font-size: var(--text-md); line-height: 1.75; }

.keep-section-heading { width: min(100%, 64rem); display: grid; gap: var(--space-lg); margin-inline: auto; margin-bottom: var(--space-2xl); }
.keep-section-heading > small, .keep-landing-copy > small, .keep-mobile-copy > small { color: var(--color-accent); font-family: var(--font-label); text-transform: uppercase; }
.keep-section-heading h2, .keep-landing-copy h2, .keep-mobile-copy h2 { max-width: 14ch; font-size: var(--text-display-s); font-weight: 400; letter-spacing: -0.04em; }
.keep-section-heading > p, .keep-landing-copy > p, .keep-mobile-copy > p { max-width: 40rem; margin-inline-start: auto; color: var(--color-muted); font-size: var(--text-md); }

.keep-comparison { padding-block: var(--space-4xl); border-top: var(--rule-hair) solid var(--color-rule); }
.keep-comparison-grid { display: grid; grid-template-columns: minmax(17rem, 0.7fr) minmax(0, 1.3fr); gap: var(--space-xl); align-items: stretch; }
.keep-comparison-grid > figure { min-width: 0; padding: var(--space-md); background: var(--color-paper-2); }
.keep-comparison-grid figcaption { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.keep-generic > div { min-height: 33rem; display: grid; align-content: center; justify-items: center; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper-3); text-align: center; }
.keep-generic h3 { max-width: 13ch; font-family: var(--font-body); font-size: var(--text-2xl); }
.keep-generic > div > p { max-width: 34ch; color: var(--color-muted); }
.generic-action { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); }
.keep-generic section { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-lg); }
.keep-generic article { display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-sm); background: var(--color-paper-2); text-align: left; }
.keep-generic article i { min-height: 4rem; border-radius: var(--radius-sm); background: var(--color-paper-deep); }
.keep-specific { transform: translateY(var(--space-xl)); }
.specific-archive { min-height: 33rem; position: relative; display: grid; grid-template-rows: auto 1fr; padding: var(--space-lg); background: var(--color-paper); box-shadow: var(--space-xs) var(--space-xs) 0 var(--color-shadow); }
.specific-archive > header { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.specific-archive > header strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.specific-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-xl); align-items: center; padding-block: var(--space-xl); }
.specific-image { min-height: 22rem; position: relative; overflow: clip; background: var(--color-media); transform: rotate(-1.5deg); }
.specific-image i { position: absolute; width: 62%; height: 74%; top: -8%; right: -12%; transform: rotate(9deg); background: var(--color-paper-deep); }
.specific-image span { position: absolute; left: var(--space-md); bottom: var(--space-md); color: var(--color-paper-2); font-family: var(--font-display); font-size: var(--text-3xl); }
.specific-layout article { display: grid; gap: var(--space-md); }
.specific-layout small { color: var(--color-accent); font-family: var(--font-label); }
.specific-layout h3 { font-size: var(--text-2xl); font-weight: 400; }
.specific-layout article p { color: var(--color-muted); }
.specific-layout article footer { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.specific-tab { position: absolute; right: calc(var(--space-md) * -1); top: 28%; padding: var(--space-xs) var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-label); font-size: var(--text-xs); }

.keep-landing { padding-block: var(--space-4xl); background: var(--color-paper-3); }
.keep-landing-copy { display: grid; gap: var(--space-lg); margin-bottom: var(--space-3xl); }
.commonplace-site { width: min(100% - (var(--page-gutter) * 2), 106rem); margin-inline: auto; background: var(--color-paper-2); box-shadow: 0 var(--space-xl) var(--space-3xl) var(--color-shadow); }
.commonplace-site > header, .commonplace-site > footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-lg); padding: var(--space-md) var(--space-xl); border-block: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.commonplace-site > header strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.commonplace-site > header nav { justify-self: end; display: flex; gap: var(--space-lg); }
.commonplace-opening { min-height: 35rem; display: grid; grid-template-columns: minmax(16rem, 0.55fr) minmax(0, 1.45fr); }
.commonplace-opening aside { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-lg); padding: var(--space-xl); border-inline-end: var(--rule-hair) solid var(--color-rule); }
.commonplace-opening aside > span, .commonplace-opening aside > b { color: var(--color-accent); font-family: var(--font-label); font-size: var(--text-xs); }
.commonplace-opening aside p { font-size: var(--text-lg); }
.commonplace-opening > div { align-self: center; padding: var(--space-2xl); }
.commonplace-opening > div small { color: var(--color-accent); font-family: var(--font-label); }
.commonplace-opening h3 { max-width: 14ch; margin-top: var(--space-lg); font-size: clamp(3.4rem, 7vw, 6.5rem); font-weight: 400; letter-spacing: -0.04em; }
.commonplace-spread { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr) 12rem; border-top: var(--rule-hair) solid var(--color-rule); }
.spread-photo { min-height: 31rem; position: relative; overflow: clip; background: var(--color-media); }
.spread-photo > span { position: absolute; z-index: var(--z-raised); left: var(--space-lg); top: var(--space-lg); color: var(--color-paper-2); font-family: var(--font-label); font-size: var(--text-xs); }
.spread-photo i { position: absolute; background: var(--color-paper-deep); }
.spread-photo i:first-of-type { width: 56%; height: 120%; top: -15%; right: -12%; transform: rotate(8deg); }
.spread-photo i:last-of-type { width: 44%; height: 16%; left: 12%; bottom: 14%; border-block: var(--rule-hair) solid var(--color-paper-2); background: transparent; }
.commonplace-spread > article { display: grid; align-content: center; gap: var(--space-lg); padding: var(--space-xl); }
.commonplace-spread article small { color: var(--color-accent); font-family: var(--font-label); }
.commonplace-spread h4 { font-size: var(--text-2xl); font-weight: 400; line-height: 1.15; }
.commonplace-spread article p { color: var(--color-muted); }
.commonplace-spread article footer { display: flex; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-family: var(--font-label); font-size: var(--text-xs); }
.spread-index { display: grid; align-content: center; gap: var(--space-xs); padding: var(--space-lg); border-inline-start: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.spread-index span { margin-top: var(--space-lg); color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.spread-index strong { font-weight: 400; }
.commonplace-site > footer span:last-child { text-align: right; }

.keep-product { padding-block: var(--space-4xl); }
.commonplace-workspace { min-height: 48rem; display: grid; grid-template-columns: 10rem minmax(0, 1fr) 18rem; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); box-shadow: var(--space-sm) var(--space-lg) var(--space-2xl) var(--color-shadow); }
.archive-index { display: flex; flex-direction: column; padding: var(--space-lg); border-inline-end: var(--rule-hair) solid var(--color-rule); }
.archive-index header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.archive-index header strong { font-family: var(--font-display); font-size: var(--text-2xl); }
.archive-index header span, .archive-index nav, .archive-index footer { color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.archive-index nav { display: grid; gap: var(--space-sm); padding-block: var(--space-xl); }
.archive-index nav span { padding-block: var(--space-xs); }
.archive-index nav .is-current { color: var(--color-accent); font-weight: 500; }
.archive-index footer { display: grid; gap: var(--space-xs); margin-top: auto; }
.commonplace-workspace > main { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; padding: var(--space-xl); }
.archive-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.archive-title small { color: var(--color-accent); font-family: var(--font-label); }
.archive-title h3 { max-width: 16ch; margin-top: var(--space-xs); font-size: var(--text-2xl); font-weight: 400; }
.archive-canvas { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(17rem, 0.9fr); gap: var(--space-xl); align-items: center; padding-block: var(--space-xl); }
.archive-media { min-height: 26rem; position: relative; overflow: clip; background: var(--color-media); }
.archive-media > span { position: absolute; z-index: var(--z-raised); top: var(--space-md); left: var(--space-md); color: var(--color-paper-2); font-family: var(--font-label); font-size: var(--text-xs); }
.archive-media i { position: absolute; background: var(--color-paper-deep); }
.archive-media i:first-of-type { width: 50%; height: 115%; top: -10%; right: -5%; transform: rotate(8deg); }
.archive-media i:last-of-type { width: 52%; height: 13%; left: 10%; bottom: 12%; border-block: var(--rule-hair) solid var(--color-paper-2); background: transparent; }
.archive-media b { position: absolute; left: var(--space-md); bottom: var(--space-sm); color: var(--color-paper-2); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; }
.archive-canvas > article { display: grid; gap: var(--space-lg); }
.archive-canvas > article p { color: var(--color-muted); font-size: var(--text-md); line-height: 1.7; }
.archive-canvas > article footer { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.archive-canvas > article footer span { padding: var(--space-2xs) var(--space-xs); border: var(--rule-hair) solid var(--color-rule); font-family: var(--font-label); font-size: var(--text-xs); }
.archive-related { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.archive-related > span { color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.archive-related > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.archive-related article { display: grid; gap: var(--space-xs); padding: var(--space-md); background: var(--color-paper); }
.archive-related b { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); }
.archive-related small { color: var(--color-muted); }
.archive-margin { display: grid; grid-template-rows: auto auto 1fr auto; border-inline-start: var(--rule-hair) solid var(--color-rule); }
.archive-margin > header { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font-family: var(--font-label); font-size: var(--text-xs); }
.archive-margin dl { padding: var(--space-lg); }
.archive-margin dl div { display: grid; gap: var(--space-xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.archive-margin dt { color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.archive-margin section { align-self: end; display: grid; gap: var(--space-sm); margin: var(--space-lg); padding: var(--space-lg); background: var(--color-paper); box-shadow: var(--space-2xs) var(--space-2xs) 0 var(--color-shadow); transform: rotate(1deg); }
.archive-margin section span, .archive-margin section small { color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.archive-margin > footer { padding: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-family: var(--font-label); font-size: var(--text-xs); text-align: center; }

.keep-mobile { display: grid; grid-template-columns: minmax(20rem, 0.4fr) minmax(0, 0.6fr); gap: var(--space-3xl); align-items: center; padding-block: var(--space-4xl); border-top: var(--rule-hair) solid var(--color-rule); }
.commonplace-mobile { padding: var(--space-lg); background: var(--color-paper-2); box-shadow: var(--space-sm) var(--space-lg) var(--space-2xl) var(--color-shadow); }
.commonplace-mobile > figcaption { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.commonplace-mobile > figcaption strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); }
.mobile-date { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xs); padding-block: var(--space-lg); }
.mobile-date span, .mobile-date small { color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.mobile-date strong { grid-row: 1 / 3; grid-column: 2; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; }
.mobile-media { min-height: 19rem; position: relative; overflow: clip; background: var(--color-media); }
.mobile-media i { position: absolute; background: var(--color-paper-deep); }
.mobile-media i:first-of-type { width: 56%; height: 110%; top: -10%; right: -8%; transform: rotate(9deg); }
.mobile-media i:last-of-type { width: 48%; height: 13%; left: 10%; bottom: 13%; border-block: var(--rule-hair) solid var(--color-paper-2); background: transparent; }
.mobile-media span { position: absolute; left: var(--space-md); bottom: var(--space-md); color: var(--color-paper-2); font-family: var(--font-label); font-size: var(--text-xs); }
.commonplace-mobile > article { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); }
.commonplace-mobile article small { color: var(--color-accent); font-family: var(--font-label); }
.commonplace-mobile article h3 { font-size: var(--text-xl); font-weight: 400; }
.commonplace-mobile article p { color: var(--color-muted); }
.mobile-file { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.mobile-file span, .mobile-file strong { min-height: 2.75rem; display: grid; place-items: center; border: var(--rule-hair) solid var(--color-rule); font-family: var(--font-label); font-size: var(--text-xs); }
.mobile-file strong { grid-column: 1 / -1; background: var(--color-accent); color: var(--color-accent-ink); }
.keep-mobile-copy { display: grid; gap: var(--space-lg); }
.keep-mobile-copy ul { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); }
.keep-mobile-copy li::before { content: "•"; margin-inline-end: var(--space-sm); color: var(--color-accent); }

.keep-system { padding-block: var(--space-4xl); border-top: var(--rule-hair) solid var(--color-rule); }
.keep-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.keep-system-grid > section { min-width: 0; display: grid; align-content: start; gap: var(--space-lg); padding: var(--space-xl); background: var(--color-paper-2); box-shadow: var(--space-2xs) var(--space-xs) var(--space-lg) var(--color-shadow); }
.keep-system-grid > section:last-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.keep-system-grid section > header { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.keep-system-grid section > header h3 { font-size: var(--text-md); }
.keep-system-grid section > header span { color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.keep-system-grid > section:last-child > header { grid-column: 1 / -1; }
.keep-actions nav, .keep-actions > div, .keep-actions footer { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.keep-actions nav { padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); }
.keep-actions nav span { min-height: 2.75rem; display: inline-flex; align-items: center; }
.keep-actions nav .is-current { color: var(--color-accent); border-bottom: var(--rule-hair) solid var(--color-accent); }
.keep-button, .keep-link, .keep-empty > span { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-rule); }
.keep-button.is-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.keep-link { border-color: transparent; color: var(--color-muted); text-decoration: underline; text-underline-offset: var(--space-2xs); }
.keep-actions footer { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.keep-actions footer span::before { content: "■"; margin-inline-end: var(--space-xs); color: var(--color-media); }
.keep-actions footer span:nth-child(2)::before { color: var(--color-paper-deep); }
.keep-actions footer span:nth-child(3)::before { color: var(--color-error); }
.keep-input > label { font-weight: 600; }
.keep-input > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-ink); background: var(--color-paper); }
.keep-input input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-ink); }
.keep-input > div span, .keep-input > small { color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
.keep-error { display: grid; gap: var(--space-xs); margin-top: var(--space-md); padding: var(--space-md); border-inline-start: var(--rule-strong) solid var(--color-error); background: var(--color-paper); }
.keep-error strong { color: var(--color-error); }
.keep-error span { color: var(--color-muted); }
.keep-loading, .keep-empty { min-width: 0; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper); }
.keep-loading p, .keep-empty { display: grid; gap: var(--space-xs); }
.keep-loading small, .keep-empty p { color: var(--color-muted); }
.keep-empty { align-items: start; transform: rotate(-0.5deg); box-shadow: var(--space-2xs) var(--space-2xs) 0 var(--color-shadow); }
.keep-empty > span { width: fit-content; margin-top: var(--space-sm); border-color: var(--color-accent); color: var(--color-accent); }

.keep-footer { border-top: var(--rule-strong) double var(--color-rule); background: var(--color-paper-2); }
.keep-footer .pack-footer-meta > div { display: flex; gap: var(--space-lg); }

@media (hover: hover) and (pointer: fine) {
  .keep-button, .keep-link, .keep-empty > span { transition: transform var(--dur-micro) var(--ease-out); }
  .keep-button:hover, .keep-link:hover, .keep-empty > span:hover { transform: translateY(calc(var(--space-3xs) * -1)); }
}

@media (max-width: 75rem) {
  .commonplace-workspace { grid-template-columns: 8rem minmax(0, 1fr); }
  .archive-margin { grid-column: 1 / -1; grid-template-columns: auto 1fr 1fr auto; grid-template-rows: auto; border-inline-start: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .archive-margin dl { display: flex; gap: var(--space-lg); }
  .archive-margin dl div { border-bottom: 0; }
  .archive-margin section { margin: var(--space-md); }
  .archive-margin > footer { display: grid; place-items: center; border-top: 0; border-inline-start: var(--rule-hair) solid var(--color-rule); }
}

@media (max-width: 60rem) {
  .keep-comparison-grid, .keep-mobile { grid-template-columns: minmax(0, 1fr); }
  .keep-specific { transform: none; }
  .commonplace-opening { grid-template-columns: minmax(0, 1fr); }
  .commonplace-opening aside { min-height: 16rem; border-inline-end: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .commonplace-spread { grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.8fr); }
  .spread-index { grid-column: 1 / -1; grid-template-columns: repeat(6, auto); gap: var(--space-md); border-inline-start: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .spread-index span { margin-top: 0; }
  .archive-canvas { grid-template-columns: minmax(0, 1fr); }
  .archive-media { min-height: 22rem; }
  .keep-system-grid { grid-template-columns: minmax(0, 1fr); }
  .keep-system-grid > section:last-child { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .keep-system-grid > section:last-child > header { grid-column: auto; }
  .commonplace-mobile { width: min(100%, 30rem); }
}

@media (max-width: 40rem) {
  .keep-pack-bar .pack-brand span, .keep-pack-bar .pack-links a:first-child { display: none; }
  .keep-hero, .keep-comparison, .keep-landing, .keep-product, .keep-mobile, .keep-system { padding-block: var(--space-2xl); }
  .keep-hero-mast { grid-template-columns: 1fr auto; }
  .keep-hero-mast span:last-child { display: none; }
  .keep-hero-lede { margin-block: var(--space-2xl); }
  .keep-hero-lede h1, .keep-section-heading h2, .keep-landing-copy h2, .keep-mobile-copy h2 { font-size: clamp(2.6rem, 13vw, 3.7rem); }
  .keep-hero-lede > p:last-child, .keep-section-heading > p, .keep-landing-copy > p, .keep-mobile-copy > p { margin-inline-start: 0; font-size: var(--text-base); }
  .keep-hero-artifact { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md); transform: none; }
  .artifact-photo { min-height: 19rem; }
  .keep-hero-artifact > figcaption { padding: var(--space-md); }
  .keep-hero-artifact h2 { font-size: var(--text-xl); }
  .artifact-tab { right: calc(var(--space-xs) * -1); }
  .keep-hero-close { margin-top: var(--space-2xl); font-size: var(--text-base); }
  .keep-comparison-grid > figure { padding: var(--space-sm); }
  .keep-generic section { grid-template-columns: minmax(0, 1fr); }
  .keep-generic article:nth-child(n+2) { display: none; }
  .specific-layout { grid-template-columns: minmax(0, 1fr); }
  .specific-image { min-height: 13rem; }
  .specific-tab { right: 0; }
  .commonplace-site { width: calc(100% - (var(--page-gutter) * 2)); }
  .commonplace-site > header { grid-template-columns: 1fr auto; padding: var(--space-md); }
  .commonplace-site > header > span, .commonplace-site > header nav span:not(:last-child) { display: none; }
  .commonplace-opening > div, .commonplace-opening aside { padding: var(--space-lg); }
  .commonplace-opening h3 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .commonplace-spread { grid-template-columns: minmax(0, 1fr); }
  .spread-photo { min-height: 20rem; }
  .commonplace-spread > article { padding: var(--space-lg); }
  .spread-index { grid-template-columns: auto 1fr; padding: var(--space-lg); }
  .commonplace-site > footer { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); }
  .commonplace-site > footer span:last-child { display: none; }
  .commonplace-workspace { grid-template-columns: minmax(0, 1fr); box-shadow: none; }
  .archive-index { flex-direction: row; align-items: center; padding: var(--space-md); border-inline-end: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .archive-index header { padding: 0; border: 0; }
  .archive-index header span, .archive-index nav span:not(.is-current), .archive-index footer { display: none; }
  .archive-index nav { margin-left: auto; padding: 0; }
  .commonplace-workspace > main { padding: var(--space-lg); }
  .archive-title h3 { font-size: var(--text-xl); }
  .archive-canvas > article p { font-size: var(--text-base); }
  .archive-related > div { grid-template-columns: minmax(0, 1fr); }
  .archive-related article:nth-child(n+2) { display: none; }
  .archive-margin { grid-template-columns: minmax(0, 1fr); }
  .archive-margin dl { display: grid; }
  .archive-margin section, .archive-margin > footer { display: none; }
  .mobile-file { grid-template-columns: minmax(0, 1fr); }
  .mobile-file strong { grid-column: auto; }
  .keep-system-grid > section { padding: var(--space-lg); }
  .keep-input > div { grid-template-columns: minmax(0, 1fr); }
  .keep-footer .pack-footer-meta > div { align-items: flex-start; flex-direction: column; gap: var(--space-xs); }
}