:root,
html[data-theme="dark"] {
--ds-origin-bg: #0e0a06;
--ds-origin-bg-elev: #18120c;
--ds-origin-text: #f0e7d6;
--ds-origin-muted: #a8a098;
--ds-origin-faint: #6b6357;
--ds-origin-accent: #d4a04a;
--ds-origin-accent-dk: #b8924a;
--ds-origin-border: #3a3530;
--ds-origin-border-sf: #2a2520;
--ds-origin-warn-bg: #2a2310;
--ds-origin-warn-bd: #8f6e2e;
--ds-origin-serif: Georgia, "Times New Roman", serif;
--ds-origin-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--ds-origin-mono: "SF Mono", Monaco, Consolas, monospace;
}
html[data-theme="light"] {
--ds-origin-bg: #f8f4ec;
--ds-origin-bg-elev: #fdfaf2;
--ds-origin-text: #1a1612;
--ds-origin-muted: #6b6357;
--ds-origin-faint: #948b7d;
--ds-origin-accent: #b8924a;
--ds-origin-accent-dk: #8f6e2e;
--ds-origin-border: #d4c9b3;
--ds-origin-border-sf: #e8dfcf;
--ds-origin-warn-bg: #fef9e7;
--ds-origin-warn-bd: #e6c84a;
}
.origin-shell {
display: grid;
grid-template-columns: 280px 1fr;
min-height: 100vh;
background: var(--ds-origin-bg);
color: var(--ds-origin-text);
font-family: var(--ds-origin-serif);
}
.origin-sidebar {
background: var(--ds-origin-bg-elev);
border-right: 1px solid var(--ds-origin-border);
padding: 32px 24px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.origin-sidebar h1 {
font-size: 28px;
letter-spacing: -0.02em;
margin: 0 0 4px 0;
font-weight: 400;
}
.origin-sidebar .subtitle {
font-size: 11px;
color: var(--ds-origin-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 32px;
font-family: var(--ds-origin-sans);
}
.origin-nav-group { margin-bottom: 24px; }
.origin-nav-group .group-label {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ds-origin-faint);
font-family: var(--ds-origin-sans);
margin-bottom: 8px;
padding: 0 8px;
font-weight: 600;
}
.origin-nav-group .nav-item {
display: block;
padding: 7px 8px;
font-size: 14px;
color: var(--ds-origin-text);
text-decoration: none;
border-radius: 3px;
border-left: 2px solid transparent;
margin-bottom: 1px;
transition: background 120ms, border-color 120ms;
}
.origin-nav-group .nav-item:hover {
background: var(--ds-origin-bg);
border-left-color: var(--ds-origin-accent);
}
.origin-nav-group .nav-item.active {
background: var(--ds-origin-bg);
border-left-color: var(--ds-origin-accent);
color: var(--ds-origin-accent-dk);
font-weight: 600;
}
.origin-main {
padding: 48px 64px 96px;
max-width: 1100px;
}
.origin-breadcrumb {
font-family: var(--ds-origin-sans);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-origin-muted);
margin-bottom: 16px;
}
.origin-breadcrumb a {
color: var(--ds-origin-muted);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.origin-breadcrumb a:hover { border-bottom-color: var(--ds-origin-accent); }
.origin-page-title {
font-size: 56px;
font-weight: 400;
letter-spacing: -0.02em;
margin: 0 0 8px 0;
line-height: 1.05;
}
.origin-page-deck {
font-size: 18px;
color: var(--ds-origin-muted);
font-style: italic;
margin: 0 0 48px 0;
max-width: 720px;
line-height: 1.5;
}
.origin-tabs {
display: flex;
border-bottom: 1px solid var(--ds-origin-border);
margin-bottom: 40px;
position: sticky;
top: 0;
background: var(--ds-origin-bg);
z-index: 10;
padding-top: 12px;
flex-wrap: wrap;
}
.origin-tab {
font-family: var(--ds-origin-sans);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-origin-muted);
background: none;
border: none;
padding: 14px 18px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-weight: 600;
}
.origin-tab:hover { color: var(--ds-origin-text); }
.origin-tab.active {
color: var(--ds-origin-accent-dk);
border-bottom-color: var(--ds-origin-accent);
}
.origin-tab-panel { display: none; }
.origin-tab-panel.active { display: block; }
.origin-tab-panel h2 {
font-size: 32px;
font-weight: 400;
letter-spacing: -0.01em;
margin: 48px 0 16px 0;
}
.origin-tab-panel h2:first-child { margin-top: 0; }
.origin-tab-panel h3 {
font-size: 18px;
font-weight: 700;
margin: 32px 0 12px 0;
font-family: var(--ds-origin-sans);
letter-spacing: 0.02em;
}
.origin-tab-panel p {
font-size: 17px;
line-height: 1.65;
margin: 0 0 16px 0;
max-width: 720px;
}
.origin-tab-panel p.lead {
font-size: 19px;
font-style: italic;
color: var(--ds-origin-muted);
max-width: 760px;
}
.origin-stat-block {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 24px;
margin: 32px 0;
padding: 24px;
background: var(--ds-origin-bg-elev);
border: 1px solid var(--ds-origin-border-sf);
border-radius: 4px;
}
.origin-stat .stat-value {
font-size: 32px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ds-origin-accent-dk);
display: block;
font-family: var(--ds-origin-serif);
}
.origin-stat .stat-label {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ds-origin-muted);
font-family: var(--ds-origin-sans);
font-weight: 600;
}
.origin-table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
font-size: 15px;
font-family: var(--ds-origin-sans);
}
.origin-table th {
text-align: left;
padding: 12px 16px;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-origin-muted);
border-bottom: 1px solid var(--ds-origin-border);
font-weight: 700;
}
.origin-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--ds-origin-border-sf);
}
.origin-table tr:last-child td { border-bottom: none; }
.origin-callout {
border-left: 3px solid var(--ds-origin-accent);
padding: 16px 20px;
background: var(--ds-origin-bg-elev);
margin: 24px 0;
font-style: italic;
color: var(--ds-origin-muted);
max-width: 760px;
}
.origin-tag {
display: inline-block;
font-family: var(--ds-origin-sans);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 8px;
border: 1px solid var(--ds-origin-border);
border-radius: 2px;
color: var(--ds-origin-muted);
margin-right: 4px;
font-weight: 700;
}
.origin-tag.pending {
background: var(--ds-origin-warn-bg);
border-color: var(--ds-origin-warn-bd);
color: var(--ds-origin-accent-dk);
}
.origin-figure {
margin: 32px 0;
padding: 24px;
background: var(--ds-origin-bg-elev);
border: 1px solid var(--ds-origin-border-sf);
border-radius: 4px;
}
.origin-figure svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.origin-figure figcaption {
margin-top: 12px;
font-size: 12px;
color: var(--ds-origin-muted);
font-family: var(--ds-origin-sans);
text-align: center;
letter-spacing: 0.04em;
}
@media (max-width: 900px) {
.origin-shell { grid-template-columns: 1fr; }
.origin-sidebar { position: relative; height: auto; }
.origin-main { padding: 32px 24px 64px; }
.origin-page-title { font-size: 40px; }
}
.origin-figure img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
border-radius: 2px;
}
/* ============ Viewer modal ============ */
.origin-figure img { cursor: zoom-in; transition: transform 120ms; }
.origin-figure img:hover { transform: scale(1.005); }
.origin-viewer {
position: fixed;
inset: 0;
background: rgba(8, 6, 4, 0.92);
z-index: 9999;
display: none;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
font-family: var(--ds-origin-sans);
}
.origin-viewer.open { display: flex; }
body.origin-viewer-open { overflow: hidden; }
.origin-viewer-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
background: rgba(20, 16, 10, 0.7);
border-bottom: 1px solid rgba(184, 146, 74, 0.3);
backdrop-filter: blur(8px);
flex-shrink: 0;
}
.origin-viewer-title {
color: #f0e7d6;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
}
.origin-viewer-counter {
color: #b8924a;
font-size: 12px;
letter-spacing: 0.1em;
font-family: var(--ds-origin-mono);
}
.origin-viewer-controls { display: flex; gap: 6px; }
.origin-viewer-btn {
background: transparent;
border: 1px solid rgba(184, 146, 74, 0.4);
color: #d4c9b3;
width: 38px;
height: 38px;
border-radius: 3px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms, border-color 120ms, color 120ms;
padding: 0;
}
.origin-viewer-btn:hover {
background: rgba(184, 146, 74, 0.15);
border-color: #b8924a;
color: #f0e7d6;
}
.origin-viewer-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
background: transparent;
}
.origin-viewer-btn svg { width: 18px; height: 18px; }
.origin-viewer-zoom-readout {
color: #948b7d;
font-size: 11px;
font-family: var(--ds-origin-mono);
min-width: 48px;
text-align: center;
padding: 0 6px;
align-self: center;
}
.origin-viewer-stage {
flex: 1;
position: relative;
overflow: hidden;
background: #0a0806;
cursor: grab;
}
.origin-viewer-stage.grabbing { cursor: grabbing; }
.origin-viewer-canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transform-origin: center center;
transition: transform 160ms ease-out;
user-select: none;
pointer-events: none;
max-width: 95%;
max-height: 95%;
}
.origin-viewer-canvas.dragging { transition: none; }
.origin-viewer-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(20, 16, 10, 0.7);
border: 1px solid rgba(184, 146, 74, 0.4);
color: #d4c9b3;
width: 48px;
height: 64px;
border-radius: 3px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
.origin-viewer-nav:hover { background: rgba(184, 146, 74, 0.2); color: #f0e7d6; }
.origin-viewer-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.origin-viewer-nav.prev { left: 16px; }
.origin-viewer-nav.next { right: 16px; }
.origin-viewer-nav svg { width: 24px; height: 24px; }
.origin-viewer-caption {
padding: 10px 24px 14px;
background: rgba(20, 16, 10, 0.6);
border-top: 1px solid rgba(184, 146, 74, 0.2);
color: #b8a98a;
font-size: 12px;
text-align: center;
font-style: italic;
}
@media print {
body * { visibility: hidden; }
.origin-viewer.open,
.origin-viewer.open * { visibility: visible; }
.origin-viewer.open .origin-viewer-bar,
.origin-viewer.open .origin-viewer-nav,
.origin-viewer.open .origin-viewer-caption { display: none !important; }
.origin-viewer.open {
position: static; background: white;
}
.origin-viewer.open .origin-viewer-stage {
background: white; overflow: visible; height: auto;
}
.origin-viewer.open .origin-viewer-canvas {
position: static; transform: none !important;
max-width: 100%; max-height: none; display: block; margin: 0 auto;
}
}
/* ============ Viewer light mode ============ */
.origin-viewer.light {
background: rgba(248, 244, 236, 0.96);
}
.origin-viewer.light .origin-viewer-bar {
background: rgba(253, 250, 242, 0.85);
border-bottom-color: rgba(143, 110, 46, 0.3);
}
.origin-viewer.light .origin-viewer-title { color: #1a1612; }
.origin-viewer.light .origin-viewer-counter { color: #8f6e2e; }
.origin-viewer.light .origin-viewer-btn {
border-color: rgba(143, 110, 46, 0.4);
color: #4a3f30;
}
.origin-viewer.light .origin-viewer-btn:hover {
background: rgba(184, 146, 74, 0.12);
border-color: #8f6e2e;
color: #1a1612;
}
.origin-viewer.light .origin-viewer-zoom-readout { color: #6b6357; }
.origin-viewer.light .origin-viewer-stage { background: #faf6ee; }
.origin-viewer.light .origin-viewer-nav {
background: rgba(253, 250, 242, 0.85);
border-color: rgba(143, 110, 46, 0.4);
color: #4a3f30;
}
.origin-viewer.light .origin-viewer-nav:hover {
background: rgba(184, 146, 74, 0.18);
color: #1a1612;
}
.origin-viewer.light .origin-viewer-caption {
background: rgba(253, 250, 242, 0.7);
border-top-color: rgba(143, 110, 46, 0.2);
color: #6b6357;
}
/* ============ Image Gallery ============ */
.origin-gallery-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 0 0 24px 0;
margin-bottom: 32px;
border-bottom: 1px solid var(--ds-origin-border);
font-family: var(--ds-origin-sans);
}
.origin-gallery-count {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-origin-accent-dk);
}
.origin-gallery-hint {
font-size: 11px;
color: var(--ds-origin-muted);
font-style: italic;
}
.origin-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
.origin-gallery-tile {
margin: 0;
padding: 14px;
background: var(--ds-origin-bg-elev);
border: 1px solid var(--ds-origin-border-sf);
border-radius: 4px;
transition: border-color 140ms, transform 160ms, box-shadow 160ms;
display: flex;
flex-direction: column;
}
.origin-gallery-tile:hover {
border-color: var(--ds-origin-accent);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}
.origin-gallery-tile img {
display: block;
width: 100%;
height: 200px;
object-fit: contain;
background: var(--ds-origin-bg);
border-radius: 2px;
cursor: zoom-in;
}
.origin-gallery-tile figcaption {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
font-family: var(--ds-origin-sans);
}
.origin-gallery-title {
font-size: 14px;
font-weight: 700;
color: var(--ds-origin-text);
letter-spacing: 0.01em;
}
.origin-gallery-pos {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ds-origin-faint);
font-weight: 600;
}
.origin-gallery-link {
margin-top: 6px;
font-size: 11px;
color: var(--ds-origin-accent-dk);
text-decoration: none;
letter-spacing: 0.04em;
align-self: flex-start;
border-bottom: 1px solid transparent;
transition: border-color 120ms;
}
.origin-gallery-link:hover {
border-bottom-color: var(--ds-origin-accent);
}
@media (max-width: 600px) {
.origin-gallery-grid { grid-template-columns: 1fr; }
.origin-gallery-tile img { height: 220px; }
}
/* ============ Collapsible sidebar ============ */
.origin-shell {
--origin-sidebar-w: 280px;
grid-template-columns: var(--origin-sidebar-w) 1fr;
transition: grid-template-columns 200ms ease;
}
body.origin-sidebar-collapsed .origin-shell {
--origin-sidebar-w: 56px;
}
.origin-sidebar {
position: relative;
overflow-x: hidden;
transition: padding 200ms ease;
}
.origin-sidebar-toggle {
position: absolute;
top: 16px;
right: 12px;
width: 32px;
height: 32px;
background: var(--ds-origin-bg-elev);
border: 1px solid var(--ds-origin-border);
border-radius: 3px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ds-origin-muted);
z-index: 5;
transition: background 120ms, border-color 120ms, color 120ms;
}
.origin-sidebar-toggle:hover {
background: var(--ds-origin-bg);
border-color: var(--ds-origin-accent);
color: var(--ds-origin-accent-dk);
}
.origin-sidebar-toggle svg { width: 14px; height: 14px; }
body.origin-sidebar-collapsed .origin-sidebar-toggle svg { transform: rotate(180deg); }
body.origin-sidebar-collapsed .origin-sidebar { padding: 16px 8px; }
body.origin-sidebar-collapsed .origin-sidebar h1,
body.origin-sidebar-collapsed .origin-sidebar .subtitle,
body.origin-sidebar-collapsed .origin-nav-group .group-label,
body.origin-sidebar-collapsed .origin-nav-group .nav-item span.nav-label {
display: none;
}
body.origin-sidebar-collapsed .origin-sidebar-toggle {
position: static;
margin: 0 auto 16px auto;
display: flex;
}
body.origin-sidebar-collapsed .origin-nav-group {
margin-bottom: 8px;
padding-top: 8px;
border-top: 1px solid var(--ds-origin-border-sf);
}
body.origin-sidebar-collapsed .origin-nav-group:first-of-type {
border-top: 0;
}
body.origin-sidebar-collapsed .origin-nav-group .nav-item {
padding: 8px 0;
margin: 0;
border-left: 0;
border-radius: 3px;
font-size: 0;
text-align: center;
position: relative;
}
body.origin-sidebar-collapsed .origin-nav-group .nav-item::before {
content: attr(data-icon);
font-size: 13px;
font-weight: 700;
color: var(--ds-origin-muted);
font-family: var(--ds-origin-mono);
letter-spacing: 0;
}
body.origin-sidebar-collapsed .origin-nav-group .nav-item.active::before {
color: var(--ds-origin-accent-dk);
}
body.origin-sidebar-collapsed .origin-nav-group .nav-item:hover::before {
color: var(--ds-origin-text);
}
/* Tooltip on hover when collapsed */
body.origin-sidebar-collapsed .origin-nav-group .nav-item:hover::after {
content: attr(data-label);
position: absolute;
left: calc(100% + 6px);
top: 50%;
transform: translateY(-50%);
background: var(--ds-origin-bg-elev);
border: 1px solid var(--ds-origin-border);
border-radius: 3px;
padding: 6px 10px;
font-size: 12px;
font-family: var(--ds-origin-sans);
color: var(--ds-origin-text);
white-space: nowrap;
z-index: 100;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
@media (max-width: 900px) {
.origin-shell { grid-template-columns: 1fr; }
.origin-sidebar { position: relative; height: auto; }
.origin-sidebar-toggle { display: none; }
}