*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body, system-ui, -apple-system, sans-serif); line-height: 1.6; color: var(--color-text, #1a1a2e); background: var(--color-bg, #fff); min-height: 100vh; display: flex; flex-direction: column; position: relative; }
main { flex: 1; }
a { color: var(--color-accent, #6366f1); }
.aup-skip-link {
position: absolute;
inset-inline-start: 1rem;
inset-block-start: -3.5rem;
z-index: 1000;
padding: 0.5rem 1rem;
border-radius: 4px;
background: var(--color-text, #1a1a2e);
color: var(--color-bg, #fff);
font-weight: 600;
text-decoration: none;
transition: inset-block-start 0.15s;
}
.aup-skip-link:focus {
inset-block-start: 1rem;
outline: 2px solid var(--color-accent, #6366f1);
outline-offset: 2px;
}
:root {
--page-max: var(--container-max, 1280px);
}
body > main {
width: 100%;
max-width: var(--aup-content-max, none);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
body > .aup-app-footer,
body > header.aup-app-header > .aup-app-header-bar,
body > header.aup-app-header > .aup-app-header-strip {
width: 100%;
max-width: var(--page-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
box-sizing: border-box;
}
.container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); width: 100%; }
.page-header { padding: 3rem 0 2rem; }
.page-header h1 { margin: 0 0 0.5rem; font-size: 2rem; font-weight: 700; }
.page-header-desc { margin: 0; color: var(--color-text-muted, #64748b); font-size: 1.1rem; }
.section-header { padding: 2rem 0 1rem; }
.section-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0; color: var(--color-accent, #6366f1); margin-bottom: 0.25rem; }
.section-title { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 600; }
.section-desc { margin: 0; color: var(--color-text-muted, #64748b); }
.aup-input-field,
.aup-editor {
display: grid;
gap: 0.45rem;
width: 100%;
}
.aup-input-label,
.aup-editor-label {
color: color-mix(in srgb, var(--color-text, #111827) 82%, var(--color-dim, #64748b));
font-size: 0.86rem;
font-weight: 720;
}
.aup-input-control,
.aup-editor-control {
width: 100%;
min-height: 2.65rem;
padding: 0.62rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 82%, transparent);
border-radius: var(--radius-lg, 8px);
color: var(--color-text, #111827);
background: color-mix(in srgb, var(--color-surface, #f8fafc) 92%, var(--color-bg, #fff));
font: inherit;
}
.aup-input-control:focus,
.aup-editor-control:focus {
outline: 2px solid color-mix(in srgb, var(--color-accent, #6366f1) 34%, transparent);
outline-offset: 1px;
border-color: color-mix(in srgb, var(--color-accent, #6366f1) 62%, var(--color-border, #e2e8f0));
}
.aup-input-control[role="switch"] {
width: 2.6rem;
min-height: 1.35rem;
accent-color: var(--color-accent, #6366f1);
}
.aup-input-control[type="range"] {
padding-inline: 0;
accent-color: var(--color-accent, #6366f1);
}
progress.aup-input-control {
padding: 0;
overflow: hidden;
accent-color: var(--color-accent, #6366f1);
}
.aup-editor-control {
min-height: 12rem;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
font-size: 0.92rem;
line-height: 1.55;
resize: vertical;
}
.aup-action[data-exec][data-exec-state="running"] {
cursor: wait;
opacity: 0.72;
}
.aup-action[data-exec][data-exec-state="error"] {
border-color: color-mix(in srgb, var(--color-error, #dc2626) 68%, var(--color-border, #e2e8f0));
}
.aup-exec-result {
margin-top: 0.55rem;
padding: 0.62rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 82%, transparent);
border-radius: var(--radius-lg, 8px);
background: color-mix(in srgb, var(--color-surface, #f8fafc) 94%, var(--color-bg, #fff));
color: color-mix(in srgb, var(--color-text, #111827) 84%, var(--color-dim, #64748b));
font-size: 0.86rem;
line-height: 1.45;
}
.aup-exec-result:empty {
display: none;
}
.aup-exec-result[data-state="success"] {
border-color: color-mix(in srgb, var(--color-success, #16a34a) 52%, var(--color-border, #e2e8f0));
color: var(--color-text, #111827);
}
.aup-exec-result[data-state="error"] {
border-color: color-mix(in srgb, var(--color-error, #dc2626) 58%, var(--color-border, #e2e8f0));
color: var(--color-error, #dc2626);
}
main .aup-view[data-variant="settings-sidebar"] {
position: sticky;
top: 88px;
max-height: calc(100vh - 112px);
overflow: auto;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 78%, transparent);
border-radius: var(--radius-lg, 8px);
background:
linear-gradient(180deg, color-mix(in srgb, var(--color-accent, #6366f1) 9%, transparent), transparent 42%),
color-mix(in srgb, var(--color-surface, #f8fafc) 94%, var(--color-bg, #fff));
box-shadow: 0 20px 56px color-mix(in srgb, #000 10%, transparent);
}
main .aup-view[data-variant="settings-sidebar"] > .aup-text:first-child {
margin: 0 0 0.65rem;
padding: 0 0 0.8rem;
border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 70%, transparent);
color: var(--color-text, #111827);
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
}
main .aup-view[data-variant="settings-sidebar"] .aup-action {
min-height: 2.35rem;
margin: 0.12rem 0;
padding: 0.45rem 0.65rem;
border: 1px solid transparent;
border-radius: var(--radius-lg, 8px);
color: color-mix(in srgb, var(--color-text, #111827) 76%, var(--color-dim, #64748b));
font-weight: 700;
text-decoration: none;
}
main .aup-view[data-variant="settings-sidebar"] .aup-action:hover {
color: var(--color-text, #111827);
background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, transparent);
}
main .aup-view[data-variant="settings-sidebar"] .aup-action[data-variant="primary"] {
width: 100%;
margin: 0.12rem 0;
border-color: color-mix(in srgb, var(--color-accent, #6366f1) 36%, transparent);
color: var(--color-text, #111827);
background:
linear-gradient(90deg, color-mix(in srgb, var(--color-accent, #6366f1) 16%, transparent), transparent),
color-mix(in srgb, var(--color-surface, #f8fafc) 86%, var(--color-accent, #6366f1));
box-shadow: none;
}
main .aup-view[data-variant="settings-content"] {
width: min(100%, 860px);
padding: 0.5rem 0 4rem;
}
main .aup-view[data-variant="settings-content"] > .aup-text[data-variant="badge"]:first-child {
width: fit-content;
margin: 0 0 1rem;
padding: 0.32rem 0.58rem;
border: 1px solid color-mix(in srgb, var(--color-accent, #6366f1) 34%, var(--color-border, #e2e8f0));
border-radius: 999px;
color: var(--color-accent, #6366f1);
background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, transparent);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0;
}
main .aup-view[data-variant="settings-content"] > .aup-text[data-level="1"] {
max-width: 780px;
margin: 0 0 1rem;
color: var(--color-text, #111827);
font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
font-size: clamp(2.4rem, 6vw, 4.8rem);
font-weight: 820;
line-height: 0.98;
letter-spacing: 0;
}
main .aup-view[data-variant="settings-content"] > .aup-text:not([data-level]):not([data-mode]) {
max-width: 760px;
margin: 0 0 1.05rem;
color: color-mix(in srgb, var(--color-text, #111827) 82%, var(--color-dim, #64748b));
font-size: 1.02rem;
line-height: 1.82;
}
main .aup-view[data-variant="settings-content"] > .aup-text[data-level="2"] {
margin: 2.5rem 0 0.75rem;
padding-top: 1.25rem;
border-top: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 68%, transparent);
color: var(--color-text, #111827);
font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
font-size: clamp(1.45rem, 3vw, 2rem);
font-weight: 760;
line-height: 1.16;
letter-spacing: 0;
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] {
gap: 0.75rem;
margin-top: 1.4rem;
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] .aup-action {
min-height: 2.55rem;
padding: 0.55rem 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 72%, transparent);
border-radius: 999px;
color: var(--color-text, #111827);
background: color-mix(in srgb, var(--color-surface, #f8fafc) 86%, transparent);
font-weight: 800;
text-decoration: none;
box-shadow: none;
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] .aup-action[data-variant="primary"] {
border-color: color-mix(in srgb, var(--color-accent, #6366f1) 52%, transparent);
color: var(--color-on-accent, #fff);
background: linear-gradient(
135deg,
var(--color-accent, #6366f1),
var(--color-accent-secondary, var(--color-accent, #6366f1))
);
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] .aup-action:hover {
transform: translateY(-1px);
}
@media (max-width: 860px) {
main .aup-view[data-variant="settings-sidebar"] {
position: static;
width: 100% !important;
max-height: none;
}
main .aup-view[data-variant="settings-content"] {
width: 100%;
}
}
.aup-deck-frame .aup-overlay-shell.open,
.aup-overlay-shell.open {
display: block;
position: relative;
min-height: 160px;
width: 100%;
}
.aup-overlay-shell.open > .aup-overlay-backdrop {
position: absolute;
border-radius: var(--radius-lg, 12px);
}
.aup-overlay-shell.open > .aup-overlay-dialog,
.aup-overlay-shell.open > .aup-overlay-drawer {
position: absolute;
max-width: min(92%, 420px);
max-height: 70%;
}
.aup-overlay-shell[data-mode="toast"].open {
min-height: auto;
}
.aup-overlay-toast {
display: inline-flex;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-md, 8px);
background: var(--color-surface, #f8fafc);
border: 1px solid var(--color-border, #e2e8f0);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.aup-explorer-shell,
.aup-surface-shell,
.aup-wm-shell,
.aup-chat-shell,
.aup-cmt-shell,
.aup-entity-overview-shell,
.aup-terminal-shell {
background: var(--card-bg, var(--color-surface, #fff));
border: var(--card-border, 1px solid var(--color-border, #e2e8f0));
border-radius: var(--radius-lg, 12px);
overflow: hidden;
}
.aup-explorer-header,
.aup-surface-chrome,
.aup-wm-titlebar,
.aup-chat-header,
.aup-cmt-header,
.aup-entity-overview-header,
.aup-terminal-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.85rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
font-weight: 600;
font-size: 0.9rem;
}
.aup-surface-badge,
.aup-wm-badge,
.aup-chat-badge,
.aup-cmt-badge {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-dim, #64748b);
}
.aup-explorer-list { list-style: none; margin: 0; padding: 0.35rem 0; }
.aup-explorer-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.85rem;
font-size: 0.9rem;
}
.aup-explorer-path { margin-left: auto; color: var(--color-dim, #64748b); font-size: 0.75rem; font-family: ui-monospace, monospace; }
.aup-explorer-root { font-size: 0.75rem; color: var(--color-dim, #64748b); }
.aup-surface-content,
.aup-wm-body { padding: 0.85rem; }
.aup-chat-shell { min-height: 220px; max-height: 360px; }
.aup-cb-history { flex: 1; overflow: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.55rem; }
.aup-cb-msg { border-radius: 8px; padding: 0.5rem 0.7rem; background: color-mix(in srgb, var(--color-surface, #f8fafc) 90%, transparent); }
.aup-cb-msg-user { align-self: flex-end; background: color-mix(in srgb, var(--color-accent, #6366f1) 14%, transparent); }
.aup-cb-role { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--color-dim, #64748b); margin-bottom: 0.2rem; }
.aup-cb-bar { display: flex; gap: 0.4rem; padding: 0.55rem; border-top: 1px solid var(--color-border, #e2e8f0); }
.aup-cb-input { flex: 1; min-width: 0; padding: 0.4rem 0.55rem; border-radius: 6px; border: 1px solid var(--color-border, #e2e8f0); }
.aup-cb-send { padding: 0.4rem 0.75rem; border-radius: 6px; border: 1px solid var(--color-border, #e2e8f0); }
.aup-cb-bar--disabled { opacity: 0.65; }
.aup-chip-shell {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-accent, #6366f1) 10%, transparent);
color: var(--color-text, #111);
font-size: 0.85rem;
font-weight: 600;
margin-inline-end: 0.35rem;
}
.aup-chip-shell[data-color="success"] { background: color-mix(in srgb, #34a853 14%, transparent); color: #1e7e34; }
.aup-chip-shell[data-color="warning"] { background: color-mix(in srgb, #f9ab00 16%, transparent); color: #a66a00; }
.aup-chip-shell[data-color="error"] { background: color-mix(in srgb, #ea4335 14%, transparent); color: #c5221f; }
.aup-chip-shell[data-color="info"] { background: color-mix(in srgb, #1a73e8 12%, transparent); color: #1a73e8; }
.aup-chip-count {
min-width: 1.1rem;
padding: 0 0.3rem;
border-radius: 999px;
background: color-mix(in srgb, currentColor 12%, transparent);
font-size: 0.75rem;
text-align: center;
}
.aup-breadcrumb-shell .aup-breadcrumb-list {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.35rem;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.9rem;
}
.aup-breadcrumb-sep { margin: 0 0.15rem; color: var(--color-dim, #64748b); }
.aup-breadcrumb-current { font-weight: 600; }
.aup-kv-shell,
.aup-entity-card .aup-kv {
display: grid;
gap: 0.35rem;
padding: 0.65rem 0.85rem;
}
.aup-kv-row {
display: grid;
grid-template-columns: minmax(6rem, 34%) 1fr;
gap: 0.5rem;
padding: 0.25rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 70%, transparent);
font-size: 0.9rem;
}
.aup-kv-label { color: var(--color-dim, #64748b); font-weight: 600; }
.aup-kv-title,
.aup-entity-card-title {
margin: 0;
padding: 0.55rem 0.85rem 0;
font-size: 0.95rem;
font-weight: 700;
}
.aup-entity-cards { display: grid; gap: 0.65rem; padding: 0.65rem; }
.aup-entity-card {
border: 1px solid var(--color-border, #e2e8f0);
border-radius: var(--radius-md, 8px);
overflow: hidden;
}
.aup-pagination-shell {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.4rem 0.55rem;
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 999px;
font-size: 0.85rem;
}
.aup-pagination-btn {
border: 0;
background: transparent;
color: var(--color-dim, #64748b);
cursor: not-allowed;
}
.aup-tooltip-shell {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
.aup-tooltip-content {
display: inline-block;
padding: 0.35rem 0.55rem;
border-radius: 6px;
background: var(--color-text, #111);
color: var(--color-bg, #fff);
font-size: 0.78rem;
max-width: 16rem;
}
.aup-terminal-shell { background: #0c0c0c; color: #e2e8f0; }
.aup-terminal-titlebar { border-bottom-color: #222; color: #94a3b8; }
.aup-terminal-body {
margin: 0;
padding: 0.75rem 0.9rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
line-height: 1.45;
white-space: pre-wrap;
min-height: 120px;
}
.aup-terminal-line { margin: 0; }
.aup-canvas-toolbar--static {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding: 0.4rem 0.65rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
font-size: 0.8rem;
color: var(--color-dim, #64748b);
}
.aup-canvas-area { padding: 0.5rem; }
.aup-cmt-list { padding: 0.65rem 0.85rem; display: grid; gap: 0.65rem; }
.aup-cmt-item {
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 8px;
padding: 0.55rem 0.7rem;
}
.aup-cmt-meta {
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.8rem;
margin-bottom: 0.25rem;
}
.aup-cmt-body { margin: 0; font-size: 0.9rem; }
.aup-cmt-empty { padding: 0.85rem; color: var(--color-dim, #64748b); font-size: 0.9rem; }
.aup-calendar-agenda { display: grid; gap: 0.4rem; }
.aup-calendar-agenda-row { display: flex; gap: 0.75rem; font-size: 0.85rem; }
.aup-calendar-agenda-date { color: var(--color-dim, #64748b); min-width: 6rem; font-variant-numeric: tabular-nums; }
.aup-deck-widget-shell {
border: 1px solid var(--color-border, #e2e8f0);
border-radius: var(--radius-md, 8px);
overflow: hidden;
background: var(--color-surface, #fff);
}
.aup-deck-widget-chrome {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.85rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
font-weight: 600;
font-size: 0.9rem;
}
.aup-deck-widget-badge {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-dim, #64748b);
}
.aup-deck-widget-body { padding: 0.85rem; }
.aup-deck-widget-note { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--color-dim, #64748b); }
.aup-afs-stat-value { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.aup-afs-stat-label { color: var(--color-dim, #64748b); font-size: 0.9rem; }
.aup-dropzone-area {
display: grid;
gap: 0.35rem;
place-items: center;
min-height: 8rem;
padding: 1.25rem;
border: 2px dashed var(--color-border, #e2e8f0);
border-radius: 8px;
text-align: center;
}
.aup-finance-table, .aup-natal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.aup-finance-table th, .aup-finance-table td,
.aup-natal-table th, .aup-natal-table td {
text-align: left;
padding: 0.35rem 0.5rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.aup-progress-track {
height: 0.85rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-border, #e2e8f0) 80%, transparent);
overflow: hidden;
}
.aup-progress-fill {
height: 100%;
background: var(--color-accent, #6366f1);
}
.aup-searchable-dropdown-current {
padding: 0.45rem 0.65rem;
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 6px;
margin-bottom: 0.5rem;
}
.aup-searchable-dropdown-list { list-style: none; margin: 0; padding: 0; }
.aup-searchable-dropdown-item { padding: 0.3rem 0.5rem; }
.aup-searchable-dropdown-item.selected { font-weight: 700; }
.aup-webgl-placeholder {
display: grid;
place-items: center;
min-height: 10rem;
background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, transparent);
border-radius: 8px;
font-weight: 700;
}
.aup-post-editor-body { width: 100%; min-height: 8rem; font-family: inherit; }
.aup-type-block-body { white-space: pre-wrap; font-size: 0.9rem; }
.aup-xeyes-shell { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px 8px; }
:root,
[data-tone][data-palette] {
  --ds-bg: var(--color-bg);
  --ds-surface: var(--color-surface);
  --ds-text: var(--color-text);
  --ds-dim: var(--color-dim);
  --ds-accent: var(--color-accent);
  --ds-accent-bg: var(--color-accent-bg);
  --ds-border: var(--color-border);
  --ds-error: var(--color-error);
  --ds-success: var(--color-success);
  --ds-radius: var(--radius-md);
  --ds-radius-sm: var(--radius-sm);
  --ds-radius-lg: var(--radius-lg);
  --ds-spacing: var(--space-element);
  --ds-spacing-block: var(--space-block);
  --ds-spacing-section: var(--space-section);
  --ds-font-body: var(--font-body);
  --ds-font-heading: var(--font-heading);
  --font-body: "Inter", "Noto Sans SC", "IBM Plex Sans JP", "Noto Sans JP", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", system-ui, sans-serif;
  --color-dim: #52635d;
  --content-max: 44rem;
  --color-accent: #007b6a;
  --color-surface: #f4f7f5;
  --font-heading: "Sora", "Noto Sans SC", "IBM Plex Sans JP", "Noto Sans JP", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", system-ui, sans-serif;
  --color-bg: #fcfdfc;
  --color-border: #d7e0dc;
  --container-max: 1120px;
  --font-mono: "JetBrains Mono", monospace;
  --color-text: #111a17;
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-border: 1px solid rgba(29, 95, 84, 0.14);
  --color-accent-secondary: #1f7a6e;
  --color-hero-ink: #163b34;
  --color-hero-accent: #007b6a;
  --color-on-accent: #ffffff;
  --color-trace: #008f7a;
  --color-trace-soft: #d9f1eb;
  --font-display: "Sora", "Noto Sans SC", "IBM Plex Sans JP", "Noto Sans JP", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", system-ui, sans-serif;
  --font-utility: "JetBrains Mono", "Noto Sans SC", "IBM Plex Sans JP", "Noto Sans JP", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", ui-monospace, monospace;
  --grid-min-width: 250px;
  --heading-gradient: linear-gradient(135deg, #17211e, #008f7a 58%, #3152a3);
  --radius-lg: 6px;
  --shadow-card: 0 12px 34px rgba(25, 54, 48, 0.08);
  --shadow-hover: 0 18px 44px rgba(25, 54, 48, 0.11);
  --space-block: 20px;
  --space-section: 6rem;
  --type-display: clamp(4rem, 7.6vw, 8.2rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]),
  [data-tone][data-palette]:not([data-mode="light"]) {
    --color-dim: #98a8a3;
    --color-accent: #2ec8ae;
    --color-surface: #101d1a;
    --color-bg: #061211;
    --color-border: #20302b;
    --color-text: #e8f2ee;
    --card-bg: rgba(14, 27, 25, 0.94);
    --card-border: 1px solid rgba(79, 217, 192, 0.16);
    --color-accent-secondary: #4fd9c0;
    --color-hero-ink: #d8e7e2;
    --color-hero-accent: #55d8c1;
    --color-on-accent: #06120f;
    --color-trace: #2ec8ae;
    --color-trace-soft: #163f38;
    --heading-gradient: linear-gradient(135deg, #ffffff, #33d8bf 58%, #7aa7ff);
    --shadow-card: 0 12px 34px rgba(0, 0, 0, 0.24);
    --shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.32);
  }
}
[data-tone][data-palette][data-mode="dark"] {
  --color-dim: #98a8a3;
  --color-accent: #2ec8ae;
  --color-surface: #101d1a;
  --color-bg: #061211;
  --color-border: #20302b;
  --color-text: #e8f2ee;
  --card-bg: rgba(14, 27, 25, 0.94);
  --card-border: 1px solid rgba(79, 217, 192, 0.16);
  --color-accent-secondary: #4fd9c0;
  --color-hero-ink: #d8e7e2;
  --color-hero-accent: #55d8c1;
  --color-on-accent: #06120f;
  --color-trace: #2ec8ae;
  --color-trace-soft: #163f38;
  --heading-gradient: linear-gradient(135deg, #ffffff, #33d8bf 58%, #7aa7ff);
  --shadow-card: 0 12px 34px rgba(0, 0, 0, 0.24);
  --shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.32);

}
.portal-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--color-bg, #fff) 82%, transparent);
  border-bottom: 1px solid transparent;
  padding: 0;
  backdrop-filter: blur(20px) saturate(1.1);
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

.portal-header.scrolled {
  background: color-mix(in srgb, var(--color-bg, #fff) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-border, #e5e7eb) 50%, transparent);
}

.portal-header .container {
  /* The header rides the shared content column (document-css --page-max /
     --page-gutter). Because it centers in the viewport on the SAME column as
     each section's content, brand/actions align with the body at every width
     with no reserve hack and no separate --header-content-max token. The
     .portal-header element keeps its full-bleed sticky background; only this
     container is bounded. */
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 1.5rem;
  transition:
    min-height 0.2s ease,
    padding-block 0.2s ease;
}

/* Scroll-compact sticky state (arc#2390): toggled by script.js past a small
   scroll offset so the header doesn't permanently occupy its full height
   while reading long content. Desktop already fits one row, so this is a
   subtle height trim there; on mobile — where the compact layout below still
   spends real vertical space on a single row — it matters more. */
.portal-header.scrolled .container {
  min-height: 60px;
}

/* Header grammar: left group holds logo + main nav; right group holds
   language picker, mode toggle, and a reserved user-menu slot. */
.portal-header .header-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.6rem);
}

.portal-header .logo {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-weight: 460;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-text, #0f172a);
  text-decoration: none;
}

.portal-header .logo .logo-mark {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: linear-gradient(
    135deg,
    var(--color-accent, #2563eb),
    var(--color-accent-secondary, var(--color-accent, #2563eb))
  );
}

/* When the site provides an inline SVG logo, hide the textual site name —
   the SVG is the brand mark — and size the SVG to header height. */
.portal-header .logo .logo-svg {
  display: inline-flex;
  align-items: center;
}

.portal-header .logo img.logo-svg,
.portal-header .logo .logo-svg svg {
  height: 1.65rem;
  width: auto;
  display: block;
  /* The wordmark uses currentColor so it follows light/dark mode; the
     branded gradient mark inside the SVG keeps its own colors. */
  color: var(--color-text, #0f172a);
}

.portal-header.has-logo-svg .logo {
  gap: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.portal-header .main-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.portal-header .main-nav a {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-dim, #6b7280);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: color 0.2s ease;
  position: relative;
}

.portal-header .main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent, #2563eb);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.portal-header .main-nav a:hover {
  color: var(--color-text, #0f172a);
}

.portal-header .main-nav a:hover::after {
  transform: scaleX(1);
}

/* Header controls: optional CTA + locale picker + mode toggle + user slot. */
.portal-header .header-controls {
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

/* Primary CTA (nav item with variant:"cta") — a filled accent pill sized to
   the 32px control row so it reads as the header's main action rather than a
   stray label. Marketing sites opt in per nav item; default nav links are
   unaffected. */
.portal-header .nav-cta {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 0.95rem;
  margin-right: 0.25rem;
  border-radius: 999px;
  background: var(--color-accent, #2563eb);
  color: var(--accent-fg, #fff);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.portal-header .nav-cta:hover {
  background: color-mix(in srgb, var(--color-accent, #2563eb) 88%, #000);
  transform: translateY(-1px);
}

.portal-header .user-slot:empty {
  display: none;
}

.portal-header .user-slot {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin-left: 0;
}

/* Align the runtime-rendered header-actions strip (.web/template/header-actions
   → .aup-app-header-action buttons, e.g. the anonymous Login trigger) with the
   portal control pills above: same 32px round pill, transparent fill, dim
   stroke/glyph, and accent hover. Only presentation — markup stays owned by
   the shared SSR renderer. */
.portal-header .user-slot .aup-app-header-action {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 60%, transparent);
  color: var(--color-dim, #6b7280);
}

.portal-header .user-slot .aup-app-header-action:hover {
  color: var(--color-text, #0f172a);
  background: transparent;
  border-color: color-mix(in srgb, var(--color-accent, #2563eb) 40%, var(--color-border, #e5e7eb));
}

.portal-header .user-slot .aup-app-header-action svg {
  width: 16px;
  height: 16px;
}

/* Post-hydration authenticated state: keep the avatar trigger on the same
   32px control row. */
.portal-header .user-slot .aup-app-header-user-menu-trigger {
  height: 32px;
  box-sizing: border-box;
}

/* Mobile section-nav menu toggle (arc#2390) — hidden above the compact
   breakpoint (desktop keeps the inline nav; this button doesn't exist there
   visually), sized/shown by the compact-layout media query below. */
.portal-header-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 60%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-dim, #6b7280);
  cursor: pointer;
  padding: 0;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.portal-header-menu-toggle:hover {
  color: var(--color-text, #0f172a);
  border-color: color-mix(in srgb, var(--color-accent, #2563eb) 40%, var(--color-border, #e5e7eb));
}

.portal-header-menu-toggle .icon-menu-close {
  display: none;
}

.portal-header.nav-open .portal-header-menu-toggle .icon-menu-open {
  display: none;
}

.portal-header.nav-open .portal-header-menu-toggle .icon-menu-close {
  display: block;
}

/* Click-outside-to-close backdrop for the mobile nav drawer. Sits below the
   sticky header (same stacking context) and above page content. */
.portal-header-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: color-mix(in srgb, #000 32%, transparent);
  border: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.portal-header-backdrop[hidden] {
  display: none;
}

.portal-header .locale-picker {
  position: relative;
}

.portal-header .locale-picker-btn,
.portal-header .mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 32px;
  padding: 0 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 60%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-dim, #6b7280);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Both are icon-only square pills (the locale picker is now a globe-only
   trigger aligned with the AUP app-header locale-switcher). */
.portal-header .locale-picker-btn,
.portal-header .mode-toggle {
  width: 32px;
  padding: 0;
}

.portal-header .locale-picker-btn:hover,
.portal-header .mode-toggle:hover {
  color: var(--color-text, #0f172a);
  border-color: color-mix(in srgb, var(--color-accent, #2563eb) 40%, var(--color-border, #e5e7eb));
}

.portal-header .locale-picker-btn .icon-globe {
  transition: transform 0.2s;
}

.portal-header .locale-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 152px;
  background: color-mix(in srgb, var(--color-bg, #fff) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 70%, transparent);
  border-radius: 12px;
  box-shadow: 0 22px 48px color-mix(in srgb, var(--color-text, #0f172a) 12%, transparent);
  padding: 6px;
  z-index: 100;
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
}

.portal-header .locale-dropdown[hidden] {
  display: none;
}

.portal-header .locale-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-dim, #6b7280);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.86rem;
  font-weight: 460;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.portal-header .locale-option:hover {
  background: color-mix(in srgb, var(--color-accent, #2563eb) 6%, transparent);
  color: var(--color-text, #0f172a);
}

.portal-header .locale-option.active {
  color: var(--color-accent, #2563eb);
  font-weight: 540;
}

.portal-header .locale-option.active::before {
  content: "•";
  color: var(--color-accent, #2563eb);
  font-weight: 700;
}

/* Show sun by default, moon when dark */
.portal-header .mode-toggle .icon-moon {
  display: none;
}
.portal-header .mode-toggle .icon-sun {
  display: block;
}
.portal-header .mode-toggle.is-dark .icon-moon {
  display: block;
}
.portal-header .mode-toggle.is-dark .icon-sun {
  display: none;
}

@media (max-width: 860px) {
  .portal-header .container {
    min-height: auto;
    /* Horizontal gutter stays var(--page-gutter) (shared column); only add
       vertical breathing room now that the row can wrap. */
    padding-block: 0.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Only let the left group grow when it actually holds a nav (which needs the
     room / scrolls). A logo-only left group must stay its natural width, or it
     expands to fill the row and pushes the controls onto a second line — the
     stray line-break on minimal headers like aside. */
  .portal-header .container:has(.main-nav a) .header-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 1.25rem;
  }

  .portal-header .header-controls {
    flex-shrink: 0;
  }

  .portal-header .main-nav {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 1rem;
  }

  .portal-header .main-nav::-webkit-scrollbar {
    display: none;
  }

  .portal-header .main-nav a {
    white-space: nowrap;
  }
}

/* Compact mobile layout (arc#2390) — replaces the old behavior of stacking
   logo / section-nav / controls into three permanent rows (the actual bug
   reported: a sticky header eating a third of a 390×844 viewport). Brand +
   every essential action (nav entry point, language, theme, account) now
   stay on ONE row; the section nav moves into an expandable panel that
   overlays the page instead of pushing it down. Breakpoint matches the
   shared primitives-css.ts mobile cutoff (640px) for consistency across the
   fleet's header surfaces. */
@media (max-width: 640px) {
  .portal-header .container {
    flex-wrap: nowrap;
    min-height: 56px;
    padding-block: 0.4rem;
    gap: 0.5rem;
    /* .main-nav becomes an absolutely-positioned drawer below; .portal-header
       (position: sticky) is its containing block, so this only needs to stay
       a normal (non-positioned) flex row — no layout shift when the drawer
       opens/closes. */
  }

  /* The scrolled state's height floor is bounded below by the 44px touch
     targets themselves (criterion: every control stays >=44x44 in every
     state, scrolled included — so icons/pills never shrink here). The
     available lever is vertical padding: trimming it still yields a real,
     visible compaction (~58px -> ~49px) without an accessibility trade-off. */
  .portal-header.scrolled .container {
    min-height: 48px;
    padding-block: 0.15rem;
  }

  /* Matches (and overrides) the 860px block's `:has(.main-nav a) .header-left`
     rule at equal specificity + later source order — the nav no longer shares
     this row at all (it's an absolutely-positioned drawer, see .main-nav
     below), so the left group is just [logo, menu-toggle] and must stay
     content-sized instead of growing to fill the row. */
  .portal-header .container:has(.main-nav a) .header-left,
  .portal-header .header-left {
    flex: 0 1 auto;
    min-width: 0;
    gap: 0.35rem;
  }

  /* The nav no longer shares the row (it moved into the drawer below), so the
     left group is just the logo — never let it grow/shrink oddly. */
  .portal-header .logo {
    min-width: 0;
    overflow: hidden;
  }

  .portal-header .header-controls {
    flex-shrink: 0;
    gap: 0.25rem;
  }

  .portal-header .nav-cta {
    padding: 0 0.65rem;
    margin-right: 0;
    height: 44px;
  }

  /* Section-nav drawer: taken out of the row entirely and overlaid full-width
     below the header. Hidden (zero height, non-interactive) until
     .portal-header.nav-open is set by script.js's menu-toggle handler. */
  .portal-header .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: none;
    max-height: 0;
    overflow: hidden;
    overflow-x: visible;
    visibility: hidden;
    opacity: 0;
    background: var(--color-bg, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 60%, transparent);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--color-text, #0f172a) 10%, transparent);
    padding: 0 var(--page-gutter);
    transition:
      max-height 0.25s ease,
      opacity 0.2s ease,
      visibility 0.25s;
  }

  .portal-header.nav-open .main-nav {
    /* Bounded rather than unlimited, so a site with a long section list
       scrolls internally instead of pushing content below the viewport. */
    max-height: min(70vh, 420px);
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
  }

  .portal-header .main-nav a {
    white-space: normal;
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0;
    font-size: 0.92rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 40%, transparent);
  }

  .portal-header .main-nav a:last-child {
    border-bottom: 0;
  }

  .portal-header .main-nav a::after {
    display: none;
  }

  .portal-header-menu-toggle {
    display: inline-flex;
  }

  /* Touch targets: every icon/control button must be at least 44×44 CSS px
     on touch-sized viewports (WCAG 2.5.5 / Apple & Material HIG), even though
     the desktop control row uses a tighter 32px pill. */
  .portal-header-menu-toggle,
  .portal-header .locale-picker-btn,
  .portal-header .mode-toggle {
    width: 44px;
    height: 44px;
  }

  .portal-header .user-slot .aup-app-header-action,
  .portal-header .user-slot .aup-app-header-user-menu-trigger {
    width: 44px;
    height: 44px;
  }
}

.site-footer {
  background: color-mix(in srgb, var(--color-bg, #fff) 94%, var(--color-accent, #008f7a) 6%);
  border-top: 1px solid color-mix(in srgb, var(--color-border, #d7dfdc) 72%, transparent);
  margin-top: 0;
  padding: clamp(2.5rem, 5vw, 4.25rem) 0 1.5rem;
}

.site-footer .container {
  margin: 0 auto;
  max-width: var(--page-max);
  padding: 0 var(--page-gutter);
}

.site-footer .footer-top {
  align-items: start;
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  /* Two children today: the brand block and the link nav. The connection slot
     is optional and currently absent, so declaring its track unconditionally
     left an empty 0px column whose `gap` still applied, pushing the links one
     whole gap (48px at 1920, 3vw below that) short of the right edge. The
     track count has to follow the children that actually render. */
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: clamp(1.5rem, 3vw, 2.2rem);
}

.site-footer .footer-top.has-connection {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.site-footer .footer-brand-block {
  display: grid;
  gap: 0.8rem;
  max-width: 34rem;
}

.site-footer .footer-brand {
  align-items: center;
  display: inline-flex;
  text-decoration: none;
  width: fit-content;
}

.site-footer .footer-logo-svg,
.site-footer .footer-logo-svg svg,
.site-footer img.footer-logo-svg {
  color: var(--color-hero-ink, #163b34);
  display: block;
  height: 1.9rem;
  width: auto;
}

.site-footer .footer-logo-name {
  color: var(--color-hero-ink, #163b34);
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 1.08rem;
  font-weight: 650;
}

.site-footer .footer-tagline {
  word-break: keep-all;
  overflow-wrap: anywhere;
  color: var(--color-dim, #5d706b);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

.site-footer .footer-social {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.site-footer .footer-social-link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-dim, #5d706b);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  width: 2rem;
}

.site-footer .footer-social-link:hover {
  background: color-mix(in srgb, var(--color-accent, #008f7a) 9%, transparent);
  border-color: color-mix(in srgb, var(--color-accent, #008f7a) 22%, transparent);
  color: var(--color-accent, #008f7a);
}

.site-footer .footer-social-link svg {
  display: block;
  height: 1rem;
  width: 1rem;
}

.site-footer .footer-grid,
.site-footer .footer-grid[data-count="1"],
.site-footer .footer-grid[data-count="2"],
.site-footer .footer-grid[data-count="3"] {
  align-self: center;
  display: block;
}

.site-footer .footer-col ul,
.site-footer .footer-legal {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .footer-col li {
  margin: 0;
}

.site-footer .footer-col a,
.site-footer .footer-legal a,
.site-footer .footer-connection a {
  color: var(--color-dim, #5d706b);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.88rem;
  line-height: 1.5;
  text-decoration: none;
  text-underline-offset: 0.2em;
}

.site-footer .footer-col a:hover,
.site-footer .footer-legal a:hover,
.site-footer .footer-connection a:hover {
  color: var(--color-accent, #008f7a);
  text-decoration: underline;
}

.site-footer .footer-connection {
  border-left: 1px solid color-mix(in srgb, var(--color-border, #d7dfdc) 74%, transparent);
  display: grid;
  gap: 0.35rem;
  max-width: 18rem;
  padding-left: clamp(1rem, 2vw, 1.75rem);
}

.site-footer .footer-connection h2 {
  color: var(--color-hero-ink, #163b34);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.92rem;
  font-weight: 650;
  margin: 0;
}

.site-footer .footer-connection p {
  color: var(--color-dim, #5d706b);
  font-size: 0.84rem;
  line-height: 1.55;
  margin: 0;
}

.site-footer .footer-bottom {
  align-items: center;
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  padding-top: 0;
}

.site-footer .footer-bottom p {
  color: var(--color-dim, #5d706b);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.79rem;
  line-height: 1.5;
  margin: 0;
}

.site-footer .visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* The global chrome stays quiet: enlarge only the formal mark, never the menu. */
.portal-header .container {
  min-height: clamp(4.45rem, 5.2vw, 5.05rem);
}

/* Inline SVG keeps width="199" height="56". Size the mark from height +
   viewBox aspect ratio; do not let the wrapper take the intrinsic 199px or
   the compact header overflow:hidden clips "ArcBlock" to "ArcBloc". */
.portal-header .logo .logo-svg {
  display: inline-flex;
  align-items: center;
  height: auto;
  max-width: 100%;
  width: auto;
}

.portal-header .logo .logo-svg svg,
.portal-header .logo .logo-svg img {
  aspect-ratio: 199 / 56;
  display: block;
  height: clamp(2rem, 2.55vw, 2.45rem);
  max-width: 100%;
  width: auto;
}

.portal-header .main-nav a,
.portal-header .header-controls,
.portal-header .header-controls button,
.portal-header .header-controls a {
  font-size: 0.84rem;
}

.site-footer a:focus-visible,
.portal-header a:focus-visible,
.portal-header button:focus-visible {
  outline: 2px solid var(--color-accent, #008f7a);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .site-footer {
    padding-top: 2.6rem;
  }

  .site-footer .footer-top {
    gap: 1.15rem;
    grid-template-columns: 1fr;
  }

  .site-footer .footer-grid {
    border-top: 0;
    padding-top: 1rem;
  }

  .site-footer .footer-connection {
    border-left: 0;
    border-top: 0;
    max-width: none;
    padding: 1rem 0 0;
  }

  .site-footer .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .portal-header .container {
    min-height: 4.25rem;
  }

  .portal-header .logo .logo-svg svg,
  .portal-header .logo .logo-svg img {
    height: 1.95rem;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .portal-header * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shared site Hero system; emitted once by the common site chrome. */
/* The content object supplies the signature; shared type and tokens tie them together. */
.object-hero{position:relative;isolation:isolate;overflow:clip;color:var(--color-text);background:var(--color-bg);border-bottom:1px solid var(--color-border)}
.object-hero *{box-sizing:border-box}.oh-inner{max-width:var(--page-max,1120px);margin:auto;padding:64px var(--page-gutter,24px) 60px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:60px;align-items:center;min-height:430px}.oh-copy{position:relative;z-index:1;min-width:0}.oh-eyebrow{display:flex;align-items:center;gap:18px;font:12px/1.5 var(--font-utility);letter-spacing:.07em;color:var(--color-accent);margin-bottom:22px}.oh-status{letter-spacing:0;color:var(--color-dim);border-left:1px solid var(--color-border);padding-left:18px}.object-hero h1{margin:0;font:600 clamp(40px,4.7vw,66px)/1.08 var(--font-display);letter-spacing:-.055em;text-wrap:balance;overflow-wrap:anywhere}.object-hero:lang(zh) h1,.object-hero:lang(zh-TW) h1,.object-hero:lang(ja) h1{line-height:1.22;letter-spacing:-.025em;word-break:normal}.oh-description{max-width:37em;margin:24px 0 0;font:400 17px/1.8 var(--font-body);color:var(--color-dim);text-wrap:pretty}.oh-actions{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:30px}.oh-action{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 18px;background:var(--color-accent);color:var(--color-on-accent);border:1px solid transparent;border-radius:5px;font:500 14px/1.5 var(--font-body);text-decoration:none}.oh-action:hover{filter:brightness(.93)}.oh-action--quiet{color:var(--color-text);background:transparent;border-color:var(--color-border)}.oh-action:focus-visible{outline:3px solid var(--color-accent);outline-offset:4px}.oh-visual{min-width:0;position:relative}.oh-small{font:12px/1.7 var(--font-utility);color:var(--color-dim)}
.oh--products{background:radial-gradient(ellipse at 82% 40%,color-mix(in srgb,var(--color-accent) 12%,transparent),transparent 60%),var(--color-bg)}.oh-products{position:relative;height:285px}.oh-products figure{margin:0;overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface);box-shadow:0 20px 42px #002d211c}.oh-browser{width:90%;position:absolute;top:25px;left:0;transform:rotate(-5deg);border-radius:10px}.oh-browser img{display:block;width:100%;height:200px;object-fit:cover;object-position:top}.oh-products figcaption{display:flex;justify-content:space-between;padding:11px 14px;font:11px var(--font-utility)}.oh-products figcaption span{color:var(--color-dim)}.oh-phone{position:absolute;right:-8px;top:0;width:119px;transform:rotate(8deg);border-radius:21px;border:5px solid var(--color-text)!important}.oh-phone img{display:block;width:100%;height:235px;object-fit:cover;object-position:top}.oh-phone figcaption{padding:9px 6px;font-size:9px}
.oh-form-board{padding:28px 32px;background:linear-gradient(140deg,color-mix(in srgb,var(--color-accent) 9%,var(--color-bg)),var(--color-surface));border:1px solid var(--color-border);border-radius:14px}.oh-form-board ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:24px 0 0;padding:0;gap:20px}.oh-form-board li{font:500 13px/1.5 var(--font-body);display:flex;align-items:center;gap:10px;overflow-wrap:anywhere}.oh-form-board li:only-child{grid-column:1/-1;font-size:27px}.oh-form-icon{color:var(--color-accent);font:32px/1.2 var(--font-display)}
.oh--event .oh-inner{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.oh-date-board{border-top:3px solid var(--color-accent);padding:24px 0}.oh-date-board strong{display:block;margin:24px 0;font:500 clamp(28px,3.3vw,45px)/1.25 var(--font-display);letter-spacing:-.045em;text-wrap:balance}.oh-date-board p{margin:12px 0 0;color:var(--color-dim);font-size:15px}.oh-event-lines{border-left:1px solid var(--color-border);padding:12px 0 12px 40px}.oh-event-lines>span{font:12px var(--font-utility);color:var(--color-dim)}.oh-event-lines strong{display:block;margin-top:28px;font:500 46px/1.05 var(--font-display);letter-spacing:-.06em;color:var(--color-accent)}.oh-event-lines strong span{display:block;color:var(--color-text)}.oh-event-lines i{display:block;margin-top:30px;height:12px;background:repeating-linear-gradient(90deg,var(--color-border) 0 1px,transparent 1px 18px)}
.oh--docs .oh-inner,.oh--glossary .oh-inner{min-height:375px;padding-block:50px}.oh-books{height:225px;display:flex;gap:10px;align-items:flex-end;justify-content:center;transform:rotate(-6deg)}.oh-books>div{height:205px;width:75px;border:1px solid var(--color-border);border-top:4px solid var(--color-accent);background:var(--color-surface);padding:16px;display:flex;align-items:center;justify-content:space-between;writing-mode:vertical-rl;border-radius:3px 5px 5px 3px;font:500 20px var(--font-display)}.oh-books>div:first-child{height:225px;width:125px;background:color-mix(in srgb,var(--color-accent) 10%,var(--color-bg));align-items:flex-start}.oh-books small{font:10px var(--font-utility);color:var(--color-dim)}.oh-type{display:flex;align-items:baseline;justify-content:center;gap:12px;font:500 130px/1 var(--font-display);letter-spacing:-.1em;color:var(--color-accent)}.oh-type span+span{font-size:90px;opacity:.45}.oh--text .oh-inner{display:block;min-height:0;max-width:var(--page-max,1120px)}.oh--term .oh-copy{max-width:850px}.oh--term h1{font-size:clamp(48px,6vw,80px)}.oh--term .oh-description{font-size:20px;line-height:1.85;max-width:42em;color:var(--color-text)}.oh-alias{font:14px/1.6 var(--font-utility);color:var(--color-accent);margin:18px 0 0}
@media(max-width:760px){.oh-inner,.oh--event .oh-inner{grid-template-columns:1fr;gap:28px;padding:34px var(--page-gutter,16px) 36px;min-height:0}.object-hero h1{font-size:clamp(34px,8vw,48px)}.oh-eyebrow{margin-bottom:16px}.oh-description{font-size:16px;margin-top:18px}.oh-actions{margin-top:24px}.oh--docs .oh-inner,.oh--glossary .oh-inner{min-height:0;padding-block:34px}.oh--docs .oh-visual,.oh--glossary .oh-visual,.oh--events .oh-visual{display:none}.oh-products{height:225px;max-width:370px;margin:0 auto}.oh-browser img{height:155px}.oh-phone{width:94px;right:8px}.oh-phone img{height:185px}.oh-products figcaption{font-size:10px}.oh-phone figcaption{font-size:8px}.oh-form-board{padding:22px}.oh-form-board ul{margin-top:14px;gap:12px}.oh-form-board li{font-size:12px}.oh-date-board{padding:18px 0 0}.oh-date-board strong{font-size:30px;margin:12px 0}.oh--term .oh-description{font-size:18px}.oh--term h1{font-size:52px}}
.oh-date-board--calendar strong{font-size:clamp(66px,7.5vw,104px);line-height:1;letter-spacing:-.065em;color:var(--color-accent);font-variant-numeric:tabular-nums}.oh-date-board--calendar>.oh-small{font-size:16px;color:var(--color-text)}
@media(max-width:760px){.oh-date-board--calendar strong{font-size:64px}}
.oh-products figcaption a{color:inherit;text-decoration:none}.oh-products figcaption a:hover{text-decoration:underline}.oh-products figcaption a:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.oh-preview-note{position:absolute;top:100%;left:0;right:0;margin:16px 0 0;font:10px/1.5 var(--font-utility);color:var(--color-dim)}
@media(max-width:760px){.oh--products .oh-inner{padding-bottom:58px}.oh-preview-note{margin-top:6px}}

/* One brand atmosphere across three Hero families. The cube is the exact official vector,
   cropped as a quiet background imprint; type and content always sit above it. */
html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading){
  position:relative;isolation:isolate;
  background:radial-gradient(ellipse at 78% 32%,color-mix(in srgb,var(--color-accent) 10%,transparent),transparent 58%),linear-gradient(150deg,color-mix(in srgb,var(--color-accent) 3%,var(--color-bg)),var(--color-bg));
}
html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OC4wMDM4IiBoZWlnaHQ9IjU1LjQzIiB2aWV3Qm94PSIwIDAgNDguMDAzOCA1NS40MyI+CjxwYXRoIG9wYWNpdHk9IjAuNiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy4yNTE5IDI2LjQxNTlWMjcuMjgyTDIyLjUwMTkgMjcuNzE1TDAuODkxOTY4IDQwLjE5MTVMMS42NDIwMyA0MS40OTA2TDI0LjAwMiAyOC41ODExTDQ2LjM2MTkgNDEuNDkwNkw0Ny4xMTIgNDAuMTkxNUwyNS41MDIxIDI3LjcxNUwyNC43NTIxIDI3LjI4MlYyNi40MTU5VjEuNDYyODlIMjMuMjUxOVYyNi40MTU5WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzU3XzMpIj48L3BhdGg+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjQuMDAxOSAwTDQ4LjAwMzggMTMuODU3NVY0MS41NzI1TDI0LjAwMTkgNTUuNDNMMCA0MS41NzI1VjEzLjg1NzVMMjQuMDAxOSAwWk0yLjI1MDE4IDE0LjI5MDVMMTcuMTc2NCAyMi45MDgyTDI0LjAwMTkgMTEuMDg2TDMwLjgyNzQgMjIuOTA4Mkw0NS43NTM2IDE0LjI5MDVMMjQuMDAxOSAxLjczMjE5TDIuMjUwMTggMTQuMjkwNVpNNDYuNTAzNyAxNS41ODk3TDMxLjU3NzUgMjQuMjA3M0wzOC40MDMgMzYuMDI5NUwyNC43NTIgNDMuOTExVjUzLjI2NDhMNDYuNTAzNyA0MC43MDY0VjE1LjU4OTdaTTIzLjI1MTggNTMuMjY0OFY0My45MTFMOS42MDA3NiAzNi4wMjk1TDE2LjQyNjMgMjQuMjA3M0wxLjUwMDEyIDE1LjU4OTdWNDAuNzA2NEwyMy4yNTE4IDUzLjI2NDhaTTE3LjcyNTQgMjQuOTU3NEwxMS42NSAzNS40ODA0TDIzLjI1MTggNDIuMTc4OFYyOS4wMTQxVjI4LjE0OEwyMi41MDE4IDI3LjcxNUwxNy43MjU0IDI0Ljk1NzRaTTI0Ljc1MiA0Mi4xNzg4TDM2LjM1MzggMzUuNDgwNEwzMC4yNzg0IDI0Ljk1NzRMMjUuNTAyIDI3LjcxNUwyNC43NTIgMjguMTQ4VjI5LjAxNDFWNDIuMTc4OFpNMjkuNTI4MyAyMy42NTgyTDI0LjAwMTkgMTQuMDg2MkwxOC40NzU1IDIzLjY1ODJMMjQuMDAxOSAyNi44NDg5TDI5LjUyODMgMjMuNjU4MloiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl81N18zKSI+PC9wYXRoPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzU3XzMiIHgxPSI4MC4zMzgxIiB5MT0iMjAuNjE1NCIgeDI9IjQwLjYxODMiIHkyPSI4MS44MzY4IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM0RUYxQkEiPjwvc3RvcD4KPHN0b3Agb2Zmc2V0PSIwLjUwMTkwNCIgc3RvcC1jb2xvcj0iIzE2Q0VEMSI+PC9zdG9wPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzNzczRjIiPjwvc3RvcD4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyXzU3XzMiIHgxPSIyNC4wMDE5IiB5MT0iLTI3LjcxNSIgeDI9Ii0zMC44NTk2IiB5Mj0iMTkuNzk2NCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNEVGMUJBIj48L3N0b3A+CjxzdG9wIG9mZnNldD0iMC41MDE5MDQiIHN0b3AtY29sb3I9IiMxNkNFRDEiPjwvc3RvcD4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMzc3M0YyIj48L3N0b3A+CjwvbGluZWFyR3JhZGllbnQ+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNTdfMyI+CjxyZWN0IHdpZHRoPSIxOTkiIGhlaWdodD0iNTYiIGZpbGw9IndoaXRlIj48L3JlY3Q+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==') no-repeat right -65px center / 480px auto;opacity:.055;
}
.realm-page .realm-orbit{background:none}.realm-page .realm-orbit::before{display:none}
/* Presentation family: generous space, consistent action treatment, native artwork retained. */
:is(.realm-hero,.arc-product-hero,.landing-hero,.oh--product){border-radius:0;border-bottom:1px solid var(--color-border)}
.oh--product .oh-inner{min-height:510px;padding-block:72px}
:is(.landing-hero-title,.oh--product h1){color:var(--color-text);font-family:var(--font-display);font-weight:600}
:is(.landing-hero-action,.realm-action,.oh-action){border-radius:5px}
/* Collection family: one measure, two framed images, unchanged content below. */
.oh--index .oh-inner{min-height:430px;padding-block:56px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:60px}
.oh--index h1{font-size:clamp(40px,4.7vw,66px)}
.oh-photo-stack{position:relative;height:285px;max-width:425px;margin:auto}
.oh-photo-stack figure{position:absolute;margin:0;width:83%;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);box-shadow:0 18px 36px #002d211a;overflow:hidden}
.oh-photo-stack figure:first-child{left:0;top:8px;transform:rotate(-5deg)}
.oh-photo-stack figure:last-child{right:0;top:100px;width:67%;transform:rotate(7deg)}
.oh-photo-stack a{display:block;color:var(--color-text);text-decoration:none}
.oh-photo-stack img{display:block;width:100%;height:176px;object-fit:cover}
.oh-photo-stack figure:last-child img{height:133px}
.oh-photo-stack figcaption{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;font:11px/1.5 var(--font-body)}
.oh-photo-stack a:hover figcaption{color:var(--color-accent)}
.oh-photo-stack a:focus-visible{outline:3px solid var(--color-accent);outline-offset:-4px}
#main>.content-cards-wrap--article-index{width:100%;max-width:none;padding-top:0}
.content-cards-wrap--article-index>.content-cards{width:min(100% - 36px,820px);margin:40px auto 0}
@media(max-width:760px){
  .oh--index .oh-inner{grid-template-columns:1fr;min-height:0;padding:34px var(--page-gutter,16px) 48px;gap:28px}
  .oh--index h1{font-size:clamp(34px,8vw,48px)}
  .oh--index .oh-visual{display:block;width:100%}
  .oh-photo-stack{height:225px;max-width:330px;width:100%}
  .oh-photo-stack img{height:140px}.oh-photo-stack figure:last-child{top:75px}.oh-photo-stack figure:last-child img{height:107px}
  .oh-photo-stack figcaption{font-size:10px;padding:8px 10px}
  .oh--product .oh-inner{min-height:0;padding-block:40px}
  html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading)::after{background-size:330px auto;background-position:right -130px top -35px;opacity:.04}
}
/* Match collection silhouettes even when a title wraps to two CJK lines. */
@media(min-width:761px){
 .oh--index .oh-inner{min-height:460px;padding-block:48px}
 .oh--index h1{font-size:clamp(40px,4.3vw,60px)}
 .landing-hero .landing-hero-inner{min-height:580px;padding-block:76px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:60px}
 .landing-hero .landing-hero-title{max-width:none;font-size:clamp(calc(46px * var(--landing-hero-scale,1)),calc(5.4vw * var(--landing-hero-scale,1)),calc(78px * var(--landing-hero-scale,1)));line-height:1.16;letter-spacing:-.045em}
 .landing-hero:lang(zh) .landing-hero-title,.landing-hero:lang(zh-TW) .landing-hero-title,.landing-hero:lang(ja) .landing-hero-title{line-height:1.22;letter-spacing:0}
 .landing-hero-subtitle{font-size:17px;line-height:1.85;margin-top:24px}
}

/* Product destinations follow ARC's centered introduction, with their own source metadata. */
.oh--product .oh-inner{display:block;text-align:center;max-width:var(--page-max,1120px);padding:68px var(--page-gutter,24px) 52px}
.oh--product .oh-copy{max-width:940px;margin:auto}
.oh--product .oh-eyebrow,.oh--product .oh-actions{justify-content:center}
.oh--product h1{font-size:clamp(52px,6.6vw,94px)}
.oh--product .oh-description{max-width:650px;margin:24px auto 0}
.oh--product .oh-visual{max-width:920px;margin:48px auto 0;text-align:left}
.oh--product .oh-form-board{background:transparent;border:0;border-top:1px solid var(--color-border);border-radius:0;padding:26px 0 0}
.oh--product .oh-form-board ul{display:flex;flex-wrap:wrap;gap:24px 36px;margin-top:22px}
.oh--product .oh-form-board li:only-child{font-size:20px}
.landing-hero .landing-hero-inner{display:block;text-align:center;min-height:520px;padding-block:72px}
.landing-hero .landing-hero-copy{max-width:940px;margin:auto}
.landing-hero .landing-hero-title{max-width:none}
.landing-hero .landing-hero-subtitle{max-width:680px;margin:24px auto 0}
.landing-hero .landing-hero-actions{justify-content:center}
.landing-hero .landing-hero-trace{max-width:920px;margin:48px auto 0;min-height:180px;border-left:0;border-top:1px solid var(--color-border)}
.landing-hero .landing-hero-trace::before,.landing-hero .landing-trace-origin,.landing-hero .landing-trace-line{display:none}
@media(max-width:760px){
 .oh--product .oh-inner,.landing-hero .landing-hero-inner{padding:42px var(--page-gutter,16px) 40px;min-height:0}
 .oh--product h1{font-size:clamp(42px,11vw,58px)}
 .oh--product .oh-visual{margin-top:34px}
 .oh--product .oh-form-board ul{gap:18px 22px}
 .landing-hero .landing-hero-title{font-size:clamp(calc(36px * var(--landing-hero-scale,1)),calc(10vw * var(--landing-hero-scale,1)),calc(48px * var(--landing-hero-scale,1)));line-height:1.22;letter-spacing:0}
 .landing-hero .landing-hero-trace{margin-top:30px}
}

.landing-hero img.landing-hero-geometry{height:auto;object-fit:contain;aspect-ratio:48.0038 / 55.43}
.landing-hero img.landing-hero-geometry{width:120px;right:24px;bottom:16px}
/* At the top, chrome and Hero meet without a border or frosted slab. The existing
   header controller restores a solid navigation surface after scrolling. */
html body:has(:is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading)) .portal-header:not(.scrolled){background:var(--color-bg);border-bottom-color:transparent;box-shadow:none;backdrop-filter:none}
html body .portal-header{transition:background-color .22s ease,box-shadow .22s ease,border-color .22s ease}
html body .portal-header.scrolled{background:color-mix(in srgb,var(--color-bg) 94%,transparent);border-bottom-color:var(--color-border);box-shadow:0 6px 24px #001b1208;backdrop-filter:blur(16px)}
html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading){
 background:linear-gradient(var(--color-bg),transparent 120px),radial-gradient(ellipse at 78% 32%,color-mix(in srgb,var(--color-accent) 10%,transparent),transparent 58%),linear-gradient(150deg,color-mix(in srgb,var(--color-accent) 3%,var(--color-bg)),var(--color-bg));
}
html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading)::after{
 transform:translate3d(0,var(--hero-drift,0px),0);mask-image:linear-gradient(transparent,#000 100px,#000 calc(100% - 30px),transparent);
}
@keyframes arc-hero-enter{from{opacity:.72;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
 :is(.oh-copy,.landing-hero-copy,.arc-product-heading,.post-hero-content){animation:arc-hero-enter .55s cubic-bezier(.2,.7,.2,1) both}
 .oh-photo-stack{animation:arc-hero-enter .7s cubic-bezier(.2,.7,.2,1) both}
 .oh-photo-stack figure{transition:box-shadow .22s ease}
 .oh-photo-stack figure:hover{box-shadow:0 22px 44px #002d2129}
}
@media(prefers-reduced-motion:reduce){
 html :is(.object-hero,.realm-hero,.arc-product-hero,.landing-hero,.post-hero,.docs-heading)::after{transform:none}
 html body .portal-header{transition:none}
}
/* Authored source labels stay a compact fact strip; the complete brand mark
   already appears in the background, so do not duplicate it over those labels. */
.landing-hero .landing-hero-trace{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding:22px 24px;text-align:left}
.landing-hero .landing-hero-trace::after,.landing-hero .landing-hero-trace .landing-hero-geometry{display:none}
.landing-hero .landing-trace-kicker,.landing-hero .landing-trace-text{position:static;max-width:none;margin:0}

/* A quiet forward-emerging deck. Fixed stage preserves the collection Hero measure. */
.oh-photo-stack.oh-deck{height:285px;max-width:425px;perspective:1000px}
.oh-deck figure,.oh-deck figure:first-child,.oh-deck figure:last-child{left:5%;right:auto;top:22px;width:90%;height:226px;transform:translate3d(0,0,0);border-radius:12px;transform-origin:center;opacity:0;z-index:0;pointer-events:none;transition:transform 1200ms cubic-bezier(.22,.65,.25,1),opacity 900ms ease,box-shadow 1200ms ease;will-change:auto}
.oh-deck figure[data-position="0"]{transform:translate3d(0,18px,0);opacity:1;z-index:3;pointer-events:auto;box-shadow:0 16px 32px #002d2120}
.oh-deck figure[data-position="1"]{transform:translate3d(10px,-3px,-55px) rotate(3deg);opacity:.8;z-index:2}
.oh-deck figure[data-position="2"]{transform:translate3d(-8px,-23px,-110px) rotate(-3deg);opacity:.5;z-index:1}
.oh-deck figure[data-position="3"]{transform:translate3d(0,-35px,-165px);opacity:0;z-index:0}
.oh-deck figure[data-position="leaving"]{transform:translate3d(0,35px,45px);opacity:0;z-index:4}
.oh-deck figure img,.oh-deck figure:last-child img{height:174px;object-fit:cover}
.oh--products .oh-deck figure img,.oh--docs .oh-deck figure img{object-fit:contain;background:var(--color-bg)}
.oh-deck figure figcaption{height:52px;align-items:center;font:12px/1.45 var(--font-body);padding:9px 14px}
.oh-deck figcaption>span:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:760px){
 .oh-photo-stack.oh-deck{height:245px;max-width:330px}
 .oh-deck figure,.oh-deck figure:first-child,.oh-deck figure:last-child{height:192px;top:15px}
 .oh-deck figure img,.oh-deck figure:last-child img{height:140px}
 .oh-deck figure figcaption{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.oh-photo-stack.oh-deck figure{transition:none}}

/* Film-frame variant: one unbroken image surface, captions appear only on intent. */
.oh-deck figure,.oh-deck figure:first-child,.oh-deck figure:last-child{background:var(--color-bg);border-radius:9px;border:1px solid color-mix(in srgb,var(--color-border) 75%,transparent)}
.oh-deck figure a{position:relative;width:100%;height:100%;display:block;overflow:hidden}
.oh-deck figure img,.oh-deck figure:last-child img{width:100%;height:100%;object-fit:contain;background:var(--color-bg)}
.oh-deck figure::before{content:"";position:absolute;inset:5px 8px auto;height:3px;z-index:2;pointer-events:none;opacity:.28;background:radial-gradient(circle at 2px 1.5px,var(--color-dim) 1.3px,transparent 1.5px) left top/9px 3px repeat-x;mask-image:linear-gradient(90deg,#000 0 26px,transparent 26px calc(100% - 26px),#000 calc(100% - 26px))}
.oh-deck figure::after{content:"";position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--color-border) 35%,transparent);border-radius:5px;pointer-events:none}
.oh-deck figure figcaption{position:absolute;left:0;right:0;bottom:0;height:auto;min-height:64px;align-items:flex-end;padding:30px 16px 13px;background:linear-gradient(transparent,rgba(3,16,14,.86));color:#fff;opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;font-size:12px;line-height:1.5}
.oh-deck figure a:hover figcaption,.oh-deck figure a:focus-visible figcaption{opacity:1;transform:none;color:#fff}
.oh-deck figure a:focus-visible{outline:3px solid var(--color-accent);outline-offset:-3px}
@media(hover:none){.oh-deck figure[data-position="0"] figcaption{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.oh-photo-stack.oh-deck figure figcaption{transition:none;transform:none}}

/* Shared motion, distinct material: vocabulary cards, document folders, product film. */
.oh--glossary .oh-deck figure{background:var(--color-surface);border-radius:7px;border-color:color-mix(in srgb,var(--color-accent) 22%,var(--color-border))}
.oh--glossary .oh-deck figure::before{display:none}
.oh--glossary .oh-deck figure::after{inset:13px;border:0;border-left:1px solid color-mix(in srgb,var(--color-accent) 22%,transparent);border-radius:0}
.oh-flash-face{height:100%;padding:24px 28px 22px;display:flex;flex-direction:column;justify-content:center;color:var(--color-text);background:linear-gradient(145deg,var(--color-bg),var(--color-surface))}
.oh-flash-label{font:10px/1.4 var(--font-utility);color:var(--color-accent);letter-spacing:.08em;margin-bottom:12px}
.oh-flash-face strong{font:500 clamp(23px,2.2vw,30px)/1.2 var(--font-display);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oh-flash-face p{font:12px/1.7 var(--font-body);color:var(--color-dim);margin:14px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.oh-flash-arrow{position:absolute;right:18px;top:18px;color:var(--color-accent);opacity:0;transition:opacity .2s}
.oh--glossary .oh-deck a:hover .oh-flash-arrow,.oh--glossary .oh-deck a:focus-visible .oh-flash-arrow{opacity:1}
.oh--docs .oh-deck figure{border-radius:5px 12px 5px 5px;background:var(--color-surface)}
.oh--docs .oh-deck figure::before{inset:0 auto auto 16px;width:62px;height:7px;opacity:1;background:var(--color-accent);border-radius:0 0 3px 3px;mask-image:none}
.oh--docs .oh-deck figure::after{inset:9px;border-radius:2px;border-color:color-mix(in srgb,var(--color-border) 55%,transparent)}
.oh--docs .oh-deck figure img{padding:10px;background:var(--color-surface)}
.oh--products .oh-deck figure::after{inset:5px;border-radius:4px;border-color:color-mix(in srgb,var(--color-accent) 18%,transparent)}
.oh--events .oh-deck figure::before,.oh--articles .oh-deck figure::before{display:none}
.oh--events .oh-deck figure,.oh--articles .oh-deck figure{border-radius:7px}
@media(max-width:760px){.oh-flash-face{padding:19px 24px}.oh-flash-label{margin-bottom:8px}.oh-flash-face strong{font-size:24px}.oh-flash-face p{font-size:11px;line-height:1.6;margin-top:10px}}
@media(prefers-reduced-motion:reduce){.oh-flash-arrow{transition:none}}
/* Desktop has room for the content itself to be more legible; mobile stays compact. */
@media(min-width:1024px){
 .oh--index .oh-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px}
 .oh-photo-stack.oh-deck{height:325px;max-width:480px;width:100%}
 .oh-deck figure,.oh-deck figure:first-child,.oh-deck figure:last-child{left:3%;width:94%;height:270px;top:22px}
 .oh-flash-face{padding:30px 34px}
 .oh-flash-face strong{font-size:32px}
 .oh-flash-face p{font-size:14px;line-height:1.7}
}
.oh--index:lang(zh) h1,.oh--index:lang(zh-TW) h1,.oh--index:lang(ja) h1{word-break:keep-all;overflow-wrap:anywhere}

/* Study-card marginalia: deterministic variation, decorative strokes rather than invented notes. */
.oh-flash-face strong span{padding-inline:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;background:linear-gradient(177deg,transparent 58%,color-mix(in srgb,var(--color-accent) 16%,transparent) 60% 89%,transparent 92%)}
.oh-deck figure[data-doodle="1"] .oh-flash-face strong span{background:linear-gradient(3deg,transparent 10%,color-mix(in srgb,var(--color-accent) 12%,transparent) 12% 39%,transparent 42%)}
.oh-deck figure[data-doodle="2"] .oh-flash-face strong span{background:linear-gradient(178deg,transparent 84%,color-mix(in srgb,var(--color-accent) 34%,transparent) 86% 92%,transparent 95%)}
.oh-deck figure[data-doodle="3"] .oh-flash-face strong span{background:linear-gradient(1deg,transparent 6%,color-mix(in srgb,var(--color-accent) 13%,transparent) 9% 76%,transparent 79%)}
.oh-flash-doodle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--color-dim);opacity:.26;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.oh-flash-face p,.oh-flash-face strong,.oh-flash-label{position:relative}

/* Article reading space follows whether a real sidebar exists. */
.content-cards-wrap--article-index>.content-cards{width:min(calc(100% - 2 * var(--page-gutter,24px)),calc(var(--page-max,1120px) - 2 * var(--page-gutter,24px)))}
.post-hero ~ .detail-content-layout:not(.detail-content-layout--has-toc){--content-max:960px;--detail-prose-max:100%}
@media(min-width:769px){
 .post-hero ~ .detail-content-layout:not(.detail-content-layout--has-toc) .detail-content-area p.aup-text{font-size:18px;line-height:1.8}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .card-cover{width:200px;aspect-ratio:3/2}
}
/* A quiet editorial change of pace, using the article's own cover and copy. */
.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:36px;align-items:center;padding:30px 0;margin:8px 0 16px;background:transparent;border:0;border-block:1px solid var(--color-border);border-radius:0}
.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-cover{width:100%;aspect-ratio:16/10;border-radius:5px;grid-column:1;grid-row:1}
.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-title{font-size:clamp(25px,2.5vw,34px);line-height:1.3}
.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-excerpt{-webkit-line-clamp:3}
@media(max-width:768px){
 .content-cards-wrap--article-index>.content-cards{width:calc(100% - 2 * var(--page-gutter,16px))}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual{grid-template-columns:1fr;padding:24px 0;gap:20px;margin:8px 0 16px}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-cover{grid-row:1}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-title{font-size:25px}
}
/* Event location is atmosphere, using actual geographic tiles. Text stays above it. */
.oh--event{isolation:isolate}.oh--event .oh-inner{position:relative;z-index:1;padding-bottom:64px}
.oh-event-map{position:absolute;inset:0 0 0 22%;overflow:hidden;pointer-events:none;z-index:0;opacity:.32;mask-image:linear-gradient(90deg,transparent,#000 42%,#000 85%,transparent),linear-gradient(0deg,transparent,#000 30%,#000 75%,transparent);mask-composite:intersect}
.oh-map-sheet{position:absolute;width:768px;height:768px;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.55);filter:grayscale(1) contrast(.8);mask-image:radial-gradient(ellipse 250px 250px at center,#000 24%,transparent 100%)}
.oh-map-sheet img{position:absolute;width:256px!important;height:256px!important;max-width:none!important;display:block}
.oh-map-credit{position:absolute;bottom:12px;right:24px;z-index:2;font:10px/1.5 var(--font-body);color:var(--color-dim)}
.oh-map-credit a{color:inherit;text-decoration:none}.oh-map-credit a:hover{text-decoration:underline}
.oh-map-link{display:inline-flex;gap:7px;margin-top:18px;color:var(--color-accent);font:12px/1.5 var(--font-body);text-decoration:none}
.oh--event .oh-date-board{padding:26px 30px;border:1px solid var(--color-border);border-top:3px solid var(--color-accent);border-radius:5px;background:color-mix(in srgb,var(--color-bg) 85%,transparent);box-shadow:0 14px 38px #092c2310;transform:rotate(2deg);position:relative}
.oh--event .oh-date-board::after{content:"";display:block;margin-top:24px;border-top:1px dashed var(--color-border)}
.oh-event-ticket{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:30px;background:linear-gradient(130deg,color-mix(in srgb,var(--color-accent) 9%,var(--color-bg)),var(--color-bg));border:1px solid var(--color-border)}
.oh-event-ticket>span{font:12px var(--font-utility);color:var(--color-dim)}.oh-event-ticket strong{font:500 clamp(20px,2.5vw,30px)/1.25 var(--font-display);letter-spacing:-.02em;color:var(--color-text)}.oh-event-ticket small{font:12px var(--font-body);color:var(--color-dim)}
.oh-event-phase{position:absolute;right:12px;top:12px;z-index:2;padding:4px 8px;background:var(--color-bg);color:var(--color-accent);border:1px solid var(--color-border);border-radius:3px;font:10px/1.3 var(--font-body)}
.oh-event-phase[data-phase=past]{color:var(--color-dim)}
@media(prefers-color-scheme:dark){html:not([data-mode=light]) .oh-event-map{opacity:.16}}
[data-mode=dark] .oh-event-map{opacity:.16}
@media(max-width:760px){.oh-event-map{inset:30% -20% 0 0;opacity:.22}.oh--event .oh-inner{padding-bottom:56px}.oh--event .oh-date-board{transform:none;padding:20px 24px}.oh--event .oh-date-board strong{font-size:40px}.oh-event-ticket{padding:25px}.oh-event-ticket strong{font-size:23px}}

.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-body{grid-column:2;grid-row:1}
.content-cards-wrap--fleet .content-card--text{grid-template-columns:minmax(0,1fr)}
@media(max-width:768px){
 .content-cards-wrap--article-index.content-cards-wrap--fleet .content-card{grid-template-columns:minmax(0,1fr);gap:16px}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .card-cover{width:100%;grid-column:1;grid-row:1;aspect-ratio:16/9}
 .content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--visual .card-body{grid-column:1;grid-row:2}
}
/* Event facts sit on the page, rather than inside nested presentation boxes. */
.oh--event .oh-date-board{padding:20px 0 20px 36px;border:0;border-left:1px solid color-mix(in srgb,var(--color-accent) 28%,transparent);border-radius:0;background:transparent;box-shadow:none;transform:none}
.oh--event .oh-date-board::after{display:none}
@media(max-width:760px){.oh--event .oh-date-board{padding:16px 0;border:0;border-top:1px solid var(--color-border)}}
.content-cards-wrap--article-index.content-cards-wrap--fleet .content-card--text{grid-template-columns:minmax(0,1fr)}
.content-cards-wrap--fleet .card-link:focus-visible{outline:none}

/* Terminal panels keep a dark canvas in both site themes. */
.product-frame__terminal .hljs-section { color: #79c0ff; }

/* Off-stack slides need neither painting nor eager image downloads.
   The existing deck controller reveals the next card two turns before it leads. */
.oh-deck figure[data-position="3"] { display: none; }

.site-footer .footer-translation-note { margin: 16px 0 0; max-width: 90ch; color: var(--color-dim, #5d706b); font-size: 12px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }

.site-footer .footer-attribution { margin-top: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .6rem; }
.site-footer .footer-attribution-dot { color: var(--color-dim, #5d706b); font-size: 12px; }
.site-footer .footer-built-with { display: inline-flex; vertical-align: middle; border-radius: 2px; transition: opacity 140ms ease; }
.site-footer .footer-built-with:hover { opacity: .72; }
.site-footer .footer-built-with:focus-visible { outline: 2px solid var(--color-accent, #008f7a); outline-offset: 5px; }
.site-footer .footer-built-with img { display: block; width: 140px; height: auto; }
.site-footer .footer-built-with .footer-built-dark { display: none; }
html[data-mode=dark] .site-footer .footer-built-light { display: none; }
html[data-mode=dark] .site-footer .footer-built-dark { display: block; }
@media (prefers-reduced-motion: reduce) { .site-footer .footer-built-with { transition: none; } }

.site-footer .footer-built-caption { margin: 0; color: var(--color-dim, #5d706b); font-size: 12px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }

/* One footer surface: policies sit with navigation; attribution closes the footer. */
.site-footer .footer-grid{align-self:start;padding-top:.4rem}
.site-footer .footer-legal{margin-top:1rem}
.site-footer .footer-legal a{font-size:.78rem}
.site-footer .footer-bottom{align-items:flex-start;flex-direction:column;justify-content:flex-start;text-align:left;gap:.7rem}
.site-footer .footer-bottom .footer-translation-note{margin:0;max-width:none;flex:none;font-size:.73rem}
.site-footer .footer-built-caption a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:.2em}
.site-footer .footer-built-caption a:hover{color:var(--color-accent)}
@media(max-width:760px){.site-footer .footer-top.has-connection{grid-template-columns:1fr}.site-footer .footer-bottom .footer-translation-note{flex-basis:auto}.site-footer .footer-grid{padding-top:0}}

/* Hero system styles are emitted once in the shared site-footer stylesheet. */

#object-card-boot,
[id$="-shelf"] {
  display: none !important;
}

.object-cards { margin: 0 auto; max-width: var(--page-max, 1120px); padding: 2.5rem var(--page-gutter, 24px); }
@media (max-width: 48rem) { .object-cards { padding: 2rem var(--page-gutter, 24px); } }
.object-cards-header { margin-bottom: 1rem; }
.object-cards-title { font-size: 1.125rem; margin: 0; }
.object-cards-description { color: var(--color-dim); margin: 0.25rem 0 0; }
.object-cards-list { display: grid; gap: 0.75rem; }
.object-card { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem 1.125rem; transition: border-color 0.18s ease, background 0.18s ease; }
.object-card--retired { opacity: 0.92; border-style: dashed; }
.object-card-head { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; }
.object-card-title { font-weight: 600; text-decoration: none; }
/* The whole card is the destination, not just the title (#312). The title
   anchor keeps the accessible name; the stretched ::after turns the card's
   entire box — badge, excerpt, notes — into the same click target. Same
   mechanism period-index already uses for its rows. */
.object-card-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.object-card:hover { border-color: var(--color-accent); background: var(--color-surface); }
.object-card-title:focus-visible::after { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* A note's successor link points somewhere else — it has to stay above the overlay. */
.object-card-note a { position: relative; z-index: 2; }
.object-card-status { font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 0.02em; padding: 0.1rem 0.45rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border); color: var(--color-dim); }
.object-card-status--active { border-color: var(--color-accent); color: var(--color-accent); }
/* Not the plain case, said with a dashed edge rather than a second hue —
   the same convention product-meta uses, so one status reads one way. */
.object-card-status--preview,
.object-card-status--superseded, .object-card-status--sunset, .object-card-status--abandoned { border-style: dashed; }
.object-card-excerpt { margin: 0.5rem 0 0; color: var(--color-dim); }
.object-card-notes { list-style: none; margin: 0.625rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.875rem; }
.object-card-note span { font-weight: 600; }
.object-card-note--drift { color: var(--color-dim); font-style: italic; }
.object-card-unknown { margin: 0; color: var(--color-dim); font-size: 0.875rem; }

.object-cards--shelf .object-cards-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.6rem, 1fr));
  gap: 2.1rem 1.2rem;
  align-items: start;
}

.object-card--book {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}

.object-card--book:hover {
  border: 0;
  background: none;
}

.object-card-cover {
  --cover-ink: var(--color-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  aspect-ratio: 5 / 7;
  width: 100%;
  padding: 1.15rem 1rem 1.2rem 1.15rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--color-border) 78%, var(--color-text) 8%);
  border-radius: 2px;
  background: var(--color-bg);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
    0 14px 28px rgba(22, 59, 52, 0.1);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s ease;
}

.object-card-cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 3px;
  background: color-mix(in srgb, var(--color-text) 14%, transparent);
}

.object-card-motif {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.object-card-motif::before,
.object-card-motif::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.object-card-cover[data-motif="0"] .object-card-motif::before {
  right: -12%;
  bottom: -18%;
  width: 108%;
  height: 62%;
  background:
    repeating-linear-gradient(
      118deg,
      transparent 0 5px,
      color-mix(in srgb, var(--cover-ink) 26%, transparent) 5px 6px
    ),
    radial-gradient(120% 110% at 100% 100%, var(--cover-ink) 0 46%, transparent 47%);
  clip-path: ellipse(78% 72% at 100% 100%);
}

.object-card-cover[data-motif="1"] .object-card-motif::before {
  right: 0;
  bottom: 0;
  width: 78%;
  height: 46%;
  background: var(--cover-ink);
  clip-path: polygon(38% 100%, 100% 28%, 100% 100%);
}

.object-card-cover[data-motif="1"] .object-card-motif::after {
  right: 0;
  bottom: 0;
  width: 48%;
  height: 28%;
  background: color-mix(in srgb, var(--cover-ink) 55%, var(--color-bg));
  clip-path: polygon(0 100%, 100% 42%, 100% 100%);
}

.object-card-cover[data-motif="2"] .object-card-motif::before {
  inset: auto 0 0;
  height: 42%;
  background:
    repeating-linear-gradient(
      -32deg,
      transparent 0 6px,
      color-mix(in srgb, var(--cover-ink) 22%, transparent) 6px 7px
    );
  mask-image: linear-gradient(180deg, transparent, #000 38%);
}

.object-card-cover[data-motif="2"] .object-card-motif::after {
  right: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--cover-ink) 55%, transparent) 0 5px,
      transparent 5px 9px
    );
  clip-path: polygon(28% 0, 100% 0, 100% 72%);
}

.object-card-cover[data-motif="3"] .object-card-motif::before {
  inset: auto 0 0;
  height: 36%;
  background: var(--cover-ink);
  clip-path: polygon(0 100%, 52% 18%, 100% 100%);
}

.object-card-cover[data-motif="3"] .object-card-motif::after {
  right: 0;
  bottom: 0;
  width: 58%;
  height: 22%;
  background: color-mix(in srgb, var(--cover-ink) 42%, var(--color-bg));
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.object-card-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.object-card-cover.has-photo .object-card-motif {
  opacity: 0.28;
}

.object-card-cover.has-photo::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent, var(--color-bg) 58%);
  pointer-events: none;
}

.object-card-cover.has-photo {
  justify-content: flex-end;
}

.object-card-logo {
  position: relative;
  z-index: 2;
  width: auto;
  height: 0.95rem;
  margin-bottom: 0.85rem;
  object-fit: contain;
}

.object-card--book:hover .object-card-cover,
.object-card--book:focus-within .object-card-cover {
  transform: translateY(-0.4rem);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
    0 22px 40px rgba(22, 59, 52, 0.16);
}

.object-card--book .object-card-title::after {
  content: none;
}

.object-card-kicker {
  position: relative;
  z-index: 2;
  margin-bottom: 0.55rem;
  color: var(--cover-ink, var(--color-accent));
  font-family: var(--font-utility, ui-monospace, monospace);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.object-card--book .object-card-title {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  max-width: 11ch;
  margin: 0;
  font-family: var(--font-display, Sora, system-ui, sans-serif);
  font-size: 1.12rem;
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}

.object-card--book .object-card-title::before {
  content: "";
  display: block;
  width: 1.35rem;
  height: 1px;
  margin: 0 0 0.55rem;
  background: color-mix(in srgb, var(--cover-ink, var(--color-accent)) 70%, transparent);
}

html[lang^="zh"] .object-card--book .object-card-title,
html[lang^="ja"] .object-card--book .object-card-title {
  max-width: 7em;
  letter-spacing: 0;
  line-height: 1.22;
}

.object-card--book .object-card-excerpt {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 0.88rem;
  line-height: 1.45;
}

.object-card-book {
  margin: 0;
  position: relative;
  z-index: 2;
  font-family: var(--font-utility);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.object-card-book a {
  color: var(--color-accent);
  text-decoration: none;
}

.object-card-book a:hover {
  text-decoration: underline;
}

.object-card--book .object-card-notes {
  margin: 0;
}

.object-card--book.object-card--retired .object-card-cover {
  opacity: 0.92;
}

.object-card-cover:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.object-cards--stage .object-cards-list {
  display: flex;
  justify-content: center;
  align-items: center;
}

.object-card--stage {
  width: min(22rem, 86%);
  margin: 0 auto;
}

.object-card--stage .object-card-title {
  max-width: 12ch;
  font-size: clamp(1.55rem, 3.4vw, 2.55rem);
}

html[lang^="zh"] .object-card--stage .object-card-title,
html[lang^="ja"] .object-card--stage .object-card-title {
  max-width: 8em;
}

.aup-deck-slide .object-card--stage {
  width: min(22rem, 86vw);
}

html.lab-xy-page .aup-deck-slide:has(.object-card--stage) {
  align-items: center;
}

.aup-deck-slide .object-cards {
  width: min(54rem, 100%);
  margin: 0 auto;
  padding: 0;
}

.aup-deck-slide .object-cards--shelf .object-cards-list,
.aup-deck-slide .object-cards--shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem 1.15rem;
  align-items: start;
}

.aup-deck-slide .object-cards--shelf > .object-card {
  width: auto;
  margin: 0;
}

html.lab-xy-page .aup-deck-slide:has(.object-cards--shelf) {
  align-items: center;
}

.aup-deck-slide .object-stage-with-news {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
  gap: 1.15rem 1.5rem;
  align-items: center;
  width: min(52rem, 92%);
  margin: 0 auto;
}

.aup-deck-slide .object-stage-with-news .object-card--stage {
  width: 100%;
  margin: 0;
}

.aup-deck-slide .object-stage-with-news .object-cards--news:empty {
  display: none;
}

.aup-deck-slide .object-stage-with-news:not(:has(.object-cards--news > *)) {
  grid-template-columns: minmax(14rem, 18rem);
  justify-content: center;
}

.aup-deck-slide .object-cards--news,
.aup-deck-slide .object-cards--news .object-cards-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 0.85rem;
  width: 100%;
  margin: 0;
  padding: 0;
}

.aup-deck-slide .object-cards--news .object-card-excerpt {
  display: none;
}

@media (max-width: 48rem) {
  .aup-deck-slide .object-cards--shelf .object-cards-list,
  .aup-deck-slide .object-cards--shelf {
    grid-template-columns: 1fr;
    width: min(18rem, 92%);
  }

  .aup-deck-slide .object-stage-with-news {
    grid-template-columns: 1fr;
    width: min(16rem, 88%);
    gap: 0.75rem;
  }

  .aup-deck-slide .object-stage-with-news .object-cards--news,
  .aup-deck-slide .object-stage-with-news .object-cards--news .object-cards-list {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .aup-deck-slide .object-cards--news .object-card-cover {
    aspect-ratio: 4 / 3;
  }
}

.object-card--stage:empty {
  min-height: min(28rem, 58svh);
  border: 1px solid color-mix(in srgb, var(--color-border) 78%, var(--color-text) 8%);
  border-radius: 2px;
  background: var(--color-surface);
}

@media (max-width: 48rem) {
  .object-cards--shelf .object-cards-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0.9rem;
  }

  .object-card--stage {
    width: min(18rem, 92%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .object-card-cover,
  .object-card--book:hover .object-card-cover {
    transition: none;
    transform: none;
  }
}

/* Landing-page-scoped presentation lives in landing-shell/style.css so this
   feed stays quiet when it is used as the bottom archive band. */
.editorial-feed-categories{display:flex;flex-direction:column;gap:4px;margin:24px 0 12px}.editorial-feed-categories a{display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:40px;max-width:240px;font-size:14px;color:var(--color-dim)}.editorial-feed-categories a:hover{color:var(--color-accent)}

/* Standalone page-sections also host this feed. The landing-shell keeps its
   more specific presentation; the feed no longer needs that shell for layout. */
.page-section .editorial-feed {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--container-max, 1120px);
  margin-inline: auto;
  padding: var(--space-section, 64px) var(--space-page-x, 24px);
  color: var(--color-text);
}
.page-section .editorial-feed-rail h2 { font-size: var(--type-heading, 1.5rem); line-height: 1.3; margin: 0 0 1rem; }
.page-section .editorial-feed-rail p, .page-section .editorial-feed-row p { color: var(--color-dim); line-height: 1.7; }
.page-section .editorial-feed-all { color: var(--color-accent); text-underline-offset: 0.2em; }
.page-section .editorial-feed-list { min-width: 0; border-top: 1px solid var(--color-border); }
.page-section .editorial-feed-row { padding-block: 1.5rem; border-bottom: 1px solid var(--color-border); }
.page-section .editorial-feed-row a { display: block; color: inherit; text-decoration: none; }
.page-section .editorial-feed-row a:hover h3 { color: var(--color-accent); }
.page-section .editorial-feed-row h3 { font-size: 1.25rem; line-height: 1.4; margin: 0; }
.page-section .editorial-feed-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; color: var(--color-dim); font-size: 0.8rem; }
.page-section .editorial-feed a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
@media (max-width: 720px) {
  .page-section .editorial-feed { grid-template-columns: minmax(0, 1fr); }
}

/* ArcBlock landing pages: scoped so articles and docs keep their own reading surface. */
.landing-page {
  --landing-display: var(--font-display, "Sora", system-ui, sans-serif);
  --landing-body: var(--font-body, "Inter", system-ui, sans-serif);
  --landing-utility: var(--font-utility, "JetBrains Mono", ui-monospace, monospace);
  --landing-trace: var(--color-accent, #008f7a);
  --landing-trace-soft: color-mix(in srgb, var(--landing-trace) 14%, transparent);
  --landing-rule: color-mix(in srgb, var(--color-border) 68%, transparent);
}

.landing-page-section {
  position: relative;
}

/* key-pad mounts on document.body; hide the landing slot that only holds its boot marker.
   Theme package deliberately does not target this site's #xy-keys slot (arc#5414). */
.landing-page #after-content:has(.key-pad-boot):not(:has(.beat-strip-boot)),
#xy-keys {
  display: none !important;
}

/* Keyboard glyphs are a desktop hint. Touch uses swipe. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .key-pad {
    display: none !important;
  }
}

.landing-page-section:nth-child(even) {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}

/* Page containers use the runtime's own box: max-width --page-max with
   --page-gutter of padding inside it (see .container in the runtime CSS, which
   the site header and footer both use). Hand-rolling `min(--container-max,
   100% - 48px)` made these bands 24px wider per side than the header and the
   footer, and gave phones a gutter that did not track --page-gutter. */
.landing-page .content-cards-wrap {
  width: 100%;
  max-width: var(--page-max, 1120px);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) var(--page-gutter, 24px);
}

.landing-page .content-cards-header {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(15rem, 0.58fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--landing-rule);
}

.landing-page .content-cards-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--landing-display);
  font-size: clamp(1.55rem, 2.65vw, 2.7rem);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.landing-page .content-cards-description {
  max-width: 34rem;
  margin: 0;
  color: var(--color-dim);
  font-family: var(--landing-body);
  font-size: clamp(0.96rem, 1vw, 1.05rem);
  line-height: 1.78;
}

.landing-page .content-cards-eyebrow,
.landing-page .card-meta,
.landing-page .card-kicker {
  font-family: var(--landing-utility);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-page .content-cards-eyebrow {
  color: var(--landing-trace);
}

.landing-page .content-cards-eyebrow::before {
  width: 1.1rem;
  background: currentColor;
}

/* Mechanism and task sections are quiet explanatory blocks, not a card wall. */
.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-cards {
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  border-top: 1px solid var(--landing-rule);
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-card {
  min-height: 0;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--landing-rule);
  border-bottom: 1px solid var(--landing-rule);
  background: transparent;
  box-shadow: none;
  transition: background-color 160ms ease;
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-card:first-child {
  border-left: 1px solid var(--landing-rule);
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-card:hover {
  transform: none;
  border-color: var(--landing-rule);
  background: color-mix(in srgb, var(--landing-trace) 4%, transparent);
  box-shadow: none;
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-body {
  min-height: 12.5rem;
  padding: clamp(1.25rem, 2.4vw, 2rem);
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-title {
  margin: 0 0 0.62rem;
  color: var(--color-text);
  font-family: var(--landing-display);
  font-size: clamp(1.06rem, 1.28vw, 1.25rem);
  font-weight: 560;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-excerpt {
  margin: 0;
  color: var(--color-dim);
  font-family: var(--landing-body);
  font-size: 0.91rem;
  line-height: 1.72;
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-kicker {
  margin-bottom: 0.85rem;
  color: var(--landing-trace);
}

.landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-link:hover .card-title,
.landing-page .content-cards-wrap--fleet .card-link:hover .card-title {
  color: var(--landing-trace);
}

/* Evidence and reading links become a deliberately quiet editorial list. */
.landing-page .content-cards-wrap--fleet {
  width: min(760px, calc(100% - 48px));
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.landing-page .content-cards-wrap--fleet .content-cards-header {
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.landing-page .content-cards-wrap--fleet .content-cards-title {
  font-size: clamp(1.35rem, 2.1vw, 1.95rem);
  max-width: 20ch;
}

.landing-page .content-cards-wrap--fleet .content-card {
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--landing-rule);
}

.landing-page .content-cards-wrap--fleet .card-body {
  gap: 0.38rem;
}

.landing-page .content-cards-wrap--fleet .card-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--landing-display);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  font-weight: 560;
  line-height: 1.32;
  letter-spacing: -0.008em;
}

.landing-page .content-cards-wrap--fleet .card-excerpt {
  margin: 0;
  color: var(--color-dim);
  font-family: var(--landing-body);
  font-size: 0.9rem;
  line-height: 1.65;
}

.landing-page .content-cards-wrap--fleet .card-meta {
  gap: 0.4rem;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

/* The dynamic related band is wide enough to read, yet quieter than the page's
   main argument. The label and the chronological list deliberately have
   different jobs; the source/filter remains defined in the page source. */
.landing-page #related-articles {
  border-top: 1px solid var(--landing-rule);
  background: transparent;
}

.landing-page #related-articles .content-cards-wrap--fleet {
  width: 100%;
  max-width: var(--page-max, 1120px);
  padding-left: var(--page-gutter, 24px);
  padding-right: var(--page-gutter, 24px);
  display: grid;
  grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.landing-page #related-articles .content-cards-header {
  grid-column: 1;
  margin: 0;
}

.landing-page #related-articles .content-cards {
  grid-column: 2;
  min-width: 0;
  border-top: 1px solid var(--landing-rule);
}

.landing-page #related-articles .content-card {
  padding: clamp(1.2rem, 2vw, 1.65rem) 0;
}

.landing-page #related-articles .card-title {
  font-size: clamp(1.08rem, 1.34vw, 1.28rem);
  line-height: 1.36;
}

.landing-page #related-articles .card-excerpt {
  max-width: 52rem;
  font-size: 0.95rem;
  line-height: 1.72;
}

.landing-page #related-articles .card-meta {
  font-size: 0.64rem;
}

.landing-page #related-articles .content-cards-wrap--fleet .content-cards-title {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
}

/* A related band is an archive anchor, not empty framing around a narrow list.
   Its localized rail states why the list exists and keeps the all-articles
   action near the reader's choice; the dynamically supplied rows stay primary. */
.landing-page .editorial-feed {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 6vw, 7rem);
  grid-template-columns: minmax(11rem, 0.42fr) minmax(0, 1fr);
  margin: 0 auto;
  padding: clamp(2.7rem, 5vw, 4.2rem) var(--page-gutter, 24px) clamp(3.25rem, 6vw, 5.25rem);
  width: 100%;
  max-width: var(--page-max, 1120px);
}

.landing-page .editorial-feed-rail {
  align-self: start;
  display: grid;
  gap: 0.85rem;
  max-width: 16rem;
  position: sticky;
  top: 6.75rem;
}

.landing-page .editorial-feed-eyebrow {
  color: var(--color-accent);
  font-family: var(--font-utility, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.landing-page .editorial-feed-rail h2 {
  color: var(--color-hero-ink, var(--color-text));
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: clamp(1.22rem, 1.7vw, 1.5rem);
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 0;
}

.landing-page .editorial-feed-rail p {
  color: var(--color-dim);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

.landing-page .editorial-feed-all {
  color: var(--color-accent);
  font-family: var(--font-utility, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  margin-top: 0.4rem;
  text-decoration: none;
  text-underline-offset: 0.24em;
  width: fit-content;
}

.landing-page .editorial-feed-all:hover {
  text-decoration: underline;
}

.landing-page .editorial-feed-list {
  border-top: 1px solid var(--landing-rule);
  min-width: 0;
}

.landing-page .editorial-feed-row {
  border-bottom: 1px solid var(--landing-rule);
  padding: clamp(1.2rem, 2vw, 1.65rem) 0;
}

.landing-page .editorial-feed-row a {
  color: inherit;
  display: block;
  text-decoration: none;
}

.landing-page .editorial-feed-row h3 {
  color: var(--color-hero-ink, var(--color-text));
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(1.08rem, 1.34vw, 1.28rem);
  font-weight: 650;
  line-height: 1.36;
  margin: 0;
}

.landing-page .editorial-feed-row a:hover h3 {
  color: var(--color-accent);
}

.landing-page .editorial-feed-row p {
  color: var(--color-dim);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.95rem;
  line-height: 1.72;
  margin: 0.5rem 0 0;
  max-width: 52rem;
}

.landing-page .editorial-feed-meta {
  align-items: center;
  color: var(--color-dim);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-utility, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.64rem;
  gap: 0.4rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.landing-page .editorial-feed-dot {
  opacity: 0.6;
}

/* Homepage: a selected editorial lead, compact product paths, then an index-like stream. */
.landing-page:has(.landing-hero--home) #featured-reading .content-cards-wrap--fleet {
  width: 100%;
  max-width: var(--page-max, 1120px);
  padding-left: var(--page-gutter, 24px);
  padding-right: var(--page-gutter, 24px);
}

.landing-page:has(.landing-hero--home) #featured-reading .content-cards {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  column-gap: clamp(1.75rem, 4.5vw, 5rem);
  grid-auto-rows: min-content;
  border-top: 1px solid var(--landing-trace);
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child {
  grid-column: 1;
  grid-row: span 2;
  padding: clamp(1.35rem, 2.7vw, 2.2rem) clamp(1.75rem, 4vw, 4rem) clamp(1.5rem, 3vw, 2.6rem) 0;
  margin: 0;
  border-bottom: 1px solid var(--landing-rule);
  border-right: 1px solid var(--landing-rule);
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child .card-body {
  max-width: 39rem;
  gap: 0.55rem;
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child .card-title {
  font-size: clamp(1.45rem, 2.15vw, 2.15rem);
  line-height: 1.14;
  max-width: 21ch;
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child .card-excerpt {
  max-width: 34rem;
  font-size: 0.97rem;
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:not(:first-child) {
  padding: clamp(1.2rem, 2vw, 1.7rem) 0 clamp(1.2rem, 2vw, 1.7rem) clamp(1.5rem, 3vw, 2.7rem);
  margin: 0;
  border-bottom: 1px solid var(--landing-rule);
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:not(:first-child) .card-title {
  font-size: clamp(1.1rem, 1.35vw, 1.32rem);
  line-height: 1.3;
}

.landing-page:has(.landing-hero--home) #featured-reading .content-card:not(:first-child) .card-excerpt {
  font-size: 0.92rem;
}

.landing-page:has(.landing-hero--home) #product-collection .content-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-page:has(.landing-hero--home) #product-collection .content-cards-header {
  grid-template-columns: 1fr;
  gap: 0.55rem;
  max-width: 43rem;
  margin-bottom: 1.35rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.landing-page:has(.landing-hero--home) #product-collection .content-cards-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.landing-page:has(.landing-hero--home) #product-collection .content-card {
  min-height: 0;
}

.landing-page:has(.landing-hero--home) #product-collection .card-body {
  min-height: 11rem;
}

.landing-page:has(.landing-hero--home) #latest-updates {
  background: color-mix(in srgb, var(--color-surface) 48%, transparent);
}

.landing-page:has(.landing-hero--home) #latest-updates .content-cards-wrap--fleet {
  width: 100%;
  max-width: var(--page-max, 1120px);
  padding-left: var(--page-gutter, 24px);
  padding-right: var(--page-gutter, 24px);
  display: grid;
  grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  padding-top: clamp(3rem, 6vw, 5rem);
}

.landing-page:has(.landing-hero--home) #latest-updates .content-cards-header {
  grid-column: 1;
  margin: 0;
}

.landing-page:has(.landing-hero--home) #latest-updates .content-cards {
  grid-column: 2;
  min-width: 0;
  border-top: 1px solid var(--landing-rule);
}

.landing-page:has(.landing-hero--home) #latest-updates .content-card {
  padding: clamp(1.2rem, 2vw, 1.65rem) 0;
}

.landing-page:has(.landing-hero--home) #latest-updates .card-title {
  font-size: clamp(1.08rem, 1.34vw, 1.28rem);
  line-height: 1.36;
}

.landing-page:has(.landing-hero--home) #latest-updates .card-excerpt {
  max-width: 52rem;
  font-size: 0.95rem;
  line-height: 1.72;
}

.landing-page:has(.landing-hero--home) #latest-updates .content-cards-wrap--fleet .content-cards-title {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

.landing-page:has(.landing-hero--home) #latest-updates {
  background: color-mix(in srgb, var(--color-surface) 48%, transparent);
}

.landing-page:has(.landing-hero--home) #latest-updates .editorial-feed {
  padding-top: clamp(3rem, 6vw, 5rem);
}

/* AFS is the technical sample: a compact mechanism strip, then one concrete work surface. */
.landing-page:has(.landing-hero--technical) #working-view .content-cards {
  grid-template-columns: 0.78fr 1.22fr;
}

.landing-page:has(.landing-hero--technical) #local-example .content-cards {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.landing-page:has(.landing-hero--technical) #local-example .content-card:last-child {
  background: color-mix(in srgb, var(--landing-trace) 5%, transparent);
}

/* Research pages retain a reading cadence: citation, principles, material, discussion. */
.landing-page:has(.landing-hero--research) #paper-proposal .content-cards-wrap--fleet {
  width: min(900px, calc(100% - 48px));
}

.landing-page:has(.landing-hero--research) #paper-proposal .content-card {
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--landing-trace);
}

.landing-page:has(.landing-hero--research) #key-ideas .content-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-page:has(.landing-hero--research) #ongoing-discussion .content-cards {
  grid-template-columns: 1.05fr 0.95fr 1fr;
}

.landing-page:has(.landing-hero--research) #formal-response {
  background: color-mix(in srgb, var(--landing-trace) 4%, transparent);
}

html[lang^="zh"] .landing-page .content-cards-title,
html[lang^="ja"] .landing-page .content-cards-title,
html[lang^="zh"] .landing-page .card-title,
html[lang^="ja"] .landing-page .card-title {
  letter-spacing: 0;
}

html[lang^="zh"] .landing-page .content-cards-eyebrow,
html[lang^="ja"] .landing-page .content-cards-eyebrow,
html[lang^="zh"] .landing-page .card-meta,
html[lang^="ja"] .landing-page .card-meta,
html[lang^="zh"] .landing-page .card-kicker,
html[lang^="ja"] .landing-page .card-kicker {
  letter-spacing: 0.03em;
  text-transform: none;
}

@media (max-width: 760px) {
  .landing-page .content-cards-wrap,
  .landing-page .content-cards-wrap--fleet {
    padding: 3rem var(--page-gutter, 24px);
  }

  .landing-page #related-articles .content-cards-wrap--fleet,
  .landing-page:has(.landing-hero--home) #latest-updates .content-cards-wrap--fleet {
    display: block;
  }

  .landing-page .editorial-feed {
    display: block;
    padding: 3rem var(--page-gutter, 24px);
  }

  .landing-page .editorial-feed-rail {
    max-width: none;
    position: static;
  }

  .landing-page .editorial-feed-list {
    margin-top: 1.25rem;
  }

  .landing-page #related-articles .content-cards-header,
  .landing-page:has(.landing-hero--home) #latest-updates .content-cards-header {
    margin-bottom: 1.1rem;
  }

  .landing-page #related-articles .content-card,
  .landing-page:has(.landing-hero--home) #latest-updates .content-card {
    padding: 1.2rem 0;
  }

  .landing-page .content-cards-header {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .landing-page .content-cards-title {
    font-size: clamp(1.75rem, 8vw, 2.45rem);
  }

  .landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-cards,
  .landing-page:has(.landing-hero--home) #featured-reading .content-cards,
  .landing-page:has(.landing-hero--home) #product-collection .content-cards,
  .landing-page:has(.landing-hero--technical) #working-view .content-cards,
  .landing-page:has(.landing-hero--technical) #local-example .content-cards,
  .landing-page:has(.landing-hero--research) #key-ideas .content-cards,
  .landing-page:has(.landing-hero--research) #ongoing-discussion .content-cards {
    grid-template-columns: 1fr;
  }

  .landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-card,
  .landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .content-card:first-child {
    border-left: 1px solid var(--landing-rule);
  }

  .landing-page .content-cards-wrap:not(.content-cards-wrap--fleet) .card-body {
    min-height: 0;
  }

  .landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child {
    grid-column: auto;
    grid-row: auto;
    padding: 1.35rem 0 1.65rem;
    border-right: 0;
  }

  .landing-page:has(.landing-hero--home) #featured-reading .content-card:first-child .card-title {
    font-size: clamp(1.45rem, 7.5vw, 2rem);
  }

  .landing-page:has(.landing-hero--home) #featured-reading .content-card:not(:first-child) {
    padding: 1.25rem 0;
  }
}