metanorma-document 0.2.0

data/data/stylesheets/base/_typography.css

@@ -0,0 +1,89 @@
+/* === Typography — editorial heading hierarchy === */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-sans);
+  margin: 2em 0 0.65em;
+  line-height: 1.3;
+  color: var(--mn-primary);
+  font-weight: 600;
+  scroll-margin-top: calc(var(--header-height) + 16px);
+  position: relative;
+  letter-spacing: -0.01em;
+  transition: color 0.35s ease, border-color 0.35s ease;
+}
+h1 {
+  font-size: 2em; letter-spacing: -0.035em; margin-top: 1.8em;
+  padding-bottom: 0.55em;
+  border-bottom: 1px solid var(--color-border);
+}
+h1::after {
+  content: ""; position: absolute;
+  bottom: -1px; left: 0; width: 3.5em; height: 2px;
+  background: var(--mn-accent);
+  border-radius: 1px;
+  transition: width 0.3s ease;
+}
+h1:hover::after { width: 5em; }
+h2 { font-size: 1.5em; letter-spacing: -0.02em; }
+h3 { font-size: 1.2em; letter-spacing: -0.01em; }
+h4 { font-size: 1.05em; color: var(--color-text-light); font-weight: 600; }
+[id] { scroll-margin-top: calc(var(--header-height) + 16px); }
+
+p {
+  margin: 0 0 0.85em;
+  hanging-punctuation: first last;
+  orphans: 3; widows: 3;
+}
+.doc-content p + p { text-indent: 1.5em; margin-top: -0.3em; }
+h1 + p, h2 + p, h3 + p, blockquote + p, figure + p, table + p,
+.note-block p + p, .example p + p,
+div[id^="term-"] p + p,
+.norm-ref-entry, .biblio-entry { text-indent: 0; }
+
+a {
+  color: var(--mn-primary);
+  text-decoration: underline;
+  text-decoration-color: rgba(40,56,138,0.25);
+  text-underline-offset: 2px;
+  text-decoration-skip-ink: auto;
+  text-decoration-thickness: 1px;
+  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
+}
+a:hover { color: var(--mn-accent); text-decoration-color: rgba(156,96,193,0.5); }
+a:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: 2px; border-radius: 2px; }
+img { max-width: 100%; height: auto; border-radius: var(--radius-sm); background: #fff; }
+ul, ol { margin: 0.75em 0; padding-left: 2em; }
+li { margin: 0.25em 0; }
+li::marker { color: var(--mn-accent); }
+dl { margin: 0.75em 0; }
+dt { font-weight: bold; margin-top: 0.75em; }
+dd { margin-left: 2em; }
+code {
+  font-family: var(--font-mono); font-size: 0.87em;
+  background: var(--mn-primary-light); padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+pre code { background: transparent; padding: 0; }
+blockquote {
+  border-left: 3px solid var(--mn-accent);
+  margin: 1.4em 0; padding-left: 1.2em;
+  color: var(--color-text-light); font-style: italic;
+}
+tt { font-family: var(--font-mono); font-size: 0.87em; }
+hr.cover-separator { border: none; }
+
+/* Caption labels — small-caps editorial */
+.caption-label, .fmt-caption-label {
+  font-variant: small-caps;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  background: none;
+  color: var(--mn-primary);
+  padding: 0;
+  display: inline-block;
+  vertical-align: baseline;
+  margin-right: 0.15em;
+}
+.fmt-autonum-delim { font-weight: 400; }
+.fmt-element-name, .element-name { font-style: italic; color: var(--color-text-light); font-weight: 400; }
+.fmt-caption-delim, .caption-delim { opacity: 0.35; }
+.autonum-delim { font-weight: 400; }

data/data/stylesheets/components/admonition.css

@@ -0,0 +1,19 @@
+/* === Admonitions — theme variable driven === */
+.admonition {
+  background: var(--admonition-bg);
+  border-left: 4px solid var(--admonition-border);
+  padding: 0.9em 1.2em 0.9em 2.8em; margin: 1.2em 0;
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  position: relative;
+  font-size: 0.95em;
+}
+.admonition::before {
+  content: "";
+  position: absolute; left: 0.8em; top: 1em;
+  width: 16px; height: 16px;
+  background: var(--admonition-border);
+  opacity: 0.7;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 000 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 00.01-1.002L8.893 1.5zm.133 11.497H6.984v-2.003h2.042v2.003zm0-3.004H6.984V5.99h2.042v3.997z'/%3E%3C/svg%3E") center/contain no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 000 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 00.01-1.002L8.893 1.5zm.133 11.497H6.984v-2.003h2.042v2.003zm0-3.004H6.984V5.99h2.042v3.997z'/%3E%3C/svg%3E") center/contain no-repeat;
+}
+.admonition-title { font-weight: 600; margin-bottom: 0.5em; color: var(--admonition-color); font-family: var(--font-sans); }

data/data/stylesheets/components/bibliography.css

@@ -0,0 +1,18 @@
+/* === Bibliography — structured references === */
+.biblio-entry {
+  padding: 0.5em 0 0.5em 2.5em;
+  text-indent: -2.5em;
+  font-size: 0.93em; line-height: 1.7;
+  border-bottom: 1px solid var(--color-border);
+}
+.biblio-entry:last-child { border-bottom-color: transparent; }
+.norm-ref-entry {
+  padding: 0.5em 0;
+  font-size: 0.93em; line-height: 1.7;
+  border-bottom: 1px solid var(--color-border);
+}
+.norm-ref-entry:last-child { border-bottom-color: transparent; }
+.std-doc-number { font-weight: 500; color: var(--mn-primary); font-family: var(--font-sans); }
+.std-year { font-weight: 500; }
+.biblio-link { color: inherit; text-decoration: none; }
+.biblio-link:hover { color: var(--mn-primary); text-decoration: underline; }

data/data/stylesheets/components/cover.css

@@ -0,0 +1,205 @@
+/* === Cover Page — editorial grid === */
+.title-section {
+  min-height: 60vh;
+  display: grid;
+  place-items: center;
+  padding: 5vh 6vw;
+  background: var(--mn-cover-bg, var(--mn-gradient));
+  color: #fff;
+  margin-bottom: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Atmospheric layer — grid + ambient light */
+.title-section::before {
+  content: ""; position: absolute; inset: 0;
+  background:
+    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
+    radial-gradient(ellipse at 20% 25%, rgba(156,96,193,0.15) 0%, transparent 55%),
+    radial-gradient(ellipse at 80% 75%, rgba(40,56,138,0.18) 0%, transparent 50%),
+    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.015) 0%, transparent 60%);
+  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%, 100% 100%;
+  pointer-events: none;
+}
+
+/* Curved bottom edge */
+.title-section::after {
+  content: ""; position: absolute;
+  bottom: -1px; left: 0; right: 0; height: 60px;
+  background: var(--color-bg);
+  clip-path: ellipse(55% 100% at 50% 100%);
+  transition: background-color 0.35s ease;
+}
+
+/* Editorial grid layout */
+.cover-grid {
+  width: 100%;
+  max-width: 48em;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 2em;
+  position: relative;
+  z-index: 1;
+}
+.cover-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5em;
+  padding-right: 3em;
+  border-right: 1px solid rgba(255,255,255,0.15);
+}
+.cover-publishers {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8em;
+}
+.cover-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.cover-logo svg { height: 40px; width: auto; max-width: 120px; }
+.cover-logo svg path { fill: #fff; }
+.cover-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+/* Cover elements */
+.cover-doc-id {
+  font-family: var(--font-sans); font-weight: 700;
+  font-size: 1.1em;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.98);
+  position: relative; z-index: 1;
+  animation: coverFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: 0.15s;
+}
+.cover-date {
+  font-family: var(--font-sans);
+  font-size: 0.9em;
+  font-weight: 400;
+  opacity: 0.7;
+  letter-spacing: 0.06em;
+  position: relative; z-index: 1;
+}
+.cover-title {
+  font-family: var(--font-sans); font-size: 3em;
+  font-weight: 300;
+  color: #fff; line-height: 1.15;
+  overflow-wrap: break-word;
+  position: relative; z-index: 1;
+  letter-spacing: -0.03em;
+  animation: coverTitleIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: 0.35s;
+}
+.cover-title .subtitle { color: #fff; }
+.cover-doctype {
+  font-family: var(--font-sans);
+  font-size: 0.72em; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.15em;
+  color: rgba(255,255,255,0.6); margin-bottom: 0.8em;
+  position: relative; z-index: 1;
+}
+.cover-stage {
+  margin-top: 1.5em; position: relative; z-index: 1;
+  animation: coverFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: 0.55s;
+}
+.cover-stage p {
+  font-family: var(--font-sans);
+  background: transparent; color: rgba(255,255,255,0.85);
+  display: inline-block; padding: 0.5em 2em;
+  border-radius: 3px; font-size: 0.72em; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.2em;
+  border: 1px solid rgba(255,255,255,0.2);
+}
+.cover-separator {
+  border: none; height: 1px;
+  background: var(--mn-cover-separator, rgba(255,255,255,0.15));
+  margin: 0; width: 100%;
+}
+
+/* Legacy centered cover (for non-grid cover pages) */
+.title-section > .cover-doc-id:first-child { margin-top: 0; }
+.title-section:not(:has(.cover-grid)) {
+  text-align: center;
+  display: flex; flex-direction: column;
+  justify-content: center; align-items: center;
+  padding: 10vh 2em 8vh;
+}
+.title-section:not(:has(.cover-grid)) .cover-doc-id {
+  font-size: 1.4em;
+  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+}
+.title-section:not(:has(.cover-grid)) .cover-doc-id:first-child::before {
+  content: ""; display: block;
+  width: 6em; height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
+  margin: 0 auto 1.8em;
+}
+.title-section:not(:has(.cover-grid)) .cover-title {
+  max-width: 24em;
+  text-shadow: 0 2px 16px rgba(0,0,0,0.25);
+}
+
+/* Document title line */
+.doc-title {
+  text-align: center; font-family: var(--font-sans);
+  font-weight: 700; font-size: 1.3em;
+  margin: 3em 0 1.8em; color: var(--mn-primary);
+  letter-spacing: -0.015em;
+  position: relative;
+  padding-bottom: 0.9em;
+}
+.doc-title::after {
+  content: ""; position: absolute;
+  bottom: 0; left: 50%; transform: translateX(-50%);
+  width: 4em; height: 2.5px;
+  background: var(--mn-accent);
+  border-radius: 1px;
+}
+
+/* Prefatory section */
+.prefatory-section {
+  font-size: 0.92em; color: var(--color-text-light);
+  padding: 2.5em 1em 1.5em;
+  border-top: none;
+  max-width: 42em;
+  margin-left: auto; margin-right: auto;
+}
+.boilerplate-copyright { font-size: 0.9em; margin-bottom: 1em; line-height: 1.7; }
+license-statement, feedback-statement {
+  display: block; margin: 1em 0;
+  font-size: 0.92em; line-height: 1.7;
+}
+license-statement {
+  padding: 0.8em 1em;
+  background: var(--color-bg-light);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+}
+feedback-statement {
+  padding-top: 0.8em;
+  border-top: 1px dashed var(--color-border);
+  address { font-style: normal; white-space: pre-line; }
+}
+
+/* Mobile cover */
+@media (max-width: 767px) {
+  .cover-grid { grid-template-columns: 1fr; gap: 1.5em; }
+  .cover-meta { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding-right: 0; padding-bottom: 1em; flex-direction: row; flex-wrap: wrap; }
+  .cover-title { font-size: 2em; }
+  .cover-doc-id { font-size: 1em; }
+  .title-section { padding: 4vh 1.2em 4vh; min-height: 50vh; }
+  .title-section:not(:has(.cover-grid)) { padding: 6vh 1.2em 5vh; }
+  .title-section:not(:has(.cover-grid)) .cover-doc-id { font-size: 1.1em; }
+  .title-section:not(:has(.cover-grid)) .cover-title { font-size: 1.6em; }
+  .doc-title { font-size: 1.15em; margin: 2em 0 1.2em; }
+}

data/data/stylesheets/components/example.css

@@ -0,0 +1,20 @@
+/* === Examples — theme variable driven === */
+.example {
+  background: var(--example-bg);
+  border-left: 3px solid var(--example-border);
+  padding: 0.8em 1em 0.8em 2.6em;
+  margin: 1.2em 0;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  position: relative;
+  font-size: 0.93em;
+}
+.example::before {
+  content: "";
+  position: absolute; left: 0.8em; top: 1em;
+  width: 16px; height: 16px;
+  background: var(--example-border);
+  opacity: 0.6;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M6 2a2 2 0 00-2 2v8a2 2 0 002 2h4a2 2 0 002-2V4a2 2 0 00-2-2H6zm0 1h4a1 1 0 011 1v8a1 1 0 01-1 1H6a1 1 0 01-1-1V4a1 1 0 011-1z'/%3E%3C/svg%3E") center/contain no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M6 2a2 2 0 00-2 2v8a2 2 0 002 2h4a2 2 0 002-2V4a2 2 0 00-2-2H6zm0 1h4a1 1 0 011 1v8a1 1 0 01-1 1H6a1 1 0 01-1-1V4a1 1 0 011-1z'/%3E%3C/svg%3E") center/contain no-repeat;
+}
+.example-label { font-weight: 600; color: var(--example-color); font-family: var(--font-sans); }

data/data/stylesheets/components/figure.css

@@ -0,0 +1,30 @@
+/* === Figures === */
+figure { margin: 1.4em 0; max-width: 100%; text-align: center; }
+figure img { display: block; margin: 0 auto; }
+figcaption {
+  font-style: italic; font-size: 0.9em;
+  margin-top: 0.5em; color: var(--color-text-light);
+  font-family: var(--font-sans);
+  transition: color 0.35s ease;
+}
+figcaption .caption-label { vertical-align: middle; }
+
+/* Figure Lightbox */
+.lightbox-overlay {
+  position: fixed; inset: 0;
+  background: rgba(10, 10, 20, 0.92);
+  z-index: 3000;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  cursor: zoom-out;
+  animation: lightboxIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.lightbox-overlay img {
+  max-width: 90vw; max-height: 82vh;
+  object-fit: contain; border-radius: var(--radius-md);
+  box-shadow: 0 12px 56px rgba(0,0,0,0.6);
+  animation: lightboxImgIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.doc-content figure img { cursor: zoom-in; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
+.doc-content figure img:hover { transform: scale(1.01); box-shadow: var(--shadow-md); }

data/data/stylesheets/components/footer.css

@@ -0,0 +1,24 @@
+/* === Footer === */
+.doc-footer {
+  text-align: center; padding: 2.5em 1.2em;
+  font-size: 0.82em; color: var(--color-text-muted);
+  border-top: 2px solid var(--mn-footer-border, var(--color-border));
+  margin-top: 4em; background: var(--color-bg-light);
+  font-family: var(--font-sans);
+  position: relative;
+  transition: background-color 0.35s ease, border-color 0.35s ease;
+}
+.doc-footer::before {
+  content: ""; position: absolute; top: 0; left: 50%;
+  transform: translateX(-50%);
+  width: 4em; height: 2px;
+  background: var(--mn-accent); opacity: 0.4;
+  border-radius: 1px;
+}
+.footer-brand {
+  display: flex; align-items: center; justify-content: center;
+  gap: 0.5em; flex-wrap: wrap;
+}
+.footer-mn-logo svg path { fill: var(--color-text-muted); }
+.footer-text { font-family: var(--font-sans); }
+.doc-footer p { margin: 0.3em 0; }

data/data/stylesheets/components/footnote.css

@@ -0,0 +1,41 @@
+/* === Footnotes === */
+a.fn-link {
+  color: inherit;
+  text-decoration: none;
+}
+a.fn-link:hover {
+  color: var(--mn-primary);
+}
+.footnotes-section {
+  margin-top: 3em;
+  padding-top: 1.5em;
+  border-top: 1px solid var(--color-border);
+}
+.footnotes-title {
+  font-size: 1em;
+  font-weight: 600;
+  color: var(--color-text-light);
+  margin: 0 0 0.75em;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+ol.footnotes {
+  list-style: decimal;
+  padding-left: 2em;
+  font-size: 0.88em;
+  color: var(--color-text-light);
+}
+ol.footnotes li {
+  margin: 0.4em 0;
+  padding-left: 0.3em;
+}
+a.footnote-backref {
+  text-decoration: none;
+  color: var(--mn-primary);
+  font-weight: 600;
+}
+.formula-where {
+  font-style: italic;
+  font-size: 0.95em;
+  margin: 0.5em 0 0;
+}

data/data/stylesheets/components/formula.css

@@ -0,0 +1,25 @@
+/* === Formulas — rules instead of boxes === */
+.formula {
+  margin: 1.5em 0;
+  padding: 1.2em 0;
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+  background: none;
+  box-shadow: none;
+  display: block;
+  text-align: center;
+  overflow-x: auto;
+}
+.formula .stem { font-style: italic; font-size: 1.05em; }
+.formula-number {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 0.92em;
+  color: var(--mn-primary);
+  white-space: nowrap;
+  float: right;
+}
+
+@media (max-width: 767px) {
+  .formula .formula-number { float: none; display: block; text-align: center; margin-top: 0.5em; }
+}

data/data/stylesheets/components/glossary.css

@@ -0,0 +1,61 @@
+/* === Glossary Panel === */
+.glossary-panel {
+  position: fixed; inset: 0;
+  background: rgba(26, 26, 46, 0.35);
+  z-index: 1000; opacity: 0; pointer-events: none;
+  transition: opacity 0.25s ease;
+  display: flex; align-items: flex-start; justify-content: center;
+  padding-top: 12vh;
+  backdrop-filter: blur(4px);
+}
+.glossary-panel.glossary-visible { opacity: 1; pointer-events: auto; }
+.glossary-inner {
+  background: var(--color-bg); border: 1px solid var(--color-border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
+  width: min(480px, 90vw); max-height: 70vh;
+  display: flex; flex-direction: column;
+  overflow: hidden;
+}
+.glossary-header {
+  display: flex; align-items: center; gap: 0.6em;
+  padding: 0.7em 1em; border-bottom: 1px solid var(--color-border);
+  background: var(--mn-primary-light);
+}
+.glossary-title {
+  font-family: var(--font-sans); font-size: 0.85em;
+  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
+  color: var(--mn-primary);
+}
+.glossary-count {
+  font-family: var(--font-sans); font-size: 0.75em;
+  color: var(--color-text-muted); margin-left: auto;
+}
+.glossary-close {
+  background: none; border: none; font-size: 1.2em;
+  cursor: pointer; color: var(--color-text-muted); padding: 0; line-height: 1;
+}
+.glossary-close:hover { color: var(--mn-primary); }
+.glossary-search {
+  margin: 0.6em 1em; padding: 0.4em 0.7em;
+  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
+  font-size: 0.88em; font-family: var(--font-sans);
+  background: var(--color-bg-light); color: var(--color-text);
+  outline: none;
+}
+.glossary-search:focus { border-color: var(--mn-primary); }
+.glossary-list {
+  overflow-y: auto; padding: 0.4em 0; flex: 1;
+}
+.glossary-entry {
+  padding: 0.4em 1em; border-bottom: 1px solid var(--color-border);
+}
+.glossary-entry:last-child { border-bottom: none; }
+.glossary-term {
+  font-family: var(--font-sans); font-weight: 600; font-size: 0.9em;
+  color: var(--mn-primary); text-decoration: none;
+}
+.glossary-term:hover { text-decoration: underline; }
+.glossary-def {
+  font-size: 0.82em; color: var(--color-text-light); margin: 0.2em 0 0;
+  line-height: 1.5;
+}

data/data/stylesheets/components/header.css

@@ -0,0 +1,149 @@
+/* === Header Bar === */
+.doc-header {
+  display: flex; align-items: center; justify-content: flex-start;
+  height: var(--header-height);
+  padding: 0 1em;
+  background: var(--mn-header-bg, linear-gradient(135deg, rgba(40,56,138,0.95) 0%, rgba(58,75,160,0.95) 50%, rgba(156,96,193,0.92) 100%));
+  color: #fff;
+  position: sticky; top: 0; z-index: 100;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
+  contain: layout style;
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+              height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+              background 0.35s ease, box-shadow 0.35s ease;
+}
+.header-compact {
+  height: 40px !important;
+}
+.header-compact .brand-name { display: none; }
+.header-brand { display: flex; align-items: center; gap: 0.4em; min-width: 0; flex-shrink: 0; }
+.header-mn-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
+.header-mn-logo svg path { fill: #fff; }
+.header-mn-mark {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 6px;
+  background: rgba(255,255,255,0.2); font-weight: 700;
+  font-size: 0.9em; font-family: var(--font-sans);
+}
+.brand-name {
+  font-family: var(--font-sans); font-size: 1em; font-weight: 600;
+  letter-spacing: 0.01em; opacity: 0.95; white-space: nowrap;
+}
+.brand-logo {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 26px; border-radius: var(--radius-sm); overflow: hidden;
+  margin-left: 0.3em; background: rgba(255,255,255,0.12);
+  padding: 0 0.3em; flex-shrink: 0;
+}
+.brand-logo svg { height: 22px; width: auto; max-width: none; }
+.brand-logo svg path { fill: #fff; }
+.brand-logo + .brand-logo { margin-left: 0.2em; }
+.header-doc-id {
+  font-family: var(--font-sans); font-size: 0.82em; opacity: 0.85;
+  font-weight: 600; letter-spacing: 0.02em;
+  white-space: nowrap; flex-shrink: 0;
+  margin-left: 0.6em;
+}
+
+/* Header doc title — visible always, fades in more when cover scrolls away */
+.header-doc-title {
+  font-family: var(--font-sans); font-size: 0.82em;
+  font-weight: 500; opacity: 0.55;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  margin-left: 0.6em; flex: 1 1 0; min-width: 0;
+  border-left: 1px solid rgba(255,255,255,0.2);
+  padding-left: 0.6em;
+  transition: opacity 0.35s ease;
+}
+.header-doc-title.visible {
+  opacity: 0.9;
+}
+.header-compact .header-doc-title { font-size: 0.78em; }
+
+/* Header actions */
+.header-actions {
+  display: flex; align-items: center; gap: 2px;
+  flex-shrink: 0; margin-left: auto;
+  padding-left: 0.5em;
+}
+.reader-btn {
+  background: transparent; border: none;
+  color: rgba(255,255,255,0.75); border-radius: 14px;
+  width: 28px; height: 28px; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  padding: 0;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.reader-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
+.reader-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
+.reader-btn:active { transform: scale(0.9); }
+.reader-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
+.reader-btn.disabled { opacity: 0.3; cursor: default; pointer-events: none; }
+.reader-btn.active { background: rgba(255,255,255,0.2); color: #fff; }
+
+/* Settings dropdown */
+.header-settings { position: relative; }
+.settings-toggle { width: 28px; height: 28px; }
+.settings-dropdown {
+  display: none; position: absolute; top: calc(100% + 6px); right: 0;
+  background: var(--color-bg); border: 1px solid var(--color-border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
+  padding: 0.3em; z-index: 200; min-width: 140px;
+}
+.settings-dropdown.open { display: flex; flex-direction: column; gap: 2px; }
+.settings-dropdown .reader-btn {
+  width: 100%; height: auto; padding: 0.35em 0.5em;
+  border-radius: var(--radius-sm); color: var(--color-text);
+  gap: 0.5em; justify-content: flex-start;
+}
+.settings-dropdown .reader-btn:hover { background: var(--color-bg-light); color: var(--mn-primary); }
+.settings-dropdown .reader-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
+.settings-label { font-family: var(--font-sans); font-size: 0.78em; font-weight: 500; white-space: nowrap; }
+.settings-divider { height: 1px; background: var(--color-border); margin: 0.2em 0.4em; }
+
+/* Theme toggle — 4 icons */
+.theme-toggle .icon-light,
+.theme-toggle .icon-sepia,
+.theme-toggle .icon-dark,
+.theme-toggle .icon-oled { display: none; }
+.theme-toggle.mode-light .icon-light,
+.theme-toggle.mode-sepia .icon-sepia,
+.theme-toggle.mode-dark .icon-dark,
+.theme-toggle.mode-oled .icon-oled { display: block; }
+
+/* Sepia header */
+[data-theme="sepia"] .doc-header {
+  background: linear-gradient(135deg, #8B6914 0%, #A67C20 50%, #C49530 100%);
+}
+/* OLED header */
+[data-theme="oled"] .doc-header {
+  background: #000;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
+}
+[data-theme="oled"] .reader-btn { color: rgba(255,255,255,0.6); }
+[data-theme="oled"] .reader-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
+[data-theme="oled"] .settings-dropdown { background: #111; border-color: #333; }
+
+/* Header auto-hide */
+.header-hidden { transform: translateY(-100%); }
+
+/* Reading mode banner */
+.reading-mode-banner {
+  position: sticky; top: var(--header-height); z-index: 99;
+  background: var(--mn-primary-light); color: var(--mn-primary);
+  font-family: var(--font-sans); font-size: 0.82em; font-weight: 500;
+  padding: 0.3em 1em; text-align: center;
+  border-bottom: 1px solid var(--color-border);
+}
+.reading-mode-banner kbd {
+  font-family: var(--font-mono); font-size: 0.9em;
+  background: var(--color-bg-light); border: 1px solid var(--color-border);
+  border-radius: 3px; padding: 0 0.3em;
+}
+.exit-reading-btn {
+  background: none; border: 1px solid var(--mn-primary); color: var(--mn-primary);
+  border-radius: 3px; font-size: 0.95em; font-weight: 600; cursor: pointer;
+  padding: 0.1em 0.6em; margin-left: 0.3em;
+  font-family: var(--font-sans);
+}
+.exit-reading-btn:hover { background: var(--mn-primary); color: #fff; }